html {
	margin: 0; 
	padding: 0;
   
}
 
body {
	background-color:  white;
	color: black;
  overflow-x: hidden;
  overflow-y: scroll;
  counter-reset: my-sec-counter;
}

a {
	color: #fff;
	font-family: 'Gilroy', serif; 
	font-size: .7rem; 
  text-transform: none !important; 
  padding-right: .5rem !important; 
}

a:hover {
	color: #00695C;

}

.lista_footer:hover {
  color: #000;
  text-decoration: none;
  background-color: #fff; 

}

.icono-redes {
  color: white; 
  background-color: 
  white; 
  border-radius: 50%; 
  border: 1px solid white; 
  padding: .2rem
} 

nav{
    background-color: transparent !important
    top: 5rem;

}
/* Estilos para el menu de navegacion */
.navbar {
    box-shadow: none; 
    background-color: rgba(255,255,255,0) !important;
  /*background-image: url(../img/svg/curvadefinitiva.svg) !important;*/
  height: auto; 
  background-repeat: no-repeat!important;
  background-size: cover!important;
  background-position: top center!important ;
  width: 100vw !important; 
  

    
}

.nav-link{
  color: #ffd149!important; 
  transition-duration: .5s;
}

.nav-link:hover {
  background-color: rgba(255,255,255,1);
  color: #003d00 !important;
  border-radius: 25px; 
}


.logo_size {
    position: relative; 
    left: 0rem; 
    height: 100px;
    padding: 0; 
}

/* Estilos para el Slider Principal */

.est_seccion{
    height: 6rem; 
    background-color: rgba(20,74,126, .1);
    border-top-right-radius: 100px; 
}




