@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*-*-*-*-*-*-*-*
GENERAL SETTINGS
*-*-*-*-*-*-*-*/

body {
    font-family: serif;
}

a,
a:hover {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

.container {
    margin: 0 10em;
}

.flex {
    display: flex;
}

.lg_drop {
    display: none;
}

.sm_drop {
    display: block;
}

@media only screen and (max-width: 1000px) {
    .container {
        margin: 1em 0;
    }
}


/* COLOUR SETTINGS */

.f_orange {
    color: #cb6100;
}

.f_gray {
    color: rgb(44, 44, 44);
}

.f_yello {
    color: #ACA720;
}


/*-*-*-*-*-*-*-*
HEADER 
*-*-*-*-*-*-*-*/

header {
    height: 700px;
    background: white url("resources/nora-topicals-Fyd9rSbpdVM-unsplash.jpg") top center/cover no-repeat;
}

h1 {
    font-size: 6vw;
}

header section>div {
    padding: 2em;
}

header section h2 {
    margin-top: 1em;
    color: rgb(31, 31, 31);
    text-shadow: 1px 1px 0 white;
}

header section h1,
header section h3 {
    margin-top: 1em;
    color: rgb(9, 87, 9);
    text-shadow: 1px 1px 0 white;
}

header small {
    display: block;
    margin: auto;
    color: rgb(31, 31, 31);
}

.img_logo {
    max-width: 200px;
    height: auto;
}

#div_bars {
    margin: auto 1em auto auto;
}

#div_bars img {
    max-width: 50px;
    height: auto;
}

.eng {
    color: rgb(7, 170, 159);
}


/*FOR MOBILES */

#div_sm {
    display: flex;
}

#menu_sm {
    display: none;
}

#menu_sm li {
    border-top: 1px solid #ACA720;
    padding: 1em;
}

#menu_sm .allows {
    float: right;
}


/* NAVBAR FOR DESKTOP */

#nav_lg ul {
    margin: 1em auto;
    display: flex;
    justify-content: space-between;
}

#nav_lg li {
    display: block;
    text-align: center;
}


/*-*-*-*-*-*-*-*
MAIN
*-*-*-*-*-*-*-*/

.video_container {
    text-align: center;
    margin: 1em 10em;
}

video {
    margin: 1em auto;
    width: 100%;
}


/* CONCEPT */

#concept_div {
    background: url("resources/index_bg01.jpg") center no-repeat;
    max-width: 100vw;
    height: 377px;
}

#concept .container {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 1em 10em 0;
}

#concept_div>div>div {
    width: 100%;
}

#concept .concept_box {
    width: 60%;
}

.ml_auto {
    margin-left: auto;
}

.mr_auto {
    margin-right: auto;
}

#concept .concept_box,
#concept .font_gray,
footer address,
footer a {
    font-size: .8em;
}

#concept {
    margin: 3em auto 0;
    text-align: center;
}

#concept h3 {
    margin: 1.2em auto;
    font-size: 1.4em;
}


/* LINEUP */

#lineup {
    background: url("resources/index_bg02.jpg") no-repeat fixed center;
    padding: 1em 0;
    text-align: center;
}

#lineup .flex {
    margin: 1.5em auto;
    height: 100%;
    justify-content: space-between;
    background-color: white;
    border-radius: 30px;
}

#lineup .flex>div {
    width: 50%;
    padding: 1em;
    text-align: center;
    margin: auto;
}

#lineup .flex img {
    width: 80%;
    height: auto;
}

#lineup .lineup_description p {
    margin: 1em auto;
}

#lineup>a {
    display: block;
    margin: auto;
    text-align: center;
}

#lineup .button {
    color: white;
    padding: .8em 2em;
    background-color: rgb(45, 193, 206);
    border-radius: 50px;
    border: none;
    display: inline-block;
}

#lineup .button:hover {
    background-color: rgba(45, 193, 206, 0.5);
}


/*-*-*-*-*-*-*-*-*
PRESS
*-*-*-*-*-*-*-*-*/

#press .flex {
    margin: 2em 0;
    justify-content: center;
    padding: 0;
}


/*-*-*-*-*-*-*-*-*
FOOTER
*-*-*-*-*-*-*-*-*/

footer {
    padding-top: 2em;
    text-align: center;
    background-color: #F7F6F2;
}

footer .flex {
    justify-content: center;
    height: 4em;
}

footer .flex small {
    display: inline-block;
    margin: 1.5em 0 0 1em;
}

footer address {
    margin: 1em auto;
    color: rgb(31, 31, 31);
}

footer .f_orange a {
    margin: 0 1.5em;
}


/*-*-*-*-*-*-*-*-*
FOR SMALLER DEVICE
*-*-*-*-*-*-*-*-*/

@media only screen and (max-width: 1000px) {
    .sm_drop {
        display: none;
    }
    .lg_drop,
    #concept_lg {
        display: block;
    }
    .flex {
        display: block;
    }
    /* HEADER */
    #nav_sm {
        background-color: #fff;
    }
    .div_logo {
        margin-left: 1em;
    }
    h1 {
        font-size: 10vw;
    }
    header small {
        margin-left: 1em;
    }
    .video_container {
        margin: 0;
    }
    video {
        width: 100%;
    }
    #concept_div>.container {
        flex-wrap: wrap;
    }
    /* CONCEPT */
    #concept_div {
        background: none;
        height: auto;
    }
    #concept .container {
        margin: 1em 0 0;
    }
    #concept_div,
    #concept_div p {
        background: #F7F6F2;
    }
    #concept_div p {
        margin: .5em 1em;
    }
    #concept .lg_drop {
        margin: auto;
    }
    #concept .lg_drop img {
        width: 100%;
        height: auto;
    }
    #concept_div .ml_auto {
        margin: auto;
    }
    #concept .concept_box {
        width: 100%;
    }
    /* LINEUP */
    #lineup .container {
        margin: 0 2em;
    }
    #lineup .flex>div {
        width: 100%;
    }
    /*PRESS*/
    #press .flex {
        text-align: center;
    }
    /*FOOTER*/
    footer {
        margin: 0;
    }
    footer .flex {
        justify-content: initial;
        height: auto;
    }
    footer .container {
        margin: 0;
    }
    footer .footer_copy_box {
        background-color: rgb(31, 31, 31);
        color: white;
    }
    footer .flex small {
        margin: 0;
    }
}