:root {
    --color5: #00adff;
    --color5-rgba: 0,173,255;
    --color6: #304574;
    --color6-rgba: 48,69,116;
	--color7: #f9e215;
	--color7-rgba: 249,226,21;
    --logo-size: 2;    
    --logo-size-mobile: 1.25;
}

@media (min-width:1366px) {
    :root {
        --page-padding-left: 7vw;
        --page-padding-right: 7vw;
    }
}

body {
    font-weight: 300;
}

main {
    overflow: hidden;
}

.typed-strings {
    clip: rect(0px, 0px, 0px, 0px); 
    clip-path: inset(50%); 
    height: 1px; 
    overflow: hidden; 
    position: absolute; 
    white-space: nowrap; 
    width: 1px;
}

h1+h2 {
    font-size: 1.563em;
}

a[href*="tel"]:before {
    color: var(--color1);
}

[class*="subsection"]:not([class*="feature"]) h3 {
	color: var(--color1);
}

.mobile-extras {
	display: none;
	padding-top: 1em;
	justify-content: center;
	color: var(--color1);
}

@media (max-width: 1000px){
	main {
		padding-top: calc(var(--fixed-element-height) + var(--nav-height) + .45em);
	}
	
	nav#primary > div > ul > li > h2 {
		font-weight: 500;
    }

	 nav#primary > div > ul > li > h2:after {
		 display: none;
	 }

	nav#primary > div > ul > li > h2 > a {
		justify-content: center;
	}

	.nav-side nav#primary > div {
		background: #FFF;
	}

	.mobile-extras {
		display: flex;		
	}

	[class*="list"][class*="social"] > li {
		padding: 0 1em !important;
	}
}

@media (min-width: 1001px) {
	html:not(.font-size-200) nav#primary > div > ul > li > h2 {
        padding: 0 .85em;
    }

	html.font-size-200 nav#primary > div > ul > li > h2 {
		padding: 0 .65em;
	}
	
    .header-overlap header {
        background-color: rgba(255,255,255,0);
        border-bottom: .056em rgba(230,230,230,0) solid;
    }

        .scroll.header-overlap header {
            background-color: rgba(255,255,255,.65);
            border-bottom: .056em rgba(230,230,230,1) solid;
            -webkit-backdrop-filter: blur(.222em);
            backdrop-filter: blur(.222em);            
        }

        .header-overlap header:hover,
        .accessibility-enabled.header-overlap header,
        .accessibility-enabled.scroll.header-overlap header {
            background-color: rgba(255,255,255,1);
        }
}

h1, h2, table[class*="product"] caption,
[class*="subsection"][class*="feature"] h3, h3 {
    font-weight: 300;
}

[class*="subsection"][class*="full-height"] h2 {
    font-size: 2.25em;
}

[class*="subsection"][class*="hero"],
[class*="subsection"][class*="feature"] {
    background: none;
    background-color: #FFF;
}

body > main > [class*="subsection"]:only-of-type {
	min-height: calc(100vh - 8em);
}

[class*="subsection"] {
	background: transparent;	
}

@media (min-width: 1001px){        
    [class*="subsection"][class*="text"][class*="left"][class*="full-height"] > div.inner-content:not[class*="tech"] {
        padding-right: 3.25em;
    }
    
    [class*="subsection"][class*="text"][class*="right"][class*="full-height"] > div.inner-content:not[class*="tech"] {
        padding-left: 3.25em;
    }
}

