* {
    font-size: 100%;
    line-height: 140%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box
}

html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent
}

nav ul
li {
    list-style:none !important
}

img {
    height: auto;
    max-width:100%
}

::-moz-selection {
    background: #35b6e1;
    color:#fff
}

::selection {
    background: #35b6e1;
    color:#fff
}

body {
    font-family: Cambria, Georgia, serif;
    background: #f1f4f5;
    font-weight: 300;
    font-size: 16px;
    line-height: 18px;
    color: #4c4c4c;
    -webkit-font-smoothing: antialiased;
    overflow-y: scroll;
    overflow-x: scroll;
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%
}
body {
    /* background-color: #f9f9f6; */
    background-image:
        radial-gradient(
            rgba(120, 110, 90, 0.07) 0.6px,
            transparent 0.7px
        );
    background-size: 5px 5px;
}

ol, ul {
    list-style: disc inside;
    margin: 0
    0 0 0;
    padding:0
}

blockquote, q {
    quotes: none;
    font-style:normal
}

p {
    margin: 0
    0 20px 0;
    padding: 0;
    font-size: 17px;
    font-weight: 300;
    font-family: 'Lato', 'Gill Sans', sans-serif;
    orphans: 2;
    line-height:1.6em
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', 'Gill Sans', sans-serif;
    margin: 0
    0 20px 0;
    padding: 0;
    font-weight: 900;
    color: #20b8f1;
    orphans:2
}

h1 {
    font-size:180%
}

h2 {
    font-size:165%
}

h3 {
    font-size:145%
}

h4 {
    font-size:130%
}

h5 {
    font-size:115%
}

h6 {
    font-size:100%
}

html {
    margin: 0;
    height: 100%;
    font-family: 'Lato', 'Gill Sans', sans-serif
}

.strong {
    font-size: .8em;
    display: block;
    font-style: normal !important;
    margin-top:6px
}

.wrapper {
    background: none;
    min-height: 768px;
    height: 100%;
    margin: 0;
    width: 100%;
    /* transition:all .66s ease-in-out */
}

a {
    font-size: inherit;
    text-decoration: none;
    font-family:inherit
}

a:link {
    color:#059CEF
}

a:visited {
    color:#059CEF
}

a:is(:hover,:focus-visible) {
    color:#F0F
}

a:focus-visible {
    outline: 3px solid #20557B;
    outline-offset: 4px;
    border-radius: 4px;
}

a:active {
    color:#F0F
}

.sidebar {
    position: relative;
    isolation: isolate;
    padding: 20px;
    color: #264F7F;
    width: 305px;
    height: auto;
    min-height: 610px;
    clear: right;
    overflow: visible;
    margin: 120px 0 0 778px;
}

.c-info::before {
    content: "";
    position: absolute;
    display: block;
    height: 96%;
    inset: 0 -70px -15px -9px;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96) rotate(-1deg);
    transform-origin: center;
    transition: opacity 300ms ease,
transform 300ms ease;
    background: linear-gradient(
105deg,
transparent 0 2%,
rgba(53, 182, 225, 0.92) 2% 18%,
rgba(32, 184, 241, 0.84) 18% 83%,
rgba(43, 160, 216, 0.9) 83% 98%,
transparent 98% 100%
);
    clip-path: polygon(
3% 7%,
97% 1%,
94% 17%,
100% 29%,
96% 48%,
99% 68%,
93% 91%,
8% 98%,
2% 83%,
5% 64%,
0% 41%,
4% 22%
);

}

.c-info.is-active::before {
    opacity: 1;
    transform: scale(1) rotate(-1deg);
}

#header {
    background: #f9f9f9 url(/images/graphic-designer-workspace.png) fixed;
    height: 0;
    width: 100%;
    overflow:visible
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 55px;
    margin: 0
    auto;
    z-index: 10;
    overflow-x:hidden
}

a.footerlink:link {
    color: #20557B;
    padding:10px
}

a.footerlink:is(:hover,:focus-visible) {
    color:#F0F !important
}

a.footerlink:visited {
    color:#20557B
}

.ftbold:is(:hover,:focus-visible) + .designPhone {
    opacity: 1;
    margin-bottom:0
}

.designPhone {
    opacity: 0;
    margin-top: -12px;
    margin-bottom: -13px;
    letter-spacing: 2px;
    font-weight: 600;
    color: #fff;
    transition:opacity .6s, margin-bottom .6s
}

.designPhone span.fa.fa-phone {
    font-size: .85em;
    margin-right: 10px;
    opacity: 0.8
}

#social
a {
    background: url(/images/social_icons4.png) no-repeat;
    width: 50px;
    height: 50px;
    display: block;
    background-size: 100px auto;
    text-indent:-9999em
}

#social {
    margin: 0
    auto;
    clear: both;
    top: 50%;
    left: 50%;
    margin-left: -260px;
    margin-top: -177px;
    z-index: 9999;
    position: fixed;
    text-align: center;
    width: 520px;
    padding: 100px;
    display: none
}

#social
ul {
    width: 320px;
    height: auto;
    margin: 0
    auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center
}

#social
li {
    width: 47px;
    height: 48px;
    margin: 0
    8px 12px;
    display: block
}

#behance
a {
    background-position:left -100px
}

#behance a:is(:hover,:focus-visible) {
    background-position: -51px -100px
}

#googleplus
a {
    background-position:left -200px
}

#googleplus a:is(:hover,:focus-visible) {
    background-position: -51px -200px
}

#dribbble
a {
    background-position:left -150px
}

