/* hide x-scroll */
html,body {
overflow-x: hidden;
}
.hnd_box_arround .hnd_box_inner {
    overflow-x: hidden;
}
body{
height: 100%;
}
div#bottom {
    padding-top: 0px !important;
}
.hide-title .site-title {
    display: none;
}
/*404 page*/
.error404 > div > div > .container{
    width:100%!important;
}
.error404 .content {
    padding:0;
}
.error404 [class*=col] {
    padding:0;
}
.error404 .height-100-vh > .container{
    display:table-cell;
    vertical-align:middle;
    width:100%;
}

/*General*/
.sidebar {
    font-size:0.85em;
}
.postcontent img {
  height:auto;
}
.height-100-vh > .container{
    display:table-cell;
    vertical-align:middle;
    width:100%;
}
.tp-rightarrow.tparrows.hesperiden {
  left: 96% !important;
}

/*Mobile Logo Width*/
#logomenumobile,
#logomenurevealmobile{
  max-width:20%;
}

/*Centering Text in mobile*/
@media(max-width:600px) {
    .xs-text-center *{
        text-align:center!important;
    }
}    

/* General Stylings */
/* blockquote {
    border-left-color:#a0a0a0;
} */
.owl-custom-pagination .owl-page {
  outline:2px solid #f3f3f3;
}

/*Request Form Styling*/
.hnd-request-form h2{
  text-align : center;
  color:#fff;
  font-family : lora;
  font-style: italic;
  text-transform : none;
  margin-bottom : 40px;
}

.hnd-request-form {
  background :#111;
  padding:40px;
  position:relative;
}

.hnd-request-form input[type=text],
.hnd-request-form input[type=email]{
  background:transparent;
  border:0;
  border-bottom:2px solid #333;
  padding:7px;
  color:#fff;
}

.hnd-request-form span textarea {
  background-color:#222;
  border:0;
  color:#fff;
}
.hnd-request-form .wpcf7-submit, .hnd-request-form .wpcf7-submit:hover {
    color: #38a4b4 !important;
}
.hnd-request-form [type=submit],.hnd-request-form [type=submit]:hover {
  border: 5px solid #38a4b4;
  background-color:#fff;
  font-family: montserrat;
  padding:5px 30px;
  position:absolute;
  bottom:-20px;
  left:50%;
  -webkit-transform :translateX(-50%);
  -moz-transform :translateX(-50%);
  -transform :translateX(-50%);
  color:#38a4b4;
  text-transform:uppercase;
}

div.wpcf7-validation-errors,
div.wpcf7-mail-sent-ok{
  border:none;
  background-color: #111;
  margin: 40px -15px;;
  padding: 20px 60px;
}
div.wpcf7-validation-errors {
    color: #F00
}
div.wpcf7-mail-sent-ok {
    color:#fff;
}

/*Fullscreen Popup*/
.fullscreen-popup-container {
  max-width:980px;
  margin:0 auto;
  float:none;
}
.dt-popup-full .popup-close {
  position:absolute;
  top:10px;
  right:20px;
  color:#fff;
}
.height-100-vh {
    height:100vh;
    display:table;
    width:100%;
}
.fullscreen-popup-container {
    display:table-cell;
    vertical-align:middle;
}

.fullscreen-popup-container > div {
    max-width:980px;
    margin:0 auto;
}

/*WP Custom Menu Element Style*/
.vc_wp_custommenu li{
  display : inline-block;
  list-style :none;
  margin-bottom:20px;
}
.vc_wp_custommenu li.current-menu-item a{
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}
.vc_wp_custommenu li a {
  padding:10px;
  text-transform:uppercase;
  font-family:montserrat,arial;
  font-size: 0.68em;
}

/*Iconbox Arrow Background Fix*/
.dt-iconboxes span:after,
.dt-iconboxes.layout-3 span:after{
    border-top-color:#f3f3f3;
}

/*Timeline Marker Background Fix*/
.dt-timeline .time-item .center-line i:after {
    border-color:#f3f3f3;
}
.dt-timeline .time-item .center-line {
    background-color:#f3f3f3!important;
}

