html {
    scroll-behavior: smooth;
}

a:focus {
    color: #e0a700 !important;
}

.margin-top-10 {
    margin-top: 10px;
}
.margin-top-15 {
    margin-top: 15px;
}
.margin-top-30 {
    margin-top: 30px;
}
.margin-top-50 {
    margin-top: 50px;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
.margin-bottom-15 {
    margin-bottom: 15px;
}
.margin-bottom-30 {
    margin-bottom: 30px;
}
.margin-bottom-50 {
    margin-bottom: 50px;
}
.margin-bottom-200 {
    margin-bottom: 200px;
}

.padding-top-10 {
    padding-top: 10px;
}
.padding-top-15 {
    padding-top: 15px;
}
.padding-top-30 {
    padding-top: 30px;
}
.padding-bottom-10 {
    padding-bottom: 10px;
}
.padding-bottom-15 {
    padding-bottom: 15px;
}
.padding-bottom-30 {
    padding-bottom: 30px;
}

.disable-column-padding-right {
    padding-right: 0px !important;
}

#chouf-snapcode {
    border-style: none !important;
    height: auto !important;
    max-width: 170% ;
    vertical-align: middle ;
    position: absolute ;
    top: 45px ;
    left: -70px ;
    z-index: 9;
}

@media screen and (max-width: 320px) {
    #chouf-snapcode {
        max-width: 50% !important;
        top: -70px !important;
        left: 25vw !important;
    }

    #snapchat-header-title {
        margin-bottom: -20px;
    }

    #chouf-snapcode-tag {
        text-align: left !important;
    }

    #chouf-snapcode-right-button-add {
        margin-top: -3vh;
    }

    .team-box-left .team-result {
        margin-top: 10vh;
        margin-bottom: 17vh;
        width: 100% !important;
        right: 0 !important;
        padding: 10px 20px 20px 20px !important;
        text-align: center;
    }
    .team-box-left .team-result h4 {
        font-size: 15px !important;
        line-height: 1.3;
    }

    .team-box-left .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    .team-box-right .team-result {
        width: 100% !important;
        left: 0 !important;
        padding: 10px 20vw !important;
        text-align: center;
    }
    .team-box-right .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    #add-snapchat-button-lg {
        display: none;
    }
    #add-snapchat-button {
        display: inline-block;
    }
}


@media screen and (min-width:321px) and (max-width: 375px) {
    #chouf-snapcode {
        max-width: 50% !important;
        top: -90px !important;
        left: 25vw !important;
    }

    #chouf-snapcode-tag {
        text-align: left !important;
    }

    #chouf-snapcode-right-button-add {
        margin-top: -3vh;
    }

    .team-box-left .team-result {
        margin-top: 10vh;
        margin-bottom: 17vh;
        width: 100% !important;
        right: 0 !important;
        padding: 5px 20px 20px 20px !important;
        text-align: center;
    }
    .team-box-left .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    .team-box-right .team-result {
        width: 100% !important;
        left: 0 !important;
        padding: 10px 20vw !important;
        text-align: center;
    }
    .team-box-right .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    #add-snapchat-button-lg {
        display: inline-block;
    }
    #add-snapchat-button {
        display: none;
    }
}

@media screen and (min-width: 376px) and (max-width: 449px) {
    #chouf-snapcode {
        max-width: 50% !important;
        top: -125px !important;
        left: 27vw !important;
    }

    #chouf-snapcode-tag {
        text-align: left !important;
    }

    #chouf-snapcode-right-button-add {
        margin-top: -3vh;
    }

    .team-box-left .team-result {
        margin-top: 10vh;
        margin-bottom: 17vh;
        width: 100% !important;
        right: 0 !important;
        padding: 15px 20px 20px 20px !important;
        text-align: center;
    }
    .team-box-left .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    .team-box-right .team-result {
        width: 100% !important;
        left: 0 !important;
        padding: 10px 20vw !important;
        text-align: center;
    }
    .team-box-right .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    #add-snapchat-button-lg {
        display: inline-block;
    }
    #add-snapchat-button {
        display: none;
    }
}

