@import 'init';

.responsive_map {
    border-radius: 15px;
    border: 3px solid @brown;
    overflow:hidden;
/*    padding-bottom:56.25%;*/
    padding-bottom:30%;
    position:relative;
    height:100%;
    width: 100%;
    margin-bottom: 2rem;
    iframe{
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }
}
@media only screen and (max-width:991px) {
  .responsive_map {
    padding-bottom: 50%;
  }
}
@media only screen and (max-width:575px) {
  .responsive_map {
    padding-bottom: 90%;
  }
}

.paginate-clean {
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    table {
        margin: 0 auto;
    }
    td {
        display: block;
        text-align: center;
    }
    .left-options {
      display: none;
        /*background-color: @grey;
        color: @brown;
        padding: 3px 16px;
        border-radius: 20px;
        &:first-letter {
            text-transform: capitalize;
        }*/
    }
    .links {
        padding-top: 16px;
        padding-bottom: 16px;
        span, a {
            margin-left: 8px;
            margin-right: 8px;
        }
        .curLink {
            color: @d-brown;
            border-bottom: 1px solid @d-brown;
        }
        a {
            color: @brown;    
        }
        .prevLink, .nextLink {
            color: @d-brown;
        }
        .prevLink {
            margin-right: 8px;
        }
        .nextLink {
            margin-left: 8px;
        }
    }
    .right-options {
        display: none;
    }
}

h2 {
  .fw-7;
  .fs-xl;
  text-transform: uppercase;
  color: @brown;
}
h3 {
  .fw-7;
  .fs-md;
  text-transform: uppercase;
  color: @brown;
}
h4 {
  .fw-7;
  font-size:1.1em;
  color:@brown;
}
h5 {
  .fw-7;
  font-size:1em;
  color:@brown;
}
h6 {
  .fw-7;
  font-size:0.9em;
  color:@brown;
}

