/*  ==========================================================================
    Global
    ==========================================================================  */

    @font-face {
        font-family: 'geogrotesque_medium';
        src: url('fonts/Geogrotesque-Medium.ttf');
        src: url('fonts/Geogrotesque-Medium.woff') format('woff'),
             url('fonts/Geogrotesque-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    html {
      box-sizing: border-box;
    }

    *, *:before, *:after {
      box-sizing: inherit;
    }

    html, body, div, a, img, p, ul, li {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
    }

    body {
        font-family: 'geogrotesque_medium', 'Quicksand', 'Verdana', sans-serif !important;
        font-weight: 400;
        font-size: 16px;
        line-height: 1;
        color:#001b54;
    }

    #ad {
        position:relative;
        display: block;
        border: #ddd 1px solid;
        overflow: hidden;
        width: 1300px;
        height: 422px;
        cursor:pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

    #ad:hover {cursor:pointer;}
    .fullScreen {width:100%;height:100%;}
    .w100 { width: 100%;}
    .text_center {text-align: center;}
    .posAbs {position:absolute;}
    .posRel {position:relative;}
    .bold {font-weight:700;}
    .uppercase {text-transform: uppercase;}
    .nooverflow {overflow:hidden;}
    .hide {display:none;}

/*  ==========================================================================
    BTN
    ==========================================================================  */

    .btn {
        display: inline-block;
        position: relative;
        padding: 15px 50px 15px 50px;
        font-size: 18px;
        line-height: 22px;
        color: #fff;
        background-color: #24264e;
        border-radius: 10px;
        opacity: 0;

        -webkit-transition: all .2s;
                transition: all .2s;

        -webkit-transform: translateY(60px);
            -ms-transform: translateY(60px);
                transform: translateY(60px);

        -webkit-animation: btn_in 1s 10.3s forwards cubic-bezier(.75,0,.25,1);
                animation: btn_in 1s 10.3s forwards cubic-bezier(.75,0,.25,1);
    }

        #ad:hover .btn {
            padding: 15px 60px 15px 40px;
        }

    .btn::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 50px;
        width: 6px;
        height: 10px;
        background-image: url('img/arrow.svg');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        opacity: 0;

        -webkit-transition: all .2s;
                transition: all .2s;

        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }

        #ad:hover .btn::after {
            right: 40px;
            opacity: 1;
        }

/*  ==========================================================================
    Typography
    ==========================================================================  */

    .text {
        font-size: 40px;
        line-height: 46px;
        color: #001b54;
    }

/*  ==========================================================================
    Copy
    ==========================================================================  */

    .copy {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 70px;
        width: 550px;

        -webkit-transition: all .2s;
                transition: all .2s;
    }

    .copy__bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #c3e0ae;
        opacity: .9;

        -webkit-transform: translateY(100%);
            -ms-transform: translateY(100%);
                transform: translateY(100%);

        -webkit-animation: copy_container_in 1.5s .5s forwards cubic-bezier(.75,0,.25,1);
                animation: copy_container_in 1.5s .5s forwards cubic-bezier(.75,0,.25,1);
    }

    .copy__text {
        position: absolute;
        top: 40px;
        right: 40px;
        left: 40px;
        opacity: 0;

        -webkit-transform: translateX(60px);
            -ms-transform: translateX(60px);
                transform: translateX(60px);
    }

        .copy__text--01 {

            -webkit-animation: copy_in 1s 1.3s forwards cubic-bezier(.75,0,.25,1), copy_out 1s 5.3s forwards ease-out;
                    animation: copy_in 1s 1.3s forwards cubic-bezier(.75,0,.25,1), copy_out 1s 5.3s forwards ease-out;
        }

        .copy__text--02 {

            -webkit-animation: copy_in 1s 5.8s forwards cubic-bezier(.75,0,.25,1), copy_out 1s 9.8s forwards ease-out;
                    animation: copy_in 1s 5.8s forwards cubic-bezier(.75,0,.25,1), copy_out 1s 9.8s forwards ease-out;
        }

        .copy__text--03 {

            -webkit-animation: copy_in 1s 10.3s forwards cubic-bezier(.75,0,.25,1);
                    animation: copy_in 1s 10.3s forwards cubic-bezier(.75,0,.25,1);
        }

    .copy__btn {
        position: absolute;
        bottom: 70px;
        left: 40px;
    }

/*  ==========================================================================
    Watches
    ==========================================================================  */

    .watches {
        position: absolute;
        right: 40px;
        bottom: 10px;
        width: 220px;
        font-size: 0;
        line-height: 0;
    }

    .watches__item {
        display: inline-block;
        width: 50%;
        font-size: 16px;
        line-height: 22px;
    }

    .watches__img {
        width: 100%;
        opacity: 0;

        -webkit-transform: scale(0.9);
            -ms-transform: scale(0.9);
                transform: scale(0.9);
    }

        .watches__img--01 {

            -webkit-animation: watch_in .5s 10.8s forwards cubic-bezier(.69,0,.52,1.39);
                    animation: watch_in .5s 10.8s forwards cubic-bezier(.69,0,.52,1.39);
        }

        .watches__img--02 {

            -webkit-animation: watch_in .5s 11.0s forwards cubic-bezier(.69,0,.52,1.39);
                    animation: watch_in .5s 11.0s forwards cubic-bezier(.69,0,.52,1.39);
        }

/*  ==========================================================================
    Background
    ==========================================================================  */

    .bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 70px;
        left: 0;
    }

    .bg__visu {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    .bg__img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #eee;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;

        -webkit-transition: all .2s;
                transition: all .2s;

        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
    }

        #ad:hover .bg__img {
            -webkit-transform: scale(1.03);
                -ms-transform: scale(1.03);
                    transform: scale(1.03);
        }

/*  ==========================================================================
    Footer
    ==========================================================================  */

    .footer {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 70px;
        background-color: #fff;
        border: 1px solid #eee;
    }

    .footer__logo {
        position: absolute;
        top: 50%;
        right: 30px;
        width: 240px;

        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    }

    .footer__bird {
        position: absolute;
        top: 0;
        left: 30px;
        width: 70px;
        opacity: 1;

        -webkit-transform: translateY(-95%);
            -ms-transform: translateY(-95%);
                transform: translateY(-95%);

        /* -webkit-animation: bird_out 1s 10.5s forwards ease-out;
                animation: bird_out 1s 10.5s forwards ease-out; */
    }

/*  ==========================================================================
    Animations
    ==========================================================================  */

    @-webkit-keyframes copy_container_in {
        to {-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
    }

    @keyframes copy_container_in {
        to {-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
    }

    /* -------------------- */

    @-webkit-keyframes copy_in {
        to {opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
    }

    @keyframes copy_in {
        to {opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}
    }

    /* -------------------- */

    @-webkit-keyframes copy_out {
        from {opacity: 1;}
        to {opacity: 0;}
    }

    @keyframes copy_out {
        from {opacity: 1;}
        to {opacity: 0;}
    }

    /* -------------------- */

    @-webkit-keyframes bird_out {
        to {opacity: 0;}
    }

    @keyframes bird_out {
        to {opacity: 0;}
    }

    /* -------------------- */

    @-webkit-keyframes watch_in {
        to {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
    }

    @keyframes watch_in {
        to {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
    }

    /* -------------------- */

    @-webkit-keyframes btn_in {
        to {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
    }

    @keyframes btn_in {
        to {opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);}
    }

    /* -------------------- */