/* -------------------------------------
 * For horizontal version, set the
 * $vertical variable to false
 * ------------------------------------- */
/* -------------------------------------
 * General Style
 * ------------------------------------- */

@font-face {
  font-family: 'Gotham';
  src: url("../fonts/Gotham.otf");
  }

@font-face {
  font-family: 'Gotham_L';
  src: url("../fonts/GothamLight.ttf");
  }

@font-face {
  font-family: 'Gotham_B';
  src: url("../fonts/Gotham-Bold.otf");
  }

@font-face {
  font-family: 'Gotham_Book';
  src: url("../fonts/Gotham-Book.ttf");
  }



/*body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  font-size: 100%;
  font-family: "Noto Sans", sans-serif;
  color: #eee9dc;
  background: #48b379;
}*/



/* -------------------------------------
 * timeline
 * ------------------------------------- */
 
/* #timeline {
  list-style: none;
  margin: 50px 0 30px 120px;
  padding-left: 30px;
  border-left: 8px solid #eee9dc;
}*/
 
#timeline {
  list-style: none;
 /* margin: 50px 300px 30px 400px;*/
  margin: 50px 300px 30px 350px;
  padding-left: 33px;
  padding-top: 0px;
  border-left: 5px solid #eee9dc;
}

#timeline li {
  margin: 40px 0;
  position: relative;
}
#timeline p {
  margin: 0 0 15px;
}

.date {
  /*margin-top: -15px;*/
  margin-top: -18px;
  top: 35%;
  left: -140px;
  font-family: Gotham_L;
  font-size: 1.6em;
  font-weight:normal;
  color:#ffffff;
  line-height: 22px;
  position: absolute;
  text-align:right;
}

.circle {
 /* margin-top: -22px;*/
  margin-top: -30px;
  top: 35%;
  left: -56px;
  width: 40px;
  height: 40px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  
  /* padding: 50px 20px 0;*/
  padding: 50px 30px 15px;
  border-color: transparent;
  border-width: 5px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 25px;
  top: 35%;
/*  margin-top: -25px;*/
  margin-top: -41px;
}
.content:after {
  border-right-color: #00a7d5;
  border-width: 17px;
  top: 35%;
 /* margin-top: -17px;*/
   margin-top: -33px;
}
.content p {
	font-family: Gotham;
	color: #00586F;
	/*color:#000;*/
  max-height: 0;
  color: transparent;
  text-align: left;
  
  /*word-break: break-word;*/
  /*hyphens: auto;*/
  
  overflow: hidden;
}

.hd {
	font-family: Gotham;
	color:#fff !important;
	font-size:1.4em;
	color:#ffffff;
	margin: 0 !important;
	
	
}

.hd2 {
	font-family: Gotham_B;
	color:#fff !important;
	text-align: center !important;
	font-size:3.4em;
	font-weight: bold;
	color:#ffffff;
}

label {
  font-size: 1.4em;
  color:#ffffff;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 2px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked + .relative label {
  cursor: auto;
  transform: translateX(42px);
}

/* space before header after click*/
.radio:checked + .relative label {
	margin-top:20px;
	margin-left:13px;

}
.radio:checked + .relative .circle {
  background: #1a1818;
}
.radio:checked ~ .content {
 /* max-height: 380px;*/
  max-height: inherit;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
/*  max-height: 300px;*/
  max-height: inherit;
  color: #00586F;
  transition: color 0.3s linear 0.3s;
}

.radio:checked ~ .content p img  {
  max-height: 300px;
  transition: linear 0.50s;
}




/* -------------------------------------
 * FOR EXTRA LARGE SCREEN 4000+
 * ------------------------------------- */


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

#timeline {
  list-style: none;
  margin: 50px 300px 30px 2000px;
  padding-left: 33px;
  padding-top: 0px;
  border-left: 5px solid #eee9dc;
}

#timeline li {
  margin: 40px 0;
  position: relative;
}
#timeline p {
  margin: 0 0 15px;
}


