/**
 * @file
 * Use this CSS file to override base CSS rules

dark blue: #3C5E99
medium blue: #627D93
gray: #98989A

IBM Plex Sans 300, 500, 700
IBM Plex Serif 300, 500, italic
Montserrat 300, 600, 700

*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;500;700&family=IBM+Plex+Serif:ital,wght@0,300;0,500;1,300;1,500&family=Montserrat:wght@300;600;700&family=Roboto:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Roboto:wght@100;300;400;500;700;900&display=swap');

#block-block-content452c0c86-d209-40fb-bb2f-0a729a058518 {
    margin-top: 1.75em;
}

body {
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    color: #444;
}

p {
    letter-spacing: .01em;
}

.center {
    text-align: center;
}

h1,
h2 {
    font-family: 'montserrat', 'helvetica', 'arial', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
}

h1,
h3,
.intro-text {
    color: #3C5E99;
}

h2,
h4 {
    color: #627D93;
    text-transform: none;
}

h3,
h4,
h5,
h6 {
    font-weight: 700;
}

h5,
h6 {
    color: #444;
}

h3,
h4,
h5,
h6 {
    font-family: 'montserrat', 'helvetica', 'arial', sans-serif;
}

.intro-text,
.field--name-field-intro-text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.25em;
    color: #444;
}

.region-featured-bottom .front-page,
.region-featured-bottom .front-page h2,
.region-highlighted-top .front-page,
.region-highlighted-top .front-page h2 {
    color: #fff;
}

.front-page h2 {
    font-size: 3em;
    text-transform: uppercase;
    margin-top: 1.5em;
}

.front-page .field--name-field-subheader {
    font-size: 2em;
    font-family: 'montserrat', 'helvetica', 'arial', sans-serif;
    line-height: 1.15;
    margin: .5em 0;
}

.front-page .content {
    margin: 0 8em;
}

.header-banner,
.header-banner-front,
.services-banner {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 50%;
    display: inline-block;
}

.services-banner {
    width: 80%;
}

#block-frontpagevideoblock video {
    margin-bottom: -10px;
}

/* .header-banner {
    top: 50px;
} */
/* 
.header-banner-front {
    top: 250px;
} */

.header-banner h3,
.header-banner-front h3,
.header-banner h1,
.header-banner-front h1 {
    color: #fff;
    font-size: 3em;
    text-transform: none;
    text-align: center;
    background-color: rgba(60, 94, 153, .8);
    padding: .5em .5em .5em 1.5em;
    font-family: 'montserrat', 'helvetica', 'arial', sans-serif;
    font-weight: normal;
}



.services-banner h1 {
    color: #fff;
    font-size: 3em;
    text-align: center;
    background-color: rgba(60, 94, 153, .8);
    padding: .5em .5em .5em 1.5em;
    font-family: 'montserrat', 'helvetica', 'arial', sans-serif;
}

.vessel-teaser {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    height: auto;
    width: 80%;
    margin-right: 10%;
    margin-left: 10%;
    display: inline-block;
}

.vessel-teaser h4 {
    color: #fff;
    font-size: 1.5em;
    text-align: center;
    top: 45%;
}

.vessel-teaser h4 a {
    font-size: 2em;
    text-decoration: none;
}

.vessel-teaser h4 a:hover {
    opacity: .5;
}

.teaser-height {
    min-height: 160px;
}

.image-spacing {
    padding-bottom: 1em;
}

.news h4 {
    margin-top: 0;
}

#block-views-block-vessels-block-1-2 {
    margin-bottom: 2.5em;
}

#block-views-block-vessels-block-1-2 h2.title {
    color: #627D93;
}

.field--name-field-teaser-image img {
    transition: all .2s ease-in-out;
}

/*.field--name-field-teaser-image img:hover {
    border: 5px solid rgba(0,60,111,.8);
    transform: scale(1.1); 
}
*/
.field--name-field-specifications {
    background-color: rgba(98, 125, 147, .2);
    padding: 1em;
    margin: 1em 0;
    font-family: 'montserrat', 'helvetica', 'arial', sans-serif;
}

.icon-padding {
    padding-top: 2em;
}

.nobg {
    background: transparent;
}

.services-row .bs-region--left {
    background-color: #fff;
    min-height: 285px;
    padding: 1em 1em 1em 2em;
}

.services-row .bs-region--right {
    min-height: 285px;
}

