/* Intuis STYLE for Ajánlatkérő 2.6.0 */


/* -------------------------- generic styles ------------------------*/
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; 
}
caption, th {
	text-align: left;
}

a{
	text-decoration: none;
	color: #5222dc;
    outline : none;
}

	a:hover{
		color: #f05019;
	}

table {
	BORDER-COLLAPSE: collapse; border-spacing: 0;
}

body{
    font-family: 'Montserrat', sans-serif;
    position: relative;
    min-height: 100%;
}

.center{
    margin: 0 auto;
    max-width: 1170px;
    width: 95%;
}

html{
    /*height: 100%;*/
    min-height: 100% !important;
    scroll-behavior: smooth;
}


/* ========= loading ========== */
#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 #efefef;
    border-top: 7px solid #f05019;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    text-align: center;
    margin: 50px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





/* ========= loading ========== */
#loading{
    width: calc(100% - 15px);
    height: -moz-available;
    height: -webkit-fill-available; 
    height: fill-available;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    display: none;
    text-align: center;
    z-index: 20;
    top: 0;
    bottom: 0;
}

#loading #loadtext{
    display: table-cell;
    vertical-align: middle;
    position: relative;
    color: #626262;
    font-size: 50px;
}

#loading #loadtext .loader {
    border: 7px solid #fff;
    border-top: 7px solid #f05019;
    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); }
}




/* =============== welcome ================ */

#welcome{
    height: auto;
    display: inline-block;
    width: 100%;
}

#welcome .description{
    /*max-width: 650px;
    padding: 25px 35px;
    margin: 110px auto 40px auto;
    background: rgba(255, 255, 255, 0.95);
    border-left: 3px solid #f05019;
    overflow: auto;*/
}

.description p{
    font-size: 14px;
    color: rgb(45, 64, 89);
    line-height: 20px;
    font-weight: 600;
}

.headsection{
    display: none;
}

#welcome .headsection .border{
    float: right;
    width: 1px;
    height: 100px;
    border-left: 1px solid #dadada;
    background: #f7f7f7;
}

#welcome .headsection .headcontent{
    float: right;
    width: 49%;
    padding-left: 8%;
    height: 147px;
    display: table;
    border-left: 1px solid #dadada;
}


#welcome .headsection .title {
    font-size: 20px;
    color: #333333;
    padding: 0 0 20px 0;
    font-weight: 600;
    text-align: center;
    display: none;
}


#welcome .tab{
    float: left;
    width: 40%;
    margin: 8px 10px 0 0 ;
}

#welcome .tab a{
    width: auto;
    height: auto;
    cursor: pointer;
}

#welcome .tab .tabnum{
    width: 39px;
    float: left;
}

#welcome .tab .tablinks{
    float: left;
    border: 2px solid #333333;
    color: #333333;
    border-radius: 100px;
    width: 22px;
    height: 22px;
    text-align: center;
    font-size: 15px;
    margin: 0 4px;
    clear: both;
    font-weight: 600;
}

#welcome .tab .tablinks span{
    display: block;
    margin-top: 1px;
}

#welcome .tab .tablinks.done{
    color: #d6d6d6; 
    border: 2px solid #d6d6d6;
}

#welcome .tab .tablinks.active{
    background: #f05019;
    color: #fff;
    width: 30px;
    height: 30px;
    border: 2px solid #f05019;
    font-size: 21px;
    margin: 0;
    font-weight: 600;
}

#welcome .tab .tablinks.active span{
    display: block;
    margin-top: 2px;
}


#welcome .tab .tabline{
    width: 2px;
    float: left;
    height: 7px;
    margin: 0 17px 0 17px;
    background: #333333;
    clear: both;
}

#welcome .tab .tabline.done{
    background: #d6d6d6;
}

#welcome .tab .tabtext{
    float: left;
    padding: 3px 0 0 16px;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
}

#welcome .tab .tabtext.done{
    color: #d6d6d6;
}

