/** DESKTOP **/
@media (min-width: 960px) {

    #menu .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;    
    }

    #menu figure{    
        bottom: -2px;
        max-width: 10%;
    }

    #menu .zapTopo a { 
        display: table;
        border: none;        
        color: #fff;
        text-transform: uppercase;
        font-size: 0.9em;
        letter-spacing: 1px;
        text-align: center;
        margin: 0 auto;
        padding: 10px 40px 10px 20px;
    
        border-radius: 20px;
        background-color: var(--brand-green);
    
        background-image: url(../images/bt-zap.png);
        background-repeat: no-repeat;
        background-position: 140px center;
        background-size: 20px;        
    }    

    #menu { margin-top: 5px; }

    

    /** BANNER ATENDIMENTO ZAP **/
    #banner .banner-infos .cta {
        padding: 10px 60px 10px 20px;    
        background-position: 190px center;
        min-width: 240px;
    }

    #diferenciais .cta-zap a {
        min-width: 190px;
        padding: 1% 0;
        margin: 20px auto 0 auto;
        background-position: 150px center;
        padding-right: 20px;
    }    

    /** DEPOIMENTOS **/
    #depoimentos .grid_item p {        
        padding: 0 4%;
    }

}

@media (min-width: 1024px) and (max-width: 1279px) {

    /** REUSABLE CSS **/
    .dobra{
        padding: 40px 0;
    }

    .dobra header{
        margin-bottom: 40px;
    }

    .dobra header h2{
        font-size: 2.2em;
    }

    /* GRID */
    .grid_item:not(:first-child),
    .grid_item:not(:nth-child(2)),
    .grid_item:not(:nth-child(3)){
        margin-top: 40px;
    }

    /** LP TOPO **/
    #topo #contato-wrapper,
    #topo #address-wrapper{
        width: 50%;
        text-align: unset;
    }

    #topo #contato-wrapper{margin-bottom: 0}

    #topo #address-wrapper p{
        font-size: .9em;
        text-align: right
    }

    /** MENU **/
    #menu { top: 48px }

    #menu figure { bottom: -2px; }

    #menu .menu-list li:not(:last-child)::after{
        content: '.';
        color: black;
        margin: 0 10px;
    }

    #menu .menu-list li a { font-size: .8em; }

    /** BANNER **/
    #banner .banner-item:first-child { 
        background-image: url(../images/banner-pilates.jpg);         
    }

    #banner .banner-infos { position: static !important; min-height: 400px; }

    /* CAROUSEL */
    .carousel{
        position: relative !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .owl-nav{
        display: flex;
        padding: 0 3%;
        position: absolute;
        width: 100%;
        justify-content: space-between;
    }

    .arrow{
        display: block;
        width: 40px;
        height: 40px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .arrow-left{
        background-image: url(../images/arrow-left.png)
    }

    .arrow-right{
        background-image: url(../images/arrow-right.png)
    }

    .arrow-left-green{
        background-image: url(../images/arrow-green.png)
    }

    .arrow-right-green{
        background-image: url(../images/arrow-green.png)
    }

    /* Galeria */
    #galeria .arrow-right,
    #galeria .arrow-left{
        background-image: url(../images/arrow-green.png)
    }

    #galeria .arrow-left{
        transform: rotate(-90deg)
    }

    #galeria .arrow-right{
        transform: rotate(90deg)
    }

    /** FAQ **/
    .pergunta { padding: 5px 35px; }

    /** CONTATO **/
    #rodape .formulario { 
        max-width: 600px; 
        margin:  0 auto;        
    }

    #rodape .form-radio {        
        display: table;
        margin: 0 auto;        
    }

        #rodape .form-radio p {
            display: block;
            font-size: 1.3em;
            text-align: center;
        }

        #rodape .form-radio input[type=radio] + label {            
            background-position: 0 2px;
            margin: 15px 20px 0 0;            
        }

        #rodape .form-radio input[type=radio]:checked + label { background-position:0 -27px; }


    #rodape .radio-flex {
        display: flex;
        justify-content: space-around;
        max-width: 70%;
        margin: 0 auto;
    }

    #rodape .ipt-submit {
        margin: 40px auto;
    }

        /** DIFERENCIAIS **/
        #diferenciais .grid {
            flex-direction: row;
            justify-content: space-around;         
        }

        #diferenciais .grid .grid_item { width: 30%; }    


}


@media (min-width: 1280px) {
    
    /** REUSABLE CSS **/
    .dobra{
        padding: 40px 0;
    }

    .dobra header{
        margin-bottom: 40px;
    }

    .dobra header h2{
        font-size: 2.2em;
    }

    .first-section{
        /* margin-top: 127px */
    }

    /* GRID */
    .grid_item:not(:first-child),
    .grid_item:not(:nth-child(2)),
    .grid_item:not(:nth-child(3)){
        margin-top: 40px;
    }

    /** LP TOPO **/
    #topo #contato-wrapper,
    #topo #address-wrapper{
        width: 50%;
        text-align: unset;
    }

    #topo #contato-wrapper{margin-bottom: 0}

    #topo #address-wrapper p{
        font-size: .9em;
        text-align: right
    }

    /** MENU **/
    #menu {
        top: 48px
    }

    #menu figure { bottom: -2px; }

    #menu .menu-list li:not(:last-child)::after{
        content: '.';
        color: black;
        margin: 0 10px;
    }

    #menu .menu-list li a { font-size: .9em; }

    /** BANNER **/
    #banner .banner-item:first-child { 
        background-image: url(../images/banner-pilates.jpg);         
    }

    #banner .banner-infos { position: static !important; min-height: 400px; }

    .banner-infos .cta {
        max-width: 300px;
        font-size: 1em;
        margin-top: 50px
    }

    


    /* CAROUSEL */
    .carousel{
        position: relative !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .owl-nav{
        display: flex;
        padding: 0 3%;
        position: absolute;
        width: 100%;
        justify-content: space-between;
    }

    .arrow{
        display: block;
        width: 40px;
        height: 40px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .arrow-left{
        background-image: url(../images/arrow-left.png)
    }

    .arrow-right{
        background-image: url(../images/arrow-right.png)
    }

    .arrow-left-green{
        background-image: url(../images/arrow-green.png)
    }

    .arrow-right-green{
        background-image: url(../images/arrow-green.png)
    }

    /* Galeria */
    #galeria .arrow-right,
    #galeria .arrow-left{
        background-image: url(../images/arrow-green.png)
    }

    #galeria .arrow-left{
        transform: rotate(-90deg)
    }

    #galeria .arrow-right{
        transform: rotate(90deg)
    }

    /** FAQ **/
    .pergunta { padding: 5px 35px; }

    /** CONTATO **/
    #rodape .formulario { 
        max-width: 600px; 
        margin:  0 auto;        
    }

    #rodape .form-radio {        
        display: table;
        margin: 0 auto;        
    }

        #rodape .form-radio p {
            display: block;
            font-size: 1.3em;
            text-align: center;
        }

        #rodape .form-radio input[type=radio] + label {            
            background-position: 0 2px;
            margin: 15px 20px 0 0;            
        }

        #rodape .form-radio input[type=radio]:checked + label { background-position:0 -27px; }


    #rodape .radio-flex {
        display: flex;
        justify-content: space-around;
        max-width: 70%;
        margin: 0 auto;
    }

    #rodape .ipt-submit {
        margin: 40px auto;
    }

        /** DIFERENCIAIS **/
        #diferenciais .grid {
            flex-direction: row;
            justify-content: space-around;         
        }

        #diferenciais .grid .grid_item { width: 30%; }
}