/* --------------------------------------
Modificacion FADE EFFECT CAROUSEL slider
---------------------------------------- */
.carousel-item {
    overflow: hidden;
    min-height: 370px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.corousel-altura {
    height: 100vh;
}
.corousel-altura2 {
    height: 100%;
}
.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .8s;
    transition-property: opacity
}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
    opacity: 1
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    opacity: 0
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}
@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
    .carousel-fade .active.carousel-item-left,
    .carousel-fade .active.carousel-item-prev,
    .carousel-fade .carousel-item-next,
    .carousel-fade .carousel-item-prev,
    .carousel-fade .carousel-item.active {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.carousel-control-next,
.carousel-control-prev {
    position: absolute;
    cursor: pointer;
    top: 90%;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem; 
    color: #fff;
    text-align: center;
    opacity: 1; 
    background-color: transparent;
   
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9
}
.carousel-control-prev {
    left: .3rem; 
}

.carousel-control-next {
    right: .3rem;  
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 30px;
    background: transparent no-repeat center center;
    background-size: 100% 100%
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:48px;height:48px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M19,6.41L17.59,5L7,15.59V9H5V19H15V17H8.41L19,6.41Z' /%3E%3C/svg%3E")
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M5,6.41L6.41,5L17,15.59V9H19V19H9V17H15.59L5,6.41Z' /%3E%3C/svg%3E")
}
.carousel-indicators {
  position: absolute;
  bottom: 0;
  position: flex !important; 
  float: left !important;
  padding-left: 0;
  list-style: none;
  justify-content: center;

}

.carousel-indicators2 {
   top: 1.5rem;
}

.carousel-indicators li {
    transition: width 0.2s, height 0.2s, transform 0.2s;
    position: relative;
    width: 11px;
    height: 11px;
    background-color: #64DD17;
    border: 2px solid #64DD17;
    padding: 2px !important;
    margin: 5px; 
    text-indent: -999px;
    cursor: pointer;
    margin-top: 5px;
    border-radius: 50%
}

.carousel-indicators li:hover {
    transform: scale(2);
    background-color: #33691E; 
}

.carousel-indicators .active {
    background-color: #33691E;
}
/* Variable de la animacion para el CAROUSEL CAPTION */
.carousel-caption h3:first-child {
    animation-delay: 0s;
    animation-duration: .5s;
}
.carousel-caption h3:nth-child(2) {
    animation-delay: 0s;
}
.carousel-caption button {
    animation-delay: 0s;
    z-index: 1;
}
.carousel-caption {
  width: 65%; 
  top: 30vh; 
  text-align: left !important;
  left:0%; 
  right: 0%; 
}
.bounceInLeft  .bounceInRight {
  animation-duration: 0s;
}
.titulodelcaption {
    

    font-size: 4rem !important;
    color: darkcyan!important;
    z-index: 99999999;
    line-height: 3.5rem;
    background: rgba(0,0,0, .1);
    display:inline-block;
    letter-spacing: -.5rem
    text-shadow: 0 0 20px black;

}

.titulodelcaption2 {
    font-family: 'Open Sans Condensed' !important;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 2rem;
    font-size: 2rem ; 
    margin-top: 2rem  !important;
    border-bottom: 4px solid white;  
    border-left: 4px solid white;
    border-right: 4px solid white;
    padding: 0.3rem 0rem 0.3rem  0rem;    
    position: absolute;
    box-sizing: border-box;
    width: 10.5rem; 
}

.img-sli {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

.img-sli-fluid {
    object-fit: cover; 
    height: 100%; 
    width: 100%;
}

.mini-basket__icon {

    display: block;
    width: 17px;
    height: 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 19'%3E %3Cg fill='none' stroke='%2300174F' stroke-width='1.6'%3E %3Cpath d='M1.56 6.28L.86 17.3h14.4l-.7-11.02h-13z'/%3E %3Cpath d='M5.29 10.57l.5-8.46C6.68 1.37 7.42 1 8 1c.58 0 1.32.37 2.22 1.11l.49 8.46'/%3E %3C/g%3E %3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2px;
}

.icon-size {
    width: 24px; 
    height: 24px; 
    fill: #ffd149; 
    padding-right: .2rem; 
}

.icon-size2 {
  width: 130px; 
  
}

.numeral::after{
  counter-increment: my-sec-counter;
  content: counter(my-sec-counter);
  font-size: 2.7rem; 
  font-weight: bolder;
  color: #69E781;
  border-top-left-radius: : 50%; 
  border-top-right-radius: 50%; 
  border-bottom-left-radius: 35%; 
  position: absolute;
  top: -1rem; 
  right: 2.5rem; 
  border: 5px solid #69E781;
  border-top: transparent; 
  border-left: transparent; 
  padding: 0rem .5rem 0rem 0.5rem;  
}



.icon-size2::before {
  content: "";
   display: block;
   width: 50px;
   height: 4px;
  background: #83d305; 
  top: 50%;

}

/* Estilos del Footer */
footer {
  
  color: #0000;
  font-family: 'Gilroy', sans-serif;
  background-color: black;
  font-size: .8rem; 
}

.infoa {
  
  font-size: .8rem; 
  font-family: 'Roboto';
  line-height: .9rem; 
  color: white; 
  font-weight: bolder;
  max-width: 300px; 
  top: 50%; 
  padding: .5rem; 
}

.pickgradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100vh;
  display:inline-block;
  background: -moz-linear-gradient(180deg,rgba(255, 255, 255, 0.8)10%, rgba(0, 0, 0, 0)10%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0, 1)), color-stop(100%,rgba(0,0,0, 0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(180deg,rgba(255, 255, 255, 0.8)10%, rgba(0, 0, 0, 0)10%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(180deg,rgba(255, 255, 255, 0.8)10%, rgba(0, 0, 0, 0) 10%); /* Opera 11.10+ */
  background: -ms-linear-gradient(180deg,rgba(255, 255, 255, 0.8)10%, rgba(0, 0, 0, 0)10%); /* IE10+ */
  background: linear-gradient(90deg,rgba(0, 0, 0, .8)2%, rgba(173, 252, 0, .3)20%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}


.diagonal {
  height: 100vh
}

.diagonal:before {
  content: ''; 
  position: relative;
  border-top: 100vh solid #e9f4d3; 
  border-left: 100vw solid transparent; 
  bottom: -99vh; 
}

.diagonal2 {
  height: 100vh
}

.diagonal2:before {
  content: ''; 
  position: relative;
  border-bottom: 100vh solid #e9f4d3; 
  border-right: 100vw solid transparent; 
  top: 0vh; 
}

/* --------------------------------------
Estilos para la ventana modal del Log
---------------------------------------- */
.modal.fade .modal-dialog {
  transition-duration: .1s;
}

.formularioactivacion {
    margin-top: .5rem !important;
    color: #1976D2 !important; 
    font-size: 1.1rem !important; 
    font-family: 'poppins';
}

.margen_modal {
    margin-left: -1rem; 
}

.entrena{
    width: 80px; 
    border: 5px solid black; 
    border-radius: 50%; 
    padding: .2rem;
}

.modal-title {
    line-height: .5rem !important;
    font-family: 'Gilroy', serif; 
    color: white;  
}

  .tab {
    font-family: 'Gilroy'. serif;
    color: white; 
  }

.modal-content {
  border-radius: 30px 5px 30px 5px;
}
/* --------------------------------------
Estilos para el formulario de login
---------------------------------------- */

.form {
  background: #fff;
  padding: 5px;
  max-width: 99%!important;
  margin: 5px auto;
  border-radius: 15px;
  border: 1px dotted #ffd149; 
  /*
   background: linear-gradient(to top ,rgba(255,255,255 ,.8)20%, rgba(255,255,2556 ,0) 70%), url(../img/rec/sli/s21.jpg);
   background-size: cover;*/
 box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);*/

}

.form-group {
  padding-left: 20px;
  padding: 0 .5rem 0 .5rem !important;

}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  color: red; 
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 5px;
  background: rgba(160, 179, 176, 0.50);
  color: white ;
  font-family: 'Gilroy' !important; 
  font-size: 1rem; 
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}
.tab-group li a:hover {
  background:  #303F9F;
  color: #ffffff;
}
.tab-group .active a {
  background: rgba(160, 179, 176, 0.30);
  color: #009688;
}

.tab-content > div:last-child {
  display: none;
}


.field-wrap {
  position: relative;
  margin-bottom: 20px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

.btn-sm {
  border-radius: 25px !important;
  font-size: 1.2rem; 
  font-family: 'Gilroy', serif; 
  text-transform: uppercase;
  padding: .5rem !important; 
}

small {
  font-size: .7rem; 
  color: white; 
}

input {
  color: white !important; 
  font-family: 'Gilroy', serif;
  
  
}

.interlineado2 {
  margin-top: -1.7rem; 
}



 .bmd-form-group label {  
  font-size: .95rem !important; 
  color: #E0F7FA !important; 
  font-family: 'Gilroy', serif;
  padding-left: .5rem !important; 
  margin-left: 1rem; 
  
 }


.no-gutter > [class*='col-'] {
    padding-right: 4px;
    padding-left: 4px;
}

.subtitulo_campos {
  color: white; 
  font-size: .8rem 
}




/* Estilos para las ondas */
.ut-svg-color-5ce326ddc0637 {
  fill: rgba(198, 113, 0, .5) !important 
}
  
.ut-svg-color-5ce326ddc0677 { 
  fill: rgba(255, 160, 0, 0.7) !important 
}
.ut-svg-color-5ce326ddc06b2 {
  fill: rgba(255, 255, 255, 1) !important 
}

.color2 { 
  fill: rgba(0, 150, 100, 0.3) !important 
}

.color3 {
  fill: rgba(0, 96, 100, 1) !important 
}


.titulos {
  font-size: 5rem !important;
  color: #c5e1a5;
  z-index: 99999999;
  line-height: 4.5rem;
  background: rgba(0,0,0, .2);
  display:inline-block;
  letter-spacing: -.2rem

}

.titulos::first-letter {
  
    color: white; 
    line-height: 4.5rem; 
   }


.subtitulos {
  font-size: 1.5rem;
  color: white;
  line-height: 1.5rem;
  width: 50vw;
  overflow: hidden;
  background: rgba(0,0,0, .2);
  display: inline-block;
}

.btn-outline-primary {
  border-radius: 25px !important;
  background: rgba(255,255,0,.1) !important;
  padding: .5rem !important;
  color: white !important;
}




nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: .3rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: white;
  height: 1px;
  transition-duration: .3s;
}
nav.stroke ul li a:hover:after {
  width: 40%;
  right: -2rem; 

}

.icon-svg {
  width:24px;
  height:24px;
  fill: #64B5F6;
  padding-right: .2rem; 

}

.icon-svg:hover{
    fill: #fff;  
}  


.navbar-toggler {
    color: #64B5F6 !important;
    font-size: .9rem !important;
    font-weight: bolder;
    background: #c67c00!important;
    padding: .2rem .2rem;
   
}

.svg-icon{
    width:40px;height:40px;
    fill: blue;  
}  

.svg-icon:hover{
    fill: white;  
}  

 .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z' /%3E%3C/svg%3E") !important;
  
 }

 .fondonav {
  background: #212121 !important
}

/* --------------------------------------
Estilos para la Seccion de Productos
---------------------------------------- */
.imagen_producto {
  margin-left: 2rem; 
}


.titulo_producto {
  position: absolute;
  top: 1rem; 
  font-family: 'Montserrat'; 
  font-size: 1.4rem; 
  right: 50%; 


}

.subtitulo_producto {
  position: absolute;
  top: 3.5rem; 
  font-family: 'Gilroy'; 
  font-size: 1rem; 
  left: 50%;  
  font-weight: bold;
  line-height: 1rem; 


}

.detalle_producto {
position: absolute;
  top: 3.5rem; 
  font-family: 'Gilroy'; 
  font-size: 1rem; 
  left: 30%;  
  font-weight: bold;
  line-height: 1.1rem; 
  color: black; 


}


/* Clases para botones */
.btn-custom {
  border-radius: 5px;
  background: #ffd149; 
  color: #fff !important;
  padding: .5rem .5rem  0rem .5rem  !important;
}

.btn-custom:hover {
  color: #000 !important; 
}

.btn-cutom2 {
  background: #000; 
  color: #fff;
  padding: .5rem .5rem  0rem .5rem  !important;
}

.btn-custom3{
  border-radius: 25px; 
  background: #d9e2ca; 
  color: #fff; 
  padding: .3rem .5rem  0rem .5rem  !important;
  border: 1px solid #e9f4d3;
}

.btn-custom4 {
  border-radius: 25px; 
  background: white; 
  color: #073509; 
  padding: .3rem .5rem  0rem .5rem  !important;
  border: 1px solid #e9f4d3;
}

.btn-custom5 {
  border-radius: 25px; 
  background: white; 
  color: teal; 
  padding: .5rem  !important;
  border: 1px solid grey;
}

.form-control {
  color: #ffa000 !important; 
  font-size: 1.2rem; 

}

/* Estilos para el FOOTER */
.titulos_pie {
  text-transform: uppercase;
}

.btn_caption {
    background-color: transparent;
    font-size: .7rem;
    color: #000; 
    font-family: 'Roboto', serif; 
    text-transform: none; 
    padding: .3rem .5rem .3rem .5rem;   
    border: 1px solid black;
    margin-left: .1rem; 
    margin-right: .1rem; 
    position: relative;
    display: flex;
    border-radius: 25px; 
    
}

.margen_pie_titulos::first-letter {
   background: #33691e; 
   padding: .4rem; 
   color:white; 
  border-radius: 50px; 
}


.margen_pie_titulos::before {
    content: "";
    top: 0%; 
}

.margen_pie_titulos::after {
    content: "";
    top: 0%; 
}

.margen_pie_titulos2::after {
    content:"";
    top: 0%; 
    padding-left: .5rem; 
    color: #9ba3ba
}

.margen_pie_titulos3::before {
    content: "";
    top: 0%; 
    padding-right: .5rem; 
}


.titulo-resp {
    font-size: 2.5rem; 
    font-family: 'Poiret One' ; 
    color: #42495d;
    z-index: 99999999; 
    font-weight: bolder
    line-height: 1.3rem; 
    
}


/* --------------------------------------
Estilos MEDIA QUERYS
---------------------------------------- */
.estilomodalalertaa {
    color: #009688 ; 
    font-size: 1.2rem; 
    margin-top: -1rem;
}

.estilomodalalertab {
    color: #D50000; 
    font-size: 1.2rem;
    margin-top: -1rem; 
}

#modalalert p {
    line-height: 1rem !important; 
    margin-top: -.5rem !important; 
}

