@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&family=Montserrat:wght@400;500;700&display=swap');

$darkblue: #555;
$lightgreen: #a2be45;
$palegreen: #e2efc7;
$background: #fafbf3;
$green: #489841;
$brown: #443722;
$lightblue: #51a6d5;
$kaki: #a9af8e;
$kakilight: #c5cbba;
$lightorange: #f4c8a0;
$orange: #ec7f00;
$mainfont: 'Montserrat', sans-serif;
$titlefont: 'Montserrat', sans-serif;
$titlefontcondensed: 'Montserrat', sans-serif;

html {
    scrollbar-width: none;
}

body {
    background-color: $background;
    margin:0;
    /*font-family: 'Comfortaa', cursive;*/
    font-family: $mainfont;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
    color:#222;
}

body::-webkit-scrollbar {
    width: 1px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
    background: transparent; 
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.25); 
    border-radius: 20px; 
}

main {
    width:100%;
    max-width:1200px;
    margin:40px auto;
}

h1,h2,h3,h4,h5,h6 {
    font-family: $titlefont;
}

* {
    box-sizing: border-box;
}


header {
    width:100%;
    height:380px;
    background-image:url('../img/header.jpg');
    background-size:cover;
    background-position:center bottom;
    margin:20px 0;
    position:relative;

    &:before {
        content:"";
        width:100%;
        height:100px;
        background: linear-gradient(to bottom, #FFF, transparent);
        position:absolute;
        top:0;
        left:0;
    }

    h1 {
        position: absolute;
        top:-20px;
        left:10%;
        width:80%;
        text-align:center;
        background-color: #51a6d5;
        padding:20px 0;
        color:#FFF;
        font-weight:400;
        margin:0;
        font-size:32px;
        &:after {
            content:"";
            width:100%;
            height:100%;
            border:1px solid rgba(0,0,0,0.3);
            left:6px;
            top:6px;
            position:absolute;
        }
        span {
            position:absolute;
            top:100%;
            left:50%;
            transform:translateX(-50%) translateY(-12px);
            background-color: #ffed30;
            color:#000;
            text-transform:uppercase;
            font-weight:700;
            font-size:26px;
            z-index:100;
            padding:8px 25px;
        }
    }
    .logo {
        position:absolute;
        bottom:30px;
        left:50px;
        min-width:80px;
        max-width:10%;
    }

    .lang_switcher {
        position:absolute;
        top:-20px;
        left:5px;
        z-index:99;
        margin:0;
        padding:0;
        li {
            display:inline-block;
            text-transform:uppercase;
            margin-left:8px;
            color:#888;
            a {
                text-decoration: none;
                color:#888;
            }
            img {
                width: 20px;
            }
        }
    }
}


p.subtitle {
    font-size:20px;
    color:$darkblue;
    margin: 10px 0 0 0;
}


#filters {
    background-color:$palegreen;
    padding:20px;
    position:relative;

    .input-group {
        max-width: 200px;
    }
}

#reset {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 20px;
    color: $darkblue;
    background: white;
    padding: 8px;
    border-radius: 6px;
    cursor:pointer;
}

#categories {
    margin:20px 0 0;

    &.fakelabels {
        label {
            opacity:1 !important;
            color:rgba(0,0,0,0.8);
            margin:0 5px;
            padding: 5px;
        }
        
        span {
            vertical-align: top;
            margin-top:10px;
            display:inline-block;
        }
        
        input[type="checkbox"]:checked+label {
            background: white;
            border-radius: 30px;
        }   
    }
}

.fakelabels {
    ul {
        margin:0;
        padding:0;
        display:table;
        width:100%;
        text-align: center;

        li {
            display:table-cell;
            img {
                max-height:28px;
                max-width:40px;
            }
            span {
                font-size:12px;
                font-weight:700;
            }
        }
    }
    label {
        opacity:0.20;
        cursor:pointer;
        color:rgba(0,0,0,0.4);
        display: block;
    }
    input[type="checkbox"]:checked+label {
        opacity:1;
        color:rgba(0,0,0,0.8);
    }
    input[type="checkbox"] {
        visibility: hidden;
        position:absolute;
        left: -9999px;
    }
}




#select_language {
    img {
        width:24px;
        height:auto !important;
    }
    ul li {
        line-height:40px;
        padding:0 2px;
    }
}


