/*
Theme Name: Maestral International
Theme URI:  http://www.maestralintl.com/
Description: Maestral International
Author: Daniel Lamb & Jory Kruspe
Author URI: http://www.manoverboard.com/
Version: 2.1
*/

/*********************************************
	Fonts
*********************************************/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/297f08");
@import url("//hello.myfonts.net/count/297f04");
@import url("//hello.myfonts.net/count/297f0b");

@font-face {font-family: 'NimbusSanNovCon-Reg';src: url('webfonts/297F08_0_0.eot');src: url('webfonts/297F08_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/297F08_0_0.woff') format('woff'),url('webfonts/297F08_0_0.ttf') format('truetype');font-weight: normal; font-style: normal;}
@font-face {font-family: 'NimbusSanNovCon-Med';src: url('webfonts/297F04_0_0.eot');src: url('webfonts/297F04_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/297F04_0_0.woff') format('woff'),url('webfonts/297F04_0_0.ttf') format('truetype');font-weight: normal; font-style: normal;}
@font-face {font-family: 'NimbusSanNovCon-Bol';src: url('webfonts/297F0B_0_0.eot');src: url('webfonts/297F0B_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/297F0B_0_0.woff') format('woff'),url('webfonts/297F0B_0_0.ttf') format('truetype');font-weight: normal; font-style: normal;}

/*********************************************
	Meyer Reset
*********************************************/
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
nav, section, aside { display: block; outline: none; }

/*********************************************
	Defaults and Quickies
*********************************************/
#wpadminbar { z-index: 2147483647 !important; } /* force wordpress admin bar to front */
body {  -webkit-text-size-adjust: 100%;}
em, i { font-style: italic; }
strong, b { font-weight: bold; }

/* text underlining defaults */
a:link, a:visited, a:active, a:hover { text-decoration: none;  }
p a:link, p a:visited, li a:link, li a:visited, blockquote a:link, blockquote a:visited { text-decoration: underline; }
p a:active, p a:hover, li a:active, li a:hover, blockquote a:active, blockquote a:hover { text-decoration: none; }
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited { text-decoration: none; }
h1 a:hover, h1 a:active, h2 a:hover, h2 a:active, h3 a:hover, h3 a:active, h4 a:hover, h4 a:active, h5 a:hover, h5 a:active, h6 a:hover, h6 a:active { text-decoration: none; }

/* CSS3 transitions on links and form fields */
a, input {
    -webkit-transition: all 0.09s ease-in;
       -moz-transition: all 0.09s ease-in;
        -ms-transition: all 0.09s ease-in;
         -o-transition: all 0.09s ease-in;
            transition: all 0.09s ease-in; }

/* float helpers */
.cl { clear: left;}
.cr { clear: right;}
.cb { clear: both; }

/* flow helpers */
.block  { display: block; }
.inline { display: inline; }
.hidden { display: none; }

