/* BVF STYLE for Hibabejelentes v2.0.0 */


/* -------------------------- generic styles START ------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6, p, pre, address, blockqoute, span, ul, ol, li, dl, dd, dt, img, form, fieldset, input {
	padding: 0px;
	padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px;
	margin: 0px;
}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, th {
	font-weight: normal;
	font-size: 12px;
	font-style: normal;
}
fieldset, img {
	border-top-style: none; 
	border-right-style:none; 
	border-left-style:none; 
	border-bottom-style:none; 
}

input, select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

caption, th {
	text-align: left;
}

ul, ol{
    margin-left: 20px;
}

a{
	text-decoration: underline;
	color: inherit;
    outline : none;
}

	a:hover{
		text-decoration: none;
	}

table {
	BORDER-COLLAPSE: collapse; border-spacing: 0;
}

html{
    height: 100%;
}

body{
    display: block !important;
    background: #f7f7f7;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    min-height: 100% !important;
    width: 100%;
}

.center{
    margin: 0 auto;
    max-width: 1170px;
    width: 95%;
}

/* -------------------------- generic styles END ------------------------*/
/* -------------------------- helper styles START------------------------*/

/* ========= preloading ========== */
#preloading{
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
    position: fixed;
    display: table;
    text-align: center;
    z-index: 100;
    
     -moz-animation: cssAnimation 0s ease-in 1s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 1s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 1s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 1s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
        visibility:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}


#preloading #preload{
    display: table-cell;
    vertical-align: middle;
    position: relative;
    color: #fff;
    font-size: 50px;
}

#preloading #preload .loader {
    border: 7px solid #fff;
    border-top: 7px solid #4ac8ed;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    text-align: center;
    margin: 50px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/* ========= loading ========== */
#loading, #success{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    display: none;
    text-align: center;
    z-index: 1000;
}

#loading #loadtext, #success #loadtext{
    display: table-cell;
    vertical-align: middle;
    position: relative;
    color: #fff;
    font-size: 50px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 10%;
}

#loading #loadtext .loader {
    background-image: url(images/send.svg);
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    animation: loadsend 2s infinite;
    animation-timing-function: ease-in;
    position: absolute;
    margin-top: 40px;
}

@keyframes loadsend {
    0% { left: -100px; }
    100% { left: 100%;  }
}


/* ========= alert ========== */

#alert, .alert {
    padding: 30px 20px;
    color: white;
    box-shadow: 14px 13px 20px 0px rgb(0 0 0 / 25%);
    position: fixed;
    z-index: 999;
    top: 25px;
    left: 0;
    right: 0;
    border-radius: 10px;
    width: calc(69% - 40px);
    max-width: 1000px;
    display: none;
    margin: 0 auto;

    background: #f44336;
    border: solid 1px #bd392f;
}

#alert #errormsg, .alert .errormsg{
    text-align: center;
    font-weight: 600;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

.aszf{
    background: #f0f0f0;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    padding-top: 28px !important;
}

.aszfagree-text{
    text-align: center;
    font-size: 16px;
    color: #172945;
    font-weight: 600;
}

.aszfagree{
    clear: both;
    margin: 0 auto;
    max-width: 300px;
    display: table;
}

.aszfagree .close{
    float: left;
    margin: 10px; 
    width: auto;  
}

.aszfagree .close.nem{
    background: #efefef;
}

@media only screen and (max-width: 380px), only screen and (max-device-width: 380px) {
    .aszfagree .close{float: none;}
}

.aszfagree.enaplo{
    max-width: 800px;
}

/* ========= modal ========== */

/* The Modal (background) */
.fullscreen {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    /*padding-top: 200px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* width */
  .fullscreen::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .fullscreen::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
  }
   
  /* Handle */
  .fullscreen::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  .fullscreen::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

/* Modal Content */
.fullscreen-content {
    text-align: left;
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 10px;
    outline: 0;
    margin: 10% auto;
    padding: 0;
    width: 60%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.fullscreen-content .body-inner{
    display: flex;
    margin: 25px 0 0;
}

.fullscreen-content .body-inner .body-image{
    width: calc(100% - 4px);
    margin: 0 10px 20px 10px;
}

.fullscreen-content img{
    max-width: 350px;
    width: 100%;
    border-radius: 25px;
    border: solid 1px #dfdfdf;
    margin: 0 auto;
    display: block;
}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.fullscreen-close {
    color: #d4d4d4;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-top: -5px;
    margin-left: 20px;
}

.fullscreen-close:hover,
.fullscreen-close:focus {
    color: #4ac8ed;
    text-decoration: none;
    cursor: pointer;
}

.close{
    text-align: center;
    padding: 10px 25px;
    background-color: #e6f9ff;
    border: solid 1px #4ac8ed;
    color: #172945;
    border-radius: 100px;
    margin: 10px auto 15px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s;
    width: min-content;
    position: relative;
    padding-left: 50px;
    font-size: 15px;
}

.close::before{
    content: "";
    padding-left: 40px;
    background-size: 18px;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url(images/no_btn_act2.png);
    position: absolute;
    left: 15px;
    width: 20px;
    top: 0;
    bottom: 0px;
}

.close.nem{
    background: #fff  !important;
	color: #172945;
}
.close.nem::before{
    background-image: url(images/no_btn_act2.png);
}

.close.nem:hover{
    background: #afe6f7 !important;
}

.close.enaplo{
}

.close:hover{
    background: #afe6f7;
}

.grecaptcha-badge {
    display: none;
}

.fullscreen-header {
    padding: 25px 30px 20px;
    color: #5c697c;
    font-size: 25px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    border-bottom: solid 1px #d4d4d4
}

.fullscreen-body {
    font-size: 16px;
    color: #5c697c;
    position: relative;
    padding: 20px 30px;
}

.fullscreen-body p{
    font-size: 16px;
    display: block;
    vertical-align: inherit;
    padding-bottom: 7px;
}

.fullscreen-body p span.ss{
    font-weight: 700;
    color: #e9c04b;
}

.fullscreen-body h2{
    font-size: 17px;
    font-weight: 800;
    padding-top: 10px;
    padding-bottom: 3px;
}

.fullscreen-body h3{
    font-size: 16px;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 7px;
}

.fullscreen-footer{
    padding: 5px 16px 20px;
}

.fullscreen .fullform{
    width: 100%;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
}

.fullscreen .fullform input{
    width: 90%;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    background: none;
    border:none;
    outline: 0;
    color: #fff;
}

.fullscreen .fullform button{
    background: none;
    border: none;
    padding: 0 0 0 10px ;
    float: right;
}

.fullscreen .fullform button i{
    color: #fff;
    font-size: 2em;
}

.fullscreen .fullform button i:hover{
    color: rgba(255, 255, 255, 0.5);
}

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    .fullscreen-content{width: 80%}
}

