@font-face {
    font-family: "Lato-Regular";
    src: url("../font/Lato-Regular.woff") format("woff");
}

@font-face {
    font-family: "Lato-Bold";
    src: url("../font/Lato-Bold.woff") format("woff");
}

@font-face {
    font-family: "Lato-Italic";
    src: url("../font/lato-italic.woff") format("woff");
}

@font-face {
    font-family: "Lato-Semibold";
    src: url("../font/lato-semibold.woff") format("woff");
}

@font-face {
    font-family: "Lato-Heavy";
    src: url("../font/lato-heavy.woff") format("woff");
}

@font-face {
    font-family: "NotoSans-Black";
    src: url("../font/NotoSans-Black.woff") format("woff");
}

body {
    overflow: auto;
}

#our-team {
    margin-top: 9em;
}

#our-team p {
    font-family: Lato-Regular;
    margin: 0;
    font-size: 16px;
}

#our-team h1 {
    margin-top: 1.5vw;
    font-family: NotoSans-Black;
    font-size: 53px;
    background-image: linear-gradient(180deg, #51d9de, #7ad7f9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#our-team #heading-bg {
    position: relative;
}

#our-team #heading-bg .left {
    position: absolute;
    z-index: -1;
    right: 89.5%;
    transform: translateY(-12%);
    width: 23.7%;
}

#our-team #heading-bg .right {
    position: absolute;
    z-index: -1;
    top: 25%;
    left: 71%;
    width: 29.9%;
}

#our-team #heading-bg .heading {
    margin: 0 auto 12vw;
    width: 80%;
}

#our-team #heading-bg .heading .about-us {
    color: #2f2f2f;
}

#our-team #heading-bg .heading .heading-text {
    color: #5f5e5e;
}

#our-team .badges-container {
    opacity: 0;
    margin: 0 0 -225vw auto;
    position: relative;
}

#our-team .badges-container .icons {
    width: 100%;
}

#our-team .badges-container .bubble {
    opacity: 1;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -o-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
}

#our-team .badges-container .position {
    cursor: pointer;
}

#our-team .badges-container .person {
    cursor: pointer;
}

#our-team .badges-container .person .close-icon {
    visibility: hidden;
    position: absolute;
    width: 2vw;
    left: 45%;
    top: 15.5vw;
    height: 1.5vw;
    fill: white;
    z-index: 1;
}

#our-team .badges-container .person .close-icon-medium {
    top: 10.8vw;
}

#our-team .badges-container .person .close-icon-selected {
    visibility: visible;
}

#our-team .badges-container .person .close-icon-selected:hover {
    transform: scale(1.2);
}

#our-team .badges-container .person .photo {
    position: absolute;
    border-radius: 50%;
}

#our-team .badges-container .person .medium {
    width: 14vw;
    top: -.05vw;
    left: 0%;
}

#our-team .badges-container .person .large {
    top: -.9vw;
    left: -2.5%;
    width: 19.5vw;
}

#our-team .badges-container .person .photo-clicked {
    visibility: hidden;
}

#our-team .badges-container .person .img-hover {
    visibility: hidden;
}

#our-team .badges-container .person .info {
    text-align: center;
}

#our-team .badges-container .person .info p {
    visibility: hidden;
    height: 0;
    opacity: 0;
    -webkit-transition: height .5s ease;
    -moz-transition: height .5s ease;
    -o-transition: height .5s ease;
    transition: height .5s ease;
}

#our-team .badges-container .person .info .name {
    font-family: Lato-Bold;
    color: #5f5e5e;
    font-size: 15px;
    margin: 1vw 0 .2vw 0;
}

#our-team .badges-container .person .info .role {
    font-family: Lato-Regular;
    font-size: 13px;
    color: #5f5e5e;
}

#our-team .badges-container .person .toggle-display {
    height: max-content;
}

#our-team .badges-container .person .toggle-display p {
    transform: scale(.8);
    visibility: visible;
    height: 20px;
    opacity: 1;
}

#our-team .badges-container .hidden {
    filter: opacity(.1);
}

#our-team .badges-container .selected {
    filter: none;
    -webkit-transition: height .5s ease;
    -moz-transition: height .5s ease;
    -o-transition: height .5s ease;
    transition: height .5s ease;
}

