@font-face {
    font-family: "Alte Haas";
    font-weight: 400;
    src: url('../fonts/altehaasgroteskregular-webfont.woff2') format('woff2'),
         url('../fonts/altehaasgroteskregular-webfont.woff') format('woff');
}
@font-face {
    font-family: "Alte Haas";
    font-weight: 700;
    src: url('../fonts/altehaasgroteskbold-webfont.woff2') format('woff2'),
         url('../fonts/altehaasgroteskbold-webfont.woff') format('woff');
}

* {
    box-sizing: border-box;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Alte Haas", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}

h2 {
    font-size: 40px;
    font-weight: 700;
    color: #E1271D;
    line-height: 49px;
    display: flex;
    /* flex-direction: row; */
    /* align-items: center; */
}

h3, h4 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 32px;
}

p {
    font-size: 18px;
    line-height: 22px;
}

a {
    /* font-size: 15px; */
    color: #fff;
    text-decoration: none;
    line-height: 1;
}


section a {

    color: #E1271D;
}


p a {
    color: #E1271D;

}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
    padding: 0;
}

section ul {list-style: disc;padding: 0 0 24px 34px;}


section ul li {margin: 0 0 2px 0;color: #707070;}


.page {
    overflow: hidden;
    position: relative;
}

.button {
    background-color: #e1271d;
    line-height: 1;
    font-weight: 700;
    display: inline-block;
    transition: .3s;
    color: #fff;
}
.button:hover {
    background-color: #d0241b;
}

.clear {
    clear: both;
}

header, section {
    /* background-attachment: fixed; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

main > .inner,
.top-menu > .inner,
section > .inner,
header > .inner,
footer > .inner {
    width: 100%;
    height: 100%;
    max-width: 1140px;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0 auto;
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

/* Sticked button "Contact Us" */
.contact-us-fixed {
    font-size: 18px;
    padding: 15px 36px 29px;
    border-radius: 20px 20px 0 0;
    transform: rotate(-90deg);
    display: inline-block;
    position: fixed;
    top: 40vh;
    right: -65px;
    transition: .2s;
}
.contact-us-fixed:hover {
    right: -59px;
}


/* Navigation styles START */

.top-menu {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
}
.top-menu .logo-wrapper {
    display: inline-block;
    padding-top: 35px;
}

.logo-wrapper img {
    width: 168px;
    height: 68px;
}

@keyframes slide-down {
  from {top: -73px;}
  to {top: 0;}
}

.top-menu.fixed {
    position: fixed;
    background-color: #fff;
    height: 76px;
    box-shadow: 0px 3px 9px #00000036;
    top: 0;
    left: 0;
    right: 0;
    animation-name: slide-down;
    animation-duration: .3s;
}
.top-menu.fixed .logo-wrapper {
    padding: 9px 0 8px;
}
.top-menu.fixed .logo-wrapper img {
    width: 134px;
    height: 54px;
}

.menu-wrapper {
    position: absolute;
    top: 0;
    right: -164px;
    transform: translateX(50%);
    width: 2000px;
    z-index: 9999;
}
nav {
    position: relative;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-weight: 700;
    box-sizing: border-box;
}

#cssmenu:after,
#cssmenu .menu:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    display: none;
}

#cssmenu #head-mobile {
    display: none
}

#cssmenu {
    z-index: 100;
}

#cssmenu .menu {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    background: #24356D;
    border-radius: 0 0 0 35px;
    padding-left: 21px;
}

#cssmenu .menu>li {
    float: left
}

#cssmenu .menu>li>a {
    padding: 34.5px 14px 24.5px;
    font-size: 15px;
    text-decoration: none;
    transition: .3s;
}

#cssmenu .menu>li:hover>a,
#cssmenu ul li.active>a {
    color: #E1271D;
}

#cssmenu .menu>li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
    -webkit-transition: background .4s ease;
    -ms-transition: background .4s ease;
    transition: background .4s ease;
}

#cssmenu ul ul {
    position: absolute;
    left: -9999px;
    box-shadow: 6px 6px 13px rgba(0, 0, 0, 0.395871);
    border-radius: 0 0 20px 0;
}

#cssmenu ul ul li {
    height: 0;
    -webkit-transition: all .4s ease;
    -ms-transition: all .4s ease;
    background: #E1271D;
    transition: all .4s ease;
}

#cssmenu ul ul ul li {
    background-color: #004D7F;
}

#cssmenu li:hover>ul {
    left: auto;
}

#cssmenu .menu > li:hover>ul {
    left: 10px;
}

#cssmenu li:hover>ul>li {
    height: 34px;
}

#cssmenu ul ul ul {
    margin-left: 100%;
    top: 0;
    box-shadow: 4px 2px 10px rgba(0, 0, 0, 0.427838);
}

#cssmenu ul ul li a {
    padding: 15px 80px 15px 20px;
    white-space: nowrap;
    display: block;
    font-size: 15px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
}

#cssmenu ul ul li:last-child>a,
#cssmenu ul ul li.last-item>a {
    border-bottom: 0
}
#cssmenu ul ul li:last-child {
    height: 45px;
    border-radius: 0 0 20px 0;
}

#cssmenu ul ul li:hover>a,
#cssmenu ul ul li a:hover {
    color: #24356D;
}

#cssmenu ul ul li.has-sub>a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu ul ul li.has-sub>a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease
}

#cssmenu ul ul>li.has-sub:hover>a:before {
    top: 17px;
    height: 0
}

#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
    background: #38434B;
}

#cssmenu ul ul ul li.active a {
    border-left: 1px solid #38434B
}

#cssmenu .menu>li.has-sub>ul>li.active>a,
#cssmenu .menu ul>li.has-sub>ul>li.active>a {
    border-top: 1px solid #333
}

