body                      { background-image: url('background.jpg'); }

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

.txtcolor                 { color: rgba(255, 255, 255, 0.75); }
.txtcolactual             { color: rgba(255,255,255,0.5); }
.txtcoldeact              { color: rgba(255,255,255,0.5); }

.txtcolhover:hover 	      { color: #ffffff;}

.bgcolor                  { background-color: rgba(0, 0, 0, 0.3); }
.bgcolmed                 { background-color: rgba(0, 0, 0, 0.5); }
.bgfilter                 { -webkit-backdrop-filter: sepia(100%) blur(2px); backdrop-filter: sepia(100%) blur(2px); }
.bgfilterhover:hover      { -webkit-backdrop-filter: sepia(0) blur(0); backdrop-filter: sepia(0%) blur(0);  }

.bgcolactual              { background-color: rgba(0,0,0,0.4); }
.bgcoldeact 		      { background-color: rgba(0,0,0,0.1); }

.bgcolmedhover:hover      { background-color: rgba(0, 0, 0, 0.4); }
.bgcolhover:hover 		  { background-color: rgba(0, 0, 0, 0.8); }


.catlinkhover:hover .categorylink 	{ background-color: rgba(255, 255, 255, 0.2); }
.catdivhover:hover  .cattitle 		{ background-color: rgba(255, 255, 255, 0.2); }
.picdeschover:hover .desc .exifdiv 	{ background-color: rgba(255,255,255,0.2); }
.newsdivhover:hover .title 			{ background-color: rgba(255,255,255,0.2); }
.newsdivhover:hover .date 			{ background-color: rgba(0,0,0,0.8); }
.newsdivhover:hover .newsdesc 		{ background-color: rgba(0, 0, 0, 0.8); }
.newsdivhover:hover 				{ background-color: rgba(255, 255, 255, 0.2) !important; }
.abhover:hover		img 			{ opacity: 1; }

.transfast 			{ transition: 0.5s; }
.transmed 			{ transition: 1.0s; }
.transslow 			{ transition: 5s cubic-bezier(0.01,0.2,0.1,1) 0.1s; }

.max1				{ width: 280px !important; }
.max2				{ width: 405px !important; }
.max3				{ width: 525px !important; }
.max90				{ max-width: 90% !important; }
.maxsmall  			{ max-width: 300px !important; }

.border1			{ border: solid 0 rgba(255, 255, 255, 0.3); }
.border2			{ border: solid 0 rgba(255, 209, 0, 0.3); }
.border3			{ border: solid 0 rgba(255, 209, 0, 0.3); }
.border4			{ border: solid 0 rgba(244, 255, 0, 0.3); }
.border5			{ border: solid 0 rgba(255, 0, 255, 1); }
.bordernav			{ border: solid 0 rgba(0, 255, 0, 1); }
.borderbtn			{ border: solid 0 rgba(0, 255, 255, 1); }
.borderbtnoff		{ border: solid 0 rgba(0, 100, 100, 1); }

.radiussmall		{ border-radius: 4px; }
.radiusmedless		{ border-radius: 6px; }
.radiusmed			{ border-radius: 8px; }
.radiusmore			{ border-radius: 10px; }
.radiusbigless		{ border-radius: 13px; }
.radiusbig			{ border-radius: 15px; }
.radiusextra		{ border-radius: 8px; }

.shadowbig 			{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
.shadowsmall 		{ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.15); }

.shadownav          { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
.shadownavbtn       { box-shadow: none; }
.shadowbtn          { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.15); }
.shadow1            { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
.shadow2            { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
.shadow3            { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.15); }
.shadow4            { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.15); }
.shadow5            { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), 0 3px 10px 0 rgba(0, 0, 0, 0.15); }

.resizehover01:hover		{ transform: scale(1.01); }
.resizehover03:hover		{ transform: scale(1.03); }
.resizehover05:hover		{ transform: scale(1.05); }
.resizehover1:hover 		{ transform: scale(1.1); } 
.resizehover5:hover 		{ transform: scale(1.5); } 
.resizecathover:hover 		{ transform: scale(1.03); }
.resizegalhover:hover 		{ transform: scale(1.03); }
.resizegalpichover:hover 	{ transform: scale(1.5); }


/* ----------   NAVIGATION   -------------------------------- */
.nav .btn 					{ font-family: fontTitle; }

/* ----------   Text Felder   ------------------------------- */
.txt .txtdiv 				{ font-family: fontHand; }
.txt img					{ opacity: 0.8; }
.txt .id 					{ font-family: fontTextRegular; }
.txt .txtfield				{ font-family: fontSmall; }

/* ----------   KATEGORIEN   --------------------------------- */
.cat .catdesc 				{ font-family: fontTextRegular; }
.cat .cattitle				{ font-family: fontTitle; }

/* ----------   KATEGORIE LINKS IN GALERIE --------------------- */
.clc .categorylink			{ font-family: fontTextRegular; }

/* ----------   BILD   --------------------------------------------- */
.pic .pictitle				{ font-family: fontTextRegular; }
.pic .picture 				{ max-width: calc(100vw - 130px); }

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

.news .linkdiv				{ font-family: fontTextRegular; }
.news .date					{ font-family: fontTextRegular; }
.news .title				{ font-family: fontTextRegular; }
.news .newsdesc				{ font-family: fontText; }
.news .newsthumbtitle 		{ font-family: fontTextRegular; text-align: center;}
.news .newsthumbdesc  		{ font-family: fonttextRegular; text-align: center;}




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

/* --------------------------------------------------------------------- */
/* < 1800px ------------------------------------------------------------ */
@media screen and (max-width: 1800px) {
 	
	.max1				{ width: 222px !important; }
	.max2				{ width: 320px !important; }
	.max3				{ width: 420px !important; }
	.max90				{ max-width: 90% !important; }

	.pic .picture 		{ max-width: calc(100vw - 100px); }
}

/* --------------------------------------------------------------------- */
/* < 1200px ------------------------------------------------------------ */
@media screen and (max-width: 1200px) {
 	
	.max1				{ width: 185px !important; }
	.max2				{ width: 265px !important; }
	.max3				{ width: 345px !important; }
	.max90				{ max-width: 90% !important; }

	.pic .picture 		{ max-width: calc(100vw - 70px); }
}

/* --------------------------------------------------------------------- */
/* < 600px ------------------------------------------------------------- */
@media screen and (max-width: 600px) {
	
	.max1				{ width: 150px !important; }
	.max2				{ width: 215px !important; }
	.max3				{ width: 280px !important; }
	.max90				{ max-width: 90% !important; }

	.nav .btn.normal    { font-family: fontSmall; }
	
	.pic .picture		{ max-width: calc(100vw - 60px); }
	
}

/* --------------------------------------------------------------------- */
/* < 300px ------------------------------------------------------------- */
@media screen and (max-width: 300px) {
	
	.max1				{ width: 150px !important; }
	.max2				{ width: 215px !important; }
	.max3				{ width: 280px !important; }
	.max90				{ max-width: 90% !important; }
	
	.pic .picture		{ max-width: calc(100vw - 60px); }
	
}