@import 'common.less';

#home_bg {
  background: url(../images/merloam-bg.png) no-repeat;
  background-size: cover;
  -webkit-animation: bg_home 5s;
  animation: bg_home 5s;
}


@-webkit-keyframes bg_home {
  from {
    opacity: 0.1;
  }

  to {
    opacity: 1;
  }
}


@keyframes bg_home {
  from {
    opacity: 0.1;
  }

  to {
    opacity: 1;
  }
}


// LANDING
.home-container {
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;

  @media(max-width:768px) {
    align-items: center;
    justify-content: center;
  }

  >div {
    @media(min-width:768px) {
      width: 50%;
      display: flex;
      align-items: center;
      padding: 0 120px;
      height: 100vh;
    }

    @media(max-width:768px) {
      padding: 0 35px;
    }

    &.merloam {
      position: relative;

      @media(min-width:768px) {
        justify-content: flex-end;
        height: 40px;
      }

      &:before {
        content: '';
        position: absolute;
        border-right: 1px solid black;
        display: block;
        height: 200%;
        right: 0;
        top: -50%;
      }

      img {
        transform: translateX(70%);
        transition-delay: 1s;
        animation-delay: 500ms;
      }

    }

    &.elephantine {
      justify-content: flex-start;

      h1 {
        img {
          transform: translateX(-70%);
        }
      }
    }

    h1 {
      padding: 0;

      img {
        opacity: 0;
        visibility: hidden;
        .ani();
        transition-delay: 1000ms;
      }
    }
  }

  &.show {
    div {
      h1 {
        img {
          opacity: 1;
          visibility: visible;
          transform: translateX(0);
        }
      }
    }
  }

  &.ani1 {
    div {
      h1 {
        img {
          opacity: 1;
          visibility: visible;
          transform: translateX(0);
          animation: move2 3s infinite linear;
          animation-delay: 500ms;
        }
      }
    }

    .elephantine {
      h1 {
        img {
          animation: move2 4s infinite linear;
          animation-delay: 500ms;
        }
      }
    }
  }
}

