/*
Theme Name: PPM
Description: Custom Wordpress theme
Author: Yakub Erogul


---------------------------------------
BASIC STUFF AND TYPOGRAPHY
------------------------------------ */

html { overflow-y: scroll; }
article, aside, figure, footer, header, hgroup, nav, section { display: block; }
.touch body { -webkit-text-size-adjust: none; }
:focus { -moz-outline-style: none; outline: none; }

body {
	margin: 0;
	font-size: 1.1vw;
	line-height: 1.9vw;
	font-family: 'Montserrat',Helvetica,Arial,sans-serif;
	font-weight: 300;
	color: #42474a;
	-webkit-font-smoothing: antialiased;
}

p {
	
}

a {
	color:inherit;
	text-decoration: none;
	outline: none;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
a:hover {
	
}
a img { border: 0; }
img { max-width:100%; }
div.clear { clear:both; }

h1 {
	font: normal normal 4vw/5vw 'Montserrat',Helvetica,Arial,sans-serif;
	margin: 1vw 0 2vw 0;
	font-weight: 300;
	letter-spacing: -0.02em;
}

h2 {
	font: normal normal 3vw/4vw 'Montserrat',Helvetica,Arial,sans-serif;
	margin: 1vw 0 2vw 0;
	font-weight: 300;
	letter-spacing: -0.02em;
}

h3 {
	font: normal normal 1.3vw/2vw 'Montserrat',Helvetica,Arial,sans-serif;
	margin: 10px 0 5px 0;
	font-weight: 700;
}

h4 {
	font: normal normal 1.5vw/2.5vw 'Montserrat',Helvetica,Arial,sans-serif;
	margin: 0.5vw 0 0.5vw 0;
	font-weight: 300;
}

.green { color: #57b957; }
.white { color: white; }
.centered { text-align: center; }
ul {
	padding-inline-start: 2em;
}

.wow { visibility: hidden; }


/* ------------------------------------
HEADER
------------------------------------ */

header {
	position: fixed;
	z-index: 999;
	top:0;left:0;width:100%;
	height: 120px;
	color: white;
	white-space: nowrap;
	padding: 0 50px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	-webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;
}
.page-template-page_template_certifications header, .blog header {
	background: #2f3339;
}
body.page-template-page_template_certifications, body.blog {
	padding-top: 100px;
}
.scrolled header {
	background: #2f3339;
	height: 80px;
}
.logo img {
	width: 240px;
	margin-top: 30px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.scrolled .logo img {
	width: 160px;
	margin-top: 22px;
}


/* ------------------------------------
NAVIGATION
------------------------------------ */

nav {
	float: right;
}

.menu {
	
}

ul.menu {
	list-style:none;
	margin:0;
	padding:0;
}

ul.menu > li {
	list-style: none;
	margin: 0;
	padding: 0;
	display:inline-block;
	position:relative;
	vertical-align: middle;
}

ul.menu > li > a {
	font:normal normal 16px/normal 'Montserrat',Helvetica,Arial,sans-serif;
	font-weight: 500;
	text-decoration: none;
	display: inline-block;
	padding: 50px 18px;
	overflow: hidden;
	color: white;
	position: relative;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	-webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;
}
ul.menu > li > a::before {
	content: " ";
	display: block;
	position: absolute;
	bottom:36px;
	left:0;
	height: 2px;
	width: 30px;
	background: #57b957;
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.scrolled ul.menu > li > a::before { bottom: 17px; }
ul.menu > li > a:hover::before {
	left:25px;
	opacity: 1;
}
.scrolled ul.menu > li > a {
	padding: 30px 18px;
}

ul.menu > li > a:hover, ul.menu > li:hover > a, ul.menu > li.current_page_item > a, ul.menu > li.current_page_parent > a {
	
}

.menu .children {
	display: none;
}


a.nav_toggle {
	display: none;
	padding: 22px 20px;
	height: 16px;
	top:0;
	right:0;
	position: fixed;
	z-index: 999;
	line-height: 0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
a.nav_toggle:hover .hamburger div {
	
}
.nav_on a.nav_toggle {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.hamburger {
	width: 22px;
	height: 16px;
	display: block;
	position: relative;
}
.hamburger div {
	position: absolute;
	background: white;
	height: 2px;
	width: 22px;
	left:0;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.hamburger div.hamburger1 { top:0; }
.hamburger div.hamburger2 { top:7px; }
.hamburger div.hamburger3 { top:14px; }

.nav_on .hamburger div.hamburger1 {
	-moz-transform: 	rotate(225deg);
	-webkit-transform: 	rotate(225deg);
	-o-transform: 		rotate(225deg);
	-ms-transform: 		rotate(225deg);
	transform: 			rotate(225deg);
	top:7px;
}
.nav_on .hamburger div.hamburger2 { opacity: 0; }
.nav_on .hamburger div.hamburger2, .nav_on .hamburger div.hamburger3 {
	-moz-transform: 	rotate(135deg);
	-webkit-transform: 	rotate(135deg);
	-o-transform: 		rotate(135deg);
	-ms-transform: 		rotate(135deg);
	transform: 			rotate(135deg);
	top:7px;
}
.nav_on a.nav_toggle::after {
	opacity: 0;
}


select.language_dropdown {
	padding: 12px 33px 12px 22px;
	margin: 10px 0 20px 16px;
	cursor: pointer;
	background-image: url(_inc/img/select.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 25px auto;
}


ul.sub-menu {
	list-style: none;
	padding: 0; margin: 0;
	position: absolute;
	top:70px;
	right:0;
	background: #2f3339;
	text-align: right;
	font-size: 15px;
	font-weight: 500;
	display: none;
}
ul.menu > li:hover ul.sub-menu {
	display: block;
}
ul.sub-menu li a {
	display: block;
	padding: 3px 14px;
}
ul.sub-menu li a:hover {
	background: #474c54;
}


/* ------------------------------------
GENERAL LAYOUT
------------------------------------ */

.banner {
	color: white;
	position: relative;
}
.slide {
	width: 100%;
	height: 90vh;
	background:#eee none no-repeat center center;
	background-size: cover;
	display: table !important;
	vertical-align: middle;
	-webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;
}
.slide_inner {
	display: table-cell;
	vertical-align: middle;
	padding: 200px 18vw;
}
.slide b {
	white-space: nowrap;
}
button.slick-prev, button.slick-next {
	position: absolute;
	left: 0;
	border:none;
	top: 50%;
	z-index: 1;
	display: block;
	font-family: 'FontAwesome';
	font-size: 50px;
	opacity: 0.5;
	padding: 0;
	width: 100px;
	height: 100px;
	margin-top: -50px;
	background: no-repeat;
	color: white;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
button.slick-next {
	right: 0;
	left: auto;
}
button.slick-prev:hover, button.slick-next:hover { opacity:1; }

.content {
	padding: 5vw 10vw;
}
.content#why { padding-top: 0; }
.content800 {
	max-width: 800px;
	margin: 0 auto;
}
.content1200 {
	max-width: 1200px;
	margin: 0 auto;
}
.col3 {
	width: 30.66%;
	float: left;
	margin: 0 1.33% 0 1.33%;
}
.col2 {
	width: 46%;
	float: left;
	margin: 0 2% 0 2%;
}

.locations {
	color: white;
	background: #56ba56;
	position: relative;
}
.content.locations {
	padding-top: 2vw;
	padding-bottom: 2vw;
}
.country_dropdown { display: none !important; }
.locations img.curve {
	position: absolute;
	width: 100vw;
	height: 9vw;
	top:-5.9vw;
	left: 0;
	pointer-events: none;
}

.why_icon {
	display: inline-block;
	border-radius: 999px;
	background: #edeff1;
	padding: 30px;
	font-size: 30px;
	color: #5eb75b;
	width: 100px;
	height: 100px;
	-webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;
}

#products {
	background: #004b8b url(_inc/img/products_bg.jpg) no-repeat center center;
	background-size: cover;
}

.products_inner {
	background: white;
	padding: 2.5vw 3vw;
	margin: 4vw auto 0 auto;
	max-width: 1200px;
	border-radius: 3px;
	border-bottom: 3px solid #56ba56;
}
#products .products_inner:nth-child(4) {
	clear: left;
}
.product_image {
	background: #eee none no-repeat center center;
	background-size: cover;
	height: 8vw;
	margin: 0 0 1vw 0;
}
#products .col3 {
	padding: 1.5vw 0;
}

#developments .col3 {
	text-align: center;
	display: block;
	font-size: 0.9vw;
}

.development_image {
	background: #eee none no-repeat center center;
	background-size: cover;
	height: 10vw;
	margin: 0 0 1vw 0;
}


article {
	display: table;
	vertical-align: middle;
	width: 100%;
	margin: 50px 0;
}
.blog_image, .blog_text {
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	padding: 0 40px;
	background-position: center center;
	background-size: cover;
}


#about {
	background: url(_inc/img/about_bg.jpg) no-repeat right top;
	background-size: contain;
}
#history {
	background: url(_inc/img/trees.jpg) no-repeat center center;
	background-size: cover;
}


/* ------------------------------------
MAP
------------------------------------ */

.themap {
	background: white;
	height: 49.87vw;
	position: relative;
	-webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;
}
#map { 
    position:absolute; 
    height: 100%;
    width:100%; 
    -webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;
}

.marker {
    width: 50px;
    cursor: pointer;
}

.mapboxgl-popup {
    max-width: 300px;
}

.mapboxgl-popup td {
    padding-left: 1em;
}

.d-details {
    font-style:italic;
    color: #555;
}
.mapboxgl-canvas {
	cursor: pointer;
}
.mapboxgl-popup-content td, .mapboxgl-popup-content th {
	vertical-align: top;
	text-align: left;
}
p.d-name {
	font-size: 18px;
	margin-top: 5px;
	text-align: center;
}
.mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl-bottom-left { display: none !important; }


/* ------------------------------------
FOOTER
------------------------------------ */

footer {
	background: #2f3339;
	color: #a6a6a6;
}
.logos {
	text-align: center;
	border-top: 1px solid #444;
	border-bottom: 1px solid #444;
	padding: 20px 0;
}
.logos a {
	opacity: 0.5;
	padding: 20px 30px;
	display: inline-block;
}
.logos a:hover {
	opacity: 1;
}
.logos img {
	width: 120px;
	height: 60px;
	object-fit: contain;
}
.footer_certs img {
	width:160px;
	float: right;
	margin: 0 0 0 10px;
}
img.footer_logo {
	height:3vw
}

.footer_certs {
	display: none;
}


/* ------------------------------------
FORMS
------------------------------------ */

input[type='text'], input[type='email'], input[type='number'], select, textarea {
	font: 16px 'Montserrat',Helvetica,Arial,sans-serif;
	padding: 16px 30px;
	max-width: 100%;
	border-radius: 0;
	background: white;
	border:1px solid #555;
	-webkit-appearance: none;
	-webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	            box-sizing: border-box;
}

input[type=submit], a.button, ul.menu > li.button a {
	font-size: 1.1vw;
	line-height: 1.1vw;
	font-family: 'Montserrat',Helvetica,Arial,sans-serif;
	color: white;
	background: #56ba56;
	padding: 1.1vw 2vw 0.9vw 2vw;
	-webkit-appearance: none;
	outline:0;
	cursor: pointer;
	font-weight: 500;
	display: inline-block;
	border: none;
	text-decoration: none !important;
}
input[type=submit]:hover, a.button:hover {
	background: #2c902c;
	color:white;
}


input[type='number'] { -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.gform_ajax_spinner {
	vertical-align: middle;
	margin: 0 8px;
}

.gform_wrapper ul, .gform_wrapper li {
	list-style: none;
	margin: 0;
	padding: 0;
}


/* ------------------------------------
EVERYTHING ELSE, MISCELLANEOUS STUFF
------------------------------------ */

.alignright {
	clear: right;
	float: right;
	margin: 0px 0px 20px 20px;
}

.alignleft {
	clear: left;
	float: left;
	margin: 0px 20px 20px 0px;
}

.wp-caption-text {
	font-style: italic;
	font-size: 11px;
	line-height: 16px;
	margin-top: 3px;
}

button.mfp-close, button.mfp-close:hover { background: transparent !important; }

a {-webkit-tap-highlight-color:#9ce2ff;}
::-moz-selection{background: #9ce2ff !important;}
::selection {background: #9ce2ff !important;}

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }
::-moz-placeholder { color: #999; }
:-ms-input-placeholder { color: #999; }


/* ------------------------------------
MEDIA QUERIES
------------------------------------ */

@media screen and (max-width:1400px) {
	
	.logo img {
		width: 150px;
		margin-top: 42px;
	}
	ul.menu > li > a, .scrolled ul.menu > li > a {
		padding: 50px 10px;
		font-size: 13px;
	}
	.scrolled ul.menu > li > a {
		padding: 33px 10px;
	}
	header {
		padding: 0 30px;
	}
	
}

@media screen and (max-width:1023px) {
	
	body {
		font-size: 14px;
		line-height: 22px;
	}
	#developments .col3 { font-size: 14px; }
	.slide b { white-space: normal; }
	h1 {
		font-size: 34px;
		line-height: 45px;
		margin: 20px 0;
	}
	h2 {
		font-size: 26px;
		line-height: 36px;
		margin: 16px 0;
	}
	h3 {
		font-size: 20px;
		line-height: 30px;
		margin: 16px 0;
	}
	h4 {
		font-size: 18px;
		line-height: 25px;
		margin: 16px 0;
	}
	input[type=submit], a.button, ul.menu > li.button a {
		font-size: 14px;
		line-height: 16px;
		padding: 20px 30px;
	}
	ul.menu > li > a, .scrolled ul.menu > li > a {
		padding: 53px 5px;
		font-size: 11px;
	}
	.scrolled ul.menu > li > a {
		padding: 33px 5px;
	}
	select.language_dropdown {
		font-size: 10px;
		padding: 9px 31px 9px 14px;
	}
	
}

@media screen and (max-width:768px) {
	
	button.slick-prev, button.slick-next { display: none !important; }
	body {
		text-align: center;
	}
	header, .scrolled header {
		height: 60px;
		text-align: left;
		overflow: visible;
	}
	.logo img, .scrolled .logo img {
		width: 120px;
		margin-top: 16px;
	}
	body.blog, body.page-template-page_template_certifications {
		padding-top: 60px;
	}
	.content {
		padding: 30px;
	}
	ul {
		text-align: left;
	}
	.col3, #products .col3 {
		float: none;
		width: auto;
		padding: 20px 0;
	}
	.col2 {
		float: none;
		width: auto;
	}
	.slide_inner { padding: 80px 30px; text-align: center; }
	.footer_certs img {
		float: none;
		margin: 0 auto 10px auto;
		display: block;
	}
	img.footer_logo {
		height:auto;
		width: 120px;
	}
	.logos a { padding: 10px; }
	.blog_image, .development_image, .product_image { height: 130px; }
	.products_inner { padding-top:0; }
	article {
		display: block;
		width: auto;
		margin: 60px 0;
		text-align: center;
	}
	.blog_image, .blog_text {
		display: block;
		width: auto;
		padding: 0;
		background-position: center center;
		background-size: cover;
	}
	.blog_image {
		height: 150px;
	}
	
	nav {
		position: fixed;
		top: 0; left: 110%; width: 100%; height: 100%;
		background: #2f3339;
		text-align: center;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
	}
	.nav_on nav { left:0 }
	a.logo {
		position: relative;
		z-index: 1;
	}
	ul.menu > li {
		display: block;
	}
	ul.menu > li > a, .scrolled ul.menu > li > a {
		display: block;
		font-size: 14px;
		padding: 12px;
		text-align: center;
	}
	ul.menu > li > a:hover::before { display: none !important; }
	nav > div {
		display: table;
		vertical-align: middle;
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;left:0;
	}
	ul.menu {
		display: table-cell;
		vertical-align: middle;
	}
	a.nav_toggle { display: block; }
	.slide { height: 70vh; }
	#about { background: white; }
	.themap {
		text-align: left;
		height: 400px;
	}
	ul.menu > li {
		text-align: center;
	}
	select.language_dropdown {
		margin: 10px 0;
	}
	img.alignright, img.alignleft {
		float: none;
		display: block;
		margin: 0 auto;
	}
	ul.sub-menu { display: none !important }
}

@media screen and (max-width:480px) {
	
}