@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Bitter:100,300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');

@import url('https://fonts.googleapis.com/css?family=Oxygen:100,300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=PT+Sans:100,300,400,700,900');


:root {
	font-size: 16px;
}


* { box-sizing:border-box; min-width:0; max-width:100vw}

html { height:100%; }

body { 
	margin:0;
	height:100%;
	
	font-family:Lato; 
	}

.container { width: 100%; max-width: 1200px; padding: 0 1rem; margin:auto; }

#keret { background-color:#f4f4f4; }
#nagy { 
	min-height:400px; 
	background: url('3_1168_520.png') no-repeat; 
	 background-attachment: fixed;
   background-position: top 80px right -90px;
   background-size: auto 480px; 
	margin:0 auto;
padding-top:180px; ;
width:100%; 
}

#nagy H1, #nagy H3 {margin:0; font-size:30px; font-weight:300; text-align:left; color:#777;}

#nagy H1 { font-size:60px; font-weight:900; text-align:left; color:#777; }

.vekony { font-weight:300; }

#lupe { background:url('zoom-icon.png') no-repeat center; background-size:80%}

#lupe, #X  {
	background-color:#f5f5f5;
	border-radius:100%; 
	float:right; 
	height:40px;
	width:40px;
	text-align:center;
	margin:20px auto;
	font-size:24px; 
	font-weight:100; 
	line-height:40px;
	display:inline-block; 
	cursor:pointer;
	}

#X  { color:#777; font-size:40px; font-weight:300; margin-right:10px;  }

header { 
	background:#fff; 
	height:80px; 
	width: 100%; 
	padding:0 2%; 
	position:fixed; 
	top:0; left:0;
	z-index:12;}

header .container { position: relative; }

a {
	color:#656565;
	text-decoration: none;
	font-weight:300;
}

.aktiv a, .piros {
	color: #f96868;
}

b, strong {
	font-weight: 900;
}

#logo {
	float: left;
	margin: 0px 0;
	font-size: 50px;
	font-size: 250%;
	line-height:80px !important;
	font-weight: 300;
	display: inline-block;
}

nav { display: none; margin-right:50px; float:right; text-align:right; width:auto; }

nav li { 
	display:inline-block; 
	padding:0 0px;
	height:70px;
	margin-right:20px;
	color:#656565; 
	transition:0.5s;
	border-bottom:7px solid transparent}

nav li:hover { border-color:#f96868; _color:#fff;}

nav li  a { line-height:80px; font-size:18px;  color:inherit;  }

#hambi, #iksz {
	position:absolute;
	z-index:500;
	top:0;
	right:53px;
	_display:none;
	max-width: 36px;
	min-width: 36px;
	overflow:hidden;
	font-size:40px;
	font-weight:700;
	color:#f96868;
	background-color:white;
	line-height:75px; 
	margin-right:20px;
	cursor: pointer;
	}

#iksz { 
	top:-55px; 
	transition:0.2s;
	font-weight:800;
	font-size:60px;
	line-height:70px;
}

#keresosav { 
	background:#656565; border-bottom:5px solid #fff;
	width:100%; height:80px; 
	line-height:80px; 
	position:fixed; top:80px; z-index:20; display:none;
}

#keresosav ::placeholder {color:#ccc; font-size:30px; }
#keresosav ::-webkit-input-placeholder {color:#ccc; font-size:30px; }

#keresosav input { 
	background:transparent; 
	outline:none;
	border:none; 
	color:#eee; 
	font-size:40px;
	line-height:60px;
	font-weight:300; 
	font-family:Lato; 
	width:70%; 
	margin-left:10%;
}

::-webkit-input-placeholder { /* Edge */
  color: #f96868;
  font-family: Bitter;
  font-size:20px;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #f96868;
  font-family: Bitter;
  font-size:20px;
}

::placeholder {
  color: #f96868;
  font-family: Bitter;
  font-size:20px;
}


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


.square { list-style-type:'\3007  '; }
.square::marker { content:' ';height:30px}

ul, li { 
	text-align: left;
	font-size:1.2rem;
	_margin-left:0rem;
}

