/*------------------------------------------------------------------
[Master Stylesheet]

Project           : Flamecore Organization
Name Project      : Navbar Fixed Responsive Animation Skew
Version           : 1.0
Last change       : 20/08/2017 [Create Project]
Framework css	   : Core Framework http://getcore.github.io
Framework Version : 3.0 Pop Green
Author            : Andika Chamberlin
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Navbar Fixed Responsive Animation Skew
   container            / .fmc-nav-container
   main                 / .fmc-nav
   nav logo             / .fmc-logo
   nav link container   / .fmc-nav-link
   nav link             / .fmc-nav-link-items
   toggle               / .fmc-toggle
   animation box left   / .fmc-box
   animation box bottom / .fmc-box-bottom
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Color codes]

Background nav	      : rgba(0,0,0,0.9)
Background animation : crimson, opacity 0.5
color link           : #fff
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Typography]

Body : 16px Segoe UI, sans-serif by Core Framework
-------------------------------------------------------------------*/

.fmc-nav-container{
   display: block;
   width: 100%;
   height: 50px;
   background-color: rgba(0,0,0,0.9);
   position: fixed;
   overflow: hidden;
   z-index: 10;
}

.fmc-nav{
   margin: auto;
   max-width: 1200px;
   display: block;
}

.fmc-nav:after{
   display: table;
   content: "";
   clear: both;
}

.fmc-nav-logo{
   float: left;
   margin-left: 16px;
   position: relative;
}

.fmc-nav-logo img{
   display: block;
   margin: 0;
   width: 50px;
   padding: 5px;
   opacity: 0.7;
}

.fmc-nav-link{
   float: right;
   position: relative;
}

.fmc-nav-link-items{
   margin: 0;
   padding: 0;
   list-style-type: none;
}

.fmc-nav-link-items li{
   float: left;
   line-height: 50px;
   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: center;
}

.fmc-nav-link-items li:hover{
   background-color: crimson;
   opacity: 0.8;
}

.fmc-nav-link-items li a{
   display: block;
   text-decoration: none;
   color: #eee;
   padding: 0 16px;
}

.fmc-nav-link-items li a:hover{
   color: #fff;
}

.fmc-toggle{
   float: right;
   line-height: 50px;
   width: 60px;
   text-align: center;
   color: #fff;
   position: relative;
   cursor: pointer;
}

.fmc-toggle-active{
   background-color: crimson;
   opacity: 0.8;
}

@media (max-width: 600px){
   .fmc-nav-link{
      display: none;
      position: fixed;
      top: 50px;
      width: 100%;
      background-color: rgba(0,0,0,0.9);
      overflow: hidden;
   }
   .fmc-nav-link-items li{
      width: 100%;
      display: block;
      text-align: right;
   }
   .fmc-nav-link-items li:hover{
      background-color: transparent;
   }
   .fmc-nav-link-items li a{
      color: #fff;
      opacity: 0.6;
   }
   .fmc-nav-link-items li a:hover{
      opacity: 1;
   }
}

@media (min-width: 601px){
   .fmc-toggle{
      display: none;
   }
   .fmc-nav-link{
      display: block!important;
   }
}

.fmc-toggle:hover{
   background-color: crimson;
   opacity: 0.8;
}

.fmc-box:nth-child(1){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 20.5s infinite linear;
   -o-animation: animationleft 20.5s infinite linear;
   animation: animationleft 20.5s infinite linear;
}

.fmc-box:nth-child(2){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 21s infinite linear;
   -o-animation: animationleft 21s infinite linear;
   animation: animationleft 21s infinite linear;
}

.fmc-box:nth-child(3){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 21.5s infinite linear;
   -o-animation: animationleft 21.5s infinite linear;
   animation: animationleft 21.5s infinite linear;
}

.fmc-box:nth-child(4){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 22s infinite linear;
   -o-animation: animationleft 22s infinite linear;
   animation: animationleft 22s infinite linear;
}

.fmc-box:nth-child(5){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 22.5s infinite linear;
   -o-animation: animationleft 22.5s infinite linear;
   animation: animationleft 22.5s infinite linear;
}

.fmc-box:nth-child(6){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 23s infinite linear;
   -o-animation: animationleft 23s infinite linear;
   animation: animationleft 23s infinite linear;
}