a:not(.btn):not(.nav-link) {
  word-break:break-word;
}
.banner {
  height: 600px;
  .container {
    margin-top:0;
  }
  .content {
    max-width:100%;
    margin-bottom:0;
    font-size:2.2em;
  }
}
#page-content > .container {
  padding-top:64px;
  padding-bottom:64px;
}
@media only screen and (max-width:991px) {
  .banner {
    height: 300px;
    .content {
      font-size:1.4em;
    }
  }
}
@media only screen and (max-width:575px) {
  h2 {
    font-size: 1.2em;
  }
  h3 {
    font-size: 1.1em;
  }
  h4 {
    font-size: 1em;
  }
  h5 {
    font-size: 0.9em;
  }
  h6 {
    font-size: 0.85em;
  }
  .banner {
    height: 160px;
    .title {
      font-size:1.3em;
    }
    .content {
      font-size:0.8em;
    }
  }
  #page-content > .container {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
.editorContent {
  img {
    height: auto;
  }
  a {
    color:@brown;
    text-decoration:underline;
  }
  .btn {
    a {
      text-decoration:none;
    }
  }
  .btn-brown {
    a {
      color:white;
      text-decoration:none;
    }
    &:hover a {
      color:@brown;
    }
  }
}
.memWrapper {
  margin-top: 22px;
  padding: 16px;
  border-radius: 12px;
  .member- {
    &image {
      border-radius: 12px;
      max-height: 198px;
      overflow: hidden;
    }
    &name, &position {
      text-transform:uppercase;
    }
    &name {
      color: @brown;
      margin-top:12px;
    }
    &position {
      margin-bottom:20px;
    }
    &desc {
      margin-bottom: 20px;
    }
  }
  .right {
    position: relative;
  }
  .btnRead {
    cursor:pointer;
    text-transform:uppercase;
    color:@brown;
    position: absolute;
    right:16px;
    bottom:0;
    span {
      display: none;
      &.active {
        display: inline-block;
      }
    }
  }
  @media only screen and (max-width: 575px) {
    .member-image {
      max-height: 260px;
    }
  }
}
#weddings {
  .images {
    display: flex;
    img {
      height: auto;
      object-fit:cover;
    }
    &.img-3 img { 
      width: 33.3%;
      flex: 0 0 33.3%;
    }
    &.img-2 img {
      width: 50%;
      flex: 0 0 50%;        
    }
  }
  .bg-brown {
    padding: 1rem;
    border-radius: 12px;
  }
  .container {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  h2 {
    margin-bottom: 1rem;
  }
  .weddings-contents {
    display: flex;
    .left {
      width: 33.3%;
      flex: 0 0 33.3%;
      img {
        width: 100%;
        height: auto;
      }
    }
    .right {
      width: 66.6%;
      flex: 0 0 66.6%;
      padding-left: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    a {
      color:@brown;
      text-decoration:underline;
    }
  }
  @media only screen and (max-width: 575px) {
    .weddings-contents {
      flex-direction: column;
      .left, .right {
        width: 100%;
        flex: 0 0 100%;
      }
      .right {
        margin-top: 8px;
        padding-left: 0;
      }
    }
    .images {
      flex-direction: column;
      &.img-3, &.img-2 {
          img {
            width: 100%;
            flex: 0 0 100%;
          }
      }
    }
  }
}
#news-list {
  .news-item {
    display: flex;
  }
  .news-info {
    background-color: @brown;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    width: 100%;
/*    padding: 15px;*/
    border-radius: 15px;
    &:hover {
      background-color: @d-brown;
    }
    a {
      color: white;
      text-decoration: none;
      width: 100%;
      padding: 15px;
    }
    .date-wrapper {
      color: @grey;
      margin-bottom: 1rem;
    }
    .month {
      font-size: 1.2em;
      line-height: 1;
    }
    .date {
      .fw-7;
      font-size: 3.6em;
    }
    .news-title {
      .fw-7;
      font-size: 1.2em;
      margin-bottom:1rem;
    }
    .description {
      .fw-5;
    }
  }
  @media only screen and (max-width:575px) {
    .news-info {
      .date-wrapper {
        margin-bottom:0;
      }
      .news-title {
        margin-bottom:0.5rem;
      }
    }
  }
}
#news-article {
  img {
    height:auto;
  }
}
#title-wrapper {
  position: relative;
  .back {
    position: absolute;
    top: -40px;
    right: 0;
    .btn {
      font-size: 1em;
      display: flex;
      align-items: center;
      padding: 4px 8px;
      color: @brown;
      i {
        font-size: 1.3em;
        margin-right: 8px;
        transition: .4s transform ease-in;
      }
    }
    &:hover {
      .btn i {
        transform: translateX(-12px);
      }
    }
  }
  .date {
    line-height: 1;
    .fw-7;
    margin-bottom: 20px;
  }
  @media only screen and (max-width:575px) {
    .back {
      top:-34px;
      .btn {
        font-size:0.8em;
      }
    }
  }
}
#contact {
  .contact-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .left-bar {
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    &::before {
      content: '';
      position: absolute;
      top: 16px;
      left: 0;
      width: 4px;
      bottom: 32px;
      background-color: @grey;
      border-radius: 24px;
    }
    p {
      margin-bottom: 8px;
      span {
        .fw-7;
      }
    }
    &.first {
      width: 27.8%;
      flex: 0 0 27.8%;
    }
    &.second {
      width: 26.5%;
      flex: 0 0 26.5%;
    }
    &.third {
      width: 45.7%;
      flex: 0 0 45.7%;
    }
    &.fourth {
      width: 25%;
      flex: 0 0 25%;
    }
    &.fifth {
      width: 25%;
      flex: 0 0 25%;
    }
  }
  .last {
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    color: white;
    height: max-content;
    h3 {
      color: white;
    }
  }
  #socials-background {
    background-image: url('/images/layout/contact-socials.png');
    background-size: cover;
    background-repeat:no-repeat;
    border-radius: 15px;
    display: flex;
    width:100%;
    height:106px;
  }
  #contact-socials-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
    width: 66%;
    p {
      margin-bottom: 0;
    }
  }
  #contact-socials-right {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 34%;
    font-size: 60px;
    background-color:@d-brown;
    border-radius:15px;
    a {
      color: white;
    }
  }
  @media only screen and (max-width:991px) {    
    .left-bar {
      &.first {
        width: 50%;
        flex: 0 0 50%;
      }
      &.second {
        width: 50%;
        flex: 0 0 50%;
      }
      &.third {
        width: 100%;
        flex: 0 0 100%;
      }
      &.fourth {
        width: 50%;
        flex: 0 0 50%;
      }
      &.fifth {
        width: 50%;
        flex: 0 0 50%;
      }
    }
    .last {
      width: 100%;
      flex: 0 0 100%;
    }
  }
  @media only screen and (max-width:575px) {    
    .left-bar {
      &.first, &.second, &.fourth, &.fifth {
        width: 100%;
        flex: 0 0 100%;
      }
      &.fifth {
        h3 {
          display: none;
        }
      }
    }
    #socials-background {
      flex-direction: column;
      height: auto;
    }
    #contact-socials-left {
      padding: 8px;
      width:100%;
    }
    #contact-socials-right {
      font-size: 30px;
      width:100%;
      padding: 8px;
    }
  }
}
#contact-socials-right {
  a span {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    top: auto;
    background-color:white;
    color:black;
  }
}
.gallery {
    color: black;
}
.gallery-image {
    height: 400px;
    background-size: cover;
    border: 1px solid @brown;
    border-radius: 8px;
    margin-bottom: 40px;
}
.gallery-title, .gallery-desc {
    margin-bottom: 16px;
}
.gallery-title {
    line-height: 1;
    font-size: 1.3em;
}
.gallery-desc {
    font-family: 'Open Sans', sans-serif;
}
.title-photos {
    color: @brown;
    margin-bottom: 2rem;
    position: relative;
    .btn {
/*        float: right;*/
        /*position: absolute;
        top: -50px;
        right: 0;*/
    }
}
.photos {
    height: 300px;
    margin-bottom: 2rem;
    img {
        width: 100%;
        height: 100%;
        border: 1px solid @brown;
        border-radius: 8px;
        object-fit: cover;
    }
}
.editorContent {
  dl, ol, ul {
    padding-inline-start:30px;
  }
  li {
    margin-bottom: 1rem;
  }
}
@media only screen and (max-width: 1199px) {
  .gallery-image {
    height:250px;
  }
}
@media only screen and (max-width: 991px) {
  .gallery {
    margin-bottom:1rem;
  }
  .title-photos .btn {
    top:-50px;
  }
  .photos {
    height: 130px;
  }
}
@media only screen and (max-width: 575px) {
  .gallery-image {
    margin-bottom: 1rem; 
    height:200px;
  }
  .fc-toolbar h2 {
    font-size: 1em;
  }
  #events .resultRow .result-details span {
    text-align: center;
    width:100%;
    padding-left:0;
  }
  .resultRow .result-more-details {
    margin: 0 auto;
  }
}
#festival > div {
  margin-top:15px;
  margin-bottom:15px;
}
@media only screen and (max-width:575px) {
  #festival > div {
    margin-top:15px;
    margin-bottom:0;
  }
}