/* Global
================================ */

.grid-container{
	padding-left: 10px;
	padding-right: 10px;
	margin-left: auto;
	margin-right: auto;
}

img {
	width: 100%;
}

/*Media Queries
=============================*/
@media (min-width: 1px) and (max-width: 767px){
    .grid-container > [class^="grid-"]{
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .hide-mobile{
        display: none;
    }
}

@media (min-width: 1024px){

    .hide-desktop{
        display: none;
    }
}

/* Media Queries
================================ */

@media (min-width: 768px) { 

	/* Columns *************/

	.grid-container>[class^="grid-"]{
        float: left;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 2%;
	}

	.grid-container>[class^="grid-"]:first-child{
		margin-left: 0;
	}

	.grid-container>[class^="grid-"]:last-child{
		float: right;
	}

	/* Columns are 65px wide, with 20px gutters
	=========================================== */
    .grid-1{
    	width:6.5%; 
    }

    .grid-2 {
    	width: 15%;
    }

    .grid-3{
    	width: 23.5%;
    }

    .grid-4{
    	width: 32% ;
    }

    .grid-5{
    	width: 40.5%;
    }

    .grid-6{
    	width: 49%;
    }

    .grid-7{
    	width: 57.5%;
    }

    .grid-8{
    	width: 66%; 
    }

    .grid-9{
    	width: 74.5%;
    }

    .grid-10{
    	width:83%; 
    }

    .grid-11{
    	width: 91.5%;
    }

    .grid-12{
    	width: 100%;
    }

 /* Clearfix
	================================ */

	.group:after,
	.grid-container:after {
	  content: " ";
	  display: table;
	  clear: both;
	}
}

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


    /* Columns *************/

    .grid-container>[class^="grid-"]{
        float: left;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .grid-container-tablet>[class^="grid-"]{
        margin-left: 0%;
    }

    .grid-container>[class^="grid-"]:last-child{
        float:right;
    }

    .hide-tablet{
        display: none;
    }

    /******** Grid **********/

      .tablet-1{
        width:8.333333%; 
    }

    .tablet-2 {
        width: 16.666666%;
    }

    .tablet-3 {
        width: 25%;
    }

    .tablet-4 {
        width: 33.33333% ;
    }

    .tablet-5 {
        width: 42.5%;
    }

    .tablet-6{
        width: 50%;
    }

    .tablet-7 {
        width: 57.5%;
    }

    .tablet-8 {
        width: 66.666666%; 
    }

    .tablet-9 {
        width: 75%;
    }

    .tablet-10 {
        width:83.3333333333%; 
    }

    .tablet-11 {
        width: 91.6666666%;
    }

    .tablet-12 {
        width: 100%;
    }

    /* Clearfix
    ================================ */

    .group:after,
    .grid-container:after {
      content: " ";
      display: table;
      clear: both;
    }
}

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


    /* Columns *************/

    .grid-container-mobile>[class^="grid-"]{
        float: left;
        min-height: 1px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .grid-container-mobile>[class^="grid-"]{
        margin-left: 0%;
    }

    .grid-container-mobile>[class^="grid-"]:last-child{
        float:right;
    }

    /******** Grid **********/

      .mobile-1{
        width:8.333333%; 
    }

    .mobile-2 {
        width: 16.666666%;
    }

    .mobile-3 {
        width: 25%;
    }

    .mobile-4{
        width: 33.33333% ;
    }

    .mobile-5 {
        width: 42.5%;
    }

    .mobile-6{
        width: 50%;
    }

    .mobile-7 {
        width: 57.5%;
    }

    .mobile-8 {
        width: 66.666666%; 
    }

    .mobile-9 {
        width: 75%;
    }

    .mobile-10 {
        width:83.3333333333%; 
    }

    .mobile-11 {
        width: 91.6666666%;
    }

    .mobile-12 {
        width: 100%;
    }

}

@media (min-width:1200px){
    .grid-container{
        max-width: 1100px;
    }
}