/*
Theme Name: UnderStrap
Theme URI: http://understrap.com
Author: Holger Koenemann
Author URI: http://www.holgerkoenemann.de
GitHub Theme URI: https://github.com/understrap/understrap
Description: Combination of Automattic´s _s theme and Bootstrap 4. Made as a solid starting point for your next theme project and WordPress website. Use it as starter theme or as a parent theme. It is up to you. Including Font Awesome support, built-in widget slider and much more you need for basic websites. IMPORTANT: All developer dependencies are not bundled with this install file. Just download the .zip, extract it and run "npm install" and "gulp copy-assets" inside the extracted /understrap folder.
That downloads everything and moves it in place so that you can recompile your CSS and JS files;
A developer version (with Gulp/node and Sass sources) is available on gitHub: https://github.com/understrap/understrap
A child theme is available on Github, too: https://github.com/understrap/understrap-child;
Version: 0.8.7
License: UnderStrap WordPress Theme, Copyright 2013-2017 Holger Koenemann
UnderStrap is distributed under the terms of the GNU GPL version 2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: understrap
Tags: one-column, custom-menu, featured-images, theme-options, translation-ready

This theme, like WordPress, is licensed under the GPL.
UnderStrap is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.

Resource Licenses:
Font Awesome: http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
Bootstrap: http://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (Code licensed under MIT, documentation under CC BY 3.0.)
Owl Carousel 2: http://www.owlcarousel.owlgraphic.com/ | https://github.com/smashingboxes/OwlCarousel2/blob/develop/LICENSE (Code licensed under MIT)
and of course
jQuery: https://jquery.org | (Code licensed under MIT)
WP Bootstrap Navwalker by Edward McIntyre: https://github.com/twittem/wp-bootstrap-navwalker | GNU GPL
*/

/*
This file is just used to identify the theme in WordPress.
The compiled CSS output can be found in /css/theme.css
The SASS sources for it can be found in /sass/
The dependencies can be found in /src/ after running "gulp copy-assets" terminal command

...and now go out and play!
*/

.teamleden-template-default .opleidingeninteresses ul{margin-left: 1.5rem;}

.page-template-team-page .afspraakbanner{margin-top: 175px;}

.team_members{margin-left: -30px!important; margin-right: -30px!important;}
.team_members .member{margin-bottom: 2rem;}
.team_members .member a:hover{border-bottom: 0!important;}
.team_members .member .container{ display: flex; height: 165px; padding:0;}
.team_members .member .container .before{ height: 165px; display: inline-block; width: 15px; background-color: #2a343d; border-top: 35px solid #9d1c1c; }
.team_members .member .container .photo{ width: 125px; height: 165px;overflow: hidden; display: flex; align-items: center; justify-content: center;}
.team_members .member .container .photo a{height: 100%;}
.team_members .member .container .photo img{ width: calc(100% + 10px); margin-left: -10px; max-width: initial!important; object-fit: cover; min-height: 100%;}
.team_members .member .container .content{ height: 165px; width: calc(100% - 140px); display: flex; padding: 15px 5px; background-color: #c8eae7; position: relative; z-index: 2; align-items: center;}
.team_members .member .container .content .inner-content{z-index: 100; position: relative;}
.team_members .member .container .content .inner-content h5{font-size: 16px; margin-bottom: 5px; color: #000; font-weight: 500;}
.team_members .member .container .content .inner-content div{font-size: 14px; margin-bottom: 0; color: #2a343d;}
.team_members .member .container .content .inner-content ul{margin-left: 16px; margin-bottom: 0;}
.team_members .member .container .content::before{content: ' '; background-color: #c8eae7; border-left:10px solid white; transform: skew(-10deg, 0); position: absolute; left: -25px; top:0; height: 100%; font-size: 0; width: 40px; z-index: 1}

.team_members .member .toggle{ position: absolute;width: 24px;height: 24px;background: #2a343d;border-radius: 50%;left: calc(50% - 12px);bottom: -12px;z-index: 5; text-align: center; cursor: pointer;}
.team_members .member .toggle i{color: #fff;}
.team_members .member .fold_down{display: none; /*position: absolute;*/background: rgba(255,255,255,0.9);width: calc(100% - 30px);z-index: 8;border-left: 15px solid #14ad9d;padding: 15px;}
.team_members .member .fold_down .text,
.team_members .member .fold_down .text *{font-size: 14px; color: #4d4d4d!important; line-height: 20px!important;}
.team_members .member .fold_down .text h5{font-size: 16px; margin-bottom: 5px; color: #000; font-weight: 500;}
.team_members .member .fold_down ul{margin-left: 16px; line-height: 20px!important;}


.team_members .member.active .toggle.down{display: none;}
.team_members .member.active .toggle.up i{display: block; margin-top: 2px;}
.team_members .member.active .fold_down{display: block;}

.home .afspraakbanner .colorlayer{background:rgba(10,178,170,.85)!important;}
.home .afspraakbanner .colorlayer .bannercontent .container .the-content p{font-size: 20px;}

@media only screen and (max-width: 992px) {
    .single-teamleden .afspraakbanner{margin-top: 50px; margin-bottom: 150px;}
    .page-template-team-page .afspraakbanner{margin-top: 50px; margin-bottom: 150px;}
}

@media only screen and (max-width: 600px) {
    .team_members{margin-left: -15px!important; margin-right: -15px!important;}
}