@import url("resethtml5.css");

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


/*----------------------INSERTAR FUENTE---------------------------------------------------------------*/


@font-face {
    font-family: 'new_press';
    src: url('new_press_eroded_0-webfont.eot');
    src: url('new_press_eroded_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('new_press_eroded_0-webfont.woff') format('woff'),
         url('new_press_eroded_0-webfont.ttf') format('truetype'),
         url('new_press_eroded_0-webfont.svg#new_press') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
	font-family: 'afora';
	src: url('A FOR A.eot');
	src: url('A FOR A.svg') format('svg'),
		 url('A FOR A.woff') format('woff'), 
		 url('A FOR A.ttf') format('truetype');
		 
	font-weight: normal;
	font-style: normal;
}


/*----------------------/INSERTAR FUENTE---------------------------------------------------------------*/



body {
	background: #120909 url(../img/trama_cerveza_sanfrutos.png) ;
}


a{
	color: #f5de9c;
}


/* --------------- CABECERA ----------------------- */

#logo{
	height: 371px;
	width: 208px;
	float:left;
	margin-left: 10px;
	z-index: 200;
}

#logo a{
	height: 371px;
	display: block;
	text-indent: -9999px;
	background: url(../img/banderola_cerveza_sanfrutos.png) no-repeat 0px 0px;
	z-index: 200;
}



/* --------------- /CABECERA ----------------------- */


/* --------------- MENU PRINCIPAL ------------------ */

#navegacion{
	position:absolute;
	top:0px;
	z-index: 100;
	margin-left: -445px;
	left: 50%;
	width: 890px;
	height: 93px;
	background:url(../img/fondo_menu_cerveza_sanfrutos.jpg) no-repeat;
	-webkit-box-shadow:  0px 15px 25px -5px rgba(122, 122, 122, 0.5);
    box-shadow:  0px 15px 25px -10px rgba(0, 0, 0, 0.75);
}

#menu {
	float: right;
	width: 672px;
	overflow: hidden;
	height: 93px;
}

#menu a {
	display: block;
	height: 93px;
	background: url(../img/menu_cerveza_sanfrutos.png) no-repeat 0px 0px;
	text-indent: -9999px;
}

#menu li {
	display: inline;
	float: left;
}


#menu #navquienes a {
	width: 99px;
}
#menu #navquienes a:hover {
	background-position: 0px -93px;
}
#menu #navquienes .active {
	background-position: 0px -93px;
}


#menu #navcervezas a {
	width: 138px;
	background-position: -99px 0px;
}
#menu #navcervezas a:hover {
	background-position: -99px -93px;
}
#menu #navcervezas .active {
	background-position: -99px -93px;
}

#menu #navgaleria a {
	width: 145px;
	background-position: -237px 0px;
}
#menu #navgaleria a:hover {
	background-position: -237px -93px;
}
#menu #navgaleria .active {
	background-position: -237px -93px;
}


#menu #navtienda a {
	width: 113px;
	background-position: -382px 0px;
}
#menu #navtienda a:hover {
	background-position: -382px -93px;
}
#menu #navtienda .active {
	background-position: -382px -93px;
}


#menu #navcontacto a {
	width: 177px;
	background-position: -495px 0px;
}
#menu #navcontacto a:hover {
	background-position: -495px -93px;
}
#menu #navcontacto .active {
	background-position: -495px -93px;
}


/* --------------- /MENU PRINCIPAL ------------------ */

#preindex{
	margin: 0px auto;
	width:400px;
	text-align:center;
	font-size:36px;
	font-family: 'new_press', Arial, Helvetica, sans-serif;
	color: #f5de9c;
}


#container{
	width: 990px;
	margin: 0px auto;
	background: #120909;
	height: 750px;
	color: #f5de9c;
}

.fondo_quienes{
	background: #120909 url(../img/fondo_quienes.jpg) no-repeat bottom center !important;
}

.fondo_contacto{
	background: #120909 url(../img/fondo_contacto.jpg) no-repeat bottom center !important;
}

