*{
    margin:0;
    padding:0;
   
}

body,html{
    
    margin:0;
    color:#fff;
    font-family: 'sans-serif';
}


body{
    height:100vh !important;
    background: url('../img/home_page_mentapsi/fondo.svg') !important;
    background-size:cover !important;

}

nav{
    
    font-family: sans-serif;
    color: white !important;
}
nav ul{
    
    margin-left: 20px;
}
nav ul li{
    text-decoration: none;
    color:white !important;
}
nav ul li a{
    color:white !important;
    font-size: 17px;
    padding: 7px 13px;
}

a.active, a:hover{
    background:rgba(18, 100, 194, 0.192);
    color: white !important;;
    transition: .5s;
}

/* Formato de formularios */

.wizard-container{
    padding-top:10px !important;
    font-family: sans-serif !important;
}

/*Container de terminos y condiciones*/

.container_terminos{
    font-size: 1.2em;
    font-family: sans-serif;
    color:#000;
    background-color: #fff;
    padding-left: 5%;
    padding-right: 5%;
    width: 80%;
    margin-left: 10%;
    border-radius: 20px;

}
/*termina container terminos y condiciones*/

/* Formularios validation*/

#frmRegistro label.error, #frmMotivo label.error, #frmFicha label.error, #frmEs label.error, #frmDe label.error {
    width: 250px;
    margin-left: 10px;
    color:red !important;
}


#frmEd label.error, #frmEa label.error, #frmEes label.error, #frmEau label.error,  #frmEh label.error,  #frmEdf label.error, #frmEas label.error, #frmEdd label.error{
    margin-left: 10px;
    color:red !important;
    width: 400px;
    position: absolute;
    padding-top: 120px;
}

#frmEd .pregunta, #frmEa .pregunta, #frmEes .pregunta, #frmEau .pregunta, #frmEh .pregunta,  #frmEdf .pregunta, #frmEas .pregunta, #frmEdd .pregunta{
    padding-bottom: 50px !important;
}

#frmEta label.error{
    margin-left: 10px;
    color:red !important;
    width: 400px;
    position: absolute;
    padding-top: 140px;
}

#frmEta .pregunta{
    padding-bottom: 70px !important;
}

#frmEi label.error, #frmEae label.error{
    margin-left: 10px;
    color:red !important;
    width: 400px;
    position: absolute;
    padding-top: 110px;
}

#frmEi .pregunta, #frmEae .pregunta{
    padding-bottom: 40px !important;
}
#frmEba label.error{
    margin-left: 10px;
    color:red !important;
    width: 400px;
    position: absolute;
    padding-top: 150px;
}
#frmEba .pregunta{
    padding-bottom: 70px !important;
}

#frmEvp label.error{
    margin-left: 10px;
    color:red !important;
    width: 400px;
    position: absolute;
    padding-top: 100px;
}

#frmEds label.error{
    margin-left: 10px;
    color:red !important;
    width: 400px;
    position: absolute;
    padding-top: 50px;
}



#btn_iniciar{
    z-index: 10;
}

#btn_iniciar:hover{
  
        color: #000;
        background-color: white;
        transition-duration: 0.4s;
}



/* Smartphone en vertical menos de 320 */

@media only screen  
and (max-width : 320px) {  
/* Styles */ 

        #logo{
            width:90%;
            margin-left: 5%;
            position: absolute;
            z-index: 4;
            margin-top:15%;

        }

        #salud_mental{
            width:60%;
            margin-left: 20%;
            margin-top:35%;
            position: absolute;
            z-index: 1;
        }

        .conocer{

            width:60%;
            margin-top:50%;
            margin-left: 20%;
            position: absolute;
            font-size:0.8em;
            z-index: 6;
            font-weight: bolder;
        }

        #btn_iniciar{
            width: 40%;
            padding: 8px 15px;
            background: transparent;
            border: 2px solid #fff;
            border-radius: 20px;
            outline:none;
            cursor: pointer;
            margin-top:80%;
            margin-left:30%;
            font-size: 1.2em;
            font-family: sans-serif;
            position: absolute;
            

        }

        #nube1{
            width:50%;
            margin-left: -40px;
            margin-top: 40%;
            position: absolute;
            z-index: 2;
            opacity: 0.5;

        }

        #nube2{
            width:50%;
            margin-left: 80%;
            margin-top: 70%;
            position: absolute;
            z-index: 3;
            opacity: 0.5;
        }

        #edificios{
            width:80%;    
            height: 30%;
            margin-left: 10%;
            margin-top:100%;
            position: absolute;
            z-index: 5;
        }

        /*Animación trastornos*/

        .trastornos{
            display: none;
        }

        

        .logotipo{

           padding-top:20px;
            width:100%;
        }
        #encabezado{
            /*background: url('../img/home_page_mentapsi/fondo.svg') no-repeat !important;*/
           
            z-index:999999;
            width: 100%;
            padding:20px;
        }

        .container_terminos{
           
            padding-top: 30px !important;
            padding-bottom: 50px !important;
        }

} 

