@font-face {
  font-family: 'titulo';
  src: url('fonts/museo0.OTF')
}

@font-face {
  font-family: 'texto';
  src: url('fonts/museo1.OTF')
}

.cover {
  background-image: url('../images/fondo1.png');
  padding-top: 120px;
  padding-bottom: 10px;
  margin-top: 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btnCNC {
  padding-right: 40px;
  padding-left: 40px;
  padding-bottom: 8px;
  padding-top: 8px;
  background-color: #45499B;
  border-radius: 20px;
  border: 20px;
  font-size: 9pt
}

.miCard {
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
}

.btnCNC:hover {
  background-color: #1B1464;
}

.container2 {
  padding-top: 40px;
  padding-bottom: 10px;
  padding-left: 80px;
  padding-right: 80px;
  margin-top: 0px;
}

.titulosCards {
  color: #45499B;
  font-size: 30px;
  text-align: center;
}

.txtCards {
  color: #45499B;
  font-size: 15px;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}



.cardNaranja,
.cardMorada,
.cardAzul,
.cardRosa,
.cardVerdeAzul,
.cardVerde {
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0.6, 0.6, 0.6, 0.6);
  margin-left: 10px;
  margin-right: 10px;
  color: black;
  transition: all .2s ease-in-out
}

.miCardAzul,
.miCardVerde {
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0.6, 0.6, 0.6, 0.6);
  color: black;
  margin-left: 10px;
  margin-right: 10px;
  transition: all .2s ease-in-out
}


.cardNaranja:hover {
  background-color: #F7931E;
  color: white;
  transform: scale(1.1) !important;
}

.cardMorada:hover {
  background-color: #662D91;
  color: white;
  transform: scale(1.1) !important;
}

.cardVerde:hover {
  background-color: #82b546;
  color: white;
  transform: scale(1.1) !important;
}

.cardVerdeAzul:hover {
  background-color: #00a99e;
  color: white;
  transform: scale(1.1) !important;
}

.cardAzul:hover {
  background-color: #29ABE2;
  color: white;
  transform: scale(1.1) !important;
}

.cardRosa:hover {
  background-color: #D4145A;
  color: white;
  transform: scale(1.1) !important;
}

.miCardAzul:hover {
  background-color: #45499B;
  color: white;
  transform: scale(1.1) !important;
}

.miCardVerde:hover {
  background-color: #8CC63F;
  color: white;
  transform: scale(1.1) !important;
}

.cardRoja:hover .txtCBM,
.cardNaranja:hover .txtCBM,
.cardMorada:hover .txtCBM,
.cardVerde:hover .txtCBM,
.cardAzul:hover .txtCBM,
.cardRosa:hover .txtCBM,
.cardVerdeAzul:hover .txtCBM,
.miCardVerde:hover .txtCBM,
.miCardAzul:hover .txtCBM {
  color: white;
}

.cardRoja:hover .txtCBM1,
.cardNaranja:hover .txtCBM1,
.cardMorada:hover .txtCBM1,
.cardVerde:hover .txtCBM1,
.cardAzul:hover .txtCBM1,
.cardRosa:hover .txtCBM1,
.cardVerdeAzul:hover .txtCBM1,
.miCardVerde:hover .txtCBM1,
.miCardAzul:hover .txtCBM1 {
  color: white;
}

.cardRoja:hover .txtCBC,
.cardNaranja:hover .txtCBC,
.cardMorada:hover .txtCBC,
.cardVerde:hover .txtCBC,
.cardAzul:hover .txtCBC,
.cardRosa:hover .txtCBC,
.cardVerdeAzul:hover .txtCBC,
.miCardVerde:hover .txtCBC {
  color: white;
}

.cardRoja:hover .txtDyC,
.cardNaranja:hover .txtDyC,
.cardMorada:hover .txtDyC,
.cardVerde:hover .txtDyC,
.cardAzul:hover .txtDyC,
.cardRosa:hover .txtDyC,
.cardVerdeAzul:hover .txtDyC,
.miCardVerde:hover .txtDyC {
  color: white;
}


