*{ margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; } body{ color:#FFF; background-color:#E2EED6; font-family:futura, Rubik, "sans-serif"; } header{ display:flex; flex-wrap:wrap; background-color: #06A7A7; position:fixed; width:100%; height:56px; left:0px; top:0px; align-items: center; } .logo-marco{ display:flex; float:left; width:25%; height:54px; justify-content: center; align-items: center; } .logo-marco img{ width:44px; height:50px; position:relative; } .buttonOn { float:right; background-color:#91A628; width:60px; height:100%; font-size: 3em; border-radius:3px; } nav{ display: flex; flex-wrap:wrap; float: none; width:75%; height:auto; margin-right:0px; font-family:futura, Rubik, "sans-serif"; font-size: 0.813em; font-weight: bold; align-items:center; justify-content:space-around; } header nav input{ display: block; } .buttonOff { clear:both; width: 30px; height: 30px; margin-top:130px; background-color: #91A628; border: none; color:#FFF; padding: 0.4em 0.7em; text-align:center; outline:none; font-size: 1.2em; border-radius: 3px; margin-top:0px; margin-right:-33px; } header nav > ul,header nav > ol{ display: flex; flex-wrap:wrap; width:100%; height: auto; align-items:flex-start; list-style-type: none; } .nav li{ /*margin-left: 3.125%; margin-right: 3.125%;*/ } .nav > li { background-color: #06A7A7; float:left; } .nav li a { text-align: center; text-decoration: none; color:#FFF; display:block; padding: 0.75em; } .nav li a:link{background-color: #06A7A7;} .nav li a:visited{background-color: #91A628;} .nav li a:hover:not {background-color: #5B2F16;} .nav li a:active:focus {background-color: #A5C11A;} .nav li ul{ display:none; position:absolute; width:100%; margin:0; right:0px; } .nav li ul li,.nav li ul li a { min-width: 120px; background-color: #06A7A7; } .nav li:hover > ul{ display:inline-flex; width:50%; padding-top:11px; background-color: #06A7A7; right:80px; } .nav li:active > ul{ display:inline-flex; width:100%; padding-top:11px; background-color: #AEE9E9; } header .user_img { width:48.75%; height: 100%; float: none; text-align:center; display:block; } header .user_img > ul{ width: 100%; height: 100%; list-style: none; padding: 0; margin-top:0px; float:left; } header .user_img ul > li{ height: 100%; width: 30%; float:left; text-align:left; padding: 10px; } header .user_img ul > li p{ color:#06A7A7; float:left; font-family:futura, Rubik, "sans-serif"; font-weight: 700; padding: 30%; } header .user_img ul li figure{ width: 100%; height: 100%; } header .user_img ul li figure img{ width: auto; height: 100%; float:right; } header .user_img ul li ul{ display:none; min-width:320px; position:relative; left:0px; top:0px; } header .user_img ul li:hover > ul { display:block; list-style: none; } header .user_img ul li ul{ display:none; } header .user_img ul li ul li { display:block; float:none; width:100%; height:30px; } header .user_img ul li a{ line-height: 30px; background-color:#FFF; text-decoration: none; color:#06A7A7; padding:0px 10px; display:block; width:100%; height:30px; font-family: 'Poppins','Gill Sans MT', sans-serif; font-weight: 700; } header .user_img ul li a:hover { color:#06A7A7; } header .user_img ul li a:hover:not(.active) {background-color:#FFF;} header .user_img ul li a:active:focus(.active) {background-color: #06A7A7;} .spacing-top{ margin-top:130px; } section{ width:100%; max-width:500px; margin:0 auto; } .initial{ margin-top: 56px; } .present{ display:flex; flex-wrap:wrap; flex-direction:row; align-items:flex-end; justify-content:center; width:320px; max-height:400px; float:none; color:#1a6dd9; margin-top:20px; margin:0 auto; font-family:futura, Rubik, "sans-serif"; font-size:0.813em; letter-spacing:0.04em; } .colum-1{ display:flex; flex-wrap:wrap; flex-direction: column-reverse; align-items:flex-end; width:50%; height:314px; padding:0% 3.125%; overflow:hidden; } .colum-1 div h1{ margin-top:0px; max-width:140px; position:inherit; font-family:futura, Rubik, "sans-serif"; font-weight:700; } .colum-1 div p{ position:inherit; max-width:140px; } .phot_fig img{ width:100%; } .phot_fig{ align-items:flex-start; display:flex; flex-wrap:wrap; float:none; width:140px; } .colum-2{ width:50%; padding:0% 3.125%; } .colum-2 p{ max-width:140px; } article{ display:flex; height:auto; margin:10px 0px 10px 0px; width:100%; } .prog-enl,.Aud-enl,.dis-enl{ flex-wrap:wrap; width:100%; height:150px; margin:20 auto; float:none; border-radius:20.63px; max-width:480px; align-items: center; justify-content: space-around; } .prog-enl{ background-color:#691f17; flex-direction: row-reverse; } .Aud-enl{ background-color:#1a6dd9; flex-direction: row; } .dis-enl{ background-color:#b0c74e; flex-direction: row-reverse; } .prog-enl div, .Aud-enl div,.dis-enl div{ display: inline-flex; flex-wrap:wrap; width:40.75%; padding: 0.5em 1em; font-size:0.75em; text-align:left; float:none; } .prog-enl div p, .Aud-enl div p,.dis-enl div p{ padding-top:10px; font-weight: 100; } .Prog_fig{ display:flex; flex-wrap:wrap; width:45%; max-height:120px; } .Prog_fig img,.Prog_fig video{ width:100%; padding: 0.5em 0em; } .cont{ clear:both; height: 150px; z-index: 2; } .contact{ width:100%; height:180px; float:none; margin-top:0px; margin-bottom:8px; background-color: #06A7A7; justify-content: center; align-items:center; border-radius:20.63px; padding:1em; max-width:480px; z-index:2; } .contact h2{ font-weight:bold; font-size:2.3em; padding:0.5em; } .contact p{ font-size:1.063em; } form{ float:none; background-color:#A5C11A; /* Sólo para centrar el formulario a la página */ margin-top:8px; margin: 0 auto; width: 300px; height:452px; /* Para ver el borde del formulario */ padding: 0.2em; border: 1px solid #CCC; border-radius: 1em; text-align:center; } form input{ margin-top:0.4em; border-radius:10px; display:block; } form input + input { margin-top:0.2em; border-radius:6%; border-radius:10px; } input, textarea { margin:0 auto; padding: 0.5em; border-radius:10%; /* Para asegurarse de que todos los campos de texto tienen las mismas propiedades de fuente Por defecto, las areas de texto tienen una fuente con monospace */ font: 1em futura; /* Para darle el mismo tamaño a todos los campos de texto */ width: 280px; /* Para armonizar el look&feel del borde en los campos de texto */ border: 1px solid #7C9114; } input{ height:40px; border-radius:10%; } textarea{ margin-top:0.2em; border-radius:5%; /* Para alinear campos de texto multilínea con sus labels */ vertical-align: top; /* Para dar suficiente espacio para escribir texto */ height:200px; /* Para permitir a los usuarios cambiar el tamaño de cualquier textarea verticalmente No funciona en todos los navegadores */ resize: vertical; } input:focus, textarea:focus{ /* Para dar un pequeño destaque en elementos activos*/ border: 2px solid #5B2F16; } button{ /* Para posicionar los botones a la misma posición que los campos de texto */ padding:0.05em; /* mismo tamaño a todos los elementos label */ margin:10px auto; width:140px; height:25px; background-color:#5B2F16; text-align:center; color:#FFF; border-radius:10px; } input[type="submit"]{ /* Este margen extra representa aproximadamente el mismo espacio que el espacio entre los labels y sus campos de texto */ margin:10px auto; width:140px; height:25px; background-color:#5B2F16; text-align:center; padding:0.05em; color:#FFF; border-radius:10px; } input[type="reset"]{ /* Este margen extra representa aproximadamente el mismo espacio que el espacio entre los labels y sus campos de texto */ margin:10px auto; width:140px; height:25px; text-align:center; padding:0.05em; color:#06A7A7; border-radius:10px; } .redes{ width:100%; height:84px; float:none; margin-top:16px; } .redes figure{ display:inline-block; width:16.75%; height:100px; margin-left: 3.125%; margin-right: 3.125%; overflow:hidden; } .redes figure a{ } .redes figure a img{ overflow:hidden; width:100%; } footer{ background-color: #06A7A7; } footer p{ font-family:caslon; font-size:0.813em; } @media screen and (min-width:640px) { nav{ display:flex; width:240px; position:absolute; right:70px; } .nav li ul{ right:-75px; } .nav li ul li,.nav li ul li a { margin-top:0px; } .nav li:hover > ul{ display:block; } .nav li:active > ul{ display:block; } section{ width:100%; max-width:none; margin:0px; } .initial{ display:flex; flex-wrap:nowrap; width:160px; height:641px; padding:0.5em; float:right; margin-left:0.5625%; } .present{ float:right; font-size:0.75em; flex-direction:column; } .colum-1{ padding:0% 4.025%; } .colum-2{ margin-top:20px; } .prog-enl,.dis-enl,.Aud-enl{ width:34.75%; height:300px; min-height:none; max-height: none; padding:0em 0em; } .prog-enl{ margin-top:67.7px; float:right; margin-right:0%; } .Aud-enl{ margin-top:198.11px; float:left; margin-left:1.5625%; } .dis-enl{ float:right; margin-top:11.75px; } .prog-enl div,.Aud-enl div,.dis-enl div{ width:100%; padding: 0.1em 1em; text-align:left; font-size:0.875em; margin-top:10px; } .prog-enl div p,.Aud-enl div p,.dis-enl div p{ margin-top:-5px; } .Prog_fig{ display:block; float:none; width:100%; text-align:center; } .Prog_fig img,.Prog_fig video{ margin-top:5px; overflow:hidden; width:100%; padding:0em 0em; } .contact{ width:50%; float:left; margin:17px 0px 0px 130px; text-align: center; background-color: #06A7A7; } .contact h2,.contact p{ margin-left:3.125%; } form{ width:46.875%; float:right; margin-top:17px; font-size:1.063em; } input, textarea { width: 95%; } button { width:50%; height:auto; } .redes{ display:flex; flex-wrap:wrap; width:50%; height:auto; float:left; justify-content:space-around; margin-top:80px; border-color:red; } .redes figure{ display:inline-flex; width:40%; max-width:auto; height:auto; margin-top:17px; } .redes figure a img{ overflow:auto; width:100%; height:100%; } footer{ width:100%; float:right; margin-top:0px; } footer p{ font-family:futura, Rubik, "sans-serif"; font-size:0.723em; text-align:center; } } @media screen and (min-width:960px) { nav{ display:flex; width:240px; position:absolute; right:80px; } .nav li ul{ right:-75px; } .nav li ul li,.nav li ul li a { margin-top:0px; } .nav li:hover > ul{ display:block; background-color:transparent; } .nav li:active > ul{ display:block; background-color:transparent; } section{ width:100%; max-width:none; margin:0; } .initial{ display:flex; flex-wrap:nowrap; width:33.33333333%; height:320px; float:right; margin-bottom:10px; margin-right:1.042%; } .prog-enl,.Aud-enl,.dis-enl{ width:30%; height:360px; } .prog-enl{ float:right; margin-top:74px; margin-right:1%; } .Aud-enl{ margin-top:161px; float:right; margin-right:2%; } .dis-enl{ margin-top:-67px; margin-left:34.725%; float:left; } .prog-enl div,.Aud-enl div,.dis-enl div{ width:100%; padding: 0.1em 1em; text-align:left; font-size:1.18em; font-weight: 100; margin-top:30px; } .prog-enl div p,.Aud-enl div p,.dis-enl div p{ margin-top:15px; } .Prog_fig{ display:block; float:none; width:100%; text-align:center; } .Prog_fig img,.Prog_fig video{ margin-top:5px; overflow:hidden; width:100%; max-width:270px; } .contact{ width:32%; height:180px; float:right; margin-top:-555px; margin-right:10px; } form{ width:32%; float:right; margin-right:1.08333%; margin-bottom:10px; } .redes{ padding:30px; width:60%; margin:50px 0 0 4% ; float:left; height: 100%; max-height:auto; } .redes figure{ display:inline-flex; width:17%; max-width:auto; height:auto; margin-top:17px; } .redes figure a img{ overflow:auto; width:100%; height:100%; } footer{ width:100%; float:right; margin-top:0px; } footer p{ font-family:futura, Rubik, "sans-serif"; font-size:0.75em; text-align:center; } } @media screen and (min-width:1366px){ nav{ display:flex; width:240px; position:absolute; right:80px; } .nav li ul{ right:-75px; } .nav li ul li,.nav li ul li a { margin-top:0px; } .nav li:hover > ul{ display:block; background-color:transparent; } .nav li:active > ul{ display:block; background-color:transparent; } section{ width:100%; max-width:none; margin:0; } .initial{ display:flex; flex-wrap:nowrap; width:25%; height:300px; float:right; margin-bottom:10px; margin-right:0%; border:2px solid #00F; } .present{ float:right; font-size:0.75em; flex-direction:row; } .colum-1{ flex-direction: row; align-items:flex-start; height:50%; padding:0% 3.125%; } .colum-2{ margin-top:20px; height:260px; } .phot_fig{ } .colum-2{ margin-top:20px; height:280px; } .prog-enl,.Aud-enl,.dis-enl{ width:21.962%; height:298px; float:left; } .prog-enl{ margin-top:62.96px; margin-left:26.519%; } .Aud-enl{ margin-top:208.17px; margin-left:-46.962%; } .dis-enl{ margin-top:394.68px; margin-left:-21.962%; } .prog-enl div,.Aud-enl div,.dis-enl div{ width:100%; padding: 0.1em 1em; text-align:left; font-size:1.063em; margin-top:10px; } .prog-enl div p,.Aud-enl div p,.dis-enl div p{ margin-top:-5px; } .Prog_fig{ display:block; float:none; width:100%; text-align:center; } .Prog_fig img,.Prog_fig video{ margin-top:5px; overflow:hidden; width:100%; max-width:270px; } .contact{ width:25%; height:180.25px; float:left; margin-top:2.96px; margin-left:1.519%; } .contact h2,.contact p{ margin-left:3.125%; } form{ width:25%; float:right; margin-top:5px; margin-right:-1.519%; font-size:1.063em; } input, textarea { width: 95%; } button { width:50%; height:auto; } .redes{ width:25%; height:auto; float:right; margin-right:-48.481%; margin-top:120px; } .redes figure{ display:inline-block; width:43.75%; height:auto; margin-left: 1.5625%; margin-right: 1.5625%; overflow:auto; } .redes figure a img{ overflow:hidden; width:100%; max-width:180px; } footer{ width:100%; float:right; margin-top:10px; } footer p{ font-family:futura, Rubik, "sans-serif"; font-size:0.75em; text-align:center; } } @media screen and (min-width:1800px){ .present{ width:50%; max-height:auto; } .contact{ margin-top:200px; margin-left:1.519%; width:50%; } form{ width:50%; } }