/* Testing */
body.mobile { margin: 0px auto; width: 100%; }

/*** Defaults ***/

.hidden { display: none; }
.abso { position: absolute; }
.clear { clear: both; }
.opacity0 { opacity: 0; }
.centered { margin: 0 auto; display: table; }
.rounded { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
.ucase { text-transform: uppercase; }
.trans05 { -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; }
.trans10 { -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; }
.trans20 { -webkit-transition: all 2s; -moz-transition: all 2s; transition: all 2s; }
.delay10 { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; transition-delay: 1s; }
.tcenter { text-align: center; }
.tright { text-align: right; }
.tleft { text-align: left; }
.fleft { float: left; }
.fright { float: right; }

/*** Colours ***/
	
	/*
		lightgrey		#eef2f4
		lightblue		#129fdd
		blue			#20409a
		grey			#48525a
		footerblue		#e0f4ff
		gradient		#00aeef to #0063b1
	*/

/*** Typography ***/

html { height: 100%; background: #fff; }
body { font-family: 'PT Sans', sans-serif; font-size: 14px; color: #48525a; min-height: 100%; }

hr { border: none; border-bottom: 2px dotted #ddd; margin: 30px 0px; }

h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-bottom: 10px; color: #20409a; font-weight: bold; text-transform: uppercase; }
h1 { font-size: 24px; line-height: 30px; }
h2 { font-size: 18px; line-height: 21px; text-align: center; }
	h2 span { color: #129fdd; font-size: 21px; }
h3 { font-size: 16px; line-height: 18px; color: #bfccd5; }
h4 { font-size: 15px; line-height: 17px; }

h1, h2, h3, h4, h5, h6, a { font-family: 'PT Sans', sans-serif; }

button, .button {
	border: none; background: #129fdd; color: #fff; padding: 10px 15px; border-radius: 3px; font-weight: bold; cursor: pointer; display: table; clear: both;
}
.icon img { height: 50px; width: auto; }
p b { color: #129fdd; }
p a { color: #333; font-weight: bold; }

/*** Layout ***/

	body.home {
		background: linear-gradient(120deg, rgb(0, 174, 239), rgb(0, 99, 177));
		background: -webkit-linear-gradient(120deg, rgb(0, 174, 239), rgb(0, 99, 177));
	}
	body > header {
		width: 100%; padding: 10px 20px; position: fixed; top: 0; height: 90px; z-index: 9999;
		background: linear-gradient(-75deg, rgb(0, 174, 239), rgb(0, 99, 177));
		background: -webkit-linear-gradient(-75deg, rgb(0, 174, 239), rgb(0, 99, 177));
	}
	body > header img { margin: 0px auto; display: block; max-width: 90%; max-height: 100%; }
	body > header img.sp, body > header span { display: none; }

	body > footer { display: table; width: 100%; background: #e0f4ff; position: fixed; bottom: 0; height: 100px; z-index: 9999; }
	body > footer nav ul { width: 100%; text-align: center; }
		body > footer nav ul li { display: inline-block; }
			body > footer nav ul li a { line-height: 0px; padding: 15px 10px 10px; opacity: 0.5; }
				body > footer nav ul li a.active { opacity: 1; }
			body > footer nav ul li a.icon img { display: block; margin: 0px auto 10px; height: 40px; }
			body > footer nav ul li a span { color: #20409a; font-weight: bold; line-height: 100%; font-size: 13px; }

/*** Navigation ***/

	.offcanvas {
		position: fixed; height: 100%; width: 100%; margin-left: -2000px; z-index: 99999; transition: margin 0.3s; -webkit-transition: margin 0.3s;
	}
	.offcanvas .grey {
		height: 100%; width: 100%; background: #fff; box-shadow: 10px 0px 10px rgba(0,0,0,0.15); overflow-y: auto; padding: 30px;
	}
	.overlay {
		background: rgba(0,0,0,0.7); opacity: 0; position: fixed; width: 100%; height: 0px; z-index: 99998;
		transition: height 0s linear 0s, opacity 0.5s linear 0s; -webkit-transition: height 0s linear 0s, opacity 0.3s linear 0.1s;
	}
	#offc.sho { margin-left: 0px; }
	.overlay.sho { opacity: 1; height: 100%; }

	.offcanvas h3 { text-align: center; font-size: 18px; color: #204089; margin-bottom: 15px; }
	.offcanvas .row a { display: block; width: 100%; }
		.offcanvas .row a.selected { background: #e0f4ff; border: 1px solid #129fdd; box-shadow: 0px 0px 10px #129fdd; }
		
	.offcanvas img { margin: 0px auto; display: block; }
		.offcanvas img + span { text-align: center; padding: 10px; display: block; line-height: 100%; }
		.offcanvas img + span small { font-size: 13px; }
	.offcanvas .icon img { margin: 15px auto 5px; height: 70px; }
	.offcanvas .col-1p2 {}
		.offcanvas .col-1p2 img { padding: 10px; }
	.offcanvas .col-1p1 {}
		.offcanvas .col-1p1 img { margin: -50px auto; }
		.offcanvas .col-1p1 span { line-height: 0px; margin-bottom: 15px; }

/*** Layout ***/

	section { background: #fff; min-height: 100vh; z-index: 2; width: 100%; }
	article { padding: 120px 30px 140px; }

/* loading */

	section.fbalert {
		margin: 0px !important; height: 100% !important; width: 100% !important; border-radius: 0 !important;
	    background: transparent; color: #fff; z-index: 99999;
	}
	.fbalert p { width: 50%; margin: 0px auto; padding: 50px 0px 0px 30px; }
		.fbalert span { margin-right: 30px; display: block; position: absolute; margin-left: -50px; }
		.fbalert span.threedots:after { content: '\2807'; font-size: 50px; }
		.fbalert span img { width: 24px; }
	body.nofb .fbalert { display: none; }
	body.fb .loading { display: none; }

	.loading {
		height: 100vh; background: url(../images/start2.jpg) no-repeat center center; background-size: cover;
	}
	.loading div.logo { position: absolute; display: block; overflow: hidden; top: 35%; left: 0; transform: translate(0%, -50%); width: 100%; }
		.loading .logo h1 { text-align: center; color: #fff; }
		.loading .logo img { max-width: 60%; display: block; margin: 0px auto 0px; }
		.loading .logo span + img { max-width: 60%; display: block; margin: 30px auto 0; }
	.loading div.bottom { color: #fff; position: absolute; bottom: 0; padding: 30px; width: 100%; }
		.loading .bottom hr { border-color: #fff; opacity: 0.25; margin: 10px auto; }
		.loading .bottom a { color: #fff; text-transform: uppercase; font-weight: bold; text-align: center; display: block; }

/* start */

	.start h2 { margin-bottom: 30px; }

/* adatvedelem */

	.adatvedelem ul { margin: -5px 15px 15px; }
		.adatvedelem li { margin-bottom: 5px; }
		.adatvedelem li:before { content: '+'; margin: 0px 0px 0px -15px; width: 15px; display: inline-block; font-weight: bold; color: #129fdd; }
	.adatvedelem p b { color: #333; margin: 0px auto; display: table; }

/* send */

	.send { overflow: hidden; }
	.send #upl { margin: 10px auto 15px; }
		.send #upl.prev { height: 100px; width: 100px; border-radius: 50px; border: 5px solid #eef2f4; overflow: hidden; display: block; }
		.send #upl.prev img { height: 100px; width: auto; max-width: 1000%; }
	.send .qq-upload-list { display: none; }

	.send #progress { width: 200px; height: 5px; background: #eef2f4; display: block; margin: 0px auto; border-radius: 3px; }
		.send #progress span { background: #129fdd; height: 5px; border-radius: 3px; display: block; width: 0px; }

	.greybox { background: #eef2f4; border-radius: 3px; margin-bottom: 15px; display: table !important; }
		.greybox a { padding: 15px; vertical-align: middle; display: table-cell; }
		.greybox img { width: 100%; }
		.greybox img.icon { padding: 10px; }
	#quicktest p {
		font-size: 15px; font-weight: bold; background: #eef2f4; padding: 20px 25px 25px 100px; color: #20409a; display: block; position: relative;
	}
	#quicktest p img { height: 50px; margin: 0px 20px 0px -70px; float: left; }

	label { display: block; font-size: 12px; text-transform: uppercase; color: #aaa; font-weight: bold; padding: 10px; position: absolute; }
		label.checkbox { position: relative; text-transform: none; font-size: 14px; }
	input { border-radius: 3px; border: 1px solid #ddd; padding: 25px 10px 10px; width: 100%; }
		p.req label { color: #333; }
		p.req input { border-color: #777; }
		input:focus { background: #f4f4f4; }

	input[type="checkbox"] { float: left; width: auto; margin: 4px 8px 0 0px; }

	hr.beforefback { margin: 30px 0px 15px; }
	#fback { padding: 0px 0px 15px; }
		#fback div { color: red; font-weight: bold; border: 1px solid red; padding: 10px; }

/* info */

	.info h2 { margin-bottom: 30px; }
	.info ul { margin: -5px 15px 15px; }
		.info li { margin-bottom: 5px; }
		.info li:before { content: '+'; margin: 0px 0px 0px -15px; width: 15px; display: inline-block; font-weight: bold; color: #129fdd; }

/* partner */

	.partner img.avbg { max-width: 200%; min-width: 105%; margin: -60px -30px 50px 0px; float: right; }
	.partner h2 { margin-bottom: 30px; }
	.partner h2 + p { color: #129fdd; font-weight: bold; }
		.partner h2 + p strong { color: #aaa; font-size: 13px; }
	.partner a.logo { display: block; margin: 15px auto 30px; text-align: center; }
	.partner p.light { font-size: 90%; color: #999; 3}




/*** Form elements ***/



/* ripple effect */

.ripple { overflow: hidden; position: relative; }
.ripple-effect {
	position: absolute; border-radius: 50%; width: 50px; height: 50px; background: white;
	-webkit-animation: rippleanim 1s ease both; -moz-animation: rippleanim 1s ease both; animation: rippleanim 1s ease both;
}
@keyframes rippleanim {
	0% { transform: scale(1); opacity: 0.1; } 100% { transform: scale(100); opacity: 0; }
}
@-webkit-keyframes rippleanim {
	0% { -webkit-transform: scale(1); opacity: 0.1; } 100% { -webkit-transform: scale(100); opacity: 0; }
}
@-moz-keyframes rippleanim {
	0% { -moz-transform: scale(1); opacity: 0.1; } 100% { -moz-transform: scale(100); opacity: 0; }
}

/* RESPONSIVE */

@media screen and (min-width: 500px) {
	html, body { width: 100%; height: 100%; overflow: auto; position: relative; }
	.loading { display: none; }
	body p, body li { font-size: 15px; }
	body > footer { display: none !important; }
	body > header {
		position: relative; background: transparent; max-width: 50%; margin: 0px auto; height: auto; padding: 30px 0px 10px; display: block !important; text-aling: center;
	}
	body > header span { color: #fff; padding: 40px; display: inline; vertical-align: middle; }
	body > header img { display: inline !important; max-height: 80px; vertical-align: middle; }
	section { min-height: 0px; background: #fff; max-width: 80%; overflow: hidden; margin: 30px auto 30px; border-radius: 5px; }
		section.start, section.adatvedelem, section.send, section.send2, section.info, section.partner { display: block !important; }
    	section.partner  { /* background: #fff url('../images/autover.png') no-repeat top right; padding-top: 100px; */ }
		section.partner article .avbg { display: none; }
	.greybox a { width: 100%; }
	.offcanvas h3 { margin-bottom: 50px; }
	.offcanvas hr { display: none; }
		.offcanvas hr.keepthis { display: block; clear: both; margin-top: 60px; }
	.offcanvas .row { width: 42%; float: left; margin: 0px; }
		.offcanvas .gap24 .row .col-1p1, .offcanvas .gap24 .row .col-1p2 { width: 90%; }
	.offcanvas .gap24 .row.withimage { width: 24%; }
		.offcanvas .gap24 .row.withimage .col-1p2 { width: 85%; margin-bottom: 15px; }
	.offcanvas .gap24 .row.withicons { width: 32%; }
		.offcanvas .beallit { margin-top: 30px; }
}
@media screen and (min-width: 500px) and (max-width: 801px) {
	section { width: 92% !important; margin: 0px 30px 30px 30px !important; }
	body > header { width: 92% !important; position: relative; }
	.greybox a img.icon { padding: 15px; }
}
@media screen and (min-width: 1025px) {
	/* section.info, section.partner { width: 50%; } */
	.greybox a img.icon { padding: 30px; }
}

@media screen and (max-height: 500px) {
	body > header { position: relative; }
	.loading div.logo { top: 15%; }
}