/* GENERAL STYLES*/
html {scroll-behavior: smooth;}
/*END GENERAL STYLES*/
/*SPECIFIC STYLES*/
/*END SPECIFIC STYLES*/
section{padding-bottom: 2rem!important;}
/********* TIPOGRAFÃAS *********/
h1, .h1{font-family: 'Fira Sans', sans-serif;font-weight: 700;font-size: 48px;line-height: 56px;text-transform: uppercase;}
.h1-post{ text-transform: none; font-size: 40px; line-height: 48px;}
h2, .h2{font-family: 'Fira Sans', sans-serif;font-style: normal;font-weight: 500;font-size: 32px;line-height: 40px;margin-bottom: 25px;}
.h2-titu h2{ margin-bottom: 0;}
h3, .h3{ font-family: 'Fira Sans', sans-serif; font-weight: 500;font-size: 24px;line-height: 32px;}
h4, .h4{ font-family: 'Fira Sans', sans-serif;font-style: normal;font-weight: 500;font-size: 18px;line-height: 26px;}
p, li{ font-family: 'Lato', sans-serif; font-weight: normal;font-size: 16px;line-height: 24px;}
a{ font-family: 'Lato';font-style: normal;font-weight: 700;font-size: 16px;line-height: 24px;text-decoration-line: underline;color: #000000;}
a:hover{ text-decoration: none; color: #2D8B86; opacity: .8; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
/********* COLORES *********/
.main-light{ color: #DFF3F2;}
.main{ color: #40B9B2;}
.main-fill{ fill: #40B9B2;}
.main-dark-fill{ fill: #308B86;}
.main-dark{ color: #308B86;}
.second{ color:#5267A9;}
.cto-light{ color: #FDDDE1;}
.cto{ color: #F2314B;}
.cto-fill{ fill: #F2314B;}
.cto-dark{ color: #B62538;}
.prev-light{ color: #FFF3E1;}
.prev{ color: #FFB84B;}
.prev-dark{ color: #BF8A38;}
.prev-fill{ fill: #FFB84B;}
.part-light{ color: #DCF8E6;}
.part{ color: #2AD566;}
.part-3{ color: #20A04D;}
.part-fill{ fill: #2AD566;}
.makers-light{ color: #FFDDEB;}
.makers{ color: #FF3389;}
.makers-dark{ color: #BF2667;}
.makers-fill{ fill: #FF3389;}
.white{ color:#fff;}
.white-fill{ fill:#fff;}
.lightgray{ color:#CDCDCD}
.red-error{
color:#B64D34
}
/********* BACKGROUNDS *********/
.bg-second{ background-color:#5267A9;}
.bg-second-gradient{background: linear-gradient(106deg, rgba(255, 255, 255, 0.20) 0.05%, rgba(242, 245, 249, 0.20) 3.69%, rgba(82, 103, 169, 0.20) 100%);}
.bg-main{ background-color: #40B9B2;}
.bg-main-dark{ background-color: #308B86;}
.bg-main-gradient{ background: linear-gradient(105.76deg, rgba(255, 255, 255, 0.2) 0.05%, rgba(242, 245, 249, 0.2) 3.69%, rgba(64, 185, 178, 0.2) 100%); padding-bottom: 25px; padding-top: 25px;}
.bg-main2-gradient{background: linear-gradient(105.76deg, rgba(255, 255, 255, 0.2) 0.05%, rgba(242, 245, 249, 0.2) 3.69%, rgba(82, 103, 169, 0.2) 100%); padding-bottom: 25px; padding-top: 25px;}
.bg-cto-light{ background-color: #FDDDE1;}
.bg-cto{ background-color: #F2314B;}
.bg-cto-dark{ background-color: #B62538;}
.bg-cto-gradient{background: linear-gradient(105.76deg, rgba(255, 255, 255, 0.2) 0.05%, rgba(242, 245, 249, 0.2) 3.69%, rgba(242, 49, 75, 0.2) 100%); padding-bottom: 25px; padding-top: 25px;}
.bg-prev-light{ background-color: #FFF3E1;}
.bg-prev{ background-color: #FFB84B;}
.bg-prev-dark{ background-color: #BF8A38;}
.bg-prev-gradient{background: linear-gradient(105.76deg, rgba(255, 255, 255, 0.2) 0.05%, rgba(255, 184, 75, 0.02) 3.69%, rgba(255, 184, 75, 0.2) 100%); padding-bottom: 25px; padding-top: 25px;}
.bg-part-light{ background-color: #DCF8E6;}
.bg-part{ background-color: #2AD566;}
.bg-part-dark{ background-color: #20A04D;}
.bg-part-gradient{background: linear-gradient(105.76deg, rgba(255, 255, 255, 0.2) 0.05%, rgba(42, 213, 102, 0.02) 3.69%, rgba(42, 213, 102, 0.2) 100%); padding-bottom: 25px; padding-top: 25px;}
.bg-makers-light{ background-color: #FFDDEB;}
.bg-makers{ background-color: #FF3389;}
.bg-makers-dark{ background-color: #BF2667;}
.bg-lightgray{ background-color:#F6F6F6}
.bg-hojas1{ background-image: url(../img/bg/hojas1.png); background-size: auto; background-repeat: no-repeat; background-position: right bottom;}
.bg-hojas2{ background-image: url(../img/bg/hojas2.png); background-size: auto; background-repeat: no-repeat; background-position: right center;}
.bg-hojas3{ background-image: url(../img/bg/hojas3.png); background-size: auto; background-repeat: no-repeat; background-position: right bottom;}
.bg-hojas4{ background-image: url(../img/bg/hojas4.png); background-size: auto; background-repeat: no-repeat; background-position: left bottom;}
.bg-hojas5{ background-image: url(../img/bg/hojas5.png); background-size: auto; background-repeat: no-repeat; background-position: right bottom;}
.bg-hojas6{ background-image: url(../img/bg/hojas6.png); background-size: auto; background-repeat: no-repeat; background-position: 90% bottom;}
.bg-hojas7{ background-image: url(../img/bg/hojas7.png); background-size: auto; background-repeat: no-repeat; background-position: 5% bottom;}
.bg-forma1{ background-image: url(../img/bg/forma1.png); background-size: auto; background-repeat: no-repeat; background-position: left bottom;}
.bg-forma2{ background-image: url(../img/bg/forma2.png); background-size: auto; background-repeat: no-repeat; background-position: left bottom;}
.bg-forma3{ background-image: url(../img/bg/forma3.png); background-size: auto; background-repeat: no-repeat; background-position: right bottom;}
.bg-forma4{ background-image: url(../img/bg/forma4.png); background-size: auto; background-repeat: no-repeat; background-position: left bottom;}
.bg-forma5{ background-image: url(../img/bg/forma5.png); background-size: auto; background-repeat: no-repeat; background-position: right bottom;}
.bg-forma6{ background-image: url(../img/bg/forma6.png); background-size: auto; background-repeat: no-repeat; background-position: right center;}
.bg-forma7{ background-image: url(../img/bg/forma7.png); background-size: auto; background-repeat: no-repeat; background-position: right bottom;}
/********* BOTONES*******/
button{
border: none;
background-color: transparent;
padding: 0;
}
button:focus{ outline:0;}
.btn.focus, .btn:focus{ box-shadow: 0 0 0 0!important;}
.btn-recogidas{ font-family: 'Lato', sans-serif; margin-right: 10px; background-color: #40B9B2; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center;
font-weight: 400; padding: 5px 10px!important; border:none; border-radius: 4px; color: #fff!important; text-decoration: none; -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-aulas{ color: #40B9B2!important; font-family: 'Lato', sans-serif; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 3px 10px!important;
border: 2px solid #40B9B2; color:#40B9B2; border-radius: 4px; text-decoration: none; background-color: transparent; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.btn-ppal{font-family: 'Lato', sans-serif;margin-bottom: 10px; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 10px 15px; border:none; border-radius: 4px; color: #fff!important; text-decoration: none; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;}
.btn-ppal:hover, .btn-second-main:hover, .btn-second-cto:hover, .btn-second-prev:hover, .btn-second-part:hover { transform: translateY(-3px); box-shadow: 0 15px 20px rgb(0 0 0 / 10%); text-decoration: none;}
/* Evita que el hover de Bootstrap (.btn) borre el fondo/color al combinar con .btn-ppal */
.btn.btn-ppal:hover, .btn.btn-ppal:focus, .btn.btn-ppal:active{color:#fff!important;}
.btn.btn-ppal.bg-main:hover, .btn.btn-ppal.bg-main:focus, .btn.btn-ppal.bg-main:active{background-color:#308B86!important;}
.btn-second-part:focus{ border: 2px solid #2AD566; background-color: #2AD566; color:white;}
.btn-second-part:hover:focus{ color:white;}
.btn-ppal.download:after, .btn-second-main.download:after, .btn-second-cto.download:after { content:"\f019"; font-family: FontAwesome; font-size: 17px; margin-left: 10px; font-weight: 100;}
.btn-ppal.edit:after, .btn-second-main.edit:after, .btn-second-cto.edit:after { content:"\f044"; font-family: FontAwesome; font-size: 17px; margin-left: 10px; font-weight: 100;}
.btn-ppal.plus:after, .btn-second-main.plus:after, .btn-second-cto.plus:after { content:"\2b"; font-family: FontAwesome; font-size: 17px; margin-left: 10px; font-weight: 100;}
.btn-ppal.see:after, .btn-second-main.see:after { content:"\f06e"; font-family: FontAwesome; font-size: 17px; margin-left: 10px; font-weight: 100;}
.btn-second-main{font-family: 'Lato', sans-serif; margin-bottom: 10px; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 8px 15px; border: 2px solid #40B9B2; color:#40B9B2; border-radius: 4px; text-decoration: none; background-color: transparent; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-second-main:hover{ color:#40B9B2;}
.btn-second-cto{font-family: 'Lato', sans-serif;margin-bottom: 10px; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 8px 15px; border: 2px solid #F2314B; color:#F2314B; border-radius: 4px; text-decoration: none; background-color: transparent; -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;-ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-second-cto:hover{ color:#F2314B;}
.btn-second-prev{font-family: 'Lato', sans-serif;margin-bottom: 10px; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 8px 15px; border: 2px solid #FFB84B; color:#FFB84B; border-radius: 4px; text-decoration: none; background-color: transparent; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-second-prev:hover{ color:#FFB84B;}
.btn-second-part{font-family: 'Lato', sans-serif;margin-bottom: 10px; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 8px 15px; border: 2px solid #2AD566; color:#2AD566;
border-radius: 4px;text-decoration: none; background-color: transparent; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-second-part:hover{ color:#2AD566;}
.btn-text{ font-family: 'Lato', sans-serif; text-decoration: underline; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 600;
-webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-text.back:before{ content:"\f053"; font-family: FontAwesome; font-size: 14px; margin-right: 10px; font-weight: 100; }
.btn-link{ text-decoration: none; font-family: 'Lato', sans-serif; display: inline-block; font-size: 16px; letter-spacing: 0.005em; text-align: center; font-weight: 400; -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-link:hover, .btn-text:hover{ text-decoration: none; opacity: .6; color: inherit; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
.btn-link::after{ content:"\f054"; font-family: FontAwesome; font-size: 12px; margin-left: 10px; font-weight: 100}
.icon-download:after{ content:"\f33d"; margin-left:8px; font-family: "Font Awesome 6 Pro";}
.icon-see:after{ content:"\f06e"; margin-left:8px; font-family: "Font Awesome 6 Pro";}
.tag{ font-family: 'Lato', sans-serif;margin-bottom: 10px; background-color:#5267A9; display: inline-block; font-size: 14px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 1px 8px; border:none; border-radius: 4px; color: #fff!important; text-decoration: none; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;}
.tag-grey, .tag.old{ font-family: 'Lato', sans-serif;margin-bottom: 10px; background-color:#9A9A9A; display: inline-block; font-size: 14px; letter-spacing: 0.005em; text-align: center; font-weight: 400; padding: 1px 8px; border:none; border-radius: 4px; color: #fff!important; text-decoration: none; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out;transition: all 200ms ease-in-out;}
/*********FIN BOTONES*********/
/********* INICIO CEBECERAS *********/
.cabecera-big{
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url(../../assets/img/cabecera-proximos-eventos.jpg) no-repeat center;
background-size: cover; overflow: hidden; min-height: 350px; display: flex; align-items: flex-end; padding-bottom: 80px;}
.cabecera-perfil{
background-color: #DFF3F2;
padding: 30px 0;
}
.cabecera-perfil h1{
font-size:32px;
text-align: center;
text-transform: none;
}
.bg-como-crear{
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url(../../assets/img/cabecera-como-crear.jpg) no-repeat center;
background-size: cover; overflow: hidden; min-height: 500px; display: flex; align-items: flex-end; padding-bottom: 80px;}
.bg-como-participar{
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url(../../assets/img/cabecera-participar.jpg) no-repeat center;
background-size: cover; overflow: hidden; min-height: 500px; display: flex; align-items: flex-end; padding-bottom: 80px;}
.bg-cuenta{
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url(../../assets/img/cabecera-cuenta.jpg) no-repeat center;
background-size: cover; overflow: hidden; min-height: 500px; display: flex; align-items: flex-end; padding-bottom: 80px;}
.bg-organiza{
background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%), url(../../assets/img/cabecera-organiza.jpg) no-repeat center;
background-size: cover; overflow: hidden; min-height: 500px; display: flex; align-items: flex-end; padding-bottom: 80px;}
.bg-foto-intro {
background-image: url(https://via.placeholder.com/590x350);
min-height: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.cabecera-small-main{
background-size: cover!important; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; padding-bottom: 80px;}
/**********MENÚ***********/
/*nav .container-fluid{
max-width: 1200px;
}*/
.menu-top{
width: 100%;
justify-content:space-between;
}
/*
.menu-top .items {
display: flex;
align-items:center;
justify-content: end;
}
*/
.menu-top .items a, .menu-top-mobile .items a{
font-family: 'Fira Sans', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
display: inline-block;
padding: 0 20px;
color:#000;
}
.menu-top-mobile{
display: none;
}
.right {
float: right
}
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button {
display: none;
}
.search input[type=search] {
outline: none;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
line-height: 19px;
background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEzOSAxMzkiIGhlaWdodD0iMTM5cHgiIGlkPSJGaW5kIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMzkgMTM5IiB3aWR0aD0iMTM5cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xMjcuNTU4LDExMS45NjFMMTAwLjI0OSw4NC42NWM0LjY0LTcuMzg3LDcuMzMzLTE2LjExOCw3LjMzMy0yNS40ODhjMC0yNi41MDktMjEuNDktNDcuOTk2LTQ3Ljk5OC00Ny45OTYgIGMtMjYuNTA4LDAtNDcuOTk2LDIxLjQ4Ny00Ny45OTYsNDcuOTk2YzAsMjYuNTEsMjEuNDg3LDQ3Ljk5NSw0Ny45OTYsNDcuOTk1YzEwLjE5NywwLDE5LjY0Mi0zLjE4OCwyNy40MTQtOC42MDVsMjYuOTg0LDI2Ljk4NiAgYzEuODc1LDEuODczLDQuMzMzLDIuODA2LDYuNzg4LDIuODA2YzIuNDU4LDAsNC45MTMtMC45MzMsNi43OTEtMi44MDZDMTMxLjMwOCwxMjEuNzg3LDEzMS4zMDgsMTE1LjcxMSwxMjcuNTU4LDExMS45NjF6ICAgTTU5LjU4NCw5MS42MDdjLTE3LjkxNywwLTMyLjQ0My0xNC41MjUtMzIuNDQzLTMyLjQ0M1M0MS42NjcsMjYuNzIsNTkuNTg0LDI2LjcyYzE3LjkxOCwwLDMyLjQ0MywxNC41MjYsMzIuNDQzLDMyLjQ0NCAgUzc3LjUwMiw5MS42MDcsNTkuNTg0LDkxLjYwN3oiLz48L3N2Zz4=') no-repeat 0 center;
background-size: 16px;
border: none;
border-bottom: 2px solid transparent;
color: transparent;
padding: 5px;
width: 10px;
cursor: pointer;
z-index: 5;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.search input[type=search]:focus {
width: 250px;
padding-left: 5px;
background: none;
border-bottom: 2px solid #000;
color: #000;
cursor: auto;
font-family: 'Fira Sans', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
}
.search input[type=search]:hover {
border-bottom: 2px solid #000;
}
input::-webkit-input-placeholder {
color: transparent;
}
input:focus::-webkit-input-placeholder {
color: #000;
}
/* Firefox < 19 */
input:-moz-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: #000;
}
/* Firefox > 19 */
input::-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: #000;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: #000;
}
.menu-ppal ul.navbar-nav{
padding: 16px 14px;
width: 100%;
display: flex;
align-items:center;
justify-content:space-between;
}
.menu-ppal a, .nav-item a{
font-family: 'Lato', sans-serif;font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 20px;
color: #000;
}
.ul.navbar-nav {
padding: 16px 14px;
display: flex;
align-items:center;
justify-content:space-between;
}
.menu-top .items a, .menu-top-mobile .items a {
font-family: 'Fira Sans', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
display: inline-block;
padding: 0 20px;
color: #000;
text-decoration: none;
}
/**********FIN MENÚ***********/
.breadcrumb {
background-color: #F6F7FB;
margin-bottom: 10px;
padding: .75rem 1rem;
}
.breadcrumb a {
font-family: 'Lato', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 20px;
color: #9A9A9A;
padding: 0 10px;
text-decoration: none;
}
.breadcrumb a.bread-active {
text-decoration: none;
color: #40B9B2 !important;
}
.breadcrumb a i {
font-size: 0.8em;
margin-left: 15px;
}
/*******CHECKBOX FILTROS******/
.contacto_acepto input[type="checkbox"]{
margin: 8px 20px 8px 5px;
}
input[type="checkbox"] {
visibility:hidden;
position:relative;
font:inherit;
color:inherit;
margin: 8px 10px 8px 5px;
cursor:pointer;
appearance: none;
background: transparent;
position: relative;
}
input[type="checkbox"]:before,
input[type="checkbox"]:after {
content:"";
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
visibility:visible;
width:1.5em;
height:1.5em;
box-sizing:border-box;
}
.opciones_checkbox_cookies input[type="checkbox"]:before, .opciones_checkbox_cookies input[type="checkbox"]:after{ top:0!important;}
input[type="checkbox"]:before {
border-radius:2px;
}
input[type="checkbox"]:before {background-color: transparent; border: 1px solid #40B9B2;
}
input[type="checkbox"]:after {
content:"";
text-align:center;
line-height:1.7em;
font-weight:bolder;
overflow:hidden;
color:#40B9B2;
opacity:0;
transition:opacity 0.1s ease-in;
}
input[type="checkbox"]:checked:after {opacity:1;}
input[type=checkbox] + label::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #E0E0E0;
display: block;
pointer-events: none;
opacity: 1;
color: #40B9B2;
border: 1px solid #40B9B2;
}
input[type=checkbox] + label { line-height: 26px; margin: 0 15px 0 15px; font-family: 'Lato', sans-serif;}
input[type=checkbox]:checked::after {
content:"\f00c";
font-family:'FontAwesome';
text-align: center;
line-height: 26px;
overflow: hidden;
color: #fff;
background-color: #40B9B2;
opacity: 1;
transition: opacity 0.1s ease-in;
margin-top: 9px;
top:0px;
}
input[type=checkbox], input[type=checkbox] + label::after {
width: 20px;
font-size: 18px;
line-height: 20px;
vertical-align: middle;
border-radius: 2px;
}
.filtros-desktop label { font-family: 'Lato', sans-serif;}
.filtros-desktop input[type=checkbox],
.filtros-desktop input[type=checkbox] + label::after {
width: 20px;
height: 20px;
font-size: 18px;
line-height: 20px;
vertical-align: middle;
border-radius: 2px;
}
.filtros-desktop input[type=checkbox]:checked::after, .filtros-mobile input[type=checkbox]:checked::after{ top:10px; }
.filtros-mobile input[type=checkbox],
.filtros-mobile input[type=checkbox] + label::after {
width: 20px;
height: 20px;
font-size: 18px;
line-height: 20px;
vertical-align: middle;
border-radius: 2px;
}
/* Checkbox de "Acepto la Política de Privacidad" (newsletter del footer, contacto…).
Las reglas globales de arriba dibujan la casilla con ::before/::after de 1.5em sobre un
input forzado a 20px, y suman margin-top:9px al check: la marca quedaba descuadrada
respecto a la casilla. Aquí se dibuja el control directamente sobre el input. */
.contacto_acepto input[type="checkbox"]{
visibility: visible;
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
min-width: 20px;
margin: 2px 10px 0 0;
padding: 0;
background-color: #FFF;
border: 1px solid #40B9B2;
border-radius: 3px;
cursor: pointer;
vertical-align: middle;
transition: background-color .15s ease;
}
.contacto_acepto input[type="checkbox"]:checked{
background-color: #40B9B2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 78% 78%;
}
.contacto_acepto input[type="checkbox"]:focus-visible{
outline: 2px solid #FFF;
outline-offset: 2px;
}
.contacto_acepto input[type="checkbox"]::before,
.contacto_acepto input[type="checkbox"]::after,
.contacto_acepto input[type="checkbox"] + label::after{
content: none;
display: none;
}
.filtros-mobile{ display: none;}
.filtros-mobile a{ right:0;}
/****FIN CHECKBOX*****/
/******RADIO BUTTON******/
input[type="radio"] {
visibility:hidden;
position:relative;
font:inherit;
color:#fff;
cursor:pointer;
}
input[type="radio"]:before,
input[type="radio"]:after {
content:"";
position:absolute;
/* top:50%;
left:50%;*/
transform:translate(-50%, -50%);
visibility:visible;
width:2em;
height:2em;
box-sizing:border-box;
}
input[type="radio"]:before {
border-radius:1em;
border:3px solid #f0f0f0;
transition:border 0.1s ease-out;
}
input[type="radio"]:before {border-color:#40B9B2;}
input[type="radio"]:checked:before {border-width:1em;}
input[type="radio"]:after {
content:"✓";
text-align:center;
line-height:2em;
font-weight:bolder;
overflow:hidden;
opacity:0;
transition:opacity 0.1s ease-in;
}
input[type="radio"]:checked:after {opacity:1;}
/******FIN RADIO BUTTON******/
.destacado-icon {
display: flex;
font-size: 28px;
padding-bottom: 15px;
}
.destacado-icon i {
margin-right: 24px;
}
.prev {
color: #40B9B2;
}
.modal-footer, .modal-header{
border:none;
}
/****FOOTER*****/
.form-row{
margin-bottom: 16px;
}
.contacto_acepto{
display: inline-flex;
align-items: center;
/*
display: flex;
align-items:start;*/
}
.row-libera-footer {
display: flex;
align-items:center;
justify-content:space-between;
padding-bottom: 48px;
border-bottom:2px solid #40B9B2;
}
.row-subfooter{
display: flex;
align-items:center;
justify-content:space-between;
padding-bottom: 16px;
padding-top: 36px;
}
footer .social-media{
display: flex;
margin-right: 5px;
}
footer .social-media div{
margin-right: 5px;
}
.politicas-footer {
padding: 10px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.politicas-footer a {
font-size: 14px;
color: #fff;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-weight: normal;
line-height: 24px;
}
.container-fluid.form-suscription {
padding-top: 48px;
padding-bottom: 48px;
}
/****FIN FOOTER*****/
/*******CARDS******/
.card-big-img-horiz, .card-big-img-vert {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
margin-bottom: 25px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
}
.card-big-img-horiz .body, .card-big-img-vert .body {
flex: 1 1 auto;
min-height: 1px;
padding: 32px 32px;
}
.card-big-img-horiz .card-text, .card-big-img-vert .card-text {
padding-bottom: 16px;
}
.card-mini, .card-mini-pricing {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
margin-bottom: 25px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
}
.card-mini .body {
flex: 1 1 auto;
min-height: 1px;
padding: 24px 16px 14px;
}
.bg-card-mini, .bg-card-big{
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 195px;
}
.no-active{
opacity: 50%;
}
.bg-playas{
background-image: url(../../assets/img/cabecera-playa.jpg);
}
.bg-montes{
background-image: url(../../assets/img/cabecera-montes.jpeg);
}
.bg-rios{
background-image: url(../../assets/img/cabecera-rios.jpeg);
}
.bg-basuraleza{
background-image: url(../../assets/img/cabecera-basuraleza.jpeg);
}
.cabecera-big h1{
color:#fff;
}
.card-recogida-header{
background-color: #DFF3F2;
padding: 15px 20px;
display: flex;
justify-content: space-between;
}
.card-recogida-body{
padding: 15px 20px 0;
}
.card-recogida-body p{
display: inline-table;
}
.card-recogida-organizador {
padding: 10px;
}
.cifra {
font-size: 50px;
font-weight: 700;
color: #5267A9;
font-family: 'Fira Sans', sans-serif;
display: block;
}
.bar-active p:after{
content: '';
height: 10px;--rad:radial-gradient(circle 8px,#3498db 99%,#0000);
border-bottom: 8px solid #40B9B2;
width: 100%;
display: block;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
}
.bar p{
font-family: 'Lato', sans-serif;
font-weight: normal;
font-size: 13px;
line-height: 24px;
}
.bar-disable p{
color:#CDCDCD;
}
.bar-disable p:after{
content: '';
height: 10px;--rad:radial-gradient(circle 8px,#3498db 99%,#0000);
border-bottom: 8px solid #DFF3F2;
width: 100%;
display: block;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
}
/*******quantity selector-----*/
/*
.qty__selector-module {
width: 100%;
height: 100vh;
background: #eceff1;
}
.qty__selector-module-controls {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}*/
.qty__selector-module-controls > * {
font-size: 16px;
color: #333;
border: 0;
background-color: #fff;
outline: none;
border-radius: 0;
}
.qty__selector-module-controls > *:hover {
cursor: pointer;
transform: scale(1.1);
}
.qty__selector-module-controls button {
background: #40B9B2;
color:#fff;
width: 28px;
height: 28px;
font-size: 16px;
border-radius: 50%;
transition: all 0.1s ease-in-out;
}
.qty__selector-module-controls button:hover {
background-color: #CDCDCD;
color: #fff;
}
.qty__selector-module-controls button:active {
background-color: #1565c0;
}
.qty__selector-module-controls .qtySelector {
width: 90px;
border-radius: 4px;
border: 1px solid #9A9A9A;
padding: 6px;
margin: 0 12px 0 12px;
text-align: center;
font-size: 16px;
transition: all 0.7s ease-in-out;
user-select: none;
}
.animate {
transform: rotate(360deg);
opacity: 1;
}
/*************ÁREA PRIVADA***********/
.menu-area-privada ul li{
list-style-type:none;
}
.menu-area-privada ul li a{
font-family: "Fira Sans";
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 25px;
text-decoration: none;
}
.menu-area-privada ul li.item-area-privada.active a{
color: #40B9B2!important;
}
.menu-area-privada ul li.item-area-privada {
padding: 15px 30px;
}
.menu-area-privada ul li.item-area-privada.active{
border: 1px solid #E6E6E6;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
}
.menu-area-privada ul li.item-area-privada.active a:after {
content: "\f054";
font-family: FontAwesome;
font-size: 12px;
margin-left: 10px;
font-weight: 100;
float: right;
}
.card-iniciativa{
border: 1px solid #E6E6E6;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
padding:15px 20px ;
position:relative;
overflow: hidden;
margin-bottom: 15px;
}
.estado{
color: #9A9A9A;
font-family: Lato;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
border-right:solid 2px #CDCDCD;
padding-right: 5px;
}
.card-pendiente::before{
content:'';
height:100%;
background-color: #FFB84B;
border: 4px solid #FFB84B;
position: absolute;
left: 0;
top: 0;
}
.card-aprobada::before{
content:'';
height:100%;
background-color: #2AD566;
border: 4px solid #2AD566;
position: absolute;
left: 0;
top: 0;
}
.card-realizada::before{
content:'';
height:100%;
background-color: #CDCDCD;
border: 4px solid #CDCDCD;
position: absolute;
left: 0;
top: 0;
}
.card-realizada .col-5 h3, .card-realizada .col-5 h4, .card-realizada .col-5 p, .recogida-realizada h3, .recogida-realizada h4, .recogida-realizada p{
color:#9A9A9A;
}
.card-mis-recogidas{
border: 1px solid #E6E6E6;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
padding:15px 20px ;
position:relative;
overflow: hidden;
margin-bottom: 15px;
}
.card-entidad{
display: flex;
align-items:center;
justify-content:space-between;
border: 1px solid #E6E6E6;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
padding:25px 25px ;
position:relative;
overflow: hidden;
margin-bottom: 15px;
}
.card-entidad h3{
margin-bottom: 0;
}
.pag404 h1 {
font-size: 200px;
line-height: 190px;
color: #5267A9;
}
.pag404 h4 {
font-size: 30px;
color: #5267A9;
}
/**********************SWEET ALERT************************/
.swal2-styled.swal2-styled:active, .swal2-styled.swal2-cancel:focus {
box-shadow: none;
}
button.swal2-confirm.swal2-styled{
background-color: #40B9B2!important;
}
button.swal2-cancel.swal2-styled{
font-family: 'Lato', sans-serif;
display: inline-block;
font-size: 16px;
letter-spacing: 0.005em;
text-align: center;
font-weight: 400;
padding: 8px 15px;
border: 2px solid #40B9B2;
color: #40B9B2;
border-radius: 4px;
text-decoration: none;
background-color: transparent;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.swal2-styled:active{
background-image: none;
}
/* Checkbox dentro de modales SweetAlert2 (p.ej. consentimiento al participar).
El CSS global de arriba oculta el input real y dibuja la casilla con ::before/::after
posicionados en absoluto: dentro del modal eso se desbordaba y se veía cortado.
Aquí se anula esa herencia y se dibuja la casilla (borde verde; al marcar, fondo verde
y check blanco) en vez de depender del render nativo del navegador. */
.swal2-container input[type="checkbox"]{
visibility: visible;
appearance: none;
-webkit-appearance: none;
width: 1.25em;
height: 1.25em;
min-width: 1.25em;
margin: 0;
padding: 0;
background-color: #FFF;
border: 1px solid #40B9B2;
border-radius: 3px;
cursor: pointer;
vertical-align: baseline;
transition: background-color .15s ease;
}
.swal2-container input[type="checkbox"]:checked{
background-color: #40B9B2;
/* Check blanco (SVG inline, sin dependencias de iconos) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 78% 78%;
}
.swal2-container input[type="checkbox"]:focus-visible{
outline: 2px solid #40B9B2;
outline-offset: 2px;
}
.swal2-container input[type="checkbox"]::before,
.swal2-container input[type="checkbox"]::after,
.swal2-container input[type="checkbox"] + label::after{
content: none;
display: none;
}
/**********************FIN SWEET ALERT************************/
.eliminar_participante{
color:#B64D34;
fill:#B64D34
}
/******************************************************************************************************************/
/**************************************************MEDIAQUERIES****************************************************/
/*****************************************************************************************************************/
@media (max-width: 1200px) {
.menu-top .items a{
font-size: 14px;
padding: 0 10px;
}
.menu-top .navbar-toggler{
border:transparent;
}
.navbar-toggler:focus{
box-shadow: none;
}
}
@media (max-width: 992px) {
.logo{
display: flex;
align-items:center;
}
.menu-area-privada ul li.item-area-privada {
padding: 5px 10px;
}
.menu-area-privada ul li a {
font-size: 12px;
}
}
@media (max-width: 767px) {
.bar p {
font-size: 10px;
line-height: 14px;
}
.menu-top a.nav-link {
font-family: 'Lato', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 20px;
color: #000;
text-decoration: none;
padding: .5rem 1rem;
}
.menu-area-privada ul li.item-area-privada {
padding: 5px 10px;
}
.menu-area-privada ul li a {
font-size: 15px;
}
.menu-area-privada ul li.item-area-privada {
padding: 5px 15px;
/* float: left;*/
width: auto;
border: 1px solid #E6E6E6;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
border-radius: 4px;
margin:5px;
}
.menu-area-privada ul{
flex-direction: row;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0 10px;
}
.menu-area-privada ul li.item-area-privada.active a:after {
content: none;
}
.menu-area-privada{
margin-bottom: 30px;
}
}
@media (max-width: 552px) {
.pag404 h4 {
padding-bottom: 50px;
}
.bg-hojas1 {
background-size: 40%;
}
footer .social-media svg{
max-width: 30px;
}
.row-subfooter .btn-link{
display: inline;
}
.row-libera-footer{
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.logo-footer{
max-width: 100% !important;
}
}
form span.error{color:#ff0000; font-size:12px}
/*YOUTUBE VIDEO*/
.yt-video {
width: 100%;
height: 415px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
}
.yt-video-responsive {
min-height: 210px;
overflow: hidden;
padding-bottom: 0;
position: relative
}
.video-responsive embed,
.video-responsive object,
.yt-video-responsive iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10
}
.yt-video::before{
content:"";
background: url("/assets/img/youtube_btn.svg") no-repeat center center;
background-size: auto;
background-size: 64px 64px;
position: absolute;
height: 100%;
width: 100%;
opacity: .8;
filter: alpha(opacity=80);
transition: all 0.2s ease-out;
}
.yt-video:hover::before{
background: url("/assets/img/youtube_btn_hover.svg") no-repeat center center;
background-size: auto;
background-size: 64px 64px;
}
#url,#direccion{display:none}
/* Progress steps - Solicitud empresa */
.progress-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:10px;}
.progress-steps .step{position:relative;display:flex;align-items:center;gap:8px;padding:10px 20px;font-family:'Lato',sans-serif;font-size:14px;font-weight:600;color:#999;background:#f5f5f5;border:none;flex:1;justify-content:center;}
.progress-steps .step:first-child{border-radius:6px 0 0 6px;}
.progress-steps .step:last-child{border-radius:0 6px 6px 0;}
.progress-steps .step:not(:last-child){margin-right:2px;}
.progress-steps .step::before{content:'';display:inline-block;width:24px;height:24px;border-radius:50%;border:2px solid #ccc;text-align:center;line-height:20px;font-size:12px;font-weight:700;color:#ccc;flex-shrink:0;}
.progress-steps .step:nth-child(1)::before{content:'1';}
.progress-steps .step:nth-child(2)::before{content:'2';}
.progress-steps .step:nth-child(3)::before{content:'3';}
.progress-steps .step.active{color:#fff;background:#40B9B2;}
.progress-steps .step.active::before{border-color:#fff;color:#fff;}
.progress-steps .step.completed{color:#308B86;background:#d4f0ee;text-decoration:none;cursor:pointer;transition:background .2s;}
.progress-steps .step.completed:hover{background:#b8e6e1;}
.progress-steps .step.completed::before{content:'\2713';border-color:#40B9B2;color:#40B9B2;}
.progress-steps .step.disabled{color:#ccc;background:#f5f5f5;cursor:default;}
.card-mini .card-img-top {
min-height: 200px;
background-image: url(https://via.placeholder.com/600x250);
background-size: cover;
background-position: center;
}
.card-img, .card-img-top {
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
}
.card-img, .card-img-bottom, .card-img-top {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
}