
/* -- VDJ Responsive Grid - mobile first approach
------------------------------------------------------------- */
/*
breakpoints :

*********  PHONES  ************
.tiny -> GRAY :  really small phones - use to hide or tweak
.little -> RED smartphones normal size inc iphone portrait
.small -> GREEN phones landskape mode; iphone, samsung, htc etc
.compact -> BLUE : bigger display phones landskape view like galaxy S3-S4, Nokia E7 etc

*********  TABLETS & SMALL LAPTOPS ************
.medium  ORANGE : tables in portrait mode, inc Ipads
.regular  LIME : tables in landskap mode, inc Ipads, and old PC monitors at 1024 ish

*********  HD DESKTOPS **************
.wide -> YELLOW small widescreen monitors, 1280px ish
.large -> GRAY large monitors at HD and up

*/

/* ===== == = === Base Styles === = == ===== */

/* Display only at certain size */
.tiny-only{display: block;} /* tiny phones */
.little-only{display: none;} /* phones iphone portrait */
.small-only{display: none;} /* phones iphone landskape */
.compact-only{display: none;}  /* bigger phones landskape */
.medium-only{display: none;} /* tablets portrait */
.regular-only{display: none;} /* tablets landskape + small laptops */
.wide-only{display: none;}    /* laptops */
.large-only{display: none;} /* desktops */


/* Hide from certain size and down */
.tiny-hide{display: none;} /* tiny phones */
.little-hide{display: none;} /* phones iphone portrait */
.small-hide{display: none;} /* phones iphone landskape */
.compact-hide{display: none;}  /* bigger phones landskape */
.medium-hide{display: none;} /* tablets portrait */
.regular-hide{display: none;} /* tablets landskape + small laptops */
.wide-hide{display: none;}    /* laptops */
.large-hide{display: none;} /* desktops */

/* Show from certain size and up */
.tiny-show{display: none;} /* tiny phones */
.little-show{display: none;} /* phones iphone portrait */
.small-show{display: none;} /* phones iphone landskape */
.compact-show{display: none;}  /* bigger phones landskape */
.medium-show{display: none;} /* tablets portrait */
.regular-show{display: none;} /* tablets landskape + small laptops */
.wide-show{display: none;}    /* laptops */
.large-show{display: none;} /* desktops */


.hide { display: none;}

.large-wide-show {display:none;}
.regular-large-show {display:none;}
.regular-wide-show {display:none;}


img.scale, img.responsive { max-width: 100%; height: auto; }

