* {box-sizing: border-box;}

body{
  height: 100vh;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ----- WRAPPER ----- */

.wrapper {
  height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-gap: 0px;
}

.wrapper > * {
  padding: 0px;
}

.margin{
  margin-left: calc(100vw / 12);
  margin-right: calc(100vw / 12);
}

/* --------------- HERO --------------- */


.hero{
  grid-column: col-start / span 12;
}

.hero-content{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.hero-foot{
  text-align: center;
}

.hero-content > * {
  align-self: center;
}

.is-centered{
  text-align: center;
}

.padding-small{
  margin-right:15px;
}

/* --------------- ABOUT --------------- */

.about {
  grid-column: col-start / span 12;
  align-self: stretch;
}

.about-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center; 

}

/* --------------- MEDIA QUERIES --------------- */
/*
@media (min-width: 300px) {
  .footer-c .title{
    font-size: 1.5rem !important;
  }
}
@media (min-width: 430px) {
  .footer-c .title{
    font-size: 2rem !important;
  }

  .about-content .title{
    font-size: 1.25rem !important;    
  }

  .hero-content .title{
    font-size: 2.25rem !important;
    margin-bottom: 2rem !important;
  }
}*/


@media (max-width: 500px) {
  .footer-c .title{
    font-size: 1.5rem !important;
  }

  .hero-content .title{
    font-size: 1.25rem !important;

  }
} 

@media (max-width: 340px) {
  .footer-c .title{
    font-size: 1.25rem !important;
  }

  .hero-content .title{
    font-size: 1rem !important;
  }
} 

/* ----- SMALL PHONE ----- */

@media (min-width: 300px) {
  
  .wrapper{
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-template-rows: 60px auto auto auto;
  }

  .about-content{
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .hero-content{
    padding-top: 60px;
    padding-bottom: 60px;  
  }

  .footer-content > * {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .body .wrapper {
    height: auto;
  }  

  html{
    font-size: 18px;
  }


}

@media (min-width: 640px) {
 
  .wrapper{
    grid-template-columns: repeat(12, [col-start] 1fr);
  }


  .margin{
    margin-left: calc(100vw / 12);
    margin-right: calc(100vw / 12); 
  } 
  .content, .main-footer {
    grid-column: col-start 4 / span 9;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }

  .margin{
    margin-left: calc(100vw / 12);
    margin-right: calc(100vw / 12);
  }  

}

/* ----- BIG PHONE ----- */


/* ----- SMALL TABLETs ----- */

@media (min-width: 768px) {
 
  .wrapper{
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-template-rows: 60px auto 240px 240px;
  }
}

@media (min-width: 1024px) {
  .wrapper{
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-template-rows: 60px auto 220px 220px;
  }
}

/* ----- LARGE TABLETS ----- */

@media (min-width: 1440px) {
  .margin{
    margin-left: calc(100vw / 6);
    margin-right: calc(100vw / 6); 
  }

  html{
    font-size: 18px;
  }
}

/* ----- DESKTOP ----- */

@media (min-width: 1920px) {
  .margin{
    margin-left: calc(100vw / 4);
    margin-right: calc(100vw / 4); 
  }
  html{
    font-size: 18px;
  }
}

@media (min-width: 1921px) {
  .wrapper{
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-template-rows: 60px auto 240px 240px;
  }
  html{
    font-size: 20px;
  }
}

/* ----- ULTRA WIDE ----- */

@media (min-width: 3000px) {
  .wrapper{
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-template-rows: 60px 4fr 1fr 1fr;
  }
  html{
    font-size: 22px;
  }
  .margin{
    margin-left: calc(100vw / 3);
    margin-right: calc(100vw / 3); 
  }
}