@charset "utf-8";

body, body * {
	font-family: 'BrixSans', sans-serif;
}

/* GRID */
[class*="col"] > .content {
	height:100%;
}
section + section {
	margin-top:8rem;
}

/* BUTTONS & LINKS */
.eon-btn {
	line-height: 1;
	display: table;
	margin: 0;
	font-weight: 700;
	padding: 1rem .75rem;
	position: relative;
	border-top-left-radius: 20% 10%;
	border-bottom-left-radius: 20% 10%;
	border-top-right-radius: 20% 10%;
	border-bottom-right-radius: 20% 10%;
	color: #fff !important;
	text-decoration:none !important;
	border:none;
	cursor:pointer;
}
.eon-btn:after {
	content: "";
	background-color: #1EA2B1;
	position: absolute;
	top: 8%;
	right: 99%;
	height: 84%;
	width: .35rem;
	border-top-left-radius: 100% 50%;
	border-bottom-left-radius: 100% 50%;
}
.eon-btn:before {
	content: "";
	background-color: #1EA2B1;
	position: absolute;
	top: 8%;
	left: 99%;
	height: 84%;
	width: .35rem;
	border-top-right-radius: 100% 50%;
	border-bottom-right-radius: 100% 50%;
}
a {
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.eon-btn.disabled, .eon-btn.disabled:after, .eon-btn.disabled:before {
	background-color:#e8e8e8 !important;
	cursor:not-allowed;
}
.eon-btn.hidden {
	display: none;
}

/* FONT */
.f-400, .f-400 * {
	font-weight: 400 !important;
}
.f-500, .f-500 * {
	font-weight: 500 !important;
}
.f-700, .f-700 * {
	font-weight: 700 !important;
}
.f-900, .f-900 * {
	font-weight: 900 !important;
}
.display-3 {
	font-size:3.9rem;
	line-height:1;
}
.display-4 {
	font-size:3.75rem;
}
.h2, h2 {
	font-size:2.2rem;
}

/* COLORS & BG */
.c-red {
	color: #EA1C0A;
}
.bg-red {
	background-color: #EA1C0A;
}
.eon-btn.bg-red:before, .eon-btn.bg-red:after {
	background-color: #EA1C0A;
}
.eon-btn.bg-red:hover, .eon-btn.bg-red:focus,
.eon-btn.bg-red:hover:before, .eon-btn.bg-red:hover:after,
.eon-btn.bg-red:focus:before, .eon-btn.bg-red:focus:after {
	background-color: #D51607;
}
.c-dark-red {
	color: #B00402;
}
.bg-dark-red {
	background-color: #B00402;
}
.bg-yellow {
	background-color: #E3E000;
}
.bg-teal {
	background-color: #1EA2B1;
}
.eon-btn.bg-teal:hover, .eon-btn.bg-teal:focus,
.eon-btn.bg-teal:hover:before, .eon-btn.bg-teal:hover:after,
.eon-btn.bg-teal:focus:before, .eon-btn.bg-teal:focus:after {
	background-color: #2B91A3;
}
.c-white {
	color: #fff;
}
.c-gray {
	color: #bfbfbf;
}
.c-dark-gray {
	color: #404040;
}
.c-black {
	color: #000;
}
.bg-light-gray {
	background-color: #f6f6f7;
}
.bg-white {
	background-color: #fff;
}

/* TOP SECTION */
#top_section {
	padding-top:5px;
	background: #E3E000; /* Old browsers */
	background: -moz-linear-gradient(left,  #E3E000 0%, #E3E000 50%, #ea1c0a 50%, #ea1c0a 100%);
	background: -webkit-linear-gradient(left,  #E3E000 0%,#E3E000 50%,#ea1c0a 50%,#ea1c0a 100%);
	background: linear-gradient(to right,  #E3E000 0%,#E3E000 50%,#ea1c0a 50%,#ea1c0a 100%);
}
#top_bar .content, #top_content {
	position: relative;
}
#top_bg {
	position:absolute;
	top:0; left:0;
	width:100%; height:100%;
	background: #ea1c0a;
	z-index:0;
}
#top_bg div {
	position :absolute;
	top:0; left:0;
	height:100%;
}
#top_bg div:first-child {
	width:63%;
	background-color:#1ea2b1;
	z-index:1;
}
#top_bg div:last-child {
	width:68%;
	background-color:#e3e000;
}
#top_bar .content {
	margin-top:-5px;
	background-color: #fff;
	padding-top:5px;
    background-size: 100% 5px;
    background-position: top center;
    background-repeat: no-repeat;
    padding:1.25rem 1rem 1rem;
}
#top_bar .content #top_bg {
	height:5px;
}

