/*CSS:: LANDING PAGE
00.LP :: GENERAL
01.LP :: ACTIVATION
02.LP :: MUESTRAS
03.LP :: MONOGRÁFICO
04.LP :: CURSO LITIASIS
05.LP :: NL DELEGADAS
06.LP :: STAY TUNNED APP
07.FORM :: FORM ORDER METER
08.LP :: UNDER-CONSTRUCTION
09.LP :: CONCURSO-GRASES
10.LP :: ANALISIS DE CALCULOS LABORATORIO
*/

/*------------------------------------
00.LP :: GENERAL
------------------------------------*/
:root {
  --blue-grases: #1F1E41;
  --blue-dark-health: #1F1E41;
  --blue-dev-text-web-light: #339ac365;
  --blue-lit-light:#00b5e2;
  --blue-dev-text-web:#339AC3;
}

.list-disc{list-style-type: disc;}

html {
  scroll-behavior: smooth;
  /* overflow-x: hidden; */
}

body {
	font-family: 'Lato', sans-serif !important;
}

.fr {
    float: right;
    display: inline;
    margin: 0 0 0 10px;
}

.iblk {
    display: inline-block !important;
    zoom: 1;
    display: inline !important;
}

.blue-lit{color:#00b5e2!important;}
.bc-blue-lit{background-color:#00b5e2!important;}
.c-down{color:#ed8b00!important;}
.c-up{color:#43b02a!important;}
.c-balance{color:#007dba!important;}
.c-turquesa{color:#91E5E5!important;}
.blue-dark-health{color: var(--blue-dark-health)}
.hidden{display: none!important;}
.shadow{
	-webkit-box-shadow: 0px 0px 23px 0px rgba(184,223,242,1)!important;
	-moz-box-shadow: 0px 0px 23px 0px rgba(184,223,242,1)!important;
	box-shadow: 0px 0px 23px 0px rgba(184,223,242,1)!important;
}



h1{font-size:40px; font-weight:900; color:#243749;}
h2{font-size:24px; font-weight:400; color:#5D718A; line-height: 33px;}
h3{font-size:22px;color:#5D718A; line-height: 32px!important;}
h4{font-size:20px;color:#243749;font-weight: 900;}
.strong{font-weight: 900!important;}

.w-0{width:0%!important}
.w-5{width:5%!important}
.w-10{width:10%!important}
.w-15{width:15%!important}
.w-17{width:17%!important}
.w-20{width:20%!important}
.w-30{width:30%!important}
.w-35{width:35%!important}
.w-40{width:40%!important}
.w-45{width:45%!important}
.w-55{width:55%!important}
.w-60{width:60%!important}
.w-65{width:65%!important}
.w-70{width:70%!important}
.w-80{width:80%!important}
.w-85{width:85%!important}
.w-90{width:90%!important}
.w-95{width:95%!important}

.w-auto {width: auto!important;}
ul{list-style-type: none;}
ul.roboto{padding: 24px 0;}

.py-15{padding-left: 15px; padding-right: 15px;}

.background-main{
	min-height: 1000px;
	/* overflow: hidden; */
	background: rgb(255,255,255);
	background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 20%, rgb(228,247,255) 55%);
	background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 20%, rgb(228,247,255) 55%);
	background: linear-gradient(0deg, rgba(255,255,255,1) 20%, rgb(228,247,255) 55%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#E4FFF7",GradientType=1);
}

.section-gradient{
	padding-top:2%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 67%, rgba(228,247,255) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 67%, rgba(228,247,255) 100%);
	background: linear-gradient(0deg, rgba(255,255,255,1) 67%, rgba(228,247,255) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#e4fff7",GradientType=1);
}

.section-gradient-tao{
	padding-top:2%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 67%, rgba(228,247,255) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 67%, rgba(228,247,255) 100%);
	background: linear-gradient(0deg, rgba(255,255,255,1) 67%, rgba(228,247,255) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#e4fff7",GradientType=1);
}

#main-section img{
	padding: 0% 0 8% 0;
}

p.checked {
 position: relative;
 font-size: 20px;
 /* line-height: 33px; */
 color:#5D718A;
}

.custom-control-label{
 font-size: 16px;
}

form .form-group textarea, form .form-group input, form .form-group select {
   font-weight: 400!important;
   font-size: 16px!important;
}

.label-detail{
  font-size: 13px!important;
  font-style: italic!important;
  color:#6C757E!important;
}

.bg-form{
  background: aliceblue;
  border-radius: 8px;
}

.error_text{ font-size: 13px;}

.btn.btn-taocontrol{
  background: #c81c5d !important;
  padding: 15px 0px;
  color: #ffffff;
}
/*------------------------------------
lP:: RESPONSIVE
------------------------------------*/

@media only screen and (max-width: 767px){
	h1 {font-size: 27px;}
	h2 {font-size: 23px!important;}
	h3 {font-size: 21px;}
	h4 {font-size: 19px!important;text-align: center;}
	.background-main{min-height: 908px;padding-bottom: 180px;}
	.section-product {
    padding-top: 12%;
    padding-bottom: 25%;}
		p.checked {font-size: 18px;}
	.image-product{text-align:center;}
  .row {
    margin-right: 0px!important;
    margin-left: 0px!important;}

    .wxs100{width: 100%!important}
    .thanks-claim{line-height: 20px;}
}

/*------------------------------------
01.LP :: ACTIVATION
------------------------------------*/

#lp-activation h3{
  font-size: 24px;
  font-weight: 300;
}

#lp-activation .metric-box h3 {
    border-top: 2px solid #4ce7fb;
}

#lp-activation .device-icon {
    display: inline-block;
    width: 24px;
    height: 33px;
    position: relative;
    top: 8px;
    margin-right: 5px;
    background: url(../images/icons/decice-lp.svg) center center no-repeat transparent;
}

 footer #footer-lp {
  border:none!important;
  background: rgba(0,183,234,1);
  background: -moz-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(0,101,190,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,183,234,1)), color-stop(100%, rgba(0,101,190,1)));
  background: -webkit-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(0,101,190,1) 100%);
  background: -o-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(0,101,190,1) 100%);
  background: -ms-linear-gradient(top, rgba(0,183,234,1) 0%, rgba(0,101,190,1) 100%);
  background: linear-gradient(to bottom, rgba(0,183,234,1) 0%, rgba(0,101,190,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#0065be', GradientType=1 );
  padding: 60px 0;
}

#banner.inner-lp .full-img.landing-activation {
    background-image: url(../images/banner/lp/header-lp@3x.png);
}
#banner.inner-lp .full-img {
    opacity: 0;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    background-position: center center;
    background-size: cover;
    opacity: 1;
    animation-name: img-animation;
    animation-duration: .75s;
}

