/* For screens smaller than 425px */
@media (max-width: 425px) {
    .Mystro-center {
        width: 70px;
        height: 70px;
    }

        .Mystro-center h1 {
            font-size: 14px;
        }

    .Container {
        width: 300px;
        height: 300px;
    }

    .t-opac {
        border-width: 7px;
    }

    .sb-item1, .sb-item3, .sb-item4, .sb-item5, .sb-item7, .sb-item8 {
        width: 60px;
        height: 60px;
    }

    .sb-item2, .sb-item6, .sb-item9 {
        width: 50px;
        height: 50px;
    }
}

/* For screens between 426px and 769px */
@media (min-width: 426px) and (max-width: 769px) {
    .Mystro-center {
        width: 180px;
        height: 180px;
    }

    .t-opac {
        border-width: 9px;
    }

    .Container {
        width: 600px;
        height: 600px;
    }

    .sb-item1, .sb-item3, .sb-item4, .sb-item5, .sb-item7, .sb-item8 {
        width: 120px;
        height: 120px;
    }

    .sb-item2, .sb-item6 {
        width: 90px;
        height: 90px;
    }

    .sb-item9 {
        width: 100px;
        height: 100px;
    }

    .sb-item8 {
        width: 130px;
        height: 130px;
    }
}

/* For screens between 769px and 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .Mystro-center {
        width: 180px;
        height: 180px;
    }

    .Container {
        width: 600px;
        height: 600px;
    }

    .sb-item1, .sb-item3, .sb-item4, .sb-item5, .sb-item7, .sb-item8 {
        width: 120px;
        height: 120px;
    }

    .sb-item2, .sb-item6 {
        width: 90px;
        height: 90px;
    }

    .sb-item9 {
        width: 100px;
        height: 100px;
    }

    .sb-item8 {
        width: 130px;
        height: 130px;
    }

    .t-opac {
        border-width: 11px;
    }
}

/* For screens larger than 1024px */
@media (min-width: 1025px) {
    .Mystro-center {
        width: 180px;
        height: 180px;
    }

    .Container {
        width: 600px;
        height: 600px;
    }

    .sb-item1, .sb-item3, .sb-item4, .sb-item5, .sb-item7 {
        width: 120px;
        height: 120px;
    }

    .sb-item2, .sb-item6 {
        width: 90px;
        height: 90px;
    }

    .sb-item9 {
        width: 100px;
        height: 100px;
    }

    .sb-item8 {
        width: 130px;
        height: 130px;
    }

    .t-opac {
        border-width: 11px;
    }
}
/* For all screens */
.Mystro-center {
    background-color: #00A0EA;
    border-radius: 50%;
    -webkit-animation: breathing 3s ease-out infinite normal;
    animation: breathing 3s ease-out infinite normal;
    -webkit-font-smoothing: antialiased;
    animation-play-state: running;
    position: absolute;
    top: 39%;
    left: 32%;
    transform: translate(-50%, -50%) scale(0.9);
}