// START BANNER;
.banner {
  section {

    @media(min-width:1000px) {
      height: 100vh;
    }

    .row {
      align-items: center;

      @media(min-width:1000px) {
        height: 100vh;
      }

      @media(max-width:999px) {
        padding: 50px 0
      }

      .banner-con {
        @media(min-width:768px) {
          padding: 0 35px;
        }

        @media(min-width:1200px) {
          width: 75%;
        }

        .content {
          height: 300px;
          position: relative;
          overflow: hidden;

          ul {
            transition: all 600ms linear;

            li {
              padding: 5px 25px;
              position: relative;

              &:before {
                .con-pos-a();
                left: 10px;
                top: 12px;
                width: 5px;
                height: 5px;
                background: @txt;
                border-radius: 100%;
              }

              font-weight: 900;
              text-align: left;
            }
          }
        }

        h2 {
          transition: all 600ms linear;
          position: relative;
          font-size: 62px;

          @media(max-width:999px) {
            font-size: 36px !important;
            text-align: center !important;
            line-height: 43px !important;

            br {
              display: none;
            }
          }
        }

        h3 {
          @media(max-width:639px) {
            font-size: 28px;
          }
        }

        p {
          transition: all 600ms linear;
          position: relative;
          font-weight: 900;
        }

        ul {
          transition: all 600ms linear;

          li {
            transition: all 600ms linear;
            position: relative;
          }
        }
      }
    }

    // FIRST SECTION
    &.first {
      position: relative;
      background: #ddd4c9;

      @media(min-width:480px) and (max-width:999px) {
        height: auto;
      }

      @media (max-width:479px) {
        height: 70vh;
      }

      .container-fluid {
        position: relative;
        z-index: 5;
        opacity: 0;
       transition: all 500ms linear;
      }
      .row {
        padding-top: 80px;
        justify-content: flex-end;

        @media(min-width:768px) and (max-width:999px) {
          height: 30vh;
        }
      }

      .col-lg-7 {
        @media(min-width:1000px) {
          .flex();
          height: 100vh;
          align-items: center;
        }
      }

      svg {
        fill: none;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

        path {
          fill: none;
        }

        @media(min-width:480px) and (max-width:999px) {
          position: relative;
        }

        @media(max-width:479px) {
          g {
            stroke-width: 2px;
          }
        }

        #icon_group1 {
          opacity: 1;
        }
      }

      &.ani {
        #icon_group {
          path {
            stroke-dasharray: 300 !important;
            stroke-dashoffset: 0;
            animation: dash1 4s linear alternate infinite;
          }
        }
        .container-fluid {
          opacity: 1;
        }
      }

      .banner-con {
        .flt();

        @media(min-width:1000px) and (max-width:1199px) {
          padding-left: 0;
        }

        @media(max-width:767px) {
          padding: 90px 0 0;
        }

        h3 {
          padding: 0 0 5px;
          line-height: normal;
          position: relative;
          color: @txt;
          text-align: right;
          text-transform: uppercase;
          font-size: 33px;

          @media(max-width:639px) {
            font-size: 26px;
          }

          span {
            color: @vvorange;
          }
        }
      }

    }

    // SECOND SECTION
    &.second {
      background: white url(../images/section2-bg.jpg) no-repeat right center;
      opacity: 0;

      @media(max-width:767px) {
        background: white;
      }

      .ani();

      &.show {
        opacity: 1;
      }

      svg {
        visibility: hidden;

        @media(max-width:999px) {
          width: 70%;
          margin: 0 auto 30px;
          display: block;
        }
      }

      &.ani1 {
        [id*="icon_group2_"] {
          path {
            stroke-dasharray: 450 !important;
            stroke-dashoffset: 0;
            animation: dash 5s linear alternate infinite;
          }
        }
      }

      .col-lg-6 {
        .banner-con {
          .flt();
          .content{            
            right: -10px;
          }
          h2 {
            position: relative;
            text-transform: uppercase;
            text-align: right;
            color: @vvorange;

            @media(min-width:1000px) {
              opacity: 0;
              right: -50px;
            }

            span {
              color: @txt;
            }

            transition: all 1000ms ease-in;
          }

          ul {
            position: relative;

            @media(min-width:1000px) {
              opacity: 0;
              right: -50px;
            }

          }

          p {
            position: relative;

            @media(min-width:1000px) {
              opacity: 0;
              right: -50px;
            }

            transition: all 1400ms ease-in;
          }
        }
      }
    }

    // THIRD SECTION
    &.third {
      background: #ddd4c9;
      position: relative;
      overflow: hidden;

      .slide-img {
        @media(min-width:1000px) {
          position: absolute;
        }

        @media(max-width:999px) {
          padding: 50px 0 0;
        }

        left: 0;
        bottom: 0;
        width: 100%;

        svg {
          width: 100%;

          .last {
            fill: #d2c8bb;
          }

          .mid {
            fill: #c5baaa;
          }

          .first {
            fill: #b0a695;
          }

          .rotate {
            fill: #c5baaa;
          }

          .first,
          .mid,
          .last {
            transform: translateY(50px);
            opacity: 0;
            .ani();
          }

          .rotate {
            opacity: 0;
            .ani();
            transition-delay: 900ms;
          }

          .mid {
            transition-delay: 500ms;

            g {
              &:first-child {
                polygon {
                  animation-delay: 1s;
                }
              }

              &:nth-child(2) {
                polygon {
                  animation-delay: 1.8s;
                }
              }

              &:nth-child(3) {
                polygon {
                  animation-delay: 2.8s;
                }
              }

              &:nth-child(4) {
                polygon {
                  animation-delay: 2.4s;
                }
              }

              &:nth-child(5) {
                polygon {
                  animation-delay: 2s;
                }
              }

              &:nth-child(6) {
                polygon {
                  animation-delay: 1.4s;
                }
              }

              &:nth-child(7) {
                polygon {
                  animation-delay: 3s;
                }
              }

              &:nth-child(8) {
                polygon {
                  animation-delay: 4s;
                }
              }

              &:last-child {
                polygon {
                  animation-delay: 3.5s;
                }
              }
            }
          }

          .last {
            transition-delay: 600ms;
          }
        }
      }

      &.show {
        .slide-img {
          svg {

            .first,
            .mid,
            .last {
              transform: translateY(0);
              opacity: 1;
            }

            .ante,
            .rotate {
              opacity: 1;
            }

          }
        }
      }

      &.ani1 {
        .mid {

          rect,
          polygon {
            stroke-dasharray: 500 !important;
            stroke-width: 1px;
            stroke: #B0A695;
            stroke-dashoffset: 0;
            animation: dash 10s linear alternate infinite;
          }
        }
      }

      .row {
        align-items: flex-start;

        .banner-con {
          position: relative;

          @media(min-width:1000px) {
            top: 90px;
          }

          z-index: 5;

          h2 {
            position: relative;

            @media(min-width:1000px) {
              opacity: 0;
              left: -50px;
            }

            span {
              color: @txt;
            }

            transition: all 1000ms ease-in;
          }

          h6,
          p {
            position: relative;

            @media(min-width:1000px) {
              opacity: 0;
              left: -50px;
            }

            transition: all 1400ms ease-in;
          }
        }
      }
    }

    // FOURTH SECTION
    &.fourth {
      background: white url(../images/fourth-sec-bg.jpg) no-repeat right top;

      @media(max-width:767px) {
        background: white;
      }

      opacity: 0;
      .ani();

      &.show {
        opacity: 1;
      }

      svg {
        visibility: hidden;
        width: 90%;
        margin: 0 auto;
        display: block;

        @media(max-width:767px) {
          width: 60%;
        }
      }

      &.ani1 {
        #icon_group8 {
          animation: move2 3.5s linear alternate infinite;
          position: relative;
          transition: all 500ms linear;
        }
      }

      .banner-con {
        position: relative;
        z-index: 5;
        .flt();

        .content{            
          right: -10px;
        }
        h2 {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            bottom: -50px;
          }

          span {
            color: @txt;
          }

          transition: all 500ms ease-in;
        }

        ul,
        p {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            bottom: -50px;
          }

          transition: all 700ms ease-in;
        }

      }
    }

    // FIFTH SECTION
    &.fifth {
      background: #ddd4c9 url(../images/fifth-sec-bg.jpg) no-repeat left top;
      opacity: 0;

      @media(max-width:767px) {
        background: #ddd4c9;

        .col-lg-6 {
          &:first-child {
            order: 1
          }
        }
      }

      .ani();

      &.ani1 {
        .slide-img {
          svg {
            #group_fif_1 {
              path {
                stroke-dasharray: 1000 !important;
                stroke-dashoffset: 0;
                stroke: @txt;
                stroke-width: 0.2px;
                opacity: 1;
                animation: dash 5s linear alternate infinite;
              }
            }
          }
        }
      }

      &.show {
        opacity: 1;
      }

      svg {
        width: 70%;
        margin: 0 auto;
        display: block;

        @media(max-width:767px) {
          width: 60%;
        }
      }

      .banner-con {
        position: relative;
        z-index: 5;

        h2 {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            top: -50px;
          }

          span {
            color: @txt;
          }

          transition: all 1000ms ease-in;
        }

        ul,
        p {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            top: -50px;
          }

          transition: all 1400ms ease-in;
        }
      }
    }

    &.sixth {
      background: white url(../images/sixth-bg.jpg) no-repeat right top;
      opacity: 0;

      @media(max-width:767px) {
        background: white;
      }

      .ani();

      &.show {
        opacity: 1;
      }

      &.ani1 {
        #group_six_2 {
          path {
            stroke-dasharray: 1000 !important;
            stroke-dashoffset: 0;
            animation: dash 2s linear alternate infinite;
            stroke: @txt;
            stroke-width: 0.6px;
          }
        }
      }

      svg {
        width: 40%;
        margin: auto;
        display: block;
        visibility: hidden;
      }

      .banner-con {
        position: relative;
        z-index: 5;
        .flt();

          .content{            
            right: -10px;
          }
        h2 {
          position: relative;
          text-align: right;

          @media(min-width:1000px) {
            opacity: 0;
            left: -50px;
          }

          span {
            color: @txt;
          }

          transition: all 1000ms ease-in;
        }

        ul,
        p {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            left: -50px;
          }

          transition: all 1400ms ease-in;
        }
      }

      &.ani {
        #icon_group10_1 {
          path {
            stroke-dasharray: 1000 !important;
            stroke-dashoffset: 0;
            animation: dash 5s linear alternate infinite;
          }
        }
      }
    }

    &.seventh {
      background: #ddd4c9 url(../images/seventh-bg.png) no-repeat right top;
      position: relative;
      opacity: 0;

      @media(min-width:300px) {
        height: 100vh;
      }

      @media(max-width:479px) {
        height: 70vh;
      }

      .ani();

      &.show {
        opacity: 1;
      }

      &.ani1 {
        #grou_cran_2_lft {
          animation: move 40s infinite linear;
        }

        #grou_cran_1_lft {
          animation: move1 40s infinite linear;
        }
      }

      .slide-img {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        width: 100%;

        svg {
          visibility: hidden;

          .bor {
            border: 1px solid white;
          }
        }
      }

      .row {
        align-items: flex-start;
        padding: 0;
        height: 60vh;

        .banner-con {
          padding-top: 80px;
          position: relative;
          z-index: 5;

          @media(min-width:1000px) {
            padding-top: 120px;
          }

          @media(max-width:479px) {
            padding-top: 40px;
          }

          h2 {
            position: relative;

            @media(min-width:1000px) {
              opacity: 0;
              left: -50px;
            }

            span {
              color: @txt;
            }

            transition: all 1000ms ease-in;
          }

          ul,
          h6,
          p {
            position: relative;

            @media(min-width:1000px) {
              opacity: 0;
              left: -50px;
            }

            transition: all 1400ms ease-in;
          }

          ul {
            font-weight: 900;
          }
        }
      }
    }

    &.eight {
      background: white url(../images/eight-bg.png) no-repeat right center;
      opacity: 0;

      @media(max-width:767px) {
        background: white;
      }

      .ani();

      &.show {
        opacity: 1;
      }

      &.ani1 {
        #grou_eight {
          path {
            stroke-dasharray: 500 !important;
            stroke-dashoffset: 0;
            animation: dash 5s linear alternate infinite;
          }
        }
      }

      .slide-img {
        width: 100%;

        svg {
          width: 80%;
          fill: none;
          visibility: hidden;

          @media(max-width:767px) {
            margin: 0 auto;
            display: block;
            width: 60%;
          }
        }
      }

      .col-lg-6 {
        h2 {
          position: relative;
          text-align: right;

          @media(min-width:1000px) {
            opacity: 0;
            left: -50px;
          }

          span {
            color: @txt;
          }

          transition: all 1000ms ease-in;
        }

        ul,
        h6,
        p {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            left: -50px;
          }

          transition: all 1400ms ease-in;
        }

        ul {
          padding: 20px 15px;

          li {
            padding: 5px 0;
            
            font-weight: 900;
          }
        }

        .slider-img {
          .flex();
          align-items: flex-start;

          span {
            width: 98px;
            height: 98px;

            @media(min-width:1000px) and (max-width:1199px) {
              width: 95px;
              height: 95px;
            }

            @media(max-width:479px) {
              width: 72px;
              height: 72px;
            }

            border: 2px solid #c2a893;
            border-radius: 100%;
            margin: 0 5px;
            .flex();
            align-items: center;
            justify-content: center;
            vertical-align: top;
            transition: all 600ms linear;

            @media(min-width:1000px) {
              transform: translateY(30px);
              opacity: 0;
              left: -50px;
            }

            &.first {
              transition-delay: 500ms;
            }

            &.second {
              transition-delay: 700ms;
            }

            &.third {
              transition-delay: 900ms;
            }

            &.fourth {
              transition-delay: 1100ms;
            }
          }
        }

        img {
          display: inline-block;
          width: 60px;
          height: 60px;
          position: relative;

          @media(max-width:479px) {
            width: 40px;
            height: 40px;
          }
        }
      }

      .banner-con {
        padding-right: 50px;
        width: 85%;

        @media(min-width:1000px) and (max-width:1199px) {
          padding-left: 0;
        }

        @media(max-width:999px) {
          width: 100%;
          padding: 0 0;
        }

        .flt();
        text-align: left;
        
        .content{            
          right: -10px;
        }

        h2 {
          text-align: right;
        }
      }
    }

    &.nine {
      background: #ddd4c9 url(../images/ninth-bg.png) no-repeat right top;
      opacity: 1;

      @media(max-width:999px) {
        background: #ddd4c9;

        .col-lg-4 {
          order: 1
        }
      }

      // .ani();

      &.show {
        opacity: 1;
      }

      .slide-img {
        width: 100%;

        svg {
          width: 60%;
          fill: none;
          visibility: hidden;

          @media(max-width:767px) {
            margin: 0 auto;
            display: block;
          }
          #icon_group13 {
            fill: rgb(221, 212, 201) !important;
          }
        }
      }

      .banner-con {
        width: 100%;
        position: relative;

        @media(max-width:767px) {
          top: 0;
        }

        h2 {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            left: -50px;
          }

          span {
            color: @txt;
          }

          transition: all 1000ms ease-in;
        }

        p {
          position: relative;

          @media(min-width:1000px) {
            opacity: 0;
            left: -50px;
          }

          transition: all 1400ms ease-in;
        }
        ul{          

          @media(min-width:1000px) {
            opacity: 0;
            left: -50px;
            position: relative;
          }
        }
      }

      &.ani1 {
        #icon_group13 {
          path {
            stroke-dasharray: 500 !important;
            stroke-dashoffset: 0;
            animation: dash 5s linear alternate infinite;
          }
        }
      }
    }
  }
}