@media (min-width: 668px){
    html:not([class*="200"]) [class*="subsection"][class*="full-height"] {
        min-height: 20em;
    }

	[class*="subsection"][class*="hero"]:not([class*="full-height"]) {
        min-height: 20em;
    }
}

    [class*="subsection"][class*="hero"]:not([class*="full-height"])[class*="text-left"]:after {
        background-position: 80% top;
    }

    [class*="subsection"][class*="hero"]:not([class*="full-height"])[class*="text-Right"]:after{
        background-position: 10% top;
    }
      
    [class*="subsection"][class*="hero"]:not([class*="full-height"]):after {
        position: absolute;
        content: '';
        width: 100%;
        height: 93%;
        background-image: url("../images/bg-hero.jpg");
        -webkit-mask: url("../images/mask-logomark.svg") 0 0 no-repeat;
        mask: url("../images/mask-logomark.svg") 0 0 no-repeat;
        mask-size: 130% 102%;
        z-index: 1;
    }
      
    [class*="subsection"][class*="hero"]:not([class*="full-height"]):before,
    [class*="subsection"][class*="hero"][class*="text"]:not([class*="full-height"]):before {
        display: block;
        background: rgba(255,255,255,0.75);
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.98) 70%,rgba(255,255,255,1) 100%);
        max-height: 100%;
        height: 92vw;
    }

    [class*="subsection"][class*="hero"]:not([class*="full-height"]):not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"][class*="text-left"]:not([class*="full-height"]):not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"][class*="text-Right"]:not([class*="full-height"]):not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"]:not([class*="full-height"]):after {
	    background-size: cover !important;
	    background-color: #FFF; /*match fade overlay*/
	}

@media (max-width: 1000px){	      
    [class*="subsection"][class*="hero"]:not([class*="full-height"]):after {
        mask-size: 174% 100%;
    }
      
    [class*="subsection"][class*="hero"][class*="text-left"],
    [class*="subsection"][class*="hero"][class*="text-left"]:after {
        background-position: 80% top;
    }

    [class*="subsection"][class*="hero"][class*="text-Right"],
    [class*="subsection"][class*="hero"][class*="text-Right"]:after{
        background-position: 10% top;
    }
      
    [class*="subsection"][class*="hero"]:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background-image: url("../images/bg-hero.jpg");
        -webkit-mask: url("../images/mask-logomark.svg") top right no-repeat;
        mask: url("../images/mask-logomark.svg") top right no-repeat;
        z-index: 1;
    }

    [class*="subsection"][class*="hero"]:before,
    [class*="subsection"][class*="hero"][class*="text"]:before {
        display: block;
        background: rgba(255,255,255,0.75);
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.98) 70%,rgba(255,255,255,1) 100%);
        max-height: 100%;
        height: 92vw;
    }

    [class*="subsection"][class*="hero"]:not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"][class*="text-left"]:not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"][class*="text-Right"]:not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"]:after {
        background-size: 130% !important;
        background-color: #FFF; /*match fade overlay*/
    }

    .canvas,
    #canvas1, #canvas2 {
        display: none;
    }
}

@media (max-width: 667px) {
    .nav-side nav#primary > div {
        width: 90%;
    }
    
	[class*="subsection"][class*="hero"]:not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"][class*="text-left"]:not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"][class*="text-Right"]:not([class*="half"]):not([class*="color"]),
    [class*="subsection"][class*="hero"]:after {
        background-size: 168% !important;
    }
	
    [class*="subsection"][class*="hero"] {
        flex-wrap: wrap;
    }
    
    [class*="subsection"][class*="hero"] > div.inner-content > table:not([class*="table-"]) {
        width: 100%;
    }
    [class*="subsection"][class*="hero"]:not([class*="half"]):not([class*="color"]) > div:first-of-type:only-of-type {
        margin-top: 48%;
    }
    
   [class*="subsection"][class*="hero"][class*="full-height"]:not([class*="half"]):not([class*="color"]) > div:first-of-type:not(:only-of-type) {
        /*min-height: 0;*/
        /*padding-top: 3em;
        padding-bottom: 3em;*/
    }

    [class*="subsection"][class*="hero"][class*="text-left"]:not([class*="half"]):not([class*="color"]) > div:first-of-type {
        order: 2;
    }

    [class*="subsection"][class*="hero"][class*="full-height"]:not([class*="half"]) > div:last-of-type:not(:only-of-type) {
        /*padding-top: 0;
        min-height: 0;*/
    }

    [class*="subsection"][class*="hero"]:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 92vw;
        display: block;
        max-height: 100%;
        background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.98) 70%,rgba(255,255,255,1) 100%);   
        z-index: 2;
    }

	 [class*="subsection"][class*="hero"]:not([class*="full-height"]):after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background-image: url("../images/bg-hero.jpg");
        -webkit-mask: url("../images/mask-logomark.svg") 0 0 no-repeat;
        mask: url("../images/mask-logomark.svg") 0 6% no-repeat;
        mask-size: contain;
        z-index: 1;
    }
      
}
@media (min-width: 668px) {
    [class*="subsection"][class*="hero"][class*="full-height"] h2:last-of-type:not(:only-of-type) {
        padding-left: 1.2em;
    }
    
    [class*="subsection"][class*="full-height"] h1:not(:only-of-type) em,
    [class*="subsection"][class*="full-height"] h2:not(:only-of-type) em {
        display: flex;
    }
}

