* {
  box-sizing: border-box;
}
/* Set a background color */
body {
  background-color: #fff;
  font-family: Helvetica, sans-serif;
}
.world-map {
  background-image: url("../img/timeline/worldmap.gif");
  background-repeat: no-repeat;
  background-size: cover;
}
/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: -webkit-flex; /* Safari */
  display: flex;
  margin-top: 100px;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 8px;
  background-color: white;
  border: 6px solid #64052f;
  border-radius: 5px;
  top: 50%;
  bottom: 0;
  left: 0;
  margin-left: -3px;
}
.timeline-title {
  margin: 0;
  color: #64052f;
  font-size: 56px;
}
.timeline-year {
  position: absolute;
  font-size: 20px;
  left: -30px;
}
.year1900, .year1901, .year1902,
.year1903, .year1904, .year1905,
.year1906, .year1907, .year1908,
.year1909 {
  margin: 0;
  color: #f35c55;
  position: absolute;
}
.year1900 {
  font-size: 20px;
  left: -20px;
  top: 96px; 
}
.year1901, .year1905 {
  font-size: 20px;
  left: -20px;
  top: 214px; 
}
.year1902 {
  font-size: 20px;
  left: -50px;
  top: 30px; 
}
.year1903 {
  font-size: 20px;
  left: -50px;
  top: 145px; 
}
.year1904 {
  font-size: 20px;
  left: -50px;
  top: 60px;;
}
.year1906 {
  font-size: 20px;
  left: 40px;
  top: 30px; 
}
.year1907 {
  font-size: 32px;
  left: 30px;
  top: 395px; 
}
.year1908 {
  font-size: 20px;
  left: 20px;
  top: 30px; 
}
.year1909 {
  font-size: 20px;
  left: 40px;
  top: 148px; 
}
/* Container around content */
.container1900, .container1901, .container1902, .container1903, .container1904, 
.container1905, .container1906, .container1907, .container1908, .container1909 {
	position: relative;
	background-color: inherit;
	width: 20%;
}
/* The lines on the timeline */
.container1900::after, .container1901::after, .container1902::after, 
.container1903::after, .container1904::after, .container1905::after, 
.container1906::after, .container1907::after, .container1908::after,
.container1909::after {
	content: '';
	position: absolute;
	background-color: white;
	border: 3px solid #64052f;
	z-index: 1;
}
.container1900::after {
	height: 30px;
	right: 50%;
	top: 125px; 
	margin-top: -32px;
}
.container1901::after, .container1905::after {
	height: 150px; 
	right: 50%;
	top: 75px; 
	margin-top: 13px;
}
.container1902::after, .container1906::after, .container1908::after  {
	height: 150px; 
	right: 82%;
	top: 125px; 
	margin-top: -100px;
}
.container1903::after {
	height: 80px; 
	right: 76%;
	top: 75px; 
	margin-top: 13px;
}
.container1904::after {
	height: 120px; 
	right: 82%;
	top: 75px; 
	margin-top: -20px;
}
.container1907::after {
	height: 90px; 
	right: 65%;
	top: 75px; 
	margin-top: -10px;
}
.container1909::after {
	height: 40px; 
	right: 75%;
	top: 75px; 
	margin-top: 56px;
}
/* The actual content */
.content-img {
	padding: 0;
	position: relative;
	border-radius: 6px;
}
.single-container {
	margin: 0 50px;
}
.single-img {
	width: 200px;
}
.top1900 {
	top: -11%; 
}
.bottom1901, .bottom1905 {
	bottom: -96%;
}
.top1902, .top1906, .top1908 {
	top: -94px; 
    left: -35%;
}
.bottom1903 {
	left: -28px;
	bottom: -68%; 
}
.top1904 {
	top: -25%;
    left: -34%;
}
.bottom1907 {
	left: -28px;
	bottom: -62%; 
}
.bottom1909 {
	left: -28px;
	bottom: -69%; 
}
/***** MODAL *****/
.modal {
	top: 70px;
}
.year-title {
  color: #f35c55;
  font-size: 38px;
  font-weight: bold;
}
.chat-box {
  display: none;
  width: 20%;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
}

/***** MEDIA QUERIES FOR DIFFERENT DEVICES SCREEN *****/