#welcome .tab .tabtext.active{
    color: #f05019;
    padding: 6px 0 0 16px;
    font-size: 16px;
}


/* =============== main ================ */

main{
    width: 100%;
    overflow: auto;
    padding-bottom: 30px;
}

main .section{
    margin-bottom: 10px;
    float: left;
    width: 100%;
    display: none;
}

main .section.top{
    margin-top: 30px;
}

main .section img{
    width: 60px;
    height: 60px;
    float: left;
}

main .section .sw-button{
    width: calc( 50% - 8px);
    float: left;
    border-radius: 15px;
    padding: 20px 0;
    /*border: solid 2px #efefef;*/
    margin-right: 10px;
    background: #efefef;
}

main .section .sw-button:last-child{
    margin-right: 0;
    margin-left: 10px;
}


main .section .sw-button.active{
    border-radius: 15px 15px 0 0;
    border-bottom: 0;
    background: #fff;
}

main .section .sw-button.nobrdr{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

main .section .sw-button.nobg{
    border-color: rgba(255, 255, 255, 0);
}

main .section .sw-button:hover{
   cursor: pointer;
    background: #fff;
}

main .section .sw-button img{
    display: block;
    margin: 0 auto;
    float: none;
}

main .section .sw-button p{
    text-align: center;
    display: block;
    padding-top: 5px;
    font-weight: 600;
    color: #85868c;
}

main .section .content{
    max-width: 1052px;
    margin: 0 auto;
}

main .section .content.radiohead{
    margin-top: -10px;
    margin-bottom: 35px;
    overflow: auto;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 6px;
}

main .section .line{
    width: 100%;
    height: 2px;
    background: #d6d6d6;
    float: left;
    margin: 34px 15px 60px 0;
}

main .section .line span {
    font-size: 16px;
    color: #d6d6d6;
    float: none;
    background: #fff;
    padding: 0 15px;
    margin: -12px 22px;
    display: block;
    width: 65px;
    margin: -12px auto;
    text-align: center
}


main .section .content .text{
    font-size: 14px;
    color: #333333;
    float: left;
    width: 138px;
    /*margin: 10px 10px 0 0;*/
    margin: 0 10px 0 0;
    height: 34px;
    display: table;
}

p{
    display: table-cell;
    vertical-align: middle;
}


main .section .content .text.margin1{
    margin: 0 10px 0 36px;
}

main .section .content .text.margin2{
    margin: 0 10px 0 40px;
}

main .section .content .text.short{
    width: 104px;
}

main .section .content .text.unit{
    margin: 0 0 0 8px;
    width: 25px;
    font-style: italic;
}

main .section .content .text.long{
    /*width: 494px;*/
    width: 620px;
    font-weight: 500;
    /*font-size: 16px;*/
    /*text-transform: uppercase;*/
}

main .section .content .text.long2 {
    width: 290px;
}

main .section .content .text.radiotxt{
    width: 190px;
}



/* Előre, vissza gombok */
main .section .navigation{
    width: 100%;
    clear: both;
    margin: 20px 0 0 0;
    display: inline-block;
}

main .section .navigation .prev{
    float: left;
    cursor: pointer;
    margin-bottom: 5px;
    /*box-shadow: 0px 0px 4px rgb(156, 156, 156);*/
    transition:all 1s ease;
    padding: 0;
    border: solid 2px #5222dc;
    border-radius: 100px;
}

main .section .navigation .next{
    float: right;
    cursor: pointer;
    margin-bottom: 5px;
    /*box-shadow: 0px 0px 4px rgb(156, 156, 156);*/
    transition:all 1s ease;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    border: solid 2px #5222dc;
    border-radius: 100px;
}

main .section .navigation .next.sendbutton{
    border: solid 2px #f05019;
}

main .section .navigation button{
    background: none;
    border: none;
}

main .section .navigation button:focus{
    outline: 0;
}

main .section .navigation .left{
    float: right;
}

main .section .navigation .right{
    float: left;
}

main .section .navigation .label.right{
    /*margin-right: -8px;*/
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

main .section .navigation .label.left{
    /*margin-left: -8px;*/
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

main .section .navigation .label{
    background: #5222dc;
    color: #fff;
    padding: 0 20px;
    font-size: 14px;
    /*margin-top: 6px;*/
    height: 37px;
    display: table;
    font-weight: 700;
    transition:all 1s ease;
}

main .section .navigation .num{
    background: #5222dc;
    color: #fff;
    /*padding: 5px 10px;*/
    font-size: 16px;
    text-align: center;
    width: 33px;
    height: 37px;
    display: table;
    transition:all 1s ease;
}

main .section .navigation .num.left{
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

main .section .navigation .num.right{
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

main .section .navigation .num.send, main .section .navigation .label.send{
    background: #f05019;
}

main .section .navigation .next:hover .label.send, main .section .navigation .next:hover .num.send{
    background: transparent;
    transition:all 1s ease;
    color: #f05019;
}

main .section .navigation .next:hover .label, main .section .navigation .prev:hover .label{
    background: transparent;
    color: #5222dc;
    transition:all 1s ease;
}

main .section .navigation .next:hover .num, main .section .navigation .prev:hover .num{
    background: transparent;
    color: #5222dc;
    transition:all 1s ease;
}


/* Előre, vissza gombok vége */

main .section .content .inputform, main .section .content select{
    float: left;
    height: 34px;
    width: 360px;
    border-radius: 100px;
    border: solid 1px #b9b9b9;
    color: #333333;
    font-size: 14px;
    padding: 0px 0px 0px 11px;
    margin: 0 0 22px 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    background: #fff;
    
}

main .section .content select{
    width: 360px;
    height: 34px;
    float: left;
    border-radius: 100px;
    border: solid 1px #b9b9b9;
    color: #333333;
    font-size: 14px;
    padding: 0px 0px 0px 11px;
    margin: 0 0 22px 0;
    background: #fff;
}

main .section .content select.medium{
    width: 176px;
}

main .section .content .inputform.full{
    width: 904px;
}

main .section .content .inputform.medium{
    width: 176px;
}

main .section .content .inputform.mini{
    width: 69px;
    padding-right: 4px;
}

input[type="checkbox"] {
	visibility: hidden;
}

.checkbox {
	width: 36px;
    height: 36px;
	position: relative;
    float: left;
    margin: 0 0 40px 0;
}

.checkbox label {
	cursor: pointer;
	position: absolute;
	width: 34px;
	height: 34px;
	top: 0;
  	left: 0;
	background: none;
	border:1px solid #b9b9b9;
    border-radius: 11px;
    box-sizing: border-box;
}

.checkbox label:after {
	opacity: 0.0;
	content: '';
	position: absolute;
	width: 16px;
	height: 6px;
	background: transparent;
	top: 9px;
	left: 7px;
	border: 3px solid #f05019;
	border-top: none;
	border-right: none;

	transform: rotate(-45deg);
}

.checkbox label:hover::after {
	opacity: 0.5;
}

.checkbox input[type=checkbox]:checked + label:after {
	opacity: 1;
}




.radio{
    height: 22px !important;
    width: 22px !important;
    margin-top: 6px !important;
}



/* fájl feltöltés */
.whitebg{
    padding: 35px 0;
    border-radius: 0 0 15px 15px;
    background: #fff;
    margin-bottom: 15px;
    clear: both;
}

.whitebg.fullradius{
    border-radius: 15px;
    padding-top: 45px;
}

.whitebg .content{
    padding: 0 25px;
}

.whitebg h2{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 17px;
    /*color: #f05019;*/
    padding-bottom: 25px;
}

.whitebg h4{
    /*color: #f05019;*/
    padding-top: 10px;
    font-size: 13px;
}

.whitebg p{
    /*color: #f05019;*/
}

.whitebgimg{
    float: right;
    background: url(images/alaprajz2.png);
    background-position: center;
    background-size: 120px;
    width: 120px;
    height: 80px;
    margin-top: -34px;
    margin-left: 30px;
    /*background-color: white;*/
    /*border-radius: 1000px;*/
    /*padding: 13px;*/
    background-repeat: no-repeat;
}

.custom-file-input {
    color: #f05019;
    height: 34px;
    /*width: 903px;*/
    font-size: 13px;
    /*margin: 0 0 22px 0;*/
    font-family: 'Montserrat', sans-serif;
}

.custom-file-input::-webkit-file-upload-button {
  color: #f05019;
  display: inline-block;
  background: none;
  border: 2px solid #f05019;
  border-radius: 4px !important;
  padding: 0px 15px 0px 15px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-size: 14px !important;
    height: 34px;
    width: 176px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600 !important;
}

.custom-file-input:hover ::-webkit-file-upload-button{
    background: rgba(74, 200, 237, 0.5);
}


.section h3{
    font-weight: 700;
    font-size: 14px;
    color: #f05019;
    padding-bottom: 19px;
    text-align: center;
    padding-top: 35px;
    line-height: normal;
}

/* helyiség elválasztó */
main .section .number{
    color: #fff;
    border-radius: 100px;
    border: 2px solid #001749;
    background: #001749;
    clear: both;
    /*width: 18px;
    height: 18px;*/
    float: left;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    /*padding: 2px;
    font-family: arial;*/
    padding: 0 12px;
}

main .section .number span{
    margin-top: 0px;
    display: block;
}

main .section .line2{
    width: calc(100% - 100px);
    height: 2px;
    background: #001749;
    float: left;
    margin: 13px 0 40px 0;
}

main .section .line2 span {
    font-size: 16px;
    color: #001749;
    float: left;
    background: #fff;
    padding: 0 15px;
    margin: -9px 12px;
    font-weight: 600;
    text-transform: uppercase;
}

main .section .content .placeholder{
    width: 100%;
    height: 10px;
    clear: both;
}

/* további helyiségek hozzáadása */
main .section .more{
    width: 265px;
    display: block;
    margin: 15px auto 0;
    /*padding: 10px 0;*/
    cursor: pointer;
    background: #f05019;
    border-radius: 100px;
    /*box-shadow: 0px 0px 4px rgb(156, 156, 156);*/
    transition:all 1s ease;
    border: solid 2px #f05019;
}

main .section .more .plus{
    float: left;
    /*background: #fff;*/
    display: block;
    text-align: center;
    color: #fff;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    width: 40px;
    /*height: 23px;*/
    font-size: 25px;
    line-height: 1;
    /* font-weight: bold; */
    padding: 5px 0 4px;
    font-family: arial;
    font-weight: 400;
    transition:all 1s ease;
}

main .section .more .moretext{
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    padding: 8px 15px;
    transition:all 1s ease;
}

main .section .more:hover{
    background: #fff;
    transition:all 1s ease;
}

main .section .more:hover .plus{
    color: #f05019;
    transition:all 1s ease;
}

main .section .more:hover .moretext{
    color: #f05019;
    transition:all 1s ease;
}

/* feltételes megjelenés */
.padlofutes{
    float: right;
}

.javasolt{
    color: #f05019;
    float: right;
    height: 34px;
    width: 358px;
    font-size: 12px;
    line-height: 15px;
    padding: 0px 0 0 0;
    margin: 0 0 22px 0;
    font-weight: 600;
}



.clr{
    clear: both;
}


/* megjegyzés */
main .section  .full_line{
    width: 100%;
    height: 3px;
    background: #333333;
    float: left;
    margin: 0 0 60px 0;
}

main .section .content textarea{
    float: left;
    height: 118px;
    /*width: 648px;*/
    width: calc(100% - 180px);
    border-radius: 15px;
    border: solid 1px #b9b9b9;
    color: #333333;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    padding: 10px 15px 10px 15px;
    margin: 0 0 30px 0;
    resize: none;
}

main .section .content .counter{
    color: #c5c5c5;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 12px;
    margin-right: 35px;
    text-align: right;
    margin-top: -18px;
    float: right;
}

main .section .content input#counter {
    background: 0 0;
    border: none;
    width: 30px;
    color: #c5c5c5;
    font-weight: 600;
    text-align: right;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
}

main .button{
    display: inline-block;
    vertical-align: top;
    text-align: center;
    width: 356px;
    /*display: block;*/
    background: #f05019;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    border: solid 2px #f05019;
    height: 35px;
    padding: 0px 15px 0px 15px;
    margin: 35px 0 0 0;
    cursor: pointer;
}

main .button:hover{
    background: none;
    color: #f05019;
}

/* FOOTER

footer{
    position: absolute;
    bottom: 0;
    height: 35px;
    background: #efefef;
    width: 100%;
    font-size: 14px;
    text-align: center;
    padding-top: 15px;
}*/

/* Köszönő oldal */
#thanks{
   margin-bottom: 30px;
   min-height: 350px;
}

#thanks .center{
    position: relative;
    height: 100%;
}

#thanks .balloon{
    position: absolute;
    height: 70%;
    right:0;
    top: 10%;
    z-index: 1;
}

#thanks .info{

}

