/*Radio buttons */
.custom-control-input:checked~.custom-control-label::before {
    color: var(--color-light);
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
}
.custom-control-label::before {
    border: var(--color-secondary) solid 1px;
}
.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.7rem;
    border: 1px solid transparent;
}
.check_navegable{
	border: 1px solid var(--color-secondary);
	background: var(--color-bg);
}

/*ESTILOS GENERALES*/
.alert-warning {
	color: var(--color-secondary);
	background-color: var(--color-light);
	border-color: var(--color-secondary);
	border-radius: 0px;
	border-width: 2px;
}

/*Salto de bloques*/
.nav_salto_bloques{
	padding: 0px;
	z-index: 2;
}
.nav_salto_bloques .navbar-nav{
	flex-direction: row-reverse;
}
.nav_salto_bloques li{
	background: var(--color-secondary);
	color: var(--color-light);
	padding-top: 5px;
	padding-bottom: 5px;
}
.nav_salto_bloques a{
	color: var(--color-light) !Important;
    font-weight: 400 !Important;
}
.nav_salto_bloques a:hover, .nav_salto_bloques a:focus{
	color: var(--color-light);
	text-decoration: underline;
}
.btn_salto{
	background: var(--color-secondary);
	border-radius: 0px;
	border-color: transparent;
	color: var(--color-light) !Important;
}

/*Paginación*/
.page-item.active .page-link {
    z-index: 1;
    color: var(--color-light) !important;
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    font-weight: 700;
}
.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--color-dark);
    background-color: var(--color-light);
    border: 1px solid var(--color-secondary);
    font-weight: 600;
}
.page-link:hover, .page-link:focus {
    z-index: 2;
    color: var(--color-light);
    text-decoration: none;
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}




body{
	background-color: var(--color-bg);
}


/*FORMULARIOS*/
.error_formulario{
    color: #721c24;
}
.error_formulario:hover, .error_formulario:focus{
    color: #721c24;
    text-decoration: underline;
}

/*ENLACES*/
a{
	color: var(--color-primary);
	text-decoration: none;
}
a:hover, a:focus{
	color: var(--color-primary);
	text-decoration: underline;
}

/*ALERT*/
.alert-heading {
  color: inherit;
  font-weight: 700;
  margin-bottom: 3px;
  font-size: 18px;
}

/*MI CUENTA*/
.cuadro_blanco_contenedor{
	background: var(--color-light);
	padding: 15px;
	border: 1px solid var(--color-accent);
}
.nav_hc{
	background: var(--color-light);
}
.nav_hc > a{
	border-bottom: 1px solid var(--color-accent) !Important;
	border-left: 1px solid var(--color-accent) !Important;
	border-radius: 0px !Important;
	color: var(--color-text) !Important;
	padding: 10px !Important;
}
.nav_hc > a :first{
	border-top: 1px solid var(--color-accent) !Important;
}
.nav_hc > a.active{
	color: var(--color-light) !important;
    background-color: var(--color-secondary) !Important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
	color: var(--color-secondary);
	background-color: var(--color-light);
	border-color: var(--color-secondary);
}

/*TARJETAS GUARDADAS*/
.tarjeta{
	background: var(--color-bg);
	border: 1px solid var(--color-accent);
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
	margin-bottom: 10px;
}

.tarjeta img{
	width: 70px;
}

/*SWAL*/
.swal2-content>div{
  text-align: justify !Important;
}
.swal2-modal{
	border-radius: 0px !Important;
}
.swal2-confirm {
  border-radius: 50px !Important;
  margin: 0px !Important;
  padding-top: 3px !Important;
  padding-bottom: 3px !Important;
}
.swal2-actions {
  justify-content: flex-end !Important;
  margin: 1em 0 0 0 !Important;
}
.swal2-header {
  text-align: left !Important;
  align-items: inherit !Important;
}
.swal2-title{
	color: var(--color-primary) !Important;
	border-bottom: 1px solid var(--color-primary);
	padding-bottom: 6px !Important;
}
.swal2-confirm{
	margin: 0px !Important;
	margin-left: 10px !Important;
}
.swal2-cancel{
	background-color: var(--color-light) !Important;
	color: var(--color-text) !Important;
	border: 1px solid var(--color-secondary) !Important;
	border-radius: 50px !Important;
	margin: 0px !Important;
	margin-left: 10px !Important;
	padding-top: 3px !Important;
	padding-bottom: 3px !Important;
}

