*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {
    --mouseX: 1;
    --mouseY: 1;
}


/* navigaation bar */

nav{
    z-index: 8;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: rgba(0, 0, 0, 0.7);
    font-family: 'IBM Plex Mono', monospace;
}

.logo h1{
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 24px;
    margin-left: 5px;
    text-align: left;
}
.logo p{
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    text-align: left;
 }

.nav-links{
    display: flex;
    justify-content: space-around;
    transform: translatex(-10%);
    width: 60%;
}
.nav-links li{
    list-style: none;
}
.nav-links a{
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 11px;    
}

.burger{
    display: none;
    cursor: pointer;
}

.burger div{
    width: 25px;
    height: 3px;
    background-color:rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

/* Footer */

.site-footer
{
  background-color:#000000ad;
  
  font-size:15px;
  line-height:24px;
  color:#737373;
  position: relative;
  margin-top: 60px;
  bottom: 0;
  width: 100%;
  height: 160px;

}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:1
}
.site-footer hr.small
{
  margin:20px 0
}

.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none;
  justify-items: center;
  text-decoration: none;
}
.footer-links li
{
  display:block;
  text-decoration:none;
}
.footer-links a
{
  color:#737373;
  text-decoration: none;
  
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display: center;
}
.site-footer .social-icons
{
  text-align: center
}
.site-footer .social-icons a
{
  width:60px;
  height:60px;
  line-height:60px;
  margin-left:20px;
  margin-right:20px;
  margin-top: 10px;
  border-radius:100%;
}
.copyright-text 
{
  text-align: center;
  padding: 5px;
}

.f-contact{
    
    color: rgb(145, 145, 145);
    text-align: center;
    text-decoration: none;
    padding: 5px;  
    font-family: 'IBM Plex Mono', monospace;
    font-weight: thin;
    letter-spacing: 2px;
    font-size: 10px;
}

.f-contact h1{
    text-decoration: uppercase;
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons .footer-links
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:20px
}
.social-icons a{
  background-color:#eceeef;
  font-size:24px;
  display:inline-block;
  line-height:50px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.instagram:hover
{
  background-color:#a30d32
}
.social-icons a.youtube:hover
{
  background-color:#ed0000
}
.social-icons a.twitter:hover
{
  background-color:#0092b6
}
.social-icons a.linkedin:hover
{
  background-color:#1960fa
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}

/* responsive sections */

@media screen and (max-width: 1024px){
    .nav-links{
        display: flex;
        justify-content: space-around;
        width: 60%;
        transform: translatex(0%);
    }
}

@media screen and (max-width: 768px){
    body{
       overflow-x: hidden; 
    }
    .nav-links{
        z-index: 10;
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: rgba(56, 56, 56, 0.486);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li{
        opacity: 0; 
    }
    .burger{
        display: block;
    }
}
    
.nav-active{
    transform: translateX(0%);
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}

/* HOME MAIN BODY */

.body-1{
  background-color: rgb(0, 0, 0);
  background-image: url(images/Backgrounds/Kuiper-10.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.box{ 
  margin: auto;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: (2, 1fr);
  grid-gap: 20px;
  padding: 10px;
  width: 90vw;
  height: 100vh;
  min-height: 750px;
  max-width: 1500px;
  background-color: rgba(0, 0, 0, 0.548);

} 
.box-1 {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.548); 
  grid-row: 1/2;
  grid-column: 2/2;
  position: relative;
  text-align: center;
}
.box-1 img{
   width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgb(190, 190, 190);
}
.al h1{
  position: absolute;
  color: rgb(226, 226, 226);
  letter-spacing: 2px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: aqua;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(73, 73, 73, 0.4);
  padding: 10px 15px;
}

.box-2{
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.548);   
  grid-row: 1/2;
  grid-column: 1/2;
  position: relative;
  text-align: center;
}
.box-2 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgb(190, 190, 190);
}

.stl h1{
  position: absolute;
  color: rgb(226, 226, 226);
  letter-spacing: 2px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: aqua;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(73, 73, 73, 0.3);
  padding: 10px 15px;
}

.box-3{
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.548);
  grid-row: 2/3;
  grid-column: 2/2;
  position: relative;
  text-align: center;
}

