﻿/*-------------------CSS SIN MEDI/*-------------------CSS SIN MEDIA QUERY --------------------------------*/

.ResponsiveCstm4 img{
    margin-left: auto;
}

.Cstm4{ /*Boton contacto en footer*/
    margin-left:26%
}

.Cstm5{ /*Boton Blog en footer*/
    margin-left:20%
}

.ResponsiveCstm2{
    min-width: 280px;
    text-align:center;
    
}

.ResponsiveCstm2 span{
    margin-left :0px;
}

#div0{
    margin-left: 0% !important;
}

#btnRegistrarse, #btnIniciarSesion, #btnRegistrate2, #btnIniciarSesion2, #ConvierteteVendedor, #colectoresParticipantes, #btnIniciarSesion3, #btnRegistrate3, #VerMasTestimoniales{
    border-radius: 12px 12px 12px 12px;
    -moz-border-radius: 12px 12px 12px 12px;
    -webkit-border-radius: 12px 12px 12px 12px;
}

/*-----------------------------------------------------------------------------
    --------------------------INICIO DE MEDIA QUERY---------------------------
*/

@media (device-width: 768px ) and (device-height: 1024px ){ /*---------- ESTO ES PARA EL LOGO DEL FOOTER y los botones de INICIO PREGUNTAS FRECUENTES ETC
                                                                Nótese que especifíca la resolución de un dispositivo (768px * 1024px) y no abarca un rango
                                                            */
    .ResponsiveCstm1{
        margin-left: 75%;
    }
    .Cstm1 {
    margin-left: 30%;
    
    }

    .Cstm2 {
        margin-left: 24.5%;
    }

    .Cstm3 {
        margin-left: 19.75%;
    }


}


@media (device-width: 1024px ) and (device-height: 768px ) and (orientation: landscape){ /* Dipositivo iPad */

    .ResponsiveCstm3{ /*Sección footer, color negro abarque todo el footer*/
        height: 300px;
        min-height: 300px; 
        /*min-height: 100%;*/
    }
    
}

@media (device-width: 1024px ) and (device-height: 1366px ) and (orientation: portrait) { /* Dispositivo iPad Pro*/

    .ResponsiveCstm3{ /*Sección footer, color negro abarque todo el footer*/
        min-height: 280px;
    }

    #ResponsiveCstm7{
        width: 400px;
    }
}

/* -------- ESTO EN FOOTER CENTRA LOS BOTONES INICIO PREGUNTAS FRECUENTES ETC A LAS RESOLUCIONES DE 320px de ancho a 450px de ancho---------------------------------------*/
@media (min-width: 320px) and (max-width: 450px) {

    .ResponsiveCstm4{ /* logos appstore y googleplay */
        width: 210px;
    }

    .ResponsiveCstm5 ul{ /* ul */
    width: 250px;
    padding-left: 0px;
    }
}

/*--------------------------------------------------------------------------------------------------------
         ------ CENTRAR LOGOS DE APPSTORE Y PLAYSTORE Y BOTONES ¨POSTERIORES EN FOOTER-------------
    -----------------------------------------------------------------------------------------------------*/

@media (min-width: 568px ) and (max-width: 760px ) and (orientation: landscape){
    .ResponsiveCstm4{
        margin-left: -158px;
    }
}

@media (device-width: 667px ) and (orientation: landscape){
    .ResponsiveCstm4{
        margin-left: -110px;
    }

    .ResponsiveCstm1 img{
        margin-left: 60px;
    }


}

@media (min-width: 320px) and (max-width: 768px) and (orientation: landscape){ /*---- en Footer, contactenos centrado para vision landscape en resoluciones del ancho expuesto ---*/
    #ResponsiveCstm6{
        margin-left: 20%;
        margin-right: 20%;
    }
}

@media (device-width: 768px ) and (orientation: portrait){
    .ResponsiveCstm4{
        margin-left: 12%;
        margin-right: 28%;
    }

    #ResponsiveCstm6{
        margin-left: 28%;
    }

        #Cstm6 li{
    margin-left: 40%;
}
}

@media (min-width: 320px){
    #ResponsiveCstm8{
        left: -45px;
    }
}

@media (min-height: 1024px) and (orientation: landscape) {
    #ResponsiveCstm9{
      padding-top: 5%;
        padding-bottom: 10%;
    }

    #ResponsiveCstm12{ /*Para paginas RessendEmail y ForgotPassword*/
      padding-top: 5%;
        padding-bottom: 10%;
    }

    .ResponsiveCstm2 span{
        margin-right: 30px;
    }

}

