/*--------------------------------------------------------------------------------------------------*/
/*##################################### ESTILOS ETIQUETAS HTML #####################################*/
/*--------------------------------------------------------------------------------------------------*/
html, body { overflow-x: hidden; font-family: 'Comfortaa'; color: #494b57; margin: 0; padding: 0; }
body { overflow: hidden; }
textarea { overflow: auto; resize: none; width: 100%; height: 150px !important; }
hr { border-width: 5px; border-color: #00BC8F; margin-bottom: 30px;}
hr:after {
  z-index: 1000;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-top: 20px solid #00BC8F;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent; }
.form-group > label { margin-top: 6px; }
.form-control:focus { border-width: 2px; border-color: #00B58A; }
/*--------------------------------------------------------------------------------------------------*/
/*########################### QUITAR MARGIN Y PADDING A FILAS Y COLUMNAS ###########################*/
/*--------------------------------------------------------------------------------------------------*/
.row, 
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4,  .col-lg-5, .col-lg-6, 
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,  
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, 
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { margin: 0; padding: 0; }
/*--------------------------------------------------------------------------------------------------*/
/*###################################### SELECCIÓN CON MOUSE #######################################*/
/*--------------------------------------------------------------------------------------------------*/
::selection { background: #00B58A; color: white; }
::-moz-selection { background: #00B58A; color: white; }
/*--------------------------------------------------------------------------------------------------*/
/*#################################### BARRA DE PROGRESO SCROLL ####################################*/
/*--------------------------------------------------------------------------------------------------*/
.contenedor-progreso {
  z-index: 10000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 4px;
  background: #2A2A2A; }
.barra-progreso {
  width: 0%; 
  height: 4px;
  background: repeating-linear-gradient(45deg, #00DFA8, #00DFA8 10px, #00BC8F 10px, #00BC8F 20px); }
/*--------------------------------------------------------------------------------------------------*/
/*######################################### BOTÓN IR ARRIBA ########################################*/
/*--------------------------------------------------------------------------------------------------*/
#ir-arriba {
  z-index: 1000;
  display: none;
  opacity: .3;
  cursor: pointer;
  position: fixed;
  width: 45px;
  height: 45px;
  bottom: 20px;
  right: 20px;
  margin: 0;
  padding-top: 6px;
  background-color: #2A2A2A;
  border-radius: 50%;
  font-size: 25px;
  text-align: center;
  color: white; }
#ir-arriba:hover { opacity: .6; } 
/*--------------------------------------------------------------------------------------------------*/
/*######################################## ESTILOS BOTONES #########################################*/
/*--------------------------------------------------------------------------------------------------*/
.btn {
  z-index: 1;
  position: relative;
  font-weight: bold;
  color: black;
  border-radius: 50px;
  border-style: none;
  box-shadow: 0 2px 1px rgba(0,0,0,.5);
  transition: .2s ease-in-out; }

.btn:not(.btn-flat) { background-image: linear-gradient(to right, #00b58a 0%, #00FDBE 100%); }
.btn:not(.btn-flat):not(.btn-xs) {padding: 8px 15px 6px 15px; margin: 3px;}
.btn-xs { padding: 5px 12px 4px 12px; }

.btn:before {
  z-index: -1;
  content: "";
  position: absolute;
  left: -.5px;
  top: 50%;
  width: 101%;
  height: 0;
  border-radius: 50px;
  background: #222d32;
  transition: .2s ease-in-out;}

.btn:hover, .btn:focus { color: white;}
.btn:hover:before, .btn:focus:before {top: 0; height: 101%;}
/*--------------------------------------------------------------------------------------------------*/
/*######################################### TÍTULO SECCIÓN #########################################*/
/*--------------------------------------------------------------------------------------------------*/
.titulosec { display: inline-block; position: relative; }
.titulosec img, .titulosec div { position: relative; display: inline-block; }
.titulosec img { z-index: 2; }
.titulosec div { z-index: 1; height: 36px; top: 0px; animation-delay: .2s; }
.titulosec span {
  position: absolute;
  top: 17px;
  left: -15px;
  background: #626262;
  padding: 9px 20px 5px 20px;
  font-size: 20px;
  color: white;
  border-left: 3px solid white;
  white-space: nowrap;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px; }
/*--------------------------------------------------------------------------------------------------*/
/*######################################## SECCIÓN INICIAL #########################################*/
/*--------------------------------------------------------------------------------------------------*/
.txtwelcome { font-size:20px; color:white; text-shadow: 0 0 5px black; }
.contbtnwelcome { position: absolute; top: 60%; left: 50%; transform: translateX(-50%); }
.btnwelcome { font-size: 16px; padding: 15px 25px 13px 25px !important; animation-delay: 1s; }
/*--------------------------------------------------------------------------------------------------*/
/*###################################### SECCIÓN CONTENIDOS ########################################*/
/*--------------------------------------------------------------------------------------------------*/
.circle1, .circle2 {
  opacity: 0;
  position: relative;
  width: 400px;
  height: 400px;
  margin: 30px auto;
  border-radius: 50%;
  border: 10px solid #C3C3C3;
  box-shadow: 0 0 6px black; }
.circle1 { background: url(../../images/Circulo1.jpg); }
.circle2 { background: url(../../images/Circulo2.jpg); }
.circle1, .circle2 { background-size: cover; background-position: -100px 0; }

.circle1:before, .circle2:before {
  content: '';
  position: absolute;
  left: -7%;
  top: -7%;
  width: 114%;
  height: 114%;
  border-radius: 50%; }
.circle1:before { border: 2px solid #00d400; }
.circle2:before { border: 2px solid #5f006c; }

.listcont1, .listcont2 { opacity: 0; list-style: none; font-size: 16px; }
.listcont1 i, .listcont2 i { font-size: 22px; }
.listcont1 i { color: #00d400; }
.listcont2 i { color: #5f006c; }
/*--------------------------------------------------------------------------------------------------*/
/*###################################### SECCIÓN CONTÁCTANOS #######################################*/
/*--------------------------------------------------------------------------------------------------*/
#rowcontac {
  position: relative;
  width: 100%;
  height: 120vh;
  background: url(../../images/Contactanos.jpg);
  background-size: cover;
  background-position: 0 -100px; }
#rowcontac:before {
  z-index: 1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.5); }

#formcontact {
  border-radius: 25px;
  background: rgba(255,255,255,.2);
  padding: 20px;
  box-shadow: 0 0 1px 1px #00DFA8; }
#formcontact label { color: #00DFA8; text-shadow: 0 0 1px black; }
#formcontact i { font-size: 20px; }
#formcontact span { color: #D50005; font-size: 24px; text-shadow: none; }