/*
    THE GOOGLE FONTS IMPORT WAS REMOVED, 2026-09-19.

    It fetched Nunito and Poppins on every page load, a second font
    request beside the one _head.php already makes for the account's own
    three. Measured on the page rather than read off this file: nothing
    renders either of them, and document.fonts listed Nunito seven times,
    every one unloaded.

    css/override.php puts the account's faces on every selector below
    that named one of the theme's.
*/



@media(min-width:992px)
{

    html, body,
    .container {
        width: 100%;
        height: 100%;
    }

    body {
        overflow-y: scroll;
        background: #333;
    }

    .splitlayout {
        position: relative;
        min-height: 100%;
        width: 100%;
    }

    /* Intro sides */
    .side {
        position: fixed;
        top: 0;
        z-index: 100;
        width: 50%;
        height: 100%;
        text-align: center;
        -webkit-backface-visibility: hidden;
    }

    .open-left .side,
    .open-right .side {
        cursor: default;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 499;
        visibility: hidden;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .side-left .overlay {
        background: rgba(0,0,0,0.7);
    }

    .side-right .overlay {
        background: rgba(0,0,0,0.3);
    }

    .side-left {
        left: 0;
        background: transparent;
        color: #fff;
        outline: 1px solid transparent; /* avoid gap */
    }

    /* Intro content, profile image and name, back button */
    .intro-content {
        position: absolute;
        top: 50%;
        left: 50%;
        /*padding: 0 1em;*/
        width: 100%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        transform: translateY(-50%) translateX(-50%);
    }

    .back {
        position: fixed;
        top: 1.8em;
        z-index: 500;
        display: block;
        visibility: hidden;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #47a3da;
        text-align: center;
        font-size: 22px;
        line-height: 44px;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-layout .back {
        position: absolute;
    }

    .back-left {
        left: 12.5%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .back-right {
        right: 12.5%;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
        color: #fff;
    }

    .open-right .back-left,
    .open-left .back-right {
        visibility: visible;
        opacity: 1;
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
        pointer-events: auto;
    }

    .back:hover {
        color: #ddd;
    }

    /* Pages */
    .pag-e {
        position: relative;
        top: 0;
        overflow: auto;
        min-height: 100%;
        width: 75%;
        height: auto;
        -webkit-backface-visibility: hidden;
    }

    .page-right {
        left: 25%;
        outline: 5px solid #ecf0f1; /* avoid rounding gaps */
        background: #ecf0f1;
        color: #97a8b2;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .splitlayout.open-right {
        background: #fafafa;
    }

    .page-left {
        left: 0;
        outline: 5px solid #34495e; /* avoid rounding gaps */
        background: #34495e;
        color: #fff;
        text-align: right;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .splitlayout.open-left {
        background: #34495e;
    }

    /* All transitions */
    .side,
    .pag-e {
        -webkit-transition: -webkit-transform 0.6s,width 0.6s;
        transition: transform 0.6s,width 0.6s;
    }

    .overlay {
        -webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
        transition: opacity 0.6s, visibility 0.1s 0.6s;
    }

    .intro-content {
        -webkit-transition: -webkit-transform 0.6s, top 0.6s, width 0.6s;
        transition: transform 0.6s, top 0.6s, width 0.6s;
    }

    .intro-content h2,
    .back {
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }

    /* Open and close */

    /* We need to set the position and overflow for the respective page scroll */
    .reset-layout .pag-e,
    .splitlayout.open-right .page-left,
    .splitlayout.open-left .page-right,
    .splitlayout.close-right .page-left,
    .splitlayout.close-left .page-right {
        position: absolute;
        overflow: hidden;
        height: 100%;
    }

    .splitlayout.open-right .page-right,
    .splitlayout.open-left .page-left {
        position: relative;
        overflow: auto;
        height: auto;
    }

    .open-right .side-left .overlay,
    .open-left .side-right .overlay {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity 0.6s;
        transition: opacity 0.6s;
    }

    /* Right side open */
    .open-right .side-left {
        -webkit-transform: translateX(-60%);
        transform: translateX(-60%);
    }

    .open-right .side-right {
        z-index: 200;
        -webkit-transform: translateX(-150%);
        transform: translateX(-150%);
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.08);
    }

    .home___menu .open-right .side-right {
        overflow: hidden;
    }

    .close-right .side-right {
        z-index: 200;
    }

    .open-right .side-right .intro-content {
        width: 50%;
        -webkit-transform: translateY(-50%) translateX(0%) scale(1);
        transform: translateY(-50%) translateX(0%) scale(1);
    }

    .open-right .page-right {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    /* Left side open */
    .open-left .side-right {
        -webkit-transform: translateX(60%);
        transform: translateX(60%);
    }

    .open-left .side-left {
        z-index: 200;
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
    }

    .close-left .side-left {
        z-index: 200;
    }

    .open-left .side-left .intro-content {
        -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
        transform: translateY(-50%) translateX(-100%) scale(0.6);
    }

    .open-left .codropsheader {
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
        transition: opacity 0.3s, visibility 0.1s 0.3s;
    }

    .open-left .page-left {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    .splitlayout .page-right{
        position: absolute;
        overflow: hidden;
        height: 100%;
    }

    .splitlayout.open-right .page-right{
        position: absolute;
    }

}

/* Media Queries */
@media screen and (max-width: 83em) {
    /*.intro-content { font-size: 60%; }*/
}

@media screen and (max-width: 58em) {
    /*body { font-size: 90%; }*/
}

.side-right {
    right: 0;
    background: #fff;
    color: #47a3da;
    outline: 1px solid #fff; /* avoid gap */
}

.profile {
    margin: 0 auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

.profile img {
    max-width: 100%;
    border-radius: 50%;
}

.intro-content h2 > span:first-child {
    font-weight: 500;
    font-size: 2em;
}

.intro-content h2 > span {
    display: block;
    white-space: nowrap;
}

.intro-content h2 > span:nth-child(2) {
    position: relative;
    padding: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8em;
}


/* animation sets */

/* move from / to  */

.pt-page-moveToLeft {
    -webkit-animation: moveToLeft .6s ease both;
    animation: moveToLeft .6s ease both;
}

.pt-page-moveFromLeft {
    -webkit-animation: moveFromLeft .6s ease both;
    animation: moveFromLeft .6s ease both;
}

.pt-page-moveToRight {
    -webkit-animation: moveToRight .6s ease both;
    animation: moveToRight .6s ease both;
}

.pt-page-moveFromRight {
    -webkit-animation: moveFromRight .6s ease both;
    animation: moveFromRight .6s ease both;
}

.pt-page-moveToTop {
    -webkit-animation: moveToTop .6s ease both;
    animation: moveToTop .6s ease both;
}

.pt-page-moveFromTop {
    -webkit-animation: moveFromTop .6s ease both;
    animation: moveFromTop .6s ease both;
}

.pt-page-moveToBottom {
    -webkit-animation: moveToBottom .6s ease both;
    animation: moveToBottom .6s ease both;
}

.pt-page-moveFromBottom {
    -webkit-animation: moveFromBottom .6s ease both;
    animation: moveFromBottom .6s ease both;
}

/* fade */

.pt-page-fade {
    -webkit-animation: fade .7s ease both;
    animation: fade .7s ease both;
}

/* move from / to and fade */

.pt-page-moveToLeftFade {
    -webkit-animation: moveToLeftFade .7s ease both;
    animation: moveToLeftFade .7s ease both;
}

.pt-page-moveFromLeftFade {
    -webkit-animation: moveFromLeftFade .7s ease both;
    animation: moveFromLeftFade .7s ease both;
}

.pt-page-moveToRightFade {
    -webkit-animation: moveToRightFade .7s ease both;
    animation: moveToRightFade .7s ease both;
}

.pt-page-moveFromRightFade {
    -webkit-animation: moveFromRightFade .7s ease both;
    animation: moveFromRightFade .7s ease both;
}

.pt-page-moveToTopFade {
    -webkit-animation: moveToTopFade .7s ease both;
    animation: moveToTopFade .7s ease both;
}

.pt-page-moveFromTopFade {
    -webkit-animation: moveFromTopFade .7s ease both;
    animation: moveFromTopFade .7s ease both;
}

.pt-page-moveToBottomFade {
    -webkit-animation: moveToBottomFade .7s ease both;
    animation: moveToBottomFade .7s ease both;
}

.pt-page-moveFromBottomFade {
    -webkit-animation: moveFromBottomFade .7s ease both;
    animation: moveFromBottomFade .7s ease both;
}

/* move to with different easing */

.pt-page-moveToLeftEasing {
    -webkit-animation: moveToLeft .7s ease-in-out both;
    animation: moveToLeft .7s ease-in-out both;
}
.pt-page-moveToRightEasing {
    -webkit-animation: moveToRight .7s ease-in-out both;
    animation: moveToRight .7s ease-in-out both;
}
.pt-page-moveToTopEasing {
    -webkit-animation: moveToTop .7s ease-in-out both;
    animation: moveToTop .7s ease-in-out both;
}
.pt-page-moveToBottomEasing {
    -webkit-animation: moveToBottom .7s ease-in-out both;
    animation: moveToBottom .7s ease-in-out both;
}

/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes moveToLeft {
    to { -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeft {
    to { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeft {
    from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRight {
    to { -webkit-transform: translateX(100%); }
}
@keyframes moveToRight {
    to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRight {
    from { -webkit-transform: translateX(100%); }
}
@keyframes moveFromRight {
    from { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveToTop {
    to { -webkit-transform: translateY(-100%); }
}
@keyframes moveToTop {
    to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottom {
    to { -webkit-transform: translateY(100%); }
}
@keyframes moveToBottom {
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottom {
    from { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

/* fade */

@-webkit-keyframes fade {
    to { opacity: 0.3; }
}
@keyframes fade {
    to { opacity: 0.3; }
}

/* move from / to and fade */

@-webkit-keyframes moveToLeftFade {
    to { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@keyframes moveToLeftFade {
    to { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveFromLeftFade {
    from { opacity: 0.3; -webkit-transform: translateX(-100%); }
}
@keyframes moveFromLeftFade {
    from { opacity: 0.3; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}

@-webkit-keyframes moveToRightFade {
    to { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@keyframes moveToRightFade {
    to { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveFromRightFade {
    from { opacity: 0.3; -webkit-transform: translateX(100%); }
}
@keyframes moveFromRightFade {
    from { opacity: 0.3; -webkit-transform: translateX(100%); transform: translateX(100%); }
}

@-webkit-keyframes moveToTopFade {
    to { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@keyframes moveToTopFade {
    to { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveFromTopFade {
    from { opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
    from { opacity: 0.3; -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@-webkit-keyframes moveToBottomFade {
    to { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@keyframes moveToBottomFade {
    to { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }
}

@-webkit-keyframes moveFromBottomFade {
    from { opacity: 0.3; -webkit-transform: translateY(100%); }
}
@keyframes moveFromBottomFade {
    from { opacity: 0.3; -webkit-transform: translateY(100%); transform: translateY(100%); }
}

/* scale and fade */

.pt-page-scaleDown {
    -webkit-animation: scaleDown .7s ease both;
    animation: scaleDown .7s ease both;
}

.pt-page-scaleUp {
    -webkit-animation: scaleUp .7s ease both;
    animation: scaleUp .7s ease both;
}

.pt-page-scaleUpDown {
    -webkit-animation: scaleUpDown .5s ease both;
    animation: scaleUpDown .5s ease both;
}

.pt-page-scaleDownUp {
    -webkit-animation: scaleDownUp .5s ease both;
    animation: scaleDownUp .5s ease both;
}

.pt-page-scaleDownCenter {
    -webkit-animation: scaleDownCenter .4s ease-in both;
    animation: scaleDownCenter .4s ease-in both;
}

.pt-page-scaleUpCenter {
    -webkit-animation: scaleUpCenter .4s ease-out both;
    animation: scaleUpCenter .4s ease-out both;
}

/********************************* keyframes **************************************/

/* scale and fade */

@-webkit-keyframes scaleDown {
    to { opacity: 0; -webkit-transform: scale(.8); }
}
@keyframes scaleDown {
    to { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }
}

@-webkit-keyframes scaleUp {
    from { opacity: 0; -webkit-transform: scale(.8); }
}
@keyframes scaleUp {
    from { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }
}

@-webkit-keyframes scaleUpDown {
    from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleUpDown {
    from { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@-webkit-keyframes scaleDownUp {
    to { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleDownUp {
    to { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

@-webkit-keyframes scaleDownCenter {
    to { opacity: 0; -webkit-transform: scale(.7); }
}
@keyframes scaleDownCenter {
    to { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7); }
}

@-webkit-keyframes scaleUpCenter {
    from { opacity: 0; -webkit-transform: scale(.7); }
}
@keyframes scaleUpCenter {
    from { opacity: 0; -webkit-transform: scale(.7); transform: scale(.7); }
}

/* rotate sides first and scale */

.pt-page-rotateRightSideFirst {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateRightSideFirst .8s both ease-in;
    animation: rotateRightSideFirst .8s both ease-in;
}
.pt-page-rotateLeftSideFirst {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateLeftSideFirst .8s both ease-in;
    animation: rotateLeftSideFirst .8s both ease-in;
}
.pt-page-rotateTopSideFirst {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateTopSideFirst .8s both ease-in;
    animation: rotateTopSideFirst .8s both ease-in;
}
.pt-page-rotateBottomSideFirst {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateBottomSideFirst .8s both ease-in;
    animation: rotateBottomSideFirst .8s both ease-in;
}

/* flip */

.pt-page-flipOutRight {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipOutRight .5s both ease-in;
    animation: flipOutRight .5s both ease-in;
}
.pt-page-flipInLeft {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipInLeft .5s both ease-out;
    animation: flipInLeft .5s both ease-out;
}
.pt-page-flipOutLeft {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipOutLeft .5s both ease-in;
    animation: flipOutLeft .5s both ease-in;
}
.pt-page-flipInRight {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipInRight .5s both ease-out;
    animation: flipInRight .5s both ease-out;
}
.pt-page-flipOutTop {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipOutTop .5s both ease-in;
    animation: flipOutTop .5s both ease-in;
}
.pt-page-flipInBottom {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipInBottom .5s both ease-out;
    animation: flipInBottom .5s both ease-out;
}
.pt-page-flipOutBottom {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipOutBottom .5s both ease-in;
    animation: flipOutBottom .5s both ease-in;
}
.pt-page-flipInTop {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: flipInTop .5s both ease-out;
    animation: flipInTop .5s both ease-out;
}

/* rotate fall */

.pt-page-rotateFall {
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-animation: rotateFall 1s both ease-in;
    animation: rotateFall 1s both ease-in;
}

/* rotate newspaper */
.pt-page-rotateOutNewspaper {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rotateOutNewspaper .5s both ease-in;
    animation: rotateOutNewspaper .5s both ease-in;
}
.pt-page-rotateInNewspaper {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: rotateInNewspaper .5s both ease-out;
    animation: rotateInNewspaper .5s both ease-out;
}

/* push */
.pt-page-rotatePushLeft {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotatePushLeft .8s both ease;
    animation: rotatePushLeft .8s both ease;
}
.pt-page-rotatePushRight {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotatePushRight .8s both ease;
    animation: rotatePushRight .8s both ease;
}
.pt-page-rotatePushTop {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotatePushTop .8s both ease;
    animation: rotatePushTop .8s both ease;
}
.pt-page-rotatePushBottom {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotatePushBottom .8s both ease;
    animation: rotatePushBottom .8s both ease;
}

/* pull */
.pt-page-rotatePullRight {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotatePullRight .5s both ease;
    animation: rotatePullRight .5s both ease;
}
.pt-page-rotatePullLeft {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotatePullLeft .5s both ease;
    animation: rotatePullLeft .5s both ease;
}
.pt-page-rotatePullTop {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotatePullTop .5s both ease;
    animation: rotatePullTop .5s both ease;
}
.pt-page-rotatePullBottom {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotatePullBottom .5s both ease;
    animation: rotatePullBottom .5s both ease;
}

/* fold */
.pt-page-rotateFoldRight {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateFoldRight .7s both ease;
    animation: rotateFoldRight .7s both ease;
}
.pt-page-rotateFoldLeft {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateFoldLeft .7s both ease;
    animation: rotateFoldLeft .7s both ease;
}
.pt-page-rotateFoldTop {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateFoldTop .7s both ease;
    animation: rotateFoldTop .7s both ease;
}
.pt-page-rotateFoldBottom {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateFoldBottom .7s both ease;
    animation: rotateFoldBottom .7s both ease;
}

/* unfold */
.pt-page-rotateUnfoldLeft {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateUnfoldLeft .7s both ease;
    animation: rotateUnfoldLeft .7s both ease;
}
.pt-page-rotateUnfoldRight {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateUnfoldRight .7s both ease;
    animation: rotateUnfoldRight .7s both ease;
}
.pt-page-rotateUnfoldTop {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateUnfoldTop .7s both ease;
    animation: rotateUnfoldTop .7s both ease;
}
.pt-page-rotateUnfoldBottom {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateUnfoldBottom .7s both ease;
    animation: rotateUnfoldBottom .7s both ease;
}

/* room walls */
.pt-page-rotateRoomLeftOut {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateRoomLeftOut .8s both ease;
    animation: rotateRoomLeftOut .8s both ease;
}
.pt-page-rotateRoomLeftIn {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateRoomLeftIn .8s both ease;
    animation: rotateRoomLeftIn .8s both ease;
}
.pt-page-rotateRoomRightOut {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateRoomRightOut .8s both ease;
    animation: rotateRoomRightOut .8s both ease;
}
.pt-page-rotateRoomRightIn {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateRoomRightIn .8s both ease;
    animation: rotateRoomRightIn .8s both ease;
}
.pt-page-rotateRoomTopOut {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateRoomTopOut .8s both ease;
    animation: rotateRoomTopOut .8s both ease;
}
.pt-page-rotateRoomTopIn {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateRoomTopIn .8s both ease;
    animation: rotateRoomTopIn .8s both ease;
}
.pt-page-rotateRoomBottomOut {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateRoomBottomOut .8s both ease;
    animation: rotateRoomBottomOut .8s both ease;
}
.pt-page-rotateRoomBottomIn {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateRoomBottomIn .8s both ease;
    animation: rotateRoomBottomIn .8s both ease;
}

/* cube */
.pt-page-rotateCubeLeftOut {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateCubeLeftOut .6s both ease-in;
    animation: rotateCubeLeftOut .6s both ease-in;
}
.pt-page-rotateCubeLeftIn {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateCubeLeftIn .6s both ease-in;
    animation: rotateCubeLeftIn .6s both ease-in;
}
.pt-page-rotateCubeRightOut {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateCubeRightOut .6s both ease-in;
    animation: rotateCubeRightOut .6s both ease-in;
}
.pt-page-rotateCubeRightIn {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateCubeRightIn .6s both ease-in;
    animation: rotateCubeRightIn .6s both ease-in;
}
.pt-page-rotateCubeTopOut {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateCubeTopOut .6s both ease-in;
    animation: rotateCubeTopOut .6s both ease-in;
}
.pt-page-rotateCubeTopIn {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateCubeTopIn .6s both ease-in;
    animation: rotateCubeTopIn .6s both ease-in;
}
.pt-page-rotateCubeBottomOut {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateCubeBottomOut .6s both ease-in;
    animation: rotateCubeBottomOut .6s both ease-in;
}
.pt-page-rotateCubeBottomIn {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateCubeBottomIn .6s both ease-in;
    animation: rotateCubeBottomIn .6s both ease-in;
}

/* carousel */
.pt-page-rotateCarouselLeftOut {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateCarouselLeftOut .8s both ease;
    animation: rotateCarouselLeftOut .8s both ease;
}
.pt-page-rotateCarouselLeftIn {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateCarouselLeftIn .8s both ease;
    animation: rotateCarouselLeftIn .8s both ease;
}
.pt-page-rotateCarouselRightOut {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-animation: rotateCarouselRightOut .8s both ease;
    animation: rotateCarouselRightOut .8s both ease;
}
.pt-page-rotateCarouselRightIn {
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-animation: rotateCarouselRightIn .8s both ease;
    animation: rotateCarouselRightIn .8s both ease;
}
.pt-page-rotateCarouselTopOut {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateCarouselTopOut .8s both ease;
    animation: rotateCarouselTopOut .8s both ease;
}
.pt-page-rotateCarouselTopIn {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateCarouselTopIn .8s both ease;
    animation: rotateCarouselTopIn .8s both ease;
}
.pt-page-rotateCarouselBottomOut {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateCarouselBottomOut .8s both ease;
    animation: rotateCarouselBottomOut .8s both ease;
}
.pt-page-rotateCarouselBottomIn {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateCarouselBottomIn .8s both ease;
    animation: rotateCarouselBottomIn .8s both ease;
}

/* sides */
.pt-page-rotateSidesOut {
    -webkit-transform-origin: -50% 50%;
    transform-origin: -50% 50%;
    -webkit-animation: rotateSidesOut .5s both ease-in;
    animation: rotateSidesOut .5s both ease-in;
}
.pt-page-rotateSidesIn {
    -webkit-transform-origin: 150% 50%;
    transform-origin: 150% 50%;
    -webkit-animation: rotateSidesIn .5s both ease-out;
    animation: rotateSidesIn .5s both ease-out;
}

/* slide */
.pt-page-rotateSlideOut {
    -webkit-animation: rotateSlideOut 1s both ease;
    animation: rotateSlideOut 1s both ease;
}
.pt-page-rotateSlideIn {
    -webkit-animation: rotateSlideIn 1s both ease;
    animation: rotateSlideIn 1s both ease;
}

/********************************* keyframes **************************************/

/* rotate sides first and scale */

@-webkit-keyframes rotateRightSideFirst {
    40% { -webkit-transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateRightSideFirst {
    40% { -webkit-transform: rotateY(15deg); transform: rotateY(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateLeftSideFirst {
    40% { -webkit-transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateLeftSideFirst {
    40% { -webkit-transform: rotateY(-15deg); transform: rotateY(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateTopSideFirst {
    40% { -webkit-transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateTopSideFirst {
    40% { -webkit-transform: rotateX(15deg); transform: rotateX(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

@-webkit-keyframes rotateBottomSideFirst {
    40% { -webkit-transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); opacity:0; }
}
@keyframes rotateBottomSideFirst {
    40% { -webkit-transform: rotateX(-15deg); transform: rotateX(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(0.8) translateZ(-200px); transform: scale(0.8) translateZ(-200px); opacity:0; }
}

/* flip */

@-webkit-keyframes flipOutRight {
    to { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipOutRight {
    to { -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInLeft {
    from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipInLeft {
    from { -webkit-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutLeft {
    to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}
@keyframes flipOutLeft {
    to { -webkit-transform: translateZ(-1000px) rotateY(-90deg); transform: translateZ(-1000px) rotateY(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInRight {
    from { -webkit-transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}
@keyframes flipInRight {
    from { -webkit-transform: translateZ(-1000px) rotateY(90deg); transform: translateZ(-1000px) rotateY(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutTop {
    to { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipOutTop {
    to { -webkit-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInBottom {
    from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipInBottom {
    from { -webkit-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipOutBottom {
    to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}
@keyframes flipOutBottom {
    to { -webkit-transform: translateZ(-1000px) rotateX(-90deg); transform: translateZ(-1000px) rotateX(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipInTop {
    from { -webkit-transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}
@keyframes flipInTop {
    from { -webkit-transform: translateZ(-1000px) rotateX(90deg); transform: translateZ(-1000px) rotateX(90deg); opacity: 0.2; }
}

/* fall */

@-webkit-keyframes rotateFall {
    0% { -webkit-transform: rotateZ(0deg); }
    20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
    40% { -webkit-transform: rotateZ(17deg); }
    60% { -webkit-transform: rotateZ(16deg); }
    100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
    0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); }
    20% { -webkit-transform: rotateZ(10deg); transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    40% { -webkit-transform: rotateZ(17deg); transform: rotateZ(17deg); }
    60% { -webkit-transform: rotateZ(16deg); transform: rotateZ(16deg); }
    100% { -webkit-transform: translateY(100%) rotateZ(17deg); transform: translateY(100%) rotateZ(17deg); }
}

/* newspaper */

@-webkit-keyframes rotateOutNewspaper {
    to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
    to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

@-webkit-keyframes rotateInNewspaper {
    from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}
@keyframes rotateInNewspaper {
    from { -webkit-transform: translateZ(-3000px) rotateZ(-360deg); transform: translateZ(-3000px) rotateZ(-360deg); opacity: 0; }
}

/* push */

@-webkit-keyframes rotatePushLeft {
    to { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@keyframes rotatePushLeft {
    to { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePushRight {
    to { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@keyframes rotatePushRight {
    to { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePushTop {
    to { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@keyframes rotatePushTop {
    to { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePushBottom {
    to { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@keyframes rotatePushBottom {
    to { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
}

/* pull */

@-webkit-keyframes rotatePullRight {
    from { opacity: 0; -webkit-transform: rotateY(-90deg); }
}
@keyframes rotatePullRight {
    from { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); }
}

@-webkit-keyframes rotatePullLeft {
    from { opacity: 0; -webkit-transform: rotateY(90deg); }
}
@keyframes rotatePullLeft {
    from { opacity: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }
}

@-webkit-keyframes rotatePullTop {
    from { opacity: 0; -webkit-transform: rotateX(-90deg); }
}
@keyframes rotatePullTop {
    from { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); }
}

@-webkit-keyframes rotatePullBottom {
    from { opacity: 0; -webkit-transform: rotateX(90deg); }
}
@keyframes rotatePullBottom {
    from { opacity: 0; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
}

/* fold */

@-webkit-keyframes rotateFoldRight {
    to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateFoldRight {
    to { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateFoldLeft {
    to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateFoldLeft {
    to { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateFoldTop {
    to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateFoldTop {
    to { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateFoldBottom {
    to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateFoldBottom {
    to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
}

/* unfold */

@-webkit-keyframes rotateUnfoldLeft {
    from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateUnfoldLeft {
    from { opacity: 0; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateUnfoldRight {
    from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateUnfoldRight {
    from { opacity: 0; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateUnfoldTop {
    from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateUnfoldTop {
    from { opacity: 0; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateUnfoldBottom {
    from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateUnfoldBottom {
    from { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
}

/* room walls */

@-webkit-keyframes rotateRoomLeftOut {
    to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomLeftOut {
    to { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomLeftIn {
    from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomLeftIn {
    from { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightOut {
    to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); }
}
@keyframes rotateRoomRightOut {
    to { opacity: .3; -webkit-transform: translateX(100%) rotateY(-90deg); transform: translateX(100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateRoomRightIn {
    from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); }
}
@keyframes rotateRoomRightIn {
    from { opacity: .3; -webkit-transform: translateX(-100%) rotateY(90deg); transform: translateX(-100%) rotateY(90deg); }
}

@-webkit-keyframes rotateRoomTopOut {
    to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomTopOut {
    to { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); transform: translateY(-100%) rotateX(-90deg); }
}

@-webkit-keyframes rotateRoomTopIn {
    from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomTopIn {
    from { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomOut {
    to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); }
}
@keyframes rotateRoomBottomOut {
    to { opacity: .3; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); }
}

@-webkit-keyframes rotateRoomBottomIn {
    from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); }
}
@keyframes rotateRoomBottomIn {
    from { opacity: .3; -webkit-transform: translateY(-100%) rotateX(-90deg); transform: translateY(-100%) rotateX(-90deg); }
}

/* cube */

@-webkit-keyframes rotateCubeLeftOut {
    50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
    100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
}
@keyframes rotateCubeLeftOut {
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg);  transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
    100% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
}

@-webkit-keyframes rotateCubeLeftIn {
    0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
    50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}
@keyframes rotateCubeLeftIn {
    0% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;  -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg);  transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
}

@-webkit-keyframes rotateCubeRightOut {
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
    100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); }
}
@keyframes rotateCubeRightOut {
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg); }
    100% { opacity: .3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
}

@-webkit-keyframes rotateCubeRightIn {
    0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); }
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}
@keyframes rotateCubeRightIn {
    0% { opacity: .3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); }
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); }
}

@-webkit-keyframes rotateCubeTopOut {
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
    100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
}
@keyframes rotateCubeTopOut {
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
    100% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
}

@-webkit-keyframes rotateCubeTopIn {
    0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}
@keyframes rotateCubeTopIn {
    0% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
}

@-webkit-keyframes rotateCubeBottomOut {
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
    100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); }
}
@keyframes rotateCubeBottomOut {
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg); }
    100% { opacity: .3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg); }
}

@-webkit-keyframes rotateCubeBottomIn {
    0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); }
    50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}
@keyframes rotateCubeBottomIn {
    0% { opacity: .3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg); }
    50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg); }
}

/* carousel */

@-webkit-keyframes rotateCarouselLeftOut {
    to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselLeftOut {
    to { opacity: .3; -webkit-transform: translateX(-150%) scale(.4) rotateY(-65deg); transform: translateX(-150%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselLeftIn {
    from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselLeftIn {
    from { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightOut {
    to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); }
}
@keyframes rotateCarouselRightOut {
    to { opacity: .3; -webkit-transform: translateX(200%) scale(.4) rotateY(65deg); transform: translateX(200%) scale(.4) rotateY(65deg); }
}

@-webkit-keyframes rotateCarouselRightIn {
    from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}
@keyframes rotateCarouselRightIn {
    from { opacity: .3; -webkit-transform: translateX(-200%) scale(.4) rotateY(-65deg); transform: translateX(-200%) scale(.4) rotateY(-65deg); }
}

@-webkit-keyframes rotateCarouselTopOut {
    to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselTopOut {
    to { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

@-webkit-keyframes rotateCarouselTopIn {
    from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselTopIn {
    from { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomOut {
    to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); }
}
@keyframes rotateCarouselBottomOut {
    to { opacity: .3; -webkit-transform: translateY(200%) scale(.4) rotateX(-65deg); transform: translateY(200%) scale(.4) rotateX(-65deg); }
}

@-webkit-keyframes rotateCarouselBottomIn {
    from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); }
}
@keyframes rotateCarouselBottomIn {
    from { opacity: .3; -webkit-transform: translateY(-200%) scale(.4) rotateX(65deg); transform: translateY(-200%) scale(.4) rotateX(65deg); }
}

/* sides */

@-webkit-keyframes rotateSidesOut {
    to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); }
}
@keyframes rotateSidesOut {
    to { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(90deg); transform: translateZ(-500px) rotateY(90deg); }
}

@-webkit-keyframes rotateSidesIn {
    from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); }
}
@keyframes rotateSidesIn {
    from { opacity: 0; -webkit-transform: translateZ(-500px) rotateY(-90deg); transform: translateZ(-500px) rotateY(-90deg); }
}

/* slide */

@-webkit-keyframes rotateSlideOut {
    25% { opacity: .5; -webkit-transform: translateZ(-500px); }
    75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
    100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
}
@keyframes rotateSlideOut {
    25% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
    75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
    100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); transform: translateZ(-500px) translateX(-200%); }
}

@-webkit-keyframes rotateSlideIn {
    0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
    75% { opacity: .5; -webkit-transform: translateZ(-500px); }
    100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
}
@keyframes rotateSlideIn {
    0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); transform: translateZ(-500px) translateX(200%); }
    75% { opacity: .5; -webkit-transform: translateZ(-500px); transform: translateZ(-500px); }
    100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); }
}

/* animation delay classes */

.pt-page-delay100 {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}
.pt-page-delay180 {
    -webkit-animation-delay: .180s;
    animation-delay: .180s;
}
.pt-page-delay200 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}
.pt-page-delay300 {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
.pt-page-delay400 {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}
.pt-page-delay500 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
.pt-page-delay700 {
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}
.pt-page-delay1000 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff;
}

/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}


/* Magnific Popup CSS */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8; }

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden; }

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /*padding: 0 8px;*/
    box-sizing: border-box; }

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle; }

.mfp-align-top .mfp-container:before {
    display: none; }

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto; }

.mfp-ajax-cur {
    cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out; }

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
    cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }

.mfp-loading.mfp-figure {
    display: none; }

.mfp-hide {
    display: none !important; }

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044; }
.mfp-preloader a {
    color: #CCC; }
.mfp-preloader a:hover {
    color: #FFF; }

.mfp-s-ready .mfp-preloader {
    display: none; }

.mfp-s-error .mfp-content {
    display: none; }

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none;
    touch-action: manipulation; }

button::-moz-focus-inner {
    padding: 0;
    border: 0; }

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace; }
.mfp-close:hover,
.mfp-close:focus {
    opacity: 1; }
.mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
    color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%; }

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap; }

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent; }
.mfp-arrow:active {
    margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1; }
.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
    left: 0; }
.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
    right: 0; }
.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
.mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
    line-height: 0; }
.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
.mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto; }

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #F3F3F3;
    word-wrap: break-word;
    padding-right: 36px; }

.mfp-image-holder .mfp-content {
    max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
    /**
         * Remove all paddings around the image on small screen
         */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0; }
    .mfp-img-mobile img.mfp-img {
        padding: 0; }
    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0; }
    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px; }
    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0; }
    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px; }
    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0; } }

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75); }
    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0; }
    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%; }
    .mfp-container {
        padding-left: 6px;
        padding-right: 6px; } }

/* Styles for dialog window */
.zoom-anim-dialog {
    background: white;
    padding: 30px;
    text-align: left;
    max-width: 100%;
    /*margin: 40px auto;*/
    position: relative;
}


/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
    opacity: 0;
    height: 100%;
    overflow: auto;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0;
}

.my-mfp-zoom-in .mfp-container:before {
    height: 0;
}

.my-mfp-zoom-in .mfp-content {
    height: 100%;
}

.my-mfp-zoom-in .mfp-container {
    padding: 0;
}

.pe-fw,.pe-li{text-align:center}[class*=" pe-7s-"],[class^=pe-7s-]{display:inline-block;font-family:Pe-icon-7-stroke;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}/*! Modified from font-awesome helper CSS classes - PIXEDEN
 *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (CSS: MIT License)
 */.pe-lg{font-size:1.33em;line-height:.75em;vertical-align:-15%}.pe-stack,.pe-va{vertical-align:middle}.pe-2x{font-size:2em}.pe-3x{font-size:3em}.pe-4x{font-size:4em}.pe-5x{font-size:5em}.pe-fw{width:1.28571em}.pe-ul{padding-left:0;margin-left:2.14286em;list-style-type:none}.pe-ul>li{position:relative}.pe-li{position:absolute;left:-2.14286em;width:2.14286em;top:.14286em}.pe-li.pe-lg{left:-1.85714em}.pe-border{padding:.2em .25em .15em;border-radius:.1em;border:.08em solid #eaeaea}.pull-right{float:right}.pe.pull-left{float:left;margin-right:.3em;margin-left:.3em}.pe-spin{-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.pe-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.pe-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.pe-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.pe-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.pe-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}.pe-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em}.pe-stack-1x,.pe-stack-2x{position:absolute;left:0;width:100%;text-align:center}.pe-stack-1x{line-height:inherit}.pe-stack-2x{font-size:2em}.pe-inverse{color:#fff}.pe-7s-album:before{content:"\e6aa"}.pe-7s-arc:before{content:"\e6ab"}.pe-7s-back-2:before{content:"\e6ac"}.pe-7s-bandaid:before{content:"\e6ad"}.pe-7s-car:before{content:"\e6ae"}.pe-7s-diamond:before{content:"\e6af"}.pe-7s-door-lock:before{content:"\e6b0"}.pe-7s-eyedropper:before{content:"\e6b1"}.pe-7s-female:before{content:"\e6b2"}.pe-7s-gym:before{content:"\e6b3"}.pe-7s-hammer:before{content:"\e6b4"}.pe-7s-headphones:before{content:"\e6b5"}.pe-7s-helm:before{content:"\e6b6"}.pe-7s-hourglass:before{content:"\e6b7"}.pe-7s-leaf:before{content:"\e6b8"}.pe-7s-magic-wand:before{content:"\e6b9"}.pe-7s-male:before{content:"\e6ba"}.pe-7s-map-2:before{content:"\e6bb"}.pe-7s-next-2:before{content:"\e6bc"}.pe-7s-paint-bucket:before{content:"\e6bd"}.pe-7s-pendrive:before{content:"\e6be"}.pe-7s-photo:before{content:"\e6bf"}.pe-7s-piggy:before{content:"\e6c0"}.pe-7s-plugin:before{content:"\e6c1"}.pe-7s-refresh-2:before{content:"\e6c2"}.pe-7s-rocket:before{content:"\e6c3"}.pe-7s-settings:before{content:"\e6c4"}.pe-7s-shield:before{content:"\e6c5"}.pe-7s-smile:before{content:"\e6c6"}.pe-7s-usb:before{content:"\e6c7"}.pe-7s-vector:before{content:"\e6c8"}.pe-7s-wine:before{content:"\e6c9"}.pe-7s-cloud-upload:before{content:"\e68a"}.pe-7s-cash:before{content:"\e68c"}.pe-7s-close:before{content:"\e680"}.pe-7s-bluetooth:before{content:"\e68d"}.pe-7s-cloud-download:before{content:"\e68b"}.pe-7s-way:before{content:"\e68e"}.pe-7s-close-circle:before{content:"\e681"}.pe-7s-id:before{content:"\e68f"}.pe-7s-angle-up:before{content:"\e682"}.pe-7s-wristwatch:before{content:"\e690"}.pe-7s-angle-up-circle:before{content:"\e683"}.pe-7s-world:before{content:"\e691"}.pe-7s-angle-right:before{content:"\e684"}.pe-7s-volume:before{content:"\e692"}.pe-7s-angle-right-circle:before{content:"\e685"}.pe-7s-users:before{content:"\e693"}.pe-7s-angle-left:before{content:"\e686"}.pe-7s-user-female:before{content:"\e694"}.pe-7s-angle-left-circle:before{content:"\e687"}.pe-7s-up-arrow:before{content:"\e695"}.pe-7s-angle-down:before{content:"\e688"}.pe-7s-switch:before{content:"\e696"}.pe-7s-angle-down-circle:before{content:"\e689"}.pe-7s-scissors:before{content:"\e697"}.pe-7s-wallet:before{content:"\e600"}.pe-7s-safe:before{content:"\e698"}.pe-7s-volume2:before{content:"\e601"}.pe-7s-volume1:before{content:"\e602"}.pe-7s-voicemail:before{content:"\e603"}.pe-7s-video:before{content:"\e604"}.pe-7s-user:before{content:"\e605"}.pe-7s-upload:before{content:"\e606"}.pe-7s-unlock:before{content:"\e607"}.pe-7s-umbrella:before{content:"\e608"}.pe-7s-trash:before{content:"\e609"}.pe-7s-tools:before{content:"\e60a"}.pe-7s-timer:before{content:"\e60b"}.pe-7s-ticket:before{content:"\e60c"}.pe-7s-target:before{content:"\e60d"}.pe-7s-sun:before{content:"\e60e"}.pe-7s-study:before{content:"\e60f"}.pe-7s-stopwatch:before{content:"\e610"}.pe-7s-star:before{content:"\e611"}.pe-7s-speaker:before{content:"\e612"}.pe-7s-signal:before{content:"\e613"}.pe-7s-shuffle:before{content:"\e614"}.pe-7s-shopbag:before{content:"\e615"}.pe-7s-share:before{content:"\e616"}.pe-7s-server:before{content:"\e617"}.pe-7s-search:before{content:"\e618"}.pe-7s-film:before{content:"\e6a5"}.pe-7s-science:before{content:"\e619"}.pe-7s-disk:before{content:"\e6a6"}.pe-7s-ribbon:before{content:"\e61a"}.pe-7s-repeat:before{content:"\e61b"}.pe-7s-refresh:before{content:"\e61c"}.pe-7s-add-user:before{content:"\e6a9"}.pe-7s-refresh-cloud:before{content:"\e61d"}.pe-7s-paperclip:before{content:"\e69c"}.pe-7s-radio:before{content:"\e61e"}.pe-7s-note2:before{content:"\e69d"}.pe-7s-print:before{content:"\e61f"}.pe-7s-network:before{content:"\e69e"}.pe-7s-prev:before{content:"\e620"}.pe-7s-mute:before{content:"\e69f"}.pe-7s-power:before{content:"\e621"}.pe-7s-medal:before{content:"\e6a0"}.pe-7s-portfolio:before{content:"\e622"}.pe-7s-like2:before{content:"\e6a1"}.pe-7s-plus:before{content:"\e623"}.pe-7s-left-arrow:before{content:"\e6a2"}.pe-7s-play:before{content:"\e624"}.pe-7s-key:before{content:"\e6a3"}.pe-7s-plane:before{content:"\e625"}.pe-7s-joy:before{content:"\e6a4"}.pe-7s-photo-gallery:before{content:"\e626"}.pe-7s-pin:before{content:"\e69b"}.pe-7s-phone:before{content:"\e627"}.pe-7s-plug:before{content:"\e69a"}.pe-7s-pen:before{content:"\e628"}.pe-7s-right-arrow:before{content:"\e699"}.pe-7s-paper-plane:before{content:"\e629"}.pe-7s-delete-user:before{content:"\e6a7"}.pe-7s-paint:before{content:"\e62a"}.pe-7s-bottom-arrow:before{content:"\e6a8"}.pe-7s-notebook:before{content:"\e62b"}.pe-7s-note:before{content:"\e62c"}.pe-7s-next:before{content:"\e62d"}.pe-7s-news-paper:before{content:"\e62e"}.pe-7s-musiclist:before{content:"\e62f"}.pe-7s-music:before{content:"\e630"}.pe-7s-mouse:before{content:"\e631"}.pe-7s-more:before{content:"\e632"}.pe-7s-moon:before{content:"\e633"}.pe-7s-monitor:before{content:"\e634"}.pe-7s-micro:before{content:"\e635"}.pe-7s-menu:before{content:"\e636"}.pe-7s-map:before{content:"\e637"}.pe-7s-map-marker:before{content:"\e638"}.pe-7s-mail:before{content:"\e639"}.pe-7s-mail-open:before{content:"\e63a"}.pe-7s-mail-open-file:before{content:"\e63b"}.pe-7s-magnet:before{content:"\e63c"}.pe-7s-loop:before{content:"\e63d"}.pe-7s-look:before{content:"\e63e"}.pe-7s-lock:before{content:"\e63f"}.pe-7s-lintern:before{content:"\e640"}.pe-7s-link:before{content:"\e641"}.pe-7s-like:before{content:"\e642"}.pe-7s-light:before{content:"\e643"}.pe-7s-less:before{content:"\e644"}.pe-7s-keypad:before{content:"\e645"}.pe-7s-junk:before{content:"\e646"}.pe-7s-info:before{content:"\e647"}.pe-7s-home:before{content:"\e648"}.pe-7s-help2:before{content:"\e649"}.pe-7s-help1:before{content:"\e64a"}.pe-7s-graph3:before{content:"\e64b"}.pe-7s-graph2:before{content:"\e64c"}.pe-7s-graph1:before{content:"\e64d"}.pe-7s-graph:before{content:"\e64e"}.pe-7s-global:before{content:"\e64f"}.pe-7s-gleam:before{content:"\e650"}.pe-7s-glasses:before{content:"\e651"}.pe-7s-gift:before{content:"\e652"}.pe-7s-folder:before{content:"\e653"}.pe-7s-flag:before{content:"\e654"}.pe-7s-filter:before{content:"\e655"}.pe-7s-file:before{content:"\e656"}.pe-7s-expand1:before{content:"\e657"}.pe-7s-exapnd2:before{content:"\e658"}.pe-7s-edit:before{content:"\e659"}.pe-7s-drop:before{content:"\e65a"}.pe-7s-drawer:before{content:"\e65b"}.pe-7s-download:before{content:"\e65c"}.pe-7s-display2:before{content:"\e65d"}.pe-7s-display1:before{content:"\e65e"}.pe-7s-diskette:before{content:"\e65f"}.pe-7s-date:before{content:"\e660"}.pe-7s-cup:before{content:"\e661"}.pe-7s-culture:before{content:"\e662"}.pe-7s-crop:before{content:"\e663"}.pe-7s-credit:before{content:"\e664"}.pe-7s-copy-file:before{content:"\e665"}.pe-7s-config:before{content:"\e666"}.pe-7s-compass:before{content:"\e667"}.pe-7s-comment:before{content:"\e668"}.pe-7s-coffee:before{content:"\e669"}.pe-7s-cloud:before{content:"\e66a"}.pe-7s-clock:before{content:"\e66b"}.pe-7s-check:before{content:"\e66c"}.pe-7s-chat:before{content:"\e66d"}.pe-7s-cart:before{content:"\e66e"}.pe-7s-camera:before{content:"\e66f"}.pe-7s-call:before{content:"\e670"}.pe-7s-calculator:before{content:"\e671"}.pe-7s-browser:before{content:"\e672"}.pe-7s-box2:before{content:"\e673"}.pe-7s-box1:before{content:"\e674"}.pe-7s-bookmarks:before{content:"\e675"}.pe-7s-bicycle:before{content:"\e676"}.pe-7s-bell:before{content:"\e677"}.pe-7s-battery:before{content:"\e678"}.pe-7s-ball:before{content:"\e679"}.pe-7s-back:before{content:"\e67a"}.pe-7s-attention:before{content:"\e67b"}.pe-7s-anchor:before{content:"\e67c"}.pe-7s-albums:before{content:"\e67d"}.pe-7s-alarm:before{content:"\e67e"}.pe-7s-airplay:before{content:"\e67f"}

/*
* ----------------------------------------------------
Author       : Ideas_Factory
Template Name: Nassar - Creative Resume / CV / Portfolio / vCard
* ----------------------------------------------------
*/

/*
* -----------------------------------------------------
*  01.Common Styles
*  02.Preloader
*  03.Home
*  04.Menu
*  05.About Section
*  06.Resume Section
*  07.Services Section
*  08.Prtfolio Section
*  09.Blog Section
*  10.Contact Section
*  11.Single Blog
* -----------------------------------------------------
*/



/*=================================*/
/*  01.Common Styles
/*=================================*/

body, html {
    font-size: 100%;
    padding: 0;
    margin: 0;
}

html {
    --bg: rgba(0, 0, 0, 0.1);
}

html.animating {
    --bg: rgba(0, 0, 0, 0);
}

body {
    overflow: hidden;
    font-family: "Nunito", sans-serif;
    color: #666;
    background-color: #f6f6f6;/*#ecf0f1*/
    line-height: 1.8;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: var(--bg);
    border: none;
    border-radius: 0;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
    border: none;
}

.page-right {
    color: #666;
    overflow-x: hidden !important;
}

img {
    max-width: 100%;
}

img.full_width {
    width: 100%;
    display: block;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    color: #232323;
}

p {
    color: #9b9b9b;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

a, a:visited {
    color: inherit;
}

b, strong, label {
    font-weight: 600;
}

.full-height {
    background-size: cover;
    background-position: center;
}

h3.subtitle {
    position: relative;
    display: inline-block;
    font-size: 22px;
    text-transform: capitalize;
    font-weight: 700;
    color: #282828;
    margin-bottom: 35px;
    padding-bottom: 5px;
}

g.Header {
    stroke-width: 2px;
}

h3.subtitle svg {
    position: absolute;
    top: 33px;
    left: 0px;
    width: 55px;
}

g.Web {
    opacity: 1;
}

.pag-e {
    padding: 0;
    height: 100vh;
}

section {
    background-color: #ecf0f1;
    height: 100vh;
}

.animating section {
    background-color: transparent;
}

section.pt-page {
    padding: 0 50px;
    overflow-y: scroll;
    scrollbar-color: var(--bg) transparent;
    scrollbar-width: thin;
}

section.pt-page .scroll___content {
    padding: 30px 0;
}

@media(max-width:1200px){

    section.pt-page {
        padding: 0 4%;
    }

    section.pt-page .scroll___content {
        padding: 20px 0;
    }

}

section.pt-page .scroll__content {
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.08);
    background: #fff;
    max-width: 995px;
    margin: 0 auto;
    overflow: hidden;
}

section .sec__content {
    padding: 70px 50px;
}

section.pt-page .container {
    padding: 0;
    max-width: 100%;
}

.height-auto,
section:not(.pt-page) {
    height: auto;
}

section:not(.pt-page) .container {
    width: 100%;
}

body.blog .pag-e {
    padding: 0 5%;
}

.sec_title {
    position: relative;
    z-index: 55;
    padding-top: 40px;
    padding-bottom: 30px;
    line-height: 1;
    padding-left: 50px;
    padding-right: 50px;
}

section:not(.pt-page) .sec_title {
    margin-left: 0;
    margin-right: 0;
}

.sec_title:before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50px;
    width: calc(100% - 100px);
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.sec_title:after {
    content: "";
    position: absolute;
    top: -85px;
    left: -106px;
    width: 190px;
    height: 190px;
    transform: rotate(-140deg);
    background: repeat center/11px;
    z-index: -1;
}

.sec_title h2 {
    font-size: 30px;
    font-weight: 800;
    color: #282828;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
}

.sec_title h2:after {
    content: "";
    position: absolute;
    bottom: -26px;
    left: 0;
    width: 55px;
    height: 3px;
}

.margin-top-70 {
    margin-top: 70px;
}

.margin-top-55 {
    margin-top: 55px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-45 {
    margin-top: 45px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-18 {
    margin-top: 18px;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.padding-30 {
    padding: 30px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.display-table {
    display: table;
    height: 100%;
    width: 100%;
}

.display-table-cell {
    display: table-cell;
    vertical-align: middle;
    position: relative;
    z-index: 10;
}

a:hover, a:focus {
    text-decoration: none;
    outline: none;
}

button,
button:active,
button:focus,
button:hover {
    border-color: transparent;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: 0;
}

.pt-page {
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.pt-page-current, .no-js .pt-page {
    visibility: visible;
    z-index: 1;
    padding: 30px 60px;
}

.pt-perspective {
    position: relative;
    width: 100%;
    height: auto;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    perspective: 1200px;
}

.pt-perspective.overFlowHidden {
    overflow: hidden;
    height: 100vh;
}

a.btn,
button.btn {
    padding: 14px 26px;
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 20px;
    font-family: "Nunito", sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #282828;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: capitalize;
    border-width: 2px;
    border-style: solid;
    border-radius: 0;
    background-color: transparent;
    position: relative;
    z-index: 1;
}

a.btn:hover,
button.btn:hover,
a.btn:active,
button.btn:active {
    box-shadow: none;
    color: #fff;
}

/*End Common Styles*/



/*=================================*/
/*  02.Preloader
/*=================================*/

.page-loader {
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}

.loader {
    position: fixed;
    z-index: 100000;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.4;
    background: #000;
    animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
    to {
        opacity: 1;
        transform: scale3d(0.5,0.5,1);
    }
}

/*End Preloader*/



/*=================================*/
/*  03.Home
/*=================================*/

.home-lines {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: all 0.6s;
    display: none;
}

.home-lines .linesContent {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.6s;
}

.home_type .home-lines .linesContent {
    width: 90%;
}

.home-lines:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.8;
}

.side-right .home-lines:after {
    background: repeat center/11px;
}

.open-right .home-lines {
    width: 50%;
}

.open-right .side-right > .home-lines .linesContent {
    width: 100%;
    transform: translateX(-50%);
    left: 50%;
}

.home-lines .home-line {
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
    border-color: #fff;
    transition: all 0.6s;
}

.open-right .side-right > .home-lines .home-line {
    width: 30px;
    height: 30px;
}

.home-lines .home-line:nth-child(1){
    right: 30px;
    top: 30px;
    border-right-width: 3px;
    border-right-style: solid;
    border-top-width: 3px;
    border-top-style: solid;
}

.home-lines .home-line:nth-child(2){
    bottom: 30px;
    left: 30px;
    border-left-width: 3px;
    border-left-style: solid;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

.home-lines .home-line:nth-child(3){
    left: 30px;
    top: 30px;
    border-left-width: 3px;
    border-left-style: solid;
    border-top-width: 3px;
    border-top-style: solid;
}

.home-lines .home-line:nth-child(4){
    right: 30px;
    bottom: 30px;
    border-right-width: 3px;
    border-right-style: solid;
    border-bottom-width: 3px;
    border-bottom-style: solid;
}

@media(max-width:1200px){

    .home-lines .home-line:nth-child(1){
        right: 20px;
        top: 20px;
    }

    .home-lines .home-line:nth-child(2){
        bottom: 20px;
        left: 20px;
    }

    .home-lines .home-line:nth-child(3){
        left: 20px;
        top: 20px;
    }

    .home-lines .home-line:nth-child(4){
        right: 20px;
        bottom: 20px;
    }

}

.home_type .side {
    background-size: cover;
    background-position: center;
}

.home_type .side .overlayer {
    background-color: rgba(0, 0, 0, 0.55);
    height: 100%;
    position: relative;
    z-index: 11;
}

.home_type .side h1 {
    font-weight: 800;
    font-size: 62px;
    position: relative;
    z-index: 10;
    color: #fff;
}

.home_type .side h1 .typed-cursor {
    font-weight: 100;
}

.home_type .more_info {
    display: inline-block;
    text-align: left;
    margin-top: 30px;
}

.home_type .more_info .item {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.29);
    padding: 15px 7px;
}

.home_type .more_info .item:first-of-type {
    border-top: 1px dashed rgba(255, 255, 255, 0.29);
}

.home_type .more_info a:hover {
    border-width: 2px;
    border-style: solid;
}

.home_type .more_info .info-title {
    display: inline-block;
    font-weight: 500;
    margin-right: 5px;
}

.home_type .more_info .info-body {
    color: rgba(238, 238, 238, 0.75);
}

.home_type .more_info a {
    display: inline-block;
    text-transform: capitalize;
    padding: 14px 22px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin-top: 40px;
    margin-right: 15px;
    margin-left: 15px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    min-width: 140px;
    text-align: center;
}

.home_type .more_info a.bgColor:hover {
    background-color: transparent;
    border-color: #fff;
}

/*End Home Type*/



/*=================================*/
/*  04.Menu
/*=================================*/

.mob-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 55;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.38);
    padding: 17px 0;
    display: none;
}

.mob-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 58;
    width: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 5px rgba(95, 95, 95, 0.28);
    padding: 15px 0;
}

.mob-menu .mob-menu-content {
    overflow: hidden;
}

.mob-menu .menu-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    line-height: 31px;
}

.mob-menu .menu-title a {
    color: inherit;
}

.navbar-toggle {
    padding: 0;
}

.navbar-toggle .icon-bar {
    background-color: #000;
    height: 2px;
    width: 22px;
    transition: all 0.2s;
}

.navbar-toggle .icon-bar:nth-of-type(2) {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    opacity: 0;
}

.navbar-toggle .icon-bar:nth-of-type(4) {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.collapsed .icon-bar {
    transform: none !important;
    opacity: 1 !important;
}

.menu {
    -webkit-transition: all ease-in 0.5s;
    transition: all ease-in 0.5s;
}

.menu_list {
    margin: 0;
}

#menu ul,
.menu_list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu_list span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    margin: 1.2% 0;
    transition: all 0.6s;
}

.menu_list a {
    display: inline-block;
    position: relative;
    font-weight: 900;
    font-size: 4.8vw;
    color: transparent;
    -webkit-text-stroke: 2px #111;
    transition: all 0.6s;
}


.menu_list a:after {
    content: attr(data-hover);
    position: absolute;
    top: 0;
    left: 0;
    -webkit-text-stroke: 0;
    color: #333;
    height: auto;
    clip-path: inset(0px 100% 0px 0px);
    overflow: hidden;
    transition: all 0.4s;
}

.open-right .menu_list a:after {
    transition: all 0.3s;
}

.menu_list a:hover::after {
    clip-path: inset(0px 0px 0px 0px);
}

.menu_list .home-item {
    position: absolute;
    bottom: -12%;
    left: 41%;
}

.close-right .home-item {
    opacity: 0;
}

.menu_list .home-item svg {
    transform: rotate(180deg);
    width: 18px;
    fill: #111;
    transition: all 0.3s;
}

.menu_list .home-item a {
    font-size: 9px;
    -webkit-text-stroke: 0;
    color: #333;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
    top: 1vw;
    left: 22px;
    letter-spacing: 0.7px;
}

.open-right .menu_list span:not(.home-item) {
    margin: 0.9% 0;
}

.open-right .menu_list span:not(.home-item) a {
    transform: scale(0.65);
    -webkit-text-stroke: 2.5px #111;
}

/*End Menu*/



/*=================================*/
/*  05.About Section
/*=================================*/

.about span.main_work {
    font-size: 16px;
    font-weight: 500;
    color: #252525;
    letter-spacing: 0.5px;
}

.about .heading {
    margin-bottom: 15px;
}

.about .heading h2 {
    font-size: 24px;
    color: #282828;
    font-weight: 700;
    line-height: 29px;
}

.about .about__img {
    padding: 12px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}

.about p {
    font-size: 15px;
    line-height: 25px;
}

.social-icons {
    margin-top: 15px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons a {
    display: inline-block;
    margin-left: 17px;
    font-size: 14px;
    color: #282828;
}

.social-icons a:first-of-type {
    margin-left: 0;
}

.skills .skill {
    padding-top: 2px;
    padding-bottom: 14px;
    position: relative;
    line-height: 1;
}

.skill > span:not(.percentage) {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #282828;
    font-size: 14px;
}

.skill > span.percentage {
    float: right;
    font-size: 13px;
    color: #acacac;
    font-weight: 700;
    display: inline-block;
    margin-top: 1px;
}

.skills .skill .progress_bg {
    height: 4px;
    background-color: #ececec;
    margin-top: 7px;
}

.skills .skill .progress_bar {
    height: 100%;
}

.owl {
    margin-left: -15px;
    margin-right: -15px;
}

.testi-content {
    padding: 22px 25px 25px 25px;
    position: relative;
    background: #fafafa;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
}

.testi-content:after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 25px;
    width: 15px;
    height: 15px;
    background: #fafafa;
    transform: rotate(-45deg);
    border: 1px solid #d6d6d6;
    border-top: none;
    border-right: none;
}

.testimonials {
    position: relative;
}

.testimonials .arrows {
    position: absolute;
    top: -53px;
    right: 0;
    z-index: 11;
}

.testimonials .arrows span {
    font-size: 24px;
    color: #333;
    border: 1px solid #d8d8d8;
    padding: 2px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.testimonials .arrows span:hover {
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
}

.testimonial {
    padding: 15px;
    padding-bottom: 5px;
    padding-top: 0;
    outline: none;
}

.testimonial p {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 0;
    color: #777;
}

.testimonial .img-wrapper {
    position: relative;
}

.testimonial img {
    width: 65px;
    border-radius: 50%;
    position: absolute;
    margin-top: 20px;
    margin-left: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.11);
}

.testimonial h4,
.testimonial h5 {
    margin-left: 82px;
}

.testimonial h4 {
    color: #282828;
    font-size: 21px;
    font-weight: 700;
    margin-top: 31px;
}

.testimonial h5 {
    margin-top: 5px;
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #777;
    padding-bottom: 12px;
}

.fun-facts .item {
    text-align: center;
    padding: 25px 0;
    position: relative;
    border: 1px solid #dedede;
}

.fun-facts span {
    display: block;
    font-size: 46px;
}

.fun-facts h4 {
    font-size: 30px;
    font-weight: 800;
    color: #383838;
    margin-bottom: 8px;
    margin-top: 17px;
    letter-spacing: 0.5px;
}

.fun-facts h5 {
    font-size: 15px;
    margin: 0;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.58);
}

@media(min-width:992px) and (max-width:1200px){

    .funFactsRow {
        margin: 0;
    }

    .funFactsRow > div {
        padding: 0;
    }

    .funFactsRow > div:not(:first-of-type) .item {
        border-left: none;
    }

    .fun-facts span {
        font-size: 44px;
    }

    .fun-facts h4 {
        font-size: 28px;
        margin-top: 15px;
    }

    .fun-facts h5 {
        font-size: 14px;
    }

}

/*End About Section*/



/*=================================*/
/*  06.Resume Section
/*=================================*/

.resume {
    padding-top: 8px;
}

.resume .item {
    position: relative;
    padding-bottom: 28px;
    padding-left: 20px;
    padding-top: 40px;
    margin-left: 5px;
    border-left-width: 2px;
    border-left-style: solid;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.resume .item:last-of-type {
    padding-bottom: 2px;
}

.resume .date {
    position: absolute;
    line-height: 1;
    margin-bottom: 20px;
    top: 4px;
}

.resume .date:after, .resume .date:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -23px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.resume .date:before {
    width: 13px;
    height: 13px;
    top: 5px;
    left: -27px;
    opacity: 0.12;
}

.resume .date span {
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    position: relative;
    z-index: 5;
}

.resume .date span:after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: calc(100% + 3px);
    opacity: 0.1;
    border-radius: 2px;
}

.resume .date span:before {
    content: "";
    width: 0;
    height: 0;
    display: inline-block;
    border: 5px solid transparent;
    position: absolute;
    top: 11px;
    left: -10px;
    z-index: 1;
    opacity: 0.3;
}

.resume h4 {
    color: #282828;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 11px;
}

/*End Resume Section*/



/*=================================*/
/*  07.Services Section
/*=================================*/

.services .sec__content {
    padding-bottom: 30px;
}

.services .item {
    padding-bottom: 40px;
}

.services .font-icon {
    display: inline-block;
    margin-bottom: 20px;
    width: 55px;
}

.services .font-icon i {
    font-size: 26px;
    padding: 10px;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    line-height: 48px;
    text-align: center;
    position: relative;
    z-index: 5;
}

.services .font-icon i:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    opacity: 0.075;
    transition: all 0.6s;
}

.services .service_content p {
    margin: 0;
}

.services h3 {
    color: #282828;
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
}

/*End Services Section*/



/*=================================*/
/*  08.Prtfolio Section
/*=================================*/

.portfolio_sec .sec__content {
    padding-bottom: 50px;
}

.portfolio_sec .row {
    margin-right: -10px;
    margin-left: -10px;
}

.portfolio_sec .ul-filter {
    margin-bottom: 26px;
    margin-left: 0;
}

.portfolio_sec .ul-filter li {
    display: inline-block;
    position: relative;
    z-index: 5;
    color: #282828;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
    text-transform: capitalize;
    padding-right: 26px;
    margin-right: 0;
    letter-spacing: 0.3px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

li.active_filter:after {
    transform: scale(1) !important;
}

.portfolio_sec .item {
    padding: 0 10px 20px 10px;
}

.portfolio_sec .item .project_content {
    position: relative;
}

.portfolio_sec .item .my_img,
.portfolio_sec .item .my__img {
    overflow: hidden;
}

.portfolio_sec .item img {
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.portfolio_sec .project_content:hover img {
    transform: scale(1.3);
    filter: blur(10px);
}

.portfolio_sec .item .info {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.3s ease-in-out;
    transform: scaleY(0);
    transform-origin: center bottom;
}

.portfolio_sec .info-content,
.portfolio_sec .info-content a {
    display: block;
    height: 100%;
}

.portfolio_sec .project_content:hover .info {
    transform: scaleY(1);
}

.portfolio_sec .project_content:hover .info h3,
.portfolio_sec .project_content:hover .info p {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    transition-delay: 0.4s;
}

.portfolio_sec .project_content:hover .icon {
    transition: all 0.5s;
    transition-delay: 0.4s;
    transform: scale(1);
}

.portfolio_sec .item .info h3 {
    color: #272727;
    font-weight: 700;
    font-size: 22px;
    margin-top: 24px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
    margin-left: 30px;
}

.portfolio_sec .item .info p {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
    margin-top: 13px;
    letter-spacing: 0.3px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 0;
    position: absolute;
    bottom: 15px;
    left: 30px;
}

.portfolio_sec .info .icon {
    position: absolute;
    bottom: 12px;
    right: 24px;
    z-index: 1;
    width: 42px;
    height: 42px;
    transition: all 0.3s;
    transform: scale(0);
}

.portfolio_sec .icon .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.portfolio_sec .item .info i {
    font-size: 22px;
    display: block;
    text-align: center;
    line-height: 42px;

}

.portfolio_sec .item .info i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

@-webkit-keyframes popup-anim {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes popup-anim {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.portfolioAjaxContent .zoom-anim-dialog {
    -webkit-animation: popup-anim 0.3s ease-in-out;
    animation: popup-anim 0.3s ease-in-out;
}

.portfolioAjaxContent .zoom-anim-dialog {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.zoom-anim-dialog .content {
    margin: 0;
    background-color: #fff;
    box-shadow: none;
}

.zoom-anim-dialog .container {
    padding: 0;
    width: 100%;
    max-width: 1000px;
}

.zoom-anim-dialog .project__slider {
    position: relative;
}

.carousel-control.right,
.carousel-control.left {
    background: transparent;
}

.zoom-anim-dialog .carousel-inner .item img {
    width: 100%
}

.zoom-anim-dialog .display-table-cell{
    padding-top: 33px;
}

.zoom-anim-dialog h3 {
    margin-bottom: 15px;
    color: #282828;
    font-weight: 700;
    font-size: 25px;
    text-transform: capitalize;
}

.project_info {
    margin-left: 0;
}

.project_info li {
    font-size: 16px;
    font-weight: 600;
}

.zoom-anim-dialog p {
    font-size: 14px;
}

.my-mfp-zoom-in button.mfp-close,
.my-mfp-zoom-in .mfp-close:active {
    font-size: 36px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    border-radius: 50%;
    top: 20px;
    right: 20px;
    transition: all 0.3s ease-in-out;
}

.zoom-anim-dialog iframe {
    width: 100%;
    max-width: 100%;
}

.single-project-page section.single--project.project-popup .content {
    background-color: #fff;
    padding: 30px 30px;
}

/*End Prtfolio Section*/



/*=================================*/
/*  09.Blog Section
/*=================================*/

.blog .item {
    margin-bottom: 40px;
    overflow-wrap: break-word;
}

.blog .margin-b-zero {
    margin-bottom: 0;
}

.blog .blog__img {
    position: relative;
    z-index: 1;
}

.blog .blog__img:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.blog .blog__img img {
    width: 100%;
}

.blog .blog__img i {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%) scale(0);
    color: #fff;
    z-index: 5;
    font-size: 50px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.blog .blog__img:hover:after {
    opacity: 0.3;
}

.blog .blog__img:hover i {
    opacity: 1;
}

.blog .blog__img:hover i {
    transform: translateY(-50%) scale(1);
}

.blog .item .content {
    padding: 33px 15px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 2;
    background-color: #fff;
    text-align: center;
}

.blog .item h3 {
    font-weight: 600;
    color: #232323;
}

.blog .item h3 a {
    display: inline-block;
    max-width: 100%;
    color: #282828;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.blog .item p {
    display: inline-block;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.2px;
    line-height: 1;
    margin-bottom: 12px;
    position: relative;
    padding: 10px 12px;
}

.blog .item p:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.12;
    z-index: -1;
    border-radius: 10px;
}

#blog .load-more {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/*End Blog Section*/



/*=================================*/
/*  10.Contact Section
/*=================================*/


.contact .subtitle {
    margin-bottom: 41px;
}

@media(max-width:768px){
    .contact #map {
        margin-bottom: 30px;
    }
}

.contact .contact_form {
    position: relative;
}

.contact .form-control {
    margin-top: 15px;
    border-radius: 0;
    padding: 18px 12px;
    font-size: 15px;
    box-shadow: none;
    border: 1px solid #ddd;
}

.form-control {
    box-shadow: none;
    border: 1px solid #ddd;
}

input.form-control {
    height: 45px;
}

.contact .form-control[name="name"] {
    margin-top: 0;
}

.contact textarea.form-control {
    height: 200px;
}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.contact button.submit {
    margin-top: 20px;
    margin-bottom: 0;
}

.errorForm {
    border: 1px solid #da4856 !important;
}

.msg_success,
.msg_error{
    display: none;
    font-size: 12px;
    padding-top: 15px;
    position: absolute;
    bottom: -50px;
    text-transform: capitalize;
}

.msg_error p {
    color: #CE3D3D;
}

.msg_success p {
    color: #1FB4DA;
}

@media(max-width:768px){

    .contact-info .item {
        margin-bottom: 30px;
    }

}

.contact .contact-info .icon {
    margin-bottom: 12px;
    font-size: 40px;
}

.contact .contact-info p {
    font-size: 16px;
    color: #888;
    margin-bottom: 0;
}

/*End Contact Section*/


/*=================================*/
/*  11.Single Blog
/*=================================*/
.post, .page{
    margin: 0;
}

header.entry-header {
    position: relative;
}

header.entry-header:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 3px;
}

.page header.entry-header:after{
    width: 0;
    height: 0;
}

.post-thumbnail img {
    width: 100%;
}

body.single .page-right {
    left: 25%;
}

.single-blog > .page-inner > .main-content {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.single-blog > .page-inner > .main-content > .content {
    padding-bottom: 15px;
}

.single-blog > .page-inner > .main-content > .content {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

.single-blog > .page-inner > .main-content > .content > .container {
    padding: 0 50px;
}

.single-blog .padding-bottom-90 .sec__content {
    padding-bottom: 15px;
}

/*post header*/
.entry-header .cats {
    text-align: center;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    line-height: 21px;
    margin-top: 33px;
    margin-bottom: 8px;
}

.entry-header .entry-title {
    color: #282828;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
    overflow-wrap: break-word;
    text-align: center;
}

.entry-header .entry-title a {
    color: inherit;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.entry-meta {
    text-align: center;
    font-size: 13px;
    line-height: 21px;
    color: #616161;
    font-family: 'Poppins', sans-serif;
    margin-top: 13px;
    margin-bottom: 35px;
    padding-bottom: 25px;
}

.entry-meta a:not(:hover) {
    color: inherit !important;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.entry-meta .posted-on,
.entry-meta .byline,
.entry-meta .edit-link {
    margin-left: 10px;
    margin-right: 10px;
}

/*post content*/
.tags__share {
    padding: 28px 0;
    position: relative;
}

.entry-footer .tags-links a {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    color: #9b9b9b;
    font-size: 12px;
    text-transform: capitalize;
    margin: 6px;
    padding: 5px 12px;
    border: 1px solid #eaeaea;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.entry-footer .tags-links a:first-of-type {
    margin-left: 0;
}

.single-blog .entry-footer {
    margin-top: 20px;
}

.written-by {
    background: #f4f4f4;
    position: relative;
    margin-top: 40px;
    padding: 40px 40px 32px;
    margin-bottom: 42px;
}

.author-box {
    position: relative;
}

.author-box .author-img {
    position: absolute;
    width: 70px;
    top: 0;
    left: 0;
    height: 100%;
}

.author-img img {
    margin-top: 2px;
}

.author-box .author-info {
    margin-left: 100px;
}

.author-box h3 {
    color: #222;
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 14px;
}

.author-box p {
    margin-bottom: 0;
}

div.share-post {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

div.share-post .shareText {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    margin-right: 12px;
}

ul.share-post {
    display: inline-block;
    margin: 0;
}

.share-post li {
    display: inline-block;
}

.share-post li a {
    color: #5d5d5d;
    font-size: 14px;
    margin: 0 10px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}

.share-post li:last-of-type a {
    margin-right: 0;
}

.post-nav {
    padding: 30px 0;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.post-nav .prev, .post-nav .next {
    position: relative;
    min-height: 70px;
}

.post-nav .prev {
    padding-left: 90px;
}

.post-nav .prev img,
.post-nav .next img {
    position: absolute;
    left: 0;
    top: 0;
}

.post-nav .prev p,
.post-nav .next p {
    color: #616161;
    font-size: 13px;
    margin-bottom: 5px;
}

.post-nav .prev h3,
.post-nav .next h3 {
    color: #282828;
    font-size: 17px;
    font-weight: 700;
    line-height: 24px;
    overflow-wrap: break-word;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.post-nav a h3:hover {
    color: inherit;
}

.post-nav .next {
    text-align: right;
    padding-right: 90px;
}

.post-nav .next img {
    left: auto;
    right: 0;
}

.post-nav:not(.thumb) .next,
.post-nav:not(.thumb) .prev {
    padding: 0;
}

.post-nav:not(.thumb) .next img,
.post-nav:not(.thumb) .prev img {
    display: none;
}

/*Comments*/
.comments-area li > ul, li > ol {
    list-style: none;
}

.comment-navigation .nav-links {
    border-top: 1px solid #eee;
}

#comments .comments-title,
#reply-title {
    color: #282828;
    font-size: 20px;
    font-weight: 600;
    margin-top: 44px;
    text-transform: capitalize;
}

#comments .comments-list {
    margin-top: 25px;
    margin-bottom: 20px;
}

.comments-list > li {
    border-bottom: 1px solid #eaeaea;
    padding-top: 30px;
}

.comments-list > li:first-of-type {
    padding-top: 0;
}

.comments-list > li:last-of-type {
    margin-bottom: 25px;
}

.comments-list li .children {
    width: 100%;
    padding-left: 100px;
}

.comments-list li .children > li {
    padding-top: 30px;
    border-top: 1px solid #eaeaea;
}

.comment-content p {
    margin-top: 10px;
}

#comments .comment-author-avatar {
    position: absolute;
    width: 70px;
}

#comments .comment-content h4 {
    color: #282828;
    text-transform: capitalize;
    font-size: 17px;
    font-weight: 700;
}

#comments .comment-content .comment-date {
    font-size: 13px;
    color: #616161;
    font-weight: 400;
}

#comments .comment-date:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 15px;
    background-color: rgba(0, 0, 0, 0.18);
    position: relative;
    top: 3px;
    margin-left: 7px;
    margin-right: 9px;
}

#comments .comment-content {
    padding-left: 100px;
    padding-bottom: 26px;
}

#comments .comment-reply span {
    padding-right: 9px;
    font-size: 13px;
}

#comments .comment-reply a {
    font-size: 14px;
}

#reply-title {
    margin-top: 25px;
    margin-bottom: 5px;
    padding-top: 20px;
}

.form-double .form-group {
    width: calc(50% - 7px);
    float: left;
}

.comment-form .form-double .email {
    margin-left: 14px;
}

.comment-form .form-double .form-control,
.comment-form textarea {
    margin-top: 15px;
    padding-left: 12px;
    border-radius: 0;
    padding-top: 18px;
    padding-bottom: 18px;
}

.comment-form textarea {
    border-radius: 0;
    height: 200px;
}




/*===============================================
            Medium screen & Large screen
===============================================*/

@media(min-width:992px)

{

    .home_type {
        display: block !important;
    }

    .home_type .side-left {
        position: fixed;
    }

    .side-left {
        padding: 0;
        margin: 0;
    }

    .side-right {
        height: 100% !important;
    }

    .skills .skill:last-of-type {
        padding-bottom: 0;
    }

}



/*===============================================
            Smart phone & Small screen
===============================================*/

@media(max-width:991px)

{

    .mobSmart-margin-top-40 {
        margin-top: 40px;
    }

    .side-right {
        background: repeat center/11px #fff;
    }

    .menu_list span:not(.home-item) {
        margin: 0.9% 0;
    }

    .menu_list a {
        font-size: 62px;
        transform: scale(0.65) !important;
    }

    .menu_list a[href="#home"].hide {
        display: inline-block !important;
    }

    .menu_list .home-item {
        display: none;
    }

    ul.menu_list {
        padding-bottom: 20px;
    }

    .page-right {
        margin-top: 62px;
    }

    .page-right-zero-height {
        height: 0 !important;
        margin: 0;
        padding: 0;
    }

    .page-right-normal-height,
    .pt-perspective.overFlowHidden {
        height: calc(100vh - 62px) !important;
    }

    .home_type {
        margin-top: 62px;
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100vh - 62px) !important;
        position: relative;
        z-index: 10;
    }

    .home_type .side {
        padding: 0;
        margin: 0;
        width: 100%;
        min-height: 600px;
        height: auto;
        text-align: center;
        color: #fff;
    }

    .home_type .side .overlayer,
    .home_type .side .display-table {
        height: 600px;
    }

    .side-right {
        overflow: auto;
        position: fixed;
        top: 62px;
        right: -320px;
        z-index: 55;
        text-align: center;
        padding-top: 50px;
        width: 315px;
        max-width: 100%;
        height: calc(100vh - 62px);
        transition: all ease-in-out 0.5s;
        -webkit-transition: all ease-in-out 0.5s;
    }

    .mob-menu-overlay {
        width: 100%;
    }

    .right-zero {
        right: 0;
    }

    .mob-menu .container {
        width: 100%;
    }

    .mob-menu .row {
        margin-left: 15px;
        margin-right: 15px;
    }

    .skills .item .skill:last-of-type {
        padding-bottom: 0;
    }

}



/*===============================================
            mobile screen
===============================================*/

@media(max-width:768px){

    #about .about__img {
        margin-bottom: 30px;
    }

    section .container {
        padding-left: 0;
        padding-right: 0;
    }

    .mob-margin-top-45 {
        margin-top: 45px;
    }

    .mob-margin-top-30 {
        margin-top: 30px;
    }

    .zoom-anim-dialog h3 {
        margin-top: 20px;
    }

    .mob-menu-content {
        max-width: 100%;
        margin: 0 30px;
    }

    .more-about-me {
        padding-bottom: 10px;
    }

    .skills .skill:last-of-type {
        padding-bottom: 0;
    }

    .fun-facts .item {
        margin-bottom: 25px;
        padding: 20px 0;
    }

    .fun-facts h5 {
        font-size: 15px;
    }

    .client {
        padding-bottom: 25px;
    }

    .client img {
        display: block;
        margin: auto;
    }

    .blog .margin-b-zero {
        margin-bottom: 50px;
    }

    .page-header .page-title {
        font-size: 30px;
        margin-bottom: 25px;
        margin-top: 35px;
    }

    .post-nav .next {
        text-align: left;
        padding-right: 0;
        padding-left: 90px;
        margin-top: 15px;
    }

    .post-nav .next img {
        right: auto;
        left: 0;
    }

    div.share-post {
        position: static;
        margin-top: 20px;
    }

}

@media(max-width:400px){

    .pt-page-current,
    .no-js .pt-page {
        padding: 10px;
    }

    .mob-menu-content {
        max-width: 100%;
        margin: 0 10px;
    }

}



/*===============================================
            Small screen
===============================================*/

@media(min-width:768px) and (max-width:991px)

{

    .mob-menu-content {
        max-width: 100%;
        margin: 0 30px;
    }

    .navbar-toggle {
        display: block;
    }

    .skills .skill:last-of-type {
        padding-bottom: 0;
    }

    .fun-facts .item {
        margin-bottom: 25px;
    }

}




/*===============================================
            Medium screen
===============================================*/
@media(min-width:1180px) and (max-width:1309px)

{
    .open-right .menu_list span:not(.home-item) {
        margin: 0.69% 0;
    }

    .open-right .menu_list span:not(.home-item) a {
        transform: scale(0.68);
        -webkit-text-stroke: 2px #111;
    }

    .menu_list .home-item {
        bottom: -15%;
    }

}

@media(min-width:992px) and (max-width:1179px)

{

    .home-lines .home-line {
        width: 30px;
        height: 30px;
    }

    .open-right .side-right > .home-lines .home-line {
        width: 25px;
        height: 25px;
    }

    .open-right .menu_list span:not(.home-item) {
        margin: 3% 0;
    }

    .open-right .menu_list span:not(.home-item) a {
        transform: scale(0.7);
        -webkit-text-stroke: 2px #111;
    }

    .menu_list .home-item {
        bottom: -14%;
    }
}

@media(min-width:992px) and (max-width:1199px)

{

    .mob-menu {
        display: none;
    }

    .home-lines {
        display: block;
    }

}



/*===============================================
            Large screen
===============================================*/

@media(min-width:1200px)

{

    .mob-menu {
        display: none;
    }

    .home-lines {
        display: block;
    }

}