@charset "utf-8";

/*

Theme Name: Microcosmic

Description: The first iteration of the Institute for Biomarker Research website developed in 2016.

Version: 1.0

Author: Eric Oborne

*/



/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section, main {

	display: block;

}

body { line-height: 1; }



ol, ul { list-style: none; }



blockquote, q { quotes: none; }

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

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



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



*, *:after, *:before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }







/****** FONT DEFINITIONS *********/



@font-face {

    font-family: 'saxmonoregular';

    src: url('../fonts/saxmono-webfont.eot');

    src: url('../fonts/saxmono-webfont.eot?#iefix') format('embedded-opentype'),

         url('../fonts/saxmono-webfont.woff') format('woff'),

         url('../fonts/saxmono-webfont.ttf') format('truetype'),

         url('../fonts/saxmono-webfont.svg#saxmonoregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



/****** FONT DEFINITIONS END *********/ 









/****** COMMON ELEMENTS *********/



html, body { height:100%; width:100%; overflow: hidden; }



body, input, button, textarea { font-size:1em; font-family: "Trebuchet MS", sans-serif; }



.font_face, .inside span:after, .circle.active:after { font-family: 'saxmonoregular', serif; }



a { cursor: pointer; }



em { font-style:italic; }



strong { font-weight:bold; }



.wrapper { margin-left:auto; margin-right:auto; max-width:81.250em; }



.group:after, .wrapper:after {

    content: "";

    display: table;

    clear: both;

}



.mobile { display:none; }



figure { text-align:center; }



figure > img { max-width:100%; height:auto; }



.hide { }



.center_box { display: table; width: 100%; height: 100%; }



.v_center { display: table-cell; vertical-align: middle; text-align: center; }



.highlight { color:#2386c8; }

.highlight.green { color:#039444; }



.pattern { position:absolute; }



.pattern > span {

    float:left;

    width:.5em;

    background-image: url(../images/pattern.svg);

    background-repeat: repeat-y;

    background-size: 100% auto;

}



.pattern > .sm { height: 5em; }

.pattern > .med { height: 13.563em; }

.pattern > .lg { height: 26.063em; }

.pattern > .xl { height: 39.813em; }

.pattern > .xxl { height: 48.563em; }

.pattern > .alt { background-position: center 2.3em; }



.flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-transform: scaleX(-1); transform: scaleX(-1); }

.vflip { -moz-transform: scaleY(-1); -o-transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; -webkit-transform: scaleY(-1); transform: scaleY(-1); }



.spin { -webkit-animation: spin .5s; animation: spin .5s; }



sup {

    vertical-align: top;

    font-size: .7em;

    position: relative;

    top: -.2em;

}



.c_align { text-align: center; }







/****** COMMON ELEMENTS END *********/











/****** FRAMEWORK  *********/



.loaded #loader { animation: fadeOut 1.4s cubic-bezier(0.560, 0.010, 0.900, 0.695); width:0; height:0; opacity:0; }



.loaded #loader h2 { margin-top:0; }



#main_nav {

    position:fixed;

    top:0; right: 0;

    z-index: 10;

    overflow:hidden;

    height:0; width:0;

}

#main_nav.show { animation: headerIn .7s; background: rgba(255,255,255,.5); width:100%; height:100%; }

#main_nav.hide { animation: headerOut .7s; }



#main_nav > nav {

    height:35%;

    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%);

    overflow: hidden;

}

#main_nav.show > nav { animation: navIn 1s; }

#main_nav.hide > nav { animation: navOut .7s; }



#menu-header-menu { text-align:center; }



#menu-header-menu li { display:inline-block; padding: 2em 1%;  opacity:0; transition: .5s; transition-property: opacity; }

#main_nav.show  li { opacity:1; } 



#menu-header-menu a {

    color:#b0b2b4;

    font-size: 1.563em;

    font-weight: bold;

    padding: .3em .3em;

    border-bottom: .15em dashed #fff;

    transition: all .3s;

}

#menu-header-menu a:hover { color:#2386c8; border-bottom: .15em solid #2386c8; }

#menu-header-menu .current-menu-item a { color:#1ba046; }



#wrapper { width:100%; min-height: 100%; }



.page {

    width:100%;

    height: 100%;

    right:0;

    overflow: hidden;

}



.v_line {

    height:100%;

    width:1px;

    background: #a5a7aa;

}

.v_line:before, .v_line:after {

    content:"";

    position:absolute;

    width: .75em;

    height: .75em;

    border-radius: 50%;

    border: 1px solid #a5a7aa;

    background:#fff;

    left:-.3em;

}

.v_line:before { top:0; }

.v_line:after { bottom:0; }



#guide_container {

    position:fixed;

    z-index:10;

    right: 48%;

    top: 40%;

    -webkit-transform: scale(1.6,1.6); transform: scale(1.6,1.6);

    transition: 1s;

    transition-property: top, right, -webkit-transform, transform;

}

.loaded.viewing-page-1 #guide_container  { top: 83.5%; }

#main_nav.show + #guide_container { top: 2%; }

.loaded #guide_container { -webkit-transform: scale(1,1);transform: scale(1,1); right:6%; top: 2%; }



#nav_guide {

    width: 5.125em;

    height: 5.125em;

    position:relative;

    float:right;

}



#nav_guide .blue {

    background: url(../images/nav_guide_b.svg) no-repeat center;

    background-size: contain;

    position:absolute;

    height:100%;

    width:100%;

    animation: guide_blue 2s infinite ease-out;

}



#nav_guide .green {

    position:absolute;

    width: 67%;

    height: 67%;

    top:0; bottom:0; right:0; left:0; margin: auto;

    animation: guide_green 1.7s infinite ease-in;

}

#nav_guide .green:before, #nav_guide .green:after {

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    background: url(../images/nav_guide_g.svg) no-repeat center;

    background-size: contain;

}

#nav_guide .green:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#nav_guide .green:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }



#page_title {

    position: absolute;

    right: 0em;

    width: 100%;

    text-align: right;

    top: 1.9em;

    transition: all .6s;

    opacity:0;

}

.expand #page_title { -webkit-transform: translateX(-4em); transform: translateX(-4em); opacity:1; width: 360%; }

.viewing-page-1 .expand #page_title, #main_nav.show + #guide_container #page_title { opacity:0; width:100%; }

#page_title:before {

    content:"";

    position:absolute;

    left:-.75em; top: 1em;

    width: .75em;

    height: .75em;

    border-radius: 50%;

    border: 1px solid #6d6e70;

}



#page_title h4 {

    color:#58585b;

    font-size: .875em;

    border-bottom: 1px solid #6d6e70;

    padding: 0 2.4em .5em 0;

    white-space: nowrap;

    overflow: hidden;

}

.viewing-page-2 #page_title h4, .viewing-page-2 #page_title:before,

.viewing-page-6 #page_title h4, .viewing-page-6 #page_title:before { color:#fff; border-color: #fff; }



#page_title h3 {

    color:#010101;

    font-size: .875em;

    text-transform:  uppercase;

    padding: .5em 2.4em 0 0;

    letter-spacing: .05em;

    white-space: nowrap;

    overflow: hidden;

}

.viewing-page-2 #page_title h3, .viewing-page-6 #page_title h3 { color:#fff; }



