/**
 * Name: booNavigation.css
 * Date:Sun 16 Feb 2014
 * Author: Noemi Losada Estrella <info@noemilosada.com>
 * Creative Commons License <http://creativecommons.org/licenses/by-sa/3.0/>
 */

/** General
================================================== */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Maven Pro', sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    color: #333;
}

.wrapper {
    margin: 50px auto;
    width: 960px;
}

ul li {
    list-style-type: none;
}

a {
    color: #333;
    text-decoration: none;
}

/** Navigation theme
================================================== */
.booNavigation {
    position: relative;
    float: right;
}

.booNavigation li {
    background-color: transparent;
   /*  border-bottom: 5px solid #9900CC; */
    padding: 28px 15px 28px;
    /* margin-top: 20px; */
    float: left;
    text-decoration: none;
    transition: all .3s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
}
.booNavigation .navContent > li a{
    display: inline-block!important;
    float: left;
     width: 130px!important;
}
.booNavigation li ul li a{
    padding: 10px 10px;
    display: inline-block;
    float: left!important;
    /* width: 150px; */
}
.booNavigation li:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8B0000+0,e54b37+51,e83015+100 */
background: #8B0000; /* Old browsers */
background: -moz-linear-gradient(top, #8B0000 0%, #e54b37 51%, #8B0000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #8B0000 0%,#e54b37 51%,#8B0000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #8B0000 0%,#e54b37 51%,#8B0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8B0000', endColorstr='#8B0000',GradientType=0 ); /* IE6-9 */
    border-color: #000;
    cursor: pointer;
}
.booNavigation ul.navContent li:hover{
    background: transparent!important;
}

.booNavigation li > a {
    color: #fff;
    font-size: 16px;
}
/* .booNavigation li.navItem > a:after{
    content: "";
    width: 1px;
    height: 20px;
    right: -90px;
    top: -20px;
    position: relative;
    transform: rotate(20deg);
    display: block;
    background-color: #fff;
} */
.booNavigation li > a:hover{
    text-decoration: none;
}
.booNavigation li .navContent {
    background-color:rgba(0,0,0,0.8);
    left: 5px;
    position: absolute;
    top: 79px;
    width:100%;
    z-index: 999;
}

.booNavigation .navContent > li {
    color: #3f3f3f;
    float: left;
    padding: 10px;
    width: 130px;
}
.booNavigation .navContent > li a:hover{
    color: #fff;
    background-color: rgba(139, 0, 0,0.8);
}
.booNavigation .navContent > li a:hover:before{
    color: #fff;
}
.booNavigation .navContent ul li a {
    color: #fff;
    display: inline-block;
    float: left;
    width: 100px;
    padding: 10px 5px;
    font-size: 14px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.booNavigation ul.navContent li a:before{
    content: "\f054";
   font-family: "FontAwesome";
   margin-right: 5px;
   color: #8B0000;

}
.booNavigation .navContent ul li a:hover:before{
    content: "\f054";
   font-family: "FontAwesome";
   margin-right: 5px;
   margin-left: 5px;
   color: #8B0000;
}
.booNavigation .navContent ul li a:hover {
    background-color: rgba(232, 48, 21,0.9); 
   text-decoration: none;
 
/* 
    padding-left: 20px; */
}

/** Navigation examples
================================================== */
.nav-example {
    clear: left;
}