/* Webfonts */ 
@font-face {
    font-family: 'Modelica-Bold';
    src: url('../fonts/BwModelica-Bold.woff2') format('woff2'),
        url('../fonts/BwModelica-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Modelica-Light';
    src: url('../fonts/BwModelica-Light.woff2') format('woff2'),
        url('../fonts/BwModelica-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Variable Definitions */ 
:root {
    --font-bold:'Modelica-Bold'; 
    --font-light:'Modelica-Light'; 

    /* margins, paddings */ 
    --padding-left:7%; 
    --padding-right:7%; 
    --padding-bottom:5%; 
    --padding-top:60px;

    --padding-input:9px; 

    --border-radius:5px; 

    /* colors */ 
    --white:white;
    --black:black;
    --green:#21b573; 
    --red:red; 

    --grey:rgb(195,195,195); 

    /* logged in pages */ 
    --bg-default:rgb(20,35,35);


    --error:rgba(109, 29, 17,0.95);
    --success:rgba(29,109,17,0.95);

    /* buttons */ 
    --button-height:42px; 
}


* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    font-family:var(--font-light);
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    width:100%;
    font-family:var(--font-light);
}

/* gradient bgs */ 
.gradient {
    background-repeat:repeat-y;
    background-size:100%;
}

.gradient-white 
{
    background-image:url('../images/gradient1.png'); 
}

.gradient-green 
{
    background-image:url('../images/gradient2.png'); 
}

.w35 
{
    width:35%; 
    position:relative;
    float:left;
    height:auto; 
}

.w65 
{
    width:65%; 
    position:relative;
    float:left;
    height:auto; 
}

/* Login */ 
.login-wrapper, .app-wrapper {
    height:100vh;
    position:relative;
}
.login-wrapper video:first-of-type {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}
.logo-wrapper {
    position: absolute;
    width:250px;
    left: 50%;
    z-index: 2;
    top: var(--padding-top);
    transform: translateX(-50%);
}
.logo-wrapper .logo-outlines 
{
    width:100%; 
}
.logo-wrapper .logo-number {
    width: 30%;
    position: absolute;
    left: 60%;
    transform: translateX(-60%);
    top: 20%;
    z-index: 3;
}
.rotateY {
    animation: rotationY 0.5s ease; /* Adjust the duration and timing function as needed */
}
.login-bottom {
    width: 100%;
    box-sizing: border-box;
    padding-left:15px;
    padding-right:15px;
    position: absolute;
    bottom:15px;
    z-index:3;
}
.login-bottom input, .sinput {
    width:100%; 
    font-size:16px; 
    box-sizing:border-box;
    padding:var(--padding-input); 
    border:none; 
    outline:none; 
    background-color:transparent;
    font-family:'Modelica-Light';
}
input::placeholder,textarea::placeholder 
{
    color:var(--black); 
}
.sinput option 
{
    -webkit-appearance:none;
}
.sinput option:checked 
{
    background-color:var(--green);
    color:var(--white);
}
.sinput:disabled
{
    background-color:var(--white)!important;
    opacity:1;
}
.border-radius 
{
    border-radius:var(--border-radius); 
    overflow:hidden;
}
.button, .mybutton
{
    width:100%; 
    float:left; 
    padding:var(--padding-input); 
    box-sizing:border-box;
    text-align:center;
    color:var(--white); 
    font-family:var(--font-bold);
    font-size:16px; 
    height:var(--button-height); 
    opacity:0.8; 
    transition:all 0.25s ease; 
    line-height:140%;
}
.button-animate 
{
    opacity:1; 
}

.button-disabled {
    background-image: url('../images/gradient5.png');
}

.notice, a {
    color: var(--white);
    font-size:18px;
}
a, b
{
    text-decoration:none;
    font-family:var(--font-bold);
}
.checkbox-container {
    width:25px;
    height:25px;
    float:left;
    border-radius:var(--border-radius); 
    background-color:rgb(255,255,255,0.64); 
    position:relative;
    transition:all 0.3s ease;
    box-sizing:border-box;
}
.checkbox-container.checked 
{
    background-color:var(--green);
}
.checkbox-container.small 
{
    width:25px;
    height:25px; 
}

.checkbox-label {
    margin-left:10px;
    float: left;
    width: calc(100% - 35px);
    line-height: 140%;
    font-size: 15px;
}
.checkbox-label.small 
{
    margin-left:10px;
    width:calc(100% - 35px); 
    font-size:15px;
}
p 
{
    font-size:15px;
    line-height:140%;
}
.label
{
    font-size:15px; 
}
.checkbox-label a 
{
    font-size:14px; 
}
.checkbox-img 
{
    position:absolute;
    left:50%; 
    top:50%; 
    transform:translateX(-50%) translateY(-50%);
    z-index:1; 
    width:50%; 
    display:none;
}
.checked .checkbox-img 
{
    display:block; 
}

input.error,select.error,textarea.error,.checkbox-container.error
{
    border:2px solid var(--error); 
} 

#message-wrapper {
    position: fixed;
    bottom:-100%;
    left:0px;
    width:100%;
    background-color:var(--error);
    z-index:4;
    box-sizing: border-box;
    padding:20px;
}

#message-wrapper.success 
{
    background-image:url('../images/gradient2.png');
    background-repeat:repeat-y; 
}

#message-wrapper.error 
{
    background-color:transparent;
    background-image:url('../images/gradient_red.png');
    background-repeat:repeat-y; 
}



#message-wrapper h2 
{
    font-size:20px;
    font-family:'Modelica-Bold';
    width:100%; 
    float:left;
    margin-bottom:5px; 
}

#message-wrapper p 
{
   width:100%; 
   float:left;
   font-family:'Modelica-Light';
   margin-top:5px;
   font-size:14px;
}

#loader {
    background-color:var(--black);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    z-index: 6;
    display:none; 
}

.w100.bg_white.pt50 {
    background-color: white;
    min-height: 100px;
    z-index: 2;
}

