/*
Theme Name: Helix Child
Description: Gebruik dit thema om maatwerk toe te passen op Helix
Author: Another Concept
Author URI: http://www.anotherconcept.nl
Version: 1.3
Template: helix
Date: 20220517

-------------------------------------------------------------- */
/* MAIN STYLES
-------------------------------------------------------------- */

/* ----------------------------------------------------------- */
/* VIDEO BANNER
-------------------------------------------------------------- */
.video-buffer {
    background: rgba(0, 0, 0, .4);
    padding: 30px 30px 20px 30px;
    border-left: 7px solid #00bbdc;
		max-width:50%
}

.video-container .video-text h1{
    color:#fff;
    font-size:3em;
}
/* ----------------------------------------------------------- */
/* FAQ
-------------------------------------------------------------- */
ul.questions{
	margin:0;
}

.single-question{
	list-style:none;
	margin-bottom:15px;
}

.single-question h4 {
    border-bottom: 2px solid #eee;
    padding: 10px 0;
    margin-bottom: 0;
    z-index: 2;
    position: relative;
    transition: all ease .2s;
}

.single-question h4:after {
    content: "\f07a";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    right: 0px;
    left: 0;
    top: 0;
    color: #fde71d;
    opacity: 0;
    transition: all ease 0.2s;
    height: 40px;
    width: 100%;
    font-size: 1.5em;
}


.single-question h4:hover{
	cursor:pointer;
	border-color:#00bbdc;
}

.single-question p {
    border-top: 0;
    padding: 30px 0;
    margin-bottom: 0;
    margin-top: -15px;
    display: none;
}

.toggle-icon {
    position: absolute;
    right: 5px;
    top: 35%;
    transition:all ease .2s
}

.single-question h4:hover .toggle-icon{
	transform:rotate(90deg)
}

/* ----------------------------------------------------------- */
/* COLOR SWATCHES
-------------------------------------------------------------- */
.swatch-images{
	list-style:none;
	margin:0;
    min-height:590px;
}

.swatch-image:not(:first-child){
	display:none;
}

.swatch-image {
    position: absolute;
}

ul.list-of-colors {
    width: 60%;
    margin: 15px auto;
    z-index: 1;
    position: relative;
}

.swatch-blob {
    height: 50px;
    width: 50px;
    border: 2px solid #f2f2f2;
    border-radius: 12px;
	float: left;
	margin-right: 10px;
    transition:all ease .2s;
    box-shadow:1px 1px 10px rgba(0,0,0,0.1);
}

.list-of-colors h5 {
    margin-top: 12px;
}

.color-toggle:hover .swatch-blob,
.swatch-blob.active{
    border-color:#555;
}

/* ----------------------------------------------------------- */
/* RESPONSIVE STYLES
-------------------------------------------------------------- */
/* Small screens */
@media only screen and (max-width: 40em) {

    .columns{
        height:auto !important;
    }

    .banner-wrap, .banner {
        height: 50vh !important;
    }

    .video-buffer{
        max-width:100%;
    }

    .banner-text {
        margin-top: 8vh !important;
    }

    .banner-text h2 {
        font-size: 2em;
    }
	
    .button, .button:focus, .button:visited{
        padding:10px 50px;
    }

    /* swatch */
    .swatch-blob{
        float:none;
    }

    .swatch-images{
        min-height:170px;
    }

} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 

	
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens */
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {

} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens */
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XXLarge screens */
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */