body{
    margin: 0px;
    padding: 0px;  
    background-color:black;
}
#main{
    margin-top: 50px;
    width: 85%;   
    background-color: #0d2ea0; 
    color: white;
    font-family: 'Bebas Neue', cursive;
    margin-bottom: 30px;
    height:6350px;
  }
  .modal-content{
    color:black;
    font-size: 26px;
    font-family: 'Bebas Neue', cursive;
  }
  #express{
    background-color: orangered;
    color: white;
    font-size: 32px;
    font-family: 'Bebas Neue', cursive;
  }
  h2{
    font-size: 30px;
    text-shadow:5px 5px 5px black;
}
h3{
  font-size: 36px;
  background-color: #0d2ea0; 
  color: white;
  font-family: 'Bebas Neue', cursive;
}
h4{
  font-size: 46px;
  background-color: #0d2ea0; 
  color: white;
  font-family: 'Bebas Neue', cursive;
}

#fono{
  background-color:orangered;
  font-family: 'Bebas Neue', cursive;
  height: 60px;
  margin-top: 8px;
  text-shadow:5px 5px 5px black;
}
.tf{
  font-size: 40px;
  color: white;
}

  #ws{
    background-color: #00bb2d;
    font-family: 'Bebas Neue', cursive;
    height: 60px;
    margin-top: 8px;
    text-shadow:5px 5px 5px black;
  }
 
  .tws{
    font-size: 40px;
    color: white;
  }
  .card{
    height: 780px;
  }
  h5{
  
    background-color: #0d2ea0; 
    color: white;
    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
  }
  h6{
  
   
    color: white;
    font-family: 'Bebas Neue', cursive;
    font-size: 24px;
  }
  #valor{
    font-size: 28px;
    font-family: 'Bebas Neue', cursive;
    text-shadow:1px 1px 1px black;
 
}
#tt{
  font-size: 20px;
  font-family: 'Bebas Neue', cursive;
    text-shadow:1px 1px 1px black;
}
#ds{
  font-size: 28px;
  font-family: 'Bebas Neue', cursive; 
  background-color: orangered;
  color: white;

}
#dr{
  font-size: 28px;
  font-family: 'Bebas Neue', cursive; 
  background-color: orangered;
  color: white;
}
  #fonoc{
    background-color: orangered;
    color: white;
    font-size: 40px;
    font-family: 'Bebas Neue', cursive;
    height: 100px;
    margin-top: 8px;
    text-shadow:5px 5px 5px black;
  }
  .tfc{
    font-size: 30px;
    color: white;
    padding-top: 15px;
  }
  #wsc{
    background-color: #00bb2d;
    font-family: 'Bebas Neue', cursive;
    height: 100px;
    margin-top: 8px;
    text-shadow:5px 5px 5px black;
  }
  .twsc{
    font-size: 30px;
    color: white;
  }
  .modal-header{
    background-color: #0d2ea0;
    color: white;
  }
 .modal-footer{
    background-color: #0d2ea0;
    color: white;
  }
  
  /* Iphone 6/7/8 vertical resolucion 375*/
  @media (max-width: 375px){
    #main{
      height:3850px;
    }
    h1{
      font-size: 35px;
  }
  #express{
    font-size: 17px;
  }
    h2{
      font-size: 53px;
  }
    h3{
      font-size: 22px;
    }
h4{
  font-size: 18px;
}
h5{
  font-size: 22px;
}
h6{
  font-size: 18px;
}
#fono{
  height: 60px;
}
.tf{
  font-size: 21px;
}
  #ws{
    height: 60px;
  }
  .tws{
    font-size: 15px;
  }
  .card{
    height: 750px;
  }
  #tt{
    font-size: 18px;
    
  }
  #ds{
    font-size: 20px;
  }
  #dr{
    font-size: 20px;
  }
  #fonoc{
    height: 130px;
  }
  .tfc{
    font-size: 18px;
  }
  #wsc{
    height: 130px;
  }
  .twsc{
    font-size: 18px;
  }
  }
   
/* Iphone 6/7/8 horizontal resolucion 667*/

@media ( min-width: 415px) and (max-width: 667px){
    #main{
      width: 95%;
      margin-bottom: 20px;
      height: 4090px;
    }
  
    #express{
     font-size:19px ;
   }
   h1{
    font-size:40px ;
   }
    h2{
      font-size:54px ;
    }
    h3{
      font-size:25px ;
    }
    h4{
        font-size: 20px;

      }
      h5{
        font-size: 25px;

      }
      h6{
        font-size: 18px;

      }
      .card{
          height: 850px;
      }
  }
  /* Iphone 6/7/8 plus vertical resoluicion 414*/

@media ( min-width: 376px) and (max-width: 414px){

    #main{
      width: 82%;
      height: 3790px;
    }
    
    #express{
        font-size:18px ;
      }
      h1{
        font-size: 33px;
      }
       h2{
         font-size:50px ;
       }
       h3{
        font-size:22px ;
      }
       h4{
           font-size: 17px;
   
         }
         h5{
          font-size: 22px;
        }
        h6{
          font-size: 20px;
        }
         .card{
          height: 750px;
        }
         #fono{
          height: 60px;
        }
         #ws{
          height: 60px;
        }
        .tf{
          font-size: 21px;
        }
         .tws{
            font-size: 15px;
          }
          #ds{
            font-size: 21px;
        }
          #dr{
            font-size: 21px;
        }
          #dro{
            font-size: 21px;
        }
        
  #fonoc{
    height: 130px;
  }
  .tfc{
    font-size: 18px;
  }
  #wsc{
    height: 130px;
  }
  .twsc{
    font-size: 18px;
  }
  }
  
