/* montserrat-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('webfonts/montserrat-v25-latin-300.eot'); /* IE9 Compat Modes */
    src: url('webfonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v25-latin-300.woff') format('woff'), /* Modern Browsers */ url('webfonts/montserrat-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/montserrat-v25-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* montserrat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('webfonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('webfonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */ url('webfonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}


/* montserrat-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('webfonts/montserrat-v25-latin-500.eot'); /* IE9 Compat Modes */
    src: url('webfonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('webfonts/montserrat-v25-latin-500.woff') format('woff'), /* Modern Browsers */
    url('webfonts/montserrat-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('webfonts/montserrat-v25-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}




/* montserrat-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('webfonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
    src: url('webfonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('webfonts/montserrat-v25-latin-700.woff') format('woff'), /* Modern Browsers */ url('webfonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}


:root {
    --hellgrau: #EFEFEF;
    --radius: 10px;
    --padding: 20px;
}


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;

}


body {
    -webkit-text-size-adjust: none;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: #000;
    background-color: var(--hellgrau);
    position: relative;

}

a {
    color: #000;
    text-decoration: none;
}


h1 {
    font-size: 18px;
    font-weight: 500;
}

h2 {
    font-size: 18px;
    font-weight: 500;
}


input, textarea, select {
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    border: 0px solid #eee;
    box-sizing: border-box;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;

}

input:focus, textarea:focus, select:focus {
     outline: transparent;
}

b {font-weight: 500;}

/******************************************************/

.col {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.row {
    width: 100%;
}

.row1 {
    width: 8.3333%;
}

.row2 {
    width: 16.66667%;
}

.row3 {
    width: 25%;
}

.row4 {
    width: 33.33333%;
}

.row5 {
    width: 41.66667%;
}

.row6 {
    width: 50%;
}

.row7 {
    width: 58.3333%;
}

.row8 {
    width: 66.6667%;
}

.row9 {
    width: 75%;
}

.row10 {
    width: 83.3333%;
}

.row11 {
    width: 91.6667%;
}

.row12 {
    width: 100%;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}


.relative {
    position: relative;
}



/******************************************************/


#body {

    min-height: 100%;
    background-color: #fff;
    padding: 20px;
    padding-bottom: 30px;
    box-sizing: border-box;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#container {
    padding-bottom: 70px;

}

#header {
    padding-top: 4px;
    margin-bottom: 20px;
}


#logo {
    width:210px;
    display: inline-block;
}

#logo img{
    width:100%;
}

.buttonEinkaufskorb {
    float: right;
    padding-top: 2px;
    position: relative;
}

#buttonSuche {
    float: right;
    margin-top: -2px;
    margin-right: 17px;
}

#sogehts {
    margin-left: 25%;
}

.startol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: startol;

}

ol li {
    counter-increment: startol;
    margin-top: 10px;
    margin-bottom: 10px;
}

ol li::before {
    content: counter(startol);
    color: #fff;
    background-color: #000;
    width: 30px;
    border-radius: 8px;
    font-weight: bold;
    display: block;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    position: absolute;
    margin-left: -40px;
}


#werbung {
    width: 100%;
    margin-bottom:50px;
}

#werbung img {
    width: 100%;
    border-radius: 20px;
}

#startscreen h1 {
    font-size: 32px;
    margin-top:48px;

}

.startflex {
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    justify-content: space-around;
    height: calc(100vh - 217px);
    min-height: 460px;

}

.text10 {
    font-size: 10px;
}

.button {
    font-size: 12px;
    color: #000;
    border: 1.333px #2B2E34 solid;
    font-weight: 500;
    display: inline-block;
    border-radius: 16px;
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;
    transition: all 0.3s;
    text-align: center;
}

.button:hover {
    color: #fff;
    background-color: #000;
}

.buttonschwarz {
     background-color: #000000;
    color:#fff;
    font-size: 16px;
    font-weight: 500;
    padding-left:20px;
    padding-right:20px;
}

.buttonschwarz:hover {
    background-color: #fff;
    color: #000;
}

.buttongelb {
    background-color: #FFD500;
    border-color: #FFD500;
    font-size: 14px;
    font-weight: 500;
    padding-left:20px;
    padding-right:20px;
    margin-top:0px;
    margin-bottom:0px;
}