/*Animated Border*/

.eg-portfolios-wrapper:before,
.eg-portfolios-wrapper:after,
.eg-portfolios-wrapper > div:before,
.eg-portfolios-wrapper > div:after,
.eg-portfolios-wrapper > div > div:before,
.eg-portfolios-wrapper > div > div:after,
.eg-portfolios-wrapper > div > div > div:before,
.eg-portfolios-wrapper > div > div > div:after,
.eg-portfolio-detail-wrapper:before,
.eg-portfolio-detail-wrapper:after,
.eg-portfolio-detail-wrapper > div:before,
.eg-portfolio-detail-wrapper > div:after,
.eg-portfolio-detail-wrapper > div > div:before,
.eg-portfolio-detail-wrapper > div > div:after,
.eg-portfolio-detail-wrapper > div > div > div:before,
.eg-portfolio-detail-wrapper > div > div > div:after,
.eg-press-wrapper:before,
.eg-press-wrapper:after,
.eg-press-wrapper > div:before,
.eg-press-wrapper > div:after,
.eg-press-wrapper > div > div:before,
.eg-press-wrapper > div > div:after,
.eg-press-wrapper > div > div > div:before,
.eg-press-wrapper > div > div > div:after {
  background-color: #fff;
  content:'';
  position:absolute;
  z-index:1;
  -webkit-transition: all 350ms 200ms;
  -moz-transition: all 350ms 200ms;
  -ms-transition: all 350ms 200ms;
  transition:all 350ms 200ms;
}
.eg-portfolios-wrapper:before,
.eg-portfolios-wrapper:after,
.eg-portfolios-wrapper > div:before,
.eg-portfolios-wrapper > div:after,
.eg-portfolio-detail-wrapper:before,
.eg-portfolio-detail-wrapper:after,
.eg-portfolio-detail-wrapper > div:before,
.eg-portfolio-detail-wrapper > div:after,
.eg-press-wrapper:before,
.eg-press-wrapper:after,
.eg-press-wrapper > div:before,
.eg-press-wrapper > div:after {
  height:1px;
  width:0%;
}

.eg-portfolios-wrapper > div > div:before,
.eg-portfolios-wrapper > div > div:after,
.eg-portfolios-wrapper > div > div > div:before,
.eg-portfolios-wrapper > div > div > div:after,
.eg-portfolio-detail-wrapper > div > div:before,
.eg-portfolio-detail-wrapper > div > div:after,
.eg-portfolio-detail-wrapper > div > div > div:before,
.eg-portfolio-detail-wrapper > div > div > div:after,
.eg-press-wrapper > div > div:before,
.eg-press-wrapper > div > div:after,
.eg-press-wrapper > div > div > div:before,
.eg-press-wrapper > div > div > div:after {
  width:1px;
  height:0%;
}

.eg-portfolios-wrapper,
.eg-portfolio-detail-wrapper,
.eg-press-wrapper{
  position:relative;
}
.eg-portfolios-wrapper > div,
.eg-portfolio-detail-wrapper > div,
.eg-press-wrapper > div {
  position:relative;
}

.eg-portfolios-wrapper:before,
.eg-portfolio-detail-wrapper:before,
.eg-press-wrapper:before {
  top:20px;
  left:50%;
  margin-left:-20px;
}
.eg-portfolios-wrapper:after,
.eg-portfolio-detail-wrapper:after,
.eg-press-wrapper:after {
  top:20px;
  right:50%;
  margin-right:-20px;
}

.eg-portfolios-wrapper > div:before,
.eg-portfolio-detail-wrapper > div:before,
 .eg-press-wrapper > div:before{
  bottom:20px;
  right:50%;
  margin-right:-20px;
}
.eg-portfolios-wrapper > div:after,
.eg-portfolio-detail-wrapper > div:after,
.eg-press-wrapper > div:after {
  bottom:20px;
  left:50%;
  margin-left:-20px;
}