.box-3 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-fit: scale-down 90%;
  border: 1px solid rgb(190, 190, 190);
}

.ll h1{
  position: absolute;
  color: rgb(226, 226, 226);
  letter-spacing: 2px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: aqua;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(73, 73, 73, 0.4);
  padding: 10px 15px;
}

.box-4 {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.548);
  grid-row: 2/3;
  grid-column: 1/2;
  position: relative;
  text-align: center;
 }

.box-4 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgb(190, 190, 190);
 }

.sl h1{
  position: absolute;
  color: rgb(226, 226, 226);
  letter-spacing: 2px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: aqua;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(73, 73, 73, 0.4);
  padding: 10px 15px;
}
.box-5 {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.548);
  grid-row: 3/4;
  grid-column: 2/2;
  position: relative;
  text-align: center;
}
  
.box-5 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgb(190, 190, 190);
}
  
.tl h1{
  position: absolute;
  color: rgb(226, 226, 226);
  letter-spacing: 2px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: aqua;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(73, 73, 73, 0.4);
  padding: 10px 15px;
}
.box-6 {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.548);
  grid-row: 3/4;
  grid-column: 1/2;
  position: relative;
  text-align: center;
}
      
.box-6 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgb(190, 190, 190);
}
      
.cl h1{
  position: absolute;
  color: rgb(226, 226, 226);
  letter-spacing: 2px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: aqua;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(73, 73, 73, 0.4);
  padding: 10px 15px;
}


.About-Title{
  position: absolute;
  font-family: 'Saira Semi Condensed', sans-serif;
  text-align: center;
  line-height: 100vh;
  color: rgb(226, 226, 226);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 24px;
  z-index: 0;   
}

/* ABOUT PAGE STYLING */

.about-body{
    background-image: url(images/Backgrounds/TSB-4.jpg);
    background-color: black;
    background-position: center;
    background-repeat: no-repeat;
}
 
.about-container{ 
  flex-wrap: wrap;
  margin: auto;
  display: grid;
  grid-template-columns: (1, 1fr);
  grid-template-rows: (1, 1fr);
  padding: 50px;
  width: max-content;
  width: 90vw;
  height: 100%;
  max-width: 750px;
  min-width: 400px;
 
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.425), black, rgba(0, 0, 0, 0.267));
  position: relative;
  margin-top: 50px;
  background-position: center;
  background-repeat: no-repeat;
  
  

} 
.about-info {
  text-align: left;
  text-justify: left;
  overflow: hidden;
  text-decoration: none;
  
  
}

.about-text{
  overflow: hidden;
  color: rgb(221, 221, 221);
  letter-spacing: 1px;
  font-size: 14px;
  text-decoration: none;
  /*font-family: 'Barlow', sans-serif;*/
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  padding: 15px 15px;
  
   

}
.about-text p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  line-height: 25px;
  letter-spacing: 0px;
  margin-top: 20px;
}

.a-contact p{
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 2px;
  font-size: 14px;
  margin-top: 20px;
  text-decoration: none;
  text-align: center;
}

/* CONTACT PAGE STYLING */

.contact-body{
    
    background-image: url(images/Backgrounds/kuiper-2.jpg);
    background-color: rgba(0, 0, 0, 1);
    background-position: center;
    background-repeat: no-repeat;
}
 
.contact-container{ 
    margin: auto;
    margin-top: 50px;
    display: grid;
    grid-template-columns: (1, 1fr);
    grid-template-rows: (50px 1fr);
    grid-gap: 30px;
    padding: 10px;
    width: 90vw;
    height: 90%;
    min-height: 500px;
    max-width: 700px;
    position: relative;

} 
.contact-info {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.0); 
    grid-column: 1/2;
    grid-row: 2/3;
    position: relative;
    
}

.contact-text h3{
    position: absolute;
    color: rgb(221, 221, 221);
    letter-spacing: 1px;
    font-size: 13px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 100;
    padding: 0px 15px;
    
    line-height: 16px;
    
    
}

