/**
 * demo.css
 * https://coidea.website
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2018, COIDEA
 * https://coidea.website
 */

 @import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
 
 * {
   box-sizing: border-box;
 }
 
 html,
 body {
   font-family: "Open Sans Condensed", sans-serif;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
 }
 
 body {
   background: #FFFFFF;
 }
 
 span {
   display: block;
   background: #566973;
   border-radius: 2px;
 }
 
 header {
   position: absolute;
   display: block;
   width: 96%;
   width: 96vw;
   width: calc( 100vw - 64px );
   height: 96%;
   height: 96vh;
   height: calc( 100vh - 64px );
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   -webkit-background-size: cover !important;
   -moz-background-size: cover !important;
   -o-background-size: cover !important;
   background-size: cover !important;
 }
 header ul {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 header ul .header-transparent {
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: 0;
   padding: 0;
   z-index: 10;
   background-color: #222222;
   opacity: 0;
   visibility: hidden;
 }
 header ul #menu-trigger {
   width: 100px;
   height: 100px;
   top: -34px;
   left: 50%;
   margin-left: -50px;
   position: absolute;
   cursor: pointer;
   background: white;
   border-radius: 50%;
   z-index: 1000;
 }
 header ul #menu-trigger #hamburger {
   position: absolute;
   height: 100%;
   width: 100%;
 }
 header ul #menu-trigger #hamburger span {
   transition: 0.25s ease-in-out;
   width: 48px;
   height: 4px;
   position: relative;
   top: 24px;
   left: 26px;
   margin: 10px 0;
 }
 header ul #menu-trigger #hamburger span:nth-child(1) {
   transition-delay: 0.5s;
 }
 header ul #menu-trigger #hamburger span:nth-child(2) {
   transition-delay: 0.625s;
 }
 header ul #menu-trigger #hamburger span:nth-child(3) {
   transition-delay: 0.75s;
 }
 header ul #menu-trigger #close {
   position: absolute;
   height: 100%;
   width: 100%;
   transform: rotate(45deg);
 }
 header ul #menu-trigger #close span {
   transition: 0.25s ease-in-out;
 }
 header ul #menu-trigger #close span:nth-child(1) {
   height: 0%;
   width: 4px;
   position: absolute;
   top: 25%;
   left: 48px;
   transition-delay: 0s;
 }
 header ul #menu-trigger #close span:nth-child(2) {
   width: 0%;
   height: 4px;
   position: absolute;
   left: 25%;
   top: 48px;
   transition-delay: 0.25s;
 }
 header ul #menu-trigger.open {
   box-shadow: 0 15px 31px rgba(0, 0, 0, 0.08), 0 7px 15px rgba(0, 0, 0, 0.04);
 }
 header ul #menu-trigger.open #hamburger span {
   width: 0%;
 }
 header ul #menu-trigger.open #hamburger span:nth-child(1) {
   transition-delay: 0s;
 }
 header ul #menu-trigger.open #hamburger span:nth-child(2) {
   transition-delay: 0.125s;
 }
 header ul #menu-trigger.open #hamburger span:nth-child(3) {
   transition-delay: 0.25s;
 }
 header ul #menu-trigger.open #close span:nth-child(1) {
   height: 50%;
   transition-delay: 0.625s;
 }
 header ul #menu-trigger.open #close span:nth-child(2) {
   width: 50%;
   transition-delay: 0.375s;
 }
 header ul li {
   width: 100px;
   height: 100px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   position: absolute;
   cursor: pointer;
   border-radius: 50%;
   text-align: center;
   opacity: 0;
   visibility: hidden;
   z-index: 100;
   transition: box-shadow 0.35s ease-in-out, background-color 0.35s ease-in-out, color 0.35s ease-in-out;
 }
 header ul li a {
   color: #222222;
   text-decoration: none;
   text-transform: uppercase;
   line-height: 32px;
   margin-left: 48px;
   opacity: 0;
   visibility: hidden;
   font-weight: 700;
   transition: color 0.35s ease-in-out;
 }
 header ul li:nth-child(1) {
   background-color: rgba(255, 255, 255, 0.17);
 }
 header ul li:nth-child(2) {
   background-color: rgba(255, 255, 255, 0.34);
 }
 header ul li:nth-child(3) {
   background-color: rgba(255, 255, 255, 0.51);
 }
 header ul li:nth-child(4) {
   background-color: rgba(255, 255, 255, 0.68);
 }
 header ul li:nth-child(5) {
   background-color: rgba(255, 255, 255, 0.85);
 }
 header ul li:hover {
   box-shadow: 0 15px 31px rgba(0, 0, 0, 0.12), 0 7px 15px rgba(0, 0, 0, 0.06);
 }
 header ul li:hover:nth-child(1) {
   background-color: rgba(34, 34, 34, 0.17);
 }
 header ul li:hover:nth-child(2) {
   background-color: rgba(34, 34, 34, 0.34);
 }
 header ul li:hover:nth-child(3) {
   background-color: rgba(34, 34, 34, 0.51);
 }
 header ul li:hover:nth-child(4) {
   background-color: rgba(34, 34, 34, 0.68);
 }
 header ul li:hover:nth-child(5) {
   background-color: rgba(34, 34, 34, 0.85);
 }
 header ul li:hover a {
   color: #FFFFFF;
 }