@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');
@import url('flickity.min.css');
@import url('../js/lightbox/css/lightbox.css');
@import url('gallery.css');

/* Common styles for all screen sizes */
* {
    box-sizing: border-box;
}
body,html {
    font-family: 'Inter', sans-serif;
    height: 100%;
}
/* preloader */
.loader {
    width:100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: rgba(13, 14, 28, 0.97);
    z-index: 9999;
}
.spinner {
    width:12rem;
    height: 12rem;
    border: 1.5rem solid #f0f0f0;
    border-radius: 50%;;
    border-top: 1.5rem solid #0160F2;
    -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* ### end preload ### */

html{
    scroll-behavior: smooth;
}
header {
    text-align: center;
    background-color: #0D0E1B;
}
a.dark:link,
a.dark:visited,
a.dark:active {
    text-decoration: none;
    color: #ffffff;
    cursor:pointer;
}
a.dark:hover {
    opacity: 0.75;
}
.title-block {
    text-align: center;
}
.title-block h3 {
    margin:0 auto;
    color:#000000;
    padding:1.5rem 0rem 0rem 0rem;
    text-transform: uppercase;
    font-size: 2.25rem;
    font-weight: 300;
    text-transform: uppercase;
}
.title-block p {
    font-size: 1.25em;
    margin: 0rem auto;
    font-weight: 200;
    padding-bottom: 1.5rem;
    width: 70%;
}
.tag {
    background-color: #000000;
    color: #ffffff;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}
.title-block.w .tag {
    background-color: #ffffff;
    color: #000000;
}
.title-block.w h3,  
.title-block.w p {
    color:#ffffff;
}


/* ####################
    GLOBAL [NAV BAR] 
####################### */
header {
    width:100%;
    background-color: #000000;
} 
#navigation {
    width:85%;
    max-width: 1920px;
    margin: 0 auto;
    padding:1.25rem 0rem;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
nav ul {
    /* float: right; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
nav ul li:not(:first-child) {
    margin-left: 1.25rem;
}
nav ul li a {
    display: inline-block;
    outline: none;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1rem;
    cursor:pointer;
}
#navigation ul li a.active {
    font-weight:900;
}
nav ul li a:hover {
    opacity: 85%;
}
nav ul li:last-child a::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f0ed'; 
    font-weight: 900; 
    margin-right: 8px; 
    display: inline-block; /* ensure icon aligns correctly */
}
nav ul li:last-child a {
    padding: 7px 20px;
    border-radius: 20px;
    border: 3px solid #FFF;
    font-weight: 600;
}
@media screen and (max-width: 1024px) {
    .nav-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: rgba(0, 0, 0, 0.9);
        opacity: 0;
        transition: all 0.2s ease;
    }
    .nav-wrapper ul {
        transform: translateY(-50);
        width: 75%;
        padding-top:4rem;
        margin: 0 auto;
        padding-left:unset;

        flex-direction: column;
        align-items: unset;
        justify-content: unset;
    }
    .nav-wrapper ul li:last-child a {
        padding: unset;
        border-radius: unset;
        border: 0rem;
    }
    .nav-wrapper ul li {
        text-align: center;
        padding:2rem 0rem;
        border-bottom: 1px solid #ffffff;
    }
    .nav-wrapper ul li:last-child {
        border-bottom: unset;
        padding-bottom: unset;
    }
    .nav-wrapper ul li:nth-child(1) a {
        transition-delay: 0.2s;
    }
    .nav-wrapper ul li:nth-child(2) a {
        transition-delay: 0.3s;
    }
    .nav-wrapper ul li:nth-child(3) a {
        transition-delay: 0.4s;
    }
    .nav-wrapper ul li:nth-child(4) a {
        transition-delay: 0.5s;
    }
    .nav-wrapper ul li:nth-child(5) a {
        transition-delay: 0.6s;
    }
    .nav-wrapper ul li:nth-child(6) a {
        transition-delay: 0.6s;
    }
    .nav-wrapper ul li:nth-child(7) a {
        transition-delay: 0.7s;
    }
    .nav-wrapper ul li:not(:first-child) {
        margin-left: 0;
    }
    .nav-wrapper ul li a {
        opacity: 0;
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 600;
        transform: translateX(-20px);
        transition: all 0.2s ease;
    }
    .nav-btn {
        position: absolute;
        right: 1.75rem;
        top: 1.75rem;
        display: block;
        width:48px;
        height:48px;
        cursor: pointer;
        z-index: 9999;
        border-radius: 50%;
        background-color: #FFFFFF;
    }
    .nav-btn i {
        display: block;
        width: 20px;
        height: 2px;
        background: #000000;
        border-radius: 2px;
        margin-left:14px; 
    }
    .nav-btn i:nth-child(1) {
        margin-top: 16px;
    }
    .nav-btn i:nth-child(2) {
        margin-top: 4px;
        opacity: 1;
    }
    .nav-btn i:nth-child(3) {
        margin-top: 4px;
    }
}
#nav-checked + .nav-btn {
    transform: rotate(45deg);
}
#nav:checked + .nav-btn i {
    background: #000000;
    transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
    transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
    opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
    transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-wrapper {
    z-index: 9990;
    opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
    opacity: 1;
    transform: translateX(0);
}
.hidden {
    display: none;
}


/* ##################
    [GLOBAL] FOOTER
##################### */
#footer {
    background-color: #0D0E1B;
    padding-top: 3rem;
}
#footer .content-box {
    background: linear-gradient(180deg, #015EFE 0%, #013DB2 100%);
    width:70%;
    padding:2rem 5rem;
    color:#ffffff;
}
#footer .f-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
}
#footer ul,
#footer div.f-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#footer ul {
    margin: 0rem;
    padding: 0rem;
    list-style-type: none;
}
#footer ul li {
    padding-right: 2rem;
}
#footer .f-socials {
    justify-content: space-between;
    /* width: 15%; */
}
#footer .f-socials li {
    padding-right: 0.75rem;
}
#footer .f-socials li:nth-child(:last-of-type) {
    padding-right:unset;
}
#footer .f-socials a:link,
#footer .f-socials a:active,
#footer .f-socials a:visited {
    font-size: 0.5rem;
    background-color:#ffffff;
    border-radius: 100px;
    padding: 0.5rem 0.5rem;
    display: inline-block;
    text-align: center;
    cursor:pointer;
}
#footer .f-socials li i {
    color:#015EFE;
    font-size: 1.25rem;
}
#footer hr {
    border: 0.125rem solid #ffffff;
    border-radius: 1rem;
}
#footer p {
    text-align: right;
}

/* ###############
    HOME [HERO] 
################## */
#hero {
    background-color: #f0f0f0;
}
#hero.secondary {
    background-color:#0D0E1B;
}
#hero.secondary #greeting {
    position: absolute;
    top: 25%;
    right: 10%;
    width: 35%;
    color: #ffffff;
}
#hero.secondary #greeting h1 {
    text-transform: uppercase;
    margin: 0rem 0rem;
    font-size: 1.25rem;
    font-weight: 400;
}
#hero.secondary #greeting h2 {
    font-size: 3rem;
    margin: 0rem 0rem;
    text-transform: uppercase;
}
#hero.secondary #greeting p {
    margin: 1rem 0rem 0rem 0rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
}
#hero.secondary .a-doodle {
    width: 7%;
    position: absolute;
    bottom: 10%;
    right: 15%;
}
.content-box {
    width:85%;
    max-width: 1920px;
    margin:0 auto;
    position: relative;
}
#hero .content-box img {
    display:block;
    width:100%;
}
#hero img.pen {
    width: 45%;
}
#hero .greeting {
    z-index:1;
    position:absolute;
    left:10%;
    top:24%;
    width:38%;
}


/*  ####################### 
    GLOBAL [TITLE BLOCK] 
########################### */
#title-bc {
    background-color:#0D0E1B;
}
#title-block {
    background-image: url("../images/banner-blue.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color:#ffffff;
    position: relative;
}
#title-block h1 {
    font-weight: bold;
    font-size: 5rem;
    opacity: 0.125;
    text-align: center;
    margin: 0rem 0rem;
    padding: 1rem 0rem;
}
#title-block ul.bread-crumbs {
    width: 10%;
    z-index: 1;
    margin: 0rem;
    list-style-type: none;
    position: absolute;
    top:45%;
    left: 45%;
    font-size: 1.25rem;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0rem;
}
#title-block ul.bread-crumbs.portfolio {
    width: 12%;
    left: 43%;
}
#title-block ul.bread-crumbs.portfolio.project {
    width: 20%;
    left: 40%;
}
#title-block ul.bread-crumbs img {
    width: 1.25rem;
}
#title-block ul.bread-crumbs a, 
#title-block ul.bread-crumbs a:active, 
#title-block ul.bread-crumbs a:visited {
    color: #ffffff;
    text-decoration: none;
}
#title-block ul.bread-crumbs a:hover {
    color: rgba(255, 255, 255, 0.75);
}

/* #################### 
    HOME [GREETING]
#######################  */
.greeting h1 {
    text-transform: uppercase;
    font-size:1.25vw;
    margin:0px 10px 0px 0px;
    padding-left:1.4rem;
    font-weight: 400;
}
.greeting h1 b {
    font-weight: 600;
}
.greeting h2 {
    text-transform: uppercase;
    font-size: 2.75vw;
    margin:0px;
    padding:1rem 1.2rem;
    background-image: url("../images/hero-grid.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
}
#txtType {
    border-right: solid #000000 10px;
    height: auto;
    display: inline-block;
    padding-right: 1rem;
}
#txtType.inv {
    border-right: solid #ffffff 7px;
}
.greeting p {
    /* update font size based on screen sizes*/
    padding: 0.5em 1.5em;
    font-size: 1vw;
    line-height: 1.25vw;
}
.greeting a:link,
.greeting a:visited,
.greeting a:active {
    text-decoration: none;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    color: #ffffff;
    display: inline-flex;
    padding: 15px 20px;
    margin-left:1.2rem;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    background: linear-gradient(180deg, #015EFE 0%, #012B89 100%);
    cursor:pointer;
}
.greeting a:hover {
    opacity: 85%;
}
#g-box {
    position: relative;
}
@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}
@keyframes myOrbit {
    from { 	transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   {  transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}
#g-box img.mouse { 
    width: 12%;
    position:absolute;
    top: 70%;
    left: -5%;

    /* set animation */
    transform: rotate(45deg) translateX(5px) rotate(-45deg);
    -webkit-animation: myOrbit 12s linear infinite; /* Chrome, Safari 5 */ /* Firefox 5-15 */ /* Opera 12+ */
    animation: myOrbit 12s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}
.cta-hero {
    display: inline-block;
    position: relative;
}
@-webkit-keyframes rotateMe {
    0% {
        opacity: 5%;
        transform:rotate(-0.25turn);
    }
    80% {
        opacity: 100%;
        transform:rotate(0);
    }
    100% {
        opacity: 0%;
    }
}
@keyframes rotateMe {
    0% {
        opacity: 5%;
        transform:rotate(-0.25turn);
    }
    80% {
        opacity: 100%;
        transform:rotate(0);
    }
    100% {
        opacity: 0%;
    }
}
.cta-hero img.pen {
    position: absolute;
    right: -50px;
    top: 10px;
    opacity: 0%;
    -webkit-animation: rotateMe;
            animation: rotateMe;
    -webkit-animation-duration: 12s;
            animation-duration: 12s;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    cursor: pointer;
}


/*  ###############
    HOME [ABOUT]
################### */
#about-me {
    background-color:#0D0E1B;
}
#about-me .content-box {
    color:#ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 
    flex-wrap: nowrap;
    align-items:center;
}
.about-1, .about-2 {
    width:50%;
    padding:10rem 8rem;
}
.about-1 {
    background-image: url("../images/arrows.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 80%;
}
.about-2 {
    background-image: url("../images/wireframes.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
}
.about-1 p {
    font-size: 1.75rem;
    line-height: 2.5rem;
    font-weight: 300;
}
.about-1 h3 {
    text-transform: uppercase;
    margin:0px;
}
.about-2 p:first-child {
    line-height: 1.75rem;
    margin-bottom: 2rem;
}
#about-me ul {
    list-style-type: none;
    margin:0px;
    padding:0px;
}
#about-me ul li {
    display: inline;
    font-size: 2rem;
    padding-right: 0.75rem;
}

/* ######################
    HOME ["WHAT I DO"] 
######################## */
#wid {
    background-color:#ffffff;
    padding:5rem 0rem;
}
#wid .bkgrd-block {
    position: relative;
}
#wid ul.experience {
    position: absolute;
    top:0;
}
#wid ul.bkgrd {
    /* display: flex;
    flex-direction: row;
    justify-content: space-between; */
    list-style-type: none;
    padding:0rem;
    width:85%;
    margin: 0 auto;
    position: absolute;
    left: 8%;
    bottom: 80%;
}
#wid ul.bkgrd li {
    color:#ffffff;
    text-align: center;
    padding:2.75rem;
    /* width:33%; */
}
#wid ol.flickity-page-dots li {
    padding: unset;
    width: 10px;
}
#wid ul.bkgrd li:nth-child(odd) {
    background-color:#012B89;
}
#wid ul.bkgrd li:nth-child(even) {
    background-color:#015EFE;
    /* margin: 0rem 0.5rem; */
}
#wid ul.bkgrd li:nth-child(5) h5 {
    text-align: center;
}
#wid ul.bkgrd li:nth-child(5) h5 img {
    height: 35%;
}
#wid ul.bkgrd img {
    padding-bottom: 1rem;
    height: 30%;
}
#wid ul.bkgrd h5 {
    text-transform: uppercase;
    font-weight:300;
    font-size:1.5rem;
    text-align: left;
    margin:0.5rem 0rem;
}
#wid ul.bkgrd strong {
    font-weight:600;
}
#wid ul.bkgrd p {
    text-align: left;
    font-size:1rem;
    line-height: 1.5rem;
}
#wid .carousel-cell { /* # FLICKITY # */
    width: 33.33%;
    height: 375px;
    margin-right: 0.5rem;
}
#wid .carousel-cell:before {
    display: block;
    text-align: center;
}
#wid ol.flickity-page-dots {
    background-color: #012B89;
    padding: 0.5rem 0rem;
    width: 6%;
    border-radius: 25px;
    bottom:-12%;
    left: 46%;
}
#wid ol.flickity-page-dots li.dot {
    background-color:#ffffff;
    width: 12px;
    height: 12px;
}


/* ################################ 
    HOME [WID] ~ EXPERIENCE AREA 
################################## */
#wid .experience {
    background-color:#eeeeee;
    padding:15rem 0rem 5rem 0rem;
    margin-top: 15%;
}
#wid .exp-group {
    display: flex;
    flex-direction: row;
    padding-bottom: 1.5rem;
    align-items: center;
    width:90%;
    margin: 0 auto;
}
#wid .exp-1 {
    width:70%;
}
#wid .exp-2 {
    width:30%;
    text-align: right;
}
#wid .exp-1 h3 {
    font-size: 1.25rem;
    margin: unset;
    background-color: unset;
    color: #000000;
    padding: unset;
    display: unset;
    font-weight: 400;
}
#wid .exp-1 h4 {
    font-size: 1.75rem;
    margin: 0.25rem 0rem;
    text-transform: unset;
    font-weight: 600;
}
.exp-1 ul {
    list-style-type: none;
    padding: 0rem;
    margin-top: 0rem;
}
.exp-1 li {
    display: inline;
    padding-right: 0.5rem;
}
#wid .exp-1 p {
    font-size: 1.025rem;
    line-height: 1.5rem;
    margin: 0.5rem 2rem 0.5rem 0rem;
    padding-bottom:1rem;
}
.exp-1 a:link,
.exp-1 a:active, 
.exp-1 a:visited {
    font-size: 1rem;
    color:#015EFE;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    cursor:pointer;
}
.exp-1 a:hover {
    opacity: 75%;
}
.exp-2 img {
    width:65%;
}
#wid hr {
    border: 0.125rem solid #D9D9D9;
    border-radius: 1rem;
    width:90%;
}
ul.technology {
    width: 60%;
    list-style-type: none;
    margin: 0rem auto;
    padding: 4rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}
ul.technology li {
    text-align: center;
}
ul.charts {
    list-style-type: none;
    width:90%;
    margin: 0rem auto;
    padding:2rem 0rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1rem 7rem;
}

/* ################################
    HOME [RESUME | PROGRESS BARS]
    Style + Animate Bars
################################## */
@-webkit-keyframes skill-1 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
@keyframes skill-1 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
@-webkit-keyframes skill-2 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 75%; background-color: #012B89;}
}
@keyframes skill-2 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 75%; background-color: #012B89;}
}
@-webkit-keyframes skill-3 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
@keyframes skill-3 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
@-webkit-keyframes skill-4 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 75%; background-color: #012B89;}
}
@keyframes skill-4 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 75%; background-color: #012B89;}
}
@-webkit-keyframes skill-5 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
@keyframes skill-5 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
@-webkit-keyframes skill-6 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
@keyframes skill-6 {
    0% {width: 5%; background-color: #015EFE;}
    100% {width: 95%; background-color: #012B89;}
}
.container {
    width: 100%;
    text-align: center;
}
.progress {
    padding: 4px;
    border-radius: 30px;
    background-color: #C5C5C5;
}
.progress-bar {
    height: 14px;
    border-radius: 30px;
    background: linear-gradient(90deg, #012B89 10%, #015EFE 90%);
    transition: 0.4s linear;
    transition-property: width, background-color;
}
.progress-moved .progress-bar {width: 95%; -webkit-animation: skill-1 6s; animation: skill-1 6s;}
.progress-moved-2 .progress-bar-2 {width: 75%; -webkit-animation: skill-2 6s; animation: skill-2 6s;}
.progress-moved-3 .progress-bar-3 {width: 95%; -webkit-animation: skill-3 6s; animation: skill-3 6s;}
.progress-moved-4 .progress-bar-4 {width: 75%; -webkit-animation: skill-4 6s; animation: skill-4 6s;}
.progress-moved-5 .progress-bar-5 {width: 95%; -webkit-animation: skill-5 6s; animation: skill-5 6s;}
.progress-moved-6 .progress-bar-6 {width: 95%; -webkit-animation: skill-6 6s; animation: skill-6 6s;}
.skill-set {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.25em 1em;
}
.skill-val {
    visibility: hidden;
}

/* ##################
    HOME [FEATURED] 
#################### */
#featured {
    background-color:#0D0E1B;
    padding:5rem 0rem;
}
#featured .content-box {
    color: #ffffff;
}
#featured .content-box .title-block.w {
    padding-bottom:2rem;
}
#featured .projects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}
.projects .project {
    position: relative;
    height: 20rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;    
    border:0.25rem solid #000000;
}
.projects .project:hover {
    border:0.25rem solid #FFFFFF;
}
.project.p1 {background-image: url("../images/projects/thumb-1.png");}
.project.p2 {background-image: url("../images/projects/thumb-2.png");}
.project.p3 {background-image: url("../images/projects/thumb-3.png");}
.project.p4 {background-image: url("../images/projects/thumb-4.png");}
.project.p5 {background-image: url("../images/projects/thumb-5.png");}
.project.p6 {background-image: url("../images/projects/thumb-6.png");}
.project.p7 {background-image: url("../images/projects/thumb-7.png");}
.project.p8 {background-image: url("../images/projects/thumb-8.png");}
.project.p9 {background-image: url("../images/projects/thumb-9.png");}
.projects .proj-block {
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    background-color: rgba(1,94,254,0.85);
    padding:1rem 0rem;
}
.project h4 {
    font-size:1.5rem;
    font-weight: 500;
    margin: 0rem 0rem 0.5rem 0rem;
    text-align: center;
}
.project p {
    text-transform: uppercase;
    margin:0rem;
    font-size: 1rem;
    text-align: center;
}
.projects a:link, 
.projects a:active, 
.projects a:visited  {
    color: #ffffff;
    cursor:pointer;
}
.projects a:hover {
    color: rgba(255,255,255,0.85);
}
#featured a.btn-cta-2:link, 
#featured a.btn-cta-2:active, 
#featured a.btn-cta-2:visited {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 1rem 2rem;
    border-radius: 5rem;
    border: 3px solid rgb(255, 255, 255);
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    cursor:pointer;
}
#featured a.btn-cta-2:hover {
    opacity: 0.75;
}
#featured p.btn {
    text-align: center;
    padding-top:5rem;
}


