@media only screen and (max-width: 480px) {
  img,
  iframe,
  video {
    max-width: 100%;
  }

  .responsive_sec {
    text-align: center;
    margin: 30px 0;
    display: block;
  }

  .left-side {
    display: none;
  }

  .left-side-inner {
    padding: 0px 10px;
  }

  .right-side {
    width: 100%;
  }

  .banner_sec_l {
    padding: 30px 0px;
    width: 80%;
    margin: 0 auto;
  }

  .header_mid {
    display: block;
    line-height: 20px;
    text-align: center;
  }

  .content_sec {
    padding: 20px;
  }

  .copyright_sec {
    width: 265px;
    position: inherit;
    margin: 0 auto 50px;
  }

  .top_nav {
    width: 250px;
    margin: 40px auto 0;
  }

  /*.top_nav ul li a {
    padding: 10px 10px 10px 50px;
  } */

  .box_sec_main {
    display: block;
  }

  /* ----- timeline_sec------- */

  .content_timeline_sec_main h2 {
    font-size: 18px;
    margin-bottom: 10px;
   /* text-align: center;*/
  }

  .content_timeline_sec {
    display: block;
   /* text-align: center; */
  }

  .content_timeline_sec_l h1 {
    font-size: 23px;
    line-height: 31px;
    margin-bottom: 20px;
  }

  .content_timeline_sec_l {
    width: 250px;
    margin-bottom: 30px;
  }

  .content_timeline_sec_r {
    width: auto;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 0px;
  }

  .cd-horizontal-timeline {
    display: block;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 auto;
    width: 70%;
  }

  .cd-horizontal-timeline .events a
{
    padding: 10px;
    font-size: 10px;
    bottom: 0;
    height: 50px;
    width: 160px;
  }

  .cd-horizontal-timeline .events-content li {
    width: auto;
  }

  .click_btn.blue_btn
{
    font-size: 10px;
    padding: 11px;
    margin-right: 8px;
}

  .click_btn {
    font-size: 11px;
    padding: 12px 7px;
    margin-right: 10px;
    text-align: center;
  }

  .cd-horizontal-timeline .events-content li > * {
    margin: 10px auto;
  }

  .cd-timeline-navigation a.prev, .cd-timeline-navigation a.next {
    
    background-size: 30px;
    
  }
  .cd-timeline-navigation a.prev {
   
    left: -12px;
   
  }
  .cd-timeline-navigation a.next {
    right: -19px;
  }
  .cd-horizontal-timeline .events-content h2 {
   
    font-size: 16px !important;
   
  }
	
	
  .cd-horizontal-timeline .events-content
{
    min-height: 280px;
}
	
	
	.cd-horizontal-timeline .timeline {
  height: 100px;
  }
	
	
.button-one .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 3px;
  border-radius: 5px;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -46px !important;
  left: 20% !important;
  transform: translateX(-50%);
  width: 42%;
  z-index: 9;
}	
	
 .button-two .tooltip
{
    position: absolute;
    background-color: #fff;
    color: #000;
    padding: 3px;
    border-radius: 5px;
    font-size: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    top: -33px !important;
    left: 43% !important;
    transform: translateX(-50%);
    width: 27%;
    z-index: 9;
  }	
	
	
  .button-three .tooltip
{
    position: absolute;
    background-color: #fff;
    color: #000;
    padding: 3px;
    border-radius: 5px;
    font-size: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    top: -33px !important;
    left: 78% !important;
    transform: translateX(-50%);
    width: 32%;
    z-index: 9;
  }		
	
	.onboarding-one
  {
	display: block;
  }
	.onboarding-one .button-one
  {
    margin-bottom: 20px;
    margin-right: 10px;
  }
	.onboarding-two
  {
	display: block;
  }
	.onboarding-two .button-three 
  {
    margin-bottom: 20px;
    margin-right: 10px;
  }
	
	
	
	

  /* ----- timeline_sec------- */
}

