/* 
Theme Name: onest
Author: onest.nl
Version: 0.1
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');


@import "includes/css/custom-blocks.css";
@import "includes/css/responsive.css";

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
    max-width: 100%;
}
a {
    color: #e4c65f;
    font-weight: 700;
}
/* Text meant only for screen readers */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
}

/* Here some needed widget styles
 * Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 2em; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul.children li { padding-left: 15px; }

/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line.
 * Note: you can change the whole appearance of the search_form() function in our searchform.php */
.widget_search .search-form input[type="submit"] { display: none; }

/* Make sure select elements fit in widgets */
.widget select { max-width: 100%; }

/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!
 * For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */
 .comment .children { margin-left: 1.5em; }

.entry-meta {
    display: none;
}

/* Clearing */
.clear {
    clear: both;
}


html{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 body {
    word-wrap: break-word;
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 26px;
}
*:focus,
button:focus,
.form-control:focus {
    outline: none!important;
}

h1 {
    font-size: 38px;
    line-height: 40px;
    font-family: 'Montserrat', sans-serif;
    color: #2E2E2E;
    margin-bottom: 24px;
    font-weight: 800;
}
h2 {
    color: #2E2E2E;
    margin-bottom: 25px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}
h3 {
    color: #2e2e2e;
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 24px;
    margin-bottom: 10px;
}
p {
    font-size: 15px;
    line-height: 26px;
    color: #000;
    font-family: 'Montserrat', sans-serif;
}
img {
    max-width: 100%;
}
.scrollbtn a {
    background: 
#ff8330;
color:
    #fff;
    font-weight: 600;
    padding: 15px 30px;
    position: fixed;
    right: -47px !important;
    top: 35%;
    font-size: 18px;
    transform: rotate(-90deg);
    z-index: 99999 !important;
}
a:hover {
    text-decoration: none !important;
}
/* ----- Header ----- */
#masthead {
    background: #fff;
    padding-bottom: 10px;
}
#logo img {
    margin-top: 10px;
    width: 150px;
    height: auto;
}

.navbar-nav {
    float: right;
    margin: 0;
    margin-top: 2px;
    width: 100%;
    display: block;
}
.navbar-default {
    background-color: transparent;
    border-color: transparent;
    margin-bottom: 0;
    float: right;
}
.navbar.navbar-default ul li {
    width: auto;
    float: left;
    list-style: none;
    display: inline-block;
}
.navbar.navbar-default li a {
    font-size: 16px;
    line-height: 26px;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    color: #fff;
    display: block;
    padding: 10px 10px;
    font-weight: 600;
    letter-spacing: 1px;
}
#menu-hoofd-menu {
    margin-top: 20px;
}
.navbar.navbar-default li a:hover{
    text-decoration: none;
    background-color: transparent;
    color: #f60 !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: transparent;
    color: #f60 !important;
}

.bovenbalk {
    background: #000;
}
.bovenbalk p {
    color: #fff;
}
.bovenbalk li {
    color: #fff;
}
.bovenbalk #text-14 img {
    width: 20px;
    height: auto;
    margin-right: 10px;
}
.bovenbalk #text-14 p {
    text-align: right;
}
.bovenbalk #text-14 {
    padding-right: 40px;
    margin-top: 14px;
    margin-bottom: 10px;
}
.bovenbalk li {
    color: #fff;
    list-style-image: url(/wp-content/uploads/2019/11/check-mark-black-outline-1.png);
    width: auto;
    float: left;
    margin-right: 20px;
    list-style-position: inside;
}

/* ----- Contact form ----- */

.wpcf7-form-control {
    width: 100%;
    height: 50px;
    padding-left: 10px;
    border: 1px solid #d9d9d9;
}
.wpcf7-form-control.wpcf7-textarea {
    height: 140px;
}
.wpcf7-form-control.wpcf7-submit {
    width: auto;
    height: auto;
    padding: 10px 40px;
    border: 0px;
    background: #ff8330;
    padding: 10px 30px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ----- Footer ----- */

#colophon {
    background: 
    #2e2e2e;
    padding-top: 100px;
}
.site-footer p, .site-footer ul li {
    color: #fff;
}
.copyrightbar {
    background: #000;
    padding-top: 10px;
    margin-top: 50px;
}
.copyrightbar p{
    font-size: 13px;
}
.copyrightbar .widget, .copyrightbar .widget p {
    margin-bottom: 0;
}
#text-10 {
    width: 110%;
    max-width: 110%;
}












@media (max-width: 1470px) { 
    .bovenbalk li {
        font-size: 12px;
        margin-right: 10px;
    }
    .bovenbalk #text-14 p {
        font-size: 13px;
    }
}




@media (max-width: 630px) { 


.container {
    overflow-x: hidden;
}
#text-13 {
    display: none;
}#foto_tekst {
    height: auto;
    overflow-x: hidden;
}
.voor li {
    list-style-image: url(/wp-content/uploads/2019/11/check-mark-black-outline-1.png);
    font-size: 14px;
    font-weight: 600;
    list-style-position: outside;
    line-height: 30px;
}
.voor {
    padding: 30px;
    list-style: inline;
    background: 
#fff;
box-shadow: 1px 1px 20px
    #0000001a;
    height: 600px;
    margin-bottom: 20px;
}
    .overlay {
        width: 100%;
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .bovenbalk ul {
    display: none;
}
h1 {
    font-size: 26px;
    line-height: 30px;
    font-family: 'Montserrat', sans-serif;
    color: 
    #2E2E2E;
    margin-bottom: 24px;
    font-weight: 800;
}
#tekst_foto img {
    max-width: 100%;
    margin-top: 50px;
}
.productblok .logo {
    width: 60%;
    margin: 0 auto;
        margin-bottom: 0px;
    float: none;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}
.productblok {
    margin-bottom: 30px;
}
.nadelen {
    padding: 20px;
    background: 
#fff;
margin-top: 0px !important;
box-shadow: 1px 1px 10px
    #0000000d;
    width: 90%;
    margin: 0 auto;
        margin-top: 0px;
}
.grijs {
    background: 
    #ededed;
    padding: 20px !important;
}
.row.quoterow {
    margin-top: 20px;
    margin-bottom: 40px;
}
.quoteblok {
    background: 
    #2e2e2e;
    padding: 60px 20px 20px 30px;
}

}