/* reset */
@import "reset.css";

/*** what ***/
@-ms-viewport{width: device-width;}

/*** common ***/
html, body {height: auto;}
body {
	margin: 0; padding: 0; text-align: center;
	background-color: #eae8e5;
}

div, span, small, ul, li, input, table, tr, td, a, form, select, option, input, label, p, h1, h2, h3, h4 {font: normal 16px helvetica, tahoma, verdana, arial; color: #262626; text-align: left; margin: 0; padding: 0; list-style-type: none;}

small {font-size: .75em !important; color: #888;}

a, a:visited, a:hover {text-decoration: none; color: #262626; font-size: 1em;}
a:hover > div p {text-decoration: underline #a0a0a0 dotted;}

.clr {clear: both; line-height: 0;}

.cfl {min-height: 0;}
* html .cfl {height: 0;}
.cfl:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

#wrap {margin: 0 auto; max-width: 66.25em;}
@media only screen and (max-width: 1240px) {
  #wrap {margin: 0 10%; max-width: none;}
  main li {
	  width: 80% !important;
	  margin: 0 auto 1.25em auto !important;
	  float: none !important;
	  border-width: 1.125em !important;
	  border-radius: 2em !important;
  }
  main li.bigbox, main li.midbox {height: 8em !important;}
  main li.footnote {border: 1.125em solid #fefefe !important;}
  main li.footnote div {margin: 0 !important;}
  header img {width: 62% !important;}
}
@media only screen and (max-width: 600px) {
  #wrap {margin: 0 10%; max-width: none;}
  main li {
	  width: 80% !important;
	  margin: 0 auto 1.25em auto !important;
	  float: none !important;
	  border-width: .875em !important;
	  border-radius: 2em !important;
  }
  main li.bigbox, main li.midbox {height: 8em !important;}
  main li h3 {font-size: 1.5em !important;}
  main li p {font-size: 1em !important;}
  main li.footnote {border: .875em solid #fefefe !important;}
  main li.footnote div {margin: 0 !important;}
  header img {width: 75% !important;}
}
header {text-align: center;}
header img {width: 50%; margin: 2em 0;}
main li {
	float: left;
	width: 62em;
	background-color: #fefefe;
	border: 1.125em solid #fefefe;
	margin: 0 .5em 1em .5em;
	filter: drop-shadow(0.15em 0.15em 0.15em rgba(0, 0, 0, 0.1));
	border-radius: 2em;
}
main li.bigbox {width: 23.25em;}
main li.midbox {width: 35.5em;}
main li.bigbox, main li.midbox {height: 10em;}
main li a {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
	background: rgba(254, 254, 254, .9);
	padding: .5em 0;
}
main li img {
	display: block;
	float: left;
	width: 4.25em;
	filter: drop-shadow(0.25em 0.25em 0.25em rgba(0, 0, 0, .25));
	margin: 0 1.125em 0 .5em;
}
main li.bigbox a, main li.midbox a {padding-bottom: 1.125em;}
main li a:hover > img {filter: drop-shadow(0.25em 0.25em 0.375em rgba(0, 0, 0, 0.25));}

main li h3 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1.75em;
}
main li.instagram h3 {color: #f50057;}
main li.rebrickable h3 {color: #33a8b9;}
main li.mochub h3 {color: #2f1a52;}
main li.buildamoc h3 {color: #8d4551;}
main li.behance h3 {color: #000;}
main li.mocsmarket h3 {color: #080808;}
main li.facebook h3 {color: #3f51b5;}
main li.flickr h3 {color: #91529f;}
main li.bricklink h3 {color: #f1b62f;}

main li p {color: #42484d; font-size: 1.125em;}

main li.rebrickable {background: url('../main/bcg-rebrickable.jpg') no-repeat center center;}
main li.behance {background: url('../main/bcg-behance.jpg') no-repeat center center;}
main li.bricklink {background: url('../main/bcg-bricklink.jpg') no-repeat center center;}
main li.instagram {background: url('../main/bcg-instagram.jpg') no-repeat center center;}

main li.footnote {
	float: left;
	width: 64.25em;
	border: 0;
}
main li.footnote div {margin: 1.5625em;}
main li.footnote div p {text-align: center;}

footer {padding: 1em 0 3em 0; text-align: center;}
footer small {font-size: 1.25em;}