@charset "UTF-8";





.landing-demo { display: none; }
.landing-wrap { position: relative; padding: 48px 0;  }




.landing-block .hambi {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 30px;
	height: 30px;
	background: rgba(0,0,0,0.8);
	cursor: pointer;
	z-index: 101;
}

.landing-block .hambi:after {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	content: '\2630';
	text-align: center;
}

.landing-block .panel {
	position: absolute;
	top: 4px;
	right: 34px;
	background: #fcfcfc;
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	display: none;
	z-index: 100;
	padding: 20px;
	border-radius: 4px;
}

.landing-block .panel div {
	position: relative;
	display: block;
	padding: 4px 12px;
	line-height: 20px;
	border: 1px solid #ddd;
	color: #999;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	margin: 0 4px 4px 0;
	width: 176px;
}

.landing-block .panel div.active {
	color: #333;
	background: #fff;
}

.landing-block .panel div.active:after {
	position: absolute;
	right: 10px;
	line-height: 22px;
	content: '\2714';
}



.landing-block .panel select {
	display: block;
	position: relative;
	border: 1px solid #ddd;
	color: #333;
	height: 34px;
	background: #fff;
	padding: 4px 12px;
	cursor: pointer;
	font-size: 12px;
	text-transform: uppercase;
	margin: 12px 4px 12px 0;
	width: 200px;
}

.landing-block .panel select:focus {
	outline: none;
}


.demo-container {
	padding: 60px 0;
	background: #f3f3f3;
}

.demo-selector {
	border:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
	background: none;
	font-size: 16px;
	line-height: 24px;
	width: 60px;
}

.demo-selector:focus {
	outline: none;
}

.landing-block-add, .landing-block-code, .landing-block-readback {
	position: relative;
	display: inline-block;
	vertical-align: top;
	padding: 10px 20px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 12px rgba(0,0,0,0.1);
	z-index: 110;
}

.landing-block-code, .landing-block-readback {
	cursor: pointer;
}

.landing-block .panel div.trash {
	border: none;
	text-align: center;
}

.landing-block .panel div.mover {
	border: none;
	position: relative;
	text-align: center;
}

.landing-block .panel div.move {
	display: inline-block;
	width: 40px;
}

.landing-block-displayer {
	padding: 0;
	display: none;
	margin: 24px 0;
}

.landing-block-displayer textarea {
	display: block;
	width: 100%;
	height: 100px;
	min-height: 20px;
	line-height: 20px;
	border: none;
	margin: 0;
	padding: 13px 20px;
	background: #f9f9f9;
	overflow: auto;
	margin-bottom: 10px;
}

.landing-block-displayer textarea:focus {
	outline: none;
}


/* resp image */

.landing-block {
	padding: 36px 0;
	position: relative;
	background: var(--bg);
}

.landing-block.top { padding-top: 80px }
.landing-block.bottom { padding-bottom: 80px }

.landing-block .flex-center .box {
	margin: 0;
}

.buttonholder {
	margin: 24px 0;
	text-align: center;
}

.lead {
	margin: 24px 0;
	font-size: 18px;
	line-height: 26px;
}

.landing-block.right .flex-center,
.landing-block.right .flex-basic {
	flex-direction: row-reverse;
}














.landing-block .flex-cards {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 48px;
}

.cards-3 .card {
	width: 33.33%;
	position: relative;
}

.landing-block .flex-cards .card .wrap {
	height: 100%;
	box-sizing: border-box;
	padding: 40px 30px 20px;
}

.landing-block .flex-cards .card .wrap .buttonholder {
	margin: 24px 0 0;
	padding: 0;
}

.landing-block .flex-cards .card .wrap .buttonholder .button {
	margin: 0;
}


.lb-register .fluid {
	max-width: 640px;
}
.lb-register .lead {
	margin-bottom: 48px;
}

.bg-green-light form input {
	border-color: var(--green);
}

.bg-green-light form input:focus {
	border-color: var(--green);
	background: none;
}

.bg-green-mid form input,
.bg-green-full form input {
	color: var(--white);
}

.bg-green-mid form input:focus,
.bg-green-full form input:focus {
	background: none;
	border-color: var(--white);
}

.bg-green-mid form a,
.bg-green-full form a {
	color: var(--white);
}


.bg-white { background-color: #fff; }
.bg-green-full { background-color: var(--green); }
.bg-green-mid { background-color: var(--greenwashed); }
.bg-green-light { background-color: var(--greenlight); }

.arc:after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding-top: 5%;
	content: '';
	z-index: 10;
}

.landing-block.arc:after {
	background: url(/hu/images/landing/sheme/arc-bg.png) no-repeat center top;
	background-size: 100% auto;
}

.landing-block.bg-white.arc:after {
	background: url(/hu/images/landing/sheme/arc-white.png) no-repeat center top;
	background-size: 100% auto;
}

.bg-green-full.arc:after {
	background: url(/hu/images/landing/sheme/arc-green.png) no-repeat center top;
	background-size: 100% auto;
}

.landing-block.bg-green-mid.arc:after {
	background: url(/hu/images/landing/sheme/arc-greenwashed.png) no-repeat center top;
	background-size: 100% auto;
}

.landing-block.bg-green-light.arc:after {
	background: url(/hu/images/landing/sheme/arc-greenlight.png) no-repeat top;
	background-size: 100% auto;
}

.after-arc:before {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 5%;
	content: '';
}




.buttonholder {
	margin: 32px 0 0;
	padding-bottom: 20px;
}

.buttonholder div {
	margin: 6px 0 0;
}


.bg-green-full, .bg-green-full .highlight {
	color: #fff;
}

.bg-green-mid .highlight,
.bg-green-full .card h3,
.bg-green-full .card p {
	color: var(--dark);
}

.highlight {
	font-weight: 700;
}

.landing-block .buttonholder {
	padding-bottom: 20px;
}

.bg-green-full .buttonholder .button,
.bg-green-mid .buttonholder .button {
	background: var(--bg);
	color: var(--dark);
}

.bg-green-full .buttonholder .button:hover,
.bg-green-mid .buttonholder .button:hover {
	background: var(--greenwashedlight);
}






@media only screen and (min-width: 520px) {
	
	
	/* BACKGROUNDS */
	
	
	.lines-leftright {
		background-image: url(/hu/images/web/bg-lines-top.png), url(/hu/images/web/bg-lines-bot.png);
		background-position: left top, right bottom;
		background-repeat: no-repeat;
		background-size: 24% auto;
	}


	.lines-leftright2 {
		background-image: url(/hu/images/web/bg-lines-left.png), url(/hu/images/web/bg-lines-right.png);
		background-position: left top, right bottom;
		background-repeat: no-repeat;
		background-size: 18% auto;
	}
	
	.lines-leftright2small {
		background-image: url(/hu/images/web/bg-lines-left.png), url(/hu/images/web/bg-lines-right.png);
		background-position: left top, right bottom;
		background-repeat: no-repeat;
		background-size: 12% auto;
	}
	
	.lines-arc {
		background-image: url(/hu/images/web/bg-arch-on-light.png);
		background-repeat: no-repeat;
		background-position:  center;
		background-size: 100% auto;
	}
	
	.bg-green-mid.lines-arc {
		background-image: url(/hu/images/web/bg-arch.png);
		background-size: 100% auto;
	}
	
	.bg-green-full.lines-arc {
		background-image: url(/hu/images/web/bg-arch-light.png);
		background-size: 100% auto;
	}
	
	.bg-green-light.lines-arc {
		background-image: url(/hu/images/web/bg-arch-on-lightgreen.png);
		background-size: 100% auto;
	}
	
}