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

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

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

1. Navbar Fixed Responsive Animation Icon
   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
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[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;
      position: relative;
      z-index: 10;
   }
   .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;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 10s infinite linear;
   -o-animation: animationleft 10s infinite linear;
   animation: animationleft 10s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(2){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 8s infinite linear;
   -o-animation: animationleft 8s infinite linear;
   animation: animationleft 8s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(3){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 9s infinite linear;
   -o-animation: animationleft 9s infinite linear;
   animation: animationleft 9s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(4){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 9.5s infinite linear;
   -o-animation: animationleft 9.5s infinite linear;
   animation: animationleft 9.5s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(5){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 11s infinite linear;
   -o-animation: animationleft 11s infinite linear;
   animation: animationleft 11s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(6){
   width: 40px;
   height: 40px;
   position: absolute;
   top: 5px;
   -webkit-animation: animationleft 14s infinite linear;
   -o-animation: animationleft 14s infinite linear;
   animation: animationleft 14s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(7){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 12s infinite linear;
   -o-animation: animationleft 12s infinite linear;
   animation: animationleft 12s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(8){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 13s infinite linear;
   -o-animation: animationleft 13s infinite linear;
   animation: animationleft 13s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(9){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 15s infinite linear;
   -o-animation: animationleft 15s infinite linear;
   animation: animationleft 15s infinite linear;
   font-size: 40px;
}

.fmc-box:nth-child(10){
   width: 40px;
   height: 40px;
   top: 5px;
   position: absolute;
   -webkit-animation: animationleft 20s infinite linear;
   -o-animation: animationleft 20s infinite linear;
   animation: animationleft 20s infinite linear;
   font-size: 40px;
}

@keyframes animationleft{
   from{
      left:-200px;
   } to{
      left:100%;
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@-webkit-keyframes animationleft{
   from{
      left:-200px;
   } to{
      left:100%;
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@-o-keyframes animationleft{
   from{
      left:-200px;
   } to{
      left:100%;
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}