/** Width between 1200x to 0
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
@media (min-width: 1200px) {
}

/** Width between 992px to 1199px
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
@media (min-width: 992px) and (max-width: 1199px) {
}

/** Width between 768px to 991px
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
@media (min-width: 768px) and (max-width: 991px) {
    /* Navbar */
    nav {
        padding: 10px 15px;
    }

    .nav-menu {
        margin-top: 40px;
        display: none;
        float: none;
        width: 100%;
    }

    .nav-menu li {
        float: none;
        width: 100%;
        text-align: center;
        border-top: 1px solid #f7f7f7;
        line-height: 45px;
        margin-left: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .responsive {
        float: right;
        padding-top: 15px;
        display: block;
    }

    /* About */
    .head-info .header-content .cmaster h1 {
        font-size: 32px;
    }

    #about .div-img-bg {
        padding: 0;
    }

    #about .div-img-bg .about-img img {
        margin-top: 0%;
        margin-left: calc(0% - 0px);
    }

    #about .about-descr .p-heading {
        font-size: 20px;
    }

    #about .about-descr .separator {
        max-width: 100%;
        margin-bottom: 0;
    }

    /* portfolio */
    #portfolio .portfolio-list .nav li {
        float: none;
        margin: 20px;
        display: inline-block;
    }

    /* journal */
    #journal .journal-block .journal-info {
        margin-bottom: 30px;
    }

    /* Contact */
    .contact-contact {
        margin-bottom: 30px;
    }

    /* Footer */
    #footer .socials-media ul li {
        margin-right: 0;
        margin-left: 0;
        float: none;
        display: inline-block;
    }
}

/** Width between 767px to 0
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
@media (max-width: 767px) {
    /* Navbar */
    nav {
        padding: 20px 15px;
    }

    .nav-menu {
        margin-top: 40px;
        display: none;
        float: none;
        width: 100%;
    }

    .nav-menu li {
        float: none;
        width: 100%;
        text-align: center;
        border-top: 1px solid #f7f7f7;
        line-height: 45px;
        margin-left: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .responsive {
        float: right;
        padding-top: 15px;
        display: block;
    }

    /* About */
    .head-info .header-content h1 {
        font-size: 32px;
    }

    #about .div-img-bg {
        padding: 0;
    }

    #about .div-img-bg .about-img img {
        margin-top: 0%;
        margin-left: calc(0% - 0px);
    }

    #about .about-descr .p-heading {
        font-size: 20px;
    }

    #about .about-descr .separator {
        max-width: 100%;
        margin-bottom: 0;
    }

    /* portfolio */
    #portfolio .portfolio-list .nav li {
        float: none;
        margin: 20px;
        display: inline-block;
    }

    /* journal */
    #journal .journal-block .journal-info {
        margin-bottom: 30px;
    }

    /* Contact */
    .contact-contact {
        margin-bottom: 30px;
    }

    /* Footer */
    #footer .socials-media ul li {
        margin-right: 0;
        margin-left: 0;
        float: none;
        display: inline-block;
    }
}

/** Width between 600px to 0
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
@media (max-width: 600px) {
    /* Navbar */
    nav {
        padding: 20px 15px;
    }

    .nav-menu {
        margin-top: 40px;
        display: none;
        float: none;
        width: 100%;
    }

    .nav-menu li {
        float: none;
        width: 100%;
        text-align: center;
        border-top: 1px solid #f7f7f7;
        line-height: 45px;
        margin-left: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .responsive {
        float: right;
        padding-top: 15px;
        display: block;
    }

    /* About */
    .head-info .header-content h1 {
        font-size: 32px;
    }

    #about .div-img-bg {
        padding: 0;
    }

    #about .div-img-bg .about-img img {
        margin-top: 0%;
        margin-left: calc(0% - 0px);
    }

    #about .about-descr .p-heading {
        font-size: 20px;
    }

    #about .about-descr .separator {
        max-width: 100%;
        margin-bottom: 0;
    }

    /* portfolio */
    #portfolio .portfolio-list .nav li {
        float: none;
        margin: 10px;
        display: inline-block;
    }

    /* journal */
    #journal .journal-block .journal-info {
        margin-bottom: 30px;
    }

    /* Contact */
    .contact-contact {
        margin-bottom: 30px;
    }

    /* Footer */
    #footer .socials-media ul li {
        margin-right: 0;
        margin-left: 0;
        float: none;
        display: inline-block;
    }
}

/** Width between 480px to 0
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
@media (max-width: 480px) {
    /* Navbar */
    nav {
        padding: 20px 15px;
    }

    .nav-menu {
        margin-top: 40px;
        display: none;
        float: none;
        width: 100%;
    }

    .nav-menu li {
        float: none;
        width: 100%;
        text-align: center;
        border-top: 1px solid #f7f7f7;
        line-height: 45px;
        margin-left: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .responsive {
        float: right;
        padding-top: 15px;
        display: block;
    }

    /* About */
    .head-info .header-content h1 {
        font-size: 32px;
    }

    #about .div-img-bg {
        padding: 0;
    }

    #about .div-img-bg .about-img img {
        margin-top: 0%;
        margin-left: calc(0% - 0px);
    }

    #about .about-descr .p-heading {
        font-size: 20px;
    }

    #about .about-descr .separator {
        max-width: 100%;
        margin-bottom: 0;
    }

    /* portfolio */
    #portfolio .portfolio-list .nav li {
        float: none;
        margin: 20px;
    }

    /* journal */
    #journal .journal-block .journal-info {
        margin-bottom: 30px;
    }

    /* Contact */
    .contact-contact {
        margin-bottom: 30px;
    }

    /* Footer */
    #footer .socials-media ul li {
        margin-right: 0;
        margin-left: 0;
        float: none;
        display: inline-block;
    }
}

/** Width between 320px to 0
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
@media (max-width: 320px) {
    /* Navbar */
    nav {
        padding: 20px 15px;
    }

    .nav-menu {
        margin-top: 40px;
        display: none;
        float: none;
        width: 100%;
    }

    .nav-menu li {
        float: none;
        width: 100%;
        text-align: center;
        border-top: 1px solid #f7f7f7;
        line-height: 45px;
        margin-left: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .responsive {
        float: right;
        padding-top: 15px;
        display: block;
    }

    /* About */
    .head-info .header-content h1 {
        font-size: 32px;
    }

    #about .div-img-bg {
        padding: 0;
    }

    #about .div-img-bg .about-img img {
        margin-top: 0%;
        margin-left: calc(0% - 0px);
    }

    #about .about-descr .p-heading {
        font-size: 20px;
    }

    #about .about-descr .separator {
        max-width: 100%;
        margin-bottom: 0;
    }

    /* portfolio */
    #portfolio .portfolio-list .nav li {
        float: none;
        margin: 20px;
    }

    /* journal */
    #journal .journal-block .journal-info {
        margin-bottom: 30px;
    }

    /* Contact */
    .contact-contact {
        margin-bottom: 30px;
    }

    /* Footer */
    #footer .socials-media ul li {
        margin-right: 0;
        margin-left: 0;
        float: none;
        display: inline-block;
    }

    /* Single page */
    .entry-comments-body span {
        display: inline-block;
        margin-right: 0;
    }
}

.calendar {
    margin: 10px;
}

.calendar-head {
}

@media screen and (min-width:576px) {
    .resume {
        padding: 90px 45px;
    }
}

@media screen and (max-width:575px) {
    .resumexs {
        padding: 90px 10px;
    }
}

.td2 {
    width: 66%;
}

.gallery-ratio {
    width: 100%;
    overflow: hidden;
    position: relative;
    max-height: 250px;
}