/*  
Theme Name: WPG Media - v2
Theme URI: http://www.wpgmedia.nl/
Description: custom wordpress theme for WPG Media
Author: Atypisch - Marten Timan
Author URI: http://www.atypisch.nl
Version: 1.0.2
*/

/* basic elements */
html,body { 
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6;
	font-weight: 300;
	margin: 0; 
	padding: 0;
	color: #334149;
	text-align: left;
	background: #fff;
}
	
h1, h2, h3, h4, h5, h6 { 
	font-weight: 500;
	padding: 20px 0 20px 0;
	margin: 0;
	color: #000;
	line-height: auto;
}

/* adjust heading colors */
.bg_black h1 { color: #fff; padding-bottom: 40px; }
.bg_black h2 { color: #0abf4e; }

a img, img a {
	border: 0;
	outline: 0;
}
	
a:link, a:visited {
	color: #009fda;
	text-decoration: none;
	outline: 0;
}

a:hover, a:active {
	color: #69cff7;
}

a.arrow_green:link, a.arrow_green:visited {
	color: #0abf4e;
	padding-right: 25px;
	background-image: url(images/green-arrow-right@3x.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 14px 14px;
}

a.arrow_green:hover, a.arrow_green:active {
	color: #1eff73;	
}

a.arrow_blue:link, a.arrow_blue:visited {
	color: #009fda;
	padding-right: 25px;
	background-image: url(images/arrow-right@3x.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 14px 15px;
}

a.arrow_blue:hover, a.arrow_blue:active {
	color: #69cff7;
}

a.arrow_blue_down:link, a.arrow_blue_down:visited {
	color: #009fda;
	padding-right: 25px;
	background-image: url(images/arrow-down@3x.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 14px 15px;
}

a.arrow_blue_down:hover, a.arrow_blue_down:active {
	color: #69cff7;
}

ul, ol {
	padding: 10px 0 15px 20px;
	margin: 0;
}

b, strong {
	
} 

hr {
	border: 0;
	height: 1px;
	width: 100%;
	background-color: #A39474;
	padding: 0;
	margin: 20px 0 0 0;
}

blockquote {
	float: left;
	padding: 10px 0 10px 30px;
	margin: 0;
	font-size: 22px;
	line-height: 26px;
	font-weight: 300;
}	

/* WP navigation toolbar fix */
#wpadminbar {
	position: absolute;
	top: 0;
	z-index: 1;
}
  
/* specific divs */
#horizon {
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	text-align: center;
}

.container {    
	padding: 0;
	border: 0;
	text-align: left; 
	margin-left: auto; 
	margin-right: auto; 
}

#container_wrap {
	float: left; 	
	padding: 0; 
	border: 0;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/* wrap has all the needed padding, also above the footer */
#wrap {
	float: left;
	padding: 125px 0 0 0;
	margin: 0;
}

#backtohome {
	float: left;
	margin: 0;
	border: 0;
	padding: 25px 0 0 0;
	width: 150px;
	height: 69px;
}	
	
#backtohome a:link, #backtohome a:visited {  
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	text-transform: uppercase;
	width: 150px;
	height: 69px;
	border: 0;
	background-image: url(images/w-p-g-logo@3x.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

#backtohome a:hover, #backtohome a:active {  
	opacity: 0.5;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 0;
	margin: 0;
	height: 125px;
	width: 100%;
	background: #fff;
}

.page_content {  
	float: left;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* standard DIVS */
#header_images {
	float: left;
	background: transparent;
	padding: 0;
	margin: 0;
	width: 100%;
	height: auto;
}

#content img, #header_images img, .content_left img, #wrap img {
	max-width: 100%;
	padding: 0;
	margin: 0;
	height: auto;
}

.content_left {
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
}

.sidebar {
	float: right;
	margin: 0;
	padding: 20px 0 0 0;
	border: 0;
}

.sidebar_item {
	float: left; 
	width: 100%;
	max-width: 500px;
	padding: 0;
	margin: 0;
}

.sidebar_item.bg_black ul {
	list-style: none;
	padding: 0 0 30px 0;
	margin: 0;
}

