/**
 * @file
 * Subtheme specific CSS.
 */

/*Extra small devices (portrait phones, less than 576px)*/
/*No media query for `xs` since this is the default in Bootstrap*/

/*PRefChem colors*/
.color-prefchem-deepgrey { color: #414141; }
.color-prefchem-green { color: #00B48C; }
.color-prefchem-blue { color: #00AAF0; }
/*.color-prefchem-gradient { background: linear-gradient(90deg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%); }*/
.color-prefchem-gradient-bg { background: linear-gradient(270.color-prefchem-gradient-textdeg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%); }
.color-prefchem-gradient-bg-90 { background: linear-gradient(90deg, rgba(0, 180, 140, 0.9) 0%, rgba(0, 170, 240, 0.9) 95.9%); }
.color-prefchem-gradient { color: linear-gradient(90deg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%); }
.color-prefchem-gradient-text {
  /* Fallback: Set a background color. */
  background-color: #414141;

  /* Create the gradient. */
  background-image: linear-gradient(270deg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%);

  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.text-prefchem-blue { color: #00AAF0; }
.text-prefchem-deepgrey { color: #414141; }

/*Extra spacing utility*/
.py-6 { padding: 4rem 0 4rem 0 !important; }

/*Buttons*/
.btn-prefchem-primary {
  background: linear-gradient(90deg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%);
  color: white;
  border-radius: 0;
  border: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1rem 2rem;
}

.navbar-light .navbar-toggler {
  border: 0;
}

/*Typography*/
h1, h2, h1 a, h2 a {
  font-family: 'FoundryMonoline', sans-serif;
}
/*h1, h1 a {*/
/*  font-weight: 700;*/
/*}*/
/*h2, h2 a {*/
/*  font-weight: 700;*/
/*}*/
h3, h4, h5, h6, h3 a {
  font-family: 'FoundryMonoline', sans-serif;
}
/*h3, h3 a {*/
/*  font-weight: normal;*/
/*  text-transform: uppercase;*/
/*  letter-spacing: 2px;*/
/*}*/
body, p, a, li {
  font-family: 'FoundryMonoline', sans-serif;
}

.small-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #414141;
}

.section-title-label {
  font-weight: bold;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.215em;
  text-transform: uppercase;
}

.category-label {
  font-weight: bold;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.215em;
  text-transform: uppercase;
}

.cta-text {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.02em;;
}

body {
  padding-top: 80px;
}

.display-3 {
  font-size: 2rem;
}

#toolbar-administration #toolbar-bar {
  z-index: 1031;
}

.toolbar-horizontal { padding-top: 242px !important; }

.toolbar-horizontal .fixed-top {
  z-index: 1030;
  top: 79px;
}

.navbar-collapse {
  /*height: 100vh;*/
  /*overflow: scroll;*/
}

.navbar {
  box-shadow: 0px 0px 16px 0 rgb(0 0 0 / 10%);
}

.navbar-nav {
  margin: 1rem .5rem;
}

.navbar-light .navbar-nav .show>.nav-link {
  font-weight: bold;
}

.navbar-nav .nav-item {
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid rgb(0 0 0 / 15%);
}

.footer-border {
  height: 4px;
  background: linear-gradient(270deg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%);
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1040;
}

/*Home*/
.carousel-item {
  height: 75vh;
}

.carousel-bg {
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel-item h1 {
  font-weight: bold;
  line-height: 110%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  width: 80%;
  font-size: 2rem;
}

.minibar-top {
  position: relative;
}

.minibar-top::before {
  content: '';
  background: linear-gradient(90deg, #00B48C 0%, #00AAF0 95.9%);
  position: absolute;
  top: -24px;
  width: 40px;
  height: 8px;
}

.home-feature {
  margin-top: -20px;
}

.home-feature .card {
  background: linear-gradient(270deg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%);
  border: 0;
  overflow: hidden;
}

.home-breaker {
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  background-size: cover;
}

.home-breaker .breaker-content {
  position: absolute;
  bottom: 0;
}

.home-breaker h2,
.home-careers h2{
  font-size: 2rem;
}

.glance-icon {
  height: 128px;
}

.glance-detail {
  font-size: 14px;
}

/*Nav*/
.navbar-nav .dropdown-item {
  padding: 0;
}

.navbar-nav .dropdown-item.active, .navbar-nav .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
}

.navbar-nav .dropdown-item.active a {
  color: #000;
}

.navbar-nav span.nav-link- {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #00B48C;
  text-transform: uppercase;
  padding: .5rem 1.5rem;
}

.navbar-nav .dropdown-menu {
  text-transform: none;

  border: none;
  margin-bottom: 0rem;
  background: rgb(0 0 0 / 6%);
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-radius: 0;
}

.navbar-nav .dropdown-menu a {
  color: #414141;;
  font-weight: 500;
  display: block;
  padding: .5rem 1.5rem;
  line-height: 100%;
  white-space: pre-line;
}

.navbar-nav .dropdown-menu a:hover,
.navbar-nav .dropdown-menu a:focus {
  color: #00AAF0;;
  text-decoration: none;
}

.navbar-nav .nav-link.dropdown-toggle::after {
   border: none !important;
 }

.navbar-nav .dropdown-item:hover {
  color: #000;
  text-decoration: none;
  background-color: transparent;
}

/*Footer*/
.site-footer {
  border-top: 2px solid rgba(0,0,0,0.05);
  margin-top: 5rem;
  font-size: 14px;
  background: #f3f3f3 !important;
}

.site-footer .content {
  color: #2b2b2b;
}

.site-footer__top h2 {
  color: #414141;
  padding: 0 15px;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.site-footer__top .nav {
  display: block;
}

.site-footer__top .block-menu {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
  width: 100%;
}

/*.site-footer__top .region {*/
/*  float: left;*/
/*  position: relative;*/
/*  width: 50%;*/
/*}*/

/*Page - global*/
.page-title {
  margin-bottom: 48px;
  margin-top: 64px;
  font-size: 32px;
}

.node__content img,
.field-content img,
.field__item img{
  max-width: 100%;
  height: auto;
}

figcaption {
  margin: 1rem 0;
  font-size: 90%;
  color: #6c757d;
}

.horizontal-border-1 {
  height: 1px ;
  width: 100%;
}

.horizontal-border-2 {
  height: 2px ;
  width: 100%;
}

.view-header .display-4 {
  font-size: 24px;
}

p.lead {
  position: relative;
  margin-bottom: 2rem;
  line-height: 2rem;
}
p.lead::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  height: 2px;
  width: 20px;
  background: linear-gradient(90deg, #70C5ED 0%, #00ADE4 49.48%, #00B18C 100%);
}

/* Video modal*/

.modal-open #videoModal.modal {
  background: black;
}

#videoModal .modal-body button.close {
  position: absolute;
  right: -50px;
  top: -50px;
  background: white;
  width: 40px;
  height: 40px;
  border-radius: 100%;
}

#videoModal.modal .modal-body {
  padding: 0;
}


.view-content h3 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/*Page - BOD & Management*/
.profile-name {
  font-size: 1rem;
  font-weight: bold;
  line-height: 100%;
  margin-bottom: 0.5rem;
}
.profile-designation {
  font-size: 14px;
  font-weight: bold;
}

.field--name-field-profile-photo img,
.views-field-field-profile-photo img{
  border-radius: 100%;
}

.node--type-management .field--name-field-profile-photo img,
.node--type-management .views-field-field-profile-photo img {
  max-width: 220px;
}

.field--name-field-designation {
  margin-bottom: 2rem;
}

/*Hide, but need to refactor to completely remove*/
.node--type-management #block-prefchem-ui-page-title {
  display: none;
}

.node--type-management .field--name-node-title h2 {
  font-size: 1.5rem;
}

/*Page - At a Glance*/
.glance-item {
  margin-bottom: 2rem;
}

.glance-item .glance-details {
  background: white;
  position: relative;
  padding: 2rem 2rem 2rem 0;
  width: 100%;
  display: flex;
  font-size: 14px;
}

.glance-item .glance-icon {
  height: 75px;
}

.glance-item .glance-text {
  margin-left: 1rem;
}

.glance-item .glance-details {
  background: white;
  padding: 2rem 2rem 2rem 0;
  width: 220px;
  display: block;
  font-size: 16px;
}

/*Page - Record*/
#carouselRecord .carousel-caption {
  top: 0;
  left: 0;
  bottom: auto;
  background: white;
  max-width: 350px;
  color: black;
  position: relative;
}

#carouselRecord .carousel-item {
  height: auto;
}

