/*
 *************************
        $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(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);*/
}

.collapsible-icon {
    position: absolute;
    right: 7px;
    top: 4px;
    font-size: 23px;
    /* 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(-90deg); 
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg); 
    /* content: "V"; */
    /* color: #000; */
    /* display: block; */
    font-weight: 600;
}

span.collapsible-icon:after {
    content: "V";
    color: rgb(230,30,135) !important;
    display: block;
}


.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(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}



/*
 *************************
        $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 (max-width: 1024px) {
    .second-level-menu .collapsible-icon {
        width: auto;
        height: auto;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        transform: none;
        min-height: 40px;
    padding-bottom: 10px;
    }
    .second-level-menu span.collapsible-icon:after {
        content: "V";
        color: rgb(230,30,135) !important;
        display: block;
        transform: rotate(-90deg);
        width: 20px;
    }
    
    .second-level-menu.show .collapsible-icon:after {
    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(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(0deg);
}

}


@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;
    }

}