@CHARSET "utf-8";

/* open-sans-300 - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-300italic - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600italic - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-800 - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700italic - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-800italic - latin-ext_latin_greek_cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/open-sans-v17-latin-ext_latin_greek_cyrillic-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

* {
margin: 0;
padding: 0;
} 

body
{
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', Trebuchet MS;
	color: white;
	cursor: default;
	
	background: #7d7e7d; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
/* 	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none; */
	/* overflow: hidden; */
}

.title		 {
	font-size: 6.6vmin;
	font-weight: 700;
	color: #96c263;
	text-shadow: 0.2vmin 0.2vmin 0.05vmin rgba(0, 0, 0, 0.9);
} 

.headline
{
	font-size: 3.5vmin;
	font-weight: 700;
	color: #96c263;
	text-shadow: 0.2vmin 0.2vmin 0.05vmin rgba(0, 0, 0, 0.9);
	width: 100%;
	text-align: center;
}

.small		 {
	font-size: 1.3vmin; 
	text-shadow: 0.1vmin 0.1vmin 0.1vmin rgba(0, 0, 0, 0.8);
}

.middle		 {
	text-shadow: 0.1vmin 0.1vmin 0.1vmin rgba(0, 0, 0, 0.8);
	font-size: 1.5vmin;
} 

.normal		 {
	text-shadow: 0.2vmin 0.2vmin 0.05vmin rgba(0, 0, 0, 0.9);
	font-size: 2.0vmin;
	letter-spacing: 0.04vmin;
	font-weight: 300;
	line-height: 3.3vmin;
} 

.slarge		 {
	font-size: 2.5vmin;
	text-shadow: 0.1vmin 0.1vmin 0.1vmin rgba(0, 0, 0, 0.8);
	line-height: 4.5vmin;
} 

.large		 {
	font-size: 3.0vmin;
	text-shadow: 0.1vmin 0.1vmin 0.1vmin rgba(0, 0, 0, 0.8);	
} 

.xslarge		 {
	font-size: 6.0vmin;
	font-weight: 100;
	text-shadow: 0.1vmin 0.1vmin 0.1vmin rgba(0, 0, 0, 0.8);	
} 

.xlarge		 {
	font-size: 10.0vmin;
	text-shadow: 0.2vmin 0.2vmin 0.05vmin rgba(0, 0, 0, 0.2);
} 


.msg-title		 {
	font-size: 6.6vmin;
} 



.fl	{
	float: left;
	line-height: 6vmin;
	margin-right: 2vmin;
}

.bold	{
	font-weight: 800!important;
}

.sbold	{
	font-weight: 700;
}

.green	{
	color: #96c263;	
}

.l-green	{
	color: #dbffb0;	
}
.white	{
	color: white;	
}

.black	{
	color: black;	
}

.bleach	{
	opacity: 0.3;
	
}
.upperCase	{
	text-transform: uppercase;
}


.highlight{
	word-wrap: break-word;
  display: inline;
  background: orange;
  box-shadow: 10px 0 0 orange, -10px 0 0 orange;
}


#canvas
{
	width: 100vw; 
	height: 100vh; 
	background: transparent; 
	display: flex; 
	align-items: center;
    justify-content: center;
	left: 0;
	
	
	/*flex-wrap: nowrap;*/
	overflow: hidden; 
	position: fixed;
	box-shadow: 0 0 15vmin 0 rgba(0,0,0,0.71);
	
	z-index: 1;
}

.load-image	{
	visibility: hidden;
	width: 0.1vmin;
	height: 0.1vmin;
	content:url(../images/fu.png);
}

.drag-container	
{	
	position: absolute; 
	top: 0; 
	left: 0vw; 
	background: rgba(0,0,0,0);
	display: flex;
	cursor: pointer;
}

#drag-container-blurred
{	
	position: absolute; 
	top: 0; 
	left: 0vw; 
	background: rgba(0,0,0,0);
	display: flex;
	cursor: pointer;
}

.drag-container-image	
{
	/*transition: all cubic-bezier(.24,.57,.47,.78) 0.2s;*/
	

	box-shadow: 0 0 5vmin 0 rgba(0,0,0,0.71);	
	
	display: none;	
	transition:0.6s opacity ease-in-out;
	opacity: 0.2;

}

