/* .section SECTION
末末末末末末末末末末末末末末末末末末末末末末末末末 */

.section {
  background: #F45B69;
  padding: 50px 0;
}

.section .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section h1 {
  font-size: 2.5rem;
}

.section h2 {
  font-size: 1.3rem;
}


/* TIMELINE
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.timeline ol li.one { background:#b1969b!important}
.timeline ol li.two { background:#a7bad5!important}
.timeline ol li.three { background:#b8cbbc!important}
.timeline ol li.four { background:#c2adb0!important}
.timeline ol li.five { background:#b1969b!important}

.timeline ol li.one::before{ background: #d1c2c4; }
.timeline ol li.two::before{ background: #7ea88c; }
.timeline ol li.three::before{ background:#bacdbe;}
.timeline ol li.four::before{ background: #632f40!important; }
.timeline ol li.five::before{ background: #632f40!important; }

.timeline ol li::before{
    content: "";
    width: 20px;
    height: 20px;
    background: #EE3124;
    border-radius: 50%;
	  position: absolute;
    left: 51%;
    transform: translateX(-50%);
	top:calc(100% + -11px);
	z-index: 99;
}

.timeline ol li:nth-of-type(4)::before, .timeline ol li:nth-of-type(5)::before{
    content: "";
    width: 20px;
    height: 20px;
    background: #1C71B8;
    border-radius: 50%;
	  position: absolute;
    left: 51%;
    transform: translateX(-50%);
	top:calc(100% + -11px);
	z-index: 99;
}

.timeline ol li:nth-of-type(6)::before{
    content: "";
    width: 20px;
    height: 20px;
    background: #D1C2C4;
    border-radius: 50%;
	  position: absolute;
    left: 153%;
    transform: translateX(-50%);
	top:calc(100% + -11px);
	z-index: 99;
}

.timeline ol li:nth-of-type(7)::before, .timeline ol li:nth-of-type(8)::before{
    content: "";
    width: 20px;
    height: 20px;
    background: #7EA88C;
    border-radius: 50%;
	  position: absolute;
    left: 153%;
    transform: translateX(-50%);
	top:calc(100% + -11px);
	z-index: 99;
}

.timeline ol li:nth-of-type(9)::before, .timeline ol li:nth-of-type(10)::before{
    content: "";
    width: 20px;
    height: 20px;
    background: #632F40;
    border-radius: 50%;
	  position: absolute;
    left: 153%;
    transform: translateX(-50%);
	top:calc(100% + -11px);
	z-index: 99;
}

.timeline {
  white-space: nowrap;/*
  overflow-x: hidden;*/
}

.timeline ol {
  font-size: 0;
  /*width: 100vw;*/
  padding: 450px 0 350px 0;
  transition: all 1s;

}