@media (max-width: 480px) {
  .timeline {
	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
	flex-wrap: wrap;
  }
  .timeline > div {
	margin: 0 auto;
	margin-bottom: 20px;
	width: 150px;
	height: 150px;
	/*border: 3px solid #64052f;
	border-radius: 50%;*/
  }
  .timeline::after {
	display: none;
  }
  .timeline-title {
	font-size: 36px;
  }
  .container1900::after, .container1901::after, .container1902::after, 
  .container1903::after, .container1904::after, .container1905::after, 
  .container1906::after, .container1907::after, .container1908::after,
  .container1909::after {
	display: none;
  }
  .content-img img {
	display: none;
  }
  .year1900, .year1901, .year1902, .year1903, 
  .year1904, .year1905, .year1906, .year1907, 
  .year1908, .year1909 {
	width: 150px;
	height: 150px;
	position: static;
	font-weight: bold;
	line-height: 7;
	background-repeat: no-repeat;
    background-size: cover;
  }
  .year1900 {
	background-image: url(../img/timeline/1900mobile.png);
  } 
  .year1901 {
	background-image: url(../img/timeline/1901mobile.png);
  } 
  .year1902 {
	background-image: url(../img/timeline/1902mobile.png);
  } 
  .year1903 {
	background-image: url(../img/timeline/1903mobile.png);
  } 
  .year1904 {
	background-image: url(../img/timeline/1904mobile.png);
  } 
  .year1905 {
	background-image: url(../img/timeline/1905mobile.png);
  }
  .year1906 {
	background-image: url(../img/timeline/1906mobile.png);
  }
  .year1907 {
	background-image: url(../img/timeline/1907mobile.png);
  }
  .year1908 {
	background-image: url(../img/timeline/1908mobile.png);
  }
  .year1909 {
	background-image: url(../img/timeline/1909mobile.png);
  }
  .year1907 {
	font-size: 20px;
  }
  
  .single-container {
	margin: 0;
  }
  .chat-title {
	font-size: 9px;
  }
  .chat-box .btn-lg {
	padding: 10px 0px;
  }
}