.drag-container-transitions	
{
	/*transition: all cubic-bezier(.24,.57,.47,.78) 0.1s;*/
	/*transition: all cubic-bezier(.24,.57,.47,.78) 0.5s;*/
	transition: none;
	transition: 0.3s opacity ease-in-out!important;
}




@media (orientation: landscape) 
{

	.drag-container
	{
		width: auto; 
		min-width: 100vw;
		height: 100.0vh; 
		align-items: center;  
		justify-content: center; 
		flex-wrap:nowrap;
	}
	
	.drag-container-image	
	{
		height: 100%;
		width: auto;
		
	}
	
	.page	{
		width: auto;
		height: 100%;
	}
}



.page	{
	transition:0.6s opacity ease-in-out, 1.5s filter ease-in-out;	
	opacity: 0.0;
	display: flex; 
	align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    position: relative;
}

.page-loaded	{
	opacity: 0.2;
}

.page-visible	{
	opacity: 1.0;
}


.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}






#logo-header	{
	border: 0;
	position: fixed;
  	top: 5.0vmin;	  	
  	left: 5.0vmin;
	background-image: url(../images/stories_logo.svg);
	background-size: contain;	
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 92;
}

#logo-header	img{

}

.logo-header-large	{
	width: 35.0vmin!important;
	height: 20.0vmin!important;	
}

.logo-header-small	{
	width: 23.0vmin!important;
	height: 7.7vw!important;	
}

#logo-footer	{
	border: 0px solid white;
	position: fixed;
	
  	bottom: 5.0vmin;	
  	right: 5.0vmin; 	

	background-image: url(../images/logo_small.png);
	background-size: contain!important;
	background-position: bottom!important;
	background-repeat: no-repeat;
	z-index: 92;
}

.logo-footer-large	{
	width: 35.0vmin!important;
	height: 12.0vmin!important;
}

.logo-footer-small	{
	width: 25.0vmin!important;
	height: 10.0vmin!important;	
}


.trans-std	{
	transition:.3s all ease-in-out;
	/* transition:none!important; */
}
.trans-fast	{
	transition: transform cubic-bezier(.24,.57,.47,.78) 0.2s;
}

.trans-slow	{
	transition:.8s all ease;
}

.trans-std-opacity	{
	transition:.3s opacity ease-in-out;
	/* transition:none!important; */
}

.no-trans	{
	transition: none;
}











.fu	{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/fu.png);
	left: 0px;
	top:0px;
	cursor: pointer
}






#end-left	{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 7vw;
	height: 100vh;
}



#end-right	{
	position: fixed;
  	bottom: 0vw;	
  	right: 0vw;
	width: 7vw;
	height: 100vh;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}


#end-top	{
	position: fixed;
  	top: 0vw;	
  	left: 0vw;
	width: 100vw;
	height: 7vh;	

}

#end-bottom	{
	position: fixed;
  	bottom: 0vw;	
  	left: 0vw;
	width: 100vw;
	height: 7vh;	
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipV;
        -ms-filter: "FlipV";
}





#cart-content	{
	margin: 4vmin;
	width: 85vw;
}

.zoom-in	{	
	transform: scale(1.2);
}

.round-button
{
	margin: 1vmin;
	
	padding: 0.0vmin;
	float: right;
	font-size: 5.7vmin;

	text-align: center;
	cursor: pointer;
	border-radius: 7.0vw;
	
	height: 10vmin;
	width: 10vmin;
	opacity: 0.55;
	

	box-shadow:        0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
	
	background-color: #96c263;
	background-image: url(images/symbol_cart.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 60%;	


      
    flex-shrink: 0;
    flex-grow: 0;
}

#cNewsletter	{
	background-size: cover;
}

svg {
    display: block;
    margin: 0 auto;
}

.round-button:hover
{
	opacity: 1.0;
	transform: scale(1.15,1.15);
}

.round-button-no-hover
{
	opacity: 0;
}


.shrink	{
 	animation: shrink-down  infinite .5s ease-in-out;         
    animation-iteration-count: 1;	
    transform: scale(0,0); 
}

.grow	{
     animation: grow-up infinite .5s ease-in-out;         
    animation-iteration-count: 1; 
}