#dribbble a:is(:hover,:focus-visible) {
    background-position: -51px -150px
}

#facebook
a {
    background-position:0 -50px
}

#facebook a:is(:hover,:focus-visible) {
    background-position: -51px -50px
}

#twitter
a {
    background-position:left 0
}

#twitter a:is(:hover,:focus-visible) {
    background-position: -51px 0
}

#resume
a {
    background-position:left -300px
}

#resume a:is(:hover,:focus-visible) {
    background-position:-50px -300px
}

.ftbold {
    background: rgba(255, 255, 255, 0.7) !important;
    position: relative;
    transition: background .4s ease-in-out, margin-bottom 0.6s;
    width: auto !important;
    height: auto !important;
    border-radius: 45px;
    border: 3px
    solid rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    border-width: 1px 3px 1px 3px;
    text-indent:0 !important
}

.ftbold:is(:hover,:focus-visible) {
    margin-bottom: 20px;
    opacity: 0.8;
    background:rgba(255, 255, 255, 0.3)
}

.ftbold:is(:hover,:focus-visible).fa-envelope-o:before {
    opacity: 1;
    top: 32px;
    color: #7acde0;
    font-size:3em
}

.ftbold.fa-envelope-o:before {
    content: "\f003";
    position: absolute;
    top: -50px;
    font-size: 2.5em;
    color: #fff;
    opacity: 0;
    left: 43.5%;
    transition: all .33s ease-in-out
}

.ftbold
h2 {
    font-weight: 300;
    font-size: 56px !important;
    color: rgb(106, 204, 226) !important;
    transition: all .5s ease-in-out;
    margin: 0;
    text-shadow: 1px 1px 2px #fff;
    padding-bottom: 4px;
    min-height: 80px
}

.ftbold:is(:hover,:focus-visible)
h2 {
    color: #fff !important;
    font-size: 1.8em !important;
    margin-bottom: 4px;
    text-shadow:none
}

.hide {
    display:none
}

.title {
    text-indent:-9999em
}

.contact {
    padding: 20px
    40px;
    z-index: 89;
    width: 858px;
    height: auto;
    color: #333;
    clear: both;
    float: left;
    border: 2px
    solid #327EC1;
    color:#667
}

#logo {
    position: absolute;
    width: 55%;
    background: transparent;
    border-radius: 0;
    top: auto;
    left: -11%;
    transform: rotate(-45deg);
    transform-origin: center top;
    display: block;
    z-index: 9999;
    max-height: 14vw;
    max-width: 50vw;
}

.graphicDesigner {
    fill:#35b6e1
}

.logo {
    fill: #35b6e1;
    display: block;
    z-index: 9999;
    transition: all .7s ease-in-out;
    height: clamp(100px, 30vh, 100%);
    top: 0;
    left: -24%;
    position:relative;
    background-position: top center;
    padding:27% 0 0 0;
}

a#logo h2 {
    position: absolute;
    z-index: 10;
    transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    text-indent: -9999em;
    border-radius: 50%;
    width: 60%;
    height: 40%;
    left: 20%;
    top: 30%
}

a#logo:is(:hover,:focus-visible) .blue22 {
    opacity:1
}

#logo:is(:hover,:focus-visible) .logo {
    fill:#7be3cd
}

li.home {
    list-style: none
}

.ffooter
h2 {
    margin-top: 21px;
    font-size: 160% !important;
    margin-bottom: 10px;
    font-weight:normal
}

.ffooter a:nth-child(n + 2)::before {
    content: " | ";
    padding: 0
    10px 0 0px;
    margin-left:-10px
}

.ffooter a:is(:hover,:focus-visible):nth-child(n)::before {
    color:#20557B
}

footer {
    margin: 11.5% auto 0 8.7% !important;
    font-family: 'Lato', 'Gill Sans', sans-serif;
    clear: both;
    color: #20557B;
    font-weight: 300;
    height: 110px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 100;
    opacity: 1;
    max-width: 960px;
    margin: 0
    auto 0;
    min-width:320px
}

@-moz-document url-prefix() {
    .wrapper {
        filter:initial !important
    }
}

.screen {
    opacity: 0;
    filter: alpha(opacity=0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #7bcde0;
    background: -moz-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7bcde0), color-stop(100%, #7be3cd));
    background: -webkit-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: -o-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: -ms-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: linear-gradient(to bottom, #7bcde0 0%, #7be3cd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bcde0', endColorstr='#7be3cd', GradientType=0);
    transition: opacity .75s ease-in-out;
    pointer-events:none; 
}
.screen.is-visible {
    opacity:1;
    pointer-events:auto;
}

#slide-down {
    z-index: 9999;
    position: absolute;
    padding: 25px;
    top: auto;
    left: 0;
    right: 0;
    bottom: -2px;
    margin: auto;
    width: 10%;
    max-width: 165px;
    min-width: 120px;
    height: 80px;
    background: transparent;
    -webkit-transition: color 0.25s ease;
    -o-transition: color 0.25s ease;
    transition:color 0.25s ease
}

#slide-down {
    animation: slide-down 1.25s alternate infinite;
    -moz-animation: slide-down 1.25s alternate infinite;
    -webkit-animation:slide-down 1.25s alternate infinite
}

@keyframes slide-down {
    0% {
        transform:translate(0px, 0px) scale(1)
    }

    100% {
        transform:translate(0px, 20px) scale(.95)
    }
}

@-webkit-keyframes slide-down {
    0% {
        transform:translate(0px, 0px) scale(1)
    }

    100% {
        transform:translate(0px, 20px) scale(.95)
    }
}

