@font-face {
    font-family: 'futura-bold';
    src: url("/libs/fonts/Futura-Bol.otf") format("truetype");
}

@font-face {
    font-family: 'sf-pro-regular';
    src: url("/libs/fonts/SF-Pro-Text-Regular.otf") format("truetype");
}

body {
    font: 400 16px/20px 'sf-pro-regular', Arial, Helvetica, sans-serif;
    background: #eeeeee;
}

label {
    display: flex;
    flex-direction: column;
    width: 30px;
    cursor: pointer;
}

label span {
    background: #000;
    height: 6px;
    margin: 3px 0;
    transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

label span:nth-of-type(1) { width: 60%; }
label span:nth-of-type(2) { width: 100%; }
label span:nth-of-type(3) { width: 60%; margin-left: 40%; }


label input[type="checkbox"] {
    display: none;
}

label input[type="checkbox"]:checked ~ span:nth-of-type(1) {
    width: 50%;
    transform-origin: top left;
    transform: rotatez(
            45deg
    ) translate(6px,-3px);
}

label input[type="checkbox"]:checked ~ span:nth-of-type(2) {
    width: 99%;
    transform-origin: center center;
    transform: rotatez(
            -45deg
    );
}


label input[type="checkbox"]:checked ~ span:nth-of-type(3) {
    width: 50%;
    transform-origin: bottom;
    margin-left: 0;
    transform: translate(10px,-8px) rotatez(
            45deg
    );
}


@keyframes bounce {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.row > * {
    padding-left: 20px;
    padding-right: 20px;
}

nav {
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    top: -100vh;
    background: transparent;
    left: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
}

.opened nav {
    top: 0;
    background: rgba(0,0,0,0.8);
}

.opened label {
    position: fixed;
    top: 3rem;
    z-index: 11;
}

.opened label span {
    background: #fff;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    text-align: center;
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

nav ul li a {
    color: #fff;
    font-family: futura-bold, Arial;
    font-size: 40px;
    line-height: 42px;
    transition: all 0.4s ease-in-out;
}

nav ul li a:hover {
    color: #ef857c;
    letter-spacing: 2px;
}

header {
    background: url(/images/intro/bookme-bg-top-wide.jpg) no-repeat top center;
    min-height: 635px;
}

header h2 span {
    font-size: 36px;
    line-height: 36px;
    display: block;
}

header h2 span span {
    background: #f1d2a2;
    padding: 5px;
    display: inline;
}

header .row:nth-child(2) {
    margin-top: 140px;
}


h2 {
    font-family: futura-bold, Arial;
    font-size: 72px;
    line-height: 110px;
    text-align: center;
}

h3 {
    font-family: futura-bold, Arial;
    font-size: 40px;
    line-height: 42px;
    margin-bottom: 20px;
}

p {
    font-family: sf-pro-regular, Arial;
    font-size: 20px;
    line-height: 26px;
}

.highlight {
    background: #f1d2a2;
    padding: 5px;
    display: inline-block;
    font-family: futura-bold;
    font-size: 35px;
    line-height: 35px;
    margin-bottom: 5px;
}

.space-r-s {
    margin-right: 20px;
}

.space-b-s {
    margin: 0 20px;
}

.space-item {
    margin-top: 240px;
    margin-left: 150px;
}

.bottom-downloads {
    margin-top: 100px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-70 {
    margin-top: 70px;
}

.mt-140 {
    margin-top: 140px;
}

.phones-slider {
    padding-top: 200px;
}

.down-arrow {
    background: url(/images/intro/bookme-downarrow.png) no-repeat 0 0;
    width: 24px;
    height: 16px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -12px;
    animation-name: bounce;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

section:nth-of-type(1) {
    background: url(/images/intro/bookme-bg-s1-wide.jpg) no-repeat top center;
    min-height: 699px;
}

section:nth-of-type(2) {
    margin-top: -220px;
    background: transparent url(/images/intro/bookme-bg-s2.png) no-repeat top center;
    min-height: 1134px;
}

section:nth-of-type(3) {
    margin-top: -440px;
    background: transparent url(/images/intro/bookme-bg-s3-wide.png) no-repeat top center;
}


footer {
    margin-top: 150px;
    padding-bottom: 50px;
}

.swiper-pagination {
    z-index: 10;
}

.swiper-pagination-bullet-active {
    background: #ef857c;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 10px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 30px;
}

.top-downloads a, .bottom-downloads a {
    transition: all 0.5s ease-in-out;
}

.top-downloads a:hover, .bottom-downloads a:hover {
    transform: scale(1.05);
}

.slider-col-scale {
    margin-left: 8.3333333333%;
    flex: 0 0 auto;
    width: 41.6666666667%;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer-links a:hover {
    animation-name: bounce;
    animation-timing-function: linear;
    animation-duration: 0.5s;
}

.footer-copy {
    display: flex;
    align-items: center;
}

@media all and (max-width: 1399px) {
    .space-item {
        margin-left: 70px;
    }

    .slider-col-scale {
        margin-left: 0;
        width: 50%
    }

    .slider-col-scale img {
        width: 100%;
    }

}

@media all and (max-width: 1199px) {
    .space-item {
        margin-left: 0px;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 0px;
    }

    .phones-slider {
        padding-bottom: 4vw;
    }

}

@media all and (max-width: 991px) {
    .mt-140 {
        margin-top: 60px;
    }

    .mt-70 {
        margin-top: 30px;
    }

    .bottom-downloads {
        margin-top: 140px;
    }
}

@media all and (max-width: 767px) {
    header .row:nth-child(2) {
        margin-top: 4vw;
    }

    p {
        font-size: 4.5vw;
        line-height: 6.5vw;
    }

    h2 {
        font-size: 12vw;
        line-height: 12vw;
    }

    h3, p.highlight {
        font-size: 6vw;
        line-height: 8vw;
    }

    header h2 span {
        font-size: 6vw;
        line-height: 10vw;
    }

    header {
        background: #fff url(/images/intro/bookme-bg-top-mobile.jpg) no-repeat top center;
        background-size: contain;
        min-height: initial;
        padding-bottom: 24vw;
    }

    .top-downloads a img {
        width: 100%;
    }

    section:nth-of-type(1) {
        background: #fff;
        min-height: initial;
        padding-top: 16vw;
    }

    section:nth-of-type(2) {
        margin-top: -10vw;
        background: url(/images/intro/bookme-bg-s2-mobile.png) no-repeat top center;
        min-height: initial;
    }

    section:nth-of-type(3) {
        margin-top: -70vw;
    }

    section:nth-of-type(3) .container.swiper {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    section:nth-of-type(3) .container.swiper .row.swiper-slide {
        margin-left: 0;
        margin-right: 0;
    }

    .space-item {
        margin-top: 640px;
    }

    .phones-slider {
        padding-top: 40vw;
        padding-bottom: 10vw;
    }

    .mt-140 {
        margin-top: 0;
    }

    .mt-70 {
        margin-top: 0;
    }

    .bottom-downloads .mt-70 {
        margin-top: 10vw;
    }

    .bottom-downloads {
        margin-top: 20vw;
    }

    .bottom-downloads .col-12.text-center img {
        width: 50%;
    }

    .bottom-downloads img {
        width: 100%;
    }

    nav ul li a {
        font-size: 8vw;
        line-height: 10vw;
    }

    footer .col-12:nth-of-type(1) {
        text-align: center;
    }

    .footer-links {
        justify-content: center;
        margin-top: 5vw;
    }

    .footer-copy {
        justify-content: center;
    }



}