@font-face {
    font-family: 'open_regular';
    src: url('../fonts/OpenSans/Regular/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans/Regular/OpenSans-Regular.eot') format('embedded-opentype'),
    url('../fonts/OpenSans/Regular/OpenSans-Regular.woff') format('woff'),
    url('../fonts/OpenSans/Regular/OpenSans-Regular.ttf') format('truetype'),
    url('../fonts/OpenSans/Regular/OpenSans-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_bold';
    src: url('../fonts/OpenSans/Bold/OpenSans-Bold.eot');
    src: url('../fonts/OpenSans/Bold/OpenSans-Bold.eot') format('embedded-opentype'),
    url('../fonts/OpenSans/Bold/OpenSans-Bold.woff') format('woff'),
    url('../fonts/OpenSans/Bold/OpenSans-Bold.ttf') format('truetype'),
    url('../fonts/OpenSans/Bold/OpenSans-Bold.svg') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'open_semibold';
    src: url('../fonts/OpenSans/SemiBold/OpenSans-Semibold.eot');
    src: url('../fonts/OpenSans/SemiBold/OpenSans-Semibold.eot') format('embedded-opentype'),
    url('../fonts/OpenSans/SemiBold/OpenSans-Semibold.woff') format('woff'),
    url('../fonts/OpenSans/SemiBold/OpenSans-Semibold.ttf') format('truetype'),
    url('../fonts/OpenSans/SemiBold/OpenSans-Semibold.svg') format('svg');
    font-weight: 600;
    font-style: normal;
}

@media all {

    /* INIT */
    html {
        margin: 0 auto;
    }

    body {
        font-family: 'open_regular', sans-serif;
        font-size: 15px;
    }

    footer {
        background-color: var(--rowBackgroundColor);
    }
    
        
    a {
        color: var(--defaultFontColor);
    }
    
	select {
		border-style: solid !important;
		border-width: 1px !important;
		background-color: rgba(0, 0, 0, 0) !important;
		border-color: rgb(204, 204, 204) !important;
		border-bottom-color: rgb(143, 143, 143) !important;
		padding-left: 5px !important;
		padding-top: 0px !important;
		margin-right: 10px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		/* Icon made by Google from www.flaticon.com using the CC-Licence */
		background: url(../images/drop-down-arrow.png) 95%/10px
			no-repeat !important;
	}
	
	/* IE11 Fix, cause we need that special snowflake in our life */
	select::-ms-expand {
	    display: none;
	}
	
	p.before {
        margin: 0;
        position: relative;
        top: 10px;
        color: #999999;
    }
    

	/* ALLGEMEIN */
    .row {
        margin: 0;
        padding: 0;
    }
    
    .mobileColumn {
        padding-right: 0;
        padding-left: 0;
    }

    .fullwidthContainer {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .masterColor, .ym-skiplinks a {
        background-color: var(--masterBackgroundColor);
        color: var(--masterFontColor);
    }

    .navbar-default {
        background-color: #FFF;
        background-image: none;
        border: none;
    }
    
    .panel a:hover, 
    .panel a:active, 
    .panel a:focus, 
    .panel a:visited {
        text-decoration: none;
    }
    
	.floating-label {
		font-family: 'open_regular', sans-serif;
		color: rgb(143, 143, 143);
		font-size: 12px;
		position: relative;
		top: 0;
		z-index: 2;
		opacity: 0;
	}


    /* Menu Bereich */
    .mainnav {
        height: 70px;
        margin: 0;
    }

    .navbar-left {
        padding: 0;
    }

    .navbar-left li {
        padding: 0px 50px 0 0;
        line-height: 20px;
    }

    .navbar-brand {
        padding: 0;
        padding-top: 20px;
        width: 250px;
        height: 40px;
    }

    .navbar-default .navbar-nav > li > a {
        color: var(--secondaryBackgroundColor);
        font-size: 18px;
        font-family: 'open_bold', sans-serif;
        text-decoration: none;
    }

    .navbar-default .navbar-nav > li > a:hover {
        color: var(--masterBackgroundColor);
    }

    .navbar-default .navbar-nav > li > a [class^="icon-"] {
        font-size: 20px;
    }

    .navbar-default .navbar-nav > li > a [class^="icon-p_unten"] {
        padding-left: 5px;
    }

    .navbar-default .navbar-nav > li > a [class^="icon-l_menu"] {
        font-size: 25px;
    }

    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
        background-image: none;
        background-color: transparent;
        box-shadow: none;
    }
    
    .nav > li:first-child > a {
        padding-left: 0px;
    }
    
    .navbar-nav > li {
        float: left;
    }
    
    .navbar-left {
        float: left;
    }
    
    .navbar-right {
        float: right;
    }
    
    .dropdown-toggle:after { content: none }
    
    .dropdown-menu {
        margin: 0px;
        position: fixed;
        left: 0px;
        top: 70px;
        width: 100%;
        background-color: var(--secondaryBackgroundColorTransparent);
        border-radius: 0px;
        border: none;
        
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        -ms-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }

    .open .dropdown-menu {
        max-height: 700px;
        opacity: 1;
    }

    .dropdown-menu li {
        padding: 0 0 0 16px;
        max-width: 1000px;
        margin: 0 auto 20px auto;
    }

    .navbar-nav > li > .dropdown-menu {
    	position: fixed;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 140px;
    }

    #languageSelector li a {
        width: 40px;
        padding-bottom: 2px;
        margin-left: 110px;
        border-bottom: 1px solid rgb(217, 217, 217);
    }

    #languageSelectorLogin li a {
        width: 40px;
        margin-left: 15px;
        border-bottom: 1px solid rgb(217, 217, 217);
    }

    .dropdown-menu li a {
        color: #FFF;
        font-size: 16px;
        padding: 0;
    }

    .dropdown-menu li a.active {
        color: #FFF;
    }

    #languageSelectorLogin li a.active, #languageSelector li a.active, .dropdown-menu li a.active {
        font-family: 'open_bold', sans-serif;;
    }

    .dropdown-menu li a:hover {
        background: none;
        text-decoration: none;
        font-family: 'open_bold', sans-serif;;
        color: #FFF;
    }

    .chooseLanguage {
        padding-top: 20px;
    }

    li.mainMenuIcon > a[aria-expanded=true] .icon-l_menu:before {
        content: "\e90c";
    }

    li.chooseLanguage > a[aria-expanded=true] .icon-p_unten:before {
        content: "\e90e";
    }
    
	.mainMenuIcon a[aria-expanded="false"] ~ ul#maindropdown, .chooseLanguage a[aria-expanded="false"] ~ ul#languageSelector {
		display: none;
	}
	
	/* HEADER IMAGE */
    .headerImage {
        margin-top: 0px;
        padding: 0;
        height: 460px;
        width: 100%;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .headerText {
        padding: 150px 10% 0 10%;
        color: var(--headerImageFontColor);
        text-align: center;
    }

    .headerText .welcomeText {
        font-size: 18px;
    }

    .headerText .customerName {
        font-size: 60px;
    }


    /* FOOTER */
    .footerContent {
        min-height: 410px;
        background-color: var(--rowBackgroundColor);
    }

    .footerContentRow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        display: -webkit-flex;
        flex-wrap: wrap;
        padding-top: 90px;
    }
    
    .footerContentMenu {
        padding-right: 80px;
    }
    
    .footerContentMenu {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footerContentMenu:first-child {
        padding-right: 40px;
        padding-left: 0px;
    }

    .footerContentMenu:last-child {
        padding-left: 40px;
        padding-right: 0px;
    }
    
    .footerContent h2 {
        font-size: 24px;
        font-family: 'open_semibold', sans-serif;;
        border-bottom: 1px solid var(--FooterDividerColor);
        margin-bottom: 20px;
        padding-bottom: 5px;
    }

    .footerContent p.footerMenuContent {
        font-size: 18px;
    }

    .subFooter {
        height: 40px;
        background-color: #FFF;
    }

    .subFooter p {
        font-size: 18px;
    }

    .copyrightText {
        padding-top: 8px;
    }



    /* LOGIN PAGE */
    .loginContainer {
        padding: 0 100px 0 120px;
    }

    #languageSelectorLogin li a{
        padding-bottom: 2px;
        margin-left: 0px;
        border-bottom: 1px solid rgb(217, 217, 217);
    }

    #languageSelectorLogin li a:active {
        font-family: 'open_bold', sans-serif;;
    }


    .loginTitelRow, 
    .loginFormRow, 
    .loginTextRow {
        padding: 0;
    }

    .loginTitel {
        margin-top: 80px;
        margin-bottom: 30px;
        font-size: 32px;
        font-family: 'open_semibold', sans-serif;;
    }

    .form-control {
        font-size: 20px;
        font-family: 'open_semibold', sans-serif;;
        color: var(--secondaryBackgroundColor);
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #8f8f8f;
        box-shadow: none;
        width: 650px;
    }

    .form-control:focus {
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #8f8f8f;
    }
    
    .form-footer {
    	font-size: 16px;
    	color: #999 !important;
    	border: none;
    	background-color: transparent;
    	text-align: right;
    	padding: 6px 0px;
    }

    input.form-control {
        padding-left: 0;
        max-width: 100%;
    }


    .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    .distance-block {
        margin-bottom: 20px;
    }

    small:nth-of-type(2) {
        display: none !important;
    }

	
	/* VALIDATION */
	.validationBox {
		color: var(--validationErrorColor);
	}
	
	.error {
		color: var(--validationErrorColor);
	}
	
	
	/* BUTTONS */
    .btn-axenta {
    	padding-right: 15px;
        background-color: var(--masterBackgroundColor) !important;
        border-radius: 0px;
        color: var(--masterFontColor);
        margin-top: 10px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }
    
    .btn-axenta [class^="icon-"] {
        padding-left: 5px;
    }
    
    .btn-axenta:hover {
    	background-color: var(--masterBackgroundColorLight) !important;
        color: var(--masterFontColor);
    }
    
    .btn-axenta:focus {
    	background-color: var(--masterBackgroundColorLight) !important;
        color: var(--masterFontColor);
    }
    
    .btn-axenta:visited {
    	background-color: var(--masterBackgroundColor) !important;
        color: var(--masterFontColor);
    }
    
    
     
    /* RADIO-BUTTONS */
    .checkboxFive {
        position: relative;
    }

    .checkboxFive label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        margin-top: 2px;
        top: 0;
        left: 0;
        background: #fff;
        border:1px solid #ddd;
    }

    .checkboxFive label:after {
        opacity: 0.0;
        content: '';
        position: absolute;
        width: 6px;
        height: 6px;
        background: transparent;
        top: 7px;
        left: 7px;
    }

    .checkboxFive span {
        margin-left: 20px;
    }

    .checkboxFive label:hover::after {
        opacity: 0.0;
    }

    .checkboxFive input[type=radio]:checked + label:after {
        opacity: 1;
        background-color: #FFF;
    }

    .checkboxFive input[type=radio]:checked + label {
        background-color: var(--masterBackgroundColor);
        border: none;
    }

    .checkboxFive input[type=radio]:not(:checked) {
        opacity: 0.0;
    }
    
    
    
    /* CHECKBOX-BUTTONS */
    .checkboxFive input[type=checkbox]:checked + label:after {
        opacity: 1;
        background-color: #FFF;
    }

    .checkboxFive input[type=checkbox]:checked + label {
        background-color: var(--masterBackgroundColor);
        border: none;
    }

    .checkboxFive input[type=checkbox]:not(:checked) {
        opacity: 0.0;
    }


	
	/* ALLGEMEINE Input/Form-Fields */
	textbox,
	textbox::placeholder {
        font-family: 'open_semibold', sans-serif;
    }
    
	input, 
	input::placeholder  {
        font-family: 'open_regular', sans-serif;
    }

	input[type="password"]:focus, 
    input[type="text"]:focus, 
    input[type="email"]:focus {
        border-bottom-color: var(--masterBackgroundColor);
        border-bottom-width: 2px;
        font-family: 'open_semibold', sans-serif;
    }
    
    /* Classes for no script error */
    .jsCheck {
    	visibility: hidden;
    }
    
    .noScript {
    	width: 100%;
		height: 100%;
		background: #f6f6f6;
		opacity: .6;
		filter: alpha(opacity=60);
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		zoom: 1;
		z-index: 32000;
    }
    
    .noScript p {
    	font-weight: bold;
		border: 1px solid black;
		margin: 10% 15%;
		padding: 10px 0;
		background: white;
		opacity: 1;
    }
    
    a.appStoreLink {
    	margin-left: 2em;
    	color: #196bac;
    	text-decoration:none;
    }
}