/* ############################
    HOME [CONTACT / PARALLAX] 
############################## */
.parallax {
    background-image: url("../images/desk.png");
    height: 70vh;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax .parallax-solid {
    height:70vh;
    background-color:rgba(0,0,0,0.75);
}
.parallax .content-box {
    text-align: center;
    color:#ffffff;
    top:30%;
    line-height: 1.75rem;
}
.parallax .content-box div {
    width: 65%;
    margin: 0 auto;
}
.parallax .content-box h3 {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0rem;
}
.parallax a:link,
.parallax a:active, 
.parallax a:visited {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 15px 50px;
    border-radius: 30px;
    border: 3px solid rgb(255, 255, 255);
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    background: linear-gradient(180deg, #015EFE 0%, #012B89 100%);
    display: inline-block;
    margin-top: 1%;
    cursor:pointer;
}
.parallax a:hover {
    opacity: 0.75;
}

/* ######################
    HOME [TESTIMONIALS] 
######################### */
#testimonials {
    padding:5rem 0;
}
#testimonials .contact-block {
    position: relative;
}
#testimonials ul {
    list-style-type: none;
    padding: 0rem;
    display: flex;
    flex-direction: row;
    width: 90%;
    margin: 0 auto;
    position: absolute;
    left: 5%;
    bottom: 80%;
    justify-content: space-between;
}
#testimonials ul li {
    position: relative;
    background-color:#012B89;
    border-bottom: 8px solid #ffffff;
    color: #ffffff;
    padding: 2.75rem;
    width: 33%;
}
#testimonials p:first-child {
    font-size: 1rem;
    line-height: 1.5rem;
    font-style: italic;
}
#testimonials p a:link,
#testimonials p a:active,
#testimonials p a:visited {
    font-weight: 600;
    font-style: italic;
    cursor:pointer;
}
#testimonials .profile img {
    border-radius: 100%;
    border:4px solid #ffffff;
    width:16%;
    height:16%;
    margin-right: 1.25rem;
}
#testimonials .profile {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#testimonials .profile p {
    line-height: 1.5rem;
}
#testimonials img.quote {
    position: absolute;
    bottom: 14%;
    right: 12%;
    width: 15%;
    opacity: 35%;
}
#testimonials .contact-group {
    background-color: #015EFE;
    color: #ffffff;
    padding: 15rem 7rem 5rem 7rem;
    margin-top: 12%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.contact-1 {
    width:45%;
    padding-right: 7%;
}
.contact-2 {
    width:55%;
    background-color: #ffffff;
    color:#015EFE;
    padding:1em;
}
.contact-group h3 {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0rem;
}
.contact-group h4 {
    font-size: 22px;
    margin: 0.25rem 0rem;
    text-transform: unset;
    font-size: 2.25rem;
    font-weight: 300;
}
.contact-group p {
    font-size:1rem;
    line-height: 1.5rem;
}

/* ###############################################
    HOME + SERVICES PAGES [TESTIMONIALS] - DK 
################################################# */
#testimonials.dark {
    background-color: #0D0E1B;
}
#testimonials.dark ul {
    bottom: 25%;
}
#testimonials.dark .contact-group {
    margin-top: 8%;
}

/* ######################################
    HOME [TESTIMONIALS] ~ CONTACT FORM
######################################## */
.cForm fieldset {
    border: unset;
    padding: 0rem;
}
.cForm legend {
    display: none;
}
.cForm input {
    border: 2px solid #015EFE;
    width: 46.5%;
    padding: 10px 2px;
    margin: 4px 6px;
    border-radius: 7px;
    text-indent: 7px;
    font-size: 0.8rem;
    color:#979797;
}
.cForm input[type="text"],
.cForm input[type="email"], 
.cForm input[type="tel"],
.cForm input[type="subject"],
.cForm textarea {
    font-family: 'Inter', FontAwesome, sans-serif;
    font-size:1rem;
}
.cForm textarea {
    border: 2px solid #015EFE;
    width:96%;
    padding: 10px 2px;
    margin: 4px 6px;
    border-radius: 7px;
    text-indent: 7px;
    color:#979797;
}
.cForm button {
    color: #ffffff;
    border-radius:50px;
    border:unset;
    background: linear-gradient(180deg, #015EFE 0%, #012B89 100%);
    padding: 0.8rem 3rem;
    margin-top: 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
}
.cForm button:hover {
    opacity: 0.75;
}

/* ############################# 
    HOME [FEATURED BLOG POSTS] 
################################ */
#latest-blog {
    background-color: #0D0E1B;
    padding: 5rem 0rem;
    color:#FFFFFF;
}
#latest-blog .content-box {
    width: 70%;
}
#latest-blog .tag-w {
    margin: 0 auto;
    background-color: #ffffff;
    color: #000000;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}
#latest-blog .title-block.w {
    padding-bottom: 3rem;
}
ul.b-posts {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
    padding:0rem;
}
ul.b-posts li {
    width:33.33%;
}
ul.b-posts li:nth-child(even) {
    margin: 0rem 2rem;
}
.b-hero {
    width: 100%;
    height:325px;
    border:5px solid #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.b-hero.b1-img {
    background-image: url("../images/blog/blog-1.png");
}
.b-hero.b2-img {
    background-image: url("../images/blog/blog-2.png");
}
.b-hero.b3-img {
    background-image: url("../images/blog/blog-3.png");
}
ul.b-posts .b-tags p {
    background-color: #ffffff;
    color: #000000;
    border-radius: 50px;
    padding: 10px 20px;
    display: inline-block;
    text-transform: uppercase;
    margin-right: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top:1rem;
}
ul.b-posts h3 {
    margin-bottom:0.5rem;
}
ul.b-posts p {
    margin-top:0rem;
}
ul.b-posts a:link, 
ul.b-posts a:active, 
ul.b-posts a:visited {
    font-weight: 800;
    text-transform: uppercase;
    cursor:pointer;
}
ul.b-posts img.bullet {
    width:1rem;
}


/* #####################
    ABOUT PAGE 
##################### */
#about-pane .content-box,
#resume-pane .content-box {
    padding:2rem 0rem;
    width: 60%;
}
#about-pane .content-box h3, 
#resume-pane .content-box h3 {
    font-size: 1rem;
    text-transform: uppercase;
    margin: 0rem;
}
#about-pane .content-box h4, 
#resume-pane .content-box h4 {
    font-family: 'Yellowtail', cursive;
    color:#0153E6;
    font-size: 1.75rem;
    margin:0rem;
    padding-bottom: 1rem;;
}
#resume-pane .content-box h5 {
    color: #ffffff;
    background-color: #0153E6;
    padding: 1rem 1.5rem;
    text-transform: uppercase;
}
#about-pane .content-box p {
    line-height: 1.75rem;
}
#about-pane .cta-resume {
    position: relative;
}
#about-pane .cta-resume span {
    font-weight: bolder;
    font-size: 7rem;
    color: #f6f6f6;
    text-align: center;
    display: block;
    width: 100%;
}
#about-pane a,
#about-pane a:active, 
#about-pane a:visited {
    color:#0153E6;
    font-weight: 500;
    font-style: italic;
    text-decoration: none;
}
#about-pane a:hover {
    text-decoration: underline;
}
#about-pane .g-resume a:link, 
#about-pane .g-resume a:active, 
#about-pane .g-resume a:visited {
    font-size: 2rem;
    font-weight: 700;
    color:#015EFE;
    text-decoration: none;
    font-style: normal;
    position: absolute;
    top: 35%;
    left: 38%;
}
#about-pane .g-resume:hover {
    opacity: 0.75;
}
#about-facts {
    background-color:#0D0E1B;
}
#about-facts .content-box {
    background-color: #0D0E1B;
    color: #ffffff;
    width: 85%;
    padding: 2rem 0rem;
}
#about-facts .content-box hr {
    border: 0.0125rem solid #ffffff;
    border-radius: 1rem;
    margin: 3rem auto 0rem auto;
    width: 85%;
}
#about-facts div.fun-facts {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 70%;
    margin: 0rem auto;
}
#about-facts .facts {
    text-align: center;
}
#about-facts .facts h4 {
    font-family: 'Yellowtail', cursive;
    font-size: 3rem;
    margin: 0rem;
}
#about-facts .facts p {
    margin: 0rem 0rem 2.5rem 0rem;
    font-size: 1.25rem;
}
#about-facts ul.hobbies {
    padding: 0rem;
    margin: 0rem auto;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2.5rem;
    width: 100%;
}
#about-facts ul.hobbies li {
    font-family: 'Yellowtail', cursive;
    text-align: center;
    font-size: 1.5rem;
}
#about-facts ul.hobbies li img {
    padding-bottom:1rem;
    width: 40%;
}
#about-facts ul.hobbies li:nth-child(2) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#about-facts ul.hobbies li:nth-child(2) img {
    padding-right:1rem;
    padding-bottom:unset;
}


/* #################
    RESUME PAGE 
################### */
#resume-pane a.cta-resume {
    position: absolute;
    top:1.5%; 
    right:0%;
}
#resume-pane a.cta-resume:link, 
#resume-pane a.cta-resume:active, 
#resume-pane a.cta-resume:visited {
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    margin-top:0rem !important;
    padding: 15px 50px;
    border-radius: 3rem;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    background: linear-gradient(180deg, #015EFE 0%, #012B89 100%);
    display: inline-block;
    margin-top: 1%;
    cursor: pointer;
}
#resume-pane a.cta-resume:hover {
    opacity: 0.75;
}
#resume-pane hr {
    border: 0.0125rem solid #0D0E1B;
    border-radius: 1rem;
    margin:1.5rem 0rem;
}
#resume-pane ul li .cursive {
    font-family: 'Yellowtail', cursive;
    font-size: 1.5rem;
    font-weight: 200;
    color: #0153E6;
}
div.c-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom:3rem;
}
ul.dev-socials, 
ul.contact-info {
    list-style-type: none;
    padding:0rem;
    margin:0rem;
}
ul.contact-info li {
    display: inline;
}
ul.contact-info li:nth-child(2) {
    padding: 0rem 1rem;
}
ul.dev-socials li {
    display: inline;
    padding-right: 0.25rem;
}
ul.dev-socials i {
    font-size: 1.25rem;
    line-height: unset !important;
    color: #ffffff;
    background-color: #000000;
    padding: 0.75rem 1rem;
    border-radius: 100%;
}
ul.dev-socials i:hover {
    opacity: 0.75;
}
.cta-resume .g-resume img {
    width: 2rem;
}

/* ###################
    SERVICES PAGE 
################### */
#services-pane {
    background-color:#0D0E1B;
}
#services-pane .content-box {
    background-color:#0D0E1B;
    color:#ffffff;
    padding:4rem 0rem;;
}
#services-pane .title-block.w p {
    width:60%;
}
#services-pane ul.bkgrd {
    list-style-type: none;
    padding: 3rem 0rem;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
    grid-gap: 1rem;
    width: 85%;
    margin: 0 auto;
}
#services-pane ul.bkgrd li {
    color: #ffffff;
    text-align: center;
    padding: 2.75rem;
}
#services-pane ul.bkgrd li:nth-child(odd) {
    background-color: #012B89;
}
#services-pane ul.bkgrd li:nth-child(even) {
    background-color: #015EFE;
}
#services-pane ul.bkgrd img {
    padding-bottom: 1rem;
    height: 35%;
}
#services-pane ul.bkgrd h4 {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.5rem;
    text-align: left;
    margin: 0.5rem 0rem;
}
#services-pane ul.bkgrd li:nth-child(5) h4 {
    text-align:center;
}
#services-pane ul.bkgrd h4 strong {
    font-weight: 600;
}
#services-pane ul.bkgrd p {
    text-align: left;
    font-size: 1rem;
    line-height: 1.5rem;

    width: unset;
    font-weight: unset;
    padding-bottom: unset;
}


/* ########################
    RESUME [VERT TABS] 
######################### */
.tab { /* Style the tab */
    float: left;
    border-left: 1px solid #D9D9D9;
    width: 30%;
}
.tab button { /* Style the buttons inside the tab */
    display: block;
    background-color: inherit;
    color: #000000;
    padding: 1rem 1rem;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
}
.tab button:hover { /* Change background color of buttons on hover */
    background-color: rgba(1, 94, 254, 0.05);
}
.tab button.active { /* Create an active/current "tab button" class */
    background-color: rgba(1, 94, 254, 0.1);
    border-left:3px solid #015EFE;
    color:#015EFE;
    font-weight: 600;
}
.tab button.active::after {
    font-family: FontAwesome, sans-serif;
    content: "\f101";
    padding-left:0.5rem;
}
.tabcontent, .tabcontent2, 
.tabcontent3, .tabcontent4 { /* Style the tab content */
    float: left;
    padding: 0px 2.5rem 0rem 2.5rem;
    width: 70%;
}
.tabcontent ul.company-header, 
.tabcontent2 ul.company-header, 
.tabcontent3 ul.company-header, 
.tabcontent4 ul.company-header {
    list-style-type: none;
    margin: 0rem;
    padding: 0rem 0rem 1rem 0rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size:1.125rem;
    line-height: 1.5rem;
}
.tabcontent ul.responsibilities li, 
.tabcontent2 ul.responsibilities li, 
.tabcontent3 ul.responsibilities li, 
.tabcontent4 ul.responsibilities li {
    padding-bottom:0.75rem;
}
div.tabcontent3 ul.certificate-links li {
    padding-bottom: 1rem;
}
div.tabcontent4 ul.design-skills li, 
div.tabcontent4 ul.design-tools li, 
div.tabcontent4 ul.dev-skills li, 
div.tabcontent4 ul.dev-tools li {
    padding-bottom:1rem;
}
#resume-pane span a:link, 
#resume-pane span a:active,
#resume-pane span a:visited {
    text-decoration: none;
    color:#015EFE;
}
#resume-pane span a:hover {
    opacity:0.75;
}
#resume-pane span p img {
    height:50px;
}
#resume-pane span p img.aine {
    height:35px;
}

/* ###############################
    SERVICES [PROCESS / APPROACH]
################################## */
#process-pane .content-box {
    padding-top:3rem;
    padding-bottom:3rem;
}
#process-pane .title-block {
    padding-bottom:3rem;
}
#process-pane ul {
    list-style-type:none;
    margin: 0rem auto;
    padding: 0rem;
    width:50%;
}
#process-pane ul li {
    display: grid;
    grid-template-columns: 10% 90%;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
}  
#process-pane ul li div.i-approach {
    text-align: center;
    padding:10%;
}
#process-pane ul li div img {
    width:100%;
}
#process-pane ul li:nth-child(6) div.i-approach {
    padding:unset;
}
#process-pane ul li div.approach-content {
    padding-left: 2rem;
}
div.approach-content h5 {
    font-family: 'Yellowtail', cursive;
    font-size: 2rem;
    margin: 0rem;
}
#process-pane ul li div.approach-content p {
    margin: 0rem;
    line-height: 1.75rem;
}


/* #############################
    PROJECTS PAGE [PORTFOLIO] 
############################# */
#portfolio-pane {
    background-color:#0D0E1B;
}
#portfolio-pane .content-box {
    color: #ffffff;
}
#p-projects hr {
    border: 0.125rem solid #ffffff;
    border-radius: 1rem;
    margin: 5rem auto 0rem auto;
}
#portfolio-pane .title-block.w h3:first-child {
    padding-top:5rem;
}
#p-projects {
    width:85%;
    margin: 0 auto;
}
#p-projects .p-project {
    background-color:#ffffff;
    color:#000000;
    background-position: center right;
    background-repeat: no-repeat;
    height: 350px;
    position: relative;
    margin-bottom: 2rem;
    border: 7px solid #ffffff;
}
#p-projects .p-project:hover {
    border: 7px solid #cccccc;
}
#p-projects .p-project.v2 {
    background-position: center left;
}
.p-project .p-details {
    position: absolute;
    top: 25%;
    left: 10%;
}
.p-project.v2 .p-details {
    left: unset;
    right:7%;
}
#p-projects img.laptop {
    position: absolute;
    top: 15%;
    right: 7%;
}
#p-projects .p-project.v2 img.laptop {
    right: unset;
    left: 7%;
}
#p-projects img.print {
    position: absolute;
    top: 18%;
    left: 7%;
}
#p-projects .p-details {
    width:50%;
}
#p-projects .p-tag {
    color:#016CF8;
    font-size:1.25rem;
}
#p-projects h4 {
    font-family: 'Yellowtail', cursive;
    font-size:3rem;
    margin:0rem;
}
#p-projects p {
    font-size: 1.125rem;
    font-style: italic;
    margin-top: 0rem;
    padding-bottom: 1rem;
}
#p-projects a:link, 
#p-projects a:active, 
#p-projects a:visited {
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    color: #000000;
    border: 3px solid #000000;
    border-radius: 5rem;
    text-decoration: none;
    text-align: center;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 1s;
}
#p-projects a:hover {
    opacity: 0.5;
}
#p-projects .c-project ul {
    list-style-type: none;
    padding:0rem;
    margin:0rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
    grid-gap: 1rem;
    padding-bottom: 1rem;
}
#p-projects .c-project ul.col-2 {
    grid-template-columns: 1fr 1fr;
}
#p-projects .c-project > ul > li {
    background-color: #015EFE;
    color:#FFFFFF;
    padding:2rem;

    background-image: url("../images/banner-blue.png");
    background-repeat: no-repeat;
    background-size: center center;
    background-size: cover;
    border:7px solid #015EFE;
}
#p-projects .c-project > ul > li:hover {
    border:7px solid rgba(255,255,255,0.7);
}
#p-projects .c-project > ul > li:hover a {
    opacity: 1;
}
.c-project ul li i {
    font-size:1.75rem;
}
.c-project ul li i.fa-github {
    padding-right:0.5rem;
}
.c-project ul li i.fa-folder-open {
    font-size:3rem;
}
#p-projects .c-project h4 {
    font-family: 'Inter', sans-serif;    
    font-size: 1.25rem;
    padding:1rem 0rem;
}
#p-projects .c-project p {
    font-style: unset;
    line-height: unset;
    padding-bottom: unset;
}
.c-project ul li .codebase {
    text-align: right;
}
#p-projects .c-project ul.c-tags {
    display: inline;
}
.c-project ul.c-tags li {
    font-size: 0.75rem;
    text-align: center;
    padding: 0.5rem 1rem;
    margin: 0rem 0.5rem 0rem 0rem;
    background-color:#FFFFFF;
    color: #015EFE;
    border-radius: 1rem;

    display: inline;
    float: left;
}
#p-projects .c-project a:link, 
#p-projects .c-project a:active, 
#p-projects .c-project a:visited {
    font-weight: unset;
    font-style: unset;
    line-height: unset;
    text-transform: unset;
    color: unset;
    border: unset;
    border-radius: unset;
    text-decoration: none;
    text-align: center;
    padding: unset;
    cursor: pointer;
    transition: unset;
    opacity: 0.5;
}
#p-projects .c-project a:hover {
    opacity: 1;
}

/* #####################
    PORTFOLIO [FILTER] 
######################## */
#myBtnContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 3% 0%;
}
.myContainer {
    overflow: hidden;
}
.filterDiv {
    margin: 2px;
    display: none; /* hidden by default */
}
/* "show" class added to the filtered elements */
.show {
    display: block;
}
/* style buttons */
.btnX {
    font-size: 1.125rem;
    color:#ffffff;
    margin: 0% 0.25%;
    padding: 0.5rem 1.75rem;
    border: 3px solid #ffffff;
    border-radius: 50px;
    outline: none;
    background-color: #0160F2;
    cursor: pointer;
}
/* add light grey bkgrd on mouse-over */
.btnX:hover {
    opacity:0.75;
}
/* add dark bkgrd to active btn */
.btnX.activeX {
    font-weight: 600;
    color:#000000;
    background-color: #ffffff;
}
.btnX:hover.activeX {
    opacity: unset;
}
.secondWord {
    color:#0160F2;
}

