body, html {
    height: 100%;
    margin: 0;
	overflow: hidden;
	font-family: "Courier New", Courier, mono;
	font-family: "Tw Cen MT Condensed";
	font-family: "Arial";
	font-size: 14px;
	font-style: normal;
	color: #FFFFFF;
}
.kiemel {
	
	
	
}
.bg {
    /* The image used */
    background-image: url("frame/hatter.jpg");
    /* Full height */
    height: 100%; 
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


#menu {
	position: absolute;
	z-index: 7;
	bottom: -5px;
	left: -25px;
	width: 150px;
	
}

#nyelv-en, #nyelv-de, #nyelv-hu  {
	position: absolute;
	width: 30px;
	height: 20px;
	text-align:center;
	font-weight: bold;
	border: 2px solid black;
	z-index: 10;
	color: #000;
}
#fej {
	position: absoulute;
	z-index: 15;
	margin-left: 2%;
	padding-top: 2%;
	width: 96%;
	height: 11%;

}
#nyelv-en:hover, #nyelv-de:hover, #nyelv-hu:hover { 
    background-color: yellow;
}
#nyelv-en {
	-ms-transform: rotate(350deg); /* IE 9 */
	-webkit-transform: rotate(350deg); /* Safari */
	transform: rotate(350deg); /* Standard syntax */ 
}
#nyelv-de {
	margin-left: 50px;
	-ms-transform: rotate(10deg); /* IE 9 */
	-webkit-transform: rotate(10deg); /* Safari */
	transform: rotate(10deg); /* Standard syntax */ 
}
#nyelv-hu {
	margin-left: 100px;
	-ms-transform: rotate(340deg); /* IE 9 */
	-webkit-transform: rotate(340deg); /* Safari */
	transform: rotate(340deg); /* Standard syntax */ 
}
#logo {
	z-index: 300;
	right: 0px;
	text-align: right;
	height: 100%;
	
}

.felso {
	z-index: 16;
	
}
.hidden {
    display: none;
}
#anim {
  position: absolute;	
  z-index: 5;
  width: 100px;
  height: 100px;
  left: 300px;
  bottom: 3%;
  background-image: url("frame/csibe.png");
  background-repeat: no-repeat;
  background-size: auto;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 10s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:10px; }
  49%  {left:600px; transform: rotateY(0deg); z-index: 5;}
  50%  {left:600px;transform: rotateY(180deg); z-index: 5;}
  51%  {left:600px; transform: rotateY(180deg); z-index: 2;}
  75%  {left:10px;  transform: rotateY(180deg); z-index: 2;}
  76%  {left:10px; transform: rotateY(0deg);z-index: 2;}
  95% {left:300px; transform: rotate(0deg); z-index: 5;}
  96% {left:300px; transform: rotate(40deg); z-index: 5;}
  97% {left:300px;transform: rotate(0deg); z-index: 5;}
  98% {left:300px; transform: rotate(40deg); z-index: 5;}
  99% {left:300px; transform: rotate(0deg); z-index: 5;}  
  100% {left:300px; transform: rotate(40deg);z-index: 2;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:10px; }
  49%  {left:600px; transform: rotateY(0deg); z-index: 5;}
  50%  {left:600px;transform: rotateY(180deg); z-index: 5;}
  51%  {left:600px; transform: rotateY(180deg); z-index: 2;}
  75%  {left:10px;  transform: rotateY(180deg); z-index: 2;}
  76%  {left:10px; transform: rotateY(180deg);z-index: 2;}
  77%  {left:10px; transform: rotateY(0deg);z-index: 5;}
  95% {left:300px; transform: rotate(0deg); z-index: 5;}
  96% {left:300px; transform: rotate(40deg); z-index: 5;}
  97% {left:300px;transform: rotate(0deg); z-index: 5;}
  98% {left:300px; transform: rotate(40deg); z-index: 5;}
  99% {left:300px; transform: rotate(0deg); z-index: 5;}  
  100% {left:300px; transform: rotate(40deg);z-index: 2;}
}

a {
  text-decoration: none;
}
a.menu {
	color: white;
}
a.lang {
	color: black;
}
a.menu:hover {
}
a {
	color: yellow;
	
}
.piros {
	position: absolute;
    width: 50%;
    height:97%;
    background-color:#BB2929;
	-webkit-clip-path: polygon(13% 10%, 59% 13%, 90% 7%, 93% 93%, 4% 93%, 4% 16%);
	clip-path: polygon(13% 10%, 59% 13%, 90% 7%, 93% 91.3%, 42% 93%, 4% 93%, 4% 16%);
	z-index: 3;
}