@-moz-keyframes slide-down {
    0% {
        transform:translate(0px, 0px) scale(1)
    }

    100% {
        transform:translate(0px, 20px) scale(.95)
    }
}

.p_Home blockquote, q {
    line-height: 130%;
    font-weight: 500;
    font-size:26px
}

nav {
    position: relative;
    overflow: visible;
    margin: 0;
    min-width: 320px;
    float: left;
    width: 100%;
}

#rings {
    z-index: 9998;
    width: 66%;
    min-width: 320px;
    min-height: 340px;
    position: absolute;
    border-top-left-radius: 330px;
    overflow: visible;
    margin: 0;
}

.p_Home
.quotemark {
    background: none;
    position: absolute;
    top: -4px;
    left: -38px;
    z-index: 91;
    width: 29px;
    height: 21px
}

.p_Home
.sidebar {
    color: rgba(120, 120, 130, 1);
    font-size: 100%;
    width: 30.333%;
    margin: 0;
    width: 33%;
    position: absolute;
    top: 0;
    right: 0;
    padding: 13% 15px 20px 30px;
    z-index: 9999;

}

.sidebar
h2 {
    font-family: 'lato', 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif !important;
    font-size: 1.25rem !important
}

.p_Home .quote {
    position: absolute;
    z-index: 10;
    width: 83%;
    height: auto;
    display: inline-block;
    top: 20vh;
    right: 0;
    -webkit-font-smoothing: antialiased;
    font-family: 'Reenie Beanie', 'Lato', sans-serif;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 250ms ease-in-out,
        visibility 0s;
}
.p_Home .quote.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 250ms ease-in-out,
        visibility 0s linear 250ms;
}

h1.uppercase {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 80px;
    line-height:60px
}

#target {
    top: -745px;
    left: 165px;
    opacity: 1;
    position: absolute;
    z-index: 1
}

.p_Home
.wrapper {
    height: auto;
    width: 96%;
    min-height: 370px;
    min-width: 320px;
    max-width: 1200px;
    position: fixed
}

.fadeq {
    position: relative;
    width: 100%;
    min-height: 150px;
    overflow: visible;
    padding: 4px 4px 4px 6px;
}

.fadeq .quote-slide {
    display: block;
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: none;
    transition: opacity 700ms ease-in-out;
}

.fadeq .quote-slide.is-active {
    opacity: 1;
}

.fadeq .strong {
    display: block;
    clear: both;
    float: none;
    margin-top: 6px;
    text-align: right;
    color: #aaa;
    font-size: 0.9em !important;
    letter-spacing: 1px;
}

.quote-text {
    display: inline;
}

.quote-text .word {
    opacity: 0;
    animation: quote-word-in 250ms ease-out forwards;
}

@keyframes quote-word-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.qts {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    width: 290px;
    line-height: 125%
}

.p_Home footer, .section_about.page_why
footer {
    margin: 20px
    auto 0 !important;
    height: 200px;
    background: transparent
}

.p_Home .ffooter, .section_about.page_why
.ffooter {
    border-radius: 100%;
    width: 960px;
    margin: 20px
    auto 0;
    background: rgba(255, 255, 255, 0.4);
    height: 970px;
    padding: 20px;
    border: 5px
    solid #fff;
    box-shadow: 2px 2px 28px #7bcde0;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease
}

.p_Home a.about, .p_Home a.blog, .p_Home
a.portfolio {
    display: block;
    padding-bottom: 100%;
    width: 100%;
    border-radius: 100%
}

.p_Home
.nojsquote {
    display:none
}

.p_Home #thank-you {
    display: none
}

.p_Home #services {
    margin: 0 auto;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif !important;
    font-weight: 900;
    text-transform: uppercase;
    font-size: .65rem!important;
    color: rgb(15, 100, 170)!important;
    text-shadow: 1px 1px 2px rgb(224, 179, 226);
    column-count: 3;
}
.p_Home #services li {
    display: block;
    margin: auto;
    font-size: 1.2em;
    width: 40%;
    text-align: left;
    padding: 0 .75rem .75rem;
}

q
em {
    font-size: inherit;
    font-style: italic;
    letter-spacing: 2px;
    font-size: 1.08em;
    border-bottom: 1px solid #dddeee;
    font-weight:900
}

.circle {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    cursor: default;
    background-size: 100% !important;
    margin:11.5% 0 0 22%;
    padding-bottom: 100%;
}

.cportfolio {
    width: 90%;
    height: 0;
    border-radius: 54% 54% 50% 54%;
    background: transparent;
    z-index: 9997;
    padding: 0
    0 91% 0;
    margin-top: 12.89%;
    margin-left:24.7%
}

.cblog {
    width: 58.9%;
    height: 0;
    padding-bottom: 61%;
    display: block;
    position: absolute;
    margin-top: 25.7%;
    margin-left: 40.5%;
    background: transparent;
    z-index:9998
}

.cabout {
    width: 28.2%;
    height: 0;
    padding-bottom: 30%;
    display: block;
    position: absolute;
    margin-top: 40.8%;
    margin-left: 55.9%;
    z-index: 9999
}

.cportfolio:is(:hover,:focus-visible) ~ #design_portfolio .cirPortfolio,
.cportfolio:focus-within ~ #design_portfolio .cirPortfolio {
    background-position: 0 33.33%;
    opacity: 1;
}

.cblog:hover ~ #design_portfolio .cirPortfolio,
.cblog:focus-within ~ #design_portfolio .cirPortfolio {
    background-position: 0 66.66%;
    opacity: 1;
}