.banner {

    position:absolute;

    z-index: 7;

    color: #fff;

    width: 90%;

    max-width: 54.375em;

    padding: 3em 4% 6em 4%;

    transition: 1s;

    transition-property: -webkit-transform, transform;

    transition-delay:.3s;

}

.banner.blue { background: linear-gradient(to right, #1b75bb 45%,#27a9e1 100%); box-shadow: inset 1px -3px 0 rgba(39,167,224,.4); }

.banner.green { background: linear-gradient(to right, #009344 45%,#38b449 100%); box-shadow: inset -1px -3px 0 rgba(130,213,63,.4); }

.banner.right { right:0; border-radius: 0 0 0 6em; }

.banner.left { left:0; border-radius: 0 0 6em 0; }

.banner:after {

    content:"";

    position:absolute;

    background-repeat: no-repeat;

    background-size: contain;

    width: 50.938em;

    height:4.063em;

}

.banner.blue:after { background-image: url(../images/swish_g.png); background-position: left top; bottom: -1.7em; left: 3.7em; }

.banner.green:after { background-image: url(../images/swish_b.png); background-position: right top; bottom: -1.65em; right: 3.7em; }



.banner h1 {

    font-size: 2.688em;

    text-align: center;

    margin-bottom: .7em;

}

.banner.left h1 { text-align: left; }



.banner p { font-size: 1.125em; line-height: 1.5em; }



.left_col {

    width: 45%;

    background: rgba(255,255,255,.95);

    height:100%;

    overflow-y:auto;

    padding: 0 5%;

}



.left_col h1 {

    text-transform:uppercase;

    font-size: 2.688em;

    color: #58585a;

    margin-bottom: 1.093em;

    text-align: center;

    letter-spacing: .05em;

}



.left_col p {

    font-size: .875em;

    margin: 0 auto 1.786em auto;

    max-width: 38.571em;

    line-height: 1.4em;

    color:#2b2b2c;

}



.right_col {

    width: 45%;

    float:right;

    height: calc(100% - 5.5em);

    /*padding-top: 12em;*/

    margin-top: 5.5em;

    position: relative;

    overflow-y: auto;

    overflow-x: hidden;

    padding-top: 5%;

}





/****** FRAMEWORK END *********/















/****** ANIMATIONS  *********/





@-webkit-keyframes spectrum {

    0% { -webkit-transform:translateY(-100%); }

    100% { -webkit-transform:translateY(100%); }

}

@keyframes spectrum {

    0% { transform:translateY(-100%); }

    100% { transform:translateY(100%); }

}



@-webkit-keyframes spectrum2 {

    0% { top: 0%; }

    50% { top: 100%;}

    50.01% { top:-100%;}

    100% { top: 0%; }

}

@keyframes spectrum2 {

    0% { top: 0%; }

    50% { top: 100%;}

    50.01% { top:-100%;}

    100% { top: 0%; }

}



@-webkit-keyframes guide_green {

    0% { -webkit-transform: scale(1,1); }

    50% { -webkit-transform: scale(1.06,1.06); }

    100% { -webkit-transform: scale(1,1); }

}

@keyframes guide_green {

    0% { transform: scale(1,1); }

    50% { transform: scale(1.06,1.06); }

    100% { transform: scale(1,1); }

}



@-webkit-keyframes guide_blue {

    0% { -webkit-transform: scale(1,1); }

    50% { -webkit-transform: scale(.94,.94); }

    100% { -webkit-transform: scale(1,1); }

}

@keyframes guide_blue {

    0% { transform: scale(1,1); }

    50% { transform: scale(.94,.94); }

    100% { transform: scale(1,1); }

}



@-webkit-keyframes headerIn {

    0% { width:100%; height: 100%; background: rgba(255, 255, 255,0); }

    100% { width:100%; height: 100%; background: rgba(255, 255, 255,.5); }

}

@keyframes headerIn {

    0% { width:100%; height: 100%; background: rgba(255, 255, 255,0); }

    100% { width:100%; height: 100%; background: rgba(255, 255, 255,.5); }

}



@-webkit-keyframes headerOut {

    0% { width:100%; height: 100%; background: rgba(255, 255, 255,.5); }

    100% { width:100%; height: 100%; background: rgba(255, 255, 255,0); }

}

@keyframes headerOut {

    0% { width:100%; height: 100%; background: rgba(255, 255, 255,.5); }

    100% { width:100%; height: 100%; background: rgba(255, 255, 255,0); }

}



@-webkit-keyframes navIn {

    0% { -webkit-transform: translateY(-2em); height: 0%; }

    30% { -webkit-transform: translateY(-2em); height: 0%;  }

    100% { -webkit-transform: translateY(0em); height: 35%; }

}

@keyframes navIn {

    0% { transform: translateY(-2em); height: 0%; }

    30% { transform: translateY(-2em); height: 0%;  }

    100% { transform: translateY(0em); height: 35%; }

}



@-webkit-keyframes navOut {

    0% { -webkit-transform: translateY(0em); height: 35%; }

    100% { -webkit-transform: translateY(-2em); height: 0; }

}

@keyframes navOut {

    0% { transform: translateY(0em); height: 35%; }

    100% { transform: translateY(-2em); height: 0; }

}



@-webkit-keyframes backFog {

    0% { background-position: 0 bottom;}

    100% {background-position: 1000px bottom; }

}

@keyframes backFog {

    0% { background-position: 0 0;}

    100% {background-position: 1000px 0; }

}



@-webkit-keyframes flicker {

    0% { opacity:1; }

    10% { opacity:.7; }

    15% { opacity:1; }

    40% { opacity:.6; }

    50% { opacity:1; }

    100% { opacity:1; }

}

@keyframes flicker {

    0% { opacity:1; }

    10% { opacity:.7; }

    15% { opacity:1; }

    40% { opacity:.6; }

    50% { opacity:1; }

    100% { opacity:1; }

}



@-webkit-keyframes wave {

    0% { background-position: 0 center; }

    100% { background-position: -1262px center; }

}

@keyframes wave {

    0% { background-position: 0 center; }

    100% { background-position: -1262px center; }

}



@-webkit-keyframes fadeOut {

    0% { opacity: 1; width:100%; height:100%; }

    5% { opacity: 1; width:100%; height:100%; }

    99% { opacity: 0; width:100%; height:100%; }

    100% { opacity: 0; width:0%; height:0%; }

}

@keyframes fadeOut {

    0% { opacity: 1; width:100%; height:100%; }

    5% { opacity: 1; width:100%; height:100%; }

    99% { opacity: 0; width:100%; height:100%; }

    100% { opacity: 0; width:0%; height:0%; }

}



@-webkit-keyframes delayOut {

    0% { opacity: 1; width:100%; height:100%; }

    99% { opacity: 1; width:100%; height:100%; }

    100% { opacity: 0; width:0%; height:0%; }

}

@keyframes delayOut {

    0% { opacity: 1; width:100%; height:100%; }

    99% { opacity: 1; width:100%; height:100%; }

    100% { opacity: 0; width:0%; height:0%; }

}



@-webkit-keyframes fadeIn {

    0% { opacity: 0; }

    10% { opacity: 0; }

    100% { opacity: 1; }

}

@keyframes fadeIn {

    0% { opacity: 0; }

    10% { opacity: 0; }

    100% { opacity: 1; }

}



@-webkit-keyframes fadeInMove {

    0% { opacity: 0; -webkit-transform: translate(10%, 0); }

    100% { opacity: 1; -webkit-transform: translate(0%, 0); }

}

@keyframes fadeInMove {

    0% { opacity: 0; transform: translate(10%, 0); }

    100% { opacity: 1; transform: translate(0%, 0); }

}



@-webkit-keyframes fadePulse {

    0% { opacity: 1; }

    50% { opacity: .2; }

    100% { opacity: 1; }

}

@keyframes fadePulse {

    0% { opacity: 1; }

    50% { opacity: .2; }

    100% { opacity: 1; }

}



@-webkit-keyframes spin {

    0% { -webkit-transform: rotate(0deg); }

    100% { -webkit-transform: rotate(180deg); }

}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(180deg); }

}



@-webkit-keyframes arrow {

    0% { -webkit-transform: translateY(0); }

    50% { -webkit-transform: translateY(50%); }

    100% { -webkit-transform: translateY(0); }

}

@keyframes arrow {

    0% { transform: translateY(0); }

    50% { transform: translateY(50%); }

    100% { transform: translateY(0); }

}



@-webkit-keyframes highlight {

    0% { background-color: rgba(55,180,73,1); }

    100% { background-color: rgba(55,180,73,0); }

}

@keyframes highlight {

    0% { background-color: rgba(55,180,73,1); }

    100% { background-color: rgba(55,180,73,0); }

}



@-webkit-keyframes hover {

    0% { top:0; }

    50% { top:-.4em; }

    100% { top:0; }

}

@keyframes hover {

    0% { top:0; }

    50% { top:-7%; }

    100% { top:0; }

}



/****** ANIMATIONS END  *********/















/****** TOP PAGE  *********/



#spectrum {

    position:absolute;

    z-index:2;

    top:0;

    height:100%;

    width:6.7%;

    min-width: 5.625em;

    left:2%;

    overflow: hidden;

    background:#1a7fc1;

    box-shadow: inset -1px 0px 0px #fff;

    -webkit-transform: scaleX(0);transform: scaleX(0);

    transition: 1s;

    transition-delay: 1.4s;

    transition-property: -webkit-transform, transform;

}

.loaded #spectrum { -webkit-transform: scaleX(0);transform: scaleX(1); }

#spectrum:before, #spectrum:after  {

    content:"";

    position:absolute;

    top:0;

    width: 100%;

    height: 100%;

}

