@font-face {
    font-family: 'Arial-Bold';
    src: url('../fonts/Arial-BoldMT.woff2') format('woff2'),
        url('../fonts/Arial-BoldMT.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Arial';
    src: url('../fonts/ArialMT.woff2') format('woff2'),
        url('../fonts/ArialMT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Arial-Black';
    src: url('../fonts/Arial-Black.woff2') format('woff2'),
        url('../fonts/Arial-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

body{
   background-color: #080232;
   background-image: url(https://d13td37o1xvqr3.cloudfront.net/reclu_dish/test-form/images/back.png);
   background-size: cover;
   background-repeat: no-repeat;
   
}

h1{
    font-family: 'Arial-Black';
    font-size: 3.233719844003885em;
    color: #fbe306;
    margin: 2% 0;
}

h2{
    font-family: 'Arial';
    font-size: 1.233719844003885em;
    color: #fff;
    margin: 2% 0;
    line-height: 1.5em;
    font-weight: 500;
    margin-bottom: 0px;
}

h3{
    font-family: 'Arial-Bold';
    font-size: 1.703719844003885rem;
    color: #fbe306;
    margin: 2% 0;
}

h5 {
    font-family: 'Arial-Bold';
    font-size: 1.303719844003885rem;
    color:  #f7f6fa;
    margin: 0 0 10px 0;
}


.cta {
    font-family: 'Arial-Bold';
    font-size: 1.303719844003885rem;
    color:  #f7f6fa;
    margin: 0 0 10px 0;
}


.info{
    font-family: 'Arial-Bold';
    font-size: 1.5em;
    color: #fff;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
}

.descrip{
    font-family: 'Arial';
    font-weight: lighter;
    font-size: 0.6em;
    color: #fff;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
    text-align: center;

}

#logoOctopus{
    margin-top: 5%;
    
}

#logoDish{
    width: 230px;
    display: inline-block;
    position: relative;
    right: 60px;
   
    
}

#logoOn{
    width: 230px;
    display: inline-block;
    position: relative;
    right: 40px;
   
}
#logoFpop{
    width: 230px;
    display: inline-block;
    position: relative;
    right: 60px;
   

}

.shine-desk{
    display: inline-block;
}
.shine-mov{
    display: none;
}


/*Inician estilos de tabla*/
table{
    background-color: #f7f6fa;
    margin: auto;
    width: 100%;
    text-align: center;
    border-left: 20px solid#f7f6fa;
    border-right: 20px solid #f7f6fa;
    border-collapse: separate;
    border-spacing: 6px;
    border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;

    
}



td{
    height: 50px; width:100px;
   
}

.estiloCabeza{
  height: 50px; 
}

.espacio{
    height: 30px; 
  }


.datos{
    text-align: center;
    font-family: 'Arial-Bold';
    color: #fff;
    font-size: 1.0rem;
    background-color:#6774b7;
    
}

.datos > img{
   width: 30px;
   margin: 0 10px;
}

.ciudad{
    text-align: left;
    font-family: 'Arial-Bold';
    color: #F7F6F8;
    font-size: 0.958rem;
    letter-spacing: 1px;
    padding-left: 10px;
    background-color:#262d6a;
    background-image: url(../images/flecha.jpg);
    background-repeat: no-repeat;
    background-position: right;  
}

.flecha{
    background-color:#262d6a;
}

.flecha img{
    width: 10px;
    position: relative;
    float: right;
} 
   


h4 {
    font-family: 'Arial-Bold';
    text-align: center;
    color:#262d6a;
    font-size: 1.639rem;
}

.contacto{
    letter-spacing: 1px;
    text-align: left;
    font-family: 'Arial-Bold';
    color: #262d6a;
    font-size: 0.75rem;
    background-color:#f7f6fa;
}

.whatsnum{
    text-align: center;
    letter-spacing: 1px;
    font-family: 'Arial-Bold';
    color: #5f6060;
    font-size: 0.833rem;
    background-color: #e1e2e5;
}



.telnum{
    text-align: left;
    font-family: 'Arial-Bold';
    color: #5f6060;
    font-size: 0.833rem;
    letter-spacing: 1px;
    background-color: #f7f6fa;
    border-right: 1px solid #dadadc;
    border-bottom:1px solid #dadadc;
    border-top: 1px solid #dadadc;

}

.Desk{
    display: inline-block;
}

.Mov{
display:none;

}

.Test{
    margin: 0px;
}

hr {
    margin-top: .5rem;
    margin-bottom: 0rem;
    border: 0;
    border-top: 0px solid rgba(0,0,0,.1);
}




.btn-primary {
    font-family: 'Arial-Bold';
    font-size: 1.703719844003885rem;
    color: #fbe306;
    background-color:transparent;
    border: solid 2px #fbe306;
    margin: 10px 0;
}

.btn-primary:hover {
    font-family: 'Arial-Bold';
    font-size: 1.603719844003885rem;
    color: #fbe306;
    background-color:#6774b7;
    border-color: #fbe306;
    margin: 10px 0;
}

.tap{
    width: 35px;
    height: auto;
    margin: 0 0 0 10px;
}

.spacio{
    height: 0.5vh;
}

.spacio2{
    height: 0vh;
}

@media only screen and (max-width: 991px) {

    .ciudad{
        text-align: center;
        font-family: 'Arial';
        color: #fff;
        font-size: 1.0rem;
        background-color:#262d6a;
        background-image: url(../images/flecha1.jpg);
        background-repeat: no-repeat;
        background-position: right;  
    }

    body{
        background-color: #0c073d;
        background-image: url(../images/back.jpg);
        background-size: contain;
        background-repeat: no-repeat;
     }
    
  }

  @media only screen and (max-width: 768px){
    #logoDish{
        width: 190px;
        display: inline-block;
        position: relative;
        right: 60px;
       
        
    }
    
    #logoOn{
        width: 190px;
        display: inline-block;
        position: relative;
        right: 60px;
       
    }
    #logoFpop{
        width: 190px;
        display: inline-block;
        position: relative;
        right: 60px;
       
    
    }

    .info{
        font-family: 'Arial-Bold';
        font-size: 1.2em;
    }

  }

  @media only screen and (max-width: 685px) {


    table {
        display: block;
        overflow-x: auto;
      }

    .shine-desk{
        display: none;
    }
    .shine-mov{
        display: inline-block;
        margin: 5%;
    }
    #logoDish{
        margin-bottom: 5%;
    }