.eg-portfolios-wrapper > div > div:before,
.eg-portfolio-detail-wrapper > div > div:before,
.eg-press-wrapper > div > div:before {
  top:50%;
  left:20px;
  margin-top:-20px;
}
.eg-portfolios-wrapper > div > div:after,
.eg-portfolio-detail-wrapper > div > div:after,
.eg-press-wrapper > div > div:after {
  bottom:50%;
  left:20px;
  margin-bottom:-20px;
}

.eg-portfolios-wrapper > div > div > div:before,
.eg-portfolio-detail-wrapper > div > div > div:before,
.eg-press-wrapper > div > div > div:before   {
  top:50%;
  right:20px;
  margin-top:-20px;
}
.eg-portfolios-wrapper > div > div > div:after ,
.eg-portfolio-detail-wrapper > div > div > div:after,
.eg-press-wrapper > div > div > div:after {
  bottom:50%;
  right:20px;
  margin-bottom:-20px;
}

 
.eg-portfolios-wrapper:hover:before,
.eg-portfolios-wrapper:hover:after,
.eg-portfolios-wrapper:hover > div:before,
.eg-portfolios-wrapper:hover > div:after,
.eg-portfolio-detail-wrapper:hover:before,
.eg-portfolio-detail-wrapper:hover:after,
.eg-portfolio-detail-wrapper:hover > div:before,
.eg-portfolio-detail-wrapper:hover > div:after,
.eg-press-wrapper:hover:before,
.eg-press-wrapper:hover:after,
.eg-press-wrapper:hover > div:before,
.eg-press-wrapper:hover > div:after {
  width:50%;
}

.eg-portfolios-wrapper:hover > div > div:before,
.eg-portfolios-wrapper:hover > div > div:after,
.eg-portfolios-wrapper:hover > div > div > div:before,
.eg-portfolios-wrapper:hover > div > div > div:after,
.eg-portfolio-detail-wrapper:hover > div > div:before,
.eg-portfolio-detail-wrapper:hover > div > div:after,
.eg-portfolio-detail-wrapper:hover > div > div > div:before,
.eg-portfolio-detail-wrapper:hover > div > div > div:after,
.eg-press-wrapper:hover > div > div:before,
.eg-press-wrapper:hover > div > div:after,
.eg-press-wrapper:hover > div > div > div:before,
.eg-press-wrapper:hover > div > div > div:after {
  height:50%;
}

/*Press DT Carousel*/
@media(min-width:991px) {
  .press-slider .owl-carousel-container > .owl-carousel {
    width:75%;
    float:right;
  }

  .press-slider .owl-carousel-container .owl-custom-pagination {
    width:24%;
  } 
}
.press-slider .owl-custom-pagination .owl-page {
    margin-bottom:10px;
}
.press-slider .owl-custom-pagination .owl-page:after {
    background:rgba(0,0,0, 0.5);
}
.press-slider .owl-custom-pagination .owl-page.active:after {
    outline:0;
    background:none;
}
@media (max-width:990px) {
    .press-slider .owl-custom-pagination {
        display:none;
    }
    .press-slider .owl-item {
        cursor: ew-resize;
    }
}


/*VC gallery & Essential Grid Slider*/
.flex-control-nav {
    display:none;
}
.flex-direction-nav .flex-next:before,
.eg-icon-right-open:before {
    content: "\e001"!important;
}
.flex-direction-nav .flex-prev:before,
.eg-icon-left-open:before {
    content: "\e002"!important;

}
.esg-filters.esg-navbutton-solo-right,
.esg-filters.esg-navbutton-solo-left{ 
  -webkit-transform:translateY(-50%);
  -moz-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
}

.flex-direction-nav .flex-next:before,
.flex-direction-nav .flex-prev:before {
    font-family: "Flaticon";
    font-size: 15px!important;
    background-color:#fff;
    width: 80px;
    height: 80px;
    border-radius:50%;
    color:#000!important;
}
.eg-icon-right-open:before,
.eg-icon-left-open:before {
    font-family: "Flaticon";
    font-size: 1.4em!important;
    background-color:#fff;
    width: 80px;
    height: 80px;
    border-radius:50%;
    color:#000!important;
  line-height: 4em;
}
.eg-icon-right-open:before {
  letter-spacing:1em;
  text-indent:-15px;
}
.eg-icon-left-open:before {
  letter-spacing:-1em;
  text-indent:15px;
}
.esg-filters.esg-navbutton-solo-left {
  left:-55px;
} 
.esg-filters.esg-navbutton-solo-right {
  right:-55px;
}

