@charset "utf-8";

:root {
    --record-300: rgb(221, 136, 152);
    --warning-100: rgb(255, 247, 204);
    --background-panel: rgb(255, 255, 255);
    --neutral-100: rgb(246, 246, 246);
    --neutral-200: rgb(232, 232, 232);
    --neutral-250: #ccc;
    --neutral-300: rgb(153, 153, 153);
    --neutral-400: rgb(102, 102, 102);
    --neutral-500: rgb(51, 51, 51);
    --primary-100: rgb(252, 227, 202);
    --primary-200: rgb(252, 202, 151);
    --primary-300: rgb(252, 162, 76);
    --primary-400: rgb(252, 124, 0);
    --primary-500: rgb(204, 102, 0);
    --record-100: rgb(244, 215, 221);
    --record-200: rgb(232, 176, 186);
    --record-400: rgb(172, 50, 72);
    --record-500: rgb(119, 34, 50);
    --success-100: rgb(236, 255, 221);
    --success-300: rgb(157, 218, 108);
    --success-400: rgb(105, 180, 45);
    --success-500: rgb(76, 131, 33);
    --warning-200: rgb(255, 239, 163);
    --warning-300: rgb(245, 204, 0);
    --warning-400: rgb(214, 179, 0);
    --warning-500: rgb(189, 156, 0);
    --danger-100: rgb(255, 232, 224);
    --danger-200: rgb(255, 201, 184);
    --danger-300: rgb(255, 123, 82);
    --danger-400: rgb(235, 56, 0);
    --danger-500: rgb(184, 44, 0);
    --hero-background: var(--primary-400);
    --hero-icon: rgb(255, 255, 255);
    --os-status-bar: rgb(0, 0, 0);
    --package-diamant: rgb(102, 153, 204);
    --success-200: rgb(211, 239, 190);
    --toast-message-100: var(--neutral-400);
    --white: rgb(255, 255, 255);
}

:root[data-Colours="Orange"] {
    --primary-100: hsl(30, 89%, 89%);
    --primary-200: hsl(30, 94%, 79%);
    --primary-300: hsl(30, 97%, 64%);
    --primary-400: hsl(30, 100%, 49%);
    --primary-500: hsl(30, 100%, 40%);
}

:root[data-Colours="PrettyPurple"] {
    --primary-100: hsl(292, 100%, 90%);
    --primary-200: hsl(292, 100%, 80%);
    --primary-300: hsl(292, 100%, 70%);
    --primary-400: hsl(292, 100%, 50%);
    --primary-500: hsl(292, 100%, 40%);
}

:root[data-Colours="BlurryBlue"] {
    --primary-100: hsl(209, 100%, 90%);
    --primary-200: hsl(209, 100%, 80%);
    --primary-300: hsl(209, 100%, 70%);
    --primary-400: hsl(209, 100%, 50%);
    --primary-500: hsl(209, 100%, 40%);
}

:root[data-Colours="BlendedBlue"] {
    --primary-100: hsl(203, 56%, 90%);
    --primary-200: hsl(203, 56%, 70%);
    --primary-300: hsl(203, 56%, 40%);
    --primary-400: hsl(203, 56%, 21%);
    --primary-500: hsl(203, 55%, 10%);
}

:root[data-Colours="PerfectPink"] {
    --primary-100: hsl(345, 100%, 95%);
    --primary-200: hsl(345, 100%, 85%);
    --primary-300: hsl(345, 100%, 75%);
    --primary-400: hsl(345, 100%, 69%);
    --primary-500: hsl(345, 100%, 60%);
}

:root[data-Colours="BabyBlue"] {
    --primary-100: hsl(202, 100%, 90%);
    --primary-200: hsl(202, 100%, 75%);
    --primary-300: hsl(202, 100%, 65%);
    --primary-400: hsl(202, 100%, 50%);
    --primary-500: hsl(202, 100%, 40%);
}

:root[data-Colours="GlibberyGreen"] {
    --primary-100: hsl(86, 63%, 92%);
    --primary-200: hsl(86, 63%, 80%);
    --primary-300: hsl(86, 63%, 65%);
    --primary-400: hsl(86, 63%, 47%);
    --primary-500: hsl(86, 63%, 30%);
}

:root[data-Colours="DarkMode"],
:root.DarkMode {
    --record-300: rgb(221, 136, 152);
    --warning-100: rgb(218, 201, 108);
    --background-panel: rgb(54, 54, 54);
    --neutral-250: #0a0a0a;
    --neutral-300: rgb(153, 153, 153);
    --neutral-400: rgb(204, 204, 204);
    --neutral-500: rgb(51, 51, 51);
    --primary-100: rgb(252, 227, 202);
    --primary-200: rgb(252, 202, 151);
    --primary-300: rgb(252, 162, 76);
    --primary-400: rgb(252, 124, 0);
    --primary-500: rgb(204, 102, 0);
    --record-100: rgb(244, 215, 221);
    --record-200: rgb(232, 176, 186);
    --record-400: rgb(172, 50, 72);
    --record-500: rgb(119, 34, 50);
    --success-100: rgb(158, 209, 117);
    --success-300: rgb(157, 218, 108);
    --success-400: rgb(87, 138, 46);
    --success-500: rgb(76, 131, 33);
    --warning-200: rgb(255, 239, 163);
    --warning-300: rgb(184, 153, 0);
    --warning-400: rgb(214, 179, 0);
    --warning-500: rgb(163, 135, 0);
    --danger-100: rgb(255, 232, 224);
    --danger-200: rgb(255, 201, 184);
    --danger-300: rgb(255, 123, 82);
    --danger-400: rgb(235, 56, 0);
    --danger-500: rgb(184, 44, 0);
    --hero-background: rgb(0, 0, 0);
    --hero-icon: rgb(204, 204, 204);
    --neutral-100: #222222;
    --neutral-200: #181818;
    --os-status-bar: rgb(238, 238, 238);
    --package-diamant: rgb(46, 115, 183);
    --success-200: rgb(183, 229, 149);
    --toast-message-100: rgb(17, 17, 17);
    --white: rgb(238, 238, 238);
}



@font-face {
    font-family: 'proxima-nova';
    src: url('/system/galleries/html/fonts/proximanova-light-webfont.woff') format('woff'),
    url('/system/galleries/html/fonts/proximanova-light-webfont.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('/system/galleries/html/fonts/proximanova-regular-webfont.woff') format('woff'),
    url('/system/galleries/html/fonts/proximanova-regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('/system/galleries/html/fonts/proximanova-regularit-webfont.woff') format('woff'),
    url('/system/galleries/html/fonts/proximanova-regularit-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('/system/galleries/html/fonts/proximanova-medium-webfont.woff') format('woff'),
    url('/system/galleries/html/fonts/proximanova-medium-webfont.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('/system/galleries/html/fonts/proximanova-semibold-webfont.woff') format('woff'),
    url('/system/galleries/html/fonts/proximanova-semibold-webfont.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('/system/galleries/html/fonts/proximanova-bold-webfont.woff') format('woff'),
    url('/system/galleries/html/fonts/proximanova-bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'museo';
    src: url('/system/galleries/html/fonts/museo-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'museo';
    src: url('/system/galleries/html/fonts/Museo500-Regular-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'proxima-nova', sans-serif;
    color: var(--neutral-400);
}

.tk-museo {
    font-family: museo, sans-serif;
}

.btn-to-app {
    background: var(--background-panel) !important;
    border-radius: .5rem;
    /* color: var(--primary-400)!important; */
    padding: .4rem .5rem .4rem .6rem !important;
    margin: 0.2rem -1rem 0 0;
    border: 1px solid var(--neutral-250);
}

.btn-to-app:hover {
    color: var(--primary-400) !important;
    border-color: var(--primary-400);
    background: var(--background-panel) !important;
}

.btn-to-app>span {
    color: inherit;
    margin: 0 0 0 .2rem;
}

.btn.clipboard {
    border: none;
    text-transform: none;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    margin-left: 1rem;
    color: var(--neutral-300);
    background: no-repeat;
}

@media all and (max-width: 767px) {
    .btn-to-app {
        padding: 0.25rem 0.5rem !important;
        margin: 0;
        border: none !important;
    }
}

button.btn-faq {
    padding: 0.5rem 1rem;
    color: var(--background-panel);
    color: var(--primary-400);
    border-radius: 1.5rem;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    z-index: 1;
    border: none;
    font-weight: 400;
    animation-delay: 3s;
}

button.btn-faq span[class*=icon] {
    margin: 0 0.25rem 0 0;
    font-size: 0.9rem;
}

@media all and (max-width: 480px) {
    .bx-pager.bx-default-pager {
        display: none;
    }

    button.btn-faq {
        padding: 1rem;
        border-radius: 50%;
        width: 4rem;
        height: 4rem;
    }

    button.btn-faq span[class*=icon] {
        font-size: 2rem;
        margin: 0;
    }

    button.btn-faq span:nth-child(2) {
        display: none;
    }
}

small,
.small {
    font-size: 0.8rem;
    color: var(--neutral-300);
}

.cookieinfo {
    display: flex;
    flex-flow: row wrap;
    padding: 1rem;
    background: var(--neutral-400);
    color: var(--white);
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.cookieinfo>div {
    flex-basis: auto;
    margin: auto;
}

.cookieinfo>div button.btn {
    margin: 1rem 0.5rem;
    padding: 0.5rem 1rem;
}

.cookieinfo>div button.btn::after {
    display: none;
}

.cookieinfo>div button.btn.iModal {
    background: none;
    color: var(--white);
    border: 1px solid #fff;
}

.terms-text {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
    padding: 0 1rem !important;
}

.terms-text a {
    color: var(--neutral-400);
    text-decoration: underline !important;
}

.badges {
    position: absolute;
    z-index: 1;
    right: 1.2rem;
    top: 0rem;
    cursor: pointer;
    width: 6.5rem;
    height: 8rem;
    animation-delay: 2s;
    animation-iteration-count: 1;
}

.badges::before {
    content: '';
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(15deg) !important;
    position: absolute;
    right: 0;
    z-index: 1;
    top: 0;
}

.badges.badge-1::before {
    background-image: url(../img/p6_badge_87_w.svg)
}

.container .certificate img {
    height: 6rem;
    margin: .5rem 1.5rem;
}

.container .certificate .badges-together {
    position: relative;
    display: inline-block;
    padding: 0.5rem;
}

.container .certificate .badges-together img {
    margin: 0;
}

.container .certificate .badges-together img:nth-child(2),
.container .certificate .badges-together img:nth-child(3) {
    margin: 0 0 0 -4.4rem;
}

.container .certificate .badges-together img:nth-child(1) {
    transform: scale(0.85);
    opacity: 0.3;
}

.container .certificate .badges-together img:nth-child(2) {
    transform: scale(0.95);
    opacity: 0.7;
}

.container .certificate .badges-together img:nth-child(3) {
    transform: scale(1);
}

.panel-group .panel {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.zx_mediaslot {
    opacity: 0;
    height: 0 !important;
    overflow: hidden;
}

.status-wrapper {
    left: 0;
    width: 100%;
    z-index: 3;
    /*margin-top: 87px;
    margin-bottom: -87px;*/
    text-align: center;
    position: relative;
    border: none;
}

.status-wrapper .container {
    padding: 1.5rem 1rem;
}

.status-bar {
    height: 5px;
    background: var(--neutral-100);
    overflow: hidden;
}

.status-bar .bar {
    background: var(--primary-400);
    width: 80%;
}

.status-info {
    background: var(--background-panel);
}

.status-info h1,
.status-info h2 {
    color: var(--primary-400);
    font-size: 2rem;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.status-info::before {
    content: ' ';
    width: 2rem;
    height: 2rem;
    background: var(--background-panel);
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: rotate(45deg) translate(-50%) scale(1);
    z-index: -1;
}

.status-info p {
    margin-bottom: 0;
}

.status-nr {
    background: var(--background-panel) none repeat scroll 0 0;
    color: var(--neutral-300);
    display: block;
    font-size: 1rem;
    left: 50%;
    letter-spacing: 3px;
    min-width: 4rem;
    padding: 0 0 0 3px;
    position: absolute;
    text-align: center;
    top: 0;
    transform: translateX(-50%);
    margin: -8px 0 0 0;
    z-index: 2;
}

.status-nr span {
    color: var(--primary-400);
}

#background_wrap {
    z-index: -1;
    position: fixed;
    top: 40px;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: all 0.5s ease-in-out;
}

#background_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: -moz-linear-gradient(60deg, rgba(245, 245, 245, 1) 30%, rgba(245, 245, 245, 0.1) 70%);
    background: -webkit-linear-gradient(60deg, rgba(245, 245, 245, 1) 30%, rgba(245, 245, 245, 0.1) 70%);
    background: linear-gradient(60deg, rgba(245, 245, 245, 1) 30%, rgba(245, 245, 245, 0.1) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
    z-index: 1;
}

#background_wrap .inside {
    height: 105%;
    width: 105%;
    margin: -10px;
    background-size: cover;
    background-position: 12rem 0rem;
    -webkit-transform: scale(1);
    -webkit-transition: all 1s ease-in-out;
    transform: scale(1);
    transition: all 1s ease-in-out;
}

#page.blur #background_wrap .inside {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

@media screen and (max-width: 1280px) and (orientation:portrait) {
    #background_wrap .inside {
        background-position: 3rem 0rem;
    }
}

@media screen and (max-width: 1280px) and (orientation:landscape) {
    #background_wrap .inside {
        background-position: 6rem 0rem;
    }
}

@media screen and (max-width: 992px) and (orientation:portrait) {
    #background_wrap .inside {
        background-position: -38rem 0rem;
    }
}

@media screen and (max-width: 992px) and (orientation:landscape) {
    #background_wrap .inside {
        background-position: 4rem 0rem;
    }
}

@media screen and (max-width: 768px) and (orientation:portrait) {
    #background_wrap .inside {
        background-position: -23rem 0rem;
    }
}

@media screen and (max-width: 768px) and (orientation:landscape) {
    #background_wrap .inside {
        /*background-position: -23rem 0rem;*/
        background-position: 0rem 2rem;
    }
}

@media screen and (max-width: 480px) and (orientation:portrait) {
    #background_wrap .inside {
        background-position: -38rem 0rem;
    }
}

.hero .screen-panel {
    position: relative;
    background: url(/system/galleries/html/src/img/p6_bec_ios_smal.png) no-repeat center top;
    background-size: cover;
    max-width: 480px;
    min-height: 250px;
    height: 40vh;
    margin: 1rem auto 0 auto;
    box-shadow: inset 0 -13px 12px -12px black;
}

.hero.alt {
    display: flex;
    align-content: stretch;
    /*min-height: 100%;flex-flow: column;*/
}

.hero.alt>div {
    flex-grow: 1;
    margin: auto !important;
}

.hero.alt>.table-cell {
    /*padding: 1rem 0.25rem 1rem 0.25rem;*/
    padding: 0;
}

.hero.alt .select-arrow {
    position: absolute;
    left: -17rem;
    bottom: 10px;
    z-index: 2;
    width: 10rem;
    height: 150px;
    transition: clip 0.25s ease-in-out;
    clip: rect(0px, 0, 0px, 0px);
    opacity: 0;
}

.hero.alt .select-arrow.students {
    left: -17rem;
    bottom: 10px;
    z-index: 2;
    width: 10rem;
    height: 150px;
    clip: rect(0px, 250px, 250px, 0px);
    opacity: 1;
}

.hero.alt .select-arrow.parents {
    left: -8.0rem;
    bottom: 46px;
    z-index: 2;
    width: 8rem;
    transform: rotate(29deg);
    height: 137px;
    clip: rect(0px, 250px, 250px, 0px);
    opacity: 1;
}

.hero.alt .select-arrow.teacher {
    left: 17.5rem;
    bottom: 46px;
    z-index: 2;
    width: 8rem;
    transform: rotate(149deg) rotateX(170deg);
    height: 137px;
    clip: rect(0px, 250px, 250px, 0px);
    opacity: 1;
}

.hero.alt .select-arrow.business {
    left: 27rem;
    bottom: 10px;
    z-index: 2;
    width: 9rem;
    transform: rotate(179deg) rotateX(170deg);
    height: 150px;
    clip: rect(0px, 250px, 250px, 0px);
    opacity: 1;
}

.hero.alt .select-arrow img {
    width: 100%;
    height: 100%;
}

.hero.alt h1 {
    margin-top: 0;
}

.hero.alt h3,
.hero.alt p {
    color: var(--neutral-400);
    /*margin: 0 0 1rem 0;*/
}

.hero.alt h1 {
    color: var(--neutral-400);
    font-weight: 300;
    /*margin: 0 0 1rem 0;*/
}

.hero.alt .btn-primary {
    font-size: 1.25rem;
}

.hero.alt .panel {
    background: var(--background-panel);
    padding: 0 0 0.8rem 0;
    border: none;
    display: block;
    transition: all 0.25s ease-in-out;
    width: 100%;
    font-family: "proxima-nova", sans-serif;
    cursor: pointer;
    border-radius: 0.5rem;
    overflow: hidden;
    /*border-bottom: 3px solid #eee;*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, .1);
}

.hero.alt .panel.animated:hover,
.hero.alt .panel.animated:focus,
.hero.alt .panel.animated.active {
    box-shadow: 2px 4px 6px rgba(0, 0, 0, .1);
    transform: scale(1.05) !important;
    outline: 0;
    opacity: 1;
    overflow: hidden;
}

.hero.alt .panel.animated.active[tabindex="4"]::after {
    display: none;
}

.hero.alt .row.panel {
    cursor: auto;
}

.hero.alt .panel.active {
    background: var(--primary-400);
}

.hero.alt .panel.active h2 {
    color: var(--white);
}

.hero.alt .btn-group input[type=radio] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.hero.alt .panel h2 {
    font-size: 1.25rem;
    margin-bottom: 0;
    text-transform: none;
}

.hero.alt .panel p {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    padding: 0.5rem;
}

.hero.alt .panel .img-container {
    border-radius: 0;
    min-height: 20vh;
    /*max-height: 300px;
	width: 100%;*/
    /*margin: -0.8rem;*/
}

#selectUserForm .roleLinks a {
    font-size: 1.25rem !important;
}

.hero.alt .panel .img-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.1);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/var(--neutral-100)+50,e2e2e2+100 */
    background: rgba(0, 0, 0, 0.1);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0,0,0,0)', endColorstr='rgba(0,0,0,0.1)', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */

}

.hero.alt .user-teaser {
    min-height: 3rem;
    padding: 0 5rem;
    margin: 0 auto 1rem auto;
}

