/* ==========================================================================
   GLOBAL styles
   ========================================================================== */

body { background: #EEE; }
a    { text-decoration: none; }


/* ==========================================================================
   PUERTO DARK NAVIGATION BAR
   ========================================================================== */


.puerto-dark-bar {

}
ul.puerto-dark-bar {
	list-style: none;
	margin: 20px;
	padding: 0;
}
ul.puerto-dark-bar li {
	position: relative;
	width: 48px;
}
ul.puerto-dark-bar li a {
	display: block;
	width: 48px;
	height: 46px;
	background-color: #000;
	color: #777;
	text-align: center;
	border-bottom: 1px solid #333;
	line-height: 3;
	position: relative;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
ul.puerto-dark-bar li a i {
	font-size: 20px;
}
ul.puerto-dark-bar li a small {
	font-size: 10px;
	/*background-color: #e74c3c; */
	color: #FFF;
	min-width: 20px;
	height:20px;
	position: absolute;
	top: 5px;
	right: 5px;
	line-height: 2;
	
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
ul.puerto-dark-bar li a strong {
	display:block;
	position: absolute;
	z-index: 100;
	left: 65px;
	top: 4px;
	color: #FFF;
	font-weight: normal;
	font-size: 14px;
	height: 40px;
	line-height: 2.8;
	min-width: 100px;
	/*background-color: #e74c3c; */
	
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	
	visibility: hidden;
	opacity: 0;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
ul.puerto-dark-bar li a strong:before {
	content: "";
	position: absolute;
	left: -5px;
	top: 14px;
	border-right: 5px solid #e74c3c; /**/
	border-top: 5px solid transparent !important;
	border-bottom: 5px solid transparent !important;
}

ul.puerto-dark-bar li a:hover {
	color: #FFF;
}
ul.puerto-dark-bar li a:hover i {
	-webkit-animation: move_from_top 300ms ease-in-out;
	-moz-animation: move_from_top 300ms ease-in-out;
	-ms-animation: move_from_top 300ms ease-in-out;
	-o-animation: move_from_top 300ms ease-in-out;
	animation: move_from_top 300ms ease-in-out;
}
ul.puerto-dark-bar li.active a {
	/*background-color: #e74c3c; */
	color: #FFF;
}
ul.puerto-dark-bar li.active a small {
	background-color: #FFF !important;
	color: #e74c3c; /**/
}
ul.puerto-dark-bar li a:hover > strong {
	left: 55px;
	visibility: visible;
	opacity: 1;
}



/*
 * Drop Menu
*/

ul.puerto-dark-bar li.drop-menu a strong {
	left: 0px;
	top: 25px;
	font-size: 12px;
	height: 20px;
	line-height: 1.8;
	min-width: 48px;
	
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
}
ul.puerto-dark-bar li.drop-menu a strong:before {
	content: "";
	left: 0;
	top: 0;
	border: 0;
}
ul.puerto-dark-bar li.drop-menu a:hover > strong {
	visibility: visible;
	opacity: 1;
}

ul.puerto-dark-bar li.drop-menu ul {
	position: absolute;
	left: 65px;
	top: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 3px solid #e74c3c; /**/
	z-index: 10;
	
	visibility: hidden;
	opacity: 0;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
ul.puerto-dark-bar li.drop-menu:hover ul {
	visibility: visible;
	opacity: 1;
	left: 48px;
}
ul.puerto-dark-bar li.drop-menu ul:before {
	content: "";
	position: absolute;
	left: -8px;
	top: 10px;
	border-right: 5px solid #e74c3c; /**/
	border-top: 5px solid transparent !important;
	border-bottom: 5px solid transparent !important;
}
ul.puerto-dark-bar li.drop-menu ul a {
	width: 200px;
	height: 40px;
	font-size: 14px;
	text-align: left;
}
ul.puerto-dark-bar li.drop-menu ul a i {
	font-size: 14px;
	margin: 0 10px 0 20px;
}



/* ==========================================================================
   PUERTO DARK NAVIGATION MENU
   ========================================================================== */


.puerto-dark-menu {
	
}
 ul.puerto-dark-menu {
	margin: 20px auto;
	padding: 0;
	list-style: none;
	display: table;
}
 ul.puerto-dark-menu li {
	float: left;
	position: relative;
}
 ul.puerto-dark-menu li.active a {
	/*background-color: #1ABC9C;  */
	color: #FFF;
}
 ul.puerto-dark-menu li.active a i {
	color: #FFF !important;
}
 ul.puerto-dark-menu li a {
	display: block;
	background: #000;
	padding:15px;
	color: #777;
	font-size: 14px;
	border-left: 1px solid #333;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
 ul.puerto-dark-menu li a:hover {
	color: #FFF;
}
 ul.puerto-dark-menu li a i {
	font-size: 16px;
	margin-right: 10px;
	color: #1ABC9C;
}
 ul.puerto-dark-menu li a:hover i {
	-webkit-animation: move_from_top 300ms ease-in-out;
	-moz-animation: move_from_top 300ms ease-in-out;
	-ms-animation: move_from_top 300ms ease-in-out;
	-o-animation: move_from_top 300ms ease-in-out;
	animation: move_from_top 300ms ease-in-out;
}
 ul.puerto-dark-menu li a small {
	font-size: 10px;
	/*background-color: #1ABC9C; */
	color: #FFF;
	min-width: 20px;
	height:20px;
	position: absolute;
	top: 5px;
	right: 5px;
	line-height: 2;
	text-align: center;
	
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
 ul.puerto-dark-menu li.active a small {
	background-color: #FFF !important;
	color: #e74c3c; /**/
}


/* 
 * Drop Menu
*/

 ul.puerto-dark-menu li.drop-menu ul {
	position: absolute;
	top: 60px;
	min-width: 200px;
	border-top: 3px solid #1ABC9C; /**/
	z-index: 100;
	margin: 0;
	padding: 0;
	list-style: none;
	
	visibility: hidden;
	opacity: 0;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
 ul.puerto-dark-menu li.drop-menu ul:before {
	content: "";
	position: absolute;
	top: -8px;
	left: 20%;
	border-bottom: 5px solid #1ABC9C; /**/
	border-left: 5px solid transparent !important;
	border-right: 5px solid transparent !important;
}
 ul.puerto-dark-menu li.drop-menu:hover ul {
	top: 49px;
	
	visibility: visible;
	opacity: 1;
}
 ul.puerto-dark-menu li.drop-menu ul li {
	float: none;
}
 ul.puerto-dark-menu li.drop-menu ul li a {
	float: none;
	border-bottom: 1px solid #333;
	padding: 10px;
}


/* ==========================================================================
   COLORS styles
   ========================================================================== */
   

ul.puerto-dark-bar.color-1 li a small,
ul.puerto-dark-bar.color-1 li a strong,
ul.puerto-dark-bar.color-1 li.active a,
ul.puerto-dark-menu.color-1 li.active a,
ul.puerto-dark-menu.color-1 li a small   { background-color: #1ABC9C; }

ul.puerto-dark-bar.color-2 li a small,
ul.puerto-dark-bar.color-2 li a strong,
ul.puerto-dark-bar.color-2 li.active a,
ul.puerto-dark-menu.color-2 li.active a,
ul.puerto-dark-menu.color-2 li a small     { background-color: #2ecc71; }

ul.puerto-dark-bar.color-3 li a small,
ul.puerto-dark-bar.color-3 li a strong,
ul.puerto-dark-bar.color-3 li.active a,
ul.puerto-dark-menu.color-3 li.active a,
ul.puerto-dark-menu.color-3 li a small     { background-color: #3498db; }

ul.puerto-dark-bar.color-4 li a small,
ul.puerto-dark-bar.color-4 li a strong,
ul.puerto-dark-bar.color-4 li.active a,
ul.puerto-dark-menu.color-4 li.active a,
ul.puerto-dark-menu.color-4 li a small     { background-color: #9b59b6; }

ul.puerto-dark-bar.color-5 li a small,
ul.puerto-dark-bar.color-5 li a strong,
ul.puerto-dark-bar.color-5 li.active a,
ul.puerto-dark-menu.color-5 li.active a,
ul.puerto-dark-menu.color-5 li a small     { background-color: #34495e; }

ul.puerto-dark-bar.color-6 li a small,
ul.puerto-dark-bar.color-6 li a strong,
ul.puerto-dark-bar.color-6 li.active a,
ul.puerto-dark-menu.color-6 li.active a,
ul.puerto-dark-menu.color-6 li a small     { background-color: #f1c40f; }

ul.puerto-dark-bar.color-7 li a small,
ul.puerto-dark-bar.color-7 li a strong,
ul.puerto-dark-bar.color-7 li.active a,
ul.puerto-dark-menu.color-7 li.active a,
ul.puerto-dark-menu.color-7 li a small     { background-color: #e67e22; }

ul.puerto-dark-bar.color-8 li a small,
ul.puerto-dark-bar.color-8 li a strong,
ul.puerto-dark-bar.color-8 li.active a,
ul.puerto-dark-menu.color-8 li.active a,
ul.puerto-dark-menu.color-8 li a small     { background-color: #e74c3c; }

ul.puerto-dark-bar.color-9 li a small,
ul.puerto-dark-bar.color-9 li a strong,
ul.puerto-dark-bar.color-9 li.active a,
ul.puerto-dark-menu.color-9 li.active a,
ul.puerto-dark-menu.color-9 li a small     { background-color: #999999; }

ul.puerto-dark-bar.color-10 li a small,
ul.puerto-dark-bar.color-10 li a strong,
ul.puerto-dark-bar.color-10 li.active a,
ul.puerto-dark-menu.color-10 li.active a,
ul.puerto-dark-menu.color-10 li a small   { background-color: #333333; }

ul.puerto-dark-bar.color-11 li a small,
ul.puerto-dark-bar.color-11 li a strong,
ul.puerto-dark-bar.color-11 li.active a,
ul.puerto-dark-menu.color-11 li.active a,
ul.puerto-dark-menu.color-11 li a small   { background-color: #1FA6D5; }

ul.puerto-dark-bar.color-12 li a small,
ul.puerto-dark-bar.color-12 li a strong,
ul.puerto-dark-bar.color-12 li.active a,
ul.puerto-dark-menu.color-12 li.active a,
ul.puerto-dark-menu.color-12 li a small   { background-color: #FCC44C; }

ul.puerto-dark-bar.color-13 li a small,
ul.puerto-dark-bar.color-13 li a strong,
ul.puerto-dark-bar.color-13 li.active a,
ul.puerto-dark-menu.color-13 li.active a,
ul.puerto-dark-menu.color-13 li a small   { background-color: #FC4C7D; }

ul.puerto-dark-bar.color-14 li a small,
ul.puerto-dark-bar.color-14 li a strong,
ul.puerto-dark-bar.color-14 li.active a,
ul.puerto-dark-menu.color-14 li.active a,
ul.puerto-dark-menu.color-14 li a small   { background-color: #E04CFC; }

ul.puerto-dark-bar.color-15 li a small,
ul.puerto-dark-bar.color-15 li a strong,
ul.puerto-dark-bar.color-15 li.active a,
ul.puerto-dark-menu.color-15 li.active a,
ul.puerto-dark-menu.color-15 li a small   { background-color: #F86227; }

ul.puerto-dark-bar.color-16 li a small,
ul.puerto-dark-bar.color-16 li a strong,
ul.puerto-dark-bar.color-16 li.active a,
ul.puerto-dark-menu.color-16 li.active a,
ul.puerto-dark-menu.color-16 li a small   { background-color: #75AD16; }

/*
 * BORDER COLOR
*/

ul.puerto-dark-bar.color-1 li a strong:before,
ul.puerto-dark-bar.color-1 li.drop-menu ul,
ul.puerto-dark-bar.color-1 li.drop-menu ul:before,
ul.puerto-dark-menu.color-1 li.drop-menu ul,
ul.puerto-dark-menu.color-1 li.drop-menu ul:before  { border-color: #1ABC9C; }

ul.puerto-dark-bar.color-2 li a strong:before,
ul.puerto-dark-bar.color-2 li.drop-menu ul,
ul.puerto-dark-bar.color-2 li.drop-menu ul:before,
ul.puerto-dark-menu.color-2 li.drop-menu ul,
ul.puerto-dark-menu.color-2 li.drop-menu ul:before  { border-color: #2ecc71; }

ul.puerto-dark-bar.color-3 li a strong:before,
ul.puerto-dark-bar.color-3 li.drop-menu ul,
ul.puerto-dark-bar.color-3 li.drop-menu ul:before,
ul.puerto-dark-menu.color-3 li.drop-menu ul,
ul.puerto-dark-menu.color-3 li.drop-menu ul:before  { border-color: #3498db; }

ul.puerto-dark-bar.color-4 li a strong:before,
ul.puerto-dark-bar.color-4 li.drop-menu ul,
ul.puerto-dark-bar.color-4 li.drop-menu ul:before,
ul.puerto-dark-menu.color-4 li.drop-menu ul,
ul.puerto-dark-menu.color-4 li.drop-menu ul:before  { border-color: #9b59b6; }

ul.puerto-dark-bar.color-5 li a strong:before,
ul.puerto-dark-bar.color-5 li.drop-menu ul,
ul.puerto-dark-bar.color-5 li.drop-menu ul:before,
ul.puerto-dark-menu.color-5 li.drop-menu ul,
ul.puerto-dark-menu.color-5 li.drop-menu ul:before  { border-color: #34495e; }

ul.puerto-dark-bar.color-6 li a strong:before,
ul.puerto-dark-bar.color-6 li.drop-menu ul,
ul.puerto-dark-bar.color-6 li.drop-menu ul:before,
ul.puerto-dark-menu.color-6 li.drop-menu ul,
ul.puerto-dark-menu.color-6 li.drop-menu ul:before  { border-color: #f1c40f; }

ul.puerto-dark-bar.color-7 li a strong:before,
ul.puerto-dark-bar.color-7 li.drop-menu ul,
ul.puerto-dark-bar.color-7 li.drop-menu ul:before,
ul.puerto-dark-menu.color-7 li.drop-menu ul,
ul.puerto-dark-menu.color-7 li.drop-menu ul:before  { border-color: #e67e22; }

ul.puerto-dark-bar.color-8 li a strong:before,
ul.puerto-dark-bar.color-8 li.drop-menu ul,
ul.puerto-dark-bar.color-8 li.drop-menu ul:before,
ul.puerto-dark-menu.color-8 li.drop-menu ul,
ul.puerto-dark-menu.color-8 li.drop-menu ul:before  { border-color: #e74c3c; }

ul.puerto-dark-bar.color-9 li a strong:before,
ul.puerto-dark-bar.color-9 li.drop-menu ul,
ul.puerto-dark-bar.color-9 li.drop-menu ul:before,
ul.puerto-dark-menu.color-9 li.drop-menu ul,
ul.puerto-dark-menu.color-9 li.drop-menu ul:before  { border-color: #999999; }

ul.puerto-dark-bar.color-10 li a strong:before,
ul.puerto-dark-bar.color-10 li.drop-menu ul,
ul.puerto-dark-bar.color-10 li.drop-menu ul:before,
ul.puerto-dark-menu.color-10 li.drop-menu ul,
ul.puerto-dark-menu.color-10 li.drop-menu ul:before  { border-color: #333333; }

ul.puerto-dark-bar.color-11 li a strong:before,
ul.puerto-dark-bar.color-11 li.drop-menu ul,
ul.puerto-dark-bar.color-11 li.drop-menu ul:before,
ul.puerto-dark-menu.color-11 li.drop-menu ul,
ul.puerto-dark-menu.color-11 li.drop-menu ul:before  { border-color: #1FA6D5; }

ul.puerto-dark-bar.color-12 li a strong:before,
ul.puerto-dark-bar.color-12 li.drop-menu ul,
ul.puerto-dark-bar.color-12 li.drop-menu ul:before,
ul.puerto-dark-menu.color-12 li.drop-menu ul,
ul.puerto-dark-menu.color-12 li.drop-menu ul:before  { border-color: #FCC44C; }

ul.puerto-dark-bar.color-13 li a strong:before,
ul.puerto-dark-bar.color-13 li.drop-menu ul,
ul.puerto-dark-bar.color-13 li.drop-menu ul:before,
ul.puerto-dark-menu.color-13 li.drop-menu ul,
ul.puerto-dark-menu.color-13 li.drop-menu ul:before  { border-color: #FC4C7D; }

ul.puerto-dark-bar.color-14 li a strong:before,
ul.puerto-dark-bar.color-14 li.drop-menu ul,
ul.puerto-dark-bar.color-14 li.drop-menu ul:before,
ul.puerto-dark-menu.color-14 li.drop-menu ul,
ul.puerto-dark-menu.color-14 li.drop-menu ul:before  { border-color: #E04CFC; }

ul.puerto-dark-bar.color-15 li a strong:before,
ul.puerto-dark-bar.color-15 li.drop-menu ul,
ul.puerto-dark-bar.color-15 li.drop-menu ul:before,
ul.puerto-dark-menu.color-15 li.drop-menu ul,
ul.puerto-dark-menu.color-15 li.drop-menu ul:before  { border-color: #F86227; }

ul.puerto-dark-bar.color-16 li a strong:before,
ul.puerto-dark-bar.color-16 li.drop-menu ul,
ul.puerto-dark-bar.color-16 li.drop-menu ul:before,
ul.puerto-dark-menu.color-16 li.drop-menu ul,
ul.puerto-dark-menu.color-16 li.drop-menu ul:before  { border-color: #75AD16; }

/*
 * FONT COLOR
*/

ul.puerto-dark-bar.color-1 li.active a small,
ul.puerto-dark-menu.color-1 li.active a small,
ul.puerto-dark-menu.color-1 li a i { color: #1ABC9C; }

ul.puerto-dark-bar.color-2 li.active a small,
ul.puerto-dark-menu.color-2 li.active a small,
ul.puerto-dark-menu.color-2 li a i { color: #2ecc71; }

ul.puerto-dark-bar.color-3 li.active a small,
ul.puerto-dark-menu.color-3 li.active a small,
ul.puerto-dark-menu.color-3 li a i { color: #3498db; }

ul.puerto-dark-bar.color-4 li.active a small,
ul.puerto-dark-menu.color-4 li.active a small,
ul.puerto-dark-menu.color-4 li a i { color: #9b59b6; }

ul.puerto-dark-bar.color-5 li.active a small,
ul.puerto-dark-menu.color-5 li.active a small,
ul.puerto-dark-menu.color-5 li a i { color: #34495e; }

ul.puerto-dark-bar.color-6 li.active a small,
ul.puerto-dark-menu.color-6 li.active a small,
ul.puerto-dark-menu.color-6 li a i { color: #f1c40f; }

ul.puerto-dark-bar.color-7 li.active a small,
ul.puerto-dark-menu.color-7 li.active a small,
ul.puerto-dark-menu.color-7 li a i { color: #e67e22; }

ul.puerto-dark-bar.color-8 li.active a small,
ul.puerto-dark-menu.color-8 li.active a small,
ul.puerto-dark-menu.color-8 li a i { color: #e74c3c; }

ul.puerto-dark-bar.color-9 li.active a small,
ul.puerto-dark-menu.color-9 li.active a small,
ul.puerto-dark-menu.color-9 li a i { color: #999999; }

ul.puerto-dark-bar.color-10 li.active a small,
ul.puerto-dark-menu.color-10 li.active a small,
ul.puerto-dark-menu.color-10 li a i { color: #333333; }

ul.puerto-dark-bar.color-11 li.active a small,
ul.puerto-dark-menu.color-11 li.active a small,
ul.puerto-dark-menu.color-11 li a i { color: #1FA6D5; }

ul.puerto-dark-bar.color-12 li.active a small,
ul.puerto-dark-menu.color-12 li.active a small,
ul.puerto-dark-menu.color-12 li a i { color: #FCC44C; }

ul.puerto-dark-bar.color-13 li.active a small,
ul.puerto-dark-menu.color-13 li.active a small,
ul.puerto-dark-menu.color-13 li a i { color: #FC4C7D; }

ul.puerto-dark-bar.color-14 li.active a small,
ul.puerto-dark-menu.color-14 li.active a small,
ul.puerto-dark-menu.color-14 li a i { color: #E04CFC; }

ul.puerto-dark-bar.color-15 li.active a small,
ul.puerto-dark-menu.color-15 li.active a small,
ul.puerto-dark-menu.color-15 li a i { color: #F86227; }

ul.puerto-dark-bar.color-16 li.active a small,
ul.puerto-dark-menu.color-16 li.active a small,
ul.puerto-dark-menu.color-16 li a i { color: #75AD16; }


/* ==========================================================================
   KEYFRAMES & MEDIA QUERIES
   ========================================================================== */


@-webkit-keyframes move_from_top {
    from {
        opacity: 0;
        -webkit-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes move_from_top {
    from {
        opacity: 0;
        -moz-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes move_from_top {
    from {
        opacity: 0;
        -ms-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
@-o-keyframes move_from_top {
    from {
        opacity: 0;
        -o-transform: translateY(60%);
    }
    to {
        opacity: 1;
        -o-transform: translateY(0%);
    }
}

@media only screen and (max-width: 799px){
     ul.puerto-dark-menu li a strong {
		display: none;
	}
	 ul.puerto-dark-menu li a i {
		margin: 0;
	}
	 ul.puerto-dark-menu li.drop-menu ul a i {
		margin-right: 10px;
	}
}