@charset "utf-8";
html, body,
.container {
position: relative;
height: 100%;
}
body {
overflow-y: scroll;
background: #333;
}
.splitlayout {
position: relative;
overflow-x: hidden;
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: #47a3da;
color: #fff;
}
.side-right {
right: 0;
background: #fff;
color: #47a3da;
}
/* Intro content, profile image and name, back button
.main {
position: absolute;
top: 50%;
left: 50%;
opacity:1;
visibility:visible;
padding: 0 1em;
width: 100%;
cursor: pointer;
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}*/
.profile {
margin: 0 auto;
width: 140px;
height: 140px;
border-radius: 50%;
background: #47a3da;
}
.profile img {
max-width: 100%;
border-radius: 50%;
opacity: 0.6;
}
.back {
position: fixed;
top: 50%;
z-index: 500;
display: block;
visibility: hidden;
text-align: center;
opacity: 0;
pointer-events: none;
-webbkit-transform:translate(0, -50%);
transform:translate(0, -50%);
}
.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;
}
.back:hover {
color: #ddd;
}
/* Pages */
.page {
position: relative;
top: 0;
overflow: auto;
min-height: 100%;
width: 93%;
height: auto;
font-size: 1.4em;
-webkit-backface-visibility: hidden;
}
.page-right {
left: 7%;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.page-left {
left: 0;
color: #fff;
text-align: right;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
/* All transitions */
.side,
.page {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
.overlay {
-webkit-transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out;
}
.main {
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.main h1,
.back {
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
/* Open and close */
/* We need to set the position and overflow for the respective page scroll */
.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.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
/* Right side open */
.open-right .side-left {
-webkit-transform: translateX(-61%) scale(.5);
-ms-transform: translateX(-61%) scale(.5);
transform: translateX(-61%) scale(.5);
}
.open-right .side-right {
z-index: 200;
-webkit-transform: translateX(-186%);
-ms-transform: translateX(-186%);
transform: translateX(-186%);
}
.close-right .side-right {
z-index: 200;
}
.open-right .side-right .main {
-webkit-transform: translateY(-50%) translateX(-80%) scale(0.6);
-ms-transform: translateY(-50%) translateX(-80%) scale(0.6);
transform: translateY(-50%) translateX(-80%) scale(0.6);
opacity: 0;
visibility: hidden;
}
.open-right .page-right {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
/* Left side open */
.open-left .side-right {
-webkit-transform: translateX(61%) scale(.5);
-ms-transform: translateX(61%) scale(.5);
transform: translateX(61%) scale(.5);
}
.open-left .side-left {
z-index: 200;
-webkit-transform: translateX(186%);
-ms-transform: translateX(186%);
transform: translateX(186%);
}
.close-left .side-left {
z-index: 200;
}
.open-left .side-left .main {
-webkit-transform: translateY(-50%) translateX(80%) scale(0.6);
-ms-transform: translateY(-50%) translateX(80%) scale(0.6);
transform: translateY(-50%) translateX(80%) scale(0.6);
opacity: 0;
visibility: hidden;
}
.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%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
.preloader {
background: #fff none repeat scroll 0 0;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.preloader span {
height: 60px;
left: 50%;
margin: -30px 0 0 -30px;
position: absolute;
top: 50%;
width: 60px
}
.preloader span:before,
.preloader span:after {
-webkit-animation: expand 3s;
animation: expand 3s;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
border: solid 3px #000;
border-radius: 50%;
content: " ";
height: 2px;
left: 24px;
opacity: 0;
position: absolute;
top: 24px;
width: 2px;
}
.preloader span:after {
-webkit-animation-delay: 1.5s
}
.main .section {
height: 0;
visibility: hidden;
width: 100%;
position:relative;
}
.main .section.active {
height: 100%;
visibility: visible
}
.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}