#block-views-block-services-about-page-block-1 .bs-region--main {
    background-color: #fff;
    padding: 1em 1em 1em 2em;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: left;
    min-height: 506px;
}

#block-views-block-vessels-block-2 .view-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 20px;
    row-gap: 20px;
}

#block-views-block-vessels-block-2 .view-content .views-row {
    background-color: #fff;
    padding: 1em;
    min-height: 550px;
}

#block-views-block-vessels-block-2 .view-content .views-row .views-field-view-node {
    text-align: center;
}



#block-views-block-services-about-page-block-1 .bs-region--main:hover {
    background-color: rgba(255, 255, 255, .25);
    cursor: pointer;
}

/* 
.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
} */

#social {
    list-style: none;
    padding: 0;
    margin: 1em auto;
}

#social li {
    float: left;
    text-align: center;
}

#social li a {
    height: 28px;
    width: 28px;
    text-indent: -9999px;
    overflow: hidden;
    background: url("/sites/default/files/leeway-sprites.png") no-repeat;
    background-position: center;
    display: block;
}

#social #twitter {
    background-position: 0 0px;
    margin: 0px 5px 10px 0px;
}

#social #twitter:hover {
    background-position: 0 -28px;
}

#social #linkedin {
    background-position: 0 -56px;
    margin: 0px 5px 10px 0px;
}

#social #linkedin:hover {
    background-position: 0 -80px;
}

.service-teaser-2 {
    margin-bottom: 2em;
}

.vessel-full-teaser {
    margin-bottom: 1em;
}

.vessel-full-teaser:hover {
    cursor: pointer;
}

/*-----------------RESPONSIVE-------------------*/

@media only screen and (max-width: 1445px) {
    .header-banner-front {

        width: 70%;
    }

    .services-banner {
        width: 70%;
    }

    .header-banner {
        width: 70%;
    }

    .header-banner h3 {
        font-size: 2.5em;
    }
}

@media only screen and (max-width: 1035px) {
    .header-banner-front {

        width: 70%;
    }

    .services-banner {
        width: 70%;
    }

    .header-banner {
        width: 70%;
    }

    .header-banner h3,
    .header-banner-front h3,
    .header-banner h1,
    .header-banner-front h1,
    .services-banner h1 {
        font-size: 2em;
    }

    .front-page .content {
        margin: 0 3em;
    }

}

@media only screen and (max-width: 1024px) {
    .front-page .field--name-field-subheader {
        font-size: 1.75em;
    }
}



@media only screen and (max-width: 768px) {
    h1.page-title {
        font-size: 2em;
    }

    .intro-text,
    .field--name-field-intro-text {
        font-size: 1em;
    }

    .logo {
        float: none;
        margin-right: 10%;
        display: inline-block;
        margin-left: 10%;
        text-align: center;
        width: 80%;
    }

    .header-banner {
        top: 20px;
    }

    #block-frontpagevideoblock video {
        margin-bottom: -5px;
    }
}

@media only screen and (max-width: 767px) {

    .header-banner,
    .header-banner-front {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    .header-banner,
    .header-banner-front {
        transform: none;
    }

    .header-banner h3,
    .header-banner-front h3,
    .header-banner h1,
    .header-banner-front h1 {
        font-size: 2.6rem;
        padding: .5em .5em;
        margin: 0;
    }

    .services-banner {
        display: none;
    }

    #block-efficiency .col-sm-10 .bs-region .bs-region--right,
    #block-efficiency .col-sm-2 .bs-region .bs-region--left {
        width: 90%;
        float: none;
    }

    .front-page h2 {
        font-size: 2em;
    }

    .front-page .field--name-field-subheader {
        font-size: 1.5em;
    }

    #block-views-block-services-about-page-block-1 .bs-region--main {
        text-align: center;
    }

    #block-views-block-news-block-2 {
        border-bottom: 1px solid #fefefe;
        padding-bottom: 1.5em;
        margin-bottom: 1em;
    }

    .front-page .content {
        margin: 0 1em;
    }

    .page-node-type-hero-page .main-content__section {
        padding: 0px 0;
      }
      

    .main-content__section,
    .sidebar__section {
        padding: 25px 0;
    }
    .frontpage .main-content__section, 
    .frontpage .sidebar__section {
        padding: 0px !important;
    }

    .footer__section h2.title {
        text-align: center;
    }
}