.kategorien {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 15px;
    column-gap: 10px;
    width: 100%;
}

.kategorien li {
    width: calc(50% - 5px);

}

.kategorien a {
    background-color: var(--hellgrau);
    border-radius: 20px;
    display: block;
    height: 150px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 120px;
    background-image: url("img/icon_kategorie_spielen.svg");
    background-repeat: no-repeat;
    background-position: center calc(50% - 7px);


}

.kategorien a:hover {
    background-color: #FFD500;
}

.button_icon_up {
    display: block;
    width:100%;
    text-align: right;

    padding-bottom:6px;
}


/* Above the fold*/
/******************************************************************************************/


#footer {
    position: absolute;
    bottom: 30px;
    width: calc(100% - 40px);
    font-size: 14px;
}


/******************************************************************************************/

.modalinhalt {
    background-color: #fff;
    padding: 10px;
}


/******************************************************************************************/

#q {
     background-color: var(--hellgrau);
    padding: 10px;
    padding-left:40px;
    width:100%;
    background-image: url("img/icon_lupe.svg");
    background-position: 5px 5px;
    background-repeat: no-repeat;
    border-radius: 20px;
    margin-top:4px;
    margin-bottom: 22px;
}

.card {
    background-color: transparent;
    width: 100%;
    height: 200px;
    perspective: 1000px;
    margin-bottom: 10px;

}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;

    transition: transform 0.6s;
    transform-style: preserve-3d;
    /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
}

.card.drehen .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-front {
    background-color: var(--hellgrau);
    border-radius: 10px;
    height: 200px;
    box-sizing: border-box;
    padding: 5px;


    background-image: url("img/hi_card.svg"), url("img/hi_card.svg");
    background-repeat: no-repeat;
    background-position: 40% -25px, 40% calc(100% + 25px);


}

.card-links {
    float: left;
    width: 45%;
    padding-left: 5px;
    padding-top: 15px;
}

.card-rechts {
    float: right;
    width: 52%;

}

.card-rechts h3 {
    margin-top: 11px;
    margin-bottom: 7px;
    font-size: 22px;
    font-weight: 400;
}

.card-text {
    height: 78px;
    margin-top:24px;

}

.card-text-kat {

    margin-bottom: 16px;
}

.card-back {
    background-color: var(--hellgrau);
    border-radius: 10px;
    height: 200px;
    box-sizing: border-box;
    padding: 10px;


    transform: rotateY(180deg);

    background-image: url("img/hi_card.svg"), url("img/hi_card.svg");
    background-repeat: no-repeat;
    background-position: 55% -25px, 55% calc(100% + 25px);
}

.card-links img {
    display: block;
    width: 100px;
}

.button_i {
    float: right;
}

.button_i_close {
    float: right;
}

.button_i_trash {

position: absolute;
    right: 4px;
    bottom: 4px;
    display: block;
}


.modalEk {
    display: flex;
    flex-wrap: wrap;
    margin-top:14px;
    font-size: 12px;
}
.modalEkLi {

    margin-top:16px;
    margin-bottom:16px;
    width: calc(100% - 120px);
    align-self: center
}

.modalEkRe {
    width:120px;
    margin-top:16px;
    margin-bottom:16px;
    align-self: center

}

.modalEkRe img{
    width:100px;
    display: block;
    float: right;

}

h3.produkth3 {

    font-size: 22px;
    font-weight: 500;
    margin-top:16px;
    margin-bottom:12px;
}


.menu {
    font-size: 18px;
    font-weight: 500;
    margin-top:6px;
    display: inline-block;
}

#menuTitel img {
    transition: all 0.5s;
    vertical-align: top;
    display: inline-block;
    margin-top:2px;
    margin-right: 9px;
}

#menuTitel.show img {
    transform: rotate(90deg);
}

.zurueck {
    float: right;
}

.kategorienMenu {
    font-size: 18px;
    margin:0;
    padding:0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom:16px;
    height:0;
    overflow: hidden;
    transition: all 0.5s;
}

.kategorienMenu.show {
    height: 130px;

}