@media only screen and (max-width: 680px), only screen and (max-device-width: 680px) {
    .fullscreen-content{width: 90%}
}

@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
    .fullscreen .fullform input{width: 80%}
}

img.ervenyessegi{
    max-width: 60%;
    margin: 25px auto 0;
    display: block;
    box-shadow: 0 5px 16px rgba(0,0,0,0.2);
    border-radius: 13px;
    cursor: pointer;
}

/* Iframe */
.fullscreen-body.iframe{
    position: relative; 
    overflow: hidden; 
    /*padding-top: 56.25%;*/
    min-height: 500px;
}

.fullscreen-body.iframe iframe{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border:none;
}

/* ========= datepicker ========== */

.ui-widget{
    font-family: 'Open Sans', sans-serif !important; 
}

.ui-datepicker{
    padding: 0!important;
    max-width: calc(100% - 25px) !important;
}

.ui-widget.ui-widget-content{
    border:none !important;
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.2) !important;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{
    border-radius: 10px;
}

/* hétvége kikapcs */
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}

.ui-widget-header{
    background: #f5f5f5 !important;
    border-radius: 0px !important;
    border: none !important;
}

.ui-datepicker .ui-datepicker-title{
    text-align: center;
    font-weight: 600;
    text-transform: lowercase;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{
    background: none !important;
}

.ui-datepicker table{
    margin-bottom: 3px !important;
}

.ui-datepicker thead{
    background: #f5f5f5 !important;
    border-bottom: 3px solid #fff;
}

.ui-datepicker-next, .ui-datepicker-prev{
    cursor: pointer;
}

.ui-datepicker thead th{
    pointer-events: none;
}

.ui-datepicker tr{
    height: 28px !important;
}

.ui-datepicker td span, .ui-datepicker td a{
    text-align: center!important;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
    background: #c0ecf9  !important;
    border: solid 1px #fff !important;
    transition: all 0.4s !important;
}

.ui-state-default:hover, .ui-widget-content .ui-state-default:hover, .ui-widget-header .ui-state-default:hover{
    background: #94cdde !important;
    color: #fff;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled{

}

.ui-state-disabled .ui-state-default, .ui-state-disabled .ui-widget-content{
    background: #f6f6f6 !important;
}

/* kiválasztott dátum */
.ui-state-active, .ui-widget-content .ui-state-active{
    box-shadow: 0 0 0 2px #e9c04b inset;
    color: #454545 !important;
}

/* ma */
.ui-datepicker-today{
    box-shadow: 0 0 0 2px #4ac8ed inset;
}


.highlight .ui-state-default{
    background: #e9c04b !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.highlight .ui-state-default:hover{
    background: #e9c04b !important;
}

/* multi */
.ui-datepicker-multi .ui-datepicker-group table{
    width: 100% !important;
}

.ui-datepicker-multi-2 .ui-datepicker-group-first tbody{
    border-right: 7px solid #FFF;
}

.ui-datepicker-multi-2 .ui-datepicker-group-last tbody{
    border-left: 7px solid #FFF;
}

/* ========= datepicker érvényességi időhöz ========== */
.ervenyesido th.ui-datepicker-week-end, .ervenyesido td.ui-datepicker-week-end{
    display: table-cell;
}

.ervenyesido .ui-state-default, .ervenyesido.ui-widget-content .ui-state-default, .ervenyesido .ui-button, html .ervenyesido .ui-button.ui-state-disabled:hover, html .ervenyesido .ui-button.ui-state-disabled:active{
    background: #f6f6f6 !important;
}

.ervenyesido .ui-state-default:hover, .ervenyesido.ui-widget-content .ui-state-default:hover, .ervenyesido .ui-widget-header .ui-state-default:hover{
    color: inherit!important;
    background: #dfdfdf !important;
}




/* ========= infó ikon ========== */
.instr{
    font-size: 11px;
    margin-right: 6px;
    color: #e9c04b;
    cursor: pointer;
    text-transform: none;
    border-radius: 100px;
    width: 13px;
    height: 13px;
    display: inline-block;
    text-align: center;
    line-height: 14px;
    border: solid 2px #e9c04b;
    font-weight: 700;
}

.instr:hover{
    background: #e9c04b;
    color: #fff;
}


/* ========= figyelmeztető szöveg blokk ========== */
.csatolas{
    color: #424242;
    float: left;
    width: calc(100% - 42px);
    font-size: 14px;
    line-height: 20px;
    padding: 15px 20px;
    margin: 30px 0 0 0;
    border-radius: 10px;
    border: 1px #d09900 solid;
    text-align: center;
    font-weight: 600;
    background: rgba(233,192,75,0.73);
    position: relative;
    overflow: hidden;
}

.csatolas .csattext{
    position: relative;
}

.csatolas .csatbg{
    width: 60px;
    height: 60px;
    font-size: 52px;
    line-height: 52px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    color: #e9c04b;
    text-transform: none;
    border-radius: 100px;
    display: inline-block;
    text-align: center;
    border: solid 4px #e9c04b;
    opacity: 0.7;
    transform: scale(1.5);
}

.csatolas.marginnone{
    margin-top: 0;
}

/* -------------------------- helper styles END ------------------------*/
/* -------------------------- header styles START ------------------------*/
header{
    width: 100%;
    display: flex;
    padding: 30px 0;
    color:#172945;
    position: relative;
    z-index: 1;
}
header #header1{
    flex: 1;
    z-index: 100;
    max-width: 500px;
    padding: 0 65px;
}
header #header2{
    flex: 4;
    padding: 0 35px 0 0;
}
header #logo{
    margin: -30px auto 0;
    display: block;
    width: 176px;
}
header #logo img{
}
header #title{
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    margin-top: 19px;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
}
header #back{
    float: right;
    text-decoration: none;
    margin-top: 20px;
    z-index: 100;
    position: relative;
}
header #back img{
    width: 20px;
    padding-left: 10px;
    margin-bottom: -3px;
}
/* -------------------------- header styles END ------------------------*/
/* -------------------------- content styles START ------------------------*/

