.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */
    position: absolute;
}

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

/* All transitions */
.side,
.page {
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 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;
    transition: transform 0.6s, top 0.6s;
}
 
.intro-content h1,
.back {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
 
/* Open and close */
 
.reset-layout .page,
.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%);
}
 
.close-right .side-right {
    z-index: 200;
}
 
.open-right .side-right .intro-content {
    -webkit-transform: translateY(-50%) translateX(0%) scale(0.7);
    transform: translateY(-50%) translateX(0%) scale(0.7);
}
 
.open-right .page-right {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

.page {
    position: relative;
    top: 0;
    overflow: auto;
    min-height: 100%;
    width: 75%;
    height: auto;
    -webkit-backface-visibility: hidden;
}
 
/* 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.7);
    transform: translateY(-50%) translateX(-100%) scale(0.7);
}
 
.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%);
}
 
/* Media Queries */
@media screen and (max-width: 83em) {
    .intro-content { font-size: 60%; }
}
 
@media screen and (max-width: 58em) {
    body { font-size: 90%; }
}
 
@media screen and (max-width: 49.4375em) {
    .open-right .side-right {
        -webkit-transform: translateX(-175%);
        transform: translateX(-175%);
    }
 
    .open-right .side-left {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
 
    .open-left .side-right {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
 
    .open-left .side-left {
        -webkit-transform: translateX(175%);
        transform: translateX(175%);
    }
 
    .page {
        width: 100%;
    }

 
    .intro-content {
        width: 100%;
    }
 
    .open-right .side-right .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);
        transform: translateY(-150px) translateX(-12.5%) scale(0.5);
    }
 
    .open-left .side-left .intro-content {
        top: 100%;
        -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);
        transform: translateY(-150px) translateX(-87.5%) scale(0.5);
    }
 
    .open-right .intro-content h1,
    .open-left .intro-content h1 {
        opacity: 0;
    }
 
    .back-left {
        left: 6.25%;
    }
 
    .back-right {
        right: 6.25%;
    }
}
 
@media screen and (max-width: 42.5em) {
    body { font-size: 80%; }
    .intro-content { font-size: 50%; }
}
 
@media screen and (max-height: 41.125em) {
    .intro-content {
        -webkit-transform: translateY(-25%) translateX(-50%);
        transform: translateY(-25%) translateX(-50%);
    }
}
 
@media screen and (max-width: 39.375em) {
    .intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); }
}
 
@media screen and (max-width: 320px) {
    body { font-size: 70%; }
}