* {
            margin: 0;
            padding: 0;
            font-family: "Plus Jakarta Sans", sans-serif;
            box-sizing: border-box;
        }

        *:focus-visible {
            outline: 2px solid #BA3DA9;
            border-radius: 4px;
            outline-offset: 3px;
        }

        img {
            position: relative;
        }

        .wide {
            max-width: 940px;
            width: 100%;
            margin: 0 auto;
            /* border: 1px solid red; */
        }

        .medium {
            max-width: 820px;
            width: 100%;
            margin: 0 auto;
            padding-left: 25px;
            padding-right: 25px;
            /* border: 1px solid green; */
        }

        .x-wide {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            /* border: 1px solid hotpink; */
        }

        .page-wrapper { 
            width: 1000px;
            /* width: 100%; */
            margin: 0 auto;
            color: #E9E9E9;
            /* border: 1px solid purple; */
        }

        body {
            background: #292E35;
        }

        .page-topper {
            background: #17212C;
            padding: 12px 0;
            text-align: center;  
        }

        .breakout-box {
            border-radius: 8px;
            background: #21262B;
            border: 2px solid #F9B615;
            padding: 28px;
            text-align: center;
            position: relative;
        }

        .breakout-box:after {
            content:"";
            display:block;
            width: calc(100% + 40px);
            height: 8px;
            background: #2B6170;
            position:relative;
            top: 38px;
            left: -20px;
            border-radius: 0 0 8px 8px;
        }

        .breakout-box-green {
            border: 2px solid #00C5E2;
        }

        .breakout-box-green:after {
            background: #2B6170;
        }

        .breakout-box-green h3 {
            color:#0685;
        }

        

        .content-box {
            border-radius: 8px;
            padding: 60px;
            text-align: justify;
        }

        .content-box-darker {
            background: #21262B;
        }

        .content-box-lighter {
            background: #353B45;
        }

        .tag-set {
            text-align: left;
        }

        .tag {
            display: inline-block;
            padding: 6px 16px;
            border-radius: 16px;
            /* border: 1px solid #101316; */
            background: #414954;
            font-size: 16px;
            font-weight: 500;
            margin-right: 8px;
            margin-bottom: 14px;
        }

        .inline-image img {
            width: 100%;
            border-radius: 8px;
        }

        .image-shadow:after {
            content:"";
            display:block;
            width: 100px;
            height: 9px;
            background: #414954;
            position:relative;
            border-radius: 0 0 8px 8px;
            width: calc(100% - 20px);
            top: 0;
            left: 10px;

        }

        .breakout-image img {
            width: 100%;
            border-radius: 12px;
        }

        a:link, a:visited {
            color: aqua;
        }

        .footer {
            border-radius: 8px;
            background: #414954;
            padding: 28px;
            font-size: 15px;
            display: table;
        }

        .footer h3 {
            text-transform: uppercase;
            font-size: 15px;
            color: #F9B615;
        }

        .footer li {
            display: block;
            line-height: 26px;
        }

        .footer-column1 {
            width: 195px;
            vertical-align: top;
            display: table-cell

        }

        .footer-column2 {
            width: 236px;
            border-left: 1px solid #292E35;
            vertical-align: top;
            padding-left: 40px;
            display: table-cell

        }

        .footer-column3 {
            width: 418px;
            position: relative; 
            border-left: 1px solid #292E35;
            padding-left: 54px;
            vertical-align: top;
            display: table-cell;
            padding-top: 6px;

        }

        .content-box h2 { 
            margin: 0 0 24px 40px;
            font-size: 15px;
        
        }

        .content-box p {
            margin: 0;
            font-size: 18px;
            line-height: 1.75;
        }

        .content-box-lighter p {
            color: #FAFAFA;
        }

        .content-box hr, hr.small {
            width: 24px;
            height: 3px;
            border-radius: 1px;
            background: #00C5E2;
            border: none;
            margin: 24px 0 0;
        }

        .content-box h2, .content-box h3 {
            margin-left: 0;
        }

        p {
            margin: 0 0 60px 0;
            font-size: 18px;
            line-height: 1.75;
        }

        h1 {
            font-family: "Plus Jakarta Sans", sans-serif;
            font-size: 66px;
            font-weight: 700;
            margin: 0 0 20px 0;
            line-height: 1.3;
        }

        h2 {
            text-transform: uppercase;
            color: #00C5E2;
            font-size: 16px;
            letter-spacing: 1px;
        }

        h2.project-name {
            font-family: "Plus Jakarta Sans", sans-serif;
            font-size: 48px;
            font-weight: 600;
            margin: 0 0 20px 0;
            line-height: 1.3;
            color: #FAFAFA;
            letter-spacing:normal;
            text-transform: none;
        }

        h3 {
            text-transform: uppercase;
            color: #00C5E2;
            font-size: 15px;
            margin-bottom: 12px;
        }

        .page-header {
            height: 42px;
        }


        .site-menu {
            display: inline-block;
            float:right;
        }

        .site-menu.site-name {
            display: inline-block;
            float:left;
        }

        hr {
            width: 72px;
            height: 10px;
            border-radius: 2px;
            background: #F9B615;
            border: none;
        }

        .brightText {
            /* color: #F9B615; */
        }

        .site-menu li, .site-name li {
            display: inline-block;
            margin: 0 4px;
            font-weight: 500;
            font-size: 18px;
            transition: all ease-in 0.2s;
            position: relative;
        }

        .site-menu li a:hover {
            box-shadow: 0 0 0 1px inset #929497, 0 0 0 1px #929497;
            transition: box-shadow 0.2s ease-in;
        }

        .site-menu li.menu-current a:hover {
            box-shadow: none;
        }

        .site-menu li a {
            text-decoration: none;
            color: #e9e9e9;
            padding: 4px 10px 6px;
            border-radius: 6px;
        }

        .site-menu li.menu-current {
            /* background: #e9e9e9; */
            color: #030404;
        }

        .site-menu li.menu-current a {
            background: #e9e9e9;
            color: #030404;
        }


        div.ProjectsMenu {
            display: inline-block;
            position: absolute;
            visibility: hidden;
        }

       /* .site-menu li.ProjectsItem:hover div.ProjectsMenu {
            visibility: visible;
            background: red;
        } */


        /* .site-menu li.menu-current:after {
            content: "";
            display: block;
            height: 3px;
            width: 100%;
            background: #F9B615;
            position: relative;
            top: 8px;
            border-radius: 1px;
        }

        .site-menu li:hover:after {
            content: "";
            display: block;
            height: 3px;
            width: 100%;
            background: #ffffff;
            opacity: 0.6;
            position: relative;
            top: 8px;
            border-radius: 1px;
        } */


        .margin-10 {
            margin: 0 auto;
            height: 10px;
        }

        .margin-12 {
            margin: 0 auto;
            height: 12px;
        }

        .margin-20 {
            margin: 0 auto;
            height: 20px;
        }

        .margin-40 {
            margin: 0 auto;
            height: 40px;
        }

        .margin-50 {
            margin: 0 auto;
            height: 50px;
        }

        .margin-60 {
            margin: 0 auto;
            height: 60px;
        }

        .margin-80 {
            margin: 0 auto;
            height: 80px;
        }

        .margin-100 {
            margin: 0 auto;
            height: 100px;
        }

        .margin-120 {
            margin: 0 auto;
            height: 120px;
        }

        .subtext {
            font-size: 15px;
            opacity: 0.7;
            line-height: 28px;
            /* font-style: italic; */
        }

        span.subtext {
            display: block;
        }

        .article {
            padding-left: 34px;
            margin: 0;
            line-height: 24px;
        }

        .article:before {
            content: "";
            height: 24px;
            width: 24px;
            display: block;
            background: url("../media/icon-article.svg");
            position: relative;
            left: -34px;
            top: 25px;
        }

        .article.article-home-articles:before {
            background: url("../media/icon-home-articles.svg");
        }

        .article.article-home-projects:before {
            background: url("../media/icon-home-projects.svg");
        }

        .article.article-home-about:before {
            background: url("../media/icon-home-about.svg");
        }

        input[type=text] {
            border: 1px solid #E9E9E9;
            background: #292E35;
            border-radius: 8px;
            color: #E9E9E9;
            font-size: 16px;
            padding: 8px;
            width: 300px;
        }

        input[type=text]:focus-visible {
            outline: none;
            border-color: #00C5E2;
            box-shadow: 0 0 0 4px #2B6170;
        }

        button {
            border: 1px solid #00C5E2;
            background: #00C5E2;
            border-radius: 6px;
            color: #17212C;
            font-size: 14px;
            padding: 10px;
            width: 90px;
            margin-left: 6px;
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 0.5px;
        }

        button:focus-visible {
            outline: none;
            box-shadow: 0 0 0 4px #2B5941;
        }

        .article a:link, .article a:visited, .footer a:link, .footer a:visited {
            color: #E9E9E9;
            text-decoration-color: #86888B;
        }

        .article a:link:hover, .article a:visited:hover, .footer a:link:hover, .footer a:visited:hover {
            color: #E9E9E9;
            text-decoration-color: #E9E9E9;
        }

        .badge {
            display: inline-block;
            color: #26BE48;
            background: #2B5941;
            font-size: 12px;
            padding: 3px 4px 2px;
            line-height: 12px;
            margin-left: 4px;
            border-radius: 4px;
            position: relative;
            top: -2px;
            text-transform: uppercase;
        }









        .heart-container {
            position: relative;
            left: 4px;
            top: 3px;
        }

        .heart-container .heart {
            position: relative;
            left: -4px;
            top: -2px;
        }

        .heart-container:hover .heart {
            animation: heart-animation 1.65s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .pop {
            transform: scale(0);
            position: absolute;
            width: 12px; 
            height: 12px; 
            border-radius: 10px; 
            background: #EB5495;
        }

        .heart-container {
            position: relative;
            display: inline-block;
        }

        @keyframes heart-animation {
            0% { opacity: 1;
                 transform: scale(1);
            }

            15% { 
                transform: scale(0.8);
            }


            65% { opacity: 1;
                 transform: scale(1.2);                
            }

            80% { opacity: 1;
                 transform: scale(1.2);                
            }

            100% { opacity: 1;
                 transform: scale(1);
            }
        }

        @keyframes pop1-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }

            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: 0;
                 left: -20px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        @keyframes pop2-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }


            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: -15px;
                 left: -15px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        @keyframes pop3-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }


            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: -20px;
                 left: 0px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        @keyframes pop4-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }


            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: -15px;
                 left: 15px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        @keyframes pop5-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }


            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: 0;
                 left: 20px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        @keyframes pop6-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }


            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: 15px;
                 left: 15px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        @keyframes pop7-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }


            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: 20px;
                 left: 0px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        @keyframes pop8-animation {
            0% { opacity: 1;
                 transform: scale(0);
                 position: absolute;
                 top: 0;
                 left: 0;
                 filter: blur(0);
                 background: #DA3838;
            }

            50% {
                opacity: 0.75;
            }


            100% { opacity: 0;
                 transform: scale(1.5);
                 position: absolute;
                 top: 15px;
                 left: -15px;
                 filter: blur(4px);
                 background: #EB5495;
            }
        }

        .heart-container:hover .pop1 {
            animation: pop1-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart-container:hover .pop2 {
            animation: pop2-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart-container:hover .pop3 {
            animation: pop3-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart-container:hover .pop4 {
            animation: pop4-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart-container:hover .pop5 {
            animation: pop5-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart-container:hover .pop6 {
            animation: pop6-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart-container:hover .pop7 {
            animation: pop7-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart-container:hover .pop8 {
            animation: pop8-animation 1.5s cubic-bezier(0.87, 0, 0.13, 1);
        }

        .heart p {
        display: inline-block;
        }

        .project-box {
            margin: 0 auto;
            display: table;
        }

        a.project-box:hover .project-wrap-wide {
            box-shadow: 0 0 0 2px #292E35, 0 0 0 4px #00C5E2;
            transition: all linear 0.3s;
        }

        a.project-box:link {
            color: #FAFAFA;
            text-decoration: none;
        }

        a.project-box:hover h2 {
            color: #FAFAFA;
            text-decoration: underline;
        }

        a.project-box:hover h2 {
            transition: all linear 0.3s;
        }

        a.project-box:visited {
            color: #FAFAFA;
            text-decoration: none;
        }

        .project-wrap-wide-text {
            /* border: 1px solid green; */
        }

        .project-wrap-wide-text p {
            margin-bottom: 0;
        }



        .experience-row {
            display: block;
        }

        .experience-logo {
            display: inline-block;
            width: 80px;
            vertical-align: top;
        }

        .experience-logo img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
        }

        .experience-title {
            display: inline-block;
            vertical-align: top;
            width: 300px;
            padding-right: 20px;
        }

        .experience-title p {
            text-align: left;
            line-height: 22px;
        }

        .experience-details {
            display: inline-block;
            vertical-align: top;
            padding-left: 20px;
        }

        .experience-details li, .experience-details p {
            text-align: left;
            line-height: 22px;
        }




        .page-topper a:link, .page-topper a:visited  {
            padding: 2px px;
            border-radius: 4px; 
            color: #00C5E2;
            text-decoration-color: #2B6170;
        }

        .page-topper a:hover  {
            text-decoration-color: #00C5E2;
        }

        .why-hire-me li {
            margin-bottom: 20px;
        }


        .project-image {
            display: block;
        }

        .project-image img {
            width: 100%;
            border-radius: 14px 14px 0 0;
        }

        a.project-wrap {
            display: inline-block;
            padding: 0;
            margin: 0 18px;
            border-radius: 16px;
            background: #21262B;
            border: 2px solid #21262B;
            width: 462px;
        }

        a.project-wrap:hover {
            border: 2px solid #00C5E2;
        }

        .project-name {
            display: block;
            padding: 16px 20px 20px 20px;
        }

        h2.project-title {
            color: #E9E9E9;
            text-transform: none;
        }

        a.project-wrap:link, a.project-wrap:visited {
            text-decoration-color: #2B6170;
            font-size: 20px;
        }


        ol.case-study, ul.case-study {
            padding-left: 20px;
            font-size: 18px;
            line-height: 1.5;
            margin-left: 20px;
        }

        ol.case-study li, ul.case-study li {
            line-height: 20px;
            margin-bottom: 20px;
            border-bottom: red;
        }

        span.case-study-list-item {
            display: inline-block;
            position:relative;
            left: 10px;
            /* max-width: 585px; */
            text-align: left;
            vertical-align: top;
            line-height: 1.5;
        }

        h2.case-study {
            margin-bottom: 30px;
        }

        p.case-study {
            text-align: left;
        }

        .project-title {
            display: inline-block;
        }

        .blue-text {
            color: #00C5E2;
            letter-spacing: 0.5px;
        }



        hr.hr-wide {
            width: 100%;
            height: 1px;
            background: rgba(255,255,255,0.15);
        }


        span.downUnder {
            transform: skewY(1.07rad);
        }


        .project-wrap-wide {
            display: block;
            padding: 30px;
            border-radius: 12px;
        }

        .project-wrap-wide a:link  {
            text-decoration: none;
            color: #fafafa;
        }

        .project-wrap-wide a:hover  {
            text-decoration: underline;
            color: #fafafa;
        }





        @media only screen and (max-width: 1000px) {


            .inline-image img {
                border-radius: 0px;
            }
    
            .breakout-image img {
                border-radius: 0px;
            }
        }

       @media only screen and (max-width: 945px) {
            .content-box {
                border-radius: 0px;
            }

            .footer {
                border-radius: 0;
            }
    
      }