@charset "UTF-8";



html {font-size: 100%;}
body {font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 10px; background: #fff;
    width: 100vw; overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -moz-font-feature-settings: "liga" on; font-feature-settings: "liga";
}
.ccm-page {font-size: 1.35rem;}
h1, h2, h3, h4, h5, .header-4, .header-3 {font-family: "Muli", "Open Sans", sans-serif; font-weight: 700; color: #222;}
h1 {font-size: 2.5rem;}
h2 {font-size: 2.25rem; position: relative;}
h3, .header-3 {font-size: 1.75rem;}
h4, .header-4 {font-size: 1.5rem; color: #ec7a14; text-transform: uppercase;}
h5 {font-size: 1.35rem;}


p, ul {margin-bottom: 1em; font-size: 1.15rem;}
img {max-width: 100%; height: auto;}
hr {border-color: #ccc; margin: 30px 0;}
h3+h4 {margin: -5px 0 15px 0; font-size: 16px;}
.header-4 {margin-top: 10px; margin-bottom: 10px; line-height: 1.1;}

h2 {margin: 0 0 30px 0; padding: 0 0 30px 0; position: relative;}
h2:after {width: 100px; height: 5px; background: #ec7a14; content: ""; position: absolute; bottom: 0; left: 0;}
.text-center h2:after {left: 50%; margin-left: -50px;}

.img-left {margin: 0 0 2em 0;}


a {color: #04549c; text-decoration: underline;}
a.btn-theme, .btn-theme a {display: inline-block; padding: 10px 15px; background: #ec7a14; border: 2px solid #ec7a14; color: #fff; border-radius: 25px; text-decoration: none; font-weight: 700;}
a.btn-theme:hover, .btn-theme a:hover {background: #fff; border-color: #ec7a14; color: #ec7a14; box-shadow: 3px 3px 8px rgba(0,0,0,.1);}
.container {position: relative;}


.ccm-page a, #nav-main a:after, figure:after, #ftr-search * {
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
}


#header {border: 0; margin: 0; position: relative; border-radius: 0; border-top: 5px solid #04549c;}
#logo {display: block; padding: 15px 0; text-align: center;}
#toggle {background: #04549c; margin: 0; border-radius: 0; width: 100%; padding: 13px; display: flex; justify-content: center;}
#toggle .icon-bar {background: #fff; height: 3px;}
#toggle p {color: #fff; margin: 0 0 0 1rem; font-size: 14px; text-transform: uppercase; font-weight: 700; text-align: center;}

#header .navbar-header {margin: 0;}
#navbar {max-height: none; padding: 15px; margin: 0;}
#nav-main {margin: 10px 0 0 0; text-align: left;}
#nav-main ul ul {display: none;}
#nav-mini {margin: 0;}
#nav-main a, #nav-mini a {display: block; text-decoration: none; border-bottom: 1px dotted #ccc; color: #222; font-family: "Muli"; font-weight: 600; letter-spacing: -.35px; padding: 15px; font-size: 1.4em;}
#nav-mini .fa {color: #ec7a14; width: 12px; text-align: left;}
#nav-mini a.btn-theme {background: none; border: 0; font-size: 15px;}
#nav-mini .font-sizer {display: none;}

#nav-main > li > a {font-weight: 700;}
#nav-main ul {list-style: disc; padding: 0 0 0 35px; margin: 1rem 0;}
#nav-main ul a {padding: 5px 5px 5px 0; border: none; font-size: 1rem;}
#nav-main ul li::marker {color: #ec7a14;}

#hdr-search {position: relative; margin: 0 -15px; padding: 15px;}
#hdr-search form {width: 100%; position: relative;}
#hdr-search input {width: 100%; border: 1px solid #ccc; font-size: 16px; background: #f4f4f4; padding: 10px; border-radius: 25px;}
#hdr-search input:focus {border-color: #f58233; background: rgba(0,0,0,.1);}
#hdr-search button {border: none; background: none; position: absolute; right: 25px; top: 20px; font-size: 25px; z-index: 50;}
#hdr-search button i {color: #f58233;}
#hdr-search input::-webkit-input-placeholder {color: rgba(0,0,0,.4); opacity: 1;}
#hdr-search input::-moz-placeholder {color: rgba(0,0,0,.4); opacity: 1;}
#hdr-search input:-ms-input-placeholder {color: rgba(0,0,0,.4); opacity: 1;}
#hdr-search input:-moz-placeholder {color: rgba(0,0,0,.4); opacity: 1;}

#hdr-tools .btn-theme {display: block; margin: 0 0 15px 0;}

#hero {background: url(../img/hero-bkg5.jpg) center center no-repeat; background-size: cover; padding: 25px 0 0 0;}
#hero hgroup {padding: 0 15px;}
#hero hgroup h1 {color: #fff; position: relative; padding: 0 0 20px; margin: 0 0 20px 0; text-shadow: 3px 3px 3px rgba(0,0,0,.2);}
#hero hgroup h1:after {width: 100px; height: 5px; background: #ec7a14; content: ""; position: absolute; bottom: 0; left: 0;}
#hero hgroup p {color: #fff; font-size: 18px;}
#hero .video-block p {color: #fff;}
.video-block {padding: 0 15px; max-width: 450px; margin: 0 auto;}
.video-block figure {position: relative; border: 5px solid #fff;-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.video-block figure {position: relative; box-shadow: 5px 5px 15px rgba(0,0,0,.15);}
.video-block figure:after {position: absolute; left: 0; top: 0; width: 100%; bottom: 0; content: "\f01d"; font-family: FontAwesome; z-index: 5; text-align: center; font-size: 75px; color: #fff; display: flex; flex-direction: column; justify-content: center;}
.video-block p {text-align: center; font-size: 14px; margin: 0; padding: 15px 0;}
.video-block:hover figure {border-color:#f58233; box-shadow: 10px 10px 15px rgba(0,0,0,.2); transform: scale(1.1,1.1);}
.video-block:hover figure:after {color: #ec7a14;}

#hpg-find {background: rgba(0,0,0,.5); text-align: center; padding: 20px; width: 100%;}
#hpg-find h2 {color: #fff; display: inline-block; margin: 0 0 15px 0; font-size: 21px; padding: 0;}
#hpg-find h2:after {display: none;}
#hpg-find a {display: inline-block;}

#hpg-cols {padding: 25px 0; text-align: center;}
.feature {text-align: center; margin-bottom: 25px;}

.footer {background: url(../img/hero-bkg3.jpg) center center #003953; background-size: cover; color: #fff; padding: 50px 0 0 0; font-size: 16px; border-top: 10px solid #ec7a14; font-size: .9em;}
.footer h3 {color: #fff;}
.footer p i, .footer p span{color: #ec7a14; font-size: 22px; padding: 5px; width: 35px; text-align: center; display: inline-block;}
.footer p a {color: #fff;}
.footer p a:hover {opacity: 1; text-decoration: none;}
.footer .nav {padding: 0;}
.footer .nav a {color: #fff; padding: 5px 0; font-size: 1.25em;}
.footer .nav a:hover {opacity: 1; background: none;}
.footer #ftr-search {position: relative; width: 100%;}
.footer #ftr-search input {width: 100%; background: #fff; border: 1px solid rgba(0,0,0,.5); border-radius: 25px; padding: 10px; color: #444;}
.footer #ftr-search input:focus {border-color: #ec7a14;}
.footer #ftr-search button {background: none; padding: 6px 12px; border: 0; color: orange; position: absolute; right: 0; top: 0; font-size: 20px;}
.footer #ftr-search button:hover {color: #fff;}
.footer .copy {margin: 50px 0 0 0; text-align: center; background: rgba(0,0,0,.5); padding: 10px 0;}
.footer .copy p {margin: 0; padding: 0; font-size: 12px;}
.footer .copy p a {color: #fff; text-decoration: none;}
.footer .copy p a:hover {text-decoration: underline;}
.footer ul {font-size: 1rem;}

#ship-list .modal-dialog {max-width: 900px; margin: 25px auto; width: auto; text-align: center;border-top: 5px solid #ec7a14;}
#ship-list .modal-header {border: 0;}
#ship-list .modal-content h2 {padding: 0; margin-top: 30px;}
#ship-list .modal-content h2:after {display: none;}
#ship-list .modal-content p {border-bottom: 1px solid #ccc; padding: 0 0 25px 0;}
#ship-list .modal-content {border-radius: 0; padding: 25px;}
#ship-list .modal-content ul {columns: 2; list-style: none; padding: 0; text-align: left; column-gap: 2px;}

#ship-list .modal-content ul > * {
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}
#ship-list .modal-content ul a {padding: 8px; border-bottom: 1px dotted #ccc; display: block; text-decoration: none; color: #333; position: relative; z-index: 5; overflow: hidden; font-weight: 600;}
#ship-list .modal-content ul a:hover {color: #fff; background: #ec7a14;}
#ship-list .modal-content .close {font-size: 45px; margin-top: -10px; position:relative; z-index: 50;}
#ship-list .modal-content ul li:nth-of-type(odd) {background: #f4f4f4;}

#hpg-content-1 {background: url(../img/hero-bkg3.jpg) center center; background-size: cover; background-attachment: fixed;}
#hpg-content-1 {text-align: center; padding: 50px 0;}
#hpg-content-1 h2, #hpg-content-1 p {color: #fff;}
hgroup p {font-size: 19px; font-weight: 300;}

#hpg-content-2 {text-align: center; padding: 50px 0;}
#hpg-content-2 hgroup {padding: 50px 10% 0 10%;}
h3+.video-block {margin-top: 20px;}

#sec-hdr {background: url(../img/hero-bkg5.jpg) center center no-repeat; background-size: cover; padding: 75px 0; text-align: center; position: relative; z-index: 5;}
#sec-hdr h1 {color: #fff; margin: 0; text-shadow: 3px 3px 6px rgba(0,0,0,.2);}
#sec-hdr .breadcrumb {background: None; margin: 0; padding: 5px 0 0 0;}
#sec-hdr .breadcrumb a, #sec-hdr .breadcrumb li {color: #fff;}
#sec-hdr .breadcrumb a:hover {opacity: 1; text-decoration: none;}

#sec-hdr figure {position: absolute; inset: 0; z-index: -1; background: #053e71;}
#sec-hdr figure img {width: 100%; height: 100%; object-fit: cover; opacity: .15;}
#sec-hdr .header-text {position: relative; z-index: 5;}

#sec-content {padding: 50px 0;}
#sec-content .table {background: #f9f9f9;}
#sec-content .table td {padding: 12px;}
#sec-content .table tr td:first-of-type {font-weight: bold;}

.sidebar-locator {padding: 35px; margin: 25px 0; border-top: 1px solid #ccc; text-align: center;}
.sidebar-locator .btn-theme {display: block; text-align: center;}

#ship-detail-success {background: #eee; padding: 50px 0; text-align: center;}
#ship-detail-success hgroup {padding: 25px 10% 0 10%;}
#sec-content table {font-size: 1.2em; width: 100% !important; background: #f8f8f8;}
#sec-content table td {padding: 10px; border: 1px solid #ccc;}



#sec {border-top: 1px solid #ccc;}
#sec ul a {display: block; text-decoration: none; border-bottom: 1px solid #ccc; padding: 15px; color: #222; font-weight: 400;}
#sec .nav-path-selected > a {background: #f4f4f4; color: #f58233; font-weight: 700;}
#sec ul ul {padding: 0 0 0 35px; list-style: disc;}
#sec ul ul a {border: none; font-size: 1rem; font-weight: 400; padding: 15px 5px;}
#sec ul ul a:hover {padding: 15px 0 15px 10px;}

.success-stories {text-align: center;}
.success-stories hgroup {padding: 10px 10% 0 10%;}

.ccm-search-block-form input {width: 75%; float: left; height: 50px; background: #f4f4f4; border: 1px solid #ccc; padding: 10px;}
.ccm-search-block-form .btn {width: 23%; float: right; height: 50px; background: #04549c; color: #fff; font-weight: bold; border: 0;}
.ccm-search-block-form #searchResults {display: block; padding: 15px 0; width: 100%; overflow: hidden;}

.ccm-block-page-title-byline {text-align: center; border-bottom: 1px dotted #ccc; padding: 0 0 25px 0; margin: 0 0 25px 0;}
.clean-list-item {display: block; padding: 25px 0; border-bottom: 1px dotted #ccc;}
.clean-list-item h2 {padding: 0; margin: 0 0 15px 0;}
.clean-list-item h2:after {display: none;}
.clean-list-item h4 {color: #888; margin: 0 0 20px 0; font-size: 16px;}
.ccm-block-topic-list-list, .ccm-block-date-navigation-dates {list-style: none; margin: 15px 0; padding: 0;}
.ccm-block-topic-list-list a, .ccm-block-date-navigation-dates a {border-top: 1px dotted #ccc; display: block; padding: 10px;}

form.hstack {display: flex; gap: 15px;}
form.hstack input {padding: 15px; min-height: none; max-height: none; height: auto; font-size: 1.25rem; background: #f4f4f4;}
form.hstack .btn {background: #04549c; color: #fff; border: none; font-weight: 700; text-transform: uppercase;}
.searchResult {border-top: 1px dotted #ccc; padding: .5rem 0; margin: .5rem 0;}

.box {padding: 15px; background: #f4f4f4; border-radius: 5px; margin: 0 0 2rem 0;}
.box-formidable {padding: 25px; background: #f4f4f4; border-radius: 5px; margin: 0 0 2rem 0;}
.formidable button {margin-left:15px}
.formidable .captcha {margin:5px 0 5px 0}

#blog-related > * {padding: 10px 25px; background: #f4f4f4; margin: 0; display: block;}
#blog-related h4 {font-size: 1rem;}
#blog-related a {font-size: 2rem; font-weight: 700; padding: 0 25px;}
#blog-related h4:first-of-type {padding-top: 25px;}
#blog-related h4:last-of-type {padding-top: 25px; margin-top: 2rem;}
#blog-related p {padding-bottom: 2rem; font-style: italic;}

#blog-share {text-align: center}
#blog-share a {font-size: 2rem;}


@media (min-width: 768px) {
    .ccm-page {font-size: 1.5em;}
    .img-left {margin: 0 0 2em 20px; float: right; max-width: 50%;}
    .text-center {padding: 15px 15%;}  

    #hero {padding: 50px 0 125px 0; position: relative;}
    #hero hgroup {padding: 0;}
    #hero hgroup p {font-size: 21px;}

    .video-block {padding: 0;}

    #hpg-find {position: absolute; bottom: 0;}
    #hpg-find h2 {margin: 0 10px 0 0;}

    #ship-list .modal-content p {padding: 0 15% 25px 15%;}
    #ship-list .modal-content ul {columns: 4;}
    #ship-list .modal-content ul li:nth-of-type(odd) {background: #f4f4f4;}
 
}
@media (max-width: 991px) {
    #header .container {width: 100%; padding: 0; text-align: center; margin: 0; }
    
}


@media (min-width: 992px) {
    h1 {font-size: 3em; letter-spacing: -1px;}
    #toggle {display: none;}
    #logo {padding: 10px 0; margin: 0 auto; text-align: center; display: block;}
    #header {box-shadow: 0 5px 5px rgba(0,0,0,.05); position: relative; z-index: 50;}
    #logo {padding: 20px 0; width: 180px; }
    #navbar {padding: 0;}
    #navbar ul a {border: 0;}
    #nav-main {border-top: 1px solid #ccc; width: 100%; text-align: center; margin: 0;}
    #nav-main li {display: inline-block; float: none;}
    #nav-main a {border: 0; padding: 20px 20px; font-size: 16px;}
    #nav-main a:after {position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; background: #f58233; content: ""; opacity: 0;}
    #nav-main a:hover {background: none;}
    #nav-main a:after {left: 50%; opacity: 0;}
    #nav-main a:hover:after, #nav-main .nav-path-selected > a:after {left: 10px; right: 10px; opacity: 1;}
    
    #nav-mini {position: absolute; right: 15px; top: 20px;}
    #nav-mini .font-sizer {display: flex; border-left: 1px solid #ccc; align-items: center; padding: 0 0 0 1rem; margin: 0 0 0 1rem;}
    #nav-mini a {padding: 5px; margin: 0; font-size: 16px; border: 0; color: #666; font-weight: 400; margin-left: 10px; border-radius: 15px;}
    #nav-mini .font-sizer a {background: #eee; width: 30px; height: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0; text-align: center; border: 1px solid #ddd; color: #444;}

    #hdr-tools {position: absolute; top: 60px; right: 15px; text-align: right; font-size: 15px;}
    #hdr-tools .btn-theme {display: inline-block; padding: 8px 15px; margin: 0 0 0 20px;}

    #hdr-search {width: 200px; position: relative; padding: 0; display: inline-block;}
    #hdr-search button {right: 5px; top: 3px;}
    #logo {padding: 35px 0; width: 200px;float: left;}
    #nav-main {float: right; width: auto; margin-top: 75px;}
    #nav-main a {font-size: 18px; padding: 40px 15px;}

    #hdr-tools {top: 15px;}
    #nav-mini {top: 23px; right: 470px;}
    #nav-mini a {font-size: 14px; margin-left: 5px;}

    #hero {padding: 75px 0 125px 0;}
    #hero hgroup {padding: 20px 20px 0 20px;}
    #hero hgroup p {font-size: 24px;}
    #hpg-find h2 {font-size: 24px;}
    #hpg-find a {font-size: 19px; padding: 10px 25px;}

    .video-block p {font-size: 16px;}

    #hpg-cols {padding: 50px 0;}
    .feature {padding: 10px 15px;}
    
    #nav-main li {postition: relative;}
    #nav-main ul {transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); opacity: 0; visibility: hidden; position: absolute; left: calc(50% - 125px); top: 102%; width: 250px; background: #fff; padding: 15px; text-align: left; margin: 0; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,.1);}
    #nav-main ul li {float: none; display: block;}
    #nav-main ul a {padding: 5px; float: none;}
    #nav-main ul a:hover {padding: 5px 0 5px 10px; background: #f4f4f4;}
    #nav-main ul a:after {display: none;}
    #nav-main li:hover ul {opacity: 1; visibility: visible; top: 100%;}
}


@media (min-width: 1200px) {
    h1 {font-size: 3.25em;}

    #logo {padding: 30px 0; width: 270px;}
    #nav-main a {font-size: 19px; padding: 48px 25px;}
    #nav-mini {right: 490px;}
    #nav-mini a {font-size: 15px;}

    #hdr-search {width: 220px;}

    #hero {padding: 100px 0 150px 0;}
    #hero hgroup {padding: 20px 25px 0 20px;}
    #hero hgroup p {font-size: 28px;}

    #sec-content aside {padding-right: 50px;}
}





.animate {
    animation-duration: .5s;
    -webkit-animation-duration: 0.5s;
    transition-timing-function: ease-out;
    animation-fill-mode: both;
}


@keyframes fadeInUp {
    0% {opacity: 0;transform: translate3d(0, 20px, 0);}
    100% {opacity: 1;transform: none;}
}

.fadeinup {
    animation-name: fadeInUp;
    animation-delay: 0.1s;
}


@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadein {
    animation-name: fadeIn;
    animation-duration: 1.5s;
}

.delay-1 {animation-delay: .25s;}
.delay-2 {animation-delay: .35s;}
.delay-3 {animation-delay: .45s;}
.delay-4 {animation-delay: .55s;}
.delay-5 {animation-delay: .65s;}
.delay-6 {animation-delay: .75s;}
.delay-7 {animation-delay: .85s;}
.delay-8 {animation-delay: .95s;}
.delay-9 {animation-delay: 1.5s;}

#ship-list-list .modal-dialog {max-width: 900px; margin: 25px auto; width: auto; text-align: center;border-top: 5px solid #ec7a14;}
#ship-list-list .modal-header {border: 0;}
#ship-list-list .modal-content h2 {padding: 0; margin-top: 30px;}
#ship-list-list .modal-content h2:after {display: none;}
#ship-list-list .modal-content p {border-bottom: 1px solid #ccc; padding: 0 0 25px 0;}
#ship-list-list .modal-content {border-radius: 0; padding: 25px;}
#ship-list-list .modal-content ul {columns: 2; list-style: none; padding: 0; text-align: left; column-gap: 2px;}

#ship-list-list .modal-content ul > * {
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid;
}
#ship-list-list .modal-content ul a {padding: 8px; border-bottom: 1px dotted #ccc; display: block; text-decoration: none; color: #333; position: relative; z-index: 5; overflow: hidden; font-weight: 600;}
#ship-list-list .modal-content ul a:hover {color: #fff; background: #ec7a14;}
#ship-list-list .modal-content .close {font-size: 45px; margin-top: -10px; position:relative; z-index: 50;}
#ship-list-list .modal-content ul li:nth-of-type(odd) {background: #f4f4f4;}
#ship-list-list .modal-content p {padding: 0 15% 25px 15%;}
#ship-list-list .modal-content ul {columns: 4;}
#ship-list-list .modal-content ul li:nth-of-type(odd) {background: #f4f4f4;}

.bold {font-weight:700;}
.skip-to-content-link {color: #111;border: 2px solid var(--secondary);border-radius: 0 0 15px 15px;width: 150px;left: calc(50% - 75px);top: -3px;padding: 15px;position: absolute;z-index: 50;transform: translateY(-100%);transition: transform 0.3s;}
.skip-to-content-link:focus {transform: translateY(0%);}
.skip-to-content-link {
    left: 50%;
    position: absolute;
    transform: translateY(-100%);
  }
  .skip-to-content-link {
    background: #000; color: #fff; text-decoration: underline;
    height: 30px;
    left: 50%;
    padding: 8px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
  }
  
  .skip-to-content-link:focus {
    transform: translateY(0%);
  }

@media (max-width: 992px) {
  .navbar-header {
    float: none;
  }
  .navbar-left, .navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
    margin-top: 7.5px;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}



.contact-message {
  margin: 0 85px;
}
.upper-section {
  text-align: center;
  padding: 10px; 
}

.lower-section {
  background-color:#fbd78f;
  text-align: center;
  padding: 10px; }

.lower-section .message-text .break-text {
  display: block;
  margin: 15px 0; 
}

@media screen and (max-width: 768px) {
  .upper-section, .lower-section {
    padding: 20px 10px;
  }
}