*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100vw;
}



.slider{
    flex: 0 1 auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to left, #000000, #1f1f1f);
    z-index: -1;
    max-width: 100%;
    min-width: 350px;   
     
    }
nav {
    display: grid;
    grid-template-columns: 10% 1fr 1fr 10%;
    min-height: 10vh;
    color: white;
    max-width: 100vw;
}
#Logo{
    grid-column: 2/3;
    font-size: 14px;
}
section {
    display: flex;
    height: 100vh;
    width: auto;
    max-width: 80vw;
    min-width: 75vw;
    justify-content: center;
    align-items: center;
    margin: 0 auto;  
}
.backgroundimage {
    height: 80%;
    width:100%;
    position:relative;
    min-width: 200px;  
}  
.backgroundimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 200px; 
}
.headline {
    position:absolute;
    top: 80%;
    left:10%;
    
    transform: translate(-20%, -70%);
    color: rgb(255, 187, 0);
    z-index:5;
    font-size:calc(14px + 6vw);
    
    

}
.backgroundimage::after{
    content: "";
    background: black;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    opacity: 0.6;
    top: 0;
    
    
}


.about.lead{
    text-align: center;
    padding-left: 13rem;
    padding-left: 11rem;
    padding-left: 10vw;
    padding-right: 10vw;
    z-index: -2;

}
p.lead {
	font-family: "Lora", serif;
	font-size:calc(10px + 1.2vw);
	line-height: 1.8;
    color: #888888;
    text-align: center;
    margin-left: 25vw;
    margin-right: 25vw;
  
   overflow:hidden;
   z-index: -2;
   

   
}
.about {
    max-height: 940px;
    max-width: 100%;
    text-align: center;
    overflow:hidden;
    width: auto;
    height: 100vh;
    min-height: 800px ;
    padding-bottom: 40px;
    
}


.lead {
    min-height: 150px;
    
}

.timelinecontainer {
    width: 70vw;
    margin:50px auto 0 ;
    padding: 20px;
}
h2.aboutme {
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 42, 95);
    margin-right: -30px;
    margin-left: -30px;
    font-size:calc(12px + 0.8vw) ;

}


h3.moreabout {
    font-family: 'Poppins', sans-serif;
    color: rgb(17, 17, 17);
    margin-right: -30px;
    margin-left: -30px;
    font-size:calc(15px + 2vw) ;
    font-weight: 500;
    opacity: 0.9;

}

li {
    position: relative;
    list-style: none;
    margin:50px 0;
    font-weight: 600;
    font-style: bold;
    text-transform: uppercase ;
    font-family: 'Poppins', sans-serif;
    color: black;
    font-size:calc(15px + 0.8vw);
    
}

li::before {
    content: "";
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 100%;
    height: 10px;
    background-color: grey ;
   
    

}

li::after {

    content: "";
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 0;
    height: 10px;
    background-color: rgb(36, 36, 36) ;
    
    animation-duration: .7s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
     
}

li.tdmodelling::after {
    animation-name:tdmodelling
}
@keyframes tdmodelling {
    to{ 
        width: 90% ;
    
    }
    

}
li.electronics::after {
    animation-name:electronics;
}
@keyframes electronics {
    to{ 
        width: 90% ;
    
    }
    

}

li.problem-solving::after {
    animation-name:problemsolving
}
@keyframes problemsolving {
    to{ 
        width: 90% ;
    
    }
    

}

li.branding::after {
    animation-name:branding
}
@keyframes branding {
    to{ 
        width: 90% ;
    
    }
    

}


  
 
  .timeline {
    position: relative;
    max-width: 100vw;
    margin: 0 auto;
    font-family: "Lora", serif;
  }
  

  .timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: rgb(85, 116, 255);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    
  }
  

  .container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    max-height: 100vh;
   
  }
  

  .container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 15px;
    border-radius: 50%;
    max-width: 100vw;
    z-index: 1;
  }

  .left {
    left: 0;
    
  }

  .right {
    left: 50%;

  }
  

  .left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
    max-width: 100vw;
  }
  

  .right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
    max-width: 100vw;
  }
  

  .right::after {
    left: -16px;
    max-width: 100vw;
  }
  
  .content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
    font-size:calc(12px + 0.8vw);
  
    max-width: 100vw;
  }
  h3.content {
    color: rgb(255, 42, 95);
}
footer {
    max-width: 100vw;
    font-family:Lora,serif;
    font-size:calc(10px + 0.5vw);

}

  @media screen and (max-width: 600px) {
 
    .timeline::after {
    left: 31px;
    }
    
    
    

    .container {
    max-width:100vw;
    width: 100vw;
    padding-left: 70px;
    padding-right: 25px;
    font-size:calc(10px + 1.2vw);
    }
    

    .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
    }
  
    .left::after, .right::after {
    left: 15px;
    }

    .right {
    left: 0%;
    }
  }
h3 {
    color: rgb(255, 42, 95);
}
@media screen and (max-width: 375px) {
    .slider {
       
        min-width: 375px;
    }
}