/*========== Body ===========*/


h2 {font-family:"Effra-Heavy"; font-size:30pt; color: #0074c9; margin-bottom:20px;}


/*========== Pagehead ===========*/

#pagehead { background-size: 100%; background-position:0 -0; background-repeat: no-repeat; height: 200px;}
#pagehead h1 {font-family:"Effra-Light"; font-size:40pt; text-transform:none; vertical-align: middle; margin-top: 50px;}

.head {background-image: url( '../images/head.jpg' );}
.head-mu {background-image: url( '../images/head-mu.jpg' );}
.head-h {background-image: url( '../images/head-h.jpg' );}
.head-o {background-image: url( '../images/head-o.jpg' );}
.head-c {background-image: url( '../images/head-c.jpg' );}
.head-me {background-image: url( '../images/head-me.jpg' );}


/*========== Checker ===========*/

section div.intro {margin: auto;max-width:80%;text-align: center;padding-bottom: 75px;}
section div.intro p {width: 65%; margin: auto;text-align:center; padding-bottom:  1em;}
section div.intro p em {font-family:"Avenir-MediumOblique";}

#checker div#c-1, #checker div#c-2, #checker div#c-3, #checker div#c-4 {height: 350;background-repeat: no-repeat; background-size: 3px 200px; background-position: 50% 75px;}
#checker div#c-4 {padding-bottom: 0;}

#checker div.c-1, #checker div.c-2, #checker div.c-3, #checker div.c-4 {height: 350;background-repeat: no-repeat; background-size: 3px 200px; background-position: 50% 75px;}
#checker div.c-4 {padding-bottom: 0;}


#checker div h3 {margin-bottom:20px;}
#checker div img {width: 350px;}
#checker div div.text {margin-top: 50px;}
#checker div div.text p {line-height: 1.1;line-height: normal;}
#checker div div.text h3 {font-family:"Effra-Heavy"; font-size: 18pt; color: black; line-height: normal;}
#checker div.c-1 {background-image: linear-gradient(#2a9d8f 0%, #2a9d8f 100% );}
#checker div.c-2 {background-image: linear-gradient(#0074c9 0%, #0074c9 100% ); }
#checker div.c-2me {background-image: linear-gradient(#6e44ff 0%, #6e44ff 100%);}
#checker div.c-3 {background-image: linear-gradient(#6e44ff 0%, #6e44ff 100% );}
#checker div.c-4 {background-image: linear-gradient(#19468d 0%, #19468d 100% );}
#checker div.c-4 {background-position: 50% 47%; } /* special fix */

#checker div.c-1 img, #checker div.c-3 img {float:left; margin-left: 14%; line-height: 350px; vertical-align: middle;}
#checker div.c-1 div.text, #checker div.c-3 div.text  {float:right; margin-right: 14%; width: 350px; vertical-align: middle;}

#checker div.c-2 img, #checker div.c-4 img {float:right; margin-right: 14%; line-height: 350px; vertical-align: middle;}
#checker div.c-2 div.text, #checker div.c-4 div.text {float:left; margin-left: 14%; width: 350px; vertical-align: middle; line-height: 350px}
#checker div.c-2 div.text p, #checker div.c-2 div.text h3, #checker div.c-4 div.text p, #checker div.c-4 div.text h3 {text-align: right; }

#checker div.dia img {margin-top: 95px;}  /* special fix */

#checker.checkalt {padding: 0px 50px;}  /* special fix */

#checker .intro p a.phone {color: black;}



/*========== mtp menu ===========*/

section #mtp {padding-top: 20px;}
section #mtp-menu {width: 50%; padding-left: 0%; float: left;}
section #mtp-menu ul {text-align: right; padding: 0 0 0 20px; float: right;}
section #mtp-menu h4 {text-transform: uppercase; font-family: "Effra-Medium"; margin: 0px; padding-right: 20px;padding-top: 5px;}

section #mtp-menu ul li {float: left; margin: 10px; width: 102px; height: 152px; text-align: center; padding: 0px; vertical-align: top; padding: 10px; padding-top:20px; background-position: top left; background-repeat: no-repeat; background-size: 122px 172px; position: relative;}
section #mtp-menu ul.r1 li {background-image: url( '../images/mtp-r1.svg' );}
section #mtp-menu ul.r2 li {background-image: url( '../images/mtp-r2.svg' );}
section #mtp-menu ul.r3 li {background-image: url( '../images/mtp-r3.svg' );}
section #mtp-menu ul.r1 li:hover, section #mtp-menu ul.r2 li:hover, section #mtp-menu ul.r3 li:hover { background-image: url( '../images/mtp-active.svg' );}
section #mtp-menu ul li.active { background-image: url( '../images/mtp-active.svg' );}
section #mtp-menu ul li a {text-decoration: none;}
section #mtp-menu ul li span {height: 100px; }
section #mtp-menu ul li span img {width: 60px; height: 60px; padding: 10px;}
section #mtp-menu ul li h6 {font-family: 'Avenir-Black';font-size: 10pt;  color: white; text-transform: uppercase; position: absolute; top: 100 middle; width: 100px;}

section div#panels {width: 50%; float: right; text-align: left; padding-top: 30px;}
section div#panels div {padding: 0px 40px;}
section #mtp div#panels div img {display:none;visibility:hidden;}
section div#panels div h3 {font-family:"Effra-Heavy"; font-size: 20pt; color: black; line-height: normal; padding-bottom: 20px;}
section div#panels div ul {padding: 0 0px 20px 20px; list-style-type: disc;}
section div#panels div p.center  {text-align: center;}
section div#panels div p.center img {width: 400px;}


/*========== staff menu ===========*/

section.pb15 {padding-bottom: 15px !important;}  /* special fix */

section div.biointro {padding-bottom: 0; }
section div.biointro h2 { margin-bottom: 0; text-align: left;}

section #bios {padding-top: 20px;}
section #bio-menu {width: 50%; padding-left: 0%; float: left; padding-top: 20px;}
section #bio-menu h4 {text-transform: uppercase; font-family: "Effra-Medium"; margin: 0px; padding-right: 20px; padding-top: 5px;}
section #bio-menu ul {text-align: right; padding: 0 0 10px 20px; float: right; clear: both; min-width: 570px;}
section #bio-menu ul li {float: left; margin: 5px;  text-align: center; padding: 0px; vertical-align: top; padding: 0px; padding-top:0px; width: 180px; }

section #bio-menu ul li a {text-decoration: none;position: relative;}
section #bio-menu ul li img {width: 175px; padding: 5px; z-index: 1;border: 1px solid white; border-radius: 50px;}
section #bio-menu ul li div.id {width: 165px; position: absolute; bottom: 10px; left: 5px; background-color: rgba(0, 117, 201, 0.8); padding:10px 5px; z-index: 2; border-radius: 0 0 50px 50px}
section #bio-menu ul li:hover div.id,section #bio-menu ul li.active div.id  { background-color: rgba(25, 41, 87, 0.8);}
section #bio-menu ul li:hover, section #bio-menu ul li.active { background-image: url( '../images/bio-active.svg' ); background-repeat: no-repeat;}
section #bio-menu ul li img { background-image: url( '../images/bio-active.svg' ); background-repeat: no-repeat;}
section #bio-menu ul li div.id h6 {font-family: 'Avenir-Black'; font-size: 9pt;  color: white; text-transform: uppercase; }
section #bio-menu ul li div.id p {font-family: 'Avenir-Book'; font-size: 9pt;  color: white; margin-bottom: 0px;}


section #bios #panels h3 span {font-size: 80%; font-family: "Effra-Bold";}
section #bios #panels div img {width: 250px; float: left; margin: 0 20px 10px 0;}




/*========== Job Listings ===========*/

#job-listings {text-align:center; padding-bottom: 125px;} /* special fix */

#job-listings div.categories {padding-top: 25px;clear: left; text-align: center; margin: auto; display: inline-block;}
#job-listings div.categories div.listing-group {float: left; width: 300px;}
#job-listings div.categories div.listing-group ul {margin: 0 20px;}
#job-listings div.categories div.listing-group ul li {color: white; padding: 10px; margin: 10px 0;background-image: url( '../images/job.svg' ); background-repeat: no-repeat;}
#job-listings div.categories div.listing-group ul li { padding-top: 7px; }  /* special chrome fix */
#job-listings div.categories div.listing-group ul li:hover {background-image: url( '../images/job-active.svg' );}
#job-listings div.categories div.listing-group ul li a {color: #ffffff; text-decoration: none; font-size: 12pt;}
#job-listings div.categories div.listing-group ul li.shh { visibility: hidden; display: none; }

section#job-listings #panels {width: 60%; float: none; margin: auto;}
section#job-listings #panels div { text-align: left; }

section#job-listings #panels h4 { margin-bottom: 5px; }
section#job-listings #panels button {color: white; font-size: 14pt; font-family: "Effra-Medium"; padding: 10px 35px; display: block; margin: 20px auto;background: #0074c9;border: none;
border-radius: 25px;}
section#job-listings #panels button:hover {background: #192957; }