/* -- wrapper  to block-out a column with padding -- */
.island { padding: 1.5em; background-color: #ececec; }
.island :last-child {  margin-bottom: 0; }
/* -- the grid parent box -- */
.grid { overflow: hidden; clear: both;}

/* child grid box of a grid box -> no padding */
.grid .grid  {
    padding: 0em;
    /*
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    */
    -o-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.max-col {
  float: left;
  width: 100%;
  padding: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  padding-left: 0;
  padding-right: 0;
}

/* -- column full width  -- */
.col {
    float: left;
    width: 100%;
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    -o-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.col:last-child {padding-right: 15px;}
.col .col {padding: 0em;}

/* default base grid - aka mobile (first) */
.col-full, .col-1-1, .col-set-full .col {width: 100%;}
.col-half, .col-1-2, .col-2-4, .col-set-half .col {width: 50%;}
.col-one-third, .col-1-3, .col-set-one-third .col { width: 33.333%;}
.col-two-thirds, .col-2-3 {width: 66.666%;}
.col-one-quarter, .col-1-4, .col-set-one-quarter .col {width: 25%;}
.col-three-quarters, .col-3-4 {width: 75%;}

/*
.large-gutter {
margin-left: -6em; }
.large-gutter .col {
  padding-left: 6em;}

.half-gutter {
margin-left: -1.5em; }
.half-gutter .col {
  padding-left: 1.5em; }

.no-gutter {
margin-left: 0; }
.no-gutter .col {
  padding-left: 0; }

.reset-gutter {
margin-left: -3em; }
.reset-gutter .col {
  padding-left: 3em; }

ul.grid-section,
ol.grid-section {
padding-left: 0;
list-style: none; }

li.col {
  margin-left: 0;
  margin-bottom: 0; }
*/


#mobile-nav { display: none;}

.footerbox {
  padding-left: 30%;
}


#content {
  font-size: 1em;

}


/* masonry */

.masonry-wrapper {
  width: 95%;
  margin: 1.5em auto;
}

.masonry {
  -moz-column-width: 250px;
  -webkit-column-width: 250px;
  -column-width: 250px;
  width: 100%;
  text-align: center;
  z-index: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;

}

.masonry-wide {
  -moz-column-width: 250px;
  -webkit-column-width: 250px;
  -column-width: 250px;
  width: 100%;
  text-align: center;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
}

.masonry .brick {
  display: inline-block;
  margin-bottom: 20px;
  z-index: 2;
  background: #fff;
  padding: 1.5em;
  margin: 0 0 1.5em;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;

}

.masonry-wide .brick {
  display: inline-block;
  margin-bottom: 20px;
  text-align: left;
  background: #fff;
  padding: 1.5em;
  margin: 0 0 1.5em;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.masonry img {
  min-width: 100%;
  width: 100%;
}



/*
#footerbox-1, #footerbox-2, #footerbox-3, #footerbox-4 {}
#footerbox-2, #footerbox-3 {display: none;}

*/

/* ======================================= */
/*              MEDIA QUERIES               */
/* ======================================= */

/* ===== == = === 10em (?) === = == ===== */
/* Tiny : phones  ----------- */
@media only screen and (min-width : 15em) {
  #breakbox {background-color:gray;}
}


/* ===== == = === 20em (320px) === = == ===== */
/* Small: Smartphones, iphone, samsung, htc, nokia (portrait) ----------- */
@media only screen and (min-width : 20em) {
  #breakbox {background-color:red;}
  
  /* Display only at certain size */
  .tiny-only{display: none;} /* tiny phones */
  .little-only{display: block;} /* phones iphone portrait */
  .small-only{display: none;} /* phones iphone landskape */
  .compact-only{display: none;}  /* bigger phones landskape */
  .medium-only{display: none;} /* tablets portrait */
  .regular-only{display: none;} /* tablets landskape + small laptops */
  .wide-only{display: none;}    /* laptops */
  .large-only{display: none;} /* desktops */


  /* Hide from certain size and down */
  .tiny-hide{display: block;} /* tiny phones */
  .little-hide{display: none;} /* phones iphone portrait */
  .small-hide{display: none;} /* phones iphone landskape */
  .compact-hide{display: none;}  /* bigger phones landskape */
  .medium-hide{display: none;} /* tablets portrait */
  .regular-hide{display: none;} /* tablets landskape + small laptops */
  .wide-hide{display: none;}    /* laptops */
  .large-hide{display: none;} /* desktops */


}

/* -- Breakpoint phone-tablet -> outerwrapper full screen
------------------------------------------------------------- */
@media only screen and (max-width: 30em) {
#outer-wrapper {width: 100%;}
.yt-container::before {
  height: 50px;
  width: 50px;
  margin: -25px 0 0 -25px;
}

.yt-container:hover::before { /* play bubble hover */
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
}

.yt-container::after {
  border-width: 10px 0 10px 20px;
  margin: -10px 0 0 -7.5px;
}



}


/* ===== == = === 30em (480px) === = == ===== */
/* Smartphones, iphone,samsung, htc (landscape) ----------- */
@media only screen and (min-width : 30em) {
  #breakbox {background-color:green;}

  #content {font-size: 1.1em}

    /* Display only at certain size */
  .tiny-only{display: none;} /* tiny phones */
  .little-only{display: none;} /* phones iphone portrait */
  .small-only{display: block;} /* phones iphone landskape */
  .compact-only{display: none;}  /* bigger phones landskape */
  .medium-only{display: none;} /* tablets portrait */
  .regular-only{display: none;} /* tablets landskape + small laptops */
  .wide-only{display: none;}    /* laptops */
  .large-only{display: none;} /* desktops */


  /* Hide from certain size and down */
  .tiny-hide{display: block;} /* tiny phones */
  .little-hide{display: block;} /* phones iphone portrait */
  .small-hide{display: none;} /* phones iphone landskape */
  .compact-hide{display: none;}  /* bigger phones landskape */
  .medium-hide{display: none;} /* tablets portrait */
  .regular-hide{display: none;} /* tablets landskape + small laptops */
  .wide-hide{display: none;}    /* laptops */
  .large-hide{display: none;} /* desktops */


  /* small grid */
  .small-col-1-1, .small-col-full, .small-col-set-full .col {width: 100%;}
  .small-col-1-2, .small-col-2-4, .small-col-half, .small-col-set-half .col {width: 50%;}
  .small-col-1-3, .small-col-one-third, .small-col-set-one-third .col {width: 33.333%;}
  .small-col-1-4, .small-col-one-quarter,.small-col-set-one-quarter .col {width: 25%;}
  .small-col-2-3, .small-col-two-thirds  {width: 66.666%;}
  .small-col-3-4,.small-col-three-quarters {width: 75%;}

    #menu-flags img {height: 20px;}

    .loggedbar_buttons_group div {display: inline-block;}

    

}

/* ===== == = === 37.5em (600px) === = == ===== */
/* kindle, smartphones bigger, samsung s3-4, nokia etc (landscape) ----------- */
@media only screen and (min-width: 37.5em) {
  #breakbox {background-color:blue;}

  #content { font-size: 1.15em;}

    /* Display only at certain size */
  .tiny-only{display: none;} /* tiny phones */
  .little-only{display: none;} /* phones iphone portrait */
  .small-only{display: none;} /* phones iphone landskape */
  .compact-only{display: block;}  /* bigger phones landskape */
  .medium-only{display: none;} /* tablets portrait */
  .regular-only{display: none;} /* tablets landskape + small laptops */
  .wide-only{display: none;}    /* laptops */
  .large-only{display: none;} /* desktops */

  /* Hide from certain size and down */
  .tiny-hide{display: block;} /* tiny phones */
  .little-hide{display: block;} /* phones iphone portrait */
  .small-hide{display: block;} /* phones iphone landskape */
  .compact-hide{display: none;}  /* bigger phones landskape */
  .medium-hide{display: none;} /* tablets portrait */
  .regular-hide{display: none;} /* tablets landskape + small laptops */
  .wide-hide{display: none;}    /* laptops */
  .large-hide{display: none;} /* desktops */

  /* compact grid */
  .compact-col-1-1, .compact-col-full, .compact-col-set-full .col {width: 100%;}
  .compact-col-1-2, .compact-col-2-4, .compact-col-half, .compact-col-set-half .col {width: 50%;}
  .compact-col-1-3, .compact-col-one-third, .compact-col-set-one-third .col {width: 33.333%;}
  .compact-col-1-4, .compact-col-one-quarter, .compact-col-set-one-quarter .col {width: 25%;}
  .compact-col-2-3, .compact-col-two-thirds {width: 66.666%;}
  .compact-col-3-4, .compact-col-three-quarters {width: 75%;}

}

/* ===== == = === 48em (768px) === = == ===== */
/* iPads, nexus etc (portrait ) ----------- */
@media only screen and (min-width : 48em) {
  #breakbox {background-color:orange;}

  #social-circles { visibility: visible;}

    /* Display only at certain size */
  .tiny-only{display: none;} /* tiny phones */
  .little-only{display: none;} /* phones iphone portrait */
  .small-only{display: none;} /* phones iphone landskape */
  .compact-only{display: none;}  /* bigger phones landskape */
  .medium-only{display: block;} /* tablets portrait */
  .regular-only{display: none;} /* tablets landskape + small laptops */
  .wide-only{display: none;}    /* laptops */
  .large-only{display: none;} /* desktops */

  /* Hide from certain size and down */
  .tiny-hide{display: block;} /* tiny phones */
  .little-hide{display: block;} /* phones iphone portrait */
  .small-hide{display: block;} /* phones iphone landskape */
  .compact-hide{display: block;}  /* bigger phones landskape */
  .medium-hide{display: none;} /* tablets portrait */
  .regular-hide{display: none;} /* tablets landskape + small laptops */
  .wide-hide{display: none;}    /* laptops */
  .large-hide{display: none;} /* desktops */

  /* medium grid */
  .medium-col-1-1, .medium-col-full, .medium-col-set-full .col {width: 100%;}
  .medium-col-1-2, .medium-col-2-4, .medium-col-half, .medium-col-set-half .col {width: 50%;}
  .medium-col-1-3, .medium-col-one-third,.medium-col-set-one-third .col {width: 33.333%;}
  .medium-col-1-4, .medium-col-one-quarter, .medium-col-set-one-quarter .col {width: 25%;}
  .medium-col-2-3, .medium-col-two-thirds {width: 66.666%;}
  .medium-col-3-4,.medium-col-three-quarters {width: 75%;}

    .footerbox {padding-left: 10%;}


    #cu_page article.col.col-1-1.regular-col-1-3 .whitebox {
  min-height: 370px;
  display: block;
  }

 .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    }


}

/* ===== == = === 56.25em (900px) === = == ===== */
/* iPads (landscape) and small laptops ----------- */
@media only screen and (min-width : 56.25em) {
  #breakbox {background-color:lime;}

    /* Display only at certain size */
  .tiny-only{display: none;} /* tiny phones */
  .little-only{display: none;} /* phones iphone portrait */
  .small-only{display: none;} /* phones iphone landskape */
  .compact-only{display: none;}  /* bigger phones landskape */
  .medium-only{display: none;} /* tablets portrait */
  .regular-only{display: block;} /* tablets landskape + small laptops */
  .wide-only{display: none;}    /* laptops */
  .large-only{display: none;} /* desktops */

  /* Hide from certain size and down */
  .tiny-hide{display: block;} /* tiny phones */
  .little-hide{display: block;} /* phones iphone portrait */
  .small-hide{display: block;} /* phones iphone landskape */
  .compact-hide{display: block;}  /* bigger phones landskape */
  .medium-hide{display: block;} /* tablets portrait */
  .regular-hide{display: none;} /* tablets landskape + small laptops */
  .wide-hide{display: none;}    /* laptops */
  .large-hide{display: none;} /* desktops */

  /* regular grid */
  .regular-col-1-1, .regular-col-full, .regular-col-set-full .col {width: 100%;}
  .regular-col-1-2, .regular-col-half,  .regular-col-set-half .col {width: 50%;}
  .regular-col-1-3, .regular-col-one-third, .regular-col-set-one-third .col {width: 33.333%;}
  .regular-col-1-4, .regular-col-one-quarter, .regular-col-set-one-quarter .col {width: 25%;}
  .regular-col-2-3, .regular-col-two-thirds {width: 66.666%;}
  .regular-col-3-4, .regular-col-three-quarters {width: 75%;} 
  .col .grid .col:first-child {/* padding-right: 7.5px; */}
  .col .grid .col:last-child {/* padding-left: 7.5px;*/ }

    .col .grid .col {
      padding-right: 7.5px; /* migthneed a bit more testing */
    }

   .footerbox {padding-left: 20%;}

   aside.sidebar {margin-top:0px;}

  .regular-wide-show {display:block;}
  .regular-large-show {display:block;}


    .masonry {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    }

}

/* ===== == = === 68.75em (1100px) === = == ===== */
/* Desktops, laptops, bigger tablets----------- */
@media only screen and (min-width : 68.75em) {
  #breakbox {background-color:yellow;}

  #content { font-size: 1.22em;}

    /* Display only at certain size */
  .tiny-only{display: none;} /* tiny phones */
  .little-only{display: none;} /* phones iphone portrait */
  .small-only{display: none;} /* phones iphone landskape */
  .compact-only{display: none;}  /* bigger phones landskape */
  .medium-only{display: none;} /* tablets portrait */
  .regular-only{display: none;} /* tablets landskape + small laptops */
  .wide-only{display: block;}    /* laptops */
  .large-only{display: none;} /* desktops */

  /* Hide from certain size and down */
  .tiny-hide{display: block;} /* tiny phones */
  .little-hide{display: block;} /* phones iphone portrait */
  .small-hide{display: block;} /* phones iphone landskape */
  .compact-hide{display: block;}  /* bigger phones landskape */
  .medium-hide{display: block;} /* tablets portrait */
  .regular-hide{display: block;} /* tablets landskape + small laptops */
  .wide-hide{display: none;}    /* laptops */
  .large-hide{display: none;} /* desktops */

  /* wide grid */
  .wide-col-full, .wide-col-1-1, .wide-col-set-full .col {width: 100%;}
  .wide-col-half, .wide-col-1-2, .wide-col-set-half .col {width: 50%;}
  .wide-col-one-third, .wide-col-1-3, .wide-col-set-one-third .col {width: 33.333%;}
  .wide-col-one-quarter, .wide-col-1-4, .wide-col-set-one-quarter .col {width: 25%;}
  .wide-col-two-thirds, .wide-col-2-3 {width: 66.666%;}
  .wide-col-three-quarters, .wide-col-4-4 {width: 75%;} 

  #social-circles { margin-right: 5%;}

  .regular-large-show {display:block;}
  .large-wide-show {display:block;}

  #cu_page article.col.col-1-1.regular-col-1-3 .whitebox {
  min-height: 320px;
  display: block;
  }

    .masonry {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
    }

  .loggedbar_buttons_group  {
      display: inline-block;
      float: right;
      width:auto;
      max-width: auto;
      min-width: auto;
  }

}