.text{
	position: absolute;
    width: 79%;
    height: 72%;
	color: white;
	margin-left: 8%;
	margin-top: 16%;
	margin-right: 8%;
	margin-bottom: 0;
	z-index: 6;
}
#text-in{
	position: relative;
	width: 100%;
	height: 100%;
}
#szoveg {
	z-index: 10;
}
p.szoveg {

	line-height: 1.5em;
	
}
.ag-format-container {
  width: 80%;
  margin: 0 auto;
}
.ag-delivery-block {
  padding: 0px 0;
}
.ag-delivery_item {
  display: table-cell;
  height: 20px;
  padding: 0 30px; 
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}

.ag-delivery_item:before,
.ag-delivery_item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.ag-delivery_item:before {
  background-color: black;
  z-index: 3;
}
.ag-delivery_item-1:before {
  -webkit-clip-path: polygon(10% 20%, 84% 15%, 84% 50%, 80% 69%, 0 84%);
  clip-path: polygon(10% 20%, 84% 15%, 84% 50%, 80% 69%, 0 84%);
}
.ag-delivery_item-1:hover:before {
  -webkit-clip-path: polygon(15% 5%, 84% 10%, 100% 50%, 89% 90%, 0 95%);
  clip-path: polygon(15% 5%, 84% 10%, 100% 50%, 89% 90%, 0 95%);
  background-color: #009846;
}
.ag-delivery_item-2:before {
  -webkit-clip-path: polygon(1% 15%, 73% 5%, 93% 50%, 91% 100%, 50% 85%, 5% 90%);
  clip-path: polygon(1% 15%, 73% 5%, 93% 50%, 91% 100%, 50% 85%, 5% 90%);
}
.ag-delivery_item-2:hover:before {
  -webkit-clip-path: polygon(1% 15%, 73% 5%, 93% 50%, 91% 100%, 50% 85%, 5% 90%);
  clip-path: polygon(1% 17%, 76% 5%, 93% 50%, 91% 97%, 50% 85%, 9% 97%);
  background-color: #009846;
}
.ag-delivery_item-3:before {
  -webkit-clip-path: polygon(1% 15%, 93% 30%, 91% 100%, 5% 93%);
  clip-path: polygon(1% 15%, 93% 30%, 91% 100%, 5% 93%);
}
.ag-delivery_item-3:hover:before {
  -webkit-clip-path: polygon(1% 15%, 93% 30%, 91% 100%, 5% 93%);
  clip-path: polygon(5% 10%, 84% 23%, 97% 97%, 10% 91%);
  background-color: #009846;
}
.ag-delivery_item-4:before {
  -webkit-clip-path: polygon(5% 20%, 85% 15%, 100% 85%, 3% 100%, 2% 60%);
  clip-path: polygon(5% 20%, 85% 15%, 100% 85%, 3% 100%, 2% 60%);
}
.ag-delivery_item-4:hover:before {
  -webkit-clip-path: polygon(15% 5%, 84% 10%, 100% 50%, 89% 90%, 0 95%);
  clip-path: polygon(15% 5%, 84% 10%, 100% 50%, 89% 90%, 0 95%);
  background-color: #009846;
}
.ag-delivery_item-5:before {
  -webkit-clip-path: polygon(19% 10%, 80% 16%, 70% 75%, 10% 75%);
  clip-path: polygon(19% 10%, 80% 16%, 70% 75%, 10% 75%);
}
.ag-delivery_item-5:hover:before {
  -webkit-clip-path: polygon(1% 10%, 79% 5%, 96% 50%, 80% 95%, 5% 90%, 15% 50%);
  clip-path: polygon(1% 10%, 79% 5%, 96% 50%, 80% 95%, 5% 90%, 15% 50%);
  background-color: #009846;
}
.ag-delivery_item-6:before {
  -webkit-clip-path: polygon(10% 20%, 84% 15%, 80% 69%, 15% 84%);
  clip-path: polygon(10% 20%, 84% 15%, 80% 69%, 15% 84%);
}
.ag-delivery_item-6:hover:before {
  -webkit-clip-path: polygon(10% 20%, 84% 15%, 80% 69%, 15% 84%);
  clip-path: polygon(18% 10%, 80% 19%, 70% 60%, 15% 80%);
  background-color: #009846;
}
.ag-delivery_item-7:before {
  -webkit-clip-path: polygon(12% 5%, 100% 16%, 91% 90%, 10% 88%);
  clip-path: polygon(12% 5%, 100% 16%, 91% 90%, 10% 88%);
}
.ag-delivery_item-7:hover:before {
  -webkit-clip-path: polygon(12% 5%, 100% 16%, 91% 90%, 10% 88%);
  clip-path: polygon(18% 11%, 90% 16%, 91% 90%, 10% 80%);
  background-color: #009846;
}
.ag-delivery_item-8:before {
  -webkit-clip-path: polygon(12% 10%, 100% 10%, 91% 70%, 20% 68%);
  clip-path: polygon(12% 10%, 100% 10%, 91% 70%, 20% 68%);
}
.ag-delivery_item-8:hover:before {
  -webkit-clip-path: polygon(10% 20%, 84% 15%, 80% 69%, 15% 84%);
  clip-path: polygon(10% 20%, 84% 15%, 80% 69%, 15% 84%);
  background-color: #009846;
}


