@charset "utf-8";

#content-1{float: left;width: 100%;position: relative;z-index: 9;height: auto;display: block;}

.h2-content-1{color:rgba(80,80,80,1);font-family: 'Rubik', sans-serif;font-weight:500;float: left;position: relative;letter-spacing:1px}

.bor-h2-content-1{border-bottom:3px solid rgba(80,80,80,.05)}

.p-content-1{color:rgba(80,80,80,1);font-family: 'Rubik', sans-serif;font-weight:300;letter-spacing:.5px;}

.h3-content-1 a{font-family: 'Rubik', sans-serif;font-weight:300;color:#1a1a1a;float:left;text-align:center}

.h3-content-1 a::after {content: '';display: block;width: 0;height: 2px;background: #000;transition: width .3s;margin:5px 0px 0px 0px}

.h3-content-1 a:hover::after {width: 100%;}

.h3-content-1 a:hover{color:#1a1a1a}

.espacio-blanco{font-family: 'Rubik', sans-serif;font-weight: 400;color: rgba(25,25,25,1);text-align: center;background-color:rgba(255,255,255,1);border-radius:25px;border:2px solid rgba(239,239,239,1)}	

.espacio-blanco:focus{border:2px solid #1a1a1a}

.usuario{background-image:url("../imagenes/iconos/icono-usuario.png");background-size:20px;background-position: 5px center;background-repeat: no-repeat}

.pass{background-image:url("../imagenes/iconos/icono-password.png");background-size:20px;background-position: 5px center;background-repeat: no-repeat}

.passShow {position: absolute; float: left; margin:18px 0px 0px 0px;width: 100%;left: 280px}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    text-align: left !important;
    font-family: 'Rubik', sans-serif;font-weight:500;color:#1a1a1a;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -5px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#enviar {color:rgba(25,25,25,1);font-family: 'Rubik', sans-serif;font-weight:600;text-align:center;border:1px solid #000; background:#ff3232;background: linear-gradient(to left, transparent 50%, rgba(0,0,0,1.00) 50%);background-size: 200% 100%;background-position:right bottom;margin-left:10px;transition:all 1s ease;border-radius:25px}

#enviar:hover {background-position:left bottom;color:#fff;border:1px solid #000; }

#enviar span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}

#enviar span:after {content: '\00bb';position: absolute;opacity: 0;right: -20px;transition: 0.2s;}

#enviar:hover span {padding-right: 25px;}

#enviar:hover span:after {opacity: 1;right: 0;}

.h2-content-2{color:rgba(255,255,255,1);font-family: 'Rubik', sans-serif;font-weight:400;float: left;position: relative;letter-spacing:1px;}

.bor-h2-content-2{border-bottom:3px solid rgba(255,255,255,1)}

.p-content-2{color:rgba(41,41,41,1.00);font-family: 'Rubik', sans-serif;font-weight:300;position: relative}

.h3-content-2 a{font-family: 'Rubik', sans-serif;font-weight:600;background-color:transparent;color:rgba(22,22,22,1.00);display:block;float:left;text-align:center;border-radius:4px}

.h3-content-2 a::after {content: '';display: block;width: 0;height: 2px;background: #000;transition: width .3s;margin:5px 0px 0px 0px}

.h3-content-2 a:hover::after {width: 100%;}

.h3-content-2 a:hover{color:#1a1a1a}

.h3-content-2 a:hover{background-color:rgba(255,255,255,1);color:rgba(22,22,22,0.70)}

@media screen and (max-width:600px){
#content-1{width:100%;position:relative;float:left;height:auto;z-index:999 !important;margin:85px 0px 20px 0px;padding:20px 0px}

.content-boxes-content-1{float: left;height: auto;width: 98%;margin:0px 1%;position: relative;display:block;z-index:999999999 !important;}

.h2-content-1{font-size:22px;text-align: center;top:0px;width:90%;height:auto;padding:0px 0px 10px 0px;margin:5px 5% 0px 5%}

.bor-h2-content-1{text-align:center;width: 15%;position: relative;float:left;margin:5px 42.5% 20px 42.5%}

.p-content-1{font-size: 15px;width: 100%;display:block;margin:5px 0px;text-align:center;float:left;position:relative}

.box-content-1{height: auto;padding:0px;width:100%;margin:0px;position:relative;float:left;background-color:#fff}

#formulario {height: auto;width: 100%;margin:0px;z-index: 99999999999 !important}

.box-form{float: left;height: auto;padding:2.5% 0px;width: 90%;position: relative;margin:0% 5%;z-index: 999999999!important}

.espacio-blanco{width: 90%;padding:6px 0px;display:block;float: left;margin:5px 5%;position: relative;font-size:14px;height:40px}
    
.passShow {position: relative; float: left; margin:18px 0px 0px 0px;width: 100%;left: 40%}

#enviar{font-size:18px;position: relative;float: left;width: 60%;margin:10px 20%;padding:15px 10px;z-index: 9999 !important}

.h3-content-1 a{font-size:14px;width: 100%;height: 30px;top:0px;margin: 5% 0%;position:relative;padding-top:3.5px;}

.box-content-2{height: auto;padding:0px;width:100%;margin:2.5% 0px;position:relative;float:left;background-color:rgba(39,174,96 ,.9);}

.h2-content-2{font-size:21px;text-align: center;top:0px;width:100%;height:auto;margin:20px 0px}

.bor-h2-content-2{text-align:center;width: 20%;position: relative;float:left;margin:5px 40% 20px 40%}

.p-content-2{font-size: 14px;text-align: center;width:90%;position:relative;float: left; margin:10px 5% 0px 5%;line-height:25px}

.h3-content-2 a{height: auto;padding:10px 0px;width: 60%;position: relative;font-size: 18px;float: left;margin:10px 20%;}	

}

@media screen and (min-width:601px) and (max-width:980px) {
#content-1{float: left;width: 100%;position: relative;height: auto;padding: 0px;padding-bottom:1.5%;background-color:rgba(255,255,255,1);}

.h2-content-1{font-size:22px;text-align: center;top:0px;width:90%;height:auto;padding:0px 0px 10px 0px;margin:10px 5%}

.box-content-1{height: auto;padding:0px;width:100%;margin:0px;position:relative;float:left;background-color:#fff}

#formulario {height: auto;width: 100%;margin:0px}

.box-form{float: left;height: auto;padding:2.5% 0px;width: 45%;position: relative;margin:1% 2.5%;}

.p-content-1{font-size: 15px;width: 100%;display:block;margin:10px 0px;text-align:center;float:left;position:relative}

.espacio-blanco{width: 90%;padding:6px 0px;display:block;float: left;margin:10px 5%;position: relative;font-size:13px;}

#enviar{font-size:15px;position: relative;float: left;width: 90%;margin:10px 5%;padding:10px 10px}

.h3-content-1 a{font-size:15px;width: 100%;height: 30px;top:0px;margin: 5% 0%;position:relative;padding-top:3.5px;}

.box-content-2{height: auto;padding:0px;width:100%;margin:2.5% 0px;position:relative;float:left;background-color:rgba(39,174,96 ,.9);border-radius:0px 20px 20px 0px }

.h2-content-2{font-size:15px;text-align: center;width:100%;height:auto;margin:50px 0px 0px 0px}

.p-content-2 a{font-size:15px;width: 50%;height: 20px;top:0px;margin: 5% 25%;position:relative;padding:10.5px 0px;}

}

@media screen and (min-width:981px) and (max-width:1100px) {
#content-1{padding:20px 0px;background-color:rgba(255,255,255,1)}

.content-boxes-content-1{float: left;height: auto;width: 975px;margin:0px 0px 0px -487.5px;left: 50%;	position: relative;display:block;}

.box-content-1{position: relative;height: auto;width: 600px;float: left;z-index: 999;padding:0px 10px;}	

.h2-content-1{font-size: 22px;text-align:center;width: 100%;position: relative;float:left;margin:5px 0%}

.bor-h2-content-1{text-align:center;width: 15%;position: relative;float:left;margin:5px 42.5% 30px 42.5%}

#formulario{height: auto;width: 400px;position: relative;text-align: center;margin:0px 100px;float: left;	z-index: 9;}

.p-content-1{font-size: 15px;text-align: center;width:100%;position:relative;margin:0px 0px 20px 0px;}

.box-form{float: left;height:auto;width: 400px;position: relative;margin:10px 0px 20px 0px;display: block;}

.espacio-blanco{position: relative;height: 35px;width: 390px;font-size: 13px;float:left}

#enviar{height: auto;width: 200px;position: relative;padding:10px 0px;font-size: 18px;float: left;margin:10px 100px;}

.h3-content-1 a{font-size: 14px;text-align: center;margin: 10px 0px;position:relative;float:left;width:100%}

.box-content-2{position: relative;height:365px;width: 350px;float: left;z-index: 999;margin:0px 0px 0px 5.0px;background-color:rgba(39,174,96 ,.9);border-radius:0px 20px 20px 0px }

.h2-content-2{font-size: 20px;text-align: center;width: 300px;margin:55px 25px 5px 25px;position: relative;line-height:32px}

.bor-h2-content-2{text-align:center;width: 20%;position: relative;float:left;margin:5px 40% 20px 40%}

.p-content-2{font-size: 14px;text-align: center;width:250px;position:relative;margin:0px 50px 25px 50px;line-height:25px}

.h3-content-2 a{height: auto;padding:10px 0px;width: 200px;position: relative;font-size: 18px;float: left;margin:10px 75px;}	

}	

@media screen and (min-width:1101px) {
    #content-1{padding:20px 0px;background-color:rgba(255,255,255,1)}

    .content-boxes-content-1{float: left;height: auto;width: 800px;margin:0px 0px 0px -400px;left: 50%;	position: relative;display:block;}

    .box-content-1{position: relative;height: auto;width: 700px;float: left;z-index: 999;padding:0px 10px;margin:10px 50px 0px 50px;border-radius: 10px}	

    .h2-content-1{font-size: 22px;text-align:center;width: 100%;position: relative;float:left;margin:15px 0px 0px 0%}

    .bor-h2-content-1{text-align:center;width: 15%;position: relative;float:left;margin:5px 42.5% 30px 42.5%}

    #formulario{height: auto;width: 400px;position: relative;text-align: center;margin:0px 150px;float: left;z-index: 9;}

    .p-content-1{font-size: 15px;text-align: center;width:100%;position:relative;margin:0px 0px 20px 0px;}

    .box-form{float: left;height:auto;width: 400px;position: relative;margin:10px 0px 20px 0px;display: block;}

    .espacio-blanco{position: relative;height: 35px;width: 390px;padding:5px 0px;font-size: 13px;float:left}

    #enviar{font-size:20px;position: relative;width:200px;height:auto;line-height:26px;float:left;margin:10px 0px 10px -100px;left:50%;padding:10px 0px}

    #enviar span {font-size:30px}

    #enviar span:after {top: -18px;}
    
    .h3-content-1 a{font-size: 14px;text-align: center;margin: 10px 250px;position:relative;float:left;width:200px}

    .box-content-2{position: relative;height:400px;width: 350px;float: left;z-index: 999;margin:0px 0px 0px 5.0px;background-color:rgba(39,174,96 ,.9);border-radius:0px 20px 20px 0px }

    .h2-content-2{font-size: 20px;text-align: center;width: 300px;margin:55px 25px 5px 25px;position: relative;line-height:32px}

    .bor-h2-content-2{text-align:center;width: 20%;position: relative;float:left;margin:5px 40% 20px 40%}

    .p-content-2{font-size: 14px;text-align: center;width:350px;position:relative;float:left;margin:10px 175px 10px 175px;line-height:28px}

    .h3-content-2 a{height: auto;padding:7.5px 0px;width: 150px;position: relative;font-size: 18px;float: left;margin:0px 275px 10px 275px;}	

}