/* ===== == = === 81.25em (1300px) === = == ===== */
/* Large screens ----------- */
@media only screen and (min-width : 81.25em) {
   #breakbox {background-color:gray;}

    /* Display only at certain size */
  .tiny-only{display: none;} /* tiny phones */
  .little-only{display: none;} /* phones iphone portrait */
  .small-only{display: none;} /* phones iphone landskape */
  .compact-only{display: none;}  /* bigger phones landskape */
  .medium-only{display: none;} /* tablets portrait */
  .regular-only{display: none;} /* tablets landskape + small laptops */
  .wide-only{display: none;}    /* laptops */
  .large-only{display: block;} /* desktops */

  /* Hide from certain size and down */
  .tiny-hide{display: block;} /* tiny phones */
  .little-hide{display: block;} /* phones iphone portrait */
  .small-hide{display: block;} /* phones iphone landskape */
  .compact-hide{display: block;}  /* bigger phones landskape */
  .medium-hide{display: block;} /* tablets portrait */
  .regular-hide{display: block;} /* tablets landskape + small laptops */
  .wide-hide{display: block;}    /* laptops */
  .large-hide{display: none;} /* desktops */


  .regular-large-show {display:block;}
  .regular-wide-show {display:none;}
  .large-wide-show {display:block;}

  /* large grid */
  .large-col-full, .large-col-1-1,.large-col-set-full .col {width: 100%;}
  .large-col-half, .large-col-1-2, .large-col-set-half .col {width: 50%;}
  .large-col-one-third, .large-col-1-3, .large-col-set-one-third .col {width: 33.333%;}
  .large-col-one-quarter, .large-col-1-4, .large-col-set-one-quarter .col {width: 25%;}
  .large-col-two-thirds, .large-col-2-3 {width: 66.666%;}
  .large-col-three-quarters, .large-col-4-4 {width: 75%;} 

   .footerbox { padding-left: 30%;}

   .masonry-wrapper {width: 95%;}
}