@media only screen and (min-width: 481px) and (max-width: 640px) {
  img,
  iframe,
  video {
    max-width: 100%;
  }
  .left-side {
    width: 28%;
    display: none;
  }

  .left-side-inner {
    padding: 0px 10px;
  }

  .right-side {
    width: 100%;
  }

  .banner_sec_l {
    padding: 30px 0px;
    width: 80%;
    margin: 0 auto;
  }

  .content_sec {
    padding: 20px;
  }

  .copyright_sec {
    width: 80%!important;
  }

 /* .top_nav ul li a {
    padding: 10px 10px 10px 50px;
  } */

  /* ----- timeline_sec------- */

  .content_timeline_sec_main h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .content_timeline_sec {
    display: block;
  }

  .content_timeline_sec_l h1 {
    font-size: 23px;
    line-height: 31px;
    margin-bottom: 20px;
  }

  .content_timeline_sec_l {
    width: auto;
    margin-bottom: 30px;
  }

  .content_timeline_sec_r {
    width: auto;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 0px;
  }

  .cd-horizontal-timeline {
    display: block;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 auto;
    width: 70%;
  }

  .cd-horizontal-timeline .events a
{
    padding: 17px;
    bottom: 0;
    height: 50px;
    width: 220px;
    font-size: 11px;
}

  .cd-horizontal-timeline .events-content li {
    width: auto;
  }

  .click_btn.blue_btn
{
    font-size: 11px;
    padding: 10px 20px;
    margin-right: 10px;
}
	

  .click_btn {
    font-size: 11px;
    padding: 12px 7px;
    margin-right: 10px;
    text-align: center;
  }

  .cd-horizontal-timeline .events-content li > * {
    margin: 10px auto;
  }
  .responsive_sec {
    text-align: center;
    display: block;
    width: 150px;
    position: inherit;
    margin: 0 auto 50px;
  }
  .top_nav.responsive_sec {
    width: 310px;
    margin: 40px auto 0;
  }
  .cd-timeline-navigation a.next {
    right: 0;
   
    background-size: 33px;
   
  }
  .cd-timeline-navigation a.prev {
  
    left: 0;
    background-size: 33px;
   
  }
	.cd-horizontal-timeline .timeline {
  height: 100px;
  }
	
	
.button-one .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -61px !important;
  left: 14% !important;
  transform: translateX(-50%);
  width: 32%;
  z-index: 9;
}	
	
	
.button-two .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -49px !important;
  left: 41% !important;
  transform: translateX(-50%);
  width: 24%;
  z-index: 9;
}	
	
.button-three .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -49px !important;
  left: 80% !important;
  transform: translateX(-50%);
  width: 26%;
  z-index: 9;
}	
	
	
.cd-horizontal-timeline .events-content
{
 min-height: 270px;
}	
  .onboarding-one
  {
	display: block;
  }
	.onboarding-one .button-one
  {
    margin-bottom: 20px;
    margin-right: 10px;
  }
	.onboarding-two
  {
	display: block;
  }
	.onboarding-two .button-three 
  {
    margin-bottom: 20px;
    margin-right: 10px;
  }
	
	

  /* ----- timeline_sec------- */
}

@media only screen and (min-width: 641px) and (max-width: 767px) {
  img,
  iframe,
  video {
    max-width: 100%;
  }

  .left-side {
    width: 28%;
  }

  .left-side-inner {
    padding: 0px 10px;
  }

  .right-side {
    width: 72%;
  }

  .content_sec {
    padding: 20px;
  }

  .copyright_sec {
    width: 80%;
  }

  /* ----- timeline_sec------- */

  .content_timeline_sec_main h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .content_timeline_sec {
    display: block;
  }

  .content_timeline_sec_l h1 {
    font-size: 23px;
    line-height: 31px;
    margin-bottom: 20px;
  }

  .content_timeline_sec_l {
    width: auto;
    margin-bottom: 30px;
  }

  .content_timeline_sec_r {
    width: auto;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 0px;
  }

  .cd-horizontal-timeline {
    display: block;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 auto;
    width: 70%;
  }

  .cd-horizontal-timeline .events a
{
    padding: 25px;
    font-size: 12px;
    bottom: 0;
    height: 52px;
    width: 200px;
  }

  .cd-horizontal-timeline .events-content li {
    width: auto;
  }

  .click_btn.blue_btn
{
    font-size: 11px;
    padding: 12px 17px;
    margin-right: 10px;
}

  .click_btn {
    font-size: 11px;
    padding: 12px 7px;
    margin-right: 10px;
    text-align: center;
  }

  .cd-horizontal-timeline .events-content li > * {
    margin: 10px auto;
  }

  .cd-timeline-navigation a.prev {
  
    left: 0;
    background-size: 29px;
 
  }
  .cd-timeline-navigation a.next {
    right: 0;
    
    background-size: 29px;
   
  }
  .cd-horizontal-timeline .events-content {
  
    margin-top: 0;
  }
	
	
.button-one .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -62px !important;
  left: 14% !important;
  transform: translateX(-50%);
  width: 34%;
  z-index: 9;
}
	