.nav-btn
{

    margin: 1vmin;
	padding: 0.0vmin;
	float: right;
	font-size: 5.7vmin;
	text-align: center;
	cursor: pointer;
	border-radius: 0.0vw;
	height: 8vmin;
	width: 8vmin;
	opacity: 0.55;
		/*box-shadow:        0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);*/
/* 	background-color: transparent;
	background-image: url(../images/symb_nav_edges.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 6vmin; */

	flex-shrink: 0;
	flex-grow: 0;

}

.nav-btn-hover
{
	opacity: 1.0;
 	transform: scale(1.15,1.15); 
}



.nav-btn-rotate
{	
	/* transform: rotate(90deg); */
}


#navigation	{
	position: absolute;
	right: 0;
	top: 0;
	width: 100vmin;
	height: 100vh;
	overflow:hidden;
	text-align: center;
}

#navigation-background	{
	height: 100%;
	position: absolute;
	width: 100vmin;
	left: 150vmin;
}

#navigation-list div	{
		margin: 0vh 0vw 0vh -50vmin;
		height: 1.4vmin;
	}	

#navigation-list	{
	list-style-type: none;
	margin: 0vh 5vw 5vh 0vw;
	padding-top: 20vmin;
	z-index: 0;
}

#navigation-list li {
	padding: 1vmin 2vmin 1vmin 25vmin;
	margin: -1vmin 0 0 -7.3vmin;
	cursor: pointer;
	font-size: 4.0vmin;
	letter-spacing: 0.2vmin;
	
	box-shadow: 5vmin 0vmin 5vmin 0 rgba(0,0,0,0.31);
	height: 6vmin;
	overflow: hidden;
	width: 120vmin;
	transform: scale(0.9);
	background: transparent;
	transition: all ease-in-out 0.3s; /*all cubic-bezier(.24,.57,.47,.78) 0.3s*/
	
}

#navigation-list p {
	font-size: 3.0vmin;
	margin-top: 1vmin;
	line-height: initial;
	transition: all ease-in-out 0.3s;
	transform: scale(0.9);
}

#navigation-list p:hover {
	font-size: 3.0vmin;
	color: #7da549;
	transform: scale(1.2);
}



#navigation-list li:hover {
	color: #acd37a;	
	
	transform: scale(1.2);
}




#back-to-page	{
	width: 58vmin;
	height: 14vmin;
	background-image: url(../images/nav_slide.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	top: -20vmin;
	left: -12.3vmin;
	
}




.menu-header	{
	margin-bottom: 2vmin;
	line-height: 10vmin;
}

.blurred-background	{
	filter: blur(7px);
}

.blurred-background-x	{
	filter: blur(12px)!important;
	
}





.footer-large	{

}
.footer-small	{
	bottom: 3vmin!important;
	transform: scale(0.6);
	margin-left: -4vmin;
}


#footer-links	{
	display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    position: absolute;
    transform: rotate(270deg);
    z-index: 1;
    text-transform: uppercase;
  	letter-spacing: 0.2vmin;
    
    
    width: 65vmin;
	height: 10vmin;
	bottom: 41vmin;
	left: -35vmin;
}





/*
Links
*/
a, a:link	 {
	color: #dbffb0;
	text-decoration:none;
	transition: color 1.6s;
	cursor:pointer;
}
a:visited	 {
	color: #dbffb0;
	
}
a:hover		 {
	color: white;
}
a:active	 {
	color: #dbffb0;
}


.no-shadow	{
	text-shadow: 0.0vmin 0.0vmin 0.0vmin rgba(0, 0, 0, 0.0)!important;
}

#footer	{
	
	position: fixed;
	right: -2vmin;
	bottom: 6vmin;
	width: 10vmin;
	height: 10vmin;	
	display: flex;
	align-items: flex-end;
	justify-content: left;
	flex-direction: row
}

#fb	{		
	background-image: url(../images/symb_fb_inverted_white.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;	
	opacity: 0.4;
	cursor: pointer;
	border: 0;
	width: 10vmin;
	height: 10vmin;
	margin-right: 2vmin;
}

#fb:hover	{
	transform: scale(1.15);
	opacity: 1.0;
}

