@font-face {
    font-family: 'Blender Pro';
        


    src: url('/fonts/BlenderPro/BlenderPro-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'PT Root UI';
    src: url('/fonts/PT Root UI VF/PT-Root-UI_Light.ttf');
    
}




*{  
    margin: 0;
    padding: 0;
    font-family: 'PT Root UI';
    font-style: normal;
    text-decoration: none;
    color: black;

}

html {
    font-size: 14px;
    background: #f7f7f7;
  }


  body{
    min-height: 100vh;
  }










@media only screen and (min-width: 0px) {




.grid-container {  
  display: grid; 
  grid-template-columns:  1fr 1fr 1fr 1fr;
  
  justify-content: center; 
  
  width: 100%;

  grid-template-rows: auto auto auto auto auto 1fr;

}




.grid-page-content{

  
  grid-column: 1/5;
  grid-row: 4/4;
  background: #f7f7f7;

  
  display: grid;
  
}



.wrapper-content{  
  max-width: 100% !important;
  width: 100%;
  margin: 0 auto;
  font-size: 1rem;
  transition: 500ms;

}


.page404{
  grid-column: 1/5;
  grid-row: 3/3;
  display: grid;
  justify-content: center;
  background: black;
  color: white;
  font-size: 4rem;
  text-decoration: none;
 
  height: 50vh;
}






.about{
  grid-column: 1/5;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: min-content;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}

.abt{
  margin-top: 1.5rem;
}













} 











@media only screen and (min-width: 1250px) { 



.wrapper-content{  
  max-width: 1200px !important;
  width: 100%;
  margin: 0 auto;
  font-size: 1rem;
}




.grid-page-content{

  grid-column: 1/5; 
  grid-row: 4/4;
  background: #f7f7f7;

  display: grid;
  grid-template-columns: 15% 70% 15%;
  grid-template-rows: 25% 30% 25% 20%;
  justify-self: center;


}







.grid-container {  
  display: grid; 
  grid-template-columns:  1fr 272px 928px  1fr;
  
  justify-content: center; 
  
  width: 100%;
  
  grid-template-areas: 
  "grid-top-menu    grid-top-menu     grid-top-menu     grid-top-menu"
  "header-grid    header-grid     header-grid     header-grid"
 
  "grid-bread-crumbs  grid-bread-crumbs grid-bread-crumbs grid-bread-crumbs"
  "grid-page-content  grid-page-content   grid-page-content grid-page-content"
  "footer       footer        footer        footer";

   grid-template-rows: 35px auto auto auto auto 1fr;
 
}











.page404{
  grid-column: 1/5;
  grid-row: 5/5;
  display: grid;
  justify-content: center;
  background: white;
  color: black;
  font-size: 4rem;
  text-decoration: none;
  

  height: 50vh;
}















.page-content-flex-container{
  display: flex;
  flex-direction: row;

}

.page-content {

  background-color: white;
  width: 928px; 
  margin-left: 10px;
  
  
  
}



.about{
  grid-column: 1/5;
  display: grid;
  grid-template-columns: 1100px;
  grid-template-rows: min-content;
}

.abt{
  margin-top: 1.5rem;
}









}