
.grid-page {
  display: grid;
  grid-template-columns: 400px 1fr;

column-gap: 50px;
}

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

column-gap: 20px;
}

.grid-menu{
  display: grid;
  align-content: center;
  justify-content: center;
  align-items: center;
  grid-template-columns: 0.8fr 1fr;
 
}
.grid-center{
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.grid-top{
  align-content: flex-start;
  justify-content: start;
  align-items: flex-start;
  justify-items: start;
}
.grid-left{
     
    display: grid;
    align-content: flex-start;
    justify-content: start;
    align-items: flex-start;
    justify-items: start;
    text-align: left;
}
.grid-right{
    display: grid;
    display: grid;
    align-content: flex-end;
    justify-content: end;
    align-items: flex-end;
    justify-items: end;
    text-align: right;
}

.col-stretch{
  align-items: stretch!important;
}
.grid{
  display: grid;
}
.rows{
  display: grid;
  grid-template-columns:  1fr;
  
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
.col2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  column-gap: 20px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.col2size64{
  grid-template-columns: 64px 1fr;
}

.col2size64always{
  grid-template-columns: 64px 1fr;
}
.col2size100{
  grid-template-columns: 100px 1fr;
}

.col2size250{
  grid-template-columns: 250px 1fr;
}
.col2size400{
  grid-template-columns: 400px 1fr;
}

.col2size25p{
  grid-template-columns: 25% 1fr;
}

.col3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  
  column-gap: 20px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}


.col4{
  display: grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  
  column-gap: 20px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.grid2 {
  display: grid;
grid-template-columns: 1fr 1fr;

column-gap: 50px;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
}

.grid-2cols {
    display: grid;
 grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
 
 column-gap: 20px;
 align-content: center;
 justify-content: center;
 align-items: center;
 justify-items: center;
}

.grid-3cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 30px;
  align-content: center;
  justify-content: center;
  align-items: stretch;
  justify-items: center;
}

.grid-3colsinset{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 30px;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}
/*
.grid-3colsinset >div{
  background: #252628;
    border-left: thin solid #181819;
    border-right: thin solid #363636;
    border-top: thin solid #181819;
    border-bottom: thin solid #363636;
  padding: 20px;
  background: #28292b;
}
*/

.grid-3colsinset >div{
  background: #023464;
   /*
    border-left: thin solid #023464;
    border-right: thin solid #0455A3;
    border-top: thin solid #0455A3;
    border-bottom: thin solid #363636;
    */
  
  background: #043667d6;
  color:white;
}


.grid-boxes {
    display: grid;
 grid-template-columns: 1fr;
 
 column-gap: 0px;
 align-content: center;
 justify-content: center;
 align-items: center;
 justify-items: center;
}



  .grid-2boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
 
 column-gap: 50px;
}

