#banner {
    text-align: center;
    background-color: #de787b;
    color: #fff;
    font-size: 1.7rem;
    margin: -3rem 0 0 0;
    padding: 0;
}
#banner a {
  width: 100%;
  display: inline-block;
  padding: 7px;
}

.container{
    list-style: none;

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;

    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 900px){
    .container{
        -webkit-flex-direction: row;
        flex-direction: row;
    }
}

.pageHeader img {
	object-fit: cover;
}

.buttonLink{
    background: none !important;
    border: none;
    padding: 0 !important;
    text-decoration: underline;
    color: inherit;
    /*optional*/
    cursor: pointer;
}


span.callWidgetAvailable{
    font-size: .7em;
    background-color: #F2C019;
    color: #FFFFFF;
    padding: 3px 4px;
}
span.callWidgetAvailable a{
    text-decoration: none;
}

.externalLinkIcon::after {
	content: "\f08e";
    font-size: 0.8em;
}

.accessible-hidden
 {
 clip-path: inset(100%);
 clip: rect(1px 1px 1px 1px); /* IE 6/7 */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; /* added line */
  width: 1px;
 }
 
.borderBox {
	display: inline-block;
    background-color: #fefefe;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    margin: 5px 0;
    padding: 10px;
 }
 
.flexColumn {
	display: flex;
    flex-direction: column;
}

.flexColumn div {
  margin: 2px 0;
}

div.toolsContainer {
	display: flex;
    flex-direction: column;
}

.image-row {
    width: 100%; 
    display: flex; 
    justify-content: space-between; 
}

.image-row img {
	padding: 5px;
}


@media (min-width:1180px){  
	div.toolsContainer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
	}
     
    div.toolsContainer div {
      flex-basis: 0;
      flex-grow: 1;
      padding-right: 10px;
  }
}

.emoji {
	position: relative;
    top: -2.5px;
}

/* The default H4s are the same size as body text (1.6rem) :( Let's make them a bit bigger */
@media screen and (min-width: 400px){
    .pageMainContent h4{
        font-size: calc(1.8rem + (((1.6 - 1.6) * 10) * ((100vw - 400px) / (1180 - 400))));
    }
}
@media screen and (min-width: 1180px){
    .pageMainContent h4{
        font-size: 1.8rem;
    }
}

.courseCategories a {
	text-decoration: underline;
}

/* Allow class status buttons to wrap. Otherwise the "Registration opens..." buttons are horribly long and ugly */
.classStatus {
	white-space: normal;
}

.homeUpdateTileContainer {
	display: flex;
}

.homeUpdateTile {
    display: flex;
    flex: 1 1 0;
    background-color: white;
    margin: 10px;
    
}

.homeUpdateTilePhoto {
    flex: 0 0 auto;
}
    
.homeUpdateTileText {
    margin: 10px;
}

.homeUpdates div.flexTilesWrapper {
    flex-direction: row;
    justify-content: center;
}

.homeUpdates div.flexTile {
	min-width: 0;
	margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.homeUpdates div.flexTileFigure {
	margin-bottom: 10px;
}

.homeUpdates div.flexTileText {
	overflow: hidden;
    color: #73725e;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #fff;
}

.homeUpdates div.flexTileText div.bottom {
	flex: 0 0 auto;
    text-align: center;
}
.homeUpdates div.flexTileText div.bottom.calltoaction {
	margin-top: auto;
}

.homeUpdates div.flexTileText:last-of-type
{
    border-bottom: 10px solid #f2c019;
}

.homeUpdates div.flexTileText p {
	width: 100%;
    margin: 0 0 0.6rem;
    padding-left: 10px;
    padding-right: 10px;
}

.homeUpdates div.flexTileText > div {
	display: block;
    padding: 0;
    height: auto;
}

.homeUpdates .flexTile > div.flexTileFigure figure > div {
    padding: 0;
}

@media (min-width: 900px){
	.homeUpdates div.flexTilesWrapper {
    	flex-wrap: nowrap;
        flex-direction: row;
	}
}

/*----------------------- 
* = Page-specific syles = 
*----------------------*/

/*------------------------------------ 
* =         Order Complete          ==
*-----------------------------------*/

#order-complete .callout {
	align-items: stretch;
}

