body {margin:0; padding:0;}
.tl-image {width:100%; max-width:100%}
 
.nav ul {
  list-style: none;
  background-color: #396ce9;
  text-align: center;
  padding: 0;
  margin: 0;
  width:100%;
}
.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  height: 40px;
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #fff;
  color: #396ce9;
}
 
.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}
.tl-col-3 {width: 33.33%;float: left; padding:5px;}
.clearfix {clear:both;}
 *, *:before, *:after {
  box-sizing: border-box;
}
.img-box{
border-top: 1px solid black;
    border-right: 1px solid black;
font-size:14px;
text-align:center}
.sm-img-box{
padding:5px}
.sm-img-box img{
max-width:100%}
.img-box.sm-last{
border-bottom: 1px solid black;}
.sm-img-box a {color:darkblue;} 
.nav, .clearfix{clear:both;}
.img-box:nth-child(6n+1){ border-right: 3px solid #000;}
@media screen and (min-width: 600px) {
  .nav li { 
    width: 180px;
    border-bottom: none;
    height: 20px;
    line-height: 20px;
    font-size: 1.0em;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}

@media only screen and(max-width: 768px){
	.tl-col-3 {width: 100%; padding:5px;}
	.img-box{
		border:1px solid #222
	}
}