* {
  margin: 0;
  padding: 0;
  font-family: 'Pontano Sans', sans-serif, 'Roboto', sans-serif, Verdana,
    'Geneva', sans-serif;
  vertical-align: baseline;
}
body {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  width: 100%;
  overflow-x: hidden;
}

/* ------------------- Section Titles ------------- */
.p-20 {
  padding: 20px !important;
}
.mt-0 {
  margin-top: 0px !important;
}
.mt-5 {
  margin-top: 5px !important;
}
.mt-10 {
  margin-top: 10px !important;
}
.mt-15 {
  margin-top: 15px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.mt-25 {
  margin-top: 25px !important;
}
.mt-30 {
  margin-top: 30px !important;
}
.mt-40 {
  margin-top: 40px !important;
}
.mt-50 {
  margin-top: 50px !important;
}
.mt-60 {
  margin-top: 60px !important;
}
.mt-80 {
  margin-top: 80px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}
.mb-5 {
  margin-bottom: 5px !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mb-15 {
  margin-bottom: 15px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mb-25 {
  margin-bottom: 25px !important;
}
.mb-30 {
  margin-bottom: 30px !important;
}
.mb-40 {
  margin-bottom: 40px !important;
}
.mb-50 {
  margin-bottom: 50px !important;
}
#mb-50 {
  margin-bottom: 50px !important;
}
.mb-60 {
  margin-bottom: 60px !important;
}
.mb-80 {
  margin-bottom: 80px !important;
}
.pt-0 {
  padding-top: 0px !important;
}
.pt-5 {
  padding-top: 5px !important;
}
.pt-10 {
  padding-top: 10px !important;
}
.pt-15 {
  padding-top: 15px !important;
}
.pt-20 {
  padding-top: 20px !important;
}
.pt-25 {
  padding-top: 25px !important;
}
.pt-30 {
  padding-top: 30px !important;
}
.pt-40 {
  padding-top: 40px !important;
}
.pt-50 {
  padding-top: 50px !important;
}
.pt-60 {
  padding-top: 60px !important;
}
.pt-80 {
  padding-top: 80px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}
.pb-5 {
  padding-bottom: 5px !important;
}
.pb-10 {
  padding-bottom: 10px !important;
}
.pb-15 {
  padding-bottom: 15px !important;
}
.pb-20 {
  padding-bottom: 20px !important;
}
.pb-25 {
  padding-bottom: 25px !important;
}
.pb-30 {
  padding-bottom: 30px !important;
}
.pb-40 {
  padding-bottom: 40px !important;
}
.pb-50 {
  padding-bottom: 50px !important;
}
.pb-60 {
  padding-bottom: 60px !important;
}
.pb-80 {
  padding-bottom: 80px !important;
}
.pl-50 {
  padding-left: 50px !important;
}

body h1 {
  font-size: 32px;
  font-weight: bolder;
  letter-spacing: 0.5px;
}
body h2 {
  padding: 0.5em;
  font-weight: bold;
  letter-spacing: 0.3px;
  margin-bottom: 1em;
}

/*--------------------------- NAV BAR SECTION ---------------------------------------*/

#nav-bar {
  border: none;
  position: sticky;
  top: 0;
  z-index: 4;
  width: 100%;
}

.navbar {
  background: linear-gradient(
    to right,
    rgba(0, 42, 191, 0.5),
    rgba(0, 214, 166, 0.5)
  );
  background-repeat: no-repeat;
  position: relative;
}

.navbar-brand img {
  max-width: 120px;
  max-height: 120px;
}

.burgerbar div {
  height: 5px;
  background: #fff;
  margin: 5px 0;
  border-radius: 24px;
  transition: 0.3s;
}
.burgerbar {
  display: inline;
  margin: 1em 0 1em 80% auto;
  width: 50px;
}
.one {
  width: 20px;
}
.two {
  width: 30px;
}
.three {
  width: 40px;
}
.burgerbar:hover div {
  width: 50px;
}

.nav-item {
  padding: 0.8em;
  display: inline-block;
}

.nav-link {
  /*    Website section links      */

  text-decoration: none;
  display: inline-block;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: lighter;
  position: relative;
  padding: 0 0 5px 0 !important;
}
.nav-link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.3s;
}
.nav-link:hover::after {
  width: 100%;
  transition: width 0.3s;
}

