@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600;700&display=swap');

.container-countdown {
  margin: 0 auto;
  text-align: center;
}

.container-countdown h1 {
  font-weight: 300;
  letter-spacing: .125rem;

}

.container-countdown li {
  display: inline-block;
  font-size: 0.7em;
  list-style-type: none;
  padding: 0.5em 1em 0.5em 1em;
  text-transform: uppercase;
	
}

.container-countdown li span {
  display: block;
  font-size: 2.2rem;
  font-weight: 300;
}

.container-countdown p {
  font-weight: 300;
  margin-bottom: 25px;  
	}
@media screen and (max-width: 768px) {
.container-countdown p {
  text-shadow: 2px 3px #82a978, 4px 5px #000;
	}
 }

.vintage-count p {
  font-family: "Oswald", Sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 25px;  
  text-shadow: 4px 5px #e6ae8b, 6px 7px #000;
	}
@media screen and (max-width: 768px) {
.vintage-count p {
  text-shadow: 2px 3px #e6ae8b, 4px 5px #000;
	}
 }

.rock-container-countdown {
  margin: 0 auto;
  text-align: center;
}

.rock-container-countdown h1 {
  font-weight: lighter;
  letter-spacing: .100rem;
}

.rock-container-countdown li {
  display: inline-block;
  font-size: 0.6em;
  font-family: "Oswald", Sans-serif;
	font-weight: 500;
  list-style-type: none;
  padding: 0.5em 1em 0.5em 1em;
  text-transform: uppercase;

}

.rock-container-countdown li span {
  display: block;
  font-size: 2.0rem;
}

@media screen and (max-width: 768px) {
.rock-container-countdown li span {
  font-size: 1.4rem;
	}
 }
@media screen and (max-width: 768px) {
.rock-container-countdown li {
  font-size: 0.45rem;
	}
 }

.rock-container-countdown p {
  font-family: "Shrikhand", cursive;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 1px;  
  text-shadow: 2px 3px #4da497, 4px 6px #000;
	}
@media screen and (max-width: 768px) {
.rock-container-countdown p {
  text-shadow: 1px 2px #4da497, 3px 5px #000;
	}
 }

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 .5rem;
}


@media all and (max-width: 768px) {
  .container-countdown h1 {
     font-size: 1.1rem;
	 font-weight: normal;
  }
  
 .container-countdown li {
    font-size: .65rem;

  }
	
 .container-countdown li span {
    font-size: 1.475rem;
  }

.container-countdown {
  color: #333;
  margin: 0 auto;
  text-align: center;
}

.container-countdown h1 {
  font-weight: lighter;
  letter-spacing: .125rem;
}

.container-countdown li {
  display: inline-block;
  font-size: 0.9em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

.container-countdown li span {
  display: block;
  font-size: 3.8rem;
}

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 2.8rem;
  padding: 0 .2rem;
}
}

@media screen and (max-width: 768px) {
 .container-countdown h1 {
    font-size: 0.9rem;
  }
  
 .container-countdown li {
    font-size: .65rem;
    padding: .65rem;
  }
	
 .container-countdown li span {
    font-size: 1.6rem;
  }
}

 .container-countdown ul {
     padding-inline-start: 0px;
  }




.container-contador-2 h1,
.container-contador-2 p{
    color:#fff;
    text-align:center;
    padding:10px;    
}

.container-contador-2 h1{
    font-size: 1.8em;
}

.container-contador-2 p{
    font-size: 0.85em;
}
.center-abs{
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}
.charts{
    display: flex;
    flex-wrap: wrap;
}
.chart {
    position: relative;
    width: 25%;
    height: 150px;
}

.chart h3 {
    color: #fff;
    font-size: .75em;
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
	text-transform: uppercase;

}
.chart svg {
    z-index: 2;
}
@media (min-width: 480px) and (max-width: 768px) { 
    .chart{
        width: 50%;
    }
}
@media (max-width: 480px) { 
    .chart{
        width: 50%;
    }
}


.circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    z-index: 1;
    border: 5px #fff solid;
}

span.text {
    z-index: 3;
    text-align: center;
    width: 100%;
    font-size: 2em;
    color: #fff ;
}

.outer {
    fill: transparent;
    stroke: #decdb1 ;
    stroke-width: 8;
    /* 2 * RadioCircle* Pi = stroke-dasharray */
    /* 2 * 70 * 3.1415 = 439.81 */
    stroke-dasharray: 439; /* set in js file */
    transform: rotate(270deg) translate(-150px, 0);
}

#countdown-content p{
    text-align: center;
    font-size: 1.5em;
    color:#fff;
    width: 100%;
}

.texto-chico {
	font-size: .45em;
	letter-spacing: .05em;

}

