@charset "utf-8";
/* CSS Document */

* {	margin:0; padding:0;}



header {width:100%;	height:100%;}

#kozep {max-width:900px; margin:0 auto;	padding-top:15px;}

img {max-width:100%; height:auto; }


a { text-decoration:none; font-family:Arial, "Arial Black", "Arial Narrow", "Arial Unicode MS" }
.clear:before,
.clear:after {
	content:" ";
	display: table
}
.clear:after { clear: both }

nav {
	width: 100%;
	background: black
}
nav .navbar {
	max-width: 900px;
	margin:0 auto;
	background-color:black
}
nav a { color: #fff }

nav .menu-toggle {
	cursor: pointer;
	display: none;
	float: right;
	padding: 12px;
	margin: 10px 0;
	background: black;
	transition: background-color .5s
}
nav .icon-bar {
	background-color: yellow;
	display: block;
	width: 22px;
	height: 2px
}
nav .icon-bar + .icon-bar { margin-top: 4px }

nav .menu ul { float: left }
nav .menu li {
	float: left;
	list-style: none;
}
nav .menu li:first-child { border-left: 0 }
nav .menu li a,
nav .open-submenu {
	color: #fff;
	cursor: pointer;
	position: relative;
	display: block;
	padding: 12px 40px;
	transition: background-color .3s
}
nav .menu li a:hover,
nav .menu-toggle.active  {
	background: rgba(152,25,28,1.00);
	transition: background-color .5s
}
nav .menu ul ul {
	z-index: 100;
	display: none;
	float: none;
	position: absolute;
	background: gray
}
nav .menu ul ul li {
	float: none;
	border: 0
}
nav .menu ul ul a:hover {
	background: gray;
	transition: background-color .3s
}





  
div#wrapper {width:100%; background-color: rgba(181,24,27,1.00);}
	
#alapfold {
	max-width:900px;
	min-height:450px;
	background-color: ;
	margin:0 auto;
	padding-top:50px;
}

div#kep01 {
	width:250px;
	height:367px;
	float:left;
	margin-right:75px;
}

div#kep02 {
	width:250px;
	height:367px;
	float:left;
}

div#kep03 {
	width:250px;
	height:367px;
	float:right;
}

.flip3D > .front{
	position:absolute;
	transform: perspective( 600px ) rotateY( 0deg );
	background:red; width:250px; height:367px;
	backface-visibility: hidden;
	transition: transform 1s linear 0s;
-webkit-box-shadow: 0px 0px 35px black;
box-shadow: 0px 0px 35px black;
}

.flip3D > .back{
	position:absolute;
	transform: perspective( 600px ) rotateY( 180deg );
	background: #80BFFF; width:250px; height:367px;
	backface-visibility: hidden;
	transition: transform 1s linear 0s;
-webkit-box-shadow: 0px 0px 35px black;
box-shadow: 0px 0px 35px black;;
}

.flip3D:hover > .front{transform: perspective( 600px ) rotateY( -180deg );}

.flip3D:hover > .back{transform: perspective( 600px ) rotateY( 0deg );}



footer {width:100%; clear:left;}

#kozep {max-width:900px; margin:0 auto;	padding-top:15px;}



#bemutat {	width:100%;	height:600px;	background-color:black;}

#count {
	max-width:900px;
	height:500px;
	background-color: rgba(41,39,39,0.63);
	margin:0 auto;
}

p {
	font-family:Arial, "Arial Black", "Arial Narrow", "Arial Unicode MS";
	color:white;
	font-size:120%;
	padding:20px;
	text-align:justify;
	line-height:150%;
}

#vissza {
	width:100px;
	height:25px;
	margin:0 auto;
	padding-top:20px;
}















#dtp {
	max-width:100%;
	height:900px;
	background-color:rgba(183,183,183,0.77);
	margin-top:150px;
}


#dtpcount {
	max-width:900px;
	height:600px;
	margin:0 auto;
	padding:10px;
}

.dtpkepek01, .dtpkepek02, .dtpkepek03, .dtpkepek04, .dtpkepek05, .dtpkepek06 {
	width:250px;
	height:250px;
	float:left;
	box-shadow: 0px 0px 15px black;
	margin:25px;
	background-color:white;
}

















#dtp1 {
	width:100%;
	height:840px;
	background-color: rgba(183,183,183,0.37);
	margin-top:150px;
}

pics {width:100%; height:auto;}

#kozep1 {max-width:900px; margin:20px auto;}

#kozep1 img {max-width:100%; height:auto; }







#dtp2 {
	width:100%;
	height:900px;
	background-color:black;
	margin-top:150px;
	background-image:url(link/dark-website-backgrounds-11_0.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

pics2 {width:100%; height:auto;}

#dtp2count {
	max-width:900px;
	height:500px;
	margin:0 auto;
	padding:10px;
}

.dtp2kepek01, .dtp2kepek02{
	width:250px;
	height:250px;
	float:left;
	box-shadow: 0px 0px 15px black;
	margin:25px;
	background-color:red
}

.dtp2kepek02 {
	float:right;
}









#dtp3 {
	width:100%;
	height:500px;
	background-color: #2D2D2D;
	margin-top:150px;
}

#count10 {
	max-width:900px;
	height:200px;
	margin:20px auto;
}

#count001 {
	width:900px;
	height:200px;
	float:left;
}




h1,h2 {
	color:#1490A4;
	font-family:Arial, "Arial Black", "Arial Narrow", "Arial Unicode MS";
	padding-left:35px;
}














@media(max-width:900px) {
	nav .menu-toggle { display: inline-block }
	nav .menu { display: none; clear: both }
	nav .menu > ul { float: none }
	nav .menu li { width: 100%; border: 0 }
	nav .menu li:last-child { margin: 0 0 15px 0 }
	nav .menu li a {
		display: block;
		background: gray;
		padding: 10px;
		margin: 4px 0 0 0
	}
	nav .menu ul ul {
		position: static;
		background: transparent;
		display:none
	}
	nav .menu ul ul a { background: transparent }
	nav .menu ul ul a:hover { background: white }
	div#wrapper{ height:850px;padding-left:30px;}
	div#kep01{ float:left; padding-bottom:30px; margin-right:30px;clear: both}
	div#kep03{ float: left;clear: both}
	.text { height:400px; clear: both;background-color:transparent;}
	p {clear: both}
	#bemutat { height:570px}
	#dtp {height:1200px; background-color:transparent;}
	#dtp1 {height:400px;}
	.dtp2kepek02 { float:left}
	h1,h2 { padding-left:15px}
	#dtp2 {	height:600px;}

}



@media(max-width:600px) {
	div#wrapper{ height:1250px; padding-left:20px;}
	div#kep01{ float:left; padding-bottom:30px;}
	div#kep03{ float:left}
	div#kep02{ float:left; padding-bottom:30px;}
	p {	font-size: 85%; text-align:left; line-height:150%; clear: both}
	.text { height:450px; background-color:transparent; clear: both}
	#bemutat { height:620px}
	#dtp {height:800px; padding-left:5px;}
	#dtp2 {	height:420px;}
	h1,h2 { padding-left:15px}
	#dtp3 {	height:280px;}

}