@charset "utf-8";

/* CSS Document */
html {
    background-color: #535262;
}

body {
    margin: 0;
    padding: 0;
    font-family: "century gothic", arial, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    line-height: 1.5em;
}

#site_wrap {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 
		repeat(4, minmax(0,272px))
		1fr;
    grid-gap: 0px;
    grid-template-rows: 170px
        1fr
		300px 
		300px
        1fr
		1fr;
    grid-template-areas: "header header header header header header"
        ". . . . . ."
		". door door welcome welcome ."
		". door door nav nav ."
        ". . . . . ."
		"footer footer footer footer footer footer";
}

.header {
    background-color: #3D3D42;
    grid-area: header;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
}

.mobile-banner {
    display: none;
}

.banner {
    padding-top: 0%;
    width: 100%;
    height: auto;
    position: relative;
}

.mySlides {
    display: none;
    height: 100%;
}

.mySlides img {
    width: 100%;
    height: 100%;
}

.door {
    grid-area: door;
    overflow: hidden;
    position: relative;
    margin: auto;
    width: 535px;
    height: 583px;
}

.slide-text {
    color: #D9D3F5;
    font-size: 15px;
    padding: 4px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    left: 50%;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    text-transform: uppercase;
}

.slide-number {
    color: #D9D3F5;
    font-size: 11px;
    position: absolute;
    top: 6.25%;
    left: 43%;
}

.welcome {
    color: #D9D3F5;
    grid-area: welcome;
    display: flex;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
    font-size: 36pt;
    line-height: 1em;
    align-items: center;
    text-align: center;
    margin: 16px;
}

.nav {
    list-style: none;
    padding: 0;
    display: grid;
    grid-area: nav;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 125px 100px;
    text-align: center;
}

.nav a {
    text-decoration: none;
    font-size: 30px;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    text-transform: uppercase;
    letter-spacing: 5pt;
    color: #D9D3F5;
    line-height: 1em;
    display: block;
    background-color: #3D3D42;
    border-radius: 10pt;
    border: 5px solid #857DAC;
    margin: 16px;
    padding: .5em;
    box-shadow: 2px 5px 10px black;
}

.nav a:hover {
    border: 5px solid #8CB6AC;
}

.nav a:active {
    background-color: #857DAC;
    color: #3D3D42;
    border: 5px solid #3D3D42;
}

.footer {
    background-color: #857DAC;
    grid-area: footer;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align: center;
}

@media (max-width:1080px){
    #site_wrap {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 
		repeat(4, minmax(0,272px))
		1fr;
        grid-gap: 0px;
        grid-template-rows: 1fr
		1fr 
		1fr
		min-content
		1fr;
        grid-template-areas: "header header header header header header"
		". welcome welcome welcome welcome ."
		". nav nav nav nav ."
		". door door door door ."
		"footer footer footer footer footer footer";
    }

    .banner {
        display: none;
    }

    .mobile-header {
        background-color: #3D3D42;
        grid-area: header;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .mobile-banner {
        width: 90%;
        height: auto;
        grid-area: header;
        display: block;
        margin: 10px;
        padding-left: 4%;
        padding-right: 4%;
    }

    .welcome {
        font-size: 40px;
        text-align: center;
        justify-content: center;
    }

    .nav {
        display: grid;
        grid-area: nav;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: .5fr .25fr;
        text-align: center;
    }

    .nav a {
        text-decoration: none;
        font-size: 35px;
        font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
        text-transform: uppercase;
        letter-spacing: 8pt;
        color: #D9D3F5;
        margin: 15pt;
        padding: 10pt;
    }

    .door {
        grid-area: door;
        overflow: hidden;
        position: relative;
        margin: auto;
        width: auto;
        height: auto;
        padding: 16px;
    }

    .slide-text {
        left: 20%;
        font-size: 20pt;
        bottom: 0pt;
        display: flex;
    }

    .footer {
        font-size: 12pt;
    }

    .slide-number {
        display: none;
    }
}

@media (max-width:625px){
    .nav a {
        font-size: 20px;
        margin: 3px;
        letter-spacing: 2px;
    }

    .footer {
        font-size: 10px;
    }
}

@media (max-width:350px){
    .nav a {
        font-size: 15px;
        margin: .5px;
        letter-spacing: 2px;
    }

    .slide-text {
        font-size: 10px;
        margin-left: 6%;
    }

    .slide-number {
        display: none;
    }

    .footer {
        font-size: 8px;
    }
}

