/*
Theme Name: HDR Boats
Theme URI: http://www.hdrboats.com
Author: Kees Versloot (Growing Energy)
Author URI: http://www.growingenergy.nl/
Description: 
Version: 1.0

/* My Minimal WordPress Styling comes here */

html, body { overflow-x: hidden;}

body {
	font-family: 'Raleway', sans-serif;
/*	padding-top:120px;*/
	font-weight:400;
	margin:0!important;
	background-color:#ffffff;
	line-height:1.75;
	font-size: 14.5px;
	color: #000;
}

p { }

a {
	color:#f05b33;
	outline:none!important;
	text-decoration: none !important;
}

a:hover, a:focus {
	color:#f05b33;
	text-decoration:none;
}

.main-content a {
	text-decoration:underline;
}

.main-content .wpb_content_element ul {
    list-style: none;
    padding: 0;
}
.main-content .wpb_content_element ul li {
    padding-left: 0.9em;
}
.main-content .wpb_content_element ul li::before {
	content: "\f105";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
	display: inline-block;
    margin-left: -0.9em;
    width: 0.9em;
    color: #f05b33;
}

/* Headers */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 500; }

h1 { font-size: 24px; }
@media (max-width:768px) {
	h1 { font-size: 24px; }
}
h2 { font-size: 18px; }
h3 { font-size: 16px; }

.bold { font-weight: 500 !important; }

.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }

h2.page-title a {
	text-decoration: none;
	font-size: 24px;
}

.widget h3.widget-title { font-size: 18px; text-transform: uppercase; border-bottom: 1px solid #dddddd; margin-bottom: 12px; padding-bottom: 12px; }

/* Widget Laatste nieuws */
.latest-news h3 { 
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 0;
}
h3.news-title a { 
	text-decoration: none;
}
.latest-news .readmore {
	color: #f05b33;
	text-decoration: none;
	font-weight: 400;
}

/* Logged adminbar */
body.logged-in .fixed-top { 
	top:32px!important;
}


/* Images and wp-captions should always fit and be responsive */
img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}
img[class*="wp-image-"] {
	margin-top: 10px;
	margin-bottom: 10px;
}
.wp-caption {
	border: 1px solid #ccc;
	margin-bottom: 10px;
	max-width: 100%;
	border-radius: 4px;
	padding: 0 10px;
}
.wp-caption.aligncenter {
	margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
	display: block;
}
.wp-caption .wp-caption-text {
	text-align: center;
	margin-top: 10px;
}

/* WP Gallery */
.gallery {
	margin-bottom: 1.5em;
}
.gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}
.gallery dd {
	margin: 0;
}


/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}


/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/* Content */
.main-content-inner {
	padding-bottom: 1.5em;
}
.hentry {
	margin: 0;
}
.entry-meta {
	color: #828282;
}

summary { 
	display: block;
}

/* Clearing */
.clear {
	clear: both;
}


/* Here some needed widget styles 
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 0; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul li { padding-left: 0px; }

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!  
 * For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */
 .comment .children { margin-left: 1.5em; } 
 
 
 /* Logo */
 .logo {
	 padding:0px;
 }
.logo img {
	width: 120px;
	max-width: 120px;
}
@media (min-width:992px) {
	.logo img {
		margin-top: 0px;
		width: 120px;
		max-width: 120px;
	 }
}


/* Diversen */
.btn-normal {
    background-color: #f05b33;
    border-color: #f05b33;
    color: #FFFFFF;
}
.separator {
	border-top:1px solid #e6e6e6;
}
.updated:not(.published) {
    display: none;
}