.ag-delivery_text-item {
  padding: 2px;

  font-size: 12px;
  
  font-weight: bold;
  z-index: 5;
  position: relative;
}
.ag-delivery_text-item:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 20px;
  margin: 0 0 0;

  position: absolute;
  top: 30%;
  left: 0;
  bottom: 0;
}

@media only screen and (max-width: 767px) {
  .ag-format-container {
    width: 50%;
  }

  .ag-delivery_item-1:before, .ag-delivery_item-2:before, .ag-delivery_item-3:before, .ag-delivery_item-4:before, .ag-delivery_item-5:before, .ag-delivery_item-6:before, .ag-delivery_item-7:before, .ag-delivery_item-8:before,
.ag-delivery_item-1:hover:before, .ag-delivery_item-2:hover:before, .ag-delivery_item-3:hover:before, .ag-delivery_item-4:hover:before, .ag-delivery_item-5:hover:before, .ag-delivery_item-6:hover:before,  .ag-delivery_item-7:hover:before, .ag-delivery_item-8:hover:before   {
    -webkit-clip-path: polygon(10% 20%, 90% 20%, 90% 60%, 10% 60%);
    clip-path: polygon(0 20%, 98% 20%, 98% 60%, 0 60%);
  }

.ag-format-container {
  width: 200%;
  margin: 2;
}
  .ag-delivery_text-item {
    padding: 2px 2px 15px;
	font-size: 10px;
  }
  .ag-delivery_text-item:before {
    margin: 0;

    top: 0;
    left: 5px;
  }
  .piros {
	  width: 98%; 
	  

  }
  .text{
    width: 79%;
	margin-top: 13%;
	height: 68%;
  }
    .ag-delivery_item {
 
  padding: 0 12px; 
 
}
}

@media only screen and (max-width: 639px) {
  .piros {
	  width: 98%; 
	  	  
  }
  .text{
 
	width: 79%;

	margin-top: 18%;
	height: 70%;
  }
    .ag-delivery_item {
 
  padding: 0 7px; 
 
}
}

@media only screen and (max-width: 479px) {
  .piros {
	 
  }
  .text{
 
	width: 79%;
	margin-top: 18%;
	height: 74%;
  }

  .ag-delivery_item {
  display: table-cell;
  height: 20px;
  padding: 0 2px; 
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.ag-format-container {
  width: 100%;
 
}
  .ag-delivery_text-item {
    padding: 2px 2px 10px;
	font-size: 9px;
  }
}


@media (min-width: 768px) and (max-width: 979px) {
 .ag-format-container {
    width: 50%;
  }

  .ag-delivery_item-1:before, .ag-delivery_item-2:before, .ag-delivery_item-3:before, .ag-delivery_item-4:before, .ag-delivery_item-5:before, .ag-delivery_item-6:before, .ag-delivery_item-7:before, .ag-delivery_item-8:before,
.ag-delivery_item-1:hover:before, .ag-delivery_item-2:hover:before, .ag-delivery_item-3:hover:before, .ag-delivery_item-4:hover:before, .ag-delivery_item-5:hover:before, .ag-delivery_item-6:hover:before,  .ag-delivery_item-7:hover:before, .ag-delivery_item-8:hover:before   {
    -webkit-clip-path: polygon(10% 20%, 90% 20%, 90% 60%, 10% 60%);
    clip-path: polygon(0 20%, 98% 20%, 98% 60%, 0 60%);
  }

.ag-format-container {
  width: 100%;

}
  .ag-delivery_text-item {
    padding: 2px 2px 10px;
	font-size: 10px;
  }
  .ag-delivery_text-item:before {
    margin: 0;

    top: 0;
    left: 2px;
  }
  .piros {
	  width: 60%; 
	  

  }
  .text{
    width: 79%;
	margin-top: 13%;
	height: 75%;
  }
  .ag-delivery_item {
 
  padding: 0 8px; 
 
}
}


@media (min-width: 980px) and (max-width: 1161px) {
  .ag-format-container {
    width: 960px;
  }
  .piros {
	  width: 50%; 
	  	  
  }
  .text{
    
	height: 80%;
  }

}