/* Font */
@font-face { font-family: Banda; src: url('banda.otf'); } @font-face { font-family: Banda; font-weight: bold; src: url('Banda-Bold.otf'); }

html, body{background: #0c0c0c; padding: 0px}

.navbar-inverse  .navbar-inner{margin-left: 0; background: #0c0c0c; background: rgba(11, 11, 11, .8);  border: 0px; filter: none;}
.navbar-inner{padding: 0px;}
.navbar{margin-left: 0px; margin-bottom: 0px;}
.container-fluid{position: absolute; width: 100%; padding: 0px;}

#bgslider{ position: absolute; width: 100%;  overflow: hidden}
#bgslider div{width: 950px; height: 671px; margin: 0 auto; overflow: hidden; }
#bgslider div img{position: absolute; max-width: none; z-index: 1}
#bgslider div span{width: 26px; height: 51px; background: url('../images/arrows.png') no-repeat; position: absolute; z-index: 100; cursor: pointer}
#bgslider div span.prev{background-position: 0 0;  top: 35%; left: 10%; }
#bgslider div span.next{background-position: 0 -51px; top: 35%; right: 10%;}

/* HEADER */
#header{  font-family: Arial, Helvetica; position: relative; z-index: 200}
#header .nav{margin-left: 10px; }
#header .pull-right{margin-right: 10px; }
#header .navbar .nav > li > a{ color: #FFF; text-transform: uppercase; font-size: 11px;}
#header .navbar .nav > li > a:hover{ background: #161616}
#header .nav-collapse  .btn{background: #191919; color: #666; font-size: 12px; box-shadow: none; text-shadow: none}
#header .nav-collapse  .btn strong{color: #FFF; }



/* FOOTER */
#footer{padding: 0 20px 0 20px; background: #0c0c0c;  min-height: 90px;}
#footer .navbar-inner{font-size: 12px; font-family: Arial-Narrow, Arial, Helvetica; }
#footer .navbar .nav > li > a{color: #555; }
#footer .navbar .nav > li > a:hover{color: #FFF; }
#footer .facebook{ background: url('../images/socialmedia.png') 0 0 no-repeat; width: 25px;  height: 25px; padding: 4px 0; box-shadow: none}
#footer .twitter{ background: url('../images/socialmedia.png') -40px 0 no-repeat; width: 25px;  height: 25px; padding: 4px 0; box-shadow: none; margin-left: 10px; }
#footer .contactus{text-transform: uppercase; color: #FFF; margin-left: 10px; font-size: 11px; color: #555; text-decoration: none}
#footer .contactus:hover {color: #FFF;}

#footer blockquote{color: #FFF; border: 0px; text-align: center; font-size: 11px; margin-top: 10px;}


/* CONTENIDO */
#contentBody{padding-top: 1px; min-height: 631px; /*background: rgba(255, 255, 255, .2);*/ text-align: center; position: relative; z-index: 20}


#contentBody .logo{ margin-top: 150px; }
#contentBody .logo p{text-transform: uppercase; font-size: 20px; color: #e2e2e2; margin-top: 30px; line-height: 22px;}
#contentBody .logo p span{color: #FFF; font-style: italic; font-family: Banda , helvetica, sans-serif;}

#lissections{color: #FFF; margin-top: 45px;}
#lissections li{display: inline-block}
#lissections li{width: 18%; min-width:150px;  text-align: center; margin: 0 10px; }
#lissections li a{ text-align: center; font-family: Georgia, Arial, Helvetica; text-transform: uppercase; color: #bab9ba; text-decoration: none; font-size: 16px; font-weight: bold; }
#lissections li a span{display: block; border-bottom: 4px solid #FFF; }
#lissections li a:hover{ color: #FFF; }
#lissections li a:hover img{ opacity: 1; }
#lissections li a img{ display: block; opacity: 0; transition: all 500ms ease 0s; width: auto; margin: 0 auto; }


@media (max-width: 730px) {
    #bgslider{ position: absolute; width: 100%; height: auto; overflow: visible}
    #bgslider div{width: 100%;  overflow: visible}
    #bgslider div img{z-index: 1; opacity: 1 !important; margin: 0 !important; position: relative; max-width: 100%;}
    #bgslider div span{display: none;}
    
    #contentBody .logo{ margin-top: 50px; }
    #contentBody .logo p{ font-size: 18px; margin-top: 20px; line-height: 20px;}
   
    
    
    #lissections li {margin-bottom: 20px !important; width: 40%;}
    #lissections li a img{ display:  none; }
    
}