html,
body,
p {
    font-family: 'open sans';
    color: #323232;
    font-size: 16px;
}

h1 {
    font-size: 3rem;
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'open sans';
}

h2 {
    font-size: 3.9rem;
    margin-bottom: .8rem;
    margin-top: 1rem;
    font-family: 'bebas neue';
    line-height: 1;
}

h2:after {
    content: "__";
    display: block;
    line-height: .025;
    margin-bottom: 2.8rem;
    letter-spacing: -1px;
    color: #ffce3b;
    margin-top: 0;
}

h3 {
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: .8rem;
}

p {
    margin-bottom: .8rem;
}

dl,
ol,
ul {
    margin-bottom: 2rem;
}

ol,
ul {
    padding-left: 1.4rem;
}

li>ol,
li>ul {
    margin-top: .5rem;
    margin-bottom: 1rem;
}



li {
    margin-bottom: .8rem;
}

.lead {
    font-weight: 400;
}

.coe a {
    display: block;
    margin-bottom: 1rem;
}

a {
    font-weight: 500;
    color: #28688d;
}

#home-hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0;
    height: calc(100vh - 50px);
}

.pre-headline {
    font-family: 'open sans';
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: .5rem;
    font-size: .8rem;
}

h6 {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quote {
    font-style: italic;
    color: #288D89;
    font-weight: 600;
}

.quote:before {
    content: '"';
    font-size: 3rem;
    position: absolute;
    transform: translate(-1rem, -1.5rem);
    color: #fac82e;
}

.quote:after {
    content: '"';
    font-size: 3rem;
    position: absolute;
    transform: translate(-1rem, -1.5rem);
    color: #fac82e;
}

.fawe {
    font-family: 'FontAwesome';
    font-weight: 400;
}

h3:after {
    content: " ";
    display: flex;
    width: 100%;
    margin-left: 1rem;
    margin-bottom: .25rem;
}

.pagination a {
    font-family: 'Zilla Slab';
    font-weight: 500;
    text-transform: capitalize;
    /* white-space: nowrap; */
}

.nav-tabs {
    border-bottom: 5px solid #e9e9e9;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border: none;
    border-bottom: 6px solid #288D89;
    margin-bottom: -5px;
    color: #999;
}

li>.nav-link {
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: inherit;
}


.pagination>i {
    margin: auto;
    display: block;
    text-align: center;
}



.btn {
    padding: .8rem 1.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 600;
    margin-top: .5rem;
    
    transition: .4s;
    overflow: hidden;
    position: relative;
}


@keyframes btn-effect {
  from {left:-150%}
  to {left:120%}

}
@keyframes btn-effect-r {
  from {left:120%}
  to {left:-150%}

}
.btn:hover:before {
  animation-name: btn-effect;
  animation-duration: .5s;
  animation-timing-function: ease;
}

.btn:before{
  animation-name: btn-effect-r;
  animation-duration: .5s;
  animation-timing-function: ease;
}

.btn:before {
    content: " ";
    position: absolute;
    left: 120%;
    width: 70%;
    background: #ffffff;
    top: -10px;
    height: 200%;
    transform: skew(30deg, 10deg);
    mix-blend-mode: overlay;
    opacity: .25;
}

.btn {
    transition: .5s;
    box-shadow: 0 0 0 #00000000;
}
.btn:hover {
    transition: .5s;
    
}



.btn-primary:not(:disabled):not(.disabled).active {
    color: #ffffff;
    border: #244181 .15rem solid;
    background-color: #142c5f;
    line-height: 1.2;
}

.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: transparent;
    border: #ffffff.15rem solid;
    color: #ffffff;
}

.link-arrow {
    display: block;
    font-family: 'Zilla Slab';
    font-weight: 500;
    font-size: 1.25rem;
}

.link-arrow:after {
    content: "\f061";
    font-family: 'FontAwesome';
    margin-left: .5rem;
    font-size: 1rem;
    color: #ffc400;
}

.color-overlay:before {
    content: " ";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: inherit;
    opacity: 0.3;
    margin: 0;
    background: bl;
}

.color-overlay {
    overflow: hidden;
    position: relative;
}

.yellow.tint {
    position: relative;
}

.yellow.tint:after {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: #ffc400;
    left: 0;
    backdrop-filter: grayscale(1);
    z-index: 2;
    mix-blend-mode: color;
}