#spectrum:before { background: linear-gradient(to bottom, #179E46 0%,#1A7FC1 100%); }

.active #spectrum:before { -webkit-animation: spectrum 7s linear infinite;animation: spectrum 7s linear infinite; }

#spectrum:after { background: linear-gradient(to bottom, #1a7fc1 0%,#179e46 100%); }

.active #spectrum:after { -webkit-animation: spectrum2 7s linear infinite;animation: spectrum2 7s linear infinite; }



#mask {

    position:absolute;

    left:0; right:0; top:0; bottom:0;

    z-index:2;

    height:100%;

    width:100%;

    background: url(../images/spectrum_mask.svg) no-repeat left center;

    background-size: cover;

}



#member {

    width: 40%;

    float:right;

    margin-top: 4.2em;

    text-align: right;

    opacity:0;

    -webkit-transform:translateX(0); transform: translateX(-45%);

    transition: 1s;

    transition-delay: 1.7s;

    transition-property: -webkit-transform, transform, opacity;

}

.loaded #member { opacity:1; -webkit-transform: translateX(0); transform: translateX(0); }



#division { display:block; }

#division:after {

    content:"";

    display:inline-block;

    width:50%;

    max-width:92px;

    height:4.63em;

    background: url(../images/logo_mdl.gif) no-repeat center;

    background-size: contain;

    position: relative;

    top: 1.7em;

}



#division h3 {

    text-transform: uppercase;

    color:#58585a;

    font-size: 1.375em;

    display:inline-block;

    padding: 0 5%;

}



#gbg {

    max-width: 281px;

    display: inline-block;

    margin-top: 2.7em;

}



#logo {

    position:relative;

    float: left;

    width: 60%;

    text-align: left;

    max-height:350px;

}

#logo > img {

    opacity:0;

    -webkit-transform:translateX(0); transform: translateX(25%);

    transition: 1s;

    transition-delay: 1.7s;

    transition-property: -webkit-transform, transform, opacity;

}

.loaded #logo > img { opacity:1; -webkit-transform: translateX(0); transform: translateX(0); }



#top .center_box {

    max-width: 970px;

    margin: 0 auto;

}



#top .v_line {

    position:absolute;

    right:0%;

    top:0; bottom:0;

    height:0;

    transition: .6s;

    transition-delay: 1.5s;

    margin: auto 0;

}

.loaded #top .v_line { height:100%; }



#scroll_icon {

    position:absolute;

    bottom:6.4%; left: 0em; right:0; margin: auto;

    background: url(../images/icon_scroll.gif) no-repeat center;

    background-size: contain;

    width: 3.688em;

    height: 5.688em;

    -webkit-transform: scale(0,0) translateY(2em);transform: scale(0,0) translateY(2em);

    transition: 1.5s;

    transition-property: -webkit-transform, transform;

    transition-delay: 7s;

}

.loaded #scroll_icon { -webkit-transform: scale(1,1) translateY(0em);transform: scale(1,1) translateY(0em); }

#scroll_icon:before {

    content:"";

    display: block;

    margin: 2.4em auto 0;

    width: 2.5em;

    height: 1.5em;

    background: url(../images/icon_scroll_arrow.png) no-repeat center;

    background-size: contain;

    opacity:.3;

    -webkit-animation: arrow 1.7s infinite linear;animation: arrow 1.7s infinite linear;

}



#mission_link > h2 {

    font-size: 2em;

    text-align: right;

    max-width: 17em;

    color:#58585a;

    position:absolute;

    bottom: 10%; right:6%;

    margin: 0 3.2em 0 0;

    -webkit-transform: translateY(4em); transform: translateY(4em);

    transition: .9s;

    transition-property: -webkit-transform, transform;

    transition-delay: .3s;

}

.loaded #mission_link > h2 { -webkit-transform: translateY(0);transform: translateY(0); }



#mission_link .highlight { border-bottom: .15em dashed #fff; transition: border .3s; }

#mission_link:hover .highlight { color:#039444; border-bottom: .15em solid #2386c8; }



#mission .banner { top: 30%; -webkit-transform:translateY(30%); transform:translateY(30%); }

#mission.active .banner {  -webkit-transform:translateY(0%); }





/****** TOP PAGE END *********/















/****** MISSION PAGE  *********/



#mission {

    background: #c3d9ef;

}

#mission:before {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    height: 87%;

    background: #85aed4;

    box-shadow: inset 0 -2.938em 4.250em #c3d9ef;

}

#mission:after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    z-index: 2;

    background: linear-gradient(to bottom, rgba(2,13,25,1) 0%,rgba(2,13,25,1) 40%,rgba(2,13,25,0.75) 71%,rgba(2,13,25,0.5) 83%,rgba(2,13,25,0) 100%);

    height: 78%;

}



