@media only screen 
and (max-width: 768px) {
    @media screen and (max-width: 960px){
    .services_desc {
        width: 120px;
        margin: 30px 0 0 0;
        padding: 0 0 0 10px;
        box-sizing: border-box;
    }

    .services_number {
        font-family: 'Montserrat-Bold', sans-serif;
        font-size: 24px;
        font-weight: bold;
    }

    .services_txt {
        font-family: 'Montserrat-Medium', sans-serif;
        font-size: 9px;
        padding: 10px 0 0 5px;
    }

    .services_img {
        position: relative;
        width: 150px;
        height: 130px;
        border-radius: 35px;
    }

    .services_row {
        position: relative;
    }

    .nav_bar {
        cursor:pointer
    }

    .nav_bar:hover {
        background-color: rgb(63, 184, 218)
    }

    /** Services **/

    .animated {
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        position: absolute;
        animation-direction: alternate;
        -webkit-animation-direction: alternate;
    }
    
    .img_1_graph_front {
        animation-name: upDown1;
        animation-duration: 2s;
    }
    
    @keyframes upDown1 {
        0% { top: 2.5px; }
        50% { top: -5px; }
        100% { top: 2.5px; }
    }
    
    .img_1_graph_front2 {
        animation-name: upDown2;
        animation-delay: 1s;
        animation-duration: 2s;
    }
    
    @keyframes upDown2 {
        0% { top: 5px; }
        50% { top: 0px; }
        100% { top: 5px; }
    }

    .img_2_thumb {
        animation-name: img2Thumb;
        -webkit-animation-name: img2Thumb;
        animation-duration: 1.5s;
        -webkit-animation-duration: 1.5s;
    }
    
    @keyframes img2Thumb {
        0% { left: 156px; top: 34px; }
        50% { left: 160px; top: 37px; }
        100% { left: 156px; top: 34px; }
    }

    .img_2_mail {
        animation-name: img2Mail;
        -webkit-animation-name: img2Mail;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
    
    @keyframes img2Mail {
        0% { left: 105px; top: 27px; }
        50% { left: 100px; top: 23px; }
        100% { left: 105px; top: 27px; }
    }

    .img_3_circle_a {
        animation-name: img3CircleA;
        -webkit-animation-name: img3CircleA;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
    
    @keyframes img3CircleA {
        0% { left: 155px; }
        50% { left: 150px; }
        100% { left: 155px; }
    }
    
    .img_3_circle_b {
        animation-name: img3CircleB;
        -webkit-animation-name: img3CircleB;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
    
    @keyframes img3CircleB {
        0% { left: 170px; }
        50% { left: 175px; }
        100% { left: 170px; }
    }
    
    .img_3_circle_c {
        animation-name: img3CircleC;
        -webkit-animation-name: img3CircleC;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
    }
    
    @keyframes img3CircleC {
        0% { top: 75px; }
        50% { top: 70px; }
        100% { top: 75px; }
    }

    .img_4_book_a {
        animation-name: img4BookA;
        -webkit-animation-name: img4BookA;
        animation-duration: 1s;
        -webkit-animation-duration: 1s;
    }
    
    @keyframes img4BookA {
        from { transform: translate(0, 0); }
        to { transform: translate(-10px, -10px); }
    }
    
    .img_4_book_b {
        animation-name: img4BookB;
        -webkit-animation-name: img4BookB;
        animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-delay: 0.3s;
        -webkit-animation-delay: 0.3s;
    }
    
    @keyframes img4BookB {
        from { transform: translate(0, 0); }
        to { transform: translate(-10px, -10px); }
    }
    
    .img_4_book_c {
        animation-name: img4BookC;
        -webkit-animation-name: img4BookC;
        animation-duration: 1s;
        -webkit-animation-duration: 1s;
        animation-delay: 0.1s;
        -webkit-animation-delay: 0.1s;
    }
    
    @keyframes img4BookC {
        from { transform: translate(0, 0); }
        to { transform: translate(-10px, -10px); }
    }

    .img_5_chat_biru {
        animation-name: img5chatbiru;
        -webkit-animation-name: img5chatbiru;
        animation-duration: 0.8s;
        -webkit-animation-duration: 0.8s;
        animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s;
    }
    
    @keyframes img5chatbiru {
        from { left: 238px;}
        to { left: 233px; }
    }
    
    .img_5_chat_hitam {
        animation-name: img5chathitam;
        -webkit-animation-name: img5chathitam;
        animation-duration: 0.8s;
        -webkit-animation-duration: 0.8s;
        animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s;
    }
    
    @keyframes img5chathitam {
        from { left: 230px;}
        to { left: 235px; }
    }
    
    .img_5_jempol {
        animation-name: img5jempol;
        -webkit-animation-name: img5jempol;
        animation-duration: 0.8s;
        -webkit-animation-duration: 0.8s;
        animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s;
    }
    
    @keyframes img5jempol {
        from { top: 46px }
        to { top: 41px }
    }

    .img_6_flash {
        animation-name: img6flash;
        -webkit-animation-name: img6flash;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 3s;
        -webkit-animation-duration: 3s;
    }
    
    @keyframes img6flash {
        0% { transform:scale(1); }
        4% { transform:scale(3); opacity:0.4}
        12% { transform:scale(1); }
        100% { transform:scale(1); opacity: 0.8}
    }

    .socmed_container {
        text-align:center;
        margin: 10px 0 0 0px;
        padding: 10px 0 0 0
    }
    
    .socmed_layer {
        margin: 0 20px
    }

    * {
        box-sizing: border-box;
    }
    
    input[type=text], select, textarea {
    width: 100%;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 14px;
    resize: vertical;
    }
    
    label {
    padding: 6px 9px 6px 0;
    display: inline-block;
    }
    
    input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 8px 7px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 9px;
    margin: 10px 0 0 0
    }
    
    input[type=submit]:hover {
    background-color: #45a049;
    }

    .button {
        margin: 10px 120px 10px 0;
    }

    .table_container {
    padding: 15px 35px 20px 35px;
    font-size: 9px
    }
    
    .col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
    }
    
    .col-75 {
    float: left;
    width: 45%;
    margin-top: 6px;
    }
    
    .row:after {
    content: "";
    display: table;
    clear: both;
    }
    
    @media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
    }

}