main{
    position: absolute;
    display: flex;
    width: 100%;
    height: calc(100% - 123px);
    /*min-height: 500px;*/
}

/* ========= instruction ========== */
main #instruction{
    position: relative;
    flex: 1;
    color: #fff;
    background: #172945;
    padding: 0 65px 10px;
    max-width: 500px;
    min-height: 450px;
    border-top-right-radius: 40px;
    /*box-shadow: 0 0 24px 5px #cacaca;*/
    /*box-shadow: 0 0 14px 2px #cacaca;*/
}

main #instruction #instruction-bg{
    height: 100%;
    width: 100%;
    /*width: calc(100% - 130px);*/
    background: url(images/bgpattern.svg?5);
    /*background-repeat: no-repeat;*/
    background-size: 100%;
    background-position: 0 bottom;
    position: absolute;
    left: 0;
    opacity: 0.3;
}

/* Tabs */
main #instruction .description{
    margin-top: 70px;
    position: absolute;
    width: calc(100% - 65px);
}
main #instruction .description .tab{
    display: block;
    width: 100%;
    float: right;
    margin-bottom: 18px;
    clear: both;
}
main #instruction .description .tab.active{
    padding-left: 30px;
    background: #f7f7f7;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
main #instruction .description .tab .tabtext{
    float: left;
    line-height: 46px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
}
main #instruction .description .tab.active .tabtext{
    color:#172945;

}
main #instruction .description .tab .tablinks{
    float: right;
    background: #f7f7f7;
    color: #c6c7c8;
    display: block;
    width: 46px;
    text-align: center;
    height: 46px;
    line-height: 46px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 19px;
    margin-right: -22.5px;
    /*border: solid 1px #a1a8b3;*/
    /*box-shadow: 0px 0px 3px 1px #d7d7d7;*/
    /*box-shadow: 0px 0px 11px 1px #f4f4f4;*/
}
main #instruction .description .tab .tablinks.r{
    display: none;
}
main #instruction .description .tab.active .tablinks{
    background: #4ac8ed;
    color: #fff;
}
main #instruction .description .tab.ready .tablinks.r{
    background: #4ac8ed;
    color: #fff;
    display: block;
}
main #instruction .description .tab.ready .tablinks.r img{
    width: 20px;
    padding-top: 14px;
}
main #instruction .description .tab.ready .tablinks.n{
    display: none;
}

/* changedate */
main #instruction .description.changedate{
    position: initial;
    width: 100%;
}
main #instruction .description.changedate img{
    margin: 0 auto;
    display: block;
    max-width: 70px;
    width: 33%;
}
main #instruction .description .changedatext{
    text-align: center;
    text-transform: uppercase;
    margin-top: 35px;
    font-weight: 600;
    font-size: 18px;
}

/* Copyright */
main #instruction #copyright{
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 12px;
    margin-top: 30px;
}

main #instruction #copyright p{
    padding-top: 7px;
}


/* ========= content ========== */
main #content{
    flex: 4;
    background: #f7f7f7;
    padding: 0px 65px 20px;
    overflow: auto;
}

main #content .section{
    margin: 0px auto 15px;
    width: 90%;
    display: none;
    max-width: 1050px;
}

