@font-face {
		font-family: hotel;
		src: url(font/Geometr415.woff);
	}		
	
	
    .slider {
        width: 80%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 2px;
    }

    .slick-slide img {
      height: 200px;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
 
    }

	
	.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}
.columnb {
    -ms-flex: 50%; /* IE10 */
    flex: 50%; 
    max-width: 50%;
    padding: 0 4px;
}
.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
    .columnb {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }	
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
    .columnb {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }	
}







#Gallery {
  margin-top: 30px;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-item { 
  float: left;
  position: relative;
  width: 20%;
  padding-bottom: 14%;
}
.gallery-item a {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  overflow: hidden;
}
.gallery-item a img {
  width: 100%;
}

@media only screen and (max-width:480px) { 
    /* Smartphone view: 1 tile */
    .gallery-item {
        width: 100%;
        padding-bottom: 100%;
    }
}
@media only screen and (max-width:650px) and (min-width:481px) { 
    /* Tablet view: 2 tiles */
    .gallery-item {
        width: 50%;
        padding-bottom: 33.3%;
    }
}
@media only screen and (max-width:1050px) and (min-width:651px) { 
    /* Small desktop / ipad view: 3 tiles */
    .gallery-item {
        width: 33.3%;
        padding-bottom: 23%;
    }
}
@media only screen and (max-width:1290px) and (min-width:1051px) { 
    /* Medium desktop: 4 tiles */
    .gallery-item {
        width: 25%;
        padding-bottom: 17%;
    }
}



/* Directly from:
http://photoswipe.com/latest/photoswipe.css
*/
body.ps-active 
{
	-webkit-text-size-adjust: none;
}
body.ps-active * 
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}
body.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */
div.ps-document-overlay 
{
	background: #000;
}


/* Viewport */
div.ps-viewport 
{
	background: #000;
	cursor: pointer;
}


/* Zoom/pan/rotate layer */
div.ps-zoom-pan-rotate{
	background: #000;
}


/* Slider */
div.ps-slider-item-loading 
{ 
	background: url(http://abvichico.com/images/photoswipe/photoswipe-loader.gif) no-repeat center center; 
}


/* Caption */
div.ps-caption
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
}

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
}

div.ps-caption-content
{
	padding: 13px;
}


/* Toolbar */
div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res retina display */
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-webkit-background-size: 176px 88px;
		background-image: url(http://abvichico.com/images/photoswipe/photoswipe-icons@2x.png);
	}
}



	.sidenav {
	  height: 100%;
	  width: 0;
	  
	  position: fixed;
	  z-index: 9999;
	  top: 0;
	  left: 0;
	  background-image: linear-gradient(#ffffff, #cccccc);
	  
	  overflow-x: hidden;
	  transition: 0.5s;
	  padding-top: 60px;
	}

	.sidenav a {
	  padding: 8px 8px 8px 32px;
	  text-decoration: none;
	  font-size: 25px;
	  color: #000000;
	  display: block;
	  transition: 0.3s;
	}

	.sidenav a:hover {
	  color: #faa700;
	   text-decoration: none;
	}

	.sidenav .closebtn {
	  position: absolute;
	  top: 0;
	  right: 25px;
	  font-size: 36px;
	  margin-left: 50px;
	}
	
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
  margin: auto;
  padding: 0;
  border: 3px solid #00A0E3;
  width: 60%;
  max-width: 500px;
  height: 50%;
  top:100px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
  
}
.modal-circle {
	 border-radius: 100%;
	 width: 200px;
	 height: 200px;
	 background-color: #00A0E3;
	
	background: linear-gradient(207deg, rgba(27,185,255,1) 0%, rgba(0,49,121,1) 80%);	
	 position: absolute;
	 left: 50% ;
	 margin-left: -100px;
	 top: -100px;
	 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}	

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:100px; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:100px; opacity:1}
}

/* The Close Button */
.close {
  color: #00A0E3;;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-right: 10px;
  position: relative;
}

.close:hover,
.close:focus {
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
}

 

.modal-body {
	padding: 5%;
	margin-top: 120px;
	font-family: Roboto-Thin;
	font-weight: 900;
	padding:20px;
 	font-size:22px;
	text-align: center;
 	color: #000000;
	text-transform: uppercase;
}