.bottom-thick-line {
    border-bottom: solid 1rem #ffc400;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 600;
    text-transform: uppercase;
    font-size: .9rem;
    color: #ffffff;
    transition: .2s;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #efc925;
}

.navbar-expand-lg .navbar-nav .nav-link.highlight {
    border: 2px solid;
    padding: .5rem;
}

.nav-item {
    margin-bottom: 0;
}

.nav-link {
    vertical-align: middle;
    margin: 0;
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
    border-bottom: 4px solid #244181;
    color: #ffffffbf;
}

footer {
    border-top: .2rem #151515 solid;
    background: #151515;
}

.brand-element-1 {
    height: 1rem;
    background: linear-gradient(-45deg, rgba(70, 177, 0, 1) 0%, rgba(70, 177, 0, 1) 35%, rgba(23, 101, 44, 1) 35%, rgba(23, 101, 44, 1) 100%);
}

form input, form textarea, select {
    padding: .5rem;
    background: transparent;
    outline: none;
    border: 2px solid;
    border-radius: .5rem;
}

select>option {
    background: #333333;
}

.form-column:after {
    position: absolute;
    content: " ";
    left: 0;
    top: 0;
    width: 50vw;
    height: 100vw;
    background: #333333;
    z-index: -1;
}

.animate--grow,
.no-js .pagination .slick-item:nth-child(2)>a,
.pagination .slick-current+.slick-slide>a {
    color: red;
    line-height: 1;
}

.slick-current+div a {
    color: #ffc400!important;
    font-size: 2rem;
    transition: .5s;
}

.pagination [aria-hidden] {
    transition: .4s;
}

.caps {
    text-transform: uppercase;
}

.thick {
    font-weight: 600;
}

.border-white {
    border: 2px solid white;
}

.hero-l2 {
    background-size: cover;
    background-position: center;
    height: 30vh;
    min-height: 270px;
    align-items: center;
    display: flex;
    overflow: visible;
    position: relative;
}

.hero-l2:after {
    position: absolute;
    content: "";
    border-top: .5rem solid #00649F;
    width: 100%;
    height: 1rem;
    background: #083E62;
    left: 0;
    z-index: 3;
    bottom: 0;
    border-bottom: .5rem solid #288D89;
}

.overline {
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    color: #259591;
}

b,
strong {
    font-weight: 700;
}


/***********hero banner*****************/

@keyframes shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transition: .4;
        transform: scale(1);
    }
}

@keyframes grow {
    0% {
        transform: scale(1);
        color: white;
    }
    100% {
        transform: scale(1);
        color: #ffffff;
        filter: blur(0px);
    }
}


/* $. Classes
\*----------------------------------------------------------------*/

.animate {
    transform: translate3d(0, 0, 0);
    perspective: 1000;
    filter: blur(1px);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transform-origin: center left;
}

.animate--shrink,
.pagination .slick-current>a {
    animation-duration: 1s;
    animation-name: shrink;
    animation-timing-function: "linear";
}

.animate--grow,
.no-js .pagination .slick-item:nth-child(2)>a,
.pagination .slick-current+.slick-slide>a {
    animation-duration: 1s;
    animation-timing-function: "linear";
    animation-name: grow;
}


/* Slider */

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slide img {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 0;
    outline: none;
}

.pagination .slick-slide {
    overflow: hidden;
    padding: 1rem 0;
}

.pagination [aria-hidden] {
    transition: 1s;
}

.pagination .slick-current>a {
    box-sizing: border-box;
    display: block;
}

.pagination-item {
    display: block;
    font-size: 1.1rem;
    color: white;
    text-transform: uppercase;
}

form input[type="text"],
form select,
form textarea {
    width: 100%;
}

.text-white * {
    color: #ffffff!important;
}
/***************************************/

nav {
    /* background: linear-gradient(-45deg, rgba(255, 255, 255) 0%, rgba(255, 255, 255) 75%, rgba(23, 101, 44, 1) 75%, rgba(23, 101, 44, 1) 10%); */
    border-bottom: 1px solid #ffc933;
}

.timeline .col-1:after {
    content: " ";
    width: .25rem;
    display: block;
    position: absolute;
    height: 100%;
    background: #f1f1f1;
    left: 50%;
}

