/*default font style*/
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url("../fonts/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff") format('woff');
}
@font-face {
    font-family:'custom';
    src: url('../fonts/custom.eot');
    src: url('../fonts/custom.ttf') format('truetype'), url('http://www.markmurray.co/codepen/fonts/custom.svg?v89ydr#custom') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family:'custom';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-heart:before {
    content:"\e600";
}
.icon-cloud:before {
    content:"\e601";
}
.icon-star:before {
    content:"\e602";
}
.icon-tv:before {
    content:"\e603";
}
.icon-sound:before {
    content:"\e604";
}
.icon-video:before {
    content:"\e605";
}
.icon-trash:before {
    content:"\e606";
}
.icon-user:before {
    content:"\e607";
}
.icon-key:before {
    content:"\e608";
}
.icon-search:before {
    content:"\e609";
}
.icon-settings:before {
    content:"\e60a";
}
.icon-camera:before {
    content:"\e60b";
}
.icon-tag:before {
    content:"\e60c";
}
.icon-lock:before {
    content:"\e60d";
}
.icon-bulb:before {
    content:"\e60e";
}
.icon-pen:before {
    content:"\e60f";
}
.icon-diamond:before {
    content:"\e610";
}
.icon-display:before {
    content:"\e611";
}
.icon-location:before {
    content:"\e612";
}
.icon-eye:before {
    content:"\e613";
}
.icon-bubble:before {
    content:"\e614";
}
.icon-stack:before {
    content:"\e615";
}
.icon-cup:before {
    content:"\e616";
}
.icon-phone:before {
    content:"\e617";
}
.icon-news:before {
    content:"\e618";
}
.icon-mail:before {
    content:"\e619";
}
.icon-like:before {
    content:"\e61a";
}
.icon-photo:before {
    content:"\e61b";
}
.icon-note:before {
    content:"\e61c";
}
.icon-clock:before {
    content:"\e61d";
}
.icon-paperplane:before {
    content:"\e61e";
}
.icon-params:before {
    content:"\e61f";
}
.icon-banknote:before {
    content:"\e620";
}
.icon-data:before {
    content:"\e621";
}
.icon-music:before {
    content:"\e622";
}
.icon-megaphone:before {
    content:"\e623";
}
.icon-study:before {
    content:"\e624";
}
.icon-lab:before {
    content:"\e625";
}
.icon-food:before {
    content:"\e626";
}
.icon-t-shirt:before {
    content:"\e627";
}
.icon-fire:before {
    content:"\e628";
}
.icon-clip:before {
    content:"\e629";
}
.icon-shop:before {
    content:"\e62a";
}
.icon-calendar:before {
    content:"\e62b";
}
.icon-wallet:before {
    content:"\e62c";
}
.icon-vynil:before {
    content:"\e62d";
}
.icon-truck:before {
    content:"\e62e";
}
.icon-world:before {
    content:"\e62f";
}
.icon-phone2:before {
    content:"\e630";
}
.icon-mobile:before {
    content:"\e631";
}
.icon-mouse:before {
    content:"\e632";
}
.icon-directions:before {
    content:"\e633";
}
.icon-mail2:before {
    content:"\e634";
}
.icon-paperplane2:before {
    content:"\e635";
}
.icon-pencil:before {
    content:"\e636";
}
.icon-feather:before {
    content:"\e637";
}
.icon-paperclip:before {
    content:"\e638";
}
.icon-drawer:before {
    content:"\e639";
}
.icon-reply:before {
    content:"\e63a";
}
.icon-reply-all:before {
    content:"\e63b";
}
.icon-forward:before {
    content:"\e63c";
}
.icon-user2:before {
    content:"\e63d";
}
.icon-users:before {
    content:"\e63e";
}
.icon-user-add:before {
    content:"\e63f";
}
.icon-vcard:before {
    content:"\e640";
}
.icon-export:before {
    content:"\e641";
}
.icon-location2:before {
    content:"\e642";
}
.icon-map:before {
    content:"\e643";
}
.icon-compass:before {
    content:"\e644";
}
.icon-location3:before {
    content:"\e645";
}
.icon-target:before {
    content:"\e646";
}
.icon-share:before {
    content:"\e647";
}
.icon-sharable:before {
    content:"\e648";
}
.icon-heart2:before {
    content:"\e649";
}
.icon-heart3:before {
    content:"\e64a";
}
.icon-star2:before {
    content:"\e64b";
}
.icon-star3:before {
    content:"\e64c";
}
.icon-thumbsup:before {
    content:"\e64d";
}
.icon-thumbsdown:before {
    content:"\e64e";
}
.icon-chat:before {
    content:"\e64f";
}
.icon-comment:before {
    content:"\e650";
}
.icon-quote:before {
    content:"\e651";
}
.icon-house:before {
    content:"\e652";
}
.icon-popup:before {
    content:"\e653";
}
.icon-search2:before {
    content:"\e654";
}
.icon-flashlight:before {
    content:"\e655";
}
.icon-printer:before {
    content:"\e656";
}
.icon-bell:before {
    content:"\e657";
}
.icon-link:before {
    content:"\e658";
}
.icon-flag:before {
    content:"\e659";
}
.icon-cog:before {
    content:"\e65a";
}
.icon-tools:before {
    content:"\e65b";
}
.icon-trophy:before {
    content:"\e65c";
}
.icon-tag2:before {
    content:"\e65d";
}
.icon-camera2:before {
    content:"\e65e";
}
.icon-megaphone2:before {
    content:"\e65f";
}
.icon-moon:before {
    content:"\e660";
}
.icon-palette:before {
    content:"\e661";
}
.icon-leaf:before {
    content:"\e662";
}
.icon-music2:before {
    content:"\e663";
}
.icon-music3:before {
    content:"\e664";
}
.icon-new:before {
    content:"\e665";
}
.icon-graduation:before {
    content:"\e666";
}
.icon-book:before {
    content:"\e667";
}
.icon-newspaper:before {
    content:"\e668";
}
.icon-bag:before {
    content:"\e669";
}
.icon-airplane:before {
    content:"\e66a";
}
.icon-lifebuoy:before {
    content:"\e66b";
}
.icon-eye2:before {
    content:"\e66c";
}
.icon-clock2:before {
    content:"\e66d";
}
.icon-microphone:before {
    content:"\e66e";
}
.icon-calendar2:before {
    content:"\e66f";
}
.icon-bolt:before {
    content:"\e670";
}
.icon-thunder:before {
    content:"\e671";
}
.icon-droplet:before {
    content:"\e672";
}
.icon-cd:before {
    content:"\e673";
}
.icon-briefcase:before {
    content:"\e674";
}
.icon-air:before {
    content:"\e675";
}
.icon-hourglass:before {
    content:"\e676";
}
.icon-gauge:before {
    content:"\e677";
}
.icon-language:before {
    content:"\e678";
}
.icon-network:before {
    content:"\e679";
}
.icon-key2:before {
    content:"\e67a";
}
.icon-battery:before {
    content:"\e67b";
}
.icon-bucket:before {
    content:"\e67c";
}
.icon-magnet:before {
    content:"\e67d";
}
.icon-drive:before {
    content:"\e67e";
}
.icon-cup2:before {
    content:"\e67f";
}
.icon-rocket:before {
    content:"\e680";
}
.icon-brush:before {
    content:"\e681";
}
.icon-suitcase:before {
    content:"\e682";
}
.icon-cone:before {
    content:"\e683";
}
.icon-earth:before {
    content:"\e684";
}
.icon-keyboard:before {
    content:"\e685";
}
.icon-browser:before {
    content:"\e686";
}
.icon-publish:before {
    content:"\e687";
}
.icon-progress-3:before {
    content:"\e688";
}
.icon-progress-2:before {
    content:"\e689";
}
.icon-brogress-1:before {
    content:"\e68a";
}
.icon-progress-0:before {
    content:"\e68b";
}
.icon-sun:before {
    content:"\e68c";
}
.icon-sun2:before {
    content:"\e68d";
}
.icon-adjust:before {
    content:"\e68e";
}
.icon-code:before {
    content:"\e68f";
}
.icon-screen:before {
    content:"\e690";
}
.icon-infinity:before {
    content:"\e691";
}
.icon-light-bulb:before {
    content:"\e692";
}
.icon-creditcard:before {
    content:"\e693";
}
.icon-database:before {
    content:"\e694";
}
.icon-voicemail:before {
    content:"\e695";
}
.icon-clipboard:before {
    content:"\e696";
}
.icon-cart:before {
    content:"\e697";
}
.icon-box:before {
    content:"\e698";
}
.icon-ticket:before {
    content:"\e699";
}
.icon-rss:before {
    content:"\e69a";
}
.icon-signal:before {
    content:"\e69b";
}
.icon-thermometer:before {
    content:"\e69c";
}
.icon-droplets:before {
    content:"\e69d";
}
.icon-uniE69E:before {
    content:"\e69e";
}
.icon-statistics:before {
    content:"\e69f";
}
.icon-pie:before {
    content:"\e6a0";
}
.icon-bars:before {
    content:"\e6a1";
}
.icon-graph:before {
    content:"\e6a2";
}
.icon-lock2:before {
    content:"\e6a3";
}
.icon-lock-open:before {
    content:"\e6a4";
}
.icon-logout:before {
    content:"\e6a5";
}
.icon-login:before {
    content:"\e6a6";
}
.icon-checkmark:before {
    content:"\e6a7";
}
.icon-cross:before {
    content:"\e6a8";
}
.icon-minus:before {
    content:"\e6a9";
}
.icon-plus:before {
    content:"\e6aa";
}
.icon-cross2:before {
    content:"\e6ab";
}
.icon-minus2:before {
    content:"\e6ac";
}
.icon-plus2:before {
    content:"\e6ad";
}
.icon-cross3:before {
    content:"\e6ae";
}
.icon-minus3:before {
    content:"\e6af";
}
.icon-plus3:before {
    content:"\e6b0";
}
.icon-erase:before {
    content:"\e6b1";
}
.icon-blocked:before {
    content:"\e6b2";
}
.icon-info:before {
    content:"\e6b3";
}
.icon-info2:before {
    content:"\e6b4";
}
.icon-question:before {
    content:"\e6b5";
}
.icon-help:before {
    content:"\e6b6";
}
.icon-warning:before {
    content:"\e6b7";
}
.icon-cycle:before {
    content:"\e6b8";
}
.icon-cw:before {
    content:"\e6b9";
}
.icon-ccw:before {
    content:"\e6ba";
}
.icon-shuffle:before {
    content:"\e6bb";
}
.icon-arrow:before {
    content:"\e6bc";
}
.icon-arrow2:before {
    content:"\e6bd";
}
.icon-retweet:before {
    content:"\e6be";
}
.icon-loop:before {
    content:"\e6bf";
}
.icon-history:before {
    content:"\e6c0";
}
.icon-back:before {
    content:"\e6c1";
}
.icon-switch:before {
    content:"\e6c2";
}
.icon-list:before {
    content:"\e6c3";
}
.icon-add-to-list:before {
    content:"\e6c4";
}
.icon-layout:before {
    content:"\e6c5";
}
.icon-list2:before {
    content:"\e6c6";
}
.icon-text:before {
    content:"\e6c7";
}
.icon-text2:before {
    content:"\e6c8";
}
.icon-document:before {
    content:"\e6c9";
}
.icon-docs:before {
    content:"\e6ca";
}
.icon-landscape:before {
    content:"\e6cb";
}
.icon-pictures:before {
    content:"\e6cc";
}
.icon-video2:before {
    content:"\e6cd";
}
.icon-music4:before {
    content:"\e6ce";
}
.icon-folder:before {
    content:"\e6cf";
}
.icon-archive:before {
    content:"\e6d0";
}
.icon-trash2:before {
    content:"\e6d1";
}
.icon-upload:before {
    content:"\e6d2";
}
.icon-download:before {
    content:"\e6d3";
}
.icon-disk:before {
    content:"\e6d4";
}
.icon-install:before {
    content:"\e6d5";
}
.icon-cloud2:before {
    content:"\e6d6";
}
.icon-upload2:before {
    content:"\e6d7";
}
.icon-bookmark:before {
    content:"\e6d8";
}
.icon-bookmarks:before {
    content:"\e6d9";
}
.icon-book2:before {
    content:"\e6da";
}
.icon-play:before {
    content:"\e6db";
}
.icon-pause:before {
    content:"\e6dc";
}
.icon-record:before {
    content:"\e6dd";
}
.icon-stop:before {
    content:"\e6de";
}
.icon-next:before {
    content:"\e6df";
}
.icon-previous:before {
    content:"\e6e0";
}
.icon-first:before {
    content:"\e6e1";
}
.icon-last:before {
    content:"\e6e2";
}
.icon-resize-enlarge:before {
    content:"\e6e3";
}
.icon-resize-shrink:before {
    content:"\e6e4";
}
.icon-volume:before {
    content:"\e6e5";
}
.icon-sound2:before {
    content:"\e6e6";
}
.icon-mute:before {
    content:"\e6e7";
}
.icon-flow-cascade:before {
    content:"\e6e8";
}
.icon-flow-branch:before {
    content:"\e6e9";
}
.icon-flow-tree:before {
    content:"\e6ea";
}
.icon-flow-line:before {
    content:"\e6eb";
}
.icon-flow-parallel:before {
    content:"\e6ec";
}
.icon-arrow-left:before {
    content:"\e6ed";
}
.icon-arrow-down:before {
    content:"\e6ee";
}
.icon-arrow-up-upload:before {
    content:"\e6ef";
}
.icon-arrow-right:before {
    content:"\e6f0";
}
.icon-arrow-left2:before {
    content:"\e6f1";
}
.icon-arrow-down2:before {
    content:"\e6f2";
}
.icon-arrow-up:before {
    content:"\e6f3";
}
.icon-arrow-right2:before {
    content:"\e6f4";
}
.icon-arrow-left3:before {
    content:"\e6f5";
}
.icon-arrow-down3:before {
    content:"\e6f6";
}
.icon-arrow-up2:before {
    content:"\e6f7";
}
.icon-arrow-right3:before {
    content:"\e6f8";
}
.icon-arrow-left4:before {
    content:"\e6f9";
}
.icon-arrow-down4:before {
    content:"\e6fa";
}
.icon-arrow-up3:before {
    content:"\e6fb";
}
.icon-arrow-right4:before {
    content:"\e6fc";
}
.icon-arrow-left5:before {
    content:"\e6fd";
}
.icon-arrow-down5:before {
    content:"\e6fe";
}
.icon-arrow-up4:before {
    content:"\e6ff";
}
.icon-arrow-right5:before {
    content:"\e700";
}
.icon-arrow-left6:before {
    content:"\e701";
}
.icon-arrow-down6:before {
    content:"\e702";
}
.icon-arrow-up5:before {
    content:"\e703";
}
.icon-arrow-right6:before {
    content:"\e704";
}
.icon-arrow-left7:before {
    content:"\e705";
}
.icon-arrow-down7:before {
    content:"\e706";
}
.icon-arrow-up6:before {
    content:"\e707";
}
.icon-uniE708:before {
    content:"\e708";
}
.icon-arrow-left8:before {
    content:"\e709";
}
.icon-arrow-down8:before {
    content:"\e70a";
}
.icon-arrow-up7:before {
    content:"\e70b";
}
.icon-arrow-right7:before {
    content:"\e70c";
}
.icon-menu:before {
    content:"\e70d";
}
.icon-ellipsis:before {
    content:"\e70e";
}
.icon-dots:before {
    content:"\e70f";
}
.icon-dot:before {
    content:"\e710";
}
.icon-cc:before {
    content:"\e711";
}
.icon-cc-by:before {
    content:"\e712";
}
.icon-cc-nc:before {
    content:"\e713";
}
.icon-cc-nc-eu:before {
    content:"\e714";
}
.icon-cc-nc-jp:before {
    content:"\e715";
}
.icon-cc-sa:before {
    content:"\e716";
}
.icon-cc-nd:before {
    content:"\e717";
}
.icon-cc-pd:before {
    content:"\e718";
}
.icon-cc-zero:before {
    content:"\e719";
}
.icon-cc-share:before {
    content:"\e71a";
}
.icon-cc-share2:before {
    content:"\e71b";
}
.icon-github:before {
    content:"\e71e";
}
.icon-github2:before {
    content:"\e71f";
}
.icon-flickr:before {
    content:"\e720";
}
.icon-flickr2:before {
    content:"\e721";
}
.icon-vimeo:before {
    content:"\e722";
}
.icon-vimeo2:before {
    content:"\e723";
}
.icon-twitter:before {
    content:"\e724";
}
.icon-twitter2:before {
    content:"\e725";
}
.icon-facebook:before {
    content:"\e726";
}
.icon-facebook2:before {
    content:"\e727";
}
.icon-facebook3:before {
    content:"\e728";
}
.icon-googleplus:before {
    content:"\e729";
}
.icon-googleplus2:before {
    content:"\e72a";
}
.icon-pinterest:before {
    content:"\e72b";
}
.icon-pinterest2:before {
    content:"\e72c";
}
.icon-tumblr:before {
    content:"\e72d";
}
.icon-tumblr2:before {
    content:"\e72e";
}
.icon-linkedin:before {
    content:"\e72f";
}
.icon-linkedin2:before {
    content:"\e730";
}
.icon-dribbble:before {
    content:"\e731";
}
.icon-dribbble2:before {
    content:"\e732";
}
.icon-stumbleupon:before {
    content:"\e733";
}
.icon-stumbleupon2:before {
    content:"\e734";
}
.icon-lastfm:before {
    content:"\e735";
}
.icon-lastfm2:before {
    content:"\e736";
}
.icon-spotify:before {
    content:"\e739";
}
.icon-spotify2:before {
    content:"\e73a";
}
.icon-instagram:before {
    content:"\e73c";
}
.icon-dropbox:before {
    content:"\e73d";
}
.icon-evernote:before {
    content:"\e73e";
}
.icon-skype:before {
    content:"\e740";
}
.icon-skype2:before {
    content:"\e741";
}
.icon-paypal:before {
    content:"\e744";
}
.icon-picasa:before {
    content:"\e745";
}
.icon-soundcloud:before {
    content:"\e746";
}
.icon-behance:before {
    content:"\e748";
}
.icon-circles:before {
    content:"\e749";
}

/* flip letter animation and style*/
@font-face {
    font-family:'Lato';
    font-style: normal;
    font-weight: 900;
    src: local('Lato Black'), local('Lato-Black'), url(../fonts/BVtM30trf7q_jfqYeHfjtA.woff) format('woff');
}
*, *:before, *:after {
    box-sizing:border-box;
}
div.foo {
    font-family:'Lato';
    margin-top: -30px;
    margin-right: 10px;
    float: right;
    opacity: 0.7
}
.letter {
    display: inline-block;
    font-weight: 900;
    font-size: 7em;
    position: relative;
    color: #00B4F1;
    transform-style: preserve-3d;
    perspective: 400;
    z-index: 1;
}
.letter:before, .letter:after {
    position:absolute;
    content: attr(data-letter);
    transform-origin: top left;
    top:0;
    left:0;
}
.letter, .letter:before, .letter:after {
    transition: all 0.3s ease-in-out;
}
.letter:before {
    color: #00B4F1;
    text-shadow: -1px 0px 1px rgba(255, 255, 255, .8), 1px 0px 1px rgba(0, 0, 0, .8);
    z-index: 3;
    transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);
}
.letter:after {
    color: rgba(0, 0, 0, .11);
    z-index:2;
    transform: scale(1.08, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 1deg);
}
.letter:hover:before {
    color: #fafafa;
    transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);
}
.letter:hover:after {
    transform: scale(1.08, 1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg, 22deg);
}

