.space-icon {
    margin-right: 5px;
}
    .item {
        color:#2980b9;
    }
    .grayscale {
        background: #212121;
    }
    nav#nav-main a:hover {
      background-color: #6b101a;
      color: #fff; 
      text-decoration: none;
    }

.log {
    -ms-transform: rotate(-2deg); /* IE 9 */
    -webkit-transform: rotate(-2deg); /* Chrome, Safari, Opera */
    transform: rotate(-2deg); 
}
header {
    background: #000;
    border-bottom: solid 3px rgba(0,0,0,0.09);
    z-index: 99;
    transition: all .4s;
    width: 100%;
    position: fixed;
}
nav#nav-mobile {
  position: relative;
  z-index: 999;
  display: none;
}
  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    top:-0.9em;
    padding: 1em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #000; 
    /*021319*/
  }
  nav#nav-mobile li {
    display: block;
    padding: 0;
    margin: 0;
  }
  nav#nav-mobile li a {
    display: block;
    color: #fff; 
    margin-right: -4px;
    text-decoration: none;
  } 
    nav#nav-mobile li a:hover {
    background: rgba(0,0,0,0.3);
  } 

    nav#nav-mobile li:last-child {
      border-bottom: none; 
    }
nav#nav-main {
    position: relative;
    padding: 0;
    height: 66px;
}
  nav#nav-main ul {
    list-style-type: none;
    top: -7em;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: right; 
  }
  nav#nav-main li {
    display: inline-block;
  }
  nav#nav-main a {
      color: #fff;
    display: block;
    padding: 25px 25px; 
    font-size: 15px;
  }
    .activated {
        background: #910f1f;
        display: block;
        padding: 25px 25px; 
        text-decoration: none;
        margin-right: -4px;
    }
    .activated:hover {
        color: #910f1f; 
        text-decoration: none;
    }

#nav-trigger {
  display: none;
  text-align: right; 
  padding-top: 25px;
	
}
  #nav-trigger span {
    display: inline-block;
    padding: 20px 20px;
    background-color: #ecf0f1;
    color:#3498db;
    font-size: 2em;
    cursor: pointer;
    border-radius: 10em;
    text-transform: uppercase;
      -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
	transition: transform ease-out 0.1s, background 0.2s;
    
  }
#nav-trigger span:after {
    z-index: -1;
	box-shadow: 0 0 0 2px rgba(255,255,255,4);
	opacity: 0;
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	-ms-transform: scale(0.3);
	transform: scale(0.3);
    
  }

    #nav-trigger span:hover {
    background: rgba(255,255,255,0.1);
	-webkit-transform: scale(0.90);
	-moz-transform: scale(0.90);
	-ms-transform: scale(0.90);
	transform: scale(0.90);
    }
#nav-trigger span:hover:after {
    -webkit-animation: sonarEffect 1.3s ease-out 90ms;
	-moz-animation: sonarEffect 1.3s ease-out 90ms;
	animation: sonarEffect 1.3s ease-out 90ms;
}