#our-team .badges-container .bubble-M {
    width: 14vw;
    height: 14vw;
    background: #5bd9e5;
    border-radius: 50%;
}

#our-team .badges-container .bubble-L {
    width: 18.688vw;
    height: 18.688vw;
    background: #5bd9e5;
    border-radius: 50%;
}

#our-team .badges-container #icon-wrapper-ceo {
    transform: translate(52vw, -7vw);
    width: 8.625%;
}

#our-team .badges-container #icon-wrapper-boss {
    transform: translate(32vw, -12vw);
    width: 18.7%;
}

#our-team .badges-container #icon-wrapper-web-developer {
    transform: translate(17vw, -25vw);
    width: 9.815%;
}

#our-team .badges-container #icon-wrapper-person-1 {
    transform: translate(52vw, -60vw);
    width: 18.7%;
}

#our-team .badges-container #icon-wrapper-calbee {
    transform: translate(67vw, -43vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-person-4 {
    transform: translate(7vw, -36vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-22-years {
    transform: translate(25vw, -66vw);
    width: 8.625%;
}

#our-team .badges-container #icon-wrapper-person-5 {
    transform: translate(39vw, -73vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-person-3 {
    transform: translate(63vw, -79.8vw);
    width: 18.7%;
}

#our-team .badges-container #icon-wrapper-person-2 {
    transform: translate(81vw, -112vw);
    width: 14%;
}

#our-team .badges-container #icon-wrapper-graphic-design {
    transform: translate(21vw, -111vw);
    width: 6.45%;
}

#our-team .badges-container #icon-wrapper-person-6 {
    transform: translate(27vw, -111vw);
    width: 18.7%;
}

#our-team .badges-container #icon-wrapper-cosmoprof {
    transform: translate(48vw, -119vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-web-design {
    transform: translate(53vw, -149.7vw);
    width: 8.625%;
}

#our-team .badges-container #icon-wrapper-project-manager {
    transform: translate(84vw, -147vw);
    width: 8.625%;
}

#our-team .badges-container #icon-wrapper-QandM {
    transform: translate(23vw, -140vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-person-7 {
    transform: translate(40vw, -209vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-200-projects {
    transform: translate(29vw, -211vw);
    width: 8.625%;
}

#our-team .badges-container #icon-wrapper-lewin {
    transform: translate(81vw, -165vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-best-in-singapore {
    transform: translate(6vw, -179vw);
    width: 8.625%;
}

#our-team .badges-container #icon-wrapper-person-8 {
    transform: translate(10vw, -227vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-person-9 {
    transform: translate(7vw, -186vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-person-9 .info .name {
    margin: 1vw 0 1.2vw 0;
}

#our-team .badges-container #icon-wrapper-person-10 {
    transform: translate(63vw, -191vw);
    width: 13.313%;
}

#our-team .badges-container #icon-wrapper-person-11 {
    transform: translate(63vw, -194vw);
    width: 13.313%;
}

#our-team .show {
    opacity: 1;
}

#our-team #our-history {
    display: none;
    position: relative;
    margin: 2vw auto;
    width: 95%;
}

#our-team #our-history .middle-left {
    position: absolute;
    left: -12%;
    width: 47.63%;
}

#our-team #our-history .middle-right {
    position: absolute;
    right: -3%;
    width: 30.47%;
}

#our-team #our-history .heading {
    text-align: center;
    margin-bottom: 5vw;
}

#our-team #our-history .heading .title {
    margin: 0 auto 1vw;
}

#our-team #our-history .heading .additional-h1-tag {
    font-family: NotoSans-Black;
    background-image: linear-gradient(180deg, #51d9de, #7ad7f9);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.4em;
    margin: 0 auto 1vw;
    font-size: 3.313vw;
    letter-spacing: 0;
}

#our-team #our-history .content-wrapper {
    position: relative;
}

#our-team #our-history .content-wrapper .road {
    width: 40%;
    margin: auto;
}

#our-team #our-history .content-wrapper .road .hide-road {
    display: none;
}

#our-team #our-history .content-wrapper .milestone-text {
    position: absolute;
    max-width: 281px;
}

#our-team #our-history .content-wrapper .milestone-text .bubble {
    width: 10vw;
}

#our-team #our-history .content-wrapper .milestone-text p {
    letter-spacing: 0;
    color: #5f5e5e;
    max-width: 232px;
}