.cabout:is(:hover,:focus-visible) ~ #design_portfolio .cirPortfolio,
.cabout:focus-within ~ #design_portfolio .cirPortfolio {
    background-position: 0 99.99%;
    opacity: 1;
}

#design_portfolio {
    opacity: 1;
    text-indent: -9999em;
    background: url(/images/design_sprite2.png) no-repeat;
    background-position:top left;
    max-height: auto;
}

#design_rings1 {
    background: cyan;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 330px;
    overflow: visible;
    max-height:641px
}

a.tel.phone {
    letter-spacing:2px
}

span.title-header {
    width: 100%;
    height: 100%;
    display: block;
    padding-bottom: 100%;
    position: absolute;
    background: transparent;
    border-radius: 54% 54% 50% 54%;
    opacity: 1;
    text-indent:-9999em
}

span.cirPortfolio {
    background: url(/images/design_sprite2.png) no-repeat;
    opacity: 0;
    background-position: top left;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    display: block;
    background-size: 100%;
    -webkit-transition: opacity 125ms cubic-bezier(0.525, 0.110, 0.635, 0);
    -moz-transition: opacity 125ms cubic-bezier(0.525, 0.110, 0.635, 0);
    -o-transition: opacity 125ms cubic-bezier(0.525, 0.110, 0.635, 0);
    transition: opacity 260ms ease-in-out;
    will-change: opacity;
}

.c-info {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 300ms ease,
transform 300ms ease,
visibility 0s linear 300ms;
    height: 0;

}

.c-info.is-active {
    position: fixed;
    top: 14vh;
    max-width: 420px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 300ms ease,
transform 300ms ease,
visibility 0s;
    /* mix-blend-mode: difference; */
    height: auto;
    padding: 4vw 3vw 6vw;

}

.c-info
h2 {
    color: rgba(120, 120, 130, .5);
    letter-spacing: 2px;
    font-size: 1.33em !important;
    height: auto;
    margin: 0
auto 15px;
    font-weight: 900;
    border-bottom: 1px solid;
    padding-bottom: .75rem;
    font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif !important;
    text-transform: uppercase;
    color: rgb(15, 100, 170);
    text-shadow: red;
    text-shadow: 2px 2px 3px rgb(233, 163, 226);

}

.c-info
p {
    padding: 2px 15px 15px;
    margin: 0 auto;
    transition: all 1s ease-in-out 0.4s;
    color: rgb(15, 100, 170);
    line-height: 165%;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    line-height: 165%;
    font-size: 1.125rem;

}

#rings .circle {
    transition:
        transform 260ms ease-in-out,
        filter 260ms ease-in-out;
    transform-origin: center;
}

#rings .circle:is(:hover,:focus-visible),
#rings .circle:focus-within {
    filter: brightness(1.06);
}

.clr {
    clear: both;
    padding: 0;
    height: 0;
    margin:0
}

.main {
    width: 90%;
    margin: 0
    auto;
    position:relative
}

#paragraph {
    color: #fff;
    z-index: 9999999999;
    display: block;
    max-width: 30rem;
    position: relative;
    top: 10%;
    margin: 0 auto;
}

#paragraph
h2 {
    color: #fff;
    text-shadow: none;
    text-align: center;
    font-size: 59px;
    margin: 0;
    font-weight: 300;
    border-bottom: 4px double #fff
}

#paragraph
p {
    margin-top:.75rem;
    font-size: 2.25rem;
    line-height: 1.5
}

.p_Home
.sidebar {
    animation: quote 2.15s;
    -moz-animation: quote 2.15s;
    -webkit-animation: quote 2.15s
}

@keyframes
quote {
    0% {
        opacity:0
    }

    50% {
        opacity:0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes
quote {
    0% {
        opacity:0
    }

    50% {
        opacity:0
    }

    100% {
        opacity: 1
    }
}

@-moz-keyframes
quote {
    0% {
        opacity:0
    }

    50% {
        opacity:0
    }

    100% {
        opacity: 1
    }
}

@-ms-keyframes
quote {
    0% {
        opacity:0
    }

    50% {
        opacity:0
    }

    100% {
        opacity: 1
    }
}

.p_Home #rings {
    animation: rings 1s;
    -moz-animation: rings 1s;
    -webkit-animation: rings 1s
}

@keyframes
rings {
    0% {
        top:-250%
    }

    25% {
        top:-250%
    }

    60% {
        top:25%
    }

    100% {
        top: 0%
    }
}

@-webkit-keyframes
rings {
    0% {
        top:-250%
    }

    25% {
        top:-250%
    }

    60% {
        top:25%
    }

    100% {
        top: 0%
    }
}

@-moz-keyframes
rings {
    0% {
        top:-250%
    }

    25% {
        top:-250%
    }

    60% {
        top:25%
    }

    100% {
        top: 0%
    }
}

@-ms-keyframes
rings {
    0% {
        top:-250%
    }

    25% {
        top:-250%
    }

    60% {
        top:25%
    }

    100% {
        top: 0%
    }
}

.p_Home #logo {
    animation: logo 1.4s;
    -moz-animation: logo 1.4s;
    -webkit-animation: logo 1.4s
}

@keyframes
logo {
    0% {
        left:-100%
    }

    40% {
        left:-100%
    }

    75% {
        left:-15.5%
    }

    100% {
        left: -15.5%
    }
}

@-webkit-keyframes
logo {
    0% {
        left:-100%
    }

    40% {
        left:-100%
    }

    75% {
        left:-15.5%
    }

    100% {
        left: -15.5%
    }
}