#carouselRecord .carousel-indicators li {
  background-color: #000;
}

#carouselRecord .carousel-control-next-icon {
  /*width: 40px;*/
  /*height: 40px;*/
}

.carousel-control-next, .carousel-control-prev {
  background-color: transparent;
  border: 8px solid transparent;
}

#carouselRecord .carousel-control-prev,
#carouselRecord .carousel-control-next{
  /*left: 0;*/
  height: 40px;
  top: -40px;
}

#carouselRecord .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

#carouselRecord .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}
#carouselRecord .record-indicators {
  /*margin-bottom: 3rem;*/
  /*justify-content: unset;*/
  /*margin-left: -3px;*/
  top: -32px;
  bottom: unset;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #01b08a!important;
}

.record-details {
  font-size: 14px;
}

.record-story {
  font-size: 14px;
  padding: 0.5rem 0.5rem 0.5rem 0;
}

.record-story p {
  margin-bottom: 0.5rem;
}

.record-interesting-facts p {
  font-size: 14px;
}

.record-indicators {

}

/*Search nav*/

#search-block-form .form-group {
  margin-bottom: 0;
}

#search-block-form button.form-submit {
  content-visibility: hidden;
  content: 'dfdf';
  background-image: url(../svg/search_black_24dp.svg);
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  width: 40px;
  background-color: white;
  border: 0;
}

