* {
  box-sizing: border-box;
}

body {
  margin: 0;
font-family: Verdana;
}

h1 {
  font-size: 3vmin;
}

h2 {
  font-size: 1.875vmin;
}

h3 {
  font-size: 1.55vmin;
}

p {
  text-indent: 0vmin;
  text-align: justify;
  font-size: 2vmin;
  line-height: 1.6vmin;
  letter-spacing: 0.15;
}

.grid-container {
  width: 98vmin;
  aspect-ratio: 1 / 1;
  margin: 1vmin auto; 
  background-color: #F5F5F5;
  border: 0.1vmin solid black;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 8vmin);
  grid-template-rows: repeat(12, 8vmin);
 justify-content: center; 
}

.grid-container > div {
  text-align: center;
  font-size: 2vmin;
}

.headerblock {
  grid-area: 1 / 2 / 2 / 12;
     font-size: 1.5vmin;
    padding: 1vmin;
  color: gray;
}

.headerblock2 {
  grid-area: 1 / 4 / 2 / 10;
     font-size: 1.5vmin;
    padding: 1vmin;
  color: gray;
}

.headerblock
 a:hover {
  opacity: 35%;
}

a:link img {
 opacity: 1.0;
}

a:hover img {
 opacity: 0.60;
}

a {
color: #4169E1;
}

a:link {
  text-decoration: none;
   color: #4169E1;
}

a:visited {
  text-decoration: none;
}

a:hover {
  opacity: 0.60;
}

a:active {
  text-decoration: underline;
}

.home {
grid-area:1/1;
}

.home
 a:hover {
  opacity: 35%;
}

.info {
 grid-area: 1/12;
 
}

.info
 a:hover {
  opacity: 35%;
}

.cv {
 grid-area: 12/1;
 
}

.cv
 a:hover {
  opacity: 35%;
}

.post {
 grid-area: 12/12; 
 
}
 
 .post
  a:hover {
  opacity: 35%;
}

.headnav1 {
grid-area: 1 / 2 / 2 / 4;
 z-index: 4;

}

.headnav2 {
grid-area: 1 / 10 / 2 / 12;
 z-index: 4;
 
}

.pos1 {
grid-area: 2 / 1 / 3 / 3;

}

.pos2 {
grid-area: 2 / 11 / 3 / 13;

}

.pos3 {
grid-area: 11 / 1 / 12 / 3;

}

.pos4 {
grid-area: 11 / 11 / 12 / 13;

}

.posleft {
grid-area: 10 / 1 / 12 / 3;

}

.posright {
grid-area: 10 / 11 / 12 / 13;

}

.posback {
grid-area: 11 / 1 / 12 / 2;

}

.posforw {
grid-area: 11 / 12 / 12 / 13;

}

.arrowleft {
grid-area: 2 / 3 / 3 / 4;

}

.arrowright {
grid-area: 2 / 10 / 3 / 11;

}

l7pos{
grid-area: 7 / 1 / 8 / 3;

}

r7pos{
grid-area: 7 / 12 / 8 / 13;

}

.unavl{
grid-area: 9 / 1 / 12 / 3;
 background: 
}

.unavr{
grid-area: 9 / 11 / 12 / 13;
 background:
}


.max0{
display: grid;
grid-area: 1 / 1 / 13 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;
}


.max1{
display: grid;
grid-area: 2 / 1 / 12 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;
}