#modalalert2 p {
    line-height: 1rem !important; 
    margin-top: -.5rem !important; 
}

.sizeicono1 {
    font-size:3.5rem !important; 
    color: #009688;
}

.sizeicono2 {
    font-size:3rem; 
    margin-top: 1rem;
     color: red;
}

.popover-header {
  font-family: 'Gilroy'; 
  font-size: .8rem; 
}

.popover {
  font-size: .8rem; 
  font-family: 'Gilroy'; 
}


/* --------------------------------------
Estilos MEDIA QUERYS
---------------------------------------- */
@media only screen and (max-width: 768px) {
  .titulos {
    font-size: 2.5rem;
    letter-spacing: 0; 
    max-width: 100vw;
    line-height: 2.5rem;
  }
    
  .subtitulos {
    font-size: 1.5rem;
    line-height: 1.5rem;  
  }
  
}


@media only screen and (max-width: 599px) {
  .titulos {
    font-size: 1.9rem;
    letter-spacing: -.1rem; 
    max-width: 100vw;
    line-height: 1.9rem;
    font-family: 'Gilroy';
    font-weight: bold;
  }
    
  .subtitulos {
    font-size: 1.2rem;
    font-family: 'Roboto', sans serif;
    line-height: 1.2rem; 
    
    

  }
  
}

