@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);


body{
  background-color: #121b24;
  touch-action: manipulation;
  font-family: 'Roboto', sans-serif;
  font-size:15px;
  font-weight: 300;
  overflow-y:scroll;
  -webkit-font-smoothing: antialiased;
}

::selection {
		background: #fff;
		color: #121b24;
		text-shadow: none;
	}
	
::-moz-selection {
	background: #fff;
	color: #121b24;
	text-shadow: none;
}

p{
  font-family: 'Roboto', sans-serif;
  font-size:15px;
  font-weight: 300;
}

a{
  text-decoration:none;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in; 
}

a:focus {
  outline:none;
}

strong{
  font-weight:700;
}

/*
**************************
PRELOADER
**************************
*/

.preloader{
  position:fixed;
  top:0;
  width:100%;
  height:100%;
  background: #121b24;
  z-index:999;
}
 
.preloader .item{
  position:absolute;
  width:50px;
  height:50px;
  left:50%;
  top:50%;
  margin-left:-25px;
  margin-top:-25px;
} 

.spinner {
  width: 40px;
  height: 40px;
  margin: 0px auto;
  background-color: #374b5a;
  border-radius: 100%;  
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}


/*
**************************
NAVIGATION OPACITY
**************************
*/

.opacity-nav{
  position:fixed;
  display:none;
  width:100%;
  height:100%;
  float:right;
  top:0;
  z-index:99;
  background:rgba(0,0,0,0.95);
}

ul.menu-fullscreen{
  width: 100%;
  top: 50%;
  position: absolute;
  height: 280px;
  margin-top: -140px;
}

ul.menu-fullscreen li{
  font-size:50px;
  text-align:center;
  line-height:90px;
  font-weight:900;
}

ul.menu-fullscreen li > a{
  color:#999999;
  border:0;
}

ul.menu-fullscreen li > a:hover{
  color:#121b24;
}

#full{
  width:1340px;
  position: relative;
  top:0;
  margin:0 auto;
  z-index: 97;
}

#fullscreen{
  display:none;
  position:absolute;
  top:0;
  width:100%;
  margin:0 auto;
  height:80px;
  z-index: 98;
}

/*
**************************
HEADER
**************************
*/

header.boxed{
  position:fixed;
  width:100%;
  margin:0 auto;
  height:80px;
  z-index:99;
  display:none;
  background:none;
  top:0;
    -webkit-transition: background 0.2s ease-in;
	-moz-transition: background 0.2s ease-in;
	-ms-transition: background 0.2s ease-in;
	-o-transition: background 0.2s ease-in;
	transition: background 0.2s ease-in; 
}

header.boxed .header-margin{
  width:1340px;
  margin:0 auto;
}

header.boxed .header-margin-mini{
  width:90%;
  margin:0 auto;
}


.menu-index{
  position: fixed;
  right: 5%;
  top: 25px;
  z-index: 99;
  padding:5px;
  background-color:#121b24;
}


.menu-index i{
  float:right;
  font-size:18px;
  color: #f2f2f2;
  padding-right:0px !important;
}

.menu-index i:hover{
  color:#c3c3c3;
}


ul.menu-icon{
  float:right;
}

ul.menu-icon a{
  float:right;
  font-size:18px;
  color: #121b24;
  padding-right:0px !important;
}

ul.menu-icon i{
  padding:15px;
  background: #f2f2f2;
}

ul.menu-icon a:hover{
  color:#c3c3c3;
}

header a{
  color:#f2f2f2;
}

ul.header-nav{
  width:60%;
  float:right;
}

header .logo > a{
  font-size: 28px;
  font-weight: 100;
  letter-spacing: -2px;
  color:#d9d9d9;
  float:left;
  line-height: 80px;
  margin-right: 30px;
  border-bottom: 0px;
}

header .logo > a:hover{
  color:#79c5e6;
}

header .topnav > a{
  color:#a6a6a6;
  float:right;
  line-height: 80px;
  margin-left: 15px;
  border-bottom: 0px;
}

header .topnav > a:hover{
  color:#79c5e6;
}

header li{
  text-transform:uppercase;
  list-style-type: none; margin: 0 auto; float: left;
}

header li > a{
  font-size:15px;
  color:#c3c3c3;
  padding-right:10px;
  padding-left:10px;
  font-weight:100;
  line-height:80px;
  display:inline-block;  
  border-bottom:0;
}

