@import url('/css/reset.css');
/* General Styles
---------------------------------------------------------*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {


}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}


@media (max-width: 768px) {
    .desc {padding: 5px !important;font-size:13px !important; }
    .desc p{font-size:12px !important;margin-bottom:-5px !important; }
        .playlist{padding:3px !important;}
    .playlist .text{display:none !important;}
    .width-xs-full { width: 100% !important; }
    .cra .video{padding:60px 10px 40px 10px !important;}
    .cra .video h2{top:-40px !important;font-size:20px !important;}
    .cra .dec{padding:20px !important;}
    .spotlight .video{padding:60px 10px 40px 10px  !important;}
    .spotlight .video h2{top:-40px !important;font-size:20px !important;}
    .spotlight .dec{padding:20px !important;}
    .headline{padding: 0.5em !important;padding-top: 4.5em !important;}
    .headline h1{font-size:23px !important;} 
    .headline p{font-size:12px !important;line-height:16px !important;}
    
    .blog-table{display:block !important;}
    .blog-table .img-col{display:block !important;width:100% !important;}
    .blog-table .img-col img{max-height:200px !important;}
    .blog-table .des-col{padding-left:0px;display:block !important;width:100% !important;}
    .blog-table .des-col .title{font-size:20px !important;margin:10px 0px !important;}
    .blog-table .des-col .date{float:initial !important;margin-left:0px !important;display:block;text-align:center;width:100% !important;}
}

.blog-table{width:100%;display:table;}
.blog-table .img-col{width:250px;text-align:center;display:table-cell;vertical-align:middle;}
.blog-table .img-col img{max-width:100%;max-height:150px;}
.blog-table .des-col{padding-left:10px;vertical-align:middle;font-size:15px;display:table-cell}
.blog-table .des-col .title{font-size:22px;font-weight:bold;}
.blog-table .des-col .date{font-size:12px;float:right;margin-left:10px;}

.tips { position: absolute; color: #24384d; font-size: 11px;top:20px;left:270px;width:40%;line-height:15px; }

@media (max-width: 1380px) {
    .tips { width: 30%;top:10px;  }
}


:root {
    --main-font-dark-color: #101010;
    --main-font-light-color: #FFFFFF;
    --main-bg-dark-color: #101010;
    --main-bg-light-color: #FFFFFF;
    --main-tran-light-color: rgba(255,255,255,0.01);  /* For Dark Font */
    --main-tran-dark-color: rgba(0,0,0,0.01);         /* For Light Font*/
}

.wfont {
    color: #fff !important;
}

.bfont {
    color: #101010; !important;
}

.bgw {
    background-color: var(--main-tran-light-color) !important;
}

.bgb {
    background-color: var(--main-tran-dark-color) !important;
}



.ratio-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.ratio-body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
} 
.headline h1{text-transform:uppercase;}


* { font-family: 'IBM Plex Sans'; }