@-moz-keyframes
logo {
    0% {
        left:-100%
    }

    40% {
        left:-100%
    }

    75% {
        left:-15.5%
    }

    100% {
        left: -15.5%
    }
}

@-ms-keyframes
logo {
    0% {
        left:-100%
    }

    40% {
        left:-100%
    }

    75% {
        left:-15.5%
    }

    100% {
        left: -15.5%
    }
}

.section_about.page_why
#container {
    height: auto
}

.section_about.page_why
.wrapper {
    height: 100%;
    width: 100%;
    min-height: 370px;
    min-width: 320px;
    max-width: 1024px
}

/* ================= About ===============*/
.section_about.page_why #logo {
    width: 40%;
    top: 0;
    left: -12.5%;
    transform-origin: top right;
}
.section_about.page_why .wrapper {height:100%;width:100%;min-height:370px;min-width:320px;max-width:1024px;}
.section_about p {padding: 0 0 0 15px;}
.leftcontent {
    width: 100%;
    min-width: 320px;
    min-height: 340px;
    border-top-left-radius: 330px;
    overflow: visible;
    margin: 0;
    height: 230vh;
    top: 0;
    position: relative;
}
#stevenHeld {
    border: 0;
    z-index: 9999;
    position: sticky;
    left: 190px;
    top: 70px;
    width: 50%;
    height: auto;
    max-width: 260px;
    overflow: hidden;
    filter: drop-shadow(0px 1px 10px #9eeeee80);
}
.section_about.page_why .textbox.about {
    width: 50vw;
    height: auto;
    min-width: 320px;
    max-width: 48ch;
    display: inline-block;
    position: absolute;
    top: 21vh;
    margin-left:395px;
    z-index: 0;
}
.section_about.page_why .textboxB {
    margin-top: 20px;
    margin-bottom: 340px;
    display: flex;
    float: left;
    flex-flow: column;
}
.section_about.page_why h2 {font-size:185%}
.callToAction {background:#2ebcf1;height: auto;padding: 20px;width: 440px;color: #fff;box-shadow: 0 0 0 3px #FFF inset;border: 2px solid #20B8F1;border-radius: 40px;font-size: 1.6em !important;text-align: center;margin: 0;width: 100%;max-width: 460px;float: right;position: relative;background-clip: border-box;color: #fff !important;-webkit-text-fill-color: #fff;}
.callToAction:is(:hover,:focus-visible) {border: #F0F 2px solid;background:#ff10ff;}
.section_about.page_why #services {display: flex;flex-wrap: wrap;margin: 0 auto;max-width: 440px;}
.section_about.page_why #services li {line-height: 28px;font-size: 16px;font-weight: 300;font-family: 'Lato','Gill Sans',sans-serif;width: auto;background: rgba(240,240,240,1);margin-right: 10px;margin-left: 10px;list-style: none;margin-bottom: 10px;flex: 1 0 calc(50% - 20px);border-radius: 25px;padding: 0 0 0 10px;}
.section_about.page_why #services li:is(:hover,:focus-visible) {background: #F0F;color: #fff;}

/* About-page logo entrance */
.section_about.page_why #stevenHeld {
  animation: stevenHeld-in 850ms cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}

@keyframes stevenHeld-in {
  from {
    opacity: 0;
    transform: translate3d(-2rem, 3rem, 0) rotate(-3deg) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
}

/* Keep the About-page layout stable—do not animate width. */
.section_about.page_why .leftcontent {
  animation: none;
}

.section_about.page_why .textbox, .callToAction
{
animation:textbox 1.6s;-moz-animation:textbox 1.6s; /* Firefox */-webkit-animation:textbox 1.6s; /* Safari and Chrome */}

@keyframes textbox
{0%   {opacity:0}50%  {opacity:0}100%  {opacity:1}}

.section_about #container {
  opacity: 1;
  transition: opacity 900ms ease;
}

.section_about .wrapper {
  filter: none;
  transition: filter 900ms ease;
}

.section_about footer {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 900ms ease,
    transform 900ms ease;
}

.section_about .screen {
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
  display: grid;
  place-items: center;
}
.section_about .screen a {
    border-radius: 9999px;
    background: cyan;
    min-block-size: 44px;
    min-inline-size: 44px;
    align-content: center;
    padding: 1rem;
    font-weight: 500;
    font-size: 3rem;
    box-shadow: 2px 2px 134px #fff;
    border: 2px solid white;
    z-index: 9999;
}
.section_about .screen a:is(:hover,:focus-visible) {
    background: black;
    color:#fff;
}

.section_about.about-end-revealed #container {
  opacity: 0.15;
}

.section_about.about-end-revealed .wrapper {
  filter: blur(8px);
}

.section_about.about-end-revealed .screen {
  visibility: visible;
  opacity: 1;
  transition:
    opacity 900ms ease,
    visibility 0s linear 0s;
}

.section_about.about-end-revealed footer {
  opacity: 1;
}

.section_about.page_why #container {
  opacity: 1;
  transition: opacity 900ms ease;
}

.section_about.page_why .wrapper {
  filter: none;
  transition: filter 900ms ease;
}

.section_about.page_why footer {
  margin: 0 auto !important;
  max-width:none;
  display: block;
  position: relative;
  bottom: auto;
  z-index: 100;
  opacity: 0;
  transform: translateY(2.75rem);
  pointer-events: none;
  transition:
    opacity 900ms ease,
    transform 900ms ease;
}

.section_about.page_why .screen {
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 900ms ease,
    visibility 0s linear 900ms;
}

