/* ======                                 ====== */
/* ======       GENERAL POSITIONING       ====== */ 
/* ======                                 ====== */
.displaytable {
  display:table;
}
.padding20px {
  padding:20px;
}




/* ======                                 ====== */
/* ======       VERTICAL POSITIONING      ====== */ 
/* ======                                 ====== */
.forcetotop500 {
  z-index: 500;
  position: relative;
}
.verticallycenter {
  display: flex;
  flex-direction: row;
  align-items: center;
}




/* ======                                 ====== */
/* ======     HORIZONTAL POSITIONING      ====== */ 
/* ======                                 ====== */
.width100 {
  width:100%;
}
.limitsize30 {
  width: 30%;
}
.limitsize17 {
  width: 17%;
}
.clearleft {
  clear:left;
}
.clearnone {
  clear:none !important;
}
.clearright {
  clear:right;
}
.centering-container {
  margin-left: auto;
  margin-right:auto;
  display:table;
}




/* ======                                 ====== */
/* ======   CAROUSEL IMAGE POSITIONING    ====== */
/* ======  (apply class to container div) ====== */
/* ======                                 ====== */
.fullwidthcarousel {
	width:100%;
}
.fullwidthcarousel img {
	width:100%;
}




/* ======                                 ====== */
/* ======          GENERIC FLOATS         ====== */ 
/* ======                                 ====== */
.floatright {
  float: right;
  margin: 5px 0 5px 2em;
}
.floatleft {
  float: left;
  margin: 5px 1em 5px 0;
}


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

/* ======  BASE STYLINGS FOR RESPONSIVE   ====== */
.floatright10-50 {
  background: inherit;
  margin: 5px 0 5px 2em;
}
.floatleft10-50 {
  background: inherit;
  margin: 5px 1em 5px 0;
}
.floatright25 {
  background: inherit;
  margin: 5px 0 5px 2em;
}
.floatright25-50 {
  background: inherit;
  margin: 5px 0 5px 2em;
}
.floatleft25 {
  background: inherit;
  margin: 5px 1em 5px 0;
}
.floatleft25-50 {
  background: inherit;
  margin: 5px 1em 5px 0;
}
.floatleft33 {
  background: inherit;
  margin: 5px 1em 5px 0;
}
.floatright33 {
  background: inherit;
  margin: 5px 0 5px 2em;
}
.floatright50 {
  background: inherit;
  margin: 5px 0 5px 2em;
}
.floatleft50 {
  background: inherit;
  margin: 5px 1em 5px 0;
}
.floatright66 {
  background: inherit;
  margin: 5px 0 5px 2em;
}
.floatleft66 {
  background: inherit;
  margin: 5px 1em 5px 0;
}
.floatright75 {
  background: inherit;
  margin: 5px 0 5px 2em;
}
.floatleft75 {
  background: inherit;
  margin: 5px 1em 5px 0;
}
.center50 {
  display: block;
  background: inherit;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}
.center25-50 {
  display: block;
  background: inherit;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}