#pint	{		
	background-image: url(../images/symb_pin_inverted_white.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;	
	opacity: 0.4;
	cursor: pointer;
	border: 0;
	width: 10vmin;
	height: 10vmin;
}

#pint:hover	{
	transform: scale(1.15);
	opacity: 1.0;
}


#insta	{		
	background-image: url(../images/symb_insta_inverted_white.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;	
	opacity: 0.4;
	cursor: pointer;
	border: 0;
	width: 10vmin;
	height: 10vmin;
	margin-right: 2vmin
}

#insta:hover	{
	transform: scale(1.15);
	opacity: 1.0;
}












#controls	{
	border: 0vmin solid white;	
	position: fixed;
	
  	top: 4.0vmin;	
  	right: 4vmin;
  	
  
	
	display: flex;
	
	align-items: flex-start;
    justify-content: flex-end;
    align-content: flex-start;
   
	flex-wrap: wrap;
	/*flex-flow: row-reverse wrap;*/
	flex-direction: row;
	
	z-index: 92;
}

@media (orientation: portrait) 
{
	
	#controls
	{
		flex-direction: column-reverse;
		/*width: 10.0vmin;*/
		/*height: 40.0vmin;*/
	}
}







#info	{
	position: absolute;
	bottom: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: nowrap;
	left: calc(50vw - 30vw);
	margin-bottom: 5vh;
	width: 60.0vw;
	height: 21vmin;
	border: 0;
	opacity: 0.75;
	background-image: url(../images/info.svg);
	background-repeat: no-repeat;
	background-size: 41%;
	background-position: bottom;
	text-align: center;
	text-shadow: 0.2vmin 0.2vmin 0.01vmin rgba(0, 0, 0, 0.8);
	font-size: 3.0vmin;
	font-weight: 800;
	text-transform: uppercase;
}



#symb_lang	{

	opacity: 0.4;
	display: inline;
	position: relative;

	cursor: pointer;
	background-image: url(../images/symb_language.svg);
	background-repeat: no-repeat;
	width: 7vmin;
	height: 4vmin;
	background-size: contain;
	background-position: right;
	left: 0vmin;
	bottom: 1.5vmin;
}




.rotate-90	{
	transform: rotate(90deg);
}

.rotate-60	{
	transform: rotate(120deg);
}

.left-right
{
    -webkit-animation: left-right infinite .75s ease-in-out;
       -moz-animation: left-right infinite .75s ease-in-out;
         -o-animation: left-right infinite .75s ease-in-out;
            animation: left-right infinite .75s ease-in-out;
    -webkit-animation-iteration-count: 2;  
       -moz-animation-iteration-count: 2;  
         -o-animation-iteration-count: 2;            
            animation-iteration-count: 2
        
}

