.flex{
  display:flex;
}

.flex .flex-start{
  align-self: flex-start;  
}


.grid-1x2{
  display: grid;
  /*grid-template-rows: 100%;  */
  grid-template-columns: 65% auto;
  grid-template-areas: "left-item right-top" "left-item right-bottom";
  /*grid-auto-rows: max-content;*/
  grid-auto-rows: auto 1fr auto;
}

.grid-1x2 .maincontent{
  max-width: 100% !important;
  grid-area: left-item;
  
 /* background-color: blue;*/
}

.grid-1x2 .sidebar{
  width: calc(100% - 25px);
}

.grid-maincontent {

}

.grid-sidebar-announcement {
  grid-area: right-top;
  
  /*background-color: red;*/
}

.grid-sidebar {
  grid-area: right-bottom;
  
  /*background-color: green;*/
}


.p-0{
  padding: 0 !important;
}

.pt-0{
  padding-top:0 !important;
}
.pt-30{
  padding-top:30px !important;
}
.pt-40{
  padding-top:40px !important;
}


.pb-0{
  padding-bottom:0 !important;
}
.pb-20{
  padding-bottom:20px !important;
}
.pb-30{
  padding-bottom:30px !important;
}
.pb-40{
  padding-bottom:40px !important;
}


.pl-0{
  padding-left:0 !important;
}

.pr-0{
  padding-right:0 !important;
}

.mt-0{
  margin-top:0 !important;
}
.mt-10{
  margin-top:10px !important;
}
.mt-20{
  margin-top:20px !important;
}
.mt-30{
  margin-top:30px !important;
}
.mt-40{
  margin-top:50px !important;
}
.mt-50{
  margin-top:50px !important;
}
.mt-60{
  margin-top:60px !important;
}
.mt-70{
  margin-top:70px !important;
}
.mt-80{
  margin-top:80px !important;
}
.mt-90{
  margin-top:90px !important;
}

.mt-100{
  margin-top:100px !important;
}

.mb-0{
  margin-bottom:0 !important;
}
.mb-10{
  margin-bottom:10px !important;
}
.mb-15{
  margin-bottom:15px !important;
}
.mb-20{
  margin-bottom:20px !important;
}
.mb-30{
  margin-bottom:30px !important;
}
.mb-40{
  margin-bottom:50px !important;
}
.mb-50{
  margin-bottom:50px !important;
}
.mb-60{
  margin-bottom:60px !important;
}
.mb-70{
  margin-bottom:70px !important;
}
.mb-80{
  margin-bottom:80px !important;
}
.mb-90{
  margin-bottom:90px !important;
}
.mb-100{
  margin-bottom:100px !important;
}

.grid a,
.grid li{
  transition: 250ms ease-in-out;
}

.grid li:active{
  translate: 2px 2px;
}

.background-color-black:not(.grid),
.grid.background-color-black ul li
{
  background-color:#000 !important;
}

.text-color-white,
.grid.text-color-white ul li,
.grid.text-color-white ul li a
{
  color:#fff !important;

}

.text-hover-yellow:hover,
.grid.text-hover-yellow a:hover
{
  color:#ffff00 !important;
}


.text-decoration-none,
.grid.text-decoration-none ul li a
{
  text-decoration: none !important;
}

.font-jost,
.grid.font-jost li,
.grid.font-jost a{
  font-family: var(--jost) !important;
}

body:not(.user1) .grid
{
 /* display: none;*/
}

.grid .grid-container,
.grid ul
{
  display: grid;
  list-style: none;
  padding-left: 0 !important;
}

.grid ul > li
{
  margin-bottom: 0 !important;
}

.grid-2 .grid-container,
.grid-2 ul{
  grid-template-columns: auto auto;
}

.grid-3 .grid-container,
.grid-3 ul{
  grid-template-columns: auto auto auto;
}

.grid-4 .grid-container,
.grid-4 ul{
  grid-template-columns: auto auto auto auto;
}

.grid.gap-5 .grid-container,
.grid.gap-5 ul{
  gap:5px;
}

.grid.gap-10 .grid-container,
.grid.gap-10 ul{
  gap:10px;
}

.grid.gap-15 .grid-container,
.grid.gap-15 ul{
  gap:15px;
}

.grid.gap-20 .grid-container,
.grid.gap-20 ul{
  gap:20px;
}


.grid.grid-inset{
  margin-top: -.25rem;
  margin-left: -1rem;
  margin-right: -1rem;
}

.grid ul li a{
  display: block;
}


.grid.padding-5 ul li a{
  padding:5px;
}

.grid.padding-10 ul li a{
  padding:10px;
}

.grid.padding-15 ul li a{
  padding:15px;
}

.grid.gap-20 ul li a{
  padding:20px;
}



.grid-image{
  display: grid;
}

.grid-image a img{
  transition: 250ms ease-in-out;
}

.grid-image a img:hover{
  scale: 1.05;
}

.grid-image a img:active{
  translate: 2px 2px;
}


.text-align-center,
.grid.text-align-center li{
  text-align: center;
}


@media (max-width:1023px){	
  .grid-3 ul{
    grid-template-columns: auto auto;
  }
}

@media (max-width:767px){	

  .grid-1x2{
    display: flex;
    flex-wrap: wrap;

    
  }

  .grid-1x2 .sidebar{
    width: 100%  !important;
  }


  .grid-1x2 .grid-sidebar-announcement{
    order: -1;
    margin-top:0;
  }

}

@media (max-width:520px){	
  .grid-image .grid-container{
    grid-template-columns: auto;
  }

  .grid.grid-inset {
    margin-top: -1rem;
  }

  .grid-image a img:hover{
    scale: unset;
  }
  
}

@media (max-width:480px){	
  .grid-3 ul{
    grid-template-columns: auto;
  }
}