@charset "UTF-8";
/* CSS Document */




html, body {
  height: 100%;
  
}

	* { margin: 0; padding: 0; }

    body {
      background: #fff;
      padding: 0;
      text-align: center;
      font-family: 'Fjalla One', sans-serif;
      position: relative;
      margin: 0;
    
    }
    
    .wrapper {
    	height: auto !important;
    	margin: 0 auto; 
    	overflow: hidden;
    }
	
	.container{
		padding-top: 100px;
	}
	
	.row-projectimg {
		padding-top: 100px;
	}
	
	@media (max-width: 768px) {
		.row-projectimg {
			padding-top: 30px;
		}
	}
	
	.row-clientname {
		padding-top: 0px;
	}
	@media (max-width: 768px) {
		.row-clientname {
			padding-top: 90px;
		}
	}
	
	@media (max-width: 768px) {
		.row-projectimg {
			padding-top: 30px;
		}
	}

	 .rotatewrap{
    	position:relative;
		 height:100% !important;
		  width:100% !important;
		margin-top: 15px;
		 top:15px;
	bottom:15px;	
    	
		
    }
	
	  .rotatewrap h1{
		 margin:0;
		padding-top:0%;
		 height: 25%;
		font-size: 700%;
		
    }
   
   
   .rotate{
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
   }
   
 

	.rotate_third {
		height: 30%;
		}

	.main{
		height: 100%;
		background-color:#5a6e7e
		}


	 .button h3{
	 padding: 0;
	 }
	
	.menu{
	padding-top: -5px;
	}
   
   .intro1{
	text-align: left;
	font-size: 32px;
	line-height: 52px;
   }
   
   .lead{
	text-align: left;
   }
   
	.leadproj {
		text-align: left;
		font-size: 21px;
		padding-top: 100px;
   }
   	@media (max-width: 768px) {
  		.leadproj {
    		font-size: 18px;
    		padding-top: 50px;  
  		}
	}


   .leadlist{
		text-align: left;
		font-size: 19px;
   }
   @media (max-width: 768px) {
  		.leadlist {
    		font-size: 16px;
  		}
	}

   .orange{
	color: #D87D31;
   }

	ul li {
	padding-left: 0px;
	list-style-type: none;
	text-align: left;
	
}


/*image hover effect */

.view {

   margin: 0px;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}

.view .mask, .view .content {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}

.view img {
   display: block;
   position: relative;
}

.view a.info {
   display: inline-block;
   text-decoration: none;
   padding:0;
   text-indent:-9999px;
   width:20px;
   height:20px;
}

.effect img {
   opacity:1;
   transform:scale(1,1);
   transition: all 0.2s ease-in;
}

.effect .mask {
   opacity:0;
   overflow:visible;
   border-color:rgba(0,0,0,0.7) transparent transparent transparent;
   border-style:solid;
   border-width:150px;
   width:0;
   height:0;
   transform:translateY(-125px);
   transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}

.effect a.info {
   opacity:0;
   transform:translateY(-125px);
   transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}

.effect:hover img {
   opacity:0.7;
   transform:scale(2,2);
}

.effect:hover .mask {
   opacity: 1;
   transform: translateY(0px);
}

.effect:hover a.info {
   opacity:1;
   transform:translateY(100px);
}

.portfolio-item{
	text-align: left;
	padding:.5px;
	background-color: #d3d3d3;
	border-color: #ffffff;
	border-style: solid;
	border-width: 15px;
}

.third-effect .mask {
   opacity: 0;
   overflow:visible;
   border:100px solid rgba(0,0,0,0.7);
   box-sizing:border-box;
   transition: all 0.4s ease-in-out;
   visibility:visible;
}

.third-effect a.info {
   position:relative;
   top:-10px; /* Center the link */
   opacity: 0;
   transition: opacity 0.5s 0s ease-in-out;
}

.third-effect:hover .mask {
   opacity: 1;
   border:100px solid rgba(0,0,0,0.7);
   
}

.third-effect:hover a.info {
   opacity:1;
   transition-delay: 0.3s;
}