.fname, .email, .subject, .message{
    color: rgb(226, 226, 226);
    letter-spacing: 2px;
    font-size: 14px;
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    padding: 10px 15px;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  .contact-container {
    border-radius: 5px;
    background-color: #000000d2;
    padding: 20px;
  }

  /* Showcase STYLING */

.showcase-body{
background-image: url(images/Backgrounds/misc-2.jpg);
background-color: rgba(65, 64, 64, 0.7);
background-position: center;
background-repeat: no-repeat;
}

.s-container{ 
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0), rgb(0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0.0));
margin: auto;
justify-content: center;
display: grid;
grid-template-columns: (1fr);
grid-template-rows: repeat(8em 1fr);
grid-auto-rows: 2em 50vh;
grid-template-columns: minmax(300px, 750px);
padding: 25px;
width: 90vw;
height: 90%;
grid-gap: 30px;



}

.s-text-1{
color: rgb(226, 226, 226);
letter-spacing: 1px;
font-size: 12px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 100;
text-align: center;
grid-row: 1/2;
text-justify: center;
}
.s-text-1 h1{
  font-size: 14px;
}

.s-box-1 {
grid-row: 2/3;
position: relative;
}

.s-box-1 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;

}

.s-text-2{
  color: rgb(226, 226, 226);
  letter-spacing: 1px;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 100;
  text-align: center;
  grid-row: 3/4;
  text-justify: center;
}
.s-text-2 h1{
    font-size: 14px;
}

.s-box-2 {
  position: relative;
  grid-row: 4/5;
  
}
  
.s-box-2 iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

    
/* TUTORING STYLING */

