.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 #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	background-color: #f0f0f0;
}
.box:hover {
	background-color: #e6e6e6;
	box-shadow: none;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #c8c8c8;
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	transition: 0.25s;
	cursor: pointer;
}

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

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

/* ~~ 1 kek ~#284156 url("img/m01.png") no-repeat;~ */
.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: 1030px) {

.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 #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	background-color: #f0f0f0;
	padding: 0px 0px 20px 0px;
}
.box:hover {
	background-color: #e6e6e6;
	box-shadow: none;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #c8c8c8;
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	transition: 0.25s;
	cursor: pointer;
}

.dumaugro {
	color: #d2d2d2;	
	line-height: 8.8em;
	font-size: 1.3em;
	opacity: 0.6;
	margin: 0px 20% 0px 0px
}


.right {  
  left: 70%;
}
.right2 {
  left: 70%;
}
.right3 {
  left: 70%;
}
.right4 {
 left: 70%;
}
.right5 {
  left: 70%;
}
.right6 {
  left: 70%;
}

.cim {
	color: #4b5b76;
	margin: 0;
	text-transform: none;
	text-shadow: 0px 1px 0px #fff;
	font-size: 18px;
	width: 80%;
}
.cim2 {
	font-size: 1em;
	width: 80%;
	margin: 0;
}

}

@media screen and (max-width: 500px) {
.dumaugro {
	color: #d2d2d2;	
	line-height: 12em;
	font-size: 1.3em;
	opacity: 0.6;
	margin: 0px 0px 0px 110px
}
.right {  
  left: 80%;
}
.right2 {
  left: 80%;
}
.right3 {
  left: 80%;
}
.right4 {
 left: 80%;
}
.right5 {
  left: 80%;
}
.right6 {
  left: 80%;
}
}