@media screen and (max-width: 1000px) {
  
  #head {
    width:100%;
    margin:5% auto 10px auto;
  }
  
  #head img{
    margin-left:20%;
    max-width:80%;
  }
  
  #cont {
    width:100%;
  }

  #cont2 {
    width:98%;
    margin:1%;
  }
  
  div.cl {
    width:49%;
    text-align:left;
    float:left;
  }
  
  div.cr {
    width:49%;
    text-align:left;
    float:right;
  }
  
  .outtile {
    width:46%;
    height:auto;
    margin:1%;
    position: relative;
  }
  .outtile:after {
      padding-top: 50%; /*300:150 ratio*/
      display: block;
      content: '';
  }
  .intile {
      position: absolute;
      top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
  }

  .intile h1 {
    font-size:7vw;
  }
  
  #menu {
    width:100%;
  }
  
  #menu a{
    margin:0;
    width:45%;
  }
  
  #bottom {
    position:relative;
  }
}

@media screen and (max-width: 1000px) and (orientation: portrait) {
  #head {
    width:100%;
    margin:10% auto 10px auto;
  }

  #cont2 {
    width:98%;
    margin:1%;
    text-align:left;
  }
    
  div.cl {
    width:100%;
    margin:5px auto 5px auto;
    text-align:left;
    clear:both;
  }
  
  div.cr {
    width:100%;
    margin:5px auto 5px auto;
    text-align:left;
    clear:both;
  }
  
  .intile h1 {
    font-size:6vw;
  }
  
  #bottom {
    position:absolute;
  }
}  

@media screen and (max-width: 800px) and (orientation: landscape) {

  .intile h1 {
    font-size:7vw;
  }
  
  #menu a{
    margin:0;
    width:96%;
  }
  
  #bottom {
    position:relative;
  }
}

@media screen and (max-width: 600px) and (orientation: portrait) {
  .outtile {
    width:98%;
  }
  
  #cont2 {
    width:98%;
    margin:1%;
    text-align:left;
  }
    
  div.cl {
    width:100%;
    margin:5px auto 5px auto;
    text-align:left;
    clear:both;
  }
  
  div.cr {
    width:100%;
    margin:5px auto 5px auto;
    text-align:left;
    clear:both;
  }

  .intile h1 {
    font-size:11vw;
  }
  
  #menu a{
    margin:0;
    width:96%;
  }
  
  #bottom {
    position:relative;
  }
}

@media screen and (max-width: 600px) and (orientation: landscape) {
  .intile h1 {
    font-size:6vw;
  }
  
  #menu a{
    margin:0;
    width:96%;
  }
  
  #bottom {
    position:relative;
  }
}