@charset "UTF-8";
/* CSS Document */

body {
	margin:0;
	font-family:'eb garamond', garamond, serif; font-weight:400;
	font-size:18px; color:#333; line-height:1.6 }
	
a { text-decoration:none; color:#d75481; border-bottom: 3px solid #ffe6ef;
 -webkit-transition-property:all;
-webkit-transition-duration: 0.4s, 0.4s;
-webkit-transition-timing-function: linear, ease;

-moz-transition-property:all;
-moz-transition-duration:0.4s;
-moz-transition-timing-function: linear, ease;

-o-transition-property:all;
-o-transition-duration:0.4s;
-o-transition-timing-function: linear, ease; }
	
ul.nav, h1, h2, h3, u, footer {
	font-family:'montserrat', sans-serif;
	text-transform:uppercase;
	margin-top:0 }	
	
.topbar { width:100%; background-color:#84ddc7; position:fixed; height: 10px; top:0; z-index:2; }

.wrap {
	margin: 0 auto;
	max-width: 960px; padding: 0 20px; }
	
header { margin-top:10px }
header img { max-width:100%; border:0; float:left; }

ul.nav { float:left; position:relative;top:-200px; left:542px; width:auto; -webkit-padding-start: 0px;
 }
ul.nav li { display:inline-block; font-size:12px; letter-spacing:2px; margin:0; list-style:none;}
ul.nav li a { color: #333; background-color:#84ddc7; padding: 5px 8px; border-bottom:none; font-weight:700 }
ul.nav li a:hover { background:url(images/hoverbg.gif) no-repeat; padding: 10px 8px;box-shadow:none;-webkit-box-shadow:none }

  .right { float:right; }
  .left { float:left; }

#main p:first-child, #main p:nth-child(2) {
	text-indent:0; font-size:110%; margin-top:0; color:#666
}
p { text-indent:40px; text-align:justify}
em { color:#666;}
.show_owned_credits, .show_joined_credits, .joined { text-align: center; text-indent:0; font-size:90%; }
.padding { padding: 10px; }
.hidden { display:none; }
.center { text-align:center }
p.center { text-indent:0; }
.center img { padding:5px; }
.stats { margin: 10px auto; padding:15px 5px; width: 75%; height: auto; font-family:'montserrat',sans-serif; line-height:1.2; font-size:16px; text-transform:uppercase}
.stats p { text-indent:0; text-align:center; margin:4px 0 }
.stats strong { font-size: 36px; font-family:'eb garamond',garamond,serif; }
.stats em { text-transform:none;}
.stats small { text-transform:none; font-size:80% }
.stathalf { display:inline }
.statextra { padding-top:10px; display:block }	
a:hover { color:#999;
	-webkit-box-shadow: inset 0px -26px 0px 0px rgba(255,230,240,0.5);
-moz-box-shadow: inset 0px -26px 0px 0px rgba(255,230,240,0.5);
box-shadow: inset 0px -26px 0px 0px rgba(255,230,240,0.5);
}
.show_owned_where_you_are { display:none; }
.joined {margin-left:auto; margin-right:auto; width:75%}
.joined a img { padding: 5px; border:none; background:url(images/bg.gif) no-repeat; background-size:cover;  }
.joined a img:hover { background:url(images/hoverbg.gif); background-size:cover}
.joined a { border-bottom:none; padding: 0px 3px}
.joined a:hover { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none }
h1 { font-size:26px; padding:0px; margin:0; display:inline; letter-spacing:2px }
h1::before { content: '\02766'; padding-right: 20px; color:#84ddc7; font-size:120% }
h2 { font-size: 22px; letter-spacing:2px; border-bottom: 5px solid #83dcc8; padding-bottom:10px; line-height:1.4}
h3 { font-size:16px; margin-bottom:0px; padding:0; line-height:1.3; font-weight:400;letter-spacing:1px; -webkit-margin-after:0px;color:#289f82 }
u { background-color:#bbefe1; padding: 2px 6px; text-decoration:none; color:#555; font-size:70% }
s { color:#aaa}
.aligncenter { position:relative; text-align:center; display:block}
footer {
	display:table; background:url(images/footer2.gif) no-repeat top right; background-size:cover; padding:20px; margin: 20px auto; text-align:center; font-size:12px; letter-spacing:1px; width:95%; }
strong { font-family:'montserrat',sans-serif; font-size:80%}

.padding ul { width:80%; margin:0 auto; }
.padding li { list-style-type:katakana-iroha; color:#999 } 
	

/*Use a media query to add a breakpoint at 800px:*/
@media (max-width:800px) {
  .left, .right {
    width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
  }
}
@media (max-width:960px) {
	body { overflow-x:hidden}
	header img { margin:0 auto; text-align:center; display:block; float:none; }
  ul.nav { position: static; display:block; text-align:center; margin:15px auto 30px auto; float:none; }
  ul.nav li a{background-color:#ffcadd; border-bottom: 3px solid #ffb5d1; font-size:12px; font-weight:700; }
  ul.nav li a:hover { color:#000; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none }
  .center, figure { text-align: center; }
  .owned img { height:auto; max-width:100%; }
}
.container:after,.container:before,.row:after,.row:before,.clear:after,.clear:before{content:"";display:table;clear:both}
.col,.half,.third,.twothird,.threequarter,.quarter{float:left;width:100%}
@media (min-width:601px){.col.m1{width:8.33333%}.col.m2{width:16.66666%}.col.m3,.quarter{width:24.99999%}.col.m4,.third{width:33.33333%}
.col.m5{width:41.66666%}.col.m6,.half{width:49.99999%}.col.m7{width:58.33333%}.col.m8,.twothird{width:66.66666%}
.col.m9,.threequarter{width:74.99999%}.col.m10{width:83.33333%}.col.m11{width:91.66666%}.col.m12{width:99.99999%}}
@media (min-width:993px){
.content{max-width:980px;margin:auto}.rest{overflow:hidden}
}
@media (max-width:600px){
.stathalf { width:50%; float:left; display:inline-block } 
.stats {padding-top:0; margin-top:0; margin-bottom:15px}

}

/* owned pics */
#center { width:auto; max-width:100%; margin: 0 auto; display:block; text-align:center !important }
figure { display:inline-block }
.owned {
  position: relative;
  overflow: hidden;  margin: 10px 1%;
   max-width: 286px; height:auto;
  color: #333;
  font-size: 16px;  background-color: rgba(255, 160, 195, 0.8);
}
.owned img { padding:8px; background-image:url(images/bg.gif); background-repeat: no-repeat; background-size:cover; z-index:0 }
.owned * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.owned img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
  height:auto
}

.owned figcaption {
  position: absolute; text-align:center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 30px;
  opacity:0;
   transition: all .6s ease;
   -moz-transition: all .6s ease;
   -webkit-transition: all .6s ease;
}

.owned h2, .owned h3, .owned p {
  margin: 0;
}

.owned h2 {
  line-height: 1.2em; border-bottom:none; font-family:'eb garamond', serif; letter-spacing:0; text-transform:none;  font-size: 24px;  color: #000;
}

.owned h3 {
  color: #333; font-size: 12px;
  font-weight: normal; letter-spacing: 0;
}

.owned p {
  font-size: 0.9em; text-indent:0;
  margin-top: 0; text-align:center;
  padding: 3px 0 15px;
  line-height: 1.5em;
}

.owned a {
  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  z-index: 1; border-bottom:none
}

.owned:hover > img {
  -webkit-filter: blur(15px);
  filter: blur(15px);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0.2;
}

.owned:hover figcaption,
.owned.hover figcaption {
  opacity:0.9
}

.owned a:hover { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}