/* colores
azul texto #034f8d
header gris #a9adb0
fondo gris #c9ced1
fondo lila #c79dc3
gris texto #6c7071
gris menu principal #cacfd2
azulverde menu principal #80cbc4
azul menu principal #45c0ea
lila menu principal #c79dc3
grisverde menu principal #90a4ad




*/
header{
  padding: 15% 0% 10% 0% !important;
}

html{
  max-width: 400pt;
}
body {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; 
  max-width: 400pt;
}
body.tutorial{
  padding-bottom: 56pt;
}

ul li{
  list-style: none;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700; 
  font-family: 'Poppins', sans-serif;
}
p{
  margin: 0;
}
a,
a:hover,
a:focus {
  text-decoration: none;
  outline: 0 solid transparent; 
  color: inherit;
}

header{
  height:56px;
  letter-spacing: 1pt;
  font-family: 'Poppins', sans-serif;
}
footer{
  height: 56px;
}

img {
  height: auto;
  max-width: 100%; 
}

.btn:focus{
  box-shadow: none;
}
/*-------------------
     fondos
     ---------------*/
.bg-gris{
  background-color:#d9d9d9;
}
.bg-header-gris{
  background-color: #a9adb0;
}
.bg-lila{
  background-color: #c79dc3;
}
.bg-header-azul{
  background-color: #262E60;
}
.bg-gris-menuprincipal{
  background-color: #BCCA5E;
  } 
.bg-azulverde-menuprincipal {
  background-color: #0096CA;
}
.bg-azul-menuprincipal {
  background-color: #D23F8B;
} 
.bg-lila-menuprincipal {
  background-color: #9C62AF;
}
.bg-grisverde-menuprincipal{
  background-color: #F18D36;
}
.bg-grisclaro{
  background-color: #eff4f8;
}
.bg-header-verde{
  background-color: #53b59e;
} 
.bg-header-grisoscuro{
  background-color: #262E60;
}
.bg-azulraro{
  background-color: #FF952A;
}
.bg-otrolila{
  background-color: #E8724D;
}
.bg-otrogris{
  background-color: #CA437C;
}
.bg-violentometro-amarillo{
  background-color: #fdecb2;
}
.bg-violentometro-naranja{
  background-color: #f8cbba;
}
.bg-violentometro-lila{
  background-color: #d0c4e8;
}
.bg-header-testimonial{
  background-color: #8fa4ae;
}
.bg-acerca{
  background-color: #263238;
}
.bg-header-acerca{
  background-color: #465a66;
}
.bg-header-atencion{
  background-color: #3da9f6;
}
.bg-morado-secundario{
  background-color: #87247F;
}
.bg-yosegura-secundario{
  background-color: #B11DA2;
}

/*-------------------
     textos colores
     ---------------*/
.texto-azul{
  color: #034f8d;
}
.texto-gris{
  color: #6c7071;
}





/*-------------------
     textos 
     ---------------*/

.texto-light{
  font-weight: 300;
  letter-spacing: 1pt;
}
.titulo{
  font-weight: 700;

}   
.texto-poppins{
  font-family: 'Poppins', sans-serif;
}





/*-------------------
     botones 
     ---------------*/

.btn-nobtn{
  border: transparent;
  background-color: transparent;
  color:#034f8d ;
  padding: 1em;
}
.btn-nobtnw{
  border: transparent;
  background-color: transparent;
  color:#fff ;
  padding: 1em;
}
.btn-rosa{
 background-color: #f299af;
 border: solid 1px #f299af;
 color: #fff;
 padding: .5em 1em;
}
.btn-verde{
  background-color: #546f7a;
  border-color: #546f7a;
  color: #fff;
}
.btn-azulraro{
  background-color: #00acc2;
  border-color: #00acc2;
  color: #fff;
  padding: 15px 0;
}

hr{ 
  border:         none;
  border-left:    2px solid #a9adb0;
  height:         100vh;
  width:          2px; 
  margin-top: 0;
}

/*-------------------
     registro 
     ---------------*/


