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

body, html {margin:0; padding:0; background-color:#f9f8f7; text-align:center; color:#333; font-family: 'Montserrat', sans-serif; font-weight:400;}

.container {display:block; height:auto; width: auto; max-width:1024px; margin:0 auto; padding:0 40px; position:relative; overflow:hidden;}

h1, h2, h3, h4, h5 {font-weight:500;}

p, h1 {width:auto; max-width: 700px; margin: 20px auto;}
.home h1 {margin-top:25vh;}

.cursive {font-family: 'Yeseva One', cursive;}

#wrapper {height:auto; overflow:hidden;}

#header {color:#fff;}

#main {padding:30px 0;}

#header {width:100%; height:100vh; background-attachment:fixed; background-size:cover; background-position:center;}
#header p {font-size:1.1em;}

.home #header {background-image:url("images/background-home.jpg");}
.home #main p:nth-of-type(1) {font-size:1.3rem; font-weight:500;}
.home #main p:nth-of-type(2) {font-weight:500; padding-bottom:10px; font-size:1.1em;}
.home #header h1 {font-weight:300;}

.company #header {background-image:url("images/background-company.jpg");}
.company .holder {margin:0 auto; max-width:600px;}
.company .third {width:33.333%; margin-right:0}
.company .third h2 {border-right: 1px solid #333; font-weight:300;}
.company .third p {padding:10px 20px;}
.company .last h2 {border-right:none !important;}

.services #header {background-image:url("images/background-services.jpg");}
.expertise #header {background-image:url("images/background-expertise.jpg");}

.expertise h2 {font-size:2em;}

.contact #main {padding:70px 0 30px 0;}
.contact label {width:200px; float: left; text-align:right; margin-bottom:20px; padding: 4px; clear: both; font-size:1.1em;}
.contact input, .contact textarea {width: calc(100% - 240px); float:right;border: 1px solid #ccc; border-radius: 8px; padding: 6px;  margin-bottom:20px; display:block; font-size:1rem;}
.contact form {max-width:800px; margin: 0 auto; padding:40px 0;}
.contact .submit-button {width:auto; background-color:rgba(0,0,0,0); border:0; font-size:1rem; border-bottom: 1px solid black; border-radius: 0; padding: 2px 0; clear:both; float:none; margin:0 auto; font-size:1.3em;}

#toolbar {width:100%; padding: 0; height:auto; overflow:hidden; background-color:#f9f8f7; position: fixed; min-height: 40px; z-index: 9999; border-bottom: 1px solid #efefef;}
#logo {height:48px; width:auto; position:absolute; top:0; left:30px;}
#menu {float:right; display:block; padding:30px 0;}
#menu a {padding:0 18px; color:#333; text-decoration:none; text-transform:uppercase; font-size:1rem;}
#menu a:hover {text-decoration:underline;}
#menu a:last-of-type {padding-right:0;}

.third {width:calc(33.3% - 20px); margin-right:30px; display:inline-block; padding-top:30px; float:left;}
.third:last-of-type, .fifth:last-of-type {margin-right:0;}
.third img, .fifth img {width:100%; height:auto; display:block;}

.fifth {width:calc(20% - 12px); margin-right:15px; display:inline-block; padding-top:30px; float:left;}
.fifth h4 {text-align:left; font-weight:400; text-transform:uppercase; font-size:0.7rem;}

.holder {display:block; width:auto; overflow: hidden; padding:10px 40px 40px 40px;}

#footer {display:block; padding:5px; border-top:1px solid #efefef;}
#footer p {text-align:center;}
#footer a:link {text-decoration:none; padding:5px 15px; color:#333; font-size:0.8em; display:inline-block;}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

	  #header {background-attachment:scroll !important; background-size:cover;}
	  
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
	  
	  #header {background-attachment:scroll !important; background-size:cover;}
	  
}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
	  	  
	  #header {background-attachment:scroll !important; background-size:cover;}
	  
}

@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
	  
	  	  #header {background-attachment:scroll !important; background-size:cover;}
	  
}

@media only screen 
  and (min-device-width: 1px) 
  and (max-device-width: 1194px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
	  
	  	  #header {background-attachment:scroll !important; background-size:cover;}
	  
}

@media only screen and (max-width: 767px) {

	#toolbar .container {padding:0 20px;}
	#logo {position:relative; display:block; margin:0 auto; left:0px;}
	#menu {float:none; margin:0 auto;}
	#menu a {padding:0 10px; font-size:0.8rem;}
	.third, .fifth {width:100% !important; height:auto !important; margin-right:0 !important; float:none !important;}
	.third h2 {border-right:0 !important;}
	#header {background-attachment:scroll;}
	.contact input, .contact label, .contact textarea {width:calc(100% - 40px); float:none; display:inline-block; text-align:left;}
	
}

@media only screen and (max-width: 620px) {

	.home #header h1 span {    opacity: 0; width: 200px; display: block; height: 5px;}

}

@media only screen and (max-width: 390px) {

	#toolbar .container {padding:0 10px;}
	#menu a {padding:0 5px; font-size:0.7rem;}
	
}