select, textarea, input, .fakeselect {
    display:inline-block;
    width:192px;
    padding:10px 20px;
    max-width:calc(100% - 40px);
    border:1px solid #FFF;
    background-color:white;
    outline:0;
    border-radius:5px;
    font-family: $mainfont;
    font-size:13px;
    box-sizing: content-box;
}

.input-group {
    display:inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.fakeselect {
    text-align:left;
    position:relative;
    label {
        display:block;
        line-height:34px;
        padding-left:8px;
        &:hover {
            background-color:#f5f5f5;
        }
    }
    input {
        display:inline-block;
        width:auto;
        margin-right:8px;
        vertical-align: middle;
    }
}

.fakeselect_placeholder:after {
    content:"\f107";
    font-family:"Font Awesome 6 Pro";
    font-weight:700;
    position:absolute;
    top:50%;
    right:10px;
    transform: translateY(-50%);
}

.fakeselect_container {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background-color:white;
    border:1px solid #CCC;
    z-index:10;
}


#view_selector {
    text-align: center;
    margin:20px 0;
    i {
        display:inline-block;
        padding:8px 12px;
        color:#CCC;
        font-size:22px;
        background-color:#EEE;
        border-radius:5px;
        margin:0 10px;
        cursor:pointer;
        &.active {
            color:#555555;
        }
    }
}


.mainlist {
    margin:0;
    padding:0;
    margin-top:20px;

    .month_container {
        margin-bottom:30px;
    
        & > h2 {
            text-transform: uppercase;
            color: rgba(0,0,0,0.2);
            font-size:30px;
            color:#FFF;
            display:block;
            text-align: left;
            margin-top:0px;
            margin-bottom:0px;
            padding:10px 20px;
        }

        &:nth-child(4n+1) {
            background-color:rgba($green,0.3);
            h2 {
                background-color:$green;
            }
            .activity {
                .date {
                    color:$green;
                    background-color:rgba($green,0.3);
                }
            }
        }
        &:nth-child(4n+2) {
            background-color:rgba($lightgreen,0.3);
            h2 {
                background-color:$lightgreen;
            }
            .activity {
                .date {
                    color:$lightgreen;
                    background-color:rgba($lightgreen,0.3);
                }
            }
        }
        &:nth-child(4n+3) {
            background-color:rgba($brown,0.3);
            h2 {
                background-color:$brown;
            }
            .activity {
                .date {
                    color:$brown;
                    background-color:rgba($brown,0.3);
                }
            }
        }
        &:nth-child(4n+4) {
            background-color:rgba($lightblue,0.3);
            h2 {
                background-color:$lightblue;
            }
            .activity {
                .date {
                    color:$lightblue;
                    background-color:rgba($lightblue,0.3);
                }
            }
        }

        &.hidden {
            display:none;
        }
    }

    .activity {
        border-top:1px solid #EEE;
        display:flex;
        flex-direction: row;
        cursor:pointer;

        & > div {
            padding:10px;
            align-self: center;
        }
        &:last-child {
            border-bottom:1px solid #EEE;
        }
        .date {
            flex-basis:12%;
            border-right:1px solid #EEE;
            font-family: $titlefontcondensed;
            color:$kaki;
            font-weight:700;
        }
        .hour {
            color:rgba(0, 0, 0, 0.8);
            font-weight:400;
        }
        .title {
            font-weight:700;
            flex-grow: 1;
            flex-basis: 65%;
            font-family: $titlefontcondensed;
            display:flex;
            flex-direction: column;
            color:rgba(0,0,0,0.8);
            span {
                font-weight:400;
                font-size:0.8em;
            }
        }
        .type  {
            display:flex;
            align-self: stretch;
            align-items: center;
            border-left: 1px solid #EEE;
            flex-basis:70px;
            justify-content: center;
        }
        .lang  {
            display:flex;
        }
        .flag {
            width:16px;
            margin-right:4px;
        }
        .picto {
            height:22px;
        }

        &.hidden {
            display:none;
        }
    }

    .noresult {
        text-align: center;
        padding:50px 0;
        font-style:italic;
    }
}





