/*!
Design by Alphasquad Inc.
(http://danangalvaris.com)
Description: wahanaintiselaras
Version: 4.2 - 2022
*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .table-header {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
}
/*   color  
===================================*/
/*   background color   */
.bg-blue1 {
	background-color: #0C479D!important;
}
.bg-blue2 {
	background-color: #518ece!important;
}
.bg-blue2b {
	background-color: #b4dffe!important;
}
.bg-blue3 {
	background-color: #dcedfb!important;
}
.bg-red1 {
	background-color: #ff3334;
}
.bg-red2 {
	background-color: #c23333;
}
.bg-purple1 {
	background-color: #4444bc;
}
.bg-purple2 {
	background-color: #7474e8;
}
.bg-purple3 {
	background-color: #adabfd;
}
.bg-grey1 {
	background-color:#dbe1e1;
}
.bg-grey2 {
	background-color: #b3bdbe;
}
.bg-grey3 {
	background-color: #677275;	
}
.bg-grey4 {
	background-color: #2e3e44;	
}
.bg-white {
	background-color: #ffffff;
}
.bg-black1 {
	background-color: #3a3e4a;
}
.bg-black2 {
	background-color: #252934;
}
.bg-black3 {
	background-color: #262733;
}
.bg-yellow {
	background-color:#FFC600;
}
.bg-orange {
	background-color:#ee9544;
}
.bg-green {
	background-color:#26d367;
}
.bg-lightgrey{
	background-color:#f8f8f8;
}
.bg-lightblue{
	background-color:#f6faff;
}
.bg-darkblue{
	background-color:#0d3747;
}
.bg-sectionblue{
	background-color:#dcedfb42;
}
.bg-trans {
	background-color: rgba(255,255,255,0.39);
}
.bg-shadow{
	-webkit-box-shadow: 0 1px 3px rgba(104,104,104,1);
	-moz-box-shadow: 0 1px 3px rgba(104,104,104,1);
	box-shadow: 0 1px 3px rgba(104,104,104,1);
}
.bg-footer {
	background: url(../img/logoicon/footer.jpg) center no-repeat;
    background-size: cover;
}
.bg-exxon {
	background: url(../img/bg-exxon.jpg) center no-repeat;
    background-size: cover;
}
.bg-product {
	background: url(../img/bg-product.jpg) center no-repeat;
    background-size: cover;
}
.bg-services {
	background: url(../img/bg-services.jpg) center no-repeat;
    background-size: cover;
}
.bg-navsti {
    background: url(../img/logoicon/bordernav.jpg) center repeat-x;
	background-size:contain;
    padding-bottom: 7px;
    overflow: hidden;
    margin: 0 auto;
}