#banner.inner-lp {
    position: relative;
    display: block;
    padding: 0;
    width: 100%;
    height: 450px;
    background: #ffffff;
}

#banner.inner-lp .banner-ttl h1{font-size:47px; line-height: 71px;  width: 100%;}
#banner.inner-lp .banner-ttl h2{text-transform: uppercase; color:#fff; font-weight: 400;}

#lp-activation button{font-size: 20px;}

@media only screen and (max-width: 767px){
  #banner.inner-lp .banner-ttl h1.ttl {
    font-size: 35px;
    line-height: 42px;
    margin: 0 auto;
    max-width: 84%;
    padding: 25px 0;
  }
  #banner.inner-lp .banner-ttl h2{font-size:24px; line-height: 32px;}
}

/*------------------------------------
02.LP :: MUESTRAS
------------------------------------*/

#muestras label.btn {
  color: #989898!important;
  border: 1px solid #a1b1bc;
}
#muestras label.btn.btn-light {
  background-color: #ffffff;
}
#muestras label.btn.active {
  background-color: #243749;
  color: #fff!important;
}
#muestras .grupo{height:35px;}
#muestras label.custom-control-label{margin-top: -0.5px!important;}

@media only screen and (max-width: 767px){
   #muestras label.custom-control-label{margin-left: 23px;}
}


/*------------------------------------
03.LP :: MONOGRÁFICO
------------------------------------*/

.bg-gr-green {
    background: url(../images/lp/backgrounds/bg-gr-green.png) center bottom no-repeat transparent;
    background-size: cover;
    overflow: hidden;
}
#monografico h1, #monografico h3, #monografico p{
  color: #4b0d0d;
}

#monografico h1{
  font-weight: 900;
  font-size: 61px;
}

#monografico h3{
  font-size: 24px;
  line-height: 32px;
}
#monografico p{
  font-size: 22px;
  line-height: 30px;
}

