@import url("general.css");

#contenido[abierto]{
	left:-100px;
	opacity:0.3;
}

body[abierto], document[abierto], html[abierto]{
	overflow:hidden;
}

#espacio_menu{
	position:relative;
	height:90px;
}

#seccion[menu]{
	position:fixed;
	z-index:99;
	left:0;
	top:0;
	right:0;
	height:90px;
	background-color:#231f20;
	background-image:url(../img/patron.svg);
	background-position:left center;	
}

#seccion[menu] #logo{
	position:absolute;
	top:7px;
	left:50px;
	padding:10px;
	cursor:pointer;
	/**/
	transition:opacity 0.2s ease-out;
	-moz-transition:opacity 0.2s ease-out;
	-ms-transition:opacity 0.2s ease-out;
	-o-transition:opacity 0.2s ease-out;
	-webkit-transition:opacity 0.2s ease-out;
}

#seccion[menu] #logo:hover{
	opacity:0.5;
}

/******** MENU **********/
#seccion[menu] #bot_menu{
	position:absolute;
	right:50px;
	top:28px;
	width:40px;
	height:40px;
	cursor:pointer;	
}

#seccion[menu] #bot_menu #linea{
	position:absolute;
	left:5px;
	/**/
		
	/**/
	transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out;
	-moz-transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out;
	-ms-transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out;
	-o-transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out;
	-webkit-transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out, top 0.2s ease-in-out, left 0.2s ease-in-out;
}

#seccion[menu] #bot_menu #linea[uno]{
	top:10px;
}

#seccion[menu] #bot_menu[abierto] #linea[uno]
{
	top:18px;
	left:6px;
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}

#seccion[menu] #bot_menu #linea[dos]{
	top:18px;
}

#seccion[menu] #bot_menu[abierto] #linea[dos],
#seccion[menu] #bot_menu:hover #linea[dos]
{
	opacity:0;
}

#seccion[menu] #bot_menu #linea[tres]{
	top:26px;
}

#seccion[menu] #bot_menu[abierto] #linea[tres]
{
	top:18px;
	left:6px;
	transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}

#seccion[menu] #menu{
	position:fixed;
	top:90px;
	right:-300px;
	width:245px;
	bottom:0;
	background-color:#f4eadd;
	padding-right:40px;
	padding-top:40px;
	/**/
	transition:right 0.2s ease-out;
	-moz-transition:right 0.2s ease-out;
	-ms-transition:right 0.2s ease-out;
	-o-transition:right 0.2s ease-out;
	-webkit-transition:right 0.2s ease-out;
}

#seccion[menu] #menu[abierto]{
	right:0;
}

#seccion[menu] #menu a{
	display:block;
	padding:10px;
	font-size:14px;
	color:#1e1e1e;
	text-align:right;
	cursor:pointer;
	font-weight:400;
	text-transform:uppercase;
	text-decoration:none;
}

#seccion[menu] #menu a:hover,
#seccion[menu] #menu a[activo]
{
	font-weight:800;
}

#seccion[menu] #menu #redes{
	position:absolute;
	left:0;
	bottom:45px;
	width:100%;
	height:auto;
	text-align:center;
}


#seccion[menu] #menu #redes a{
	display:inline-table;
	width:auto;
	padding:10px;
	cursor:pointer;
	/**/
	transition:opacity 0.2s ease-out;
	-moz-transition:opacity 0.2s ease-out;
	-ms-transition:opacity 0.2s ease-out;
	-o-transition:opacity 0.2s ease-out;
	-webkit-transition:opacity 0.2s ease-out;
}

#seccion[menu] #menu #redes a:hover{
	opacity:0.5;
}


#seccion[menu] #menu #redes a img{
	width:20px;
	height:auto;
	vertical-align:middle;
}



@media screen and (max-width: 1100px) {
	
}

@media screen and (max-width: 800px) {
	#seccion[menu] #bot_menu:hover #linea[dos]	{
		opacity:1;
	}
	#seccion[menu] #bot_menu[abierto] #linea[dos]{
		opacity:0;
	}
	

}