.fondo_tienda{
	background: #120909 url(../img/fondo_tienda.jpg) no-repeat bottom center !important;
}

.fondo_cervezas{
	height: 850px !important;
	background: #160a0a !important;
}

.fondo_galeria{
	background: #120909 url(../img/fondo_galeria.jpg) no-repeat bottom center !important;
	

}

#boton_tienda{
	position:absolute;
	margin: 360px 0px 0px 67px;
	height:300px;
	width:186px;
}

#contenido{
	position:absolute;
	width: 665px;
	margin: 0px 15px 0px 260px;
	padding: 24px;
	padding-top: 110px;
	font-size:22px;
	text-align:justify;
	font-family: 'Homenaje', Arial, Helvetica, sans-serif;
}

.quienes{
	background: rgba(0,0,0, 0.5) !important;
}

.galeria{
	background: rgba(0,0,0, 0.5) !important;
	text-align:left !important;
}

.galeria img{
	border: 1px solid #333;
}

.galeria img:hover{
	border: 1px solid #f5de9c;
}

#contenido p{
	margin-top: 10px;
}


#contacto{
	float:right;
	width:260px;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size:14px;
	line-height:24px;
}


#contacto span{
	font-family: 'new_press', Arial, Helvetica, sans-serif !important;
	font-size:28px
}

#container #footer{
	position:relative !important;
}

#footer{
	bottom: 0px;
	position:fixed;
	z-index: 100;
	color: #f5de9c;
	width: 875px;
	margin-left:-430px;
	background:rgba(0,0,0,0.5);
	height:35px;
	font-size:24px;	
	left:50%;
	padding:10px 0px 0px 10px;
	font-family: 'new_press', Arial, Helvetica, sans-serif;
	
}

.footer_rel{
	position:relative !important;
}

#footer img{
	margin-bottom: 3px;
}

#footer a{
	text-decoration:none;
	color: #f4dd9b;
}

#footer a:hover{
	text-decoration:underline;
}

#footer #peq{
	font-size:18px !important;
}


#sm{
	float:left;
	width:165px;
}

#sm a, #patroc a{
	display:block;
	width:30px;
	height:30px;
	float:left;
}

a#sm_fb {
	background:url(../img/btn_fb.png);
}

a#sm_tw {
	background:url(../img/btn_tw.png);
}

a#sm_yt {
	background:url(../img/btn_yt.png);
}

a#sm_in {
	background:url(../img/btn_in.png);
}

a#sm_go {
	background:url(../img/btn_go.png);
}

#sm a:hover, #patroc a:hover {
	background-position: 0px -30px;
}

a#patroc_1 {
	background:url(../img/btn_1.png);
}

a#patroc_2 {
	background:url(../img/btn_2.png);
}

a#patroc_3 {
	background:url(../img/btn_3.png);
}

a#patroc_4 {
	background:url(../img/btn_4.png);
}

#patroc, #patroc a{
	float: right !important;
	margin-right:4px;
}

#patroc{
	width: 140px;
}


.link_cerve{
    height: 690px;
    position: absolute;
    background: #000;
    opacity: 0.2;
}

#cerve1{
    width: 153px;
}
#cerve2{
    width: 175px;
	margin-left:153px;
}
#cerve3{
    width: 148px;
	margin-left: 328px;
}
#cerve4{
    width: 174px;
	margin-left: 476px;
}



/*----------------  VENTANAS MODALES-----------------------*/
/* Z-index of #mask must lower than #boxes .window */
#mask {
	position:absolute;
	z-index:9000;
	background-color:#000;
	display:none;
	top: 0px;
	width: 100%;
	left: 0px;
}
   
#boxes .window {
	position:absolute;
	width:100%;
	/* [disabled]height:200px; */
	display:none;
	z-index:9999;
	padding:20px;
}


/* Customize your modal window here, you can add background image too */
#boxes #dialog01 , #boxes #dialog02, #boxes #dialog03, #boxes #dialog04{
	width:1100px;
	text-align:center;
}

/*----------------  /VENTANAS MODALES-----------------------*/