/* Default Styling */
:root {
    --title-font:"Poppins", serif;;
    --paragraph-font:"Poppins", serif;;
    --h1:62px;
    --h2:42px;
    --h3:32px;
    --h4:22px;
    --h5:18px;
    --p:16px;

    --main_accent:#000;

}
.h1, 
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--title-font);
}
h1 {
    * {
        font-size: var(--h1);
    }
}
h2 {
    * {
        font-size: var(--h2);
    }
}
h3 {
    * {
        font-size: var(--h3);
    }
}
h4 {
    * {
        font-size: var(--h4);
    }
}
h5 {
    * {
        font-size: var(--h5);
    }
}
body,
p {
    font-size: var(--p);
}
a,
a:hover,
input,
input:hover,
button,
button:hover,
img,
header,
.inner_header,
.sidebar_item,
.sidebar_row,
.sidebar_row svg,
.inner_description,
.content {
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

img {
    max-width: 100%;
    height: auto;
}
.margin-bottom-15 {
    margin-bottom: 15px;
}
.margin-bottom-30 {
    margin-bottom: 30px;
}
.margin-bottom-60 {
    margin-bottom: 60px;
}
.margin-bottom-90 {
    margin-bottom: 90px;
}
.margin-bottom-120 {
    margin-bottom: 120px;
}

.margin-top-15 {
    margin-top: 15px;
}
.margin-top-30 {
    margin-top: 30px;
}
.margin-top-60 {
    margin-top: 60px;
}
.margin-top-90 {
    margin-top: 90px;
}
.margin-top-120 {
    margin-top: 120px;
}

.padding-bottom-15 {
    padding-bottom: 15px;
}
.padding-bottom-30 {
    padding-bottom: 30px;
}
.padding-bottom-60 {
    padding-bottom: 60px;
}
.padding-bottom-90 {
    padding-bottom: 90px;
}
.padding-bottom-120 {
    padding-bottom: 120px;
}

.padding-top-15 {
    padding-top: 15px;
}
.padding-top-30 {
    padding-top: 30px;
}
.padding-top-60 {
    padding-top: 60px;
}
.padding-top-90 {
    padding-top: 90px;
}
.padding-top-120 {
    padding-top: 120px;
}
.left_text {
    text-align: left;
}
.centered_text {
    text-align: center;
}
.right_text {
    text-align: right;
}
#map {
    height: 100vh;
    width: 100%;
}
.custom-controls {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    width:46px;
    button {
        cursor: pointer;
        color: white;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width:100%;
        height:40px;
        background:#fff;
        border:none;
        border-radius: 0;
    }
    
    .btns_control {
        border:solid 3px #000;
        button:nth-child(1) {
            border-bottom:solid 3px #000;
        }
    }
    .btns_control_2 {
        margin-top:7.5px;
        border:solid 3px #000;

    }
}

.logo {
    position: absolute;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 1000;
    img {
        width:200px;
    }
}

