* { box-sizing: border-box; }

html, body { min-height: 100%; }

body { 
  margin: 0;
  font-weight: 400;
  font-size: 1rem;
  font-family:  'Questrial', sans-serif;
  color: #212529;
  transition: all 0.3s linear;
  overflow-x: hidden;
}

div {
  margin: 0 auto;
  display: block;
}

textarea { 
  resize: none;
  width: 100%;
  padding: .5rem;
  box-sizing: border-box;
  font-size: 1rem;
  border: none;
  border-bottom: 1px solid #848689;
  outline: none;
  overflow: hidden;
  font-family: 'Questrial', sans-serif;
}

textarea:focus { border-color: #00b900; }

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

a {
  color: #212529;
  text-decoration: none;
}
a:visited { color: #212529; }
a:hover, a:focus {
  color: #757474; 
  text-decoration: underline;
}

sup { font-size: x-small; }

main {
  position: relative; 
  margin-bottom: 5%;
}

body > header { box-shadow: 1px 1px 6px -2px black; }

/*******************************************************************************
*                                   HEADER                                     *
*******************************************************************************/

nav, .navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navbar {
  overflow: hidden;
  background-color: #fff;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.navbar > .logo,
.navbar > .menu {
  display: flex; 
  align-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  user-select: none;
}

.navbar > .logo {
  display: flex;
  margin: auto;
  width: 100%;
  max-width: 15%;
}
.navbar > .logo a {
  margin: auto;
  padding: 0;
  display: block;
}
.navbar > .logo a > picture img {
  width: auto;
  height: 100%;
  max-height: 80px;
  margin: auto;
  display: block;
}

.navbar > .logo > div { margin: 0; }

.navbar > .menu {
  display: flex;
  margin: auto;
  flex-wrap: wrap;
  width: 100%;
  max-width: 65%;
  justify-content: center;
}
.navbar > .logo a:hover { border-bottom: none; }

/* The subnavigation menu */
.subnav,
.subnav-container {
  display: flex;
  cursor: pointer;
  margin: auto .5rem;
}

.subnav-container { margin: auto 0; }

/* Style the subnav content - positioned absolute */
.subnav-content {
  position: absolute;
  width: auto;
  z-index: 4;
  padding: 1rem;
  visibility: hidden;
  opacity: 0;
  flex-direction: column;
  align-items: flex-start;
  cursor: auto;
  background-color: white;
  transition: all .3s ease-in-out 0.3s;
  display: flex;
  margin: 2.5rem auto auto .5rem;
}

/* Navigation links */
.subnav > a,
.subnav > .subnav-content > a {
  color: black;
  text-align: center;
  padding: 5px .5rem;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color .3s ease-in-out, 
  padding .3s ease-in-out, 
  margin .3s ease-in-out,
  border-color .3s ease-in-out;
}
.subnav > .activeLink {
  color: #757474; 
  border-bottom: 2px solid #aaa;
}

#lang-select > .subnav > .subnav-content { margin-left: 0; }

.subnav:hover > a,
.subnav:focus > a,
.subnav > .subnav-content > a:hover,
.subnav > .subnav-content > a:focus {
  position: relative;
  z-index: 2;
  color: #757474;
  border-bottom: 2px solid #bbb9b9;
}

#about-no-pointer { cursor: default; }

#lang-select {
  width: 100%;
  max-width: 15%;
  display: flex;
  align-items: center;
  justify-items: center;
}

#lang-select div:first-child { margin: auto; }

#activeLang {
  display: flex;
  align-items: center;
  font-size: 1rem;
  cursor: default;
}

#activeLang:before {
  background-position: center;
  background-size: cover;
  width: 15px;
  height: 15px;
  content: ' ';
  margin-right: .3rem;
}

.webp #activeLang:before { background-image: url("/assets/img/globo.webp"); }
.no-webP #activeLang:before { background-image: url("/assets/img/globo.png"); }

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover > .subnav-content,
.subnav:focus > .subnav-content {
  visibility: visible;
  box-shadow: -2px 2px 3px 2px rgba(0, 0, 0, 0.19);
  transition: all 0.3s ease-in-out 0s;
  opacity: 1;
}

