@charset "UTF-8";
/* CSS Document */
        /*Document Fonts*/

            @font-face{font-family: arquitecta; src:url("../fonts/ArquitectaThin.otf"); font-weight:100;}
            @font-face{font-family:arquitecta; src: url("../fonts/ArquitectaLight.otf"); font-weight: 200;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaBook.otf"); font-weight: 300;}
            @font-face{ font-family:arquitecta; src: url("../fonts/Arquitecta.otf"); font-weight: 400;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaMedium.otf"); font-weight: 500;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaBold.otf"); font-weight: 600;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaHeavy.otf"); font-weight: 700;}
            @font-face{ font-family:arquitecta; src: url("../fonts/ArquitectaBlack.otf"); font-weight: 800;}

            
            @font-face{ font-family:charlottenburg; src:url("../fonts/Charlottenburg_W-Classic.woff2")}
            @font-face{ font-family:charlottenburg-compressed; src:url("../fonts/Charlottenburg_W-Compressed.woff2")}
 /* Section Setup*/
        header{position: relative; z-index: 10;}
        .header-grid-container{display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(3,60px); gap:12px; padding: 12px; margin: 0 12px}
    /*Objects*/
            .logo{grid-area: 1/3 /span 2 /span 8; text-align: center;}
        /*Location and decorative line*/
            .line-location{grid-area:3/1 /span 1 /span 12; position:relative; text-align: center; display: flex; justify-content: center; align-items: center; overflow: hidden;}
            .line-location img{height:11px; width:auto; object-fit: cover; margin-left: 12px; margin-right: 12px; vertical-align: middle;}
            .line-location a{ display: inline-block; white-space: nowrap; vertical-align: middle;}
            .location-link:hover{transition: 0.15s ease; color: #E6472F;}
        /*Navigation*/
            /*Object Setup*/
                .navigation{grid-area: 1/12 /span 1 /span 1;}
            /*Typography*/
                nav{text-align: right; font-family:"itc-avant-garde-gothic-pro", sans-serif; font-weight:400; font-size:22px; line-height:32px; color:#FFFFFC;}
                li a{text-align: right;font-family:"itc-avant-garde-gothic-pro", sans-serif;font-weight:400; font-size:22px; line-height:32px; color:#FFFFFC; text-transform: none; letter-spacing: normal;}
                ul{list-style-type: none; padding: 0;}
            /*Interactive Elements*/
                .desktop-navigation li a:hover{ transition: 0.1s ease; color:#E6472F;}
                .desktop-navigation li:hover{transform: translate(-22px); transition: 0.1s ease; color:#E6472F;}
                .sidebar{ position:fixed; top: 0; right: 0; height: 100vh; width: 250px; background-color:rgba(255,255,252,0.92); box-shadow: -10px 0 10px rgba(0,0,0,0.2); flex-direction: column; align-items: flex-start; justify-content: flex-start; backdrop-filter: blur(40px); display: none; padding:12px 0px 0px 12px; text-align: left;}
                .sidebar li{color:#E6472F; width:100%; padding-left:10px; align-items: center;}
                .sidebar a{color:#E6472F; width:100%;}
                .sidebar li a{display: flex; padding: 2px}
                .sidebar li a:hover{ transition: 0.1s ease;}
                .sidebar li:hover{transition: 0.1s ease; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); }
                .menu-icon li:hover{transform:translate(0); transition:none;} 
                .menu-icon{display: none;}


* {margin:0px; box-sizing: border-box;}
body{background: #1E191B;}

h1{font-family: "worthington-arcade", serif;
font-weight: 400;
font-style: normal;
color:#FFFFFC;
font-size: 100px;}

h2{font-family: "charlottenburg-compressed"; font-size: 60px;  letter-spacing: 3px; color: #FFFFFC;}
h3{font-family: "worthington-arcade", serif; font-weight: 100; font-style: normal; color: #FFFFFC; font-size: 5vw;}
a{font-family: "arquitecta", sans-serif;
	font-weight:400;
    font-size: 18px;
    text-transform: uppercase;
    color: #FFFFFC;
    letter-spacing: 2px;
    text-decoration: none;
    padding:none;}

p{font-family: "arquitecta", sans-serif;
	letter-spacing: 1px;
    font-size: 18px;
    text-align: justify;
    line-height: 21px;
    color: #114985;
    padding-bottom: 30px;}

p2{text-align: center;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 20px; color: #FFFFFC; font-style: italic;}



li a{text-align: right;
    font-family:"itc-avant-garde-gothic-pro", sans-serif;
    font-weight:400;
    font-size:22px;
    line-height:32px;
    color:#FFFFFC;
    text-transform: none;
    letter-spacing: normal;}

.fixed{position: fixed;}

.desktop-navigation li a:hover{ transition: 0.1s ease; color:#E6472F;}
.desktop-navigation li:hover{transform: translate(-22px); transition: 0.1s ease; color:#E6472F;}


.menu-background-color{grid-area: 1/1 /span 8 /span 12; background: #FFFFFC; transform: translateY(-35px);z-index: 2;}
.hours-background-color{grid-area: 2/5 /span 5 /span 4;background: #114985; z-index: 3;}
.hours-border{grid-area:2/5 /span 5 /span 4; z-index: 4; padding: 20px;}
.hours-border img{width:100%; height:100%;}
.hours-title{grid-area: 3/5 /span 1 /span 4; text-align: center; z-index: 5; margin-bottom: 12px;}
.hours-description{grid-area:3/5 /span 1 /span 4; text-align: center; z-index: 5; align-self: end; margin-bottom: 12px}
.hours-days{ grid-area:  4/6 /span 2 /span 1; text-align:left; z-index: 5; }
.hours-times{ grid-area:  4/7 /span 2 /span 1; text-align:right; z-index: 5; margin-left: 60px;}

.hours-times li{color: #FFFFFC}
.hours-days li{color: #FFFFFC}



ul{list-style-type: none; padding: 0;}
.hours-list{font-family: "arquitecta", sans-serif;
	letter-spacing: 1px;
    font-size: 20px;
    font-weight: 200;
    line-height: 35px;
    color: #114985;}
.grid-container {display: grid; 
                grid-template-columns: repeat(12, 1fr); 
                grid-template-rows: repeat(8, 120px); 
                gap:12px; 
                padding: 12px;
                margin: 0px 12px}

.sidebar{ position:fixed; top: 0; right: 0; height: 100vh; width: 250px; background-color:rgba(255,255,252,0.92); box-shadow: -10px 0 10px rgba(0,0,0,0.2); flex-direction: column; align-items: flex-start; justify-content: flex-start; backdrop-filter: blur(40px); display: none;}

.sidebar{padding:12px 0px 0px 12px; text-align: left;}
.sidebar li{color: #1E191B; width:100%; padding-left:10px; align-items: center;}
.sidebar a{color: #1E191B; width:100%;}
.sidebar li a{display: flex; padding: 2px}
.sidebar li a:hover{ transition: 0.1s ease;}
.sidebar li:hover{transition: 0.1s ease; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); }

.menu-icon li:hover{transform:translate(0); transition:none;} 
.menu-icon{display: none;}

#list-container{grid-area: 4/5 /span 2 /span 4; z-index: 6; align-content: center; display: flex; justify-content: center;}

/*Footer*/

    /*Typography*/
        footer a{color:#FFFFFC;}
    /*Section Setup*/
        .footer-grid-containter{display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(3,120px); gap: 12px; padding: 12px;}
        footer{background: #1E191B;}
    /*Footer Title*/
        .footer-logo{grid-area: 1/1 /span 1 /span 12; text-align: center;}
        .footer-subhead{padding-top: 2px; text-align: center; color: #FFFFFC;}

    /*copywright*/
        .line-copywright{grid-area:3/1 /span 1 /span 12; position:relative; text-align: center; display: flex; justify-content: center; align-items: center; overflow: hidden;}
        .line-copywright img{height:11px; width:auto; object-fit: cover; margin-left: 12px; margin-right: 12px; vertical-align: middle;}
        .line-copywright a{ display: inline-block; white-space: nowrap; vertical-align: middle;}

/*Extras*/
    .line-repeat-white{height:10px; width:auto; background-image: url("../illustrations/whiteline.png"); background-repeat: repeat-x; background-size: 1000px auto; padding-bottom: 20px;}
    .line-repeat-blue{height:10px; width:auto; background-image: url("../illustrations/blueline.png"); background-repeat: repeat-x; background-size: 1000px auto; padding-bottom: 20px;}
    .line-repeat-red{height:10px; width: auto; background-image: url("../illustrations/redline.png"); background-repeat: repeat-x; background-size: 1000px auto; padding-bottom: 20px;}


@media (max-width:768px) and (min-width:351px){
    .header-grid-container{grid-template-rows: repeat(1,60px)}
    .menu-icon{display:block;}
    .navigation-list{display: none;}
    .line-location{display: none;}
    h1{font-size: 2em; color: #E6472F}
    h3{font-size: 2em;}
    a{font-size: 1em; color:#E6472F}
    body{background: #FFFFFC;}
    footer{background: #FFFFFC;}
    footer h3{color: #E6472F;}
    .footersubhead a{color: #E6472F;}
    .footer-logo{grid-area: 1/1 /span 1 /span 12;}
    footer p{color:#E6472F;}
    .line-repeat-white{display: none;}
    .header-grid-container{grid-template-rows: repeat(1,100px); margin:0px;}
    .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}
    .grid-container{padding:0px; grid-template-rows: repeat(4,120px)}
    .logo{grid-area: 1/1 /span 1 /span 5; text-align: left;}
    .menu-background-color{background: #114985; grid-area: 1/1 /span 4 /span 12; transform: translateY(0)}
    .hours-background-color{display: none;}
    .hours-border{display: none;}
    
    .hours-title{grid-area:1/3 /span 1 /span 8; align-self:flex-start; padding-top:30px;}
    .hours-description{grid-area:2/2 /span 1 /span 10; align-self: flex-start;}
    .hours-times{float: left;margin-left: 70px;}
    .hours-days{float:right; display: flex;}
    h2{font-size: 3.5em;}
    #list-container{grid-area: 3/2 /span 2 /span 10; z-index: 7; align-content: center; display: flex; justify-content: center; transform: translateY(-40px);}
    .line-repeat-red{display: block;}
}
@media (min-width:769px) and (max-width:1200px){
    .line-repeat-red{ display:none;}
    footer p{color: #FFFFFC;}
    .hours-background-color{grid-area: 2/3 /span 5 /span 8}
    .hours-border{grid-area: 2/3 /span 5 /span 8;}
    a h1{font-size: 80px;}
}

@media (max-width:350px){
    .sidebar{width:100%}
    .header-grid-container{grid-template-rows: repeat(1,60px)}
    .menu-icon{display:block;}
    .navigation-list{display: none;}
    .line-location{display: none;}
    h1{font-size: 2em; color: #E6472F}
    h3{font-size: 2em;}
    a{font-size: 1em; color:#E6472F}
    body{background: #FFFFFC;}
    footer{background: #FFFFFC;}
    footer h3{color: #E6472F;}
    .footersubhead a{color: #E6472F;}
    .footer-logo{grid-area: 1/1 /span 1 /span 12;}
    footer p{color:#E6472F;}
    .line-repeat-white{display: none;}
    .header-grid-container{grid-template-rows: repeat(1,100px); margin:0px;}
    .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}
    .grid-container{padding:0px; grid-template-rows: repeat(4,120px)}
    .logo{grid-area: 1/1 /span 1 /span 5; text-align: left;}
    .menu-background-color{background: #114985; grid-area: 1/1 /span 4 /span 12; transform: translateY(0)}
    .hours-background-color{display: none;}
    .hours-border{display: none;}
    
    .hours-title{grid-area:1/3 /span 1 /span 8; align-self:flex-start; padding-top:30px;}
    .hours-description{grid-area:2/2 /span 1 /span 10; align-self: flex-start;}
    .hours-times{float: left;margin-left: 30px;}
    .hours-days{float:right; display: flex;}
    h2{font-size: 3.5em;}
    #list-container{grid-area: 3/2 /span 2 /span 10; z-index: 7; align-content: center; display: flex; justify-content: center; transform: translateY(-40px)}
    .line-repeat-red{display: block;}

    
}