.kategorienMenu li{
    width:50%;
    padding-top:10px;
    padding-bottom:10px;
    display: block;

}

#sortbuttons {margin-bottom: 20px;}

#sortbuttons a {

    display: inline-block;
    padding-right:20px;
}


#anzahlEk {
    display: block;
    position: absolute;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    border-radius: 50%;
    padding:3px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;

    text-align: center;
    padding:2px;
    padding-top: 3px;
    position: absolute;
    top:-8px;
    left:-8px;

}



.hidden {
    display: none !important;
}

.eanslider {

    background-color: transparent !important;
    box-shadow: none !important;
    padding:0 !important;

    /*overflow: hidden;*/
}

.eansliderslider {
    width: 100%;

}

.eanslider a.close-modal {
    top: 0px !important;
    right: -15px !important;

}

.keinergebnis {
    background-color: var(--hellgrau);
    padding:20px;
    border-radius: 10px;
}

.asc, .desc {
    font-weight: 500;
}

.asc:after {

    content: " \2191";
    font-size:20px;
}

.desc:after {

    content: ' \2193';
    font-size:20px;
}

.gruen {
    padding:14px;
    padding-left:10px;
    padding-right: 5px;
    background-color: #AAF8CE;
    border-radius: 10px;
    font-size:12px;
    margin-top: 16px;
}

.cardgrau {
    background-color: var(--hellgrau);
    border-radius: var(--radius);
    padding: var(--padding);

}

.text16 {
    font-size:16px;
}

.text11 {
    font-size:11px;
}

.text12 {
    font-size:12px;
}

.text18 {
    font-size:18px;
    margin-top: 6px;
}

.textanbieter {
    margin-top:4px; margin-bottom:8px;
}
.textkategorie {
    margin-top:4px; margin-bottom:8px;
}

.textboxgrau {
    background-color: #C3C3C3;
    border-radius: var(--radius);
    padding:6px;
    margin-top:16px;
    margin-bottom:16px;

}

.weiss {
    color:#fff;
    margin-top:20px;

}


.eanimg {
    height: 160px;
    width: 100%;
    text-align: center;
}

.eanimg img {
    width:100%;
    max-width: 300px;
}

.cardek {
    margin-top:20px;
    margin-bottom:20px;
}

.cardekimg img{
    width:80%;
    max-width:170px;
    display: inline-block;

}

.ekschatten { margin-top:-18px;}



/***************************************************************************************/
/***************************************************************************************/

.blocker {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 4000;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.6);
    text-align: center;
}

.blocker:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.05em;
}

.blocker.behind {
    background-color: transparent;
}

.modal {
    display: none;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    max-width: 600px;
    box-sizing: border-box;
    width: 100%;
    background: var(--hellgrau);
    padding: 15px 30px;

    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    -ms-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    text-align: left;
}

.modal a.close-modal {
    position: absolute;
    top: -12.5px;
    right: -12.5px;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');

}

.modal-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 12px 16px;
    border-radius: 5px;
    background-color: #111;
    height: 20px;
}

.modal-spinner > div {
    border-radius: 100px;
    background-color: #fff;
    height: 20px;
    width: 2px;
    margin: 0 1px;
    display: inline-block;

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.modal-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.modal-spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.modal-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.5)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}



/***************************************************************************************/

/* v1.0.7 */
/* Core RS CSS file. 95% of time you shouldn't change anything here. */
.royalSlider {
    width: 600px;
    height: 400px;
    position: relative;
    direction: ltr;
    touch-action: pan-y pinch-zoom;
}

.royalSlider > * {
    float: left;
}

.rsWebkit3d .rsSlide,
.rsWebkit3d .rsContainer,
.rsWebkit3d .rsThumbs,
.rsWebkit3d .rsPreloader,
.rsWebkit3d img,
.rsWebkit3d .rsOverflow,
.rsWebkit3d .rsBtnCenterer,
.rsWebkit3d .rsAbsoluteEl,
.rsWebkit3d .rsABlock,
.rsWebkit3d .rsLink {
    -webkit-backface-visibility: hidden;
}

.rsFade.rsWebkit3d .rsSlide,
.rsFade.rsWebkit3d img,
.rsFade.rsWebkit3d .rsContainer {
    -webkit-transform: none;
}