/* Iphone4 320 - 480 */

@media only screen  
and (min-width : 320px) and (max-width:480px) {  
/* Styles */ 

        #logo{
            width:90%;
            margin-left: 5%;
            position: absolute;
            z-index: 4;
            margin-top:15%;
        
        }

        #salud_mental{
            width:60%;
            margin-left: 20%;
            margin-top:35%;
            position: absolute;
            z-index: 1;
        }

        .conocer{

            width:60%;
            margin-top:60%;
            margin-left: 20%;
            position: absolute;
            font-size:1.0em;
            text-align: center;
            z-index: 6;
            font-weight: bolder;
        }

        #btn_iniciar{
            width: 50%;
            padding: 10px 25px;
            background: transparent;
            border: 2px solid #fff;
            border-radius: 20px;
            outline:none;
            cursor: pointer;
            margin-top:90%;
            margin-left:25%;
            font-size: 1.5em;
            font-family: sans-serif;
            position: absolute;
            

        }

        #nube1{
            width:50%;
            margin-left: -40px;
            margin-top: 40%;
            position: absolute;
            z-index: 2;
            opacity: 0.5;
            animation: nube1 40s linear;

        }

        #nube2{
            width:50%;
            margin-left: 80%;
            margin-top: 70%;
            position: absolute;
            z-index: 3;
            opacity: 0.5;
            animation: nube2 40s linear;
        }

        #edificios{
            width:80%;    
            height: 30%;
            margin-left: 10%;
            margin-top:100%;
            position: absolute;
            z-index: 5;
        }

        .logotipo{

            padding-top:20px;
            width:100%;
        }
        #encabezado{
            /*background: url('../img/home_page_mentapsi/fondo.svg') no-repeat !important;*/
           
            z-index:999999;
            width: 100%;
            padding:20px;
        }

        .container_terminos{
           
            padding-top: 30px !important;
            padding-bottom: 50px !important;
        }

        
    

            @keyframes nube1 {
                0%{
                    transform:translateX(0px);
                    opacity: 0.5;
                }
                50%{
                    opacity:1;
                }
                70%{
                    opacity: 1;
                }
                100%{
                    transform: translateX(-120px);
                    opacity: 1;
                }
        
            }

            @keyframes nube2 {
                0%{
                    transform:translateX(0px);
                    opacity: 0.5;
                }
                50%{
                    opacity:1;
                }
                70%{
                    opacity: 1;
                }
                100%{
                    transform: translateX(120px);
                    opacity: 1;
                }
        
            }

        .trastornos{
            display: none;
        }
}  

/* 481 a 639*/

