html, body {height:100%; padding:0; margin:0; background:#eee;}
body {overflow-x:hidden;}
#wrapper {height:100%; width:100%; min-width:320px;}

header {display:block; padding:0; box-sizing:border-box; width:95%; max-width:1200px; margin:0 auto; background:#fff;}
.logo {display:inline-block; box-sizing:border-box; width:40%; vertical-align:top; padding:5px 10px 5px 160px; margin:0;}
header p.motto {display:inline-block; box-sizing:border-box; width:45%; vertical-align:top; padding:18px 10px 5px 130px; margin:0; font-size:0.8em; font:arial, serif; color:#555; text-align:justify;}

section {display:block; padding:40px 0; box-sizing:border-box; width:95%; max-width:1200px; margin:0 auto;}

article.col {display:inline-block; box-sizing:border-box; width:30%; vertical-align:top; margin:5px 0;}
article.col:nth-child(3n+2) {margin:5px 5%;}
article.col_one {display:inline-block; box-sizing:border-box; width:76%; height:100%; vertical-align:top; margin:5px 14%;}
article {display:block; width:100%;}
article h3 {padding:5px; margin:0; font:300 30px/35px 'Open+Sans', arial, serif; color:#799354;}
article p {padding:5px; margin:0; font:300 18px/25px, arial, serif; color:#555; text-align:justify}
article a, a:visited {color:#799354; text-decoration: none;}
article a:hover, a:visited:hover {color:#99dd33; text-decoration: none;}

footer {display:block; position:relative; bottom:0; width:100%; background:#242424; padding:8px 0 16px 0; box-sizing:border-box; text-align:center;}
footer p {padding:20px 0; margin:0; font:300 16px/24px 'Times New Roman', arial, serif; color:#fff;}

#sn_menu_icon {display:block; width:41px; height:41px; position:fixed; right:70px; top:20px; z-index:10010; background:#242424;}
#sn_menu_icon .sn_menu_toggle {display:block; width:41px; height:41px; cursor:pointer;}
#sn_menu_icon .sn_menu_toggle .bar {display:block; width:17px; height:3px; background:#fff; position:absolute; left:12px; top:19px; transition: background 0s 0.3s 1s;}
#sn_menu_icon .sn_menu_toggle .bar::before {content:""; display:block; width:17px; height:3px; background:#fff; position:absolute; left:0; top:-6px; transform-origin:left top; transition: 0.3s;}
#sn_menu_icon .sn_menu_toggle .bar::after {content:""; display:block; width:17px; height:3px; background:#fff; position:absolute; left:0; top:6px; transform-origin:left bottom; transition: 0.3s;}

#sn_menu_panel {width:25%; height:35%; position:fixed; left:-100%; top:0; z-index:10000; transition:0.5s; 
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;
}
#sn_menu_panel #sn_menu_left {width:50%; height:100%; background:#242424 url(../slides/menu-back.jpg) no-repeat left center; background-size:cover;
  display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center;
}
#sn_menu_panel #sn_menu_left h1 {text-align:center; padding:0; margin:0; font:50px/70px 'Open Sans', arial, serif; color:#fff;}
#sn_menu_panel #sn_menu_left #social {text-align:center; width:100%;}
#sn_menu_panel #sn_menu_left .social {color:#fff; display:inline-block; font-size:20px; margin:5px; transition:0.2s;}
#sn_menu_panel #sn_menu_left .social:hover {color:#666;}
#sn_menu_panel #sn_menu_left p {font:300 16px/25px 'Lato', sans-serif; color:#fff; text-align:center;}


#sn_menu_panel #sn_menu_right {order:2; width:55%; height:70%; background:transparent; font:100 14px/18px 'Open+Sans', sans-serif; color:#aaa; overflow-y:auto; -webkit-overflow-scrolling: touch;
  display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center;
}

#sn_menu_right #sn_menu {width:calc(50% - 100px); max-width:200px; min-width:150px; margin:0 auto;}
#sn_menu_right #sn_menu p {padding:1px 0 1px 60px; margin:0; font:100 14px/18px 'Open+Sans', sans-serif; color:#000;}
#sn_menu_right #sn_menu p a {color:#799354; text-decoration:none;}
#sn_menu_right #sn_menu p a:hover {color:#99dd33;}

input#sn_menu {display:none;}

input#sn_menu:checked ~ #wrapper {height:100%; overflow:hidden; transition:0s;}
input#sn_menu:checked ~ #sn_menu_icon .sn_menu_toggle .bar {background:transparent; transition:0s;}
input#sn_menu:checked ~ #sn_menu_icon .sn_menu_toggle .bar::before {transform: rotate(45deg); width:18px; left:3px;}
input#sn_menu:checked ~ #sn_menu_icon .sn_menu_toggle .bar::after {transform: rotate(-45deg); width:18px; left:3px;}
input#sn_menu:checked ~ #sn_menu_panel {left:0; transition:0.5s;}

span {display: inline-block; width: 51px;}
span.apro {display: inline-block; width: 2px;}
span.kicsi {display: inline-block; width: 63px;}
span.nagy {display: inline-block; width: 80px;}
span.orias {display: inline-block; width: 110px;}
span.gigasz {display: inline-block; width: 212px;}


@media only screen and (max-width: 640px) {
header {height:70px;}
header h1 {margin:0 0 0 10px; font:400 30px/70px 'Lato', arial, serif;}
#sn_menu_icon {right:10px;}
#sn_menu_right #sn_menu {min-width:260px; margin:0 auto;}
#sn_menu_panel #sn_menu_left {width:0; display:none;}
#sn_menu_panel #sn_menu_right {width:100%; min-width:320px;}
article.col:nth-child(3n+2) {margin:20px 0;}
article.col {display:inline-block; box-sizing:border-box; width:45%; vertical-align:top; margin:20px 0;}
section article.col:nth-child(even) {margin:20px 8% 20px 0;}
}
@media only screen and (max-width: 480px) {
section article.col {width:95%; margin:20px auto;}
#sn_menu_right #sn_menu {margin:0 0 0 10px;}
table thead th:last-child {display:none;}
table tr td:nth-of-type(4) {display:none;}