/*
Theme Name: Kompas.frl
Description: Maatwerk Kompas.frl
Author: WakkerMedia
Template: flatsome
Version: 1.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.product-summary .woocommerce-Price-currencySymbol {
    display: inline-block;
    font-size: 1em;
    margin-top: 0;
    vertical-align: initial;
}

.button.configurator {
	width:280px;
}

.button.offerte {
	width:280px;
	background:none;
	border:0px;
	color:#aaa;
	font-size:11px;
	padding:5px 20px;
	margin:0px 0px 10px;
	border-top: 1px solid #ccc;
}

a.button.offerte:hover {
	background:#fff;
}

.showlogin {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-size: .97em;
    letter-spacing: .03em;
    -ms-touch-action: none;
    touch-action: none;
    cursor: pointer;
    font-weight: bolder;
    text-align: center;
    color: currentColor;
    text-decoration: none;
    border: 1px solid transparent;
    vertical-align: middle;
    border-radius: 0;
    margin-top: 0;
    margin-right: 1em;
    margin-left: 1em;
    text-shadow: none;
    line-height: 2.4em;
    min-height: 2.5em;
    padding: 0 1.2em;
    max-width: 100%;
    transition: border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s, -webkit-transform .3s;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
    transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s, -webkit-transform .3s;
    text-rendering: optimizeLegibility;
    box-sizing: border-box;
    border:2px solid #E40047;    
}

.mspc-variation .woocommerce-Price-amount {
    font-size: 32px;
}

ul {
	margin-left: 20px;
}

ul.check{
	list-style: none;
	margin-left: 10px;
}

ul.check li:before {
	content: '\f00c';
    font-size: 20px;
    font-family: FontAwesome;
    color: #029b3f;
    width: 20px;
    float: left;
    position: relative;
    left: -10px;
}

.faq-question {
  cursor: pointer;
  padding: 10px 0px 10px 0px;
  width: 100%;
  border-bottom: 1px solid #009FE3;
  text-align: left;
  outline: none;
  font-size: 16px;
}

.faq-question:after {
    font-family: 'Fontawesome';
    content: '\f078';
    margin-left: 10px;
    position: absolute;
    right: 10px;
    font-size: 16px;
    color: #009FE3;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
/*.active, .collapsible:hover {
  background-color: #009FE3;
} */

/* Style the collapsible content. Note: hidden by default */
.faq-answer {
  padding: 0 10px;
  display: none;
  overflow: hidden;
}

@media only screen
and (min-width : 320px)
and (max-width : 480px),
(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 1.5),
(max-device-width : 480px) and (min-device-pixel-ratio : 1.5) {

    .secondary, .checkout-button, .button.checkout, .button.alt {
        margin: 0;
        width: 100%;
        padding: 0px;
        font-size: 14px;
    }

    .mspc-content .secondary, .mspc-content .checkout-button, .mspc-content .button.checkout, .mspc-content .button.alt {
        margin: 0;
        width: 143px;
        padding: 0px;
        font-size: 14px;
    }

    .text-center .quantity, .quantity {
        margin:0px;
    }

}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

.faq-answer {
  padding: 0 10px;
  display: block;
  overflow: hidden;
}

}