* {box-sizing:border-box}

.kepdoboz {}

.meret
{
	cursor: zoom-in;
	border: 10px solid white;
	position: fixed;
	height: 80%;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	margin-bottom: -50%;
	margin-right: -50%;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
	background-color: darkslategray;
}
.kepdoboz_k, .kepdoboz_alap
{
	cursor: zoom-in;
	position: fixed;
	left: 200px;
	top: 80px;
	height: 400px;
	width: auto;
	padding: 10px;
	background-color: white;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

.meret_k
{
	height: 380px; /*a kepdoboz_k-ban lévő max-height-20 */
}
.indexkepdoboz_k
{
	position: fixed;
	left: 200px;
	top: 500px;
}
.lapozomeret
{
	height: 54px;
}
.bezarmeret
{
	height: 36px;
}
.indexkepdoboz
{
	position: fixed;
	top: 91%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	margin-bottom: -50%;
	margin-right: -50%;
}
.index
{
	height:64px;
}
.minikep
{
	cursor:pointer;
	margin: 0 4px 0 4px;
	padding: 3px;
	background-color: white;
	display: inline-block;
	transition: background-color 0.6s ease;
	-webkit-transition: background-color 0.6s ease;
}
.minikep_k
{
	cursor:pointer;
	margin: 0 2px 0 2px;
	padding: 2px;
	background-color: white;
	display: inline-block;
	transition: background-color 0.6s ease;
	-webkit-transition: background-color 0.6s ease;
}
.dia, .dia_k
{
    display: none;
}
.elozo, .kovetkezo, .kilep
{
	cursor: pointer;
	position: fixed;
	width: auto;
	//padding: 24px;
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	filter:drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.7));
}
.elozo
{
	top: 45%;
	left: 50px;
}
.kovetkezo
{
	top: 45%;
	right: 50px;
}
.kilep
{
	top: 6%;
	right: 50px;
}
.elozo:hover, .kovetkezo:hover, .kilep:hover
{
	filter:drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
	//filter:invert(30%);
	transform:translate(3px,3px);
	-webkit-transform:translate(3px,3px);
}
.kepszov
{
	color: white;
	font-size: 16px;
	padding: 0 0 18px 18px;
	position: fixed;
	bottom: 3%;
}
.sorsz
{
	color: white;
	font-size: 14px;
	padding: 18px 0 0 18px; 
	position: fixed;
	top: 3%;
}
.active, .dot, .minikep:hover, .minikep_k:hover
{
	background-color: #717171;
}
.attunes
{
	-webkit-animation-name: fade;
	-webkit-animation-duration: 0.5s;
	animation-name: fade;
	animation-duration: 0.5s;
}
@-webkit-keyframes fade
{
	from {opacity: .1} 
	to {opacity: 1}
}

@keyframes fade
{
	from {opacity: .1} 
	to {opacity: 1}
}
@media (max-width: 900px)
{
	.meret
	{
	border: 6px solid white;	
	height: 70%;
	top: 46%;
	left: 50%;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.3);
	}
	.kepdoboz_k, .kepdoboz_alap
	{
		left: 50px;
	}
	.indexkepdoboz_k
	{
		left: 50px;
	}
	.index {height:52px}
	.minikep
	{
		margin: 0 2px 0 2px;
		padding: 2px;
	}
	.lapozomeret {height: 30px;}
	.bezarmeret {height: 20px;}
	.elozo
	{
		top: 45%;
		left: -7px;
	}
	.kovetkezo
	{
		top: 45%;
		right: -7px;
	}
	.kilep
	{
		top: 11%;
		right: 0px;
	}
	.kepszov
	{
	font-size: 16px;
	padding: 0;
	position: fixed;
	top: 81%;
	left: 50%;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	margin-right: -50%;
	}
.sorsz
	{
	font-size: 14px;
	padding: 0; 
	position: fixed;
	top: 82%;
	right:6%
	}
}	
@media (max-width: 700px)
{
	.kepdoboz_k, .kepdoboz_alap
	{
		left: 50%;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		margin-right: -50%;
		top: 50px;
		height: 340px;
		padding: 8px;
		box-shadow: 7px 7px 3px rgba(0, 0, 0, 0.3);
	}
	.indexkepdoboz_k
	{
		left: 50%;
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		margin-right: -50%;
		top: 400px;
	}
	.meret_k
	{
		height: 320px; /*a kepdoboz_k-ban lévő max-height-20 */
	}
}	
@media (max-width: 400px)
{
	.kepdoboz_k, .kepdoboz_alap
	{
		height: 280px;
	}
	.indexkepdoboz_k
	{
		top: 340px;
	}
	.meret_k
	{
		height: 260px; /*a kepdoboz_k-ban lévő max-height-20 */
	}
	
}	
@media (max-width: 360px)
{	
	.index {height:42px}
	.minikep, .minikep_k
	{
		margin: 0 0px 0 0px;
		padding: 2px;
	}
	.kepdoboz_k, .kepdoboz_alap
	{
		height: 220px;
	}
	.indexkepdoboz_k
	{
		top: 280px;
	}
	.meret_k
	{
		height: 200px; /*a kepdoboz_k-ban lévő max-height-20 */
	}
@media (max-width: 320px)
{	
	.index {height:36px}
	.minikep, .minikep_k
	{
		margin: 0 0px 0 0px;
		padding: 2px;
	}
	.kepdoboz_k, .kepdoboz_alap
	{
		height: 180px;
	}
	.indexkepdoboz_k
	{
		top: 240px;
	}
	.meret_k
	{
		height: 160px; /*a kepdoboz_k-ban lévő max-height-20 */
	}	
}