@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")}
 
            /*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;}

#application_background{ width:60%; grid-area: 1/1 /span 13 /span 12; background: hsla(0,0%,55%,1.00); margin: 0 auto; border-radius: 12px; position: sticky;}

#form_title{display: flex; justify-content: center; padding: 24px; margin-bottom: 40px;}
#form_title h2{text-align: center;}

.mc-field-group {display: flex; justify-content: flex-start; align-items: center; margin-bottom: 8px; padding:3px;}

.mc-field-group label {flex: 1; text-align: left; white-space: nowrap; width: 200px}

.mc-field-group input .required{flex: 2; text-align: right; width: 180px;}
#mce-MMERGE8.REQ_CSS { width: 160px; text-align: right; border-radius: 12px; border:none;}

.form-row, .form-row2, .form-row3, .form-row4{display: flex; justify-content:space-between; margin-bottom:24px;}

.column-one, .column-one2, .column-one3{ position:relative; left:80px; width:35%;}
.column-two, .column-two2, .column-two3, .column-two4{ position:relative; right: 80px; width: 35%;}

.required, #mce-MMERGE4, #mce-MMERGE6, #mce-MMERGE3, #mce-MMERGE15{border-radius: 12px; border: none;}
.long-entry{margin: 0 80px 24px;}
.long-entry .mc-field-group{display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 8px;}

.long-entry .mc-field-group label{text-align: left; width:100%; margin-bottom: 8px;}
.long-entry .mc-field-group input.required, .long-entry .mc-field-group input#mce-MMERGE4, .long-entry .mc-field-group input#mce-MMERGE6{text-align: left; width: 100%; height: 40px;}

.short-entry{margin:0px 80px; display: flex; justify-content: space-between; margin-bottom: 24px; flex-direction: column;}
.short-entry .mc-field-group label{text-align: left;}
.short-entry .mc-field-group input{text-align: right; width: 50%;}

.column-two4 .mc-field-group label{transform: translateX(-70px)}

.small-meta{display: none;}
.datefield{width: 160px; background: #fffffc; border-radius: 12px; display:flex; justify-content: center;  gap: 2px;}

input.birthday{border: none; background: transparent; outline: none; box-shadow: none; }
.button{border: none; border-radius: 12;}
.clear{text-align: right; position: relative; right:80px}

#mc-embedded-subscribe.button {width: 160px; border-radius: 12px; border: none;background-color: #FFFFFC; text-align: center;
  cursor: pointer;
  font-size: 1rem;
color: hsla(8,79%,54%,1.00);
  transition: background-color 0.2s ease; font-family: "arquitecta", sans-serif;
	font-weight:400;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    padding:none;}

#statement{margin:0px 80px; display: flex; justify-content: space-between; margin-bottom: 24px;}
#statement p{color: hsla(0,0%,20%,1.00)}

#mc-embedded-subscribe.button:hover {
  background-color: #E6472F; 
    color: hsla(60,100%,99%,1.00);
}

* {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,label{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;}



ul{list-style-type: none; padding: 0;}

.grid-container {display: grid; 
                grid-template-columns: repeat(12, 1fr); 
                grid-template-rows: repeat(15, 90px); 
                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;}



@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;}

    
}