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

div {
    border: none;
    outline: none;
}
html {
	scroll-behavior: smooth;
    border: none;
    outline: none;
    background-color: #000;
    }

body {
    border: none;
    outline: none;
    margin: 0;
    background-color: #000;
    overflow-x: hidden;
    }
    
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    }
    
    ::-webkit-scrollbar {
      width: 15px;
	  -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }

    ::-webkit-scrollbar-track {
    background: #001; 
    }

    ::-webkit-scrollbar-thumb {
    background: #e8ff14; 
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    }

    ::-webkit-scrollbar-thumb:hover {
    background: #B31E67; 
	-webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    }
a {
	outline-width: 0px;
  	outline-style: none;
	text-decoration: none;
	background-color: transparent;
    color: #000;
	border: none;
}
	

a:link {
    text-decoration: none;
	background-color: transparent;
    color: #000;
}
a:visited {
    text-decoration: none;
	background-color: transparent;
    color: #000;
}

a:hover {
    text-decoration: none;
	background-color: transparent;
    color: #000;
}

a:active {
    text-decoration: underline;
	 background-color: transparent;
    colot: #000;
}

    .navbar {
        position: fixed;
        cursor: pointer;
        background-color: #e8ff14;
        font-family: "essonnes-display",serif;
        font-weight: 300;
        font-style: italic;
        color: #000;
		text-align: center;
        margin-top: 0;
        padding-top: 20px;
        padding-left: 25px;
        width: 100vw;
        height: 50px; 
        z-index: 100;
		-webkit-user-select: none;  /* Chrome 49+ */
  		-moz-user-select: none;     /* Firefox 43+ */
  		-ms-user-select: none;      /* No support yet */
  		user-select: none;          /* Likely future */  
    }

    .gallery {
        cursor: url(../img/play.png),pointer;
        border: none;
        outline: none;
        position: relative;
        background-color: #000;
        overflow: hidden;
        top: 50px;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 50;
    }    
    .gallery img {
        width: 100vw;  
        opacity: .7;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    
    .gallery img:hover {
        opacity: 1;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }

    .video {
        border: none;
        cursor: pointer;
        outline: none;
        position: fixed;
        display: block;
        background-color: #000;
        overflow: hidden;
        left: 100vw;
        top: 30px;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 80;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }    

    .video iframe {
        width: 100vw;
        height: 100vh;
        margin-top: -30px;
    }

.title {
    position: absolute;
    cursor: pointer;
    font-family: "essonnes-display",serif;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    top: 30px;
    right: 35px;
}
.title p{
	color: #e8ff14;
}

.social {
    position: absolute;
    cursor: pointer;
    color: #898989;
    font-family: "essonnes-display",serif;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    top: 10px;
    right: 35px;
}

    .x {
        position: absolute;
        right: 85px;
        top: 18px;
        width: 20px;
        height: 20px;
        z-index: 2000;
        opacity: 0;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
   .x:hover {
        transform: scale(.7, .7);
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }


    .contact {
        position: fixed;
        background-color: #000;
		background-image: url("../img/contact.jpg");
        overflow: hidden;
        cursor: auto;
        color: #e8ff14;
		width: 100vw;
		height: 100vh;
		background-position: center;
  		background-repeat: no-repeat;
  		background-size: cover;
        left: 100vw;
        top: 60px;
        z-index: 1500;
        opacity: 1;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }    

    .contact img {
        border: none;
        outline: none;
    
		height: 100vh;
    }

.links {
    position: absolute;
	width: 100vw;
    cursor: pointer;
    color: #e8ff14;
    font-family: "essonnes-display",serif;
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    top: 15vh;
	text-align: center;
}
.links p {
	color: #e8ff14;
	margin-bottom: -3vw;
}
.links p:hover{
	color: #4A2647;
}
.cs {
	margin-top: 7vw;
}
.impressum {
    position: absolute;
    cursor: pointer;
    color: #898989;
    font-family: "essonnes-display",serif;
    font-size: 25px;
    font-weight: 400;
    font-style: italic;
    top: 110px;
    z-index: 1500;
}
.impressum p{
    margin-bottom: -18px;
}

    .imp {
        border: none;
        outline: none;
        position: absolute;
        display: block;
        background-color: #000;
        overflow: hidden;
        left: 0vw;
        top: 100px;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 80;
        opacity: .8;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }    

    .imp img {
        width: 100vw;
        margin-top: -30px;
    }

    .black {
        border: none;
        outline: none;
        position: fixed;
        display: block;
        background-color: #000;
        overflow: hidden;
        left: 100vw;
        top: 41px;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 3000;
        opacity: 1;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }    

    .black img {
        width: 100vw;
        margin-top: 30px;
    }
    .writer {
        border: none;
        outline: none;
        position: absolute;
        display: block;
        left: -100vw;
        top: 11px;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 60;
        opacity: 1;
        font-size: 0px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }    

    .writer img {
        width: 100vw;
        overflow: hidden;
    }

   .creative {
        border: none;
        cursor: pointer;
        outline: none;
        position: fixed;
        display: block;
        background-color: #000;
        overflow: hidden;
        left: -100vw;
        top: 30px;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 80;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
    }    

    .creative iframe {
        width: 100vw;
        height: 100vh;
        margin-top: -30px;
    }


.tshow {

    border: none;
    outline: none;
    position: absolute;
    padding-top: 0px;
    top: 30px;
    left: 0vw; /*use to move in and out*/
    width: 100vw;
    background-color: #000;
    overflow: hidden;
    z-index: 60;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.tshow-container {

    position: relative;
    background-color: #000;
    margin: auto;
    padding: 0;
    width: 100vw; 
    overflow: hidden;
}

.t-row {
    display: -ms-flexbox; /* IE 10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE 10 */
    flex-wrap: wrap;
    padding: 0px;
    overflow: hidden;
}

/* Create four equal columns that sits next to each other */
.t-column {
    -ms-flex: 50%; /* IE 10 */
    flex: 50%;
    padding: 0px;
    z-index: 500;
    overflow: hidden;
}

.t-column img {
    cursor: url(../img/play.png), pointer;
    margin-top: 0px;
    vertical-align: middle;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.t-column img:hover {
    opacity: .5;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.pshow {
    border: none;
    outline: none;
    position: absolute;
    padding-top: 0px;
    top: 40px;
    left: 0vw; /*use to move in and out*/
    width: 100vw;
    background-color: #001;
    overflow: hidden;
    z-index: 60;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.pshow-container {
    position: relative;
    background-color: #001;
    margin: auto;
    padding: 0px;
    width: 100vw; 
    overflow: hidden;
}

.p-row {
    padding: 0px;
    overflow: hidden;
}

/* Create four equal columns that sits next to each other */
.p-column {
    padding: 0px;
    z-index: 500;
    overflow: hidden;
		border-style: 0;
	text-decoration:none; 
	outline:none;
}

.p-column img {
	border-style: 0;
	text-decoration:none; 
	outline:none;
    padding-top: 20px;
    vertical-align: middle;
	opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.fade {
	opacity: 1;
	-webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;	
    }