#our-team #our-history .content-wrapper .text-2012 {
    top: 10.5%;
    left: 63.3%;
}

#our-team #our-history .content-wrapper .text-2012 p {
    transform: translate(3.5vw, -1.5vw);
}

#our-team #our-history .content-wrapper .text-2007 {
    top: 25.2%;
    right: 72.5%;
}

#our-team #our-history .content-wrapper .text-2007 .bubble {
    float: right;
}

#our-team #our-history .content-wrapper .text-2007 .mobile {
    display: none;
}

#our-team #our-history .content-wrapper .text-2007 p {
    clear: right;
    text-align: right;
    transform: translate(-3.5vw, -1vw);
}

#our-team #our-history .content-wrapper .text-2003 {
    top: 56%;
    left: 73%;
}

#our-team #our-history .content-wrapper .text-2003 p {
    transform: translate(3.5vw, -1.5vw);
}

#our-team #our-history .content-wrapper .text-2000 {
    top: 72%;
    right: 69%;
}

#our-team #our-history .content-wrapper .text-2000 .bubble {
    float: right;
}

#our-team #our-history .content-wrapper .text-2000 .mobile {
    display: none;
}

#our-team #our-history .content-wrapper .text-2000 p {
    clear: right;
    text-align: right;
    transform: translate(-3.5vw, -1vw);
}

@media(min-width:1600px) {
    #our-team {
        margin-top: 9vw;
    }

    #our-team p {
        font-size: 1vw;
    }

    #our-team h1 {
        font-size: 3.313vw;
    }

    #our-team .heading .about-us {
        font-size: 1vw;
    }

    #our-team .badges-container .person .info .name {
        font-size: 1.125vw;
    }

    #our-team .badges-container .person .info .role {
        font-size: 1vw;
    }

    #our-team .badges-container .person .toggle-display p {
        height: 1.25vw;
    }

    #our-team #our-history {
        margin: 2vw auto 0;
    }

    #our-team #our-history .content-wrapper .milestone-text {
        max-width: 17.563vw;
    }

    #our-team #our-history .content-wrapper .milestone-text .bubble {
        max-width: initial;
        width: 71.55%;
    }

    #our-team #our-history .content-wrapper .milestone-text p {
        max-width: 14.5vw;
    }
}

@media(max-width:1024px) {
    #our-team h1 {
        font-size: 32px;
    }

    #our-team #our-history {
        width: 100%;
    }

    #our-team #heading-bg .heading {
        text-align: center;
        margin: 0 auto 5vw;
    }

    #our-team #our-history .content-wrapper .road {
        width: 20%;
        margin: initial;
    }

    #our-team #our-history .content-wrapper .text-2012 {
        top: 12%;
        left: 32%;
    }

    #our-team #our-history .content-wrapper .text-2007 {
        top: 33%;
        right: 0;
        left: 32%;
    }

    #our-team #our-history .content-wrapper .text-2007 .mobile {
        display: initial;
    }

    #our-team #our-history .content-wrapper .text-2007 .desktop {
        display: none;
    }

    #our-team #our-history .content-wrapper .text-2007 .bubble {
        float: none;
    }

    #our-team #our-history .content-wrapper .text-2007 p {
        clear: none;
        text-align: initial;
        transform: translate(3.5vw, -1.5vw);
    }

    #our-team #our-history .content-wrapper .text-2003 {
        top: 55%;
        left: 32%;
    }

    #our-team #our-history .content-wrapper .text-2000 {
        top: 77%;
        right: 0;
        left: 32%;
    }

    #our-team #our-history .content-wrapper .text-2000 .mobile {
        display: initial;
    }

    #our-team #our-history .content-wrapper .text-2000 .desktop {
        display: none;
    }

    #our-team #our-history .content-wrapper .text-2000 .bubble {
        float: none;
    }

    #our-team #our-history .content-wrapper .text-2000 p {
        clear: none;
        text-align: initial;
        transform: translate(3.5vw, -1.5vw);
    }
}