.nav-link-secondary {
  display: block;
  position: relative;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: lighter;
  text-align: left;
  text-indent: 12px;
}

ul ul {
  position: absolute;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li:hover ul {
  display: block;
}

.navbar-toggler {
  border: 0 !important;
  outline: none !important;
}

/* ------------------------- BANNER - FRONT PAGE SECTION ------------------ */

#banner {
  color: #fff;
  background-size: cover;
  background-position: center;
  height: 100vh;
}
.dropdown-toggle {
  background: transparent;
  border: none;
}

/* #banner .container {
  padding: 3em;
} */

/*
.video-overlay{
  position: relative;
  object-position: center;
  object-fit: cover;
  overflow: hidden;
}

.video-overlay video{
  width: 100%;
  object-fit: cover;
  display: block;
}

.video-overlay:before {
  content: '';
  position: absolute;
  background: linear-gradient(to right, rgba(0, 42, 191, 0.5), rgba(0, 214, 166, 0.5));
  border-radius: 5px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*
@media (min-aspect-ratio: 16/9)
{
   .videobackground video{
      width: 100%;
      height: auto;
    }
}
@media (min-aspect-ratio: 16/9)
{
  .videobackground video{
      width: auto;
      height: 100%;
    }
}
*/

/* #banner .color-overlay {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, #002abf, #00d6a6);
  background-size: 100% 70%;
  background-position: center;
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
} */

#banner .color-overlay {
  width: 100%;
  height: 91%;
  background: linear-gradient(to right, #002abf, #00d6a6);
  background-size: 100% 70%;
  background-position: center;
  opacity: 0.5;
  position: absolute;
  z-index: 0;
  top: 79px;
}

#banner video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100%;
  height: 99%;
  object-fit: cover;
}

.ZenImg {
  position: absolute;
  right: 0%;
  left: 0%;
  margin: 0 auto;
  top: 25%;
  width: 250px;
  height: 250px;
  transform: rotate(-75deg);

  overflow: hidden;
  -webkit-animation: spin 60s linear infinite;
  -moz-animation: spin 60s linear infinite;
  animation: spin 60s linear infinite;
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.bannertext {
  margin-top: 12%;
}

.bannertext-firstline {
  word-spacing: normal;
  color: #fff;
}

.bannertext-secondline h3 {
  word-spacing: normal;
  color: #fff;
  font-weight: bold;
  margin-top: 30%;
}

.bannertext h3 {
  margin-top: 1em;
  font-size: 24px;
  letter-spacing: 0.3px;
}

.upper-waves {
  width: 100%;
  transform: rotate(180deg);
}

.scroll-btn {
  bottom: 15%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #fff;
  padding: 4px 6px 10px;
  border-radius: 30px;
}
.scroll-bar span {
  border: 2px solid #fff;
  font-size: 10px;
  border-radius: 30px;
}
.scroll-bar {
  animation: move 1s infinite alternate;
}
@keyframes move {
  0% {
    transform: translateY();
  }
  100% {
    transform: translateY(10px);
  }
}

/*------------------------------- ABOUT US SECTION -------------------------------*/
#about {
}

.about-us {
  position: relative;
  padding-top: 15em;
}

/* First colorful version */

/*
.bannertext-first{
  padding: 2em;
  letter-spacing: 0.5px;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.3em;
  color: hsla(180,100%,25%,0.8);
  background: -webkit-linear-gradient(right, rgba(0, 214, 166, 0.5), rgba(245,245,245,0.5) 60%);
  border-top-left-radius: 35%;
  border-bottom-left-radius: 35%;
  border-top-right-radius: 15%;
  border-bottom-right-radius: 15%;
  box-shadow: 0 1px 6px rgba(0.12), 0 1px 4px rgba(0.24);
  border-right: none;
}

/*
.bannertext-second{
  font-weight: bolder;
  font-size: 1.5em;
  line-height: 1.2em;
  color: hsla(180,100%,25%,0.2);
  padding: 3em;
  border-top-right-radius: 35%;
  border-bottom-right-radius: 35%;
  border-top-left-radius: 10%;
  border-bottom-left-radius: 10%;
  background: -webkit-linear-gradient(right, rgba(0, 42, 191, 0.5), rgba(0, 214, 166, 0.5));
  background: -o-linear-gradient(right, rgba(0, 42, 191, 0.5), rgba(0, 214, 166, 0.5));
  background: linear-gradient(to left, rgba(0, 42, 191, 0.5), rgba(0, 214, 166, 0.5));
  box-shadow: 0 1px 6px rgba(0.12), 0 1px 4px rgba(0.24);
  border-left: none;
}
*/
#about .row {
  padding: 0.5em;
}