/* margin helpers */
.notop { margin-top: 0 !important; padding-top: 0 !important; }
.nobottom { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.top10 { margin-top: 10px !important; }
.top20 { margin-top: 20px !important; }
.top30 { margin-top: 30px !important; }
.top40 { margin-top: 40px !important; }
.top50 { margin-top: 50px !important; }
.bottom10 { margin-top: 10px !important; }
.bottom20 { margin-top: 20px !important; }
.bottom30 { margin-top: 30px !important; }
.bottom40 { margin-top: 40px !important; }
.bottom50 { margin-top: 50px !important; }
.smaller { font-size: 80%;}

/* clearfix */
.cf:after { visibility: hidden; display: block;	font-size: 0; content: " "; clear: both; height: 0; }
* html .cf { zoom: 1; } /* IE6 */
*:first-child+html .cf { zoom: 1; } /* IE7 */

/* form helpers */
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none;}
img { vertical-align: middle; max-width: 100%; height: auto; }
fieldset { border: 0; margin: 0; padding: 0; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* proportionally scaling videos */
.videoContainer { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 15px; margin-bottom: 20px; }
.fourByThree { 	padding-bottom: 75%; }
.videoContainer iframe, .videoContainer object, .videoContainer embed {	position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* two column structure */
.twoC {
    margin-top: 10px;
}
.twoC .c1, .twoC .c2 { width: 45%;	}
.twoC .c1 { float: left; margin-right: 10%; }
.twoC .c2 { float: left; }

/* three column structure */
.threeC .c1, .threeC .c2, .threeC .c3 { width: 32%; }
.threeC .c1 { float: left; margin-right: 2%; }
.threeC .c2 { float: left; }
.threeC .c3 { float: right; }

/* four column structure */
.fourC .c1, .fourC .c2, .fourC .c3, .fourC .c4 { width: 21.25%; }
.fourC .c1 { float: left; margin-right: 5%; }
.fourC .c2 { float: left; margin-right: 5%; }
.fourC .c3 { float: left; }
.fourC .c4 { float: right; }

/* mobile helper classes */
.mobileOnly { display: none; }
#mobileNavButton { display: none; }

/* wordpress image alignment defaults */
.alignleft { float: left; margin-right: 20px; margin-bottom: 10px; max-width: 40%; }
.alignright { float: right; margin-left: 20px; margin-bottom: 10px;  max-width: 40%; }
.aligncenter { float: none; margin-right: auto; margin-left: auto;  }
.alignnone { float: none; }
.wp-caption { max-width: 100%;  }

/*********************************************
    Core
*********************************************/

html,
body {
    overflow-x: hidden
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background: #97a0a2;
    color: #ffffff;
    font-family: 'Sentinel A', 'Sentinel B';
    font-weight: 500;
    font-style: normal;
    font-size: 62.5%;
    line-height: 1.25;
}

/*********************************************
    Basic Layout
*********************************************/

#content .inner,
#footer .inner,
#callout .inner,
.quote .inner,
.content .inner,
.newsFeed .inner {
    text-align: left;
    margin: 0 auto;
    max-width: 1020px;
    padding: 0px 40px;
    /*outline: 1px dotted #eee;*/
}

.airtable-embed {
	height: 80vh !important;
}

 .shade {
	background: black;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: .3;
	z-index: 0;
} 

#callout {
	position: relative;
}

#callout h1,
#callout p {
	position: relative;
	z-index: 1;
}

.link .inner,
.document .inner {
    padding: 0
}

.content {
    padding-top: 90px;
    padding-bottom: 90px;
}
.darker {
    background-color: #647073;
}
.dark {
    background-color: #7a8588;
}
.light {
    background-color: #97a0a2;
}

/*********************************************
    Menu & Search
*********************************************/

#navBacker {
    position: fixed;
    width: 100%;
    height: 104px;
    top: 0;
    left: 0;
    left: 0;
}

#navMain {
    position: fixed;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    text-align: center;
    background: #333;
    height: 104px;
    text-align: center;
}

#isFront #navMain {
    display: inline;
    height: 0;
    background: transparent;
    position: static;
    text-align: center;
}

#isFront #navMainInner {
    top: 60px;
    width: 1080px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

#isFront #navMainInnerInner {
    position: absolute
}

#navMain .inner {
    margin: 0 auto;
    width: 1080px;
    max-width: 100%;
    position: relative;
}

.logo {
    position: absolute;
    z-index: 999999;
    top: 40px;
    left: 20px;
    float: left;
    width: 150px;
    height: 40px;
}

#menu {
    position: absolute;
    top: 40px;
    right: 20px;
    width: 100%;
    text-align: right;
    font-family: 'NimbusSanNovCon-Bol';
    font-size: 220%;
    text-transform: uppercase;
    float: right;
}

#navMain li {
    display: inline
}

#navMain ul  a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 20px;
}

#isFront #navMain ul a {
    background: transparent;
}

#navMain a {
    color: #ffffff
}
#navMain a:hover,
#navMain a:active {
    opacity: 0.7;
    color: #ddd;
}
#navButton {
    display: none
}

.navMainInside {
    padding-top: 0 !important;
}

