@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700,800,900);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@keyframes wiggleVertical{
    0%,20%,50%,80%,100%{
        -webkit-transform:translateY(0);
        -moz-transform:translateY(0);
        -ms-transform:translateY(0);
        -o-transform:translateY(0);
        transform:translateY(0)
    }
    40%{
        -webkit-transform:translateY(-5px);
        -moz-transform:translateY(-5px);
        -ms-transform:translateY(-5px);
        -o-transform:translateY(-5px);
        transform:translateY(-5px)
    }
    60%{
        -webkit-transform:translateY(-3px);
        -moz-transform:translateY(-3px);
        -ms-transform:translateY(-3px);
        -o-transform:translateY(-3px);
        transform:translateY(-3px)
    }
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-6px);}
    60% {transform: translateY(-3px);}
}
@font-face {
    font-family: oeamtc;
    src: url(../fonts/oeamtc.ttf);
}

/*** CSS RESET ***/
html * {
    /* Most basic CSS reset */
    margin: 0;
    padding: 0;
    font: inherit;
    box-sizing: border-box; /* All elements need to be rendered in the new box-model */
}
body {
    font:  16px/1.5 'Lato', Verdana, sans-serif;
    color: #1d1d1b;
    max-width: 1440px;
    margin: auto;
    overflow-x: hidden;
}
main {
    overflow: hidden;
    clear: both;
}
a {
    color: #0071bb;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
img {
    vertical-align: bottom;
}
abbr {
    border: 0;
    text-decoration: none;
}
h1, h2, h3 {
    font: bold 1em 'Merriweather Sans', Myriad, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}
h2 {
    font-size: 1.75em;
}
h3 {
    font-size: 1.5em;
}
hr {
    height: 1px;
    background-color: #e6e6e6;
    border: none;
    outline: none;
    color: transparent;
    margin: 20px 15px;
    clear: both;
}
strong {
    font-weight: 900;
}
small {
    font-size: 0.7em;
}
input, button, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: 0;
    border: none;
    border-radius: 0;
}
@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
} /* Phone Landscape */

/*** GENERIC CLASSES ***/
.paragraph {
    margin-bottom: 20px;
}
.float--right {
    float: right;
}
.float--left {
    float: right;
}
.align--right {
    text-align: right;
}

/* EDITORIAL CONTENT */
.text {
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.text p,
.text h2,
.text h3,
.text ul,
.text figure,
.text p:last-child,
.text h2:last-child,
.text h3:last-child,
.text ul:last-child,
.text figure {
    margin-bottom: 0;
}
.text ul {
    list-style: none;
}
.text ul li {
    padding-left: 20px;
    position: relative;
}
.text ul li::before {
    content: '\A';
    display: block;
    position: absolute;
    left: 3px;
    top: 9px;
    width: 6px;
    height: 6px;
    background-color: #0071bb;
}
.text figure img {
    width: 100%;
    height: auto;
}
.text figure.float--right {
    margin-left: 20px;
    width: 40%;
    min-width: 200px;
}
.text figure figcaption {
    background-color: #f6f6f6;
    padding: 10px;
}
.text table {
    margin-bottom: 20px;
    border: 1px solid #e6e6e6;
    border-collapse: collapse;
    width: 100%;
}
.text table th {
    background-color: #f6f6f6;
    font-weight: bold;
}
.text table th,
.text table td {
    border: 1px solid #e6e6e6;
    padding: 8px;
    text-align: left;
    vertical-align: top;
    line-height: 1.3;
}

/*** FORMS ***/
.form {
    overflow: hidden;
}
.form--grey {
    background-color: #f6f6f6;
}
.form__fieldset {
    border: 0;
    display: block;
}
.form__element {
    margin-bottom: 15px;
    width: 100%;
}

.btn,
input[type="submit"],
input[type="button"] {
    background-color: #ffdc00;
    font-weight: bold;
    padding: 12px 20px;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    color: inherit;
}
.btn--right {
    float: right;
}
.btn--round {
    border-radius: 3px;
}
.btn--green {
    background-color: #45a617;
    color: #fff;
}
.btn--red {
    background-color: #da2032;
    color: #fff;
}
@media screen and (min-width: 768px) {
    .underline {
        text-shadow: -.12em .08em white, .12em .08em white;
        /*
        box-shadow: inset 0 -.07em white, inset 0 -.125em transparent;
        -webkit-transition: box-shadow .2s ease;
        -moz-transition: box-shadow .2s ease;
        -ms-transition: box-shadow .2s ease;
        -o-transition: box-shadow .2s ease;
        transition: box-shadow .2s ease;
        */
    }
    .text a:hover, /* Links in a editorial context */
    .underline:hover, /* Links in a programmaticsl context */
    .active .underline,
    .btn:hover .underline, /* Button underline */
    [class*="__link"]:hover > .underline {
        background: linear-gradient(currentColor,currentColor) 0 1.1em/100% .085em no-repeat content-box;
        /*box-shadow: inset 0 -.07em white, inset 0 -.125em currentColor;*/
    }
    [class*="--grey"] .underline {
        /*box-shadow: inset 0 -.07em #f6f6f6, inset 0 -.125em transparent;*/
        text-shadow: -.12em .08em #f6f6f6, .12em .08em #f6f6f6;
    }
    /*
    [class*="--grey"] .underline:hover {
        box-shadow: inset 0 -.07em #f6f6f6, inset 0 -.125em currentColor;
    }
    */
    .btn .underline {
        /*box-shadow: inset 0 -.07em #ffdc00, inset 0 -.125em transparent;*/
        text-shadow: -.1em .08em #ffdc00, .1em .08em #ffdc00;
    }
    /*
    .btn:hover .underline {
        box-shadow: inset 0 -.07em #ffdc00, inset 0 -.125em currentColor;
    }
    */
    .btn--green .underline {
        /*box-shadow: inset 0 -.07em #45a617, inset 0 -.125em transparent;*/
        text-shadow: -.12em .08em #45a617, .12em .08em #45a617;
    }
    /*.btn--green:hover .underline {
        box-shadow: inset 0 -.07em #45a617, inset 0 -.125em currentColor;
    }*/
    .btn--red .underline {
        /*box-shadow: inset 0 -.07em #da2032, inset 0 -.125em transparent;*/
        text-shadow: -.12em .08em #da2032, .12em .08em #da2032;
    }
    /*
    .btn--red:hover .underline {
        box-shadow: inset 0 -.07em #da2032, inset 0 -.125em currentColor;
    }
    */
    input[type="submit"]:hover,
    input[type="button"]:hover {
        background: #ffdc00 linear-gradient(currentColor,currentColor) 20px calc(12px + 1em)/calc(100% - 40px) .085em no-repeat;
    }
} /* Tablet Landscape */

.textfield {
    line-height: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 0;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    -webkit-transition: border-color .2s;
    -moz-transition: border-color .2s;
    -ms-transition: border-color .2s;
    -o-transition: border-color .2s;
    transition: border-color .2s;
}
.select:hover,
.textfield:hover {
    border-color:#cecece;
}
.select:focus,
.select:active,
.textfield:focus,
.textfield:active {
    border-color: #0071bb;
}
.select {
    display: block;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    background-image: url("https://images01-david.oeamtc.at/spunq-assets/images/dropdown-arrow.png?1486043459");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    padding: 8px 40px 8px 8px;
    cursor: pointer;
    -webkit-transition: border-color .2s;
    -moz-transition: border-color .2s;
    -ms-transition: border-color .2s;
    -o-transition: border-color .2s;
    transition: border-color .2s;
}

.price {
    font: 24px/24px 'Merriweather Sans', sans-serif;
    background-color: #d31223;
    color: #fff;
    padding: 9px 12px;
    border-radius: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-top: 15px;
}
.price--right {
    float: right;
}

/*** GRID ***/
.row {
    overflow: hidden;
    position: relative;
    max-width: 1120px; /* Leaves 320px space for advertisement on the right-hand side */
}
.row::after {
    /* row doubles as clearfix */
    display: block;
    content: '\A';
    height: 0;
    clear: both;
}
.row--full {
    max-width: none;
}
.row--center {
    max-width: 990px;
    margin: auto;
}
.row--inter {
    background-color: white;
    position: relative;
    top: -100px;
    outline: 15px solid white;
}

.row__target {
    position: absolute;
    margin-top: -100px; /*Target must be set 50px below due to the small header */
}
.row__wrapper {
    overflow: hidden; /* Makes the row content wrap around the row label (if present)*/
}
.row__wrapper--flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}
.row__headline {
    line-height: 40px;
}