.fmc-box:nth-child(7){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 23.5s infinite linear;
   -o-animation: animationleft 23.5s infinite linear;
   animation: animationleft 23.5s infinite linear;
}

.fmc-box:nth-child(8){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 24s infinite linear;
   -o-animation: animationleft 24s infinite linear;
   animation: animationleft 24s infinite linear;
}

.fmc-box:nth-child(9){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 24.5s infinite linear;
   -o-animation: animationleft 24.5s infinite linear;
   animation: animationleft 24.5s infinite linear;
}

.fmc-box:nth-child(10){
   width: 40px;
   height: 40px;
   opacity: 0.5;
   background-color: crimson;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 25s infinite linear;
   -o-animation: animationleft 25s infinite linear;
   animation: animationleft 25s infinite linear;
}

@keyframes animationleft{
   from{
      left:-200px;
   } to{
      left:101%;
      -webkit-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -ms-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -o-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
       transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
   }
}

@-webkit-keyframes animationleft{
   from{
      left:-200px;
   } to{
      left:101%;
      -webkit-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -ms-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -o-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
       transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
   }
}

@-o-keyframes animationleft{
   from{
      left:-200px;
   } to{
      left:101%;
      -webkit-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -ms-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -o-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
       transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
   }
}

@media (max-width: 600px){
   .fmc-box-bottom:nth-child(1){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 10%;
      -webkit-animation: animationBb 20.5s infinite linear;
      -o-animation: animationBb 20.5s infinite linear;
      animation: animationBb 20.5s infinite linear;
   }

   .fmc-box-bottom:nth-child(2){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 20%;
      -webkit-animation: animationBb 21s infinite linear;
      -o-animation: animationBb 21s infinite linear;
      animation: animationBb 21s infinite linear;
   }

   .fmc-box-bottom:nth-child(3){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 30%;
      -webkit-animation: animationBb 21.5s infinite linear;
      -o-animation: animationBb 21.5s infinite linear;
      animation: animationBb 21.5s infinite linear;
   }

   .fmc-box-bottom:nth-child(4){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 40%;
      -webkit-animation: animationBb 22s infinite linear;
      -o-animation: animationBb 22s infinite linear;
      animation: animationBb 22s infinite linear;
   }

   .fmc-box-bottom:nth-child(5){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 50%;
      -webkit-animation: animationBb 22.5s infinite linear;
      -o-animation: animationBb 22.5s infinite linear;
      animation: animationBb 22.5s infinite linear;
   }

   .fmc-box-bottom:nth-child(6){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 60%;
      -webkit-animation: animationBb 23s infinite linear;
      -o-animation: animationBb 23s infinite linear;
      animation: animationBb 23s infinite linear;
   }

   .fmc-box-bottom:nth-child(7){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 70%;
      -webkit-animation: animationBb 23.5s infinite linear;
      -o-animation: animationBb 23.5s infinite linear;
      animation: animationBb 23.5s infinite linear;
   }

   .fmc-box-bottom:nth-child(8){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 80%;
      -webkit-animation: animationBb 24s infinite linear;
      -o-animation: animationBb 24s infinite linear;
      animation: animationBb 24s infinite linear;
   }

   .fmc-box-bottom:nth-child(9){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 90%;
      -webkit-animation: animationBb 24.5s infinite linear;
      -o-animation: animationBb 24.5s infinite linear;
      animation: animationBb 24.5s infinite linear;
   }

   .fmc-box-bottom:nth-child(10){
      width: 40px;
      height: 40px;
      opacity: 0.5;
      background-color: crimson;
      position: absolute;
      left: 100%;
      -webkit-animation: animationBb 25s infinite linear;
      -o-animation: animationBb 25s infinite linear;
      animation: animationBb 25s infinite linear;
   }
}

@keyframes animationBb {
   from{
      bottom:-40px;
   } to{
      bottom:100%;
      -webkit-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -ms-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -o-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
       transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
   }
}

@-o-keyframes animationBb {
   from{
      bottom:-40px;
   } to{
      bottom:100%;
      -webkit-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -ms-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -o-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
       transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
   }
}

@-webkit-keyframes animationBb {
   from{
      bottom:-40px;
   } to{
      bottom:100%;
      -webkit-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -ms-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
      -o-transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
       transform: rotateY(1000deg) rotateX(1000deg) skew(360deg);
   }
}