@charset "utf-8";

/*
Theme Name: Vantora - Industrial Group & Investor Relations HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

Responsive stylesheet - desktop first: 1399 / 1199 / 991 / 767 / 575
*/

/*======================
(min-width: 1200px)
========================*/
@media (min-width: 1200px) {
  /* 3. Header */
  .vo-side .vo-header.header-style-two {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 290px;
    animation: none;
  }
  .vo-side .header-style-two .header-main {
    height: 100%;
    border-right: 1px solid var(--vo-line);
    border-bottom: 0;
    box-shadow: none;
  }
  .vo-side .header-style-two .header-main .wide {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    padding: 46px 38px 36px;
    gap: 0;
  }
  .vo-side .header-style-two .vo-logo {
    margin-bottom: 54px;
  }
  .vo-side .header-style-two .vo-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .vo-side .header-style-two .vo-nav > ul > li > a {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--vo-line);
    font-size: 15px;
  }
  .vo-side .header-style-two .vo-nav > ul > li > a i {
    transform: rotate(-90deg);
  }
  .vo-side .header-style-two .vo-nav > ul > li:hover > a i {
    transform: rotate(-90deg) translateY(3px);
  }
  .vo-side .header-style-two .vo-nav .sub-menu,
  .vo-side .header-style-two .vo-nav .mega-menu {
    top: -16px;
    left: calc(100% + 38px);
    transform: translateX(12px);
  }
  .vo-side .header-style-two .vo-nav li:hover > .sub-menu,
  .vo-side .header-style-two .vo-nav li:focus-within > .sub-menu,
  .vo-side .header-style-two .vo-nav .has-mega:hover > .mega-menu,
  .vo-side .header-style-two .vo-nav .has-mega:focus-within > .mega-menu {
    transform: translateX(0);
  }
  .vo-side .header-style-two .vo-nav .sub-menu::before,
  .vo-side .header-style-two .vo-nav .mega-menu::before {
    left: -40px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 40px;
    height: auto;
  }
  .vo-side .header-style-two .vo-nav .has-mega {
    position: relative;
  }
  .vo-side .header-style-two .vo-nav .mega-menu {
    width: 820px;
  }
  .vo-side .header-style-two .vo-nav .sub-menu .sub-menu {
    top: -17px;
    left: 100%;
  }
  .vo-side .header-style-two .header-right {
    display: none;
  }
  .vo-side .header-style-two .side-foot {
    display: block;
    margin-top: auto;
    padding-top: 30px;
    font-size: 14.5px;
  }
  .side-foot .vo-quote {
    display: flex;
    margin-bottom: 10px;
    color: var(--vo-heading);
  }
  .side-foot .vo-quote b {
    color: var(--vo-amber);
  }
  .side-foot .vo-quote [data-quote-last] {
    color: var(--vo-heading);
  }
  .side-foot .vo-market {
    margin-bottom: 18px;
    color: var(--vo-muted);
    font-size: 13.5px;
  }
  .side-foot .vo-market::before {
    background: var(--vo-line-2);
  }
  .side-foot .vo-market.is-open::before {
    background: var(--vo-up);
    box-shadow: 0 0 0 4px rgba(35, 122, 69, 0.16);
  }
  .side-foot .side-line {
    display: block;
    color: var(--vo-heading);
    font-family: var(--vo-ff-head);
    font-weight: 600;
  }
  .side-foot .side-line small {
    display: block;
    color: var(--vo-muted);
    font-family: var(--vo-ff-body);
    font-weight: 400;
  }
  .side-foot .side-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--vo-line);
  }
  .vo-side .vo-main,
  .vo-side .vo-footer {
    margin-left: 290px;
  }
  /* beside the rail, a container is never wider than the space left for it */
  .vo-side .vo-main .container,
  .vo-side .vo-footer .container {
    max-width: min(1320px, calc(100vw - 350px));
  }
  .vo-side .vo-header-spacer {
    display: none;
  }

  /* 3. Header */
  .vo-boxed {
    background: var(--vo-stone-2);
  }
  .vo-boxed .vo-page {
    max-width: min(1720px, calc(100% - 110px));
    margin: 0 auto;
    background: var(--vo-bg);
    box-shadow: 0 0 60px rgba(43, 42, 40, 0.08);
  }
  .vo-boxed .vo-header.header-style-three:not(.is-sticky) {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
  }
  .vo-boxed .header-style-three:not(.is-sticky) .header-main {
    max-width: min(1640px, calc(100% - 170px));
    margin: 0 auto;
    border-bottom: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  }
  .vo-boxed .header-style-three:not(.is-sticky) .header-main .wide {
    height: 84px;
    padding: 0 32px;
  }
  .vo-boxed .header-style-three:not(.is-sticky) .vo-nav > ul > li > a {
    padding: 30px 0;
  }
  .vo-boxed .vo-header-spacer.is-on {
    display: none;
  }
  /* the floating bar is the box's width less its margins: the investor button waits for the sticky bar */
  .vo-boxed .header-style-three:not(.is-sticky) .header-btn {
    display: none;
  }
}

