@font-face {
font-family: 'GothamBlack';
src: url('/fonts/especiales/gotham/Gotham-Black.eot');
src: url('/fonts/especiales/gotham/Gotham-Black.eot?#iefix') format('embedded-opentype'),
	 url('/fonts/especiales/gotham/Gotham-Black.woff') format('woff'),
	 url('/fonts/especiales/gotham/Gotham-Black.ttf') format('truetype'),
	 url('/fonts/especiales/gotham/Gotham-Black.svg#gothamBlack') format('svg');
font-weight: normal;
font-style: normal;}	

@font-face {
font-family: 'GothamBold';
src: url('/fonts/especiales/gotham/Gotham-Bold.eot');
src: url('/fonts/especiales/gotham/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
	 url('/fonts/especiales/gotham/Gotham-Bold.woff') format('woff'),
	 url('/fonts/especiales/gotham/Gotham-Bold.ttf') format('truetype'),
	 url('/fonts/especiales/gotham/Gotham-Bold.svg#gothamBold') format('svg');
font-weight: normal;
font-style: normal;}	

@font-face {
font-family: 'GothamBook';
src: url('/fonts/especiales/gotham/Gotham-Book.eot');
src: url('/fonts/especiales/gotham/Gotham-Book.eot?#iefix') format('embedded-opentype'),
	 url('/fonts/especiales/gotham/Gotham-Book.woff') format('woff'),
	 url('/fonts/especiales/gotham/Gotham-Book.ttf') format('truetype'),
	 url('/fonts/especiales/gotham/Gotham-Book.svg#gothamBook') format('svg');
font-weight: normal;
font-style: normal;}	

@font-face {
font-family: 'GothamItalic';
src: url('/fonts/especiales/gotham/Gotham-BookItalic.eot');
src: url('/fonts/especiales/gotham/Gotham-BookItalic.eot?#iefix') format('embedded-opentype'),
	 url('/fonts/especiales/gotham/Gotham-BookItalic.woff') format('woff'),
	 url('/fonts/especiales/gotham/Gotham-BookItalic.ttf') format('truetype'),
	 url('/fonts/especiales/gotham/Gotham-BookItalic.svg#gothamItalic') format('svg');
font-weight: normal;
font-style: normal;}	

{ font-family:'GothamBlack', sans-serif;font-family:'GothamBold', sans-serif;font-family:'GothamBook', sans-serif;font-family:'GothamItalic', sans-serif;}

.especial_ODS a { color:#17191e; font-family:'GothamItalic', sans-serif; text-decoration:underline; font-size:14px;}
.top *, .content * {font-family:'GothamBook', sans-serif;}
.top { margin-top:20px;}
.top h1 { display:block; width:335px; height:90px; margin: 0 auto 30px;}
.top h1 a {display:block; width:335px; height:90px; background:url(../img/sprite.jpg) no-repeat 23px 14px; overflow:hidden; text-indent:-9000px;}
.top h1 a:hover { opacity:.8;}
.no_link { cursor:default; pointer-events: none;}
.no_link:hover { opacity:1;}
.pie_no_link { margin-top:6px !important;}
.fotogaleria.pieza span { background-image:none !important; padding: 23px 35px !important;}

.top .matrix ul li { display:block; float:left; width:326px; height:163px;}
.top .matrix ul li a { display:block; width:326px; height:163px; text-indent:-90000px; overflow:hidden; background:url(../img/matrix.jpg) no-repeat 0 0;}
.top .matrix ul li:nth-of-type(2) a { background-position:-326px 0;}
.top .matrix ul li:nth-of-type(3) a { background-position:-652px 0;}
.top .matrix ul li:nth-of-type(4) a { background-position:0 -163px;}
.top .matrix ul li:nth-of-type(5) a { background-position:-326px -163px;}
.top .matrix ul li:nth-of-type(6) a { background-position:-652px -163px;}
.top .matrix ul li:nth-of-type(7) a { background-position:0 -326px;}
.top .matrix ul li:nth-of-type(8) a { background-position:-326px -326px;}
.top .matrix ul li:nth-of-type(9) a { background-position:-652px -326px;}
.top .matrix ul li:nth-of-type(10) a { background-position:0 -489px;}
.top .matrix ul li:nth-of-type(11) a { background-position:-326px -489px;}
.top .matrix ul li:nth-of-type(12) a { background-position:-652px -489px;}
.top .matrix ul li:nth-of-type(13) a { background-position:0 -652px;}
.top .matrix ul li:nth-of-type(14) a { background-position:-326px -652px;}
.top .matrix ul li:nth-of-type(15) a { background-position:-652px -652px;}
.top .matrix ul li:nth-of-type(16) a { background-position:0 -815px;}
.top .matrix ul li:nth-of-type(17) a { background-position:-326px -815px;}
.top .matrix ul li:nth-of-type(18) a { background-position:-652px -815px;}
.top .matrix ul li a:hover { opacity:.8;}

.intro, .escenarios { width:800px; margin:0 auto;}
.intro { text-align:center; color:#8a8a8a;}
.intro h2 { color:#000000;margin: 60px 0 25px; font-family:'GothamBlack', sans-serif; font-size:27px; letter-spacing:5px;}
.intro p { font-size:13px; line-height:24px;}

.escenarios { margin:70px auto 0 auto; display:none; }
.escenarios .si { width:360px; display:block; float:left; text-align:right;}
.escenarios .no { width:360px; display:block; float:right; text-align:left;}
.escenarios h3 { color:#000; font-family:'GothamBold', sans-serif; font-size:25px; text-transform:uppercase; margin-bottom:5px;}
.escenarios h3 span { font-size:60px; display:block; font-family:'GothamBlack', sans-serif; line-height:60px;}
.escenarios a { text-decoration:none; display:inline-block;}
.escenarios a:hover { opacity:.6;}
.escenarios .autor { text-decoration:underline; font-family:'GothamItalic', sans-serif; }

.especial_ODS .barra_compartir { display:block; text-align:center; background:url(../img/sprite.jpg) no-repeat 0 -180px;}
.especial_ODS .top .barra_compartir { margin-top:70px;}
.especial_ODS .barra_compartir ul { display:inline-block;}
.especial_ODS .barra_compartir ul li { display:block; float:left; margin:0 3px;}
.especial_ODS .barra_compartir ul li a { display:block; width:35px; height:35px; overflow:hidden; text-indent:-9000px; background:url(../img/sprite.jpg) no-repeat 0 0;}
.especial_ODS .barra_compartir ul li a.twitter { background-position:-407px 0}
.especial_ODS .barra_compartir ul li a.facebook { background-position:-371px 0}
.especial_ODS .barra_compartir ul li a.googlemas1 { background-position:-449px 0}
.especial_ODS .barra_compartir ul li a:hover { opacity:.6;}

.content { display:inline-block;}
.ficha { margin:50px 0 30px;}
.ficha .left { display:block; float:left; width:273px; margin-right:33px;}
.ficha .right { display:block; float:left; width:660px;}

.ficha .left .numero { width:258px; padding-right:15px; height:273px; background:#000; font-family:'GothamBold', sans-serif;color:#fff; font-size:263px; letter-spacing:-30px; line-height:266px; text-align:center;}
.ficha .left img { text-align:center; display:block; margin:0 auto;}
.ficha .left .link_top {  background: url(../img/sprite.jpg) no-repeat 15px -80px; text-decoration: underline; font-size: 13px; font-family: 'GothamBold', sans-serif; text-transform: uppercase; width: 153px; display: block; padding: 15px 50px 10px 70px; margin: 18px 0;}
.ficha .left .link_top:hover { opacity:.6;}
.ficha .left .icono:before { content:""; width:273px; height:2px; display:block; background: url(../img/sprite.jpg) no-repeat 0 -193px;}
.ficha .left .descripcion:before { content:""; width:273px; height:2px; margin-bottom:30px; display:block; background: url(../img/sprite.jpg) no-repeat 0 -193px;}
.ficha .left .descripcion { font-size:11px; line-height:15px; padding:10px; margin-bottom:20px;}
.ficha .left .descripcion span {  margin-bottom: 30px;  display: block;  text-transform: uppercase;  font-family: 'GothamBold', sans-serif;  font-size: 9px;  text-align: center;  line-height: 13px;  color: #777;}
.ficha .left .descripcion span strong {font-family:'GothamBold', sans-serif; font-weight:bold;  color: #444;}
.ficha .left ul { margin-top:30px;}
.ficha .left ul li { display:block; height:33px; margin:0 10px 2px;}
.ficha .left ul li a {   font-size: 11px; height: 13px; width: 100%; text-transform: uppercase; color: #000; display: block; text-decoration: none; font-family: 'GothamBold', sans-serif; background: #f0f0f0; padding: 10px;}
.ficha .left ul li a:before { content:""; display:block; float:left; width:33px; height:33px; background:url(../img/sprite.jpg) no-repeat -394px -90px; margin:-10px 10px 0 -10px;}
.ficha .left ul li:nth-of-type(2) a:before { background-position:-428px -90px;}
.ficha .left ul li a:hover { opacity:.8;}

.ficha .right h2 { color:#000; font-family:'GothamBold', sans-serif; font-size:20px; text-transform:uppercase;}
.ficha .right .left { width:100%; margin-top:30px; margin-right:0; float:none;}
.ficha .right .right { width:100%; margin-top:30px; float:none;}
.ficha .right p { color:#646262; font-size:14px; line-height:27px;}
.ficha .right a.link { color:#000; text-transform:uppercase; font-size:13px; font-family:'GothamBold', sans-serif; margin-top:25px; width:100%; display:block;}
.ficha .right a:hover { opacity:.6;}
.ficha .right ul.destacados { border:5px solid #000; padding:35px 30px; margin-top:40px; }
.ficha .right ul.destacados li { list-style:none; margin-bottom:20px;}
.ficha .right ul.destacados li:last-of-type { margin-bottom:0;}
.ficha .right ul.destacados li a { color:#17191e; font-family:'GothamItalic', sans-serif; font-size:16px; background: url(../img/sprite.jpg) no-repeat -955px -93px; display:block; padding-left:25px;}

.ficha .right .fotogaleria { display:block; margin-top:40px; position:relative; text-align:center;}
.ficha .right .fotogaleria img { width:100%;}
.ficha .right .fotogaleria span { position: relative; bottom: 105px;font-family:'GothamItalic', sans-serif; font-size:16px;  background: url(../img/sprite.jpg) no-repeat -911px 15px #fff; padding: 23px 35px 23px 70px; text-decoration: underline;}
.ficha .right .fotogaleria:hover { opacity:.8;}
.ficha .right small  {font-size: 10px;  color: #646262;  text-align: right;  display: block; margin-top: -17px; padding-right: 0;}

.ficha .barra_compartir { margin-top:60px;}


/* COLORES QUE CAMBIAN POR CADA FICHA */
.ficha.ODS1 .right ul.destacados { border-color:#ffde07;}
.ficha.ODS1 .left .numero { background:#ffde07;}

.ficha.ODS2 .right ul.destacados { border-color:#ffde07;}
.ficha.ODS2 .left .numero { background:#ffde07;}

.ficha.ODS3 .right ul.destacados { border-color:#009575;}
.ficha.ODS3 .left .numero { background:#009575;}

.ficha.ODS4 .right ul.destacados { border-color:#d4de14;}
.ficha.ODS4 .left .numero { background:#d4de14;}

.ficha.ODS5 .right ul.destacados { border-color:#e03b08;}
.ficha.ODS5 .left .numero { background:#e03b08;}

.ficha.ODS6 .right ul.destacados { border-color:#21acf0;}
.ficha.ODS6 .left .numero { background:#21acf0;}

.ficha.ODS7 .right ul.destacados { border-color:#01a33c;}
.ficha.ODS7 .left .numero { background:#01a33c;}

.ficha.ODS8 .right ul.destacados { border-color:#01a33c;}
.ficha.ODS8 .left .numero { background:#01a33c;}

.ficha.ODS9 .right ul.destacados { border-color:#01a33c;}
.ficha.ODS9 .left .numero { background:#01a33c;}

.ficha.ODS10 .right ul.destacados { border-color:#01a33c;}
.ficha.ODS10 .left .numero { background:#01a33c;}

.ficha.ODS11 .right ul.destacados { border-color:#01a33c;}
.ficha.ODS11 .left .numero { background:#01a33c;}

.ficha.ODS12 .right ul.destacados { border-color:#21acf0;}
.ficha.ODS12 .left .numero { background:#21acf0;}

.ficha.ODS13 .right ul.destacados { border-color:#21acf0;}
.ficha.ODS13 .left .numero { background:#21acf0;}

.ficha.ODS14 .right ul.destacados { border-color:#21acf0;}
.ficha.ODS14 .left .numero { background:#21acf0;}

.ficha.ODS15 .right ul.destacados { border-color:#21acf0;}
.ficha.ODS15 .left .numero { background:#21acf0;}

.ficha.ODS16 .right ul.destacados { border-color:#0086ab;}
.ficha.ODS16 .left .numero { background:#0086ab;}

.ficha.ODS17 .right ul.destacados { border-color:#028c99;}
.ficha.ODS17 .left .numero { background:#028c99;}

.especial_ODS .creditos {
    display: inline-block;
    float: left;
    font: 12px/17px "Roboto",sans-serif;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 25px;
    text-align: right;
    width: 100%;
}
.especial_ODS .creditos ul {
    margin: 0 auto;
    max-width: 460px;
    width: 100%;
    list-style: none;
}
.especial_ODS .creditos p {
 
    text-align: center;
    text-transform: uppercase;
}
.especial_ODS .creditos ul li {
    line-height: 22px;
    list-style: none;
    text-align: center;
}
.especial_ODS .creditos a {
    color: #6488e3;
    font-family: "GothamBook",sans-serif;
    font-size: 13px;
}
.especial_ODS .creditos .logo_pf {
    background: rgba(0, 0, 0, 0) url("../../logo_pf_creditos.png") no-repeat scroll center center;
    display: inline-block;
    height: 114px;
    text-indent: -999999px;
    width: 203px;
}