/* Footer */
.footer {
	background-color:#1a1a1a;
	-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0px 3px 5px 0px rgba(0,0,0,0.05);
	box-shadow: inset 0px 3px 5px 0px rgba(0,0,0,0.05);
	padding-top:30px;
	color: #FFF;
	font-size: 90%;
}
.footer > .container {
	border-bottom: 1px solid #393939;
}
.footer a, .site-copy a { color: white; }
.footer a:hover, .site-copy a:hover { color:#f05b33; }
.footer h3 {
	font-size:14px;
	text-transform: uppercase;
	color: #FFF;
	margin-bottom: 10px;
}
.footer .textwidget { }
.footer i {
	color:#FFF;
}
.footer ul.menu {
	margin: 0;
	padding: 0;
}
.footer ul.menu li {
	list-style:none;
	display:inline-block;
	padding-right:10px;
	margin:0;	
}
.footer ul.menu li a {
	color:#FFF;
}
.footer ul.menu> li > a:hover, .footer ul.menu > li > a:focus {
	color:#f05b33;
	text-decoration:none;
}

/* Footer copyright */
.site-copy {
	background-color:#1a1a1a;
	padding-bottom:60px;
	padding-top: 15px;
	color: white;
}
.site-copy p {
	margin:0!important;
}
.copyright {
	line-height:2.3;
}

ul.disclaimer-links li a {
	color: #ffffff;
}
ul.disclaimer-links li a:hover,
ul.disclaimer-links li.current_page_item a {
	color: #ffffff;
}
ul.disclaimer-links li {
	list-style: none;
	display: inline;

}
ul.disclaimer-links li:before {
  content: "|";
  margin: 10px;
}
@media (max-width: 991px) {
	ul.disclaimer-links li:first-child:before {
	  content: '';
	  margin: 0px;
	}
}


@media (max-width:768px){
	.site-copy p {
		margin-bottom:10px!important;
	}
	.copyright {
		line-height:normal;
	}
}

/* Footer social icons */
ul.footer-socialicons {
	list-style:none;
	padding-left:0;
}
ul.footer-socialicons li {
	display:inline-block;
	margin-left:10px;
}
ul.footer-socialicons li a {
	display:inline-block;
	color:#fff;
}
ul.footer-socialicons li a:hover {
	text-decoration:none;
}

/* vc_composer */
.flexslider {
    border: 0!important;
    border-radius: 0px!important;
}
.uavc-list-content span.uavc-list-desc {
	vertical-align: top !important;
}

/* Contact Form 7 */
input[disabled='disabled'][type='submit'] {
	color:#999;
}
.grecaptcha-badge {
	display:none;
}

/* GoTo Top */
.gototop.active {
    opacity: 1;
    visibility: visible;
}
.gototop {
    bottom: 20px;
    opacity: 0;
    position: fixed;
    right: 20px;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    z-index: 999;
}
.gototop a {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    border-radius: 4px;
    color: #fff;
    display: table;
    height: 40px;
    text-align: center;
    width: 40px;
	text-decoration:none;
}
.gototop a:hover, .gototop a:active {
	text-decoration:none;
}
.gototop a i {
    display: table-cell;
    height: 40px;
    vertical-align: middle;
}
[class^="icon-"], [class*=" icon-"] {
    -moz-osx-font-smoothing: grayscale;
    font-family: "icomoon" !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}

/* Navbar */
.navbar-nav li.lang {
	padding: 7px;
}
.navbar-nav li a.nav-link {
	color: #000 !important;
	text-transform: uppercase;
}
.navbar-nav li a.nav-link:hover {
	color: #f05b33 !important;
}
.navbar-nav li a.nav-link.active,
.navbar-nav li.current_page_parent a.nav-link,
.navbar-nav li.current-page-ancestor a.nav-link {
	color: #f05b33 !important;
	font-weight: 600;
}

.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid,
.navbar-expand-md > .container,
.navbar-expand-md > .container-fluid,
.navbar-expand-sm > .container,
.navbar-expand-sm > .container-fluid,
.navbar-expand-xl > .container,
.navbar-expand-xl > .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 575px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid,
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid,
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid,
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
}