main .section .innersection{
    background: #fff;
    /*box-shadow: 0 0 6px 0 rgb(0 0 0 / 10%);*/
    border: solid 1px #dfdfdf;
    overflow: hidden;
    padding: 20px 30px 10px;
    margin-bottom: 25px;
    border-radius: 10px;
    display: flex;
    flex-flow: row wrap;
}

main .innersection .line{
    width: 100%;
    /*background: #4ac8ed;*/
    float: left;
    margin: 2px 0 25px 0;
    font-size: 16px;
    color: #ffffff;
    padding: 10px 0px 10px 2px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: solid 2px #f8f8f8;
    color: #4ac8ed;
}

main .innersection .line .postswitch{
    color: #5c697c;
    font-size: 13px;
    margin-bottom: 4px;
    margin-left: 15px;
    font-weight: 700;
    float: right;
    padding-top: 2px;
}

main .innersection .line .postswitch .postatext{
    float: left;
    cursor: pointer;
}

main .innersection .line .postswitch .checkbox{
    width: 21px;
    height: 21px;
    margin-top: -2px;
    margin-left: 17px;
}

main .innersection .line .postswitch .checkbox label{
    width: 21px;
    height: 21px;
}

main .innersection .line .postswitch .checkbox label::after {
    width: 17px;
    height: 7px;
    top: -1px;
    left: 3px;
}

/* input styles */
main #content .innersection .input, #index .cubes .input{
    /*flex: 0 calc(50% - 20px);*/
    width: calc(50% - 20px);
    margin-bottom: 30px;
}

main #content .innersection .input:nth-child(even){
    margin-right: 20px;
}

main #content .innersection .input:nth-child(odd){
    margin-left: 20px;
}

main #content .innersection .input.full{
    /*flex: 1;*/
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

#index .cubes .input.full{
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}

main #content .innersection .input.full .flex{
    display: flex;
}
main #content .innersection .input.full .flex input{
    flex: 15;
}
main #content .innersection .input.full .flex input.mini{
    flex: 1;
    width: 70px;
    margin-right: 20px;
}

main #content .innersection .input .text, #index .cubes .input .inputtext{
    color: #5c697c;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
}


main #content .innersection .input#arinput{
    display: none;
}

main #content .innersection .input#arajanlat_megjelenitese{
    position: relative;
}

main #content .innersection .input#arajanlat_megjelenitese a{
    position: absolute;
    bottom: 0px;
    font-size: 14px;
    border: 1px solid #5c697c;
    border-radius: 20px;
    padding: 3px 15px;
    text-decoration: none;
    font-weight: 600;
    color: #5c697c;
}

main #content .innersection .input#arajanlat_megjelenitese a:hover{
    background: none;
    background: #5c697c;
    color: #fff;
}


main #content .innersection .input .text.ar{
    margin-top: 29px;
    font-size: 14px;
    text-transform: none;
}

main #content .innersection .input.kijelentes .text{
    float: left;
    max-width:540px;
}

main #content .innersection .infotext, #index .cubes .input .infotext{
    padding: 20px 0 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #5c697c;
}

main #content .innersection .infotext .la{
    font-size: 15px;
}

main #content .innersection .input input, #index .cubes .input input{
    border: none;
    border-bottom: solid 1px #d2d2d2;
    width: 100%;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #172945;
    padding: 5px 0;
    outline : none;
    transition: all 0.4s;
    border-radius: 0;
    background: none;
}

#index .cubes .input input{
    text-align: center;
}


main #content .innersection .input select{
    border: none;
    width: 100%;
    border-bottom: solid 1px #d2d2d2;
    width: 100%;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #172945;
    outline : none;
    padding: 5px 20px 5px 3px;
    transition: all 0.4s;
    background: url(images/down.svg?1) no-repeat 98% / 3%;
    background-color: #fff;
    text-overflow: ellipsis;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@-moz-document url-prefix() {
    main #content .innersection .input select{
        padding-left: 0px;
    }
}

main #content .innersection .input select option{
    padding: 10px;
    font-weight: 500;
}

main #content .innersection .input input:focus, main #content .innersection .input input:active, main #content .innersection .input select:focus, main #content .innersection .input input:hover, main #content .innersection .input select:hover{
    border-color: #4ac8ed;
    outline: none;
}

main #content .innersection .input input::-webkit-input-placeholder{
    /*color: #b3b3b3;*/
    color: #a7aeb9;
}
main #content .innersection .input input:-ms-input-placeholder{
    /*color: #b3b3b3;*/
    color: #a7aeb9;
}
main #content .innersection .input input::placeholder{
    /*color: #8e8e8e;*/
    /*color: #b3b3b3;*/
    color: #a7aeb9;
}

input[type=number]{
    -moz-appearance:textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

main #content .innersection input.date{
    cursor: pointer;
}



/* Textarea */
main #content textarea{
    height: 118px;
    width: calc(100% - 32px);
    border: solid 1px #d2d2d2;
    color: #172945;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    padding: 10px 15px 10px 15px;
    margin: 0 0 0 0;
    /*background: #f7f7f7;*/
    font-weight: 600;
    transition: all 0.4s;
    outline: none;
    border-radius: 6px;
}

main #content textarea:focus, main #content textarea:hover{
    border: solid 1px #4ac8ed;  
}

#postazas{
    width: 100%;
}

/* ------------RADIOBUTTON------------ */
/*  Hide radio button (the round disc)*/
input[type=radio] {
    display:none; 
}

