* {
    -webkit-font-smoothing: antialiased !important;
}

/* Image Defaults */

.portfolio-single-image,
.entry-content iframe,
.entry-content object,
.entry-content embed,
.video-container iframe,
.video-container object,
.video-container embed,
.entry-wrapper iframe,
.entry-wrapper  object,
.entry-wrapper  embed,
.entry-wrapper  iframe,
.entry-wrapper  object,
.entry-wrapper  embed,
.entry-wrapper img  {
    max-width:100%;
}

/* Background Pattern */

.background-fill {
    position:fixed;
    z-index:-9999;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
    background: none;
    opacity: 0.15;
}

/* Main Container */

.main-container {
    position: fixed;
    top: 105px;
    bottom: 61px;
    left: 0;
    right: 0;
    overflow: hidden;
}

.main-container.portfolio {
    top: 98px;
    bottom: 43px;
    left: 5px;
    right: 5px;
}

.page-main-container {
    position: absolute;
    top: 113px;
    bottom: 58px;
    /* left: 0px; */
    overflow: hidden;
    width: 47%;
    max-width: 725px;

    /* Page container animation */

    left: -100%;
    -webkit-animation: slideLeft 0.5s forwards;
    -webkit-animation-delay: 0.5s;
    animation: slideLeft 0.5s forwards;
    animation-delay: 0.5s;
}

@-webkit-keyframes slideLeft {
    100% { left: 0px; }
}

@keyframes slideLeft {
    100% { left: 0px; }
}


/* Page content */

.page-contents-wrap {
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

.page-contents-wrap{
    padding: 20px;
}

.entry-content {
    height: 100%;
    overflow: hidden;
    position: relative;
}


/* Scrollbar functions */

.scrollable-container {
    position: absolute;
    top: 51px;
    bottom: 0;
    left: 0;
    right: 0;
}

.scroll-content {
    height: 100%;
}

.with-send-button .scrollable-container,
.with-button-link .scrollable-container {
    bottom: 60px;
}

.with-diagram .scrollable-container {
    bottom: 250px;
}


/* To fix */

.scroll-content .entry-content {
    padding-right: 10px;
}


@media only screen and (max-width: 768px),
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)  {

    body {
    }
    
    .main-container {
    }
    
    .page-main-container {
        position: absolute;
        top: 70px;
        bottom: 0px;
        overflow: auto;
        width: 100%;
        background-color: rgba(0,0,0,0.6);
    }

    .main-container.portfolio {
        bottom: 47px;

        top: 70px;
    }

    .page-contents-wrap {
        height: 100%;
        background-color: transparent;
    }

    .entry-content {
        height: auto;
        overflow: visible;
        position: relative;
    }

    .scrollable-container {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
    }

    .scroll-content {
        height: auto;
        overflow: visible;
    }
    
    .with-send-button .scrollable-container,
    .with-button-link .scrollable-container {
        bottom: auto;
    }

    .with-diagram .scrollable-container {
        bottom: auto;
    }
    
}

@media only screen and (min-width: 769px) and (max-width: 870px),
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)  {

    .page-main-container {
        position: absolute;
        top: 70px;
        bottom: 38px;
        overflow: hidden;
        width: 70%;
        max-width: 725px;
    }
    
    .main-container.portfolio {
        top: 70px;
        bottom: 90px;
    }

}