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

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

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;
margin-top:40px;
	}
	
	
	
	
	
section#referencia{
	
	width:45%;
	float:left;
	display:block;
	height:auto;
	margin:2%;
	
	
	}
	
div#cuadro{
	width:100%;
	background-color:#CEF;
	/* height:100px; */
	margin-left:10px;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
	padding-top:01px;
	padding-bottom: 10px;
	font-size:23px;
	margin-top:20px;
	}
	
div#titulo{
	width:100%;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
    font-size:22px;

	margin-left:12px;}
	
	
	
	

#principal{
	padding-top:40px;
	text-align:center;
	font-family:"Parisienne",Arial, Helvetica, sans-serif;
	color:#768acd;
	font-size:24px;}
	

	
 #ley{
	 margin:0 auto;
	 width:90%;
	 padding-top:40px;
	 clear:both;
	 margin-top:40px;
	 font-size:20px;}
	
	.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:1700px;
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%;
	
	
	}
	 #cuadro{
		 height:120px;}
		 
		 div#cuadro{
	
	padding-left:10px;
	padding-right:10px;
	padding-top:1px;
	padding-bottom:75px;
	
	
	}
	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%;}
	
	div#cuadro{
	padding-bottom: 100px;
	font-size:20px;
	}
	
	
	}
	
	
@media (max-width:468px){
	
	#wrapper{width:100%;max-width:468px;
height:2300px;
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{
	
	width:90%;
	float:left;
	display:block;
	height:auto;
	margin:auto 0;
	padding-left:2px;
	
	
	}
	
	
	
	#cuadro{
		 height:160px;
		 font-size:15px}
	
	
	footer{
		max-width:468px;
	width:100%;}
	
	div#cuadro{
	padding-bottom: 20px;
	font-size:22px;
	}
	
	
	}