@media screen and (max-width: 1300px) {
    .top-menu.fixed {
        height: 70px;
    }

    .top-menu .logo-wrapper {
        width: 134px;
        height: 54px;
        padding-top: 9px;
    }

    .logo-wrapper img {
        width: 134px;
        height: auto;
    }

    #cssmenu .menu>li>a {
        font-size: 14px;
    }
    #cssmenu .menu>li>a {
        padding: 21px 10px;
    }
}

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

    .top-menu.fixed {
        height: 57px;
    }

    #cssmenu .menu>li>a {
        padding-left: 22px;
        font-size: 18px;
    }

    nav {
        width: 100%;
    }
    #cssmenu {
        width: 100%
    }
    #cssmenu .menu {
        display: none;
        padding-left: 0;
        border-radius: 0;
        top: 64px;
        left: 0;
        right: 0;
        position: fixed;
        max-height: calc( 100vh - 100px );
        overflow-y: scroll;
    }
    .top-menu.fixed #cssmenu .menu {
        top: 57px;
    }
    #cssmenu ul {
        width: 100%;
        display: none;
    }
    #cssmenu ul li {
        width: 100%;
        border-top: 1px solid #3a4e90;
    }
    #cssmenu ul li:hover {
        background: #122150;
    }
    #cssmenu ul ul li,
    #cssmenu li:hover>ul>li {
        height: auto;
        border-top: 1px solid #a5130b;
    }
    #cssmenu ul li a,
    #cssmenu ul ul li a {
        width: 100%;
        border-bottom: 0;
        padding: 19px 80px 19px 40px;
    }
    #cssmenu .menu>li {
        float: none;
    }
    #cssmenu .menu ul ul li a {
        padding-left: 28px;
    }
    #cssmenu ul ul ul li a {
        padding-left: 35px
    }
    #cssmenu ul ul li a {
        color: #fff;
        background: none;
        font-size: 18px;
    }
    #cssmenu ul ul li:hover>a,
    #cssmenu ul ul li.active>a {
        color: #fff
    }
    #cssmenu ul ul li:last-child {
        border-radius: 0;
    }
    #cssmenu ul ul,
    #cssmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left
    }
    #cssmenu .menu>li.has-sub>a:after,
    #cssmenu .menu>li.has-sub>a:before,
    #cssmenu ul ul>li.has-sub>a:after,
    #cssmenu ul ul>li.has-sub>a:before {
        display: none
    }
    #cssmenu #head-mobile {
        display: block;
        /* padding: 23px; */
        color: #ddd;
        font-size: 12px;
        font-weight: 700;
    }
    .menu-toggler {
        width: 83px;
        height: 53px;
        cursor: pointer;
        z-index: 1000;
        position: relative;
        background: #24356D !important;
        border-radius: 0 0 0 33px;
        margin-left: auto;
        float: right;
    }
    .menu-toggler:after {
        position: absolute;
        top: 24px;
        left: 33px;
        display: block;
        height: 4px;
        width: 28px;
        border-top: 4px solid #fff;
        border-bottom: 4px solid #fff;
        content: '';
    }
    .menu-toggler:before {
        -webkit-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        position: absolute;
        top: 16px;
        left: 33px;
        display: block;
        height: 4px;
        width: 28px;
        background: #fff;
        content:
        '';
    }
    .menu-toggler.menu-opened:after {
        -webkit-transition: all .4s ease;
        -ms-transition: all .4s ease;
        transition: all .4s ease;
        top: 24px;
        border: 0;
        height: 4px;
        width: 27px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .menu-toggler.menu-opened:before {
        top: 24px;
        background: #fff;
        width: 27px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    #cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 12px;
        top: 10px;
        display: block;
        height: 46px;
        width: 46px;
        cursor: pointer;
    }
    #cssmenu .submenu-button:after {
        position: absolute;
        top: 20px;
        right: 14px;
        width: 20px;
        height: 4px;
        display: block;
        background: #fff;
        content: '';
    }
    #cssmenu .submenu-button.submenu-opened:after {
        background: #fff
    }
    #cssmenu .submenu-button:before {
        position: absolute;
        top: 12px;
        right: 22px;
        display: block;
        width: 4px;
        height: 20px;
        background: #fff;
        content: '';
    }
    #cssmenu .submenu-button.submenu-opened:before {
        display: none
    }
    #cssmenu ul ul ul li.active a {
        border-left: none
    }
    #cssmenu .menu>li.has-sub>ul>li.active>a,
    #cssmenu .menu ul>li.has-sub>ul>li.active>a {
        border-top: none
    }

    #cssmenu ul ul {
        box-shadow: none;
        border-radius: 0;
    }

    #cssmenu .menu > li:hover>ul {
        left: 0;
    }

    #cssmenu .submenu-opened + a {
        background: #122150;
    }

}
/* Navigation styles END */


/* Header START*/

header {
    height: 25vw;
    min-height: 418px;
    margin-bottom: 77px;
}

.section-card {
    position: absolute;
    left: 16px;
    bottom: -77px;
    max-width: 356px;
    background-color: #24356D;
    border-radius: 0px 100px 0px 0px;
}

.section-card .card-inner {
    padding: 28px 42px 76px 40px;
    position: relative;
}

.section-card h1 {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    line-height: 32px;
    margin-bottom: 19px;
    max-width: 260px;
}

.section-card p {
    color: #fff;
    font-size: 16px;
    line-height: 20px;
}

.section-card .button {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 10px 37px;
    border-radius: 20px 20px 0px 0px;
}

/* Header END*/

/* Section Sub-header START */

section.sub-header {
    padding-bottom: 85px;
    padding-top: 70px;
    overflow: auto;
}

.sub-header h3 {
    color: #24356D;
    font-size: 24px;
    line-height: 29px;
    padding: 20px 0 10px 0;
}

.sub-header h3:first-of-type {
    padding: 0 0 10px 0;
}

.sub-header p {
    font-size: 18px;
    line-height: 22px;
    color: #707070;
    padding: 0 0 24px 0;
}
.page.homepage .sub-header p {
    /* padding-top: 66px; */
}

.sub-header img {
}

/* Section Sub-header END */

/* Section Our products START */


img.alignright {
       margin: 0 0 30px 40px;
       float: right;
}

img.alignleft {
       margin: 0 40px 30px 0;
       float: left;
}

section.our-products {
    background-color: #F7F7F7;
    padding: 48px 0 41px;
}

.product-categories {
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.product-categories a {
    width: 23.65%;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 71px;
    margin-bottom: 23px;
    background-color: #24356D;
    transition: .3s;
    color: #fff;
}
.product-categories a:hover {
    background-color: #E1271D;
}

/* Section Our products END */


/* Section Latest news START */

section.latest-news {
    padding: 76px 0 31px;
}

.news-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 38px;
}

.news-wrapper .single {
    width: 49.1%;
    margin-bottom: 50px;
}

.news-wrapper .single img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.news-wrapper .single .date {
    display: inline-block;
    margin-top: 24px;
    color: #24356D;
    font-size: 15px;
    font-weight: 700;
}

.news-wrapper .single h3 {
    color: #E1271D;
    margin-top: 4px;
}

.news-wrapper .single p {
    font-size: 16px;
    line-height: 20px;
    color: #707070;
    margin-top: 22px;
}

.news-wrapper .single a.button {
    padding: 11px 16px;
    border-radius: 10px;
    margin-top: 24px;
}

/* Section Latest news END */


/* Section Straights START */

section.straights {
    padding-bottom: 94px;
}

section.straights h2 {
    margin-bottom: 39px;
}

.straights-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 89px;
}

.straight-single {
    width: 32.12%;
}

.straight-single img {
    height: 283px;
    margin-bottom: 16px;
}

.straight-single h3 {
    color: #E1271D;
    margin-bottom: 22px;
}

.straight-single p {
    color: #707070;
    font-size: 16px;
    line-height: 20px;
}

.help-label {
    background-color: #E1271D !important;
    border-radius: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 21px 65px !important;
    align-items: center !important;
    clear: both !important;
    margin: 80px 0 80px 0;
}

.help-label span {
    color: white !important;
    font-size: 26px !important;
    line-height: 32px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    margin-right: 15px !important;
    padding: 0 !important;
}