/* STEP INFO */
#step_info .section-title  {
	position: relative;
	top: -1.5rem;
}
#step_info .step-info {
	position: relative;
	padding: 35% 1rem 1.5rem;
}

/* IMAGE GENERATOR */
#image_generator .section-title {
	position:relative;
	padding-right:20px;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#image_generator .steps-list li {
	margin: 3rem 0 2.5rem;
	padding: 0 1.7rem;
	float: left;
	font-weight: 500;
}
#image_generator .steps-list li.active {
	color:#ea1c0a;
	cursor: pointer;
}
#image_generator .steps-list li + li:before {
	content: ".";
	background-image: url(../img/angle_right.png);
	color: #ea1c0a;
	position: relative;
	left: -1.9rem;
	width: 10px;
	display: inline-block;
	background-repeat: no-repeat;
	color: transparent;
	background-position: center;
}
#image_generator .step-title {
	padding: 0 1.7rem;
	margin-bottom:.5rem;
}
[data-step] {
	display:none;
}
[data-step="step_1"] {
	display:block;
}
[data-step="step_1"] > div {
	line-height:20px;
	margin:13px auto 15px;
}
#image-cropper-wrap {
	padding-bottom: 4rem;
}
#img_overlay {
	position :absolute;
	top:0;left:0;
	width:100%; height:100%;
	content:"";
	background-size:cover;
	background-position:center;
	z-index:0;
}
.select_box {
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
}
.select_box .ui-selectmenu-button.ui-button {
	width:100%;
	margin:0;
	padding:0;
	border: 2px solid #bfbfbf;
	border-radius: .25rem;
	outline: none;
}
.select_box .ui-selectmenu-button.ui-button:active {
	background: none;
}
.select_box .ui-selectmenu-text {
	margin: 2px 42px 2px 2px;
	padding:10px;
	color: #404040;
	font-weight: 500;
	font-family: 'BrixSans', sans-serif;
}
.select_box .ui-button .ui-icon {
	background-image: url(../img/angle_down.png);
	background-position: center;
	width:40px; height:40px;
	background-color: #EA1C0A;
	margin:2px;
}
.select_box .ui-widget.ui-widget-content {
	border: 2px solid #c5c5c5;
	border-top: none;
	margin-top: -3px;
	border-radius: .25rem;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background: #f6f6f7;
	padding:0;
}
.select_box .ui-widget-content .ui-state-active {
	background:#EA1C0A;
	border:none;
}
.select_box .ui-widget-content .ui-state-disabled .ui-menu-item-wrapper {
	background: none !important;
	color: transparent !important;
	height:0;
	padding:0;
	margin:0;
}
.select_box .ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 5px 12px;
    font-family: 'BrixSans', sans-serif;
    margin:2px;
}

#overlay_select-menu .ui-menu-item.premium .ui-menu-item-wrapper:after {
	position: absolute;
	content: '';
	height: 24px;
	width: 24px;
	right: 6px;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI1LjQyIDI1LjQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNS40MiAyNS40MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yNS40Miw5Ljg1OGwtOC43ODMtMS4yNzVMMTIuNzEsMC42MjRMOC43ODMsOC41ODFMMCw5Ljg1Nmw2LjM1NCw2LjE5MmwtMS41MDMsOC43NDhsNy44NTktNC4xMjlsNy44NTYsNC4xMjkgICBsLTEuNTA0LTguNzQ4TDI1LjQyLDkuODU4eiBNMTMuNjIsMTguOTM4bC0wLjkxLTAuNDhWNS4wNDZsMi4xNzIsNC4zOTlsMC40NTQsMC45MjNsMS4wMjEsMC4xNDdsNC44NTUsMC43MDdsLTMuNTE4LDMuNDIxICAgbC0wLjczNiwwLjcxOWwwLjE3NiwxLjAxN2wwLjgzMiw0LjgzOEwxMy42MiwxOC45Mzh6IiBmaWxsPSIjMmEyYTJhIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
	background-size: 60%;
	background-position: center center;
	background-repeat: no-repeat;
}
#overlay_select-menu .ui-menu-item.premium .ui-menu-item-wrapper.ui-state-active:after {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDI1LjQyIDI1LjQyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNS40MiAyNS40MjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yNS40Miw5Ljg1OGwtOC43ODMtMS4yNzVMMTIuNzEsMC42MjRMOC43ODMsOC41ODFMMCw5Ljg1Nmw2LjM1NCw2LjE5MmwtMS41MDMsOC43NDhsNy44NTktNC4xMjlsNy44NTYsNC4xMjkgICBsLTEuNTA0LTguNzQ4TDI1LjQyLDkuODU4eiBNMTMuNjIsMTguOTM4bC0wLjkxLTAuNDhWNS4wNDZsMi4xNzIsNC4zOTlsMC40NTQsMC45MjNsMS4wMjEsMC4xNDdsNC44NTUsMC43MDdsLTMuNTE4LDMuNDIxICAgbC0wLjczNiwwLjcxOWwwLjE3NiwxLjAxN2wwLjgzMiw0LjgzOEwxMy42MiwxOC45Mzh6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}