.burger-menu {
  display: none;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 30px;
  height: 5px;
  background-color: #9E9E9E;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

/*******************************************************************************
*                                    MAIN                                      *
*******************************************************************************/

/* Content wrapper */
.wrapper {
  display: flex;
  margin: auto;
  width: 100%;
  padding: 30px 0;
}

.button {
  padding: .8rem 1.5rem;
  background-color: #00b900;
  color: white;
  margin: 2rem auto -1rem;
  display: inline-block;
  text-shadow: 1px 1px 4px rgb(0,0,0);
  font-size: 1.1rem;
  user-select: none;
}
.button:hover { background-color: #51d607; }
.button:active { background-color: #149d14; }

.button:hover,
.button:active,
.button:visited,
.button:focus {
  color: white; 
  text-decoration: none; 
}

/* Section */
section {
  width: 100%;
  margin: auto;
  height: auto;
  padding: 1rem 2rem;
  display: block;
}

section h3 { font-size: 1.4rem; }

section ul { padding: 0 0 0 1rem; }

.home.service-icon { flex-flow: row wrap; }

.home.service-icon .service-icon-content div {
  height: 230px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease-in-out;
  cursor: default;
  padding: 1rem;
  margin: .5rem auto;
  flex-flow: column;
  max-width: 150px;
}

.home.service-icon .service-icon-content div h3 {
  opacity: 0;
  transition: all .1s ease-in;
  text-align: center;
  margin: 0;
  display: block;
  width: 100%;
  font-size: 1.3rem;
  width: 250px;
}

.home.service-icon .service-icon-content div h3.delay { transition-delay: .2s; }

.home.service-icon .service-icon-content div:hover {
  box-shadow: 0px 0px 6px 1px #8c8c8c;
  width: 100%;
  max-width: 250px;
}
.home.service-icon .service-icon-content div:hover h3 {
  opacity: 1;
  width: 250px;
}

/* Flex */

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row nowrap;
  width: 100%;
}

.flex-reverse { flex-flow: row-reverse nowrap; }

.flex-content {
  flex: 1 1;
  max-width: 47.5%;
  margin: 0;
}

#certificazioni_home {
  margin-top: 10%;
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
}

#certificazioni_home picture {
  margin: 0 5%;
  max-width: 175px;
  width: 100%;
}

/*******************************************************************************
*                                  ABOUT                                       *
*******************************************************************************/

.flex-text { max-width: 47.5%; }

.flex-content ul {
  padding: 0; 
  list-style-type: none;
}
.flex-content ul li {
  margin: .5rem auto; 
  font-size: 1.2rem;
}

.flex-content figure { margin: 0 }

.certificate-flex {
  align-items: flex-start;
  flex-flow: row wrap;
  justify-content: end;
}
.certificate-flex > div {
  width: 100%;
  align-items: baseline;
  max-width: 33%;
  margin: 1rem 0;
}
.certificate-flex > div h3,
.certificate-flex > div > div { margin-left: 0; }
.certificate-flex picture img {
  max-width: 80%;
  display: block;
  margin: auto 0;
  border: 1px solid #757474;
}
.certificate-flex > div > div a:first-child {
  padding-right: .5rem;
  border-right: 1px solid #212529;
}
.certificate-flex > div > div a:last-child { padding-left: .5rem; }

/*******************************************************************************
*                                 PRODOTTI                                     *
********************************************************************************/

video { width: 100%; height: auto; }

.flex-product { align-items: baseline; }
.flex-product div {
  flex: 1 1;
  margin: 0 1rem;
}
.flex-product div:first-child {margin-left: 0; }
.flex-product div:last-child { margin-right: 0; }

.flex-product div h3 {
  display: inline-flex;
  align-items: center;
}

.flex-product div span {
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 1rem;
}

#high_quality { background-image: url('/assets/img/products/icon/qualita_ico.svg'); }
#sustainability { background-image: url('/assets/img/products/icon/sostenibilita_ico.svg'); }
#skill { background-image: url('/assets/img/products/icon/competenza_ico.svg'); }
#innovation { background-image: url('/assets/img/products/icon/innovazione_ico.svg'); }
#evolution { background-image: url('/assets/img/products/icon/evoluzione_ico.svg'); }
#our_world { background-image: url('/assets/img/products/icon/esperienza_ico.png'); }
#partners { background-image: url('/assets/img/products/icon/partners_ico.svg'); }
#rethink { background-image: url('/assets/img/products/icon/rethink_green_ico.svg'); }
#reliability { background-image: url('/assets/img/products/icon/garanzia_ico.svg'); }

.flex-col { flex-flow: column wrap }

.flex-product .flex-product-list { 
  margin: 0;
  width: 100%;
  flex: 1 1 100%;
}

.flex-product .flex-product-list ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  margin: 3rem 0 3rem 0;
  list-style-type: none; 
  padding: 0;
}

