/*
version: 27 sep 2019
author: Cesar Davila
QUISVO.com


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

/*COLORES*/
:root {
  --color-1: #ffffff;
  --color-2: #777777;
  --color-3: #2C2C2C;
  --color-4: #1E1E22;
  --color-5: #D0021B;
  --color-6: #FF9F00;
  --color-7: rgb(241, 242, 247);
}

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-4);
  font-family: 'Lato', sans-serif;
  
}



.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-family: 'Lato', sans-serif;
}

h2 {
  font-size: 2rem;
  font-family: 'Lato', sans-serif;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

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);
}

/*  .  SUBRAYADO . ************************************************************/
.subrayado{
  background-color: var(--color-5);
  padding: 0 15px 0 15px;
  text-shadow: 0 2px #000;
  display:inline-block;
}

/*  .  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-color-7{
  background-color: var(--color-7);
}
.bg-1 {
  background: url("../images/bg-1.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.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-4);
  background-color:var(--color-2);
  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: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  

}

.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: #ffffff !important;
  font-size: 1.2rem;
  font-weight: 400;
  padding: 10px 20px 10px 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  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-6);
  box-shadow: 0 1px 5px 1px rgba(56, 53, 53, 0.51);
  color: var(--color-4) !important;
  text-shadow: 1px 1px 2px #fff;
  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;

  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;
}

/* viñetas : bullets **********************************************************************************************************/

ul.vineta-1 {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  margin-bottom: 1rem;
}

ul.vineta-1 li {
  background: url("../images/vineta-1.png") no-repeat;
  background-position: left 0px top 6px;
  /*left right top bottom*/
  line-height: 25px;
  padding-left: 28px;
  padding-top: 0px;
  padding-bottom: .5rem;
}


.logos{
  min-height: 200px;
  position: relative;
}
.logos .logo-holder{
  /* centro absoluto */
  margin: 0;
  position: absolute;
  top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

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

a.link-1 {
  color: var(--color-5); !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: var(--color-5); !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-4);
  border: 0px solid #E7E7E7;
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;


}

.tarjeta-1{
  min-height:255px; 
  background: var(--color-1);
  border: 1px solid #E8E8E8;
  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;
}
.tarjeta-1 p{
  font-size: .9rem;
}

/*  FORMULARIO REGISTRO. ************************************************************************/
.form-holder{
  width:345px; min-height:440px;
}

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

  .form-holder{

  }
}

.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;
}