/* 
 * Deprecated DNN CSS class names will remain available for some time
 * before being  permanently removed. Removal will occur according to
 * the  following process:
 *
 * 1. Removal will only occur with a major (x.y) release, never
 *    with a maintenance (x.y.z) release.
 * 2. Removal will not occur less than six months after the release
 *    when it was deprecated.
 * 3. Removal will not occur until after deprecation has been noted 
 *    in at least two major releases.
 *
 *                                              |        |Planned |
 *  Name                                        |Release |Removal |
 *----------------------------------------------+--------+--------+
 * Mod{NAME}C                                     5.6.2    6.2
 *   {NAME} = sanitized version of the DesktopModule Name 
 *   Used on <div> tag surrounding Module Content, inside container
 *----------------------------------------------+--------+--------+
 */  



/* PAGE BACKGROUND */
/* background color for the header at the top of the page  */
.HeadBg {
}

/* background color for the content part of the pages */
Body
{
}

.ControlPanel {
}

/* background/border colors for the selected tab */
.TabBg {
}

.LeftPane  { 
}

.ContentPane  { 
}

.RightPane  { 
}

/* text style for the selected tab */
.SelectedTab {
}

/* hyperlink style for the selected tab */
A.SelectedTab:link {
}

A.SelectedTab:visited  {
}

A.SelectedTab:hover    {
}

A.SelectedTab:active   {
}

/* text style for the unselected tabs */
.OtherTabs {
}
    
/* hyperlink style for the unselected tabs */
A.OtherTabs:link {
}

A.OtherTabs:visited  {
}

A.OtherTabs:hover    {
}

A.OtherTabs:active   {
}

/* GENERAL */
/* style for module titles */
.Head   {
}

/* style of item titles on edit and admin pages */
.SubHead    {
}

/* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */
.SubSubHead {
}

/* text style used for most text rendered by modules */
.Normal
{
}

/* text style used for textboxes in the admin and edit pages, for Nav compatibility */
.NormalTextBox
{
}

.NormalRed
{
}

.NormalBold
{
}

/* text style for buttons and link buttons used in the portal admin pages */
.CommandButton     {
}
    
/* hyperlink style for buttons and link buttons used in the portal admin pages */
A.CommandButton:link {
}

A.CommandButton:visited  {
}

A.CommandButton:hover    {
}
    
A.CommandButton:active   {
}

/* button style for standard HTML buttons */
.StandardButton     {
}

/* GENERIC */
H1  {
}

H2  {
}

H3  {
}

H4  {
}

H5, DT  {
}

H6  {
}

TFOOT, THEAD    {
}

TH  {
}

A:link  {
}

A:visited   {
}

A:hover {
}

A:active    {
}

SMALL   {
}

BIG {
}

BLOCKQUOTE, PRE {
}


UL LI   {
}

UL LI LI    {
}

UL LI LI LI {
}

OL LI   {
}

OL OL LI    {
}

OL OL OL LI {
}
OL UL LI   {
}

HR {
}

/* MODULE-SPECIFIC */
/* text style for reading messages in Discussion */    
.Message    {
}   

/* style of item titles by Announcements and events */
.ItemTitle    {
}

/* Menu-Styles */
/* Module Title Menu */
.ModuleTitle_MenuContainer {
}

.ModuleTitle_MenuBar {
}

.ModuleTitle_MenuItem {
}

.ModuleTitle_MenuIcon {
}

.ModuleTitle_SubMenu {
}

.ModuleTitle_MenuBreak {
}

.ModuleTitle_MenuItemSel {
}

.ModuleTitle_MenuArrow {
}

.ModuleTitle_RootMenuArrow {
}

/* Main Menu */

.MainMenu_MenuContainer {
}

.MainMenu_MenuBar {
}

.MainMenu_MenuItem {
}

.MainMenu_MenuIcon {
}

.MainMenu_SubMenu {
}

.MainMenu_MenuBreak {
}

.MainMenu_MenuItemSel {
}

