*,
*:after,
*:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    align-items: center;
}

body {
  background:#20ad9a url(../img/12c.jpg);
	 
	 
  width: 100%;
 
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

.timeline {
  position: relative;
  padding: 30px 0px 50px 58px;
  font-family: 'Gorditas', Arial, sans-serif;
}
 
.timeline:before {
    content: '';
    position: absolute;
    width: 22px;
    height: 100%;
    top: 0;
    left: 315px;
    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
}


/* Each event will be of position relative and add some margin to the bottom to have some space between the items and some padding to the right. This will make sure that the list item does not overflow too much to the right when apply the 3D rotation. */
.event {
  position: relative;
  margin-bottom: 60px;  
  padding-right: 40px;
}



/*********************************************
*********************************************
PROFILE PICTURE
*********************************************
**********************************************/
.thumb {
  position: absolute;
  width: 100px;
  height: 100px;
  box-shadow: 
    0 0 0 4px rgba(65,131,142,1),     
    0 1px 1px rgba(255,255,255,0.5);

  background-repeat: no-repeat;
  border-radius: 0%;margin-left: 120px;
  /* Transformation to scale down a bit. Aim is to scale it up, once the corresponding radio button is selected. Since the scaling will move the element a bit, either set the transform origin or translate it on the X-axis. */
  -webkit-transform: scale(1) translateX(1px);
}
/* white zig-zag line */
.thumb:before {
  content: '';
    width: 77px;
    left: 214px;
    top: 45px;
    position: absolute;
    height: 1px;
    z-index: -1;
    background: #fff;
}
/* date */
.thumb span {
  color: #06424d; 
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  position: absolute;
  bottom: -30px;
}



/*********************************************
*********************************************
PORTRAIT
*********************************************
**********************************************/
.user-1 {  
  background-image: url(../img/si3.png)  ; background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover; cursor: pointer;
 
}
.user-2 {
  background-image: url(../img/eth-451.jpg); background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;cursor: pointer;
}
.user-3 {
  background-image: url(../img/eth-16.jpg); background-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;cursor: pointer;
}


/*********************************************
*********************************************
RADIO BUTTON
*********************************************
**********************************************/
.event label, .event input[type="radio"] {
    width: 24px;
    height: 24px;
    left: 258px;
    top: 36px;
    position: absolute;
    display: block;
}
/* Since the input needs to precede all the other elements, give it a higher z-index, to be on top of the label and to be clickable. */
.event input[type="radio"] {
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}
.event label:after {
  /* Circle surranding radio button */
  font-family: 'fontawesome-selected'; 
  content: '';  
  z-index: 9; /* Just behind the button */

  background: #fff;
  border-radius: 0%;
  color: #41838E;
  font-size: 21px;
  height: 100%;
  width: 100%;
  left: -2px;
  top: -3px;
 
  position: absolute;
  text-align: center;
}



/*********************************************
*********************************************
CONTENT WRAPPER
*********************************************
**********************************************/
/* A wrapper with perspective to disorientate the content wrapper at an angle. With a left margin that will move content to the side */
.content-perspective {
  margin-left: 341px;
  position: relative;
  -webkit-perspective: 500px;
  width: 650px;cursor: pointer; 
}
/* A white line to "connect" content to input.
It’s important that we set the pseudo-class to the perspective wrapper since we don’t want it to rotate like anything else inside.*/
.content-perspective:before {
    content: '';
    width: 117px;
    left: -118px;
    top: 42px;
    position: absolute;
    height: 5px;
    z-index: -1;
    background: #fff;
}

/* Content will be rotated 10 degrees, which, together with a transform origin set to the outer top and left, will make it appear as if its right side is being pushed back: */
.content {
  -webkit-transform: rotateY(0deg);
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
}
/* Content's background */
.content-inner {
  position: relative;
  padding: 20px;
  color: #333;
  border-left: 5px solid #41838e;
  /* The shadow is almost unseenable due to very small alpha */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  background-color: rgb(210, 226, 240);
}
/* Small arrow left of content */
.content-inner:hover {
     
     background-color: rgb(39, 43, 34);
     box-shadow:4px 0px 6px rgba(4, 245, 85, 0.788);
     
    color: #c4b70d;
     
    
}

 
.content-inner h3 {
 
  font-size: 20px;font-weight: 700;

}
 
 
 


 
    @media only screen and (max-width: 680px){

      .thumb {
       display: none;
      }
       
      .timeline {
        position: relative;
        padding: 30px 0px 50px 37px;
        font-family: 'Gorditas', Arial, sans-serif;
      }
       
      .timeline:before {
          content: '';
          position: absolute;
          width: 8px;
          height: 100%;
          top: 0;
          left: 22px;
          
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);
      }
      .event label, .event input[type="radio"] {
        width: 24px;
        height: 24px;
        left: -21px;
        top: 31px;
        position: absolute;
        display: block;
    }

    .content-perspective {
      margin-left: 15px;
      position: relative;
      -webkit-perspective: 600px;
      width: 100%;
      top: -5px;
    }
  }