// SUBPAGES
.subpages {
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
  position: relative;

  @media(max-width:767px) {
    padding: 70px 0 0;
  }

  img {
    position: absolute;
    width: 100%;

    @media(max-width:767px) {
      position: relative;
      margin-bottom: 10px !important;
    }
  }

  .row {
    height: 100vh;

    @media(max-width:767px) {
      height: auto;
    }
  }

  .content {
    padding: 0 50px 0 80px;

    @media(max-width:767px) {
      padding: 0;
    }

    p {
      color: @black;
      font-family: 'Aovel Sans';
      font-weight: 900;
      font-style: normal;
    }
  }

  &.design {
    img {
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }

    .row {
      justify-content: flex-end;
      align-items: center;
    }
  }

  &.hospitality {
    img {
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }

    .row {
      justify-content: flex-start;
      align-items: center;
    }
  }

  &.entertainment {
    img {
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
    }

    .row {
      justify-content: center;
      align-items: flex-start;

      .content {
        padding-top: 150px;

        @media(max-width:767px) {
          padding: 0;
        }

        p {
          color: white;

          @media(max-width:767px) {
            color: @black;
          }
        }
      }
    }
  }
}


@keyframes dash {
  from {
    stroke-dashoffset: 10;
  }

  to {
    stroke-dashoffset: 1000;
  }
}

