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

#content {
 padding: 60px 0 100px 0;
}


h1 {font-size:1.8em; color: #000; margin:0 0 40px 0; border-bottom:1px solid #ddd; padding-bottom: 25px;}
h1 span {display: block; font-size:.6em; letter-spacing: .1em; font-weight: 200; color:#019377;}


ul.magazines {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.magazines li {padding: 50px 0; width: 48%}

.mag {font-size:0; }
.cover { display: inline-block; vertical-align: top}
.cover img {width: 171px; border:1px solid #eee;}
.pages {display: inline-block; padding-left: 10px; width: 356px; vertical-align: top}
.pages img {border:1px solid #eee;}

.magazines h3 {font-weight: bold; font-size:1.03em; margin-top: 1em; color: #111;}
.mag-info p {display: inline-block; padding-right: 1em; font-size:.93em; color: #666; }

.pages a {
 display: block;
 position: relative;
}
.pages a img {
 opacity: 1;
}
.pages a .pdf-overlay {
 width: 100%;
 height: 100%;
	background-color: rgba(0,0,0,0.7);
	color: #FFF;
	opacity: 0;
	position: absolute;
	text-align: center;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
 font-size:15px;
}
.pages a:hover .pdf-overlay {
	opacity: 1;
}
.pages a .pdf-overlay p {position: absolute; 
top: 70%;
width: 100%;
text-align: center;
line-height: 1;
margin-top: -17px;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;}
.pages a:hover .pdf-overlay p {top: 50%;}
.pages a .pdf-overlay p span {font-size:34px; display: inline-block; margin-right: .5em; vertical-align: middle;}

.category-list {margin: 2em 0;}
.category-list .allmag,
.category-list li {display: inline-block; vertical-align: top; margin-bottom: 5px;}

.category-list ul {display: inline; }

.category-list .allmag,
.category-list li {border:1px solid #eee; padding: 10px 20px; background: #fff; font-size:.85em; color: #aaa; letter-spacing: .2em;}

.category-list a {color:#111; letter-spacing: 0; font-weight: bold; }
.category-list a:hover {color:#999;}
.category-magazine .allmag,
.category-list li.current-cat{ background: #ccc; border:1px solid #ccc; color:#333;}
.category-magazine .allmag a:hover,
.category-list li.current-cat a:hover{color:#111; cursor: default!important;}
.magtxt {display: none;}


@media screen and (max-width: 1023px), print {
 ul.magazines {margin-left: 0px}
 .cover { width: 32.3%;}
 .cover img {width: 100%; border:1px solid #eee;}
 .pages {padding-left: 14px; width: 67.7%; }
 
}
@media screen and (max-width: 1023px), print {
ul.magazines li {width: 100%}
}

@media screen and (max-width: 599px) {
 
 ul.magazines li {padding: 20px 0;}
 .mag {font-size:1em; }
 .cover { display: table; width: 100%; }
 .cover > div { display: table-cell; vertical-align: middle; padding: 15px; background: #e4e4e4; }
 .cover > div:first-child { width: 32%;padding-right: 0; }
 .magtxt {display: table-cell; }
 .pages {width: 100%; padding: 0 15px 15px; background: #e4e4e4; }
 .magtxt-pc {display: none;}
 .cover img, .pages img { border:none;}
}

/*---------------------------------------------
	For - 340px
  ---------------------------------------------*/

@media screen and (max-width: 340px) {
 
.category-list .allmag,
.category-list li {display: block; vertical-align: top; margin-bottom: 5px;}
}