/**
 * Header *********************************************************************************************************************************
 */
#header{
    background-position:center 0px;
    background-size:    cover;
    background-repeat:  no-repeat;
    width:              100%;
    height:             100vh;
    position:           relative;
    text-align:         center;
    background:         url('../img/header-background.jpg') no-repeat; background-size: cover; background-position: bottom;
}

#header-video{
    height:             100%;
    width:              100%;
    object-fit:         cover;
    position:           absolute;
    left:               0;
    right:              0;
    top:                0;
    z-index:            -1;
}

#header-nav-1{
    display:            block;
    position:           relative;
    top:                10%;
}

#header-nav-2{
    position:           absolute;
    bottom:             10%;
    left:               6%;
    text-align:         left;
}

#header-nav-1 a, #header-nav-2 a{
    font:               normal 1.5vw "BodoniModa", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:              #fff;
    margin:             0 30px 0 30px;
    background:         linear-gradient(to top, #fff 2px, transparent 1px) no-repeat;
    background-size:    0 100%;
    transition:         background-size 0.3s;
    text-transform:     uppercase;
}
#header-nav-1 a:hover, #header-nav-2 a:hover{background-size:100% 100%;}

#header-nav-2 a{
    font:               normal 1.3vw "Nanito", "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#frontpage{
    margin-bottom:      5%;
}
#frontpage-title{
    position:           relative;
    display:            inline-block;
    padding:            5px;
    font:               normal 1.5em "Nanito", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#frontpage-title span{
    display:            block;
    position:           absolute;
    background:         #fff;
    transform:          skew(15deg);
    width:              100%;
    height:             100%;
    z-index:            -1;
    top:                0;
    left:               0;
}
#frontpage-info{
    font-size:          0.8em;
    padding-left:       5px;
}

#header-logo{
    width:              10vw;
    position:           absolute;
    z-index:            4;
    top:                7%;
    left:               5%;
    animation:          anim-headerLogo 0.9s normal;
    animation-fill-mode:forwards;
}

#header-title{
    position:           relative;
    color:              #fff;
    top:                30vh;
}

#header-title span:first-child{
    font:               normal 6vw "GreatVibes", "Trebuchet MS", Arial, Helvetica, sans-serif;
    display:            block;
    line-height:        10vh;
}

#header-title span:last-child{
    font-size:          3vh;
}

#header-arrow{
    width:              2%;
    position:           absolute;
    bottom:             5vh;
    animation:          anim-headerArrow 1s normal;
    animation-iteration-count: infinite;
    z-index:            5;
}
#header-arrow:hover{cursor: pointer;}

#header-shape-overlay{
    position:           absolute;
    width:              100%;
    height:             30%;
    bottom:             -15%;
    left:               0;
    overflow:           hidden;
}

#header-shape{
    position:           absolute;
    transform:          rotate(-5deg);
    width:              110%;
    height:             50%;
    top:                30%;
    left:               -1%;
    background:         #fff;
}

/**
 * Page about *********************************************************************************************************************************
 */
#about{background: #fff; padding-bottom: 4%;} 
#about-title{float: left;}
#about-title h1{color: #123840;}
#about-title h2{color: #c0e9e8;}

.widget-container{
    position:           relative;
    margin:             5% auto auto auto;
    height:             auto;
    width:              70%;
}
#widget1{clear: both;}
.widget-cover{
    width:              0%;
    height:             100%;
    position:           absolute;
    left:               0;
    bottom:             0;
    background:         #c0e9e8;
}

.widget-reveal{
    width:              100%;
    height:             100%;
    display:            grid;
    grid-template-columns: 1fr 2fr;
    align-items:        center;
    opacity:            0;
}

.widget-item{
    grid-column:        1;
    grid-row:           1;
    font:               normal 1.4em "Nunito", "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align:         right;
}
.widget-img{
    grid-column:        2;
    grid-row:           1;
    transform:          rotate(2deg);
}
.img-container{
    margin-left:        20%;
    width:              50%;
    box-shadow:         0 32px 28px -10px rgba(0,0,0,.22);
    overflow:           hidden;
}
.img-container img{
    position:           relative;
    transition:         all .3s ease;
    width:              100%;
}
.img-container:hover img{
    transform:          scale(1.3) rotate(-3deg);
}

