/* Theme Name: Loukas 
		Author: Cassel Bear
*/

body{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	overflow-x: hidden;
}

a{
	color: #00af3f;
}
a:hover{
	text-decoration: none;
}
h1{
	font-size: 51px;
	font-weight: 300;
	padding-top: 40px;
	padding-bottom: 15px;
	color: #000;
}
p, li{
	color: #474747;
	font-size: 18px;
}
.content-image{
	float: right;
	margin: 20px;
}
h2{
	font-size: 22px;
	color: #030303;
	text-transform: uppercase;
	font-weight: 700;
  	letter-spacing: 1px;
}
h4 {font-size: 15px;font-weight:300;
}
.mb0{
	margin-bottom: 0px;
}
.mt0{
	margin-top: 0px;
}
.mb10{
	margin-bottom: 10px;
}
.mt10{
	margin-top: 10px;
}
.mb20{
	margin-bottom: 20px;
}
.mt20{
	margin-top: 20px;
}
.mb40{
	margin-bottom: 40px;
}
.mt40{
	margin-top: 40px;
}
.btn{
	background-color: transparent;
	color: #898a8e;
	border-color: #898a8e;
	border-width: 2px;
	border-radius: 0;
	font-size: 19px;
	font-weight: 700;
	padding: 10px 30px;
	letter-spacing: .03em;
}
.btn:hover{
	background-color: #898a8e;
	color: #ffffff;
	border-color: #898a8e;
}
.btn-green{
	border-color: #00af3f;
	color: #00af3f;
}
.btn-green:hover{
	background-color: #00af3f;
	color: #ffffff;
}
.btn-red{
	border-color: #e91100;
	color: #e91100;
}
.btn-red:hover{
	background-color: #e91100;
	color: #ffffff;
}
.btn-yellow{
	border-color: #a79600;
	color: #a79600;
}
.btn-yellow:hover{
	background-color: #a79600;
	color: #ffffff;
}
#topNavContainer{
	background-color: #ffffff;
	padding-top: 20px;
	padding-bottom: 25px;
}

#mainNav li a{
	color: #474747;
	font-size: 19px;
	font-family: 'Source Sans Pro', sans-serif;
	padding: 10px 22px 30px 22px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
 #mainNav li a:hover{
	background-color: transparent;
}
#mainNav li.menu-item.current-menu-item a{
	background: url('/wp-content/themes/loukas/img/navActive.png') no-repeat bottom center;
}
#mainNav{
	position: absolute;
	top: 120px;
	right: 0;
}

.news .navigation{
  margin-top: 40px;
}
.news .navigation a{
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}


.pageSection{
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 3px #000 solid;
	background-position-x: 42%;
}
.pageSection.projectsSection .descriptionText{
		text-align: left;
	}
	.pageSection.projectsSection .sectionLink{
		float: left;
	}

#news{
	background-color: #000000;
	padding-top: 20px;
	padding-bottom: 20px;
}
#news p{
	color:#a9aaad;
}
#news h3{
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
	float: none;
	text-transform: uppercase;
	margin-top: 10px;
}
#contactInfo{
	color: #474747;
	font-size: 19px;
	font-weight: 300;
}
.pageForm .form-group{
	margin-bottom: 25px;
}
#contactFormContainer{
	border-top: 3px #000 solid;
	background-color: #ffffff;
	padding-top: 60px;
	padding-bottom: 60px;
}
#contactFormContainer p{
	font-weight: 200;
}

label{
	color: #474747;
	font-size: 19px;
	font-weight: 300;
}
input[type="text"]{
	background-color: #f4f5f6!important;
	border-radius: 0;
	border:none;
	box-shadow: none;
	height: 44px!important;
}
textarea{
	background-color: #f4f5f6!important;
	border-radius: 0;
	border:none;
	box-shadow: none;
	height: 225px!important;
	resize: none;
 }
input[type="submit"]{
	 padding: 10px 85px;
 }
 
 #footer{
	 background-color: #ffffff;
	 border-top:3px #000 solid;
	 padding-top: 30px;
	 padding-bottom: 150px;
	 padding-left: 30px;
	 padding-right: 30px;
 }

 #footer ul > li > a{
	color: #474747;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: .05em;
 }
 #footer ul > li > a:hover{
	 background-color: transparent;
 }
 #copyrightInfo{
	 font-size: 17px;
	 color: #474747;
	 font-weight: 300;
 }
 
 /* PAGES */
.pageHeader{
		background-repeat: no-repeat;
		background-size: cover;
		border-top: 3px #000 solid;
		background-position-x: 42%;
		padding: 20px 0;
		position: relative;
		z-index: 90
}
.pageHeader.page{
	padding: 0;
	min-height: 145px;
}
.pageHeader.page.about-us{
	background:url('/wp-content/themes/loukas/img/aboutHeader.jpg');
}
.pageHeader.page.contact-us h1, .pageHeader.page.request-a-quote h1{
	color: #000000;
}
.pageHeader.page h1{
	text-align: left;
	
}
.pageHeader.portfolio.services{
	background-image:url('/wp-content/themes/loukas/img/servicesHeader.jpg');
}

