@charset "UTF-8";

/* 

Tervezte: G-STUDIO
Webfejlesztő: Gruming Ferenc

*/


/*

	Általános szabályok
	____________________________________________________________________________________________________________________________________________________________________
	
*/

a{
	color: #000;
	text-decoration: none;
	}
	
a:hover{
	text-decoration: underline;
	}

h1{
	margin: 0px;
	margin-bottom: 20px;
	font-weight: normal;
	}

h2{
	color: #000;
	margin: 0px 0px 10px 0px;
	font-weight: normal;
	}
	
h3{
	color: #000;
	margin: 0px 0px 10px 0px;
	font-weight: normal;
	}

h4{
	color: #000;
	margin: 0px 0px 10px 0px;
	font-weight: normal;
	}

p{
	margin: 0px;
	}
	
ul, ol{
	margin-bottom: 0px;
	padding-left: 30px;
	}
	
.clearBoth{
	clear: both;
	}

.nowrap{
	white-space: nowrap;
	}

/*

	Szabványos elrendezés (1200px széles képernyőfelbontás felett)
	____________________________________________________________________________________________________________________________________________________________________
	
*/

body{
	background: #fff;  
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #333;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	}
	
#wrapper{
	width: 100%;
	margin: 0px auto;
	}
	
#header{
	padding-top: 10px;
	clear: both;
	position: relative;
	}
	
#banner{
	clear: both;
	margin: 0 auto;
	}

#title{
	clear: both;
	color: #fff;
	background: #006600;  
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	}
	
#content{
	background: #fff;  
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	clear: both;
	}
	
#footer{
	background: #ffcc00;  
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-size: 10px;
	color: #000;
	clear: both;
	}

img.scale-with-grid {
	max-width: 100%;
	height: auto;
	}


/* header */
	
#logo{
	background-image: url(../img/logo.gif);
	background-repeat: no-repeat;
	height: 195px;
	width: 150px;
	display: block;
	margin-top: 5px;
	margin-left: 10px;
	position: absolute;
	z-index: 999;
	} 

#nav{
	float: right;
	padding-top: 15px;
	padding-bottom: 10px;
	font-size: 15px;
	}
	
	#nav .navItem{
		display: inline;
		float: left;
		padding: 0px 10px;
		border-right: solid 1px #cecece;
		}
		
	#nav .lastChild{
		border-right: none;
		padding-right: 0px
		}

#navCollapser{
	display: none;
	}
	
.navTip{
	clear: both;
	margin: 0 auto;
	display: none;
	}

/* banner */

#banner img{
	width: 100%;
	}


/* content */
.content3Column{
	width: 30%;
	margin-top: 20px;
	float: left;
	}
.content3Column.gap{
	padding-right: 5%;
	}
	
.content4Column{
	width: 20%;
	margin-top: 20px;
	float: left;
	}
.content4Column.gap{
	padding-right: 5%;
	}

.contentBig{
	width: 100%;
	margin-top: 20px;
	float: left;
	}
	
.contentMedium{
	width: 920px;
	margin-top: 20px;
	float: left;
	}
	
.contentSmall{
	width: 700px;
	margin-top: 20px;
	float: left;
	}
	
.sidebarLeft{
	width: 200px;
	float: left;
	margin-right: 20px;
	background: #000;
	}
	
.sidebarRight{
	width: 260px;
	float: right;
	background: #000;
	}
	
.sidebarItem{
	padding: 20px;
	border-bottom: solid 1px #fafafa;
	}
	
.sidebarLeft .sidebarItem img{
	border: solid 1px #e1e1e1;
	}
	
.sidebarLeft .sidebarItem .gap{
	margin-bottom: 20px;
	}
	
.sidebarLeft a, .sidebarRight a{
	color: #666;
	}
	
.contentHalfRight{
	width: 40%;
	border-left: solid 1px #e1e1e1;
	float: right;
	text-align: right;
	}
	