.section_about.page_why.about-end-revealed #container {
  opacity: 0.15;
}

.section_about.page_why.about-end-revealed .wrapper {
  filter: blur(8px);
}

.section_about.page_why.about-end-revealed .screen {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 900ms ease,
    visibility 0s linear 0s;
  z-index: 9999;
}

.section_about.page_why.about-end-revealed footer {
  opacity: 1;
  pointer-events: auto;
  z-index:9999;
}

/* ================= How ===============*/

.section_process.page_how
.textbox {
    width: 345px;
    float: left;
    height: auto;
    margin: 116px
    0 140px 310px;
    position: relative;
    z-index: 1000
}

.section_process.page_how h1, .section_process.page_how h2, .section_process.page_how h3, .section_process.page_how h4, .section_process.page_how h5, .section_process.page_how
h6 {
    color:#F39
}

.freelanceHire {
    float: right;
    margin: -55px 0 0 !important;
    font-weight: 300;
    position:relative
}

.resume {
    background: #fff;
    z-index: 89;
    width: 858px;
    height: auto;
    color: #333;
    margin: 212px
    0 0 230px;
    clear: both;
    float: left;
    box-shadow: 0px 0 10px -5px #000;
    color: #667;
    position:relative
}

.resumeLogo {
    background: none repeat scroll 0 0 #FFF;
    height: 210px;
    margin: 0;
    overflow: hidden;
    padding: 20px
    0 17px 30px;
    width:265px
}

.resumeLogo a:link {
    color:#fff !important
}

.box {
    color: #FFF !important;
    height: 22px;
    padding: 4px
    0 4px 60px;
    margin: 0
    0 10px -65px !important
}

.yellow {
    background: #FBB03B;
    width: 192px;
    margin-bottom:6px !important
}

.cyan {
    background: #33C5F3;
    width:220px
}

.magenta {
    background: #EC3A94;
    width:180px
}

.logoSmall {
    font-size: 15px !important;
    font-weight: 300;
    padding-left:80px
}

.web {
    border-bottom: 2px dotted #33C5F3;
    color: #33C5F3 !important;
    float: right;
    margin: -50px 0 0 !important;
    padding: 0
    50px 0 0;
    text-align: right;
    width:811px
}

.rotate {
    transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg)
}

.section_about.page_resume
h2 {
    color: #999;
    font-weight: 300;
    line-height:1.1em
}

.leftSide {
    background: #fff;
    width: 200px;
    height: auto;
    text-align: right;
    padding: 17px
    8px 0 0;
    float: left;
    border-right:2px solid #EC3A94
}

.education {
    text-transform: uppercase;
    padding: 0
    0 35px 0;
    border-bottom: 2px dotted #33C5F3;
    margin-left:-1px
}

.school {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 2px dotted #33C5F3;
    font-size: 13px;
    height: 63px;
    margin: -96px 0 14px 215px;
    padding: 0
    0 0 18px;
    text-align: left;
    width:624px
}

.experience {
    line-height: 1.1em;
    margin: -20px 0 0 -1px !important;
    padding: 0
    0 0 14px;
    text-align: right;
    width:180px
}

.jobs {
    background: none repeat scroll 0 0 #FFF;
    border-bottom: 2px dotted #33C5F3;
    height: auto;
    margin: -71px 0 14px 215px;
    padding: 0
    0 0 18px;
    text-align: left;
    width:604px
}

.awards {
    text-transform: uppercase;
    padding: 0
    0 10px;
    margin-left:-1px
}

.honors {
    background: none repeat scroll 0 0 #FFF;
    border-bottom: 2px dotted #33C5F3;
    height: auto;
    margin: -157px 0 14px 215px;
    padding: 0
    0 0 18px;
    text-align: left;
    width:604px
}

.skills {
    background: none repeat scroll 0 0 #FFF;
    height: auto;
    margin: -59px 0 35px 215px;
    padding: 0
    0 0 18px;
    text-align: left;
    width:604px
}

.upC {
    text-transform:uppercase
}

.border {
    border-bottom: 2px dotted #33C5F3;
    margin: -29px 0 4px 2px !important;
    width:201px
}

.small {
    font-size: 15px !important;
    margin-top: -15px !important;
    font-weight: 300
}

.small
a {
    font-weight:500
}

.print {
    clear: both;
    float: left;
    font-size: 14px !important;
    margin: 25px
    0 20px 230px !important;
    width: 430px;
    z-index: 99
}

.section_about.page_resume
footer {
    float: none !important
}

.section_about.page_resume
h5 {
    font-size: 110%
}

.section_about.page_resume p, .section_about.page_resume h1, .section_about.page_resume h3, .section_about.page_resume h4, .section_about.page_resume h5, .section_about.page_resume
h6 {
    color: #667
}

.section_about.page_resume
h5 {
    margin-top: -20px
}

.section_about.page_resume
p {
    margin: 0
    0 15px 0
}

.resume a:link {
    color:#667
}

.resume a:visited {
    color:#667 !important
}

.resume a:is(:hover,:focus-visible) {
    color:#F0F !important
}

.resume a:active {
    color: #F0F !important
}

.section_about.page_resume
.wrapper {
    float: none !important;
    min-height:768px !important
}

.resume {
    animation: resume 1s;
    -moz-animation: resume 1s;
    -webkit-animation: resume 1s
}

@keyframes
resume {
    0% {
        left:-1100px
    }

    50% {
        left:-1100px
    }

    100% {
        left: 0px
    }
}