.w100.bg_white.pt25 {
    background-color: white;
    min-height:75px;
    z-index: 2;
}


/* Define keyframes for continuous Y-axis rotation */
@keyframes rotation {
    from {
        transform:translateX(-50%) translateY(-50%) rotateY(0deg);
    }
    to {
        transform:translateX(-50%) translateY(-50%) rotateY(360deg);
    }
}


@keyframes rotationY {
    from {
        transform:translateX(-60%) rotateY(0deg);
    }
    to {
        transform:translateX(-60%) rotateY(360deg);
    }
}

/* Apply the animation to an element */
.loaderimg {
    width:100px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    animation: rotation 1s linear infinite; /* Adjust the duration and timing function as needed */
}


/* Main Logged In */ 
.body-app 
{
    overflow:hidden;
    height:calc(100vh - 85px);
}

.app-wrapper {
    background-color:var(--bg-default);
}

#app-header {
    position: fixed;
    width: 100%;
    height: 85px;
    top: 0px;
    background-color: var(--black);
    z-index:2; 
    -webkit-box-shadow: 0px 5px 31px 5px rgba(0,0,0,0.21); 
    box-shadow: 0px 5px 31px 5px rgba(0,0,0,0.21);
    padding-left:0px;
}


.app-footer {
    position: fixed;
    width: 100%;
    height: 85px;
    bottom: 0px;
    background-color: var(--black);
    z-index:2; 
    -webkit-box-shadow: 0px -5px 31px 5px rgba(0,0,0,0.21); 
    box-shadow: 0px -5px 31px 5px rgba(0,0,0,0.21);
}

.header_gradient 
{
    width: 100%;
    position: absolute;
    height: 2px;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,0.4990371148459384) 0%, rgba(12,59,62,1) 4%, rgba(33,181,115,0.9164040616246498) 49%, rgba(3,18,11,1) 95%, rgba(0,0,0,0.2861519607843137) 100%);
    left: 50%;
    bottom: -12px;
    max-width: 65%;
    transform: translateX(-50%);
}



#app-header h1 
{
    font-family: 'Modelica-Bold';
    width: auto;
    position: absolute;
    font-size: 18px;
    text-align: center;
    bottom: 20px;
    left: 43%;
    transform: translateX(-43%);
    width: 75%;
}


#app-content {
    width: 100%;
    margin-top: 85px;
    height: calc(100vh - 170px);
    overflow: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    background-color: var(--bg-default);
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url('../images/gradient5.png');
    background-repeat: repeat-y;
    background-size:cover;
}

#app-content.hassubheader 
{
    height: calc(100vh - 214px);
}

#app-content.nopad 
{
    padding-left:0px; 
    padding-right:0px; 
}

#app-content::after {
    position: fixed;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 70%);
    content: "";
    width: 100vw!important;
    /* background-color: black; */
    bottom: 85px;
    opacity:0.5;
    pointer-events:none;
}

#app-content.hassubheader::after {
    bottom: 125px;
}



#app-content::before {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height:50px;
    background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 70%);
    content: "";
    width: 100vw!important;
    /* background-color: black; */
    top:0px;
    opacity:0.5;
    pointer-events:none;
}


/* Profile */ 
.profile-img-container {
    position:relative;
    width:160px;
    height:215px;
    overflow:hidden;
    background-color:transparent;
    margin:0 auto; 
}

.profile-right 
{
    width:calc(100% - 180px); 
    float:left;
    position:relative;
    margin-left:20px; 
}

img.profile-img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
    object-fit: cover;
}

.profile-player input 
{
    box-sizing:border-box;
    outline:none; 
    font-size:15px;
    border:none;
    padding:5px;
}

.profile-player-body input, .profile-player-body .sinput, .profile-player-body textarea 
{
    padding-left:10px!important;
    padding-right:10px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
    box-sizing:border-box;
}


.profile-player input:disabled
{
    background-color:var(--white); 
} 

.verein-container, .license-container-outer {
    display:none; 
}

#verein-name, .verein-name {
    background-image: url('../images/team.svg');
    background-repeat: no-repeat;
    background-size: auto 70%;
    background-position: left 7px center;
    padding-left: 40px!important;
    width: calc(100% - 50px);
    padding-top: 5px;
    padding-bottom: 5px;
    font-size:15px;
    box-sizing:content-box;
}

#verein-place, .verein-place {
    background-image:url('../images/location.svg');
    background-repeat:no-repeat;
    background-size:auto 80%; 
    background-position:left 7px center;
    padding-left:40px!important;
    width: calc(100% - 50px);
    padding-top: 5px;
    padding-bottom: 5px;
    font-size:15px;
    box-sizing:content-box;
}


#foot-container-left, #foot-container-right 
{
    width:45px;
    height:45px; 
    background-color:var(--grey); 
    float:right; 
    border-radius:var(--border-radius);
    background-size:auto 80%; 
    background-repeat:no-repeat;
    background-position:center center;
    transition:all 0.3s ease;
    margin-left:20px;
}

#foot-container-right 
{
    margin-left:15px;
}

#foot-container-left
{
    background-image:url('../images/foot_left.svg'); 
}

#foot-container-right
{
    background-image:url('../images/foot_right.svg'); 
}

#foot-container-left.active 
{
    background-color:var(--white);
    background-image:url('../images/foot_left_active.svg'); 
}

#foot-container-right.active
{
    background-color:var(--white);
    background-image:url('../images/foot_right_active.svg'); 
}

#app-content .sinput 
{
    background-color:var(--white);
    color:var(--black); 
    font-size:15px;
    border:none;
    padding:5px;
    -webkit-appearance:none;
    box-sizing:border-box;
}


.add-container 
{
    width:100%; 
    position:relative;
}

.add-icon 
{
    width:25px;
    height:25px; 
    float:right; 
    opacity:0.8; 
    cursor:pointer;
    transition: opacity 0.5s; /* Smooth transition */
}

.add-icon:active{
    opacity:1; 
}



