/*
*
* Cute Grids v1.0.1
* Copyright 2014 Darren Newberry
* http://www.cutegrids.com
* Free to use under the MIT Licence
* http://www.opensource.org/licenses/mit-license.php
*
*/

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box
}
.row {
  width: 100%;
  max-width:68rem; /* max Width of row, Change to what you like */
  margin:0 auto;
}
.row .row {
  margin-left: -0.9rem; /* minus left gutter for nested rows */
  margin-right: -0.9rem; /* minus Right gutter for nested rows */
  width: auto;
}
[class*='col-'] {
  float: left;
  position: relative;
  padding: 0.9rem; /* top, bottom, left and right padding for columns */
  width:100%;
}
/* Remove this if you want the columns to float left when they overflow the row */
[class*='col-']:last-of-type {
  float: right;
}

@media only screen and (max-width: 48em){
.row .row {
  margin-left: -0.5rem; /* minus left gutter for nested rows */
  margin-right: -0.5rem; /* minus Right gutter for nested rows */
  width: auto;
}
[class*='col-'] {
  float: left;
  position: relative;
  padding: 0.5rem; /* top, bottom, left and right padding for columns */
  width:100%;
}
}

/* Clearfix */
.row:after, .group:after, .clearfix:after {
  content: "";
  display: table;
  clear: both
}
.container:before,
.container:after {
  display: table;
  content: " ";
}
.container:after {
  clear: both;
}
.left {
  float: left !important;
}
.right {
  float: right !important;
}
/* Grid classes for phone screen widths  */
@media only screen {
  .col-1-phone { width: 8.3333333333333%; }
  .col-2-phone { width: 16.666666666667%; }
  .col-3-phone { width: 25%; }
  .col-4-phone { width: 33.333333333333%; }
  .col-5-phone { width: 41.666666666667%; }
  .col-6-phone { width: 50%; }
  .col-7-phone { width: 58.333333333333%; }
  .col-8-phone { width: 66.666666666667%; }
  .col-9-phone { width: 75%; }
  .col-10-phone { width: 83.333333333333%; }
  .col-11-phone { width: 91.666666666667%; }
  .col-12-phone { width: 100%; }
  /* offset for phone size */
  .col-0-phone-offset { margin: 0; }
  .col-1-phone-offset { margin-left: 8.3333333333333%; }
  .col-2-phone-offset { margin-left: 16.666666666667%; }
  .col-3-phone-offset { margin-left: 25%; }
  .col-4-phone-offset { margin-left: 33.333333333333%; }
  .col-5-phone-offset { margin-left: 41.666666666667%; }
  .col-6-phone-offset { margin-left: 50%; }
  .col-7-phone-offset { margin-left: 58.333333333333%; }
  .col-8-phone-offset { margin-left: 66.666666666667%; }
  .col-9-phone-offset { margin-left: 75%; }
  .col-10-phone-offset { margin-left: 83.333333333333%; }
  .col-11-phone-offset { margin-left: 91.666666666667%; }

  .col-1-phone-push { left: 8.3333333333333%; }
  .col-2-phone-push { left: 16.666666666667%; }
  .col-3-phone-push { left: 25%; }
  .col-4-phone-push { left: 33.333333333333%; }
  .col-5-phone-push { left: 41.666666666667%; }
  .col-6-phone-push { left: 50%; }
  .col-7-phone-push { left: 58.333333333333%; }
  .col-8-phone-push { left: 66.666666666667%; }
  .col-9-phone-push { left: 75%; }
  .col-10-phone-push { left: 83.333333333333%; }
  .col-11-phone-push { left: 91.666666666667%; }

  .col-1-phone-pull { right: 8.3333333333333%; }
  .col-2-phone-pull { right: 16.666666666667%; }
  .col-3-phone-pull { right: 25%; }
  .col-4-phone-pull { right: 33.333333333333%; }
  .col-5-phone-pull { right: 41.666666666667%; }
  .col-6-phone-pull { right: 50%; }
  .col-7-phone-pull { right: 58.333333333333%; }
  .col-8-phone-pull { right: 66.666666666667%; }
  .col-9-phone-pull { right: 75%; }
  .col-10-phone-pull { right: 83.333333333333%; }
  .col-11-phone-pull { right: 91.666666666667%; }

  .center-phone {
    margin-left: auto;
    margin-right:auto;
    float:none !important;
  }
  .uncenter-phone {
    margin-left: 0;
    margin-right: 0;
    float:left !important;
  }
  .uncenter-phone.right {
    float:right !important;
  }

  [class*='col-'].phone-reset {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }
}
/* Grid classes for tablet screen widths  */
@media only screen and (min-width: 48em) {
  .col-1-tablet { width: 8.3333333333333%; }
  .col-2-tablet { width: 16.666666666667%; }
  .col-3-tablet { width: 25%; }
  .col-4-tablet { width: 33.333333333333%; }
  .col-5-tablet { width: 41.666666666667%; }
  .col-6-tablet { width: 50%; }
  .col-7-tablet { width: 58.333333333333%; }
  .col-8-tablet { width: 66.666666666667%; }
  .col-9-tablet { width: 75%; }
  .col-10-tablet { width: 83.333333333333%; }
  .col-11-tablet { width: 91.666666666667%; }
  .col-12-tablet { width: 100%; }
    /* offset for tablet screen widths */
  .col-0-tablet-offset { margin: 0; }
  .col-1-tablet-offset { margin-left: 8.3333333333333%; }
  .col-2-tablet-offset { margin-left: 16.666666666667%; }
  .col-3-tablet-offset { margin-left: 25%; }
  .col-4-tablet-offset { margin-left: 33.333333333333%; }
  .col-5-tablet-offset { margin-left: 41.666666666667%; }
  .col-6-tablet-offset { margin-left: 50%; }
  .col-7-tablet-offset { margin-left: 58.333333333333%; }
  .col-8-tablet-offset { margin-left: 66.666666666667%; }
  .col-9-tablet-offset { margin-left: 75%; }
  .col-10-tablet-offset { margin-left: 83.333333333333%; }
  .col-11-tablet-offset { margin-left: 91.666666666667%; }

  .col-1-tablet-push { left: 8.3333333333333%; }
  .col-2-tablet-push { left: 16.666666666667%; }
  .col-3-tablet-push { left: 25%; }
  .col-4-tablet-push { left: 33.333333333333%; }
  .col-5-tablet-push { left: 41.666666666667%; }
  .col-6-tablet-push { left: 50%; }
  .col-7-tablet-push { left: 58.333333333333%; }
  .col-8-tablet-push { left: 66.666666666667%; }
  .col-9-tablet-push { left: 75%; }
  .col-10-tablet-push { left: 83.333333333333%; }
  .col-11-tablet-push { left: 91.666666666667%; }

  .col-1-tablet-pull { right: 8.3333333333333%; }
  .col-2-tablet-pull { right: 16.666666666667%; }
  .col-3-tablet-pull { right: 25%; }
  .col-4-tablet-pull { right: 33.333333333333%; }
  .col-5-tablet-pull { right: 41.666666666667%; }
  .col-6-tablet-pull { right: 50%; }
  .col-7-tablet-pull { right: 58.333333333333%; }
  .col-8-tablet-pull { right: 66.666666666667%; }
  .col-9-tablet-pull { right: 75%; }
  .col-10-tablet-pull { right: 83.333333333333%; }
  .col-11-tablet-pull { right: 91.666666666667%; }

  .center-tablet {
    margin-left: auto;
    margin-right:auto;
    float:none !important;
  }
  .uncenter-tablet {
    margin-left: 0;
    margin-right: 0;
    float:left !important;
  }
  .uncenter-tablet.right {
    float:right !important;
  }

  [class*='col-'].tablet-reset {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }
}
/* Grid classes for wide Tablet / Laptop to Small Desktop Size */

