/* Custom Properties */
:root {
  --main-color: #ffffff;
  --color-base-tx:#222222;
  --main-modal-color: rgba(0, 0, 0, .5);
  --second-color: #2B2B2B;
  --second-modal-color: rgba(43, 43, 43, .5);
  --color-General:#ff4800;
  --color-enero:#FCC610;
  --color-febrero:#FF7010;
  --color-marzo:#FD1753;
  --color-abril:#EA3DBC;
  --color-mayo:#5421BE;
  --color-junio:#BAEF0C;
  --color-julio:#46E017;
  --color-agosto:#E6CB34;
  --color-septiembre:#E5644E;
  --color-octubre:#F2770E;
  --color-noviembre:#11BAA7;
  --color-diciembre:#16B2F7;
  --alturaMenu:4.87em;
  --main-maxwidth:900px;
  --box-DS-DF: 2em;
}
@media screen and (min-width: 1000px) {
  :root{
    --alturaMenu:10.62em;
  }
}

html {
  box-sizing: border-box;
  font-family: 'Exo 2', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-base-tx);
  background-color: var(--main-color);
}

*,
*:after,
*:before {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  font-family: 'Exo 2', sans-serif;
}

body {
  margin: 0.5rem  auto 1rem auto;
  display: flex;
  justify-content: center;
  font-family: 'Exo 2', sans-serif;
}
a {
  font-weight: bold;
  color: var(--color-base-tx);
  transition: all .3s ease-out;
}
a:hover {
  color: var(--color-General);
}
p {
  font-size: 1.1rem;
  line-height: 1.4rem;
  margin-bottom: 0.8rem;
}
.fw-bold{
  font-weight: bold;
}
::selection {
  background-color: var(--second-color);
  color: var(--main-color);
}
.main {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--alturaMenu);
}
.d-flex{display: flex;}
.justify-content-center{justify-content: center;}
.align-items-center{align-items: center;}
.videoCont{
	width:100%;
	height: auto;
  padding: 0 1em;
  max-width: var(--main-maxwidth);
  margin: 0 auto;
}
.box-img{
  width: 100%;
  max-width: 868px;
}
.box-img img{
  width:100%;
  border-radius: 10px;
}
.cursiva{font-style: italic;}
.video-responsive {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
  }