/*.date {

  margin-top: -10px;
  top: 35%;
  left: -140px;
  font-family: Gotham_L;
  font-size: 1.6em;
  font-weight:normal;
  color:#ffffff;
  line-height: 22px;
  position: absolute;
  text-align:right;
}*/

.date {
  /*margin-top: -15px;*/
  margin-top: -18px;
  top: 35%;
  left: -140px;
  font-family: Gotham_L;
  font-size: 1.6em;
  font-weight:normal;
  color:#ffffff;
  line-height: 22px;
  position: absolute;
  text-align:right;
}

/*.circle {
  margin-top: -22px;
  top: 35%;
  left: -56px;
  width: 40px;
  height: 40px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}*/


.circle {
 /* margin-top: -22px;*/
  margin-top: -30px;
  top: 35%;
  left: -56px;
  width: 40px;
  height: 40px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  
  /* padding: 50px 20px 0;*/
  padding: 50px 30px 15px;
  border-color: transparent;
  border-width: 5px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 25px;
  top: 35%;
/*  margin-top: -25px;*/
  margin-top: -41px;
}
.content:after {
  border-right-color: #00a7d5;
  border-width: 17px;
  top: 35%;
 /* margin-top: -17px;*/
   margin-top: -33px;
}
.content p {
	font-family: Gotham;
	color: #00586F;
	/*color:#000;*/
  max-height: 0;
  color: transparent;
  text-align: left;
  
  /*word-break: break-word;*/
  /*hyphens: auto;*/
  
  overflow: hidden;
}

/*.hd {
	font-family: Gotham;
	color:#fff !important;
	font-size:1.4em;
	color:#ffffff;
	margin: 0 !important;
	
	
}

.hd2 {
	font-family: Gotham;
	color:#fff !important;
	text-align:center;
	font-size:1.4em;
	color:#ffffff;
}*/

label {
  font-size: 1.4em;
  color:#ffffff;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 2px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked + .relative label {
  cursor: auto;
  transform: translateX(42px);
}

/* space before header after click*/
.radio:checked + .relative label {
	margin-top:20px;
	margin-left:13px;

}
.radio:checked + .relative .circle {
  background: #1a1818;
}
.radio:checked ~ .content {
 /* max-height: 380px;*/
  max-height: inherit;
  max-width: 600px;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
/*  max-height: 300px;*/
  max-height: inherit;
  max-width: 600px;
  color: #00586F;
  transition: color 0.3s linear 0.3s;
}

.radio:checked ~ .content p img  {
  max-height: 300px;
  transition: linear 0.50s;
}

}


 
/* -------------------------------------
 * FOR LARGE SCREEN 1400
 * ------------------------------------- */


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

/*#timeline {
  list-style: none;
  margin: 50px 300px 30px 400px;
  padding-left: 33px;
  padding-top: 0px;
  border-left: 5px solid #eee9dc;
}*/

#timeline {
  list-style: none;
 /* margin: 50px 300px 30px 400px;*/
  margin: 50px 300px 30px 350px;
  padding-left: 33px;
  padding-top: 0px;
  border-left: 5px solid #eee9dc;
}


#timeline li {
  margin: 40px 0;
  position: relative;
}
#timeline p {
  margin: 0 0 15px;
}


/*.date {

  margin-top: -10px;
  top: 35%;
  left: -140px;
  font-family: Gotham_L;
  font-size: 1.6em;
  font-weight:normal;
  color:#ffffff;
  line-height: 22px;
  position: absolute;
  text-align:right;
}*/

.date {
  /*margin-top: -15px;*/
  margin-top: -18px;
  top: 35%;
  left: -140px;
  font-family: Gotham_L;
  font-size: 1.6em;
  font-weight:normal;
  color:#ffffff;
  line-height: 22px;
  position: absolute;
  text-align:right;
}

/*.circle {
  margin-top: -22px;
  top: 35%;
  left: -56px;
  width: 40px;
  height: 40px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}*/


.circle {
 /* margin-top: -22px;*/
  margin-top: -30px;
  top: 35%;
  left: -56px;
  width: 40px;
  height: 40px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}

