.box {
	color: #999;
	width: 560px;
	height: 8em;
	position: relative;
	overflow: hidden;
	margin: 25px 40px 0px 20px;
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
	text-shadow: 0px 1px 0px #fff;
	border-bottom: 1px solid #c8c8c8;
	border-top: 1px solid #c8c8c8;
	background-color: #f0f0f0;
}
.box:hover {
	background-color: #e1e1e1;
	box-shadow: none;
	border-bottom: 1px solid #c8c8c8;
	border-top: 1px solid #c8c8c8;
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	transition: 0.25s;
}

.left {
  padding: 1.5em;
  height: 100%;
  width: 100%;

}
.cim {
	color: #4b5b76;
	margin: 0;
	text-transform: none;
	text-shadow: 0px 1px 0px #fff;
	font-size: 30px;
}
.cim2 {
	font-size: 1em;
	width: 18em;
	margin: 0;
}
.dumaugro {
	color: #d2d2d2;
	text-shadow: 0px 0px 0px #fff;
	line-height: 8.8em;
	font-size: 1.3em;
	opacity: 0.6;
}

/* ~~ 1 kek ~~ */
.right {
  height: 100%;
  width: 100%;
  background: #284156;
  position: absolute;
  top: 0;
  left: 25em;
  transition: 0.25s;  
}

.right::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13em 3em 0 0;
  border-color: transparent #284156 transparent transparent;
  left: -3em;
  top: 0;
  position: absolute;
 
}
.right:hover {
  transition: 0.25s;
  transform: translateX(-12em);
}
.right:hover a {
  transition: 0.25s;
  transform: translateX(-4em) scale(1.0);
}
.right:hover a::before {
  width: 4.9em;
}
.right a {
	
	text-decoration: none;
	
	text-align: center;
	display: block;
	
	transform: translateX(-9em);
	transition: 0.25s;
	position: relative;
	
	
}


.right a:hover::before, .right a:hover::after {
  width: 6em;
  transition: 0.25s;
}

/* ~~ 2 narancs ~~ */
.right2 {
  height: 100%;
  width: 100%;
  background: #da402b;
  position: absolute;
  top: 0;
  left: 25em;
  transition: 0.25s;  
}

.right2::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13em 3em 0 0;
  border-color: transparent #da402b transparent transparent;
  left: -3em;
  top: 0;
  position: absolute;
 
}
.right2:hover {
  transition: 0.25s;
  transform: translateX(-12em);
}
.right2:hover a {
  transition: 0.25s;
  transform: translateX(-4em) scale(1.0);
}
.right2:hover a::before {
  width: 4.9em;
}
.right2 a {
	font-weight: 500;
	text-decoration: none;
	
	text-align: center;
	display: block;
	
	transform: translateX(-9em);
	transition: 0.25s;
	position: relative;
	
	
}


.right2 a:hover::before, .right2 a:hover::after {
  width: 6em;
  transition: 0.25s;
}

/* ~~ 3 zold ~~ */
.right3 {
  height: 100%;
  width: 100%;
  background: #556470;
  position: absolute;
  top: 0;
  left: 25em;
  transition: 0.25s;  
}

.right3::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13em 3em 0 0;
  border-color: transparent #556470 transparent transparent;
  left: -3em;
  top: 0;
  position: absolute;
 
}
.right3:hover {
  transition: 0.25s;
  transform: translateX(-12em);
}
.right3:hover a {
  transition: 0.25s;
  transform: translateX(-4em) scale(1.0);
}
.right3:hover a::before {
  width: 4.9em;
}
.right3 a {
	font-weight: 500;
	text-decoration: none;
	
	text-align: center;
	display: block;
	
	transform: translateX(-9em);
	transition: 0.25s;
	position: relative;
	
	
}


.right3 a:hover::before, .right3 a:hover::after {
  width: 6em;
  transition: 0.25s;
}

/* ~~ 4 voros ~~ */
.right4 {
  height: 100%;
  width: 100%;
  background: #b8242b;
  position: absolute;
  top: 0;
  left: 25em;
  transition: 0.25s;  
}

.right4::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13em 3em 0 0;
  border-color: transparent #b8242b transparent transparent;
  left: -3em;
  top: 0;
  position: absolute; 
}
.right4:hover {
  transition: 0.25s;
  transform: translateX(-12em);
}
.right4:hover a {
  transition: 0.25s;
  transform: translateX(-4em) scale(1.0);
}
.right4:hover a::before {
  width: 4.9em;
}
.right4 a {
	font-weight: 500;
	text-decoration: none;
	
	text-align: center;
	display: block;
	
	transform: translateX(-9em);
	transition: 0.25s;
	position: relative;
	
	
}
.right4 a:hover::before, .right4 a:hover::after {
  width: 6em;
  transition: 0.25s;
}

/* ~~ 5 turkisz ~~ */
.right5 {
  height: 100%;
  width: 100%;
  background: #4c7ba3;
  position: absolute;
  top: 0;
  left: 25em;
  transition: 0.25s;  
}

.right5::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13em 3em 0 0;
  border-color: transparent #4c7ba3 transparent transparent;
  left: -3em;
  top: 0;
  position: absolute; 
}
.right5:hover {
  transition: 0.25s;
  transform: translateX(-12em);
}
.right5:hover a {
  transition: 0.25s;
  transform: translateX(-4em) scale(1.0);
}
.right5:hover a::before {
  width: 4.9em;
}
.right5 a {
	font-weight: 500;
	text-decoration: none;
	
	text-align: center;
	display: block;
	
	transform: translateX(-9em);
	transition: 0.25s;
	position: relative;
	
	
}
.right5 a:hover::before, .right5 a:hover::after {
  width: 6em;
  transition: 0.25s;
}

/* ~~ 6 sarga ~~ */
.right6 {
  height: 100%;
  width: 100%;
  background: #e2752b;
  position: absolute;
  top: 0;
  left: 25em;
  transition: 0.25s;  
}

.right6::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13em 3em 0 0;
  border-color: transparent #e2752b transparent transparent;
  left: -3em;
  top: 0;
  position: absolute; 
}
.right6:hover {
  transition: 0.25s;
  transform: translateX(-12em);
}
.right6:hover a {
  transition: 0.25s;
  transform: translateX(-4em) scale(1.0);
}
.right6:hover a::before {
  width: 4.9em;
}
.right6 a {
	font-weight: 500;
	text-decoration: none;
	
	text-align: center;
	display: block;
	
	transform: translateX(-9em);
	transition: 0.25s;
	position: relative;
	
	
}
.right6 a:hover::before, .right6 a:hover::after {
  width: 6em;
  transition: 0.25s;
}


@media screen and (max-width: 800px) {
.box {
	color: #999;
	width: 100%;
	height: 8em;
	position: relative;
	overflow: hidden;
	margin: 25px 0px 0px 0px;
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
	text-shadow: 0px 1px 0px #fff;
	border-bottom: 1px solid #c8c8c8;
	border-top: 1px solid #c8c8c8;
	background-color: #f0f0f0;
}
.right {
  opacity: 0;  
}
.right2 {
  opacity: 0;  
}
.right3 {
  opacity: 0;  
}
.right4 {
  opacity: 0;  
}
.right5 {
  opacity: 0;  
}
.right6 {
  opacity: 0;  
}



}