/* Import Google Web Font */
/* Style Blog Title Font */
.banner{ 
    font-family: 'Signika Negative' !important;
   font-style: italic;
   font-weight: 400;
 
line-height: 25px;
}
.banner .largo{
line-height: 23px;

}
.banner .title{
     font-size: 250%;
}
.banner{
color: #474747;
}
/*
.banner  .productos ul{
            float: left;
            list-style-type: none;
            padding: 0; 
            position: relative; 
            left: 50%;
        }
.banner .productos li{
            float: left;
            position: relative; 
            right: 37%;
        }*/
.banner{
margin:0;
padding:0;
background:url('../imgs/back-index.jpg') no-repeat;
background-size:100%;
max-width:1045px;
min-width:310px;
width:100%;
float:left;
overflow:hidden;
}
.banner .producto{
width: 15%;
position: relative;
float: left;
left:1000px;
margin-left: 3%;
}
.banner .cinco .producto{
margin-left: 3%;
} 
.banner .cuatro .producto{
margin-left: 7%;
} 

.banner .producto img{
width:100%;
}
.banner .productos{
width: 100%;
float: left;
margin-top: 3%;
height: 29%;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(255, 255, 255) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#55FFFFFF);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#55FFFFFF, endColorstr=#55FFFFFF)";

}
.left{
float:left;
}
.list.left{
margin-right:3%;
width: 50%;
}
.list.right{
width: 46%;
float: left;
}
.banner .opcion{
display:none;
}
.title-shown{position:absolute; top:95px; left:140px;font-size:30px;}
.banner .short{
margin-top: 10%;
}
.banner  .shortdescription{
float: left;
width: 100%;
height:100%;
margin-top: 0px;
background: url('imgs/contenido/as/index.png') no-repeat left 2px bottom -9px;
background-size: 59%;
}
.banner  .asopciona{
background: url('imgs/contenido/as/a.png') no-repeat left 2px bottom -9px;
background-size: 59%;
}
.banner  .asopcionb{
background: url('imgs/contenido/as/b.png') no-repeat left 9px bottom 7px;
background-size: 56%;
}
.banner  .asopcionc{
background: url('imgs/contenido/as/c.png') no-repeat left 2px bottom -6px;
background-size: 59%;
}
.banner  .asopciond{
background: url('imgs/contenido/as/d.png') no-repeat left 2px bottom -3px;
background-size: 59%;
}
.banner  .asopcione{
background: url('imgs/contenido/as/e.png') no-repeat left 2px bottom -9px;
background-size: 59%;
}
.banner  .asopcionf{
background: url('imgs/contenido/as/f.png') no-repeat left 3px bottom -6px;
background-size: 59%;
}
.banner  .asopciong{
background: url('imgs/contenido/as/g.png') no-repeat left 5px bottom -9px;
background-size: 59%;
}
.banner  .asopcionh{
background: url('imgs/contenido/as/h.png') no-repeat left 3px bottom -10px;
background-size: 59%;
}
.banner  .asopcioni{
background: url('imgs/contenido/as/i.png') no-repeat left 2px bottom -6px;
background-size: 59%;
}
.banner  .asopcionj{
background: url('imgs/contenido/as/j.png') no-repeat left 2px bottom -6px;
background-size: 59%;
}
.banner .shortdescription .descriptiontext, .banner .shortdescription .description{
width: 33%;
float: right;
margin-top: 4% !important;
padding-right: 31px;
font-weight: 100; 
font-size: 155%;
}
.banner .shortdescription .descriptiontext, .banner .shortdescription .description.withlist{
width: 36%;
padding-right: 10px;
}
.banner .shortdescription .description{
margin: 3px; /* el margin es importante para que funcione el slideDown de jquery*/
display: none;
}
.banner .shortdescription .title{
width: 491px;
text-align: center;
display: block;
position:absolute; top:180px; left:0;font-size:30px;

}

