/* Responsive Structure */

  .container{
    margin: 0 auto;
    width:980px;
  }

  .col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.box{
    float:left;
  }

  .box{
    width:326px; /* Use a equal division of 980 - this is 1/3 */
  }
  

  .one,.eighth,.oneeighth,.one8th{
    width:12.5%
  }

  .qtr,.two,.twoeighths,.two8ths{
    width:25%;
  }

  .three,.threeeighths,.three8ths{
    width:37.5%;
  }
  
  .half,.four{
    width:50%;
  }

  .five,.fiveeighths,.five8ths{
    width:62.5%;
  }

  .threeqtr,.six,.sixeighths,.six8ths{
    width:75%;
  }
  
  .seven,.seveneighths,.seven8ths{
    width:87.5%;
  }

  .onethird,.third{
    width:33%;
  }

  .twothirds,.twothird{
    width:67%;
  }

/* Media Queries */
  
  @media only screen and (max-width: 940px),
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (max-device-width : 1024px), 
only screen and (min-device-pixel-ratio : 1.5) and (max-device-width : 1024px){

  }

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
    .container{
      width:100%;
    }

    #nav{
      display:none !important;
    }

    #mobileNav{
      display:block;
    }


  }

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container{
      width:100%;
    }

    .box{
      width:50%;
    }


    
  }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
    .container{
      width:100%;
    }
  }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {

    .container{
      width:100%;
    }

    .col1,.col2,.col3,.col4,.col5,.col6{
      float:none;
    }

    .box{
      width:100%;
    }

    .one,.eighth,.oneeighth,.one8th{
      width:100%;
    }

    .qtr,.two,.twoeighths,.two8ths{
      width:100%;
    }

    .three,.threeeighths,.three8ths{
      width:100%;
    }
    
    .half,.four{
      width:100%;
    }

    .five,.fiveeighths,.five8ths{
      width:100%;
    }

    .threeqtr,.six,.sixeighths,.six8ths{
      width:100%;
    }
    
    .seven,.seveneighths,.seven8ths{
      width:100%;
    }

    .onethird,.third{
      width:100%;
    }

    .twothirds,.twothird{
      width:100%;
    }

  }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

    .container{
      width:100%;
    }



    .col1,.col2,.col3,.col4,.col5,.col6{
      float:none;
    }

    .box{
      width:100%;
    }

    .one,.eighth,.oneeighth,.one8th{
      width:100%;
    }

    .qtr,.two,.twoeighths,.two8ths{
      width:100%;
    }

    .three,.threeeighths,.three8ths{
      width:100%;
    }
    
    .half,.four{
      width:100%;
    }

    .five,.fiveeighths,.five8ths{
      width:100%;
    }

    .threeqtr,.six,.sixeighths,.six8ths{
      width:100%;
    }
    
    .seven,.seveneighths,.seven8ths{
      width:100%;
    }

    .onethird,.third{
      width:100%;
    }

    .twothirds,.twothird{
      width:100%;
    }
  }