[class*="subsection"][class*="full-height"] h1:not(:only-of-type) em,
[class*="subsection"][class*="full-height"] h2:not(:only-of-type) em {
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    color: inherit;
    align-items: center;
}

[class*="subsection"][class*="full-height"] h1:not(:only-of-type) em:before,
[class*="subsection"][class*="full-height"] h2:not(:only-of-type) em:before,
[class*="subsection"][class*="feature"] h2:only-of-type:before{
    display: block;
    content: '';
    width: 2.876em;
    height: .1905em;
    background: var(--color1);
    margin-right: .5em;
}

@media (min-width: 1366px){
    [class*="subsection"][class*="full-height"] h1:not(:only-of-type) em:before,
    [class*="subsection"][class*="full-height"] h2:not(:only-of-type) em:before,
    [class*="subsection"]:not([class*="full-height"]) h2:only-of-type:before{
        width: 2.5em;
        height: .166em;
    }
}

@media (min-width: 668px){
    [class*="subsection"][class*="text"][class*="right"]{
        justify-content: flex-end;
    }

    [class*="subsection"][class*="text"][class*="left"] .inner-content,
    [class*="subsection"][class*="text"][class*="right"] .inner-content:last-of-type:not(:only-of-type){
        padding-right: 2em;
        width: 50%;
    }

        [class*="subsection"][class*="text"][class*="left"] .inner-content:last-of-type:not(:only-of-type){
            padding-right: var(--page-padding-right);
        }        
    
    [class*="subsection"][class*="text"][class*="right"] .inner-content,
    [class*="subsection"][class*="text"][class*="left"] .inner-content:last-of-type:not(:only-of-type) {
        padding-left: 2em;
        width: 50%;
    }

        [class*="subsection"][class*="text"][class*="right"] .inner-content:last-of-type:not(:only-of-type) {
            padding-right: var(--page-padding-left);
        }
}

[class*="subsection"][class*="feature"][class*="text"] h2 {
    padding-left: 1.75em;
}

[class*="subsection"][class*="feature"]:not([class*="text"]) h2 {
    padding-top: 1.75em !important;
}

[class*="subsection"][class*="feature"] h2:only-of-type:before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 1.325em;
    height: .088em;
}

[class*="subsection"][class*="feature"]:not([class*="text"]) h2:only-of-type:before {
    height: 1.325em;
    width: .0888em;
    right: 0;
    margin: 0 auto;
}

@media (max-width:1000px) and (min-width: 668px) {
    [class*="subsection"][class*="hero"][class*="full-height"] h2:last-of-type:not(:only-of-type) {
        padding-left: 0;
    }
}