header li > a:hover{
  color:#79c5e6;
}

header li > a #active{
  color:#f2f2f2;
}

header li ul{
  overflow: hidden; display: none; background: #f9f9f9; z-index:20;
}

header li ul li a{
  line-height:34px;
  padding-left:30px; 
  width:260px;
}

header li:hover ul{
  position: absolute; padding: 0; display: block; width: 260px;
}



/*
**************************
CONTENT
**************************
*/

.hero-image{
  position:relative; 
  width:100%; 
  top:0; 
  height:400px; 
}


.top > * {
  vertical-align:top;
  margin-top:15px;
}

.smallhead{
  width:100%;
  position:relative;
  float:left;
  margin-bottom:10px;
}

.one-column{
  width:40%;
  position:relative;
  float:left;
  margin-bottom:30px;
}

.two-column{
  width:60%;
  position:relative;
  float:left;
  margin-bottom:30px;
}

.one-column p{
  width:80% !important;
}

.two-column p{
  width:100% !important;
}

.clear{
  clear:both;
}

.content{
  position:relative;
  width:1340px;
  margin:100px auto;
}

.content .hero{
	width:100%;
	float:left;
	margin-bottom:120px;  
}

.content .text-intro{
  width: 1340px;
  margin-top: 120px;
  margin: 120px auto 0;
}

.content .text-introMob{
 	width: 1340px;
	margin-top: 120px;
 	margin: 120px auto 0;
	display: flex;
	justify-content:space-between;
}


.content .text-intro p{
	font-size:15px;
	color:#d9d9d9;
	font-weight:300;
	line-height:22px;
	letter-spacing:1px;
	width:40%;
	margin-top:10px;
}

.content .text-intro a:link, a:visited{
	font-size:15px;
	color:#d9d9d9;
	font-weight:300;
	line-height:22px;
	letter-spacing:1px;
	width:40%;
	margin-top:10px;
	text-decoration: none
}

.content .text-intro a:hover{
	font-size:15px;
	color:#79c5e6;
	font-weight:300;
	line-height:22px;
	letter-spacing:1px;
	width:40%;
	margin-top:10px;
	text-decoration: none
}



.content .text-intro p a{
	font-size: 15px;
	color: #d9d9d9;
	font-weight: 900;
	line-height:22px;
	letter-spacing: 1px;
	width: 40%;
	margin-top: 10px;
}

.content .text-intro h1{
  font-size:38px;
  width:40%;
  text-transform:uppercase;
  color:#d9d9d9;
  font-weight:900;
  line-height:42px;
  margin-bottom:20px;
}

.content .text-intro h1 a{
  font-size:38px;
  width:40%;
  text-transform:uppercase;
  color:#d9d9d9;
  font-weight:900;
  line-height:42px;
  margin-bottom:20px;
}

.content .text-intro h2{
  font-size:14px;
  color:#d9d9d9;
  font-weight:300;
  line-height:22px;
  letter-spacing:1px;
  width:80%;
}

.content .text-intro h3{
  font-size:24px;
  width:80%;
  color:#d9d9d9;
  font-weight:700;
  line-height:36px;
  margin-bottom:20px;
}

.content .text-intro h4{
  font-size:38px;
    color:#d9d9d9;
  font-weight:100;
  letter-spacing: -.5px;
	-ms-transform: scale(1, .9); /* IE 9 */
	-webkit-transform: scale(1, .9); /* Safari */
	transform: scale(1, .9);
  float:left;
  line-height:80px;
  margin-right: 8px;
  border-bottom: 0px;
}

.content .text-intro h4 a{
  font-size:38px;
    color:#d9d9d9;
  font-weight:100;
  letter-spacing: -.5px;
	-ms-transform: scale(1, .9); /* IE 9 */
	-webkit-transform: scale(1, .9); /* Safari */
	transform: scale(1, .9);
  float:left;
  line-height:80px;
  margin-right: 8px;
  border-bottom: 0px;
}



.content .text-intro h5{
	font-size:15px;
	color:#22afec;
	font-weight:900;
	line-height:22px;
	letter-spacing:1px;
	width:80%;
	text-transform:uppercase;
	margin-top:10px;
	vertical-align: middle;
}

.content .text-intro h5 a{
	font-size:15px;
	color:#22afec;
	font-weight:900;
	line-height:22px;
	letter-spacing:1px;
	width:80%;
	text-transform:uppercase;
	margin-top:10px;
	vertical-align: middle;
}

