/* Read me
This site uses boostrap therefore this css use the bootstrap logic, min-width for media breakpoints; 
sm 576px, md 768px, lg 992px, xl 1400px, xxl 2000px. 
*/

/* Custom CSS */

@font-face {
    font-family: "AvenirNext-Regular";
    src: url(fonts/AvenirNext-Regular.eot);
    src: url(fonts/AvenirNext-Regular.woff) format("woff"), url(fonts/AvenirNext-Regular.ttf) format("truetype"), url(fonts/AvenirNext-Regular) format("svg")
}

@font-face {
    font-family: "AvenirNext-DemiBold";
    src: url(fonts/AvenirNext-DemiBold.eot);
    src: url(fonts/AvenirNext-DemiBold.woff) format("woff"), url(fonts/AvenirNext-DemiBold) format("truetype"), url(fonts/AvenirNext-DemiBold) format("svg")
}

@font-face {
    font-family: "AvenirNext-Bold";
    src: url(fonts/AvenirNext-Bold.eot);
    src: url(fonts/AvenirNext-Bold.eot?#iefix) format("eot"), url(fonts/AvenirNext-Bold.woff) format("woff"), url(fonts/AvenirNext-Bold.ttf) format("truetype"), url(fonts/AvenirNext-Bold) format("svg")
}

:root {
  --syn-font-family:  "AvenirNext-Regular", "Arial", sans-serif;
  --syn-body-text-color: #000000;
  --syn-dark-gray: #444;
  --syn-blue: #005397;    /* button text */
  --syn-dark-blue: #001C32;  /* button hover text */
  --syn-light-blue: #F2F9FF;   /* button normal bg */
  --syn-blue-90:#E5F3FF;  /* button hover bg */
  --syn-red: #E72F27;
  --syn-light-red: #EC5952;  /* button normal bg */
  --syn-purple: #2F0466;
  --syn-section-bg:linear-gradient(180deg, #E5F3FF 0%, #FDEAE9 100%);
  --syn-footer-navbar-link-color:#190A4D;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--syn-font-family);
  font-size:16px;
  line-height:24px;
  color:var(--syn-body-text-color);
}


/* TYPOGRAPHY */ 
h1, .h1 {font-size:24px; line-height:32px; color:var(--syn-purple); font-weight:normal; font-family: "AvenirNext-Bold" , "Arial", sans-serif; }
h2 {font-size:22px; line-height:28px;}
h3 {font-size:21px; line-height:26px;}
h4  {font-size:20px; line-height:26px; font-family: "AvenirNext-DemiBold" , Arial, Helvetica, sans-serif;}
h5, .h5 {font-size:18px; line-height:24px;}
h6, .h6 {font-size:16px; line-height:20px;}
section .h2 {color:var(--syn-purple);}
a {text-decoration:none;}
.small {font-size:16px; line-height:20px;}
.smallest {font-size:14px;line-height:19px; }

a.link-readmore, a.link  {
  display: inline-block;
  position: relative;
}

a.link-readmore {
  color:var(--syn-red);
}

a.link-readmore:hover:after, a.link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

a.link-readmore::after, a.link::after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

a.link-readmore::after {
  background-color: var(--syn-red);
}

a.link::after {
  background-color: #FFF;
}

.bi {
  display: inline-block;
  vertical-align: -.125em;
}


/* SPACING */

section #hero-section-container {
  padding-top: 10px !important;
  padding-bottom: 30px !important;
}

/* LISTS */
ul.content-list , ol.content-list { margin:10px 0px;}
ul.content-list li, ol.content-list li {margin-bottom:6px;}
ol ol, ol ul, ul ol, ul ul { margin-bottom: 1rem; }

/* TABLE */
table td {
  vertical-align: top;
}
/* NAVBAR */
#top-main-navbar {
  padding-top: 8px;
  padding-bottom: 16px;
}

#top-main-navbar .navbar-nav .nav-link {
  padding-right:20px;
  padding-left:20px;
  font-size:14px;
  line-height:20px;
}

#top-main-navbar .navbar-nav .nav-link, #footer-nav .nav-link
{
  background: transparent !important;
  color:var(--syn-dark-gray);
  display: inline-block;
  position: relative;
}
#top-main-navbar .navbar-nav .show > .nav-link, #top-main-navbar .navbar-nav .nav-link.active,
#footer-nav .nav-link.active, #footer-nav .navbar-nav .show > .nav-link
{
  color: var(--syn-red);
}