#lights {

    position:absolute;

    z-index:6;

    margin: auto;

    left: 22em; top: 12em; bottom: 0;

    background:url(../images/lights.png) no-repeat;

    width:19.938em;

    height:14.25em;

    -webkit-animation: flicker 3s linear infinite, fadeIn 1.7s; animation: flicker 3s linear infinite, fadeIn 1.7s;

    display:block;

}



#hand {

    background: url(../images/hand.png) no-repeat;

    background-size:100% auto;

    left:0; top:0; bottom:-37em; margin: auto;

    width:57.125em;

    height:25.313em;

    position:absolute;

    z-index:5;

    -webkit-transform: rotateY(0deg) translate(0em,0); transform: rotateY(0deg) translate(0em,0);

    transition: 1.4s;

    transition-property: opacity,-webkit-transform, transform;

    -moz-transform: rotateY(-15deg) translate(-2em,0); transform: rotateY(-15deg) translate(-2em,0);

    -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%;

    -webkit-perspective: 200; perspective: 200;

    -webkit-perspective-origin: 50% 50%;

}



#globe {

    background: url(../images/globe.png) no-repeat;

    position:absolute;

    z-index:4;

    left:0; top:-15em; bottom:0; margin:auto 0;

    width:63.875em;

    height:45.625em;

}



#fog {

    background: url(../images/fog.png) repeat-x;

    position: absolute;

    z-index: 3;

    left: 0;

    right: 0;

    top: 15%;

    width: 200%;

    height: 100%;

}

.page.active #fog { animation: backFog 20s linear infinite; }



/****** MISSION PAGE END  *********/ 















/****** ABOUT US PAGE  *********/





#about-us {

    background: url(../images/page_bg_about.jpg) no-repeat center;

    background-size: cover;

}



#about-us > .left_col { transition: 1s; transition-property: -webkit-transform, transform; }

.show > .left_col { -webkit-transform: translateX(-100%); transform: translateX(-100%); }

.hide > .left_col { -webkit-transform: translateX(0%); transform: translateX(0%); }



.left_col p { text-align: justify; }



#about-us .pattern { left: 1.7%; }



#about-us .left_col .center_box { padding: 2em 0; }



.team_link {

    display: inline-block;

    font-size: 2em;

    color:#58585a;

    position:relative;

    padding: .5em 1em 1em .5em;

    transition: 1s;

    transition-property: -webkit-transform, transform;

}

.team_link:hover { -webkit-transform: translateX(-1em);transform: translateX(-1em); }

.team_link:after {

    content:"";

    position: absolute;

    bottom: 0; left:0; right: 0; margin: auto;

    width: 8.281em;

    height: .750em;

    background: url(../images/swish_g.png) no-repeat center;

    background-size: contain;

    transition: left 1s;

     -moz-transform: scaleX(-1); -o-transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-transform: scaleX(-1); transform: scaleX(-1);

}

.team_link:hover:after { left: 2em;}



.swipe {

    overflow: hidden;

    visibility: hidden;

    position: relative;

}

.swipe-wrap {

    overflow: hidden;

    position: relative;

    height:100%;

}



#our_team {

    position: absolute;

    left:0; top:0; bottom:0; right:0;

    opacity:0; height:0;

}

.hide > #our_team { opacity:0; height:0; width:0; animation: delayOut 1.2s; }

.show > #our_team { opacity:1; height:100%; }



#our_team:before {

    content:"";

    display:block;

    background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.87) 50%,rgba(255,255,255,1) 100%);

    transition: .7s;

    transition-property: -webkit-transform, transform;

    transition-delay: .2s;

}

#our_team:before, .s_top { height:80%; }

.hide > #our_team:before, #our_team:before { -webkit-transform: translate(100%,0); transform: translate(100%,0); }

.show > #our_team:before { -webkit-transform: translate(0,0); transform: translate(0,0); } 



#our_team:after {

    content:"";

    display: block;

    background: url(../images/bg_team.jpg) no-repeat left top, linear-gradient(to right, #009344 74%,#37b449 86%);

    transition: .7s;

    transition-property: -webkit-transform, transform;

}

#our_team:after, .s_bot { height:20%; }

.hide > #our_team:after, #our_team:after { -webkit-transform: translate(0,100%); transform: translate(0,100%); }

.show > #our_team:after{ -webkit-transform: translate(0,0%); transform: translate(0,0%); } 



#team_bios { position: absolute; z-index:1; left:0; right:0; top:0; bottom:0; transition:1s; transition-property: opacity, -webkit-transform, transform;  }

.hide #team_bios, #team_bios { opacity:0; }

.show #team_bios { opacity: 1; transition-delay:.7s; }



#team_list {

    position: absolute; left:0; top:0;

    height:80%;

    z-index:3;

    background:#fff;

    box-shadow: 0 0 5.625em rgba(55,180,73,.2);

    padding: 3em 2.2em;

    transition: .7s;

    transition-property: -webkit-transform, transform;

    transition-delay: .3s;
	display: flex;
    flex-direction: column;
	justify-content: center;
	overflow-y: auto;

}

#team_list, .s_top:before { width: 19.813em; }

.hide #team_list, #team_list { -webkit-transform: translate(0,-100%); transform: translate(0,-100%); }

.show #team_list { -webkit-transform: translate(0,0%); transform: translate(0,0%); }


.sub_group > h4 {
	text-transform: uppercase;
    font-size: 1.1em;
    line-height: 1.2em;
    padding-bottom: .5em;
}


.members { text-align: left; padding-bottom: 1.5em; }
.members:last-child {
	padding-bottom: 0;
}



.members > li { padding: .1em 0; }

.members > li.active {  }



.slide_btn {

    font-size: .938em;

    color:#58585a;

    font-weight: bold;

    padding: .3em 0;

    display: block;

    line-height: 1.1em;

    border-bottom: 2px solid #fff; 

}

