/*
    Taxonomy Style
*/

section.header {
    display: block;
    margin-top: 70px;
    background-image: url("/wp-content/themes/angelsense/images/help-center/helpBG.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 50px calc((100% - 1200px)/ 2);
    height: 370px;
    position: relative;
}

section.header div.title {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 460px;
}

section.header div.title h1 {
    font-size: 40px;
    font-weight: 500;
    color: #32b4a6;
    line-height: 1.2;
}

section.header div.title > h2 {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
    margin: 0.8em 0em 0em 0em;
    color: #0f0f0f;
}

a#back {
    font-size: 20px;
    padding-bottom: 1em;
    outline: 0;
    visibility: visible;
    opacity: 1;
    color: #3abeb0;
    font-weight: 700;
    display: inline-block;
}

a#back.show {
    visibility: visible;
    opacity: 1;
}

a#back span.arrow {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display: inline-block;
    position: relative;
    top: 4px;
}

section.content {
    padding: 50px calc((100% - 1200px)/ 2);
}

section.content h1 {
    font-size: 40px;
    color: #3abeb0;
    border-top: 1px solid #e7e7e9;
}

section.content > div div.subtopics {
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}

section.content > div div.subtopics div {
    margin-top: 1em;
}

section.content div.subtopics div > h2 {
    display: block;
    padding: 0.6em 0.5em;
    font-size: 20px;
    font-weight: 400;
    outline: 0;
    position: relative;
    transition: all 0.3s;
    border-top: 1px solid #E6E6E6;
    background-color: #3abeb0;
    color: #fff;
}

section.content div.subtopics div ul.articles {
    margin-top: 1em;
    padding-left: 1.5em;
}

section.content div.subtopics div ul.articles li a {
    display: inline-block;
    color: #3abeb0;
    font-weight: 700;
    padding: 0.5em 0em;
}

section.content div.subtopics div.description {
    margin: 0.5em 0em;
    color: #292929;
    padding-left: 0.5em;
}

section.content div.subtopics div.description p {
    margin: 0.5em 0em;
}


@media only screen and (max-width: 767px) {
    section.header {
        margin-top: 50px;
        background-image: url("/wp-content/themes/angelsense/images/help-center/helpMobileHeader.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
        height: calc(60vw * (784/640));
        color: rgb(255, 255, 255);
        position: relative;
    }

    section.header div.title {
        position: absolute;
        padding: 0 1em;
        bottom: 1.5em;
        top: auto;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 100%;
        text-align: center;
    }

    section.header div.title h1 {
        font-size: 30px;
        font-weight: 500;
        color: #32b4a6;
        line-height: 1.2;
        text-transform: capitalize;
    }

    section.header div.title h2  {
        font-weight: 400;
        font-size: 18px;
        line-height: 1.3;
        margin: 0.5em 0em 0em 0em;
        color: rgb(15, 15, 15);
        text-transform: capitalize;
    }

    section.content {
        padding: 1em;
    }
}