@media (min-width: 667px){
    [class*="subsection"][class*="feature"][class*="text"] .inner-content[class*="shape"] {
        display: flex;
        padding: 0 !important;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 667px){
    [class*="subsection"][class*="feature"][class*="text-left"] .inner-content:first-of-type,
    [class*="subsection"][class*="feature"][class*="text-left"] .inner-content[class*="form"] {
        order: 2;
    }
}

[class*="subsection"][class*="feature"] .inner-content img {
    position: relative;
    z-index: 3;    
}

[class*="shape"]:before,
[class*="portfolio"]:before,
[class*="getstarted"]:before{
    position: absolute;
    top: -1em;
    left: 0;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15em 0 15em 20em;
    border-color: transparent transparent transparent rgba(var(--color6-rgba),.22);
    z-index: 1;
}

[class*="subsection"][class*="feature"] .inner-content [class*="our-work"][class*="shape"],
[class*="subsection"][class*="feature"].scroll-active .inner-content [class*="our-work"][class*="shape"] {
    animation: none !important;
    transition: none !important;
}

@media (min-width: 1250px){
    html:not([class*="200"]) [class*="shape"]:before {   
        top: -10em;
        border-width: 27em 0 27em 42em;
    }

	 html:not([class*="200"]) .about-us [class*="shape"]:before {
        top: -10em;
        border-width: 17em 0 17em 32em;
    }
}

@media (max-width: 1000px){
    [class*="subsection"][class*="full-height"] h2 {
        font-size: 1.953em;
    }

    [class*="subsection"][class*="hero"] .inner-content {
        width: 60% !important;
    }    
}

@media (max-width: 667px) {
    [class*="subsection"][class*="hero"] .inner-content {
        width: 100% !important;
    }

    [class*="subsection"][class*="hero"] .inner-content {
        min-height: 13em;
        /* padding-top: 3em !important; */
    }

    [class*="subsection"][class*="hero"] .inner-content[class*="tech"]{
        padding-top: 5em !important;
        padding-bottom: 0 !important;
    } 
}

[class*="subsection"][class*="feature"] [class*="shape"]:nth-of-type(2):before { 
    left: auto;
    right: 0;
    transform: scaleX(-1);
    border-color: transparent transparent transparent rgba(var(--color5-rgba),.22);  
	pointer-events: none
}

[class*="subsection"][class*="feature"]:not(.light),
[class*="subsection"][class*="feature"]:not(.light) h1:not(:only-of-type) em,
[class*="subsection"][class*="feature"]:not(.light) h2:not(:only-of-type) em {
    color: var(--text-color-dark);
}

@media (min-width: 668px) {
    [class*="subsection"][class*="full-height"] h1:not(:only-of-type) em,
    [class*="subsection"][class*="full-height"] h2:not(:only-of-type) em {
        font-size: .4em;
    }

    [class*="subsection"][class*="hero"][class*="text"][class*="left"] > div.inner-content {
        padding-right: 2.65em;
    }
    
    [class*="subsection"][class*="hero"][class*="text"][class*="right"] > div.inner-content {
        padding-right: 2.65em;
    }
}

[class*="subsection"][class*="full-height"] > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    z-index: 2;
}

#canvas, .canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, #03213d 30%,#ca529a 90%);
    -webkit-mask: url("../images/mask-logomark.svg") top right no-repeat;
    mask: url("../images/mask-logomark.svg") top right no-repeat;
    z-index: 1;
}

    [class*="subsection"][class*="color"]:before {
        background-image: url(../images/logomark-all-in-creativ.svg);
		opacity: .25;
    }

    [class*="subsection"][class*="color"][class*="text"][class*="right"]:before {
        transform: scaleX(1);
        background-position: -45% 35%;
    }

@media (min-width: 1001px) {
    nav#primary > div > ul > li > h2,
    .controls [class*="button"]{
            font-size: .85em;
    }
}

.controls {
    font-weight: 400;
}

.controls [class*="button"] {
    margin: 0;
}

@media (max-width: 1000px){
    .controls [class*="button"] {
        font-size: .8em;
    }
}

[class*="button"] {
    padding: .6em 1.25em;
    overflow: hidden;
}

body:not(.accessibility-enabled):not(.accessibility-high-contrast-enabled) [class*="button"]:before {
    position: absolute;
    display: flex;
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--color1);
    left: 0;
    top: 0;
    transition: all 0.4s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--radius);
    z-index: -2;
}

body:not(.accessibility-enabled):not(.accessibility-high-contrast-enabled) [class*="button2"]:before {
    background-color: var(--color2);
}

[class*="button"]:after {
    position: absolute;
    display: block;
    content: '';
    width: 0;
    height: 0;
    right: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0 0 .85em .85em;
    border-color: transparent transparent var(--color3) transparent;
    transition: all .65s ease;
	z-index: 1;
}

	[class*="button"] > span {
		position: relative;
		z-index: 2;
	}

body.accessibility-enabled [class*="button"]:after {
    z-index: 1;
}

@media (hover:hover){
    body:not(.accessibility-enabled):not(.accessibility-high-contrast-enabled) [class*="button"]:hover:after {
        border-width: 0 0 11em 11em;
    }
}


@media (hover:hover) {
    body:not(.accessibility-enabled) .button1:hover {
        background-color: transparent;
    }

    body:not(.accessibility-enabled) .button2:hover {
        background-color: transparent;
    }
}


