@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Bold.eot');
    src: local('../fonts/Akrobat-Bold'),
        url('../fonts/Akrobat-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Akrobat-Bold.woff2') format('woff2'),
        url('../fonts/Akrobat-Bold.woff') format('woff'),
        url('../fonts/Akrobat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: bold;
}

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Regular.eot');
    src: local('../fonts/Akrobat-Regular'),
        url('../fonts/Akrobat-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Akrobat-Regular.woff2') format('woff2'),
        url('../fonts/Akrobat-Regular.woff') format('woff'),
        url('../fonts/Akrobat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Akrobat', sans-serif;
}

img {
    width: 100%;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 24px;
    background-color: white;
}

.fa-solid {
    margin-right: 5px;
}

h1 {
    color: #81358a;
    font-weight: 700;
}

/* header */

.header {
    background-color: #ef770b;
    padding: .3%;
}

.header a {
    text-decoration: none;
    color: white;
    font-size: 1.3rem;
}

.main {
    background-color: #d2cfcf;
}

.main__content {
    background-color: white;
}

@media (max-width: 768px) {
    .main {
        background-color: white;
    } 

    .header a {
        text-decoration: none;
        color: white;
        font-size: 1rem;
    }
}

.header button {
    font-weight: bold;
    color: #ef770b;
    transition-duration: .5s;
}

.header button:hover {
    opacity: 70%;
    transition-duration: .5s;
}

/* firstblock */

.anchors {
    padding: 1%;
    width: 80%;
}

.anchors a {
    font-size: 1rem;
    font-weight: 700;
    color: #82358c;
    text-decoration: none;
}

.firstblock {
    background: url(../img/firstblock/bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.firstblock__content {
    padding-top: 5%;
    padding-bottom: 2%;
}

.img__text {
    margin-top: 16%;
}

.spray__img {
    margin-top: -20%;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

@media (max-width: 768px) {
    .firstblock {
        background: url(../img/firstblock/bg.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .img__text {
        margin-top: 0;
        padding-top: 16%;
        padding-bottom: 32%;
    }
}
/* buttons */

.button-prpl {
    background-color: #81358a;
    color: white;
    border: 1px solid white;
    font-size: 1.5rem;
    border-radius: 32px;
    transition-duration: .5s;
}

.button-prpl:hover {
    background-color: white;
    color: #81358a;
    border: 1px solid #81358a;
    transition-duration: .5s;
}
/* secondblock */

.row-cols-2 {
    padding: 0 15px;
}

.row-cols-md-2 .col-md-5 {
    background-color: #ef770b;
    border-radius: 32px;
    padding: 1%;
    color: white;
    margin-bottom: 2%;
    margin-right: 2%;
}

@media (max-width: 768px) {
}
/* thirdblock */

.thirdblock p {
    color: #82358c;
    font-weight: 700;
    font-size: 1.2rem;
}

.thirdblock p.col-12 {
    font-size: 1.4rem;

}

.thirdblock h4 {
    font-weight: 700;
    color: #82358c;
}

.thirdblock .hr {
    height: 2px;
    width: 100%;
    background-color: #82358c;
    margin-bottom: 3%;
}



@media (min-width: 769px) {
    .thirdblock .col-md-6.text-md-right {
        border-right: 2px solid #82358c;
    }
}

.thirdblock img {
    width: 90%;
}

/* fourthblock */

.fourthblock hr {
    border-top: 3px solid #ef770b;
}

.fourthblock p {
    color: #82358c;
    font-size: 1.4rem;
}

.fourthblock span {
    font-size: 1.6rem;
}

.fourthblock .col-md-11 {
    background-color: #82358c;
    border-radius: 24px;
    margin-bottom: 2%;
    padding: 2%;
}

.boxes p {
    color: white;
}

/* fifthblock */

.fifthblock p {
    color: #82358c;
    font-size: 1.6rem;
}

/* sixthblock */

.sixthblock p {
    color: #ef770b;
    font-size: 34px;
    font-weight: bold;
    line-height: 36px;
}

.sixthblock span {
    font-size: 14px;
}

/* map */

.map__button button {
    background-color: #e30813;
    color: white;
    border-radius: 8px;
    border: 1px solid #e30813;
    transition-duration: .5s;
}

.map__button button:hover {
    background-color: white;
    color: #e30813;
    border: 1px solid #e30813;
    transition-duration: .5s;
}

.map__button-white button {
    background-color: white;
    color: #e30813;
    border: 2px solid #e30813;
    border-radius: 8px;
    font-weight: 700;
    transition-duration: .5s;
}

.map__button-white button:hover {
    background-color: #e30813;
    color: white;
    border: 2px solid #e30813;
    transition-duration: .5s;
}

/* copy */

.copy {
    padding: 0 3%;
    margin-top: 4%;
}

.copy p:first-child {
    color: #b3b0b0;
    font-size: 1.4rem;
}

.copy__text span {
    font-size: 8px;
    position: relative;
    bottom: 20%;
}

/* footer */

.footer {
    background: #82358c;
    padding: .5%;
}

.footer p {
    color: white;
}

.block {
    animation: show 1s forwards;
    position: fixed;
    bottom: 1%;
    right: 1%;
    color: #ef770b;
    font-size: 50px;
    color: #000;
  }
.block a {
    text-decoration: none;
    color: #ef770b;
    transition-duration: .3s;
}

.block a:hover {
    opacity: 70%;
    transition-duration: .3s;
} 
@keyframes show {
    0%   { opacity:0; }
    100% { display: block; opacity:1; }
}
  
@keyframes hide {
    0%   { display: block; opacity:1; }
    100% { display: none; opacity:0; }
}
  
.block.hide {
   animation: hide 1s forwards;
}
  
.block.show {
   animation: show 1s forwards;
}