#accordions {}
#accordions > .content-wrapper {}
#accordions > .content-wrapper > .hook {
    margin-bottom: 30px;
    
    font-weight: 700;
    font-style: italic;
}
#accordions > .content-wrapper > .title {
    max-width: 700px;
    margin-bottom: 30px;
    
    font-weight: 700;
}
#accordions > .content-wrapper > .title > span { font-weight: 100; }
#accordions > .content-wrapper > .description {
    max-width: 800px;
    font-weight: 700;
}
#accordions > .content-wrapper > .description > span { font-weight: 100; }
#accordions > .content-wrapper > .accordions {}
#accordions > .content-wrapper > .accordions > .accordion { margin: 65px 0; }
#accordions > .content-wrapper > .accordions > .accordion > .title {
    margin-bottom: 65px;
    font-weight: 700;
}
#accordions > .content-wrapper > .accordions > .accordion > .entries {}
#accordions > .content-wrapper > .accordions > .accordion > .entries > .entry {
    padding: 50px 0;
    border-top: solid 1px #000;
}
#accordions > .content-wrapper > .accordions > .accordion > .entries > .entry > .title { font-weight: 700; }
#accordions > .content-wrapper > .accordions > .accordion > .entries > .entry.has-description > .title {
    position: relative;
    cursor: pointer;
    
    font-size: 20px;
}
#accordions > .content-wrapper > .accordions > .accordion > .entries > .entry.has-description > .title:after {
    content: '';
    position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    display: block;
    
    background-color: #EEE;
    background-image: url("../../images/icons/open.svg");
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%
}
.loaded #accordions > .content-wrapper > .accordions > .accordion > .entries > .entry.has-description > .title:after {
    transition:
        transform       .2s ease-out,
        backgroun-color .2s ease-out;
}
#accordions > .content-wrapper > .accordions > .accordion > .entries > .entry.has-description.open > .title:after,
#accordions > .content-wrapper > .accordions > .accordion > .entries > .entry.has-description > .title:hover:after {
    transform: translateY(-50%) rotate(45deg);
    background-color: var(--main-color);
}
#accordions > .content-wrapper > .accordions > .accordion > .entries > .entry > .description {
    max-width: 700px;
    margin-top: 30px;
    
    line-height: 24px;
    font-size: 16px;
}

@media (min-width: 1100px) {
    #accordions > .content-wrapper > .title { font-size: 35px; }
    #accordions > .content-wrapper > .description { font-size: 30px; }
    #accordions > .content-wrapper > .accordions > .accordion > .title { font-size: 35px; }
    #accordions > .content-wrapper > .accordions > .accordion > .entries > .entry > .title { padding-right: 120px; }
    #accordions > .content-wrapper > .accordions > .accordion > .entries > .entry.has-description > .title:after {
        height: 80px; width: 80px;
        background-size: 40px auto;
    }
}
@media (max-width: 1099.99px) {
    #accordions > .content-wrapper > .title { font-size: 30px; }
    #accordions > .content-wrapper > .description { font-size: 25px; }
    #accordions > .content-wrapper > .accordions > .accordion > .title { font-size: 30px; }
    #accordions > .content-wrapper > .accordions > .accordion > .entries > .entry > .title { padding-right: 100px; }
    #accordions > .content-wrapper > .accordions > .accordion > .entries > .entry.has-description > .title:after {
        height: 60px; width: 60px;
        background-size: 30px auto;
    }
}

/*--------------------------------------------------------------------------------*/

#accordions > .content-wrapper > .accordions > .accordion > .cta-wrapper {
    margin-top: 50px;
    text-align: center;
}
#accordions > .content-wrapper > .accordions > .accordion > .cta-wrapper > .cta-link {
    font-weight: 700;
    cursor: pointer;
}