/* ------------------------------------------------------------------
General Styles
------------------------------------------------------------------- */

html, body {
	height: 100%;
}

body {
	font-family: 'Raleway', sans-serif;
	color:#333;
	font-size:15px;
	line-height:25px;	
}

p {line-height:25px; margin:0; letter-spacing: 1px;}

h1 {font-size:45px; font-weight: 800; padding:0; margin:0; line-height:1.3;}
h2 {font-size:22px; font-weight: 700; padding:0; margin:0; line-height:1.2;}
h3 {font-size:18px; font-weight: 800; padding:0; margin:0; line-height:25px; letter-spacing: 2px; } 
h5 {font-size:13px; color:#999; padding:0; margin:0; line-height:1.4; letter-spacing: 1px;}

.barlow-font {
	font-family: 'Barlow', sans-serif;
}

.white-text {color:#fff;}
.red-text {color:#ff0000;}

.v-pad {padding-top:15px; padding-bottom:15px;}

.btn {
	height:50px;
	line-height: 50px;
	padding:0 30px;
	text-align: center;
	background: #18274c;
	color:#fff;
	box-sizing: border-box;
	border-radius: 5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 16px;
	transition: 0.3s;
	font-weight: 700;
}

.full-btn {width:100%;}

.btn:hover {
	background: #1f3a7c;
}

.red-btn {background: #ff0000; }
.red-btn:hover {background: #770000; color:#fff;}
.darkred-btn {background: #770000;}
.darkred-btn:hover {background: #c90505; color:#fff;}


a:hover {text-decoration:none;}
a:focus {outline: none !important; text-decoration:none;}
a, a:hover {color:inherit;}

section {padding:90px 0;}

img {max-width:100%;}

footer {
	background: #18274c;
	padding:50px 0;
	position: relative;
	z-index: 10;
}

footer a:hover {
	color:#b63d8a;
	transition: 0.3s;
}

ul.footer-social {
	margin:0px; padding:0px;
	float:right;
}

ul.footer-social li {
	display: inline-block;
	margin-left: 20px;
}

ul.footer-social li a {
	display: inline-block;
	text-align: center;
	color:#fff;
	transition: 0.3s;
	font-size: 15px;
}

ul.footer-social li a:hover {
	color:#ff0000;
}

.copyright {
	float: left;
}


/* ------------------------------------------------------------------
Navigation
------------------------------------------------------------------- */

header {
	height:90px;
	z-index:1000;
	position: fixed;
	width: 100%;
	transition:0.8s;
	background: #fff;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

#logo {
	width:160px;
	height: auto;
	float:left;
	transition:0.8s;
	margin-top:18px;
}

ul.contact li a:hover {color:#22a895;}

ul#menu {
	margin:0px; padding:0px;
	box-sizing:border-box;
	letter-spacing:1px;
	text-transform: uppercase;
	float: right;
	font-weight: 700;
	padding-top:32px;
}

ul#menu li {
  display: inline-block;
	margin-left:30px;
}

ul#menu li a {
	color:#054171;
	text-transform: uppercase;
}

ul#menu li a:hover, ul#menu li a.active {
	color:#ff0000;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #fff;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1;
	min-width:230px;
}

.dropdown-content a {
	color:#054171 !important;
padding-top: 0px !important;
}

.dropdown-content a:hover {
color:#ff0000 !important;
}

.dropdown-content p {line-height: 30px;}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown span {cursor:pointer;}

.nav-dropdown {
	display: block;
  padding: 20px 0 20px 33px;
  color: #054171;
	cursor: pointer;
	font-size: 15px;
	text-transform: uppercase;
}

.nav-dropdown:hover {
	transition: all linear 0.15s;
  color: #054171;
}

.toggle,
   [id^=drop] {
    	display: none;
	}

div.drop-content {
	display: none;
	background-color: #054171;
	width: 100%;
	color: #fff;
	padding:5px 0;
}

.drop-content p {line-height: 20px;}

.drop-content>p>a {
	display: block;
	padding: 10px 33px;
}

.drop-content>p>a:focus,
.drop-content>p>a:hover {
	color: #ff0000;
}

nav label {margin-bottom: 0px;}


ul.social {
	margin:0px; padding:0px;
	float:right;
	margin-left: 30px;
	margin-top: 25px;
}

ul.social li {
	display: inline-block;
	margin-left: -5px;
}

ul.social li a {
	display: inline-block;
	width:40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color:#999;
	border:1px solid #999;
	transition: 0.3s;
}

ul.social li a:hover {
	color:#fff;
	background: #999;
}

ul.lang {
	margin:0px; padding:0px;
	float:right;
	margin-top: 25px;
	margin-left: 25px;
}

ul.lang li {
	display: inline-block;
	margin-left: 5px;
}

ul.lang li a {
	display: inline-block;
	width:40px;
	height: 40px;
	color:#999;
	border:1px solid transparent;
	transition: 0.3s;
	padding:5px;
	border-radius: 20px;
}

ul.lang li a:hover, ul.lang li a.active {
	border:1px solid #999;
}

.flag-icon {
	width:100%;
	border-radius: 15px;
	overflow:hidden;
	height:100%;
}

.social-mobile {
	padding:20px 0 20px 38px;
}

.social-mobile ul, .lang-mobile ul {
	margin:0px; padding:0px;
}

.social-mobile ul li {
	display: inline-block;
	transition:0.8s;
	margin-left: -5px;
}

.social-mobile ul li a {
	display: inline-block;
	width:40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color:#999;
	border:1px solid #999;
	transition: 0.3s;
}

.social-mobile ul li a:hover {
	color:#fff;
	background: #999;
}

.lang-mobile {
	padding:20px 0 20px 33px;
	display: none;
}

.lang-mobile li {
	display: inline-block;
}

.lang-mobile li a {
	display: inline-block;
	width:40px;
	height: 40px;
	color:#999;
	border:1px solid transparent;
	transition: 0.3s;
	padding:5px;
	border-radius: 20px;
}

.lang-mobile li a:hover, .lang-mobile li a.active {
	border:1px solid #999;
}

/* ------------------------------------------------------------------
Home & content
------------------------------------------------------------------- */

#home {
	width:100%; 
	height:auto; 
	position:relative;
	padding-top: 90px;
	margin-bottom:-26px;
}

#home .flex-container, #home .flexslider, #home .flexslider > .slides, #home .flexslider > .slides > li, #home .flexslider > .slides > li > div {height:100%;} 

.slide-bg {
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.slide-1 {background-image: url(../img/main-1.jpg);} 
.slide-2 {background-image: url(../img/main-2.jpg);} 
.slide-3 {background-image: url(../img/main-3.jpg);} 

.main-search {
	background: linear-gradient(#ddd, #fff) top no-repeat;
}

.search-col {
	width:33.3%;
	float:left;
	padding:30px;
	padding-top:0px;
	height: 450px;
	position: relative;
	text-align: center;
	box-shadow: 6px 10px 10px -2px rgba(0,0,0,0.2);
}

.search-col img {width:132px;}

.search-l {
	background:url(../img/graphic-track-bottom.png) no-repeat bottom center;
	background-color:#ff0000;
	background-size: contain;
}

.search-c {
	background:#f5f5f5;
	text-align: center;
}	

.search-r {
	background:url(../img/graphic-cabang-bottom.jpg) no-repeat bottom center;
	background-color: #fff;
	background-size: contain;
}

.search-pos {
	position: relative; 
	bottom: 70px;
}

.main-about {
	padding:0px;
	background: url(../img/pattern-repeat-x.png) bottom left repeat-x
}

.service-col {
	width:50%;
	height: 250px;
	float:left;
	position: relative;
	overflow: hidden;
	box-shadow: 6px 10px 10px -2px rgba(0,0,0,0.2);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.service-col p {line-height: 20px;}

/*.service-citycourier {background-image: url(../img/service-citycourier.jpg)}
.service-ptp {background-image: url(../img/service-ptp.jpg)}
.service-dtp {background-image: url(../img/service-dtp.jpg)}
.service-dtd {background-image: url(../img/service-dtd.jpg)}
.service-trucking {background-image: url(../img/service-trucking.jpg)}
.service-packing {background-image: url(../img/service-packing.jpg)}
.service-asuransi {background-image: url(../img/service-asuransipengiriman.jpg)}
*/

.city-courier {background-image: url(https://mexvip.co.id/mexvipsys/upload/product_navigation2/citykurir.jpg)}
.port-to-port-service {background-image: url(https://mexvip.co.id/mexvipsys/upload/product_navigation2/port to port.jpg)}
.door-to-port-service {background-image: url(https://mexvip.co.id/mexvipsys/upload/product_navigation2/door to port.jpg)}
.door-to-door-service {background-image: url(https://mexvip.co.id/mexvipsys/upload/product_navigation2/door.jpg)}
.trucking {background-image: url(https://mexvip.co.id/mexvipsys/upload/product_navigation2/trucking.jpg)}
.packing {background-image: url(https://mexvip.co.id/mexvipsys/upload/product_navigation2/packing-web.jpg)}
.asuransi-pengiriman {background-image: url(https://mexvip.co.id/mexvipsys/upload/product_navigation2/frr.jpg)}


.service-info {
	padding:30px;
	background:#fff;
}

.layanan-kami {
	position: absolute;
	left:0;
	top:0;
	width:40px;
	height:250px;
	background: url(../img/layanan-kami.png) no-repeat;
	background-size: contain;
}

.service-btn {
	float:right;
	position: relative;
	bottom:75px;
	width:150px;
	border-radius: 0px;
	padding:0px;
}

.main-news {
	background: url(../img/bg-blog.jpg) no-repeat center;
	background-size: cover;
}

.news-thumb {
	width: 100%;
	height: 240px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}

.news-title {
	background: #fff;
	padding: 20px;
	overflow: hidden;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
	text-align: left;
}

.news-date {
	height: 65px;
	width: 60px;
	position: absolute;
	left: 0px;
	top: 0px;
	padding: 15px;
	background: #ff0000;
	text-align: center;
}

.read-link {
	text-align:right;
	display: block;
	font-weight: 700;
	color:#ff0000;
	text-transform: uppercase;
}

.news-date h2, .news-date p {line-height: 1; color:#fff;}
.news-date p {font-size: 13px;}

.cta {
	background: #ff0000;
	height: 200px;
	text-align: center;
}

.graphic-cs {
	width:100%;
	height: auto;
	position: relative;
  bottom: 60px;
}

.cta-info {
	padding-top: 40px;
}

.cta-info h2 {color:#ffb9b9;}
.cta-info h1 {color:#fff;}

/* Popup content styles */

.white-popup {
	position: relative;
	background: #96b662;
	width: auto;
	max-width: 750px;
	margin: 25px auto;
	padding: 90px;
	background:url(../img/bg-form.png) center no-repeat;
	background-size:cover;
}

.white-popup h2, .white-popup p {color:#fff;}

.mfp-bg {
	background: #333;
}
.mfp-close-btn-in .mfp-close {
	color: #fff;
}
.mfp-close {
	font-size: 44px;
}


/* ------------------------------------------------------------------
Inner pages
------------------------------------------------------------------- */

.inner-banner {
	height:350px;
	padding-top: 190px;
	transition: 0.8s;
	text-align: center;
	color:#fff;
	background-position: center;
	background-size: cover;
	background-repeat:no-repeat;
}

.inner-banner h1 {color:#fff; text-transform: uppercase;}

.tentangkami-bg {background-image: url(../img/banner-tentangkami.jpg);}
.layanan-bg {background-image: url(../img/banner-layanan.jpg);}
.cabang-bg {background-image: url(../img/banner-cabang.jpg);}
.berita-bg {background-image: url(../img/banner-berita.jpg);}
.beritadetail-bg {background-image: url(../img/banner-beritadetail.jpg); padding-top: 150px;}
.kontak-bg {background-image: url(../img/banner-kontak.jpg);}

.bg-keunggulan{
	background: url(../img/bg-keunggulan.jpg) no-repeat top center;
	background-size: cover;
	margin-top:-155px;
	padding-top:140px;
}

.title-keunggulan {padding-top: 85px;}

.num-keunggulan {
	width:40px;
	height:45px;
	padding-top:12px;
	background: url(../img/bg-number.png) no-repeat bottom;
	background-size: contain;
	text-align: center;
	font-size: 32px;
	font-weight: 300;
	color:#fff;
}

.line-keunggulan {
	width:100%;
	height: 3px;
	background:#ff0000;
	margin-bottom: 20px;
}

.bg-keunggulan p, .bg-keunggulan h2, .bg-keunggulan h3 {color:#fff;}

.info-keunggulan {
	padding-top:70px;
	padding-bottom: 130px;
}

.layanan-info {
	padding:30px;
	height:250px;
	background: #fff;
	border-top: 4px solid #ff0009;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

.layanan-info h2 {margin-bottom: 15px;}

.dtd-col {
	width:50%;
	float:left;
	position: relative;
	z-index: 10;
}

.dtd-feature {
	background: #f5f5f5;
	width:50%;
	float:left;
	margin-top:30px;
	padding:30px;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

.dtd-num {
	width:55px;
	height:55px;
	border-radius:30px;
	color:#fff;
	padding-top:10px;
	display: inline-block;
	background:#ff0000;
	text-align: center;
	font-size:40px;
	font-weight: 300;
}

.layanan-dtd {height:auto;}

.dtd-feature td {padding:10px 0;}

.cabang .dropdown {
	width:195px;
	margin:0 auto;
}

.berita .dropdown {
	width:200px;
	margin:0 auto;
}

.cabang .dropdown a, .berita .dropdown a {
	padding:15px;
	font-size: 16px;
	color:#999;
	letter-spacing: 1px;
	border:1px solid #999;
	border-radius: 5px;
	display: inline-block;
	font-weight: 700;
}

.cabang .dropdown-content, .berita .dropdown-content {
	min-width: auto;
}

.cabang button, .berita button {
	background: none;
	border: none;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	margin: 10px 0;
}

.cabang button:hover, .berita button:hover {
	cursor: pointer;
	color:#ff0000;
}

.cabang button:focus, .berita button:focus {
	outline: none;
}

.cabang-col {
  float: left;
  width: 25%;
  display: none;
  transition:0.3s;
}

.cabang-col i {
	font-size: 12px;
	color:#bbbbbb;
}

.content {
  background-color: #fff;
	padding: 30px;
	margin:15px;
	transition:0.3s;
	border-top:4px solid #ff0000;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

.berita-col {display: none;} 

.show {
  display: block;
}

ul.pagination {
	margin:0; padding:0;
	display: inline-block;
}

ul.pagination li {
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
}

ul.pagination li a {
	display: inline-block;
	text-align: center;
	transition: 0.3s;
	font-size: 15px;
	width:30px;
	height: 30px;
	line-height: 30px;
	border-radius: 5px;
	transition: 0.3s;
}

ul.pagination li a:hover, ul.pagination li a.active  {
	color:#fff;
	background:#ff0000;
	transition: 0.3s;
}

.page-arrows {opacity:0.4;}
.page-arrows:hover {opacity:1; background: transparent !important;}

.beritadetail-bg h2 {font-weight: 300;}

.centered-content {
	width:780px;
	margin:0 auto;
	padding-left:15px; 
	padding-right: 15px;
}

.berita-divider {
	width:100%;
	height:1px;
	background: #dddddd;
	margin-top:60px;
	margin-bottom: 30px;
}


/* ------------------------------------------------------------------

------------------------------------------------------------------- */

input { 
	background: #fff;
	border:none;
	height:50px;	
	line-height: 50px;
	width:100%;
	padding:0 20px;
	color:#333;
	margin:10px 0;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

button {width:100%; margin:10px 0;}

textarea {
	background: #fff;
	border:none;
	resize: none;
	height: 200px;
	color:#333;
	padding:20px;
	width:100%;
	margin:10px 0;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

input:focus,textarea:focus {
	outline: none !important;
	opacity: 1 !important;
	color:#333 !important;
}

input::-webkit-input-placeholder, input::-moz-placeholder, input::-ms-input-placeholder {
  color:#999;
}