/*
Theme Name: Verzekerjeonline 2018
Author: Joris Kroos
Company: Twinsense Online Brand Excitement
Author URI: http://www.twinsense.nl
Version: 1.0
*/

img {max-width:100%;height: auto;}
h1, h2, h3, h4, .navbar-default {font-family: inherit;color: inherit;}
h1, h2 {font-weight:700;font-size: 1.8rem;color:#2b407b;margin-bottom: 1rem;position:relative;margin-top: 10px;}
h3 {font-size: 110%;color:#f8981d;font-weight: bold;}
h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover { color:inherit; text-decoration:none; }
html, body {font-size: 16px;line-height: 180%;height: 100%;background: #e5eaee;color: #5c5c5c;}
body, input {font-family: "Source sans pro", cursive;}

p { max-width:800px; }

#maincontent a { display:inline-block; background:#f5800e; padding:8px 15px; text-decoration:none; font-weight:bold; color:#FFF; margin-right:10px; }
#maincontent ul.menu { padding:0; list-style:none; }
#maincontent ul.menu a { padding:5px 0; background:#FFF; color:#2b407b; }
#maincontent ul a { display:block; }

.row.smallgap div[class^="col"] { padding-left:8px; padding-right:8px; }
.row.smallgap { margin-left:-8px; margin-right:-8px; }
.btn { background:#f5800e; color:#FFF; padding:15px 25px; font-weight:100; font-size:130%; box-shadow:5px 5px 0 rgba(0,0,0,0.2); outline:2px solid #FFF; transition:all 0.5s ease; }
.btn:hover, .btn:focus {transform: translate(2px, 2px);outline: 1px solid #FFF;box-shadow: 3px 3px 0 rgba(0,0,0,0.2);color: #FFF;}
.navbar-default {background-color:#fff;border: none;margin: 0;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {background-color:transparent;color: #f8981d;}

.header-top {background-color: #FFF;position:fixed;height: 53px;width: 100vw;z-index: 100;}

.header {padding: 0;background: #434343;padding-top: 53px;/* height: 20vh; */}
.header .headerfoto {padding-top: 160px;overflow:hidden;margin:0 -15px;background-size: cover;background-position: 35% 50%;}

.header .bubble {background:#f5800e;margin: 30px 0;color:#FFF;font-size:150%;position:relative;max-width:400px;}
.header .bubble em {font-style:normal;font-weight:100;font-family:"Source sans pro";display:block;line-height: 1em;}
.header .bubble sub { font-size:60%; }
.header .bubble .inner {background:#f5800e;position:relative;padding: 15px;}

.footer {width: 100%;clear: both;background-color: #333;/* margin-top: 5rem; */}

section {padding: 2rem 0;position:relative;/* overflow: hidden; */}

.single-post h2 { margin-top:0; }
.single-post .img {box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);display: block;border: 1px solid rgba(0,0,0,0.1); margin:20px;}
.single-post section { padding-top:2rem; }
.single-post #newsslider { padding-top:4rem;}

.page .text, .block, .iframe { background:#FFF;padding: 15px 25px;position:relative; margin-bottom:30px;}
.iframe { padding:25px}
.iframe iframe { border:0; min-width:100%; min-height:400px;}

.block.text+.block.button {margin-top: -40px;}
.block.text ul { padding-left:25px; }
.block .inner { position:relative; }
.footer {background: #434343;/* border-top: 5px solid #f5800e; */background-size: contain;}
.footer {color:#FFF;padding:1rem 0;/* text-align:center; */}
.footer h2 { margin-top:30px; }
.footer h2, .footer a, .footer a:hover {color:#FFF;font-size: 110%;}
.footer label { display:none; }
.footer input { padding: 4px 8px; max-width:100%; background:transparent; border:1px solid #eee; }
.footer input[type=submit] { background:#f5800e; border:none; }

.slick-next,
.slick-prev {border-radius:50%;/* border:2px solFid #f5800e; */color: #f5800e;transform:scale(2);}
.slick-next::before, .slick-prev::before { color:#f5800e; }
.slick-prev::before { font-family:FontAwesome; content:'\f104'; }
.slick-next::before { font-family:FontAwesome; content:'\f105'; }

.header-top .container {position:relative;padding: 0;}
.header-top .container .logo {z-index:10;display:block;width: 200px;height: 32px;background: url(images/logo_verzekerjeonline.png);position:absolute;top: 15px;left: 15px;background-size: contain;background-repeat: no-repeat;/* background-position: -28px -15px; */}

.navbar-default .navbar-nav>li>a { padding: 15px 20px; }
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .current_page_ancestor > a {background:transparent; }

.navbar-default .navbar-toggle .icon-bar {background-color:#f5800e;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background:rgba(0,0,0,0); }

.dropdown-menu { font-size: 18px; text-align: left; list-style: none; }

.navbar-toggle {
    position: relative;
    float: right;
    padding: 10px 10px;
    margin-top: 8px;
    margin-right: 30px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 0px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    border-radius: 0px;
}

.navbar-toggle:focus,
.navbar-toggle:hover{
	background-color: transparent;
}

.navbar-toggle:focus .icon-bar,
.navbar-toggle:hover .icon-bar{
    background-color: #2b407b;
}
.block{
	position: relative;
	z-index: 1;
}

#refvid { display:none; }

.medewerker{
	margin-bottom: 30px;
}

.medewerker .foto{
	background-size: cover;
	background-position: 50%;
}



@media ( min-width:768px ) {
    html {display:flex;flex-direction:column;}
    body {display:flex;flex: 1 1 auto;flex-direction:column;/* font-size: 1.1rem; */}
    body>div#maincontent {flex: 1 0 auto;margin-top: -100px;}
    body>.header,
    body>.footer {flex:0 0 auto;overflow: hidden;}
    .header, .header-top { background-size:100%; }
    .header-top {height: 80px;}
    .header-top .container {padding: 24px 25px 0px;}
    .header-top .container::after {top: 25px;}
	.header-top .container .logo {width: 346px;height: 44px;top: 20px;left: 0;}
	.navbar-default {margin: 0;}
	.navbar-default .navbar-nav>li>a { padding: 15px 10px; }
	.header {padding-top: 0;margin-top: 80px;/* min-height: 40vh; *//* padding-bottom: 100px; */}
	.header .headerfoto { margin:0 -120px;padding:0 120px 100px 120px;box-shadow: inset 140px 0px 140px -40px rgba(67,67,67,1), inset -140px 0px 140px -40px rgba(67,67,67,1); }
	.header .bubble {margin: 10vh 0 20vh;position:relative;}
	.header .bubble::after {content:'';position:absolute;left: -30px;top: calc(50% - 15px);width:0;height:30px;border: 15px solid #f5800e;border-color: transparent #f5800e transparent transparent;}
	.home .header {padding: 0;height: 50vh;}
    .header h1 {/* margin-bottom: 2rem; */font-size: 5rem;color: #FFF;}
    .header h1::after {bottom: -10px;}
	    
    section {padding: 2rem 0;overflow: visible;}
 
	.page .row .text::before, .block::before, .header .bubble::before {content:'';position:absolute;top:0;left:0;bottom:0;right:0;transform: translate(25px, -25px);border: 1px solid #ffffff; z-index:0;}
	.page .row :first-child .block::before {transform: translate(-25px, -25px);}
	.sidebar {/* margin-top:-15px; */}
   
    .home ul.links {float: left;width: 20%;min-width: 150px;margin: 0 15px 0 0;}
    .home section:nth-child(2n) ul.links { margin: 0 0 0 15px; }
    .home section:nth-child(2n) ul.links,
    .home section:nth-child(2n) .col-sm-6 {float:right;}
    .home .focus {border:none;padding: 0; flex:1 1 auto }
    .home .focus .content { padding: 0 15px; }
    
	.home section.kanalen .container .row {border:3px solid #aaa;padding: 30px;margin: 0 -38px;}
	.home section.diensten .row { display:flex; }
	.home section.diensten .row .col-sm-3 { flex:1 1 auto; }

    .navbar-nav {float:right;margin: 0 -35px;margin-left: 230px;}

	#newsslider li { width:33.333%; }

	.home section.referenties {overflow:hidden; }
	#refvid { display:block; position:absolute;top: 50%;height:0;padding-bottom: 56.25%;left:0;right:0;overflow:hidden;transform: translateY(-50%);}
	#refvid iframe {position:absolute;width: 100%;height: 100%;}
    .footer {}
}

@media ( min-width:1200px ) {
    .header {/* padding: 0; *//* height: 20vh; */}
    section {padding: 4rem 0;overflow: visible;}
	.navbar-default .navbar-nav>li>a { padding: 15px 20px; }
	.page .block {background:#FFF;padding: 25px 35px;position:relative;}
	.block.text+.block.button { margin-top:-60px; }
}