/*Page - Cares*/
.stat-item img {
  height: 80px;
  margin: 1rem 0 0.5rem 0;
}

.stat-item .stat {
  font-size: 3rem;
  color: #00B48C;
  line-height: 100%;
  margin-bottom: 0.5rem;
}

.stat-item .stat-label {
  line-height: 100%;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 2px;
  color: #00AAF0;
}

.stat-item .card {
  padding: 2rem;
  margin-bottom: 2rem;
}

/*Page - Refinery*/
.stat-big {
  font-size: 3rem;
  line-height: 3rem;
}

.stat-medium {
  font-size: 2rem;
}

.card-content-bottom {
  bottom: 0;
  position: absolute;
}

/*Page - Feedstock & Products*/
.infographic-container {
  /*overflow: scroll;*/
  padding: 3rem;
}

.node__content img.infographic-image-1000, .field-content img.infographic-image-1000, .field__item img.infographic-image-1000 {
  max-width: 1000px;
}

/*Page - Achievements (updated to Milestones)*/
.page-view-achievements {}

.page-view-achievements .view-content {
  position: relative;
}

.page-view-achievements .view-content h3 {
  display: block;
  width: 100%;
  text-align: center;
  background: white;
  z-index: 1;
  padding: 2rem;
}

.page-view-achievements .view-content::before {
  content: '';
  width: 4px;
  height: 100%;
  background: #414141;
  background: #dedede;
  position: absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
}

.page-view-achievements .view-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 4px;
  background: #414141;
  background: #dedede;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.page-view-achievements .view-content .even {
  margin-right: 50%;
}

.page-view-achievements .view-content .odd {
  margin-left: 50%;
}

.page-view-achievements .view-content .odd .milestone-photo {
  -ms-flex-order: 0;
  order: 0;
}

.page-view-achievements .view-content .milestone-details::after {
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  right: -10px;
  top: -10px;
  background: linear-gradient(90deg, #00B48C 0%, #00AAF0 95.9%);
  border: 4px solid #FFFFFF;
  border-radius: 100%;
}

.page-view-achievements .view-content .odd .milestone-details::after {
  left: -10px;
}

.even .milestone-details .horizontal-border-2 {
  margin-left: 0rem;
  width: auto;
}

.odd .milestone-details .horizontal-border-2 {
  margin-right: 0rem;
  width: auto;
}

.milestone-details-day {
  font-size: 18px;
  line-height: 100%;
  font-weight: 500;
  margin-bottom: -2px;
}

.milestone-details-month {
  font-size: 12px;
  line-height: 100%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.milestone-details-year {
  font-size: 12px;
  line-height: 100%;
  font-weight: 500;
}

.milestone-details-body {
  padding: 0 2rem;
}

.milestone-details-text {
  font-size: 14px;
  margin: 1rem 0;
  font-weight: 400;
  line-height: 125%;
}

.even .milestone-photo {
  padding-right: 2px;
}

.odd .milestone-photo {
  padding-left: 2px;
}

/*Page - Career */
.overlay-info-box {
  width: 100%;
  position: relative;
}

/*--- Fixed Video Background iOS/Mobile Style--*/
.video-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#video {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  /*z-index: -1000;*/
}
video#bg-vid {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /*z-index: -100;*/
  transform: translateX(-50%) translateY(-50%);
  background: url('') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.video-header {
  position: relative;
  height: 50vh;
}

.video-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  background: linear-gradient(9deg, rgba(0, 56, 44, 0.9) 0%, rgba(0, 170, 240, 0.2) 95.9%);
  z-index: 1;
}
.highlight-text {
  display: inline;
  background: white;
  box-shadow: 3px 0px 0 3px white;
}