.content {
  max-height: 20px;
  
  /* padding: 50px 20px 0;*/
  padding: 50px 30px 15px;
  border-color: transparent;
  border-width: 5px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 25px;
  top: 35%;
/*  margin-top: -25px;*/
  margin-top: -41px;
}
.content:after {
  border-right-color: #00a7d5;
  border-width: 17px;
  top: 35%;
 /* margin-top: -17px;*/
   margin-top: -33px;
}
.content p {
	font-family: Gotham;
	color: #00586F;
	/*color:#000;*/
  max-height: 0;
  color: transparent;
  text-align: left;
  
  /*word-break: break-word;*/
  /*hyphens: auto;*/
  
  overflow: hidden;
}

/*.hd {
	font-family: Gotham;
	color:#fff !important;
	font-size:1.4em;
	color:#ffffff;
	margin: 0 !important;
	
	
}

.hd2 {
	font-family: Gotham;
	color:#fff !important;
	text-align:center;
	font-size:1.4em;
	color:#ffffff;
}*/

label {
  font-size: 1.4em;
  color:#ffffff;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top: 2px;
  transition: transform 0.2s linear;
}

.radio {
  display: none;
}

.radio:checked + .relative label {
  cursor: auto;
  transform: translateX(42px);
}

/* space before header after click*/
.radio:checked + .relative label {
	margin-top:20px;
	margin-left:13px;

}
.radio:checked + .relative .circle {
  background: #1a1818;
}
.radio:checked ~ .content {
 /* max-height: 380px;*/
  max-height: inherit;
  max-width: 600px;
  border-color: #eee9dc;
  margin-right: 20px;
  transform: translateX(20px);
  transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;
}
.radio:checked ~ .content p {
/*  max-height: 300px;*/
  max-height: inherit;
  max-width: 600px;
  color: #00586F;
  transition: color 0.3s linear 0.3s;
}

.radio:checked ~ .content p img  {
  max-height: 300px;
  transition: linear 0.50s;
}

}
 
 
 
  /* -------------------------------------
 * FOR 1280 resolution
 * ------------------------------------- */

@media screen and (max-width: 1280px) {
  
 /* #timeline {
    margin-left: 80px;
    padding-left: 0px;
    border-left: none;
	border-left: 4px solid #eee9dc;
	
  }*/
  
  
#timeline {
  list-style: none;
 /* margin: 0px 0px 30px 80px;*/
  margin: 0px 400px 30px 80px;
  padding-left: 2.2px;
  border-left: 3px solid #eee9dc;
}
  
  
  #timeline li {
    margin: 40px 18px;;
  }

  label {
    width: 85%;
    font-size: 1.1em;
	color:#ffffff;
	top: -5px;
	padding-right:20px;
   /* white-space: nowrap;*/
	white-space: wrap;
	/*text-overflow: ellipsis;*/
	text-overflow: none;
	 
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }
  
   /*paragraph position*/
  
 .content {
  max-height: 20px;
  /*padding: 70px 20px 0;*/
  padding: 70px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}

/* Need to open for Mobile version to hide image

.content img {
	display:none;
	
}*/


.content img {
	width:100%;
	hight:50%;
	
	
}
	
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 14px;
  top: 10%;
  margin-top: -14px;
}
.content:after {
  border-right-color: #00a7d5;
  border-width: 11px;
  top: 10%;
  margin-top: -11px;
}

.radio:checked + .relative label {
	margin-top:20px;
	margin-left:0px;
}

  /*.content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before, .content:after {
    border: solid transparent;
    bottom: 100%;
  }*/
 /* .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }*/
 /* .content:after {
    border-bottom-color: #210042;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }*/
  
/*.content:after {
  border-right-color: #210042;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}*/
  .content p {
    font-family: Gotham;
    font-size: 0.8.5em;
    line-height: 1.4;
  }