section.jobs {background-image: url( '../images/swoosh-j.svg' ); background-size: 102%; background-position: 15% 0%; background-repeat: no-repeat; padding-top: 225px; overflow: hidden;}

#job-description ul li:not(:last-child) {padding-bottom: 10px;}


/*========== Contact ===========*/

div.imgcon {text-align: center; padding-top: 30px;}
div.imgcon img {width: 300px;}


/*========== Two Columns ===========*/

#legal div.col {width: 48%; float: left;}
#legal div.flrt {float: right;}
#legal div h4 {padding-top: 25px;}
#legal div > h4:first-child {padding-top: 0px;}
#legal div p em {font-family:"Avenir-MediumOblique";}
#legal div ul {padding: 0 0px 20px 20px; list-style-type: disc;}
#legal div ul li:not(:last-child) {padding-bottom: 20px;}


/*========== Videos ===========*/

#videos  {padding: 25px 50px; }



/*========== Association ===========*/

#association { padding-bottom: 25px; background-image: none;;}



/*========== Foot ===========*/

#foot {background-image: url( '../images/foot.svg' ), linear-gradient(0deg, white 0% , white 100%); background-size: 101%; background-position:0 -0; background-repeat: no-repeat;}






/*========== Mobile ===========*/

@media screen and (max-width:1175px) {
	section #mtp-menu ul.r1 {width: 300px;}
        #biographies {padding: 50px 5px;}
}

