html, body						{ font-family: 'Roboto', sans-serif; height: 100%; line-height: 32px; font-size: 20px; font-weight: 300; font-style: normal; color: black; }

h1,h2,h3,h4                     { font-weight: 100; font-style: normal; }

h1                              { font-size: 72px; line-height: 76px; }
h2                              { font-size: 48px; line-height: 56px; font-weight: 700; }
h3                              { font-size: 28px; line-height: 36px; font-weight: 700; }

a:link                          { text-decoration: none; color: inherit; }
a:visited                       { text-decoration: none; color: inherit; }
a:hover                         { text-decoration: none; color: inherit; }
a:active                        { text-decoration: none; color: inherit; }

.full_width_img 				{ width: 100%; height:auto; vertical-align: top; }
.full_height_img 				{ width: auto; height:100%; vertical-align: top; }
.btn 							{ display: inline-block; font-size: 16px; font-weight: 900; padding: 5px; padding-left: 18px; padding-right: 18px; border: 2px solid white; border-radius: 25px; cursor: pointer; transition: all .3s ease;}
.btn:hover						{ background-color: white; color: #1370b4;}
.btn_reverse 					{ display: inline-block; font-size: 16px; font-weight: 900; padding: 5px; padding-left: 18px; padding-right: 18px; color: rgba(13,110,179,1); border: 2px solid rgba(13,110,179,1); border-radius: 25px; cursor: pointer; transition: all .3s ease;}
.btn_reverse:hover				{ background-color: rgba(13,110,179,1); color: white;}
.caps 							{ text-transform: uppercase; }
.bold 							{ font-weight: 500; }
.superbold 						{ font-weight: 900; }
.underline 						{ text-decoration: underline; }
.centered_text					{ text-align: center; }

.input                          { border: 1px solid #C8BFC4; padding:10px; font-size:16px; }
.input_full						{ border: 1px solid #C8BFC4; padding:10px; font-size:16px; width:100%; }
.linear_bg 						{ background: linear-gradient(180deg, rgba(13,110,179,1) 0%, rgba(98,127,166,1) 100%); }
.linear_bg_reverse 				{ background: linear-gradient(0deg, rgba(13,110,179,1) 0%, rgba(98,127,166,1) 100%); }

input, textarea, select			{ font-family: 'Roboto', sans-serif; }

#main_menu										{ position: fixed; width: 100%; left: 0; top: 0; padding: 40px; z-index: 1; transition: all 1s ease; font-size: 18px; }
#main_menu .items_holder						{ text-align: center; }
#main_menu .items_holder .item					{ display: inline-block; margin-right: 10px; cursor: pointer; }
#main_menu .items_holder .item.caps				{ margin-right: 30px; }
#main_menu .items_holder .item.clickable		{ color: rgba(255,255,255,.7); transition: color .3s ease; }
#main_menu .items_holder .item.clickable:hover	{ color: rgba(255,255,255,1); }
#main_menu .items_holder .item.active			{ font-weight: 600; color: rgba(255,255,255,1); }
#main_menu .items_holder .item.live				{ margin-left: 20px; color: white; border: 2px solid white; padding-left: 14px; padding-right: 14px; border-radius: 25px; transition: all .5s ease; }
#main_menu .items_holder .item.live:hover		{ color: black; background-color: white; }


#main_menu.bg 									{ background-color: #4fa085; padding: 20px; }

#logo_holder 									{ position: fixed; left: 10px; top: 10px; width: 130px; z-index: 2; transition: all 1s ease; }
#logo_holder.small 								{ top: -130px; }

#main_menu_btn_mobile							{ display: none; }
#main_menu_mobile 								{ display: none; }
#top_placeholder_mobile							{ display: none; }
#mobile_menu_bg									{ display: none; }
#main_menu_company_name_mobile  				{ display: none; }	
#mobile_logo 									{ display: none; }	

#language										{ position: absolute; right: 20px; top: 20px; font-weight: 900; }

#footer_social 					{ text-align: center; }
#footer_social .item			{ display: inline-block; margin: 3px; width: 50px; opacity: .7; transition: opacity .3s ease;}
#footer_social .item:hover 		{ opacity: 1; }

#subpage_logo_mobile			{ display: none; }


#home							{ position: relative; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center;}
#home .logo 					{ width: 75%; max-width: 500px; height: 50%; }

#tortenet 						{ position: relative; width: 100%; padding-top: 100px; }
#tortenet .text 				{ width: 75%; margin: 0 auto; line-height: 48px; margin-bottom: 50px; }
#tolteskep 						{ position: relative; width: 100%; padding: 150px; background-color: #4fa085; }

#borok							{ position: relative; width: 100%; }
#borok .title					{ width: 75%; margin: 0 auto; padding-top: 100px; padding-bottom: 100px; }
#borok .item					{ position: relative; width: 80%; margin-left: 10%; }
#borok .item .image				{ position: relative; width: 35%; }
#borok .item .text				{ position: absolute; top: 0; width: 65%; min-height: 100%; padding: 100px; display: flex; align-items: center; justify-content: center; }
#borok .item.leftimage .image	{ float: left; }
#borok .item.leftimage .text	{ right: 0; }
#borok .item.rightimage .image	{ float: right; }
#borok .item.rightimage .text	{ left: 0; }

#hol-kaphato					{ position: relative; width: 100%; }
#hol-kaphato .title				{ width: 100%; padding: 100px; text-align: center; }
#hol-kaphato .content			{ width: 80%; margin-left: 10%; padding: 100px; padding-top: 0; text-align: center; }

#kapcsolat						{ position: relative; width: 100%; }
#kapcsolat .title				{ width: 100%; padding: 100px; text-align: center; }
#kapcsolat .content				{ width: 100%; padding: 100px; padding-top: 0; text-align: center; }


.youtube_holder										{ position: relative; background-color: white; }
.youtube_holder .header								{ padding: 50px; color: black; text-align: center; }
.youtube_holder .youtube_video						{ position: relative; margin: 0 auto; max-width: 1280px; }
.youtube_holder .youtube_video .placeholder			{ position: relative; }
.youtube_holder .youtube_video .video				{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.youtube_holder .youtube_video .video .videoframe	{ width: 100%; height: 100%; }

@media only screen and (max-width : 1040px) {
	.youtube_video	{ width: 720px; height: 405px; }
}

@media only screen and (max-width : 768px) {
	.youtube_video	{ width: 560px; height: 315px; }
}

@media only screen and (max-width : 560px) {
	.youtube_video					{ width: 320px; height: 180px; }
	.youtube_video_holder			{ padding: 20px; }
}

@media only screen and (max-width : 1400px) {

	h1                          { font-size: 60px; line-height: 68px; }
	h2                          { font-size: 42px; line-height: 48px; }
	h3                          { font-size: 20px; line-height: 26px; }

}



@media only screen and (max-width : 1024px) {

	#main_menu						{ display: none; }

	#subpage_logo_mobile			{ position: fixed; top: 9px; right: 9px; z-index: 20000; }

	#main_menu_btn_mobile			{ display: block; position: fixed; left: 15px; top: 15px; z-index: 20000; cursor: pointer; }
	#main_menu_company_name_mobile  { display: block; position: fixed; left: 75px; top: 25px; z-index: 20000; text-transform: uppercase; }
	#main_menu_mobile 				{ display: block; position: fixed; width: 100%; height: 100%; left: 0; top: -100%; text-align: center; padding-top: 100px; background-color: white; z-index: 30000; -webkit-transition: all 0.5s ease-out; transition: all 0.3s ease-out;}
	#main_menu_mobile.active 		{ top: 0; }
	#main_menu_mobile .item 		{ color: black; padding: 5px; font-size: 24px; font-weight: bold; }
	#main_menu_mobile .close_btn 	{ position: absolute; left: 15px; top: 15px; cursor: pointer; }
	#top_placeholder_mobile			{ display: block; position: relative; width: 100%; height: 80px; }
	#mobile_menu_bg					{ display: block; position: fixed; width: 100%; height: 80px; left: 0; top: 0; background-color: white; z-index: 20000; }
	#mobile_logo 					{ display: block; position: fixed; right: 10px; top: 10px; width: 150px; height: 60px; z-index: 30000; }

	#logo_holder 					{ display: none; }

	#footer_social 					{ margin-top: 20px; }

	#tortenet 						{ padding-top: 50px; }
	#tortenet .text					{ width: 90%; }
	#tolteskep 						{ padding: 50px; }


	#borok .title					{ width: 90%; padding-top: 50px; }
	#borok .item					{ width: 100%; margin-left: 0; }
	#borok .item .image				{ width: 100%; }
	#borok .item .text				{ position: relative; width: 100%; min-height: auto; padding: 20px; display: block; }
	#borok .item.leftimage .image	{ float: left; }
	#borok .item.leftimage .text	{ right: 0; }
	#borok .item.rightimage .image	{ float: left; }
	#borok .item.rightimage .text	{ right: left; }

	#hol-kaphato .content			{ width: 100%; margin-left: 0; padding: 20px; padding-top: 0; text-align: left; }
	#kapcsolat .content				{ width: 100%; margin-left: 0; padding: 20px; padding-top: 0; }

}


@media only screen and (max-width : 720px) {

	h1                          { font-size: 48px; line-height: 54px; }
	h2                          { font-size: 36px; line-height: 42px; }
	h3                          { font-size: 18px; line-height: 24px; }

}


#footer             { position: relative; padding: 30px; font-size: 12px; text-align: left; }
#siteby				{ position: absolute; width: 205px; height: 45px; background-color: black; opacity: 0.9; right: 5%; bottom: 0; cursor: pointer; background-image:url(../img/siteby.png); }