/*
 *************************
        $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;
}

.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: 56px;
}

.dropdown .collapsible-icon {
    position: absolute;
    right: 7px;
    top: auto;
    bottom:10px;
    font-size: 0;
    width: 33px;
    height: 33px;
    margin-top: -6px;
    background: url(../images/arrow-right-white.svg);
    background-repeat: no-repeat;
    background-size: auto 54%;
    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;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.dropdown .collapsible-icon.active {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.second-level-menu .collapsible-icon {
    width: 20px;
    height: 20px;
   }

.second-level-menu.show .collapsible-icon {
     transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.collapsible-icon {
   position: absolute;
    right: 7px;
    top: 12px;
    font-size: 0;
    width: 33px;
    height: 33px;
    margin-top: -6px;
    background: url(../images/arrow-up.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;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}


.collapsible-icon,
.collapsible-icon svg,
.collapsible-icon polygon  {
    fill: #0e222f;
}

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



/*
 *************************
        $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;
    }

}