.labeladd 
{
    width:auto;
    float:left;
}


.delete
{
    width:20px;
    height:20px; 
    position:absolute;
    right:5px; 
    top:50%; 
    transform:translateY(-50%);  
    opacity: 0.8; /* Initial opacity */
    transition: opacity 0.5s; /* Smooth transition */
    cursor: pointer; /* Show pointer cursor */
}

.delete:active{
    opacity:1;
}

#about, #additional_qualifications
{
    resize:none; 
    height:120px; 
    outline:none; 
    border:none;
    box-sizing:border-box;
    padding:10px;
    overflow-y:scroll; 
}


.app-footer .button 
{
    width:20%; 
    height:100%; 
    padding:0px; 
    margin:0px; 
}

.app-footer .button img 
{
    position:absolute;
    height:50%; 
    left:50%; 
    top:50%; 
    transform:translateX(-50%) translateY(-50%); 
}

.app-footer .button img.chat-icon
{
    height:40%; 
}

.app-footer .button img.profile-icon
{
    height:37%; 
}

.app-footer .button img.settings-icon
{
    height:37%; 
}


.app-footer .chat-newmessages
{
    position:absolute;
    width:100%; 
    top:45%; 
    text-align:center;
    transform:translateX(10px);
    z-index:3; 
} 

#profile-img-file
{
    display:none;
}


textarea 
{
    font-size:15px; 
}


/* override jquery confirm */ 
.jconfirm-content 
{
    overflow:hidden!important; 
}

.add-game-wrapper 
{
    position: absolute;
    height: 30px;
    left: var(--padding-left);
    z-index: 1;
    bottom: 10px;
    background-color: var(--green);
    border-radius: 5px;
    opacity: 0.8;
}

.add-game{
    position: relative;
    height: 25px;
    left: 0px;
    z-index: 1;
    cursor: pointer;
    transition: opacity 0.5s;
    float: left;
    margin-top: 3px;
    margin-left: 5px;
}

#app-header .add-game
{
    position: absolute;
    height: 25px;
    left: var(--padding-left);
    bottom: 10px;
    z-index: 1;
    cursor: pointer;
    transition: opacity 0.5s;
    opacity: 0.8;
    float:unset;
}

#app-header .goto-filter-games, .goto-filter
{
    position: absolute;
    height: 25px;
    right: var(--padding-right);
    bottom: 10px;
    z-index: 1;
    cursor: pointer;
    transition: opacity 0.5s;
    opacity: 0.8;
    float:unset;
}

input {
    font-size: 15px;
    outline: none;
    border: none;
    padding:5px;
}


#address {
    background-image: url('../images/address.svg');
    background-repeat: no-repeat;
    background-position: left 10px top 50%;
    background-size: auto 20px;
    padding-left: 40px!important;
}

#km_until_label 
{
    color:var(--green);
}

.goback  
{
    position: absolute;
    height: 25px;
    left: var(--padding-left);
    bottom: 10px;
    z-index: 1;
    cursor: pointer;
    transition: opacity 0.5s;
    opacity: 0.8;
}

.add-game-wrapper:active, .filter-wrapper:active, .add-game:active, .goback:active, .filter:active, .goto-filter-games:active
{
    opacity:1;
}


.add-game-label {
    font-family: 'Modelica-Bold';
    float: left;
    margin-left:5px;
    margin-right: 10px;
    margin-top: 5px;
    color:var(--white); 
}


.filter-wrapper 
{
    position: absolute;
    height: 30px;
    right: var(--padding-right);
    z-index: 1;
    bottom: 10px;
    background-color: var(--green);
    border-radius: 5px;
    opacity: 0.8;
    padding-left: 7px;
    padding-right: 10px;
}

.filter 
{
    position:relative;
    height:25px;
    left:0px;
    z-index:1;
    cursor:pointer;
    transition:opacity 0.5s;
    float:right;
    margin-top:3px;
    margin-right:5px;
}

.filter-label {
    font-family: 'Modelica-Bold';
    float:right;
    margin-left:5px;
    margin-right:0px;
    margin-top:5px;
    color:var(--white); 
}


div#app-subheader {
    position: fixed;
    z-index: 2;
    width: 100%;
    bottom: 85px;
}

#app-subheader .button.w50 
{
    width: 50%;
    background-image: url('../images/gradient3.png');
    background-size: contain;
    border-radius: 5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:'Modelica-Light';
}



#app-subheader .button.w33 
{
    background-image: url('../images/gradient3.png');
    background-size: contain;
    border-radius: 5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:'Modelica-Light';
}




#app-subheader .button.w25 
{
    background-image: url('../images/gradient3.png');
    background-size: contain;
    border-radius: 5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:'Modelica-Light';
    width:25%; 
}


#app-subheader .button.button_active 
{
    font-family:'Modelica-Bold';
    background-image:url('../images/gradient2.png');
}


.tournament-item, .list-item, .team-item
{
    width:100%; 
    float:left;
    position:relative; 
    padding:15px;
    box-sizing:border-box;
    background-color:var(--white);
    margin-bottom:15px;
    border-radius:5px; 
}

.membercount {
    position: absolute;
    z-index:3;
    width: auto;
    min-width:20px;
    height: 20px;
    background-color: var(--green);
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    right:0px;
    top:0px;
    color: white!important;
    line-height: 130%;
    font-family:'Modelica-Bold';
    opacity:0.75;
}

.tournament-date {
    padding-left: 30px;
    width: calc(100% - 30px);
    float: left;
    margin-top: 10px;
    background-image: url('../images/date.svg');
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: left center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
}


.tournament-location {
    padding-left: 30px;
    width: calc(100% - 30px);
    float: left;
    margin-top: 10px;
    background-image: url('../images/location.svg');
    background-repeat: no-repeat;
    background-size: auto 25px;
    background-position: left center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
}