.current-menu-item a,
.current_page_parent a {
    color: #ffba3c !important;
}
#navMain .current-menu-item a:hover,
#navMain .current-menu-item a:active,
#navMain .current_page_parent a:hover,
#navMain .current_page_parent a:active{
    opacity: 1;
    color: #ffba3c !important;
}

/*********************************************
    Callout
*********************************************/

#callout {
    background: url('img/maestral-home-background.jpg') no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 266px;
    padding-bottom: 216px;
}

#callout.notSoBig {
    padding-top: 166px;
    padding-bottom: 86px;
}

#callout.notSoBig h1 {
    font-size: 600%
}

#callout.calloutContact p {
    margin: 20px 0;
    font-size: 240%;
}

#isFront #callout {
    margin-top: 0;
    background: url('img/maestral-home-background.jpg') no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 366px;
    padding-bottom: 216px;
	z-index: -1;
	position: relative;
}

#callout p {
    font-size: 300%;
    max-width: none;
}

#isFront #callout p {
    font-size: 240%;
    max-width: 70%;
}

#contactTitle {
    font-size: 400% !important;
    line-height: 1.2;
    font-family: 'NimbusSanNovCon-Bol';
    max-width: 70% !important;
}

.button {
    background-color: #e8b24f;
    font-size: 180%;
    font-family: 'NimbusSanNovCon-Med';
    padding: 16px 16px 13px 16px;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none !important;
    margin-top: 20px;
    color: white;
}
.button:hover,
.button:active {
    background-color: #e8b24f;
    opacity: 0.8;
}
#isFront #callout h1 {
    font-size: 550%;
    color: white;
}

.callout-inside h1 {
    font-size: 1000%;
    line-height: 1;
    font-family: 'NimbusSanNovCon-Bol';
    text-transform: uppercase;
    color: #ffba3c;
}
#callout a {
    color: #FFFAEC;
    text-decoration: underline;
	z-index: 9;
	position: relative;
}
#callout a:hover,
#callout a:active {
    text-decoration: none;
}
/*********************************************
    We Grid
*********************************************/

.weGrid {
    width: 50%;
    float: left;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 70px;
    min-height: 200px;
}

#weGridContainer .inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
		flex-wrap: wrap;
}

.weGrid p {
    padding-right: 80px;
    padding-left: 80px;
}

.weGrid p {
    text-align: center;
    margin: 0 auto;
    font-size: 200%;
    font-family: 'Sentinel A', 'Sentinel B';
    font-weight: 400;
    font-style: normal;
    max-width: 60%;
    height: auto;
}

.grid3,
.grid5,
.grid7 {
    clear: both
}

.grid1,
.grid4,
.grid5,
.grid8,
.grid9,
.grid12,
.grid13,
.grid16,
.grid17,
.grid20, 
.grid21,
.grid24,
.grid25,
.grid28,
.grid29,
.grid32,
.grid33,
.grid36,
.grid37,
.grid30, 
.grid31{
    background-color: #7a8588
}

.grid2,
.grid3,
.grid6 {
    background: none
}

.weImage {
    margin-bottom: 10px
}


.teamGrid img {
    max-width: 100%;
    width: 300px;
    height: auto;
}
.teamGrid .bio {
    text-align: left;
    border-top: none;
    padding-top: 40px;
    margin-bottom: 100px;
}
.teamGrid a {
    color: white;
    text-decoration: none;
}
.teamGrid h2 {
    padding-top: 40px;

}
.teamGrid .bio p {
    text-align: left;
}

.personIntro {
    box-sizing: border-box;
    text-align: center;
    padding: 100px 0;
}
.personIntro .inner {
    max-width: 60%;
    margin: 0 auto;
}
@media screen and (max-width: 1200px) {
    .personIntro .inner {
        max-width: none;
        margin: 0 40px;
    }
}
.personIntro img {
    width: 300px;
    max-width: 100%;
    margin: 60px auto;

}
.personIntro h1 {
    font-size: 550%;
    font-family: 'NimbusSanNovCon-Bol';
    text-transform: uppercase;
    color: white;
}
.personIntro .jobTitle {
    
    text-align: center;
    font-size: 200%;
    font-family: 'Sentinel A', 'Sentinel B';
    font-weight: 400;
    font-style: normal;
    font-weight: bold;
    height: auto;

}
.personIntro .bio {
    padding-top: 40px;
    margin-bottom: 0;
    border-top: none;
}


