* {
    padding:0;
     margin:0;
     -moz-box-sizing:    border-box;
  -webkit-box-sizing:    border-box;
       -o-box-sizing:    border-box;
          box-sizing:    border-box;
       /*   border: 0px solid white!important; */
}


/* navi */
.wrapgrid {
  background: #950000;
  height: 70px;
  margin-top: 60px;
}
.grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid [class*='col-'] {
  float: left;
}
/*.grid [class*='col-']:last-of-type {
  padding-bottom: 0;
}
*/
.content {
 /* margin-top: 40px; */
   margin-bottom: 40px;
   min-height: 400px;
}
/* Opt-in outside padding */


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

.grid-pad {
   padding: 20px 0 0 20px;
}
.col-100 {
  width: 100%;
}
.col-left,
.col-2-3, 
.col-1-3,
.col-1-2,
.col-1-4, 
.col-1-8,
.col-3-4 {
  width: 100%; 
}

 #logo .col-left {
  max-width: 240px;
  padding: 40px 0 0 0;
}
.col-left {
  max-width: 260px;
  padding: 20px 0;
}
.col-right {
  width: 100%;
}
.module {
  padding: 20px;
  background: #eee;
}


@media screen and (min-width:700px) {   /* 1-8 are shown 1-4  */
      .col-1-4, 
      .col-1-8 {
      width: 50%;
      }
      #logo .col-left {
        max-width: 240px;
        padding: 40px 0;
      }
      #logo .col-right {
        width: calc(100% - 260px);
        padding: 40px;
      }
    }
         @media screen and (min-width:900px) {   /* 1-8 are shown 1-4  */   /*HAMBURGER */
            .wrapgrid {
              margin-top: 0;
            }
            .grid {
              padding: 0 40px;
            }  
           .col-right {
              width: calc(100% - 260px);
              padding: 0 0 0 40px;
            }
            .col-left-inner {
             /* padding-top: 148px; */
            }
            .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: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;
                            }

              }