/* RETINA */
/* iPhone 4 etc ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

}

/********************************************************************************************* 
2.  960px 
*********************************************************************************************/  
@media only screen and (min-width: 960px) and (max-width: 1199px) {
}

/********************************************************************************************* 
3.  720px 
*********************************************************************************************/ 
@media only screen and (min-width: 720px) and (max-width: 959px) {
}
 
/********************************************************************************************* 
4.  lt 720px 
*********************************************************************************************/ 
@media only screen and (max-width: 719px) {
}
/* hide on device */ 
@media (min-width:992px) {
    .desktop-only {display:block !important;}
}
@media (max-width: 991px) {
    .mobile-only {display:block !important;}
    .desktop-only { display:none !important; }
}

/********************************************************************************************* 
    CUSTOM BREAKPOINTS
*********************************************************************************************/ 

/* HEADER */
@media (max-width: 1370px) {
    #headerslogan { font-size: 15px;width: auto; }
    #headerlogo { background-size: 200px; width: 200px;}
}

@media (max-width: 1085px) {
    #headerslogan {
      position: relative;
      float: none;
      margin-top: 35px;
      width: 240px;
      margin-left: auto;
      margin-right: auto;
    }
    #sloganfirst {
      display: block;
      width: 100%;
    }
    #sloganlast {
      display: block;
      width: 100%;
    }
    .topmenutext { font-size: 11px;}
    ul#topmenu a { padding: 23px 18px 23px 15px;}
    ul#topmenu img {
      vertical-align: left;
      margin-right: 10px;
    }

}

@media (max-width: 870px) {
      #headerslogan {
        position: relative;
        float: right;
         margin-left: auto;
         width: auto;
        margin-right: 20px;
      }
      #socialheader {display: none;}
      .topmenutext { visibility: hidden;display: none;}
    ul#topmenu a { padding: 23px auto 23px auto; }

    ul#topmenu img {
      vertical-align: center;
      margin-right: auto;
      margin-left: auto;
    }
}

/* Switch to mobile menu */ 
@media (max-width: 650px) {
    #headerslogan {display: none;}
    #headerlogo{
      clear:both;
      float: none;
      margin-left: auto;
      margin-right: auto;
    }
    #standard-nav {display: none;  }
    #outer-wrapper {width: 100%;}
    #mobile-nav {display: block;}
}   


/*

 full grid system, with 24 cols

*/ 
.fullgrid {
    font-family: Arial; /* fixes issue with font families that can break flex size */
    /* font-size:0;  prevent any chance of extra space 
    letter-spacing: -0.69ex;  prevent any chance of extra space */
    text-rendering: optimizespeed;
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
    -ms-align-content: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    display: flex;
    flex-flow: row wrap;
}
.grid-1, .grid-1-1, .grid-1-2, .grid-1-3, .grid-2-3, .grid-1-4, .grid-3-4, .grid-1-5, .grid-2-5, .grid-3-5, .grid-4-5, .grid-5-5, .grid-1-6, .grid-5-6, .grid-1-8, .grid-3-8, .grid-5-8, .grid-7-8, .grid-1-12, .grid-5-12, .grid-7-12, .grid-11-12, .grid-1-24, .grid-2-24, .grid-3-24, .grid-4-24, .grid-5-24, .grid-6-24, .grid-7-24, .grid-8-24, .grid-9-24, .grid-10-24, .grid-11-24, .grid-12-24, .grid-13-24, .grid-14-24, .grid-15-24, .grid-16-24, .grid-17-24, .grid-18-24, .grid-19-24, .grid-20-24, .grid-21-24, .grid-22-24, .grid-23-24, .grid-24-24 {
  display: inline-block;
  zoom: 1;
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
  font-size:1em;
}


