@charset "UTF-8";

@import "vars";
@import "colors";

.carousel-indicators {
  bottom: initial;
  top: 10px;
  height: 24px;
}

.header-banner {
  position: relative;
  
  .header-border-top,
  .header-border-bottom {
    height: 8px;
    background-repeat: repeat-x;
    background-image: url('/gfx/layout/mikkeli-banner-border.png');
  }
  
  .header-banner-item {
    height: 560px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    @media (max-width: $break-small) { 
      height: 300px;
    }

    .banner-content-container {
      margin-left: 0;
      margin-right: 0;
      padding-left: 250px;
      padding-right: 250px;
      
      @media (max-width: $break-medium) { 
        padding-left: 50px;
        padding-right: 50px;
      }
      
      @media (max-width: $break-small) { 
        padding-left: 70px;
        padding-right: 70px;
      }
      
      @media (max-width: $break-x-small) { 
        padding-left: 50px;
        padding-right: 50px;
      }

      a.banner-link {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        background: transparent;
        z-index: 0;
      }
    
      h1 {
        @include font-h1();

        @media (max-width: $break-small) {
          font-size: 60px;
          line-height: 60px;
        }
      }
      
      .banner-text-container {
        margin-top: 15px;
        
        * {
          margin: 0;
          padding: 0;
        }
      }
      
      .banner-text {
        @include font-std(18px);
        padding: 5px;
        margin-right: -5px;
      }
    
      p, h1 {
        position: relative;
        z-index: 1;
        color: $valkoinen;
        text-shadow: 3px 3px 3px #000000;
      }
    }  
  }
}

.tiles {
  @media (max-width: $break-x-small) { 
    padding-left: 25px;
    padding-right: 25px; 
  }

  .tile {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: 10px;
    
    a.tile-link {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: transparent;
      z-index: 1;
    }

    a.tile-link:focus {
      border: 2px solid $meri;
    }
    
    .details {
      height: 125px;
      padding-top: 30px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 10px;
    
      h2 {
        @include font-h2();
        font-weight: 400;
        color: $valkoinen;
        margin-bottom: 10px;
      }
      
      .tile-text {
        position: absolute;
        bottom: 20px;
        width: 100%;
        left: 0;
        padding-left: 25px;
        padding-right: 12px;
        
        .fa-angle-right {
          float: right;
          color: $valkoinen;
          background: $musta;
          padding: 0 8px;
          font-size: 26px;
        }
      }
      
      p {
        @include font-h7();
        color: $valkoinen;
        display: inline-block;
        padding: 0;
        margin: 0;
        
        a {
          color: $valkoinen;
          text-decoration: none;
          display: inline-block;
          padding: 0;
          margin: 0;
        }
      }
    }
  }
  
  .menu-most-popular {
    background: $musta;
    padding: 20px 15px 5px 25px;
    
    h3 {
      @include font-h5();
      color: $valkoinen;
      margin-bottom: 10px;
    }
    
    ul {
      margin-left: 0;
      margin-bottom: 0;
      padding-left: 0;
      padding-bottom: 0;
    }
     
    .nav-item {
      padding-top: 10px;
      padding-bottom: 10px;
      display: block;
      list-style: none;

      &:not(:last-child) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      }
      
      .nav-link {
        width: 100%;

        .fa-angle-right {
          float: right;
          background: $valkoinen;
          color: $musta;
          padding: 0 8px;
          font-size: 27px;
        }
      }

    }
  
    a {
      @include font-h6();
      color: $valkoinen;
      text-decoration: none;
    }
  }
  
}

.event-carousel-indicators {
  .carousel-indicators {
    bottom: initial;
    top: 10px;
  }
}

.top-article-container {
  @media (max-width: $break-x-small) { 
    padding-left: 25px;
    padding-right: 25px; 
  }
}

.thumb-articles-container {
  @media (max-width: $break-x-small) { 
    padding-left: 25px;
    padding-right: 25px; 
  }
}

.text-articles-container {
  @media (max-width: $break-x-small) { 
    padding-left: 25px;
    padding-right: 25px; 
  }
}