.tournament-goal {
    padding-left: 40px!important;
    width:100%;
    float: left;
    margin-top: 10px;
    background-image: url('../images/goal.svg');
    background-repeat: no-repeat;
    background-size: auto 15px;
    background-position: left 5px center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    box-sizing:border-box;
}


.tournament-address {
    padding-left: 40px!important;
    width:100%;
    float: left;
    margin-top: 10px;
    background-image: url('../images/location.svg');
    background-repeat: no-repeat;
    background-size: auto 18px;
    background-position: left 10px center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    box-sizing:border-box;
}


.tournament-trainer {
    padding-left: 45px;
    width: calc(100% - 45px);
    float: left;
    margin-top: 10px;
    background-image: url('../images/trainer.svg');
    background-repeat: no-repeat;
    background-size: auto 18px;
    background-position: left 10px center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    box-sizing:border-box;
}


.tournament-gender {
    padding-left: 45px!important;
    padding-right:0px!important;
    width: calc(100% - 45px);
    float: left;
    margin-top: 10px;
    background-image: url('../images/gender.svg');
    background-repeat: no-repeat;
    background-size: auto 18px;
    background-position: left 10px center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    box-sizing:content-box!important;
}



.tournament-item .title 
{
    font-size:18px; 
}

.pad5 
{
    padding:5px; 
    font-size: 15px;
    box-sizing:border-box;
    height:28px; 
}

input:disabled
{
    background-color:var(--white);
    color:var(--black);
    border:none;
    outline:none; 
}

.member 
{
    margin-top:0px; 
}

.trainer-only 
{
    display:none; 
}

.date-container, .time-container
{
    display:none;
}

.button-bottom {
    width: 100%;
    position: fixed;
    bottom: 120px;
    z-index: 3;
    left: 0px;
}

div#app-content.reduced {
    height: calc(100vh - 300px);
}

.player-item {
    width: calc(50% - 10px);
    float: left;
    height:auto; 
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 20px;
    margin-right: 10px;
    box-sizing: border-box;
    border-radius:5px;
    position:relative;
}

.player-item:nth-of-type(2n)
{
    margin-right:0px;
    margin-left:10px; 
}

.nvisible 
{
    visibility:hidden;
}

.player-bottom {
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.5);
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
}

.player-item .title 
{
    width:100%; 
    margin-bottom:5px;
    float:left;
    font-family:'Modelica-Bold';
}

.tournament-team {
    width: calc(100% - 40px);
}






.chat-image {
    height: 80%;
    position: absolute;
    width: 17%;
    top: 50%;
    left: 7%;
    background-size: cover;
    transform: translateY(-50%);
    border-radius: 5px;
}


.chat-content {
    width: 75%;
    margin-left: 25%;
    float: left;
}


.message-item {
    background-color: var(--white);
    padding:3%;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom:20px; 
}

.message-other
{
    width:80%;
    margin-right:20%; 
}

.message-self
{
    width:80%;
    margin-left:20%; 
}


.w100.message-bottom {
    position: fixed;
    width: 84%;
    bottom: 85px;
    left: 7%;
    z-index: 2;
}

textarea#message-text {
    min-height:75px;
    border-radius:5px;
    resize:none;
    box-sizing:border-box;
    padding:10px; 
}


.requests-content {
    width: calc(75% - 50px);
}

.chat-request {
    position: absolute;
    width: 40px;
    bottom:0px;
    right:80px;
    z-index:1;
}

.accept-request {
    position: absolute;
    width: 40px;
    bottom:0px;
    right:40px;
    z-index:1;
}

.delete-request {
    position: absolute;
    width: 40px;
    bottom:0px;
    right:0px;
    z-index:1;
}

input, select, textarea
{
    background-color:white!important;
    -webkit-appearance:none;
    color:var(--black)!important;
}

.tournament-item *{
    color:black;
}
.message-item * {
color:black;
}
.inputerrors
{
    display:none; 
}
#username-birthdate
{
    -webkit-appearance:none;
}

#username-birthdate::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.parent-container
{
    display:none;
}

#username-birthdate-trigger {
    background-image: url('../images/date.svg');
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: top 50% right 10px;
}

img.tournament-icon {
    height: 40%!important;
}


.list-item-img-container 
{
    width:97px; 
    height:130px; 
    position:relative;
    float:left; 
}

.ch-container 
{
    width:97px;
    height:auto;
    position:relative;
    float:left; 
}


.ch-container .title 
{
    background-color: white;
    width: 100%;
    z-index: 2;
    font-size: 14px!important;
}

.chat-button {
    position: absolute;
    width: 100%;
    bottom: 0px;
    font-size: 14px!important;
}

.mr20 
{
    margin-right:20px; 
}

.list-img {
    position: absolute;
    left: 51%;
    top: 50%;
    width: 97%;
    transform: translateX(-50%) translateY(-50%);
    height: 100%;
    object-fit: cover;
}


.list-right-container {
    width: calc(100% - 120px);
    float:left;
    margin-left:20px;
    position:relative;
    min-height:107px; 
}


.list-item .title
{
    font-size:20px; 
    color:var(--black);
}

.list-item .button, .list-item .mybutton {
    line-height: 130%;
    float: left;
    font-size: 16px;
    height: auto;
}

.list-item .button:active 
{
    opacity:1;
}


.profile-unselected 
{
    opacity:0.6;
}

.profile-selected 
{
    opacity:1;
}


.button-change-image {
    width: 160px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    pointer-events:none; 
}

.fr 
{
    float:right!important;
}

.list-strengths 
{
    display:none; 
}



.team-item {
    padding-left:65px;
    background-image: url('../images/team.svg');
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: auto 50%;
    color:var(--black);
}


.team-item .checkbox-container {
    border: 2px solid var(--green);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}