#order-complete .callout div {
	flex: 1 1 0;
    display: flex;
    flex-direction: column;
    background-color: #fefefe;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    margin: 5px;
    padding: 10px;
}

#order-complete .callout div p:last-child {
	margin-top: auto;
    align-self: center;
}

/*------------------------------------ 
* == Boats-to-Tools Submission Form ==
*-----------------------------------*/

#events.boats-to-tools-auction-item-submission .btt li ul{
    display: inline;
    list-style: none;
    margin-left: 0px;
}
#events.boats-to-tools-auction-item-submission .btt li ul li{
    display: inline;
    white-space: nowrap;
}
#events.boats-to-tools-auction-item-submission .btt li ul li:after{
    content: " | "
}
#events.boats-to-tools-auction-item-submission .btt li ul li:last-child:after{
    content: ""
}
#events.boats-to-tools-auction-item-submission div.formFieldWrapper > label{
    font-weight: bold;
}
#events.boats-to-tools-auction-item-submission div.formFieldWrapper > label.required > em{
    font-weight: regular;
}
/*-------------------- 
* == Privacy Policy ==
*-------------------*/

body#privacy-policy h4{
    font-size: 1.8rem;
}
body#privacy-policy p:last-child{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 1.3rem;
    margin-left: 0px;
}
/*------------------------
* == Cart donation form ==
*-----------------------*/

.cartDonationWrapper{
    align-items: flex-start;
    justify-content: space-between;
}
.cartDonationTextWrapper{
    flex: 1 2 auto;
    padding-right: 20px;
    width: 100%; /* Fix IE text overflow */
}
.cartDonationForm{
    width: 100%;
}
.cartDonationForm .addToCartFormRow {
   align-items: baseline;
}

.cartDonationForm .addToCartFormRow.block {
	display: block;
}

.cartDonationForm button{
    width: 100%;
}
.cartDonationForm input#price {
    min-height: 50px;
    margin-bottom: 10px;
}


.donationImage{
    display: none;
}
@media (min-width: 750px){
    .cartDonationForm{
        flex-wrap: nowrap;
        flex: 0 0 300px;
    }
    .cartDonationForm input{
        
        margin-bottom: 0;
    }
    .donationImage{
        flex: 1 2 200px;
        padding-right: 20px;
        display: block;
    }

}

/*---------------------- 
* == Auction pages ==
*---------------------*/

#auction .bttItemListing,
#auction .contentCopy{
    flex: 1;
    flex-basis: 350px;
}
#auction .contentCopy{
    order: 1;
    padding-right: 20px;
    margin: 0;
}
#auction .bttItemListing{
    order: 2;
}
#auction .bttFeaturedItems{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#auction .bttFeaturedItems .auctionItem{
    border-left: 1px solid #E9E9E6;
    margin: 10px 10px 10px 10px;
    max-width: 450px;
    display: flex;
}
#auction .bttFeaturedItems .itemText{
    margin-left: 10px;
}
#auction .bttFeaturedItems .itemPhoto{
    float: left;
    margin-left: 10px;
}
#auction .guestsTilesWrapper .flexTile,
#auction .coursesTilesWrapper .flexTile{
    border: none;
}
#auction .guestsTilesWrapper .flexTile > div.flexTileFigure figure > div,
#auction .coursesTilesWrapper .flexTile > div.flexTileFigure figure > div{
    padding: 0px;
}
#auction .guestsTilesWrapper div.flexTileText,
#auction .coursesTilesWrapper div.flexTileText{
    background-color: transparent;
    color: #73725E;
}
#auction .guestsTilesWrapper .flexTile > .flexTileText,
#auction .coursesTilesWrapper .flexTile > .flexTileText{
    padding: 20px 10px;
}
#auction .guestsTilesWrapper .flexTile > .flexTileText,
#auction .coursesTilesWrapper .flexTile > .flexTileText,
#auction .flexTile > div.flexTileText > .courseSessionDates,
#auction .guestsTilesWrapper .flexTile > .flexTileText > .listingText,
#auction .coursesTilesWrapper .flexTile > .flexTileText > .listingText{
    -ms-flex-align: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -ms-flex-line-pack: center;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -ms-flex-pack: flex-start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