.pageHeader.page.services{
		background-image:url('/wp-content/themes/loukas/img/servicesHeaderColor.jpg');
}
.pageHeader.portfolio.projects{
		background-image:url('/wp-content/themes/loukas/img/projectsPageHeader.jpg');
}

.pageHeader.news{
  background-color: #000000;
}
.pageHeader.news h1{
  color: #ffffff;
}
.pageHeader h1{
	font-size: 51px;
	color: #ffffff;
	text-align: center;
	font-weight: 300;
	padding-top: 40px;
	padding-bottom: 15px;
}
.pageHeader h2{
	font-size: 44px;
	color: #ffffff;
	text-align: right;
}

.pageHeader p{
	font-size: 21px;
	color: #ffffff;
	text-align: right;
}
#pageContent{
	padding-bottom: 40px;
}

#pageContent #textContent{
	padding-top: 40px;
}
#pageContent.contact-us #textContent, #pageContent.request-a-quote #textContent{
	padding-top: 0;
}

/* SERVICES PAGE */
.serviceBlock{
	background-color: #5a585a;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	padding: 120px 0;

}
#flipContainer h2{
	color: #ffffff;
	font-size: 21px;
	font-weight: 600;
	margin-top: 0;
	min-height: 50px;
}
.table-format{
	display:table;
    height:100%;
    width:100%;
}
.table-cell{
	display: table-cell;
	vertical-align: middle;
	height:100%;
    width:100%;
}
.flip {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   position: relative;
   width: 100%;
   height: 100%;
   margin: 20px auto;
}
.flip .card.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.flip .card .face {
 -webkit-backface-visibility: hidden ;
    backface-visibility: hidden ;
		z-index: 2;
}
.flip .card .front {
  position: absolute;
   width: 100%;
	 z-index: 1;
  
}
.flip .card .back {
	background-color:#ffffff;
	background-size: cover;
  -webkit-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
    padding: 0px 30px;
    font-size: 18px;
    color: #474747;
}

/* CONTACT PAGE */

#form_contact2 input[type="text"],#form_contact2 input[type="email"], #form_96rxch input[type="text"], #form_96rxch input[type="email"], #form_96rxch input[type="tel"]{
	width: 100%!important;
	background-color: #f4f5f6!important;
  border-radius: 0!important;
  border: none!important;
  box-shadow: none!important;
  height: 44px!important;
}
#form_contact2 textarea, #form_96rxch textarea{
	width: 100%;
	  background-color: #f4f5f6!important;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
#form_contact2 label, #form_96rxch label{
	color: #474747;
	font-size: 18px;
	font-weight: 300;font-family: 'Source Sans Pro', sans-serif!important;
}

#form_contact2 input[type="submit"], #form_96rxch input[type="submit"]{
	padding: 10px 85px;
	border: 2px solid #00af3f;
	color: #00af3f;
	margin: 2em 0;
	border-radius: 0;
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
	background-color: ;
	font-family: 'Source Sans Pro', sans-serif;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
 }
 
 #form_contact2 input[type="submit"]:hover, #form_96rxch input[type="submit"]:hover{
	 background-color: #00af3f;
	 color: #ffffff;
 }
 
 @media (max-width:480px){
	 .flip .card .back{
		   background:#ffffff url('/wp-content/themes/loukas/img/flipCardBack.jpg') no-repeat bottom center;
		   background-size: 100%;
		   
	 }
	 .flip .card .back p, .flip .card .back{
		 font-size: 18px;
	 }
		#mainNav{
			display: none;
		}
		#requestAQuote{
			float: none!important;
			margin: auto;
			padding-right: auto!important;
		}
		#logo{
			margin: auto;
		}
		#navContainer{
			text-align: center;
			padding: 0;
		}

		.pageSection{
			min-height: 220px;
			background-position-x: 0%;
			background-size:auto;
		}
		.pageSection.projectsSection{
			background-position-x:100%;
		}
		.pageSection .container{
			padding: 15px 0;
			text-align: center;
		}
		.pageSection .descriptionText{
			display: none;
		}
		.pageSection .sectionLink{
			color: #ffffff;
			font-size: 22px;
			font-weight: 700;
			letter-spacing: 1px;
			float: none;
			margin-top:100px;
		}
		.pageSection.projectsSection .sectionLink{
			float: none;
		}
		#contactInfo{
			margin-top: 0px;
		}
		.pageHeader{
			background-repeat: no-repeat;
			background-size: auto;
			border-top: 3px #000 solid;
			background-position-x: 0%;
			padding: 40px 10px;
			min-height: 500px;
		}
		
	}
	
 @media (min-width:481px) and (max-width:767px){
		#mainNav{
			position: absolute;
			top: 0;
			right: auto;
			width: 100%;
		}
		#navContainer .navbar-nav{
			margin: 0 0 15px;
		}
		#requestAQuote{

		}
		#navContainer #mainNav li a{
			font-size: 17px;
			padding: 10px 10px 30px 8px;
			
		}
		#navContainer #mainNav li a.active{
			background: url('/wp-content/themes/loukas/img/navActive.png') no-repeat bottom center;
			background-position-y: 30px;
		}
		#navColumn{
			padding-left: 0;
		}
		.nav > li{
			display: inline;
			float: left;
		}
		
		#logo{
			margin: auto;
		}
		.pageSection{
			min-height: 400px;
			background-position-x: 0%!important;
			background-size:270%;
			padding: 20px 30px;
		}
		
		.pageSection.projectsSection{
			background-position-x:100%!important;
		}
		
		.pageSection .container{
			padding: 15px 0;
			text-align: center;
		}
		.pageSection .descriptionText{
			font-size: 40px;
			line-height: 42px;
			color: #ffffff;
			padding: 15px 0;
		}
		.pageSection .sectionLink{
			color: #ffffff;
			font-size: 32px;
			font-weight: 700;
			letter-spacing: 1px;
			float: none;
		}
		
		#contactInfo{
			margin-top: 0px;
		}
		
		.pageHeader{
			background-repeat: no-repeat;
			background-size: auto;
			border-top: 3px #000 solid;
			background-position-x: 0%;
			padding: 40px 10px;
		}
		.flip .card .back p, .flip .card .back{
		 font-size: 20px;
	 }
	}
	
	@media (min-width:768px) and (max-width:991px){
		#navContainer #mainNav li a{
			font-size: 17px;
		}
		.pageSection{
			min-height: 500px;
			background-position-x: 42%;
		}
		.pageSection.projectsSection{
			background-position-x:58%;
		}
		.pageSection.projectsSection .descriptionText{
			text-align: left;
		}
		.pageSection.projectsSection .sectionLink{
			float: left;
			width: 100%:
		}
		
		.pageHeader{
			margin-top: -20px;
		}
		
		#navContainer #mainNav li a{
			color: #474747;
			font-size: 18px;
			padding: 10px 8px 30px 8px;
		}
			
		
		.pageSection .container{
			padding: 30px 0;
		}
		.pageSection .descriptionText{
			font-size: 40px;
			line-height: 42px;
			color: #ffffff;
			padding: 15px 0;
			text-align: right;
		}
		
		.pageSection .sectionLink{
			color: #ffffff;
			font-size: 22px;
			letter-spacing: 1px;
			font-weight: 700;
			float: right;
		}
		#contactInfo{
			margin-top: 50px;
		}
	}
	
