html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* cool stuff */
/* Sweep To Right */
/* Underline From Left */
/*----------*/
body { font-family: "azo-sans-web", sans-serif; }

p { line-height: 20px; }

a { text-decoration: none; display: block; }

header { display: block; }

video { position: relative; right: 0; top: 0; min-width: 100%; z-index: -100; }
@media screen and (max-width: 600px) { video { display: none; } }

.mobilehead { display: none; }
@media screen and (max-width: 600px) { .mobilehead { display: block; position: relative; right: 0; top: 0; z-index: -100; width: 100%; } }

h1 { font-weight: bold; position: absolute; width: 100%; font-size: 60px; margin: auto; text-align: center; margin-top: 17%; color: white; padding: 0 30px; box-sizing: border-box; }
@media screen and (max-width: 900px) { h1 { font-size: 40px; } }
@media screen and (max-width: 600px) { h1 { font-size: 23px; margin-top: 25%; } }

nav { position: absolute; width: 100%; display: flex; justify-content: space-between; }
nav #desklogo { width: 20%; margin: 20px; max-width: 330px; }
@media screen and (max-width: 800px) { nav #desklogo { width: 23%; } }
@media screen and (max-width: 600px) { nav #desklogo { display: none; } }
nav #mobilelogo { width: 10%; height: 10%; margin: 2%; display: none; }
@media screen and (max-width: 600px) { nav #mobilelogo { display: block; } }
nav ul { display: flex; justify-content: space-around; width: 30%; margin-top: 35px; margin-right: 30px; }
@media screen and (max-width: 600px) { nav ul { display: none; } }
nav ul li { font-weight: 500; }
nav ul li a { color: black; padding: 10px; display: block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; }
nav ul li a:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
nav ul li a:hover:before, nav ul li a:focus:before, nav ul li a:active:before { right: 0; }

.container { max-width: 1500px; margin: auto; }

.main-carousel .carousel-cell { height: 300px; width: 35%; }
@media screen and (max-width: 800px) { .main-carousel .carousel-cell { width: 50%; } }
@media screen and (max-width: 600px) { .main-carousel .carousel-cell { width: 100%; } }
.main-carousel .cell1, .main-carousel .cell2, .main-carousel .cell3, .main-carousel .cell4, .main-carousel .cell5, .main-carousel .cell6 { background-image: url(images/thumbs/HT.jpg); background-size: cover; background-position: center; }
.main-carousel .cell1 a, .main-carousel .cell2 a, .main-carousel .cell3 a, .main-carousel .cell4 a, .main-carousel .cell5 a, .main-carousel .cell6 a { width: 100%; height: 100%; display: block; color: white; text-align: center; padding: 10px; opacity: 0; }
.main-carousel .cell1 a h4, .main-carousel .cell2 a h4, .main-carousel .cell3 a h4, .main-carousel .cell4 a h4, .main-carousel .cell5 a h4, .main-carousel .cell6 a h4 { position: relative; top: 40%; left: 50%; margin-left: -60px; display: block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; padding: 10px; width: 100px; text-align: center; line-height: 20px; }
.main-carousel .cell1 a h4:before, .main-carousel .cell2 a h4:before, .main-carousel .cell3 a h4:before, .main-carousel .cell4 a h4:before, .main-carousel .cell5 a h4:before, .main-carousel .cell6 a h4:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.main-carousel .cell1 a h4:hover:before, .main-carousel .cell1 a h4:focus:before, .main-carousel .cell1 a h4:active:before, .main-carousel .cell2 a h4:hover:before, .main-carousel .cell2 a h4:focus:before, .main-carousel .cell2 a h4:active:before, .main-carousel .cell3 a h4:hover:before, .main-carousel .cell3 a h4:focus:before, .main-carousel .cell3 a h4:active:before, .main-carousel .cell4 a h4:hover:before, .main-carousel .cell4 a h4:focus:before, .main-carousel .cell4 a h4:active:before, .main-carousel .cell5 a h4:hover:before, .main-carousel .cell5 a h4:focus:before, .main-carousel .cell5 a h4:active:before, .main-carousel .cell6 a h4:hover:before, .main-carousel .cell6 a h4:focus:before, .main-carousel .cell6 a h4:active:before { right: 0; }
.main-carousel .cell1 a h4 strong, .main-carousel .cell2 a h4 strong, .main-carousel .cell3 a h4 strong, .main-carousel .cell4 a h4 strong, .main-carousel .cell5 a h4 strong, .main-carousel .cell6 a h4 strong { font-size: 14px; padding-top: 10px; }
.main-carousel .cell1 a:hover, .main-carousel .cell2 a:hover, .main-carousel .cell3 a:hover, .main-carousel .cell4 a:hover, .main-carousel .cell5 a:hover, .main-carousel .cell6 a:hover { opacity: 1; transition-duration: .5s; }
.main-carousel .cell2 { background-image: url(images/thumbs/Berks-Alliance-Icon.jpg); background-position: center; }
.main-carousel .cell3 { background-image: url(images/mockups/Christmas2020.gif); background-position: center; }
.main-carousel .cell4 { background-image: url(images/thumbs/SHI-icon.jpg); background-position: center; }
.main-carousel .cell1 a, .main-carousel .cell3 a, .main-carousel .cell5 a { background-color: #6b2bf7; }
.main-carousel .cell2 a, .main-carousel .cell4 a, .main-carousel .cell6 a { background-color: #33ccff; }

.flickity-page-dots { display: none; }

.button { color: white; background-color: #09034f; padding: 15px 30px; width: 20%; margin: auto; text-align: center; margin-top: 2%; display: block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
.button:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-image: url(images/button.png); background-size: cover; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.button:hover, .button:focus, .button:active { color: white; }
.button:hover:before, .button:focus:before, .button:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }
@media screen and (max-width: 600px) { .button { width: 50%; } }

section { display: flex; justify-content: center; margin-top: 6%; }
@media screen and (max-width: 800px) { section { display: block; } }
section .left { width: 40%; margin-right: 2%; }
@media screen and (max-width: 800px) { section .left { margin: auto; width: 50%; } }
@media screen and (max-width: 600px) { section .left { margin: auto; width: 80%; } }
section .right { width: 40%; margin-left: 2%; margin-top: 5%; text-align: center; }
@media screen and (max-width: 800px) { section .right { width: 70%; margin: auto; } }
@media screen and (max-width: 600px) { section .right { width: 100%; } }
section .right h2 { font-size: 32px; display: flex; justify-content: center; margin-bottom: 10px; }
section .right h2 strong { font-size: 50px; }
@media screen and (max-width: 800px) { section .right h2 strong { font-size: 40px; } }
@media screen and (max-width: 530px) { section .right h2 strong { font-size: 30px; } }
@media screen and (max-width: 800px) { section .right h2 { font-size: 25px; } }
@media screen and (max-width: 600px) { section .right h2 { padding: 0 10%; box-sizing: border-box; } }
@media screen and (max-width: 530px) { section .right h2 { font-size: 19px; } }
section .right h2 img { align-self: center; width: 10%; }
section .right h2 #one { margin-top: -10%; }
section .right h2 #two { margin-bottom: -10%; }
section .right h2 .text { margin: 10px; text-align: center; }
section .right h3 { text-align: right; font-size: 22px; }
@media screen and (max-width: 600px) { section .right h3 { padding: 0 10%; box-sizing: border-box; font-size: 19px; } }
section .right p { margin: auto; margin-top: 20px; width: 90%; }
section .right #homeabout { width: 50%; margin-top: 5%; }
@media screen and (max-width: 600px) { section .right #homeabout { width: 50%; } }
section img { width: 100%; }

footer { background-color: #09034f; margin-top: 6%; }
footer .container { display: flex; justify-content: space-between; }
footer .container a { color: white; }
footer .container a img { width: 80%; padding: 5px; box-sizing: border-box; }
footer .container #contacttext { align-self: center; padding: 5px; margin-left: 20px; box-sizing: border-box; display: block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; }
footer .container #contacttext:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
footer .container #contacttext:hover:before, footer .container #contacttext:focus:before, footer .container #contacttext:active:before { right: 0; }

#ham { display: none; font-size: 30px; position: absolute; top: 20%; right: 3%; }
@media screen and (max-width: 600px) { #ham { display: block; } }

.overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: black; background-color: rgba(0, 0, 0, 0.9); overflow-x: hidden; transition: 0.5s; }

.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }

.overlay a { padding: 8px; text-decoration: none; font-family: "azo-sans-web", sans-serif; font-weight: 400; font-size: 36px; color: #818181; display: block; transition: 0.3s; display: block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; }
.overlay a:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.overlay a:hover:before, .overlay a:focus:before, .overlay a:active:before { right: 0; }

.overlay a:hover, .overlay a:focus { color: #f1f1f1; }

.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; }

@media screen and (max-height: 450px) { .overlay a { font-size: 20px; }
  .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } }
.grid { max-width: 1600px; width: 90%; margin: auto; }
@media screen and (max-width: 600px) { .grid { width: 100%; } }

.grid-item { width: 24%; }
@media screen and (max-width: 500px) { .grid-item { width: 23%; } }
.grid-item a { width: 100%; }
.grid-item img { width: 100%; }
.grid-item .hover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s ease; background-color: #6b2bf7; }
.grid-item .hover h3 { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
@media screen and (max-width: 600px) { .grid-item .hover h3 { font-size: 14px; top: 40%; } }
.grid-item .hover p { color: white; font-size: 15px; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
@media screen and (max-width: 800px) { .grid-item .hover p { top: 85%; } }
@media screen and (max-width: 600px) { .grid-item .hover p { font-size: 13px; top: 80%; } }

.grid-item--width2 { width: 49%; }
@media screen and (max-width: 700px) { .grid-item--width2 { width: 47%; } }

.button-group { display: flex; justify-content: center; }
.button-group button { margin: 15px; background: none; border: none; font-family: "azo-sans-web", sans-serif; font-size: 20px; outline: none; display: block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; }
.button-group button:before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; background: #2098D1; height: 4px; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.button-group button:hover:before, .button-group button:focus:before, .button-group button:active:before { right: 0; }
@media screen and (max-width: 800px) { .button-group button { font-size: 16px; } }
@media screen and (max-width: 600px) { .button-group button { font-size: 13px; margin: 5px; } }

.grid-item:hover .hover { opacity: 1; }

.tap { background-image: url(images/bkgd.jpg); background-size: cover; }

/*-----------workdetail--------*/
.detailtop { display: flex; justify-content: space-around; max-width: 1500px; margin: 70px auto; align-items: center; }
@media screen and (max-width: 800px) { .detailtop { display: block; } }
.detailtop .img-wrap { width: 35%; position: relative; }
.detailtop .img-wrap img { width: 100%; }
.detailtop .img-wrap:before { content: ''; background: #0c27ed; width: 150px; height: 150px; position: absolute; left: -50px; top: -50px; display: block; opacity: .8; z-index: -1; }
@media screen and (max-width: 600px) { .detailtop .img-wrap:before { height: 50px; width: 50px; top: -5px; left: -5px; } }
.detailtop .img-wrap:after { content: ''; background: #6b2bf7; width: 150px; height: 150px; position: absolute; right: calc(0% - 50px); bottom: -50px; display: block; opacity: .8; }
@media screen and (max-width: 600px) { .detailtop .img-wrap:after { height: 50px; width: 50px; bottom: -5px; right: -5px; } }
@media screen and (max-width: 800px) { .detailtop .img-wrap { margin: 100px auto; width: 50%; } }
@media screen and (max-width: 600px) { .detailtop .img-wrap { width: 80%; } }
.detailtop img { align-self: center; width: 40%; }
@media screen and (max-width: 800px) { .detailtop img { margin: auto; display: block; width: 50%; } }
@media screen and (max-width: 600px) { .detailtop img { width: 80%; } }
.detailtop .detailicons { display: flex; justify-content: space-around; width: 100%; }
.detailtop .detailicons .iconstack { width: 25%; text-align: center; }
.detailtop .detailicons .iconstack img { margin: auto; }
.detailtop .detailicons .iconstack h5 { font-size: 21px; margin-top: 10px; }
@media screen and (max-width: 600px) { .detailtop .detailicons .iconstack h5 { font-size: 16px; } }

.detailtext { width: 40%; }
@media screen and (max-width: 800px) { .detailtext { margin: auto; display: block; width: 70%; } }
.detailtext h4 { text-align: center; font-size: 40px; }
@media screen and (max-width: 600px) { .detailtext h4 { font-size: 30px; } }
.detailtext h5 { text-align: center; font-size: 30px; }
@media screen and (max-width: 600px) { .detailtext h5 { font-size: 25px; } }
.detailtext h4, .detailtext h5, .detailtext p, .detailtext .iconstack, .detailtext a { margin-top: 6%; }
.detailtext p a { margin: 0; display: inline; transition: all ease-in-out 300ms; }
.detailtext p a:hover { color: #33ccff; }
.detailtext .button { width: 40%; }

.mockup-img { max-width: 1500px; margin: auto; }
.mockup-img img { width: 100%; max-width: 1500px; }

.gif-wrapper { display: flex; justify-content: space-between; max-width: 1200px; margin: auto; flex-wrap: wrap; }
@media screen and (max-width: 700px) { .gif-wrapper { display: block; } }
.gif-wrapper img { max-width: 500px; width: calc(32% - 10px); margin: 10px; align-self: center; }
@media screen and (max-width: 700px) { .gif-wrapper img { width: 100%; margin: 10px auto; display: block; } }
.gif-wrapper.nco { max-width: 1500px; align-items: flex-start; justify-content: space-around; }
.gif-wrapper.nco img { border: solid 1px gray; width: calc(49% - 20px); max-width: 600px; display: block; align-self: flex-start; }

.main-carousel.work-detail { max-width: 1500px; margin: auto; }
.main-carousel.work-detail .carousel-cell { width: 100%; background: none; height: 550px; }
@media screen and (max-width: 1000px) { .main-carousel.work-detail .carousel-cell { height: 400px; } }
@media screen and (max-width: 700px) { .main-carousel.work-detail .carousel-cell { height: 250px; } }
@media screen and (max-width: 500px) { .main-carousel.work-detail .carousel-cell { height: 160px; } }
.main-carousel.work-detail .carousel-cell img { width: 100%; }

.main-carousel.husk { margin-top: 4%; }
.main-carousel.husk .carousel-cell.husk { width: 100%; height: 550px; }
.main-carousel.husk .cell1.husk { background-image: url(images/Husk-close.jpg); background-size: cover; background-position: center; }
.main-carousel.husk .cell2.husk { background-image: url(images/huskbox.jpg); background-size: cover; background-position: 0% 30%; }
@media screen and (max-width: 800px) { .main-carousel.husk .cell2.husk { background-position: center; } }
.main-carousel.husk .cell3.husk { background-image: url(images/huskmenu.jpg); background-size: cover; background-position: 10% top; }
.main-carousel.husk .cell4.husk { background-image: url(images/huskbox-2.jpg); background-size: cover; background-position: 0% 10%; }
@media screen and (max-width: 800px) { .main-carousel.husk .cell4.husk { background-position: center; } }
.main-carousel.husk .cell5.husk { background-image: url(images/Husk-station.jpg); background-size: cover; background-position: center; }

.main-carousel.huskdev { margin-top: 4%; width: 50%; }
@media screen and (max-width: 800px) { .main-carousel.huskdev { width: 100%; } }
.main-carousel.huskdev .carousel-cell.huskdev { width: 100%; height: 550px; }
.main-carousel.huskdev .cell1.huskdev { background-image: url(images/huskdev-2.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; }
.main-carousel.huskdev .cell2.huskdev { background-image: url(images/huskdev-3.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.huskdev .cell3.huskdev { background-image: url(images/husk-dev-1.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.huskdev .cell4.huskdev { background-image: url(images/husk-dev4.png); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.huskdev .cell5.huskdev { background-image: url(images/shoe-dev2.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }

.dev { max-width: 1500px; margin: auto; }

.devone, .devtwo { display: flex; justify-content: space-around; margin: 3% 0%; }
@media screen and (max-width: 800px) { .devone, .devtwo { display: block; } }
.devone img, .devtwo img { width: 50%; align-self: center; }

footer.detail { clear: both; margin-top: 0; }

/*-----snatched detail-------*/
.carousel-cell.snatch { width: 100%; height: 550px; }

.cell1.snatch { background-image: url(images/Snatched-station.jpg); background-size: cover; background-position: center; }

.cell2.snatch { background-image: url(images/snatched-buscard.jpg); background-size: cover; background-position: center; }
@media screen and (max-width: 800px) { .cell2.snatch { background-position: center; } }

.cell3.snatch { background-image: url(images/snatched-wide-product.jpg); background-size: cover; background-position: center; }

.main-carousel.wigdev { margin-top: 4%; width: 50%; }
@media screen and (max-width: 800px) { .main-carousel.wigdev { width: 100%; } }
.main-carousel.wigdev .carousel-cell.wigdev { width: 100%; height: 550px; }
.main-carousel.wigdev .cell1.wigdev { background-image: url(images/snatched-dev-1.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.wigdev .cell2.wigdev { background-image: url(images/snatched-dev2.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.wigdev .cell3.wigdev { background-image: url(images/snatched-dev3.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.wigdev .cell4.wigdev { background-image: url(images/snatched-dev4.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.wigdev .cell5.wigdev { background-image: url(images/snatched-dev5.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }

/*----------wanderlight-------*/
.main-carousel.huskdev { margin-top: 4%; width: 50%; }
@media screen and (max-width: 800px) { .main-carousel.huskdev { width: 100%; } }
.main-carousel.huskdev .carousel-cell.wanderdev { width: 100%; height: 550px; }
.main-carousel.huskdev .cell1.wanderdev { background-image: url(images/shoe-dev4.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; }
.main-carousel.huskdev .cell2.wanderdev { background-image: url(images/shoe-dev1.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.huskdev .cell3.wanderdev { background-image: url(images/shoe-dev3.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.huskdev .cell4.wanderdev { background-image: url(images/shoe-dev6.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.huskdev .cell5.wanderdev { background-image: url(images/shoe-dev2.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }

.carousel-cell.wander { width: 100%; height: 550px; }

.cell1.wander { background-image: url(images/wanderbox1.jpg); background-size: cover; background-position: center; }

.cell2.wander { background-image: url(images/wanderbox2.jpg); background-size: cover; background-position: center; }

.cell3.wander { background-image: url(images/wanderbox3.jpg); background-size: cover; background-position: center; }

/*------------vellum-------*/
.carousel-cell.vellum { width: 100%; height: 550px; }

.cell1.vellum { background-image: url(images/vellum-cover-wide.jpg); background-size: cover; background-position: center; }

.cell2.vellum { background-image: url(images/vellum-feature1-wide.jpg); background-size: cover; background-position: center; }

.cell3.vellum { background-image: url(images/vellum-feature2-wide.jpg); background-size: cover; background-position: center; }

.cell4.vellum { background-image: url(images/vellum-washiwide.jpg); background-size: cover; background-position: center; }

.cell5.vellum { background-image: url(images/vellum-julie-wide.jpg); background-size: cover; background-position: center; }

/*-----tappy cat----*/
.carousel-cell.tappy { width: 100%; height: 550px; }

.detailicons.tapppy { justify-content: space-around; }

.cell1.tappy { background-image: none; }

.cell2.tappy { background-image: url(images/install1.jpg); background-size: cover; background-position: center; }

.cell3.tappy { background-image: url(images/install2.jpg); background-size: cover; background-position: center; }

.cell4.tappy { background-image: url(images/tappyposter.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }

/*-----holiday card----*/
.carousel-cell.holiday { width: 100%; height: 550px; }

.cell1.holiday { background-image: url(images/holiday-1.jpg); background-size: cover; background-position: center; }

.cell2.holiday { background-image: url(images/holiday-2.jpg); background-size: cover; background-position: center; }

.cell3.holiday { background-image: url(images/HolidayCard-close.jpg); background-size: cover; background-position: center; }

/*---------emu------*/
.carousel-cell.emu { width: 100%; height: 550px; }

.cell1.emu { background-image: url(images/laptop-emu.jpg); background-size: cover; background-position: center; }

.cell2.emu { background-image: url(images/iphone-emu.jpg); background-size: cover; background-position: center; }

/*--------intern-----*/
.carousel-cell.intern { width: 100%; height: 550px; }

.cell1.intern { background-image: url(images/laptop-intern.jpg); background-size: cover; background-position: center; }

.cell2.intern { background-image: url(images/iphone-intern.jpg); background-size: cover; background-position: center; }

/*-------app-------*/
.detailicons.app { justify-content: space-around; }

.main-carousel.appdev { margin-top: 4%; width: 50%; }
@media screen and (max-width: 800px) { .main-carousel.appdev { width: 100%; } }
.main-carousel.appdev .carousel-cell.appdev { width: 100%; height: 550px; }
.main-carousel.appdev .cell1.appdev { background-image: url(images/flow.png); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.appdev .cell2.appdev { background-image: url(images/wireframe1.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.appdev .cell3.appdev { background-image: url(images/wireframe2.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.appdev .cell4.appdev { background-image: url(images/wireframe3.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.appdev .cell5.appdev { background-image: url(images/wireframe4.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.appdev .cell6.appdev { background-image: url(images/wireframe5.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.appdev .cell7.appdev { background-image: url(images/wireframe6.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }
.main-carousel.appdev .cell8.appdev { background-image: url(images/wireframe7.jpg); background-size: contain; background-repeat: no-repeat; background-position: center; }

/*-----form--------*/
.carousel-cell.forms { width: 100%; height: 550px; }

.cell1.forms { background-image: url(images/form-laptop.jpg); background-size: cover; background-position: center; }

.cell2.forms { background-image: url(images/form-phone.jpg); background-size: cover; background-position: center; }

/*-------contact------*/
form { width: 80%; margin: auto; }

.container.contact { max-width: 800px; margin: auto; margin-top: 4%; margin-bottom: 4%; }

.field { margin: 1em 0; }

label { display: block; margin-top: 2em; margin-bottom: 0.5em; color: black; }

input { width: 100%; margin: auto; padding: 0.5em 0em; font-size: 1.2em; border-radius: 3px; border: 1px solid #0c27ed; }

textarea { width: 100%; margin: auto; height: 200px; padding: 0.5em 0em; font-size: 1.2em; border-radius: 3px; border: 1px solid #0c27ed; }

form button { color: white; background-color: #09034f; padding: 15px 30px; width: 30%; font-size: 16px; font-family: "azo-sans-web", sans-serif; text-align: center; margin-top: 2%; display: block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; }
form button:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-image: url(images/button.png); background-size: cover; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
form button:hover, form button:focus, form button:active { color: white; }
form button:hover:before, form button:focus:before, form button:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); }

button:hover, button:focus { opacity: 0.75; cursor: pointer; }

button:active { opacity: 1; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset; }

.success { padding: 1em; margin-bottom: 0.75rem; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #468847; background-color: #dff0d8; border: 1px solid #d6e9c6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

.error { padding: 1em; margin-bottom: 0.75rem; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); color: #b94a48; background-color: #f2dede; border: 1px solid rgba(185, 74, 72, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

h2.contact { font-size: 30px; text-align: center; }

p.contact { text-align: center; }

/*------about-----*/
.about { display: flex; justify-content: space-around; max-width: 1500px; margin: auto; margin-top: 4%; }
@media screen and (max-width: 800px) { .about { display: block; } }
.about img { width: 40%; align-self: center; }
@media screen and (max-width: 800px) { .about img { width: 70%; display: block; margin: auto; } }

.issuuembed { margin-top: 4%; }

.invision { margin: auto; display: block; margin-top: 3%; width: 424px; height: 916px; }
@media screen and (max-width: 800px) { .invision { display: none; } }

.invis { display: none; }
@media screen and (max-width: 800px) { .invis { display: block; margin-bottom: 10%; } }

/*# sourceMappingURL=style.css.map */