#about .firstrow {
  padding-bottom: 1em;
}

.bannertext-colorquote {
  /* font-style: bold; */
  font-size: 1.5em;
  content: attr(data-shadow);
  /* position: absolute; */
  top: 0.06em;
  left: 0.2em;
  z-index: 0;
  /* text-shadow: 0; */
  background-image: linear-gradient(
    45deg,
    transparent 15%,
    rgb(53, 109, 109) 45%,
    hsla(180, 100%, 25%, 1) 55%,
    transparent 0
  );
  background-size: 0.05em 0.05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: right;
}

/* OLD ABOUT PAGE CONTENT */
/*
.bannertext-first{
margin: 0 auto;
font-size: 1.4em;
text-align: center;
padding: 2em;
border: dotted hsla(180,100%,25%,1) 1px;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
text-align: left;
}
*/
.bannertext-centralquote {
  margin: 0 auto;
  font-size: 1.4em;
  text-align: center;
  padding: 2em;
  border: dotted hsla(180, 100%, 25%, 1) 1px;
  border-bottom-left-radius: 50%;
  border-top-right-radius: 50%;
}

.bannertext-centralquote p {
  width: 80%;
  margin: 0 auto;
}

.bannertext-centralquote span {
  font-weight: bolder;
}
/*
  background: rgb(245,245,245);
  background: -webkit-linear-gradient(bottom, rgba(245,245,245,1) 0%, rgba(185,237,222,1) 100%);
  background: -o-linear-gradient(bottom, rgba(245,245,245,1) 0%, rgba(185,237,222,1) 100%);
  background: linear-gradient(to top, rgba(245,245,245,1) 0%, rgba(185,237,222,1) 100%);

  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);

  background: repeating-radial-gradient(
  circle,
  rgb(245,245,245),
  rgba(185,237,222,1) 5px,
  white 5px,
  white 10px
);
*/

.certificates {
  margin: 0 auto;
  padding: 2em;
}

.certificate-title {
  font-style: italic;
  padding: 20px 0;
}

.certificate-list {
  padding: 1em;
}

.certificate-image {
  width: 15%;
  padding: 1em;
}

@media only screen and (max-width: 768px) {
  .certificate-image {
    width: 45%;
    height: auto;
  }
}

/*------------------------------- MATERIALS SECTION -------------------------------*/

#materials {
  margin-top: 3em;
}

.material-thumbnails h3:nth-child(1) {
  font-weight: bold;
  margin-bottom: 1em;
  border-left: 3px solid #29a9c5;
  padding-left: 0.5em;
}
.material-thumbnails h3:nth-child(even) {
  font-weight: bold;
  margin-bottom: 1em;
  border-left: 3px solid #8cc05d;
  padding-left: 0.5em;
}
#materials h4 {
  font-weight: bolder;
}

#materials img {
  width: calc(95%);
  opacity: 0.7;
  transform: translate3d(0, -20px, 0) scale(1.12);
  /* transform: rotate(90deg);   */
  transition: all 0.5s;
  border-radius: 25%;
}

.material-description,
.insights-description {
  font-size: 20px;
  margin-bottom: 3em;
}
.material-description p,
.insights-description p {
  font-size: 1em;
  letter-spacing: normal;
  width: 90%;
  margin: 0 auto;
}

.material-box {
  margin-bottom: 2em;
}