.rsOverflow {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    float: left;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rsVisibleNearbyWrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    left: 0;
    top: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rsVisibleNearbyWrap .rsOverflow {
    position: absolute;
    left: 0;
    top: 0;
}

.rsContainer {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rsArrow,
.rsThumbsArrow {
    cursor: pointer;
}

.rsThumb {
    float: left;
    position: relative;
}


.rsArrow,
.rsNav,
.rsThumbsArrow {
    opacity: 1;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

.rsHidden {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s linear 0.3s, opacity 0.3s linear;
    -moz-transition: visibility 0s linear 0.3s, opacity 0.3s linear;
    -o-transition: visibility 0s linear 0.3s, opacity 0.3s linear;
    transition: visibility 0s linear 0.3s, opacity 0.3s linear;
}


.rsGCaption {
    width: 100%;
    float: left;
    text-align: center;
}

/* Fullscreen options, very important ^^ */
.royalSlider.rsFullscreen {
    position: fixed !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483647 !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

.royalSlider .rsSlide.rsFakePreloader {
    opacity: 1 !important;
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
    display: none;
}

.rsSlide {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    overflow: hidden;

    height: 100%;
    width: 100%;
}

.royalSlider.rsAutoHeight,
.rsAutoHeight .rsSlide {
    height: auto;
}

.rsContent {
    width: 100%;
    height: 100%;
    position: relative;
}

.rsPreloader {
    position: absolute;
    z-index: 0;
}

.rsNav {
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    user-select: none;
}

.rsNavItem {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25);
}

.rsThumbs {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    float: left;
    z-index: 22;
}

.rsTabs {
    float: left;
    background: none !important;
}

.rsTabs,
.rsThumbs {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.rsVideoContainer {
    width: auto;
    height: auto;
    line-height: 0;
    position: relative;
}

.rsVideoFrameHolder {
    position: absolute;
    left: 0;
    top: 0;
    background: #141414;
    opacity: 0;
    -webkit-transition: .3s;
}

.rsVideoFrameHolder.rsVideoActive {
    opacity: 1;
}

.rsVideoContainer iframe,
.rsVideoContainer video,
.rsVideoContainer embed,
.rsVideoContainer .rsVideoObj {
    position: absolute;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* ios controls over video bug, shifting video */
.rsVideoContainer.rsIOSVideo iframe,
.rsVideoContainer.rsIOSVideo video,
.rsVideoContainer.rsIOSVideo embed {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 44px;
}

.rsABlock {
    left: 0;
    top: 0;
    position: absolute;
    z-index: 15;

}

img.rsImg {
    max-width: none;
}

.grab-cursor {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.grabbing-cursor {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.rsNoDrag {
    cursor: auto;
}

.rsLink {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 20;
    background: rgba(0, 0, 0, 0);
}


/**********************************************************************************************************************/

/******************************
*
*  RoyalSlider Default Skin
*
*    1. Arrows
*    2. Bullets
*    3. Thumbnails
*    4. Tabs
*    5. Fullscreen button
*    6. Play/close video button
*    7. Preloader
*    8. Caption
*
*  Sprite: 'rs-default.png'
*  Feel free to edit anything
*  If you don't some part - just delete it
*
******************************/


/* Background */
.rsDefault,
.rsDefault .rsOverflow,
.rsDefault .rsSlide,
.rsDefault .rsVideoFrameHolder,
.rsDefault .rsThumbs {

}


/***************
*
*  1. Arrows
*
****************/

.rsDefault .rsArrow {
    height: 100%;
    width: 44px;
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 21;
}

.rsDefault.rsVer .rsArrow {
    width: 100%;
    height: 44px;

}

.rsDefault.rsVer .rsArrowLeft {
    top: 0;
    left: 0;
}

.rsDefault.rsVer .rsArrowRight {
    bottom: 0;
    left: 0;
}

.rsDefault.rsHor .rsArrowLeft {
    left: 0;
    top: 0;
}

.rsDefault.rsHor .rsArrowRight {
    right: 0;
    top: 0;
}

.rsDefault .rsArrowIcn {
    width: 32px;
    height: 32px;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;

    position: absolute;
    cursor: pointer;
    background: url('rs-default.png');

    background-color: #000;
    background-color: rgba(0, 0, 0, 0.75);
    *background-color: #000;

    border-radius: 2px;
}

.rsDefault .rsArrowIcn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.rsDefault.rsHor .rsArrowLeft .rsArrowIcn {
    background-position: -64px -32px;
}

.rsDefault.rsHor .rsArrowRight .rsArrowIcn {
    background-position: -64px -64px;
}

.rsDefault.rsVer .rsArrowLeft .rsArrowIcn {
    background-position: -96px -32px;
}

.rsDefault.rsVer .rsArrowRight .rsArrowIcn {
    background-position: -96px -64px;
}

.rsDefault .rsArrowDisabled .rsArrowIcn {
    opacity: .2;
    filter: alpha(opacity=20);
    *display: none;
}


/***************
*
*  2. Bullets
*
****************/

.rsDefault .rsBullets {
    position: absolute;
    z-index: 35;
    left: 0;
    bottom: -26px;
    width: 100%;
    height: auto;
    margin: 0 auto;


    text-align: center;
    line-height: 10px;
    overflow: hidden;
}

.rsDefault .rsBullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding: 6px 5px 6px;
}

.rsDefault .rsBullet span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hellgrau);

}

.rsDefault .rsBullet.rsNavSelected span {
    background-color: #DEDEDE;
}


/***************
*
*  3. Thumbnails
*
****************/

.rsDefault .rsThumbsHor {
    width: 100%;
    height: 72px;
}

.rsDefault .rsThumbsVer {
    width: 96px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.rsDefault.rsWithThumbsHor .rsThumbsContainer {
    position: relative;
    height: 100%;
}

.rsDefault.rsWithThumbsVer .rsThumbsContainer {
    position: relative;
    width: 100%;
}

.rsDefault .rsThumb {
    float: left;
    overflow: hidden;
    width: 96px;
    height: 72px;
}

.rsDefault .rsThumb img {
    width: 100%;
    height: 100%;
}

.rsDefault .rsThumb.rsNavSelected {
    background: #02874a;
}

.rsDefault .rsThumb.rsNavSelected img {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.rsDefault .rsTmb {
    display: block;
}

/* Thumbnails with text */
.rsDefault .rsTmb h5 {
    font-size: 16px;
    margin: 0;
    padding: 0;
    line-height: 20px;
    color: #FFF;
}

.rsDefault .rsTmb span {
    color: #DDD;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 18px;
}


/* Thumbnails arrow icons */
.rsDefault .rsThumbsArrow {
    height: 100%;
    width: 20px;
    position: absolute;
    display: block;
    cursor: pointer;
    z-index: 21;
    background: #000;
    background: rgba(0, 0, 0, 0.75);
}

.rsDefault .rsThumbsArrow:hover {
    background: rgba(0, 0, 0, 0.9);
}

.rsDefault.rsWithThumbsVer .rsThumbsArrow {
    width: 100%;
    height: 20px;
}

.rsDefault.rsWithThumbsVer .rsThumbsArrowLeft {
    top: 0;
    left: 0;
}

.rsDefault.rsWithThumbsVer .rsThumbsArrowRight {
    bottom: 0;
    left: 0;
}

.rsDefault.rsWithThumbsHor .rsThumbsArrowLeft {
    left: 0;
    top: 0;
}

.rsDefault.rsWithThumbsHor .rsThumbsArrowRight {
    right: 0;
    top: 0;
}

.rsDefault .rsThumbsArrowIcn {
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
    cursor: pointer;
    background: url('rs-default.png');
}

.rsDefault.rsWithThumbsHor .rsThumbsArrowLeft .rsThumbsArrowIcn {
    background-position: -128px -32px;
}

.rsDefault.rsWithThumbsHor .rsThumbsArrowRight .rsThumbsArrowIcn {
    background-position: -128px -48px;
}

.rsDefault.rsWithThumbsVer .rsThumbsArrowLeft .rsThumbsArrowIcn {
    background-position: -144px -32px;
}

.rsDefault.rsWithThumbsVer .rsThumbsArrowRight .rsThumbsArrowIcn {
    background-position: -144px -48px;
}

.rsDefault .rsThumbsArrowDisabled {
    display: none !important;
}

/* Thumbnails resizing on smaller screens */
@media screen and (min-width: 0px) and (max-width: 800px) {
    .rsDefault .rsThumb {
        width: 59px;
        height: 44px;
    }

    .rsDefault .rsThumbsHor {
        height: 44px;
    }

    .rsDefault .rsThumbsVer {
        width: 59px;
    }
}


/***************
*
*  4. Tabs
*
****************/

.rsDefault .rsTabs {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    padding-top: 12px;
    position: relative;
}

.rsDefault .rsTab {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    height: auto;
    width: auto;
    color: #333;
    padding: 5px 13px 6px;
    min-width: 72px;
    border: 1px solid #D9D9DD;
    border-right: 1px solid #f5f5f5;
    text-decoration: none;

    background-color: #FFF;
    background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
    background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4);
    background-image: linear-gradient(to bottom, #fefefe, #f4f4f4);

    -webkit-box-shadow: inset 1px 0 0 #fff;
    box-shadow: inset 1px 0 0 #fff;

    *display: inline;
    *zoom: 1;
}

.rsDefault .rsTab:first-child {
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.rsDefault .rsTab:last-child {
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;

    border-right: 1px solid #cfcfcf;
}

.rsDefault .rsTab:active {
    border: 1px solid #D9D9DD;
    background-color: #f4f4f4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) inset;
}

.rsDefault .rsTab.rsNavSelected {
    color: #FFF;
    border: 1px solid #999;
    text-shadow: 1px 1px #838383;
    box-shadow: 0 1px 9px rgba(102, 102, 102, 0.65) inset;
    background: #ACACAC;
    background-image: -webkit-linear-gradient(top, #ACACAC, #BBB);
    background-image: -moz-llinear-gradient(top, #ACACAC, #BBB);
    background-image: linear-gradient(to bottom, #ACACAC, #BBB);
}


/***************
*
*  5. Fullscreen button
*
****************/

.rsDefault .rsFullscreenBtn {
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    z-index: 22;
    display: block;
    position: absolute;
    cursor: pointer;

}

.rsDefault .rsFullscreenIcn {
    display: block;
    margin: 6px;
    width: 32px;
    height: 32px;

    background: url('rs-default.png') 0 0;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.75);
    *background-color: #000;
    border-radius: 2px;

}

.rsDefault .rsFullscreenIcn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.rsDefault.rsFullscreen .rsFullscreenIcn {
    background-position: -32px 0;
}


/***************
*
*  6. Play/close video button
*
****************/

.rsDefault .rsPlayBtn {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
    width: 64px;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    cursor: pointer;
}

.rsDefault .rsPlayBtnIcon {
    width: 64px;
    display: block;
    height: 64px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;

    background: url(rs-default.png) no-repeat 0 -32px;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.75);
    *background-color: #000;
}

.rsDefault .rsPlayBtn:hover .rsPlayBtnIcon {
    background-color: rgba(0, 0, 0, 0.9);
}

.rsDefault .rsBtnCenterer {
    position: absolute;
    left: 50%;
    top: 50%;
}

.rsDefault .rsCloseVideoBtn {
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    z-index: 500;
    position: absolute;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);

}

.rsDefault .rsCloseVideoBtn.rsiOSBtn {
    top: -38px;
    right: -6px;
}

.rsDefault .rsCloseVideoIcn {
    margin: 6px;
    width: 32px;
    height: 32px;
    background: url('rs-default.png') -64px 0;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.75);
    *background-color: #000;
}

.rsDefault .rsCloseVideoIcn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}


/***************
*
*  7. Preloader
*
****************/

.rsDefault .rsPreloader {
    width: 20px;
    height: 20px;
    background-image: url(../preloaders/preloader-white.gif);

    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
}


/***************
*
*  8. Global caption
*
****************/
.rsDefault .rsGCaption {
    position: absolute;
    float: none;
    bottom: 6px;
    left: 6px;
    text-align: left;

    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.75);

    color: #FFF;
    padding: 2px 8px;
    width: auto;
    font-size: 12px;
    border-radius: 2px;
}