.lottie-container {
  padding: 0 3rem;
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  /*Extra spacing utility*/
  .p-sm-6 { padding: 4rem !important; }
  .mb-sm-6 { margin-bottom: 4rem !important; }

  .node--type-management .field--name-field-profile-photo img,
  .node--type-management .views-field-field-profile-photo img{
    max-width: 100%;
  }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  body {
    padding-top: 163px;
  }

  .navbar-brand {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .navbar-brand img { width: 179px; }

  .footer-border {
    height: 21px;
  }

  .carousel-item {
    height: 700px;
  }

  .carousel-caption {
    bottom: 112px;
  }

  .carousel-indicators {
    margin-bottom: 3rem;
  }

  .carousel-item h1 {
    font-weight: bold;
    font-size: 64px;
    line-height: 110%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    position: relative;
    width: 50%;
  }

  .path-frontpage #video {
    top: 140px;
  }

  .home-breaker h2,
  .home-careers h2 {
    font-size: 3rem;
  }

  .glance-detail {
    font-size: 1rem;
  }

  .page-title {
    margin-top: 96px;
    margin-bottom: 48px;
    font-size:48px;
  }

  .display-3 {
    font-size: 4rem;
  }

  .highlight-text {
    display: block;
    background: none;
    box-shadow: none;
  }

  .easy-reading {
    max-width: 960px;
  }

  .profile-name {
    font-size: 18px;
  }

  /*Glance page*/
  .glance-item {
    position: relative;
    margin-bottom: 4rem;
  }

  .glance-item .glance-icon {
    height: 96px;
    width: 100%;
  }

  .glance-item .glance-text {
    margin-left: 0;
  }

  /*Page - Record*/
  #carouselRecord .carousel-caption {
    position: absolute;
    padding: 0 1rem 1rem 0;

  }

  #carouselRecord .carousel-inner {
    overflow: visible;
  }

  #carouselRecord .record-title {
    position: relative;
  }

  #carouselRecord .record-title .record-number {
    position: absolute;
    left: -2rem;
    top: 0;

    border-bottom: 2px solid black;
    font-size: 16px;
    font-weight: 400;
  }

  .record-indicators {
    /*margin-bottom: 3rem;*/
    /*justify-content: unset;*/
    /*margin-left: -3px;*/
    top: -40px;
    bottom: unset;
  }

  /*#carouselRecord .carousel-control-prev,*/
  /*#carouselRecord .carousel-control-next{*/
  /*  left: 0;*/
  /*  height: 40px;*/
  /*  top: -40px;*/
  /*}*/

  #carouselRecord .carousel-control-prev {
    width: 40px;
    left: -40px;
  }

    /*Page - Feedstock & Products*/
    .node__content img.infographic-image-1000, .field-content img.infographic-image-1000, .field__item img.infographic-image-1000 {
      max-width: 100%;
    }

  .node__content img, .field-content img, .field__item img

  /*Page - Milestones*/
  .view-header .display-4 {
    font-size: 36px;
  }

  .even .milestone-photo {
    padding-right: 0;
  }

  .odd .milestone-photo {
    padding-left: 0px;
  }

  .milestone-details-text {
    font-size: 24px;
  }

  .milestone-details-day {
    font-size: 24px;
  }

  .page-view-achievements .view-content .odd .milestone-photo {
    -ms-flex-order: 13;
    order: 13;
  }

  .even .milestone-details .horizontal-border-2 {
    margin-left: 2rem;
    width: auto;
  }

  .odd .milestone-details .horizontal-border-2 {
    margin-right: 2rem;
    width: auto;
  }

  /*Page - Career */
  .overlay-info-box {
    width: 430px;
    position: absolute;
  }
}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .navbar-nav {
    margin: 0;
  }

  .navbar-nav .nav-item {
    border-bottom: 0;
  }

  .navbar-light .navbar-nav .show>.nav-link {
    font-weight: 500;
  }

  li.nav-item.menu-item--expanded.active.dropdown:after {
    content: '';
    background: linear-gradient(
      90deg
      , #00B48C 0%, #00AAF0 95.9%);
    position: absolute;
    top: 0px;
    width: 100%;
    height: 4px;
  }

  .glance-item .glance-details {
    background: white;
    position: absolute;
    bottom: 0;
    padding: 2rem 2rem 2rem 0;
    width: 220px;
    display: block;
    font-size: 18px;
    /*margin-left: -2rem;*/
    /*box-shadow: 0 0 16px 0 #00000021;*/
  }

  .navbar-nav .dropdown-menu {
    border: 1px solid rgba(0,0,0,.15);
    margin-bottom: 0rem;
    background: #fff;
    padding: .5rem 0;
    border-radius: .25rem;
    min-width: 12rem;
  }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .navbar-brand {
    margin-left: 2rem;
  }
}