@keyframes left-right
{
    0%
    {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    25%
    {
        -webkit-transform: rotate(11deg);
            -ms-transform: rotate(11deg);
             -o-transform: rotate(11deg);
                transform: rotate(11deg);
    }
    50%
    {
        -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
                opacity: 1.0;
    }
    75%
    {
        -webkit-transform: rotate(-11deg);
            -ms-transform: rotate(-11deg);
             -o-transform: rotate(-11deg);
                transform: rotate(-11deg);
    }
    
}


.shake {
  animation: shake 0.52s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000vmin;
}

@media (orientation: portrait) 
{
	
	@keyframes shake {
	  10%, 90% 
	  {
	    	transform: translate3d(0, -1vmin, 0);
	  }
	  
	  20%, 80% {
	    transform: translate3d(0, 1vmin, 0);
	  }
	
	  30%, 50%, 70% {
	    transform: translate3d(0, -2vmin, 0);
	  }
	
	  40%, 60% {
	    transform: translate3d(0, 2vmin, 0);
	  }
	}
}
@media (orientation: landscape) 
{
	
	@keyframes shake {
	  10%, 90% 
	  {
	    	transform: translate3d(-1vmin, 0, 0);
	  }
	  
	  20%, 80% {
	    transform: translate3d(1vmin, 0, 0);
	  }
	
	  30%, 50%, 70% {
	    transform: translate3d(-2vmin, 0, 0);
	  }
	
	  40%, 60% {
	    transform: translate3d(2vmin, 0, 0);
	  }
	}
}


.loadingCircle
{
    width: 10vmin!important;
    height: 10vmin!important;
    margin: 20vmin;
     -webkit-animation: loadingCircle infinite .75s linear;
       -moz-animation: loadingCircle infinite .75s linear;
         -o-animation: loadingCircle infinite .75s linear;
            animation: loadingCircle infinite .75s linear; 

    border: 3vmin solid white;
    border-top-color: transparent;
    border-radius: 100%;
    opacity: 0.6;
    
	display: flex;
	justify-content: center;
	align-items: center;
	flex-strech: 0;
	flex-grow: 0
	
}

.loadingCircle2
{
    width: 15vmin;
    height: 15vmin;
    margin: 0px auto;
    -webkit-animation: loadingCircle infinite .75s linear;
       -moz-animation: loadingCircle infinite .75s linear;
         -o-animation: loadingCircle infinite .75s linear;
            animation: loadingCircle infinite .75s linear;

    border: 4.0vmin solid #fff;
    border-top-color: transparent;
    border-radius: 100%;
    opacity: 0.6;
    
    
  	top: 45vh; left: 0; bottom: 0; right: 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 99;
}

.loadingCircleSmall
{
    width: 2vmin;
    height: 2vmin;
    margin: 0px auto;
    -webkit-animation: loadingCircle infinite .75s linear;
       -moz-animation: loadingCircle infinite .75s linear;
         -o-animation: loadingCircle infinite .75s linear;
            animation: loadingCircle infinite .75s linear;

    border: 2.0vmin solid #96c263;
    border-top-color: transparent;
    border-radius: 100%;
    opacity: 0.6;
    
    
  	top: 45vh; left: 0; bottom: 0; right: 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 99;
	flex-shrink: 0;
}


@keyframes loadingCircle
{
    0%
    {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
             -o-transform: rotate(0);
                transform: rotate(0);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

.appear
{

    -webkit-animation: appear infinite .6s ease-in-out;
       -moz-animation: appear infinite .6s ease-in-out;
         -o-animation: appear infinite .6s ease-in-out;
            animation: appear infinite .6s ease-in-out;
    -webkit-animation-iteration-count: 1;  
       -moz-animation-iteration-count: 1;  
         -o-animation-iteration-count: 1;            
            animation-iteration-count: 1

             /*  opacity: 1.0!important;*/
}

@keyframes appear
{  
	0%
    {
          opacity: 0;
    }
    
    100%
    {
         opacity: 1.0;
    }
    
}  

.appear-light
{
    -webkit-animation: appear infinite .6s ease-in-out;
       -moz-animation: appear infinite .6s ease-in-out;
         -o-animation: appear infinite .6s ease-in-out;
            animation: appear infinite .6s ease-in-out;
    -webkit-animation-iteration-count: 1;  
       -moz-animation-iteration-count: 1;  
         -o-animation-iteration-count: 1;            
            animation-iteration-count: 1
            </* transform-origin: 20% 40%; 2DO z-achse verschieben für sauberere Animation*/
}

@keyframes appear-light
{  
	0%
    {
          opacity: 0;
    }
    
    100%
    {
         opacity: 0.2;
    }
    
}  
.grow-up
{
    -webkit-animation: grow-up infinite .3s ease-in-out;
       -moz-animation: grow-up infinite .3s ease-in-out;
         -o-animation: grow-up infinite .3s ease-in-out;
            animation: grow-up infinite .3s ease-in-out;
    -webkit-animation-iteration-count: 1;  
       -moz-animation-iteration-count: 1;  
         -o-animation-iteration-count: 1;            
            animation-iteration-count: 1
            </* transform-origin: 20% 40%; 2DO z-achse verschieben für sauberere Animation*/
}

@keyframes grow-up
{  
	0%
    {
          transform: scale(0,0);
    }
    
    100%
    {
          transform: scale(1,1);
    }
    
}  

.shrink-down
{
    -webkit-animation: shrink-down infinite .3s ease-in-out;
       -moz-animation: shrink-down infinite .3s ease-in-out;
         -o-animation: shrink-down infinite .3s ease-in-out;
            animation: shrink-down infinite .3s ease-in-out;
    -webkit-animation-iteration-count: 1;  
       -moz-animation-iteration-count: 1;  
         -o-animation-iteration-count: 1;            
            animation-iteration-count: 1;
            transform: scale(0,0);           
            
            </* transform-origin: 20% 40%; 2DO z-achse verschieben für sauberere Animation*/
}

@keyframes shrink-down
{  
	0%
    {
          transform: scale(1,1);
    }
    
    100%
    {
          transform: scale(0,0);         
    }
    
}


.folder	{
	width: 31vmin;
	height: 31vmin;
	border-radius: 19vmin;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 4vmin;
	padding: 2vmin;		
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-grow: 0;
	flex-shring: 1;
	overflow: hidden;
	font-weight: 700;
	/* letter-spacing: 0.02; */
	font-size: 4.0vmin;
	text-transform: uppercase;
	line-height: 4vmin;
	text-shadow: 0.2vmin 0.2vmin 0.05vmin rgba(0, 0, 0, 0.9);
	flex-direction: column;
	box-shadow: 1vmin 1vmin 4.5vmin 0vmin rgba(0, 0, 0, 1.0);
}

.folder-small	{
	font-weight: 700;
	font-size: 2.0vmin;
	line-height: 3vmin;
	margin-bottom: 3vmin;
	text-shadow: 0.2vmin 0.2vmin 0.05vmin rgba(0, 0, 0, 0.0);
}

.folder:hover
{
	transform: scale(1.15,1.15) rotate(15deg);
	box-shadow: 1vmin 1vmin 4.5vmin 0vmin rgba(0, 0, 0, 0.3);
}

.folder	p	{

	background-color: rgba(0,0,0,0.4);
	padding: 0.6vmin;
}

.folder-blurred-background	{
	display: none;
	background-size: 54vmin;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	filter: blur(3px);
	transform: scale(1.03);
}
.mainfolder	{
-webkit-box-shadow: 0px 0px 34px 4px rgba(146,229,49,1)!important;
-moz-box-shadow: 0px 0px 34px 4px rgba(146,229,49,1)!important;
box-shadow: 0px 0px 34px 4px rgba(146,229,49,1)!important;
}


.box	{
	
	background: rgba(0,0,0,0.70);	

  	top: 0; left: 0; bottom: 0; right: 0;

	padding: 5vmin;
	/* padding-top: 17vmin; */
	opacity: 0;
	display: flex;
	justify-content: center;
	align-items: inherit;
	position: fixed;	
	flex-wrap: wrap;
	align-content: space-evenly;
	
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 36px -6px rgba(0,0,0,0.71);
	-moz-box-shadow: 0px 0px 36px -6px rgba(0,0,0,1.71);
	box-shadow: 0px 0px 36px -6px rgba(0,0,0,0.71);
	flex-direction: row;
	z-index: 91;
}

@media (orientation: portrait) 
{
	
	.box
	{
		/* flex-direction: column; */
		/* padding-top: 18vmin !important; */
		align-content: center;
		
		
		/*width: 10.0vmin;*/
		/*height: 40.0vmin;*/
	}
}



.container	{	
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: center;	
	flex-direction: column;
	width: 80vmin;
}

.con-title	{	
	width: 100%;
	/* margin-top: -5vmin; */
	justify-content: center;
	flex-direction: row;
}


#login-form	{
	width: 80vmin;
	height: 30vmin;		
}

.login-form-background	
{
	
	 background-image: url(../images/symb_key_light.svg); 
	 background-repeat: no-repeat;
	 background-size: 38vmin;
	 background-position: center center;

	 width: 100%; height: 100%;
	 position: absolute;
	 z-index: 2;	
}


.information-background	
{
	
	 background-image: url(../images/symb_info_light.svg); 
	 background-repeat: no-repeat;
	 background-size: 38vmin;
	 background-position: center center;

	 width: 100%; height: 100%;
	 position: absolute;
	 z-index: 2;	
}


.msg-box	{

	background: radial-gradient(ellipse at center, rgba(177,237,104,1) 0%,rgba(139,178,92,1) 100%) ; 
	z-index: 93;
	width: 90vmin;
	min-height: 30vmin;	
	border-radius: 4vmin;
	align-self: center;	
	position: fixed;	
	text-align: center;		
	display: flex;	
	justify-content: left;
	align-items: center;	
	box-shadow: 1vmin 1vmin 4.5vmin 0vmin rgba(0, 0, 0, 1.0);
}
.msg-box	div	{
	z-index: 3;
} 

#cRemoveFromCart	{
	position:absolute; 
	left: -1vmin; 
	bottom: -5vmin; 
	width: 6vmin; 
	height: 6vmin; 
	opacity: 1.0!important; 
	background-image: url(../images/symbol_delete.png);
}

.form-gen	{
	display: flex;
	flex-wrap: wrap;	
	align-content: flex-start;	
	justify-content: center;	
	align-items: center;
}

#cart-content p	{
	width: 90%;
	margin: 1vmin;
	flex-basis: 70vw;
}