/* GRAPHIC ARTS */
#site_wrap1 {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 
		repeat(2, minmax(0,535px))
		1fr;
    grid-gap: 20px;
    grid-template-rows: repeat(17, 1fr);
    grid-template-areas: "header header header header"
		". content-nav content-nav ."
		". photoshop photoshop ."
		". GAcontent1 GAcontent2 ."
		". GAcontent3 GAcontent3 ."
		". GAcontent4 GAcontent5 ."
		". indesign indesign ."
		". GAcontent6 GAcontent7 ."
		". GAcontent8 GAcontent8 ."
		". illustrator illustrator ."
		". GAcontent9 GAcontent10 ."
		". GAcontent9 GAcontent11 ."
		". GAcontent12 GAcontent13 ."
		". GAcontent14 GAcontent14 ."
		". webdesign webdesign ."
		"footer footer footer footer";
}

.content-nav {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2 / 2 / 3 / 4;
}

.content-nav a {
    text-decoration: none;
    font-size: 55px;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    text-transform: uppercase;
    letter-spacing: 5pt;
    color: #D9D3F5;
    line-height: 1em;
    display: block;
    background-color: #3D3D42;
    border-radius: 10pt;
    border: 5px solid #857DAC;
    margin: 16px;
    padding: .5em;
    box-shadow: 2px 5px 10px black;
    margin-bottom: 30px;
    width: 8em;
}

.content-nav a:hover {
    border: 5px solid #8CB6AC;
}

.content-nav a.active {
    background-color: #857DAC;
    color: #3D3D42;
    border: 5px solid #3D3D42;
}

.photoshop {
    grid-area: photoshop;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 28pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
}

.GAcontent1 {
    grid-area: GAcontent1;
    margin-top: 20px;
    height: 25%;
}

.static {
    height: auto;
    width: 100%;
}

.GAcontent2 {
    grid-area: GAcontent2;
    margin-top: 20px;
    height: 25%;
}

.gerald {
    height: auto;
    width: 100%;
}

.GAcontent3 {
    grid-area: GAcontent3;
    height: 25%;
}

.petrichor {
    height: auto;
    width: 100%;
}

.GAcontent4 {
    grid-area: GAcontent4;
    height: 25%;
}

.digitalpainting {
    height: auto;
    width: 100%;
}

.GAcontent5 {
    grid-area: GAcontent5;
    height: 25%;
}

.knife-and-bow {
    height: auto;
    width: 100%;
}

.indesign {
    grid-area: indesign;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 28pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
}

.GAcontent6 {
    grid-area: GAcontent6;
    height: 25%;
}

.fortune-teller {
    height: auto;
    width: 100%;
}

.GAcontent7 {
    grid-area: GAcontent7;
    height: 25%;
}

.calander {
    height: auto;
    width: 100%;
}

.GAcontent8 {
    grid-area: GAcontent8;
    height: 650px;
}

.beadbox {
    height: auto;
    width: 90%;
    display: flex;
    position: relative;
    margin-left: 5%;
}

.illustrator {
    grid-area: illustrator;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 28pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
    margin-top: 50px;
}

.GAcontent9 {
    grid-area: GAcontent9;
    height: 400px;
}

.doordrawing {
    height: auto;
    width: 100%;
}

.GAcontent10 {
    grid-area: GAcontent10;
    height: 200px;
}

.mobilebannersketch {
    height: auto;
    width: 100%;
}

.GAcontent11 {
    grid-area: GAcontent11;
    height: 150px;
}

.barcode {
    height: auto;
    width: 100%;
}

.GAcontent12 {
    grid-area: GAcontent12;
    height: 220px;
    margin-top: 40%;
}

.coffeelogo {
    height: auto;
    width: 100%;
}

.GAcontent13 {
    grid-area: GAcontent13;
    height: 220px;
    margin-top: 40%;
}

.BBR {
    height: auto;
    width: 100%;
}

.GAcontent14 {
    grid-area: GAcontent14;
    height: 100%;
    margin-top: 15%;
}

.bannersketch {
    height: auto;
    width: 100%;
}

.webdesign {
    grid-area: webdesign;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 15pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
}

.footer {
    grid-area: footer;
    height: 50px;
    position: relative;
    top: -50%;
}