.radiobox{
    float: left;
    /*margin-top: 10px;*/
}
/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
*/
input[type="radio"] + label {
    margin-top: 10px;
    display: inline-block;
    padding: 5px 30px 5px 15px;
    font-size: 14px;
    color: #b3b3b3;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s;
    border-radius: 100px;
    height: auto;
    min-height: 30px;
    line-height: 19px;
    position: relative;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    float: left;
    border: solid 1px #e2e2e2;
    background: #f7f7f7;
}

input[type="radio"] + label:hover {
    /*color: #4ac8ed;*/
    /*background-color: #e6f9ff;*/
    border-color: #4ac8ed;
}

input[type="radio"]:checked + label { 
   background-image: none;
    /*background-color:#4ac8ed;
    color: #fff;*/
    /*border-color: #00a9d9;*/
    background-color: #e6f9ff;
    border-color: #4ac8ed;
    color: #172945;
}

input[type="radio"]:checked + label:after{ 
    content: "";
    background-image: url(images/ok_btn_act.png);
    background-position: center;
    background-size: contain;
    background-color: #4ac8ed;
    background-repeat: no-repeat;
    border-radius: 100px;
    width: 10px;
    height: 10px;
    color: #fff;
    position: absolute;
    right: 1px;
    top: -5px;
    border: solid 3px #4ac8ed;
}

input[type="radio"]+label.radioleft{
    margin-right: 10px;
}
input[type="radio"] + label:before{
    content: "";
    padding-left: 35px;
    background-size: 18px;
    background-position: 0 0px;
    background-repeat: no-repeat;
    height: 18px;
    display: block;
    float: left;
    /*margin-top: 11px;*/
}

input[type="radio"]:checked + label:before{
    background-position-y: -18px;
}

/* IGEN, NEM */
.enaplocheck input[type="radio"]+label.radioleft:before{
    background-image: url(images/ok_btn.png?v3);
}
.enaplocheck input[type="radio"]+label.radioright:before{
    background-image: url(images/no_btn.png?v3);
}

/* MEGRENDELŐ */
.megrendelo input[type="radio"]+label.radioleft:before{
    background-image: url(images/magan_btn.png?v3);
}
.megrendelo input[type="radio"]+label.radioright:before{
    background-image: url(images/ceg_btn.png?v3);
}

/* FIZETÉSI MÓD */
.fizetesimod input[type="radio"]+label.radioleft:before{
    background-image: url(images/utalas_btn.png?v3);
    background-size: 22px;
    background-position: 0 -2px;
}
.fizetesimod input[type="radio"]:checked+label.radioleft:before{
    background-position-y: -24px;
}
.fizetesimod input[type="radio"]+label.radioright:before{
    background-image: url(images/kp_btn.png?v3);
}

/* AJÁNLAT AZONOSÍTÓ */
.arajanlat input[type="radio"]+label.radioleft:before{
    background-image: url(images/azonosito_btn.png?v3);
}
.arajanlat input[type="radio"]+label.radioright:before{
    background-image: url(images/upload_btn.png?v3);
}


/* ---------CHECKBOXES----------- */
input[type="checkbox"] {
	visibility: hidden;
}

.checkbox {
    margin-top: 3px;
    width: 30px;
    height: 30px;
    margin-left: 17px;
	position: relative;
    float: left;
}

.checkbox label {
	cursor: pointer;
	position: absolute;
    width: 30px;
    height: 30px;
	top: 0;
  	left: 0;
	background: none;
    /*border: solid 1px #e2e2e2;*/
    border: solid 1px #c1c1c1;
    border-radius: 4px;
    box-sizing: border-box;
    background: #f7f7f7;
    transition: all 0.4s;
}

.checkbox label:hover {
    border: solid 1px #4ac8ed;
}

.checkbox label:after {
    width: 25px;
    height: 11px;
    top: -1px;
    left: 5px;

    opacity: 0.0;
    content: '';
    position: absolute;
    background: transparent;
    border: 4px solid #4ac8ed;
    border-top: none;
    border-right: none;
    transform: rotate(-50deg);
    transition: all 0.4s;
}

.checkbox label:hover::after {
    opacity: 0.5;
}

.checkbox input[type=checkbox]:checked + label{
    border: solid 1px #4ac8ed;
    background-color: #e6f9ff;
}

.checkbox input[type=checkbox]:checked + label:after {
	opacity: 1;
}


/* fájl feltöltés 
input[type="file"] {
    position: absolute;
    left: 0;
    opacity: 0;
    top: 0;
    bottom: 0;
    width: 100%;
  }
  
  .upload .dropzone{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
    border: 3px dotted #bebebe;
    border-radius: 10px;
  }
  
  label.upload {
    display: inline-block;
    position: relative;
    height: 100px;
    width: 400px;
  }
  
  .upload .dropzone.dragover {
    background-color: #aaa;
  }
*/


/* -----SHOW RESULTS-------- */
.sor{
    display: flex;
    font-size: 14px;
    color: #172945;
    font-weight: 600;
    /*border-bottom: 1px solid #e1e1e1;*/
}

.sor:nth-child(odd){
    /*background: #f2f2f2;*/
}

.nev{
    flex: 1;
    padding: 10px 25px 10px 25px;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    background: #f7f7f7;
}

.kitoltes{
    flex: 2;
    padding: 10px 25px 10px 25px;
    border-bottom: 1px solid #f5f5f5;
    border-top: 1px solid #f5f5f5;
    font-weight: 500;
}