.help-label p {
    max-width: 525px !important;
    font-size: 17px !important;
    line-height: 23px !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Section Straights END */


/* Section Our Services START */

section.our-services {
    height: 534px;
    background-image: url("../img/section-services-bg.jpg");
}

.our-services .section-card {
    max-width: 544px;
    bottom: 0;
    border-radius: 0 150px 0 0;
}

.our-services .card-inner {
    padding: 47px 69px 60px 60px;
}

.our-services .card-inner h3 {
    margin-bottom: 32px;
}

.our-services .card-inner p {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 20px;
}

.our-services .card-inner a {
    font-size: 18px;
    line-height: 23px;
    text-decoration: underline;
    font-weight: 700;
    transition: .3s;
    color: #fff;
}
.our-services .card-inner a:hover {
    text-decoration: none;
}

/* Section Our Services END */


/* Section Our Team START */

section.meet-our-team {
    padding: 134px 0 152px;
}

.meet-our-team .content {
    background-color: #24356D;
    color: #fff;
    display: flex;
}

.meet-our-team .img-col {
    width: 48.9%;
}

.meet-our-team .img-col img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.meet-our-team .texts-col {
    width: 51.1%;
    padding: 67px 85px 70px 64px;
    position: relative;
}

.meet-our-team .texts-col h3 {
    margin-bottom: 42px;
}

.meet-our-team .texts-col p {
    font-size: 16px;
    line-height: 20px;
}

.meet-our-team .texts-col .button {
    position: absolute;
    bottom: -52px;
    right: -1px;
    font-size: 21px;
    line-height: 30px;
    height: 52px;
    padding: 10px 26px;
    border-radius: 0 0 20px 20px;
}

/* Section Our Team END */


/* Footer START */

footer {
    background-color: #24356D;
    padding: 69px 0 77px;
    color: #fff;
}

footer .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .col.logo {
    width: 23.46%;
}

footer .col.logo .logo-wrapper {
    width: 100%;
    display: inline-block;
    text-align: center;
}
footer .col.logo .logo-wrapper img {
    width: 100%;
    height: auto;
    max-width: 200px;
}

footer .col.content {
    width: 30.95%;
    padding-top: 12px;
    padding-left: 44px;
}

footer .col.content h4 {
    margin-bottom: 24px;
}

footer .col.content p {
    font-size: 16px;
    line-height: 20px;
}

footer .col.list {
    padding-right: 27px;
    padding-left: 12px;
    width: 20.6%;
    text-align: center;
    padding-top: 22px;
}

footer .col.list li {
    padding-bottom: 28px;
    margin-bottom: 17px;
    border-bottom: 1px solid #fff;
}
footer .col.list li a {
    font-size: 18px;
    line-height: 22px;
    transition: .3s;
}
footer .col.list li a:hover {
    font-size: 20px;
}

footer .col.socials {
    width: 6.5%;
    padding-top: 10px;
}

.socials-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.socials-wrapper .social {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 26px;
    transition: .3s;
}
.socials-wrapper .social:last-child {
    margin-bottom: 0;
}
.socials-wrapper .social:hover {
    transform: scale(1.1);
}

.socials-wrapper .social.linkedin {
    background-image: url("../img/icon-linkedin.png");    
}
.socials-wrapper .social.facebook {
    background-image: url("../img/icon-facebook.png");    
}
.socials-wrapper .social.twitter {
    background-image: url("../img/icon-twitter.png");    
}

/* Footer END */





/* ---------------------------------------------------
Product Home page styles
---------------------------------------------------- */

/* Header START*/
.product-home header {
    /*background-image: url("../img/product-services-header-bg.jpg");*/
}
.section-cards-header {
    position: absolute;
    bottom: -77px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.section-cards-header .card {
    background-color: #24356D;
    border-radius: 0px 100px 0px 0px;
    max-width: 356px;
    color: #fff;
    margin-right: 4.33%;
}
.section-cards-header.no-links .card {
    width: 356px;
}
.section-cards-header .card .card-inner {
    padding: 81px 70px 46px 35px;
}
.section-cards-header .card h1 {
    margin-bottom: 21px;
    font-size: 34px;
    font-weight: 700;
    line-height: 41px;
    color: #fff;
}
.section-cards-header .card p {
    font-size: 16px;
    line-height: 20px;
}

.section-cards-header .links {
    width: 63.53%;
    display: flex;
    justify-content: space-around;
    margin: 20px auto 0;
}

.section-cards-header .card-link {
    width: 100%;
    max-width: 328px;
    height: 77px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E5E5E5;
    color: #24356D;
    padding: 0 10px;
    font-size: 22px;
    text-align: center;
    transition: .3s;
}
.section-cards-header .card-link:first-child {
    margin-right: 6.82%;
}
.section-cards-header .card-link.active,
.section-cards-header .card-link:hover {
    color: #E5E5E5;
    background-color: #24356D;
}

/* Header END*/


/* Section Sub header START*/


h5 {
    color: #24356D;
    font-size: 24px;
    line-height: 29px;
}

/* Section Sub header END*/


/* Section Environments START */

section.environments {
    padding: 66px 0 114px;
    background-color: #F7F7F7;
}

.environments p {
    margin: 25px 0 62px;
    color: #707070;
}
.environments .environments-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 1;
}

.environments .environments-cards a {
    width: 15.52%;
    background-color: #24356D;
    border-radius: 0 40px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .3s;
}
.environments .environments-cards a.active,
.environments .environments-cards a:hover {
    background-color: #E1271D;
}
.environments .environments-cards a span {
    padding: 15px 26px 14px 17px;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}

/* Section Environments END */


/* Section Our Team START */

section.our-team {
    padding: 77px 0 115px;
}

.our-team .team-cards-wrapper {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.our-team .team-card {
    width: 23.65%;
}

.our-team .team-card img {
    height: 284px;
    width: 100%;
    height: auto;
}
.our-team .team-card h4 {
    color: #E1271D;
    margin-top: 30px;
}
.our-team .team-card p {
    font-size: 16px;
    line-height: 20px;
    color: #707070;
    margin-bottom: 23px;
    margin-top: 26px;
    padding-right: 10px;
}
.our-team .team-card .button {
    padding: 10px 26px;
    border-radius: 10px;
}

/* Section Our Team END */


/* Section Downloads START */

section.downloads {
    background-color: #F7F7F7;
    padding: 72px 0 0;
}

.downloads p {
    color: #707070;
    margin: 53px 0 55px;
    font-size: 16px;
    line-height: 20px;
}

.downloads .downloads-cards-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.downloads-cards-wrapper .download-card {
    width: 40.4%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 111px;
    margin-right: 8.8%;
}
.downloads-cards-wrapper .download-card img {
    max-width: 182px;
    height: fit-content;
    margin-right: 29px;
    /* width: auto; */
}
.downloads-cards-wrapper .download-card .card-title {
    margin-top: 8px;
    color: #24356D;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 16px;
    border-bottom: 1px solid #24356D;
    display: block;
}
.downloads-cards-wrapper .download-card p {
    font-size: 16px;
    line-height: 20px;
    margin: 20px 0 28px;
}
.downloads-cards-wrapper .download-card .button {
    padding: 9px 73px 10px 17px;
    border-radius: 0 10px 10px 0;
}


/* Section Downloads END */


/* ---------------------------------------------------
Product Overview page styles
---------------------------------------------------- */

.page.product-overview header {
    /*height: 418px;
    background-image: url("../img/product-overview-header-bg.jpg");*/
}


/* Section Environments START */

.page.product-overview .environments-cards a {
    background-color: #E5E5E5;
    color: #24356d;
}
.page.product-overview .environments-cards a.active,
.page.product-overview .environments-cards a:hover {
    background-color: #24356d;
    color: #fff;
}

/* Section Environments END */


.page.product-overview .environments {
    padding: 67px 0 74px;
    background-color: #fff;
}

/* Section Case Studies START */

section.case-studies .heading-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

section.case-studies .heading-wrapper .headers {
    width: 50%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.case-studies .heading-wrapper h3 {
    color: #24356D;
    margin: 5px 0 15px;
    display: block;
}

.case-studies .heading-wrapper .circles-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}

.case-studies .heading-wrapper .circle {
    width: 88px;
    height: 88px;
    background-color: #A7ADC3;
    border-radius: 50%;
    padding: 6px 5px 0;
    margin-right: 14px;
    margin-bottom: 25px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}
.case-studies .heading-wrapper .circle:last-child {
    margin-right: 0;
}

.case-studies .heading-wrapper .circle.ui-state-active,
.case-studies .heading-wrapper .circle:hover {
    background-color: #24356D;
}

.case-studies .heading-wrapper .circle a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 15px;
}

.case-studies .heading-wrapper .circle .count {
    font-size: 23px;
    line-height: 23px;
    margin-top: 4px;
}

.case-studies .background,
.case-studies .overview .bg {
    background-image: url("../img/farm-systems-bg.jpg");
    background-position: 70%;
    background-size: cover;
    position: relative;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.case-studies .overview {
    position: relative;
    min-height: 359px;
    display: flex;
    align-items: flex-end;
    padding-top: 89px;
}


.case-studies .overview .text-box {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 470px;
    padding: 75px 44px 60px;
    color: #fff;
    background-color: rgba(36,53,109,.9);
    border-radius: 0 100px 0 0;
}
.case-studies .overview .text-box {
    position: relative;
}

.case-studies .overview .text-box p {
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
}


.case-studies .overview .text-box p.name {
    font-size: 16px;
    font-weight: 500;
    /* line-height: 23px; */
    margin: 20px 0 0 0;
}


.case-studies .overview .text-box .quote {
    position: absolute;
    font-size: 75px;
    line-height: 1;
}
.case-studies .overview .text-box .quote.open {
    left: 21px;
    top: 22px;
}
.case-studies .overview .text-box .quote.close {
    right: 30px;
    bottom: -15px;
}


.page.product-home .case-studies {
    padding: 70px 0 80px;
    background-color: #F7F7F7;
}

.tabs-content .texts {
    padding-top: 36px;
}

.tabs-content .title-hidden,
.tabs-content .subtitle-hidden {
    display: none;
}


/* Section Case Studies END */


/* Section Sub header START */

.page.product-overview .sub-header {
    padding: 37px 0 85px;
}

.page.product-overview .sub-header h3 {
    color: #24356D;
    padding-top: 12px;
}


.page.product-overview .sub-header h4 {
    color: #24356D;
    padding-top: 12px;
    font-size: 18px;
    margin: 0 0 20px 0;
    line-height: 26px;
}

.page.product-overview .sub-header img {
    /* max-width: 371px; */
    /* height: 281px; */
    /* margin-left: 115px; */
}

.page.product-overview .sub-header p {
    font-size: 16px;
    line-height: 20px;
    /* padding-top: 20px; */
}

/* Section Sub header END */


/* ---------------------------------------------------
Product and Services page styles
---------------------------------------------------- */

.page.product-services header {
    /*background-image: url("../img/product-services-header-bg.jpg");*/
}

/* Main content START */

.product-services main {
    /* padding: 116px 0 141px; */
}

.product-services main .with-image {
    margin-bottom: 87px;
}

.product-services main .with-image img {
    max-width: 321px;
    float: left;
    margin-right: 55px;
    margin-bottom: 30px;
}

.product-services main p {
    /* color: #707070; */
    /* margin-bottom: 33px; */
}

.product-services main h2 {
    margin: 60px 0 12.9px;
    color: #24356D;
    font-size: 24px;
    line-height: 29px;
}

/* can't image other optimal way to add different margin for the only h2 tag except adding class */
.product-services main h2.formulation {
    margin-top: 114px;
}

.product-services main a:not(.button) {
    font-size: 20px;
    font-weight: 700;
    color: #24356D;
    text-decoration: underline;
}
.product-services main a:not(.button):hover {
    text-decoration: none;
}

.product-services main .download-line {
    margin: 30px 0 40px;
}

.product-services main .download-line img {
    max-width: 178px;
    margin-right: 87px;
    margin-bottom: 20px;
    float: left;
}

.product-services main .download-line .button {
    padding: 9px 26px 12px;
    border-radius: 10px;
    margin-top: 19px; 
}

/* Main content END */


/* ---------------------------------------------------
Blends/Straights pages styles
---------------------------------------------------- */

/* Sub header section START */

.page.straights header,
.page.blends header {
    /*background-image: url("../img/product-services-header-bg.jpg");*/
}

.page.straights .sub-header,
.page.blends .sub-header {
    /* padding-bottom: 50px; */
    /* padding-top: 70px; */
}


/* Sub header section END */


/* Downloads single section START */

section.downloads-single {
    padding: 0 0 70px 0;
    overflow: auto;
}

.downloads-single p {
    font-size: 16px;
    line-height: 20px;
    color: #707070;
    margin-top: 30px;
}

.downloads-single .brochure {
    max-width: 451px;
    margin-top: 8px;
    margin-left: 50px;
    display: flex;
    float: right;
    margin-bottom: 30px;
}
.downloads-single .brochure img {
    max-width: 182px;
    /* height: 225px; */
    margin-right: 29px;
}

.downloads-single .brochure .card-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: #24356D;
    margin-top: 9px;
    padding-bottom: 16px;
    border-bottom: 1px solid #24356D;
    margin-bottom: 20px;
}


.downloads-single .brochure .card-title a {
        color: #24356D;
}

.downloads-single .brochure p {
    margin: 0 0 67px;
}

.downloads-single .brochure .button {
    padding: 10px 73px 11px 17px;
    border-radius: 0 10px 10px 0;
}

.downloads-single .help-label {
    margin-top: 140px !important;
}

/* Downloads single section END */


/* ---------------------------------------------------
Services page styles
---------------------------------------------------- */

.page.services header {
    /*background-image: url("../img/services-header-bg.jpg");*/
}

/* Section sub-header START */

.page.services .sub-header {
    padding-bottom: 7px;
}

.page.services .sub-header p {
    /* padding-top: 68px; */
}

.sub-header .discover-more {
    max-width: 318px;
    float: right;
    background-color: #F8F8F8;
    margin-left: 170px;
    padding: 37px 30px 27px 31px;
    position: relative;
    top: -40px;
}

.sub-header .discover-more h4 {
    color: #24356D;
    margin: 0 0 28px;
    padding: 0;
}

.sub-header .discover-more p {
    color: #24356D;
    font-size: 16px;
    line-height: 20px;
    padding: 0 !important;
    margin: 0 0 19px;
}

.sub-header .discover-more address a {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: #24356D;
    display: block;
    font-style: normal;
}
.sub-header .discover-more address a:hover {
    text-decoration: underline;
}

.page.services .sub-header p {
    /* font-size: 16px; */
    /* line-height: 20px; */
}

/* Section sub-header END */


/* Section Services summary START */

section.services-summary {
    /* padding-bottom: 30px; */
}

section.services-summary h2 {
    margin-bottom: 66px;
}

.services-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 40px 0;
}