.hero.alt .row.panel {
    padding: 0;
    opacity: 1;
    transform: none;
    display: flex;
    border-collapse: collapse;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.hero.alt .row.panel>div {
    flex-grow: 1;
    flex-basis: 20rem;
    /*margin: auto;*/
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-flow: column;
    /*flex: 1;*/
    /*height: auto;*/
}

.hero.alt .row.panel>div .feature-list {
    width: auto;
    margin: 1rem 0 1rem 2rem;
}

.hero.alt .row.panel>div .feature-list li {
    padding: 0 0 0 2.2rem;
    margin: 0.5em 0;
}

.hero.alt .row.panel::before {
    display: block;
}

.hero.alt .panel .img-container.vertical {
    margin: 0;
    /*height: 300px;*/
}

/*.hero .table-cell h1,
.hero .table-cell h3,
.hero .table-cell h4,
.hero .table-cell ul,
.hero .table-cell .seal-panel,
.hero .table-cell .feedback  {
	opacity: 0;
	-webkit-transform: translateY(2rem);
	-webkit-transition: all 1s ease-in-out;
	-webkit-transition-delay: 0.5s;
	transform: translateY(2rem);
	transition: all 0.5s ease-in-out;
	transition-delay: 0.5s;
}*/
.hero .table-cell h3,
.hero .table-cell h4 {
    /*transition-delay: 0.9s;*/
    font-size: 1rem
}

.d-flex ul.feature-list {
    padding: 1.5rem 0 1rem 4rem;
    margin: 0;
    width: auto
}

.d-flex ul.feature-list li {
    padding: 0;
}

.hero .table-cell .feedback {
    transition-delay: 1.5s;
}

.hero .table-cell .panel {
    transition-delay: 0s;
}

.gradient-2 {
    background-color: var(--neutral-100);
    /* IE9, iOS 3.2+ */
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0, rgb(245, 245, 245)), color-stop(0.641, rgb(255, 255, 255)), color-stop(1, rgb(255, 255, 255)));
    /* Android 2.3 */
    background-image: -webkit-repeating-linear-gradient(bottom, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 64.1%, rgb(255, 255, 255) 100%);
    /* IE10+ */
    background-image: repeating-linear-gradient(to top, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 64.1%, rgb(255, 255, 255) 100%);
    background-image: -ms-repeating-linear-gradient(bottom, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 64.1%, rgb(255, 255, 255) 100%);
}

/* IE8- CSS hack */
@media \0screen\,screen\9 {
    .gradient {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff", endColorstr="#fff5f5f5", GradientType=0);
    }
}

.ellip {
    display: block;
    height: 100%;
}

.ellip-line {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    max-width: 100%;
}

.ellip,
.ellip-line {
    position: relative;
    overflow: hidden;
}

#page.blur .hero .table-cell h1,
#page.blur .hero .table-cell h3,
#page.blur .hero .table-cell h4,
#page.blur .hero .table-cell ul,
#page.blur .hero .table-cell .seal-panel {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

#page.blur .hero .table-cell .feedback {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 0.6;
}


#background_wrap::after {
    background: none;
}

#background_wrap.set {
    top: 0px;
    filter: grayscale(1) blur(3px);
}

.bg-fix {
    background-position: 6rem 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 40%;
}

.bg-fix .container {
    padding: 6rem 1rem;
}

.premium-feature {
    color: var(--white);
    padding: 0.4rem 0.6rem;
    text-align: center;
    font-size: 1rem;
    background: var(--primary-400);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.premium-label::before {
    content: 'Premium';
}

.new-label::before {
    content: 'Neu';
}

.premium-label::before,
.new-label::before {
    color: var(--primary-400);
    text-align: center;
    font-size: 0.65rem;
    margin: 0 0 0 0.25rem;
    letter-spacing: 1px;
}

section {
    position: relative;
}

.gradient .container {
    padding: 40px 20px;
}

.gradient .container .background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: auto;
    border-radius: 1rem;
}

.gradient .container.text-right .background {
    right: auto;
    left: 0;
}

.gradient .container .background:before {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 1rem;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+35,0+73,0+100 */
    background: -moz-linear-gradient(left, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(245, 245, 245, 1)), color-stop(40%, rgba(255, 255, 255, 1)), color-stop(80%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(245, 245, 245, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 */

}

.gradient .container.text-right .background:before {

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0+27,1+65 */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(15%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
    /* IE6-9 */


}

.gradient {
    margin-top: -2px;
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 5rem;
}

.gradient>.row {
    margin-bottom: 5rem;
}

.gradient .row:last-child {
    margin-bottom: 0;
}

.gradient.ad {
    padding: 0 15px;
    margin: -1rem 0 1rem 0;
}

.gradient.ad .container {
    padding: 0.5rem;
}

.gradient.ad h1 {
    font-size: 1.25rem;
}

.gradient.ad .container .background:before,
.gradient.ad .container .background {
    border-radius: 0.5rem;
}

.gradient.ad.no-back .container {
    padding: 0;
}

.gradient.ad.no-back .container .background:before,
.gradient.ad.no-back .container .background {
    display: none;
}

.gradient.ad .flex-container {
    align-items: center;
}

.gradient.ad .flex-container>* {
    flex: 0 0 33.33333%;
    margin: 0 0.4rem;
    vertical-align: middle;
}

.gradient.ad.no-back .flex-container>* {
    margin: 0 0.8rem 0 0;
}

.gradient.ad .flex-container>* p {
    margin: 0;
}

.gradient.ad .container .click {
    border: none;
    border-radius: 6px;
    background: none;
    padding: none;
    outline: none;
    position: relative;
    max-width: 7rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 9rem;
    transition: all 0.1s ease-in;
    border: 2px solid var(--neutral-100);
}

.gradient.ad .container .click::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: all 0.1s ease-in;
}

.gradient.ad .container .click:active {
    box-shadow: inset 0.1rem 0.1rem 1rem 0rem rgba(0, 0, 0, 0.2);
}

.gradient.ad .container .click:active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
}

.gradient.ad .container .click a {
    display: block;
    position: absolute;
    top: 1.5rem;
    right: 0;
    bottom: 0;
    left: 0;
}

.gradient.ad .container .click .icon_close {
    position: absolute;
    z-index: 1;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    right: 0.25rem;
    cursor: pointer;
    color: var(--neutral-250);
    font-size: 1.25rem;
}

.gradient.ad .container .click.add-book {
    border: 2px dashed #ddd;
    color: #aaa;
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    transform: scale(0.8);
}

.gradient.ad .container .click.add-book span {
    display: block;
}

.gradient.ad .container .click.add-book span:first-child {
    font-size: 2rem;
}

.gradient.ad .container .click.add-book span:last-child {
    font-size: 0.8rem;
}

.gradient.ad .cart-label {
    position: absolute;
    bottom: 0;
    right: 0rem;
    left: 0rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    background: var(--primary-400);
    color: var(--white);
    border-radius: 0 0 6px 6px;
    transition: all 0.1s ease-in;
}

.gradient.ad .container .click:active .cart-label {
    background: rgba(0, 0, 0, 0.4);
    color: var(--white);
}

.gradient.ad .container .background:before {
    background: linear-gradient(to right, rgba(245, 245, 245, 1) 30%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
}


section.table {
    /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;*/
    border: none;
    margin: 0;
}

.bg-fixed {
    /*background-color: transparent !important;*/
    overflow: hidden;
}

.bg-fixed::before {
    content: "";
    position: absolute;
    left: -15px;
    right: -15px;
    top: -15px;
    bottom: -15px;
    /*z-index: -1;*/

    display: block;
    width: 100vw;
    height: 100vh;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);

    background-attachment: fixed;
    background-color: var(--neutral-100);
    background-image: url("/system/galleries/html/src/img/bg-1.jpg");
    background-position: center center;
    background-size: cover;
}

section.table.gray {
    background-color: var(--neutral-100);
}

section.table .table-cell {
    /*webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; */
    padding: 3rem 5rem;
    vertical-align: middle;
    height: 50vh;
}

section.table .img {
    width: 40vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#coaches div[class*='col-'] img {
    width: 90%;
    max-width: 350px;
}

.overview a {
    color: var(--neutral-400);
    display: block;
}

.overview a:hover {
    color: var(--neutral-400);
}

.overview a:hover .btn-standard {
    color: var(--primary-400);
}

.overview .product-thumb {
    display: block;
}

.panel {
    border: none;
}

.panel-title {
    font-size: 1.25rem;
}

.panel-title>a {
    display: block;
}

.panel-body ul {
    text-align: left;
    margin: 1rem auto;
    width: 80%;
    padding: 0 0 0 1rem
}

.panel-body ul.nav-tabs {
    width: 100%;
}

.white .well {
    background: var(--neutral-100);
    border-radius: 1rem;
    border: none;
    box-shadow: none;
}

.grey .well {
    background: var(--background-panel);
    border-radius: 1rem;
    border: none;
    box-shadow: none;
}

.well {
    background: none;
    border-radius: 1rem;
}

.panel.well {
    overflow: hidden;
    border-radius: 1rem;
    margin-bottom: 1rem;
    /* box-shadow:  2px 2px 8px rgba(0,0,0,.1);
		  Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+49,eeeeee+100 */
    background: var(--background-panel);
    /* Old browsers */
    /*background: -moz-linear-gradient(-45deg,  #ffffff 49%, #eeeeee 100%); FF3.6-15 */
    /*background: -webkit-linear-gradient(-45deg,  #ffffff 49%,#eeeeee 100%);  Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(135deg,  #ffffff 49%,#eeeeee 100%); W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 ); IE6-9 fallback on horizontal gradient */
    /* cursor: pointer;*/
    transition: all 0.25s;
}

/*.panel.well:hover { -webkit-transform: scale(1.05); transform: scale(1.05)}*/
.panel.well>[class*=col-]:first-child p {
    font-family: museo;
}

.panel.well>[class*=col-]:nth-child(2) h2 {
    margin: 1.5rem 0 0.2rem 0;
}

.panel.well .my_planPrice.no-cost {
    overflow: visible;
}

.panel.well .my_planPrice.no-cost::before {
    background: var(--primary-400) none repeat scroll 0 0;
    top: 50%;
    left: -50%;
    margin-left: 0;
    -webkit-transform: rotate(-29deg);
    transform: rotate(-29deg);
    width: 200%;
}

@media (max-width : 767px) {
    .panel.well .my_planPrice.no-cost::before {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
}

ul.nav-tabs li a {
    color: var(--neutral-300);
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}

ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover,
ul.nav-tabs li.active a:focus {
    color: var(--primary-400)
}

.nav-pills>li+li {
    margin-left: 5px;
}

ul.nav-pills {
    display: inline-block
}

ul.nav-pills li {
    padding: 0 0.5rem 0 0;
}

ul.nav-pills li:last-child {
    padding: 0;
}

ul.nav-pills li a {
    background-color: var(--neutral-300);
    color: var(--white);
    font-size: 1.25rem;
    padding: 1rem;
    border-radius: 0.5rem;
    z-index: 0
}

ul.nav-pills li a span {
    font-size: 1.5rem;
    vertical-align: text-top
}

ul.nav-pills li.active a,
ul.nav-pills li.set a,
ul.nav-pills li a:hover,
ul.nav-pills li.active a:focus,
ul.nav-pills li.active a:hover {
    background-color: var(--primary-400);
    color: var(--white);
}

.nav-justified>li {
    display: table-cell;
    width: 1%
}

/* PROMOTION PANELS*/
.feedback {
    max-width: 750px;
    margin: 0 auto;
    /*background: rgba(0,0,0,0.6);*/
    padding: 0;
    text-align: center;
    /*display: flex;*/
}

.feedback h4 {
    font-weight: 300;
}

.feedback h4 span {
    font-weight: 600;
    font-size: 5rem;
    margin: -3rem 0.3rem -3rem 0;
    top: 35px;
    display: inline-block;
    position: relative;
}

.feedback h5 {
    font-size: 0.8rem;
    opacity: 1;
    color: var(--neutral-250);
}

.feedback-expert-description {
    font-size: 0.8rem;
    text-align: left;
    color: #aaa;
    font-weight: 500;
}

.feedback .container {
    height: 100%;
}

.feedback .stars {
    color: var(--primary-400);
}

.hero .feedback {
    color: var(--white);
    max-width: 750px;
    margin: 2rem auto 0 auto;
    border-color: var(--white);
    -webit-border-radius: 1rem;
    border-radius: 1rem;
    border-right: 2px solid var(--neutral-300);
    border-left: 2px solid var(--neutral-300);
    padding: 0.5rem;
}

.hero .feedback h4 {
    font-style: italic;
    font-weight: 300;
}

.hero .feedback h5 {
    opacity: 1;
}

.grey .feedback {
    color: var(--neutral-400);
    max-width: auto;
    margin: 0 auto;
    /*background: rgba(0,0,0,0.6);*/
    padding: 2rem 0.5rem;
    text-align: center;
}

.grey .feedback .container {
    background: var(--background-panel);
    padding: 2rem 1rem;
    margin: 0 0 1rem 0;
}

.grey .feedback h4 {
    font-weight: 300;
}

.grey .feedback h4 span {
    font-weight: 600;
    font-size: 5rem;
    margin: -3rem 0.3rem -3rem 0;
    top: 35px;
    display: inline-block;
    position: relative;
}

.grey .feedback h5 {
    color: var(--neutral-400);
    font-size: 0.8rem;
    opacity: .5;
}

.store-reviews-text {
    color: var(--neutral-400);
    font-size: 0.8rem;
    opacity: .5;
}

.coverSlider img {
    width: 100%;
    margin: 0 0 0.5rem 0;
}

.promoSlider li {
    font-size: 1.5rem;
}

/*.heroSlider {
	display: table !important;
	height: 100% !important;
}
.heroSlider li {
	display: table-cell !important;
	float: none !important;
	vertical-align: middle;
}*/

/* standalone */
.panel.promo {
    width: 280px;
    height: 280px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: var(--white);
    background: var(--primary-400);
    text-align: center;
    margin: 0 auto 40px auto;
}

.panel.promo .panel-wrap {
    display: table;
    width: 100%;
    height: 100%
}

.panel.promo .panel-body {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.panel.promo .panel-body .price {
    font-size: 3rem;
    margin: 0;
}

.panel.promo .panel-body .price span {
    font-size: 1.25rem;
    margin: 0;
    display: block;
    line-height: 1rem;
}

/* content binding */
.panel.promo.smal {
    cursor: pointer;
    width: 200px;
    height: 200px;
    position: absolute;
    left: 5rem;
}

.panel.promo.smal .panel-body {
    vertical-align: middle;
    padding: 0;
}

.panel.promo.smal .panel-body .price {
    font-size: 1.7rem;
    margin: 0;
    line-height: 1.7rem;
    white-space: nowrap;
}

.panel.promo.smal .panel-body .price span {
    font-size: 1.25rem;
    margin: 0;
    display: block;
    line-height: 1rem;
}

.alert {
    padding: 0.5rem;
    margin-bottom: 20px;
    border: none;
    border-radius: 0.5rem;
}

.alert.alert-info {
    color: var(--white);
    background-color: var(--primary-400);
}

.info-float {
    /*position: absolute;
	bottom: 0;
	left:0;*/
    padding: 2rem;
    margin: -110px 0 0 0;
    text-align: center;
    background-color: rgba(252, 124, 0, 1);
    width: 100%;
    color: var(--white);
    -webkit-transform: translateY(100%);
    -webkit-transition: all 0.25s ease-out;
    transform: translateY(100%);
    transition: all 0.25s ease-out;
}

.hero.alt .panel:hover .info-float {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    margin: 0 0 0 0;
}

.info-float div {
    width: 100%;
    text-align: center;
    font-weight: 300;
    font-size: 1.5rem;
}

.info-float div span {
    margin: 0.1rem 0 0 0;
}

#promoModal {
    position: absolute;
}

#promoModal .modal-body {
    max-width: 680px;
    height: 695px;
    position: relative;
    background: url(/system/galleries/html/src/img/football_website_promo.jpg) no-repeat left top;
    background-size: contain;
    background-position: 0 10px;
}

#promoModal .modal-body .buttons {
    position: absolute;
    bottom: 20px;
    left: 0;
}

#promoModal .modal-body .buttons img {
    width: 90% !important;
    height: auto;
    margin: 0 0 0.5rem 0;
}

#promoButton {
    position: fixed;
    left: 0;
    top: 50%;
    -webkit-transform: rotate(-90deg) translateY(-270%);
    transform: rotate(-90deg) translateY(-270%);
    font-size: 1rem;
    font-weight: 600;
    background: none;
    border: none;
    /*color: #94c11f;*/
    color: var(--primary-400);
    padding: 0.2rem 0.5rem;
}

#cardButton {
    position: fixed;
    right: -10px;
    top: 50%;
    -webkit-transform: rotate(-90deg) translateY(130%);
    transform: rotate(-90deg) translateY(130%) translateX(-50%);
    font-size: 1.25rem;
    font-weight: 500;
    background: var(--primary-400);
    border: none;
    /* color: #94c11f; */
    color: var(--white);
    padding: 0.3rem 1rem;
    z-index: 999;
    border-radius: 1rem 1rem 0 0;
    display: none !important;
}

#cardButton span {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-right: 0.2rem;
}

/* Mobile Panel */
.mobile-app-panel {
    background: var(--neutral-400);
    position: relative;
    border-top: 2px solid var(--primary-400);
    box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.2)
}

.mobile-app-panel a {
    display: block;
    color: var(--white);
    font-size: 1rem;
    padding: 1rem;
}

.mobile-app-panel img {
    display: inline-block;
    max-height: 50px;
    margin: 0 1rem 0 0
}

.mobile-app-panel p {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    font-size: 1.2rem
}

.mobile-app-panel .btn {
    display: none;
    position: absolute;
    bottom: 0rem;
    right: 1rem;
    padding: 0.2rem 1rem;
}

.mobile-app-panel .icon_close {
    position: absolute;
    top: 50%;
    right: 1rem;
    font-size: 2.5rem;
    cursor: pointer;
    color: var(--white);
    z-index: 2;
    -webkit-transform: translateY(-55%);
    transform: translateY(-55%);
}