.elvalaszto{
    height: 22px;
    border-bottom: solid 1px #f5f5f5;
    border-top: solid 1px #f5f5f5;
    background: #ffffff;
}

#result_arajanlat .nev{
    border-bottom: solid 1px #fff;
}

#result_arajanlat .kitoltes{
    border-bottom: 1px solid #f5f5f5;
}

/* Mobile copyright */
main #content #mcopyright{
    display: none;
    text-align: center;
    font-size: 12px;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
}

main #content #mcopyright p{
    padding-top: 7px;
}




/* --------- */

/* Előre, vissza gombok */
main .section .navigation{
    width: 100%;
    clear: both;
    margin: 20px 0 30px;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
}

main .section .navigation .next{
    cursor: pointer;
    display: inline-block;
    transition: all 0.4s;
    background: #4ac8ed;
    border: solid 1px #3bafd2;
    color: #fff;
    box-shadow: 3px 4px 4px 0 rgba(0,0,0, 0.1);
    border-radius: 100px;
    float: right;
    padding: 12px 23px;
}

main .section .navigation .next:hover{
    background: #172945;
    border-color: #09162a;
}

main .section .navigation .next .num{
    padding-right: 0;
    padding-left: 14px;
    font-weight: 500;
}

main .section .navigation .prev{
    cursor: pointer;
    display: inline-block;
    transition: all 0.4s;
    padding: 12px 15px;
    float: left;
    color: #172945;
}

main .section .navigation .prev:hover{
    color: #4ac8ed;
}

main .section .navigation .num{
    padding-right: 14px;
    font-weight: 500;
}

main .section .navigation button{
    width: 251px;
    border: none;
    transition: all 0.4s;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Open Sans',sans-serif;
    background: #172945 !important;
    border: solid 1px #09162a !important;
    cursor: pointer;
}

main .section .navigation button .num{
    background-image: url(images/send.svg);
    width: 5px;
    height: 17px;
    background-repeat: no-repeat;
    float: right;
    margin-left: 13px;
    margin-top: 1px;
}
main .section .navigation button:hover{
    background: #4ac8ed !important;
    border: solid 1px #3bafd2 !important;
}

main .section .navigation button:hover .num{
    animation-name: send;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
@keyframes send {
    0% {margin-right: 0px; opacity: 1;}
    100% {margin-right: -20px; opacity: 0;}
}

main .section .navigation button:focus{
    outline: 0;
}

main .section .navigation .left{
    float: right;
}

main .section .navigation .right{
    float: left;
}
/* Előre, vissza gombok vége */

.grecaptcha-badge {
    display: none;
}

/* --------- Azonosító visszajelző --------- */
.response{
    display: none;
    position: relative;
    float:right;
    margin-top: -23px;
    right: 4px;
    border-radius: 4px;
    padding: 1px;
    width: 18px;
    height: 18px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
}

.response.ok{display:block; color: #36b727; font-size: 19px;margin-top:-27px}
.response.ok:after{ content: "✓";}

.response.expired{display:block; background: #ecb311; }
.response.expired::after{content: "!";}

.response.error{display:block; background: #f44336;}
.response.error::after{ content: "!";}



/* --------- Visszaigazoló oldal --------- */
#thanks{
    text-align: center;
    color: #172945;
    width: 90%;
    margin: 0 auto 0;
    padding-bottom: 50px;
    height: 100%;
  }
  
  #thanks h1{
    font-size: 30px;
    padding-bottom: 20px;
  }
  
  #thanks p{
    padding-bottom: 20px;
  }

  #thanks p.refszam{
      font-weight: 700;
  }

  #thanks p.refszam span{
      color: #4ac8ed;
  }

  #thanks a.btn{
    margin-top: 20px;
    display: block;
    color: #4ac8ed;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  #thanks .check{
    height: 125px;
    width: 125px;
    display: block;
    margin: 60px auto 60px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    border-left-color: #f7f7f7;
    animation: rotate 1.2s linear;
    animation-fill-mode: forwards;
  }
  
  @keyframes rotate {
    0%{
      border-color: #f7f7f7;
    }
    25%{
      border-color: #f7f7f7;
      border-top-color: #4ac8ed;
    }
    50%{
      border-color: #f7f7f7;
      border-top-color: #4ac8ed;
      border-right-color: #4ac8ed;
    }
    75%{
      border-color: #f7f7f7;
      border-top-color: #4ac8ed;
      border-right-color: #4ac8ed;
      border-bottom-color: #4ac8ed;
    }
    100%{
      border-top-color: #4ac8ed;
      border-right-color: #4ac8ed;
      border-bottom-color: #4ac8ed;
      border-left-color: #4ac8ed;
      transform: rotate(360deg);
    }
  
  }
  #thanks .check .check-icon{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: scaleX(-1) rotate(135deg);
    height: 56px;
    width: 28px;
    border-top: 3px solid #4ac8ed;
    border-right: 3px solid #4ac8ed;
    transform-origin: left top;
    animation: check-icon 0.8s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.2s;
  }
  @keyframes check-icon {
    0%{
      height: 0;
      width: 0;
      opacity: 1;
    }
    20%{
      height: 0;
      width: 28px;
      opacity: 1;
    }
    40%{
      height: 56px;
      width: 28px;
      opacity: 1;
    }
    100%{
      height: 56px;
      width: 28px;
      opacity: 1;
    }
  }  

  #thanks .check .error-icon{
        width: 60px;
        height: 2px;
        border-bottom: solid 3px #4ac8ed;
        position: absolute;
        opacity: 0;
        
  }

  #thanks .check .error-icon:first-child{
        transform: scaleX(-1) rotate(135deg);
        transform-origin: left bottom;
        animation: error-icon 0.8s ease;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;

        top: 29%;
        left: 34%;
  }

  #thanks .check .error-icon:last-child{
    transform: scaleX(-1) rotate(-135deg);
    transform-origin: left bottom;
    animation: error-icon 0.8s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;

    bottom: 34%;
    left: 33%;
  }

  @keyframes error-icon {
    0%{
      height: 0;
      width: 0;
      opacity: 1;
    }
    20%{
      height: 2px;
      width: 60px;
      opacity: 1;
    }
    40%{
      height: 2px;
      width: 60px;
      opacity: 1;
    }
    100%{
      height: 2px;
      width: 60px;
      opacity: 1;
    }
  }

  /* INDEX */

  #index{
    text-align: center;
    margin-top: 30px;
    padding-bottom: 100px;
  }

  #index h1{
    font-size: 25px;
    color: #172945;
    margin-bottom: 20px;
  }

  #index h2{
      font-size: 16px;
      color: #172945;
  }

  #index .cubes{
    display: flex;
    margin-top: 50px;
  }

  #index .cube{
    width: calc(100% - 100px);
    padding: 50px;
    border-radius: 10px;
    /*box-shadow: 0 0 8px 0 rgba(0,0,0,.2);*/
    transition: ease-in-out .3s;
    text-decoration: none;
    position: relative;
    background: #fff;
    border: solid 1px #dfdfdf;
  }

  #index .cube:hover{
    background: #e6f9ff;
    border-color: #4ac8ed;
  }

  #index .cube:first-child{
      margin-right: 25px;
  }

  #index .cube:last-child{
      margin-left: 25px;
  }

  #index .cube.active{
      /*background: #e6f9ff;*/
      background: #4ac8ed;
      border-color: #35a4c5;
  }
  #index .cube.active:hover{
    background: #39bbe1;
    border-color: #4ac8ed;
  }

  #index .cube img{
      display: block;
      max-width: 75px;
      margin: 0 auto;
  }

  #index .cube .text{
      color: #172945;
      text-align: center;
      text-transform: uppercase;
      font-size: 18px;
      font-weight: 700;
      margin-top: 40px;
      margin-bottom: 50px;
  }

  #index .cube.active .text{
      color: #fff;
  }

  /* gombok */
  #index .cube .close{
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    padding-left: 35px;
    padding-right: 35px;
    font-family: 'Open Sans';
  }

  #index .cube .close::before{
    display: none;
  }

  /* index footer */