@media all and (min-width: 1000px) {
	
    .headerImage {
        margin-top: 0px;
        padding: 0;
        height: 460px;
        width: 100%;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .headerText {
        padding: 150px 10% 0 10%;
        color: var(--headerImageFontColor);
        text-align: center;
    }

    .headerText .welcomeText {
        font-size: 18px;
    }

    .headerText .customerName {
        font-size: 60px;
    }
    
    footer {
        height: 450px;
    }
    
    .hidden-desktop {
        display: none !important;
    }

	.navbar-nav>li>a {
		padding-bottom: 19px;
	}
	
    input[type="password"], 
    input[type="text"], 
    input[type="email"] {
        min-width: 650px;
        width: 650px;
    }
    
    #authPhoneNumber {
    	min-width: 575px; /* for the selector box on the left */
    }
    
    .sms-tan.form-group {
    	padding-top: 21px; /* because the country calling code selector is too high */
    }

}

@media all and (max-width: 999px) {
	
	/* INIT */
    .container {
        width: 100%;
        padding: 0 35px;
    }

    .fullwidthContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .headerImage {
        margin-top: 0px;
        padding: 0;
        height: 300px;
        width: 100%;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .headerText {
        padding: 100px 10% 0 10%;
        color: var(--headerImageFontColor);
        text-align: center;
    }

    .headerText .welcomeText {
        font-size: 18px;
    }

    .headerText .customerName {
        font-size: 50px;
    }

    /* MENU */
    .navbar-nav {
        padding-top: 8px;
    }
    
    .nav > li > a {
        padding: 10px 5px;
    }
    
    .navbar-default .navbar-nav > li > a {
        font-size: 18px;
    }
    
    .navbar-default .navbar-nav > li > a [class^="icon-"] {
        font-size: 20px;
    }

    .navbar-default .navbar-nav > li > a [class^="icon-l_menu"] {
        font-size: 22px;
    }

    #maindropdown li {
        padding-left: 30px;
    }

    #languageSelector li {
        padding-left: 14px;
    }

	.chooseLanguage {
        padding-top: 5px;
    }

    /* LOGIN PAGE */
    .loginContainer {
        padding: 0 80px 0 120px;
    }



    /* FOOTER */
    .footerContentRow {
        margin-top: 40px;
    }
    
    .footerContentRow .footerContentMenu {
        margin-bottom: 50px;
    }

    .footerContent h2 {
        font-size: 22px;
    }

    .footerContent p.footerMenuContent {
        font-size: 16px;
    }
    
    .footerContentMenu:last-child {
        padding-left: 0;
    }

    .subFooter p {
        font-size: 16px;
    }

	#languageSelectorLogin li a {
        padding-left: 0;
        margin-left: 20px;
    }

    .authCodeDescription {
        font-size: 16px;
    }

    input[type="password"], 
    input[type="text"], 
    input[type="email"] {
        width: 100%;
    }
    
    #authPhoneNumber {
    }
    
}