@media only screen and (min-width: 62em) {
  .col-1-laptop { width: 8.3333333333333%; }
  .col-2-laptop { width: 16.666666666667%; }
  .col-3-laptop { width: 25%; }
  .col-4-laptop { width: 33.333333333333%; }
  .col-5-laptop { width: 41.666666666667%; }
  .col-6-laptop { width: 50%; }
  .col-7-laptop { width: 58.333333333333%; }
  .col-8-laptop { width: 66.666666666667%; }
  .col-9-laptop { width: 75%; }
  .col-10-laptop { width: 83.333333333333%; }
  .col-11-laptop { width: 91.666666666667%; }
  .col-12-laptop { width: 100%; }
  /* offset for tablet laptop widths */
  .col-0-laptop-offset { margin: 0; }
  .col-1-laptop-offset { margin-left: 8.3333333333333%; }
  .col-2-laptop-offset { margin-left: 16.666666666667%; }
  .col-3-laptop-offset { margin-left: 25%; }
  .col-4-laptop-offset { margin-left: 33.333333333333%; }
  .col-5-laptop-offset { margin-left: 41.666666666667%; }
  .col-6-laptop-offset { margin-left: 50%; }
  .col-7-laptop-offset { margin-left: 58.333333333333%; }
  .col-8-laptop-offset { margin-left: 66.666666666667%; }
  .col-9-laptop-offset { margin-left: 75%; }
  .col-10-laptop-offset { margin-left: 83.333333333333%; }
  .col-11-laptop-offset { margin-left: 91.666666666667%; }

  .col-1-laptop-push { left: 8.3333333333333%; }
  .col-2-laptop-push { left: 16.666666666667%; }
  .col-3-laptop-push { left: 25%; }
  .col-4-laptop-push { left: 33.333333333333%; }
  .col-5-laptop-push { left: 41.666666666667%; }
  .col-6-laptop-push { left: 50%; }
  .col-7-laptop-push { left: 58.333333333333%; }
  .col-8-laptop-push { left: 66.666666666667%; }
  .col-9-laptop-push { left: 75%; }
  .col-10-laptop-push { left: 83.333333333333%; }
  .col-11-laptop-push { left: 91.666666666667%; }

  .col-1-laptop-pull { right: 8.3333333333333%; }
  .col-2-laptop-pull { right: 16.666666666667%; }
  .col-3-laptop-pull { right: 25%; }
  .col-4-laptop-pull { right: 33.333333333333%; }
  .col-5-laptop-pull { right: 41.666666666667%; }
  .col-6-laptop-pull { right: 50%; }
  .col-7-laptop-pull { right: 58.333333333333%; }
  .col-8-laptop-pull { right: 66.666666666667%; }
  .col-9-laptop-pull { right: 75%; }
  .col-10-laptop-pull { right: 83.333333333333%; }
  .col-11-laptop-pull { right: 91.666666666667%; }

  .center-laptop {
    margin-left: auto;
    margin-right:auto;
    float:none !important;
  }
  .uncenter-laptop {
    margin-left: 0;
    margin-right: 0;
    float:left !important;
  }
  .uncenter-laptop.right {
    float:right !important;
  }

  [class*='col-'].laptop-reset {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }
}