/*normal style*/
html, body, ul, header, span {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
}
header {
    height: 100px;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    /*z-index: 1;*/
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
header span {
    float: left;
}
header span.logo {
    background: #00B4F1;
}
header [class^="icon-list"] {
    font-size: 2em;
    padding: 1.1em;
    color: white;
    background: black;
    cursor: pointer;
}
header [class^="icon-list"]:hover {
    opacity: 0.8;
}
header [class^="icon-search"] {
    font-size: 1em;
    padding: 2.6em 2em;
    padding-right: 1em;
}
header input {
    outline: none;
    border: none;
    font-family:'Open Sans', sans-serif;
    font-size: 1em;
    padding: 2.4em 1em;
    margin: 0;
    height: 100px;
    width: 300px;
    background: transparent;
}
header ::-webkit-input-placeholder {
    opacity: 0.6;
}
nav {
    width: 100px;
    background: black;
    height: 100%;
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 2;
    -webkit-box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.1);
}
nav ul li.current {
    opacity: 1;
    background: white;
}
nav ul li.current h1, nav ul li.current span {
    color: black;
}
nav ul li {
    padding: 1.5em 0;
    height: 100px;
    text-align: center;
    color: white;
    opacity: 0.5;
    cursor: pointer;
}
nav ul li h1 {
    font-size: 0.7em;
}
nav ul li:hover {
    opacity: 1;
}
nav ul li span {
    display: block;
    font-size: 1.5em !important;
    margin-bottom: 0.5em;
}
nav ul li, .icon-list2 {
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}
nav ul li a:link {
    color: white;
    text-decoration: none;
}
nav ul li a:visited {
    color: white;
    text-decoration: none;
}
nav ul li a:hover {
    color: white;
    text-decoration: none;
}
li a:active {
    color: white;
    text-decoration: none;
}
.push {
    margin-left: 100px;
}
.content-area {
    margin-top: 100px;
    position: relative;
    padding: 2em;
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease;
}
@media (max-width: 860px) {
    nav {
        visibility: hidden;
    }
}