/* ======= GENERAL POSITIONING ======= */ 

.padding20px {
  padding:20px;
}

.nomargin {
  margin:0;
}



/* ======= GENERIC FLOATS ======= */ 
.floatright {
  float: right;
  margin: 5px 0 5px 8px;
}

.floatleft {
  float: left;
  margin: 5px 8px 5px 0;
}

.clearleft {
  clear:left;
}

.clearright {
  clear:right;
}

.centering-container {
  margin-left: auto;
  margin-right:auto;
  display:table;
}


/* ======= FOR PROPERLY ALIGNING CAPTIONS TO THEIR IMAGES ======= */ 

.imagecaptionwrapperouter {
   display: table;
   padding: 10px;
   background:#F3F3F3;
   border: 1px solid #CCC;
   border-radius: 5px;
   clear: both;
   max-width: 100%;
}

.imagecaptionwrapperinner {
   display: table;
   font-size:.85em;
   line-height: 100%;
   clear: both;
}

.imagecaptionwrapperinner img, picture {
   display: block;
}







/* ======= BEGIN FULLY-RESPONSIVE ELEMENTS ======= */ 

/* ======= BASE STYLINGS FOR MEDIA QUERIES BELOW ======= */ 

.floatright10-50 {
  background: inherit;
}

.floatleft10-50 {
  background: inherit;
}

.floatright25 {
  background: inherit;
}

.floatright25-50 {
  background: inherit;
}

.floatleft25 {
  background: inherit;
}

.floatleft25-50 {
  background: inherit;
}

.floatleft33 {
  background: inherit;
}

.floatright33 {
  background: inherit;
}

.floatright50 {
  background: inherit;
}

.floatleft50 {
  background: inherit;
}

.floatright66 {
  background: inherit;
}

.floatleft66 {
  background: inherit;
}

.floatright75 {
  background: inherit;
}

.floatleft75 {
  background: inherit;
}

.center50 {
  display: block;
  background: inherit;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}

.center80 {
  display: block;
  background: inherit;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}

.center100 {
  display: block;
  background: inherit;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}



