/****************************************
*  Site specific css definitions
****************************************/

html,
body {
  background:#FFFFFF;
  text-align:center;
}

div.void {
  border: 0px;
  margin: 0px;
  padding: 0px;
  height: 1px;
  width: 1px;
  max-height: 1px;
  max-width: 1px;
  font-size: 1px;
  line-height: 1px;
  visibility: hidden;
}

table.page {
  width:998px;
}

.honey {
  display: none !important;
}

.error-message {
  color: #FF0000;
}

.annoucement {
  background: #777777 url('/images/layout/bg_squares.png');
}

.annoucement h2,
.annoucement p {
  color: #FFFFFF;
}

.button,
td.navigation a.button {
  background-color: #00AEEF;
  color: #FFFFFF;
  border-radius: 4px;
  padding: .25rem 1rem .15rem 1rem;
  display: inline-block;
  width: auto;
  margin-bottom: .25rem;
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 600;
}

.button:hover,
td.navigation a.button:hover {
  background-color: #1370B6;
  color: #ffffff;
}

/******************************
  Header Styles
*******************************/

td.header {
  height:208px;
}

td.header td.logo img {
  margin:44px 96px 0px 75px;
}

td.navigation {
  width:205px;
  padding-top:36px;
}

td.squares,
div.squares {
  background:top repeat url(/images/layout/bg_squares.png);
}

td.page-intro {
  padding:60px 0px 45px 0px;
}

td.page-intro div.body {
  width:840px;
}

/******************************
  Home Page Fader
*******************************/

div.home-fader-wrapper {
  position:relative;
  height:500px;
  width:100%;
  z-index:100;
}

div.home-fader-wrapper div.circles {
  position:absolute;
  width:100%;
  bottom:20px;
  z-index:102;
}

div.home-fader-wrapper div.circles div.circle a {
  display:block;
  height:20px;
  width:20px;
}

div.home-fader-wrapper div.circles div.circle {
  display:inline-block;
  height:20px;
  width:20px;
  border-radius:10px;
  background:rgba(255, 255, 255, 0.5);
}

div.home-fader-wrapper div.circles div.circle-on {
  background:rgba(255, 255, 255, 1);
}

div.home-fader-wrapper div.circles div.circle + div.circle {
  margin-left:4px;
}

div.home-fader {
  height:500px;
  width:100%;
  position:absolute;
  z-index:101;
}

div.home-fader div div {
  height:500px;
  background-position:top;
  background-repeat:no-repeat;
  background-size:auto 100%;
}

div.home-fader td.body {
  padding:100px 450px 0px 75px;
}

div.home-fader div.bg-color-5 td.body {
  padding:100px 75px 0px 450px;
}

div.home-fader div.bg-color-8 td.body {
  padding:180px 0px 0px 100px;
}

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

td.main {
  padding:60px 0px 60px 0px;
}

td.main div.body {
  width:870px;
}

td.main td.one-third {
  width:320px;
}

td.main td.one-third + td.one-third ,
td.main td.half + td.half {
  border-left:1px solid #d5d5d5;
}

td.main table.circle-icon td.half {
	background-color: #FFFFFF;
	padding-bottom: 20px;
}

td.main td.one-third td.body {
  padding:45px 45px 0px 45px;
}

td.main table.circle-icon td {
  background-position:top;
  background-repeat:no-repeat;
}

td.main table.circle-icon td.body {
  padding-top:155px;
}

/******************************
  Split Column Styles
*******************************/

