html{background-color:#EAEAEA;
  font-size:16px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,figure,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
a{text-decoration: none;
 color: white;
font-family: sans-serif;}
.menubar {    position: fixed;
    left: 0vw;
    transition: 0.3s ease;
    top: 1vw;
    width: 5%;
    height: 15%;
    text-decoration: none;
    line-height: 1.6em;
font-size: 1rem;
left: -7vw;

}

.Oswald nav {background-color: #ED392E;
border-radius: 40% 40% 40% 40%;
}

.shirkland nav{background-color: #F2B134;
border-radius: 90% 50% 20% 90%;
transform: rotate(16DEG);line-height: 3em;
}
.Rokkitt nav{background-color: #53B9A7;
border-radius: 0 50% 40% 0;

}
.Rokkitt nav:hover{ height: 5%;
  left: 0;

  width: 8%;
  height: 13%;
  padding:3vw;
  line-height: 2em;
}


nav{padding: 2vw;}
.Oswald nav:hover{
  left: 0;
width: 4%;
  height: 28%;
padding: 4vw;
line-height: 4em;
}

.shirkland nav:hover{
  left: 0;
width: 4%;
  height: 28%;
padding: 4vw;
line-height: 4em;
text-align: center;}

a.os, a.sh, a.ro {transition:0.3s ease-in-out;
  color:white;
}




a.os:hover{color: white;
font-size: 2rem;
font-family: Oswald;
text-align: left;
}
a.sh:hover{color: white;
  font-size: 1.2rem;
font-family: Shrikhand, cursive;
}
a.ro:hover{color: white;
  font-size:2rem;

font-family: Rokkitt;}
main{display:grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 40vw;
overflow: hidden;}
p{font-size:.75rem;}

 .Os{font-size: 6rem;
 font-family: sans-serif;}


.Rokkitt{font-family: 'Rokkitt', serif;}
.Oswald{font-family: 'Oswald', sans-serif;}
.shirkland{font-family: 'Shrikhand', cursive;}


.sidegrid{grid-column: 1/4;
margin-left: 3vw;
grid-row: 2;
display: grid;
grid-template-columns: repeat(4 ,20vw);
grid-template-rows: auto;
margin-top: 22vw;
}
.sidegrid, div{
  font-size: 4rem;
}



  .Oswald h:nth-of-type(1){
    grid-column: 1/4;
font-size: 50rem;
grid-row: 1/2;
font-weight: 600;
align-self: center;
overflow-x: hidden;
}
.Oswald h:nth-of-type(2){
  grid-column: 3/7;
font-size: 60vw;
grid-row: 6/7;
align-self: center;
margin-top: 10vw;}
.Oswald h:nth-of-type(3){
  grid-column: 3/5;
  font-size: 40vw;
  grid-row: 8;
  align-self: flex-start;
  overflow: hidden;
  margin-top: 10vw
}


.Rokkitt h:nth-of-type(1){
grid-column: 4/7;
font-size: 110rem;
grid-row: 1;
width: 100%;
margin-top: -5vw;
font-weight: 600;
letter-spacing: -10vw;}
.Rokkitt h:nth-of-type(2){
  grid-column: 1/5;
font-size: 60vw;
grid-row: 6;
align-self: center;
margin-top: 10vw;}
.Rokkitt h:nth-of-type(3){
  grid-column: 1/4;
font-size: 40vw;
grid-row: 8;
align-self: center;
overflow: hidden;
}

.shirkland h:nth-of-type(1){
  grid-column: 3/6;
font-size: 40rem;
grid-row: 1/2;
font-weight: 600;
letter-spacing: -5vw;
overflow: hidden;
align-self: center;}
.shirkland h:nth-of-type(2){
  grid-column: 3/7;
font-size: 40vw;
grid-row: 6;
align-self: center;
margin-top: 10vw;
overflow: hidden;}
.shirkland h:nth-of-type(3){
  grid-column: 3/5;
font-size: 40vw;
grid-row: 8;
align-self: center;
overflow: hidden;
}

.Rokkitt h span{color: #53B9A7;}
.shirkland h span{color: #F2B134;}

.Oswald h span{color:#ED392E; font-weight: 300;}



.sideway{
  grid-column: 1/7;
  grid-row: 1/9;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(70, 70px);
}
  .sideway p:nth-of-type(1){
    font-weight: 500;
    grid-column: 4/10;
    grid-row: 12;
    transform: rotate(90deg);
    }
  .Rokkitt .sideway p:nth-of-type(2){

grid-column: 8/12;
grid-row: 20;
  }

.Rokkitt .sideway p:nth-of-type(3){

    grid-column: 7/10;
    grid-row: 37;
    transform: rotate(90deg);}
  .Rokkitt  .sideway p:nth-of-type(4){
      font-weight: 500;
      grid-column: 6/9;
      grid-row: 37;
      letter-spacing: .15em;
      align-self: end;
      }

    .Rokkitt  .sideway p:nth-of-type(5){
        font-weight: 500;
      grid-column: 4/7;
      grid-row: 43;
      transform: rotate(90deg);}

    .Rokkitt  .sideway p:nth-of-type(6){
        font-weight: 500;
      grid-column: 5/8;
      grid-row: 56;
    }

    .Rokkitt .sideway p:nth-of-type(7){
      font-weight: 500;
    grid-column: 5/8;
    grid-row: 57;
  font-weight: 500;
  grid-column: 4/6;
  grid-row: 58;
  transform: rotate(90deg);}
  .Rokkitt .sideway p:nth-of-type(9){
    font-weight: 500;
    grid-column: 7/9;
    grid-row: 64;
  }
.Rokkitt  .sideway p:nth-of-type(8){
  font-weight: 500;
  transform: rotate(90deg);
  grid-column: 7/9;

  grid-row: 24;}
    .Rokkitt  .sideway p:nth-of-type(10){

grid-column:3/6;
transform: rotate(90deg);
grid-row: 68;}

.Oswald  .sideway p:nth-of-type(1){
    font-weight: 500;
    grid-column: 4/10;
    grid-row: 12;
    transform: rotate(90deg);
    }
  .Oswald .sideway p:nth-of-type(2){
    grid-column: 7/11;
    grid-row: 11;
    margin-left: 2vw
  }

.Oswald .sideway p:nth-of-type(3){
  grid-column: 8/10;
  grid-row: 14;
  margin-left:0;
  transform: rotate(90deg);}

  .Oswald .sideway p:nth-of-type(4){
      font-weight: 500;
      grid-column: 6/9;
      grid-row: 20;

      }

  .Oswald .sideway p:nth-of-type(5){
    grid-column: 2/5;
grid-row: 27;}

    .Oswald  .sideway p:nth-of-type(6){
      grid-column: 6/9;

grid-row: 36;
    }

    .Oswald .sideway p:nth-of-type(7){
      grid-column: 3/5;
grid-row: 42;
transform: rotate(90deg);}
  .Oswald .sideway p:nth-of-type(9){

    grid-column: 2/4;
    grid-row: 48;
  }
.Oswald  .sideway p:nth-of-type(8){
  font-weight: 500;
  transform: rotate(90deg);
  grid-column: 7/9;

  grid-row: 24;}

.Oswald  .sideway p:nth-of-type(10){
  grid-column: 1/3;

  transform: rotate(90deg);

  grid-row: 58;}

  .Oswald  .sideway p:nth-of-type(11){
    grid-column: 5/8;
    grid-row: 63;}
  .Oswald  .sideway p:nth-of-type(12){
transform: rotate(90DEG);
  grid-column:10/12;
  grid-row: 70;}

.shirkland .sideway p:nth-of-type(1){
  grid-column: 3/6;
grid-row: 8;
transform: rotate(90deg);
      }
  .shirkland .sideway p:nth-of-type(2){
    grid-column: 5/8;
grid-row: 10;

    }

.shirkland .sideway p:nth-of-type(3){
grid-column: 6/8;
grid-row: 12;
margin-left: 0;
transform: rotate(90deg);}

    .shirkland .sideway p:nth-of-type(4){
      grid-column: 10/12;
  grid-row: 67;


        }

    .shirkland .sideway p:nth-of-type(5){
      grid-column: 2/5;
  grid-row: 25;}

      .shirkland  .sideway p:nth-of-type(6){
        grid-column: 6/9;

  grid-row: 36;
      }

      .shirkland .sideway p:nth-of-type(7){
        grid-column: 1/4;
  grid-row: 42;
  transform: rotate(90deg);}
    .shirkland .sideway p:nth-of-type(9){
      grid-column: 2/5;
     grid-row: 47;

    }
  .shirkland .sideway p:nth-of-type(8){
    transform: rotate(90deg);
grid-column: 8/11;
grid-row: 21;}

  .shirkland .sideway p:nth-of-type(10){
    grid-column: 2/5;
  transform: rotate(90deg);
  grid-row: 50;}

    .shirkland  .sideway p:nth-of-type(11){
      grid-column: 4/8;
grid-row: 57;}
    .shirkland  .sideway p:nth-of-type(12){
      transform: rotate(90DEG);
      grid-column: 8/12;
      grid-row: 60;}

    .shirkland .sideway p:nth-of-type(13){
      grid-column: 6/8;
transform: rotate(90deg);
grid-row: 70;}




.Oswald .sideway {
color:#ED392E;
}
.Rokkitt .sideway{
color: #53B9A7;
}
.shirkland .sideway{
color: #F2B134;
}



.Oswald .sidegrid{
grid-column: 4/7;}

.shirkland .sidegrid{
  grid-column: 2/6;
grid-row: 2;
margin-top: 10vw;
  }




.shirkland .type{
grid-row: 4;
grid-column: 2/4;}

.type{margin-right: 3vw;
  grid-row: 4;
  grid-column: 5/7;
}
.type p:nth-of-type(1){
    font-weight: 800;
font-size: 2rem;
}
.Oswald .type{
margin-top: 10vw;
grid-column: 2/4;
}
.Oswald .type p {line-height: 1em;}

.Oswald .type p span:nth-of-type(1){
    font-weight: 700;
}
.Oswald .type p span:nth-of-type(2){
    font-weight: 600;
}
.Oswald .type p span:nth-of-type(3){
    font-weight: 500;
}
.Oswald .type p span:nth-of-type(4){
    font-weight: 400;
}
.Oswald .type p span:nth-of-type(5){
    font-weight: 300;
}
.Oswald .type p span:nth-of-type(6){
    font-weight: 200;
}
.type p span:nth-of-type(1){
  font-weight: 700;
font-size: 1.75rem;

}
.type p span:nth-of-type(2){
  font-weight: 600;
font-size: 1.5rem;
}
.type p span:nth-of-type(3){
  font-weight: 500;
font-size: 1.25rem;
}
.type p span:nth-of-type(4){
  font-weight: 400;
font-size: 1rem;
}
.type p span:nth-of-type(5){
  font-weight: 300;
font-size: .75rem;
}

.type p span:nth-of-type(6){
  font-weight: 200;
font-size: .5rem;
}
.type p span:nth-of-type(7){
  font-weight: 100;
font-size: .25rem;

}
.type p br{
  margin-bottom: 1.5vw;}

  .Oswald .weights {
grid-column: 2/4;

grid-row: 7;

margin-top: 10vw;}
  .weights p{font-size:5rem;}
  .shirkland .weights{
margin-top: 10vw;
  grid-row: 7;
grid-column: 2/6;}
.Rokkitt .weights {
  grid-row: 7;
  grid-column: 4/7;
}

.weights p:nth-of-type(9){
  font-weight:900;}
.weights p:nth-of-type(8){
    font-weight:800;}
.weights p:nth-of-type(7){
      font-weight:700;}
.weights p:nth-of-type(6){
        font-weight:600;}
.weights p:nth-of-type(5){
          font-weight:500;}
.weights p:nth-of-type(4){
          font-weight:400;}
.weights p:nth-of-type(3){
          font-weight:400;}
.weights p:nth-of-type(2){
          font-weight:300;}
          .shirkland .weights p:nth-of-type(1){
                    font-size:8rem;}
          .shirkland .weights p:nth-of-type(2){
                    font-size:3rem;}
                    .shirkland .weights p:nth-of-type(3){
                              font-size:1rem;}
.weights p:nth-of-type(1){
        font-weight:200;}

      .Oswald .bottom{
          grid-row: 9/11;
          grid-column: 1/7;
          justify-content: center;
        }
        .Rokkitt .bottom{
          grid-row: 9/11;
          grid-column: 1/7;
          justify-content: center;
      }
      .shirkland .bottom{
        grid-row: 9/11;
grid-column: 1/7;
justify-content: center;
    }
        .Rokkitt .bottom h2 span:nth-child(1){
          color: #53B9A7;
        }
        .bottom h2 span:nth-child(1){
          font-size: 40rem;
          font-weight: 200;
        }
        .shirkland .bottom h2 span:nth-child(1){
          font-size: 30rem;

font-weight: 200;
 color: #F2B134;

letter-spacing: -.2em;

        }
        .bottom h2 span:nth-child(2){

          font-size: 10rem;
          font-weight: 800;
        }
        .shirkland .bottom h2 span:nth-child(2){

          font-size: 10rem;
          font-weight: 800;
        }
        .bottom h2 span:nth-child(2){

          font-size: 10rem;
          font-weight: 600;
          font-style: italic;
        }
        .bottom h2 span:nth-child(3){
            font-size: 30rem;
            font-weight: 700;
        }
      .shirkland    .bottom h2 span:nth-child(3){
        font-size: 3rem;
      color: #F2B134;
font-weight: 700;

z-index: 999;
 }
 .shirkland    .bottom h2 span:nth-child(2){
   font-size: 15rem;

font-weight: 400;

z-index:-1;;
}
        .bottom h2 span:nth-child(4){

              font-size: 18rem;
              font-weight: 200;
              font-style: italic;
          }
      .Rokkitt    .bottom h2 span:nth-child(4){
  color: #53B9A7;
                font-size: 18rem;
                font-weight: 200;
                font-style: italic;
            }
          .shirkland  .bottom h2 span:nth-child(4){
          font-size: 6rem;
font-weight: 200;
font-style: italic;}
        .bottom h2 span:nth-child(5){
                font-size: 50rem;
                font-weight: 500;}
                .bottom h2{text-align: center;}
                .shirkland  .bottom h2 span:nth-child(5){
                font-size: 15rem;
                font-weight: 500;
                z-index: -999;}
                .shirkland  .bottom h2 span:nth-child(6){
                font-size:20rem;

              font-style: italic;}
              .shirkland  .bottom h2 span:nth-child(7){
              font-size:10rem;
color: #F2B134;
          }
        .Oswald  .bottom h2 {
          letter-spacing: 1rem;
        }
              .Oswald  .bottom h2 span:nth-child(1){
                  font-size: 40rem;
                  font-weight: 800;
                  font-style: italic;
                }
              .Oswald  .bottom h2 span:nth-child(2){
        letter-spacing: .01em;
                  font-size: 10rem;
                  font-weight: 500;
                }
              .Oswald  .bottom h2 span:nth-child(2){
          letter-spacing: .1vw;
                  font-size: 20rem;
                  color: #ED392E;
                  font-weight: 200;
                  font-style: italic;

                }
              .Oswald  .bottom h2 span:nth-child(3){
                    font-size: 50rem;
                    font-weight: 600;letter-spacing: 1rem;
                }
              .Oswald  .bottom h2 span:nth-child(4){

                      font-size: 18rem;
                      font-weight: 200;

                  }
                .Oswald .bottom h2 span:nth-child(5){
                        font-size: 20rem;
                        font-weight: 800;font-style: italic;}
                        .bottom h2{text-align: center;}

                    .Oswald .bottom h2 span:nth-child(6){
                                font-size: 10rem;
                                font-weight: 800;font-style: italic;}
                                .bottom h2{text-align: center;}