.services-container .card {
    width: 30.7%;
    margin-bottom: 49px;
    background-color: #E5E5E5;
    border-radius: 0 40px 0 0;
    display: flex;
    flex-direction: column;
}

.services-container .card h3 {
    font-size: 20px;
    line-height: 22px;
    margin: 17px 100px 19px 28px;
    color: #24356D;
}

.services-container .card img {
    height: 146px;
    object-position: 0 40%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.services-container .card p {
    font-size: 16px;
    line-height: 20px;
    color: #707070;
    margin: 24px 27px 19px;
}

/* Section Services summary END */



/* ---------------------------------------------------
Performance page styles
---------------------------------------------------- */

/* Section Header START */

.page.performance header {
   /*background-image: url("../img/product-services-header-bg.jpg")*/
}

.section-cards-header .links.single {
    justify-content: flex-start;
}

/* Section Header END */


/* Section Products (environments) START */

section.products .environments-cards a span {
    padding-bottom: 36px;
}

/* Section Products (environments) END */


/* Section Our team START */

.page.performance section.our-team {
    padding-bottom: 103px;
}

/* Section Our team END */


/* Section Downloads START */
.page.performance section.downloads {
    padding: 62px 0 48px 0;
}
.page.performance .download-card {
    margin-bottom: 68px;
}
.page.performance .download-card .text-content {
    display: flex;
    flex-direction: column;
}
.page.performance .download-card .text-content a {
    margin-top: auto;
    width: 0;
    min-width: 162px;
}

/* Section Downloads END */



/* ---------------------------------------------------
Forage page styles
---------------------------------------------------- */

/* Section Sub header START */

.page.forage .sub-header {
    padding-bottom: 5px;
}

.page.forage .sub-header p {
    /* padding-top: 68px; */
    /* font-size: 16px; */
    /* line-height: 20px; */
}

/* Section Sub header END */


/* Section Forage categories START */

.forage-categories {/* padding: 0 0 119px 0; */}

.forage-categories h2 {
    margin-bottom: 46px;
}

.forage-categories .categories-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 0;
}

