@font-face {
    font-family: 'GT Haptik';
    src: url('../font/GTHaptik-Medium.woff2') format('woff2'),
        url('../font/GTHaptik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GT Haptik';
    src: url('../font/GTHaptik-Bold.woff2') format('woff2'),
        url('../font/GTHaptik-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'GT Haptik';
    src: url('../font/GTHaptik-Medium.woff2') format('woff2'),
        url('../font/GTHaptik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GT Haptik';
    src: url('../font/GTHaptik-Bold.woff2') format('woff2'),
        url('../font/GTHaptik-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/*
a.sidebar-cta {
    color: #;
}

a, strong, .asterisk, .note {
    color: #;
}

.nav_buttons .next_button button.button, button.loginbutton {
    color: #;
    background: #;
}

.nav_buttons .prev_button button.button {
    color: #;
    background: #;
}

.accordion_step--finished .accordion_status, .accordion_step--current .accordion_status, .accordion--current .accordion_status, .nav_buttons .next_button button.button {
    background: #;
}

button:focus, input:focus, optgroup:focus, select:focus, textarea:focus {
    background: # !important;
    color: # !important;
}

:focus {
    border: 1px solid # !important;
}
*/


/********************************************************************************
 * Custom
 ********************************************************************************/
 .nav_buttons button.button {
    min-width: unset;
}
.note {
    font-size: 0.7em;
    color: #e8561e !important;
    margin: 10px 0 0 0;
}

body.indevelopment {
    margin: 45px 0 0 0;
}

.visual-container {
    margin-top: 0;
    height: 50vh;
    min-height: 500px;
}

.content-sidebar {
    width: 30%;
}

.content-main {
    width: 70%;
}

@media screen and (max-width: 767px) { 
    .content-sidebar {
        width: 100%;
    }

    .content-main {
        width: 100%;
    }
}


body {
    background-color: #edefe2;
    font-family:'GT Haptik', sans-serif;
}

img.sidebar_logo {
    margin-bottom: 25px;
}

button.loginbutton {
    background-color: #25baad;
}

h2, a {
    color: #e8561e;
}

p {
    font-size: 1em;
}

.nav_buttons .next_button button.button {
    background: #25baad;
    color: #fff;
}

.accordion_step--finished .accordion_status, .accordion_step--current .accordion_status, .accordion--current .accordion_status {
    background: #e8561e;
}

.accordion_header {
    font-size: 0.8em;
}

.nav_buttons .prev_button button.button, button.loginbutton:hover {
    background: #a5a5a5;
}

.content-row {
    max-width: 1400px;
}

.tickets-overzicht {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;

}

.tickets-overzicht .row {
    width: 100%;
}

.tickets-overzicht .row.header {
    font-weight: bold;
    color: #000000;
    font-size: 1.1em;
}

.column.buttons {
    text-align: right;
}

.tickets-overzicht .row .column {
    padding: 0.3em;
    border-bottom: 1px solid #CCCCCC;
}

.visual-container {
    background-image: url(../images/background.jpg);
}

h1, h2, h3, h4, h5 {
    text-transform: none;
}

.pass_forgot {
    margin-top: 25px;
}

span.visual-captionbox-title {
    text-transform: none;
    width: 70%;
    float: right;
    margin: 9.5em 0 10px 0;
    text-shadow: 2px 2px 2px #0000009c;
}

.bestellen, .downloaden {
    -webkit-appearance: none;
    border: none;
    padding: 10px;
    width: auto;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    border-radius: 0;
    color: #ffffff;
    background-color: #e8561e;
    margin: 10px;
}

.downloaden {
    background-color: #25baad;
}

.menu-container {
    height: 0px;
}

button:focus, input:focus, optgroup:focus, select:focus, textarea:focus {
    border: none !important;
    background: #e8e8e8!important;
    color: #e8561e!important;
}

:focus {
    border: 1px solid #e8561e !important;
}

.tickets-overzicht .row .column:first-child {
width: 40%;
}
@media 
only screen and (max-width: 768px) {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
        width: 100%;
	}
	

	
    .tickets-overzicht .row .column:first-child {
        width: 100%;
        }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		position: relative;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	.column.buttons {
        text-align: left;
        margin-bottom: 16px;
    }
    .tickets-overzicht .row .column:first-child {
        border-top: 1px solid #CCCCCC; 
        padding-top: 16px;
    }
    .tickets-overzicht .row.header .column:first-child {
        border-top: 0px solid #CCCCCC; 
    }
    .tickets-overzicht .row .column {
        border-bottom: 0px solid #CCCCCC; 
    }
    .bestellen, .downloaden {
        margin: 0;
    }
    span.visual-captionbox-title {
        width: 100%;
    }
}
  