#registro input:not(.custom-radios input) {
  width: 100%;
  display: block;
  border: none;
  padding: 3px 0;
  border-bottom: solid 2px #fff;
  /* background-color: #c79dc3;
  color: #fff; */
  border-bottom: solid 1px #13216a;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
}

#registro p{
  font-family: 'Poppins', sans-serif;
  font-size: 1.2em;
  color: #fff;
}
#registro input::placeholder {
  
  color: white;
}
#registro .form-control{
  border-radius: 0;
}
#registro .form-control:focus,
#registro .form-control:active,
#registro .form-control:after{
    border-bottom: solid 2px #000;
    box-shadow: none;
}
#registro .custom-select{
  /* color: #fff;
  background-color: #c79dc3; */
  border-top:  none;
  border-left:  none;
  border-right:  none;
  border-bottom: solid 1px #13216a;
}


.form-group {
  display: block;
  margin-bottom: 15px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}


.custom-radios div{
  display: inline-block;
}
.custom-radios input[type="checkbox"] {
  display: none;
}
.custom-radios input[type="checkbox"] + label {
  color: #333;
  font-family: Poppins, sans-serif;
  font-size: 14px;
}
.custom-radios input[type="checkbox"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border: 2px solid #87247f;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 44px;
  margin-top:10px;
}
.custom-radios input[type="checkbox"] + label span img {
  opacity: 0;
  transition: all .3s ease;
}


.custom-radios input[type="checkbox"]:checked + label span {
  opacity: 1;
  background: url(../img/check.png) center center no-repeat;
  width: 40px;
  height: 40px;
  display: inline-block;

}

/*-------------------
     configuracionApp 
     ---------------*/


input[type="radio"] {
    display: none;
}

input[type="radio"]+label {
    appearance: none;
    cursor: pointer;
    display: inline-block;
    padding-left: 34px;
    position: relative;
    vertical-align: middle;
}

input[type="radio"]:checked+label {
    backface-visibility: hidden;
    animation: checked 200ms ease 1;
}

input[type="radio"]+label:before {
    background: none repeat scroll 0 0 rgba(119, 119, 119, 0);
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 7px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 7px;
}

input[type="radio"]+label:hover:before {
    background: none repeat scroll 0 0 rgba(119, 119, 119, 0.5)
}

input[type="radio"]:checked+label:before {
    background: none repeat scroll 0 0 rgba(119, 119, 119, 1)
}

input[type="radio"]+label:after {
    border: 3px solid #777;
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 20px;
    left: 5px;
    position: absolute;
    top: -1px;
    width: 20px;
}

input[type="radio"]:checked+label:after {
    border-color: rgba(119, 119, 119, 1)
}

.descuentos .custom-select{
  width: 100%;
  background-color:#53b59e ;
  border: none;
  color: #fff;
}
.descuentos select{
  font-size: 16px;
  line-height: 21px !important;
}

/*-------------------------------
       prevencion
--------------------------------*/
.radios div{
  display: inline-block;
}
.bg-violentometro-amarillo input[type="radio"]+label:before {
    background: none repeat scroll 0 0 rgba(250, 203, 72, 0);
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 7px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 7px;
}

.bg-violentometro-amarillo input[type="radio"]+label:hover:before {
    background: none repeat scroll 0 0 rgba(250, 203, 72, 0.5)
}

.bg-violentometro-amarillo input[type="radio"]:checked+label:before {
    background: none repeat scroll 0 0 rgba(250, 203, 72, 1)
}

.bg-violentometro-amarillo input[type="radio"]+label:after {
    border: 3px solid #facb48;
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 20px;
    left: 5px;
    position: absolute;
    top: -1px;
    width: 20px;
}

.bg-violentometro-amarillo input[type="radio"]:checked+label:after {
    border-color: rgba(250, 203, 72, 1)
}

/*lila*/


.bg-violentometro-lila input[type="radio"]+label:before {
    background: none repeat scroll 0 0 rgba(103, 59, 182, 0);
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 7px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 7px;
}

.bg-violentometro-lila input[type="radio"]+label:hover:before {
    background: none repeat scroll 0 0 rgba(103, 59, 182, 0.5)
}