.modal_gomb {
	position: absolute;
	font-family: Roboto-Thin;
	font-weight: 900;
	padding:2%;
	width:20%;
	height: 60px;
	font-size:18px;
	background-color:#00A0E3;
	color: #ffffff;
	text-align: center;
	bottom: 30px;
	 
	border: 1px solid #00A0E3;
	transition: 0.3s;
	left: 50%;
	margin-left: -11%;
}

.modal_gomb:hover {
	background-color:#eeeeee;
	color: #00A0E3;
	transform: scale(0.9);	
} 

		@import url('fonts/family=Merriweather&display=swap');
		@import url('fonts/family=Josefin+Sans&display=swap');
		html {
		  scroll-behavior: smooth;
		   overflow-x: hidden;
		}

		h1, h3, h4, h5, h6 {
			 
			font-weight: 900;
			color: #222222; 
		}
		h2 {
			 font-weight: 500;
			font-size:2em;
			color: #ffffff;
			 
		}
		
		a {
		color:#00aae3;
		text-decoration:none;
		}
/* The Close Button */
.close2 {
  color: #00A0E3;;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-right: 10px;
  position: relative;
}

.close2:hover,
.close2:focus {
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
}

 

.modal2-body {
	padding: 5%;
	margin-top: 120px;
	font-family: Roboto-Thin;
	font-weight: 900;
	padding:20px;
 	font-size:22px;
	text-align: center;
 	color: #000000;
	text-transform: uppercase;
}

.modal2_gomb {
	position: absolute;
	font-family: Roboto-Thin;
	font-weight: 900;
	padding:2%;
	width:20%;
	height: 60px;
	font-size:18px;
	background-color:#00A0E3;
	color: #ffffff;
	text-align: center;
	bottom: 30px;
	 
	border: 1px solid #00A0E3;
	transition: 0.3s;
	left: 50%;
	margin-left: -11%;
}

.modal2_gomb:hover {
	background-color:#eeeeee;
	color: #00A0E3;
	transform: scale(0.9);	
} 

/* width */
		::-webkit-scrollbar {
		  width: 8px;
		}

/* Track */
		::-webkit-scrollbar-track {
		  box-shadow: inset 0 0 20px #fff; 
		  border-radius: 2px;
		}
 