.grid-1,
.grid-1-1,
.grid-1-2,
.grid-1-3,
.grid-2-3,
.grid-1-4,
.grid-3-4,
.grid-1-5,
.grid-2-5,
.grid-3-5,
.grid-4-5,
.grid-5-5,
.grid-1-6,
.grid-5-6,
.grid-1-8,
.grid-3-8,
.grid-5-8,
.grid-7-8,
.grid-1-12,
.grid-5-12,
.grid-7-12,
.grid-11-12,
.grid-1-24,
.grid-2-24,
.grid-3-24,
.grid-4-24,
.grid-5-24,
.grid-6-24,
.grid-7-24,
.grid-8-24,
.grid-9-24,
.grid-10-24,
.grid-11-24,
.grid-12-24,
.grid-13-24,
.grid-14-24,
.grid-15-24,
.grid-16-24,
.grid-17-24,
.grid-18-24,
.grid-19-24,
.grid-20-24,
.grid-21-24,
.grid-22-24,
.grid-23-24,
.grid-24-24 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto
}
.grid-1-24 {
    width: 4.1667%;
    *width: 4.1357%
}
.grid-1-12,
.grid-2-24 {
    width: 8.3333%;
    *width: 8.3023%
}
.grid-1-8,
.grid-3-24 {
    width: 12.5%;
    *width: 12.469%
}
.grid-1-6,
.grid-4-24 {
    width: 16.6667%;
    *width: 16.6357%
}
.grid-1-5 {
    width: 20%;
    *width: 19.969%
}
.grid-5-24 {
    width: 20.8333%;
    *width: 20.8023%
}
.grid-1-4,
.grid-6-24 {
    width: 25%;
    *width: 24.969%
}
.grid-7-24 {
    width: 29.1667%;
    *width: 29.1357%
}
.grid-1-3,
.grid-8-24 {
    width: 33.3333%;
    *width: 33.3023%
}
.grid-3-8,
.grid-9-24 {
    width: 37.5%;
    *width: 37.469%
}
.grid-2-5 {
    width: 40%;
    *width: 39.969%
}
.grid-5-12,
.grid-10-24 {
    width: 41.6667%;
    *width: 41.6357%
}
.grid-11-24 {
    width: 45.8333%;
    *width: 45.8023%
}
.grid-1-2,
.grid-12-24 {
    width: 50%;
    *width: 49.969%
}
.grid-13-24 {
    width: 54.1667%;
    *width: 54.1357%
}
.grid-7-12,
.grid-14-24 {
    width: 58.3333%;
    *width: 58.3023%
}
.grid-3-5 {
    width: 60%;
    *width: 59.969%
}
.grid-5-8,
.grid-15-24 {
    width: 62.5%;
    *width: 62.469%
}
.grid-2-3,
.grid-16-24 {
    width: 66.6667%;
    *width: 66.6357%
}
.grid-17-24 {
    width: 70.8333%;
    *width: 70.8023%
}
.grid-3-4,
.grid-18-24 {
    width: 75%;
    *width: 74.969%
}
.grid-19-24 {
    width: 79.1667%;
    *width: 79.1357%
}
.grid-4-5 {
    width: 80%;
    *width: 79.969%
}
.grid-5-6,
.grid-20-24 {
    width: 83.3333%;
    *width: 83.3023%
}
.grid-7-8,
.grid-21-24 {
    width: 87.5%;
    *width: 87.469%
}
.grid-11-12,
.grid-22-24 {
    width: 91.6667%;
    *width: 91.6357%
}
.grid-23-24 {
    width: 95.8333%;
    *width: 95.8023%
}
.grid-1,
.grid-1-1,
.grid-5-5,
.grid-24-24 {
    width: 100%
}