.sidebar_item.bg_black li {
	padding:  0 0 10px 40px;
	background-color: transparent;
	background-image: url(images/listitem_check_black.png);
	background-repeat: no-repeat;
	background-size: 18px 18px;
	background-position: 0 9px;
}

.sidebar_item_image {
	padding: 60px;
}

.sidebar_item_image img {
	max-width: 100%;
}

.sidebar_item_content {
	padding: 0 0 0 60px;
}

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

ul.download-list li {
	padding: 0 0 10px 0;
}

ul.download-list li a {
	padding: 0 0 2px 40px;
	background-color: transparent;
	background-image: url(images/arrow-down@3x.png);
	background-repeat: no-repeat;
	background-position: left 5px;
	background-size: 16px 17px;
}

/* columns */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6  {
	float: left;
	padding: 0;
	margin: 0;
	border: 0;
}


/* page commons classes */
.page_title {
	clear: both;
	display: inline;
	font-family: 'Roboto Slab', sans-serif;
	font-size: 25px;
	color: #0abf4e;
	padding: 0 0 8px 0;
	margin: 0 0 10px 0;
	border-bottom: 2px solid #09a947;
}

.page_subtitle { 
	clear: both;
	display: block;
	font-family: 'Roboto', sans-serif;
	padding: 40px 0 0 0;
	color: #fff;
	font-size: 30px;
}

/* wp classes */
.post {
	float: left;
	padding: 0; 
	margin: 0;
	text-align: left;
	width: 100%;
}

.post_image {
	float: left;
	padding: 20px 0 20px 0;
	margin: 0;
	border: 0;
	width: 300px;	
	height: 300px;	
}

.post_image img { 
	width: 100%;	
	height: auto;	
	border: 0; 
}

.post_content {
	float: left;
	padding: 0;
	margin: 0;
	width: 100%;
}

.post_content_title {
	padding: 0 0 20px 0;
}

.entry {
	float: left;
	padding: 0;
	margin: 0;
}

.post p {
	padding: 0 0 40px 0;
	margin: 0;
}

.post img {
	max-width: 100%;
}

.post p.postmetadata {
	text-align: left; 
	color: #838383;
	line-height: 18px;
	padding: 2px;
	margin: 0;
}

.post-edit-link {
	clear: both;
	float: left;
	width: 100%;
}

.readmorelink {
	font-size: 18px;
}

.navigation { 
	float: left;
	padding: 0 0 20px 0;  
}

.space {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	height: 30px;
}

/* Merken  */
.brand_logo {
	float: left;
	height: 50px;
	max-width: 100%;
}

.brand_logo img {
	max-height: 100%;
	width: auto;
}

.brand_slogan {
	float: left;
	width: 100%;
	padding: 20px 0 0 0;
	margin: 0;
	font-size: 20px;
	font-weight: 300;
}

.brand_link {
	float: right;
	width: auto;
	padding: 68px 0 0 40px;
	margin: 0;
}

.brand_link a:link, .brand_link a:visited {
	float: left;
	color: #899bac;
	text-decoration: none;
	padding: 2px 0 0 40px;
	margin: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 8px;
	background-size: 22px 22px;
	opacity: 1.0;
}

.brand_link a:hover, .brand_link a:active {
	opacity: 0.5;
}

.brand_numbers_wrap {
	height: 105px;
	padding: 15px 50px 10px 0;
	color: #334149;
	font-size: 16px;
}

.brand_numbers_wrap.spacing {	
	padding: 15px 50px 10px 25px;
}

/* Merken (brands) overview */
a.preview_link:link, a.preview_link:visited {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0.5;
	background-color: #fff;
	z-index: 3;
}

a.preview_link:hover, a.preview_link:active {
	opacity: 0;
}

.preview_logo {
	position: absolute;
	bottom: 0;
	left: 0;
	width: auto;
	max-width: 80%;
	height: 50px;
	padding: 20px;
	margin: 0;
	background-color: #020b12;
	z-index: 2;
}

.preview_logo img {
	max-height: 50px;
	width: auto;
	max-width: 100%;
}

.preview_image {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: transparent;
	z-index: 1;
}

