/* --- page reset --- */
html{ font-family:sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%}
body{ margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{ display:block}
audio,canvas,progress,video{ display:inline-block; vertical-align:baseline}
a{ background-color:transparent}
a:active,a:hover{ outline:0}
b,strong{ font-weight:bold}
img{ border:0}
svg:not(:root){ overflow:hidden}
figure{ margin:1em 40px;}
hr{ -moz-box-sizing:content-box; box-sizing:content-box; height:0}
button,input,optgroup,select,textarea{ color:inherit; font:inherit; margin:0}
button{ overflow:visible}
button,select{ text-transform:none}
button, html input[type="button"],input[type="reset"],input[type="submit"]{ -webkit-appearance:button; cursor:pointer}
button[disabled], html input[disabled]{ cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{ border:0; padding:0}
input{ line-height:normal}
input[type="checkbox"],input[type="radio"]{ box-sizing:border-box; padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{ height:auto}
input[type="search"]{ -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{ -webkit-appearance:none}
fieldset{ border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em}
legend{ border:0; padding:0}
textarea{ overflow:auto}
optgroup{ font-weight:bold}
table{ border-collapse:collapse; border-spacing:0}
td, th{ padding:0}
*, *:before, *:after{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
nav ul,nav li{ margin:0; list-style:none; list-style-image:none}
a,a:active,a:visited,a:hover{ color:#525f5d; text-decoration:none}
fieldset{ padding:0; margin:0; border:none}/* --- page public --- */
html,body{ height:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
 html,body,div,span,h1,h2,h3,h4,h5,h6,p,img,ul{ margin:0; padding:0; border:0}
body{ font-size:100%; background-color:#fff; overflow-x:hidden}
body::selection{ background:#32c8ff; color:#fff}
body::-moz-selection{ background:#32c8ff; color:#fff}
section,header,footer{ position:relative; width:100%; z-index:1; overflow-x:hidden; padding:0 50px}
section{ background-color:#fff}
section p, footer p{ font:400 15px/1.6 "proxima-nova", sans-serif; color:#525f5d}

input{ -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}
input:focus,textarea:focus,select:focus{ outline:none}
 html{ -webkit-text-size-adjust:none; -ms-text-size-adjust:none}
input,textarea,button{ -webkit-appearance:none; -webkit-border-radius:0; border:none}
input[type="submit"]::-moz-focus-inner,[type="button"]::-moz-focus-inner{ padding:0; border:0; margin-top:-4px}

ul, ol {list-style: none;padding: 0}
a:focus{ outline:none}

@-webkit-keyframes spin{
    0%{ -webkit-transform:rotate(0deg)}
    100%{ -webkit-transform:rotate(360deg)}
}
@keyframes spin{
    0%{ transform:rotate(0deg)}
    100%{ transform:rotate(360deg)}
}
.fixed{ position:fixed; top:0; left:0}
.bgcover{ background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
.justify{ text-align:justify; -ms-text-justify:distribute-all-lines; text-justify:distribute-all-lines}
.spacer{ width:100%; height:auto}
.filler{ visibility:hidden}
.hidden{ opacity:0; visibility:hidden}

.arrow.down{ position:absolute; font-size:128px; left:50%; width:10px; margin-left:-5px; color:#fff; overflow:hidden}
.arrow.down .arr{ position:absolute; left:0; top:0}
.arrow.right{ font-size:8em; overflow:hidden}
.arrow.right .arr{ position:absolute; left:0; top:0}
.arrow.up{ font-size:36px; overflow:hidden; width:10px; height:50px}
.arrow.up .arr{ position:absolute; left:0; top:0}

/* Loader */
#loader{ position:fixed; top:0; left:0; width:100%; height:100%; background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; z-index:50; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; background-color:none!important;}
#loader .loader-icon{ width:150px; height:110px; display:inline-block; position:relative}
#loader .loader-top{ position:absolute; left:0; bottom:0; overflow:hidden; width:100%; height:0px}
#loader .loader-top div{ width:100%; height:100%; position:absolute; left:0; top:0; top:-110px; height:110px; font-size:110px; color:#fff; padding-left:5px}
#loader .loader-bot{ width:100%; height:100%; position:absolute; left:0; top:0; font-size:110px; color:#e95330; padding-left:5px}

/* font */
@font-face{
    font-family:'icomoon';
    src:url('../f/icomoon-meai0i.eot');
    src:url('../f/icomoon-meai0i.eot#iefix') format('embedded-opentype'),url('../f/icomoon-meai0i.woff2') format('woff2'),url('../f/icomoon-meai0i.ttf') format('truetype'),url('../f/icomoon-meai0i.woff') format('woff'),url('../f/icomoon-meai0i.svg#icomoon') format('svg');
    font-weight:normal;
    font-style:normal;
    font-display: block;
}

.btn{ position:relative; display:inline-block; vertical-align:middle; text-align:center; color:#fff; font-weight:normal; font-size:14px; white-space:nowrap; cursor:pointer; text-decoration:none; border:1px solid transparent; background-color:#324396; box-sizing:border-box; -webkit-transition:all 0.1s; -moz-transition:all 0.1s; transition:all 0.1s; padding:10px 25px; line-height:16px;}
.btn:focus,.btn:active{ outline:0!important}
.btn:hover{ text-decoration:none}
.btn:hover{ border:1px solid currentColor; text-decoration:none; color:#324396; background-color:transparent}
.btn:before{ content:''; display:none; position:absolute; width:16px; height:16px; margin:.2em 0 0 -1.6em; vertical-align:middle;}
.btn-outline{ color:#fff!important; background-color:transparent; border:1px solid currentColor}
.btn-outline:hover{ color:#324396!important; background-color:#fff; border:1px solid transparent}/* --- page layout --- */
.contentContainer {position:relative; width:100%; height:100%; max-width:1170px; margin:0 auto}
section .contentContainer > h2 { font:700 normal 33px "brandon-grotesque", sans-serif; width:100%; text-align:center}

a[hlink*="智链"] {visibility: hidden!important}
.hero-text a{color: #fff}

/* header */
#globalHeader{ position:fixed; top:0; left:0; width:100%; height:150px; z-index:20}
#globalHeader .headerTop{ top:0}
#globalHeader .logo{ z-index:2; position:absolute; left:0; top:53px; width: 225px; height:60px; background:url(../i/logo_w.svg) no-repeat;}
#globalHeader .logo.cur{ background:url(../i/logo_n.svg) no-repeat;}
#globalHeader .logo span{ position:absolute; left:0; top:0; color:#fff; font-size:60px}
#globalHeader .logo a{ display:block; width:100%; height:100%;}
#globalHeader .menu-icon{ position:absolute; top:30px; right:0; width:32px; height:31px; cursor:pointer; z-index:2}
#page-home #globalHeader .menu-icon{ display:none; visibility:hidden;}
#globalHeader .menu-icon .menu-line{ position:absolute; left:0; top:0; width:32px; height:4px; background-color:#fff}
#globalHeader .menu-icon .menu-line.mid{ top:14px; background-color:transparent}
#globalHeader .menu-icon .menu-line.mid .menu-line{ width:16px}
#globalHeader .menu-icon .menu-line.mid .menu-line.left{ left:0}
#globalHeader .menu-icon .menu-line.mid .menu-line.right{ right:0; left:auto}
#globalHeader .menu-icon .menu-line.bot{ top:27px}
#globalHeader .social{ position:absolute; top:70px; left:0; width:100%; text-align:center; display:none; opacity:0; padding:0 80px 0 240px; z-index:1}
#globalHeader .social li{ display:inline-block; width:38px; height:38px; background-color:#fff; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; -o-transition:background-color 0.2s linear; transition:background-color 0.2s linear}
#globalHeader .social li~li{ margin-left:12px}
#globalHeader .social span{ color:#32c8ff; font-size:36px; line-height:38px; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; -o-transition:color 0.2s linear; transition:color 0.2s linear}
#globalHeader .social a{ display:block; width:100%; height:100%}
#globalHeader .tier-title{ position:absolute; top:60px; width:100%; text-align:center}
#globalHeader .tier-title h1{ font:700 normal 33px "brandon-grotesque", sans-serif; color:#fff}
#globalHeader .sticky-bar{ position:absolute; left:0; top:0; width:100%; height:88px; top:-88px; background-color:#fff; border-bottom:1px solid rgba(241, 89, 42, 0.1)}

/* globalmenu */
#global-menu {visibility: hidden;position: absolute;top: 30px;right: 0;list-style: none;}
#global-menu li {display: inline-block;}
#global-menu li a {position: relative;display: inline-block;margin: 0 20px;line-height: 30px;font-weight: 500;color: #fff;}
#global-menu li:last-child a {margin-right: 0;}
#global-menu li.active a:after {content: '';display: block;position: absolute;left: 0;bottom: -6px;width: 100%;height: 3px;background: currentColor;}
.logo.cur + .menu-icon + #global-menu {visibility: visible;}
.logo.cur + .menu-icon + #global-menu li a {color: #172a88;}
.logo.cur + .menu-icon + #global-menu li.active a {/*color: #e83828;*/}

/* menu overlay */
#menu-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; display:none; opacity:0; z-index:19; background-color:#1c2335}
#menu-overlay .social{ position:absolute; bottom:38px; left:0; text-align:center}
#menu-overlay .social li{ display:inline-block; width:38px; height:38px; background-color:#fff; -webkit-transition:background-color 0.2s linear; -moz-transition:background-color 0.2s linear; -o-transition:background-color 0.2s linear; transition:background-color 0.2s linear}
#menu-overlay .social li~li{ margin-left:12px}
#menu-overlay .social span{ color:#32c8ff; font-size:36px; line-height:38px; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; -o-transition:color 0.2s linear; transition:color 0.2s linear}
#menu-overlay .social a{ display:block; width:100%; height:100%}

/* globalNav */
#globalNav{ width:100%; height:100%; position:absolute; left:0; top:0; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:flex-start; -ms-flex-align:flex-start; align-items:flex-start; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; z-index:2}
#globalNav ul{ width:100%; margin-top:40px}
#globalNav li{ padding:17px 50px; position:relative}
#globalNav a{ font:500 normal 3.2em/1 "brandon-grotesque", sans-serif; color:#fff; display:block; width:100%; max-width:1120px; margin:0 auto; position:relative}
#globalNav li~li{ margin-top:5px}
#globalNav .hover{ width:100%; height:100%; position:absolute; left:0; top:0; background-color:#1c2335; transform-origin:center; -webkit-transform:scaleY(0); -moz-transform:scaleY(0); -ms-transform:scaleY(0); -o-transform:scaleY(0)}




/* hero */
#hero {background: lightpink}
#hero, #home-slider{ position:relative; width:100%; height:60%; background-color:rgba(75, 75, 75, 0.4); overflow:hidden}
#hero footer{ bottom:-20px}
#hero .hero-text{ width:100%; height:100%; position:absolute; left:0; top:0; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:flex-start; -ms-flex-align:flex-start; align-items:flex-start; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; padding-top:8rem; opacity:0}
#hero .hero-text>div{ width:100%; max-width:1100px; margin:0 auto; position:relative}
#hero .hero-text h2, #home-slider h2{ font:700 normal 3.5em "brandon-grotesque", sans-serif; color:#fff}
#hero .hero-text p, #home-slider p{ font:300 2em/1.4 "proxima-nova", sans-serif; color:#fff; max-width:600px}
#hero .hero-text .cta-btn{ position:relative; margin-top:32px; width:80px; opacity:0}
#hero .hero-text .cta-btn .circ{ width:80px; height:80px; border-radius:80px; background-color:#32c8ff; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; cursor:pointer}
#hero .hero-text .cta-btn p{ text-align:center; font:700 13px/1.4 "proxima-nova", sans-serif; letter-spacing:.08em; color:#fff}
#hero .hero-text .cta-btn .arrow{ top:70px; height:100px}
#hero .hero-text .cta-btn .arrow .arr{ top:-65px; top:-105px; opacity:0}

/* footer */
#globalFooter{ z-index:-2; left:0; bottom:0; background-color:#1c2335; padding:80px 50px 30px}
#globalFooter .contentContainer{ max-width:1170px}
#globalFooter p{ color:#7b86bb}
#globalFooter .legal p{ color:#434b71;}
#globalFooter a{ color:#7b86bb}
#globalFooter .row{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch}
#globalFooter .main .col.left{ width:70%; max-width:360px}
#globalFooter .main .col.right{ width:20%; max-width:141px}
#globalFooter .main .col.right img{ width:100%; height:auto; display:block}
#globalFooter .main .cr{ display:none; margin:30px 0;}
#globalFooter .QRcode{ width:150px; height:150px; background:url(../i/26.jpg) no-repeat center center; -webkit-background-size:cover; background-size:cover;}
#globalFooter .footer-text .col:nth-child(1){ width:50%; max-width:180px;}
#globalFooter .footer-text .col:nth-child(2){ width:40%; max-width:105px}
#globalFooter .footer-text .col:nth-child(3){ width:40%}
#globalFooter .footer-nav li{ font:400 15px/1.6 "proxima-nova", sans-serif}
#globalFooter .footer-nav li~li{ margin-top:.5em}
#globalFooter .social{ margin:18px 0 0 -10px}
#globalFooter .social li{ display:inline-block}
#globalFooter .social li~li{ margin-left:12px}
#globalFooter .social span{ color:#7b86bb; font-size:30px}
#globalFooter .arr-btn p,#globalFooter .arr-btn .arrow{ color:#7b86bb}
#globalFooter .arr-btn .arrow{ margin-top:8px}
#globalFooter .legal{ margin-top:20px}
#globalFooter .legal .cr{ margin-bottom:15px}
#globalFooter .legal .col.right{ width:20%; max-width:141px; text-align:center}
#globalFooter .top-btn{ display:inline-block; cursor:pointer}
#globalFooter .top-btn .arrow,#globalFooter .top-btn p{ display:inline-block; vertical-align:middle; letter-spacing:.05em}
#globalFooter .top-btn .arrow{ margin:-35px 6px 0 0; position:relative}
#globalFooter .top-btn .arr{ color:#fff; bottom:-20px; top:auto}

/* video overlay */
/* #video-overlay{ position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; opacity:0; z-index:60}
#video-overlay .blanket{ position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:#000; opacity:.9; z-index:1}
#video-overlay .overlayWrap{ width:100%; height:100%; position:fixed; padding:40px 4%; -webkit-transform:translateZ(0); overflow-x:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch; z-index:30}
#video-overlay .contentContainer{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; height:auto; min-height:100%; max-width:1920px}
#video-overlay #video-contents{ position:relative}
#video-overlay .video-spacer{ width:100%; height:auto}
#video-overlay video{ width:100%; height:100%; position:absolute; left:0; top:0}
#video-overlay .close-btn{ position:absolute; right:0px; top:-35px; width:30px; height:30px; cursor:pointer}
#video-overlay .close-btn .close-line{ position:absolute; left:0; top:0; width:20px; top:13px; left:5px; height:4px; background-color:#fff}
#video-overlay .close-btn .close-line.left{ -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg)}
#video-overlay .close-btn .close-line.right{ -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg)}
#video-overlay .close-btn .close-hover{ width:100%; height:100%; position:absolute; left:0; top:0; background-color:#32c8ff; width:0; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; transition:all 0.2s ease-out} */

/* tier-hero */
#tier-hero{ position:relative; width:100%; height:65%; background:#1c2335;}
#tier-hero .tier-hero-photo{ background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; width:100%; height:100%; position:absolute; left:0; top:0}
 #tier-hero footer{ bottom:45px}
#tier-hero .hero-text{ width:100%; height:100%; position:absolute; left:0; top:0; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:flex-start; -ms-flex-align:flex-start; align-items:flex-start; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center}
#tier-hero .hero-text>div{ width:100%; max-width:750px; margin:0 auto; position:relative; padding:40px 45px 45px 40px}
#tier-hero .hero-text h2,#tier-hero .hero-text p{ position:relative; z-index:1}
#tier-hero .hero-text h2{ font:400 normal 3em "brandon-grotesque", sans-serif; color:#fff; margin-bottom:10px}
#tier-hero .hero-text p{ font:300 2.125em/1.4 "proxima-nova", sans-serif; color:#fff}
#tier-hero .bracket-lines .bracket{ width:48%; max-width:360px; height:70px}
#tier-hero .bracket-lines .bracket [class^="line-"]{ background-color:#fff; opacity:.8}
.tier-title-mobile{ position:absolute; top:80px; left:0; width:100%; text-align:center; display:none}
.tier-title-mobile h1{ font:700 normal 33px "brandon-grotesque", sans-serif; color:#fff}
body.white .tier-title-mobile h1,#page-capabilities .tier-title-mobile h1{ color:#172a88}
.bracket-lines{ width:100%; height:100%; position:absolute; left:0; top:0}
.bracket-lines.bracket{ position:absolute}
.bracket-lines.bracket.left{ left:0}
.bracket-lines .bracket.left .line-h,.bracket-lines .bracket.left .line-v{ left:0}
.bracket-lines .bracket.left .line-h{ transform-origin:right}
.bracket-lines.bracket.right{ right:0}
.bracket-lines .bracket.right .line-h,.bracket-lines .bracket.right .line-v{ right:0}
.bracket-lines .bracket.right .line-h{ transform-origin:left}
.bracket-lines.bracket.top{ top:0}
.bracket-lines .bracket.top .line-h,.bracket-lines .bracket.top .line-v{ top:0}
.bracket-lines .bracket.top .line-v{ transform-origin:top}
.bracket-lines.bracket.bot{ bottom:0}
.bracket-lines .bracket.bot .line-h,.bracket-lines .bracket.bot .line-v{ bottom:0}
.bracket-lines .bracket.bot .line-v{ transform-origin:bottom}
.bracket-lines .bracket [class^="line-"]{ position:absolute}
.bracket-lines .bracket .line-h{ width:100%; height:1px; -webkit-transform:scaleX(0); -moz-transform:scaleX(0); -ms-transform:scaleX(0); -o-transform:scaleX(0)}
.bracket-lines .bracket .line-v{ width:1px; height:100%; -webkit-transform:scaleY(0); -moz-transform:scaleY(0); -ms-transform:scaleY(0); -o-transform:scaleY(0)}

/* tier-request */
#tier-request{ background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; padding-top:80px; padding-bottom:80px}
#tier-request .contentContainer{ max-width:1080px}
#tier-request .row{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch}
#tier-request h2{ font:700 normal 3.2em/1.2 "brandon-grotesque", sans-serif; color:#fff}
#tier-request h2 > a{ color:#fff!important}
.icon-pmg.loader-bot{ background:url(../i/logo_w.svg) no-repeat; background-size:100% auto;}
#tier-request .icon-pmg{ font-size:85px; color:#00628c; opacity:.4; margin-bottom:12px}
#tier-request .col.left{ width:47%; max-width:360px}
#tier-request .col.right{ width:53%; max-width:580px; padding:33px 0 0 30px}
#tier-request .col.right>p{ font:400 18px/1.7 "proxima-nova", sans-serif; color:#fff}
#tier-request .arr-btn{ margin-top:55px}
#tier-request .arr-btn p,#tier-request .arr-btn .arrow{ color:#fff}

#page-request #globalHeader .logo .logo1{ color:#324396}
#page-request #globalHeader .logo .logo2{ color:#1c2335}
#page-request #globalHeader .menu-icon{ position:absolute; top:70px; right:0; width:32px; height:31px; cursor:pointer; z-index:2}
#page-request #globalHeader .menu-icon .menu-line{ background-color:#32c8ff}
#page-request #globalHeader .tier-title h1{ color:#32c8ff; opacity:0}
#page-request #tier-hero .hero-text h2,#page-request #tier-hero .hero-text p{ color:#32c8ff}
#page-request #tier-hero .bracket-lines .bracket [class^="line-"]{ background-color:#32c8ff; opacity:1}
#page-request .cover{ position:fixed; top:0; left:0; width:100%; height:100%; background-color:#fff; z-index:1}

/* projects */
#projects{ background-color:#1c2335; padding-top:130px; padding-bottom:90px}
#projects .contentContainer{ max-width:875px; padding:50px}
#projects h3{ font:400 20px "proxima-nova", sans-serif; color:#fff; width:100%; text-align:center; position:absolute; left:0; top:0; top:0px}
#projects .video-hover-title{ z-index:-5; position:absolute; top:50%; margin-top:-55px; width:2000px; left:50%; margin-left:-1000px; opacity:0; visibility:hidden}
#projects .video-hover-title h4{ width:100%; text-align:center; font:700 normal 6em "brandon-grotesque", sans-serif; color:#2c354c;}
#projects .project-box{ display:inline-block; position:relative; width:50%;}
#projects .project-box~.project-box{ margin-top:30px}
#projects .project-box[data-title="And Now You Know Episode 2"] video{ width:101%; height:101%; margin-left:-2px; margin-top:-1px}
#projects .project-thumb{ width:100%; max-width:775px; margin:0 auto; position:relative; cursor:pointer; margin-top:5px}
#projects .project-thumb>img{ display:block; width:100%; height:auto; max-height:45vh;}
#projects .project-thumb .project-hover{ width:100%; height:100%; position:absolute; left:0; top:0; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center}
#projects .project-thumb .cover{ width:100%; height:100%; position:absolute; left:0; top:0; background-color:#32c8ff; opacity:0; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear; -o-transition:opacity 0.2s linear; transition:opacity 0.2s linear}
#projects .project-thumb .thumb-vid{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:0; overflow:hidden}
#projects .project-thumb .thumb-vid video{ position:relative}
#projects .bracket-lines .bracket{ width:420px; height:70px}
#projects .bracket-lines .bracket [class^="line-"]{ background-color:#79797d}
#projects .projects-more{ cursor:pointer; width:100%; max-width:600px; margin:0 auto; margin-top:140px}
#projects .projects-more a{ font:700 normal 33px/1.2 "brandon-grotesque", sans-serif; color:#fff; text-align:center}
#projects .projects-more .arrow{ width:100%; max-width:90px; margin:0 auto; height:12px; margin-top:15px; position:relative; padding-left:10px}
#projects .projects-more .arrow .arr{ left:-85px; color:#32c8ff; font-size:12px}
#projects video{ background-size:cover; width:100%; height:100%}@import "./a_reset.css";
@import "./b_public.css";
@import "./c_layout.css";
@import './p_home.css';
@import './p_capabilities.css';
@import './p_partners.css';
@import './p_studio.css';
@import './p_about.css';
@import './p_join.css';
@import './z_media.css';
/* --- page about --- */
#about{ padding-top:70px; padding-bottom:90px; z-index:2; overflow:visible}
#about h2{ font:400 normal 3em/1.2 "brandon-grotesque", sans-serif; color:#172a88}
#about .about-text{ width:100%; max-width:1120px; margin:0 auto;overflow:hidden}
#about .about-text:after{ clear:left; content:''; display:block}
#about .about-text .col.left{ width:320px; float:left}
#about .about-text .col.right{ width:auto; padding-left:50px; margin-left:320px; overflow:hidden}
#about .about-text > p{ margin-bottom:.75em; font:400 18px/1.7 "proxima-nova", sans-serif; color:#525f5d; /*float:right*/}
#about .about-text .col p~p{ margin-top:15px}
#about .about-text .col p.mob{ float:none; max-width:none}

#about .bigletters{ width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden}
#about .bigletters .contentContainer{ max-width:1170px}
#about .bigletter{ font:900 500px "brandon-grotesque", sans-serif; color:#f4f4f4; position:absolute; pointer-events:none}
#about .bigletter.p{ top:540px; left:-150px}
#about .bigletter.g{ top:1950px; left:100px}
#about .bigletter.m{ top:1200px; right:-170px}

#studio-details{ background-color:#1c2335; text-align:center; padding-top:90px; padding-bottom:80px; z-index:1}
#studio-details .contentContainer{ max-width:1170px}
#studio-details h2{ color:#fff; margin-bottom:25px}
#studio-details p{ font:400 14px/1.7 "proxima-nova", sans-serif;  width:100%; max-width:800px; margin:0 auto}
#studio-details p > * {color:#7b86bb!important;}
#studio-details .studio-grid{ margin-top:30px; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch}
#studio-details .studio-grid .studio-box{ position:relative; width:50%; padding:40px 8% 40px; box-sizing:border-box;}
#studio-details .studio-grid .studio-box p{ font-size:14px; text-align:left;}
#studio-details .studio-grid .studio-box .uname{ font-size:22px; margin-bottom:.25em; font-weight:500; line-height:1.5; color:#fff; text-align:center;}
#studio-details .studio-grid .studio-box p.ttl{ font-weight:16px; text-align:center;}
#studio-details .studio-grid .studio-box p.ttl > em{ font-style:normal;}
#studio-details .studio-grid .studio-box p.intro{ margin-top:1.2em; color:rgba(255, 255, 255,.4)}
#studio-details .studio-grid .studio-box .bracket-line{ position:absolute; background-color:#1c2335}
#studio-details .studio-grid .studio-box .bracket-line.top,#studio-details .studio-grid .studio-box .bracket-line.bot{ width:10%; height:1px; left:45%}
#studio-details .studio-grid .studio-box .bracket-line.top{ top:-1px}
#studio-details .studio-grid .studio-box .bracket-line.bot{ bottom:-1px}
#studio-details .studio-grid .studio-box .bracket-line.left,#studio-details .studio-grid .studio-box .bracket-line.right{ height:60%; width:1px; top:20%}
#studio-details .studio-grid .studio-box .bracket-line.left{ left:-1px}
#studio-details .studio-grid .studio-box .bracket-line.right{ right:-1px}
#studio-details .studio-grid .icon{ font-size:50px; color:#324396; margin-bottom:.6em}
#studio-details .studio-grid .icon i.i{ display:inline-block; width:100px; height:100px; border-radius:50%; background:#324396 no-repeat center center; -webkit-background-size:cover; background-size:cover;}
#studio-details .studio-grid p{ font:400 15px/1.6 "proxima-nova", sans-serif; color:#fff; width:100%; max-width:480px; margin:0 auto}

#about .about-box{ position:absolute; width:100%; max-width:320px}
#about .about-box h2{ font:400 normal 3em/1.2 "brandon-grotesque", sans-serif; color:#32c8ff}
#about .about-box h3{ font:700 normal 33px "brandon-grotesque", sans-serif; color:#fff; margin:10px 0 15px}
#about .about-box p{ font:400 20px "proxima-nova", sans-serif; color:#fff}
#about .about-box .top{ padding:3.5em 4.5em 6.8em; position:relative}
#about .about-box .top .pmg-icon{ position:absolute; width:100%; height:52px; left:0; bottom:0; text-align:center; overflow:hidden}
#about .about-box .top .pmg-icon .icon-pmg{ color:#fee93c; font-size:87px}
#about .about-box .bot{ background-color:#324396; text-align:center; height:305px; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; position:relative}
#about .about-box .bot .pmg-icon{ position:absolute; width:100%; height:35px; left:0; top:0; text-align:center; overflow:hidden}
#about .about-box .bot .pmg-icon .icon-pmg{ color:#fee93c; font-size:85px; display:block; margin-top:-52px; opacity:.5}
#about .about-box .arrow{ bottom:-67px; height:100px}
#about .about-box .arrow .arr{ top:-65px}
#about .bigletters{ width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden}
#about .bigletters .contentContainer{ max-width:1170px}
#about .bigletter{ font:900 500px "brandon-grotesque", sans-serif; color:#f4f4f4; position:absolute; pointer-events:none}
#about .bigletter.p{ top:540px; left:-150px}
#about .bigletter.g{ top:1950px; left:100px}
#about .bigletter.m{ top:1200px; right:-170px}

/* studio life */
#studio-life{ padding-bottom:60px;}
#studio-life .studio-images{ width:100%; max-width:1170px; padding-top:110px; margin:0 auto; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch;}
.studio-gallery{ margin:90px auto 0;}
.studio-gallery .gallery{ display:inline-block; position:relative; width:24%; min-height:160px; margin-bottom:20px; margin-right:1%; -webkit-background-size:cover; background-size:cover; background-position:center center;}
.gallery:before{ content:''; display:block; opacity:1; position:absolute; width:100%; height:100%; background:rgba(0,0,0,.2); transition:text-indent .4s, opacity .4s; transition-delay:.1s}
.gallery:hover:before{ opacity:0}
.studio-gallery .gallery > img{ display:none;}
#studio-life .studio-images .col.left{ width:43%; max-width:473px}
#studio-life .studio-images .col.right{ width:53%; max-width:618px; margin-top:135px}
#studio-life .studio-images .studio-image{ width:100%; max-height:44vh; position:relative; overflow:hidden}
#studio-life .studio-images .studio-image img{ width:100%; height:auto; display:block; padding-bottom:20px}
#studio-life .studio-images .studio-image .hover-line{ position:absolute; left:0; bottom:0; width:100%; height:3px; background-color:#32c8ff}
#studio-life .studio-images .studio-image .hover .txt{ width:100%; height:100%; position:absolute; left:0; top:0; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; padding:0 5px}
#studio-life .studio-images .studio-image .img-cover{ width:100%; position:absolute; left:0; top:0; height:100%; overflow:hidden}
#studio-life .studio-images .studio-image .img-cover>img{ position:absolute; left:0; top:0}
#studio-life .studio-images .studio-image{ cursor:pointer;}
#studio-life .studio-images .studio-image:not([data-num="3"]){ height:280px;}
#studio-life .studio-images .studio-image[data-num="2"]{ height:390px; max-height:inherit;}
#studio-life .studio-images .studio-image[data-num="3"]{ height:315px; margin-top:165px;}
#studio-life .studio-images .studio-image[data-num="3"] img{ padding:0}
#studio-life .studio-images .studio-image[data-num="4"]{ margin-top:120px; max-width:475px; min-height:520px;}
#studio-life .studio-images .studio-image p{ font:700 normal 27px/1.3 "brandon-grotesque", sans-serif; color:#fff; width:100%; max-width:340px; margin:0 auto; text-align:center}
#studio-life .studio-images .studio-image[data-num="5"]{ display:none}
#studio-life .studio-images .studio-image #studio-vid{ width:100%; height:100%; position:absolute; left:0; top:0; width:200%; left:-50%}/* --- page capabilities --- */
.cap-bigphoto-bg{ position:fixed; top:0; left:0; width:100%; height:100%; background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; z-index:-1; transform-style:preserve-3d; pointer-events:none}

#capabilities{ padding:0; padding-bottom:1px; background-color:transparent; overflow:hidden}
#capabilities .cap-top{ padding:70px 50px 0; position:relative; width:100%; max-height:78%!important; z-index:1; transform-style:preserve-3d}
#capabilities .cap-top .whitefill{ position:absolute; left:0; top:0; width:100%; height:85%; background-color:#fff}
#capabilities .contentContainer{ max-width:1170px; height:auto; padding-top:60px; padding-bottom:80px;}
#capabilities .row:after{ clear:left; content:''; display:block}
#capabilities .col.left{ float:left; width:450px; padding-left:100px;}
#capabilities .col.right{ width:auto; margin-left:450px; overflow:hidden}
#capabilities .col p{ max-width:620px; margin-bottom:.15em; font:400 18px/1.7 "proxima-nova", sans-serif; color:#525f5d;}
#capabilities .col p.mob{ float:none; max-width:none}
#capabilities .cap-intro{ position:relative; text-align:left;}
#capabilities .cap-intro h2{ margin-bottom:20px; font:700 normal 2.125em/1.2 "brandon-grotesque", sans-serif; color:#172a88}
#capabilities .cap-intro h2 b{ display:block; line-height:1.5;}
#capabilities .cap-intro h3{ font:700 normal 33px "brandon-grotesque", sans-serif; color:#fff; margin:10px 0 15px}
#capabilities .cap-intro p{ display:block; font:300 20px "proxima-nova", sans-serif; color:#172a88}
#capabilities .cap-intro .top{ background-color:#faf8f8; padding:2.5em 2em 2.5em; position:relative}
#capabilities .cap-intro .top .pmg-icon{ position:absolute; width:100%; height:52px; left:0; bottom:0; text-align:center; overflow:hidden}
#capabilities .cap-intro .top .pmg-icon .icon-pmg{ color:#fee93c; font-size:87px}
#capabilities .cap-intro .bot{ background-color:#324396; text-align:center; height:160px; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; position:relative}
#capabilities .cap-intro .bot .pmg-icon{ position:absolute; width:100%; height:35px; left:0; top:0; text-align:center; overflow:hidden}
#capabilities .cap-intro .bot .pmg-icon .icon-pmg{ color:#fee93c; font-size:85px; display:block; margin-top:-52px; opacity:.5}
#capabilities .cap-intro .arrow{ bottom:-67px; height:100px}
#capabilities .cap-intro .arrow .arr{ top:-65px}
#capabilities .cap-bigphoto{ width:100%; height:580px; background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; position:relative; z-index:0; margin-top:-200px; opacity:0}
#capabilities .whitefill2{ position:absolute; left:0; top:0; width:100%; height:100%; background-color:#fff; top:1475px; -webkit-perspective:1000; -webkit-backface-visibility:hidden}
#capabilities .cap-grid{ width:100%; max-width:1170px; margin:0 auto; position:relative; background-color:#faf8f8; margin-top:-270px; padding:50px 50px 0}
#capabilities .cap-boxes{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; width:100%; margin:0 auto;}
#capabilities .cap-boxes .cap-box{ width:50%; position:relative; border-bottom:1px solid #e5e4e4; cursor:pointer}
#capabilities .cap-boxes .cap-box.even{ border-left:1px solid #e5e4e4}
#capabilities .cap-boxes .cap-box.even>div{ margin-left:5%}
#capabilities .cap-boxes .cap-box:nth-child(n+3){ padding-top:25px}
#capabilities .cap-boxes .cap-box:nth-last-child(1),#capabilities .cap-boxes .cap-box:nth-last-child(2){ border-bottom:none}
#capabilities .cap-boxes .cap-box>div{ position:relative; width:95%; height:100%}
#capabilities .cap-boxes .cap-box .spacer{ width:100%; height:auto; display:block}
#capabilities .cap-boxes .cap-box .cap-bottomline{ position:absolute; left:0; bottom:0; width:100%; height:2px; background-color:#324396}
#capabilities .cap-boxes .cap-box .cap-hover{ width:100%; height:100%; position:absolute; left:0; top:0; background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
#capabilities .cap-boxes .cap-box .cap-hover .num{ position:absolute; top:17px; right:18px; width:44px; height:44px; border-radius:44px; background-color:#fff; text-align:center; color:#32c8ff; font:900 15px/44px "brandon-grotesque", sans-serif; letter-spacing:.02em}
#capabilities .cap-boxes .cap-box .cap-hover .cover{ width:100%; height:100%; position:absolute; left:0; top:0; background-color:#faf8f8; transform-origin:top}
#capabilities .cap-boxes .cap-box .cap-contents{ padding:75px 20px 47px 40px; height:100%; position:relative}
#capabilities .cap-boxes .cap-box .cap-contents h3{ font:700 normal 26px "brandon-grotesque", sans-serif; color:#1c2335; margin-bottom:0; line-height:68px;}
#capabilities .cap-boxes .cap-box .cap-contents .arrow{ width:100px; height:12px; position:absolute; bottom:30px}
#capabilities .cap-boxes .cap-box .cap-contents .arrow .arr{ left:-85px; color:#324396; font-size:12px}
#capabilities .cap-boxes .cap-box .cap-icon{ position:absolute; left:0; top:0; font-size:50px; color:#cecdcd; top:15px; left:38px}

#page-capabilities .menu-icon .menu-line{ background-color:#fff}
#page-capabilities #globalHeader .tier-title h1{ color:#4b4b4d}
#cap-modules{ position:relative; width:100%; padding:0; overflow:hidden}
#cap-modules h2{ font:400 normal 3em/1.2 "brandon-grotesque", sans-serif; color:#fff; text-align:left; position:relative; letter-spacing:-0.02em}
#cap-modules p.num{ font:900 15px "brandon-grotesque", sans-serif; color:#fff; position:absolute; top:-12px; left:0; width:100%}
#cap-modules .cap-module{ position:relative; width:100%; height:100%; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:nowrap; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch}
#cap-modules .cap-module .cap-mod-title{ width:100%; max-width:470px; margin:0 auto; margin-top:30px; text-align:center; padding:25px; position:relative; height:400px; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center}
#cap-modules .cap-module .col{ width:50%; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; position:relative; padding:0 50px}
#cap-modules .cap-module .col.left{ background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}
#cap-modules .cap-module .col .cap-vline{ position:absolute; left:50%; width:1px; background-color:#fff; opacity:.5}
#cap-modules .cap-module .col .cap-vline.top{ top:0}
#cap-modules .cap-module .col .cap-vline.bot{ bottom:0}
#cap-modules .cap-module .bracket-lines .bracket{ width:43%; height:70px}
#cap-modules .cap-module .bracket-lines .bracket.top{ max-width:210px}
#cap-modules .cap-module .bracket-lines .bracket.bot{ max-width:220px}
#cap-modules .cap-module .bracket-lines .bracket [class^="line-"]{ background-color:#fff; opacity:.5; -webkit-transform:scaleX(1); -moz-transform:scaleX(1); -ms-transform:scaleX(1); -o-transform:scaleX(1); -webkit-transform:scaleY(1); -moz-transform:scaleY(1); -ms-transform:scaleY(1); -o-transform:scaleY(1)}
#cap-text{ position:fixed; top:0; left:0; width:100%; height:100%; padding:0; background-color:transparent}
#cap-text .row{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:nowrap; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; width:100%; height:100%; position:absolute; left:0; top:0}
#cap-text .col{ width:50%; padding:0 50px}
#cap-text .col.right{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center; position:relative; background-color:#fff}
#cap-text .col .icon{ font-size:50px; color:#d2d2d2; display:block; margin-bottom:20px}
#cap-text .col p{ font:400 16px/1.65 "proxima-nova", sans-serif; margin-bottom:1.5em;}
#cap-text .col .cap-text-contents{ width:100%; max-width:470px; margin:0 auto; text-align:left}
#cap-text .col .cap-text-section{ display:none; opacity:0; color:#525f5d;}
#cap-text .col .cap-text-section ol, #cap-text .col .cap-text-section ul{ padding-left:0;}
#cap-text .col .cap-text-section li{ display:inline-block; position:relative; padding-left:1.5em; margin-bottom:1.2em; line-height:1.5;}
#cap-text .col .cap-text-section li:before{ content:''; position:absolute; left:0; top:.32em; width:.76em; height:.76em; text-align:center; border:2px solid #b5bee8; border-radius:.38em;}
#cap-text .col .cap-text-section[data-num="1"]{ display:block; opacity:1}
#cap-text .cap-arrows{ position:absolute; right:40px; top:50%; z-index:2}
#cap-text .cap-arrows .cap-arrow{ position:absolute; width:25px; height:55px; overflow:hidden; cursor:pointer; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear; -o-transition:opacity 0.2s linear; transition:opacity 0.2s linear}
#cap-text .cap-arrows .cap-arrow.disabled{ opacity:.3; pointer-events:none}
#cap-text .cap-arrows .cap-arrow .arr{ color:#324396; font-size:140px; position:absolute; left:0; bottom:15px}
#cap-text .cap-arrows .cap-arrow.up{ top:-65px; -webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); -ms-transform:scaleY(-1); -o-transform:scaleY(-1)}
#cap-text .cap-arrows .cap-arrow.down{ bottom:-65px}/* --- page hone --- */
.video-play{ width:82px; height:82px; border-radius:82px; background-color:#fff; text-align:center; overflow:hidden; position:relative}
.video-play .top{ font:700 14px/64px "proxima-nova", sans-serif; height:41px; color:#324396; text-transform:uppercase; -webkit-transition:color 0.2s linear; -moz-transition:color 0.2s linear; -o-transition:color 0.2s linear; transition:color 0.2s linear}
.video-play .bot{ font:900 12px/24px "brandon-grotesque", sans-serif; height:41px; color:#b5bab9;}
.arr-btn{ cursor:pointer; display:inline-block}
.arr-btn p{ font:700 13px "proxima-nova", sans-serif; text-transform:uppercase; letter-spacing:.05em}
.arr-btn.arrow{ width:100px; height:12px; margin-top:14px; position:relative}
.arr-btn .arrow.arr{ left:-85px; font-size:12px}

#page-home #globalHeader .headerTop {top: -125px}
#video-wrap{ position:absolute; left:0; top:0; width:100%; height:68%; overflow:hidden; background-color:#1c2335; background-repeat:no-repeat; -webkit-background-size:cover; background-size:cover;}

video#bgvid{ position:relative; top:0; left:0; min-width:100%; min-height:100%; width:100%; height:100%; z-index:0; background-repeat:none; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover}

video#bgvid::-webkit-media-controls-start-playback-button{ display:none}

/* homesolutions */
#home-solutions{ height:500px; padding:0; background:#ffffff; background-size:contain;}
#home-solutions .solutions{ height:100%;}
#home-solutions .solution{ position:relative; width:24.8%; height:100%; display:inline-block; vertical-align:top}
#home-solutions .solution > a{ display:block; height:100%; color:#fff; text-align:center; overflow:hidden;}
#home-solutions .solution > a::before{ content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3)}
#home-solutions .solution:hover > a::before{ background-color:rgba(45, 78, 171, .7);}
#home-solutions .solution > a > *{ display:block;}
#home-solutions .solution > a .img{ max-width:100px; max-height:100px; margin:40px auto 0;}
#home-solutions .solution > a strong, #home-solutions .solution a > span{ display:block; text-align:left;}
#home-solutions .solution > a strong{ padding:1em 60px; font-size:24px;}
#home-solutions .solution > a span{ overflow:hidden; margin:0 40px; font-size:14px;}
#home-solutions .solution i.more{ display:block; margin-top:1em; font-style:normal;}
#home-solutions .solution > a > *{ transform:translateY(110px); transition:transform .4s; will-change:transform;}
#home-solutions .solution > a strong{ transform:translateY(160px)}
#home-solutions .solution > a span{ transform:translateY(360px)}
#home-solutions .solution i.more > em{ display:inline-block; text-indent:-5em; opacity:0; transition:text-indent .4s, opacity .4s; transition-delay:.3s}
#home-solutions .solution:hover > a > *{ transform:translateY(0);}
#home-solutions .solution:hover > a strong{ transform:translateY(0)}
#home-solutions .solution:hover > a span{ transform:translateY(0)}
#home-solutions .solution:hover i.more > em{ text-indent:0; opacity:1}
#home-solutions .solution i.more b{ overflow:hidden; position:relative; display:inline-block; width:65px; height:1em; color:#fff; transform:translateX(10px)}
#home-solutions .solution i.more b:before{ content:'\e918'; display:block; position:absolute; right:0; top:0; font-weight:normal; font-family:'icomoon' !important; transition:transform .4s;}

/* home partners */
#home-partners{ padding:80px 0}
#home-partners .contentContainer{ max-width:1070px;}
#home-partners h3{ color:#172a88; width:100%; margin-bottom:1em; font:700 normal 33px "brandon-grotesque", sans-serif; text-align:center}
#home-partners p{ text-align:left;}
#home-partners .partner{ display:inline-block; position:relative; width:23.55%; height:64px; border:1px solid #f5f5f5; margin:3px 0; background-color:#fff; background-repeat:no-repeat; background-position:center center; -webkit-background-size:contain; background-size:contain; box-sizing:border-box;}
#home-partners .partner:before{ content:''; z-index:2; display:block; position:absolute; left:0; right:0; top:0; bottom:0; -webkit-background-size:contain; background-size:contain!important;}
#home-partners .partner:not(:nth-child(4n+1)){ margin-left:10px;}
#home-partners .partner:not(:nth-child(4n)){ margin-right:1%;}
#home-partners .partner:hover{ border-color:rgba(126, 145, 234, 0.5)}
.partner1{ background:url(../i/29.png)}
.partner2{ background:url(../i/27.png)}
.partner3{ background:url(../i/19.png)}
.partner4{ background:url(../i/20.png)}
.partner5{ background:url(../i/21.png)}
.partner6{ background:url(../i/22.png)}
.partner7{ background:url(../i/24.png)}
.partner8{ background:url(../i/30.png)}
.partner9{ background:url(../i/31.png)}

/* home projects */
.project-block{ padding:80px 0 0; margin-top:-1px}
.project-block:nth-child(n+1){ padding-top:100px;}
.project-block .contentContainer{ max-width:1600px}
.project-block h3{ font:700 normal 33px "brandon-grotesque", sans-serif; color:#172a88; width:100%; text-align:center}
.project-block h4{ font:400 16px "proxima-nova", sans-serif; color:#525f5d; width:100%; text-align:left; margin-top:1em; padding:0 20px 0 0}
.project-block .boxes{max-width:1070px; margin:60px auto 0;display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch;}
.project-block .boxes .box{ position:relative; width:47%; padding-bottom:2.8em;}
.project-block .boxes .box:nth-child(2){}
.project-block .boxes .box:nth-child(2) video{ width:101%; height:101%; margin-left:-1px}
.project-block .thumb{ overflow:hidden; position:relative; min-height:220px; cursor:pointer}
.project-block .thumb .cover{ width:100%; height:100%; min-height:220px; position:absolute; left:0; top:0; background-size:cover; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear; -o-transition:opacity 0.2s linear; transition:opacity 0.2s linear}
.project-block .thumb > .cover:before{ content:''; opacity:0; display:block; position:absolute; left:0; top:0; width:100%; height:100%; -webkit-transition:opacity 0.2s linear; -moz-transition:opacity 0.2s linear; -o-transition:opacity 0.2s linear; transition:opacity 0.2s linear}
.project-block .thumb > .cover:hover:before{ opacity:1;}
.project-block .thumb>img{ display:block; width:100%; height:auto; min-height:280px;}
.project-block .home-projects-more{ cursor:pointer; width:100%; max-width:110px; margin:0 auto}
.project-block .home-projects-more a{ font:700 14px "proxima-nova", sans-serif; color:#324396; text-transform:uppercase; letter-spacing:.05em}
.project-block .home-projects-more .arrow{ width:100px; height:12px; margin-top:10px; position:relative}
.project-block .home-projects-more .arrow .arr{ left:-85px; color:#324396; font-size:12px}
.project-block video{ background-size:cover; width:100%; height:100%}

/* homerequest */
#home-request{padding-top:80px; padding-bottom:80px;background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-color: #1c2335;}
#home-request .contentContainer{ max-width:1170px;}
#home-request .row{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch}
#home-request h2{ font:700 normal 3.2em/1.2 "brandon-grotesque", sans-serif; color:#fff}
[id*="-request"]{ text-align:center; color:#fff;}
[id*="-request"] h2{ display:block; margin-bottom:.5em;}
[id*="-request"] p span{ display:inline-block; margin:0 20px;}
[id*="-request"] p, [id*="-request"] p a{ color:#fff;}
[id*="-request"] em{ display:inline-block; margin-right:.5em; font-style:normal;}
#home-request a {color: #fff}
#home-request .icon-pmg{ font-size:85px; color:#00628c; opacity:.4; margin-bottom:12px}
#home-request .col.left{ width:43%; max-width:335px}
#home-request .col.right{ width:57%; max-width:630px; padding:33px 0 0 30px}
#home-request .col.right>p{ font:400 18px/1.7 "proxima-nova", sans-serif; color:#fff}
#home-request .arr-btn{ margin-top:55px}
#home-request .arr-btn p,#home-request .arr-btn .arrow{ color:#fff}

#hero, #home-slider {overflow: hidden;position: relative;width: 100%;height: 60%;background-color: rgba(75, 75, 75, 0.4);}
#home-slider {padding:0; background: #1c2335}
#home-slider .contentContainer {position: relative;width: 100%;height: 100%;max-width: inherit!important}

/* sliders */
.swiper-pager{ position:absolute; bottom:20px!important; width:100%; text-align:center}

.slides-wrap{ overflow:hidden; width:100%; height:100%; position:relative;}
.slides-wrap > ol{ padding:0; margin:0; position:relative; height:100%; transform:translate(0px,0px); transition-timing-function:ease-out; display:flex}
.slides-wrap > ol li{ list-style:none; position:relative; width:100%; height:100%; -webkit-flex-shrink:0; -ms-flex:0 0 auto; flex-shrink:0}
.homeBanner{ width:100%; height:100%; padding:0; box-sizing:border-box; background-position:center center; -webkit-background-size:cover; background-size:cover;}
.homeBanner.overlay:after{ content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0, .6);}
.homeBanner .videoC{ position:absolute; top:0; width:100%; background-color:#1c2335;}
.homeBanner .txtC{ z-index:10; position:relative; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:-o-flex; display:flex; -webkit-flex-direction:column; -moz-flex-direction:column; -ms-flex-direction:column; -o-flex-direction:column; flex-direction:column; -ms-align-items:center; align-items:center; justify-content:center; width:100%; height:100%; padding:0 15%; text-align:center;}

/* slider page switch */
.swiper-pager > a{ display:inline-block; width:10px; height:10px; border-radius:6px; border:1px solid rgba(255,255,255,.85); margin:0 10px; text-indent:-100px; overflow:hidden}
.swiper-pager > a:hover,.swiper-pager > a.active{ background:#fff; border-color:transparent;}
.slides-wrap >a.left-arrow,.slides-wrap >a.right-arrow{ display:block; width:50px; height:50px; position:absolute; top:50%; margin-top:-25px; background:url(arrow.svg) no-repeat center}
.slides-wrap >a.right-arrow{ right:3%}
.slides-wrap >a.left-arrow{ left:3%; transform:rotate(180deg)}
.mob {display: none}/* --- page join --- */
#page-services #tier-hero{ height:65%; background-color:#1c2335; -webkit-background-size:contain; background-size: cover;}
#page-services #tier-hero .hero-text .txt{ position:relative; opacity:0; min-height:110px;}
#page-services #tier-hero .hero-text>div{ margin-top:70px}
#page-services #globalHeader .logo .logo1{ color:#32c8ff}
#page-services #globalHeader .logo .logo2{ color:#1c2335}
#page-services #globalHeader .menu-icon{ position:absolute; top:70px; right:0; width:32px; height:31px; cursor:pointer; z-index:2}
#page-services #globalHeader .menu-icon .menu-line{}
#page-services #globalHeader .tier-title h1{}
#page-services #tier-hero .hero-text .join_infos{ font-size:1.25em;}
#page-services #tier-hero .hero-text .join_infos > a{ font-size:1.25em;}
#page-services #tier-hero .bracket-lines .bracket [class^="line-"]{ background-color:#fff; opacity:1}
#services{ padding-top:80px; padding-bottom:50px}
#services h3{ font:700 normal 26px/1 "brandon-grotesque", sans-serif; color:#1c2335; margin-bottom:17px}
#services p{ font:400 17px/1.65 "proxima-nova", sans-serif; color:#7e828c}
#services p em{ font-weight:500; font-style:normal;}
#services ul{ padding:.5em 0 .5em 1em; margin-bottom:1.5em; list-style:none;}
#services ul:nth-of-type(2n){ margin-bottom:.5em;}
#services ul li{ display:block; position:relative; padding:.25em 0 .25em 1.5em; font-size:14px; color:#525f5d;}
#services ul li:before{ content:''; position:absolute; left:0; top:.64em; width:.76em; height:.76em; text-align:center; border:2px solid #b5bee8; border-radius:.38em;}
#services .service-circle{ width:78%; height:auto; display:block}

#services .row{ width:100%; max-width:1000px; margin:0 auto; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch}
#services .row.odd .col.left{ width:32%; max-width:320px}
#services .row.odd .col.right{ width:65%; max-width:600px; padding-top:10px}
#services .row.even .col.left{ width:65%; max-width:600px; padding-top:10px}
#services .row.even .col.right{ width:32%; max-width:320px}
#services .row~.row{ margin-top:65px}
#services .arr-btn{ margin-top:.25em}
#services .arr-btn a{ font:400 17px/1.65 "proxima-nova", sans-serif; text-transform:none; letter-spacing:0; color:#324396}
#services .arr-btn .arrow{ margin-top:3px}
#services .arr-btn .arrow .arr{ color:#324396}/* --- page partners --- */
#home-partners{ padding:80px 0}
#home-partners .contentContainer{ max-width:1070px;margin: 0 auto}
#home-partners h3{ color:#172a88; width:100%; margin-bottom:1em; font:700 normal 33px "brandon-grotesque", sans-serif; text-align:center}
#home-partners p{ text-align:left;}
#home-partners .partner{ display:inline-block; position:relative; width:23.55%; height:64px; border:1px solid #f5f5f5; margin:3px 0; background-color:#fff; background-repeat:no-repeat; background-position:center center; -webkit-background-size:contain; background-size:contain; box-sizing:border-box;}
#home-partners .partner:before{ content:''; z-index:2; display:block; position:absolute; left:0; right:0; top:0; bottom:0; -webkit-background-size:contain; background-size:contain!important;}
#home-partners .partner:not(:nth-child(4n+1)){ margin-left:10px;}
#home-partners .partner:not(:nth-child(4n)){ margin-right:1%;}
#home-partners .partner:hover{ border-color:rgba(126, 145, 234, 0.5)}
.partner1{ background:url(../i/29.png)}
.partner2{ background:url(../i/27.png)}
.partner3{ background:url(../i/19.png)}
.partner4{ background:url(../i/20.png)}
.partner5{ background:url(../i/21.png)}
.partner6{ background:url(../i/22.png)}
.partner7{ background:url(../i/37.jpg)}
.partner8{ background:url(../i/24.png)}
.partner9{ background:url(../i/30.png)}
.partner10{ background:url(../i/31.png)}/* --- page studio --- */
#page-studio #tier-hero{ background-color:#1c2335}
#page-studio #tier-hero .tier-hero-photo{ opacity:0}
#page-studio #tier-hero .hero-text .txt{ opacity:0}
#partner-intro{ padding:80px 0 0;}
.we-panel{ margin:0 10%; text-align:center;}
.we-panel .we-box{ width:33.33%; min-height:200px; display:inline-block; box-sizing:border-box; padding:50px 60px 0; position:relative; font-size:14px; vertical-align:top; text-align:left;}
.we-panel .we-box:last-child{ margin-right:0;}
.we-panel .we-box .title{ font-size:28px; color:#1c2335;}
.we-panel .we-box > ul{ margin-top:28px; color:#525f5d;}
.we-panel .we-box > ul li{ margin-bottom:18px;}
#studio-struct .we-panel{ padding:50px 0 0; margin:0 auto;}
#studio-struct .we-box{ padding:100px 30px 0;}
#studio-struct .we-box .img{ max-width:200px; height:66px; border:1px solid #f5f5f5; margin:0 auto 20px; background-color:#fff; background-position:center center; background-repeat:no-repeat; -webkit-background-size:contain; background-size:contain;}
#studio-struct .we-box .img.img1{ background-image:url(../i/29.png)}
#studio-struct .we-box .img.img2{ background-image:url(../i/27.png)}/* --- page media --- */
@media screen and (max-width:1170px){
    #globalNav{ font-size:80%}
    #page-services #tier-hero{background-size: contain}
}
@media screen and (max-width:1150px){ #quote .req-intro h2{ font:700 normal 3.5em/1.2 "brandon-grotesque", sans-serif}
#quote .req-intro p{ font:400 18px/1.5 "proxima-nova", sans-serif}
#quote .req-intro .top, #quote .req-intro .bot{ padding:30px}
#quote .req-intro .bot{ padding-bottom:40px}
#quote .req-intro .arrow{ bottom:-77px; height:100px}
#quote .req-intro .arrow .arr{ top:-75px}
#cap-modules{ font-size:80%}
#cap-modules .cap-module .col{ padding:0 25px}
#cap-modules .cap-module .cap-mod-title{ height:300px}
#tier-hero .hero-text h2 {font-size: 2.8rem;font-weight: 400}
#tier-hero .hero-text p {font-size: 1.25rem}
}
@media screen and (max-width:1024px){ #projects{ padding-left:50px; padding-right:50px}
#projects .contentContainer{ max-width:none; padding:0}
#projects h3{ position:relative; top:0; margin-bottom:31px}
#projects .project-thumb{ width:80%;}
#projects .project-box{ position:relative}
#projects .projects-more .arrow{ max-width:70px}
#quote .row .col.left{ width:35%; max-width:435px; position:relative}
#quote .row .col.right{ width:59%; max-width:650px; position:relative}
#quote .req-intro{ width:33%}
#quote .req-intro h2{ font:700 normal 3em/1.2 "brandon-grotesque", sans-serif}
#quote .req-intro .top, #quote .req-intro .bot{ padding:20px}
#quote .req-intro .bot{ padding-bottom:40px}
#cap-text .col{ padding:0 50px 0 25px}
#cap-text .col p{ font:400 15px/1.5 "proxima-nova", sans-serif}
#cap-text .col .cap-text-contents{ width:100%; max-width:470px; margin:0 auto; text-align:left}
#cap-text .cap-arrows{ right:30px}
#home-partners .partner{width: 32.6%!important;margin: 0!important}
#home-partners .partner:not(:nth-child(3n)) {margin-right:1%!important;}
.we-panel .we-box {padding: 40px 30px 0}
.we-panel .we-box > ul li {margin-bottom: .75em}
}
@media screen and (max-width:900px){ #home-slider{ max-height:58vh;}
#home-slider .txtC h2{ font-size:3.2em;}
#home-slider .txtC p{ font-size:2.4em;}
#home-request{ padding-top:50px; padding-bottom:60px}
#home-request .row{ display:block}
#home-request .col.left{ width:100%; max-width:none}
#home-request .col.right{ width:100%; max-width:none; padding:0px; margin-top:20px}
#capabilities .col.left{ width:360px}
#capabilities .col.right{ margin-left:360px; padding-top:3.2em}
#capabilities .cap-intro{ font-size:85%}
#capabilities .cap-intro .top{ padding:3em 3em 4em}
#tier-request{ padding-top:50px; padding-bottom:50px}
#tier-request .row{ display:block}
#tier-request .col.left{ width:100%; max-width:none}
#tier-request .col.right{ width:100%; max-width:none; padding:0px; margin-top:20px}
#about h2{ font:700 normal 53px/1.15 "brandon-grotesque", sans-serif; margin-bottom:20px}
#about .about-text .col.left{ width:270px}
#about .about-text .col.right{ padding-left:40px; margin-left:270px}
#quote .row .col.left{ width:35%; max-width:435px; position:relative}
#quote .row .col.right{ width:59%; max-width:650px; position:relative}
#quote .req-intro{ width:33%}
#quote .req-intro h2{ font:700 normal 2.5em/1.2 "brandon-grotesque", sans-serif}
}
@media screen and (max-width:850px){ #cap-modules{ font-size:60%}
#cap-modules .cap-module .cap-mod-title{ height:250px}
}
@media screen and (max-width:768px){ #projects .project-box{ width:100%;}
.mob{ display:block !important}
.dsk{ display:none !important}
#globalHeader{ height:80px}
#menu-overlay #globalHeader .logo{}
#globalHeader .logo{ top:20px; max-width: 175px; max-height:44px; overflow:hidden;}
#globalHeader .logo span{ font-size:40px}
#globalHeader .logo .logo2{ height:30px; overflow:hidden; margin:8px 0 0 2px; font-size:38px}
#globalHeader #global-menu{ display:none;}
#globalHeader .menu-icon{ display:block; visibility:visible; top:28px}
#page-home #globalHeader .menu-icon{ display:block!important; visibility:visible!important}
#globalHeader .menu-icon .menu-line.mid{ top:10px}
#globalHeader .menu-icon .menu-line.bot{ top:20px}
#globalHeader .sticky-bar{ height:50px; top:-50px}
#hero{ background-color:rgba(75,75,75,0.2)}
#hero,#tier-hero{ font-size:80%}
#hero footer, #tier-hero footer{ display:none}
#tier-hero .hero-text h2{ font-size:3.25em; margin-bottom:.875em; margin-bottom:5px}
#tier-hero .hero-text p{ font-size:1.625em!important; line-height:1.25}
#tier-hero .bracket-lines .bracket{ width:47%}
#video-wrap{ background:center center no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center center}
#menu-overlay{ background-position:85% center}
#menu-overlay footer .phone{ right:auto; left:0}
#globalNav{ font-size:60%}
#globalNav ul{ margin-top:-70px}
.project-block{ padding:85px 0 60px}
.project-block .boxes{ margin:35px 0 25px}
#capabilities .col.left{ width:100%; float:none}
#capabilities .col.right{ display:none}
#capabilities .cap-top{ padding-top:40px}
#capabilities .contentContainer{ padding:30px 20px;}
#capabilities .contentContainer .col.left{ padding-left:0;}
#capabilities .col p.mob{ font-size:14px;}
#capabilities .cap-intro{ display:none; margin-top:45px;}
#capabilities .cap-intro h2{ width:100%; max-width:270px; margin:0 auto}
#capabilities .cap-boxes .cap-box.even>div{ margin-left:10%}
#capabilities .cap-boxes .cap-box>div{ position:relative; width:90%}
#capabilities .cap-boxes .cap-box .cap-contents{ padding:80px 0px 97px 0px}
#capabilities .cap-boxes .cap-box .cap-icon{ left:0px}
#about{ padding-top:20px}
#about .about-text .col.left{ width:100%; float:none}
#about .about-text .col.right{ width:100%; padding-left:0px; margin-left:0px}
#about .about-text .col p{ max-width:none; float:none}
#studio-details .studio-grid .studio-box{ width:48.5%; max-width:none}
#services{ padding-top:50px; padding-bottom:50px}
#services .row~.row{ margin-top:35px}
#quote{ padding-top:120px; padding-bottom:90px; overflow:hidden}
#quote .row{ display:block}
#quote .row .col.left{ display:none}
#quote .row .col.right{ width:100%; max-width:none}
#req-contact{ padding-top:50px; padding-bottom:185px}
#req-contact .row{ margin-top:40px}
#req-contact h2{ font-size:53px}
#req-contact .col{ width:50%}
#req-contact .col:nth-child(n+3){ margin-top:55px}
#projects{ padding-top:175px}
#page-capabilities #globalHeader .logo .logo1{ color:#32c8ff}
#page-capabilities #globalHeader .logo .logo2{ color:#1c2335}
#page-capabilities #globalHeader .tier-title h1{ color:#32c8ff}
#cap-text{ display:none}
#cap-modules{ padding-top:80px; font-size:65%}
#cap-modules .cap-module{ width:auto; height:auto; display:block}
#cap-modules .cap-module .cap-mod-title{ margin-top:0px; padding:25px; height:280px; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center}
#cap-modules .cap-module .col{ width:100%; display:block; padding:0 50px}
#cap-modules .cap-module .col.left{ height:470px; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:center; -ms-flex-pack:justify; justify-content:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch; -ms-flex-pack:center}
#cap-modules .cap-module .col.right{ padding-top:30px; padding-bottom:40px}
#cap-modules .cap-module .col.right .icon{ font-size:50px; color:#d2d2d2; display:block; margin-bottom:20px}
#cap-modules .cap-module .col.right p{ margin-bottom:.5em; font:400 16px/1.65 "proxima-nova", sans-serif;}
#cap-modules .cap-module .col .cap-vline{ position:absolute; left:50%; width:1px; background-color:#fff; opacity:.8}
#cap-modules .cap-module .col .cap-vline.top{ top:0; height:80px}
#cap-modules .cap-module .col .cap-vline.bot{ bottom:0; height:95px}
}
@media screen and (max-width:767px){ #tier-hero .hero-text>div{ padding:15px 20px 20px 30px; margin-top:30px}
#tier-hero .hero-text p{ font-size:3em}
#page-services #tier-hero{ height:400px;}
#page-services #tier-hero .hero-text>div{ margin-top:100px}
}
@media screen and (max-width:650px){ #globalFooter{ padding:40px 50px}
#globalFooter .legal .cr{}
#globalFooter .main .cr{ display:none;}
#globalFooter .main .col.left{ width:60%; max-width:none}
#globalFooter .main .col.right{ width:100%}
#about{ padding-bottom:60px}
#studio-life .studio-images{ display:block; padding-top:3em!important}
#studio-life .studio-images .col.left{ width:100%; max-width:none}
#studio-life .studio-images .col.right{ width:100%; max-width:none; margin-top:25px}
#studio-life .studio-images .studio-image{ margin-top:25px !important; max-width:none !important}
#studio-life .studio-images .studio-image:not([data-num="3"]){ height:240px;}
#studio-life .studio-images .studio-image[data-num="3"]{ height:280px;}
#studio-life .studio-images .studio-image img{ width:100%; height:auto; display:block; padding-bottom:0px}
#studio-life .studio-images .studio-image .hover-line{ display:none}
#studio-life .studio-images .studio-image[data-num="3"]{ display:block}
#studio-life .studio-images .studio-image[data-num="5"]{ display:block}
.studio-gallery{ margin-top:60px}
.studio-gallery .gallery{ width:100%; max-height:120px; margin-bottom:5px}
#about .about-box{ width:100%; max-width:none}
#about .about-box .top{ padding:5px 0 6.8em}
#studio-details{ padding-top:165px; padding-bottom:95px}
#studio-details .studio-grid{ margin-top:40px}
#services{ padding-top:30px}
#services h3{ margin-bottom:17px; text-align:center;}
#services p{ font:400 17px/1.65 "proxima-nova", sans-serif; color:#525f5d}
#services ul{ padding-left:0; margin-bottom:.5em;}
#services .service-circle{ width:70%; max-width:285px; margin:0 auto; margin-bottom:25px}
#services .row{ display:block}
#services .row .col{ width:100% !important; max-width:none !important}
#services .row.even{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; -webkit-align-items:flex-start; -ms-flex-align:flex-start; align-items:flex-start; -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch}
#services .row.even .col.left{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-order:2; -ms-flex-order:2; order:2; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column}
#services .row.even .col.right{ display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-order:1; -ms-flex-order:1; order:1; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column}
#services .arr-btn{ padding-right:10px}
#quote #contactForm .thanks{ margin-left:0px}
#quote #contactForm .thanks p{ font-size:20px}
#quote #contactForm .thanks .loader-icon{ -webkit-transform:scale(0.7); -moz-transform:scale(0.7); -ms-transform:scale(0.7); -o-transform:scale(0.7)}
}
@media screen and (max-width:600px){ #home-slider{ height:50%;}
#home-slider .txtC{ padding:0 12%;}
#home-slider .txtC h2{ font-size:1.2em; margin-bottom:.875em}
#home-slider .txtC p{ font-size:1em;}
.swiper-pager{ bottom:20px;}
.slides-wrap >a.right-arrow{ right:0!important;}
.slides-wrap >a.left-arrow{ left:0!important;}
video#bgvid{ width:auto;}
#capabilities .cap-grid-wrapper{ padding-left:50px; padding-right:50px; position:relative}
#capabilities .cap-grid{ padding:0; margin-top:-450px}
#capabilities .cap-boxes{ display:block}
#capabilities .cap-boxes .cap-box{ width:100%; padding-top:0 !important}
#capabilities .cap-boxes .cap-box.even{ border-left:none}
#capabilities .cap-boxes .cap-box.even>div{ margin-left:30px}
#capabilities .cap-boxes .cap-box>div{ width:auto; margin:0 30px}
#capabilities .cap-boxes .cap-box .cap-contents{ padding:80px 0px 70px 0px}
#capabilities .cap-boxes .cap-box .cap-contents h3{ font:700 normal 27px "brandon-grotesque", sans-serif; color:#1c2335; margin-bottom:14px}
#capabilities .cap-boxes .cap-box .cap-contents .arrow{ bottom:37px}
#capabilities .cap-boxes .cap-box .cap-icon{ top:20px}
#capabilities .whitefill2{ top:1200px}
#home-solutions{ height:auto; background:#fff;}
#home-solutions .solutions{ height:auto;}
#home-solutions .solution{ width:100%; height:420px; margin-bottom:20px}
#home-solutions .solution > a{ -webkit-background-size:cover; background-size:cover;}
#home-solutions .solution > a .img{ margin-top:40px}
#home-solutions .solution > a > *{ transform:translateY(0); transition:transform .4s; will-change:transform;}
#home-solutions .solution > a strong{ transform:translateY(0)}
#home-solutions .solution > a span{ transform:translateY(0)}
#home-solutions .solution i.more > em{ text-indent:0; opacity:1}
.project-block:nth-child(n+1){ padding-top:60px}
.project-block:first-child{ padding-bottom:0px}
.project-block .boxes .box{ padding-bottom:0em;}
.project-block .thumb>img{ max-height:180px}
}
@media screen and (max-width:550px){ #tier-hero .hero-text h2{ font-size:2.325em;}
#globalHeader .tier-title{ visibility:hidden}
.tier-title-mobile{ display:block}
#quote .error{ margin-bottom:0; margin-top:10px; text-align:center}
#home-partners{ padding-top:0;}
#home-partners .partner{ width:44%; border:1px solid #ebefff; margin:5px 3%; box-sizing:border-box; background-size:contain;}
.project-block{ padding:70px 50px 60px}
.project-block h4{ margin-bottom:17px}
.project-block .boxes{ display:block}
.project-block .boxes .box{ width:100%; position:relative}
.project-block .boxes .box:nth-child(2){ margin-top:30px}
#cap-modules{ padding-top:0}
#page-services #tier-hero{ -webkit-background-size:cover; background-size:cover; background-repeat:no-repeat;}
#page-services #tier-hero .hero-text>div{ margin-top:30px}
}
@media screen and (max-width:500px){ section,header,footer{ padding-left:25px; padding-right:25px}
.slides-wrap >a.left-arrow, .slides-wrap >a.right-arrow{ top:70%;}
.project-block .home-projects-more{ margin-top:1em;}
#home-partners .partner:not(:nth-of-type(4n)){ margin-right:0;}
#partner-intro{ padding:40px 0;}
#partner-intro .we-panel ul{ list-style:none;}
#partner-intro .we-box{ display:block; width:100%; min-height:auto; padding:0 2em 2em 0;}
#partner-intro .we-box ul{ margin:1em 0 0;}
#partner-intro .we-box li{ padding:0 0 .5em 0; margin-bottom:0; font-size:1.25em;}
#home-partners{ padding:40px 0;}
#globalFooter .main .col.right{ min-width:100px; width:40%; text-align:right;}
#globalFooter .legal .col.left{ width:55%;}
#globalFooter .legal .col.right{ width:45%;}
#globalFooter .QRcode{ position:relative; right:-20px; max-width:120px; max-height:120px;}
#services .row .col > img{ width:45%;}
#hero p{ width:90%}
#hero .hero-text{ padding-top:4em;}
#hero .hero-text h2{ font-size:2.75em; margin-bottom:.875em;}
#hero .hero-text p{ font-size:2.4em;}
#studio-struct .we-box{ width:100%; padding-top:3.5em;}
#studio-details{ padding:80px 25px;}
#globalNav{ font-size:50%; display:block; margin-top:0; padding-top:90px}
#globalNav ul{ margin-top:0}
#globalNav li{ padding:12px 25px}
#menu-overlay footer{ bottom:30px}
#globalFooter{ padding:25px 25px}
#home-request, #tier-request{ padding-top:40px; padding-bottom:40px; font-size:82%}
#home-request .icon-pmg{ font-size:65px; margin-bottom:30px}
#home-request .col.right{ margin-top:12px}
#home-request .arr-btn{ margin-top:35px}
.project-block{ padding-left:25px; padding-right:25px}
#capabilities .cap-grid-wrapper, #capabilities .cap-top{ padding-left:25px; padding-right:25px}
#tier-request{ padding-top:30px; padding-bottom:60px; font-size:82%;}
#tier-request h2, #home-request h2{ font-size:1.875em;}
#tier-request .icon-pmg{ font-size:65px; margin-bottom:30px}
#tier-request .col.right{ margin-top:12px}
#tier-request .arr-btn{ margin-top:35px}
#studio-details .studio-grid{ display:block}
#studio-details .studio-grid .studio-box{ width:100%; max-width:none}
#studio-details .studio-grid .studio-box~.studio-box{}
#projects{ padding-left:25px; padding-right:25px; padding-bottom:55px}
#projects h3{ position:relative; top:0; margin-bottom:15px; padding:0 10px}
#projects .project-box~.project-box{ margin-top:60px}
#projects .projects-more{ margin-top:80px}
#quote{ padding-bottom:60px}
#quote #contactForm fieldset.long{ display:none}
#quote #contactForm input:not(.dp){ padding-left:0}
#quote #contactForm input:not(.dp)~input:not(.dp){ margin-top:35px}
#quote #contactForm .dp-wrap{ display:block; width:186px}
#quote #contactForm .dp-wrap~.dp-wrap{ margin-left:0; margin-top:25px}
#tier-hero .bracket-lines .bracket{ width:45%}
#cap-modules .cap-module .col{ padding-left:25px; padding-right:25px}
}
@media screen and (max-width:450px){ #globalFooter .footer-text .col{ display:none}
#globalFooter .footer-text .col:nth-child(1){ display:block; width:100%; max-width:none}
#globalFooter .main .cr{ margin-top:20px; margin-bottom:40px}
#globalFooter .social{ display:none}
#quote #contactForm .thanks{ width:100%; margin-top:30px}
#quote #contactForm .thanks .loader-icon .loader-top, #quote #contactForm .thanks .loader-icon .loader-bot{ left:-20px}
video#bgvid{ background-size:auto 100%}
}
@media screen and (max-width:400px){ #capabilities .cap-intro h2{ font-size:2em; margin:0; line-height:1.15}
#capabilities .cap-intro .top{ padding:30px 20px 40px 30px}
}
@media screen and (max-width:375px){ #capabilities .cap-boxes .cap-box .cap-contents{ padding-bottom:55px}
#capabilities .cap-boxes .cap-box .cap-contents h3{ line-height:1.3}
#capabilities .cap-boxes .cap-box .cap-contents p{ display:none}
}
@media screen and (max-width:374px){ #hero{ font-size:50%}
#tier-hero{ font-size:60%}
#globalNav{ font-size:40%}
#globalNav li{ padding:8px 25px}
#globalFooter .main .cr{ margin-bottom:20px}
#globalFooter .legal{ margin-top:50px}
#services{ padding-bottom:60px}
#services .row~.row{ margin-top:60px}
#capabilities .cap-intro h2{ font-size:32px; letter-spacing:-0.02em}
#projects .projects-more a{ font-size:28px}
#req-contact .arr-btn h3{ font-size:22px}
#quote #contactForm .thanks p{ font-size:18px}
#cap-modules{ font-size:55%}
}
@media screen and (max-width:320px){
#tier-hero .hero-text > div,#page-services #tier-hero .hero-text>div{ margin-top:80px}
#menu-overlay .social li{ width:28px; height:28px}
#menu-overlay .social span{ line-height:30px; font-size:28px}
#menu-overlay .social{ bottom:20px}
#menu-overlay footer .phone{ bottom:-10px}
}