/* pure-hidden-xs */
@media screen and (max-width:567px) {

  #menu .button span{font-size: 18pt}
  .huge{font-size: 28pt;}
  .body{font-size: 14pt}
     .big{font-size: 22pt}
  .med{font-size: 18pt}
  .badge{font-size: 18pt;}
  .tash{max-width: 30%; margin: 15px 0} 

  .box{
    -webkit-background-size:  cover;
    -moz-background-size: cover;
    -o-background-size:  cover;
    background-size: cover;

  }

    .button .badge{font-size: 5vw}

    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-xs{display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:568px) and (max-width:767px) {
  #menu .button span{font-size: 18pt}


   .badge{font-size: 18pt;}
  .huge{font-size: 42pt;}
  .big{font-size: 32pt}
  .body{font-size: 16pt}
   .med{font-size: 22pt}

    .pure-visible-xs{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:768px) and (max-width:1023px) {

  #menu .button span{font-size: 20pt}
  


   .huge{font-size: 48pt;}
    .big{font-size: 28pt}
  .med{font-size: 24pt}
  .badge{font-size: 20pt;}

    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:1024px) and (max-width:1279px) {
  .huge{font-size: 54pt;}
  .badge{font-size: 24pt;}
  .buttons{font-size: 0.6em}
  #menu .button span{font-size: 20pt}
  #footer .tash{max-width:10%}

    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-lg{display:none}
}




/* pure-hidden-xl */
@media screen and (min-width:1280px) {
    #footer{font-size: 18pt}
    #nav{left:5%; right:5%;}
    #footer .tash{max-width:10%}
    .pattern{
      background-position: center -110%;
      -webkit-background-size: 15%;
      -moz-background-size:  15%;
      -o-background-size: 15%;
      background-size:  15%;
    }
    .box .pen.hover{font-size: 3vw;}
    .button .badge{font-size: 28pt}
    #menu .buttons{padding: 0 12%; }
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-hidden-xl{display:none}
}