@charset "UTF-8";
/* CSS Document */
/* Document Setup*/
        * {margin:0px; box-sizing: border-box;}
    /* Typography*/

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

        /*Styles*/
            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;}

/*Header*/

    /* 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}

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

/*Body Section*/

    /*Typography*/

        li p2{font-size: 16px;}
        p2{text-align: center;font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-size: 20px; color: #114985; font-style: italic;}
        #menu-title h2{ font-family:"charlottenburg-compressed";font-size: 1400%; color: #E6472F; letter-spacing: 8px; transform: translateY(-30px)}
        .malt-menu{font-family: "arquitecta", sans-serif; letter-spacing: 1px; font-size: 20px; font-weight: 200; line-height: 35px; color: #114985;}
        .grid-container h2{color: #E6472F;}

    /*Section Setup*/
        body{background: #1E191B;}
        .grid-container {display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(20, 120px); gap:12px; padding: 12px; margin: 0px 12px} 
        .menu-background-color{grid-area: 1/1 /span 20 /span 12; background:#FFFFFC; outline: #E6472F solid 2px; transform: translateY(-30px); z-index: 1;}

    /*Objects*/

        /*Title*/
            #menu-title{grid-area: 1/4 /span 3 /span 6; text-align: center; z-index: 2; align-self: end;}

        /*Malts & Shakes*/
            .malts-shakes-title{grid-area: 4/2 /span 2 /span 4; z-index: 5; text-align: center; align-self: center;}
            .malts-shakes-description{grid-area: 5/2 /span 1 /span 4; z-index: 5; text-align: center; padding: 40px 0 0 0;}
            .malts-shakes-flavors-left{grid-area: 5/2 /span 3 /span 2; text-align: center; z-index: 5; padding-top:150px;}
            .malts-shakes-flavors-right{grid-area: 5/4 /span 3 /span 2; text-align: center; z-index: 5; padding: 150px 0px 0px 50px;}
            .malt-flavors-container{grid-area: 5/2 /span 3 /span 4; z-index: 5; display: flex; justify-content: center; }
        /*Ice Cream Sodas*/
            .icecream-sodas-title{grid-area: 4/8 /span 2 /span 4; z-index: 5; text-align: center; align-self: center;}
            .icecream-soda-description{grid-area: 5/8 /span 1 /span 4; z-index: 5; text-align: center; padding-top: 40px;}
            .icecream-sodas-flavors{grid-area: 5/8 /span 2 /span 4; text-align: center; z-index: 5; padding-top: 100px;}

        /*Root Beer Floats*/
            .rootbeer-floats-title{grid-area: 6/8 /span 2 /span 4; z-index: 5; text-align: center; padding-top: 120px;}
            .rootbeer-floats-description{grid-area: 7/8 /span 1 /span 4; z-index: 5; text-align: center; padding-top: 70px;}
            .rootbeer-floats-sizes{grid-area: 7/8 /span 1 /span 4; text-align: center; z-index: 5; padding-top: 130px;}

        /*Splits*/
            .splits-title{grid-area: 8/2 /span 3 /span 4; z-index: 5; text-align: center; align-self: center; padding-top:180px}
            .splits-description{grid-area: 10/2 /span 1 /span 4; z-index: 5; text-align: center; padding-top: 70px;}
            .splits-flavors{grid-area: 11/2 /span 2 /span 4; text-align: center; z-index: 5; padding-top: 60px;}
            .splits-flavors ul{line-height: 20px;}
            
        /*Sundaes*/
            .sundaes-title{grid-area: 8/8 /span 3 /span 4; z-index: 5; text-align: center; align-self: center; padding-top:180px}
            .sundaes-description{grid-area: 10/8 /span 1 /span 4; z-index: 5; text-align: center; padding-top: 70px;}
            .sundaes-flavors{grid-area: 11/8 /span 2 /span 4; text-align: center; z-index: 5; padding-top: 40px;}
            
        /*Cups and Cones*/
            .cones-cups-title{grid-area: 14/2 /span 1 /span 4; z-index: 5; text-align: center; transform: translateY(-20px);}
            .cones-cups-description{grid-area: 14/2 /span 1 /span 4; z-index: 5; text-align: center; padding-top: 80px;}
            .cones-cups-flavors{grid-area: 15/2 /span 2 /span 4; text-align: center; z-index: 5; transform:translateY(-14px);}
            
        /*Waffle Cones*/
            .waffle-cones-title{grid-area: 14/8 /span 1 /span 4; z-index: 5; text-align: center; transform: translateY(-20px);}
            .waffle-cones-description{grid-area: 14/8 /span 1 /span 4; z-index: 5; text-align: center; padding-top: 80px;}
            .waffle-cones-flavors{grid-area: 15/8 /span 2 /span 4; text-align: center; z-index: 5; transform:translateY(-14px);}

        /*Illustration*/
            .menuillustration{grid-area: 17/6 /span 4 /span 2 ; z-index: 5}
            .menuillustration .menublue{z-index: 2;}
            .menuillustration img{position: absolute; height: 400px; margin: 0 auto; padding-left: 20px;}

        /*Page Breaks*/
            .page-break-1{grid-area: 4/1 /span 1 /span 12; z-index: 5; padding: 0 12px 0px;} 
            .page-break-2{grid-area: 8/1 /span 1 /span 12; z-index: 5; padding: 150px 12px 0px;}
            .page-break-3{grid-area: 13/1 /span 1 /span 12; z-index: 5; padding: 40px 12px 0px;}
            .page-break-4{grid-area: 16/1 /span 1 /span 12; z-index: 5; padding: 10px 12px 0px;}
            .page-break-5{display: none; padding:0px 12px 0px}
            .page-break-6{display: none; padding:0px 12px 0px}
            .page-break-7{display: none; padding:0px 12px 0px}

/*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:350px){
    /*Document Setup*/
 
    /*Header*/
            .logo{grid-area: 1/1 /span 1 /span 12; white-space: nowrap;}

        /*Navigation*/
            .sidebar{width:100%}
            .menu-icon{display:block;}
            .navigation-list{display: none;}
        
  /*Document Setup*/    
    
        /*Typography*/
            h1{font-size: 2em; color: #FFFFFC}
            h2{font-size: 2.5em;}
            p2{font-size: 1.15em;}
            a{font-size: 1em; color:#FFFFFC}
            h3{font-size: 2em;}
            #menu-title h2{font-size: 8em;}
            li{font-size: .8em; line-height: 26px;}
    /*Header*/
            .header-grid-container{grid-template-rows: repeat(1,100px); margin:0px;}  
            .logo{grid-area: 1/1 /span 1 /span 5; text-align: left; padding-left:12px}
        /*Navigation*/
            .menu-icon{display:block; padding-right:12px}
            .navigation-list{display: none;}
        /*Location and Line*/
            .line-location{display: none;}
    
    /*Body*/
            .grid-container{grid-template-rows: repeat(19,120px)}
            body{background:#1E191B;}
            .menu-background-color{grid-area: 1/1 /span 19 /span 12;}

     /*Title*/
            #menu-title{grid-area: 1/1 /span 3 /span 12; text-align: center; z-index: 2; align-self: flex-start;}

        /*Malts & Shakes*/
            .malts-shakes-title{grid-area: 2/2 /span 2 /span 10; align-self: flex-start; padding-top: 10px}
            .malts-shakes-description{grid-area: 2/1 /span 1 /span 12; padding: 60px 12px 0px 12px;}
            .malts-shakes-flavors-left{grid-area: 1/4 /span 3 /span 2; padding-top:25px;}
            .malts-shakes-flavors-right{grid-area: 1/8 /span 3 /span 2; padding:25px 0px 0px 20px; }
            .malt-flavors-container{grid-area: 3/1 /span 2 /span 12; display: flex; justify-content: center; z-index: 6;}

        /*Root Beer Floats*/
            .rootbeer-floats-title{grid-area: 5/2 /span 2 /span 10; padding-top: 40px;}
            .rootbeer-floats-description{grid-area: 5/2 /span 1 /span 10; padding-top: 90px;}
            .rootbeer-floats-sizes{grid-area: 6/2 /span 1 /span 10; padding-top: 30px;}
    
        /*Ice Cream Sodas*/
            .icecream-sodas-title{grid-area: 6/2 /span 2 /span 10; padding-top:60px;}
            .icecream-soda-description{grid-area: 7/2 /span 1 /span 10; padding-top: 48px;}
            .icecream-sodas-flavors{grid-area: 7/2 /span 2 /span 10; padding-top: 100px;}
    
        /*Splits*/
            .splits-title{grid-area: 8/2 /span 3 /span 10; align-self: flex-start; padding-top:120px}
            .splits-description{grid-area: 9/1 /span 1 /span 12; text-align: center; padding: 40px 12px 0px 12px;}
            .splits-flavors{grid-area: 10/2 /span 2 /span 10; padding-top:10px}
            .splits-flavors ul{line-height: 20px;}
            
        /*Sundaes*/
            .sundaes-title{grid-area: 11/2 /span 3 /span 10; align-self: flex-start; padding-top:80px}
            .sundaes-description{grid-area: 12/1 /span 1 /span 12; padding: 0px 12px 0px 12px;}
            .sundaes-flavors{grid-area: 12/2 /span 2 /span 10; padding-top: 90px;}
            
        /*Cups and Cones*/
            .cones-cups-title{grid-area: 14/2 /span 1 /span 10; padding-top:50px;}
            .cones-cups-description{grid-area: 14/2 /span 1 /span 10; padding-top: 82px;}
            .cones-cups-flavors{grid-area: 15/2 /span 2 /span 10;}
            
        /*Waffle Cones*/
            .waffle-cones-title{grid-area: 16/2 /span 1 /span 10;}
            .waffle-cones-description{grid-area: 16/2 /span 1 /span 10; padding-top: 30px;}
            .waffle-cones-flavors{grid-area: 16/2 /span 2 /span 10; padding-top: 80px;}

        /*Illustration*/
            .menuillustration{grid-area: 17/2 /span 2 /span 10; display: flex; justify-content: center; vertical-align: center; padding-top: 60px}
            .menuillustration img{width:45%; height: auto; display: flex;}
        /*Page Breaks*/
            .page-break-1{grid-area: 1/1 /span 1 /span 12; z-index: 5; padding-top: 110px}
            .page-break-2{grid-area: 5/1 /span 1 /span 12; z-index: 5; padding-top: 10px}
            .page-break-3{grid-area: 6/1 /span 1 /span 12; z-index: 5; padding-top: 100px;}
            .page-break-4{grid-area: 8/1 /span 1 /span 12; z-index: 5; padding-top: 90px;}
            .page-break-5{grid-area: 11/1 /span 1 /span 12; z-index: 5; display: block; padding-top: 50px}
            .page-break-6{grid-area: 14/1 /span 1 /span 12; z-index: 5; display: block; padding-top:0px}
            .page-break-7{grid-area: 15/1 /span 1 /span 12; z-index: 5; display: block; padding-top:80px}
    
    /*Footer*/
        /*Section Setup*/
            .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}
            footer{background: #1E191B;}
        /*Objects*/
            /*Logo*/
                .footer-logo{grid-area: 1/1 /span 1 /span 12;}
            /*Copywright*/
                .line-copywright a{color: #FFFFFC; white-space: pre-wrap; padding: 0px 12px;}
                .line-copywright img{display: none;}
}
@media (max-width:768px) and (min-width:351px){
    /*Document Setup*/    
    
        /*Typography*/
            h1{font-size: 2em; color: #FFFFFC}
            h2{font-size: 3.5em;}
            a{font-size: 1em; color:#FFFFFC}
            h3{font-size: 2em;}
    
    /*Header*/
            .header-grid-container{grid-template-rows: repeat(1,100px); margin:0px;}  
            .logo{grid-area: 1/1 /span 1 /span 5; text-align: left; padding-left:12px}
        /*Navigation*/
            .menu-icon{display:block; padding-right:12px}
            .navigation-list{display: none;}
        /*Location and Line*/
            .line-location{display: none;}
    
    /*Body*/
            .grid-container{grid-template-rows: repeat(28,120px)}
            body{background:#1E191B;}
            .menu-background-color{grid-area: 1/1 /span 28 /span 12;}

     /*Title*/
            #menu-title{grid-area: 1/2 /span 3 /span 10; text-align: center; z-index: 2; align-self: center;}

        /*Malts & Shakes*/
            .malts-shakes-title{grid-area: 3/2 /span 2 /span 10; z-index: 5; text-align: center; align-self: center;}
            .malts-shakes-description{grid-area: 4/2 /span 1 /span 10; z-index: 5; text-align: center; padding: 40px 0 0 0;}
            .malts-shakes-flavors-left{grid-area: 4/4 /span 3 /span 2; text-align: center; z-index: 5; padding-top:150px;}
            .malts-shakes-flavors-right{grid-area: 4/8 /span 3 /span 2; text-align: center; z-index: 5; padding: 150px 0px 0px 40px;;}
            .malt-flavors-container{grid-area: 4/1 /span 3 /span 12; z-index: 5; display: flex; justify-content: center;}

        /*Ice Cream Sodas*/
            .icecream-sodas-title{grid-area: 13/2 /span 2 /span 10; z-index: 5; text-align: center; align-self: center;}
            .icecream-soda-description{grid-area: 14/2 /span 1 /span 10; z-index: 5; text-align: center; padding-top: 40px;}
            .icecream-sodas-flavors{grid-area: 14/2 /span 2 /span 10; text-align: center; z-index: 5; padding-top: 100px;}

        /*Root Beer Floats*/
            .rootbeer-floats-title{grid-area: 8/2 /span 2 /span 10; z-index: 5; text-align: center; padding-top: 120px;}
            .rootbeer-floats-description{grid-area: 9/2 /span 1 /span 10; z-index: 5; text-align: center; padding-top: 70px;}
            .rootbeer-floats-sizes{grid-area: 9/2 /span 1 /span 10; text-align: center; z-index: 5; padding-top: 130px;}

        /*Splits*/
            .splits-title{grid-area: 10/2 /span 3 /span 10; z-index: 5; text-align: center; align-self: center; padding-top:0px}
            .splits-description{grid-area: 11/2 /span 1 /span 10; z-index: 5; text-align: center; padding-top: 110px;}
            .splits-flavors{grid-area: 12/2 /span 2 /span 10; padding-top:50px}
            .splits-flavors ul{line-height: 20px;}
            
        /*Sundaes*/
            .sundaes-title{grid-area: 15/2 /span 3 /span 10; z-index: 5; text-align: center; align-self: center; padding-top:180px}
            .sundaes-description{grid-area: 17/2 /span 1 /span 10; z-index: 5; text-align: center; padding-top: 70px;}
            .sundaes-flavors{grid-area: 18/2 /span 2 /span 10; text-align: center; z-index: 5; padding-top: 40px;}
            
        /*Cups and Cones*/
            .cones-cups-title{grid-area: 21/2 /span 1 /span 10;}
            .cones-cups-description{grid-area: 21/2 /span 1 /span 10; padding-top: 60px;}
            .cones-cups-flavors{grid-area: 22/2 /span 2 /span 10; text-align: center; z-index: 5; transform:translateY(-26px);}
            
        /*Waffle Cones*/
            .waffle-cones-title{grid-area: 23/2 /span 1 /span 10;}
            .waffle-cones-description{grid-area: 23/2 /span 1 /span 10;padding-top: 60px;}
            .waffle-cones-flavors{grid-area: 24/2 /span 2 /span 10; transform:translateY(-34px);}

        /*Illustration*/
            .menuillustration{grid-area: 25/5 /span 4 /span 2 ;}

        /*Page Breaks*/
            .page-break-1{grid-area: 3/1 /span 1 /span 12; z-index: 5; padding-top: 30px}
            .page-break-2{grid-area: 8/1 /span 1 /span 12; z-index: 5; padding-top: 40px}
            .page-break-3{grid-area: 10/1 /span 1 /span 12; z-index: 5; padding-top: 100px;}
            .page-break-4{grid-area: 13/1 /span 1 /span 12; z-index: 5; padding-top: 40px;}
            .page-break-5{grid-area: 16/1 /span 1 /span 12; z-index: 5; display: block; padding-top: 40px}
            .page-break-6{grid-area: 20/1 /span 1 /span 12; z-index: 5; display: block; padding-top:40px}
            .page-break-7{grid-area: 24/1 /span 1 /span 12; z-index: 5; display: block; padding-top:70px}
    
    /*Footer*/
        /*Section Setup*/
            .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}
            footer{background: #1E191B;}
        /*Objects*/
            /*Logo*/
                .footer-logo{grid-area: 1/1 /span 1 /span 12;}
            /*Copywright*/
                .line-copywright a{color: #FFFFFC;}
}
@media (min-width:769px) and (max-width:1200px){
    header h1{font-size: 80px;}
}