.hd {
	font-family: Gotham;
	color:#fff !important;
	font-size: 1.1em;
	color:#ffffff;
}

 /* .circle, .date {
    display: none;
  }*/
  
  .date {
  margin-top: -10px;
  top: 10%;
  left: -80px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 10%;
  left: -32px;
  width: 20px;
  height: 20px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}
  
 }
 
 
 
 
 
 
 
 /* -------------------------------------
 * FOR 1024 resolution
 * ------------------------------------- */

 
 
 
 /* -------------------------------------
 * FOR mobile phones 800
 * ------------------------------------- */
@media screen and (max-width: 800px) {
  
 /* #timeline {
    margin-left: 80px;
    padding-left: 0px;
    border-left: none;
	border-left: 4px solid #eee9dc;
	
  }*/
  
  
#timeline {
  list-style: none;
  margin: 0px 0px 30px 80px;
  padding-left: 2.2px;
  border-left: 3px solid #eee9dc;
}
  
  
  #timeline li {
    margin: 40px 18px;;
  }

  label {
    width: 85%;
    font-size: 1.1em;
	color:#ffffff;
	top: -5px;
	padding-right:20px;
   /* white-space: nowrap;*/
	white-space: wrap;
	/*text-overflow: ellipsis;*/
	text-overflow: none;
	 
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }
  
 .content {
  max-height: 20px;
  padding: 70px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}

/* Need to open for Mobile version to hide image

.content img {
	display:none;
	
}*/


.content img {
	width:100%;
	hight:50%;
	
	
}
	
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 14px;
  top: 10%;
  margin-top: -14px;
}
.content:after {
  border-right-color: #00a7d5;
  border-width: 11px;
  top: 10%;
  margin-top: -11px;
}

.radio:checked + .relative label {
	margin-top:20px;
	margin-left:0px;
}

  /*.content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before, .content:after {
    border: solid transparent;
    bottom: 100%;
  }*/
 /* .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }*/
 /* .content:after {
    border-bottom-color: #210042;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }*/
  
/*.content:after {
  border-right-color: #210042;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}*/
  .content p {
    font-family: Gotham;
    font-size: 0.8.5em;
    line-height: 1.4;
  }

.hd {
	font-family: Gotham;
	color:#fff !important;
	font-size: 1.1em;
	color:#ffffff;
}

 /* .circle, .date {
    display: none;
  }*/
  
  .date {
  margin-top: -10px;
  top: 10%;
  left: -80px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 10%;
  left: -32px;
  width: 20px;
  height: 20px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}
  
 }
 
 
 
 
 /* -------------------------------------
 * FOR mobile phones 
 * ------------------------------------- */
@media screen and (max-width: 767px) {
  
 /* #timeline {
    margin-left: 80px;
    padding-left: 0px;
    border-left: none;
	border-left: 4px solid #eee9dc;
	
  }*/
  
  
#timeline {
  list-style: none;
  margin: 0px 0px 30px 80px;
  padding-left: 2.2px;
  border-left: 3px solid #eee9dc;
}
  
  
  #timeline li {
    margin: 40px 18px;;
  }

  label {
    width: 85%;
    font-size: 1.1em;
	line-height: normal;
	color:#ffffff;
	top: -5px;
	padding-right:20px;
   /* white-space: nowrap;*/
	white-space: wrap;
	/*text-overflow: ellipsis;*/
	text-overflow: none;
	 
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }
  
  /* paragraph placement  */
  
 .content {
  max-height: 20px;
  padding: 80px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}

/* Need to open for Mobile version to hide image

.content img {
	display:none;
	
}*/


.content img {
	width:100%;
	hight:50%;
	
	
}
	
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 14px;
  top: 10%;
  margin-top: -14px;
}
.content:after {
  border-right-color: #00a7d5;
  border-width: 11px;
  top: 10%;
  margin-top: -11px;
}

.radio:checked + .relative label {
	margin-top:20px;
	margin-left:0px;
}

  /*.content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before, .content:after {
    border: solid transparent;
    bottom: 100%;
  }*/
 /* .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }*/
 /* .content:after {
    border-bottom-color: #210042;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }*/
  