.miCardAzul:hover .txtCBM {
  color: white;
}

.miCardAzul:hover .txtCBC {
  color: white;
}

.miCardAzul:hover .txtDyC {
  color: white;
}

.cardRoja:hover .btnContratar {
  background-color: white;
  height: 35px;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #EC4747;
}

.cardNaranja:hover .btnContratar3 {
  background-color: white;
  height: 35px;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #F7931E;
}

.cardMorada:hover .btnContratar4 {
  background-color: white;
  height: 35px;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #662D91;
}

.cardVerde:hover .btnContratar7 {
  background-color: white;
  height: 35px;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #82b546;
}

.cardAzul:hover .btnContratar5 {
  background-color: white;
  height: 35px;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #29ABE2;
}

.cardRosa:hover .btnContratar6 {
  background-color: white;
  height: 35px;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #D4145A;
}


.miCardAzul:hover .btnContratar2 {
  background-color: white;
  height: 40px;
  width: 90%;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #45499B;
}


.miCardVerde:hover .btnContratar2 {
  background-color: white;
  height: 40px;
  width: 90%;
  border: none;
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #8CC63F;
}

.cardRoja:hover .margenRojo,
.cardNaranja:hover .margenNaranja,
.cardMorada:hover .margenMorado,
.cardVerde:hover .margenVerde,
.cardAzul:hover .margenAzul,
.cardRosa:hover .margenRosa {
  border: 1px solid white;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.miCardAzul:hover:hover .margenMorado2,
.miCardVerde:hover:hover .margenMorado2 {
  border: 1px solid white;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

/*CB -> CARD BLANCA M-> Mediano C-> Chico*/
.numCB1 {
  display: inline !important;
  font-size: 48px;
  font-weight: bold;
}

.numCB2 {
  display: inline !important;
  font-size: 50px;
  font-weight: bold;
}


.numCB {
  display: inline !important;
  font-size: 35px;
  font-weight: bold;
}

.txtCBM {
  color: black;
  font-size: 25px;
  font-weight: bold;
}

.txtCBM1 {
  color: black;
  font-size: 20px;
  font-weight: bold;
}


.txtCBC {
  color: black;
  font-size: 90%;
  text-align: center;
  font-weight: 100;
  position: relative;
}


/*TXT DESCARGA Y CARGA */
.txtDyC {
  color: black;
  font-size: 110%;
  text-align: center;
  position: relative;
  padding-bottom: 0px;
  font-family: 'texto';
  bottom: 25px;
}

.margenMorado {
  border: 1px solid #45499B;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.margen-derecha {
  border-right: 3px solid #662D91;
}

.margenVerde {
  border: 1px solid #82b546;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.margenMorado2 {
  border: 1px solid #EC4747;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}


.margenRojo {
  border: 1px solid #D82A21;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.margenNaranja {
  border: 1px solid #F7931E;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.margenAzul {
  border: 1px solid #29ABE2;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.margenRosa {
  border: 1px solid #D4145A;
  border-bottom: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
}

.btnContratar {
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #45499B;
  border-color: #EC4747;
}

.btnContratar2 {
  font-weight: bolder;
  width: 90%;
  height: 40px;
  font-size: 10pt;
  border-radius: 8px;
  color: #D82A21;
  border-color: #D82A21;
}

.btnContratar3 {
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #45499B;
  border-color: #F7931E;
}

.btnContratar4 {
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #45499B;
  border-color: #662D91;
}

.btnContratar5 {
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #45499B;
  border-color: #29ABE2;
}

.btnContratar6 {
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #45499B;
  border-color: #D4145A;
}

.btnContratar7 {
  font-weight: bolder;
  font-size: 10pt;
  border-radius: 8px;
  color: #45499B;
  border-color: #82b546;
}

.imgAzul {
  width: 100px;
  height: 120px;
  padding-top: 20px;
}

.txtP {
  font-size: 10pt;
  color: black;
  font-weight: lighter;
}

.titulosCardsRojas {
  color: white;
  font-weight: 900;
  font-size: 30px;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 20px;
}

.titulosCardsAzules {
  color: white;
  font-weight: 900;
  font-size: 30px;
  text-align: center;
  padding-top: 20px;
}

.txtCardRojaM {
  color: white;
  font-size: 45%;
  font-weight: bold;
}

.txtCardRojaTop {
  color: white;
  font-size: 80%;
  font-weight: 100;
  text-align: center;
  position: relative;
  top: -10%;
  padding-bottom: 10px;
}

.tituloRojo {
  background-color: #EC4747;
  text-align: center;
  width: 100%;
}

.white {
  color: white;
}

.t1 {
  color: white;
  font-size: 200%;
  padding-right: 10%;
}

.p1 {
  padding-right: 10%;
  color: white;
  font-size: 90%
}

.p2 {
  padding-right: 30%;
  color: white;
  font-size: 90%
}

.num1 {
  color: white;
  padding-right: 10%;
  position: relative;
  bottom: 23px;
}

.span1 {
  font-size: 220%;
}

.span2 {
  font-size: 100%;
  padding-left: 5px;
}

.p3 {
  color: white;
  padding-right: 10%;
  font-size: 80%;
  position: relative;
  bottom: 45px;
}

.txth1 {
  color: white;
  padding-top: 180px;
  padding-bottom: 140px;
  font-size: 300%
}

.lineh {
  line-height: 0.1pt
}

.circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;

  position: absolute;
  z-index: 10000;

}

.contratarRojo {
  font-size: 120%;
  padding-top: 3px;
}


.miP {
  padding-top: 20px
}

.cover2 {
  background-image: url('../images/azulNew2.jpeg');
  background-size: 100% 100%;
}

.cover3 {
  background-image: url('../images/naranjaNew.png');
  background-size: 100% 100%;
}

.cover4 {
  background-image: url('../images/Mucivaga-web.png');
  background-size: 100% 100%;
}

@media only screen and (min-width: 768px) and (max-width: 1380px) {
  .numCB1 {
    font-size: 35px;

  }

  .numCB {
    font-size: 25px;
  }

  .txtCBM {
    font-size: 20px;
  }

  .txtCBM1 {
    font-size: 15px;
  }

  .numCB2 {
    font-size: 35px;
  }

  .miP {
    padding-top: 10px;
  }

  .titulosCards {
    font-size: 22px;

  }


}

@media only screen and (max-width: 768px) {
  .titulosCardsRojas {
    font-size: 25px;
  }

  .cover2,
  .cover3,
  .cover4 {
    display: none;
  }

  .btnCNC {
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 8px;
    padding-top: 8px;
    background-color: #45499B;
    border-radius: 20px;
    border: 20px;
    font-size: 8pt
  }

  .margen-derecha {
    border-right: transparent !important;
  }

  .circle {
    display: none;
  }

  .titulosCards {
    font-size: 90%;
  }

  .titulosCardsAzules{
    font-size: 25px !important;
  }

  .numCB1 {
    font-size: 25px !important;
  }

  .numCB {
    font-size: 25px !important;
  }
  .numCB2{
    font-size: 30px !important;
  }
  .txtDyC {
    margin-bottom: 0px !important;
  }
  .fc{
    height: 60px !important;
  }
  .fc2{
    margin-top: -20px !important;
    height: 60px !important;
    margin-bottom: 50px !important;
  }
  .txtCBM {
    font-size: 20px !important;
  }

  .txtCBM1 {
    font-size: 20px;
  }

  .miCardAzul,
  .miCardVerde {
    border-radius: 10px;
    box-shadow: 0px 5px 10px rgba(0.6, 0.6, 0.6, 0.6);
    color: black;
    transition: all .2s ease-in-out
  }

  .contratarRojo {
    font-size: 85%;
    padding-top: 8px;
  }

  .txth1 {
    color: #45499B !important;
  }

  .container-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 300px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  }

  .estiloTxt {
    color: white;
    font-size: 20px
  }

}