/*********** Baseline, reset styles ***********/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    padding:0px!important;
  }
  
  /* Removes default focus */
  input[type="range"]:focus {
    outline: none;
  }
  
  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
  /* slider track */
  input[type="range"]::-webkit-slider-runnable-track {
    background-color:transparent;
    height: 0.5rem;
  }
  
  /* slider thumb */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -4px; /* Centers thumb on the track */
    background-color: var(--green);
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
    z-index:2;
  }
  
  input[type="range"]:focus::-webkit-slider-thumb {
    outline: 3px solid var(--green);
    outline-offset: 0.125rem;
    z-index:2;
  }
  
  /*********** Firefox styles ***********/
  /* slider track */
  input[type="range"]::-moz-range-track {
    background-color: var(--white);
    border-radius: 0.5rem;
    height: 0.5rem;
  }
  
  /* slider thumb */
  input[type="range"]::-moz-range-thumb {
    background-color: var(--green);
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0.5rem;
    height: 1rem;
    width: 1rem;
    z-index:2;
  }
  
  input[type="range"]:focus::-moz-range-thumb{
    outline: 3px solid var(--green);
    outline-offset: 0.125rem;
    z-index:2;
  }


/* right side background */
input[type="range"]::-webkit-slider-runnable-track::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% + 0.5rem);
    height: 100%;
    background-color: rgba(0, 128, 0, 0.5); /* Adjust color and opacity as needed */
    z-index:2;
}


.strength-range {
    background-color: transparent!important;
    z-index: 2;
}


.tright 
{
    text-align:right;
}



.range-active {
    position: absolute;
    z-index: 1;
    height: 8px;
    background-color: var(--green);
    left: 0px;
    top: 2px;
    width: 50%;
    pointer-events:none;
}



.view-normal 
{
    display:block;
}

.view-report
{
    display:none;
}



.buttonsmall {
    text-align: left;
    padding-left: 55px;
    font-family: var(--font-light);
    font-size:14px;
    position:relative;
    padding-right:0px;
}

img.buttion-icon {
    position: absolute;
    height: 70%;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}


.delbutton {
    background-image:url('../images/gradient_red.png');
    color: white;
    opacity:1;
}

.button-gotogame 
{
    opacity:1;
}
.cwhite 
{
    color:white; 
}


.show-password, .show-password-repeat {
    width: 25px;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}


.w33 
{
    width:33.3%; 
    float:left; 
}


.jconfirm .jconfirm-box div.jconfirm-title-c
{
    color:var(--black);
    font-family:'Modelica-Bold';
}

.jconfirm-content 
{
    color:var(--black);
    font-family:'Modelica-Light';
}

.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button
{
    font-family:'Modelica-Light';
}


.strength, #average
{
    background-color:transparent!important;
    color:var(--white)!important;
    text-align:right;
}

.largertext {
    font-size: 16px!important;
}

.imgrotate 
{
    transform:translateX(-50%) translateY(-50%) rotate(90deg)!important; 
}


.emoji{width:1.5em;height:1.5em;display:inline-block;margin-bottom:-.25em;background-size:contain}

#app-content .heading 
{
    font-size:20px; 
    font-family:'Modelica-Bold';
}


.count_chat, .count_requests {
    float: left;
    margin-left: 10px;
    background-color:var(--white);
    padding: 5px;
    border-radius: 5px;
    color: var(--black); 
    padding-top: 0px;
    padding-bottom: 0px;
}


.textcontainer h2
{
    color:var(--white);
    font-family:'Modelica-Bold';
    font-size:20px;
    width:100%;
    float:left;
    margin-top:20px;
    margin-bottom:20px;
}

.textcontainer h3
{
    color:var(--white);
    font-family:'Modelica-Bold';
    font-size:18px;
    width:100%;
    float:left;
    margin-top:20px;
    margin-bottom:20px;
}

.textcontainer p
{
    color:var(--white);
    font-family:'Modelica-Light';
    font-size:16px;
    width:100%;
    float:left;
    margin-bottom:10px;
}


.textcontainer a
{
    color:var(--green);
    font-family:'Modelica-Light';
    font-size:16px;
    width:100%;
    float:left;
}


.textcontainer ul
{
    color:var(--white);
    font-family:'Modelica-Light';
    font-size:16px;
    width:calc(100% - 20px);
    float:left;
    margin-bottom:10px;
    list-style:disc;
    margin-left:20px;
}

.textcontainer ul li
{
    width:100%;
    float:left;
    margin-bottom:10px;
    line-height:140%;
}

.outlinedbox {
    width: 100%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid var(--white);
    margin-top: 20px;
    margin-bottom: 20px;
}


/* Cookie Banner consent */ 
div#cookie-banner {
    position: fixed;
    background-color: black;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    box-sizing: border-box;
    padding: 5%;
    display:none;
}


div#cookie-banner-inner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 90%;
    left: 5%;
}


#cookie-banner h2 
{
    font-size:24px; 
    font-family:'Modelica-Bold';
    width:100%;
    float:left;
    margin-bottom:20px;
}



#cookie-banner p
{
    color:var(--white);
    font-family:'Modelica-Light';
    font-size:16px;
    width:100%;
    float:left;
    margin-bottom:20px;
}


#cookie-banner a
{
    color:var(--green);
    font-family:'Modelica-Light';
    font-size:16px;
    width:100%;
    float:left;
    margin-bottom:20px;
}



/* Styling Adjusts for Tablets */
@media only screen and (min-width: 768px) and (max-width: 1280px) {
    /* Styles for tablets */
    /* Add your tablet-specific styles here */
    
}



@media only screen and (max-width:400px)
{

    #app-subheader .button.w25
    {
        font-size:11px;
    }
    
}


@media only screen and (max-width:375px)
{
    .notice, a 
    {
        font-size:16px; 
    }


    #app-subheader .button.w25
    {
        font-size:10px;
    }

    .registration input, .registration .sinput
    {
        font-size:15px; 
        padding:7px; 
    }

    .registration p 
    {
        font-size:14px; 
    }

    .registration .mb15
    {
        margin-bottom:10px; 
    }

}





/* Backend */ 
.backend-notice 
{
    position:absolute; 
    right:15px; 
    top:15px; 
    z-index:3;
    padding:10px;
    background-color:var(--white); 
    text-align:left;
    color:var(--black); 
    border-radius:var(--border-radius);
    opacity:0.8;
}