@media (min-width:481px) and (max-width: 768px) {
  .timeline {
	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
	flex-wrap: wrap;
  }
  .timeline > div {
	margin: 0 auto;
	margin-right: 6px;
    margin-left: 6px;
	margin-bottom: 30px;
	/*padding: 20px;
	border: 3px solid #64052f;
	border-radius: 50%;*/
	width: 150px;
	height: 150px;
	background-repeat: no-repeat;
    background-size: cover;
  }
  .timeline::after {
	display: none;
  }
  .timeline-title {
	font-size: 32px;   
  }
  .container1900, .container1901, .container1902, .container1903, 
  .container1904, .container1905, .container1906, .container1907, 
  .container1908, .container1909 {
	width: 18%;
  }
  .container1900::after, .container1901::after, .container1902::after, 
  .container1903::after, .container1904::after, .container1905::after, 
  .container1906::after, .container1907::after, .container1908::after,
  .container1909::after {
	display: none;
	margin-top: 0;
	color: #f35c55;
	font-size: 20px;
	right: 30%;
	top: 100%;
	border: none;
	background-color: transparent;
  }
  .container1900::after {
	  content: '1900';
  }
  .container1901::after {
	  content: '1901';
  }
  .container1902::after {
	  content: '1902';
  }
  .container1903::after {
	  content: '1903';
  }
  .container1904::after {
	  content: '1904';
  }
  .container1905::after {
	  content: '1905';
  }
  .container1906::after {
	  content: '1906';
  }
  .container1907::after {
	  content: '1907';
  }
  .container1908::after {
	  content: '1908';
  }
  .container1909::after {
	  content: '1909';
  }
  .year1900, .year1901, .year1902, .year1903, 
  .year1904, .year1905, .year1906, .year1907, 
  .year1908, .year1909 {
	width: 150px;
	height: 150px;
	position: static;
	background-repeat: no-repeat;
    background-size: cover;
  }
  .year1900 {
	background-image: url(../img/timeline/1900mobile.png);
  } 
  .year1901 {
	background-image: url(../img/timeline/1901mobile.png);
  } 
  .year1902 {
	background-image: url(../img/timeline/1902mobile.png);
  } 
  .year1903 {
	background-image: url(../img/timeline/1903mobile.png);
  } 
  .year1904 {
	background-image: url(../img/timeline/1904mobile.png);
  } 
  .year1905 {
	background-image: url(../img/timeline/1905mobile.png);
  }
  .year1906 {
	background-image: url(../img/timeline/1906mobile.png);
  }
  .year1907 {
	background-image: url(../img/timeline/1907mobile.png);
  }
  .year1908 {
	background-image: url(../img/timeline/1908mobile.png);
  }
  .year1909 {
	background-image: url(../img/timeline/1909mobile.png);
  }
  .year1907 {
	font-size: 20px;
	top: 160px;
  }
  .content-img {
	display: none;
	position: static;
  }
  .single-container {
	margin: 0;
  }
  .single-img {
	width: 100%;
  }
  .chat-title {
	font-size: 12px;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .timeline-title {
	font-size: 48px;   
  }
  .year1909 {
	left: 25px;
  }
  .top1900 {
    top: 3%;
  }
  .top1902, .top1906, .top1908 {
    top: -61px;
  }
  .bottom1903 {
	left: -21px;  
  }
  .top1904 {
	top: -12%;
  }
  .bottom1901, .bottom1905 {
    left: -3%;
  }
  .bottom1907 {
	left: -35px;
  }
  .bottom1909 {
	left: -20px;
  }
}

@media (min-width: 1280px) {
  .timeline-title {
	margin: 0;
	color: #64052f;
	font-size: 56px;
  }
  .timeline-year {
	position: absolute;
	font-size: 20px;
	left: -30px;
  }
  .year1900, .year1901, .year1902,
  .year1903, .year1904, .year1905,
  .year1906, .year1907, .year1908,
  .year1909 {
	margin: 0;
	color: #f35c55;
	position: absolute;
  }
  .year1900 {
	font-size: 20px;
	left: -20px;
	top: 96px; 
  }
  .year1901, .year1905 {
	font-size: 20px;
	left: -20px;
	top: 214px; 
  }
  .year1902 {
	font-size: 20px;
	left: -50px;
	top: 30px; 
  }
  .year1903 {
	font-size: 20px;
	left: -50px;
	top: 145px; 
  }
  .year1904 {
	font-size: 20px;
	left: -50px;
	top: 60px;;
  }
  .year1906 {
	font-size: 20px;
	left: 40px;
	top: 30px;
  }
  .year1907 {
	font-size: 32px;
	left: 30px;
	top: 395px; 
  }
  .year1908 {
	font-size: 20px;
	left: 20px;
	top: 30px; 
  }
  .year1909 {
	font-size: 20px;
	left: 40px;
	top: 148px; 
  }
  /* Container around content */
  .container1900, .container1901, .container1902, .container1903, .container1904, 
  .container1905, .container1906, .container1907, .container1908, .container1909 {
	position: relative;
	background-color: inherit;
	width: 20%;
  }
  /* The lines on the timeline */
  .container1900::after, .container1901::after, .container1902::after, 
  .container1903::after, .container1904::after, .container1905::after, 
  .container1906::after, .container1907::after, .container1908::after,
  .container1909::after {
	content: '';
	position: absolute;
	background-color: white;
	border: 3px solid #64052f;
	z-index: 1;
  }
  .container1900::after {
	height: 30px; 
	right: 50%;
	top: 125px; 
	margin-top: -32px;
  }
  .container1901::after, .container1905::after {
	height: 150px; 
	right: 50%;
	top: 75px; 
	margin-top: 13px;
  }
  .container1902::after, .container1906::after, .container1908::after  {
	height: 150px; 
	right: 82%;
	top: 125px; 
	margin-top: -100px;
  }
  .container1903::after {
	height: 80px; 
	right: 76%;
	top: 75px; 
	margin-top: 13px;
  }
  .container1904::after {
	height: 120px; 
	right: 82%;
	top: 75px; 
	margin-top: -20px;
  }
  .container1907::after {
	height: 90px;
	right: 65%;
	top: 75px; 
	margin-top: -10px;
  }
  .container1909::after {
	height: 40px; 
	right: 75%;
	top: 75px; 
	margin-top: 56px;
  }
  .content-img {
	padding: 0;
	position: relative;
	border-radius: 6px;
  }
  .single-container {
	margin: 0 50px;
  }
  .single-img {
	width: 200px;
  }
  .top1900 {
	top: -27px; /*-11%; */
  }
  .bottom1901, .bottom1905 {
	top: 237px;
	/*bottom: -96%; */
  }
  .top1902, .top1906, .top1908 {
	top: -94px; 
	left: -35%;
  }
  .bottom1903 {
	left: -28px;
	top: 167px;
	/*bottom: -68%; */
  }
  .top1904 {
	top: -65px; /*-25%;*/
	left: -34%;
  }
  .bottom1907 {
	left: -28px;
	top: 153px;
	/*bottom: -62%; */
  }
  .bottom1909 {
	left: -28px;
	top: 169px;
	/*bottom: -69%; */
  }
}