.fourth-effect .mask {
   position:absolute; /* Center the mask */
   top:0;
   left:0;
   cursor:pointer;
   border-radius: 0px;
   border-width: 0px;
   display: inline-block;
   height: 400px;
   width: 700px;
   border: 300px solid rgba(0, 0, 0, 0.7);
   box-sizing:border-box;
   opacity:0.3;
   visibility:visible;
   transform:scale(4);
   transition:all 0.3s ease-in-out;
}

.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}

.fifth-effect .mask {
   position:absolute; /* Center the mask */
   top:50px;
   left:120px;
   cursor:pointer;
   border-radius: 50px;
   border-width: 50px;
   display: inline-block;
   height: 100px;
   width: 100px;
   border: 50px solid rgba(0, 0, 0, 0.7);
   box-sizing:border-box;
   opacity:1;
   visibility:visible;
   transform:scale(4);
   transition:all 0.3s ease-in-out;
}

.fourth-effect:hover .mask {
   opacity: 0;
   border:0px solid rgba(0,0,0,0.7);
   visibility:hidden;
}

/* PADDING BOTTOM NORMAL */
.pbn-0 {
	padding-bottom:0px !important;
}
.pbn-5 {
	padding-bottom:5px !important;
}	
.pbn-10 {
	padding-bottom:10px !important;
}
.pbn-15 {
	padding-bottom:15px !important;
}
	
.pbn-20 {
	padding-bottom:20px !important;
}

.pbn-30 {
	padding-bottom:30px !important;
}
	
.pbn-40 {
	padding-bottom:40px !important;
}

.pbn-50 {
	padding-bottom:50px !important;
}
/* MARGIN TOP MONITOR STYLE . */
.mt-5 {
	margin-top: 5px !important;		
}
.mt-10 {
	margin-top: 10px !important;
} 	
.mt-15 {
	margin-top: 15px !important;
}
.mt-2 {
	margin-top: 20px !important;		
}
.mt-30 {
	margin-top: 30px !important;
} 	
.mt-40 {
	margin-top: 40px !important;
}

/* PADDING MONITOR STYLE*/
.pd-15 {
	padding:15px !important;
}
	
.pd-20 {
	padding:20px !important;
}

.pd-30 {
	padding:30px !important;
}
	
.pd-40 {
	padding:40px !important;
}

.pd-50 {
	padding:50px !important;
}


/*PADDING-TOP IN MONITOR STYLE*/
.ptn-15 {
	padding-top:15px !important;
}
	
.ptn-20 {
	padding-top:20px !important;
}

.ptn-30 {
	padding-top:30px !important;
}
	
.ptn-40 {
	padding-top:40px !important;
}

.ptn-50 {
	padding-top:50px !important;
}

/*PADDING BOTTOM NORMAL */
.pbn-5 {
	padding-bottom:5px !important;
}
.pbn-10 {
	padding-bottom:10px !important;
}
.pbn-15 {
	padding-bottom:15px !important;
}
	
.pbn-20 {
	padding-bottom:20px !important;
}

.pbn-30 {
	padding-bottom:30px !important;
}
	
.pbn-40 {
	padding-bottom:40px !important;
}

.pbn-50 {
	padding-bottom:50px !important;
}
.pbn-60 {
	padding-bottom:60px !important;
}
.pbn-80 {
	padding-bottom:80px !important;
}
.pbn-100 {
	padding-bottom:100px !important;
}


/*PADDING LEFT*/
.pln-15 {
	padding-left:15px !important;
}
	
.pln-20 {
	padding-left:20px !important;
}

.pln-30 {
	padding-left:30px;
}
	
.pln-40 {
	padding-left:40px !important;
}

.pln-50 {
	padding-left:50px !important;
}


/*PADDING RIGHT*/
.prn-15 {
	padding-right:15px !important;
}
	
.prn-20 {
	padding-right:20px !important;
}

.prn-30 {
	padding-right:30px !important;
}
	
.prn-40 {
	padding-right:40px !important;
}

.prn-50 {
	padding-right:50px !important;
}