.content .text-intro h6{
  font-size:38px;
  width:80%;
  text-transform:uppercase;
  color:#d9d9d9;
  font-weight:900;
  line-height:42px;
  margin-bottom:20px;
}

.content .text-intro h7{
  font-size:24px;
  width:80%;
  text-transform:uppercase;
  color:#d9d9d9;
  font-weight:900;
  line-height:32px;
  margin-bottom:20px;
}



.content .text-intro h8{
  font-size:54px;
  text-transform:uppercase;
  width:90%;
  color:#d9d9d9;
  font-weight:900;
  line-height:72px;
  margin-bottom:20px;
}

.content .text-intro h9{
	font-size:15px;
	color:#737373;
	font-weight:300;
	line-height:22px;
	letter-spacing:1px;
	width:40%;
	margin-top:10px;
}


.content .text-intro hr{
        height: 1px;
        background-color:#b7b7b7;
        border: none;
		width: 100%;
    }

/*
**************************
PORTFOLIO GRID
**************************
*/

.prev-next{
  width:100%;
  max-width:1340px;
  margin:0 auto;
  padding-top:120px;
  padding-bottom:60px;
  color:#a6a6a6;
}

.prev-next a{
  color: #a6a6a6;
}

.prev-next a:hover{
  color:#79c5e6;
}

.prev-button{
  width:33%;
  position:relative;
  float:left;
  text-align:left;
}

.next-button{
  width:33%;
  position:relative;
  float:left;
  text-align:right;
}

.center-button{
  width:33%;
  position:relative;
  float:left;
  text-align:center;
}


#ajax-content{width:100%;}

.portfolio-grid{
  width:1340px;
  position:relative;
  margin: 10px auto;
  overflow:hidden;
}


li.grid-item, li.grid-item-port{
  width:435px;
  position:relative;
  float:left;
  padding:5px;
}


li.grid-item h2{
  font-size:30px;
  bottom:290px;
  left:20px;
  position:absolute;
  text-transform:uppercase;
  color:#121b24;
  letter-spacing:-1px;
  font-weight:100;
  line-height:50px;
}

.grid-hover, .grid-hover-port{
  position: absolute;
  width:435px;
  height: 100%;
  top:0;
  background: #121b24;
  z-index: 2;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in; 
}


.grid-hover:hover, .grid-hover-port:hover{
  opacity: 0.90;
}



.grid-hover h1{
  font-size:24px;
  bottom:60px;
  left:20px;
  position:absolute;
  text-transform:uppercase;
  color:#f2f2f2;
  letter-spacing:1px;
  font-weight:100;
  line-height:40px;
}


.grid-hover p{
  font-size:12px;
  bottom:30px;
  left:20px;
  position:absolute;
  color:#a6a6a6;
  letter-spacing:1px;
  font-weight:300;
  line-height:50px;
}

li.grid-item img, li.grid-item-port img{
  width:435px;
}




/*
**************************
CONTACT
**************************
*/

.contact-one, .contact-two{
  width:30%;
  padding-right:3%;
  position:relative;
  float:left;
}

.contact-three{
  width:33%;
  position:relative;
  float:left;
}

.contact-one p, .contact-two p, .contact-three p{
  width:95% !important;
}

input{

  width:95%;
  height:40px;
  background:#f8f7f7;
  border:0;
  color:#f2f2f2;
  font-weight:500;
  line-height:40px;
  font-family: 'Roboto', sans-serif;
  margin-bottom:10px;
  font-size:15px;
  padding-left:15px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

input.button-submit{

  width:220px;
  height:40px;
  background:#f8f7f7;
  font-weight:500;
  border:0;
  font-family: 'Roboto', sans-serif;
  color:#f2f2f2;
  float:right;
  margin-right: 20px;
  font-weight:900;
  line-height:40px;
  font-size:15px;
}

input:focus{
  background:#f4f4f4; 
}

textarea{

  width:95%;
  height:40px;
  border:0;
  line-height:40px;
  background:#f8f7f7;
  color:#f2f2f2;
  font-size:15px;
  font-family: 'Roboto', sans-serif;
  font-weight:500;
  margin-bottom:10px;
  padding:0 0 0 15px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
    -webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in; 
}

textarea:focus{background:#f4f4f4; height:250px;}