#auction .guestsTilesWrapper div.flexTileText > div,
#auction .coursesTilesWrapper div.flexTileText > div{
    padding: 0 0 10px;
}
#auction .guestsTilesWrapper a.classStatus,
#auction .coursesTilesWrapper a.classStatus{
    margin-bottom: 10px;
}
#auction .guestsTilesWrapper .flexTile > div.flexTileFigure figure > div{
    background: url("/assets/graphics/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#auction .flexTilesWrapper{
    justify-content: space-evenly;
}
#auction .bttCategoryWrapper{
    background-color: #FEFEFE;
    border: 1px solid #EAEAEA;
    border-radius: 4px;
    box-shadow: inset 0 0 7px -1px hsla(0, 0%, 39%, .1);
    margin: 15px 0;
    padding: 0 15px 15px;
    width: 100%;
}
#auction .bttCategoryContent{
    border: none;
    margin: 15px 0;
    padding: 0 10px;
    width: 100%;
}
/* Stupid IE overflow fix */
#auction p{
    width: 100%;
}
#auction .photoIcon{
    height: 1.4em;
    vertical-align: bottom;
    color: #962427;
}
#auction .auctionCategories li a{
    text-decoration: none;
}
#auction .auctionCategories ul{
    list-style-type: none;
}
#auction .auctionCategories li{
    margin: .5rem 0;
    padding: 0 0 1rem;
}

#auction.submit .flexTile {
	width: 150px;
}

#auction.submit .formFieldWrapper div {
	margin-left: 0px;
}

#auction.submit .formFieldWrapper > label {
	font-weight: bold;
}



/*---------------------- 
* == Lodging Partners ==
*---------------------*/

body.lodging-partners table.partnersTable tbody tr td:nth-of-type(even) {
background-color: #E9E9E1;
}

/*---------------------- 
* == About North House, Slojd Fellowship ==
*---------------------*/

body.about-north-house div.section,
body.slojd div.section {
	width: 100%;
	overflow: auto;
	border-bottom: 1px solid #e9e9e6;
	margin-bottom: 25px;
	padding-bottom: 25px;
}

body.about-north-house div.section:last-of-type,
body.slojd div.section:last-of-type {
	border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

body.about-north-house .sectionPhoto,
body.slojd .sectionPhoto {
	position: relative;
    margin-top: 5px;
  }
  
body.about-north-house .sectionPhoto h3,
body.slojd .sectionPhoto h3 {
	color: #FFF;
    position: absolute;
    bottom: 10px;
    right: 0px;
    margin: 0;
    text-align: right;
    text-shadow: 0px 0px 4px #000;
    font-size: 4em;
}
  
body.about-north-house .sectionContent,
body.slojd .sectionContent {

}

body.about-north-house .sectionContent.staff div,
body.slojd .sectionContent.staff div {
    margin-bottom: 10px;
    overflow: auto;
}

body.about-north-house .sectionContent.staff img,
body.slojd .sectionContent.staff img {
    float: left;
    clear: left;
    margin-right: 20px;
    margin-top: 5px;
    width: 130px;
}

body.about-north-house .sectionContent.staff p,
body.slojd .sectionContent.staff p {
    overflow: hidden;
}

body.about-north-house .sectionContent.staff h3,
body.slojd .sectionContent.staff h3 {
	margin-top: 10px;
    margin-bottom: 0;
}

body.about-north-house .sectionContent.staff h4,
body.slojd .sectionContent.staff h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-style: italic;
}

@media (min-width:650px){    
 
  body.about-north-house .sectionPhoto,
  body.slojd .sectionPhoto {
  	width: 35%;
    float: left;
    clear: left;
  }
  
  body.about-north-house .sectionContent,
  body.slojd .sectionContent {
  width: 65%;
  float: left;
  overflow: hidden;
  padding-left: 30px;
  }

}


body.about-north-house .sectionPhoto img,
body.slojd .sectionContent {
	max-width: 100%;
}



/*------------------- 
* == Daily Sailing ==
*------------------*/

#programs.daily-sailing .widgetBody {
	display:block;
    -js-display: block;
}

#programs.daily-sailing .widgetImage {
	float: left;
}