.forage-categories .card {
    width: 48%;
    background-color: #E5E5E5;
    border-radius: 0 40px 0 0;
    margin-bottom: 55px;
}

.forage-categories .card h3 {
    margin: 26px 25px 19px 28px;
    font-size: 20px;
    line-height: 22px;
    color: #24356D;
    line-height: 29px;
}

.forage-categories .card img {
    height: 224px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.forage-categories .card p {
    color: #707070;
    font-size: 16px;
    line-height: 20px;
    margin: 34px 33px 42px;
}

/* Section Forage categories START */



/* ---------------------------------------------------
News/News single pages styles
---------------------------------------------------- */

.page.news header {
    /*background-image: url("../img/news-header-bg.jpg");*/
}

.page.news-article header {
    /*background-image: url("../img/news-article-header-bg.jpg");*/
    margin-bottom: 145px;
}

/* Section News list/News single START */

section.news-list {
    padding: 70px 0 0 0;
}

.news-container {
    margin-bottom: 106px;
}

.news-container .single {
    padding-bottom: 34px;
    margin-bottom: 60px;
    border-bottom: 1px solid #24356D;
}

.page.news-article main img,
.news-container .single img {
    width: 165px;
    /* height: 165px; */
    float: left;
    margin: 0 40px 30px 0;
}

.page.news-article main .date,
.news-container .single .date {
    font-size: 15px;
    font-weight: 700;
    line-height: 15px;
    color: #24356D;
    margin-bottom: 11px;
    display: inline-block;
}

.page.news-article main h2,
.news-container .single h2 {
    font-size: 33px;
    font-weight: 700;
    line-height: 35px;
    color: #707070;
    margin-bottom: 16px;
    margin-left: 205px;
}

.page.news-article main h2 {
    margin-bottom: 40px;
}

.page.news-article main p,
.news-container .single p {
    font-size: 16px;
    line-height: 20px;
    color: #707070;
    margin-bottom: 27px;
    padding-right: 25px;
    margin-left: 205px;
}
.page.news-article main p {
    margin-left: 205px;
    /* margin-bottom: 0; */
    /* padding: 0; */
}

.news-container .single a.button {
    padding: 10px 16px 11px;
    border-radius: 10px;
    /* margin-left: 205px; */
}

.page.news-article .help-label {
    /*margin: 95px 0 121px;*/
}


.news-article  a.button {
    padding: 10px 16px 11px;
    border-radius: 10px;
    margin: 30px 0 41px 0;
}


/* Section News list END */



/* ---------------------------------------------------
Event page styles
---------------------------------------------------- */

/* Section header START */

.page.event header {
    /*background-image: url("../img/event-header-bg.jpg");*/
}

/* Section header END */

/* Section Events list START */

section.events-list {
    padding: 68px 0 0 0;
}

.events-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.events-container .single {
    width: 48%;
    /* max-width: 516px; */
    margin-bottom: 52px;
    background-color: #fff;
    border: 2px solid #24356D;
    border-radius: 0 40px 0 0;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
}

.events-container .single img {
    width: 42.83%;
    max-height: 299px;
}

.events-container .single .text-content {
    margin: 24px 38px 28px 33px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.events-container .single .text-content h2 {
    line-height: 25px;
    color: #24356D;
    font-size: 24px;
    line-height: 27px;
    margin: 0 0 10px 0;
}

.events-container .single .text-content .location,
.events-container .single .text-content .time,
.events-container .single .text-content .month {
    display: block;
    font-size: 20px;
    line-height: 25px;
    color: #24356D;
}

.events-container .single .text-content .time {
    margin-top: 5px;
}

.events-container .single .text-content .month {
    margin-bottom: 15px;
}

.events-container .single .text-content .open-modal {
    border: none;
    border-radius: 20px;
    display: block;
    padding: 15px 23px;
    text-align: center;
    font-size: 21px;
    line-height: 24px;
    margin-top: auto;
    max-width: 209px;
    cursor: pointer;
}

#modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: .3s;
}
#modal-overlay.active {
    opacity: .8;
    pointer-events: all;
}

