@charset "utf-8";
/* CSS Document */

/* PROMOCION */
#promocion {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background:#F9F9F9;
    color:#202020;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size:15px;
    display: none;
    width: 100%;
    max-width: 715px;
    height: auto;
    padding:12px;
    position: fixed;
    z-index: 1000;
    bottom: 10px; bottom: -400px;
    left:50%; margin-left: -357px;
    border: solid 1px #A2A2A2;
    box-shadow: rgba(0,0,0,.3) 0 0 10px;
}
#promocion img {
    max-width: 100%;
    height: auto;
}
#promocion section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 18px 10px 18px;
    border-bottom: solid 6px #A5A5A5;
}
#promocion .promoDestacado {
    color:#F00;
    font-family: 'Roboto Condensed', sans-serif;
    font-size:23px;
    font-weight: 700;
    margin:0 0 5px 0;
}
#cerraPromo {
    background: #00BBCB;
    display: block;
    width:30px;
    height: 30px;
    position: absolute;
    z-index: auto;
    top:-10px;
    right:-10px;
    overflow: hidden;
    border-radius:50%;
    -webkit-transition: all ease 700ms;
	-moz-transition:    all ease 700ms;
	transition: 		all ease 700ms;
}
#cerraPromo:hover {
    background: #F00;
}
#cerraPromo:before {
    content: "X";
    color:white;
    text-align: center;
    display: block;
    width:100%;
    height: 100%;
    line-height: 30px;
    position: absolute;
    z-index: auto;
    top:0;
    left:0;
}

@media screen and (max-width: 800px) {
#promocion {
    width:auto;
    margin: 0;
    left:30px;
    right:30px;
}
#promocion .promoDestacado {
    font-size: calc(18px + (34 - 18) * ((100vw - 300px) / (1920 - 320)));
} 
}