.boxcontainer {
  display: grid;
  grid-template-columns: 1fr;
  
    position: relative;
    z-index: auto;
    
 
}
.boxcontainer-h2{
   
  margin: 0;
  margin-top: 40px;
  padding: 0;
  color: #034483;
  border-bottom: thin solid #023464;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

.boxcontainer-blockquote{
  
  display: block;

}

.boxcontainer-p{
   
  display: block;

}
.boxcontainer-border{
  
  
  border: thin solid #d1d0d0;
 /* box-shadow: 0px 0px 8px 1px #a9a9a99c;*/
}
.border-topbottom{
  border-bottom: thin solid #023464;
}
.border-bottom{
  border-bottom: thin solid #023464;
}
.boxcontainer-shadow{
  box-shadow: 0px 0px 8px 1px #a9a9a99c;
}

.boxcontainer  div{
  width:auto;
 /* text-align:center;*/
}
.boxcontainer  div span{
 position:relative;
 display:inline-block;
}

.boxcontainer .boximage-icon{
  
}
.boximage-iconcontext{
  display: grid;
    grid-template-columns: 1fr 1fr;
    
}

.boximage-iconcontext-small{
  display: grid;
    grid-template-columns: 100px 1fr;
    
}


.boximage-iconcontext-50{
  display: grid;
    grid-template-columns: 50px 1fr;
    
}
.grid-center{
  justify-content: space-evenly;
    align-items: center;
    align-content: center;
}
 .grid-top{
  justify-content: space-evenly;
    align-items: flex-start;
    align-content: flex-start;
 }
 .grid-bottom{
  justify-content: space-evenly;
    align-items: flex-end;
    align-content: flex-end;
 }

 .row-gap10{
  row-gap: 10px;
}
.row-gap15{
  row-gap: 15px;
}
.row-gap20{
  row-gap: 20px;
}
.row-gap40{
  row-gap: 40px;
}

.col-gap10{
  column-gap: 10px;
}
.col-gap15{
  column-gap: 15px;
}
.col-gap20{
  column-gap: 20px;
}
.col-gap40{
  column-gap: 40px;
}
.col-gap50{
  column-gap: 50px;
}
.col-gap100{
  column-gap: 100px;
}
.boxcontainer .boxheader{
  
}
.boxcontainer .boxtitle{
  
  font-weight: bold;
}
.boxcontainer .boxcomments{
  
}
.boxcomments p{
  padding:0px;
  margin:0px;
}
.boxcontainer .boxtag{
  
}
.align-left{
  text-align:left!important;
}
.align-right{
  text-align:right;
}
.align-center{
  text-align: center;
}
.tag-blue{
   display:inline-block;
   padding: 8px;
   padding-left: 12px;
   padding-right: 12px;
   background: #001f4d;
    color: white;
}
.grid-2boxes .infobox {
 padding-bottom: 0.25rem;
}

  .grid-3boxes{
    display: grid;
    column-gap: 50px;
    column-gap: 100px;
    align-content: center;
     align-items: stretch;;
    justify-items: stretch;
    grid-template-columns:  1fr 1fr 1fr;
}
  .grid-3boxes .infobox {
    padding-bottom: 0.25rem;
  }

  .grid-4boxes{
    display: grid;
    column-gap: 50px;
    align-content: center;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
}
  .grid-4boxes .infobox {
    padding-bottom: 0.25rem;
  }       

  .footer-grid{
    display:grid;   
    grid-template-columns: 64px 1fr;/* 64px 1fr;  */
    row-gap:10px;
    column-gap: 10px;
    pointer-events: all;
    border: 10px solid #ffffffdb;
  }
 
     
  
  @media (max-width:1024px){

    .grid-page2{
      display: grid;
  grid-template-columns: 1fr; 
    }
    .grid-3boxes{
      display: grid;
      column-gap: 50px;
      align-content: center;
      align-items: center;
      justify-items: center;
      grid-template-columns:  1fr 1fr;
  }
  .grid2{
    grid-template-columns: 1fr;
  }

  .grid-2cols {
    display: grid;
 grid-template-columns: 1fr;
 
 column-gap: 20px;
 align-content: center;
 justify-content: center;
 align-items: center;
 justify-items: center;
}

.grid-3cols {
    display: grid;
 grid-template-columns: 1fr;
 
 column-gap: 10px;
 align-content: center;
 justify-content: center;
 align-items: center;
 justify-items: center;
}

.grid-3colsinset {
  display: grid;
grid-template-columns: 1fr;

column-gap: 10px;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
}

  }  


  
  @media (max-width:960px){

    .f16{
      font-size:1.1em;
    }
    .f2{
      font-size:1.4em;
    }
    .padwhensmall{
      padding:clamp(3px,10px,1%);
    }
    .font-large{
      font-size:1.2em
    }
    .font-medium{
      font-size:1.1em
    }
    .grid-3boxes{
      display: grid;
      column-gap: 50px;
      align-content: center;
      align-items: center;
      justify-items: center;
      grid-template-columns:  1fr;
  }

  .boximage-iconcontext{
    display: grid;
      grid-template-columns: 1fr;
      
  }
  .grid-3cols {
    display: grid;
 grid-template-columns: 1fr;
 
 column-gap: 10px;
 align-content: center;
 justify-content: center;
 align-items: center;
 justify-items: center;
}
  .grid-2boxes {
    display: grid;
    grid-template-columns: 1fr;
 
 column-gap: 50px;
}  
  }
 
 