.eg-icon-right-open:before,
.eg-icon-left-open:before {
    font-size: 20px;
    color:#fff;
}
.flexslider {
    border:0!important;
    box-shadow:none!important;
}
.flex-direction-nav a {
  color:#fff!important;
  height:30px!important;
  width:30px!important;
  border-radius:50%;
}
.flex-direction-nav a:before {
  font-size:1.2em!important;
  padding: 24px 15px!important;
  line-height:1.7em!important;
}
.flex-direction-nav a {
  height:70px!important;
  width:70px!important;
}
.flex-prev {
  left:-32px!important;
}
.flex-direction-nav .flex-prev:before {
  padding-left:40px!important;
  background-color:#f3f3f3!important;
}
.flex-direction-nav .flex-next:before {
  padding-right: 55px!important;
  background-color:#f3f3f3!important;
}
.flex-next {
  right:-32px!important;
}
.wpb_flexslider {
  overflow:hidden;  
}
.flexslider:hover .flex-prev,
.flexslider:hover .flex-next {
  opacity:1!important;
}
/*Portfolio Type 7*/
.eg-portfolio-skin-3-wrapper .esg-entry-cover .esg-bc {
  background-color:#fff;
  border:1px solid #fff;
}
/*Portfolio Type 7*/
.eg-portfolio-skin-3-wrapper .esg-entry-cover .esg-bc {
  background-color:#fff;
  border:1px solid #fff;
}

/*Animated View Detail Button*/

.esg-entry-media {
  position:relative
}

.esg-grid .eg-hnd-services-element-7 {
  display:inline!important;
  padding:10px 20px!important;
  position:relative!important;
}
.esg-grid .eg-hnd-services-element-7:before,
.esg-grid .eg-hnd-services-element-7:after {
  transition:all 900ms 200ms, top 200ms, bottom 200ms;
    -webkit-transition:all 900ms 200ms, top 200ms, bottom 200ms;
}
 .eg-hnd-services-wrapper .eg-hnd-services-element-7:before {
  content:'';
  display:block;
  background-color:#fff;
  width:100%;;
  height:1px;
  position:absolute;
  top:0;
  right:50%;
  transform:translateX(1350%);
    -webkit-transform:translateX(1350%);
   
}
 .eg-hnd-services-wrapper .eg-hnd-services-element-7:after {
  content:'';
  display:block;
  background-color:#fff;
  width:100%;;
  height:1px;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-1350%);
    -webkit-transform:translateX(-1350%);
}

.eg-hnd-services-wrapper .eg-hnd-services-element-7:hover:before {
  top:-7px;
}

.eg-hnd-services-wrapper .eg-hnd-services-element-7:hover:after {
  bottom:-7px
}


.eg-hnd-services-wrapper:hover .eg-hnd-services-element-7:before {
  transform:translateX(50%);
    -webkit-transform:translateX(50%);
}

.eg-hnd-services-wrapper:hover .eg-hnd-services-element-7:after {
  transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
}

/*Animated View Detail Button portfolio Skin 2*/
.esg-grid .eg-portfolio-skin-2-element-8 {
  display:inline!important;
  padding:15px 30px!important;
  position:relative!important;
}
.esg-grid .eg-portfolio-skin-2-element-8:before {
  transition:all 900ms 200ms, top 200ms, bottom 200ms;
    -webkit-transition:all 900ms 200ms, top 200ms, bottom 200ms;
}
 .eg-portfolio-skin-2-wrapper .eg-portfolio-skin-2-element-8:before {
  content:'';
  display:block;
  background-color:#fff;
  width:100%;;
  height:1px;
  position:absolute;
  top:0;
  right:50%;
  transform:translateX(1350%);
    -webkit-transform:translateX(1350%);
   
}