.t-body{
  background-color: rgb(0, 0, 0);
  background-image: url(images/Backgrounds/Kuiper-7.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.t-container{ 
flex-wrap: wrap;
margin: auto;
display: grid;
grid-template-columns: (1, 1fr);
grid-template-rows: (1, 1fr);
padding: 50px;
width: max-content;
width: 90vw;
height: 100%;
max-width: 750px;
min-width: 400px;
background-color: rgba(0, 0, 0, 0.75);
position: relative;
margin-top: 50px;
background-position: center;
background-repeat: no-repeat;



} 
.t-info {
text-align: center;
text-justify: center;
overflow: hidden;
text-decoration: none;


}

.t-text{
overflow: hidden;
color: rgb(215,215,215);
letter-spacing: 1px;
font-size: 14px;
text-decoration: none;
/*font-family: 'Barlow', sans-serif;*/
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
padding: 15px 15px;

 

}
.t-text p {
font-family: 'Poppins', sans-serif;
  margin-top: 20px;
  font-weight: 300;
  line-height: 25px;
  letter-spacing: 0px;
  
}

.t-contact p{
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 2px;
font-size: 14px;
margin-top: 20px;
text-decoration: none;
text-align: center;
}

/* studio STYLING */

.st-body{
  background-image: url(images/Backgrounds/TSB-4.jpg);
  background-color: rgb(0, 0, 0);
  background-position: center;
  background-repeat: no-repeat;
}

.st-container{ 
flex-wrap: wrap;
margin: auto;
display: grid;
grid-template-columns: (1, 1fr);
grid-template-rows: (1, 1fr);
padding: 50px;
width: max-content;
width: 90vw;
height: 100%;
max-width: 750px;
min-width: 400px;
background-color: rgba(0, 0, 0, 0.7);
position: relative;
margin-top: 50px;
background-position: center;
background-repeat: no-repeat;



} 
.st-info {
text-align: center;
text-justify: center;
overflow: hidden;
text-decoration: none;


}

.st-text{
overflow: hidden;
color: rgb(215,215,215);
letter-spacing: 1px;
font-size: 14px;
text-decoration: none;
/*font-family: 'Barlow', sans-serif;*/
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
padding: 15px 15px;

}
.st-text p {
font-family: 'Poppins', sans-serif;
  margin-top: 20px;
}

.st-contact p{
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 2px;
font-size: 14px;
margin-top: 20px;
text-decoration: none;
text-align: center;
}

/* GALLERY STYLING */

/* div.g-message, div.g-container, label.g-1, label.g-2,label.g-3, label.g-4, label.g-5, label.g-6, label.g-7, label.g-8, label.g-9 {

  
  box-sizing: border-box;
  margin: 0;
  padding: 500px;
}*/

.g-body {
  
  font-family: "Open Sans", sans-serif;
  color: white;
  background-image: linear-gradient(to right, black, grey, black);

}
.g-main{
  min-height: 90vh;
}

.g-container {

  margin: auto;
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: (3, 1fr);
  grid-template-rows: (9, 1fr);
  grid-gap: 20px;
  grid-auto-columns: minmax(30%, auto);
  grid-auto-rows: 5em 300px 300px 300px 5em 300px 300px 5em 300px 300px 300px 5em 300px 300px 300px 300px 5em 300px 300px 300px;
  width: 90vw;
  background-image: linear-gradient(to right, rgb(88, 88, 88), black, rgb(97, 96, 96));
  position: relative;
  margin-top: 50px;
  box-shadow: auto;


}
.ph-container-1{
  position: relative;
  grid-column: 1/4;
  column-span: all;
  grid-row: 1/2;
  
}

.project-heading-1{
  position: absolute;
  top: 20px;
  color: rgb(216, 216, 216);
  letter-spacing: 1px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 100;
  text-transform: uppercase;
  border: none !important;
  text-align: center !important; 
  width: 100% !important;
}

.project-heading-1 h4{
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
}

.ph-container-2{
  position: relative;
  grid-column: 2/3;
  grid-row: 5/6;
}

.project-heading-2{
  position: absolute;
  color: rgb(216, 216, 216);
  letter-spacing: 1px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-transform: uppercase;
  border: none !important;
  text-align: center !important;
  text-justify: fill !important;
  width: 100% !important;
}

.project-heading-2 h4{
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
}
.ph-container-3{
  position: relative;
  grid-column: 2/3;
  grid-row: 8/9;
}

.project-heading-3{
  position: absolute;
  color: rgb(216, 216, 216);
  letter-spacing: 1px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-transform: uppercase;
  border: none !important;
  text-align: center !important;
  text-justify: fill !important;
  width: 100% !important;
}

.project-heading-3 h4{
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
}

.ph-container-4{
  position: relative;
  grid-column: 2/3;
  grid-row: 12/13;
}

.project-heading-4{
  position: absolute;
  color: rgb(216, 216, 216);
  letter-spacing: 1px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-transform: uppercase;
  border: none !important;
  text-align: center !important;
  text-justify: fill !important;
  width: 100% !important;
}

.project-heading-4 h4{
  font-size: 20px;
  line-height: 20px;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
}

.g-container [class*=g] {
  
  border: 1px solid transparent;
  background: url() center center/cover no-repeat;
  transition: all 0.5s ease-in-out;
  z-index: 0;
}
.g-container [class*=g]:hover {
  border: 1px solid white;
  z-index: 1;
  cursor: pointer;
}

/*.ll{
  position: absolute;
  color: rgb(226, 226, 226);
  letter-spacing: 2px;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: aqua;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(73, 73, 73, 0.4);
  padding: 10px 15px;
}

.box-4 {
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.548);
  grid-row: 2/3;
  grid-column: 1/2;
  position: relative;
  text-align: center;
 }

.box-4 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgb(190, 190, 190);
}*/
/*.g-1{
  grid-row: 1/2;
  grid-column: 1/2;
}
.g-2 {
  grid-row: 1/2;
  grid-column: 2/3;
}
.g-3{
  grid-row: 1/2;
  grid-column: 3/4;
}
.g-4 {
  grid-row: 2/3;
  grid-column: 1/2;
}
.g-5 {
  grid-row: 2/3;
  grid-column: 2/3;
}
.g-6 {
  grid-row: 2/3;
  grid-column: 3/4;
}
.g-7 {
  grid-row: 3/4;
  grid-column: 1/2;
}
.g-8 {
  grid-row: 3/4;
  grid-column: 2/3;
}
.g-9 {
  grid-row: 3/4;
  grid-column: 3/4;
} */
.g-container [class*=g]:nth-of-type(1) {
  grid-row: 2/3;
  grid-column: 1/2;

}
.g-container [class*=g]:nth-of-type(2) {
  grid-row: 2/3;
  grid-column: 2/3;
}
.g-container [class*=g]:nth-of-type(3) {
  grid-row: 2/3;
  grid-column: 3/4;
}
.g-container [class*=g]:nth-of-type(4) {
  grid-row: 3/4;
  grid-column: 1/2;
}
.g-container [class*=g]:nth-of-type(5) {
  grid-row: 3/4;
  grid-column: 2/3;
}
.g-container [class*=g]:nth-of-type(6) {
  grid-row: 3/4;
  grid-column: 3/4;
}
.g-container [class*=g]:nth-of-type(7) {
  grid-row: 4/5;
  grid-column: 1/2;
}
.g-container [class*=g]:nth-of-type(8) {
  grid-row: 4/5;
  grid-column: 2/3;
}
.g-container [class*=g]:nth-of-type(9) {
  grid-row: 4/5;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(10) {
  grid-row: 6/7;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(11) {
  grid-row: 6/7;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(12) {
  grid-row: 6/7;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(13) {
  grid-row: 7/8;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(14) {
  grid-row: 7/8;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(15) {
  grid-row: 7/8;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(16) {
  grid-row: 9/10;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(17) {
  grid-row: 9/10;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(18) {
  grid-row: 9/10;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(19) {
  grid-row: 10/11;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(20) {
  grid-row: 10/11;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(21) {
  grid-row: 10/11;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(22) {
  grid-row: 11/12;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(23) {
  grid-row: 11/12;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(24) {
  grid-row: 11/12;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(25) {
  grid-row: 13/14;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(26) {
  grid-row: 13/14;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(27) {
  grid-row: 13/14;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(28) {
  grid-row: 14/16;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(29) {
  grid-row: 14/16;
  grid-column: 3/4;
} 
.g-container [class*=g]:nth-of-type(30) {
  grid-row: 16/17;
  grid-column: 1/2;
} 
.g-container [class*=g]:nth-of-type(31) {
  grid-row: 14/16;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(32) {
  grid-row: 16/17;
  grid-column: 2/3;
} 
.g-container [class*=g]:nth-of-type(33) {
  grid-row: 16/17;
  grid-column: 3/4;
} 
/*.g-container [class*=g]:nth-of-type(1) {
  top: 0;
  left: 0;
}
.g-container [class*=g]:nth-of-type(2) {
  top: 0;
  left: 33%;
}
.g-container [class*=g]:nth-of-type(3) {
  top: 0;
  left: 66%;
}
.g-container [class*=g]:nth-of-type(4) {
  top: 33%;
  left: 0;
}
.g-container [class*=g]:nth-of-type(5) {
  top: 33%;
  left: 33%;
}
.g-container [class*=g]:nth-of-type(6) {
  top: 33%;
  left: 66%;
}
.g-container [class*=g]:nth-of-type(7) {
  top: 66%;
  left: 0;
}
.g-container [class*=g]:nth-of-type(8) {
  top: 66%;
  left: 33%;
}
.g-container [class*=g]:nth-of-type(9) {
  top: 66%;
  left: 66%;
} */
.g-container input {
  display: none;
}
.g-container input:checked + [class*=g] {
  top: 0;
  left: 0;
  /*margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
  margin-right: 50px;*/
  width: 100%;
  height: 100%;
  position: fixed;
  background: url() center center/contain no-repeat;
  background-color: black;
  z-index: 3;
  transition: all 0.5s ease-in-out;
} 

@media screen and (max-width: 768px){
 
  .g-container{
    flex-direction: column;
    grid-column: span 3;
    flex: 1;
    display: grid;
    grid-template-columns: (2, 1fr);
    grid-template-rows: (9, 1fr);
    grid-gap: 20px;
    grid-auto-columns: minmax(30%, auto);
    grid-auto-rows: 5em 150px 150px 150px 5em 150px 150px 5em 150px 150px 150px 5em 150px 150px 150px 150px 5em 150px 150px 150px;
    width: 90vw;
    background-image: linear-gradient(to right, rgb(88, 88, 88), black, rgb(97, 96, 96));
    position: relative;
    margin-top: 50px;
    box-shadow: auto;
  }
}