.news-article {
  
  position: relative;
  overflow: hidden;
  
  .date {
    @include font-h9();
    background: $musta;
    color: $valkoinen;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
  }

  .title {
    a {
      @include font-h6();
      color: $musta;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .details {
    background: $news-details-background-color;
    padding: 20px 20px 10px 20px;
  }
  
  .news-article-image {
    min-height: 200px;
    background-size: cover;
  }
  
  &.thumb-article {
    margin-bottom: 15px;
    
    .details {
      min-height: 130px;
      padding-top: 6px;
     
      .date {
        margin-top: -43px;
        position: absolute;
        left: 0;
      }
      
      .title {
        padding: 20px 5px;
      }
    }
  }
   
  &.text-article {
    
    border-top: 1px solid #aaa;
    padding-top: 7px;
    padding-bottom: 7px;
      
    .date {
      float:left;
      width: 15%;
      background: $musta;
      color: $valkoinen;
    }
  
    .title {
      float:left;
      width: 83%;
      padding-left: 12px;
      
      a {
        color: #373a3c;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    
    }

    @media (max-width: $break-medium) { 
      .date{
        width: 20%;
      }
      .title{
        width: 78%;
      }
    }

    @media (max-width: $break-small) { 
      .date{
        width: 25%;
      }
      .title{
        width: 73%;
      }
    }
    
  }
    
}

.all-news-link {
  margin-top: 15px;
  margin-bottom: 30px;
  background: $musta;
  color: $valkoinen;
  display: inline-block;
  @include font-ultra(20px);
  padding: 20px 24px;
  line-height: 20px;
  
  &:hover {
    color: $valkoinen;
  }
}

.text-articles-container {
  
  .row:last-child .text-article {
    border-bottom: 1px solid #aaa;
  }

}

.event-section {
  background-color: $event-calendar-background-color;
  
  .events-title {
    margin-top: 47px;
    margin-bottom: 26px;

    h3 {
      @include font-h4;
      color: $musta;
      text-transform: uppercase;
    }

  }

  .events-container {
    margin-left: -15px;
    margin-right: -15px;

    @media (max-width: $break-medium) { 
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }

    @media (max-width: $break-small) { 
      margin-left: 0;
      margin-right: 0;
      padding-left: 10px;
      padding-right: 10px;
    }

    .event-container {
      margin-left: 15px;
      margin-right: 15px;
    }
  }

  .event {
    height: 220px;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;

    @media (max-width: $break-x-small) { 
      background-size: cover;
      background-position: center center;
    }
    
    @media (min-width: $break-medium) and (max-width: $break-large) { 
      background-size: cover;
      background-position: center center;
    }
    
    .event-link {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    }

    .event-link:focus {
      border: 2px solid $meri;
    }

    .details {
      position: absolute;
      background: $valkoinen;
      height: 90px;
      left: 0;
      right: 0;
      bottom: 0;
      padding-right: 15px;

      .date, 
      .place {
        color: $musta;
      }

      .date {
        @include font-h3;
        margin-top: 0;
        text-align: center;
        letter-spacing: 0.5px;
        padding-top: 8px;
        padding-left: 15px;
        
        @media (max-width: $break-x-small) { 
          font-size: 34px;
          line-height: 44px;
        }
        
        @media (min-width: $break-medium) and (max-width: $break-large) { 
          font-size: 34px;
          line-height: 44px;
        }
      }

      .name {
        @include font-h10;      
        color: $musta;
        white-space: nowrap;
      }

      .place {
        @include font-h6;
        margin-top: 15px;
        text-transform: uppercase; 
        white-space: nowrap;
      }

      .place,
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 15px;
      }
    }
  }

  .event-carousel-controls {

    .carousel-control {
      background-image: none;

      .icon-next, 
      .icon-prev {
        color: #c2c2c2;
        line-height: 0;
        font-size: 150px;
        font-family: serif;
        text-shadow: none;
      }

      &.left {
        left: -15%;  
      }

      &.right {
        right: -15%;  
      }
    }

  }

  .swiper-pagination {
    margin-top: 32px;
    margin-bottom: 13px;
    width: 24%;
    margin-left: 38%;
    position: relative;

    .swiper-pagination-bullet {
      margin: 0 3px;
      width: 10px;
      height: 10px;
      background: $event-inactive-bullet-color;
      opacity: 1;
    }
    
    .swiper-pagination-bullet-active {
      background: $event-active-bullet-color;
    }
  }

  .all-events-container {
    @include font-h8;
    padding-top: 15px;
    padding-bottom: 36px;

    a {
      color: $meri;
    }
    
  }
  
  .swiper-button-prev {
    background: none;
    background-color: transparent;
    border: 0;
    margin-left: 400px;
    margin-top: 60px;
    
    &::after {
      color: $event-arrow-color;
      font-family: "FontAwesome";
      content: "\f104";
      font-size: 40px;
      margin-top: -30px;
      margin-left: -8px;
      position: absolute;
    }
  }
  
  .swiper-button-next {
    background: none;
    background-color: transparent;
    border: 0;
    margin-right: 400px;
    margin-top: 60px;

    &::after {
      color: $event-arrow-color;
      font-family: "FontAwesome";
      content: "\f105";
      font-size: 40px;
      margin-top: -30px;
      margin-left: -8px;
      position: absolute;
    }
  }

  .pagination-container {
    display: flex;
    align-items: baseline;

    .slide-play {
      background-color: $meri;
      color: $valkoinen;
      margin-left: 4%;
      margin-right: 1%;
      margin-bottom: 2px;
      border: 0;
    }
    
    .slide-pause {
      background-color: $meri;
      color: $valkoinen;
      margin-bottom: 2px;
      border: 0;
    }

  }
}

.content-blocks-container {
  padding-top: 40px;
  padding-bottom: 70px;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  background-size: cover;
  
  .content-block {
    text-align: center;
    padding-top: 48px;
    padding-bottom: 35px;
    min-height: 455px;
    position: relative;
    margin-bottom: 60px;
    padding-left: 15px;
    padding-right: 15px;
    @media (min-width: $break-medium) { 
      height: 100%;
    }
    
    .icon {
      height: 72px;
      width: 72px;
      background-position: center bottom;
      background-repeat: no-repeat;
      display: inline-block;
    }

    .content,
    a {
      @include font-h7;
      color: $valkoinen;
      margin-top: 10px;
    }
    
    .title {
      h4 {
        @include font-h4;
        margin-top: 17px;
        text-transform: uppercase;
        color: $valkoinen;
      }
    }

    &.info-block {
      background-color: $osallistu-background-color;

      .icon {
        background-image: url("/gfx/layout/mikkeli-osallistuvaikuta-icon2.png");
      }
    }
  
    &.jobs-block {
      background-color: $kuntarekry-background-color;
      
      .icon {
        background-image: url("/gfx/layout/mikkeli-kunta-rekry-icon2.png");
      }
    
      .content a {
        text-transform: uppercase;
      }
    }
  
    &.announcements-block {
      background-color: $kuulutukset-background-color;

      .icon {
        background-image: url("/gfx/layout/mikkeli-kuulutukset-icon.png");
      }
    }
  
    .content-block-row {
      margin-bottom: 10px;
      
      a {
        display: block;
      }
    }
  
    .all-link {
      @include font-h7;
      border: 3px solid $valkoinen;
      padding: 12px 26px;
      margin-left: auto;
      margin-right: auto;
      white-space: nowrap;
      display: inline-block;
      color: $valkoinen;
    }
  }
}

.social-media-item, 
.social-media-items-grid-sizer {
  width: calc(100% - 10px);
  display: inline-block;
  margin: 5px;
}

.social-media-item {
  border: 1px solid #e7e7e7;
 
  &[data-source="facebook"] {
    background: #edeef2;
    color: #696969;
    
    .link {
      color: #696969;
    }
  }
  
  &[data-source="twitter"] {
    background: $meri;
    color: $valkoinen;
    
    .link {
      color: $valkoinen;
    }
  
    .text a {
      color: $sitruuna;
    }
    
  }
  
  &[data-source="instagram"] {
    background: $valkoinen;
    color: #696969;
    
    .link {
      color: #696969;
    }
  }

  .header {
    padding: 10px 15px;
    border-bottom: 1px solid #e7e7e7; 
  }

  .link {
    display: inline-block;
    margin-left: 18px;
    vertical-align: top;
    margin-top: 6px;
    text-decoration: none;
    @include font-std(16px);
    
    &:hover {
      text-decoration: underline;
    }
  }

  .icon {
    vertical-align: top;
    font-size: 34px;
    display: inline-block;
        
    &.fa-facebook-official {
      color: #3c5a99;
    }
  
    &.fa-instagram {
      color: #696969;
    }
  
    &.fa-twitter {
      color: $valkoinen;
    }
  }

  .content {
    .text {
      @include font-std(15px);
      padding: 20px 25px;
    }
  
    img {
      max-width: 100%;
    }
  }
}

@media screen and (min-width: 768px) {
  .social-media-item, 
  .social-media-items-grid-sizer {
    width: calc(50% - 10px);
    display: inline-block;
  }
}

@media screen and (min-width: 992px) {
  .social-media-item, 
  .social-media-items-grid-sizer {
    width: calc(25% - 10px);
    display: inline-block;
  }
}

@media screen and (max-width: 1201px) {
  .event-section {
    .swiper-button-prev {
      margin-left: 200px;
    }
    
    .swiper-button-next {
      margin-right: 200px;
    }

    .pagination-container {
      .slide-play {
        margin-left: 20%;
        margin-right: 1.5%;
      }
    } 
  }
}

@media screen and (max-width: 992px) {

  .event-section {
    .swiper-button-prev {
      margin-left: 20%;
    }
    
    .swiper-button-next {
      margin-right: 20%;
    }

  }

}

@media screen and (max-width: 750px) {

  .event-section {

    .swiper-pagination {
      width: 60%;
      margin-left: 20%;
    }

    .swiper-button-prev {
      
      visibility: hidden;

    }
  
    .swiper-button-next {

      visibility: hidden;

    }

    .pagination-container {
      .slide-play {
        margin-left: 5%;
        margin-right: 1.5%;
      }
    } 
  }
}