html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
color: #787d87;
line-height: 1.26em;
background: #1b242b;
min-width: 320px;
}
body{
overflow-y: scroll;
}
html, body, A, input, select, textarea{
font-family: 'Roboto', Arial, Tahoma, Geneva, Kalimati, sans-serif;
}
A{
text-decoration: none;
color: #787d87;
transition: all 0.25s ease 0s;
outline: none;
}
A:hover{
text-decoration: underline;
}
img, object, iframe{ border: 0; vertical-align: top; }
header, nav, menu, main, aside, address, section, article, footer, figure, figcaption{ display: block; }
form, figure, menu{ margin: 0; padding: 0; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea{
height: 50px;
margin: 0;
padding: 0 10px;
font-size: 16px;
color: #787d87;
border: 2px solid #e8e9eb;
background: #ffffff;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
outline: none;
}
select{
padding: 0 6px;
padding-right: 40px !important;
background: #ffffff url(//klasseklassiek.nl/wp-content/themes/klasse/images/select.png) right center no-repeat;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
textarea{
height: 230px;
padding: 10px;
resize: vertical;
}
::-webkit-input-placeholder{
opacity: 1;
}
::-moz-placeholder{
opacity: 1;
}
:-ms-input-placeholder{
opacity: 1;
}
:-moz-placeholder{
opacity: 1;
}
input[type="submit"], input[type="reset"], input[type="button"]{ border: 0; }
input[type="image"], input[type="button"], input[type="submit"], label{ cursor: pointer; }
table{ width: 100%; border-collapse: collapse; border-spacing: 0; border: 0; }
input[type="checkbox"], input[type="radio"]{ position: relative; top: 2px; *top: 0; margin: 0 5px 0 0; padding: 0; height: auto; }
@media not all and (-webkit-min-device-pixel-ratio){ input[type="checkbox"], input[type="radio"] { top: 0; } }
.clear, .hr{ clear: both; height: 0; font-size: 0; line-height: 0; overflow: hidden; }
.clearfix:before, .clearfix:after{ content: "."; display: block; height: 0; visibility: hidden; }
.clearfix:after{ clear: both; }
.clearfix{ zoom: 1; }
.flexible{ overflow: hidden; zoom: 1; }
.text_center{ text-align: center !important; }
.text_left{ text-align: left !important; }
.text_right{ text-align: right !important; }
.fl_left{ float: left; }
.fl_right{ float: right; }
.cur, .active, .active > a{ cursor: default; }
.niceCheck, .niceRadio{
display: none;
}
label{
position: relative;
}
label:before{
position: absolute;
content: "";
}
.niceCheck + label{
padding: 0 0 0 36px;
}
.niceCheck + label:before{
top: -1px;
left: 0;
width: 24px;
height: 24px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/checkbox.png) left top no-repeat;
}
.niceRadio + label{
padding: 0 0 0 26px;
}
.niceRadio + label:before{
top: 0;
left: 0;
width: 21px;
height: 21px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/radio.png) left top no-repeat;
}
.niceCheck:checked + label:before, .niceRadio:checked + label:before{
background-position: left bottom !important;
} .body_menu{
overflow-x: hidden;
transition: all 0.25s ease 0s;
position: relative;
left: 0;
}
.body_menu.open{
left: -240px;
overflow: hidden;
}
.menu_right{
position: fixed;
top: 0;
min-height: 100%;
color: #ffffff;
background: #1b242b;
transition: all 0.25s ease 0s;
}
.menu_right.open{
right: 0;
}
.menu_right{
right: -240px;
width: 240px;
}
.menu_right_inn{
position: absolute;
top: 0;
bottom: 20px;
left: 30px;
right: 0;
padding: 30px 20px 0 0;
overflow-y: auto;
}
.menu_right .ul_socials{
float: none;
margin: 0 0 20px 0;
}
.menu_right .ul_socials li{
margin: 0 20px 0 0;
}
.menu_right .block_address{
float: none;
margin: 0 0 20px 0;
}
.ul_menu{
margin: 0;
padding: 0;
list-style: none;
}
.ul_menu li{
font-weight: bold;
}
.ul_menu a{
display: block;
padding: 10px 0;
text-decoration: none !important;
color: #ffffff;
}
.ul_menu a:hover, .ul_menu .active > a, .ul_menu .current_page_item > a{
color: #ffd200;
} .section{
background: #1b242b;
position: relative;
}
.section:after{
position: absolute;
top: 0;
left: 0;
content: "";
height: 100%;
width: 100%;
background: #1c1c1c;
z-index: 102;
-moz-transition: all .8s cubic-bezier(0.785, 0.135, 0.150, 0.860);
-webkit-transition: all .8s cubic-bezier(.71, .01, .32, 1.01);
transition: all .8s cubic-bezier(.71, .01, .32, 1.01);
transform: translate3d(0%, 0, 0);
-webkit-transform: translate3d(0%, 0, 0);
-moz-transform: translate3d(0%, 0, 0);
}
.section.active:after{
transform: translate3d(-100%, 0, 0);
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
}
#section_1{
min-height: 100%;
position: relative;
z-index: 3;
}
#section_1:after{
display: none !important;
}
.header{
position: absolute;
top: 0;
left: 0;
right: 0;
color: #ffffff;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/header_top_bg.png) center top repeat-x;
z-index: 3;
}
.header a{
color: #ffffff;
}
.header:before{
position: absolute;
top: 0;
left: 0;
right: 0;
content: "";
height: 180px;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, #000000 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, #000000 0%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, #000000 0%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, #000000 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(top, #000000 0%, rgba(0,0,0,0) 100%);
z-index: -1;
}
.header_center{
max-width: 1140px;
margin: 0 auto;
padding: 17px 20px 0 20px;
}
.logo{
float: left;
width: 160px;
height: 102px;
margin: 5px 0 0 0;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/logo.svg) left top no-repeat;
}
.header_right{
float: right;
}
.ul_socials{
float: right;
margin: 0;
padding: 0;
list-style: none;
}
.ul_socials li{
float: left;
margin: 0 0 0 30px;
}
.ul_socials a{
display: block;
height: 20px;
}
.ico_socials_fb{
width: 11px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_fb.svg) left center no-repeat;
}
.ico_socials_yb{
width: 20px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_yb.svg) left center no-repeat;
background-size: 20px 14px !important;
}
.ico_socials_pin{
width: 15px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_pin.svg) left center no-repeat;
}
.ico_socials_tw{
width: 20px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_tw.svg) left center no-repeat;
background-size: 20px 17px !important;
}
.ico_socials_fb:hover{
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_fb_hover.svg) left center no-repeat;
}
.ico_socials_yb:hover{
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_yb_hover.svg) left center no-repeat;
}
.ico_socials_pin:hover{
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_pin_hover.svg) left center no-repeat;
}
.ico_socials_tw:hover{
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_tw_hover.svg) left center no-repeat;
}
.block_address{
float: right;
padding: 0 0 0 26px;
font-weight: bold;
font-style: normal;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_phone.svg) left 2px no-repeat;
background-size: 16px 16px !important;
}
.menu{
clear: both;
}
.menu_show{
display: none;
height: 30px;
cursor: pointer;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.menu_show span{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
}
.menu_show .icon-container{
display: inline-block; *display: inline; vertical-align: middle; zoom: 1;
width: 40px;
height: 30px;
position: relative;
}
.menu_show .line{
position: absolute;
left: 0;
right: 0;
height: 4px;
border-radius: 1px;
background: #ffffff;
-webkit-transition: all 300ms cubic-bezier(0.215,.61,.355,1);
-moz-transition: all 300ms cubic-bezier(0.215,.61,.355,1);
-o-transition: all 300ms cubic-bezier(0.215,.61,.355,1);
transition: all 300ms cubic-bezier(0.215,.61,.355,1);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.menu_show .line_1{
top: 0;
opacity: 1;
-webkit-transition-delay: 210ms;
-moz-transition-delay: 210ms;
-o-transition-delay: 210ms;
transition-delay: 210ms;
}
.menu_show .line_2{
top: 11px;
-webkit-transition-delay: 140ms;
-moz-transition-delay: 140ms;
-o-transition-delay: 140ms;
transition-delay: 140ms;
}
.menu_show .line_3{
top: 22px;
-webkit-transition-delay: 70ms;
-moz-transition-delay: 70ms;
-o-transition-delay: 70ms;
transition-delay: 70ms;
}
.menu_show .line_4{
top: 33px;
opacity: 0;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
.menu_show:hover .line{
-webkit-transform: translate3d(0,-11px,0);
-moz-transform: translate3d(0,-11px,0);
-o-transform: translate3d(0,-11px,0);
transform: translate3d(0,-11px,0);
}
.menu_show:hover .line_1{
opacity: 0;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
.menu_show:hover .line_2{
-webkit-transition-delay: 70ms;
-moz-transition-delay: 70ms;
-o-transition-delay: 70ms;
transition-delay: 70ms;
}
.menu_show:hover .line_3{
-webkit-transition-delay: 140ms;
-moz-transition-delay: 140ms;
-o-transition-delay: 140ms;
transition-delay: 140ms;
}
.menu_show:hover .line_4{
opacity: 1;
-webkit-transition-delay: 210ms;
-moz-transition-delay: 210ms;
-o-transition-delay: 210ms;
transition-delay: 210ms;
}
.open.menu_show .line{
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.open.menu_show:hover .line{
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.open.menu_show .line:nth-child(2), .open.menu_show .line:nth-child(4){
background: none !important;
}
.open.menu_show .line:nth-child(1){
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
top: 11px;
opacity: 1;
}
.open.menu_show .line:nth-child(3){
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
top: 11px;
opacity: 1;
}
.menu ul{
margin: 0 -20px 0 0;
padding: 12px 0 0 0;
list-style: none;
}
.menu li{
float: left;
font-weight: bold;
position: relative;
}
.menu li:hover > ul{
display: block;
}
.menu li > ul{
display: none;
position: absolute;
left:0;
top:100%;
background: rgba(0,0,0,0.8);
width:220px;
padding:15px 25px 5px;
border-top:3px solid #ffd200;
font-size: 16px;
line-height: 20px;
margin:-3px 0 0 0;
}
.menu li > ul li{
margin:0 0 15px;
padding:0;
float: none;
display: block;
}
.menu li > ul li a{
padding:0;
height:auto;
}
.menu a{
display: block;
height: 54px;
padding: 11px 20px 0 20px;
text-decoration: none !important;
border-bottom: 3px solid transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.menu a:hover{
color: #ffd200;
}
.menu .active a{
color: #ffffff !important;
border-bottom: 3px solid #ffd200;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/menu_active_bg.png) center top no-repeat;
}
.menu #menu-main_menu >  li.current_page_item > a{
color: #ffffff !important;
border-bottom: 3px solid #ffd200;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/menu_active_bg.png) center top no-repeat;
}
.menu #menu-main_menu >  li > a:hover{
color: #ffffff !important;
border-bottom: 3px solid #ffd200;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/menu_active_bg.png) center top no-repeat;
}
.block_header_txt{
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
color: #ffffff;
text-transform: uppercase;
position: relative;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.block_header_txt h1, .block_header_txt h2{
-moz-transition: all .6s;
-webkit-transition: all .6s;
transition: all .6s;
opacity: 0;
position: relative;
}
.block_header_txt h1{
margin: 0 0 5px 0;
font-size: 75px;
line-height: 75px;
-webkit-transition-delay: .5s;
transition-delay: .5s;
top: -50%;
}
.block_header_txt h2{
margin: 0 0 64px 0;
font-size: 36px;
line-height: 36px;
font-weight: 300;
letter-spacing: 3px;
-webkit-transition-delay: .6s;
transition-delay: .6s;
top: 50%;
}
.section.active .block_header_txt h1, .section.active .block_header_txt h2{
opacity: 1;
top: 0;
}
.block_header_txt_button_holder{
opacity: 0;
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
transition: opacity .8s;
-webkit-transition-delay: .8s;
transition-delay: .8s;
}
.section.active .block_header_txt_button_holder{
opacity: 1;
}
.button_get_started{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
height: 60px;
padding: 0 55px;
text-decoration: none !important;
font-size: 20px;
color: #000000;
line-height: 60px;
font-weight: bold;
text-transform: uppercase;
border-radius: 30px;
background: #ffd200;
}
.button_get_started:hover{
background: #ffffff;
}
.block_header_slider{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.block_header_slider .cycle-slideshow{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.block_header_slider .cycle-slideshow .div{
width: 100%;
height: 100%;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.block_header_slider_controls{
position: absolute;
bottom: 40px;
right: 30px;
z-index: 2;
}
.cycle-pager{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
}
.cycle-pager span{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
width: 15px;
height: 15px;
margin: 0 10px;
border: 2px solid #ffffff;
border-radius: 50%;
text-indent: -700em;
white-space: nowrap;
overflow: hidden;
transition: all 0.25s ease 0s;
}
.cycle-pager span:hover, .cycle-pager span.cycle-pager-active{
border: 2px solid #ffd200;
background: #ffd200;
}
.cycle-pager > * { cursor: pointer;}
.arrow_bottom{
position: absolute;
bottom: 20px;
left: 50%;
width: 38px;
height: 40px;
margin: 0 0 0 -19px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/arrow_bottom.svg) center top no-repeat;
background-size: 38px 20px !important;
-webkit-animation: scroll_anim .5s 1s alternate infinite;
animation: scroll_anim .5s 1s alternate infinite;
z-index: 3;
}
@keyframes scroll_anim{
from { background-position: center top; }
to { background-position: center bottom; }
}
@-webkit-keyframes scroll_anim{
from { background-position: center top; }
to { background-position: center bottom; }
}
.menu_left{
position: absolute;
top: 50%;
transform: translateY(-250%);
left: 30px;
margin: 0;
padding: 0;
list-style: none;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu_left.show{
transform: translateY(-50%);
}
.menu_left li{
height: 50px;
font-size: 36px;
line-height: 50px;
font-weight: bold;
opacity: 0;
}
.menu_left.show li{
-moz-animation: mainMenuItem 0.5s ease-out;
-webkit-animation: mainMenuItem 0.5s ease-out;
animation: mainMenuItem 0.5s ease-out;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.menu_left.show li:nth-child(1){
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s
}
.menu_left.show li:nth-child(2){
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s
}
.menu_left.show li:nth-child(3){
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s
}
.menu_left.show li:nth-child(4){
-moz-animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s
}
.menu_left a{
text-decoration: none;
color: #ffffff;
}
.menu_left a:hover{
font-size: 48px;
color: #ffd200;
}
@-moz-keyframes mainMenuItem{
0%{
opacity: 0;
-moz-transform: translateY(-40px);
transform: translateY(-40px)
}
100%{
-moz-transform: translateY(0px);
transform: translateY(0px);
opacity: 1
}
}
@-webkit-keyframes mainMenuItem{
0%{
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px)
}
100%{
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1
}
}
@keyframes mainMenuItem{
0%{
opacity: 0;
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
transform: translateY(-40px)
}
100%{
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1
}
} .footer{
max-width: 1140px;
margin: 0 auto;
padding: 66px 20px 0 20px;
color: #a8aaab;
line-height: 20px;
background: #1b242b;
position: relative;
z-index: 2;
}
.footer h3{
margin: 0 0 53px 0;
font-size: 39px;
color: #ffffff;
line-height: 39px;
text-transform: uppercase;
letter-spacing: 4px;
position: relative;
}
.footer h3:before{
position: absolute;
bottom: -20px;
left: 0;
content: "";
width: 75px;
border-bottom: 5px solid #2e9700;
}
.footer .title{
margin: 0 0 20px 0;
color: #ffffff;
font-weight: bold;
}
.footer .col{
float: left;
width: 25%;
padding: 0 20px 56px 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.footer_bottom{
clear: both;
padding: 30px 0;
border-top: 1px solid #495055;
}
.logo_footer{
float: left;
width: 66px;
height: 42px;
margin: 0 25px 0 0;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/logo.svg) left top no-repeat;
opacity: 0.5;
}
.block_copy{
float: left;
padding: 9px 0 0 0;
}
.block_by{
float: right;
}
.block_by span{
margin: 0 10px 0 0;
position: relative;
top: 9px;
}
.logo_mindsrocket{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
width: 219px;
height: 36px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/logo_mindsrocket.svg) left top no-repeat;
} .content_center{
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
}
#section_2, #section_3, #section_4, #section_5, #section_6{
position: relative;
}
.block{
position: absolute;
top: 29.48%;
bottom: 29.48%;
left: 30.46%;
width: 39.06%;
overflow: hidden;
z-index: 2;
}
.block_color_1{
color: #ffffff;
background: #6d60b0;
}
.block_color_2{
color: #323a45;
background: #ffd232;
}
.block_color_3{
color: #ffffff;
background: #6996c6;
}
.block_color_4{
color: #ffffff;
background: #0588a9;
}
.block_color_5{
color: #ffffff;
background: #008c44;
}
.block_inn{
padding: 20px;
text-align: center;
line-height: 20px;
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transition: left .5s;
-webkit-transition: left .5s;
transition: left .6s;
-webkit-transition-delay: .5s;
transition-delay: .5s;
}
.block_color_1 .block_inn{
left: -100%;
}
.block_color_2 .block_inn{
left: 100%;
}
.block_color_3 .block_inn{
left: -100%;
}
.block_color_4 .block_inn{
left: 100%;
}
.block_color_5 .block_inn{
left: -100%;
}
.section.active .block_inn{
left: 0;
}
.block h1{
margin: 0 0 18px 0;
font-size: 24px;
line-height: 30px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 3px;
}
.block p{
max-width: 640px;
margin: 0 auto 47px auto;
}
.button_border{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
height: 36px;
padding: 0 44px;
text-decoration: none !important;
font-size: 16px;
color: #ffffff;
line-height: 36px;
text-transform: uppercase;
border: 2px solid #ffffff;
border-radius: 20px;
}
.button_border:hover{
color: #323a45;
background: #ffffff;
}
.button_border_grey{
color: #323a45;
border: 2px solid #323a45;
}
.button_border_grey:hover{
color: #ffffff;
background: #323a45;
}
.button_border_green{
color: #138c47;
border: 2px solid #138c47;
}
.button_border_green:hover{
color: #ffffff;
background: #138c47;
}
.block_mosaic_holder{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: 1;
}
.block_mosaic_holder:before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
background: rgba(0,0,0,0.3);
z-index: 2;
}
.block_mosaic{
position: absolute;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
z-index: 1;
}
.block_mosaic_1_1{
top: 0;
left: 0;
width: 30.46%;
height: 29.48%;
}
.block_mosaic_1_2{
top: 0;
left: 30.46%;
width: 39.06%;
height: 29.48%;
}
.block_mosaic_1_3{
top: 0;
right: 0;
width: 30.48%;
height: 100%;
}
.block_mosaic_1_4{
top: 29.48%;
left: 0;
width: 30.46%;
height: 70.52%;
}
.block_mosaic_1_5{
bottom: 0;
left: 30.46%;
width: 39.06%;
height: 29.48%;
}
.block_mosaic_2_1{
top: 0;
left: 0;
width: 30.46%;
height: 70.52%;
}
.block_mosaic_2_2{
top: 0;
left: 30.46%;
width: 39.06%;
height: 29.48%;
}
.block_mosaic_2_3{
top: 0;
right: 0;
width: 30.48%;
height: 100%;
}
.block_mosaic_2_4{
bottom: 0;
left: 0;
width: 69.53%;
height: 29.48%;
}
.block_mosaic_2_4{
bottom: 0;
left: 0;
width: 69.53%;
height: 29.48%;
}
.block_mosaic_3_1{
top: 0;
left: 0;
width: 30.46%;
height: 100%;
}
.block_mosaic_3_2{
top: 0;
left: 30.46%;
width: 69.54%;
height: 29.48%;
}
.block_mosaic_3_3{
top: 29.48%;
bottom: 0;
right: 0;
width: 30.48%;
}
.block_mosaic_3_4{
bottom: 0;
left: 30.46%;
width: 39.06%;
height: 29.48%;
}
.block_mosaic_4_1{
top: 0;
left: 0;
width: 30.46%;
height: 100%;
}
.block_mosaic_4_2{
top: 0;
left: 30.46%;
width: 69.54%;
height: 29.48%;
}
.block_mosaic_4_3{
top: 29.48%;
bottom: 0;
right: 0;
width: 30.48%;
}
.block_mosaic_4_4{
bottom: 0;
left: 30.46%;
width: 39.06%;
height: 29.48%;
}
.block_mosaic_5_1{
top: 0;
left: 0;
width: 69.52%;
height: 29.48%;
}
.block_mosaic_5_2{
top: 0;
right: 0;
width: 30.48%;
height: 100%;
}
.block_mosaic_5_3{
top: 29.48%;
left: 0;
width: 30.46%;
height: 70.52%;
}
.block_mosaic_5_4{
bottom: 0;
left: 30.46%;
width: 39.06%;
height: 29.48%;
}
.block_slider{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.block_slider_title{
padding: 61px 20px 26px 20px;
background: #ffffff;
position: relative;
z-index: 2;
}
.block_slider_title h1{
margin: 0 0 30px 0;
text-align: center;
font-size: 39px;
color: #323a45;
line-height: 47px;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
}
.block_slider_title h1:before{
position: absolute;
bottom: -17px;
left: 50%;
content: "";
width: 75px;
margin: 0 0 0 -37px;
border-bottom: 5px solid #2e9700;
}
.block_slider .cycle-slideshow{
position: absolute;
left: 0;
right: 0;
width: 100%;
z-index: 1;
}
.block_slider .cycle-slideshow .div{
width: 100%;
height: 100%;
font-size: 0;
}
.block_slider .cycle-slideshow a{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
width: 25%;
height: 33.33%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover !important;
position: relative;
}
.block_slider .cycle-slideshow a:before{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_zoom.svg) center center no-repeat;
background-size: 56px 56px !important;
background-color: rgba(0,0,0,.6);
opacity: 0;
transition: all 0.25s ease 0s;
}
.block_slider .cycle-slideshow a:hover:before{
opacity: 1;
}
.block_slider_controls{
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 38px 20px;
text-align: center;
background: #1b242b;
z-index: 2;
}
.slider_arrow_left, .slider_arrow_right{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
width: 14px;
height: 23px;
z-index: 2;
}
.slider_arrow_left{
margin: 0 36px 0 0;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/slider_arrow_left.svg) center center no-repeat;
}
.slider_arrow_right{
margin: 0 0 0 36px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/slider_arrow_right.svg) center center no-repeat;
}
.block_slider_controls .cycle-pager{
padding: 2px 0 0 0;
}
.bg_white{
background: #ffffff;
}
.block_faq_all{
padding: 90px 0 100px 0;
}
.block_faq_all h1{
margin: 0 0 50px 0;
text-align: center;
font-size: 39px;
color: #323a45;
line-height: 45px;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
}
.block_faq_all h1:before{
position: absolute;
bottom: -17px;
left: 50%;
content: "";
width: 75px;
margin: 0 0 0 -37px;
border-bottom: 5px solid #2e9700;
}
.block_faq_all .p_1{
margin: 0 0 36px 0;
text-align: center;
font-size: 18px;
}
.block_faq{
padding: 0 20px;
background: #ffffff;
border: 1px solid #e8e9eb;
border-bottom: 0;
}
.block_faq:last-child{
border-bottom: 1px solid #e8e9eb;
}
.block_faq .title{
height: 48px;
margin: 0 -20px;
padding: 0 50px 0 20px;
line-height: 48px;
background: #fafbfb;
transition: all 0.25s ease 0s;
position: relative;
cursor: pointer;
}
.block_faq .title:before{
position: absolute;
top: 9px;
right: 10px;
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffffff url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_plus.svg) left top no-repeat;
transition: all 0.25s ease 0s;
}
.block_faq.open .title, .block_faq .title:hover{
background: #ffffff;
}
.block_faq.open .title:before, .block_faq .title:hover:before{
background: #ffffff url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_minus.svg) left top no-repeat;
}
.block_faq h2{
margin: 0;
font-size: 20px;
color: #323a45;
text-transform: uppercase;
letter-spacing: 2px;
}
.block_faq p{
display: none;
margin: 0;
padding: 16px 0 26px 0;
line-height: 20px;
border-top: 1px solid #e8e9eb;
}
.block_meer_informatie{
padding: 20px;
text-align: center;
background: #fafbfb;
}
.block_meer_informatie h2{
display: inline-block; *display: inline; vertical-align: middle; zoom: 1;
margin: 0 12px;
font-size: 39px;
color: #323a45;
line-height: 39px;
font-weight: 300;
letter-spacing: 3px;
}
.button_contact{
display: inline-block; *display: inline; vertical-align: middle; zoom: 1;
height: 60px;
margin: 0 12px;
padding: 0 30px;
text-decoration: none !important;
font-size: 20px;
color: #ffffff;
line-height: 60px;
font-weight: bold;
text-transform: uppercase;
border-radius: 30px;
background: #3bc000;
}
.button_contact:hover{
color: #000000;
background: #ffd200;
} .header_inner{
position: relative;
}
.header_inner:after{
position: absolute;
top: 0;
left: 0;
right: 0;
content: "";
height: 125px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/header_top_bg.png) center top repeat-x;
z-index: -1;
}
.header_inner_1_bg{
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/header_inner_1_bg.jpg) center center no-repeat;
}
.header_inner_overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.3);
z-index: -1;
}
.header_inner_title{
clear: both;
padding: 56px 0 47px 0;
}
.header_inner_title h1{
margin: 0 0 30px 0;
text-align: center;
font-size: 60px;
color: #ffd200;
line-height: normal;
text-transform: uppercase;
}
.content{
padding: 90px 0 50px 0;
line-height: 20px;
background: #ffffff;
position: relative;
z-index: 1;
}
.content h1{
margin: 0 0 48px 0;
text-align: center;
font-size: 40px;
color: #323a45;
line-height: normal;
text-transform: uppercase;
letter-spacing: 3px;
position: relative;
}
.content h1:before{
position: absolute;
bottom: -15px;
left: 50%;
content: "";
width: 75px;
margin: 0 0 0 -37px;
border-bottom: 5px solid #ffd200;
}
.content h2{
margin: 0 0 15px 0;
font-size: 35px;
color: #323a45;
line-height: normal;
text-transform: uppercase;
letter-spacing: 3px;
}
.txt{
margin: 0 0 55px 0;
}
.txt b{
font-size: 18px;
color: #138c47;
font-weight: bold;
}
.blockquote{
margin: 0 0 53px 0;
padding: 34px 25px 37px 25px;
font-size: 18px;
border-left: 4px solid #138c47;
background: #f5f5f5;
}
.blockquote .title{
margin: 0 0 8px 0;
font-size: 25px;
color: #323a45;
line-height: normal;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
.post-page blockquote{
margin: 0 0 53px 0;
padding: 34px 25px 37px 25px;
font-size: 18px;
border-left: 4px solid #138c47;
background: #f5f5f5;
}
.post-page blockquote strong{
margin: 0 0 8px 0;
font-size: 25px;
color: #323a45;
line-height: normal;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
.post-page blockquote p{
margin:0;
}
.block_our_workshop{
margin: 0 0 60px 0;
font-size: 18px;
font-weight: bold;
}
.block_our_workshop .title{
margin: 0 0 17px 0;
color: #323a45;
}
.block_our_workshop_inn{
padding: 23px 435px 27px 30px;
color: #ffffff;
background: #138c47;
position: relative;
}
.block_our_workshop_inn p{
margin: 0;
}
.block_our_workshop_times{
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: #137a3f;
}
.block_our_workshop_times:before{
position: absolute;
top: 0;
bottom: 0;
left: 50%;
content: "";
border-left: 10px solid #138c47;
}
.block_our_workshop_time{
float: left;
position: relative;
top: 50%;
padding: 0 20px 0 50px;
margin: -12px 0 0 0;
}
.block_our_workshop_time:before{
position: absolute;
top: 0;
left: 20px;
content: "";
width: 23px;
height: 23px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_time.svg) left top no-repeat;
}
.block_our_workshop_time:last-child{
margin-left: 10px;
}
.block_form{
margin: 0 0 30px 0;
padding: 30px;
background: #f5f5f5;
}
.block_form .col{
float: left;
width: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block_form .col:nth-child(1){
padding: 0 15px 0 0;
}
.block_form .col:nth-child(2){
padding: 0 0 0 15px;
}
.block_form input, .block_form select, .block_form textarea{
width: 100%;
margin: 0 0 10px 0;
}
.block_form .button_verzenden{
margin: 20px 0 0 0;
}
.block_form .button_verzenden{
width: 48.5%;
border: 2px solid #138c47;
}
.button_verzenden{
display: inline-block; *display: inline; vertical-align: top; zoom: 1;
width: 48.5%;
height: 55px;
text-decoration: none !important;
text-align: center;
font-size: 20px;
color: #138c47;
line-height: 50px;
font-weight: bold;
text-transform: uppercase;
border: 2px solid #138c47;
border-radius: 28px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.button_verzenden:hover{
color: #ffffff;
background: #138c47;
} .block_txt .p_1{
margin: 0 0 56px 0;
font-size: 18px;
text-align: center;
}
.block_imgs_2, .block_imgs_3, .block_imgs_4{
margin: 0 -15px 20px -15px;
}
.block_imgs_2 .block_img{
width: 50%;
}
.block_imgs_3 .block_img{
width: 33.33%;
}
.block_imgs_4 .block_img{
width: 25%;
}
.block_img{
float: left;
margin: 0 0 30px 0;
padding: 0 15px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block_img img{
width: 100%;
}
.block_info{
margin: 0 0 37px 0;
padding: 23px 30px 27px 30px;
font-size: 18px;
color: #ffffff;
font-weight: bold;
background: #138c47;
}
.ul_bullet_arrow{
margin: 0 0 46px 0;
padding: 0;
list-style: none;
}
.ul_bullet_arrow li{
padding: 0 0 10px 30px;
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/bullet_arrow.svg) left 3px no-repeat;
background-size: 9px 14px !important;
}
.post-page blockquote.blockquote_more{
padding-right: 300px;
position: relative;
}
.post-page blockquote.button_border{
position: absolute;
bottom: 30px;
right: 30px;
}
.blockquote_more{
padding-right: 300px;
position: relative;
}
.blockquote_more .button_border{
position: absolute;
bottom: 30px;
right: 30px;
} .header_inner_2_bg{
background: url(//klasseklassiek.nl/wp-content/themes/klasse/images/header_inner_2_bg.jpg) center center no-repeat;
}
.block_laswerk h1{
margin: 0 0 65px 0;
}
.block_laswerk_item{
margin: 0 0 50px 0;
border-bottom: 5px solid #406b99;
background: #f8f8f8;
position: relative;
}
.block_laswerk_item:before{
position: absolute;
bottom: -5px;
right: 0;
content: "";
width: 57.2%;
border-bottom: 5px solid #e39600;
}
.block_laswerk_item:nth-child(2n-1){
border-bottom: 5px solid #2e9700;
}
.block_laswerk_item:nth-child(2n-1):before{
left: 0;
right: auto;
border-bottom: 5px solid #ffd200;
}
.block_laswerk_img{
width: 57.2%;
}
.block_laswerk_img img{
width: 100%;
}
.block_laswerk_txt{
width: 42.8%;
padding: 25px 30px;
color: #8b8b8b;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.block_laswerk_txt h2{
margin: 0 0 18px 0;
font-size: 24px;
color: #494848;
line-height: normal;
font-weight: normal;
text-transform: uppercase;
} .preload_bg{
position: absolute;
top: -1000em;
left: -1000em;
background-image: url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_fb_hover.svg), url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_yb_hover.svg), url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_pin_hover.svg), url(//klasseklassiek.nl/wp-content/themes/klasse/images/ico_socials_tw_hover.svg);
}
.map-holer{
margin-bottom:-50px;
position: relative;
}
.map-holer:after{
position: absolute;
content: '';
left:0;
right:0;
top:0;
bottom:0;
z-index:10;
}
.map-holer.active:after{
display: none;
}
.map-holer iframe{
width:100% !important;
height:640px !important;
}
@media screen and (max-width: 1380px){
.menu_left li{
height: 40px;
font-size: 26px;
line-height: 40px;
}
.menu_left a:hover{
font-size: 34px;
}
}
@media screen and (max-width: 1180px){
.menu_left li{
height: 30px;
font-size: 16px;
line-height: 30px;
}
.menu_left a:hover{
font-size: 21px;
}
}
@media screen and (max-width: 1024px){
.block{
width: 100%;
max-width: 640px;
margin: 0 auto;
position: relative;
top: 50%;
bottom: 0;
left: 0;
transform: translateY(-50%);
z-index: 2;
}
.block_inn{
top: 0;
padding: 40px 20px;
transform: none;
}
}
@media screen and (max-width: 980px){
#fp-nav{
display: none !important;
}
.section:after{
display: none !important;
}
.logo{
width: 100px;
height: 64px;
}
.header_right{
padding: 22px 0 0 0;
}
.header .ul_socials{
display: none;
}
.header .block_address{
display: none;
}
.menu_show{
display: block;
}
.header .menu ul{
display: none;
}
.block_header_txt h1{
font-size: 45px;
line-height: 50px;
letter-spacing: 2px;
}
.block_header_txt h2{
margin: 0 0 34px 0;
font-size: 24px;
line-height: 30px;
}
.button_get_started{
height: 50px;
padding: 0 30px;
font-size: 16px;
line-height: 50px;
}
.block_header_slider_controls{
display: none;
}
.footer{
padding: 30px 20px 0 20px;
}
.footer h3{
text-align: center;
font-size: 25px;
line-height: 30px;
letter-spacing: 1px;
}
.footer h3:before{
left: 50%;
margin: 0 0 0 -37px;
}
.footer .col{
width: 33.33%;
}
.block_slider_title{
padding: 20px;
}
.block_slider_title h1{
margin: 0 0 20px 0;
font-size: 25px;
line-height: 30px;
letter-spacing: 1px;
}
.block_slider .cycle-slideshow a:before{
background-size: 36px 36px !important;
}
.block_slider_controls{
padding: 20px;
}
.block_faq_all{
padding: 50px 0;
}
.block_faq_all h1{
font-size: 25px;
line-height: 30px;
letter-spacing: 1px;
}
.block_faq_all .p_1{
font-size: 16px;
}
.block_meer_informatie h2{
font-size: 25px;
}
.button_contact{
height: 50px;
font-size: 16px;
line-height: 50px;
}
.footer_bottom{
text-align: center;
}
.logo_footer{
float: none;
display: block;
margin: 0 auto 10px auto;
}
.block_copy{
float: none;
margin: 0 0 15px 0;
}
.block_by{
float: none;
}
.menu_left{
display: none;
}
.header_inner_title h1{
font-size: 40px;
}
.content{
padding: 50px 0;
}
.content h1{
font-size: 30px;
letter-spacing: 2px;
}
.content h2{
font-size: 25px;
letter-spacing: 2px;
}
.blockquote{
margin: 0 0 50px 0;
padding: 25px;
font-size: 16px;
}
.blockquote .title{
font-size: 20px;
}
.block_our_workshop_inn{
padding: 20px 20px 0 20px;
}
.block_our_workshop_inn p{
margin: 0 0 20px 0;
}
.block_our_workshop_times{
margin: 0 -20px;
overflow: hidden;
position: relative;
}
.block_our_workshop_times:before{
display: none;
}
.block_our_workshop_time{
float: none;
top: 0;
margin: 0 !important;
padding: 20px 20px 20px 50px;
}
.block_our_workshop_time:before{
top: 20px;
}
.block_our_workshop_time:last-child{
border-top: 10px solid #138c47;
}
.block_form{
padding: 20px;
}
.block_form .col{
width: 100%;
padding: 0 !important;
}
.block_form .button_verzenden{
margin: 10px 0 0 0;
}
.button_verzenden{
width: 100%;
}
.block_imgs_2, .block_imgs_3, .block_imgs_4{
margin: 0 -10px 30px -10px;
}
.block_img{
margin: 0 0 20px 0;
padding: 0 10px;
}
.blockquote_more{
text-align: center;
}
.blockquote_more .button_border{
display: block;
width: 180px;
margin: 20px auto 0 auto;
padding: 0;
text-align: center;
position: static;
}
.block_laswerk_img{
width: 100%;
}
.block_laswerk_txt{
width: 100%;
padding: 25px 20px;
}
}
@media screen and (max-width: 680px){
.footer{
text-align: center;
}
.footer .col{
float: none;
width: 100%;
padding: 0 0 30px 0;
}
.block{
width: auto;
margin: 0 20px;
}
.block_faq h2{
font-size: 18px;
letter-spacing: 1px;
}
.block_meer_informatie h2{
display: block;
margin: 0 0 12px 0;
line-height: 30px;
}
.button_contact{
font-size: 14px;
}
.block_imgs_4 .block_img{
width: 50%;
}
}
@media screen and (max-width: 480px){
.block h1{
font-size: 22px;
letter-spacing: 1px;
}
.block p{
margin: 0 auto 30px auto;
}
.block_by span{
display: block;
margin: 0 0 5px 0;
top: 0;
}
.block_img{
width: 100% !important;
}
}
@media screen and (max-height: 500px){
.section{
height: 500px !important;
min-height: 0 !important;
position: relative;
}
}
.flikr_inside_gallery {
margin:10px;
}