/*NAVIGATION STYLES
*/

/* LOGO HEAD */


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */			
		#featured{ 
			margin-left: 15px;			
			margin-top: 12px;
			top: 0;
			float: left; 
			text-align: left; 
			overflow: stack; 		
			position: fixed;
			z-index:9000;
			}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */			
		#featured img { 
				height: 25px;
				width: auto;
			}
}


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */			
		#featured{ 	
			margin-left: 60px; 
			margin-top: 30px;	
			float: left; 
			text-align: left; 
			overflow: stack; 		
			position: fixed;
			z-index:9000;
			}
}


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */

		#featured{ 	
			margin-left: 60px; 
			margin-top: 30px;			
			z-index:9000;
			list-style:none; float: left; text-align: left; overflow: stack; 		
			position: fixed;
			}				
}


/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
		#featured{ 	
			margin-left: 90px; 
			margin-top: 30px;			
			z-index:9000;
			list-style:none; float: left; text-align: left; overflow: stack; 		
			position: fixed;
			}		
}


/* ------ GENERAL STYLE ----- */


			#featured a {	
			}			
			
			#featured a:link {
			}	
			
			#featured a:hover{
			opacity: .6;
			-moz-opacity: .6;
    		}
 
			#featured > li a:hover {
			opacity: .6;
			-moz-opacity: .6;
			}

	




/* ********FADE ANIMATION ********* */



@keyframes reset {
0% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}
 
@keyframes fade-in {
0% {
    opacity: 0;
}
60% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}


/**** OBJECT FADE IN ON PAGE LOAD ****/

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 

.fade-in.one {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
 
.fade-in.two {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay:  0.5s;
}
 
.fade-in.three {
-webkit-animation-delay:  0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.four {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}

.fade-in.five {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
animation-delay: 1.3s;
}

.fade-in.six {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.fade-in.seven {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
animation-delay: 1.8s;
}


/**** THUMBNAILS ANIMATE UP ON PAGE LOAD ****/

@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}