#thanks .info img{
    float: left;
    margin: 8px 40px 0 0;
    width: 70px;
    height: 70px;
}

#thanks .info .text{
    float: left;
    width: 80%;
}

#thanks .info .text p{
    vertical-align: middle;
    font-size: 14px;
    color: #333333;
}

#thanks .info .buttons{
    float: left;
    margin-top: 30px;
    margin-bottom: 50px;
}

#thanks .info .buttons .button{
    float: left;
    padding: 7px 20px 6px 20px;
    background: #5222dc;
    color: #fff;
    border-radius: 100px;
    border: solid 2px #5222dc;
    font-size: 14px;
    margin: 0 20px 0 0;
    cursor: pointer;
    font-weight: 600;
}

#thanks .info .buttons .button:last-child{
    margin: 0 0 0 0;
}

#thanks .info .buttons .button:hover{
    background: transparent;
    color: #5222dc;
}

#thanks .info .buttons .button:hover a{
    color: #fff;
}

#thanks .placeholder{
    width: 0;
    height: 0;
}

#thanks.error{
    max-width: 600px;
    margin: 100px auto 0;
}



/* FULLSCREEN */

/* 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 */
}

/* 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: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
    
    margin: 10% auto;
    padding: 0;
    width: 60%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* 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;
}

.fullscreen-close:hover,
.fullscreen-close:focus {
    color: #f05019;
    text-decoration: none;
    cursor: pointer;
}

.close{
    text-align: center;
    padding: 10px 5px;
    background: #f05019;
    width: 120px;
    border-radius: 6px;
    margin: 10px auto 15px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.close:hover{
    background: #d4d4d4;
}

.grecaptcha-badge {
    display: none;
}


.fullscreen-header {
    padding: 20px 16px;
    color: #9a9a9a;
    font-size: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-bottom: solid 1px #d4d4d4
}

.fullscreen-body {
    font-size: 16px;
    color: #9a9a9a;
    position: relative;
    padding: 20px 16px;
}

.fullscreen-body p{
    font-size: 16px;
    display: block;
    vertical-align: inherit;
    padding-bottom: 7px;
}

.fullscreen-body h2{
    font-size: 17px;
    font-weight: 800;
    padding-top: 10px;
    padding-bottom: 3px;
    line-height: normal;
}

.fullscreen .fullform{
    width: 100%;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
}

.fullscreen .fullform input{
    width: 90%;
    font-family: 'Montserrat', 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%}
}


/* ALERT */