.sidebar_item {
    top: 1.5rem;
    left: 1.5rem;
    position: absolute;
    margin-bottom: 3rem;
    display: inline-flex;
    z-index: 10;
    .free-roam-toggler {
        width:40px;
        height:40px;
        background:#fff;
        border:solid 3px #000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-left: none;
        border-radius: 0;
    }
    .free-roam-toggler.activated svg {
        transform: rotate(180deg);
    }
    .inner_sidebar {
        width: 24rem;
        border:solid 3px #000;
        transition-duration: .3s;
        z-index: 10;
        .header_sidebar {
            background:#000;
            padding-top: .75rem;
            padding-bottom: .75rem;
            padding-right: 1.5rem;
            padding-left: 1.5rem;
            h2 {
                font-size: 1.5rem;
                line-height: 2rem;
                color:#fff;
                text-align: center;
            }
        }
        .sidebar_row {
            cursor: pointer;
            a {
                color:#000;
            }
            h3 {
                text-transform: uppercase;
                font-size: 3rem;
                line-height: 1;
                padding: 1.5rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                width: 100%;
                svg {
                    display: none;
                }
            }
            .inner_description {
                max-height:0;
                overflow: hidden;
            }
            .inner_welcome {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                padding-bottom: 1.5rem;
                p {
                    margin-bottom: 0;
                }
            }
        }
        .sidebar_row.activated {
            h3 {
                font-size: 1.5rem;
                line-height: 2rem;
                padding: 1.5rem;
                border-bottom: solid 3px #000;
                svg {
                    display: inline-block;
                    margin-right: 1rem;
                    position: relative;
                }
                svg:hover {
                    left:-1rem;
                }
            }
            .inner_description {
                max-height:500px;
                overflow-y: scroll;
                .inner_item {
                    background:#fff;
                    padding: 1.25rem;
                }
                img {
                    object-fit: cover;
                    height:250px;
                    width:100%;
                }
                h4 {
                    margin-top: 1rem;
                    font-weight: 400;
                    font-size: inherit;
                    line-height: 1.25;
                    strong {
                        font-weight: 600;
                        font-size: inherit;
                        line-height: 1.25;
                        margin-right: 5px;
                    }
                }
                 a {
                    margin-top: .5rem;
                    border-bottom: solid thin #000;
                    color:#000;
                    display: inline-flex;
                    align-items: center;
                    svg {
                        margin-left: 7.5px;
                        transform: translateX(0) rotate(180deg);
                    }
                 }
            }
        }
        .row_1 {
            background-color: rgba(233,120,63,1);
        }
        .row_2 {
            background-color: rgba(225,116,145,1);
        }
        .row_3 {
            background-color: rgba(139,242,160,1)
        }
        .row_4 {
            background:rgba(42,183,202,1)
        }
        .row_5 {
            background:rgba(254,207,75,1);
        }
    }
}
.sidebar_item.activated {
    transform: translateX(calc(-100% + 16px));
}
.panel-artwalks {
    margin-bottom: 30px;
    padding: 1.5rem;
    border:solid 2px #000;
    div {
        display: inline-flex;
        align-items: center;
        margin-bottom: 7.5px;
        svg {
            margin-right: .75rem;
        }
        h4 {
            font-size: 1.25rem !important;
            line-height: 1.75rem !important;
            text-transform: uppercase;
            margin-top: 0 !important;
        }
    }
}
.single {
    .inner_item {
        i {
            font-style: normal;
        }
        #next-panel {
            background: transparent;
            border: none;
            cursor: pointer;
        }
        #prev-panel {
            background: transparent;
            border: none;
            cursor: pointer;  
        }
    }
    .inner_detail_item.inner_item {
        padding:0 0 0 0 !important;
        h2 {
            padding: 1.5rem;
            font-size: 2.25rem !important;
            line-height: 2.5rem !important;
        }
        h3 {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 500;
            font-size: 1.25rem !important;
            line-height: 1.75rem !important;
            padding: 1.5rem !important;
            svg {
                transform: rotate(180deg);
            }
            svg:hover {
                left:0 !important;
            }
  
        }
        h3.active {
            svg {
                transform: rotate(270deg);
            }  
        }
        .art_details {
            border-top: solid 3px #000;
            ul {
                margin: 0;
                padding: 1.5rem;
                list-style: none;
                li {
                    font-weight: 600;
                }
            }
        }
        img {
            border-top:solid 3px #000;
            border-bottom:solid 3px #000;
        }

        .about_art {
            h3 {
                border-top:solid 3px #000;
            }
        }
        .engagement_question {
            h3 {
                border-bottom: none;
            }
        }
        .dropdown_item {
            cursor: pointer;
            div.content {
                max-height: 0px;
                overflow: hidden;
                ul {
                    margin: 0;
                    padding-left: 15px;
                    li {
                        font-weight: 600;
                    }
                }
            }
            .inner_content {
                padding: 1.5rem;
            }
            div.activated {
                max-height: 2000px;
            }
        }
    }
}
.panel {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.panel.active {
    display: block;
    opacity: 1;
}
p.uppercase.text-xs {
    font-size: .75rem;
    line-height: 1rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}
#search-form {
   margin-bottom: 1.5rem;
}
#search-input {
    width: 100%;
    border:none;
    border-bottom: solid 3px #000;
    padding:1rem;
}

/* Responsive Styling */

@media (max-width: 1199.98px) {
    
}

@media (max-width: 991.98px) {

}

@media (max-width: 767.98px) {
    .sidebar_item {

        left: 0px;
        top:15px;
        .inner_sidebar {
            width: 100%;
        }
    }
    .sidebar_item.activated {
        transform: translateX(calc(-100% + 38px));
    }
    .custom-controls {
        display: none;
        top:initial;
        right: initial;
        left: 15px;
        bottom:120px;
        .btns_control {
            display: inline-flex;
            button:nth-child(1) {
                border-bottom:none;
            }
            
        }
        .btns_control_2 {
            margin-top: 0;
        }
    }
}

/* End Responsive Styling */