/* Iphone 6/7/8 plus horizontal res.736*/

@media ( min-width: 668px) and (max-width: 736px){
  
    #main{
      width: 95%;
      margin-bottom: 20px;
      height: 4200px;
    }
    #express{
      font-size:19px ;
    }
    h1{
      font-size: 40px;
    }
    h2{
        font-size: 60px;
    }
    h3{
      
      font-size: 26px;
  }
    h4{
        font-size: 22px;
    }
    h5{
      font-size: 28px;
  }
  h6{
    font-size: 20px;
}
    .card{
        height: 870px;
    }
    }
    /* Ipad MINI vertical  Resol.768*/

@media ( min-width: 737px) and (max-width: 768px){
  #main{
    width: 95%;
    margin-bottom: 20px;
    height: 4500px;
  }
   h1{
     font-size: 50px;
   }
   
     #express{
      font-size:22px ;
    }
     #des{
       font-size:22px ;
       height: 150px;
     }
     h1{
      font-size: 40px;
    }
     h2{
       font-size: 63px;
     }
     h3{
       margin-top: 10px;
      font-size: 25px;
    }
     h4{
       font-size: 22px;
     }
     h5{
      font-size: 30px;
    }
     .card{
       height: 930px;
     }
     #dr{
       height: 50px;
     }
  
   
     
   }

  /*  Resol.812*/  
@media ( min-width: 769px) and (max-width: 812px){
  #main{
    width: 90%;
    margin-bottom: 20px;
    height: 4100px;
  }
  h1{
    font-size: 40px;
  }
 
    #express{
     font-size:22px ;
   }
   h2{
    font-size: 62px;
   
  }
  h3{
    font-size: 29px;

  }
  h4{
    font-size: 20px;
   
  }
  h5{
    font-size: 30px;
   
  }
  h6{
    font-size: 20px;
   
  }
 
    #des{
      height: 135px;
    }
    .card{
      height: 850px;
    }
    #dr{
      height: 50px;
    }
    
   
    .tws{
      font-size: 39px;
    }
    
  }
  /*  Resol. 834*/  
  @media ( min-width: 813px) and (max-width: 834px){
      #main{
    width: 95%;
    margin-bottom: 20px;
    height: 4640px;
  }
  #express{
    font-size:22px ;
  }
  h2{
    font-size: 67px;
  }
  h3{
    font-size: 30px;
  }
  h4{
    font-size: 25px;
  }
  h5{
    font-size: 45px;
  }
  h6{
    font-size: 30px;
  }
  .card{
    height: 970px;
  }
  
  }

  /*  Resol.896*/  
@media ( min-width: 835px) and (max-width: 896px){

  
  #main{
    width: 90%;
    height: 4500px;
   
  }

    h1{
    font-size: 40px;
  }
  
    #express{
     font-size:19px ;
   }
    #des{
      font-size:30px ;
      height: 170px;
    }
    h2{
      font-size: 70px;
    }
    h3{
      font-size: 30px;
    }
    h4{
      font-size: 22px;
    }
    h5{
      font-size: 35px;
    }
    h6{
      font-size: 20px;
    }
    .card{
      height: 950px;
    }
    #dr{
      height: 50px;
    }
   
    .card-title{
      height: 90px;
    }
    #modelos{
      font-size: 20px;
      height: 100px;
    }
   
    .tws{
      font-size: 39px;
    }
  }
   /*  Resol.1024*/  
@media ( min-width: 897px) and (max-width: 1024px){
  #main{
    width: 95%;
    height: 1250px;
  }
  #express{
    font-size:19px ;
  }
  h2{
    font-size: 85px;
  }
  h3{
    font-size: 29px;
  }
  h4{
    font-size: 20px;
  }
  h5{
    font-size: 22px;
  }
  h6{
    font-size: 16px;
  }
  .card{
    height: 650px;
  }
  #valor{
    font-size: 18px;
  }
  #tt{
 
    font-size: 16px;
  }
  #entrega{
    font-size: 18px;
  }
 
  }
   /*  Resol.1112*/  
   @media ( min-width: 1025px) and (max-width: 1112px){
 
    #main{
    width: 95%;
    height: 1370px;
    margin-bottom: 20px;
  }
  h2{
    font-size: 89px;
  }
  h3{
    font-size: 29x;
  }
  h4{
    font-size: 22px;
  }
  h5{
    font-size: 24px;
  }
  h6{
    font-size: 20px;
  }
  .card{
    height: 720px;
  }
  #valor{
    font-size: 18px;
  }
  #tt{
 
    font-size: 16px;
  }
  #entrega{
    font-size: 20px;
  }

  }
   /*  Resol.1366*/  
   @media ( min-width: 1113px) and (max-width: 1366px){
 
    #main{
    width: 95%;
    height: 1400px;
   
  }
  #express{
    font-size:19px ;
  }
 
  h2{
    font-size: 94px;
  }
  h3{
    font-size: 35px;
  }
  h4{
    font-size: 25px;
  }
  
  }
  /*  Resol.1920*/  
  @media ( min-width: 1367px) and (max-width: 1920px){
 
    #main{
    width: 95%;
    height: 1480px;
    margin-bottom: 20px;
  }
  #express{
    font-size:24px ;
  }
  h2{
    font-size: 130px;
  }
  h3{
    font-size: 39px;
  }
  h4{
    font-size: 29px;
  }
  h5{
    font-size: 25px;
  }
  h6{
    font-size: 20px;
  }
  }