hr {
    border-top: 2px solid #eee;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

footer hr {
    border-top: 1px solid var(--neutral-250);
}

.well img.pull-right {
    margin: 0 0 1rem 1rem;
    width: 100%;
    max-width: 500px;
    height: auto
}

.glyphicon:before {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.img-container {
    /*width: 300px;
    height: 300px;*/
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.img-crop img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

.row {
    margin: auto;
}

p {
    margin: 0 0 1.5em;
}

a,
a:hover,
a:active {
    color: var(--primary-400);
    text-decoration: none !important;
    outline: none;
}

a.dropdown-toggle:focus {
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: 0;
}

.dropdown-menu > li > a {
    width: 100% !important;
}

#page {
    overflow: visible;
    position: relative;
    min-height: 95vh
}

section {
    border-bottom: 2px solid var(--neutral-200);
    background: var(--background-panel);
}

section.grey {
    margin: -2px 0 0 0;
    border: none
}

section:last-child {
    border-bottom: none;
}

.disturber {
    position: absolute;
    top: 105px;
    right: -185px;
    width: 500px;
    padding: 5px 10px;
    background: var(--primary-400);
    font-weight: 300;
    color: var(--white);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    z-index: 3;
    text-align: center;
    font-size: 1rem;
    transition: all 0.25s ease-in-out;
}

.hero .disturber {
    padding: 0.5rem 4rem;
    top: 0;
    right: 0;
    -webkit-transform: rotate(45deg) translate(155px, -125px);
    transform: rotate(45deg) translate(155px, -125px)
}

.img-container .disturb {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0.25rem 0;
    background: var(--primary-400);
    z-index: 2;
}

.img-container .disturb h3 {
    color: var(--white);
}

.disturber h4 {
    font-size: 1rem
}

.disturber[data-toggle] {
    cursor: pointer
}

.disturber.scroll {
    top: -120px;
    cursor: pointer;
}

.disturber h3 {
    color: var(--white) !important;
    font-size: 0.8rem;
    margin: 0 0 0.2rem 0 !important;
}

.disturber h3 b {
    font-size: 1.25rem;
}

.claim {
    color: var(--primary-400);
    font-size: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 2rem 0
}

.circle-wrapper {
    display: table;
    position: absolute;
    top: -75px;
    right: 20px;
}

.scroll-down {
    position: absolute;
    top: 0;
    -webkit-transform: translateY(-100%) translateX(-50%);
    transform: translateY(-100%) translateX(-50%);
    right: auto;
    left: 50%;
    padding: 2rem 0 0 0;
    font-size: 2.5rem !important;
    color: var(--neutral-300);
    z-index: 3;
    text-align: center;
    background: rgba(255, 255, 255, 0);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
    line-height: 1rem;
}

.scroll-down::before {
    padding: 0.2rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.5rem;
    /*transform: translateX(-50%);*/
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    color: var(--white);
    font-size: 2rem;
}

.scroll-up {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 3rem;
    color: var(--white);
    z-index: 2;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    line-height: 2rem;
}

.circle {
    color: var(--white);
    background: var(--primary-400);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: table-cell;
    width: 150px;
    height: 150px;
    vertical-align: middle;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 300;
    text-decoration: underline;
}

.textImgSlider li {
    -webkit-border-radius: 1em;
    border-radius: 1em;
    border: 1px solid rgba(255, 255, 255, 0);
    text-align: center;
    margin: auto !important;
    padding: 0 20px;
    transition: all 0.25s ease-in-out;
}

.textImgSlider li.open {
    text-align: center;
    margin: auto !important;
    padding: 20px;
    border: 2px solid #eee;
}

.textImgSlider li.open a.btn-standard {
    border: none !important;
    color: var(--primary-400) !important;
    text-decoration: none !important;
}

.textImgSlider li h4 {
    color: var(--primary-400);
}

.publisher li img {
    margin: 0 0 1rem 0;
}

.breadcrumb {
    margin: 85px 0 0 0;
    padding: 0 0 0 20px;
    transition: all 0.25s ease-in-out;
    background: var(--neutral-100);
    -webkit-border-radius: 0px;
    border-radius: 0px;
    height: 0px;
    overflow: hidden;
    display: none;
}

.breadcrumb li {
    line-height: 2rem;
}

.breadcrumb li::before {
    content: sectionContent"";
}

.breadcrumb>li+li::before {
    padding: 0 10px;
}

.breadcrumb a {
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--neutral-400);
}

.breadcrumb a span {
    vertical-align: text-top;
    font-size: 1rem
}

/* CUSTOM MODAL */
.modal {
    overflow: visible !important;
}

.modal-open {
    padding-right: 0 !important;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.modal-dialog {
    margin: 5vh auto;
    width: max-content;
    max-width: 96vw;
    display: inline-block;
    position: absolute;
    left: 50%;
    -moz-transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
}

.modal-content {
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .15)
}

.modal-header {
    border: none;
}

.modal-body {
    width: 95vw;
    max-width: 1280px;
    overflow: auto;
}

.modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--background-panel) url(/system/galleries/html/src/img/icon_loading.svg) no-repeat center center;
    overflow-y: auto;
    overflow-x: hidden;
}

#iframeModal .modal-body {
    min-height: 60vh;
    overflow: visible;
}

#iframeModal .modal-body iframe {
    min-height: 20vh;
}

#exitIntentModal .modal-body {
    overflow: visible;
}

.modal-footer {
    text-align: center;
    border: none;
    min-height: 50px !important;
}
.modal-footer .btn+.btn {
    margin-bottom: 1rem;
}

.play-icon-wrapper {
    border-radius: 50%;
    background: var(--background-panel);
    opacity: 0.9;
}

.play-icon-wrapper .social_youtube_circle {
    font-size: 12rem;
    color: var(--primary-400);
}

.play-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(238, 238, 238);
    background: radial-gradient(circle, rgba(238, 238, 238, 0) 35%, rgba(238, 238, 238, 1) 80%);
    background-size: cover;
}

.video-wrapper .video-data-info {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100%;
    background: var(--background-panel);
    padding: 1rem;
    overflow: hidden;
    opacity: 0;
    transition: all 0.25s ease;
    z-index: 2;
    justify-content: center;
}

.video-wrapper .video-data-info p {
    text-align: center;
    color: var(--neutral-400);
}

.video-wrapper.set .video-data-info {
    opacity: 1;
    bottom: 0;
}

.video-wrapper.set .video-data-info>div {
    background: var(--background-panel);
    padding: 2rem 1rem;
    border-radius: 1rem;
    box-shadow: 0 0 1rem #00000030;
    text-align: center;
}

.video-wrapper.set .video-data-info>div label {
    display: block;
}

@media all and (max-width: 480px) {
    .play-icon-wrapper .social_youtube_circle {
        font-size: 8rem;
    }

    .video-wrapper .video-data-info {
        padding: 0;
    }

    .video-wrapper .video-data-info p,
    .video-wrapper .video-data-info .btn {
        font-size: 1.0rem;
        margin: 0 0 0.5rem 0;
    }

    .video-wrapper.set .video-data-info>div {
        background: none;
    }
}

button.close {
    font-size: 1.5rem;
    color: var(--neutral-400);
    opacity: 1;
}

#iframeModal.video .modal-content {
    background: var(--neutral-400);
}

#iframeModal.video .modal-header {
    overflow: visible;
    height: 0px;
    padding: 0;
    min-height: inherit;
}

#iframeModal button.close {
    position: absolute;
    right: 0;
    z-index: 1;
    /* background: var(--background-panel); */
    opacity: 1;
    padding: 0.25rem 1rem;
    border-radius: 0 0 0 0.5rem;
    color: var(--neutral-250);
    font-size: 2rem;
    text-shadow: none;
}

#videoModal .close {
    margin-top: 0;
    position: absolute;
    top: 0;
    right: 0;
    color: var(--neutral-300);
    z-index: 15;
    opacity: 1;
    font-size: 1.5rem;
    background: var(--background-panel);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-shadow: none;
}

#iframeModal.video .modal-header h4 {
    display: none;
}

#iframeModal .modal-body {
    overflow: hidden;
    background: var(--background-panel) url(/system/galleries/html/src/img/icon_loading.svg) no-repeat center center;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 190px);
    padding: 0;
}

#iframeModal.video .modal-body {
    overflow: hidden;
    padding: 0.25rem;
    width: 95vw;
}

#iframeModal.video .modal-footer {
    display: none;
}

.inlineVideo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 3
}

.inlineVideo iframe {
    height: 100%;
    max-width: 975px;
    width: 100%;
}

.inlineVideo .close {
    color: var(--white);
    font-size: 1.5rem;
    margin: 0.5rem 0.5rem 0 0;
    opacity: 1;
}

.icon-print {
    font-size: 1.2rem;
    float: right;
    margin: -40px 0 0 0
}

/* CUSTOM BX Slider */
.bx-wrapper img {
    display: inline-block;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    bottom: -60px;
}

.bx-wrapper .bx-viewport {
    border: none !important;
    background: none !important;
    padding: 0;
    left: 0;
}

.bx-viewport>ul {
    padding: 0;
}

.bx-pager-item {
    vertical-align: middle;
    margin: 10px 0
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: var(--neutral-250);
    width: 15px;
    height: 15px;
    border-radius: 50% !important;
    margin: 0 10px;
    vertical-align: middle;
    transition: all 0.25s ease-in-out;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: var(--primary-400) !important;
    width: 15px;
    height: 15px;
}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-controls-direction {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    /* bottom: 0; */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

.bx-wrapper .bx-controls-direction a {
    text-indent: inherit;
    display: inline-block;
    /* height: 100%; */
    /* -webkit-transform: translateY(-50%); */
    /* transform: translateY(-50%); */
    position: static;
    margin: 0;
    width: auto;
    height: auto;
    pointer-events: all;
}

.bx-wrapper .bx-controls-direction a:before {
    color: var(--neutral-250);
    font-size: 5rem;
    /* position: absolute; */
    /* top: 50%; */
    /* -webkit-transform: translateY(-50%); */
    /* transform: translateY(-50%); */
}

.bx-wrapper .bx-controls-direction a:hover:before,
.bx-wrapper .bx-controls-direction a:active:before {
    color: var(--primary-400);
}

.bx-wrapper .bx-prev {
    left: -30px;
    background: none;
}

.bx-wrapper .bx-next {
    right: -30px;
    background: none;
}

.bx-wrapper .bx-next:before {
    right: 0;
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-bottom: 0.6em;
    margin-top: 0.5em;
    font-weight: 300;
    color: var(--neutral-400);
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

#coaches h3 {
    color: var(--primary-400);
}

h5 {
    color: var(--neutral-300);
}

p,
ul li,
ul li a,
div {
    font-size: 1rem;
    font-weight: 300;
}

h1 span,
h2 span {
    color: var(--primary-400);
}

.btn,
.button,
.btn.btn-default.back {
    white-space: normal;
    font-size: 1rem;
    font-weight: 500;
    color: var(--neutral-400);
    position: relative;
    padding: 0.5rem 1.5rem;
    border: 1px solid #aaa;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    display: inline-flex;
    margin: 0 0 1rem 0;
    text-align: center;
    width: auto;
    transition: all 0.25s ease-in-out;
    background: var(--background-panel);
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
}
.btn > span[class*=p6-icon] {
    font-size: 1.4em;
}
.btn > img {
    height: 1.4em !important;
    width: auto;
}
.btn.btn-default.back {
    white-space: normal;
    font-size: 1rem;
    font-weight: 500;
    color: var(--neutral-400);
    position: relative;
    padding: 0.5rem 1.5rem;
    border: 1px solid #aaa;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    display: inline-flex;
    margin: 0 0 1rem 0;
    text-align: center;
    width: auto;
    transition: all 0.25s ease-in-out;
    background: var(--background-panel);
    align-items: center;
    gap: 0.25rem;
    justify-content: center;
}
.btn.focus,
.btn:focus,
.btn:hover {
    color: var(--neutral-400);
}

header nav.navbar-default .dropdown-menu>li a.btn {
    width: 100%;
    font-weight: 500 !important;
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

.btn.btn-standard2 {
    border: 1px solid var(--primary-400);
    border-radius: 7px;
    color: #bebebd;
    padding: 6px 24px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.btn.btn-orange {
    border: 1px solid var(--primary-400) !important;
    border-radius: 7px;
    color: var(--primary-400);
    padding: 6px 24px;
    text-align: center;
    text-transform: uppercase;
}

.btn.btn-standard:hover {
    text-decoration: none;
}

[class*=btn-]>.glyphicon {
    height: 90%;
    background: var(--background-panel);
    position: absolute;
    right: 0.8rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    vertical-align: middle;
    z-index: 2;
}

.btn[data-toggle="modal"]::after {
    border: none !important
}

.btn-primary .glyphicon,
.hero .btn-standard .glyphicon {
    background: var(--primary-400);
}

.btn[data-toggle="modal"] {
    padding: 0.4rem 1.5rem;
}

.btn[data-toggle="dropdown"]::after,
.btn[data-toggle="collapse"]::after {
    -webkit-transform: rotate(135deg) translateY(28%) translateX(-92%);
    transform: rotate(135deg) translateY(28%) translateX(-92%);
    /* transition: all 0.25s ease-in-out;*/
}

.btn[data-toggle="dropdown"][aria-expanded=true]::after,
.btn[data-toggle="collapse"][aria-expanded=true]::after {
    -webkit-transform: rotate(-45deg) translateY(8%) translateX(58%);
    transform: rotate(-45deg) translateY(8%) translateX(58%);
}

.btn.disabled,
.btn.disabled:focus,
.btn[disabled]:focus,
.btn.disabled:active,
.btn[disabled]:active,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: 0.35;
    background-color: var(--neutral-200);
    border-color: var(--neutral-200);
    color: var(--neutral-400);
}

.btn.disabled .select-arrow,
.btn[disabled] .select-arrow {
    display: none;
}

.open>.dropdown-toggle.btn-primary,
.open>.dropdown-toggle.btn-primary:hover {
    background: var(--neutral-300);
    border-color: var(--neutral-300);
}

.container {
    width: 100%;
    max-width: 1170px;
    padding: 60px 20px;
    position: relative;
}

.flex-container {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.flex-container>div {
    /* flex-grow: 1;*/
    margin-bottom: 1rem;
}

.flex-container>div>.button {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-content: center;
    min-height: 4rem;
}

.flex-container>div>.button>div {
    flex-grow: 1;
    margin: auto;
;
}

.flex-container>div>.button>div h3 {
    padding: 0;
    margin-top: 0;
    font-weight: 400;
    text-align: center;
    font-family: 'Proxima Nova';
}

.flex-container>div>.button>div img {
    padding: 0;
    margin: 0;
}

.button .sub-navi {
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 100%;
    background: #ddd;
    transition: all 0.25s ease-in-out;
    transform: translateY(100%);
    z-index: 2;
}

.button:hover .sub-navi {
    transform: translateY(0%);
}

.button .sub-navi>div {
    align-items: center;
    margin: auto;
}

.button .sub-navi>div>i {
    color: var(--neutral-400);
    font-size: 2rem;
    margin: 0 1rem;
    cursor: pointer;
    display: inline-block;
}

.button.row.alert {
    background: #fff6c7;
}

.button.row.alert a {
    color: var(--primary-400);
    font-size: 1.25rem;
    font-weight: 300;
    flex-grow: 1;
    margin: auto;
}

.button.alert a i {
    margin-right: 1rem;
    color: var(--primary-400);
    font-size: 1.5rem;
    vertical-align: middle;
}

.button.row {
    border: none;
    width: 100%;
    /*border-top:.3rem solid var(--neutral-100);*/
    padding: 0;
    position: relative;
    transition: all 0.25s;
    border-radius: 0.5rem;
    display: inline-block;
}

.button.row {
    overflow: hidden;
    background: var(--background-panel);
}

.button.row.panel.action {
    background: #fc7;
}

.button.row.panel.special {
    background: var(--primary-400);
    color: var(--white) !important;
}

.button.row.panel.special h3,
.button.row.panel.special i {
    color: var(--white) !important;
}

.button.row.panel i[class*=icon] {
    font-size: 2rem;
    color: var(--neutral-300);
}

.button.row.panel.action i[class*=icon] {
    color: var(--neutral-500);
}

.button.row.panel h3 {
    font-size: 1.25rem;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.button.row.panel .order {
    font-size: 1.25rem;
}

.button.row.panel .order p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--primary-400);
}

.button.row::before {
    transition: all 0.25s;
}

.button[onclick].row:hover::before,
a.button.row:hover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
    display: block;
}

.button.row.stop {
    opacity: 0.6;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.button.row .row {
    position: relative;
}

.button.row img.flag {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 50px;
    margin: 0;
}

.button.row img.publisher {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 110px;
}

@media (max-width: 480px) {
    .button.row .row:first-child p {
        margin: 0
    }

    .button.row .row:first-child img.flag,
    .button.row .row:first-child img.publisher {
        position: static;
        vertical-align: middle;
        margin: 0;
    }

    #iframeModal .modal-body {
        width: auto;
    }
}

#search .container {
    padding: 0 20px 20px 20px;
}

.subpage .container {
    padding: 2rem 1rem;
}

.no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.no-padding-l {
    padding-left: 0px;
}

.no-padding-r {
    padding-right: 0px;
}

.grey {
    background: var(--neutral-100);
}

.compare .grey {
    background: rgba(0, 0, 0, 0.02);
    border-top: 2px solid #fff
}

.darkgrey {
    background-color: var(--neutral-300);
}

.darkgrey h1,
.darkgrey h2,
.darkgrey p,
.darkgrey strong {
    color: var(--white);
}

/* TOOLTIP */
.tooltip {
    font-family: "proxima-nova", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    width: 100%;
    max-width: 500px;
    padding: 5px 1rem !important;
}

.tooltip p,
.tooltip h4 {
    font-size: 0.8rem;
    font-weight: 300
}

.tooltip h4 {
    font-weight: bold;
}

.tooltip-inner {
    background: var(--neutral-400);
    width: 100%;
    max-width: 850px;
    padding: 1rem;
    border-radius: 0.5rem;
}

.tooltip.top>.tooltip-arrow {
    border-top-color: var(--neutral-400);
}

.tooltip.left>.tooltip-arrow {
    border-left-color: var(--neutral-400);
    display: none;
}

.tooltip.bottom>.tooltip-arrow {
    border-bottom-color: var(--neutral-400);
}

/* COMPARE FEATURE TABLE*/

.compare-table {
    margin: 2rem 0;
}

.compare-table .my_planHeader .btn {
    width: 100%;
}

.compare-table .panel {
    border: none;
    box-shadow: none;
    padding: 0;
}

.compare-table.alt .panel {
    border: none;
    box-shadow: none;
    padding: 0 15px;
    background: var(--background-panel);
}

.compare-table .my_planHeader:first-child {
    border-right: 5px solid #fff;
}

.compare-table .my_featureRow div[class*=col-] {
    padding: 0;
}


/* TEAMLIST */
.teamlist {
    margin: 0;
    padding: 0;
    transition: all 0.25s ease-in-out 0s;
}

.teamlist h2 {
    color: var(--primary-400);
    font-family: museo, Verdana, sans-serif;
    font-size: 1.2rem;
    font-weight: normal;
    padding: 1rem 0 0;
    margin: 0;
}

.teamlist h3 {
    font-size: 1.0rem;
}

.teamlist h3 span.smal-info {
    color: grey;
    display: block;
    font-size: 12px;
    font-weight: normal;
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    transition: all 0.25s ease-in-out 0s;
}

.teamlist li:hover h3 span.smal-info {
    opacity: 1;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}

.teamlist li h2,
.teamlist li h3 {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
    transition: all 0.25s ease-in-out 0s;
}

