@import url('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css');

/*** page inicio **************************************************************
 ******************************************************************************/

    /*** base ***/
    .page-inicio:after {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        content: '';
        display: block;
        position: fixed;

        background: url(/homologacao/wp-content/themes/salvaguarda-da-capoeira/images/page-inicio-bg.jpg);
        background-size: cover;
        background-position: center right;
    }

    .page-inicio section {
        z-index: 2;
        position: relative;
    }

    /*** banner ***/
    .page-inicio .banner {
        position: relative;
        background: #000000;
    }

    .page-inicio .banner,
    .page-inicio .banner .item,
    .page-inicio .banner .item .container {
        height: 100vh;
    }

    .page-inicio .banner .item {
        position: relative;
        background-size: cover;
        background-position: center;
    }

    .page-inicio .banner .item:after {
        z-index: 1;

        left: 0;
        right: 0;
        bottom: 0;
        height: 60rem;

        content: '';
        display: block;
        position: absolute;

        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    }

    .page-inicio .banner .item .container {
        padding-bottom: 20rem;
    }

    .page-inicio .banner .item .container p,
    .page-inicio .banner .item .container strong,
    .page-inicio .banner .item .container .legend,
    .page-inicio .banner .item .container .button {
        z-index: 2;
        position: relative;
    }

    .page-inicio .banner .item .container p,
    .page-inicio .banner .item .container strong {
        color: #f5f2ed;
    }

    .page-inicio .banner .item .container p {
        font-size: 2.4rem;
        font-weight: 400;
        line-height: 2.6rem;
    }

    .page-inicio .banner .item .container strong {
        font-size: 8.0rem;
        font-weight: 700;
        line-height: 8.0rem;
    }

    .page-inicio .banner .item .container .legend {
        color: #ffffff;

        right: 6rem;
        bottom: 6rem;
        opacity: 0.4;

        font-size: 1.6rem;
        line-height: 2.0rem;

        position: absolute;
    }

    .page-inicio .banner .item .container .legend .for-display {
        font-size: 3rem;
        line-height: 3rem;
        margin-right: 2rem;
    }

    .page-inicio .banner .item .container .legend .font-base:first-child {
        font-size: 1.8rem;
        font-weight: 700;
    }

    .page-inicio .banner .item .container .legend .font-base:last-child {
        font-style: italic;
    }

    .page-inicio .banner .item .container .button {
        margin: 4.6rem 0 0;
    }

    .page-inicio .banner .owl-dots {
        z-index: 2;

        top: 50%;
        left: 50%;

        position: absolute;
        transform: translate(-50%,-50%);
    }

    .page-inicio .banner .owl-dots .owl-dot {
        opacity: 0.5;

        float: right;
        clear: both;
        display: block;

        width: 1.6rem;
        height: 1.6rem;
        margin: 0.8rem 0;

        border-radius: 50%;
        background-color: #ffffff;

        transition: 0.3s ease;
    }

    .page-inicio .banner .owl-dots .owl-dot.active {
        opacity: 1;
    }

    /*** rotas ***/
    .page-inicio .rotas {
        padding: 11rem 0 24rem;
        background: linear-gradient(0deg, rgba(40,18,14,1) 0%, rgba(0,0,0,1) 100%);
    }

    .page-inicio .rotas .hat {
        color: #d68038;

        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.0rem;

        letter-spacing: 0.1rem;
        text-transform: uppercase;

        margin-bottom: 1rem;
    }

    .page-inicio .rotas .title {
        color: #f5f2ed;
        font-size: 4.3rem;
        font-weight: 700;
        line-height: 4.8rem;
    }

    .page-inicio .rotas .nav {
        width: 6.2rem;
        height: 6.2rem;
        padding: 0;

        font-size: 2.6rem;
        line-height: 2.6rem;
        border-radius: 50%;

        margin-left: 1.4rem;
    }

    .page-inicio .rotas .owl-carousel-wrapper {
        overflow: hidden;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel {
        width: 200%;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item {
        display: block;
        overflow: hidden;
        position: relative;

        height: 56rem;
        margin: 4rem 0;

        background-size: cover;
        background-position: center;

        border-radius: 2rem;
        box-shadow: 0 0.2rem 0.2rem rgba(0,0,0, 0.1);
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item:after {
        z-index: 1;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        content: '';
        display: block;
        position: absolute;

        background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .tag {
        color: #ffffff;

        font-size: 1.8rem;
        font-weight: 700;
        line-height: 4.0rem;

        padding: 0 1.6rem;
        border-radius: 2rem;

        top: 5rem;
        left: 5rem;
        position: absolute;

        background: #b4362c;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .info {
        left: 5rem;
        right: 5rem;
        bottom: 5rem;

        z-index: 2;
        position: absolute;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .title {
        color: #f5f2ed;

        font-size: 2.8rem;
        font-weight: 700;
        line-height: 3.0rem;

        width: 60%;
        margin: 0 0 2rem;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .text {
        color: #ffffff;

        font-size: 1.8rem;
        font-weight: 400;
        line-height: 2.0rem;
        font-style: italic;

        width: 80%;
        margin: 0 0 2rem;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .details {
        color: #f5f2ed;

        font-size: 1.8rem;
        font-weight: 400;
        line-height: 3.0rem;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .details span {
        margin-right: 2rem;
    }

    .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .details span .for-display {
        font-size: 2.6rem;
        margin-right: 1rem;
    }

    /*** rodas ***/
    .page-inicio .rodas {
        z-index: 3;
        position: relative;
        background: #f5f2ed;
    }

    .page-inicio .rodas .container {
        height: 18rem;
        position: relative;
    }

    .page-inicio .rodas .container form {
        left: 30px;
        right: 30px;
        bottom: 0px;
        padding: 4.6rem 4.6rem calc(4.6rem + 2.6rem);
        position: absolute;

        box-shadow: 0 1rem 1.7rem rgba(41,18,14,0.1);
        border-radius: 2rem;

        background: #ffffff;
    }

    .page-inicio .rodas .container form .hat {
        color: #d68038;

        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.0rem;

        letter-spacing: 0.1rem;
        text-transform: uppercase;

        margin-bottom: 1rem;
    }

    .page-inicio .rodas .container form .title {
        color: #623f2f;
        font-size: 4.3rem;
        font-weight: 700;
        line-height: 4.8rem;
    }

    .page-inicio .rodas .container form .field-group {
        position: relative;

        margin-top: 5.8rem;
        margin-right: 6.0rem;

        border: #b3b3b3 1px solid;
        border-radius: 1rem;
    }

    .page-inicio .rodas .container form .field-group .note {
        color: #b3b3b3;

        right: 0rem;
        bottom: -2.6rem;

        font-size: 1.6rem;
        line-height: 1.6rem;
        font-weight: 400;
        font-style: italic;

        position: absolute;
    }

    .page-inicio .rodas .container form .field-group .field {
        position: relative;
    }

    .page-inicio .rodas .container form .field-group .field label {
        color: #666666;

        top: -2.8rem;
        left: 0rem;

        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.8rem;

        position: absolute;
    }

    .page-inicio .rodas .container form .field-group .field select {
        color: #b3b3b3;

        font-size: 1.8rem;
        font-weight: 400;
        line-height: 6.0rem;
        font-style: italic;

        width: 100%;
        padding: 0 1.6rem;

        border: 0;
        border-right: #b3b3b3 1px solid;
        border-radius: 0;
    }

    .page-inicio .rodas .container form .field-group .field:nth-child(1),
    .page-inicio .rodas .container form .field-group .field:nth-child(2) {
        flex-basis: 28%;
    }

    .page-inicio .rodas .container form .field-group .field:nth-child(4) select {
        border-right: 0;
    }

    /*** loja ***/
    .page-inicio .loja {
        padding: 10rem 0;
        background: #f5f2ed;
    }

    .page-inicio .loja .hat {
        color: #d68038;

        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.0rem;

        letter-spacing: 0.1rem;
        text-transform: uppercase;

        margin-bottom: 1rem;
    }

    .page-inicio .loja .title {
        color: #623f2f;
        font-size: 4.3rem;
        font-weight: 700;
        line-height: 4.8rem;
    }

    /*** grupos ***/
    .page-inicio .grupos {
        padding: 10rem 0;
        background: #ffffff;
    }

    .page-inicio .grupos .hat {
        color: #d68038;

        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.0rem;

        letter-spacing: 0.1rem;
        text-align: center;
        text-transform: uppercase;

        margin-bottom: 1rem;
    }

    .page-inicio .grupos .title {
        color: #623f2f;
        font-size: 4.3rem;
        font-weight: 700;
        line-height: 4.8rem;
        text-align: center;
    }

    .page-inicio .grupos .text {
        color: #666666;

        font-size: 1.8rem;
        font-weight: 400;
        line-height: 2.0rem;
        font-style: italic;

        margin: 2.6rem auto 0;
        padding: 0 30px;
        max-width: 720px;
    }

    .page-inicio .grupos .owl-carousel .item {
        display: block;

        width: 22rem;
        height: 22rem;
        margin: 3rem 0;

        border: 1px solid #eaeaea;
        border-radius: 2rem;

        filter: grayscale(1);
        transform: scale(0.85);

        background: #ffffff;
        box-shadow: 0 1rem 1rem rgba(0,0,0, 0.05);
    }

    .page-inicio .grupos .owl-carousel .item img {
        margin: 8%;

        width: 84%;
        height: 84%;

        object-fit: contain;
        object-position: center;
    }

    .page-inicio .grupos .btns a {
        margin: 0 1.5rem;
    }

    /*** cursos ***/
    .page-inicio .cursos {
        padding: 19rem 0;
    }

    .page-inicio .cursos .hat {
        color: #d68038;

        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.0rem;

        letter-spacing: 0.1rem;
        text-transform: uppercase;

        margin-bottom: 1rem;
    }

    .page-inicio .cursos .title {
        color: #f5f2ed;
        font-size: 4.3rem;
        font-weight: 700;
        line-height: 4.8rem;
    }

    .page-inicio .cursos .text {
        color: #f5f2ed;

        font-size: 1.8rem;
        font-weight: 400;
        line-height: 2.4rem;

        max-width: 48%;
        margin: 2rem 0 4.8rem;
    }

    .page-inicio .cursos .btn {
        display: inline-block;
    }

    /*** sobre ***/
    .page-inicio .sobre {
        padding: 20rem 0;
        background: url(/homologacao/wp-content/themes/salvaguarda-da-capoeira/images/page-inicio-sobre-bg.jpg);
        background-size: cover;
        background-position: center;
    }

    .page-inicio .sobre .hat {
        color: #d68038;

        font-size: 1.6rem;
        font-weight: 400;
        line-height: 2.0rem;

        letter-spacing: 0.1rem;
        text-align: right;
        text-transform: uppercase;

        margin-bottom: 1rem;
    }

    .page-inicio .sobre .title {
        color: #f5f2ed;
        font-size: 4.3rem;
        font-weight: 700;
        line-height: 4.8rem;
        text-align: right;
    }

    .page-inicio .sobre .text {
        color: #f5f2ed;

        font-size: 1.8rem;
        font-weight: 400;
        line-height: 2.4rem;

        max-width: 48%;
        margin: 2rem 0 4.8rem;

        text-align: right;
    }

    .page-inicio .sobre .btn {
        display: inline-block;
    }


    /*** hovers ***/
    @media (min-width: 992px) {

        .page-inicio .banner .item .container .legend,
        .page-inicio .grupos .owl-carousel .item {
            transition: 0.3s ease;
        }

        .page-inicio .banner .item .container .legend:hover {
            opacity: 1;
        }

        .page-inicio .grupos .owl-carousel .item:hover {
            filter: grayscale(0);
            transform: scale(1);
        }

    }

    @media (max-width: 767px) {
        .page-inicio .banner, .page-inicio .banner .item,
        .page-inicio .banner .item .container {
            height: 100vh;
            max-height: 70rem;
        }

        .page-inicio .banner .item .container .legend {
            right: 2rem;
            bottom: 0rem;
        }

        .page-inicio .banner .item .container {
            padding-bottom: 10rem;
        }

        .page-inicio .banner .item .container p {
            font-size: 1.8rem;
            font-weight: 400;
            line-height: 2.8rem;
        }

        .page-inicio .banner .item .container .button {
            margin: 2.6rem 0 0;
        }

        .page-inicio .banner .item .container strong {
            font-size: 5rem;
            font-weight: 700;
            line-height: 5rem;
        }

        .page-inicio section .flex {
            flex-wrap: wrap;
        }

        .page-inicio section .flex > * {
            max-width: 100%;
        }

        .page-inicio .rotas .title,
        .page-inicio .rodas .container form .title,
        .page-inicio .loja .title,
        .page-inicio .grupos .title {
            font-size: 3.3rem;
            line-height: 3.8rem;
        }

        .page-inicio .rotas {
            padding: 11rem 0 14rem;
        }

        .page-inicio .rotas .nav.nav-prev {
            margin: 1rem auto 0 0;
        }

        .page-inicio .rotas .nav.nav-next {
            margin: 1rem 0 0 1rem;
        }

        .page-inicio .rotas .owl-carousel-wrapper .owl-carousel {
            width: 100%;
        }

        .page-inicio .rodas .container {
            height: auto;
        }

        .page-inicio .rodas .container form {
            top: -10rem;
            left: auto;
            right: auto;
            position: relative;
        }

        .page-inicio .loja {
            padding-top: 0;
        }

        .page-inicio .loja .button.large {
            margin-top: 2rem;
        }

        .page-inicio .cursos .text,
        .page-inicio .sobre .text {
            max-width: 100%;
        }

        .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .info {
            left: 2rem;
            right: 2rem;
            bottom: 2rem;
        }

        .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .title,
        .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .text,
        .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .details span.flex {
            width: 100%;
            margin: 1rem 0 0;
        }

        .page-inicio .rotas .owl-carousel-wrapper .owl-carousel .item .details {
            margin: 1rem 0 0;
        }

        .page-inicio .rodas .container form {
            padding: 4.6rem 3.6rem calc(4.6rem + 2.6rem);
        }

        .page-inicio .rodas .container form .field-group .field {
            width: 100% !important;
            flex-basis: 100% !important;
        }

        .page-inicio .rodas .container form .field-group .field select {
            border: 0;
            border-bottom: #b3b3b3 1px solid;
        }

        .page-inicio .rodas .container form .field-group .field:nth-child(4) select {
            border: 0;
        }

        .page-inicio .rodas .button.large {
            width: 100% !important;
            margin: 6rem 0 0;
        }

        .page-inicio .rodas .container form .field-group .field label {
            top: 1.8rem;
            left: 1.6rem;
            -webkit-pointer-events: none;
                    pointer-events: none;
        }

        .page-inicio .rodas .container form .field-group .field select {
            padding-top: 2.4rem;
        }

        .page-inicio .grupos .btns .button:first-child {
            margin-bottom: 1rem;
        }
    }







    .woocommerce ul.products {
        display: flex;
        flex-wrap: wrap;
        margin-top: 5rem;
    }

    .woocommerce ul.products li.product {
        margin-bottom: 4rem;
        padding-bottom: 9rem;

        overflow: hidden;
        position: relative;

        background: #ffffff;
        box-shadow: 0rem 1.0rem 3.6rem rgba(0,0,0, 0.2);

        border-radius: 2rem;
    }

    .woocommerce ul.products li.product h2.woocommerce-loop-product__title {
        color: #623f2f;

        font-size: 2.2rem;
        font-weight: 700;
        line-height: 2.4rem;

        margin: 2.2rem 0 0;
        padding: 0 3rem;

        text-align: center;
    }

    .woocommerce ul.products li.product .price {
        color: #d68038;
        margin: 1rem 3rem 0;

        font-size: 22px;
        font-weight: 700;
        line-height: 2.2rem;

        text-align: center;
    }

    .woocommerce ul.products li.product .button {
        left: 50%;
        bottom: 2.8rem;

        display: flex;
        position: absolute;

        white-space: nowrap;
        align-items: center;
        justify-content: center;

        transform: translateX(-50%);
    }

    .woocommerce ul.products li.product .button .icon-bag {
        margin-right: 1rem;
    }
    @media (max-width: 768px) {

        .woocommerce ul.products[class*=columns-] li.product:nth-child(2n) {
            margin-left: auto;
        }

    }

    @media (max-width: 546px) {

        .woocommerce ul.products li.product {
            width: 100% !important;
        }

    }