#cart-drag	{
	display: flex;	
	flex-direction: column;	
	height: 80vh;	
	justify-content: center;	
	width: 85vw;
}

#cart-drag2	{
	display: flex;	
	flex-direction: column;	
	height: auto;	
	justify-content: center;	
	width: 85vw;
}


.video-container	{
	position: absolute;
	overflow: hidden;
	width: 100vw; 
	height: 100vh;
	left:0;
	top:0;
}



.fullscreen-video	{
	border: 0; 
	width: 100vw; 
	object-fit:cover;	
}

.blurred-and-greyscaled	{
	filter: grayscale(1);
	/* transform: scale(1.75); */
}

@media (max-aspect-ratio: 16/9)	
{
 	.fullscreen-video	{
		height: 100%; 
		width: auto;	 
	}	 
	
}

@media (orientation: portrait) 
{
	.fullscreen-video	{
		border: 0; 
		/* width: auto;  */
		height: 100vh;		
		left: -100vw;
		width: 177.6vh;
		position: absolute;
	 	
	}
}

.video-grey	{
	filter: grayscale(1);
}

.video-blurred	{
	filter:  blur(5px);
}

.video-blurred-grey	{
	filter:  grayscale(1) blur(5px);
}

#agbs	p	{
	margin: 2vmin;	
	
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border:none;
  border-radius: 0;
} 

