/*
Theme name: Werken bij Rondomwerk
Description: WordPress thema voor Rondomwerk
Author: SVM
Version: 1.0
*/

@font-face {
    font-family:themixboldroman;
    src:url(fonts/themixbold-plain-webfont.woff2) format("woff2"),url(fonts/themixbold-plain-webfont.woff) format("woff");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family:themixboldcaps;
    src:url(fonts/themixboldcaps-webfont.woff2) format("woff2"),url(fonts/themixboldcaps-webfont.woff) format("woff");
    font-weight:400;
    font-style:normal;
}

* { margin: 0; padding: 0; }

html, body { font-size: 18px; font-family: 'Assistant', sans-serif; line-height: 32px; }

h1, h2, h3, h4 { font-family: themixboldroman; text-transform: uppercase; }

img { display: table; }

.button { padding: 10px 20px; background: #40aadc; border: 0; color: #fff; text-transform: uppercase; text-decoration: none; font-weight: 700; width: 100%; font-size: 16px; }
.button:hover { background: #2a8fbb; }

.header { padding: 20px 0; }
.header .header-container { display: flex; align-items: center; justify-content: space-between; }
.header .headmenu { display: flex; align-items: center; }
.header .headmenu ul { list-style: none; display: flex; margin-bottom: 0; margin-right: 30px; }
.header .headmenu ul li { padding-left: 20px; }
.header .headmenu ul li a { color: #908f8f; text-decoration: none; font-weight: 600; }
.header .headmenu ul li.current_page_item a  { color: #40aadc; }
.header .headmenu ul li:hover a { color: #40aadc; }
.header .header-text { background: #40aadc; padding: 7px 15px; line-height: 24px; text-align: center; }
.header .header-text a { font-size: 24px; font-weight: 700; display: block; text-decoration: none; }
.header .header-text, .header .header-text a { color: #fff; }
.header .header-text p { margin-bottom: 0; font-size: 14px; }
.header .menu-bars { display: none; margin-left: 15px; }
.header .menu-bars svg { width: 20px; height: 20px; object-fit: contain; }

.banner { background: #eee; height: 500px; position: relative; }
.banner .bg-image { width: 100%; height: 100%; }
.banner .bg-image img { width: 100%; height: 100%; object-fit: cover; }
.banner .banner-text { width: 100%; position: absolute; bottom: 0; left: 0; font-family: themixboldroman; }
.banner .banner-text .block { position: relative; display: table; background: rgba(64, 170, 220, 0.75); padding: 50px 75px 50px 0; color: #fff; }
.banner .banner-text .block .blue-block { position: absolute; background: rgba(64, 170, 220, 0.75); width: 10000px; top: 0; height: 100%; display: block; right: 100%; }
.banner .banner-text .block h1 { font-size: 60px; text-transform: uppercase; text-shadow: 0 0 4px rgba(0,0,0,0.75); }
.banner .banner-text .block p { font-size: 36px; margin: 0; text-shadow: 0 0 4px rgba(0,0,0,0.75); }

.section { padding: 50px 0; }
.section.grey { background: #e1e1e1; }

.content-block { display: flex; justify-content: space-between; flex-wrap: wrap; }
.content-block.reverse { flex-direction: row-reverse;  align-items: center; }
.content-block .content-text { width: 67%; }
.content-block .content-text h2 { margin-bottom: 15px; }
.content-block .video-block { width: 30%; }
.content-block .info-block { width: 30%; }
.content-block .info-block .image img { width: 100%; height: 100%; object-fit: cover; }
.content-block .info-block .cta-block { background: #85004d; color: #fff; padding: 30px; text-transform: uppercase; }
.content-block .info-block .cta-block p { font-family: themixboldroman; font-size: 36px; line-height: 40px; }
.content-block .info-block .cta-block a { color: #fff; text-decoration: none; }
.content-block.three-columns { align-items: center; }
.content-block.three-columns .content-text { width: 30%; }

.interview-block { }
.interview-block .category { font-family: themixboldroman; font-weight: 500; color: #85004d; margin-bottom: 10px; }
.interview-block h2 { font-family: themixboldroman; font-size: 36px; line-height: 40px; text-transform: uppercase; color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.75); }
.interview-block a {  }

.references .quote { max-width: 70%; margin: 0 auto; padding-bottom: 35px; }
.references .quote p { font-family: themixboldroman; font-size: 28px; text-align: center; }
.references .quote .author { font-family: themixboldroman; text-align: center; color: #85004d; }
.references .images { display: flex; margin-top: 30px; }
.references .images img { width: 100%; height: 100%; object-fit: cover; }

.interview-archives { padding: 40px 0; background: #fff; }
.interview-archives.grey { background: #e1e1e1; }
.interview-archives .interview-archive { display: flex; justify-content: space-between; flex-wrap: wrap; }
.interview-archives .interview-archive .block { display: flex; width: 48%; }
.interview-archives .interview-archive .block .image {  }
.interview-archives .interview-archive .block .image .featured-image { width: 240px; height: 275px; }
.interview-archives .interview-archive .block .image .featured-image img { width: 100%; height: 100%; object-fit: cover; }
.interview-archives .interview-archive .block .info { padding: 25px; }
.interview-archives .interview-archive .block .info h2 { font-family: themixboldroman; font-size: 24px; text-transform: uppercase; }
.interview-archives .interview-archive .block .info .author { line-height: 24px; margin-bottom: 15px; }
.interview-archives .interview-archive .block .info .author span { display: block; font-style: italic; }
.interview-archives .interview-archive .block .info .button { text-transform: uppercase; }

.vacatures { display: flex; margin: 0 -1.5%; flex-wrap: wrap; }
.vacatures .vacature-item { width: 30.3333%; margin: 15px 1.5%; background: #e1e1e1; text-decoration: none; }
.vacatures .vacature-item .image { width :100%; height: 200px; }
.vacatures .vacature-item .image img { width: 100%; height: 100%; object-fit: cover; }
.vacatures .vacature-item .info { padding: 30px; }
.vacatures .vacature-item .info h2 { font-family: themixboldroman; font-size: 24px; text-transform: uppercase; color: #85004d; }
.vacatures .vacature-item .info .cta { margin-top: 15px; display: table; background: #40aadc; color: #fff; text-transform: uppercase; font-weight: 700; width: auto; padding: 4px 15px; }
.vacatures .vacature-item .info .cta:hover { background: #2a8fbb; }

.vacature-form { background: #e1e1e1; padding: 30px; margin-top: 30px; }

.filter-posts { display: flex; background: #e1e1e1; padding: 30px; justify-content: space-between; margin-bottom :25px; }
.filter-posts .item { width: 29%; }
.filter-posts .item select { width: 100%; padding: 6px 10px 5px 10px; font-size: 16px; }
.filter-posts .item input { width: 100%; padding: 6px 10px; font-size: 16px; line-height: 20px; }
.filter-posts .item button { padding: 2px 10px; background: #40aadc; border: 0; color: #fff; text-transform: uppercase; font-weight: 600; width: 100%; font-size: 16px; }
.filter-posts .item button:hover { background: #2a8fbb; }
.filter-posts .item:last-child{ width: 10%; }

.page-banner { background: #3b92b1; }
.page-banner .banner-block { display: flex; align-items: center; }
.page-banner .banner-block .image .featured-image { width: 300px; height: 300px; }
.page-banner .banner-block .image .featured-image img { width: 100%; height: 100%; object-fit: cover; }
.page-banner .banner-block .info { padding: 30px; }
.page-banner .banner-block .info h1 { font-family: themixboldroman; font-size: 32px; text-transform: uppercase; color: #fff; }
.page-banner .banner-block .info .author { line-height: 24px; margin-bottom: 15px; color: #fff; }
.page-banner .banner-block .info .author span { font-style: italic; }

.page-content { max-width: 800px; margin: 0 auto; }
.page-content h2, .page-content h3, .page-content h4 { font-size: 1.3rem; margin-bottom: 5px; }
.page-content .button a { font-family: themixboldroman; text-transform: uppercase; }

.gform-theme--api, .gform-theme--foundation { --gf-form-gap-y: 15px !important; }

.footer { background: #57585a; padding: 40px 0; }
.footer .footer-items { display: flex; color: #fff; }
.footer .footer-items .footer-logo { margin-right: 50px; }
.footer .footer-items h4 { font-size: 20px;  }
.footer .footer-items p { line-height: 24px; }
.footer .footer-items p:last-child { margin-bottom: 0; }

@media ( max-width: 992px ) {

    .header .logo { max-width: 33.3333%;}
    .header .logo img { max-width: 100%; }

    .main-menu { display: none; width: 100%; height: auto; position: absolute; top: 90px; left: 0; background: #40aadc; z-index: 999; }

    .header .headmenu ul { flex-wrap: wrap; padding: 25px; margin: 0; }
    .header .headmenu ul li { padding-left: 0; width: 100%; }
    .header .headmenu ul li a { color: #ffff; text-decoration: none; font-weight: 600; }
    .header .headmenu ul li.current_page_item a  { color: #fff; text-decoration: underline; }
    .header .headmenu ul li:hover a { color: #fff; text-decoration: underline; }

    .header .menu-bars { display: table; }

    .header .header-text { line-height: 18px; padding: 7px 10px; }
    .header .header-text p { font-size: 12px; }
    .header .header-text a { font-size: 20px; }

    .banner .banner-text .block { padding: 25px 25px 25px 0; }
    .banner .banner-text .block h1 { font-size: 40px; }
    .banner .banner-text .block p { font-size: 24px;  }

    .content-block .content-text { width: 100%; }
    .content-block .video-block { width: 100%; }

    .content-block.three-columns { align-items: start; }
    .content-block.three-columns .content-text { width: 48%; margin: 40px 0; }
    .content-block.three-columns .info-block { width: 100%; }

    .vacatures { flex-wrap: wrap; }
    .vacatures .vacature-item { width: 47%; }

    .filter-posts { flex-wrap: wrap; }
    .filter-posts .item { width: 48%; }
    .filter-posts .item select { margin: 5px 0; }
    .filter-posts .item input { margin: 5px 0; }
    .filter-posts .item button { margin: 5px 0; }
    .filter-posts .item:last-child { width: 48%; }

    .section { width: 100%; overflow: hidden; }

    .page-banner .banner-block { flex-wrap: wrap; }
    .page-banner .banner-block .image { width: 100%; padding: 30px 0 0 0; }
    .page-banner .banner-block .image .featured-image { width :200px; height: 200px; }
    .page-banner .banner-block .info { width: 100%; padding: 30px 0; }


    .interview-archives .interview-archive .block { width: 100%; margin: 10px 0; }


}

@media ( max-width: 768px ) {

    .content-block.three-columns .content-text { width :100%; }

    .vacatures .vacature-item { width: 97%; }

    .interview-archives .interview-archive .block .image .featured-image {
        width: 180px;
        height: 240px;
    }

    .footer .footer-items { flex-wrap: wrap; }
    .footer .footer-items .footer-item { width: 100%; text-align: center; }
    .footer .footer-items .footer-logo { margin-right: 0; margin-bottom: 20px; }
    .footer .footer-items .footer-logo img { display: table; margin: 0 auto; }
    .footer .footer-items p { line-height: 24px; text-align: center; }

}