/* CSS Document */
body {font-family: 'Raleway', sans-serif; }
html {scroll-behavior: smooth;}

.verde-a { color: #21cd58}

.azul-1 {color:#004cff}
.azul-2 {color:#0075ff}
.azul-3 {color:#1da6ef}
.verde-1 {color:#1de2bc}
.verde-2 {color:#00ed90}
.verde-3 {color:#07eb43}

.gris-t { color: #646464}

 
.semibold { font-weight: 600}
.bold { font-weight: 700}
.extrabold { font-weight: 800}

nav { background: #ffffff  }

.container-wrap-nav {
	position:fixed;
	z-index:1;
    width: 100%;
    background: #cccccc
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.container-wrap-nav + .content {
  padding-top: 200px;
}

.container-wrap-nav-mb {
	position:fixed;
	z-index:200;
    width: 100%;
    background: #ffffff
}

.nav-up {height: 136px}
.urg { float: right; font-family: 'Exo', sans-serif; color: #606060; padding: 40px 30px 0 0;}
.urg-tel { font-size: 22px; font-weight: 800; letter-spacing: 3}
.urg-txt { font-size: 15px; font-weight: 500; text-transform: uppercase; line-height: 2px}
.pad-menu-links { padding-left: 30px!important}
.logo-ok { padding: 35px 0 0 30px; width: 245px; position: absolute top left}

.logo-ok-mb { padding: 30px 0 15px 0; width: 140px;}
.urg-mb { font-family: 'Exo', sans-serif; color: #606060; padding: 5px 0;}
.urg-tel-mb { font-size: 21px; font-weight: 800; letter-spacing: 3}
.urg-txt-mb { font-size: 14px; font-weight: 500; text-transform: uppercase;}
.urg-txt-link { color: #606060; text-decoration: none}
.urg-txt-link a {font-size: 14px; font-weight: 500; text-transform: uppercase; text-decoration: none}
.urg-txt-link a:hover {text-decoration: underline; color: #2F2E2E!important}

.rojo {color:#ed2224}

.app-acceso  { width: 350px}

/* menu */
#menu-ok { position: relative
}


#menu-ok ul li {
}

#menu-ok ul {
height: 66px;
list-style:none;
margin:0; 
z-index: 300;
background: #2b4cfb
}

#menu-ok ul a {
  font-family: 'Exo', sans-serif;
  display:block;
  color:#ffffff;
  text-decoration:none;
  font-weight:600;
  font-size:20px;
  padding-top:20px;
  padding-bottom: 16px
}


#menu-ok ul a:hover { color: #1da6ef}

#menu-ok ul li {
  position:relative;
  float:left;
  margin:0;
  padding:0;
}

#menu-ok ul li:hover {
  color:#d5804f
}

#menu-ok ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:30px;
  padding:0;
  background: none;
    
}

#menu-ok ul ul li {
  float:none;
  width: 200px;
  background: rgba(255, 255, 255, 0.8)
}

#menu-ok ul ul a {
  line-height:120%;
  padding:10px 15px;
  color: #646464;
  font-size: 15px
}


#menu-ok ul ul a:hover {
  color: #004cff;

}



#menu-ok ul li:hover > ul {
  display:block;

}

/*Slider principal*/

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 17px;
    height: 17px;
    padding: 0;
    margin-right: 6px;
    margin-left: 6px;
    text-indent: -999px;
    cursor: pointer;
    background: none;
    background-clip: padding-box;    
    border: #8e00a5 solid 2px;
    transition: opacity .6s ease;
    border-radius: 50%;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: left;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 2rem;
    margin-left: 3%;
    list-style: none;
}


.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 5rem;
    left: 3%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: left;
}

.carousel-caption h5 { font-weight: 900; color: #8e00a5; font-size: 60px; line-height: 58px } /*font-size: 60px5*/
.carousel-caption p { font-weight: 600; color: #8e00a5; font-size: 27px; line-height: 25px; margin-top: 2% } 


/*Accesos*/
#accesos { padding: 80px 0 10px 0}
#accesos h10 {padding: 15px 0 40px 0!important; display: block;}
#accesos a { font-weight: 600; font-size: 24px;  text-decoration: none; opacity: 1; display: block; width: 100%; height: 100% }
#accesos a:hover { opacity: .5; transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -webkit-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; color: #828282}
.ico { width: 75%}

/*Accesos con foto*/
#accesos-foto { }
#accesos-foto a { font-weight: 600; font-size: 33px; line-height: 29px; text-decoration: none; color: #fff}
.div-link-cont {position: absolute; right: 10%; bottom: 3rem; display: block}
.acc-foto-a { background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 15%, rgba(33,205,88,1) 15%); position: relative}
.acc-foto-b { background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 15%, rgba(0,117,255,1) 15%); position: relative}
.acc-foto-c {background: rgb(255,255,255); background: linear-gradient(180deg, rgba(255,255,255,1) 15%, rgba(29,210,255,1) 15%); position: relative}
.destacar-ok { font-weight: 900!important; font-size: 44px; line-height: 29px}
.verde-acceso-b { color: #21cd58}
.azul-acceso-c { color: #004cff}
.img-acceso { height: 220px; }


/*Novedades Home*/
#novedades-home { padding: 45px 0 90px 0; background: #e2e2e2}
#novedades-home h1 {font-weight: 800; font-size: 48px; color: #712280; padding-bottom: 15px}

.carousel-control-next-icon {
    backposition: absolute; background-image: url( ../img/flecha-novedades-next.svg); background-size: 55px 70px; position: absolute; left: -10px; z-index: 200
}

.carousel-control-prev-icon {
    background-image: url(../img/flecha-novedades-prev.svg); background-size: 55px 70px; position: absolute; left: -70px; z-index: 200
}

#carousel-novedades h5 { font-size: 26px; line-height: 36px; font-weight: 900; color: #21cd58 }
#carousel-novedades p { line-height: 27px; font-size: 21px; color: #646464}

.novedades-izq {float: left; padding-right: 0; padding-left: 0;}
.novedades-dcha {float: left; padding: 30px 80px 30px 30px; min-height: 200px}

.carousel-control-next, .carousel-control-prev {
    width: 5%; 
    opacity: 1;

}

#pre-footer { min-height: 130px; background: #004cff; padding-bottom: 15px }
#post-footer { min-height: 105px; background: #505050 }

.logo-ok-footer { height: 100px; padding-top: 35px}
.ico-rrss { }
.rrss { width: 80px; padding: 25px 10px 0 0}

.btn-legales {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 12px;
    color: #ffffff;
    background: #0075ff;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    margin: 0 auto;
    text-decoration: none; 
    margin-top: 35px;
    margin-right: 15px
}

.btn-legales:hover { background: #1da6ef; color: #ffffff}
.legales { font-size: 12px; color: #ffffff; font-weight: 600; padding-top: 35px}

/*Nosotros*/
#encabezado-pcipal { position: relative!important}

#encabezado-pcipal h2 {
    position: absolute;
    top: 40%;
    left: 63px;
    text-align: left;
    background: rgb(0,205,31);
    background: linear-gradient(90deg, rgba(0,205,31,1) 7%, rgba(0,75,241,1) 83%);
    /* clip informático */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: 900;
    font-size: 63px;
    width: fit-content;
    line-height: 51px;
    height: 100%
}

.subtitulos-verde { font-size: 21px; font-weight: 800; color: #21ca58 }
.subtitulos-gris { font-size: 21px; font-weight: 800; color: #646464 }

.subtitulos-verde2 {font-weight: 700; color: #21ca58 }
.subtitulos-gris2 { font-weight: 700; color: #646464;  font-size: 21px }

.seccion-banners {background: rgb(142,214,133);
background: linear-gradient(90deg, rgba(142,214,133,1) 0%, rgba(107,131,247,1) 98%); padding: 100px 0}

#central { padding-top: 80px; padding-bottom: 60px}
#central h3 { color: #21cd58; font-size: 36px; font-weight: 800; padding-bottom: 30px; line-height: 36px}
#central p { font-size: 20px; line-height: 26px; color: #646464}

.planes-cucarda { width: 200px; padding-top: 1px; display: block; margin: 0 auto}

.cucarda-circ { width: 280px;}


.borde-circulo { border-left: #b7b9be solid 1px}



.button-form {
  background-color: #FFFFFF; /* Green */
  border: none;
  color: #696c6e;
  padding: 15px 60px 15px 80px;
  text-align: left;
  line-height: 21px;	
  text-decoration: none;
  display: inline-block;
  font-size: 21px;
  background: url(../img/flecha-formulario.svg) no-repeat left top;
  font-weight: 900
}

.button-form:hover {color: #004cff}

#form-ok {}
#form-ok label,#captcha label { font-size: 18px; color: #696c6e; font-weight: 600 }
#form-ok .form-control,#captcha .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background: rgb(232,247,229);
    background: linear-gradient(90deg, rgba(232,247,229,1) 0%, rgba(222,234,248,1) 98%);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .75rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border: none;
}


.padding-form-col { padding-right: 70px}

#terminos-legales {padding: 100px 15px 100px 15px}
#terminos-legales h3 { color: #21cd58; font-size: 36px; font-weight: 800; padding: 0 15px 50px 15px; line-height: 36px}
#terminos-legales h4 { color: #21cd58; font-size: 18px; font-weight: 800; padding-bottom: 10px; padding-top: 20px; line-height: 22px}
#terminos-legales p { font-size: 16px; line-height: 24px; color: #646464!important; font-weight: 600}
#terminos-legales a { text-decoration: none; color: #646464;}
#terminos-legales a:hover { color: #004cff}

.envianos-cucarda { width: 380px; margin-left: 70px}

#terminos-alta-usuario {padding: 100px 15px 100px 15px}
#terminos-alta-usuario h3 { color: #21cd58; font-size: 36px; font-weight: 800; padding: 0 15px 50px 15px; line-height: 36px}
#terminos-alta-usuario h4 { color: #21cd58; font-size: 18px; font-weight: 800; padding-bottom: 10px; padding-top: 0; line-height: 5px}
#terminos-alta-usuario p { font-size: 16px; line-height: 24px; color: #646464!important; font-weight: 500}
#terminos-alta-usuario a { text-decoration: none; color: #646464;}
#terminos-alta-usuario a:hover { color: #004cff}


.planes-p { width: 80%}
.planes-p2 { padding-left: 40px; border-left: solid #797979 1px; width: 80%}
.mail-casilla {color: #21ca58; font-weight: 700}
.mail-casilla a {text-decoration: none; color: #21ca58; font-weight: 700}
.mail-casilla:hover { color: #0075ff}
#planes-prev hr { height: 1px!important; color:#21ca58; width: 75px; opacity: 100}

.caja-legales { border-top: #696c6e solid 1px; padding: 40px 0 }
.p-legales-form { font-size: 18px; line-height: 22px; color: #646464; padding: 0 15px}

.modal-exito {background: rgb(91,198,67); background: linear-gradient(72deg, rgba(91,198,67,1) 9%, rgba(26,81,245,1) 95%); padding: 100px}
.modal-exito h20 { color: #fff; font-size: 31px; line-height: 28px; font-weight: 900; margin-bottom: 30px!important }
.modal-exito p { color: #fff!important; font-size: 21px; line-height: 21px; font-weight: 700; padding-top: 20px }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-radius: 0;
    outline: 0;
}

.btn-close-ok {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #fff;
    background: transparent url( ../img/btn-close.png) center/1em auto no-repeat;
    border: none;
    border-radius: .25rem;
    opacity: .5;
    position: absolute;
    top: 15px;
    right: 15px;
}

.dibujo { width: 100%; margin: 0 auto; padding-bottom: 5px}

.azul-1-bg {background:#004cff}
.azul-2-bg {background:#0075ff}
.azul-3-bg {background:#1da6ef}
.verde-1-bg {background:#1de2bc}
.verde-2-bg {background:#00ed90}
.verde-3-bg {background:#07eb43}


.modal-home {padding: 70px; text-align: left;}
.modal-home h20 { color: #fff; font-size: 31px; line-height: 28px; font-weight: 900; margin-bottom: 30px!important }
.modal-home p { color: #fff!important; font-size: 21px; line-height: 21px; font-weight: 500; padding-top: 20px }
.soy-socio-col { padding-left: 50px}


#exampleModal1 .modal-dialog {
    max-width: 650px;
    margin: 1.75rem;
}

#exampleModal2 .modal-dialog {
    max-width: 650px;
    margin: 1.75rem;
}

#exampleModal3 .modal-dialog {
    max-width: 650px;
    margin: 1.75rem ;
}

#exampleModal4 .modal-dialog {
    max-width: 650px;
    margin: 1.75rem ;
}

#exampleModal5 .modal-dialog {
    max-width: 650px;
    margin: 1.75rem ;
}

#exampleModal6 .modal-dialog {
    max-width: 650px;
    margin: 1.75rem ;
}


/*Contacto*/
#contacto {padding-top: 80px; padding-bottom: 60px; font-size: 21px}
#contacto h3 { font-size: 24px; color: #004cff; font-weight: 900}
#contacto h4 { font-size: 21px; line-height: 26px; color: #21ca58; font-weight: 800; margin-bottom: 0}
.contacto-verde { color: #21ca58}
#contacto a { text-decoration: none; color: #646464; font-weight: 800}
#contacto a:hover { color: #1da3ec}
.tel-atencion-soc {font-size: 34px; color: #004cff; font-weight: 700; line-height: 30px}
.centro-txt {color: #004cff; font-weight: 500;line-height: 20px}
.ajuste-line { padding-top: 5px; padding-bottom: 20px; line-height: 26px}
.ajuste-col-cont { margin-top: 0}
#contacto hr { height: 1px!important; color:#004cff; width: 75px; margin-bottom: 40px; opacity: 100}
.contacto-p-ajuste { font-size: 18px}

.shadow-emergencia { 
    -webkit-filter: drop-shadow( 5px 5px 5px #ccc ); filter: drop-shadow( 5px 5px 5px #ccc );
    
    /* Same syntax as box-shadow */ }


/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
.error{
	font-family:Verdana, Geneva, sans-serif;
	color:#FF0060;
	font-size:11px;
	margin-top:5px;
	text-align:left;
	display:none;
}
.onerror input,.onerror select{
	border:1px solid #FF0060!important;
}
.onerror .error{
	display:block;
}
.mb-generico{
	padding:0;
}
.reformular{
	font-size:11px;
	text-align:left;
}
/*
[data-captcha="si"] img{
	width:100%;
	height:auto;
	border-radius:10px;
	
}*/
[data-captcha="si"]{
	height:50px;
	width:100%;
	border-radius:10px;
}

#captcha{
	margin-bottom:40px;
}
.labelcode{
	margin-top:15px;
}

#broquel{ width: 100%; height: 100%; position: fixed; z-index: 270000;background: url(../images/rolling.svg) center center no-repeat;display: none; top:0; left: 0;}
body{
	overflow-x:hidden;
}

/*MODAL PLAN*/
/*.modal-plan { min-width: 1000px; margin: 0 auto}*/

.header-modalok { min-height:280px; background: rgb(91,198,67); background: linear-gradient(72deg, rgba(91,198,67,1) 9%, rgba(26,81,245,1) 95%);}

.modal-body-plan {
    position: relative;
    flex: 1 1 auto;
    padding:0;
}

.centro-modal-plan { background: #fff; padding-top: 10px; padding-bottom: 10px; border-bottom: #606060 solid 1px; margin: 0 15px; color: #606060}
#exampleModalPlan .modal-dialog {
    max-width: 700px;
    margin: 1.75rem auto;
}

#exampleModalPlan20 .modal-dialog {
    max-width: 700px;
    margin: 1.75rem;
}

#exampleModalPlan30 .modal-dialog {
    max-width: 700px;
    margin: 1.75rem;
}


#exampleModalPlan20 .header-modalok { min-height:280px; background: rgb(91,198,67); background: linear-gradient(72deg, rgba(139,0,162,1) 9%, rgba(0,76,255,1) 95%);}


#exampleModalPlan30 .header-modalok { min-height:280px; background: rgb(91,198,67); background: linear-gradient(72deg, rgba(0,92,255,1) 9%, rgba(0,45,168,1) 95%);}


.img-modal-plan { height: 80px}
.tit-modal-plan {color: #fff; font-size: 26px; line-height: 24px; padding-top: 180px; display: block; padding-left: 130px}

#exampleModalPlan20 .zocalo-plan { height: 30px; background: linear-gradient(72deg, rgba(139,0,162,1) 9%, rgba(0,76,255,1) 95%);}

#exampleModalPlan30 .zocalo-plan { height: 30px; background: linear-gradient(72deg, rgba(0,92,255,1) 9%, rgba(0,45,168,1) 95%);}

.zocalo-plan { height: 30px; background: linear-gradient(72deg, rgba(91,198,67,1) 9%, rgba(26,81,245,1) 95%);}

.vigentes{
    margin-left: 5%;
    margin-top: 5%;
    color: white!important;
    border-top: 1px solid white;
    max-width: 620px;
    padding-top: 15px;
}

#exampleModalPlan .modal-dialog {
    max-width: 700px;
    margin: 1.75rem;
}
.violeta { font-weight: 900; color: #8e00a5; font-size: 60px; line-height: 58px; } /*font-size: 60px5*/
.verde {font-weight: 900; color: #21cd58; font-size: 60px; line-height: 58px;  } 
.txtvioleta { font-weight: 900; color: #8e00a5;  font-size: 27px; line-height: 27px; }
/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
/*##############################################################################################*/
@media (max-width: 1024px){
.ico { width: 60%}
.container-wrap-nav + .content {padding-top: 0;}
.content { padding-top: 260px!important}
.carousel-caption {position: absolute;right: 15%;top: 2rem;left: 3%;padding-top: 1.25rem;padding-bottom: 1.25rem;color: #fff;text-align: left;}
.carousel-control-next-icon {display: none}
.borde-circulo { border-left:none }
.padding-form-col { padding-right: 15px}
.planes-p { width: 100%}
.soy-socio-col { padding-left: 15px; padding-top: 50px}
.ajuste-col-cont { margin-top: 0}
.planes-p2 { padding-left: 5px; border-left: none; border-top: solid #797979 1px; width: 100%; padding-top: 30px; margin-top: 30px}
.txtvioleta { display:none;}
.carousel-indicators{display:none;}
.urg-txt-link a {font-size: 12px}

}

@media(max-width:991px){
	#recaptcha,#captcha{
		padding-left:0!important;
		padding-right:0!important;
	}
	
}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 768px) {
.ico { width: 50%}
.container-wrap-nav + .content {padding-top: 0;}
#accesos a { font-size: 20px; }
#accesos { padding: 40px 0 10px 0}
.content { padding-top: 170px!important}
.rrss { width: 60px; padding: 25px 10px 0 0}
.carousel-indicators {display: none}
.carousel-caption h5 { font-weight: 900; color: #8e00a5; font-size: 20px; line-height: 20px; padding-left: 15px } /*font-size: 60px5*/
.carousel-caption p { font-weight: 600; color: #8e00a5; font-size: 12px; line-height: 12px; margin-top: 2%; padding-left: 15px }

.violeta { font-weight: 900; color: #8e00a5; font-size: 20px;line-height: 20px; } /*font-size: 60px5*/
.verde {font-weight: 900; color: #21cd58; font-size: 20px; line-height: 20px; } 
.txtvioleta { font-weight: 900; color: #8e00a5;  font-size: 12px;  line-height: 12px;}

.carousel-caption {position: absolute; right: 20px; top: 0.30rem;color: #fff; text-align: left;}
.carousel-control-next-icon {display: none}
#encabezado-pcipal h2 {top: 30%; left: 20px; font-size: 25px; line-height: 25px}
#encabezado-pcipal h3 {top: 30%; left: 20px; font-size: 25px; line-height: 25px}
.borde-circulo { border-left:none }
.cucarda-circ { width: 280px; padding-top: 30px}
.padding-form-col { padding-right: 15px}
.envianos-cucarda { margin-left: 0; margin-top: 25px}
.planes-p { width: 100%}
.soy-socio-col { padding-left: 15px; padding-top: 50px}
.ajuste-col-cont { margin-top: 30px}
.planes-p2 { padding-left: 5px; border-left: none; border-top: solid #797979 1px; width: 100%; padding-top: 30px; margin-top: 30px}
.tit-modal-plan {color: #fff; font-size: 26px; line-height: 24px; padding-top: 30px; display: block; padding-left: 40px; padding-bottom: 30px}	
#planes-prev p { width: 100%}
.urg-tel { font-size: 16px; font-weight: 800; letter-spacing: 3}
.urg-txt { font-size: 12px; font-weight: 500; text-transform: uppercase; line-height: 2px}

.urg-tel-mb { font-size: 16px; font-weight: 800; letter-spacing: 3}
.urg-txt-mb { font-size: 12px; font-weight: 500; text-transform: uppercase;}
    
.dibujo { width: 50%; margin: 0 auto; padding-bottom: 30px}
}
.urg-txt-link a {font-size: 12px}


//*Medium devices (tablets, 768px and up)*/
@media (max-width: 992px) {
}

/*@media (max-width: 1024px){
     h1 {font-size: 64px; line-height: 64px;}
}*/


//*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

}

//*X-Large devices (large desktops, 1200px and up)
*//
@media (min-width: 1200px) { }

//*XX-Large devices (larger desktops, 1400px and up)
*/
@media (min-width: 1400px) {  }