/* BASIC css start */
box2 {
  max-width:1200px;
  margin: 0px auto;  
  color: #404040;
  padding: 20px 20px;
  text-align: center;
  font-family:'Nanum Gothic', serif;
  
}

box2 h1 {
  font-size: 1.5em;
  font-weight: bold;
  font-family:'Nanum Gothic', serif;
  text-align:center;
}

box2 ul {
 border-top:1px solid #747474;
  border-bottom:2px double #747474;
  padding: 5px 5px 12px 5px;
  margin:5px auto;
  max-width:100%;

}
box2 ul li {
   display: inline-block;
  list-style: none;
 text-align:center;
  width: 50%;
}

box2 ul li:first-child {
  font-size: 2em;
  text-align:center;
width: 100%;
}

/**
 * BASIC TYPE
 */

p:not(:last-child) {
  margin: 0 0 1em;
}

/**
 * BOX HACKING
 */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrapper { 
  max-width: 1200px;
  margin:0px auto;
  padding: 1.5em;
}

.masonry-wrapper {
  padding: 1.5em;
  max-width: 1200px;
  margin:0px auto;
}

.masonry {
  display: grid;
  grid-template-columns: repeat(1, minmax(100px,1fr));
  grid-gap: 20px;
  grid-auto-rows: 0;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  box2 ul li {
    width: 100% !important;
    display:block;
  }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    grid-template-columns: repeat(2, minmax(100px,1fr));
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    grid-template-columns: repeat(3, minmax(100px,1fr));
  }
}

.masonry-item {
  color: #404040;
  display:none;
  /*background-color: #f9f9f9;*/
}

.show {
  display: block;
}

.masonry-content img {
  
  mix-blend-mode:multiply;
  background-size:cover;
  max-width:100%;
}

.masonry-title, .masonry-description {
  margin: 0;
}
.masonry-title {
  font-weight: 700;
  font-size: 1.5rem;
  line-height:2rem;
  padding: 1rem 1.5rem;
  font-family:'Nanum Gothic', serif;
  text-align: center;
}
.masonry-description {
  padding: 1.5rem;
  font-size: 1rem;
  line-height:1.35rem;
  text-align: center;
  text-justify: inter-word;
  border-top: 1px solid #3DB7CC;
  border-bottom: 4px double #3DB7CC;
}

.masonry-date {
  padding:.5rem 1.5rem;
  text-align: center;
}

.masonry-byline {
  padding:.5rem 1.5rem;
  display:inline-block;
  width:48%;
  text-align:center;
  font-weight:bolder;
  color: red;
}

.masonry-location {
  padding:.5rem 1.5rem;
  display:inline-block;
  width:48%;
 text-align:center;
 font-weight:bolder;
 color: blue;
}

blockquote {
  padding-left:1rem;
  margin:5px 10px 15px 20px;
  font-family:'Nanum Gothic', serif;
  font-size:1.35rem;
  line-height:1.5rem;
  color:#aaa;
  border-left:1px solid #404040;
  text-align:center;
}

.masonry-footer {
  font-size: .75em;
  opacity: .25;
  text-align: center;
  padding-top: 3em; 
  padding-bottom: 3em;
  margin-bottom: -1.5em;
  transition: opacity 1s ease-in-out;
}
.masonry-footer a {
  color: currentColor;
}
.masonry-footer:hover, .masonry-footer:active, .masonry-footer:focus {
  opacity: .75;
}

/* Interest tag styles */
.tag {
  padding: 5px 8px;
  margin: 0px auto;
  background-color: #282828;
  /*border-radius: 20px;*/
  font-weight: 800;
  color: #fff;
  font-family:'Nanum Gothic', sans-serif;
  text-transform:uppercase;
  font-size:.10em;
  letter-spacing:0.085em;
  display:block;
  background:#3DB7CC;
  text-align: center;
}

.btn {
  border: none;
  outline: none;
  padding: .5rem .8rem;
  background: #3DB7CC;
  cursor: pointer;
  font-size:.85rem;
  color:#FFF;
  text-transform:uppercase;
  font-family:"Nanum Gothic", serif;
  margin:0px;
  
}

.btn:hover {
  background: rgba(0,0,0,0.35);
  color:#FFF;
}

.btn.active {
  background: #CCA63D;
  color: #FFF;

/* BASIC css end */