:root {
  --color-1: #ffffff;
  --color-2: #8a8c77;
  --color-3: #b36a5c;
  --color-4: #ca8385;
  --color-5: #717556;
  --color-6: #ddddd2;
  --color-7: #f4e9e7;
  --color-8: #999c86;
  --padding-1: 0px;
  --padding-2: 10px;
  --padding-3: 20px;
  --padding-4: 50px;
  --margin-1: 0px;
  --margin-2: 10px;
  --fontsize0: 10pt;
  --fontsize1: 11pt;
  --fontsize2: 12pt;
  --fontsize3: 18pt;
  --fontsize4: 20pt;
}


body
{
  background-color: 	var(--color-1);
  color:		var(--color-2);
  padding:		var(--padding-1);
  margin:		var(--margin-1);
  font-size:		var(--fontsize1);
  font-family: Open Sans;
}

a, a:active, a:hover, a:active
{
   text-decoration:	none;
   color: 		var(--color-2);
}

a:visited
{
   text-decoration:	underline;
}

a:hover
{
   text-decoration:	underline;
}

.center
{
  text-align:center;
}

.container
{
   width:1024px;
}

ul { margin-left:0px; padding-left:10px; }


h1 { font-size: var(--fontsize3);margin-bottom:20px }

h2 { padding-bottom:10px; padding-top:10px }


.titel1
{
   font-size: var(--fontsize1);
}

.bold { font-weight:bold; }

.textcolor1 { color: var(--color-1); }
.textcolor2 { color: var(--color-2); }
.textcolor3 { color: var(--color-3); }
.textcolor4 { color: var(--color-4); }

.bgcolor1 { background-color: var(--color-1); }
.bgcolor2 { background-color: var(--color-2); }
.bgcolor3 { background-color: var(--color-3); }
.bgcolor4 { background-color: var(--color-4); }
.bgcolor5 { background-color: var(--color-5); }
.bgcolor6 { background-color: var(--color-6); }
.bgcolor7 { background-color: var(--color-7); }
.bgcolor8 { background-color: var(--color-8); }

.fontsize0 { font-size: var(--fontsize0); font-family: Open Sans; }
.fontsize1 { font-size: var(--fontsize1); font-family: Open Sans; }
.fontsize2 { font-size: var(--fontsize2); font-family: Open Sans;}
.fontsize3 { font-size: var(--fontsize3); font-family: Open Sans;}
.fontsize4 { font-size: var(--fontsize4);  font-family: Open Sans;}

.padding1 { padding: var(--padding-1); }
.padding2 { padding: var(--padding-2); }
.padding3 { padding: var(--padding-2); }
.padding4 { padding: var(--padding-4); }


.color1 { color: var(--color-1); }
.color2 { color: var(--color-2); }
.color3 { color: var(--color-2); }
.color4 { color: var(--color-4); }
.color5 { color: var(--color-5); }
.color6 { color: var(--color-6); }
.color7 { color: var(--color-7); }
.color8 { color: var(--color-8); }


.colorset1
{
  background-color: var(--color-3);
  color: var(--color-1);
}


.colorset2
{
  background-color: var(--color-5);
  color: var(--color-1);
}

.colorset3
{
  background-color: var(--color-6);
  color: var(--color-5);
}


.colorset4
{
  background-color: var(--color-7);
  color: var(--color-3);
}


.button1
{
  border: none;
}


.nomargin { margin: 0px; }

.capitalize    { text-transform: capitalize; }

























.claim
{
 display:flex;
 justify-content:center;
 align-items:center;
}


.topnav {
  overflow: hidden;
}




.topnav a {
text-transform: uppercase;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 0px 14px 14px;
  text-decoration: none;
  font-size: 17px;
margin-left:100px;
}


.topnav a:hover {
  color: #fff;
  text-shadow: 1px 0 0 #fff;
}

.navaktiv {
  color: #fff;
  text-shadow: 1px 0 0 #fff;
}


.active {
  color: white;
}


a.icon { display:none; }



div.circle-outer {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}
div.circle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
}



@media screen and (min-width: 600px) 
{

.row { margin:0px; }

.containerdiv { width:1400px;margin-left:auto;margin-right:auto  }

.hidelarge { display:none!important; }
.padding50desktop { padding-top:100px; padding-bottom:100px; }
.topnav a:first-child {  padding-left:20px; margin-left:0px; }
.logo
{
 display:flex;
 width:100%;
 padding:15px;
 padding-left:20px;
 margin-top:20px;margin-bottom:20px;
}
.logo img { width:100%; }


.circle {
  width: 500px;
  height: 500px;
  margin-top:-20px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  overflow:hidden;
 display:flex;
 justify-content:center;
 align-items:center;

}


}

@media screen and (max-width: 600px) 
{
.row { margin:5px; }

.containerdiv { width:1400px; }

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 500px;
  text-align: center;
  overflow:hidden;
 display:flex;
 justify-content:center;
 align-items:center;
}


.logo
{
 width:100%;
 padding-left:10px;
 padding-right:10px;
 padding-bottom:10px;
}
.logo img { width:100%; }

.hidesmall { display:none;}

.claim { display:none; }
.containerdiv { width:100% }

.topnav a { display:none; margin-left:0px;}

  background-color: #f00!;

  .topnav a { display: none; }

  a.icon 
  {
    display: block;
    position: absolute;
    top: 7px; right:15px;
    z-index:99;
  }

  .topnav.responsive {position: relative;}

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }


}
.content { padding:20px; }