.bg-hover img {
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.bg-hover:hover img {
    filter: grayscale(100%);
    -moz-transform: scale(1.05,1.05);
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}
.hover-red:hover {
	background-color:#ff3334;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.hover-blue:hover {
	background-color:#0b6b8e;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.hover-purple:hover {
	background-color:#adabfd;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.hover-image {
	background-color:#000000;
	opacity: 0.5;
	width: 100%;
    height: 100%;
    position: absolute;
}
.bg-bottom30 {
	background: linear-gradient(to bottom, #ffffff 70%, #d6dfe8 30%);
}
.bg-top30 {
	background: linear-gradient(to bottom, #d6dfe8 30%, #ffffff 0%);
}
.bg-bottom70 {
	background: linear-gradient(to bottom, #ffffff 30%, #d6dfe8 70%);
}
.bg-top70 {
	background: linear-gradient(to bottom, #d6dfe8 70%, #ffffff 30%);
}
.btn-triangle:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent #00b83d transparent;
}
.banner_about {
    background: url(../img/aboutus/banner.jpg) center no-repeat, rgba(0, 0, 0, 0.35);
	background-size: cover;
    background-blend-mode: overlay;
    height: 150px;
}
.divider_border-blue {
    padding-bottom: 0;
    margin: 30px auto;
    border-top: 1px solid #518ece;
}
.divider_border-red {
    padding-bottom: 0;
    margin: 30px auto;
    border-top: 1px solid #ff3334;
}
.border-red1 {
    border-color: #ff3334!important;
	opacity: 1!important;
}
/*   text color   */
.txt-blue1 {
	color: #0C479D!important;
}
.txt-blue2 {
	color: #518ece!important;
}
.txt-blue3 {
	color: #dcedfb!important;
}
.txt-red1 {
	color: #ff3334;
}
.txt-red2 {
	color: #c23333;
}
.txt-purple1 {
	color: #4444bc;
}
.txt-purple2 {
	color: #7474e8;
}
.txt-purple3 {
	color: #adabfd;
}
.txt-black {
	color: #3a3e4a;
}
.txt-grey1 {
	color:#dbe1e1;	
}
.txt-grey2 {
	color: #b3bdbe;
}
.txt-grey3 {
	color: #677275;	
}
.txt-grey4 {
	color: #2e3e44;	
}
.txt-white {
	color: #ffffff;
}
.txt-black1 {
	color: #3a3e4a;
}
.txt-black2 {
	color: #252934;
}
.txt-black3 {
	color: #262733;
}
.txt-yellow {
	color:#FFC600;
}
.txt-orange {
	color:#ee9544;
}
.txt-shadow{
	-webkit-text-shadow: 1px 1px 3px rgba(104,104,104,1);
	-moz-text-shadow: 1px 1px 3px rgba(104,104,104,1);
	text-shadow: 1px 1px 3px rgba(104,104,104,1);
}
/*   button color   */
small {
	font-size: 90%;
}
a {
	color:#004780;
}
.txt-blue1.active {
	color:#ffffff;
}
.btn.focus, .btn:focus {
	box-shadow:none;
}
.btn {
    font-weight: 400;
	font-size: 13px;
    border-radius: 10px!important;
	/*border-radius:1px!important;*/
}
.btn-alpha_white {
	color: #004780;
	background-color: #ffffff;
	border-color: #ffffff;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.btn-alpha_white:hover,
.btn-alpha_white:focus,
.btn-alpha_white.focus,
.btn-alpha_white:active,
.btn-alpha_white.active,
.open > .dropdown-toggle.btn-alpha_white {
  color: #ffffff;
  background-color: #004780;
  border-color: #ffffff;
}
.btn-alpha_white:active,
.btn-alpha_white.active,
.open > .dropdown-toggle.btn-alpha_white {
  background-image: none;
}
.btn-alpha_whiteline {
	color: #004780;
	background-color: #ffffff;
	border-color: #004780;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.btn-alpha_whiteline:hover,
.btn-alpha_whiteline:focus,
.btn-alpha_whiteline.focus,
.btn-alpha_whiteline:active,
.btn-alpha_whiteline.active,
.open > .dropdown-toggle.btn-alpha_whiteline {
  color: #ffffff;
  background-color: #004780;
  border-color: #004780;
}
.btn-alpha_whiteline:active,
.btn-alpha_whiteline.active,
.open > .dropdown-toggle.btn-alpha_whiteline {
  background-image: none;
}
.btn-alpha_blue {
	color: #ffffff;
	background-color: #0b6b8e;
	border-color: #0b6b8e;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.btn-alpha_blue:hover,
.btn-alpha_blue:focus,
.btn-alpha_blue.focus,
.btn-alpha_blue:active,
.btn-alpha_blue.active,
.open > .dropdown-toggle.btn-alpha_blue {
  color: #ffffff;
  background-color: #25aae2;
  border-color: #25aae2;
}
.btn-alpha_blue:active,
.btn-alpha_blue.active,
.open > .dropdown-toggle.btn-alpha_blue {
  background-image: none;
}
.btn-alpha_yellow {
	color: #ffffff;
	background-color: #FFC600;
	border-color: #FFC600;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.btn-alpha_yellow:hover,
.btn-alpha_yellow:focus,
.btn-alpha_yellow.focus,
.btn-alpha_yellow:active,
.btn-alpha_yellow.active,
.open > .dropdown-toggle.btn-alpha_yellow {
  color: #FFC600;
  background-color: #ffffff;
  border-color: #FFC600;
}
.btn-alpha_yellow:active,
.btn-alpha_yellow.active,
.open > .dropdown-toggle.btn-alpha_yellow {
  background-image: none;
}
.btn-alpha_purple {
	color: #ffffff;
	background-color: #7474e8;
	border-color: #7474e8;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.btn-alpha_purple:hover,
.btn-alpha_purple:focus,
.btn-alpha_purple.focus,
.btn-alpha_purple:active,
.btn-alpha_purple.active,
.open > .dropdown-toggle.btn-alpha_purple {
  color: #ffffff;
  background-color: #acacfd;
  border-color: #acacfd;
}
.btn-alpha_purple:active,
.btn-alpha_purple.active,
.open > .dropdown-toggle.btn-alpha_purple {
  background-image: none;
}
.btn-alpha_subscribe {
	color: #ffffff;
	background-color: #3a3e4a;
	border-color: #3a3e4a;
	border-radius:25px!important;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.btn-alpha_subscribe:hover,
.btn-alpha_subscribe:focus,
.btn-alpha_subscribe.focus,
.btn-alpha_subscribe:active,
.btn-alpha_subscribe.active,
.open > .dropdown-toggle.btn-alpha_subscribe {
  color: #ffffff;
  background-color: #004780;
  border-color: #004780;
}
.btn-alpha_subscribe:active,
.btn-alpha_subscribe.active,
.open > .dropdown-toggle.btn-alpha_subscribe {
  background-image: none;
}
.carousel-indicators li {
	background-color:rgba(255, 193, 7, 0.7);
}
.carousel-indicators li.active {
	background-color:#ffc107;
}
/*   end button color   */
/* === general use === */
.navalpha, .navalpha .btn {
		font-family: 'Roboto'!important;
		font-size:14px!important;
		font-weight:700!important;
	}
.navalpha .nav-link {
	border-bottom:1px solid transparent;
	color:#3a3e4a;
	color: #7a8390;
    text-decoration: none;
    -webkit-transition: color .4s cubic-bezier(.165,.84,.44,1);
    -o-transition: color .4s cubic-bezier(.165,.84,.44,1);
    transition: color .4s cubic-bezier(.165,.84,.44,1);
}
/*
.navalpha .nav-link:hover {
	border-bottom:1px solid #004780;
	color:#004780;
	background-color:#f8f8f8;
}
*/
.navalpha .nav-link:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #b5121b;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 1s cubic-bezier(.165,.84,.44,1);
    transition: -webkit-transform 1s cubic-bezier(.165,.84,.44,1);
    -o-transition: transform 1s cubic-bezier(.165,.84,.44,1);
    transition: transform 1s cubic-bezier(.165,.84,.44,1);
    transition: transform 1s cubic-bezier(.165,.84,.44,1),-webkit-transform 1s cubic-bezier(.165,.84,.44,1);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}

.logoalpha {
	background:url(../img/logoicon/logo-sti_ll.png) no-repeat;
	background-size:cover;
	width: 184px;
    height: 52px;
	/*margin-top:15px;*/
}

	body {
		background: #fff;
		font-family: 'Open Sans', sans-serif;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #000;
	}
	html {
		height: 100%;
	}
	a {
		-webkit-transition: 300ms;
		-moz-transition: 300ms;
		-o-transition: 300ms;
		transition: 300ms;
	}
	.framesection {
		padding:0 25px;
	}
	.sectionalpha {
		padding:25px 0;
		position:relative;
	}
	.page-header {
		padding-bottom: 9px;
		margin: 20px 0 10px;
		/*border-bottom: 1px solid rgba(238, 238, 238, 0.1);*/
	}
	.openingpage {
	  padding-bottom: 40px;
	}
	.page-title {
		line-height: 1.7;	
	}
	.navspacer {
		margin-top:50px;	
	}
.row-centered {
    text-align: center;
}
.col-centered {
    display: inline-block;
    float: none;
    text-align: left;
}


/******************* Timeline Demo - 11 *****************/
.sejarah-ipe{overflow:hidden;position:relative}
.sejarah-ipe:before{content:"";width:7px;height:100%;background:#909090;position:absolute;top:0;left:50%;transform:translateX(-50%)}
.sejarah-ipe .timeline{width:50%;padding-left:50px;float:right;position:relative}
.sejarah-ipe .timeline:after,.sejarah-ipe .timeline:before{position:absolute;content:"";top:50%;transform:translateY(-50%)}
.sejarah-ipe .timeline:before{width:30px;height:30px;border-radius:50%;background:#909090;border:7px solid #fff;left:-15px}
.sejarah-ipe .timeline:after{display:block;border-right:30px solid #518ece;border-top:20px solid transparent;border-bottom:20px solid transparent;left:24px}
.sejarah-ipe .timeline-content{display:block;padding:5px;border-radius:100px;background:#518ece;position:relative}
.sejarah-ipe .timeline-content:after,.sejarah-ipe .timeline-content:before{content:"";display:block;width:100%;clear:both}
.sejarah-ipe .timeline-content:hover{text-decoration:none}
.sejarah-ipe .inner-content{width:70%;float:right;padding:15px 20px 15px 15px;background:#fff;border-radius:0 100px 100px 0;color:#518ece}
.sejarah-ipe .year{display:inline-block;font-size:50px;font-weight:600;color:#fff;position:absolute;top:50%;left:7%;transform:translateY(-50%)}
.sejarah-ipe .title{font-size:24px;font-weight:600;text-transform:uppercase;margin:0 0 5px}
.sejarah-ipe .description{font-size:14px;margin:0 0 5px;min-height: 96px;}
.sejarah-ipe .timeline:nth-child(2n){padding:0 50px 0 0}
.sejarah-ipe .timeline:nth-child(2n) .year,.sejarah-ipe .timeline:nth-child(2n):before{left:auto;right:-15px}
.sejarah-ipe .timeline:nth-child(2n) .year{right:7%;color:#518ece;}
.sejarah-ipe .timeline:nth-child(2n):after{border-right:none;border-left:30px solid #518ece;left:auto;right:24px;border-left-color:#dcedfb}
.sejarah-ipe .timeline:nth-child(2n) .inner-content{float:none;border-radius:100px 0 0 100px;text-align:right}
.sejarah-ipe .timeline:nth-child(2){margin-top:130px}
.sejarah-ipe .timeline:nth-child(odd){margin:-130px 0 0}
.sejarah-ipe .timeline:nth-child(even){margin-bottom:80px}
.sejarah-ipe .timeline:first-child,.sejarah-ipe .timeline:last-child:nth-child(even){margin:0}
.sejarah-ipe .timeline:nth-child(2n) .timeline-content{background:#dcedfb}
@media only screen and (max-width:1200px){.sejarah-ipe .inner-content{width:80%}
.sejarah-ipe .year{font-size:45px;left:10px;transform:translateY(-50%) rotate(-90deg)}
.sejarah-ipe .timeline:nth-child(2n) .year{right:10px}
}
@media only screen and (max-width:990px){.sejarah-ipe .year{font-size:40px;left:0}
.sejarah-ipe .timeline:nth-child(2n) .year{right:0}
}
@media only screen and (max-width:767px){.sejarah-ipe .timeline:before,.sejarah-ipe:before{left:10px;transform:translateX(0)}
.sejarah-ipe .timeline:nth-child(2n):after{border-left:none;border-right:30px solid #518ece;right:auto;left:24px;border-right-color:#dcedfb}
.sejarah-ipe .timeline,.sejarah-ipe .timeline:nth-child(even),.sejarah-ipe .timeline:nth-child(odd){width:100%;float:none;margin:0 0 30px}
.sejarah-ipe .timeline:last-child{margin-bottom:0}
.sejarah-ipe .timeline:nth-child(2n){padding:0 0 0 50px}
.sejarah-ipe .timeline:before,.sejarah-ipe .timeline:nth-child(2n):before{left:-2px}
.sejarah-ipe .inner-content{width:85%}
.sejarah-ipe .timeline:nth-child(2n) .inner-content{float:right;border-radius:0 100px 100px 0;text-align:left}
.sejarah-ipe .timeline:nth-child(2n) .year{right:auto;left:0;color:#518ece}
}
@media only screen and (max-width:479px){.sejarah-ipe .timeline-content{padding:15px}
.sejarah-ipe .inner-content{width:80%}
.sejarah-ipe .year{font-size:30px}
}

/* === End general use === */
/* === Affix Top === */
.affix {
	width: 100%;
	-webkit-animation: fadeInDown 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
	animation: fadeInDown 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
	box-shadow: 0 8px 8px -4px rgb(0 71 128 / 50%);
	padding-top: 0;
	padding-bottom:0;
}
#header{
    box-shadow: 0px 0px 8px 2px #dddddd;
}
.affix .logoalpha {
	background:url(../img/logoicon/logo-sti_ll.png) no-repeat;
	background-size:cover!important;
	margin-top: 0;
    width: 106px;
    height: 30px;
}
.affix-top .nav-link {
	margin-top:45px;
}
/* === End Affix Top === */
/* === Back to Top === */
.backtotop {
	bottom:90px!important;
}
.backtotop {
	position:fixed;
	bottom:13px;
	right:-90px;
	z-index:999;
	-webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
}
.backtotop a {
	background:#f5f5f5;
	padding: 3px 10px;
	width:90px;
	float:left;
	font-weight: 400;
	overflow:hidden!important;
	color:#3a3e4a;
	font-size:13px;
}
.backtotop a:hover {
	text-decoration:none;
	color:#004780;
}
.backtotop p {
	background:rgba(102, 102, 102, 0.15);
	padding: 3px 5px;
	float:left;
	margin:0;
}
.backtotop:hover {
	right:0;
}
.backtotop:hover .bttcaret {
	border-top: 8px solid transparent;
	border-right: 0 dotted;
	border-bottom: 8px solid transparent;
	border-left: 8px solid #004780;
}
.bttcaret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 0 dotted;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #004780;
	border-left: 8px solid transparent;
	-webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
/* === end Back to Top === */

/*   Screen Size  
===================================*/
@media only screen and (min-width:1200px) {
	
}

@media (min-width:992px) {
	.navspacer {
		margin-top:90px;
	}
	.logoalpha {
		width: 184px;
    	height: 52px;
		margin-top:25px;
		margin-bottom:15px;
	}
	.affix .logoalpha {
		margin-top: 10px;
		margin-bottom:5px;
	}
	.affix-top {
		background-color:#ffffff;
		padding-top:0;
		padding-bottom:0;
	}
}
@media (min-width:992px) and (max-width:1199px) {
	
}
@media (max-width:991px) {
}
@media (min-width:768px) and (max-width:991px) {
    #home-slider .slide-text {
        top: 20px;
        width: 60%
    }
	.revslide .carousel-item {
		height: 50vh;
	}
	.socialcontent {
    	height: 597px;
	}
}
@media only screen and (min-width:768px) {
	.firstslide {
		top: 13%;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.sectionalpha {
        padding: 55px 0
    }
	.dropdown:hover .dropdown-menu{
		display: block;
	}
	.minheight-70{
		min-height:70px;	
	}
}
@media only screen and (max-width:767px) {
	.sectionalpha {
        padding: 35px 0
    }
}
@media (min-width:576px) and (max-width:767px) {
	
}
@media only screen and (max-width:575px) {
	.title-indent span {
		font-size: 1.15rem;
	}
}