.slide_btn:hover { color:#2386c8; }

.members > li.active .slide_btn { color:#009344; border-color: #2386c8; }



.swipe-wrap > section {

    height:100%;

    float:left;

    width:100%;

    position: relative;

}



.top_bio { opacity:.7; transition: opacity .7s; }

.active > .s_top .top_bio { opacity:1; }



.s_top:before { content:""; display: table-cell; }



.top_bio h4 {

    font-size: 2.438em;

    color:#1b75bb;

    text-transform: uppercase;

    margin-bottom: .6em;

}



.top_bio p, .b_list { color:#3f4f47; font-size: .938em; line-height: 1.5em; margin-bottom:1em; }



.col { max-width: 717px; text-align:left; display: inline-block; max-height: 350px; overflow-y: auto; padding-right: 1em;  }

.col.center { margin-left:auto; margin-right: auto; }

.multi .col { width: 40%; float:left; margin:0 5%; }

.multi > .col:first-child { margin: 0 3% 0 7%; }

.multi > .col:last-child { margin: 0 7% 0 3%; } 



.s_bot { padding: 0 0 0 15%; perspective-origin: 50% 50%; perspective: 150em; position: absolute; bottom: 0; }

.active >.s_bot { animation: highlight 1.4s; }



.bot_name { text-align: left; }



.bot_name h2 {

    font-size: 2.938em;

    color:#fff;

}



.bot_name h3 {

    font-size: 1.938em;

    color: #7de59e;

    text-transform: uppercase;

    letter-spacing: .1em;

    padding: .3em 0 0 1em;

}



.photo {

    position: absolute; z-index: 3;

    right: 1.7%; bottom: -4px;

    -webkit-transform: translateY(3%) rotateY(-10deg); transform: translateY(3%) rotateY(-10deg);

    transform-origin: 50% 50%;

    transition: .5s;

}

.active > .s_bot .photo { -webkit-transform: translateY(0%) rotateY(0deg); transform: translateY(0%) rotateY(0deg); }



.b_list { padding-left: 1em; }

.b_list > li { list-style: disc; margin-bottom: .7em; }

.b_list > li:last-child { margin-bottom: 0; }



.o_list { counter-reset: li; padding-left: 1.8em; }



.o_list > li {

    margin-bottom:.7em;

    font-size:.875em;

    color:#3f4f47;

    line-height: 1.2em;

    position:relative;

}

.o_list > li::before {

    content: counter(li);

    counter-increment: li;

    position:absolute; left:-2em; top: .1em;

    border: 1px solid #6d6e70;

    padding: 0 .36em 0 .28em;

    color:#000;

    text-align:center;

    border-radius: 50%;

}



.double { -webkit-column-count: 2;-moz-column-count: 2; column-count: 2; }



.arrow_btn {

    position: absolute;

    background: url(../images/arrow.png) no-repeat center #fff;

    background-size: auto 80%;

    left: 19.813em;

    top: 35%;

    height:10%;

    width: 5%; max-width: 55px;

    z-index: 2;

    font-size: 1em;

    border:0;

    transition: opacity .5s;

}

.arrow_btn.flip { left: auto; right:0; }

.hide .arrow_btn, .arrow_btn { opacity:0; }

.show .arrow_btn { opacity:.7; }

.show .arrow_btn:hover { opacity: 1; }



#close_team {

    position:absolute;

    background:#2386c8;

    color:#fff;

    z-index: 4;

    padding: .7em 2em;

    text-transform: uppercase;

    letter-spacing: .2em;

    bottom: 22%;

    transition: .7s;

    transition-property: -webkit-transform, transform;

}

.hide #close_team, #close_team { -webkit-transform: translate(-100%,0);  transform: translate(-100%,0);  }

.show #close_team { -webkit-transform: translate(0%,0);  transform: translate(0%,0); transition-delay: .5s; }

#close_team:hover { background: #27a8e0; }



#uanimation {

    position: absolute;

    display: none;

    top:0; right: 0; bottom:0; left:0;

    background: url(../images/team_utsav.gif) no-repeat left top; background-size: contain;

}

#uanimation.show { display: block; }



/****** ABOUT US PAGE END  *********/















/****** PROJECTS PAGE  *********/





#projects {

    background: url(../images/page_bg_projects.jpg) no-repeat left top;

    background-size: auto 100%;

}



#projects .banner {

    top:8%;

    max-width: 44.563em;

    padding-bottom: 4em;

    -webkit-transform:translateY(30%); transform:translateY(30%);

}

#projects.active .banner {  -webkit-transform:translateY(0%); transform:translateY(0%); }



#projects h1 { margin-bottom: 0; }



.list_nav { text-align: center; }



.projects_list {

    padding-right: 10%;

    margin-top: 2em;

}



#project-tabs-nav > li { display:inline-block; position: relative; padding: 0 3% 2em; }



.list_link {

    font-size: 2.625em;

    color:#58585a;

    text-transform: uppercase;

    padding: .4em 0% 4%;

    display:inline-block;

    letter-spacing: .04em;

    transition: .5s color;

}

.list_link:after {

    content:"";

    position:absolute;

    background-image: url(../images/swish_b.png);

    background-repeat: no-repeat;

    background-position: center;

    bottom:0; left:0; right:0;

    width: 100%;

    height: 25%;

    background-size: contain;

    -webkit-transform: translateX(-50%); transform: translateX(-50%);

    transition: .5s;

    opacity:0;

    transition-property: -webkit-transform, transform, opacity;

}

