/* lato-700 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/lato-v23-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/lato-v23-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/lato-v23-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/lato-v23-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/lato-v23-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/lato-v23-latin-700.svg#Lato') format('svg'); /* Legacy iOS */
  }
  

body {  background-color: #000; 
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
        margin: 0;
        padding: 0;
        box-sizing: border-box;}

#container {
    box-sizing: content-box; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
	
.desaturate {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
	transition: all 0.5s ease;
    }
    
.desaturate:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
    }

a[href]:link {text-decoration:none; color:transparent; border:none;}
a[href]:visited {text-decoration:none; color:transparent;  border:none}
a[href]:focus {text-decoration:none; color:transparent; border:none}
a[href]:hover {text-decoration:underline; color:transparent; border:none}
a[href]:active {text-decoration:none; color:transparent; border:none}
		
.fancybox-navigation .fancybox-button {
    padding: 26px 6px 26px 16px;
    }	
		
.fancybox-caption {
    position: absolute;
    top: 100%;
    left: 0;
    padding: 12px ;
    font-size: 125%;
    color: #FFF;
    }	

.red { background-color: #ff0000; }	
.blue { background-color: #005ca9; }	
.gray { background-color: #2e2d2c; }

.font-120 { 
    font-size: 100%; 
	letter-spacing: 0.01em;
	font-weight: bold;
    color: #FFF;
    }

.font-110 { 
    font-size: 80%; 
    line-height: 120%;
	letter-spacing: 0.01em;
	font-weight: bold;
    }

.font-100 { 
    font-size: 65%; 
	letter-spacing: 0.01em;
	font-weight: bold;
    color: #FFF;
    }

.topictoggle {	
    width: 100%;
    display: flex;
    flex-direction: row;
    }

.topic {	
    width: 95px;
    height: 55px;
	display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
    margin:2px;
    }

.topic a {	
    outline: none;
    }

.topic a:link {	
    color: #FFF;
    text-decoration:none;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; 
    }

.topic a:hover {	
    color: #FFF;
    text-decoration:none;
    background-color: #000;
    transition: 0.5s;
    }

.topic a:visited, a:active {	
    background-color: #ff0000;
    }
		
.pic {	
    width: auto;
    height: 55px;
    margin:2px;
    }

.pic a[href] {	
    background-color: #000;
    }
		
img.desaturate {  
    margin: 0;
    padding: 0;
    width: 100%;
    height: 55px;
    }
	
/* Ansicht für Tablets */
@media screen and (min-width:38.75em) {

		
.pic {	
    xwidth: 35px;
    xheight: 50px; 
    }
}

/* Ansicht für Desktop-Monitore */
@media screen and (min-width:45em) {
.topic {	
    width: 124px;
    height: 55px;
	letter-spacing: 0.03em;
    }
    
.font-120 { 
    font-size: 120%; 
	letter-spacing: 0.01em;
	font-weight: bold;
    }
    
.font-110 { 
    font-size: 105%; 
    line-height: 120%;
	letter-spacing: 0.01em;
	font-weight: bold;
    }

.font-100 { 
    font-size: 90%; 
    line-height: 110%;
	letter-spacing: 0.01em;
	font-weight: bold;
    }

}