@media only screen  
and (min-width : 481px) and (max-width:639px) {  
/* Styles */ 

    #logo{
        width:90%;
        margin-left: 5%;
        position: absolute;
        z-index: 4;
        margin-top:15%;

    }

    #salud_mental{
        width:60%;
        margin-left: 20%;
        margin-top:35%;
        position: absolute;
        z-index: 1;
    }

    .conocer{

        width:60%;
        margin-top:60%;
        margin-left: 20%;
        position: absolute;
        font-size:1.0em;
        text-align: center;
        z-index: 6;
        font-weight: bolder;
    }

    #btn_iniciar{
        width: 50%;
        padding: 10px 25px;
        background: transparent;
        border: 2px solid #fff;
        border-radius: 20px;
        outline:none;
        cursor: pointer;
        margin-top:90%;
        margin-left:25%;
        font-size: 1.5em;
        font-family: sans-serif;
        position: absolute;
        

    }

    #nube1{
        width:50%;
        margin-left: -40px;
        margin-top: 40%;
        position: absolute;
        z-index: 2;
        opacity: 0.5;

    }

    #nube2{
        width:50%;
        margin-left: 80%;
        margin-top: 70%;
        position: absolute;
        z-index: 3;
        opacity: 0.5;
    }

    #edificios{
        width:80%;    
        height: 30%;
        margin-left: 10%;
        margin-top:100%;
        position: absolute;
        z-index: 5;
    }

    .logotipo{
           
    padding-top:50px;
        width:70%;
        margin-left:15%
    }
    #encabezado{
        /*background: url('../img/home_page_mentapsi/fondo.svg') no-repeat !important;*/
        
        z-index:999999;
        width: 100%;
        padding:40px;
    }

    .container_terminos{
           
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }

    .trastornos{
        display: none;
    }
}  

/* 640 a 767*/

@media only screen  
and (min-width : 640px) and (max-width:767px) {  
/* Styles */ 

    #logo{
        width:90%;
        margin-left: 5%;
        position: absolute;
        z-index: 4;
        margin-top:15%;

    }

    #salud_mental{
        width:60%;
        margin-left: 20%;
        margin-top:35%;
        position: absolute;
        z-index: 1;
    }

    .conocer{

        width:60%;
        margin-top:60%;
        margin-left: 20%;
        position: absolute;
        font-size:1.0em;
        text-align: center;
        z-index: 6;
        font-weight: bolder;
    }

    #btn_iniciar{
        width: 50%;
        padding: 10px 25px;
        background: transparent;
        border: 2px solid #fff;
        border-radius: 20px;
        outline:none;
        cursor: pointer;
        margin-top:90%;
        margin-left:25%;
        font-size: 1.5em;
        font-family: sans-serif;
        position: absolute;
        

    }

    #nube1{
        width:50%;
        margin-left: -40px;
        margin-top: 40%;
        position: absolute;
        z-index: 2;
        opacity: 0.5;

    }

    #nube2{
        width:50%;
        margin-left: 80%;
        margin-top: 70%;
        position: absolute;
        z-index: 3;
        opacity: 0.5;
    }

    #edificios{
        width:80%;    
        height: 30%;
        margin-left: 10%;
        margin-top:100%;
        position: absolute;
        z-index: 5;
    }

    .logotipo{

         
           
    padding-top:50px;
     width:70%;
     margin-left:15%
    }
    #encabezado{
        /*background: url('../img/home_page_mentapsi/fondo.svg') no-repeat !important;*/
       
        z-index:999999;
        width: 100%;
        padding:40px;
    }

    .container_terminos{
           
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }

    .trastornos{
        display: none;
    }
}  


