/*
version: 18 dic 2019
author: Cesar Davila
QUISVO.com


*/

@import url('https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap');

/*COLORES*/
:root {
  --color-1: #ffffff;
  --color-2: #DBDBDB;
  --color-3: #000000;
  --color-4: #F4811F;
  --color-5: #FF6E34;
  --color-6: #4A2D43;
  --color-7: #4A4A4A;
  --color-8: rgb(116, 216, 116);
}

html,body {
  /*    define el tamaño de la fuente para su uso en REM; Nota, al modificar el tamaño de este valor todos los demas valores del sitio web se modificaran tambien, ya que hacen uso de medida REM*/
  font-size: 16px;
  color: var(--color-3);
  font-family: 'Rubik', sans-serif;
  overflow-x: hidden;
}



.debugging {
  border: 1px red dashed;

}

#navbar{
  height: 90px;
}

@media screen and (max-width: 640px) {
  #navbar{
    height: 60px !important;
  }
}

#header{
  background-image: url("../images/header.png");
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 640px) {
  #header h2{
    font-size: 1.5rem;
  }
  #header h3{
    font-size: 1.1rem;
  }
}


/*  .  TEXTOS . ************************************************************/

/*reset title styles*/

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  font-weight: 400;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
p b {
  font-weight: 700;
}

h1 {
  font-size: 2.75rem;
  font-weight: 700;
}

@media screen and (max-width: 640px) {
  h1 {
    font-size: 1.9rem !important;
    font-weight: 700;
  }
}

h2 {
  font-size: 1rem;
  font-weight: 700;
}

h2.h2-2{
  font-size: 1.25rem;
  font-weight: 700;
}

@media screen and (max-width: 640px) {
  h2.h2-2{
    font-size: 1.1rem !important;
    font-weight: 700;
  }
}

h2.h2-3{
  font-size: 2.8rem;
  font-weight: 700;
}
@media screen and (max-width: 640px) {
  h2.h2-3{
    font-size: 1.9rem !important;
    font-weight: 700;
  }
}

h3 {
  font-size: 1.87rem;
  font-weight: 700;
}

@media screen and (max-width: 640px) {
  h3 {
    font-size: 1.5rem !important;
    font-weight: 700;
  }
}

h4 {
  
}

h5 {

}

h6 {
  
}

p {
  font-size: 1rem;
  font-weight:400;
  letter-spacing: 0.2px;
  line-height: 130%;
}

/*  .  TEXT COLORS . ************************************************************/
.text-color-1 {
  color: var(--color-1);
}

.text-color-2 {
  color: var(--color-2);
}

.text-color-3 {
  color: var(--color-3);
}
.text-color-4 {
  color: var(--color-4);
}
.text-color-5 {
  color: var(--color-5);
}
.text-color-6 {
  color: var(--color-6);
}
.text-color-7 {
  color: var(--color-7);
}
.text-color-8 {
  color: var(--color-8);
}



/*  .  BACKGROUNDS . ************************************************************/


.bg-color-1{
  background-color: var(--color-1);
}
.bg-color-2{
  background-color: var(--color-2);
}
.bg-color-3{
  background-color: var(--color-3);
}
.bg-color-4{
  background-color: var(--color-4);
}
.bg-color-5{
  background-color: var(--color-5);
}
.bg-color-6{
  background-color: var(--color-6);
}
.bg-1 {
  background-image: linear-gradient(-180deg, #D70301 3%, #AF3C00 100%);
}
.bg-2 {

}
/*  .  INPUTS . ************************************************************/


.inputs-1 select {
  font-size: 1rem;
  color: #b4b4b4;
  width: 100%;
  height: 44px !important;
  border: 1px solid #1C99D5;
  margin-top: 1px;
  background: #fff url('../images/arrow.png') no-repeat;
  background-size: 20px;
  background-position: right 10px center;
  background-color: #ffffff;
  padding-left: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: 0 0 7px 0 rgba(56,53,53,0.09);
}

.inputs-1 input[type=text],
.inputs-1 input[type=email],
.inputs-1 input[type=search],
.inputs-1 input[type=password],
.inputs-1 textarea {
  font-size: 1rem;
  color: var(--color-3);
  background-color:var(--color-1);
  border: none;
  box-shadow: 0 0 7px 0 rgba(56,53,53,0.09);
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 1px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  
  border: 1px solid var(--color-2);
}

.inputs-1 input[type=text]:focus,
.inputs-1 input[type=search]:focus,
.inputs-1 input[type=email]:focus,
.inputs-1 input[type=password]:focus,
.inputs-1 textarea:focus {
  background-color: var(--color-1);
  color:var(--color-4);
  border: 1px var(--color-5) solid;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  box-shadow: 0 0 7px 0 rgba(56,53,53,1);
}

.inputs-1 input[type=text]::placeholder,
.inputs-1 input[type=search]::placeholder,
.inputs-1 input[type=email]::placeholder,
.inputs-1 input[type=password]::placeholder,
.inputs-1 textarea::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #aaaaaa;
  opacity: 1;
  /* Firefox */
}