/* ####################
    PROJECT DOCS
#################### */
#port-project {
    background:#0D0E1B;
    color:#ffffff;
}
#port-project .title-block {
    padding:2.5rem 0px;
}
#port-project h1 {
    margin:0px;
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
}
#port-project h2 {
    font-family: 'Yellowtail', cursive;
    font-size: 4.5rem;
    margin:0px;
}
#port-project .p-hero img {
    width: 100%;
}
#port-project .p-overview {
    display: block;
    padding:2rem 0px;
    width:90%;
    margin:0 auto;
}
#port-project .p-overview strong {
    font-size:1.5rem;
    text-transform: uppercase;
}
#port-project .p-overview p {
    margin: 0.75rem 0rem 0rem 0rem;
    line-height: 1.75rem;
}
#p-preview .content-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding:7rem 0;
    justify-content: space-between;
    width: 50%;
}
#p-preview ul {
    padding:0px;
}
#p-preview ul li {
    padding-bottom: 1rem;
}
#p-preview ul li:last-child {
    list-style-type: none;
}
#p-preview ul li a:link,  
#p-preview ul li a:active, 
#p-preview ul li a:visited {
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    color: #000000;
    border: 3px solid #000000;
    border-radius: 5rem;
    text-decoration: none;
    text-align: center;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 1s;
    margin-top:1.25rem;
    display: block;
    width:75%;
}
#p-preview ul li.cta {
    text-align: center;
    line-height:1rem !important;
}
#p-preview ul li.cta a:hover {
    opacity: 0.5;
}
#p-preview ul li.cta span {
    display: block;
    width:75%;
    font-size:0.75rem;
    padding-top:0.5rem;
}


/* ####################################
    PROJECT DOCS [DEVICE CONTAINERS]
#################################### */
.devices {
    /* margin: 0 auto; */
    width: 50%;
    max-width: 1200px;
    position: relative;
}
/* CONTAINER - laptop */
.devices .desktop {
    position: relative;
    right: 10%; 
    width: 100%;
}
.devices .desktop .dbox {
    width: 73.75%;
    height: 76.5%;
    position: absolute;
    top: 5.5%;
    left: 13.75%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 4;
    -ms-interpolation-mode: nearest-neighbor;
        image-rendering: -moz-crisp-edges;
        image-rendering: pixelated;
    background-color: #000000;
}
.devices .desktop img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 5;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.devices .mobile {
    position: absolute;
    bottom: 23%;
    right: 0%;
    z-index: 5;
    width: 18%;
}
.devices .mobile .mbox {
    width: 88.5%;
    height: 95%;
    position: absolute;
    top: 3%;
    left: 5%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 4;
    -ms-interpolation-mode: nearest-neighbor;
        image-rendering: -moz-crisp-edges;
        image-rendering: pixelated;
    background-color: #000000;
}
.devices .mobile img {
    display: block;
    width: 100%;
    position: relative;
    z-index: 5;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}


/* ############################
    [GLOABL] PROJECT SECTIONS
############################## */
#design-comps {
    background-color:#D9D9D9;
    margin-bottom: 0.5rem;
}
#design-comps .content-box {
    padding:2rem 0rem 0rem 0rem;
}
.title-block.sub {
    text-align: unset;
}
.title-block.sub h3 {
    font-size:1.25rem;
    font-weight: 600;
}
.title-block.sub h4 {
    margin: 0rem 0rem 0.5rem 0rem;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 300;
}
.title-block.sub p {
    width:unset;
}
#design-comps .carousel {
    width:100%;
    height:245px;
}
#design-comps .carousel-cell img {
    width:175px;
    height:100%;
}
#design-comps .carousel-cell a,
.iterations ul li a img {
    display: block;
    border: 4px solid #ffffff;
    margin-right:1.5rem;
}
.iterations ul li a img {
    border: 4px solid #d9d9d9;
    margin-right:0rem;
}
#design-comps .carousel-cell a:hover,
.iterations ul li a:hover img {
    border:4px solid #0160f2;
    background-color:rgba(1, 96, 242, 0.25);
}
#project-plan .content-box {
    border-bottom: 1px solid #000000;
}
.sketch-comp {
    display: flex;
    flex-direction: row;
    align-items: center;
    width:75%;
    margin: 0 auto;
    padding-bottom:3rem;
}
.sketch-comp .sketch {
    width: 35%;
    text-align: center;
}
.sketch-comp .sketch img {
    width: 100%;
}
.sketch-comp .sketch a:link, 
.sketch-comp .sketch a:active, 
.sketch-comp .sketch a:visited {
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
    color: #ffffff;
    border: 3px solid #d02030;
    background-color: #D02030;
    border-radius: 5rem;
    text-decoration: none;
    text-align: center;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: background-color 1s;
}
.sketch-comp .sketch a:hover {
    background-color: rgba(208, 32, 48, 0.75);
}
.sketch-comp p {
    width: 75%;
    margin-left:5%;
    line-height: 1.75rem;
}
#reflection {
    background-color: #0D0E1B;
    color:#ffffff;
}
#reflection .title-block.sub h3 {
    color:#ffffff;
    padding-top:0rem;
}
#reflection .content-box {
    padding:4rem 0rem;
}
#reflection a, 
#reflection a:active, 
#reflection a:visited {
    color:#ffffff;
}
#reflection a:hover {
    color:rgba(255, 255, 255, 0.75);
}
#personas {
    color:#ffffff;
    padding:4rem 0rem;
    background-image: url('../images/projects/bkgrd-blue.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#personas .title-block h3 {
    color:#ffffff;
    padding-top:0rem;
}
#personas .carBox {
    width:75%;
    margin: 0 auto;
}
#personas .carousel .carousel-cell img {
    width:100%;
}
#personas .flickity-page-dots .dot {
    background: #ffffff;
}


/* ###########################
    PROJECT PAGE    
    Sea Shore Team Project 
############################# */
#mobile-project-view {
    background-color:#585858;
    color:#ffffff;
    padding:2rem 0rem;
}
#mobile-project-view .content-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#mobile-project-view .content-box .carBox {
    width:50%;
}
#mobile-project-view .content-box .mobile-panel {
    width:50%;
    padding:2rem;
}
#mobile-project-view .mobile-panel h3 {
    font-family: 'Inter', sans-serif;
    font-size: 2.25rem;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0rem;
}
#mobile-project-view .carousel-cell img {
    width:150px;
    margin-right:15px;
}
#design-iterate {
    padding:4rem 0rem;
}
#design-iterate .title-block p {
    text-align: left;
    width:unset;
}
#design-iterate .iterations .content-box {
    background-color:#D9D9D9;
    padding: 2rem 4rem;
}
#design-iterate .iterations .content-box {
    font-family: 'Yellowtail', cursive;
    font-size: 1.5vw;
    font-weight: 600;
    text-align: center;
}
#design-iterate ul {
    width:90%;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    flex-wrap: wrap;
}
#design-iterate ul li {
    margin: 0 auto;
}
#design-iterate .iterations ul li img {
    width:100%;
}
.sketch-container {
    width: 100%;
    height: 395px;
    overflow: hidden;
    display: block;
    margin-bottom: 20px;
}
.sst.modals {
    width:75%;
    padding:4rem 0;
    margin:0 auto;
}
#style-tile {
    padding:2rem 0rem;
}
.sst.modals p.img-asset, 
#style-tile p.img-asset, 
#planning p.img-asset {
    text-align: center;
}
#planning {
    padding:4rem 0rem;
}
.sst.modals .title-block.sub h4 {
    text-transform: lowercase;
}


/* #################
    PROJECT PAGE    
    Health Project  
#################### */
#port-project.health {
    padding-bottom:2rem;
}
#overview.health .content-box {
    width:65%;
    padding:4rem 0rem;
}
#overview.health .content-box h4 {
    text-align: center;
    margin: 0 auto;
    border-bottom: 2px solid #259A2F;
    width: 20%;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}
#overview.health .content-box p {
    line-height: 2.5rem;
}
#design-comps.health {
    background-color:#259A2F;
    color:#ffffff;
    padding-bottom: 3rem;
}
#design-comps.health .title-block {
    padding-bottom: 1.5rem;
}
#design-comps.health .content-box h3 {
    color:#ffffff;
}
#design-comps.health .content-box p {
    line-height: 1.25rem;
}
#design-comps.health .carousel {
    height: unset;
}
#design-comps.health .carousel a {
    border: unset;
}
#design-comps.health .carousel a:hover {
    border: unset;
    background-color: unset;
}
#design-comps.health .carousel-cell span {
    display: block;
    text-align: center;
    padding-bottom:0.75rem;
}
#design-comps.health .carousel-cell img {
    margin: 0 6%;
    padding-bottom:.75rem;
    border-bottom:3px solid #259A2F;
}
#design-comps.health .carousel-cell img:hover {
    border-bottom:7px solid #ffffff;
    border-radius: 7px;
}
#planning.health .wireframe {
    background-color:#000000;
    color:#ffffff;
    position: relative;
}
#planning.health .wireframe img {
    width:100%;
}
#planning.health .wireframe .w-info {
    width: 30%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 7rem;
    padding-bottom: 2rem;
}
#planning.health .wireframe .w-info h3 {
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-size:2rem;
    font-weight: 300;
    margin-bottom: 0rem;
}
#planning.health .goals {
    background-color:#662483;
    color:#ffffff;
    padding:2rem 6rem;
}
#planning.health .goals ul {
    list-style-type: none;
    padding:0;
    margin:0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
#planning.health .goals ul li {
    width:50%;
    padding:1rem;
}
#planning.health .goals ul li:nth-child(even) {
    text-align: center;
}
#planning.health .goals ul li img {
    width:70%;
}
#planning.health .goals ul li h3 {
    font-size:2rem;
    margin-bottom:0rem;
}
#planning.health .goals ul li:nth-child(2) h3 {
    font-size:initial;
}
#planning.health .analysis {
    background-color:#259A2F;
    color:#ffffff;
    padding:4rem 0rem 4rem 7rem;
}
#planning.health .analysis .health-comps {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#planning.health .health-comps .comp-1,
#planning.health .health-comps .comp-2 {
    width:50%;
}
#planning.health .health-comps .comp-1 {
    padding-right:4rem;
}
#planning.health .analysis img {
    width:100%;
}
#planning.health div.comp-icons {
    text-align: right;
    padding-top:2rem;
}
#planning.health div.comp-icons img {
    width:90%;
}
#planning.health .comp-1 h3 {
    font-size: 2.75rem;
    margin-top:0rem;
    margin-bottom: 0rem;
}
#planning.health .design-thinking {
    padding:4rem 0rem;
}
#planning.health .design-thinking .image-asset {
    text-align: center;
}
#planning.health .design-thinking img {
    width:75%;
    text-align: center;
}
#personas.health {
    background-color:#000000;
    background-image: unset;
}
#personas.health .carousel .carousel-cell {
    text-align: center;
}
#branding.health {
    padding:4rem 0rem;
}
#branding.health .img-asset {
    text-align: center;
    padding-top:2rem;
}
#branding.health .font-choices {
    margin:4rem 0rem;
}
#branding.health .font-choices .content-box {
    color:#ffffff;
    background-color:#333333;
    padding:3rem;
    width:60%;
}
#branding.health .font-choices .content-box .image-asset {
    text-align: center;
    padding-top:2rem;
}
#branding.health .font-choices .content-box img {
    width:65%;
}
#branding.health .font-choices .content-box h4 {
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-size:2rem;
    font-weight: 300;
    margin: 0rem;
}
#branding.health .colors {
    width:70%;
    margin: 0 auto;
}
#branding.health .content-box > h4 {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    margin: 0rem;
}
#branding.health .colors ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width:85%;
}
#branding.health .colors ul li h4 {
    font-size:1.25rem;
}
#sitemap.health {
    background-color:#0D0E1B;
    padding:2rem 0rem;
}
#sitemap.health .content-box {
    color:#ffffff;
}
#sitemap.health .content-box .image-asset {
    background-color:#ffffff;
    text-align: center;
    padding:1rem;
}
#sitemap.health .content-box .image-asset img {
    width:100%;
}

/* ######################
    PROJECT PAGE
    Boston Tech Spaces
######################## */
#project-plan.bts, 
#project-plan.cre-camb {
    padding: 2rem 0rem 0rem 0rem;
}
#project-plan.bts .sketch{
    width:100%;
}
#email-campaigns.cre-camb {
    padding-bottom:2rem;
}
#project-plan.cre-camb .sketch, 
#email-campaigns.cre-camb ul {
    width:75%;
    margin: 0 auto;
}
#project-plan.bts .sketch ul,
#project-plan.cre-camb .sketch ul, 
#email-campaigns.cre-camb ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
}
#project-plan.bts .sketch ul li img {
    width:100%;
}
#style-tile.bts ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding:0;
    align-items: center;
}
#style-tile.bts ul li {
    text-align: center;
}
#style-tile.bts img {
    width:60%;
}
#style-tile.bts ul li.guide img {
    width: 100%;
}
#style-tile.bts ul li:nth-child(2) img {
    border:1px solid #cccccc;
}

/* ######################
    PROJECT PAGE
    CRE Newbury Property
######################## */
#project-plan.cre-camb .sketch ul li img, 
#email-campaigns.cre-camb ul li img {
    width:80%;
    margin-bottom:1rem;
    border:1px solid #000000;
}
#email-campaigns.cre-camb ul li img {
    border: 1px solid #EF4B22
}
#planning.cre-newbury img {
    width:75%;
}
#planning.cre-newbury ul img {
    width:100%;
}
#planning.cre-newbury ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 65%;
    margin: 0 auto;
    padding-top: 4rem;
    align-items: center;
}
#motion.cre-newbury {
    padding:4rem 0rem;
}
#motion.cre-newbury ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
#motion.cre-newbury ul li {
    padding-bottom:2rem;
}
#motion.cre-newbury p {
    margin-bottom:0.5rem;
}
#motion.cre-newbury ul div {
    background-color:#000000;
    text-align: center;
}
#motion.cre-newbury ul div img {
    width:75%;
}


/* ######################
    PROJECT PAGE
    Event Landing Page
######################## */
#design-comps.landing {
    background-color: unset;
    padding-bottom:4rem;
}
#design-comps.landing .image-asset {
    text-align:center;
}
#planning.landing {
    background-color:#F1F1F1;
}
#planning.landing .video-block {
    width: 75%;
    margin: 0 auto;
}
#planning.landing .video-block video {
    width: 100%;
    height: auto;
}
#e-campaigns.landing {
    padding:4rem 0rem;
}
#e-campaigns.landing .carousel .carousel-cell img {
    width:175px;
}
#e-campaigns.landing .carousel .carousel-cell a {
    display: block;
    border: 4px solid #ffffff;
    margin-right:1.5rem;
}
#e-campaigns.landing .carousel .carousel-cell a:hover {
    border: 4px solid #0160f2;
    background-color: rgba(1, 96, 242, 0.25);
}
#e-campaigns.landing hr {
    margin:4rem 0rem;
}
#e-campaigns.landing .image-asset {
    text-align: center;
}
#reflection.landing a, 
#reflection.landing a:active, 
#reflection.landing a:visited {
    color: #ffffff;
    line-height: 2rem;
}


/* ######################
    PROJECT PAGE
    Edvisors Project
######################## */
#project-plan.edv .carousel img {
    margin-right: 4rem;
}
#hiRes .image-asset {
    padding:4rem 0rem;
    text-align: center;
}
#hiRes .image-asset img {
    width:50%;
}
#project-plan.edv .content-box {
    border-bottom: unset;
}

/* ##################################
    PROJECT PAGE
    Newsletters - Masonary Layout
#################################### */
.isotope-masonry .button-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 3% 0% 3% 0%;
}
.isotope-masonry .button {
    font-size: 1.125rem;
    color: #000000;
    margin: 0% 0.25%;
    padding: 0.5rem 1.75rem;
    border: 3px solid #000000;
    border-radius: 50px;
    outline: none;
    background-color: #ffffff;
    cursor: pointer;
}
.isotope-masonry .button:active,
.isotope-masonry .button.is-checked {
    font-weight: 600;
    color: #ffffff;
    background-color: #0160F2;
    border: 3px solid #0160F2;
}
.isotope-masonry .button:hover {
    opacity: 0.5;
}
.grid {
    width:100%;
}
.grid-item {
    display: block;
    width: 15%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 0.5%;
    border: 3px solid #CCCCCC;
}
.grid-item:hover {
    border: 3px solid #015EFE;
}
.grid-item img {
    width:100%;
}

/* ####################
    PROJECT PAGE    
    Marketing Content
####################### */
#mktg-projects h2, 
#mktg-projects-2 h2, 
#mktg-projects-3 h2, 
#mktg-projects-4 h2 {
    font-family: 'Yellowtail', cursive;
    font-size: 3rem;
    margin: 4rem 0 1rem 0;
}
#mktg-projects .logos ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1.5rem;
    text-align: center;
}
#mktg-projects .logos ul li {
    border: 3px solid #FFFFFF;
    background: #FFFFFF;
    box-shadow: 4px 4px 19px 4px rgba(0, 0, 0, 0.25);
    margin: 0 auto;
    width: 100%;
    height: 275px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#mktg-projects .logos ul li:hover {
    border: 3px solid #015EFE;
}
#mktg-projects .logos ul li img {
    width: 100%;
}
#mktg-projects .logos ul li:nth-child(2) img, 
#mktg-projects .logos ul li:nth-child(4) img {
    width: 65%;
}
#mktg-projects-2 .brochures {
    background: linear-gradient(180deg, #ECECEC 47.57%, #D1D1D1 100%);
    padding:1rem 0;
}
#mktg-projects-2 .brochures ul {
    width: 100%;
    margin: 0 auto;
    padding: 4rem 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    text-align: center;
}
#mktg-projects-2 .brochures ul img {
    width:80%;
    border: 3px solid rgba(1, 94, 254, 0);
}
#mktg-projects-2 .brochures ul li img:hover {
    border: 3px solid #015EFE;
}
#mktg-projects-2 .brochures ul p {
    margin: 0rem 0rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 200;
}
#mktg-projects-3 {
    padding:7rem 0;
}
#mktg-projects-3 h2 {
    margin-top:unset;
    margin-bottom: 2rem;
}
#mktg-projects-3 .carBox img {
    width: 425px;
    margin-right: 1.5rem;
}
#mktg-projects-4 {
    padding:4rem 0;
    background-color:#000000;
}
#mktg-projects-4 h2 {
    color:#FFFFFF;
}
#mktg-projects-4 .carBox img {
    margin-right: 1.5rem;
}
#mktg-projects-4 .adverts {
    width: 95%;
    margin: 4rem auto 0rem auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#mktg-projects-4 ul {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
}
#mktg-projects-4 ul img {
    width:100%;
}
#mktg-projects-4 .h-ads, 
#mktg-projects-4 .v-ads {
    text-align: center;
}
#mktg-projects-4 .h-ads ul {
    display:inline-block;
}
#mktg-projects-4 .h-ads ul li {
    padding-bottom: 2rem;
}
#mktg-projects-4 .h-ads ul li:last-of-type {
    padding-bottom: 0rem;
}
#mktg-projects-4 .v-ads ul {
    display: inline-flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0 auto;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
