header{
        background-color: white;
    background-size: 100% 15%;
  font-family: Helvetica;
  width: 100%;
    height: 15%;
text-align: center;
    z-index: 100;
    position: absolute;
top: 0;
}
body{
      font-family: Helvetica;
  margin: 0 auto;
    width: 100%;
    height: 100%;
  overflow-x: hidden;}
.container {  display: block;
    background-image:  url('manoej.png');
    background-repeat:no-repeat;
  position: relative;
  text-align: center;
    z-index: 10000;
    background-size:100% 100%;
    width: 100%;
        height: 650px;
margin-top: 10%;
animation: container 2s;
transform: translateX(-10%);
opacity: 0.5;
transition:1s;
}
.leftl{
      position: absolute;
  top: 1%;
  left: 5%;
animation: container 2s;
    
}
.rightf{
position: absolute;
  top: 45%;
  left: 80%;
width: 4%;
 height: 4%;
animation: container 2s;
    
}
.righti{
position: absolute;
  top: 45%;
  left: 85%;
 width: 4%;
 height: 4%;
animation: container 2s;
}
.rightw{
    position: absolute;
  top: 45%;
    left: 90%;  
animation: container 2s;
}
.centeredm {
  position: relative;
  top: 40%;
  left: 10%;
}
.centered {
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    font-size: 500%;
    color: white;
}
*{
  margin: 0;
  padding: 0;

}
h1{
     color: white;
    z-index: 10;
transform: translateX(10%);
opacity: 0.5;
transition:1s;
}
ul{
  list-style: none;
    width: 100%;
}
#menu li>a{
  background-color: #c59f53;
    color:#ffffff;
  padding: 10%;
  display: block;
  text-decoration: none;
    height: inherit;
    z-index: auto;
    height: inherit;
}
#menu li>a:hover{
  color: #ffffff;
  background-color: #4bbddf;
    z-index: 20
}
#menu>li{
  float: left;
  text-align:center;
        height: 25px;
    width: 25%;
}
.formulario {
    background-color: #CCCCCC;
    border: 1px solid #AAAAAA;
    margin: 2em auto;
    width: 75%;
}
.campo {
    margin: 0.5em 1.5em;
    padding: 0.5em 0;
}
textarea {
    margin: 2em auto;
    padding: 0.5em 0;
    width: 50%;
    resize: none;
    box-sizing: border-box;
    background-color: #EEEEEE;
    border: 1px solid #AAAAAA;
}

.campo label {
    display: block;
}

.campo .en-linea {
    display: inline-block;
}

.campo .en-linea.izquierdo {
    margin-right: 2em;
}

.botones {
    text-align: center;
}


.formulario .botones {
    background-color: inherit;
    margin: 0;
    padding: 1em 1.5em;
}

button,input[type=submit] {
    background-color: #00AAEE;
    border: 1px solid #0099DD;
    color: #FFFFFF;
    font-size: 1em;
    font-weight: bold;
    padding: 0.5em 1em;
}

input[type=submit]:hover,
input[type=submit]:focus {
    background-color: #33CCFF;
}

input[type=submit]:active {
    background-color: #0077BB;
    border: 1px solid #0066AA;
    color: #DDDDDD;
}

input[type=submit]:disabled {
    opacity: 0.5;
}
#navegador li { margin: 0px 5px; padding: 0.1em 1em 0.5em 1em; 
           background-color: #9933cc; width: 12%;float: left;
           list-style-type: none; position: relative;  }
.encabezado {
    margin: 0;
    padding: 1em 1em;
    text-align: center;
}
.navbar {
  overflow: hidden;
  background-color: #c59f53;
    width: 80%;
    border-radius: 5px;
}
.subnav {
  float: left;
  overflow: hidden;
        width: 33.33333%;
}

.subnav .subnavbtn {
  font-size: 120%;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
        width: 100%;
    border-radius: 5px;
}

.subnav:hover {
  background-color: #4bbddf;
height:inherit;
}

.subnav-content {
  display: none;
  position: absolute;
  background-color: #4bbddf;
  width: 26.66%;
  z-index: 100;
    height: auto;
    border-radius: 5px;
}

.subnav-content a {
  float: left;
  color: #333333;
  text-decoration: none;
    text-align: left;
 padding: 10px 10px;
    margin-left: 10px;
    border-radius: 5px;
animation: cont 2s;
}
.subnav:focus-within .subnav-content {
  display: block;
 animation: focus 1s ease-in-out;
}

.resto{  display: block;
            background-image: 
    url("color.jpeg");
     background-size: 146% 150%;
  font-family: Helvetica;
  width: 100%;
    height: 20%;
text-align: center;
    z-index: 100;
    position: relative;
    
}
nav{
      position: absolute;
  left: 33%;
    width: 40%;
    height: 100%;
    top: 45%;
animation: nav 1s;
}
@keyframes nav {
from{top:0%;opacity: 0.5}
to{top:45% ;opacity: 1}}
@keyframes container {
from{opacity: 0.5}
to {opacity: 1}}
@keyframes cont{
from{opacity: 0}
to {opacity: 1}}

h1[data-scroll="in"]{
transform: translateX(0);
opacity:1;
}
.container[data-scroll="in"]{
transform: translateX(0);
opacity:1;
}
@media all and (max-width:650px){
.leftl{ width:150%;
top: 20%;
height: 400%;
}

@media all and (max-width:950px){
.leftl img{ width:17%;
top: 5%;
height: 10%;
}
.centeredm{
  position: relative;
  top: 35%;
  left: 10%;
}
.resto{
     background-size: 206% 300%;
}
.navbar{float: bottom;
}
.subnav{ float: bottom;
display: block;
width: 100%;
}

.subnav-content {
  display: hidden;
  position: absolute;
  background-color: #4bbddf;
  width: 80%;
  z-index: 110;
    height: auto;
    border-radius: 5px;
}
#menu li>a{
  background-color: #c59f53;
    color:#ffffff;
  padding: 1%;
  display: block;
  text-decoration: none;
    height: inherit;
    z-index: auto;
    height: inherit;
}
#menu li>a:hover{
  color: #ffffff;
  background-color: #4bbddf;
    z-index: 20
}
#menu>li{
  float: none;
  text-align:center;
        height: 1%;
    width: 100%;
}
.campo input{
   width: 50%;
}
.campo .en-linea {
    display: block;
}

.campo .en-linea.izquierdo {
    display: block;
    margin-right: 0;
}
.campo {
    margin: 0 0;
    padding: 0 0;
}
nav{ position: absolute;
  left: 33%;
    width: 40%;
    height: 100%;
    top: 0%;
animation: nav 1s;
}}
@media (min-width: 300px) and (max-width: 1200px){
.container{
margin-top: 25%;
}
.leftl{ width:150%;
top: 20%;
height: 400%;
}
}