.teamlist:hover h2,
.teamlist:hover h3 {
    opacity: 0.5;
}

.teamlist li:hover h2,
.teamlist li:hover h3 {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

.teamlist li {
    border-bottom: medium none !important;
    float: left;
    overflow: hidden;
    padding: 2rem 1rem !important;
    position: relative;
    white-space: nowrap;
    transition: all 0.25s ease-in-out 0s;
}



.teamlist li::before {
    content: "";
    display: block;
    height: 250px;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.teamlist li .article {
    display: inline-block;
    vertical-align: middle;
    white-space: normal !important;
    width: inherit;
}

.teamlist li img {
    border: 3px solid #eee;
    height: 180px;
    opacity: .9;
    transition: all .25s ease-in-out 0s;
    width: 180px;
    border-radius: 50%;
    margin-right: 0.5rem;
    object-fit: cover;
}

.teamlist:hover li img {
    opacity: 0.5;
}

.teamlist li:hover img {
    opacity: 1;
}

.my_planPrice {
    position: relative
}

.my_planPrice span {
    font-size: 0.9rem
}

/*.my_planPrice.no-cost::before {
	content: attr(title);
	background: rgba(252, 124, 0, 0.7) none repeat scroll 0 0;
    bottom: -6px;
    color: var(--white);
    left: 50%;
    margin-left: -50%;
    padding: 0.2rem 0.5rem;
    position: absolute;
	-webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
    width: 100%;
	font-size: 1.2rem;
	}*/
.my_planPrice.no-cost::before {
    content: attr(title);
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    top: 28px;
    color: var(--white);
    left: 50%;
    margin-left: -53%;
    padding: 0.4rem 0.5rem;
    position: absolute;
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg);
    width: 110%;
    font-size: 1.0rem;

}

/* Use a wide full screen for small screens like tablets. */
@media (min-width: 768px) and (max-width:992px) {
    .container {
        width: initial;
    }
}

/* --- Plans ---------------------------- */
/*#heroShop #productToggle { display: table }*/
#heroShop #productToggle .panel {
    margin: -2px;
    /*display: table-cell;*/
    border: 2px solid #eee;
    /*float: none*/
}

#heroShop #productToggle .my_planHeader {
    border: none;
}

#heroShop #productToggle .panel:nth-child(2)::after {
    content: '+';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 2.5rem;
    color: var(--neutral-300);
    background: var(--neutral-100);
    z-index: 2;
    padding: 0rem 1.2rem;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    right: -1.8rem;
}

#heroShop #productToggle .panel:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    color: var(--white);
    background: var(--background-panel);
    z-index: 2;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    right: -35px;
}

#heroShop #productToggle .panel:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 35px;
    height: 70px;
    color: var(--neutral-100);
    background: var(--neutral-100);
    z-index: 2;
    -webkit-border-radius: 0 70px 70px 0;
    border-radius: 0 70px 70px 0;
    right: -35px;
}

#heroShop #productToggle .panel small {
    font-size: 0.7rem;
}

#heroShop #productToggle .panel>img {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 70px;
    right: -35px;
    z-index: 2
}

#heroShop #productToggle .panel:last-child::after {
    display: none;
}

#heroShop #productToggle .panel.content {
    background: var(--neutral-100);
    /*-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);margin: -1rem 0;z-index: 1;*/
}

#heroShop #productToggle .panel .my_planHeader .premium-icon {
    position: absolute;
    top: -1.5rem;
    right: 1.5rem;
    width: 4rem;
}

#heroShop #productToggle .panel .my_planHeader a {
    color: var(--neutral-400);
    text-decoration: underline
}

.my_planHeader {
    text-align: center;
    padding: 2rem;
}

.compare-table.alt .my_planPrice {
    padding: 2rem 0 0 0;
    overflow: hidden;
}

.compare-table.alt .my_planPrice.no-cost::before {
    background: rgba(252, 124, 0, 0.7) none repeat scroll 0 0;
    color: var(--white);
    content: attr(title);
    font-size: 1.2rem;
    left: 47%;
    margin: 0 -50%;
    padding: 0.8rem;
    position: absolute;
    transform: rotate(-7deg);
    width: 110%;
    bottom: 26%;
}

@media (max-width: 480px) {

    .my_planHeader,
    .my_planFeature {
        border: none;
    }

    .my_planHeader {
        padding: 0.2rem;
    }
}

.my_planTitle {
    font-size: 2rem;
}

.my_planPrice {
    font-size: 1.8rem;
    overflow: hidden;
}

.compare-table.alt .my_planHeader {
    border: 1px solid #ddd;
    background: var(--background-panel);
    padding: 2rem 1rem 0rem 1rem;
}

.compare-table.alt .my_planHeader .my_planTitle {
    color: var(--primary-400);
}

.compare-table.alt .my_planPrice {
    font-size: 2rem;
    /*background: var(--neutral-100);*/
    padding: 0.5rem 1.2rem 2rem 1.2rem;
    /*border-top: 1px solid #ddd;*/
}

.compare-table.alt .my_planPrice p {
    margin: 0;
}

.compare-table.alt .no-padding:first-child .my_planPrice {
    border-right: 3px solid #fff;
}

.my_planDuration {
    margin-top: -0.6em;
}



/* --- Features ------------------------- */

.my_feature {
    line-height: 3rem;
    text-align: left;
    padding: 0 0 0 2rem !important;
    float: right;
}

@media (max-width: 480px) {
    .my_feature {
        text-align: center;
        background: var(--neutral-100);
    }
}

.my_featureRow {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    border-bottom: 1px solid #eee;
}

@media (max-width: 768px) {
    .my_featureRow {
        border-bottom: none;
    }
}

/* --- Plan 1 --------------------------- */
.my_plan1 {
    /*background: #eee;*/
    color: var(--neutral-400);
}

/* --- Plan 2 --------------------------- */
.my_plan2,
.my_plan2 [data-toggle="tooltip"] {
    /*background: rgba(252,124,0,0.2);*/
    color: var(--primary-400);
}


.my_planFeature {
    text-align: center;
    font-size: 1.8rem;
    line-height: 3rem;
}

.my_planFeature i.my_check {
    color: green;
}

.compare-table [data-toggle="tooltip"] {
    font-size: 1.125rem;
    vertical-align: middle;
    color: #aaa;
    cursor: pointer;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
}

/* HALLO, Abschnitt 1: Erstansicht */
.hero {
    padding: 0;
    width: 100%;
    display: table;
    text-align: center;
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    position: relative;
    overflow: hidden
}

.hero-white-background #background_wrap::after {
    opacity: 0
}

.hero-white-background .hero {
    text-align: left;
}

.hero-white-background .hero .table-cell {
    width: 60%;
    padding: 4rem;
}

.hero-white-background .hero h1,
.hero-white-background .hero h3 {
    color: var(--neutral-400);
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 2
}

.hero .app_img img {
    max-width: 240px;
}

.hero .app_txt img {
    height: 55px;
    width: auto;
}

.hero h1,
.hero h3 {
    color: var(--white);
}

.hero h4 {
    max-width: 1470px;
    margin: 0 auto;
}

.hero h1 {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.hero h1 span,
.hero h3 span {
    color: var(--primary-400);
}

.hero .btn-default {
    background: none;
    color: var(--white);
    font-weight: 500;
    font-size: 1.25rem;
}

/*.hero .btn-default {
	background: rgba(252,252,252,0.9);
	color: var(--primary-400);
	border-color: transparent;
	font-weight: 500;
	font-size: 1.25rem;
	}*/
.hero .btn-default:hover,
.hero .btn-default:focus {
    color: var(--primary-400);
    border-color: var(--primary-400);
}

.hero .btn-standard {
    background: rgba(252, 124, 0, 1);
    color: var(--white);
    border: none;
    font-weight: 500;
    font-size: 1.25rem;
}

.hero .btn-standard:hover,
.hero .btn-standard:focus {
    /*background: rgba(252,124,0,0.6);*/
    color: rgba(255, 255, 255, 0.6);
}

.certificate img {
    display: inline;
    position: static;
    height: 150px;
    max-width: 8rem !important;
    margin: 0.5rem 1rem;
    width: auto !important;
    -webkit-filter: drop-shadow(2px 2px 3px #ddd);
    filter: drop-shadow(2px 2px 3px #ddd);
}

.certificate.smal {
    text-align: center;
}

.certificate.smal img {
    height: 120px;
    margin: 0 0.5rem 1.5rem 0.5rem;
}

.hero .certificate {
    position: absolute;
    top: 20px;
    right: 0;
    width: 100%;
    text-align: right;
    z-index: 1;
}

.hero .certificate a {
    display: inline-block;
}

.hero .certificate img {
    display: inline;
    position: static;
    width: auto;
    height: 120px;
    cursor: pointer;
    margin: 0;
}

.hero .certificate.left {
    right: auto;
    left: 0;
    text-align: left;
}

.hero .certificate.left img {
    width: auto;
}

.hero .seal-panel {
    display: inline-block;
    margin: 0 0 1rem 0;
}

.hero .seal-panel.left {
    top: 0;
    position: relative;
    z-index: 1;
}

.hero .seal-panel.left img {
    margin-right: 1rem;
}

.hero .seal-panel img {
    width: auto;
    height: 110px;
    vertical-align: middle;
}

.play {
    display: inline-block;
    font-size: 3rem;
    color: var(--primary-400);
    width: auto;
    background: var(--background-panel);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 1.2rem;
    border: 0.4rem solid var(--primary-400);
    z-index: 2;
}

.play:before {
    cursor: pointer;
    margin: 0 -3px 0 3px;
    position: absolute;
    left: 1.2rem
}

.publisher-logos-smal {
    right: 0;
    left: 0;
    bottom: 0;
    /*position:absolute;*/
    z-index: 96;
    text-align: center;
    font-size: 0.75rem;
    color: var(--neutral-300);
    padding: 20px 0;
    background: var(--background-panel);
    /*height: 10vh;*/
    box-sizing: border-box;
}

.publisher-logos-smal img {
    height: 40px;
    display: inline-block;
    opacity: 0.8;
    transition: all 0.25s ease-in-out;
    vertical-align: middle;
    max-height: 50px;
}

.publisher-logos-smal img:hover {
    opacity: 1;
}

.publisher-logos-smal p {
    margin-bottom: 0.5em;
}

/* FOOTER */
footer {
    margin: -2px 0 0 0;
    position: relative
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li a {
    color: var(--neutral-400);
    text-decoration: none;
    height: 24px;
    display: block;
    font-size: 18px;
}

footer ul li a:hover {
    color: var(--neutral-400);
}

footer .container {
    padding: 60px 20px 110px 20px;
}

footer .list-inline {
    padding: 1rem 0;
    margin-top: 0;
}


/************  CUSTOM STYLES JACOPO   *******************/
html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,
body {
    font-size: 100%;
    height: 100%;
}

table td {
    font-size: 1rem;
    padding: 0.5rem 1rem 0 0;
    vertical-align: top;
}

.clear {
    clear: both;
}

header {
    height: auto;
    position: relative;
    left: 0;
    top: 0;
    transition-duration: 0.4s;
    transition-property: transform;
    width: 100%;
    z-index: 10;
    transition: height 0.25s ease-in-out;
    background: var(--background-panel);
    padding: 0 20px;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

header.set {
    /*background: var(--background-panel);
	height: 40px;*/
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
}

header.menuOpen {
    position: absolute;
}

header.set #logo {
    height: 40px;
}

header #logo {
    height: 2.5rem;
    width: auto;
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    margin-left: 0;
}

header .navbar-header .navbar-mobile {
    display: flex;
    float: right;
    align-items: center;
    gap: 1rem;
}

header .navbar-header a span[class*=p6-icon] {
    position: relative;
}

header .navbar-header .navbar-mobile>a span[class*=p6-icon] {
    font-size: 2rem;
}

header .navbar-brand {
    float: none;
    height: auto;
    padding: 0;
    /* font-size: 18px; */
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

header .navbar-brand .arrow_left {
    font-size: 2.2rem;
    color: var(--primary-400);
    margin: 5px 0px 0px -10px;
    display: inline-block;
}

header #logo img {
    height: 100%;
    width: auto;
}

.sub-logo {
    width: 60%;
}

/* NAVIGATION */
header nav {
    position: relative;
}

header.menuOpen nav {
    z-index: 5;
}

header nav>ul {
    margin: 0;
}

header nav>ul li a {
    color: var(--neutral-400);
}

header nav>ul li a .glyphicon {
    margin-left: 0.3rem !important;
    margin-right: 0.2rem !important;
}

header nav .btn {
    /*margin-bottom: 0 !important;*/
    width: 100%
}

header nav>ul>li.open>a {
    position: absolute;
    right: 20px;
    top: 0;
    /* width: 110px;*/
    z-index: 6;
}

header nav a span.basketCount {
    display: flex;
    position: absolute;
    z-index: 1;
    top: -4px;
    right: -4px;
    height: 20px;
    min-width: 20px;
    padding: 0px 2px;
    border-radius: 12px;
    background-color: var(--primary-400);
    border: 1px solid var(--white);
    color: var(--white) !important;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: 'proxima-nova', sans-serif !important;
    padding: 4px;
}

header nav>ul>li>a .cd-menu-text {
    color: var(--primary-400);
    display: inline-block;
    line-height: 85px;
    /*height: 100%;*/
    text-transform: uppercase;
    font-size: 1.125rem;
    font-weight: 500;
    vertical-align: middle;
    margin: 0 0.2rem 0 0;
    transition: all 0.25s ease-in-out;
}

header.set header nav>ul>li>a .cd-menu-text {
    line-height: 40px;
}

header nav>ul>li.open>a .cd-menu-text {
    opacity: 0;
}

header nav>ul li a .cd-menu-icon {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateX(0%) translateY(-50%);
    -moz-transform: translateX(0%) translateY(-50%);
    -ms-transform: translateX(0%) translateY(-50%);
    -o-transform: translateX(0%) translateY(-50%);
    transform: translateX(0%) translateY(-50%);
    width: 18px;
    height: 2px;
    background-color: var(--primary-400);
    transition: all 0.25s ease-in-out;
}

header nav>ul li.open a .cd-menu-icon {
    width: 25px;
}

header nav>ul li a .cd-menu-icon::before,
header nav>ul li a .cd-menu-icon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--primary-400);
    left: 0;
}

header nav>ul li a .cd-menu-icon::before {
    bottom: 5px;
}

header nav>ul li a .cd-menu-icon::after {
    top: 5px;
}

header nav>ul li.open a .cd-menu-icon {
    background-color: rgba(255, 255, 255, 0);
}

header nav>ul li.open a .cd-menu-icon::before,
header nav>ul li.open a .cd-menu-icon::after {
    background-color: var(--primary-400);
}

header nav>ul li.open a .cd-menu-icon::before {
    bottom: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

header nav>ul li.open a .cd-menu-icon::after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

header nav.alt>ul li:first-child {
    display: none;
}

.open .dropdown-menu {
    display: block;
    width: 100%;
    min-width: 200px;
}

.dropdown-menu li a {
    text-transform: none;
    pointer-events: all;
    font-weight: 300
}

.dropdown-wrap {
    background: rgba(255, 255, 255, 1);
    position: absolute;
    right: 0;
    transition: all 0.25s;
    min-width: 100%;
    z-index: 5;

}

.open>a,
.open>a span {
    color: var(--primary-400) !important
}

.open>.dropdown-wrap {
    transform: translateY(-0.5rem) !important;
    opacity: 1 !important;
    pointer-events: all !important;
    display: block;
}

.open>.dropdown-wrap::after {
    content: '';
    position: absolute;
    top: -10px;
    right: 25px;
    width: 20px;
    height: 20px;
    background: var(--background-panel);
    transform: rotate(45deg);
    z-index: -1;
    box-shadow: -1px -2px 2px rgba(0, 0, 0, 0.1);
}

header nav>ul>li:nth-child(2) .dropdown-wrap ul.sub-menu li {
    display: block;
    font-size: 1rem;
    padding: 0.2rem 0;
    line-height: normal !important;
    margin: 0;
    height: auto;
}

header nav>ul>li:nth-child(2) .dropdown-wrap ul.sub-menu li a {
    display: block;
    line-height: normal;
    font-weight: 300 !important;
    padding: 0.5rem;
}

header nav>ul>li:nth-child(2) .dropdown-wrap ul.sub-menu li.logout a {
    border-color: var(--primary-400)
}

header nav>ul>li:nth-child(2) .dropdown-wrap ul.sub-menu li.logout a,
header nav>ul>li:nth-child(2) .dropdown-wrap ul.sub-menu li.logout a span {
    color: var(--primary-400);

}

header nav>ul>li:nth-child(2) .dropdown-wrap ul.sub-menu li.info {
    text-transform: none;
    color: var(--neutral-300);
    padding-bottom: 1rem;
}

header nav>ul>li:nth-child(2) .dropdown-wrap ul.sub-menu li.info span {
    font-size: 1.25rem;
}

.dropdown {
    display: inline
}

header nav .dropdown {
    position: relative
}

header nav>ul>li {
    display: inline-block;
    float: right;
    margin: 0 0 0 1rem
}

header nav ul ul {
    /* margin: 20px 0;*/
    padding: 0;
    list-style: none;
}

header nav ul ul p {
    margin-bottom: 1.2rem;
}

header nav ul ul li.p6-overview {
    text-align: center;
}

header nav ul ul li.p6-overview .sub-head {
    margin: 0.2rem 0 2rem 0;
}

/* First Level */
header nav ul ul>li:nth-child(1)>div,
header nav ul ul>li:nth-child(2)>div {
    margin-top: 0;
}

header nav ul ul>li:first-child {
    padding: 0;
    border-bottom: 1px solid #bebebe;
}

header nav ul ul>li:first-child img {
    max-height: 80px;
    border-left: none;
}

header nav ul div>ul>li {
    padding: 1rem 0.5rem
}

header nav ul ul>li>a>img {
    width: 80%;
    padding: 0.2rem 0;
}

header nav ul ul>li>a.icon.icon-arrows-right::before {
    display: none;
}

/* Second Level */
header nav ul ul ul {
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

header nav ul ul ul li {
    border-bottom: 1px solid var(--neutral-250);
}

header nav ul ul ul li a {
    color: var(--neutral-400);
    line-height: 2.8em;
    display: inline;
    position: relative;
}

header nav ul ul li span {
    display: inline-block;
    color: var(--neutral-400);
}

header nav ul ul li span.head {
    display: none;
}

header nav ul ul li span.sub-head {
    font-size: 0.9rem;
}

#coaches [class*=col-] h3 {
    position: relative;
}

header nav ul ul .row.middle-line div:first-child {
    border-right: 1px solid #b2b2b2;
    height: 1.5rem
}

header nav a,
header nav a span {
    text-transform: none;
    font-weight: 400;
    color: var(--neutral-400);
}

header nav a span {
    text-align: right;
    margin-left: 0.3rem;
    font-size: 1rem;
    /*vertical-align: middle;
    transform: translateY(-0.1rem);*/
}

header nav a span[class*=p6-icon] {
    font-size: 1.4rem;
    position: relative;
}

header nav a span.icon_refresh {
    font-size: 0.9rem;
}

header nav a.nav-lehrer>img {
    margin: 0 0 0 0.3rem !important;
}

header nav a span.avatar-img {
    display: inline-flex;
    vertical-align: middle;
    align-items: end;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--neutral-100);
    padding: 3px;
    transition: all 0.25s ease-out;
}

header.set nav a span.avatar-img {
    width: 40px;
    height: 40px;
}

header nav a span.avatar-img>img {
    width: 100%;
    height: auto;
    image-rendering: optimizeSpeed;
    /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;
    /* Firefox                        */
    image-rendering: -o-crisp-edges;
    /* Opera                          */
    image-rendering: -webkit-optimize-contrast;
    /* Chrome (and eventually Safari) */
    image-rendering: optimize-contrast;
    /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;
    /* IE8+                           */
}

@media all and (max-width: 480px) {
    header nav a span.avatar-img {
        display: block;

    }
}

/*-------------------------------------- Main Navigation 2017 NEW -------------------------------------- */
header nav.navbar-default {
    background: none;
    border: none;
    margin: 0;
    z-index: 999;
}

header nav.navbar-default .navbar-nav {
    display: flex;
    flex-flow: row;
    height: 85px;
    align-items: center;
    transition: all 0.5s;
}

header nav.navbar-default .navbar-nav>li {
    margin: 0 0 0 0.5rem;
}

header nav.navbar-default .navbar-nav>li>a {
    font-weight: 400;
    padding: 0.4rem 0.5rem;
    transition: all 0.25s;
}

.navbar-default .navbar-nav>li>a:focus {
    color: var(--neutral-400);
    background-color: transparent;
}

@media all and (max-width: 768px) {
    header nav.navbar-default .navbar-nav>li {
        margin: 0;
    }

    header nav.navbar-default .navbar-nav>li>a {
        padding: 0.4rem 0.4rem;
    }
}


header.set nav.navbar-default .navbar-nav>li:last-child>a {
    padding: 0.25rem 0.8rem;
}

@media all and (min-width: 769px) {
    header.set nav.navbar-default .navbar-nav {
        height: 50px;
        padding: 0;
    }
}

header.set nav.navbar-default #logo {
    height: 1.8rem;
}

