@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

 * {
   box-sizing: border-box;
 }

 body {
   text-align: center;
   font-family: 'Cormorant Garamond', serif;
   letter-spacing: 0.1em;
   color: #ffffff;
   margin: 0;
   /* padding: 40px 0; */
   width: 100%;
   height: 100% !important;
   background-image: url("../img/PORTADA.png");
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
/* COOKIES */

.rowbar {
  position: relative;
  max-width: 131.42857rem;
  margin-left: auto;
  margin-right: auto;
}

.columnsbar {
  padding-left: 0.42857rem;
  padding-right: 0.42857rem;
}

.cookies-bar {
  padding: 0.71429rem;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.70);
  /* border-top: 1px solid rgb(186, 152, 42); */
  z-index: 10001;
  outline: 0;
}


.content-container p {  
    text-align: left;
    margin: 0;
    padding-right: 8.07143rem;
    font-size: 0.71429rem;
    line-height: 1.4;
    letter-spacing: 0.03571rem;
    color: rgb(230,230,230);
  }

.cookies-custom-button {
    text-transform: uppercase;
    text-decoration: none;
    /* color: #fff; */
    /* border: 1px solid #fff; */
    background-color: rgb(0, 0, 0);
    position: absolute;
    right: 1.35714rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #000;
    padding: 0.35714rem 0.71429rem;
    font-size: 0.71429rem;
    line-height: 1.42857rem;
}

/* STRUCTURE */

.wrapper {
	/* padding: 5px; */
  /* max-width: 100%; */
  display: flex;
  width: 100vw;
  /* height: 100vh; */
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  padding: 50px 50px;
	/* margin: 20px auto; */
}

header {  
  justify-content: center;
}

header img{

  width: 230px;
}


.row {
	display: flex;
  /* flex-flow: row wrap; */
  flex-flow: wrap;
	justify-content: center;
	margin: 5px 0;
}

.column {
  /* flex: 1; */
  width: 25%;
  /* height:100%; */
  /* margin: 0px 20px 0px 20px;
    padding: 0px 20px 0px 20px; */
	/* &:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
	 */
}


h4{
  font-size: 20px;
  font-weight: lighter;
  margin-block-start: 3em;
  margin-block-end: 1.5em;
}


h3{
  font-style:italic;
  font-size: 25px;
  font-weight: lighter;
  margin-block-start: 0.5em;
}

h2{
font-size: 48px;
margin-block-start: 0em;
margin-block-end: 0em;
}


p{
  margin-block-start: 0.4em;
}

footer {
  padding: 0 5px;
}



/* #logo-alt {
  opacity: 1;

  height: 25vh;
  width: auto;
} */

.btninicio {

  font-size: 32px;
  background-color: transparent; 
  background-position: 100% 0;
  background-size: 200% 200%;
  border: none; 
  outline: solid;
  outline-width: 1px;
  color: rgb(228, 175, 39);
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0px 8px 8px rgba(255, 253, 253, 0.2);
  text-align: center;
  font-size: 22px;
  width: 250px;
  height: 40px; 
  margin: 25px;
  /* box-shadow: 0 16px 32px 0 rgba(252, 181, 100, 0.247); */
  box-shadow: 0 8px 32px 12px rgba(252, 181, 100, 0.250);
  font-family: 'Cormorant Garamond', serif;
  z-index: 1;
  cursor: pointer;  
}

.btninicio:hover {
  box-shadow: 0 16px 16px 0 rgba(255, 255, 255, 0.0966);
  background-position: 0 0; 
  color: rgb(252, 195, 88);
  transition: all 0.5s;
  -webkit-transform: scale(1.025);
  -ms-transform: scale(1.025);
  transform: scale(1.025);
}

.btninicio:active {
  box-shadow: 0 16px 16px 0 rgba(255, 255, 255, 0.0966);
  background-position: 0 0; 
  color: rgb(255, 255, 255);
  transition: all 0.5s;
  -webkit-transform: scale(1.025);
  -ms-transform: scale(1.025);
  transform: scale(1.025);
}



.btninicio:disabled{
  background-color: gray;
  color: #242420; 
  cursor: not-allowed;
}

#acerca {
  line-height: 12px;
  color: rgb(230,230,230);
}

#acerca:hover {
  color: #E7C045;
}

#acerca:active {
  color: rgb(255,255,255);
}

#disclaimer {
  color: rgb(230,230,230);
}

a:-webkit-any-link {
  text-decoration: none;
  font-style:italic;
}




@media screen and (max-width: 980px) {
  /* .row .column {
		margin-bottom: 5px;
    flex-basis: 40%;
    &:nth-last-child(2) {
			margin-right: 0;
		}
		&:last-child {
			flex-basis: 100%;
			margin: 0;
		}
  } */

  .row {
    flex-wrap: wrap;
  }
  
}

@media screen and (max-width: 680px) {
	/* .row .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
  } */
  .row > .column {
		flex-basis: 100%; 
  }

  #logo-alt {
    opacity: 1;
    /* margin: 1em 0; */
    width: 80%;
    /* height: 25vh; */
  }

 
}
  

