/*
* ----------------------------------------------------------------------------------------
Author        : Rama Hardian
Template Name : Unite - onepage landingpage wedding studio
Version       : 1.1
* ----------------------------------------------------------------------------------------
  TABLE OF CONTENT
* ----------------------------------------------------------------------------------------
* 01.BASE CSS 
* 02.KEYFRAME
* 03.LOADDER
* 04.MAIN HEADDER PAGE
     - MAIN LOGO
     - MAIN NAV 
     - MOBILE MENU
     - MINI HEAD INFO
* 05.MAIN HERO SECTION
     - TEXT DETAIL HERO
     - SCROLL ICON
* 06.ABOUT SECTION
     - ABOUT INFO CONTENT
     - IMAGE ABOUT 
* 07.ABOUT SECOND 
     - IMAGE ABOUT 
* 08.PROTFOLIO SECTION
     - DETAIL PORTFOLIO
* 09.GALLERY SECTION     
     - GALLERY INFO TITLE 
     - ITEM GALLERY
* 10.PRICE SECTION     
     - TABLE PRICE
     - TABLE PRICE CENTER
     - DETAIL SERVICE
* 11.GAP SECTION     
* 12. CONTACT SECTION
* 13. FOOTER SECTION
* 14.MEDIA QUERY PAGE

    update changelog 1.1 (1 september 2020)
        *fix some old version browser support


/*
* ----------------------------------------------------------------------------------------
* 01.BASE CSS
* ----------------------------------------------------------------------------------------
*/


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

  *:focus {
      outline: 0 !important;
  }

  ::-moz-selection {
      color: #000;
      background: #dbdbdb;
  }

  ::selection {
      color: #000;
      background: #dbdbdb;
  }

  html,
  body {
      padding: 0;
      margin: 0;
      background-color: #fff;
      font-family: 'Roboto', sans-serif;
      color: #757575;
      background: #FFFFFF;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      -moz-font-smoothing: antialiased;
      font-smoothing: antialiased;

  }

  a {
      text-decoration: none;
  }

  a:hover {
      text-decoration: none;
  }

  a:focus {
      text-decoration: none;
  }

  input,
  textarea {
      position: relative;
      display: block;
      width: 100%;
      padding: 8px 15px 8px 16px;
      margin-top: 30px;

      color: #969696;
      border: 2px solid #232323;
      height: 50px;
      background-color: transparent;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
  }

  .error {
      color: red;
      font-size: 12px;
      font-weight: normal;
      padding-top: 10px;
  }

  .fixed {
      position: fixed !important;
      opacity: .9;
      background: #232323;
      padding-top: 20px !important;
      padding-bottom: 10px !important;
  }

  #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      z-index: 1;
  }

  .btns {
      padding: 20px 60px;
      margin-top: 20px;
      text-align: center;
      background: #d5b06b;
      display: inline-block;
      color: #fff;
      border-radius: 5px;
      font-size: 12px;
      font-weight: bold;
      letter-spacing: 1px;
  }

  .btns:hover {
      color: #675027;
  }

  .information {
    position: relative;
    padding: 20px;
    margin-top: 30px;
    background: #a1e1e4;
    font-size: 20px;
    display: none;
    border-radius: 10px;
    color: #201F1D;
}

.signinfo {
    position: absolute;
    font-size: 30px;
}