.eg-portfolio-skin-2-wrapper:hover .eg-portfolio-skin-2-element-8:before {
  transform:translateX(50%);
    -webkit-transform:translateX(50%);
}


/*Animated Service Title*/
.eg-hnd-services-element-2 {
 -webkit-transform:translateY(80px);
 -moz-transform:translateY(80px);
 transform:translateY(80px);
 -webkit-transition:all 500ms ease 200ms;
 -moz-transition:all 500ms ease 200ms;
 transition:all 500ms ease 200ms;
 -webkit-transition:all 500ms ease 200ms; 
}
.eg-hnd-services-wrapper:hover .eg-hnd-services-element-2 {
 -webkit-transform:translateY(0px);
 -moz-transform:translateY(0px);
 transform:translateY(0px);
 -webkit-transform:translateY(0px);
}


/*Darken Service Image*/
.eg-hnd-services-wrapper .esg-entry-media:after {
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  display:block;
  background-color:rgba(0,0,0, 0.3);
}

/* Essential Grid Animations*/

/*Animated View Detail Button*/

.esg-entry-media {
  position:relative
}

.esg-grid .eg-hnd-services-element-7 {
  display:inline!important;
  padding:10px 20px!important;
  position:relative!important;
}
.esg-grid .eg-hnd-services-element-7:before,
.esg-grid .eg-hnd-services-element-7:after {
  transition:all 900ms 200ms, top 200ms, bottom 200ms;
    -webkit-transition:all 900ms 200ms, top 200ms, bottom 200ms;
}
 .eg-hnd-services-wrapper .eg-hnd-services-element-7:before {
  content:'';
  display:block;
  background-color:#fff;
  width:100%;;
  height:1px;
  position:absolute;
  top:0;
  right:50%;
  transform:translateX(1350%);
    -webkit-transform:translateX(1350%);
   
}
 .eg-hnd-services-wrapper .eg-hnd-services-element-7:after {
  content:'';
  display:block;
  background-color:#fff;
  width:100%;;
  height:1px;
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-1350%);
    -webkit-transform:translateX(-1350%);
}

.eg-hnd-services-wrapper .eg-hnd-services-element-7:hover:before {
  top:-7px;
}

.eg-hnd-services-wrapper .eg-hnd-services-element-7:hover:after {
  bottom:-7px
}


.eg-hnd-services-wrapper:hover .eg-hnd-services-element-7:before {
  transform:translateX(50%);
    -webkit-transform:translateX(50%);
}

.eg-hnd-services-wrapper:hover .eg-hnd-services-element-7:after {
  transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
}

/*Animated View Detail Button Project Skin 2*/
.esg-grid .eg-project-skin-2-element-8 {
  display:inline!important;
  padding:15px 30px!important;
  position:relative!important;
}
.esg-grid .eg-project-skin-2-element-8:before {
  transition:all 900ms 200ms, top 200ms, bottom 200ms;
    -webkit-transition:all 900ms 200ms, top 200ms, bottom 200ms;
}
 .eg-project-skin-2-wrapper .eg-project-skin-2-element-8:before {
  content:'';
  display:block;
  background-color:#fff;
  width:100%;;
  height:1px;
  position:absolute;
  top:0;
  right:50%;
  transform:translateX(1350%);
    -webkit-transform:translateX(1350%);
   
}


.eg-project-skin-2-wrapper:hover .eg-project-skin-2-element-8:before {
  transform:translateX(50%);
    -webkit-transform:translateX(50%);
}


/*Animated Service Title*/
.eg-hnd-services-element-2 {
 -webkit-transform:translateY(80px);
 -moz-transform:translateY(80px);
 transform:translateY(80px);
 -webkit-transition:all 500ms ease 200ms;
 -moz-transition:all 500ms ease 200ms;
 transition:all 500ms ease 200ms;
 -webkit-transition:all 500ms ease 200ms; 
}
.eg-hnd-services-wrapper:hover .eg-hnd-services-element-2 {
 -webkit-transform:translateY(0px);
 -moz-transform:translateY(0px);
 transform:translateY(0px);
 -webkit-transform:translateY(0px);
}