/* navbar toggler */
.navbar-toggler {
	margin-top: 0px;
	margin-bottom: 5px; }
  
  .icon-bar {
	width: 22px;
	height: 2px;
	background-color: #161f2e;
	display: block;
	transition: all 0.2s;
	margin-top: 4px; }
  
  .navbar-toggler {
	border: none;
	background: transparent !important; }
  
  .navbar-toggler:focus {
	  box-shadow: none;
  }
  
  .navbar-toggler .top-bar {
	transform: rotate(45deg);
	transform-origin: 10% 10%; }
  
  .navbar-toggler .middle-bar {
	opacity: 0; }
  
  .navbar-toggler .bottom-bar {
	transform: rotate(-45deg);
	transform-origin: 10% 90%; }
  
  .navbar-toggler.collapsed .top-bar {
	transform: rotate(0); }
  
  .navbar-toggler.collapsed .middle-bar {
	opacity: 1; }
  
  .navbar-toggler.collapsed .bottom-bar {
	transform: rotate(0); }
  
  .navbar-light .navbar-toggler {
	  color: transparent;
	  border-color: transparent;
	  border: none !important;
  }

/* Font size */
#sizecontroldiv {
	margin-top: -6px;
}
#sizecontroldiv a.menu-item {
	color: #444241;
	padding-left: 3px !important;
	padding-right: 3px !important;
	text-decoration: none;
}
#sizecontroldiv a.menu-item:hover {
	color: #007302;
}
#sizecontroldiv .menu-item:not(:first-child):before {
    content: " | ";
}

.textsize {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #027B11;
	border-radius: 0;
	border: none;
}

/*
FILE FORMAT ICONS
by Greg Schoppe (http://gschoppe.com)
USAGE: include FontAwesome on page, as shown on http://fontawesome.io
       then include this css file, and target links by adding the link-icon
       class.  Note: try to avoid or manually label links to websites, as that
       detection code is necessarily janky. when in doubt, just end all external
       links with a trailing slash (/), a query string (?), or a link target (#)
*/
.downloads a:before,
.downloads a[href]:before {
    content: "\f016"; /* generic file icon */
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    width: 20px;
    text-align: right;
    margin-right: 10px;
}
.downloads a[href$=".txt"]:before,
a.link-icon.link-text[href]:before {
    content: "\f0f6"; /*Text*/
}
.downloads a[href$=".pdf"]:before,
a.link-icon.link-pdf[href]:before {
    content: "\f1c1"; /*PDF*/
}
.downloads a[href$=".doc"]:before,
.downloads a[href$=".docx"]:before,
a.link-icon.link-word[href]:before {
    content: "\f1c2"; /*Word*/
}
.downloads a[href$=".xls"]:before,
.downloads a[href$=".xlsx"]:before,
a.link-icon.link-excel[href]:before {
    content: "\f1c3"; /*Excel*/
}
.downloads a[href$=".ppt"]:before,
.downloads a[href$=".pptx"]:before,
a.link-icon.link-powerpoint[href]:before {
    content: "\f1c4"; /*Powerpoint*/
}
.downloads a[href$=".gif"]:before,
.downloads a[href$=".jpg"]:before,
.downloads a[href$=".jpeg"]:before,
.downloads a[href$=".png"]:before,
.downloads a[href$=".bmp"]:before,
.downloads a[href$=".tif"]:before,
a.link-icon.link-image[href]:before {
    content: "\f1c5"; /*Image*/
}
.downloads a[href$=".zip"]:before,
.downloads a[href$=".zipx"]:before,
.downloads a[href$=".rar"]:before,
.downloads a[href$=".tar"]:before,
.downloads a[href$=".gz"]:before,
.downloads a[href$=".dmg"]:before,
.downloads a[href$=".iso"]:before,
a.link-icon.link-archive[href]:before {
    content: "\f1c6"; /*Archive*/
}
.downloads a[href$=".wav"]:before,
.downloads a[href$=".mp3"]:before,
.downloads a[href$=".fla"]:before,
.downloads a[href$=".flac"]:before,
.downloads a[href$=".ra"]:before,
.downloads a[href$=".rma"]:before,
.downloads a[href$=".aif"]:before,
.downloads a[href$=".aiff"]:before,
.downloads a[href$=".aa"]:before,
.downloads a[href$=".aac"]:before,
.downloads a[href$=".aax"]:before,
.downloads a[href$=".ac3"]:before,
.downloads a[href$=".au"]:before,
.downloads a[href$=".ogg"]:before,
.downloads a[href$=".avr"]:before,
.downloads a[href$=".3ga"]:before,
.downloads a[href$=".flac"]:before,
.downloads a[href$=".mid"]:before,
.downloads a[href$=".midi"]:before,
.downloads a[href$=".m4a"]:before,
.downloads a[href$=".mp4a"]:before,
.downloads a[href$=".amz"]:before,
.downloads a[href$=".mka"]:before,
.downloads a[href$=".asx"]:before,
.downloads a[href$=".pcm"]:before,
.downloads a[href$=".m3u"]:before,
.downloads a[href$=".wma"]:before,
.downloads a[href$=".xwma"]:before,
a.link-icon.link-audio[href]:before {
    content: "\f1c7"; /*Audio*/
}
.downloads a[href$=".avi"]:before,
.downloads a[href$=".mpg"]:before,
.downloads a[href$=".mp4"]:before,
.downloads a[href$=".mkv"]:before,
.downloads a[href$=".mov"]:before,
.downloads a[href$=".wmv"]:before,
.downloads a[href$=".vp6"]:before,
.downloads a[href$=".264"]:before,
.downloads a[href$=".vid"]:before,
.downloads a[href$=".rv"]:before,
.downloads a[href$=".webm"]:before,
.downloads a[href$=".swf"]:before,
.downloads a[href$=".h264"]:before,
.downloads a[href$=".flv"]:before,
.downloads a[href$=".mk3d"]:before,
.downloads a[href$=".gifv"]:before,
.downloads a[href$=".oggv"]:before,
.downloads a[href$=".3gp"]:before,
.downloads a[href$=".m4v"]:before,
.downloads a[href$=".movie"]:before,
.downloads a[href$=".divx"]:before,
a.link-icon.link-video[href]:before {
    content: "\f1c8"; /*Video*/
}
.downloads a[href$=".css"]:before,
.downloads a[href$=".js"]:before,
.downloads a[href$=".py"]:before,
.downloads a[href$=".git"]:before,
.downloads a[href$=".py"]:before,
.downloads a[href$=".cpp"]:before,
.downloads a[href$=".h"]:before,
.downloads a[href$=".ini"]:before,
.downloads a[href$=".config"]:before,
a.link-icon.link-code[href]:before {
    content: "\f1c9"; /*code*/
}
.downloads a[href$=".exe"]:before,
.downloads a[href$=".jar"]:before,
.downloads a[href$=".dll"]:before,
.downloads a[href$=".bat"]:before,
.downloads a[href$=".pl"]:before,
.downloads a[href$=".scr"]:before,
.downloads a[href$=".msi"]:before,
.downloads a[href$=".app"]:before,
.downloads a[href$=".deb"]:before,
.downloads a[href$=".apk"]:before,
.downloads a[href$=".jar"]:before,
.downloads a[href$=".vb"]:before,
.downloads a[href$=".prg"]:before,
.downloads a[href$=".sh"]:before,