/* Handle */
		::-webkit-scrollbar-thumb {
		  background-image: linear-gradient(#40ff00, #1c7000);
		  border-radius: 10px;
		}

/* Handle on hover */
		::-webkit-scrollbar-thumb:hover {
		  background-image: linear-gradient(#40ff00, #1c7000);
		}


/*  products start */
		.products {
		  width: 100%;
		  height: 100%;
		  left: -100%;
		  position: fixed;
		  z-index:1000;
		  background-color: white;
		  overflow-y: scroll;
		  -webkit-animation-name: examplesse; /* Safari 4.0 - 8.0 */
		  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
		  -webkit-animation-fill-mode: forwards;
		 
		  animation-name: examplesse;
		  animation-duration: 1s;
		  animation-fill-mode: forwards;
		 
		}
		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes examplesse {
		 
		  from {left: -100%;}
		  to {left: -100%;}
		}

/* Standard syntax */
		@keyframes exampless {
		 
		  from {left: -100%;}
		  to {left: -100%;}
		}

		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes exampless {
		 
		  from {left: -100%;opacity: 0;}
		  to {left: 0;opacity: 1;}
		}

		/* Standard syntax */
		@keyframes exampless {
		 
		  from {left: -100%;}
		  to {left: 0;}
		}

		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes examplessback {
		  from {left: 0;opacity: 1;}
		  to {left: -100%;opacity: 0;}
		}

/* Standard syntax */
		@keyframes examplessback {
		  from {left: 0;opacity: 1;}
		  to {left: -100%;opacity: 0;}
		}

		.product {
			position: relative;
			float: left;
			width: 10%;
			 
			margin-top: 1300px;
			z-index: 2; 
			 
			 
		}	
		.product-info {
			position: relative;
			width: 46%;
			 
			float: right; 
			text-align: center;
		}	
		.product-form {
			position: relative;
			float: left;
			width: 50%;
			min-width: 400px;
			z-index: 2; 
			margin: auto;
 
		}	
		.termek-neve {
			text-align: left;
			color:  #ff0000;
		}		
/*  products end */



/*  termekablak start */
		.productwindow {
		  width: 100%;
		  height: 100%;
		  left: -100%;
		  position: fixed;
		  z-index:1100;
		  background-color: white;
		  overflow-y: scroll;
		  -webkit-animation-name: examplesse; /* Safari 4.0 - 8.0 */
		  -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
		  -webkit-animation-fill-mode: forwards;
		 
		  animation-name: productwindowexamplesse;
		  animation-duration: 1s;
		  animation-fill-mode: forwards;
		 
		}
		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes productwindowexamplesse {
		 
		  from {left: -100%;}
		  to {left: -100%;}
		}

		/* Standard syntax */
		@keyframes productwindowexampless {
		 
		  from {left: -100%;}
		  to {left: -100%;}
		}

		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes productwindowexampless {
		 
		  from {left: -100%;opacity: 0;}
		  to {left: 0;opacity: 1;}
		}

		/* Standard syntax */
		@keyframes productwindowexampless {
		 
		  from {left: -100%;}
		  to {left: 0;}
		}

		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes productwindowexamplessback {
		  from {left: 0;opacity: 1;}
		  to {left: -100%;opacity: 0;}
		}

		/* Standard syntax */
		@keyframes productwindowexamplessback {
		  from {left: 0;opacity: 1;}
		  to {left: -100%;opacity: 0;}
		}

/*  termekablak end */

		.termekek {
			width: 31%; 
			height: 300px;
			position: relative;
			overflow: hidden;
			display: inline-block;
			border-radius: 8px; 
			padding: 0px 0px 0px 0px;
			margin: 0.5%;
			border: 1px solid #1c7000;
			 
		}
		.termekek-image {
		  background-color: #cccccc;
		  width: 100%;
		  height: 100%;
		  position: absolute;
		  
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		   
		   
		  transition: 0.3s;
		}

		.termekek-text {
		  text-align: center;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  color: white;
		}

		.termekek:hover .termekek-image {
			 
			  transform: scale(1.2);
			 
		}

 
		
		
		
		.rombusz {
		position:absolute;
		top:0;
		left:-30%;
		height:100%;
		width:200%;
		background-image: url('images/admin/back.svg');
		background-repeat: no-repeat, no-repeat;	
		}
		
		.text1 {
		position:absolute;
		top:16%;
		left: 20px;
		width: 35%;
		}

		.text2 {
		position:absolute;
		bottom:30px;
		left: 20px;
		width: 35%;
		}

		.home {
			width: 60%;
			min-width: 360px;
			margin: auto auto;
			clear: both;
			 
		} 
		
		.textboxa {
			width:50%;
			font-size: 16px;
			float: left; 
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		}

		.textboxb {
			width:50%;
			font-size: 16px;
			float: left; 
			padding: 0px 0px 0px 45px;
			font-family: 'Josefin Sans', sans-serif;
		}		
		.textboxaa {
			width:33%;
			font-size: 16px;
			float: left; 
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		}

		.textboxbb {
			width:33%;
			font-size: 16px;
			float: left; 
			padding: 0px 0px 0px 45px;
			font-family: 'Josefin Sans', sans-serif;
		}
		.textboxcc {
			width:30%;
			font-size: 18px;
			float: left; 
			padding: 0px 15px 0px 15px;
			font-family: 'Josefin Sans', sans-serif;
			text-transform: uppercase;
		}

		.home-intro {
			font-size: 55px;
			text-align: center;
			padding-bottom: 45px 45px 45px 45px;
		}
		

		.sliderb {
		  height: 80px;
		  font-size: 30px;
		 
		  overflow: hidden;
		 text-align: center;
		 width: 100%;
		}

		 .sliderb p {
		  margin-top: 4px;
		  padding-bottom: 30px;
		  line-height: 108%;
		  
		 
		}

		.sliderb div {
		  animation: slide 20s 1s infinite;
		}

		@keyframes slide {
			0% { margin-top: 4px; }
		   10% { margin-top: -80px; }
		   20% { margin-top: -160px; }
		   30% { margin-top: -240px; }
		   40% { margin-top: -320px; }   
		   50% { margin-top: -390px; }
		   60% { margin-top: -460px; }
		   70% { margin-top: -540px; }
		   80% { margin-top: -610px; }
		 
		  100% { margin-top: 4px; }
		}
	
		@media only screen and (max-width:990px) {	
		.product {
			position: relative;
			float: left;
			width: 50%;
			min-width: 320px;
			z-index: 2; 
			margin-bottom: -130px;
			top: -170px;
		}	
		.product-info {
			position: relative;
			width: 46%;
			min-width: 400px;
			float: right; 
			text-align: center;
		}			
		  .termekek {
			width: 50%;

		  }
		.home {
			width: 70%;
			 
			margin: auto auto;
			clear: both;
			 
		}
		.textboxa {
			width:50%;
			font-size: 16px;
			float: left; 
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		}

		.textboxb {
			width:50%;
			font-size: 16px;
			float: left; 
			padding: 0px 0px 0px 25px;
			font-family: 'Josefin Sans', sans-serif;
		}		
		.textboxcc {
			width:33%;
			font-size: 18px;
			float: left; 
			padding: 0px 0px 0px 45px;
			font-family: 'Josefin Sans', sans-serif;
			text-transform: uppercase;
		}
		}
		
		@media only screen and (max-width:820px) {
		.product {
			position: relative;
			float: left;
			width: 50%;
			min-width: 400px;
			z-index: 2; 
			margin-bottom: -130px;
			top: -170px;
		}	
		.product-info {
			position: relative;
			width: 46%;
			min-width: 350px;
			float: right; 
			text-align: center;
		}		
				.termek-neve {
			text-align: center;
 
		}
		  .home {
			width: 80%;
			 
			margin: auto auto;
			clear: both;
			 
		  }
		  .textboxa {
			width:90%;
			font-size: 16px;
	
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		  }

		  .textboxb {
			width:90%;
			font-size: 16px;
	
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		  }
		.textboxcc {
			width:90%;
			font-size: 18px;
			float: left; 
			padding: 0px 0px 0px 45px;
			font-family: 'Josefin Sans', sans-serif;
			text-transform: uppercase;
		}
		}
		
		@media only screen and (max-width:620px) {
		  /* For mobile phones: */
			.product {
				position: relative;
				margin: auto;
				width: 100%;
				z-index: 2; 
				margin-bottom: 30px;
				top: 10px;				
			}			
			.product-info {
				position: relative;
				width: 50%;
				margin: auto;
			}
		.termek-neve {
			text-align: center;
 
		}	
		  .kepszoveg {max-width:330px;}
		  .rombusz {
			left:0px;
			width:500%;  
		  }
		  
		  .text1 {
			width:90%;
		  }		  
		  
		  .text2 {
			width:90%;
		  }
		  
		  .termekek {
			width: 80%;
			margin: 20px auto 20px auto;
		  }
		  
		  		
		  .home {
			width: 80%;
			 
			margin: auto auto;
			clear: both;
			 
		  }
		  .textboxa {
			width:100%;
			font-size: 16px;
	
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		  }

		  .textboxb {
			width:100%;
			font-size: 16px;
	
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		  }
		.home-intro {
			font-size: 35px;
			text-align: center;
			padding-bottom: 45px 45px 45px 45px;
		}		  
		}
		
 
 		@media only screen and (max-width:520px) {
			.product {
				position: relative;
				margin: auto;
				margin-top: 100px;
				width: 80%;
				z-index: 2; 
				margin-bottom: 30px;
				top: 10px;				
			}			
			.product-info {
				position: relative;
				width: 50%;
				margin: auto;
			}
		.termek-neve {
			text-align: center;
			color: #ddffee;
 
		}
		  /* For mobile phones: */
		.kepszoveg {max-width:400px;}
		.termekek-text {
		  text-align: center;
		  position: absolute;
		  top: 40%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  color: white;
		  font-size:15px;
		  font-family: 'Josefin Sans', sans-serif;
			 
		}
		
		  .textboxa {
			width:100%;
			font-size: 16px;
	
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		  }

		  .textboxb {
			width:100%;
			font-size: 16px;
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;			
			}
		  .rombusz {
			left:0px;
			width:500%;  
		  }
		  
		  .text1 {
			width:80%;
		  }		  
		  
		  .text2 {
			width:80%;
		  }
		  
		  .termekek {
			width: 70%;
			margin: 20px auto 20px auto;
		  }
		  
		  		
		  .home {
			width: 80%;
			 
			margin: auto auto;
			clear: both;
			 
		  }
 
		.home-intro {
			font-size: 35px;
			text-align: center;
			padding-bottom: 45px 45px 45px 45px;
		}		  
		}
		

 		@media only screen and (max-width:350px) {
			.product {
				position: relative;
				margin: auto;
				width: 90%;
				z-index: 2; 
				margin-bottom: 30px;
				top: 10px;				
			}			
			.product-info {
				position: relative;
				width: 100%;
				margin: auto;
			}		
					.termek-neve {
			text-align: center;
 
		}
		  /* For mobile phones: */
		.kepszoveg {max-width:300px;}
		.termekek-text {
		  text-align: center;
		  position: absolute;
		  top: 40%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  color: white;
		  font-size:15px;
		  font-family: 'Josefin Sans', sans-serif;
			 
		}
		
		  .textboxa {
			width:100%;
			font-size: 16px;
	
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;
		  }

		  .textboxb {
			width:100%;
			font-size: 16px;
			padding: 0px 0px 0px 0px;
			font-family: 'Josefin Sans', sans-serif;			
			}
		  .rombusz {
			left:0px;
			width:500%;  
		  }
		  
		  .text1 {
			width:80%;
		  }		  
		  
		  .text2 {
			width:80%;
		  }
		  
		  .termekek {
			width: 70%;
			margin: 20px auto 20px auto;
		  }
		  
		  		
		  .home {
			width: 80%;
			 
			margin: auto auto;
			clear: both;
			 
		  }
 
		.home-intro {
			font-size: 35px;
			text-align: center;
			padding-bottom: 45px 45px 45px 45px;
		}		  
		}
		
 		.menu {
			width: 100%;
			height: 90px;
			color: #ffffff;
			position: fixed;
			z-index: 500;
			top: 0;
		}
		
		.menuszoveg {
			color: #ffffff;
			padding: 10px;
		}			
		html:not([data-scroll='0']) .menu {
 
 
					color: #ffffff;
		  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
		  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
		  animation-name: example;
		  animation-duration: 4s;		 
		  animation-fill-mode: both;
				}
				
				html:not([data-scroll='0']) .menuszoveg {
					color: #000000;
				}
		/* Safari 4.0 - 8.0 */
		@-webkit-keyframes example {
		 
		  from {background-color:rgba(255, 255, 255, 0);box-shadow: 0 0 0.5em rgba(0, 0, 0, 0);}
		  to {background-color:rgba(255, 255, 255, 1);box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);} 
		}



		 
		 
		 .example_f span {
		   cursor: pointer;
		   display: inline-block;
		   position: relative;
		   transition: 0.4s;
		   
		 
		   
			background: linear-gradient(to right, #67b26b, #4ca2cb) !important;
			border-radius:4px;
			border:1px solid #18ab29;
			display:inline-block;
			cursor:pointer;
			color:#ffffff;
			font-family:Arial;
			font-size:18px;
			padding:17px 56px;
			text-decoration:none;
			text-shadow:0px 1px 0px #2f6627;   
		  
		 }
		 .example_f span:after {
		   content: '\00bb';
		   font-size: 30px;
		   position: absolute;
		   opacity: 0;
		   top: 14px;
		   right: 30px;
		   transition: 0.5s;
		 }
		 .example_f:hover span {
		   padding:17px 76px;
		   border-radius:35px;
			
		 }
		 .example_f:hover span:after {
		   opacity: 1;
		   right: 30px;
		 }	
		 
		 
		  

		.back_outer {
		  position: relative;
		  margin: auto;
		  width: 50px;
		  margin-top: 5px;
		  margin-right: 5px;
		  cursor: pointer;
		}

		.back_inner {
		  width: inherit;
		  text-align: center;
		}

		label { }

		.backi {
		  font-size: .8em; 
		  line-height: 4em;
		  text-transform: uppercase;
		  color: #000;
		  transition: all .3s ease-in;
		  opacity: 0;
		  cursor: pointer;
		}

		.back_inner:before, .back_inner:after {
		  position: absolute;
		  content: '';
		  height: 2px;
		  width: inherit;
		  background: #000000;
		  left: 0;
		  transition: all .5s ease-in;
		}

		.back_inner:before {
		  top: 50%; 
		  transform: rotate(45deg);  
		}

		.back_inner:after {  
		  bottom: 50%;
		  transform: rotate(-45deg);  
		}

		.back_outer:hover label {
		  opacity: 1;
		}

		.back_outer:hover .back_inner:before,
		.back_outer:hover .back_inner:after {
		  transform: rotate(0);
		}

		.back_outer:hover .back_inner:before {
		  top: 0;
		}

		.back_outer:hover .back_inner:after {
		  bottom: 0;
		}

		/* the interesting 3D scrolling stuff */
		#titles
		{
			color: #ff6;
			position: absolute;
			width: 60%;
			height: 50em;
			bottom: 0;
			left: 20%;
			margin-left: 0;
			font-size: 350%;
			text-align: justify;
			overflow: hidden;
			-webkit-transform-origin: 50% 100%;
			-moz-transform-origin: 50% 100%;
			-ms-transform-origin: 50% 100%;
			-o-transform-origin: 50% 100%;
			transform-origin: 50% 100%;
			-webkit-transform: perspective(300px) rotateX(25deg);
			-moz-transform: perspective(300px) rotateX(25deg);
			-ms-transform: perspective(300px) rotateX(25deg);
			-o-transform: perspective(300px) rotateX(25deg);
			transform: perspective(300px) rotateX(25deg);
		}

		 

		#titles p
		{
			text-align: justify;
			margin: 0.8em 0;
		}

		#titles p.center
		{
			text-align: center;
		}

		#titles a
		{
			color: #ff6;
			text-decoration: underline;
		}

		#titlecontent
		{
			position: absolute;
			top: 50%;
			-webkit-animation: scroll 100s linear 0s infinite;
			-moz-animation: scroll 100s linear 0s infinite;
			-ms-animation: scroll 100s linear 0s infinite;
			-o-animation: scroll 100s linear 0s infinite;
			animation: scroll 100s linear 0s infinite;
		}

		.logollplastic  {
 			position: relative;
			top: 50%;
			margin: auto auto;
			opacity: 0;
			-webkit-animation: lp  10s infinite; /* Safari 4.0 - 8.0 */
			animation: lp  10s infinite;
			animation-delay: 4s;
	 
		}
 

		@keyframes lp {
			
			0% {opacity: 0;}
			50% {opacity: 1;}
			70% {opacity: 1;}
			100% {opacity: 0;}
		}			
	
 		 
			
	

		/* animation */
		@-webkit-keyframes scroll {
			0% { top: 100%; }
			100% { top: -170%; }
		}

		@-moz-keyframes scroll {
			0% { top: 100%; }
			100% { top: -170%; }
		}

		@-ms-keyframes scroll {
			0% { top: 100%; }
			100% { top: -170%; }
		}

		@-o-keyframes scroll {
			0% { top: 100%; }
			100% { top: -170%; }
		}

		@keyframes scroll {
			0% { top: 100%; }
			100% { top: -170%; }
		}
		
	.float {
		position: relative;
		top:45%;
		width:100%;
		text-align: center;
		margin: auto;
		opacity: 0;
		animation: float_9077 100s linear infinite;
		transform-origin: 50% 50%;
		animation-delay: 52s;
	}

	@keyframes float_9077 {
		0% { opacity: 0; }
		5.6129% { opacity: 1; }
		51.22581% { opacity: 1;) }
		54.22581% { opacity: 0;) }
		100% { opacity: 0;) }
	}


	.mutebutton{
		background:url(images/mute.png) no-repeat;
		cursor:pointer;
		border:none;
		width:60px;
		height:60px;
		object-fit: fill;
		background-size: 60px;
		outline: none;
	}


	myButton:active {
		 background:url(images/mute.png) no-repeat;
		 mutegomb.style.outline = "none";
	}