.thumbnail {
  position: relative;
  float: left;
  width: 40%;
  min-height: 40%;
  margin-top: 2em;
  margin-left: 5%;
}
.thumbnailtext {
  float: right;
  width: 45%;
  left: 55%;
  font-size: 12px;
  margin-right: 5%;
}

.origin-p {
  padding-top: 0em;
  font-weight: bolder;
}

.spec-btn {
  padding-top: 1em;
}

.spec-btn-link {
  padding: 10px 25px 10px 25px;
  border-radius: 30px;
  border: 1px solid #dcdcdc;
  text-decoration: none !important;
  color: #000;
  font-weight: bolder;
  text-transform: lowercase;
}
.spec-btn-link:hover {
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(0, 42, 191, 0.5),
    rgba(41, 169, 197, 0.5)
  );
  border: 3px solid #fff;
  transition: 0.3s;
}

.granule .spec-btn-link:hover {
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(0, 42, 191, 0.5),
    rgba(140, 192, 93, 0.5)
  );
  border: 3px solid #fff;
  transition: 0.3s;
}

/*
.spec-btn-link:before{
  content: '';
  display: block;
  position: absolute;
  background: rgba(255,255,255,.5);
  width: 60px;
  height: 100%;
  left: 0;
  top: 0;
  opacity: .5s;
  filter: blur(30px);
  transform: translateX(-130px) skewX(-15deg);
}
*/
.spec-btn-link:after {
  content: '';
  display: block;
  position: absolute;
  background: rgba(255, 255, 255, 1);
  width: 15px;
  height: 100%;
  left: 30px;
  top: 0;
  opacity: 1;
  filter: blur(30px);
  transform: translate(-100px) scaleX(-15deg);
}

.spec-btn-link:hover:before {
  transform: translateX(300px) skewX(-15deg);
  opacity: 0.5;
  transition: 1s;
}
.spec-btn-link:hover:after {
  transform: translateX(300px) skewX(-15deg);
  opacity: 1;
  transition: 1s;
}

/*----------------------- INSIGHTS SECTION ---------------------*/

#insights {
  margin-top: 5em;
}

.insights-description {
  padding-bottom: -5em;
}

.insights-notice {
  bottom: 5%;
  font-size: 0.8em;
  font-style: italic;
  text-align: center;
}

.insights-list {
  background-color: #f5fffa;
  width: auto;
  margin: 0 auto;
  margin-top: -1em;
}
/*
.consulting .row{
  display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;

}

.consulting .row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
*/

.insights-item {
  display: inline-block;
  position: relative;
  font-size: 15px;
  align-content: center;
  padding: 2em;
}
.insights-item-other {
  display: inline-block;
  position: relative;
  font-size: 15px;
  background-color: #fff;
  padding: 2em;
}

.insights-list p {
  width: 50%;
  float: right;
  margin-right: 15%;
  margin-top: 15%;
}
.icon {
  width: 15%;
  margin-left: 15%;
  margin-top: 10%;
}

/*
#insights .row{
  background-position: right;
  background-size: 1px 3px;
  background-repeat: repeat-y;
  border-left: 1px dotted #00d6a6;
  padding-left: 1em;
}

.consultinglist ul{
  padding-top: 0.5em;
  list-style: none;
  text-align: justify;
  word-spacing: normal;
}
.consultinglist li::before{
  content:"\23E6";
  margin-left: -3em;
}
.consultinglist li{
  padding: 1em;
  font-size: 14px;
  margin-left: 10%;
  word-spacing: normal;
}
.iconRow{
  display: inline-block;
  position: absolute;
  height: 600px;
}


/*------------------------------ OUR TEAM SECTION ---------------------------------*/

/*------------------------- TEAM SECTION -----------------------*/

#our-team {
  margin-bottom: 3em;
  margin-top: 5em;
}

.name {
  font-size: 20px;
  font-family: 'trocchi';
  font-weight: normal;
  line-height: 50%;
}
.role {
  font-size: 14px;
  font-family: 'trocchi', sans-serif;
  margin-bottom: 1.5em;
}
.member1 {
  padding-left: 1em;
  padding-top: 1em;
  border-left: 1.5px solid #002abf;
  margin-bottom: 1em;
  margin-left: 5em;
  font-size: 12px;
}
.member2 {
  padding-left: 1em;
  padding-top: 1em;
  border-left: 1.5px solid #10cbdb;
  margin-bottom: 1em;
  font-size: 12px;
  margin-left: 5em;
}
.member3 {
  padding-left: 1em;
  padding-top: 1em;
  border-left: 1.5px solid #00d6a6;
  font-size: 12px;
  margin-left: 5em;
}