.maxcentral{
display: grid;
grid-area: 2 / 4 / 11 / 10;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.maxcol8{
display: grid;
grid-area: 1 / 1 / 12 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}


.column1-l{
grid-area: 2 / 1 / 11 / 3;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.column1-r{
grid-area: 2 / 11 / 11 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.column2-l{
grid-area: 4 / 1 / 11 / 3;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.column2-r{
grid-area: 4 / 11 / 11 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.column3-l{
grid-area: 7 / 1 / 11 / 3;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.column3-r{
grid-area: 7 / 11 / 11 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.column4-l{
grid-area: 9 / 1 / 12 / 3;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.column4-r{
grid-area: 9 / 11 / 12 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}


.col-l{
grid-area: 9 / 1 / 11 / 4;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}

.col-r{
grid-area: 9 / 10 / 11 / 13;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;

}



 .column4 {
  grid-area: 2 / 1 / 12 / 9;
  
}


 .column5 {
  grid-area: 2 / 9 / 12 / 13;
  
}

.video1 {
  grid-area: 2 / 1 / 7 / 6;
  width: 100%;
height: 100%;

background-color: #ffffff;

}


 .mincont{
display: grid;
 grid-template-columns: 8vmin 8vmin;
  grid-template-rows: 8vmin 8vmin;
   row-gap: 1vmin;
  column-gap: 2.5vmin;
   width:100%;
height: 100%;

}

.min2{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr;
   width:100%;
height: 100%;

}

.min2cont{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr;
  column-gap: 0.5vmin;
   width:100%;
height: 100%;

}

.min22{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
   width:100%;
height: 100%;

}

.min22cont{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
  column-gap: 0.5vmin;
  row-gap: 0.5vmin;
   width:100%;
height: 100%;

}

.col2{
display: grid;
grid-template-columns: 1fr;
 grid-template-rows: 1fr 1fr;
   width:100%;
height: 100%;

}





.min23cont{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
  column-gap: 0.5vmin;
  row-gap: 0.5vmin;
   width:100%;
height: 100%;

}

.min23{
display: grid;
grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr 1fr;
   width:100%;
height: 100%;

}

.min3{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr;
   width:100%;
height: 100%;

}

.min3cont{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
 grid-template-rows: 1fr;
   column-gap: 0.5vmin;
  row-gap: 0.5vmin;
   width:100%;
height: 100%;

}

 .min4{
display: grid;
grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
   row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;

}

 .min4cont{
display: grid;
grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
   width:100%;
height: 100%;

}

 .min6{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
   row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;

}

 .min6cont{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
   width:100%;
height: 100%;

}

 .min9{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;

}

 .min9cont{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
   width:100%;
height: 100%;

}

.min12{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
   row-gap: 1vmin;
  column-gap: 1vmin;
   width:100%;
height: 100%;

}

 .min25cont{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
   width:100%;
height: 100%;

}

 .row3{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
 column-gap: 1vmin;
  grid-template-rows: 
   width:100%;
height: 100%;

}

 .row4{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
 column-gap: 1vmin;
  grid-template-rows: 
   width:100%;
height: 100%;

}

 .row5{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
   width:100%;
height: 100%;

}

 .row6{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 column-gap: 1vmin;
  grid-template-rows: 
   width:100%;
height: 100%;

}

 .row26{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 column-gap: 1vmin;
  grid-template-rows: 
   width:100%;
height: 100%;

}

 .row9{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 column-gap: 1vmin;
  grid-template-rows: 
   width:100%;
height: 100%;

}

 .iconmini{
display: grid;
 grid-template-columns: 8vmin 8vmin;
  grid-template-rows: 8vmin 8vmin;
   row-gap: 1vmin;
  column-gap: 2.5vmin;
   width:100%;
height: 100%;

}


.line1{
grid-area: 2 / 1 / 4 / 13;

}

.line12{
grid-area: 2 / 1 / 7 / 13;

}

.line13{
grid-area: 3 / 1 / 7 / 13;

}


.line14{
grid-area: 2 / 1 / 12 / 13;

}

.line15{
grid-area: 2 / 1 / 12 / 9;

}

.line16{
grid-area: 2 / 1 / 10 / 13;

}

.line17{
grid-area: 2 / 1 / 11 / 13;

}


.line2{
grid-area: 4 / 1 / 7 / 13;

}


.line25{
grid-area: 5 / 1 / 7 / 13;

}

.line20{
grid-area: 6 / 1 / 7 / 13;

}

.line3{
grid-area: 7 / 1 / 10 / 13;

}

.line30{
grid-area: 8 / 1 / 11 / 13;

}

.line31{
grid-area: 9 / 1 / 11 / 13;

}



.line23{
grid-area: 4 / 1 / 10 / 13;

}

.line24{
grid-area: 4 / 1 / 12 / 13;

}

.line234{
grid-area: 3 / 1 / 12 / 13;

}

.line34{
grid-area: 7 / 1 / 12 / 13;

}

.line4{
grid-area: 10 / 1 / 12 / 13;

}


.line5{
grid-area: 11 / 1 / 12 / 13;

}

.line6foot{
grid-area: 12 / 2 / 13 / 12;

}


.footerblock {
  grid-area: 12 / 2 / 13 / 12;
 color: gray;
 background: #F5F5F5;
 
}

.footerblock
 a:hover {
  opacity: 35%;
}