#alert {
    padding: 20px;
    color: white;

    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: calc(100% - 40px);
    display: none;
    
    background: #f05019;
}

#errormsg{
    text-align: center;
    font-weight: 600;
}

@-webkit-keyframes opacity {
    0%{opacity: 1}
    100%{opacity: 0.6;}
}
@-moz-keyframes opacity {
    0%{opacity: 1}
    100%{opacity: 0.6;}
}
@-o-keyframes opacity {
    0%{opacity: 1}
    100%{opacity: 0.6;}
}
@keyframes opacity { 
    0%{opacity: 1}
    100%{opacity: 0.6;}
}

#alert:hover{
    opacity: 1;
    animation-fill-mode: none;
    transition: ease 0.5s;
}

.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;
}




/* -------------------------- Reszponzív stílusok ------------------------ */

@media only screen and (max-width: 1225px), only screen and (max-device-width: 1225px) {
    main .section .content .text{/*word-break: break-word;*/width: 13%;margin: 0 1% 0 0;}
    main .section .content .text.margin1{margin: 0 1% 0 2%}
    main .section .content .inputform{width: 34%}
    main .section .content .inputform.full{width: 84%}
    main .section .content select {width: 34%}
    
    main .section .content .text.margin2{margin: 0 1% 0 3%}
    main .section .content .inputform.medium{width: 17%}
    main .section .content select.medium {width: 17%}
    /*.custom-file-input{width: 85%}*/
    
    main .section .content .text.short{width:10%}
    .javasolt{width: 35%}
    .padlofutes{width: 51%}
    .padlofutes select{width: 66% !important}
    .padlofutes .text{width: 24% !important}
    .padlofutes .text.margin1{margin: 0 4% 0 2% !important}
    
    main .section .content textarea{width: calc(100% - 179px)}
    
    
    main .section .content .text.long{width: calc(100% - 410px)}
    
    
}
 