.downloads a[href$=".com"]:before,
.downloads a[href$=".net"]:before,
.downloads a[href$=".org"]:before,
.downloads a[href$=".edu"]:before,
.downloads a[href$=".gov"]:before,
.downloads a[href$=".mil"]:before,
.downloads a[href$="/"]:before,
.downloads a[href$=".html"]:before,
.downloads a[href$=".htm"]:before,
.downloads a[href$=".xhtml"]:before,
.downloads a[href$=".jhtml"]:before,
.downloads a[href$=".php"]:before,
.downloads a[href$=".php3"]:before,
.downloads a[href$=".php4"]:before,
.downloads a[href$=".php5"]:before,
.downloads a[href$=".phtml"]:before,
.downloads a[href$=".asp"]:before,
.downloads a[href$=".aspx"]:before,
.downloads a[href$=".cfm"]:before,
.downloads a[href*="?"]:before,
.downloads a[href*="#"]:before,
.downloads a:not([href*='.']):before,
a.link-icon.link[href]:before {
    content: "\f0c1"; /*link*/
}

/* Headers */
.container-blog-header, .container-page-header {
	background: #EE832A;
	margin-bottom: 10px;
}
.container-blog-header .blog-header .page-title,
.container-page-header .page-header .page-title {
	padding-top: 120px;
	padding-bottom: 60px;
	color: #fff;
	text-transform: uppercase;
	font-size: 56px;
	line-height: 1.1;
}