select {
	margin: 1vmin 2vmin 2vmin 2vmin;
	height: 6vmin;
	border: 0px solid #e6e6e6;
	border-radius: 3vmin;
	padding: 0.2vmin 1vmin 0.2vmin 1vmin;
	
	font-family: 'Open Sans';
	font-size: 3.0vmin;

	box-shadow: inset 0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
	background: white no-repeat right;
	background-image: url(images/select.png);


	transition:.3s;	
	
	background-color: white;
	background-image: url(../images/symb_select.svg);
	background-position: right;
	background-repeat: no-repeat;
	background-size: contain!important;	
	
	display: flex;
	flex-shrink: 1;
	flex-basis: 20%;
	flex-grow: 1;
}

select:hover {

}

/* hide browser-styling (arrow) in IE10 */
select::-ms-expand {
  display:none;
}

.lt-ie10 select {
    background-image: none;
}

option {
  background: white;
  border-bottom:1px dashed silver;
  padding:1.5em 1em .3em 1em;
  color: #96c263;
  height: 40px
}

.select-list {
    width: 100%;
    height: 12vmin;
    border: 0px solid #bbb;
    border-radius: 2.5vmin;
    padding: 1vmin;
    margin-top: 1vmin;
    margin-bottom: 2vmin;
    -webkit-box-shadow: inset 0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
    box-shadow: inset 0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
    background-color: white;
    background-image: none;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain !important;
    font-size: 1.8vmin;
    font-weight: 400;
    font-family: "Open Sans";
    text-align: center;
    cursor: pointer;
    flex-basis: auto;

}
.select-list option {
background: transparent;	
	}
	
#element64	{
	width: 100%;
}

input[type='text'],input[type='password']	
{

	height: 6vmin;
	border: 0px solid #bbb;
	border-radius: 3vmin;
	padding: 0.2vmin 1vmin 0.2vmin 1vmin;

	box-shadow:        inset 0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
	
	background-color:white;
	background-position: right;
	background-repeat: no-repeat;
	background-size: contain!important;	
	
	font-family: "Open Sans";
	text-align: center;
	cursor: pointer;
	font-size: 3vmin;
	
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.3s;	
	

	margin: 1vmin 2vmin 2vmin 2vmin;
	
	display: flex;
	flex-shrink: 1;
	flex-basis: 20%;
	flex-grow: 2;

}


