/*
Theme Name: T&R
Theme URI: http://www.trombenrueb.nl
Author: Twenty First Media
Author URI: http://www.twentyfirstmedia.nl
Description: Maatwerk thema voor Tromb & Rueb. Vormgeving door IT Reklame.
Version: 1.0
*/

/* --- 0. Resets --- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin:0; padding:0; border:0; outline:0; vertical-align:baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display:block; }
img { vertical-align:text-bottom; }
html, body { width:100%; }

/* --- 1. Basics --- */

ul { list-style:none; }

p { margin:18px 0; line-height:22px; }
.left { float:left} .right { float:right; } .center { text-align:center; }
.alignleft { float:left; margin-right:10px; } .alignright { float:right; margin-left:10px; } .aligncenter { display:block; margin:5px auto; text-align:center; }

a { text-decoration:none; }

*, *:before, *:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

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

.clearfix { *zoom:1; }
.clearfix:before, .clearfix:after { display:table; content:""; line-height:0; }
.clearfix:after { clear:both; }

/* -- 1.1 Typography -- */

@font-face {
    font-family: 'futura-pt-condensed';
    src: url('fonts/f-cond.woff2') format('woff2'),
        url('fonts/f-cond.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body { font-family:'Open Sans', Helvetica, arial, sans-serif; font-weight:normal; font-size:15px; background-image:url(images/bg.jpg); background-repeat:repeat; background-position:top left; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; text-rendering: optimizelegibility; line-height: 1.2; }

h1 { font-size:22px; font-weight:600; color:#92c46d; }
h2 { font-size:20px; font-weight:600; color:#92c46d; }
h3 { font-size:18px; font-weight:600; color:#92c46d; }
h4 { font-size:16px; font-weight:700; }
h5 { font-size:15px; font-weight:700; }
h6 { font-size:14px; font-weight:700; }

/* --- Header --- */

header { position:relative; width:100%; height:490px; background-color:#fff; }
header #header { position:absolute; top:0; left:50%; margin-left:-480px; width:960px; }
header.smallheader { position:static; margin:0 auto -64px; max-width:1100px; height:550px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; }

#header #logo { position:absolute; z-index:2; top:0; left:0; width:273px; }
#header #logo img { max-width:100%; height:auto;
-webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
filter:url(shadow.svg#drop-shadow);
}
#header .bottle { position:absolute; z-index:2; top:0; right:20px; opacity:0.0; width:141px;
-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;
}
#header .bottle.show { top:50px; opacity:1.0; }
#header .bottle img { max-width:100%; height:auto; }

header .video-container { position:relative; width:100%; height:496px; background-color:#fff; overflow:hidden; }
header .video-container video { position:absolute; z-index:1; left:50%; margin-left:-960px; width:1920px; height:496px; background-color:#fff; }

#header .headercontent { 
	position:absolute; z-index:2; left:0; top:330px; 
	max-width: calc(100% - 105px); 
	font-family:"futura-pt-condensed", sans-serif; text-transform:uppercase; color:#fff !important; text-shadow:0 0 3px rgba(0, 0, 0, 0.5);
}
#header .headercontent h1 { font-size:38px; font-weight:600; color: #fff; }
#header .headercontent h2 { font-size:38px; font-weight:400; color:#fff; }

@keyframes fadein {
    0% { opacity: 0; }
    100%   { opacity: 1; }
}
@keyframes rotate {
	0% { transform: rotate(-180deg); }
    100% { transform: rotate(0); }
}
@keyframes scale {
	0% { transform: scale(0.6); }
	100% { transform: scale(1.0) }
}

#header .sticker { 
	position: absolute;
	top: 245px;
	left: 10px;
	width: 240px;
	animation: fadein 1.4s, rotate 1.4s, scale 1.4s;
}

/* --- Slider --- */

#slider { width:100%; height:490px; }

.carousel { position:relative; overflow:hidden; }
.carousel-inner { position:relative; width:100%; height:490px; }

.carousel-inner > .item { opacity:0; position:absolute; left:0; top:0; width:100%; height:490px; background-repeat:no-repeat; background-position:center center; background-size:cover;
-webkit-transition:all 0.9s ease-in-out; transition:all 0.9s ease-in-out; }

.carousel-inner > .active { opacity:1; }
.carousel-inner > .active.left,
.carousel-inner > .active.right { float:none; opacity:0; z-index:1; }
.carousel-inner > .next.left, .carousel-inner > .prev.right { opacity:1; }

.carousel-indicators { position:absolute; bottom:30px; z-index:15; left:50%; margin-left:-480px; width:960px;  }
.carousel-indicators li { display:inline-block; margin:0 1px; width:10px; height:10px; text-indent:-99999px; background:#fff; -webkit-border-radius:50%; border-radius:50%; }
.carousel-indicators li:hover { cursor:pointer; background:#fff; }
.carousel-indicators .active { background:#929291; }

/* --- Navigation --- */

#navi { width:100%; height:64px; font-family:"futura-pt-condensed", sans-serif; font-weight:normal; background-image:url(images/wood.jpg); background-repeat:repeat-x; background-position:top left; }
#navi.blank { background-image:none; }
#navi nav { margin:0 auto; width:960px; height:64px; background-color:#fff; background-color:rgba(255,255,255,0.9); }
#navi nav > ul { margin:0 10px; }
#navi nav > ul > li { position:relative; float:left; text-transform:uppercase; }
#navi nav > ul > li > a { display:block; padding:0 15px; font-size:24px; line-height:64px; color:#92c46d; }
#navi nav > ul > li > a:hover, #navi nav > ul > li.current-menu-item > a { color:#929291; }

#navi nav > ul > li.menu-item-has-children:hover .sub-menu { display:block; }
#navi nav .sub-menu { position:absolute; z-index:3; top:100%; left:0; display:none; float:left; min-width:175px; background-color:rgba(255,255,255,1.0); }
#navi nav .sub-menu > li > a { display:block; margin-top:2px; padding:3px 10px; font-size:18px; line-height:24px; color:#fff; font-weight:normal; background-color:rgba(146,196,109,0.6); }
#navi nav .sub-menu > li > a:hover { background-color:rgba(146,196,109,1.0); }

#navi nav .sub-menu > li:first-child > a { margin:0; }

#navi #pull { display:none; }

/* --- Main --- */

#main { position:relative; margin:0 auto; padding:20px 30px 30px; width:960px; background-color:#fff; }

#main:before { content:""; position:absolute; top:0; left:-50px; display:block; width:50px; height:100%; background-image:url(images/shadow-left.png); background-repeat:no-repeat; }
#main:after { content:""; position:absolute; top:0; right:-50px; display:block; width:50px; height:100%; background-image:url(images/shadow-right.png); background-repeat:no-repeat; }

#main article {  }

/* --- Archive --- */

.archive { margin-top: 30px; }
.archive article { margin-bottom: 15px; }

#archive { }

#archive .archive-title { width:100%; margin-bottom:20px; }

#archive article h2 { margin-bottom:15px; }
#archive article a { color:#929291; }
#archive article a:hover { color:#92C46D; }

#sidebar { position:relative; margin-bottom:50px; padding-bottom:30px; width:100%; color:#92c46d; }
#sidebar > h3 { padding:20px 20px 0 20px; font-size:18px;  }
#sidebar h4 { margin-bottom:10px; font-size:16px; color:#929291; }
#sidebar .filter { z-index:1; margin:15px 20px; }
#sidebar label { margin-left:5px; }

#sidebar .entry {
    color: #92c46d;
}

#sidebar.grey { background-color:#f4f4f4; color:#929291; }
#sidebar.grey:after { position:absolute; z-index:0; left:0; bottom:-30px; content:""; width:100%; height:60px; background:#f4f4f4; 
-moz-border-radius:100% / 60px; -webkit-border-radius:100% / 60px; border-radius:100% / 60px; }

.tag { display:inline-block; float:left; margin:10px 10px 0 0; padding:0 8px; font-size:12px; line-height:22px; border:1px solid #e0e0e0; background-color:#f0f0f0;
-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.tag:hover { cursor:pointer; border:1px solid #c9c9c9; background-color:#e6e6e6; }
.tag:after { content:" x"; margin-left:8px; font-size:16px; line-height:22px; }
.tag:hover:after { color:red; }

.share-this { margin-top:50px; padding-top:25px; border-top:1px solid #C8C8C7; }
.print { display:block; width:16px; height:14px; text-indent:-9999px; background:url(images/print-icon.gif) top left no-repeat; }

#sidebar #search { margin:10px 15px; }
#sidebar #search #searchform { padding:0 8px; width:100%; height:24px; text-align:center; font-family:'Open Sans', Helvetica, arial, sans-serif; font-weight:bold; font-size:12px; line-height:24px;  border:1px solid #e0e0e0; background-color:#f0f0f0; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }

/* --- Column Styles --- */

.center { text-align:center; }
.centered { margin:0 auto; float:none; }
.bordered { padding:20px 20px 2px; border:1px solid #e0e0e0; }

/* --- 5. Entry --- */

.entry { color:#929291; }
.entry strong { font-weight:700; }
.entry p a, .entry li a, .entry strong a, .entry label a { color:#92c46d; text-decoration:underline; }
.entry p a:hover, .entry li a:hover, .entry label a:hover { text-decoration:none; }
.entry h1 a, .entry h2 a, .entry h3 a { color:#92c46d; }
.entry h1 a:hover, .entry h2 a:hover, .entry h3 a:hover { color:#929291; }
.entry blockquote { font-size:26px !important; line-height:26px !important; font-style:italic; }
.entry blockquote p { font-size:26px !important; line-height:26px !important; font-style:italic; }
.entry ol { margin:16px 0 16px 20px; }
.entry ol li { line-height:26px; }
.entry ul { margin:16px 0 16px 24px; }
.entry ul ul { margin:0; }
.entry ul li { list-style-image:url(images/bullet.png); line-height:28px; }

.entry hr { margin:15px 0 25px; width:100%; height:1px; background:#92C46D; border:0; }
.entry div.rounded img { -webkit-border-radius:50%; border-radius:50%; overflow:hidden; }

.gallery-item { margin: 0 !important; }
.gallery p { margin: 0; }
.gallery a { display: block; padding: 10px; transition: all .2s ease-in-out; }
.gallery a:hover img { border-color: #92c46d !important; }

.entry .wp-caption { position:relative; max-width:100%; background:#ccc; overflow:hidden; }
.entry .wp-caption .wp-caption-text { position:absolute; bottom:0; width:100%; margin:0; padding:5px 15px; height:0px; color:#fff; }

.entry .embed { position:relative; padding-bottom:56.25%; /* 16:9 */ padding-top:25px; height:0; }
.entry .embed iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

/* --- Contact --- */

/* --- 7. Contactform --- */

#contact { width:100%; }
#contact fieldset { margin:10px 0; display:block; }
#contact fieldset label { float:left; display:inline-block; max-width:40%; line-height:22px; }
#contact fieldset label span { color:red; }
#contact fieldset p {
	margin: 0;
}
#contact fieldset br { display:none; }
#contact fieldset .text, #contact fieldset .wpcf7-select { float:right; padding:6px; width:58%; font-family:'Open Sans', Helvetica, arial, sans-serif; font-weight:normal; font-size:14px; font-weight:normal; -webkit-border-radius:3px; border-radius:3px; border:1px solid #ccc; }
#contact fieldset .wpcf7-radio, #contact fieldset .wpcf7-checkbox { float:right; padding:6px; width:58%; font-family:'Open Sans', Helvetica, arial, sans-serif; font-weight:normal; font-size:14px; font-weight:normal; }
#contact fieldset .wpcf7-list-item { margin:0 !important; display:block; }
#contact .button { padding:5px 15px; font-family:'Open Sans', Helvetica, arial, sans-serif; font-weight:normal; font-size:14px; color:#fff; background:#92C46D; -webkit-border-radius:5px; border-radius:5px; border:0; }
#contact .button:hover { color:#fff; background:#929291; cursor:pointer; }

div.wpcf7-response-output { margin:2em 0 1em !important; padding:0.5em 1em !important; -webkit-border-radius:3px; border-radius:3px; }
div.wpcf7-mail-sent-ok { color:#398f14 !important; border:2px solid #398f14; }
span.wpcf7-not-valid-tip { display:inline-block !important; }

/* --- 9. Footer --- */

footer { width:100%; background:#c8c8c7; }
footer #footer { margin:20px auto; padding:20px 30px; width:960px; font-size:15px; color:#fff; }

#footer a { color:#fff; }
#footer a:hover { text-decoration:underline; }
#footer ul li { margin:4px 0; }
#footer ul li ul { margin-left:14px; list-style:disc; }

#footer #search { margin:0 0 10px; }
#footer #search #searchform { padding:0; width:130px; height:24px; text-align:center; font-family:'Open Sans', Helvetica, arial, sans-serif; font-weight:bold; font-size:12px; line-height:24px; color:#5bac27; background:#f6f6f6; border:0; }

/* --- Pagination --- */

#pagination { margin:20px auto; display:block; text-align:center; font-size:13px; }
ul.page-numbers { display:inline-block; -webkit-border-radius:5px; border-radius:5px; border:1px solid #c9c9c9; overflow:hidden;
background:#f8f8f8; }
ul.page-numbers li { float:left; border-left:1px solid #c9c9c9; }
ul.page-numbers li:first-child { border:0; }
ul.page-numbers li a { display:inline-block; padding:6px 9px; color:#92C46D; }
ul.page-numbers li a:hover { color:#929291; background:#fff; }
ul.page-numbers li .current, ul.page-numbers li .dots { display:inline-block; padding:6px 9px; color:#929291; }

.monthly h3 { margin-bottom:15px; }

/* --- Grid --- */

.grid_item {
    position: relative;
    display: flex;
    margin-bottom: 30px;
    background-color: #92c46d;
    overflow: hidden;
}
.grid_item.item-s {
    height: 185px;
}
.grid_item.item-l {
    height: 400px;
}
.grid_item .item_content {
    display: flex;
    position: relative;
    z-index: 1;
    padding: 20px;
    width: 100%;
    height: 100%;
}
.grid_item .item_content.white * {
    color: #FFF;
    text-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.grid_item .item_content.green * {
    color: #92c46d;
}
.grid_item .item_title {
    display: flex;
    flex-basis: 100%;
}
.grid_item .item_title.center {
    align-self: center;
}
.grid_item .item_title.bottom {
    align-self: flex-end;
}
.grid_item .item_title h1,
.grid_item .item_title h2,
.grid_item .item_title h3,
.grid_item .item_title h4 {
    width: 100%;
}
.grid_item .item_title h1 {
    font-size: 32px;
    font-weight: bold;
}
.grid_item .item_title h2 {
    font-size: 28px;
    font-weight: bold;
}
.grid_item .item_title h3 {
    font-size: 26px;
    font-style: italic;
}
.grid_item .item_title h3 {
    font-size: 24px;
}
.grid_item .item_image {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transition: all .4s linear;
}
.grid_item .item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.grid_item:hover .item_image {
    transform: scale(1.04);
}

/* --- 10. Miscellaneous --- */

/* -- 10.1 Fluid Columns -- */

.one { width:100%; float:left; position:relative; margin-top:7px; margin-bottom:15px; }
.one_half { width:48.5%; }
.one_third { width:31.333%; }
.two_third { width:65.6667%; }
.one_fourth { width:22.75%; }
.three_fourth { width:74.25%; }
.one_fifth { width:17.6%; }
.two_fifth { width:38.2%; }
.three_fifth { width:58.8%; }
.four_fifth { width:69.4%; }
.one_sixth { width:14.16667%; }
.five_sixth { width:82.8333%; }
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { float:left; position:relative; margin-right:3%; }

.last { margin-right:0 !important; clear:right; }
.clearboth { clear:both; display:block; font-size:0; height:0; line-height:0; width:100%; }

.blurred {
  filter: blur(7px);
  -webkit-filter: blur(7px);
}

.flex-grid {
	margin-left: -15px;
	margin-right: -15px;
	display: flex;
	flex-wrap: wrap;
}
.flex-grid > div {
	margin: 0;
	padding-left: 15px;
	padding-right: 15px;
}
.flex-grid > .one_third {
	width: 33.33333%;
}
.flex-grid > .two_third {
	width: 66.66666%;
}


/* --- Cookie Message --*/

.cookie-message {
	-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 24px 160px 12px 160px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #d8d8d8;
    z-index: 999;
    max-height: 70%;
    overflow: hidden;
    overflow-y: scroll;
}
.cookie-message h2 {
	font-size: 16px;
}
.cookie-message p {
	margin: 10px 0;
	font-size: 13px;
}
.cookie-message a {
	color: #0054a3;
	text-decoration: underline;
}
.cookie-message a:hover {
	text-decoration: none;
}
.cookie-close {
	display: inline-block;
    padding: 12px 16px;
    color: #fff !important;
    border-radius: 2px;
    background-color: #3fc756;
    -webkit-box-shadow: 0 1px 0 0 #599716;
    box-shadow: 0 1px 0 0 #599716;
    text-decoration: none;
    border: 0;
    font-size: 15px;
    cursor: pointer;
	text-decoration: none !important;
}
.cookie-close:after {
	content: none;
}



/* --- 11. Responsiveness ---*/

@media (max-width:1020px) {
header, #navi nav, #main, footer #footer, .carousel-indicators { width:100%; }
header #header, .carousel-indicators { left:0; margin-left:2%; margin-right:2%; width:96%; }

#main:before, #main:after { display:none; }

.cookie-message { 
	padding: 10px;
}

}


@media only screen and (max-width:767px) {
	
header, header .video-container, #slider, .carousel-inner, .carousel-inner > .item { height:300px; }
header.smallheader { height:364px; }

#header #logo { width:180px; }
#header .headercontent { top:150px; }

#header .bottle.show { top:22px; right:15px; width:90px; }

header .video-container { height:300px; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; }
header .video-container video { display:none; }

#header .sticker { 
	top: 160px;
	width: 140px;
}

#navi #pull { display:block; padding:0 3%; font-size:24px; line-height:64px; color:#92c46d; }
#navi #pull:before { content:"+ "; }
#navi #pull.pulled:before { content:"– "; }

#navi, #navi nav { height:auto; }
#navi nav > ul { display:none; margin:0; padding:15px 0; height:auto; background:#fff; } 
#navi nav > ul > li { float:none; }
#navi nav > ul > li > a { display:block; padding:0 3%; line-height:35px; }

#navi nav .sub-menu { position: static; display: block; float:none; min-width: 0; }
	#navi nav .sub-menu > li { text-transform: none; }
#navi nav .sub-menu > li > a { display:block; padding:0 5%; line-height:35px; font-size:24px; color:#929291; background-color:#fff; }
#navi nav .sub-menu > li > a:hover { background-color:#fff; }

#navi nav .sub-menu > li:first-child > a { margin:0; }


#main { padding-left:2%; padding-right:2%; }

.grid_item .item_title h1 {
    font-size: 28px;
}
.grid_item .item_title h2 {
    font-size: 24px;
    font-weight: bold;
}
.grid_item .item_title h3 {
    font-size: 21px;
    font-style: italic;
}
.grid_item .item_title h3 {
    font-size: 19px;
}  

@media ( max-width:640px ) {

#header .sticker { 
	left: 22%;
	width: 110px;
}
	
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth { 
	float: none;
	margin: 0;
	width: 100%;
}
	
.flex-grid > div {
	width: 100% !important;
	
}
	
.order-sm-1 {
	order: 1;
}
.order-sm-2 {
	order: 2;
}

footer #footer { padding:0 15px; }
#footer ul { margin:20px 0; }

.grid_item.item-s {
    height: 150px;
}
.grid_item.item-l {
    height: 175px;
}

} 

@media ( max-width: 480px ) {

#header .headercontent h1 { font-size:32px; line-height:32px; }
#header .headercontent h2 { font-size:28px; }

#contact fieldset label { max-width:100%; }
#contact fieldset .text, 
#contact fieldset .wpcf7-select { width:100%; }

}


/* --- Print Styles --- */

@media print {

body { font-family:'Open Sans', Helvetica, arial, sans-serif; font-weight:normal; font-size:12px; }
header, #navi, #sidebar, footer { display:none; }
#page .col-2:first-child { margin:0; }
.entry, h1, h2, h3 { color:#666 !important; }

}

}

/* --- CookieWall -- */

#cookie-law-info-bar {
	border-radius: 2px;
}

#cookie-law-info-bar[data-cli-style=cli-style-v2][data-cli-type=popup] {
    padding: 32px 45px;
	max-height: 600px !important;
}

#wt-cli-cookie-banner-title {
	margin-bottom: 15px;
}

.cli-privacy-content-text {
    margin: 18px 0;
    line-height: 22px !important;
    color: #929291 !important;
}

.cli-bar-message a,
.cli-privacy-content-text a {
    color: #92c46d !important;
    text-decoration: underline;
}
.cli-bar-message a:hover,
.cli-privacy-content-text a:hover {
    text-decoration: none;
}

.large.cli-plugin-button,
.large.cli-btn,
.medium.cli-plugin-button,
.medium.cli-btn {
    font-size: 14px !important;
    padding: 16px 21px 15px !important;
    border-radius: 5px;
}
.cli_setting_save_button {
    font-size: 14px !important;
    padding: 16px 21px 15px !important;
    background-color: #92c46d !important;
    border-radius: 5px !important;
}

@media (max-width: 991px) {

#cookie-law-info-bar[data-cli-style=cli-style-v2][data-cli-type=popup] {
    padding: 25px;
	max-height: 680px !important;
}
	
}

@media (max-width: 575px) {

#cookie-law-info-bar[data-cli-style=cli-style-v2][data-cli-type=popup] {
    padding: 15px;
}
	
}