@keyframes dash1 {
  to {
    stroke-dashoffset: 500;
  }
}

@keyframes move {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(210px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes move2 {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes move1 {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-160px);
  }

  100% {
    transform: translateX(0);
  }
}


.powered {
  position: relative;
  right: 0;
  bottom: 0;
  width: 100%;
  .flex();
  justify-content: space-between;
  padding:10px;
  align-items: center;
  p{
    padding: 0;
  }
  ul{
    .flex();
    padding:0;
    font-size: 11px;
    li{
      padding: 0 15px;
    }
  }

  &.home {
    position: absolute;
    width: 100%;
    display: block;
  }

  &.light {
    p {
      color: white;
      opacity: 0.3;

      a {
        color: white;
      }
    }
  }

  p {
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    font-family: 'Aovel Sans';

    a {
      font-weight: 900;
    }
  }
}


/*Contact*/

.title {
	color: #2d2d2d;
	margin: 0 0 30px;
	text-align: center;
	padding-bottom: 25px;
	font-weight: 900;text-transform: uppercase;
	position: relative;
}

#contact {
	padding: 0 0 65px;
}
#contact .navigation {
    padding:25px 0;
    background:#DCD4C9;
    margin-bottom:25px;
}
#contact .navigation ul {
    display:flex;
    align-item:center;
    justify-content:center;
        font-family: 'bebasregular';
}
#contact .navigation ul li{
    font-size: 20px;
}
#contact .navigation ul li:before{
    content:"|";
    padding:0 25px;
}
#contact .navigation ul li a{
    color:#564D48;
    text-transform:uppercase;
}
#contact .navigation ul li:first-child:before{
    display:none;
}
#contact .row{
  justify-content: center;
}
#contact form {
	margin-top: 20px;
}

#contact .form-control {
	background: white;
	border-radius: 0;
	padding: 1px 15px;
	border:none;
	box-shadow: none;
	height: auto;
  letter-spacing: 0.1em;
}

#contact textarea {
  height: 65px !important;
  padding: 8px 15px !important;
	resize: none;
}

#contact .btn {
	border:none;
	padding: 6px 30px;
	background: #d3932e;
	box-shadow: none;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1em;
	border-radius: 0;
  margin: 10px auto 0;
  display:block;
}