/* Általános reszponzív alapbeállítások */
html, body {
    height: 100%;
    font-size: 16px; /* Alapértelmezett betűméret */
}

body {
    margin: 0;
    padding: 0;
    background: #181818;
    font-family: 'Didact Gothic', sans-serif;
    color: #FFF;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
}

p, ol, ul {
    margin-top: 0;
}

ol, ul {
    padding: 0;
    list-style: none;
}

p {
    line-height: 180%;
}

strong {
}

a {
    color: #ee0000;
}

a:hover {
    text-decoration: none;
}

.container {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px; /* A maximális szélesség a nagy képernyőkön */
}

/*********************************************************************************/
/* Image Style                                                                   */
/*********************************************************************************/

.image {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box; /* Hogy a paddingok ne befolyásolják a szélességet */
}

.image img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.image-full {
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
}

.image-left {
    float: left;
    margin: 0 2em 2em 0;
}

.image-centered {
    display: block;
    margin: 0 0 2em 0;
}

.image-centered img {
    margin: 0 auto;
    width: auto;
}

/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/

ul.style1 {
}

ul.actions {
}

ul.actions li {
    display: inline-block;
    padding: 0em 0.50em;
}

/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/

ul.contact {
    margin: 0;
    padding: 2em 0em 0em 0em;
    list-style: none;
}

ul.contact li {
    display: inline-block;
    padding: 0em 0.30em;
    font-size: 1em;
}

ul.contact li span {
    display: none;
    margin: 0;
    padding: 0;
}

ul.contact li a {
    color: #FFF;
}

ul.contact li a:before {
    display: inline-block;
    background: #3f3f3f;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #FFFFFF;
}

ul.contact li a.icon-twitter:before { background: #2DAAE4; }
ul.contact li a.icon-facebook:before { background: #39599F; }
ul.contact li a.icon-dribbble:before { background: #C4376B; }
ul.contact li a.icon-tumblr:before { background: #31516A; }
ul.contact li a.icon-rss:before { background: #F2600B; }

/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

.button {
    display: inline-block;
    padding: 1em 2em 1em 2em;
    letter-spacing: 0.10em;
    margin-top: 2em;
    padding: 1.40em 3em;
    background: #2651a8;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1em;
    color: #FFF;
}

.button-alt {
    padding: 1em 2em;
    border-color: rgba(0,0,0,.8);
    color: #FFF;
}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

#wrapper {
    position: relative;
    padding: 4em 0 4em 0;  /* Csökkentett padding mobilon */
    background: #FFF;
}

/* Header Background */
#header-wrapper {
    position: relative;
    padding: 3em 0;  /* Csökkentett padding */
    background: #111111 url(images/header-bg.jpg) no-repeat center;
    background-size: cover;
    background-position: top center;  /* Jobb illeszkedés */
}

#header {
    position: relative;
    padding: 3em 0;  /* Csökkentett padding */
}

/* Logo */
#logo {
    position: absolute;
    top: 2em;  /* A logót kicsit lejjebb helyezzük */
    left: 0;
}

#logo h1 {
    font-size: 1.8em; /* A logó kisebb mobilon */
    color: #79C255;
}

#logo a {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}

/* Menu */
#menu {
    position: relative; /* Menü pozicionálás változása */
    text-align: center;
    padding-top: 4em;  /* A menü még lejjebb helyezése mobilon */
}

#menu ul {
    display: inline-block;
}

#menu li {
    display: inline-block;
    padding: 0.5em; /* Kevesebb padding mobilon */
    font-size: 0.8em; /* Kisebb betűméret mobilon */
}

#menu li a, #menu li span {
    padding: 0.8em 1.2em;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.80);
}

#menu .active a {
    background: #2651a8;
    border-radius: 6px;
    color: rgba(255, 255, 255, 1);
}

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

#banner {
    padding-top: 7em;  /* A banner tetejét is lefelé mozdítottam */
    text-align: center;
}

#banner .title h2 {
    font-size: 3.5em; /* Kisebb címek mobilon */
}

#banner .title .byline {
    font-size: 1.8em;
}

#banner .button {
    margin-top: 2em;
    padding: 1.40em 3em;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1em;
}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

#footer {
    text-align: center;
    padding: 2em 0;
}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

#copyright {
    overflow: hidden;
    padding: 2em 0em;
    border-top: 1px solid rgba(0,0,0,0.08);
}

#copyright p {
    text-align: center;
    font-size: 0.9em;
    color: rgba(255,255,255,0.3);
}

#copyright a {
    text-decoration: none;
    color: rgba(255,255,255,0.6);
}

/*********************************************************************************/
/* Welcome                                                                       */
/*********************************************************************************/

#welcome {
    position: relative;
    padding: 4em 0em 4em 0em;
    background: #282424;
    background-size: cover;
    background-position: center;  /* A háttér jobban igazodik mobilon */
    text-align: center;
}

#welcome .container {
    width: 100%;
    padding: 0px 20px; /* Jobb padding mobilon */
    color: rgba(255,255,255,0.8);
}

#welcome a {
    color: rgba(255,255,255,1);
}

#welcome .button {
    background: #FFF;
    color: #2651a8;
}

/*********************************************************************************/
/* Extra                                                                         */
/*********************************************************************************/

#three-column {
    text-align: center;
    color: rgba(0,0,0,0.6);
}

#three-column .fa {
    display: block;
    padding: 1em 0em;
    color: rgba(0,0,0,1);
    font-size: 2em;
}

#three-column .title h2 {
    font-weight: bold;
    color: rgba(0,0,0,0.8);
}

#three-column .title .byline {
    text-align: center;
    color: rgba(0,0,0,.5);
}