@charset "iso-8859-1";
/* CSS Document */

/* ======================================================================================================= IMPORT FONTS ==================== */
/* font-family:'Open Sans', sans-serif; */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800italic,800);

/* font-family:'Roboto Slab', serif; */
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');

/* font awesome */
@import url(fonts/font-awesome.css);


/* ======================================================================================================= TRANSITIONS ==================== */
a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.top-bar,
.fa,
.panel,
.panel span label,
a .community{
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;}
	
@-webkit-viewport{ width:device-width;}
@-moz-viewport{ width:device-width;}
@-ms-viewport{ width:device-width;}
@-o-viewport{ width:device-width;}
@viewport{ width:device-width;}

.blue{color:#003363;}
.white{color:rgba(255,255,255,1);}

.line{width:auto; height:2px; background:rgba(0,0,0,0.23); margin:1rem auto;}

img.left{float:left; margin:0 1rem 1rem 0;}
img.right{float:right; margin:0 0 1rem 1rem;}
img.full{width:100%; height:auto; margin-bottom:1rem;}
img.sizing{width:auto; max-width:350px;}

.thick{font-weight:700;}


/* ~~~~~~ SCROLL TO TOP */
.scrolltop{
	display:none;
	width:100%;
	margin:0 auto;
	position:fixed;
	bottom:0.33rem;
	right:0.33rem;
	z-index:2000;}

.scroll{
	position:absolute;
	right:-0.35rem;
	bottom:2rem;
	background:rgba(178, 178, 178, 0.5);
	padding:0 0.33rem;
	text-align:center;
	margin:0 0 0 0;
	cursor:pointer;
	letter-spacing:0;}
	
.scroll .fa{color:white;}

.scroll:hover{
	background:#78a0f5;}

.scroll:hover .fa{color:white;}

.scroll .fa{
	font-size:30px;}
	
.thetop{position:absolute; top:-240px;}


/* ======================================================================================================= TOPBAR ==================== */
body{padding-top:240px;}
body.s1 ul.side-nav li:nth-child(1) a,
body.s2 ul.side-nav li:nth-child(2) a,
body.s3 ul.side-nav li:nth-child(3) a,
body.s4 ul.side-nav li:nth-child(4) a,
body.s5 ul.side-nav li:nth-child(5) a,
body.s6 ul.side-nav li:nth-child(6) a,
body.p1 ul.side-nav li:nth-child(1) a,
body.p2 ul.side-nav li:nth-child(2) a,
body.p3 ul.side-nav li:nth-child(3) a,
body.p4 ul.side-nav li:nth-child(4) a,
body.p5 ul.side-nav li:nth-child(5) a,
body.p6 ul.side-nav li:nth-child(6) a{background:rgba(0, 0, 0, 0.075); color:Gainsboro;}
body.s1 ul.side-nav li:nth-child(1) a:hover,
body.s1 ul.side-nav li:nth-child(2) a:hover,
body.s3 ul.side-nav li:nth-child(3) a:hover,
body.s4 ul.side-nav li:nth-child(4) a:hover,
body.s5 ul.side-nav li:nth-child(5) a:hover,
body.s6 ul.side-nav li:nth-child(6) a:hover,
body.p1 ul.side-nav li:nth-child(1) a:hover,
body.p1 ul.side-nav li:nth-child(2) a:hover,
body.p3 ul.side-nav li:nth-child(3) a:hover,
body.p4 ul.side-nav li:nth-child(4) a:hover,
body.p5 ul.side-nav li:nth-child(5) a:hover,
body.p6 ul.side-nav li:nth-child(6) a:hover{background:rgba(0, 0, 0, 0.1); color:Gainsboro;}

header{background:rgba(255,255,255,1); height:240px; position:fixed; top:0; transition:top 0.4s ease-in-out; width:100%; z-index:2000; box-shadow:0 0 5px black;}
.nav-up{top:-194px;}

.top-bar{text-align:center;}
.menu-icon{padding-top:2rem;}

ul.contacts li{display:inline-block; position:absolute; top:1.4rem;}
ul.contacts li:first-child{left:0;}
ul.contacts li:last-child{right:0;}
ul.contacts li .fa{font-size:1.2rem;}
ul.contacts li a .fa{color:#92bbd3;}
ul.contacts li a{color:rgba(255,255,255,1);}
ul.contacts li a:hover .fa{color:rgba(255,255,255,0.7);}
ul.contacts li a:hover{color:rgba(255,255,255,0.7);}

.logo{margin-bottom:1rem;}
ul.center-buttons{display:inline-block;}

.graypatch{background:#cccccc; padding:2rem 2rem 1rem; text-align:center;}
.graypatch h1{font-weight:300; font-size:1.45rem; margin-bottom:1rem; color:#273a53;}
.graypatch h1 span.name{font-weight:400; font-size:1.5rem;}



/* ======================================================================================================= MCA ==================== */
.mca{background:#fff; padding:2rem 0.5rem 3rem; margin-top:-0.5rem;}
h2{text-transform:uppercase; font-weight:700; font-size:1.8rem;}

/* ~~~~ FEATURES  ~~~~ */
.grid{position:relative; clear:both; margin:0 auto; padding:0; /*padding:1rem 0 4rem; max-width:1000px;*/ list-style:none; text-align:center;}

/* Common style */
.grid figure{position:relative; float:left; overflow:hidden; margin:10px 1%; /*min-width:426px; max-height:250px; width:auto; width:99%;*/ width:100%; height:auto; background:OliveDrab; text-align:center; cursor:pointer;}
.grid figure img{position:relative; display:block; /*min-height:100%;*/ width:100%; height:auto; opacity:0.8;}
.grid figure figcaption{padding:0.5rem; color:#fff; text-transform:none; font-size:1rem; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after{pointer-events:none;}
.grid figure figcaption,
.grid figure figcaption > a{position:absolute; top:0; left:0; width:100%; height:100%;}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a{z-index:1000; text-indent:200%; white-space:nowrap; font-size:0; opacity:0;}
.grid figure h2{word-spacing:-0.15em; font-weight:400; font-size:1.25rem; text-transform:uppercase;}
.grid figure h2 span{font-weight:700;}
.grid figure h2,
.grid figure p{margin:0;}
.grid figure p{font-size:0.9rem;}

/*---------------*/
/***** Ming *****/
/*---------------*/
figure.effect-ming{background:#071b2d;}
figure.effect-ming img{opacity:0.9; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
figure.effect-ming figcaption::before{position:absolute; top:15px; right:15px; bottom:15px; left:15px; border:2px solid #fff; box-shadow:0 0 0 20px rgba(255,255,255,0.3); content:''; opacity:0; -webkit-transition:opacity 0.35s, -webkit-transform 0.35s; transition:opacity 0.35s, transform 0.35s; -webkit-transform:scale3d(1.4,1.4,1); transform:scale3d(1.4,1.4,1);}
figure.effect-ming h2{margin:25% 0 0 0; -webkit-transition:-webkit-transform 0.35s; transition:transform 0.35s;}
figure.effect-ming p{padding:0.75rem 1rem 0.33rem; opacity:0; -webkit-transition:opacity 0.35s, -webkit-transform 0.35s; transition:opacity 0.35s, transform 0.35s; -webkit-transform:scale(1.5); transform:scale(1.5);}
figure.effect-ming:hover h2{-webkit-transform:scale(0.9); transform:scale(0.9); margin-top:7%;}
figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p{opacity:1; -webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1);}
figure.effect-ming:hover figcaption{background-color:rgba(58,52,42,0);}
figure.effect-ming:hover img{opacity:0.4;}


/* ~~~~ QUOTE ~~~~ */
.quote{background:#92bbd3; text-align:center; padding:3rem 6rem 2rem;}
.quote div{font-family:Georgia, serif; font-style:italic; color:#003363;}
.quote div:lang(en) > q {quotes: '\201C' '\201D' '\2018' '\2019'; font-size:1.23rem; margin-bottom:10rem;}
.quote div span{font-style:normal; font-family:'Open Sans', sans-serif; font-weight:700; text-align:right;}

/* ~~~~ BLUEPATCH ~~~~ */
.bluepatch{background:#92bbd3; padding-top:1rem; padding-bottom:1rem; color:#003363;}
.bluepatch .accordion{margin-bottom:2rem;}
.bluepatch .accordion p,
.bluepatch .accordion ul.list li{color:#666666;}
.bluepatch .accordion ul.list{margin-left:30px; padding-left:30px;}
.bluepatch .accordion p a{color:#003363;}
.bluepatch .accordion p a:hover{color:Crimson;}
.bluepatch q{font-family:Georgia, serif; font-style:italic; font-size:1rem; clear:both;}
.bluepatch article span{font-weight:700; font-size:0.9rem;}

.bluepatch a,
.bluepatch a .fa{color:#003363;}
.bluepatch a:hover{color:rgba(255,255,255,1);}
.bluepatch a:hover .fa{color:rgba(255,255,255,0.65);}

.bluepatch h2{font-size:1.5rem;}


/* ~~~~ NEWSROOM ~~~~ */
.newsroom .panel{background:#fff;}
.newsroom .panel:hover{background:#d8d8d8;}

.newsroom .panel h4{font-size:1.25rem; line-height:1.45rem;}
.newsroom .panel h6{font-size:0.8rem; color:#999;}
.newsroom .panel p{font-size:0.9rem; color:#666;}
.newsroom .panel span.continue{color:#fff;}
.newsroom .panel span.continue label{color:#fff; float:left; margin-right:0.25rem;}

.newsroom .panel:hover span.continue label{color:#003363;}
.newsroom .panel:hover span.continue{color:#003363;}

.control a,
.control a .fa{color:rgba(0,51,99,0.53);}
.control a:hover,
.control a:hover .fa{color:rgba(0,51,99,1);}
.control a.null,
.control a.null .fa{color:rgba(0,51,99,0.23); cursor:default;}

h4.news{font-size:1.75rem; font-weight:600; letter-spacing:-0.05rem; line-height:2rem;}
h6.news{font-size:0.9rem; color:#999;}


/* ~~~~ COMMUNITY ~~~~ */
.community{background:rgba(255,255,255,1); border:2px solid #d8d8d8; padding:1rem; text-align:center; margin-bottom:1.23rem;}
a .community{color:rgba(0,0,0,0.7);}
a:hover .community{background:#003363; color:rgba(255,255,255,1);}



/* ======================================================================================================= FOOTER ==================== */
footer{background:rgba(0,0,0,1); padding-top:2rem; padding-bottom:1.5rem; color:rgba(255,255,255,1);}
footer ul{list-style:none;}
footer ul li label{text-transform:uppercase; color:rgba(255,255,255,1); font-size:1.23rem; font-weight:600;}
footer ul li a{display:block; color:rgba(255,255,255,1);}
footer ul li a:hover{color:#92bbd3;}

footer img{margin-bottom:0.75rem;}
footer p{font-size:0.95rem;}
footer .fa{color:#92bbd3;}
footer a .fa-fax{margin-left:1rem;}
footer a{color:rgba(255,255,255,1);}
footer a:hover,
footer a:hover .fa{color:rgba(255,255,255,0.7);}
footer .fa-facebook,
footer .fa-google-plus{margin-left:5px;}

footer .line{width:auto; height:2px; background:#1a1a1a; margin:1rem auto;}




/* ======================================================================================================= MQ ==================== */
/* +++++++++++++++++++++++++++++++++++++++++++++++ Small Screens +++++++++++++++++++++++ */
@media only screen {
    /*body{
		background:DarkCyan;}*/
			
} /* Define mobile styles */

@media only screen and (max-width: 40em) {
    /*body{
		background:YellowGreen;}*/
		
	img.headshot{margin-bottom:0.5rem;}
		
	body{padding-top:64px;}
	header{background:rgba(255,255,255,1); height:64px; position:fixed; top:0; transition:top 0.4s ease-in-out; width:100%; z-index:2000; box-shadow:0 0 5px black;}
	.nav-up{top:-64px;}
		
    /* topbar */
	ul.contacts li:first-child{left:1rem;}
	ul.contacts li:last-child{left:2.7rem; right:auto;}
	ul.contacts li a .fa{color:rgba(255,255,255,1);}
	ul.contacts li a:hover .fa{color:rgba(255,255,255,0.7);}
	.logo{width:auto; max-width:50px; margin:0 auto;}
	
	/* graypatch */
	.graypatch{padding:0.5rem;}
	.graypatch h1{font-weight:300; font-size:1rem; margin-bottom:1rem;}
	.graypatch h1 span.name{font-weight:400; font-size:1.05rem;}
	
	/* mca */
	.mca{background:#fff; padding:2rem 0.5rem 1rem;}
	
	/* ~ features */
	.grid figure h2{font-weight:400; font-size:1rem; text-transform:uppercase;}
	
	figure.effect-ming figcaption::before{top:8px; right:8px; bottom:8px; left:8px;}
	
	figure.effect-ming h2{margin:20% 0 0 0;}
	figure.effect-ming p{padding:0.33rem 0.75rem;}
	figure.effect-ming:hover h2{margin-top:15%;}
	
	/* ~ quote */
	.quote{padding:0.5rem;}
	.quote div:lang(en) > q {font-size:1rem;}
	.quote div span{font-size:0.9rem;}
	
	/* ~ newsroom */
	.newsroom .panel span.continue{color:#003363;}
	.newsroom .panel span.continue label{color:#003363;}
			
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (max-width: 40em) and (orientation: portrait) {
    /*body{
		background:DarkSlateBlue;}*/
		
	img.sizing{width:100%; height:auto; text-align:center;}
				
} /* orientation: portrait | max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (max-width: 40em) and (orientation: landscape) {
    /*body{
		background:ForestGreen;}*/
				
} /* orientation: landscape | max-width 640px, mobile-only styles, use when QAing mobile issues */

/* +++++++++++++++++++++++++++++++++++++++++++++++ Medium Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 40.063em) {
    /*body{
		background:RosyBrown;}*/
		
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	/*body{
		background:Pink;}*/  /*my screen size 2 (FF)*/
		
	body{padding-top:84px;}
	header{background:rgba(255,255,255,1); height:84px; position:fixed; top:0; transition:top 0.4s ease-in-out; width:100%; z-index:2000; box-shadow:0 0 5px black;}
	.nav-up{top:-84px;}
		
	/* topbar */
	.top-bar{height:5.25rem; line-height:5.25rem;}
	.menu-icon{padding-top:2.7rem;}
	ul.contacts li{top:2rem;}
	ul.contacts li:first-child{left:1rem;}
	ul.contacts li:last-child{left:2.7rem; right:auto;}
	ul.contacts li a .fa{color:rgba(255,255,255,1);}
	ul.contacts li a:hover .fa{color:rgba(255,255,255,0.7);}
	.logo{width:auto; max-width:240px; margin:0 auto;}
	
	/* graypatch */
	.graypatch{padding:2rem 2rem 1rem;}
	.graypatch h1{font-weight:300; font-size:1.15rem; margin-bottom:1rem;}
	.graypatch h1 span.name{font-weight:400; font-size:1.2rem;}
	
    /* mca */
	/* ~ features */
	.grid figure h2{font-weight:400; font-size:0.9rem; text-transform:uppercase;}
	.grid figure p{font-size:0.75rem;}
	
	figure.effect-ming figcaption::before{top:8px; right:8px; bottom:8px; left:8px;}
	
	figure.effect-ming h2{margin:25% 0 0 0;}
	figure.effect-ming p{padding:0.33rem 0.75rem;}
	figure.effect-ming:hover h2{margin-top:5%;}
	
	/* ~ newsroom */
	.newsroom .panel span.continue{color:#003363;}
	.newsroom .panel span.continue label{color:#003363;}
		
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* +++++++++++++++++++++++++++++++++++++++++++++++ Large Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 64.063em) {
    /*body{
		background:Azure;}*/
		
} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
    /*body{
		background:LightGrey;}*/ /* my screen size 2 (IE) */
		
	/* mca */
	.mca .large-10.wider{width:99%;}
	
	/* ~ features */
	.grid figure h2{font-weight:400; font-size:1.2rem; text-transform:uppercase;}
	.grid figure p{font-size:0.85rem;}
	
	figure.effect-ming h2{margin:25% 0 0 0;}
	figure.effect-ming p{padding:0.6rem 0.75rem 0.33rem;}
	figure.effect-ming:hover h2{margin-top:8%;}
			
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* +++++++++++++++++++++++++++++++++++++++++++++++ XLarge Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 90.063em) {
    /*body{
		background:LavenderBlush;}*/
			
} /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
    /*body{
		background:SlateGrey;}*/ /* my screen size 1 */
		
	/* graypatch */
	.graypatch{padding:2rem 2rem 1rem;}
	.graypatch .large-10{width:66.33333%;}
	.graypatch h1{font-weight:300; font-size:1.45rem; margin-bottom:1rem;}
	.graypatch h1 span.name{font-weight:400; font-size:1.5rem;}
		
} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */


/* +++++++++++++++++++++++++++++++++++++++++++++++ XXLarge Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 120.063em) {
    /*body{
		background:IndianRed;}*/
		
	/* graypatch */
	.graypatch{padding:2rem 2rem 1rem;}
	.graypatch .large-10{width:56.33333%;}
	.graypatch h1{font-weight:300; font-size:1.45rem; margin-bottom:1rem;}
	.graypatch h1 span.name{font-weight:400; font-size:1.5rem;}
		
} /* min-width 1921px, xxlarge screens */