/*======================
(min-width: 1600px)
========================*/
@media (min-width: 1600px) {
  /* 1. General */
  .container {
    max-width: 1440px;
  }

  /* 3. Header */
  .vo-side .vo-main .container,
  .vo-side .vo-footer .container {
    max-width: min(1440px, calc(100vw - 350px));
  }
}

/*======================
(min-width: 1960px)
========================*/
@media (min-width: 1960px) {
  /* 1. General */
  .container {
    max-width: 1560px;
  }
}

/*======================
(max-width: 1399px)
========================*/
@media (max-width: 1399px) {
  /* 1. General */
  .sec-pt-120 {
    padding-top: 100px;
  }
  .sec-pb-120 {
    padding-bottom: 100px;
  }

  /* 3. Header */
  .vo-header .wide {
    padding: 0 26px;
  }
  .header-main .wide {
    gap: 24px;
  }
  /* below 1400 the bar keeps the menu; the investor button waits in the menu and the offcanvas */
  .header-btn {
    display: none;
  }
  .vo-logo img {
    height: 36px;
  }
  .header-top .top-hq {
    display: none;
  }

  /* 3. Header */
  .vo-nav > ul {
    gap: 19px;
  }
  .vo-nav > ul > li > a {
    font-size: 14.5px;
  }

  /* 3. Header */
  /* a boxed page on a laptop: thinner margins, so the bar inside the hero keeps its whole menu */
  .vo-boxed .vo-page {
    max-width: calc(100% - 40px);
  }
  .vo-boxed .header-style-three:not(.is-sticky) .header-main {
    max-width: calc(100% - 64px);
  }
  .vo-boxed .header-style-three:not(.is-sticky) .header-main .wide {
    padding: 0 20px;
  }

  /* 10. Home One */
  .ex-panel {
    grid-template-columns: 1fr 1.1fr 1.1fr;
  }
  .ex-card {
    display: none;
  }
}

