@font-face {
    font-family: 'prelobold';
    src: url('../fonts/prelo-bold-webfont.eot');
    src: url('../fonts/prelo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelo-bold-webfont.woff') format('woff'),
         url('../fonts/prelo-bold-webfont.ttf') format('truetype'),
         url('../fonts/prelo-bold-webfont.svg#prelobold') format('svg');
}
@font-face {
    font-family: 'prelosemibold';
    src: url('../fonts/prelo-semibold-webfont.eot');
    src: url('../fonts/fonts/prelo-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelo-semibold-webfont.woff') format('woff'),
         url('../fonts/prelo-semibold-webfont.ttf') format('truetype'),
         url('../fonts/prelo-semibold-webfont.svg#prelosemibold') format('svg');
}
@font-face {
    font-family: 'prelomedium';
    src: url('../fonts/prelo-medium-webfont.eot');
    src: url('../fonts/prelo-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelo-medium-webfont.woff') format('woff'),
         url('../fonts/prelo-medium-webfont.ttf') format('truetype'),
         url('../fonts/prelo-medium-webfont.svg#prelomedium') format('svg');
}
@font-face {
    font-family: 'prelobook';
    src: url('../fonts/prelo-book-webfont.eot');
    src: url('../fonts/prelo-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelo-book-webfont.woff') format('woff'),
         url('../fonts/prelo-book-webfont.ttf') format('truetype'),
         url('../fonts/prelo-book-webfont.svg#prelobook') format('svg');
}

