/*
All the fundemental styles of building blocks for structure with VTALEN.
This is a Intall-Full-File-To-Each-Site System.
*/

/*Building block system*/
.box{ /*basic building block for every large fullwidth container element*/
  width:100%;
  display:block;
  position:relative;
}
.box-inner{ /*placed directly within .box element when you want a max-width container*/
  max-width:1200px;
  margin:0 auto;
  padding:100px 20px; /*proper white-space*/
}

.maxw{
  max-width:1200px;
  margin: 0 auto;
}

.bg-w{background:#fff;}

/*Grid system - every class requires .grid as well. Grid-gap is added in your site-specific styles*/
.grid{
  display:grid;
}

.grid-center{
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.grid-center-v{
  align-items: center;
  align-content: center;
}
.grid-center-h{
  justify-items: center;
  justify-content: center;
}
.grid-justify-r{
  justify-content: right;
  justify-items: right;
}
.gap-10{grid-gap:10px;}
.gap-20{grid-gap:20px;}
.gap-30{grid-gap:30px;}
.gap-40{grid-gap:40px;}


.grid-col-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "one two";
}
.grid-col-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-col-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-lg-sm {
  grid-template-columns: 1fr max-content;
}
.grid-sm-lg {
  grid-template-columns: max-content 1fr;
}
.grid-sm-sm {
  grid-template-columns: max-content max-content;
}
.grid-lg-sm-sm {
  grid-template-columns: 1fr max-content max-content;
}
.grid-col-1-2{
  grid-template-columns: 1fr 2fr;
}
.grid-col-2-1{
  grid-template-columns: 2fr 1fr;
}

.grid-lg-300{
  grid-template-columns: 1fr 300px;

}

.grid-row-lg-sm {
  grid-template-rows: 1fr max-content;
}

.grid-row-sm-lg-sm {
  grid-template-rows: max-content 1fr max-content;
  grid-gap:10px;
}

.grid-area-1{
  grid-area: one;
}
.grid-area-2{
  grid-area: two;
}


/*Basic Background Styles*/
.bg-center{
  background-position:center center;
  background-repeat:no-repeat;
}
.bg-top{
  background-position:top center;
  background-repeat:no-repeat;
}
.bg-bottom{
  background-position:bottom center;
  background-repeat:no-repeat;
}
.bg-left{
  background-position:center left;
  background-repeat:no-repeat;
}
.bg-right{
  background-position:center right;
  background-repeat:no-repeat;
}
.underlay{}/*specific to each situation: leave empty*/
.overlay{}/*specific to each situation: leave empty*/

.bg-blur-box{position:relative;}
.bg-blur-overlay{}
.bg-blur-underlay{
  position:absolute;
  top:0px;
  bottom:0px;
  left:0;
  right:0;
  width:100%;
  z-index:-700;
}
.bg-blur-5{
  filter:blur(5px);
}
.bg-blur-10{
  filter:blur(10px);
}
.bg-blur-20{
  filter:blur(20px);
}


@media (max-width:800px),(max-device-width: 800px)
{
  .grid-col-3 {
    grid-template-columns: 1fr;
  }
  .grid-col-4 {
    grid-template-columns: 1fr 1fr;
  }
  .box-inner, .box-inner-lg{padding:100px 20px;}
  .grid-lg-300{grid-template-columns: 1fr;}
  .grid-sm-lg{grid-template-columns: 1fr;}
}

@media (max-width:600px),(max-device-width: 600px)
{
  .grid-col-2 {
    grid-template-columns: 1fr;
    grid-template-areas: "one" "two";
  }
  .grid-col-3 {
    grid-template-columns: 1fr;
  }
  .grid-col-4 {
    grid-template-columns: 1fr;
  }
  .grid-lg-sm {
    grid-template-columns: 1fr;
  }
  .grid-sm-lg {
    grid-template-columns: 1fr;
  }
  .grid-lg-sm-sm {
    grid-template-columns: 1fr;
  }
  .grid-sm-sm {
    grid-template-columns: 1fr;
  }
  .grid-col-1-2{
    grid-template-columns: 1fr;
  }
  .grid-col-2-1{
    grid-template-columns: 1fr;
  }
}