@media (min-height: 1366px) and (orientation: portrait) {
    #ResponsiveCstm9{ /*para pagina en contacto*/
      padding-top: 15%;
      padding-bottom: 25%;
    }

    #ResponsiveCstm10{
        padding-top: 10%;
    }

    #ResponsiveCstm11{
        padding-top: 0%;
        padding-bottom: 33%;
    }

    #ResponsiveCstm12{ /*Para paginas RessendEmail y ForgotPassword*/
    padding-top: 17%;
    padding-bottom: 27%;

    } 

    .LiCstm4{
        margin-left: 25.5%;
    }
}

@media (min-width: 320px) and (max-width: 960px){
    
    #ResponsiveCstm12{
    width: 65%; 
    margin-left: auto; 
    margin-right: auto;
 }   
}

@media (min-width: 1000px) and (orientation: landscape){

    .LiCstm4{
        margin-left: 25.5%;
    }
}



@media (min-width: 1000px) {

    .ResponsiveCstm13{
        padding: 6.3% 0%;
        background-image: url(../images/FondoYVR.png);
    }


}
@media (min-width: 320px) and (max-width: 720px){
    #ResponsiveCstm16{
        margin-right: 18px;
    }

    #div0{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    #div1{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    #div2{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    #div3{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

     /*#div0{
        float: left;
        padding-bottom: 1%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
    }

    #div1{
        float: left;
        padding-bottom: 1%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
    }

    #div2{
        float: left;
        padding-bottom: 1%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
    }

    #div3{
        float: left;
        padding-bottom: 1%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 1%;
    }*/

    .ResponsiveCstm17{
        margin-top: 40px;
    }

    #ResponsiveCstm18{
        margin-left: auto;
        margin-right: auto;
    }

     #ResponsiveCstm19, #ResponsiveCstm25{
        margin-left: auto;
        margin-right: auto;
    }

}

@media (min-width: 721px) and (max-width: 1000px){
    
    #div0{
        float: left;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
    }

    #div1{
        float: left;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
    }

    #div2{
        float: left;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
    }

    #div3{
        float: left;
        padding-bottom: 5%;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 5%;
    }

        #ResponsiveCstm18{
        margin-left: auto;
        margin-right: auto;
    }

     #ResponsiveCstm19, #ResponsiveCstm20, #ResponsiveCstm21, #ResponsiveCstm22, #ResponsiveCstm23, #ResponsiveCstm24, #ResponsiveCstm25, #ResponsiveCstm26 {
        margin-left: auto;
        margin-right: auto;
    }
     
     #ResponsiveCstm27, #ResponsiveCstm26{
         margin-right: auto;
     }
}

@media (device-width: 768px) and (device-height: 1024px){
     #div0{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    #div1{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    #div2{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    #div3{
        float: left;
        padding-bottom: 10%;
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 10%;
    }

    #ResponsiveCstm19, #ResponsiveCstm20, #ResponsiveCstm21, #ResponsiveCstm22, #ResponsiveCstm23, #ResponsiveCstm24, #ResponsiveCstm25, #ResponsiveCstm26 {
        margin-left: auto;
        margin-right: auto;
    }
     
     #ResponsiveCstm27, #ResponsiveCstm26{
         margin-right: auto;
     }
}

/*ESTILOS INGRESADOS PARA COLORES DE REDES SOCIALES EN EL FOOTER INTERNO*/
    .social-icon.social-facebook > .back {
        background: #3B5998;
    }

    .social-icon.social-twitter > .back {
        background: #55ACEE;
    }

    .social-icon.social-github > .back {
        background: #f3f3f3;
        color: #000;
    }

    .social-icon.social-snapchat > .back {
        background: #FFFC00;
    }

    .social-icon.social-instagram > .back {
        background: #8e44ad;
    }

    .social-icon.social-skype > .back {
        background: #12A5F4;
    }

    .social-icon.social-linkedin > .back {
        background: #4875B4;
    }

    .social-icon.social-dribbble > .back {
        background: #ea4c89;
    }

    .social-icon.social-youtube > .back {
        background: #c4302b;
    }

    /*===========RESPONSIVE DE PANEL RECARGA===========*/
    @media screen and (max-width: 1001px){

        #div0{
            margin-left: 25.33% !important;
        }
    }

   @media screen and (max-width: 880px){

        #div0{
            margin-left: 22% !important;
            float: left;
            padding-bottom: 5%;
            padding-left: 5%;
            padding-right: 6%;
            padding-top: 5%;
        }

        #div1 {
            float: left;
            padding-bottom: 5%;
            padding-left: 6%;
            padding-right: 6%;
            padding-top: 5%;
        }

        #div2 {
            float: left;
            padding-bottom: 5%;
            padding-left: 6%;
            padding-right: 6%;
            padding-top: 5%;
        }

        #div3 {
            float: left;
            padding-bottom: 5%;
            padding-left: 6%;
            padding-right: 6%;
            padding-top: 5%;
        }

        #div4 {
            float: left;
            padding-bottom: 5%;
            padding-left: 6%;
            padding-right: 5%;
            padding-top: 5%;
        }
    }