li { line-height:1.2;
   margin-bottom:1rem;}

ul.out { 
	list-style-type:'\276F \20  ';
	list-style-position: outside;
	margin-left:1rem;
}

li::marker {color:#f96868;
		   font-weight:800;
			font-size:20px;
			line-height:1;
}


.kat { font-size:20px; font-weight:700; display:inline-block; 
width:auto; border:2px solid #000; padding:10px 20px; margin:0 20px}
.kat:hover { background:#f96868; color:#fff; border-color:#f96868 }
.row { margin-top:30px;}

h1, h2, h3, h4 { font-size:3.6rem; 
	font-family:PT Sans;
	font-weight:700;
	color:#777;
	line-height:1;
   margin-top:0.5rem; margin-bottom:1.5rem;}

h2 { font-size:2.8rem; margin-bottom:1.0rem;}
h3 { font-size:2.0rem; margin-bottom:0.5rem;}
h4 { font-size:1.2rem; margin-bottom:0.5rem;}

.big  { font-size:  2rem; font-family: Oxygen; font-weight:600; }
.bold { font-weight: 800; }
.blue { color: #f96868;
	  width:100%;
	padding:0.5rem 1rem;
	  border:1px solid #f96868;}

.start { text-align:left;}

.ml1 { margin-left:1rem;}
.mr1 { margin-right:1rem;}

.ml2 { margin-left:2rem;}
.mr3 { margin-right:2rem;}

.ml3 { margin-left:3rem;}
.mr3 { margin-right:3rem;}


.p1 {  padding:1rem;}
.p2 {  padding:2rem;}
.p3 {  padding:3rem;}
.px1 { padding-left:1rem; padding-right:1rem;}
.px2 { padding-left:2rem; padding-right:2rem;}
.px3 { padding-left:3rem; padding-right:3rem;}
.py1 { padding-top:1rem;  padding-bottom:1rem;}
.py2 { padding-top:2rem;  padding-bottom:2rem;}
.py3 { padding-top:3rem;  padding-bottom:3rem;}



#tanfolyamok {
	width:100%;
	max-width:100%;
	padding:2% 0%;
	margin-top:100px;
	text-align:center;
	font-family: PT Sans;
	font-size:vw;
	display:flex;
	justify-content:center;
	}

.tanfolyam { 
	text-align:left;
	background:#656565; 
	color:#ccc;
	line-height:1;
	_min-width:340px; 
	max-width:600px;
	margin:auto;
	padding:0 0px;
	_transition: 0.4s;
	 }

.tanfk { margin-bottom: 1rem; }
	
.tanfolyam .pluszjel { float:right;  }
.pluszjel img { width:24px; height: 24px;  }

.fej .pluszjel img { height:30px; width:40px; line-height:1; padding:0;
				   margin-right:-10px;}

.tanfolyam_cim { font-size:24px; cursor:pointer; padding:0 20px; }


.fej { background:#f96868; color:#fff; margin-top:5px;}

.tanfolyam_cim { 
	font-size:23px;
	font-family:Bitter;
	color:#fff; 
	 cursor:pointer; 
	padding:0.7rem 20px; 
	border-bottom:1px solid #888;
	_text-transform:uppercase;  }

.fej .tanfolyam_cim { 
	_font-size:32px; 
	font-size:2rem;
	font-family:PT Sans;
	text-transform:uppercase;
	font-weight:900;
	padding:0.7rem 1.3rem;
	border:none}


.tanfolyam_tart { 
	transition: 0.6s; 
	overflow:hidden; 
	line-height:1.4; 
	background:#eee; 
	height:auto; 
	max-height:0px; 
	color:#000; 
	padding:0rem 2rem;
}

ul, p { padding:unset; 
	   margin:unset;
	 margin-left:1rem;
	  list-style-position:inside;
}

p { font-family: Raleway; }

.semibold { font-weight: 500; }
.lineshift { line-height: 1.7; }

.info, .leiras { padding-top: 1rem; }

.info li { list-style-type:none}
.info li::before { content:'\26AC';
		color:#f96868;
		font-size:1.5rem;
		font-weight:800;
		line-height:1.2;
		vertical-align:middle;
		margin-top:-10px;
		margin-right:6px;
}

.tanfleiras {
	font-weight:bold;
	padding:1rem 0 1.5rem 0;
}

.leiras {
	background-color:#fffa;
	margin: 1rem auto 1rem -1rem;
	padding:0.5rem 1rem;
}

.ar { font-weight:700; text-align:right; }
.ar:after { content:',- Ft'}

form { display:flex; flex-direction:column; }
input, select, textarea { margin:10px 0; padding:1em}
#keres { padding:0}
textarea { min-height:120px; max-height:120px; min-width:100%; min-width:100%; resize:none;}


.pill {
	border: 2px solid #444; 
	border-radius: 30px; 
	font-size:1.2rem;
	font-family:Bitter;
	font-weight:600;
	padding: 0.5rem 2rem;
	align-self: center;
	display:inline-block;
}

.redborder { border-color:#f96868; }

button, .button, input[type=submit] { 
	outline: none; 
	border: none; 
	border-radius: 30px; 
	font-size:1.2rem;
	font-family:Bitter;
	font-weight:600;
	padding: 0.5rem 2rem;
	align-self: center;
	background-color:#f96868;
	color: white;
	display:inline-block;
}


:is(button, .button, input[type=submit]):hover { 
	cursor:pointer;
	background-color:#ae2929;
}

.gap1 { gap:1rem;}
.gap2 { gap:2rem;}
.gap3 { gap:3rem;}
.sa { justify-content:space-around}
.sb { justify-content:space-between}
.center { align-items:center}
.row.center { justify-content:center; align-items:normal; }
.t-left { text-align:left}
.t-center { text-align:center}
.t-right { text-align:right}

.stars:before
{
	display:block;
	content:'\2605 \2605 \2605 \2605 \2605';
	color:#f96868;
	font-size:2rem;
}


:is(.row, .sm-row, .md-row) > * { flex: 1}
.column > div {	width:100%;}

.m1 { margin:0 1rem; }
.m2 { margin:0 2rem; }
ul.out.m2 { margin:0; margin-left:2rem; }
.m3 { margin:0 3rem; }

.min200 { min-width:200px}

ul.out h2, ul.out h3 { margin-left: -24px; } 

p.out { margin: 1rem 0; margin-left: -24px; font-size: 80%; color: #444;} 

.icon { padding-left:50px;
	   line-height:50px;
	   text-align:left;
	   font-family:Bitter;
	   font-size:1.5rem;
	   font-weight:900;
background:url('') no-repeat left;
background-size:30px;}

.icon.email {
	background-image:url('email-green.svg')
}

.icon.phone {
	background-image:url('phone-green.svg')
}

header { 
		height:auto;
		padding:0;
	}

.out { maring:0}
.square { margin-left:1.5rem; }

#hambi, #iksz { right:50px;}
#hambi { display:block; }
#mainnav  { display:none; }
#logo { _font-size: 40px; }
#logo { _font-size: 280%; }
#logo { font-size: 20px; }
#logo strong { font-size: 40px; }
	
#tanfolyamok { 
		padding:2% 0%;
	}

.column, .row, .sm-row, .md-row, .lg-row { display: flex; }
.column, .sm-row, .md-row, .lg-row { flex-flow: column; }

:is(.column, .sm-row, .md-row, .lg-row) .half {
	width:100%;
	flex-basis:100%;
}

.row { flex-flow: row; }

.row .half  { width:45%; 
	   flex-basis:45%; }

.bg-red { background-color: #F3EED9; }
:is(.bg-blue) :is(h1, h2, h3, p, div) { color:white; }
:is(.bg-red) :is(h1, h2, h3, p, div) { color:black; }
.bg-blue { background-color: #AB1E2E; }
.bg-grey { background-color: #a30f28; }
.bg-dark { background-color: #444; }
.bg-dark * { color: white; }
.bg-light { background-color: #eee; }
.bg-steel { background-color: #607D8B; }
.bg-steel  * {color:white}

.bg-img1 { 
	background: url('megafonok.jpg') center top -70px;
	background-size: cover;
	height: 120px;
}

.bg-img2 { 
	background-image: url('learn.jpg');
	background-attachment: fixed;
}

bg-img1:before {
	content: ' ';
	position:absolute;
	z-index:0;
	left:0; top:0;
	width:100%; height:100%;
	background-color: #000a !important; background-color:#0005;
}

.bg-img1 h2
{ text-align:center;}
			 
.bg-img1 :is(h2, p, div)
{ position:relative;
 z-index:1000;color:white}

.spacebox {
	padding:1rem;
	background-color:white;
	box-shadow:10px 10px 30px #4442;
}

.rounded {
	border-radius:10px;
}

.wrap {flex-wrap:wrap}

.circle
{
	width: 150px; height:150px;
	flex:0 0 150px;
	border:5px solid #fff;
	background-color:#f96868;
	color:white;
	border-radius:100%;
	display:flex;
	flex-flow: column;
	justify-content:center;
	align-items:center;
}

footer ul { min-width: 240px; margin-bottom: 2rem; }
footer li {
	margin-bottom:0.5rem;
	
}
footer li::marker {
	color:white;
}

.facebook {
	padding-left:0rem;
	margin-left:0rem;
	list-style-image:url('facebook-white.svg');
	list-style-position:inside
}

.facebook:before {
	content:' \2000'
}

.youtube {
	list-style-image:url('youtube.svg');
	list-style-position:outside;
	margin-left:2.5rem;
}


.tartam {
	font-weight:600;
	font-size:1.5rem;
	background-color:#f96868;
	color:white;
	border-radius:100%;
	border:0px solid #000;
	width:50px;
	height:50px;
	display:flex;
	justify-content:center;
	align-items:center;
	flex:0 0 50px;
}

.ar {
	flex:0 0 auto;
	background-color:white;
	align-self:start;
	padding:0.5rem 1rem;
	border:1px solid #f96868;
	box-shadow:5px 5px 0px -0px #f96868;
}


/*  responsive */
@media screen and (max-width:576px)
{ .circle {transform:scale(1.5); margin:3rem 0}}

@media screen and (max-width:768px)
{
	#mainnav  { display:none; }
	#mainnav  { 
		position:absolute;
		top:80px;
		background:#fff; 
		color:#000; 
		height:calc(100vh - 80px);
		width:100%;
		padding:5rem 0;
		flex-direction:column;
		justify-content:start;
		align-items:center;
	}
	#mainnav:after { display:block; clear:both; content:' ';}
	#mainnav li { height:50px; text-transform:uppercase;
	padding:0; margin-bottom:2rem; 
		text-align:center; }
	#mainnav li  a { 
		line-height:50px;
		font-size: 1.2rem;
		font-weight:300;
		font-family:Bitter;
	}
}


@media screen and (min-width: 576px) 
{
	.sm-row { flex-direction: row; }
	.sm-row .half { width:45%; flex-basis:45%; }
	.sm-row.center { justify-content:center; align-items:normal; }
	#logo { font-size:40px; }
	.spacebox { min-width:240px; max-width:240px;}
	.circle {transform:scale(1.2); margin:0 1rem}
}

@media screen and (min-width: 768px) 
{
	#hambi { display:block; }
	#nagy { background-position:top 80px right;	}
	.md-row    { flex-flow: row; justify-content:space-between; }
	.md-row .half { width:45%; flex-basis:45%; }
	.md-row.center { justify-content:center; align-items:normal; }
	.md-half { max-width: 50%; }
	.circle {transform:scale(1.4); margin:2rem 3rem}
}

@media screen and (min-width: 992px) 
{ 
	.icon { font-size:20px;}
	.lg-row    { flex-flow: row; }
	.lg-row .half { width:45%; flex-basis:45%; }
	.lg-row.center { justify-content:center; align-items:normal; }
	#nagy	{ background-position:top 80px center; }
}