/*------------ 
* == Events ==
*-----------*/


#events .pastEvents {
	padding-left: 50px;
    border-left: 5px solid #e9e9e1;
}

#events .pastEvents figure {
	filter: brightness(50%);
}

/*--------------- 
* == Workstudy ==
*--------------*/

.workstudySession {
	overflow: hidden;
    padding: 5px;
}

div.workstudySession:nth-child(even) {
	background-color: #eee;
}

.workstudySessionTitleContainer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.workstudySessionTitle {
    font-weight: bold;
    font-size: 1.1em;
}


.workstudySessionDetailsButton {
	margin-left: auto;
}

.workstudySessionDetails {
	padding: 10px 0 10px 10px;
}

.workstudySessionFull {
	color: #aaa;
    text-decoration: line-through;
    font-weight: normal;
}
/*
.workstudySessionFull:after {
	color: #73725e;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
	content: " Filled!"
}
*/

img[src="/themes/ee/pro/img/edit.svg"] {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

/**
 * Tweak the N+N bar to be more mobile friendly and use a 1-row scroll
 * instead of turning into a 5-item column
 */
.homeUpdates .cardsWrapper {
  overflow-x: scroll;
  scrollbar-width: none;
  flex-wrap: nowrap;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.homeUpdates .cardsWrapper::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
  display: none;
}

.homeUpdates .cardsWrapper .card {
  scroll-snap-align: start;
}

.homeUpdates .cardsWrapper .fillerCard {
  display: none;
}

.homeUpdates .cardCopy, .homeUpdates .cardFooter {
  padding: 1.1rem;
}

#homePageHeaderViewCoursesLink, #homePageHeaderViewCalendarLink, #homePageHeaderFeaturedEventLink {
  margin-top: 0.25em;
}

#pageBannerHeading {
  margin-top: -27px;
  margin-bottom: 1em;
  color:white;
  font-size:48px; text-shadow: 4px 2px 6px rgba(0,0,0,1);
}
#pageBannerHeadingLine1 {
  font-size: 125%;
  display: block;
}

@media (max-width: 900px) {
  #pageBannerHeading { 
    font-size: 5vw !important;
  }
  #pageBannerHeadingLine1 { display: inline !important; }
}

.err-wrap {
  display: none;
}

/*------------------- 
adjust the images in the Event page slideshow to not take up the full height of the screen
At some point, attempt to generalize out to all the other page types?
*/
#events .slide img {
  object-fit: contain;
  object-position: center 10%;
}

#events .slide img[src*=testing123] {
  /* example of how to override image positioning for a specific image */
  /* use this when you want a full-width image */
  object-fit: cover;
  object-position: center;
}
#events .slide:hover img {
  object-fit: contain;
}
#events .slide {
  max-height: 43vh;
}

@media (max-height: 600px) {
  #events .slide img {
    object-fit: contain;
  }
}

#events .slidesNav, #course-session .slidesNav { pointer-events: none; }
#events .slidesNav > *, #course-session .slidesNav > * { pointer-events: all; }
#events .slides, #course-session .slides { background-color: #eee; }
/* /END events slideshow modifications */

/* BLOG styling, at this point related to images */
#blog .contentCopy img {
  max-height: 87vh;
  width: auto;
}
#blog .contentCopy figure { display: block } 
#blog .contentCopy figure img {max-width: 47%; float: left; margin-right: 3%; }
/* END blog image styling */

.sessionSlideShow.contentSection { 
  display: flex;
  margin-top: 0;
}
.sessionSlideShow.contentSection div { 
  margin: 0 .1em;
}

/** home page mobile updates */

/* override `min-width: 450px;` from somewhere which causes images in home blocks on my baby iPhone SE (4" screen) to overflow the screen in portrait orientation */
.indexFeaturedSlide .flexMediaObjectLeft {
  min-width: 100% !important;
}
@media (min-width: 451px) {
  .indexFeaturedSlide .flexMediaObjectLeft {
    min-width: 450px !important;
  }
}

#index .featuredSlideText h2 {
  margin-top: 0;
}
/** END home page mobile updates */

#programs .pageBanner { /* allow program titles span multiple lines */
   max-height: none !important;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}