/*
Theme Name: Jan de Jong Interieur
Author: IDS internet
Author URI: http://www.idsinternet.nl
Description: Gerealiseerd in opdracht van Christien Starkenburg. Ontwerp Ed de Boer.
Version: 2017
*/

@import url('css/component.css');
@import url('css/editor-style.css');

.bloklinks, .blokrechts {height: 450px;}
.bloklinks h1, .blokrechts h1 {line-height: 430px;}
/*.blokrechts h1 {font-family: "Gill Sans Regular";} */
.blokrechts h1 {font-family: "Didot";}
.bloklinks h1 {font-family: "Didot";}
.module7 .linksonder {position: absolute; bottom: 0;}
.module7 .rechtsonder {position: absolute; bottom: 0; right: 0;}

.module8 .fotoonder {height: 525px;padding: 15px 15px 0 0 !important;}
.module8 .tekstonder {height: 525px;padding: 15px 0 0 15px !important;}
.module8 .text {padding: 0 0 15px 0 !important;height: 525px !important;}
.module8 .text > div, .module8 .tekstonder > div {height: 100%; padding: 30px;position: relative; font-weight: 500; font-size: 16px; line-height: 24px; overflow: hidden;}
.module8 .fotoonder div {height: 100%;padding: 30px; background-size: cover; background-position: center center;}

.module9 .text, .module10 .text {height: 1050px !important;}

*:focus {outline: none !important;}

.container {width: 95%; max-width: 1430px; padding-top: 60px; margin-top: -30px;}
.row {margin-left: -30px; margin-right: -30px;}
.row > div {padding-right: 30px; padding-left: 30px;}

