.vertical-center-60-r0 {
    margin: 0;
    position: absolute;
    top: 60%;
    right: 0;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.vertical-center-50 {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.baner-topic {
    font-weight: bold;
    font-family: satidti-bold-italic;
    font-size: 35pt;
}

.baner-sub-topic {
    color: #0071BC;
    font-size: 20pt;
}

.baner-card {
    width: 1000px;
    border-right: 20px solid #F75710;
    border-radius: 20px 0px 0px 20px;
    background-color: rgba(255,255,255, 0.7);
    border-left: unset;
    border-top: unset;
    border-bottom: unset;
}

.center-monitor {
    margin: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.center-phone {
    margin: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.custom-img-position {
    margin: 0;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    bottom: 15%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.image-hide-custom{
    display: block;
}

.img-width {
    width: 600px;
    object-fit: contain;
    height: 100%;
}

.bg-with-lg {
    background: rgba(255,255,255, 0.0);
    padding: 20px;
    border-radius: 10px;
}

.notebook-style {
    width: 800px;
    margin-left: 60px;
    object-fit: contain;
}

.screen-style {
    width: 800px;
    margin-left: 15%;
    border-radius: 20px;
}

.center-ver {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 55%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.center-custom {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.center-abstrac {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.sec-2-position {
    margin: 0;
    position: absolute;
    top: 60%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.about-topic {}

.about-article {}

.about-icon {
    width: 100px;
}

.card-with-90{
    width: 90%;
}

.card-body-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.tree-position{
    width: 800px;
    margin-left: -20%;
}

.ipad-position {
    width: 700px;
}

@media only screen and (min-width : 1900px) {
  /*  .vertical-center-60-r0 {     
        right: 20%;      
    }*/
}

@media only screen and (max-width: 1470px) {
    .center-ver {
        left: 65%;
    }
}

@media only screen and (max-width: 1300px) {
    .screen-style {
        margin-left: 55%;
        margin-bottom: 50px;
    }

    .notebook-style {
        width: 700px;
    }

    .center-ver {
        left: 65%;
    }    
}

@media only screen and (max-width: 1100px) {


    .notebook-style {
        width: 550px;
    }

    .center-phone {
        top: 41%;
    }

    .sec-2-position {
        top: 30%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    .ipad-position {
        width: 700px;
        margin-top: 10em;
    }

    .tree-position {
        width: 500px;
        margin-left: -10%;
    }

    .center-custom{
        top: 180%;
    }

    .center-abstrac {
        top: 50%;
    }
}

    @media only screen and (max-width: 850px) {

        .ipad-position {
            width: 550px;
            margin-top: 7em;
        }

        .sec-2-position {
            top: 45%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .baner-sub-topic {
            font-size: 12pt;
        }

        .baner-topic {
            font-size: 20pt;
        }

        .bg-with-lg {
            background: rgba(255,255,255, 0.8);
        }

        .img-width {
            width: 450px;
        }

        .screen-style {
            width: 550px;
            margin-left: 45%;
        }

        .notebook-style {
            width: 600px;
            margin-left: -65%;
        }

        .about-topic {
            font-size: 14pt;
        }

        .about-article {
            font-size: 9pt;
        }

        .about-icon {
            width: 50px;
        }

        .card-with-90 {
            width: 100%;
        }

        .card-body-padding {
            padding-top: 1.25rem;
            padding-bottom: 1.25rem;
        }
    }

    @media only screen and (max-width: 500px) {
        .notebook-style {
            width: 400px;
            margin-left: -60%;
        }

        .screen-style {
            width: 420px;
            margin-left: 45%;
        }

        .img-width {
            width: 400px;
        }

        .tree-position {
            width: 400px;
            margin-left: -25%;
        }

        .ipad-position {
            width: 350px;
            margin-top: 10em;
        }
    }

    @media only screen and (max-width: 380px) {
        .baner-sub-topic {
            font-size: 12pt;
        }

        .tree-position {
            width: 350px;
            margin-left: -20%;
        }

        .baner-topic {
            font-size: 20pt;
        }

        .bg-with-lg {
            background: rgba(255,255,255, 0.8);
        }

        .img-width {
            width: 300px;
        }

        .notebook-style {
            width: 400px;
            margin-left: -60%;
        }

        .screen-style {
            width: 370px;
            margin-left: 45%;
        }

        .ipad-position {
            width: 300px;
            margin-top: 15em;
        }
    }

@media only screen and (max-width: 380px) and (height: 812px) {

    .ipad-position {
        width: 300px;
        margin-top: 15em;
    }
}

    @media only screen and (max-width: 1024px) and (max-height: 801px) and (min-width: 501px) {

        .ipad-position {
            width: 450px;
            margin-top: 7em;
        }

        .image-hide-custom {
            display: none !important;
        }

        .tree-position {
            width: 350px;
            margin-left: -10%;
        }

        .sec-2-position {
            top: 40%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .bg-with-lg {
            background: rgba(255,255,255, 0.8);
        }

        .img-width {
            width: 300px;
        }

        .notebook-style {
            width: 250px;
            margin-left: unset;
        }

        .screen-style {
            width: 400px;
            margin-left: 65%;
        }
    }

    @media only screen and (max-width: 320px) {
        .screen-style {
            width: 310px;
            margin-left: 45%;
        }

        .notebook-style {
            width: 250px;
            margin-left: -20%;
        }

        .tree-position {
            width: 250px;
            margin-left: -20%;
        }

        .ipad-position {
            width: 250px;
            margin-top: 25em;
        }
    }

    @media only screen and (max-width: 400px) and (max-height: 700px) {
        .notebook-style {
            width: 400px;
            margin-left: -60%;
        }
    }


    @media only screen and (max-width: 420px) and (max-height: 750px) and (min-width: 401px) and (min-height: 701px) {
        .notebook-style {
            width: 400px;
            margin-left: -60%;
        }
    }

    @media only screen and (max-width: 850px) and (max-height: 400px) {
        .tree-position {
            width: 200px;
            margin-left: -10%;
        }
    }