#projects { overflow: auto; }
#projects > li { border-bottom: 1px solid #CCC; float: left; font-size: 100%; margin: 0 2% 6px 0; padding-bottom: 8px; position: relative; width: 49%; }
#projects > li:nth-child(2n) { margin-right: 0; }
#projects > li h2 { font-size: 180%; font-weight: normal; left: -1px; margin-bottom: 2px; position: relative; }
#projects > li h3 { color: #AAA; font-weight: normal; margin-bottom: 4px; }
#projects > li p { font-size: 120%; }
#projects > li .visual { margin-bottom: 8px; padding-bottom: 4px; position: relative; overflow: hidden; }
#projects > li .visual li { border: 1px solid #666; display: none; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
#projects > li .visual li .visual_wrapper { height: 0; padding-bottom: 56%; position: relative; }
#projects > li .visual li .visual_wrapper iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#projects > li .visual li iframe,
#projects > li .visual li img { display: block; }
#projects > li .visual li img { width: 100%; }
#projects > li .visual .visible { display: block; }

@media only screen and (max-width: 800px) {
  #projects > li { margin-right: 0; width: 100%; }
}

@media only screen and (max-width: 480px) {
  #projects > li { width: 100%; }
}