@media only screen and (max-width: 1096px), only screen and (max-device-width: 1096px) {
    main .section .content .text.margin2{margin: 0 1% 0 2%}
}

@media only screen and (max-width: 1025px), only screen and (max-device-width: 1025px) {
    main .section .content .text.margin1{margin: 0 1% 0 2%}
}

@media only screen and (max-width: 995px), only screen and (max-device-width: 995px) {
    /*main .section .content .text.m{width: 10%;  word-break: break-all;}
    main .section .content .text.short{width: 9%; word-break: break-all;}*/
    /* köszönő oldal */
    #thanks{min-height: 500px;}
}

@media only screen and (max-width: 999px), only screen and (max-device-width: 999px) {
    #loading #loadtext{ font-size: 40px;}
    #loading #loadtext .loader {border: 6px solid #fff; border-top: 6px solid #f05019; width: 40px; height: 40px; margin-top: 40px;}
        
    #welcome img{float: none; display: block; margin: 0 auto 25px auto; top: 0}
    #welcome .speechbubble{float: none; display: block; margin: 0 auto; top: 0}
    #welcome .speechbubble:before{top:-17px; margin-left: auto;
margin-right: auto; left: 0; right: 0; border-width: 0 14px 14px 15px; border-color: #f05019 transparent;}
    #welcome .speechbubble:after{top:-12px; margin-left: auto; margin-right: auto; left: 0; right: 0; border-width: 0 13px 13px 15px; border-color: #fff transparent;}
    
    main .section img{float: none; display: block; margin: 0 auto;}
    main .section .line{width: 100%; margin: 34px 0px 50px 0; text-align: center}
    main .section .line span{float: none; display: block; width: 236px; margin: -12px auto;}
    
    main .section .content .text{width: 20%; height: 34px}
    main .section .content .text.margin1{margin: 0 1% 0 0}
    
    main .section .content .inputform{width: 79%; height: 34px; padding: 1px 8px 2px 8px;}
    main .section .content .inputform.full{width: 79%;}
    main .section .content select{width:79%; height: 34px; padding: 1px 0px 2px 8px;}
    main .section .content textarea{padding:10px 8px 10px 8px;}
    
    main .section .content .panel1{float: left;width: 48%; margin-right: 2%}
    main .section .content .panel1 .text{width: 32%; margin: 0 1% 0 0;}
    main .section .content .panel1 .text.margin1{margin: 0}
    main .section .content .panel1 .inputform{width: 65%;}
    main .section .content .panel2{float: left;width: 48%; margin-left: 2%}
    main .section .content .panel2 .text{width: 32%; margin: 0 1% 0 0;}
    main .section .content .panel2 .text.margin1{margin: 0}
    main .section .content .panel2 .inputform{width: 65%;}
    main .section .content .panel2 select.medium{width: 65%; height: 34px}
    
    .checkbox {width: 34px;}
    .checkbox label {width: 34px; height: 34px;}
    .checkbox label:after {width: 15px;	height: 5px; top: 10px; left: 7px;}
    
    /* navigation*/
    main .section .navigation .next{margin-bottom: 15px;}
    main .section .navigation .prev{margin-bottom: 15px;}
    /*main .section .navigation .label{height: 34px; font-size: 15px; margin-top: 7px;}
    main .section .navigation .num{font-size: 20px;width: 47px;height: 47px;}*/
    /*main .section .content .placeholder{height: 30px;}*/
    
    /*.custom-file-input{width: 75%;}*/
    
    /*helyiség opciók*/
    .javasolt{width: 79%}
    .padlofutes{width: 100%}
    .padlofutes select{width: 79% !important}
    .padlofutes .text{width: 20% !important}
    .padlofutes .text.margin1{margin: 0 1% 0 0 !important}
    
    main .section .content .panel3{float: left;width: 48%; margin-right: 2%}
    main .section .content .panel3 .text{width: 42%; margin: 0 1% 0 0;}
    main .section .content .panel3 .text.margin1{margin: 0}
    main .section .content .panel3 .text.unit{width: 7%; margin: 0 0 0 1%;}
    main .section .content .panel3 .inputform{width: 48%;}
    main .section .content .panel4{float: left;width: 48%; margin-left: 2%}
    main .section .content .panel4 .text{width: 42%; margin: 0 1% 0 0;}
    main .section .content .panel4 .text.margin1{margin: 0}
    main .section .content .panel4 .text.unit{width: 7%; margin: 0 0 0 1%;}
    main .section .content .panel4 .inputform{width: 48%;}
    
    main .section .content textarea{width: 76%}
    
    /*.text.upload{width: 15% !important}*/
    .custom-file-input::-webkit-file-upload-button{height:34px;}
    
    /* SWAP */
    .swap{display: table; width: 100%}
    .swap .swap_block1{display: table-row-group;}
    .swap .swap_block2{display: table-header-group;}
    .swap .swap_block3{display: table-footer-group;}
    
    /* swap email, város */
    .swap .swap_block4{display: table-footer-group;}
    .swap .swap_block5{display: table-header-group;}
    
    main .section .content .text.long{width: 100%; margin-bottom: 10px;}
    main .section .content.radiohead .text.short{width: 100px;}
    main .section .content.radiohead .text.radiotxt{margin-left: 35px;}
    
}