/* PETALOS DE FONDO */
.petal {
    height: 950px;
    width: 100%;
    position: absolute;
    top: -150px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    z-index: -1;

  }
  
  .petal span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 200px 10px 200px 200px;
    background: linear-gradient(to bottom, rgb(209, 146, 28), rgb(240, 205, 153));
    z-index: 1;
    transform: skewX(30deg);
    backface-visibility: visible;
    -webkit-animation: fallingSakura1 7s ease infinite;
  }
  
  .petal span:nth-of-type(3n+2) {
    -webkit-animation: fallingSakura2 7s ease infinite;
  }
  
  .petal span:nth-of-type(3n+1) {
    -webkit-animation: fallingSakura3 7s ease infinite;

  }
  
  .petal span:nth-of-type(n)   { -webkit-animation-delay: -1.9s;}
  .petal span:nth-of-type(2n)  { -webkit-animation-delay: 3.9s;}
  .petal span:nth-of-type(3n)  { -webkit-animation-delay: 2.3s;}
  .petal span:nth-of-type(4n)  { -webkit-animation-delay: 4.4s;}
  .petal span:nth-of-type(5n)  { -webkit-animation-delay: 5s;  }
  .petal span:nth-of-type(6n)  { -webkit-animation-delay: 3.5s;}
  .petal span:nth-of-type(7n)  { -webkit-animation-delay: 2.8s;}
  .petal span:nth-of-type(8n)  { -webkit-animation-delay: 1.5s;}
  .petal span:nth-of-type(9n)  { -webkit-animation-delay: 3.3s;}
  .petal span:nth-of-type(10n) { -webkit-animation-delay: 2.5s;}
  .petal span:nth-of-type(11n) { -webkit-animation-delay: 1.2s;}
  .petal span:nth-of-type(12n) { -webkit-animation-delay: 4.1s;}
  .petal span:nth-of-type(13n) { -webkit-animation-delay: 5.8s;}
  .petal span:nth-of-type(14n) { -webkit-animation-delay: -0.1s;}
  .petal span:nth-of-type(15n) { -webkit-animation-delay: 6.3s;}
  .petal span:nth-of-type(16n) { -webkit-animation-delay: -1s;}
  .petal span:nth-of-type(17n) { -webkit-animation-delay: 7.4s;}
  .petal span:nth-of-type(18n) { -webkit-animation-delay: -0.3s;}
  .petal span:nth-of-type(19n) { -webkit-animation-delay: 8.3s;}
  .petal span:nth-of-type(20n) { -webkit-animation-delay: -0.6s;}
  .petal span:nth-of-type(21n) { -webkit-animation-delay: 7.7s;}
  
  .petal span:nth-of-type(2n+2) {
    background: linear-gradient(to right, orange, rgb(224, 202, 105));
    width: 40px;
    height: 40px;

  }
  
  .petal span:nth-of-type(3n+1) {
    background: linear-gradient(to right, orange, rgb(240, 189, 94));
    
  }
  
  .petal span:nth-of-type(3n+2) {
    border-radius: 20px 1px;
  }
  .petal span:nth-of-type(3n+3) {
    transform: rotateX(-180deg);
  }
  
  .petal span:nth-of-type(3n+2) {
    animation-duration: 12sec;
  }
  
  .petal span:nth-of-type(4n+2) {
    animation-duration: 9sec;
  }
  
  .petal span:nth-of-type(5n+2) {
    width: 12px;
    height: 12px;
    box-shadow: 1.5px 1.5px 8px #fc7bd1;
  }
  
  .petal span:nth-of-type(4n+3) {
    width: 10px;
    height: 10px;
    box-shadow: 1px 1px 6px #fc7bd1;
  }
  
  @-webkit-keyframes fallingSakura1 {
        0% {
          -webkit-transform:
              translate3d(0,0,0)
              rotateX(0deg);
          opacity: 1;
      }  
      
      100% {
          -webkit-transform:
              translate3d(400px,1200px,0px)
              rotateX(-290deg);
          opacity: 0.3;
      }
  }
  
  @-webkit-keyframes fallingSakura2 {
      0% {
          -webkit-transform:
              translate3d(0,0,0)
              rotateX(-20deg);
        opacity: 1;
      }  
      
      100% {
          -webkit-transform:
              translate3d(200px,1200px,0px)
              rotateX(-70deg);
              opacity: 0.2;
      }
  }
  
  @-webkit-keyframes fallingSakura3 {
       0% {
          -webkit-transform:
              translate3d(0,0,0)
              rotateX(90deg);
         opacity: 1;
      }
      
      100% {
          -webkit-transform:
              translate3d(500px,1200px,0px)
              rotateX(290deg);
          opacity: 0;
      }
  }


#petals {
    animation: fadein 6s;
    -moz-animation: fadein 6s; /* Firefox */
    -webkit-animation: fadein 6s; /* Safari and Chrome */
    -o-animation: fadein 6s; /* Opera */
}