@-webkit-keyframes
resume {
    0% {
        left:-1100px
    }

    50% {
        left:-1100px
    }

    100% {
        left: 0px
    }
}

@-moz-keyframes
resume {
    0% {
        left:-1100px
    }

    50% {
        left:-1100px
    }

    100% {
        left: 0px
    }
}

.section_about.page_resume
.freelanceHire {
    animation: hire 1.7s;
    -moz-animation: hire 1.7s;
    -webkit-animation: hire 1.7s
}

@keyframes
hire {
    0% {
        top:-1100px
    }

    50% {
        top:-1100px
    }

    100% {
        top: 0px
    }
}

@-webkit-keyframes
hire {
    0% {
        top:-1100px
    }

    50% {
        top:-1100px
    }

    100% {
        top: 0px
    }
}

@-moz-keyframes
hire {
    0% {
        top:-1100px
    }

    50% {
        top:-1100px
    }

    100% {
        top:0px
    }
}

#graphic-design-portfolio {
    background: #fff !important;
    background-image: none !important
}

.section_graphic-design-portfolio
#logo60 {
    background: url(/images/steven_held_logo.png) no-repeat;
    background-position: top left;
    background-size: contain;
    opacity: 0.4;
    width: 19%;
    height: 25%;
    min-width: 106px;
    text-indent: -99999px;
    z-index: 9999;
    position: absolute;
    overflow: visible;
    border-radius: 0 0 245px 0;
    margin: 15px;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out
}

.section_graphic-design-portfolio #logo60:is(:hover,:focus-visible) {
    opacity: 1 !important
}

.section_graphic-design-portfolio nav {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 33%;
    left: 0px;
    list-style: none;
    z-index: 9999;
    width: 125px;
    height: 355px;
    overflow: hidden
}

.section_graphic-design-portfolio nav li
h2 {
    color: #FFF;
    font-family: "Lato", "Gill Sans", "Gill Sans Std", "Gill Sans MT", Arial, sans-serif;
    font-size: 15px;
    left: 18px;
    margin: 20px
    0 0;
    position: fixed;
    text-shadow: none !important
}

.section_graphic-design-portfolio nav
li {
    left: -3px;
    position: relative;
    width: 125px;
    list-style: none
}

.section_graphic-design-portfolio nav li
a {
    margin: 6px
    0 0 -2px;
    display: block;
    width: 116px;
    height: 60px;
    background-color: #F39;
    border-radius: 0px 40px 40px 0px;
    box-shadow: 0px 2px 3px blue;
    border: 2px solid #FFF;
    opacity: 0.4;
    filter: progid: DXImageTransform.Microsoft.Alpha(opacity=40);
    transition: opacity 1.25s ease-in-out
}

.section_graphic-design-portfolio nav li a:is(:hover,:focus-visible) {
    opacity: 1;
    box-shadow: 0px 2px 3px #666;
    -moz-box-shadow: 0px 2px 3px #666;
    -webkit-box-shadow: 0px 2px 3px #666
}

.section_graphic-design-portfolio
h3 {
    font-size: 37px;
    font-weight: 400;
    color: #c3c3c3
}

.section_graphic-design-portfolio
footer {
    margin: 120px
    auto 10px
}

.section_graphic-design-portfolio
.small {
    font-size: 14px !important;
    margin-top:6px !important
}

body.section_contact {
    color: #fff;
    font-weight: 400;
    font-size: 1em;
    font-family: 'Raleway', Arial, sans-serif;
    overflow: hidden;
    overflow-y: scroll;
    background: #7bcde0;
    background: -moz-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7bcde0), color-stop(100%, #7be3cd));
    background: -webkit-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: -o-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: -ms-linear-gradient(top, #7bcde0 0%, #7be3cd 100%);
    background: linear-gradient(to bottom, #7bcde0 0%, #7be3cd 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#7bcde0', endColorstr = '#7be3cd', GradientType = 0)
}

.section_about.page_contact
h2 {
    font-size: 200%;
    margin-bottom:-5px
}

.vcard {
    font-weight: lighter;
    font-size: 13px;
    border-left: 1px dotted #20b8f1;
    padding: 0
    10px 0;
    margin: 0
    0 -2px -8px
}

.fn {
    font-size: 14px;
    font-weight:normal
}

.nocard {
    text-indent:-9999em
}

.form {
    float: left;
    margin: 150px
    0 0 270px;
    width: 700px;
    height: auto;
    min-height: 670px;
    position: relative;
    z-index: 9999;
    border-left: 2px solid #20b8f1;
    padding: 0
    25px 0
}

.section_about.page_contact
.leftcontent {
    float: left
}

.section_about.page_contact
.wrapper {
    min-height: 840px
}

form
p {
    margin: 0
    0 5px !important
}

input {
    border: 1px
    solid #999;
    display: block;
    height: 25px;
    width: 355px;
    margin: 0
    0 25px;
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    box-shadow:0px 0px 4px rgba(0, 0, 0, 0.3)
}

input.button {
    margin: 8px
    0 0 0;
    width: 100px;
    background: #fff;
    color: #09C;
    height: 30px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 1px
    solid #999
}

input.button:is(:hover,:focus-visible) {
    background: #20B8F1;
    color: #fff
}

.section_about.page_contact
.form {
    animation: form 1s;
    -moz-animation: form 1s;
    -webkit-animation: form 1s
}

@keyframes
form {
    0% {
        top:-700px
    }

    50% {
        top:-700px
    }

    100% {
        top: 0px
    }
}

@-webkit-keyframes
form {
    0% {
        top:-700px
    }

    50% {
        top:-700px
    }

    100% {
        top: 0px
    }
}

@-moz-keyframes
form {
    0% {
        top:-700px
    }

    50% {
        top:-700px
    }

    100% {
        top: 0px
    }
}

.section_about.page_sitemap
#container {
    height: auto
}

.section_about.page_sitemap
.wrapper {
    height: 100%;
    width: 100%;
    min-height: 370px;
    min-width: 320px;
    max-width: 1024px
}

.section_about.page_sitemap #logo {
    position: absolute;
    width: 100%;
    height: 0;
    background: transparent;
    padding: 0
    0 35% 0;
    overflow: hidden;
    border-radius: 0;
    top: 0;
    left: 0;
    min-width: 135px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform-origin: top;
    -webkit-transform-origin: top;
    -moz-transform-origin: top;
    -ms-transform-origin: top;
    -o-transform-origin: top
}