/* ======= MEDIA QUERY -- FOR PHONE AT PORTRAIT ======= */ 

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

  .floatright10-50 {
    width: 50%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft10-50 {
    width: 50%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright25 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatright25-50 {
    width: 50%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft25 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatleft25-50 {
    width: 50%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft33 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatright33 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatright50 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatleft50 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatright66 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatleft66 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatright75 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .floatleft75 {
    max-width: 85%;
    display: block;
    margin: auto;
  }

  .center50 {
    width: 98%;
  }

  .center80 {
    width: 98%;
  }

  .center100 {
    width: 98%;
  }
}



/* ======= MEDIA QUERY -- FOR PHONE AT LANDSCAPE AND TABLET AT PORTRAIT ======= */ 

@media screen and (min-width: 505px) and (max-width: 700px) {


  .floatright10-50 {
    width: 30%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft10-50 {
    width: 30%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright25 {
    width: 31%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright25-50 {
    width: 28%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft25 {
    width: 31%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft25-50 {
    width: 28%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft33 {
    width: 31%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright33 {
    width: 31%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright50 {
    width: 46%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft50 {
    width: 46%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright66 {
    width: 64%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft66 {
    width: 64%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright75 {
    width: 64%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft75 {
    width: 64%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .center50 {
    width: 65%;
  }

  .center80 {
    width: 80%;
  }

  .center100 {
    width: 100%;
  }
}



/* ======= MEDIA QUERY -- FOR TABLETS AT LANDSCAPE ======= */ 

@media screen and (min-width: 701px) and (max-width: 1024px){

  .floatright10-50 {
    width: 25%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft10-50 {
    width: 25%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright25 {
    width: 24%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright25-50 {
    width: 24%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft25 {
    width: 24%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft25-50 {
    width: 24%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft33 {
    width: 32%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright33 {
    width: 32%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright50 {
    width: 47%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft50 {
    width: 47%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright66 {
    width: 64%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft66 {
    width: 64%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright75 {
    width: 73%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft75 {
    width: 73%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .center50 {
    width: 50%;
  }

  .featureimagebanner {
    width: 50%;
  }

  .center80 {
    width: 80%;
  }

  .center100 {
    width: 100%;
  }
}



/* ======= MEDIA QUERY -- FOR DESKTOPS AND TVS ======= */ 

@media screen and (min-width: 1025px) {

  .floatright10-50 {
    width: 10%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft10-50 {
    width: 10%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright25 {
    width: 24%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright25-50 {
    width: 24%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft25 {
    width: 24%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft25-50 {
    width: 24%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft33 {
    width: 32%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright33 {
    width: 32%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright50 {
    width: 48%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft50 {
    width: 48%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright66 {
    width: 65%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft66 {
    width: 65%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright75 {
    width: 74%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft75 {
    width: 74%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .center50 {
    width: 50%;
  }

  .center80 {
    width: 80%;
  }

  .center100 {
    width: 100%;
  }
}


/* ======= MEDIA QUERY -- FOR PRINTING ======= */ 

@media print {

  .floatright10-50 {
    width: 25%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft10-50 {
    width: 25%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright25 {
    width: 24%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright25-50 {
    width: 24%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft25 {
    width: 24%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft25-50 {
    width: 24%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatleft33 {
    width: 32%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright33 {
    width: 32%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatright50 {
    width: 47%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft50 {
    width: 47%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright66 {
    width: 64%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft66 {
    width: 64%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .floatright75 {
    width: 73%;
    margin: 5px 0 5px 8px;
    float: right;
    clear: right;
  }

  .floatleft75 {
    width: 73%;
    margin: 5px 8px 5px 0;
    float: left;
    clear: left;
  }

  .center50 {
    width: 50%;
  }

  .featureimagebanner {
    width: 50%;
  }

  .center80 {
    width: 80%;
  }

  .center100 {
    width: 100%;
  }
}


/* ======= END FULLY-RESPONSIVE ELEMENTS ======= */ 





/* ======= BEGIN FIXED-RESPONSIVE ELEMENTS ======= */ 

.floatleft33always {
  display: block;
  background: inherit;
  margin: 5px 8px 5px 0;
  width: 31%;
  float: left;
}

.floatright33always {
  display: block;
  background: inherit;
  margin: 5px 0 5px 8px;
  width: 31%;
  float: right;
}

.floatleft50always {
  display: table;
  margin: 5px 8px 5px 0;
  background: inherit;
  width: 45%;
  float: left;
}

.floatright50always {
  display: table;
  margin: 5px 0 5px 8px;
  background: inherit;
  width: 45%;
  float: right;
}

.floatleft60always {
  display: block;
  background: inherit;
  margin: 5px 8px 5px 0;
  width: 58%;
  float: left;
}

.floatright60always {
  display: block;
  background: inherit;
  margin: 5px 0 5px 8px;
  width: 58%;
  float: right;
}
/* ======= END FIXED-RESPONSIVE ELEMENTS ======= */ 






/* ======= FLEXBOX GALLERY CONTAINER FORMATTING ======= */ 

.flexbox-orphannotstretch {
  height:auto;
  display: table-cell; // ie9    
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: space-evenly;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  }


.flexbox-orphanstretch {
  height:auto;
  display: table-cell; // ie9    
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: space-evenly;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.flexbox-orphanstretch:after {
  clear: both; 
  content: "";
  display: table; 
}



.flexbox-nostretch {
  height:auto;
  display: table-cell; // ie9    
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: space-evenly;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: center;
}





/* ======= FLEXBOX GALLERY ITEM BASE FORMATTING ======= */ 
.flexbox-onetwothree-item {
}

.flexbox-onetwothree-item img, picture {
   display: block;
}




/* ======= FLEXBOX GALLERY ITEM SCREEN-SIZE-DEPENDENT FORMATTING ======= */ 

/* ======= MEDIA QUERY -- FOR PHONE AT PORTRAIT ======= */ 
@media all and (max-width: 505px) {
  .flexbox-onetwothree-item {
    padding: 8px;
    max-width:95%;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 95%;
    -ms-flex: 1 1 95%;
    flex: 1 1 95%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
}

/* ======= MEDIA QUERY -- FOR PHONE AT LANDSCAPE AND TABLET AT PORTRAIT ======= */ 
@media all and (min-width: 506px) and (max-width: 700px) {
  .flexbox-onetwothree-item {
    padding:8px;
    max-width:41%;
    margin: 0 2% 25px 2%;
    display: table;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2 2 41%;
    -ms-flex: 2 2 41%;
    flex: 2 2 41%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
}

/* ======= MEDIA QUERY -- FOR TABLET AT LANDSCAPE AND LARGER SCREENS ======= */ 
@media all and (min-width: 701px) {
  .flexbox-onetwothree-item {
    padding:8px;
    max-width:26%;
    margin: 0 2% 25px 2%;
    display: table;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2 2 26%;
    -ms-flex: 2 2 26%;
    flex: 2 2 26%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
  }
}

/* ======= END FLEXBOX GALLERY ELEMENTS ======= */





/* ======= BEGIN MASONRY GALLERY ELEMENTS ======= */

.masonry-container-1-2-3, .masonry-container-1-2, .masonry-container-2-3 {
  column-gap: 3em;
}
.masonry-item {
  width: 100%;
}

/* ======= MEDIA QUERY -- FOR PHONE AT PORTRAIT ======= */ 
@media all and (max-width: 505px) {
  .masonry-container-1-2-3, .masonry-container-1-2 {
    column-count: 1;
  }
  .masonry-container-2-3 {
    column-count: 2;
  }
}


/* ======= MEDIA QUERY -- FOR PHONE AT LANDSCAPE AND TABLET AT PORTRAIT ======= */ 
@media all and (min-width: 506px) and (max-width: 700px) {
  .masonry-container-1-2-3, .masonry-container-1-2, .masonry-container-2-3 {
    column-count: 2;
  }
}

/* ======= MEDIA QUERY -- FOR TABLET AT LANDSCAPE AND LARGER SCREENS ======= */ 
@media all and (min-width: 701px) {
  .masonry-container-1-2-3, .masonry-container-2-3 {
    column-count: 3;
  }

.masonry-container-1-2 {
    column-count: 2;
  }


}



/* ======= END MASONRY GALLERY ELEMENTS ======= */