.flashinfo {
    padding-left: 50px;
}
  /*
* ----------------------------------------------------------------------------------------
* 02.KEYFRAME
* ----------------------------------------------------------------------------------------
*/


  @keyframes line {
      0% {
          left: -35%;
          right: 100%;
      }

      60% {
          left: 100%;
          right: -90%;
      }

      100% {
          left: 100%;
          right: -90%;
      }
  }

  @keyframes lines {
      0% {
          left: -200%;
          right: 100%;
      }

      60% {
          left: 107%;
          right: -8%;
      }

      100% {
          left: 107%;
          right: -8%;
      }
  }

  @-webkit-keyframes move {

      0%,
      60%,
      80%,
      100% {
          -webkit-transform: translateY(0);
      }

      20% {
          -webkit-transform: translateY(-5px);
      }

      40% {
          -webkit-transform: translateY(20px);
      }
  }

  @keyframes move {

      0%,
      60%,
      80%,
      100% {
          -webkit-transform: translateY(0);
      }

      20% {
          -webkit-transform: translateY(-5px);
      }

      40% {
          -webkit-transform: translateY(20px);
      }
  }



  /*
* ----------------------------------------------------------------------------------------
* 03.LOADDER
* ----------------------------------------------------------------------------------------
*/



  .load-wrap {
      width: 100%;
      height: 100%;
      position: fixed;
      background: rgba(35, 35, 35, .90);
      top: 0;
      z-index: 9;
  }

  .progress {
      height: 3px;
      display: block;
      width: 100%;
      background-color: transparent;
      border-radius: 2px;
      position: fixed;
      top: 150%;
      z-index: 65;
  }

  .progress .line {
      background-color: #fff;
  }

  .progress .line:before {
      content: '';
      position: absolute;
      background-color: #fff;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      animation: line 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  }

  .progress .line:after {
      content: '';
      position: absolute;
      background-color: #fff;
      top: 0;
      left: 0;
      bottom: 0;
      will-change: left, right;
      animation: lines 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
      animation-delay: 1.15s;
  }

  .progress {
      position: absolute;
      top: 50%;
      width: 300px;
      left: 50%;
      text-align: center;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }




  /*
* ----------------------------------------------------------------------------------------
* 04.MAIN HEADDER PAGE
* ----------------------------------------------------------------------------------------
*/

  #main-headderpage {
      padding-top: 30px;
      padding-bottom: 30px;
      position: absolute;
      width: 100%;
      z-index: 5;
      transition: all .3s;
  }


  /*
* ----------------------------------------------------------------------------------------
* 04.MAIN HEADDER PAGE
     - MAIN LOGO
* ----------------------------------------------------------------------------------------
*/

  .logomain-wrap img {
      width: 200px;
      transition: all .3s;
  }

  .fixed .logomain-wrap img {
      width: 80px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 04.MAIN HEADDER PAGE
     - MAIN NAV
* ----------------------------------------------------------------------------------------
*/

  #navigarionmain {
      padding-top: 10px;
  }

  .listorder-nav {
      padding-left: 0;
  }

  .listorder-nav li {
      display: inline-block;
      margin: 20px;
      margin-top: 0;
      position: relative;
  }

  .listorder-nav li a {
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all .3s;

  }

  .listorder-nav li a:after {
      content: '';
      position: absolute;
      width: 0;
      height: 3px;
      display: block;
      margin-top: 5px;
      right: 0;
      background: #d5b06b;
      transition: width .5s ease;
      -webkit-transition: width .5s ease;
  }

  .listorder-nav li.active>a {
      color: #d5b06b;
  }

  .listorder-nav li.active>a:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 3px;
      display: block;
      margin-top: 5px;
      right: 0;
      background: #d5b06b;
      transition: width .5s ease;
      -webkit-transition: width .5s ease;
  }

  .listorder-nav li a:hover {
      color: #d5b06b;
  }

  .listorder-nav li a:hover:after {
      width: 100%;
      left: 0;
      background: #d5b06b;
  }





  /*
* ----------------------------------------------------------------------------------------
* 04.MAIN HEADDER PAGE
     - MOBILE MENU
* ----------------------------------------------------------------------------------------
*/

  body.showmenu {
      overflow: hidden;
  }

  body.showmenu section {
      filter: brightness(0.3);
  }

  .wrap-menumobile {
      position: fixed;
      right: 30px;
      top: 25px;
      cursor: pointer;
      z-index: 12;
      display: none;
  }

  .wrap-close {
      width: 33px;
      height: 50px;
      display: none;
      position: absolute;
      right: 10px;
      top: 5px;
  }

  .wrap-menumobile .menu-bar span {
      background-color: #fff;
      display: block;
      height: 2px;
      margin: 10px auto;
      margin-left: 0;
      width: 35px;
      transition: all .1s;
  }

  .wrap-menumobile .menu-bar:hover span:nth-child(2) {
      margin-left: 10px;
  }

  #exitmenu:before,
  #exitmenu:after {
      position: absolute;
      left: 15px;
      content: ' ';
      height: 43px;
      width: 2px;
      background-color: #fff;
  }

  #exitmenu:before {
      transform: rotate(45deg);
  }

  #exitmenu:after {
      transform: rotate(-45deg);
  }

  .transparant {
      position: fixed;
      width: 50%;
      display: none;
      right: 0;
      top: 0;
      overflow-x: auto;
      height: 100%;
      background: rgba(0, 0, 0, .9);
      z-index: 11;
  }

  .wrap-menulistmobile {
      position: absolute;
      top: 50%;
      left: 130px;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      overflow: auto;
      width: auto;
  }

  .listmobile {
      padding-left: 0;
  }

  .listmobile li {
      list-style: none;
      margin-bottom: 10px;
      position: relative;
      font-family: 'Playfair Display', serif;
      font-weight: 500;
      letter-spacing: 1px;
  }

  .listmobile li a {
      color: rgba(255, 255, 255, .5);
      font-size: 20px;
  }

  .listmobile li.active a {
      color: rgba(255, 255, 255, 1);
  }






  /*
* ----------------------------------------------------------------------------------------
* 04.MAIN HEADDER PAGE
     -  MINI HEAD INFO
* ----------------------------------------------------------------------------------------
*/


  .miniinfohead {
      padding-left: 0;
  }

  .miniinfohead li {
      list-style: none;
  }

  .icons {
      float: left;
  }

  .icons i {
      padding: 5px;
      color: #fff;
      font-size: 20px;
      background: #d5b06b;
      border-radius: 50px;
      width: 30px;
      height: 30px;
      text-align: center;
  }

  .infoheadwrap {
      padding-left: 50px;
  }

  .infoheadwrap p {
      color: #fff;
      font-size: 20px;
  }

  .infoheadwrap h5 {
      font-size: 13px;
      color: #d5b06b;
      letter-spacing: 1px;
  }



  /*
* ----------------------------------------------------------------------------------------
* 05.MAIN HERO SECTION
* ----------------------------------------------------------------------------------------
*/


  #hero-sectionpage {
      position: relative;
  }

  #hero-wrap {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
  }

  #hero-sectionwrap {
      position: relative;
  }

  #hero-wrapcontent {
      position: relative;
      height: 100%;
  }

  .image-hero-wrap {
      width: 100%;
      height: 850px;
      position: relative;
      overflow: hidden;
  }


  .overlay-img {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.3) 100%);
  }


  /*
* ----------------------------------------------------------------------------------------
* 05.MAIN HERO SECTION
    - TEXT DETAIL HERO 
* ----------------------------------------------------------------------------------------
*/

  #text-herodetail {
      position: relative;
  }

  .infohero--text-wrap {
      width: 50%;
      height: auto;
      position: relative;
      top: 0;
      padding-left: 20px;
      padding-top: 230px;
      padding-bottom: 100px;
      color: #fff;
      z-index: 3;
  }

  .infohero--text-wrap h2 {
      font-family: 'Playfair Display', serif;
      font-size: 50px;
      font-weight: bold;
      line-height: 1.3;
      margin-top: 0;
  }

  .infohero--text-wrap p.p-upper {
      padding-top: 20px;
      line-height: 1.5;
      letter-spacing: 1px;
      font-size: 15px;
  }

  .infohero--text-wrap p.p-botom {
      font-size: 23px;
      font-family: 'Playfair Display', serif;
      line-height: 1.5;
      color: #d5b06b;
      font-weight: 500;
  }


  /*
* ----------------------------------------------------------------------------------------
* 05.MAIN HERO SECTION
    -  SCROLL ICON
* ----------------------------------------------------------------------------------------
*/

  .scroll-icon {
      z-index: 1;
      position: absolute;
      width: 13px;
      height: 90px;
      bottom: 100px;
      border-right: 1px dashed rgba(255, 255, 255, 0.3);
      margin: 10px auto;
      right: 100px;
  }

  .scroll-icon span {
      writing-mode: vertical-rl;
      position: absolute;
      height: 200px;
      color: #fff;
      top: -130px;
  }

  .scroll-icon .mouse {
      position: relative;
      height: 38px;
      width: 25px;
      border: 3px solid #fff;
      border-radius: 12px;
      right: 0;
      top: 10px;
      display: block;
      text-align: center;
      z-index: 10;
      -webkit-animation: move 3s ease infinite;
      animation: move 3s ease infinite;
  }

  .scroll-icon .mouse::before {
      content: "";
      display: block;
      height: 5px;
      width: 3px;
      background-color: #fff;
      position: absolute;
      top: 6px;
      left: 50%;
      margin-left: -1.5px;
      border-radius: 2px;
  }



  /*
* ----------------------------------------------------------------------------------------
* 06.ABOUT SECTION
* ----------------------------------------------------------------------------------------
*/


  #about-sectionpage {
      background: #EEEBE6;
      height: auto;
      padding-bottom: 100px;
  }

  .title-headabout {
      padding-top: 100px;
      padding-bottom: 100px;
      text-align: center;
  }

  .title-headabout h3 {
      font-size: 50px;
      font-family: 'Playfair Display', serif;
      line-height: 1.5;
      letter-spacing: 10px;
      color: #232323;
  }

  .title-headabout p {
      line-height: 1.2;
      font-size: 13px;
      letter-spacing: 2px;
      color: #232323;
  }



  /*
* ----------------------------------------------------------------------------------------
* 06.ABOUT SECTION
     - ABOUT INFO CONTENT
* ----------------------------------------------------------------------------------------
*/


  .about-infowrap h3 {
      font-size: 50px;
      font-family: 'Playfair Display', serif;
      color: #232323;
      padding-bottom: 50px;
      position: relative;
  }

  .about-infowrap h3:after {
      content: '';
      position: absolute;
      width: 90px;
      height: 3px;
      background: #d5b06b;
      bottom: 20px;
      left: 0;
  }

  .about-infowrap p {
      font-size: 15px;
      color: #232323;
      padding-bottom: 10px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 06.ABOUT SECTION
     - IMAGE ABOUT 
* ----------------------------------------------------------------------------------------
*/


  .image-aboutwrap-1 {
      width: 320px;
      height: 400px;
  }



  .image-aboutwrap-2 {
      width: 250px;
      height: 400px;
      position: absolute;
      top: -50px;
      border: 10px solid #EEEBE6;
      right: 50px;
  }




  /*
* ----------------------------------------------------------------------------------------
* 07.ABOUT SECOND 
* ----------------------------------------------------------------------------------------
*/


  #aboutsecond-sectionpage {
      padding-top: 50px;
      background: #fff;
      height: auto;
      padding-bottom: 50px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 07.ABOUT SECOND 
     - IMAGE ABOUT 
* ----------------------------------------------------------------------------------------
*/


  .image-aboutwrap-3 {
      width: 520px;
      height: 700px;
  }


  .image-aboutwrap-4 {
      padding-top: 50px;
      margin-bottom: 50px;
      width: 320px;
      height: 500px;
  }


  .positioner {
      width: 50%;
      height: 50%;
      position: absolute;
      left: 0;
      top: 0;
  }

  .play {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 50px;
      height: 50px;
      cursor: pointer;
  }

  .play i {
      font-size: 100px;
      color: #fff;
  }



  /*
* ----------------------------------------------------------------------------------------
* 08.PROTFOLIO SECTION
* ----------------------------------------------------------------------------------------
*/


  .overlayproject-img {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
  }

  #portfolio-sectionpage {
      height: auto;
      padding-bottom: 50px;
  }

  #protfolio-wrapcontent {
      position: relative;
      height: 100%;
  }

  #wrap-portoslide {
      width: 100%;
      height: 100%;
      position: absolute;
  }

  .wrap-contentporto {
      height: 600px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 08.PROTFOLIO SECTION
     - DETAIL PORTFOLIO
* ----------------------------------------------------------------------------------------
*/


  .infoproject--text-wrap {
      width: 100%;
      height: auto;
      position: relative;
      top: 0;
      padding-left: 20px;
      padding-top: 150px;
      padding-bottom: 100px;
      color: #fff;
      z-index: 3;
  }

  .infoproject--text-wrap h2 {
      font-family: 'Playfair Display', serif;
      font-size: 50px;
      font-weight: normal;
      line-height: 1.3;
      margin-top: 0;
      padding-bottom: 20px;
  }

  .p-botom-project {
      border-top: 1px solid #fff;
      padding-top: 20px;
  }

  .tilt-text {
      display: inline-block;
      position: relative;
      padding-top: 15px;
      padding-left: 0;
      font-size: 20px;
  }

  .deskrip-project {
      position: relative;
      z-index: 3;
      padding-left: 20px;
      color: #fff;
      padding-top: 150px;
      padding-bottom: 100px;
  }

  .deskrip-project p {
      line-height: 1.5;
  }

  .detail-guest p {
      font-size: 50px;
  }

  .listinfo {
      padding-left: 0;
      padding-top: 20px;
  }

  .listinfo li {
      list-style: none;
      display: inline-block;
      padding: 20px;
      margin-right: 0;
  }

  .mini-infoproject i {
      font-size: 30px;
  }

  .mini-infoproject span {
      width: 250px;
      display: inline-block;
      position: relative;
      padding-left: 20px;
      font-size: 15px;
  }

  .dots-nav {
      position: relative;
      padding-top: 10px;
      display: inline-block;
      z-index: 1;
  }

  .dots-nav button {
      width: 50px;
      background: rgba(255, 255, 255, .5);
      -webkit-appearance: none;
      -moz-appearance: none;
      outline: none;
      border: none;
  }

  .dots-nav button.active {
      width: 50px;
      background: rgba(255, 255, 255, 1);
      -webkit-appearance: none;
      -moz-appearance: none;
      outline: none;
      border: none;
  }

  .wrap-projectnav {
      position: relative;
  }

  .custom-navproject {
      position: relative;
      padding-top: 50px;
  }

  .custom-navproject button {
      background: none;
      border: none;
  }

  .custom-navproject button>i {
      font-size: 20px;
  }

  .custom-navproject button.owl-prev {
      padding-left: 0;
  }

  .custom-navproject button.owl-next {
      float: right;
      padding-right: 0;
  }

  #counts-wrap {
      position: absolute;
      left: 50%;
      bottom: 0;
      font-size: 20px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 09.GALLERY SECTION     
* ----------------------------------------------------------------------------------------
*/


  #gallery-sectionpage {
      padding-top: 150px;
      background: #EEEBE6;
  }

  .gallery-wrap {
      transition: all .5s ease-in-out;
      column-gap: 30px;
      column-fill: initial;
      column-count: 2;
  }


  /*
* ----------------------------------------------------------------------------------------
* 09.GALLERY SECTION     
     - GALLERY INFO TITLE   
* ----------------------------------------------------------------------------------------
*/

  .gallery-infowrap {
      margin-bottom: 100px;
  }

  .gallery-infowrap h3 {
      font-size: 50px;
      font-family: 'Playfair Display', serif;
      color: #232323;
      padding-bottom: 50px;
      position: relative;
  }

  .gallery-infowrap h3:after {
      content: '';
      position: absolute;
      width: 90px;
      height: 3px;
      background: #d5b06b;
      bottom: 20px;
      left: 0;
  }

  .gallery-infowrap p {
      font-size: 15px;
      color: #232323;
      padding-bottom: 10px;
      line-height: 1.5;
  }

  .title-project {
      display: inline-block;
  }

  .title-project h3 {
      font-size: 50px;
      font-family: 'Playfair Display', serif;
      color: #232323;
      padding-bottom: 50px;
      position: relative;
  }



  /*
* ----------------------------------------------------------------------------------------
* 09.GALLERY SECTION     
     - ITEM GALLERY
* ----------------------------------------------------------------------------------------
*/


  .gallery-wrap>.item {
      margin-bottom: 30px;
      display: inline-block;
      vertical-align: top;
      width: 100%;
      position: relative;
      overflow: hidden;
  }

  .gallery-wrap .item:nth-last-child(3) {
      margin-top: 0;
  }

  .gallery-wrap .item a img {
      width: 100%;
      transition: all .5s ease-in-out;
      backface-visibility: hidden;
      filter: grayscale(100%);
      transition: .5s linear;
  }

  .gallery-wrap .item a:hover img {
      width: 100%;
      transition: all .5s ease-in-out;
      backface-visibility: hidden;
      filter: grayscale(0);
  }


  /*
* ----------------------------------------------------------------------------------------
* 10.PRICE SECTION    
* ----------------------------------------------------------------------------------------
*/


  #price-sectionpage {
      position: relative;
      padding-top: 150px;
      padding-bottom: 150px;
      background: #EEEBE6;
  }


  /*
* ----------------------------------------------------------------------------------------
* 10.PRICE SECTION     
     - TABLE PRICE 
* ----------------------------------------------------------------------------------------
*/

  .price-table {
      font-family: 'Playfair Display', serif;
      color: #232323;
      padding: 10px;
      position: relative;
  }

  .price-table>h3 {
      font-size: 20px;
      line-height: 1.3;
  }

  .price-table>p {
      font-size: 20px;
      margin-bottom: 10px;
  }

  .price-table>.link-service {
      padding: 20px 30px;
      display: block;
      margin-top: 30px;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 13px;
      color: #fff;
      background: #232323;
      opacity: 0;
      visibility: hidden;
      transform: all .3s;
  }

  .price-table:hover>.link-service {
      padding: 20px 30px;
      display: block;
      margin-top: 30px;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 13px;
      color: #fff;
      background: #232323;
      opacity: 1;
      visibility: visible;
      transform: all .3s;
  }


  /*
* ----------------------------------------------------------------------------------------
* 10.PRICE SECTION     
     - TABLE PRICE CENTER
* ----------------------------------------------------------------------------------------
*/

  .price-table-center {
      font-family: 'Playfair Display', serif;
      color: #232323;
      border: 2px solid #232323;
      padding: 10px 20px 20px;
      position: relative;
  }

  .price-table-center>h3 {
      font-size: 35px;
      line-height: 1.3;
  }

  .price-table-centere>p {
      font-size: 20px;
  }

  .price-table-center>.link-service {
      padding: 20px 30px;
      display: block;
      margin-top: 30px;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 13px;
      color: #fff;
      background: #232323;
  }

  .price-table-center>.detail-service:nth-last-child(1) {
      margin-bottom: 50px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 10.PRICE SECTION     
     - DETAIL SERVICE
* ----------------------------------------------------------------------------------------
*/


  .detail-service {
      font-family: 'Roboto', sans-serif;
      font-size: 13px;
      padding-bottom: 20px;
      padding-top: 30px;
      border-bottom: 2px solid;
      position: relative;
  }

  .title-service {
      text-align: left;
      display: block;
  }

  .service-info {
      display: inline-block;
      position: absolute;
      right: 0;
      bottom: 20px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 11. GAP SECTION
* ----------------------------------------------------------------------------------------
*/

  #gap-section {
      height: 80vh;
      position: relative;
  }

  .overlaygap {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
  }

  .gap-wrapper {
      width: 100%;
      height: 80vh;
      position: relative;
      overflow: hidden;
  }




  /*
* ----------------------------------------------------------------------------------------
* 12. CONTACT SECTION
* ----------------------------------------------------------------------------------------
*/

  #contact-sectionpage {
      padding-top: 100px;
      padding-bottom: 100px;
  }

  .contact-form {
      padding: 40px;
  }

  .title-contact h3 {
      font-family: 'Playfair Display', serif;
      color: #232323;
      letter-spacing: 1px;
      line-height: 1.5;
      text-transform: uppercase;
  }

  .textmessage {
      height: 150px;
      resize: none;
  }

  .submit {
      padding: 20px 20px;
      width: 100%;
      border: none;
      background: #232323;
      color: #fff;
      font-weight: bold;
      font-size: 15px;
      letter-spacing: 2px;
      margin-top: 20px;
  }

  .wrap-contact-image {
      padding: 60px 40px;
  }

  .img-wrapcontact {
      width: 100%;
      height: 500px;
  }


  /*
* ----------------------------------------------------------------------------------------
* 13.FOOTER PAGE
* ----------------------------------------------------------------------------------------
*/

  #footer-sectionpage {
      background: #232323;
      padding-top: 70px;
  }

  #wrapfooter {
      padding-left: 0;
      padding-right: 0;
  }

  #mainfooter-bottom {
      padding-bottom: 50px;
      text-align: center;
  }

  #footer-bottom {
      background: #171717;
      padding-top: 20px;
      position: relative;
      padding-bottom: 20px;
      text-align: center;
  }

  .logo-footerwrap {
      width: 130px;
      margin: 0 auto;
      position: relative;
      left: 0;
  }

  .logo-footerwrap img {
      width: 130px;
  }


  .text-inforight {
      text-align: right;
  }

  .text-infoleft h3,
  .text-inforight h3 {
      margin-top: 0;
      line-height: 1.3;
      font-size: 20px;
      color: #fff;
  }

  .text-infoleft p,
  .text-inforight p {
      font-size: 15px;
      margin-bottom: 0;
  }

  .sosfooter {
      padding-left: 0;
      padding-top: 50px;
  }

  .sosfooter li {
      display: inline-block;
      padding-top: 0;
      margin-left: 10px;
      margin-right: 10px;
      font-size: 25px;
  }

  .detailadress {
      padding-top: 20px;
      width: 350px;
      margin: 0 auto;
  }

  .copy {
      padding-top: 30px;
  }

  .sosfoot {
      padding-left: 0;
      margin-top: 30px;
  }

  .sosfoot li {
      list-style: none;
      display: inline-block;
      margin-left: 20px;
  }

  .sosfoot li i {
      font-size: 20px;
  }


  /* ---------------------------------------------- /*
* 14.MEDIA QUERY PAGE
/* ---------------------------------------------- /*
*/
  @media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}


  @media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
      .infohero--text-wrap {
          width: 60%;
      }

      .image-aboutwrap-3 {
          width: 450px;
      }

      .image-aboutwrap-2 {

          right: 0px;
      }
  }

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

  @media screen and (max-width: 1240px) {
      .listorder-nav li {
          margin: 10px;
      }

      .image-aboutwrap-3 {
          width: 450px;
      }

      #portfolio-sectionpage {
          height: 600px;
      }

      #wrap-portoslide {
          height: 600px;
      }
  }

  @media (max-width: 990px) {

      #portfolio-sectionpage {
          height: auto;
      }

      #wrap-portoslide {
          height: 100%;
      }

      .wrap-menumobile {

          display: block;
      }

      .wrap-head-info {
          display: none;
      }

      .infohero--text-wrap p.p-upper {

          font-size: 18px;
      }

      .infohero--text-wrap {
          width: 80%;
          padding-top: 350px;
      }

      .scroll-icon {
          bottom: 0;
          right: 30px;
      }

      #navigarionmain {
          display: none;
      }

      .image-hero-wrap {
          height: 850px;
      }

      .about-infowrap {
          padding-top: 50px;
      }

      .image-aboutwrap-3 {
          width: 100%;
          height: 600px;
      }


      .image-aboutwrap-1 {
          display: none;
      }

      .image-aboutwrap-2 {
          display: none;
      }

      .title-headabout {
          display: none;
      }

      .btns {
          font-size: 18px;
      }

      #about-sectionpage {
          padding-top: 200px;
          padding-bottom: 150px;
      }

      #aboutsecond-sectionpage {
          padding-top: 150px;
          padding-bottom: 150px;
      }

      .infoproject--text-wrap {
          padding-left: 0;
      }

      .infoproject--text-wrap h2 {
          font-size: 40px;
      }

      .tilt-text {
          font-size: 24px;
      }

      .deskrip-project {
          color: #232323;
          padding-top: 180px;
          padding-left: 0;
          padding-bottom: 0;
          font-size: 24px;
      }

      #gallery-sectionpage {
          padding-top: 100px;
      }

      .gallery-infowrap {
          margin-bottom: 50px;
          padding: 20px;
      }

      .detail-service {
          font-size: 18px;
      }

      .price-table>h3 {
          font-size: 30px;
      }

      .price-table-center>.link-service {
          font-size: 18px;
      }

      .link-service {
          font-size: 18px !important;
      }

      .gallery-infowrap h3 {
          font-size: 40px;
      }

      .gallery-infowrap p {
          font-size: 24px;
      }

      .about-infowrap h3 {
          font-size: 40px;
      }

      .about-infowrap p {
          font-size: 24px;
      }

      .price-table>.link-service {
          opacity: 1;
          visibility: visible;
      }

      .gallery-wrap>.item {
          margin-bottom: 0;
          padding: 20px;
          padding-left: 0;
          padding-right: 0;
      }

      .price-table {
          margin-top: 30px;
          margin-bottom: 30px;
      }

      .title-contact h3 {
          font-size: 20px;
      }

      .contact-form {
          padding: 20px;
      }

      .wrap-contact-image {
          padding: 60px 20px;
      }

      .copy {
          display: none;
      }

      .logo-footerwrap {
          margin-bottom: 50px;
      }

      .sosfoot li {
          margin-left: 20px;
          margin-right: 20px;
      }

      .text-inforight {
          text-align: center;
          margin-bottom: 30px;
      }
  }

  @media (max-width: 768px) {

      .infohero--text-wrap {
          width: 100%;
          padding-left: 0;
          padding-top: 250px;
          text-align: center;
      }

      .infohero--text-wrap p.p-upper {
          font-size: 18px;
      }

      .scroll-icon:before {
          content: '';
      }

      .scroll-icon {
          position: relative;
          bottom: 0;
          right: 0;
      }

      .infohero--text-wrap h2 {
          font-size: 30px;
      }

      .price-table>h3 {
          font-size: 25px;
      }

      .tilt-text {
          font-size: 18px;
      }

      .detail-service {
          font-size: 15px;
      }

      .title-contact p {
          font-size: 18px;
      }

      .about-infowrap p {
          font-size: 18px;
      }

      .link-service {
          font-size: 15px !important;
      }

      .gallery-infowrap p {
          font-size: 18px;
      }

      .infohero--text-wrap p.p-botom {
          font-size: 18px;
      }

      .deskrip-project {
          padding-top: 200px;
          font-size: 18px;
      }

      .listfooter li {
          display: inline-block;
          padding-top: 20px;
          margin-left: 10px;
          margin-right: 10px;
          letter-spacing: 1px;
          font-weight: bold;
          font-size: 11px;
      }
  }

  @media only screen and (max-width: 690px) {}

  @media only screen and (max-width: 580px) {
      .deskrip-project {
          padding-top: 150px;
      }

      #about-sectionpage {
          padding-top: 150px;
      }

      #price-sectionpage {
          padding-top: 100px;
          padding-bottom: 100px;
      }

      .btns {
          padding: 20px 50px;
          font-size: 15px;
      }

      .gallery-infowrap {
          padding: 0;
      }

      .gallery-wrap {
          column-count: 1;
      }

      .gallery-wrap>.item {
          margin-bottom: 0;
          padding: 20px;
      }

      .wrap-contact-image {
          padding: 50px 20px;
      }
  }

  @media (max-width: 480px) {

      .about-infowrap h3 {
          font-size: 30px;
      }

      .contact-form {
          padding: 0;
      }

      .gallery-infowrap h3 {
          font-size: 30px;
      }

      .title-contact h3 {
          font-size: 30px;
      }

      .btns {
          font-size: 13px;
      }

      .infohero--text-wrap p.p-upper {
          font-size: 15px;
      }

      .infohero--text-wrap h2 {
          font-size: 25px;
      }

      .price-table>h3 {
          font-size: 25px;
      }

      .tilt-text {
          font-size: 15px;
      }

      .detail-service {
          font-size: 13px;
      }

      .about-infowrap p {
          font-size: 15px;
      }

      .link-service {
          font-size: 12px !important;
      }

      .gallery-infowrap p {
          font-size: 15px;
      }

      .infohero--text-wrap p.p-botom {
          font-size: 15px;
      }

      .deskrip-project {
          padding-top: 150px;
          font-size: 15px;
      }

      .image-aboutwrap-4 {
          width: 100%;
      }

      .wrap-contact-image {
          padding: 50px 0px;
      }

      .image-aboutwrap-4 img {
          width: 100%;
      }
  }