header nav.navbar-default .navbar-nav>.open>a,
header nav.navbar-default .navbar-nav>.open>a:focus,
header nav.navbar-default .navbar-nav>.open>a:hover {
    background: none;
    color: var(--primary-400);
}

header nav.navbar-default .dropdown-menu>li>a span {
    color: var(--neutral-300);
    text-align: center;
}

header nav.navbar-default .dropdown-menu {
    display: none;
    min-width: 280px;
    /*padding: 0;*/
    margin: 0;
    font-size: 1rem;
    text-align: center;
    list-style: none;
    color: var(--background-panel);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: 2px 2px 15px rgba(0, 0, 0, .175);
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .175);
    transition: all 0.25s;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

header nav.navbar-default .dropdown-menu li {
    line-height: normal;
    /*padding: 0.2rem 0;*/
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.2rem;
}

header nav.navbar-default .dropdown-menu li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

header nav.navbar-default .open>.dropdown-menu {
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: all;
    overflow: visible;
    padding: 1rem;
    display: block;
    border-radius: 0.5rem;
    max-height: calc(100vh - 60px);
    overflow: auto;
}

header nav.navbar-default .navbar-nav>li>a {
    color: var(--neutral-400);
    display: flex;
    align-items: center;
}

header nav.navbar-default .dropdown-menu>li>a:focus,
header nav.navbar-default .dropdown-menu>li>a:hover {
    background: none;
    color: var(--primary-400);
}

header nav.navbar-default .dropdown-menu .info {
    font-size: 1rem;
    color: var(--neutral-300);
    border: none;
    padding: 0.5rem;
}

header nav.navbar-default .dropdown-menu .info>span {
    font-size: 1.25rem;
    color: var(--neutral-400);
    font-weight: 400;
}

header nav.navbar-default .navbar-nav>li>a:hover,
header nav.navbar-default .navbar-nav>li>a:hover span,
header nav.navbar-default .navbar-nav>li>a.shop,
header nav.navbar-default .navbar-nav>li>a.shop span {
    color: var(--primary-400);
}

.back-arrow {
    display: none;
}

header nav.navbar-default .navbar-toggle {
    border: none;
    margin-right: 0;
}

header nav.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background: none;
}

header nav.navbar-default .navbar-toggle:focus .icon-bar,
.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: var(--primary-400);
}

/*!
 * bootstrap-navbar-toggle v0.9.0 (https://skywalkapps.github.io/bootstrap-navbar-toggle)
 * Copyright 2017 Martin Stanek
 * Licensed under MIT
 */
.navbar-toggle {
    line-height: 1;
}

.navbar-toggle.navbar-toggle-left {
    float: left;
    margin-left: 15px;
}

.navbar-toggle-label {
    display: inline-block;
    vertical-align: top;
    color: var(--neutral-300);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.navbar-toggle-label+.navbar-toggle-icon {
    margin-left: 4px;
}

.navbar-inverse .navbar-toggle-label {
    color: var(--white);
}

.navbar-toggle-icon {
    display: inline-block;
}

.navbar-toggle-icon>.icon-bar+.icon-bar {
    margin-top: 0;
}

/* Icon 1 */
.navbar-toggle-icon {
    position: relative;
    width: 22px;
    height: 14px;
    transform: rotate(0deg);
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.navbar-toggle-icon span {
    display: block;
    position: absolute;
    opacity: 1;
    left: 0;
    transition: 0.25s ease-in-out;
}

.navbar-toggle.collapsed .icon-bar:nth-child(1) {
    top: 0;
}

.navbar-toggle.collapsed .icon-bar:nth-child(2) {
    top: 6px;
}

.navbar-toggle.collapsed .icon-bar:nth-child(3) {
    top: 12px;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

#inAppNav span[class*=p6-icon] {
    color: var(--white);
}

.in-app-mobile-button {
    padding: 1rem;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.in-app-mobile-button .btn {
    margin: 0 0.5rem 0.5rem auto;
}

@media (max-width: 767px) {
    .teamlist li {
        padding: 1rem !important;
    }

    .mobile-button {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        color: var(--white);
        z-index: 3;
        text-align: center;
        background: var(--background-panel);
        padding: 1rem;
        pointer-events: all;
        opacity: 1;
        -webkit-box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1);
        -webkit-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        display: block;
        margin-bottom: 0;
    }

    header nav.navbar-default .dropdown-menu {
        padding: 0 16px !important;
        background-color: var(--neutral-100) !important;
    }

    header nav.navbar-default .navbar-collapse {
        position: absolute;
        width: 100vw;
        background: var(--background-panel);
        left: -5px;
        top: 100%;
        box-shadow: 0 7px 7px rgba(0, 0, 0, 0.15);
    }

    header nav.navbar-default .navbar-collapse.in {
        display: block;
    }

    span.glyphicon.glyphicon-option-vertical {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px),
(max-height: 810px) {
    .in-app-mobile-button {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        color: var(--white);
        z-index: 3;
        text-align: center;
        background: var(--background-panel);
        padding: 1rem;
        pointer-events: all;
        opacity: 1;
        -webkit-box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1);
        -webkit-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        display: block;
    }

    .in-app-mobile-button .btn {
        font-size: 1.25rem;
        margin: 0 0.5rem 0.5rem auto;
        transition: all 0.25s ease-in-out;
        opacity: 1;
    }
}

header nav.navbar #login-panel button.navbar-toggle {
    display: none;
}

/*------------------ App Mobile Browser ---------------------*/
header.in-app-mobile nav.navbar-default #login-panel button.navbar-toggle {
    padding: 0.3rem 1.5rem 0 2rem;
}

header.in-app-mobile nav.navbar-default {
    padding: 0 1rem;
    margin: 0;
}

header.in-app-mobile nav.navbar .navbar-header .navbar-toggle {
    display: none !important;
}

header.in-app-mobile nav.navbar .navbar-collapse {
    display: block !important;
    border: none;
    position: static;
    box-shadow: none;
    width: auto;
}

header.in-app-mobile nav.navbar .navbar-nav>li {
    margin: 0 0 0 1rem !important;
    float: right !important;
    border-bottom: none !important;
    display: none !important;
}

header.in-app-mobile nav.navbar .navbar-nav .dropdown-menu {
    position: absolute !important;
    right: 0 !important;
    float: none !important;
    margin-top: 0 !important;
    color: var(--background-panel) !important;
    border: 0 !important;
    -webkit-box-shadow: 0px 8px 8px rgba(0, 0, 0, .175) !important;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, .175) !important;
    top: 2rem;
}

@media all and (max-width: 599px) {
    header.in-app-mobile nav.navbar .navbar-nav .dropdown-menu {
        right: -20px !important;
        top: 3rem;
        left: -30px;
    }
}

header.in-app-mobile nav.navbar .navbar-nav>li.user {
    display: block !important;
}

header.in-app-mobile nav.navbar .navbar-nav>.open>a,
header.in-app-mobile nav.navbar .navbar-nav>.open>a:focus,
header.in-app-mobile nav.navbar .navbar-nav>.open>a:hover {
    background: var(--background-panel) !important;
}

header.in-app-mobile nav.navbar .back-arrow,
header.in-app-mobile nav.navbar #login-panel button.navbar-toggle {
    display: block;
    font-size: 1.5rem;
    padding: 0;
}

@media all and (max-width: 767px) {

    header.in-app-mobile nav.navbar .back-arrow,
    header.in-app-mobile nav.navbar #login-panel button.navbar-toggle {
        margin: 0.4rem 0;
    }
}

@media all and (max-width: 480px) {

    header.in-app-mobile nav.navbar .back-arrow,
    header.in-app-mobile nav.navbar #login-panel button.navbar-toggle {
        font-size: 2rem;
        margin: 0.5rem 0;
    }
}

header.in-app-mobile nav.navbar #logo.navbar-brand,
header.in-app-mobile nav.navbar #login-panel a.dropdown-toggle {
    display: none;
}

/*-------------------------------------- END of Main Navigation 2017 NEW -------------------------------------- */


.hero:after {
    content: attr(title) ' ';
    white-space: pre;
    position: absolute;
    font-size: 0.7rem;
    /*padding: 0.1rem 0.4rem;
	border-radius: 0.5rem;
	border: 1px solid #fff;*/
    color: var(--white);
    background: var(--background-panel);
    font-family: museo;
    font-weight: 300;
}

.classic .hero:after {
    border: none;
}

.classic-nav {
    display: none;
}

#coaches [class*=col-] h3:after {
    top: -1.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0.3rem 1rem;
}


header nav ul ul .new:after {
    top: -13px;
}

.hero:after {
    top: 110px;
    left: 20px;
    background: none;
    font-size: 1rem;
    opacity: 0.8;
}

header nav ul ul .flag img {
    height: 20px;
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin: -3px 0 0 10px;
    padding: 0;
}

.hero .l-flags {
    display: flex;
    justify-content: center;
    flex-flow: wrap;
}

.hero .l-flags img {
    margin: 0.4rem;
    height: 2.2rem;
    max-height: 50px;
    transition: all 0.25s ease-in;
    width: auto;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .08);
    border-radius: 50%;
}


.btn-standard,
.btn-primary,
.btn-default,
.hero-promo-info,
.button.prio-high {
    border: 1px solid var(--primary-400);
    transition: all 0.25s ease-in-out;
    background: var(--background-panel);
    position: relative;
}

.hero .hero-promo-info {
    color: var(--primary-400);
    background: var(--background-panel);
    font-weight: 600;
    font-size: 1.2rem;
    border-radius: 2rem;
    border: none;
    padding: 0.5rem 1rem;
    width: 100%;
}

.btn-standard.disabled {
    border-color: var(--neutral-400);
    opacity: 0.2;
    pointer-events: none;
}

.btn-standard:hover,
.btn-standard:focus {
    color: var(--primary-400)
}

.btn-primary,
.button.prio-high {
    color: var(--background-panel);
    background: var(--primary-400);
    border: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.button.prio-high:hover {
    color: var(--background-panel);
    background-color: var(--primary-300) !important;
    border-color: var(--primary-300) !important
}

.btn-default {
    border: 1px solid #aaa;
    text-transform: none;
}

.grey a.btn-standard {
    margin: 0;
}

a.btn-standard.android,
a.btn-standard.apple {
    font-size: 0.9rem;
    line-height: 1.8em;
}

a.btn-standard.android,
a.btn-standard.apple {
    position: relative;
}


a.btn-standard.android span:before,
a.btn-standard.apple span:before {
    content: "";
    height: 20px;
    width: 17px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 0.5em 0 -1em;
}

a.btn-standard.android span:before {
    background-image: url("../img/icon_android_robot.svg");
}

a.btn-standard.apple span:before {
    background-image: url("../img/icon_apple_ios.svg");
}

.step-options ul {
    padding: 0
}

.step-options .step {
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.25s ease-in-out;
}

.step-options .step.set {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
}

.step-options .btn-standard {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid transparent;
    background: var(--neutral-100);
    width: 100%;
}

.grey .step-options .btn-standard,
.grey .list-group .btn-standard {
    background: var(--background-panel);
}

#result .list-group .btn-standard {
    font-family: "proxima-nova";
    text-align: left;
    text-transform: none;
    background: var(--background-panel);
    border: 1px solid transparent;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    min-height: 70px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
}

#result .list-group .btn-standard img {
    width: 50px !important;
    height: 50px;
    float: left;
    opacity: 0.4;
    margin: 0 1rem 0 0 !important;
}

.step-options .btn-standard.set {
    color: var(--white);
    background-color: var(--primary-400);
    padding-right: 2rem;
}

.step-options .btn-standard.set::after {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-left: 2px solid transparent;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg) translateY(-72%);
    position: absolute;
    top: 50%;
    right: 1.2rem;
}

.step-options div[class*='col'] {
    border-left: 1px solid #eee;
}

.step-options div[class*='col']:first-child {
    border-left: none;
}

.step-options div[class*='col']:last-child .btn-standard.set {
    padding-right: 0.5rem;
}

.step-options div[class*='col']:last-child .btn-standard.set::after {
    content: "";
    border: none;
}

.matrix .row {
    line-height: 2rem;
    padding: 0.5rem 0
}

.matrix .btn-group {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.matrix .btn-group .btn {
    padding: 0.5rem 0rem;
    display: table-cell;
    float: none !important;
    font-weight: bold;
    border: 1px solid #eee;
    background: #eee;
}

.matrix .btn-group button.btn {
    padding: 0.5rem 0rem;
    display: inline-block;
    width: 25%;
}

.matrix .btn-group .btn::after {
    border: none;
}

.matrix .btn-group .btn.disabled,
.matrix .btn-group .btn[disabled] {
    color: var(--background-panel);
    opacity: 1;
    pointer-events: none;
    font-weight: 200;
    color: var(--neutral-250);
}

.matrix .btn-group .btn.active {
    background-color: var(--primary-400);
    border: none;
    color: var(--white);
    font-weight: bold;
}

.btn-group.voucher .btn-default {
    font-size: 1.5rem;
    border-radius: 1rem !important;
    margin: 0.5rem;
    padding: 2rem !important;
    float: none !important;
    display: inline-block;
    align-items: flex-start;
}

.btn-group.voucher .btn-default::after {
    border: none;
}

.btn-standard.glyphicon-shopping-cart {
    font-size: 1.25rem;
    background: var(--primary-400);
    color: var(--white);
}

.btn-group.voucher .btn-default:hover,
.btn-group.voucher .btn-default.active {
    background: var(--background-panel);
    color: var(--primary-400);
    border-color: var(--primary-400);
    outline: none;
}

.btn-group.voucher .form-control {
    display: inline;
    width: 10rem;
    font-size: 1.2rem;
    height: auto;
}

.voucher-link {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    color: var(--white);
    background: linear-gradient(90deg, rgba(252, 124, 0, 1) 0%, rgba(252, 124, 0, 0.7) 100%);
    /*background: var(--primary-400) url(/system/galleries/html/src/img/bg_action_xmas.jpg) no-repeat center center;*/
    background-size: cover;
    transition: all 0.25s ease-in-out;
    transform: translateY(85px);
    text-align: center;
    z-index: 1;
    position: relative;
}

.voucher-link.set {
    top: 40px;
}

.voucher-link:hover,
.voucher-link:focus {
    color: var(--white);
}

.voucher-link span {
    vertical-align: text-top
}

.banner-top {
    background-size: 60%;
    background-position: 100% 65%;
    background-repeat: no-repeat;
    border-radius: 0.6rem;
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 25rem;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    padding: 0.4rem 1rem;
    line-height: 1.2rem;
    font-size: 1rem;
    font-weight: normal;
    text-align: left;
    color: var(--neutral-400);
    z-index: 2;
    transition: all 0.25s ease-in-out
}

.banner-top span {
    display: block
}

.banner-top span:first-child {
    color: var(--primary-400)
}

.banner-top::before {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.6rem;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/var(--neutral-100)+0,f2f2f2+100&1+40,0+80,0+100 */
    background: -moz-linear-gradient(left, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 40%, rgba(242, 242, 242, 0) 80%, rgba(242, 242, 242, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 40%, rgba(242, 242, 242, 0) 80%, rgba(242, 242, 242, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 40%, rgba(242, 242, 242, 0) 80%, rgba(242, 242, 242, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--neutral-100)', endColorstr='#00f2f2f2', GradientType=1);
    /* IE6-9 */


    z-index: -1;
}

header.set .banner-top {
    padding: 0.1rem 0.8rem 0.2rem 0.8rem;
    top: 0.3rem;
    background-position: 140% 57%;
}

header.set .banner-top::before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/var(--neutral-100)+0,f2f2f2+100&1+40,0+80,0+100 */
    background: -moz-linear-gradient(left, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 0) 100%, rgba(242, 242, 242, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 0) 100%, rgba(242, 242, 242, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 0) 100%, rgba(242, 242, 242, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--neutral-100)', endColorstr='#00f2f2f2', GradientType=1);
    /* IE6-9 */
}

header.set .banner-top span {
    font-size: 0.8rem;
    font-weight: normal;
    line-height: 1rem;
    display: inline-block;
}

.btn-group.register .btn {
    text-transform: none;
    background: var(--background-panel);
    border-color: var(--neutral-250);
    padding: 1rem
}

.btn-group.register .btn.active {
    color: var(--primary-400);
    background: var(--neutral-100);
}

.btn-group.register .btn.active span {
    color: var(--primary-400);
}

.btn-group.register .btn span {
    font-size: 2rem;
    color: var(--neutral-300);
}


/* form */
label {
    font-weight: 300
}

/*Form Wizard*/
.bs-wizard {
    border-bottom: 0;
    padding: 0 15px;
}

.bs-wizard>.bs-wizard-step {
    padding: 0;
    position: relative;
}



.bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
    color: var(--neutral-300);
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 5px;
    height: 1.35rem;
}

.bs-wizard>.bs-wizard-step .bs-wizard-stepnum span[class=icon_cart]::before {
    position: absolute;
    font-size: 1.5rem;
    top: -3%;
}

.bs-wizard>.bs-wizard-step .bs-wizard-info {
    color: var(--neutral-300);
    font-size: 0.8rem;
    display: none
}

.bs-wizard>.bs-wizard-step>.bs-wizard-dot {
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: var(--primary-400);
    color: var(--primary-400);
    top: 56%;
    left: 0%;
    border-radius: 50%;
    font-size: 0
}

/*.bs-wizard > .bs-wizard-step div.bs-wizard-dot { display: none; left: auto; right: 0 }*/
.bs-wizard>.bs-wizard-step:last-child .bs-wizard-dot {
    display: block;
    left: auto;
    right: 0;
}

.bs-wizard>.bs-wizard-step:last-child .bs-wizard-stepnum {
    text-align: right;
    margin-bottom: 5px;
}

/*.bs-wizard > .bs-wizard-step:last-child div.bs-wizard-dot::before { content: 'Fertig'; position:absolute; top: -35px; right: 0; font-size: 1rem; font-weight: normal; z-index: 2; }*/
.bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
    content: attr(title);
    background: none;
    color: var(--white);
    border-radius: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.bs-wizard>.bs-wizard-step>.progress {
    position: relative;
    border-radius: 0px;
    height: 3px;
    box-shadow: none;
    margin: 0.8rem 0;
}

.bs-wizard>.bs-wizard-step>.progress>.progress-bar {
    width: 0px;
    box-shadow: none;
    background: var(--primary-400);
}

.bs-wizard>.bs-wizard-step.complete .bs-wizard-stepnum,
.bs-wizard>.bs-wizard-step.active .bs-wizard-stepnum {
    color: var(--primary-400);
}

.bs-wizard>.bs-wizard-step.complete>.progress>.progress-bar,
.bs-wizard>.bs-wizard-step.active>.progress>.progress-bar {
    width: 100%;
    background: var(--primary-400);
}

/*.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 50%;}*/
.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot {
    background-color: var(--neutral-100);
    color: var(--neutral-300)
}

.bs-wizard>.bs-wizard-step.disabled>.bs-wizard-dot:after {
    color: var(--neutral-300);
}

.bs-wizard>.bs-wizard-step.disabled a.bs-wizard-dot {
    pointer-events: none;
}

/*END Form Wizard*/

.input-group-btn:last-child>.btn {
    padding-right: 1.5rem;
    /* text-transform: uppercase; */
    font-size: 1rem;
}

.input-group-btn:last-child>.btn:after {
    display: none
}

span[class*=icon-span]::before {
    width: auto;
    right: 0;
}

.input-group-btn span.buttonText {
    display: block;
    height: 1.4rem
}

#login-form form {
    white-space: nowrap;
}

#login-form .form-control {
    margin-bottom: 1rem;
    display: block;
    width: 100%;
    min-width: 15rem;
    text-align: center
}