#widget2 .widget-reveal{grid-template-columns: 2fr 1fr; }
#widget2 .widget-item{grid-column:2; text-align: left;}
#widget2 .widget-img{grid-column:1;}
#widget4 {margin-bottom: 9%;}
#widget4 .widget-reveal{grid-template-columns: 2fr 1fr; }
#widget4 .widget-item{grid-column:2; text-align: left;}
#widget4 .widget-img{grid-column:1;}

#about .shape{background: #c0e9e8 url('../img/noise-texture-lighter.png');}

.smartphone-widget-img{display: none;}

#about .subtitle{
    color:              #c0e9e8;
}
#office-wrapper{
    width:              100%;
    position:           relative;
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-between;
    margin-bottom:      5%;
}

.office-box{
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-between;
    flex:               0 1 auto;
    width:              30%;
    position:           relative;
    margin-bottom:      2%;
}

.office-img, .office-info{
    position: relative;
    flex:               0 1 auto;
    width:              50%;
    position:           relative;
    align-items:        center;

}

.office-info{
    padding:            13% 10% 0 0;
    text-align:         right;
}

.office-info div:first-child{
    font-size:          1.4em;
}

.office-img img{
    width:              15vh;
    border:             8px #fff solid;
    border-radius:      3px;
    box-shadow:         0px 0px 8px 4px rgba(0,0,0,0.67);
    transform:          rotate(2deg);
}

/**
 * Page contact *********************************************************************************************************************************
 */
#contact{background: #c0e9e8 url('../img/noise-texture-lighter.png') repeat;}
#contact-title{float: right; margin-right: 10%;}
#contact-title h1{color: #123840;}
#contact-title h2{color: #fff;}

#contact-wrapper{
    height:             70vh;
    position:           relative;
    width:              80%;
    display:            grid;
    grid-template-columns: 40% 40%;
    margin:             0 auto 2% auto;
    justify-content:    space-around;
    align-items:        center;
}

#contact-box-wrapper, #contact-form-wrapper{
    border:             1px solid #fff;
    padding:            5%;
}

#contact-box-wrapper{
    color:              #fff;
    font:               normal 1.2em 'Nunito';
}

.contact-box-subwrapper{margin-bottom: 5%;}
.contact-box-subwrapper a{color: #fff;}
.contact-box-subwrapper:last-child{margin-bottom: 0%;}
.contact-box{display: inline-block;}
.contact-box::before{
    content:            '';
    display:            inline-block;
    width:              32px;
    height:             32px;
    border:             1px solid #fff;
    border-radius:      5px;
    vertical-align:     middle;
    margin-right:       10px;
    text-align:         center;
    font-size:          1.5em;
    transition:         all 0.3s;
}
#contact-box-phone::before{content: "\260E";}
#contact-box-mail::before{content: "\2709";}
#contact-box-facebook::before{content: "f";}
.contact-box:hover::before{
    border-color:       #123840;
    color:              #000;
    background:         #fff;
    transform:          rotate(8deg);
}
.contact-box:hover{color:#123840;;}

form button:hover, #posters-wrapper button:hover{cursor:pointer;}
input[type="text"], input[type="mail"], textarea{
    padding:            10px;
    font:               normal 1em 'Nunito';
    background:         #123840;
    color:              #fff;
    transition:         all 0.3s;
    border-radius:      5px;
    font-weight:        bold;
    margin-bottom:      5%;
}
input[type="text"], input[type="mail"]{
    width:              100%;
    height:             30px;
}
textarea{
    width:              100%;
    height:             50%;
    resize:             none;
    display:            block;
}
input[type="submit"], form button, #posters-wrapper button{
    padding:            3% 5% 3% 5%;
    background:         #123840;
    font:               normal 1.2em 'Nunito';
    color:              #fff;
    text-align:         center;
    margin:             5% auto;
    display:            block;
    position:           relative;
    border-radius:      5px;
    transition:         all 0.3s;
}
input[type="submit"]:hover, form button:hover, #posters-wrapper button:hover{
    background:         #eaedaa;
    cursor:             pointer;
}