.timeline ol li:nth-child(1){ background: #B0C0DA; }
.timeline ol li:nth-child(2){ background: #99C6D4; }
.timeline ol li:nth-child(3){ background: #BACDBE; }
.timeline ol li:nth-child(4){ background: #939598; }
.timeline ol li:nth-child(5){ background: #98C6D5; }
.timeline ol:nth-child(2) li:nth-child(6){ background: #D1C2C4; }
.timeline ol:nth-child(2) li:nth-child(7){ background: #B0C0DA; }
.timeline ol:nth-child(2) li:nth-child(8){ background: #99C6D4; }
.timeline ol:nth-child(2) li:nth-child(9){ background: #BACDBE; }
.timeline ol:nth-child(2) li:nth-child(10){ background: #632F40; }


.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #000;
}

.timeline ol li:nth-child(1){/*width: 356px; background: no-repeat;*/ }
.timeline ol li:nth-child(1):before {    content: ''; left: 50%;}


.timeline ol li:last-child {/*width: 248px;*/position:relative}

.timeline ol li:last-child:before {content:''; /*width: 0px; height:0px;*/}
.timeline ol li:last-child:after {content:'';background-image:url(../images/timelines/years-young.png);background-repeat:no-repeat;background-size:cover;position:absolute;top: 161px; left: 250px;width:285px;height:250px;z-index:99999}

.timeline ol li:not(:first-child) {
 /* margin-left: 14px;*/
}



.timeline ol li:nth-child(1)::after {left:506px}


.timeline ol li div {
  position: absolute;
  left: calc(0% + 0px);
  width: 250px;
  padding: 0;
  font-size: 1rem;
  white-space: normal;
  color: black;
  text-align:center;
}


.timeline ol li div:first-child {transform:translateY(calc(-100% - 20px));-ms-transform: translateY(-100%) translateY(-10px);}

.timeline ol li div:last-child{margin-top: 27px}

.timline-top{height: 209px!important;}
.timline-top-2009{height: 209px!important;}
.timline-top-2010{height: 209px!important;}
.timline-top-2012{height: 209px!important;}
.timline-top-2014{height: 248px!important;}
.timline-top-2016{height: 381px!important;}
.timline-top-2017{height: 408px!important;}
.timline-top-2018{height: 501px!important;}
.timline-top-2019{height: 451px!important;}
.timline-top-2020{height: 453px!important;}

/**.timeline ol li:nth-child(odd) div {transform: translateY(-100%);} **/
/**.timeline ol li:nth-child(even) div { top: calc(100% + 16px);} **/

.timeline ol li:nth-child(even) div::before { top: -8px; border-width: 8px 0 0 8px;border-color: transparent transparent transparent white;}
.timeline time { display: block; font-size: 26px; font-weight: bold; margin-bottom: 8px;position:relative;}


.timeline ol li:nth-child(odd) div time:after { /*content: '';*/ position:absolute; border-right:2px solid #221E1F; min-height:25px; left: 80px;    bottom: -19px; }

ol li p {font-size: 16px !important; font-style: normal; color: #fff; font-weight: 100; width: 45%; position:absolute;  text-align: center;left: 50%; top:  43%; transform:translate(-50%, -50%)}


.timeline time { display: block; font-size: 26px; font-weight: bold; margin-bottom: 8px;position:relative;    width: 75%;  margin: 0 auto;  padding: 10px 0px; border-radius: 8px;  background: red; color: #fff}


ol li:first-child time{background: rgb(176,192,218); background: linear-gradient(90deg, rgba(176,192,218,1) 11%, rgba(76,105,142,1) 68%) }
ol li:nth-child(2) time{background: rgb(153,198,212); background: linear-gradient(90deg, rgba(153,198,212,1) 11%, rgba(42,162,187,1) 68%);}
ol li:nth-child(3) time{background: rgb(186,205,190); background: linear-gradient(90deg, rgba(186,205,190,1) 11%, rgba(131,170,143,1) 68%);}
ol li:nth-child(4) time{background: rgb(205,207,208); background: linear-gradient(90deg, rgba(205,207,208,1) 11%, rgba(101,102,105,1) 68%);}
ol li:nth-child(5) time{background: rgb(153,198,212); background: linear-gradient(90deg, rgba(153,198,212,1) 11%, rgba(32,160,186,1) 68%);}


ol li:nth-child(1) time.a{background: rgb(196,177,180); background: linear-gradient(90deg, rgba(196,177,180,1) 11%, rgba(137,96,105,1) 68%);}
ol li:nth-child(2) time.b{background: rgb(176,192,218); background: linear-gradient(90deg, rgba(176,192,218,1) 11%, rgba(76,105,142,1) 68%)}
ol li:nth-child(3) time.c{background: rgb(153,198,212); background: linear-gradient(90deg, rgba(153,198,212,1) 11%, rgba(42,162,187,1) 68%);}
ol li:nth-child(4) time.d{background: rgb(186,205,190); background: linear-gradient(90deg, rgba(186,205,190,1) 11%, rgba(131,170,143,1) 68%);}
ol li:nth-child(5) time.e{background: rgb(196,177,180); background: linear-gradient(90deg, rgba(196,177,180,1) 11%, rgba(137,96,105,1) 68%);}

.timline-top-2016 p:nth-of-type(1){ top: 87px; width: 127px; text-align: left; font-size: 14px !important;}
.timline-top-2016 p:nth-of-type(2){ top: 220px; width: 126px; text-align: left; font-size: 14px !important;}
.timline-top-2016 p:nth-of-type(3){ width: 124px; text-align: left; top: 310px; font-size: 14px !important;}

.timline-top-2017 p:nth-of-type(1){ top: 68px; width: 162px; text-align: left; font-size: 14px !important;}
.timline-top-2017 p:nth-of-type(2){ top: 145px; width: 162px; text-align: left; font-size: 14px !important;}
.timline-top-2017 p:nth-of-type(3){ width: 160px; text-align: left; top: 259px; font-size: 14px !important;}

.timline-top-2018 p:nth-of-type(1){ top: 75px; width: 185px; text-align: left; left: 138px; font-size: 14px !important;}
.timline-top-2018 p:nth-of-type(2){ top: 145px; width: 159px; text-align: left; font-size: 14px !important;}
.timline-top-2018 p:nth-of-type(3){ width: 169px; text-align: left; top: 185px; left: 130px; font-size: 14px !important;}
.timline-top-2018 p:nth-of-type(4){ width: 169px; top: 213px; left: 130px;text-align: left; font-size: 14px !important;}
.timline-top-2018 p:nth-of-type(5){ width: 169px; top: 324px; left: 130px;text-align: left; font-size: 14px !important;}

.timline-top-2019 p:nth-of-type(1){ top: 140px; width: 200px; text-align: left; font-size: 14px !important;left: 131px;}
.timline-top-2019 p:nth-of-type(2){ top: 275px; width: 200px; text-align: left; font-size: 14px !important;left: 131px;}
.timline-top-2019 p:nth-of-type(3){ width: 200px; text-align: left; top: 315px; font-size: 14px !important;left: 131px;}
.timline-top-2019 p:nth-of-type(4){ width: 199px; text-align: left; top: 357px; font-size: 14px !important;left: 131px;}

.timline-top-2020 p:nth-of-type(1){ top: 120px; width: 168px; text-align: left; font-size: 14px !important;}
.timline-top-2020 p:nth-of-type(2){ top: 265px; width: 168px; text-align: left; font-size: 14px !important;}
.timline-top-2020 p:nth-of-type(3){ width: 168px; text-align: left; top: 350px; font-size: 14px !important;}

/*LIST BULLETS*/
.timline-top-2016 p:nth-of-type(1):before, .timline-top-2016 p:nth-of-type(2):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #1C71B8; position: absolute;top: 5px;left: -14px;
}
.timline-top-2016 p:nth-of-type(3):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}


.timline-top-2017 p:nth-of-type(1):before{content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #1C71B8; position: absolute;top: 5px;left: -14px;}
.timline-top-2017 p:nth-of-type(2):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #632F40; position: absolute;top: 5px;left: -14px;}
.timline-top-2017 p:nth-of-type(3):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}

.timline-top-2018 p:nth-of-type(1):before{content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #1C71B8; position: absolute;top: 5px;left: -14px;}
.timline-top-2018 p:nth-of-type(2):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #1C71B8; position: absolute;top: 5px;left: -14px;}
.timline-top-2018 p:nth-of-type(3):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #632F40;position: absolute;top: 5px;left: -14px;}
.timline-top-2018 p:nth-of-type(4):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}
.timline-top-2018 p:nth-of-type(5):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}
.timline-top-2018 p:nth-of-type(6):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}

.timline-top-2019 p:nth-of-type(1):before{content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #1C71B8; position: absolute;top: 5px;left: -14px;}
.timline-top-2019 p:nth-of-type(2):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2; position: absolute;top: 5px;left: -14px;}
.timline-top-2019 p:nth-of-type(3):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}
.timline-top-2019 p:nth-of-type(4):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}

.timline-top-2020 p:nth-of-type(1):before{content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2; position: absolute;top: 5px;left: -14px;}
.timline-top-2020 p:nth-of-type(2):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2; position: absolute;top: 5px;left: -14px;}
.timline-top-2020 p:nth-of-type(3):before {content: ""; width: 10px; height: 10px;  border-radius: 50%; background: #735EA2;position: absolute;top: 5px;left: -14px;}


div p span.dashlist{ position:relative;padding-left:15px;display:block;}
div p span.dashlist:before{content:'\226B'; position:absolute;font-size: 14px;display:block;top:-3px;color:#fff;left:-3px}



/* TIMELINE ARROWS
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.arrows{margin: 0 auto; width:10%;}


.timeline .arrows {display: flex;justify-content: center;position: relative; bottom: 0px;
}

.timeline .arrows .arrow__prev {
  margin-right: 20px;
}

.timeline .disabled {
  opacity: .5;
}

.timeline .arrows img {
  width: 45px;
  height: 45px;
}

    
.green-label{width: 50%;height: 50px;background: #85AB91;position: relative;float: left;}
.green-label p {color: #fff;  position: absolute; left: 60%; top: 50%;transform: translate(-50%, -50%);}


.green-label::after{content: "";width: 50%;height: 0px;border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-left: 27px solid #85ab91;position: absolute;right: -52.8%;}


.blue-label{width: 50%;height: 50px;background-image: linear-gradient(to right, #009EB8, #fff);position: relative;z-index:-1;/* top: -50px; *//* left: 650px; */float: right;}
.blue-label p{color: #fff;position: absolute;left: 14%;top: 50%;transform: translate(-6%, -50%);z-index: 1;}






/* GENERAL MEDIA QUERIES
末末末末末末末末末末末末末末末末末末末末末末末末末 */
@media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto; 
  }
  
  .timeline ol {
    padding: 0;
    transform: none !important;
  }
  
  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }
  
  .timeline ol li:first-child {
    margin-top: 25px;
  }
  
  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }
  
  .timeline ol li div {
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }
  
  .timeline ol li div {
    position: static;
  }
  
  .timeline ol li:nth-child(odd) div {
    transform: none;
  }
  
  .timeline ol li:nth-child(odd) div::before,
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }

  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {  display: none;}
	
}