@charset "UTF-8";
/* CSS Document */

body{
    font-family: 'Lato', sans-serif;
    margin: 0;
    color: rgba(255,255,255,1.00);
    background-color: rgba(0,0,0,1.00);
}

body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   /* content:url(images/bg_01.jpg) url(images/bg_02.jpg) url(images/bg_03.jpg) url(images/bg_04.jpg) url(images/bg_05.jpg) url(images/bg_06.jpg) url(images/bg_07.jpg) url(images/bg_08.jpg) url(images/bg_09.jpg) url(images/bg_10.jpg) url(images/bg_11.jpg);*/
}

*{
    box-sizing: border-box;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

main{
    width: 100%;
    height:100vh;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(images/bg_02.jpg);
    background-size: cover;
    background-position: 69% center;
    animation-name: bg;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-direction:normal;
    animation-timing-function:step-end;
}

.container{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5%;
}

.divider, .divider-top{
    padding: 20vh 0 0;
}

.info{
    width: 800px;
    height: auto;
    margin: 0 auto 0;
    /*background-color: rgba(0,0,0,0.30);*/
    color: rgba(255,255,255,1.00);
    text-align: center;
    padding: 2em 0;
}

.info h1{
    margin: 0;
    font-family: 'Major Mono Display', sans-serif;
    font-size: 3em;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.005em;
}

.info h2{
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.78em;
    padding: 0 0 0 0.3em;
    letter-spacing: 0.31em;
}

.info p{
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 1.45em;
    font-weight: 400;
    letter-spacing: 0.12em;
    padding: 0 0 0 0.1em;
}

.nft{
    height: 40px;
    margin: -10px 0 0 ;
}

@keyframes bg{
  0% {
    background-image:linear-gradient(180deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), url(images/bg_01.jpg);
  }
  10% {
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(images/bg_02.jpg);
  }
  20% {
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(images/bg_03.jpg);
  }
  30% {
    background-image:linear-gradient(180deg, rgba(0, 0, 255, 0.5), rgba(255, 0, 0, 0.5)), url(images/bg_07.jpg);
  }
  40% {
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(images/bg_05.jpg);
  }
  50% {
    background-image:linear-gradient(180deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), url(images/bg_06.jpg);
  }
  60% {
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(images/bg_10.jpg);
  }
  70% {
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(images/bg_09.jpg);
  }
  80% {
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(images/bg_04.jpg);
  }
  90% {
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(images/bg_11.jpg);
  }
}

a{
    text-decoration: none;
    color: rgba(255,255,255,1.00);
    cursor: pointer;
    padding: 0.7em 0;
}

.small{
    position: fixed;
    right: 1.5em;
    bottom: 1em;
    z-index: 1;
}

.small p{
    font-size: 0.8em;
    color: rgba(255,255,255,1.00);
    margin: 0;
}

.impressum{
    width: 800px;
    height: auto;
    margin: 0 auto 0;
    /*background-color: rgba(0,0,0,0.30);*/
    color: rgba(255,255,255,1.00);
    text-align: center;
    padding: 2.5em 0;
}

.impressum h1{
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0 0 0 0.1em;
    font-weight: 700;
    font-size: 2em;
}

.impressum h2{
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.78em;
    padding: 0 0 0 0em;
    letter-spacing: 0.1em;
}

.impressum p{
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-size: 1.3em;
    font-weight: 400;
    letter-spacing: 0.1em;
/*    padding: 0 0 0 0.1em;*/
}

p.space{
    letter-spacing: 0.145em;
}

.img{
    width: 300px;
    height: auto;
    margin: 0 auto;
}

.smalltext{
    padding: 1em;    
}

.smalltext h3{
    font-size: 0.8em;
    text-transform: uppercase;
}

.smalltext p{
    font-size: 0.6em;
}

i{
    font-size: 2em;
}

.col h2{
    font-weight: 400;
    font-size: 1.5em;
}

/* GRID */

.row{
	display: flex;
	flex-direction: row;
	flex-wrap: no-wrap;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
}

.col{
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
    padding: 1em;
}

.col.one{
	flex-basis: 20%;
  	max-width: 20%;
}


.col.two{
	flex-basis: 33.333%;
  	max-width: 33.333%;
}


.col.three{
	flex-basis: 50%;
  	max-width: 50%;
}

.col.four{
	flex-basis: 66.666%;
  	max-width: 66.666%;
}

.col.five{
	flex-basis: 83.333%;
  	max-width: 83.333%;
}

.col.six{
	flex-basis: 100%;
  	max-width: 100%;
}

.row.center{
	align-items: center;
}

.mobile{
    display: none;
}

.impressum p.tel{
    font-weight: 100;
    padding: 0 0 1em;
}

/* ICONS */

.svg-inline--fa.fa-wordpress-simple.fa-w-16.fa-2x,
.svg-inline--fa.fa-code.fa-w-20.fa-2x,
.svg-inline--fa.fa-graduation-cap.fa-w-20.fa-2x,
.svg-inline--fa.fa-video.fa-w-18.fa-2x{
    height: 32px;
}

/*Media Queries */

@media only screen and (max-width: 64em){  

        .divider, .divider-top{
        padding: 10vh 0 0;
    }
    .small{
    bottom: 1.5em;
}

.impressum p{
    font-size: 1.18em;
    }
.smalltext{
    padding: 0;    
}

.smalltext h3{
    font-size: 0.6em;
}

.col h2{
    font-weight: 400;
    font-size: 1.3em;
}

}

@media only screen and (max-width: 51em){  
    .col h2 {
        font-size: 1.0em;
    }
        
    .divider, .divider-top{
        padding: 0;
    }
    
    .info {
        padding: 1em 0 0;
}
    .impressum{
        width: 800px;
    }
}

@media only screen and (max-width: 50em){
    .row{
		flex-wrap: wrap;
        padding: 0 5em;
	}

    main{
    width: 100%;
    height:100vh;
}
    
    .info, .impressum{
        width: 350px;
        padding: 1em 0;
    }
    .info h1{
        font-size: 1.52em;
    }
    
    .info h2 {
        font-size: 0.9em;
    }
    
    .info p{
        font-size: 0.74em;
    }
    
    .col h2 {
        font-size: 0.9em;
    }
    
    i{
        font-size: 1.4em;
    }
    
    .divider{
        padding: 5vh 0 0;
    }
    
    .divider-top{
        padding: 10vh 0 0;
    }
}

@media only screen and (max-width: 46em){
     .col.one{
        flex-basis: 50%;
        max-width: 50%;
    }
    
    .hidden{
        display: none;
    }
 
    .divider, .divider-top{
    padding: 0;
}
    .col {
        padding: 0.5em;
    }
}
    
@media only screen and (max-width: 26em){
    .row{
        padding: 0 0.9em;
	}
    
     .col.one{
        flex-basis: 50%;
        max-width: 50%;
    }
    
    .info{
        width: 350px;
    }
    .info h1{
        font-size: 1.52em;
    }
    
    .info h2 {
        font-size: 0.92em;
    }
    
    .info p{
        font-size: 0.77em;
    }
    
    .col h2 {
        font-size: 1.2em;
    }
    
    i{
        font-size: 1.4em;
    }
    
    .hidden{
        display: none;
    }
    
    .divider, .divider-top{
    padding: 3vh 0 0;
    }
    
    .impressum h1{
        font-size: 1.1em;
    }
    
    .impressum h2{
        font-size: 0.98em;
    }
    
    .mobile{
        display: block;
        letter-spacing: 0.14em !important;
        padding: 1em 0;
    }
    
    p.space{
        letter-spacing: 0.27em !important;
    }
    
    .mobileimg{
         width: 63%;
         display: block;
        height: auto;
        margin: 0 auto;
    }
    
    .img{
        width: 100%;
    }
    
    .col {
        padding: 1em;
    }
}