.bg-gold {
  background: #9c916b !important; }

.text-gold {
  color: #9c916b !important; }

.bg-gold-2 {
  background: #e4d9c7 !important; }

.bg-rosa {
  background: #e62f83 !important; }

.text-rosa {
  color: #e62f83 !important; }

.bg-rosa-2 {
  background: #f5c9d9 !important; }

.bg-flor {
  background: #deb1b1   !important; }

.text-flor {
  color: #deb1b1 !important; }

.bg-flor-2 {
  background: #FAF2F3 !important; }

.bg-bronce {
  background: #a78977  !important; }

.text-bronce {
  color: #a78977  !important; }

.bg-verde {
  background: #4e9c87; }

.bg-verde-light {
  background: #E5F3EC  !important; }

.text-verde {
  color: #4e9c87  !important; }

.bg-ocre {
  background: #e6ae8b  !important; }

.bg-ocre2 {
  background: #d19643  !important; }

.text-ocre {
  color: #d19643  !important; }

.text-ocre2 {
  color: #d19643  !important; }

.bg-amarillo {
  background: #FFEECA  !important; }

.text-naranja {
  color: #D7926A  !important; }

.text-euforia {
  color: #a78180  !important; }

.text-eucalipto {
  color: #498080  !important; }

.bg-musgo {
  background: #9ab09c !important; }

.bg-flor-3 {
  background: #d4b0a9 !important; }

.text-musgo {
  color: #9ab09c !important; }

.bg-bordo {
  background: #890029 !important; }

.text-bordo {
  color: #890029 !important; }

.text-verde-oscuro {
  color: #154b3f !important; }

.bg-gris {
  background: #747474 !important; }

.bg-gris1 {
  background: #D7D7D7 !important; }

.bg-gris2 {
  background: #131313 !important; }

.text-gris {
  color: #747474 !important; }

.bg-byn {
  background: #1c1c1c !important; }

.text-byn {
  color: #1c1c1c !important; }

.bg-light2 {
  background: #f6f6f6 !important; }

.bg-violeta {
  background: #ac75f9 !important; }

.bg-bordo2 {
background: rgb(63,87,57);
background: radial-gradient(circle, rgba(63,87,57,1) 0%, rgba(130,169,120,1) 100%); }

.text-bordo {
  color: #890029 !important; }

.text-rojo {
  color: #fc1119 !important; }

.bg-rojo {
  background: #fc1119 !important; }

.bg-rojo2 {
  background: #ff7572 !important; }

.text-violeta {
  color: #bc13fe  !important; }

.bg-passion {
  background: #8f8a7f !important;
}
.text-passion {
  color: #8f8a7f !important; }

.button-passion {
  background-color: transparent; 
  color: #8f8a7f ; 
  border: 2px solid #8f8a7f ;
}

.button-passion:hover {
  background-color: #8f8a7f ;
  color: white;
}

.button-ocre {
  background-color: #d19643 ; 
  color: #fff ; 
  border: 2px solid #d19643 ;
}

.button-ocre:hover {
  background-color: transparent;
  color: #d19643 ;
}


.bg-naranja-fuerte {
  background: #e88741 !important; }

.text-naranja-fuerte {
  color: #e88741 !important; }

.button-naranja-fuerte:hover {
  background-color: transparent;
  color: #e88741 ;
}

.button-naranja-fuerte {
  background-color: #e88741 ; 
  color: #fff ; 
  border: 2px solid #e88741 ;
}

.bg-verde-fuerte {
  background: #3cb3a7 !important; }

.text-verde-fuerte {
  color: #3cb3a7 !important; }

.button-verde-fuerte:hover {
  background-color: transparent;
  color: #3cb3a7 ;
}

.button-verde-fuerte {
  background-color: #3cb3a7 ; 
  color: #fff ; 
  border: 2px solid #3cb3a7 ;
}

.bg-lila {
  background: #b2a6ce!important; }

.text-lila {
  color: #b2a6ce !important; }

.button-lila:hover {
  background-color: transparent;
  color: #b2a6ce ;
}

.button-lila {
  background-color: #b2a6ce ; 
  color: #fff ; 
  border: 2px solid #b2a6ce ;
}

.bg-lila-fuerte {
  background: #73527f !important; }

.text-lila-fuerte {
  color: #73527f !important; }

.button-lila-fuerte:hover {
  background-color: transparent;
  color: #73527f ;
}

.button-lila-fuerte {
  background-color: #73527f ; 
  color: #fff ; 
  border: 2px solid #73527f ;
}

.text-verde-oscuro {
  color: #154b3f !important; }

.bg-verde-oscuro {
  background: #184d41 !important; }

.button-verde-oscuro:hover {
  background-color: transparent;
  color: #184d41 ;
}

.button-verde-oscuro {
  background-color: #184d41 ; 
  color: #fff ; 
  border: 2px solid #184d41 ;
}

.texto-peppa-pig {
	text-shadow: rgb(0, 121, 219) 12px 0px 0px, rgb(0, 121, 219) 11.9584px 0.998843px 0px, rgb(0, 121, 219) 11.8337px 1.99075px 0px, rgb(0, 121, 219) 11.6269px 2.96885px 0px, rgb(0, 121, 219) 11.3395px 3.92634px 0px, rgb(0, 121, 219) 10.9733px 4.85658px 0px, rgb(0, 121, 219) 10.531px 5.75311px 0px, rgb(0, 121, 219) 10.0156px 6.60971px 0px, rgb(0, 121, 219) 9.43065px 7.42044px 0px, rgb(0, 121, 219) 8.78027px 8.17967px 0px, rgb(0, 121, 219) 8.06895px 8.88212px 0px, rgb(0, 121, 219) 7.30163px 9.52293px 0px, rgb(0, 121, 219) 6.48363px 10.0977px 0px, rgb(0, 121, 219) 5.62063px 10.6023px 0px, rgb(0, 121, 219) 4.71862px 11.0333px 0px, rgb(0, 121, 219) 3.78387px 11.3878px 0px, rgb(0, 121, 219) 2.82285px 11.6633px 0px, rgb(0, 121, 219) 1.84224px 11.8577px 0px, rgb(0, 121, 219) 0.848846px 11.9699px 0px, rgb(0, 121, 219) -0.15044px 11.9991px 0px, rgb(0, 121, 219) -1.14868px 11.9449px 0px, rgb(0, 121, 219) -2.13895px 11.8078px 0px, rgb(0, 121, 219) -3.11438px 11.5888px 0px, rgb(0, 121, 219) -4.06819px 11.2894px 0px, rgb(0, 121, 219) -4.99376px 10.9116px 0px, rgb(0, 121, 219) -5.88468px 10.458px 0px, rgb(0, 121, 219) -6.73475px 9.93192px 0px, rgb(0, 121, 219) -7.53808px 9.33688px 0px, rgb(0, 121, 219) -8.2891px 8.67703px 0px, rgb(0, 121, 219) -8.98258px 7.95696px 0px, rgb(0, 121, 219) -9.61372px 7.18167px 0px, rgb(0, 121, 219) -10.1781px 6.35653px 0px, rgb(0, 121, 219) -10.6719px 5.48727px 0px, rgb(0, 121, 219) -11.0916px 4.57993px 0px, rgb(0, 121, 219) -11.4344px 3.64081px 0px, rgb(0, 121, 219) -11.6977px 2.67641px 0px, rgb(0, 121, 219) -11.8799px 1.69344px 0px, rgb(0, 121, 219) -11.9796px 0.698716px 0px, rgb(0, 121, 219) -11.9962px -0.300857px 0px, rgb(0, 121, 219) -11.9296px -1.29834px 0px, rgb(0, 121, 219) -11.7801px -2.28682px 0px, rgb(0, 121, 219) -11.5489px -3.25942px 0px, rgb(0, 121, 219) -11.2375px -4.2094px 0px, rgb(0, 121, 219) -10.8481px -5.13016px 0px, rgb(0, 121, 219) -10.3834px -6.01532px 0px, rgb(0, 121, 219) -9.84671px -6.85874px 0px, rgb(0, 121, 219) -9.24164px -7.65454px 0px, rgb(0, 121, 219) -8.57243px -8.39723px 0px, rgb(0, 121, 219) -7.84372px -9.08163px 0px, rgb(0, 121, 219) -7.06058px -9.703px 0px, rgb(0, 121, 219) -6.22843px -10.257px 0px, rgb(0, 121, 219) -5.35305px -10.7399px 0px, rgb(0, 121, 219) -4.44052px -11.1482px 0px, rgb(0, 121, 219) -3.49717px -11.4791px 0px, rgb(0, 121, 219) -2.52955px -11.7304px 0px, rgb(0, 121, 219) -1.54437px -11.9002px 0px, rgb(0, 121, 219) -0.548477px -11.9875px 0px, rgb(0, 121, 219) 0.451226px -11.9915px 0px, rgb(0, 121, 219) 1.4478px -11.9123px 0px, rgb(0, 121, 219) 2.43432px -11.7505px 0px, rgb(0, 121, 219) 3.40395px -11.5071px 0px, rgb(0, 121, 219) 4.34995px -11.1838px 0px, rgb(0, 121, 219) 5.26576px -10.7829px 0px, rgb(0, 121, 219) 6.14503px -10.3072px 0px, rgb(0, 121, 219) 6.98164px -9.75995px 0px, rgb(0, 121, 219) 7.7698px -9.14495px 0px, rgb(0, 121, 219) 8.50404px -8.46648px 0px, rgb(0, 121, 219) 9.17925px -7.72925px 0px, rgb(0, 121, 219) 9.79076px -6.93838px 0px, rgb(0, 121, 219) 10.3343px -6.09935px 0px, rgb(0, 121, 219) 10.8061px -5.21799px 0px, rgb(0, 121, 219) 11.203px -4.30041px 0px, rgb(0, 121, 219) 11.522px -3.35299px 0px, rgb(0, 121, 219) 11.7612px -2.38229px 0px, rgb(0, 121, 219) 11.9186px -1.39506px 0px, rgb(0, 121, 219) 11.9934px -0.398151px 0px;
	color: #f09bc2 !important;
}

.texto-peppa-pig-rosa {
  color: #f09bc2 !important;
text-shadow: rgb(50, 147, 226) 3px 0px 0px, rgb(50, 147, 226) 2.83487px 0.981584px 0px, rgb(50, 147, 226) 2.35766px 1.85511px 0px, rgb(50, 147, 226) 1.62091px 2.52441px 0px, rgb(50, 147, 226) 0.705713px 2.91581px 0px, rgb(50, 147, 226) -0.287171px 2.98622px 0px, rgb(50, 147, 226) -1.24844px 2.72789px 0px, rgb(50, 147, 226) -2.07227px 2.16926px 0px, rgb(50, 147, 226) -2.66798px 1.37182px 0px, rgb(50, 147, 226) -2.96998px 0.42336px 0px, rgb(50, 147, 226) -2.94502px -0.571704px 0px, rgb(50, 147, 226) -2.59586px -1.50383px 0px, rgb(50, 147, 226) -1.96093px -2.27041px 0px, rgb(50, 147, 226) -1.11013px -2.78704px 0px, rgb(50, 147, 226) -0.137119px -2.99686px 0px, rgb(50, 147, 226) 0.850987px -2.87677px 0px, rgb(50, 147, 226) 1.74541px -2.43999px 0px, rgb(50, 147, 226) 2.44769px -1.73459px 0px, rgb(50, 147, 226) 2.88051px -0.838246px 0px;
}

.texto-peppa-pig-azul {
  color: #0079db !important;
text-shadow: rgb(242, 177, 209) 3px 0px 0px, rgb(242, 177, 209) 2.83487px 0.981584px 0px, rgb(242, 177, 209) 2.35766px 1.85511px 0px, rgb(242, 177, 209) 1.62091px 2.52441px 0px, rgb(242, 177, 209) 0.705713px 2.91581px 0px, rgb(242, 177, 209) -0.287171px 2.98622px 0px, rgb(242, 177, 209) -1.24844px 2.72789px 0px, rgb(242, 177, 209) -2.07227px 2.16926px 0px, rgb(242, 177, 209) -2.66798px 1.37182px 0px, rgb(242, 177, 209) -2.96998px 0.42336px 0px, rgb(242, 177, 209) -2.94502px -0.571704px 0px, rgb(242, 177, 209) -2.59586px -1.50383px 0px, rgb(242, 177, 209) -1.96093px -2.27041px 0px, rgb(242, 177, 209) -1.11013px -2.78704px 0px, rgb(242, 177, 209) -0.137119px -2.99686px 0px, rgb(242, 177, 209) 0.850987px -2.87677px 0px, rgb(242, 177, 209) 1.74541px -2.43999px 0px, rgb(242, 177, 209) 2.44769px -1.73459px 0px, rgb(242, 177, 209) 2.88051px -0.838246px 0px;
}

.texto-peppa-pig-rosa-simple {
  color: #f09bc2 !important;
}

.texto-peppa-pig-azul-simple {
  color: #0079db !important;
}

.button-peppa-pig:hover {
  background-color: transparent;
  color: #0079db ;
}

.button-peppa-pig {
  background-color: #0079db ; 
  color: #f09bc2 ; 
  border: 2px solid #0079db ;
}

.button-prex {
  background-color: #602db3 ;
  color: white;
}

.button-prex:hover {
  background-color: transparent; 
  color: #602db3; 
  border: 2px solid #602db3 ;
}

.button-mp {
  background-color: #00a7e1 ; 
  color: #fff; 
  border: 2px solid #00a7e1 ;
}

.button-mp:hover {
  background-color: transparent;
  color: #00a7e1 ;
}


.button-passion2 {
  background-color: #8f8a7f; 
  color: white; 
  border: 2px solid #8f8a7f;
}

.button-passion2:hover {
  background-color: transparent;
  color: #8f8a7f;
}

.button {
  background-color: #9c916b;
    display: inline-block;
    font-weight: 430;
	letter-spacing: 0.03rem;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.375rem 0.95rem;
    font-size: 1rem;
    line-height: 1.5;
	margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: transparent; 
  color: #9c916b; 
  border: 2px solid #9c916b;
}

.button1:hover {
  background-color: #9c916b;
  color: white;
}

.button2 {
  background-color: #9c916b ; 
  color: #fff; 
  border: 2px solid #9c916b ;
}

.button2:hover {
  background-color: transparent;
  color: #9c916b ;
}

.button15 {
  background-color: #e62f83;
  border: none;
  color: button;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button-rosa {
  background-color: transparent; 
  color: #e62f83; 
  border: 2px solid #e62f83;
}

.button-rosa:hover {
  background-color: #e62f83;
  color: white;
}

.button-rosa2 {
  background-color: #e62f83; 
  color: #fff; 
  border: 2px solid #e62f83;
}

.button-rosa2:hover {
  background-color: transparent;
  color: #e62f83;
}

.button-flor {
  background-color: transparent; 
  color: #deb1b1 ; 
  border: 2px solid #deb1b1 ;
}

.button-flor:hover {
  background-color: #deb1b1 ;
  color: white;
}

.button-flor2 {
  background-color: #deb1b1; 
  color: white; 
  border: 2px solid #deb1b1;
}

.button-flor2:hover {
  background-color: transparent;
  color: #E5B2B2;
}

.button-flor3 {
  background-color: #d4b0a9; 
  color: #fff; 
  border: 2px solid #d4b0a9;
}

.button-flor3:hover {
  background-color: #fff;
  color: #d4b0a9;
}

.button-euforia {
  background-color: #a78180; 
  color: #fff; 
  border: 2px solid #a78180;
}

.button-euforia:hover {
  background-color: #fff;
  color: #a78180;
}

.button-eucalipto {
  background-color: #498080; 
  color: #fff; 
  border: 2px solid #498080;
}

.button-eucalipto:hover {
  background-color: #fff;
  color: #498080;
}

.button-bronce {
  background-color: #a78977 ; 
  color: #fff; 
  border: 2px solid #a78977 ;
}

.button-bronce:hover {
  background-color: transparent;
  color: #a78977 ;
}

.button-bronce2 {
  background-color: #fff ; 
  color: #a78977; 
  border: 2px solid #a78977;
}

.button-bronce2:hover {
  background-color: #a78977;
  color: #fff ;
}

.button-verde {
  background-color: #4e9c87 ; 
  color: #fff; 
  border: 2px solid #4e9c87 ;
}

.button-verde:hover {
  background-color: transparent;
  color: #4e9c87 ;
}

.button-verde2 {
  background-color: transparent ; 
  color: #4e9c87; 
  border: 2px solid #4e9c87 ;
}

.button-verde2:hover {
  background-color: #4e9c87;
  color: white ;
}

.button-naranja:hover {
  background-color: transparent;
  color: #D7926A ;
}

.button-naranja {
  background-color: #D7926A ; 
  color: #fff; 
  border: 2px solid #D7926A ;
}

.button-rojo:hover {
  background-color: transparent;
  color: #fc1119 ;
}

.button-rojo {
  background-color: #fc1119 ; 
  color: #fff; 
  border: 2px solid #fc1119 ;
}

.button-rojo2:hover {
  background-color: #fc1119;
  color: #fff;
}

.button-rojo2 {
  background-color: transparent;
  color: #fc1119; 
  border: 2px solid #fc1119 ;
}

.button-rojo3:hover {
  background-color: #fa3e45;
  color: #fff;
  border: 2px solid #fff ;
}

.button-rojo3 {
  background-color: #fff;
  color: #fc1119; 
  border: 2px solid #fc1119 ;
}
.button-musgo:hover {
  background-color: transparent;
  color: #9ab09c ;
}

.button-musgo {
  background-color: #9ab09c ; 
  color: #fff; 
  border: 2px solid #9ab09c ;
}

.button-black:hover {
  background-color: #D7D7D7;
  color: #000;
}

.button-black {
  background-color: #000 ; 
  color: #fff; 
  border: 2px solid #000 ;
}

.button-gris:hover {
  background-color: #D7D7D7;
  color: #747474;
}

.button-gris {
  background-color: #747474 ; 
  color: #fff; 
  border: 2px solid #747474 ;
}

.button-blanco:hover {
  background-color: rgba(255,255,255,.3);
  color: #fff !important;
}

.button-blanco {
  background-color: #fff ; 
  color: #000; 
  border: 2px solid #fff ;
}

.button-bordo:hover {
  background-color: transparent;
  color: #890029 ;
}

.button-bordo {
  background-color: #890029 ; 
  color: #fff; 
  border: 2px solid #890029 ;
}



.small-btn {
        width: auto;
        height: 40px;
	padding: 10px;
	font-size: 0.813rem;
	text-align: center

    }
    

.hero-blur {
   -webkit-filter: blur(4px);
   -moz-filter: blur(4px);
   -o-filter: blur(4px);
   -ms-filter: blur(4px);
   filter: blur(4px);
}
@media screen and (max-width: 768px) {
.hero-blur {
   -webkit-filter: blur(.5px);
   -moz-filter: blur(.5px);
   -o-filter: blur(.5px);
   -ms-filter: blur(.5px);
   filter: blur(.5px); }
  }

.hero-blur-2 {
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -o-filter: blur(2px);
   -ms-filter: blur(2px);
   filter: blur(2px);
}
@media screen and (max-width: 768px) {
.hero-blur-2 {
   -webkit-filter: blur(.5px);
   -moz-filter: blur(.5px);
   -o-filter: blur(.5px);
   -ms-filter: blur(.5px);
   filter: blur(.5px); }
  }

.hero-blur-byn {
   -webkit-filter: blur(4px) grayscale(100%);
   -moz-filter: blur(4px);
   -o-filter: blur(4px);
   -ms-filter: blur(4px);
   filter: blur(4px) grayscale(100%);
}
@media screen and (max-width: 768px) {
.hero-blur-byn {
   -webkit-filter: blur(.5px);
   -moz-filter: blur(.5px);
   -o-filter: blur(.5px);
   -ms-filter: blur(.5px);
   filter: blur(.5px); }
  }

/* change standard modal behavior */
.modal-body {
  height: 600px;
  overflow: auto;
}


.modal-backdrop {
background-color: #424530;
}

.modal-backdrop.fade.in
{
opacity: .8; 
}

.hero-text span {
	font-size: 3.5rem;
	line-height: 0.0;
}

.hero-text2 {
  font-family: "Dantina", sans-serif;
  line-height: 3.10;
  color: white;
	font-size: 2.3rem;
}	

@media screen and (max-width: 768px) {
	.hero-text2 {
	font-size: 1.2rem;
	}
}



.numberEffects {
  letter-spacing: -3px;
  animation: blur 1s ease-out infinite;
  text-shadow: 0px 0px 1px #fff, 0px 0px 1px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #a78977,
      0px 0px 150px #a78977,
      0px 10px 100px #a78977,
      0px 10px 100px #a78977,
      0px 10px 100px #a78977,
      0px 10px 100px #a78977,
      0px -10px 100px #a78977,
      0px -10px 100px #a78977;
  }
}
.img-cropped {
  width: 400px;
  height: 400px;
  background-position: center center;
  background-repeat: no-repeat;
}

.minimal-border {
  border: 25px solid #a78977;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23D7926A' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%23D7926A'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25;
}

.minimal-border2 {
  border: 25px solid #9c916b;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%239c916b' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%239c916b'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25;
	   	height: 100%;
    width: 100%;
}

.minimal-border3 {
  border: 25px solid #9c916b;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25;
	   	height: 100%;
    width: 100%;
}



.inner-border {
    display: flex;
    justify-content: center;
    flex-direction: column;
	padding: 10px;
}

.outer-border {
	border: 2px solid #fff;
   	height: 100%;
    width: 100%;
    padding: 10px;
    margin: 0 auto;
}
.outer-border2 {
	border: 2px solid #fbaf8b;
   	height: 100%;
    width: 100%;
    padding: 10px;
    margin: 0 auto;
}
.outer-border3 {
	border: 2px solid #9c916b;
   	height: 100%;
    width: 100%;
    padding: 10px;
    margin: 0 auto;
}

@media (min-width: 992px) {
	.outer-border {
		height: 100%;
	}
}

.mid-border {
    border: 6px solid #fff;
    height: 100%;
    width: 100%;
    padding: 6px;
    margin: auto;
}
.mid-border2 {
    border: 6px solid #e6ae8b;
    height: 100%;
    width: 100%;
    padding: 6px;
    margin: auto;
}
.mid-border3 {
    border: 6px solid #9c916b;
    height: 100%;
    width: 100%;
    padding: 6px;
    margin: auto;
}
.inner-border {
	position: relative;
	border: 2px solid #fff;
    height: 100%;
    width: 100%;
    margin: auto;
}
.inner-border2 {
	position: relative;
	border: 2px solid #e6ae8b;
    height: 100%;
    width: 100%;
    margin: auto;
}
.inner-border3 {
	position: relative;
	border: 2px solid #9c916b;
    height: 100%;
    width: 100%;
    margin: auto;
}


/* Decorations */
.corner-decoration {
	position: absolute;
    width: 3em;
    margin: -3px;
}

@media (min-width: 768px) {
	.corner-decoration {
		width: 3.5em;
	  	margin: -4px;
	}
}

@media (min-width: 992px) {
	.corner-decoration {
		width: 4em;
	  	margin: -5px;
	}
}

@media (min-width: 1200px) {
	.corner-decoration {
		width: 6em;
	  	margin: -3px;
	}
}

.corner-decoration.corner-left-top {
	left: 0;
	top: 0;
}

.corner-decoration.corner-right-top {
	top: 0;
	right: 0;
	 -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.corner-decoration.corner-right-bottom {
	right: 0;
	bottom: 0;
	 -webkit-transform: scale(-1);
  	transform: scale(-1);
}

.corner-decoration.corner-left-bottom {
	left: 0;
	bottom: 0;
	-webkit-transform: scaleY(-1);
  	transform: scaleY(-1);
}


.vertical-decoration {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 11em;
}


@media (min-width: 768px) {
	.vertical-decoration {
		width: 16em;
	}
}


@media (min-width: 992px) {
	.vertical-decoration {
		width: 20em;
	}
}

@media (min-width: 1200px) {
	.vertical-decoration {
		width: 27em;
	}
}

.vertical-decoration.top {
	top: 0;

}

.vertical-decoration.bottom {
	bottom: 0;
	-webkit-transform: scaleY(-1);
  	transform: scaleY(-1);
}

.text-retro {
  font-family: "Oswald", Sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: #D7926A;
  text-shadow: 2px 3px #fff, 4px 5px #990000;
	}
@media screen and (max-width: 768px) {
	.text-retro {
		font-size: 2.375rem;
		text-shadow: 1px 2px #fff, 2px 3px #990000;
	}
}

.text-retro2 {
  font-family: "Oswald", Sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: #D7926A;
  text-shadow: 2px 3px #FFEECA, 4px 5px #000;
	}
@media screen and (max-width: 768px) {
	.text-retro2 {
		font-size: 2.375rem;
		text-shadow: 1px 2px #FFEECA, 2px 3px #000;
	}
}

.text-minimal {
    font-family: 'Molle', cursive;
	}

.passconf {
  font-family: "Passions Conflict", cursive;
  font-weight: 400;
  font-style: normal;
	line-height: 0.85em;
	}
h1.passconf {
  font-size: 5.313rem; 
}

h2.passconf {
  font-size: 4.75rem;
}
@media screen and (max-width: 768px) {
h1.passconf {
  font-size: 3.838rem;
 }
}

@media screen and (max-width: 768px) {
h2.passconf {
  font-size: 3.313rem;
 }
}

h1.passconf i {
  font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
h1.passconf i {
  font-size: 1.25rem;
 }
}

h3.passconf {
  font-size: 2.813rem;
  margin-bottom: 5px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h3.passconf {
  font-size: 2.188rem;
 }
}

h4.passconf {
  font-size: 2.188rem;
  margin-bottom: 0px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h4.passconf {
  font-size: 1.875rem;
 }
}

.eureka {
  font-family: 'Sail', cursive;
	margin-top: 10px; 
}

h1.eureka {
  font-size: 5.625rem; 
}

h2.eureka {
  font-size: 3.125rem;
}
@media screen and (max-width: 768px) {
h1.eureka {
  font-size: 3.75rem;
 }
}

h1.eureka i {
  font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
h1.eureka i {
  font-size: 1.25rem;
 }
}

.mrs-saint {
  font-family: "Mrs Saint Delafield", cursive;
  font-weight: 400;
  font-style: normal;
}

h1.mrs-saint {
  font-size: 5rem; 
}

h2.mrs-saint {
  font-size: 3.75rem;
}
@media screen and (max-width: 768px) {
h1.mrs-saint {
  font-size: 3.125rem;
 }
}

@media screen and (max-width: 768px) {
h2.mrs-saint {
  font-size: 2.5rem;
 }
}

h1.mrs-saint i {
  font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
h1.mrs-saint i {
  font-size: 1.25rem;
 }
}

h3.mrs-saint {
  font-size: 2.375rem;
  margin-bottom: 5px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h3.mrs-saint {
  font-size: 2rem;
 }
}

h3.mrs-saint:before, h3.mrs-saint:after {
  content: " ";
  position: absolute;
  width: 100px;
  height: 8px;
}
@media screen and (max-width: 768px) {
h3.mrs-saint:before, h3.mrs-saint:after {
  width: 35px;
  height: 5px;
 }
}

h3.mrs-saint:before {
  margin: 5px 0 0 -110px;
}
@media screen and (max-width: 768px) {
h3.mrs-saint:before, h3.mrs-saint:after {
  margin: 5px 0 0 -40px;
 }
}

h3.mrs-saint:after {
  margin: 5px 0 0 10px;
}
@media screen and (max-width: 768px) {
h3.mrs-saint:after {
  margin: 5px 0 0 10px;
 }
}

.euforia {
  font-family: 'Great Vibes', cursive;
	margin-top: 10px; 
}

h1.euforia {
  font-size: 5rem; 
}

h2.euforia {
  font-size: 3.75rem;
}
@media screen and (max-width: 768px) {
h1.euforia {
  font-size: 3.125rem;
 }
}

@media screen and (max-width: 768px) {
h2.euforia {
  font-size: 2.5rem;
 }
}

h1.euforia i {
  font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
h1.euforia i {
  font-size: 1.25rem;
 }
}

h3.euforia {
  font-size: 2.375rem;
  margin-bottom: 5px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h3.euforia {
  font-size: 2rem;
 }
}

h3.euforia:before, h3.euforia:after {
  content: " ";
  position: absolute;
  width: 100px;
  height: 8px;
}
@media screen and (max-width: 768px) {
h3.euforia:before, h3.euforia:after {
  width: 35px;
  height: 5px;
 }
}

h3.euforia:before {
  margin: 5px 0 0 -110px;
}
@media screen and (max-width: 768px) {
h3.euforia:before, h3.euforia:after {
  margin: 5px 0 0 -40px;
 }
}

h3.euforia:after {
  margin: 5px 0 0 10px;
}
@media screen and (max-width: 768px) {
h3.euforia:after {
  margin: 5px 0 0 10px;
 }
}

.oliva {
  font-family: "Ruthie", cursive;
  font-weight: 400;
  font-style: normal;
}

h1.oliva {
  font-size: 6.25rem; 
}

h2.oliva {
  font-size: 4.375rem;
}
@media screen and (max-width: 768px) {
h1.oliva {
  font-size: 4.063rem;
 }
}

@media screen and (max-width: 768px) {
h2.oliva {
  font-size: 3.438rem;
 }
}

h1.oliva i {
  font-size: 3.125rem;
}

@media screen and (max-width: 768px) {
h1.oliva i {
  font-size: 1.875rem;
 }
}

h3.oliva {
  font-size: 3.438;
  margin-bottom: 5px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h3.oliva {
  font-size: 2.813rem;
 }
}

h4.oliva {
  font-size: 2.813rem;
  margin-bottom: 0px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h4.oliva {
  font-size: 2.5rem;
 }
}
.lovestory {
  font-family: "Dantina", cursive;
	line-height: 3.00 
}

h1.lovestory {
  font-size: 2.4rem; 
}

h2.lovestory {
  font-size: 1.9rem;
}
@media screen and (max-width: 768px) {
h1.lovestory {
  font-size: 1.7rem;
  line-height: 2.60 
 }
}

@media screen and (max-width: 768px) {
h2.lovestory {
  font-size: 1.45rem;
 }
}

h1.lovestory i {
  font-size: 2.125rem;
}

@media screen and (max-width: 768px) {
h1.lovestory i {
  font-size: 1.25rem;
 }
}

h3.lovestory {
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
h3.lovestory {
  font-size: 1rem;
 }
}

h4.lovestory {
  font-size: 1.2rem;
}
@media screen and (max-width: 768px) {
h4.lovestory {
  font-size: 1rem;
 }
}

.aquarella {
  font-family: 'Montez', cursive;
}

h1.aquarella {
  font-size: 5.313rem; 
}

h2.aquarella {
  font-size: 3.75rem;
}
@media screen and (max-width: 768px) {
h1.aquarella {
  font-size: 3.438rem;
 }
}

@media screen and (max-width: 768px) {
h2.aquarella {
  font-size: 2.813rem;
 }
}

h1.aquarella i {
  font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
h1.aquarella i {
  font-size: 1.25rem;
 }
}

h3.aquarella {
  font-size: 2.813rem;
  margin-bottom: 5px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h3.aquarella {
  font-size: 2.188rem;
 }
}

h4.aquarella {
  font-size: 2.188rem;
  margin-bottom: 0px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h4.aquarella {
  font-size: 1.875rem;
 }
}


.kaushan {
  font-family: "Kaushan Script", cursive;
  font-weight: 400;
  font-style: normal;
	letter-spacing: -0.1rem !important;
}

h1.kaushan {
  font-size: 5rem; 
}

h2.kaushan {
  font-size: 3.438rem;
}
@media screen and (max-width: 768px) {
h1.kaushan {
  font-size: 3.125rem;
 }
}

@media screen and (max-width: 768px) {
h2.kaushan {
  font-size: 2.5rem;
 }
}

h1.kaushan i {
  font-size: 2.188rem;
}

@media screen and (max-width: 768px) {
h1.kaushan i {
  font-size: 0.938rem;
 }
}

h3.kaushan {
  font-size: 2.5rem;
  margin-bottom: 5px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h3.kaushan {
  font-size: 1.875rem;
 }
}

h4.kaushan {
  font-size: 1.875rem;
  margin-bottom: 0px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h4.kaushan {
  font-size: 1.563rem;
 }
}

.jost {
  font-family: "Jost", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.jost-sub {
  font-family: "Jost", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .250rem
}

.jost-sub2 {
  font-family: "Jost", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .10rem
}

.jost-titulo h3 {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  letter-spacing: .350rem;
  font-style: italic;
}

.jost-titulo span {
  font-weight: 200;
} 
@media screen and (max-width: 768px) {
.jost-titulo h3 {
	font-size: 1.90rem;
	letter-spacing: .250rem;
	
  }
}

.jost-lead {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  letter-spacing: .750rem;
}

.jost-lead-light {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: .750rem;
}

.jost-light {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  letter-spacing: .300rem;
	font-style: italic;
}

.jost-light span{
  font-size: 0.99rem;
	letter-spacing: .190rem;
}



.hojas {
  font-family: "Fleur De Leah", cursive;
  font-weight: 400;
  font-style: normal;
  line-height: 1em;
}

h1.hojas {
  font-size: 5.313rem; 
}

h2.hojas {
  font-size: 4.375rem;
}
@media screen and (max-width: 768px) {
h1.hojas {
  font-size: 3.438rem;
 }
}

@media screen and (max-width: 768px) {
h2.hojas{
  font-size: 3rem;
 }
}

h1.hojas i {
  font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
h1.hojas i {
  font-size: 1.25rem;
 }
}

h3.hojas {
  font-size: 2.813rem;
  margin-bottom: 5px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h3.hojas {
  font-size: 2.188rem;
 }
}

h4.hojas {
  font-size: 2.188rem;
  margin-bottom: 0px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h4.hojas {
  font-size: 1.875rem;
 }
}

.chewy {
  font-family: "Chewy", system-ui !important;
  font-style: normal;
  line-height: 1em;
}

h1.chewy {
  font-size: 5.938rem; 
}

h2.chewy {
  font-size: 3.75rem;
}
@media screen and (max-width: 768px) {
h1.chewy {
  font-size: 4.063rem;
 }
}

@media screen and (max-width: 768px) {
h2.chewy{
  font-size: 2.5rem;
 }
}

h1.chewy i {
  font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
h1.chewy i {
  font-size: 1.25rem;
 }
}

h3.chewy {
  font-size: 2.5rem; 
  position: relative;
}
@media screen and (max-width: 768px) {
h3.chewy {
  font-size: 2.188rem;
 }
}

h4.chewy {
  font-size: 1.75rem;
  margin-bottom: 0px;  
  position: relative;
}
@media screen and (max-width: 768px) {
h4.chewy {
  font-size: 1.563rem;
 }
}

.text-15 {
  font-family: 'Molle', cursive;
  font-weight: 100;
  font-size: 8.8rem;
  color: white;
	}
@media screen and (max-width: 768px) {
	.text-15 {
		font-size: 5.8rem;
	}
}
.text-15-2 {
  font-family: 'Molle', cursive;
  font-weight: 100;
  font-size: 3.2rem;
	}
@media screen and (max-width: 768px) {
	.text-15-2 {
		font-size: 2.2rem;
	}
}

.text-graffiti {
  font-family: 'Sedgwick Ave Display', cursive;
  font-weight: 100;
  font-size: 8.8rem;
  color: white;
	}
@media screen and (max-width: 768px) {
	.text-graffiti {
		font-size: 5.8rem;
	}
}

.text-graffiti2 {
  font-family: 'Sedgwick Ave Display', cursive;
  font-size: 2.4rem;
	}
@media screen and (max-width: 768px) {
	.text-graffiti2 {
		font-size: 1.8rem;
	}
}

.text-graffiti3 {
  font-family: 'Sedgwick Ave Display', cursive;
  font-size: 4.0rem;
	}
@media screen and (max-width: 768px) {
	.text-graffiti3 {
		font-size: 3.0rem;
	}
}

@media screen and (max-width: 768px) {
   .site-blocks-cover.mitad, .site-blocks-cover.mitad > .container > .row {
    min-height: 450px;
    height: calc(20vh); }
	}

@media screen and (max-width: 768px) {
   .site-blocks-cover.mitad2, .site-blocks-cover.mitad2 > .container > .row {
    min-height: 700px;
    height: calc(20vh); }
	}

section.vintage {
  position: absolute;
  width: 100%;
  min-width: 800px;
  text-align: center;
  top: 50%;
  margin-top: -55px;
}

.text-vintage {
  color: #e6ae8b;
}


h1.vintage, h3.vintage, h2.vintage {
  transform: matrix(1, -0.20, 0, 1, 0, 0);
  -ms-transform: matrix(1, -0.20, 0, 1, 0, 0);
  -webkit-transform: matrix(1, -0.20, 0, 1, 0, 0);
}

h1.vintage {
  font-family: "Oswald", Sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 4.375rem;
  margin-bottom: 25px;  
  text-shadow: 4px 5px #A0A0A0, 6px 7px #e6ae8b;
}

h2.vintage {
  font-family: "Oswald", Sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 3.125rem;
  margin-bottom: 50px;  
  text-shadow: 4px 5px #A0A0A0, 6px 7px #e6ae8b;
}
@media screen and (max-width: 768px) {
h1.vintage {
  font-size: 2.188rem;
  margin-bottom: 18px;
  text-shadow: 2px 3px #A0A0A0, 4px 5px #e6ae8b;  
 }
}

h1.vintage span {
  display: inline-block;
  vertical-align: middle;
}

span.star {
  font-size: 1.25rem;
}

h3.vintage {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin-bottom: 5px;  
  position: relative;
  color: #000;
  text-shadow: 1px 2px #A0A0A0, 1px 3px #e6ae8b;
}
@media screen and (max-width: 768px) {
h3.vintage {
  font-size: 1rem;
  margin-bottom: 5px;
  text-shadow: .5px 1px #A0A0A0, 1px 2px #000;
 }
}

h3.vintage:before, h3.vintage:after {
  content: " ";
  position: absolute;
  width: 100px;
  height: 8px;
  border-top: 2px solid #e6ae8b;
  border-bottom: 2px solid #e6ae8b;
}
@media screen and (max-width: 768px) {
h3.vintage:before, h3.vintage:after {
  width: 35px;
  height: 5px;
 }
}

h3.vintage:before {
  margin: 5px 0 0 -110px;
}
@media screen and (max-width: 768px) {
h3.vintage:before, h3.vintage:after {
  margin: 5px 0 0 -40px;
 }
}

h3.vintage:after {
  margin: 5px 0 0 10px;
}
@media screen and (max-width: 768px) {
h3.vintage:after {
  margin: 5px 0 0 10px;
 }
}

.byn {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

.home-welcome {
  background-image: linear-gradient(45deg, #361752, #B31B67);
  background-image: -webkit-linear-gradient(45deg, #361752, #B31B67);
  background-image: -moz-linear-gradient(45deg, #361752, #B31B67);
  background-image: -ms-linear-gradient(45deg, #361752, #B31B67);
  background-image: -o-linear-gradient(45deg, #361752, #B31B67);
  color: white;
  padding: 2em 0 2em;
  font-size: 125%;
}
.home-welcome h1 {
  color: white;
  line-height: 1em;
}
.main-example {
  margin: 0 auto;
  width: 440px;
}
.main-example .countdown-container {
  height: 130px;
}
.main-example .time {
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
  display: inline-block;
  text-align: center;
  position: relative;
  height: 95px;
  width: 65px;
  margin-left:10px;
  word-spacing: 0;
  letter-spacing: normal;
  text-rendering: auto;

  -webkit-perspective: 479px;
  -moz-perspective: 479px;
  -ms-perspective: 479px;
  -o-perspective: 479px;
  perspective: 479px;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.countdown-container .time:first-child {
  margin-left:0;
}
.main-example .count {
  background: #202020;
  color: #f8f8f8;
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 2em;
  line-height: 2.4em;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  top: 0;
  width: 100%;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-transform-style: flat;
  -moz-transform-style: flat;
  -ms-transform-style: flat;
  -o-transform-style: flat;
  transform-style: flat;
}
.main-example .count.top {
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px 5px 0 0;
  height: 50%;

  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.main-example .count.bottom {
  background-image: linear-gradient(rgba(255,255,255,0.1), transparent);
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), transparent);
  background-image: -moz-linear-gradient(rgba(255,255,255,0.1), transparent);
  background-image: -ms-linear-gradient(rgba(255,255,255,0.1), transparent);
  background-image: -o-linear-gradient(rgba(255,255,255,0.1), transparent);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius: 0 0 5px 5px;
  line-height: 0;
  height: 50%;
  top: 50%;

  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
}
.main-example .count.next {
}
.main-example .label {
  font-weight: normal;
  margin-top: 5px;
  display: block;
  position: absolute;
  top: 95px;
  width: 100%;
}
/* Animation start */
.main-example .count.curr.top {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  z-index: 3;
}
.main-example .count.next.bottom {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
  z-index: 2;
}
/* Animation end */
.main-example .flip .count.curr.top {
  -webkit-transition: all 250ms ease-in-out;
  -moz-transition: all 250ms ease-in-out;
  -ms-transition: all 250ms ease-in-out;
  -o-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;

  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.main-example .flip .count.next.bottom {
  -webkit-transition: all 250ms ease-in-out 250ms;
  -moz-transition: all 250ms ease-in-out 250ms;
  -ms-transition: all 250ms ease-in-out 250ms;
  -o-transition: all 250ms ease-in-out 250ms;
  transition: all 250ms ease-in-out 250ms;

  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
}


.countdown-deluxe {
    text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 500;
}
@media screen and (max-width: 768px) {
	.countdown-deluxe {
    font-size: 0.6rem;
  }
}

.countdown-deluxe span {
    font-size: 1.8rem;
    margin-left: 0.8rem;
	margin-bottom: 0.2rem;
	display: flex;
	align-items: center;
    justify-content: center;
	font-weight: 500 !important;
}
@media screen and (max-width: 768px) {
	.countdown-deluxe span {
    font-size: 1.3rem;
  }
}

.countdown-deluxe span:first-of-type {
    margin-left: 0;
}

.countdown-deluxe-circles {
    text-transform: uppercase;
	font-size: 0.70rem;
	font-weight: 600
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles {
	font-size: 0.65rem;
  }
}
.countdown-deluxe-circles span {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-shadow: 0px 0px 9px -3px rgba(105,90,75,0.63);
    -moz-box-shadow: 0px 0px 9px -3px rgba(105,90,75,0.63);
    box-shadow: 0px 0px 9px -3px rgba(105,90,75,0.63);
	font-size: 1.40rem;
	font-weight: 500 !important;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles span {
    width: 45px;
    height: 45px;
	font-size: 1.15rem;
	
  }
}
.countdown-deluxe-circles span:first-of-type {
    margin-left: 0;
}

.countdown-deluxe-circles2 {
    text-transform: uppercase;
	font-size: 0.70rem;
	font-weight: normal !important;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles2 {
	font-size: 0.60rem;
	
  }
}
.countdown-deluxe-circles2 span {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 1.1rem;
	font-weight: normal !important;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles2 span {
    width: 34px;
    height: 34px;
	font-size: 0.9rem;
	
  }
}
.countdown-deluxe-circles2 span:first-of-type {
    margin-left: 0;
}

.countdown-deluxe-circles3 {
    text-transform: uppercase;
	font-size: 0.60rem;
	color: #000 !important;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles3 {
	font-size: 0.66rem;
	
  }
}
.countdown-deluxe-circles3 span {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.0);
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 1.2rem;
	font-optical-sizing: auto;
    color: #000 !important;
	font-weight: 200 !important;
	border: 1.5px dotted #000000;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles3 span {
    width: 41px;
    height: 41px;
	font-size: 1rem;
	
  }
}
.countdown-deluxe-circles3 span:first-of-type {
    margin-left: 0;
}

.countdown-deluxe-circles4 {
    text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles4 {
	font-size: 0.65rem;
	font-weight: 500 !important;
	
  }
}
.countdown-deluxe-circles4 span {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.0);
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 1.1rem;
    font-optical-sizing: auto;
	font-weight: 600 !important;
	border: 2.2px solid #9c916b;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles4 span {
    width: 47px;
    height: 47px;
	font-size: 0.9rem;
	
  }
}

.countdown-deluxe-circles4 span {
    margin-left: 0;
}
.countdown-deluxe-circles4 span:first-of-type {
    margin-left: 0;
}

.countdown-deluxe-circles5 {
    text-transform: uppercase;
	font-size: 0.80rem;
	font-weight: 340;
	font-weight: 500 !important;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles5 {
	font-size: 0.75rem;
  }
}
.countdown-deluxe-circles5 span {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
	font-weight: 340 !important;
	font-size: 1.7rem;
	border: 1px solid #fff;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles5 span {
    width: 55px;
    height: 55px;
	font-size: 1.4rem;
	
  }
}
.countdown-deluxe-circles5 span:first-of-type {
    margin-left: 0;
}


.countdown-deluxe-circles6 {
    text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: bold;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles6 {
	font-size: 0.65rem;
	font-weight: 500 !important;
	
  }
}
.countdown-deluxe-circles6 span {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.0);
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 1.1rem;
    font-optical-sizing: auto;
	font-weight: 600 !important;
	border: 2.2px solid #b2a6ce;
}

@media screen and (max-width: 768px) {
.countdown-deluxe-circles6 span {
    width: 47px;
    height: 47px;
	font-size: 0.9rem;
	
  }
}

.countdown-deluxe-circles6 span {
    margin-left: 0;
}
.countdown-deluxe-circles6 span:first-of-type {
    margin-left: 0;
}

.divider {
    width: 100px;
    height: 6px;
    background-color: rgb(156, 145, 107);
}

.divider-center {
    width: 100%;
    height: 6px;
    background-color: rgb(156, 145, 107);

}

.elegance {
     font-family: 'Montserrat', sans-serif;
}

.elegance h1 {
    font-weight: 800;
    font-size: 3rem;
}

.elegance h2 {
    font-weight: 200;
	font-size: 1.375rem;
}

.elegance h3 {
    font-weight: 800;
	font-size: 2rem;
}

.elegance p {
    font-weight: 400;
	font-size: 1.125rem;
}


@media screen and (max-width: 768px) {
.elegance h3 {
font-size: 1.625rem;
 }
}

@media screen and (max-width: 768px) {
.elegance h1 {
font-size: 2.375rem;
 }
}

@media screen and (max-width: 768px) {
.elegance h2 {
font-size: 1.125rem;
 }
}


.elegance-date {
    font-weight: 800;
}

.elegance-header {
    display: flex;
}

.elegance-header-bottom {
    margin: -20px 0px -10px 0px;
}

.elegance2 {
     font-family: 'Abril Fatface', cursive;
}

h1.elegance2  {
    font-size: 5.313rem;
}

@media screen and (max-width: 768px) {
h1.elegance2 {
font-size: 2.5rem;
 }
}


h2.elegance2  {
	font-size: 2.813rem;
}

@media screen and (max-width: 768px) {
h2.elegance2 {
font-size: 2.375rem;
 }
}

.elegance2 h3 {
	font-size: 2.188rem;
}

.elegance2 p {
	font-size: 1.25rem;
}


@media screen and (max-width: 768px) {
.elegance2 h3 {
font-size: 1.75rem;
 }
}


.cinzel {
     font-family: "Cinzel Decorative", serif;
	 font-weight: 400;
     font-style: normal;
}

h1.cinzel  {
    font-size: 2.813rem;
}

@media screen and (max-width: 768px) {
h1.cinzel {
font-size: 2.188rem;
 }
}


h2.cinzel  {
	font-size: 2.388rem;
}

@media screen and (max-width: 768px) {
h2.cinzel {
font-size: 1.688rem;
 }
}

.cinzel h3 {
	font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
.cinzel h3 {
font-size: 1.49rem;
 }
}

.cinzel p {
	font-size: 1.1rem;
}



.elegance3 {
     font-family: 'Abril Fatface', cursive;
}

h1.elegance3  {
    font-size: 5.625rem;
}

@media screen and (max-width: 768px) {
h1.elegance3 {
font-size: 2.5rem;
 }
}


h2.elegance3  {
	font-size: 2.813rem;
}

@media screen and (max-width: 768px) {
h2.elegance3 {
font-size: 1.875rem;
 }
}

.elegance3 h3 {
	font-size: 2.188rem;
}

.elegance3 p {
	font-size: 1.25rem;
}



@media screen and (max-width: 768px) {
.elegance3 h3 {
font-size: 1.75rem;
 }
}


.sacramento {
     font-family: "Sacramento", sans-serif;
}

h1.sacramento  {
    font-size: 5rem;
}

@media screen and (max-width: 768px) {
h1.sacramento {
font-size: 3.75rem;
 }
}


h2.sacramento  {
	font-size: 3.125rem;
}

@media screen and (max-width: 768px) {
h2.sacramento {
font-size: 2.5rem;
 }
}

.sacramento h3 {
	font-size: 1.875rem;
}

.sacramento h4 {
	font-size: 5.375rem;
}


.disco {
      font-family: 'Monoton', cursive;
	 font-weight: normal;
}

.disco h1 {

	font-size: 5rem;
}

.disco h2 {
	font-size: 3.75rem;
}

.disco h3 {
	font-size: 2.188rem;
}

.disco p {
	font-size: 1.25rem;
}
.disco i {
	font-size: 5.625rem;
}


@media screen and (max-width: 768px) {
.disco h3 {
font-size: 1.75rem;
 }
.disco h1 {
    font-size: 3.125rem;
}
.disco h2 {
    font-size: 2.375rem;
}
.disco i {
	font-size: 4.063rem;
}
.disco p {
  font-size: 1.125rem;
}

	
}

.disco-2 {
  font-size: 2.813rem;
  font-family: "Sacramento", sans-serif;
  font-weight: 400;
  font-style: normal;
	text-stroke: 0.6px #ac75f9;
	-webkit-text-stroke: 0.6px #ac75f9;
}

.disco-3 {
	text-stroke: 0.6px #ac75f9;
	-webkit-text-stroke: 0.6px #ac75f9;
}

.disco-3-no {
	text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 40px #ac75f9,
      0 0 30px #ac75f9, 0 0 40px #ac75f9, 0 0 500px #ac75f9, 0 0 100px #ac75f9;
	-webkit-transform: translate3d(0,0,0);
}


.disco2024 {
  padding: 0.2em;
	background: url(../img/disco-borde.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;

}
@media screen and (max-width: 768px) {
.disco2024 {
  background: url(../img/disco-borde-mobile.png);
	     background-repeat: no-repeat;
     background-size: 100% 100%;
}

	
}

.disco-circulo {
	background: url(../img/disco-estrella.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;

}

.disco2024-no {
  border: 0.2rem solid #fff;
  border-radius: 2rem;
  padding: 0.4em;
  box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 2rem #ac75f9,
            0 0 0.8rem #ac75f9,
            0 0 2.8rem #ac75f9,
            inset 0 0 1.3rem #ac75f9;
	-webkit-transform: translate3d(0,0,0);
}


.texto-disco-inclinado {
  transform: skew(0, -12deg) rotateZ(5deg); 
}

.neonText {
    text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 40px #ac75f9,
      0 0 30px #ac75f9, 0 0 40px #ac75f9, 0 0 500px #ac75f9, 0 0 100px #ac75f9;
}

.neonText2 {
  animation: flicker 1.3s infinite alternate;
  color: #fff;
	-webkit-transform: translate3d(0,0,0);
}
/* Flickering animation */
@keyframes flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    text-shadow: 0 0 4px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 40px #ac75f9,
      0 0 30px #ac75f9, 0 0 40px #ac75f9, 0 0 500px #ac75f9, 0 0 100px #ac75f9;
  }

  20%,
  24%,
  55% {
    text-shadow: none;
	  
  }
}

.circle-singleline {
        background: #a78977;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        color: #fff;
        display: inline-block;
        line-height: 100px;
        text-align: center;
        width: 100px;
	    font-size: 4.375rem;
      }
@media screen and (max-width: 768px) {
.circle-singleline {
        line-height: 40px;
        width: 40px;
	   font-size: 1.563rem;
 }
}

.circle-singleline2 {
        background: #a78977;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        color: #fff;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        width: 50px;
	    font-size: 2.5rem;
      }
@media screen and (max-width: 768px) {
.circle-singleline2 {
        line-height: 40px;
        width: 40px;
	   font-size: 1.875rem;
 }
}
.circle-singleline3 {
        background: #9c916b;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        color: #fff;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        width: 50px;
	    font-size: 2.5rem;
      }
@media screen and (max-width: 768px) {
.circle-singleline3 {
        line-height: 40px;
        width: 40px;
	   font-size: 1.875rem;
 }
}

.circle-singleline4 {
        background: transparent !important;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        color: #fff !important;
	    border: solid 2px #fff;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        width: 50px;
	    font-size: 2.5rem;
      }
@media screen and (max-width: 768px) {
.circle-singleline4 {
        line-height: 40px;
        width: 40px;
	   font-size: 1.875rem;
 }
}

.circle-singleline5 {
        background: #890029;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        color: #fff;
        display: inline-block;
        line-height: 50px;
        text-align: center;
        width: 50px;
	    font-size: 2.5rem;
      }
@media screen and (max-width: 768px) {
.circle-singleline5 {
        line-height: 40px;
        width: 40px;
	   font-size: 1.875rem;
 }
}
.date-line {
  width: 250px;
  text-align: center;
  margin: auto;
  overflow: hidden;
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
.date-line {
	   width: 200px;
	   font-size: 0.938rem;
 }
}
.date-line:before {
  margin-left: -100%;
}
.date-line:after {
  margin-right: -100%;
}
.date-line:before, .date-line:after {
  display: inline-block;
  content: "";
  background-color: #fff;
  height: 1px;
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  border: solid #FFF;
  border-width: 0 10px;
}

.date-lineg {
  width: 250px;
  text-align: center;
  margin: auto;
  overflow: hidden;
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
.date-lineg {
	   width: 200px;
	   font-size: 0.875rem;
 }
}
.date-lineg:before {
  margin-left: -100%;
}
.date-lineg:after {
  margin-right: -100%;
}
.date-lineg:before, .date-lineg:after {
  display: inline-block;
  content: "";
  background-color: #a78977;
  height: 1px;
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  border: solid #a78977;
  border-width: 0 10px;
}

.date-lineb {
  width: 250px;
  text-align: center;
  margin: auto;
  overflow: hidden;
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
.date-lineb {
	   width: 200px;
	   font-size: 0.875rem;
 }
}
.date-lineb:before {
  margin-left: -100%;
}
.date-lineb:after {
  margin-right: -100%;
}
.date-lineb:before, .date-lineb:after {
  display: inline-block;
  content: "";
  background-color: #000;
  height: 1px;
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  border: solid #000;
  border-width: 0 10px;
}

.date-lineb2 {
  width: 250px;
  text-align: center;
  margin: auto;
  overflow: hidden;
  font-size: 1.25rem;
}

@media screen and (max-width: 768px) {
.date-lineb2 {
	   width: 200px;
	   font-size: 0.875rem;
 }
}
.date-lineb2:before {
  margin-left: -100%;
}
.date-lineb2:after {
  margin-right: -100%;
}
.date-lineb2:before, .date-lineb2:after {
  display: inline-block;
  content: "";
  background-color: #7E7E7E;
  height: 0.5px;
  width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
  border: solid #7E7E7E;
  border-width: 0 10px;
}

.slanted:after, .slanted-gray:after, .slanted-gold:after, .slanted-gold2:after {
  content: "";
  background: #fff;
  height: 200px;
  -webkit-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  transform: skewY(-5deg);
  position: absolute;
  left: 0;
  bottom: -120px;
  right: 0;
  z-index: -1; }

.slanted-gray:after {
  background: #f8f9fa !important; }

.slanted-gold:after {
  background: #e4d9c7 !important; }

.slanted-gold2:after {
  background: #9c916b !important;
  height: 200px;
  bottom: -120px;
  z-index: -1;
}

.slanted-gold3:after {
  background: #e4d9c7 !important;
  content: "";
  height: 200px;
  -webkit-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  position: absolute;
  left: 0;
  top: -120px;
  right: 0;
  z-index: -1;
}

.slanted-gold4:after {
  background: #9c916b !important;
  content: "";
  height: 200px;
  -webkit-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  position: absolute;
  left: 0;
  bottom: -120px;
  right: 0;
  z-index: -1;
}

.slanted-white4:after {
  background: #fff !important;
  content: "";
  height: 200px;
  -webkit-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  position: absolute;
  left: 0;
  bottom: -120px;
  right: 0;
  z-index: -1;
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-color: transparent;
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: -1;
    opacity: 0.75;
}
.bgBottom {
    z-index: -1;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
    animation: move-wave 3s;
    -webkit-animation: move-wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 250px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 20s linear infinite;
}
.waveBottom {
    background-size: 50% 200px;
}
.waveAnimation .waveBottom {
    animation: move_wave 30s linear infinite;
}

@keyframes move_wave2 {
    0% {
        transform: translateX(0) translateZ(0)
    }
    50% {
        transform: translateX(-25%) translateZ(0)
    }
    100% {
        transform: translateX(-50%) translateZ(0)
    }
}
.waveWrapper2 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0;
}
.waveWrapperInner2 {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-color: transparent;
}
.bgTop2 {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle2 {
    z-index: -1;
    opacity: 0.75;
}
.bgBottom2 {
    z-index: -1;
}
.wave2 {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop2 {
    background-size: 50% 100px;
}
.waveAnimation2 .waveTop2 {
    animation: move-wave2 3s;
    -webkit-animation: move-wave2 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.waveMiddle2 {
    background-size: 50% 250px;
}
.waveAnimation2 .waveMiddle2 {
    animation: move_wave2 20s linear infinite;
}
.waveBottom2 {
    background-size: 30% 150px;
}
@media screen and (max-width: 768px) {
.waveBottom2 {
background-size: 50% 75px;
 }
}
.waveAnimation2 .waveBottom2 {
    animation: move_wave2 30s linear infinite;
}


.circle-fecha {
        background-image: url(../img/wave-mid-bronce.png);
        display: inline-block;
        line-height: 100px;
        text-align: center;
        width: 100px;
      }
@media screen and (max-width: 768px) {
.circle-fecha {
        line-height: 50px;
        width: 50px;
 }
}

.dispositivos-img{
  position: relative;
  top:70px
}
@media screen and (max-width: 768px) {
.dispositivos-img {
        top:50px
 }
}

.dispositivos-texto{
  position: relative;
  top:70px
}
@media screen and (max-width: 768px) {
.dispositivos-texto {
        top:50px
 }
}



.dispo-img{
  top:130px;
  position:relative;
}

@media screen and (max-width: 768px) {
.dispo-img {
	top:-200px
	}
}



/* Circulo cuenta regresiva 1 */
.circulo-cuenta-regresiva{
  position: relative;
  height: 130px;

}

.circulo-cuenta-regresiva .caja-aro{
  width: 500px;
  height: 500px;
  background: url('../img/circulo-fecha1b.png') center center no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 99;
  top:-350px
}


.circulo-cuenta-regresiva .caja-aro .caja-circulo{
  width: 330px;
  height: 330px;
  padding: 20px;
  background-color: white;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.40);
  -moz-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.40);
  box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.40);
}

.circulo-cuenta-regresiva .caja-aro .caja-circulo span.caja-texto{
  width: 100%;
  text-align: center;
  display: inline-block;
  margin-top: 30px;
}

.circulo-cuenta-regresiva .caja-aro .caja-circulo .caja-icono{
  width: 18%;
  margin-top: 5px;
}

@media screen and (max-width: 768px) {
.circulo-cuenta-regresiva .caja-aro .caja-circulo{
  width: 280px;
  height: 280px;}
}


/* ---------- */

/* Circulo cuenta regresiva 2 */
.circulo-cuenta-regresiva .caja-aro2{
  width: 470px;
  height: 470px;
  background: url('../img/circulo-fecha2b.png') center center no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 99;
  top:-350px
}


.circulo-cuenta-regresiva .caja-aro2 .caja-circulo{
  width: 330px;
  height: 330px;
  padding: 20px;
  background-color: white;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.40);
  -moz-box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.40);
  box-shadow: 0px 0px 15px -1px rgba(0,0,0,0.40);
}

.circulo-cuenta-regresiva .caja-aro2 .caja-circulo span.caja-texto{
  width: 100%;
  text-align: center;
  display: inline-block;
  margin-top: 30px;
}


@media screen and (max-width: 768px) {
.circulo-cuenta-regresiva .caja-aro2 .caja-circulo{
  width: 280px;
  height: 280px;}
}


/* ---------- */


/* Circulo cuenta regresiva 3 */
.circulo-cuenta-regresiva-3{
  position: absolute;
	
}
.circulo-cuenta-regresiva-3 .caja-aro3{
  width: 460px;
  height: 460px;
  background: url('../img/circulo-disco.png?ver=2') center center no-repeat;
  background-size: 100%;
  position: relative;
  z-index: -1;
  display:table-cell;
  vertical-align:middle;  
}


.circulo-cuenta-regresiva-3 .caja-aro3 .caja-circulo3 span.caja-texto3{
  width: 100%;
  text-align: center;
}

/* ---------- */

/* Circulo cuenta regresiva 4 */
.circulo-cuenta-regresiva-4{
  position: absolute;
	

}
.circulo-cuenta-regresiva-4 .caja-aro4{
  width: 460px;
  height: 460px;
  background: url('../img/circulo-fecha3.png') center center no-repeat;
  background-size: 100%;
  position: relative;
  z-index: 99;
  display:table-cell;
  vertical-align:middle;  
}


.circulo-cuenta-regresiva-4 .caja-aro4 .caja-circulo span.caja-texto{
    width: 100%;
  text-align: center;
 
}


/* ---------- */


.vert-move {
    -webkit-animation: mover 0.7s infinite  alternate;
    animation: mover 0.7s infinite  alternate;
}

.vert-move2 {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}

.vert-move3 {
    -webkit-animation: mover 1.3s infinite  alternate;
    animation: mover 1.3s infinite  alternate;
}

@keyframes mover {
    0% { transform: translateY(0);}
    100% { transform: translateY(-15px);}
}

.like-heart {
  padding: 20px 15px;
  border-radius: 50%;
  display: inline-block;
  background-color: red ;
  animation: heart-beat 0.50s ease-in-out infinite alternate;
}

/* The animation code */
@keyframes heart-beat {
  from {
    transform: scale(1) translate(0px, 0px);
  }
  to {
    transform: scale(1.4) translate(-6px, -6px);
  }
}

.zoom-move {
    animation: zoom-in-zoom-out 2s ease-out infinite;
}


@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

.shake-move {
  animation: wiggle 2s linear infinite;
}

.shake-move2 {
  animation: wiggle 3s linear infinite;
}

/* Keyframes */
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.animac{
    overflow: hidden;
    position: absolute;
}
.animacInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    background-color: transparent;
}

#cloud img{
  position: absolute; top: 5%; right: auto; left: auto;
  height: 113px;
  width: 200px;
  margin-left: 50%;
  animation-name: cloud;
  animation-duration: 40s;
  animation-iteration-count:infinite;
  z-index: -1;
}

@keyframes cloud{
  0%{ transform: translatex(200px); }
  50%{ transform: translatex(-400px);}
  100%{ transform: translatex(200px); }
}
#cloud2 img{
  position: absolute; top: 7%; right: auto; left: auto;
  margin-left: 50%;
  height: 190px;
  width: 500px;
  animation-name: cloud2;
  animation-duration: 30s;
  animation-iteration-count:infinite;
  z-index: -1; 
	opacity: 85%;
}

@keyframes cloud2{
  0%{ transform: translatex(-150px); }
  50%{ transform: translatex(-250px);}
  100%{ transform: translatex(-150px); }
}

#globo img{
  width: 220px;
  margin-left: 25%;
  position: absolute; top: 25%; right: auto; left: 0px;
  animation-name: globo;
  animation-duration: 30s;
  animation-iteration-count:infinite;
  z-index: -1;
}
@media screen and (max-width: 768px) {
#globo img{
  margin-left: -10px;
	width: 100px;
	}
}

@keyframes globo{
  0%{ transform: translatey(50px); }
  50%{ transform: translatey(0px);}
  100%{ transform: translatey(50px); }
}
#globo2 img{
  width: 250px;
  margin-right: 25%;
  position: absolute; top: 25%; right: 0px; left: auto;
  animation-name: globo2;
  animation-duration: 20s;
  animation-iteration-count:infinite;
  z-index: -1; 
}
@media screen and (max-width: 768px) {
#globo2 img{
  margin-right: -40px;
	  width: 130px;
	}
}

@keyframes globo2{
  0%{ transform: translatey(0px); }
  50%{ transform: translatey(50px);}
  100%{ transform: translatey(0px); }
}

#personaje img{
  width: 380px;
  margin-left: 25%;
  position: absolute; bottom: 10px; right: auto; left: 10px;
  animation: wiggle 3s linear infinite;
}
#personaje2 img{
  width: 350px;
  margin-left: 23%;
  position: absolute; bottom: 20px; right: auto; left: 10px;
  animation: wiggle 3s linear infinite;
}


@media screen and (max-width: 768px) {
#personaje img{
  margin-left: -10px;
	width: 180px;
	}
#personaje2 img{
  margin-left: -10px;
	width: 180px;
	}
}

#torta img{
  width: 250px;
  margin-right: 25%;
  position: absolute; bottom: 50px; right: 0px; left: auto;
  animation-name: globo2;
  animation-duration: 20s;
  animation-iteration-count:infinite; 
}


#torta2 img{
  width: 350px;
  margin-right: 25%;
  position: absolute; bottom: 50px; right: 0px; left: auto;
}

@media screen and (max-width: 768px) {
#torta img{
   margin-right:10px;
	width: 130px;
	}
#torta2 img{
   margin-right:10px;
	width: 180px;
	}
}

#suelo {
  position: absolute;bottom: 0; right: auto; left: auto;
  animation: linear infinite;
  animation-name: suelo;
  animation-duration: 15s;
	z-index: -1;
	    overflow: hidden;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}

@keyframes suelo {
    0% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(-25%)
    }
    100% {
        transform: translateX(-50%)
    }
}

.column-reverse { display: flex; flex-direction: column-reverse; }


.steps .step {
    display: block;
    width: 100%;
    margin-bottom: 35px;
    text-align: center
}

.steps .step .step-icon-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 80px;
    text-align: center
}

.steps .step .step-icon-wrap::before,
.steps .step .step-icon-wrap::after {
    display: block;
    position: absolute;
    top: 50%;
    width: 50%;
    height: 3px;
    margin-top: -1px;
    background-color: #e1e7ec;
    content: '';
    z-index: 1
}

.steps .step .step-icon-wrap::before {
    left: 0
}

.steps .step .step-icon-wrap::after {
    right: 0
}

.steps .step .step-icon {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid #e1e7ec;
    border-radius: 50%;
    background-color: #f5f5f5;
    color: #374250;
    font-size: 2.375rem;
    line-height: 91px;
    z-index: 5
}

.steps .step .step-title {
    margin-top: 16px;
    margin-bottom: 0;
    color: #000;
    font-size: 1.563rem;
}

.steps .step:first-child .step-icon-wrap::before {
    display: none
}

.steps .step:last-child .step-icon-wrap::after {
    display: none
}

.steps .step.completed .step-icon-wrap::before,
.steps .step.completed .step-icon-wrap::after {
    background-color: #9c916b
}

.steps .step.completed .step-icon {
    border-color: #9c916b;
    background-color: #9c916b;
    color: #fff
}

@media (max-width: 576px) {
    .flex-sm-nowrap .step .step-icon-wrap::before,
    .flex-sm-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

@media (max-width: 768px) {
    .flex-md-nowrap .step .step-icon-wrap::before,
    .flex-md-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

@media (max-width: 991px) {
    .flex-lg-nowrap .step .step-icon-wrap::before,
    .flex-lg-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

@media (max-width: 1200px) {
    .flex-xl-nowrap .step .step-icon-wrap::before,
    .flex-xl-nowrap .step .step-icon-wrap::after {
        display: none
    }
}

.vintage-container
{
    position: relative;
    background-color: lightgrey;
    height: 500px;
}
.vintage-container .polaroid
{
    position: absolute;
    border: 1px solid darkgrey;
    background-color: white;
    padding: 15px 15px 60px 15px;
    box-shadow: 5px 10px 10px darkgrey;
}

.mockup--mobile {
  position: relative;
  background: rgb(35,35,35,1.00);
  background: linear-gradient(0deg, rgba(35,35,35,1.00) 0%, rgba(35,35,35,1.00) 50%, rgba(45,45,45,1.00) 100%);
  padding: 45px 10px;
  box-shadow: 0 2px 15px 2px rgba(13, 26, 20, 0.8);
  border-radius: 30px;
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
}

.mockup--mobile:after,
.mockup--mobile:before {
  content: "";
  height: 8px;
  background:#666666;
  position: absolute;
  top: 23px;
}

.mockup--mobile:before {
  width: 8px;
  border-radius: 50%;
  left: 52px;
}

.mockup--mobile:after {
  width: 40px;
  border-radius: 3px;
  left: 50%;
  transform: translateX(-50%);
}

.mockup--mobile .mockup-image {
  padding-top: 177.77778%;
  position: relative;
  width: 250px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  overflow-y: auto;
}

.mockup--mobile .mockup-image::-webkit-scrollbar {
  width: 4px;
}

.mockup--mobile .mockup-image::-webkit-scrollbar-track {
  background:#4A4A4A;
}

.mockup--mobile .mockup-image::-webkit-scrollbar-thumb {
  background: #888;
}

.mockup--mobile .mockup-image::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@media (min-width: 992px) {
  .p_section--horizontal-split .media-container .image {
    opacity: 1;
    transition: all 0.2s ease-out;
  }
}

.mockup--mobile .mockup-image img {
  position: absolute;
  top: 0;
  left: 0;
  border: 0px solid #000;
  border-radius: 6px;
  width: 100%;
}

/* ubicacion mobile */
.mockup-index{
  position: relative;
  height: 130px;
}

.mockup-index .caja-phone{
  width: 100%;
  height: 470px;
  background-size: 100%;
  position: relative;
  z-index: 99;
  top:-160px
}


@media screen and (max-width: 996px) {
.mockup-index .caja-phone{
  width: 100%;
  height: 460px;
	top:-180px}

.mockup--mobile .mockup-image {
  width: 200px;
	}
}

/* ---------- */

.shadow-std {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.music-play {
  position: fixed;
  top: 1rem;
  right: 1vw;
  display: block;
  font-size: 0.938rem;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: rgba(200, 200, 200, 0.3);
  line-height: 30px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
}

.flag-lang {
  position:fixed;
  width:20px;
  height:20px;
  top:55px;
  right: 1vw;
  color:#FFF;
  border-radius:50px;
  text-align: center;
  z-index: 99;
  box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  background: rgba(200, 200, 200, 0.8);
}

#lista-de-invitados {
  position:fixed;
  width:auto;
  height: 10px;
  top: 15px;
  left: 0vw;
  z-index: 99;
  line-height: 14px;
  text-align: left;
  vertical-align: middle;
}
#lista-de-invitados-content {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.40);
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.40);
  -moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.40);
  color:#000;
  font-size: 0.788rem;
  padding: 4px 4px 4px 20px;
  border-radius: 0px 5px 5px 0px;
}



audio {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}
audio {
  width: 100%;
}
audio::-webkit-media-controls-panel {
  background-color: #e4d9c7;
	
}

audio::-webkit-media-controls-play-button{
  background-color: #C1BAA3;
  border-radius: 50%;
}

audio::-webkit-media-controls-current-time-display {
display: none;
}
audio::-webkit-media-controls-time-remaining-display {
display: none;
}
	
audio::-webkit-media-controls-play-button:hover {
  background-color: rgba(140, 126, 80, .7);
}

.ribbon-wrapper {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 99;
}
.ribbon-wrapper .ribbon {
  font-size: 0.688rem;
	font-weight: bold;
  text-align: center;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position: relative;
  padding: 2px 0;
  top: 15px;
  left: -30px;
  width: 120px;
  background-color: rgba(235, 201, 52,.75);
  color: #fff;
}

@media (min-width: 1024px) {
 .prevu_zoom {
  z-index: 1;
  display: inline-block;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}
.prevu_zoom:hover {
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.05);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.05);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.05);
  transition: all 200ms ease-in;
  transform: scale(1.05);
}
}

/* load */
.HeartAnimation {
  padding-top: 2em;
  background-image: url("../img/load_heart.png");
  background-repeat: no-repeat;
  background-size: 2900%;
  background-position: left;
  height: 100px;
  width: 100px;
  -webkit-animation: heart-burst 0.8s steps(28) infinite;
          animation: heart-burst 0.8s steps(28) infinite;
  margin: 0 auto;
}

@-webkit-keyframes heart-burst {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

@keyframes heart-burst {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

.StarAnimation {
  padding-top: 2em;
  background-image: url("../img/load_star.png");
  background-repeat: no-repeat;
  background-size: 2900%;
  background-position: left;
  height: 100px;
  width: 100px;
  -webkit-animation: heart-burst 0.8s steps(28) infinite;
          animation: heart-burst 0.8s steps(28) infinite;
  margin: 0 auto;
}

.wdp-ribbon {
	display: inline-block;
	padding: 1px 9px;
	position: absolute;
	right: 0px;
	top: 10px;
	line-height: 25px;
	height: 25px;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25em;
	border-radius: 0;
	text-shadow: none;
	font-size: 0.875rem;
	font-weight: bolder;
	background-color: rgba(242, 120, 82, 0.8);
    color: #fff;
	z-index: 99;

}

.wdp-ribbon-2 {
	display: inline-block;
	padding: 1px 9px;
	position: absolute;
	right: 0px;
	top: 10px;
	line-height: 25px;
	height: 25px;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25em;
	border-radius: 0;
	text-shadow: none;
	font-size: 0.875rem;
	font-weight: 550;
	background-color: rgba(87, 169, 142, 0.9);
    color: #fff;
	z-index: 99;

}
.wdp-ribbon-two:before,
.wdp-ribbon-two:before {
	display: inline-block;
	content: "";
	position: absolute;
	left: -12px;
	top: 0;
	border: 9px solid transparent;
	border-width: 12px 8px;
	border-right-color: #1eb5ff;
}
.wdp-ribbon-two:before {
	border-color: #1eb5ff;
	border-left-color: transparent !important;
	left: -9px;
}

.inactivo {
	pointer-events: none;
	opacity: 0.5;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.numberCircle {
    border-radius: 50%;
    width: 50px;
    height: 500px;
    padding: 3px 7px 3px 7px;
    border: 2px solid #666;
    color: #666;
    text-align: center;
}

.fancybox-slide--iframe .fancybox-content {
	width  : 700px;
	margin: 0;
}

/*

   Styles for animated modal
   =========================

*/

/* Start state */
.animated-modal {
  max-width: 550px;
  border-radius: 4px;
  overflow: hidden;
  
  transform: translateY(-50px);
  transition: all .7s;
}

.animated-modal h2,
.animated-modal p {
  transform: translateY(-50px);
  opacity: 0;
  
  transition-property: transform, opacity;
  transition-duration: .4s;
}

/* Final state */
.fancybox-slide--current .animated-modal,
.fancybox-slide--current .animated-modal h2,
.fancybox-slide--current .animated-modal p {
  transform: translateY(0);
  opacity: 1;
}

/* Reveal content with different delays */
.fancybox-slide--current .animated-modal h2 {
  transition-delay: .1s;
}

.fancybox-slide--current .animated-modal p {
  transition-delay: .3s;
}

.fancybox-slide--iframe .fancybox-content {
    margin: 0 !important;
}

.switch {
  position: relative;
  display: inline-block;
  margin: 0 5px;
}

.switch > span {
  position: absolute;
  top: 14px;
  pointer-events: none;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 0.75rem;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  width: 50%;
  text-align: center;
}

input.check-toggle-round-flat:checked ~ .off {
  color: #F36F25;
}

input.check-toggle-round-flat:checked ~ .on {
  color: #fff;
}

.logosnowi-xl {
     max-height: 33vh;
}
  @media (max-width: 768px) {
    .logosnowi-xl {
      max-height: 25vh; } }

.logoi-sub-title {
  font-size: 0.75rem;
  letter-spacing: .35em;
  text-transform: uppercase;
}

  @media (max-width: 768px) {
    .logoi-sub-title {
      font-size: 0.625rem; }
}


#hexagon {
  width: 100px;
  height: 57.735px;
  background: red;
  position: relative;
}
#hexagon::before {
  content: "";
  position: absolute;
  top: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 28.8675px solid red;
}
#hexagon::after {
  content: "";
  position: absolute;
  bottom: -28.8675px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 28.8675px solid red;
}


#countdown-banner {display: flex; align-items: center; justify-content: center; color: #fff; padding: 5px 5px; /*background: linear-gradient(270deg, #4e9c87, #9c916b, #308259);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;*/
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
#countdown-banner .sale-name { font-size: 0.938rem; font-weight: 600; padding-right: 10px; border-right: solid 1px; margin-right: 10px}
#countdown-banner .sale-ends {font-size: 0.813rem; margin-right: 10px}
.sale-name {}
#countdown-timer {display: inherit}
#countdown-timer .sep {margin: 0 1px}
#countdown-timer .unit {text-align: center; min-width: 18px}
#countdown-timer .unit .digits {font-size: 0.938rem; font-weight: 600; margin-top: 5px; margin-bottom: 0px}
#countdown-timer .unit .label {font-size: 0.438rem; margin-top: -4px}

/* Faux outline for older browsers */
.outline {
    color: black; /* Unfortunately you can't use transparent here … */
    text-shadow:
	   -1px -1px 0 #fff,  
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		 1px 1px 0 #fff
}

/* Real outline for modern browsers */
@supports((text-stroke: 1px white) or (-webkit-text-stroke: 1px white)) {
    .outline {
        color: transparent;
        -webkit-text-stroke: 1px white;
		text-stroke: 1px white;
        text-shadow: none;
    }
}

.text-logo-amo {
    font-family: 'Quicksand', sans-serif;
	font-size: 5.0rem;
    line-height: 100%;
	text-transform: lowercase;
}

.text-logo-amo-sm {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.8rem;
	letter-spacing: -0.05rem !important;
    line-height: 100%;
	font-weight: 300;
	text-transform: lowercase;
}

  @media (max-width: 990px) {
    .text-logo-amo {
      font-size: 3.5rem; }
}

.text-sub-logo-amo {
  font-size: .70rem;
  letter-spacing: .50em;
  text-transform: uppercase; }

  @media (max-width: 990px) {
    .text-sub-logo-amo {
      font-size: .55rem; }
}

.text-sub-logo-amo2 {
  font-size: 0.375rem;
  letter-spacing: .4em;
  text-transform: uppercase; 
}

.text-sub-logo-amo3 {
  font-size: 0.375rem;
  font-weight: 100;
}

.popout {
  font-family: "Quicksand", sans-serif;
  font-size: 2.3rem;
  letter-spacing: 0.01rem;
}
@-webkit-keyframes ani {
  0% {
    transform: translate3d(0, 0, 0);
    text-shadow: 0em 0em 0 #4e9c87;
    color: black;
  }
  30% {
    transform: translate3d(0, 0, 0);
    text-shadow: 0em 0em 0 #4e9c87;
    color: black;
  }
  70% {
    transform: translate3d(-0.08em, 0.08em, 0);
    text-shadow: 0.08em -0.08em #4e9c87;
    color: black;
  }
  100% {
    transform: translate3d(-0.08em, 0.08em, 0);
    text-shadow: 0.08em -0.08em #4e9c87;
    color: black;
  }
}
@keyframes ani {
  0% {
    transform: translate3d(0, 0, 0);
    text-shadow: 0em 0em 0 #4e9c87;
    color: black;
  }
  30% {
    transform: translate3d(0, 0, 0);
    text-shadow: 0em 0em 0 #4e9c87;
    color: black;
  }
  70% {
    transform: translate3d(-0.08em, 0.08em, 0);
    text-shadow: 0.08em -0.08em #4e9c87;
    color: black;
  }
  100% {
    transform: translate3d(-0.08em, 0.08em, 0);
    text-shadow: 0.08em -0.08em #4e9c87;
    color: black;
  }
}
.popout span {
  position: relative;
  display: inline-block;
  -webkit-animation: ani 1s infinite alternate cubic-bezier(0.86, 0, 0.07, 1);
          animation: ani 1s infinite alternate cubic-bezier(0.86, 0, 0.07, 1);
}
.popout span:nth-last-child(1n) {
  -webkit-animation-delay: -0.1666666667s;
          animation-delay: -0.1666666667s;
}
.popout span:nth-last-child(2n) {
  -webkit-animation-delay: -0.3333333333s;
          animation-delay: -0.3333333333s;
}
.popout span:nth-last-child(3n) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}

/*PRICE COLOR CODE START*/
#generic_price_table .generic_content{
  background-color: #fff;
}

#generic_price_table .generic_content .generic_head_price{
  background-color: #f6f6f6;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
  border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
  color: #525252;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price-t .sign{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price-t .currency{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price-t .cent{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
    color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li{  
  color: #a7a7a7;
}

#generic_price_table .generic_content .generic_feature_list ul li span{
  color: #414141;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
  background-color: #E4E4E4;
  border-left: 5px solid #4e9c87;
}

#generic_price_table .generic_content .generic_price_btn a{
  border: 1px solid #4e9c87; 
    color: #4e9c87;
} 

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{
  border-color: #4e9c87 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #4e9c87;
  color: #fff;
}

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,
#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{
  color: #fff;
}

#generic_price_table .generic_content:hover .generic_price_btn a,
#generic_price_table .generic_content.active .generic_price_btn a{
  background-color: #4e9c87;
  color: #fff;
} 
.row .table{
    padding: 28px 0;
}

/*PRICE BODY CODE START*/

#generic_price_table .generic_content{
  overflow: hidden;
  position: relative;
  text-align: center;
}

#generic_price_table .generic_content .generic_head_price {
  margin: 0 0 20px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content{
  margin: 0 0 30px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
    border-style: solid;
    border-width: 90px 1411px 23px 399px;
  position: absolute;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head{
  padding-top: 20px;
  position: relative;
  z-index: 1;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag{
  padding: 0 0 20px;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price-t{
  display: block;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price-t .sign{
    display: inline-block;
    font-size: 1.75rem;
    font-weight: 400;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price-t .currency{
    font-size: 3.75rem;
    font-weight: 340 !important;
    letter-spacing: -2px;
    line-height: 60px;
    padding: 0;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price-t .cent{
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 400;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 3px;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_feature_list ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

#generic_price_table .generic_content .generic_feature_list ul li{
  font-size: 0.938rem;
  font-weight: 300;
  padding: 2px 0;
  color: #000;
  transition: all 0.3s ease-in-out 0s;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;

}
#generic_price_table .generic_content .generic_feature_list ul li .fa{
  padding: 0 10px;
}
#generic_price_table .generic_content .generic_price_btn{
  margin: 20px 0 32px;
}

#generic_price_table .generic_content .generic_price_btn a{
    border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  -webkit-border-radius: 50px;
    display: inline-block;
    font-size: 1.125rem;
    outline: medium none;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
}

#generic_price_table .generic_content,
#generic_price_table .generic_content:hover,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content .price-t,
#generic_price_table .generic_content:hover .price-t,
#generic_price_table .generic_content .generic_price_btn a,
#generic_price_table .generic_content:hover .generic_price_btn a{
  transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
} 
@media (max-width: 320px) { 
}

@media (max-width: 767px) {
  #generic_price_table .generic_content{
    margin-bottom:75px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  #generic_price_table .col-md-3{
    float:left;
    width:50%;
  }
  
  #generic_price_table .col-md-4{
    float:left;
    width:50%;
  }
  
  #generic_price_table .generic_content{
    margin-bottom:75px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}

.demo-pic{
  margin: 0 auto;
}
.demo-pic:hover{
  opacity: 0.7;
}

#generic_price_table_home ul{
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: table;
}
#generic_price_table_home li{
  float: left;
}
#generic_price_table_home li + li{
  margin-left: 10px;
  padding-bottom: 10px;
}
#generic_price_table_home li a{
  display: block;
  width: 50px;
  height: 50px;
  font-size: 0px;
}
#generic_price_table_home .divider{
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
}
#generic_price_table_home .divider span{
  width: 100%;
  display: table;
  height: 2px;
  background: #ddd;
  margin: 50px auto;
  line-height: 2px;
}
#generic_price_table_home .itemname{
  text-align: center;
  font-size: 3.125rem;
  padding: 50px 0 20px ;
  border-bottom: 1px solid #ddd;
  margin-bottom: 40px;
  text-decoration: none;
    font-weight: 340;
}
#generic_price_table_home .itemnametext{
    text-align: center;
    font-size: 1.25rem;
    padding-top: 5px;
    text-transform: uppercase;
    display: inline-block;
}

.price-heading{
    text-align: center;
}
.price-heading h1{
  color: #666;
  margin: 0;
  padding: 0 0 50px 0;
}
.demo-button {
    background-color: #333333;
    color: #ffffff;
    display: table;
    font-size: 1.25rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium ;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}
.bottom_btn{
  background-color: #333333;
    color: #ffffff;
    display: table;
    font-size: 1.75rem;
    margin: 60px auto 20px;
    padding: 10px 25px;
    text-align: center;
    text-transform: uppercase;
}
.demo-button:hover{
  background-color: #666;
  color: #FFF;
  text-decoration:none;
  
}
.bottom_btn:hover{
  background-color: #666;
  color: #FFF;
  text-decoration:none;
}

.mercadopago-button {
  background-color: #009ee3 !important;
  padding: 2px 2px !important;
  font-size: 1rem !important;
  font-family: 'Jost', sans-serif !important;
  transition-duration: 0.4s !important;
  cursor: pointer !important;
	display: block !important;
	width:100% !important;
	text-transform: uppercase;
}
.mercadopago-button:hover {
  background-color: #005D86 !important;
  color: white !important;
}


.testimonials:before {
    content: "";
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
}
.testimonials .heading h2 {
    font-size: 1.563rem;
    font-weight: 700;
    color: #ffffff;
}

.testimonials .heading h2 span {
    color: #ff0000;
}

.testimonials p {
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.7;
    color: #d1e5e7;
    margin: 20px 0;
    padding: 0;
}

/* Image */
.testimonials .carousel-inner .carousel-item .team {
    width: 100px;
    height: 100px;
    border: 2px solid #ff0000;
    border-radius: 100%;
    padding: 5px;
    margin: 50px 0 15px;
}

.testimonials .carousel-inner .carousel-item h3 {
    font-size: 1.25rem;
    color: #ffffff;
    font-weight: 600;
}

.testimonials .carousel-inner .carousel-item h4 {
    font-size: 0.875rem;
    font-weight: 340;
    color: #e2e1e1;
    margin-bottom: 20px;
}

.testimonials .carousel-indicators {
    bottom: -30px;
}

.testimonials .carousel-indicators li {
    background-color: #b8b7b7;
    border-radius: 30px;
    height: 4px;
    width: 40px;
}

.testimonials .carousel-indicators .active {
    background-color: #ff0000;
}

.testimonials .control span {
    cursor: pointer;
}

.testimonials .icon {
    height: 40px;
    width: 40px;
    background-size: 100%, 100%;
    border-radius: 50%;
    font-size: 1.875rem;
    background-image: none;
    color: #ffffff;
}

.text-rockabilly {
  color: #9e1c28 !important;
}

.text-rockabilly-font {
  font-family: "Shrikhand", cursive;
  font-weight: 400;
}

.text-rockabilly-font-2 {
  font-family: "Oswald", Sans-serif;
	font-weight: 400;
}

.rockabilly {
  position: relative;
  display: inline-block;
  color: #F3F3F3;
  width: 100%;
  text-align: center;
  font-size: 1.188rem;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.rockabilly-title {
  font-family: "Shrikhand", cursive;
  font-weight: 400;
  font-size: 3.1rem;
  color: #9e1c28;
  padding: 0;
  text-align: center;
  margin: 0;
  line-height: 45px;
	text-shadow: 2px 2px 0 #fff, 5px 4px 0 #4da497;
	transform: rotate(355deg);
}

  @media (max-width: 768px) {
    .rockabilly-title {
      font-size: 2.1rem;
	  line-height: 35px;}
}

.rockabilly-title-2 {
  font-family: "Shrikhand", cursive;
  font-weight: 400;
  font-size: 2.9rem;
  color: #fff;
  padding: 0;
  text-align: center;
  margin: 0;
  line-height: 30px;
	text-shadow: 2px 2px 0 #9e1c28, 5px 4px 0 #4da497;
	transform: rotate(355deg);
}

  @media (max-width: 768px) {
    .rockabilly-title-2 {
      font-size: 2.2rem; }
}

.rockabilly h1 {
  font-family: "Shrikhand", cursive;
  font-weight: 400;
  font-size: 4.2rem;
  color: #F3F3F3;
  padding: 0;
  text-align: center;
  margin: 0;
  line-height: 60px;
	text-shadow: 2px 2px 0 #9e1c28, 5px 4px 0 #4da497;
	transform: rotate(355deg);
}

  @media (max-width: 768px) {
    .rockabilly h1 {
      font-size: 2.5rem;
	  line-height: 35px;}
}

.rockabilly h1 span{
  font-size: 2.8rem;
  font-style: italic;
}

  @media (max-width: 768px) {
    .rockabilly h1 span{
      font-size: 1.7rem;}
}

.rockabilly h5 {
  background-color: #D0D0D0;
  color: #212121;
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 20px;
  padding: 0 25px;
  position: relative;
}

  @media (max-width: 768px) {
    .rockabilly h5 {
      font-size: 0.8rem;
	  line-height: 18px;
      padding: 0 22px;}
}

.rockabilly h5:before,
.rockabilly h5:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 2px;
  border-width: 9px 5px;
  border-style: solid;
  opacity: 0.8;
}

.rockabilly h5:before {
  right: 100%;
  border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}

.rockabilly h5:after {
  left: 100%;
  border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}

.rockabilly h6 {
  margin: 0;
	font-family: "Oswald", cursive;
	font-weight: 400;
	letter-spacing: .155rem;
	font-size: 1.8rem;
  display: inline-block;
  position: relative;
  text-transform: uppercase;
}

  @media (max-width: 768px) {
    .rockabilly h6 {
      font-size: 1rem; }
}

.rockabilly h6:before,
.rockabilly h6:after {
  position: absolute;
  height: 6px;
  content: "";
  width: 30px;
  top: 50%;
  border-top: 2px solid #bdbdbd;
  border-bottom: 2px solid #bdbdbd;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.rockabilly h6:before {
  left: -35px;
}

.rockabilly h6:after {
  right: -35px;
}

.rockabilly i {
  font-size: 0.75rem;
  line-height: 6px;
  color: #bdbdbd;
}


.rockabilly-filtered {
    filter: brightness(101%) contrast(105%) saturate(135%) sepia(39%) invert(16%)  
}

.rockabilly-frame-body {
  display: grid;
  min-height: 50vh;
  place-items: center;
}
.rockabilly-frame {
  display: grid;
  grid-template-columns: -webkit-max-content auto;
  grid-template-columns: max-content auto;
  grid-template-rows: auto -webkit-max-content;
  grid-template-rows: auto max-content;
  color: white;
  width: 100%;
  height: 200px;
  padding: 2rem;
}
.rockabilly-frame:before, .rockabilly-frame:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid white;
}
.rockabilly-frame:before {
  grid-row: 1/2;
  border-right: none;
  border-bottom: none;
}
.rockabilly-frame:after {
  grid-row: 1/span 2;
  border-left: none;
}
.rockabilly-frame h2 {
  margin: 1rem 1rem -0.5rem 0;
  font-family: "Shrikhand", cursive;
  font-size: 2.2rem;
  max-width: 100%;
}







.rockabilly-stripes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  background-color: #4ea599;
}

.rockabilly-stripe {
  height: 0.5rem;
  width: 100%;
  margin: 0;
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
          clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
@media (min-width: 900px) {
  .rockabilly-stripe {
    height: 1.2rem;
  }
}
.rockabilly-stripe:nth-child(even) {
  background-color: #b6575f;
  width: 150%;
}

.rockabilly-div{
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  background:rgba(214,216,205 , 0.95);
}
#rock-one {
  border:solid 5px rgba(158, 28, 40, 1);
}
#rock-two{
   border:dotted 5px rgba(158, 28, 40, 1);
}
#rock-three{
   border:dashed 5px rgba(158, 28, 40, 1);
}

.rockabilly-div1 img{
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  background:rgba(245, 246, 230 , 0.0);
  border:dotted 5px rgba(158, 28, 40, 1);
}

.rockabilly-div2 img{
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  background:rgba(245, 246, 230 , 0.0);
  border:dashed 5px rgba(158, 28, 40, 1);
}

.rockabilly-div3a img{
  border-radius: 8% 92% 12% 88% / 88% 17% 83% 12%    ;
  background:rgba(245, 246, 230 , 0.0);
  border:dashed 5px #4da497;
}

.rockabilly-div3b img{
  border-radius: 93% 7% 92% 8% / 12% 91% 9% 88%    ;
  background:rgba(245, 246, 230 , 0.0);
  border:dashed 5px #4da497;
}


figure.snip1113 {
  position: relative;
  overflow: hidden;
  margin: 0px;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  background: #f5ede5;
  text-align: center;
}

figure.snip1113 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

figure.snip1113 img {
  max-width: 65%;
  margin: 10px auto;
  display: block;
  position: relative;
  border: 2px solid #666666;
  padding: 15px 15px 110px 15px;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
@media (max-width: 768px) {
  figure.snip1113 img {
   max-width: 85%;
  }
}

figure.snip1113 figcaption {
  position: absolute;
  height: 100px;
  bottom: 0px;
  left: 0;
  right: 0;
  display: block;
	text-align: center;
}

figure.snip1113 h3 {
  font-family: "Shrikhand", cursive;
  background-color: #f5ede5;
  color: #000000;
  font-size: 1.7em;
  width: 100%;
  padding: 5px 0px;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
	text-align: center;
}

@media (max-width: 768px) {
  figure.snip1113 h3 {
   font-size: 1.3em;
  }
}
figure.snip1113 h4 {
  font-family: "Oswald", Sans-serif;
  margin: 0 20px 0;
  text-transform: uppercase;
  opacity: 0.6;
  font-size: 1.1em;
  text-align: center;
}
@media (max-width: 768px) {
  figure.snip1113 h4 {
   font-size: 0.8em;
   margin: 0 25px 0;
  }
}

figure.snip1113.blue img {
  border-color: #2472a4;
}

figure.snip1113.blue h3,
figure.snip1113.blue h4 {
  color: #2472a4;
}

figure.snip1113.red img {
  border-color: #9e1c28;
}

figure.snip1113.red h3,
figure.snip1113.red h4 {
  color: #9e1c28;
}

figure.snip1113.yellow img {
  border-color: #e08e0b;
}

figure.snip1113.yellow h3,
figure.snip1113.yellow h4 {
  color: #e08e0b;
}

figure.snip1113.green img {
  border-color: #4ea599;
}

figure.snip1113.green h3,
figure.snip1113.green h4 {
  color: #4ea599;
}

figure.snip1113.orange img {
  border-color: #d67118;
}

figure.snip1113.orange h3,
figure.snip1113.orange h4 {
  color: #d67118;
}

figure.snip1113.navy img {
  border-color: #2b3c4e;
}

figure.snip1113.navy h3,
figure.snip1113.navy h4 {
  color: #2b3c4e;
}

.rockabilly-lunares {
  background: rgba(158,28,40,0.95);
  background-image: radial-gradient(wheat 20%, transparent 0),
    radial-gradient(wheat 20%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

.rockabilly-lunares2 {
  background: rgba(0,0,0,0.95);
  background-image: radial-gradient(#2e2e2e 20%, transparent 0),
    radial-gradient(#2e2e2e 20%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
	border-top: 10px solid wheat;
	
}.rockabilly-lunares3 {
  background: rgb(77,164,151);
  background-image: radial-gradient(wheat 20%, transparent 0),
    radial-gradient(wheat 20%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
	border-top: 10px solid wheat;
	border-bottom: 10px solid wheat;
}


.rockabilly-cuadrille {
  background: linear-gradient(90deg, rgba(158,28,40, 0.6) 50%, transparent 0),
  linear-gradient(rgba(158,28,40, 0.6) 50%, transparent 0); 
  background-size: 30px 30px; background-color:#d3c8bc;
}
.rockabilly-gradiente {
	background: rgba(109,191,179, 0.85);
    background: linear-gradient(180deg, rgba(109,191,179,0.85) 0%, rgba(237,226,198,0.85) 100%);
}
.rockabilly-cubo {
	background:
    radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
    #fff;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	border: 7px solid wheat;
}

@property --s {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

.rockabilly-frame1 img {
  --t: 3px;  /* control the thickness (corner = 3*edge) */
  --s: 30px; /* control the size of the corners (that also affect the size of the edges) */
  --g: 19px;  /* control the gap */
  --c: #4ea599;
  
  padding: calc(2*var(--t) + var(--g));
  border: var(--t) solid #0000;
  background:
    conic-gradient(at var(--s) calc(3*var(--t)),#0000 75%,var(--c) 0)
     0 0/calc(100% - var(--s)) calc(100% - 3*var(--t)) border-box,
    conic-gradient(at calc(3*var(--t)) var(--s),#0000 75%,var(--c) 0)
     0 0/calc(100% - 3*var(--t)) calc(100% - var(--s)) border-box,
    linear-gradient(  0deg,var(--c) calc(2*var(--t)),#0000 0) 
      50% var(--t)/calc(100% - 2*(var(--s) + var(--g))) 100% 
      repeat-y padding-box,
    linear-gradient(-90deg,var(--c) calc(2*var(--t)),#0000 0) 
      var(--t) 50%/100% calc(100% - 2*(var(--s) + var(--g))) 
      repeat-x padding-box;
  transition: --s .5s;
}


.rockabilly-button-1 {
  box-sizing: border-box;
  color: #fff;
  border: 0px !important;
  font-family: "Oswald", Sans-serif;
  font-size: 1.1rem;
  justify-content: center;
  line-height: 1.75rem;
  padding: .75rem 1.65rem;
  position: relative;
  text-align: center;
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.rockabilly-button-1:focus {
  outline: 0;
}

.rockabilly-button-1:after {
  content: '';
  position: absolute;
  border: 1px solid #000000;
  bottom: 8px;
  left: 8px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
	transition: 0.2s;

}

.rockabilly-button-1:hover:after {
  bottom: 2px;
  left: 2px;
	
}

@media (min-width: 768px) {
  .rockabilly-button-1 {
    padding: .75rem 3rem;
    font-size: 1.3rem;
  }
}

.rockabilly-button-2 {
  box-sizing: border-box;
  color: #fff;
  font-family: "Oswald", Sans-serif;
	font-weight: 400;
  font-size: 1.1rem;
  justify-content: center;
  line-height: 1.75rem;
  padding: .75rem 1.65rem;
  position: relative;
  text-align: center;
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto;
  cursor: text;
}

.rockabilly-button-2:focus {
  outline: 0;
}

.rockabilly-button-2:after {
  content: '';
  position: absolute;
  border: 1px solid #000000;
  bottom: 8px;
  left: 8px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
	transition: 0.2s;

}

@media (min-width: 768px) {
  .rockabilly-button-2 {
    padding: .75rem 3rem;
    font-size: 1.3rem !important;
  }
}

.verde-i {
  background-color: #4ea599;
	transform: rotate(-2deg);
}
.verde-d {
  background-color: #4ea599;
	transform: rotate(2deg);
}
.rojo-i {
  background-color: #9e1c28!important;
	transform: rotate(-2deg)!important;
}
.rojo-d {
  background-color: #9e1c28;
	transform: rotate(2deg);
}

.rockabilly-testigos {
  box-shadow: 24px 24px 0px -6px wheat;
-webkit-box-shadow: 24px 24px 0px -6px wheat;
-moz-box-shadow: 24px 24px 0px -6px wheat;
  box-sizing: border-box;
  justify-content: center;
  line-height: 1.75rem;
  padding: .75rem 1.65rem;
  position: relative;
  text-align: center;
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto;
  cursor: text;
}

.rockabilly-testigos:focus {
  outline: 0;
}

.rockabilly-testigos:after {
  content: '';
  position: absolute;
  border: 1px solid #000000;
  bottom: 8px;
  left: 8px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
	transition: 0.2s;

}

.rockabilly-testigos h3 {
  font-family: "Shrikhand", cursive;
  color: #9e1c28;
  font-size: 1em;
}

.rockabilly-testigos h4 {
    font-family: "Oswald", Sans-serif;
	font-weight: 400;
  color: #9e1c28;
  font-size: 0.6em;
}

.globo-star {
   -webkit-clip-path: polygon(50% 0%, 67% 28%, 98% 35%, 78% 59%, 79% 91%, 49% 79%, 21% 91%, 24% 59%, 2% 35%, 34% 28%);
  clip-path: polygon(50% 0%, 67% 28%, 98% 35%, 78% 59%, 79% 91%, 49% 79%, 21% 91%, 24% 59%, 2% 35%, 34% 28%);
	-webkit-transform: translate3d(0,0,0);
/* OR */
-webkit-transform: translateZ(0);;
	

}
.globo-star-borde {
	filter: drop-shadow(2px 2px 2px #fff) drop-shadow(4px 4px 10px #ac75f9) ;
	webkit-transform: translate3d(0,0,0);
/* OR */
-webkit-transform: translateZ(0);
}


.arrows {
  width: 30px;
  height: 36px;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  bottom: 20px;
}

@media (max-width: 768px) {
  .arrows {
    top: 15px;
	bottom: 0px;
  }
}

.arrows path {
  fill: transparent;
  stroke-width: 2px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

@keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes arrow /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.arrows path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s; /* Safari 和 Chrome */
}

.arrows-2 {
  width: 30px;
  height: 36px;
  position: absolute;
  left: 50%;
  margin-left: -11px;
  bottom: 10px;
}

.arrows-2 path {
  fill: transparent;
  stroke-width: 2px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

@keyframes arrow-2 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes arrow-2 /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.arrows-2 path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s; /* Safari 和 Chrome */
}

.arrows-2 path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
}

.arrows-2 path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s; /* Safari 和 Chrome */
}
.arrows-3 {
  width: 30px;
  height: 36px;
  position: absolute;
  left: 50%;
  margin-left: -11px;
  top: 10px;
}
@media (max-width: 768px) {
  .arrows {
    top: 15px;
  }
}
.arrows-3 path {
  fill: transparent;
  stroke-width: 2px;
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
}

@keyframes arrow-3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes arrow-3 /*Safari and Chrome*/ {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.arrows-3 path.a1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s; /* Safari 和 Chrome */
}

.arrows-3 path.a2 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
}

.arrows-3 path.a3 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s; /* Safari 和 Chrome */
}

.invert { filter: invert(100%); }

.hexagon {
	position: relative;
  height: 147px; /* adjust to control the size  */
	width: 330px; /* adjust to control the size  */
  aspect-ratio: cos(30deg);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hexagon::after { 
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';  
    background: #555555;
    clip-path: polygon(
        /* We first go around the pseudo element to recreate the hexagon */
        50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 
        /* We make sure to close the hexagon and go back to the start */
        50% 0%, 
        /* We then go down inside the hexagon (feel free to change the border size, here it is of 10px)*/
        50% 5px,
        /* We finally go around the pseudo element in reverse to carve a smaller hexagon inside */
        /* 0.49999999999999994 is sin(30deg) as it's only supported in Safari for now */
        5px calc(25% + 5px * 0.49999999999999994), 5px calc(75% + 5px * -0.49999999999999994), 50% calc(100% - 5px), calc(100% - 5px) calc(75% + 5px * -0.49999999999999994), calc(100% - 5px) calc(25% + 5px * 0.49999999999999994), 50% 5px
    );

}

.hexagon2 {
  position: relative;
  min-height: 550px; /* adjust to control the size  */
  width: 100%; /* adjust to control the size  */
  aspect-ratio: cos(30deg);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.hexagon2::after { 
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';  
    background: #555555;
    clip-path: polygon(
        /* We first go around the pseudo element to recreate the hexagon */
        50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, 
        /* We make sure to close the hexagon and go back to the start */
        50% 0%, 
        /* We then go down inside the hexagon (feel free to change the border size, here it is of 10px)*/
        50% 5px,
        /* We finally go around the pseudo element in reverse to carve a smaller hexagon inside */
        /* 0.49999999999999994 is sin(30deg) as it's only supported in Safari for now */
        5px calc(25% + 5px * 0.49999999999999994), 5px calc(75% + 5px * -0.49999999999999994), 50% calc(100% - 5px), calc(100% - 5px) calc(75% + 5px * -0.49999999999999994), calc(100% - 5px) calc(25% + 5px * 0.49999999999999994), 50% 5px
    );

}