/*
SMALL: up to 669px
MEDIUM: 670px to 979px
LARGE: 980px and above
*/


/* ############# */
/* ## DISPLAY ## */
/* ############# */



/* ## HIDE IF SMALL ## */
@media all and (max-width: 669px) {
  .not-small {
    display: none!important;
  }
}

/* ## HIDE IF MEDIUM ## */
@media all and (min-width: 670px), all and (max-width: 979px) {
  .not-medium {
    display: none!important;
  }
}

/* ## HIDE IF LARGE ## */
@media all and (min-width: 980px) {
  .mobile-only {
    display: none!important;
  }
}


/* ## HIDE IF MEDIUM OR LARGE (displays small) ## */
@media all and (min-width: 670px) {
  .small-only {
    display: none!important;
  }
}

/* ## HIDE IF SMALL OR LARGE (displays medium) ## */
@media all and (max-width: 669px), all and (min-width: 980px) {
  .medium-only {
    display: none!important;
  }
}

/* ## HIDE IF SMALL OR MEDIUM (displays large) ## */
@media all and (max-width: 979px) {
  .wide-only {
    display: none!important;
  }
}


/* ############ */
/* ## BODY ## */
/* ############ */

body {
  margin: 0px;
}

#body-container, #splash-body-container {
  margin: auto;
}

/* ## SMALL ## */
@media all and (max-width: 669px) {
  #body-container, #splash-body-container {
    max-width: 450px;
  }
}


/* ## MEDIUM ## */
@media all and (min-width: 670px) and (max-width: 979px) {
  #body-container {
  	width: 96%;
  }
  #splash-body-container {
    max-width: 650px;
  }
}

/* ## LARGE ## */
@media all and (min-width: 980px) {
    #body-container, #splash-body-container {
        width: 960px;
    }
}


/* ############ */
/* ## HEADER ## */
/* ############ */

#global-announcement {
  height: 60px;
  background-color: #C3CAF5;
  position: relative;
}
#global-announcement p {
    width:100%;
    text-align: center;
    margin: 0px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.banner-photo {
  display: block;
  width: 100%;
}

/* ## SMALL ## */
@media all and (max-width: 669px) {
  
  #banner-container {
    width: 300px;
  }
  
  #banner-image {
    display: block;
    width: 100%;
  }
  
  #header {	  
    padding: 0px 16px;
  }
}

/* ## SMALL AND MEDIUM ## */
@media all and (max-width: 979px) {
  #header {
    display: flex;
    position: relative;
    align-items: center;
  }
  
  #navbar-container {
    overflow-x: hidden;
  }

  #navbar, #gateways {
    width: 101%;
/*    max-width: 651px; */
  }

  .navbar, .gateway {
    width: 33.33%;
    width: calc(100% / 3);
    float: left;
    padding: 5px 0px;
    line-height: 20px;
  }
  #expand-top-navbar {
    cursor: pointer;
    position: absolute;
	right: 10px;
	width: 40px;
	top: 30px;
  }
  
  #navbar-container {
    display: none;
  }
}

/* ## MEDIUM ## */
@media all and (min-width: 670px) and (max-width: 979px) {
  #banner-image {
    display: block;
    max-width: 650px;
  }
}



/* ## LARGE ## */
@media all and (min-width: 980px) {
  #banner-image {
    display: block;
    float: left;
    width: 710px;
  }
  
  #banner-links {
    display: block;
    float: left;
    width: 250px;
    height: 93px;
    padding-top: 9px;
  }

  .banner-links-row a:hover {
    color: #FFFFFF;
  }
    
  .banner-links-row {
	font-size: 15px;
}
  
  /* jquery might hide or reveal on mobile,
       but as soon as we get bigger,
       this should override that state of visibility */
  #navbar-container {
    display: block!important;
    clear: both;
  }
  

  #top-navbar {
    width: 100%;
    margin-top: 5px;
    text-align: center;
}

  .top-navbar-item {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: auto 5px;
  }
}


/* ############ */
/* ## FOOTER ## */
/* ############ */

#footer-container {
  clear: both;
}

.footer-item {
  display: inline-block;
  line-height: 30px;
}

.footer-text {
  vertical-align: middle;
}

#footer-social-media-container {
  display: inline-block;
  line-height: 30px;
  position: relative;
}

#footer-social-media-image {
  height: 20px;
  vertical-align: middle;
}

/* ## MEDIUM ## */
/*
@media all and (min-width: 670px) and (max-width: 979px) {
  .footer-item {
      width: 48%;
      width: calc(50% - 2px);
  }
}*/

/* ## LARGE ## */
@media all and (min-width: 980px) {
  #footer-image {
    height: 31px;
    background: url(images/bottombar_retina.png) 0 0;
    background-size: 960px 31px;
  }
}


/* ############# */
/* ## SUBPAGE ## */
/* ############# */

#subpage-container {
  text-align: initial;
  margin-bottom: 10px;
}

#subpage-content {
  margin: 0px 20px;
}

/* ## SMALL ## */
@media all and (max-width: 669px){
  #subpage-container {
	margin-top: 20px;
  }
}