.MainMenu_MenuArrow {
}

.MainMenu_RootMenuArrow {
}

/* Login Styles */
.LoginPanel{
}

.LoginTabGroup{
}

.LoginTab {
}

.LoginTabSelected{
}

.LoginTabHover{
}

.LoginContainerGroup{
}

.LoginContainer{
}

/*edit */

/* this is to make homepage hero image have dark overlay */
.eds_headerBg {
background-color: rgba(0,0,0,0.7);
   background-blend-mode: overlay;
}

/* this is to disable hero banner COLORS only */
.eds_headerBg::after {
background: rgb(0,0,0);  /* these two lines enable linear gradient */
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 25%); 
}

/* change bg color of main menu - after scroll */
.navbar {
  border: 0;
  border-radius: 3px;
  padding: 0.625rem 0;
  margin-bottom: 20px;
  color: #F1C747;
  background-color: #000000 !important;
  box-shadow: 0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15);
  }


/* make sub menu items - have black BG  */
.responsAbilityMenu .raMenuWrapper .edsmm_menuItem > div {
 background-color: #000000;
}

/* make page header - 100 vh height */

.page-header.header-small {
    height: 100vh;
    min-height: 100vh;
    }

/* make card description text pure black */
.section-dark .description,
.section-dark .card-description,
.section-dark .footer-big p,
.section-image .description,
.section-image .card-description,
.section-image .footer-big p {
  color: #000000 !important;
}
/* make card description text pure lighter gray - footer */
.description,
.card-description,
.footer-big p {
  color: #adadad; }

/*make card description bigger font */
.CardDescriptionMakeBiggerFont
{
    font-size:1.5rem;
    line-height: 2.0rem !important;
}

/*horizontal line - edited */
.horzLineEdited
{
   border-top: 4px solid #000000;
}

/*make bg image darker - THIS IS NOT HERO IMAGE */
.card-background:after, .back-background:after,
  .front-background:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 6px; }

    /* yellow button */
     .btn.btn-yellow, .btn.btn-yellow:focus, .btn.btn-yellow:hover {
    background-color: #F1C747;
    color: #000000;
    }

/* button primary settings - for yellowish button */