.errors p 
{
    color:var(--white); 
    width:100%; 
    float:left; 
}


.errors {
    background-color:var(--error);
    padding: 5px;
    box-sizing: border-box;
    display:none;
}


#navi {
    position:fixed;
    left:0;
    top:0;
    background-color:var(--black);
    width:210px;
    height:100%;
    padding-top:0px;
    padding-left:0px;
    padding-right:0px;
}

#content-backend {
    position:relative;
    margin-left:210px;
    width:calc(100% - 270px);
    padding:30px;
    float:left;
    background-color:var(--white);
    min-height:calc(100vh - 60px);
}

#content-backend * 
{
    color:var(--black); 
}

#content-backend h2 
{
    font-size:26px; 
    font-family:'Modelica-Bold';
}

#content-backend p 
{
    font-size:14px; 
    font-family:'Modelica-Light';
}


.box-grey {
    background-color: #23282d;
    padding: 2%;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 4px;
}

.box-grey:hover {
    cursor: pointer;
    background-color:var(--green);
}


.box-img {
    width: 50px;
    height: 50px;
    margin-left: 50%;
    transform: translateX(-50%);
}


.cwhite 
{
    color:var(--white)!important; 
}

.mt15 
{
    margin-top:15px; 
}


.navi-item {
    width: calc(95% - 40px);
    position: relative;
    padding: 5%;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 40px;
    float: left;
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 1.1em;
    color: white;
}

.navi-item:hover, .navi-item.active {
    background-color:var(--green);
}


#navi .icon 
{
    background-repeat: no-repeat;
    background-size: cover;
    height: 15px;
    position: absolute;
    width: 15px;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-dashboard {
    background-image: url(../images/dashboard.svg);
}

.icon-appuser {
    background-image: url(../images/customer.svg);
}

.icon-media {
    background-image: url(../images/media.svg);
}

.icon-statistics {
    background-image: url(../images/statistics.svg);
}

.icon-report {
    background-image: url(../images/report.svg);
}

.icon-support {
    background-image: url(../images/support.svg);
}

.icon-logout {
    background-image: url(../images/logout.svg);
}

.icon-push {
    background-image: url(../images/push.svg);
}

.icon-l {
    width: 20px!important;
    height: 20px!important;
}


span.nav-text {
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 100%;
    font-family: 'Modelica-Light';
}


.list-item {
    width: calc(100% - 20px);
    padding: 10px;
    background-color: rgb(220,220,220);
    float: left;
    margin-bottom: 7px;
    border-radius: 4px;
    position: relative;
    box-sizing:content-box;
}

.notlocked {
    opacity: 0.3;
}

.list-lock-icon {
    width: 20px;
    height: 20px;
    float: right;
    margin-right: -30px;
    margin-left: 10px;
    opacity: 0.6;
    cursor: pointer;
}

.list-edit-icon {
    width: 20px;
    height: 20px;
    float: right;
    margin-right: 20px;
    margin-left: 50px;
    opacity: 0.6;
    cursor:pointer; 
}

.list-delete-icon {
    width: 20px;
    height: 20px;
    float: right;
    margin-right: 0px;
    opacity: 0.6;
    cursor:pointer;
}

.icon-os 
{
    position:absolute;
    right:140px;
    top:50%; 
    transform:translateY(-50%); 
    width:20px; 
}

input::placeholder 
{
    color:var(--black)!important; 
}

.bg_grey 
{
    background-color:rgb(240,235,240); 
    padding:20px; 
    box-sizing:border-box;
}

h3 
{
    font-size:18px; 
    font-family: 'Modelica-Bold';
    margin-bottom:30px; 
}


.list-item.active 
{
    background-color:var(--green); 
}

img.list-image {
    position: absolute;
    height: 100%;
    left: 0px;
    top: 0px;
}
.list-item-img {
    padding-left: 50px;
    padding-right: 0px;
    width: calc(100% - 50px);
}


.image-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns */
    gap: 10px; /* Adjust the gap between images */
    padding: 10px; /* Optional: Add some padding around the container */
}

.image-container .media-item {
    width: 100%;
    object-fit: cover; /* Ensure images maintain aspect ratio and cover the box */
    height: auto; /* Maintain original aspect ratio */
}

img.media-img {
    width: 100%;
}

a.media-button {
    width: 100%;
    float: left;
    background-color: var(--green);
    color: var(--white)!important;
    text-align: center;
    font-family: var(--font-light);
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}

a.button {
    width: 100%;
    float: left;
    background-color: var(--green);
    color: var(--white)!important;
    text-align: center;
    font-family: var(--font-light);
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}


a.delete-button {
    width: 100%;
    float: left;
    background-color: var(--red);
    color: var(--white)!important;
    text-align: center;
    font-family: var(--font-light);
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
    margin-top:5px; 
}


.largetext
{
    font-size:24px;
}


.landingpage h2 
{
    font-size:25px; 
}

.description-wrap {
    width: 100%;
    position: relative;
    left: 0px;
    margin-top:205px; 
    z-index:2;
    padding-bottom:50px; 
}

.appstore-logo {
    width:200px;
    float:left;
    opacity:0.8;
    cursor:pointer; 
    margin-right:30px; 
}

.googlestore-logo 
{
    width:200px; 
    float:left; 
    opacity:0.8;
    cursor:pointer; 
}


.appstore-logo:hover, .googlestore-logo:hover 
{
    opacity:1;
    transition:all 0.5s ease; 
}


.link-container 
{
    width: 430px;
    margin: 0 auto;
    display: table;
    float: unset;
}


.landingfooter #footer {
    position: fixed;
    bottom: 0px;
    left: 50%;
    z-index: 222222;
    transform: translateX(-50%);
    width: 100%;
    background: black;
    padding-top: 25px;
    padding-bottom: 25px;
    z-index: 999;
}