/*.content:after {
  border-right-color: #210042;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}*/
  .content p {
    font-family: Gotham;
    font-size: 0.8.5em;
    line-height: 1.3;
  }

.hd {
	font-family: Gotham;
	color:#fff !important;
	font-size: 1.1em;
	color:#ffffff;
}

.hd2 {
	font-family: Gotham_B;
	color:#fff !important;
	text-align: center !important;
	font-size:2em;
	font-weight: bold;
	color:#ffffff;
}

 /* .circle, .date {
    display: none;
  }*/
  
  .date {
  margin-top: -10px;
  top: 10%;
  left: -80px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 10%;
  left: -32px;
  width: 20px;
  height: 20px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}
  
 }
 
 
 /* -------------------------------------
 * FOR mobile phones 320
 * ------------------------------------- */
@media screen and (max-width: 396px) {
  
 /* #timeline {
    margin-left: 80px;
    padding-left: 0px;
    border-left: none;
	border-left: 4px solid #eee9dc;
	
  }*/
  
  
#timeline {
  list-style: none;
 /* margin: 0px 0px 30px 80px;*/
  margin: 0px 0px 0px 33px;
  padding-left: 2.2px;
  border-left: 3px solid #eee9dc;
}
  
  
  #timeline li {
    margin: 40px 18px;;
  }

  label {
    width: 85%;
    font-size: 1em;
	line-height: normal;
	color:#ffffff;
	top: -5px;
	padding-right:20px;
   /* white-space: nowrap;*/
	white-space: wrap;
	/*text-overflow: ellipsis;*/
	text-overflow: none;
	 
    overflow: hidden;
    display: block;
    transform: translateX(18px);
  }
  
  /* paragraph placement  */
  
 .content {
  max-height: 20px;
  padding: 90px 20px 0;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.5em;
  position: relative;
}

/* Need to open for Mobile version to hide image

.content img {
	display:none;
	
}*/


.content img {
	width:100%;
	hight:50%;
	
	
}
	
.content:before, .content:after {
  content: "";
  width: 0;
  height: 0;
  border: solid transparent;
  position: absolute;
  pointer-events: none;
  right: 100%;
}
.content:before {
  border-right-color: inherit;
  border-width: 14px;
  top: 10%;
  margin-top: -14px;
}
.content:after {
  border-right-color: #00a7d5;
  border-width: 11px;
  top: 10%;
  margin-top: -11px;
}

.radio:checked + .relative label {
	margin-top:20px;
	margin-left:0px;
}

  /*.content {
    padding-top: 45px;
    border-color: #eee9dc;
  }
  .content:before, .content:after {
    border: solid transparent;
    bottom: 100%;
  }*/
 /* .content:before {
    border-bottom-color: inherit;
    border-width: 17px;
    top: -16px;
    left: 50px;
    margin-left: -17px;
  }*/
 /* .content:after {
    border-bottom-color: #210042;
    border-width: 20px;
    top: -20px;
    left: 50px;
    margin-left: -20px;
  }*/
  
/*.content:after {
  border-right-color: #210042;
  border-width: 17px;
  top: 50%;
  margin-top: -17px;
}*/
  .content p {
    font-family: Gotham;
    font-size: 0.8.5em;
    line-height: 1.3;
  }

.hd {
	font-family: Gotham;
	color:#fff !important;
	font-size: 1.1em;
	color:#ffffff;
}

.hd2 {
	font-family: Gotham_B;
	color:#fff !important;
	text-align: center !important;
	font-size:1.6em;
	font-weight: bold;
	color:#ffffff;
}

 /* .circle, .date {
    display: none;
  }*/
  
  .date {
  margin-top: -10px;
  top: 10%;
  left: -80px;
  font-size: 0.95em;
  line-height: 20px;
  position: absolute;
}

.circle {
  margin-top: -10px;
  top: 10%;
  left: -32px;
  width: 20px;
  height: 20px;
  background: #00a7d5;
  border: 5px solid #eee9dc;
  border-radius: 50%;
  display: block;
  position: absolute;
}
  
 }