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

    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 = 15px / Gutter = 10px => 310px */

.contentcenter {
  overflow: visible;
  padding: 0 10px;
  width: 90%;
}
.grid {
  margin-left: -5px;
  margin-right: -5px;
}
.col {
  clear: both;
	float: none;
	margin: 0 0 10px;
	padding-left: 5px;
	padding-right: 5px; 
  position: relative;
	width: 100%;
}
.col.right {
  float: right;
}

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8, 
.col-xs-9,
.col-xs-10,
.col-xs-11 {
	clear: none;
	float: left;
}

.col-xs-1 { width: 8.33343%; }
.col-xs-2 { width: 16.6667%; }
.col-xs-3 { width: 25%; }
.col-xs-4 { width: 33.3334%; }
.col-xs-5 { width: 41.6667%; }
.col-xs-6 { width: 50%; }
.col-xs-7 { width: 58.3334%; }
.col-xs-8 { width: 66.6667%; }
.col-xs-9 { width: 75%; }
.col-xs-10 { width: 83.3334%; }
.col-xs-11 { width: 91.6667%; }
.col-xs-12 { width: 100%; }


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

	Media Queries - Mobile phones (> 480px)
	
	Column = 25px / Gutter = 10px => 430px

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


@media screen and (min-width: 30em) {

/*
	.contentcenter {
  	padding: 0 10px;
    width: 430px;
  }
*/
  .grid {
    margin-left: -5px;
    margin-right: -5px;
  }
	.col {
  	padding-left: 5px;
  	padding-right: 5px;
  }

	.col-s-1,
	.col-s-2,
	.col-s-3,
	.col-s-4,
	.col-s-5,
	.col-s-6,
	.col-s-7,
	.col-s-8,
	.col-s-9,
	.col-s-10,
	.col-s-11 {
  	clear: none;
  	float: left;
	}

  .col-s-1 { width: 8.3334%; }
  .col-s-2 { width: 16.6667%; }
  .col-s-3 { width: 25%; }
  .col-s-4 { width: 33.3334%; }
  .col-s-5 { width: 41.6667%; }
  .col-s-6 { width: 50%; }
  .col-s-7 { width: 58.3334%; }
  .col-s-8 { width: 66.6667%; }
  .col-s-9 { width: 75%; }
  .col-s-10 { width: 83.3334%; }
  .col-s-11 { width: 91.6667%; }
  .col-s-12 { width: 100%; }
  

}

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

	Media Queries - Small desktop & vertical tablets (> 768px)
	
	Column = 40px (* 12) / Gutter = 15px (* 13) => 675px

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

@media screen and (min-width: 48em) {
	
	.contentcenter {
  	padding: 0 15px;
  	width: 675px;
  }
  .grid {
    margin-left: -7px;
    margin-right: -8px;
  }
	.col {
  	clear: none;
  	float: left;
  	padding-left: 7px;
  	padding-right: 8px;
	}
	.col12,
	.col-m-12,
	.col-l-12,
	.col-xl-12 {
    clear: both;
    float: none;
  }
	
	/* Columns width */

  .col1 { width: 8.3334%; }
  .col2 { width: 16.6667%; }
  .col3 { width: 25%; }
  .col4 { width: 33.3334%; }
  .col5 { width: 41.6667%; }
  .col6 { width: 50%; }
  .col7 { width: 58.3334%; }
  .col8 { width: 66.6667%; }
  .col9 { width: 75%; }
  .col10 { width: 83.3334%; }
  .col11 { width: 91.6667%; }
  .col12 { width: 100%; }
  
  .col-m-1 { width: 8.33344%; }
  .col-m-2 { width: 16.6667%; }
  .col-m-3 { width: 25%; }
  .col-m-4 { width: 33.3334%; }
  .col-m-5 { width: 41.6667%; }
  .col-m-6 { width: 50%; }
  .col-m-7 { width: 58.3334%; }
  .col-m-8 { width: 66.6667%; }
  .col-m-9 { width: 75%; }
  .col-m-10 { width: 83.3334%; }
  .col-m-11 { width: 91.6667%; }
  .col-m-12 { width: 100%; }
  
  /* Offset */

  .offset-1   { margin-left: 8.3334%; }
  .offset-2   { margin-left: 16.6667%; }
  .offset-3   { margin-left: 25%; }
  .offset-4   { margin-left: 33.3334%; }
  .offset-5   { margin-left: 41.6667%; }
  .offset-6   { margin-left: 50%; }
  .offset-7   { margin-left: 58.3334%; }
  .offset-8   { margin-left: 66.6667%; }
  .offset-9   { margin-left: 75%; }
  .offset-10  { margin-left: 83.3334%; }
  .offset-11  { margin-left: 91.6667%; }
  
  .offset-m-1   { margin-left: 8.3334%; }
  .offset-m-2   { margin-left: 16.6667%; }
  .offset-m-3   { margin-left: 25%; }
  .offset-m-4   { margin-left: 33.3334%; }
  .offset-m-5   { margin-left: 41.6667%; }
  .offset-m-6   { margin-left: 50%; }
  .offset-m-7   { margin-left: 58.3334%; }
  .offset-m-8   { margin-left: 66.6667%; }
  .offset-m-9   { margin-left: 75%; }
  .offset-m-10  { margin-left: 83.3334%; }
  .offset-m-11  { margin-left: 91.6667%; }

}

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

	Media Queries - Desktop > 1024px
	
	Column = 60px (* 12) / Gutter = 20px (* 13) => 980px

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