.button-two .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -53px !important;
  left: 42% !important;
  transform: translateX(-50%);
  width: 28%;
  z-index: 9;
}	
	
	
.button-three .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -48px !important;
  left: 78% !important;
  transform: translateX(-50%);
  width: 28%;
  z-index: 9;
}	
	
	
.cd-horizontal-timeline .events-content
{
 min-height: 280px;
}	
	
	.onboarding-one
  {
	display: block;
  }
	.onboarding-one .button-one
  {
    margin-bottom: 20px;
    margin-right: 10px;
  }
	.onboarding-two
  {
	display: block;
  }
	.onboarding-two .button-three 
  {
    margin-bottom: 20px;
    margin-right: 10px;
  }
	
	
	
	
	
	
	
	
	
	
  /* ----- timeline_sec------- */
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  img,
  iframe,
  video {
    max-width: 100%;
  }

  .left-side {
    width: 28%;
  }

  .left-side-inner {
    padding: 0px 10px;
  }

  .right-side {
    width: 72%;
  }

  .content_sec {
    padding: 20px;
  }

  .copyright_sec {
    width: 80%;
  }

  /* ----- timeline_sec------- */

  .content_timeline_sec_main h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .content_timeline_sec {
    display: block;
  }

  .content_timeline_sec_l h1 {
    font-size: 23px;
    line-height: 31px;
    margin-bottom: 20px;
  }

  .content_timeline_sec_l {
    width: auto;
    margin-bottom: 30px;
  }

  .content_timeline_sec_r {
    width: auto;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 0px;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 auto;
    width: 70%;
  }

  .cd-horizontal-timeline .events a
{
    padding: 25px 0px;
    font-size: 12px;
    bottom: 0;
    height: 35px;
    width: 180px;
}

  .cd-horizontal-timeline .events-content li {
    width: auto;
  }

  .click_btn.blue_btn
{
    font-size: 11px;
    padding: 12px 17px;
    margin-right: 10px;
}

  .click_btn {
    font-size: 11px;
    padding: 12px 7px;
    margin-right: 10px;
    text-align: center;
  }

  .cd-horizontal-timeline .events-content li > * {
    margin: 10px auto;
  }
	
  .timeline_l
{
    flex: 0 0 30%;
    margin-top: 40px;
}

  .cd-horizontal-timeline .timeline {
    flex: 0 0 70%;
  }

  .timeline_l img
{
    margin-top: 40px;
}

  .timeline_l_blue_btn {
    font-size: 11px;
    padding: 12px;
    left: 0%;
  }
  .cd-timeline-navigation a.prev {
  
    left: 0;
    background-size: 29px;
 
  }
  .cd-timeline-navigation a.next {
    right: 0;
    
    background-size: 29px;
   
  }
	
  .cd-horizontal-timeline .events-content
{
    padding: 36px 0;
    min-height: 250px;
    margin-top: 0;
}
	
.button-one .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -65px !important;
  left: 14% !important;
  transform: translateX(-50%);
  width: 30%;
  z-index: 9;
}	
	
	
.button-two .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -52px !important;
  left: 42% !important;
  transform: translateX(-50%);
  width: 22%;
  z-index: 9;
}
	
	
.button-three .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -52px !important;
  left: 78% !important;
  transform: translateX(-50%);
  width: 25%;
  z-index: 9;
}	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

  /* ----- timeline_sec------- */
}