@media (max-width:777px){
    .GAcontent8 {
        height: 500px;
    }

    .GAcontent12 {
        margin-top: 1%;
    }

    .GAcontent13 {
        margin-top: 1%;
    }

    .GAcontent14 {
        margin-top: 1%;
    }

    .footer {
        height: 10px;
    }
}

@media (max-width:592px){
    .GAcontent8 {
        height: 300px;
    }

    .GAcontent10 {
        height: 100px;
    }

    .GAcontent9 {
        height: 200px;
    }

    .GAcontent12 {
        height: 150px;
    }

    .GAcontent13 {
        height: 150px;
    }
}

@media (max-width:497px){
    .GAcontent8 {
        height: 220px;
    }

    .GAcontent9 {
        height: 200px;
    }

    .GAcontent11 {
        height: 100px;
    }

    .GAcontent12 {
        height: 150px;
    }

    .GAcontent13 {
        height: 100px;
    }
}

/* FINE ARTS */
#site_wrap2 {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 
		repeat(2, minmax(0,535px))
		1fr;
    grid-gap: 20px;
    grid-template-rows: repeat(17, 1fr);
    grid-template-areas: "header header header header"
		". content-nav content-nav ."
		". drawing drawing ."
		". content1 content2 ."
		". content3 content2 ."
		". content4 content5 ."
        ". content6 content7 ."
		". painting painting ."
		". content8 content9 ."
		". content10 content11 ."
        ". mixed-media mixed-media ."
		". content12 content13 ."
		". content14 content15 ."
		". photography photography ."
		". content16 content17 ."
        ". content18 content19 ."
        ". content20 content21 ."
        ". content20 content22 ."
		"footer footer footer footer";
}

.content-nav {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 2 / 2 / 3 / 4;
}

.content-nav a {
    text-decoration: none;
    font-size: 25px;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    text-transform: uppercase;
    letter-spacing: 5pt;
    color: #D9D3F5;
    line-height: 1em;
    display: block;
    background-color: #3D3D42;
    border-radius: 10pt;
    border: 5px solid #857DAC;
    margin: 16px;
    padding: .5em;
    box-shadow: 2px 5px 10px black;
    margin-bottom: 30px;
    width: 8em;
}

.content-nav a:hover {
    border: 5px solid #8CB6AC;
}

.content-nav a.active {
    background-color: #857DAC;
    color: #3D3D42;
    border: 5px solid #3D3D42;
}

.drawing {
    grid-area: drawing;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 28pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
}

.content1 {
    grid-area: content1;
    margin-top: 20px;
    height: 25%;
}

.SP2 {
    height: auto;
    width: 100%;
}

.content2 {
    grid-area: content2;
    margin-top: 20px;
    height: 25%;
}

.figuredrawing {
    height: auto;
    width: 100%;
}

.content3 {
    grid-area: content3;
    height: 25%;
}

.SP {
    height: auto;
    width: 100%;
}

.content4 {
    grid-area: content4;
    height: 25%;
}

.amiraportrait {
    height: auto;
    width: 100%;
}

.content5 {
    grid-area: content5;
    height: 25%;
}

.figuredrawing2 {
    height: auto;
    width: 100%;
}

.content6 {
    grid-area: content6;
    height: 25%;
}

.gerard {
    height: auto;
    width: 100%;
}

.content7 {
    grid-area: content7;
    height: 25%;
}

.theused {
    height: auto;
    width: 100%;
}

.painting {
    grid-area: painting;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 28pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
}

.content8 {
    grid-area: content8;
    height: 650px;
}

.painting1 {
    height: auto;
    width: 90%;
}

.content9 {
    grid-area: content9;
    height: 283px;
}

.watercolor {
    height: auto;
    width: 100%;
}

.content10 {
    grid-area: content10;
    height: 10px;
}

.planets {
    height: auto;
    width: 50%;
    margin-left: 15%;
}

.content11 {
    grid-area: content11;
    height: 150px;
    margin-top: -120% ;
}

.cat {
    height: auto;
    width: 100%;
}

.mixed-media {
    grid-area: mixed-media;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 28pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
    margin-top: 550px;
}

.content12 {
    grid-area: content12;
    height: 700px;
}

.gabe {
    height: auto;
    width: 100%;
}

.content13 {
    grid-area: content13;
    height: 320px;
}

.scotty {
    height: auto;
    width: 100%;
}

.content14 {
    grid-area: content14;
    height: 100%;
}

.YesterdaysPaper {
    height: auto;
    width: 100%;
}

