@charset 'UTF-8';


#items {margin:40px 0 0;}
#items > ul {margin:-20px 0 0 -20px; letter-spacing:-0.4em;}
#items > ul > li {
	display:inline-block; width:310px; position:relative; margin:20px 0 0 20px; padding:19px; border:1px solid #e9e9e9; letter-spacing:normal; vertical-align:top;}
#items > ul > li > a {display:block; margin:-19px; padding:19px; text-decoration:none;}
#items > ul > li .image {margin:2em 0 0; text-align:center; position: relative;}
#items > ul > li .image > img {display:block; width:210px; height:210px; margin:0 auto;}
#items > ul > li .image > .comingsoon{position: absolute; bottom:40%; left:0; width: 100%; padding: 10px 0; text-align: center; background-color: rgba(255,255,255,0.50);}
#items > ul > li .header {margin:20px -19px -19px; padding:19px; border-top:1px solid #e9e9e9; background:#f7f7f7;}
#items > ul > li .header > strong {display:block; position:absolute; left:19px; top:19px; color:#000; font-size:115%; font-weight:bold;}
#items > ul > li .header > b {display:block; color:#014099; font-size:129%; font-weight:bold;}
#items > ul > li .header > p {color:#000;}
#items > ul > li .header > em {display:block; margin:10px 0 0; padding:10px; background:#013e94; color:#fff; font-size:100%; font-weight:normal; font-style:normal; text-align:center;}
#items > ul > li > a:hover > .image > img {opacity:0.8;}
#items > ul > li > a:hover > .header > strong, 
#items > ul > li > a:hover > .header > p {color:#333;}
#items > ul > li > a:hover > .header > b {color:#3466ad;}
#items > ul > li > a:hover > .header > em {background-color:#00265b;}


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

#main > h1 {padding-top:0; border-top:none; border-bottom:none; font-size:17px; text-align:center;}

#items {margin:10px 0 0;}
#items > ul {margin:-10px 0 0;}
#items > ul > li {display:block; width:auto; margin:10px 0 0; padding:0;}
#items > ul > li > a {margin:0; padding:0;}
#items > ul > li .image {display:table-cell; width:40%; margin:0; padding:2em 0 0;}
#items > ul > li .image > img {width:100%; height:auto;}
#items > ul > li .header {display:table-cell; margin:0; padding:9px; border-top:none; vertical-align:middle;}
#items > ul > li .header > strong {left:9px; top:9px; font-size:10px;}
#items > ul > li .header > b {font-size:14px;}
#items > ul > li .header > p {margin-top:0.5em; font-size:12px;}
#items > ul > li .header > em {margin-top:1.5em; padding:6px; font-size:12px;}
#items > ul > li > a:hover > .image > img {}
#items > ul > li > a:hover > .header > strong, 
#items > ul > li > a:hover > .header > p {}
#items > ul > li > a:hover > .header > b {}
#items > ul > li > a:hover > .header > em {}

}