body {
    background: url(../images/bg_body.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'RailwayRegular';
}
.mobile-nav {
    display: none;
    visibility: hidden;
}
.btn-navbar,
.mobile-search,
.mobile-list,
.mobile-layer,
.mobile-list-nav,
.slick-slider {
    display: none;
}
header {
    width: 1000px;
    padding: 10px;
    margin: 20px auto;
    /*background: #fdf6ea;*/
    background: rgba(253, 246, 234, 0.85);
    border-radius: 5px;
}
a {
    color: #182451;
    transition: all 0.5s ease;
}
header div a {
    font-size: 17px;
    display: block;
    border-radius: 4px;
    /*background: #fdf6ea;*/
    padding: 10px;
    /*border: 2px solid #182451;*/
    margin-top: 14px;
    font-weight: normal;
}
header div a i {
    color: #dd0035;
    display: inline-block;
    margin-right: 10px;
}
a.fblogin, a.glogin {
    display: block;
    background: transparent url(../images/bg_fblogin.gif) no-repeat 0 0;
    width: 220px;
    height: 35px;
    line-height: 35px !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: normal;
    padding-left: 40px;
    margin: 15px 0 15px 0;
    float: left;
    clear: both;
}
a.glogin {
  margin-top: 0;
  background: transparent url(../images/bg_glogin.gif) no-repeat 0 0;
}
h2 {
    font-weight: normal;
    color: #038C03;
    font-size: 20px;
}
h3 {
    font-weight: normal;
    color: #182451;
    font-size: 17px;
}
.rightside h3 {
    margin: 15px 0 10px 0;
    border-bottom: 1px solid #e2d6c1;
    padding-bottom: 5px;
    float: left;
    width: 100%;
}
.regDiv {
  float: left;
  border-top: 1px solid #e2d6c1;
  padding: 0 30px;
  width: 100%;
}
.ui-dialog h2 {
    margin: 20px 0 10px 0;
}
.ui-dialog input {
    background: #ffffff;
    border: 1px solid #e2d6c1;
    width: 100%;
    clear: both;
    overflow: hidden;
    border-radius: 3px;
    padding: 9px 10px;
    margin-bottom: 15px !important;
}
section {
    width: 1000px;
    margin: 0 auto;
}
.leftside,
.rightside {
    float: left;
    width: 300px;
    padding: 20px;
    margin: 20px 0;
    /*background: #fdf6ea;*/
    background: rgba(253, 246, 234, 0.85);
    border-radius: 5px;
}
.leftside {
    width: 660px;
    margin-right: 40px;
}
.rightside p {
    color: #038C03;
}
hr {
    height: 1px;
    border: 0;
    background: #e2d6c1;
    margin: 10px 0;
    width: 100%;
    float: left;
}
.answers {
    padding: 15px 0 20px 10px;
    float: left; width: 100%
}
.answers label.radio {
    float: left; clear: none
}

.test h2 span {
    border: 2px solid #182451;
    padding: 5px 0;
    width: 40px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    position: absolute;
    top: 0;
    left: 0;
}
.test h2 {
    float: left;
    width: 100%;
    clear: both;
    min-height: 50px;
}

h2.list {
    position: relative;
    padding-left: 50px;
}

.pager {
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 20px 0 10px 0;
    float: left;
    vertical-align: middle;
}
.pager span {
    padding: 0 10px;
    color: #dd0035;
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
}
.pager a i {
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
}
.pager a {
    font-size: 24px;
    padding-top: 3px;
    display: inline-block;
    line-height: 20px;
}
.test.multiple .pager,
.test .test-item {
    display: none;
}

.test.multiple .test-item,
.test .test-item.active {
    display: block;
}
.test-item.done {
    opacity: 0.5;
}

ul {
    width: 100%;
    clear: both;
    font-size: 14px;
    color: #818181;
    line-height: 20px;
    margin: 10px 0 10px 20px;
}
.answer-item {
    float: left;
    width: 50%;
}
h4 {
    text-align: center;
    font-size: 24px;
    font-weight: normal;
}
h4 strong { color: green }

p { margin: 15px 0 }
.tac { text-align: center }

/**                 **\
    HTML szerkesztő
\**                 **/

div.html * { font-family:'RailwayRegular'; font-size: 14px; color: #038C03; line-height: 22px; }
div.html strong,div.html b,p.lead,div.html h2,div.html h3,div.html h4,div.html h5,div.html h6, div.html table th { font-family:'RailwayRegular';  font-weight: normal }
div.html h2,div.html h3,div.html h4,div.html h5,div.html h6 { font-family:'RailwayRegular'; font-weight: normal }
div.html tt, div.html code, div.html kbd, div.html samp { font-family: monospace; font-size: 14px }
div.html sub, div.html sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
div.html sup { top: -0.5em }
div.html sub { bottom: -0.25em }
div.html h2 { font-size: 20px; color: #dd0035; margin: 0 0 15px 0 }
div.html h3 { margin: 15px 0 10px 0; border-bottom: 1px solid #e2d6c1; padding-bottom: 5px; float: left; width: 100% }
div.html h4 { font-size: 14px }
div.html h5 { font-size: 12px }
div.html h6 { font-size: 10px }
div.html a { color: #182451 }
div.html kbd { font-family: monospace; margin: 0 0.1em;  padding: 2px 5px; border-radius: 3px; border: 1px solid rgb(204, 204, 204); color: rgb(51, 51, 51); font-size: 10px; display: inline-block; box-shadow: 0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 0px 2px #ffffff; background-color: rgb(247, 247, 247); -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; -moz-border-radius: 3px; -webkit-border-radius: 3px; text-shadow: 0 1px 0 #fff; line-height: normal }
div.html ul,div.html dl,div.html dir,div.html menu,div.html ol { margin: 15px 10px; list-style: none; padding: 0 }
div.html ol li,div.html dl dt,div.html menu li,div.html dir li,div.html ul li { padding-left: 15px; position: relative }
div.html ol li:before, div.html menu li:before, div.html dl dt:before, div.html dir li:before, div.html ul li:before { display: block; position: absolute; width: 5px; height: 5px; content: ""; background: #59c4c5; left: 0; top: 10px }
div.html table { max-width: 100%; border-collapse: collapse }
div.html table caption { font-size: 12px }
div.html table th { padding: 5px; border: 1px solid #e2d6c1 }
div.html table td { padding: 5px; border: 1px solid #e2d6c1 }
div.html dl dd { font-size: 20px; position: relative; padding-left: 15px }
div.html hr { margin: 15px 0; border: 0; width: 100%; background: #e2d6c1; height: 1px }
.quote, .html blockquote { border-top: 1px solid #e2d6c1; border-bottom: 1px solid #e2d6c1; color: #8f8f8f; font-size: 28px; font-family:'RailwayRegular'; line-height: 32px; padding: 30px 30px 30px 65px; margin: 20px 0; position: relative }
.html blockquote:before, .quote:before { display: block; position: absolute; width: 47px; background: #fff; font-size: 22px; top: -8px; left: 22px; text-align: center }
div.html p span { font-family:'RailwayRegular' !important; line-height: 22px !important; font-size: 14px !important; color: #818181 !important }

/**              **\
    Media query
\**              **/

@media (min-width: 760px) and (max-width: 1024px) {
    header { width: 760px; padding: 5px; margin: 10px auto;
    }
    header a img {width: 250px; height: auto }
    section { width: 760px }
    .leftside { width: 510px; margin: 0 10px 10px 0; padding: 10px }
    .rightside { width: 240px; padding: 10px; margin: 0 }
    div.html p, div.html li { font-size: 13px; line-height: 19px }
    div.html h2, h2 { font-size: 17px; margin: 0 0 10px 0 }
    .rightside h3 { margin: 5px 0 10px 0; font-size: 16px }
    .selectContainer li label, label.checkbox, label.radio { padding: 9px 10px; font-size: 13px !important }
    label.radio i:before { font-size: 16px !important }
    a.button, button { padding: 0 15px !important; height: 30px !important; line-height: 30px !important; font-size: 13px !important }
    .selectContainer li label i, label.checkbox i, label.radio i { margin: 0 5px 10px 0 !important }
    .answers { padding: 5px 0 10px 10px }
}

@media (max-width: 760px) {
    header { width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); margin: 10px; }
    header a img {width: 150px; height: auto }
    section { width: 100%; padding: 0 10px 10px 10px }
    .leftside { width: 100%; margin: 0 0 10px 0}
    .rightside { width: 0; display: none }
    .mobile-nav.open { -ms-transform: translate3d(0px, 0px, 0px);  -webkit-transform: translate3d(0px, 0px, 0px);  transform: translate3d(0px, 0px, 0px);  display: block;  visibility: visible; } 
    .mobile-nav {  width: 100%;  margin: 0;  padding: 0;  background: #fff;  z-index: 10000;  *-ms-transform: translate3d(-261px, 0px, 0px);  -webkit-transform: translate3d(-261px, 0px, 0px);  transform: translate3d(-261px, 0px, 0px);  transition-property: -ms-transform, -webkit-transform, transform;  transition-duration: 0.3s;  position: absolute;  top: 50px;  left: 0;  float: none;  height: auto;  line-height: normal;  overflow-y: auto; }
    .mobile-nav li {  line-height: normal;  margin: 0;  float: none;  background: transparent; }  
    .mobile-layer.open { display: block; width: 100%; height: 100%; z-index: 10; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.5); visibility: visible; }  
    .btn-navbar { display: block; border: none; margin: 0; position: absolute; top: 13px; right: -10px; z-index: 999; cursor: pointer; font-size: 27px; background: #182451; color: #fff; border-radius: 5px 0 0 5px; padding: 5px 5px 0 5px;  }
    header {position: relative }
    .rightside.open { width: calc(100% - 47px); width: -webkit-calc(100% - 47px); width: -moz-calc(100% - 47px); position: absolute; top: 0; right: 0; z-index: 999; border-radius: 5px 0 0 5px; margin: 0; background: #182451; display: block }
    .rightside h2 { color: #fff; font-size: 17px; margin: 0 0 10px 0 }
    .rightside h3 { margin: 5px 0 10px 0; font-size: 15px; color: #fff; border-bottom: 1px solid #fff; font-weight: normal }
    .selectContainer li label, label.checkbox, label.radio { padding: 9px 10px; font-size: 13px !important; }
    .rightside label.checkbox, .rightside label.radio { color: #fff !important; }
    .rightside p { color: #fff }
    .rightside label.radio i:before { color: #fff !important; }
    label.radio i:before { font-size: 15px !important }
    .btn-navbar.open { left: 0; right: auto }
    .rightside ul { font-size: 13px; color: #fff; line-height: 18px; margin: 10px 0 10px 10px }
    .rightside strong { font-weight: normal }
    .rightside a { color: #fff; text-decoration: underline }
    .rightside h4 { color: #fff !important; }
    .rightside h4 strong { color: #fff !important; }
    .test h2 span { border: 1px solid #182451; width: 30px; font-size: 14px }
    h2.list { padding-left: 40px }
    .test h2 { min-height: 40px; font-size: 15px }
}