.list_link:hover { color: #2386c8; }

.list_link.active { color:#009344; }

.list_link.active:after { -webkit-transform: translateX(0%); transform: translateX(0%); opacity:1; }



.projects_list  li { text-align: right; }



.projects_list p {

    display:inline-block;

    border-bottom: 1px dashed #a7a9ab;

    padding: 1.176em 4%;

    color:#58585a;

    font-size: 1.063em;

    font-weight: bold;

    transition: color .3s;

    line-height: 1.3em;

}

.projects_list a:hover p { color: #2386c8;}

.projects_list > li:first-child p { border-top: 1px dashed #a7a9ab; }

    

.projects_list p > span { font-weight: normal; color:#000; }

.projects_list p:hover > span { color:#58585a; }



.tab[style="display: block;"] { animation: fadeInMove .7s; -webkit-transform: translate(0%,0); transform: translate(0%,0); }



#availability {

    border-radius: 2em;

    box-shadow: 0 0 .692em #2292d0, inset 0 0 .692em #33b149;

    color:#58585a;

    font-size: .813em;

    padding: 0em 2em 1em;

    margin-top: 2.5em;

}

#availability:after {

    content:"";

    display: inline-block;

    width: 3.308em;

    height: 2.692em;

    background: url(../images/logo_mdl.gif) no-repeat center;

    background-size: contain;

    position: relative;

    margin: 0 0 -1em 1em;

    transition: .7s;

    transition-property: -webkit-transform, transform;

}

#availability:hover > strong { color:#2386c8; }

#availability:hover:after { -webkit-transform: scale(1.2,1.2); transform: scale(1.2,1.2); }





/****** PROJECTS PAGE END  *********/















/****** PUBLICATIONS PAGE  *********/





#publications { overflow-x: auto; background: url(../images/wave.png) repeat-x left center; animation: wave 8s linear infinite; }



/*#pub_list:after {

    content:"";

    background: url(../images/wave.png) repeat-x;

    position:absolute;

    z-index:-1;

    left:0; right:0; top:0; bottom:0;

    width:200%;

    margin: auto 0;

    height:10em;

}

.active #pub_list:after { animation: wave 8s linear infinite; }*/



#pub_list { position:relative; white-space: nowrap; padding: 0 4%; }



#pub_list li {

    width: 20%; min-width: 17em;  

    display: inline-block;

    margin-left: 4%;

    position:relative;

    transition: .8s;

    transition-property: -webkit-transform, transform;

}

#pub_list > li:first-child { margin-left: 0; }



.circle {

    border-radius: 50%;

    width: 100%;

    height: auto;

    padding-bottom: 100%;

    background: #fff;

    display: block;

    position: relative;

    z-index:2;

}

#pub_list:hover li { transform: scale(.8,.8); }

#pub_list:hover > li:hover { transform: scale(1,1); }

.circle:before {

    content:"";

    position: absolute;

    z-index:2;

    border-radius: 50%;

    left:0; top:0; bottom:0; right:0;

    border: .6vw solid #a7a9ab;

    box-shadow: -.5em  0px #fff, .5em 0px #fff;

}

.circle:after {

    content:"Select";

    font-size: 1.688em;

    position: absolute;

    z-index:1;

    text-transform: uppercase;

    letter-spacing: .04em;

    color: #fff;

    line-height: 20vw;

    border-radius: 50%;

    left:-.4em; top:-.4em; bottom:-.4em; right:-.4em;

    background: radial-gradient(ellipse at center, rgba(85,165,157,0.87) 40%,rgba(85,165,157,0.87) 0%,rgba(255,255,255,0.87) 67%);

    opacity:0;

    transition: opacity .7s;

}

.circle.active:after { opacity:1; }



.inside {

    position: absolute;

    top:0; bottom:0; left:0; right:0;

    width:100%; height: 100%;

}



.inside p {

    background-image: url(../images/icon_pdf.svg);

    background-repeat: no-repeat;

    background-position: -2em center;

    background-size: 44%;

    transition: background .7s;

    border-radius: 50%;

}

.circle:hover p { background-position: center center; }





.inside  span {

    font-size: 1.563em;

    color:#58585b;

    font-weight: bold;

    transition: .5s color;

}

.circle.pr:hover .inside span { color:#1ba046; }

.circle.brochure:hover .inside span { color:#22a2dc; }

.circle.both:hover .inside span { color:#000; }



.inside span:after {

    text-transform: uppercase;

    font-size: .640em;

    display:block;

    font-weight: normal;

    margin-top:.4em;

    letter-spacing: .03em;

}

.pr .inside span:after { content:"Press Release"; }

.brochure .inside span:after { content:"Brochure"; }

.both .inside span:after { content:"Press Release, Brochure"; }



#publications .pattern { left: 7%; }

#publications .pattern.bottom { left: auto; right: 7%; bottom:0; z-index: -2; }



.selections {

    position: absolute;

    left: 0; right: 0; bottom: -5em; top: -5em;

    transition: .7s;

    transition-property: -webkit-transform, transform;

    -webkit-transform: rotate(90deg); transform: rotate(90deg);

    transition-delay:.4s; 

}

.selections.show { -webkit-transform: rotate(0deg); transform: rotate(0deg); }



.selections .top, .selections .bot { transition: .4s; transition-property:-webkit-transform, transform;  } 



.selections .top {

    position:absolute;

    top:0%; left:0; right:0;

    text-align: center;

    -webkit-transform: translateY(200%); transform: translateY(200%);

}



.selections .bot {

    position:absolute;

    bottom:0%; left:0; right:0;

    text-align: center;

    -webkit-transform: translateY(-200%); transform: translateY(-200%);

}

.selections.show .top, .selections.show .bot { -webkit-transform: translateY(0);transform: translateY(0); }



.selections a {

    border: .235em solid #a7a9ab;

    border-radius: .7em;

    text-transform: uppercase;

    font-size: 1.063em;

    height: 3em;

    line-height: 2.4em;

    border-radius: 6em;

    padding: 0 10%;

    white-space: nowrap;

    overflow:hidden;

    color:#444449;

    background: rgba(255,255,255,.7);

}







/****** PUBLICATIONS PAGE END  *********/















/****** CONTACT PAGE  *********/



#contact {

    background: url(../images/page_bg_contact.jpg) no-repeat top center #188f83;

    background-size: cover;

    /*box-shadow: inset 0 0 10.625em rgba(0,56,50,.86);*/

}



#msg_btn {

    color: rgba(255,255,255,.87);

    text-transform: uppercase;

    font-size: 3.563em;

    letter-spacing: .1em;

    background: rgba(23,118,91,.37);

    border: .035em solid rgba(255,255,255,.4);

    padding: 1.5% 10%;

    text-shadow: 0 0 .614em rgba(255,255,255,.1);

    box-shadow: inset 0 0 .807em rgba(255,255,255,.08), 0 0 .860em rgba(255,255,255,.05);

    position: relative;

    margin-bottom: 1.2em;

    transition: .7s;

}

#msg_btn:hover { box-shadow: inset 0 0 .807em rgba(255,255,255,.5), 0 0 .860em rgba(255,255,255,.4); border: .035em solid rgba(255,255,255,.8); color: rgba(255,255,255,1); }

#msg_btn.active { padding: 1% 0; margin: 5% 0 0 0; }

#msg_btn:before, #msg_btn:after {

    content:"";

    position: absolute;

    height: 1px;

    width:100%;

    left:0; right:0;

    background: rgba(255,255,255,.4);

    transition: .3s;

    transition-property: top, bottom, background;

}

#msg_btn:before { top: -10%; }

#msg_btn:hover:before { top: -20%; background: rgba(255,255,255,.7); }

#msg_btn:after { bottom:-10%; }

#msg_btn:hover:after { bottom:-20%; background: rgba(255,255,255,.7); }



#msg_btn > span { display: block; position: relative; }

#msg_btn > span:before, #msg_btn > span:after { transition: .5s; transition-property: -webkit-transform, transform, opacity; }

#msg_btn > span:before { content:"Send us a message";  }

#msg_btn.active > span:before { opacity:0; -webkit-transform: scale(.5,.5); transform: scale(.5,.5); }

#msg_btn > span:after {

    content:"Cancel";

    opacity:0;

    position:absolute;

    top: 12%; left:0; right: 0;

    -webkit-transform: scale(.5,.5); transform: scale(.5,.5);

    font-size: .649em;

}

.show #msg_btn > span:after { opacity:1; -webkit-transform: scale(1,1); transform: scale(1,1); }



#phone {

    display: block;

    color: rgba(255,255,255,.87);

    font-size: 3.125em;

    width:100%;

    max-width: 11.4em;

    margin:0 auto 1.2em auto;

    position: relative;

}

#phone:before {

    left:.2em;

    width: .880em;

    height: 1.360em;

    background: url(../images/icon_phone.png) no-repeat center;

}



#address, #website {

    color: rgba(255,255,255,.87);

    font-size: 1.5em;

    text-transform: uppercase;

    letter-spacing: .03em;

    position: relative;

}

#address:before {

    left: -3.7em;

    background: url(../images/icon_address.png) no-repeat center;

    width: 1.708em;

    height: 2.917em;

}

#phone:before, #address:before  {

    content:"";

    position: absolute;

    background-size: contain;

    opacity: .6;

    transition: .4s;

    transition-property: opacity, -webkit-transform, transform;

}

#phone:hover:before, #address:hover:before  { opacity: 1; transform-origin: 50% 50%; perspective-origin: 50% 50%; transform: scale(1.0) scaleZ(1.0) rotateY(50deg); animation: hover infinite linear 2s;  }

#phone, #address, #website { transition: .5s; transition-property: -webkit-transform, transform, opacity, text-shadow; perspective: 700px; }

#phone:hover, #address:hover, #website:hover { text-shadow: 0 0 .5em #fff; }

.show #address, .show #phone, .show #website { opacity: 0; transform: scale(.4,.4); }



#address > li { padding: .1em 0; }



#website { display: block; text-transform: none; padding-top:.1em}



#message {

    position: absolute; z-index:3;

    bottom:0; left:0; right:0;

    background: rgba(255,255,255,.95);

    height: 70%; width:100%;

    padding: 3%;

    -webkit-transform: translateY(100%);transform: translateY(100%);

    transition: .7s;

    transition-property: -webkit-transform, transform;

}

.show #message { -webkit-transform: translateY(0);transform: translateY(0); transition-delay:.3s; }



.field {

    text-align: left;

    display: inline-block;

    width: 40%; max-width: 28.125em;

    margin-bottom: 2em;

}

.field.m { margin-left: 3em; }

.field.full { width: 90%; max-width: 59.375em; }



