/*
Theme Name: De Hoptimist
Theme URI: https://www.vision2web.eu
Author: Vision 2 Web
Author URI: https://www.vision2web.eu
Description: Custom theme for De Hoptimist
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
Text Domain: dehoptimist
*/

/*
kleuren:
    zacht geel: #f7f7ea;
    zacht blauw: c5dfe0;
    zacgh rood: d99152;

    blauw 100%: 2e8991;
    rood 100%: c96208
    geel 100%: e7e4b9


fonts
.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

  // <weight>: Use a value from 300 to 900
// <uniquifier>: Use a unique and descriptive class name

.merriweather-<uniquifier> {
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
}

 */
body{font-family: "Merriweather", serif; font-optical-sizing: auto;font-weight:400;font-style: normal; color:#333333; font-size:16px; line-height: 27px; }
.bg-hoptimist-yellow{background-color:#f7f7ea; background-image:url('assets/images/bg-exclusive-paper.png');}
.bg-hoptimist-blue{background-color: #c5dfe0;}
.bg-hoptimist-red-100{background-color: #c96208;}
.bg-hoptimist-red{background-color:#d99152;}
a{color:#333; text-decoration: underline;}
a:hover{color: #333;}

h1{font-family: "Roboto Condensed", sans-serif; font-weight:bold; color: #c96208; font-size: 33px;  text-shadow: 2px 2px 0px #e7e4b9; margin-bottom:30px;}
h2{font-family: "Roboto Condensed", sans-serif; font-weight:bold; color: #c96208; font-size: 28px; text-shadow: 2px 2px 0px #e7e4b9; margin-bottom:30px;}
h2.h2-blue{color:#2e8991;}
.p-tb-75{padding-top:75px; padding-bottom: 75px;}

.p-t-60{padding-top:60px;}
.p-b-100{padding-bottom:100px;}
.p-b-50{padding-bottom:50px;}
.p-tb-80{padding-top:80px; padding-bottom:80px;}
.p-t-80{padding-top:80px; padding-bottom:80px;}

.mb-40{margin-bottom:40px;}

.slider{background-image: url('assets/images/dehoptimist-interieur-2.jpg');/*test-header.jpg');*/}

.header-image, .slider{margin-top:114px;background-position: center center; background-size: cover; background-repeat: no-repeat;}
.slider{padding-top:75px; padding-bottom:55px; }
.slider .blue-overlay{width: 100%; height: 100%; position: absolute; left: 0; right: 0; top:0; bottom:0; background-color:rgba(0,131,189,0.5);}
.header-image{background-image: url('assets/images/dehoptimist-interieur-2.jpg');/*url('assets/images/test-header-2.jpg');*/}
.header-image .blue-overlay{width: 100%; height: 100%; position: absolute; left: 0; right: 0; top:0; bottom:0; background-color:rgba(0,131,189,0.5);}
.slider h2{ font-size:60px;
    text-shadow: 2px 2px 0px #e7e4b9, 4px 4px 0px #2e8991;
    position: relative; z-index: 99; margin-bottom:30px;}
.slider p{color:#fff; font-size:15px; }

.image-border{background-color: #FFF; padding:7px; border-radius:10px; box-shadow: 3px 3px 4px rgba(0,0,0,0.5); }
.image-border img{border-radius: 10px; width: 100%;}
.multiple-images .image-border{margin-bottom:30px;}
nav.navbar{box-shadow:2px 2px 2px rgba(51, 51, 51, 0.2);}
section{}
section.hoptimist-menu{min-height:100px;background-color:#d99152; background-image: url('assets/images/bg-menu-2.png'); background-position: center top; background-repeat: no-repeat; background-size: 100%;}

section.hoptimist-paralax{background-image:url('assets/images/test-afbeelding-2.png'); background-size: cover; background-repeat: no-repeat; background-position: center center;}
section.hoptimist-paralax .blue-overlay{width: 100%; height: 100%; position: absolute; left: 0; right: 0; top:0; bottom:0; background-color:rgba(0,131,189,0.5);}
section.hoptimist-paralax h2{
    text-shadow: 2px 2px 0px #e7e4b9, 4px 4px 0px #2e8991;
    position: relative; z-index: 99;}

section.hoptimist-activiteiten h4 a{text-decoration: none;}
section.hoptimist-activiteiten h4 a,
section.hoptimist-activiteiten h4{font-family: "Roboto Condensed", sans-serif; font-weight:bold; color: #c96208; font-size: 22px; text-shadow: 2px 2px 0px #e7e4b9; text-align: center; margin:20px auto; }
.activiteit-date-label{position: absolute;
    left: 20px;
    top: 0px;
    background-color: #FFF;
    height: 100%;
    width: 54px;
    padding: inherit;
    text-align: center;
    text-transform: uppercase;}


.footerinfo{background-image: url('assets/images/bg-menu-2.png'); background-position: center top; background-repeat: no-repeat; background-size: 100%;}
.page-template-contact h4,
footer h4{font-family: "Roboto Condensed", sans-serif; font-weight:bold; color: #c96208; font-size: 28px; text-shadow: 2px 2px 0px #e7e4b9; margin-top:25px; }
.page-template-contact h4{margin-bottom:30px;}
footer .mabel-bhi-businesshours td{padding-right: 10px;}
.page-template-contact  a .fa-facebook-f,
.page-template-contact  a .fa-instagram,
.page-template-contact  a .fa-linkedin-in,
footer a .fa-facebook-f,
footer a .fa-instagram,
footer a .fa-linkedin-in{color:#333; font-size:30px; margin-right: 10px; }
footer .footerbar {color:#f7f7ea; font-size: 9px;}
footer .footerbar a{color:#f7f7ea;}

ul.menu{list-style:none; font-family: "Roboto Condensed", sans-serif; font-weight:bold; color: #2e8991; font-size: 24px; padding-top:40px; }
ul.menu li{padding-left:15px; padding-right:15px; list-style: none; display: inline; text-shadow: 2px 2px 0px #e7e4b9; margin-bottom:10px;}
ul.menu li a{color:#2e8991; font-weight:700; text-decoration: none;}
.page-template-contact ul.menu li.current_page_item a,
.home ul.menu li.current_page_item a.active,
ul.menu li.current-menu-ancestor a.active,
ul.menu li.current_page_ancestor a.active,
ul.menu li.current-menu-item a.active,
ul.menu li.current-item a.active,
ul.menu li a:hover{color:#c96208;}

ul.menu li .sub-menu{padding-left:0px;}
ul.menu li .sub-menu li{padding-left:15px;}

/* blue button
.btn.btn-hoptimist{font-family: "Roboto Condensed", sans-serif; font-weight:400; color: #e7e4b9; font-size: 16px; padding: 10px 50px;  border: solid 3px #c96208; background-color:#2e8991; border-radius: 10px; margin-top:35px; }
.btn.btn-hoptimist:hover{background-color:#36a0a9;/*#c5dfe0; color:#333;/*#d99152;*/ /* }
*/
.btn.btn-hoptimist{    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28) !important;font-family: "Roboto Condensed", sans-serif; font-weight:400; color: #e7e4b9; font-size: 16px; padding: 10px 50px;  border: solid 3px rgb(223, 107, 24); background-color:rgb(223, 107, 24); border-radius: 30px; margin-top:35px; }
.btn.btn-hoptimist:hover{background-color:#B45613; border-color:#B45613;/*#c5dfe0; color:#333;/*#d99152;*/ }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #333;
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="text"]:focus-visible,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="email"]:focus-visible,
.wpcf7 textarea:focus,
.wpcf7 textarea:focus-visible{border:none; outline: none;}

.wpcf7 input[type="submit"]{float:left; font-family: "Roboto Condensed", sans-serif; font-weight:400; color: #e7e4b9; font-size: 16px; padding: 10px 50px;  border: solid 3px #c96208; background-color:#2e8991; border-radius: 10px;  }
.wpcf7 input[type="submit"]:hover{background-color:#36a0a9;/*#c5dfe0; color:#333;/*#d99152;*/ }

@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    footer .footerbar {font-size: 12px;}
}

/* Large devices (desktops, 992px and up) lg */
@media (min-width: 992px) {
    h1{font-size: 38px;}
    h2{font-size: 34px;}
    .p-lg-t-135{padding-top:135px!important;}
    .p-lg-b-115{padding-bottom:115px!important;}
    .p-t-lg-75 {padding-top:75px!important;}
    .p-b-lg-85 {padding-top:85px!important;}
    .p-lg-tb-180{padding-top:180px; padding-bottom:180px;}
    .slider{padding-top:260px; padding-bottom:155px;}
    .slider h2{ font-size:70px;
       }
    .slider p{font-size:17px; }
    .btn.btn-hoptimist{font-size: 18px;}
    ul.menu li{margin-bottom:0px;}
    .wpcf7 input[type="submit"]{float:right;}


}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {  }