/*MODALS*/
.modal-title{
	color: var(--color-light);
	font-weight: 400;
	padding-top: .5rem;
	text-align: center;
}
.modal-header{
	background-color: var(--color-primary);
    border-radius: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.modal-content{
	border-radius: 0px;
}
.modal-header .close {
    padding: 23px 1rem;
    margin: -1rem -1rem -1rem auto;
    color: var(--color-light);
    opacity: 1;
}
.modal-header .close:hover, .modal-header .close:focus {
    color: var(--color-light);
    opacity: 1;
    text-decoration: underline;
}
.modal-footer{
	border-top: 0px;
}


/*SECTION*/
.footer_blue{
	background-color: var(--color-primary);
	padding: 0px;
	padding-top: 40px;
	padding-bottom: 1px;
}

/*HEADERS*/
h1{
	color: var(--color-primary);
	font-weight: 700;
}
h2{
	font-size: 2.1rem;
  color: var(--color-primary);
  font-weight: 700;
  margin-bottom: 15px;
}
.subtitulo-h3{
	font-size: 1.55rem;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 4px;
}

/*TEXT COLORS*/
.text-blue{
	color: var(--color-primary);
	font-weight: 500;
}
.text-red{

}
.text-yellow{

}

/*BUTTONS*/
.btn_usuario_top_nav{
	font-weight: 500;
	font-size: 18px;
	padding-top: 4px;
	padding-bottom: 0px;
	color: var(--color-text) !important;
}
.btn_amarillo{
	background-color: #F3D937;
	border-radius: 26px;
	width: 200px;
}
.btn_rojo{
	background-color: var(--color-secondary);
	border-radius: 26px;
	width: 100%;
	color: var(--color-light);
	font-weight: 500;
	min-width: 100px;
}
.btn_rojo:hover, .btn_rojo:focus{
	color: var(--color-light);
	text-decoration: underline;
}
.btn_gris{
	background-color: var(--color-light);
    border-radius: 26px;
    color: var(--color-text);
    font-weight: 500;
    border: 1px solid var(--color-secondary);
    min-width: 100px;
}
.btn_formularios{
	border-radius: 26px;
	width: 100%;
	font-weight: 500;
}
.btn:hover, .btn:focus{
  text-decoration: underline;
}

/*GOOGLE*/
.abcRioButtonLightBlue {
  margin-left: auto;
  margin-right: auto;
}

/*INPUTS*/
.label_herramienta{
    width: 210px;
    justify-content: center;
    background-color: var(--color-secondary);
    color: var(--color-light);
    border-color: var(--color-secondary);
}
.input_herramienta{
	border-color: var(--color-secondary);
}
.btn_herramienta{
	background-color: #F3D937;
	border-radius: 26px;
	width: 200px;
	font-weight: 500;
}
.input_rojo{
	border-color: var(--color-secondary);
    border-radius: 0px;
    color: var(--color-secondary);
}
label {
  display: inline-block;
  margin-bottom: 1px;
  font-weight: 500;
}

/*BADGE*/
.badge-light {
    color: var(--color-light);
    background-color: #656565;
    font-size: 16px;
    padding: 5px;
}


/*CARD*/
.card_transparent .card-body{
	padding: 0px;
}
.card_transparent{
	border: none;
  background-color: transparent;
}
.card_transparent .card-title{
	color: var(--color-primary);
  font-weight: 700;
  font-size: 19px;
  margin-top: .75rem;
  margin-bottom: 0px;
}
.card_transparent .card-subtitle{
  color: var(--color-primary);
  font-weight: 500;
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: .75rem;
}

.card_blog{
	width: 100%;
    height: 450px;
}

.card_blog .card-title {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 17px;
}

.card_rojo{
	width: 100%;
	border-radius: 0px;
	border-color: var(--color-secondary);
}
.card_rojo .card-title, .card_transparente .card-title{
	color: var(--color-primary);
	height: 75px;
	margin-top: 15px;
	font-size: 24px;
	font-weight: 700;
}
.card_transparente .card-title a{
	position: relative;
	top: 24%;
}
.btn_card_amarillo{
	background-color: #F3D937;
	border-radius: 26px;
	width: 180px;
	position: relative;
	top: 38px;
}
.card_rojo .card-text{
	margin: 0px;
	height: 250px;
}
.card_transparente{
	border: 0px;
	border-radius: 0px;
	background: none;
	width: 100%;
	margin-bottom: 10px;
}

.card_azul{
	width: 100%;
	border-radius: 0px;
	border-color: var(--color-primary);
	height: 250px;
}
.card_azul .card-title{
	color: var(--color-primary);
  font-weight: 700;
  font-size: 24px;
}
.card-body {
    padding: 1.1rem !Important;
}


/*PLANES*/
.plan_container_col{
	padding: 7px;
}
.plan_container{
	border: 1px solid rgba(0,0,0,.125);
}
.encabezado_planes{
	color: var(--color-primary) !Important;
    font-weight: 700 !Important;
    height: 90px !Important;
    padding: 5px;
}
.encabezado_planes h3{
    margin-top: 1rem !Important;
    font-size: 1rem !Important;
}
.costo_planes{
	background-color: var(--color-primary);
  color: var(--color-light);
  padding-bottom: 5%;
  padding-top: 5%;
  height: 110px;
}
.costo_planes p{
	margin-bottom: 0px;
}
.costo_planes .first{
	margin-bottom: 0px;
	font-size: 29px;
	font-weight: 600;
}
.texto_planes{
	padding-top: 8%;
	height: 365px;
	padding-right: 10px;
	padding-left: 10px;
}
.btn_planes{
	background-color: #F3D937;
	border-radius: 26px;
	width: 140px;
	position: relative;
	top: -20px;
}
.primer_precio{
	border-right: 2px solid var(--color-light);
}


/*TOP NAV*/
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 175px;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: var(--color-light);
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}
.dropdown-item{
	color: var(--color-primary);
    font-weight: 500;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: var(--color-primary);
    text-decoration: underline;
    background-color: var(--color-light);
}
.top_lang_nav{
	margin-top: 5px;
	margin-bottom: 5px;
}
.navbar-nav{
	width: 95%;
	align-items: center;
}
.acceder{
	background: #F3D937;
	border-radius: 25px;
	height: 35px;
}
.abcRioButtonContents{
    color: var(--color-text) !Important;
    font-weight: 500 !Important;
    font-size: 18px !Important;
}
.abcRioButtonContentWrapper{
    border: 1px solid #969696 !Important;
}
.btn-idioma {
  color: var(--color-light);
  background-color: transparent;
  border: none;
  text-decoration: none;
}
.btn-idioma:hover, .btn-idioma:focus{
	text-decoration: underline;
}
.nav-item{
	width: 20%;
	text-align: center;
}
#navbarSupportedContent .nav-item:last-of-type{
	width: 10%;
	font-size: 20px;
}
.nav-item>a{
	color: var(--color-primary);
    font-weight: 500;
}
.navbar-hc {
    background-color: var(--color-light);
    box-shadow: 4px 4px 8px 0px #3e3e3e3b;
    z-index: 1;
}
.container_top_nav a{
	text-decoration: none;
}
.container_top_nav a:hover, .container_top_nav a:focus{
	text-decoration: underline;
}
.container_top_nav{
	width: 100%;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}