/*PADDING IN MOBILE STYLE*/
/* TABLETS PORTRAIT */
@media only screen and (max-width: 768px) {
/* PADDING BOTTOM MOBILE */
	
.pl-0	{
	padding-left: 0px !important;
}
.pl-15	{
	padding-left: 15px !important;
}
.pr-15	{
	padding-right: 15px !important;
}
	
.pb-0 {
	padding-bottom:0px !important;
}
.pb-5 {
	padding-bottom:5px !important;
}	
.pb-10 {
	padding-bottom:10px !important;
}
.pb-15 {
	padding-bottom:15px !important;
}
	
.pb-20 {
	padding-bottom:20px !important;
}

.pb-30 {
	padding-bottom:30px !important;
}
	
.pb-40 {
	padding-bottom:40px !important;
}

.pb-50 {
	padding-bottom:50px !important;
}
	
.mtm-5 {
	margin-top: 5px !important;		
}
.mtm-10 {
	margin-top: 10px !important;
} 	
.mtm-15 {
	margin-top: 15px !important;
}	
	
.mtm-30 {
	margin-top: 30px !important;
}
.mtm-40 {
	margin-top: 40px !important;
}
.mtm-50 {
	margin-top: 50px !important;
}	
.mtm-60 {
	margin-top: 60px !important;
}
.mtm-70 {
	margin-top: 70px !important;
}
.mtm-80 {
	margin-top: 80px !important;
}
.pt-5 {
	padding-top:5px !important;
}
.pt-0 {
	padding-top:0px !important;
}
.pt-10 {
	padding-top:10px !important;
}
.pt-15 {
	padding-top:15px !important;
}	
.pt-20 {
	padding-top:20px !important;
}

.pt-30 {
	padding-top:30px !important;
}
	
.pt-40 {
	padding-top:40px !important;
}

.pt-50 {
	padding-top:50px !important;
}

/* PADDING BOTTOM MOBILE */
.pb-5 {
	padding-bottom:5px !important;
}
	
.pb-10 {
	padding-bottom:10px !important;
}
.pb-15 {
	padding-bottom:15px !important;
}
	
.pb-20 {
	padding-bottom:20px !important;
}

.pb-30 {
	padding-bottom:30px !important;
}
	
.pb-40 {
	padding-bottom:40px !important;
}

.pb-50 {
	padding-bottom:50px !important;
}
	
/* PADDING MONITOR STYLE*/
.pdm-15 {
	padding:15px !important;
}
	
.pdm-20 {
	padding:20px !important;
}

.pdm-30 {
	padding:30px !important;
}
	
.pdm-40 {
	padding:40px !important;
}

.pdm-50 {
	padding:50px !important;
}	
}






/*PADDING IN MONITOR STYLE*/

/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 320px) {
  .rotatewrap h1{
		padding-top:20% !important;
			 font-size: 600% !important;	 
 }
 
 h3 {
    font-size: 16px;
	margin-top: 10px;
margin-bottom: 10px;
}

.intro1 {
			 font-size: 26px;
			 line-height: 40px;
		}

}






/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 481px) {
	
	 .rotatewrap h1{
		 	padding-top:18%;
			 font-size: 900%;	 
		}

.intro1 {
			 font-size: 28px;
			 line-height: 50px;
		}


}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
		
		.rotatewrap h1{
				padding-top:6% !important;
			 font-size: 800% !important;	 
		}
		
		.intro1 {
			 font-size: 32px;
			 line-height: 50px;
		}
		
	
		
}



/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1281px) {
	
		.rotatewrap h1{
			padding-top:6% !important;
			font-size: 1200% !important;	 
		}
		
		h3 {
    	font-size: 25px;
		margin-top: 10px;
		margin-bottom: 8px;
		}
		
		.intro1 {
			 font-size: 35px;
			 line-height: 51px;
			 
		}


} 



/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (max-width: 1280px) {
	
		.rotatewrap h1{
			padding-top:6%;
			font-size: 1120%;	 
		}
		

} 



/* FOOTER ADDON */
@import "compass/css3";

$height-footer: 60px;

html {
  min-height: 100%;
  position: relative;
  body {
    margin-bottom: $height-footer;
  }
  #footer {
    bottom: 0;
    width: 100%;
    position: absolute;
    height: $height-footer;
    background-color: #333;
    .footer-block {
      margin: ;
    }
  }
}