h1 {
    font-family         : 'Source Sans Pro', sans-serif;
    font-weight         : 900;
    font-size           : 10em;
    color               : #fff;
    -webkit-text-shadow : 0 .3rem .9rem rgba(0, 0, 0, .4);
    text-shadow         : 0 0.3rem 0.9rem rgb(0 0 0 / 40%);
    letter-spacing      : -5px;
    margin              : 0;
    padding             : 0;
    }

h2 {
    font-size           : 3em;
    font-family         : arial, helvetica;
    color               : #fff;
    -webkit-text-shadow : 0 .3rem .9rem rgba(0, 0, 0, .4);
    text-shadow         : 0 0.3rem 0.9rem rgb(0 0 0 / 40%);
    margin              : 0;
    padding             : 0;
    }

h3 {
    font-size           : 2em;
    font-family         : arial, helvetica;
    color               : #fff;
    -webkit-text-shadow : 0 .3rem .9rem rgba(0, 0, 0, .4);
    text-shadow         : 0 0.3rem 0.9rem rgb(0 0 0 / 40%);
    margin              : 0;
    padding             : 0;
    }

@media only screen and (max-device-width : 767px) {
    h1 {
        position  : absolute;
        bottom    : 90px;
        font-size : 10em;
        left      : 0;
        right     : 0;
        color     : #fff;
        }

    h2 {
        position  : absolute;
        bottom    : 70px;
        font-size : 3em;
        left      : 0;
        right     : 0;
        }

    h3 {
        position  : absolute;
        bottom    : 20px;
        font-size : 2em;
        left      : 0;
        right     : 0;
        }

    .scrollup-hand {
        animation           : ShowMe 0s 5s forwards;
        visibility          : hidden;
        width               : 200px;
        height              : 200px;
        background          : url(/assets/front/images/scrollup-hand.gif) no-repeat;
        background-size     : cover;
        background-position : center;
        position            : absolute;
        bottom              : 47%;
        right               : 0;
        }
    }

@media only screen and (min-device-width : 768px) {
    h1 {
        position  : absolute;
        bottom    : 60px;
        font-size : 5em;
        left      : 0;
        right     : 0;
        color     : #fff;
        }

    h2 {
        position  : absolute;
        bottom    : 40px;
        font-size : 2em;
        left      : 0;
        right     : 0;
        }

    h3 {
        position  : absolute;
        bottom    : 20px;
        font-size : 1em;
        left      : 0;
        right     : 0;
        }

    .scrollup-hand {
        animation           : ShowMe 0s 5s forwards;
        visibility          : hidden;
        width               : 50px;
        height              : 50px;
        background          : url(/assets/front/images/scrollup-hand.gif) no-repeat;
        background-size     : cover;
        background-position : center;
        position            : absolute;
        bottom              : 20px;
        right               : 0;
        }
    }

@keyframes ShowMe {
    to {
        visibility : visible;
        }
    }

/* Centered texts in each section
* --------------------------------------- */
.section {
    text-align : center;
    overflow   : hidden;
    }

#myVideo {
    position            : absolute;
    right               : 0;
    bottom              : 0;
    top                 : 0;
    width               : 100%;
    height              : 100%;
    background-size     : 100% 100%;
    background-color    : black; /* in case the video doesn't fit the whole page*/
    background-image    : /* our video */;
    background-position : center center;
    background-size     : contain;
    object-fit          : cover; /*cover video background */
    z-index             : 3;
    }


/* Layer with position absolute in order to have it over the video
* --------------------------------------- */
.section .layer {
    position          : absolute;
    z-index           : 4;
    width             : 100%;
    height            : 100%;
    left              : 0;
    top               : 0;

    /*
    * Preventing flicker on some browsers
    * See http://stackoverflow.com/a/36671466/1081396  or issue #183
    */
    -webkit-transform : translate3d(0, 0, 0);
    -ms-transform     : translate3d(0, 0, 0);
    transform         : translate3d(0, 0, 0);
    }

/*solves problem with overflowing video in Mac with Chrome */
#section0 {
    /*overflow: hidden;*/
    }


/* Bottom menu
* --------------------------------------- */
#infoMenu li a {
    color : #fff;
    }


/* Hiding video controls
* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
* --------------------------------------- */
video::-webkit-media-controls {
    display : none !important;
    }