[class*="subsection"][class*="feature"] .inner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[class*="subsection"][class*="feature"]:not([class*="text"]) {
    text-align: center;
}

@media (min-width: 668px){
	body:not(.skip) [class*="subsection"][class*="hero"] .inner-content:not([class*="shape"]),
	body:not(.skip) [class*="subsection"][class*="feature"] .inner-content:not([class*="shape"]),
	body:not(.skip) [class*="subsection"][class*="feature"]:not([class*="text"]) .inner-content:not([class*="shape"]),
	body:not(.skip) [class*="subsection"][class*="feature"] .inner-content[class*="shape"] img {
		opacity: 0;
	}
	
	body:not(.skip) [class*="subsection"][class*="feature"][class*="text-right"].scroll-active  .inner-content:not([class*="shape"]),
	body:not(.skip) [class*="subsection"][class*="feature"][class*="text-left"].scroll-active .inner-content[class*="shape"] img,
	body:not(.skip) [class*="subsection"][class*="hero"][class*="text-left"].scroll-active .inner-content:not([class*="shape"]),
	body:not(.skip) [class*="subsection"][class*="feature"][class*="text-left"].scroll-active .inner-content[class*="form"]{   
		animation-name: slideInRight;        
	}
	
	body:not(.skip) [class*="subsection"][class*="hero"][class*="text-left"].scroll-active .inner-content:not([class*="shape"]):not([class*="tech"]),
	body:not(.skip) [class*="subsection"][class*="feature"][class*="text-left"].scroll-active  .inner-content:not([class*="shape"]):not([class*="form"]),
	body:not(.skip) [class*="subsection"][class*="feature"][class*="text-right"].scroll-active .inner-content[class*="shape"] img{  
		animation-name: slideInLeft;        
	}
	
	body:not(.skip) [class*="subsection"][class*="feature"]:not([class*="text"]).scroll-active .inner-content:not([class*="shape"]) {
		animation-name: fadeInUp;
	}
	
	body:not(.skip) [class*="subsection"].scroll-active .inner-content:not([class*="shape"]),
	body:not(.skip) [class*="subsection"][class*="feature"].scroll-active .inner-content.shape > img,
	body:not(.skip) [class*="subsection"].scroll-active .inner-content[class*="tech"] [class*="device"],
	body:not(.skip) [class*="subsection"][class*="feature"][class*="text-left"].scroll-active .inner-content[class*="form"] {
		animation-duration: 1.5s;        
		animation-fill-mode: both;       
		animation-delay: 0.25s;      
		opacity: 1;
	}
	
	body:not(.skip) [class*="subsection"][class*="feature"].scroll-active .inner-content.shape > img {
		 transition: opacity 2s ease;
	}
}

[class*="subsection"][class*="feature"] [class*="table"][class*="grid"]:not([class*="quicklinks"]) p {
    margin-top: calc(var(--vertical-spacing) + .65em); 
}

@media (min-width: 1001px) { 
    [class*="subsection"][class*="feature"] [class*="table"][class*="grid"]:not([class*="quicklinks"]) {
        font-size: .75em;
        margin-top: 4em;
    } 

    [class*="subsection"][class*="feature"]:not([class*="getstarted"]) h3 {
        font-size: 2em;
    }
    
    main [class*="subsection"][class*="feature"][class*="text"]:not([class*="getstarted"]),
	[class*="subsection"][class*="feature"][class*="portfolio"] {
        padding-top: 3em;
    }

    [class*="subsection"][class*="feature"] [class*="table"][class*="grid"]:not([class*="quicklinks"]) {
        padding-left: 4.5em;
    }

	[class*="subsection"][class*="feature"] h2 + p {
        padding-left: 3.5em;
    }
	
    [class*="subsection"][class*="feature"] [class*="table"][class*="grid"]:not([class*="quicklinks"]) td {
        max-width: 14em;
    }
}