#top-main-navbar .navbar-nav .nav-link:hover:after, #footer-nav .nav-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#top-main-navbar .navbar-nav .nav-link::after, #footer-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

#top-main-navbar .navbar-nav .nav-link:hover, #footer-nav .nav-link:hover ,
#top-main-navbar .navbar-nav .nav-link::after, #footer-nav .nav-link::after {
  color:var(--syn-blue);
  background:var(--syn-blue);
}

.bg-light-blue {background-color:var(--syn-blue-90);}

/* SECTION STYLING */

.bg-pink-purple {background: var(--syn-section-bg);}
.hero-section-curve {
    width:102vw;
    height:60px;
    margin: -10px 0 30px 0px;
    border-radius:0 0 98% 0;
    background-color: #FFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-section-curve-inverted {
    width:102vw;
    height:60px;
    margin: -10px 0 0 0px;
    border-radius:98% 0 0 0;
    background-color: #FFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.rounded-32 {border-radius:32px;}

/* BUTTONS */
.btn {border-radius:8px; border:0px; padding:6px 20px; text-transform: uppercase;}
.btn-primary {background-color:var(--syn-light-red); color:#FFF;}
.btn-primary:hover {background-color:var(--syn-red);}
.btn-light {color:var(--syn-blue); background:var(--syn-light-blue);}
.btn-light:hover, .btn-light:active {background:var(--syn-blue-90); color:var(--syn-dark-blue); }

/* HERO SECTION BANNER */
#hero-section .card {
  background-color:transparent;
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto; border-radius: 152px 0px;
  background-size: cover; border:0px;
  height: 350px;
  background-repeat:no-repeat;
  background-position: center;
  filter: none;
}

#hero-section .card-img-overlay h1, #hero-section .card-img-overlay h2, #hero-section .card-img-overlay .hero-middle {
  position: relative;
  top: 48%;
  transform: translateY(-50%);
  color:var(--syn-light-blue);
  font-weight:900;
}

#hero-section .card-img-overlay .hero-middle {
  top:50%;
}

#hero-section .card h2, #hero-section .card .h2 {font-family: "AvenirNext-Bold" , "Arial", sans-serif; font-weight:normal;}

.drop-shadow {
  filter: none;
}

#hero-section .text-white a {
  color:#FFF;
}


/* HOMEPAGE */

#home-hero-cols {
  max-width:1520px;
}

section #home-hero-cols {
  padding-bottom: 64px;
}

#home-hero-text p {
  padding-top: 16px;
}

#home-hero-cols .card {
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: cover;
  border:0px;
  height: 400px;
  background-position: center;
  background-repeat:no-repeat;
}

#home-hero-cols .col-lg-6 {
  padding: 0px;
}

#home-hero-cols .col-lg-6:nth-child(1) {
  margin-top: 16px;
}

#home-hero-cols .col-lg-6:nth-child(2) {
  margin-top: 24px;
}

#home-hero-cols .col-lg-6:nth-child(1) .card {  
  border-radius: 128px 0px 128px 0px;
}

#home-hero-cols .col-lg-6:nth-child(2) .card { 
  border-radius: 128px 0px 128px 0px;
}

#home-hero-cols .col-lg-6 p:first-child {
  text-align: center;
  margin-bottom: 32px;
}

#home-hero-cols .col-lg-6 .card-img-overlay {
  width: 100%;
  margin: 0 auto;
  padding: 32px 8%;
}

#home-hero-cols .card-img-overlay .btn {
  bottom: 30px;
  transform: translateX(-50%);
  left: 50%;
  position: absolute !important;
}

#homepage-careers-section .row {
  background: linear-gradient(270deg, #FF4B40 17.85%, #49069F 95.99%);
  border-radius:40px 0px 40px 0px;
}
#homepage-careers-section .row .col-7 {padding-right:10%; }
#homepage-careers-section .row .col {
  border-radius:40px 0px 40px 0px;
  overflow:hidden;
}
#homepage-careers-section .row .col img {max-width:unset;
  border-top-left-radius: 40px; border-bottom-right-radius: 40px;}

#homepage-careers-section .row .col-lg-8 {color:#FFF;padding-top:20px; font-size:18px;}

#homepage-aboutus-section .card {
  filter: none !important;
  padding-bottom: 16px;
}

#homepage-aboutus-section .card h5 {
  bottom: 24px;
}