.bike, .fahrradaktivitat {
    border-color:#84c285 !important;
    color:#84c285;
}
.event, .veranstaltung {
    border-color:#97d1eb !important;
    color:#97d1eb;
}
.young, .kinder {
    border-color:#f3b792 !important;
    color:#f3b792;
}
.workshop {
    border-color:#c3b6ae !important;
    color:#c3b6ae;
}
.walk, .wanderung {
    border-color:#d3df84 !important;
    color:#d3df84;
}
.tour, .fuhrung {
    border-color:#e3a8c4 !important;
    color:#e3a8c4;
}

/* Details */


.activity_details {
    display:none;
    position:relative;
    background-color: $background;
    border: 1px solid #CCC;
    border-top: 0;
    border-bottom: 0;

    .close {
        font-size:30px;
        cursor: pointer;
        color:#555;
        &:before {
            content:"\f00d";
            font-family:"Font Awesome 6 Pro";
            font-weight:700;
        }
    }
    h1 {
        margin:0;
        font-size:20px;
        color:rgba(0,0,0,0.7);
        margin-right:auto;
    }

    .copy_link {
        font-size: 14px;
        margin-left: 12px;
        cursor:pointer;
        position:relative;
        &:before {
            content:"\f0c5";
            font-family:"Font Awesome 6 Pro";
            font-weight:700;
        }
        strong {
            display: none;
            position:absolute;
            left: calc(100% + 8px);
            top: 50%;
            transform: translateY(-50%);
            min-width: 100px;
            font-size: 10px;
        }
    }

    .details_header {
        padding:20px 25px;
        display:flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items:center;
        background-color:$kakilight;

        .types {
            display: flex;
            align-items: center;
            margin-right:20px;
            span {
                display:inline-block;
                color:rgba(0,0,0,0.4);
                font-weight:700;
                font-size:12px;
            }
            .picto {
                margin-left:10px;
                height:32px;
            }
        }
    }
    .date_block {
        float:right;
        margin-left:20px;
        span {
            font-family:$titlefont;
            font-weight:700;
            display:block;
            color:$kakilight;
            font-size:30px;
        }
    }
    .details_content {
        padding:25px;
        .row {
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
            border-top:1px solid #CCC;
            padding:15px 0;
            margin-top:30px;
            .col {
                flex-basis:50%;
                padding-right:20px;
                &+.col {
                    border-left:1px solid #CCC;
                    padding-left:20px;
                }
            }
        }

        .details_description {
            margin-bottom:25px;
        }
    }
    p {
        margin-top:0;
        margin-bottom:5px;
    }
    .details_entry {
        margin:6px 0;
        a {text-decoration:none; color:$darkblue;}
        .picto {
            color:$darkblue;
            font-size:16px;
            display: inline-block;
            width:24px;
            vertical-align: top;
            margin-top:2px;

            &:before {
                font-family:"Font Awesome 6 Pro";
            }
            &.time:before {
                content:"\f017";
                font-weight:300;
            }
            &.location:before {
                content:"\f3c5";
                font-weight:300;
            }
            
            &.price:before {
                content:"\f153";
                font-weight:400;
                border:1px solid $darkblue;
                border-radius:50%;
                width:13px;
                height:15px;
                line-height:15px;
                display:block;
                font-size:12px;
                padding-left:2px;
            }
            &.organizer:before {
                content:"\f19c";
                font-weight:300;
            }
            &.lang:before {
                content:"\f06a";
                font-weight:300;
            }
            &.guide:before {
                content:"\f007";
                font-weight:300;
            }
            &.contact:before {
                content:"\e49a";
                font-weight:300;
            }
            &.attendees:before {
                content:"\e533";
                font-weight:300;
            }
            &.phone:before {
                content:"\f095";
                font-weight:300;
            }
            &.date:before {
                content:"\f073";
                font-weight:300;
            }
        }
        p {
            margin:0;
            display: inline-block;
            max-width:calc(100% - 30px);
        }
    }

    .other_dates {
        margin-top:15px;
        border-top:1px solid $darkblue;
        border-bottom:1px solid $darkblue;
        padding:8px 0;
        h2 {
            margin:0;
            font-size:20px;
            display:inline-block;
        }
        span {
            display:inline-block;
            font-family:$titlefont;
            color:$kaki;
            font-weight:700;
            margin-left:10px;

            &:nth-child(odd) {
                color:$orange;
            }
        }
    }
    .details_dates {
        font-weight:700;
        
    }
}




