/* ======                                 ====== */
/* ======       GENERAL POSITIONING       ====== */ 
/* ======                                 ====== */
.margintop8 {
  margin-top: 8px;
}
.marginbottom8 {
  margin-bottom: 8px;
}
.margintopbottom8 {
  margin-top: 8px;
  margin-bottom: 8px;
}




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

/* ======  BASE STYLINGS FOR RESPONSIVE   ====== */
.floatleft25-50, .floatright25-50, 
.floatleft25, .floatright25, 
.floatleft33, .floatright33, 
.floatleft50, .floatright50, 
.floatleft66, .floatright66,
.floatleft75, .floatright75, 
.center50, .center80, .center100, 
.floatleft33always, .floatright33always, 
.floatleft50always, .floatright50always, 
.floatleft60always, .floatright60always, 
.floatright66always, .floatright66always 
{
  background: inherit;
}
.splitscreenhalfleft, .splitscreenhalfright 
{
  display:table;
  padding: 1px;
}




/* =====   MEDIA QUERY - TINIEST PHONES   ====== */ 
@media all and (max-width: 300px) {
  .floatleft25 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright25 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft25-50 {
    width: 50%;
    float: left;
    clear: left;
    display: table;
    margin-right:5px;
  }
  .floatright25-50 {
    width: 50%;
    float: right;
    clear: right;
    display: table;
    margin-left:5px;
  }
  .floatleft33 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright33 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft66 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright66 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft75 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright75 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .center50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .center80 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .center100 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft33always {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright33always {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft50always {
    width: 47%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright50always {
    width: 47%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft60always {
    width: 60%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright60always {
    width: 60%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft66always {
    width: 62%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright66always {
    width: 62%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .splitscreenhalfleft {
    width: 98%;
    margin: auto;
  }
  .splitscreenhalfright {
    width: 98%;
    margin: auto;
  }
}




/* ===== MEDIA QUERY -- PHONE AT PORTRAIT ====== */ 
@media all and (min-width: 301px) and (max-width: 505px) {
  .floatleft25 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright25 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft25-50 {
    width: 48%;
    float: left;
    clear: left;
    display: table;
    margin-right:5px;
  }
  .floatright25-50 {
    width: 48%;
    float: right;
    clear: right;
    display: table;
    margin-left:5px;
  }
  .floatleft33 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright33 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft66 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright66 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft75 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatright75 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .center50 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .center80 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .center100 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft33always {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright33always {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft50always {
    width: 48%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright50always {
    width: 48%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft60always {
    width: 60%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright60always {
    width: 60%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft66always {
    width: 63%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright66always {
    width: 63%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .splitscreenhalfleft {
    width: 98%;
    margin: auto;
  }
  .splitscreenhalfright {
    width: 98%;
    margin: auto;
  }
}




/* ===== MEDIA QUERY -- PHONE AT LANDSCAPE ===== */ 
/* ======      AND TABLET AT PORTRAIT     ====== */ 
@media all and (min-width: 506px) and (max-width: 700px) {
  .floatleft25 {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright25 {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft25-50 {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright25-50 {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft33 {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright33 {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft50 {
    width: 48%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright50 {
    width: 48%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft66 {
    width: 63%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright66 {
    width: 63%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft75 {
    width: 63%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright75 {
    width: 63%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .center50 {
    width: 66%;
    display: block;
    margin: auto;
  }
  .center80 {
    width: 80%;
    display: block;
    margin: auto;
  }
  .center100 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft33always {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright33always {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft50always {
    width: 48%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright50always {
    width: 48%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft60always {
    width: 60%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright60always {
    width: 60%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft66always {
    width: 66%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright66always {
    width: 66%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .splitscreenhalfleft {
    width: 98%;
    margin: auto;
  }
  .splitscreenhalfright {
    width: 98%;
    margin: auto;
  }
}




/* ===== MEDIA QUERY -- TABLET AT LANDSCAPE ==== */ 
@media all and (min-width: 701px) and (max-width: 1024px){
  .floatleft25 {
    width: 24%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright25 {
    width: 24%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft25-50 {
    width: 24%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright25-50 {
    width: 24%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft33 {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright33 {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft50 {
    width: 49%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright50 {
    width: 49%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft66 {
    width: 65%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright66 {
    width: 65%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft75 {
    width: 74%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright75 {
    width: 74%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .center50 {
    width: 50%;
    display: block;
    margin: auto;
  }
  .center80 {
    width: 80%;
    display: block;
    margin: auto;
  }
  .center100 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft33always {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright33always {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft50always {
    width: 49%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright50always {
    width: 49%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft60always {
    width: 60%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright60always {
    width: 60%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft66always {
    width: 65%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright66always {
    width: 65%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .splitscreenhalfleft {
  width: 48%;
  float: left;
  }
  .splitscreenhalfright {
  width: 48%;
  float: right;
  }
}




/* ===== MEDIA QUERY -- FOR DESKTOPS AND TVS 1 ==== */ 
@media all and (min-width: 1025px) and (max-width: 1250px){
  .floatleft25 {
    width: 24%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright25 {
    width: 24%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft25-50 {
    width: 24%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright25-50 {
    width: 24%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft33 {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright33 {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft50 {
    width: 49%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright50 {
    width: 49%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft66 {
    width: 65%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright66 {
    width: 65%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft75 {
    width: 74%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright75 {
    width: 74%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .center50 {
    width: 50%;
    display: block;
    margin: auto;
  }
  .center80 {
    width: 80%;
    display: block;
    margin: auto;
  }
  .center100 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft33always {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright33always {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft50always {
    width: 49%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright50always {
    width: 49%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft60always {
    width: 60%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright60always {
    width: 60%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .floatleft66always {
    width: 65%;
    float: left;
    clear: left;
    display: table;
    margin-right: 5px;
  }
  .floatright66always {
    width: 65%;
    float: right;
    clear: right;
    display: table;
    margin-left: 5px;
  }
  .splitscreenhalfleft {
  width: 48%;
  float: left;
  }
  .splitscreenhalfright {
  width: 48%;
  float: right;
  }
}




/* ===== MEDIA QUERY -- FOR DESKTOPS AND TVS 2 ==== */ 
@media all and (min-width: 1251px) {
  .floatleft25 {
    width: 24%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright25 {
    width: 24%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft25-50 {
    width: 24%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright25-50 {
    width: 24%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft33 {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright33 {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft50 {
    width: 49%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright50 {
    width: 49%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft66 {
    width: 65%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright66 {
    width: 65%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft75 {
    width: 74%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright75 {
    width: 74%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .center50 {
    width: 50%;
    display: block;
    margin: auto;
  }
  .center80 {
    width: 80%;
    display: block;
    margin: auto;
  }
  .center100 {
    width: 98%;
    display: block;
    margin: auto;
  }
  .floatleft33always {
    width: 33%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright33always {
    width: 33%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft50always {
    width: 49%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright50always {
    width: 49%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft60always {
    width: 60%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright60always {
    width: 60%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .floatleft66always {
    width: 65%;
    float: left;
    clear: left;
    display: table;
    margin-right: 9px;
  }
  .floatright66always {
    width: 65%;
    float: right;
    clear: right;
    display: table;
    margin-left: 9px;
  }
  .splitscreenhalfleft {
  width: 48%;
  float: left;
  }
  .splitscreenhalfright {
  width: 48%;
  float: right;
  }
}
/* ======= END RESPONSIVE ELEMENTS ======= */