/*  ---------------------------------------

    GRID

---------------------------------------- */

/*
    Responsive CSS Framework
    Copyright © 2012 Aline Keller - www.alinekeller.ch
    This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) - http://creativecommons.org/licenses/by-sa/4.0/
*/


/* Column = 80px (* 12) / Gutter = 20px (* 13) => 1220px */

.contentcenter {
  overflow: visible;
  width: 1200px;
}
.grid {
  margin-left: -10px;
  margin-right: -10px;
}
.col {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}
.col12 {
  clear: both;
  float: none;
}

/* Columns */

.col1 { width: 100px; }
.col2 { width: 200px; }
.col3 { width: 300px; }
.col4 { width: 400px; }
.col5 { width: 500px; }
.col6 { width: 600px; }
.col7 { width: 700px; }
.col8 { width: 800px; }
.col9 { width: 900px; }
.col10 { width: 1000px; }
.col11 { width: 1100px; }
.col12 { width: 1200px; }

.col2.wide { width: 220px; }
.col3.wide { width: 320px; }
.col4.wide { width: 420px; }
.col6.wide { width: 620px; }


/*  -----------------------------------------------------------

  Media Queries - Desktop from 1020px to 1160px

  Column = 60px (* 12) / Gutter = 20px (* 13) => 980px

------------------------------------------------------------ */



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

  .contentcenter {
    width: 960px;
  }

  .col1 { width: 80px; }
  .col2 { width: 160px; }
  .col3 { width: 240px; }
  .col4 { width: 320px; }
  .col5 { width: 400px; }
  .col6 { width: 480px; }
  .col7 { width: 560px; }
  .col8 { width: 640px; }
  .col9 { width: 720px; }
  .col10 { width: 800px; }
  .col11 { width: 880px; }
  .col12 { width: 960px; }

  .col2.wide { width: 180px; }
  .col3.wide { width: 260px; }
  .col4.wide { width: 340px; }
  .col6.wide { width: 500px; }

}

/*  -----------------------------------------------------------

  Media Queries - Small desktop (under 1000px) & vertical tablets (768px)

  Column = 40px (* 12) / Gutter = 15px (* 13) => 675px

------------------------------------------------------------ */



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

  .contentcenter {
    width: 645px;
  }

}

/*  -----------------------------------------------------------

  Media Queries - Mobile phones (under 768px)

  Column = 25px / Gutter = 10px => 430px

------------------------------------------------------------ */


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

  .contentcenter {
    width: 410px;
  }

  .grid {
    margin-left: -5px;
    margin-right: -5px;
  }
  .col {
    float: none;
    padding-left: 5px;
    padding-right: 5px;
  }

  .col1,
  .col2,
  .col3,
  .col4,
  .col5,
  .col7,
  .col8,
  .col9,
  .col10,
  .col11,
  .col12 { width: 100%; }

  .col6 {
    float: left;
    width: 50%;
  }

  .offset-1,
  .offset-2,
  .offset-3,
  .offset-4,
  .offset-5,
  .offset-6,
  .offset-7,
  .offset-8,
  .offset-9,
  .offset-10,
  .offset-11  { margin-left: 0; }

}

/*  -----------------------------------------------------------

  Media Queries - Mobile phones (under 480px)

  Column = 15px / Gutter = 10px => 310px

------------------------------------------------------------ */


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


  .contentcenter {
    width: 290px;
  }
  .col {
    float: none;
    margin: 0 0 10px;
    width: 100%;
  }
}