.banner .menu{
margin: auto;
width: 81%;
margin-top:10%;
height: 82px;
}
.banner .menu ul{
padding: 0px;
width: 100%;
}
.banner .menu li a{
border:0px;
}
.banner li{
text-decoration: none;
list-style-type: none;
}
.banner .menu li{
float: left;
width: 8%;
margin-right: 3px !important;
margin-left: 3px !important;
}
.banner .menu li:hover{
width: 9%;
margin-right: 0px !important;
margin-left: 0px !important;
}
.banner .menu img{
width: 96%;
height:auto;
border:0px;
}
.withlist span{
line-height: 22px;
font-size: 77%;
}
.withlist p{
margin:0;
}
.bold{
font-weight: 900;
color:#333;
}
.list{
margin-top:3%;
}
a{
border:0px;
text-decoration:none;
margin:0px;
color: #474747;
}
a:hover{
color: black;
}
.withlist p{
margin-bottom: 6px;
}

@media screen and (max-width:1030px){
.banner .short {
margin-top: 8%;
}
.banner .productos{
margin-top: 1%;
}
.banner .largo{
font-size: 96%;
}
.withlist span{
line-height: 18px;
font-size: 77%;
}

}
@media screen and (max-width:1025px){
.banner .largo{
font-size: 90%;
}
.withlist span{
line-height: 20px;
font-size: 70%;
}
.withlist p{
margin: 0;
margin-bottom: 3px;
font-size: 94%;
line-height: 20px;
}
}
@media screen and (max-width:900px){
.banner .largo {
font-size: 66%;
}
.withlist span{
line-height: 15px;
font-size: 66%;
}
}
@media screen and (max-width:970px){
.banner .shortdescription .descriptiontext, .banner .shortdescription .description{
     font-size: 152%; 
}
.banner .short {
margin-top: 8%;
}
.banner .largo{
font-size: 72%;
}
.banner .title {
font-size: 190%;
}
.banner .shortdescription .title {
width: 48%;
}
.banner .menu{
height: 72px;
}
.banner .productos{
margin-top: 1%;
}
.banner .menu li {
width: 8%;
}

.banner  .asopciona{
background: url('imgs/contenido/as/a.png') no-repeat left 1px bottom -3px;
background-size: 59%;
}
.banner  .asopcionb{
background: url('imgs/contenido/as/b.png') no-repeat left 9px bottom 7px;
background-size: 56%;
}
.banner  .asopcionc{
background: url('imgs/contenido/as/c.png') no-repeat left 1px bottom -1px;
background-size: 59%;
}
.banner  .asopciond{
background: url('imgs/contenido/as/d.png') no-repeat left 1px bottom -1px;
background-size: 59%;
}
.banner  .asopcione{
background: url('imgs/contenido/as/e.png') no-repeat left -1px bottom -6px;
background-size: 59%;
}
.banner  .asopcionf{
background: url('imgs/contenido/as/f.png') no-repeat left 1px bottom -5px;
background-size: 59%;
}
.banner  .asopciong{
background: url('imgs/contenido/as/g.png') no-repeat left 2px bottom -9px;
background-size: 59%;
}
.banner  .asopcionh{
background: url('imgs/contenido/as/h.png') no-repeat left 2px bottom -6px;
background-size: 59%;
}
.banner  .asopcioni{
background: url('imgs/contenido/as/i.png') no-repeat left 0px bottom -1px;
background-size: 59%;
}
}