@media screen and (min-width: 450px) and (max-width: 767px) {
    #chouf-snapcode {
        max-width: 30%;
        top: -105px;
        left: 35vw ;
        margin-top: -30px;
    }

    #chouf-snapcode-tag {
        text-align: left !important;
    }

    #chouf-snapcode-right-button-add {
        margin-top: -3vh;
    }

    .team-box-left .team-result {
        margin-top: 10vh;
        margin-bottom: 17vh;
        width: 100% !important;
        right: 0 !important;
        padding: 15px 20px 20px 20px !important;
        text-align: center;
    }
    .team-box-left .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    .team-box-right .team-result {
        width: 100% !important;
        left: 0 !important;
        padding: 10px 20vw !important;
        text-align: center;
    }
    .team-box-right .team-result:after {
        left: 0 !important;
        transform: none !important;
    }

    #add-snapchat-button-lg {
        display: inline-block;
    }
    #add-snapchat-button {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #add-snapchat-button-lg {
        display: none;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    #chouf-snapcode {
        max-width: 180%;
        position: absolute !important;
        top: 80px !important;
        left: -65px !important;
    }

    #add-snapchat-button-lg {
        display: none;
    }
    #add-snapchat-button {
        display: inline-block;
    }
}

@media screen and (min-width: 1201px) {
    #add-snapchat-button-lg {
        display: none;
    }
    #add-snapchat-button {
        display: inline-block;
    }
}

@media screen and (max-width: 991px) {
    .dez-topbar-left {
        display: none;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .dez-topbar-left {
        display: none;
    }
    #chouf-snapcode {
        max-width: 180%;
        position: absolute !important;
        top: 5px !important;
        left: -52px !important;
    }
    #chouf-snapcode-title {
        font-size:13px;
    }
    #chouf-snapcode-right-button-add {
        float:right !important;
    }
    #chouf-snapcode-tag {
        display: none;
    }
    .team-box-left .team-result {
        padding: 10px !important;
    }
}

.tp-bgimg {
    filter: blur(6px) !important;
}

.team-result {
    height: 30% !important;
}

.normal-link, .normal-link:hover {
    background-color: transparent !important;
}

.normal-link {
    color: lightgrey !important;
}
.normal-link:hover {
    color:white !important;
}

#account-nav-menu {
    padding-right: 20px;
}

@keyframes beatHeartEffect {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.01);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.subscribe-button {
    color: #fff;
    background-color: #333;
    border-color: #333;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 30px;
    transition-duration: 0.4s;
}
.subscribe-button:hover {
    color: #333 !important;
    background-color: #fff;
    border-color: #fff;
}

.small-text-note {
    font-style: italic;
    font-size: 8px;
}

.center-justified {
    text-align: justify;
    margin: 0 auto;
    width: 15em;
}

.panel-default>.panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #e4e5e7;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.panel-default>.panel-heading a {
    display: block;
    padding: 10px 15px;
    webkit-box-shadow: 0px 2px 43px -19px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 2px 43px -19px rgba(0,0,0,0.75);
    box-shadow: 0px 2px 43px -19px rgba(0,0,0,0.75);
}

.panel-default .ac-first {
    padding-top: 3px;
}

.panel-default>.panel-heading a:after {
    content: "";
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: right;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
}

.panel-default>.panel-heading a[aria-expanded="true"] {
    background-color: #eee;
}