.contentHalfRightContent{
	margin-left: 80px;
	}
	
.contentHalfLeft{
	width: 50%;
	float: left;
	}

.contactForm input, 
.contactForm select, 
.contactForm textarea{
	width: 350px;
	border: solid 1px #cecece;
	padding: 8px 5px;
	margin-top: 5px; 
	background: #f1f1f1
	}
	
.contactForm select{
	width: 360px;
	}
	
.contactForm textarea{
	width: 90%;
	}

.scrollup {
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 20px;
	right: 0px;
	display: none;
	text-indent: -9999px;
	background: url('../images/icon_top.png') no-repeat;
	}

/* svdk */

   #al           {font-size: 13px; color: black; background: #fff; text-decoration: none;}
   #ax           {font-size: 13px; color: white; line-height: 175%; font-family: verdana, arial, geneva, sans-serif; background: #006600; text-decoration: none;}
   #ax:hover     {color: #333333; background: #ffffff;}
   #am           {font-family: verdana, arial, geneva, sans-serif; font-size: 13px; color: yellow; background: red; text-decoration: none;}
   #am:hover     {color: red; background: yellow;}
   #an           {font-family: verdana, arial, geneva, sans-serif; font-size: 13px; color: yellow; background: green;}


.yt {
	width:29vw;
	height:calc((29vw / 560) * 315);
}

.bnr {
	width:29vw;
	height:603px;
	text-align:center;
/*	max-width:29vw !important; */
	overflow-x:hidden;
	margin:0 auto;
}
	
/*

	1200px széles képernyő felbontás alatt
	Tábla gépek tájkép módban (iPad 1 & 2, Blackberry Playbook), és a netbookok (pl. HP Mini, Acer Aspire One)
	____________________________________________________________________________________________________________________________________________________________________
	
*/

@media only screen and (max-width: 1200px){
	
	.contentMedium{
		width: 680px;
		}
		
	.contentSmall{
		width: 740px;
		}
		
	.columns2 .sidebarRight{
		width: 260px;
		}
		
	.columns3 .sidebarRight{
		width: 740px;
		float: right;
		margin-top: 20px;
		padding-top: 20px;
		border-top: solid 1px #e1e1e1;
		background: none;
		}
		
	.columns3 .sidebarRight .sidebarItem{
		width: 30%;
		float: left;
		padding: 0px;
		border-bottom: none;
		}
		
	.columns3 .sidebarRight .sidebarItem.gap{
		padding-right: 5%;
		}
		
	}

/*
	960px széles képernyő felbontás alatt
	Tábla gépek portré módban (iPad 1 & 2, Blackberry Playbook, Motorola Xoom), és a nagy kijelzős okostelefonok (pl. Motorola Atrix tájkép módban)
	____________________________________________________________________________________________________________________________________________________________________
	
*/

@media only screen and (max-width: 960px){
	
	#logo{
		display: none;
		}
	
	.contentMedium, 
	.contentSmall{
		width: 100%;
		float: none;
		clear: both;
		margin-bottom: 20px;
		}
		
	.columns2 .sidebarRight, 
	.columns3 .sidebarRight{
		width: 100%;
		float: none;
		clear: both;
		padding-top: 20px;
		border-top: solid 1px #e1e1e1;
		background: none;
		}
		
	.columns2 .sidebarRight .sidebarItem, 
	.columns3 .sidebarRight .sidebarItem{
		width: 30%;
		float: left;
		padding: 0px;
		border-bottom: none;
		}
		
	.columns2 .sidebarRight .sidebarItem.gap, 
	.columns3 .sidebarRight .sidebarItem.gap{
		padding-right: 5%;
		}
		
	.columns3 .sidebarLeft{
		width: 100%;
		float: none;
		clear: both;
		padding-top: 20px;
		padding-bottom: 20px;
		border-top: solid 1px #e1e1e1;
		background: none;
		}
		
	.columns3 .sidebarLeft .sidebarItem{
		width: 100%;
		float: none;
		clear: both;
		padding: 0px;
		border-bottom: none;
		}
		
	.columns3 .sidebarLeft .sidebarItem .gap{
		margin-right: 22px;
		margin-bottom: 0px;
		}
		
	.columns3 .sidebarLeft .sidebarItem.gap{
		padding-right: 4%;
		}
		
	}
		
		
