/*
Theme Name: Nusa-Link
Theme URI: http://www.nusa-link.com
Description: Nusa Link Shipping & Logistic made by Vinnity Network
Author: Vinnity Network
Author URI: http://vinnity.com.my
Version: 1.0
License: GPL
License URI: http://www.gnu.org/copyleft/gpl.html
*/

/* ================================================== 
BASIC STYLES
================================================== */
html,body {border: 0; margin: 0; padding: 0; width: 100%; height: 100%} a img {border: 0}
*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {background: #fff; padding: 0; margin: 0; font-family: "helvetica neue", helvetica, sans-serif; font-size: 14px; color: #000;}
img, object, embed {max-width: 100%; height: auto;} input:focus {outline: none;} *:focus {outline: none;} 
/* ================================================== 
LINK
================================================== */
a {color: #000; text-decoration: none; line-height: inherit; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
a:hover {color: #000;}
/* ================================================== 
TYPOGRAPHY
================================================== */
h1, h2, h3, h4, h5, h6 {color: #000; margin: 0; padding: 0; font-weight: normal; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;
text-rendering: optimizeLegibility;}
ul, li, ol {list-style: none; margin: 0; padding: 0;}
p, li {line-height: 18px; padding: 0; margin: 0;}
/* ================================================== 
LAYOUT
================================================== */
.layout-control {max-width: 1000px; margin: 0 auto; padding: 0 10px; position: relative;}
.mid-layout {max-width: 1000px; margin: 0 auto; padding: 0 5px;}
.wrapper {margin-top: 15px;}
/* ================================================== 
HEADER
================================================== */
.logo {background: url('images/logo.jpg') no-repeat; width: 196px; height: 50px; display: block; text-indent: -9999px; background-size: contain; float: left; margin-top: 14px;}
.search {float: right; padding-top: 22px; position: relative;}
.search input {width: 300px; padding: 8px 10px; border: 1px solid #ddd; background: #fff;}
.search input#searchSubmit {cursor: pointer; position: absolute; background: url('images/search-button.jpg') no-repeat; top: 23px; right: 1px; border: none; width: 32px; height: 31px; text-indent: -9999px;}
.search input:focus {border: 1px solid #09F;}
/** menu **/
.menuTop {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; width: 100%; position: relative; float: left; margin-top: 15px;}
/** navigation **/
#cssmenu {display: block; padding: 0; margin: 0;}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover {}
#cssmenu > ul {padding: 0; margin: 0;}
#cssmenu > ul > li {padding: 0; margin: 0; float: left; display: block; position: relative;}
#cssmenu > ul > li > a {display: block; position: relative; padding: 16px 8px 15px; font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;font-size: 14px; text-transform: uppercase; color: #000; font-weight: 600; border-left: 1px solid #fff; border-right: 1px solid #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;}
#cssmenu > ul > li > a:hover {color: #7796bb;}
#cssmenu .services {width: 99px;}
#cssmenu .home a {padding-left: 0!important;}
/** depth **/
#cssmenu ul li.has-sub:hover > a:after {top: 0; bottom: 0; background: #000}
#cssmenu > ul > li.has-sub > a:before {content: ''; position: absolute; top: 22px; left: 79px; border: 5px solid transparent; border-top: 5px solid #000;}
#cssmenu > ul > li.has-sub:hover > a:before {color: #000; border-top: 5px solid #000;}
#cssmenu ul li.has-sub:hover > a {z-index: 999; border-left: 1px solid #ddd; border-right: 1px solid #ddd; width: auto; color: #000; background: #fff;}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {display: block;}
#cssmenu ul li > ul,
#cssmenu ul li > div {display: none; width: auto; position: absolute; top: 49px; z-index: 99; margin-top: -1px; background: #fff; border: 1px solid #ddd; -webkit-box-shadow: 0 3px 5px -3px #c8c8c8; -moz-box-shadow: 0 3px 5px -3px #c8c8c8; box-shadow: 0 3px 5px -3px #c8c8c8;}
#cssmenu ul li > ul {width: 200px;}
#cssmenu ul li > ul li {display: block; padding: 0; margin: 0; position: relative;}
#cssmenu ul li > ul li a {display: block; position: relative; margin: 0; color: #434040; font-weight: bold; padding: 10px; text-decoration: none;}
#cssmenu ul li > ul li a:hover {background: #f4f4f4; color: #000;}
/* ================================================== 
INDEX
================================================== */
.slider-home {margin-bottom: 25px;}
.flex-control-nav {bottom: 15px!important;}
/** home mid **/
.home-mid .row-one {float: left; width: 25%; position: relative; padding: 0 5px;}
.home-mid .row-one h2 {font-weight: bold; font-size: 16px;}
.home-mid .row-one h2 i {margin-right: 5px; vertical-align: -15px;}
.home-mid .row-one p {height: 80px; font-size: 13px; margin: 15px 0; color: #3e3e3e;}
.home-mid .row-one h3 {padding: 10px; border: 1px solid #ddd; font-size: 12px;}
/** who home **/
.who-home {margin-top: 40px;}
.who-home p {margin-bottom: 15px;}
.who-home .row-one, .who-home .row-two, .who-home .row-three, .who-home .row-four {float: left; position: relative;}
.who-home .row-one {width: 60%; border-right: 1px dashed #ddd; padding: 20px 40px 20px 0;} 
.who-home .row-two {width: 15%;} 
.who-home .row-two img {border-radius: 50%;}
.who-home .row-three {width: 85%; padding-left: 20px;} 
.who-home .row-four {width: 40%; padding: 20px 0 20px 40px;}
.who-home .row-four i {color: #000; font-size: 24px; margin-right: 10px; vertical-align: -3px; width: 24px;}
.who-home .row-four .fa-phone {padding-left: 1px;}
.who-home .row-four .fa-facebook-official {padding-left: 2px;}
.who-home .row-four li {margin-bottom: 14px; font-size: 16px;}
.who-home .row-four li a {font-weight: bold;}
.who-home .row-four li a:hover {color: #06F;}
/** title **/
.title h2 {font-size: 30px; line-height: 32px; font-weight: bold; text-transform: uppercase;}
.title .title-sep {background: #e30e40; height: 2px; width: 80px; margin: 10px 0 30px;} 
.page-layout {margin-top: 25px;}
.page-title h1 {text-transform: uppercase; font-size: 30px; line-height: 34px; font-weight: bold;}
.page-title-sep {height: 2px; width: 100px; background: #ddd; margin: 10px 0 30px;} 
/* ================================================== 
PAGES
================================================== */
.page-layout .entry-content h2 {font-size: 22px; line-height: 24px; margin: 25px 0 25px; text-transform: uppercase; color: #000; font-weight: bold; text-decoration: underline;}
.page-layout .entry-content h3,
.page-layout .entry-content h4 {font-size: 18px; line-height: 24px; margin: 25px 0 25px; text-transform: uppercase; color: #000; font-weight: bold;} 
.page-layout .entry-content p {margin-bottom: 15px; font-size: 14px; line-height: 20px;}
.entry-content ul, .entry-content ol {margin-bottom: 20px; margin-left: 40px;}
.entry-content ul li {list-style: disc;}
.entry-content ol li {list-style: decimal;}
.entry-content ul li, .entry-content ol li {padding: 5px 0;}
.entry-content a {color: #06F;}
.entry-content a:hover {text-decoration: underline;}
/** price sea freight **/
.sea-price {margin-bottom: 15px; overflow: auto;}
.sea-price table {border: 1px solid #ddd; border-left: none; border-bottom: none;}
.sea-price table th, .sea-price table td {border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; padding: 14px 8px; line-height: 18px; font-size: 12px;}
.sea-price table td {line-height: 26px;}
.sea-price table .title-box {background: #06F; color: #fff; font-size: 12px;}
.sea-price table span {color: #F00;}
/** price sea freight 2 **/
/* ================================================== 
PAGES BOOK ONLINE
================================================== */
.page-layout .row-one, .page-layout .row-two {float: left; position: relative;}
.page-layout .row-one {width: 70%; padding-right: 40px; border-right: 1px solid #ddd;}
.page-layout .row-two {width: 30%; padding-left: 40px;}
/** book online form **/
.page-layout .row-one form {border-top: 1px dashed #ddd; padding-top: 25px; margin-top: 25px;}
.page-layout .row-one fieldset {padding: 0; border: none; margin: 0!important;}
.page-layout .row-one .vfb-legend {display: none;}
.page-layout .row-one h4 {font-size: 16px; border-bottom: 1px solid #ddd; padding-top: 15px; margin: 5px 0 15px;}
.page-layout .row-one ul {margin-left: 0!important;}
.page-layout .row-one .vfb-item-checkbox {margin-bottom: 10px;}
.page-layout .row-one .vfb-item-checkbox span {display: inline-block; margin-right: 15px;}
.page-layout .row-one input.vfb-checkbox {vertical-align: -2px; margin-right: 5px; cursor: pointer; margin-left: 0;}
.page-layout .row-one label.vfb-desc {width: 100%; display: block; margin-bottom: 5px; font-weight: bold; font-size: 12px;}
.page-layout .row-one input.vfb-text {width: 50%; padding: 6px 10px; border: 1px solid #ddd; display: block;}
.page-layout .row-one textarea {width: 100%; display: block; padding: 6px 10px; border: 1px solid #ddd; height: 80px; font-family: "helvetica neue", helvetica, sans-serif;}
.page-layout .row-one #item-vfb-25 span label {display: block; margin-bottom: 5px;}
.page-layout .row-one span label {font-size: 12px; display: inline-block; margin-top: 5px;}
.page-layout .row-one .vfb-required-asterisk, .page-layout .row-one .text-required {color: #F00; font-weight: bold;}
.page-layout .row-one .vfb-error {margin-top: 5px; color: #F00; font-size: 12px; display: block;}
.page-layout .row-one input[type="submit"].vfb-submit {border-radius: 2px!important; border: 1px solid #bdbdbd!important; border-bottom: 1px solid #828282!important; background: #efefef!important; background: linear-gradient(top, #fdfdfd, #efefef)!important; background: -ms-linear-gradient(top, #fdfdfd, #efefef!important); background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#efefef))!important; background: -moz-linear-gradient(top, #fdfdfd, #efefef)!important; font: 12px Arial, Helvetica, sans-serif; font-weight: bold; padding: 15px!important; width: 200px; text-align: center; display: block; cursor: pointer; text-transform: uppercase;}
/** Contact Us**/
.contact-bottom {margin-top: 25px; padding-top: 25px; border-top: 1px dashed #ddd;}
.contact-bottom {width: 100%; float: left; position: relative;}
.contact-bottom .contact-form, .contact-bottom .map {float: left; position: relative;}
.contact-bottom .contact-form {width: 40%; padding-right: 20px;} 
.contact-bottom .map {width: 60%;}
.contact-bottom .map .responsive {overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; margin-bottom: 15px;}
.contact-bottom .map .responsive iframe {left: 0; top: 0; height: 100%; width: 100%; position: absolute;}
/** contact form **/
.contact-form ul {margin-left: 0;}
.contact-form fieldset {padding: 0; border: none; margin: 0!important;}
.contact-form .vfb-legend {display: none;}
.contact-form label.vfb-desc {width: 100%; display: block; margin-bottom: 5px; font-weight: bold; font-size: 12px;}
.contact-form input.vfb-text {width: 50%; padding: 6px 10px; border: 1px solid #ddd; display: block;}
.contact-form textarea {width: 100%; display: block; padding: 6px 10px; border: 1px solid #ddd; height: 120px; font-family: "helvetica neue", helvetica, sans-serif;}
.contact-form span label {font-size: 12px; display: inline-block; margin-top: 5px;}
.contact-form .vfb-required-asterisk {color: #F00; font-weight: bold;}
.contact-form .vfb-error {margin-top: 5px; color: #F00; font-size: 12px; display: block;}
.contact-form input[type="submit"].vfb-submit {border-radius: 2px!important; border: 1px solid #bdbdbd!important; border-bottom: 1px solid #828282!important; background: #efefef!important; background: linear-gradient(top, #fdfdfd, #efefef)!important; background: -ms-linear-gradient(top, #fdfdfd, #efefef!important); background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#efefef))!important; background: -moz-linear-gradient(top, #fdfdfd, #efefef)!important; font: 12px Arial, Helvetica, sans-serif; font-weight: bold; padding: 15px!important; width: 200px; text-align: center; display: block; cursor: pointer; text-transform: uppercase;}
#form_success {margin-top: 15px; color: #679c00;}
/** Search **/
.search-page p {max-width: 600px; text-align: center; margin: 20px 0 35px; font-size: 16px; line-height: 22px;}
.search-page li {margin: 25px 0;}
.search-page li a {color: #03F;}
.search-page li a:hover {text-decoration: underline;}
/* ================================================== 
PAGES FAQ
================================================== */
#tabs {position: relative;}
#tabs ul {float: left; width: 100%; margin-bottom: 20px;}
#tabs li {list-style: none; margin-right: 10px;}
* html #tabs li {display: inline;}
#tabs li, #tabs li a {float: left;}
#tabs ul li.active a {color: #06F;}
#tabs div {clear: both;}
#tabs ul li a {text-decoration: none; color: #000; font-size: 12px; padding-right: 10px; font-weight: bold;}
#tabs ul li:first-child a {padding-left: 0;}
/* ================================================== 
FAQ
================================================== */
.faq a {color: #F00; font-weight: bold;}
.faq a:hover {text-decoration: underline;}
.faq h3 {padding-left: 26px; padding-bottom: 0; border-bottom: 0; margin-bottom: 0; margin-top: 0; font-size: 12px!important;}
.smk_accordion {position: relative; margin: 0; padding: 0; list-style: none; margin-bottom: 20px; border-top: 1px solid #ddd;}
.smk_accordion .accordion_in {position: relative; z-index: 10; overflow: hidden;}
.smk_accordion .accordion_in .acc_head {position: relative; font-size: 14px; padding: 14px; display: block; cursor: pointer; border: 1px solid #ddd; border-top: none; background: #fff;}
.smk_accordion .accordion_in .acc_head:hover {background: #fbfbfb;}
.smk_accordion .accordion_in .acc_head h3 {font-weight: bold;}
.smk_accordion .accordion_in .acc_head p {display: none;}
.smk_accordion .accordion_in .acc_head .acc_icon_expand {display: block; width: 18px; height: 18px; position: absolute; top: 50%; margin-top: -10px; background: url('images/plusminus.png') center 1px;}
/** Content **/
.smk_accordion .accordion_in .acc_content {background: #fbfbfb; color: #000; padding: 10px; font-size: 12px; line-height: 18px; border: 1px solid #ddd;}
.smk_accordion .accordion_in .acc_content p {margin-bottom: 15px;}
.smk_accordion .accordion_in .acc_content ul {padding-left: 20px!important; margin-bottom: 10px!important; float: none!important;}
.smk_accordion .accordion_in .acc_content li {margin-bottom: 6px!important; list-style: outside disc!important; float: none!important;}
.smk_accordion .accordion_in.acc_active > .acc_content {display: block;}
.smk_accordion .accordion_in.acc_active > .acc_head .acc_icon_expand {background: url('images/plusminus.png') center -18px;}
.smk_accordion .accordion_in.acc_active > .acc_head {background: #696969;}
.smk_accordion .accordion_in.acc_active > .acc_head h3 {color: #fff;}
.more-faq p {line-height: 26px;}
/* ================================================== 
SIDEBAR
================================================== */
.sidebar h3 {font-size: 14px; font-weight: bold; margin-bottom: 15px; text-transform: uppercase;}
.sidebar li {margin: 15px 0;}
.sidebar li a {font-weight: bold;}
.sidebar i {margin-right: 10px; vertical-align: -32px;}
/** sidebar faq **/
/* ================================================== 
FOOTER
================================================== */
.sponsor {margin-top: 40px;}
.sponsor li {display: inline-block; margin: 0 15px;}
/** footer **/
.footer {background: #222325; width: 100%; float: left; position: relative; padding: 20px 0; margin-top: 40px;}
.footer-left {float: left;}
.footer-right {float: right;}
.footer-right li {display: inline-block; color: #6b6b6b;}
.footer-right li a, .footer-left p {color: #fff; font-size: 12px;}
.footer-right li a {margin: 0 10px;}
.footer-right li a:hover {text-decoration: underline;}
.footer-right li:last-child a {margin-right: 0;}
/* ================================================== 
ADD ON
================================================== */
.clearfix {clear: both;}
.edit {margin-top: 30px;}
.edit a {border-radius: 2px!important; border: 1px solid #bdbdbd!important; border-bottom: 1px solid #828282!important; background: #efefef!important; background: linear-gradient(top, #fdfdfd, #efefef)!important; background: -ms-linear-gradient(top, #fdfdfd, #efefef!important); background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#efefef))!important; background: -moz-linear-gradient(top, #fdfdfd, #efefef)!important; font: 12px Arial, Helvetica, sans-serif; font-weight: bold; padding: 6px 10px!important; width: 80px; text-align: center; display:block;}
/* ================================================== 
ICON PACK
================================================== */
.icon-pack, .icon-collect, .icon-store, .icon-deliver {width: 45px; height: 41px; display: inline-block;}
.icon-pack {background: url('images/icon-home.png') no-repeat 0 0;} 
.icon-collect {background: url('images/icon-home.png') no-repeat 0 -44px;} 
.icon-store {background: url('images/icon-home.png') no-repeat 0 -88px;} 
.icon-deliver {background: url('images/icon-home.png') no-repeat 0 -131px;} 
.icon-sea, .icon-air, .icon-storage, .icon-how-works, .icon-how-pack, .icon-phitem, .icon-check, .icon-doc {width: 80px; height: 73px; display: inline-block;}
.icon-sea {background: url('images/icon-sidebar.png') no-repeat 0 0;}
.icon-air {background: url('images/icon-sidebar.png') no-repeat 0 -80px;}
.icon-storage {background: url('images/icon-sidebar.png') no-repeat 0 -160px;}
.icon-how-works {background: url('images/icon-sidebar.png') no-repeat 0 -240px;}
.icon-how-pack {background: url('images/icon-sidebar.png') no-repeat 0 -320px;}
.icon-phitem {background: url('images/icon-sidebar.png') no-repeat 0 -400px;}
.icon-check {background: url('images/icon-sidebar.png') no-repeat 0 -480px;}
.icon-doc {background: url('images/icon-sidebar.png') no-repeat 0 -560px;}
/* ================================================== 
RESPONSIVE
================================================== */
@media screen and (max-width: 687px) {
.home-mid .row-one {width: 50%;}
.home-mid .row-one p {height: 40px;}
.home-mid .row-one h3 {margin-bottom: 25px;}
}

@media screen and (max-width: 617px) {
.page-layout .row-one, .page-layout .row-two, .contact-bottom .contact-form, .contact-bottom .map {float: none; width: 100%;}
.who-home .row-one {padding-right: 0; width: 100%; border-right: none;} 
.who-home .row-four {padding-left: 0; width: 100%;}
.sponsor {padding-top: 40px; border-top: 1px solid #ddd;}
.menuTop select {margin: 10px 0; padding: 8px 10px; background: #fff; border: 1px solid #ddd; cursor: pointer;}
.page-layout .row-one {padding-right: 0; border-right: 0;} 
.page-layout .row-two {padding-left: 0; margin-top: 30px;}
.sidebar li {width: 33.33%; float: left;}
.sidebar i {display: block;}
.contact-bottom .contact-form {padding-right: 0;}
.contact-bottom .map {margin-top: 15px;}
}

@media screen and (max-width: 497px) {
.search input {width: 180px;}
.footer-left {float: none;}
.footer-right {float: none; margin-top: 15px;}
.footer-right li:first-child a {margin-left: 0;}
}

@media screen and (max-width: 417px) {
.home-mid .row-one p {height: 75px;} 
}

@media screen and (max-width: 407px) {
.search, .logo {float: none;}
.search {margin-top: 10px; padding-top: 0;}
.search input {width: 100%;}
.search input#searchSubmit {top: 1px;}
}

@media screen and (max-width: 337px) {
.home-mid .row-one {width: 100%;}
.home-mid .row-one p {height: inherit;} 
}