.panel-default>.panel-heading a[aria-expanded="true"]:after {
    content: "\2212";
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.panel-default>.panel-heading a[aria-expanded="false"]:after {
    content: "\002b";
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.accordion-option {
    width: 100%;
    float: left;
    clear: both;
    margin: 15px 0;
}

.accordion-option .title {
    font-size: 20px;
    font-weight: bold;
    float: left;
    padding: 0;
    margin: 0;
}



.accordion-option .toggle-accordion {
    float: right;
    font-size: 16px;
    color: #6a6c6f;
}

.ac-chouf a {
    position: relative;
    padding: 0!important;
}

.ac-chouf a[aria-expanded="true"]{
    background-color: #fff!important;
}

.ac-chouf a::after {
    position: absolute!important;
    right: 16px!important;
    top: 50%!important;
    margin-top: -10px;
    color: #333;
    font-size: 20px;
    font-weight: bold!important;
}

.ac-padd {
    display: block;
    width: 100%;
    height: 5px;
}

.ac-img {
    text-align: center;
    line-height: 60px;
}

.ac-id {
    position: relative;
    display: block;
    float: left;
    width: 70px;
    height: 60px;
    line-height: 60px;
    margin-right: 40px;
    background-color: #ddd;
    text-align: center;
}

.ac-id span {
    font-size: 42px;
    color: #333;
}

.ac-id::before {
    content: "";
    height: 60px;
    position: absolute;
    right: -15px;
    transform: skew(-15deg);
    width: 25px;
    background:  #ddd;
}

.ac-offer {
    float: left;
    position: relative;
    width: 85%;
    height: 60px;
    line-height: 60px;
    background-color: #FBBC05;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    color: #333;
    font-family: 'Allerta Stencil', sans-serif;
}

.ac-offer > span {
    font-size: 12px;
    line-height: 1px;
}

.ac-offer::after {
    content: "";
    height: 41px;
    position: absolute;
    top: 10px;
    right: -21px;
    transform: rotate(45deg);
    width: 43px;
    background: #ddd;
}

.ac-offer::before {
    content: "";
    height: 42px;
    position: absolute;
    left: -20px;
    top: 9px;
    transform: rotate(-45deg);
    width: 40px;
    background: white;
}

.ac-extended {
    float: left;
    width: 15%;
    height: 60px;
    background-color: #ddd;
}

.ac-title {
    font-weight: bold;
    color: #000;
}

.ac-other {
    text-transform: uppercase;
    color: #868686;
    letter-spacing: -0.5px;
    font-weight: bold;
    font-size: 15px;
}

.ac-info {
    display: block;
    color: #FBBC05;
    font-weight: bold;
    font-size: 15px;
}

@media (max-width: 990px) {
    .ac-img,
    .ac-extended,
    .ac-offer::after,
    .ac-offer::before,
    .ac-info,
    .ac-id::before,
    .ac-chouf a::after {
        display: none!important;
    }
    .ac-first {
        width: 70%;
        float: left;
        padding-left: 30px;
    }
    .ac-first .ac-id {
        margin-right: 5px;
    }
    .ac-second {
        width: 30%;
        float: left;
    }
    .ac-second .ac-offer {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .ac-offer {
        padding-top: 10px;
        line-height: normal;
    }
    .ac-other {
        font-size: 12px;
    }
}

.cc_container a,
.cc_container a:visited {
    color: #00afea;
}
.cc_container a:hover,
.cc_container a:focus {
    color: #51d3ff;
}

/* Styles für "Verstanden"-Button */
.cc_container .cc_btn,
.cc_container .cc_btn:visited {
    color: #fff;
    background-color: #00afea;
}
.cc_container .cc_btn:hover,
.cc_container .cc_btn:focus {
    color: #fff;
    background: #51d3ff;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    #navLinksBlock {
        margin-top: -10vh !important;
    }
}
@media screen and (min-width: 1200px) {
    #navLinksBlock {
        margin-top: 2vh !important;
    }
}

#mCSB_1, #mCSB_1:focus {
    outline: none;
}

.badge-success {
    color: #fff;
    background-color: #17c671; }
.badge-success[href]:hover, .badge-success[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #129857; }

.badge-danger {
    color: #fff;
    background-color: #c4183c; }
.badge-danger[href]:hover, .badge-danger[href]:focus {
    color: #fff;
    text-decoration: none;
    background-color: #97122e; }


/* SVG Check Animation in account page */

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

.checkmark-error {
}
.checkmark-error .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}
.checkmark-error .path.circle {
    -webkit-animation: dash 0.9s ease-in-out;
    animation: dash 0.9s ease-in-out;
}
.checkmark-error .path.line {
    stroke-dashoffset: 1000;
    -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
    animation: dash 0.9s 0.35s ease-in-out forwards;
}
@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}


/* Responsive for Auth page */
@media screen and (min-width: 318px) and (max-height: 600px) {
    #auth-block {
        max-width: 95% !important;
        margin: -25vh auto 0 !important;
    }
    #auth-block input {
        height: 49px;
        font-size: 17px;
    }
    #auth-block input[type=checkbox] {
        height: 5px;
        font-size: 17px;
    }
    #auth-block h3 {
        font-size: 30px;
    }
}
@media screen and (min-width: 400px) and (max-width: 550px) and (max-height: 736px) {
    #auth-block {
        max-width: 95% !important;
        margin: -7vh auto 0 !important;
    }

    #auth-block input {
        height: 40px;
        font-size: 14px;
    }

    #auth-block label {
        margin-bottom: 0px;
    }

    #auth-block form {
        padding-bottom: 10px;
    }
}