@media only screen and (max-width: 790px), only screen and (max-device-width: 790px) {
    /*main .section .line2{width: 96%}*/
    main .section .more .line2{margin-bottom: 50px;}
    .g-recaptcha{margin-bottom: 40px !important;}
    
        
    /*köszönő oldal*/
  
    
    #welcome .description .headcontent{width: 100%; float: none; margin: 0; padding: 0; height: auto; display: block; border: none;}
    #welcome .description p{text-align: center;}
    #welcome .headsection .title{display: block;}
    #welcome .description .tab .tabtext{display: none;}
    #welcome .tab{width: 186px; height: 30px; margin: 35px auto 0 auto;float: none}
    #welcome .tab .tablinks{clear: none; margin: 0;}
    #welcome .tab .tablinks.active{margin: -5px 0 0 0;}
    #welcome .tab .tabline{width: 20px; height: 2px; margin: 14px 0 0 0;background: #333333;clear: none;}
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
    /*header{height: 70px;}
    header .center{width: 95%; height: 70px;}
    header img{width: 110px; margin-top: 13px}
    header .title{font-size: 20px;margin-top: 22px}
    header .backlink{display: none}*/
    .alaprajzimg{display: none}
    
    header .separator{height: 50px; margin-top: 10px}                                    
    #welcome .description {padding: 35px 40px}

    
    #welcome img{width: 90px; height: 90px;}
    
    main .section .content .text{width: 100%; margin: 0 0 0 0; height: 30px;}
    main .section .content .text.margin1{margin: 0 0 0 0;}
    main .section .content .inputform{width: 100%}
    main .section .content .inputform.full{width: 100%}
    main .section .content select{width: 100%}
    
    main .section .content .text.check{width: 45%;}
    
    .custom-file-input{width: 100%}
    
    main .section .content .panel1{float: none; width: 100%; margin: 0}
    main .section .content .panel1 .text{width: 100%; margin: 0 0 0 0;}
    main .section .content .panel1 .inputform{width: 100%}
    main .section .content .panel2{float: none; width: 100%; margin: 0}
    main .section .content .panel2 .text{width: 100%; margin: 0 0 0 0;}
    main .section .content .panel2 .inputform{width: 100%}
    main .section .content .panel2 select.medium{width: 100%; height: 34px}
    main .section .content .panel3{float: none; width: 100%; margin: 0}
    main .section .content .panel3 .text{margin: 6px 1% 0 0;}
    main .section .content .panel4{float: none; width: 100%; margin: 0}
    main .section .content .panel4 .text{margin: 6px 1% 0 0;}
    
    .javasolt{width: 100%}
    .padlofutes select{width: 100% !important}
    .padlofutes .text{width: 100% !important; margin: 0 0 7px 0 !important;}
    .padlofutes .text.margin1{}
    
    main .section .content .text.long2{width: 100%;margin-bottom: 10px;}
    main .section .content .text.long2.accept{width: calc(100% - 45px); margin-bottom: 20px}
    
    main .section .content textarea{width: 100%}
    main .section .content .counter{margin-right: 13px;}
    
    .hide{display: none;}
        
}