#event-modal {
    position: fixed;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: #fff;
    padding: 26px;    
    border-radius: 20px;
    width: 90vw !important;
    max-width: 880px;
    max-height: 95vh;
    overflow-y: auto;
    border: 1px solid #707070;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: .3s;

    color: #24356D;
    line-height: 25px;
}
#event-modal.active {
    opacity: 1;
    pointer-events: all;
}

#event-modal .header {
    margin-bottom: 26px;
}

#event-modal .title {
    color: #24356D;
    font-size: 24px;
    line-height: 25px;
    padding-right: 50px;
}

#event-modal button.close {
    border: none;
    background: none;
    position: absolute;
    top: 22px;
    right: 22px;
    width: 33px;
    height: 33px;
    cursor: pointer;
}

#event-modal .close:before, #event-modal .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
    top: -3px;
}
#event-modal .close:before {
    transform: rotate(45deg);
}
#event-modal .close:after {
    transform: rotate(-45deg);
}


#event-modal input:not([type=submit]),
#event-modal textarea {
    display: block;
    padding: 19px 17px;
    margin-bottom: 26px;
    color: #24356D;
}

#event-modal ::placeholder {
    color: #24356D
}
#event-modal :-ms-input-placeholder {
    color: #24356D
}
#event-modal ::-ms-input-placeholder {
    color: #24356D;
}

#event-modal .col {
    width: 50%;
    float: left;
    margin-bottom: 20px;
}

#event-modal .col.left {
    padding-right: 14px;
}
#event-modal .col.right {
    padding-left: 14px;
}

#event-modal .col.left input:last-of-type,
#event-modal textarea:last-of-type {
    margin-bottom: 0;
}

#event-modal textarea {
    min-height: 100px;
}

#event-modal input[type=submit] {
    float: right;
}

@media screen and (max-width: 900px) {
    #event-modal .col {
        width: 100%;
    }
    #event-modal .col.left {
        padding-right: 0;
        margin-bottom: 18px;
    }
    #event-modal .col.right {
        padding-left: 0;
        margin-bottom: 0;
    }

    #event-modal .col.left input,
    #event-modal .col.right textarea {
        margin-bottom: 18px;
    }
}

/* Section Events list END */



/* ---------------------------------------------------
About page styles
---------------------------------------------------- */

/* Header section START */



/* Header section END */


/* Main section START */


section.about {padding: 70px 0 0 0;}

section.about p {
    font-size: 16px;
    line-height: 20px;
    margin: 0px 0 22px 0;
}

section.about .feedback {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 62px;
    padding-right: 0;
}

section.about .feedback .photo-wrapper {
    max-width: 356px;
    /* max-height: 480px; */
    flex-basis: 34%; /* Used instead of width */
    flex-shrink: 0; /* Not allow to reduce image size */
    margin-right: 74px;
    position: relative;
}

section.about .feedback .photo-wrapper img {
    /* height: 100%; */
}

section.about .feedback .photo-wrapper .caption,
section.about .team-info .photo-wrapper .caption {
    /* position: absolute; */
    /* bottom: 0; */
    left: 0;
    right: 0;
    padding: 21px 35px 21px;
    background-color: #24356D;
    font-size: 16px;
    color: #fff;
    position: relative;
    top: -4px;
}

section.about .feedback .text {
    color: #707070;
    padding-top: 4px;
}

section.about .feedback .text-with-bg {
    color: #24356D;
    background-color: #F0F0F0;
    padding: 40px 51px 37px 36px;
}

section.about .feedback .text-with-bg .positive-caption {
    display: inline-block;
    background-color: #2c4186;
    color: #fff;
    font-weight: 700;
    padding: 6px 12px 7px;
    margin: 23px 0 18px 3px;
    transform: rotate(4deg);
    letter-spacing: 1px;
}

section.about .team-info {
    display: flex;
    justify-content: flex-start;
    padding-right: 0;
    margin-bottom: 77px;
}

section.about .team-info .photo-wrapper {
    flex-basis: 54.06%;
    flex-shrink: 0;
    position: relative;
    margin-right: 67px;
}

section.about .team-info .photo-wrapper img {
    /* height: 100%; */
}

section.about .team-info .photo-wrapper .caption {
    font-weight: 700;
}

section.about .team-info .text-with-bg {
    background-color: #24356D;
    color: #fff;
    padding: 52px 38px 52px 56px;
}


section.about .team-info .text-with-bg a {
    color: #fff;
}

section.about .team-info address .header {
    display: inline-block;
    margin-bottom: 18px;
}

section.about .team-info address a {
    display: block;
    font-weight: 700;
    line-height: 18px;
}
section.about .team-info address a:hover {
    text-decoration: underline;
}

/* Main section END */



/* ---------------------------------------------------
Contact Us page styles
---------------------------------------------------- */

.page.contact-us header .card {
    min-height: 278px;
}

.page.contact-us main {
    /* margin-bottom: 121px; */
}

.page.contact-us main .address-and-form-wrapper {
    display: flex;
    justify-content: flex-start;
    padding: 68px 0 75px;
}

.page.contact-us address {
    max-width: 356px;
    flex-basis: 100%; /* Used instead of width */
    flex-shrink: 0; /* Not allow to reduce image size */
    margin-right: 6.67%;
    background-color: #24356D;
    padding: 36px 30px 44px 35px;
    color: #fff !important;
    font-style: normal;
    height: min-content;
}

.page.contact-us address a {
    color: #fff
}

.page.contact-us address h2 {
    font-size: 31px;
    line-height: 31px;
    margin-bottom: 29px;
    color: #fff;
}

.page.contact-us address h3 {
    font-size: 23px;
    line-height: 23px;
    margin: 25px 0 23px;
}

.page.contact-us address p {
    font-size: 16px;
    line-height: 20px;
 
}

.page.contact-us .form-wrapper {
    padding-right: 30px;
}

.page.contact-us .form-wrapper form {
    margin: 40px 0 0 0;
}

.page.contact-us .form-wrapper p {
    font-size: 16px;
    line-height: 20px;
    color: #707070;
    margin-bottom: 20px;
}


/* Form fields styles that used on other pages either */
form input:not([type=submit]),
form textarea {
    font-family: "Alte Haas", Arial, sans-serif;
    width: 100%;
    border: none;
    background-color: #F0F0F0;
    color: #24356D;
    font-size: 16px;
    padding: 20px 26px;
    resize: none;
}
.page.contact-us .form-wrapper input:not([type=submit]),
.page.contact-us .form-wrapper textarea {
    margin-bottom: 26px;
}

form input:focus,
form textarea:focus {
    outline: none;
    border: none;
}

