/* assets */
/* MOTOE BLUE ----------- 45cdff */
/* MOTOE RED ----------- ec6367 */
/* -----------SECTION 1 -------------*/
.parallax { 
    /* The image used */
    background-image: url("../img/poster.gif");
    
    /* Set a specific height */
    height: 1100px; 
    
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    /* background-position: center; */
    background-position: 50% calc(50% - 100px) ;	
    background-repeat: no-repeat;
    background-size: cover;
}
#section1-left .intro ,#section1-right .intro{
   
    visibility: hidden;
    }

#section1-left h1,
#section1-right h1{
    width: 100%;
    color: white;
    z-index: 999;
    font-weight: bold;
    text-align: center;
    display: block;
    margin: 0;
    padding: 0;
    font-size: 7em;
}

#section1-left h1{
    left: 50%;
}
#section1-right h1{
    left: -50%;
}
#section1-right.hideOverflow{
    overflow: hidden;
}
/* --------------------------------- */
/* -----------SECTION 2 -------------*/
/* --------------------------------- */

#vid {
    width: 80%;
    height: 80%;
    }
#demo {
    /* opacity: 0.5; */
    font-family:  'Lato',sans-serif;
    font-size: 1em;
    }


#section2-left{
    background: #000;
    background-size: 200%;
}
#section2-left .intro{
    padding: 0 0 60px 0;
}
#section2-left .intro:last-child{
    padding: 0;
}
#section2-left h1{
    font-size: 1em;
    color: #45cdff;
    text-shadow: 0 0 3em #45cdff;
    font-family:  'Lato',sans-serif;
    letter-spacing: 1px;
    padding-top: 5%;
    /* padding: 10% 0 0 0; */
}
#section2-right h2{
    font-size: 3em;
    color: #45cdff;
    text-shadow: 0 0 3em #45cdff;
    font-family:  'Rational',sans-serif;
    letter-spacing: 1px;
}
#section2{
    vertical-align: top;
}
#section2-right{
    text-align: center;
}


.ms-left .section2 .fullscreen{
    top:23%;
}
.ms-left .section5 .fullscreen{
    top:23%;
}
.fullscreen{
    background: black;
    position: inherit;
    width:200%;
    height: 100%;
    left: 0;
    z-index: 1;
    vertical-align: middle;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* --------------------------------- */
/* -----------SECTION THREE----------*/
/* --------------------------------- */


#section3-left{
background-image: url(../img/hercule.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
font-family:  'Rational',sans-serif;
color: #45cdff;
    text-shadow: 0 0 1.36vw #45cdff;
    font-family:  'Rational',sans-serif;
    letter-spacing: 1px;
}
#section3-right{
background-image: url(../img/jd.gif);
background-repeat: no-repeat;
background-position: center;
width: 100%;
background-size: cover;
font-family:  'Rational',sans-serif;
color: #45cdff;

text-shadow: 0 0 1.36vw #45cdff;
font-family:  'Rational',sans-serif;
letter-spacing: 1px;
}
#section3-left .ms-tableCell ,#section3-right .ms-tableCell{
vertical-align: bottom;

}
#section3-left:hover ,#section3-right:hover{
vertical-align: bottom;
background-color: white;
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}

/* Turn off parallax scrolling for tablets and phones */
.sectionContainer {
    position: relative;
    width: 100%;
    height: 100%;
    }

#section3-left h2 ,#section3-right h2{
vertical-align: bottom;
font-size: 3em;
color: #45cdff;
text-shadow: 0 0 3.36vw #45cdff;
font-family:  'Lato',sans-serif;
letter-spacing: 1px;
}



.text {
    white-space: nowrap; 
    color: #45cdff;
    text-shadow: 0 0 1.36vw #45cdff;
            font-family:  'Rational',sans-serif;
            letter-spacing: 1px;
    position: absolute;
    overflow: hidden;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    word-wrap: break-word;
} 
    
.text p{
    font-size: 20px;
    
}
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: #333;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
opacity: .7;
}

.overlay2 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #333;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
opacity: .7;
}

#section3-right:hover .overlay {
width: 100%;
height: 100%;
left: 0;

}
#section3-left:hover .overlay2 {
width: 100%;
height: 100%;

}


/* --------------------------------- */
/* -----------SECTION FOUR----------*/
/* --------------------------------- */



#section4-right{
background-color: black;
background-image: url(../img/evidence.png);
background-repeat: no-repeat;
background-size: auto 90%;
background-position: center;
width: 100%;


}
#section4-left{
background-color: black;
background-image: url(../img/suspect.png);
background-repeat: no-repeat;
background-position: center;
width: 100%;
background-size: auto 95%;
}


#section4-left .intro ,#section4-right .intro{
color: #ec6367;
text-shadow: 0 0 4.36vw #ec6367;
font-size: 2em;
visibility: hidden;
}
a { color: inherit; } 


#section4-right{
color: #000;
}
#section4-left{
color: #000;
}
#section4-right,#section4-left{
color: #000;
}


/* --------------------------------- */
/* -----------SECTION 5--------------*/
/* --------------------------------- */



#section5-left {text-align: center;}
#section5-left h1 ,#section5-right h1{
color: #45cdff;
font-family: 'Lato',sans-serif;
text-shadow: 0 0 4.36vw #45cdff;
font-size: 2.5em;
padding-top: 5%;
width: 60%;
text-align:center;
margin: auto;

}
#section5-left h2 ,#section5-right h2{
    color: #45cdff;
    font-family: 'Lato',sans-serif;
    text-shadow: 0 0 4.36vw #45cdff;
    font-size: 1.5em;
    
    width: 60%;
    text-align:left;
    margin: auto;
    
    }


.caption {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
color: #000;
}

.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}

h3 {
letter-spacing: 3px;
text-transform: uppercase;
font-family:  'Rational',sans-serif;
color: #ffffff;
}
#id{
color: white;
}







#header, #footer {
position: fixed;
height: 10px;
font-size: 10px;
display: block;
width: 100%;
background: #000;
z-index: 9;
text-align: left;
color: #333;
padding: 20px 0 0 0;
}
#footer{
bottom:0px;
}