.tw-steps {
    margin: 1em 0
}

.tw-step-value {
    display: inline-block;
    width: 100%;
    background: #0097cd;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding-top: .2em;
    margin-bottom: 1em
}

.tw-step-content {
    background: #fff;
    color: #000;
    margin: .3em .3em .5em .3em;
    padding: .3em;
    height: 2.2em;
    font-size: 1.5em
}

@media only screen and (min-width:960px) {
    .tw-steps {
        display: flex;
        display: -webkit-flex;
        justify-content: space-around;
        margin: 1em 0
    }

    .tw-step-value {
        flex-wrap: nowrap;
        flex-wrap: -webkit-nowrap;
        width: 16%;
        height: 10.3em
    }

    .tw-step-content {
        height: 7.5em;
        font-size: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width:480px) {
    .tw-steps {
        margin: 1em 0
    }

    .tw-step-value {
        display: inline-block;
        width: 100%;
        background: #0097cd;
        color: #fff;
        font-weight: 700;
        text-align: center;
        padding-top: .2em;
        margin-bottom: 1em
    }

    .tw-step-content {
        background: #fff;
        color: #000;
        margin: .3em .3em .5em .3em;
        padding: .3em;
        height: 3.6em;
        font-size: 1.5em
    }
}

.tw-faq-container {
    margin-bottom: 1em;
    font-size: 1.1em;
    display: flex;
    justify-content: center
}

.tw-faq-container::before {
    display: inline-block;
    margin-right: .5em;
    content: '';
    background-size: 4em 4em;
    height: 4em;
    width: 4em;
    vertical-align: middle;
    background-image: url(../images/company/good.png)
}

.tw-faq-item {
    width: 70%
}

.tw-faq-answer,
.tw-faq-question {
    border: 2px solid silver;
    right: 0;
    padding: 0 1em
}

.tw-faq-question {
    border-radius: .6em .6em 0 0
}

.tw-faq-answer {
    border-radius: 0 0 .6em .6em;
    margin-top: -2px
}

@media only screen and (min-width:960px) {
    .tw-faq-container {
        font-size: 1.5em
    }
}

.card-img {
    padding: .5em;
    background-color: #0097cd;
    width: 10em;
    height: auto;
    float: left;
    margin-top: 2.5px
}

.card-info {
    margin-left: 11em;
    border: 2px solid silver;
    border-radius: .6em;
    height: 10em
}

.card-info .name {
    font-size: .9em;
    font-weight: 700;
    margin: 1em
}

.card-info .xp {
    font-size: .8em;
    margin: 1em
}

.br-telework {
    display: none
}

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

    .card-info .name,
    .card-info .xp {
        font-size: 1.1em;
        margin: 1.4em 1.5em
    }

    .br-telework {
        display: block
    }
}

@media only screen and (min-width:400px) and (max-width:960px) {

    .card-info .name,
    .card-info .xp {
        font-size: 1em
    }
}

.p-local-navigation-telework {
    list-style: none;
    margin-top: -4rem;
    margin-bottom: 6rem;
    background: #afdeef;
    background: -moz-linear-gradient(-45deg, #afdeef 0, #008cc9 100%);
    background: -webkit-linear-gradient(-45deg, #afdeef 0, #008cc9 100%);
    background: linear-gradient(135deg, #afdeef 0, #008cc9 100%);
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    border-radius: 4px;
    box-shadow: 0 0 30px -10px rgba(0, 0, 0, .2)
}

.p-local-navigation--telework .p-local-navigation__item,
.p-local-navigation--telework .p-local-navigation__separate-item {
    width: 25%
}

@media only screen and (min-width:1280px) {
    .p-local-navigation-telework {
        margin-top: -10rem;
        margin-bottom: 10rem
    }
}

@media only screen and (max-width:1279px) and (min-width:960px) {
    .p-local-navigation-telework {
        margin-top: -10rem;
        margin-bottom: 10rem
    }
}

@media only screen and (max-width:959px) {
    .p-local-navigation-telework {
        flex-wrap: wrap;
        flex-wrap: -webkit-wrap
    }

    .p-local-navigation--telework .p-local-navigation__item,
    .p-local-navigation--telework .p-local-navigation__separate-item {
        width: 100%
    }
}

.p-image-telework-full {
    width: 100%;
    margin: 2rem auto 0
}

.p-image-telework {
    width: 50%;
    margin: 2rem auto 0
}

@media only screen and (max-width:960px) and (min-width:559px) {
    .p-image-telework {
        width: 70%
    }
}

@media only screen and (max-width:560px) {
    .p-image-telework {
        width: 100%
    }
}