.inputs-1 input[type=text]:-ms-input-placeholder,
.inputs-1 input[type=search]:-ms-input-placeholder,
.inputs-1 input[type=email]:-ms-input-placeholder,
.inputs-1 input[type=password]:-ms-input-placeholder,
.inputs-1 textarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #aaaaaa;
}

.inputs-1 input[type=text]::-ms-input-placeholder,
.inputs-1 input[type=search]::-ms-input-placeholder,
.inputs-1 input[type=email]::-ms-input-placeholder,
.inputs-1 input[type=password]::-ms-input-placeholder,
.inputs-1 textarea::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #aaaaaa;
}


input[type=text],
input[type=search],
input[type=email],
input[type=password] {
  height: 45px;

}

textarea {
  padding: 20px;
  height: 60px;
}

/*  .  BUTTONS . ************************************************************/

@keyframes shake {
  0% {left: 0}
  1% {left: -3px}
  2% {left: 5px}
  3% {left: -8px}
  4% {left: 8px}
  5% {left: -5px}
  6% {left: 3px}
  7% {left: 0}
}

button{
  position: relative;
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

.btn-custom-1 {
  background: var(--color-5);
  border: 1px solid var(--color-5);
  text-shadow: none;
  box-shadow: 0 0 15px 0 rgba(56,53,53,0.09);
  color: var(--color-1) !important;
  font-size: 1.2rem;
  font-weight: 400;
  padding: 10px 20px 10px 20px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  font-weight: 700;

  position: relative;
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;

}

.btn-custom-1:hover,
.btn-custom-1:focus,
.btn-custom-1:active,
.btn-custom-1.active,
.open .dropdown-toggle.btn-custom-1 {
  border: 1px solid #E7E7E7;
  color: #ffffff !important;
  background-color: #363636;
}

.btn-custom-1:active,
.btn-custom-1.active,
.open .dropdown-toggle.btn-custom-1 {
  background-image: none;
}

.btn-custom-1.disabled,
.btn-custom-1[disabled],
fieldset[disabled] .btn-custom-1,
.btn-custom-1.disabled:hover,
.btn-custom-1[disabled]:hover,
fieldset[disabled] .btn-custom-1:hover,
.btn-custom-1.disabled:focus,
.btn-custom-1[disabled]:focus,
fieldset[disabled] .btn-custom-1:focus,
.btn-custom-1.disabled:active,
.btn-custom-1[disabled]:active,
fieldset[disabled] .btn-custom-1:active,
.btn-custom-1.disabled.active,
.btn-custom-1[disabled].active,
fieldset[disabled] .btn-custom-1.active {
  background-color: #ffffff;
  border-color: none;
}

.btn-custom-1 .badge {
  color: #324566;
  background-color: #ffffff;
}

.btn-custom-2 {
  background: var(--color-3);
  box-shadow: 0 1px 5px 1px rgba(56, 53, 53, 0.51);
  color: var(--color-1) !important;
  font-size: 1.2rem;
  letter-spacing: .02rem;
  font-weight: 400;
  padding: 15px 10px 15px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  font-weight: 700;

  position: relative;
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}


.btn-custom-2:hover,
.btn-custom-2:focus,
.btn-custom-2:active,
.btn-custom-2.active,
.open .dropdown-toggle.btn-custom-2 {
  color: #ffffff !important;
  background-color: #363636;
  border: 1px solid #1C99D5;
}

.btn-custom-2:active,
.btn-custom-2.active,
.open .dropdown-toggle.btn-custom-2 {
  background-image: none;
}

.btn-custom-2.disabled,
.btn-custom-2[disabled],
fieldset[disabled] .btn-custom-2,
.btn-custom-2.disabled:hover,
.btn-custom-2[disabled]:hover,
fieldset[disabled] .btn-custom-2:hover,
.btn-custom-2.disabled:focus,
.btn-custom-2[disabled]:focus,
fieldset[disabled] .btn-custom-2:focus,
.btn-custom-2.disabled:active,
.btn-custom-2[disabled]:active,
fieldset[disabled] .btn-custom-2:active,
.btn-custom-2.disabled.active,
.btn-custom-2[disabled].active,
fieldset[disabled] .btn-custom-2.active {
  background-color: #ffffff;
  border-color: none;
}

.btn-custom-2 .badge {
  color: #324566;
  background-color: #ffffff;
}

.btn-custom-3 {
  background: var(--color-4);
  color: var(--color-1) !important;
  border:2px solid var(--color-4);
  font-size: 1.43rem;
  letter-spacing: .02rem;
  font-weight: 400;
  padding: 25px 35px 25px 35px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  font-weight: 700;

  position: relative;
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}


.btn-custom-3:hover,
.btn-custom-3:focus,
.btn-custom-3:active,
.btn-custom-3.active,
.open .dropdown-toggle.btn-custom-3 {
  color:var(--color-1); !important;
  background-color: var(--color-3);
  border: 2px solid var(--color-3);
}

.btn-custom-3:active,
.btn-custom-3.active,
.open .dropdown-toggle.btn-custom-3 {
  background-image: none;
}

.btn-custom-3.disabled,
.btn-custom-3[disabled],
fieldset[disabled] .btn-custom-3,
.btn-custom-3.disabled:hover,
.btn-custom-3[disabled]:hover,
fieldset[disabled] .btn-custom-3:hover,
.btn-custom-3.disabled:focus,
.btn-custom-3[disabled]:focus,
fieldset[disabled] .btn-custom-3:focus,
.btn-custom-3.disabled:active,
.btn-custom-3[disabled]:active,
fieldset[disabled] .btn-custom-3:active,
.btn-custom-3.disabled.active,
.btn-custom-3[disabled].active,
fieldset[disabled] .btn-custom-3.active {
  background-color: #ffffff;
  border-color: none;
}

.btn-custom-3 .badge {
  color: #324566;
  background-color: #ffffff;
}


.btn-custom-4 {
  background: var(--color-1);
  color: var(--color-3) !important;
  border:2px solid var(--color-4);
  font-size: 1.43rem;
  letter-spacing: .02rem;
  font-weight: 400;
  padding: 25px 35px 25px 35px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  font-weight: 700;

  position: relative;
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}


.btn-custom-4:hover,
.btn-custom-4:focus,
.btn-custom-4:active,
.btn-custom-4.active,
.open .dropdown-toggle.btn-custom-4 {
  color:var(--color-1) !important;
  background-color: var(--color-5);
  border: 2px solid var(--color-5);
}

.btn-custom-4:active,
.btn-custom-4.active,
.open .dropdown-toggle.btn-custom-4 {
  background-image: none;
}

.btn-custom-4.disabled,
.btn-custom-4[disabled],
fieldset[disabled] .btn-custom-4,
.btn-custom-4.disabled:hover,
.btn-custom-4[disabled]:hover,
fieldset[disabled] .btn-custom-4:hover,
.btn-custom-4.disabled:focus,
.btn-custom-4[disabled]:focus,
fieldset[disabled] .btn-custom-4:focus,
.btn-custom-4.disabled:active,
.btn-custom-4[disabled]:active,
fieldset[disabled] .btn-custom-4:active,
.btn-custom-4.disabled.active,
.btn-custom-4[disabled].active,
fieldset[disabled] .btn-custom-4.active {
  background-color: #ffffff;
  border-color: none;
}

.btn-custom-4 .badge {
  color: #324566;
  background-color: #ffffff;
}



/*  .  LINKS . ************************************************************/

a.link-1 {
  color: #402860 !important;
  text-decoration: none;
  font-weight: 300;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

a.link-1:hover {
  color: #00A4B1 !important;
  text-decoration: none;
}

/*  MODALES. ************************************************************************/

.modal-backdrop {
  background-color: #A5CD38;
  opacity: 0.8 !important;
}



.modal-video .modal-dialog {
  max-width: 800px;
  margin: 30px auto;
}



.modal-video .modal-body {
  position: relative;
  padding: 0px;
}

.modal-video .close {
  position: absolute;
  right: -30px;
  top: 0;
  z-index: 999;
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  opacity: 1;
}

.cuadro-1{
  /* Rectangle 3: */
  background: var(--color-1);
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.23);

}

.tarjeta-1{
  min-height:255px; 
  background: var(--color-1);
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.11);
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top:20px;
padding: 10px 15px 10px 15px;
border: 1px solid var(--color-2);
position: relative;
}
.tarjeta-1 p{
  font-size: .9rem;
}

.tarjeta-1 .label-nuevo{
  position: absolute;
  left: 0;
  top: 0;
}
/*  FORMULARIO REGISTRO. ************************************************************************/
.form-flotante{
  position:relative; z-index:1000
}
.form-flotante .form-holder{
  background-color:#ffffff; position: absolute; width:390px; min-height:440px; right:0px;
}

@media screen and (max-width: 640px) {
  .form-flotante{
    position:inherit !important;
  }
  .form-flotante .form-holder{
    position:inherit !important;
    width:100%;
    left:0px;
  }
}

.cuadro-l{
  margin-top: 30px;
  background-color: #ffffff;
  border: 1px solid #A5CD38;
  padding: 30px 15px 20px 25px;
 -webkit-border-top-left-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.cuadro-l ul li, .cuadro-r ul li{
  line-height: 2rem !important
}

.cuadro-r{
  margin-top: 30px;
  background-color: #ffffff;
  border: 1px solid #1C99D5;
  padding: 30px 15px 20px 25px;
-webkit-border-top-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
}