.center25-33 {
  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 -- PHONE AT PORTRAIT ====== */ 
@media screen and (max-width: 505px) {
  .floatright10-50 {
    width: 50%;
    float: right;
    clear: right;
  }
  .floatleft10-50 {
    width: 50%;
    float: left;
    clear: left;
  }
  .floatright25 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright25-50 {
    width: 50%;
    float: right;
    clear: right;
  }
  .floatleft25 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft25-50 {
    width: 50%;
    float: left;
    clear: left;
  }
  .floatleft33 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright33 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright66 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft66 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright75 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft75 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .center25-50 {
    width: 50%;
  }
  .center25-33 {
    width: 33%;
  }
  .center50 {
    width: 98%;
  }
  .center80 {
    width: 98%;
  }
  .center100 {
    width: 98%;
  }
}


/* ===== MEDIA QUERY -- PHONE AT LANDSCAPE ===== */ 
/* ======      AND TABLET AT PORTRAIT     ====== */ 
@media screen and (min-width: 505px) and (max-width: 700px) {
  .floatright10-50 {
    width: 30%;
    float: right;
    clear: right;
  }
  .floatleft10-50 {
    width: 30%;
    float: left;
    clear: left;
  }
  .floatright25 {
    width: 31%;
    float: right;
    clear: right;
  }
  .floatright25-50 {
    width: 28%;
    float: right;
    clear: right;
  }
  .floatleft25 {
    width: 31%;
    float: left;
    clear: left;
  }
  .floatleft25-50 {
    width: 28%;
    float: left;
    clear: left;
  }
  .floatleft33 {
    width: 31%;
    float: left;
    clear: left;
  }
  .floatright33 {
    width: 31%;
    float: right;
    clear: right;
  }
  .floatright50 {
    width: 46%;
    float: right;
    clear: right;
  }
  .floatleft50 {
    width: 46%;
    float: left;
    clear: left;
  }
  .floatright66 {
    width: 64%;
    float: right;
    clear: right;
  }
  .floatleft66 {
    width: 64%;
    float: left;
    clear: left;
  }
  .floatright75 {
    width: 64%;
    float: right;
    clear: right;
  }
  .floatleft75 {
    width: 64%;
    float: left;
    clear: left;
  }
  .center25-50 {
    width: 28%;
  }
  .center25-33 {
    width: 30%;
  }
  .center50 {
    width: 65%;
  }
  .center80 {
    width: 80%;
  }
  .center100 {
    width: 100%;
  }
}



/* ===== MEDIA QUERY -- TABLET AT LANDSCAPE ==== */ 
@media screen and (min-width: 701px) and (max-width: 1024px){
  .floatright10-50 {
    width: 25%;
    float: right;
    clear: right;
  }
  .floatleft10-50 {
    width: 25%;
    float: left;
    clear: left;
  }
  .floatright25 {
    width: 24%;
    float: right;
    clear: right;
  }
  .floatright25-50 {
    width: 24%;
    float: right;
    clear: right;
  }
  .floatleft25 {
    width: 24%;
    float: left;
    clear: left;
  }
  .floatleft25-50 {
    width: 24%;
    float: left;
    clear: left;
  }
  .floatleft33 {
    width: 32%;
    float: left;
    clear: left;
  }
  .floatright33 {
    width: 32%;
    float: right;
    clear: right;
  }
  .floatright50 {
    width: 47%;
    float: right;
    clear: right;
  }
  .floatleft50 {
    width: 47%;
    float: left;
    clear: left;
  }
  .floatright66 {
    width: 64%;
    float: right;
    clear: right;
  }
  .floatleft66 {
    width: 64%;
    float: left;
    clear: left;
  }
  .floatright75 {
    width: 73%;
    float: right;
    clear: right;
  }
  .floatleft75 {
    width: 73%;
    float: left;
    clear: left;
  }
  .center25-50 {
    width: 24%;
  }
  .center25-33 {
    width: 28%;
  }
  .center50 {
    width: 50%;
  }
  .center80 {
    width: 80%;
  }
  .center100 {
    width: 100%;
  }
}


/* ===== MEDIA QUERY -- FOR DESKTOPS AND TVS ==== */ 
@media screen and (min-width: 1025px) {
  .floatright10-50 {
    width: 10%;
    float: right;
    clear: right;
  }
  .floatleft10-50 {
    width: 10%;
    float: left;
    clear: left;
  }
  .floatright25 {
    width: 24%;
    float: right;
    clear: right;
  }
  .floatright25-50 {
    width: 24%;
    float: right;
    clear: right;
  }
  .floatleft25 {
    width: 24%;
    float: left;
    clear: left;
  }
  .floatleft25-50 {
    width: 24%;
    float: left;
    clear: left;
  }
  .floatleft33 {
    width: 32%;
    float: left;
    clear: left;
  }
  .floatright33 {
    width: 32%;
    float: right;
    clear: right;
  }
  .floatright50 {
    width: 48%;
    float: right;
    clear: right;
  }
  .floatleft50 {
    width: 48%;
    float: left;
    clear: left;
  }
  .floatright66 {
    width: 65%;
    float: right;
    clear: right;
  }
  .floatleft66 {
    width: 65%;
    float: left;
    clear: left;
  }
  .floatright75 {
    width: 74%;
    float: right;
    clear: right;
  }
  .floatleft75 {
    width: 74%;
    float: left;
    clear: left;
  }
  .center25-50 {
    width: 24%;
  }
  .center25-33 {
    width: 24%;
  }
  .center50 {
    width: 50%;
  }
  .center80 {
    width: 80%;
  }
  .center100 {
    width: 100%;
  }
}


/* =======   MEDIA QUERY -- FOR PRINTING  ======= */ 
@media print {
  .floatright10-50 {
    width: 25%;
    float: right;
    clear: right;
  }
  .floatleft10-50 {
    width: 25%;
    float: left;
    clear: left;
  }
  .floatright25 {
    width: 24%;
    float: right;
    clear: right;
  }
  .floatright25-50 {
    width: 24%;
    float: right;
    clear: right;
  }
  .floatleft25 {
    width: 24%;
    float: left;
    clear: left;
  }
  .floatleft25-50 {
    width: 24%;
    float: left;
    clear: left;
  }
  .floatleft33 {
    width: 32%;
    float: left;
    clear: left;
  }
  .floatright33 {
    width: 32%;
    float: right;
    clear: right;
  }
  .floatright50 {
    width: 47%;
    float: right;
    clear: right;
  }
  .floatleft50 {
    width: 47%;
    float: left;
    clear: left;
  }
  .floatright66 {
    width: 64%;
    float: right;
    clear: right;
  }
  .floatleft66 {
    width: 64%;
    float: left;
    clear: left;
  }
  .floatright75 {
    width: 73%;
    float: right;
    clear: right;
  }
  .floatleft75 {
    width: 73%;
    float: left;
    clear: left;
  }
  .center25-50 {
    width: 24%;
  }
  .center50 {
    width: 50%;
  }
  .center80 {
    width: 80%;
  }
  .center100 {
    width: 100%;
  }
}



/* ======                                 ====== */
/* ======    FIXED-RESPONSIVE ELEMENTS    ====== */
/* ======                                 ====== */
.floatleft33always {
  display: block;
  background: inherit;
  margin: 5px 1em 5px 0;
  width: 31%;
  float: left;
}
.floatright33always {
  display: block;
  background: inherit;
  margin: 5px 0 5px 2em;
  width: 31%;
  float: right;
}
.floatleft50always {
  display: table;
  margin: 5px 1em 5px 0;
  background: inherit;
  width: 45%;
  float: left;
}
.floatright50always {
  display: table;
  margin: 5px 0 5px 2em;
  background: inherit;
  width: 45%;
  float: right;
}
.floatleft60always {
  display: block;
  background: inherit;
  margin: 5px 1em 5px 0;
  width: 58%;
  float: left;
}
.floatright60always {
  display: block;
  background: inherit;
  margin: 5px 0 5px 2em;
  width: 58%;
  float: right;
}




/* ======                                 ====== */
/* ====== SIMPLE 1-2 FLEXBOX POSITIONING  ====== */
/* ======                                 ====== */

/* For tablets portrait and smaller */
@media only screen and (max-width: 700px) {
  .one-two-col {
    float: left;
    width: 100%;
    text-align: left;
    padding: 5px;
    margin: 10px auto;
  }
}
/* For tablets landscape and larger phones */
@media only screen and (min-width: 701px) {
  .one-two-col {
    float: left;
    width: 48%;
    text-align: left;
    padding: 5px;
    margin: 10px 1% 10px 1%;
  }
}




/* ======                                 ====== */
/* ======       FLEXBOX POSITIONING       ====== */
/* ======                                 ====== */

/* === 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 MEDIA QUERIES ===== */
/* = PHONE AT PORTRAIT LANDSCAPE TABLET PORTRAIT= */
@media only screen and (max-width: 700px) {
  .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;
  }
}
/* ======       TABLET AT LANDSCAPE        ====== */
@media only screen and (min-width: 701px) and (max-width: 1024px) {
  .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;
  }
}
/* ======        DESKTOPS AND TVS          ====== */
@media only screen and (min-width: 1025px) {
  .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 POSITIONING      ====== */
/* ======                                 ====== */