@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

*
{
    font-family: 'Raleway', sans-serif;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

body
{
    font-size: 14px;

    margin: 0;
    padding: 0;

    letter-spacing: .025em;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), to(#777));
    background-image: -webkit-linear-gradient(top, #fff 5%, #777 100%);
    background-image:    -moz-linear-gradient(top, #fff 5%, #777 100%);
    background-image:      -o-linear-gradient(top, #fff 5%, #777 100%);
    background-image:         linear-gradient(to bottom, #fff 5%, #777 100%);
}
#wrapper
{
    position: relative;

    float: left;
    overflow-x: hidden;

    width: 100%;
}
#content
{
    float: left;

    width: 100%;

    -webkit-transition: margin 1s;
       -moz-transition: margin 1s;
         -o-transition: margin 1s;
            transition: margin 1s;
}
.hidden
{
    display: none;
}
div.frame
{
    width: 100%;
    max-width: 1252px;
    margin: 0 auto;
}
#shadow
{
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;

    background: rgba(0,0,0,.5);
}
#desk_sidebar
{
    display: none;
}
/**************
HEADER
***************/
header
{
    position: relative;
    z-index: 5;

    float: left;

    width: 100%;

    color: #aaa;
    background: #000;
}
header#desktop
{
    display: none;
}
header a#logo
{
    display: block;
    float: left;

    margin: 10px 10px 6px 10px;
}
header a#logo img
{
    height: 36px;
}
header a.openlogin
{
    line-height: 30px;

    display: block;
    float: right;

    margin-top: 13px;
    margin-right: 24px;
    padding-right: 24px;

    text-decoration: none;

    color: #fff;
    background: url(../img/menu.svg);
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-background-size: 16px auto;
         -o-background-size: 16px auto;
            background-size: 16px auto;
}
header a.openlogin.openlog
{
    background: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-background-size: 16px auto;
         -o-background-size: 16px auto;
            background-size: 16px auto;
}
header div.subheader
{
    float: left;

    width: 100%;
    height: 34px;

    background: #e00000;
}
header div.subheader a.opencategory
{
    position: relative;

    display: block;
    float: left;

    width: 171px;
    height: 34px;
    padding: 9px 42px;

    text-decoration: none;

    color: #fff;
    background: red url(../img/search.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    -webkit-background-size: 20px 20px;
         -o-background-size: 20px;
            background-size: 20px;
}
header div.subheader a.opencategory img.triangle
{
    position: absolute;
    top: 12px;
    right: 8px;

    width: 10px;

    -webkit-transition: -webkit-transform .5s;
       -moz-transition:         transform .5s, -moz-transform .5s;
         -o-transition:      -o-transform .5s;
            transition: -webkit-transform .5s;
            transition:         transform .5s;
            transition:         transform .5s, -webkit-transform .5s, -moz-transform .5s, -o-transform .5s;
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}
header div.subheader a.opencategory img.triangle.rotate
{
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
header div.subheader a.subcta
{
    font-size: 12px;
    font-weight: bold;

    display: block;
    float: right;

    margin: 5px 10px 5px 0;
    padding: 4px 11px;

    text-decoration: none;

    color: #000;
    border: 1px solid #665000;
    background: #ffcb00;
}
header span.setname
{
    font-size: 20px;

    float: left;

    padding: 6px 15px;

    color: #fff;
}
/**************/

/***************
INDEX LIST
***************/
section#overview,
div.content
{
    position: relative;

    float: left;

    width: 100%;
    min-height: 100vh;
}
section#overview h2
{
    font-size: 22px;
    font-weight: normal;

    margin-bottom: 2px;
}
div.flex-content
{
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;
            flex-direction: row;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
    -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
       -moz-box-align: start;
    -ms-flex-align: start;
            align-items: flex-start;
}
div.flex-item
{
    width: 50%;
    margin-bottom: 8px;
    padding: 0 2px;
}
a.card
{
    display: block;

    width: 100%;
    margin-bottom: 20px;

    text-decoration: none;

    background: #ccc;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
}
a.card div.thumbnail
{
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 0;
    padding-bottom: 75%;
}
a.card div.thumbnail img.thumb
{
    position: absolute;
    top: -1%;
    left: -1%;

    width: 102%;
    min-height: 102%;

    -webkit-transition:         transform .15s;
    -webkit-transition: -webkit-transform .15s;
       -moz-transition:         transform .15s;
       -moz-transition:         transform .15s, -moz-transform .15s;
         -o-transition:         transform .15s;
         -o-transition:      -o-transform .15s;
            transition: -webkit-transform .15s;
            transition:         transform .15s;
            transition:         transform .15s, -webkit-transform .15s, -moz-transform .15s, -o-transform .15s;
}
a.card:hover div.thumbnail img.thumb.zoom
{
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}
a.card div.text
{
    position: relative;

    width: 100%;;
}
a.card div.text div.topbox span
{
    font-family: Helvetica,Arial,sans-serif !important;

    float: left;
    overflow: hidden;

    width: -webkit-calc(100% - 70px);
    width:    -moz-calc(100% - 70px);
    width:         calc(100% - 70px);

    white-space: nowrap;
       text-overflow: ellipsis;

    -o-text-overflow: ellipsis;
}
a.card div.text div.topbox
{
    position: absolute;
    bottom: -8px;
    left: 0;

    width: 100%;
}
a.card div.text .stars
{
    left: 0;

    float: left;

    width: 100%;
    padding: 3px 4px;
}
a.card div.text .infos
{
    font-size: 13px;

    float: left;

    width: 100%;
    padding: 2px 4px;

    color: #fff;
    background: rgba(0,0,0,.5);
    text-shadow: .5px .5px 1px black;
}
a.card div.text .infos span:nth-last-child(2)
{
    float: right;

    width: 70px;

    text-align: right;
}
a.card div.text .infos p.greet
{
    font-size: 9px;

    float: left;
    overflow: hidden;

    width: 100%;
    height: 0;
    margin: 4px 0;

    -webkit-transition: height .15s;
       -moz-transition: height .15s;
         -o-transition: height .15s;
            transition: height .15s;
}
a.card div.text .infos p.greet.greetup
{
    height: 24px;
}
a.card div.text .status
{
    font-size: 8px;
    line-height: 12px;

    position: absolute;

    width: 100%;
    height: 12px;
    padding: 0 4px;

    -webkit-transition-duration: .15s;
       -moz-transition-duration: .15s;
         -o-transition-duration: .15s;
            transition-duration: .15s;
    -webkit-transition-property: height,line-height;
       -moz-transition-property: height,line-height;
         -o-transition-property: height,line-height;
            transition-property: height,line-height;

    color: #000;
    background: #3c0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
}
a.card div.text .status.statup
{
    line-height: 20px;

    height: 20px;
}
a.card div.text .status span:nth-last-child(1)
{
    float: right;
}
.zero,
.half,
.full
{
    float: left;

    width: 10px;
    height: 10px;
    margin: 1px;
}
.zero
{
    background: url(../img/zero.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 100% 100%;
         -o-background-size: 100%;
            background-size: 100%;
}
.half
{
    background: url(../img/half.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 100% 100%;
         -o-background-size: 100%;
            background-size: 100%;
}
.full
{
    background: url(../img/full.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 100% 100%;
         -o-background-size: 100%;
            background-size: 100%;
}
/*******************
SETCARD
********************/
#showcam
{
    position: relative;
    z-index: 9;

    float: left;

    width: 100%;
    min-height: 100vh;
    margin-top: -89px;

    -webkit-transition: margin-top .5s;
       -moz-transition: margin-top .5s;
         -o-transition: margin-top .5s;
            transition: margin-top .5s;

    background: #212121;
}
#thiscam
{
    position: relative;

    float: left;

    width: 100%;
}
#cambox
{
    position: relative;

    float: left;

    width: 100%;
}
#cam
{
    position: relative;

    float: left;

    width: 100%;
    height: 0;
    padding-bottom: 75%;

    background: #000;
}
#cam .loading
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 80px;
    height: 80px;

    -webkit-transform: translate(-50%,-50%);
       -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
         -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}
#cam .loading:after
{
    position: relative;

    display: block;
    overflow: hidden;

    width: 80px;
    height: 80px;

    content: '';
    -webkit-animation-name: loading;
       -moz-animation-name: loading;
         -o-animation-name: loading;
            animation-name: loading;
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
         -o-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
       -moz-animation-iteration-count: infinite;
         -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;

    border-top: 4px solid #e00;
    border-right: 4px solid #e00;
    border-bottom: 4px solid #e00;
    border-left: 4px solid #000;
    -webkit-border-radius: 200px;
            border-radius: 200px;
}
@-webkit-keyframes loading
{
    0%
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@-moz-keyframes loading
{
    0%
    {
        -moz-transform: rotate(0deg);
             transform: rotate(0deg);
    }
    100%
    {
        -moz-transform: rotate(360deg);
             transform: rotate(360deg);
    }
}
@-o-keyframes loading
{
    0%
    {
        -o-transform: rotate(0deg);
           transform: rotate(0deg);
    }
    100%
    {
        -o-transform: rotate(360deg);
           transform: rotate(360deg);
    }
}
@keyframes loading
{
    0%
    {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
           -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
#camaction
{
    float: left;

    width: 100%;
}
#camaction .cambtns
{
    float: right;

    width: 100%;
}
#camaction .cambtns a.c_btn
{
    font-size: 16px;
    font-weight: bold;

    display: block;
    float: left;
    overflow: hidden;

    width: -webkit-calc(50% - 10px);
    width:    -moz-calc(50% - 10px);
    width:         calc(50% - 10px);
    margin: 10px 5px;
    padding: 10px 5px;

    text-align: center;
    text-decoration: none;

    -webkit-border-radius: 3px;
            border-radius: 3px;
}
a.c_btn.gold
{
    color: #000;
    background-color: #ffcb00;
    background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26%, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
    background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
}
a.c_btn.blue
{
    color: #fff;
    background:         -webkit-gradient(linear, left bottom, left top, from(rgb(102, 25, 25)), to(rgb(204, 51, 51)));
    background:         -webkit-linear-gradient(bottom, rgb(102, 25, 25) 0%, rgb(204, 51, 51) 100%);
    background:         -moz-linear-gradient(bottom, rgb(102, 25, 25) 0%, rgb(204, 51, 51) 100%);
    background:         -o-linear-gradient(bottom, rgb(102, 25, 25) 0%, rgb(204, 51, 51) 100%);
    background:         linear-gradient(to top, rgb(102, 25, 25) 0%, rgb(204, 51, 51) 100%);
}
#camaction .camoptions
{
    float: left;

    width: 100%;

    border-bottom: 1px solid #000;
}
#camaction .camoptions .desk_opt
{
    display: none;
}
#camaction .camoptions .mobi_opt
{
    float: left;

    width: 60px;
    height: 40px;
    margin: 0 -webkit-calc(16.665% - 30px);
    margin: 0 -moz-calc(16.665% - 30px);
    margin: 0 calc(16.665% - 30px);
}
#camaction .camoptions .mobi_opt:nth-child(1)
{
    border-bottom: 4px solid #e00;
    background: url(../img/interface/text.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: auto 20px;
         -o-background-size: auto 20px;
            background-size: auto 20px;
}
#camaction .camoptions .mobi_opt:nth-child(2)
{
    background: url(../img/interface/profile.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: auto 20px;
         -o-background-size: auto 20px;
            background-size: auto 20px;
}
#camaction .camoptions .mobi_opt:nth-child(3)
{
    background: url(../img/interface/info.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: auto 20px;
         -o-background-size: auto 20px;
            background-size: auto 20px;
}
#camchat
{
    float: left;

    width: 100%;
}
#camchat .desk_chat
{
    display: none;
}
#camchat .mobi_chat
{
    float: left;

    width: 100%;
    padding: 10px;
}
#camchat .mobi_chat input
{
    font-size: 16px;

    width: 100%;
    padding: 12px;

    color: #636363;
    border: 0;
    -webkit-border-radius: 0;
            border-radius: 0;
    outline: none;
    background: #fff;
}
#camchat .mobi_chat p
{
    color: #ccc;
}
section#setcard
{
    float: left;

    width: 100%;
    margin: 42px auto;
    padding: 0 2px;
}
div.picture
{
    float: left;

    width: 100%;
    margin-bottom: 15px;
    padding: 0 6px;

    background: #333;
}
div.picture p.title
{
    font-size: 28px;
    font-weight: bold;

    text-align: center;

    color: #fff;
}
div.pic
{
    position: relative;

    overflow: hidden;

    width: 142px;
    height: 108px;
    margin-left: -webkit-calc(50% - 71px);
    margin-left:    -moz-calc(50% - 71px);
    margin-left:         calc(50% - 71px);

    cursor: pointer;

    border: solid 2px #39c;
    -webkit-box-shadow: 0 0 35px 0 #ddd;
            box-shadow: 0 0 35px 0 #ddd;
}
div.pic img
{
    position: absolute;
    top: -1%;
    left: -1%;

    width: 102%;
    min-height: 102%;
}
div.picture p.subline
{
    font-size: 28px;

    text-align: center;

    color: #999;
}
div.picture div.action,
#desk_sidebar div.action
{
    float: left;

    width: 100%;
    margin-bottom: 24px;
}
div.picture div.action a,
#desk_sidebar div.action a
{
    font-weight: bold;

    display: block;
    float: left;

    width: 220px;
    margin-left: -webkit-calc(50% - 110px);
    margin-left:    -moz-calc(50% - 110px);
    margin-left:         calc(50% - 110px);
    padding: 12px;

    text-decoration: none;

    color: #000;
    border: 1px solid #cca000;
    background-color: #ffcb00;
    background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26%, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
    background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    text-shadow: 1px 1px 1px #fff;
}
div.picture p.login
{
    font-size: 12px;

    text-align: center;

    color: #fff;
}
div.picture p.login a
{
    color: #ffcb00;
}
div.other
{
    float: left;

    width: 100%;
}
div.other p.title
{
    font-size: 20px;

    margin-top: 0;
    margin-bottom: 6px;

    text-align: right;
}
div.other div.otheruser
{
    float: left;

    width: 50%;
    margin-bottom: 20px;
    padding: 0 2px;
}
div.other div.otheruser a
{
    display: block;
    float: left;

    width: 100%;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
}
div.other div.otheruser a div.otherthumb
{
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 0;
    padding-bottom: 75%;
}
div.other div.otheruser a div.otherthumb img
{
    position: absolute;
    top: -1%;
    left: -1%;

    width: 102%;
    min-height: 102%;
}
div.other div.otheruser a div.otherthumb p
{
    font-size: 12px;

    position: absolute;
    bottom: 0;

    width: 100%;
    margin: 0;
    padding: 2px 4px;

    text-decoration: none;

    color: #fff;
    background: rgba(0,0,0,.5);
    text-shadow: .5px .5px 1px black;;
}
div.more
{
    float: left;

    width: 100%;
}
div.more a.more
{
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;

    position: relative;

    display: block;
    float: right;
    overflow: hidden;

    width: auto;
    margin: 0;
    padding: 6px 18px 6px 8px;

    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
       text-overflow: ellipsis;

    color: #fff;
    border: 1px solid #b30e0e;
    background: #e00000 url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 99% center;
    -webkit-background-size: 16px auto;
         -o-background-size: 16px auto;
            background-size: 14px auto;

    -o-text-overflow: ellipsis;
}

section#setfacts
{
    float: left;

    width: 100%;
    margin: 42px 0;
    padding: 0 2px;
}
section#setfacts h1,
section#setfacts h2
{
    font-weight: normal;
}
section#setfacts ul
{
    float: left;

    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;
}
section#setfacts ul li
{
    float: left;

    width: auto;
    margin: 0;
    padding: 0;

    list-style: none;
}
section#setfacts ul li a.infonav
{
    font-size: 14px;
    line-height: 40px;

    display: block;
    float: left;

    height: 40px;
    padding: 0 30px;

    text-decoration: none;

    color: #fff;
    border: 1px solid #999;
    border-right: 1px solid #afafaf;
    background: #999;
}
section#setfacts ul li a.infonav:hover
{
    background: #808080;
}
section#setfacts ul li a.infonav.active
{
    background: #e00000;
}
section#setfacts div.infobox
{
    float: left;

    width: 100%;
    min-height: 300px;
    padding: 30px;

    border: 1px solid #999;
    background: #fff;
}
section#setfacts div.infobox div#infos,
section#setfacts div.infobox div#fotos,
section#setfacts div.infobox div#videos,
section#setfacts div.infobox div#kommentare
{
    float: left;

    width: 100%;
}
section#setfacts div.infobox div#fotos,
section#setfacts div.infobox div#videos,
section#setfacts div.infobox div#kommentare
{
    display: none;
}

section#setfacts div.infobox div.infohead
{
    float: left;

    width: 100%;

    border-bottom: 1px solid #ddd;
}
section#setfacts div.infobox div.right,
section#setfacts div.infobox div.left,
section#setfacts div.infobox div.left ul,
section#setfacts div.infobox div.left ul li
{
    line-height: 20px;

    float: left;

    width: 100%;
}
section#setfacts div.infobox div.left div.row
{
    float: left;

    width: 100%;
}
section#setfacts div.flex-content.box
{
    float: left;

    width: -webkit-calc(100% + 4px);
    width:    -moz-calc(100% + 4px);
    width:         calc(100% + 4px);
    margin-left: -2px;

    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
       -moz-box-pack: start;
    -ms-flex-pack: start;
            justify-content: flex-start;
}
section#setfacts div.alben
{
    position: relative;

    overflow: hidden;

    width: 182px;
    height: 138px;
    margin: 2px;

    border: 2px solid grey;
}
section#setfacts div.alben img
{
    position: absolute;
    top: -1%;
    left: -1%;

    width: 102%;
    min-height: 102%;

    cursor: pointer;
}
section#setfacts div.alben p.count
{
    position: absolute;
    right: 4px;
    bottom: 0;

    margin: 2px -2px;
    padding: 14px;

    color: #fff;
    border: 2px solid #ccc;
    background-color: #666;
}
section#setfacts div.alben p.count span
{
    font-size: 11px;
    line-height: 14px;

    position: absolute;
    bottom: 2px;
    left: 6px;

    width: 20px;
    height: 20px;
    padding: 1px;

    text-align: center;

    color: #666;
    border: 1px solid #ccc;
    background-color: #fff;
}
section#setfacts div.alben p.count span.count
{
    z-index: 1;
    top: 2px;
    right: 7px;
    left: 2px;

    text-align: center;
}
section#setfacts #kommentare div.row
{
    float: left;

    width: 100%;
}
/**************
FOOTER
***************/
footer
{
    float: left;

    width: 100%;
    padding: 12px;

    background: #000;
}
/**************
OVERLAY
***************/
#overlay
{
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;
    overflow: auto;

    background: rgba(255,255,255,.5);
}
#overlaybox
{
    position: absolute;
    top: 4vh;
    left: 50%;

    width: 96%;
    max-width: 420px;

    -webkit-transform: translate(-50%,-0%);
       -moz-transform: translate(-50%,-0%);
        -ms-transform: translate(-50%,-0%);
         -o-transform: translate(-50%,-0%);
            transform: translate(-50%,-0%);

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), to(#ababab));
    background-image: -webkit-linear-gradient(top, #fff 5%, #ababab 100%);
    background-image:    -moz-linear-gradient(top, #fff 5%, #ababab 100%);
    background-image:      -o-linear-gradient(top, #fff 5%, #ababab 100%);
    background-image:         linear-gradient(to bottom, #fff 5%, #ababab 100%);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .75);
}
#overlaybox .top
{
    position: relative;

    float: left;

    width: 100%;

    color: #fff;
    background: #000;
}
#overlay .top img
{
    float: left;

    height: 36px;
    margin: 10px 10px 6px 10px;
}
#overlay .top span.close
{
    font-size: 14px;
    font-weight: bold;

    position: absolute;
    top: 4px;
    right: 4px;

    cursor: pointer;
}
#overlay .title
{
    float: left;

    width: 100%;
    padding: 8px 4px;

    background: #e00000;
}
#overlay .title p
{
    font-size: 18px;

    margin: 0;

    text-align: center;

    color: #fff;
}
#overlay .formbox
{
    float: left;

    width: 100%;
    padding: 15px;
}
#overlay ul
{
    line-height: 28px;

    float: left;

    width: 100%;
    padding: 0;

    list-style: none;
}
#overlay ul li
{
    padding-left: 28px;
}
#overlay ul li:nth-child(1)
{
    background: url(../img/lips.svg);
    background-repeat: no-repeat;
    background-position: left center;
    -webkit-background-size: auto 24px;
         -o-background-size: auto 24px;
            background-size: auto 24px;
}
#overlay ul li:nth-child(2)
{
    background: url(../img/rate.svg);
    background-repeat: no-repeat;
    background-position: left 1px;
    -webkit-background-size: auto 22px;
         -o-background-size: auto 22px;
            background-size: auto 22px;
}
#overlay ul li:nth-child(3)
{
    background: url(../img/favorit.svg);
    background-repeat: no-repeat;
    background-position: 1px center;
    -webkit-background-size: auto 20px;
         -o-background-size: auto 20px;
            background-size: auto 20px;
}
#overlay ul li:nth-child(4)
{
    background: url(../img/hd.svg);
    background-repeat: no-repeat;
    background-position: 1px center;
    -webkit-background-size: auto 20px;
         -o-background-size: auto 20px;
            background-size: auto 20px;
}
#overlay ul li:nth-child(5)
{
    background: url(../img/research.svg);
    background-repeat: no-repeat;
    background-position: 1px center;
    -webkit-background-size: auto 19px;
         -o-background-size: auto 19px;
            background-size: auto 19px;
}

#overlay form#signupform
{
    float: left;

    width: 100%;
    margin: 15px 0;
}
#overlay form#signupform div.form-row
{
    float: left;

    width: 100%;
    margin-bottom: 15px;
}
#overlay form#signupform label.label
{
    font-size: 14px;

    float: left;

    width: 70px;
    height: 34px;
    padding: 10px;

    text-align: right;

    color: #fff;
    background: #e00000;
}
#overlay form#signupform input[type='text']
{
    font-size: 14px;

    float: left;

    width: -webkit-calc(100% - 70px);
    width:    -moz-calc(100% - 70px);
    width:         calc(100% - 70px);
    height: 34px;
    padding: 10px;

    border: 0;
}
#overlay form#signupform input[type='checkbox']
{
    float: left;

    width: 20px;
    height: 20px;
    margin-right: 4px;

    border: 0;
    background: #fff;
}
#overlay form#signupform input[type='checkbox']:checked
{
    outline: none;
    background: transparent url(../img/check.svg);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: 100% 100%;
         -o-background-size: 100%;
            background-size: 100%;
}
#overlay form#signupform span.agbtext
{
    float: left;

    margin-top: 6px;
}
#overlay form#signupform input[type='submit']
{
    font-size: 18px;
    font-weight: bold;

    float: right;

    padding: 6px 12px;

    cursor: pointer;

    color: #000;
    border: 0;
    border: 1px solid #cca000;
    background-color: #ffcb00;
    background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26%, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
    background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    text-shadow: 1px 1px 1px #fff;
}
#overlay form#signupform .form-error
{
    font-size: 10px;

    float: right;

    width: -webkit-calc(100% - 70px);
    width:    -moz-calc(100% - 70px);
    width:         calc(100% - 70px);
    padding: 4px;

    color: #a27b1b;
    background: #f7d174;;
}
#overlay img.mail-provider
{
    float: left;

    height: 34px;
    margin-right: 5px;
}
#overlay span.user-email
{
    line-height: 32px;
}
#overlay a
{
    color: #e00000;
}
#overlay .mail_btn
{
    font-size: 16px;
    font-weight: bold;

    float: left;

    margin: 15px 0;
    padding: 6px 12px;

    text-decoration: none;

    color: #000;
    border: 0;
    border: 1px solid #cca000;
    background-color: #ffcb00;
    background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26%, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
    background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    text-shadow: 1px 1px 1px #fff;;
}
#overlay .resend
{
    float: left;

    width: 100%;
}
#overlay p.disclaimers
{
    text-align: center;
}
/**************
menu-left
***************/
#menu-left
{
    position: absolute;
    z-index: 9;
    top: 89px;
    bottom: 0;
    left: 0;

    display: none;
    float: left;

    width: 220px;
    padding: 10px;

    color: #fff;
    background: #303030;
}
#menu-left div.action
{
    float: left;

    width: 100%;
    margin-bottom: 24px;
}
#menu-left div.action a
{
    font-weight: bold;

    display: block;
    float: left;

    width: 220px;
    margin-left: -webkit-calc(50% - 110px);
    margin-left:    -moz-calc(50% - 110px);
    margin-left:         calc(50% - 110px);
    padding: 12px;

    text-decoration: none;

    color: #000;
    border: 1px solid #cca000;
    background-color: #ffcb00;
    background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26%, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
    background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    text-shadow: 1px 1px 1px #fff;
}
#menu-left div.action a
{
    width: 180px;
    margin-left: 0;

    text-align: center;
}
#menu-left b.side_title
{
    font-size: 20px;
}
form#sidesearch
{
    float: left;

    width: 100%;
    margin-bottom: 30px;
}
form#sidesearch .option
{
    float: left;

    width: 100%;
    padding: 5px 0;
}
form#sidesearch select
{
    font-size: 14px;

    width: 100%;
    height: 34px;
    padding: 6px;

    color: #fff;
    border: 0;
    -webkit-border-radius: 0;
            border-radius: 0;
    background: #464646;

    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
form#sidesearch select.age
{
    float: left;

    width: -webkit-calc(50% - 5px);
    width:    -moz-calc(50% - 5px);
    width:         calc(50% - 5px);
}
form#sidesearch select.age:nth-child(2)
{
    float: right;
}
form#sidesearch input[type='submit']
{
    font-size: 14px;
    font-weight: bold;

    width: 120px;
    padding: 6px;

    color: #fff;
    border: 1px solid #666;
    background-color: #999;
    background-image: -webkit-linear-gradient( #828282, #999 50%, #a8a8a8);
    background-image: -webkit-gradient( linear, left top, left bottom, from(#828282), color-stop(50%, #999), to(#a8a8a8));
    background-image:    -moz-linear-gradient( #828282, #999 50%, #a8a8a8);
    background-image:      -o-linear-gradient( #828282, #999 50%, #a8a8a8);
    background-image:         linear-gradient( #828282, #999 50%, #a8a8a8);
    background-position: 0 100%;
    -webkit-background-size: auto 200%;
         -o-background-size: auto 200%;
            background-size: auto 200%;
}
/**************
menu-right
***************/
#menu-right
{
    position: absolute;
    z-index: 9;
    top: 0;
    right: -220px;
    bottom: 0;

    float: left;

    width: 220px;
    padding: 10px;

    -webkit-transition: right 1s;
       -moz-transition: right 1s;
         -o-transition: right 1s;
            transition: right 1s;

    color: #fff;
    background: #303030;
}
#check-toggle
{
    position: absolute;
    z-index: -1;

    display: none;

    width: 1px;
    height: 1px;
}
#menu-right form,
#menu-right form div
{
    float: left;

    width: 100%;
}
#menu-right form
{
    margin-bottom: 30px;
}
#menu-right form div input[type='text'],
#menu-right form div input[type='password']
{
    font-size: 14px;

    float: left;

    width: 100%;
    height: 32px;
    margin-bottom: 15px;
    padding: 4px;

    border: 0;
}
#menu-right form div input[type='submit']
{
    font-size: 14px;
    font-weight: bold;

    width: 120px;
    padding: 6px 4px;

    cursor: pointer;

    color: #fff;
    border: 1px solid #666;
    background-color: #999;
    background-image: -webkit-linear-gradient( #828282, #999 50%, #a8a8a8);
    background-image: -webkit-gradient( linear, left top, left bottom, from(#828282), color-stop(50%, #999), to(#a8a8a8));
    background-image:    -moz-linear-gradient( #828282, #999 50%, #a8a8a8);
    background-image:      -o-linear-gradient( #828282, #999 50%, #a8a8a8);
    background-image:         linear-gradient( #828282, #999 50%, #a8a8a8);
}
#menu-right div.action
{
    float: left;

    width: 100%;
    margin-bottom: 24px;
}
#menu-right div.action a
{
    font-weight: bold;

    display: block;
    float: left;

    width: 220px;
    margin-left: -webkit-calc(50% - 110px);
    margin-left:    -moz-calc(50% - 110px);
    margin-left:         calc(50% - 110px);
    padding: 12px;

    text-decoration: none;

    color: #000;
    border: 1px solid #cca000;
    background-color: #ffcb00;
    background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26%, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
    background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26%, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    text-shadow: 1px 1px 1px #fff;
}
#menu-right div.action a
{
    width: 180px;
    margin-left: 0;

    text-align: center;
}
/*******************
MEDIA QUERYS
********************/
@media only screen and (min-width: 480px)
{
    div.flex-item
    {
        width: 33.333333333%;
    }
}
@media only screen and (min-width: 640px)
{
    div.flex-item
    {
        width: 25%;
    }
    div.picture
    {
        width: -webkit-calc(66.666% - 15px);
        width:    -moz-calc(66.666% - 15px);
        width:         calc(66.666% - 15px);
        margin-right: 15px;
        padding: 15px;
    }
    div.other
    {
        width: -webkit-calc(33.333% - 15px);
        width:    -moz-calc(33.333% - 15px);
        width:         calc(33.333% - 15px);
        margin-left: 15px;
    }
    section#setfacts div.infobox div.right,
    section#setfacts div.infobox div.left
    {
        width: 50%;
    }
}
@media only screen and (min-width: 768px)
{
    form#sidesearch
    {
        display: none;
    }
    header#mobile,
    header#desktop div.login_desktop
    {
        display: none;
    }
    header#desktop
    {
        display: block;
    }
    header#desktop a.new
    {
        font-size: 13px;

        float: left;

        margin: 20px 4px 0 15px;

        text-decoration: none;

        color: #999;
    }
    header#desktop a.new:hover
    {
        color: #737373;
    }
    header#desktop div.subheader
    {
        height: 40px;
    }
    header#desktop div.headctr
    {
        float: right;

        width: 120px;
        margin: 9px 15px 0 0;
    }
    header#desktop div.headctr a
    {
        font-size: 11px;
        font-weight: bold;

        position: relative;

        display: block;

        width: 100%;
        padding: 12px;

        text-align: center;
        text-decoration: none;

        color: #000;
        background-color: #ffcb00;
        background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
        background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
        background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
        background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    }
    form#subsearch
    {
        float: right;

        width: auto;
        height: 40px;
        margin-right: 30px;
    }
    form#subsearch div.option
    {
        float: left;

        width: auto;
        height: 40px;

        color: #fff;
        border-right: 1px solid #e00000;
        background: #ccc;
    }
    form#subsearch div.option select::-ms-expand
    {
        /* for IE 11 */
        display: none;
    }
    form#subsearch div.option select
    {
        width: 85px;
        height: 40px;
        padding: 10px 10px;

        cursor: pointer;

        color: #fff;
        border: none;
        -webkit-border-radius: 0;
                border-radius: 0;
        outline: none;
        background: #b30e0e url(../img/triangle.svg);
        background-repeat: no-repeat;
        background-position: 90% center;
        -webkit-background-size: 10px 10px;
             -o-background-size: 10px;
                background-size: 10px;

        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }
    form#subsearch div.option select:hover
    {
        background: #8c0000 url(../img/triangle.svg);
        background-repeat: no-repeat;
        background-position: 90% center;
        -webkit-background-size: 10px 10px;
             -o-background-size: 10px;
                background-size: 10px;
    }
    form#subsearch div.option input
    {
        width: 85px;
        height: 40px;
        padding: 10px 10px;

        color: #fff;
        border: none;
        -webkit-border-radius: 0;
                border-radius: 0;
        background: #5cadd6;

        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }
    form#subsearch div.option input::-webkit-input-placeholder
    {
        color: #fff;
    }
    form#subsearch div.option input:-moz-placeholder
    {
        color: #fff;
    }
    form#subsearch div.option input::-moz-placeholder
    {
        color: #fff;
    }
    form#subsearch div.option input:-ms-input-placeholder
    {
        color: #fff;
    }
    form#subsearch div.option input::placeholder
    {
        color: #fff;
    }
    section#overview
    {
        float: right;

        width: -webkit-calc(100% - 220px);
        width:    -moz-calc(100% - 220px);
        width:         calc(100% - 220px);
        padding: 0 5%;

        -webkit-transition: width .5s;
           -moz-transition: width .5s;
             -o-transition: width .5s;
                transition: width .5s;
    }
    #desk_sidebar
    {
        line-height: 24px;

        position: absolute;
        z-index: 2;
        top: 22px;
        bottom: 0;
        left: 0;

        display: block;
        float: left;

        width: 220px;
        padding: 10px;

        -webkit-transition: left .5s;
           -moz-transition: left .5s;
             -o-transition: left .5s;
                transition: left .5s;

        color: #fff;
        border-right: 1px solid red;
        background: #303030;;
    }
    #open_desk_sidebar
    {
        font-weight: bold;

        position: absolute;
        top: 83px;
        right: -115px;

        width: 198px;
        padding: 4px 8px;

        cursor: pointer;
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        text-align: left;

        color: #fff;
        background: red;
    }
    #open_desk_sidebar img.triangle2
    {
        position: absolute;
        top: 10px;
        right: 8px;

        width: 10px;

        -webkit-transition: -webkit-transform .5s;
           -moz-transition:         transform .5s, -moz-transform .5s;
             -o-transition:      -o-transform .5s;
                transition: -webkit-transform .5s;
                transition:         transform .5s;
                transition:         transform .5s, -webkit-transform .5s, -moz-transform .5s, -o-transform .5s;
        -webkit-transform: rotate(180deg);
           -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
             -o-transform: rotate(180deg);
                transform: rotate(180deg);
    }
    #open_desk_sidebar img.triangle2.rotate
    {
        -webkit-transform: rotate(0deg);
           -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
             -o-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    #sidebarstatus
    {
        position: absolute;
        z-index: -1;

        display: block;

        width: 1px;
        height: 1px;
    }
    #desk_sidebar div.action a
    {
        width: 180px;
        margin-left: 0;

        text-align: center;
    }
    #desk_sidebar b.side_title
    {
        font-size: 20px;
    }
    #menu-left,
    #shadow
    {
        display: none !important;
    }
}

@media only screen and (min-width: 840px)
{
    section#overview
    {
        padding: 0 5%;
    }
    #showcam
    {
        margin-top: -95px;
    }
    #thiscam
    {
        position: absolute;
        top: 50%;
        left: 0;

        -webkit-transform: translate(0,-50%);
           -moz-transform: translate(0,-50%);
            -ms-transform: translate(0,-50%);
             -o-transform: translate(0,-50%);
                transform: translate(0,-50%);
    }
    #cambox
    {
        width: -webkit-calc(100% - 260px);
        width:    -moz-calc(100% - 260px);
        width:         calc(100% - 260px);
    }
    #cam
    {
        padding-bottom: 57%;
    }
    #camchat
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;

        width: 260px;

        background: #2d2d2d;
    }
    #camaction
    {
        background: #2d2d2d;
    }
    #camaction .cambtns a.c_btn.gold
    {
        width: 160px;
    }
    #camaction .cambtns a.c_btn.blue
    {
        width: -webkit-calc(100% - 180px);
        width:    -moz-calc(100% - 180px);
        width:         calc(100% - 180px);
    }
    #camaction .camoptions
    {
        float: left;

        width: 140px;

        border: none;
    }
    #camaction .camoptions .mobi_opt
    {
        display: none;
    }
    #camaction .camoptions .desk_opt
    {
        display: block;
        float: left;

        width: 35px;
        height: 56px;
    }
    #camaction .camoptions .desk_opt:nth-child(4)
    {
        background: url(../img/interface/sound.svg);
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: auto 20px;
             -o-background-size: auto 20px;
                background-size: auto 20px;
    }
    #camaction .camoptions .desk_opt:nth-child(5)
    {
        background: url(../img/interface/resize.svg);
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: auto 20px;
             -o-background-size: auto 20px;
                background-size: auto 20px;
    }
    #camaction .camoptions .desk_opt:nth-child(6)
    {
        background: url(../img/interface/option.svg);
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: auto 20px;
             -o-background-size: auto 20px;
                background-size: auto 20px;
    }
    #camaction .camoptions .desk_opt:nth-child(7)
    {
        background: url(../img/interface/reload.svg);
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: auto 20px;
             -o-background-size: auto 20px;
                background-size: auto 20px;
    }
    #camaction .cambtns
    {
        float: right;

        width: -webkit-calc(100% - 140px);
        width:    -moz-calc(100% - 140px);
        width:         calc(100% - 140px);
    }
    #camchat .mobi_chat
    {
        display: none;
    }
    #camchat .desk_chat
    {
        display: block;
        float: left;

        width: 100%;
    }
    #camchat .desk_chat .camname
    {
        font-size: 14px;

        float: left;

        width: 100%;
        padding: 2px 10px;

        color: #fff;
        background: #000;
    }
    #camchat .desk_chat .camname span
    {
        float: left;
    }
    #camchat .desk_chat .stars
    {
        float: left;

        padding: 2px 5px;
    }
    #camchat .desk_chat p
    {
        float: left;

        padding: 10px;

        color: #39c;
    }
    #camchat .desk_chat .chatfenster
    {
        font-size: 14px;

        float: left;

        width: -webkit-calc(100% - 20px);
        width:    -moz-calc(100% - 20px);
        width:         calc(100% - 20px);
        height: 95px;
        margin: 10px;
        padding: 10px;

        background: #fff;
    }
    #camchat .desk_chat input[type='text']
    {
        font-size: 14px;

        float: left;

        width: -webkit-calc(100% - 20px);
        width:    -moz-calc(100% - 20px);
        width:         calc(100% - 20px);
        margin: 10px;
        padding: 10px;

        border: 0;
        -webkit-border-radius: 0;
                border-radius: 0;
    }
    #camchat .desk_chat a.senden
    {
        font-size: 14px;
        font-weight: bold;

        display: block;
        float: right;

        margin: 10px;
        padding: 10px;

        text-decoration: none;

        color: #fff;
        border: 1px solid #ccc;
    }
}
@media only screen and (min-width: 940px)
{
    #camchat .desk_chat .chatfenster
    {
        height: 195px;
    }
}
@media only screen and (min-width: 1070px)
{
    #camchat .desk_chat .chatfenster
    {
        height: 270px;
    }
}
@media only screen and (min-width: 1200px)
{
    #menu-right
    {
        display: none;
    }
    #content
    {
        margin-left: 0 !important;
    }
    header#desktop a.openlogin
    {
        display: none;
    }
    header#desktop div.login_desktop
    {
        display: block;
        float: right;

        width: 340px;
        margin: 11px 15px 0 0;

        -webkit-transition: margin-top .5s;
           -moz-transition: margin-top .5s;
             -o-transition: margin-top .5s;
                transition: margin-top .5s;
    }
    header#desktop div.login_desktop form,
    header#desktop div.login_desktop form div
    {
        float: left;

        width: 100%;

        text-align: right;
    }
    header#desktop div.login_desktop form a
    {
        font-size: 8px;

        padding-right: 100px;

        text-decoration: none;

        color: #999;
    }
    header#desktop div.login_desktop form input[type='text'],
    header#desktop div.login_desktop form input[type='password']
    {
        float: left;

        width: 120px;
        height: 30px;
        margin-right: 4px;
        padding: 7px 5px;

        border: 1px solid #999;
    }
    header#desktop div.login_desktop form input[type='submit']
    {
        font-size: 14px;
        font-weight: bold;

        float: left;

        width: 70px;
        height: 30px;
        margin-right: 4px;
        padding: 6px 5px;

        cursor: pointer;
        -webkit-transition: background-position .15s;
           -moz-transition: background-position .15s;
             -o-transition: background-position .15s;
                transition: background-position .15s;

        color: #fff;
        border: 1px solid #666;
        background-color: #999;
        background-image: -webkit-linear-gradient( #828282, #999 50%, #a8a8a8);
        background-image: -webkit-gradient( linear, left top, left bottom, from(#828282), color-stop(50%, #999), to(#a8a8a8));
        background-image:    -moz-linear-gradient( #828282, #999 50%, #a8a8a8);
        background-image:      -o-linear-gradient( #828282, #999 50%, #a8a8a8);
        background-image:         linear-gradient( #828282, #999 50%, #a8a8a8);
        background-position: 0 100%;
        -webkit-background-size: auto 200%;
             -o-background-size: auto 200%;
                background-size: auto 200%;
    }
    header#desktop div.login_desktop form input[type='submit']:hover
    {
        background-position: 0 0;
    }
    header#desktop div.headctr
    {
        margin-top: 10px;
        margin-right: 40px;
    }
    header#desktop div.headctr a
    {
        font-size: 11px;
        font-weight: bold;
        line-height: 25px;

        display: block;

        width: 100%;
        height: 45px;
        padding: 12px;

        text-align: center;
        text-decoration: none;

        color: #000;
        background-color: #ffcb00;
        background-image: -webkit-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
        background-image:      -o-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
        background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 180, 0, .67)), color-stop(17.26, rgba(255, 210, 0, .67)), color-stop(47%, rgba(255, 252, 0, .67)), to(rgba(255, 252, 0, .67)));
        background-image:    -moz-linear-gradient(bottom, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
        background-image:         linear-gradient(to top, rgba(255, 180, 0, .67) 0%, rgba(255, 210, 0, .67) 17.26, rgba(255, 252, 0, .67) 47%, rgba(255, 252, 0, .67) 100%);
    }
    header#desktop div.headctr a:after
    {
        position: absolute;
        top: 0;
        right: -21px;

        display: block;

        width: 0;
        height: 0;

        content: '';

        border-right: 20px solid transparent;
        border-bottom: 45px solid rgba(255, 204, 0, .45);
        border-left: 0 solid transparent;
    }
    #camchat .desk_chat .chatfenster
    {
        height: 345px;
    }
}
@media only screen and (min-width: 1402px)
{
    div.flex-item
    {
        width: 20%;
    }
    #camchat .desk_chat .chatfenster
    {
        height: 455px;
    }
}
@media only screen and (min-width: 1746px)
{
    div.flex-item
    {
        width: 16.66666%;
    }
}
@media only screen and (min-width: 2013px)
{
    div.flex-item
    {
        width: 14.2857142857%;
    }
}
@media only screen and (min-width: 2280px)
{
    div.flex-item
    {
        width: 12.5%;
    }
}

  #GDPR_Hint,
  #GDPR_Hint * {
    all: unset;
    font-style: normal;
    font-weight: 100;
    font-size: xx-small;
    font-family: Verdana, Arial, Helvetica, sans-serif;
  }

  #GDPR_Hint {
    all: unset;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: #333333;
    color: #ffffff;
    z-index: 99999999;
    border-bottom: 1px solid #999999;
    box-sizing: border-box;
  }

  #GDPR_Hint a {
    color: #68c9e8;
    cursor: pointer;
  }

  #GDPR_Hint button {
    border-radius: 4px;
    border-width: 0;
    background-color: #ffb74c;
    color: #ffffff;
    margin-left: 10px;
    padding: 5px;
    cursor: pointer;
    font-weight: bolder;
  }

  p.gdpr-signup-form-disclaimer {
    padding: 0;
    margin: 0;
    font-weight: normal;
    font-size: 10px;
  }