@charset "ISO-8859-1";
.contenedor { position:relative;
margin:auto;
width:900px;
padding:0;
}

.bw {
	position:absolute;
	left:9px;
	width:125px;
	height:150px;
	border-left:solid 1px #363636;
	padding-left:5px;
}

.bw1{
	position:absolute;
	left:170px;
	width:127px;
	top: 1px;
}

.bw2 {position:absolute;
left:300px;
width:125px;
}

.bw2bis {position:relative;
width:600px;
border-left:solid 1px #990000;
padding-left:5px;
margin-top:-5px;
padding-top:20px;}

.bw3 {position:absolute;
left:425px;
width:100px;
}

.bw3bis {position:relative;
width:450px;
padding-left:5px;
margin-top:-5px;
border-left:solid 1px #990000;
padding-top:20px;}

.bw4 {position:absolute;
left:525px;
width:150px;
}

.bw4bis {position:relative;
width:300px;
border-left:solid 1px #990000;
padding-left:5px;
margin-top:-5px;
padding-top:20px;}

.bw5 {position:absolute;
left:675px;
width:125px;
}

.bw5bis {position:relative;
width:150px;
border-left:solid 1px #990000;
padding-left:5px;
top:-23px;
padding-top:20px;}

.bw5bis h5{margin-top:26px;}

.bw5bis2 {
	position:absolute;
	width:300px;
	top:96px;
	right:149px;
	border-right:solid 1px #990000;
	padding-right:5px;
	margin-top:-5px;
}

.bw5bis2 p{text-align:right;}
.bw5bis2 h5{text-align:right;}

.bw6 {position:absolute;
left:800px;
width:125px;
}



body {margin:0;
padding:0;
}

.fondo {position:absolute;
bottom:0px;
height:100%;
width:100%;
background-image:url(img/barcelona_skyline-gris.jpg);
background-position:bottom;
background-repeat:no-repeat;
margin:0;
padding:0;}

.titulo {
	position:absolute;
	bottom:1px;
	left: 4px;
	width: 159px;
}