#monografico .bg-form{
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 5px 54px #243749;
}

#monografico form .form-group input, #monografico form .form-group textarea{
  border: none!important;
}

/*------------------------------------
04.LP :: CURSO LITIASIS
------------------------------------*/

.bg-gr-violet {
    background: url(../images/lp/backgrounds/bg-gr-violet.png) center bottom no-repeat transparent;
    background-size: cover;
    overflow: hidden;
}

#curso-litiasis h1, #curso-litiasis h3, #curso-litiasis p{
  color: #4b0d0d;
}

#curso-litiasis h1{
  font-weight: 900;
  font-size: 61px;
}

#curso-litiasis h3{
  font-size: 24px;
  line-height: 32px;
}
#curso-litiasis p{
  font-size: 22px;
  line-height: 30px;
}

#curso-litiasis .bg-form{
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 5px 54px #243749;
}

#curso-litiasis form .form-group input, #curso-litiasis form .form-group textarea{
  border: none!important;
}

@media only screen and (max-width: 767px){
  #curso-litiasis h1{font-size: 30px;}
}

/*------------------------------------
05.LP :: NL DELEGADAS
------------------------------------*/
#delegadas h1, #delegadas h3, #delegadas p{
  color: #4b0d0d;
}

#delegadas h1{
  font-weight: 900;
  font-size: 61px;
}

#delegadas h3{
  font-size: 24px;
  line-height: 32px;
}

#delegadas p{
  font-size: 22px;
  line-height: 30px;
}

#delegadas .bg-form{
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 5px 54px #243749;
}

#delegadas .bg-form h4{
  font-weight: 400!important;
}

#delegadas form .form-group input, #delegadas form .form-group textarea{
  border: none!important;
}

.bg-gr-blue {
    background: url(../images/lp/backgrounds/bg-gr-blue.png) center bottom no-repeat transparent;
    background-size: cover;
    overflow: hidden;
}

/*------------------------------------
06.LP :: STAY TUNNED APP
------------------------------------*/
.bg-gradient-blue {
  background: -webkit-linear-gradient(100deg, #3fdacc 0%, #2490e8 100%);
  background: -o-linear-gradient(100deg, #3fdacc 0%, #2490e8 100%);
  background: linear-gradient(100deg, #3fdacc 0%, #2490e8 100%);
}

.header-form{
  height: auto;
  background: -webkit-linear-gradient(#3fdacc 0%, #2490e8 100%);
  background: -o-linear-gradient(#3fdacc 0%, #2490e8 100%);
  background: linear-gradient(#3fdacc 0%, #2490e8 100%);
  border-radius: 8px 8px 0 0;

}
#stay-tunned-app h1, #stay-tunned-app h2, #stay-tunned-app h3, #stay-tunned-app p{
  color: #243749;
}

.stay-tunned{
  margin-bottom:200px;
}

#stay-tunned-app h1{
  font-weight: 900;
  margin-bottom:29px;
}

#stay-tunned-app h3{
  font-size: 24px;
  margin-bottom:38px;
}

#stay-tunned-app p{
  font-size: 22px;
  line-height: 30px;
}

#stay-tunned-app .bg-form{
  background-color: rgba(255,255,255,1);
  box-shadow: 0px 5px 54px #243749;
}

#stay-tunned-app form .form-group input, #stay-tunned-app form .form-group textarea{
  border: 1px solid #A1B1BC;
}


@media only screen and (max-width: 767px){
  /* #curso-litiasis h1{font-size: 30px;} */
}

/*------------------------------------
07.FORM :: FORM ORDER METER
------------------------------------*/

.bg-gr-violet {
    background: url(../images/lp/backgrounds/bg-gr-violet.png) center bottom no-repeat transparent;
    background-size: cover;
    overflow: hidden;
}

#form-meter h1, #form-meter h3, #form-meter p{
  color: #4b0d0d;
}

#form-meter h1{
  font-weight: 900;
  font-size: 30px;
}

#form-meter h3{
  font-size: 18px;
  line-height: 29px!important;
}
/* #form-meter p{
  font-size: 22px;
  line-height: 30px;
} */

#form-meter .bg-form{
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 5px 54px #243749;
}

#form-meter form .form-group input, #form-meter form .form-group textarea{
  border: none!important;
}

@media only screen and (max-width: 767px){
  #form-meter h1{font-size: 30px;}
}