.content15 {
    grid-area: content15;
    height: 700px;
}

.scoob {
    height: auto;
    width: 100%;
}

.photography {
    grid-area: photography;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 28pt;
    text-align: center;
    padding: 16px;
    letter-spacing: 5pt;
}

.content16 {
    grid-area: content16;
    height: 400px;
}

.eric {
    height: auto;
    width: 100%;
}

.content17 {
    grid-area: content17;
    height: 400px;
}

.moss {
    height: auto;
    width: 100%;
}

.content18 {
    grid-area: content18;
    height: 400px;
}

.winter {
    height: auto;
    width: 100%;
}

.content19 {
    grid-area: content19;
    height: 400px;
}

.lense {
    height: auto;
    width: 100%;
}

.content20 {
    grid-area: content20;
    height: 900px;
}

.eye {
    height: auto;
    width: 100%;
}

.content21 {
    grid-area: content21;
    height: 700px;
}

.time {
    height: auto;
    width: 100%;
}

.content22 {
    grid-area: content22;
    height: 400px;
}

.pine {
    height: auto;
    width: 100%;
}



@media (max-width:999px) {
    .content-nav a {
        font-size: 18px;
        justify-content: center;
    }

    .content8 {
        height: 550px;
    }

    .content10 {
        margin-top: 10%;
    }

    .content11 {
        margin-bottom: -50px;
    }

    .content12 {
        height: 625px;
    }

    .content14 {
        height: 500px;
    }

    .content15 {
        height: 600px;
    }

    .content16 {
        height: 350px;
    }

    .content17 {
        height: 350px;
    }

    .content18 {
        height: 350px;
    }

    .content19 {
        height: 350px;
    }

    .content20 {
        height: 450px;
    }

    .content21 {
        height: 600px;
    }

    .content22 {
        height: 350px;
    }
}

@media (max-width:768px){
    .mobile-header {
        justify-content: center;
        grid-area: header;
    }

    .mobile-banner {
        grid-area: header;
        align-items: center;
    }

    .content-nav a {
        font-size: 15px;
    }

    .content8 {
        height: 400px;
    }

    .content10 {
        height: 50px;
        margin-top: 10%;
    }

    .content11 {
        margin-top: -150%;
    }

    .content12 {
        height: 450px;
    }

    .content14 {
        height: 450px;
    }

    .content15 {
        height: 450px;
    }

    .content16 {
        height: 250px;
    }

    .content17 {
        height: 250px;
    }

    .content18 {
        height: 250px;
    }

    .content19 {
        height: 250px;
    }

    .content20 {
        height: 400px;
    }

    .content21 {
        height: 450px;
    }

    .content22 {
        height: 250px;
    }
    .mixed-media {
    	margin-top:50%;
    }
}

@media (max-width:776px) {
    .content-nav {
        margin: 10px;
        display: inline-block;
        grid-area: content-nav;
        text-align: center;
    }

    .content-nav a {
        text-decoration: none;
        font-size: 20px;
        font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
        text-transform: uppercase;
        color: #D9D3F5;
        margin: 0pt;
        border: 3px solid #857DAC;
        letter-spacing: 2px;
    }

    .content-nav a:hover {
        border: 3px solid #8CB6AC;
    }
}

@media (max-width:498px){
    .content-nav {
        padding: 2px;
        display: inline-block;
        grid-area: content-nav;
        text-align: center;
    }

    .content-nav a {
        text-decoration: none;
        font-size: 5px;
        font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
        text-transform: uppercase;
        color: #D9D3F5;
        margin: 50pt;
        border: 3px solid #857DAC;
        letter-spacing: 2px;
    }

    .content-nav a.active {
        background-color: #857DAC;
        color: #3D3D42;
        border: 3px solid #3D3D42;
    }

    .photoshop {
        font-size: 20px;
    }

    .indesign {
        font-size: 20px;
    }

    .illustrator {
        font-size: 20px;
    }

    .webdesign
        h1 {
        font-size: 20px;
    }

    p {
        font-size: 15px;
    }

    .content8 {
        height: 300px;
    }

    .content9 {
        height: 100px;
    }

    .content11 {
        margin-top: -150%;
    }

    .mixed-media {
        margin-top: 50%;
    }

    .content12 {
        height: 270px;
    }

    .content13 {
        height: 270px;
    }

    .content14 {
        height: 250px;
    }

    .content15 {
        height: 280px;
    }

    .content16 {
        height: 150px;
    }

    .content17 {
        height: 150px;
    }

    .content18 {
        height: 150px;
    }

    .content19 {
        height: 150px;
    }

    .content21 {
        height: 280px;
    }

    .content22 {
        height: 150px;
    }

    .drawing {
        font-size: 20px;
    }

    .painting {
        font-size: 20px;
    }

    .mixed-media {
        font-size: 20px;
    }

    .photography {
        font-size: 20px;
    }
}