td.split {
  background-color:#f4f3f3;
  background:linear-gradient(to right, #f4f3f3 50%, #e9e7e7 50%);
  padding:0;
}

td.split td {
  background-position:top;
  background-repeat:no-repeat;
}

td.split td.body {
  padding:68px 60px 40px 68px;
}

td.half {
  width:499px;
  background:#e9e7e7;
}

td.split td.half {
  background-color: transparent;
}

td.split td.half td.body {
  padding:68px 68px 40px 60px;
}

td.two-thirds {
  width:660px;
  background:#e9e7e7;
}

td.split td.two-thirds td.body {
  padding:68px 68px 40px 45px;
}

table.home td.split td.body {
  padding-top:250px;
}

td.highlight {	  background-color:#f4f3f3;
}
/******************************
  Text Styles
*******************************/

@font-face {
  font-family: 'CooperHewitt';
  src: url('/library/fonts/CooperHewitt-Book-webfont.eot');
  src: url('/library/fonts/CooperHewitt-Book-webfont.eot?#iefix') format('embedded-opentype'),
       url('/library/fonts/CooperHewitt-Book-webfont.woff2') format('woff2'),
       url('/library/fonts/CooperHewitt-Book-webfont.woff') format('woff'),
       url('/library/fonts/CooperHewitt-Book-webfont.ttf') format('truetype'),
       url('/library/fonts/CooperHewitt-Book-webfont.svg#cooper_hewittbook') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CooperHewitt';
  src: url('/library/fonts/CooperHewitt-Bold-webfont.eot');
  src: url('/library/fonts/CooperHewitt-Bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('/library/fonts/CooperHewitt-Bold-webfont.woff2') format('woff2'),
       url('/library/fonts/CooperHewitt-Bold-webfont.woff') format('woff'),
       url('/library/fonts/CooperHewitt-Bold-webfont.ttf') format('truetype'),
       url('/library/fonts/CooperHewitt-Bold-webfont.svg#cooper_hewittbold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'CooperHewittLight';
  src: url('/library/fonts/CooperHewitt-Light-webfont.eot');
  src: url('/library/fonts/CooperHewitt-Light-webfont.eot?#iefix') format('embedded-opentype'),
       url('/library/fonts/CooperHewitt-Light-webfont.woff2') format('woff2'),
       url('/library/fonts/CooperHewitt-Light-webfont.woff') format('woff'),
       url('/library/fonts/CooperHewitt-Light-webfont.ttf') format('truetype'),
       url('/library/fonts/CooperHewitt-Light-webfont.svg#cooper_hewittlight') format('svg');
  font-weight: normal;
  font-style: normal;
}

p,
li {
  font:normal 16px/24px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#626262;
  margin:0px 0px 13px 0px;
}

li {
  text-align:left;
  margin:0px 0px 0px 0px;
}

ul {
  display:inline-block;
  margin:0px 0px 10px 40px;
  padding:0px;
}

ul.large li {
  list-style:none;
  font:26px/34px 'CooperHewitt', Arial, Helvetica, sans-serif;
  padding-left:40px;
  margin:0px 0px 14px 0px;
  background:top 4px left 0px no-repeat url(/images/layout/bullet_large.png);
}

td.attribution p {
  font:normal 14px/14px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#E9E7E7;
  margin:0px 0px 0px 0px;
}

td.footer p {
  font:normal 22px/22px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  text-transform:uppercase;
  margin:0px 0px 0px 0px;
}

td.footer p span {
  display:inline-block;
  color:#cdcbcb;
  padding:0px 10px 0px 10px;
}

div.home-fader p {
  font:normal 20px/28px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  margin:0px 0px 16px 0px;
}

div.home-fader div.bg-color-7 td.body p {
  padding-right:100px;
}

table.home td.main div.body p,
td.main div.body h2:first-child + p,
td.page-intro p {
  font:normal 26px/34px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  margin:0px 0px 16px 0px;
}

table.home td.main div.body p,
td.main div.body h2:first-child + p,
table.home td.main div.body h2:first-child + p {
  color:#626262;
  margin:0px 0px 24px 0px;
}

td.main div.body h2:first-child + p {
  margin:0px 0px 46px 0px;
}

h1 {
  font:bold 32px/40px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  margin:0px 0px 16px 0px;
}

div.home-fader h1 {
  font:normal 64px/64px 'CooperHewittLight', Arial, Helvetica, sans-serif;
  text-transform:uppercase;
}

div.home-fader h1 strong {
  font-family:'CooperHewitt', Arial, Helvetica, sans-serif;
}

h2 {
  font:bold 32px/32px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#231f20;
  text-transform:uppercase;
  margin:32px 0px 24px 0px;
}

h3 {
  font:normal 30px/34px 'CooperHewittLight', Arial, Helvetica, sans-serif;
  color:#231f20;
  text-transform:uppercase;
  margin:34px 0px 12px 0px;
}

h3 span {
  font-family:'CooperHewitt', Arial, Helvetica, sans-serif;
}

td.main div:first-child h2:first-child,
td.body > h3:first-of-type {
  margin-top:0px;
}

h4 {
  font:normal 20px/25px 'CooperHewit', Arial, Helvetica, sans-serif;
  color:#231f20;
  text-transform:uppercase;
  margin:34px 0px 12px 0px;
}

.padding {
  padding: 1rem 2rem 2rem 2rem;
  margin: auto;
}

/******************************
  Standard Color Styles
*******************************/

.color-1,
td.navigation a.color-1:hover,
td.navigation a.color-1-on {
  color:#fecd65;
}

td.bg-color-1,
div.bg-color-1 {
  background-color:#fecd65;
}

.color-2,
td.navigation a.color-2:hover,
td.navigation a.color-2-on,
table.home td.main div.body p strong {
  color:#f7941e;
}

td.bg-color-2,
div.bg-color-2{
  background-color:#f7941e;
}

.color-3,
td.navigation a.color-3:hover,
td.navigation a.color-3-on {
  color:#E54856;
}

td.bg-color-3,
div.bg-color-3 {
  background-color:#E54856;
}

.color-4,
td.navigation a.color-4:hover,
td.navigation a.color-4-on {
  color:#9f1f63;
}

td.bg-color-4,
div.bg-color-4 {
  background-color:#9f1f63;
}

.color-5,
td.navigation a.color-5:hover,
td.navigation a.color-5-on {
  color:#0e76bc;
}

td.bg-color-5,
div.bg-color-5 {
  background-color:#0e76bc;
}

.color-6,
td.navigation a.color-6:hover,
td.navigation a.color-6-on {
  color:#23aae1;
}

td.bg-color-6,
div.bg-color-6 {
  background-color:#23aae1;
}

.color-7,
td.navigation a.color-7:hover,
td.navigation a.color-7-on {
  color:#13a89e;
}

td.bg-color-7,
div.bg-color-7 {
  background-color:#13a89e;
}

.color-8,
td.navigation a.color-8:hover,
td.navigation a.color-8-on {
  color:#8dc63f;
}

td.bg-color-8,
div.bg-color-8 {
  background-color:#8dc63f;
}

td.bg-color-9,
div.bg-color-9 {
  background-color:#2c2a2c;
}

/*******************************
  Footer Styles
*******************************/

td.footer {
  background:#939393 top repeat url(/images/layout/bg_squares.png);
  padding:35px 0px 30px 0px;
}

td.attribution {
  background:#626262 top repeat url(/images/layout/bg_squares.png);
  padding:15px 0px 12px 0px;
}

/******************************
  Form Styles
*******************************/

input.text,
select.text,
textarea.text {
  width:100%;
  background:#f2f8f9;
  border:1px solid #bcbbbb;
  font:20px/20px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#000000;
  padding:15px 20px 15px 20px;
  margin:0px 0px 10px 0px;
}

table.home td.split td.body select.text {
  margin-bottom:25px;
}

/******************************
  Link Styles
*******************************/

a {
  color:#0e76bc;
  text-decoration:none;
  outline:none;
  transition:all 0.25s;
}

a:hover {
  color:#e54856;
  transition:all 0.15s;
}

td.main table.circle-icon td.body-email a {
  font:normal 13px/18px 'CooperHewitt', Arial, Helvetica, sans-serif;
}

td.attribution a {
  color:#E9E7E7;
}

td.footer a {
  color:#fecd65;
  font-style:normal;
  text-decoration:underline;
}

.annoucement a:hover,
td.footer a:hover,
div.home-fader p a:hover {
  color:#FFFFFF;
  text-decoration:none;
}

.annoucement a,
div.home-fader p a {
  color:#fecd65;
  text-decoration:underline;
}

td.navigation a {
  display:block;
  font:24px/24px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color:#818285;
  text-transform:uppercase;
  padding:5px 0px 6px 0px;
}

td.navigation a.on {
  font-weight:bold;
}

/******************************
  Facebook
*******************************/

table.post {
  width: 100%;
}

table.post td img {
  width:100%;
  margin:21px 0px 21px 0px;
}

table.post td p span {
  color:#f7941e;
  font-size:14px;
  text-transform:uppercase;
}

table.post td a  {
  word-break: break-word;
}

/****************************************
* Video Overlay
****************************************/

button[data-video-overlay] {
  display: block;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}

button[data-video-overlay] p {
  color: #0e76bc;
  text-decoration: none;
  outline: none;
  transition: all 0.25s;
}

button[data-video-overlay]:last-of-type p {
  margin: 0;
}

button[data-video-overlay]:hover p {
  color: #e54856;
}

.overlay {
  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 400;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100%;
  overflow: auto;
}

.overlay .wrapper {
  position: relative;
  margin: auto;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, .9);
  width: calc(100% - 1rem);
  max-width: 600px;
  padding: 2rem;
}

.overlay .close-overlay {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 1;
  margin: 0;
  background: transparent;
  height: 23px;
  padding: 0;
  font-size: 30px;
  line-height: 20px;
  cursor: pointer;
  border: 0;
}

.overlay .close-overlay,
.overlay .close-overlay svg {
  width: 25px;
  height: 25px;
  fill: #000000;
}

.overlay .close-overlay:hover svg {
  fill: red;
}

.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/****************************************
* Latest event (on home page)
****************************************/

.latest-event {
  margin-top: 4rem;
  padding-top: 185px;
  background-position: top;
  background-repeat: no-repeat;
  text-align: center;
}

.latest-event h3 {
  margin-top: 0;
}

.latest-event h4 {
  margin-top: 1rem;
}

.latest-event p + div {
  margin-top: 2rem;
}

/****************************************
* Styled select
****************************************/

.styled-select {
  position: relative;
  border-radius: 3px;
  background-color: transparent;
  overflow: hidden;
  padding: 1px;
}

.arrow-down {
  display: inline-block;
  position: absolute;
  top: 22px;
  right: 22px;
  transform: rotate(45deg);
  border: solid #000000;
  border-width: 0 3px 3px 0;
  padding: 3px;
  pointer-events: none;
  transition: all .4s ease;
}

.styled-select select {
  margin: 0;
  padding-right: 24px;
  text-overflow: ellipsis;
  appearance: none;
  -moz-appearance: none;
  line-height: 1.2em;
}

/****************************************
* Private Page
****************************************/

.login-section {
  margin: 0 auto;
  max-width: 400px;
}

.login-section input:not([type="submit"]) {
  display: block;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  padding: .5rem;
  font: normal 16px/16px 'CooperHewitt', Arial, Helvetica, sans-serif;
  color: #000000;
}

.login-section input + input {
  margin-top: 1rem;
}

.login-section a,
.login-section [type="submit"] {
  border: none;
  text-transform: uppercase;
  font: normal 600 16px/24px 'CooperHewitt', Arial, Helvetica, sans-serif;
  padding: 8px 20px 6px
}

.x-left {
  text-align: left;
}