.timeline .col-1:before {
    content: " ";
    width: .75rem;
    display: block;
    position: absolute;
    height: .75rem;
    background: #ffffff;
    border: 3px solid #FFCE3B;
    left: 50%;
    z-index: 2;
    border-radius: 100%;
    top: .75rem;
    transform: translateX(-.25rem);
    box-sizing: border-box;
}

.timeline h7 {
    color: #003150;
    font-weight: 700;
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    html,
    body {
        font-size: 14px;
    }
    .navbar-brand {
        margin-right: 0;
    }
    nav.bg-light {
        background: #17652c!important;
    }
    
    .btn-lg {
    display: block;
    }    
.card-background {
    position:relative;
    transform: translateY(0);
    width: 100%;
    margin-bottom: 1rem!important;
    display: block;
    margin-top: -5rem!important;
}
.xs-my-0 {
    margin-top:0!important;
    margin-bottom:0!important;
}
.xs-mt-0 {
    margin-top:0!important;
}
.xs-mb-0 {
    margin-bottom:0!important;
}
.xs-py-0 {
    padding-top:0!important;
    padding-bottom:0!important;
}
.xs-pt-0 {
    padding-top:0!important;
}
.xs-pb-0 {
    padding-bottom:0!important;
}
.card-background {
    position: relative;
    transform: translate(0);
    width: 100%;
}
}

.card-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    width: 60%;
    right: 0;
    transform: translateY(-50%);
}

.card-background:before {
    content: " ";
    background: red;
    width: 30%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 6;
    height: 100%;
    background: rgb(8,43,64);
    background: linear-gradient(90deg, rgba(8,43,64,1) 0%, rgba(8,43,64,0) 100%);
}


.wave-lr {
    position: relative;
}

.wave-lr {
    background: url(/img/sp-wave-bg-lr.svg) fixed;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
}

.wave-ul:before {
    content: " ";
    width: 50%;
    height: 100%;
    background-image: url(/img/sp-wave-bg-ul.svg);
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
}
.overlay[class*="wave"]:before {
    mix-blend-mode: overlay;
}
.multiply[class*="wave"]:before {
    mix-blend-mode: multiply;
    opacity: .25;
}
.btn-primary.alt:not(:disabled):not(.disabled).active {
    background-color: #efc925;
    border-color: #efc925;
    color: #082b40;
}

.container-fluid {
    position: relative;
    overflow: hidden;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background: transparent;
}

.text-white .nav-tabs>li>a {
    color: white;
}

.text-white .nav-tabs .nav-item.show .nav-link,
.text-white .nav-tabs .nav-link.active {
    border-bottom-color: #efc925;
}

a#bulk-carriers-tab {}

.bottom-border {
    border-bottom: 1px solid;
}

small.overline {}

.btn.small {
    padding: .25rem 1rem;
    font-size: .7rem;
    text-transform: uppercase;
}

.number-item {
    padding: .5rem;
    background: #288d89;
    text-align: center;
    width: 2.5rem;
    color: white;
    border-radius: .3rem;
    font-weight: 700;
}

p>a {
    font-weight: 600;
}

.compass-wm {
    background-image: url("/img/compass-wm.svg");
    background-position-x: -20%;
    background-position-y: -30%;
    background-size: 50%;
    background-repeat: no-repeat;
}
select.auto {    
    background-color: #259591;
}

.success-story .col-1:after {
    content: " ";
    width: .125rem;
    display: block;
    position: absolute;
    height: 100%;
    background: #999999;
    right: .5rem;
}
.quick-stats h3 {
    font-size: 3rem;
    font-weight: 200;
}
.success-story .col-1:before {
    content: " ";
    width: .25rem;
    display: block;
    position: absolute;
    height: 2rem;
    background: #288d89;
    z-index: 2;
    top: 0;
    transform: translateX(-.25rem);
    box-sizing: border-box;
    right: 0;
}

.testimonial h5 {
    padding: .75rem 1rem;
    background: white;
    border-radius: .5rem;
}

.author-small:before {
    content: " ";
    width: 1rem;
    height: 1rem;
    background: #efc925;
    display: inline-block;
    margin-right: 1rem;
    border-radius: 100%;
}

.author-small {
    font-weight: 600;
}

nav.fixed-top {
    transition: .2s;
}

