.salesintro i:hover { cursor:pointer;}
.herolot {}
.herolot img {width:100%;}
.buttons i:hover { cursor:pointer;}
#container ul { list-style: none; /*display:table;*/}
#container .buttons { margin-bottom: 20px; }
#container .list .lotdesc {display:block;width:80%;text-align:left;height:auto;font-size:1.4em;}
#container .list li { width: 100%; border-bottom: 1px dotted #CCC; margin-bottom: 10px; padding-bottom: 10px; }
#container .list .lotimage { width:10%; float:left; padding:10px 10px;}


#container .grid ul {  margin-right:auto; margin-left:auto; padding:0; }
#container .grid li { display:table-cell; float: left;  height: auto; min-height:450px; border-right: 1px dotted #eee; border-bottom: 1px dotted #eee; padding:15px 15px ; }
.lotcontainer {position: relative; }
.picture-list .grid li {margin:0; padding:0;}
#container .grid .lotimage {padding-right:5px; }
#container .grid .lotdesc {float:left;width:100%;text-align:left;padding-top:5px;padding-right:5px;font-size:1.2em;}

input { border-top:none;border-right:none;border-left:none;border-bottom:1px #002d58 solid; font: 18px/1.8 "Noto Sans TC", "arial", "微软雅黑"; }
.btn { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; border:none; border-radius:12px;  padding: 1.5px 30px 1.5px 30px; font: 12px / 1.2; color:#fff; background-color: #000; /* blue */}

.btn:hover { background-color: #002d58; /* white */ color: #fff; /*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/ cursor:pointer;}

.page-warp h3 small { padding-left:20px;}
.page-warp .search_lot input { margin-top:10px;}
.content {width:auto;}

.ttt{color:red;}
.main_c { padding-left:7%; padding-right:7%; }

.header {
  
 

}
.sticky {
  position:fixed;
  top: 0px;
  background:#eee;
  left:6.95%;
  right:6.95%;

}
 
.sticky2 {
  position:fixed;
  top: 140px; 
  left:70%;
  width:20% !important;
 


} 
  
  .overlay {
  position: absolute; 
  bottom: 0; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.3); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: red;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/*.lotimage:hover .overlay {
  opacity: 1;
}*/
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .page-warp {
  padding-top: 0px;
  padding-bottom:15px;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.page-warp {width:60%;margin-left:auto;margin-right:auto;padding-top:30px;}
.herolot {height:60%;}
.salesheader { display: block; font-size:1em; font-weight:bold;font-family: "Helvetica Neue", "Helvetica", "Arial", "微软雅黑";}
.salessubheader { display: block;  font-size:0.8em; font-weight:normal;font-family: "Noto Sans TC", "arial", "微软雅黑";}
.title_section { display:block; padding:10px 10px 10px 10px;background-color:#eee; z-index:9999;} 
.lotdetails {float:none; bottom:-30px;font-size:0.7em !important;}
.picture-list .grid li {width:100%;}
#container .grid li {padding:5px 5px; min-height:350px;}
#container .grid .lotdesc { font-size:0.8em; }
#container .list .lotimage { width:40%; float:left; padding:10px 10px;}
#container .list .lotdesc { float:none; width: 100%;font-size:0.9em; }
#container .list .lotno {font-weight:400; font-size:1.5em}
#container .list .artist2 {font-weight:100; font-size:0.8em}
#container .list .item2 {font-weight:100; font-size:0.8em}
#container .list .estimate_price {font-weight:400; font-size:0.8em}
#container {width:100%;}
#container .list ul {width:100%;}
.sidenav { display:none; }
.timeline {display:block;}
.page-warp {width:90%}
.sales_msg_block {display:block; letter-spacing: 2px;padding-bottom:10px;}
.search_lot {padding-right:5%; padding-left:5%;}
.sales_cat_img { width:60%; display:block;padding-top:10px;padding-bottom:10px;}
.sales_cat_schedule { float:none;width:90%;display:block;}
.sales_date {}
.sales_time {display:block;}
.sales_venue {}
.sidenav { display:none; }
.timeline {display:block;}
.salesintro_title {display:block;}

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.page-warp {width:60%;margin-left:auto;margin-right:auto;padding-top:30px;}
.salesheader { display: block; margin-right: 0.4em;font-size:1.2em; font-weight:bold;font-family: "Helvetica Neue", "Helvetica", "Arial", "微软雅黑";}
.salessubheader { display: block; margin-right: 0.4em;font-size:1em; font-weight:normal;font-family: "Noto Sans TC", "arial", "微软雅黑";}	
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}	
.lotdetails {float:none; }
.picture-list .grid li {width:100%;}
#container .grid li {padding:5px 5px; min-height:350px;}
#container .grid .lotdesc { font-size:1.2em; }
#container .list .lotimage { width:40%; float:left; padding:10px 10px;}
#container .list .lotdesc { float:none; width: 100%;font-size:0.9em; }
#container .list .lotno {font-weight:400; font-size:2.5em}
#container .list .artist2 {font-weight:100; font-size:1em}
#container .list .item2 {font-weight:100; font-size:1em}
#container .list .estimate_price {font-weight:400; font-size:1em}
#container {width:100%;}
#container .list ul {width:100%;}
.sidenav { display:none; }
.timeline {display:block;}
.salesintro_title {display:block;}
/*#container .list .lotcontainer {}*/
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.page-warp {width:60%;margin-left:auto;margin-right:auto;padding-top:30px;}
.salesheader { font-size:1.5em; font-weight:bold;font-family: "Helvetica Neue", "Helvetica", "Arial", "微软雅黑";}
.salessubheader { font-size:1em; margin-right: 0.4em;font-weight:normal;font-family: "Noto Sans TC", "arial", "微软雅黑";}
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}	
.picture-list .grid li {display:flex;width:47%;}	
#container .grid { display:flex;display: -webkit-flex; /* Safari */flex-wrap: wrap;}
#container .grid li {-webkit-flex: 1 0 30%;  /* Safari 6.1+ */-ms-flex: 1 0 30%;  /* IE 10 */  flex: 1 0 30%; padding:5px 5px; min-height:300px;}
/*#container .grid li {padding:5px 5px; min-height:350px;}*/
#container .grid .lotdesc { font-size:1em; }
#container .list .lotimage { width:40%; float:left; padding:10px 10px;}
#container .list .lotdesc { float:none; width: 100%;font-size:0.9em; }
#container .list .lotno {font-weight:400; font-size:2.5em}
#container .list .artist2 {font-weight:100; font-size:1em}
#container .list .item2 {font-weight:100; font-size:1em}
#container .list .estimate_price {font-weight:400; font-size:1em}
#container {width:100%;}
#container .list ul {width:100%;}
.sidenav { display:none; }
.salesintro_title {display:block;}
.timeline {display:block; }
/*#container .list .lotcontainer {left:20%;}*/
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.page-warp {width:80%;margin-left:auto;margin-right:auto;padding-top:30px;}	
.salesheader { font-size:2.5em; font-weight:bold;font-family: "Helvetica Neue", "Helvetica", "Arial", "微软雅黑";}
.salessubheader { font-size:1.5em; font-weight:normal;font-family: "Noto Sans TC", "arial", "微软雅黑";}	
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}	
.picture-list .grid li {display:flex;width:30.5%;}	
#container .grid { display:flex;display: -webkit-flex; /* Safari */flex-wrap: wrap;}
#container .grid li {-webkit-flex: 1 0 30%;  /* Safari 6.1+ */-ms-flex: 1 0 30%;  /* IE 10 */  flex: 1 0 30%; padding:5px 5px; min-height:200px;}
/*#container .grid li {padding:5px 5px; min-height:450px;}*/
#container .grid .lotdesc { font-size:1em; }
#container .list .lotimage { width:40%; float:left; padding:10px 10px;}
#container .list .lotdesc { float:none; width: 100%;font-size:1.3em; }
/*#container .list .lotcontainer {left:15%;}*/
#container .list .lotno {font-weight:400; font-size:1.5em}
#container .list .artist2 {font-weight:100; font-size:0.8em}
#container .list .item2 {font-weight:100; font-size:0.8em}
#container .list .estimate_price {font-weight:400; font-size:0.8em}
#container {width:70%;}
#container .list ul {width:70%;}
.sidenav { display:block; }
.timeline {display:none;}
.salesintro_title {display:none;}

} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {
.page-warp {width:80%;margin-left:auto;margin-right:auto;padding-top:30px;}
.salesheader { font-size:3em; font-weight:bold;font-family: "Helvetica Neue", "Helvetica", "Arial", "微软雅黑";}
.salessubheader { font-size:1.5em; font-weight:normal;font-family: "Noto Sans TC", "arial", "微软雅黑";}	
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}	
.picture-list .grid li {display:flex;width:23.5%;}	
#container .grid { display:flex;display: -webkit-flex; /* Safari */flex-wrap: wrap;}
#container .grid li {-webkit-flex: 1 0 30%;  /* Safari 6.1+ */-ms-flex: 1 0 30%;  /* IE 10 */  flex: 1 0 30%; padding:5px 5px; min-height:300px;}
/*#container .grid li {padding:5px 5px;}*/
#container .grid .lotdesc { font-size:1em;  }
#container .list .lotimage { width:20%; float:left; padding:10px 10px;}
/*#container .list .lotcontainer {left:20%;}*/
#container .list .lotno {font-weight:400; font-size:1.5em}
#container .list .artist2 {font-weight:100; font-size:0.8em}
#container .list .item2 {font-weight:100; font-size:0.8em}
#container .list .estimate_price {font-weight:400; font-size:0.8em}
#container .list ul {width:70%}
#container {width:70%;}
.sidenav { display:block; }
.timeline {display:none;}
.salesintro_title {display:none;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1401px) {
.page-warp {width:80%;margin-left:auto;margin-right:auto;padding-top:30px;}
.salesheader { font-size:3em; font-weight:bold;font-family: "Helvetica Neue", "Helvetica", "Arial", "微软雅黑";}
.salessubheader { font-size:1.5em; font-weight:normal;font-family: "Noto Sans TC", "arial", "微软雅黑";}	
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}
.title_section { display:block; padding:30px 40px 30px 40px;background-color:#eee; z-index:9999;}	
.picture-list .grid li {width:30%; font-weight:300;}	
#container .picture_list{width:70%;}
#container .grid .lotdesc { font-size:1em; }
#container .grid { display:flex;display: -webkit-flex; /* Safari */flex-wrap: wrap;}
#container .grid li {-webkit-flex: 1 0 30%;  /* Safari 6.1+ */-ms-flex: 1 0 30%;  /* IE 10 */  flex: 1 0 30%; padding:5px 5px; min-height:300px;}
#container .list .lotimage { width:20%; float:left; padding:10px 10px;}
#container .list ul {width:70%}
#container .list li {width:100%}
/*#container .list .lotcontainer {left:20%;}*/
#container .list .lotno {font-weight:400; font-size:1.5em}
#container .list .artist2 {font-weight:100; font-size:0.8em}
#container .list .item2 {font-weight:100; font-size:0.8em}
#container .list .estimate_price {font-weight:400; font-size:0.8em}
.sales_msg_block { padding-left:10px;letter-spacing: 2px;padding-bottom:10px; padding-right:50px;}
/*.search_lot {padding-right:25%; padding-left:25%;}*/
.sales_cat_img { width:40%; display:table-cell; padding-bottom:20px; vertical-align:top;}
.sales_cat_schedule { width:90%;height:100px;display:table-cell;}
.sales_date {}
.sales_time {display:block;}
.sales_venue {}
.timeline {display:none;}
.salesintro_title {display:none;}
}

.timeline_grad {
    background: #394352; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#d7d2cc, #394352); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#d7d2cc, #394352); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#d7d2cc, #394352); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#d7d2cc, #394352); /* Standard syntax */


}

<!-- -->

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  margin:0;
  padding:0;
 
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: none;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #394352;
  border: 4px solid #d7d2cc;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid #394352;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #394352;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid #394352;
  border-width: 10px 10px 10px 0;
  border-color: transparent #394352 transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  /*background-color: #213D6C;*/
  position: relative;
  border-radius: 6px;
  color:#fff
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 800px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid #394352;
  border-width: 10px 10px 10px 0;
  border-color: transparent #394352 transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}



.sidenav {
  float:right;
  width:25%;
  z-index: 1;
  background: #fff;
  overflow-x: hidden;
  padding: 8px 0;
  top:250px;
}
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block;
}


.bd-toc {
    position: -webkit-sticky;
    position: sticky;
    top: 8rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
}


<!-- hover effect herolot -->
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
}

.middle {
  transition: .5s ease;
  opacity: 1;
  position:relative;
  width:35%;
  top:-100%;
  left:40%;

  text-align: center;
}

.hero:hover .image {
  opacity: 0.3;
}

.hero:hover .middle {
  opacity: 0.8;

}

.text {
  background-color: #2A8CB7;
  display:block;
  color: #fff;
  font-size: 12px;
  padding: 10px 10px;


}

.content .content-overlay2 {
  background: rgba(255,255,255,.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay2{
  opacity: 1;
}



.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
	background:#002d58;
	width:50%;
  font-size:0.8em;
  color: #fff;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  margin:auto;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}