/************************************************

Stylesheet: Global Stylesheet

*************************************************/
html {min-height:100%;}
body { background: transparent url(../images/staticScreenWeb02.gif); background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 100%; }

/*********************
HELPER CLASSES
*********************/
.caps {text-transform:uppercase;}
.white {color:#FFF;}
.azo-light {font-family:azo-sans-web,sans-serif;font-style:normal;font-weight:300;}
.azo-regular {font-family:azo-sans-web,sans-serif;font-style:normal;font-weight:400;}
.azo-medium {font-family:azo-sans-web,sans-serif;font-style:normal;font-weight:500;}
.azo-bold {font-family:azo-sans-web,sans-serif;font-style:normal;font-weight:700;}

/*********************
TYPOGRAPHY STYLES
*********************/
h1 { font-size: 6rem; letter-spacing: .25rem; line-height: 1; }
h1 span { display: block; font-size: 2rem; letter-spacing: .25rem; }
a:focus, button:focus { outline: none; }

/*********************
TOP BAR STYLES
*********************/
.top-bar { max-width: 90%; padding: 2% 0; margin: 0 auto; position: relative; }
.top-bar, .top-bar ul, .top-bar a {background:transparent;}
.top-bar .menu a { padding: .7rem 0; }
.top-bar .top-bar-left, .top-bar .top-bar-right { max-width: 50%; }
.top-bar-right .menu li { width: 100%; }
.top-bar-right .menu li a { font-size: .875rem; letter-spacing: .125rem; padding: 0 0 1.25rem; position: relative; display: inline-block; }
.video-replay { position: absolute; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; cursor: pointer; line-height: 1; padding-bottom: 1.25rem; }
.video-replay span { letter-spacing: .25rem; font-size: .75rem; line-height: 1; width: 300px; text-align: center; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
.video-replay:hover span { letter-spacing: .45rem; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
.top-bar-right .menu li a:before, .video-replay span:before { content: ""; position: absolute; width: calc(100% - .45rem); height: 1px; bottom: .5rem; left: 0; background-color: #FFF; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
.top-bar-right .menu li a:hover:before, .video-replay:hover span:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); background-color: #DD9901; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }

/*********************
OFF-CANVAS STYLES
*********************/
.off-canvas-content { background: rgba(255,255,255,.025); position: relative; }
.position-right { width: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); }
.off-canvas { background: #BFBFBF; }
.off-canvas.is-open { -webkit-transition: all .75s ease-in-out; transition: all .75s ease-in-out; }
.off-canvas.is-closed { -webkit-transition: all .75s ease-in-out; transition: all .75s ease-in-out; }
.off-canvas-content.is-open-right.has-transition-push { -webkit-transform: translateX(-10%); transform: translateX(-10%); -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.off-canvas-content.has-transition-push { -webkit-transform: translate(0,0); transform: translate(0,0); -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

/*********************
TAKEOVER VIDEO
*********************/
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: #000; z-index: 1; text-align: center; overflow: hidden; }
.takeover-video { margin: 0 auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.play-control { position: absolute; top: 3rem; left: 3rem; z-index: 3; color: #FFF; text-transform: uppercase; font-family: azo-sans-web, sans-serif; font-style: normal; font-weight: 400; }
.mute-control { position: absolute; bottom: 3rem; right: 3rem; z-index: 3; color: #FFF; text-transform: uppercase; font-family: azo-sans-web, sans-serif; font-style: normal; font-weight: 400; }

/*********************
CONTENT/INNER-CONTENT STYLES
*********************/
.page-home .content, .page-video-takeover .content { overflow: hidden; }
.inner-content { height: 100%; }
.grid-container { min-width: 90%; max-width: 90%; height: 100%; padding: 0; }
.page-home .grid-container, .page-video-takeover .grid-container { left: 5% !important; }
.page-home .service-list.grid-container, .page-video-takeover .service-list.grid-container { left: 0 !important; min-width: 100%; max-width: 100%; }
.home-services { margin-top: 3rem; }

/*********************
CONTACT FORM STYLES
*********************/
.gform_body ul { list-style: none outside none; margin: 0; }
.contact-form { padding: 2.5rem; background: rgb(79,79,79); background: -webkit-gradient(linear, left top, right top, from(rgba(79,79,79,1)), to(rgba(211,211,211,1))); background: linear-gradient(90deg, rgba(79,79,79,1) 0%, rgba(211,211,211,1) 100%); }
.contact-form ul li { border-bottom: 1px solid #E5AA0C; margin-bottom: 4rem; }
.contact-form ul li > label { -ms-flex-negative: 1; flex-shrink: 1; padding: .5rem; color: #FFF; text-transform: uppercase; font-size: 1rem; font-family: azo-sans-web, sans-serif; font-style: normal; font-weight: 500;     height: 2.4375rem; letter-spacing: .075rem; }
.contact-form ul li > .ginput_container { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
.ginput_container label { display: none; }
.name-field span { width: 100%; display: inline-block; }
.name-field .ginput_complex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
.ginput_container input, .ginput_container textarea { background: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; margin: 0; }
.contact-form input:focus, .contact-form textarea:focus { border: 0; }
input[type=submit] { color: #FFF; text-transform: uppercase; border: 0; padding: 0; width: 60%; letter-spacing: .125rem; text-align: center; font-family: azo-sans-web, sans-serif; font-style: normal; font-weight: 400; line-height: 4rem; margin-top: 1rem; font-size: 1rem; background: rgb(255,180,11); background: -webkit-gradient(linear, left top, right top, from(rgba(255,180,11,1)), to(rgba(217,150,0,1))); background: linear-gradient(90deg, rgba(255,180,11,1) 0%, rgba(217,150,0,1) 100%); -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
input[type=submit]:hover { color: #000; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; /*letter-spacing: .45rem;*/ }
.contact-form textarea { height: 2.4375rem; }
.gform_footer { text-align: center; }
[type=text]:focus, textarea:focus, .ginput_container input, .ginput_container .textarea { background: transparent; -webkit-box-shadow: none; box-shadow: none; font-family: azo-sans-web, sans-serif; color: #FFF; letter-spacing: .075rem; text-transform: uppercase; font-weight: 400; font-size: 1rem; padding-bottom: .25rem; }
.textarea, .textarea:focus { padding-top: .625rem !important; padding-bottom: .25rem !important; }
.contact-form .close-button { color: #DD9901; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.contact-form .close-button:hover { color: #000; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }

/*********************
HOME PAGE STYLES
*********************/
.page-home .content p, .page-video-takeover .content p { font-size: 1rem; line-height: 1.375rem; letter-spacing: .05rem; }
.page-home .inner-content .service-list p, .page-video-takeover .inner-content .service-list p { font-size: 2rem; margin-bottom: 1.5rem; }

/*********************
FOOTER STYLES
*********************/
.footer { background: transparent; clear: both; padding: 6% 0 3%; }
.footer a, .footer p { color: #FFF; margin-bottom: 1rem; font-size: .75rem; }
.copyright { letter-spacing: .05rem; text-align: center; }
.inner-footer { position: relative; width: 100%; }
.inner-footer > .cell { text-align: center; }
.inner-footer-links a { display: inline-block; min-width: 134px; padding-bottom: 1rem; letter-spacing: .100rem; position: relative; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; text-align: center; }
.contact-info a { letter-spacing: .075rem; display: block; }
.contact-address { margin-top: 1rem; }
.inner-footer-links { position: relative; }
.inner-footer-links a:before { content: ""; position: absolute; width: calc(100% - .45rem); height: 1px; bottom: .5rem; left: 0; background-color: #FFF; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.inner-footer-links a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); background-color: #DD9901; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.contact-info a { color: #FFF; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.contact-info a:hover { color: #DD9901; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; }
.inner-footer-links a { margin-bottom: 0; }

/*********************
MISC STYLES
*********************/
#map { height: 500px; } /***For Testing Map Script***/
::-moz-selection { background: rgb(255,180,11); color: #000; }
::selection { background: rgb(255,180,11); color: #000; }
.js-off-canvas-overlay { background: transparent; }
.fource-bg-layer { width: 103%; position: absolute; z-index: -1; left: -1.5%; }


/************************************************************/
/************************************************************/
/************************************************************/

/*************************************************
MAKE THE FOOTER STICK TO THE BOTTOM
*************************************************/
.off-canvas-wrapper { overflow-y: visible; }
.off-canvas-content { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
header, footer { -ms-flex-negative: 0; flex-shrink: 0; }
.content { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; }

/*************************************************
BACKGROUND TRANSFORM BASED ON CURSOR
*************************************************/
#scene { -webkit-perspective: 25px; perspective: 25px; }
#rotate-container { -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; }

/************************************************************/
/************************************************************/
/************************************************************/


/******************
***Media Queries***
******************/
@media screen and (min-width: 35rem) {
    .inner-footer > .cell { text-align: left; }
    /*.inner-footer a:not(.contact-phone) { position: absolute; top: 0; right: 0; width: 180px; }*/
    .inner-footer a:not(.contact-phone):not(.contact-address) { letter-spacing: .25rem; font-size: .75rem; }
    /*.footer a:hover:before { content: ''; background: #DD9901; height: 3px; width: 3px; display: inline-block; position: absolute; bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 50%; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }*/
    .inner-footer a:not(.contact-phone):not(.contact-address):hover { letter-spacing: .45rem; color: #FFF; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
}

/*************************
***Media Queries:Medium/Mobile***
*************************/
@media screen and (min-width: 40rem) {
    h1 { font-size: 7rem; }
    h1 span { font-size: 2.25rem; }
    .top-bar-right .menu li a { font-size: .75rem; letter-spacing: .25rem; width: auto; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; min-width: 110px; text-align: center; }
    .top-bar-right .menu li a:hover { letter-spacing: .45rem; color: #FFF; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    /*.top-bar-right .menu li a:hover:before { content: ''; background: #DD9901; height: 3px; width: 3px; display: inline-block; position: absolute; bottom: 15px; -webkit-transform: translateX(-50%); transform: translateX(-50%); left: 48%; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }*/
    .page-home .inner-content .service-list p, .page-video-takeover .inner-content .service-list p { font-size: 2rem; margin-bottom: 1.5rem; }
    @media screen (max-width: 47.9375rem) { .grid-x > .medium-8 { width: 100%; } }
}

/************************
***Media Queries:Medium/Tablet***
************************/
@media screen and (min-width: 48rem) {    
    .position-right { width: 30%; -webkit-transform: translateX(100%); transform: translateX(100%); }
    .inner-footer > .cell { text-align: center; }
    .contact-info { text-align: left; }
    .page-home .inner-content p, .page-video-takeover .inner-content p { font-size: 1.25rem; line-height: 1.875rem; width: 58%; }
    .page-home .inner-content p.first, .page-video-takeover .inner-content p.first { font-size: 1.75rem; line-height: 2.25rem; width: 100%;}
    .page-design-lab .inner-content p.first { font-size: 1.75rem; line-height: 2.25rem; width: 100%;}
    .page-home .inner-content p.second, .page-video-takeover .inner-content p.second { font-size: 1.5rem; line-height: 2rem; width: 100%; }
    .page-video-takeover .service-list > div, .page-home .service-list > div { width: 50%; }
}

/************************
***Media Queries:Desktop***
************************/
@media screen and (min-width: 64rem) {
    .service-list { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
    .page-home .inner-content .service-list p, .page-video-takeover .inner-content .service-list p { font-size: 2.5rem; margin-bottom: 0; }
    .page-home .inner-content p.second, .page-video-takeover .inner-content p.second { font-size: 1.5rem; line-height: 2rem; width: 50%; }
    .page-video-takeover .service-list > div, .page-home .service-list > div { width: auto; }
}

/************************
***Media Queries:Large Desktop***
************************/
@media screen and (min-width: 75rem) {
    .page-home .service-list.grid-container, .page-video-takeover .service-list.grid-container { min-width: 90%; max-width: 90%; margin: 0; }
}