.Container {
    margin: auto;
    /*background-image: url('../images/mystro infograph.png');*/
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

@-webkit-keyframes breathing {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    25% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    60% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes breathing {
    0% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    25% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    60% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.Mystro-center:hover {
    text-decoration: underline;
    animation-play-state: paused;
    cursor: pointer;
}

.Mystro-center {
    display: flex;
    color: white;
    align-items: center;
    justify-content: center;
}

.sb-item1 {
    border-color: #6CBA42;
    position: absolute;
    border-radius: 50%;
    top: 12%;
    left: 4%;
    background-image: url('../images/myplant1.png');
}


.sb-item3 {
    border-color: #A381BA;
    position: absolute;
    border-radius: 50%;
    top: 13%;
    left: 67%;
    background-image: url('../images/batchhistory3.png');
}

.sb-item2 {
    border-color: #CF1875;
    position: absolute;
    border-radius: 50%;
    top: 19%;
    left: 39%;
    background-image: url('../images/livetrend2.png');
}

.sb-item4 {
    border-color: #9A3E70;
    position: absolute;
    border-radius: 50%;
    top: 36%;
    left: 67%;
    background-image: url('../images/batchcompare4.png');
}

.sb-item5 {
    border-color: #F89307;
    position: absolute;
    border-radius: 50%;
    top: 63%;
    left: 78%;
    background-image: url('../images/userconfig5.png');
}

.sb-item6 {
    border-color: #549FC9;
    position: absolute;
    border-radius: 50%;
    top: 68%;
    left: 58%;
    background-image: url('../images/report6.png');
}

.sb-item7 {
    border-color: #E74B3C;
    position: absolute;
    border-radius: 50%;
    top: 78%;
    left: 36%;
    background-image: url('../images/alarmconfig7.png');
}

.sb-item8 {
    border-color: #019587;
    position: absolute;
    border-radius: 50%;
    top: 68%;
    left: 4%;
    background-image: url('../images/notification8.png');
}

.sb-item9 {
    border-color: #EDA31E;
    position: absolute;
    border-radius: 50%;
    top: 45%;
    left: 7%;
    background-image: url('../images/systemconfig9.png');
}

.breathAnimation {
    -webkit-animation: breathing 3s ease-out infinite normal;
    animation: breathing 3s ease-out infinite normal;
    -webkit-font-smoothing: antialiased;
    animation-play-state: running;
}

.dblock {
    display: block;
    opacity: 1;
}

.dnone {
    display: none;
    opacity: 0;
}

.t-opac {
    transition: opacity 1s ease;
    opacity: 0;
    background-color: white;
    border-style: solid;
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;
}

.line {
    width: 5px;
    background-color: #B8BCC0;
    position: absolute;
    z-index: -1;
}

.txt {
    position: absolute;
    display: none;
}
/*#sb-item1:hover ~ #Item-text1,
#sb-item2:hover ~ #Item-text2,
#sb-item3:hover ~ #Item-text3,
#sb-item4:hover ~ #Item-text4,
#sb-item5:hover ~ #Item-text5,
#sb-item6:hover ~ #Item-text6,
#sb-item7:hover ~ #Item-text7,
#sb-item8:hover ~ #Item-text8,
#sb-item9:hover ~ #Item-text9 {
   display:block;
}*/
#sb-item1:hover,
#sb-item2:hover,
#sb-item3:hover,
#sb-item4:hover,
#sb-item5:hover,
#sb-item6:hover,
#sb-item7:hover,
#sb-item8:hover,
#sb-item9:hover {
    animation-play-state: paused;
}

@media (max-width: 425px) {
    #Item-text1 {
        top: 4%;
        left: 4%;
    }

    #Item-text2 {
        top: 11%;
        left: 37%;
    }

    #Item-text3 {
        top: 5%;
        left: 66%;
    }

    #Item-text4 {
        top: 49%;
        left: 82%;
    }

    #Item-text5 {
        top: 84%;
        left: 82%;
    }

    #Item-text6 {
        top: 84%;
        left: 61%;
    }

    #Item-text7 {
        top: 99%;
        left: 33%;
    }

    #Item-text8 {
        top: 91%;
        left: 1%;
    }

    #Item-text9 {
        top: 38%;
        left: 1%;
    }
}

@media (min-width: 426px) {
    #Item-text1 {
        top: 7%;
        left: 8%;
    }

    #Item-text2 {
        top: 15%;
        left: 41%;
    }

    #Item-text3 {
        top: 8%;
        left: 70%;
    }

    #Item-text4 {
        top: 57%;
        left: 69%;
    }

    #Item-text5 {
        top: 84%;
        left: 82%;
    }

    #Item-text6 {
        top: 84%;
        left: 63%;
    }

    #Item-text7 {
        top: 99%;
        left: 39%;
    }

    #Item-text8 {
        top: 91%;
        left: 8%;
    }

    #Item-text9 {
        top: 41%;
        left: 8%;
    }
}

.background {
    height: 100%;
    background-color: #2499CD;
    position: absolute;
    margin-bottom: 20px;
}

    .background::before,
    .background::after {
        content: "";
        height: 100%;
        width: 67%;
        position: absolute;
        top: 0;
    }

    .background::before {
        left: 0;
        background-color: #E1E1E1;
        clip-path: polygon( 0% 0%, /* top left */
        70% 0%, /* top right */
        100% 100%, /* bottom right */
        0% 100% /* bottom left */
        );
    }

    .background::after {
        right: 0;
        background-color: #32AEE4;
        clip-path: polygon( 40% 0%, /* top left */
        100% 0%, /* top right */
        100% 100%, /* bottom right */
        25% 100% /* bottom left */
        );
    }
.mystro-section{
position:relative;
}
.proj-container{
    position:relative;
}
.mys-text {
    background-color: #00A0EA;
    color:white;
    padding:20px;
}