.video-responsive iframe, .video-responsive object, .video-responsive embed {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  border-radius: 10px;
  }
  .encabezado{
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0 0 10px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
  }
  .encabezado a{
    text-decoration: none;
  }
  .encabezado img{
    border-radius: 15px;
  }
  .fs-2em{font-size: 2em;}
  .cTitulo{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.7em;
  }
  .subTitulo{
    font-weight: 300;
  }
  .naranja{color: var(--color-General)}
  .txtThin{font-weight: 300;}
  .fsTitulo{font-size: calc(1.8em + 1vw); text-align: center; display: block;}
  hr {
    height: 2px;
    width: 80%;
    background-color:#ffffff;
  }
  .descripcion{
    width: 100%;
    max-width: var(--main-maxwidth);
    margin: 0 auto;
    text-align:left;
    padding:2rem 10px;
  }
  .mt-20{margin-top: 20px;}
  .mt-50{margin-top: 50px;}
  .mb-20{margin-bottom: 20px;}
  .fix-mb{margin-bottom: 9em;}
  .box span {
    width: 20px;
    height: 20px;
    display: block;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
  }
  .box span:nth-child(2) {
    animation-delay: -0.2s;
  }
  .box span:nth-child(3) {
    animation-delay: -0.4s;
  }
  @keyframes animate {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
      transform: rotate(45deg) translate(10px, 10px);
    }
    100% {
      opacity: 0;
    }
  }
  .pieFoto{
    font-size: 1.2em;
    font-weight: normal;
  }
  .btnDes {
    background-color:transparent;
    border-radius:28px;
    border:1px solid #fa4716;
    /*display:inline-block;*/
    cursor:pointer;
    color:#fa4616;
    font-size:17px;
    font-weight: 400;
    padding:6px 14px;
    text-decoration:none;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .btnDes:hover {
    border:1px solid #fa4716;
    color: #fa4716;
  }
  .btnDes:active {
    position:relative;
    top:1px;
  }
  .btnDes > img{
    margin-right: 0.3em;
  }
  .deswall{
    width: 100%;
    max-width: var(--main-maxwidth);
    margin: 0 auto;
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  @media screen and (min-width: 768px) {
    .fsTitulo{ display: flex;}
    .fsTitulo br {
        display: none;
    }
    hr {
      display: none;
    }
    .descripcion{
      text-align: left;
      padding:2rem 1.25rem;
    }
    .deswall{
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }
  footer{
    width: 100%;
    max-width: var(--main-maxwidth);
    height: auto;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
  }
  .menuMeses{
    width: 100%;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: grid;
    grid-template-columns: repeat(13, var(--alturaMenu)  );
    grid-template-rows: var(--alturaMenu);
    gap: 0px;
    position: relative;
  }

  .menuMeses::-webkit-scrollbar {
    display: none;
  }
  .menuMeses .item{
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
    background: var(--main-color);
    text-decoration: none;
    color: var(--color-base-tx);
  }
  .menuMeseS::before {
    content: " ";
    border-left: 2px solid #fa4616;
    border-bottom: 2px solid #fa4616;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    cursor: pointer;
    display: block;
    position: absolute;
}

.menuMeseS::after {
    content: "";
    border-right: 2px solid #fa4616;
    border-top: 2px solid #fa4616;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    cursor: pointer;
    display: block;
    position: absolute;
}
#icoCal{
  left: 0px;
  position: sticky;
}
.mes{
  width: 85%;
  height: 85%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
.mesD{
  display: none;
}

.enero{ border: solid 4px var(--color-enero); }
.febrero{ border: solid 4px var(--color-febrero); }
.marzo{ border: solid 4px var(--color-marzo); }
.abril{ border: solid 4px var(--color-abril); }
.mayo{ border: solid 4px var(--color-mayo); }
.junio{ border: solid 4px var(--color-junio); }
.julio{ border: solid 4px var(--color-julio); }
.agosto{ border: solid 4px var(--color-agosto); }
.septiembre{ border: solid 4px var(--color-septiembre); }
.octubre{ border: solid 4px var(--color-octubre); }
.noviembre{ border: solid 4px var(--color-noviembre); }
.diciembre{ border: solid 4px var(--color-diciembre); }
.controls{display: none;}
.gridCalendario{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap:15px;
  align-items: center;
}
.diasSemana{display: none;}
.diasSemanaM{
  width: calc( ( 7 * 2em) + 30px);
  display: grid;
  grid-template-columns: repeat(7, var(--box-DS-DF));
  grid-template-rows: repeat(1, var(--box-DS-DF));
  gap:5px;
}
.diasFecha{
  width: auto;
  display: grid;
  grid-template-columns: repeat(7, var(--box-DS-DF));
  grid-template-rows: repeat(6, var(--box-DS-DF));
  gap:5px;
}
.diaSemana, .diaMes, .diaFechaVacio{
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
.festivo{
  border-radius: 50%;
  border: solid 3px var(--color-enero) ;
  position: relative;
  cursor: pointer;
}
.actual{
  border-radius: 50%;
  background: var(--color-enero);
  position: relative;
}
.festivo::after{
  content:" ";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-General);
  position: absolute;
  top: -4px;
  right: 0px;
}
.domingo{
  color: var(--color-General);
}
@media screen and (min-width: 1000px) {
  footer{left: 50%; transform: translateX(-50%);}
  #icoCal{display: none;}
  .mes{display: none;}
  .mesD{
    width: 90%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .mesD a{
    text-decoration: none;
  }
  .mesD p{
    margin-bottom: 0;
    font-weight: 300;
  }
  .img-redonda{
    border-radius: 50%;
  }
  .controls{display: initial;}
  .control_prev,
	.control_next{
    position:absolute;
    top:25%;
    z-index:2;
    display:block;
    padding:20px;
    width:auto;
    height:auto;
    /*background:rgba(255, 255, 255, 0.33);*/
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:18px;
    opacity:1;
    cursor:pointer;
  }
    .control_prev{left:-60px;border-radius: 10px 0 0 10px;}
		.control_next{right:-60px;border-radius:0 10px 10px 0;}

}

@media screen and (min-width: 1200px) {
  
  .diasSemanaM{
    display: none;
  }
  /*.pieFoto{
    font-size: 1.2em;
    font-weight: normal;
  }*/
  .gridCalendario{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap:15px;
    align-items: center;
  }
  .diasSemana, .diasFecha{
    width: auto;
    display: grid;
    grid-template-rows: repeat(1, 2em);
    gap:5px;
  }
  .enerow, .marzow, .mayow, .juliow, .agostow, .octubrew, .diciembrew{ grid-template-columns: repeat(31, 2em);}
  .febrerow{ grid-template-columns: repeat(29, 2em);}
  .abrilw, .juniow, .septiembrew, .noviembrew  { grid-template-columns: repeat(30, 2em);}
  .diaSemana, .diaMes{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
  }
  .diaFechaVacio{display:none;}
}
.festividad{
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: -100vh;
  left: 0;
  transition: all 0.2s ease-in ;
}
.boxCont{
  width: 100%;
  max-width: var(--main-maxwidth);
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}
.tituloFest{
  font-size: calc(1.2rem + 1vw);
}

.btnCerrar {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 32px;
  height: 32px;
  opacity: 0.8;
  }
  .btnCerrar:before, .btnCerrar:after{
    position: absolute;
    left: 15px;
    content: ' ';
    height: 25px;
    width: 3px;
    background-color: #ffffff;
  }
  .btnCerrar:before{
    transform: rotate(45deg);
    transition: all 0.2s ease-in;
  }
  .btnCerrar:after{
    transform: rotate(-45deg);
    transition: all 0.2s ease-in;
  }
  .btnCerrar:hover:before, .btnCerrar:hover:after {
    opacity: 1;
    background-color: #fa4616;
    transition: all 0.2s ease-in;
  }
  .btnCerrar:hover:after {
    transform: rotate(45deg);
  }
  .btnCerrar:hover:before {
    transform: rotate(-45deg);
  }
  .video-responsive {
    overflow: hidden;
    position: relative;
    width:100%;
  }

.video-responsive::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* modal */
.vModal{
  width: 100vw;
  height: 100vh;
  background-color:rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top:0;
  right: -500vw;
  transition: all 3s ease;
}
#modalDP {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: 0vh;
  left: -500vw;
  height: 100vh;
  width: 100vw;
  overflow: auto;
  transition: all .5s;
}

.emblemaCal{width: 100%; max-width: 793px; height: auto; display: block; }
.tituloh2{font-size: 3em;}
.flex-grid-center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
   justify-content: center;
}
.fuller-button {
  color: white;
  background: none;
  border-radius: 0;
  padding: 1.2em 5em;
  letter-spacing: 0.35em;
  font-size: 1.7em;
  -webkit-transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
  margin: 0.7em;
  font-weight: 900;
  border-radius: 5px;
}
@media only screen and (max-width: 960px) {
	.tituloh2{font-size: 2em; text-align: center;}
  .fuller-button {  
  padding: 1.2em 3em;
  letter-spacing: 0.35em;
  font-size: 1.7em;
  -webkit-transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
  margin: 0.5em;
  font-weight: 900;
	}
}
@media only screen and (max-width: 768px) {
	.fuller-button{padding: 0.1em 1.3em}
	.tituloh2{font-size: 1.3em; text-align: center;}
}
.fuller-button.verde {
  box-shadow: inset 0 0 1em rgba(57, 255 ,20, 0.5), 0 0 1em rgba(57, 255 ,20, 0.5);
  border: #39ff14 solid 2px;
}
.fuller-button.verde:hover {
  background-color: #39ff14;
  box-shadow: inset 0 0 0 rgba(57, 255 ,20, 0.5), 0 0 1.5em rgba(57, 255 ,20, 0.7);
  color: #000;
}
.fuller-button.rojo {
  box-shadow: inset 0 0 1em rgba(255,0,0, 0.5), 0 0 1em rgba(255,0,0, 0.5);
  border: #ff0000 solid 2px;
}
.fuller-button.rojo:hover {
  background-color: #ff0000;
  box-shadow: inset 0 0 0 rgba(255,0,0, 0.5), 0 0 1.5em rgba(255,0,0, 0.7);
  color: #000;
}
/*************************************************************** */
.content {
  width: 100%;
  margin: 50px auto 50px;
  color:#fff;
  padding: 0 10px 0 10px;

}
@media(min-width: 576px){
  .content{
    max-width: 540px;
  }
}

@media(min-width: 768px){
  .content{
    max-width: 720px
  }
}
@media(min-width: 960px){
  .content{
    max-width: 900px
  }
}

.content__title {
  margin-bottom: 40px;
  font-size: 20px;
  text-align: center;
}

.content__title--m-sm {
  margin-bottom: 10px;
}

.multisteps-form__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.multisteps-form__progress-btn {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  position: relative;
  padding-top: 20px;
  color: rgba(108, 117, 125, 0.7);
  text-indent: -9999px;
  border: none;
  background-color: transparent;
  outline: none !important;
  cursor: pointer;
}
@media (min-width: 500px) {
  .multisteps-form__progress-btn {
    text-indent: 0;
  }
}
.multisteps-form__progress-btn:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 13px;
  height: 13px;
  content: '';
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 3;
}
.multisteps-form__progress-btn:after {
  position: absolute;
  top: 5px;
  left: calc(-50% - 13px / 2);
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  background-color: currentColor;
  z-index: 1;
}
.multisteps-form__progress-btn:first-child:after {
  display: none;
}
.multisteps-form__progress-btn.js-active {
  color: #fa4616;
}
.multisteps-form__progress-btn.js-active:before {
  -webkit-transform: translateX(-50%) scale(1.2);
          transform: translateX(-50%) scale(1.2);
  background-color: currentColor;
}

.multisteps-form__form {
  position: relative;
}

.multisteps-form__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.multisteps-form__panel.js-active {
	background: rgba(0, 0, 0, 0);
  height: auto;
  opacity: 1;
  visibility: visible;
}
.multisteps-form__panel[data-animation="scaleOut"] {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.multisteps-form__panel[data-animation="scaleOut"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.multisteps-form__panel[data-animation="slideHorz"] {
  left: 500px;
}
.multisteps-form__panel[data-animation="slideHorz"].js-active {
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0, 0, 1, 1);
  transition-delay: 0s;
  left: 0;
}
.multisteps-form__panel[data-animation="slideVert"] {
  top: 30px;
}
.multisteps-form__panel[data-animation="slideVert"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  top: 0;
}
.multisteps-form__panel[data-animation="fadeIn"].js-active {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.multisteps-form__panel[data-animation="scaleIn"] {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.multisteps-form__panel[data-animation="scaleIn"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.multisteps-form__title{
  text-align: center;
  color: #fa4616;
  font-size: calc(1rem + 1vw);
}
.multisteps-form__content{
  display: block;
}
.mr-2{margin-right: 0;}
.w48{width: 100%;}

@media(min-width: 768px){
  .mr-2{margin-right: 2%;}
  .w48{width: 48%; display: inline-block;}
}
input, select {
  background: none;
  color: #fff;
  padding: 10px 0px;
  font-size: 18px;
  width: 100%;
}
select{border-radius: 10px;}
select option {
  margin: 40px;
  background: rgba(0, 0, 0, 1);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
select option:hover {
 background-color: #fa4616;
}
input:focus, input:active {
  outline: none;
}
input[type=text], input[type=email], input[type=tel] {
  border: none;
  border-bottom: solid 2px #fa4616;
}
.input-group button {
  border: solid 2px #fa4616;
  padding: 15px 40px;
  border-radius: 15px;
  background: transparent;
  color: #fff;
  font-size: 16px;
}
.input-group button:hover, .w50 button:hover {
  color: #fff;
  background: #fa4616;
  cursor: pointer;
}
.input-group {
  position: relative;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}
.input-group label {
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 18px;
  color: #fff;
  pointer-events: none;
  transition: all 0.15s ease-out 0s;
}
.input-group input:focus + label {
  top: -5px;
  font-size: 16px;
  color: #aaa;
  font-style: italic;
}
.boxAvisoP, .boxPregunta{
  width: 100%;
}
.custom-radio-btn {
  --size: 25px;
  min-width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0 10px;
  position: relative;
  padding-left: var(--size);
}
.custom-radio-btn input {
  display: none;
}
.custom-radio-btn .label {
  margin-left: 15px;
}
.custom-radio-btn.left .label {
  margin: 0 5px;
}
.custom-radio-btn[aria-label]::after {
  content: attr(aria-label);
  display: inline-block;
  margin-left: 5px;
}
.custom-radio-btn .checkmark {
  --gap: 3px;
  --border: 2px;
  --check-color: #ff5722;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-block;
  transition: opacity 0.3s ease;
  border: var(--border) solid #fff;
  padding: var(--gap);
  position: absolute;
  top: 0;
  left: 0;
}
.custom-radio-btn input:checked ~ .checkmark {
  background-origin: content-box;
  background-repeat: no-repeat;
  background-image: radial-gradient(
    circle at center,
    var(--check-color)
      calc((var(--size) - (var(--border) * 2) - (var(--gap) * 2)) / 2), rgba(255, 255, 255, 0) 0);
}
.text-al-r{
  text-align: end;
}
.text-al-l{
  text-align: start;
}
.pregunta{
  margin-bottom: 1.5rem;
}
.boxSigAnt{
  width: 100%;
  display: flex;
}
.w50{
  width: 50%;
}
.al-elem-r{
  display: flex;
  justify-content: flex-end;
}
.w50 button {
  border: solid 2px #fa4616;
  padding: 15px 40px;
  border-radius: 15px;
  background: transparent;
  color: #fff;
  font-size: 16px;
}
.alinear-cont-der{
  display: flex;
}
/* fin modal*/