@media screen and (max-width: 767px) {

    #div0 {
        margin-left: 10.5% !important;
    }
}

@media screen and (max-width: 644px) {

    #div0 {
        margin-left: 5.5% !important;
    }
}

@media screen and (max-width: 585px) {

            #div0{
            margin-left: 12.50% !important;
            float: left;
            padding-bottom: 5%;
            padding-left: 5%;
            padding-right: 3%;
            padding-top: 5%;
        }

        #div1 {
            float: left;
            padding-bottom: 5%;
            padding-left: 3%;
            padding-right: 3%;
            padding-top: 5%;
        }

        #div2 {
            float: left;
            padding-bottom: 5%;
            padding-left: 3%;
            padding-right: 3%;
            padding-top: 5%;
        }

        #div3 {
            float: left;
            padding-bottom: 5%;
            padding-left: 3%;
            padding-right: 6%;
            padding-top: 5%;
        }

        #div4 {
            float: left;
            padding-bottom: 5%;
            padding-left: 6%;
            padding-right: 5%;
            padding-top: 5%;
        }
}

@media screen and (max-width: 490px) {

        #div0{
            margin-left: 12.50% !important;
            float: left;
            padding-bottom: 5%;
            padding-left: 5%;
            padding-right: 1.5%;
            padding-top: 5%;
        }

        #div1 {
            float: left;
            padding-bottom: 5%;
            padding-left: 1.5%;
            padding-right: 1.5%;
            padding-top: 5%;
        }

        #div2 {
            float: left;
            padding-bottom: 5%;
            padding-left: 1.5%;
            padding-right: 1.5%;
            padding-top: 5%;
        }

        #div3 {
            float: left;
            padding-bottom: 5%;
            padding-left: 1.5%;
            padding-right: 5%;
            padding-top: 5%;
        }

}

@media screen and (max-width: 430px) {

    #div0 {
        margin-left: 6% !important;
    }
}

@media screen and (max-width: 399px) {

    #div0 {
        margin-left: 0% !important;
    }
}

@media screen and (max-width: 376px) {

    #div0 {
        margin-left: 18% !important;
    }

    #div1 {
        float: left;
        padding-bottom: 5%;
        padding-left: 9%;
        padding-right: 25%;
        padding-top: 5%;
    }

    /*#div2{
        margin-left: 22% !important;
    }*/

    #div3 {
        float: left;
        padding-bottom: 5%;
        padding-left: 9%;
        padding-right: 25%;
        padding-top: 5%;
    }
}

@media screen and (max-width: 372px) {

    #div0 {
        margin-left: 24% !important;
    }

        #div1 {
        float: left;
        padding-left: 2%;
    }

     /*#div2 {
        margin-left: 27.5% !important;
    }*/

    #div3 {
        float: left;
        padding-left: 2%;
    }
}

@media screen and (max-width: 362px) {

    #div0 {
        margin-left: 22% !important;
    }

        #div1 {
        float: left;
        padding-left: 2%;
    }

     /*#div2 {
        margin-left: 25.5% !important;
    }*/

    #div3 {
        float: left;
        padding-left: 2%;
    }
}

@media screen and (max-width: 349px) {

    #div0 {
        margin-left: 21% !important;
    }

     /*#div2 {
        margin-left: 24.5% !important;
    }*/

}

@media screen and (max-width: 349px) {

    #div0 {
        margin-left: 10% !important;
    }

     /*#div2 {
        margin-left: 13% !important;
    }*/

}

    /*=========FIN RESPONSIVE DE PANEL RECARGA=========*/