.num {font-family:"Arial Black", Gadget, sans-serif; color:#F2F2F2; font-size:4em; font-weight:boldl; line-height:1em; margin-top:0px; margin-bottom:0px;}

.num a{color:#f2f2f2;}

.fotos {position:relative;
top:-20px;
left:0px;
width:800px;
height:250px;
}
.by  {position:relative;
float:right;
top:15px;
right:0px;
}

.by p{ font-size:0.7em;  color: #BBB; line-height:1em;}

.subtitulo {position:relative;
float:right;
top:15px;
right:0px;
}

.subtitulo p{font-size:0.7em;  color: #BBB; line-height:1em;  margin-top:0px; margin-bottom:0px}


.contenido {position:relative;
top:6px;
width:800px;
margin-bottom:20px;}

p {font-family:Arial, Helvetica, sans-serif; font-weight:normal; margin-top:5px; margin-bottom:0px; font-size:0.75em; color:#777; line-height:1.1em; text-align:left;}


h1 {font-family:Arial, Helvetica, sans-serif; color:#990000; font-size:1.4em; font-weight:normal; line-height:1em; margin-top:50px; margin-bottom:0px;}
h1 a{color:#990000;}
.bw p {font-family:Arial, Helvetica, sans-serif; color:#999; font-size:1em; font-weight:normal; line-height:1em; margin-top:5px; margin-bottom:0px;}
h2 {padding-left:5px; border-left:solid 1px #B7B7B7; padding-top:38px; font-family:Arial, Helvetica, sans-serif; color:#B7B7B7; font-size:.9em; font-weight:normal; margin-top:0px; margin-bottom:0px; line-height:1em;}
h2:hover {color:#990000; padding-top:63px; border-left:solid 1px #990000;}
h3 {
	padding-left:5px;
	font-family:Arial, Helvetica, sans-serif;
	color:#CCC;
	font-size:0.9em;
	font-weight:normal;
	margin-top:0px;
	line-height:1em;
	margin-bottom:0px;
	color:#990000;
	padding-top:63px;
	border-left:solid 1px #990000;
}
h4 {font-family:Arial, Helvetica, sans-serif; color:#444; font-size:.9em; font-weight:normal; line-height:1em; margin-top:10px; margin-bottom:-3px;}
h5 {font-family:Arial, Helvetica, sans-serif; color:#444; font-size:.8em; font-weight:normal; line-height:1em; margin-top:8px; margin-bottom:-3px;}



a{ color:#990000; text-decoration:none; }
a:hover{ color: #CCC; text-decoration:none; }

.enlaces {position:relative;
float:right;
top:-16px;
width:500px;
padding:0;
height:30px;
z-index:2;
}

ul.menu
{  position:absolute;
right:0px;
margin-top:0px;
   padding:0;
   list-style:none;
   z-index:2;
}

ul.menu p{font-family:Arial, Helvetica, sans-serif; font-weight:normal; margin-top:0px; margin-bottom:0px; font-size:0.8em; line-height:1em; text-align:left;}
ul.menu a{ color:#990000; text-decoration:none; }
ul.menu a:hover{ color: #CCC; text-decoration:none; }

ul.menu li {position:relative;
display: inline-block;
margin:0 0 0 8px;
   z-index:2;
}

ul.menu ul /* Para todos los ul debajo del ul.menu */
{ position:absolute;
left:-8px;
margin-top:0px;
padding:8px 5px 5px 0px;
text-align:center;
display:none;
list-style:none;
z-index:2;
background-color:#FFF;
width:140px;
}

ul.menu ul li {margin-top:5px;
display:block;}
	
ul.menu li:hover > ul
{
   display:block;
   z-index:2;

}

#logo {padding-right:20px;}


/* BW13 responsive layout.
   The original desktop design above is intentionally left unchanged. */
.mobile-nav,
.mobile-archive {
    display:none;
}

@media screen and (max-width: 920px) {
    html, body {
        min-height:100%;
    }

    body {
        overflow-x:hidden;
        background:#fff;
    }

    .fondo {
        position:fixed;
        height:100vh;
        width:100%;
        background-size:100% auto;
        background-position:center bottom;
        z-index:-1;
    }

    .contenedor {
        position:relative;
        width:auto;
        max-width:none;
        margin:0;
        padding:0 18px 150px 18px;
        box-sizing:border-box;
    }

    .bw {
        position:relative;
        left:auto;
        top:auto;
        width:auto;
        height:92px;
        border-left:solid 1px #363636;
        padding-left:12px;
        box-sizing:border-box;
    }

    .titulo {
        position:static;
        width:auto;
        padding-top:18px;
    }

    h1 {
        margin-top:0;
        font-size:1.7em;
    }

    .bw p {
        font-size:1.05em;
        line-height:1.2em;
    }

    .mobile-nav {
        display:flex;
        flex-direction:column;
        gap:2px;
        margin:8px 0 22px 0;
    }

    .mobile-nav a {
        display:block;
        box-sizing:border-box;
        border-left:solid 1px #B7B7B7;
        padding:9px 10px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:.95em;
        line-height:1.15em;
        color:#888;
    }

    .mobile-nav a:hover,
    .mobile-nav a.active {
        color:#990000;
        border-left-color:#990000;
    }

    .contenedor > .bw1:not(.active-section),
    .contenedor > .bw2:not(.active-section),
    .contenedor > .bw3:not(.active-section),
    .contenedor > .bw4:not(.active-section),
    .contenedor > .bw5:not(.active-section) {
        display:none;
    }

    .contenedor > .active-section {
        display:block;
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        width:auto;
        margin:0;
    }

    .active-section > h3,
    .active-section > a > h3 {
        display:none;
    }

    .active-section > .bw2bis,
    .active-section > .bw3bis,
    .active-section > .bw4bis,
    .active-section > .bw5bis,
    .active-section > .bw5bis2 {
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        width:auto;
        box-sizing:border-box;
        margin:0;
        padding:12px 0 0 12px;
        border-left:solid 1px #990000;
        border-right:0;
    }

    p {
        font-size:1em;
        line-height:1.45em;
    }

    h4 {
        font-size:1.05em;
        line-height:1.25em;
        margin-top:14px;
    }

    h5 {
        font-size:1em;
        line-height:1.3em;
        margin-top:14px;
    }

    .active-section img {
        max-width:100%;
        box-sizing:border-box;
    }

    #logo {
        padding-right:10px;
        margin-bottom:8px;
    }

    .fotos,
    .contenido,
    .enlaces {
        width:auto;
        max-width:100%;
    }

    .active-section > .bw5bis,
    .active-section > .bw5bis2 {
        display:none;
    }

    .mobile-archive {
        display:block;
        border-left:solid 1px #990000;
        padding:1px 0 0 12px;
    }

    .mobile-archive-item {
        margin:0 0 16px 0;
    }

    .mobile-archive-item h5,
    .mobile-archive-item p {
        text-align:left;
    }
}

@media screen and (min-width: 600px) and (max-width: 920px) {
    .mobile-nav {
        flex-direction:row;
        flex-wrap:wrap;
    }

    .mobile-nav a {
        flex:1 1 30%;
        min-width:180px;
    }

    .contenedor {
        padding-left:28px;
        padding-right:28px;
    }
}