/*   
Theme Name: Warten 26
Theme URI: Warten
Description: A Theme for WordPress with Bootstrap for styling.
Author: Someone
Author URI:  Someone
Version: 1.0
*/


body {
    overflow-x: hidden;
    top: 100%;
    left: 0;
    background: #000
}

.card {
    height: auto;
    width: 85%;
    position: relative;
    display: block;
    transition: all .8s ease;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border: none;
    margin: 0 auto;
    border-radius: 0;
    z-index: 10
}

.card .front .cardspan,
.card .back .cardspan {
    position: absolute;
    cursor: pointer;
    box-sizing: content-box;
    background-size: contain;
    height: 0;
    width: 100%;
    padding: 0;
    padding-bottom: calc(100% * 477 / 280);
    margin: 0;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' id='svg8' version='1.1' viewBox='0 0 280 477' height='477' width='280' sodipodi:docname='ticket.svg' inkscape:version='0.92.4 (5da689c313,2019-01-14)'%3E%3Csodipodi:namedview pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1' objecttolerance='10' gridtolerance='10' guidetolerance='10' inkscape:pageopacity='0' inkscape:pageshadow='2' inkscape:window-width='2560' inkscape:window-height='1377' id='namedview17' showgrid='false' inkscape:zoom='2.5366876' inkscape:cx='72.983471' inkscape:cy='238.5' inkscape:window-x='-8' inkscape:window-y='-8' inkscape:window-maximized='1' inkscape:current-layer='svg8' /%3E%3Cmetadata id='metadata14'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cdefs id='defs12' /%3E%3Cpath id='rect3719' d='M -295.09243,-169.77962 V 553.80436 H 541.67715 V -169.77962 Z' style='stroke-width:1.6503588' /%3E%3Cg style='fill:none;fill-rule:evenodd' transform='translate(0.001)' id='g6'%3E%3Cg style='fill:%23ffffff' id='g4'%3E%3Cpath id='path2' transform='translate(-20,-39)' d='m 299.999,39 v 67 l -0.224,0.004 c -3.21,0.118 -5.775,2.758 -5.775,5.996 0,3.313 2.686,6 5.999,6 v 395.174 c 0,0.808 -0.089,1.59 -0.254,2.339 l -0.088,0.371 -5.276,-6.174 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.376,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.376,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.376,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.376,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.376,-6.29 -5.376,6.29 -5.375,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.375,-6.29 -5.376,6.29 -5.375,-6.29 -5.375,6.29 -5.375,-6.29 -5.376,6.29 -5.375,-6.29 -5.375,6.29 -5.375,-6.29 -5.376,6.29 -5.375,-6.29 -5.375,6.29 -5.375,-6.29 -5.376,6.29 -5.375,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.376,-6.29 -5.375,6.29 -5.375,-6.29 -5.375,6.29 -5.376,-6.29 -5.275,6.174 c -0.19,-0.736 -0.308,-1.509 -0.337,-2.308 L 20,513.174 19.999,118 H 20 c 3.314,0 6,-2.686 6,-6 0,-3.314 -2.686,-6 -6,-6 H 19.999 V 39 Z' /%3E%3C/g%3E%3C/g%3E%3Cpath style='fill:none;stroke:%23000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.09019608' d='m 16.95124,73.323967 243.62479,0.394215 h -0.39421' id='path21' inkscape:connector-curvature='0' /%3E%3C/svg%3E%0A")
}

.card .front {
    z-index: 0;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1ss ease, -webkit-transform 1s ease
}

.card .back {
    transform: rotateY(180deg);
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1ss ease, -webkit-transform 1s ease
}

.card.flip {
    transform: rotateY(-180deg);
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease
}

.card section {
    color: #000
}

#slider {
    height: 630px;
    max-height: 630px;
    overflow: hidden;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0
}

.carousel-item {
    height: 630px;
    max-height: 630px
}