.borde {
  border-right: 50px solid;
  border-image: url(..assets/img/svg/prueba.svg) 
}

/* Estilos para el GRID de Productos */
.titulo_pro {
  font-family: 'Montserrat', serif; 
  letter-spacing: -.1rem; 
  line-height: 2rem; 
}

.subtitulo_pro {
  font-family: 'Gilroy', serif; 

}

.lead {
  font-family: 'Helvetica'; 
  font-weight: lighter;
}



/* Composicion de Tema  
   1.1 Tipo de Fuentes*/ 
  .f1 {font-family: 'Gilroy', sans serif}
  .f2 {font-family: 'Lato', sans serif}
  .f3 {font-family: 'Futura', sans serif}
  .f4 {font-family: 'Open Sans Condensed', sans serif}
  .f5 {font-family: 'Anton', helvetica}
  .f6 {font-family: 'Urbanist', sans serif}
  .f7 {font-family: 'Poiret One', sans serif}
  .f8 {font-family: 'Roboto', sans}

  /* 1.2 Composicion de Colores TEXTOS*/
  .c1{color: #073509 !important} /*Color Naranja */
  .c2{color: #000000} /* Color Negro */
  .c3{color: #69E781} /* Color Secundario Base */
  .c4{color: #bdbdbd} /* Color GRis */
  .c5{color: #ffffff} /* Color Blanco */

  /* 1.3 Tamaño de fuentes*/
  .s0 {font-size: .7rem; line-height: .75rem } 
  .s1 {font-size: .75rem; line-height: .9rem }
  .s2 {font-size: .85rem; line-height: .9rem }
  .s3 {font-size: .9rem;  line-height: 1rem }
  .s4 {font-size: 1rem;   line-height: 1.2rem }
  .s5 {font-size: 2rem;   line-height: 2.2rem }
  .s6 {font-size: 1.3rem;   line-height: 1.5rem }
  .s7 {font-size: 5rem;   line-height: 4.5rem }

  /* 1.4 Densidad ajustada de fuente*/
  .fw1 {font-weight: 100}
  .fw2 {font-weight: 300}
  .fw3 {font-weight: 400}
  .fw4 {font-weight: 500}
  .fw7 {font-weight: 700}
  .fw8 {font-weight: 900}

  /* 1.5 Colorres de Fondo*/
  .bc1 {background-color: #ead610} /* Color Primario base */
  .bc2 {background-color: #b3a500} /* Color Prmario Dark */
  .bc3 {background-color: #ffff56} /* Color Primario Light */
  .bc4 {background-color: #082f49} /* Color Secundario base */
  .bc5 {background-color: #000522} /* Color Secundario Dark */
  .bc6 {background-color: #395875} /* Color Secundario Light */
  .bc7 {background-color: #012d03 !important}  /* Color Secundario Light */

  /* 1.6 Margenes negativos */
  .mn1 {position: relative; top: -.5rem}
  .mn2 {top: -1rem}
  .mn3 {position: absolute; margin-top: -2rem}

  /* 1.7 Margenes */
  .m1{margin-bottom: 0}
  
/* Fin de Composicion de Tema  */

.imgconsejo {
  border-radius: 10px;
  border: 1px solid transparent;
}

.custom-file-control:invalid, .form-control:invalid {
    background-image: linear-gradient(0deg, #ffd149 1px,rgba(213,0,0,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,
    transparent 0);
}

/* Separador de secciones */
.separadorseccion {
  width: 15px !important; 
  height: 15px !important; 
  border: 2px solid black; 
  border-radius: 50%; 
}

.separadorseccion::before{
  content: ''; 
  width: 10vw;
  height: 50px; 
  position: absolute;
  border: 4px solid #69E781;
  border-radius: 0 20px 0 0;
  border-bottom: transparent; 
  border-left: transparent; 
  border-right: transparent; 
 }

.separadorseccion::after{
  content: ''; 
  width: 10vw;
  height: 50px; 
  position: absolute;
  left: -10vw; 
  border: groove 4px  #69E781;
  border-radius: 20px 0 0 0;
  border-bottom: transparent; 
  border-left: transparent; 
  border-right: transparent; 
}

.testimonio::before{
  background: url(../img/rec/conte/comilla1.png)no-repeat;
  height: 50px;
  width: 100vw; /*only had height set, but tried to put width as well to see if it worked. It doesn't */
  content:"";
  position:absolute;
  display: inline-block;
  margin-left: -2rem; 
  padding-top: -2rem; 
  
}




@media screen and (min-width: 48em) {
    .quote-body .epsilon {
        line-height: 23px;
    }
}
.quote-img-wrapper {
    width: 285px;
    height: 353px;
    padding-left: 25px;
    margin-left: auto;
    position: relative;
    top: -80px;
    right: 0;
    overflow: hidden;
}
@media screen and (min-width: 30em) {
    .quote-img-wrapper {
        width: 325px;
        height: 380px;
        padding-left: 45px;
    }
}
@media screen and (min-width: 48em) {
    .quote-img-wrapper {
        width: 455px;
        height: 543px;
        padding-left: 55px;
    }
}
@media screen and (min-width: 61.9375em) {
    .quote-img-wrapper {
        top: -80px;
        right: 0;
    }
}
@media screen and (min-width: 85em) {
    .quote-img-wrapper {
        width: 575px;
        height: 680px;
        padding-left: 75px;
        top: -130px;
    }
}
@media screen and (min-width: 106.25em) {
    .quote-img-wrapper {
        width: 775px;
        height: 950px;
    }
}
.quote-img-wrapper .house-icon {
    width: 310px;
    height: 310px;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
@media screen and (min-width: 30em) {
    .quote-img-wrapper .house-icon {
        width: 335px;
        height: 335px;
    }
}
@media screen and (min-width: 48em) {
    .quote-img-wrapper .house-icon {
        width: 485px;
        height: 485px;
    }
}
@media screen and (min-width: 85em) {
    .quote-img-wrapper .house-icon {
        width: 585px;
        height: 585px;
    }
}
@media screen and (min-width: 106.25em) {
    .quote-img-wrapper .house-icon {
        width: 835px;
        height: 835px;
    }
}
.quote-img-wrapper .quote-img {
    -webkit-clip-path: none;
    clip-path: url(#quote-path);
}
.news-container {
    max-width: 966px;
    margin: 0 auto;
}
.news-header {
    margin-bottom: 40px;
}

.house-icon {
  
}

.relative{

  position: relative;
}





/* Style 9
   ----------------------------- */
.nine h1 {
  text-align:center; color:#222; letter-spacing:-.1rem;
  font-weight:400;font-family:"Futura", sans-serif;
}
.nine h1 span {
  margin-top: 5px;
    font-size:35px; color:black;  font-weight:normal; letter-spacing:-.1rem;
     font-family:"Futura", sans-serif; font-weight:500;

    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    grid-template-rows: 27px 0;
    grid-gap: 20px;
    align-items: center;
}

.nine h1 span:after,.nine h1 span:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    height: 5px;
  background-color:#f8f8f8;
}


.ten h1 {
  font-size:34px; font-weight:500; text-transform:uppercase;
}
.ten h1:before {
    background-color: #c50000;
    border-radius: 0.25rem;
    content: '';
    display: block;
    height: 0.25rem;
    width: 42px;
    margin-bottom: 1.25rem;
}



/* ------- Helper Styles -------------*/
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}



h1:before,
h1:after {
  background-color: #c50000;
}




.grafinetsa .nosotros .servicios .titulo::before
{
  content: '';
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50% ) rotateZ(3deg);
  width: 8em;
  height: 2em;
  z-index: -1;
  opacity: .1;
  border-left-color: rgba(255,255,255,0);
  border-right-color: rgba(255,255,255,0);
  border-style: solid;
  border-width: 2em 3em 0 6em;
}


.fondoimg {
    box-shadow: none; 
    background-color: rgba(255,255,255,0) !important;
    background-image: url(../img/rec/encabezado1.png) !important;*/
  height: auto; 
  background-repeat: no-repeat!important;
  background-size: cover!important;
  background-position: top center!important ;
  width: 100% !important; 
  

    
}