@charset "UTF-8";
body:not(#tinymce) {padding-top:6.8rem}
/* HEADER ------------------------------*/
body>header{position: fixed; -webkit-transition: ease all 200ms; transition: ease all 200ms; height:6.875rem; top:0; left:0; padding: 0 1em; width:100%; z-index:3; background-color:#fff;}
/* Management Bar */
.management>header{top: 34px}
/* Management Bar2 */
.management2>header {top: 80px;}
/* Management Bar+Alert */
.management #alertApp {top:34px}
.management #alertApp+header{top:calc(34px + 3.5rem)}
/* Management Bar2+Alert */
.management2 #alertApp {top:80px}
.management2 #alertApp+header{top:calc(80px + 3.5rem)}
     .skiptranslate+header{top: 39px}
body>header>.wrap {height:6.875rem; -webkit-transition: ease all 200ms; transition: ease all 200ms; overflow: visible;}
#brand {display: block;position: absolute;top:1.875rem;left: 0;padding: .9em 0;height: calc(100% - 1.875rem);z-index: 2;width: auto;}

#brand img {display: block;width: auto;height: 100%;float: left;}
body.interior > header.shrink, body > header.shrink {height:5.5em;border-bottom:solid 1px  rgba(240,237,237,.7);}
body.interior > header{border-bottom: 3px solid #262262}
body.interior > header.shrink {border-bottom: 3px solid #262262}
body > header.shrink #mainnav > ul > li > a {line-height: 3.6rem;}
body > header.shrink #brand {padding: .75em 0}
#alertApp + header {top: 3.5rem;}
#alertApp {z-index: 10;cursor: pointer;position: static;width: 100%;top: 0;float: none;}
#alertApp h1 {
    line-height: 3.5rem;
}
#alertApp #alertTitle {
    margin-bottom: 0;
    display: block;
    padding: 0 1em;
    color: #fff;
    text-align: center;
}
/* NAV ------------------------------ */
nav ul{margin: 0}
#mainnav{overflow:visible; position: absolute; top:1.875rem;}
#mainnav ul{text-align:right;overflow:visible;margin: 0 1em 0 0;padding: 0;}
#mainnav li{display:inline-block;position:static}
#mainnav a{line-height:5rem;padding:0 1rem;display:inline-block;text-decoration:none; color:#4A4A4A;font-weight: 500;font-size: 1.125em}
#mainnav>ul {float: right}
#mainnav>ul>li>a {}
#mainnav>ul>li:hover>a, #mainnav>ul>li:active>a{background-color:rgba(38,34,98,.8);color:#fff}
#mainnav>ul>li.on>a{background:#262262;color:#fff;}
#mainnav>ul>li{margin-left: 1px;}
/*dhtml*/
#mainnav li ul{z-index:1;width:18em;padding:1em 0;background-color:#F0EDED;position:absolute;overflow:auto;height:auto; top: -200vh;opacity: 0;z-index: -1; visibility: hidden; transition: ease 200ms opacity 0.35s;}
#mainnav li:hover ul {top:auto;opacity: 1;z-index: 1; visibility: visible}
#mainnav>ul>li:last-child ul, #mainnav>ul>li:nth-last-child(2) ul{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav ul li ul li a{background:none;color:#414042}
#mainnav li ul li a{font-size:.9em;line-height:1.1em;padding:.5em 1em; display:block;width:100%;text-align:left;float:left}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#fff;background:#8DC63F}

/*megamenu*/
#mainnav li ul.megamenu {width: 44em; padding: 2em 4em; overflow: auto; right:0}
#mainnav li ul.megamenu > li {position: relative;float: left}
#mainnav li ul.megamenu > li:first-child {width: 50%}
#mainnav li ul.megamenu > li:last-child {width: 50%}
#mainnav li ul.megamenu > li > ul {width: auto; background: none; position: relative; padding: 0; -webkit-columns: auto;-moz-columns: auto;columns: auto; -webkit-column-width: 12em;-moz-column-width: 12em;column-width: 12em;overflow: visible}
#mainnav li ul.megamenu > li > ul > li > a,
#mainnav li ul.megamenu > li > ul > li > a {padding-left: 1.5em}
#mainnav li ul.megamenu > li > ul > li > a:hover{border-radius: 3px}

/* ancillary */
#ancillary {position:absolute;right:0;top:0;width:100%;padding:0 1rem;height:1.875rem;font-size:.81rem;background-color: rgba(240,237,237,.7)}
#ancillary a{display: inline;float: right}
#ancillary a {display: inline-block; text-decoration:none;color:#414042;overflow: visible;}
#ancillary a:hover, #ancillary a:active,#ancillary li.on a{color:#262262;}
#ancillary li.on a {text-decoration:none;color:#666}
#ancillary .search{display: inline;float: right}
     #ancillary .search label {display: inline-block; cursor: pointer;padding: .45em 0 .45em 1.5em;margin: 0; text-decoration:none; background: url(/images/icons/misc/search.svg) no-repeat center left / .9rem .9rem}
     #ancillary .search label:hover {color: #666}
     #ancillary .search input{display: inline-block;height: 1.5em; width: 0; opacity: 0; padding: 0; border: 0; background: none}
     #ancillary .search input[type="text"]:focus,
     #ancillary .search:hover input[type="text"] {width: 12em; padding: 0 0.5em; opacity: 1; background:#fff; border: 1px solid rgba(0,0,0,.2)}
     #ancillary .search:hover input[type="submit"],
     #ancillary .search input:focus+input[type="submit"] {width: 2em; opacity: 1; background:#8DC63F}
     #ancillary .search input:focus+input[type="submit"]:hover {background: #8DC63F}

a.calendars, a.contact, a.employment{background-size: .9rem .9rem;background-repeat: no-repeat; background-position: center left;padding: .45em 1.6em;}
a.calendars:hover, a.contact:hover, a.employment:hover{opacity: .5}
a.calendars {background-image: url(/images/icons/misc/calendar.svg)}
a.contact {background-image: url(/images/icons/misc/envelope.svg)}
a.employment {background-image: url(/images/icons/misc/pencil.svg)}
#ancillary div ul {display: none}
/* mobile */
#mobilenav,.menu, #ancillary .search-button{display: none}

/*grid */
.grid {width:100%; float: left; clear: both; display: block}
.grid .col{float:left;}
     .gridInline .col{display: inline-block; float: none}
.grid .col10{width:10%}
.grid .col20{width:20%}
.grid .col25{width:25%}
.grid .col30{width:30%}
.grid .col33{width:33.333%}
.grid .col40{width:40%}
.grid .col50{width:50%}
.grid .col60{width:60%}
.grid .col60{width:60%}
.grid .col66{width:66.666%}
.grid .col70{width:70%}
.grid .col75{width:75%}
.grid .col80{width:80%}
.grid .col90{width:90%}

/* breadcrumb */
.breadcrumb{margin-bottom: 2em;margin-top: -.5em;}

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

.home main h1 {font-size: 1.75em;;letter-spacing: .1em;margin-top: -2.3em}
.welcome .button {margin-top: 2em}
.polaroid {position: absolute}

.polaroid img{border:solid 10px #fff;-webkit-box-shadow: 0 2px 4px 1px rgba(0,0,0,.1);
box-shadow: 0 2px 4px 1px rgba(0,0,0,.1);width: 100%;height: auto;background-color: #fff}

.polaroid.right {width: calc(50% - 15em);right: 0;top: -3em;overflow: hidden;height: 100%;z-index: 1}
.polaroid.left {width: calc(50% - 15em);left: 0;top:0;overflow: hidden;height: 50%;z-index: 1}

.polaroid.left .lg {top: 3.7em;left: -1.1em;position: absolute;max-width:28em; height: auto; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg);}

.polaroid.left .med {top: 22em;left: -1.4em;position: absolute;max-width:22em; height: auto;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
	 transform: rotate(5deg);}

.polaroid.left .sm {top: 37.5em;left: -1.5em;position: absolute;max-width:18em; height: auto;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
	 transform: rotate(-4deg);}

.polaroid.right .med {top:15px;right: -1em;margin: 0;position: absolute;;max-width:22em; height: auto;}

.polaroid.right .med.play {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
	 transform: rotate(-5deg);}

.polaroid.right .sm {top: 16em;right:-1.2em;z-index: 1;margin: 0; position: absolute;;max-width:18em; height: auto;opacity: 0}

.polaroid.right .sm.play {opacity: 1;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
	 transform: rotate(4deg);}

.m {background-size: 77px 88px;width: 77px;height:88px;top: -4.2em;}
.ribbon .wrap{padding:5em 2em;overflow: hidden}
.purpleBkg.ribbon .wrap { padding: 3em 2em; }
.welcome .wrap{max-width: 35em;margin: 0 auto}
.home .welcome p {font-size: 1.5em}
.welcome p {font-size: 1.25em}
.resourcesNews .wrap {display: -ms-flexbox;overflow: visible;padding: 3em 2em;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;}
.resourcesNews section {float: left; max-width: 23em; margin: 2.5% 1.5%;padding:3em 1em 1em 1em;}
.superintendent .wrap{padding: 10em 0 12em 0}
.benigni {width: 50%;height: 25em;left: 1em; top: 0;}
.benigniMessage {position: absolute;bottom:0;right: 1.5rem;
width: 50%;padding-bottom: 50%;}

.benigniMessage h2 {background-color: #262262;color: #fff;font-size: 1em; position: absolute;top:1.2em;right: 0;line-height: 3em;text-transform: uppercase;display: inline-block;padding: 0 1em}
.benigniMessage div { position: absolute; padding:0 5em; top:50%; left: 0; width: 100%; z-index: 3; transform: translateY(-45%); font-size: 1.15em; -webkit-transform: translateY(-45%); -moz-transform: translateY(-45%); -ms-transform: translateY(-45%); -o-transform: translateY(-45%); }
.homeVideo p{font-size: 1.15em}
.homeVideo .grid {display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;}
.homeVideo .grid .col50 {padding: 0 2em}
.schoolLogos h2 {position: absolute;left: 50%; top: -1.35em;transform: translateX(-50%);border-radius: 2px}
.schoolLogos .wrap{overflow: hidden}
/* page header */
.interior .border{width: 100%;position: relative;float: left;clear: both; background-color:#262262;height: calc(1.4375em - 5px);border-bottom: solid 3px #8DC63F;}

/* MAIN ------------------------------ */
main>.wrap{padding-top:2em}
.interior main,body>footer{padding-left: 3%;padding-right: 3%}
.interior main {background:#fff url(/images/watermark.svg) no-repeat right -3em bottom -10em;background-size: 35em auto;overflow: hidden}
main>div>aside{width:16.5rem;padding-right:3em; overflow:hidden;float: left;margin-top:5.5em}
body.fullWidth  #content {width: 100%;margin: 0 auto;float: none}

#content{float:right;width:calc(100% - 17.5rem);padding:0 0 4em;overflow:hidden;min-height:600px;position:relative}
body.fullWidth #content{width: 100%; margin: 0 auto;float: none; padding: 0 12% 8em 12%;}
.wsManagementLogin td:first-child {width:40%; text-align: right}

.twoCol, .threeCol, .resCol{
-webkit-column-rule:0;
   -moz-column-rule:0;
        column-rule:0;
}

.twoCol {-webkit-columns:2;-moz-columns:2;columns:2;}
.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol {
	-webkit-columns: auto;-moz-columns: auto;columns: auto;
	-webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;
}
.content ul li{padding-left: 3em;margin-bottom: .5em;padding-right: 2em;}
.content ul li:before {left: 2em;}

.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}

.photoright{margin:0 0 3em 4em;}
.photoleft{margin:0 4em 3em 0;}
.footerImages img{border:solid 10px #fff;}
.footerImagesContainer{width: 100%;overflow: visible}
.footerImages{position:relative;width: 123%;max-width: 1600px; overflow:visible;left: 53%;transform: translateX(-50%);display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;}
.footerImages img{width: 20%;height: auto}

.footerImages .one{-moz-transform: rotate(-7deg) translateX(0);position: relative;bottom: -2em;left: 1em;
-webkit-transform: rotate(-7deg) translateX(0);
-o-transform: rotate(-7deg) translateX(0);
-ms-transform: rotate(-7deg) translateX(0);
transform: rotate(-7deg) translateX(0);}

.footerImages .two{-moz-transform: rotate(2deg) translateX(-2em);position: relative;bottom: -2em;left: 0;z-index: 2;
-webkit-transform: rotate(2deg) translateX(-2em);
-o-transform: rotate(2deg) translateX(-2em);
-ms-transform: rotate(2deg) translateX(-2em);
transform: rotate(2deg) translateX(-2em);}

.footerImages .three{-moz-transform: rotate(-2deg) translateX(-3em);position: relative;bottom: -2em;left: 0;
-webkit-transform: rotate(-2deg) translateX(-3em);
-o-transform: rotate(-2deg) translateX(-3em);
-ms-transform: rotate(-2deg) translateX(-3em);
transform: rotate(-2deg) translateX(-3em);}

.footerImages .four{-moz-transform: rotate(2deg) translateX(-4em);position: relative;bottom: -2em;left: 0;z-index: 3;
-webkit-transform: rotate(2deg) translateX(-4em);
-o-transform: rotate(2deg) translateX(-4em);
-ms-transform: rotate(2deg) translateX(4em);
transform: rotate(2deg) translateX(-4em);}

.footerImages .five{-moz-transform: rotate(-2deg) translateX(-4.5em);position: relative;bottom: -2em;left: 0;
-webkit-transform: rotate(-2deg) translateX(-4.5em);
-o-transform: rotate(-2deg) translateX(-4.5em);
-ms-transform: rotate(-2deg) translateX(-4.5em);
transform: rotate(-2deg) translateX(-4.5em);}

/* Schools Landing Page ------------------------------ */
.schoolCallouts section{float: left}
.pageHeader {height: 48vmin;}
.schoolCallouts {top: -5em;}
#schools main {padding-left: 0;padding-right: 0}
.fourCallouts div + div {border-left: 3px solid #fff;}
.schoolCallouts .wrap{overflow: visible;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-align: stretch;
-webkit-box-align: stretch;
align-items: stretch;}
.schoolCallouts section{width: 30%;margin: 0 1.5% 1.5% 1.5%;}
.stats .stat {width: 30%;margin: 0 1.5% 1.5% 1.5%;}
.fourCallouts div {width: 25%; height: 25vw;}
.fourCallouts div {display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;}
.fourCallouts div + div {border-left: 3px solid #fff;}
/* FOOTER ------------------------------ */
.fatFooter>*>*:last-child{width:1%;padding-right:0;white-space:nowrap}
.fatFooter address, .fatFooter .google {float: left;width: 25%}
.fatFooter>nav{float: left;width: 50%}
.fatFooter>nav>ul{float: left;width:50%}
#web-solutions-exposure {float:right;margin-left:11px}

#google_translate_element {
    font-size: .875em;
    -webkit-transition: all ease-out 200ms;
    transition: all ease-out 200ms;
    background: #fff;
    display: inline-block;
    margin-right: 1em;
}
.fatFooter .google {margin-top:3em;text-align: right}
#google_translate_element {font-size:.875em;-webkit-transition:all ease-out 200ms;transition:all ease-out 200ms; background: #fff ;display: inline-block;border-radius: 3px;padding: 0 .25em}
#google_translate_element:hover {background: #ccc}
#google_translate_element img {display: none}
#google_translate_element .goog-te-gadget-simple > span {display: inline-block; line-height:2.4em; color:#ccc; vertical-align: middle}
#google_translate_element .goog-te-gadget-simple > span:before {content: ""; display: inline-block; vertical-align: middle; width: 1.6rem; height: 1.6rem; background:url(/images/icons/misc/google-translate@2x.png) no-repeat center top 0/ 1.5rem 1.5rem}
#google_translate_element .goog-te-gadget-simple a span {color:#4A4A4A; font-size: 0.875rem; margin-left:0.5em}
#google_translate_element .goog-te-gadget-simple a:after {content:""; display: inline-block;margin-left:0.75em;background:url(/images/icons/misc/down-arrow.svg) no-repeat center center; width: 8px; height: 6px}
#google_translate_element .goog-te-gadget-simple a span {display: none}
#google_translate_element .goog-te-gadget-simple a span:first-child {display: inline-block;font-weight: 400;font-family: 'Lato', sans-serif;}
#google_translate_element .goog-te-gadget-simple {border:0; background:none;padding: 0.15em .75em .15em .25em}
#google_translate_element .goog-te-gadget-simple spam[style="border-left-width: 1px"] {display: none}

/* Transition ------------------------------ */
.fadeInUp {transition: ease all 1s; opacity: 0; transform: translateY(100px);}
.fadeInUpSlow {transition: ease all 2s; opacity: 0; transform: translateY(100px);}
.fadeInDown {transition: ease all 1s; opacity: 0; transform: translateY(-100px);}
.fadeInUp.play,
.fadeInDown.play {opacity: 1; transform: translateY(0);}
.transition-delay-1 {transition-delay: 0.15s}
.transition-delay-2 {transition-delay: 0.30s}
.transition-delay-3 {transition-delay: 0.45s}
.transition-delay-4 {transition-delay: 0.6s}
.transition-delay-5 {transition-delay: 0.75s}
.transition-delay-6 {transition-delay: 0.9s}
.transition-delay-7 {transition-delay: 1.05s}
.transition-delay-8 {transition-delay: 1.2s}
.transition-delay-9 {transition-delay: 1.35s}
.transition-delay-10 {transition-delay: 1.5s}
.transition-delay-11 {transition-delay: 1.65s}
.transition-delay-12 {transition-delay: 1.80s}
.transition-delay-13 {transition-delay: 1.95s}
.transition-delay-14 {transition-delay: 2.10s}
.transition-delay-15 {transition-delay: 2.25s}
.transition-delay-16 {transition-delay: 2.4s}
.transition-delay-17 {transition-delay: 2.55s}
.transition-delay-18 {transition-delay: 2.7s}
.transition-delay-19 {transition-delay: 2.85s}
.transition-delay-20 {transition-delay: 3s}
.fadeInLeft.play, .fadeInRight.play {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}
.fadeInLeft {
    transform-origin: center center;
    transition: ease all 1s;
    transition-duration: 1s;
    opacity: 1;
    transform: translateX(-4rem) rotate(5deg);
}

.fadeInRight {
    transition: ease all 1s;
    transition-duration: 1s;
    opacity: 1;
    transform: translateX(4rem) rotate(-5deg);
    transform-origin: center center;
}

.home .left.fadeInLeft>div:nth-child(1) {transition-delay: 0.15s}
.home .left.fadeInLeft>div:nth-child(2){transition-delay: 0.30s}
.home .left.fadeInLeft>div:nth-child(3){transition-delay: 0.45s}

@media (max-width: 1400px) {
    .polaroid.left .lg {top: 3.7em;left: -1.1em;position: absolute;max-width:20em;}
    .polaroid.left .med {top: 18em;left: -1.4em;position: absolute;max-width:18em;}
    .polaroid.left .sm {top: 30em;left: -1.5em;position: absolute;max-width:14em;}
    .polaroid.right .med {top:15px;right: -1em;margin: 0;position: absolute;;max-width:18em; }
    .polaroid.right .sm {top: 12em;right:-1em;z-index: 1;margin: 0; position: absolute;;max-width:14em;}
}

@media (max-width: 1220px) {
    .polaroid.right{top: -11em}
}
@media (max-width: 1150px) {
    .polaroid.left .lg {display: none}

    .polaroid.left .med {top:3em;left: -1.4em;position: absolute;max-width:15em;}
    .polaroid.left .sm {top: 14em;left: -1.5em;position: absolute;max-width:13em;}
    .polaroid.right .med {top:15px;right: -1em;margin: 0;position: absolute;;max-width:15em; }
    .polaroid.right .sm {top: 10em;right:-1em;z-index: 1;margin: 0; position: absolute;;max-width:13em;}
    #mainnav a{font-size: 1em;padding: 0 .75em}
    #brand{margin-left: .5em}
    .benigniMessage h2{top: 0}
    .benigniMessage div{font-size: 1em;padding:0 2em 0 5em}
    .benigni{height: 20em}
}
@media (max-width: 1050px) {
    #brand{padding: 1.1em 0}
}
@media (max-width: 980px) {
    .polaroid.right, .polaroid.left{display: none}
    .welcome .wrap{max-width: 40em}
    .benigniMessage h2{line-height: 2em}
    .benigniMessage div{padding:0 4em}
    .benigni{max-width: calc(100% - 10em);left: 0;width:100%;height: 30em;margin: 0 auto}
    .benigniMessage{bottom: -100%;padding-bottom: 50%; position: relative;top: 4em;transform: none;width: 100%;right: 0;margin: 0 auto;margin-bottom: 4em}
    .superintendent .wrap{padding: 5em 0}
    #mainnav a{font-size: .9em;padding: 0 .65em}
}

@media (max-width: 900px) {
    #brand{padding: 1em 0}
    #brand img {max-width: 17em}
    #mainnav a{font-size: .84em;padding: 0 .5em}
}

@media (max-width: 870px) {
    .fatFooter address, .fatFooter .google{width: 35%}
    .fatFooter > nav{width: 30%}
    .fatFooter > nav > ul{width: 100%}
    .fourCallouts img {height:3em}
    .fourCallouts div{padding: 1em 1em}
    .fourCallouts div p{font-size: .9em}
    .footerImages img {border: solid 8px #fff;}
}