@media screen and (max-width:1100px) {

#checker div.c-1 img, #checker div.c-3 img {margin-left: 10%;}
#checker div.c-1 div.text, #checker div.c-3 div.text { width: 40%; margin-right: 10%;}
#checker div.c-2 img, #checker div.c-4 img {margin-right: 10%;}
#checker div.c-2 div.text, #checker div.c-4 div.text { width: 40%; margin-left: 10%;}
#checker div.c-1, #checker div.c-3 { background-position: 48% 75px;}
#checker div.c-2, #checker div.c-4 { background-position: 52% 75px;}
}



@media screen and (max-width:1023px) {

body {background-color: #0074c9;}

body section {width:100% !important;max-width: 100%;padding:50px 0px;} 
h2 {font-size: 2.5em;margin-bottom: 30px;}
h3 {font-size: 2em;}
h5 {font-size: 1.33em; width: 90%;}
p {font-size: 1em;}


#pagehead {background: none; height: initial;}
#pagehead h1 {margin: auto; width: 90%;}

section div.intro {max-width: 90%;}
section div.intro p {width: initial; }
section div.pb0 {padding-bottom: 0;}

section #mtp-menu {display: none;}
section #mtp #panels h4 {text-align: center; margin-bottom: 10px; font-size: 1em;}
section #mtp div#panels div img {display: initial; visibility: initial; width: 33%; filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(2305%) hue-rotate(188deg) brightness(90%) contrast(101%);}

section div#panels {width: 100%; float: none;padding-bottom: 50px;}
section div#panels div { padding: 10px 40px; text-align: center;}
section div#panels div#p01 {border-top: none;}
section div#panels div h3 {text-align: center;font-size: 2em;}
section div#panels div ul {padding: 0 0px 40px 5%; margin: auto; width: 90%;}
section div#panels div ul li {font-size: 14pt; text-align: left;}
section div#panels div p {margin-bottom: 75px;}
section div#panels div p.center img {width: 80%; text-align: center;}

section #bio-menu {display: none;}
section #bios #panels h4 {text-align: center; margin-bottom: 0; font-size: 1em;}
section #bios #panels div img {width: 80%; float: none; margin: auto;}


#checker div.c-1, #checker div.c-2, #checker div.c-2.c-2me, #checker div.c-3, #checker div.c-4 {text-align: center; background-image: none; padding-bottom: 100px;}
#checker div.c-1 img, #checker div.c-3 img, #checker div.c-2 img, #checker div.c-4 img  {float: none; margin: auto; width: 60%; padding-bottom: 20px;}
#checker div.c-1 div.text, #checker div.c-3 div.text, #checker div.c-2 div.text, #checker div.c-4 div.text  {float: none; margin: auto; width: 80%;}
#checker div.c-2 div.text p, #checker div.c-2 div.text h3, #checker div.c-4 div.text p, #checker div.c-4 div.text h3 {text-align: center;}
#checker div div.text h3 { font-size: 30pt;}
#checker.checkalt {padding: 0px;}

#job-listings div.categories div.listing-group {float: none;}
section#job-listings #panels {width: 100%; margin-bottom: 0px;}

#legal div.col {width: 100%; float: none;}
#legal div.flrt {width: 100%; float: none;}
#legal div h4,#legal div h4.p0 {padding-top: 34px;}


#videos {padding: 75px 0px;}

#association {padding-bottom: 75px;}
#association ul li img {width: 100%;}

/*	
#foot {padding-bottom: 20px; overflow: auto;}
#foot div.col-1 { width: 40%;}
#foot div.col-2 { display: none;}
#foot div.col-3 { width: 30%; float: right;}
#foot div.col-3 p.phone {width: 300px; font-size: 200%;}
#foot div.col-3 ul { display: none;}
#foot div.col-4 {display: none;}
#foot div.col-4 ul {margin-bottom: 0px;}
*/