.activity_details .details_header.bike, .activity_details .details_header.fahrradaktivitat {
    background-color:rgba(132, 194, 133, 0.35);
}
.activity_details .details_header.event, .activity_details .details_header.veranstaltung {
    background-color:rgba(151, 209, 235, 0.35);
}
.activity_details .details_header.young, .activity_details .details_header.kinder {
    background-color:rgba(243, 183, 146, 0.35);
}
.activity_details .details_header.workshop {
    background-color:rgba(195, 182, 174, 0.35);
}
.activity_details .details_header.walk, .activity_details .details_header.wanderung {
    background-color:rgba(211, 223, 132, 0.35);
}
.activity_details .details_header.tour, .activity_details .details_header.fuhrung {
    background-color:rgba(227, 168, 196, 0.35);
}

.activity_details .details_meeting {
    float:right;
    background-color:#F5F5F5;
    padding:15px;
    width:40%;
    margin-left:15px;
    margin-bottom:15px;
    position:relative;
    z-index: 1;
}

.activity_details .details_meeting i {
    color:rgba(0,0,0,0.08);
    font-size:100px;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.activity_details .details_meeting p:not(:first-of-type) {
    margin-top:15px;
}

.activity_details .details_languages {
    margin-top:15px;
}

.activity_details .details_languages .flag {
    width:24px;
    margin-right: 10px;
}

#show_all_activities {
    display: inline-block;
    margin: 20px auto 30px;
    padding: 10px 20px;
    border : 2px solid #489841;
    color: #489841;
    background-color: #FFFFFF;
    font-weight: 700;
    cursor:pointer
}






.loader {
    display:none;
    width: 40px;
    height: 40px;
    position: relative;
    margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #95c11e;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
    0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}





@media screen and (max-width:1200px) {
    main {width:100%;}
    header {height:280px;}
    #filters .input-group {width:100%; margin-bottom:10px;}
    #filters .input-group > * {width:100%;}
    .fakelabels ul li {display: inline-block;margin: 10px 5px;}
    #categories.fakelabels label {margin:0;}
    .table_container {overflow-x:scroll;}
}

@media screen and (max-width:900px) {
    .mainlist ul li {flex-basis: calc(47.5% - 40px);}
    h2 {text-align:center;}
}

@media screen and (max-width:720px) {
    .mainlist {
        
        .activity {
            justify-content: space-between;
            flex-wrap: wrap;
            .title {order:1;flex-basis: 80%;}
            .date {order:3; flex-basis:50%; border:0;padding-top:0; background:transparent !important;}
            .lang {order:4;}
            .type {order:2; border:0;flex-basis: 20%;justify-content: flex-end;}
        }
    
    }
    .picto {margin:0;}
    header h1 {font-size:8.5vw; line-height:8vw;}
    header .subtitle {font-size:4vw;}
    #categories {margin-top:8px}
    .input-group {margin-right:0;}
    #categories.fakelabels ul li {margin:1px 10px}
    .activity_details .details_meeting {float:none;width:auto;margin-left:0;}
    .activity_details .details_languages {text-align: center;}
    .activity_details {
        .details_header  {
            flex-wrap: wrap;
            padding: 10px 20px;
            h1 {flex-basis: 100%; order:3; margin-top:5px; font-size:18px;}
            .types {
                margin-right:auto;
                span {order:2;}
                .picto {order:1; margin-left:0; margin-right:10px; height:24px;}
            }
        }
        .close {font-size:20px;}
        .details_content {
            padding: 18px;
            .row {
                flex-wrap: nowrap;
                .col {
                    font-size:0.85em;
                }
            }
        }
    }
}
@media screen and (max-width:440px) {
    header .year {font-size:30vw;}
    main {margin-top:0;}
    .activity_details {
        .details_content {
            padding: 18px;
            .row {
                flex-wrap: wrap;
                .col {
                    font-size:0.85em;
                    flex-basis: 100%;
                    &+.col {
                        border-top: 1px solid #CCC;
                        border-left: none;
                        padding-left: 0;
                    }
                }
            }
            .registrations {
                margin-top: 20px;
            }
        }
    }
}