@media screen and (min-width: 35.5em) {
    .grid-small-1,
    .grid-small-1-1,
    .grid-small-1-2,
    .grid-small-1-3,
    .grid-small-2-3,
    .grid-small-1-4,
    .grid-small-3-4,
    .grid-small-1-5,
    .grid-small-2-5,
    .grid-small-3-5,
    .grid-small-4-5,
    .grid-small-5-5,
    .grid-small-1-6,
    .grid-small-5-6,
    .grid-small-1-8,
    .grid-small-3-8,
    .grid-small-5-8,
    .grid-small-7-8,
    .grid-small-1-12,
    .grid-small-5-12,
    .grid-small-7-12,
    .grid-small-11-12,
    .grid-small-1-24,
    .grid-small-2-24,
    .grid-small-3-24,
    .grid-small-4-24,
    .grid-small-5-24,
    .grid-small-6-24,
    .grid-small-7-24,
    .grid-small-8-24,
    .grid-small-9-24,
    .grid-small-10-24,
    .grid-small-11-24,
    .grid-small-12-24,
    .grid-small-13-24,
    .grid-small-14-24,
    .grid-small-15-24,
    .grid-small-16-24,
    .grid-small-17-24,
    .grid-small-18-24,
    .grid-small-19-24,
    .grid-small-20-24,
    .grid-small-21-24,
    .grid-small-22-24,
    .grid-small-23-24,
    .grid-small-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto
    }
    .grid-small-1-24 {
        width: 4.1667%;
        *width: 4.1357%
    }
    .grid-small-1-12,
    .grid-small-2-24 {
        width: 8.3333%;
        *width: 8.3023%
    }
    .grid-small-1-8,
    .grid-small-3-24 {
        width: 12.5%;
        *width: 12.469%
    }
    .grid-small-1-6,
    .grid-small-4-24 {
        width: 16.6667%;
        *width: 16.6357%
    }
    .grid-small-1-5 {
        width: 20%;
        *width: 19.969%
    }
    .grid-small-5-24 {
        width: 20.8333%;
        *width: 20.8023%
    }
    .grid-small-1-4,
    .grid-small-6-24 {
        width: 25%;
        *width: 24.969%
    }
    .grid-small-7-24 {
        width: 29.1667%;
        *width: 29.1357%
    }
    .grid-small-1-3,
    .grid-small-8-24 {
        width: 33.3333%;
        *width: 33.3023%
    }
    .grid-small-3-8,
    .grid-small-9-24 {
        width: 37.5%;
        *width: 37.469%
    }
    .grid-small-2-5 {
        width: 40%;
        *width: 39.969%
    }
    .grid-small-5-12,
    .grid-small-10-24 {
        width: 41.6667%;
        *width: 41.6357%
    }
    .grid-small-11-24 {
        width: 45.8333%;
        *width: 45.8023%
    }
    .grid-small-1-2,
    .grid-small-12-24 {
        width: 50%;
        *width: 49.969%
    }
    .grid-small-13-24 {
        width: 54.1667%;
        *width: 54.1357%
    }
    .grid-small-7-12,
    .grid-small-14-24 {
        width: 58.3333%;
        *width: 58.3023%
    }
    .grid-small-3-5 {
        width: 60%;
        *width: 59.969%
    }
    .grid-small-5-8,
    .grid-small-15-24 {
        width: 62.5%;
        *width: 62.469%
    }
    .grid-small-2-3,
    .grid-small-16-24 {
        width: 66.6667%;
        *width: 66.6357%
    }
    .grid-small-17-24 {
        width: 70.8333%;
        *width: 70.8023%
    }
    .grid-small-3-4,
    .grid-small-18-24 {
        width: 75%;
        *width: 74.969%
    }
    .grid-small-19-24 {
        width: 79.1667%;
        *width: 79.1357%
    }
    .grid-small-4-5 {
        width: 80%;
        *width: 79.969%
    }
    .grid-small-5-6,
    .grid-small-20-24 {
        width: 83.3333%;
        *width: 83.3023%
    }
    .grid-small-7-8,
    .grid-small-21-24 {
        width: 87.5%;
        *width: 87.469%
    }
    .grid-small-11-12,
    .grid-small-22-24 {
        width: 91.6667%;
        *width: 91.6357%
    }
    .grid-small-23-24 {
        width: 95.8333%;
        *width: 95.8023%
    }
    .grid-small-1,
    .grid-small-1-1,
    .grid-small-5-5,
    .grid-small-24-24 {
        width: 100%
    }
}
@media screen and (min-width: 48em) {
    .grid-medium-1,
    .grid-medium-1-1,
    .grid-medium-1-2,
    .grid-medium-1-3,
    .grid-medium-2-3,
    .grid-medium-1-4,
    .grid-medium-3-4,
    .grid-medium-1-5,
    .grid-medium-2-5,
    .grid-medium-3-5,
    .grid-medium-4-5,
    .grid-medium-5-5,
    .grid-medium-1-6,
    .grid-medium-5-6,
    .grid-medium-1-8,
    .grid-medium-3-8,
    .grid-medium-5-8,
    .grid-medium-7-8,
    .grid-medium-1-12,
    .grid-medium-5-12,
    .grid-medium-7-12,
    .grid-medium-11-12,
    .grid-medium-1-24,
    .grid-medium-2-24,
    .grid-medium-3-24,
    .grid-medium-4-24,
    .grid-medium-5-24,
    .grid-medium-6-24,
    .grid-medium-7-24,
    .grid-medium-8-24,
    .grid-medium-9-24,
    .grid-medium-10-24,
    .grid-medium-11-24,
    .grid-medium-12-24,
    .grid-medium-13-24,
    .grid-medium-14-24,
    .grid-medium-15-24,
    .grid-medium-16-24,
    .grid-medium-17-24,
    .grid-medium-18-24,
    .grid-medium-19-24,
    .grid-medium-20-24,
    .grid-medium-21-24,
    .grid-medium-22-24,
    .grid-medium-23-24,
    .grid-medium-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto
    }
    .grid-medium-1-24 {
        width: 4.1667%;
        *width: 4.1357%
    }
    .grid-medium-1-12,
    .grid-medium-2-24 {
        width: 8.3333%;
        *width: 8.3023%
    }
    .grid-medium-1-8,
    .grid-medium-3-24 {
        width: 12.5%;
        *width: 12.469%
    }
    .grid-medium-1-6,
    .grid-medium-4-24 {
        width: 16.6667%;
        *width: 16.6357%
    }
    .grid-medium-1-5 {
        width: 20%;
        *width: 19.969%
    }
    .grid-medium-5-24 {
        width: 20.8333%;
        *width: 20.8023%
    }
    .grid-medium-1-4,
    .grid-medium-6-24 {
        width: 25%;
        *width: 24.969%
    }
    .grid-medium-7-24 {
        width: 29.1667%;
        *width: 29.1357%
    }
    .grid-medium-1-3,
    .grid-medium-8-24 {
        width: 33.3333%;
        *width: 33.3023%
    }
    .grid-medium-3-8,
    .grid-medium-9-24 {
        width: 37.5%;
        *width: 37.469%
    }
    .grid-medium-2-5 {
        width: 40%;
        *width: 39.969%
    }
    .grid-medium-5-12,
    .grid-medium-10-24 {
        width: 41.6667%;
        *width: 41.6357%
    }
    .grid-medium-11-24 {
        width: 45.8333%;
        *width: 45.8023%
    }
    .grid-medium-1-2,
    .grid-medium-12-24 {
        width: 50%;
        *width: 49.969%
    }
    .grid-medium-13-24 {
        width: 54.1667%;
        *width: 54.1357%
    }
    .grid-medium-7-12,
    .grid-medium-14-24 {
        width: 58.3333%;
        *width: 58.3023%
    }
    .grid-medium-3-5 {
        width: 60%;
        *width: 59.969%
    }
    .grid-medium-5-8,
    .grid-medium-15-24 {
        width: 62.5%;
        *width: 62.469%
    }
    .grid-medium-2-3,
    .grid-medium-16-24 {
        width: 66.6667%;
        *width: 66.6357%
    }
    .grid-medium-17-24 {
        width: 70.8333%;
        *width: 70.8023%
    }
    .grid-medium-3-4,
    .grid-medium-18-24 {
        width: 75%;
        *width: 74.969%
    }
    .grid-medium-19-24 {
        width: 79.1667%;
        *width: 79.1357%
    }
    .grid-medium-4-5 {
        width: 80%;
        *width: 79.969%
    }
    .grid-medium-5-6,
    .grid-medium-20-24 {
        width: 83.3333%;
        *width: 83.3023%
    }
    .grid-medium-7-8,
    .grid-medium-21-24 {
        width: 87.5%;
        *width: 87.469%
    }
    .grid-medium-11-12,
    .grid-medium-22-24 {
        width: 91.6667%;
        *width: 91.6357%
    }
    .grid-medium-23-24 {
        width: 95.8333%;
        *width: 95.8023%
    }
    .grid-medium-1,
    .grid-medium-1-1,
    .grid-medium-5-5,
    .grid-medium-24-24 {
        width: 100%
    }
}
@media screen and (min-width: 64em) {
    .grid-large-1,
    .grid-large-1-1,
    .grid-large-1-2,
    .grid-large-1-3,
    .grid-large-2-3,
    .grid-large-1-4,
    .grid-large-3-4,
    .grid-large-1-5,
    .grid-large-2-5,
    .grid-large-3-5,
    .grid-large-4-5,
    .grid-large-5-5,
    .grid-large-1-6,
    .grid-large-5-6,
    .grid-large-1-8,
    .grid-large-3-8,
    .grid-large-5-8,
    .grid-large-7-8,
    .grid-large-1-12,
    .grid-large-5-12,
    .grid-large-7-12,
    .grid-large-11-12,
    .grid-large-1-24,
    .grid-large-2-24,
    .grid-large-3-24,
    .grid-large-4-24,
    .grid-large-5-24,
    .grid-large-6-24,
    .grid-large-7-24,
    .grid-large-8-24,
    .grid-large-9-24,
    .grid-large-10-24,
    .grid-large-11-24,
    .grid-large-12-24,
    .grid-large-13-24,
    .grid-large-14-24,
    .grid-large-15-24,
    .grid-large-16-24,
    .grid-large-17-24,
    .grid-large-18-24,
    .grid-large-19-24,
    .grid-large-20-24,
    .grid-large-21-24,
    .grid-large-22-24,
    .grid-large-23-24,
    .grid-large-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto
    }
    .grid-large-1-24 {
        width: 4.1667%;
        *width: 4.1357%
    }
    .grid-large-1-12,
    .grid-large-2-24 {
        width: 8.3333%;
        *width: 8.3023%
    }
    .grid-large-1-8,
    .grid-large-3-24 {
        width: 12.5%;
        *width: 12.469%
    }
    .grid-large-1-6,
    .grid-large-4-24 {
        width: 16.6667%;
        *width: 16.6357%
    }
    .grid-large-1-5 {
        width: 20%;
        *width: 19.969%
    }
    .grid-large-5-24 {
        width: 20.8333%;
        *width: 20.8023%
    }
    .grid-large-1-4,
    .grid-large-6-24 {
        width: 25%;
        *width: 24.969%
    }
    .grid-large-7-24 {
        width: 29.1667%;
        *width: 29.1357%
    }
    .grid-large-1-3,
    .grid-large-8-24 {
        width: 33.3333%;
        *width: 33.3023%
    }
    .grid-large-3-8,
    .grid-large-9-24 {
        width: 37.5%;
        *width: 37.469%
    }
    .grid-large-2-5 {
        width: 40%;
        *width: 39.969%
    }
    .grid-large-5-12,
    .grid-large-10-24 {
        width: 41.6667%;
        *width: 41.6357%
    }
    .grid-large-11-24 {
        width: 45.8333%;
        *width: 45.8023%
    }
    .grid-large-1-2,
    .grid-large-12-24 {
        width: 50%;
        *width: 49.969%
    }
    .grid-large-13-24 {
        width: 54.1667%;
        *width: 54.1357%
    }
    .grid-large-7-12,
    .grid-large-14-24 {
        width: 58.3333%;
        *width: 58.3023%
    }
    .grid-large-3-5 {
        width: 60%;
        *width: 59.969%
    }
    .grid-large-5-8,
    .grid-large-15-24 {
        width: 62.5%;
        *width: 62.469%
    }
    .grid-large-2-3,
    .grid-large-16-24 {
        width: 66.6667%;
        *width: 66.6357%
    }
    .grid-large-17-24 {
        width: 70.8333%;
        *width: 70.8023%
    }
    .grid-large-3-4,
    .grid-large-18-24 {
        width: 75%;
        *width: 74.969%
    }
    .grid-large-19-24 {
        width: 79.1667%;
        *width: 79.1357%
    }
    .grid-large-4-5 {
        width: 80%;
        *width: 79.969%
    }
    .grid-large-5-6,
    .grid-large-20-24 {
        width: 83.3333%;
        *width: 83.3023%
    }
    .grid-large-7-8,
    .grid-large-21-24 {
        width: 87.5%;
        *width: 87.469%
    }
    .grid-large-11-12,
    .grid-large-22-24 {
        width: 91.6667%;
        *width: 91.6357%
    }
    .grid-large-23-24 {
        width: 95.8333%;
        *width: 95.8023%
    }
    .grid-large-1,
    .grid-large-1-1,
    .grid-large-5-5,
    .grid-large-24-24 {
        width: 100%
    }
}
@media screen and (min-width: 80em) {
    .grid-wide-1,
    .grid-wide-1-1,
    .grid-wide-1-2,
    .grid-wide-1-3,
    .grid-wide-2-3,
    .grid-wide-1-4,
    .grid-wide-3-4,
    .grid-wide-1-5,
    .grid-wide-2-5,
    .grid-wide-3-5,
    .grid-wide-4-5,
    .grid-wide-5-5,
    .grid-wide-1-6,
    .grid-wide-5-6,
    .grid-wide-1-8,
    .grid-wide-3-8,
    .grid-wide-5-8,
    .grid-wide-7-8,
    .grid-wide-1-12,
    .grid-wide-5-12,
    .grid-wide-7-12,
    .grid-wide-11-12,
    .grid-wide-1-24,
    .grid-wide-2-24,
    .grid-wide-3-24,
    .grid-wide-4-24,
    .grid-wide-5-24,
    .grid-wide-6-24,
    .grid-wide-7-24,
    .grid-wide-8-24,
    .grid-wide-9-24,
    .grid-wide-10-24,
    .grid-wide-11-24,
    .grid-wide-12-24,
    .grid-wide-13-24,
    .grid-wide-14-24,
    .grid-wide-15-24,
    .grid-wide-16-24,
    .grid-wide-17-24,
    .grid-wide-18-24,
    .grid-wide-19-24,
    .grid-wide-20-24,
    .grid-wide-21-24,
    .grid-wide-22-24,
    .grid-wide-23-24,
    .grid-wide-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto
    }
    .grid-wide-1-24 {
        width: 4.1667%;
        *width: 4.1357%
    }
    .grid-wide-1-12,
    .grid-wide-2-24 {
        width: 8.3333%;
        *width: 8.3023%
    }
    .grid-wide-1-8,
    .grid-wide-3-24 {
        width: 12.5%;
        *width: 12.469%
    }
    .grid-wide-1-6,
    .grid-wide-4-24 {
        width: 16.6667%;
        *width: 16.6357%
    }
    .grid-wide-1-5 {
        width: 20%;
        *width: 19.969%
    }
    .grid-wide-5-24 {
        width: 20.8333%;
        *width: 20.8023%
    }
    .grid-wide-1-4,
    .grid-wide-6-24 {
        width: 25%;
        *width: 24.969%
    }
    .grid-wide-7-24 {
        width: 29.1667%;
        *width: 29.1357%
    }
    .grid-wide-1-3,
    .grid-wide-8-24 {
        width: 33.3333%;
        *width: 33.3023%
    }
    .grid-wide-3-8,
    .grid-wide-9-24 {
        width: 37.5%;
        *width: 37.469%
    }
    .grid-wide-2-5 {
        width: 40%;
        *width: 39.969%
    }
    .grid-wide-5-12,
    .grid-wide-10-24 {
        width: 41.6667%;
        *width: 41.6357%
    }
    .grid-wide-11-24 {
        width: 45.8333%;
        *width: 45.8023%
    }
    .grid-wide-1-2,
    .grid-wide-12-24 {
        width: 50%;
        *width: 49.969%
    }
    .grid-wide-13-24 {
        width: 54.1667%;
        *width: 54.1357%
    }
    .grid-wide-7-12,
    .grid-wide-14-24 {
        width: 58.3333%;
        *width: 58.3023%
    }
    .grid-wide-3-5 {
        width: 60%;
        *width: 59.969%
    }
    .grid-wide-5-8,
    .grid-wide-15-24 {
        width: 62.5%;
        *width: 62.469%
    }
    .grid-wide-2-3,
    .grid-wide-16-24 {
        width: 66.6667%;
        *width: 66.6357%
    }
    .grid-wide-17-24 {
        width: 70.8333%;
        *width: 70.8023%
    }
    .grid-wide-3-4,
    .grid-wide-18-24 {
        width: 75%;
        *width: 74.969%
    }
    .grid-wide-19-24 {
        width: 79.1667%;
        *width: 79.1357%
    }
    .grid-wide-4-5 {
        width: 80%;
        *width: 79.969%
    }
    .grid-wide-5-6,
    .grid-wide-20-24 {
        width: 83.3333%;
        *width: 83.3023%
    }
    .grid-wide-7-8,
    .grid-wide-21-24 {
        width: 87.5%;
        *width: 87.469%
    }
    .grid-wide-11-12,
    .grid-wide-22-24 {
        width: 91.6667%;
        *width: 91.6357%
    }
    .grid-wide-23-24 {
        width: 95.8333%;
        *width: 95.8023%
    }
    .grid-wide-1,
    .grid-wide-1-1,
    .grid-wide-5-5,
    .grid-wide-24-24 {
        width: 100%
    }
}