.section_about.page_sitemap
.home {
    width: 100%;
    padding-bottom: 50%;
    top: 27.4%;
    left: -24.6%
}

.section_about.page_sitemap
.textbox {
    width: 42.4%;
    height: auto;
    min-width: 320px;
    margin: 22.3% 0px 60px 36.6%;
    position: static;
    display: block;
    float: left
}

.section_root.page_sitemap h2, .section_root.page_sitemap
h3 {
    font-size: 185%
}

.section_root.page_sitemap
p {
    font-size: 16px
}

.section_root.page_sitemap
.wrapper {
    min-height: 730px
}

.section_root.page_404
.textbox {
    width: 1024px;
    min-width: 1024px;
    height: auto;
    margin: 116px
    auto 0
}

.section_root.page_404
.leftcontent {
    width: 100%;
    min-height:480px
}

.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption), .visually-hidden:not(caption) {
position: absolute!important;
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
width: 1px!important;
height: 1px!important;
padding: 0!important;
margin: -1px!important;
overflow: hidden!important;
clip: rect(0,0,0,0)!important;
white-space: nowrap!important;
border: 0!important;
}

#slide-down {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 400ms ease-in-out,
        visibility 0s;
}

#slide-down.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation-play-state: paused;
    transition:
        opacity 400ms ease-in-out,
        visibility 0s linear 400ms;
}

/* Media Queries */
@media screen and (max-height: 1060px) {
    #paragraph
    p {
        font-size:3vmin
    }
}

@media screen and (max-height: 639px) {
    #paragraph {
        display:none !important
    }
}

@media screen and (max-width: 1200px) {
    #portfolio.is-active {
        max-width: fit-content;
    }
    .p_Home #services {
        column-count: 2;
    
    }
    .p_Home #services li {
        font-size: .65rem!important;
    }
    
}
@media screen and (min-width: 1201px){
    .p_Home #services {column-count: 3}
}
@media screen and (max-width: 960px) {
    #stevenHeld {
        display: none !important
    }

    .p_Home
    .ffooter {
        width: 100%;
        margin: 57px
        auto 0;
        height: 145px;
        padding: 0;
        border: 2px
        solid #fff;
        border-radius: 0
    }

    .ffooter
    p {
        font-size: 14px
    }

    .ffooter
    h2 {
        font-size: 20px
    }

    .section_about.page_why .leftcontent {
        position: absolute;
        width: 100%;
        height:fit-content;
        padding-bottom: 0
    }

    .section_about.page_why
    h2 {
        font-size: 290%;
        text-align: center
    }

    .section_about.page_why .textbox.about {
        width: 100%;
        padding: 20px;
        position: relative;
        margin: 0 auto 25px auto;
        float: none;
        display:block;
    }

    .section_about.page_why
    .callToAction {
        max-width: 100%;
        float: none;
        margin: 0
        auto;
        font-size: 3em !important
    }

    .section_about.page_sitemap
    .textbox {
        width: 100%;
        padding: 20px;
        position: relative;
        margin: -105px auto 70px auto;
        float: none
    }

    .section_about.page_sitemap .textbox
    h2 {
        font-size: 280%;
        text-align: center
    }

    .section_about.page_sitemap
    .leftcontent {
        position: relative;
        width: 100%;
        min-height: 540px;
        padding-bottom:0
    }
}

@media screen and (max-width: 620px) {
    .section_about.page_sitemap
    .textbox {
        width: auto;
        float:left
    }
}

@media screen and (max-width: 1100px) {
    .p_Home
    .wrapper {
        position: relative;
        max-width: 900px;
        width: 100%;
        height: 100%;
        max-height: 700px;
        overflow: hidden;
        background:transparent
    }

    .ftbold {
        color:rgba(255, 255, 255, 0.9) !important
    }
}

@media screen and (max-width: 800px) and(orientation: portrait) {
    .section_graphic-design-portfolio
    nav {
        display:none
    }
}

@media screen and (max-width: 320px) and(orientation: portrait) {
    .p_Home .wrapper, .p_Home
    .footer {
        overflow: hidden;
        width:320px
    }
}

@media screen and (max-width: 1024px) and(orientation: landscape) {
    .section_graphic-design-portfolio
    nav {
        display:none
    }
}

@media screen and (max-width: 600px) {
    .p_Home .sidebar, .c-info {
        display: none !important
    }
}

/* Quote-carousel clipping test */
#container,
.p_Home .wrapper,
.p_Home .sidebar,
.p_Home .quote,
.fadeq {
    overflow: visible !important;
    z-index:9999;
}

@media screen and (max-width: 1100px) {
    .p_Home .wrapper {
        max-height: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}