/* iPads (portrait and landscape) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px) {  
/* Styles */  

    #logo{
        width:90%;
        margin-left: 5%;
        position: absolute;
        z-index: 4;
        margin-top:15%;

    }

    #salud_mental{
        width:60%;
        margin-left: 20%;
        margin-top:35%;
        position: absolute;
        z-index: 1;
    }

    .conocer{

        width:60%;
        margin-top:60%;
        margin-left: 20%;
        position: absolute;
        font-size:1.5em;
        text-align: center;
        z-index: 6;
        font-weight: bolder;
    }

    #btn_iniciar{
        width: 20%;
        padding: 10px 25px;
        background: transparent;
        border: 2px solid #fff;
        border-radius: 20px;
        outline:none;
        cursor: pointer;
        margin-top:90%;
        margin-left:40%;
        font-size: 1.5em;
        font-family: sans-serif;
        position: absolute;
        

    }

    #nube1{
        width:50%;
        margin-left: -40px;
        margin-top: 40%;
        position: absolute;
        z-index: 2;
        opacity: 0.5;

    }

    #nube2{
        width:50%;
        margin-left: 80%;
        margin-top: 70%;
        position: absolute;
        z-index: 3;
        opacity: 0.5;
    }

    #edificios{
        width:80%;    
        height: 30%;
        margin-left: 10%;
        margin-top:100%;
        position: absolute;
        z-index: 5;
    }

    .logotipo{
           
    padding-top:50px;
        width:70%;
        margin-left:15%
    }
    #encabezado{
        /*background: url('../img/home_page_mentapsi/fondo.svg') no-repeat !important;*/
        
        z-index:999999;
        width: 100%;
        padding:40px;
    }

    .container_terminos{
           
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }


    /*Animación trastornos*/

    .trastornos{
        width:60%;
        display:flex;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        margin-top:120%;
        margin-left:20%;
        z-index: 7;
    }

    .trastornos img{
        width:15% ;
        animation: trastorno 7s linear infinite;
    }

    @keyframes trastorno {
        0%{
            transform:translateY(0);
            opacity: 0;
        }
        50%{
            opacity:1;
        }
        70%{
            opacity: 1;
        }
        100%{
            transform: translateY(-25vh);
            opacity: 0;
        }
        
    }

    .trastornos img:nth-child(1){
        animation-delay: 0.2s;
    }
    .trastornos img:nth-child(2){
        animation-delay: 1.5s;
    }
    .trastornos img:nth-child(3){
        animation-delay: 3.2s;
    }
    .trastornos img:nth-child(4){
        animation-delay: 1s;
    }
    .trastornos img:nth-child(5){
        animation-delay: 2.5s;
    }
    .trastornos img:nth-child(6){
        animation-delay: 0.5s;
    }
    .trastornos img:nth-child(7){
        animation-delay: 3s;
    }
    .trastornos img:nth-child(8){
        animation-delay: .5s;
    }
    .trastornos img:nth-child(9){
        animation-delay: 1.2s;
    }
    .trastornos img:nth-child(10){
        animation-delay: 3s;
    }

}  




/* iPads (landscape) ----------- */  
@media only screen  
and (min-width : 768px)  
and (max-width : 1024px)  
and (orientation : landscape) {  
/* Styles */  



    #logo{
        width:80%;
        margin-left: 10%;
        position: absolute;
        z-index: 4;
        margin-top:10%;

    }

    #salud_mental{
        width:50%;
        margin-left: 25%;
        margin-top:30%;
        position: absolute;
        z-index: 1;
    }

    .conocer{

        width:70%;
        margin-top:35%;
        margin-left: 15%;
        position: absolute;
        font-size:1.5em;
        text-align: center;
        z-index: 6;
        font-weight: bolder;
    }

    #btn_iniciar{
        width: 20%;
        padding: 15px 25px;
        background: transparent;
        border: 2px solid #fff;
        border-radius: 20px;
        outline:none;
        cursor: pointer;
        margin-top:51%;
        margin-left:40%;
        font-size: 1.5em;
        font-family: sans-serif;
        position: absolute;
        

    }

    #nube1{
        width:30%;
        margin-left: -80px;
        margin-top: 25%;
        position: absolute;
        z-index: 2;
        opacity: 0.5;

    }

    #nube2{
        width:30%;
        margin-left: 70%;
        margin-top: 35%;
        position: absolute;
        z-index: 3;
        opacity: 0.5;
    }

    #edificios{
        width:80%;    
        height: 30%;
        margin-left: 10%;
        margin-top:55%;
        position: absolute;
        z-index: 5;
    }

    .logotipo{
           
    padding-top:50px;
        width:70%;
        margin-left:15%
    }
    #encabezado{
        /*background: url('../img/home_page_mentapsi/fondo.svg') no-repeat !important;*/
        
        z-index:999999;
        width: 100%;
        padding:40px;
    }

    .container_terminos{
           
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }

            /*Animación trastornos*/

                .trastornos{
                    width:60%;
                    display:flex;
                    align-items: center;
                    justify-content: space-around;
                    position: absolute;
                    margin-top:70%;
                    margin-left:20%;
                    z-index: 7;
                }

                .trastornos img{
                    width:8% ;
                    animation: trastorno 7s linear infinite;
                }

                @keyframes trastorno {
                    0%{
                        transform:translateY(0);
                        opacity: 0;
                    }
                    50%{
                        opacity:1;
                    }
                    70%{
                        opacity: 1;
                    }
                    100%{
                        transform: translateY(-25vh);
                        opacity: 0;
                    }
                    
                }

                .trastornos img:nth-child(1){
                    animation-delay: 2s;
                }
                .trastornos img:nth-child(2){
                    animation-delay: 1.5s;
                }
                .trastornos img:nth-child(3){
                    animation-delay: 2.2s;
                }
                .trastornos img:nth-child(4){
                    animation-delay: 1s;
                }
                .trastornos img:nth-child(5){
                    animation-delay: 2.5s;
                }
                .trastornos img:nth-child(6){
                    animation-delay: 2s;
                }
                .trastornos img:nth-child(7){
                    animation-delay: 3s;
                }
                .trastornos img:nth-child(8){
                    animation-delay: .5s;
                }
                .trastornos img:nth-child(9){
                    animation-delay: 1.2s;
                }
                .trastornos img:nth-child(10){
                    animation-delay: 3s;
                }

}  