.landingfooter #footer a 
{
    font-family:'Modelica-Light';
    font-size:16px; 
}

.landingfooter #footer a:hover 
{
    font-family:'Modelica-Bold';
}


.mt50 
{
    margin-top:50px; 
}

.mt70 
{
    margin-top:70px; 
}

.mt100 
{
    margin-top:100px; 
}

.splist {
    float: left;
    text-align: left;
    margin: 0 auto;
    display: table;
    float: unset;
    width: auto;
    padding-top: 20px;
    list-style: disc;
    line-height:120%;
}

.landingpage p, .landingpage li, .landingpage a
{
    font-size:16px; 
    line-height:120%;
}




.cookie-disclaimer {
    background-color: black;
    height: 80px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999999;
    font-size: 0.8em;
    box-sizing: border-box;
    padding: 20px;
    display: none;
}

.cookie-disclaimer .button-white {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.button-white {
    font-family:'Modelica-Light';
    background-color: none;
    text-decoration: none;
    padding: 20px;
    color: white;
    font-size: 1.3em;
    margin: 0 auto;
    display: block;
    width: 170px;
    border: 3px solid white;
    text-align: center;
    text-transform: uppercase;
}

.button-white:hover 
{
	cursor:pointer;
	background-color:white;
	color:black;
}


.insta {
    position: fixed;
    width: 35px;
    right: 10px;
    bottom: 100px;
    z-index:9999;
    opacity:0.8;
    transition:all 0.5s ease;
    background-color:white; 
    padding:5px;
    border-radius:5px;
}

.insta:hover 
{
    opacity:1;
}

.insta img 
{
    width:35px; 
}

.facebook {
    position: fixed;
    width: 35px;
    right: 65px;
    bottom: 100px;
    z-index:9999;
    opacity:0.8;
    transition:all 0.5s ease;
    background-color:white; 
    padding:5px;
    border-radius:5px;
}

.facebook:hover 
{
    opacity:1;
}

.facebook img 
{
    width:35px; 
}


@media all and (max-width: 1280px)
{
    .image-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
        gap: 10px; /* Adjust the gap between images */
        padding: 10px; /* Optional: Add some padding around the container */
    }

}
	



@media all and (max-width: 1000px)
{
	
	
	.nav-text
	{
		display:none;
	}
	
	
	#navi
	{
		width:40px;
	}
	
	
	#content-backend
	{
   		 width: calc(100% - 100px);	
		margin-left: 40px;
	}
	
	
	
	.navi-item {
		width: calc(95% - 20px);
		position: relative;
		padding: 5%;
		padding-top: 15px;
		padding-bottom: 25px;
		padding-left: 20px;
		float: left;
		font-family: 'Open Sans';
		font-weight: 400;
		font-size: 1.1em;
		color: white;
	}
	
    #navi .icon
    {
        left:50%; 
        transform:translateX(-50%) translateY(-50%);
    }
	
}



@media all and (max-width: 830px)
{
	
	
	/* Change from 3 Columns to 1 Column */ 
	.w28
	{
		width:94%;
		margin-bottom:20px;
	}
	
	.w2
	{
		display: none;
	}
	
	.hidemobile
	{
		display:none;
	}


}
	
	




@media all and (max-width: 430px)
{
	.link-container 
    {
        width:100%; 
        display:block; 
    }

    .appstore-logo 
    {
        margin-right:0px;
        width:200px;
        margin:0 auto;
        display:table;
        float:unset;
    }

    .googlestore-logo
    {
        margin-right:0px;
        width:200px;
        margin:0 auto;
        display:table;
        float:unset;
        margin-top:20px; 
    }


    .logo-wrapper 
    {
        width:200px; 
    }

}



/* Cookie BS */ 


/* Mobile.css */ 

@media screen and (max-width:1700px)
{
	img.logo-large 
	{
		width:100%;
	}
}


@media screen and (max-width:1500px)
{
	img.logo-large 
	{
		width:125%;
	}
}






@media screen and (max-width:1025px)
{
	.ratingbox .w12
	{
		width:4%; 
	}
	
	.rating-item 
	{
		width:22%;
		min-height:230px;
	}
	
	.cookie-disclaimer 
	{
		height:100px;
	}

	#fullpage > div.section.fp-section.fp-table.active.fp-completely > div > div > div > div > div:nth-child(15) {
		display: none;
	}

	.grid-break
	{
		margin-left:2%;
	}

	#st-2
	{
		top:0px!important; 
		left:0px!important;
		font-family: "Helvetica Neue", Verdana, Helvetica, Arial, sans-serif!important;
		-moz-transition: all 0.2s ease-in!important;
		-ms-transition: all 0.2s ease-in!important;
		-o-transition: all 0.2s ease-in!important;
		-webkit-transition: all 0.2s ease-in!important;
		transition: all 0.2s ease-in!important;
		backface-visibility: hidden!important;
		display: block!important;
		position: fixed!important;
		opacity: 1!important;
		text-align: left!important;
		z-index: 94034!important;
		width:40px!important;
		height:120px!important;  
	}


	#st-2 .st-btn {
		-moz-box-sizing: border-box!important; 
		-webkit-box-sizing: border-box!important; 
		box-sizing: border-box!important; 
		-moz-transition: all 0.2s ease-in!important; 
		-ms-transition: all 0.2s ease-in!important; 
		-o-transition: all 0.2s ease-in!important; 
		-webkit-transition: all 0.2s ease-in!important; 
		transition: all 0.2s ease-in!important; 
		border: none!important; 
		cursor: pointer!important; 
		display: inline-block!important; 
		font-size: 12px!important; 
		height: 40px!important; 
		line-height: 20px!important; 
		margin-bottom: 0px!important; 
		opacity: 1!important; 
		overflow: hidden!important; 
		padding: 10px!important; 
		position: relative!important; 
		text-align: left!important; 
		top: 0!important; 
		vertical-align: top!important; 
		white-space: nowrap!important; 
		width: 40px!important; 
	}


	#st-2 > div {
		clear: left!important;
		float: left!important;
	}

    


}



