html {
    box-sizing: border-box;
}
body{
    font-family: 'Roboto Condensed', sans-serif;

}
body {
    padding: 0;
    margin: 0;
    background-color: transparent !important;
/*    background-image: url(../img/bg/bg-02.jpg) !important;*/
    background-size: cover;
    background-position: center;
    height: 85vh;
}
.bg {
    animation:slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
}

.bg2 {
    animation-direction:alternate-reverse;
    animation-duration:4s;
}

.bg3 {
    animation-duration:5s;
}

.content {
    background-color:rgba(255,255,255,.8);
    border-radius:.25em;
    box-shadow:0 0 .25em rgba(0,0,0,.25);
    box-sizing:border-box;
    left:50%;
    padding:10vmin;
    position:fixed;
    text-align:center;
    top:50%;
    transform:translate(-50%, -50%);
}

h1 {
    font-family:monospace;
}

@keyframes slide {
    0% {
        transform:translateX(-25%);
    }
    100% {
        transform:translateX(25%);
    }
}

*,
*:before,
*:after {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}


/* _-_-_-_-__ morphing navigation styling __-_-_-_-_ */


.header {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    position: relative;
}

.navigation {
    width: 100px;
    height: 100%;
    display: block;
    padding-right: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    border-radius: 0% 50% 350% 0%;
    perspective: 800px;
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);

}

.foot {
    width: 100%;
    height: 100px;
    display: block;
    padding-right: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    border-radius: 0% 50% 350% 0%;
    perspective: 800px;
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);

}

.logo {
    width: 70px;
    height: 70px;
    display: block;
    position: absolute;
    top: 8%;
    left: 15%;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: rotateY(-360deg);
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation__icon {
    width: 55px;
    height: 44px;
    display: block;
    position: relative;
    top: 5%;
    left: 35%;
    background: hsla(312, 51%, 41%, 0.0);
    cursor: pointer;
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation__icon .topBar {
    width: 55px;
    height: 2px;
    display: block;
    background: #20a5ff;
    position: absolute;
    top: 10px;
    transform: rotate(0);
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation__icon .middleBar {
    width: 55px;
    height: 2px;
    display: block;
    background: #20a5ff;
    position: absolute;
    top: 20px;
    transform: rotate(0);
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation__icon .bottomBar {
    width: 35px;
    height: 2px;
    display: block;
    background: #20a5ff;
    position: absolute;
    top: 30px;
    transform: rotate(0);
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation .navigation__ul {
    float: right;
    margin-top: 100px;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(-90deg) translateX(-300px);
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation .navigation__ul li {
    list-style: none;
    text-align: right;
}

.navigation .navigation__ul a {
    display: block;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    margin-bottom: 7px;
}

.navigation .navigation__ul a:hover {
    color: hsl(185, 96%, 33%);
}

.navigation .navigation__social {
    width: 100%;
    height: 30px;
    padding-right: 45px;
    position: absolute;
    bottom: 18%;
}

.navigation .navigation__social-ul {
    float: right;
    list-style: none;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(-90deg) translateX(-300px);
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation .navigation__social-ul li {
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(35px);
    transition: all 800ms cubic-bezier(.9, 0, .33, 1);
}

.navigation .social-icon {
    width: 30px;
    height: 30px;
    display: block;
    margin-left: 15px;
}


.navigation-open {
    width: 350px;
    height: 100%;
    display: block;
    background: #FFF;
    position: absolute;
    left: 0;
    border-radius: 0% 1% 1% 0%;
    z-index: 1;
}

.navigation-open .logo {
    left: 68%;
    transform: rotateY(0);
}

.navigation-open .navigation__icon {
    left: 80%;
}

.navigation-open .navigation__ul {
    opacity: 1;
    visibility: visible;
}

.navigation-open .navigation__social-ul {
    opacity: 1;
    visibility: visible;
}

.navigation-open .topBar {
    top: 21px;
    transform: rotate(45deg);
}

.navigation-open .middleBar {
    width: 0;
    top: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
}

.navigation-open .bottomBar {
    width: 55px;
    top: 21px;
    transform: rotate(-45deg);
}

.navigation-open .navigation__ul {
    transform: rotateY(0) translateX(0);
}

.navigation-open .navigation__social-ul {
    transform: rotateY(0) translateX(0);
}

.navigation-open .navigation__social-ul li {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.navigation-open .navigation__social-ul li:nth-child(1) {
    transition-delay: .5s;
}

.navigation-open .navigation__social-ul li:nth-child(2) {
    transition-delay: .46s;
}

.navigation-open .navigation__social-ul li:nth-child(3) {
    transition-delay: .43s;
}

.navigation-open .navigation__social-ul li:nth-child(4) {
    transition-delay: .4s;
}
/*

input {
    background: rgba(255,255,255,0.4);
    border: none;
    position: relative;
    display: block;
    outline: none;
    width: 400px;
    height: 30px;
    top: 250px;
    margin: 0 auto;
    padding: 10px;
    color: #333;
    -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,0.5);
    box-shadow: 0 2px 10px 1px rgba(0,0,0,0.5);
}
::-webkit-input-placeholder { color: #666;}
:-moz-placeholder { color: #666; }
::-moz-placeholder { color: #666; }
:-ms-input-placeholder { color: #666; }
*/

.tengah {
    background-color: transparent;
    padding-left: 15%;
    padding-right: 10%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin: 0 auto;
}