/*
 *************************
	$ACCORDEON / COLLAPSIBLES / MOBILE-MENU BEHAVIOUR
	- Works together with collapsible.js
	- Code example
		<div class="collapsible">
			<div class="collapsible-title">
				<div class="collapsible-icon collapsible-toggler"></div>
				<div class="collapsible-preview"></div>
			</div>
			<div class="collapsible-text"></div>
		</div>
	- "collapsible-preview" is optional, it will be faded out, as "collapsible-text" becomes visible.
	- "collapsible-icon" is also optional
	- "collapsible-icon" and "collapsible-toggler" do not have to be the same element
 *************************
*/

.collapsible,
.collapsible-tinymce {
	list-style-type: none;
	position: relative;
}

.collapsible-title {
    position: relative;
    display: block;
    font-size: 20px;
    padding: 10px 0;
    font-family: 'daxmedium';
    color: rgb(25,78,150);

}


.collapsible .collapsible-toggler,
.collapsible-tinymce .collapsible-toggler {
	display: block;
	position: relative;
	cursor: pointer;
	margin-bottom: 0;
}

.collapsible-tinymce .collapsible-intro {
	margin-bottom: 0;
}

.collapsible-toggler--more,
.collapsible-toggler--less {
	display: inline;
}

.collapsible-title.collapsible-toggler {
	padding-right: 35px;
            border-bottom: solid 1px #efefef;
}

button.collapsed > .collapsible-icon {
    -webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.collapsible-icon {
    position: absolute;
    right: 15px;
    display: flex;
    font-size: 0;
    width: 8px;
    height: 13px;
    margin-top: -16px;
    background: url(../images/triangle.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.collapsible-icon,
.collapsible-icon svg,
.collapsible-icon polygon  {
	fill: #813a3e;
}

.collapsible-text {
	/*overflow: hidden;*/
	display: none;
	    padding: 20px 20px 20px 0;
}

.accordeon-header {
    font-size: 20px;
    font-family: 'daxmedium';
    color: rgb(25,78,150);
        margin: 0;
        text-align: left;
}

/*
 *************************
	$OPEN
 *************************
*/

.collapsible.open > .collapsible-icon,
.collapsible.open > .collapsible-toggler .collapsible-icon,
.collapsible.open > .collapsible-header .collapsible-toggler .collapsible-icon,
.collapsible.open > .collapsible-title .collapsible-icon,
.collapsible-tinymce.open > .collapsible-title > .collapsible-icon {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}



/*
 *************************
	$NO-JS (Adding display:none by js would be more intelligent)
 *************************
*/

.no-js .collapsible-icon {
	display: none;
}

.no-js .collapsible-text {
	display: block;
}



@media screen and (min-width: 1024px) {

	.collapsible-title--mob {
		visibility: hidden !important;
		display: none !important;
	}

	.collapsible--mob .collapsible-text{
		visibility: visible !important;
		display: block !important;
	}

}