:root {
    --ff: 'Montserrat', sans-serif;
    
    --fw-n: 400;
    --fw-b: 800;
    
    --fs-2: 5rem;
    --fs-p: 0.9rem;
    
    --primary-clr: #03F3FF;
    --primary-clr-op: rgb(3, 243, 255,0.85);
    --primary-clr-dark: #34A2FE;
    --secondary-clr: #9500FC;
    --accent-clr: #EF6461;
    --overlay-color: rgba(24, 24, 24, 0.5);
    --menu-speed: 0.75s;
  
    --spacer: 1rem;
    --spacer-md: calc(var(--spacer) * 2);
    --spacer-lg: calc(var(--spacer) * 3);
    
    --shadow: 0 0 1em rgba(0,0,0, .25);
    --br: 5px;
    
  }

*{
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Hamburguer Menu */
.menu-wrap {
  position: fixed;
  top: 1rem;
  left: 0;
  z-index: 1;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 1rem;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: var(--primary-clr);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}

/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .menu > div {
  background: var(--overlay-color);
  border-radius: 50%;
  width: 300vw;
  height: 300vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.menu-wrap .menu > div > div > ul {
  padding: 0;
}

.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: white;
  font-size: 1.5rem;
}

.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
  transition: 1s;
}

.menu-wrap .menu > div > div > ul > li > a:hover {
  color: var(--secondary-clr);
}



html,body{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    font-family: var(--ff);
    font-weight: var(--fw-n);
    margin: 0;
}

header{
    width: 100%;
}

#cabezera{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    margin: 2rem 0;
}

#logo{
  width: 200px;
  height: 120px;
  position: relative;
  background: url('images/iconosolito-14.png') no-repeat center center/cover;
  z-index: 100;
}

#logo:before{
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -100;
  background: url('images/iconosolito-15.png') no-repeat center center/cover;
  animation: logo 3s ease-in-out infinite forwards;
}

@keyframes logo{
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
}


#cabezera nav p{
    margin: 0;
    background: grey;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3em;
    letter-spacing: 8px;
    transition: 1s ease;
}

#cabezera nav p:hover{
    background: linear-gradient(var(--primary-clr) , var(--secondary-clr));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#title{
  margin: 0;
    background: linear-gradient(to bottom,var(--primary-clr) , var(--secondary-clr));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3em;
    letter-spacing: 8px;
    z-index: 100;
    position: relative;
    margin-bottom: 1rem;
}

#title:before {
  margin: 0;
  background: linear-gradient(to top,var(--primary-clr) , var(--secondary-clr));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content: 'NELUMBO';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -100;
  animation: nelumbo 3s ease-in-out infinite forwards;
}

@keyframes nelumbo{
    0%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

#cabezera nav{
    width: 60%;
    margin-bottom: 1rem;
}

#cabezera ul{
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

#cabezera ul li p{
    font-size: 1em;
    letter-spacing: 6px;
}

footer{
    grid-area:footer;
}

#home{
    grid-area: a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
}

#home p{
    margin: 0;
    color: rgb(148, 148, 148);
    font-size: 2em;
    letter-spacing: 10px;
    word-spacing: 10px;
    text-align: center;
}

#home img{
    margin-bottom: 1rem;
}

#shop{
    grid-area: b;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    margin-top: 40px;
    background-color: var(--primary-clr-dark);
    background-image: url(images/lineas.png);
    background-origin:border-box;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    color:white;
}

#shop .contenedor{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
}

#shop p.titulo{
    margin: 0;
    font-size: 2em;
    letter-spacing: 10px;
    word-spacing: 10px;
    justify-self: center center;
    text-align: center;
    width: 260px;
    margin: 50px 0px;
}

#shop p.contenido{
    text-align: justify;
    line-height: 25px;
    font-size: 0.9em;
}

#shop a{
    margin: 50px 0px; 
}

a{
    text-decoration: none;
}

.btn{
    background-color: var(--primary-clr); /* Green */
    border: 1px solid var(--primary-clr);;
    color: #546CFD;
    padding: 10px 40px;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 50px;
    transition: 1s;
}

.btn:hover{
    background: linear-gradient(to right, var(--secondary-clr) , var(--primary-clr));
    border-color: linear-gradient(to right, var(--secondary-clr) , var(--primary-clr));
    color: white;
}

#services {
    grid-area: c;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
}

#services p.titulo{
    margin: 0;
    font-size: 1.5em;
    letter-spacing: 10px;
    word-spacing: 10px;
    justify-self: center center;
    text-align: center;
    margin: 50px 0px;
    color: rgb(148, 148, 148);
}

#services .tarjetas{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
}

#services img{
    width: 200px;
    transition:all .5s;
}

#services img:hover{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

#news {
    grid-area: d;
    width: 100%;
    display: grid;
    grid-template: repeat(8,4.5rem) /repeat(8,1fr);
    background-color: var(--secondary-clr);
    color:white;
}

#news .mapa{
    grid-area: 1/1/9/5;
    display: flex;
    align-items: center;
    justify-content: center;
}

#news .contenedor{
  grid-area: 1/5/9/9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    justify-self: center;
}

#news a{
  
  grid-area: 8/1/9/-1;
  align-self: center;
  justify-self:center;

}

#news p.titulo1{
    margin: 0;
    font-size: 2em;
    letter-spacing: 10px;
    word-spacing: 10px;
    justify-self: center center;
    text-align: center;
}

#news p.titulo2{
    margin: 0;
    font-size: 3.5em;
    letter-spacing: 20px;
    justify-self: center center;
    text-align: center;
    padding-left: 10px;
}

#news p.contenido{
    text-align: justify;
    line-height: 25px;
    font-size: 0.9em;
    margin: 50px 0px;
}

#contact {
    grid-area: e;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
}

#contact img{
    width: 60%;
    margin-top: 50px;
}

#contact .titulo{
    margin: 0;
    font-size: 1.7em;
    letter-spacing: 10px;
    word-spacing: 10px;
    justify-self: center center;
    text-align: center;
    color: rgb(148, 148, 148);
    margin-bottom: 50px;
}

footer{
    grid-area: footer;
    background: linear-gradient(to right, var(--secondary-clr) , var(--primary-clr));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 150px;
}
footer img{
    width: 100px;
}


img {
    display: block;
    width: 100%;
    height: auto;
  }

h1,h2,h3,h4,h5,h6{
    font-weight: 800;
}


/* Small Screens*/
@media(max-width: 1200px){
    #cabezera nav{
        width: 80%;
    }
}

/* Small Screens*/
@media(max-width: 1000px){
    #cabezera nav{
        width: 90%;
    }
}

/* Small Screens*/
@media(max-width: 800px){
    #cabezera nav{
        width: 95%;
    }
    #d{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; 
        grid-template-areas: 
        "contenedor"
        "mapa";
    }
}

/* Small Screens*/
@media(max-width: 700px){
    #cabezera nav{
        display: none;
    }
}

/* Small Screens*/
@media(max-width: 600px){
    #news {
    grid-template: repeat(8,6rem) /repeat(8,1fr);
}

#news .mapa{
    grid-area: 5/1/9/-1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#news .contenedor{
  grid-area: 1/1/6/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    justify-self: center;
}
#contact {
    width: 90%;
}
}

/* Landscape */

@media(max-height: 500px){

}