#login-form .login-content a,
#login-panel .login-content a {
    margin-bottom: 0.5rem;
    display: block;
    text-align: center
}

#login-form .login-content button {
    margin-bottom: 0
}

.form-control {
    font-size: 1rem;
    height: auto;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: inline-block;
    margin-bottom: 1rem;
}

form .btn {
    height: auto;
}

.select-payment .btn {
    width: 100%;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1rem;
    flex-direction: column;
    border-radius: 1rem;
}

.select-payment .btn:focus,
.select-payment .btn:active {
    border-color: var(--primary-400)
}

form label {
    font-weight: 300;
}

.form-horizontal .control-label {
    text-align: left
}

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
    position: static;
    margin: auto;
}

input[type=checkbox],
input[type=radio] {
    vertical-align: unset;
    margin: 0
}

/*  CONTENT */
section.gray {
    /*background: rgba(0, 0, 0, 0) -webkit-linear-gradient(180deg, var(--neutral-100) 0%, #ffffff 50%) repeat scroll 0 0;
	background: rgba(0, 0, 0, 0) linear-gradient(180deg, #eee 0%, #f8f8f8 50%) repeat scroll 0 0;*/
    border: none;
    background: var(--neutral-100);
    /*margin-top: -2px;*/
}

section.gray .well {
    background: var(--background-panel);
}

.cd-main-content {
    /* set a min-height and a z-index to be sure that the main element completely covers the lateral menu */
    min-height: 100%;
    position: relative;
    z-index: 1;
}

section.switchInfo {
    display: none;
}

.slider li p span {
    display: none;
}

ol {
    /* 1. Ebene */
    counter-reset: item;
    list-style: none;
    padding: 0 0 0 20px;
}

ol>li {
    font-weight: bold;
    font-size: 1.25rem;
}

ol.norm>li {
    font-weight: 300;
    font-size: 1rem;
    margin: 0 0 1rem 0;
}

ol li ol {
    /* 2. Ebene */
    padding: 20px 0 20px 30px;
}

ol li li {
    font-weight: 300;
    padding: 0 0 20px 0;
    font-size: 1rem;
}

ol li li:last-child {
    margin: 0;
}

ol li li ol {
    /* 3. Ebene */
    padding: 20px 0 0 30px;
}

ol li li li:last-child {
    margin: 0;
    padding-bottom: 0;
}

ol li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
    margin-left: -50px;
    margin-right: 10px;
    display: inline-block;
    width: 40px;
    text-align: right;
}

.row [class*="col-"].nopadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.loading span {
    display: inline-block;
    background: var(--neutral-300);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    margin: 0 0.2rem;
    animation-duration: 1s;
}

.loading span:nth-child(1) {
    animation-delay: 0s;
}

.loading span:nth-child(2) {
    animation-delay: .25s;
}

.loading span:nth-child(3) {
    animation-delay: 0.5s;
}

.arrow-back {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0.3rem 0;
}

.arrow-back span {
    font-size: 2rem;
    color: var(--primary-400);
    display: inline-block;
}

/* Search-Panel adaptations */
#search-panel .row form {
    font-size: 1.25rem;
    padding: 1rem;
    background: none;
    border-radius: 0.5rem;
    margin: 0;
}

#search-panel .row form button {
    font-size: 1.25rem;
}

#search-panel .row form button .glyphicon-filter {
    color: var(--primary-400);
}

#search-panel .row form button.collapsed .glyphicon-filter {
    color: var(--neutral-300);
}

#search-panel .row form fieldset {
    border-bottom: 2px solid var(--neutral-250);
}

#search-panel .row form button {
    border: none;
    background: none;
    padding: 0;
    color: var(--neutral-300);
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-40%);
}

#search-panel .row form input {
    color: var(--neutral-400);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    margin: 0;
}

#search-filter .btn-group {
    display: block;
    margin-right: -0.5rem;
}

#search-filter .btn-group .btn {
    flex-basis: 14.2%;
    max-height: 123px;
    margin-left: 0px;
    float: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    padding: 0 0.5rem 0 0;
    margin: 0 0 1.5rem 0
}

#search-filter .btn-group #show-all-language .btn {
    flex-basis: 12.5%;
    max-height: 106px;
}

#search-filter .btn-group .btn div {
    overflow: hidden;
    font-family: "proxima-nova", sans-serif;
    /*border: 1px solid #fff;*/
    display: block;
    background: var(--background-panel);
    text-align: center;
    -wekit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

#search-filter .btn-group .btn div span {
    display: block;
    padding: 0.4rem 0rem 0rem 0rem;
    letter-spacing: normal;
    color: var(--neutral-400);
    font-weight: 300;
    font-size: .7rem;
    /* text-overflow: ellipsis; */
    /* white-space: nowrap; */
    text-transform: none;
    overflow: hidden;
    height: 45px;
    line-height: 0.7rem;
}

#search-filter .btn-group .btn.active div {
    color: var(--primary-400);
    border: 1px solid var(--primary-400);
    font-weight: 500;
    overflow: hidden;
    position: relative;
}

#search-filter .btn-group .btn img,
#search-filter .btn-group .btn div.glyphicon {
    display: block;
    width: 100%;
    height: auto;
}

#search-filter .btn div {
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

#search-filter .btn:hover div {
    -webkit-transform: translate(-0.1rem, -0.1rem) scale(1.025);
    -webkit-box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.25);
    transform: translate(-0.1rem, -0.1rem) scale(1.025);
    box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.25)
}

#search-filter .btn-group #show-all-location .btn div {
    min-height: 123px;
    padding-top: 1.5rem !important;
}

#search-filter .btn-group #show-all-location .btn div span {
    white-space: inherit;
    text-overflow: inherit;
}

#search-filter .btn-group #show-all-publisher .btn div img {
    margin: 6px 0;
}

#search-filter .btn-group .btn div.glyphicon {
    background: none;
    position: static;
    right: auto;
    top: auto;
    transform: none;
    font-size: 1.5rem;
    margin: 0 0 0 1rem;
    width: 2rem;
}

#search-filter .btn-group .btn.active div span {
    color: var(--white);
    background: var(--primary-400);
    font-weight: bold
}

#search-filter ul.nav-pills {
    margin: 1rem 0;
    width: 100%;
}

#search-filter ul.nav-pills li:first-child {
    text-align: left;
}

#search-filter ul.nav-pills li {
    padding: 0;
    margin: 0;
    text-align: center;
}

#search-filter ul.nav-pills li:last-child {
    text-align: right;
}

#search-filter ul.nav-pills li a {
    padding: 0.8rem 1rem;
    text-align: center;
    width: 98%;
    display: inline-block
}

#search-filter ul.nav-pills li.active a::before {
    position: absolute;
    bottom: -25px;
    left: 50%;
    content: '';
    width: 30px;
    height: 30px;
    background: var(--primary-400);
    -webkit-transform: rotate(45deg) translateX(-22px);
    transform: rotate(45deg) translateX(-22px);
    z-index: -1
}

#search-filter ul.nav-pills li.set a::after {
    position: absolute;
    top: 50%;
    right: 2rem;
    content: '';
    width: 0.6rem;
    height: 1.2rem;
    border: 2px solid #fff;
    border-left: none;
    border-top: none;
    -webkit-transform: rotate(35deg) translateY(-80%);
    transform: rotate(35deg) translateY(-80%);
    z-index: 0
}

#search-panel .list-group-item {
    border: none;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
    /*border: 3px solid var(--neutral-100);*/
}

#search-panel .list-group-item h1 {
    font-size: 1.875rem;
    margin-bottom: 0.5rem;
}

#search-panel .list-group-item h2 {
    font-size: 1.25rem;
}

#search-panel .list-group .text-comming-soon {
    color: rgb(252, 124, 0);
    font-weight: bold;
    white-space: nowrap;
    margin-right: 20px;
    line-height: 1rem !important;
}

#search-panel .list-group .btn-comming-soon {
    border: 1px solid var(--primary-400);
    color: var(--primary-400);
}

#search-panel .list-group.books .btn {
    margin-bottom: 0;
}

#search-panel .list-group.books {
    margin-bottom: 1rem;
}

#search-panel .list-group.books .list-group-item {
    border-top: 0.2rem solid #fff;
    margin-bottom: 0;
    width: 100%;
}

#search-panel .list-group-item {
    padding: 0;
    background: none;
}

#search-panel .list-group-item .row {
    background: var(--neutral-100);
    position: relative;
}

#search-panel .list-group.books .list-group-item .row {
    align-items: center;
}

#search-panel .list-group.books .list-group-item>.row {
    padding: 0.5rem;
}

#search-panel .list-group.books .list-group-item>.row img {
    border-radius: 0.5rem;
}

#search-panel .list-group.books .list-group-item .flex-container>div {
    margin: 0;
}

#search-panel .list-group-item.voucher .row {
    background: var(--background-panel);
    border-bottom: 2px solid #eee !important;
}

.gray #search-panel .list-group-item .row {
    background: var(--background-panel);
    position: relative;
}

.gray #search-panel .list-group.books .list-group-item {
    border-top: 0.2rem solid var(--neutral-100);
}

#search-panel .list-group.books .list-group-item [class*=col-] {
    line-height: 4rem;
}

#search-panel .list-group.books .list-group-item:last-child {
    border-bottom: 0;
}

#search-panel h1.header-search-result {
    display: inline-block;
    font-size: 1rem;
    margin: 0 0 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}

.gray .list-group.books .list-group-item .btn {
    margin: 0;
    background: none;
    font-size: 0.9rem;
}

.gray .list-group.books .list-group-item .btn.btn-primary {
    color: var(--primary-400);
}

.list-group.books .list-group-item .btn.btn-primary,
.button.prio-high {
    padding: 0.5rem 1.5rem;
}

.list-group.books .list-group-item .btn.btn-primary::after {
    display: none;
}

.list-group.books .list-group-item .col-xs-3.text-right span[class*=icon] {
    margin: 0 0.3rem;
    color: var(--neutral-400);
}

.list-group.books .list-group-item .info-panel {
    background: var(--background-panel) !important;
    padding: 0.6rem 0.5rem;
    display: block;
    margin: 0 0 0.8rem 0;
    line-height: normal !important;
}

.list-group.books .list-group-item .info-panel span {
    line-height: normal !important;
    color: var(--neutral-300);
}

.list-group.books .list-group-item .info-panel span[class*=icon] {
    font-size: 2rem;
}

.list-group.books .list-group-item .book-title {
    color: var(--neutral-400);
    font-weight: normal;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-group.books .list-group-item .book-publisher {
    color: var(--neutral-300);
    line-height: 1rem;
    display: block;
    margin-top: -1rem;
}

.list-group.books .list-group-item .book-icons span {
    color: var(--neutral-400);
}

.list-group.books .list-group-item .book-title span {
    margin-right: 1rem;
    vertical-align: middle;
    line-height: 1rem;
}

.list-group.books .form-group {
    margin: 0rem;
    vertical-align: middle;
}

.list-group.books .form-group input,
.list-group.books .form-group button {
    display: inline-block;
}

[role=button],
.inside[role=button],
[role=button] .row::before,
.inside[role=button]::before {
    -webkit-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

[role=button]:hover,
.inside[role=button]:hover {
    -webkit-transform: translate(-0.1rem, -0.1rem) scale(1.025);
    -webkit-box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.25);
    transform: translate(-0.1rem, -0.1rem) scale(1.025);
    box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.25)
}

/*[role=button] .row::before, .inside[role=button]::before { content: ''; font-size: 3rem; color: var(--white); text-align: center; padding: 3rem 0; position: absolute; z-index: 1; height: 100%; width: 100%; background: rgba(255,255,255,0.8); display:block; opacity: 0}
[role=button]:hover .row::before, .inside[role=button]:hover::before { opacity: 0.5; }
*/
#search-panel .list-group.books .form-group span[class*=icon_] {
    color: var(--neutral-300);
    font-size: 1.25rem;
    vertical-align: middle
}

#search-panel .list-group-add {
    margin: 0 -15px;
}

#search-panel .list-group-add [class*=col-] div.inside {
    background: var(--neutral-100);
    text-align: center;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

#search-panel .list-group-add [class*=col-] div.inside p {
    text-overflow: ellipsis;
    height: 4rem;
    overflow: hidden;
    padding: 0 0.5rem;
    font-size: .9rem;
}

#search-panel .list-group-add [class*=col-] div.inside img:nth-child(1) {
    width: 100%;
}

#search-panel .list-group-add [class*=col-] div.inside .first,
#search-panel .first {
    position: relative
}

#search-panel .list-group-add [class*=col-] div.inside .first::before,
#search-panel .first::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+60,0.1+100 */
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.06) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#33000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

#search-panel .list-group-add [class*=col-] div.inside img:nth-child(2) {
    width: 3rem !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

#search-results .list-group-item .row [class*=col-]:nth-child(2) {
    /*padding: 1rem 15px;*/
    position: static;
}

#search-results .list-group-item img {
    margin: 0;
    width: 100%;
    height: auto;
}

.short-item-descr {
    margin-bottom: 0;
    overflow: hidden;
    max-height: 7rem;
}

#search-results .list-group-item .row [class*=col-]:nth-child(2) img:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 50px;
}

#search-results .list-group-item .row [class*=col-]:nth-child(2) img:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 110px;
}

#show-all-language,
#show-all-publisher,
#show-all-location {
    display: flex;
    padding-bottom: 0;
    flex-wrap: wrap;
    justify-content: center;
}

#search-filter .icon-arrows-down::before {
    pointer-events: auto;
    cursor: pointer;
    display: inline-block;
    font-size: 2.5rem;
    color: var(--primary-400);
    -webkit-transform: rotate(180deg);
    -webkit-transition: all 0.5s ease-in-out;
    transform: rotate(180deg);
    transition: all 0.5s ease-in-out
}

#search-filter .icon-arrows-down.collapsed::before {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

#search-filter .open-items {
    background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 1) 80%);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem 0 0 0;
    pointer-events: none;
    height: 3rem;
}

#search-filter .open-items span {
    position: absolute;
    bottom: -2rem;
}

#search-filter .tab-pane {
    position: relative;
    margin: 0 0 1rem 0
}

#cartModal .modal-title {
    color: var(--primary-400)
}

.cart-price {
    font-weight: normal;
    font-size: 1rem;
    white-space: nowrap
}

.cart-price-sum {
    font-weight: normal;
    font-size: 1.5rem
}

.cart-price-tax {
    display: block;
    font-weight: 300;
    font-size: 0.8rem
}

.cart-row-sum {
    border-color: var(--primary-400);
    margin: 0.5rem 0 1.5rem 0
}

.seals img {
    max-height: 100px !important;
    width: auto !important;
    margin: 0 1rem;
}

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    /*padding-right: 10px;
    padding-left: 10px;*/
}

.col-xs-15 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

@media print {
    ol>li {
        font-weight: bold;
        font-size: inherit;
    }

    ol li li {
        font-weight: normal;
        padding: 0 0 30px 0;
        font-size: inherit;
    }
}

ul.featureSlider div:first-child {
    padding-left: 5rem;
}

ul.featureSlider div:last-child {
    padding-right: 5rem;
}

.order-list {
    padding: 0 1.25rem;
    margin: 1em 0 2rem 0;
}

.order-list>li {
    font-weight: 300;
    font-size: 1rem;
}

.feature-list {
    list-style-type: none;
    padding: 0;
    margin: 1em auto;
    width: 80%;
}

.compare-table.alt ul.feature-list {
    list-style-type: none;
    padding-left: 2rem;
    margin: 1em auto;
    width: auto;
}