.personIntro .bio p {
    margin-bottom: 0px;
    font-size: 240%;
    font-family: 'Sentinel A', 'Sentinel B';
    font-weight: 400;
    font-style: normal;
    height: auto;
}
/*********************************************
    News Feed
*********************************************/

.newsFeed {
    padding-top: 120px;
    padding-bottom: 120px;
}

#isPage .newsFeed,
#isFront .newsFeed {
/*     background: url('img/maestral-news-callout.jpg') no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
	background-color: #7a8588; */
}
.newsFeed .post {
    padding-top: 50px;
}
.newsFeed p {
    font-size: 240%;
    margin-bottom: 10px;
}

.newsFeed a {
    display: block;
    font-size: 180%;
    font-weight: 600;
    text-transform: uppercase;
    color: #fffaec;
}
.newsFeed p a {
    font-size: 75%;
}
#isHome .post {
    margin-top: 50px;
    border-top: 1px solid #b6bdbe;
    padding-top: 50px;
}

#isHome .firstPost {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.text {
    margin-left: 380px
}

/*********************************************
    Quotes
*********************************************/
.quote{
padding-top: 120px;
padding-bottom: 120px;
}

blockquote {
    font-size: 390%;
    line-height: 1.15;
    text-align: center;
}

.person {
    font-size: 330%;
    color: #fffaec;
    text-align: center;
    margin-top: 15px;
}

/*********************************************
    Staff List
*********************************************/

.bio {
    border-top: 1px solid #97a0a2;
    padding-top: 100px;
    margin-bottom: 100px;
}

.bio.firstRun {
    border-top: none;
    padding-top: 0;
    margin-bottom: 100px;
}

.bio-photo {
    margin-right: 12px;
    float: left;
    margin-bottom: 15px;
}

.bio-text {
    padding-top: 20px;
    clear: left;
}

.bio a {
    display: block;
    font-size: 180%;
    text-transform: uppercase;
    color: #fffaec;
    padding-top: 10px;
}

.bio p {
    margin-bottom: 15px;
    clear: both;
}

.bio h3 {
    padding-top: 30px;
    margin: 0;
}

.bio h5 {
    margin: -3px
}

/*********************************************
    Expand/Collapse
*********************************************/

.staffSet .expander {
    text-align: left
}

.expander.expanded {
    display: none
}

.readMore {
    display: block;
    width: auto;
    font-size: 180%;
    font-weight: 600;
    color: #FFFAEC;
    text-transform: uppercase;
    text-align: left;
    padding: 20px 0;
    display: block;
}
.readMore:hover,
.readMore:active {
    text-decoration: underline;
}

.readMore.expander {
    text-align: center
}

.bio .readMore.expander {
    text-align: left
}

/*********************************************
    Projects
*********************************************/

.project-detail {
    float: left;
    width: 320px;
    margin-right: 50px;
}

.project h1 {
    font-size: 340%;
    margin-bottom: 40px;
}

.project p {
    overflow: hidden
}

.lazy-load {
    width: 100%;
    text-align: center;
    background: #707b7d;
}

.lazy-load a {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    font-style: normal;
    color: #fffaec;
    font-size: 180%;
    margin: 32px 0 32px 0;
}

.plus-symbol {
    font-size: 250%;
    color: #fffaec;
}

.singleHolder {
    text-align: center
}

.singleHolder img {
    margin: 0 auto;
    max-height: 200px;
}

.countries {
    margin-bottom: 20px
}

.countries h2 {
    font-size: 340%;
    line-height: 1;
    margin-bottom: 20px;
}

