/*
Theme Name: INDO TEHNIK
Author: Judah Andrew S - yehudha_mail@yahoo.com
Date Start: 17-Feb-2016 07.19 WIB;

Description: INDO TEHNIK theme is One Page Theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Copyright 2016. All Right Reserved
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
*/

body {font-family: 'Century Gothic', Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 14px; line-height: 2; color: #35495E; position: relative; -webkit-font-smoothing: antialiased; background-color: #ecf0f1; margin:0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Raleway', sans-serif !important; font-weight: 900; text-transform: uppercase; color: #35495E; line-height: 2; font-weight: bold; margin: 0px;}
a, a:focus {color: #35495E; transition-property: color; transition-duration: 0.5s; transition-timing-function: linear; text-decoration: none;}
a:hover {color: #2c3e50; text-decoration: none;}
.color-link {color: #fff}
.color-link:hover, .color-link:focus  {color: #d35400}

.rwd-img {width: 100%}
.rwd80-img {width: 80%}
section {position: relative; overflow: hidden; padding: 110px 0px 110px 0px}
.down-arrow {text-align: center; padding: 50px 0; font-size: 40px; color: #35495E}
.text-white {color: #fff;}

.container-in {padding-right: 50px; padding-left: 50px; margin-right: auto; margin-left: auto;}
.white-us {background: #fff; padding: 100px 50px 100px 50px; overflow: hidden;}
.black-us {background: #2c3e50; padding: 100px 50px 100px 50px; overflow: hidden; color: #fff !important;}
.black-us h2 {color: #ecf0f1 !important;}

@media (max-width: 1200px) {
  .container-in {padding-right: 30px; padding-left: 30px;}
}
@media (max-width: 480px) {
  .container-in {padding-right: 0px; padding-left: 0px;}
  .white-us, .black-us {padding: 50px 25px}

}

.top-padding {padding-top: 100px;}

.readmore-big-white {font-size: 16px; font-weight: bold; color: #35495E; border: 2px solid #35495E; padding: 10px 20px; display: inline-block;}
.readmore-big-white:hover {font-size: 16px; color: #35495E; border: 2px solid #35495E; background-color: #bdc3c7}

.readmore-big-color {font-size: 16px; font-weight: bold; color: #d35400; border: 2px solid #d35400; padding: 10px 20px; display: inline-block;}
.readmore-big-color:hover {font-size: 16px; color: #35495E; border: 2px solid #d35400; background-color: #d35400}

.readmore-medium-white {font-size: 12px; font-weight: bold; color: #35495E; border: 2px solid #35495E; padding: 10px 20px; display: inline-block;}
.readmore-medium-white:hover {font-size: 12px; color: #35495E; border: 2px solid #35495E; background-color: #bdc3c7}

.readmore-medium-color {font-size: 12px; font-weight: bold; color: #d35400; border: 2px solid #d35400; padding: 10px 20px; display: inline-block;}
.readmore-medium-color:hover {font-size: 12px; color: #35495E; border: 2px solid #d35400; background-color: #d35400}

.title-section {text-align: center; margin-bottom: 70px;}
.title-section h2 {background: #fff; color: #0861ae; display: inline-block; z-index: 1; padding: 0px 10px;}
.line-title {border-bottom: 1px solid #0861ae; margin-top: -30px; z-index: -1;}

.line-section {border: 2px solid #d35400; margin-top: 17px;}
.line-section-white {border: 2px solid #35495E; margin-top: 17px;}

.blue-title {text-align: right;}
.blue-title h3 {background: #000; display: inline-block; z-index: 1; padding: 0px 10px; color: #35495E}
.blue-line-title {border-bottom: 1px solid #000; top: -24px; position: relative; z-index: -1}

div#preloader {position: fixed; left: 0; top: 0; z-index: 9999999; width: 100%; height: 100%; overflow: hidden; background: #fff url('../images/loader-indo-tehnik.gif') no-repeat center center; }

/* HEADER SECTION */
#header-section {background-color: #ecf0f1; position: fixed; width: 100%; top: 0px; padding: 10px; z-index: 100000; font-size: 13px;}
.logo-part {width: 40%; float: left;}
.menu-part {width: 60%; float: right;}
.rwd-nav {display: inline-block;}
.rwd-nav i {font-size: 25px; line-height: 55px;}

.scroll-header {background-color: #ecf0f1 !important; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;}

.home-wrap {background-color: rgba(0,0,0,0.85); width: 100%; height: 100%; position: relative; top: 0; z-index: 10000;}
.home-content-wrap {font-family: 'Century Gothic', sans-serif; display: table-cell; vertical-align: middle; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; text-align: center; width: 100%; border: 1px solid #fff;}

/* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
.link-effect {text-align: right;}
.link-effect li {padding: 0px;}
.link-effect li a {padding: 10px 0; color: #7f8c8d; text-shadow: none; font-family: 'Raleway', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 18px; letter-spacing: 5px;} 
.link-effect li a::before {position: absolute; overflow: hidden; padding: 3px 0 0 0; max-width: 0; border-bottom: 1px solid #0861ae; color: #0861ae; content: attr(data-hover); -webkit-transition: max-width 0.5s; -moz-transition: max-width 0.5s; transition: max-width 0.5s;}
.link-effect li a:hover::before, .link-effect li a:focus::before { -webkit-transition: max-width 4s; -moz-transition: max-width 4s; transition: max-width 4s; max-width: 100%;}

/* Menu */
.menunorwd {float: right;}
.norwd-menu {text-align: right; padding: 0px; margin: 0; line-height: 70px;}
.norwd-menu li {display: inline; padding: 0px}
.norwd-menu li a {font-weight: bold; padding: 10px 15px; border: transparent 2px solid; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.norwd-menu li a:hover, .norwd-menu li a.current {font-weight: bold; border: #0861ae 2px solid; color: #0861ae;}

.menurwd {position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.95); padding: 70px 0; display: none;}
.menurwd div ul {padding-top: 30px;}
.menurwd div ul li {list-style: none; font-size: 20px; padding: 0px 20px}
.menurwd > ul li a: {position: relative; display: inline; cursor: pointer; -webkit-transition: color 0.4s ease; transition: color 0.4s ease;}
.menurwd > ul li a:hover { color: #fff;}
.menurwd > ul li a:hover:after { width: 100%; }
.menurwd > ul li a:after { content: ''; position: absolute; z-index: 2; bottom: -0.15em; left: 0; width: 0; height: 2px; background: #e5e5e5; -webkit-transition: width 0.4s ease; transition: width 0.4s ease;}
.show-menu {display: block !important;}

/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:0.2s;
    -moz-animation-duration:0.2s;
    animation-duration:0.2s;
}

/* Burger Icon General */
#burger-icon { width: 25px; height: 16px; position: relative; float: right; margin: 20px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; display: none;}
#burger-icon span { display: block; position: absolute; height: 5px; width: 100%; background: #7f8c8d; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out;}

/* Burger Icon Set */
#burger-icon span:nth-child(1) { top: 0px; }
#burger-icon span:nth-child(2),#burger-icon span:nth-child(3) { top: 7px; }
#burger-icon span:nth-child(4) { top: 14px; }
#burger-icon.open span:nth-child(1) { bottom: 0%; height: 0%; }
#burger-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#burger-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
#burger-icon.open span:nth-child(4) { bottom: 0%; height: 0%; }

/* SCROLL to TOP */
#scroll-top { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; font-size: 40px; line-height: 45px; border-radius: 5px; text-align: center; background-color: rgba(50, 50, 50, 0.75); z-index: 10000; }
#scroll-top a {color: #ccc}
#scroll-top a:hover, #scroll-top a:focus {color: #fff}

/* LATEST EVENT */
#latest-event {position: relative; margin-top: -133px; background-color: rgba(44,62,80,0.5); padding: 20px}
.datetime-event {border-right: 1px solid #35495E;}
.date-event {background-color: #d35400; display: inline-block; padding: 10px 15px; float: left; color: #fff;}
.date-event h1 {text-align: center; margin: 0px;  color: #fff; font-size: 34px;}
.time-title {padding: 0px 20px 10px 20px; overflow: hidden;}
.time-event {color: #95a5a6; font-size: 12px;}
.title-event h4 {margin: 0px; font-size: 3.5vmin;}
.map-marker i {font-size: 30px; text-align: center;}
.location-marker {color: #fff; font-size: 14px;}

/* SLIDE SECTION */
#slide-section {margin-top: 70px;}
.slide-content {position: absolute; width: 100%; top: 25%;}
.slide-content h1 {font-family: 'Raleway', sans-serif !important; font-weight: bold; color: #fff; font-size: 7.5vmin;}
.slide-content span { font-size: 3vmin; color: #fff; font-weight: bold; display: block;}

/* ABOUT SECTION */
#about-section {margin-top: -20px;}
#about-section h2 {margin: 0px;}
.new-idea {padding: 30px; border: 5px solid #2c3e50;}

/* VISION SECTION */
#vision-section {padding: 50px 0; color: #fff}
#vision-section h3 {margin: 20px 0; color: #fff}
.vision-item span {font-size: 50px; color: #fff; margin: 30px 0;}
.vision-item span i.fa-circle {color: #7f8c8d}
.vision-item span i.fa-inverse {color: #fff;}

.item-customer {margin: 15px 0}

/* SERVICE SECTION */
#service-section {}
.service-item {padding: 40px 0; overflow: hidden;}
.wrap-item-service {overflow: hidden;}
.item-service img { width: 100%; height: 100%}
.item-service-title {text-align: center; padding: 10px 0 25px 0;}

/* PRODUCT SECTION */
#product-section {}
.product-content {padding: 40px 0; overflow: hidden;}
.item-product {padding: 30px; text-align: center;}


/* GALLERY SECTION */
#gallery-section {margin-bottom: 50px;}
.gallery-content {overflow: hidden;}
.item-gallery {margin: 15px 0}
.nama-gallery {width: 100%; font-size: 12px; padding: 10px 0; text-align: center;}

/* CONTACT SECTION */
#contact-section {}
.content-contact {text-align: center; padding: 30px 0 60px 0; overflow: hidden;}
.left-contact {text-align: right;}
.right-contact {text-align: left;}
.circle-icon {border-radius: 50%; background-color: #fff; width: 50px; height: 50px; display: inline-block;}
.circle-icon i {color: #000; font-size: 30px; padding: 11px;}

/* FOOTER SECTION */ 
#footer-section{margin-bottom: 50px;}
.footer-content {background-color: #7f8c8d; overflow: hidden; text-align: center; color: #fff; font-size: 12px; padding-bottom: 40px;}
.footer-content p {font-size: 14px;}
.menu-footer ul {padding: 50px 0 0 0}
.menu-footer ul li {display: inline; list-style: none; padding: 0 10px;}
.menu-footer ul li a {color: #fff}


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

@media (max-width: 1200px) {

#menu-utama {display: none;}
#menu-utama-rwd a {font-weight: bold;}
#menu-utama-rwd a:hover, #menu-utama-rwd a:focus {text-decoration: none;}

.logo-part {width: 30%; float: left;}
.menu-part {width: 70%; float: right;}

.left-contact {text-align: center;}
.right-contact {text-align: center; padding-top: 20px;}  

/* LATEST EVENT */
.readmore-marker {display: none;}

} 

@media (max-width: 991px) {
.datetime-event {border: none;}  
.locationread-event {display: none;}

.menunorwd {display: none;}
#burger-icon {display: block;}
} 

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
.line-section, .line-section-white {display: none;}  
#latest-event {margin-top: -10px; background-color: rgba(44,62,80,1);} 
.slide-content {top: 30%;}

}
 
/* Landscape phones and down */
@media (max-width: 480px) {
.readmore-big-color {font-size: 12px;}  
.readmore-big-color:hover {font-size: 12px;}
 
.slide-content h1 {font-size: 18px;}

#header-section {padding: 10px 0;}
#header-section .container {padding: 0px;}
.logo-part {width: 83%}
.menu-part {width: 17%}
.logo-part a img {width: 100%;}
}

/* Landscape phones and down */
@media (max-width: 320px) {
}

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}