input[type="file"] {
	display: flex;
    flex-basis: 20%;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    flex-basis: max-content;
    margin: 1vmin 2vmin 2vmin 2vmin;
    flex-grow: 2;
    flex-shrink: 1;
 }


.file-upload	{
    display: flex;
    flex-basis: auto;
    height: 13vmin;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.attachments	{
	display: flex;
	flex-basis: 20%;
	height: 7vmin;
	justify-content: flex-start;
	align-items: center;
	overflow: hidden;
}

.file-upload-thumbnail	{
width: 13vmin;
height: 13vmin;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
border: 1vmin solid transparent;

}

.file-upload-thumbnail:hover	{
transform: scale(1.1);
background-color: rgba(255,255,255,.5);
}

.small-button
{
	position: initial;

	width: 6vmin;
	height: 6vmin;
	opacity: 1.0 !important;
	background-image: url(../images/symb_delete2.svg);
	margin: 1vmin;
	padding: 0.0vmin;
	float: right;
	font-size: 5.7vmin;
	text-align: center;
	cursor: pointer;
	border-radius: 7.0vw;
	box-shadow: 0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.0);
	background-color: #4f87bd;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 60%;
	animation: grow-up infinite .5s ease-in-out;
	   animation-iteration-count: infinite;
	animation-iteration-count: 1;
	flex-shrink: 0;
	flex-grow: 0;

}

#cCloseBoxWindow	{
	background-image: url(../images/symbol_delete.png);	
}


#order-frame	{
	width: 42vmin;
	height: 100vh;
	position: absolute;
	left: -42vmin;
	top: 0;
	 /*background: rgba(0,0,0,0.65);
	background: #7d7e7d; Old browsers */
	background: rgba(0,0,0,0.65);
	background: -moz-radial-gradient(center, ellipse cover, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	-webkit-box-shadow: 0 0 2.0vmin 2.0vmin rgba(0,0,0,1);
	-moz-box-shadow: 0 0 2.0vmin 2.0vmin rgba(0,0,0,1);
	box-shadow:inset  -4vmin 0 5.0vmin -3.0vmin rgba(0,0,0,1);
	

}

#order-frame-slide
{
	position: relative;
	margin-top: 25vmin;
	left: 3.8vmin;
	width: 45vmin;
	height: 18vh;
	background-size: contain!important;	
	
}

#order-frame-content	{
	margin: 0 2.5vmin 0 2.5vmin;
	display: flex;
	flex-wrap: wrap;	
}

#order-frame-content	p	{
	flex-basis: 100%;
	flex-grow: 1;
	justify-content: flex-end;
	display: flex;
}

#order-frame-content	select	{
	font-size: 2.3vmin;
	padding: 1vmin;

}
.round-form-button
{
	margin-top: 1vmin;
	margin-bottom: 2vmin;
	padding: 0.2vmin;
	font-size: 5.7vmin;
	text-align: center;
	cursor: pointer;
	border-radius: 2.5vmin 0 0 2.5vmin;
	width: 9vmin;
	height: 7vmin;
	background-color: #96c263;
	background-position: center center;
	background-size: 50%;
	background-repeat: no-repeat;
	
	box-shadow:        inset 0.5vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
	text-shadow: 0;
	
	flex-basis: 20%;
	display: flex;

}

.rfb-left	{
	background-image: url(../images/symb_sub.svg);
	margin-left: 2vmin;
}


.rfb-right	{
	background-image: url(../images/symb_add.svg);
	border-radius: 0 2.5vmin 2.5vmin 0;
	box-shadow:         inset -0.2vmin 0.5vmin 0.3vmin 0 rgba(0, 0, 0, 0.4);
	margin-right: 2vmin;
}


#order_count	{
	margin-top: 1vmin; 	
	border-radius: 0; 
	height: 7vmin; 
	font-size: 3vmin; 
	margin: 1vmin 0 1vmin 0; 

	flex-basis: auto;
	width: 4vmin;
	display: flex;
	flex-grow: 1;
}

#mail-impressum	{
	
	font-size: small; color: silver
}