@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Montserrat:300,700');
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}
/**************************************
    timeline container left right 
**************************************/
.timeline-container {
   display: flex;
}
.left-side {
   width: calc(100% - 36%);
   padding: 10px;
   margin-right: 1%;
   border: 0px solid #1b1b1b;
}
.right-side {
   width: 35%;
   padding: 10px;
   border: 0px solid #1b1b1b;
   font-family: "Open-sans", sans-serif;
}

/*****************************************
   right side timeline container --> box
******************************************/
.box-container {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin: 10px 0;
    cursor: pointer;
    opacity: .5;
    transition: opacity 1s;
}

.box-image {
    width: 150px;
    height: auto;
    margin-right: 20px;
    box-shadow: 0 8px 4px -8px rgba(37, 38, 38, .8);
    opacity: .7;
    transition: opacity 800ms;
}

.box-container:hover .box-image {
   opacity: 1;
   box-shadow: 0 8px 4px -8px #f44c10;
}
.box-container:hover {
   opacity: 1;
   background: linear-gradient(45deg, #f5f5f5, #e1e1e1);
}
.box-text {
    flex: 1; /* Permette al testo di occupare lo spazio rimanente */
    font-size: 15px;
}

h2 {
    margin: 0 0 10px;
}

p {
    margin: 0;
}
section {
   display: flex;
   margin: 0;
   padding: 30px 0;
   font-family: 'Roboto', sans-serif;
   background: #F1F2F6;
}

h1 {
   text-align: center;
   font-weight: 300;
   color: #777
}

h1 span {
   font-weight: 600;
}
/*********************************************
   timeline --> left side timeline container
**********************************************/
.timeline {
   width: 100%;
   padding: 50px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

.timeline:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   cursor: pointer;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #f5f7fa;
   background: #181818; /*#4fc1e9*/
   margin-top: 10px;
   z-index: 9999;
   transition: .8s ease-in-out;
}
.timeline .title {
   font-size: 16px;
   font-weight: 600;
   font-family: "Open-sans", sans-serif;
   color: #c0392b;
}
.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666;
   font-family: "Opens-sans", sans-serif;
   transition: .8s ease-in-out;
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500
}

.timeline-content span {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
}

.timeline-content:hover {
   background: transparent;
   box-shadow: 0 8px 10px -8px rgba(18, 18, 18,.5);
   transform: translateY(-5px);
}
.timeline .timeline-block .marker {
   background-color:#0f0;
   box-shadow:0px 0px 10px 2px #0f0;
}
.timeline .timeline-block:hover .marker {
   background-color:#c00;
   box-shadow:0px 0px 10px 2px #c00;
}
/******************************
    media queries --> mobile
*******************************/
@media screen and (max-width: 768px) {

   .timeline-container {
      flex-direction: column;
   }
   .left-side, .right-side {
      width: 100%;
      margin: 5px 0;
      border: none;
      border-radius: 4px;
     /* box-shadow: 0 0 4px rgba(24, 24, 24, .8); */
   }
   .timeline {
      padding: 0 8px;
      width: 100%;
   }
   .timeline:before {
      left: 16px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}