.feature-list li {
    margin: 0.4em 0;
    text-align: left;
    /*white-space: nowrap;*/
    color: var(--neutral-400);
    /*padding-left: 2rem;*/
    position: relative;
}

.feature-list li img {
    width: 35px !important;
    height: 35px !important;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1em 0 0;
}

.feature-list li p {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.9rem;
    margin: 0;
    white-space: normal;
}

.feature-list li span[class*=icon] {
    margin: 0 0.5rem 0 -1.8rem;
    color: var(--primary-400);
    vertical-align: middle;
}

.feature-list li::before {
    font-family: 'ElegantIcons';
    content: "\4e";
    color: var(--primary-400);
    vertical-align: middle;
    margin: 0 .5rem 0 -1.5rem;
}

ol.list-steps li {
    font-weight: 300;
    font-size: 1rem;
    margin: 1rem;
}

ul.actions {
    cursor: default;
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

ul.actions li {
    display: inline-block;
    padding: 0 1.5em 0 0;
    vertical-align: middle;
    position: relative;
}

ul.actions li:last-child {
    padding: 0 0 0 0;
}

ul.actions li img {
    height: 70px;
}

ul.actions li a {
    display: inline-block;
}

/* disable appstore links */
ul.actions li:nth-child(2) a {
    pointer-events: none;
    cursor: default;
}

ul.actions li:nth-child(2) a::before {
    content: 'coming soon';
    position: absolute;
    display: block;
    background: rgba(0, 0, 0, 0.8);
    width: 91%;
    height: 100%;
    color: var(--primary-400);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2.8rem;
    white-space: nowrap;
    -webkit-border-radius: 0.5rem;
    border-radius: 0.5rem;
}

ul.actions li a.link {
    pointer-events: all;
    cursor: pointer;
}

ul.actions li a.link::before {
    content: "";
    background: none;
}

.product-selection {
    padding: 0;
    background: var(--background-panel);
    border: 2px solid var(--primary-400);
    border-radius: 1em;
    display: inline-block;
    list-style-type: none;
    width: 40%;
}

.product-selection>li {
    padding: 0.3em 5em 0.3em 2em;
    position: relative;
    text-align: left
}

.product-selection>li:last-child {
    border-bottom: none;
}

.product-selection li>a {
    color: #626261;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 2em;
    transition: all 0.25s ease-in-out;
}

.product-selection li.open>a {
    color: var(--primary-400);
}

.product-selection li>a[class*='icon-']:before {
    font-size: 2.5rem;
    color: var(--primary-400);
    position: absolute;
    right: 10px;
    top: 8px;
    transition: all 0.25s ease-in-out;
}

.product-selection li.open>a[class*='icon-']:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.product-selection li>a span {
    display: block;
    font-size: 0.75rem;
}

.product-selection ul.sub-menu {
    display: none;
    padding: 0;
    margin: 0 -2em 0 0;
    text-align: left;
    list-style-type: none;
}

.product-selection ul.sub-menu li {
    border-bottom: 1px solid #bebebe;
    padding: 1em 0;
}

.product-selection ul.sub-menu li:last-child {
    border-bottom: none;
}

.product-selection ul.sub-menu li>a {
    color: #626261;
    font-size: 1.5rem;
    line-height: 0.5em;
}

div[class*='col-'] img {
    max-width: 100%;
    height: auto;
}

.partnerLogos {
    display: table;
    width: 100%;
}

/*.partnerLogos div[class*='col-'] { display: table-cell; padding: 1rem; text-align: center; vertical-align: middle; float: none; }*/
.partnerLogos div[class*='col-'] img {
    width: auto;
    max-height: 100px;
}

.select-payment div[class*='col-'] img {
    width: 100%;
    height: auto !important;
    max-width: 60%;
}
@media all and (max-width: 480px) {
    .select-payment div[class*='col-'] img {
        max-width: 100%;
    }
}

.shariff-button.info {
    display: none !important;
}

.shariff li a {
    border-radius: 2rem !important;
    text-align: center !important;
}

.shariff li a:hover {
    transform: none !important;
    color: var(--white) !important;
    box-shadow: none !important
}

.shariff .orientation-horizontal li {
    max-width: none !important;
}

.shariff li .share_count,
.shariff li .share_text {
    font-size: 1rem !important;
    line-height: 2rem !important
}

.shariff li,
.shariff li a {
    height: 2.5rem !important;
    font-size: 1.6rem;
}

.shariff li .fa {
    width: 2rem !important;
}

.shariff .googleplus {
    display: none;
}

.shariff-wrap ul {
    list-style-type: none;
    display: flex;
    padding: 0;
    justify-content: center;
}

.shariff-wrap ul li a {
    background: no-repeat;
    border-radius: 50%;
    margin: 0.5rem;
    color: var(--neutral-400);
    width: 55px !important;
    height: 55px !important;
    transition: all 0.25s ease-in-out;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.shariff-wrap ul li a:hover {
    color: var(--primary-400);
    box-shadow: none;
}

.shariff-wrap ul li a .share_text {
    display: none;
}

@media (min-width: 768px) {
    .shariff-button.whatsapp {
        display: none;
    }

    header .navbar-header .navbar-mobile {
        display: none !important;
    }
}

section.float-action-buttonvideo-section {
    background: none;
}

.video-section .pattern-overlay {
    background-color: rgba(60, 60, 60, 0.5);
    /*padding: 110px 0 32px;*/
    min-height: 496px;
    /* Incase of overlay problems just increase the min-height*/
}

#back-to-top {
    cursor: pointer;
    position: fixed;
    text-align: center;
    display: none;
}

/*.float-action-button {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--white);
    z-index: 2;
    text-align: center;
    background: var(--neutral-100);
	padding: 1rem;
	transition: all 0.25s ease-in-out;
	pointer-events: all;
	opacity: 1;
}
.float-action-button.set {
	bottom: -2rem;
	opacity: 0;
	pointer-events: none;
}
.float-action-button a {
	font-size:  1.25rem;
	margin: auto;
}*/

.float-action-button {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--white);
    z-index: 3;
    text-align: center;
    background: var(--neutral-100);
    padding: 1rem;
    pointer-events: all;
    opacity: 1;
    -webkit-box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}

.float-action-button .btn {
    margin: auto;
    transition: all 0.25s ease-in-out;
    opacity: 1;
}

.float-action-button #companyButton {
    display: none;
    transform: translateY(200%);
}

.float-action-button.set #testButton {
    opacity: 0;
    /*pointer-events: none;*/
}

.float-action-button.set #companyButton {
    display: inline-block;
    transform: translateY(0%);
}

#testButton.set {
    height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    width: 0;
}

@media (max-width: 767px),
(max-height: 810px) {
    .float-action-button.set {
        transform: translateY(0px) !important;
    }

    #selectStudent a {
        opacity: 0;
    }

    .hero.alt .roleLinks {
        display: none;
    }
}

section.joker {
    background: url(/system/galleries/html/src/img/background_lehrerjoker.png) no-repeat bottom right;
    height: 100%;
}

section.joker .container {
    padding-bottom: 100px;
}

section.joker .form-group.submit {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: var(--background-panel);
    margin: -10px 0;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

section.joker .form-group.submit .btn {
    width: 95%;
}

/**
 MEDIA QUERIES  and (min-resolution: 1.5dppx) **/
@media (max-width: 1199px) {

    /* #search-filter .btn-group .btn { width: 33.3%; margin-bottom: 0.2rem; }*/
    .bg-fix {
        background-position: 4rem 50%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 50%;
    }

    .publisher-logos-smal embed {
        height: 35px;
        margin: 0.5em
    }

    .panel.promo .panel-body {
        vertical-align: middle;
    }

    ul.actions li:nth-child(2) a::before {
        line-height: 3.4rem;
    }

    .bs-wizard>.bs-wizard-step:last-child div.bs-wizard-dot::before {
        top: -28px;
    }

    #search-panel .list-group-add [class*=col-] div.inside img:nth-child(1) {
        height: 308px;
    }
}

@media (max-width:991px) {
    .banner-top {
        border-radius: 0;
        width: auto;
        margin: 0 -20px;
        position: relative;
        padding: 1.5rem 1.5rem;
        transform: translateX(0);
        left: 0;
        font-size: 1.2rem;
        z-index: 3
    }

    .banner-top span {
        display: block
    }

    .banner-top::before {
        border-radius: 0;
    }

    #heroShop #productToggle .panel:nth-child(1)::before {
        width: 60px;
        height: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;
        right: -30px;
    }

    #heroShop #productToggle .panel:nth-child(1)::after {
        width: 30px;
        height: 60px;
        -webkit-border-radius: 0 60px 60px 0;
        border-radius: 0 60px 60px 0;
        right: -30px;
    }

    .hero.alt .heroSlider li:nth-child(3) h1 {
        display: none
    }

    /*.hero.alt .heroSlider li:nth-child(3) .img-container {height: 10vh}*/
    .hero .app_img img {
        margin: 0 auto;
    }

    .hero .app_txt {
        text-align: center;
    }

    header,
    .dropdown-wrap {
        position: sticky !important;
    }

    /*section > .container { padding: 20px; }*/


    .publisher-logos-smal embed {
        height: 30px;
        margin: 0.5em
    }

    /*#cd-menu-trigger{right:-29px;}
	div[class*='col-'] { text-align: center;}*/
    .product-selection {
        width: 90%;
    }

    .partnerLogos div[class*='col-'] img {
        max-width: 100%;
    }

    .hero-white-background #background_wrap {
        background-position: 75% center;
    }

    #coaches h3 {
        font-size: 2rem;
    }

    #coaches div[class*='col-'] {
        padding: 2rem 0;
    }

    .hero-white-background .hero .table-cell {
        width: 60%;
        padding: 2rem
    }

    .step-options div[class*='col'] {
        border: none;
        border-top: 2px solid #eee;
        margin: 2rem 0 0 0;
        padding: 2rem 0 0 0;
    }

    .step-options div[class*='col']:first-child,
    .step-options div[class*='col']:first-child::after {
        border: none;
        margin: 0;
    }

    .step-options .btn-standard {
        font-size: 1.2rem
    }

    .step-options .btn-standard.set::after {
        -webkit-transform: rotate(135deg) translateY(108%);
        transform: rotate(135deg) translateY(108%);
    }

    .step-options div[class*='col']::after {
        content: "";
        display: inline-block;
        width: 0.9rem;
        height: 0.9rem;
        background: var(--background-panel);
        border-left: 2px solid transparent;
        border-right: 2px solid #eee;
        border-top: 2px solid #eee;
        border-bottom: 2px solid transparent;
        position: absolute;
        left: 50%;
        top: 0.5rem;
        -webkit-transform: rotate(135deg) translateY(108%);
        transform: rotate(135deg) translateY(108%) translateX(-50%);
    }

    .certificate img {
        height: 120px;
    }

    .hero .certificate {
        top: 40px;
        right: -20px;
    }

    .hero .certificate img {
        width: 120px;
        height: 120px;
    }

    .hero .seal-panel {
        display: block;
        position: static;
        margin: 1.5rem 0 0 0;
    }

    .hero .seal-panel.left img {
        margin-right: 1rem;
    }

    .hero .seal-panel img {
        height: 120px;
    }

    #search-panel .list-group-add [class*=col-] div.inside img:nth-child(1) {
        height: 220px;
    }

    .panel.promo.smal {
        width: 150px;
        height: 150px;
    }

    /** NAVIGATION MOBILE **/
    /*header { height: 50px;}*/
    header nav .dropdown-wrap .dropdown-wrap {
        position: static !important;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        -webkit-transition: -webkit-transform 0.4s ease 0s, visibility 0s ease 0s;
        transition: transform 0.4s ease 0s, visibility 0s ease 0s;
        visibility: visible;
    }

    header nav.alt>ul li:first-child {
        display: block;
    }

    header nav.alt>ul>li:nth-child(2) {
        display: none;
    }

    header nav>ul>li>a .cd-menu-text {
        line-height: 50px;
    }

    header.set nav>ul>li>a .cd-menu-text {
        line-height: 40px;
    }

    header nav>ul>li .container {
        padding: 20px;
    }

    header nav.alt>ul>li:first-child .container {
        padding: 0;
    }

    header .dropdown-wrap {
        top: 0;
        opacity: 0;
        display: none
    }

    header .dropdown-wrap ul {
        padding: 0
    }

    header nav ul ul li.p6-overview {
        text-align: left;
    }

    header nav ul ul li.p6-overview .sub-head {
        margin: 0.2rem 0;
    }

    header nav ul ul {
        padding: 0 20px;
    }

    header nav ul div>ul>li {
        border-bottom: 1px solid #bebebe;
        padding: 0.5em 0 !important;
        position: relative;
        float: none !important;
        width: 100% !important
    }

    header nav ul ul>li ul {
        display: none
    }

    header nav ul ul>li:hover ul {
        display: block;
    }

    header nav ul ul>li:last-child {
        border-bottom: none;
    }

    header nav ul ul li>a {
        color: #626261;
        font-size: 1.6rem;
        font-weight: 300;
        display: block
    }

    header nav.navbar-default .dropdown-menu>li>a {
        font-size: 1rem
    }

    header nav ul ul ul li>a {
        color: #626261;
        font-size: 1.6rem;
        font-weight: 300;
        display: inline-block
    }

    header nav ul ul ul li>a:before,
    header nav ul ul li>a[class*='icon-']:before {
        font-size: 2rem;
        color: var(--primary-400);
        float: right;
        line-height: 2.8rem;
        transition: all 0.25s ease-in-out;
    }

    header nav ul ul li>a[class*='icon-'].submenu-open:before {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    header nav ul ul>li>a.icon.icon-arrows-right::before {
        display: block;
    }

    header nav ul ul li span {
        display: block;
    }

    header nav ul ul li span.head {
        font-size: 1.6rem;
        display: block;
    }

    header nav ul ul li span.sub-head {
        font-size: 0.8rem;
    }

    header nav ul ul li span span.glyphicon {
        float: right;
        color: var(--primary-400);
        font-size: 1.5rem;
        margin-top: -20px;
    }

    header nav ul ul img {
        display: none;
    }

    header nav ul ul ul.sub-menu {
        /*display: none;*/
        padding: 0 10px 0 15px;
        margin: 0;
    }

    header nav ul ul ul.sub-menu li:last-child {
        border-bottom: none;
    }

    header nav ul ul ul.sub-menu li>a {
        color: #626261;
        font-size: 1rem;
    }

    header nav ul ul .new:after {
        top: 15px;
        left: 180px;
        font-size: 0.8rem;
    }

    #search-panel .list-group .text-comming-soon {
        display: block;
        text-align: right;
        margin: 1rem 0 0 0;
    }

}

@media all and (max-width : 767px) {
    .breadcrumb {
        margin: 50px 0 0
    }

    .gradient.ad .flex-container>* {
        flex: 0 0 46%;
        margin: 0 0.4rem;
    }

    .gradient.ad {
        margin: 0.5rem 0;
    }

    .gradient.ad .container {
        padding: 0;
    }

    .gradient.ad .container .background:before,
    .gradient.ad .container .background {
        display: none;
    }

    .gradient.ad .container .click {
        margin-bottom: 1rem;
        max-width: none;
        min-height: 15rem;
    }

    .gradient.ad .cart-label,
    .gradient.ad .container .click .icon_close {
        font-size: 1.8rem;
    }

    .gradient.ad .container .click .icon_close {
        right: 1rem;
    }

    header nav.navbar-default .navbar-nav {
        flex-flow: wrap;
        height: auto;
        margin: 0;
    }

    header nav.navbar-default .navbar-nav>li {
        flex: 1 100%;
        margin: 0 0 0 0;
        float: none;
        border-bottom: 1px solid #ddd;
    }

    header nav.navbar-default .navbar-nav>li:last-child {
        border-bottom: none;
    }

    header nav.navbar-default .navbar-nav>li>a {
        font-weight: 400;
        line-height: normal;
        padding: 0.5rem 0;
        text-align: center;
        font-size: 1.25rem;
        display: flex;
        justify-content: center;
    }

    header nav.navbar-default .navbar-nav .dropdown-menu {
        overflow: hidden;
    }

    header nav.navbar-default .navbar-nav .open>.dropdown-menu {
        max-height: calc(100vh - 300px);
        overflow: auto;
    }

    header nav.navbar-default .navbar-nav .dropdown-menu>li>a {
        font-size: 1rem !important;
    }

    header nav.navbar-default .navbar-nav>.open>a,
    header nav.navbar-default .navbar-nav>.open>a:focus,
    header nav.navbar-default .navbar-nav>.open>a:hover {
        background: var(--neutral-100);
        color: var(--primary-400);
    }

    #heroShop #productToggle {
        display: block
    }

    #heroShop #productToggle .panel {
        display: block;
        border: none
    }

    #heroShop #productToggle .panel:nth-child(2)::after {
        position: static;
        line-height: 1rem;
        background: var(--background-panel);
    }

    #heroShop #productToggle .panel:nth-child(1)::after,
    #heroShop #productToggle .panel:nth-child(1)::before {
        display: none
    }

    #heroShop #productToggle .panel>img {
        display: none
    }

    #heroShop #productToggle .panel.content {
        background: var(--background-panel);
        -webkit-box-shadow: none;
        box-shadow: none;
        margin: 0 0 1rem 0;
        z-index: auto;
    }

    #heroShop #productToggle .my_planHeader {
        margin: 0;
        border: none;
        padding: 0 0 4rem 0;
    }

    #heroShop #productToggle .feature-list li span[class*=icon] {
        margin: 0.1rem 0.5rem 0 6rem
    }

    #heroShop #productToggle .panel .my_planHeader .premium-icon {
        position: static;
        width: 5rem;
    }

    section.table {
        display: block;
        border-top: 1rem solid #fff;
    }

    section.table .table-cell {
        display: block;
        padding: 1.5rem;
        height: auto;
    }

    section.table .table-cell.img {
        width: 100vw;
        height: 18rem;
    }

    .icon-print {
        margin: 0 0 0 0
    }

    .bs-wizard {
        padding: 0 15px
    }

    .bs-wizard>.bs-wizard-step {
        width: 50%;
        float: left;
    }

    .bs-wizard>.bs-wizard-step>.progress {
        margin: 0
    }

    .bs-wizard>.bs-wizard-step .bs-wizard-stepnum {
        line-height: 2rem
    }

    .bs-wizard>.bs-wizard-step>.bs-wizard-dot:after {
        opacity: 1
    }



    .bs-wizard>.bs-wizard-step.disabled {
        display: none;
        text-align: right
    }

    .bs-wizard>.bs-wizard-step.active+.bs-wizard-step.disabled {
        display: block
    }

    .bs-wizard>.bs-wizard-step.active .bs-wizard-stepnum span {
        visibility: visible
    }

    .bs-wizard>.bs-wizard-step .bs-wizard-dot {
        display: none !important;
    }

    .bs-wizard>.bs-wizard-step.complete {
        display: none
    }

    .input-group-btn .btn {
        font-size: 1rem;
    }

    /*.bs-wizard > .bs-wizard-step.active .bs-wizard-stepnum span[class=icon_cart] { height: 0; }*/

    #search-panel .list-group-add [class*=col-] div.inside img:first-child {
        width: 100%;
        margin: 0;
    }

    #promoModal .modal-body .buttons div[class*='col-'] {
        width: 50%;
        float: left;
    }

    .gradient .container .background {
        opacity: 0.3;
    }

    section.text-img .container div[class*='col-'] img {
        width: 60%;
    }

    section.text-img .container {
        text-align: center;
    }

    footer h2,
    footer h3 {
        text-align: center;
    }

    footer ul {
        padding: 0;
        text-align: center;
    }

    .disturber,
    .disturber.scroll {
        position: absolute;
        top: 55px;
        right: -210px;
        font-size: 0.8rem;
    }

    .gradient .row {
        margin: 0
    }

    .gradient .container {
        padding: 20px
    }

    .gradient .container .background {
        height: 85px;
    }

    .gradient .container h1 {
        margin-top: 0rem;
        text-shadow: -1px 1px #fff;
    }

    .gradient .container p {
        margin-top: 2rem;
    }

    .hero-white-background #background_wrap {
        background-position: 80% center;
    }

    #coaches h3 {
        font-size: 3rem;
    }

    #coaches div[class*='col-'] {
        border-bottom: 2px solid #eee;
        padding: 2rem 0;
    }

    #coaches div[class*='col-']:last-child {
        border-bottom: none;
    }

    .compare-table [data-toggle="tooltip"] {
        left: auto;
        right: 1rem;
        font-size: 1.5rem;
    }

    .hero:after {
        top: 70px;
    }

    #coaches [class*=col-] h3:after {
        font-size: 1rem;
        top: -2.5rem;
    }

    .hero {
        min-height: 350px
    }

    .hero .certificate {
        top: 0px;
        right: -20px;
        position: static;
        text-align: center;
    }

    .hero .certificate img {
        width: 100px;
        height: 100px;
    }

    .hero .seal-panel {
        top: 40px;
    }


    .voucher-link {
        text-align: center;
        transform: translateY(50px);
        font-size: 1.25rem;
        width: 100%
    }

    .voucher-link.set {
        top: 0px;
    }

    .classic-nav {
        display: block;
    }

    .btn-default,
    .btn-standard,
    .btn-primary,
    #search-panel .list-group .btn,
    .in-app-mobile-button .btn {
        width: 100% !important;
        font-size: 1.2rem;
        padding: 0.5rem 1.5rem !important;
    }

    #search-panel .list-group-add [class*=col-] div.inside img:nth-child(1) {
        height: 228px;
    }

    .btn-group.voucher {
        display: block
    }
}

