@font-face 
{
  font-family:"Annifont";
  src:url("annifont.eot?") format("eot"),url("annifont.woff") format("woff"),url("annifont.ttf") format("truetype"),url("annifont.svg#Annifont") format("svg");
  font-weight:normal;
  font-style:normal;
}

*
{
  margin:0;
  padding:0;
}

body{text-align:center;}
video, img, .picformat{max-width:100%; height:auto; vertical-align:middle; margin:5px; border: 1px solid black;}

.afont{font-family:Annifont;}

.vfont{font-family: Verdana, sans-serif;}

.f8{font-size: 8px;}.f10{font-size: 10px;}.f12{font-size: 12px;}.f14{font-size: 14px;}.f16{font-size: 16px;}.f18{font-size: 18px;}

.marg{margin: 20px}

.margLR10
{
  margin-left:10px; 
  margin-right:10px;
}

.shadowline{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);}

.txt-white,.h-txt-white:hover{color:#ffffff;}
.txt-black,.h-txt-black:hover{color:#000000;}
.txt-navy,.h-txt-navy:hover{color:#000080;}

.hov:hover{background-color:#cccccc}

.tx
{
  position:absolute;
  left:50%;
  width:100%;
  transform:translate(-50%,200%);
  -ms-transform:translate(-50%,200%);
}

.tx2
{
  position:absolute;
  left:50%;
  width:100%;
  transform:translate(-50%,5%);
  -ms-transform:translate(-50%,5%);
}

.nodecor{text-decoration:none;}

.ctr{text-align: center;}

/******************** SMALL SCREEN FORMATTING ********************/
@media only screen and (max-width: 830px)
{
  .txt-menu {font-size: 12px;}
  .txt {font-size: 10px;}
  .txt-large {font-size: 11px;}
  .txt-huge {font-size: 3vw;}
  .txt-xhuge {font-size: 4vw;}
  .hide-small {display:none}

  .gridcontainer
  {
    display:grid;
    justify-content: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "topbar"
    "content";
    grid-row-gap: 10px;    
  }

  .topbar
  {
    grid-area: topbar;
    position: fixed;
    z-index: 1000;
    justify-content: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "topbarcookiebanner"
    "topbarrightmenuitem";
    background-color: white;
    width:100%;
  }
}

/******************** MEDIUM SCREEN FORMATTING ********************/
@media only screen and (min-width: 830px)
{
  .txt-menu {font-size: 2vw;}
  .txt {font-size: 12px;}
  .txt-large {font-size: 3vw;}
  .txt-huge {font-size: 4vw;}
  .txt-xhuge {font-size: 5vw;}
  .txt-kern4{letter-spacing:4px}
  .txt-fat
  {
    font-weight:900;
    text-shadow: -2px 0 black, 0 2px black, 1px 0 black, 0 -1px black
  }

  .gridcontainer
  {
    display:grid;
    justify-content: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "topbar"
    "content";
    grid-row-gap: 10px;
  }

  .topbar
  {
    width:100%;
    grid-area: topbar;
    position: fixed;
    z-index: 1000;
    justify-content: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "topbarcookiebanner topbarcookiebanner"
    "topbarleftmenuitem topbarrightmenuitem";
    background-color: white;
  }

}

/******************** LARGE SCREEN FORMATTING ********************/
@media only screen and (min-width: 1500px)
{
  .txt-menu {font-size: 29px;}
  .txt {font-size: 14px;}
  .txt-large {font-size: 39px;}
  .txt-huge {font-size: 74px;}
  .txt-xhuge {font-size: 76px;}
  .txt-kern4{letter-spacing:4px}
  .txt-fat
  {
    font-weight:900;
    text-shadow: -2px 0 black, 0 2px black, 1px 0 black, 0 -1px black
  }

  .gridcontainer
  {
    display:grid;
    justify-content: center;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "topbar"
    "content";
    grid-row-gap: 10px;
  }

  .topbar
  {
    width:100%;
    grid-area: topbar;
    position: fixed;
    z-index: 1000;
    justify-content: center;
    justify-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "topbarcookiebanner topbarcookiebanner"
    "topbarleftmenuitem topbarrightmenuitem";
    background-color: white;
  }
}

.topbarcookiebanner
{
  grid-area: topbarcookiebanner;
  justify-content: center;
  justify-items: center;
}

.topbarleftmenuitem
{
  grid-area: topbarleftmenuitem;
  justify-content: left;
  justify-items: left;
  align-content: center;
  align-items: center;
  margin: 10px;
}

.topbarrightmenuitem
{
  grid-area: topbarrightmenuitem;
  justify-content: right;
  justify-items: right;
  margin: 10px;
}

.content
{
  justify-content: center;
  justify-items: center;
  grid-area: content;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
  "contentheader"
  "contentpictures"
  "contentfooter";
  grid-row-start: 2;
  grid-row-gap: 10px;
  margin-top: 50px;
}

.contentheader
{
  justify-content: center;
  justify-items: center;
  grid-area: contentheader;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
  "contentheaderimg"
  "contentheadertxt"
}

.contentheaderimg
{
  justify-content: center;
  justify-items: center;
  grid-area: contentheaderimg;
}

.contentheadertxt
{
  justify-content: center;
  justify-items: center;
  grid-area: contentheadertxt;
  grid-row-start: 1;
}

.contentpictures
{
  justify-content: center;
  justify-items: center;
  grid-area: contentpictures;
  grid-row-gap: 10px;
  margin: 5px;
}

.contentfooter
{
  justify-content: center;
  justify-items: center;
  max-width: 1280px;
  margin: 20px;
  grid-area: contentfooter;
}

/*
contentfooter-text
{
margin: 50px;
}
*/