@charset "utf-8";
.cleaner{ clear:both;}
body{
    min-width: 300px;
}

div.contenedor{
	width: 100%;
    max-width: 620px;
    height: 100px;
	margin-right: auto;
    margin-left: auto;
	background-color: #F0F0F0;
    margin-top: 45px;
    border-right: 3px solid #0084b6;
}

a{
    text-decoration: none;
}

div.foto{
	width: 200px;
    height: 100px;
	background-color: #999;
    display: inline-block;
    background-image: url("../img/promo.gif"); 
    background-size: cover;
    background-position: 50%;"
}

div.contenido{
	display: inline-block;
    vertical-align: top;
    width: calc(100% - 207px);
}

div.flecha{
    background-image: url("../img/flecha.svg"); 
    background-size: 1000%;
    background-position: center;
    border-left: 3px solid #0084b6;
    width: 35px;
    height: 35px;
    background-color: #0084b6;
    border-radius: 50%;
    margin-top: -17px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
}

h1{
    font-family: 'suecaslabthin', arial, helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    font-weight: normal;
    font-size: 24px;
    line-height: 24px;
    height: 30px;
    color: #696969;
    letter-spacing: -1.5px;
    word-spacing: 0px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    margin-top: 3px;
}

.h1bold{
    font-family: 'suecaslabmedium', arial, helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    font-weight: normal;
    letter-spacing:-1px;
}

br.brCandi{
    display: none;
}

hr{
    border: none;
    border-top:1px dotted #D3D3D3;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 23px;
    margin-bottom: 3px;
}

h2{
    font-family: 'TheSans', arial, helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    height: 14px;
    text-align: center;
    color: dimgray;
    letter-spacing: 0.7px;
    word-spacing: 1px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    margin-top: 0px;
}

h3{
    font-family: 'TheSans', arial, helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    height: 15px;
    text-align: left;
    color: dimgray;
    letter-spacing: 0.7px;
    word-spacing: 1px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 5px;
    display: none;
}

.h2bold{
    font-family: 'TheSansBold', arial, helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    font-weight: normal;
    letter-spacing: 1px;
    color: #0084b6;
}

/*br {
    display: none;
}*/

@media screen and (max-width: 590px) { 
    h1{ font-size: 24px;}
}  

@media screen and (max-width: 550px) { 
    /*div.foto { width: 100px;}
    div.contenido { width: calc(100% - 110px);}
    h1{font-size: 26px; margin-top: 0px; margin-bottom: -4px;}
    hr{ width: 260px;}*/
    br {display: inline;}   
    div.foto { width: 30%;}
    div.contenido { width: 63%;}
    h1{ font-size: 28px; line-height: 29px; height: 55px; text-align: left; margin-right: 0px; margin-left: 20px; margin-top: 0;}
    div.flecha { width: 40px; height: 40px;margin-right: 10px; margin-top: -20px; margin-left: auto; margin-bottom: -10px; }
    h2, hr{ display: none; }
    h3{ display: block; margin-left: 20px;}
    span.no, br{display: none;}
    br.brCandi{display:inline;}
}    
    
@media screen and (max-width: 400px) { 
    br {display: inline;}   
    div.foto { background-image: url("../img/promo320.gif"); width: 100px;}
    div.contenido { width: calc(100% - 110px);}
    h1{ font-size: 24px; margin-top: 5px; line-height: 26px; height: 55px; text-align: left; margin-right: 0px; margin-left: 10px;}
    div.flecha { width: 40px; height: 40px;margin-right: 10px; margin-left: auto; margin-bottom: -10px; }
    h2, hr{ display: none; }
    h3{ display: block; margin-left: 10px; margin-top: 2px;}
}