@media (max-width: 667px){
    [class*="subsection"][class*="feature"][class*="text"],
    [class*="subsection"][class*="hero"][class*="full-height"] h2 {
        text-align: center;
    }

        [class*="subsection"][class*="feature"][class*="text"] h2 {
            padding-left: 0;
            padding-top: 56px !important;
        }

        [class*="subsection"][class*="hero"][class*="full-height"] h2:first-of-type:not(:only-of-type) {
            padding-top: 40px !important;
        }

    [class*="subsection"][class*="feature"][class*="text"] h2:only-of-type:before,
    [class*="subsection"][class*="full-height"] h1:not(:only-of-type) em:before,
    [class*="subsection"][class*="full-height"] h2:not(:only-of-type) em:before {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        height: 46px;
        width: 3px;
        right: 0;
        margin: 0 auto;
    }

    [class*="subsection"][class*="feature"] {
        flex-wrap: wrap;
    }

	.inner-content[class*="form"] {
        padding-top: 0;
    }

    [class*="device"]{
        margin: 0 auto;
        left: 0;
        right: 0;
    }
}

[class*="subsection"][class*="feature"] [class*="icon"]:before {
	color: var(--color1);
}

[class*="subsection"] .inner-content[class*="tech"] {}

[class*="device"] {
    position: absolute;
    display: block;
    max-width: 24em;
    transition: all .5s ease;
}

[class*="device"][class*="smartphone"] {
    max-width: 4em;
    margin-top: 4em;
}

[class*="device"][class*="tablet"] {
    max-width: 7em;
}

[class*="device"][class*="tablet"]:nth-of-type(2) {
    transform: rotate(10deg);
    margin-top: -4em !important;
    margin-left: 5em;
    z-index: 2;
}

[class*="device"][class*="tablet"]:nth-of-type(1) {
    transform: rotate(30deg);
    margin-left: 10em;
    z-index: 1;
}

[class*="device"][class*="tablet"]:last-of-type {
    transform: rotate(-10deg);
    z-index: 3;
}

@media (min-width: 1001px){
    [class*="device"][class*="tablet"] {
        max-width: 12em;
    }

    [class*="device"][class*="tablet"]:nth-of-type(2) {
        transform: rotate(10deg);
        margin-top: -1em !important;
        margin-left: 6em;
    }
    
    [class*="device"][class*="tablet"]:nth-of-type(1) {
        transform: rotate(30deg);
        margin-top: -7em !important;
        margin-left: 13em;
    }
    
    [class*="device"][class*="tablet"]:last-of-type {
        transform: rotate(-10deg);
        margin-top: 8em;
    }
}

@media (max-width: 667px) {
    [class*="device"] {
        max-width: 18em;
        left: 2em;
    }

    [class*="device"][class*="smartphone"] {
        max-width: 3em;
        margin-top: 4em;
        left: -15em;
    }

    [class*="device"][class*="tablet"] {
        margin: 0 auto !important;
        left: 0;
        right: 0;
    }
    
    [class*="device"][class*="tablet"]:nth-of-type(2) {
        transform: rotate(-10deg);
        margin-top: 0 !important;
        left: -10em;
      }
    
    [class*="device"][class*="tablet"]:nth-of-type(1) {
        transform: rotate(10deg);
        left: 10em;
    }
    
    [class*="device"][class*="tablet"]:last-of-type {
        transform: rotate(0);
    }   
}

.accessibility-enabled .typed-cursor {
    opacity: 1 !important;

}

.typed-cursor {
  color: var(--color1);
}

[class*="subsection"][class*="feature"]  h2[class*="aic"]:before,
[class*="subsection"][class*="feature"]  h3[class*="aic"]:before {
    display: block;
    font-size: 2.75em;
    height: 1.5em;
    height: auto;
    margin-bottom: .35em;
    color: var(--color1);
}

@media (max-width: 667px){
	[class*="subsection"][class*="feature"]  h2[class*="aic"]:before,
	[class*="subsection"][class*="feature"]  h3[class*="aic"]:before {
		margin-right: 0;
	}
}

[class*="our-work"]{
    padding: 2em 0 4em 0;
}

[class*="portfolio"]:before,
[class*="our-work"][class*="shape"]:before {
    top: 7em;
    border-width: 15em 0 15em 20em;
    border-color: transparent transparent transparent rgba(var(--color3-rgba),.22);
} 

[class*="portfolio"]:nth-child(6):before {
	left: auto;
    right: 0;
    transform: scaleX(-1);
    border-color: transparent transparent transparent rgba(var(--color7-rgba),.22); 
}

 [class*="getstarted"]:before {
	top: auto;
    bottom: 0;
    border-width: 30em 0 0 30em;
} 

