@media(max-width : 400px)  {
    header #my-user {width: 50px !important; }
    header #my-user p, #my-user i {display:none}

    .side-nav[data-size="small"] {width: 100% !important} 
}
@media(max-width : 500px)  {

    .hex-group {
        width: 340px;
    }

    .hex-row.odd {
        margin-left: 57px;
    }
    .hex {
        margin-bottom: -34px;
    }

    .hex .middle {
        width: 110px;
        height: 65px;
    }


    .hex .top {
        border-bottom: 36px solid #046C93;
        border-left: 55px  solid transparent;
        border-right: 55px  solid transparent;
    }

    .hex.bounceInUp .top {
        border-bottom: 36px solid #3CBF5D;
    }

    .hex .bottom {
        width: 0;
        border-top: 36px solid #046C93;
        border-left: 55px  solid transparent;
        border-right: 55px  solid transparent;
    }

    .hex.bounceInUp .bottom {
        border-top: 36px solid #3CBF5D;
    }

    .hex span { 
        padding-top: 7px;
    }
}

@media(max-width : 600px)  {

    header #my-user {width: 185px;}
    header #my-user img, #my-user svg { height: 56px;}
    header #my-user p {line-height: 12px;}
    header #my-user p.min-p {line-height: 2.9px;}

    #toolbar .filter_active {line-height: 56px;}

    #container {height: calc(100% - 113px)}
    #container .floatThead-container {transform: translateX(0px) translateY(112px) !important }
    #container .footer-options, #container .footer-show, #container .footer-count {text-align: center}
    #container .footer-show ul {display: inline-block}

    .min-container {min-height: calc(100% - 113px)}

    .side-nav[data-size="medium"] {width: 100% !important}
    .side-nav .sid-header > .nav-wrapper > div {height: 56px; line-height: 56px}
    .side-nav .sid-body {height: calc(100% - 112px)}
    .sid-view.side-nav .sid-body {height: calc(100% - 228px)}
    #slide-news.side-nav .sid-body {height: calc(100% - 172px)}
    #slide-filter.side-nav .sid-body { height: calc(100% - 227px);}

    .olix-index table .td-truncate { width: 250px}
    .olix-habtm .search-header > .col.m9 { margin-top: 14px; padding-left: 10px !important; padding-right: 10px !important;}
    .other-service {
        height: 200px;
        width: 100%;
        margin:0;
    }

    .other-service img{
        border-radius: 0
    }


}

@media (min-width : 601px) {

    header #my-user {width: 200px;}
    header #my-user img, #my-user svg { height: 64px}
    header #my-user p {line-height: 15px;}
    header #my-user .min-p {line-height: 4px;}

    #container {height: calc(100% - 129px)}
    #container .floatThead-container {transform: translateX(0px) translateY(128px) !important }

    .min-container {min-height: calc(100% - 129px)}
    .side-nav .sid-header > .nav-wrapper > div {height: 64px; line-height: 64px}
    .side-nav .sid-body {height: calc(100% - 128px)}
    .sid-view.side-nav .sid-body {height: calc(100% - 244px)}
    #slide-news.side-nav .sid-body {height: calc(100% - 188px)}
    .olix-index table .td-truncate { width: 260px}


    .circle-l.circle-m  {
        background:#046C93
    }

    .circle-m {
        background:  #3cbf5d
    }
    .other-service {
        height: 200px;
        width: 100%;
        margin:0;
    }

    .other-service img{
        border-radius: 0
    }
}

@media (min-width : 750px) {
    header #my-user {width: 200px;} 
    .olix-index table .td-truncate { width: 413px}
}


@media (min-width : 900px) {
    header #my-user {width: 225px;}
    .olix-index table .td-truncate { width: 560px}
}
@media (min-width : 990px) {
    .circle-l.circle-m  {
        background:#3cbf5d
    }

    section#laboratory .about-content .card#card-special {
        margin: 0
    }

    .circle-m {
        background:  #3cbf5d
    }

    .service-flex{
        display: flex;
    }
    section#services .service-flex .service-image {
        margin: 23px;
        width: calc(50% - 46px);
        border-radius: 10% 1% 10% 1%;
    }
    .other-service {
        height: 200px;
        width: calc(100% - 46px);
        margin-left: 23px; 
    }

    .other-service.other-left img {
        border-radius: 10% 1% 1% 10%;
    }
    .other-service.other-center img {
        border-radius: 10% 1% 1% 10%;
    }
    .other-service.other-right img {
        border-radius: 1% 10% 10% 1%;
    }

    footer .subventions-right {
        text-align: right
    }
    footer .subventions-left {
        text-align: left
    }

}