h1{
    font-size: 2.233719844003885em;
    margin: 3% 0;
}

h2{
   
    font-size: 0.933719844003885em;
    margin: 2% 0;
}

h3{
    
    font-size: 1.533719844003885em;
   
    margin: 2% 0;
}


.info{
    font-size: 0.8em;
}

.ciudad{
    
    font-size: .5rem;
    background-color:#262d6a;
}

.datos{
    font-size: 0.6rem;
}

table{
    border-left: 5px solid#f7f6fa;
    border-right: 5px solid #f7f6fa; 
}

.contacto{
    
    font-size: 0.6rem;
    
}

.telnum{
    font-size: 0.8rem;

}

.whatsnum{
    
    font-size: 0.8rem;
    

}

.Desk{
    display: none;
}

.Mov{
    display: inline-block;
}

.Mov a{
    text-decoration: underline;
    color: #5f6060;
}

.datos > img{
    margin: 0 50px;
 }

 #logoDish{
   
    right: 0px;
   
    
}

#logoOn{
   
    right: 0px;
   
}
#logoFpop{
    
    right: 0px;
   

}
 
  }



  @media only screen and (max-width: 425px) {

    .btn-primary {
        font-family: 'Arial-Bold';
        font-size: 1.2rem;
        color: #fbe306;
        background-color: transparent;
        border: solid 2px #fbe306;
        margin: 10px 0;
    }

    .cta {
        font-family: 'Arial-Bold';
        font-size: 1.2rem;
        color:  #f7f6fa;
        margin: 0 0 10px 0;
  }
  
}