html {
    padding: 0;
    margin: 0;
}

body {
    padding: 0;
    margin: 0;
    background: #ffffff;
    color: #000;
    font-family: 'Helvetica Neue';
    line-height: 1.2;
}

.wrapp-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

h1,
h2,
h3,
h4 {
    font-family: 'Bebas Neue';
}

strong {
    display: block;
}

header {
    height: 470px;
    background: url(../images/im-1.png) no-repeat 50% 50%;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

header .text {
    max-width: 200px;
    padding: 0 0 0 25px;
    position: relative;
}

header::before {
    content: '';
    display: block;
    width: 225px;
    height: 100%;
    border-radius: 0 0 500px 0;
    background: #f3d5c2;
    -webkit-filter: blur(70px);
    filter: blur(70px);
    position: absolute;
    top: 0;
    left: 0;
}

header .text h1 {
    font-size: 2.5em;
}

header .text p {
    font-size: 0.875em;
    line-height: 1.2;
    font-weight: 600;
}

#slider {
    width: calc(100% - 42px);
    overflow: hidden;
    padding: 10px 21px 23px;

}

#slider ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#slider ul li {
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
}

#slider ul li img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 5px;
}

#slider .owl-carousel .owl-stage-outer .owl-stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    width: 30px;
    height: 30px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 15px 5px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 15px 5px rgba(0, 0, 0, 0.03);
    position: absolute;
    top: 50%;
    left: -15px;
    line-height: 30px;
    font-size: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.owl-carousel .owl-nav button.owl-next {
    left: auto;
    right: -15px;
}

.owl-carousel .owl-nav button.owl-next svg,
.owl-carousel .owl-nav button.owl-prev svg {
    width: 7px;
}

.owl-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-column-gap: 5px;
    column-gap: 5px;
    padding: 6px 0 0;
}

.owl-carousel button.owl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0c0c1;
}

.owl-carousel button.owl-dot.active {
    background: #e7527e
}

#about {
    width: calc(100% - 42px);
    padding: 0 21px 17px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

#about .text {
    width: calc(32% - 25px);
    padding: 0 25px 0 0;
}

#about .text p {
    font-size: 1em;
}

#about .text h2 {
    font-size: 1.375em;
    padding: 0 0 10px;
    margin: 0 0 10px;
    position: relative;
}

#about .text h2::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #e7527e;
    position: absolute;
    bottom: 0;
}

#about .image {
    width: 44%;
}

#about .image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#about .icons {
    width: 24%;
    background: #000000;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#about .icons ul {
    padding: 25px 16px 5px;
    margin: 0;
    list-style-type: none;
}

#about .icons ul li {
    padding: 0 0 20px;
    margin: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 13px;
    column-gap: 13px;
}

#about .icons ul li p {
    padding: 0;
}

#about .icons ul li p strong {
    font-weight: 600;
    display: block;
    padding: 0 0 5px;
}

#about .icons ul li img {
    max-width: 100%;
    height: auto;
}

#how {
    padding: 15px 0 20px;
    background: #f3f3f2;
}

#how h2 {
    font-size: 1.375em;
    padding: 0 0 10px;
    margin: 0 0 6px;
    position: relative;
    text-align: center;
}

#how h2::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #e7527e;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#how ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0 21px;
    margin: 0;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-column-gap: 5%;
    column-gap: 5%;
}

#how ul li {
    text-align: center;
    width: 20%;
    position: relative;
}

#how ul li .ar {
    position: absolute;
    top: 35px;
    right: -15%;
}

#how ul li span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0 0 5px;
}

#how ul li p {
    max-width: 120px;
    margin: 0 auto;
    font-size: 0.875em;
}

#how ul li strong {
    display: block;
}

#artist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 11px 21px;
}

#artist .image {
    width: 36%;
}

#artist .image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#artist .text {
    width: calc(39% - 60px);
    padding: 9px 30px 4px;
}

#artist .text h2 {
    font-size: 1.375em;
    padding: 0 0 10px;
    margin: 0 0 10px;
    position: relative;
}

#artist .text h2::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #e7527e;
    position: absolute;
    bottom: 0;
}

#artist .text p {
    font-size: 0.875em;
}

#artist .icon {
    width: 25%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#artist .icon .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 16px;
    column-gap: 16px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0 20px;
}

#artist .icon .link a {
    color: #e7527e;
    text-decoration: none;
}

#artist .icon .link a:hover {
    text-decoration: underline;
}

#wer {
    padding: 8px 21px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #f3f2f1
}

#wer .text {
    width: calc(28% - 40px);
    padding: 0 40px 0 0;
}

#wer .text h2 {
    font-size: 1.375em;
    padding: 0 0 10px;
    margin: 0 0 10px;
    position: relative;
}

#wer .text h2::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #e7527e;
    position: absolute;
    bottom: 0;
}

#wer .image {
    width: 40%;
}

#wer .image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#wer .map {
    width: calc(32% - 21px);
    padding: 0 0 0 21px;
}

#wer .map img.maps {
    width: 100%;
    height: auto;
}

#wer strong {
    display: block;
}

footer {
    padding: 12px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #000000;
    color: #ffffff;
}

footer .one {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 51%;
    -webkit-column-gap: 25px;
    column-gap: 25px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

footer .one p {
    padding: 0;
}

footer .two {
    width: 17%;
}

footer .two .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    padding: 4px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

footer .two .link p {
    padding: 0;
}

footer .two .link a {
    text-decoration: none;
    color: #fff;
}

footer .two .link a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    #about {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #about .image,
    #about .icons,
    #about .text {
        width: 100%;
    }

    #about .text {
        padding: 0 0 20px;
    }

    #how ul {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #how ul li {
        width: 40%;
    }

    #how ul li .ar {
        display: none;
    }

    #artist {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #artist .text {
        padding: 20px 0 20px;
        margin: 0 0 20px;
        border-bottom: 1px solid #f3f2f1;
    }

    #artist .image,
    #artist .icon,
    #artist .text {
        width: 100%;
    }

    #wer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #wer .image {
        padding: 20px 0;
    }

    #wer .map {
        padding: 0 0 20px;
    }

    #wer .text {
        padding: 0 0;
    }

    #wer .image,
    #wer .map,
    #wer .text {
        width: 100%;
    }

    footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 12px 21px;
    }

    footer .one,
    footer .two {
        width: 100%;
        padding: 4px;
    }

    footer .two {
        max-width: 200px;
    }
}
