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

/*Body Section*/

    /*Section Setup*/
        body{background: #1E191B;}

/*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*/
        /*Typography*/
            h1{font-size: 2em; color: #E6472F}
            h2{font-size: 3.5em;}
            h3{font-size: 2em;}
            a{font-size: 1em; color:#E6472F}
    
    /*Header*/
            .header-grid-container{grid-template-rows: repeat(1,100px); margin:0px;}
            .logo{grid-area: 1/1 /span 1 /span 5; text-align: left;}

        /*Navigation*/
            .sidebar{width:100%}
            .menu-icon{display:block;}
            .navigation-list{display: none;}
        
       /*Location and Line*/
            .line-location{display: none;}
    /*Body*/
        /*Section Setup*/
            body{background: #FFFFFC;}
            .grid-container{padding:0px; grid-template-rows: repeat(4,120px)}

    /*Footer*/
        /*Section Setup*/
            .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}
            footer{background: #FFFFFC;}
            footer h3{color: #E6472F;}
            .footer-subhead a{color: #E6472F;}
        /*Logo*/
            .footer-logo{grid-area: 1/1 /span 1 /span 12;}
            .footersubhead a{color: #E6472F;}
        /*Copywright*/
            .line-copywright a{color: #E6472F; white-space: normal;}
}   

@media (max-width:768px) and (min-width:351px){
    /*Document Setup*/    
    
        /*Typography*/
            h1{font-size: 2em; color: #E6472F}
            h2{font-size: 3.5em;}
            a{font-size: 1em; color:#E6472F}
            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;}
        /*Navigation*/
            .menu-icon{display:block;}
            .navigation-list{display: none;}
        /*Location and Line*/
            .line-location{display: none;}
    
    /*Body*/
    
            body{background: #FFFFFC;}
    
    /*Footer*/
        /*Section Setup*/
            .footer-grid-container{grid-template-rows: repeat(2,10px); margin:0px;}
            footer{background: #FFFFFC;}
        /*Objects*/
            /*Logo*/
                footer h3{color: #E6472F;}
                .footer-subhead a{color: #E6472F;}
                .footer-logo{grid-area: 1/1 /span 1 /span 12;}
            /*Copywright*/
                .line-copywright a{color: #E6472F;}
}
@media (min-width:769px) and (max-width:1200px){
    header h1{font-size: 80px;}
}