body { background: #222; color: #FFF; font-family: Helvetica,'Avenir Next', sans-serif; font-size: 20px; font-weight: normal; line-height: 1.5em; }

a { color: #2E6EBC; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; text-decoration: none; }

.wrap { padding: 20px; position: relative; max-width: 80em; margin: 0 auto; }

#content { background: #FFF; padding-top: 100px !important; }
@media (max-width: 1210px) {

    header { height: 150px !important; }
    .tips { width: 100%; top: 70px; left: 0px; padding: 10px; display: table-cell; vertical-align: middle; text-align: center; }
    #content { padding-top: 150px !important; }
    
}

@media (max-width:801px) {
    header {
        height: 215px !important;
    }

    #content {
        padding-top: 215px !important;
    }

}

@media (min-width:800px) {

}

#content.wrap,
#c .wrap { padding: 0; }

#c { background: #FFFFFF; }

.headline {
    background: #FFF;
    padding: 50px 10% 50px;
    color: var(--main-font-dark-color);
    text-align: center;
}

.headline.first { padding: 50px 20px 40px; }

.headline.first .wrap { padding-top: 0; padding-bottom: 0; }


.end { color: #888; margin-left: 10px }

.grey { background: #FFFFFF; }

.divider { border-top: 1px solid #D8D8D8; }

/* Header
----------------------------------------------------------*/

header { background: rgba(255, 255, 255, 1); position: fixed; z-index: 2000; width: 100%; height: 100px; }

header .wrap { padding: 10px 20px 10px 20px; }

header h1 { width: 250px; font-size: 20px; margin: 0 !important; padding: 0; }

/*This is where our logo lives*/

header h1 a {  text-indent: -9999em; }

/* Navigation */

header nav { position: absolute; right: 20px; bottom: 35px; }

header ul { overflow: hidden; }

header ul li { float: left; }

    header ul li a {
        padding: 7px 15px;
        font-size: .7em;
        display: block;
        color: var(--main-font-dark-color);
        border: 0;
    }

header ul li a:hover { color: #FFFFFF; background: #2E6EBC; }

header ul li#current a { color: #FFFFFF; background: #2E6EBC; }

/* Typography
---------------------------------------------------------*/

@font-face { font-family: "Avenir Next LT W04 Regu1437496"; src: url("Fonts/1437496/483d8937-5e17-4378-9c51-aa91a3d9e1eb.eot?#iefix"); src: url("Fonts/1437496/483d8937-5e17-4378-9c51-aa91a3d9e1eb.eot?#iefix") format("eot"), url("Fonts/1437496/ed4b9060-b5ab-4379-8840-0b50a15258b7.woff2") format("woff2"), url("Fonts/1437496/9b47db0b-77fb-4bb0-b5c2-3c131a36fc4d.woff") format("woff"), url("Fonts/1437496/9c8b7e5f-b3ca-435d-a197-b3dfeae277a1.ttf") format("truetype"); }

@font-face { font-family: "Avenir Next LT W04 Ital1437506"; src: url("Fonts/1437506/eb8f1f26-ac99-4771-ac55-0e5d7d834a98.eot?#iefix"); src: url("Fonts/1437506/eb8f1f26-ac99-4771-ac55-0e5d7d834a98.eot?#iefix") format("eot"), url("Fonts/1437506/f60e2b7d-0ea4-439d-b66a-09effe26288e.woff2") format("woff2"), url("Fonts/1437506/05dcf61d-bba5-4570-abb4-563bd8dc1da2.woff") format("woff"), url("Fonts/1437506/55c10d5e-65ca-42f0-98d7-fb2161ac50e7.ttf") format("truetype"); }

@font-face { font-family: "Avenir Next LT W04 Demi1437516"; src: url("Fonts/1437516/47d79f32-82c5-4a74-9646-5150297aabc1.eot?#iefix"); src: url("Fonts/1437516/47d79f32-82c5-4a74-9646-5150297aabc1.eot?#iefix") format("eot"), url("Fonts/1437516/249228f0-61ac-40cc-a5a5-5609c9816e3f.woff2") format("woff2"), url("Fonts/1437516/efba18ed-80cc-49c4-997a-fbb140739d19.woff") format("woff"), url("Fonts/1437516/750a20ec-9242-42a8-b3bd-c4dcec552196.ttf") format("truetype"); }

@font-face { font-family: "Avenir Next LT W04 Demi1437526"; src: url("Fonts/1437526/03906540-90b1-441e-a4c3-bb8ea6d48d92.eot?#iefix"); src: url("Fonts/1437526/03906540-90b1-441e-a4c3-bb8ea6d48d92.eot?#iefix") format("eot"), url("Fonts/1437526/f9210946-ff05-4e2a-b69b-1ee47c087b48.woff2") format("woff2"), url("Fonts/1437526/88d0c4db-4ea2-4c9c-ad42-a8e0414a57ee.woff") format("woff"), url("Fonts/1437526/030bb498-6ed5-4b99-b2d5-a0c03cc387ca.ttf") format("truetype"); }

@font-face { font-family: "Avenir Next LT W04 Medium"; src: url("Fonts/1437536/930383e5-36a7-4f9b-ba93-91da56426238.eot?#iefix"); src: url("Fonts/1437536/930383e5-36a7-4f9b-ba93-91da56426238.eot?#iefix") format("eot"), url("Fonts/1437536/91e99835-1d11-4c71-af9b-aed2a94329e7.woff2") format("woff2"), url("Fonts/1437536/4952d2e1-e0c0-46ca-b32e-c24a5882c471.woff") format("woff"), url("Fonts/1437536/55e40b4b-6742-4cea-b87c-382b0c65d12d.ttf") format("truetype"); }

h1 { font-weight: 600; font-size: 3.5em; letter-spacing: 0px; line-height: 80px; padding: 10px 0 20px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }

h2 { font-weight: 500; color: #333; font-size: 2em; line-height: 1.1em; margin-bottom: 20px; letter-spacing: 0px; -webkit-font-smoothing: antialiased; }

h3 { font-weight: 500; text-transform: uppercase; font-size: .83em; line-height: 1.1em !important; letter-spacing: .04em; }

h4 { font-weight: 500; color: #333; font-size: 1.8em; line-height: 1.1em; letter-spacing: 0px; padding: 20px 0 15px; -webkit-font-smoothing: antialiased; }

h5 { font-weight: 500; font-size: .8em; line-height: 1.8em; letter-spacing: 1.2px; text-transform: uppercase; color: #333; }

h6 { font-weight: 500; font-size: 1.2em; line-height: 1em !important; }

h7 { font-weight: 500; font-size: .8em; line-height: 1.8em; letter-spacing: 1.2px; text-transform: uppercase; color: #FFFFFF; }

p,
#blog ul,
#blog ol {
    padding-bottom: 20px;
    color: var(--main-font-dark-color);
}

p2 { padding-bottom: 20px; color: #FFFFFF; }

.text h3 { padding-bottom: 10px; }

.text h2 { font-size: 1.8em; line-height: 1.2em; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; padding-top: 10px; }

.btn {font-size: .8em; padding: 5px 30px; text-align: center; color: #FFFFFF; border: 1px solid #707070; background: #2E6EBC; display: inline-block;font-weight:bold; }

.btn:hover { color: #2E6EBC; background-color: #FFF; border: 1px solid #2E6EBC; }

.blbtn { font-family: 'Avenir Next', sans-serif; font-weight: 500; font-size: .9em; padding: 8px 30px; text-transform: uppercase; text-align: center; color: #2E6EBC; background: #FFFFFF; display: inline-block; }

/* Grid and Rollovers for Home and Apps Pages
---------------------------------------------------------*/


.grid li:before { content: ""; display: block; padding-top: 100%; }

.grid.project li:before { padding: 0; content: inherit; }



.grid li a,
.content { display: block; color: #FFF; background-color: #FFFFFF; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }

.desc { z-index: 20; position: absolute; top: 0; left: 0; padding: 10px; }

/* Grid Images */

.grid li a figure { position: absolute; top: 0; width: 100%; height: 100%; z-index: 10; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }

.grid li a figure img { width: 100%; }

.grid li a:hover figure { margin: -3%; width: 106%; }

/* Text */

.grid li.text a { color: #FFF; padding: 20px; background: #2E6EBC; }

.grid li.text a h2 { color: #FFF; }

.grid li.text a:hover { color: #FFF; background: #46586D; }

.grid li.text a:hover h2 { color: #FFF; }

/* News */

.grid li.news a { color: #FFF; padding: 20px; background: #46586D; }

.grid li.news a h2 { color: #FFF; }

.grid li.news a:hover { color: #FFF; background: rgba(0, 0, 0, .9); }

.grid li.news a:hover h2 { color: #FFF; }

/* Toolkit */

.grid li.toolkit a { color: #FFF; padding: 20px; background: #FB16BB; }

.grid li.toolkit a h2 { color: #FFF; }

.grid li.toolkit a:hover { color: #FFF; background: #46586D; }

.grid li.toolkit a:hover h2 { color: #FFF; }

/* Transparent Rollover */

figcaption { text-align: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 100; background: rgba(0, 0, 0, .65); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }

figcaption div { position: absolute; width: 100%; top: 50%; padding: 0 30px; }

figcaption div h2 { color: #FFF; margin: 0; -webkit-font-smoothing: antialiased; }

.grid li a:hover figcaption { opacity: 1; }

/* Homepage
----------------------------------------------------------*/

/* Clients */

.clients { padding-bottom: .5; }

.clients li { text-align: center; position: relative; overflow: hidden }

.grid.clients li a { background: #f6f6f6; overflow: hidden; margin: 1% .5%; }

.clients span { display: block; opacity: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #FFF; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-transform: translateZ(0); }

.clients a:hover span { opacity: 1 }

.clients img,
.clients span img { width: 75%; margin-top: 15%; }

#clients { background: #FFF; text-align: center; padding: 0 20px; }

#allClients { display: none; }

#expandClients { border: 0; margin-top: 20px; background: transparent; }

#expandClients i { margin-right: 8px; }

#expandClients:hover { color: #2E6EBC; }

[class*="column"] + [class*="column"]:last-child { float: left !important; }

/* Instagram */

.grid #instagram li:before { padding: 0 !important; }

.grid li a:hover figure#instagram { height: 106%; width: 106%; }

#instagram div:before { content: ""; display: block; padding-top: 100%; }

#instagram div { height: 100%; width: 100%; }

/* Twitter */

.grid li.twitter { background: #2E6EBC; color: rgba(255, 255, 255, 1); }

.grid li.twitter a { background: #2E6EBC; color: rgba(255, 255, 255, 1); height: auto; position: relative; padding: 0 !important; display: inline; }

.grid li.twitter .content { background: #2E6EBC; padding: 20px; color: #FFF !important; }

.grid li.twitter a:hover { background: transparent !important; color: #FFF !important; }

.home-tweet-date { display: block; font-size: 13px; color: rgba(255, 255, 255, 1) !important; }

.grid li.twitter .home-tweet-date a { display: block !important; padding: 20px 0 !important; color: rgba(255, 255, 255, 1); background: transparent !important; }

.home-tweet-date i { font-size: 20px; margin-right: 8px; float: left; margin-top: 5px; }

/* About
-------------------------------------------------------- */

#crew { opacity: 10; margin-top: -6%; }

#people { background: var(--main-bg-dark-color); position: relative; overflow: hidden; max-height: 640px; }

#people .about { position: absolute; z-index: 100; top: 50%; width: 100%; padding: 0 10%; text-align: center; }

#people .about h2 { color: #FFF }

/* Leadership */

.leadership { background: #FFFFFF; margin-top: -1em; }

.leadership li a { color: #FFFFFF; overflow: hidden; position: relative; display: block; -webkit-font-smoothing: antialiased; }

.leadership li a img { width: 100%; -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; }

.leadership:hover li a img,
.leadership.fade li a img { opacity: .5 }

.leadership li a:hover img,
.leadership.fade li a.current img { opacity: 1 }

.leadership li a div { position: absolute; z-index: 0; bottom: 0em; left: 1em; }

.leadership h3 { font-size: 1em; line-height: .5em !important; }

.leadership h4 { font-size: .75em; line-height: 1em !important; color: rgba(255, 255, 255, 1); }

/* Bio Overlays
------------------------------------------------------*/

#overlayBG { position: fixed; z-index: 3000; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 1); display: none; }

.overlay {
    z-index: 3200;
    color: var(--main-font-dark-color);
    position: fixed;
    padding: 12% 20%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: none;
}

.overlay h3 { padding-bottom: 30px; }

.overlay h1 { padding: 10px 0 5px; margin-left: -4px; }

.close { position: fixed; top: 0; padding: 65px 50px 45px 30px; right: 0; color: var(--main-font-dark-color); font-size: 25px; display: block; z-index: 1200; }

.close strong,
.ie-overlay { display: none }

    .close span:after,
    .close span:before {
        content: '';
        display: block;
        width: 22px;
        height: 3px;
        margin: 0;
        background: var(--main-bg-dark-color);
        position: absolute;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

.close span:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

.close span:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

.close:hover span:before,
.close:hover span:after { /* 	background: #F03E12; */ }

/* Project
-------------------------------------------------------- */

.app-icon { border-radius: 17.544%; height: 4em; width: 4em; }

.app-icon-border { border-radius: 17.544%; height: 4em; width: 4em; border: 1px solid #D8D8D8; }

.project {
    background: #FFFFFF;
    color: var(--main-font-dark-color);
}

.col { padding: 10%; }

.details { padding: 20% 3em 10% 0; font-family: 'Avenir Next', sans-serif !important; font-weight: normal !important; font-size: .78em !important; line-height: 1.333em !important; word-wrap: break-word; }

.details p { font-family: 'Avenir Next', sans-serif !important; }

.details ul { padding: 0 0 10px; margin: 0; }

.details li:before { padding: 0 !important; display: inline !important; }

.details li { padding-bottom: 10px; }

.client { padding-bottom: 40px; }

.client img { width: 60%; }

.store-icon { margin-top: .8em; display: block; width: 75%; }

.store-icon img { width: 100%; }

.store-icon:hover { opacity: .8; }

.project hr { width: 3em; border: solid; border-width: 1px; margin: 1em 0em 0em; display: none; }



/* Contact
----------------------------------------------------------*/

#contact li { text-align: center; }

#contact h3 { padding-top: 50%; margin-top: -10% }

#contact h2 { color: #FFF; padding-top: 15px; font-size: 1.5em !important; line-height: 1em; }

.magenta { background: #FB16BB !important; }

.magenta:hover { background: #46586D !important; }

.blue { background: #2E6EBC !important; }

.blue:hover { background: #46586D !important; }

.text-purple { color: #2E6EBC }

#map { color: #333; text-align: left; line-height: normal; }

#map p { padding: 0; font-family: 'Avenir Next', sans-serif; font-size: 16px; line-height: 20px; font-weight: 300; }

#map-canvas { height: 100%; }

#map-canvas img { max-width: none; }

.grid li #map a { position: inherit; height: auto; background: none; color: #2E6EBC; font-weight: bold; font-size: 13px; padding-top: 7px; }

/* Case Study
----------------------------------------------------------*/

#caseStudy section { max-width: 40em; padding: 30px 30px 60px 30px; margin: 0 auto; }

#caseStudy h2,
.center { text-align: center; }

#caseStudy .multiple-apps img { margin: 5px 5px; }

.casestudydetails { padding: 0 3em 3% 0; font-family: 'Avenir Next', sans-serif !important; font-weight: normal !important; font-size: .75em !important; line-height: 1.333em !important; }

.caseStudyAppButton { padding: 10px 0 70px; }

/* Extended Portfolio
----------------------------------------------------------*/

#c.extend { background: #FFFFFF; margin-top: 80px; }

.extended p { line-height: 30px; }

.extended section {
    background: #FFF;
    color: var(--main-font-dark-color);
}

.extended section.padding { padding: 80px 18% 60px; text-align: left; }

.extended .overlap { top: -100px; margin-bottom: -100px; position: relative; }

.extended blockquote { float: right; max-width: 45%; margin: 0em -2em 1em 1em; font-size: 1.55em; line-height: 1.325; position: relative; border: 0; padding: 0 10px 0 30px; }

.extended blockquote:before { content: ''; position: absolute; left: 0; top: 7px; bottom: 5px; width: .2em; background: #2E6EBC; }

#additional { padding: 60px 0 0 !important; }

#additional h3.title { text-align: center; padding: 0 0 30px; }

#additional .text a { background: #2E6EBC; }

#additional .text a,
#additional .text a h2 { color: #FFF !important; }

#additional .text a:hover { background: #46586D; }

/* Blog
----------------------------------------------------------*/



.blog a { display: block; background: #FFF; text-align: left; padding: 10px 10% 10px; color: #333; border-bottom: 1px solid #efefef; }
.blog h4{font-size:24px;font-weight:bold;}
/*.blog a:nth-child(2n){background-color:#f2f2f2} */
.blog a:hover {
    background-color: #f4f4f4
}

.blog a h3 { /* 	color: #2E6EBC */ }

#caseStudy { background: #FFF; color: #333; padding: 5% 0; }

#blog { background: #FFF; color: #333; }

#blog .btn { border: 1px solid #2E6EBC; font-weight: normal }

#blog .btn:hover { color: #2E6EBC; background-color: #FFF; border: 1px solid #2E6EBC; }

#blog a,
a.inline { font-weight: 400; border-bottom: 2px solid transparent; }

#blog a:hover,
a.inline:hover { color: #333; border-bottom: 2px solid #2E6EBC; }

#blog section { padding: 4.5em 20%; margin: 0 auto; }

#blog ol { list-style: decimal; padding: 0 0 20px 20px; }

.date { padding-bottom: 20px; }

.author { padding: 0 0 30px; }

.author-desc { padding: 30px 0 0; color: #888; }

blockquote { color: #2E6EBC; font-weight: 500; padding: 0 20px; margin: 20px 0 40px 0px; }

blockquote p { padding: 0; }

#blog h2 { padding-top: 1em; }

#share { padding-bottom: 20px; }

#postNav { margin-top: 4em; }

#postNav a[rel="next"] { float: right; margin-top: -16px; }

#blog ul { padding-left: 20px; list-style: disc; }

#blog li { padding-bottom: 8px; }

#blog ul.social { margin-top: 60px; padding: 0; list-style: none; overflow: hidden }

#blog ul.social li { float: left; padding: 0 20px 0 0; }

#blog ul.social li span { display: none; }

#blog ul.social li a,
#blog ul.social li a:hover { border: 0; font-size: 25px; }

#blog ul.social li a.fa-envelope { font-size: 21px; }

/*
.addtoany_list a{
	border: 0 !important;
	padding:0 10px 0 0 !important;
	color: #999 !important;
	background: #FFFFFF;
}

.addtoany_list a img{
	width: 28px !important;
	height: 28px !important;
	opacity: .3 !important;
	backface-visibility: hidden;
}

.addtoany_list a:hover img {
	opacity: .6 !important;

}
*/

.wp-caption { width: 100% !important }

.wp-caption-text { color: #888; font-style: italic; padding: 5px 0 1em 0; font-size: .85em; }

#soapboxheader { background-image: url("/img/banner_soapbox.png"); background-repeat: repeat; background-position: center; color: #fff;  padding: 3.5em; position: relative; overflow: hidden; }

#soapboxheader.careers { background-image: url("/img/banner_careers.png"); }

/* New Blog Styles
----------------------------------------------------------*/

#hero { position: relative; overflow: hidden; top: -100px; margin-bottom: -100px; }

#hero img { width: 100%; }

#hero p { position: absolute; background: #2E6EBC; left: 1em; bottom: 1em; width: 30%; padding: 1em; }

#author { width: 7em; float: right; margin: 0 -3em 3em 3em; }

#author img { display: inline-block; border-radius: 50%; margin-bottom: 10px; }

#author img.noauthor { background: #FFFFFF; }

#author h3 { margin: 10px 0 }

#author p { font-style: italic; font-size: .8em; color: #666; line-height: normal; }

/* Career
----------------------------------------------------------*/

#blog.career #author { width: auto; }

#blog.career .btn { border: 1px solid #2E6EBC; font-weight: normal }

#blog.career .btn:hover { color: #2E6EBC; background-color: #FFF; border: 1px solid #2E6EBC; }

#blog.career h3 { margin-top: 20px; padding-bottom: 10px; }

#blog.career .end { display: none; }

/* Footer
----------------------------------------------------------*/

footer {
    text-align: center;
    color: #FFFFFF;
    background: var(--main-bg-dark-color);
    padding: 20px 0 40px;
}

footer h3 { padding: 0 0 10px 0; }

footer p { padding-bottom: 25px; color: #979797; font-size: .85em; line-height: normal; }

footer a { color: #979797; }

footer a:hover { color: #979797; }

footer ul { overflow: hidden; font-size: 20px; }

footer li { display: inline; padding: 0 15px 0 0 }

footer li a { color: #fff; font-size:15px;}

footer li a:hover { color: #979797; }

#menu,
.mobile { display: none; }

.sp-logo-mark { margin-left: -10px; }

footer .row { border-top: 1px solid #1C2F42; margin-top: 20px; padding-top: 30px;  }

.fa-2x { font-size: 20px; }

/* MailChimp
------------------------------------------------------*/


input.email { font-family: 'Avenir Next', sans-serif; font-size: 16px; border: 1px solid #2E6EBC; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #999; background-color: transparent; box-sizing: border-box; height: 40px; padding: 0px 15px; display: inline-block; margin: 0; width: 250px; vertical-align: top; margin-bottom: 5px; }

.button { font-family: 'Avenir Next', sans-serif; font-size: 15px; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; letter-spacing: normal; color: #fff; background-color: #2E6EBC; box-sizing: border-box; height: 40px; line-height: 40px; padding: 0 15px; display: inline-block; margin: 0; transition: all 0.2s linear; cursor: pointer; width: auto; -webkit-appearance: none; }

.clear { display: inline-block; width: auto; }

.button:hover { background: #2E6EBC }

input.email::-webkit-input-placeholder { color: #666; }

input.email::-moz-placeholder { color: #666; }

input.email:-ms-input-placeholder { color: #666; }

/* Large Desktop
----------------------------------------------------------*/

#fourohfour { text-align: center; position: relative; }

#fourohfour img { width: 100%; opacity: .6 }

#fourohfour div { position: absolute; width: 100%; top: 50%; padding: 0 2% }

#fourohfour div a { color: #FFF; color: rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 1); }

#fourohfour div a:hover { color: #FFF; }

/* ==========================================================

					Responsive Design

========================================================== */

/* Large Desktop
----------------------------------------------------------*/

@media only screen and (min-width: 1700px) {

}

/* Small Desktop and iPad Landscape
----------------------------------------------------------*/

@media only screen and (max-width: 1350px) {
body { font-size: 18px; }
header ul li a { font-size: .9em; }
h1 { font-size: 3.5em !important; line-height: 1em; }
h2 { font-size: 1.5em !important; line-height: 1em; }
.grid li.text a { padding: 1em; font-size: 16px; line-height: 22px; }
}

/* iPad LandScape
----------------------------------------------------------*/

@media only screen and (max-width: 1024px) {
.details { padding: 0 10% 10%; }
.client img { width: auto; max-width: 32%; }
.store-icon { width: 130px; }
.project hr { display: block; }
.overlay { padding: 12% 20%; }
.desktop { display: none }
.grid li.twitter:before { padding: 0; }
.grid li.twitter .content { position: relative }
.leadership:hover li a img,
.leadership.fade li a img { opacity: 1 }
.leadership li a:hover img,
.leadership.fade li a.current img { opacity: 1 }
.overlay { padding: 15% 15%; }
#newsletter { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #333; }
#contact h2 { font-size: 1.1em !important; line-height: .5em; padding: 10px 0 0; }
}

/* iPad Portrait
----------------------------------------------------------*/

@media only screen and (max-width: 800px) {
.mobile { display: block; }
header nav { background: rgba(255, 255, 255, 1); position: fixed; top: 100px; left: 0; width: 100%; z-index: 900; height: 0; overflow: hidden; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
.openMenu header nav { height: 100%; }
header nav li { float: none; display: block; }
header nav li:first-child { border-top: 1px solid rgba(0, 0, 0, .1); }
header nav li a { text-align: center; padding: 10px 0; font-size: 22px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.openMenu,
.openOverlay { overflow-y: hidden }
#menu { position: absolute; top: 0; padding: 65px 30px 35px; right: 0; color: #000; font-size: 25px; display: block; z-index: 1000; }
#menu span { display: block; width: 22px; height: 3px; background: #000; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#menu span:after,
#menu span:before { content: ''; display: block; width: 22px; height: 3px; background: #000; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#menu span:before { margin-top: -7px; }
#menu span:after { margin-top: 7px; }
.openMenu #menu span { background: #FFF; }
.openMenu #menu span:after { margin: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.openMenu #menu span:before { margin: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
.bx-controls-direction { display: none }
.leadership h3 { font-size: .95em; }
.extended blockquote { float: none; margin: 0 0 1em 0; max-width: 100%; }
#hero p { position: relative; background: #2E6EBC; left: auto; bottom: auto; width: auto; padding: 1em; }
}

/* iPhone Landscape
----------------------------------------------------------*/

@media only screen and (max-width: 640px) {
#contact li:before { padding: 0; }
#contact .grid li a { padding: 50px 0; }
#contact .grid li a,
#contact .content { position: relative; max-height: 200px }
#contact h3 { padding-top: 0; margin-top: 10px }
#contact h2 { padding: 10px 0 0; }
#map-canvas { height: 200px }
#contact .grid li #map-canvas a { padding: 0; }
/* Overlay */
.close { position: fixed; left: 0; width: 100%; padding: 40px 38px 20px; background: rgba(255, 255, 255, 1); }
.close span { float: right; }
.overlay { background: rgba(255, 255, 255, 1); position: absolute; padding: 0; left: 0; top: 65px; right: 0; bottom: 0; z-index: 1200; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.overlay .subcontent { padding: 15px 15px 60px 15px; position: relative; -webkit-transform: translateZ(0); }
/* Contact Page Positioning */
#contact ul { height: 528px; position: relative; }
.small-12.map { position: absolute; top: 328px; }
#author { float: none; width: auto; margin: 20px 0; overflow: hidden; }
#author img { float: left; width: 25%; }
#author div { margin-left: 30%; padding: .5em 0 0; }
}
.tcssaptitle { font-size: 40px !important; }
/* iPhone Portrait
----------------------------------------------------------*/

@media only screen and (max-width: 500px) {
    /*     header { height: 65px; }
        header h1 { width: 165px }
            header h1 a { background-position: 0 5px; height: 55px; }
        header .wrap { padding: 0 10px 10px 10px; }
        header nav { top: 65px; }
            header nav li a { padding: 20px 0; font-size: 18px; }
    */
    .video-xs-full { width: 100% !important; height: 200px !important; }
    #content { padding-top: 160px !important; }
    #menu { padding: 40px 15px 22px 40px; }
    h1 { font-size: 2.2em !important; }
    .tcssaptitle { font-size: 30px !important; }
    #soapboxheader { padding: 1.5em; padding-top: 5.5em; }
    .blog a { padding: 10px 10% 10px; text-align: left; }

        .blog a h4 { font-size: 1.2em; }
        .blog a p { font-size: 0.9em; }
    .headline .wrap { padding: 0; }

    .grid li a:hover figcaption { opacity: 0; }
    .grid li a:hover figure { margin: 0; width: 100%; }
    .grid li.text a { padding: 10px; }
        .grid li.text a:hover { background: #FFFFFF; color: #333 }
            .grid li.text a:hover h2 { color: #333 }
    .ipad { display: none; }
    .twitter p { font-size: 14px; line-height: normal; color: #FFFFFF; }
    .desktop,
    .bx-controls-direction { display: none }
    .desc { padding: 8px; }
    #sp-logo-mark { width: 65px; }
    .text h2 { font-size: 1.1em !important; }
    blockquote p { padding: 0 0 0 0; }
    #blog section,
    #caseStudy section { padding: 20px 20px 40px 20px; }
    #crew { margin-top: 0; }
    #people .about { padding: 5% 5% 5% 5%; }
    input.email,
    .button,
    .clear { width: 100%; display: block }
    .button { padding: 0; }
    .extended section.padding,
    #blog section { padding: 40px 20px 20px; }
    /*
	This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers. You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software. Please contact Monotype with any questions regarding Web Fonts:  https://www.linotype.com
	*/






}



/* Text */

.font-open { font-family: 'Open Sans',arial; }

.font-raleway { font-family: 'Raleway',arial; }

.line-through { text-decoration: line-through }

.t-ellipsis { text-overflow: ellipsis; display: block; white-space: nowrap; overflow: hidden }

.bigger-110 { font-size: 110% !important }

.bigger-120 { font-size: 120% !important }

.f-5 { font-size: 5px !important }

.f-6 { font-size: 6px !important }

.f-7 { font-size: 7px !important }

.f-8 { font-size: 8px !important }

.f-9 { font-size: 9px !important }

.f-10 { font-size: 10px !important }

.f-11 { font-size: 11px !important }

.f-12 { font-size: 12px !important }

.f-13 { font-size: 13px !important }

.f-14 { font-size: 14px !important }

.f-15 { font-size: 15px !important }

.f-16 { font-size: 16px !important }

.f-17 { font-size: 17px !important }

.f-18 { font-size: 18px !important }

.f-19 { font-size: 19px !important }

.f-20 { font-size: 20px !important }

.f-24 { font-size: 24px !important }

.f-26 { font-size: 26px !important }

.f-28 { font-size: 28px !important }

.f-30 { font-size: 30px !important }

.f-32 { font-size: 32px !important }

.f-34 { font-size: 34px !important }

.f-36 { font-size: 36px !important }

.f-38 { font-size: 38px !important }

.f-40 { font-size: 40px !important }

.f-60 { font-size: 60px !important }

.f-65 { font-size: 65px !important }

.f-80 { font-size: 80px !important }

.f-150 { font-size: 150px !important }

.text-sm { font-size: .8em }

.text-2x { font-size: 2em }

.text-3x { font-size: 3em }

.text-4x { font-size: 4em }

.t-center { text-align: center !important }

.t-left { text-align: left !important }

.t-right { text-align: right !important }

.l-through { text-decoration: line-through }

.bold { font-weight: 600 !important }

.w-300 { font-weight: 300 !important }

.w-500 { font-weight: 500 !important }

.w-600 { font-weight: 600 !important }

.w-700 { font-weight: 700 !important }

.t-60 { top: 60px; }



/****  Margin  ****/

.m-auto { margin: auto; }

.m-0 { margin: 0 !important; }

.m-2 { margin: 2px !important; }
.m-3 { margin: 3px !important; }
.m-4 { margin: 4px !important; }
.m-5 { margin: 5px !important; }

.m-10 { margin: 10px !important; }

.m-20 { margin: 20px !important; }



/****  Margin Top  ****/

.m-t-0 { margin-top: 0px !important; }

.m-t-5 { margin-top: 5px !important; }

.m-t-10 { margin-top: 10px !important; }

.m-t-12 { margin-top: 12px !important; }

.m-t-20 { margin-top: 20px !important; }

.m-t-30 { margin-top: 30px !important; }

.m-t-40 { margin-top: 40px !important; }

.m-t-60 { margin-top: 60px !important; }

.m-t-100 { margin-top: 100px !important; }



/****  Margin Bottom  ****/

.m-b-0 { margin-bottom: 0px !important; }

.m-b-5 { margin-bottom: 5px !important; }

.m-b-6 { margin-bottom: 6px !important; }

.m-b-10 { margin-bottom: 10px !important; }

.m-b-12 { margin-bottom: 12px !important; }

.m-b-15 { margin-bottom: 15px !important; }

.m-b-20 { margin-bottom: 20px !important; }

.m-b-30 { margin-bottom: 30px !important; }

.m-b-40 { margin-bottom: 40px !important; }

.m-b-50 { margin-bottom: 50px !important; }

.m-b-60 { margin-bottom: 60px !important; }

.m-b-80 { margin-bottom: 80px !important; }

.m-b-100 { margin-bottom: 100px !important; }

.m-b-140 { margin-bottom: 140px !important; }

.m-b-245 { margin-bottom: 245px !important; }

.m-b-m30 { margin-bottom: -30px !important; }

.m-b-m50 { margin-bottom: -50px !important; }



/****  Margin Left  ****/

.m-l-0 { margin-left: 0 !important; }

.m-l-5 { margin-left: 5px !important; }

.m-l-10 { margin-left: 10px !important; }

.m-l-20 { margin-left: 20px !important; }

.m-l-30 { margin-left: 30px !important; }

.m-l-60 { margin-left: 60px !important; }



/****  Margin Right  ****/

.m-r-0 { margin-right: 0 !important; }

.m-r-5 { margin-right: 5px !important; }

.m-r-10 { margin-right: 10px !important; }

.m-r-20 { margin-right: 20px !important; }

.m-r-30 { margin-right: 30px !important; }

.m-r-60 { margin-right: 60px !important; }



/****  Padding  ****/

.p-0 { padding: 0 !important; }

.p-5 { padding: 5px !important; }

.p-10 { padding: 10px !important; }

.p-15 { padding: 15px !important; }

.p-20 { padding: 20px !important; }

.p-30 { padding: 30px !important; }

.p-40 { padding: 40px !important; }



/****  Padding Top  ****/

.p-t-0 { padding-top: 0 !important; }

.p-t-5 { padding-top: 5px !important; }

.p-t-10 { padding-top: 10px !important; }

.p-t-20 { padding-top: 20px !important; }

.p-t-30 { padding-top: 30px !important; }

.p-t-60 { padding-top: 60px !important; }

.p-t-120 { padding-top: 120px !important; }

.p-t-180 { padding-top: 180px !important; }



/****  Padding Bottom  ****/

.p-b-0 { padding-bottom: 0 !important; }

.p-b-5 { padding-bottom: 5px !important; }

.p-b-10 { padding-bottom: 10px !important; }

.p-b-20 { padding-bottom: 20px !important; }

.p-b-30 { padding-bottom: 30px !important; }

.p-b-40 { padding-bottom: 40px !important; }

.p-b-60 { padding-bottom: 60px !important; }

.p-b-100 { padding-bottom: 100px !important; }



/****  Padding Left  ****/

.p-l-0 { padding-left: 0 !important; }

.p-l-5 { padding-left: 5px !important; }

.p-l-10 { padding-left: 10px !important; }

.p-l-20 { padding-left: 20px !important; }

.p-l-30 { padding-left: 30px !important; }

.p-l-40 { padding-left: 40px !important; }

/* Padding Right  ****/

.p-r-0 { padding-right: 0 !important; }

.p-r-5 { padding-right: 5px !important; }

.p-r-10 { padding-right: 10px !important; }

.p-r-20 { padding-right: 20px !important; }

.p-r-30 { padding-right: 30px !important; }



/****  Font Color  ****/

.c-red { color: #cd6a6a; }

.c-blue { color: #00A2D9; }

.c-purple { color: #B57EE0; }

.c-brown { color: #9E7B2E; }

.c-orange { color: #ec8521; }

.c-yellow { color: #F3D261; }

.c-green { color: #18A689; }

.c-gray-light { color: #dadada }

.c-gray, [class*="bg-"]:not(.bg-gray-light) .section-title.c-gray { color: #8F8F8F; }

.c-dark { color: #343434; }

.c-white { color: #fff; }

.c-light { color: #B3B3B3; }

.c-primary, .text-primary { color: #319DB5 }

.transparent-color { color: rgba(0, 0, 0, 0.2); }

.asterisk { color: #D9534F }

.help-block { color: #AFAAAA; }

.text-primary { color: #319DB5 }

.text-right { text-align: right }

.f-left { float: left }

address { padding-left: 15px; }

blockquote.blockquote-border { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }

.nopadding { padding: 0 !important; margin: 0 !important; }


/* Border */

.border-bottom { border-bottom: 1px solid rgba(0,0,0,0.1) }

.bd-0 { -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; border-radius: 0 !important }

.bd-3 { -moz-border-radius: 3px !important; -webkit-border-radius: 3px !important; border-radius: 3px !important }

.bd-6 { -moz-border-radius: 6px !important; -webkit-border-radius: 6px !important; border-radius: 6px !important }

.bd-9 { -moz-border-radius: 9px !important; -webkit-border-radius: 9px !important; border-radius: 9px !important }

.bd-full { -moz-border-radius: 50% !important; -webkit-border-radius: 50% !important; border-radius: 50% !important }

.bd-50p { -moz-border-radius: 50% !important; -webkit-border-radius: 50% !important; border-radius: 50% !important }

.opacity-0 { opacity: 0 }

    .opacity-0 p { opacity: 0 }

.opacity-20 { opacity: .2 }

    .opacity-20 p { opacity: .2 }

.opacity-50 { opacity: .5 }

    .opacity-50 p { opacity: .5 }

.opacity-70 { opacity: .7 }

    .opacity-70 p { opacity: .7 }

.opacity-90 { opacity: .9 }

    .opacity-90 p { opacity: .9 }

.width-0 { width: 0 !important }

.width-40 { width: 40px !important }

.width-100 { width: 100px !important }

.width-120 { width: 120px !important }

.width-300 { width: 300px !important }

.min-width-40 { min-width: 40px }

.width-16p { width: 16.6666% !important }

.width-20p { width: 20% !important }

.width-100p { width: 100% !important }

.h-0 { height: 0 !important; overflow: hidden !important }

.h-20 { height: 20px !important; overflow: hidden !important }

.h-30 { height: 30px !important; overflow: hidden !important }

.h-40 { height: 40px !important; overflow: hidden !important }

.h-50 { height: 50px !important; overflow: hidden !important }

.h-70 { height: 70px !important; overflow: hidden !important }

.h-90 { height: 90px !important; overflow: hidden !important }

.h-100 { height: 100px !important; overflow: hidden !important }

.h-150 { height: 150px !important; overflow: hidden !important }

.h-220 { height: 220px !important; overflow: hidden !important }

.h-250 { height: 250px !important; overflow: hidden !important }

.h-280 { height: 280px !important; overflow: hidden !important }

.h-300 { height: 300px !important; overflow: hidden !important }

.pos-rel { position: relative }

.pos-abs { position: absolute }

.dis-inline { display: inline }

.dis-table { display: table }

.dis-inline-b { display: inline-block }

.dis-block { display: block !important }

.dis-none { display: none }

.f-left { float: left !important }

.f-right { float: right !important }

.no-border { border: none !important; box-shadow: none }

.no-bd { border: none !important; box-shadow: none }

.border { border: 1px solid #efefef !important }

.border-primary { border-color: #319DB5 }

.border-gray { border: 1px solid #efefef }

.border-bottom { border-bottom: 1px solid #efefef !important }

.border-top { border-top: 1px solid #efefef !important }

    .border-top.bg-gray-light { border-top: 1px solid #fff !important }

.border-right { border-right: 1px solid #efefef !important }

.border-left { border-left: 1px solid #efefef !important }

.border-hor { border-bottom: 1px solid #efefef !important; border-top: 1px solid #efefef !important }

.border-ver { border-left: 1px solid #efefef !important; border-right: 1px solid #efefef !important }

.bd-white { border-color: #fff !important }

.bd-green { border-left: 3px solid #18a689 }

.bd-red { border-left: 3px solid #c9625f }

.bd-blue { border-left: 3px solid #319DB5 }

.bd-t-red { border-top: 4px solid #c9625f }

.bd-t-green { border-top: 4px solid #5FB675 }

.bd-t-blue { border-top: 4px solid #0090D9 }

.bd-t-dark { border-top: 4px solid #2B2E33 }

.bd-t-purple { border-top: 4px solid #A58BD3 }

.bd-l-red { border-left: 4px solid #c9625f }

.bd-l-green { border-left: 4px solid #18a689 }

.bd-l-blue { border-left: 4px solid #1D86A9 }

.bd-l-dark { border-left: 4px solid #2B2E33 }

.bd-l-purple { border-left: 4px solid #A58BD3 }

.bd-b-red { border-bottom: 4px solid #c9625f }

.bd-b-green { border-bottom: 4px solid #18a689 }

.bd-b-blue { border-bottom: 4px solid #319DB5 }

.bd-b-dark { border-bottom: 4px solid #2B2E33 }

.bd-b-purple { border-bottom: 4px solid #A58BD3 }

.img-sm { height: 35px; width: 35px }

.img-md { height: 65px; width: 65px }

.img-lg { height: 120px; width: 120px }



/* text align */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (max-width: 767px) {

    .about-menu{width:100% !important;}
    .about-menu .fa-chevron-down{display:none;}
    #b{display:none !important;}


}


@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }

    .sub-menu{display:none;}
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}