[class*="our-work"] img {
    width: 10em;
    height: auto;
    z-index: 2;
    overflow: hidden;
    box-shadow: .277em .277em 1em 0 rgba(0,0,0,0.5);
    transition: all 1s ease;
    scale: 1;
    border-radius: .5em;
}

@media (min-width: 1450px){
     [class*="our-work"] img {
        width: 13em;
    }   
}

@media (max-width: 1000px){
    [class*="our-work"] img {
        max-width: 7em;
    }    
}

@media (max-width: 820px){
    [class*="our-work"] img {
        max-width: 7em;
        margin: .35em;
    }    
}

@media (min-width: 821px){
    html:not([class*="200"]) [class*="our-work"] img:nth-last-of-type(3) {
        z-index: 4 !important;
    }
    
    html:not([class*="200"]) [class*="our-work"] img:nth-last-of-type(even) {
        top: 1em;
    }
    
    html:not([class*="200"]) [class*="our-work"] img:nth-last-of-type(odd):not(:nth-last-of-type(3)) {
        top: 2em;
    }
	
    html:not([class*="200"]) [class*="our-work"] img:nth-last-of-type(2) {
        left: -1em;
    }
    
    html:not([class*="200"]) [class*="our-work"] img:nth-last-of-type(4) {
        right: -1em;
    }
    
    html:not([class*="200"]) [class*="our-work"] img:first-of-type {
        left: 2em;
    }
    
    html:not([class*="200"]) [class*="our-work"] img:last-of-type {
        left: -2em;
        z-index: 1;
    }
}

@media (hover: hover) {
    [class*="our-work"] img:hover {
        scale: 1.35;
        z-index: 5 !important;
        transition: all .75s ease;
        /*transition-delay: .5s;*/
    }

    .inner-content[class*="tech"] [class*="device"][class*="tablet"]:hover {
        scale: 1.35;
        transform: rotate(0);
        z-index: 5;
        transition: all 1s ease;
        transition-delay: .75s;
    }
}

[class*="the-150"] {
    display: flex;
    grid-gap: 1em 3em;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 1001px) {
     [class*="the-150"] {
        padding: 2em 0 0 0;
        grid-gap: 1em 7em;
     }       
}

[class*="the-150"] img {
    width: 8em;
    height: auto;
}

[class*="the-150"] img[src*="merco"]{
    padding: 1em 2em;
}

[class*="the-150"] img[src*="ffbla"],
[class*="the-150"] img[src*="fiserv"] {
    padding: 1.5em;
}

[class*="the-150"] img[src*="rio"] {
    padding: 1em;
}

@media (min-width: 668px){
	#the-form label {
	    font-size: .75em;
	}
}

label.fi {
	z-index: 5;
}

form textarea {
    min-height: 5em;
}

form label:last-of-type {
    margin-bottom: .5rem !important;
}

.g-recaptcha + [class*="button"] {
    margin-top: .5rem;
}
header:hover nav#primary > div > ul > li > h2 {
    color: var(--text-color-dark) !important;
}

@media (min-width: 1001px){
	body.home:not(.scroll):not(.accessibility-enabled) nav#primary:not(:hover) > div > ul > li:not(:hover) > h2 {
	    color:  var(--text-color-light);
	}
}

[class*="subsection"][class*="navigation"] {
    background: #2e2e2e;
}

body > footer .inner-content {
    color: #ffffff;
    border-top: .056em #626262 solid;
    background-color: #2e2e2e;
}

footer .list-social {
    color: #ffffff;
}

body > footer > [class*="subsection"][class*="navigation"] h3 {
    color: #FFF;
    font-size: 1.2em;
    padding-bottom: .5em;
    margin-bottom: 0;
}

body > footer > [class*="subsection"][class*="navigation"] [class*="list"][class*="no-marker"] a {
    color: rgba(255,255,255,.7);
    font-weight: 300;
}

body > footer > [class*="subsection"][class*="navigation"] [class*="list"][class*="no-marker"] a:hover {
    color: var(--color5);
}

.copyright {
    font-size: .75em;
}

.createdby a:not(:hover) {
    color: var(--color5);
}