* {
    padding:0;
     margin:0;
     -moz-box-sizing:    border-box;
  -webkit-box-sizing:    border-box;
       -o-box-sizing:    border-box;
          box-sizing:    border-box;
}
body {
 /* padding: 40px 4% 40px; */
 background-color: grey;

}

.grid {
  margin: 0 auto 20px auto;
  max-width: 1300px;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid [class*='col-'] {
  float: left;
}
/*.grid [class*='col-']:last-of-type {
  padding-bottom: 0;
}
*/

/* Opt-in outside padding */


.grid-pad [class*='col-'] {
  padding-right: 20px;
  padding-bottom: 20px;
  border:1px dashed orange;
}

.grid-pad {
   padding: 20px 0 0 20px;
   border:1px dashed blue;
}
                .col-logo {
                  width: 100%;
                  max-width: 350px;
                }
                .col-mainnav,
                .col-contentright  {
                  width: 100%;
                }
                .col-footernav {
                  float: right!important;
                }

.col-2-3, 
.col-1-3,
.col-1-2,
.col-1-4, 
.col-1-8,
.col-3-4 {
  width: 100%; 
}
.module {
  padding: 20px;
  background: #eee;
   border:1px dashed yellow;
}



    @media screen and (min-width:440px) {   /* 1-8 are shown 1-4  */

	  .col-1-4, 
      .col-1-8 {
      width: 50%;
      }
      .col-1-4:nth-child(2n+1) {
    	clear: both;
      }
    }
         @media screen and (min-width:800px) {   /* 1-8 are shown 1-4  */
      


            .col-3-4 {
            width: 75%;
            }
            .col-2-3 {
            width: 66.66%;
            }
            .col-1-3 {
            width: 33.33%;
            }
            .col-1-8 {
            width: 25%;
            }
          }



                   @media screen and (min-width:900px) {   /* nav rechts  */
                        .col-mainnav,
                        .col-contentright {
                           width: calc(880px - 300px);  /* 880 - 350 */
                           float: right!important;
                        }
                        .col-contentleft {
                          width: 350px;
                        }

                      }


             @media screen and (min-width:1000px) {   /* 1-8 are shown 1-4  */

                .col-1-2 {
                width: 50%;
                }
                .col-1-4 {
                 width: 25%;
                }
                .col-1-4:nth-child(2n+1) {
    			clear: none;
      			}
                .col-1-8 {
                 width: 12.5%;
                }
              }


/* -----------------
   no need */

                            @media screen and (min-width:10000px) {


                            .grid [class*='col-'] {
                              float: left;
                              padding-right: 20px;
                              padding-bottom: 0;
                            }
                            .grid [class*='col-']:last-of-type {
                              padding-right: 0;
                            }

                            /* Opt-in outside padding */
                            .grid-pad {
                              padding: 20px 0 20px 20px;
                            }
                            .grid-pad [class*='col-']:last-of-type {
                              padding-right: 20px;
                            }

              }