/* HOME PAGE CUSTOMER LOGOS ANIMATION */

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-95px * 7));
    transform: translateX(calc(-95px * 7));
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-95px * 7));
    transform: translateX(calc(-95px * 7));
  }
}

.slider {
  height: 220px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 30px;
  z-index: 2;
}

.slider::after {right: 0; top: 0; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg);}

.slider::before {left: 0; top: 0;}

.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
  animation: scroll 40s linear infinite;
  display: block;
  width: calc(95px * 14);
}

.slider .slide {
  height: 100px;
  width: 95px;
  padding: 20px;
  float: left;
}

.slider .slide-track img {width:90px;}

/*CAREERS PAGE */
section #hero-section-container {
  padding-bottom:0px !important;
}

#careers-section-rows { 
  padding-left: 8px;
  padding-right: 8px;
}

/* ABOUT US PAGE */

#aboutus-heading-section .row .col {
  max-width: 992px;
  transform: translateX(-50%);
  left: 50%;
  position: relative;
}

#aboutus-heading-section h6 {
  padding-bottom: 16px;
}

#aboutus-products-section .row .col-md-5 {
  order: 2;
  text-align:left;
}

#aboutus-products-section h4 {
  color:var(--syn-blue);
  padding-bottom: 16px;
}

/* CONTACT US PAGE */
#contactus-page #hero-section .card-text:last-child {
  transform: translate(-50%,-30%) !important;
  width:100%;
}

#contactus-page #hero-section .card-img-overlay h2, #hero-section .card-img-overlay .hero-middle {
  top:25%;
  transform: translateY(-25%);
}

.alt-text-image-rows .row:nth-child(even) .col-sm-7 {
  order: 2;
  text-align: left;
}

.image-text-2col-rows {padding-left:4% !important; padding-right:4% !important;}

.image-text-2col-rows .row .col-md-6:nth-child(2) img {margin-top: 0px;}

/* PRIVACY POLICY PAGE */
#privacy-policy-page .row p {font-size:18px; line-height:26px;}
#privacy-policy-page #privacypolicy-section .row a {color:var(--syn-body-text-color);}
#privacy-policy-page #privacypolicy-content h3 { margin-top:30px; margin-bottom:30px;}

table.privacy {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #00364a;
  border-style: solid;
  color: #000000;
}

table.privacy td, table.privacy th {
  border-width: 2px;
  border-color: #00364a;
  border-style: solid;
  padding: 3px;
}

table.privacy thead {
  background-color: #ebebeb;
}

.indent {
  display: block;
  margin-left: 10vw
}

.top-button {
  position: fixed;
  right: 0;
  bottom: 20%;
  text-align: right;
  z-index: 100;
}

.top-button a button{
  opacity: 0%;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2)
}
.top-button.show a button{
  opacity: 100%;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.address { display: flex; column-gap: 10px; }

/* DO NOT SELL */
#donotsell-page h3 { margin-top:30px; margin-bottom:30px;}

/* PERSONAL DATA */
#personaldata-page h3 { margin-top:30px; margin-bottom:30px;}

/* 404 Page */
a.sitemap-link {color: var(--syn-body-text-color);}
a.sitemap-link:hover {text-decoration : underline;}

/* FOOTER */

#footer-nav .nav-item {width:100%; text-align:right;}

footer .container {padding:20px !important;}

footer .container .row:last-of-type {padding-top: 176px !important;}

footer, #footer-nav .nav-link {font-size:14px; line-height:20px;}

footer .navbar-brand img {max-width:100px; margin-top:5px;}

#social-nav {
  justify-content:flex-end;
  margin-bottom:10px;
}

#social-nav .nav-link {
  font-size:20px;
  color:#2a2f3a;
  padding: .5rem .7rem;
}

/* CONSENT BANNER */
 
#consent-banner {
  position: fixed;
  bottom: 0px;
  z-index: 100000;
}

.trustarc-client-logo {padding:0px !important;}

#consent-banner #truste-consent-track {
background-color:#efefef;
color: #5f6062;
}

#truste-header-text {
font-size:18px !important;
font-weight:bold;
margin-bottom:10px;
}

.trustarc-banner-footer a {font-size:16px !important;}
#truste-consent-buttons {width:230px;}

#truste-consent-buttons button {
height:30px !important;
font-size:16px !important;
}
.trustarc-client-logo {display:none;}
.trustarc-banner-details {padding:20px !important;}