.carousel-inner .carousel-item {
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease, -webkit-transform .6s ease;
    transition: all 600ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
    transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000)
}

.carousel-item-next.carousel-item-left {
    display: block !important
}

a,
a:link,
a:visited {
    text-decoration: none !important;
    color: #fff !important
}

.frontlast a {
    text-decoration: underline !important;
    color: #fff !important
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-500.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-500.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500.svg#Lora) format("svg")
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-regular.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-regular.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-regular.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-regular.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-regular.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-regular.svg#Lora) format("svg")
}

@font-face {
    font-family: 'Lora';
    ffont-style: normal;
    font-weight: 600;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-600.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-600.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600.svg#Lora) format("svg")
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-700.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-700.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700.svg#Lora) format("svg")
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-italic.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-italic.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-italic.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-italic.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-italic.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-italic.svg#Lora) format("svg")
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 500;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-500italic.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-500italic.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500italic.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500italic.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500italic.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-500italic.svg#Lora) format("svg")
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 700;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-700italic.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-700italic.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700italic.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700italic.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700italic.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-700italic.svg#Lora) format("svg")
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 600;
    src: url(/wp-content/themes/warten/fonts/lora-v17-latin-600italic.eot);
    src: local(), url(/wp-content/themes/warten/fonts/lora-v17-latin-600italic.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600italic.woff2) format("woff2"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600italic.woff) format("woff"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600italic.ttf) format("truetype"), url(/wp-content/themes/warten/fonts/lora-v17-latin-600italic.svg#Lora) format("svg")
}

hr {
    border-top: 1px solid rgba(0, 0, 0, 0.2)
}

body,
html,
.primary,
main,
.site-main,
.container,
.bg-dark {
    font-family: 'Lora' !important;
    font-style: normal;
    background: #000 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.entry-content p,
.entry-content ul,
.entry-content li,
.entry-content a,
.entry-content em,
.entry-content b,
.entry-content i,
h1,
h2,
h3,
h4,
h5 {
    font-family: 'Lora' !important
}

.entry-content p,
.entry-content ul,
.entry-content li,
.entry-content a,
.entry-content em,
.entry-content b,
.entry-content i {
    font-family: 'Lora' !important;
    font-size: 1em !important
}

@media only screen and (min-width: 375px) and (max-width: 385px) {
    .scrollbox {
        max-height: 340px
    }
}

.scrollbox {
    max-height: 340px;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-x: hidden;
    background: linear-gradient(#fff 33%, rgba(138, 242, 174, 0)), linear-gradient(rgba(138, 242, 174, 0), #fff 66%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)) 0 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
    background-size: 100% 45px, 100% 45px, 100% 15px, 100% 15px
}

.wp-block-video {
    width: 58%;
    margin: 0 auto;
    display: block
}

.btn-white {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s;
    background: #fff !important;
    color: #000;
    width: 24px;
    height: 24px
}

.btn-light {
    border: 2px solid #000 !important;
    background: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-family: 'Lora';
    font-size: 14pt;
    display: block !important;
    clear: both
}

// X-Small devices (portrait phones,less than 576px)
@media (max-width: 575.98px) {
    .vorzeilefont-size:1.2em;
    font-family:'Lora' !important;
    line-height:1em
}

.introtext {
    font-size: 1, 505625015056256;
    font-family: 'Lora' !important;
    line-height: 1em
}

.schlagzeile {
    font-size: 1.9em;
    font-weight: 500;
    font-family: 'Lora' !important;
    line-height: 1em
}

.scrollbox {
    max-height: 320px;
    padding-bottom: 5px;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto
}

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) {
    .scrollbox {
        max-height: 320px;
        padding-bottom: 5px
    }
}

@media only screen and (min-device-height: 577px) and (max-device-height: 640px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .scrollbox {
        max-height: 360px;
        padding-bottom: 3px
    }
}

@media screen and (max-device-width: 360px) and media screen and (-webkit-min-device-pixel-ratio: 3) and media screen and (device-aspect-ratio: 916) {
    .scrollbox {
        max-height: 320px;
        padding-bottom: 5px
    }
}

@media (min-width: 320px) and (max-height: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .scrollbox {
        max-height: 300px;
        padding-bottom: 3px
    }
}

@media only screen and (min-device-width : 375px) or 213.4375em and (max-device-width : 667px) or 41.6875em and (width : 375px) or 23.4375em and (height : 559px) or 34.9375em and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .scrollbox {
        height: 360px;
        max-height: 360px;
        padding-bottom: 5px;
        margin-bottom: 5px
    }

    .heightfix {
        height: 65px
    }

    .wp-block-video {
        width: 65% !important;
        margin: 0 auto;
        display: block
    }
}

@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (device-width : 414px) and (device-height : 736px) and (-webkit-min-device-pixel-ratio: 3) {
    .scrollbox {
        max-height: 370px;
        padding-bottom: 5px;
        margin-bottom: 5px
    }

    .heightfix {
        height: 72px
    }

    .wp-block-video {
        width: 55% !important;
        margin: 0 auto;
        display: block
    }
}

// Small devices (landscape phones,less than 768px)
@media (max-width: 767.98px) {
    .vorzeilefont-size:1.2em;
    font-family:'Lora' !important;
    line-height:1em
}

.introtext {
    font-size: 1.55em;
    font-family: 'Lora' !important;
    line-height: 1em
}

.schlagzeile {
    font-size: 2.5em;
    font-weight: 500;
    font-family: 'Lora' !important;
    line-height: 1em
}

.scrollbox {
    max-height: 300px !important;
    padding-bottom: 25px
}

.btncircle {
    margin: 0 auto;
    display: block;
    text-align: center;
    height: 80px;
    line-height: 80px;
    width: 80px;
    font-size: 2em;
    font-weight: 700;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    text-align: center;
    cursor: pointer
}

.btncircle:hover img {
    margin-top: 10px
}

.btn-light {
    border: 2px solid #000;
    background: #fff;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: .5em 3em !important;
    display: block !important;
    clear: both;
    margin: .5em auto !important
}

.btn-light:hover {
    border: 2px solid #000 !important;
    background: #000 !important;
    color: #fff !important
}

.btncircle:hover {
    background-color: #efefef
}

body.offcanvas-active {
    overflow: hidden
}

.offcanvas-header {
    display: none
}

.screen-darken {
    height: 100%;
    width: 0;
    z-index: 30;
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(34, 34, 34, 0.6);
    transition: opacity .2s linear, visibility 0.2s, width 2s ease-in
}

.screen-darken.active {
    z-index: 10;
    transition: opacity .3s ease, width 0;
    opacity: 1;
    width: 100%;
    visibility: visible
}

@media all and (max-width: 991px) {
    .offcanvas-header {
        display: block
    }

    .mobile-offcanvas {
        visibility: hidden;
        transform: translateX(-100%);
        border-radius: 0;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1200;
        width: 80%;
        overflow-y: scroll;
        overflow-x: hidden;
        transition: visibility .3s ease-in-out, transform .3s ease-in-out
    }

    .mobile-offcanvas.show {
        visibility: visible;
        transform: translateX(0)
    }

    .mobile-offcanvas .container,
    .mobile-offcanvas .container-fluid {
        display: block
    }

    .nav-link,
    .menu-item {
        padding-right: .5rem;
        padding-left: 0 !important;
        text-decoration: none !important
    }

    .menu-item a {
        text-decoration: none !important
    }
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

.menu-item a {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    list-style: none;
    color: #fff
}

.nav-link,
.menu-item {
    padding: .5rem 1rem
}

@media (max-width: 576px) {
    .carousel-item {
        height: 530px;
        max-height: 530px
    }

    .carousel-inner {
        position: relative;
        width: 94%;
        overflow: hidden;
        margin: 0 auto
    }

    .carousel-indicators {
        bottom: 10px
    }

    .heightfix {
        min-height: 65px
    }
}

@media screen and (device-aspect-ratio: 4071) {
    .scrollbox {
        max-height: 270px !important
    }

    .wp-block-video {
        width: 65%;
        margin: 0 auto;
        display: block
    }
}

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    .card {
        height: auto;
        width: 92% !important
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .wp-block-video {
        width: 68%;
        margin: 0 auto;
        display: block
    }
}

@media (min-width: 768px) {
    .scrollbox {
        max-height: 630px;
        padding-bottom: 25px
    }

    .carousel-inner {
        position: relative;
        width: 75%;
        margin: 0 auto
    }

    .carousel-item {
        height: 1000px !important;
        max-height: 1000px !important
    }

    .card {
        height: auto;
        width: 65% !important;
        position: relative;
        display: block;
        transition: all .5s ease-out;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        border: none;
        margin: 0 auto;
        border-radius: 0;
        z-index: 10
    }
}

.carousel-indicators li {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    padding: 3px;
    position: relative;
    margin: 0 8px;
    background-color: transparent;
    opacity: 1;
    border: 3px solid #fff
}

.carousel-indicators li:first-child {
    margin-left: 0 !important
}

.carousel-indicators li:last-child {
    margin-right: 0 !important
}

.carousel-indicators li:first-child.active {
    margin-left: 0 !important
}

.carousel-indicators li:last-child.active {
    margin-right: 0 !important
}

.carousel-indicators li.active {
    background-color: #fff;
    border-radius: 100%;
    background-color: #fff;
    margin: 0 8px;
    width: 12px;
    height: 12px;
    border: 0
}

.carousel-indicators {
    position: fixed !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1 !important;
    overflow: hidden
}

.noflip {
    transform: none !important;
    background: #000 !important
}

html,
body {
    font-size: 5vw;
    line-break: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto
}

// iphone5
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)) {
    .wp-block-videowidth:70%;
    margin:0 auto;
    display:block
}