.btn.btn-primary {
    /*
    color: #fff; */
    color: #000000;
    font-weight:bold;
    background-color: #f1c747;
    border-color: #f1c747;
    box-shadow: 0 2px 2px 0 rgba(241, 199, 71, 0.14), 0 3px 1px -2px rgba(241, 199, 71, 0.2), 0 1px 5px 0 rgba(241, 199, 71, 0.12); }
    .btn.btn-primary:hover {
      color: #fff;
      background-color: #c3991b; 
      border-color: #c3991b; }
    .btn.btn-primary:focus, .btn.btn-primary.focus, .btn.btn-primary:hover {
      color: #fff;
      background-color: #cda631;
      border-color: #c3991b; }   


/*make button label bigger font */
.btn
{
      font-size:1rem;
}
    
/* make font awesome icons with circles - yellow with black color */
.yellowCircleBlackColor
{
    color: #000000 !important;
    background-color: #F1C747;
}

/* select precise decendants - for paragraph - FOOTER */
div.row > div.col-sm-6 > p
{
    font-size: 1.1rem;
    line-height: 1.5rem;
}

/* select precise decendants - for H4 - FOOTER */
div.row > div.col-sm-6 > h4 
{
    font-size: 1.4rem;
    line-height: 1.rem;
    font-weight:bold;
}

/* select precise decendants - for H4 - FOOTER */
div.row > div.col-sm-3 > h4 
{
    font-size: 1.4rem;
    line-height: 1.rem;
    font-weight:bold;
}

/* create padding around cols - FOOTER */
.createPadding
{
    padding:2rem;
    background-color: none;
}

/* create padding around cols - other CONTENT */
.createPadding2
{
    padding-left:4rem;
    padding-right:4rem;
    background-color: none;
}

/* make google map responsive */
.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

/* make google map responsive - iframe */
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* card description 
.card-description
{
    color: #000000 !important;
}
*/

/* adjust copyright PROPERTIES at the very bottom footer */
.float-right {
  float: right !important;
  font-size: 0.75rem !important;
  
  }

  /* Card Title - Mission and Vision Stmts - change properties */
  .adjustSmallerFontWeight
  {
      font-weight: normal;
  }

/* material icons properties */
  .info-horizontal .icon {
  float: left;
  margin-top: 24px;
  margin-right: 10px; }
  .info-horizontal .icon > i {
    
    font-size: 5rem;
    color:#000000;
    
}

/* color black only */
.colorBlack
{
    color: #000000 !important;
}

/* color dark brown only */
.colorDarkBrown
{
    color: #723c0b !important;
}

/* color white only */
.colorWhite
{
    color: #ffffff !important;
}


/* pseudo class hyperlink - secondaryHyperlinkColor  */
a.secondaryHyperlinkColor:link
{
color: #ffffff !important;
text-decoration: underline;
}

a.secondaryHyperlinkColor:visited
{
color: #ffffff;
}

a.secondaryHyperlinkColor:hover
{
color: rgba(255, 255, 255, 0.8) !important;
text-decoration: underline;
}

a.secondaryHyperlinkColor:active
{
color: #ffffff;
}

/* pseudo class hyperlink - footerHyperlinkColor  */
a.footerHyperlinkColor:link
{
color: #8d8d8d !important;
text-decoration: underline;
}

a.footerHyperlinkColor:visited
{
color: #8d8d8d;
}

a.footerHyperlinkColor:hover
{
color: rgba(141, 141, 141, 0.7) !important;
text-decoration: underline;
}

a.footerHyperlinkColor:active
{
color: #8d8d8d;
}

/* css style - no hyperlink underline decoration */
.noUnderLineDecoration
{
    text-decoration: none !important;
}

/* change text decoration underline color of main homepage */

.responsAbilityMenu .raMenuWrapper > ol > .edsmm_menuItem.edsmm_active > span .edsmm_itemContainer
{
	text-decoration: underline;
	text-decoration-color: #f1c747;
	color: #ffffff;
}

/* responsive menu - change attributes */
.navbar-collapse::after {
      
      background-color: black;
      
      }

/* footer - NON HOMEPAGE, OTHER WEBPAGES - footer attributes */
p.bottomFooterNonHomepage
{
    color: #adadad;
    font-size:1rem;
    line-height: 1.4rem;;
}

/* footer - NON HOMEPAGE, OTHER WEBPAGES - footer attributes
HYPERLINK ATTRIBUTES */
.bottomFooterNonHomepageLinks
{
    color:#F1C747;
}

a.bottomFooterNonHomepageLinks:link
{
    color:#F1C747;
}

a.bottomFooterNonHomepageLinks:visited
{
    color:#F1C747;
}

a.bottomFooterNonHomepageLinks:hover
{
    color: rgba(241, 199, 71, .8);
}

a.bottomFooterNonHomepageLinks:active
{
    color:#F1C747;
}

/* footer H5, h6 title - NON HOMEPAGE, OTHER WEBPAGES - footer attributes */
.footerH5
{
    font-size: 1.07rem;
    line-height: 1.55rem;
    margin-top: 0.6rem;
    font-weight: bold;
    font-family: "Roboto Slab";
}

.footerH6
{
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 0.6rem;
}

/* change HR-style2 attibute for the hr line */
hr.eds_style2::after{width:16%;border-bottom:solid 3px #b29080;position:absolute;top:-1px;left:8%;margin-left:-8%;}

hr.eds_style2_a::after{width:16%;border-bottom:solid 3px #ffffff;position:absolute;top:-1px;left:8%;margin-left:-8%;}

hr.eds_style2_a {
    border-bottom: 1px solid #FAF9F6;
}


/* ashtons code */

/* Creative Timeline */

* {
    box-sizing: border-box;
    outline: none !important;
  }
  button:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  a:focus {
    outline: none !important;
  }
  body {
    font-family: "Inter", sans-serif;
    color: #333333;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  img {
    max-width: 100%;
  }
  p,
  li {
    font-size: 20px;
    color: #333333;
    line-height: 1.5;
  }
  p {
    margin: 0 0 20px 0;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    margin-top: 0px;
    line-height: normal;
    font-family: "Poppins", sans-serif;
    line-height: 1.1;
    font-weight: 700;
  }
  .wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1642px;
  }
  .inner-wrapper-padding {
    padding: 0 80px;
  }
  
  .about-timeline {
    background-color: #f3f3f3;
    padding: 140px 0 125px;
  }
  
  .timeline-box h6 {
    font-size: 55px;
    line-height: 1;
    color: #d21e1e;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
    background-color: #f3f3f3;
    position: relative;
    z-index: 1;
    display: inline-block;
    width: auto;
    padding: 0 10px;
    margin-top: 0;
    transform: translate(0, -50%);
  }
  
  .timeline-box p {
    font-size: 18px;
    line-height: 27px;
    color: #000000;
    font-weight: 400;
    margin-bottom: 26px;
    font-family: "Inter", sans-serif;
  }
  .timeline-box p:last-of-type {
    margin-bottom: 15px;
  }
  .start-point h4 {
    font-size: 17px;
    line-height: 23px;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #d21e1e;
    border-radius: 16px;
    display: block;
    width: auto;
    text-align: center;
    padding: 5px 25px;
    position: relative;
    margin-bottom: 45px;
    font-family: "Inter", sans-serif;
  }
  .black-dot {
    width: 21px;
    height: 21px;
    background-color: #000;
    border-radius: 50%;
    display: block;
    margin: 0 auto 62px;
    z-index: 1;
  }
  .start-point {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .start-point:before {
    content: "";
    position: absolute;
    left: 0;
    height: 100%;
    width: 0px;
    background-color: #aaa;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    border-left: 1px solid #aaa;
  }
  .timeline-row .horizontal-line {
    border-top: 1px solid #aaa;
    width: calc(100% - 150px);
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, 0%);
  }
  .timeline-row .verticle-line {
    margin: 0;
    padding: 0;
    width: 2px;
    border-right: 1px solid #aaa;
    height: calc(100% - 150px);
    position: absolute;
    top: 0;
    right: 0;
    margin: auto 0;
    bottom: 0;
  }
  .timeline-row:nth-child(2n + 2) .verticle-line {
    left: 0;
    right: inherit;
  }
  .corner {
    position: absolute;
    border-right: 1px solid #aaa;
    width: 76px;
    height: 76px;
    right: 0;
    border-top: 1px solid #aaa;
    top: 74.9px;
    border-radius: 0 70px 0 0;
    top: 0;
  }
  .timeline-row:nth-child(2n + 2) .corner {
    right: inherit;
    left: 0;
    border-left: 1px solid #aaa;
    border-right: 0;
    border-radius: 70px 0 0 0;
  }
  .corner.bottom {
    bottom: -76px;
    top: inherit;
    border-radius: 0;
    border-top: 0;
    border-bottom: 1px solid #aaa;
    border-radius: 0 0 70px 0;
    right: 0;
    z-index: 1;
    bottom: -1px;
  }
  .timeline-row:nth-child(2n + 2) .corner {
    right: inherit;
    left: 0;
    border-left: 1px solid #aaa;
    border-right: 0;
    border-radius: 70px 0 0 0;
  }
  .timeline-row:nth-child(2n + 2) .corner.bottom {
    border-radius: 0 0 0 70px;
  }
  .timeline-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-bottom: 0px;
    position: relative; /*padding: 0 66px 130px;margin-right: 111px;*/
  }
  .timeline-row:nth-child(2n + 2) {
    justify-content: space-around;
    text-align: right;
    padding: 0 2%;
  }
  .timeline-row:nth-child(2n + 2) {
    flex-direction: row-reverse;
  }
  /*.timeline-row:nth-child(2n+2) .timeline-content-txt { text-align: center; }*/
  .timeline-box {
    /*padding: 45px 50px 130px;*/
    max-width: 550px;
    margin-right: 25px;
    position: relative;
  }
  .timeline-main {
    margin-top: 75px;
  }
  .timeline-row:first-child {
    margin: 0 0px 0 auto;
    max-width: 50%;
    justify-content: space-between;
    padding: 0 0 0 120px;
  }
  .corner.bl {
    bottom: 0;
    left: 0;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-radius: 0 0 0px 100%;
    border-right: none;
    border-top: none;
    height: 76px;
    width: 76px;
  }
  .start-point .corner.bl {
    left: 50%;
    bottom: 0px;
    transform: translateY(100%);
    top: unset;
  }
  .timeline-box:before {
    content: "";
    position: absolute;
    left: 0;
    top: 27.5px;
    height: 1px;
    width: 100%;
  }
  .timeline-box-wrap {
    padding: 45px 0px 0;
    position: relative;
    background: #f3f3f3; /*min-height: 318px;*/
    padding: 0;
    margin-bottom: 90px;
  }
  /*.timeline-row:after{content: ''; position: absolute; left: 50%; top: 74.5px; height: 1px; width: 91%; background-color: #aaa; transform: translateX(-50%);top: 0;} .timeline-row .verticle-line { margin: 0; padding: 0; width: 1px; border-right: 1px solid #aaa; height:calc(100% - 126px); position: absolute; top: calc( 50% + 75px );; right: 0; margin: auto 0; bottom: unset; transform: translateY(-50%);top: 50%; } */
  .timeline-row:first-child::after {
    left: -54px;
    width: 97%;
    transform: none;
  }
  /*.timeline-row:first-child .timeline-box:last-child{margin-right: 5%;} */
  .timeline-content {
    padding: 10px 10px 0;
  }
  .timeline-content-txt {
    padding: 10px 0 0 0;
  }
  .timeline-box.img-right .timeline-content,
  .timeline-box.img-left .timeline-content {
    display: flex;
    align-items: flex-start;
  }
  .timeline-box.img-right .timeline-content img {
    margin-left: 18px;
  }
  .timeline-box.img-left .timeline-content img {
    margin-right: 18px;
  }
  .timeline-box.img-left .timeline-content {
    flex-direction: row-reverse;
  }
  .timeline-row:first-child .timeline-box:first-child img {
    filter: drop-shadow(0 0 27px rgba(0, 0, 0, 0.16));
    -webkit-filter: drop-shadow(0 0 27px rgba(0, 0, 0, 0.16));
    display: block;
    margin: 0;
  }
  .timeline-box-wrap .timeline-content img {
    filter: drop-shadow(0 0 27px rgba(0, 0, 0, 0.16));
    -webkit-filter: drop-shadow(0 0 27px rgba(0, 0, 0, 0.16));
    z-index: 2;
    position: relative;
  }
  .timeline-row:last-child .corner.bottom {
    display: none;
  }
  .timeline-row:nth-child(2n + 1) .timeline-box:last-child .timeline-box-wrap {
    text-align: center;
  }
  .start-point.end-point:before {
    display: none;
  }
  .start-point.end-point {
    position: absolute;
    bottom: 0;
    right: 0%;
    transform: translateX(50%);
  }
  .timeline-row:nth-child(2n + 2) .start-point.end-point {
    left: 0;
    transform: translateX(-50%);
    right: unset;
  }
  
  .timeline-box.img-right .timeline-content-txt {
    text-align: right;
  }
  .timeline-box.img-left .timeline-content-txt {
    text-align: left;
  }
  .timeline-box.img-left,
  .timeline-box.img-right {
    text-align: center;
  }
  .timeline-row:first-child .timeline-box::after {
    left: auto;
    right: 0;
    -webkit-transform: translate(100%, -50%) rotate(0deg);
    transform: translate(100%, -50%) rotate(0deg);
  }
  .timeline-row:first-child .timeline-box:first-child {
    width: 36%;
  }
  .timeline-row .timeline-box:nth-child(3)::after {
    display: none;
  }
  .timeline-row:last-child .verticle-line::after {
    display: none;
  }
  .timeline-row:first-child .timeline-box:nth-child(2)::after {
    display: none;
  }
  
  .timeline-content-img .timeline-content {
    position: relative;
  }
  
  /*==============Responsive==============*/
  
  @media screen and (max-width: 1800px) {
    .timeline-box {
      max-width: 460px;
    }
    .timeline-box.img-right .timeline-content img,
    .timeline-box.img-left .timeline-content img {
      max-width: 220px;
      max-height: 230px;
    }
    .timeline-box-wrap .timeline-content img {
      max-width: 100%;
    }
  }
  
  @media screen and (max-width: 1600px) {
    .timeline-row:first-child .timeline-box:first-child {
      width: 38%;
    }
    .timeline-box {
      max-width: 380px;
    }
    .timeline-box.img-right .timeline-content img,
    .timeline-box.img-left .timeline-content img {
      max-width: 180px;
      max-height: 190px;
    }
    .timeline-box h6 {
      font-size: 50px;
    }
    .about-timeline {
      padding: 120px 0 100px;
    }
    .timeline-box p {
      font-size: 16px;
    }
  }
  
  @media screen and (max-width: 1440px) {
    .about-timeline {
      padding: 100px 0 80px;
    }
    .start-point h4 {
      font-size: 15px;
      letter-spacing: 0;
    }
    .timeline-box h6 {
      font-size: 40px;
    }
    .timeline-row:first-child .timeline-box:first-child {
      width: 45%;
    }
    .timeline-box p {
      font-size: 15px;
      line-height: 1.4;
    }
    .timeline-box {
      max-width: 300px;
    }
    .timeline-box.img-right .timeline-content img,
    .timeline-box.img-left .timeline-content img {
      max-width: 140px;
      max-height: 200px;
    }
    .timeline-box-wrap .timeline-content img {
      max-width: 100%;
    }
    .timeline-row:first-child .timeline-box:nth-child(2) {
      width: 150px;
    }
  }
  
  @media screen and (max-width: 1199px) {
    .about-timeline {
      padding: 90px 0 60px;
    }
    .timeline-box h6 {
      font-size: 34px;
    }
    .timeline-box {
      max-width: 240px;
    }
    .timeline-row:first-child {
      padding: 0 0 0 60px;
    }
    .timeline-row:first-child .timeline-box:first-child {
      width: 42%;
    }
    .timeline-box.img-right .timeline-content,
    .timeline-box.img-left .timeline-content {
      flex-wrap: wrap;
    }
    .timeline-box.img-right .timeline-content img,
    .timeline-box.img-left .timeline-content img {
      max-width: 180px;
      max-height: 200px;
    }
    .top-timeline-arrow.timeline-content-img .timeline-content::after {
      right: 0;
    }
    .img-right.timeline-content-img .timeline-content::after {
      top: -20px;
      right: -45px;
    }
    .timeline-box.img-right .timeline-content-txt {
      width: 90%;
    }
  }
  
  @media screen and (max-width: 1024px) {
    .corner {
      display: none;
    }
    .timeline-row .horizontal-line {
      display: none;
    }
    .timeline-row:first-child {
      max-width: 100%;
      padding: 0;
    }
    .timeline-main {
      margin-top: 0;
    }
    .timeline-row .verticle-line {
      right: 50%;
      transform: translate(50%, 0);
      height: calc(100% - 0px);
    }
    .timeline-row:nth-child(2n + 2) .verticle-line {
      left: auto;
      right: 50%;
    }
    .verticle-line::after {
      display: none;
    }
  
    .timeline-row .timeline-box {
      width: 100%;
      max-width: 100%;
      margin: 0;
    }
    .timeline-row:first-child .timeline-box:first-child {
      width: 100%;
      margin: 0;
    }
    .timeline-row:first-child .timeline-box:nth-child(2) {
      width: 100%;
    }
    .timeline-box p br {
      display: none;
    }
    .timeline-box h6 {
      transform: translate(0, -0%);
      padding: 0;
    }
    .timeline-content {
      padding: 0;
    }
    .timeline-box.img-right .timeline-content-txt {
      width: 100%;
    }
    .start-point.end-point {
      right: 50%;
    }
    .start-point h4 {
      margin-bottom: 0;
    }
    .about-timeline {
      padding: 80px 0;
    }
    .timeline-box::after {
      -webkit-transform: translate(-100%, 100%) rotate(180deg);
      transform: translate(-100%, 100%) rotate(180deg);
      right: 50%;
      top: 20px;
      left: 50%;
    }
    .timeline-box-wrap {
      width: 50%;
      text-align: right;
      padding: 0 30px 0 0;
      margin: 40px 0 0 0;
    }
    .timeline-row .timeline-box img {
      margin: 0 0 0 auto;
    }
    .timeline-row:first-child .timeline-box:nth-child(2)::after {
      display: block;
    }
    .timeline-row:first-child .timeline-box:first-child img {
      margin: 0 0 0 auto;
    }
    .timeline-box.img-right .timeline-content img,
    .timeline-box.img-left .timeline-content img {
      margin: 0 0 0 auto;
    }
    .timeline-row .timeline-box:nth-child(2n) .timeline-box-wrap {
      margin: 40px 0 0 auto;
      padding: 0 0 0 30px;
      text-align: left;
    }
    .timeline-row:nth-child(2n + 1) .timeline-box::after {
      left: auto;
      right: 50%;
      -webkit-transform: translate(0%, 100%) rotate(180deg);
      transform: translate(0%, 100%) rotate(180deg);
      top: 20px;
    }
    .timeline-row .timeline-box:nth-child(2n)::after {
      transform: translate(100%, 100%) rotate(0deg);
      -webkit-transform: translate(100%, 100%) rotate(0deg);
      right: 50%;
      left: auto;
    }
    .timeline-row .timeline-box:nth-child(3)::after {
      display: block;
    }
    .timeline-box.img-left .timeline-content-txt {
      text-align: right;
    }
    .timeline-row:last-child {
      padding-bottom: 70px;
    }
  }
  
  @media screen and (max-width: 640px) {
    .about-timeline {
      padding: 50px 0;
    }
    .timeline-box h6 {
      font-size: 27px;
    }
    .timeline-box p {
      font-size: 14px;
      line-height: 1.4;
    }
    .timeline-box-wrap {
      margin: 30px 0 0 0;
    }
    .timeline-row .timeline-box:nth-child(2n) .timeline-box-wrap {
      margin: 30px 0 0 auto;
    }
    .timeline-box::after,
    .timeline-row:nth-child(2n + 1) .timeline-box::after {
      top: 6px;
    }
    .timeline-box-wrap .timeline-content img {
      max-width: 100%;
    }
    .timeline-box.img-right .timeline-content img,
    .timeline-box.img-left .timeline-content img {
      max-width: 100%;
      max-height: unset;
    }
  }
  


  


 /* MEDIA QUERIES */
/* Mobile first, we start from the smallest viewport width */

/* From 320px and up */
@media (min-width: 320px) {
    .tl-content h1 {
        font-size: 0.8rem;
        background-color: pink;
    }
}

/* From 481px and up */
@media (min-width: 481px) {
    .tl-content h1 {
        font-size: 0.9rem;
        background-color: blue;
    }
}

/* From 769px and up */
@media (min-width: 769px) {
   
}

/* From 1025px and up */
@media (min-width: 1025px) {
    
}

/* From 1201px and up */
@media (min-width: 1201px) {
    
}

/* From 2560px and up */
@media (min-width: 2560px) {
    
}

/* From 3840px and up */
@media (min-width: 3840px) {
    
}

/* Mobile first, we start from the smallest viewport width */