body {
    font-family: helvetica;
    font-weight: 100;
}
.navbar-default .navbar-nav>li>a {
    color: white;
    border-bottom: solid transparent 3px;
    transition: all .3s;
}
.navbar-default .navbar-nav>li>a:hover {
    color: white;
    border-bottom: solid #fff 3px;
}
.navbar-default .navbar-toggle .icon-bar {
    background: white;
}
.navbar-toggle{
    border-color: white;
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 3em;
    margin-right: 15px;
    margin-bottom: 3em;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.cuerpo {
    width: 100%;
    position: absolute;
    margin-top: 8em;
    z-index: -1;
}
.cuadro-xs img {
    width: 100%;
    height:auto;
    position: relative;
    top: 0em;
}

/* --------------- Imagen interactiva ---------------*/

.wrap {
    width: 960px;
    margin: auto;
    height: 500px;
    position: relative;
}
.wrapper {
    margin-bottom: -1000px;
    background: #808184;
}
.top {
    background-image: url(../img/top.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 690px;
    height: 262px;
    max-height: 262px;
    position: relative;
    top:0px;
    bottom: -1000px;
    left: 274px;
    
}
.lat-izq {
    background-image: url(../img/lat-izq.png);
    background-repeat: no-repeat;
    background-size: auto;
    max-width: 494px;
    width: auto;
    height: 500px;
    max-height: 500px;
    position: relative;
    bottom:-845px;
    top:-760px;
}
.letras-corp {
    width: 250px;
    height: 83px;
    max-height: 83px;
    position: relative;
    top:-646px;
    left: 339px;
}
.letras-corp a {
    background-image: url(../img/letras-corp.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 33px 260px;
}
.letras-corp a:hover {
    background-image: url(../img/letras-corp-hover.png);
}
.letrero {
    width: auto;
    max-width: 64px;
    max-height: 111px;
    height: 111px;
    position: relative;
    top:-1187px;
    left: 345px;
}
.letrero a {
    background-image: url(../img/letrero.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 75px 64px;
}
.letrero a:hover {
    background-image: url(../img/letrero-hover.png);
}
.letrero-lum {
    width: 260px;
    max-height: 195px;
    height: 105px;
    position: relative;
    top:-1169px;
    left: 18px;
}
.letrero-lum a {
    background-image: url(../img/letrero-lum.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 90px 310px;
}
.letrero-lum a:hover {
    background-image: url(../img/letrero-lum-hover.png);
}
.articulos {
    width: 240px;
    max-height: 195px;
    height: 80px;
    position: relative;
    top:-1133px;
    left: 53px;
}
.articulos a {
    background-image: url(../img/articulos.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 120px 120px;
}
.articulos a:hover {
    background-image: url(../img/articulos-hover.png);
}
.diseno {
    width: 56px;
    max-height:71px;
    height: 71px;
    position: relative;
    top:-1498px;
    left: 625px;
}
.diseno a {
    background-image: url(../img/diseno.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 60px 40px;
}
.diseno a:hover {
    background-image: url(../img/diseno-hover.png);
}
.lat-der {
    background-image: url(../img/lat-der.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 494px;
    height: 415px;
    position: relative;
    left: 466px;
    top:-177px;
}
.valla {
    width: 106px;
    max-height:101px;
    height: 101px;
    position: relative;
    top:-1472px;
    left: 780px;
}
.valla a {
    background-image: url(../img/valla.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 70px 90px;
}
.valla a:hover {
    background-image: url(../img/valla-hover.png);
}
.rotulos {
    width: 106px;
    max-height:50px;
    height: 50px;
    position: relative;
    top:-1450px;
    left: 800px;
}
.rotulos a {
    background-image: url(../img/rotulos.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 45px 80px;
}
.rotulos a:hover {
    background-image: url(../img/rotulos-hover.png);
}
.rot-vehi {
    width: 106px;
    max-height:50px;
    height: 50px;
    position: relative;
    top:-1364px;
    left: 661px;
}
.rot-vehi a {
    background-image: url(../img/rot-vehi.png);
    background-repeat: no-repeat;
    background-size: auto;
    padding: 80px 80px;
}
.rot-vehi a:hover {
    background-image: url(../img/rot-vehi-hover.png);
}



/* --------------- Paneles laterales ---------------*/

.aside-right {
    width: 135px;
    position: fixed;
    top: 12%;
    right: 0px;
    z-index: 2765;
    transition: all .3s;
}
.aside-right a {
    display: block;
    border-bottom: solid 1px rgba(0,0,0,0.3);
    color:white;
    text-align: center;
    padding: 10px 5px;
    text-decoration: none;
    background-color: #cc1628;
    transition: all .2s;
}
.aside-right a:hover {
    margin-left: -15px;
    background-color: #e02f3d;
    border-bottom: solid 1px rgba(0,0,0,0.0);
    -ms-transform: rotateY(0deg) rotateZ(-3deg) skewX(-3deg); /* IE 9 */
    -webkit-transform: rotateY(0deg) rotateZ(-3deg) skewX(-3deg); /* Chrome, Safari, Opera */
    transform: rotateY(0deg) rotateZ(-3deg) skewX(-3deg);
}

.aside-left {
    width: 125px;
    position: fixed;
    top: 19%;
    left: 0px;
    z-index: 2765;
    transition: all .3s;
}
.aside-left a {
    display: block;
    border-bottom: solid 1px rgba(0,0,0,0.3);
    color:white;
    text-align: center;
    padding: 15px 5px;
    text-decoration: none;
    background-color: #871119;
    transition: all .2s;
}
.aside-left a:hover {
    margin-right: -8px;
    background-color: #a01922;
    border-bottom: solid 1px rgba(0,0,0,0.0);
    -ms-transform: rotateY(0deg) rotateZ(3deg) skewX(3deg); /* IE 9 */
    -webkit-transform: rotateY(0deg) rotateZ(3deg) skewX(3deg); /* Chrome, Safari, Opera */
    transform: rotateY(0deg) rotateZ(3deg) skewX(3deg);
}





/*---SlideShow---*/

.blueberry { margin: auto -2%; width: 100%;}
.blueberry .slides {
	display: block;
	position: relative;
	overflow: hidden;
    width: 100%;
}
.blueberry .slides li {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
    width: 100%;
}
.blueberry .slides li img {
	display: block;
	width: 100%;
	max-width: none;
}
.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: 100%; }

.blueberry .pager {
	height: 40px;
	text-align: center;
}
.blueberry .pager li { display: inline-block; }
.blueberry .pager li a,
.blueberry .pager li a span {
	display: block;
    background: transparent;
    border: none;
	height: 4px;
	width: 4px;
}
.blueberry .pager li a {
	padding: 18px 8px;
-webkit-border-radius: 6px;
   -moz-border-radius: 6px;
	border-radius: 6px;
}
.blueberry .pager li a span {
	overflow: hidden;
	background: transparent;
    border: solid 1px white;
    padding: 5px;
	text-indent: -9999px;
-webkit-border-radius: 7px;
   -moz-border-radius: 7px;
	border-radius: 7px;
}
.blueberry .pager li.active a span { background: white; }










/* ----------------- Media Queries -----------------*/
@media screen and (max-width: 1199px) {
    .aside-right {
        width: 110px;
        position: fixed;
        right: 0px;
        z-index: 2765;
        transition: all .3s;
    }
    .aside-left {
        width: 120px;
        position: fixed;
        left: 0px;
        z-index: 2765;
    }
}
@media screen and (max-width: 1080px) {
    .aside-right {
        width: 135px;
        position: fixed;
        right: -70px;
        z-index: 2765;
        transition: all .3s;
    }
    .aside-right > a {
        color:#cc1628;
    }
    .aside-right:hover > a {
        color:white;
    }
    .aside-right:hover {
        right: 0px;
    }
    .aside-left {
        width: 120px;
        position: fixed;
        left: -55px;
        z-index: 2765;
    }
    .aside-left > a {
        color:#871119;
    }
    .aside-left:hover > a {
        color:white;
    }
    .aside-left:hover {
        left: 0px;
    }
}
@media screen and (max-width: 991px) {
    nav#nav-main ul {
      top: -5em;
    }
    .wrap {
        width: 100%;
        margin: auto;
        height: 400px;
        position: relative;
    }
    .wrapper {
        background: #808184;
    }
    .top {
    background-image: url(../img/top.png);
    background-repeat: no-repeat;
    background-size: 476px auto;
    width: 480px;
    height: 446px;
    max-height: 262px;
    position: relative;
    top:0px;
    left: 244px;
    
}
.lat-izq {
    background-image: url(../img/lat-izq.png);
    background-repeat: no-repeat;
    background-size: 400px auto;
    max-width: 494px;
    width: auto;
    height: 400px;
    max-height: 500px;
    position: relative;
    bottom:-845px;
    top:-680px;
}
.letras-corp {
    width: 200px;
    height: 70px;
    max-height: 73px;
    position: relative;
    top:-529px;
    left: 309px;
}
.letras-corp a {
    background-image: url(../img/letras-corp.png);
    background-repeat: no-repeat;
    background-size: 153px auto;
    padding: 90px 200px;
}
.letras-corp a:hover {
    background-image: url(../img/letras-corp-hover.png);
}
.letrero {
    width: auto;
    max-width: 34px;
    max-height: 111px;
    height: 21px;
    position: relative;
    top:-1044px;
    left: 281px;
}
.letrero a {
    background-image: url(../img/letrero.png);
    background-repeat: no-repeat;
    background-size: 44px auto;
    padding: 45px 34px;
}
.letrero a:hover {
    background-image: url(../img/letrero-hover.png);
}
.letrero-lum {
    width: 250px;
    max-width: 299px;
    max-height: 105px;
    height: 105px;
    position: relative;
    top:-921px;
    left: 14px;
}
.letrero-lum a {
    background-image: url(../img/letrero-lum.png);
    background-repeat:no-repeat;
    background-size:245px auto;
    padding: 90px 250px;
}
.letrero-lum a:hover {
    background-image: url(../img/letrero-lum-hover.png);
}
.articulos {
    width: auto;
    max-width: 199px;
    max-height: 75px;
    height: 70px;
    position: relative;
    top:-935px;
    left: 44px;
}
.articulos a {
    background-image: url(../img/articulos.png);
    background-repeat: no-repeat;
    background-size: 171px auto;
    padding: 90px 90px;
}
.articulos a:hover {
    background-image: url(../img/articulos-hover.png);
}
.lat-der {
    background-image: url(../img/lat-der.png);
    background-repeat: no-repeat;
    background-size: 440px auto;
    width: 450px;
    height: 455px;
    max-height: 355px;
    position: relative;
    bottom: -177px;
    left: 280px;
    top:-139px;
}
}
@media screen and (max-width: 768px) {
    .blueberry { margin: auto -4%; width: 100%;}
    .grayscale {
        background: #fff;
    }
    header {
        height: 6em;
        background: #df0b13;
        position: relative;
        z-index: 99;
        width: 100%;
    }
    .colasp {
        background: #062C3B;
    }
    .navbar-collapse {
        background: rgba(0,0,0,0.5);
        border: none;
        width: 106%;
        margin-right: 0px;
    }
    .navbar-default .navbar-nav>li>a:hover {
        color: white;
        border-bottom: solid transparent 3px;
        background:  rgba(0,0,0,0.5);
    }
    .collapsed {
        margin-top: 1em;
        color:#fff; 
    }
    .icon-bar{
        color:#fff;
    }
    .navbar-default {
        background: transparent;
        width: 100%;
        margin-right: 0px;
    }
    .navbar {
        width: 100%;
        position: relative;
        margin-right: 0px;
    }
    #nav-trigger span {
        color:#fff;
        background: rgba(0,0,0,0.009);
        top:-0.5em;
    }
    .activecerrar {
        background: rgba(0,0,0,0.4);
    }
    .menu-enlace {
        display: block;
        padding: 20px 30px; 
        color: #fff; 
        text-decoration: none;
    }
    .menu-enlace:hover {
      background-color: rgba(0,0,0,0.4);
      text-decoration: none;
    }
    .logotipo {
    position: relative;
    top:-6em;
    width: 235px;
    max-width: 235px;
    }
    #nav-trigger {
    display: block; 
    z-index: 999;
    }

    nav#nav-main {
    display: none; 
    }

    nav#nav-mobile {
    display: block; 
    }
    
    .aside-right {
        width: 100%;
        position: relative;
        top: 0em;
        right: 0px;
        z-index: 1;
    }
    .aside-left {
        width: 100%;
        position: relative;
        top: 0em;
        left: 0px;
        z-index: 1;
    }
    .aside-right > a {
        color:white;
    }
    .aside-left > a {
        color:white;
    }
}