body{
	background: url(../img/bg-head.jpg) no-repeat center top #fff;
}
a{
	color:#362f2d;
	text-decoration: none;
}
.clear{
	clear: both;
}
#wrapper{
	margin: 0 auto;
	width: 1024px;
}
	.head{		
		color: #362f2d;
		padding: 145px 0 0 5px;
		position: relative;
		width: 975px;
	}
		.head img{
			position: absolute;
			right: 0;
			top: 145px;
		}
		.ctn-share{
			height: 24px;
			position: absolute;
			right:0;
			top: 190px;
			width: 110px;
		}
			#social{
        		cursor: pointer;
    		}
		        #social ul {
		            list-style-type: none;
		            list-style-image: none;
		            margin: 0;
		            padding: 0;
		            text-align: center;            
		        }
		            #social li a#facebook {
		                background-position: 0 -120px;
		            }
		                #social li a#facebook:hover {
		                    background-position: 0 -96px;
		                }
		            #social li a#twitter {
		                background-position: -30px -24px;
		            }
		                #social li a#twitter:hover {
		                    background-position: -30px 0;
		                }
		            #social li a#google {
		                background-position: -63px -72px;
		            }
		                #social li a#google:hover {
		                    background-position: -63px -48px;
		                }
		            #social li{
		              display: inline-block;
		              margin: 0;
		              *display: inline;
		              zoom:1;
		            }
		              #social li a {
		                  background-image: url(../img/share-icons.png);
		                  width: 32px;
		                  height: 24px;
		                  display: block;
		                  /*margin-bottom: 1px;*/
		                  text-indent: -9999px;
		                  border: 0;
		              }
		.head h1{
			font: 50px/45px 'prelobold';
			margin: 0;
			padding: 0;
			text-transform: uppercase;
		}
		.head h5 {
			margin: 5px 0;
			padding: 0;
		}
	.ctn-wrapper{
		/*height: 882px;*/
		margin: 0 auto;	
		padding: 0 0 10px 0;	
		/*width: 1040px;*/
	}
		.ctn-scroll{
			/*overflow: scroll;*/
		}
		.ctn-box{
			/*height: 865px;*/
			margin: 0 auto;
			padding: 0 0 0 5px;
			width: 100%;
		}
			.box-miniatura{
				float: left;
				height: 159px;
				overflow: hidden;
				position: relative;
				text-align: center;
				width:325px;
			}
				.box-miniatura:hover .box-info{
					right: 0;
				}
				.bg-miniatura{
					background: url(../img/museos01.jpg) no-repeat 0 0;
					float: left;
					height: 159px;				
					width: 169px;
				}
					.mu02{
						background-position: -170px 0;
					}
					.mu03{
						background-position: -340px 0;
					}
					.mu04{
						background-position: -509px 0;
					}
					.mu05{
						background-position: -678px 0;
					}
					.mu06{
						background-position: -848px 0;
					}
					.museos02{
						background: url(../img/museos02.jpg) no-repeat 0 0;
					}
					.mu08{
						background-position: -170px 0;
					}
					.mu09{
						background-position: -340px 0;
					}
					.mu10{
						background-position: -509px 0;
					}
					.mu11{
						background-position: -678px 0;
					}
					.mu12{
						background-position: -848px 0;
					}
					.museos03{
						background: url(../img/museos03.jpg) no-repeat 0 0;
					}
					.mu14{
						background-position: -170px 0;
					}
					.mu15{
						background-position: -340px 0;
					}
					.mu16{
						background-position: -509px 0;
					}
					.mu17{
						background-position: -678px 0;
					}
					.mu18{
						background-position: -848px 0;
					}
					.museos04{
						background: url(../img/museos04.jpg) no-repeat 0 0;
					}
					.mu20{
						background-position: -170px 0;
					}
					.mu21{
						background-position: -340px 0;
					}
					.mu22{
						background-position: -509px 0;
					}
					.mu23{
						background-position: -678px 0;
					}
					.mu24{
						background-position: -848px 0;
					}
					.museos05{
						background: url(../img/museos05.jpg) no-repeat 0 0;
					}
					.mu26{
						background-position: -170px 0;
					}
					.mu27{
						background-position: -340px 0;
					}
					.mu28{
						background-position: -509px 0;
					}
					.mu29{
						background-position: -678px 0;
					}
					.mu30{
						background-position: -848px 0;
					}
					.museos06{
						background: url(../img/museos06.jpg) no-repeat 0 0;
					}
					.mu32{
						background-position: -170px 0;
					}
					.mu33{
						background-position: -340px 0;
					}
					.mu34{
						background-position: -509px 0;
					}
					.mu35{
						background-position: -678px 0;
					}
					.mu36{
						background-position: -848px 0;
					}
					.museos07{
						background: url(../img/museos07.jpg) no-repeat 0 0;
					}
					.mu38{
						background-position: -170px 0;
					}
					.mu39{
						background-position: -340px 0;
					}
					.mu40{
						background-position: -509px 0;
					}
					.mu41{
						background-position: -678px 0;
					}
					.mu42{
						background-position: -848px 0;
					}
					.museos08{
						background: url(../img/museos08.jpg) no-repeat 0 0;
					}
					.mu44{
						background-position: -170px 0;
					}
					.mu45{
						background-position: -340px 0;
					}
					.right{
						float: right;
						width: 156px;
					}
				.box-info{
					background:#448ccb;
					cursor: pointer;
					height: 159px;				
					position: absolute;
					right:-169px;
					width: 325px;

					-webkit-transition:all 0.5s ease-out;  /* Chrome y Safari */
					-o-transition:all 0.5s ease-out;  /* Opera */
					-moz-transition:all 0.5s ease-out;  /* Mozilla Firefox */
					-ms-transition:all 0.5s ease-out;   /* Internet Explorer */
	  				transition:all 0.5s ease-out;  /* W3C */
				}
					.left{
						right: 156px;
					}
						.left > span{
							margin: 0 0 0 163px !important;
						}
						.left > p{
							margin: 5px 0 0 160px !important;
						}
						.left > .flecha{
							right: 235px !important;
						}
					.morado{
						background: #a864a8;
					}
					.gris{
						background: #7d7d7d;
					}
					.verde{
						background: #8dc63f;
					}
					.naranja{
						background: #f26c4f;
					}
					.celeste{
						background: #7accc8;
					}
					.verde02{
						background: #00a99d;
					}
					.azul{
						background: #005b7f;
					}
					.morado02{
						background: #605ca8;
					}
					.box-ctn{
						margin: 0 0 0 0;
						position: absolute;
					}
					.p-r{
						margin: 0 0 0 165px;
					}
						.box-info > .box-ctn > p{
							color: #fff;
							display: table-cell;
							font: 15px/15px 'prelobook';
							height: 156px;
							margin: 5px 0 0 0;
							vertical-align: middle;
							width: 156px;
						}
						.box-info > .box-ctn > p > span{
							color: #fff;
							display: block;
							font: 16px/16px 'prelobold';
							margin: 2px :;
							text-transform:uppercase;
							width: 156px;						
						}					
					.box-info > span.flecha{
						background: url(../img/flecha.png);
						height: 44px;
						position: absolute;
						right: 35px;
						top: 55px;
						width: 42px;			
					}
					.box-info:hover{
						padding: 0 0 0 15px;
						right:0;
						width: 319px;
					}
						.left:hover{
							padding: 0 10px 0 0;
						}
					#show{
						background: #e0e0e0;
						position: absolute;
						width: 1015px;
						z-index: 500;
						margin: 0;
					}
						.btn-cerrar{
							background: #f26c4f;
							color: #fff;
							cursor: pointer;
							font-size: 30px;
							padding: 5px 15px;
							position: absolute;
							right: -45px;
							top: 0;
							text-align: center;							
						}
						.slider { 
							float: left;
							height: 370px;						
							position:relative; 
							width: 495px;
							*zoom:1
						}
						.slider:before, .slider:after { display: table; content: ""; line-height: 0 }
						.slider:after { clear: both }
						.slider .ui-content { position: relative; float: left; width: 100%; height: auto; overflow: hidden; }
						.slider .ui-content .ui-item img { /*display: block;*/ vertical-align: middle; }
						.slider .ui-inner { width: 100%; float: left; margin-left: 0; }
						.slider .ui-item { float: left; position: relative; width: 100%; }
						.slider div.ui-arrows { 
							margin: 0; 
							list-style: none; 
							position: absolute;
							top: 160px;
						}						
								.ui-prev{
									background: url(../img/sprites.png) no-repeat 0 -100px;
									display: block;
									height: 57px;
									left: 10px;
									position: absolute;
									text-indent: -9999px;
									width: 30px;
								}
								.ui-next{
									background: url(../img/sprites.png) no-repeat -40px -100px;
									display: block;
									height: 57px;
									left: 465px;
									position: absolute;
									text-indent: -9999px;
									width: 30px;
								}
						.info{
							color: #362f2d;
							float: left;
							height: 350px;
							overflow-y:scroll;
							padding: 10px;
							width: 500px;
						}
							.info > h2{							
								font: 22px/22px 'prelosemibold';
								margin: 5px 0 0 0;
							}
							.info > h3{
								font:18px/18px 'prelomedium';
								margin: 5px 0;
							}
							.info > p{
								font:16px/18px 'prelobook';
								margin: 5px 0;
							}
								.info > ul {
									list-style-type: none;
									padding: 0
								}
									.info > ul > li {
										font:16px/16px 'prelobook';
									}
									.info > ul > li > span{
										font:16px/16px 'prelobold';
									}
		.box-ancla{
			background: #c2c2c2;
			float: left;
			height: 70px;
			width: 100%;
		}
			.flecha-bottom{
				background: url(../img/sprites.png) 0 -59px;
				height: 39px;
				margin: 15px auto;
				width: 113px;
			}
.main{
	height:auto;
	width: 100%;
}
	.main > .ui-content > .ui-inner > .ui-arrows{
		right: 15px;
		top: 350px;
	}
		.main > .ui-content > .ui-arrows > .ui-prev{

		}
		.main > .ui-content > .ui-arrows > .ui-next{

		}
	.slider div.ui-arrows > ul { 
		padding: 0;
		text-align: center;
	}
		.slider div.ui-arrows > ul > li{ 
			background: url(../img/sprites.png) no-repeat -50px 0;
			cursor: pointer;
			display: block;
			height: 19px;
			margin: 10px 5px;
			text-indent: -99999px;
			width: 18px;
			*zoom:1;
		}
			.ui-active{
				background: url(../img/sprites.png) no-repeat -68px 0 !important;
			}
iframe{
	margin:5px 0;
	width: 1015px;
}
@-moz-document url-prefix() {
    .main{
		width: 101%;
	}
}
/* IE8 (via Keith Clarke) */
 
@media \0screen { 
	.main{
		width: 101%;
	}
}

/* IE8/9 (maybe IE10 final) */
 
@media screen\0 { 
	.main{
		width: 101%;
	}
}