#index .footer{
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    bottom: 0;
    height: 45px;
}



/* -------------------------- responsive styles ------------------------*/

@media only screen and (max-width: 1360px), only screen and (max-device-width: 1360px) {
    .aszfagree.enaplo .close{float: none;}
    main #content .section{width: 100%;}
}

@media only screen and (max-width: 1170px), only screen and (max-device-width: 1170px) {
    main #instruction{padding-left: 40px; padding-right: 40px; min-width: 200px;}
    main #instruction .description {width: calc(100% - 40px);}
    img.ervenyessegi{max-width: 100%;}
}

@media only screen and (max-width: 1090px), only screen and (max-device-width: 1090px) {

}


@media only screen and (max-width: 1060px), only screen and (max-device-width: 1060px) {
    /*body{position: relative;}*/
    header{box-shadow: none !important;}
    main #instruction{position: absolute; height: calc(100% - 90px); padding: 0; top: 90px; width: auto; max-width: none; min-width: auto; background: none; border-top-left-radius: 0;}
    main #instruction #instruction-bg{background: #172945; width: 22px; border-top-right-radius: 40px; opacity: 1;}

    main #instruction .description{width:auto;margin-top: 25px; }
    
    main #instruction .description .tab{margin-bottom: 5px;}
    main #instruction .description .tab .tabtext{display: none; line-height: 38px;}
    main #instruction .description .tab .tablinks{position:relative; float: left; width: 35px;height: 35px;line-height: 35px; font-size: 16px; background: #172945;color: #fff; margin-right:-17px; /*border: solid 1px #f7f7f7;*/ border: solid 1px #172945;}
    main #instruction .description .tab.active{background: none; padding-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-top: 3px;}
    main #instruction .description .tab.active .tabtext{display: block; color: #fff; text-align: left; padding-right: 40px; background: #172945;border-top-right-radius: 50px;  border-bottom-right-radius: 50px;  position: absolute;  left: 22px; min-width: 250px; padding-left: 71px; min-width: max-content;}
    main #instruction .description .tab.active .tablinks{border: none;width: 38px;height: 38px;line-height: 38px;}
    main #instruction .description .tab.ready{margin-bottom: 2px;}
    main #instruction .description .tab.ready .tablinks{width: 30px;height: 30px;line-height: 30px;}
    main #instruction .description .tab.ready .tablinks.r{margin-left: 4px; border:solid 1px #4ac8ed;}
    main #instruction .description .tab.ready .tablinks.r img{width: 13px;padding-top:9px;}

    /* Changedate*/
    main #instruction .description.changedate img{display: none; }
    main #instruction .description .changedatext{font-size: 16px; background: #172945; color: #fff; padding: 0px 40px 0px 71px;width: calc(100% - 90px); text-align: left; left: 22px; border-radius: 0 30px 30px 0; position: absolute;min-width: max-content; margin-top: 2px; line-height: 42px;}
    main #content.changedate{padding-top: 65px;}
    /* Changedate END */

    main #content{padding-top: 65px; padding-right: 60px; padding-left: 60px;}
    main{display: block; position: initial;}
    main.enginemain{display: flex}
    main #instruction #copyright{display: none}
    main #content #mcopyright{display: block}
    main .section .navigation{margin-bottom: 105px;}

    .fullscreen-content .body-inner{ display: block;}

    #loading #loadtext, #success #loadtext{font-size:35px;}
    #loading #loadtext .loader{width: 60px;height: 60px;}

}