@media screen and (min-width: 64em) {
	
	.contentcenter {
  	padding-left: 20px;
  	padding-right: 20px;
  	width: 980px;
  }
  
  .grid {
    margin-left: -10px;
    margin-right: -10px;
  }
  .col {
    padding-left: 10px;
    padding-right: 10px;
  }
  
  .col-l-1 { width: 8.33344%; }
  .col-l-2 { width: 16.6667%; }
  .col-l-3 { width: 25%; }
  .col-l-4 { width: 33.3334%; }
  .col-l-5 { width: 41.6667%; }
  .col-l-6 { width: 50%; }
  .col-l-7 { width: 58.3334%; }
  .col-l-8 { width: 66.6667%; }
  .col-l-9 { width: 75%; }
  .col-l-10 { width: 83.3334%; }
  .col-l-11 { width: 91.6667%; }
  .col-l-12 { width: 100%; }
  
  .offset-l-1   { margin-left: 8.3334%; }
  .offset-l-2   { margin-left: 16.6667%; }
  .offset-l-3   { margin-left: 25%; }
  .offset-l-4   { margin-left: 33.3334%; }
  .offset-l-5   { margin-left: 41.6667%; }
  .offset-l-6   { margin-left: 50%; }
  .offset-l-7   { margin-left: 58.3334%; }
  .offset-l-8   { margin-left: 66.6667%; }
  .offset-l-9   { margin-left: 75%; }
  .offset-l-10  { margin-left: 83.3334%; }
  .offset-l-11  { margin-left: 91.6667%; }
	
}

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

	Media Queries - Desktop from 1264px to 1199px
	
	Column = 75px (* 12) / Gutter = 20px (* 13) => 1160px

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

@media screen and (min-width: 75em) {
	
/*
	.contentcenter {
  	width: 1160px;
  }
  
  .col-xl-1 { width: 8.33343%; }
  .col-xl-2 { width: 16.6667%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.3334%; }
  .col-xl-5 { width: 41.6667%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.3334%; }
  .col-xl-8 { width: 66.6667%; }
  .col-xl-9 { width: 75%; }
  .col-xl-10 { width: 83.3334%; }
  .col-xl-11 { width: 91.6667%; }
  .col-xl-12 { width: 100%; }
  
  .offset-xl-1   { margin-left: 8.3334%; }
  .offset-xl-2   { margin-left: 16.6667%; }
  .offset-xl-3   { margin-left: 25%; }
  .offset-xl-4   { margin-left: 33.3334%; }
  .offset-xl-5   { margin-left: 41.6667%; }
  .offset-xl-6   { margin-left: 50%; }
  .offset-xl-7   { margin-left: 58.3334%; }
  .offset-xl-8   { margin-left: 66.6667%; }
  .offset-xl-9   { margin-left: 75%; }
  .offset-xl-10  { margin-left: 83.3334%; }
  .offset-xl-11  { margin-left: 91.6667%; }
*/
	
}

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

	Media Queries - Desktop > 1360px
	
	Column = 85px (* 12) / Gutter = 20px (* 13) => 1280px

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

@media screen and (min-width: 85em) {
	
/*
	.contentcenter {
  	width: 1280px;
  }
  
  .col-xxl-1 { width: 8.33343%; }
  .col-xxl-2 { width: 16.6667%; }
  .col-xxl-3 { width: 25%; }
  .col-xxl-4 { width: 33.3334%; }
  .col-xxl-5 { width: 41.6667%; }
  .col-xxl-6 { width: 50%; }
  .col-xxl-7 { width: 58.3334%; }
  .col-xxl-8 { width: 66.6667%; }
  .col-xxl-9 { width: 75%; }
  .col-xxl-10 { width: 83.3334%; }
  .col-xxl-11 { width: 91.6667%; }
  .col-xxl-12 { width: 100%; }
    
  .offset-xxl-1   { margin-left: 8.3334%; }
  .offset-xxl-2   { margin-left: 16.6667%; }
  .offset-xxl-3   { margin-left: 25%; }
  .offset-xxl-4   { margin-left: 33.3334%; }
  .offset-xxl-5   { margin-left: 41.6667%; }
  .offset-xxl-6   { margin-left: 50%; }
  .offset-xxl-7   { margin-left: 58.3334%; }
  .offset-xxl-8   { margin-left: 66.6667%; }
  .offset-xxl-9   { margin-left: 75%; }
  .offset-xxl-10  { margin-left: 83.3334%; }
  .offset-xxl-11  { margin-left: 91.6667%; }
*/
	
}