@charset "utf-8"; 
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite ancho máximo, por lo que el ancho predeterminado es 100%. */
.ie6 img {
	width:100%;
}
*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* Diseño Mobile: 480px y menos. */
#seccion{
    padding: 140px 8% 20px;
    min-height: 500px;
    background-color: rgba(192,184,171,0.2);
}
#ingresar_icono{
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 5px 0 20px;
} 
#ingresar_icono h3{
    font-size: 24px;
    color: #333;
    padding: 8px 0;
}
#ii_span{
    border: 2px solid #333;
    width: 42px;
    height: 42px;
    border-radius: 50px;
    font-size: 37px;
    overflow: hidden;
    background: rgba(0,0,0,0.1);
    margin: 0 15px;
    color: #333;
    display: flex;
    justify-content: center;
}
#ingresar{
    padding: 25px 15px;
    margin: 0 25px;
    background: #fff;
    border-radius: 7px;
    box-shadow: #999 0px 1px 5px;
}
#ingresar div{
}
#ingresar label{
    font-size: 16px;
    color: #444;
}
#ingresar a{
    text-decoration: none;
}
#olvidar{
    width: 250px;
    text-align: center;
    padding: 10px 0;
}
#bl{
    color: #fff;
}
#pr{
    display: flex;
    justify-content: center;
}
.in_form{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.campo{
    padding: 5px;
    font-size: 13px;
    border: 1px solid rgb(167,204,0);
    border-radius: 7px;
    margin: 5px 0 20px;
    min-width: 140px;
}
.campo:required{
    background: #fff;
}
.btn{
    padding: 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
    background: rgb(167,204,0);
    color: #fff;
    transition: all 0.3s;
    margin: 20px 50px 0;
    min-width: 110px;
    display: block;
}
#incontra{
}
#incorreo{
    margin-right: 30px;
}  
#registrar{
    flex: ;
    background: #fff;
    border-radius: 7px;
    box-shadow: #999 0px 1px 5px;
    padding: 20px 15px;
    margin: 30px 25px;
    text-align: center;
}
#def_c{
    justify-content: center;
}
#def_c article{
    padding: 10px 30px 0;
}
#registrar h3{
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    font-family: 'Playfair Display', serif;
}
.icon-help-circled{
    font-size: 18px;
    color: rgba(0,0,0,0.4);
    cursor: pointer;
} 
#info_n a{
    font-size: 13px;
    color: blue;
    text-decoration: none;
}
#med{
    display: flex;
    flex-direction: column-reverse;
}
#med div:last-child{
    padding: 0 0 15px;
    color: #333;
} 
.another{ 
    margin: 10px 50px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid rgba(53,63,82);
    display: block;
    color: rgba(53,63,82);
}
/* Diseño Tablet: 481px a 768px. Hereda estilos de diseño mobile. */
@media only screen and (min-width: 481px) {}


/* Diseño Desktop: 769px a un maximo de 1600px. Hereda estilos de: Diseño mobile y tablet */
@media only screen and (min-width: 900px) {
    #seccion{
        padding: 200px 8% 50px;
        display: flex;
        justify-content: center;
        min-height: 500px;
        background-color: rgba(192,184,171,0.2);
    } 
    #ingresar_icono{
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 5px 0 25px;
    } 
    #ingresar_icono h3{
        font-size: 27px;
        color: #333;
        padding: 8px 0;
        font-family: 'Playfair Display', serif;
    }
    #ii_span{
        border: 2px solid #333;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        font-size: 45px;
        overflow: hidden;
        background: rgba(0,0,0,0.1);
        margin: 0 15px;
        color: #333;
        display: flex;
        justify-content: center;
    }
    #ingresar{
        padding: 25px 15px;
        margin: 0 25px;
        background: #fff;
        border-radius: 0;
        box-shadow: #999 0px 1px 5px;
        display: flex;
        width: 500px;
        flex-wrap: wrap;
        justify-content: center;
    }
    #ingresar form{
        display: flex;
        flex-wrap: wrap;
        width: 500px;
        justify-content: center;
        align-content: center;
    }
    #ingresar form div{
        width: 400px;
        display: flex;
        justify-content: center;
    }
    #ingresar a{
        text-decoration: none;
    }
    #information{
        color: darkred;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        padding: 5px 15px;
    } 
    #olvidar{
        width: 250px;
        text-align: center;
        padding: 10px 0;
    }
    #bl{
        color: #fff;
    }
    #pr{
        display: flex;
        justify-content: center;
    }
    .in_form{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .campo{
        padding: 7px;
        font-size: 16px;
        border: 1px solid rgba(53,63,82,0.4);
        border-radius: 7px;
        margin: 5px 0 20px;
        min-width: 240px;
    }  
    .campo:required{
        background: #fff;
    }
    .btn{
        padding: 10px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        border: none;
        background: rgb(167,204,0);
        color: #fff;
        transition: all 0.3s;
        margin: 20px 50px 0;
        min-width: 110px;
        display: block;
    }
    .btn:hover{
        box-shadow: rgba(0,0,0,0.5) 0px 2px 4px;
        transform: translateY(-2px);
        transition: all 0.3s;
    }
    #incontra{
    }
    #incorreo{
        margin-right: 30px;
    }  
    #registrar{
        background: #fff;
        border-radius: 7px;
        box-shadow: #999 0px 1px 5px;
        padding: 30px 15px;
        margin: 0 25px;
        text-align: left;
        width: 600px;
    }
    #def_c{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #def_c article{
        padding: 10px 30px 0;
        display: flex;
        width: 580px;
        justify-content: space-between;
    }
    #registrar h3{
        text-align: center;
        font-size: 27px;
        margin-bottom: 20px;
        color: rgba(53,63,82);
    }
    #validar{
        background: #fff;
        border-radius: 7px;
        box-shadow: #999 0px 1px 5px;
        padding: 30px 15px;
        margin: 0 25px;
        text-align: left;
        width: 720px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    } 
    #validar h3{
        text-align: center;
        font-size: 27px;
        margin-bottom: 20px;
        color: rgba(53,63,82);
        width: 100%;
    }
    #validar p{
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        width: 500px;
    }
    #validar form{
        padding: 25px 0;
    }
    .icon-help-circled{
        font-size: 20px;
        color: rgba(0,0,0,0.4);
        cursor: pointer;
    }
    #info_n{
        text-align: center;
        width: 100%;
        padding: 15px 0;
    } 
    #info_n a{
        font-size: 13px;
        color: blue;
        text-decoration: none;
    }
    #whatsapp{
        font-size: 15px;
    }
    .motivo{
        width: 450px;
        background-color: rgb(255,195,0);
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 7px;
        padding: 8px;
        font-size: 13px;
        line-height: 23px;
        text-align: center;
        margin: 10px 0 18px;
    } 
    #text_error{
        text-align: center;
        color: darkred;
        font-size: 15px;
        padding: 10px 0;
    }
    #med{
        flex-direction: row;
    }
    #med div:last-child{
        padding: 15px 0 0;
        color: #333;
    }
    #med div:last-child input{
        margin-left: 20px;
    }
    .another{ 
        margin: 10px 150px;
        padding: 12px;
        font-size: 15px;
        font-weight: 600;
        border: 2px solid rgba(53,63,82);
        display: block;
        color: rgba(53,63,82);
    } 
    .another:hover{
        box-shadow: rgba(0,0,0,0.5) 0px 2px 4px;
        transform: translateY(-2px);
        transition: all 0.3s;
    }
}