@media only screen and (max-width: 925px), only screen and (max-device-width: 925px) {
    /* Changedate */
    /* changedate end */
}

@media only screen and (max-width: 850px), only screen and (max-device-width: 850px) {
    header{display: block;}
    header #header1{max-width: inherit;}
    header #header2{padding: 10px 35px 0;}
    header #title{position: relative;}
    header #back{display: none; position: absolute;top: 30px; right: 35px;}

    main #instruction {top: 138px;height: calc(100% - 138px);}
    main #instruction .description{width:auto; margin-top:30px}
    main #content .innersection .input.kijelentes .text{width: calc(100% - 47px);}

    /* index */
    #index{margin-top: 20px}
    #index .cube:first-child{margin-right: 0;}
}

@media only screen and (max-width: 750px), only screen and (max-device-width: 750px) {
    main .section .innersection{padding-right: 17px; padding-left: 17px;}
    main #content{padding-right:40px; padding-left: 40px;}
    main #content .innersection .input, #index .cubes .input.full{width: 100%;}
    main #content .innersection .input:nth-child(2n){margin-right: 0;}
    main #content .innersection .input:nth-child(2n+1){margin-left: 0;}
    main #content .innersection .input .text.ar{margin-top: 0;}

    main #content form{position: relative;}
    .sor{display: block;}

    main #instruction{width: 100%;}
    main #instruction .description{width: 100%;}
    main #instruction .description :not(.tab.active):not(.tab.ready) .tablinks{width: 33px; height: 33px; line-height: 33px; font-size: 15px;margin-left: 0px;}
    main #instruction .description .tab.ready .tablinks.r{margin-left: 1px;}
    main #instruction .description .tab.active .tablinks{}
    main #instruction #instruction-bg{width: 18px;}
    main #instruction .description .tab.active .tabtext{left:18px; width: calc(100% - 60px); text-align: center; padding-right: 0; padding-left: 30px; left: 0;}

    
    main #instruction .description .changedatext{padding: 12px 25px 12px 45px;width: calc(100% - 110px); text-align: left; position: initial; min-width: auto; line-height: normal; text-align: center;}
    main #content.changedate{padding-top: 85px;}

    #thanks .check{width: 110px; height: 110px;}
    #thanks .check .check-icon{width: 22px; height: 50px; top: 54%;}
    @keyframes check-icon {
        0%{ height: 0; width: 0; opacity: 1; }
        20%{ height: 0; width: 22px; opacity: 1; }
        40%{ height: 50px; width: 22px; opacity: 1; }
        100%{ height: 50px; width: 22px; opacity: 1; }
    }
    #thanks .check .error-icon{width: 52px;}
    @keyframes error-icon {
        0%{ height: 0; width: 0; opacity: 1; }
        20%{ height: 2px; width: 52px; opacity: 1; }
        100%{ height: 2px; width: 52px; opacity: 1; }
    }

    /* index */
    #index{max-width: 90%;}
    #index .cubes{display: grid;margin-top: 40px;}
    #index .cube:last-child{margin-left: 0px;}
    #index .cube{margin-bottom: 20px; width: calc(100% - 100px);}
}

@media only screen and (max-height: 600px), only screen and (max-device-height: 600px) {
    /*body{position: relative;}*/
    main{position: initial;}
    header{box-shadow: none !important;}
}

@media only screen and (max-width: 580px), only screen and (max-device-width: 580px) {
    main .innersection .line .postswitch{margin-left: 0; margin-top: 10px;}
    main .innersection .line .postswitch .postatext{width: calc(100% - 45px);}
    main .innersection .line .postswitch .checkbox{margin-top: 5px;}
}

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
    main #content.changedate{padding-top: 105px;}
    .fullscreen-body.iframe{min-height: 400px;}
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .radiobox{width: 100%;}
    input[type="radio"] + label{width: calc(100% - 47px);}
    input[type="radio"] + label.radioleft{margin-right: 0;margin-bottom: 2px;}

    main .section .navigation{display:flex; flex-flow: wrap-reverse; margin-top: 50px;}
    main .section .navigation button{width: 100%; margin-bottom: 20px;}
}

@media only screen and (max-width: 401px), only screen and (max-device-width: 401px) {
    main #content{padding-top: 85px;}
}

@media only screen and (max-width: 390px), only screen and (max-device-width: 390px) {
    header #title{font-size: 17px;}
}

@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
    header #title{font-size: 17px;}
    input[type="radio"] + label{font-size: 13px;}
    main .section .navigation button{padding-left: 18px;padding-right: 18px;}
}