.country {
    width: 50%;
    float: left;
}

.country .inner {
    margin: 0;
    padding: 0;
    padding-right: 15px;
}

.country .graphic {
    width: 75px;
    float: left;
}

.country img {
    margin-top: 5px;
    width: 100%;
    height: auto;
}

.country .label {
    height: 75px;
    width: auto;
    line-height: 75px;
    /* border: 1px solid black; */
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 150%;
}

.country .label span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
}

.countries1 .country {
    width: 100%
}

.countries1 .graphic {
    width: 150px
}

.countries1 .label {
    width: 150px;
    height: 150px;
    width: auto;
    line-height: 150px;
    font-size: 180%;
}

/*********************************************
    Hero Banner
*********************************************/

.content.hero {
    height: 400px
}

/*********************************************
    Main Content
*********************************************/

h1 {
    line-height: 1;
    font-family: 'NimbusSanNovCon-Bol';
    text-transform: uppercase;
    color: #FFBA3C;
    font-size: 1000%;
    box-sizing: border-box;
}

h2 {
    font-size: 550%;
    font-family: 'NimbusSanNovCon-Bol';
    text-transform: uppercase;
}

h3 {
    font-size: 300%;
    font-family: 'NimbusSanNovCon-Bol';
    color: #fffaec;
    line-height: 1.2;
    margin-bottom: 10px;
}

h4 {
    font-size: 200%;
    font-family: 'NimbusSanNovCon-Bol';
    text-transform: uppercase;
}

h5 {
    font-size: 240%;
    font-family: 'NimbusSanNovCon-Med';
}

.content p,
.content  li {
    font-size: 240%;
    margin-bottom: 10px;
}

.content p a:link,
.content p a:visited {
    color: #FFFAEC;
    text-decoration: none;
}

.content p a:active,
.content p a:hover {
    text-decoration: underline
}

.content li li {
    font-size: 100%
}

.content li {
    margin: 5px 0;
    margin-left: 40px;
}

.content ul {
    list-style-type: none;
    list-style-position: outside;
    margin: 20px 0;
}

.content ul li {
    background: url('img/bullets.png') no-repeat;
    padding-left: 20px;
    margin-left: 0 !important;
}

.larger-text p {
    font-size: 280%
}
.logoSet {
    padding-top: 20px;
    padding-bottom: 20px;
}
.singleLogo {
    width: 20%;
    height: auto;
    float: left;
    margin: 0;
}
.singleLogo a img {
    color: white !important;
    width: 100%;
    height: auto;
    text-align: center !important;
    vertical-align: middle;
    font-size: 100%;
    font-family: courier, monospace;
}
.singleLogo a:hover img,
.singleLogo a:active img {
    opacity: 0.7;
}



/*********************************************
    Statistics
*********************************************/

.statistics {
    padding-bottom: 50px
}

.statistics .statGroup {
    margin: 0 auto;
    margin-top: 30px;
    width: 80%;
    text-align: center;
}

.statistic {
    width: 50%;
    float: left;
}

.statistic p {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: 700;
    padding: 20px 0px;
    text-align: left;
    width: 400px;
}

.statistic .number {
    font-size: 800%;
    color: #ffba3c;
    float: left;
    width: 130px;
    text-align: right;
    line-height: 55px;
    padding: 0;
    margin: 0;
    padding-right: 10px;
}

.statistic .text {
    font-size: 180%;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    padding: 0;
    margin: 0;
}

/*********************************************
    Documents and Links
*********************************************/

.document,
.link {
    padding-top: 50px
}

.document.firstRun,
.link.firstRun {
    padding-top: 50px
}

/*********************************************
    Pagination
*********************************************/

.adjacentNav {
  margin-top: 30px;
  border-top: 1px solid #b6bdbe;
  padding-top: 30px;  
}
.newer,
.older {
    width: 50%;
}
.newer {
    text-align: right;
    float:right;
}
.older {
    text-align: left;
    float:left;
}
.newer:active,
.newer:hover,
.older:active,
.older:hover {
    text-decoration: underline;
}