@media (max-width : 767px) and (orientation : landscape) {
    .hero .seal-panel {
        display: none;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero h3,
    .hero .btn-standard {
        font-size: 1rem;
    }
}

@media (max-width: 599px) {
    .step-options .btn-standard {
        white-space: normal
    }

    #search-panel img {
        margin: auto
    }

    #search-filter .btn-group .btn {
        flex-basis: 33.33%;
        font-size: 1rem;
    }

    #promoModal .modal-body {
        height: 555px;
    }

    ul.actions li {
        padding: 0;
    }

    ul.actions li img {
        height: 40px;
        margin: 0 0 0.5em 0;
    }

    section img {
        width: 100%;
        margin: 1em 0;
    }

    section.joker img {
        margin: 0.5em 0;
    }

    section .hero img {
        width: auto;
        margin: 1em 0;
    }

    /*.hero { padding: 80px 30px 60px 30px; }*/

    .product-selection {
        width: 90%;
    }

    ul.featureSlider div[class*='col-xs'] {
        clear: left;
        width: 100%;
        text-align: center;
        padding: 0 2rem;
    }

    ul.featureSlider div[class*='col-xs'] img {
        width: 90% !important;
    }

    .bx-wrapper .bx-controls-direction a:before {
        top: 35%;
    }

    .partnerLogos div[class*='col-'] img {
        max-width: 100%;
    }

    .hero-white-background .hero .table-cell {
        width: 100%;
        padding: 2rem
    }

    /*.disturber { position: absolute; top: -70px; right: -370px; padding: 10rem 20rem 1rem 20rem;font-size: 1rem; }*/
    .hero h1 {
        font-size: 1.5rem;
    }

    .promoSlider li {
        font-size: 1.2rem;
    }

    .hero h3 {
        font-size: 1rem;
    }

    ul.actions li:nth-child(2) a::before {
        width: 100%;
        height: 86%;
        line-height: 2.5rem;
    }

    #search-panel .list-group .text-comming-soon {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .teamlist li img {
        height: 150px;
        width: 150px;
    }

    /*.row > .col-xs-12 { padding: 0 }
	.banner-top { border-radius: 0; position: static; width: 100%;transform: translateX(0%); margin: 4rem 0 -4rem 0 }*/
    .banner-top span {
        display: block
    }

    .status-wrapper {
        margin-bottom: 0 !important
    }

    .banner-top::before {
        border-radius: 0;
    }

    .hero.alt {
        padding: 1rem 0rem 1rem 0rem;
    }

    .hero.alt .container {
        padding: 1rem 10px;
    }

    .hero.alt .panel {
        padding: 0 0 0.5rem 0;
        margin: 0 0 1rem 0;
    }

    .hero.alt .panel.active::after {
        display: none;
    }

    .hero.alt .panel h2 {
        margin: 0;
    }

    .hero.alt .panel .img-container {
        min-height: 15vh;
        margin: 0 0 0.5rem 0;
    }

    #selectUserForm .panel .img-container {
        min-height: 9vh;
        margin-bottom: 0.5rem;
        /*display: none;*/
    }

    .hero.alt .user-teaser {
        min-height: 3rem;
        padding: 0rem;
        margin: -2rem auto 1rem auto;
    }

    .hero.alt h3,
    .hero.alt h4,
    .hero.alt p {
        font-size: 1rem;
    }
    #search-panel .list-group.books .list-group-item .flex-container>div {
        margin: 0;
        padding: 0;
        width: auto;
    }
    #search-panel .list-group.books .list-group-item [class*=col-] {
        line-height: 3rem;
        padding: 0;
    }

    #search-panel>.row form {
        margin: 1rem 0;
    }

    #search-results .list-group-item img:first-child {
        width: 100%
    }

    #search-results .list-group-item img:nth-child(2) {
        max-width: 60px;
        right: auto;
        left: 0;
    }

    #search-results .list-group-item img:nth-child(3) {
        top: 0;
        right: 61px;
        max-width: 74px;
    }

    #search-results .list-group-item .row [class*=col-]:nth-child(2) {
        padding: 2.5rem 0.5rem 3rem 0.5rem
    }

    #search-results .list-group-item p {
        margin-bottom: 0
    }

    #search-filter .btn-group .btn {
        font-size: 1rem;
    }

    ul.nav-pills li a span {
        font-size: 2rem;
        display: block;
        margin: 0 0 0.5rem 0;
        -webkit-transform: translateX(2px);
        transform: translateX(2px)
    }

    #promoModal .modal-body .buttons div[class*='col-'] {
        width: 100%;
        float: none;
    }

    #promoModal .modal-body {
        max-width: 680px;
        height: 480px;
        position: relative;
        background: url(/system/galleries/html/src/img/football_website_promo_smal.jpg) no-repeat left top;
        background-size: cover;
        background-position: 0 10px;
    }

    #promoModal .modal-body .buttons {
        position: absolute;
        bottom: 10px;
        left: 0;
    }

    #promoModal .modal-body .buttons img {
        width: 75% !important;
        margin: 0 0 0.5rem 0;
    }

    #promoButton {
        left: 0;
        top: 50%;
        -webkit-transform: rotate(-90deg) translateY(-292%);
        transform: rotate(-90deg) translateY(-292%);
        font-size: 1rem;
        font-weight: 600;
        background: none;
        border: none;
        padding: 0.2rem 0.5rem;
    }

    #promoButton img {
        width: 20px !important;
    }

    html,
    body {
        font-size: 0.8rem
    }

    p,
    ul li,
    ul li a,
    div,
    h4 {
        font-size: 1rem;
        font-weight: 400;
    }

    a.btn-standard.android,
    a.btn-standard.apple {
        margin: 0 0 0.25em 0;
    }

    .hero.alt h3 {
        display: block;
    }

    .hero h3.switchInfo {
        display: none;
    }

    section>.container,
    .subpage .container {
        padding: 10px;
    }

    #search section>.container {
        padding: 0px 10px 20px 10px;
    }

    section.text-img .container div[class*='col-'] img {
        width: 100%;
    }

    section.switchInfo {
        display: block;
    }

    .modal-footer {
        padding: 0.8rem 1rem;
    }

    /*img{width:100%;}*/
    header nav>ul>li>a {
        width: auto;
    }

    /*header nav > ul > li > a .cd-menu-text { line-height: 50px;}*/
    .disturber,
    .disturber.scroll,
    .disturber h4 {
        display: none;
        font-size: 1rem;
    }

    div[class*='col-'] img {
        width: 100%;
        /*max-height: inherit !important*/
    }

    .container .background {
        height: 30%;
    }

    .partnerLogos div[class*='col-'] {
        display: block
    }

    .partnerLogos div[class*='col-'] img {
        max-width: 60%;
    }

    header nav ul ul .new:after {
        top: 12px;
        left: 140px;
        font-size: 0.8rem;
    }

    #coaches [class*=col-] h3:after {
        top: -3.5rem;
    }

    .btn-group.voucher .btn-default {
        display: block;
    }

    #search-panel .list-group .btn {
        margin: 0.5rem 0;
    }

    .sub-logo {
        width: 80%;
    }

    .hero .certificate {
        top: -20px;
        right: 0;
    }

    .hero .certificate img {
        width: 100px;
        height: 100px;
    }

    .hero .seal-panel {
        position: static;
    }

    .hero .seal-panel img {
        height: 100px;
    }

    .hero .seal-panel.left img:last-child {
        margin: 0;
    }

    ul.actions li {
        display: block;
    }

    .panel.promo {
        width: 220px;
        height: 220px;
    }

    .compare-table .my_planHeader {
        border: none;
    }

    .compare-table .my_planTitle {
        display: block !important;
    }

    .compare-table.alt .no-padding:first-child .my_planPrice {
        border: none;
        border-bottom: 3px solid #fff;
    }

    [class*=col-xs-] .btn[data-toggle]::after {
        display: none;
    }

    [class*=col-xs-] .btn[data-toggle] {
        padding: 0.2rem
    }

    #search-panel .list-group-add [class*=col-] div.inside img:nth-child(1) {
        height: 220px;
    }

}

@media (max-width: 320px) {
    #promoModal .modal-body {
        height: 360px;
    }

    .hero {
        padding: 80px 10px 0px 10px;
    }

    .hero h1 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .hero h3 {
        font-size: 1.25rem;
    }

    .hero.alt .panel .img-container {
        min-height: 18vh;
        margin: -0.5rem -0.5rem 0.5rem -0.5rem;
    }


    .bx-wrapper .bx-controls-direction a:before {
        top: 30%;
        font-size: 5rem;
    }

    .disturber,
    .disturber.scroll {
        display: none;
        position: absolute;
        top: 58px;
        right: -205px;
        font-size: 0.5rem;
    }

    header nav>ul>li>a {
        right: 10px;
    }

    .bx-wrapper {
        margin: 0 auto;
    }

    .sub-logo {
        width: 100%;
    }


    .hero .seal-panel.left img:last-child {
        margin: 0;
    }

    #search-panel .list-group-add [class*=col-] div.inside img:nth-child(1) {
        height: 200px;
    }
}



@media (min-width:992px) {
    header nav>ul>li:last-child>a {
        display: none;
    }

    header nav>ul>li:last-child>.dropdown-wrap {
        background: none;
        height: auto;
        position: static;

        -webkit-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;

        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
        transform: translateY(0%);
        display: block;
        width: auto;
        z-index: auto;
    }

    /*header nav > ul > li:last-child > .dropdown-wrap ul,*/
    header nav>ul>li:last-child>.dropdown-wrap li {
        display: inline-block;
        padding: 0;
        line-height: 85px;
        border: none;
        font-size: 1.25rem;
        text-transform: uppercase;
        margin: 0 0 0 0.8rem;
        transition: all 0.25s ease-in-out;
        position: relative
    }

    header.set nav>ul>li:last-child>.dropdown-wrap li,
    header.set nav>ul>li>a .cd-menu-text {
        line-height: 40px !important;
    }

    header nav>ul>li:last-child>.dropdown-wrap li .dropdown-wrap {
        padding: 1rem;
        line-height: normal;
        font-size: 1rem;
        text-transform: none;
        -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        min-width: 280px;
        opacity: 0;
        transform: translateY(-1rem);
        pointer-events: none
    }

    /*	header nav > ul > li:last-child > .dropdown-wrap li a,
	header nav > ul > li:last-child > .dropdown-wrap li a span { font-weight: 300; margin:0; color: var(--neutral-400); }*/
    header nav>ul>li:last-child>.dropdown-wrap li a.shop,
    header nav>ul>li:last-child>.dropdown-wrap li a.shop span,
    header nav>ul>li:last-child>.dropdown-wrap li a:hover,
    header nav>ul>li:last-child>.dropdown-wrap li a:hover span {
        color: var(--primary-400);
    }

    .hero .app_img img {
        float: right;
    }

    .hero .app_txt h1 {
        margin-top: 0px;
    }

    .sub-logo {
        width: 50%;
    }

    header nav>ul>li:last-child>.dropdown-wrap li {
        margin: 0 0 0 1rem;
    }

    ul.actions li a {
        margin: 0;
    }
}

@media (min-width: 1200px) {

    html,
    body {
        font-size: 1.25rem
    }

    .disturber {
        font-size: 0.75rem
    }

    .sub-logo {
        width: 30%;
    }

    header nav>ul li a .cd-menu-icon::before {
        bottom: 6px;
    }

    header nav>ul li a .cd-menu-icon::after {
        top: 6px;
    }

}

/* For Testing: */
body::before {
    content: "xs";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    background-color: #000;
    color: var(--white);
    display: none;
}

@media (min-width : 768px) {
    body::before {
        content: "sm";
    }
}

@media (min-width : 992px) {
    body::before {
        content: "md";
    }

    .col-sm-height {
        display: table-cell;
        float: none;
        height: 100%;
        position: relative;
    }

    .overview .col-sm-height {
        padding-bottom: 2.8rem;
    }

    .overview .btn-standard {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }
}

@media (min-width : 1200px) {
    body::before {
        content: "lg";
    }
}

@media (max-height : 720px) and (orientation : landscape) {
    .open>.dropdown-wrap {
        transform: translateY(0.5rem) !important;
    }

    .banner-top {
        padding: 0.1rem 0.8rem 0.2rem 0.8rem;
        top: 0.3rem;
        background-position: 140% 57%;
    }

    .banner-top::before {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/var(--neutral-100)+0,f2f2f2+100&1+40,0+80,0+100 */
        background: -moz-linear-gradient(left, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 0) 100%, rgba(242, 242, 242, 0) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 0) 100%, rgba(242, 242, 242, 0) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(242, 242, 242, 1) 0%, rgba(242, 242, 242, 1) 70%, rgba(242, 242, 242, 0) 100%, rgba(242, 242, 242, 0) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--neutral-100)', endColorstr='#00f2f2f2', GradientType=1);
        /* IE6-9 */
    }

    .banner-top span {
        font-size: 0.8rem;
        font-weight: normal;
        line-height: 1rem;
        display: inline-block;
    }

    header {
        /*height: 40px;*/
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    header #logo,
    header .navbar-brand {
        height: 1.8rem;
        width: auto;
    }

    header header nav>ul>li>a .cd-menu-text {
        line-height: 40px;
    }

    header nav>ul>li:last-child>.dropdown-wrap li,
    header nav>ul>li>a .cd-menu-text {
        line-height: 40px !important;
    }

    .hero.alt {
        border-collapse: collapse;
    }

    .hero.alt>.table-cell {
        /*vertical-align: inherit;
		padding: 0rem 0.25rem 0rem 0.25rem;*/
        padding: 0;
    }

    .hero.alt .panel {
        margin: 0rem 0 1rem 0;
    }

    .hero.alt h1 {
        /*margin: 0 0 0 0;*/
        font-size: 2.25rem;
    }

    .hero.alt h1 {
        margin: 0 0 0.5rem 0;
    }

    .hero.alt h3 {
        margin: 0 0 0.8rem 0;
        font-size: 1rem;
    }

    .hero.alt .panel p {
        margin: 0 0 0 0;
    }


    .hero.alt .row.panel .img-container {
        /*height: 290px;*/
        background-position: top;
    }

    .float-action-button a {
        font-size: 1rem;
    }

    /*.scroll-down { display: none }*/

    .hero .disturber {
        transform: rotate(45deg) translate(30%, -160%)
    }
}

.important.checkbox {
    padding: 1rem;
    border: 1px solid var(--primary-400);
    border-radius: 0.5rem;
    color: var(--primary-400);
}

.important.checkbox label:after {
    content: '';
    display: table;
    clear: both;
}

.important.checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid var(--primary-400);
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.important.checkbox .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 15%;
}

.important.checkbox label input[type="checkbox"] {
    display: none;
}

.important.checkbox label input[type="checkbox"]+.cr>.cr-icon {
    opacity: 0;
}

.important.checkbox label input[type="checkbox"]:checked+.cr>.cr-icon {
    opacity: 1;
}

.important.checkbox label input[type="checkbox"]:disabled+.cr {
    opacity: .5;
}

.modal-body .panel-group .panel.panel-default .panel-heading a::after {
    content: " ";
    border-color: #666 #666 transparent transparent;
    border-style: solid;
    border-width: 1px;
    display: inline-block;
    height: 0.8rem;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    -webkit-transform: rotate(135deg) translateY(28%) translateX(-92%);
    transform: rotate(135deg) translateY(28%) translateX(-92%);
    width: 0.8rem;
    z-index: 1;
}

.modal-body .panel-group .panel.panel-default.active>.panel-heading .panel-title a {
    color: #fc7c00;
}
.modal-body .panel-group .panel.panel-default .panel-heading a[aria-expanded="true"]::after {
    border-color: #fc7c00 #fc7c00 #fff #fff;
    -webkit-transform: rotate(-45deg) translateY(8%) translateX(58%);
    transform: rotate(-45deg) translateY(8%) translateX(58%);
    margin-top: 2px;
}

dialog {
    width: initial;
    height: initial;
    background: 0;
    border: 0;
}