@media screen and (max-width:880px){
.banner .largo {
font-size: 64%;
}
.withlist span {
line-height: 14px;
font-size: 57%;
}
}
@media screen and (max-width:870px){

.banner .shortdescription .descriptiontext, .banner .shortdescription .description{
     font-size: 127%; 
}

}
@media screen and (max-width:820px){

.banner .shortdescription .descriptiontext, .banner .shortdescription .description{
     font-size: 152%; 
}
.banner .short {
margin-top: 3%;
}
.banner .largo{
font-size: 63%;
}
.banner .title {
font-size: 190%;
}
.banner .shortdescription .title {
width: 48%;
}
.banner .menu{
height: 72px;
}
.banner .productos{
margin-top: 1%;
}
.banner .menu li {
width: 7.5%;
}
}
@media screen and (max-width:800px){
.withlist span {
line-height: 15px;
font-size: 79%;
}
.withlist{
margin-top: 7px !important;
}
.banner .shortdescription .descriptiontext, .banner .shortdescription .description{
     font-size: 100%; 
}
.banner .shortdescription .descriptiontext, .banner .shortdescription .description.withlist{

padding-right: 10px;
}
.banner .largo{
font-size: 90%;
}

.banner .short {
margin-top: 8%;
}
}
@media screen and (max-width:750px){
.banner .largo{
line-height: 18px;
}
.banner{
line-height: 17px;
}
.withlist p {
margin: 0;
margin-bottom: 3px;
line-height: 16px;
}
.withlist span {
line-height: 14px;
font-size: 80%;
}
}
@media screen and (max-width:700px){
.withlist span {
line-height: 17px;
font-size: 80%;
}
.banner .largo{
line-height: 13px;
}
.banner .productos{
margin-top: 0%;
}
.banner .short {
margin-top: 6%;
}
.banner .title {
font-size: 170%;
}
}
@media screen and (max-width:700px){
.withlist span {
line-height: 14px;
font-size: 78%;
}
}
@media screen and (max-width:580px){
.withlist span {
line-height: 11px;
font-size: 68%;
}
.banner{
line-height: 15px;
}
.banner .largo{
font-size: 73%;
}
.banner, .shortdescription{

}
.banner .productos{
margin-top: 0%;
}
.banner .title {
font-size: 111%;
}
.banner .shortdescription .title {
width: 39%;
}
.banner .menu{
height: 50px;
width: 82%;
}
.banner .menu li {
width: 7%;
}

.banner .shortdescription .descriptiontext, .banner .shortdescription .description {
font-size: 103%;
width: 36%;
padding-right: 8px;
}



.banner .largo {
font-size: 80%;
}
.banner .shortdescription .descriptiontext, .banner .shortdescription .description {
font-size: 83%;

}

.banner .short {
margin-top: 7%;
}

}


@media screen and (max-width:450px){
.withlist span {
line-height: 6px;
}
.withlist p {
line-height: 8px;
}
.banner .shortdescription .descriptiontext, .banner .shortdescription .description{
     font-size: 42%;
line-height: 8px;	 
}
.banner .short {
margin-top: 8%;
}
.banner .largo{
font-size: 62%;
}
.banner .title {
font-size: 90%;
}
.banner .shortdescription .title {
width: 52%;
margin-left: 7%;
}
.banner .menu{
height: 24px;
padding-top: 1px;
}
.banner ul{
padding: 2%;
margin: 0px;
}
.banner .productos{
margin-top: 5%;
}
.banner .menu li {
margin-right: 2px !important;
margin-left: 2px !important;
}
.banner  .shortdescription{
background: url('imgs/contenido/as/index.png') no-repeat left 2px bottom -3px;
background-size: 59%;
}
.banner  .asopciona{
background: url('imgs/contenido/as/a.png') no-repeat left -1px bottom -2px;
background-size: 59%;
}
.banner  .asopcionb{
background: url('imgs/contenido/as/b.png') no-repeat left 4px bottom 3px;
background-size: 56%;
}
.banner  .asopcionc{
background: url('imgs/contenido/as/c.png') no-repeat left -1px bottom 0px;
background-size: 59%;
}
.banner  .asopciond{
background: url('imgs/contenido/as/d.png') no-repeat left 1px bottom 0px;
background-size: 59%;
}
.banner  .asopcione{
background: url('imgs/contenido/as/e.png') no-repeat left -3px bottom -5px;
background-size: 59%;
}
.banner  .asopcionf{
background: url('imgs/contenido/as/f.png') no-repeat left -1px bottom -4px;
background-size: 59%;
}
.banner  .asopciong{
background: url('imgs/contenido/as/g.png') no-repeat left 0px bottom -8px;
background-size: 59%;
}
.banner  .asopcionh{
background: url('imgs/contenido/as/h.png') no-repeat left 0px bottom -5px;
background-size: 59%;
}
.banner  .asopcioni{
background: url('imgs/contenido/as/i.png') no-repeat left -2px bottom 0px;
background-size: 59%;
}
}