.menu-menu-container {position: absolute; z-index: 1; top: 40px; right: 16.66666667%;}
.menu-menu-container li {display: inline; margin: 0 5px;position:relative;}
/*.menu-menu-container li.active > a {text-decoration: underline;}*/
.menu-menu-container li > div {display: none; position: absolute; padding: 0;}
.menu-menu-container li.active > div div {display: block; margin: 5px;}
.menu-menu-container li.active > div {display: block;background-color:#fff;}
.menu-menu-container li.sub {display: none;}
.menu-menu-container li.sub.show {display: block; z-index: 1; position: relative; background: #ffffff;}

/*HEADER*/
#head {min-height: 90vh;position: relative;top:-50px;}
#header {position: relative;margin-top:30px;}


#head .content {height: 90vh; padding-right: 20px; padding: 30px;}
#head .content > div {display: table; height: 100%;}
#head .content > div > * {display: table-cell; vertical-align: middle;}

.menu ul.sub-menu {
    display: none;
}
ul.sub-menu li {
    display: block;
}
.menu li.current-menu-parent ul.sub-menu,
.menu li.menu-item-has-children.current-menu-item ul.sub-menu {
    display: inline-block;
    position: absolute;
    top: 30px;
    float: left;
    clear: left;
    padding: 0;
	left:0;
}
#head ul li {position:relative;}

#head .bigpic {position: fixed; display: block !important; width: auto !important; height: 90vh !important; right: 30px; left: 30px !important; bottom: 30px; top: 0px;}
#head .bigpic.staand {width: 41.66666667% !important;}
#head .bigpic.liggend {height: auto; min-height: 93vh;}

#head .bigpic {padding-top: 30px; padding-bottom: 30px;}
#head .bigpic > div {height: 100%; display: block; width: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat;}

#head .bigpic.sticky-element-fixed {position: fixed;}
/*.stop {height: 100px; width: 100px; background: red; z-index: 100;}*/

#head #clone {display: none;}
#head .background-color {position: absolute; display: block !important; top: 0; left: 0; right: 0;}

/*
#header .bigpic.sticky-element-fixed {position: fixed;}
#header .bigpic {position: relative; height: 90vh; width: 100%;}
#header .bigpic.staand {left: -15px !important;}
#header .bigpic.sticky-element-fixed.staand {width: 41.66666667%;}
#header .bigpic.sticky-element-fixed {left: 30px !important; right: 30px; bottom: 30px;}
*/
#head span {padding: 100px 0 50px 50px; position: relative;}

#head span span {padding: 0;}
#head h1.gray {color: #b4b4b4;}
#head h3 {color: #b4b4b4;}
#head a.logo {background-size: 90%; background-position: center center; background-repeat: no-repeat; /*background-image: url('images/logo.svg');*/}
#head a.logo.jdj {background-size: 100%;}

#middle {position: relative; background: #ffffff;}

/*GRID*/
.container.grid .row {opacity: 0;}
.container.grid .row.cats {opacity: 1;}
/*.container.grid {max-width: none;}*/
.filters a {display: inline-block; cursor: pointer; margin: 0 10px 60px;}
.filters a:hover,
.filters a.current {text-decoration: underline;}
.row div.kolom {margin-bottom: 40px;}
.row div.kolom {height: 554px; overflow: hidden;}
/*.row div.kolom {border: 1px solid red;}*/
/*.row div.kolom .content {max-width: 305px; margin: auto;}*/
.row div.kolom a {display: block; background-size: cover; background-position: center center; /*max-width: 305px; margin: auto;*/ margin-bottom: 20px; height: 450px; overflow: hidden; text-decoration: none;}
/*.row div.col-md-8.kolom .content {max-width: 670px;}*/
.row div.col-md-8.kolom a {/*max-width: 670px;*/ background-image: url('http://interieur-plus.nl/content/02-work-in-process/08-middeleeuwse-woning/3.jpg');}
.row div.kolom a > div {opacity: 0; visibility: hidden; transition: .5s; -webkit-transition: .5s; width: 100%; height: 100%; display: block; display: table; font-family: 'Roboto', sans-serif;}
.row div.kolom a > div span {color: #ffffff; font-size: 73px; line-height: 100px; font-weight: 500; top: -24px; left: -6px; position: relative; vertical-align: middle; display: block; display: table-cell;}
.row div.kolom a:hover > div {opacity: 1; visibility: visible;}


/*MODULES*/
.container.modules {padding: 15px 15px 30px; margin-top: auto; /*width: 97%; max-width: none;*/}
.container.modules .row {opacity: 0;}
.container.modules > .row:first-child {opacity: 1;}

.modules .row > div {padding: 15px;}
.modules .row > div > div {height: 100%; padding: 30px; background-size: cover; background-position: center center;}

.modules .row > div		{/*min-height: 485px; height: 48.5vh;*/	height: 525px;}
.modules .row > div.height	{/*min-height: 970px; height: 97vh;*/	height: 1050px;}
.modules .row > div.text > div	{position: relative; background: #f8f8f8; font-weight: 500; font-size: 16px; line-height: 24px; overflow: hidden;}

.social-media {position: absolute; bottom: 30px;}
.social-media.right {right: 30px;}
.social-media.left {left: 30px;}
.social-media a {opacity: .5; transition: .5s; -webkit-transition: .5s;}
.social-media a:hover {opacity: 1;}

.fa.back {position: fixed; top: 30px; right: 30px; display: block; height: 50px; width: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 1; text-align: center; line-height: 50px; color: #000000; font-size: 20px; transition: .5s; -webkit-transition: .5s; background: #ffffff; text-decoration: none;}
.fa.back:hover {color: #000000; text-decoration: none; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);}

div.logo {position: absolute; bottom: 0; left: 0; background-image: url('images/beeldmerk.svg'); background-position: center center; background-repeat: no-repeat; background-size: 35%;}
div.logorechts {position: absolute; top: 0; right: 0; background-image: url('images/logojandejong.svg'); background-position: center center; background-repeat: no-repeat; background-size: 70%;}





#footer {background: #ffffff; color: #95989a; padding: 30px 30px 60px; position: relative;}




h1 {font:400 65px/90px 'Prata', serif; }

@media (max-width: 1470px) {
	h1 {font:400 50px/70px 'Prata', serif;}
}
@media (max-width: 1200px) {
	.row div.kolom {height: 524px;}
	.row div.kolom a {height: 420px;}
	.row div.kolom a > div span {line-height: 94px;}
	.modules .row > div {height:348px;}
	
	.modules .row > div.height {height: 696px;}
	
	.module9 .text, .module10 .text {height: 696px !important;}
.modules .text h1,
.modules .text h2,
.modules .text h3,
.modules .text h4 {font-size: 20px !important; line-height: 30px !important; margin: 0 !important;}
.modules .social-media {display: none;}
}
@media (min-width:992px) and (max-width:1199px){
	.module8 .modules .row > div.height {height: 873px !important;}
	.module8 .height2 {height: 873px !important;}
	
	h1 {font:400 40px/60px 'Prata', serif;}
	h2 {font:400 38px/50px 'Prata', serif;}
	h3 {font:400 35px/40px 'Prata', serif;}
	.bloklinks, .blokrechts {height: 300px;}
	.bloklinks h1, .blokrechts h1 {line-height: 300px;}
}
@media (max-width: 992px) {
	.modules .module8 > div {height: initial !important;}
	.modules .module8 .height2 {height: 400px !important;}
	.module8 .fotoonder {height: 300px !important;}
	.module8 .text {height: initial !important;}
	.row div.kolom {max-width: 50%;}
	.row div.kolom {height: 454px;}
	.row div.kolom a {height: 330px;}
	.row div.kolom a > div span {line-height: 74px; top: -18px; font-size: 58px;}
	.modules .row > div {height:282px;}
	.modules .row > div.height {height: 564px;}
/*	.modules .row > .text {height:auto !important;}*/
	.social-media {position: relative;bottom: 0;left: 0 !important;}
	#header a.logo {background-size:70%;background-position:left center;}
	.pos-logo {top: 35vh; position: absolute; height: 150px !important;left: 0;right: 0; margin: 0 auto;}
	.pos-logo.jdj {top: 25vh;}
	.pos-logo.slow {top: 50vh;}
	.bloklinks, .blokrechts {height: 250px;}
	.bloklinks h1, .blokrechts h1 {line-height: 250px;}
	div#ff-stream-1 {position: relative; z-index: -1;}
	#head span.socialwall {padding-left: 0;}
}

@media (min-width:768px) and (max-width:991px) {
	h1 {font-size:45px !important; line-height:55px;}
	h2 {font-size:40px !important; line-height:50px;}
	h3 {font-size:35px !important; line-height:45px;}
 	#header span {padding-top:120px;}
        
}
@media (max-width:767px) {
	body:not(.home) #head .bigpic {position: relative; width: 100% !important; left: initial !important; height: 55vh !important;right: initial !important;}
	body:not(.home) #head .bigpic.staand {width: 100% !important;}
	body:not(.home) #head .content {padding: 0 !important;}
	body:not(.home) #head span {padding: 0 !important;}
	body:not(.home) #head .content > div {display: initial;}
	body:not(.home) #head .tekstblok {height: initial !important;}
	body:not(.home) #header {margin-top: 0;}
	.module8 .tekstonder {padding-right: 15px !important;}
	.module8 .fotoonder div {margin-right: 15px;}
	.module8 .tekstonder {min-height: initial !important;}
	.module8 .tekstonder {margin-left: 0 !important;}
	.module8 .modules .col-xs-12.col-sm-6 {min-height: initial !important;}
	.module8 .modules .row > div {min-height:initial !important;}
	.module8 .modules .row > div > div {height: initial !important;}
	html,
	body {overflow-x:hidden;}
	.bigpic {opacity:.4;}
	.container.grid {padding:0 20px;}
	.row div.kolom {max-width:100%;}
	#header .bigpic.liggend,
	#header .bigpic.staand {width:100% !important;margin-left:-30px;position:relative;}
	#header .tab-pane > div > * {padding:0;}
	#header span {padding:0;}
	#header > span {padding:50px 0 50px 50px;}
	#header .tab-pane span h1 {padding:0 !important;font: 400 60px/80px 'Prata','serif';margin-bottom:0;}
	.menu-menu-container li.active > div {padding:10px;margin-top:30px;}
	#header .tab-pane > div > span {background: #fff;padding:30px 0;}
	#header .tab-pane > div {margin:0; padding:0;}
	#header .tab-pane:first-child > div > span {display:none;height:0px;}
	#header .tab-pane:first-child > div:nth-child(3) { display: none;}
	h1 {font-size:40px !important;line-height:50px;}
	h2 {font-size:35px !important;line-height:45px;}
	h3 {font-size:30px !important;line-height:40px;margin-bottom:20px;}
	.modules .row > .text {height:auto !important;}
 	.modules .row > div {min-height:400px;position:relative;}
	.filters a {margin:0 10px 30px;}
	.tab-pane #2 div a.logo {display:block !important;}
	.modules .row > div > div {margin:0 15px;}
	.container.grid .row.cats {padding:30px 0 0;}
	#header .bigpic {height:50vh !important;}
     #header a.logo {background-size:contain;background-position:center;}
	.pos-logo {top:20vh;position: absolute;height: 150px !important;z-index: 2;}
	.tab-pane:first-child .pos-logo {width: 100%;height: 30vh !important;top: 30vh !important;}
	.modules .col-xs-12.col-sm-6 { min-height: 280px;}
	.col-xs-12.col-sm-3.logo {position: relative;}
	#head a.logo {background-size: 40% !important;height: 250px;}
	#head a.logo.jdj {top: -90px; position: relative;}
	.blokken {position:relative;margin-bottom: 40px;}
	.bloklinks {margin-bottom:15px;}
	.bloklinks, .blokrechts {height: 150px;}
	.bloklinks h1, .blokrechts h1 {line-height: 150px;}
	.menu ul.sub-menu {display: block;}
	#menu .button {right: 30px !important;top: 80px !important;}
	.menu li.current-menu-parent ul.sub-menu, .menu li.menu-item-has-children.current-menu-item ul.sub-menu {position: relative;top: 0;}
	
}
@media (max-width: 500px) {
}
@media (max-width: 400px) {
}
@media (max-width: 350px) {
}




.wrap {
    position: fixed;
    z-index: 1001;
    background-color: #fff;
    left:20%;
    right:20%;
    width:60%;
}
a.btn-open, a.btn-close {
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    line-height: 36px !important;
    border: 1px solid #f8f8f8;
}
.wrap ul {padding:0;width:100%;    z-index: 123; position: relative;}
.wrap ul li {
    list-style-type: none;
    font-size: 24px;
    line-height:36px;
    display:block;
}
.wrap ul li > div{
    margin-left:20px;
    color:#666;
}
.overlay {display:none; position:fixed;	height:100%; width:100%; background:#fff; z-index:3;	padding:20vh 0;}
#menu .button {position:fixed; font-size:20px; z-index: 5;right:40px;top:40px;}
#menu .button a {text-decoration:none; line-height: 20px;}
#menu .btn-open:after {
    color: #000;
    content: "\f0c9";
    font-family:'fontawesome';
    position: absolute;
    margin:6px 15px;
}
#menu .btn-close {position: fixed;right:40px;top:40px;}
#menu .btn-close:after {
    color: #000;
    content: "\f00d";
    font-family:'fontawesome';
    position: absolute;
    margin:5px 16px;
}

@font-face {
font-family: 'Gill Sans Regular';
font-style: normal;
font-weight: normal;
src: url('fonts/Gill Sans.woff') format('woff');
}

@font-face {
font-family: 'Gill Sans Condensed Regular';
font-style: normal;
font-weight: normal;
src: url('fonts/GillSans Condensed.woff') format('woff');
}

@font-face {
font-family: 'Gill Sans Italic';
font-style: normal;
font-weight: normal;
src: url('fonts/Gill Sans Italic.woff') format('woff');
}

@font-face {
font-family: 'Gill Sans Light';
font-style: normal;
font-weight: normal;
src: url('fonts/Gill Sans Light.woff') format('woff');
}

@font-face {
font-family: 'Gill Sans Medium';
font-style: normal;
font-weight: normal;
src: url('fonts/Gill Sans Medium.woff') format('woff');
}

@font-face {
font-family: 'Gill Sans Bold';
font-style: normal;
font-weight: normal;
src: url('fonts/Gill Sans Bold.woff') format('woff');
}

@font-face {
font-family: 'Didot';
font-style: normal;
font-weight: normal;
src: url('fonts/Didot-HTF-B06-Bold.ttf') format('ttf');
}