.bg_url { background-image: url(images/icon_url.png); }
.bg_fb { background-image: url(images/icon_fb.png); }
.bg_tw { background-image: url(images/icon_tw.png); }


/* Over ons */
.timeline_wrap {
	float: left;
	padding: 50px 0 0 0;
	margin: 0;
}

.timeline_item {
	float: left;
	padding: 0 20px 0 60px;
	margin: 0;
	width: auto;
	height: auto;
	border-left: 1px solid #0abf4e;
}

.timeline_item.last {
	border: 0;	
}

.timeline_marker {
	position: absolute;
	top: 0;
	left: -65px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #0abf4e;
	overflow: hidden;
}

h1.timeline_year {
	position: relative;
	top: -20px;
	left: auto;
	width: 100%;
	color: #0abf4e;
	padding: 0 0 20px 0;
	margin: 0;
	font-size: 40px;
	font-weight: 300;
}

.timeline_content { 
	position: relative;
	top: -40px;
	left: auto;
	padding:  0;
	margin: 0;
}

.timeline_content p {
	padding: 0;	
}

/* Vacatures */
.vacancy_wrap {
	display: block;
	padding: 0 10px 10px 10px;
	margin: 0 auto;
	border: 0;
}

/* Contact */ 
#gmap {
	float: left;
	width: 100%;
	height: 100%;
	min-height: 800px;
}