.row__box {
    position: relative;
    padding: 15px;
}
.row__box--lines::before,
.row__box--lines::after {
    content: '\A';
    position: absolute;
    background-color: #e6e6e6;
}
.row__box--lines::before {
    height: 1px;
    top: -1px;
    left: 15px;
    right: 15px;
} /*top-line*/
.row__box--lines::after {
    width: 1px;
    top: 15px;
    left: -1px;
    bottom: 15px;
} /*left-line */

.row__width {
    float: left;
}
.row__width--22 {
    width: 22.222%
}
.row__width--33 {
    width: 33.333%;
}
.row__width--44 {
    width: 44.444%
}
.row__width--50 {
    width: 50%;
}
.row__width--66 {
    width: 66.666%;
}
.row__width--50:nth-child(2n+1),
.row__width--33:nth-child(3n+1) {
    clear: left; /* every second half- and third triple-teaser resets the floating for a new line*/
}

.leftcolumn {
    float: left;
    clear: left;
    width: 220px;
    margin: 15px 15px 15px 0;
    overflow: hidden;
}
.leftcolumn__anchor {
    display: block;
    position: relative;
    white-space: nowrap;
    font: 900 14px/40px 'Merriweather Sans', sans-serif;
    text-transform: uppercase;
    padding: 0 20px;
    color: inherit;
    background-color: #f6f6f6;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}
.leftcolumn__anchor:hover {
    background-color: #e6e6e6;
}
.leftcolumn__item + .leftcolumn__item {
    border-top: 1px solid rgba(80,80,80,0.2);
    background-clip: content-box;
}

@media screen and (min-width: 600px) {
    .row {
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 50px;
        margin-bottom: 50px;
    }
    .leftcolumn--noindent {
        position: absolute;
        z-index: 1;
        margin: 0;
    } /* A row-label that does not push its nearest wrapper to the right, but lies over it */
    .leftcolumn__anchor--big {
        line-height: 50px;
        font-size: 18px;
        text-transform: none;
    }
    .leftcolumn__anchor.active,
    .leftcolumn__anchor--yellow {
        background-color: #ffdc00!important;
    }
} /* Tablet Landscape */
@media screen and (max-width: 1024px) {
    /*** Depending on screen size Labels move to the top of teyr respective content ***/
    .leftcolumn {
        float: none;
    }
    .row--inter {
        background-color: transparent;
        position: static;
        top: 0;
        outline: none;
    }

} /* Tablet Portrait */
@media screen and (max-width: 768px) {
    .row__width--50,
    .row__width--33 {
        width: 50%;
    }
    .row__width--33:nth-child(2n+1) {
        clear: left;
    }
    .row__width--33:nth-child(3n+1) {
        clear: none;
    }
    .row__width--66,
    .row__width--66 + .row__width--33 {
        float: none;
        width: auto;
    }
} /* Small Tablet Portrait */
@media screen and (max-width: 600px) {
    /* refactor grid to accordeon */
    .leftcolumn {
        width: auto;
        position: relative;
        margin: 0;
        border-bottom: 1px solid #e6e6e6;
    }
    .leftcolumn__anchor {
        margin: 0;
        background-color: #ffffff;
        line-height: 70px;
        height: 70px;
    }
    .leftcolumn__item + .leftcolumn__item {
        display: none;
    }
    .leftcolumn__anchor::after {
        content: '+';
        position: absolute;
        right: 2%;
        top: 0;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .leftcolumn + [aria-expanded="false"] {
        max-height: 0;
        overflow: hidden;
    }
    .row__target:target + .leftcolumn .leftcolumn__anchor:after {
        content: '-';
    }
    .row__target:target ~ [aria-expanded="false"] {
        /* Javascript-less accordeon effect for anchor content */
        max-height: 4000px;
        -webkit-transition: max-height 1s;
        -moz-transition: max-height 1s;
        -ms-transition: max-height 1s;
        -o-transition: max-height 1s;
        transition: max-height 1s;
    }
} /* Phone Landscape */
@media screen and (max-width: 480px) {
    /* refactor grid to fullwidth */
    .row__box {
        float: none;
        width: auto;
        clear: both;
    }
    .row__box .teaser__image {
        float: left;
        width: 40%;
        max-width: 250px;
        margin-right: 15px;
    }
    .row__box  .teaser__headline {
        margin-top: 0;
    }
} /* Phone Portrait */

/*** HEADER ***/
.header {
    background-color: #ffdc00;
    position: relative;
    z-index: 3;
}
.header__logo {
    display: inline-block;
    padding: 37px 0 12px 33px;
    color: inherit;
}
.header__logo svg {
    vertical-align: -6px;
}
.header__name {
    display: none;
}
.header--small {
    position: fixed;
    z-index: 2;
    top: 0;
    width: 100%;
    max-width: 1440px;
    height: 50px;
}
.header__logo--small {
    padding: 10px;
    float: left;
    margin-left: 10px;
}
@media screen and (max-width: 1024px) {
    /*** Toggle header depending on screen size ***/
    main {
        padding-top: 50px;
    }
    .header {
        display: none;
    }
    .header--small {
        display: block;
    }
} /* Tablet Portrait */

/*** NAVIGATION ***/
.nav--main {
    margin-left: 18px;
}
.nav--meta {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 1rem;
}
.nav--small {
    margin-left: 20%;
    width: calc(90% - 200px);
    height: 50px;
    overflow: hidden;
}
.nav--smallright {
    position: absolute;
    right: 10px;
    top: 0;
}
.nav--side {
    right: 0;
    max-width: 340px;
}
@media screen and (max-width: 1024px) {
    .nav--small {
        margin-left: 0;
    }
    /* Small header navigation gets refactored into a breadcrumb-link under Tablet portrait-mode*/
    .nav--small .nav__item {
        display: none;
    }
    .nav--small .nav__item--active {
        font-size: 1.5rem;
        display: inline-block;
        background-color: transparent;
        background-size: 2px 30px!important;
        background-repeat: no-repeat;
        background-position: 0 10px;
        background-image: linear-gradient(currentColor,currentColor), none;
        -webkit-transform: scale(.9,1);
        -moz-transform: scale(.9,1);
        -ms-transform: scale(.9,1);
        -o-transform: scale(.9,1);
        transform: scale(.9,1);
        -webkit-transform-origin: 0 50%;
        -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        -o-transform-origin: 0 50%;
        transform-origin: 0 50%;
        letter-spacing: -.07em;
    }
    .nav--small .nav__item--active .nav__link {
        padding-left: 10px;
    }
} /* Tablet Portrait */

.nav__item {
    display: inline-block;
    vertical-align: bottom;
    -webkit-transition: background .2s ease-in;
    -moz-transition: background .2s ease-in;
    -ms-transition: background .2s ease-in;
    -o-transition: background .2s ease-in;
    transition: background .2s ease-in;
}
.nav__item:hover {
    background-color: #ffffff;
}
.nav__item--active {
    background-color: #fff;
}
.nav__item--block {
    display: block;
    border-top: 1px solid #e6e6e6;
}

.nav__link {
    font: 800 19px/50px 'Merriweather Sans', sans-serif;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 50px;
    color: #1d1d1b;
    text-transform: uppercase;
    padding: 0 20px;
}
.nav__link--main {
    line-height: 56px;
    height: 56px;
}
.nav__link--icon {
    padding: 10px;
}
.nav__link--meta {
    font-size: 1rem;
}

.nav__icon {
    display: block;
    width: 28px;
    height: 28px;
    background-size: 100%;
    background-position: center;
    font: 25px/1 oeamtc;
    text-align: center;
}
.nav__icon--search::before {
    content:'\f001';
}
.nav__icon--top::before {
    content:'\f002';
}
.nav__icon--more {
    text-align: center;
    background-image: none;
}
.nav__icon--more span {
    margin: 0 3px;
}
.nav__icon--more::before,
.nav__icon--more::after,
.nav__icon--more span {
    content: '\A';
    width: 4px;
    height: 4px;
    position: relative;
    top: 0;
    display: inline-block;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: #1d1d1b;
    -webkit-transition: top .3s;
    -moz-transition: top .3s;
    -ms-transition: top .3s;
    -o-transition: top .3s;
    transition: top .3s;
}
[class*="--hover"] .nav__icon--more::before,
[class*="--hover"] .nav__icon--more::after {
    top: -7px;
} /* three dots become an arrow when clicked */

.nav__icon--menu {
    background-size: 3px 3px;
    background-repeat: repeat-x;
    background-position: 0 50%;
    background-image: linear-gradient(currentColor,currentColor);
    position: relative;
}
.nav__icon--menu::before,
.nav__icon--menu::after {
    content: '\A';
    height: 3px;
    display: block;
    position: absolute;
    background-color: #1d1d1b;
    width: 100%;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -ms-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: cubic-bezier(.63, .62, .48, 1.64);
    -moz-transition-timing-function: cubic-bezier(.63, .62, .48, 1.64);
    -ms-transition-timing-function: cubic-bezier(.63, .62, .48, 1.64);
    -o-transition-timing-function: cubic-bezier(.63, .62, .48, 1.64);
    transition-timing-function: cubic-bezier(.63, .62, .48, 1.64);
}
.nav__icon--menu::before {
    top: 5px;
    -webkit-transition-property: top, -webkit-transform;
    -moz-transition-property: top, -moz-transform;
    -ms-transition-property: top, -ms-transform;
    -o-transition-property: top, -o-transform;
    transition-property: top, transform;
}
.nav__icon--menu::after {
    bottom: 4px;
    -webkit-transition-property: bottom, -webkit-transform;
    -moz-transition-property: bottom, -moz-transform;
    -ms-transition-property: bottom, -ms-transform;
    -o-transition-property: bottom, -o-transform;
    transition-property: bottom, transform;
}
.flyout__ckeck:checked + .flyout__label .nav__icon--menu::before {
    top: 12px;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    -o-transform-origin: bottom center;
    transform-origin: bottom center;
}
.flyout__ckeck:checked + .flyout__label .nav__icon--menu::after {
    bottom: 12px;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -ms-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
}
.flyout__ckeck:checked + .flyout__label .nav__icon--menu {
    background-image: none;
 }

@media screen and (min-width: 768px) {
    .nav__item {
        background-image: url(../img/white.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 1px 1px;
    }
    .nav__item:hover {
        background-color: #ffffff;
        background-size: 200px 200px;
    }
    .nav__item--hover {
        -moz-transition-delay: .2s;
        -ms-transition-delay: .2s;
        -o-transition-delay: .2s;
        transition-delay: .2s;
    }
    .nav__link:hover .nav__icon--top {
        animation: wiggleVertical 1s ease-in-out;
        -webkit-animation: wiggleVertical 1s ease-in-out;
    }
    .nav__link:hover .nav__icon--more::before,
    .nav__link:hover .nav__icon--more::after,
    .nav__link:hover .nav__icon--more span {
        -webkit-animation: bounce 1s ease-in-out;
        animation: bounce 1s ease-in-out;
    }
    .nav__link:hover .nav__icon--more span {
        -webkit-animation-delay: .1s;
        -moz-animation-delay: .1s;
        -ms-animation-delay: .1s;
        -o-animation-delay: .1s;
        animation-delay: .1s;
    }
    .nav__link:hover .nav__icon--more::after {
        -webkit-animation-delay: .2s;
        -moz-animation-delay: .2s;
        -ms-animation-delay: .2s;
        -o-animation-delay: .2s;
        animation-delay: .2s;
    }
    .nav__link:hover .nav__icon--menu::before {
        top : 2px;
    }
    .nav__link:hover .nav__icon--menu::after {
        bottom : 2px;
    }

} /* Tablet Landscape */

/*** FLYOUT ELEMENTS ***/
.flyout {
    visibility: hidden;
    position: absolute;
    max-height: 0;
    opacity: 0;
    background-color: #fff;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-property: max-height, visibility, opacity;
    -moz-transition-property: max-height, visibility, opacity;
    -ms-transition-property: max-height, visibility, opacity;
    -o-transition-property: max-height, visibility, opacity;
    transition-property: max-height, visibility, opacity;
    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-box-shadow: 0 3px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 3px 4px rgba(0,0,0,.2);
    box-shadow: 0 3px 4px rgba(0,0,0,.2);
}
.flyout--main {
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -ms-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s;
    width: 100%;
    padding: 20px;
    left: 0;
}
.flyout--login {
    right: 0;
    width: 600px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: stretch;
}
.flyout--side {
    right: -10px;
    max-width: 400px;
}
.flyout--search {
    right: 0;
    width: 500px;
}
.flyout--breadcrumb {
    right: 0;
}
.flyout__ckeck {
    display: none;
}

[class$="--hover"] > .flyout--main {
    max-height: 420px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
[class$="--hover"] > .flyout--breadcrumb {
    max-height: 400px;
}
[class$="--hover"] > .flyout,
.flyout__ckeck:checked ~ .flyout {
    opacity: 1;
    z-index: 2;
    visibility: visible;
}
.flyout__ckeck:checked ~ .flyout--login {
    max-height: 300px;
}
.flyout__ckeck:checked ~ .flyout--side {
    max-height: 640px;
}
.flyout__ckeck:checked + .flyout__label {
    background-color: #fff;
}

/*** HEADERSEARCH ***/
.headersearch {
    float: right;
    position: relative;
    bottom: 16px;
    margin-right: 20px;
    width: calc(100% - 860px);
    max-width: 300px;
}
.headersearch__textfield {
    display: block;
    border: none;
    width: 100%;
    line-height: 50px;
    height: 50px;
}
.headersearch__textfield:focus ~ .flyout--search {
    visibility: visible;
    opacity: 1;
    max-height: 600px;
}
.headersearch__btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 10px;
    background-image: url(../img/icons.svg#Search),none;
    background-size: 100%;
    background-color: transparent;
}
.headersearch__btntext {
    display: none;
}
.headersearch__headline {
    font-size: 1rem;
}

/*** LOGINFORM ***/
.loginform__form {
    padding: 25px;
}
.loginform__form--meta {
    width: 50%;
}
.loginform__headline {
    margin: 50px 0 20px 0;
    font-size: 1.25rem;
}
.loginform__register {
    width: 50%;
    text-align: center;
    background-color: #f6f6f6;
    border-right: 1px solid #e6e6e6;
    padding: 25px;
}
.sideregister {
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.sideregister__headline {
    margin-bottom: 20px;
}

/*** HERO ARTICLE ***/
.hero {
    position: relative;
    z-index: 0;
    height: 50vw;
    padding-top: 50px;
    max-height: 473px;
    min-height: 250px;
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    -ms-flex-pack: center;
}
.hero__textbox {
    max-width: 880px;
    width: 90%;
    text-shadow: 1px 1px 7px rgba(0,0,0,.5), 0 0 20px rgba(0,0,0,.3);
    padding: 0 40px;
}
.hero__text {
    font-size: 1.125rem;
    color: #ffffff;
    max-height: 4.5em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 20px;
}
.hero__headline {
    line-height: 1;
    font-size: 3em;
    font-weight: 900;
    display: inline-block;
    overflow: visible;
    text-overflow: ellipsis;
    background-size: 5px calc(100% - .2em);
    background-repeat: no-repeat;
    background-position: 0 .1em;
    background-image: linear-gradient(#ffdc00,#ffdc00), none;
    padding-left: 1em;
    margin-left: -1em;
}
.hero__image {
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
}
.hero__link {
    text-transform: uppercase;
    color: #ffffff;
}
.hero::after {
    background-color: rgba(0,0,0,.5);
    z-index: -1;
}
.hero::after,
.hero__link::after {
    /* This makes the Teaser fully clickable */
    content: '\A';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hero__btn {
    position: relative;
    z-index: 1;
}
.hero__copyright {
    position: absolute;
    line-height: 1;
    font-size: .75rem;
    right: 10px;
    bottom: 10px;
    opacity: .75;
    color: #ffffff;
}
@media screen and (max-width: 600px) {
    .hero {
        padding-top: 0;
    }
    .hero__headline {
        font-size: 1.8rem;
    }
} /* Phone Landscape */

/*** ICONS ***/
.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}
.icon--download {
    background-image: url(../img/icons.svg?color=red#Download);
}
.sharing {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 1;
}
.sharing__icon {
    width: 36px;
    height: 36px;
    display: block;
    float: left;
    background-color: rgba(255,255,255,.4);
    margin-left: 10px;
    cursor: pointer;
    -webkit-transition-duration: .25s;
    -moz-transition-duration: .25s;
    -ms-transition-duration: .25s;
    -o-transition-duration: .25s;
    transition-duration: .25s;
}
.sharing__icon::before {
    display: block;
    content: " ";
    background-image: url(https://images01-www.oeamtc.at/spunq-assets/images/PixelGrid/oeamtc-pixel-grid.svg?1493206288);
    background-size: 1000px 1800px;
    background-repeat: no-repeat;
}
.sharing__icon:hover {
    transform: scale(1.2);
}
.sharing__icon--facebook::before {
    height: 22px;
    width: 11px;
    background-position: 0 -400px;
    margin: 8px 0 0 12px;
}
.sharing__icon--twitter::before {
    height: 18px;
    width: 22px;
    background-position: -100px -400px;
    margin: 9px 0 0 7px;
}
.sharing__icon--googleplus::before {
    height: 20px;
    width: 22px;
    background-position: -200px -400px;
    margin: 11px 0 0 8px;
}
.sharing__icon--facebook:hover {
    background-color: #3c5193;
}
.sharing__icon--googleplus:hover {
    background-color: #cb2d25;
}
.sharing__icon--twitter:hover {
    background-color: #37a7df;
}
@media screen and (max-width: 600px) {
    .sharing {
        display: none;
    }
} /* Phone Landscape */

/*** BREADCRUMB ***/
.breadcrumb {
    line-height: 50px;
    position: relative;
    margin-bottom: 40px;
    z-index: 1;
}
.breadcrumb__inner {
    white-space: nowrap;
    background-color: #ffffff;
    clip: rect(0px,1440px,2000px,0px); /* cuts the dropshadow left and right */
    -webkit-box-shadow: 0 1px 7px rgba(50,50,50,.2);
    -moz-box-shadow: 0 1px 7px rgba(50,50,50,.2);
    box-shadow: 0 1px 7px rgba(50,50,50,.2);
}
.breadcrumb__label {
    text-transform: uppercase;
}
.breadcrumb__item {
    display: inline-block;
    vertical-align: bottom;
    margin-left: 20px;
}
.breadcrumb__link {
    position: relative;
    font-weight: 700;
    display: block;
    padding: 0 20px;
}
.breadcrumb__link::before {
    content: '\A';
    display: block;
    position: absolute;
    left: 3px;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #0071bb;
}
.breadcrumb__more {
    position: absolute;
    background-image: none;
    z-index: 2;
    right: 0;
    top: 0;
}
.breadcrumb__more:hover,
.breadcrumb__more--hover {
    background-color: #e6e6e6;
}
.flyout--breadcrumb .breadcrumb__item {
    display: block;
    margin-left: 10px;
}

/*** TEASER ***/
.teaser {
    position: relative;
    overflow: hidden;
}
.teaser--grey {
    background-color: #f6f6f6;
}
.teaser__image {
    position: relative;
    overflow: hidden;
    background-color: #a9a9a9;
    /* Teaser-Image is rendered as background-image */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 15px;
}
.teaser__image::after {
    content: '\A';
    display: block;
    padding-bottom: 65%; /* Teaser-Image is 55% the height of its width */
}
.teaser__image--list {
    float: left;
    width: 43%;
    max-width: 250px;
    margin: 0 15px 0 0;
}
.teaser__image--grey {
    margin: 0!important;
}
.teaser__image img {
    width: 100%;
    position: absolute;
    top: 0;
}
.teaser__image--flexheight::after {
    content: none;
}
.teaser__image--flexheight img {
    position: static;
    height: auto;
}
.teaser__padding {
    overflow: hidden;
    padding: 15px;
}
.teaser__text {
    /* Teaser-description gets truncated after 3 lines (line-height: 1.5 * 3 = 4.5em) */
    max-height: 4.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.teaser__headline {
    margin-bottom: .4em;
    max-height: 2.6em;
    line-height: 1.3;
    padding-bottom: .125em;
    overflow: hidden;
    /* following is necessary for Chrome to clamp text with "..." alfter 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.teaser__link {
    color: inherit;
}
.teaser__link::after {
    /* This makes the Teaser fully clickable */
    content: '\A';
    display: block;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*** LINKLIST ***/
.linklist {
    position: relative;
}
.linklist__item {
    position: relative;
    list-style: none;
    padding: 8px 0 8px 20px;
    background-origin: border-box;
}
.linklist__item::before {
    content: '\A';
    display: block;
    position: absolute;
    left: 3px;
    top: 17px;
    width: 6px;
    height: 6px;
    background-color: #0071bb;
}
.linklist__link {
    font-weight: 700;
    color: inherit;
}
.linklist__link::after {
    /* This makes the Teaser fully clickable */
    content: '\A';
    display: block;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*** FOOTER ***/
.footer {
    background-color: #252b33;
    overflow: hidden;
}
.footer__row {
    max-width: 1200px;
    padding: 20px;
    margin: auto;
}
.footer__section--left {
    float: left;
    width: 50%;
    padding-right: 60px;
    border-width: 0 1px 0 0;
    border-color: #595c63;
    border-style: solid;
    margin-bottom: 40px;
}
.footer__section--right {
    float: right;
    padding-left: 60px;
    width: 50%;
    margin-bottom: 40px;
}
.footer__headline {
    color: #fff;
    margin-bottom: 15px;
}
.footer__text {
    color: #bbb;
    margin-bottom: 15px;
}

.footernav {
    border-top: 1px solid #595c63;
    padding-top: 15px;
    clear: left;
    overflow: hidden;

}
.footernav__item {
    display: inline-block;
    padding-right: 20px;
    font-size: .85rem;
    color: #85898d;

}
.footernav__link {
    color: inherit;
}
@media screen and (max-width: 600px) {
    .footernav__item--right {
        float: none;
    }
    .footer__section--left,
    .footer__section--right {
        float: none;
        width: auto;
        padding: 0;
        margin-bottom: 20px;
    }
    .footer__section--left {
        border-width: 0 0 1px 0;
    }
} /* Phone Landscape */

/*** ADS ***/
.adrail {
    position: relative;
}
.banner {
    clear: left;
}
.banner--right {
    position: absolute;
    z-index: 0;
    margin-left: 1140px;
    padding: 15px 0;
    top: 0;
}
.banner__inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    width: 100%;
    color: #ffffff;
    padding: 20px 40px;
    font: 2.5rem/1 'Merriweather Sans', sans-serif;
    background-color: #ffdc00;
    margin: auto;
}
.banner__inner--sitebar {
    width: 300px;
    height: 600px;
}
.banner__inner--superbanner {
    max-width: 920px;
    height: 100px;
}
.banner__inner--cad {
    max-width: 300px;
    height: 250px;
}
.banner__text {
    display: block;
    margin: auto;
}
@media screen and (max-width: 1024px) {
    .banner--right {
        position: static;
        margin-left: 0;
        background-color: #e6e6e6;
    }
} /* Tablet Portrait */

.checklist__item {
    position: relative;
    list-style: none;
    font: 800 16px/22px 'Merriweather Sans', sans-serif;
    padding-left: 38px;
    margin-bottom: 15px;
}
.checklist__item:before {
    content: " ";
    background-image: url(https://images01-www.oeamtc.at/spunq-assets/images/PixelGrid/oeamtc-pixel-grid.svg?1493732948);
    background-size: 1000px 1800px;
    background-repeat: no-repeat;
    background-position: -200px -100px;
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}
.checklist__big--red {
    font-size: 2rem;
    display: inline-block;
    margin-bottom: 10px;
    color: #da2032;
}

/*** Theme-sections ***/
.numeration {
    counter-reset: section;
}
.numeration__item {
    counter-increment: section;
}
.numeration__item::before {
    text-align: center;
    font-weight: 700;
    content: counters(section, ".") " ";
    float: left;
    width: 36px;
    height: 36px;
    color: #fff;
    background: #0071bb;
    line-height: 36px;
    margin-right: 20px;
}
.numeration__wrapper {
    overflow: hidden;
    padding-bottom: 30px;
    margin-bottom: 30px;
    padding-top: 3px;
    border-bottom: 1px solid #e6e6e6;
}
@media screen and (max-width: 768px) {
    .numeration__wrapper {
        overflow: visible;
    }
} /* Tablet Landscape */

.headline--underline {
    font-size: 1.125rem;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 10px!important;
    padding-bottom: 5px;
}
.important {
    border-left: 4px solid #da2032;
    padding-left: 20px;
}
.important__header {
    color: #da2032;
    margin-bottom: 10px!important;
}

/*** TRAFFIC BOX ***/
.traffic {
    border: 1px solid #ebebeb;
    margin-bottom: 20px;
}
.traffic__headline {
    font-size: 16px;
    background-color: #ebebeb;
    padding: 5px;
}
.traffic__text {
    padding: 10px;
}
.traffic__icon {
    float: left;
    margin-right: 10px;
}
.traffic__icon circle,
.traffic__icon polygon {
    fill: #ffffff;
    stroke: #ff0000;
    stroke-width: 2;
}
.traffic__icon text {
    font-family: FontAwesome;
    font-size: 12px;
    text-anchor: middle;
}
.traffic__icon--aufhebung { background-position: 0 0 }
.traffic__icon--baustelle-geplant { background-position: -100px 0 }
.traffic__icon--baustelle { background-position: -50px 0 }
.traffic__icon--gesperrt-geplant { background-position: -200px 0 }
.traffic__icon--sperre { background-position: -150px 0 }
.traffic__icon--schleudergefahr { background-position: -250px 0 }
.traffic__icon--stau-hoch { background-position: -350px 0 }
.traffic__icon--stau-mittel { background-position: -400px 0 }
.traffic__icon--stau-niedrig { background-position: -450px 0 }
.traffic__icon--stau { background-position: -300px 0 }
.traffic__icon--verkehr-geplant { background-position: -50px -50px }
.traffic__icon--verkehrsbehinderung { background-position: 0 -50px }

/*** WEATHER ***/
.weather {
    background-image: url("https://images01-www.oeamtc.at/spunq-assets/images/weather-background.jpg");
    background-size: cover;
    padding: 15px;
    color: #ffffff;
}
.weather__headline {
    margin-bottom: 20px;
    text-align: center;
}
.weather__list {
    overflow: hidden;
}
.weather__listitem {
    position: relative;
    clear: right;
    list-style: none;
    padding: 7px;
}
.weather__listitem::before,
.weather__listitem::after {
    content: '\A';
    position: absolute;
    background-color: rgba(255,255,255,0.4);
}
.weather__listitem::before {
    height: 1px;
    top: -1px;
    left: 7px;
    right: 7px;
} /*top-line*/
.weather__listitem::after {
    width: 1px;
    top: 7px;
    left: -1px;
    bottom: 7px;
} /*left-line */
.weather__listitem--left {
    display: inline-block;
    padding: 10px 20px;
}
.weather__temperature--min {
    color: #50ade9;
}
.weather__poweredbylink {
    color: rgba(255,255,255,0.6);
}
.weather__icontemp {
    white-space: nowrap;
}
.weather__icontemp--small {
    float: right;
}
.weather__icontemp--large {
    font-size: 40px;
}
.weather__icon {
    display: inline-block;
    white-space: nowrap;
    background: url(https://images01-www.oeamtc.at/spunq-assets/images/PixelGrid/oeamtc-weather-icons.svg?1494400757),none;
    background-size: 100em 100em;
    height: 2.2em;
    width: 2.4em;
    vertical-align: middle;
}
.weather__icon--small {
    font-size: 10px;
}
.weather__icon--clear-sky::before { background-position: 0 0 }
.weather__icon--bright { background-position: -30em 0 }
.weather__icon--cloudy { background-position: -20em 0 }
.weather__icon--mostly-cloudy { background-position: -30em 0 }
.weather__icon--overcast { background-position: -40em 0 }
.weather__icon--fog { background-position: -50em 0 }
.weather__icon--low-clouds { background-position: -60em 0 }
.weather__icon--light-rain { background-position: -70em 0 }
.weather__icon--rain { background-position: -80em 0 }
.weather__icon--heavy-rain { background-position: -90em 0 }
.weather__icon--drizzle { background-position: 0 -10em }
.weather__icon--light-freezing-rain { background-position: -10em -10em }
.weather__icon--heavy-freezing-rain { background-position: -20em -10em }
.weather__icon--sunny-with-scattered-rain-showers { background-position: -30em -10em }
.weather__icon--cloudy-with-scattered-rain-showers { background-position: -40em -10em }
.weather__icon--overcast-with-scattered-rain-showers { background-position: -50em -10em }
.weather__icon--sunny-with-heavy-rain-showers { background-position: -60em -10em }
.weather__icon--cloudy-with-heavy-rain-showers { background-position: -70em -10em }
.weather__icon--overcast-with-heavy-rain-showers { background-position: -80em -10em }
.weather__icon--sunny-with-thunderstorms { background-position: -90em -10em }
.weather__icon--cloudy-with-thunderstorms { background-position: 0 -20em }
.weather__icon--overcast-with-thunderstorms { background-position: -10em -20em }
.weather__icon--sunny-with-strong-thunderstorms { background-position: -20em -20em }
.weather__icon--cloudy-with-strong-thunderstorms { background-position: -30em -20em }
.weather__icon--overcast-with-strong-thunderstorms { background-position: -40em -20em }
.weather__icon--light-snowfall { background-position: -50em -20em }
.weather__icon--snowfall { background-position: -60em -20em }
.weather__icon--heavy-snowfall { background-position: -70em -20em }
.weather__icon--sunny-with-light-snow-showers { background-position: -80em -20em }
.weather__icon--cloudy-with-light-snow-showers { background-position: -90em -20em }
.weather__icon--overcast-with-light-snow-showers { background-position: 0 -30em }
.weather__icon--sunny-with-heavy-snow-showers { background-position: -10em -30em }
.weather__icon--cloudy-with-heavy-snow-showers { background-position: -20em -30em }
.weather__icon--overcast-with-heavy-snow-showers { background-position: -30em -30em }
.weather__icon--light-snow-or-rain { background-position: -40em -30em }
.weather__icon--snow-mixed-with-rain { background-position: -50em -30em }
.weather__icon--heavy-rain-and-snow { background-position: -60em -30em }
.weather__icon--sunny-with-light-showers-of-rain-and-snow { background-position: -70em -30em }
.weather__icon--cloudy-with-light-showers-of-rain-and-snow { background-position: -80em -30em }
.weather__icon--overcast-with-light-showers-of-rain-and-snow { background-position: -90em -30em }
.weather__icon--sunny-with-heavy-showers-of-rain-and-snow { background-position: 0 -40em }
.weather__icon--cloudy-with-heavy-showers-of-rain-and-snow { background-position: -10em -40em }
.weather__icon--overcast-with-heavy-showers-of-rain-and-snow { background-position: -20em -40em }
.weather__icon--sandstorm-duststorm { background-position: -30em -40em }
.weather__icon--drifting-snow { background-position: -40em -40em }
.weather__icon--graupel { background-position: -50em -40em }
.weather__icon--fog-patches { background-position: -60em -40em }
.weather__icon--low-clouds-sun { background-position: -70em -40em }
.weather__icon--freezing-fog { background-position: -80em -40em }
.weather__icon--sun-and-high-clouds { background-position: -90em -40em }

/*** COUNTRY ***/
.country {
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.country__headline {
    padding: 25px;
    margin-bottom: 40%;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.8);
}
.country__citylabel {
    margin: 0 0 10px 20px;
}
.country__weather {
    padding: 10px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.88) 50%, rgba(0,0,0,0.88) 99%, rgba(0,0,0,0.88) 100%);
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.88) 50%, rgba(0,0,0,0.88) 99%, rgba(0,0,0,0.88) 100%);
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.88) 50%, rgba(0,0,0,0.88) 99%, rgba(0,0,0,0.88) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e0000000',GradientType=0 );
}
.country__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
    top: 0;
}
.country__icon {
    position: relative;
    width: 0.8em;
    height: 0.6em;
    font-size: 50px;
    background: url(../img/flaggen.svg) 0 0/15em 15em no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: .1em;
    box-shadow:
        inset .02em .02em 0 rgba(255,255,255,0.5),
        inset -.02em -.02em 0 rgba(255,255,255,0.5),
        .02em .02em 0.1em rgba(0,0,0,0.3);
}
.country__icon::before {
    content: '\A';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(0,0,0,0.2) 42%);
    background-size: 2em 1.2em;
    background-position: -.6em -.6em;
}
.flag--ad { background-position: -1em 0 }
.flag--ae { background-position: -2em 0 }
.flag--af { background-position: -3em 0 }
.flag--ag { background-position: -4em 0 }
.flag--ai { background-position: -5em 0 }
.flag--al { background-position: -6em 0 }
.flag--am { background-position: -7em 0 }
.flag--an { background-position: -8em 0 }
.flag--ao { background-position: -9em 0 }
.flag--ar { background-position: -10em 0 }
.flag--as { background-position: -11em 0 }
.flag--at { background-position: -12em 0 }
.flag--au { background-position: -13em 0 }
.flag--aw { background-position: -14em 0 }
.flag--az { background-position: 0 -1em }
.flag--ba { background-position: -1em -1em }
.flag--bb { background-position: -2em -1em }
.flag--bd { background-position: -3em -1em }
.flag--be { background-position: -4em -1em }
.flag--bf { background-position: -5em -1em }
.flag--bg { background-position: -6em -1em }
.flag--bh { background-position: -7em -1em }
.flag--bi { background-position: -8em -1em }
.flag--bj { background-position: -9em -1em }
.flag--bm { background-position: -10em -1em }
.flag--bn { background-position: -11em -1em }
.flag--bo { background-position: -12em -1em }
.flag--br { background-position: -13em -1em }
.flag--bs { background-position: -14em -1em }
.flag--bt { background-position: 0 -2em }
.flag--bw { background-position: -1em -2em }
.flag--by { background-position: -2em -2em }
.flag--bz { background-position: -3em -2em }
.flag--ca { background-position: -4em -2em }
.flag--cd { background-position: -5em -2em }
.flag--cf { background-position: -6em -2em }
.flag--cg { background-position: -7em -2em }
.flag--ch { background-position: -8em -2em }
.flag--ci { background-position: -9em -2em }
.flag--ck { background-position: -10em -2em }
.flag--cl { background-position: -11em -2em }
.flag--cm { background-position: -12em -2em }
.flag--cn { background-position: -13em -2em }
.flag--co { background-position: -14em -2em }
.flag--cr { background-position: 0 -3em }
.flag--cu { background-position: -1em -3em }
.flag--cv { background-position: -2em -3em }
.flag--cy { background-position: -3em -3em }
.flag--cz { background-position: -4em -3em }
.flag--de { background-position: -5em -3em }
.flag--dj { background-position: -6em -3em }
.flag--dk { background-position: -7em -3em }
.flag--dm { background-position: -8em -3em }
.flag--do { background-position: -9em -3em }
.flag--dz { background-position: -10em -3em }
.flag--ec { background-position: -11em -3em }
.flag--ee { background-position: -12em -3em }
.flag--eg { background-position: -13em -3em }
.flag--eh { background-position: -14em -3em }
.flag--er { background-position: 0 -4em }
.flag--es { background-position: -1em -4em }
.flag--et { background-position: -2em -4em }
.flag--fi { background-position: -3em -4em }
.flag--fj { background-position: -4em -4em }
.flag--fm { background-position: -5em -4em }
.flag--fo { background-position: -6em -4em }
.flag--fr { background-position: -7em -4em }
.flag--ga { background-position: -8em -4em }
.flag--gb { background-position: -9em -4em }
.flag--gd { background-position: -10em -4em }
.flag--ge { background-position: -11em -4em }
.flag--gg { background-position: -12em -4em }
.flag--gh { background-position: -13em -4em }
.flag--gi { background-position: -14em -4em }
.flag--gl { background-position: 0 -5em }
.flag--gm { background-position: -1em -5em }
.flag--gn { background-position: -2em -5em }
.flag--gp { background-position: -3em -5em }
.flag--gq { background-position: -4em -5em }
.flag--gr { background-position: -5em -5em }
.flag--gt { background-position: -6em -5em }
.flag--gu { background-position: -7em -5em }
.flag--gw { background-position: -8em -5em }
.flag--gy { background-position: -9em -5em }
.flag--hk { background-position: -10em -5em }
.flag--hn { background-position: -11em -5em }
.flag--hr { background-position: -12em -5em }
.flag--ht { background-position: -13em -5em }
.flag--hu { background-position: -14em -5em }
.flag--id { background-position: 0 -6em }
.flag--ie { background-position: -1em -6em }
.flag--il { background-position: -2em -6em }
.flag--im { background-position: -3em -6em }
.flag--in { background-position: -4em -6em }
.flag--iq { background-position: -5em -6em }
.flag--ir { background-position: -6em -6em }
.flag--is { background-position: -7em -6em }
.flag--it { background-position: -8em -6em }
.flag--je { background-position: -9em -6em }
.flag--jm { background-position: -10em -6em }
.flag--jo { background-position: -11em -6em }
.flag--jp { background-position: -12em -6em }
.flag--ke { background-position: -13em -6em }
.flag--kg { background-position: -14em -6em }
.flag--kh { background-position: 0 -7em }
.flag--ki { background-position: -1em -7em }
.flag--km { background-position: -2em -7em }
.flag--kn { background-position: -3em -7em }
.flag--kp { background-position: -4em -7em }
.flag--kr { background-position: -5em -7em }
.flag--kw { background-position: -6em -7em }
.flag--ky { background-position: -7em -7em }
.flag--kz { background-position: -8em -7em }
.flag--la { background-position: -9em -7em }
.flag--lb { background-position: -10em -7em }
.flag--lc { background-position: -11em -7em }
.flag--li { background-position: -12em -7em }
.flag--lk { background-position: -13em -7em }
.flag--lr { background-position: -14em -7em }
.flag--ls { background-position: 0 -8em }
.flag--lt { background-position: -1em -8em }
.flag--lu { background-position: -2em -8em }
.flag--lv { background-position: -3em -8em }
.flag--ly { background-position: -4em -8em }
.flag--ma { background-position: -5em -8em }
.flag--mc { background-position: -6em -8em }
.flag--md { background-position: -7em -8em }
.flag--me { background-position: -8em -8em }
.flag--mg { background-position: -9em -8em }
.flag--mh { background-position: -10em -8em }
.flag--mk { background-position: -11em -8em }
.flag--ml { background-position: -12em -8em }
.flag--mm { background-position: -13em -8em }
.flag--mn { background-position: -14em -8em }
.flag--mo { background-position: 0 -9em }
.flag--mq { background-position: -1em -9em }
.flag--mr { background-position: -2em -9em }
.flag--ms { background-position: -3em -9em }
.flag--mt { background-position: -4em -9em }
.flag--mu { background-position: -5em -9em }
.flag--mv { background-position: -6em -9em }
.flag--mw { background-position: -7em -9em }
.flag--mx { background-position: -8em -9em }
.flag--my { background-position: -9em -9em }
.flag--mz { background-position: -10em -9em }
.flag--na { background-position: -11em -9em }
.flag--nc { background-position: -12em -9em }
.flag--ne { background-position: -13em -9em }
.flag--ng { background-position: -14em -9em }
.flag--ni { background-position: 0 -10em }
.flag--nl { background-position: -1em -10em }
.flag--no { background-position: -2em -10em }
.flag--np { background-position: -3em -10em }
.flag--nr { background-position: -4em -10em }
.flag--nz { background-position: -5em -10em }
.flag--om { background-position: -6em -10em }
.flag--pa { background-position: -7em -10em }
.flag--pe { background-position: -8em -10em }
.flag--pf { background-position: -9em -10em }
.flag--pg { background-position: -10em -10em }
.flag--ph { background-position: -11em -10em }
.flag--pk { background-position: -12em -10em }
.flag--pl { background-position: -13em -10em }
.flag--pr { background-position: -14em -10em }
.flag--ps { background-position: 0 -11em }
.flag--pt { background-position: -1em -11em }
.flag--pw { background-position: -2em -11em }
.flag--py { background-position: -3em -11em }
.flag--qa { background-position: -4em -11em }
.flag--re { background-position: -5em -11em }
.flag--ro { background-position: -6em -11em }
.flag--rs { background-position: -7em -11em }
.flag--ru { background-position: -8em -11em }
.flag--rw { background-position: -9em -11em }
.flag--sa { background-position: -10em -11em }
.flag--sb { background-position: -11em -11em }
.flag--sc { background-position: -12em -11em }
.flag--sd { background-position: -13em -11em }
.flag--se { background-position: -14em -11em }
.flag--sg { background-position: 0 -12em }
.flag--si { background-position: -1em -12em }
.flag--sk { background-position: -2em -12em }
.flag--sl { background-position: -3em -12em }
.flag--sm { background-position: -4em -12em }
.flag--sn { background-position: -5em -12em }
.flag--so { background-position: -6em -12em }
.flag--sr { background-position: -7em -12em }
.flag--st { background-position: -8em -12em }
.flag--sv { background-position: -9em -12em }
.flag--sy { background-position: -10em -12em }
.flag--sz { background-position: -11em -12em }
.flag--tc { background-position: -12em -12em }
.flag--td { background-position: -13em -12em }
.flag--tg { background-position: -14em -12em }
.flag--th { background-position: 0 -13em }
.flag--tj { background-position: -1em -13em }
.flag--tl { background-position: -2em -13em }
.flag--tm { background-position: -3em -13em }
.flag--tn { background-position: -4em -13em }
.flag--to { background-position: -5em -13em }
.flag--tr { background-position: -6em -13em }
.flag--tt { background-position: -7em -13em }
.flag--tv { background-position: -8em -13em }
.flag--tw { background-position: -9em -13em }
.flag--tz { background-position: -10em -13em }
.flag--ua { background-position: -11em -13em }
.flag--ug { background-position: -12em -13em }
.flag--us { background-position: -13em -13em }
.flag--uy { background-position: -14em -13em }
.flag--uz { background-position: 0 -14em }
.flag--va { background-position: -1em -14em }
.flag--vc { background-position: -2em -14em }
.flag--ve { background-position: -3em -14em }
.flag--vg { background-position: -4em -14em }
.flag--vi { background-position: -5em -14em }
.flag--vn { background-position: -6em -14em }
.flag--vu { background-position: -7em -14em }
.flag--ws { background-position: -8em -14em }
.flag--ye { background-position: -9em -14em }
.flag--za { background-position: -10em -14em }
.flag--zm { background-position: -11em -14em }
.flag--zw { background-position: -12em -14em }

/*** ROUTES & GAS ***/
.services {
    background-size: cover;
    padding: 20px;
}
.services--routes {
    background-image: url(https://images01-www.oeamtc.at/spunq-assets/images/routes-background.jpg);
}
.services--gas {
    background-image: url(https://images01-www.oeamtc.at/spunq-assets/images/gas-background.jpg);
    background-size: cover;
}
.services__headline {
    color: #ffdc00;
    margin-bottom: 20px;
}
.services__fieldset {
    max-width: 260px;
    margin: auto;
}

/*** FLEXSLIDER ***/
@font-face {
    font-family: 'flexslider-icon';
    src: url('../fonts/flexslider-icon.eot');
    src:
            url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
            url('../fonts/flexslider-icon.woff') format('woff'),
            url('../fonts/flexslider-icon.ttf') format('truetype'),
            url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.flex-container a:hover,
.flex-slider a:hover {
    outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}
.flex-pauseplay span {
    text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
    margin: 0;
    padding: 0;
}
.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
}
.flexslider .slides img {
    width: 100%;
    display: block;
}
.flexslider .slides:after {
    content: "\0020";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
html[xmlns] .flexslider .slides {
    display: block;
}
* html .flexslider .slides {
    height: 1%;
}
.no-js .flexslider .slides > li:first-child {
    display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
    margin: 0 auto 60px;
    position: relative;
    zoom: 1;
}
.flexslider .slides {
    zoom: 1;
}
.flexslider .slides img {
    height: auto;
    -moz-user-select: none;
}
.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.loading .flex-viewport {
    max-height: 300px;
}
.carousel li {
    margin-right: 5px;
}
.flex-direction-nav {
    *height: 0;
}
.flex-direction-nav a {
    text-decoration: none;
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 40px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 0;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}
.flex-direction-nav a:hover {
    background-color: rgba(0, 0, 0, 0.6);
}
.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 20px;
    display: inline-block;
    content: '\f001';
    color: #ffffff;
}
.flex-direction-nav a.flex-next:before {
    content: '\f002';
}
.flex-direction-nav .flex-prev {
    left: -80px;
}
.flex-direction-nav .flex-next {
    right: -80px;
}
.flex-direction-nav .flex-disabled {
    opacity: 0!important;
    filter: alpha(opacity=0);
    cursor: default;
    z-index: -1;
}
.flex-pauseplay a {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 10px;
    opacity: 0.8;
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    color: #000;
}
.flex-pauseplay a:before {
    font-family: "flexslider-icon";
    font-size: 20px;
    display: inline-block;
    content: '\f004';
}
.flex-pauseplay a:hover {
    opacity: 1;
}
.flex-pauseplay a.flex-play:before {
    content: '\f003';
}
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}
.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
    background: #ffdc00;
    cursor: default;
}
.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}
.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}
.flex-control-thumbs img {
    width: 100%;
    height: auto;
    display: block;
    opacity: .7;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.flex-control-thumbs img:hover {
    opacity: 1;
}
.flex-control-thumbs .flex-active {
    opacity: 1;
    cursor: default;
}
/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev {
        opacity: 1;
        left: 10px;
    }
    .flex-direction-nav .flex-next {
        opacity: 1;
        right: 10px;
    }
}