/*
Theme Name: Redline
Tags: red, gray, white, custom header, responsive
The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-licene
*/

html, body {height: 100%;}
body, h1, h2, h3, h4, p, ol, ul, form{margin: 0; padding: 0; list-style: none;}
a{text-decoration: none;}
body{font: normal 21px "Lato"; font-weight: 300;}
a{text-decoration: none; color: #b11116;}
a:hover{text-decoration: underline;}
img{border: 0; max-width: 100%;}
.clear{clear: both;}
.left{float: left;}
.right{float: right !important;}

h1, h2, h3{font-weight: 300;}
h2{font-size: 61px;}

.wrapper{width: 1190px; margin: auto;}

.section{float: left; width: 100%;}

#head{background: url(../img/head-bg.jpg) left top no-repeat fixed; background-size: cover;}
#logo{position: relative; margin: 7% 0 0 -101px; left: 50%; float: left;}
h1{color: #fff; font-size: 63px; text-align: center; clear: both; padding: 5% 20% 0; text-shadow: 0 1px 3px #000;}
#nav{position: fixed; right: 7%; top: 10%; z-index: 99999;}
.menu{position: absolute; z-index: 99; right: 0; width: 250px; background: #fff; border: 1px solid #ececec; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.8); display: none;}
.menu li{border-bottom: 1px solid #eaeaea; float: left; width: 100%;}
.menu a{color: #323131; text-transform: uppercase; float: left; width: 100%;   display: inline-block;
  text-decoration: none;
  overflow: hidden;
  vertical-align: top;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;}
  .menu span {
  display: block;
  position: relative;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  float: left; width: 92%; padding: 4%;
}
  .menu a:hover span {
  background: #f0f0f0;
  -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  
}
.menu span:after {
  content: attr(data-title);
  display: block;
  float: left; width: 92%; padding: 4%;
  position: absolute;
  left: 0;
  top: 0;
  background: #e1e1e1;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}
  
/*Cubes*/

.feature h2{width: 96%; text-transform: uppercase; position: absolute; text-align: right; z-index: 99; font-size: 36px; color: #fff; line-height: 99px;}
.feature .face img {z-index: 98; position: absolute; max-width: none;}

.feature .face:after {
  width: 100%;
  height: 50px;
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  right: 0; }
.face{
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; }

.face.primary {background: #fff; overflow: hidden; z-index: 2;}
.face.secondary {background-size: cover; }

#work {
  width: 100%;
  float: left;
  height: 107px;
  margin-top: 11%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;}

.trigger {
  width: 33.33%;
  float: left;
  position: relative;
  z-index: 2;
  height: 100%;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; }

.feature {
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform .4s ease-in-out, opacity 1.5s ease-in-out;
  transition: transform .4s ease-in-out, opacity 1.5s ease-in-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
  -webkit-transform: rotateX(0deg) translateZ(0);
  transform: rotateX(0deg) translateZ(0); }

.feature.show {opacity: 1;}

.feature.rotate {-webkit-transform: rotateX(-90deg) translateZ(0); transform: rotateX(-90deg) translateZ(0);}
.trigger:hover .feature, .stick .feature {-webkit-transform: rotateX(90deg) translateZ(0); transform: rotateX(90deg) translateZ(0);  bottom: 10px;}
.ie .trigger:hover .feature, .ie .stick .feature {-webkit-transform: rotateX(0) translateZ(0); transform: rotateX(0) translateZ(0); }

.feature .face {
  -webkit-transform: rotateX(0deg) translateZ(50px);
  transform: rotateX(0deg) translateZ(50px);
  -webkit-transition: box-shadow 0.5s ease-in-out;
  transition: box-shadow 0.5s ease-in-out;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 2; }
.ie .feature .face {-webkit-transform: rotateX(0) translateZ(0); transform: rotateX(0) translateZ(0); position: relative;}
.feature.rotate .face {box-shadow: inset 0px 30px 60px transparent;}

.feature .face.hover {
  box-shadow: inset 0px -30px 100px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
  transform: rotateX(-90deg) translateZ(50px);
  overflow: hidden; }
.ie .feature .face.hover {-webkit-transform: rotateX(0) translateZ(0); transform: rotateX(0) translateZ(0);}

.feature .face.hover .info {
  width: 100%;
  height: 100%;
  background: #ba3034;
  color: #fff;
  font-size: 18px;
  padding: 7% 30px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
.ie .feature .face.hover .info {opacity: 0; transition: opacity .3s linear;}
.ie .trigger:hover .feature .face.hover .info {opacity: 1;}

.about .face{background: url(../img/one-img.jpg) left top no-repeat;}
.about .face:after{background: url(../img/one-top.png) left top no-repeat; height: 78px; top: -78px;}
.portfolio .face{background: url(../img/two-img.jpg) left top no-repeat;}
.portfolio .face:after{background: url(../img/two-top.png) left top no-repeat; height: 47px; top: -47px; left: 71px;}
.contact .face{background: url(../img/three-img.jpg) left top no-repeat;}
  
  
#about{background: url(../img/about-bg.jpg) left top no-repeat fixed; background-size: cover; color: #fff;}
#about-cont{float: right; margin: 23% 7% 9% 0; width: 32%; position: relative;}
#about-cont h2{margin-bottom: 20px;}
#about-cont p{font-size: 23px; line-height: 32px; margin-bottom: 20px;}

#portfolio{background: #72757a; float: left; width: 100%; overflow: hidden;}
#diagnol{background: #4c4d4f; transform: rotate(360deg) scale(1) skew(20deg) translate(-2px); width: 32.4%; padding: 25px 5%; color: #fff; margin-left: -20px;}
#portfolio h2{transform: rotate(0deg) scale(1) skew(-20deg) translate(0px);}
#pcont{background: url(../img/portfolio-bg.jpg) left top no-repeat fixed; background-size: cover; padding: 40px 0; float: left; width: 100%;}
#pcont ul{position: relative;}
#pcont ul, #social{float: left; width: 100%;}
#pcont ul li{float: left; width: 26%; margin: 0 4%; text-align: center; word-wrap: break-word; }
#pcont ul li:last-child{margin: 0;}
#pcont h3, #pcont p{font-size: 30px; color: #4c4d4f;}
#pcont p{font-size: 16px; line-height: normal; min-height: 300px; margin-bottom: 20px;}
#social{margin-top: 10px;}
#social a{display: inline-block; width: 30px; height: 28px; background-image: url(../img/social-ico.png);}
.tw{background-position: 0 0;}
.fb{background-position: -31px 0;}
.gp{background-position: -94px 0;}
.pin{background-position: -63px 0;}
.yt{background-position: -126px 0;}
.insta{background-position: -157px 0;}

#contact h2{text-transform: uppercase; margin-bottom: 40px;}
#cform{float: left; margin-left: 4%; width: 35%; padding-top: 48px}
#cform form{float: left; width: 100%;}
#cform form input[type="text"], #cform form input[type="email"], #cform form input[type="tel"], #cform textarea{float: left; width: 94%; padding: 4% 3%; border: 1px solid #979797; border-radius: 2px; font: normal 18px "Lato"; margin-bottom: 10px; resize: none; color: #979797;}
#cform form input[type="submit"]{color: #fff; background: #ed1c24; padding: 13px 20px; font-size: 27px; border: 0; float: right;}
#cinfo{float: right; padding: 48px 0 5% 3%; width: 53%; color: #fff; text-align: center; background: url(../img/contact-bg.jpg) left top no-repeat;}
#ctext{float: left; width: 100%; margin-top: 60px; font-size: 24px;}
#ctext h3{font-weight: 400;}
#ctext p{margin-bottom: 26px;}
.copyright{margin-top: 70px; font-size: 15px; font-weight: 400; float: left; width: 100%;}

.scrollToTop{display: block; width: 66px; height: 50px; background: url(../img/top-btn.png) left top no-repeat; position: fixed; right: 7%; bottom: 5%; display: none;}

/*Responsive*/
@media (max-width: 1190px){
	.wrapper{width: 97%;}
}
@media (max-width: 975px){
	#contact h2{font-size: 40px;}
}
@media (max-width: 830px){
	#cform{width: 92%; margin-bottom: 20px;}
	#cform form input[type="text"], #cform form input[type="email"], #cform form input[type="tel"], #cform textarea{padding: 15px 3%;}
	#cinfo{padding: 0; width: 100%; background: none;}
	#cinfo h2{background: #f8931d; margin-bottom: 0; padding: 4% 0;}
	#ctext{padding: 5%; width: 90%; margin-top: 0; background: url(../img/contact-bg-strp.jpg) left top no-repeat #181818;}
	
	#head, #about, #pcont{background-attachment: scroll;}
}
@media (max-width: 768px){
	#logo{width: 130px; margin-left: -65px;}
	
	h1{padding: 5% 7% 0; font-size: 46px}
	h2{font-size: 40px;}
	
	#about-cont{width: 93%; margin: 4% 4% 0 0;}
	
	#pcont ul li{clear: left; width: 92%; text-align: left; margin-bottom: 28px;}
	#pcont ul li:last-child{margin: 0 4%;}
	#pcont ul li img{width: auto; float: left; margin: 0 15px 15px 0;}
	#pcont ul li p{min-height: inherit; margin-bottom: 15px;}
}
@media (max-width: 600px){
	#work{height: auto;}
	.trigger{width: 100%; height: 107px;}
	.feature .face{background-size: cover;}
	.feature .face:after{display: none;}
}
@media (max-width: 430px){
	#about-cont p{font-size: 17px; line-height: 26px;}
	
	#pcont ul li{text-align: center;}
	#pcont ul li img{width: 100%; margin: 0;}
	
	#contact h2{font-size: 33px;}
	#ctext{font-size: 20px;}
	.copyright{margin-top: 0;}
}