@media screen and (max-width:1000px)
{
	.service-item 
	{
		width:100%;
		margin-bottom:2%;
		min-height:0px!important;
		padding:20px;
	}
	
	.hideMid 
	{
		display:none;
	}
	
	.service-icon 
	{
		width:130px;
		float:left;
	}
	
	.service-item h2, .service-item h3, .service-item .h3
	{
		width:calc(100% - 160px);
		margin-left:10px;
		float:left;
		text-align:left;
		margin-top:15px;
	}
	
	.service-item h3, .service-item .h3
	{
		margin-top:0px;
	}
	
	.service-item p
	{
		text-align:left;
		margin-top:10px;
	}
	
	
	.w15 
	{
		width:32%; 
		margin-bottom:0px;
	}
	
	
	.form-box
	{
		width:100%;
		margin-left:0px;
	}
	
	 .wbox
	{
		width:96%;
		padding:2%;
		margin-left:0px;
	}
		
	.rating-item 
	{
		width:44%;
		margin-bottom:50px;
		min-height:200px;
	}
	
	.ratingbox
	{
		width:95%;
		margin-left:5%;
	}
	
	
	img.logo-large
	{
		width:150%;
		left:53%;
	}
	
	
	.w49 
	{
		width:100%;
	}


	.toggle-main
	{
		display:block; 
	}


	.fp-tableCell {
		width:100%;
		float:left;
		height:auto!important;
	}


	.fp-section:not(.section-start).fp-table, .fp-slide.fp-table {
		display:block;
		width:100%;
		float:left;
		height:auto!important;
		overflow:visible;
	}

	.padbox 
	{
		padding-top:0px; 
		padding-bottom:0px; 
	}

	h2 
	{
		margin-top: 100px;
		margin-bottom: 50px;
	}

	.service-item h2 
	{
		margin-top:20px;
		margin-bottom:0px;
	}

	.teaser h2
	{
		margin-top:0px;
		margin-bottom:0px; 
	}

	.mt2, .mt4
	{
		margin-top:0px!important; 
	}

	.w2 
	{
		height:1px; 
	}

	.w4 
	{
		width:2%; 
	}

	.w48 
	{
		width:49%; 
	}

	.mt10 
	{
		margin-top:0px; 
	}


	.reference 
	{
		margin-bottom:20px; 
	}


	.service-item:last-of-type
	{
		margin-bottom:100px; 
	}


	.wbox
	{
		margin-bottom:80px; 
	}


	.form-box
	{
		margin-top:0px; 
	}

	#send-button
	{
		margin-bottom:100px; 
	}

	.section-footer
	{
		padding-bottom:100px; 
	}

	.lastref 
	{
		margin-bottom:100px; 
	}

}


@media screen and (max-width:1000px)
{
	.cookie-disclaimer
	{
		height:120px;
	}
	
	
	.cookie-disclaimer p 
	{
		width:100%; 
		text-align:center;
	}
	
	.cookie-disclaimer .button-white 
	{
		left:50%; 
		transform:translateX(-50%) translateY(-50%);
		padding:10px;
		top:75%;
		margin-left:0px;
	}


	.w15 
	{
		width:100%; 
		margin-bottom:0px;
	}
	
	
}



@media screen and (max-width:620px)
{
	.cookie-disclaimer
	{
		height:140px;
	}

	.rating-item
	{
		width:100%; 
		min-height:unset; 
	}


	.ratingbox 
	{
		width:100%; 
		margin-left:0px; 
	}


	.ratingbox p {
		font-size: 1.5em;
	}

	.grid-break 
	{
		margin-left:0px; 
	}


	.stars 
	{
		margin:0 auto; 
		display:table;
		width:auto; 
		float:unset; 
	}


	.rating-item h4, .rating-item .h4, .rating-item h5, .rating-item p, .rating-item .h5
	{
		text-align:center;
	}
	.rating-item h5, .rating-item .h5
	{
		margin-bottom:10px; 
	}

	
}


@media all and (max-width:500px)
{
	
	.fp-tableCell
	{
		vertical-align:bottom;
	}

	.section-footer .fp-tableCell, .section-start .fp-tableCell
	{
		vertical-align:middle!important;
	}
	
	
	.subtext-container
	{
		width:80%;
		margin-left:10%;
	}
	
	.teaser
	{
	  left:0px;
	  bottom:14%;
	  width:100%; 
	}
	
	
	body 
	{
		font-size:9px;
	}
	
	.menu-item 
	{
		font-size:2em;
	}
	
	
	.teaser h1, .teaser h2
	{
		text-align:center;
	}
	
	h2
	{
		font-size:3.5em;
	}
	
	h3, .h3
	{
		font-size:2.8em;
	}
	
	.service-icon
	{
		width:100px;
		margin-bottom:0px;
	}
	
	.service-item p
	{
		margin-top:0px;
	}
	
	.service-item 
	{
		padding:2%;
	}
	

	
	.hideM
	{
		display:none;
	}
	
	

	
	#menu 
	{
		width:50%;
	}
	
	.toggle
	{
		width:40px;
	}
	
	.toggle-close
	{
		width:30px;
	}
	
	img.scroll-down
	{
		width:40px;
		bottom:5%; 
	}
	
	.wbox .mt30, .wbox .mt20
	{
		margin-top:10px;
	}
	
	.servicebox .mt50
	{
		margin-top:20px;
	}
	
	
	.service-icon
	{
		width:70px;
	}
	
	.service-item 
	{
		padding:20px;
	}
	
	.service-item h2, .service-item h3, .service-item .h3
	{
		text-align:left!important;
		width:calc(100% - 100px);
		margin-top:0px;
	}
	
	.service-item .tcenter
	{
		text-align:left;
	}
	
	.service-item h2  
	{
		margin-top:0px;
	}
	
	
	.section-footer h2 
	{
		margin-bottom:30px;
	}
	
	
}