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

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

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

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

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;}

img {
	width:100%;

	}

	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;
		}
	
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;
	}	
	
	.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;
    }
	
	
	
	#secciones{
		margin:0 auto;width:95%;
		height:800px;}
	
	
section#uno{
	
	width:14%;
	float:left;
	display:inline-block;
	background-color:#e5eaf2;
	border-radius:10px;
    margin: 0.5%;
	text-align:center;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	font-size:14px;
	padding: 5px;
	}
	
div#orientacion{
	width:95%;
	display:inline-block;
	background-color:#ffffff;
	border-radius:10px;
	margin-bottom:6px;
	
	/*width:90%;
	float:left;
	display:inline-block;
	background-color:#ffffff;
	border-radius:10px;
	margin:auto 0;
	height:100px;
	
	
	margin:7px;
	margin-bottom:6px;*/
	

	
	}
	div#orientacion p{
	text-align:center;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	font-size:24px;
	
	}
	
div#aprendizaje{
	
	
	width:95%;
	display:inline-block;
	background-color:#ffffff;
	border-radius:10px;
   /* height:40px;
	
	padding-bottom:16px;
	
	margin:7px;*/
	margin-bottom:6px;

	
	}
	
	div#aprendizaje{text-align:center;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	
	font-size:24px;}
	div#trastorno{text-align:center;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	
	font-size:24px;}
	
div#trastorno{
	
		width:95%;
	display:inline-block;
	background-color:#ffffff;
	border-radius:10px;
	margin-bottom:6px;
	/*width:90%;
	float:left;
	display:inline-block;
	background-color:#ffffff;
	border-radius:10px;
	margin:auto 0;
	height:60px;

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

	
.menu_bar {
	display:none;
}

#titulo{font-size:17px;
padding:5px;
	}
	
	
@media (max-width:799px){
	
	#wrapper{width:100%;max-width:799px;
height:1600px;
margin:0 auto;
box-shadow:0px 7px 40px #666;
background-color:#FFF;
padding:0;}
	
	img#imgheader {
	max-width:799px;
	width:100%;
	margin:0;

	}
	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%;}
	
	
section#uno{
	
	width:28%;
	float:left;
	display:inline-block;
	background-color:#e5eaf2;
	border-radius:10px;
	margin:1.3%;
	text-align:center;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	height:620px;
	
	font-size:14px;
	
	}
	
	
	

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

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

	}
	
	section#uno{
	
	width:44%;
	float:left;
	display:inline-block;
	background-color:#e5eaf2;
	border-radius:10px;
	margin:1.3%;
	text-align:center;
	font-family:"Parisienne", Arial, Helvetica, sans-serif;
	height:560px;
	
	font-size:14px;
	
	}
	
	
	

	
	
	footer{
		max-width:468px;
	width:100%;}
	
	
	}