.flex-product .flex-product-list ul li {
  font-size: 2rem;
  flex: 1 1 auto;
  text-align: center;
}

.flex-product .flex-product-list ul li:not(:last-child) { border-right: 1px solid #6a6c6d; }

.flex-product .flex-product-list ul li:hover,
.flex-product .flex-product-list ul .active-product-list {
  color: #757474;
  cursor: pointer;
}

.flex-product .flex-product-box {
  flex: 1 1 100%; 
  margin: auto;
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.flex-product-box .product-subbox {
  display: flex;
  margin: auto 0;
  flex: 1 1 100%;
  position: absolute;
  top: 0;
  left: 0
}

.flex-product-box .product-subbox.disabled-product { 
  transform: translateX(110%);
  visibility: hidden;
}

.flex-product-box .product-subbox figure,
.flex-product-box .product-subbox div { flex: 1 1 50%; }

.flex-product-box .product-subbox figure { margin: auto 1rem auto 0; }
.flex-product-box .product-subbox div { margin: auto 0 auto 1rem; }

.flex-product-box .product-subbox div p { line-height: 1.5rem; }
.flex-product-box .product-subbox div ul li,
.flex-product-box .product-subbox div table {
  font-size: 1.2rem;
  border-collapse: collapse;
}
.flex-product-box .product-subbox div table tr td {
  border: 1px solid #2196F3;
  border-left: none;
  border-right: none;
  padding: .5rem .25rem;
}
.flex-product-box .product-subbox div table tr:first-child td { border-top: none }
.flex-product-box .product-subbox div table tr:last-child td { border-bottom: none }
.flex-product-box .product-subbox div table tr td:first-child { text-align: center; }

.flex-product-box.production-card .product-subbox { flex-flow: column wrap; }
.flex-product-box.production-card .product-subbox > div {
  display: flex;
  align-items: center;
  margin: auto 0 1rem;
}
.flex-product-box.production-card .product-subbox div:first-child { flex-flow: column wrap; }
.flex-product-box.production-card .product-subbox > div > figure,
.flex-product-box.production-card .product-subbox > div > div {flex: 1 1; }
.flex-product-box.production-card .product-subbox > div > div > h5 { font-size: 1.7rem; }
.flex-product-box.production-card .product-subbox > div > p { align-self: flex-start; }


/* Slide Schede prodotti */
.product-prev { animation: product-prev 1.5s ease-in-out forwards; }
.product-next { animation: product-next 1.5s ease-in-out forwards; }

@keyframes product-prev {
  0%{
    visibility: visible;
    transform: translateX(0); 
  }
  100% {
    visibility: hidden;
    transform: translateX(-110%);
  }
}
@keyframes product-next {
  0%{
    visibility: hidden;
    transform: translateX(110%);
  }
  100% {
    visibility: visible;
    transform: translateX(0);
  }
}
 
/*******************************************************************************
*                                 SERVIZI                                      *
*******************************************************************************/

.service-flex figure picture img {
  max-width: 90%;
  display: block;
  margin: auto 0;
}

.service-number { margin: 5rem auto 0; }
.service-number div { font-size: 1.5rem; }
.service-number div strong { font-size: 2rem; color: #1c97dd; }

.service-icon { flex-flow: column wrap; }
.service-icon-content:first-child { margin-bottom: 3%; }
.service-icon-content:last-child { margin: 3% auto; }
.service-icon .service-icon-content { align-items: unset; }
.service-icon .service-icon-content div {
  display: flex;
  flex-flow: column wrap;
  flex: 1 1 33%;
}

.service-icon img,
.service-icon a {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  min-height: 130px;
  margin-top: 5%;
}

.service-icon img,
.service-icon a img { 
  max-width: 130px;
  margin: auto;
  min-height: auto;
}

.back-to-top {
  margin-right: 5%;
  background-color: #00b900;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  color: white;
  position: sticky;
  bottom: 7%;
  display: none;
  align-items: center;
  justify-content: center;
}

.back-to-top span {
  display: block;
  border-color: white;
  border-width: 4px 4px 0 0;
  width: 20px;
  height: 20px;
  border-style: solid;
  transform: rotateZ(-45deg);
  margin-top: 10px;
}

.btt_show { display: flex; }

/*******************************************************************************
*                                CONTATTI                                      *
*******************************************************************************/

.flex-contact {
  flex-flow: row wrap;
  align-items: baseline;
}
.flex-contact form,
.flex-contact > div { flex: 1 1 45%; }
.flex-contact > div {  margin-left: 0; }

.contact-ul {
  padding: 0;
  list-style-type: none;
}
.contact-ul li { margin: .5rem 0; }
.contact-ul li a { font-size: 1.1rem; }

/*******************************************************************************
*                                 FOOTER                                       *
*******************************************************************************/

footer {
  display: flex;
  flex-direction: column;
  width: 100%;
   /* Fallback color */
  background-color: whitesmoke;
}

.footer-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 95%;
  padding-top: 3rem;
  padding-bottom: 2rem;
  margin: auto;
  overflow: hidden;
}

.footer-content > div {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.footer-content div { margin: 0; }
.footer-content div h4 {
  font-size: 1.1rem;
  width: auto;
  margin: auto 25%;
  color: #03A9F4;
  flex: 1 1 25%;
  /* text-shadow: 0px 1px 4px #9E9E9E; */
}

#about-footer { margin-top: 0; }

#about-footer p {
  font-size: 16px;
  margin: 0; 
  margin-top: 1rem;
  max-width: 90%;
  line-height: inherit;
  color: #6b6b6b;
}
#about-footer img {
  max-width: 150px;
  height: auto;
  margin-top: -1rem;
}

.footer-content ul {
  padding: 0;
  list-style-type: none;
  width: auto;
  margin: 1rem 25%;
  margin-right: 0;
  width: 100%;
}

.footer-content ul li { margin: .25rem auto; } 

.footer-content ul li a {
  display: block;
  padding: .25rem 0;
  color: #00b900;
  display: flex;
  align-items: center;
  text-shadow: 1px 1px 3px #ffffff;
}
.footer-content ul li a:hover {color: #2196F3;}

#contacts-footer h4,
#contacts-footer ul { margin-left: 8%; }
#contacts-footer ul li { color: #868484; }
#contacts-footer ul li a { display: inline-block; }

/*******************************************************************************
*                                   FORM                                       *
*******************************************************************************/

#reCAPTCHA > div { margin-left: 0; }

form { position: relative; }

/**
 * Il tag legend viene usato per informare l'utente dell'avvenuto successo 
 * o falimento dell'invio della form
 */
form > span {
  top: 0;
  margin-left: 1rem;
}

select {
  border-color: white;
  border-bottom-color: #848689;
  color: #212529;
  font-size: 1rem;
}

.onLoad,
.onSuccess,
.onFailure {
  display: flex;
  align-items: center;
  position:static;
}

.onLoad:before { 
  background-image: url(/assets/img/form/load.svg);
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

.onFailure:before { background-image: url(/assets/img/form/failure.svg); }
.onSuccess:before { background-image: url(/assets/img/form/check.svg); }

.onLoad:before,
.onFailure:before,
.onSuccess:before { 
  content: " ";
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: .5rem;
}

input {
  border: none;
  border-bottom: 1px solid #848689;
  font-family: 'Questrial', sans-serif;
  font-size: 1rem;
  color: #212529;
  font-size: 1.1rem;
}

input:focus { 
  border-bottom: 1px solid #00b900;
  outline: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
}

.row > .col {
  flex: 0 0 50%;
  width: 50%;
}

.row > .col-span { flex: 0 0 92.5%; }
.row > .col-captcha-input { flex: 0 0 30%; }
.row > .col-captcha-img { 
  flex: 0 0 64%;
  margin-top: 1.7rem;
}

.row > .col input,
.row > .col select {
  display: block;
  width: 85%;
  margin: auto;
}

.row > .col-span input[type="submit"] {
  margin-left: 0;
  width: auto;
  border: none;
  cursor: pointer;
  padding: .8rem 1.5rem;
}

.row > .col input { padding: .4rem; }
.row > .col select { padding: .4rem 0; }


/* Note Legali */
.legal-ul {
  list-style-type: none;
  padding: 0;
}
.legal-ul li { margin: 0 auto; }
.legal-ul li p { margin: 0 auto; }

/* Credits */

.flex.credits { align-items: flex-start; flex-flow: row wrap;}
.credits div {
  margin: .5rem 0;
  flex: 1 1 auto;
  padding: .5rem;
}
.credits h3, .credits h4 { margin-left: 0; }
.credits img { 
  max-width: 50px;
  margin: auto .5rem;
}

.flex-icon { justify-content: end; }

.hide { display: none!important}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  overflow: hidden;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.container .prev,
.container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
  background-color: rgba(0, 0, 0, 0.4);
  transform: translateY(-50%);
}

/* Position the "next button" to the right */
.container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.container .prev:hover,
.container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
  text-decoration: none;
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.thumbs {
  display: none;
  overflow: visible;
  position: relative;
  height: 150px;
  width: 1000%;
}

.gallery-row  {
  height: inherit;
  display: inline-block;
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
}

.gallery-row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 2.5%;
  height: inherit;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active-g,
.demo:hover {
  opacity: 1;
}

.gallery-row.left,
.gallery-row.rigth {
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.gallery-row.left.l1 { animation-name: gallery-left-1; }
.gallery-row.left.l2 { animation-name: gallery-left-2; }
.gallery-row.left.l3 { animation-name: gallery-left-3; }
.gallery-row.left.l4 { animation-name: gallery-left-4; }
.gallery-row.left.l5 { animation-name: gallery-left-5; }
.gallery-row.left.l6 { animation-name: gallery-left-6; }
.gallery-row.left.l8 { animation-name: gallery-left-7; }
.gallery-row.left.l8 { animation-name: gallery-left-8; }

.gallery-row.right.l1 { animation-name: gallery-left-8; }
.gallery-row.right.l2 { animation-name: gallery-left-7; }
.gallery-row.right.l3 { animation-name: gallery-left-6; }
.gallery-row.right.l4 { animation-name: gallery-left-5; }
.gallery-row.right.l5 { animation-name: gallery-left-4; }
.gallery-row.right.l6 { animation-name: gallery-left-3; }
.gallery-row.right.l8 { animation-name: gallery-left-2; }
.gallery-row.right.l8 { animation-name: gallery-left-1; }

/* Animation */

@keyframes gallery-left-1 {
  0% { left: 0; }
  100% { left: -10%; }
}
@keyframes gallery-left-2 {
  0% { left: -10%; }
  100% { left: -20%; }
}
@keyframes gallery-left-3 {
  0% { left: -20%; }
  100% { left: -30%; }
}
@keyframes gallery-left-4 {
  0% { left: -30%; }
  100% { left: -40%; }
}
@keyframes gallery-left-5 {
  0% { left: -40%; }
  100% { left: -50%; }
}
@keyframes gallery-left-6 {
  0% { left: -50%; }
  100% { left: -60%; }
}
@keyframes gallery-left-7 {
  0% { left: -60%; }
  100% { left: -70%; }
}
@keyframes gallery-left-8 {
  0% { left: -70%; }
  100% { left: -80%; }
}

@keyframes gallery-right-1 {
  0% { left: -80; }
  100% { left: -70%; }
}
@keyframes gallery-right-2 {
  0% { left: -70%; }
  100% { left: -60%; }
}
@keyframes gallery-right-3 {
  0% { left: -60%; }
  100% { left: -50%; }
}
@keyframes gallery-right-4 {
  0% { left: -50%; }
  100% { left: -40%; }
}
@keyframes gallery-right-5 {
  0% { left: -40%; }
  100% { left: -30%; }
}
@keyframes gallery-right-6 {
  0% { left: -30%; }
  100% { left: -20%; }
}
@keyframes gallery-right-7 {
  0% { left: -20%; }
  100% { left: -10%; }
}
@keyframes gallery-right-8 {
  0% { left: -10%; }
  100% { left: 0; }
}

.timeline-year {
  flex: 1 1 25%;
  height: 500px;
}
.timeline-event { 
  position: relative;
  height: 300px;
  flex: 1 1 75%;
  overflow: hidden;
}
.timeline-year h3 {
  position: relative;
  font-size: 1.4rem;
  text-align: center;
  margin: 4rem auto;
  color: #212121;
  cursor: pointer;
}
.timeline-year .active { color: #55beee; }
.timeline-year h3:first-child { margin-top: 0; }
.timeline-year h3:last-child { margin-bottom: 0; }
.timeline-year h3:not(:last-child)::after {
  content: " ";
  position: absolute;
  width: 1px;
  height: 3.7rem;
  background-color: #85e417;
  left: 50%;
  margin-top: 1.7rem;
}
.timeline-year h3:not(:last-child)::before {
    content: " ";
    position: absolute;
    left: 49%;
    top: 3.4rem;
    width: 0;
    height: 0;
    border: 3px solid #00bcd4;
    border-radius: 50%;
    z-index: 1;
}
.timeline-event div {
  opacity: 0;
  user-select: none;
  position: absolute;
  transition: opacity .4s ease;
  top: 50%;
  transform: translateY(-50%);
}
.timeline-event .active { opacity: 1; }