.bg-violentometro-lila input[type="radio"]:checked+label:before {
    background: none repeat scroll 0 0 rgba(103, 59, 182, 1)
}

.bg-violentometro-lila input[type="radio"]+label:after {
    border: 3px solid #673bb6;
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 20px;
    left: 5px;
    position: absolute;
    top: -1px;
    width: 20px;
}

.bg-violentometro-lila input[type="radio"]:checked+label:after {
    border-color: rgba(103, 59, 182, 1)
}

/*naranja*/


.bg-violentometro-naranja input[type="radio"]+label:before {
    background: none repeat scroll 0 0 rgba(239, 107, 61, 0);
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 7px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 7px;
}

.bg-violentometro-naranja input[type="radio"]+label:hover:before {
    background: none repeat scroll 0 0 rgba(239, 107, 61, 0.5)
}

.bg-violentometro-naranja input[type="radio"]:checked+label:before {
    background: none repeat scroll 0 0 rgba(239, 107, 61, 1)
}

.bg-violentometro-naranja input[type="radio"]+label:after {
    border: 3px solid #ef6b3d;
    border-radius: 100% 100% 100% 100%;
    content: "";
    height: 20px;
    left: 5px;
    position: absolute;
    top: -1px;
    width: 20px;
}

.bg-violentometro-naranja input[type="radio"]:checked+label:after {
    border-color: rgba(239, 107, 61, 1)
}

/*-----------------------------
    atencion
------------------------------*/

.atencion .custom-select{
  width: 100%;
  background-color:#777 ;
  border: none;
  color: #fff;
}
.atencion select{
  font-size: 16px;
  line-height: 21px !important;
} 
/*-----------------------------
    atencion
------------------------------*/

#carouselEscudo .carousel-item{
 background-repeat: no-repeat;
 background-size: cover;
 height: 100vh;
 background-position: center;

}

.bg-header-blue {
  background-color: #13216a !important;
}
.bg-purple {
  background: #87247f !important;
}
.bg-pink {
  background: #c60b90 !important;
}
.bg-orange {
  background: #f08014 !important;
}
.bg-green {
  background: #bdc965 !important;
}
.bg-blue {
  background: #1797c8 !important;
}
.text-blue {
  color: #13216a !important;
}
.dropdown-toggle::after {
  content: none !important;
} 
.btn-outline-blue {
  color: #13216a;
  background-color: white;
  background-image: none;
  border-color: #13216a;
}
.bootstrap-select>.dropdown-toggle{
  color: #13216a;
  background-color: white;
  background-image: none;
  border-color: #13216a;
} 
.inputbox {
  background-color: #fff;
  border: none;
  border-bottom: thin solid gray;
  width: 10%;
  font-size: 15px;
  margin-bottom: 20px;
  margin-right: 5px;
}
#btn-mas{
    display: none;
}
.sos-btn{
    position: fixed;
    bottom: 470px;
    right: 15px;
    z-index: 4;
}
.btn-mas label{
    display: block;
    width: 80px;
    height: 80px;
    text-align: center;
}
.btn-mas label{
    cursor: pointer;
    background: transparent;
    font-size: 23px;
}
.quantity {
  position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.quantity input {
  width: 80%;
  height: 60px;
  line-height: 1.65;
  float: left;
  display: block;
  border: none;
  font-size: 3rem;
  text-align:center;
  border-radius: 4px;
  padding-right: 25px;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 60px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border: none; 
  width: 30px;
  text-align: center;
  color: #333;
  font-family: "FontAwesome" !important;
  line-height: 1.5;
  padding: 0;
  background: #FAFAFA;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button:active {
  background: #EAEAEA;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-family: "FontAwesome";
  border-radius: 0 4px 0 0;
  line-height: 1.6
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: 0;
  height: 50%;
  font-family: "FontAwesome";
  border-radius: 0 0 4px 0;
}

.bootstrap-select.bs-container {
  width: 95% !important;
}

.bootstrap-select.bs-container .dropdown-menu {
  width: 100% !important;
}