/*FOOTER*/
.lista-footer > .list-inline-item:not(:last-child) {
    margin-right: 3.5rem;
}
.footer_blue *{
	color: var(--color-light);
}
.footer_blue a:hover, .footer_blue a:focus{
	color: var(--color-light);
	text-decoration: underline;
}
.redes_sociales{
	font-size: 35px;
}

/*SECTION*/
.first_section{
	padding-top: 16%;
}
.section_recursos{
	background-image: url(../img/headers/HeaderRecursosAccesibilidad.png);
	background-repeat: no-repeat;
	background-size: cover;
  	height: 480px;
}
.section_recursos h1{
	color: var(--color-light);
}
.section_blog{
	background-image: url(../img/headers/HeaderBlog.png);
	background-repeat: no-repeat;
	background-size: cover;
  	height: 480px;
}
.section_blog h1{
	color: var(--color-light);
}
.section_nosotros{
	background-image: url(../img/headers/HeaderNosotros.png);
	background-repeat: no-repeat;
	background-size: cover;
  	height: 480px;
}
.section_nosotros h1{
	color: var(--color-light);
}
.section_repositorio{
	background-image: url(../img/headers/HeaderRepositorio.png);
	background-repeat: no-repeat;
	background-size: cover;
  	height: 480px;
}
.section_repositorio h1{
	color: var(--color-light);
}
.section_single_blog{
	background-image: url(../img/headers/HeaderSingleBlog.png);
	background-repeat: no-repeat;
	background-size: cover;
  	height: 480px;
}
.section_single_blog h1{
	color: var(--color-light);
}
.section_tienda{
	background-image: url(../img/headers/HeaderTiendaEnLinea.png);
	background-repeat: no-repeat;
	background-size: cover;
  	height: 480px;
}
.section_tienda h1{
	color: var(--color-light);
}
.cuadro_flotante{
	background-color: var(--color-light);
	top: 110px;
	box-shadow: 4px 4px 8px 0px #aeaeae;
}