.img__wrapper {
}

.img-fluid {
  width: 185px;
  padding: 0.5em;
}

/* ------------------- CONTACT SECTION ----------------------------------*/

.error {
  color: red;
  font-size: 0.5em;
  font-style: italic;
}

.success {
  color: #ff9966;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

#contactus {
  /* Some space between about us and contact */
  /* margin-left: 5em; */
  background: linear-gradient(to right, #002abf, #00d6a6);
  /* min-width: 100%;
  margin: 0;
  padding: 0; */
  /* overflow-x: hidden; */
}

.bottom-waves {
  /*         Reversed Waves        */
  transform: rotate(180deg);
  background-size: auto;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#contactus h2 {
  color: #fff !important;
  text-align: left;
  margin-left: 0.5em;
}
.contactus {
  margin: auto;
  padding: 1em;
  margin-bottom: 5em;
}
.item {
  margin-bottom: 1em;
  padding: 1em;
}
.item input[type='text'],
.item textarea {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 2px solid #fff;
  color: #fff;
  padding: 0 0 8px 0;
} /*      Message box     */
.item.name-email {
  display: flex;
  justify-content: space-between;
}
.item.name-email input[type='text'] {
  width: 48%;
}
.item textarea {
  height: 100px;
  resize: none;
}
.btn {
  margin-top: 20px;
}
.submit-btn {
  /*    Send button      */
  display: block;
  background-color: transparent;
  border: 2px solid #fff;
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #fff;
  letter-spacing: 5px;
  transition: all 0.5s linear;
  margin-bottom: 2em;
}
.submit-btn:hover {
  background: #fff;
  color: #000;
}
::-webkit-input-placeholder {
  color: #fff;
}
::-moz-input-placeholder {
  color: #fff;
}
::-ms-input-placeholder {
  color: #fff;
}
/*
@media screen and (max-width: 420px){
  .contactus h2{
    padding-top: 25%;
  }
}
*/

/*----------------------- FOOTER SECTION ------------------------------*/

#footer {
  background: linear-gradient(to right, #002abf, #00d6a6);
  overflow: hidden;
}

.location {
  display: inline-block;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

.phone {
  margin-right: 5em;
}
.location .fa {
  margin-right: 2em;
}

.vat {
  margin-right: 7em;
}

.footer p {
  color: #fff;
  font-size: 8pt;
  text-align: center;
  margin-top: 1em;
}

/*-----------------------------------------------------------*/
/*-------------------- QUALITY PAGE -------------------------*/
/*-----------------------------------------------------------*/

/* Shared CSS elements: - nav-bar section (all incl.) - footer section (all incl.) -
                          bottom-waves img / class -
*/

#quality {
}

.quality-title {
  padding: 2em;
  font-style: bold;
  font-size: 2.2em;
  content: attr(data-shadow);
  position: absolute;
  top: 0.06em;
  left: 0.2em;
  z-index: 0;
  text-shadow: 0;
  background-image: linear-gradient(
    45deg,
    transparent 45%,
    hsla(180, 100%, 25%, 1) 45%,
    hsla(180, 100%, 25%, 1) 55%,
    transparent 0
  );
  background-size: 0.05em 0.05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.quality-statement span {
  font-weight: bold;
  font-size: 1.2em;
}

.iso-image {
  width: 10%;
  transform: rotate(15deg);
  z-index: -0;
  opacity: 0.5;
  float: right;
}

.certificate-btn {
  margin-right: 50%;
  margin-top: 3em;
  margin-bottom: 3em;
  padding: 10px 25px 10px 25px;
  border-radius: 30px;
  border: 1px solid #dcdcdc;
  text-decoration: none !important;
  color: #000 !important;
  text-transform: lowercase;
}

.certificate-btn-link {
  color: #000;
  padding: 0.3em;
}

.certificate-btn-link:hover {
  color: #000;
}

.certificate-btn:hover {
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(0, 42, 191, 0.5),
    rgba(41, 169, 197, 0.5)
  );
  border: 3px solid #fff;
  transition: 0.3s;
}

/*-----------------------------------------------------------*/
/*-------------------- BARACCO PAGE -------------------------*/
/*-----------------------------------------------------------*/

/* Shared CSS elements: - nav-bar section (all incl.) - footer section (all incl.) -
                          bottom-waves img / class -
*/

#baracco {
  margin-bottom: 3em;
}