/*********************************************
    Map
*********************************************/

.map {
    height: 550px;
    position: relative;
    overflow: hidden;
}

.mapBlocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 4000px;
    height: 650px;
}

/*********************************************
    Footer and Copyright
*********************************************/

footer {
    background-color: #333333;
    padding-top: 154px;
    padding-bottom: 154px;
    text-align: center;
}

.footer-logo {
    width: 139px;
    height: 37px;
    margin-bottom: 18px;
}

.tagline {
    font-size: 150%;
    font-family: 'NimbusSanNovCon-Med';
    text-transform: uppercase;
}

.facebook, .twitter, .linkedin {
    width: 29px;
    height: 24px;
    margin-bottom: 52px;
    margin-top: 52px;
    margin-left: 10px;
    margin-right: 10px;
}

.copyright, .siteBy {
    font-size: 110%;
}
.siteBy {
    margin-top: 7px;
}
.siteBy a {
    color: white !important;
    text-decoration: none !important;
}



/*********************************************
    The Awesomeness
*********************************************/

@media screen and (max-width: 1665px) { 
    .weGrid {
        min-height: 250px
    }
}

@media screen and (max-width: 1050px) { 
    .weGrid {
        min-height: 300px
    }
}

@media screen and (min-width: 976px) { 
    #navMain .collapseThis {
        display: block !important
    }
}

@media screen and (max-width: 976px) { 
    #content .inner,
    footer .inner,
    #callout .inner,
    .quote .inner,
    .content .inner {
        text-align: left;
        margin: 0 auto;
        max-width: 1020px;
        padding: 0px 20px;
        /*outline: 1px dotted #eee;*/
    }

    #navButton {
        display: block;
        width: 40px;
        height: 40px;
        background: url('img/menu-button-trans.png');
        background-size: 40px 40px;
        background-repeat: no-repeat;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 9999999;
    }

    #navMain,
    #navBacker {
        height: 65px
    }

    .logo {
        top: 20px
    }

    #navMain li {
        display: inline
    }

    #navMain  ul a {
        display: block;
        background: #333;
        width: 100%;
        text-align: center;
        margin-left: 0;
    }

    #menu {
        width: 100%;
        padding-top: 20px;
        padding-bottom: 30px;
        background: #333;
        right: 0;
    }

    #isFront #menu {
        background: #333
    }

    #navMain .collapseThis {
        top: 65px
    }

    #callout {
        margin-top: 60px;
        padding-top: 160px;
        padding-bottom: 180px;
    }

    #callout p {
        max-width: none
    }

    .statistics .statGroup {
        width: auto
    }

    .statistic {
        width: auto;
        float: none;
        margin-bottom: 15px;
    }

    .statistic p {
        margin: 0;
        padding: 0;
        font-size: 100%;
        font-weight: 700;
        padding: 20px 0px;
        text-align: left;
        width: auto;
    }

    .statistic .number {
        font-size: 800%;
        color: #ffba3c;
        float: left;
        width: 130px;
        text-align: right;
        line-height: 55px;
        padding: 0;
        margin: 0;
        padding-right: 10px;
    }

    .statistic .text {
        font-size: 180%;
        color: #fff;
        text-transform: uppercase;
        line-height: 1;
        padding: 0;
        margin: 0;
    }

    .content {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .callout-inside h1 {
        font-size: 700%
    }

    #navMain .callout-inside p {
        font-size: 280%;
        max-width: 100% !important;
    }


    .larger-text p {
        font-size: 260%
    }

    .project-detail {
        float: none;
        width: auto;
        margin-right: auto;
    }

    .text {
        margin-left: 0
    }

    .project p {
        float: none
    }

    .country {
        width: 33.33333333%;
        float: left;
    }
    
    #isFront #navMain {
        background: #333;
        top: 0;
    }
    #isFront #navMainInner {
	top: 30px;
    }
    #isFront #callout {
	padding-top: 200px;
	padding-bottom: 200px;
    }
}