/* Grid Classes for Large Desktop Size */
.show-desktop { display: none; }
@media only screen and (min-width: 75em) {
  .col-1-desktop { width: 8.3333333333333%; }
  .col-2-desktop { width: 16.666666666667%; }
  .col-3-desktop { width: 25%; }
  .col-4-desktop { width: 33.333333333333%; }
  .col-5-desktop { width: 41.666666666667%; }
  .col-6-desktop { width: 50%; }
  .col-7-desktop { width: 58.333333333333%; }
  .col-8-desktop { width: 66.666666666667%; }
  .col-9-desktop { width: 75%; }
  .col-10-desktop { width: 83.333333333333%; }
  .col-11-desktop { width: 91.666666666667%; }
  .col-12-desktop { width: 100%; }
  /* offset for tablet laptop widths */
  .col-0-desktop-offset { margin: 0; }
  .col-1-desktop-offset { margin-left: 8.3333333333333%; }
  .col-2-desktop-offset { margin-left: 16.666666666667%; }
  .col-3-desktop-offset { margin-left: 25%; }
  .col-4-desktop-offset { margin-left: 33.333333333333%; }
  .col-5-desktop-offset { margin-left: 41.666666666667%; }
  .col-6-desktop-offset { margin-left: 50%; }
  .col-7-desktop-offset { margin-left: 58.333333333333%; }
  .col-8-desktop-offset { margin-left: 66.666666666667%; }
  .col-9-desktop-offset { margin-left: 75%; }
  .col-10-desktop-offset { margin-left: 83.333333333333%; }
  .col-11-desktop-offset { margin-left: 91.666666666667%; }

  .col-1-desktop-push { left: 8.3333333333333%; }
  .col-2-desktop-push { left: 16.666666666667%; }
  .col-3-desktop-push { left: 25%; }
  .col-4-desktop-push { left: 33.333333333333%; }
  .col-5-desktop-push { left: 41.666666666667%; }
  .col-6-desktop-push { left: 50%; }
  .col-7-desktop-push { left: 58.333333333333%; }
  .col-8-desktop-push { left: 66.666666666667%; }
  .col-9-desktop-push { left: 75%; }
  .col-10-desktop-push { left: 83.333333333333%; }
  .col-11-desktop-push { left: 91.666666666667%; }

  .col-1-desktop-pull { right: 8.3333333333333%; }
  .col-2-desktop-pull { right: 16.666666666667%; }
  .col-3-desktop-pull { right: 25%; }
  .col-4-desktop-pull { right: 33.333333333333%; }
  .col-5-desktop-pull { right: 41.666666666667%; }
  .col-6-desktop-pull { right: 50%; }
  .col-7-desktop-pull { right: 58.333333333333%; }
  .col-8-desktop-pull { right: 66.666666666667%; }
  .col-9-desktop-pull { right: 75%; }
  .col-10-desktop-pull { right: 83.333333333333%; }
  .col-11-desktop-pull { right: 91.666666666667%; }

  .center-desktop {
    margin-left: auto;
    margin-right:auto;
    float:none !important;
  }
  .uncenter-desktop {
    margin-left: 0;
    margin-right: 0;
    float:left !important;
  }
  .uncenter-desktop.right {
    float:right !important;
  }

  [class*='col-'].desktop-reset {
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    float: left; }
}

@media only screen and (max-width: 30em){
    .col-100 { width:100%;}
}

/* Make visible or hidden block elements */
  .show-phone, .show-tablet, .show-laptop, .show-desktop { display: none !important; }
  .hide-phone { display: block !important; }

@media only screen and (max-width: 47.938em) {
  .phone { width: 100%; }
  .hide-phone { display:none !important; }
  .show-phone { display: block !important; }
}
 
@media only screen and (min-width: 48em) and (max-width: 61.938em) { 
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}
  
@media only screen and (min-width: 62em) and (max-width: 74.938em) { 
  .hide-laptop { display: none !important; }
  .show-laptop { display: block !important; }
}

@media only screen and (min-width: 75em) { 
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; } 
}

.responsive-img {
    display: block;
    height: auto;
    max-width: 100%;
    text-align: center;
}

/* Optional Extras */

/* something to keep tables horizontal with scroll when on small screen 
*  Useful if table is wide. Set media query to point where table needs it
*/ 
/*
@media only screen and (max-width: 47.938em) {
  .table-respond {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
}
*/