/* Baracco Text Section */

.baracco_text {
  text-align: justify;
}

.vk_baracco {
  max-width: 75%;
  max-height: 75%;
  margin-top: 0em;
  float: right;
}

.baracco-title {
  padding: 1.5em;
  font-style: bold;
  font-size: 3.5em;
  content: attr(data-shadow);
  position: absolute;
  top: 0.06em;
  left: 0.2em;
  z-index: 0;
  text-shadow: 0;
  background-image: linear-gradient(
    45deg,
    transparent 25%,
    hsla(180, 100%, 25%, 1) 45%,
    hsla(180, 100%, 25%, 1) 60%,
    transparent 0
  );
  background-size: 0.05em 0.05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

blockquote {
  border-left: 3px solid #00cc8f;
  color: #1a1a1a;
  font-size: 1.15em;
  font-style: italic;
  line-height: 1.8em;
  margin: 1.1em -2em;
  padding: 1em 2em;
  position: relative;
  transition: 0.2s border ease-in-out;
  z-index: 0;
}
blockquote::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4px;
  height: 2em;
  background-color: #fff;
  width: 5px;
  margin-top: -1em;
}
blockquote::after {
  content: '\f12e';
  position: absolute;
  top: 50%;
  left: -0.5em;
  color: #00cc8f;
  line-height: 1em;
  text-align: center;
  text-indent: -2px;
  width: 1em;
  margin-top: -0.5em;
  transition: 0.2s all ease-in-out, 0.4s transform ease-in-out;
}

cite {
  display: block;
  font-size: 0.75em;
  line-height: 1.8em;
  margin-top: 1em;
}

.louis_minibio {
  margin-top: 2em;
}

/* Baracco Images Section */

