/* Ungrid
*/

@media (min-width: 30em) {
  .row { width: 100%; display: table; table-layout: fixed; }
  .col { display: table-cell; }
}

/* basic CSS note its all percent based
*/

	html {
		font-size: 100%;
		height: 100%;
		-webkit-text-size-adjust: 100%;
	    text-align: center;                                                         
	}

	html, body, div, span, h1, p, blockquote {
		font-size: 100%;
		font: inherit;
	}

	body {
		margin: 50px;
		margin-top: 30px;
        font-family: 'FuturaBookRegular';	    
 <!--       font-family: 'liberationsans-regular';	     -->
	}

	h1 {
		font-size: 150%;
		line-height: 150%;
		text-align: left;
		padding-left: 10px;
   }	

	h2 {
		font-size: 110%;
		line-height: 150%;
		text-align: left;
		padding-left: 10px;
   }	

	p {
		font-size: 100%;
		line-height: 150%;
		text-align: left;
		padding-left: 10px;
   }

/* Nav Boxes 
*/
.clear { clear: both; width: 100%;}
.logo { width: 35%;}
.box1-theme {color:#887A49 !important;background-color:#ffcc00 !important}
.box2-theme {!important;background: url('kmedia.png') !important;background-repeat: no-repeat; !important}
.box3-theme {color:#fff !important;background-color: #DF8827 !important}
.box4-theme {color:#ffcc00 !important;background-color: #57350F !important}
.box5-theme {color:#fff !important;background-color: #95916B !important}
.box6-theme {color:#57370E !important;background-color: #6F8A91 !important}
.basicBox { border-radius: 15px; float: left; padding: 0px; width: 133px; height: 117px; cursor:pointer; margin-right: 15px;}



#box1 {
    background: #FFCC00;
	margin-bottom: 15px;
}
#box2 {
	margin-bottom: 15px;
}

#box3 {
	background: #DF8827;
	margin-bottom: 15px;
}

#box4 {
	background: #57350F;
	margin-bottom: 15px;
}

#box5 {
	background: #6F8A91;
	margin-bottom: 15px;
}

#box6 {
	background: #95916B;
	margin-bottom: 15px;
}

#outlineBox {
    border: 2px solid #c6c6c6;
}

/* image auto resize
*/

img {
    max-width: 100%;
    height: auto;

}

/* rows and cols
*/

.row {                                                                          
    margin-top: 1em;                                                            
    margin-bottom: 1em;    
}                                                                               
                                                                                                                                       																			
.col {                                                                          
    height: auto;                                                                
    vertical-align: top;                                                     
    text-align: center;                                                     
    line-height: auto;                                                           
}                                                                               
                                                                                
.col:nth-of-type(2n) {                                                          
    background-color: transparent;                                                  
}                                                                               


/* Desktops 
*/

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

   html{
		font-size: 150%;
		height: 100%;
		-webkit-text-size-adjust: 150%;
	    text-align: center;                          
       }

}                                                                               

/* Breakpoints
*/

/* keep breakpoints simple let them be CUMULATIVE
*/

@media only screen and (max-width: 1020px) {

.basicBox {width: 120px; height: 100px;}

}

@media only screen and (max-width: 900px) {

.basicBox {width: 100px; height: 85px;}

}


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

.basicBox {width: 80px; height: 80px;}
     body { margin: 20px; }

}

@media only screen and (min-width: 500px) and (max-width: 600px) {
    #box2 { position: absolute; left: -80px; !important}  
}

@media only screen and (max-width: 480px) {

     .col { width: 100% !important; }  
	.logo { width: 100%; !important}

}


/* Embedded font
*/


@font-face {
    font-family: 'liberationsans-regular';
    src: url('liberationsans-regular-webfont.woff2') format('woff2'),
         url('liberationsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'FuturaBookRegular';
    src: url('futura-book-webfont.eot');
    src: url('futura-book-webfont.eot?iefix') format('eot'),
         url('futura-book-webfont.woff') format('woff'),
         url('futura-book-webfont.ttf') format('truetype'),
         url('futura-book-webfont.svg#webfontKUjnjhtF') format('svg');
    font-weight: normal;
    font-style: normal;

}


<!-- 
## Website page
## Functions
-->


.startDiv {
    display: show;
    padding: 0;
	margin: 0 auto;   
	}

.hiddenDiv {
    display: none;
    padding: 0;
	margin: 0 auto;   
	}