/*

	890px széles képernyő felbontás alatt
	____________________________________________________________________________________________________________________________________________________________________

*/

@media only screen and (max-width: 890px){
	#nav{
		font-size: 13px;
		}
	}

/*

	728px széles képernyő felbontás alatt
	Alkalmas mobil eszközök (pl. iPhone, Motorola Atrix, Blackberry)	
	____________________________________________________________________________________________________________________________________________________________________

*/

@media only screen and (max-width: 728px){
	
	#logo{
		display: none;
		}
	
	#nav{
		float: none;
		padding-top: 0px;
		}
		
	#nav .navItem{
		display: block;
		float: none;
		padding: 15px 0px;
		text-align: center;
		border-right: none;
		border-bottom: solid 1px #e1e1e1;
		}
		
	#nav .lastChild{
		border-right: none;
		padding-right: 0px;
		border-bottom: none;
		}
		
	#nav.collapsible{
		display: none;
		position: absolute;
		top: 0px;
		left: 0px; 
		width: 100%;
		background: #f1f1f1;
		}
		
	#navCollapser{
		display: none;
		cursor: pointer;
		width: 100%;
		padding: 15px 0px;
		text-align: center;
		background: #f1f1f1;
		border-bottom: solid 1px #e1e1e1;
		}
		
	.navTip{
		display: block;
		padding: 10px;
		margin: 0px auto;
		text-align: center; 
		font-size: 10px;
		}
		
	.navTip img{
		width: 100%;
		}


	#banner{
		width: 100%;
		margin: 0px auto;
		}
		
	.content3Column{
		width: 100%;
		padding-top: 20px;
		float: none;
		}
		
	.content3Column.gap{
		padding-right: 0px;
		}
	.content4Column{
		width: 100%;
		padding-top: 20px;
		float: none;
		}
		
	.content4Column.gap{
		padding-right: 0px;
		}
	
	.columns2 .sidebarRight, 
	.columns3 .sidebarRight{
		
		padding-top: 0px;
		}
	
	.columns3 .sidebarLeft{
		border-top: none;
		padding-top: 0px;
		margin-top: 0px;
		}
	
	.columns2 .sidebarRight .sidebarItem, 
	.columns3 .sidebarRight .sidebarItem, 
	.columns3 .sidebarLeft .sidebarItem{
		width: 100%;
		padding-top: 20px;
		float: none;
		}
		
	.columns3 .sidebarLeft .sidebarItem{
		text-align: center;
		padding-top: 0px
		}
		
	.columns2 .sidebarRight .sidebarItem.gap, 
	.columns3 .sidebarRight .sidebarItem.gap, 
	.columns3 .sidebarLeft .sidebarItem.gap{
		padding-right: 0px;
		}
	
	.columns3 .sidebarLeft .sidebarItem img{
		width: 140px;
		}
		
	.columns3 .sidebarLeft .sidebarItem .gap{
		margin-right: 0px;
		}
	
	.contentHalfRight{
		width: 100%;
		border-left: none;
		float: none; 
		clear: both;
		text-align: left;
		}
		
	.contentHalfRightContent{
		margin-left: 0px;
		}
		
	.contentHalfLeft{
		width: 100%;
		float: none; 
		clear: both;
		margin-top: 20px;
		}
	
	.yt {
		width:91vw;
		height:calc((99vw / 560) * 315);
		}

	.bnr {
		width:91vw;
		height:603px;
		text-align:center;
		margin:0 auto;
		}

	}