.baracco_gallery h3 {
  padding: 0.5em;
  font-style: bold;
  font-size: 2.5em;
  content: attr(data-shadow);
  text-align: center;

  background-image: linear-gradient(
    45deg,
    transparent 25%,
    hsla(180, 100%, 25%, 1) 45%,
    hsla(180, 100%, 25%, 1) 60%,
    transparent 0
  );
  background-size: 0.05em 0.05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.baracco_gallery p {
  font-size: 0.9em;
  text-align: justify;
}

.row {
  padding: 2em;
}

.baracco_gallery h4 {
  padding: 0.5em;
  font-style: bold;
  font-size: 1.75em;
  content: attr(data-shadow);

  background-image: linear-gradient(
    45deg,
    transparent 25%,
    hsla(180, 100%, 25%, 1) 45%,
    hsla(180, 100%, 25%, 1) 60%,
    transparent 0
  );
  background-size: 0.05em 0.05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.baracco_gallery img {
  width: auto;
  height: 75%;
  object-fit: contain;
  margin: auto;
}

.baracco_gallery img:hover {
  transform: scale(1.25);
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  shadow: 5px black;
}

.wrapper {
  display: flex;
  height: 175px;
  width: 200px;
  overflow: hidden;
}

.blades h4 {
  text-align: right;
}
.blades ul {
  text-align: right;
}

.plates {
  height: 185%;
}

.blades {
  float: right;
}

.blades img {
  height: 175px;
  width: 200px;
}

.ovens {
  padding: 1em;
  height: 185%;
}

.ovens img {
  height: 100%;
  width: 100%;
}

/* /////////////////////////sun Jan 3 features ////////////////////////*/
/* ----------------- about us -------------- */

.text__wrapper {
  margin-bottom: 30px;
  font-size: 22px;
}
.slogan {
  /* box-shadow: 20px 10px 20px #d7d1d1; */
  font-size: 25px;
  text-align: center;
  position: relative;
}

.slogan::before {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background-color: transparent;
  box-shadow: -5px -5px 0px 0px rgba(64, 181, 173, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.slogan::after {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background-color: transparent;
  box-shadow: 5px 5px 0px 0px rgba(64, 181, 173, 0.7);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.insights_slogan {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
  font-size: 24px;
  text-align: justify;
  position: relative;
  font-style: italic;
}

.insights_slogan::before {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background-color: transparent;
  box-shadow: -5px -5px 0px 0px rgba(64, 181, 173, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.insights_slogan::after {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background-color: transparent;
  box-shadow: 5px 5px 0px 0px rgba(64, 181, 173, 0.7);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.citate {
  height: 182px;
  font-style: italic;
}

.citate::before {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background-color: transparent;
  box-shadow: -5px -5px 0px 0px rgba(159, 226, 191, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.citate::after {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  background-color: transparent;
  box-shadow: 5px 5px 0px 0px rgba(159, 226, 191, 0.75);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

#bold {
  font-size: 30px;
}

.waves {
  position: absolute;
  bottom: 0;
  max-height: 300px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.5, 0.3, 0.25, 0.3) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 10s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 12s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 14s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* ----------------- about us -------------- */

/* ----------------- our products-------------- */
.products__content {
  font-size: 18px;
  margin-top: 60px;
}
.products__content {
  font-size: 22px;
}

.granules {
  height: 450px;
  width: 350px;
}

.insights-item-other:hover {
  transition-delay: 2s;
  background: linear-gradient(to right, #002abf, #00d6a6);
  transition: 1.5s;
  border-radius: 5%;
  color: rgb(255, 255, 255);
}

.insights-item:hover {
  transition-delay: 2s;
  background: linear-gradient(to left, #00d6a6, #002abf);
  transition: 1.5s;
  border-radius: 5%;
  color: rgb(255, 255, 255);
}

/* #team .card {
  border-radius: 0;
  box-shadow: 5px 5px 15px #e74c3c;
  transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
} */

.card:hover {
  background: linear-gradient(to left, #00d6a6, #002abf);
  transition: 1.5s;
  color: white;
  border-radius: 5px;
  /* border: none;  dribling was fixed */

  box-shadow: 5px 15px 15px #e1dede;
}

.card__font {
  font-size: 20px;
}
/* .insights-item:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  transition: 0.5s;
}

.insights-item-other:hover {
  box-shadow: 0 5px 35px 0px rgba(0, 0, 0, 0.1);
} */

/* #single {
  display: flex;
  justify-content: space-between;
} */

/* .our__products {
  background: url(Images/bottlepellets2.png) 0px 0px no-repeat;
  background-size: cover;
} */

.block {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.h_right {
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 35%;
  left: 25%;
  transform: translateY(-50%);
  font-size: 58px;
  color: black;
  font-weight: 400;
}
.h_left {
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 35%;
  right: 25%;
  transform: translateY(-50%);
  font-size: 58px;
  color: black;
  font-weight: 400;
}

.right {
  position: relative;
  display: flex;
  text-align: justify;
  padding-top: 20px;
  border-top: 2.5px solid #00a36c;
  margin: 0;
  top: 39%;
  left: 63%;
  transform: translateY(-50%);
  font-size: 20px;
  color: black;
  font-weight: 400;
}
.left {
  position: relative;
  display: flex;
  text-align: justify;
  padding-top: 20px;
  border-top: 2.5px solid #6495ed;
  margin: 0;
  top: 39%;
  left: 13%;
  transform: translateY(-50%);
  font-size: 20px;
  color: black;
  font-weight: 400;
}

.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  opacity: 0.5;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  pointer-events: none;
}

/* #nav-bar {
  display: none;
  margin: 0;
} */
/* ----------------- our products-------------- */

/*

<section id="materials" wow fadeInUp data-wow-delay="0.4s"">

    <!-- TEXT PORTION ------------------------->
    <div class="container material-description wow fadeInUp data-wow-delay="0.4s"">
      <!-- <h2> Our Products </h2> -->
      <p> Members of our team possess decades-long expertise when it comes to negotiating terms and contracts, having established supply agreements with many reputable processors across Europe and Asia.
          Our plastic material can come either as flakes or pellets, as well as other further processed forms such as yarns for textile production.
          <br><br>
          The flakes we offer, which are also used for producing our pellets, are classified as "Super Clean Hot Washed Flake". All contaminants are removed during their washing process, making our grades conform to first-stage FDA and EFSA standards.
          Examples below include our most popular rPET-276, rPET-277, rPET-376, and rPET-377 flake/pellet grades.

      </p>

    </div>
    <div class="container material-thumbnails wow fadeInUp data-wow-delay="0.8s"">
    <h3> Flake </h3>


    <!--- FLAKE ROW-------------------->
    <div class="row flake">

      <div class="col-md-6 material-box">
            <div class="thumbnail">
                <img src="Images/firstflake.jpg" class="material-image">
            </div>
            <div class="thumbnailtext">
                <h4> rPET-276 </h4>
                <p class="origin-p">Origin: Japan </p>
          <!----      <img src="Icons/japan.png" class="countryball">   -------->
                <p>Super-washed rPET flake from Japanese post-consumer plastic bottles
                  and prepared food packaging. These deposited PET plastics are then relocated to neighbouring Taiwan for complete
                  decontamination and processing.</p>

                <div class="spec-btn">
                <a href="Material-specs/vollerkreis-grade-276.pdf" class="spec-btn-link"> specification </a>
                </div>

            </div>
      </div>
      <div class="col-md-6 material-box">
            <div class="thumbnail">
                <img src="Images/blueflake.jpg" class="material-image">
            </div>
            <div class="thumbnailtext">
                <h4> rPET-277 </h4>
                <p class="origin-p">Origin: Germany</p>
              <!--  <img src="Icons/germany.png" class="countryball"> ---->
                <p>Super-washed rPET flake from individually and locally submitted German post-consumer plastic bottles via the national deposit system. These plastics are afterwards directly decontaminated and processed
                  in the South of Germany. </p>

                <div class="spec-btn">
                <a href="Material-specs/vollerkreis-grade-277.pdf" class="spec-btn-link"> specification </a>
                </div>

            </div>
      </div>

    </div>


    <br>
    <!--- GRANULE & PREFORM ROW ---------->
        <h3> Granule </h3>

    <div class="row granule">

      <div class="col-md-6 material-box">

           <div class="thumbnail">
               <img src="Images/bottlepellets.jpg" class="material-image">
           </div>
           <div class="thumbnailtext">
               <h4> rPET-376 </h4>
               <p class="origin-p">Origin: Japan </p>
               <p>Ready-to-use rPET pellets (granules) made from our 276 grade super-washed rPET flake that is sourced from Japanese post-consumer plastic.
                 After undergoing rigorous washing and decontamination, the 376 grade pellets are processed in neighbouring Taiwan.</p>

               <div class="spec-btn">
               <a href="Material-specs/vollerkreis-grade-376.pdf" class="spec-btn-link"> specification </a>
               </div>
              <!---
               <button type="button" class="spec-btn">
               <a href="Material-specs/376.pdf"> Specification </a>
               </button>
               ------------>

          </div>
       </div>
       <div class="col-md-6 material-box">
    <!--   <h3> Preforms </h3> --->
           <div class="thumbnail">
               <img src="Images/bottlepellets2.jpg" class="material-image">
           </div>
           <div class="thumbnailtext">
               <h4> rPET-377 </h4>
               <p class="origin-p">Origin: Germany </p>
               <p>EFSA-approved rPET pellets (granules) made from our German-sourced 277 grade flake.
                 The 377 series is premium European quality and ready-to-use rPET plastic feedstock with a
                 slightly increased intrinsic viscosity, compared to its 376 Japanese counterpart.</p>

               <div class="spec-btn">
               <a href="Material-specs/vollerkreis-grade-377.pdf" class="spec-btn-link"> specification </a>
               </div>
                <!---
                <button type="button" class="spec-btn">
                <a href="Material-specs/476.pdf"> Specification </a>
                </button>
                ----->

           </div>
       </div>

    </div>

    </div>

</section> */