/* ABOUT AND CONTACT */
#site_wrap3 {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 
		repeat(2, minmax(0,535px))
		1fr;
    grid-gap: 20px;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas: "header header header header"
		".  content-nav content-nav  ."
		".  about about  ."
        ". P1 P2 ."
		"afooter afooter afooter afooter";
}

.content-nav a {
    text-decoration: none;
    font-size: 25px;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    text-transform: uppercase;
    letter-spacing: 5pt;
    color: #D9D3F5;
    line-height: 1em;
    display: block;
    background-color: #3D3D42;
    border-radius: 10pt;
    border: 5px solid #857DAC;
    margin: 16px;
    padding: .5em;
    box-shadow: 2px 5px 10px black;
    margin-bottom: 30px;
    width: 8em;
}

.content-nav a:hover {
    border: 5px solid #8CB6AC;
}

.content-nav a.active {
    background-color: #857DAC;
    color: #3D3D42;
    border: 5px solid #3D3D42;
}

.about {
    grid-area: about;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 20pt;
    text-align: padding;
    letter-spacing: 5pt;
    line-height: 1.5em;
}

.P1 {
    grid-area: P1;
    height: 600px;
}

.BC {
    height: auto;
    width: 100%;
}

.P2 {
    grid-area: P2;
    height: 600px;
}

.alex {
    height: auto;
    width: 100%;
}

.footer {
    margin-top: 23%;
}

.envelope {
    grid-area: about;
    height: 200px;
}

.e {
    grid-area: about;
    height: auto;
    width: 30%;
    margin-left: 35%;
    margin-top: -4%;
}

.contact {
    grid-area: P1;
    color: #D9D3F5;
    font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
    font-size: 20pt;
    text-align: center;
    letter-spacing: 5pt;
    line-height: 1.5em;
}

.afooter {
    grid-area: afooter;
    background-color: #857DAC;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    margin-top: 25%;
    font-size: 20px;
}

@media (max-width:1080px) {
    .content-nav {
        margin: 10px;
        display: inline-block;
        grid-area: content-nav;
        text-align: center;
    }

    .content-nav a {
        text-decoration: none;
        font-size: 35px;
        font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
        text-transform: uppercase;
        color: #D9D3F5;
        margin: 0pt;
        border: 3px solid #857DAC;
        letter-spacing: 2px;
    }

    .content-nav a:hover {
        border: 3px solid #8CB6AC;
    }

    .afooter {
        font-size: 14px;
    }

    .about {
        font-size: 30px;
    }

    .contact {
        font-size: 40px;
    }
}

@media (max-width:777px){
    .content-nav a {
        font-size: 23px;
    }

    .about {
        font-size: 20px;
    }
    .afooter{
    margin-top:0%;
    }
}

@media (max-width:592px){
    .content-nav {
        display: inline-block;
        grid-area: content-nav;
        text-align: center;
    }

    .content-nav a {
        text-decoration: none;
        font-size: 20px;
        font-family: "Century Gothic", "Gill Sans MT", "Avenir Next", Calibri, Helvetica, Arial, "sans-serif";
        text-transform: uppercase;
        color: #D9D3F5;
        margin: 0pt;
        border: 3px solid #857DAC;
        letter-spacing: 2px;
    }

    .content-nav a.active {
        background-color: #857DAC;
        color: #3D3D42;
        border: 3px solid #3D3D42;
    }

    .envelope {
        height: 80px;
    }

    .contact {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .afooter {
        font-size: 9px;
        height: 20px;
        padding-top: 2px;
        margin-top: 60%;
    }

    .about {
        font-size: 10px;
        letter-spacing: 2pt;
        line-height: 2em;
    }

    .P1 {
        height: 120px;
    }

    .P2 {
        height: 120px;
    }
}

@media (max-width:497px){
    .content-nav a {
        font-size: 15px;
    }

    .envelope {
        height: 80px;
    }
}


}