/* Desktops and laptops ----------- */  
@media only screen  
and (min-width : 1025px) {  
/* Styles */  

   



    #logo{
        width:30%;
        margin-left: 35%;
        position: absolute;
        z-index: 4;
        margin-top:10%;

    }

    #salud_mental{
        width:20%;
        margin-left: 40%;
        margin-top:18%;
        position: absolute;
        z-index: 1;
    }

    .conocer{

        width:60%;
        margin-top:25%;
        margin-left: 20%;
        position: absolute;
        font-size:1.7em;
        text-align: center;
        z-index: 6;
        font-weight: bolder;
    }

    #btn_iniciar{
        width: 10%;
        padding: 10px 25px;
        background: transparent;
        border: 2px solid #fff;
        border-radius: 20px;
        outline:none;
        cursor: pointer;
        margin-top:30%;
        margin-left:45%;
        font-size: 1.5em;
        font-family: sans-serif;
        position: absolute;
       
        

    }

    #nube1{
        width:25%;
        margin-left: -40px;
        margin-top: 15%;
        position: absolute;
        z-index: 2;
        opacity: 0.5;

    }

    #nube2{
        width:25%;
        margin-left: 80%;
        margin-top: 20%;
        position: absolute;
        z-index: 3;
        opacity: 0.5;
    }

    #edificios{
        width:80%;    
        height: 30%;
        margin-left: 10%;
        margin-top:35%;
        position: absolute;
        z-index: 5;
    }
    .logotipo{
           
    padding-top:50px;
        width:40%;
        margin-left:30%
    }
    #encabezado{
        /*background: url('../img/home_page_mentapsi/fondo.svg') no-repeat !important;*/
        
        z-index:999999;
        width: 100%;
        padding:40px;
    }

    .container_terminos{
        
        padding-top: 30px !important;
        padding-bottom: 50px !important;
    }

    /*Animación trastornos*/

    .trastornos{
        width:60%;
        display:flex;
        align-items: center;
        justify-content: space-around;
        position: absolute;
        margin-top:45%;
        margin-left:20%;
        z-index: 7;
    }

    .trastornos img{
        width:8% ;
        animation: trastorno 7s linear infinite;
    }

    @keyframes trastorno {
        0%{
            transform:translateY(0);
            opacity: 0;
        }
        50%{
            opacity:1;
        }
        70%{
            opacity: 1;
        }
        100%{
            transform: translateY(-25vh);
            opacity: 0;
        }
        
    }

    .trastornos img:nth-child(1){
        animation-delay: 2s;
    }
    .trastornos img:nth-child(2){
        animation-delay: 1.5s;
    }
    .trastornos img:nth-child(3){
        animation-delay: 2.2s;
    }
    .trastornos img:nth-child(4){
        animation-delay: 1s;
    }
    .trastornos img:nth-child(5){
        animation-delay: 2.5s;
    }
    .trastornos img:nth-child(6){
        animation-delay: 2s;
    }
    .trastornos img:nth-child(7){
        animation-delay: 3s;
    }
    .trastornos img:nth-child(8){
        animation-delay: .5s;
    }
    .trastornos img:nth-child(9){
        animation-delay: 1.2s;
    }
    .trastornos img:nth-child(10){
        animation-delay: 3s;
    }




}