@import url('../css/fonts.css');

*{
    margin: 0;
    padding: 0;
}

html{
    width: 100%;
    height: 100%;
}

#use{
    position: relative;
    background: #fdb71e;
}

.content-use{
    padding-top: 14%;
    padding-bottom: 14%;
}
.content-use-tittle{
    color: #006ed1;
    font-family: 'EsphimereSemiBold';
    margin-bottom: 3%;
}
.content-use-tittle h2{
    font-size: 3em;
}
.content-use-text{
    color: #ffffff;
    margin: 0 25%;
}
.content-use-text p{
    font-size: 19px;
}
/***********manual paso 1 y repetidos****************/
#use, #first, #second, #third, #fourth, #fifth{
    overflow: hidden;
    position: relative;
    transition: .5s;
}
/* #first{
    opacity: 0;
} */
.container-fluid {
    width: 90%;
}
.manual1, .manual2{
    padding-top: 10%;
    padding-bottom: 10%;
}
.manual1-image img,.manual2-image img{
    width: 100%;
}
.manual1-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.manual1-content-tittle, .manual2-content-tittle{
    color: #fdb71e;
    font-family: 'EsphimereSemiBold';
}
.manual1-content-tittle h3, .manual2-content-tittle h3{
    font-size: 3em;
}
.manual1-content-text{
    color: #006ed1;   
    width: 400px; 
}
/*************manual paso 2********************/
#second, #fourth{
    background: #006ed1;
}
.manual2-row{
    flex-flow: row-reverse;
}
.manual2-content{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
    padding-left: 15px;
}
.manual2-content-text{
    color: #ffffff;   
    width: 470px; 
    line-height: 20px;
}
.manual2-content-text p{
    margin: 0;
    font-size: 16px;
}
/*************manual paso 3********************/
.manual3-content, .manual5-content {
    position: absolute;
    top: 50%;
    left: inherit;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    padding-right: 15px;
}
.manual3-content-text, .manual5-content-text {
    width: 480px;
    line-height: 20px;
}
.manual3-content-text p, .manual5-content-text p {
    font-size: 16px;
}
/*********************************************/
@media screen and (min-width:1800px){
    /***********manual paso 1 y repetidos****************/
    .container-fluid {
        width: 73%;
    }
    .manual1{
        padding-top: 10%;
        padding-bottom: 10%;
    }    
}
@media screen and (min-width:1500px){
    /***********manual paso 2****************/
    .manual2-content-text {
        width: 530px;
    }
    .manual2-content-text p {
        font-size: 18px;
    }
    /*************manual paso 3********************/
    .manual3-content {
        position: absolute;
        top: 50%;
        left: inherit;
        right: 0;
        transform: translateY(-50%);
        text-align: center;
        padding-right: 15px;
    }
    .manual3-content-text, .manual5-content-text {
        width: 600px;
    }
    .manual3-content-text p, .manual5-content-text p {
        font-size: 19px;
    }
}
@media screen and (max-width:1199px){
    .content-use-text {
        margin: 0 20%;
    }
    /**********manual paso 2*************/
    .manual2-content-text {
        width: 400px;
    }
    /*************manual paso 3********************/
    .manual3-content-text, .manual5-content-text {
        width: 400px;
    }
    .manual3-content-text p, .manual5-content-text p {
        font-size: 16px;
    }
}
@media screen and (max-width:991px){
    .content-use-text {
        margin: 0 10%;
    }
    /**********manual paso 1 y repetidos*************/
    .container-fluid {
        width: 80%;
        text-align: center;
    }
    .manual1-image img, .manual2-image img {
        width: 30em;
    }
    .manual1-content, .manual2-content {
        position: inherit;
        top: inherit;
        left: inherit;
        transform: inherit;
        margin-top: 2em;
    }
    .manual1-content-text, .manual2-content-text {
        width: inherit;
    }
    /**********manual paso 2*************/
    .manual2-row{
        flex-flow: wrap;
    }
    .manual2-content {
        padding-left: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 475px;
    }
    /**********manual paso 3*************/
    .manual3-content, .manual5-content {
        padding-right: 0;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 495px;
    }

}
@media screen and (max-width:767px){
    .content-use-tittle h2 {
        font-size: 2.5em;
    }
    .content-use-text {
        margin: 0 5%;
    }
    .content-use-text p{
        font-size: 16px;
    }
    /**********manual paso 1 y repetidos*************/
    .manual1-image img, .manual2-image img {
        width: 26em;
    }
    .manual1-content-tittle h3, .manual2-content-tittle h3 {
        font-size: 2.5em;
    }
    /**********manual paso 2*************/
    .manual2-content, .manual3-content, .manual5-content {
        width: 431px;
    }
    /**********manual paso 3*************/
}
@media screen and (max-width:575px){
    .container-fluid {
        padding-top: 5em;
        padding-bottom: 5em;
    }
    .content-use-tittle h2 {
        font-size: 2em;
    }
    .content-use-text {
        margin: 0 15%;
    }
    /**********manual paso 1 y repetidos*************/
    .manual1-image img, .manual2-image img {
        width: 23em;
    }
    /**********manual paso 2*************/
    .manual2-content, .manual3-content, .manual5-content {
        width: 387px;
    }
    .manual1-content-text p, .manual2-content-text p, .manual3-content-text p, .manual5-content-text p{
        font-size: 14px;
    }
}
@media screen and (max-width:520px){
    .content-use-tittle {
        margin-bottom: 1.5em;
    }
    .content-use-text {
        margin: 0 15%;
    }
    /**********manual paso 1 y repetidos*************/
    .manual1-image img, .manual2-image img {
        width: 18em;
    }
    .manual1-content-tittle h3, .manual2-content-tittle h3 {
        font-size: 2em;
    }
    /**********manual paso 2*************/
    .manual2-content, .manual3-content, .manual5-content {
        width: 350px;
    }
    .manual3-content-text p, .manual5-content-text p{
        font-size: 14px;
    }
}
@media screen and (max-width:400px){
    .content-use {
        padding-top: 6em;
        padding-bottom: 6em;
    }
    .content-use-tittle h2 {
        font-size: 1.6em;
    }
    /**********manual paso 1 y repetidos*************/
    .container-fluid {
        width: 90%;
    }
    .manual1-image img, .manual2-image img {
        width: 16em;
    }
    /**********manual paso 2*************/
    .manual2-content, .manual3-content, .manual5-content {
        width: 290px;
    }

    .manual1-content-text p, .manual2-content-text p, .manual3-content-text p, .manual5-content-text p {
        font-size: 13px;
    }
    /*manual paso 3*/
    .manual3-content-text {
        width: 280px;
    }
}