.scrolled {
    background: white;
    position: fixed!important;
    top: 0;
    z-index: 10;
    width: 100%;
    box-shadow: 0 3px 2rem #0000002e;
}

.scrolled>nav {
    border-bottom: none;
}

.fixed-top.navbar-light .navbar-nav .nav-link {
    color: #020202!important;
    transition: .2s;
}

nav {
    transition: .2s;
    padding-left: 0!important;
    padding-right: 0!important;
}

.btn-group-sm>.btn,
.btn-sm {
    padding: .35rem .75rem;
    font-size: .8rem;
}

.btn-group-lg>.btn,
.btn-lg {
    padding: .6rem 1.4rem;
    font-size: 1rem;
}

.btn:hover {
    transition: .2s;
    background: initial;
    box-shadow: 0 .25rem .5rem #00000052;
}

.btn-primary:hover {
    filter: brightness(1.2);
}

.btn-secondary:hover {
    background: #ffffff4a!important;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: center;
    padding-right: 2rem;
}

.success-stories::-webkit-scrollbar {
    width: 4px;
}

.success-stories::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 1rem;
}

.success-stories::-webkit-scrollbar-thumb {
    background-color: #999999;
    border-radius: 1rem;
}

.enclose .article-prev-bg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    background-size: cover;
    transition: .2s;
}

.enclose {
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.feed-items>div {
    background: #cacaca73!important;
    overflow: hidden;
    height: 100%;
}

.training-selection:hover {
    background: #152649!important;
    transition: .8s;
    background-image: url(/img/compass.svg)!important;
    background-size: cover!important;
    background-position: 2rem -27rem!important;
    background-repeat: no-repeat!important;
}

.training-selection {
    background: #244181;
    transition: .8s;
    background-image: url(/img/compass.svg)!important;
    background-size: cover;
    background-position: -28rem 9rem;
    background-repeat: no-repeat;
}

.crew-management-selection:hover {
    background: #063634!important;
    transition: .8s;
    background-image: url(/img/compass.svg)!important;
    background-size: cover!important;
    background-position: 2rem -27rem!important;
    background-repeat: no-repeat!important;
}

.crew-management-selection {
    background: #149994;
    transition: .8s;
    background-image: url(/img/compass.svg)!important;
    background-size: cover;
    background-position: -28rem 9rem;
    background-repeat: no-repeat;
}

.accent:hover>.background {
    filter: blur(2px);
    position: absolute;
    top: -10rem;
    left: -20rem;
    width: calc(100% + 40rem);
    height: calc(100% + 20rem);
    transition: .6s;
    transform: scale(1.2);
}

.accent {
    overflow: hidden;
}

.accent>.background {
    background-size: cover!important;
    background-position: center!important;
    background-attachment: fixed!important;
    position: absolute;
    top: -10rem;
    left: -20rem;
    width: calc(100% + 40rem);
    height: calc(100% + 20rem);
    transition: .6s;
    transform: scale(1.2);
}

.feed-title h4 {
    font-family: 'bebas neue';
    font-size: 1.8rem;
    color: #323232;
    margin-bottom: 0;
}



.enclose>div {
    margin-bottom: 0;
    vertical-align: bottom;
    float: none;
    align-self: flex-end;
}

.enclose {
    padding-top: 6rem;
    padding-bottom: 1rem;
    border-radius: .5rem;
}

.feed-items {}

.enclose .article-prev-bg:before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: linear-gradient(0deg, rgb(227 227 227) 0%, rgba(57, 116, 177, 0) 100%);
}
#commentForm .col-12>div {
    margin-bottom: 1rem;
}
.category p {
    text-transform: uppercase;
    font-weight: 800;
    font-family: 'open sans';
    color: #555555;
    margin-bottom: 0;
    font-size: .8rem;
}

.modal-open .modal {backdrop-filter: blur(23px);}

.modal-body {
    padding: 0;
}

.modal-header {
    background: black;
    border-bottom: none;
    border-radius: 0;
}

.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header .close {
    color: white;
}

.modal-title {
    color: white;
}
.container-fluid.py-5, .container.py-5 {
    padding-top: 5rem!important;
    padding-bottom: 5rem!important;
}
.navigation-container.p-0.scrolled {
    position: fixed!important;
    top: 0;
    display: block;
    z-index: 10!important;
}