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

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

img {
	width: 100%;
}

/* =============================================================================
   Max-width 768px
   ========================================================================== */

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

    .hide-mobile{
        display: none;
    }
}

/* =============================================================================
   Min-width 1024px
   ========================================================================== */
@media (min-width: 1025px){

    .hide-desktop{
        display: none;
    }
}
/* =============================================================================
   Min-width 768px
   ========================================================================== */

@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;
	}
}
/* =============================================================================
   Min-width 768px y Max-width 1024px
   ========================================================================== */
@media (min-width: 769px) 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;
    }
}
/* =============================================================================
   Min-width 0px y Max-width 768px
   ========================================================================== */
@media (min-width: 0px) and (max-width: 768px){


    /* 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%;}

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

    .group:after,
    .grid-container:after {
      content: " ";
      display: table;
      clear: both;
    }
    
}
/* =============================================================================
   Min-width 1200px
   ========================================================================== */
@media (min-width:1200px){
    .grid-container{
        max-width: 1100px;
    }
}