@media only screen and (min-width: 992px) and (max-width: 1280px) {
  img,
  iframe,
  video {
    max-width: 100%;
  }

  .left-side {
    width: 22%;
  }

  .left-side-inner {
    padding: 0px 10px;
  }

  .right-side {
    width: 78%;
  }

  .content_sec {
    padding: 20px;
  }

  .copyright_sec {
    width: 80%;
  }

  /* ----- timeline_sec------- */

  .content_timeline_sec_main h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .content_timeline_sec {
    display: block;
  }

  .content_timeline_sec_l h1 {
    font-size: 23px;
    line-height: 31px;
    margin-bottom: 20px;
  }

  .content_timeline_sec_l {
    width: auto;
    margin-bottom: 30px;
  }

  .content_timeline_sec_r {
    width: auto;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 0px;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 auto;
    width: 70%;
  }

  .cd-horizontal-timeline .events a
{
    padding: 10px;
    font-size: 12px;
    bottom: 0;
    height: 63px;
    width: 230px;
}

  .cd-horizontal-timeline .events-content li {
    width: auto;
  }

  .click_btn.blue_btn
{
    font-size: 11px;
    padding: 12px 20px;
    margin-right: 10px;
}

  .click_btn {
    font-size: 11px;
    padding: 12px 7px;
    margin-right: 10px;
    text-align: center;
  }

  .cd-horizontal-timeline .events-content li > * {
    margin: 10px auto;
  }

  .timeline_l
{
    flex: 0 0 30%;
    margin-top: 15px;
}

  .cd-horizontal-timeline .timeline {
    flex: 0 0 70%;
  }

.timeline_l img
{
    margin-top: 40px;
}

  .timeline_l_blue_btn {
    font-size: 11px;
    padding: 12px;
    left: 0%;
  }
  .cd-timeline-navigation a.prev {
    
    left: 0;
    background-size: 31px;
    
  }
  .cd-timeline-navigation a.next {
    right: 0;
  
    background-size: 31px;
   
  }
	
	
.button-one .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -66px !important;
  left: 10% !important;
  transform: translateX(-50%);
  width: 22%;
  z-index: 9;
}	
	
	
.button-two .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -53px !important;
  left: 33% !important;
  transform: translateX(-50%);
  width: 17%;
  z-index: 9;
}	
	
	
.button-three .tooltip
{
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px 8px;
  border-radius: 5px;
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  top: -52px !important;
  left: 63% !important;
  transform: translateX(-50%);
  width: 18%;
  z-index: 9;
}	
	
	
	
	
  /* ----- timeline_sec------- */
}

@media only screen and (min-width: 1281px) and (max-width: 1790px) {
  img,
  iframe,
  video {
    max-width: 100%;
  }

  .left-side {
    width: 17%;
  }

  .left-side-inner {
    padding: 0px 10px;
  }

  .right-side {
    width: 83%;
  }

  .content_sec {
    padding: 20px;
  }

  .copyright_sec {
    width: 80%;
  }

  /* ----- timeline_sec------- */

  .content_timeline_sec_main h2 {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .content_timeline_sec {
    display: block;
  }

  .content_timeline_sec_l h1 {
    font-size: 23px;
    line-height: 31px;
    margin-bottom: 20px;
  }

  .content_timeline_sec_l {
    width: auto;
    margin-bottom: 30px;
  }

  .content_timeline_sec_r {
    width: auto;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 0px;
  }

  .cd-horizontal-timeline .events-wrapper {
    margin: 0 auto;
    width: 70%;
  }

  .cd-horizontal-timeline .events a
{
    padding: 8px;
    font-size: 11px;
    bottom: 0;
    height: 60px;
    width: 180px;
}

  .cd-horizontal-timeline .events-content li {
    width: auto;
  }

  .click_btn.blue_btn
{
    font-size: 12px;
    padding: 12px 25px;
    margin-right: 10px;
}

  .click_btn {
    font-size: 11px;
    padding: 12px 7px;
    margin-right: 10px;
    text-align: center;
  }

  .cd-horizontal-timeline .events-content li > * {
    margin: 10px auto;
  }

  .timeline_l {
    flex: 0 0 30%;
  }

  .cd-horizontal-timeline .timeline {
    flex: 0 0 70%;
  }

  .timeline_l img {
    margin-top: 17px;
  }

  .timeline_l_blue_btn {
    font-size: 11px;
    padding: 12px;
    left: 0%;
  }
  .cd-timeline-navigation a.prev {
    
    left: 0;
    background-size: 31px;
    
  }
  .cd-timeline-navigation a.next {
    right: 0;
  
    background-size: 31px;
   
  }
  /* ----- timeline_sec------- */
}