/* common classes */
.color_white, h2.color_white { color: #fff; }
.color_blue { color: #009dda; }
.color_black { color: #020b12; }
.color_green { color: #0abf4e; }
.color_gray { color: #8496a7;  }
.overflow_hidden { overflow: hidden; }
.font_size_small { font-size: 16px; }

/* spacing/padding */

.padding_20 { padding: 20px; }
.padding_60 { padding: 60px; }
.padding_bottom_10 { padding: 0 0 10px 0; }
.padding_bottom_40 { padding: 0 0 40px 0;  }
.padding_top_small { padding-top: 40px; }
.padding_bottom_small { padding-bottom: 40px; }

/* text align */
.text_align_left { text-align: left; }
.text_align_right { text-align: right; }
.text_align_center { display: block; text-align: center; }

/* background colors */
.bg_white { background-color: #fff; }
.bg_gray { background-color: #f9f9fa; }
.bg_blue { background-color: #009dda; }
.bg_black { background-color: #020b12; }

/* borders*/
.border_top { border-top: 1px solid #e1e3e7; }
.border_bottom { border-bottom: 1px solid #e1e3e7; }
.border_left { border-left: 1px solid #e1e3e7; }
.border_right { border-right: 1px solid #e1e3e7; }
.border_full { border: 1px solid #e1e3e7; }

.bg_blue, .bg_blue a { color: #fff; }

/* fonts */
.font_roboto_slab {  font-family: 'Roboto Slab', sans-serif; }

/* widths */
.width_80 { width: 80%; }

/* css transitions */
.transition {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* buttons */
a.btn:link, a.btn:visited {
	width: auto;
	padding: 25px 25px;
	margin: 0;
	color: #fff;
	background-color: #009fda;
	border-radius: 10px;
	line-height: 18px;
}

a.btn:hover, a.btn:active { 
	background-color: #57c8f2;
}

a.btn_white:link, a.btn_white:visited {
	float: left;
	padding: 25px 25px 25px 100px;
	width: 315px;
	margin: 0 0 10px 0;
	height: auto;
	color: #009dda;
	border: 1px solid #e1e3e7;
	border-radius: 10px;
	line-height: 30px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 30px 20px;
	background-size: 60px 90px;
	font-weight: 300;
}

a.btn_white:hover, a.btn_white:active, a.btn_white.current  { 
	color: #fff;
	background-color: #009fda;
	background-position: 30px -25px;
	border: 1px solid #009fda;
}

a.btn_arrow_blue:link, a.btn_arrow_blue:visited {
	display: block;
	padding: 25px 25px 25px 25px;
	width: 80%;
	margin: 0 5% 10px 5%;
	height: auto;
	color: #009dda;
	border: 1px solid #e1e3e7;
	color: #009fda;
	padding-right: 25px;
	background-image: url(images/arrow-right@3x.png);
	background-repeat: no-repeat;
	background-position: 95% center;
	background-size: 14px 15px;
	border-radius: 5px;
	text-align: left;
}

a.btn_arrow_blue:hover, a.btn_arrow_blue:active { 
	background-color: #009fda;
	background-image: url(images/white-arrow-right@3x.png);
	border: 1px solid #009fda;
	color: #fff;
}

.btn_large_wrap {
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	height: auto;
}

a.btn_large:link, a.btn_large:visited {
	float: left;
	margin: 0 15px 30px 15px;
	color: #009dda;
	border: 1px solid #e1e3e7;
	border-radius: 5px;
	line-height: 30px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center 50px;
	background-size: 150px 225px;
	font-weight: 300;
}

a.btn_large:hover, a.btn_large:active, a.btn_large.current  { 
	color: #fff;
	background-color: #009fda;
	background-position: center -65px;
	border: 1px solid #009fda;
}

/* align  */
.alignright {
	float: right;
}

.alignleft {
	float: left;
}

.aligncenter, .aligncenter p {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* social share icons */
.social_share {
	float: right;
	height: 26px;
	width: 60px;
	padding: 0;
	margin: -35px 0 0 0;
}

.social_share.less_margin {
	margin: -25px 0 0 0;
}

.social_share a:link, .social_share a:visited {
	float: left;
	width: 30px;
	height: 26px;
	padding: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-position: 0 0;
}

.social_share a:hover, .social_share a:active {
	background-position: 0 -26px;
}

.social_share a.btn_tw { background-image: url(images/btn_tw.png); }
.social_share a.btn_fb { background-image: url(images/btn_fb.png); }


/* Footer top */
.footer_top {
	float: left;
	width: 100%;
	padding: 100px 0 100px 0;
	margin: 0;
	font-weight: 300;
	background: #009dda;
}

.footer_top span {
	font-size: 30px;
}

/* Footer bottom */
.footer_wrap {
	float: left;
	padding: 0;
	margin: 0 0 40px 0;
}
	
#footer {
	float: left;
	text-align: left;
	margin: 0;
	color: #90a2b5;
	background: #020b12;
}

.footer_inside {
	float: left;
	padding: 100px 0 100px 0;
	margin: 0 auto;
}

h3.title_widgets {
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: #fff;
	text-transform: none;
	background: transparent;
	padding: 0 0 40px 0;
	margin: 0;
}

#footer ul {
	float: left;
	width: 100%;
	list-style: none;
	text-transform: none;
	font-weight: 300;
	padding: 0 0 24px 0;
	margin: 0;
}

#footer li {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	font-weight: 18px;
	line-height: 40px;
	color: #90a2b5;
}

#footer  li a:link, #footer li a:visited {
	color: #90a2b5;	
}

#footer li a:hover, #footer li a:active {
	color: #fff;	
}

#footer a.logo_footer {
	float: left;
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	text-transform: uppercase;
	width: 150px;
	height: 69px;
	border: 0;
	background-image: url(images/w-p-g-media-fc-diap@3x.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
}

.wrapper_relative {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

/*
WIDGET CSS
*/	

.textwidget {
	padding: 0 0 10px 0;
	margin: 0;
}

.textwidget p {
	padding: 0 0 20px 0;
	font-size: inherit;
}

/* mailchimp CSS */
.mc4wp-form {
	float: left;
	padding: 0;
	margin: 0;
}

.mc4wp-form-fields {
	float: left;
	background-color: transparent;
	border: 0;
	width: 100%;
	height: 64px;
	padding: 0;
	margin: 0;
	color: #fff;
}

.mc4wp-form-fields p {
	float: left;
	padding: 0;
	margin: 0;
}

.mc4wp-form-fields h1 {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	color: #90a2b5;
	height: auto;
	font-weight: normal;
}

.mc4wp-form-fields input:not([type=submit]):not([type=file]) {
	float: left;
	width: 100%;
	padding: 15px 0 15px 0;
	margin: 0 0 0 0;
	border: 0;
	text-indent: 10px;
	background: transparent;
	color: #009dda;
	font-size: 18px;
	border: 1px solid #009dda;
	border-radius: 5px;
}

.mc_var_label, #mc-indicates-required, .mc_help, .mc_header_text {
	display: none;
	visibility: hidden;
	height: 0;
}

.mc4wp-form-fields input[type=submit] {
	position: absolute;
	top: 9px;
	left: 82%;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	color: #fff;
	background-color: transparent;
	background-image: url(images/arrow-right@3x.png);
	background-repeat: no-repeat;
	background-size: 14px 15px;
	background-position: center center;
	text-transform: uppercase;
	padding: 5px 0 5px 0;
	text-align: center;
	cursor: pointer;
	border: 0;
	border-radius: 3px;
	font-size: 14px;
	letter-spacing: 0.5px;
}

.mc4wp-form-fields input[type=submit]:hover {
	background-image: url(images/white-arrow-right@3x.png);
}


/* start forms */
#content textarea {
	width: 75%;
	padding: 2px;
	height:125px;
	border: 1px solid #e3e3e3;
}

/* forms */
.wpcf7 {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: left;
}

.wpcf7-form {
	float: left;
	display: block;
	padding: 20px 0 20px 0;
	margin: 0;
	text-align: left;
}

.wpcf7 p {
	float: left;
	width: 100%;
	padding: 0 0 10px 0;
	margin: 0;
	text-align: left;
}

.wpcf7 h2 {
	padding: 0 0 10px 0;
}

.wpcf7 h3, .wpcf7 h4 { 
	padding: 0 0 20px 0;
}


.wpcf7-form-control-wrap {
	float: left;
	padding: 0;
	margin: 0;
}

.wpcf7-text, .wpcf7-textarea, .wpcf7-select  {
	display: block;
	padding: 12px 15px 10px 15px;
	margin: 0;
	font-size: 18px;
	color: #556571;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	background: transparent;
	border: 1px solid #556571;
	border-radius: 5px;
}

.wpcf7-submit {
	display: inline;
	padding: 15px 45px 15px 25px;
	margin: 10px 0 0 0;
	background-color: #0abf4e;
	background-image: url(images/white-arrow-right@3x.png);
	background-size: 15px 14px;
	background-repeat: no-repeat;
	background-position: 80% center;
	border: 0;
	width: auto;
	font-size: 18px;
	color: #fff;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	border-radius: 5px;
}

.wpcf7-submit:hover, .wpcf7-submit:active {
	background-color: #00ff60;
}

.wpcf7 .wpcf7-validation-errors, .wpcf7 .wpcf7-response-output {
	float: left;
	width: 100%;
	border: 0;
	padding: 10px 0 10px 0;
	font-size: 14px;
}

.wpcf7  .wpcf7-not-valid-tip {
	position: static;
	float: left !important;
	width: 100%;
	font-size: 14px !important;
}

.wpcf7-response-output, .wpcf7-response-output p {
	float: left;
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
	color: #fff;
}
/* end of forms */

/* cookie-wall */
body.ll_cookie_wall main section form {
    margin: 25px 0 0 0!important;
}
body.ll_cookie_wall main section {
    padding: 25px!important;
}
body.ll_cookie_wall main section p {
	font-family: 'Roboto Slab', sans-serif;
    font-size: 18px!important;
}
body.ll_cookie_wall main section p:first-child {
    margin-top: 0px!important;
}
body.ll_cookie_wall #logo {
    display: block;
    height: 24px;
    margin: 0 auto 24px;
}
body.ll_cookie_wall h1 {
	font-family: 'Roboto Slab', sans-serif;
    font-weight: 400;
    font-size: 32px;
    padding: 0;
}
.c-cookie-consent {
    color: #334149;
    font-size: 1rem;
    line-height: 1.25rem;
    margin-top: 0px!important;
}
.c-cookie-consent__text--grey {
    text-align: center;
}
#agree_with_cookie_terms {
    position: relative;
    margin: 30px auto 0px;
    background: #009fda;
}
#agree_with_cookie_terms:hover {
    background: #69cff7;
}
body.ll_cookie_wall input[type="submit"] {
    float: none!important;
}