@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Poppins:400,400i,700,700i,900,900i');

body {
	font-family: 'Poppins', sans-serif;
	background-color:#f1f4f5;
	background-repeat: repeat;
  background-attachment: fixed;
	color:#323232;
	font-size:25px;
	line-height:40px;
}

* {box-sizing: border-box;}

a {
  color:#32323270;
  text-decoration: none;
  border-bottom:4px solid #f1c70b;
  font-size: 0.7em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
a:hover {
  color: #323232;
}

::selection {background:#f1c70b70;}
::-moz-selection {background:#f1c70b70;}

.video-wrapper {
  position: relative;
  width: 100%;
z-index:99;
  height: 100vh;
  background:#323232;
  overflow: hidden;
}

.video-overlay {
  height: 100%;
  opacity: 1;
  position: absolute;
  width: 100%;
  z-index: 2;
  background:#0000000f;
}

.video-expand {
  display:none;
  -webkit-transition-duration: 0.3s; /* Safari */
  transition-duration: 0.3s;
  color: white;
  font-size: 1.125rem;
  line-height: 1em;
  opacity: 1;
  position: absolute;
  top: 0.9375rem;
  right: 0.9375rem;
  z-index: 3;
}
.video-expand:hover {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.cover {
  position: absolute;
  margin: auto;
  top: 0%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  text-align: center;
}

.tv {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tv .screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  margin: auto;
  opacity: 0;
  transition: opacity .1s;
}
.tv .screen.active {
  opacity: 1;
}


#menu {
    padding-left: 10vw;
    padding-right: 10vw;
    position: absolute;
    top:0;
    display:block;
    z-index:-1;
}
left, right {
  display:inline-block;
  width:49%;
  float:left;
  height:100vh;
  padding:20vh 5%;
  margin: 0% 0.5%;
}
#menu b {
  display: block;
  font-size:2em;
  line-height: 2em;
}
#menu b img {width:40px;}
.bg {
  color:#fff;
    margin: 0 auto;
    position: fixed;
    display: block;
    width: 100%;
    text-align: center;
    padding-top: 40vh;
    z-index: -999;
  }
h2 {
  display:block;
  width:100%;
  text-align: center;
    line-height:80px;
    font-size: 100px;
}
right a {
  margin-right:10px;
}
.ontop,.nontop {
  position: fixed;
  z-index:100;
  width:100px;
  background:#fff;
  border:none;
  display:block;
  padding:20px;
  line-height:60px;
  height:100px;
  text-align: center;
  font-size:30px;
  bottom:0;
}
.header img {
    object-fit: cover;
    object-position: 50% 50%;
    width: 100%;
    height: 100vh;
}

#project left p, #project right p {
  padding:0px;
}
#project right p {
  text-align:left;
}
#project right {
      padding:50px 10% 80px 0%;
}
#project left {padding:80px 0% 80px 10%;}
#project left, #project right {
  text-align:center;
    height:unset;
}
#project left img {
  width:100%;
  max-width:300px;
}
#project p {
  text-align: center;
  padding:50px 20%;  
}
#project h2 {
  margin:100px 0px 0px 0px;
}
.images img {
margin-bottom:-12px;
width:100%;
}

/*/ FADE IN LEFT /*/

.animated { 
    -webkit-animation-duration: .8s; 
    animation-duration: .8s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
} 

@-webkit-keyframes fadeInLeft { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-30px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
} 
@keyframes fadeInLeft { 
    0% { 
        opacity: 0; 
        transform: translateX(-30px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
} 

.fadeInLeft { 
    -webkit-animation-name: fadeInLeft; 
    animation-name: fadeInLeft; 
}

@keyframes fadeInUp { 
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

.fadeInUp { 
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
}

/*/ Responsive /*/
@media (max-width : 1000px) {
left, right, #project right, #project left {margin:0%;
width:100%;height:unset; padding:50px 50px 0px 50px;}
#project right p {text-align: center;}
#project p {padding:50px 10%;}
}

@media (max-width : 700px) {
#intro,.ontop {display:none;}
h2 {font-size:70px;
line-height:60px;}
#project {background-color:#f2f4f5;}
.mobilehide {display:none;}
}

@media (max-width : 450px) {
body {font-size:20px;
line-height:30px;}
#menu left, #menu right {
  padding:50px 20px 0px 20px;
}
.bg {display:none;}
h2 {font-size:50px;line-height:45px;}
#menu right {padding-bottom:50px;}
.nontop {height:50px;padding:10px;line-height:30px;
font-size:20px;
width:100%;}
}