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

*{
    padding: 0;
    margin: 0;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height:100%;
}

#head{
    background: linear-gradient(#db543a 10%,#b5605c 12%,#906c7e 14%,#6679a3 16%,#0698fa 42%,#6679a3 44%,#906c7e 46%,#b5605c 48%,#db543a 66%, #b5605c 68%,#906c7e 70%,#6679a3 72%,#0698fa 78%);
    position: relative;
    overflow: hidden;
}
.manual{
    margin: 17% 0;
}
.manual1{
    margin-top: 20%;
}
.number{
    font-family: "montserratBold";
    position: absolute;
    left: 34%;
    top: 14.5%;
    transform: translate(-50%);
}
.number h2{
    font-size: 20em;
}
.number1, .number5, .number8 {
    color: #0698fa;
    /*
    left: 36%;
    top: 14%;
    */
}
.number2, .number4, .number6 {
    color: #ffffff;
}
.number3, .number7, .number9  {
    color: #e1583d;
}
.phone{
    position: relative;
}
.phone img{
    width: 25%;
}
.instruccion{
    position: absolute;
    top: 50%!important;
    left: 85%;
    transform: translate(-50%,-50%);
    /*max-width: max-content!important;*/
    width: 38%;
}
/*
.instruccion1{
    left: 88%;
}
.instruccion2{
    top: 75.8%;
    left: 70.5%;
}
.instruccion3{
    top: 74.5%;
    left: 73.5%;
    width: 296.313px;
}
.instruccion4{
    left: 75.4%;
}
    .instruccion5{
    left: 72.2%;
}
*/
.instruccion h2{
    text-align: left;
    text-transform: uppercase;
    margin: 0;
    padding-left: 10px;
    border-left: 4px solid;
    color: #ffffff;
    font-size: 28px;
}
.instruccion1 h2, .instruccion4 h2, .instruccion8 h2{
    border-color: #0698fa;
}
.instruccion2 h2, .instruccion3 h2, .instruccion6 h2, .instruccion7 h2 {
    border-color: #e1583d;
}
.instruccion5 h2{
    color: #ffffff;
    border-color: #0698fa;
}
.instruccion9 h2{
    color: #e1583d;
    border-color: #e1583d;
}
#medium{
    background: url("../img/fondomanual.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

#botton{
    background: url("../img/fondomanual02.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}

#navbarNav ul li .nav-link:hover{
    color: #0698fa!important;
}
/********************************/
@media screen and (min-width: 1800px){
    .manual{
        margin: 20% 0;
    }
    .number{
        left: 31%;
        top: 13%;
    }
    .number1{
        top: 13%;
        left: 34%;
    }
    .phone img{
        width: 30%;
    }
    .instruccion h2{
        line-height: inherit;
        font-size: 40px;
        line-height: 48px;
    }/*
    .instruccion1{
        top: 75.8%;
        left: 74%;
    }
    .instruccion2{
        left: 75.7%;
    }
    .instruccion3{
        left: 78.8%;
    }
    .instruccion4{
        top: 74%;
        left: 79.5%;
    }    
    .instruccion5 {
        left: 78.6%;
    }
        */
    .instruccion {
        top:50%;
    }
}
@media screen and (max-width: 1199px){
    .instruccion h2 {
        font-size: 23px;
    }
    .manual {
        margin: 14% 0;
    }
    .manual1 {
        margin-top: 20%;
    }
    .number2, .number3, .number4, .number5, .number6, .number7, .number8 {
        top: 8%;
    }
    .number9 {
        top: 7.4%;
    }
    .number10 {
        top: 7.2%;
    }
    .phone img {
        width: 22%;
    }
    /*
    .instruccion3 {
        top: 73.5%;
        left: 73.4%;
    }
    .instruccion4 {
        top: 74.9%;
        left: 75.5%;
    }
    .instruccion5 {
        left: 72.1%;
    }
    */
}
@media screen and (max-width:991px){
    .instruccion h2 {
        font-size: 22px;
    }
    .manual1 {
        margin-top: 24%;
    }
    .number1 {
        left: 34%;
    }
    .number2, .number3, .number4, .number5, .number6, .number7, .number8 {
        top: 3%;
        left: 32%;
    }
    .number9 {
        left: 29%;
        top: 3%;
    }
    .number10 {
        top: 2.7%;
        left: 29%;
    }
    .phone img {
        width: 25%;
    }
    /*
    .instruccion1 {
        left: 73%;
        top: 78.3%;
    }
    .instruccion2 {
        left: 74.9%;
    }
    .instruccion3 {
        left: 78.8%;
        width: 225.313px;
    }
    .instruccion4 {
        top: 73.1%;
        left: 78.8%;
    }
    .instruccion5 {
        left: 78.1%;
    }
    */
}
@media screen and (max-width:767px){
    .manual1 {
        margin-top: 29%;
    }
    .number h2 {
        font-size: 15em;
    }
    .number1 {
        top: 18%;
        left: 33%;
    }
    .number2, .number3, .number4, .number5, .number6, .number7, .number8, .number9 {
        left: 31%;
    }
    .phone img {
        width: 27%;
    }
    .instruccion h2 {
        /*line-height: 19px;*/
        font-size: 18px;
    }
    /*
    .instruccion1 {
        left: 74%;
    }
    .instruccion2 {
        left: 75.9%;
    }
    .instruccion3 {
        left: 80.2%;
        width: 184.313px;
    }
    */
}
@media screen and (max-width: 575px){ 
    .col-12{
        text-align: inherit!important;
    }
    .manual {
        margin: 7em 0;
    }
    .manual1 {
        margin-top: 9.6em;
    }    
    .number{
        left: 17%;
    }
    .number1 {
        left: 20%;
    }
    .number2, .number3, .number4, .number5, .number6, .number7, .number8 {
        top: 11%;
    }
    .number9 {
        top: 10%;
    }
    .number10 {
        top: 10%;
    }
    .phone {
        left: 23%;
    }
    .phone img {
        width: 147px;
    }    
    .instruccion{
        left: 75%;
    }
    .instruccion h2 {
        line-height: 19px;
        font-size: 18px;
    }       
    /*
    .instruccion1{
        top: 55%;
        left: 70%;
    }
    .instruccion2 {
        left: 71.9%;
    }
    .instruccion3 {
        width: 180px;
        left: 77.4%;
    }
    .instruccion4 {
        left: 74.6%;
    }  
    .instruccion5 {
        left: 74.1%;
    }
    .instruccion2, .instruccion3, .instruccion4, .instruccion5 {
        top: 50%;
    }
    */
}
@media screen and (max-width:475px){
    #botton{
        background-position: right;
    }
    .col-12{
        text-align: center!important;
    }
    .br1, .br2{
        display: none;
    }
    .number h2 {
        font-size: 11em;
    } 
    .number1 {
        top: 18%;
    }
    .number2, .number3, .number4, .number5, .number6, .number7, .number8 {
        top: 12%;
    }
    .number9 {
        top: 13%;
        top: 13%;
    } 
    .number10 {
        top: 11.3%;
    }
    .phone {
        left: inherit;
    }
    .instruccion{
        position: relative;
        left: 55%;
        transform: translateX(-50%);
        margin-top: 30px;        
        width: 55%;
    }
    /*
    .instruccion1{
        width: 88px;
    }
    .instruccion2{
        width: 110px;
    }
    .instruccion4{
        width: 190px;
    }
    .instruccion5{
        width: 140px;
    }
*/
}
@media screen and (max-width:400px){
    .manual {
        margin: 6em 0;
    }
    .manual1 {
        margin-top: 10em;
    }
    .number {
        left: 20%;
    }
    .number h2 {
        font-size: 9em;
    }
    .number1 {
        left: 24%;
        top: 21%;
    }
    .number2, .number3, .number4, .number5, .number6, .number7, .number8, .number9 {
        top: 12%;
    }    
    .phone img {
        width: 135px;
    }
}