@media (min-width: 992px) and (max-width: 1199px){
	.pageSection{
		min-height: 500px;
		background-position: 35%;
	}
	
	.pageSection .container{
		padding: 30px 0;
	}
	
	.pageSection.projectsSection{
		background-position: 60%;
	}
	.pageSection.projectsSection .descriptionText{
		text-align: left;
	}
	.pageSection.projectsSection .sectionLink{
		float: left;
	}
	.pageSection .descriptionText{
		font-size: 40px;
		line-height: 42px;
		color: #ffffff;
		padding: 15px 0;
		text-align: right;
	}
	
	.pageSection .sectionLink{
		color: #ffffff;
		font-size: 22px;
		letter-spacing: 1px;
		font-weight: 700;
		float: right;
	}
	#contactInfo{
			margin-top: 75px;
		}
	
}

@media (min-width:1200px){
	.pageSection{
		min-height: 582px;
		background-position: top center;
	}
	.pageSection .container{
		padding: 60px 0;
	}
	.pageSection.projectsSection .descriptionText{
		text-align: left;
	}
	.pageSection.projectsSection .sectionLink{
		float: left;
	}
	.pageSection .descriptionText{
		font-size: 48px;
		line-height: 50px;
		color: #ffffff;
		padding: 15px 0;
		text-align: right;
	}
	
	.pageSection .sectionLink{
		color: #ffffff;
		font-size: 22px;
		letter-spacing: 1px;
		font-weight: 700;
		float: right;
	}
	#contactInfo{
			margin-top: 75px;
		}
	.pageHeader{
		min-height: 500px;
		background-position-x: 50%;
	}
}

@media(min-width:1700px){
	.pageHeader.portfolio .col-lg-4, .pageSection .col-lg-4{
		margin-left: -35px;
	}
	.pageSection.projectsSection .col-lg-4{
		padding-left: 85px;
	}
}
@media(min-width:2000px){
	.pageHeader .col-lg-4, .pageSection .col-lg-4{
		margin-left: -60px;
	}
	.pageSection.projectsSection .col-lg-4{
		padding-left: 135px;
	}
}
@media(min-width:2300px){
	.pageHeader .col-lg-4, .pageSection .col-lg-4{
		margin-left: -75px;
	}
	.pageSection.projectsSection .col-lg-4{
		padding-left: 165px;
	}
}

	
	@media (min-width:992px){
		#logo{
			float: right;
		}
	}
	@media (max-width:480px){
		.pageSection .sectionLink{
			float: none;
		}
	}
	@media (min-width:768px){
		#pageContent{
			/*margin-left: 0;*/
			/*padding-left: 0;*/
		}
	}
	@media (min-width:480px){
		#navColumn{
			padding-right: 0;
		}
		
	}