/* ## MEDIUM AND LARGE ## */
@media all and (min-width: 670px){
  #subpage-container {
    display: flex;
    margin-top: 20px;
  }
  
  #subpage-content {
  	overflow: hidden;
  }
}


/* ################# */
/* ## LEFT NAVBAR ## */
/* ################# */


#left-navbar {
  display: inline-block;
  height: 100%;
  width: 215px;
  margin-top: -10px;
  padding-top: 10px;
}

.left-navbar-entry, .left-navbar-header {
  display: block;
  margin: 5px 10px 0px 10px;
}  

/* ## SMALL ## */
@media all and (max-width: 669px) {
  #left-navbar-container {
	margin-top: -10px;
  }
  
  #left-navbar {
	width: 100%;
	box-sizing : border-box;
	margin-bottom: 10px;
    padding: 10px;
  }
  
  .left-navbar-top-header {
	position: relative;
  }
  
  #expand-left-navbar {
    cursor: pointer;
	position: absolute;
	top: -4px;
	right: 0px;
	width: 40px;
	height: 25px;
	text-align: center;
  }
  
  .left-navbar-contents {
	  display: none;
  }
}

/* ## MEDIUM AND LARGE ## */
@media all and (min-width: 670px) {
  #expand-left-navbar {
    display: none;
  }
  
  #left-navbar {
    /* jquery might hide or reveal on small,
       but as soon as we get bigger,
       this should override that state of visibility */
    display: block!important;
  }
  
  .left-navbar-contents {
	  display: block!important;
  }
  
  .left-navbar-spacer {
	  height: 10px;
  }
}

/* ############ */
/* ## SPLASH ## */
/* ############ */

/* ## SMALL ## */
@media all and (max-width: 669px) {

  .splash-top-text {
    padding: 8px;
  }
  
  .splash-middle-text {
    padding: 8px 0px;
  }
  
  .splash-photo {
    display: block;
    width: 100%;
	  margin-bottom: 8px;
  }
  
  .splash-quote-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
  
  .splash-quote-container {
    padding: 10px;
    -ms-transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    text-align: left;
  }

  .splash-attribution {
    float: right;
    margin-top: -12px;
  }
  
  .splash-when-and-where-text {
  	padding: 8px 8px 0px 8px; 
  }
  
  .splash-bottom-notice {
    margin: 12px;
    padding: 8px;
  }

}

/* ## MEDIUM ## */
@media all and (min-width: 670px) and (max-width: 979px) {
  .splash-ribbon {
    display: flex;
    align-items: center;
    position: absolute;
    left: -8px;
    right: -8px;
    top: 72px;
    height: 170px;
    padding: 0px -8px;
  }

  .splash-ribbon-front {
    width: 100%;
    height: 154px;
    text-align: right;
  }

  .splash-container {
    position: relative;
    margin: 8px;
  }

  .splash-photo-box {
    position: relative;
    width: 179px;
	height: 396px;
    z-index: 1;
  }

  .splash-photo {
    display: block;
    height: 226px;
	position: relative;
	top: 64px;
  }

  .splash-top-text {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 64px;
	margin-bottom: 8px;
  }

  .splash-middle-text {
    display: flex;
    height: 170px;
    align-items: center;
    justify-content: center;
	position: absolute;
	right: 0px;
	left: 196px;
	top: 72px;
  }
  
  .splash-quote-container {
    padding: 10px;
    -ms-transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }

  .splash-attribution {
    float: right;
    margin-right: 40px;
    margin-top: -12px;
  }
  
  .splash-when-and-where-text {
	position: absolute;
	top: 242px;
	left: 196px;
	right: 0px;
	height: 78px;
	padding: 8px;
  }

  .splash-bottom-notice {
    height: 44px;
	position: absolute;
	top: 336px;
	left: 0px;
	right: 0px;
	padding: 8px;
  }
}

/* ## LARGE ## */
@media all and (min-width: 980px) {
  .splash-ribbon {
    position: absolute;
    left: 0px;
    top: 123px;
    width: 960px;
    height: 282px;
  }

  .splash-ribbon-front {
    position: absolute;
    left: 0px;
    top: 15px;
    width: 960px;
    height: 252px;
  }

  .splash-container {
    position: relative;
    height: 591px;
  }

  .splash-photo-box {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 468px;
    height: 561px;
    z-index: 1;
  }

  .splash-photo {
    height: 100%;
  }
  
  .splash-info-box {
    position: absolute;
    left: 498px;
    top: 0px;
    width: 447px;
    height: 100%;
  }

  .splash-top-text {
	position: absolute;
    height: 123px;
	left: 498px;
	right: 15px;
  }

  .splash-middle-text {
    display: flex;
    height: 282px;
	position: absolute;
	top: 123px;
	left: 498px;
	right: 15px;
    align-items: center;
    justify-content: center;
  }
  
  .splash-quote-container {
    padding: 10px;
    -ms-transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }

  .splash-attribution {
    float: right;
    margin-right: 40px;
    margin-top: -16px;
  }

  .splash-when-and-where-text {
    height: 90px;
	position: absolute;
	top: 405px;
	left: 498px;
	right: 15px;
  }

  .splash-bottom-notice {
    height: 61px;
    padding: 10px;
	position: absolute;
	top: 495px;
	left: 498x;
	right: 15px;
  }

}