.heightfix {
    height: 60px
}

.scrollbox {
    max-height: 300px !important;
    padding-bottom: 5px
}

.schlagzeile,
h2,
.h2 {
    font-size: 1.6rem !important
}

.text-responsive {
    font-size: calc(100% + 1vw + 1vh)
}

.text-responsive2 {
    font-size: calc(100% + .8vw + .8vh)
}

.carousel-control-next {
    right: 0
}

.carousel-control-next,
.carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    color: #fff;
    text-align: center;
    opacity: .5
}

.lastcard {
    display: none
}

body.offcanvas-active {
    overflow: hidden
}

.offcanvas-header {
    display: none
}

.screen-darken {
    height: 100%;
    width: 0;
    z-index: 30;
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(34, 34, 34, 0.6);
    transition: opacity .2s linear, visibility 0.2s, width 2s ease-in
}

.screen-darken.active {
    z-index: 10;
    transition: opacity .3s ease, width 0;
    opacity: 1;
    width: 100%;
    visibility: visible
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link,
{
color: #000 !important
}

avbar-dark .navbar-nav .nav-link {
    color: #000 !important
}

@media all and (max-width: 991px) {
    .offcanvas-header {
        display: block
    }

    .mobile-offcanvas {
        position: fixed;
        left: 0;
        width: 100%;
        margin-bottom: 30px;
        transform: translatey(100%);
        background: #fff;
        color: #000;
        z-index: 1200;
        transition: .8s
    }
}

@keyframes slide-up {
    from {
        margin-top: 100%;
        height: 300%
    }

    to {
        margin-top: 0;
        height: 100%
    }
}

.mobile-offcanvas.show {
    visibility: visible;
    transform: translatey(0)
}

@keyframes slide-down {
    from {
        margin-top: 0;
        height: 100%
    }

    to {
        margin-top: 100%;
        height: 900%
    }
}

.mobile-offcanvas .container,
.mobile-offcanvas .container-fluid {
    display: block
}