.breadcrumb-container {
	margin-bottom: 0px;
}


/** blockquote styles **/
blockquote { position: normal; width: 90%; margin-left: 5%; margin-top: 40px; background: url('images/quote.png') top left no-repeat; padding-left: 55px; }

blockquote p { padding-right: 35px; padding-bottom: 0; margin-bottom: 30px; color: #f05b33; }

/**
blockquote {
    position:relative;
    padding:10px 45px;
}
blockquote:before, blockquote:after {
    color:#f05b33;
    content:'"';

    font-size:30px;
    position:absolute;
    top:5px;
    left:8px;
    display:block;
}
**/

ul.subnav { padding-left: 22px; }
ul.subnav li { list-style: none; }
ul.subnav li a { color: #999999; display: block; }
ul.subnav li.page_item_has_children ul.children { display: none;}
ul.subnav li.page_item_has_children.current_page_ancestor ul.children,
ul.subnav li.page_item_has_children.current_page_item ul.children { display: block;}

ul.subnav li.current_page_item > a { color: #f05b33; font-weight: 600; }
ul.subnav ul.children { margin-left: -16px; }

ul.subnav li a:before,
.widget_categories ul li a:before {
    content: "\f105"; /* generic file icon */
	color: #f05b33;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    width: 20px;
    text-align: right;
    margin-right: 10px;
}

.widget_categories ul { padding-left: 0; list-style: none; }
.widget_categories ul li a { color: #999999; display: block; }
.widget_categories ul li.current-cat a { color: #f05b33; font-weight: 600; }


.angle-after div:after {
    content: "\f105"; /* generic file icon */
	color: #FFF;
	position: absolute;
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 80px;;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
	right: 35px;
	
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

   height:2000px;
   line-height:2000px;
	top: 44%;
}
.angle-after div { padding-right: 70px !important; }
@media (max-width:769px) {
	.angle-after div:after { display: none; }
	.angle-after div { padding-right: 20px !important; }
}


/* Pagination */
ul.pagination li.page-item span.dots {
	padding-left: 13px;
	padding-right: 13px;
}
ul.pagination a {
	color: #444241;
}
ul.pagination li.page-item.active .page-link {
    background-color: #7DCCC8;
	border-color: #7DCCC8;
	color: #000;
}
ul.pagination li.page-item .page-link:hover {
    color: #444241;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
ul.pagination li.page-item .page-link:focus {
	box-shadow: none;
}

/* Uitloop naar rechts/links 
*********************************************************/
.grijs {
	background-color: #f6f6f6;
}
.blauw {
	background-color: #323b43;
}
.menu-blauw {
	background-color: #2A3137;
}

.oranje, .bg-color-bakery {
	background-color: #cc6633;
}
.zeegroen, .bg-color-seafood {
	background-color: #00797a;
}
.bg-color-poultry {
	background-color: #f59d20;
}
.bg-color-redmeat {
	background-color: #813059;
}
.bg-color-vegetarian {
	background-color: #65a675;
}
.well-links,
.well-rechts,
.well-rechts-menu {
/*    z-index: 10;*/
    border: 0px;
/*    background: red;*/
    position: relative;
}

.well-links:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right:100%;
    left:-3000px;
    background: inherit;
    z-index: -1;
}

.well-rechts:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left:80%;
    right:-3000px;
    background: inherit;
    z-index: -1;
}
.well-rechts-menu:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left:80%;
    right:-3000px;
    background: inherit;
    z-index: 1;
}

.center-over-image { 
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: 40px;
}
.right-over-image {
	position: absolute;
	top: 25%;
	right: 80px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.4);
	max-width: 300px;
	color: white;
}
.left-over-image {
	position: absolute;
	top: 25%;
	left: 80px;
	padding: 40px;
	background-color: rgba(0, 0, 0, 0.4);
	max-width: 300px;
	color: white;
}

.flex-fill {
    flex:1 1 auto;
}


	.videos-container {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
	}
	.videos-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}