@media screen and (max-width: 550px) and (min-height: 667px) and (max-height: 736px) {
    #auth-block {
        max-width: 95% !important;
        margin: -5vh auto 0 !important;
    }
    #auth-block input {
        height: 60px;
        font-size: 20px;
    }
}

.btn-become-vip {
    width: 100%;
    padding: 12px;
    margin-bottom: 35%;
    text-align: center;
    text-transform: uppercase;
}

.btn-become-vip:hover {
    font-size: 16px;
    background-color: #e9c21e;
    transition-duration: 0.2s;
    text-align: center;
}

.prono-card {
    background-color: whitesmoke;
    border: 0px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin: 6vh 0 6vh 0;
    color: rgba(0, 0, 0, 0.56);
    padding: 10px 0 10px 0;
}

.prono-card > .icon-type {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    position: relative;
    top: -20px;
}

.prono-card .prono-value {
    border-bottom: 2px solid #efbb20;
}

@media screen and (max-width: 500px) {
    #web-design-2 {
        margin-bottom: 10px !important;
    }
    #timeline-vertical {
        margin: auto 1% auto -3%;
        max-width: 100% !important;
    }
}

/* Slider Homepage with responsives media queries */

.banner-custom {
    width: 100vw;
    height: 100vh;
    margin:0;
    background-size: cover;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banner-custom > .container {
    width: 95vw;
}

.banner-custom h1,
.banner-custom h2,
.banner-custom h3 {
    font-family: 'Source Sans Pro', cursive;
    line-height: 50px;
    display: block;
    color: #fff;
    font-weight: 700;
    white-space: normal;
    text-transform: uppercase;
}

.banner-custom h1 {
    font-size: 80px;
    color: #ffc300;
    margin-bottom: 50px;
}

.banner-custom h2 {
    font-size: 70px;
}

.banner-custom h3 {
    font-size: 50px;
    display: block;
}

.banner-custom .links {
    display: block;
    margin-top: 50px;
}

.banner-custom .snapcode-banner {
    display: inline-grid;
}
.banner-custom .snapcode-banner p {
    padding-left: 10%;
}

.banner-custom a {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    -webkit-transition: ease-out 0.3s;
    -moz-transition: ease-out 0.3s;
    -o-transition: ease-out 0.3s;
    transition: ease-out 0.3s;
    padding: 20px;
    margin-right: 20px;
    background-color: rgba(0, 0, 0, 0.64);
}

.banner-custom a:hover {
    background-color: whitesmoke;
    color: #000;
}

@media screen and (min-width: 591px) {
    .banner-custom .snapcode-banner {
        display: none;
    }
}
@media screen and (max-width: 590px) {
    .banner-custom {
        padding-top: 100px;
    }
    .banner-custom h1 {font-size: 50px;}
    .banner-custom h2 {font-size: 40px;}
    .banner-custom h3 {font-size: 25px;line-height: 1.2}
}

@media screen and (max-width: 380px) {
    .banner-custom {
        padding-top: 130px;
    }
    .banner-custom h1 {font-size: 45px;margin: 0 0 30px 0;line-height: 1;}
    .banner-custom h2 {font-size: 43px; margin: 0; line-height: 1;}
    .banner-custom h3 {font-size: 18px; line-height: 1;}
    .banner-custom a {margin: 0;}
}

@media screen and (max-width: 320px) {
    .banner-custom {
        padding-top: 110px;
    }
    .banner-custom h1 {font-size: 40px;margin: 0 0 30px 0;line-height: 1.1;}
    .banner-custom h2 {font-size: 38px; margin: 0; line-height: 1.1;}
    .banner-custom .snapcode-banner p {padding-left: 20px}
}

.prono-card-infos-table {
    margin-bottom: 0 !important;
}
.prono-card-infos-table td {
    padding: 0 !important;
}
.prono-card-infos-table p {
    line-height: 1.2;
    font-size: 12px;
}

.payments-ways-picture {
    margin-top: 5vh;
    width: 30%;
}

@media screen and (max-width: 450px) {
    .payments-ways-picture {
        margin-top: 0;
        width: 90%;
    }
}

.step .number {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-right: 20px;
    text-align: center;
    color: #fff;
    background-color: #000;
    border-radius: 100%;
}


/* Tooltip Copy to clipboard */

.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1 !important;
    z-index: 0 !important;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}