@charset "UTF-8";
/* CSS Document */
.marakkillorikkalum {
  background-image: url("/images/wood-bg.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
}
.marakkillorikkalum .block {
  margin-top: 24px;
  margin-bottom: 24px;
}
.marakkillorikkalum .parent-page .cat-title,.marakkillorikkalum .parent-page .title-bar {
  color: #F2DEC5 !important;
  margin-bottom: 24px;
}
.marakkillorikkalum .cat-title .sub,.marakkillorikkalum .title-bar {
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.2rem;
}
.marakkillorikkalum .h-block, .marakkillorikkalum .v-block, .marakkillorikkalum .h-inline, .marakkillorikkalum .h-block-desktop, .marakkillorikkalum .h-block-tab-pro, .marakkillorikkalum .h-block-desktop, .marakkillorikkalum .v-block-tab-pro, .marakkillorikkalum .h-block-desktop, .marakkillorikkalum .v-block-tab {
  border-radius: 12px;
  overflow: hidden;
}
.marakkillorikkalum .h-block .story-image {
  order: 1;
}
.marakkillorikkalum .authors-name {
  font-family: 'KENZ MDM body online', sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.4;
  margin-top: 0px;
}
/*-------------TOP BLOCK---------*/
.marakkillorikkalum .top-carousal-block {}
.marakkillorikkalum .logo-montage {
  text-align: center;
}
.marakkillorikkalum .logo-montage img{
  max-width: 500px;
}
.marakkillorikkalum .follow-box {
  background-color: rgba(0, 0, 0, 0);
  border: solid 2px #F2DEC5;
  color: #F2DEC5;
  border-radius: 12px;
}
/*-------------SP MENU BLOCK---------*/
.mara-menu {
  border-top: dashed 2px #F2DEC5;
  border-bottom: dashed 2px #F2DEC5;
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center;
}
.mara-menu.page-navbar ul.desktop-menu li {
  color: #F2DEC5;
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 600;
}
.marakkillorikkalum .details-box {
  color: #000;
  position: relative;
}
/*-------------CELEBS FAV---------*/
.marakkillorikkalum .std-column {
  grid-template-columns: repeat(8, 300px);
  overflow-x: scroll;
}
.marakkillorikkalum .celeb-block .img-author {
  position: absolute;
  width: 75px;
  height: 75px;
  border: solid 5px #DEB400;
  object-fit: cover;
  -webkit-object-fit: cover;
  border-radius: 50%;
  align-self: center;
  margin-top: -55px;
}
.marakkillorikkalum .celeb-block .authors-name {
  text-align: right;
}
/*-------------INTERVIEWS BLOCK---------*/
.marakkillorikkalum .interviews-block {
  background-image: url("../img/mal-movie-collage.jpg");
  background-size: cover;
  background-position: center center;
  padding-top: 12px;
  padding-bottom: 48px;
  border-top: dashed 2px #F2DEC5;
  border-bottom: dashed 2px #F2DEC5;
}
.marakkillorikkalum .column-slider {
  grid-template-columns: repeat(8, 300px);
  overflow-x: scroll;
}
.marakkillorikkalum .column-slider .h-block {
  display: grid;
  grid-template-columns: 85px 4fr;
  justify-items: stretch;
  align-items: stretch;
  grid-auto-rows: auto;
}
.marakkillorikkalum .column-slider .author-image {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, transparent 50%, #DCD5C4 50%);
  background: -webkit-linear-gradient(to right, transparent 50%, #DCD5C4 50%);
}
.marakkillorikkalum .column-slider .story-image {
  order: 3;
}
.marakkillorikkalum .column-slider .hd {
  color: #000;
  margin-top: 4px !important;
  margin-bottom: 4px;
}
.marakkillorikkalum .column-slider .author-image .img-author {
  width: 75px;
  height: 75px;
  border: solid 5px #ddd;
  object-fit: cover;
  -webkit-object-fit: cover;
  border-radius: 50%;
  align-self: center;
  filter: grayscale(100%);
  transition: 1s;
}
.marakkillorikkalum .column-slider .author-image .img-author:hover {
  filter: grayscale(0%);
}
.marakkillorikkalum .column-slider .column-name {
  font-family: 'KENZ MDM head online', sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  line-height: 1.5;
  color: #333;
}
.marakkillorikkalum .column-slider .authors-name {
  color: #333;
}
.marakkillorikkalum .column-slider .column-name a {
  position: relative;
  padding-bottom: 0;
}
.marakkillorikkalum .column-slider .column-name a i {
  font-size: 1rem;
  position: relative;
  top: 3px;
  color: #333;
  margin-right: 3px;
}
/*-------------VIDEOS---------*/
.marakkillorikkalum .videos-block .story-image .icon-rep {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  right: auto;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  opacity: 0.8;
}
.marakkillorikkalum .videos-block .story-image .icon-rep i {
  font-size: 3rem;
}
/*-------------BOTTOM SEC---------*/
.marakkillorikkalum .bottom-block {
  background-image: url("../img/mal-movie-collage-2.jpg");
  background-size: cover;
  background-position: center center;
  padding-top: 12px;
  padding-bottom: 24px;
  margin-bottom: 0;
  border-top: dashed 2px #F2DEC5;
  border-bottom: dashed 2px #F2DEC5;
}
.marakkillorikkalum .bottom-block .dual-block {
  grid-auto-rows: auto;
  grid-gap: 24px;
}
.marakkillorikkalum .bottom-block .photos .lead-photo .story-image .icon-rep {
  position: absolute;
  top: calc(50% - 28px);
  left: calc(50% - 28px);
  right: auto;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;
  border-radius: 12px;
}
.marakkillorikkalum .bottom-block .photos .lead-photo .story-image .icon-rep i {
  font-size: 4rem;
}
.marakkillorikkalum .bottom-block .photos .other-photos .story-image .icon-rep {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;
  border-radius: 5px;
}
.marakkillorikkalum .bottom-block .photos .story-image .icon-rep i {
  position: relative;
  font-size: 1.5rem;
  top: 2px;
}
.marakkillorikkalum .bottom-block .photos .other-photos {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  margin-top: 12px;
}
.marakkillorikkalum .bottom-block .photos .other-photos .h-inline {
  grid-auto-rows: auto;
}
.marakkillorikkalum .events .details-box {
  background-image: none;
  background-color: rgba(0, 0, 0, 0);
}
.marakkillorikkalum .events .details-box .hd {
  color: rgba(255, 255, 255, 1.00);
  margin-top: 4px;
  margin-bottom: 4px;
}
.marakkillorikkalum .events .details-box .section-title, .marakkillorikkalum .events .details-box .post-time {
  color: rgba(255, 255, 255, 1.00);
}
.marakkillorikkalum .events .list {
  padding-bottom: 12px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
}
.marakkillorikkalum .events .count {
  color: #F2DEC5
}
.marakkillorikkalum .events .month {
  font-size: 1rem;
}
/* =============DESKTOP TO TAB=========== */
@media (min-width: 656px) {
  .marakkillorikkalum .parent-page .h-block {
    grid-template-columns: 1fr 3fr;
    grid-auto-rows: 98px !important;
  }
  .marakkillorikkalum .articles {
    grid-auto-rows: 428px;
  }
  .marakkillorikkalum .carousal .details-box, .marakkillorikkalum .photos .details-box {
    grid-column: 1/2;
    grid-row: 2/3;
    justify-items: bottom;
    padding: 12px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
    z-index: 1;
  }
  .marakkillorikkalum .articles .more-blocks .hd {
    margin-top: 4px;
    margin-bottom: 4px;
  }
}
/* =============DESKTOP ONLY=========== */
@media (min-width: 1260px) {
  .marakkillorikkalum .carousal-outer {
    grid-template-columns: repeat(4, 1fr)
  }
  .marakkillorikkalum .carousal {
    grid-column: span 3;
  }
  .marakkillorikkalum .articles {
    grid-template-columns: repeat(3, 1fr);
  }
  .marakkillorikkalum .articles .lead {
    grid-column: span 2;
  }
  .marakkillorikkalum .articles .lead .h-block-desktop {
    grid-auto-rows: 428px;
    grid-template-columns: 3fr 2fr;
  }
  .marakkillorikkalum .articles .lead .story-image {
    order: 1;
  }
  .marakkillorikkalum .articles .lead .details-box {
    order: 2;
  }
  .marakkillorikkalum .articles .lead .details-box .sub-head ul li::before {
    border: 1px solid #000;
  }
  .marakkillorikkalum .videos-block .video-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .marakkillorikkalum .photos {
    grid-column: span 2;
  }
  .marakkillorikkalum .events {
    grid-column: span 2;
  }
  .marakkillorikkalum .events .h-block {
    grid-template-columns: 1fr 4fr
  }
}
/* =============TAB PRO ONLY=========== */
@media (max-width: 1259px) and (min-width: 980px) {
  .marakkillorikkalum .carousal-outer {
    grid-template-columns: repeat(3, 1fr)
  }
  .marakkillorikkalum .carousal {
    grid-column: span 2;
    order: 1;
  }
  .marakkillorikkalum .carousal-outer .ad-box-1 {
    grid-row: auto;
    order: 2;
  }
  .marakkillorikkalum .articles {
    grid-template-columns: 3fr 2fr;
  }
  .marakkillorikkalum .articles .lead .h-block-tab-pro {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 428px;
  }
  .marakkillorikkalum .videos-block .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .marakkillorikkalum .bottom-block .dual-block {
    grid-template-columns: 1fr 1fr;
  }
}
/* =============TAB MINI ONLY=========== */
@media (max-width: 979px) and (min-width: 656px) {
  .marakkillorikkalum .articles {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 428px;
  }
  .marakkillorikkalum .articles .lead .v-block-tab {
    grid-auto-rows: 214px !important;
  }
  .marakkillorikkalum .videos-block .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .marakkillorikkalum .bottom-block .dual-block {
    grid-template-columns: 1fr;
  }
}
/* =============MOBILE ONLY=========== */
@media (max-width: 655px) {
  .marakkillorikkalum .articles {
    grid-template-columns: 100%;
    grid-auto-rows: auto;
  }
  .marakkillorikkalum .story-image {
    order: 1;
  }
  .marakkillorikkalum .details-box {
    order: 2;
  }
  .marakkillorikkalum .videos-block .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .marakkillorikkalum .videos-block .video-grid .lead {
    grid-column: span 2;
  }
  .marakkillorikkalum .logo-montage img{
    max-width: 80%;
  }
}