@media all and (max-width: 767px) {
	/* INIT */
	.container {
        width: 100%;
        padding: 0 12px;
    }
    
    
    .headerImage {
        margin-top: 0px;
        padding: 0;
        height: 300px;
        width: 100%;
        position: relative;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .headerText {
        padding: 100px 10% 0 10%;
        color: var(--headerImageFontColor);
        text-align: center;
    }

    .headerText .welcomeText {
        font-size: 18px;
    }

    .headerText .customerName {
        font-size: 28px;
    }
    
    .navbar-brand {
        padding: 0;
        padding-top: 20px;
        width: 100px;
        height: 30px;
    }
    
	
    .container > .navbar-header, 
    .container-fluid > .navbar-header, 
    .container > .navbar-collapse, 
    .container-fluid > .navbar-collapse,
    .container > .navbar-nav {
   		margin: 0;
    }

    .mobileColumn {
        padding-right: 0;
        padding-left: 0;
    }
    
   .mainnav {
        height: auto;
    }
    
    .hidden-mobile {
        display: none !important;
    }

    .fullwidthContainer {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .navbar-nav {
        margin: 0;
        padding-top: 10px;
    }
    
    .nav > li > a {
        padding: 10px 10px;
    }
    
    .navbar-left li {
        padding: 0 5px 0 0;
    }
    
    .navbar-default .navbar-nav > li > a {
        font-size: 16px;
    }
    
    .navbar-default .navbar-nav > li > a [class^="icon-"] {
        font-size: 18px;
    }

    .navbar-default .navbar-nav > li > a [class^="icon-l_menu"] {
        font-size: 20px;
    }
    
    .navbar-nav .open .dropdown-menu {
        position: fixed;
        width: 100%;
        margin-top: 0;
        background-color: rgba(58,58,58,0.95);
        border: 0;
        border-radius: 0px;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    
    #maindropdown li {
        margin-left: 0;
        padding-left: 12px;
    }

    #maindropdown li a {
        padding-left: 0;
    }
    
    #languageSelector li {
        padding-left: 60px;
    }

    #languageSelector li a {
        margin-left: 0;
        padding-left: 0;
    }
    
    .chooseLanguage {
        padding-top: 0;
    }

	.dropdown-menu {
        top: 50px;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: var(--masterFontColor);
    }
    

    /* LOGIN PAGE */
    .loginTitelRow, .loginTextRow, .loginFormRow {
        padding: 0;
    }

    .loginTitel{
        font-size: 24px;
        font-family: 'open_semibold', sans-serif;;
    }

    .form-control {
        font-size: 18px;
    }

    #languageSelectorLogin li a {
        margin-left: 10px;
    }
    
    
    /* FOOTER */
    .footerContent h2 {
        font-size: 18px;
    }
    
    .footerContent p.footerMenuTitel{
        font-size: 18px;
    }

    .footerContent p.footerMenuContent {
        font-size: 14px;
    }
    
    .footerContentRow {
        margin-top: 48px;
    }

    .footerContentRow .footerMenuContent {
        font-size: 14px;
    }

    .footerContentRow .footerContentMenu {
        margin-bottom: 50px;
    }

    .subFooter p {
        font-size: 14px;
    }
    
    .authCodeDescription {
        font-size: 14px;
    }
    
    /* Button */
    .btn-axenta {
        width: 100%;
    }
    
}

@media all and (max-width: 370px) {
    
    .chooseLanguage {
        padding-top: 0;
    }
}

@media all and (max-width: 767px) {
	select {
		width:100% !important;
		background-position: 98.5% !important;
	}
}

@media all and (max-width: 767px) and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.container {
        padding: 0 24px 0 12px;
    }
}