#truste-consent-buttons #truste-show-consent {display:none;}
#truste-consent-text {font-size:14px;}
#truste-header-text {font-size:18px; margin-bottom:0px;}


/* **************************************************
                RESPONSIVE QUERIES
************************************************** */

/* >>>>>>>>>>>>> sm <<<<<<<<<<<<< */
@media only screen and (min-width: 576px) {

  #home-hero-cols .card { height:480px; }

  #hero-section .card { height:400px; }

  .alt-text-image-rows .row:nth-child(even) .col-sm-7 {
    order: 0;
    text-align: left;
  }
}


/* >>>>>>>>>>>>> md <<<<<<<<<<<<< */

@media only screen and (min-width: 768px) {

  #top-main-navbar {
    padding-top: 8px;
    padding-bottom: 24px;
  }

  body {
    font-size:18px;
    line-height:24px;
  }

  .hero-section-curve {height:100px;}

  .hero-section-curve-inverted {height:100px;}

  #home-hero-cols .col-lg-6 .card-img-overlay {padding: 40px 16% 56px 16%;}

  #home-hero-cols .col-lg-6 p:first-child {margin-bottom: 40px;}

  /* slider stuff */

  @-webkit-keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-150px * 17));
      transform: translateX(calc(-150px * 17));
    }
  }
  @keyframes scroll {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(calc(-150px * 17));
      transform: translateX(calc(-150px * 17));
    }
  }
  
  .slider {height: 100px;}
  
  .slider .slide-track {
    display: flex;
    width: calc(150px * 17);
  }
  .slider .slide {
    height: 100px;
    width: 150px;
  }

  .slider .slide-track img {width: auto;}

  #footer-nav .nav-item {width:auto; text-align: center;}

  #social-nav {
    justify-content:flex-start;
    margin-bottom:10px;
  }

  /* ABOUT US PAGE */
  #aboutus-products-section .row .col-md-5 {order: 0;}

  /* CONTACT US PAGE */
  #contactus-page #hero-section .card-img-overlay h2, #hero-section .card-img-overlay .hero-middle {
    top:50%;
    transform: translateY(-50%);
  }

  .image-text-2col-rows .row {padding-top:40px !important; padding-bottom:40px !important;}

  .image-text-2col-rows .row .col-md-6:nth-child(2) img {margin-top:-104px;}
}

/* >>>>>>>>>>>>> lg <<<<<<<<<<<<< */

@media (min-width: 992px) {

  /* TYPOGRAPHY */ 
  h1, .h1 {font-size:36px; line-height:48px;}
  h2, .h2 {font-size:32px; line-height:40px;}
  h3, .h3 {font-size:24px; line-height:34px;}
  h4, .h4 {font-size:22px; line-height:32px;}
  h5, .h5 {font-size:20px; line-height:30px;}
  h6, .h6 {font-size:18px; line-height:24px;}

  #home-hero-text p {
    width: 832px;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
  }

  section #home-hero-cols {
    padding-bottom: 72px;
  }

  #home-hero-cols .col-lg-6 {
    padding: 0 8px;
  }

  #home-hero-cols .col-lg-6:nth-child(1) {
    margin-top: 72px;
  }

  #home-hero-cols .col-lg-6:nth-child(1) .card {  
    border-radius: 136px 0px 56px 0px;
  }

  #home-hero-cols .col-lg-6:nth-child(2) .card { 
    border-radius: 56px 0px 136px 0px;
  }

  #hero-section .card {
    filter: drop-shadow(0px 16px 10px rgba(0, 0, 0, 0.24)) drop-shadow(16px 16px 56px rgba(0, 0, 0, 0.16));
  }

  .drop-shadow {
    filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.3)) drop-shadow(16px 24px 56px rgba(0, 0, 0, 0.16));
  }

  footer .container {padding:auto;}

  footer .container .row:last-of-type {padding-top: 104px !important;}

  /* CONTACT US PAGE */
  .image-text-2col-rows .row .col-md-6:nth-child(2) img {margin-top:-144px;}
}

/* >>>>>>>>>>>>> xl <<<<<<<<<<<<< */

@media only screen and (min-width: 1400px) {
  
  .container {max-width: 1180px}

  #home-hero-text p {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #hero-section .card {height:456px;}
}

/* >>>>>>>>>>>>> xxl <<<<<<<<<<<<< */

@media only screen and (min-width: 2000px) {

  #hero-section .card {height:512px;}
}