/*------------------------------------
08.FORM :: UNDER CONSTRUCTION
------------------------------------*/
#under-construction h1{
  color:#34597E;
  font-size: 65px;
  font-weight: 900;
}
#under-construction h2{
  color:#339AC3;
  font-size: 32px;
  font-weight: 900;
  line-height: 42px;

}
#under-construction p{
  color:#34597E;
  font-size:20px;
}

#under-construction a{
  color:#34597E;
  font-weight: 900;
}

#under-construction{
  height: 100vh;
}
#under-construction .logo img{
  padding-bottom: 70px;
  width: 145px;
}

@media only screen and (max-width: 767px){
  #under-construction h1{
    font-size: 55px;
  }

  #under-construction h2{
    line-height: 32px;
    }

    #under-construction .logo img{
      padding-bottom: 55px;
      width: 140px;

    }
}

/*-------------------------------------
09:: CONCURSO GRASES
-------------------------------------*/
:root {
  --blue-grases: #1f1e41;
  --blue-grases-transparent: color-mix(in srgb, var(--blue-grases), transparent 70%);
  --ganador:#f39200;
  --shadow: 0px 0px 23px 0px rgb(225 241 249) !important;
}

.close-convocatoria {
  border-radius: 5px;
  border: 1px solid var(--blue-grases);
  padding-inline: 20px;
  padding-block: 10px;
  inline-size: max-content;
  backdrop-filter: blur(15px);
}
.close-convocatoria {
  border-radius: 5px;
  border: 1px solid var(--blue-grases);
  padding-inline: 20px;
  padding-block: 10px;
  inline-size: max-content;
  backdrop-filter: blur(15px);
}
.box-glass {
  border-radius: 5px;
  border: 1px solid var(--blue-grases-transparent);
  padding-inline: 30px!important;
  padding-block: 50px!important;
  inline-size: max-content;
  backdrop-filter: blur(15px);

  h2{font-size: 24px; padding-block: 10px;

  }

}

.blue-grases{color:var(--blue-grases)}

.grases .ganador-premio {
  font-size: 28px;
  font-weight: 900;
  color: var(--ganador) !important;
}

.grases .caso-ganador{
  border: 1px solid var(--blue-grases);
  background-color:#fff;
  box-shadow:var(--shadow);
  h2{
    text-transform: lowercase;
    &:first-letter{text-transform: uppercase;}
  }
  
  
}
.grases .caso{
  border: 1px solid var(--blue-grases);
  background-color:#fff;
  box-shadow:var(--shadow);

  h2{
    text-transform: lowercase;
    &:first-letter{text-transform: uppercase;}
  }

}
.grases .caso::before{width: 0;}

.blue-grases{color: var(--blue-grases);}


#banner.grases .btn.btn-outline-devicare {
  box-shadow: 0 0 0px #00B9EA!important;
}

.grases .btn, .grases .btn:visited {
  color: var(--blue-grases)!important;
  font-size: 16px;
  display: block;
  border: none;
  width: 100%;
  box-shadow: none !important;
  text-transform: none!important;
  font-weight: 700;
}

.grases .btn.btn-dark, .grases .btn.btn-dark, .grases .btn.btn-dark:hover, .grases .btn.btn-dark:active, .grases .btn.btn-dark:visited {
  background-color: var(--blue-grases);
  color: #fff!important;
}

.grases .btn.btn-outline-dark, .grases .btn.btn-outline-dark, .grases .btn.btn-outline-dark:hover, .grases .btn.btn-outline-dark:active,.grases .btn.btn-outline-dark:visited {
  background-color: #fff;
  border: 1px solid var(--blue-grases);
  color: var(--blue-grases);
  white-space: nowrap;
}

#banner.hero-lg.grases {
  background-image: url('../images/lp/concurso-grases/banner-hero-grases.png');
}

.grases h4 {
  color: var(--blue-grases);
  font-size:24px;
}

.grases h3 {
  font-size: 22px;
  color: var(--blue-grases);
  line-height: 32px!important;
}

.grases h2 {
  color: var(--blue-grases);
}

.grases .h1 {
  color: var(--blue-grases);
  font-size:48px;
}


.grases .card{
    font-size: 13px;
    color: var(--blue-grases);
}

.blockquote{font-size: 18px;}