@media only screen and (max-width: 633px), only screen and (max-device-width: 633px) {
    #thanks .info .text{width: 100%; margin-top: 30px}
    #thanks .info img{margin: 0 auto; display: block;float: none}

    
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    /*main .section .line2{width: 93%}*/
    main input.button{width: 70%}
    
}

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
    header .title{float: right}
}

@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
    /*header img{width: 130px; margin-top: 16px}*/
    header .separator{height: 50px; margin: 10px 15px}
    /*main .section .line2{width: 90%}*/
    
    #loading #loadtext{ font-size: 30px;}
    #loading #loadtext .loader {border: 5px solid #fff; border-top: 5px solid #f05019; width: 35px; height: 35px; margin-top: 35px;}
    
    main .section .content.radiohead .text.short{clear: both; margin-left: 0px; width: 190px; margin-right: 0px;}
    main .section .content.radiohead .inputform{ margin-bottom: 5px;}
    main .section .content.radiohead{margin-bottom: 20px;}
    main .section .content.radiohead .text.radiotxt{margin-left: 0; clear: both; margin-right: 0px;}
    main .section .content.radiohead .text.margin2{margin-left: 0;}
    .radio{margin-top: 4px!important; }
}

@media only screen and (max-width: 360px), only screen and (max-device-width: 360px) {
    header .title {font-size: 14px; margin-top: 26px;}
    header img {margin-top: 26px; height: 21px; width: 115px}
    

    
    /* navigation*/
    main .section .navigation .label{display: none;}
    main .section .navigation .label.send{display: table;}
    main .section .navigation .num{font-size: 20px;width: 47px;height: 47px;}
    
}