@import url("https://fonts.googleapis.com/css?family=Roboto:300,500,900");

@charset "utf-8";



/*

Theme Name:  TN

Theme URI:  

Author:  Twenty First Media

Author URI:  http: //www.twentyfirstmedia.nl

Description:  Enjoy this custom theme for Tuinjongenaanhuis.nl. This theme is developed by Henk Burggraaff with Twenty First Media. For any questions, please contact us at 06 45 37 28 26 or info@twentyfirstmedia.nl

Text Domain:  tn

Domain Path:  /

Version:  1.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; }

input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="submit"], textarea { -webkit-appearance: none; border-radius: 0; outline: none; }

html, body { width: 100%; }





/* --- Basics --- */



ul, ol { list-style: none; }



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



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

p { margin: 20px 0; line-height: 1.5; }

.left { float: left !important; } .right { float: right !important; } .center { text-align: center; }

.alignleft { float: left; margin-right: 20px; margin-bottom: 10px; } .alignright { float: right; margin-left: 20px; margin-bottom: 10px; } .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }



a { color: #6aaf08; text-decoration: none; }

a:hover {  }

a > img { display: inline-block; }



.group:before, .group:after { display: table; content: ""; }

.group:after { clear: both; }





/* --- Typography --- */



body { font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 18px; color:#777; text-rendering: optimizelegibility; background-color: #FFF; }



h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 500; line-height: 1; word-wrap: break-word; }



h1, .h1 { font-size: 40px; }

h2, .h2 { font-size: 32px; }

h3, .h3 { font-size: 24px; }

h4, .h4 { font-size: 20px; }

h5, .h5 { font-size: 18px; }

h6, .h6 { font-size: 16px; }





/* --- FrameWork --- */



.bg-green { color: #fff; background-color: #6aaf08; }

.bg-green h1, .bg-green h2, .bg-green h3, .bg-green a { color: #fff; }

.bg-white { color: #777; background-color: #fff; }

.bg-grey { background-color: #f2f2f2; }



.grey { color: #777; }



main { padding-top: 100px }

section > article { padding: 50px 0; }



.row { position: relative; margin: 0px auto; max-width: 1120px; width: auto; }



.one_half { width: 48%; }

.one_third { width: 30.66%; }

.two_third { width: 65.33%; }

.one_fourth { width: 22%; }

.three_fourth { width: 74%; }

.one_fifth { width: 16.8%; }

.two_fifth { width: 37.6%; }

.three_fifth { width: 58.4%; }

.four_fifth { width: 79.2%; }

.one_sixth { width: 13.33%; }

.five_sixth { width: 82.67%; }

.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: 4%; }

.last { margin-right: 0 !important; clear: right; }

.clearboth { clear: both; display: block; font-size: 0; height: 0; line-height: 0; width: 100%; }





/* --- Header --- */



.navigation { position: fixed; z-index: 99; width: 100%; height: auto; background: #fff; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }

.navigation nav { height: auto; }



.logo { position: relative; float: left; margin: 15px 0; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }

.logo a { display: block; }

.logo h1 { font-size: 30px; line-height: 70px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }



#pull { display: none; }

#pull:before { content: "+ "; }

#pull.pulled:before { content: "- "; }



.main-nav { position: absolute; bottom: 50%; right: 0; margin-bottom: -25px; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; }

.main-nav > li { float: left; margin-left: 22px; font-weight: 300; line-height: 30px; }

.main-nav > li > a {  display: block; padding:10px 8px; width: 100%; color: #777; }

.main-nav > li:hover > a, .main-nav > li > a.active, .main-nav > li.current-menu-item > a, .main-nav > li.current-menu-parent > a { color: #6aaf08; }

.main-nav > li.current-menu-item > a { border-bottom: 1px solid #6aaf08; }

.main-nav > li.offr.current-menu-item > a { border-bottom: none; }

.main-nav > li.offr > a { color: #fff !important; background-color: #f66516; }



.main-nav > li > ul { display: none; position: absolute; padding: 10px 20px; font-size: 16px; background-color: #fff; }

.main-nav > li > ul > li { position: relative; }

.main-nav > li > ul > li > a { color: #777; }

.main-nav > li > ul > li.current-menu-item > a, .main-nav > li > ul > li > a:hover { color: #6aaf08; }

.main-nav > li:hover > ul { display: block; }





.navigation.offtop { -webkit-transition: all 0.3s linear; transition: all 0.3s linear; box-shadow: 0 0 5px 5px rgba(0,0,0,0.1); }

.navigation.offtop .logo { margin: 10px 0; }

.navigation.offtop .logo h1 { font-size: 26px; line-height: 50px; }





/* --- Slider --- */



.flexslider { position: relative; zoom: 1; padding: 0; width: 100%; max-height: 450px; overflow: hidden; }



.flex-container a:hover, .flex-slider a:hover, .flex-container a:focus, .flex-slider a:focus { outline: none; }

.slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }

.flex-pauseplay span { text-transform: capitalize; }



.flexslider .slides { zoom: 1; }

.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; width: 100%; height: 450px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }

.flexslider .slides img { width: 100%; height: auto; display: block; }

.flexslider .slides:after { content:  "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }



html[xmlns] .flexslider .slides { display: block; }

* html .flexslider .slides { height: 1%; }

.no-js .flexslider .slides > li: first-child { display: block; }



.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }

.loading .flex-viewport { max-height: 300px; }



.flex-control-nav { position: absolute; z-index: 9; bottom: 30px; left: 50%; width: 300px; margin-left: -150px; text-align: center; }

.flex-control-nav li { margin: 0 10px; display: inline; zoom: 1; *display: inline; }

.flex-control-paging li a { width: 10px; height: 10px; display: inline-block; background: #fff; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 50%; border-radius: 50%; }

.flex-control-paging li a:hover { background-color: #777; }

.flex-control-paging li a.flex-active { background-color: #6aaf08; cursor: default; }





/* --- Entry --- */



.entry a { text-decoration: underline; }

.entry a:hover { text-decoration: none; }



.entry { word-wrap: break-word; }

.entry strong { font-weight: 800; }

.entry ol { margin: 22px 0 22px 20px; list-style-type: decimal !important; }

.entry li { margin:3px 0; line-height: 28px; }

.entry ul { margin: 22px 0 22px 25px; list-style-type: disc !important; }

.entry ul ul, .entry ol ol { margin-bottom: 0; }

.entry ul.checked li { position: relative; list-style: outside none; line-height: 30px; }

.entry ul.checked li:before { position: absolute; left: -25px; content:"\f058"; font-family: "FontAwesome"; color: #6aaf08;  }

.entry em, .entry cite { font-style: italic; }



sup, sub { position: relative; height: 0; font-size: 12px; line-height: 1; vertical-align: baseline; }

sup { bottom: 1ex; } sub {top: .5ex; }

abbr, acronym { cursor: help; border-bottom: 1px dotted; }

del { text-decoration: line-through; }

ins { text-decoration: none; background: #FFC; }

dl { margin-bottom: 22px; }

dt { font-weight: bold; }

dd { margin-bottom: 22px; }

pre { margin-bottom: 22px; padding: 20px; width: 100%; background: #F6F6F6; color: #222; overflow: auto; white-space: pre-wrap; }

table, th, td {	border: 1px solid #E3E3E3; }

table {	margin-bottom: 22px; width: 100%;table-layout: fixed; border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; }

caption, th, td { font-weight: normal; text-align: left; }

th { border-width: 0 1px 1px 0; font-weight: 700; }

td { border-width: 0 1px 1px 0; }

th, td { padding: 0.4em; }

blockquote { padding-left: 30px; border-left: 2px solid #00ab4e; }

blockquote p {  }



.entry hr { margin: 20px 0 25px; width: 100%; height: 0px; background: #fff; border: 0; border-bottom: 1px dashed #00ab4e; }

.entry div.rounded img { -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden; }



.entry .wp-caption { position: relative; max-width: 100%; overflow: hidden; }

.entry .wp-caption .wp-caption-text { position: absolute; bottom: 0; width: 100%; margin: 0 !important; padding: 5px 10px; font-size: 16px; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,0.9); }



.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 -- */



label { display: block; margin-bottom: 6px; font-weight: 400; }

input, textarea, select { font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 300; }

input[type="text"], input[type="email"], input[type="tel"], textarea, select { padding: 12px 15px; width: 100%; color: #777; border: none; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;  }

select { padding: 8px 11px; width: auto; }

textarea { height: 150px; }

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus { box-shadow: 0 0 6px 6px rgba(0,0,0,0.1); }

.wpcf7-form-control-wrap { display: inline-block; margin-bottom: 20px; width: 100%; }

.wpcf7-response-output { display: inline-block; width: 100%; text-align: center; }

.btn { padding: 12px 22px; font-size: 18px; font-weight: 400; color: #fff; text-align: center; background: #f66516; border: none; text-decoration: none !important; }

.btn:hover { cursor: pointer; background: #222; }



div.wpcf7-response-output { -webkit-border-radius: 6px; border-radius: 6px; }



:: -webkit-input-placeholder { opacity: 1; }

: -moz-placeholder { opacity: 1; }

:: -moz-placeholder { opacity: 1; }

: -ms-input-placeholder { opacity: 1; }





/* --- Footer --- */



.footer { padding: 30px 0; width: 100%; text-align: center; font-size: 16px; }



.to-top { display: none; position: fixed; right: 15px; bottom: 15px; z-index: 1; width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff !important; background-color: #6aaf08; border-radius: 50%; -webkit-border-radius: 50%; transition: opacity 350ms ease 0s; }





/* --- Responsiveness --- */



@media screen and (max-width: 1124px) {



.row { margin-left: 3%; margin-right: 3%; max-width: 94%; width: 94%; }



}





@media screen and (max-width: 768px) {





#pull { display: block; position: absolute; right: 0; top: 30px; padding: 15px; font-size: 18px; line-height: 30px; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }

.offtop #pull { top: 5px; }



.main-nav { display: none; position: relative; bottom: auto !important; right: auto !important; margin: 10px 0; width: 100%; overflow: hidden; -webkit-transition: none; transition: none; }

.main-nav li {  float: none !important; display: block; margin: 0; text-align: center; }



.main-nav > li > ul { position: relative !important; display: block !important; padding: 0; important; }

.main-nav li > a { padding: 3px 0; }



.flexslider, .flexslider .slides > li { height: 350px; }



}





@media screen and (max-width: 600px) {



.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%; }



.logo h1, .navigation.offtop .logo h1 { font-size: 18px; line-height: 45px; }





h1.section-title { padding: 0 40px 0 100px; font-size: 20px; }

h1.section-title span { position: absolute; left: 10px; }



main { padding-top: 66px }

#pull { top: 5px; }

.logo { margin: 10px 0; width: 180px; height: 46px; }



.flexslider, .flexslider .slides > li { height: 300px; }



}

/*******************5-3-19*************************************/

.city-sec1{float:left; width:100%; margin:0 0 30px 0;}
.city-left{width:70%; float:left; padding-right:20px;}
.city-left h2{font-size: 30px;line-height: 36px; font-weight:normal; background:url(images/line.png) repeat-x 0 15px; clear:both; margin:0 0 10px 0;}
.city-left h2 strong{background:#fff; padding:0 20px 0 0; font-weight:normal;}
.city-block{float:left; width:100%; margin:0 0 50px 0;}
.city-left .button-row{margin:0 0 80px 0;}

.city-block p{    font-size: 16px;}
.city-right{width:30%; float:left; padding-left:20px;}
.city-right iframe{width:100%; float:left; height:300px;}
.side-block{float:left; width:100%; margin:0 0 40px 0;}
.city-right h3{font-size: 20px;line-height: 28px; font-weight:normal; background:url(images/line.png) repeat-x 0 center; clear:both; margin:0 0 30px 0;}
.city-right h3 strong{background:#fff; padding:0 20px 0 0; font-weight:normal;}
.side-review blockquote{background-color: #f6f6f6;
    color: #747474;line-height: 18px;
    font-size: 14px;display: block;
    padding: 25px;text-align: center;  float:left; width:100%; margin:0 0 10px 0;font-style: italic; border:none !important;}
.side-review{float:left; width:100%; margin:0 0 40px 0;}
.side-reviews{float:left; width:100%;}	
.side-author{float:left; width:100%; text-align:center; font-weight:bold;}
.button-row{float:left; width:100%; text-align:center; }
.city-button{display:inline-block;padding: 12px 22px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    background: #f66516;
    border: none;
    text-decoration: none !important;}
.city-button:hover { cursor: pointer; background: #222; }
	
	
.city-sec2{float:left; width:100%; margin:0 0 80px 0;}
.counter-row{margin:0 -15px;}
.col4{float:left; width:33.333%; padding:0 15px; }
.countbox{float:left; width:100%;border: 1px solid #e0dede; text-align:center;padding: 20px 20px; height:120px; margin:0 0 20px 0;}
.content-box-counter{float:left; width:100%; margin:0 0 10px 0;}
.icon-check{display:inline-block; background:url(images/icon1.png) no-repeat center center; width:46px; height:46px; vertical-align:top;}
.icon-user{display:inline-block; background:url(images/icon2.png) no-repeat center center; width:46px; height:46px; vertical-align:top;}
.icon-smile{display:inline-block; background:url(images/icon3.png) no-repeat center center; width:46px; height:46px; vertical-align:top;}
.display-counter,.unit{line-height:46px; color: #6aaf08; font-size: 50px; vertical-align:top;font-weight:500;}
.countbox p{color: #747474;
    font-size: 13px; line-height:20px; clear:both; font-weight:500;}

.city-sec3{float:left; width:100%; margin:0 0 80px 0;}
.city-sec3 h2{font-size: 30px;line-height: 36px; font-weight:normal; background:url(images/line.png) repeat-x 0 15px; clear:both; margin:0 0 40px 0;}
.city-sec3 h2 strong{background:#fff; padding:0 20px 0 0; font-weight:normal;}
.city-sec3 ul{margin:0; padding:0;}
.city-sec3 ul li{float:left; width:33.333%; list-style:none;margin-bottom: 11px; line-height:22px; font-size:14px; background:url(images/arrow.png) no-repeat 0 0; padding:0 0 0 30px;}
.city-sec3 ul li a{text-decoration:none !important;    color: #333;}
.city-sec3 ul li a:hover{   color: #6aaf08;}

.city-sec3 h3{font-size:20px;line-height:28px; font-weight:normal; clear:both; margin:0 0 10px 0;}


.city-banner{float:left; width:100%; padding:80px 15px; text-align:center; margin:0 0 40px 0;}
.group{clear:both;}
.banner-text{display:inline-block; width:720px; max-width:100%;background: rgba(106,175,8,0.75);border-radius: 5px; padding:10px 20px;}
.banner-text h1{color: #fff;
    letter-spacing: 1px;
    font-size: 38px;}
.banner-text h2{margin-bottom: 30px;line-height: 32px;font-size: 26px;color: #fff;}	
.banner-text ul{margin:0; padding:0;}	
.banner-text ul li{display:inline-block; margin:0 15px; vertical-align:top; color:#fff; font-size:14px; padding:0 0 0 20px; background:url(images/right.png) no-repeat 0 0; background-size:15px; font-weight:500;}	
.zipcode-form{float:left; width:100%; margin:0 0 15px 0; padding:0 30px;}
.zipcode-form input[type="text"]{    float: left;
    width: 50%;}
.zipcode-form input[type="submit"]{padding: 12px 22px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    background: #f66516;
    border: none;
    text-decoration: none !important; width:50%; text-align:center; float:left; cursor:pointer;}	
.zipcode-form input[type="submit"]:hover{background: #222;}	

body{overflow-x:hidden;}

.plaats main {
    padding-top: 75px;
}

.slogan{float: left;
    width: 300px;
    font-size: 14px;}
	
	

.plaats .logo h1 {
    line-height: 30px;
}	
.plaats .navigation.offtop .logo h1 {
    line-height: 30px;
}	
@media screen and (max-width: 991px) {
.main-nav > li {
    margin-left: 0;
    font-size: 13px;
}
.main-nav > li > a {
    padding: 10px 5px;
}
}

@media screen and (max-width: 768px) {
	.city-left {
    width: 100%;
    padding-right: 0;
}
.city-right {
    width: 100%;
    padding-left: 0;
}
.col4 {
    width: 100%;
}
.city-sec3 h2 {
    font-size: 20px; line-height:28px;
}
.city-left h2{font-size: 20px; line-height:28px;}
.main-nav > li {
    font-size: 16px;
}
}


@media screen and (max-width: 600px) {
	.zipcode-form input[type="text"],.zipcode-form input[type="submit"]{ 
    width: 100%;}
	.zipcode-form input[type="submit"]{margin-top:10px;}
	.city-sec3 ul li {
    width: 100%;
}
.banner-text h1 {
    font-size: 28px;
}
.banner-text h2 {
    font-size: 20px;
}

.navigation {
    padding-bottom: 15px;
}
}