#mktg-projects-4 .v-ads ul li {
    margin-right: 2rem;
}
#mktg-projects-4 .v-ads ul li:last-of-type {
    margin-right:0rem;
}

    /* MEDIA QUERIES*/
    /* desktop */
    @media only screen and (min-width:1920px) and (max-width:2560px) {
        nav ul li a {
            font-size:1.25rem;
        }
        .greeting h1 {
            font-size:1.5vw;
        }
        .greeting p {
            font-size: 1vw;
            line-height: 1.5vw;
        }
        .greeting a:link, .greeting a:visited, .greeting a:active {
            padding: 18px 50px;
            margin-left: 1.75rem;
        }
        .cta-hero img.pen {
            right: -62px;
            top: 0px;
        }
        #p-preview .content-box {
            justify-content: space-between;
            width:70%;
        }
        #p-preview .content-box ul {
            width: 40%;
        }
        #p-preview .devices {
            width: 60%;
        }
        #wid .experience {            
            margin-top: 13%;
        }
        #wid .exp-group,
        #wid hr, 
        ul.charts {
            width: 90%;
        }
        #wid .exp-1 {
            width: 70%;
        }
        #wid .exp-2 {
            width: 30%;
        }
        .exp-2 img {
            width: 90%;
        }
        .parallax .content-box {
            top: 40%;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            left: 39%;
        }
        #planning.health p {
            font-size: 1.5rem;
        }
        #mktg-projects-4 .adverts {
            width: 85%;
        }
        #hero.secondary #greeting p {
            font-size: 1.5rem;
            line-height: 2rem;
        }
        #p-preview.bts .content-box, 
        #p-preview.cre-camb .content-box, 
        #p-preview.cre-newbury .content-box, 
        #p-preview.landing .content-box {
            width:55%;
        }
    }

    @media (min-width: 1680px) and (max-width: 1919px) {
        /* target screens between 1680px -1920px*/
        .greeting h2 {
            font-size: 2.75vw;
        }
        .greeting p {
            font-size:1.25vw;
            line-height:1.75vw;
        }
        #hero.secondary #greeting h2 {
            font-size: 3rem;
        }
        #txtType.inv {
            border-right: solid #ffffff 10px;
        }
        #p-preview .content-box {
            width:70%;
        }
        #p-preview .content-box ul {
            width:35%;
        }
        #p-preview .content-box .devices {
            width:60%;
        }
        .parallax .content-box {
            top: 30%;
        }
        #planning.health p {
            font-size: 1.5rem;
        }
        #planning.health .goals ul li img {
            width: 90%;
        }
        .about-1, .about-2 {
            padding: 7rem 2rem;
        }
        #wid .exp-group,
        #wid .experience hr, 
        ul.charts {
            width:85%;
        }
        #wid .exp-1 {
            width: 70%;
        }
        #wid .exp-2 {
            width: 30%;
        }
        .exp-2 img {
            width:85%;
        }
        #wid ul.bkgrd p, 
        #services-pane ul.bkgrd p {
            font-size: 1rem;
            line-height: 1.5rem;
        }
        #testimonials ul {
            bottom: 75%;
        }
        #latest-blog .content-box {
            width: 80%;
        }
        .b-hero {
            height: 275px;
        }
        #footer .content-box {
            width:80%;
        }
        #services-pane ul.bkgrd img {
            height: 30%;
        }
        #testimonials.dark .contact-group {
            margin-top: 12%;
        }
        #about-pane .content-box, 
        #resume-pane .content-box {
            width: 70%;
        }
        #mktg-projects-4 .ads .adverts .h-ads {
            padding-right: 2%;
        }
        #mktg-projects-4 .ads .adverts .v-ads {
            padding-left: 2%;
        }
    }

    /* LARGER SCREENS | BASE (laptops/desktops) */
    @media (min-width: 1440px) and (max-width: 1679px) {
        /* target screens between 1440 - 1680px */
        .greeting h2 {
            padding-top:0.5rem;
            padding-bottom:0.5rem;
        }
        #hero.secondary #greeting h1 {
            font-size: 1rem;
        }
        #hero.secondary #greeting h2 {
            font-size: 2.5rem;
        }
        .greeting p {
            font-size: 1.25vw;
            line-height: 1.75vw;
        }
        .about-1, .about-2 {
            padding: 4rem 2rem;
        }
        #about-pane .content-box, #resume-pane .content-box {
            width: 70%;
        }
        .projects .project {
            height:17rem;
        }
        #wid ul.bkgrd h5 {
            font-size: 1.25rem;
        }
        #wid ul.bkgrd p {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        #wid .carousel-cell {
            height:300px;
        }
        #wid .experience {
            margin-top: 12%;
        }
        ul.charts {
            font-size: 1rem;
        }
        .exp-2 img {
            width:100%;
        }
        .parallax .content-box div {
            width:95%;
        }
        #p-preview .content-box {
            width:70%;
        }
        #p-preview ul {
            width:35%;
        }
        #p-preview .content-box .devices {
            width:65%;
            padding-left:2rem;
        }
        #testimonials ul li {
            padding: 1.75rem;
        }
        #testimonials p:first-child {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        .b-hero {
            height:250px;
        }
        #latest-blog .content-box {
            width:80%;
        }
        #footer .content-box {
            width:80%;
        }
        #services-pane ul.bkgrd img {
            height: 25%;
        }
        #services-pane ul.bkgrd li {
            padding: 2.25rem;
        }
        #services-pane ul.bkgrd p {
            line-height: 1.25rem;
        }
        .btnX {
            margin: 0% 0.75%
        }
        #p-projects h4 {
            font-family: 'Yellowtail', cursive;
            font-size: 2.5rem;
        }
        #port-project h1 {
            font-size: 1rem;
        }
        #port-project h2 {
            font-size: 3.75rem;
        }
        #p-projects p {
            font-size: 1rem;
        }
        #p-projects .p-tag {
            font-size:1rem;
        }
        .p-project .p-details {
            left:7%;
        }
        .p-project.v2 .p-details {
            right:2%;
        }
        #title-block ul.bread-crumbs {
            width:14%;
            left:43%;
        }
        #title-block ul.bread-crumbs.portfolio {
            width:15%;
            left:42%;
        }
        #title-block ul.bread-crumbs.portfolio.project {
            width:25%;
            left:37%;
        }
        #testimonials ul {
            bottom:77%;
        }
        #testimonials .contact-group {
            margin-top:14%;
        }
        .sketch-container {
            height: 200px;
        }
        #branding.health .colors ul li img {
            width:65%;
        }
        .about-1 h3, 
        #wid .exp-1 h3, 
        .contact-group h3, 
        .title-block.sub h3 {
            font-size:1rem;
        }
        .about-1 p {
            margin-top:0.25rem;
        }
        #mktg-projects-4 .adverts {
            width:100%;
        }
        #mktg-projects-4 .h-ads {
            padding-right: 2%;
        }
        #mktg-projects-4 .v-ads {
            padding-left: 2%;
        }
        .tabcontent ul.company-header, .tabcontent2 ul.company-header, .tabcontent3 ul.company-header, .tabcontent4 ul.company-header {
            font-size:1rem;
        }
    }

    /* BASE (laptops/tablets) */
    @media (min-width: 1024px) and (max-width: 1439px) {
        #navigation {
            width:95%;
        }
        .content-box {
            width: 100%;
        }
        #txtType {
            border-right: 7px solid #000000;
        }
        .greeting h2 {
            font-size: 3.25vw;
        }
        .greeting p {
            font-size:unset;
            line-height: unset;
        }
        .title-block h3 {
            font-size: 2rem;
        }
        .parallax .content-box {
            top: 12.5%;
        }
        .cta-hero img.pen {
            right: -50px;
            top: 14px;
        }
        .about-1, .about-2 {
            padding: 4rem 2rem;
        }
        .about-1 {
            padding-left:4rem;
        }
        .about-2 {
            padding-right: 4rem;
        }
        .about-1 p {
            font-size: 1.5rem;
            line-height: 2rem;
        }
        .about-2 p:first-child {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        #wid ul.bkgrd h5 {
            font-size: 1.25rem;
            text-align: center;
        }
        #wid ul.bkgrd p {
            font-size: 0.75rem;
            line-height: 1.125rem;
        }
        #wid ol.flickity-page-dots {
            width: 10%;
        }
        #wid .experience {
            margin-top:20%;
        }
        #wid .exp-1 {
            width: 60%;
        }
        #wid .exp-2 {
            width: 40%;
        }
        .exp-2 img {
            width:100%;
        }
        #wid ul.bkgrd {
            bottom: 80%;
        }
        #wid .experience {
            padding: 20rem 0rem 5rem 0rem;
        }
        #wid ul.charts {
            grid-template-columns: 1fr 1fr;
        }
        ul.technology {
            width: 80%;
        }
        #featured .projects {
            width: 95%;
            margin: 0 auto;
        }
        .project h4 {
            font-size: 1rem;
            font-weight: 900;
        }
        .project p {
            font-size: 0.75rem;;
        }
        .projects .project {
            height: 215px;
            border:unset;
        }
        .projects .project:hover {
            border:unset;
        }
        #p-preview .content-box {
            width:75%;
        }
        #p-preview ul {
            width:40%;
            font-size:0.9rem;
            padding:0rem;
        }
        #p-preview .devices {
            width:60%;
            padding-left:2rem;
        }
        .parallax .content-box h3 {
            font-size: 2.5rem;
            line-height:2.75rem;
        }
        #testimonials p:first-child {
            font-size: 0.9rem;
            line-height: 1.25rem;
        }
        #testimonials .profile img {
            width:35%;
            height:35%;
        }
        #testimonials .profile {
            flex-direction: column;
            text-align: center;
        }
        .contact-group h4 {
            font-size: 1.8rem;
        }
        .contact-group p {
            font-size: 0.9rem;
            line-height: 1.25rem;
        }
        #testimonials ul {
            bottom:72%;
        }
        #testimonials ul li {
            padding: 1.5rem;
            width: 32%;
        }
        #testimonials .contact-group {
            padding: 15rem 3rem 5rem 3rem;
        }
        #testimonials .contact-group {
            margin-top:25%;
        }
        #testimonials img.quote {
            bottom: 4%;
            right: 42%;
            width: 20%;
        }
        .cForm input[type="text"], .cForm input[type="email"], .cForm input[type="tel"], .cForm input[type="subject"], .cForm textarea {
            font-size:0.75rem;
        }
        .cForm button {
            padding:0.75rem 2rem;
            font-size:1.125rem;
        }
        #latest-blog .content-box {
            width:90%;
        }
        #title-block ul.bread-crumbs.portfolio,  
        #title-block ul.bread-crumbs {
            width: 16%;
            left: 42%;
        }
        .b-hero {
            height: 250px;
        }
        #footer .content-box {
            width:100%;
        }
        #footer ul li {
            padding-right: 1.25rem;
        }
        #hero.secondary #greeting h2 {
            font-size: 2rem;
        }
        #hero.secondary #greeting h1 {
            font-size: 1.0125rem;
        }
        #hero.secondary #greeting p {
            font-size: 1rem;
            line-height: 1.5rem;
        }
        #hero.secondary #greeting {
            top:15%;
        }
        #about-pane .content-box, #resume-pane .content-box {
            width:80%;
        }
        #about-facts div.fun-facts {
            width:100%;
        }
        #about-facts .content-box img.m-phone {
            width:40%;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            left:33%;
        }
        #services-pane ul.bkgrd img {
            height: 25%;
        }
        #services-pane ul.bkgrd p {
            font-size: 0.8rem;
            line-height: 1rem;
        }
        #services-pane ul.bkgrd li {
            padding: 2rem;
        }
        #testimonials.dark .contact-group {
            margin-top: 20%;
        }
        #p-projects .p-project .p-details {
            width: 40%;
            top: 18%;
        }
        #p-projects img.laptop {
            top: 18%;
            right: 10%;
            width: 30%;
        }
        #p-projects h4 {
            font-size: 2.5rem;
        }
        #p-projects p {
            font-size: 1rem;
        }
        .p-project.v2 .p-details {
            right: 3%;
        }
        .content-box .title-block, 
        .content-box .title-block.sub, 
        #reflection .content-box p {
            width:90%;
            margin:0 auto;
        }
        .sketch-container {
            height: 200px;
        }
        #overview.health .content-box {
            width: 85%;
        }
        #style-tile.bts ul li:nth-child(2) img {
            float: right;
        }
        #mktg-projects-4 .h-ads {
            padding-right: 2%;
        }
        #mktg-projects-4 .v-ads {
            padding-left: 2%;
        }
    }

    /* MEDIUM SCREENS (smartphones/tablets) */
    @media (min-width: 768px) and (max-width: 1023px) {   
        /* medium-sized screens (tablets) */
        #navigation {
            width:90%;
            display: inline-flex;
        }
        .logo img {
            width:100%;
            display: block;
        }
        .logo {
            width:20%;
        }
        .nav-btn {
            top: 1.5rem;
        }
        .content-box {
            width:100%;
        }
        .greeting h1 {
            font-size: 2vw;
        }
        .greeting h2 {
            font-size: 3.125vw;
        }
        #hero.secondary {
            padding: 3rem 0rem 0rem 0rem;
            background-color: #0D0E1B;
        }
        #hero.secondary #greeting {
            top: 2%;
            width: 40%;
        }
        #hero.secondary #greeting h1 {
            font-size: 1rem;
        }
        #hero.secondary #greeting h2 {
            font-size: 3.25vw;
        }
        #hero.secondary #greeting p {
            font-size: 1.125rem;
            line-height: 1.25rem;
            }
        .greeting p {
            font-size: 1.5vw;
            line-height: 1.75vw;
        }
        .greeting a:link, .greeting a:visited, .greeting a:active {
            padding: 12px 20px;
        }
        #txtType {
            border-right: 7px solid #000000;
        }
        #g-box img.mouse {
            width: 18%;
            top: 62%;
            left: -8%;
        }
        .cta-hero img.pen {
            right: -50px;
            top: 0px;
        }
        #title-block ul.bread-crumbs {
            width:20%;
            left:40.5%;
        }
        #title-block ul.bread-crumbs.portfolio {
            width: 25%;
            left: 35%;
        }
        #title-block ul.bread-crumbs.portfolio.project {
            width: 35%;
            left: 33%;
        }
        .title-block.sub {
            width: 90%;
            margin: 0 auto;
        }
        #p-preview .content-box {
            width:85%;
        }
        #p-preview .content-box ul {
            width:40%;
            font-size:0.75rem;
        }
        #p-preview .content-box ul li {
            padding-bottom: 0.5rem;
        }
        #p-preview .content-box .devices {
            width: 60%;
        }
        #reflection .content-box .title-block.sub {
            margin: 0px;
        }
        #design-iterate .content-box .title-block {
            width: 90%;
            margin: 0 auto;
        }
        #about-pane .content-box, #resume-pane .content-box {
            width: 90%;
        }
        #about-facts .content-box {
            width:95%;
            padding: 4rem 0rem 0rem 0rem;
        }
        #about-facts div.fun-facts {
            width:100%;
        }
        .about-1, .about-2 {
            padding: 2rem 2rem;
        }
        .about-1 p {
            font-size: 1.25rem;
            line-height: 2rem;
        }
        .about-2 p:first-child {
            font-size: 0.75rem;
            line-height: 1.25rem;
        }
        #about-facts .fun-facts img.m-phone {
            width: 20%;
            position: absolute;
            bottom: 66%;
            right: 75%;
        }
        #about-facts ul.hobbies {
            width: 75%;
        }
        #about-facts ul.hobbies li img {
            width: 25%;
        }
        #resume-pane a.cta-resume {
            position: unset;
        }
        ul.company-header li:nth-child(1) {
            border-bottom: 2px solid #000000;
            padding-bottom: 0.75rem;
            margin-bottom: 1rem;
        }
        .tabcontent ul.company-header, .tabcontent2 ul.company-header, .tabcontent3 ul.company-header, .tabcontent4 ul.company-header {
            font-size: 1rem;
            line-height: 1.25rem;
            flex-direction: column;
            align-items: unset;
        }
        ul.contact-info {
            padding-bottom: 1rem;
        }
        div.c-list {
            flex-direction: column;
            align-items: unset;
            padding-bottom: 0rem;
        }
        #wid ul.bkgrd {
            width: 100%;
            left: 0%;
            bottom:85%;
        }
        #wid ul.bkgrd h5 {
            font-size: 1rem;
        }
        #wid ul.bkgrd li.carousel-cell {
            padding: 1.25rem;
        }
        #wid ul.bkgrd p {
            font-size: 0.75rem;
            line-height: 1.25rem;
        }
        #wid .experience {
            margin-top: 35%;
            padding: 15rem 2rem 5rem 2rem;
        }
        #wid ol.flickity-page-dots {
            width: 10%;
            left: 44.5%;
        }
        .exp-2 img {
            width: 100%;
        }
        #wid .exp-1 h4 {
            font-size: 1.5rem;
        }
        #wid .exp-1 p {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        ul.charts {
            grid-gap: 0.5rem 0.75rem;
            font-size: 0.75rem;
        }
        ul.technology {
            width: 90%;
            padding: 2rem 0rem 0rem 0rem;
        }
        #featured .projects {
            grid-template-columns: 1fr 1fr;
            width: 90%;
            margin: 0 auto;
        }
        #port-project h2 {
            font-size: 3rem;
        }
        .projects .project {
            height: 15rem;
            border: unset;
        }
        .projects .project:hover {
            border:unset;
        }
        .project h4 {
            font-size: 1.25rem;
        }
        .parallax .content-box h3 {
            line-height: 2.75rem;
        }
        .parallax .content-box {
            top: 15%;
        }
        #testimonials ul {
            width: 95%;
            left: 2.5%
        }
        #testimonials ul li {
            padding: 1.25rem;
        }
        #testimonials p:first-child {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        #testimonials .profile p {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        #testimonials .profile img {
            border: 2px solid #ffffff;
            width: 25%;
            height: 25%;
        }
        #testimonials.dark .contact-group {
            padding: 8rem 2rem 5rem 2rem;
        }
        .cForm input {
            width: 95%;
        }
        #latest-blog .content-box {
            width: 90%;
        }
        .b-hero {
            height: 200px;
        }
        ul.b-posts .b-tags p {
            font-size: 0.5rem;
            margin-right: 0.25rem;
            padding: 7px 14px;
        }
        ul.b-posts p {
            font-size: 0.75rem;
        }
        #latest-blog {
            padding: 2rem 0rem;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            left:32%;
        }
        #footer .content-box {
            width: 100%;
            padding: 2rem 2rem
        }
        #footer .f-top {
            flex-direction: column;
        }
        #footer .content-box .f-top img {
            padding-bottom:2rem;
        }
        #footer p {
            text-align: center;
            margin-top:2rem;
        }
        ul.charts {
            grid-template-columns: 1fr 1fr;
        }
        #services-pane .content-box {
            padding: 4rem 0rem 2rem 0rem;
        }
        #services-pane ul.bkgrd {
            width:95%;
            padding: 2rem 0rem 0rem 0rem;
        }
        #services-pane ul.bkgrd img {
            height: 25%;
        }
        #services-pane ul.bkgrd p {
            font-size: 0.8rem;
            line-height: 1rem;
        }
        #services-pane ul.bkgrd li {
            padding: 1.25rem;
        }
        #process-pane ul {
            width: 75%;
        }
        #p-projects .p-project {
            background-position: right;
        }
        #p-projects .p-project.v2 {
            background-position: left center;
        }
        #p-projects .p-details {
            top: 10%;
            left: 5%;
            width: 55%;
        }
        #p-projects .p-project.v2 .p-details {
            left:42%;
        }
        #p-projects img.laptop {
            top: 29%;
            right: 4%;
            width: 25%;
        } 
        #p-projects .p-project.v2 img.laptop {
            top: 29%;
            left:5%;
            width: 25%;
        }
        #p-projects .p-project.v2:nth-child(2), 
        #p-projects .p-project.v2:nth-child(8) {
            background-position: center center;
            background-size: cover;
        }
        #p-projects .p-project.v2:nth-child(2) .p-details,
        #p-projects .p-project.v2:nth-child(8) .p-details{
            background-color: rgba(255,255,255,0.9);
            left: 0px;
            top: 15%;
            width: 100%;
            padding: 2rem 3rem;
        }
        #p-projects h4 {
            font-size: 2.25rem;
        }
        #p-projects img.print {
            top: 40%;
            left: 3%;
            width: 34%;
        }
        #myBtnContainer {
            display: grid;
            flex-direction: column;
            grid-template-columns: 1fr 1fr;
            grid-gap: 1rem 1rem;
        }
        #design-iterate .iterations .content-box {
            padding: 2rem 2rem;
        }
        #project-plan .sketch-comp {
            width:90%;
        }
        #project-plan .sketch-comp .sketch-container {
            height: 175px;
        }
        #project-plan .content-box .img-asset img {
            width: 90%;
        }
        .sst.modals {
            width: 90%;
        }
        #planning .img-asset img {
            width:90%;
            margin:0 auto;
        }
        #reflection .content-box {
            width: 90%;
            padding: 2rem 0rem;
        }
        #overview.health .content-box {
            width:90%;
        }
        #overview.health .content-box h4 {
            width:35%;
        }
        #planning.health .wireframe .w-info {
            padding-left:2rem;
        }
        #planning.health .goals {
            padding: 2rem 1rem;
        }
        #planning.health .goals ul li img {
            width:90%;
        }
        #planning.health .analysis {
            padding: 4rem 0rem 4rem 2rem;
        }
        #planning.health .design-thinking img {
            width:90%;
        }
        #branding.health .img-asset img {
            width:90%;
        }
        #branding.health .font-choices .content-box {
            width: 100%;
            padding: 2rem 8rem
        }
        #branding.health .font-choices .content-box img {
            width: 100%;
        }
        #branding .colors {
            width:90%;
        }
        #branding .colors .content-box ul li:nth-child(1) {
            width:70%;
        }
        #branding .colors .content-box ul li img {
            width:85%;
        }
        #branding .colors .content-box ul li:nth-child(2) img {
            width:47%;
        }
        #footer {
            padding-top: unset;
        }
        #sitemap .content-box {
            width:90%;
        }
        #mktg-projects-4 .h-ads {
            padding-right: 2%;
        }
        #mktg-projects-4 .v-ads {
            padding-left: 2%;
        }
        .isotope-masonry .button-group {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 0.5rem;
            width: 85%;
            margin: 0 auto;
        }
        .isotope-masonry .button-group .button {
            font-size: 1rem;
        }
    }

    @media (min-width: 575px) and (max-width: 767px) {
        /* iPhone 6/7/8 Plus + similar devices */
        #navigation {
            width:90%;
        }
        .logo img {
            width:100%;
            display: block;
        }
        .logo {
            width:25%;
        }
        .nav-btn {
            top: 1.25rem;
        }
        nav .logo img {
            width:80%;
        }
        .myContainer {
            width: 90%;
            margin: 0 auto;
        }
        .content-box {
            width: 100%;
        }
        #hero {
            background-color: #f0f0f0;
            padding-top:30%;
        }
        #hero .greeting {
            width: 90%;
            left: 5%;
            margin: 0 auto;
            padding: 0% 0%;
        }
        #hero .greeting {
            z-index: 1;
            position: absolute;
            top: -60%;
        }
        .greeting h1 {
            font-size: 4.25vw;
            padding-left:1rem;
        }
        .greeting h2 {
            font-size: 7.75vw;
            padding: 1rem 1rem;
        }
        #txtType {
            border-right:solid #000000 7px;
        }
        #g-box img.mouse {
            width: 16%;
            top: 62%;
            left: -7%;
        }
        .greeting p {
            padding: 0em 0em;
            font-size: 3vw;
            line-height: unset;
            width: 57%;
            padding-top: 0%;
            padding-left: 5%;
            margin-top: 0.5rem;
        }
        .cta-hero {
            margin-top: 0;
        }
        .greeting a:link, .greeting a:visited, .greeting a:active {
            font-size: 14px;
            padding: 14px 10px;
        }
        #hero img.pen {
            width: 51%;
            right:-35px;
        }
        #about-me .content-box {
            font-size: 0.75rem;
            flex-direction: column;
            padding: 3rem 0rem;
        }
        .about-1, .about-2 {
            padding: 0rem 0rem;
            width: 80%;
        }
        .about-1 p {
            font-size: 1rem;
            line-height: unset;
        }
        .about-2 p:first-child {
            line-height: 1.25rem;
        }
        #wid {
            padding: 2rem 0rem 0rem 0rem;
        }
        #wid ul.bkgrd {
            width:100%;
            left:0%;
        }
        .title-block h3 {
            font-size: 1.5rem;
        }
        .title-block p {
            font-size:1rem;
            width:80%;
        }
        #wid ol.flickity-page-dots {
            width: 20%;
            bottom: -25%;
            left: 40%;
        }
        #wid ul.bkgrd {
            bottom: 93%;
        }
        #wid ul.bkgrd li.carousel-cell {
            padding: 1.25rem;
            height: 175px;
        }
        #wid ul.bkgrd img {
            height:60%;
        }
        #wid ul.bkgrd h5 {
            font-size: 0.75rem;
            text-align: center;
        }
        #wid ul.bkgrd p {
            font-size: 0.675rem;
            line-height: unset;
            display: none;
        }
        #wid .experience {
            margin-top: 25%;
            padding: 7rem 0rem 3rem 0rem;
        }
        .exp-1 li {
            display: block;
            padding-bottom:1rem;
        }
        #wid .exp-1 {
            width:100%;
        }
        #wid .exp-2 {
            width:50%;
        }
        #wid .exp-1 p {
            font-size: 0.75rem;
            line-height: .75rem;
        }
        #wid .exp-1 h4 {
            font-size:1.25rem;
        }
        .exp-2 img {
            width:100%;
        }
        #wid .exp-group {
            padding: 2rem;
            flex-direction: column;
        }
        ul.charts {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            padding: 2rem 2rem
        }
        ul.technology {
            width:100%;
        }
        ul.technology {
            padding:0rem;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 1rem;
            justify-content: center;
            align-items: center;
        }
        ul.technology img {
            width:35%;
        }
        #featured {
            padding: 4rem 0rem;
        }
        #featured .projects {
            grid-template-columns: 1fr 1fr;;
        }
        #featured p.btn {
            padding-top: 3rem;
        }
        .project h4 {
            font-size: 0.75rem;
        }
        .project p {
            font-size: 0.75rem;
        }
        .projects .project {
            height:8rem;
            border: unset;
        }
        .projects .project:hover {
            border:unset;
        }
        .projects .proj-block {
            padding:0.25rem 0rem;
        }
        #testimonials {
            padding: 2rem 0rem 0rem 0rem;
        }
        #testimonials ul {
            flex-direction: column;
            bottom: unset;
            position: unset;
            width:100%;
        }
        #testimonials ul li {
            padding: 1.5rem;
            width: 100%;
            border-bottom:2px solid #ffffff;
        }
        #testimonials p:first-child {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        #testimonials .profile img {
            display: none;
        }
        #testimonials .profile p {
            line-height: 1rem;
            font-size: 0.75rem;
        }
        #testimonials .contact-group {
            flex-direction: column;
            padding: unset;
            width: 100%;
            margin: 0 auto;
            padding:2rem;
        }
        .contact-1 {
            width:95%;
            padding-right: unset;
        }
        .contact-2 {
            width: 95%;
            padding: unset;
            padding:1rem;
        }
        .contact-group h4 {
            font-size: 1.75rem;
            font-weight: 500;
        }
        .cForm input[type="text"], .cForm input[type="email"], .cForm input[type="tel"], .cForm input[type="subject"], .cForm textarea {
            width:95.5%;
        }
        .parallax {
            background-position: 95% top;
        }
        .parallax, .parallax .parallax-solid {
            height:100vh;
        }
        .parallax .content-box {
            top:15%;
        }
        .parallax .content-box h3 {
            font-size: 2em;
        }
        .parallax .content-box p {
            font-size: 1rem;
            line-height: 1.5rem;
        }
        #latest-blog {
            padding: 2rem 0rem;
        }
        ul.b-posts {
            flex-direction: column;
        }
        ul.b-posts li {
            width:100%;
            padding-bottom: 2rem;
        }
        ul.b-posts p {
            font-size:0.8rem;
        }
        ul.b-posts li:nth-child(even) {
            margin: unset;
        }
        ul.b-posts .b-tags p {
            padding:5px 10px;
        }
        .b-hero {
            height:200px;
        }
        #latest-blog .content-box {
            width:90%;
        }
        #latest-blog .title-block.w {
            padding-bottom: unset;
        }
        #footer {
            padding: unset;
        }
        #footer .content-box {
            width:100%;
            padding:1rem;
        }
        #footer ul, #footer div.f-menu {
            display: inline-block;
        }
        #footer ul li {
            padding-bottom: 0.25rem;
        }
        #footer p {
            font-size: 0.75rem;
            text-align: center;
        }
        #hero.secondary {
            padding-top:0%;
        }
        #hero.secondary #greeting {
            width:80%;
            top: 10%;
        }
        #hero.secondary #greeting h1 {
            font-size:1rem;
        }
        #hero.secondary #greeting h2 {
            font-size:2.75rem;
        }
        #hero.secondary #greeting p {
            font-size:1rem;
            line-height: unset;
            padding-left:50%;
        }
        #hero.secondary .content-box img:nth-child(1) {
            padding-top: 20%;
        }
        #title-block h1 {
            padding: unset;
            font-size:3rem;
        }
        #title-block ul.bread-crumbs {
            top: 35%;
            left: 30%;
            width: 40%
        }
        #hero.secondary .a-doodle {
            width:13%;
            right:3%;
            bottom:7%;
        }
        #about-pane .content-box, #resume-pane .content-box {
            width:85%;
        }
        #about-pane .cta-resume span {
            font-size:4rem;
        }
        .cta-resume .g-resume img {
            width: 1.5rem;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            font-size: 1.5rem;
            top:30%;
            left:30%;
        }
        #about-facts div.fun-facts {
            width:100%;
        }
        #about-facts div.fun-facts {
            position: relative;
        }
        #about-facts .content-box img.m-phone {
            width: 18%;
            position: absolute;
            top: -12%;
            right: 72%;
        }
        #about-facts .facts {
            text-align: left;
        }
        #about-facts .facts h4 {
            font-size: 2rem;
            padding-left:32%;
        }
        #about-facts .facts p {
            font-size: 1.25rem;
            padding-left: 32%;
        }
        #about-facts ul.hobbies {
            width:60%;
            grid-gap: 1rem;
        }
        #about-facts ul.hobbies li {
            font-size:1rem;
        }
        #about-facts ul.hobbies li:nth-child(2) {
            display: unset;
        }
        #about-facts ul.hobbies li:nth-child(2) img {
            width:60%;
        }
        #services-pane ul.bkgrd {
            grid-template-columns: 1fr 1fr;
        }
        #services-pane ul.bkgrd img {
            height:50%;
            padding-bottom: unset;
        }
        #services-pane ul.bkgrd {
            width:95%;
            grid-gap:0.5rem;
            padding: unset;
        }
        #services-pane ul.bkgrd li {
            padding:1rem;
        }
        #services-pane ul.bkgrd h4 {
            font-size: 1rem;
            text-align: center;
        }
        #services-pane ul.bkgrd p {
            font-size: 0.6rem;
            line-height: unset;
            display: none;
        }
        #services-pane .content-box {
            padding:unset;
        }
        #process-pane ul {
            width:90%;
        }
        #process-pane ul li {
            display: unset;
            grid-template-columns: unset;
        }
        #process-pane ul li div img {
            width:8vh;
            padding-top:2rem;
        }
        #process-pane ul li div {
            padding: unset !important;
        }
        #process-pane ul li div:nth-child(2) {
            padding-bottom: 3rem;
            border-bottom: 1px solid #000000;
        }
        #process-pane ul li:nth-child(6) div:nth-child(2) {
            padding-bottom: unset;
            border-bottom: unset;
        }
        #process-pane ul li div.approach-content p {
            padding-bottom:2rem;
        }
        #process-pane .title-block {
            padding-bottom: unset;
        }
        #testimonials.dark .contact-group {
            display: none;
        }
        #resume-pane a.cta-resume {
            position: unset;
        }
        #resume-pane a.cta-resume:link, #resume-pane a.cta-resume:active, #resume-pane a.cta-resume:visited {
            padding:12px 25px;
            width:50%;
        }
        #resume-pane .content-box h4 {
            font-size: 1.5rem;
        }
        div.c-list {
            display: unset;
        }
        ul.contact-info {
            display: flex;
            flex-direction: column;
            padding-bottom: 1rem;
        }
        ul.contact-info li:nth-child(2) {
            display: none;
        }
        #resume-pane .content-box { 
            width:90%;
        }
        .tab {
            width:100%;
            margin-bottom:2%;
        }
        .tabcontent, .tabcontent2, .tabcontent3, .tabcontent4 {
            float: unset;
            padding: unset;
            width: 90%;
            margin: 0 auto;
        }
        .tabcontent ul.company-header, .tabcontent2 ul.company-header, .tabcontent3 ul.company-header, .tabcontent4 ul.company-header {
            display: unset;
            font-size:1rem;
            line-height: unset;
        }
        .tabcontent ul.company-header li:nth-child(1), .tabcontent2 ul.company-header li:nth-child(1), .tabcontent3 ul.company-header li:nth-child(1), .tabcontent4 ul.company-header li:nth-child(1) {
            padding-bottom:0.5rem;
            border-bottom:1px solid #000000;
            margin-bottom:1rem;
        }
        #TabEdu3.tabcontent3 ul.company-header li {
            padding-bottom:unset;
            border-bottom:unset;
            margin-bottom:unset;
        }
        .tab button {
            background-color:#F8F8F8;
            border-bottom: 2px solid #ffffff;
            border-top: unset;
            border-left: unset;
            border-right:unset;
        }
        #resume-pane span p img.aine {
            height: unset;
            width:100%;
        }
        #myBtnContainer {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 90%;
            margin: 0 auto;
        }
        .btnX {
            margin:3% 2%;
            font-size: 1rem;
        }
        #p-projects {
            width: 100%;
        }
        #p-projects .p-project {
            border: 4px solid #ffffff;
            background-position: 17rem center;
        }
        #p-projects h4 {
            font-size: 1.75rem;
        }
        #p-projects p {
            font-size: 0.75rem;
        }
        #p-projects img.laptop {
            width:35%;
            top:65%;
        }
        #p-projects .p-details {
            width:65%;
            top: 8%;
            left: 7%;
        }
        #p-projects .p-project.v2 .p-details {
            left:30%;
        }
        #p-projects .p-project.v2 .p-details  a {
            float:right;
        }
        #p-projects .p-project.v2 {
            background-position: -10rem center;
        }
        #p-projects.v2 a:link, #p-projects.v2 a:active, #p-projects.v2 a:visited {
            float:right;
        }
        #p-projects .p-project.v2:nth-child(2), 
        #p-projects .p-project.v2:nth-child(8) {
            background-position: unset;
        }
        #p-projects .p-project.v2:nth-child(2) .p-details, 
        #p-projects .p-project.v2:nth-child(8) .p-details {
            width:100%;
            background-color: rgba(255,255,255,0.9);
            top: 25%;
            left: 0%;
            padding: 7% 10%;
        }
        #p-projects .p-project.v2:nth-child(2) .p-details a, 
        #p-projects .p-project.v2:nth-child(8) .p-details a {
            float:left;
        }
        #p-projects .p-project.v2:nth-child(9) .p-details {
            z-index: 9999;
        }
        #p-projects .p-project.v2:nth-child(9) .p-details a {
            background-color:rgba(255,255,255,0.25);
        }
        #p-projects img.print {
            width: 50%;
            top: 50%;
        }
        #p-projects .c-project ul {
            display: unset;
        }
        #p-projects .c-project ul li {
            margin-bottom: 2rem;
        }
        #p-projects .c-project ul.c-tags {
            display: block;
            padding: 2rem 0;
        }
        #p-projects hr {
            display: none;
        }
        #title-block ul.bread-crumbs.portfolio {
            font-size:1rem;
            width: 35%;
            left: 32%;
        }
        #portfolio-pane .title-block.w h3:first-child {
            padding-top:1rem;
        }
        #port-project h1 {
            font-size:0.5rem;
        }
        #port-project h2 {
            font-size: 2rem;
        }
        #port-project .title-block {
            padding:1rem 0rem;
        }
        #port-project .p-overview strong {
            font-size: 1rem;
        }
        #port-project .p-overview p {
            line-height: unset;
            font-size: 0.75rem;
        }
        #p-preview .content-box {
            width:80%;
        }
        #p-preview ul {
            padding-right: 2%;
        }
        #p-preview ul li {
            padding-bottom: 0;
        }
        .title-block.sub {
            width:90%;
            margin: 0 auto;
        }
        #mobile-project-view .content-box {
            flex-direction: column-reverse;
        }
        #mobile-project-view .content-box .carBox {
            width:100%;
        }
        #mobile-project-view .content-box .mobile-panel {
            width:100%;
        }
        #design-iterate {
            padding:0rem 0rem;
        }
        #design-iterate .content-box .title-block {
            width:90%;
            margin:0 auto;
        }
        #design-iterate .iterations .content-box {
            padding: 6% 0%;
        }
        .sketch-comp {
            width:90%;
            flex-direction: column;
            padding-bottom: unset;
        }
        .sketch-comp .sketch {
            width: 100%;
            padding-bottom:7%;
        }
        .sketch-container {
            height: 175px;
        }
        .sketch-comp p {
            margin-left: unset;
            width:90%;
            font-size: 1rem;
            line-height: unset;
        }
        .sst.modals {
            width:90%;
            padding-top:unset;
        }
        .title-block.sub h4 {
            font-size:1.5rem;
        }
        .title-block.sub p {
            font-size:1rem;
        }
        .sst.modals p img {
            width:100%;
        }
        #style-tile .img-asset, 
        #planning .img-asset {
            width:90%;
            margin: 0 auto;
        }
        #style-tile .img-asset img, 
        #planning .img-asset img {
            width:100%;
        }
        #personas {
            padding:2rem 0rem 4rem 0rem;
        }
        #personas .carBox {
            width:100%;
        }
        #reflection .content-box {
            width: 90%;
            padding:2rem 0rem;
        }
        #reflection .title-block.sub {
            width:100%;
        }
        #title-block ul.bread-crumbs.portfolio.project {
            font-size:1rem;
            width: 65%;
            left: 18%;
        }
        #mobile-project-view .mobile-panel h3 {
            font-size:1.75rem;
        }
        #mobile-project-view .content-box .mobile-panel {
            padding-top:0rem;
        }
        #overview.health .content-box {
            width:100%;
        }
        #planning {
            padding: 1rem 0rem;
        }
        #planning.health .goals {
            padding:0rem 0rem 2rem 0rem;
        }
        #planning.health .goals ul li {
            width:100%;
        }
        #planning.health .analysis {
            padding:0rem;
        }
        #planning.health .design-thinking {
            padding:0rem 0rem;
        }
        #planning.health .design-thinking img {
            width: 100%;
        }
        #branding .img-asset img {
            width:90%;
        }
        #branding.health {
            padding:2rem 0rem;
        }
        #branding.health .font-choices .content-box {
            width:100%;
            padding:2rem;
        }
        #branding.health .font-choices .content-box img {
            width:100%;
        }
        #branding.health .colors {
            width:90%;
        }
        #branding.health .colors ul {
            flex-direction: column;
        }
        #branding.health .colors ul li img {
            width:100%;
        }
        #branding.health .colors ul li:nth-child(2) img {
            width:30%;
        }
        #branding.health .font-choices {
            margin: 2rem 0rem;
        }
        #planning.health .wireframe {
            padding-bottom:12rem;
        }
        #planning.health .wireframe .w-info {
            width:100%;
            padding: 1rem 2rem;
        }
        #planning.health .goals ul {
            flex-direction: column;
            width: 85%;
            margin: 0 auto;
        }
        #planning.health .goals ul li {
            padding:0rem;
        }
        #planning.health .comp-1 h3 {
            font-size: 2rem;
        }
        #planning.health .analysis .health-comps {
            flex-direction: column;
        }
        #planning.health .health-comps .comp-1 {
            padding-top:1rem;
            padding-right: unset;
            width: 85%;
            margin: 0 auto;
        }
        #planning.health .health-comps .comp-2 {
            width:100%;
        }
        #planning.health .goals ul li img {
            width:100%;
        }
        #planning.health div.comp-icons {
            padding-top: 1rem;
        }
        #planning.health div.comp-icons img {
            width: 100%
        }
        #personas.health {
            padding: 2rem 0rem 4rem 0rem;
        }
        #overview.health .content-box h4 {
            width:50%;
        }
        #overview.health .content-box p {
            line-height: 1.25rem;
        }
        #overview.health .content-box {
            padding:2rem 0rem 0rem 0rem;
        }
        #p-preview.bts .content-box, 
        #p-preview.cre-camb .content-box, 
        #p-preview.cre-newbury .content-box, 
        #p-preview.landing .content-box {
            flex-direction: column-reverse;
        }
        #p-preview.bts .devices, 
        #p-preview.cre-cam .devices, 
        #p-preview.cre-newbury .devices, 
        #p-preview.landing .devices {
            width:80%;
        }
        #p-preview.bts ul, 
        #p-preview.cre-camb ul, 
        #p-preview.cre-newbury ul, 
        #p-preview.landing ul {
            padding-right: unset;
            margin-bottom: unset;
            width:80%; 
        }
        #p-preview.bts ul li.cta, 
        #p-preview.cre-camb ul li.cta, 
        #p-preview.cre-newbury ul li.cta, 
        #p-preview.landing ul li.cta {
            margin: 0 auto;
            padding-top:1rem;
        }
        #p-preview.bts ul li a:link, #p-preview.bts ul li a:active, #p-preview.bts ul li a:visited, 
        #p-preview.cre-camb ul li a:link, #p-preview.cre-camb ul li a:active, #p-preview.cre-camb ul li a:visited,
        #p-preview.cre-newbury ul li a:link, #p-preview.cre-newbury ul li a:active, #p-preview.cre-newbury ul li a:visited, 
        #p-preview.landing ul li a:link, #p-preview.cre-newbury ul li a:active, #p-preview.cre-newbury ul li a:visited {
            margin: 0 auto;
        }
        #p-preview.bts ul li.cta span, 
        #p-preview.cre-camb ul li.cta span,
        #p-preview.cre-newbury ul li.cta span, 
        #p-preview.landing ul li.cta span {
            margin: 0 auto;
        }
        #style-tile.bts ul {
            width:90%;
            margin: 0 auto;
            flex-direction: column;
        }
        #style-tile.bts ul li.guide img, 
        #style-tile.bts ul li:nth-child(2) img {
            width:100%;
        }
        #style-tile.bts ul li.guide {
            padding-bottom: 2rem;
        }
        #gallery {
            width:100%;
        }
        #thumbs {
            width: 15%;
            padding-right:1%;
        }
        #largeImage {
            width: 100%;
            float: right;
        }
        #panel {
            width: 85%;
            display: inline-block;
        }
        #design-comps.landing .image-asset {
            width: 90%;
            margin: 0 auto;
        }
        #planning.landing .video-block {
            width: 90%;
        }
        #e-campaigns.landing .image-asset img {
            width:100%;
        }
        #hiRes .image-asset {
            padding:2rem 0rem;
        }
        #hiRes .image-asset img {
            width: 80%;
        }
        #project-plan.edv .carousel-cell img {
            width: 100%;
        }
        #mktg-projects h2, #mktg-projects-2 h2, #mktg-projects-3 h2, #mktg-projects-4 h2 {
            text-align: center;
        }
        .logos {
            width: 90%;
            margin: 0 auto;
        }
        #mktg-projects h2, #mktg-projects-2 h2, #mktg-projects-3 h2, #mktg-projects-4 h2 {
            margin: 2rem 0 1rem 0;
        }
        #mktg-projects .logos ul {
            grid-template-columns: 1fr 1fr;
            grid-gap: 0.5rem;
        }
        #mktg-projects .logos ul li {
            height: 150px;
        }
        #mktg-projects .logos ul li img {
            width: 75%;
        }
        #mktg-projects-2 .brochures ul {
            flex-direction: column;
            padding: 0rem 0rem;
            width: 90%;
        }
        #mktg-projects-2 .brochures ul li {
            padding-bottom: 2rem;
        }
        #mktg-projects-2 .brochures ul p {
            font-size: 1.25rem;
            color:#9d9d9d;
        }
        #mktg-projects-3 {
            padding: 4rem 0;
        }
        #mktg-projects-4 .adverts {
            flex-direction: column;
        }
        #mktg-projects-4 .adverts {
            width:80%;
            margin: 0 auto;
        }
        #mktg-projects-4 .h-ads {
            padding: 2rem 0rem;
        }
        #mktg-projects-4 .h-ads ul li {
            padding-bottom: 1rem;
        }
        #mktg-projects-4 {
            padding: 2rem 0rem;
        }
        #mktg-projects-4 h2 {
            margin-top:0rem;
        }
        .isotope-masonry {
            width:90%;
            margin:0 auto;
        }
        .isotope-masonry .button-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 0.5rem;
        }
        .isotope-masonry .button {
            padding: 0.5rem 0rem;
            border-width: 1px;
            font-size: 0.9rem;
        }
        .tab button.active::after {
            content: "\f103";
        }
    }

    @media (min-width: 414px) and (max-width: 574px) {
        /* iPhone 6/7/8 Plus + similar devices */
        #navigation {
            width:90%;
        }
        .logo img {
            width:100%;
            display: block;
        }
        .logo {
            width:25%;
        }
        .nav-btn {
            top: 1rem;
            right: 1.25rem;
            width: 42px;
            height: 42px;
        }
        nav .logo img {
            width:70%;
        }
        .nav-btn i {
            width: 16px;
            margin-left: 13px;
        }
        .myContainer {
            width: 90%;
            margin: 0 auto;
        }
        .nav-btn i:nth-child(1) {
            margin-top: 14px;
        }
        .nav-wrapper ul {
            width: 85%;
        }
        .nav-wrapper ul li {
            padding: 1.25rem 0rem;
        }
        .content-box {
            width: 100%;
        }
        #hero {
            background-color: #f0f0f0;
            padding-top:30%;
        }
        #hero .greeting {
            width: 90%;
            left: 5%;
            margin: 0 auto;
            padding: 0% 0%;
        }
        #hero .greeting {
            z-index: 1;
            position: absolute;
            top: -60%;
        }
        .greeting h1 {
            font-size: 4.25vw;
            padding-left:1rem;
        }
        .greeting h2 {
            font-size: 7.75vw;
            padding: 1rem 1rem;
        }
        #txtType {
            border-right:solid #000000 7px;
        }
        #g-box img.mouse {
            width: 16%;
            top: 62%;
            left: -7%;
        }
        .greeting p {
            padding: 0em 0em;
            font-size: 3vw;
            line-height: unset;
            width: 57%;
            padding-top: 0%;
            padding-left: 5%;
            margin-top: 0.5rem;
        }
        .cta-hero {
            margin-top: 0;
        }
        .greeting a:link, .greeting a:visited, .greeting a:active {
            font-size: 14px;
            padding: 14px 10px;
        }
        #hero img.pen {
            width: 51%;
            right:-35px;
        }
        #about-me .content-box {
            font-size: 0.75rem;
            flex-direction: column;
            padding: 3rem 0rem;
        }
        .about-1, .about-2 {
            padding: 0rem 0rem;
            width: 80%;
        }
        .about-1 p {
            font-size: 1rem;
            line-height: unset;
        }
        .about-2 p:first-child {
            line-height: 1.25rem;
        }
        #wid {
            padding: 2rem 0rem 0rem 0rem;
        }
        #wid ul.bkgrd {
            width:100%;
            left:0%;
        }
        .title-block h3 {
            font-size: 1.5rem;
        }
        .title-block p {
            font-size:1rem;
            width:80%;
        }
        #wid ol.flickity-page-dots {
            width: 20%;
            bottom: -25%;
            left: 40%;
        }
        #wid ul.bkgrd {
            bottom: 93%;
        }
        #wid ul.bkgrd li.carousel-cell {
            padding: 1.25rem;
            height: 175px;
        }
        #wid ul.bkgrd img {
            height:60%;
        }
        #wid ul.bkgrd h5 {
            font-size: 0.75rem;
            text-align: center;
        }
        #wid ul.bkgrd p {
            font-size: 0.675rem;
            line-height: unset;
            display: none;
        }
        #wid .experience {
            margin-top: 25%;
            padding: 7rem 0rem 3rem 0rem;
        }
        .exp-1 li {
            display: block;
            padding-bottom:1rem;
        }
        #wid .exp-1 {
            width:100%;
        }
        #wid .exp-2 {
            width:50%;
        }
        #wid .exp-1 p {
            font-size: 0.75rem;
            line-height: .75rem;
        }
        #wid .exp-1 h4 {
            font-size:1.25rem;
        }
        .exp-2 img {
            width:100%;
        }
        #wid .exp-group {
            padding: 2rem;
            flex-direction: column;
        }
        ul.charts {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            padding: 2rem 2rem
        }
        ul.technology {
            width:100%;
        }
        ul.technology {
            padding:0rem;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 1rem;
            justify-content: center;
            align-items: center;
        }
        ul.technology img {
            width:35%;
        }
        #featured {
            padding: 4rem 0rem;
        }
        #featured .projects {
            grid-template-columns: 1fr 1fr;;
        }
        #featured p.btn {
            padding-top: 3rem;
        }
        .project h4 {
            font-size: 0.75rem;
        }
        .project p {
            font-size: 0.75rem;
        }
        .projects .project {
            height: 8rem;
            border: unset;
        }
        .projects .project:hover {
            border:unset;
        }
        .projects .proj-block {
            padding:0.25rem 0rem;
        }
        #testimonials {
            padding: 2rem 0rem 0rem 0rem;
        }
        #testimonials ul {
            flex-direction: column;
            bottom: unset;
            position: unset;
            width:100%;
        }
        #testimonials ul li {
            padding: 1.5rem;
            width: 100%;
            border-bottom:2px solid #ffffff;
        }
        #testimonials p:first-child {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        #testimonials .profile img {
            display: none;
        }
        #testimonials .profile p {
            line-height: 1rem;
            font-size: 0.75rem;
        }
        #testimonials .contact-group {
            flex-direction: column;
            padding: unset;
            width: 100%;
            margin: 0 auto;
            padding:2rem;
        }
        .contact-1 {
            width:95%;
            padding-right: unset;
        }
        .contact-2 {
            width: 95%;
            padding: unset;
            padding:1rem;
        }
        .contact-group h4 {
            font-size: 1.75rem;
            font-weight: 500;
        }
        .cForm input[type="text"], .cForm input[type="email"], .cForm input[type="tel"], .cForm input[type="subject"], .cForm textarea {
            width:95.5%;
        }
        .parallax {
            background-position: 95% top;
        }
        .parallax, .parallax .parallax-solid {
            height:100vh;
        }
        .parallax .content-box {
            top:15%;
        }
        .parallax .content-box h3 {
            font-size: 2em;
        }
        .parallax .content-box p {
            font-size: 1rem;
            line-height: 1.5rem;
        }
        #latest-blog {
            padding: 2rem 0rem;
        }
        ul.b-posts {
            flex-direction: column;
        }
        ul.b-posts li {
            width:100%;
            padding-bottom: 2rem;
        }
        ul.b-posts p {
            font-size:0.8rem;
        }
        ul.b-posts li:nth-child(even) {
            margin: unset;
        }
        ul.b-posts .b-tags p {
            padding:5px 10px;
        }
        .b-hero {
            height:200px;
        }
        #latest-blog .content-box {
            width:90%;
        }
        #latest-blog .title-block.w {
            padding-bottom: unset;
        }
        #footer {
            padding: unset;
        }
        #footer .content-box {
            width:100%;
            padding:1rem;
        }
        #footer ul, #footer div.f-menu {
            display: inline-block;
        }
        #footer ul li {
            padding-bottom: 0.25rem;
        }
        #footer p {
            font-size: 0.75rem;
            text-align: center;
        }
        #hero.secondary {
            padding-top:0%;
        }
        #hero.secondary #greeting {
            width:80%;
            top: 10%;
        }
        #hero.secondary #greeting h1 {
            font-size:1rem;
        }
        #hero.secondary #greeting h2 {
            font-size:2rem;
        }
        #hero.secondary #greeting p {
            font-size:0.75rem;
            line-height: unset;
            padding-left:50%;
        }
        #hero.secondary .content-box img:nth-child(1) {
            padding-top: 20%;
        }
        #title-block h1 {
            font-size:3rem;
        }
        #title-block ul.bread-crumbs {
            top: 40%;
            left: 30%;
            width: 40%
        }
        #hero.secondary .a-doodle {
            width:13%;
            right:3%;
            bottom:7%;
        }
        #about-pane .content-box, #resume-pane .content-box {
            width:85%;
        }
        #about-pane .cta-resume span {
            font-size:4rem;
        }
        .cta-resume .g-resume img {
            width: 1.5rem;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            font-size: 1.5rem;
            top:30%;
            left:20%;
        }
        #about-facts div.fun-facts {
            width:100%;
        }
        #about-facts div.fun-facts {
            position: relative;
        }
        #about-facts .content-box img.m-phone {
            width: 30%;
            position: absolute;
            top: -18%;
            right: 71%;
        }
        #about-facts .facts {
            text-align: left;
        }
        #about-facts .facts h4 {
            font-size: 2rem;
            padding-left: 32%;
        }
        #about-facts .facts p {
            font-size: 1.25rem;
            padding-left: 32%;
        }
        #about-facts ul.hobbies li {
            font-size:1rem;
        }
        #about-facts ul.hobbies li:nth-child(2) {
            display: unset;
        }
        #about-facts ul.hobbies li:nth-child(2) img {
            width:60%;
        }
        #services-pane ul.bkgrd {
            grid-template-columns: 1fr 1fr;
        }
        #services-pane ul.bkgrd img {
            height:50%;
            padding-bottom: unset;
        }
        #services-pane ul.bkgrd {
            width:95%;
            grid-gap:0.5rem;
            padding: unset;
        }
        #services-pane ul.bkgrd li {
            padding:1rem;
        }
        #services-pane ul.bkgrd h4 {
            font-size: 1rem;
            text-align: center;
        }
        #services-pane ul.bkgrd p {
            font-size: 0.6rem;
            line-height: unset;
            display: none;
        }
        #services-pane .content-box {
            padding:unset;
        }
        #process-pane ul {
            width:90%;
        }
        #process-pane ul li {
            display: unset;
            grid-template-columns: unset;
        }
        #process-pane ul li div img {
            width:8vh;
            padding-top:2rem;
        }
        #process-pane ul li div {
            padding: unset !important;
        }
        #process-pane ul li div:nth-child(2) {
            padding-bottom: 3rem;
            border-bottom: 1px solid #000000;
        }
        #process-pane ul li:nth-child(6) div:nth-child(2) {
            padding-bottom: unset;
            border-bottom: unset;
        }
        #process-pane ul li div.approach-content p {
            padding-bottom:2rem;
        }
        #process-pane .title-block {
            padding-bottom: unset;
        }
        #testimonials.dark .contact-group {
            display: none;
        }
        #resume-pane a.cta-resume {
            position: unset;
        }
        #resume-pane a.cta-resume:link, #resume-pane a.cta-resume:active, #resume-pane a.cta-resume:visited {
            padding:12px 25px;
            width:100%;
        }
        #resume-pane .content-box h4 {
            font-size: 1.5rem;
        }
        div.c-list {
            display: unset;
        }
        ul.contact-info {
            display: flex;
            flex-direction: column;
            padding-bottom: 1rem;
        }
        ul.contact-info li:nth-child(2) {
            display: none;
        }
        #resume-pane .content-box { 
            width:90%;
        }
        #resume-pane .content-box h5 {
            margin-bottom:0.25rem;
        }
        .tab {
            width:100%;
            margin-bottom:5%;
        }
        .tabcontent, .tabcontent2, .tabcontent3, .tabcontent4 {
            float: unset;
            padding: unset;
            width: 90%;
            margin: 0 auto;
        }
        .tabcontent ul.company-header, .tabcontent2 ul.company-header, .tabcontent3 ul.company-header, .tabcontent4 ul.company-header {
            display: unset;
            font-size:1rem;
            line-height: unset;
        }
        .tabcontent ul.company-header li:nth-child(1), .tabcontent2 ul.company-header li:nth-child(1), .tabcontent3 ul.company-header li:nth-child(1), .tabcontent4 ul.company-header li:nth-child(1) {
            padding-bottom:0.5rem;
            border-bottom:1px solid #000000;
            margin-bottom:1rem;
        }
        #TabEdu3.tabcontent3 ul.company-header li {
            padding-bottom:unset;
            border-bottom:unset;
            margin-bottom:unset;
        }
        .tab button {
            background-color:#F8F8F8;
            border-bottom: 2px solid #ffffff;
            border-top: unset;
            border-left: unset;
            border-right:unset;
        }
        #resume-pane span p img.aine {
            height: unset;
            width:100%;
        }
        #myBtnContainer {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 90%;
            margin: 0 auto;
        }
        .btnX {
            margin:3% 2%;
            font-size: 1rem;
        }
        #p-projects {
            width: 100%;
        }
        #p-projects .p-project {
            border: 4px solid #ffffff;
            background-position: 17rem center;
        }
        #p-projects h4 {
            font-size: 1.75rem;
        }
        #p-projects p {
            font-size: 0.75rem;
        }
        #p-projects img.laptop {
            width:35%;
            top:65%;
        }
        #p-projects .p-details {
            width:65%;
            top: 8%;
            left: 7%;
        }
        #p-projects .p-project.v2 .p-details {
            left:30%;
        }
        #p-projects .p-project.v2 .p-details  a {
            float:right;
        }
        #p-projects .p-project.v2 {
            background-position: -10rem center;
        }
        #p-projects.v2 a:link, #p-projects.v2 a:active, #p-projects.v2 a:visited {
            float:right;
        }
        #p-projects .p-project.v2:nth-child(2), 
        #p-projects .p-project.v2:nth-child(8) {
            background-position: unset;
        }
        #p-projects .p-project.v2:nth-child(2) .p-details, 
        #p-projects .p-project.v2:nth-child(8) .p-details {
            width:100%;
            background-color: rgba(255,255,255,0.9);
            top: 25%;
            left: 0%;
            padding: 7% 10%;
        }
        #p-projects .p-project.v2:nth-child(2) .p-details a, 
        #p-projects .p-project.v2:nth-child(8) .p-details a {
            float:left;
        }
        #p-projects .p-project.v2:nth-child(9) .p-details {
            z-index: 9999;
        }
        #p-projects .p-project.v2:nth-child(9) .p-details a {
            background-color:rgba(255,255,255,0.25);
        }
        #p-projects img.print {
            width: 50%;
            top: 50%;
        }
        #p-projects .c-project ul {
            display: unset;
        }
        #p-projects .c-project ul li {
            margin-bottom: 2rem;
        }
        #p-projects .c-project ul.c-tags {
            display: block;
            padding: 2rem 0;
        }
        #p-projects hr {
            display: none;
        }
        #title-block ul.bread-crumbs.portfolio {
            font-size:1rem;
            width: 35%;
            left: 32%;
        }
        #portfolio-pane .title-block.w h3:first-child {
            padding-top:1rem;
        }
        #port-project h1 {
            font-size:0.5rem;
        }
        #port-project h2 {
            font-size: 2rem;
        }
        #port-project .title-block {
            padding:1rem 0rem;
        }
        #port-project .p-overview strong {
            font-size: 1rem;
        }
        #port-project .p-overview p {
            line-height: unset;
            font-size: 0.75rem;
        }
        #p-preview .content-box {
            width:80%;
        }
        #p-preview ul {
            padding-right: 2%;
        }
        #p-preview ul li {
            padding-bottom: 0;
        }
        .title-block.sub {
            width:90%;
            margin: 0 auto;
        }
        #mobile-project-view .content-box {
            flex-direction: column-reverse;
        }
        #mobile-project-view .content-box .carBox {
            width:100%;
        }
        #mobile-project-view .content-box .mobile-panel {
            width:100%;
        }
        #design-iterate {
            padding:0rem 0rem;
        }
        #design-iterate .content-box .title-block {
            width:90%;
            margin:0 auto;
        }
        #design-iterate .iterations .content-box {
            padding: 6% 0%;
        }
        .sketch-comp {
            width:90%;
            flex-direction: column;
            padding-bottom: unset;
        }
        .sketch-comp .sketch {
            width: 100%;
            padding-bottom:7%;
        }
        .sketch-container {
            height: 175px;
        }
        .sketch-comp p {
            margin-left: unset;
            width:90%;
            font-size: 1rem;
            line-height: unset;
        }
        .sst.modals {
            width:90%;
            padding-top:unset;
        }
        .title-block.sub h4 {
            font-size:1.5rem;
        }
        .title-block.sub p {
            font-size:1rem;
        }
        .sst.modals p img {
            width:100%;
        }
        #style-tile .img-asset, 
        #planning .img-asset {
            width:90%;
            margin: 0 auto;
        }
        #style-tile .img-asset img, 
        #planning .img-asset img {
            width:100%;
        }
        #personas {
            padding:2rem 0rem 4rem 0rem;
        }
        #personas .carBox {
            width:100%;
        }
        #reflection .content-box {
            width: 90%;
            padding:2rem 0rem;
        }
        #reflection .title-block.sub {
            width:100%;
        }
        #title-block ul.bread-crumbs.portfolio.project {
            font-size:1rem;
            width: 65%;
            left: 18%;
        }
        #mobile-project-view .mobile-panel h3 {
            font-size:1.75rem;
        }
        #mobile-project-view .content-box .mobile-panel {
            padding-top:0rem;
        }
        #overview.health .content-box {
            width:100%;
        }
        #planning {
            padding: 1rem 0rem;
        }
        #planning.health .goals {
            padding:0rem 0rem 2rem 0rem;
        }
        #planning.health .goals ul li {
            width:100%;
        }
        #planning.health .analysis {
            padding:0rem;
        }
        #planning.health .design-thinking {
            padding:0rem 0rem;
        }
        #planning.health .design-thinking img {
            width: 100%;
        }
        #branding .img-asset img {
            width:90%;
        }
        #branding.health {
            padding:2rem 0rem;
        }
        #branding.health .font-choices .content-box {
            width:100%;
            padding:2rem;
        }
        #branding.health .font-choices .content-box img {
            width:100%;
        }
        #branding.health .colors {
            width:90%;
        }
        #branding.health .colors ul {
            flex-direction: column;
        }
        #branding.health .colors ul li img {
            width:100%;
        }
        #branding.health .colors ul li:nth-child(2) img {
            width:30%;
        }
        #branding.health .font-choices {
            margin: 2rem 0rem;
        }
        #planning.health .wireframe {
            padding-bottom:12rem;
        }
        #planning.health .wireframe .w-info {
            width:100%;
            padding: 1rem 2rem;
        }
        #planning.health .goals ul {
            flex-direction: column;
            width: 85%;
            margin: 0 auto;
        }
        #planning.health .goals ul li {
            padding:0rem;
        }
        #planning.health .comp-1 h3 {
            font-size: 2rem;
        }
        #planning.health .analysis .health-comps {
            flex-direction: column;
        }
        #planning.health .health-comps .comp-1 {
            padding-top:1rem;
            padding-right: unset;
            width: 85%;
            margin: 0 auto;
        }
        #planning.health .health-comps .comp-2 {
            width:100%;
        }
        #planning.health .goals ul li img {
            width:100%;
        }
        #planning.health div.comp-icons {
            padding-top: 1rem;
        }
        #planning.health div.comp-icons img {
            width: 100%
        }
        #personas.health {
            padding: 2rem 0rem 4rem 0rem;
        }
        #overview.health .content-box h4 {
            width:50%;
        }
        #overview.health .content-box p {
            line-height: 1.25rem;
        }
        #overview.health .content-box {
            padding:2rem 0rem 0rem 0rem;
        }
        #p-preview.bts .content-box, 
        #p-preview.cre-camb .content-box, 
        #p-preview.cre-newbury .content-box, 
        #p-preview.landing .content-box {
            flex-direction: column-reverse;
        }
        #p-preview.bts .devices, 
        #p-preview.cre-cam .devices, 
        #p-preview.cre-newbury .devices, 
        #p-preview.landing .devices {
            width:80%;
        }
        #p-preview.bts ul, 
        #p-preview.cre-camb ul, 
        #p-preview.cre-newbury ul, 
        #p-preview.landing ul {
            padding-right: unset;
            margin-bottom: unset;
            width:80%; 
        }
        #p-preview.bts ul li.cta, 
        #p-preview.cre-camb ul li.cta, 
        #p-preview.cre-newbury ul li.cta, 
        #p-preview.landing ul li.cta {
            margin: 0 auto;
            padding-top:1rem;
        }
        #p-preview.bts ul li a:link, #p-preview.bts ul li a:active, #p-preview.bts ul li a:visited, 
        #p-preview.cre-camb ul li a:link, #p-preview.cre-camb ul li a:active, #p-preview.cre-camb ul li a:visited,
        #p-preview.cre-newbury ul li a:link, #p-preview.cre-newbury ul li a:active, #p-preview.cre-newbury ul li a:visited, 
        #p-preview.landing ul li a:link, #p-preview.cre-newbury ul li a:active, #p-preview.cre-newbury ul li a:visited {
            margin: 0 auto;
        }
        #p-preview.bts ul li.cta span, 
        #p-preview.cre-camb ul li.cta span,
        #p-preview.cre-newbury ul li.cta span, 
        #p-preview.landing ul li.cta span {
            margin: 0 auto;
        }
        #style-tile.bts ul {
            width:90%;
            margin: 0 auto;
            flex-direction: column;
        }
        #style-tile.bts ul li.guide img, 
        #style-tile.bts ul li:nth-child(2) img {
            width:100%;
        }
        #style-tile.bts ul li.guide {
            padding-bottom: 2rem;
        }
        #gallery {
            width:100%;
        }
        #thumbs {
            width: 15%;
            padding-right:1%;
        }
        #largeImage {
            width: 100%;
            float: right;
        }
        #panel {
            width: 85%;
            display: inline-block;
        }
        #design-comps.landing .image-asset {
            width: 90%;
            margin: 0 auto;
        }
        #planning.landing .video-block {
            width: 90%;
        }
        #e-campaigns.landing .image-asset img {
            width:100%;
        }
        #hiRes .image-asset {
            padding:2rem 0rem;
        }
        #hiRes .image-asset img {
            width: 80%;
        }
        #project-plan.edv .carousel-cell img {
            width: 100%;
        }
        #mktg-projects h2, #mktg-projects-2 h2, #mktg-projects-3 h2, #mktg-projects-4 h2 {
            text-align: center;
        }
        .logos {
            width: 90%;
            margin: 0 auto;
        }
        #mktg-projects h2, #mktg-projects-2 h2, #mktg-projects-3 h2, #mktg-projects-4 h2 {
            margin: 2rem 0 1rem 0;
        }
        #mktg-projects .logos ul {
            grid-template-columns: 1fr 1fr;
            grid-gap: 0.5rem;
        }
        #mktg-projects .logos ul li {
            height: 150px;
        }
        #mktg-projects .logos ul li img {
            width: 75%;
        }
        #mktg-projects-2 .brochures ul {
            flex-direction: column;
            padding: 0rem 0rem;
            width: 90%;
        }
        #mktg-projects-2 .brochures ul li {
            padding-bottom: 2rem;
        }
        #mktg-projects-2 .brochures ul p {
            font-size: 1.25rem;
            color:#9d9d9d;
        }
        #mktg-projects-3 {
            padding: 4rem 0;
        }
        #mktg-projects-4 .adverts {
            flex-direction: column;
        }
        #mktg-projects-4 .adverts {
            width:80%;
            margin: 0 auto;
        }
        #mktg-projects-4 .h-ads {
            padding: 2rem 0rem;
        }
        #mktg-projects-4 .h-ads ul li {
            padding-bottom: 1rem;
        }
        #mktg-projects-4 {
            padding: 2rem 0rem;
        }
        #mktg-projects-4 h2 {
            margin-top:0rem;
        }
        .isotope-masonry {
            width:90%;
            margin:0 auto;
        }
        .isotope-masonry .button-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 0.5rem;
        }
        .isotope-masonry .button {
            padding: 0.5rem 0rem;
            border-width: 1px;
            font-size: 0.9rem;
        }
        .tab button.active::after {
            content: "\f103";
        }
    }

    /* DEVICE SPECIFIC (common 375px) */
    @media (min-width: 320px) and (max-width: 413px) {
        /* iPhone 6/7/8 + similar devices */
        #navigation {
            width:90%;
        }
        .logo img {
            width:100%;
            display: block;
        }
        .logo {
            width:25%;
        }
        .nav-btn {
            top: 1.25rem;
            right: 1.25rem;
            width: 40px;
            height: 40px;
        }
        nav .logo img {
            width:70%;
        }
        .nav-btn i {
            width: 16px;
            margin-left: 12px;
        }
        .myContainer {
            width: 90%;
            margin: 0 auto;
        }
        .nav-btn i:nth-child(1) {
            margin-top: 14px;
        }
        .nav-wrapper ul {
            width: 85%;
        }
        .nav-wrapper ul li {
            padding: 1.25rem 0rem;
        }
        .myContainer {
            width: 90%;
            margin: 0 auto;
        }
        .content-box {
            width: 100%;
        }
        #hero {
            background-color: #f0f0f0;
            padding-top:30%;
        }
        #hero .greeting {
            width: 90%;
            left: 5%;
            margin: 0 auto;
            padding: 0% 0%;
        }
        #hero .greeting {
            z-index: 1;
            position: absolute;
            top: -65%;
        }
        .greeting h1 {
            font-size: 4.25vw;
            padding-left:1rem;
        }
        .greeting h2 {
            font-size: 7.5vw;
            padding: 1rem 1rem;
        }
        #txtType {
            border-right:solid #000000 7px;
        }
        #g-box img.mouse {
            width: 16%;
            top: 62%;
            left: -7%;
        }
        .greeting p {
            padding: 0em 0em;
            font-size: 3vw;
            line-height: unset;
            width: 60%;
            padding-top: 0%;
            padding-left: 5%;
            margin-top: 0.5rem;
        }
        .cta-hero {
            margin-top: 0;
        }
        .greeting a:link, .greeting a:visited, .greeting a:active {
            font-size: 14px;
            padding: 14px 10px;
        }
        #hero img.pen {
            width: 51%;
            right:-35px;
        }
        #about-me .content-box {
            font-size: 0.75rem;
            flex-direction: column;
            padding: 3rem 0rem;
        }
        .about-1, .about-2 {
            padding: 0rem 0rem;
            width: 80%;
        }
        .about-1 p {
            font-size: 1rem;
            line-height: unset;
        }
        .about-2 p:first-child {
            line-height: 1.25rem;
        }
        #wid {
            padding: 2rem 0rem 0rem 0rem;
        }
        #wid ul.bkgrd {
            width:100%;
            left:0%;
        }
        .title-block h3 {
            font-size: 1.5rem;
        }
        .title-block p {
            font-size:1rem;
            width:80%;
        }
        #wid ol.flickity-page-dots {
            width: 20%;
            bottom: -25%;
            left: 40%;
        }
        #wid ul.bkgrd {
            bottom: 93%;
        }
        #wid ul.bkgrd li.carousel-cell {
            padding: 1.25rem;
            height: 175px;
        }
        #wid ul.bkgrd img {
            height:60%;
        }
        #wid ul.bkgrd h5 {
            font-size: 0.75rem;
            text-align: center;
        }
        #wid ul.bkgrd p {
            font-size: 0.675rem;
            line-height: unset;
            display: none;
        }
        #wid .experience {
            margin-top: 35%;
            padding: 10rem 0rem 3rem 0rem;
        }
        .exp-1 li {
            display: block;
            padding-bottom:1rem;
        }
        #wid .exp-1 {
            width:100%;
        }
        #wid .exp-2 {
            width:50%;
        }
        #wid .exp-1 p {
            font-size: 0.75rem;
            line-height: .75rem;
        }
        #wid .exp-1 h4 {
            font-size:1.25rem;
        }
        .exp-2 img {
            width:100%;
        }
        #wid .exp-group {
            padding: 2rem;
            flex-direction: column;
        }
        ul.charts {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            padding: 2rem 2rem
        }
        ul.technology {
            width:75%;
        }
        ul.technology {
            padding:0rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 0.5rem;
            justify-content: center;
            align-items: center;
        }
        ul.technology img {
            width:35%;
        }
        #featured {
            padding: 4rem 0rem;
        }
        #featured .content-box .title-block.w {
            padding-bottom: unset;
        }
        #featured .projects {
            grid-template-columns: 1fr;
        }
        #featured p.btn {
            padding-top: 3rem;
        }
        .project h4 {
            font-size: 1rem;
            margin: 0rem 0rem 0rem 0rem;
        }
        .project p {
            font-size: 0.75rem;
        }
        .projects .project {
            height: 15rem;
            border: unset;
        }
        .projects .project:hover {
            border:unset;
        }
        .projects .proj-block {
            padding:0.75rem 0rem;
        }
        #testimonials {
            padding: 2rem 0rem 0rem 0rem;
        }
        #testimonials ul {
            flex-direction: column;
            bottom: unset;
            position: unset;
            width:100%;
        }
        #testimonials ul li {
            padding: 1.5rem;
            width: 100%;
            border-bottom:2px solid #ffffff;
        }
        #testimonials p:first-child {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        #testimonials .profile img {
            display: none;
        }
        #testimonials .profile p {
            line-height: 1rem;
            font-size: 0.75rem;
        }
        #testimonials .contact-group {
            flex-direction: column;
            padding: unset;
            width: 100%;
            margin: 0 auto;
            padding:2rem;
        }
        .contact-1 {
            width:95%;
            padding-right: unset;
        }
        .contact-2 {
            width: 95%;
            padding: unset;
            padding:1rem;
        }
        .contact-group h4 {
            font-size: 1.75rem;
            font-weight: 500;
        }
        .cForm input[type="text"], .cForm input[type="email"], .cForm input[type="tel"], .cForm input[type="subject"], .cForm textarea {
            width:95.5%;
        }
        .parallax {
            background-position: 95% top;
        }
        .parallax, .parallax .parallax-solid {
            height:100vh;
        }
        .parallax .content-box {
            top:25%;
        }
        .parallax .content-box div {
            width: 75%;
        }
        .parallax .content-box h3 {
            font-size: 1.5rem;
            line-height: 2rem;
        }
        .parallax .content-box p {
            font-size: 0.75rem;
            line-height: 1rem;
        }
        #latest-blog {
            padding: 2rem 0rem;
        }
        ul.b-posts {
            flex-direction: column;
        }
        ul.b-posts li {
            width:100%;
            padding-bottom: 2rem;
        }
        ul.b-posts p {
            font-size:0.8rem;
        }
        ul.b-posts li:nth-child(even) {
            margin: unset;
        }
        ul.b-posts .b-tags p {
            padding:5px 10px;
        }
        .b-hero {
            height:200px;
        }
        #latest-blog .content-box {
            width:90%;
        }
        #latest-blog .title-block.w {
            padding-bottom: unset;
        }
        #footer {
            padding: unset;
        }
        #footer .content-box {
            width:100%;
            padding:1rem;
        }
        #footer .f-top {
            flex-direction: column;
            justify-content: unset;
        }
        #footer .f-top a img {
            padding-bottom: 1rem;
        }
        #footer ul, #footer div.f-menu {
            display: inline-block;
        }
        #footer ul li {
            padding-bottom: 0.25rem;
        }
        #footer p {
            font-size: 0.75rem;
            text-align: center;
        }
        #hero.secondary {
            padding-top:0%;
        }
        #hero.secondary #greeting {
            width:80%;
            top: 10%;
        }
        #hero.secondary #greeting h1 {
            font-size:1rem;
        }
        #hero.secondary #greeting h2 {
            font-size:2rem;
        }
        #hero.secondary #greeting p {
            font-size:0.75rem;
            line-height: unset;
            padding-left:50%;
            margin-top:0.25rem;
        }
        #hero.secondary .content-box img {
            padding-top: 30%;
        }
        #title-block h1 {
            padding: unset;
            font-size:3rem;
        }
        #title-block ul.bread-crumbs {
            top: 35%;
            left: 30%;
            width: 40%
        }
        #hero.secondary .a-doodle {
            width:10%;
            right: 4%;
            bottom:7%;
        }
        #about-pane .content-box, #resume-pane .content-box {
            width:85%;
        }
        #about-pane .cta-resume span {
            font-size:4rem;
        }
        .cta-resume .g-resume img {
            width: 1.5rem;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            font-size: 1.5rem;
            top:30%;
            left:20%;
        }
        #about-facts div.fun-facts {
            width:100%;
        }
        #about-facts div.fun-facts {
            position: relative;
        }
        #about-facts .content-box img.m-phone {
            width: 30%;
            position: absolute;
            top: -6%;
            right: 72%;
        }
        #about-facts .facts {
            text-align: left;
        }
        #about-facts .facts h4 {
            font-size: 2rem;
            margin: 0rem 0rem 0rem 6.8rem;
        }
        #about-facts .facts p {
            font-size: 1.25rem;
            padding-left: 32%;
        }
        #about-facts ul.hobbies li {
            font-size:1rem;
        }
        #about-facts ul.hobbies li:nth-child(2) {
            display: unset;
        }
        #about-facts ul.hobbies li:nth-child(2) img {
            width:60%;
        }
        #services-pane ul.bkgrd {
            grid-template-columns: 1fr 1fr;
        }
        #services-pane ul.bkgrd img {
            height:50%;
            padding-bottom: unset;
        }
        #services-pane ul.bkgrd {
            width:95%;
            grid-gap:0.5rem;
            padding: unset;
        }
        #services-pane ul.bkgrd li {
            padding:1rem;
        }
        #services-pane ul.bkgrd h4 {
            font-size: 1rem;
            text-align: center;
        }
        #services-pane ul.bkgrd p {
            font-size: 0.6rem;
            line-height: unset;
            display: none;
        }
        #services-pane .content-box {
            padding:unset;
        }
        #process-pane ul {
            width:90%;
        }
        #process-pane ul li {
            display: unset;
            grid-template-columns: unset;
        }
        #process-pane ul li div img {
            width:8vh;
            padding-top:2rem;
        }
        #process-pane ul li div {
            padding: unset !important;
        }
        #process-pane ul li div:nth-child(2) {
            padding-bottom: 3rem;
            border-bottom: 1px solid #000000;
        }
        #process-pane ul li:nth-child(6) div:nth-child(2) {
            padding-bottom: unset;
            border-bottom: unset;
        }
        #process-pane ul li div.approach-content p {
            padding-bottom:2rem;
        }
        #process-pane .title-block {
            padding-bottom: unset;
        }
        #testimonials.dark .contact-group {
            display: none;
        }
        #resume-pane a.cta-resume {
            position: unset;
        }
        #resume-pane a.cta-resume:link, #resume-pane a.cta-resume:active, #resume-pane a.cta-resume:visited {
            padding:12px 25px;
            width:100%;
        }
        #resume-pane .content-box h4 {
            font-size: 1.5rem;
        }
        div.c-list {
            display: unset;
        }
        ul.contact-info {
            display: flex;
            flex-direction: column;
            padding-bottom: 1rem;
        }
        ul.contact-info li:nth-child(2) {
            display: none;
        }
        #resume-pane .content-box { 
            width:90%;
        }
        .tab {
            width:100%;
            margin-bottom:10%;
        }
        .tabcontent, .tabcontent2, .tabcontent3, .tabcontent4 {
            float: unset;
            padding: unset;
            width: 90%;
            margin: 0 auto;
        }
        .tabcontent ul.company-header, .tabcontent2 ul.company-header, .tabcontent3 ul.company-header, .tabcontent4 ul.company-header {
            display: unset;
            font-size:1rem;
            line-height: unset;
        }
        .tabcontent ul.company-header li:nth-child(1), .tabcontent2 ul.company-header li:nth-child(1), .tabcontent3 ul.company-header li:nth-child(1), .tabcontent4 ul.company-header li:nth-child(1) {
            padding-bottom:0.5rem;
            border-bottom:1px solid #000000;
            margin-bottom:1rem;
        }
        #TabEdu3.tabcontent3 ul.company-header li {
            padding-bottom:unset;
            border-bottom:unset;
            margin-bottom:unset;
        }
        .tab button {
            background-color:#F8F8F8;
            border-bottom: 2px solid #ffffff;
            border-top: unset;
            border-left: unset;
            border-right:unset;
        }
        #resume-pane span p img.aine {
            height: unset;
            width:100%;
        }
        #myBtnContainer {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 90%;
            margin: 0 auto;
        }
        .btnX {
            margin:3% 2%;
            font-size: 1rem;
        }
        #p-projects {
            width: 100%;
        }
        #p-projects .p-project {
            border: 4px solid #ffffff;
            background-position: 17rem center;
        }
        #p-projects h4 {
            font-size: 1.75rem;
        }
        #p-projects p {
            font-size: 0.75rem;
        }
        #p-projects img.laptop {
            width:35%;
            top:65%;
        }
        #p-projects .p-details {
            width:65%;
            top: 8%;
            left: 7%;
        }
        #p-projects .p-project.v2 .p-details {
            left:30%;
        }
        #p-projects .p-project.v2 .p-details  a {
            float:right;
        }
        #p-projects .p-project.v2 {
            background-position: -10rem center;
        }
        #p-projects.v2 a:link, #p-projects.v2 a:active, #p-projects.v2 a:visited {
            float:right;
        }
        #p-projects .p-project.v2:nth-child(2), 
        #p-projects .p-project.v2:nth-child(8) {
            background-position: unset;
        }
        #p-projects .p-project.v2:nth-child(2) .p-details, 
        #p-projects .p-project.v2:nth-child(8) .p-details {
            width:100%;
            background-color: rgba(255,255,255,0.9);
            top: 25%;
            left: 0%;
            padding: 7% 10%;
        }
        #p-projects .p-project.v2:nth-child(2) .p-details a, 
        #p-projects .p-project.v2:nth-child(8) .p-details a {
            float:left;
        }
        #p-projects .p-project.v2:nth-child(9) .p-details {
            z-index: 9999;
        }
        #p-projects .p-project.v2:nth-child(9) .p-details a {
            background-color:rgba(255,255,255,0.25);
        }
        #p-projects img.print {
            width: 50%;
            top: 50%;
        }
        #p-projects .c-project ul {
            display: unset;
        }
        #p-projects .c-project ul li {
            margin-bottom: 2rem;
        }
        #p-projects .c-project ul.c-tags {
            display: block;
            padding: 2rem 0;
        }
        #p-projects hr {
            display: none;
        }
        #title-block ul.bread-crumbs.portfolio {
            font-size:1rem;
            width: 35%;
            left: 32%;
        }
        #portfolio-pane .title-block.w h3:first-child {
            padding-top:1rem;
        }
        #port-project h1 {
            font-size:0.5rem;
        }
        #port-project h2 {
            font-size: 2rem;
        }
        #port-project .title-block {
            padding:1rem 0rem;
        }
        #port-project .p-overview strong {
            font-size: 1rem;
        }
        #port-project .p-overview p {
            line-height: unset;
            font-size: 0.75rem;
        }
        #p-preview .content-box {
            width:80%;
        }
        #p-preview ul {
            padding-right: 2%;
        }
        #p-preview ul li {
            padding-bottom: 0;
        }
        .title-block.sub {
            width:90%;
            margin: 0 auto;
        }
        #mobile-project-view .content-box {
            flex-direction: column-reverse;
        }
        #mobile-project-view .content-box .carBox {
            width:100%;
        }
        #mobile-project-view .content-box .mobile-panel {
            width:100%;
        }
        #design-iterate {
            padding:0rem 0rem;
        }
        #design-iterate .content-box .title-block {
            width:90%;
            margin:0 auto;
        }
        #design-iterate .iterations .content-box {
            padding: 6% 0%;
        }
        .sketch-comp {
            width:90%;
            flex-direction: column;
            padding-bottom: unset;
        }
        .sketch-comp .sketch {
            width: 100%;
            padding-bottom:7%;
        }
        .sketch-container {
            height: 175px;
        }
        .sketch-comp p {
            margin-left: unset;
            width:90%;
            font-size: 1rem;
            line-height: unset;
        }
        .sst.modals {
            width:90%;
            padding-top:unset;
        }
        .title-block.sub h4 {
            font-size:1.5rem;
        }
        .title-block.sub p {
            font-size:1rem;
        }
        .sst.modals p img {
            width:100%;
        }
        #style-tile .img-asset, 
        #planning .img-asset {
            width:90%;
            margin: 0 auto;
        }
        #style-tile .img-asset img, 
        #planning .img-asset img {
            width:100%;
        }
        #personas {
            padding:2rem 0rem 4rem 0rem;
        }
        #personas .carBox {
            width:100%;
        }
        #reflection .content-box {
            width: 90%;
            padding:2rem 0rem;
        }
        #reflection .title-block.sub {
            width:100%;
        }
        #title-block ul.bread-crumbs.portfolio.project {
            font-size:1rem;
            width: 65%;
            left: 18%;
        }
        #mobile-project-view .mobile-panel h3 {
            font-size:1.75rem;
        }
        #mobile-project-view .content-box .mobile-panel {
            padding-top:0rem;
        }
        #overview.health .content-box {
            width:100%;
        }
        #planning {
            padding: 1rem 0rem;
        }
        #planning.health .goals {
            padding:0rem 0rem 2rem 0rem;
        }
        #planning.health .goals ul li {
            width:100%;
        }
        #planning.health .analysis {
            padding:0rem;
        }
        #planning.health .design-thinking {
            padding:0rem 0rem;
        }
        #planning.health .design-thinking img {
            width: 100%;
        }
        #branding .img-asset img {
            width:90%;
        }
        #branding.health {
            padding:2rem 0rem;
        }
        #branding.health .font-choices .content-box {
            width:100%;
            padding:2rem;
        }
        #branding.health .font-choices .content-box img {
            width:100%;
        }
        #branding.health .colors {
            width:90%;
        }
        #branding.health .colors ul {
            flex-direction: column;
        }
        #branding.health .colors ul li img {
            width:100%;
        }
        #branding.health .colors ul li:nth-child(2) img {
            width:30%;
        }
        #branding.health .font-choices {
            margin: 2rem 0rem;
        }
        #planning.health .wireframe {
            padding-bottom:12rem;
        }
        #planning.health .wireframe .w-info {
            width:100%;
            padding: 1rem 2rem;
        }
        #planning.health .goals ul {
            flex-direction: column;
            width: 85%;
            margin: 0 auto;
        }
        #planning.health .goals ul li {
            padding:0rem;
        }
        #planning.health .comp-1 h3 {
            font-size: 2rem;
        }
        #planning.health .analysis .health-comps {
            flex-direction: column;
        }
        #planning.health .health-comps .comp-1 {
            padding-top:1rem;
            padding-right: unset;
            width: 85%;
            margin: 0 auto;
        }
        #planning.health .health-comps .comp-2 {
            width:100%;
        }
        #planning.health .goals ul li img {
            width:100%;
        }
        #planning.health div.comp-icons {
            padding-top: 1rem;
        }
        #planning.health div.comp-icons img {
            width: 100%
        }
        #personas.health {
            padding: 2rem 0rem 4rem 0rem;
        }
        #overview.health .content-box h4 {
            width:50%;
        }
        #overview.health .content-box p {
            line-height: 1.25rem;
        }
        #overview.health .content-box {
            padding:2rem 0rem 0rem 0rem;
        }
        #p-preview.bts .content-box, 
        #p-preview.cre-camb .content-box, 
        #p-preview.cre-newbury .content-box, 
        #p-preview.landing .content-box {
            flex-direction: column-reverse;
        }
        #p-preview.bts .devices, 
        #p-preview.cre-cam .devices, 
        #p-preview.cre-newbury .devices, 
        #p-preview.landing .devices {
            width:80%;
        }
        #p-preview.bts ul, 
        #p-preview.cre-camb ul, 
        #p-preview.cre-newbury ul, 
        #p-preview.landing ul {
            padding-right: unset;
            margin-bottom: unset;
            width:80%; 
        }
        #p-preview.bts ul li.cta, 
        #p-preview.cre-camb ul li.cta, 
        #p-preview.cre-newbury ul li.cta, 
        #p-preview.landing ul li.cta {
            margin: 0 auto;
            padding-top:1rem;
        }
        #p-preview.bts ul li a:link, #p-preview.bts ul li a:active, #p-preview.bts ul li a:visited, 
        #p-preview.cre-camb ul li a:link, #p-preview.cre-camb ul li a:active, #p-preview.cre-camb ul li a:visited,
        #p-preview.cre-newbury ul li a:link, #p-preview.cre-newbury ul li a:active, #p-preview.cre-newbury ul li a:visited, 
        #p-preview.landing ul li a:link, #p-preview.cre-newbury ul li a:active, #p-preview.cre-newbury ul li a:visited {
            margin: 0 auto;
        }
        #p-preview.bts ul li.cta span, 
        #p-preview.cre-camb ul li.cta span,
        #p-preview.cre-newbury ul li.cta span, 
        #p-preview.landing ul li.cta span {
            margin: 0 auto;
        }
        #style-tile.bts ul {
            width:90%;
            margin: 0 auto;
            flex-direction: column;
        }
        #style-tile.bts ul li.guide img, 
        #style-tile.bts ul li:nth-child(2) img {
            width:100%;
        }
        #style-tile.bts ul li.guide {
            padding-bottom: 2rem;
        }
        #gallery {
            width:100%;
        }
        #thumbs {
            width: 15%;
            padding-right:1%;
        }
        #largeImage {
            width: 100%;
            float: right;
        }
        #panel {
            width: 85%;
            display: inline-block;
        }
        #design-comps.landing .image-asset {
            width: 90%;
            margin: 0 auto;
        }
        #planning.landing .video-block {
            width: 90%;
        }
        #e-campaigns.landing .image-asset img {
            width:100%;
        }
        #hiRes .image-asset {
            padding:2rem 0rem;
        }
        #hiRes .image-asset img {
            width: 80%;
        }
        #project-plan.edv .carousel-cell img {
            width: 100%;
        }
        #mktg-projects h2, #mktg-projects-2 h2, #mktg-projects-3 h2, #mktg-projects-4 h2 {
            text-align: center;
        }
        .logos {
            width: 90%;
            margin: 0 auto;
        }
        #mktg-projects h2, #mktg-projects-2 h2, #mktg-projects-3 h2, #mktg-projects-4 h2 {
            margin: 2rem 0 1rem 0;
        }
        #mktg-projects .logos ul {
            grid-template-columns: 1fr 1fr;
            grid-gap: 0.5rem;
        }
        #mktg-projects .logos ul li {
            height: 150px;
        }
        #mktg-projects .logos ul li img {
            width: 75%;
        }
        #mktg-projects-2 .brochures ul {
            flex-direction: column;
            padding: 0rem 0rem;
            width: 90%;
        }
        #mktg-projects-2 .brochures ul li {
            padding-bottom: 2rem;
        }
        #mktg-projects-2 .brochures ul p {
            font-size: 1.25rem;
            color:#9d9d9d;
        }
        #mktg-projects-3 {
            padding: 4rem 0;
        }
        #mktg-projects-4 .adverts {
            flex-direction: column;
        }
        #mktg-projects-4 .adverts {
            width:80%;
            margin: 0 auto;
        }
        #mktg-projects-4 .h-ads {
            padding: 2rem 0rem;
        }
        #mktg-projects-4 .h-ads ul li {
            padding-bottom: 1rem;
        }
        #mktg-projects-4 {
            padding: 2rem 0rem;
        }
        #mktg-projects-4 h2 {
            margin-top:0rem;
        }
        .isotope-masonry {
            width:90%;
            margin:0 auto;
        }
        .isotope-masonry .button-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 0.5rem;
        }
        .isotope-masonry .button {
            padding: 0.5rem 0rem;
            border-width: 1px;
            font-size: 0.9rem;
        }
        .tab button.active::after {
            content: "\f103";
        }
    }
    
    /* DEVICE SPECIFIC (320px) */
    @media (max-width: 320px) {
        #hero.secondary #greeting h1 {
            font-size: 0.75rem;
        }
        #hero.secondary #greeting h2 {
            font-size: 1.5rem;
        }
        .projects .project {
            border: unset;
        }
        .projects .project:hover {
            border:unset;
        }
        #about-pane .content-box p {
            line-height: 1rem;
            font-size: 0.75rem;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            left: 15%;
        }
        #about-facts .facts h4 {
            font-size: 1.5rem;
        }
        #about-facts .facts p {
            font-size: 0.8rem;
            padding-left: 40%;
        }
        ul.dev-socials i {
            font-size: 1rem;
        }
        .btnX {
            font-size: 0.75rem;
            padding: 0.5rem 0rem;
        }
        #p-projects .p-project {
            background-position: 15rem center;
        }
        #p-projects .p-project.v2 {
            background-position: -13rem center;
        }
        #p-projects img.laptop {
            top: 8%;
            right:3%;
        }
        #p-projects .p-project.v2 img.laptop {
            left: 3%;
        }
        #p-projects .p-tag {
            font-size: 0.75rem;
        }
        #p-projects h4 {
            font-size: 1.25rem;
        }
        #p-projects p {
            font-size: 0.65rem;
            margin-bottom: 0rem;
        }
        #p-projects a:link, #p-projects a:active, #p-projects a:visited {
            font-size: 0.75rem;
            padding: 0.5rem 1rem;
            border: 2px solid #000000;
        }
        #p-projects .p-details {
            top: 33%;
        }
        #p-projects img.print {
            width: 45%;
            top: 4%;
        }
        #p-projects .p-project.v2 .p-details a {
            float: left;
        }
    }

    @media only screen and (min-width: 2561px) {
        #navigation {
            padding: 2rem 0rem;
        }
        .logo img {
            width: 8vw;
        }
        nav ul li a {
            font-size:0.75vw;
        }
        /* target screens larger than 2560px */
        #hero .greeting {
            width: 42%;
        }
        .greeting h2 {
            font-size:2.6vw;
        }
        .greeting p {
            font-size: 1vw;
            line-height: 1.75vw;
        }
        #g-box img.mouse {
            top: 70%;
            left: -5.5%;
        }
        #hero img.pen {
            width: 45%;
            right: -4rem;
            top: 0.5rem;
        }
        #hero.secondary #greeting p {
            font-size: 1vw;
            line-height: 1.25vw;
        }
        #txtType {
            border-right: 15px solid #000000;
        }
        .greeting a:link, .greeting a:visited, .greeting a:active {
            font-size: 0.75vw;
            padding: 1.5rem;
            margin-left:2.5rem;
            text-transform: uppercase;
        }
        #about-me .about-1 h3 {
            font-size: 0.75vw;
            line-height: 2.25vw;
        }
        .about-1, .about-2 {
            padding: 6rem 8rem;
        }
        .about-1 p {
            font-size: 2.25rem;
            line-height: 3.25rem;
            margin-top: 0.25rem;
        }
        #about-me .about-2 p {
            font-size: 0.75vw;
            line-height: 1.25vw;
        }
        .about-2 ul li i {
            font-size: 3rem;
        }
        .tag {
            font-size: 0.5vw;
        }
        #wid .experience {
            margin-top: 16%;
            padding: 24rem 5rem 5rem 5rem;
        }
        #wid .exp-1 h3 {
            font-size: 0.75vw;
            line-height: 1.25vw;
        }
        #wid .exp-1 h4 {
            font-size: 1.25vw;
        }
        #wid .exp-1 p, .exp-1 a:link, .exp-1 a:active, .exp-1 a:visited {
            font-size: 0.75vw;
            line-height: 1.25vw;
        }
        #wid .exp-1 ul li img {
            width:1.25rem;
        }
        #wid ul.bkgrd h5 {
            font-size: 1.25vw;
        }
        .exp-2 img {
            width:85%;
        }
        #wid ul.bkgrd p {
            font-size:0.8vw;
            line-height: 1.125vw;
        }
        #wid .carousel-cell {
            height: 18vw;
        }
        #wid ul.charts {
            font-size:0.8vw;
        }
        #wid ol.flickity-page-dots {
            width:7%;
        }
        #wid ol.flickity-page-dots li.dot {
            width: 1.25rem;
            height: 1.25rem;
        }
        .progress {
            padding: 6px;
        }
        .progress-bar {
            height: 20px;
        }
        .title-block h3 {
            font-size: 1.5vw;
        }
        .title-block.sub h3 {
            font-size:0.75vw;
            line-height: 1.25vw;
        }
        .title-block.sub h4,
        #mobile-project-view .mobile-panel h3 {
            font-size:1.5vw;
        }
        .title-block p {
            font-size: 0.75vw;
            line-height: 1vw;
        }
        .projects .project {
            height: 25rem;
        }
        .project h4 {
            font-size: 1.125vw;
        }
        .project p {
            font-size: 0.75vw;
        }
        #featured a.btn-cta-2:link, #featured a.btn-cta-2:active, #featured a.btn-cta-2:visited {
            font-size: 0.75vw;
        }
        .parallax, 
        .parallax .parallax-solid {
            height:100vh;
        }
        .parallax .content-box {
            top:25%;
        }        
        .parallax .content-box h3 {
            font-size: 2.25vw;
            line-height: 2.75vw;
        }
        .parallax p {
            font-size: 1vw;
            line-height: 1.5vw;
        }
        .parallax a:link, .parallax a:active, .parallax a:visited {
            font-size:0.75vw;
        }
        #testimonials .contact-group {
            margin-top: 10.5%;
        } 
        #testimonials.dark .contact-group {
            margin-top:6%;
        }
        #testimonials p:first-child, 
        #testimonials .profile p {
            font-size:0.65vw;
            line-height: 1vw;
            margin-top: 0rem;
        }
        #testimonials .profile img {
            border: 7px solid #ffffff;
            width: 25%;
            height: 25%;
        }
        .contact-group h3 {
            font-size: 0.75vw;
        }
        .contact-group h4 {
            font-size:1.75vw;
        }
        .contact-group p {
            font-size: 0.75vw;
            line-height: 1.125vw;
        }
        .cForm input[type="text"], .cForm input[type="email"], .cForm input[type="tel"], .cForm input[type="subject"], .cForm textarea {
            font-size:0.75vw;
        }
        ul.b-posts .b-tags p {
            font-size:0.5vw;
        }
        ul.b-posts h3 {
            font-size: 1vw;
            margin-top: 0.25rem;
        }
        ul.b-posts p {
            font-size: 0.65vw;
        }
        ul.b-posts a:link, ul.b-posts a:active, ul.b-posts a:visited {
            font-size: 0.75vw;
        }
        ul.b-posts img.bullet {
            width: 1.25rem;
            margin-right: 0.25rem;
        }
        #footer ul {
            font-size:0.75vw;
        }
        #title-block ul.bread-crumbs img {
            width: 1.75rem;
        }
        #hero.secondary #greeting h1 {
            font-size:1vw;
        }
        #hero.secondary #greeting h2 {
            font-size: 2.3vw;
        }
        #hero.secondary #greeting p {
            font-size: 1vw;
            line-height: 1.75vw;
        }
        #hero.secondary .a-doodle {
            bottom:5%;
        }
        #testimonials.dark .contact-group {
            margin-top: 7%;
        }
        #process-pane ul {
            width:70%;
        }
        div.approach-content h5 {
            font-size:2vw;
        }
        #process-pane ul li div.approach-content p {
            font-size: 0.75vw;
            line-height: 1.5rem;
        }
        #services-pane ul.bkgrd h4 {
            font-size:1.25vw;
        }
        #services-pane ul.bkgrd p {
            font-size: 0.75vw;
            line-height: 1vw;
        }
        #about-pane .content-box p {
            font-size:0.75vw;
            line-height:1.25vw;
        }
        #about-pane .content-box h3, #resume-pane .content-box h3 {
            font-size:0.75vw;
        }
        #about-pane .content-box h4, #resume-pane .content-box h4 {
            font-size:1.5vw;
        }
        #resume-pane .content-box {
            font-size:0.75vw;
            line-height: 1.25vw;
        }
        #resume-pane ul li .cursive {
            font-size:1.25vw;
        }
        #resume-pane ul.dev-socials i {
            font-size: 0.75vw;
            padding: 0.5vw 0.75vw;
        }
        #resume-pane span p img.aine {
            height: 3.5rem;
        }
        .tabcontent ul.company-header, .tabcontent2 ul.company-header, .tabcontent3 ul.company-header, .tabcontent4 ul.company-header {
            font-size: 0.75vw;
            line-height: 1.25vw;
        }
        .btnX {
            font-size: 0.75vw;
            margin: 0% 0.5%;
        }
        #p-projects .p-tag {
            font-size: 0.75vw;
        }
        #p-projects .p-details {
            width: 60%;
            top: 18%;
        }
        #p-projects h4 {
            font-size: 1.75vw;
        }
        #p-projects p {
            font-size: 0.75vw;
            line-height: 1vw;
        }
        #p-projects a:link, #p-projects a:active, #p-projects a:visited {
            font-size: 0.65vw;
            padding: 0.75rem 1.5rem;
        }
        #port-project .p-overview strong {
            font-size:1.25vw;
        }
        #port-project .p-overview p {
            font-size: 0.75vw;
            line-height: 1.25vw;
        }
        #p-preview .content-box {
            width:50%;
        }
        #p-preview .content-box ul {
            font-size:0.75vw;
            width:40%;
        }
        #p-preview ul li a:link, #p-preview ul li a:active, #p-preview ul li a:visited, 
        #p-preview ul li.cta span {
            width:60%;
        }
        #p-preview ul li.cta span {
            font-size: 0.55vw;
            line-height: normal;
        }
        #p-preview .content-box .devices {
            width:60%;
            padding-left:4rem;
        }
        #mobile-project-view .content-box .mobile-panel {
            font-size:0.5vw;
            line-height: 0.75vw;
        }
        .sketch-comp p {
            font-size: 0.6vw;
            line-height: 1.25vw;
        }
        #reflection p,
        #reflection ul {
            font-size: 0.75vw;
            line-height: 1.25vw;
        }
        .sketch-container {
            height:250px;
        }
        #design-comps.health .content-box p {
            line-height: 1.25vw;
        }
        .font-choices p {
            font-size: 1vw;
        }
        #planning.health .wireframe .w-info h3, 
        #planning.health .goals ul li h3 {
            font-size:1.5vw;
        } 
        #planning.health .wireframe p, 
        #planning.health .goals p, 
        #planning.health .analysis p,
        #branding.health p {
            font-size: 0.75vw;
            line-height: 1.125vw;
        }
        #planning.health .goals ul li:nth-child(2) h3 {
            font-size:1vw;
        }
        #mktg-projects h2, #mktg-projects-2 h2, #mktg-projects-3 h2, #mktg-projects-4 h2 {
            font-size: 2.5vw;
        }
        #mktg-projects-2 .brochures ul p {
            color:#333333;
        }
        #resume-pane a.cta-resume:link, #resume-pane a.cta-resume:active, #resume-pane a.cta-resume:visited {
            font-size:0.75vw;
        }
        #about-pane .g-resume a:link, #about-pane .g-resume a:active, #about-pane .g-resume a:visited {
            left:42.5%;
        }
        .cForm button {
            font-size: 0.75vw;
        }
        #resume-pane .content-box {
            width:100%;
        }
        #motion.cre-newbury p {
            font-size: 0.65vw;
        }
        #motion.cre-newbury ul li {
            padding-bottom: 10rem;
        }
    }

    /* High-DPI (Retina) Displays */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        /* rules for high-DPI displays */
    }