@font-face {
  font-family: 'Kern standard', sans-serif;
  src: url(Kernstandard.otf);
}
*{
    font-family:'Kern standard', sans-serif;
}
@media only screen and (max-width: 600px) {
    .sensing-content{
     margin-bottom:80px;   
    }
    .contentt{
        display:none;
    }
    
  .home {
    scale:0.85;
    margin-top:-30px;
  }
  .headincontent{
      margin-top:0;
  }
  .animation-specs .air-spec1 {
    left: 55%;
    top: 45%;
}
  .animation-specs .air-spec2 {
    left: 51%;
    top:53.3%;
}
.animation-specs .ambient-spec1 {
    right:46%;
}
.animation-specs .ambient-spec2 {
    right: 50%;
}
.animation-specs .conductivity-spec1 {
    right: 52%;
}
.animation-specs .conductivity-spec2 {
    right: 51%;
}
.animation-specs .conductivity-spec3 {
    right:59%;
}
.animation-specs .conductivity-spec4 {
    top: 51.5%;
    right: 56%;
}
}
.headincontent{
    font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 43px;
letter-spacing: -0.02em;


/* White */

color: #FFFFFF;
}
.contentt{
    margin-top:50px;
    font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;

/* White */

color: #FFFFFF;
}
            .sensing-container {
                margin-top: 40px
            }

            @media (min-width: 560px) {

                .sensing-container {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center
                }
            }

            .sensing-animation {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                position: relative
            }

            button.btn-animation.active {
                background:#EDEDED;
            }
            button.btn-animation.active{
                font-weight: bold;
                color:#000000;
                font-weight:500;
            }

            button {
                cursor: pointer
            }

            .animation-container {
                width: 770px;
                height: 436px;
                overflow: hidden;
                position: relative;
                transition: width .1s ease;
                margin-bottom: 30px
            }

            .animation {
                position: absolute;
                z-index: 1;
                top: 0;
                left: 0;
                width: 100%;
                opacity: 0
            }

            .animation-progress {
                position: relative;
                width: 100%;
                height: 65px;
                margin-top: -17%;
                z-index: 3
            }

            

            .progress-bar-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform: scale(.4)
            }

            #bars-graphic,
            #ellipse {
                overflow: visible;
                position: absolute;
                left: 50%;
                transform: translateX(-50%)
            }

            #ellipse {
                top: -170px
            }

            #green-mask {
                width: 100%;
                transform: translateX(-1170px)
            }

            .animation-controls {
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #fff;
                border-radius: 12px;
                padding: 3px;
                position: relative;
                z-index: 3;
                margin: 20px auto 0
            }

            .btn-animation {
                background-color: #fff;
                border-radius: 10px;
                font-size: 16px;
                line-height:19px;
                font-weight:400;
                padding: 13px 20px;
                border: none;
                color: rgba(0, 0, 0, .5);
                transition: all .2s ease
            }

            .animation-content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 5
            }

            .animation-specs {
                list-style: none
            }

            .animation-spec {
                position: absolute;
                display: inline-block;
                background: url(background.png);
                background-position: center center;
                background-size: cover;
                padding: 5px 10px;
                border-radius: 4px;
                font-size: 12px;
                display: flex;
                align-items: center;
                text-transform: uppercase;
            }

            .svg-graphic {
                opacity: 0
            }

            .btn-progress {
                cursor: pointer
            }

            .air-spec,
            .ambient-spec,
            .conductivity-spec,
            .height-spec {
                opacity: 0
            }

            .air-spec1 {
                left: 58%;
                top: 40%
            }

            .air-spec2 {
                left: 60%;
                top: 49.3%
            }

            #air-graphic {
                position: absolute;
                top: 4.56%;
                left: 35.12%;
                width: 24%
            }

            .ambient-spec1 {
                top: 21%;
                right: 54%
            }

            .ambient-spec2 {
                top: 30.5%;
                right: 59%
            }

            #ambient-graphic {
                position: absolute;
                top: 1.9%;
                left: 30.25%;
                width: 44%
            }

            .conductivity-spec1 {
                top: 21%;
                right: 57%
            }

            .conductivity-spec2 {
                top: 31.5%;
                right: 55%
            }

            .conductivity-spec3 {
                top: 43.5%;
                right: 65%
            }
            .conductivity-spec4 {
                top: 48.5%;
                right: 58%
            }

            #conductivity-graphic {
                position: absolute;
                top: 31.9%;
                left: 48.25%;
                width: 12.5%
            }

            .height-spec1 {
                top: 18%;
                left: 53%
            }
            .height-spec2 {
                top: 28%;
                left: 58%
            }
            .height-spec3 {
                top: 34%;
                left: 62%
            }

            #height-graphic {
                position: absolute;
                top: 28.9%;
                left: 35.9%;
                width: 23%
            }

            .sensing-content {
                color: #fff;
                position: relative;
                transition: height .1s ease
            }

            .sensing-copy {
                opacity: 0;
                width: 100%;
                display: none
            }
            img {
                height: auto;
                max-width: 100%;
            }

            @media (min-width: 480px) {
                .sensing-content {
                    color: #fff;
                    max-width: 500px;
                    width: 100%;
                    margin-bottom:50px;
                    min-height: 120px;
                    position: relative;
                    transition: height .1s ease
                }
            }

            @media (min-width: 880px) {
                .sensing-container {
                    position: relative;
                    overflow:hidden;
                }

                .sensing-content {
                    position: absolute;
                    top: 20px;
                    left: 0;
                    z-index: 9;
                    max-width: 500px;
                    width: 25%
                }
            }

            @media (min-width: 480px) {
                .animation-progress {
                    height: 82px
                }

                .progress-bar-container {
                    transform: scale(.6)
                }

                .animation-container {
                    width: 100%;
                    max-width: 860px;
                    padding-bottom: 53%;
                    height: 0;
                    overflow: hidden
                }

                .air-spec1 {
                    left: 62%;
                    top: 25%
                }

                .air-spec2 {
                    left: 64%;
                    top: 35.3%
                }

                .ambient-spec1 {
                    top: 16%;
                    right: 56%
                }

                .ambient-spec2 {
                    top: 26.5%;
                    right: 62%
                }

                .conductivity-spec1 {
                    top: 13%;
                    right: 55%
                }

                .conductivity-spec2 {
                    top: 23.5%;
                    right: 53%
                }

                .conductivity-spec3 {
                    top: 35.5%;
                    right: 64%
                }
                .conductivity-spec4 {
                    top: 48.5%;
                    right: 69%
                }

                .height-spec1 {
                    top: 16%;
                    left: 61%
                }
                .height-spec2 {
                    top: 28%;
                    left: 64%
                }
                .height-spec3 {
                    top: 39%;
                    left: 72%
                }

                .sensing-copy {
                    display: inherit
                }
            }

            @media (min-width: 640px) {
                #bars-graphic {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%)
                }

                .animation-controls {
                    border-radius: 18px;
                    padding: 10px;
                    max-width: 360px;
                    margin-top: 0
                }

                .btn-animation {
                    border-radius: 16px;
                    font-size: 16px;
                    padding: 18px 15px;
                    margin-right: 2px
                }

                .btn-animation:last-child {
                    margin-right: 0
                }

                .progress-bar-container {
                    transform: scale(.75)
                }

                .animation-progress {
                    margin-top: -70px;
                    margin-bottom: -20px;
                    height: 164px
                }

                .animation-spec {
                    padding: 10px;
                    border-radius: 8px;
                    font-size: 12px
                }
            }

            @media (min-width: 880px) {
                .animation-container {
                    max-width: initial;
                    width: 860px;
                    height: 464px;
                    padding-bottom: 0
                }

                .progress-bar-container {
                    transform: scale(1)
                }

                .animation-spec {
                    padding: 15px;
                    border-radius: 10px;
                    font-size: 13px
                }

                .air-spec1 {
                    left: 62%;
                    top: 25%
                }

                .air-spec2 {
                    left: 64%;
                    top: 35.3%
                }

                .ambient-spec1 {
                    top: 16%;
                    right: 56%
                }

                .ambient-spec2 {
                    top: 26.5%;
                    right: 62%
                }

                .conductivity-spec1 {
                    top: 13%;
                    right: 55%
                }

                .conductivity-spec2 {
                    top: 23.5%;
                    right: 53%
                }

                .conductivity-spec3 {
                    top: 35.5%;
                    right: 64%
                }
                .conductivity-spec4 {
                    top: 45.5%;
                    right: 62%;
                }


                .height-spec1 {
                    top: 16%;
                    left: 61%
                }
                .height-spec2 {
                    top: 28%;
                    left: 64%
                }
                .height-spec3 {
                    top: 39%;
                    left: 72%
                }
            }

            @media (min-width: 1200px) {
                .animation-container {
                    width: 930px;
                    height: 500px;
                    padding-bottom: 0
                }
            }