@media(max-width:1000px) {
    #our-team .badges-container {
        margin: 0 0 -300vw auto;
    }

    #our-team .badges-container .person .close-icon {
        width: 21px;
        height: 21px;
        top: 33.5vw;
        left: 20.5vw;
    }

    #our-team .badges-container .person .close-icon-medium {
        top: 25.5vw;
        left: 15.5vw;
    }

    #our-team .badges-container .person .medium {
        width: 35vw;
        top: 0;
        left: 0%;
    }

    #our-team .badges-container .person .large {
        top: 0;
        left: 0;
        width: 45vw;
    }

    #our-team .badges-container .person .info .name {
        margin: 2vw 0 .8vw 0;
    }

    #our-team .badges-container .bubble-M {
        width: 35vw;
        height: 35vw;
    }

    #our-team .badges-container .bubble-L {
        width: 45vw;
        height: 45vw;
    }

    #our-team .badges-container #icon-wrapper-ceo {
        transform: translate(62vw, 5vw);
        width: 20%;
    }

    #our-team .badges-container #icon-wrapper-boss {
        transform: translate(47vw, 12vw);
        width: 50%;
    }

    #our-team .badges-container #icon-wrapper-web-developer {
        transform: translate(68vw, 42vw);
        width: 20%;
    }

    #our-team .badges-container #icon-wrapper-person-1 {
        transform: translate(8vw, 148vw);
        width: 48%;
    }

    #our-team .badges-container #icon-wrapper-calbee {
        transform: translate(16vw, -78vw);
        width: 30%;
    }

    #our-team .badges-container #icon-wrapper-person-4 {
        transform: translate(10vw, 97vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-22-years {
        transform: translate(40vw, -27vw);
        width: 20%;
    }

    #our-team .badges-container #icon-wrapper-person-5 {
        transform: translate(7vw, -170vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-person-3 {
        transform: translate(10vw, 99vw);
        width: 46%;
    }

    #our-team .badges-container #icon-wrapper-person-2 {
        transform: translate(58vw, -169vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-graphic-design {
        transform: translate(33vw, -90vw);
        width: 15%;
    }

    #our-team .badges-container #icon-wrapper-person-6 {
        transform: translate(7vw, -243vw);
        width: 46%;
    }

    #our-team .badges-container #icon-wrapper-cosmoprof {
        transform: translate(4vw, -236vw);
        width: 28.5%;
    }

    #our-team .badges-container #icon-wrapper-web-design {
        transform: translate(13vw, -173vw);
        width: 20%;
    }

    #our-team .badges-container #icon-wrapper-project-manager {
        transform: translate(44vw, -369vw);
        width: 20%;
    }

    #our-team .badges-container #icon-wrapper-QandM {
        transform: translate(62vw, -275vw);
        width: 30%;
    }

    #our-team .badges-container #icon-wrapper-person-7 {
        transform: translate(54vw, -358vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-200-projects {
        transform: translate(81vw, -301vw);
        width: 15%;
    }

    #our-team .badges-container #icon-wrapper-person-8 {
        transform: translate(59vw, -367vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-person-9 {
        transform: translate(5vw, -162vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-person-10 {
        transform: translate(59vw, -390vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-person-11 {
        transform: translate(62vw, -171vw);
        width: 37%;
    }

    #our-team .badges-container #icon-wrapper-lewin {
        transform: translate(46vw, -133vw);
        width: 30%;
    }

    #our-team .badges-container #icon-wrapper-best-in-singapore {
        transform: translate(20vw, -60vw);
        width: 30%;
    }
}

@media(max-width:581px) {
    #our-team #our-history .content-wrapper .milestone-text .bubble {
        width: 30%;
    }

    #our-team #our-history .content-wrapper .milestone-text p {
        font-size: 14px;
    }

    #our-team #our-history .content-wrapper .text-2012 {
        top: 1.5%;
    }

    #our-team #our-history .content-wrapper .text-2007 {
        top: 25.2%;
    }

    #our-team #our-history .content-wrapper .text-2003 {
        top: 49%;
    }

    #our-team #our-history .content-wrapper .text-2000 {
        top: 71%;
    }
}

@media(max-width:500px) {
    #our-team {
        margin-top: 6em;
    }
}

@media(max-width:426px) {
    #our-team .heading {
        margin: 0 auto;
        text-align: center;
    }
}
#icon-wrapper-best-in-singapore {
    position: relative !important;   /* Makes it flow within layout */
    top: 50px !important;            /* Moves it down */
   
  }


#icon-wrapper-person-11 {
    position: relative;
    top: 35px; /* adjust this value as needed */
  }