/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/

Licensed under GPL and MIT.
*/



/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
  margin: 0 auto;
  padding: 0 0;
  width: 90%;
  max-width:100%; /* ie10 11 fix */
  max-width: 1800px;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: relative;

  display: -webkit-flex;     /* NEW - Chrome */
  display: -ms-flexbox;      /*  IE 10 */
  display: flex !important;  /* NEW, Spec - Opera 12.1, Firefox 20+ */

  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-flow: row wrap;
  
  /* horizontal distibution */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  
  /* vertical distibution */
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  
  /* vertical sizing */
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.stretch_container{
}


/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_auto,
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    display: block;
    vertical-align: top;
    float: left;
    position: relative;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    padding: 0 15px;
    margin: 0 0 5px 0;
    
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    
    -webkit-flex-shrink: 0; 
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
      
    flex-grow: 0 !important;
    flex-shrink: 0 !important;

    /* to test and check */
    ____border: thin #ddd dotted;
    ____min-height: 15px;
}

.container_12 .grid_no_space{
padding: 0 0 0 0;
}


/* Grid >> 12 Columns 100/12 = 8.33%
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_auto {
width: auto;
flex-grow: 1 !important;
flex-shrink: 1 !important;
flex-basis: auto;
}

.container_12 .grid_1 {
width: 8.33%;
flex-basis: auto;
}

.container_12 .grid_2 {
width: 16.66%;
flex-basis: auto;
}

.container_12 .grid_3 {
width: 25%;
flex-basis: auto;
}

.container_12 .grid_4 {
width: 33.33%;
flex-basis: auto;
}

.container_12 .grid_5 {
width: 41.66%;
flex-basis: auto;
}

.container_12 .grid_6 {
width: 50%;
flex-basis: auto;
}

.container_12 .grid_7 {
width: 58.33%;
flex-basis: auto;
}

.container_12 .grid_8 {
width: 66.66%;
flex-basis: auto;
}

.container_12 .grid_9 {
width: 75%;
flex-basis: auto;
}

.container_12 .grid_10 {
width: 83.33%;
flex-basis: auto;
}

.container_12 .grid_11 {
width: 91.66%;
flex-basis: auto;
}

.container_12 .grid_12 {
width: 100%;
flex-basis: auto;
}


/* RESPONSIVE
----------------------------------------------------------------------------------------------------*/
@media (max-width: 960px){
    .container_12{
    width: 100%;
  }	
  .container_12 .grid_12{
    width: 100%;
  }
  .container_12 .grid_9, .container_12 .grid_8 {
    width: 80%;
  }
  .container_12 .grid_6{
    width: 50%;
  }		
}

@media (max-width: 620px){
  .container_12 .grid_9, .container_12 .grid_8, .container_12 .grid_7{
    width: 100%;
  }
  .container_12 .grid_6, .container_12 .grid_5{
    width: 100%;
  }
}
@media (max-width: 480px){
  .container_12 .grid_12, .container_12 .grid_9, .container_12 .grid_8, .container_12 .grid_7{
    width: 100%;
  }		
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear{
	float: none;
	clear: both;
  width: 100%;
}
.clearfixdiv {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix {
}
* html .clearfix {
  height: 1%;
}