/*
* ----------------------------------------------------------------------------------------
Author        : Rama Hardian Sidik
Template Name : Nathan - multipurpose personal portfolio bootstrap template
Version       : 1.0
Filename      : responsive.css
* ----------------------------------------------------------------------------------------
*/

@media only screen and (min-device-width: 1366px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}

@media only screen and (device-width: 375px) and (device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {}

@media only screen and (device-width: 812px) and (device-height: 375px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {}

@media (min-width: 1366px) {
    main,
    footer {
        box-sizing: border-box;
        left: auto;
        margin-top: 0;
        right: 0;
        width: calc(100% - 18.75rem);
    }
    header {
        padding: 0 3.125rem;
        position: fixed;
        left: unset;
        right: 0;
        top: 0;
        width: 18.75rem;
        z-index: 1030;
        height: 100%;
        border-left: 1px solid var(--base-four);
    }
    section {
        padding: 30px;
    }
    .container-lg {
        display: grid !important;
        height: 100%;
    }
    .navbar {
        display: contents !important;
    }
    .navbar-nav {
        margin-left: 0 !important;
        display: inline-block !important;
    }
    .navbar-nav li {
        margin: 0 0 5px 0;
    }
    .navbar-nav li a {
        color: var(--base-two);
        font-size: 15px;
    }
    .lightlogo {
        display: none;
    }
    .darklogo {
        display: block;
        width: 174px;
    }
    .fixi .darklogo {
        width: 174px;
    }
}

@media screen and (max-width: 2560px) {
    #herosection {
        background-position: 60% center;
    }
    .item-work:not(:last-child):before {
        display: block;
    }
    .portfolio-grid {
        margin-left: -22px!important;
        width: calc(100% + 22px)!important;
    }
    .portfolio-grid .portfolio-item {
        width: 50%!important;
        padding: 0 0 22px 22px!important;
    }
}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1128px) {}

@media screen and (max-width: 1024px) {}

@media (max-width: 999px) {
    #herosection {
        height: auto;
        padding: 100px 0 100px;
    }
    .opennav {
        background: var(--base);
    }
    .nav-link:hover i {
        display: block;
    }
    .opennav .navbar-toggler-icon {
        color: var(--base-two);
    }
    .opennav .lightlogo {
        display: none;
    }
    .opennav .darklogo {
        display: block;
        width: 100px;
    }
    .navbar-collapse {
        background: var(--base);
        height: 100vh;
        overflow-x: auto;
        box-shadow: 0 30px 30px 0 var(--transparant-two);
    }
    .navbar-nav {
        padding: 100px 20px;
    }
    .navbar-nav li a {
        font-size: 20px;
        letter-spacing: 2px;
    }
    .navbar-toggler-icon {
        color: var(--base);
    }
    .navbar-brand {
        padding: 0 0 0 10px;
    }
    .fixed-topnav.navbar-toggler-icon {
        color: var(--base-two);
    }
    .navbar-nav li a {
        color: var(--transparant-two);
    }
    .navbar-nav li a:hover {
        color: var(--base-one);
    }
    .navbar-nav li a:after {
        z-index: 1;
    }
    .nav-link.active i {
        display: block;
    }
    .button-res {
        width: 100%;
    }
    .wrap-proces {
        display: block;
    }
    .item-work {
        margin: 30px 0;
        width: 50%;
        float: left;
    }
    .item-work:nth-last-child(1) {
        width: 100%;
    }
    .item-work:not(:last-child):before {
        display: none;
    }
    .portfolio-grid.grid-col-3 .portfolio-item {
        width: 33.33%!important;
    }
    .portfolio-grid.grid-col-4 .portfolio-item {
        width: 25%!important;
    }
    .portfolio-grid.gutter-wide {
        margin-left: -40px!important;
        width: calc(100% + 40px)!important;
    }
    .portfolio-grid.gutter-wide .portfolio-item {
        padding: 0 0 40px 40px!important;
    }
    .wrap-counter .text-center:nth-last-child(1) {
        padding-top: 30px;
    }
    .item-client {
        width: 33.33333%;
        margin: 20px 0;
    }
    .center-footer {
        padding: 30px 0 30px 0;
    }
    .other-skill {
        margin-top: 100px;
    }
    .form-contact {
        margin: 30px 0;
    }
}

@media (max-width: 799px) {
    .wrap-heroifo h1 {
        font-size: 90px;
    }
    .pie_progress {
        width: 99px;
        margin: 20px auto;
    }
    .pie_progress__number {
        font-size: 13px;
        left: 25%;
    }
    .item-client {
        width: 50%;
        margin: 20px 0;
    }
    .footer-wrap img {
        width: 80%;
    }
}

@media only screen and (max-width: 699px) {
    .wrap-counter .text-center {
        padding-top: 30px;
    }
    img.img-load {
        width: 50%;
    }
}

@media only screen and (max-width: 580px) {
    #herosection {
        padding: 30px 0 30px;
    }
    .portfolio-grid .portfolio-item {
        width: 100%!important;
    }
    .wrap-heroifo h1 {
        font-size: 70px;
    }
    .item-client img {
        width: 60%;
    }
    .wrap-user img {
        float: unset;
        margin: 0 auto;
    }
    .detail-user {
        text-align: center;
        padding: 30px 0 0 0;
    }
}

@media (max-width: 480px) {
    .wrap-heroifo h1 {
        font-size: 60px;
    }
    .item-work {
        width: 100%;
    }
    .item-client img {
        width: 80%;
    }
}

@media (max-width: 360px) {}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {}

@media(hover: hover) and (pointer: fine) {
    .btnlink:hover {
        color: var(--base);
    }
    .btnlink:hover:after {
        width: 100%;
        left: 0;
        right: auto;
    }
}