form input[type=submit] {
    display: inline-block;
    min-width: 124px;
    border: none;
    background-color: #707070;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    padding: 20.5px;
    transition: .3s;
}
form input[type=submit]:hover {
    cursor: pointer;
    background-color: #888;
}
.page.contact-us .form-wrapper input[type=submit] {
    margin-left: auto;
    float: right;
}

.page.contact-us .form-wrapper textarea {
    min-height: 271px;
}

form ::placeholder {
    color: #9a9a9a;
    font-size: 16px;
    opacity: 1;
}
form :-ms-input-placeholder {
    color: #9a9a9a;
    font-size: 16px;
}
form ::-ms-input-placeholder {
    color: #9a9a9a;
    font-size: 16px;
}

/* Media queries */
@media screen and (max-width: 1023px) {
    .top-menu .logo-wrapper {
        padding-top: 9px;
    }
    .top-menu .logo-wrapper img {
        width: 106px !important;
        height: auto !important;
    }
    
    .menu-wrapper {
        left: 0;
        right: 0;
        transform: translateX(0);
        width: auto;
    }
    
    .sub-header p {
        margin-right: 40px;
    }

    .sub-header img {
        /* margin-top: 65px; */
        /* max-width: 345px; */
        /* height: 270px; */
        /* margin-left: 30px; */
    }

    .straight-single img {
        height: 230px;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

   .help-label {
        padding: 17px 20px !important;
        justify-content: space-around !important;
    }
    .help-label span {
        font-size: 20px !important;
        white-space: nowrap !important;
    }
    .help-label p {
        font-size: 16px !important;
        max-width: 450px !important;
    }

    .meet-our-team .texts-col {
        padding: 30px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .meet-our-team .texts-col h4 {
        margin-bottom: 25px;
    }
    .meet-our-team .texts-col p {
        font-size: 15px;
    }
    

     section.case-studies .heading-wrapper .headers {
        width: initial;
    }


   
    footer .inner {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    footer .col.logo {
        width: 35%;
        margin-bottom: 20px;
    }

    footer .col.content {
        width: 58%;
        margin-bottom: 20px;
    }

    footer .col.list {
        width: 33%;
        margin-right: 20px;
    }
    footer .col.list a:hover {
        text-decoration: underline;
    }
    
    footer .col.socials {
        width: 50%;
    }

    .socials-wrapper {
        flex-direction: row;
        justify-content: space-around;
    }
    .socials-wrapper .social {
        margin-bottom: 0;
    }


    /* Product home page */

    
    .section-cards-header .card-link {
        font-size: 18px;
    }

    .our-team .team-card {
        width: 48%;
        margin-bottom: 60px;
    }
    .our-team .team-card img {
        height: 380px;
        object-position: top;
        object-fit: cover;
    }

    .downloads-cards-wrapper .download-card {
        width: 48%;
        margin-right: 0;
    }
    .downloads-cards-wrapper .download-card img {
        max-width: 150px;
        /* height: 185px; */
        margin-right: 15px;
    }
    .downloads-cards-wrapper .download-card .card-title {
        margin-top: 0;
        font-size: 16px;
    }
    .downloads-cards-wrapper .download-card p {
        margin: 25px 0;
        font-size: 16px;
    }


    /* Page product overview */
    .page.product-overview .sub-header img {
        margin-left: 40px;
    }
    

    /* Page Blends/Straights */
    .page.straights .sub-header img,
    .page.blends .sub-header img {
        margin-top: 0;
    }


    /* Page Services */
    .page.services .sub-header {
        padding-bottom: 51px;
    }
    .sub-header .discover-more {
        margin-bottom: 40px;
        margin-left: 70px;
    }

    .services-container .card {
        width: 31%;
        margin-bottom: 50px;
    }


    /* Page Performance */
    .page.performance .sub-header img {
        margin-top: 0;
    }


    /* Page Events */
    .events-container {
        justify-content: space-around;
    }
    
    .events-container .single {
        width: 100%;
        max-width: 800px;
    }

    .events-container .single img {
        width: 240px;
        max-height: unset;
    }

    .events-container .single .text-content .button {
        max-width: unset;
        padding-left: 30px;
        padding-right: 30px;
    }


    /* Page About Us */
    .page.about main .feedback,
    .page.about main .team-info {
        padding-right: 0;
    }

    .page.about main .feedback .photo-wrapper {
        margin-right: 30px;
    }

    .page.about main .feedback .text-with-bg {
        padding: 25px 30px 20px 20px;
    }

    .page.about main .team-info {
        flex-wrap: wrap;
    }

    .page.about main .team-info .photo-wrapper,
    .page.about main .team-info .text-with-bg {

        flex-basis: 100%;
        max-width: 700px;
        margin: 0 auto 50px;
    }

    .page.about main .team-info .text-with-bg {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    /* Page homepage */
    .sub-header .inner {
        flex-direction: column;
    }
    .sub-header p {
        display: block;
        width: 100%;
        margin-right: 0;
    }
    .sub-header img {
       /* max-width: none !important; */
       /* height: unset !important; */
       float: none !important;
       margin: 30px 0 !important;
       width: 100%;
    }

    .product-categories a {
        width: 24%;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .news-wrapper {
        flex-direction: column;
    }
    .news-wrapper .single {
        width: 100%;
        margin-bottom: 70px;
    }
    .news-wrapper .single img {
        height: auto;
    }

    .straights-wrapper {
        flex-direction: column;
        margin-bottom: 10px;
    }
    .straight-single {
        width: 100%;
        max-width: 650px;
        margin: 0 auto 65px;
    }
    .straight-single img {
        height: auto;
        margin-bottom: 20px;
    }

    .help-label {
        flex-direction: column !important;
        /* padding: 17px 12px !important; */
        /* margin: 0 !important; */
    }
    .help-label span {
        margin: 0 0 5px !important;
    }
    .help-label p {
        max-width: none !important;
        text-align: center !important;
    }

    .meet-our-team .content {
        flex-direction: column;
    }
    .meet-our-team .img-col {
        width: 100%;
    }
    .meet-our-team .texts-col {
        width: 100%;
        padding: 28px 42px 50px 40px;
    }

    footer {
        padding: 45px 0;
    }


    /* Page Product overview */
    .page.product-overview .environments {
        padding-top: 105px;
    }


    /* Page Product Home */
    .page.product-home header {
        margin-bottom: 200px;
    }
    .section-cards-header:not(.no-links) {
        bottom: -229px;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .section-cards-header .card {
        width: 100%;
        margin-right: auto;
    }
    .section-cards-header.no-links .card {
        max-width: unset;
    }

    .section-cards-header .links {
        width: 100%;
    }

    .section-cards-header .card-link {
        width: 100%;
        max-width: 356px;
        margin-bottom: 15px;
    }

    .product-home .sub-header img {
        max-width: none;
        height: auto;
        margin: 0 0 55px;
    }

    .environments .environments-cards {
        justify-content: space-around;
    }
    .environments .environments-cards a {
        width: 31%;
        max-width: 190px;
        margin-bottom: 25px;
    }

    .downloads-cards-wrapper .download-card {
        width: 100%;
       margin-bottom: 50px
    }


    /* Page Product overview */
    .page.product-overview header {
        margin-bottom: 160px;
    }
    
    .page.product-overview .sub-header img {
        margin-left: 0;
        max-width: 100%;
        height: auto;
        float: none;
    }


    .case-studies .overview {
        padding-top: 0px;
        display: block;
    }

    .case-studies .overview .bg {
        position: relative;
        right: initial;
        bottom:  initial;
        left:  initial;
        height: 400px;
    }

    .case-studies .overview .text-box {
        background-color: rgba(36,53,109,1);
        border-radius: 0;
        max-width: 100%;
    }

    /* Page Product and Services */
    .page.product-services header {
        margin-bottom: 170px;
    }
    
    .page.product-services main .with-image img {
        max-width: unset;
        float: none;
    }

    .page.product-services main .download-line img {
        max-width: 290px;
        margin-right: 30px;
    }


    /* Page Blends/Straights */
    .page.straights .sub-header img,
    .page.blends .sub-header img {
        float: none;
        max-width: unset;
        margin: 0 0 35px;
    }
    .downloads-single .brochure {
        max-width: unset;
        margin: 35px 0;
        float: none;
    }


    /* Page Services */
    .page.services .sub-header {
        padding-top: 39px;
    }
    
    .sub-header .discover-more {
        margin: 0 0 30px 0;
        float: none;
        max-width: 100%;
        top: 0;
    }

    .services-container .card {
        width: 48%;
        margin-bottom: 35px;
    }


    /* Page Performance */
    .page.performance header {
        margin-bottom: 199px;
    }

    section.environments {
    padding: 66px 0 50px;
    }

    .page.performance section.our-team {
    padding: 50px 0 20px 0;
    }


    /* Page Forage */
    .page.forage .sub-header {
        padding-top: 40px;
    }

    .forage-categories .categories-container {
        justify-content: space-around
    }

    .forage-categories .card {
        width: 100%;
        max-width: 550px;
        margin-bottom: 40px;
    }


    /* Page News */
    .events-container .single .text-content {
        margin: 25px;
    }



    /* Page About Us */
    .page.about main .feedback {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 80px;
    }

    .page.about main .feedback .photo-wrapper {
        margin: 0 0 25px;
        max-width: 420px;
        flex-basis: 100%;
    }


    /* Page Contact Us */
    .page.contact-us main .address-and-form-wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page.contact-us address {
        margin-bottom: 55px;
        margin-right: 0;
    }

    .page.contact-us .form-wrapper {
        padding-right: 0;
    }

    .page.contact-us address {
    max-width: 100%;
}
}

@media screen and (max-width: 550px) {
    .contact-us-fixed {
        display: none;
    }

    h2 {
        font-size: 32px;
        line-height: 36px;
    }
    h4 {
        font-size: 22px;
        line-height: 25px;
    }

    .section-card {
        right: 16px;
    }

    .product-categories a {
        width: 48%;
    }

    .our-services .card-inner {
        padding: 28px 42px 50px 40px;;
    }

    footer .col.logo {
        max-width: 400px;
    }
    footer .col.logo,
    footer .col.content,
    footer .col.list {
        width: 100%;
        margin-bottom: 45px;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    footer .col.socials {
        width: 100%;
    }


    /* Product home page */
    .page.product-home header {
        margin-bottom: 290px;
    }

    .section-cards-header:not(.no-links) {
        bottom: -336px;
    }

    .section-cards-header .links {
        flex-wrap: wrap;
        display: block;
    }

    .section-cards-header .button.card-link {
        width: 100%;
        margin-right: 0;
        height: 60px;
        max-width: 100%;
    }

    .environments .environments-cards a {
        width: 47%;
        max-width: 190px;
    }

    section.our-team {
        padding: 60px 0 80px;
    }
    .our-team .team-card {
        width: 100%;
        margin-bottom: 50px;
    }

    .downloads-cards-wrapper .download-card {
        flex-direction: column;
        margin-bottom: 70px;
    }
    .downloads-cards-wrapper .download-card img {
        align-self: flex-start;
        max-width: 320px;
        /* height: 400px; */
        margin-bottom: 20px;
    }


    /* Page product overview */
    .page.product-overview header {
        margin-bottom: 330px;
    }
    
    .page.product-overview .environments {
        padding-top: 55px;
    }

    .case-studies .heading-wrapper .circles-wrapper {
        flex-wrap: wrap;
    }
    .case-studies .heading-wrapper .circle:last-child {
        margin-right: 14px;
    }

    .case-studies .background {
        height: 380px;
    }

    .case-studies .background .text-box p {
        font-size: 14px;
    }

    .page.product-overview section.sub-header {
        padding-bottom: 70px;
    }


    /* Page Product and Services */
    .page.product-services header {
        margin-bottom: 290px;
    }

    .page.product-services main .download-line img {
        /* max-width: none; */
        margin: 0 0 25px;
    }

    .product-services main {
        padding-bottom: 80px;
    }


    /* Page Blends/Straights */
    .downloads-single .brochure {
        flex-direction: column;
        margin-bottom: 60px;
    }
    .downloads-single .brochure img {
        margin: 0 0 20px 0;
        width: auto;
        height: auto;
        max-width: 380px;
        align-self: flex-start;
    }

    .downloads-single .brochure p {
        margin-bottom: 30px;
    }


    /* Page Services */
    section.services-summary h2 {
        margin-bottom: 40px;
    }
    .services-container .card {
        width: 100%;
        /* max-width: 360px; */
        margin: 0 auto 35px;
    }
    .services-container .card img {
        height: 210px;
    }


    /* Page Performance */
    .page.performance .section-cards-header {
        bottom: -229px;
    }
    .page.performance section.our-team {
        padding-bottom: 20px;
    }


    /* Page News/News article */
    .news-container .single {
        margin-bottom: 75px;
        padding-bottom: 35px;
    }

    .news-container .single img {
        width: 100%;
        height: auto;
        float: none;
    }

    .page.news-article main img {
        width: 100%;
        height: auto;
        float: none;
        margin: 0 auto;
        display: block;
        margin-bottom: 20px;
        max-height: 400px;
    }
    .page.news-article main p {
        margin-left: 0;
    }
    
    .page.news-article main h2, .news-container .single h2 {
        margin-left: 0;
    }


    .page.news-article main p, .news-container .single p {
        margin-left: 0;
    }


    .news-container .single a.button {
        /* margin-left: 0px; */
    }



    /* Page Event */   
    .events-container .single {
        flex-wrap: wrap;
    }
    
    .events-container .single img {
        width: 100%;
        max-height: 300px;
        object-position: top;
        object-fit: cover;
    }

    .events-container .single .text-content .button {
        margin-top: 35px;
        font-size: 20px;
        padding: 11px 2px;
    }


    /* Page About Us */
    .page.about main .feedback .photo-wrapper .caption,
    .page.about main .team-info .photo-wrapper .caption {
        font-size: 14px;
        padding: 16px 28px;
    }
}