/* FOOTER */
footer {
	background: #59bec9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1EA2B1 0%, #1EA2B1 50%, #E3E000 50%, #E3E000 100%);
	background: -webkit-linear-gradient(left,  #1EA2B1 0%,#1EA2B1 50%,#E3E000 50%,#E3E000 100%);
	background: linear-gradient(to right,  #1EA2B1 0%,#1EA2B1 50%,#E3E000 50%,#E3E000 100%);
    background-size: 100% 5px;
    background-position: bottom center;
    background-repeat: no-repeat;
}
footer .footer-menu li,
footer .social-list li {
	float:left;
}
footer .footer-menu li {
	margin-top:.5rem;
}
footer li + li {
	margin-left:1.5rem;
}
footer .footer-menu {
	float:right;
}
footer .social-list a,
footer .footer-menu a {
	color:#404040;
}
footer .content:empty {
	height:5px;
}

/* RWD */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
	section + section {
		margin-top:7rem;
	}
	.display-3 {
		font-size:3.75rem;
	}
}
@media only screen and (max-width: 991px) {
	section + section {
		margin-top:5rem;
	}
	.display-3 {
		font-size:2.7rem;
	}
	.display-4 {
		font-size: 3.25rem;
	}
	#step_info .section-title {
		top:-1rem;
	}
	#image_generator .steps-list li {
		padding:0 1rem;
		margin:.5rem 0 2.5rem;
	}
	#image_generator .steps-list li + li:before {
		left:-1.15rem;
	}
	#image_generator .step-title {
		padding:0 1rem;
	}
	#image-cropper-wrap {
		padding-bottom:2rem;
	}
	footer li + li {
		margin-left:1rem;
	}
}
@media only screen and (min-width: 768px) {
	#top_content h1 {
		text-align:right;
	}
	#top_bg_img {
		max-width:100%;
	}
	.backdropfilter #top_content .row > div:last-child .content {
		min-height:390px;
	}
}
@media only screen and (min-width: 992px) {
	.backdropfilter #top_content .row > div:last-child .content {
		min-height:500px;
	}
	.backdropfilter #step_info .step-info {
		min-height:317px
	}
}
@media only screen and (min-width: 1200px) {
	.backdropfilter #step_info .step-info {
		min-height:350px
	}
}

@media only screen and (max-width: 768px) {
	.drag-text {
		display: none;
	}
}

@media only screen and (max-width: 767px) {
	#top_content .row > div:last-child .content {
		background-color:#EA1C0A;
		-webkit-box-shadow:150px 0 #B00402;
		box-shadow:150px 0 #B00402;
		padding-top: 1.5rem;
	}
	.display-3 {
		font-size:2.5rem;
	}
	.display-4 {
		font-size:2.75rem;
	}
	.h2, h2 {
		font-size:2rem;
	}
	#top_bg_img {
		width:100%;
	}
	#image_generator .steps-list li {
		margin:.25rem 0;
	}
	#image_generator .steps-list li:first-child,
	#image_generator .steps-list li:nth-child(3) {
		clear:left;
		margin-left:1.5rem;
	}
	#image_generator .steps-list li:first-child:before {
		content: ".";
		background-image: url(../img/angle_right.png);
		color: #ea1c0a;
		position: relative;
		left: -1.15rem;
		width: 10px;
		display: inline-block;
		background-repeat: no-repeat;
		color: transparent;
		background-position: center;
	}
	#image_generator .step-title {
		margin-top:2rem;
	}
	footer ul {
		text-align:center;
	}
	footer .footer-menu li, footer .social-list li {
		float: none;
		display: inline-block;
	}
	footer .footer-menu {
		float:none;
	}
	footer .content:not(:empty) {
		border-top:1px solid #f6f6f7;
	}
	footer small {
		display:block;
	}
	footer .footer-menu li:last-child {
		display: block;
		padding-top: 1rem;
		margin-left:0;
	}
	[data-step="step_1"] > div, .drop-info, .error-msg {
		font-size:1.5rem;
	}
	.drop-info {
		width:275px;
	}
	
}
@media only screen and (max-width: 575px) {
	#top_content .row > div {
		padding-left:0 !important;
		padding-right:0 !important;
	}
	#image_generator > .container {
		padding:0;
	}
	#image_generator .row {
		margin-left:0;
		margin-right:0;
	}
	#image_generator .steps-list li {
		margin-left:.25rem !important;
	}
	#image_generator .steps-list li:nth-child(2) {
		padding-right:0;
	}
	#image_generator .section-title {
		padding-right:0;
	}
}
@media only screen and (max-width: 479px) {
	section + section {
		margin-top: 4.5rem;
	}
	#top_bar .content {
		padding:1rem 1rem .75rem;
	}
	#top_bar img {
		margin-top: .5rem;
		max-width: 90px;
	}
	#top_bar h4 {
		font-size:1.25rem;
		max-width:150px;
		line-height:1;
	}
	#top_content h1 {
		margin-top: .5rem;
	}
	.display-3 {
		font-size:2rem;
	}
	.display-4 {
		font-size:2.25rem;
	}
	.h2, h2 {
		font-size:1.75rem;
	}
	.zoom-slider {
		-ms-transform: scale(.8);
		-webkit-transform: scale(.8);
		transform: scale(.8);
	}
}
@media only screen and (max-width: 389px) {
	#image_generator .steps-list li {
		clear:left;
	}
}
@media only screen and (max-width: 359px) {
	section + section {
		margin-top:4rem;
	}
	#top_bar img {
		margin-top: .5rem;
		max-width: 85px;
	}
	.drop-info {
		width: 230px;
	}
	[data-step="step_1"] > div, .drop-info, .error-msg {
		font-size:1.25rem;
	}
	#image_generator .section-title {
    	-ms-transform: translateY(-25%);
    	-webkit-transform: translateY(-25%);
		transform: translateY(-25%);
	}
}

