@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("../lib/fonts/material-symbols-outlined.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}


@font-face { font-family: fontSignature; src: url(../lib/fonts/thesignature.ttf); }
@font-face { font-family: fontTitle; src: url(../lib/fonts/1942.ttf); }
@font-face { font-family: fontStandard; src: url('../lib/fonts/Kenyan Coffee Rg.otf'); }
@font-face { font-family: fontTypewriter; src: url('../lib/fonts/XTypewriter-Regular.ttf'); }
@font-face { font-family: fontSmall; src: url('../lib/fonts/Roboto-Regular.ttf'); }
@font-face { font-family: fontText; src: url('../lib/fonts/QuattrocentoSans-BoldItalic.ttf'); }
@font-face { font-family: fontTextRegular; src: url('../lib/fonts/QuattrocentoSans-Bold.ttf'); }
@font-face { font-family: fontHand;	src: url('../lib/fonts/IndieFlower-Regular.ttf'); }

*, body { box-sizing:border-box; margin: 0; padding: 0; }

body { font-family: fontText; color:rgb(0, 0, 0); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; }

main { padding: 0; }

.foot { padding: 5px; font-size: 20px; font-family: fontTitle; width: 100%; text-align: center; display: block; }
.soon { padding: 10px 50px ;  font-size: clamp(10px, 5vw, 32px); border-radius: 10vw; font-family: fontHand; width:90%; text-align: center; margin: auto;}

.icon               { font-size: 64px; }
.iconmini           { font-size: 36px; padding: 0 10px; }
.iconglyph          { padding: 0; margin: 0; font-style: normal; line-height: 1.1; letter-spacing: 0; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; }

.glyphsmall   span  { font-size: 28px; }
.glyphmed     span  { font-size: 36px; }
.glyphbig     span  { font-size: 48px; }
.glyphcat     span  { font-size: calc((((100vw - 80px - 105px) / 4 ) - 54px ) / 16 ); }


/* ----------   ALLGEMEINKLASSEN  ---------------------------- */

.version            { font-family:fontSmall; margin-left:20px; }
.signatur           { font-size: 56px; vertical-align: -14px; margin-left:10px; margin-right:15px; font-family: fontSignature; }
.copyright          { font-family: fontTitle; }

.gap0410			{ gap: 10px; }
.gap0410w			{ gap: 0 10px; }
.gap1019			{ gap: 19px; }
.gap1025 			{ gap: 25px; }
.gap2035			{ gap: 35px; }
.gap4070			{ gap: 70px; }

.paddingcont 		{ padding: 40px 40px 0 40px; }	
.padding0306		{ padding: 6px; }
.padding0410		{ padding: 10px; }
.padding0918w		{ padding: 0 18px;}
.padding1040 		{ padding: 40px; }
.padding1025 		{ padding: 25px; }
.padding1025bottom	{ padding-bottom: 25px; }
.paddingminimal		{ padding: 5px; }
.paddingnewsicon	{ padding: 0 25px; }
.paddingtitlesmall	{ padding: 4px 18px; }

.fontsizesmallless	{ font-size: 12px; }	/* Exif-Icon Name */
.fontsizesmall		{ font-size: 16px; }	/* News Adds Titel / News Adds Beschr.   */
.fontsizemed 		{ font-size: 22px; }	/* Categorylinks / Picdesctitel / EXIFValue /    */
.fontsizemedmore 	{ font-size: 24px; } 	/* Pictitle /    */
.fontsizebigless 	{ font-size: 26px; } 	/* Picdesc / Newsdesc /   */
.fontsizebig		{ font-size: 28px; }	/* Newstitle /    */

.flewrarow {  display: flex;  flex-wrap: wrap;    flex-direction: row; }
.flenorow {   display: flex;  flex-wrap: nowrap;  flex-direction: row; }
.flenocol {   display: flex;  flex-wrap: nowrap;  flex-direction: column; }

.cursorhoverpoint:hover 	{ cursor: pointer; }
.cursorhoverdefault:hover 	{ cursor: default; }

a, a:active,
a:visited,
a:hover,
a:default { color: none; background-color: none; text-decoration: none; }

.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; }
.close { color: #aaaaaa; float: right; padding: 0 0 10px 10px; }
.close:hover,
.close:focus { color: #000; text-decoration: none; cursor: pointer; }

.maxview {
  top: 0;
  right: 0;
  letter-spacing: 0;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  border-radius: 0 0 0 10px;
  cursor: pointer;
  position: absolute;
  width: auto;
  padding: 10px;
  color: white;
  font-size: 15px !important;
  user-select: none;
  -webkit-user-select: none;
}
.maxview:hover  { background-color: rgba(0,0,0,0.6); }
.prev, .next    {
  cursor: pointer;
  position: absolute;
  top: 20%;
  height: 60%;
  text-align: center;
  align-content: center;
  color: rgba(255,255,255,0.2);
  font-weight: bold;
  font-size: 7vw;
  user-select: none;
  -webkit-user-select: none;
}

.next { right: 0;   border-radius: 10px 0 0 10px; }
.prev { left: 0;    border-radius: 0 10px 10px 0; }

.prev:hover,
.next:hover { color: rgba(255,255,255,1); background-color: rgba(0, 0, 0, 0.3); }


/* ----------   NAVIGATION   --------------------------------- */

.nav { display: flex; flex-wrap: nowrap; flex-direction: row; overflow: hidden;	width: 100%; padding: 2px; gap: 3px; }
.nav::after { clear: both; }
.nav .btn { display: flex; justify-content: center; align-items: center; text-align: center; flex: 1 1; }
.nav .btn.normal { flex-flow: row nowrap; max-width: 300px; padding: 6px 0; font-size: 32px; }
.nav .btn.small { padding:6px 15px; }
.nav .btn.normal i { font-size: 36px; } 
.nav .btn.small i { font-size: 36px; } 
.nav .smalldiv { gap:2px; display: flex; flex-flow: row nowrap; max-width: fit-content; align-self: right; padding-right: 40px; margin-left: auto; }

/* ----------   Text Felder   ------------------------------- */

.txt { width: 100%; justify-content: center; }
.txt::after { clear: both; display: block; }
.txt .txtdiv { width: 60%; overflow: visible; height: fit-content; justify-content: center; }
.txt img { margin-left: 10px; width: 30%; float: right; }
.txt p { text-align: left; float: left; }

/* ----------   HOME   -------------------------------------- */

.divline { height: 40px; width:100%; }
.set .langdiv { gap: 50px; width: fit-content; }
.set .langthumb { width: 42px; height: 42px; margin-bottom: 10px; }
.set .themethumb { width: 20vw; max-width: fit-content; margin-bottom: 15px; }

.set { justify-content: center; }
.set .setdiv { width:fit-content; }
.set .innerdiv { width: 100%; justify-content: space-around; }

/* ----------   KATEGORIEN   --------------------------------- */

.cat { width: 100%; justify-content: space-evenly; }
.cat::after { display: block; clear: both; }
.cat .categorydiv { padding: 10px; width: calc((100% - 105px) / 4 ); overflow: hidden; aspect-ratio: 2 / 1.18; }
.cat .catdesc { padding: 15px 7px 7px 7px; font-size: calc((((100vw - 80px - 105px) / 4 ) - 54px ) / 20 ); float: left; overflow: hidden; }
.cat .cattitle { padding: 0 10px;          font-size: calc((((100vw - 80px - 105px) / 4 ) - 20px ) / 17 ); width:100%; text-align:center; overflow: hidden; text-wrap: nowrap; }
.cat .categorypic { float:left; padding: 12px 10px 7px 10px; }
.cat .categorythumb { width: 100%; }

/* ----------   KATEGORIE LINKS IN GALLERIE --------------------- */

.clc { width: 100%; align-items: center; }
.clc::after { display: block; clear: both; }
.clc .categorylinkdiv { width: 100%; padding: 8px 22px; column-gap: 22px; row-gap: 12px; justify-content: left; }
.clc .categorylink { padding: 6px 12px; }

/* ----------   BILDGALLERIE   ----------------------------------- */

.gal { padding: 40px; width: 100%; gap: 10px; display: grid; grid-template-columns: auto auto auto auto auto auto auto auto; justify-content: center; grid-auto-rows: calc(((100vw - 80px - 70px) / 8 )  / 3 * 2 ); }
.gal::after { display: block; clear: both; }
.gal .gallerydiv { width: 100%; height: 100%; overflow: hidden; }
.gal .gallerydiv.normalpic { 	width: calc((100vw - 80px - 70px) / 8 );}
.gal .gallerydiv.widepic { 	 	width: calc((100vw - 80px - 30px) / 4 ); grid-column-start: span 2; }
.gal .gallerydiv.portraitpic { 	width: calc((100vw - 80px - 70px) / 8 ); grid-row-start: span 2; }
.gal .gallerypic { width: 100%; height: 100%; object-fit: cover; }

/* ----------   BILD   --------------------------------------------- */

.pic { width: 100%; justify-content: center; }
.pic::after { display: block; clear: both; }
.pic .picturediv { overflow: hidden; }

.pic .picflexdiv { padding-top: 25px; justify-content: center; align-content: flex-start; }
.pic .picflexdiv.wide { flex-direction: column; }
.pic .picflexdiv.portrait { flex-direction: row; }

.pic .pictitlediv { padding: 5px 10px; column-gap: 15px; } 

.pic .pictitle { overflow: hidden; display: flex; align-items:center; min-width: fit-content;}
.pic .pictitle.left { flex: 10 3 ; justify-content:left; }
.pic .pictitle.left div { display: flex; align-items: center; word-wrap: break-word; }
.pic .pictitle.right1 { flex: 1 1 ; justify-content:left; }
.pic .pictitle.right2 { flex: 1 1 ; justify-content:right; }
.pic .pictitle.right1 div,
.pic .pictitle.right2 div { display: flex; align-items: center; }

.pic .picdiv { margin: 0 auto; overflow: hidden; height: fit-content; max-width: fit-content;  position: relative; }
.pic .picdiv.wide { flex: 1 1 100%; }
.pic .picdiv.portrait { flex: 1 0; min-width: fit-content; }

.pic .picture { display: block; max-height: calc(100vh - 50px); }

.pic .picdescdiv { align-items: flex-start; }
.pic .picdescdiv .title { width: 100%; text-align: center; align-items: center; }
.pic .picdescdiv.wide { flex-flow: row nowrap; }
.pic .picdescdiv.portrait { flex-direction: column; flex: 1 1 40%; min-width: 40vw; }

.pic .picdesc { font-family: fontText; display: block; overflow: hidden; max-height: fit-content; }
.pic .picdesc.wide { flex-grow: 1; min-width: 40%; }
.pic .picdesc.portrait { max-width: 800px; margin: 0 auto; width:100%} 

.pic .picdesc .desc { flex: 1 1 50%; gap:5px; line-height: 1.3; }
.pic .desc.inactive { display: none } 
.pic .desc img { max-width: clamp(120px, 25vw, 330px); max-height: clamp(140px, 25vw, 400px); margin: 0 0 10px 10px ; float: right; }
.pic .exifdiv { flex: 1 0 30%; padding-right: 10px; max-height: fit-content; display: flex; flex-flow: row nowrap; align-items: center; }
.pic .exificon { width: 80px; line-height: 80%; font-family: fontSmall; overflow: hidden; display: block; text-align: center; }
.pic .exificon span { font-size: 36px; }
.pic .exifvalue { flex: 3 3; vertical-align: middle; line-height: 90%; }

/* ----------   NEWS   ------------------------------------------------- */

.news { width: 100%; justify-content: space-evenly; }
.news::after { display: block; clear: both; }

.news .link { width: 100%; text-align: center; }
.news .linkdiv { padding: 6px 12px; gap: 5px; width: 40%; max-width: 400px; overflow: hidden; align-items:center;}

.news .newsdiv { width: 70%; display: flex; align-content: center; flex-direction: column; overflow: hidden; }
.news .date { padding: 2px 15px 2px 5px; flex:1 0; display: flex; flex-direction: row; align-items: center; min-width: fit-content; } 
.news .title { padding: 5px 15px; flex:4 1; display: flex; align-items: center;}
.news .newsdesc { width:95%; margin: 0 auto; line-height: 1.3; }

.news .newsthumbcontainer { overflow: visible; width: 100%; justify-content: space-evenly; }
.news .newsthumbcontainer::after { display: block; clear: both; }

.news .newsthumbdiv {  display: flex; flex-flow: column nowrap; max-width:90%; overflow: hidden; height: fit-content; }

.news .newsthumbinnerdiv { justify-content: space-evenly; align-items: center;}

.news .newsadd { width: 115px; height: 115px; align-content: center; overflow: hidden; }
.news .newsthumb { width: 100%; height: 100%; display: block; object-fit: cover; }





/*--------------------------------------------------------------------------------------------------------------------*/
/*- RESPONSIVE ELEMENTS ----------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------- */
/* < 1800px ------------------------------------------------------------ */
@media screen and (max-width: 1800px) {
 	
/* NAV AND COMMOM */
  .nav .btn.normal    { font-size: 26px; max-width: 250px;}
  .nav .btn.small     { padding: 0 10px; max-width: 60px;}
  .nav .btn.normal i  { font-size: 36px; }
  .nav .btn.small i   { font-size: 36px; }
  
  .signatur           { font-size: 48px; vertical-align: -12px; }
  
  .icon               { font-size: 56px; }
  .iconmini           { font-size: 30px; padding: 0 8px; }
  .glyphsmall   span  { font-size: 24px; }
  .glyphmed     span  { font-size: 30px; }
  .glyphbig     span  { font-size: 40px; }
  .glyphcat     span  { font-size: calc((((100vw - 60px - 60px) / 3 ) - 54px ) / 16 ); }

  .gap0410            { gap: 8px; }
  .gap1019            { gap: 16px; }
  .gap1025            { gap: 20px; }
  .gap2035            { gap: 30px; }
  .gap4070            { gap: 60px; }
	
  .paddingcont        { padding: 35px 30px 0 30px; }	
  .padding0306        { padding: 5px; }
  .padding0410        { padding: 8px; }
  .padding0918w       { padding: 0 15px;}
  .padding1040        { padding: 30px; }
  .padding1025        { padding: 20px; }
  .padding1025bottom  { padding-bottom: 20px; }
  .paddingminimal     { padding: 4px; }
  .paddingnewsicon    { padding: 0 17px; }
  .paddingtitlesmall  { padding: 4px 15px; }
	
  .fontsizesmallless  { font-size: 10px; }
  .fontsizesmall      { font-size: 14px; }
  .fontsizemed        { font-size: 18px; }
  .fontsizemedmore    { font-size: 20px; }
  .fontsizebigless    { font-size: 22px; }
  .fontsizebig        { font-size: 24px; }
  
/* HOME SCREEN */
  .set .langthumb     { width:36px; height:36px; }
  .set .themethumb    { width: 25vw; margin-bottom: 12px;}

/* TEXT FIELDS */
  .txt .txtdiv        { width: 70%; }
	
/* CATEGORY LINKS */
  .clc .categorylinkdiv   { padding: 7px 18px; column-gap: 18px; row-gap: 7px; }
  .clc .categorylink      { padding: 5px 8px; }
	
/* CATEGORIES */
  .cat .categorydiv   { width: calc((100% - 60px) / 3 ) }
  .cat .cattitle      { font-size: calc((((100vw - 60px - 60px) / 3 ) - 20px ) / 17 ); }
  .cat .catdesc       { font-size: calc((((100vw - 60px - 60px) / 3 ) - 54px ) / 20 ); }
	
/* GALLERIE PICTURES */
  .gal                          { gap: 10px; padding: 35px 30px; grid-auto-rows: calc((100vw - 60px - 50px) / 6 / 3 * 2 ); grid-template-columns:auto auto auto auto auto auto; }
  .gal .gallerydiv.normalpic    { width: calc((100vw - 60px - 50px) / 6 ); }
  .gal .gallerydiv.widepic      { width: calc((100vw - 60px - 20px) / 3 ); }
  .gal .gallerydiv.portraitpic  { width: calc((100vw - 60px - 50px) / 6 ); }

/* PICS */
  .pic .picflexdiv    { padding-top: 20px; }
  .pic .picture       { max-height: calc(100vh - 40px); }
  .pic .exificon      { width: 70px; }
  .pic .exificon span { font-size: 30px; }
	
/* NEWS */
  .news .newsadd      { height: 90px; width: 90px; }

}

/* --------------------------------------------------------------------- */
/* < 1200px ------------------------------------------------------------ */
@media screen and (max-width: 1200px) {
 	
/* NAV AND COMMOM */
  .nav .btn.normal    { font-size: 17px; flex-direction: column; max-width: none;}
  .nav .btn.small     { padding: 0 10px; max-width: 50px;}
  .nav .btn.normal i  { font-size: 32px; }
  .nav .btn.small i   { font-size: 24px; }
  .nav .smalldiv      { padding-right: 15px; flex-direction: column; }

  .signatur           { font-size: 42px; vertical-align: -10px; }

  .icon               { font-size: 42px; }
  .iconmini           { font-size: 24px; padding: 0 5px; }
  .glyphsmall   span  { font-size: 20px; }
  .glyphmed     span  { font-size: 24px; }
  .glyphbig     span  { font-size: 32px; }
  .glyphcat     span  { font-size: calc((((100vw - 40px - 25px) / 2 ) - 54px ) / 16 ); }

  .gap0410            { gap: 6px; }
  .gap1019            { gap: 13px; }
  .gap1025            { gap: 15px; }
  .gap2035            { gap: 25px; }
  .gap4070            { gap: 50px; }
	
  .paddingcont        { padding: 30px 20px 0 20px; }	
  .padding0306        { padding: 4px; }
  .padding0410        { padding: 6px; }
  .padding0918w       { padding: 0 12px;}
  .padding1040        { padding: 20px; }
  .padding1025        { padding: 15px; }
  .padding1025bottom  { padding-bottom: 15px; }
  .paddingminimal	  { padding: 3px; }
  .paddingnewsicon    { padding: 0 16px; }
  .paddingtitlesmall  { padding: 3px 12px; }

  .fontsizesmallless  { font-size: 8px; }
  .fontsizesmall      { font-size: 12px; }
  .fontsizemed        { font-size: 15px; }
  .fontsizemedmore    { font-size: 17px; }
  .fontsizebigless    { font-size: 19px; }
  .fontsizebig        { font-size: 21px; }

/* HOME SCREEN */
  .set .langthumb     { width:30px; height:30px; }
  .set .themethumb    { width: 30vw; margin-bottom: 9px;}

/* TEXT FIELDS */
  .txt .txtdiv        { width: 80%; }

/* CATEGORIES */
  .cat .categorydiv   { width: calc(50% - 13px); }
  .cat .cattitle      { font-size: calc((((100vw - 40px - 25px) / 2 ) - 20px ) / 17 ); }
  .cat .catdesc       { font-size: calc((((100vw - 40px - 25px) / 2 ) - 54px ) / 20 ); }

/* CATEGORY LINKS */
  .clc .categorylinkdiv   { padding: 6px 14px; column-gap: 14px; row-gap: 6px; }
  .clc .categorylink      { padding: 4px 6px; }

/* GALLERIE PICTURES */
  .gal                          { gap: 8px; padding: 30px 20px; grid-auto-rows: calc(((100vw - 40px - 24px) / 4 / 3 * 2 )); grid-template-columns:auto auto auto auto; }
  .gal .gallerydiv.normalpic    { width: calc((100vw - 40px - 24px) / 4 );}
  .gal .gallerydiv.widepic      { width: calc((100vw - 40px - 8px) / 2 );}
  .gal .gallerydiv.portraitpic  { width: calc((100vw - 40px - 24px) / 4 );}

/* PICS */
  .pic .picflexdiv    { padding-top: 15px; }
  .pic .picture       { max-height: calc(100vh - 30px); }

  .pic .exificon      { width: 60px;}
  .pic .exificon span { font-size: 24px; }

/* NEWS */
  .news .newsdiv      { width: 80%; }
  .news .newsadd      { height: 75px; width: 75px; }

}
  
/* < 900px ------------------------------------------------------------- */
@media screen and (max-width: 900px) {
  .pic .picdescdiv.wide     { flex-flow: column wrap; }
}

/* --------------------------------------------------------------------- */
/* < 600px ------------------------------------------------------------- */
@media screen and (max-width: 600px) {

/* NAV AND COMMOM */
  .nav .btn.normal    { font-size: 12px; }
  .nav .btn.small     { padding: 0 10px; max-width: 50px; }
  .nav .btn.normal i  { font-size: 30px; }
  .nav .btn.small i   { padding:0 10px; font-size: 24px; }
  .nav .smalldiv      { padding-right: 5px; }
	
  .signatur           { font-size: 38px; vertical-align: -8px; }

  .icon               { font-size: 36px; }
  .iconmini           { font-size: 22px; padding: 0 3px; }
  .glyphsmall   span  { font-size:16px; }
  .glyphmed     span  { font-size:18px; }
  .glyphbig     span  { font-size:24px; }
  .glyphcat     span  { font-size: calc((((100vw - 40px - 0px) / 1 ) - 54px ) / 16 );}

  .gap0410            { gap: 4px; }
  .gap1019            { gap: 10px; }
  .gap1025            { gap: 10px; }
  .gap2035            { gap: 20px; }
  .gap4070            { gap: 40px; }
  .paddingminimal     { padding: 2px; }

  .paddingcont        { padding: 25px 20px 0 20px; }	
  .padding0306        { padding: 3px; }
  .padding0410        { padding: 4px; }
  .padding0918w       { padding: 0 9px;}
  .padding1040        { padding: 10px; }
  .padding1025        { padding: 10px; }
  .padding1025bottom  { padding-bottom: 10px; }
  .paddingnewsicon    { padding: 0 12px; } 
  .paddingtitlesmall  { padding: 2px 9px; }
	
  .fontsizesmallless  { font-size: 6px; }
  .fontsizesmall      { font-size: 10px; }
  .fontsizemed        { font-size: 13px; }
  .fontsizemedmore    { font-size: 15px; }
  .fontsizebigless    { font-size: 17px; }
  .fontsizebig        { font-size: 19px; }	

/* HOME SCREEN */
  .set .langthumb     { width:24px; height:24px; }
  .set .themethumb    { width: 35vw; margin-bottom: 6px;}

/* TEXT FIELDS */
  .txt .txtdiv        { width: 95%; }

/* CATEGORIES */
  .cat .categorydiv   { width: 100%; }
  .cat .cattitle      { font-size: calc((((100vw - 40px - 0px) / 1 ) - 20px ) / 17 ); }
  .cat .catdesc       { font-size: calc((((100vw - 40px - 0px) / 1 ) - 54px ) / 20 ); }

/* CATEGORY LINKS */
  .clc .categorylinkdiv   { padding: 5px 10px; column-gap: 10px; row-gap: 5px; }
  .clc .categorylink      { padding: 3px 5px; }
	
/* GALLERIE PICTURES */
  .gal                          { gap: 6px; padding: 25px 10px; grid-auto-rows: calc(((100vw - 20px - 6px) / 3 )); grid-template-columns:auto auto; }
  .gal .gallerydiv.normalpic    { width: calc((100vw - 20px - 6px) / 2 );}
  .gal .gallerydiv.widepic      { width: calc((100vw - 20px ) / 1 );}
  .gal .gallerydiv.portraitpic  { width: calc((100vw - 20px - 6px) / 2 );}
	
/* PICS */
  .pic .picflexdiv              { padding-top: 10px;}
  .pic .picflexdiv.portrait     { flex-flow: column nowrap; }
  .pic .picture                 { max-height: calc(100vh - 20px); }
  .pic .exificon span           { font-size: 24px; }
  .pic .exificon                { width: 40px;}

/* NEWS */
  .news .newsdiv      { width: 100%; }
  .news .newsadd      { height: 60px; width: 60px; }

}

/* --------------------------------------------------------------------- */
/* < 300px ------------------------------------------------------------- */
@media screen and (max-width: 300px) {

/* NAV AND COMMOM */
  .nav .btn.normal    { font-size: 9px; }
  .nav .btn.small     { padding: 0 7px; max-width: 35px; }
  .nav .btn.normal i  { font-size: 24px; }
  .nav .btn.small i   { padding:0 7px; font-size: 18px; }
  .nav .smalldiv      { padding-right: 5px; }
	
  .signatur           { font-size: 32px; vertical-align: -6px; }

  .icon               { font-size: 36px; }
  .iconmini           { font-size: 22px; padding: 0 3px; }
  .glyphsmall   span  { font-size:16px; }
  .glyphmed     span  { font-size:18px; }
  .glyphbig     span  { font-size:24px; }
  .glyphcat     span  { font-size: calc((((100vw - 40px - 0px) / 1 ) - 54px ) / 16 );}

  .gap0410            { gap: 2px; }
  .gap1019            { gap: 8px; }
  .gap1025            { gap: 7px; }
  .gap2035            { gap: 15px; }
  .gap4070            { gap: 30px; }
  .paddingminimal     { padding: 2px; }

  .paddingcont        { padding: 20px 10px 0 10px; }	
  .padding0306        { padding: 2px; }
  .padding0410        { padding: 3px; }
  .padding0918w       { padding: 0 7px;}
  .padding1040        { padding: 6px; }
  .padding1025        { padding: 8px; }
  .padding1025bottom  { padding-bottom: 7px; }
  .paddingnewsicon    { padding: 0 10px; } 
  .paddingtitlesmall  { padding: 2px 7px; }
	
  .fontsizesmallless  { font-size: 5px; }
  .fontsizesmall      { font-size: 8px; }
  .fontsizemed        { font-size: 10px; }
  .fontsizemedmore    { font-size: 12px; }
  .fontsizebigless    { font-size: 14px; }
  .fontsizebig        { font-size: 16px; }	
  
/* HOME SCREEN */
  .set .langthumb     { width:24px; height:24px; }
  .set .themethumb    { width: 50vw; margin-bottom: 6px;}

/* TEXT FIELDS */
  .txt .txtdiv        { width: 95%; }

/* CATEGORIES */
  .cat .categorydiv   { width: 100%; }
  .cat .cattitle      { font-size: calc((((100vw - 20px - 0px) / 1 ) - 20px ) / 17 ); }
  .cat .catdesc       { font-size: calc((((100vw - 20px - 0px) / 1 ) - 54px ) / 20 ); }

/* CATEGORY LINKS */
  .clc .categorylinkdiv   { padding: 5px 10px; column-gap: 10px; row-gap: 5px; }
  .clc .categorylink      { padding: 3px 5px; }
	
/* GALLERIE PICTURES */
  .gal                          { gap: 6px; padding: 25px 10px; grid-auto-rows: calc(((100vw - 20px - 6px) / 3 )); grid-template-columns:auto auto; }
  .gal .gallerydiv.normalpic    { width: calc((100vw - 20px - 6px) / 2 );}
  .gal .gallerydiv.widepic      { width: calc((100vw - 20px ) / 1 );}
  .gal .gallerydiv.portraitpic  { width: calc((100vw - 20px - 6px) / 2 );}
	
/* PICS */
  .pic .picflexdiv              { padding-top: 10px;}
  .pic .picflexdiv.portrait     { flex-flow: column nowrap; }
  .pic .picture                 { max-height: calc(100vh - 20px); }
  .pic .exificon span           { font-size: 24px; }
  .pic .exificon                { width: 40px;}

/* NEWS */
  .news .newsdiv      { width: 100%; }
  .news .newsadd      { height: 60px; width: 60px; }