#about-grases img, #hitos-grases img, #reconocimientos-grases img{width:75%;}
#hitos-grases li{
  font-size: 16px;
  padding:5px 0;
  /* line-height: 24px; */
}
#hitos-grases li::marker{
  font-size: 18px;
  font-weight: bold;
}
#hitos-grases ul, #reconocimientos-grases li{
    list-style-type: disc!important;
}

#reconocimientos-grases li{
  margin:5px 0; 
  border-radius: 5px; 
  padding: 16px;
  color: var(--blue-grases);
}

#reconocimientos-grases .list-group-item+.list-group-item {border-top-width: 1px;}

#miembros-jurado-grases .h6{ 
  font-weight: 900;
  font-size:17px;
  line-height: 25px!important;
}

#miembros-jurado-grases .time{ 
  font-size:16px; color: var(--blue-grases);
}
#miembros-jurado-grases img{ 
  width: 200px;
}

#colaboran-grases h4{
  font-size:17px;
}
#colaboran-grases img{
  height: 25%!important;
}

#header-grases{
  background-color: var(--blue-grases)!important;
}

#grases-footer footer-bottom {background-color: var(--blue-grases);}


#myBtn {
  display: none; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background-color: var(--blue-grases); 
  color: white; 
  cursor: pointer; 
  padding: 10px 15px; 
  border-radius: 10px;
  position: fixed; 
  bottom: 20px; 
  right: 30px;
}
#myBtn:hover {
opacity: 0.7;
}

.accordion {
  color: var(--blue-grases);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: 0.4s;
  position: relative;
  border-radius:10px;
  border-color: #3c495608;
}

.accordion::after {
  content: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%231F1E41"%3e%3cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3e%3c/svg%3e');
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  right: 10px; 
  transform: translateY(-50%);  
}

.active::after {
  transform: translateY(-50%) rotate(180deg); 
}

.active, .accordion:hover {
  background-color: #21252908; 
  border:1px solid var(--blue-grases);
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

.grases form label{
  left: 7px!important;
  color:var(--blue-grases);
  font-weight: 700;
}

.grases form input, .grases form select{border: 1px solid #A1B1BC}

.grases form input::file-selector-button {
  color: var(--blue-grases)!important;
  font-size: 14px!important;
  padding: 0.6em!important;
  background-color: #cccafb !important;
}

.grases .modal-body{font-size:16px; line-height: 36px!important;}
.grases .modal-header h1{font-size:24px!important;}

 
@media only screen and (max-width: 767px){
  #about-grases img, #hitos-grases img, #reconocimientos-grases img{width:100%;}
  #banner .buttons-group{line-height: 40px;}
  #participación-premio .buttons-group{line-height: 61px;}
}

/*------------------------------------------
 10.LP :: ANALISIS DE CUESTIONARIO 
 -------------------------------------------- */

#cuestionario-analisis h2 {
  font-size: 32px;
  font-weight: 900;
  color: var(--blue-dark-health);
}
#cuestionario-analisis h3 {
  font-size: 24px;
  font-weight: 900;
  /* color: var(--blue-dark-health); */
  color: var(--blue-dev-text-web);
  border-bottom: 1px solid var(--blue-dev-text-web);
  /* border-bottom: 1px solid var(--blue-dark-health); */
  padding-bottom:10px;
}
#cuestionario-analisis h4 {
  font-size: 18px;
  font-weight: 900;
  color: var(--blue-dark-health);
  padding-bottom:6px;
}
#cuestionario-analisis label{
  color: var(--blue-dark-health);
  font-weight: 700;
  /* font-size: 17px;
  padding-top:12px */
}
#cuestionario-analisis input,
#cuestionario-analisis select,
#cuestionario-analisis textarea{
  border-color: #A1B1BC;
}

.btn-dark{
  background-color: var(--blue-dark-health)!important;
}
.btn-outline-dark{
  border-color: var(--blue-dark-health)!important;
}

#cuestionario-analisis input::file-selector-button {
  color: var(--blue-dark-health)!important;
  font-size: 14px!important;
  padding: 0.6em!important;
  background-color: var(--blue-dev-text-web-light)!important;
}

#cuestionario-analisis .form-check-input:checked {
  background-color: var(--blue-dev-text-web)!important;
  border-color: var(--blue-dev-text-web)!important;
}

/* #cuestionario-analisis .form-floating > label{
  margin-left: 10px;
} */