.eon-navbar {
	list-style-type: none;
	display: inline-block;
    float: right;
	margin-top: 3px;
	margin-right: 40px;
}


@media only screen and (max-width: 479px) {
	.eon-navbar {
		margin-top: 5px;
	}
	
	
}

@media only screen and (max-width: 776px) {
	.eon-navbar {
		float: left;
		margin-right: 0;
	}
}

.eon-navbar li {
	padding: 0;
	margin: 0;
	cursor: pointer;
}


.eon-navbar .eon-navbar__languageselector {
	height: 26px;
	width: 26px;
}


.eon-navbar .eon-navbar__languageselector.status.status--open svg:hover path,
.eon-navbar .eon-navbar__languageselector svg:hover path
{
	fill: #EA1C0A;
}

.eon-navbar .eon-navbar__languageselector.status.status--open svg path {
	fill: #000000;
}

.eon-navbar .eon-navbar__languageselector svg {
	width: 100%;
	height: 100%;
}

.eon-flyout {
	position:fixed; 
	top: 100px;
	left: 0;
	right: 0;
	z-index: 1000;
	background: white;
}

.eon-flyout .container {
	border-top: 3px solid #ccc ;
	padding-top: 50px;
	padding-bottom: 50px;
}

.eon-flyout h3 {
	text-align: right;
	margin-left: 50%;
	width: 50%;
}

.languageselector {
	list-style-type: none;
	padding: 0;
	margin: 0;
}


.languageselector li {
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0 0 7.5px 0;
}

.languageselector li span {
	display: block;
	padding: 0;
	margin: 0;
	font-size: 1.15rem;
	color: #ccc;
}

.languageselector li, .languageselector li span {
	height: 33px;
	line-height: 33px;
}


.languageselector li span:before {
	display: block;
	float: left;
	width: 33px;
	height: 33px;
	content: '';
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-right: 12.5px;
}


.languageselector li.status.status--active span:before {
	background-image: url('../img/radio-active-red.svg');
	
}

.languageselector li.status.status--inactive span:before {
	background-image: url('../img/radio.svg');
}


.languageselector a, .languageselector a:hover, .languageselector a:active, .languageselector a:visited {
	color: #000000;
	text-decoration: none;
}

.languageselector a span, .languageselector a:hover span, .languageselector a:active span, .languageselector a:visited span {
	color: #000000;
}

.eon-flyout {
	display: none;
}

@media only screen and (max-width: 776px) {
	.eon-flyout h3 {
		width: 75%;
		margin-left: 25%;
		padding-bottom: 20px;
		
	}
	
	.languageselector .container {
		padding-top: 25px;
	}
	
	
	.languageselector li span {

		text-align: right;
	}
	
	.languageselector li span:before {
		content:initial;
	}
	
	.languageselector li span:after {
		display: block;
		float: right;
		width: 33px;
		height: 33px;
		content: '';
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-left: 12.5px;
	}
	
	.languageselector li.status.status--active span:after {
		background-image: url('../img/radio-active-red.svg');
	
	}

	.languageselector li.status.status--inactive span:after {
		background-image: url('../img/radio.svg');
	}
	
}