/*************My Media Screen*************/

@media only screen and (max-width : 1224px) {
    #about-me .exra-section.left,
    #about-me .slogen,
    #about-me .exra-section.right {
        width: 100%;
        float: none;
        text-align: center;
    }
    #about-me img {
        max-width: 250px;
    }
}

@media only screen and (max-width : 820px) {
    #my-skills .exra-section {
        width: 100%;
        float: none;
        padding: 2% 0 0% 0;
    }
}

@media only screen and (max-width : 568px) {
    .overlay ul li a {
        font-size: 20px;
    }
    #workandedu h1 {
        font-size: 36px;
        line-height: 50px;
    }
    .skillst {
        padding: 10% 0 0% 0;
    }
}

@media only screen and (max-width : 400px) {
    #workandedu h1,
    #contact h1 {
        font-size: 30px;
        line-height: 40px;
    }
}


/*******TIMELINE Media Screen********/

@media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline ul li {
    margin-left: 20px;
  }
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}