/*Darken Service Image*/
.eg-hnd-services-wrapper .esg-entry-media:after {
  position:absolute;
  content:'';
  width:100%;
  height:100%;
  display:block;
  background-color:rgba(0,0,0, 0.3);
}

/*------------BATAS---------------*/
/*custom button on cart*/
.woocommerce-mini-cart__buttons.buttons a {
  font-family: "Montserrat" !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 17px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  padding: 6px 24px !important;
}

.quadmenu-title {
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px !important;
  font-family: Montserrat !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 21px !important;
  border-bottom: 1px solid rgba(0,0,0,0.2) !important;
}

.quad-menu-child .quadmenu-item-content {
  padding: 0 !important;
  margin: 6px 0 6px 0;
}

.quad-title2 {
  margin-bottom: 6px;
}

.quad-title2 a  {
  font-family: Lato !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 21px !important;
}

/** Stabilo Effect **/
.stabilo {
  background-image: linear-gradient(120deg, rgba(56, 164, 180, 0.5) 0%, rgba(56, 164, 180, 0.5) 100%);
    background-repeat: no-repeat;
    background-position: 0 88%;
    transition: background-size 0.25s ease-in;
    border-bottom: unset;
    background-size: 100% 48%;
}

/**Intro Style **/
.ketocist-intro {
  color: #323232;
    font: 400 20px/38px "Merriweather",Arial,sans-serif;
    margin: 0 0 24px;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #38a4b4;
    line-height: 2rem;
    quotes: "“" "”" "‘" "’";
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 12px 0px, rgba(0, 0, 0, 0.05) 0px 0px 35px 0px, rgba(0, 0, 0, 0.15) 0px 30px 100px -40px;
    background: rgb(255, 255, 255);
    padding: 2rem 4rem;
}

.testi-desc .content-desc {
  font-style: italic;
}

/*WP Custom Menu Element Style*/
ul#menu-services li{
  display : inline-block;
  list-style :none;
  margin-bottom:20px;
}
#menu-services li.current-menu-item a{
  border-top:1px solid #333333;
  border-bottom:1px solid #333333;
}
#menu-services li a {
  padding:10px;
  text-transform:uppercase;
  font-family:montserrat,arial;
  font-size: 12px;
  color: #333333;
  font-weight: 700;
}
#menu-services li a:hover {
  color: #38a4b4;
}

/*Request Form Styling*/
.hnd-request-form h2{
  width:100%;
  text-align : center;
  color:#fff;
  font-family : merriweather;
  font-weight: 400;
  font-style: italic;
  text-transform : none;
  margin-bottom : 40px;
}

.hnd-request-form {
  background :#111;
  padding:40px;
  position:relative;
}

.hnd-request-form input[type=text],
.hnd-request-form input[type=email]{
  background:transparent;
  border:0;
  border-bottom:1px solid #555;
  padding:12px;
  color:#fff;
}

.hnd-request-form span textarea {
  background-color:#222;
  border:0;
  color:#fff;
}

.hnd-request-form [type=submit] {
  border: 5px solid #38a4b4;
  background-color:#fff;
  font-family: montserrat;
  padding:5px 30px;
  position:absolute;
  bottom:-20px;
  left:50%;
  -webkit-transform :translateX(-50%);
  -moz-transform :translateX(-50%);
  -transform :translateX(-50%);
  color:#38a4b4;
  text-transform:uppercase;
}

.hnd-request-form [type=submit]:hover {
  background-color:#f5f5f5;
}

div.wpcf7-validation-errors,
div.wpcf7-mail-sent-ok{
  border:none;
  background-color: #111;
  margin: 40px -15px;;
  padding: 20px 60px;
}
div.wpcf7-validation-errors {
    color: #F00
}
div.wpcf7-mail-sent-ok {
    color:#fff;
}

form input[type=email]::placeholder, form input[type=password]::placeholder, form input[type=search]::placeholder, form input[type=tel]::placeholder, form input[type=text]::placeholder, form input[type=url]::placeholder {
    opacity: 1 !important;
  color: #888;
}