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

body{
	margin:0;
	padding:0;
	background:url(../img/motivo.jpg) repeat}
	a{	text-decoration:none;}
	
#wrapper{max-width:1250px;
	width:100%;
	height:940px;
margin:0 auto;
box-shadow:0px 7px 40px #666;
background-color:#FFF;
padding:0;}

header{padding:0;
margin:0; width: 100%;position: relative;}

#cabecera{
	max-width:1250px;
	width:100%;
	margin:0 auto;
	}

nav{max-width:1250px;
	width:100%;
	height:40px;
	background-color:#768acd;
	margin: 0 auto;
	}

ul{
	/*width:96%;*/
	text-align:center;
	padding-top:8px;}
li{
	float:left;
	display:inline-block;
	text-decoration:none;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	color:#FFF;
	width:16%;

	font-size:22px;
	margin:0;}
	
li a{color:#FFF;
text-decoration:none;}

li.active  a{color:#768acd;
text-decoration:none;}

li.active{width:120px;
		font-family:"Parisienne", Arial, Helvetica, sans-serif;
	font-size:24px;
	background-color:#FFF;
	color:#06C;
	padding:10px;
	padding-top:4px;
	text-align:center;
	border-radius:5px;
		}

img#imgheader {
	width:100%;

	}
	
figure{
		padding:0;
		margin:0;}
		

footer p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.9em;
	color:#FFF;}
	
footer{
	width:100%;
	height:30px;
	background-color:#768acd;
	padding-bottom:15px;
	text-align:center;
	position:fixed;
left:0;
bottom:0;
	}
	
	
	
	
	
section#referencia{
	
	width:45%;
	float:left;
	display:block;
	height:auto;
	margin:2%;
	
	}
	
div#local{
	width:350px;
	background-color:#CEF;
	height:auto;
	margin-bottom:40px;}
	
div#mapa{
	max-width:350px;
	width:100%;
	height:250px;
	margin-top:50px;}
	
	
	div#local img{
	max-width:350px;
	width:100%;
	height:250px;
}
	
	
		
		

	
#contacto{
	
	padding:14px;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	color:#666;
	font-size:26px;
	margin-left:10px;}
	
	
	
#principal{
	padding-top:40px;
	text-align:center;
	font-family:"Parisienne",Arial, Helvetica, sans-serif;
	color:#768acd;
	font-size:24px;}
		
		.menu_bar {
	display:none;
}
	
	#nav-mobile{
    display: none;
    background: url(../menu.png) no-repeat center center;
    width: 60px;
    height: 60px;
	padding-left:10px;
   
    
}

 #nav-mobile.nav-active{
        opacity: 1;
    }
	
	
@media (max-width:799px){
	
	#wrapper{width:100%;max-width:799px;
height:1400px;
margin:0 auto;
box-shadow:0px 7px 40px #666;
background-color:#FFF;
padding:0;}
	
	img#imgheader {
	max-width:799px;
	width:100%;
	margin:0;

	}
	
	section#referencia{
	
	width:45%;
	float:left;
	display:block;
	height:auto;
	margin:2%;
	
	
	}
	
	div#mapa{
	width:100%;
	max-width:300px;
	height:250px;}
	
	div#local{
		width:100%;
	max-width:300px;
	background-color:#CEF;
	height:auto;
	margin-bottom:40px;}
	
	nav{
		    height: 60px;}
	
	#menu li.active {
                display: block;
				padding:0px;
	padding-top:0px;
                color: #768acd; background: #fff;
                text-decoration: none;
                height: 60px;
                line-height: 60px;
                /*padding: 0 26px;*/
            }
			
			
	
	/*#menu{
        width: 100%;
        float: none;
        padding-top: 60px;
    }*/
	
	#menu{ float: right;}
 
    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
    }
 
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
            display: block;
            float: left;
        	
            text-align: center;
        }
 
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                /*color: #fff;*/
                text-decoration: none;
                height: 60px;
                line-height: 60px;
                padding: 0 26px;
            }
                #menu li a:hover{
                    background: #fff;
                    color: #768acd;
                }
 
 #nav-mobile{ display: block; }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background: #768acd;
                border-bottom: 1px solid #282b30;
                float: none;
				    width: 100%;
            }
                /* Quitamos el borde del ultimo item del menú */
                #menu li:last-child{ border-bottom: 0;}
 
                #menu li a{
                    padding: 15px 0;
                    height: auto;
                    line-height: normal;
                }
                #menu li a:hover{background:#2a2d33}
 
        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            transition: max-height .4s;
        }
	
	
	
	footer{
		max-width:799px;
	width:100%;}

	
	
	}
	
	
@media (max-width:468px){
	
	#wrapper{width:100%;max-width:468px;
height:1155px;
margin:0 auto;
box-shadow:0px 7px 40px #666;
background-color:#FFF;
padding:0;}

img#imgheader {
	max-width:468px;
	width:100%;
	margin:0;

	}
	
	section#referencia{
	max-width:468px;
	width:100%;
	float:left;
	display:block;
	height:auto;
	margin:auto 0;
	
	
	
	}
	
		div#local{
			max-width:468px;
	
	height:auto;
	margin-bottom:60px;
	width:100%;
margin:0 auto;
}
	div#mapa{
	width:100%;
margin:0 auto;

	max-width:468px;
	height:250px;}
	
	div#local img{
	max-width:468px;
	width:100%;
	}
	
	
	footer{
		max-width:468px;
	width:100%;}
	

	
	}