.h3-card-inicio{
	height: 50px;
	margin: 0px;
}

.title-access{
	height: 250px !important;
	font-size: 22px;
	margin-bottom: 0px;
}


/*RESPONSIVE*/


@media (max-width: 1200px) {
		.nav_salto_bloques .nav-item {
	    width: 100%;
		}
} 
@media (max-width: 767px) {
	.title-access{
	    height: 120px !Important;
	}
} 

@media (max-width: 991px) {
	.nav_salto_bloques{	    
		display: none;		
	}
	.btn_planes{
		width:100%; 
		border-radius:0; 
		margin-bottom:1px;
	}

}  
/*Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) { 

	.first_section {
	    padding-top: 42%;
	}

	.nav-item {
	    width: 100%;
	    padding-bottom: 5px;
	    padding-top: 5px;
	}
	#navbarSupportedContent .nav-item:last-of-type {
	    width: 100%;
	}
	.nav_salto_bloques .navbar-nav{
		flex-direction: column;
	}

	.card{
		margin-bottom: 2rem;
	}
/*	.img_clientes{
		margin-bottom: 2rem;
	}*/
	.btn_rojo {
	    width: 100%;
	}
	.sm-text-center{
		text-align: center;
	}
	.label_herramienta{
		width: 100px;
	}
	.list-inline{
	    padding-left: inherit;
	}
	.lista-footer > .list-inline-item:not(:last-child) {
		margin-right: 0; 
	}

	.first_section {
	    padding-top: 50%;
	}

	.card_blog {
	    height: 500px;
	}

	.label_herramienta{
		font-size: 75% !important;
	}

	.item_footer{
		display: block;
	}

	.dropdown-menu {
    border: none;
	}

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 577px) { 
	
	.card{
		margin-bottom: 2rem;
	}
	.encabezado_planes {
	    height: 105px !Important;
	}

	.first_section {
	    padding-top: 25%;
	}

	.card_blog {
	    height: 600px;
	}

	.card_rojo .card-text {
	    height: 380px;
	}

	.h3-card-inicio{
		height: 75px;
		margin: 0px;
	}

	.dropdown-menu {
	    border: none;
		}

	.btn_formularios {
	    width: 100%;
	}

	
}

@media (min-width: 768px) {

	.texto_planes{
		height: 470px;
	}

	.card_azul{
		height:280px; 
	}
} 




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

	.card_blog {
	    height: 450px;
	}

	.btn_modal_pass{
		width: 500px;
	}

	.title-access{
		height: 190px !Important;
	}
	.texto_planes{
		height: 365px;
	}

}

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

	.first_section {
	    padding-top: 18%;
	}
	.card_blog {
	    height: 450px;
	}
	.card_azul { 
		height: 230px; 
	}

}