/*======================
(max-width: 1199px)
========================*/
@media (max-width: 1199px) {
  /* 3. Header */
  .vo-nav {
    display: none;
  }
  .header-main .wide {
    height: 80px;
  }
  .header-top .top-right .top-item {
    display: none;
  }

  /* 7. Components */
  .vo-hero .swiper-slide {
    min-height: 680px;
  }
  .hero-count {
    display: none;
  }

  /* 7. Components */
  .vo-figures .fig {
    padding: 28px 22px;
  }
  .fig-txt b {
    font-size: 28px;
  }

  /* 7. Components */
  .cta-inner {
    flex-wrap: wrap;
  }
  .cta-inner h2 {
    flex-basis: 100%;
  }

  /* 9. Investor Pieces */
  .fan-cover {
    width: 190px;
    margin-left: -95px;
    font-size: 12px;
  }
  .vo-fan {
    height: 400px;
  }

  /* 10. Home One */
  .ex-tab {
    gap: 10px;
    padding: 0 14px;
    font-size: 15px;
  }
  .ex-tab .vo-ico {
    width: 30px;
    height: 30px;
  }
  .ex-panel {
    grid-template-columns: 1fr 1fr;
  }
  .ex-photo {
    grid-row: span 2;
  }

  /* 11. Home Two */
  .hero-share {
    position: relative;
    display: block;
    padding: 0 0 50px;
    margin-top: -110px;
  }
  .hero-share .container {
    justify-content: flex-start;
  }
  .hero-two .hero-copy {
    padding: 110px 0 150px;
  }
  /* the share card leaves the hero: the arrows go back to the slide's foot, above the card */
  .hero-two .hero-arrow {
    bottom: auto;
    top: 600px;
  }

  /* 11. Home Two */
  .dividend-body {
    padding: 90px 40px;
  }

  /* 11. Home Two */
  .alerts-form {
    flex-basis: 100%;
  }

  /* 12. Home Three */
  .hero-three .hero-copy {
    padding: 130px 0 140px;
  }

  /* 12. Home Three */
  .vo-esg-table th:nth-child(2),
  .vo-esg-table td:nth-child(2),
  .vo-esg-table th:nth-child(3),
  .vo-esg-table td:nth-child(3) {
    display: none;
  }

  /* 13. Group & Division Pages */
  .split-body {
    padding: 80px 40px;
  }

  /* 13. Group & Division Pages */
  .vo-div-table th:nth-child(2),
  .vo-div-table td:nth-child(2),
  .vo-div-table th:nth-child(3),
  .vo-div-table td:nth-child(3) {
    display: none;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .vo-kpis .vo-tab {
    padding: 0 16px;
    font-size: 14px;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .vo-job {
    grid-template-columns: 1fr auto;
  }
  .job-meta {
    grid-column: 1;
  }
  .job-posted {
    grid-column: 2;
    grid-row: 1;
  }
  .job-go {
    display: none;
  }

  /* 17. Footer */
  .footer-block .penrose {
    margin: 0 0 22px;
  }
  .footer-contact {
    justify-items: start;
    text-align: left;
  }
}

/*======================
(max-width: 991px)
========================*/
@media (max-width: 991px) {
  /* 1. General */
  .sec-pt-120 {
    padding-top: 84px;
  }
  .sec-pb-120 {
    padding-bottom: 84px;
  }
  .sec-pt-90 {
    padding-top: 70px;
  }
  .sec-pb-90 {
    padding-bottom: 70px;
  }

  /* 1. General */
  .vo-title {
    margin-bottom: 44px;
  }
  .vo-title.is-split {
    display: block;
  }
  .vo-title.is-split .vo-lead,
  .vo-title.is-split .vo-btns {
    margin-top: 22px;
  }

  /* 7. Components */
  .vo-process {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 50px;
  }
  .vo-process::before {
    display: none;
  }

  /* 7. Components */
  .vo-figures {
    grid-template-columns: repeat(2, 1fr);
  }
  .vo-figures .fig:nth-child(3) {
    border-left: 0;
  }
  .vo-figures .fig:nth-child(n+3) {
    border-top: 1px solid var(--vo-line);
  }

  /* 11. Home Two */
  .dividend-area {
    grid-template-columns: 1fr;
  }
  .dividend-photo {
    min-height: 360px;
  }
  .dividend-body {
    max-width: none;
    padding: 80px 24px;
  }

  /* 12. Home Three */
  .pp-note {
    right: 16px;
  }

  /* 13. Group & Division Pages */
  .story-split {
    grid-template-columns: 1fr;
  }
  .split-photo {
    min-height: 340px;
  }
  .split-body {
    max-width: none;
    padding: 70px 24px;
  }

  /* 13. Group & Division Pages */
  .profile-card {
    position: relative;
    top: 0;
  }

  /* 13. Group & Division Pages */
  .ops-list {
    max-height: 420px;
  }
  .ops-map,
  .ops-map iframe {
    min-height: 420px;
  }

  /* 13. Group & Division Pages */
  .faq-side {
    position: relative;
    top: 0;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .vo-board-table th:nth-child(4),
  .vo-board-table td:nth-child(4) {
    display: none;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .job-side {
    position: relative;
    top: 0;
  }

  /* 15. News, Contact & Account */
  .account-wrap {
    grid-template-columns: 1fr;
  }
  .account-side {
    min-height: 440px;
  }

  /* 15. News, Contact & Account */
  .dash-figs {
    grid-template-columns: 1fr;
  }

  /* 15. News, Contact & Account */
  .bare-grid {
    grid-template-columns: 1fr;
  }
  .bare-photo-side {
    min-height: 320px;
  }
  .bare-inner {
    padding: 70px 24px;
  }

  /* 16. Subheader */
  .vo-subheader {
    padding: 110px 0 110px;
  }
}

/*======================
(max-width: 767px)
========================*/
@media (max-width: 767px) {
  /* 1. General */
  /* Bootstrap's widest gutter is wider than the container's side padding on a phone: rows would spill past the screen */
  .g-5,
  .gx-5 {
    --bs-gutter-x: 1.5rem;
  }

  /* 3. Header */
  .header-top {
    display: none;
  }
  .header-btn,
  .header-actions .vo-theme-toggle {
    display: none;
  }

  /* 7. Components */
  .vo-hero .swiper-slide {
    min-height: 600px;
  }
  .hero-copy {
    padding: 90px 0 130px;
  }
  .hero-arrow {
    top: auto;
    bottom: 24px;
    margin-top: 0;
    width: 46px;
    height: 46px;
  }
  .hero-prev {
    left: 16px;
  }
  .hero-next {
    right: auto;
    left: 66px;
  }

  /* 7. Components */
  .video-inner {
    padding: 100px 0;
  }

  /* 7. Components */
  .vo-photo-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 9. Investor Pieces */
  .vo-share {
    padding: 22px 18px;
  }
  .share-canvas canvas {
    height: 260px;
  }
  .share-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .share-stats li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  /* 9. Investor Pieces */
  .fan-cover {
    width: 140px;
    margin-left: -70px;
    font-size: 9px;
  }
  .vo-fan {
    height: 300px;
  }

  /* 10. Home One */
  .vo-explorer {
    margin-top: -54px;
  }
  /* the arrows stand clear of the docked tabs */
  .hero-one .hero-arrow {
    bottom: 84px;
  }
  .ex-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .ex-tab {
    height: 54px;
  }
  .ex-tabs .ex-tab:nth-child(-n+2) {
    border-radius: 3px 3px 0 0;
  }
  .ex-panels {
    padding: 22px;
  }
  .ex-panel {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .ex-photo {
    grid-row: auto;
    min-height: 220px;
  }

  /* 11. Home Two */
  .hero-two .hero-prev {
    left: auto;
    right: 66px;
  }
  .hero-two .hero-next {
    left: auto;
    right: 16px;
  }
  .hero-two .swiper-slide {
    min-height: 640px;
  }
  .hero-two .hero-arrow {
    top: 455px;
  }
  .hero-two .hero-copy {
    padding: 90px 0 170px;
  }
  .vo-share-card {
    width: 100%;
  }

  /* 12. Home Three */
  .strip-inner {
    flex-wrap: wrap;
  }
  .strip-inner p {
    flex-basis: calc(100% - 82px);
    font-size: 17px;
  }

  /* 12. Home Three */
  .vo-esg-table th:nth-child(4),
  .vo-esg-table td:nth-child(4),
  .vo-esg-table th:nth-child(5),
  .vo-esg-table td:nth-child(5) {
    display: none;
  }
  .vo-esg-table th,
  .vo-esg-table td {
    padding: 14px 10px;
  }

  /* 13. Group & Division Pages */
  .vo-timeline::before {
    left: 9px;
  }
  .tl-item {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 0 22px 40px;
  }
  .tl-item:not(.is-flip) .tl-copy {
    text-align: left;
  }
  .tl-item.is-flip .tl-copy,
  .tl-item.is-flip .tl-photo {
    order: 0;
  }
  .tl-dot {
    left: 9px;
    top: 34px;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .vo-calc {
    padding: 26px 18px;
  }
  .vo-dividend-table th:nth-child(4),
  .vo-dividend-table td:nth-child(4) {
    display: none;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .kpi-panels {
    padding: 24px 16px;
  }
  .vo-vbars.is-kpi {
    height: 230px;
  }
  .vo-vbars.is-kpi b {
    font-size: 10px;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .vo-wizard {
    padding: 26px 18px;
  }
  .wizard-marks {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 15. News, Contact & Account */
  .author-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
  }
  .comment-list .comment.is-reply {
    padding-inline-start: 26px;
  }
  .post-nav {
    grid-template-columns: 1fr;
  }
  .article-quote {
    padding: 28px 22px;
  }
  .article-photos img {
    height: 180px;
  }

  /* 17. Footer */
  .vo-footer {
    padding-top: 80px;
  }
  .footer-block .penrose {
    height: 190px;
  }
}

/*======================
(max-width: 575px)
========================*/
@media (max-width: 575px) {
  /* 1. General */
  .sec-pt-120 {
    padding-top: 70px;
  }
  .sec-pb-120 {
    padding-bottom: 70px;
  }
  .sec-pt-90 {
    padding-top: 60px;
  }
  .sec-pb-90 {
    padding-bottom: 60px;
  }
  body {
    font-size: 16px;
  }
  .vo-lead {
    font-size: 17px;
  }

  /* 1. General */
  .vo-btn {
    height: 50px;
    padding: 0 22px;
  }

  /* 2. Preloader */
  .pre-block {
    width: 64px;
    height: 64px;
  }
  .pre-word {
    font-size: 44px;
  }
  .pre-names {
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 0 20px;
    font-size: 11px;
  }

  /* 3. Header */
  .vo-header .wide {
    padding: 0 16px;
  }
  .header-main .wide {
    height: 70px;
  }
  .vo-logo img {
    height: 34px;
  }

  /* 3. Header */
  .vo-header.is-sticky .header-main .wide {
    height: 66px;
  }

  /* 7. Components */
  .hero-title .vo-line {
    white-space: normal;
  }

  /* 7. Components */
  .vo-process {
    grid-template-columns: 1fr;
  }

  /* 7. Components */
  .vo-figures {
    grid-template-columns: 1fr;
  }
  .vo-figures .fig + .fig {
    border-left: 0;
    border-top: 1px solid var(--vo-line);
  }

  /* 9. Investor Pieces */
  .vo-vbars {
    gap: 4px;
  }
  .vo-vbars b {
    font-size: 11px;
  }

  /* 9. Investor Pieces */
  .vo-cal .cal-item {
    grid-template-columns: 70px 1fr;
    gap: 14px;
  }
  .cal-add {
    display: none;
  }
  .cal-date b {
    font-size: 28px;
  }

  /* 9. Investor Pieces */
  .fan-cover {
    width: 104px;
    margin-left: -52px;
    font-size: 7px;
  }
  .vo-fan {
    height: 240px;
  }

  /* 9. Investor Pieces */
  .vo-release {
    grid-template-columns: 1fr;
  }
  .rel-photo {
    min-height: 200px;
  }

  /* 10. Home One */
  .vo-split {
    padding: 26px 20px;
  }
  .split-head b {
    font-size: 36px;
  }
  .split-row {
    grid-template-columns: 1fr 90px;
    grid-template-rows: auto 14px;
    height: auto;
    padding: 12px 0;
    gap: 6px 12px;
  }
  .split-row .row-track {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 12px;
  }
  .split-row .vo-chg {
    display: none;
  }

  /* 10. Home One */
  .vo-results .res-panel {
    padding: 26px 20px;
  }
  .vo-results .vo-tab {
    padding: 0 14px;
    font-size: 14px;
  }

  /* 12. Home Three */
  .vo-esg-table th:nth-child(8),
  .vo-esg-table td:nth-child(8) {
    display: none;
  }

  /* 12. Home Three */
  .vo-fall {
    padding: 26px 16px 22px;
  }
  .fall-bars {
    gap: 5px;
    height: 260px;
  }
  .fall-bars .bar b {
    font-size: 10px;
  }
  .fall-cut {
    font-size: 40px;
  }
  .fall-target {
    left: 16px;
    right: 16px;
  }

  /* 13. Group & Division Pages */
  .vo-div-table th:nth-child(4),
  .vo-div-table td:nth-child(4),
  .vo-div-table th:nth-child(5),
  .vo-div-table td:nth-child(5) {
    display: none;
  }
  .vo-table th,
  .vo-table td {
    padding: 12px 8px;
    font-size: 14px;
  }

  /* 13. Group & Division Pages */
  .dv-photo-stack {
    padding: 0 0 50px 30px;
  }
  .dv-chart {
    padding: 22px 14px;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .vo-board-table th:nth-child(3),
  .vo-board-table td:nth-child(3) {
    display: none;
  }

  /* 14. Investor, Sustainability & Careers Pages */
  .vo-job {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px;
  }
  .job-posted {
    grid-column: 1;
    grid-row: auto;
  }

  /* 15. News, Contact & Account */
  .blog-post.is-quote,
  .blog-post.is-link {
    padding: 38px 24px;
  }
  .bp-glyph {
    right: 18px;
    font-size: 76px;
  }

  /* 15. News, Contact & Account */
  .vo-contact-form {
    padding: 28px 20px;
  }

  /* 15. News, Contact & Account */
  .account-form,
  .account-side {
    padding: 38px 22px;
  }

  /* 15. News, Contact & Account */
  .vo-docs .vo-btn {
    padding: 0 12px;
    font-size: 0;
    gap: 0;
  }
  .vo-docs .vo-btn i {
    font-size: 14px;
  }
  .side-card {
    padding: 24px 18px;
  }

  /* 15. News, Contact & Account */
  .launch-count {
    grid-template-columns: 1fr 1fr;
  }
  .launch-count b {
    font-size: 36px;
  }

  /* 16. Subheader */
  .vo-subheader {
    padding: 90px 0 90px;
  }
  .sub-tabs span {
    width: 38px;
    height: 8px;
  }
}