.field input, .field textarea {

    font-size: 1.438em;

    color:#58585b;

    border: 1px solid #a9baad;

    width:100%;

    padding: .6em;

}

.show-label.field input, .show-label.field textarea { border-color: #24a4dd; box-shadow: 0 0 10px rgba(36,164,221,.4); }

.valid.field input, .valid.field textarea { border-color:#1ba046; box-shadow: none; background-color:#dfffe9; }

.error.field input, .error.field textarea { border-color:#dd2424; box-shadow: none; background-color:#ffeaea; }

.error.field input:focus, .error textarea:focus, .valid input:focus, .valid textarea:focus { background-color: #fff; }



.field label {

    text-transform: uppercase;

    color:#8a9f99;

    display: block;

    font-size: 1.438em;

    padding: .4em 0;

    letter-spacing: .04em;

}

.show-label.field label, .field:hover label { color:#24a4dd; }

.valid.field label { color:#1ba046; }

.error.field label { color:#dd2424; }



.submit { border:0; background-color: transparent; overflow: visible; }



#c_info {

    position: absolute; top:0; left:0;

    width:100%; height:100%;

    transition: height 1s;

}

.show > #c_info { height: 30%; transition-delay: .4s; }



#cancel_msg {

    position: absolute; z-index:-1;

    top: 0; left: 0; right: 0;

    text-align: center;

    background: linear-gradient(to right, rgba(8,28,25,0.9) 0%,rgba(8,28,25,0.55) 47%,rgba(8,28,25,0.9) 100%);

    font-size: 2.5em;

    text-transform: uppercase;

    color: rgba(255,255,255,.7);

    padding: .5em 0;

    letter-spacing: .1em;

    display: none;

    transition:.5s;

    transition-property: -webkit-transform, transform;

}

.show #cancel_msg { -webkit-transform: translateY(-100%);transform: translateY(-100%); }



#contact .v_center { transition: 1.7s; transition-property: -webkit-transform, transform; }

.success .v_center { -webkit-transform: translateX(-100%); transform: translateX(-100%); }



#thank_you {

    position:absolute;

    top:0; bottom:0; left:0; right:0;

    text-align:center;

    -webkit-transform: translateX(100%);transform: translateX(100%);

    transition:2s;

    transition-property: -webkit-transform, transform;

}

.success #thank_you { -webkit-transform: translateX(0%);transform: translateX(0%); }



#thank_you h2 {

    font-size: 2.563em;

    color: #039444;

    padding-top: 7%;

    margin-bottom: .7em;

}



#thank_you p { font-size: 1.688em; color:#58585a; }





/****** CONTACT PAGE END  *********/















/****** 404 PAGE  *********/



.page-not-found section { max-width: 500px; margin: 0 auto; text-align: center; }

.page-not-found section:before {

    content:"";

    display: inline-block;

    background-image: url(../images/logo.png);

    background-size: auto 140px;  background-repeat: no-repeat; background-position: center;

    width: 400px;

    height: 140px;

    margin: 1em 0 .4em 0;

}



.page-not-found a {

    background: #2386c8;

    color: #fff;

    padding: .7em 1.5em;

    text-transform: uppercase;

    letter-spacing: .1em;

    font-family: 'saxmonoregular', serif;

    margin-top: 2em;

}



/****** 404 PAGE END  *********/



/*IBR */
#product_dev_link{
	filter: saturate(0);
    margin: 0 auto;
}

#product_dev_link img{
	width:230px;
}



















/****** MEDIA QUERIES *********/





/*

Desktop -> Tablet Fix: 1275px

*/

@media screen and (max-width: 79.688em) {

    #spectrum { width: 11%; left: 1%; }

    #logo { padding: 0 4% 0 12%; }

    #member { text-align: center; padding: 0 4%; }

    #scroll_icon { right: auto; left: 22%; }





    #globe, #hand { left: -17em; }

    #lights { left: 5em; }





    .left_col { width: 50%; }

    #team_list, .s_top:before { width: 17em; padding: 0 2%; }

    .arrow_btn { left: 17em; }

    .s_bot { padding-left: 4%; padding-right: 27%; font-size: .9em; }

    #our_team:after { background: url(../images/bg_team.jpg) no-repeat left -7em top, linear-gradient(to right, #009344 74%,#37b449 86%); }

    .photo { text-align: right; }

    .photo > img { width: 90%; }

    .top_bio { padding: 0 5%; }

    .col { max-height: 60%; display:-moz-groupbox; }





    #projects .banner { width: 47%; }

    .right_col { background: rgba(255,255,255,.7); width: 55%; }

    .list_link { font-size: 2.3em; }

    .projects_list { padding-right: 5%; }





    .circle:before { border-width: 0.563em; }

}









/*

Desktop -> Tablet Fix: 1024px

*/

@media screen and (max-width: 64em) {

    #member{margin-top:20px;}

    #logo {float: none; width: 100%; padding: 0; text-align: center; max-width: 410px; margin: -2em auto 0; }

    #logo > img { -webkit-transform: translateY(25%); transform: translateY(25%); }

    .loaded #logo > img, .loaded #member { -webkit-transform: translateY(0); transform: translateY(0); margin-top:20px; }

	.loaded #member{padding:0;}

    #member { float: none; width: 100%; margin-top: 20px; -webkit-transform: translateY(-45%);transform: translateY(-45%); }

    #scroll_icon { left: 15%; bottom: 5.3%; }

    #division { display: inline-block; width: 50%; }

    #division:after { width: 21%; }

    #division + a { width: 30%; }

    #top .v_line { left: 0; right: 0; top: auto; height: 1px; width: 0%; margin: 0 auto; }

    .loaded #top .v_line { width: 100%; height: 1px; }

    .v_line:after { bottom: -.3em; }

    .v_line:before { top: auto; bottom: -.3em; right: 0; left: auto; }





    #mission .banner { width: 100%; bottom: 0; top: auto; }

    #hand { left: -7em; right: 0; width: 100%; background-size: contain; background-position: center; }

    #globe { left: 0; width: 100%; right: 0; background-position: center; }

    #lights { left: 0; right: 0; }





    .left_col { width: 75%; }

    .left_col h1 { font-size: 2.6em; }

    #team_list, .s_top:before { width: 30%; }

    .members { font-size: .9em; -webkit-transform: translateY(-1em); transform: translateY(-1em); }

    .arrow_btn { left: 30%; }

    #close_team { width: 30%; padding: .7em; text-align: center; }

    .photo > img { width: 74%; }

    .s_bot { font-size: .8em; }





    #projects .banner { width: 100%; top: 0; max-width:none; padding: 3% 0 4%; }

    #projects .banner:after { content:none; }

    #projects h1 { text-align:center; }

    .right_col { width: 80%; }





    #msg_btn { padding: 4% 7%; }

}









/*

Tablet: 768px

*/

@media screen and (max-width: 48em) {

	/*home page icons*/
    #member{margin-top:20px; padding: 0 0 0 10%;}

    #product_dev_link{margin-right:0;}

	#product_dev_link img{ width:130px;}
	/**/
    .onepage-wrapper { -webkit-transform: translate3d(0,0,0) !important; transform: translate3d(0,0,0) !important; }

    .page { position: relative !important; top: 0 !important; min-height:100%; overflow: initial; }

    body { overflow-y: auto; font-size: .875em; }

    .banner { position:relative; }

    #wrapper { overflow: hidden; }



    #loader h2 { display: none; }

     #guide_container { left:0; right:0; top:0; bottom:0; margin: auto; width: 5.125em; height: 5.125em; }

    .loaded #guide_container { -webkit-transform: scale(0,0); transform: scale(0,0); }

    .loaded #guide_container, .loaded.viewing-page-1 #guide_container  { right:0; top:0; }

    #nav_guide { float: none; display: inline-block; }

    #loading { font-size: 1.1em; }





    #top { padding: 10em 0; }

    #spectrum { width: 10%; left: -5%; }

    #mission_link { display:none; }

    #logo { padding: 0; width: 65%; }

    #scroll_icon { display:none; background: none; }

    #scroll_icon:before { background: none; }

    #division { width: 47%; }

    #division + a { width: 38%; }

    #division h3 { float: left; font-size: 1.2em; padding: .7em 0 0 0; }

    #division:after { width: 23%; float: left; top: 0; height: 3em; margin: 0 0 -.7em .6em; }

    #gbg { margin-top: 0em; }





    #mission { padding-top: 32em; overflow: hidden;   }

    #fog { top:0; }

    #globe { width: 100%; height: 39em; margin: 0 auto; background-size: auto 100%; top: -10%; }

    #lights { width: 100%; background-position: center top; background-size: auto 100%; height: 11em; top: 2%; }

    #hand { left: -15%; margin: 0 auto; background-size: auto 100%; height: 20em; top: 52%; background-position: top; width: 125%; }

    #mission .banner { border-radius: 0; padding: 4em 3%; -webkit-transform: translateY(0%); transform: translateY(0%); }

    .banner.blue:after { background: none; display:none; }

    #mission .banner h1 { font-size: 2.4em; }





    .left_col { overflow: visible; width:100%; background: #fff; }

    #about-us { background-size: auto 100%; padding-top:37%;  background-size: 110%; background-position: left -5em;}

    #about-us .pattern { left: -.7em; }

    .left_col h1 { margin: .3em 0 .9em; }

    #team_list { display: none; }

    .s_top:before { content: none; }

    .arrow_btn { left:0; }

    .col { max-width: 500px; max-height: 70%; }

    #our_team:before { background:#fff; }

    .photo > img { width: auto; height: 18em; }

    .s_bot { padding-right: 19em; border-bottom: .2em solid #007034; }

    .bot_name h2 { font-size: 2.5em; }

    .bot_name h3 { font-size: 1.5em; padding-left: 0; }

    #our_team { top: auto; }

    .show > #our_team { height: 37em; }

    #our_team:after { background-size: auto 100%; }

    #close_team { top:0; bottom: auto; }





    #projects { padding: 0 0 37%; background-size: 180%; background-position: left bottom -2em; }

    #projects .banner { border-radius: 0; padding: 4em 3%; -webkit-transform: translateY(0%);transform: translateY(0%); }

    .right_col { width: 100%; background:#fff; padding-top:0; float:none; margin-top:0; overflow-y: visible; height: auto; }

    #projects h1 { font-size: 2.4em; }

    .list_link { font-size: 2em; }

    #project-tabs-nav { padding-top: 2em; }

    .tab { padding: 0 0 2em 0; }

    .projects_list { padding: 0; }

    .projects_list li { text-align: center; }

    .projects_list p, .projects_list a { display:block; }

    .projects_list li:last-child p { border-bottom: 0; }

    



    #publications { height: auto; overflow-y: visible; background-size: auto 20%; padding: 2.5em 5%; }

    .circle:after { line-height: 10.5em; }

    #pub_list { font-size: .7em; padding: 2em 0; }





    #contact { padding: 45% 0; min-height: 40em; }

    #c_info { margin: auto; bottom: 0; }

    #msg_btn { font-size: 3em; }

    #phone { font-size: 2.8em; }

    #phone:before { left: 5%; }

    #address { font-size: 1.3em; }

    #address:before { left: -15%; }

    #message { position: fixed; height: auto; padding: 5%; }

    .field { width: 47.5%; }

    .field.m { margin-left: 4%; }

    .field.full { width: 100%; }

    .submit { padding-top: 0; }

    #cancel_msg { display: block; }

}









/*

Phone: 480px

*/

@media screen and (max-width: 30em) {

    #top { padding: 5em 0; }

    #member { padding-left: 0; margin-top: 1.5em; }

    #division { display: block; width: 100%; }

    #division h3 { float: none; padding-top: 0em; }

    #division:after { float: none; width: 4em; }

    #division + a { display: block; width: 14em; margin: 1em auto 0; }

    #spectrum { min-width: 4em; }

    #logo { margin-top: 0; }





    #mission { background: url(../images/page_bg_mission.jpg) no-repeat top center #051321; background-size: 100% auto; padding-top: 83%;  }

    #mission .banner { padding: 10% 5%; }

    #mission:after, #mission:before { content:none; }

    #fog, #lights, #hand, #globe { background: none; display: none; }



    .show > .left_col { -webkit-transform: translateX(0%); transform: translateX(0%); }

    .photo > img { height: 12em; }

    .photo { right: 0; }

    .s_bot { padding-right: 12em; }

    #close_team { width: 100%; }

    .bot_name h2 { font-size: 2em; }

    .bot_name h3 { font-size: 1.1em; }

    .col { height: 100%; }

    .show > #our_team { box-shadow: 0 0 4em rgba(0,0,0,.5); }

    .top_bio { vertical-align: bottom; padding-bottom: 2em; }





    .projects_list { margin-top: 5%; }

    .list_link { padding-bottom: 0; }

    .list_link:after { width: 7em; height: 1em; margin: 0 auto; }

    #availability { margin-top: 1em; }





    #publications .pattern { display:none; }





    #contact { min-height: 37em; font-size: .7em; }

    .field { display: block; width: 100%; max-width: none; margin: 0 0 4%; }

    .field.m { margin-left: 0; }

    #message { padding: 7%; }

}









/*

Phone (small): 320px

*/

@media screen and (max-width: 20em) {

    #mission  .banner, #projects .banner { padding: 2em 5%; }

    #mission .banner h1, #projects .banner h1 { font-size: 2.1em; }



    #mission { background-size: 28em; }



    .left_col h1 { font-size: 2.1em; }



    .photo { display: none; }

    .s_bot { padding-right: 4%; }

    .show > #our_team { height: 37em; }

    .top_bio { padding-bottom: .7em; }



    #website { margin-top: 1em; }

    #msg_btn { font-size: 2.3em; }

}




























/* ---- page loader (was inline in the original <head>) ---- */
#loader { position: fixed; z-index: 8; height:100%; width:100%; top:0; left:0; background:#fff; background: radial-gradient(ellipse at center, #ffffff 76%,#efefef 100%); overflow: hidden; }
#loader h2 { font-size: 1.5em; color:#58585a; margin-top: 5em; transition: 1s margin; transition-delay:.1s; -webkit-animation: fadeIn 2s; animation: fadeIn 2s; }
#loading { position:absolute; bottom:7%; right:6%; text-transform: uppercase; color: #58585a; font-size: 1.375em; transition: .5s ease-in; }
#loading.hide { transform:translateX(160%); }
#loading:after { content:' ...'; -webkit-animation: fadePulse 1s linear infinite; animation: fadePulse 1s linear infinite; }