@media screen and (max-width: 800px) { 
    .weGrid {
        width: auto;
        float: none;
        text-align: center;
        min-height: 0;
    }

    .grid1,
    .grid3,
    .grid5 {
        background-color: #7a8588;
    }

    .grid2,
    .grid4,
    .grid6 {
        background: none;
    }

    .twoC .c1,
    .twoC .c2 {
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
h1 {
    font-size: 400%;
}
#callout.notSoBig h1 {
    font-size: 400%;
}
h2,
.countries h2 { font-size: 300%;
}
h3 {
    line-height: 1.1;
}
#callout {
    padding-top: 50px;
    padding-bottom: 50px;
}    
#callout p {
    font-size: 260%;
    max-width: none;
}
#callout.notSoBig {
    padding-top: 70px;
    padding-bottom: 50px;
}
#contactTitle {
    font-size: 300% !important;
    max-width: none !important;
}
.content {
    padding-top: 50px;
    padding-bottom: 50px;
}
.newsFeed {
    padding-top: 50px;
    padding-bottom: 50px;
}
.content p, .content li {
    font-size: 200%;
}
.statistic p {
    font-size: 100%;
}
.singleLogo {
    width: 25%;

}
 .bio-photo {
    float: none;
}
blockquote {
    font-size: 240%;
    line-height: 1.15;
    text-align: center;
}


.bio {
    padding-top: 50px;
    margin-bottom: 50px;
}
.bio.firstRun {
    padding-top: 0px;
    margin-bottom: 50px;
}
footer {
    padding-top: 50px;
    padding-bottom: 50px;
}
.content.hero {
    height: 200px;
}
#content .inner, #footer .inner, #callout .inner, .quote .inner, .content .inner, .newsFeed .inner {
    padding: 0px 20px;
}
.content .inner .inner {
    padding: 0;
}
.documentList .readMore,
.linkList .readMore {
    padding-top: 0;
}

.documentList h3,
.linkList h3 {
    margin-bottom: 0;
}







}
@media screen and (max-width: 640px) { 
    #navTop,
    #header,
    #banner,
    #content,
    #footer {
        padding: 10px 15px
    }

    .fourC .c1,
    .fourC .c2,
    .fourC .c3,
    .fourC .c4 {
        width: 45%
    }

    .fourC .c1,
    .fourC .c3 {
        float: left;
        margin-right: 10%;
    }

    .fourC .c2,
    .fourC .c4 {
        float: left
    }

    .mobileOnly {
        display: block
    }

    .country {
        width: 90px;
        float: left;
    }

    .country .inner {
        margin-right: 0
    }

    .country .label {
        display: none
    }

    .countries1 .country {
        display: none
    }
    
    .singleLogo {
    width: 33.33333333%;

}






}

@media screen and (max-width: 480px) { 
.statistic .number {
    font-size: 800%;
    color: #FFBA3C;
    float: none;
    width: 100%;
    text-align: left;
    display: block;
    line-height: inherit;
    padding: 0;
    margin: 0px;
}
.statistic {
    margin-bottom: 0;
}
.statistic p {
    padding-top: 0;
    text-align: left;
}

.fourC .c1,
    .fourC .c2,
    .fourC .c3,
    .fourC .c4 {
        width: 100%;
        margin: 10px 0;
    }

    .threeC .c1,
    .threeC .c2,
    .threeC .c3 {
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .twoC .c1,
    .twoC .c2 {
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 20px;
    }
    
        .singleLogo {
    width: 50%;

}

    #isFront #navMainInner {
	top: 20px;
    }
    #isFront #callout {
	padding-top: 150px;
	padding-bottom: 100px;
    }

#isFront #callout h1 {
    font-size: 450%;
}
.weGrid p {
    padding-left: 40px;
    padding-right: 40px;
    max-width: none;
}

}

@media screen and (max-width: 320px) { 
 #isFront #callout h1 {
    font-size: 350%;
}
.weGrid p {
    padding-left: 20px;
    padding-right: 20px;
}
}