/*
Theme Name: Smith Schoonmaak
Author: © Killercode
*/

* { margin: 0; }
html, body { height: 100%; }
body { min-height: 100%; font-family: 'Open Sans', sans-serif; font-size: 0.95em; color: #141414; font-weight: 300; background: url('images/bg.png'); }
.clear { clear: both; }

h1 { font-size: 2.4em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 0.8em; }
h1, h2, h3, h4, h4, h6 { margin-bottom: 0.4em; }
p { line-height: 1.8em; margin-bottom: 1.2em; -webkit-margin-before: 0; -webkit-margin-after: 0; }
ul { line-height: 1.8em; }

a, a:visited, a:active { font-weight: bold; color: #025266; text-decoration: none; }
a:hover { color: #0082a3; }

button, submit { font-size: 1.1em; color: #fff; background: #0082a3; padding: 2% 4% 1.8% 4%; margin: 14px 0; border: none; border-bottom: 3px solid #025266; position: relative; top: -24px; cursor: pointer; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
button span, submit span { font-weight: 700; }
button:hover, submit:hover { background: #1799b9; }

.wrapper, .cols, #top, header, #slider, footer, #copyright { width: 100%; }
.wrapper { width: 100%; max-width: 960px; margin: 0 auto; }
.top-line { border-top: 1px solid #0082a3; } 
.bottom-line { margin-bottom: 58px; } 

/* TOGGLE */
div h4 { margin-bottom: 0; }
div h4 a, div h4 a:active, div h4 a:visited { font-size: 1em; color: #000; background: #fff; padding: 1% 2%; display: block; border-top: 1px solid #e0e0e0; background-image: url('images/arrow-right.png'); background-repeat: no-repeat; background-position: 99% center; background-size: 5px; }
.arrow1 h4 a { border: none; }
.arrow7 h4 a { border-bottom: 1px solid #e0e0e0; }
div h4 a#toggle1.active, div h4 a#toggle2.active, div h4 a#toggle3.active, div h4 a#toggle4.active, div h4 a#toggle5.active, div h4 a#toggle6.active, div h4 a#toggle7.active { background-image: url('images/arrow-down.png'); background-size: 8px; }
.toggle1, .toggle2, .toggle3, .toggle4, .toggle5, .toggle6, .toggle7 { padding: 2%; background: #fff; }
.toggle1 p, .toggle2 p, .toggle3 p, .toggle4 p, .toggle5 p, .toggle6 p, .toggle7 p { margin-bottom: 0.8em; }
.toggle1 p:last-child, .toggle2 p:last-child, .toggle3 p:last-child, .toggle4 p:last-child, .toggle5 p:last-child, .toggle6 p:last-child, .toggle7 p:last-child { margin-bottom: 0; }
.toggle1 img, .toggle2 img, .toggle3 img, .toggle4 img, .toggle5 img, .toggle6 img, .toggle7 img { margin-bottom: 10px; }

/* COLUMNS */
.cols { }
.cols img { width: 100%; margin-bottom: 1em; }
.col3_1, .col3_2 { float: left; }
.col3_1 { width: 64%; margin-right: 4%; }
.col3_2 { width: 28%; }
.col3_2 img { position: relative; top: -40px; margin-bottom: 0; }
#content {   }
#content .col3_1 button, #content .col3_1 submit { float: right; }
#content .col3_1 p { font-size: 1.4em; color: #626262; }
#content .col3_1 p span { color: #1799b9; }
.col3_1 p, .col3_2 p { margin-bottom: 0.8em; }
.col3_1 p, .col3_2 p, .col3_1 ul { font-size: 0.85em; }
.half { width: 48%; float: left; }
.cols .col3_2 { background: #fff; padding: 2%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

/* HEADER */ 
#top { height: 120px; background: #fff; border-bottom: 2px solid #333; }
#logo { float: left; }
#logo img { margin: 10px 0; }
#logo a, #logo a:visited, #logo a:active { border: none; }
.quote { width: 425px; text-align: center; margin-top: 41px; float: left; }
.quote p { font-size: 1.1em; line-height: 1.2em; font-weight: 700; font-style: italic; }
.quote p span { font-size: 0.9em; font-weight: 300; font-style: normal; }
#nav { float: right; }
#nav ul { text-align: right; line-height: 120px; }
#nav ul li { list-style: none; line-height: 1em; margin: 0 10px; display: inline-block; }
#nav ul li:first-child { margin-left: 0; }
#nav ul li:last-child { margin-right: 0; }
#nav ul li a, #nav ul li a:visited, #nav ul li a:active { font-size: 1em; color: #fff; padding: 12px; display: block; background: #000; }
#nav ul li a:hover { background: #666; }

/* SLIDER - SCROLLER */
div.scrollingHotSpotLeft { width: 10%; min-width: 75px; height: 320px; background-image: url('images/big_transparent.gif'); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; left: 0; cursor: url('images/cursors/cursor_arrow_left.png'), url('images/cursors/cursor_arrow_left.cur'),w-resize; }
div.scrollingHotSpotLeftVisible { background-color: #fff; background-image: url('images/arrow_left.gif'); background-repeat: no-repeat; opacity: 0.35; -moz-opacity: 0.35; filter: alpha(opacity = 35); zoom: 1; }
div.scrollingHotSpotRight { width: 10%; min-width: 75px; height: 320px; background-image: url('images/big_transparent.gif'); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; right: 0; cursor: url('images/cursors/cursor_arrow_right.png'), url('images/cursors/cursor_arrow_right.cur'),e-resize; }
div.scrollingHotSpotRightVisible { background-color: #fff; background-image: url('images/arrow_right.gif'); background-repeat: no-repeat; opacity: 0.35; filter: alpha(opacity = 35); -moz-opacity: 0.35; zoom: 1; }
div.scrollWrapper { width: 100%; height: 320px; position: relative; overflow: hidden; }
div.scrollableArea { width: 2908px!important; height: 100%; position: relative; }
div.scrollableArea img { margin-right: -4px; }

/* SLIDER */
#slider { text-align: left; margin-bottom: 3em; background-position: center center; background-repeat: no-repeat; position: relative; top: -320px; /* background-size: 100% auto; */ }
#slider .wrapper { position: relative; }
#slider p.title, #slider p.sub, #slider p.subsub{ font-size: 3em; line-height: 1.4em; font-weight: 700; color: #fff; margin: 10px 0; padding: 0 20px; position: absolute; top: 20px; left: 0; -webkit-animation: slideIn_title 1s; animation: slideIn_title 1s; background: url('images/blank.png'); }
#slider p.sub { font-size: 2.2em; font-weight: 300; top: 90px; left: 180px; -webkit-animation: slideIn_sub 1s; animation: slideIn_sub 1s; }
#slider #tel { position: absolute; top: 20px; right: 2%; -webkit-animation: slideIn_tel 0.5s; -moz-animation: slideIn_tel 0.5s; -o-animation: slideIn_tel 0.5s; animation: slideIn_tel 0.5s; }
#slider #tel p { margin-bottom: 8px; }
#slider #tel p.tel img { margin-right: 6px; position: relative; top: 1px; }
#slider #tel p.tel { font-size: 2.3em; line-height: 0; font-weight: 700; text-align: center; -webkit-animation: bounceIn 6s; -moz-animation: bounceIn 6s; animation: bounceIn 6s; -webkit-animation-delay: -2s; -moz-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; }

/* INPUT */
input, select, textarea { width: 300px; height: 32px; line-height: 32px; font-family: 'Open Sans', sans-serif; font-size: 1.1em; font-weight: 300; line-height: 32px; border: 0; background: #fbfbfb; border: 1px solid #e9e9e9; }
textarea { width: 420px; height: 220px; }
.half button, .half submit, .half input[type="submit"] { width: auto; height: 40px; color: #fff; padding: 0 28px; cursor: pointer; }
button:hover, submit:hover, input[type="submit"]:hover { }

/* CONTACT FORM 7 MESSAGES */
.wpcf7-form.invalid { font-size: 0.9em; font-weight: 400; }
.wpcf7-response-output { margin: 0 0 10px 0!important; }
.wpcf7-validation-errors { color: #ffc600; padding: 0!important; border: none!important; }
.wpcf7-mail-sent-ok { color: #37b201; font-weight: 700; padding: 0!important; border: none!important; }
.wpcf7-not-valid-tip { font-size: 0.9em!important; position: relative; top: -2px; }
#appointment .wpcf7-not-valid-tip, #contact .wpcf7-not-valid-tip { position: absolute; top: 28px; right: 0; }
#contact .wpcf7-not-valid-tip { position: static; }
.popup-container p img.ajax-loader { position: absolute!important; top: 26px; right: 24px; }
.popup-container .wpcf7-not-valid-tip { top: -6px!important; }

/* CONTACT FORM 7 INPUT */
.half { width: 48%; float: left; margin-bottom: 20px; }
span.wpcf7-list-item { width: 200px; display: inline-block; }
input[type="text"], input[type="tel"], input[type="email"] { width: 380px; margin-bottom: 8px; }
input[type="checkbox"] { width: 18px; height: 18px; position: relative; top: 3px; }
textarea { height: 233px; }
input[type="submit"] { font-size: 1.1em; color: #fff; background: #0082a3; margin: 4px 0 0 0; border: none; border-bottom: 3px solid #025266; cursor: pointer; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; }
input[type="submit"]:hover { background: #1799b9; }

/* FOOTER */
footer { font-weight: 500; background: #e6e6e6; margin-top: 2em; padding: 2em 0 0 0; }
footer h1 { font-size: 1.2em; }
footer ul { line-height: 1.5em; }
footer #copyright .wrapper { text-align: center; }
footer #copyright { font-size: 0.8em; padding: 2em 0 10px 0; }
footer #copyright p { display: inline; }
/* */
/* */

/* ANIMATION */
@-webkit-keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); }
}

@-webkit-keyframes slideIn_title {
    0%   { left: -600px; top: 20px; }
    100% { left: 0px; top: 20px; }
}

@keyframes slideIn_title {
    0%   { left: -600px; top: 20px; }
    100% { left: 0px; top: 20px; }
}

@-webkit-keyframes slideIn_sub {
    0%   { left: -1400px; top: 90px; }
    100% { left: 180px; top: 90px;}
}

@keyframes slideIn_sub {
    0%   { left: -1400px; top: 90px; }
    100% { left: 180px; top: 90px;}
}

@-webkit-keyframes slideIn_tel {
    0%   { right: -400px; top: 20px; }
    100% { right: 2%; top: 20px; }
}

@keyframes slideIn_tel {
    0%   { right: -400px; top: 20px; }
    100% { right: 2%; top: 20px; }
}
/* */
/* */
/* */
/* */