/* CSS Document */
html{
        font-family: 'PT Sans', sans-serif; color: #fac944;
       }
<link href=rel='stylesheet' type='text/css'>
h1 {font-size: 15rem; color: #fac944}
h4{color: #fac944;;text-align: center;font-size: 2rem;margin: 1.7rem;}

{ box-sizing: border-box; margin: 0; padding: 0; border-radius: 0.5rem;}

nav{ width: 100%; background: #ccc; border-radius: 0.5rem;}
nav ul{ padding: 0; margin: 0}
nav ul li{list-style-type: none;}
nav ul li a{background: #333; text-decoration: none; color: #fff; display: block; padding: 20px}
nav .botones{ position: relative; background: #eee; height: 50px; border-radius: 0.5rem;}
nav .cruz{ position: absolute; top: 10px; right: 10px;}
nav .hamb{position: absolute; top: 10px; right: 10px;}
.vinculo{ text-align: center; color: #fff; display: block;}

@media all and (width: 30rem) {
/* CSS para Tablets */
}

nav1 {height: 50px; border-radius: 0.5rem;  width: 100%;}

nav2 ul {list-style-type: none; } 

nav2 ul li {
margin: 0rem 2rem 0rem 1rem;font color:#fac944;
float:left;
}

nav2 ul li a {padding: 0.7rem; background-color: #565bc6; text-decoration: none;float: left;border-radius: 0.5rem;}
.clear{ clear: both;}


img{margin: auto; width: 80%; background:rgb(122, 100, 196);display: block;background: none;}
#destacada {width: 5%;background: none;float: left;padding: 1rem;margin: 1rem;}
#destacada2 {border-radius: 1000px;  width: 45%;float: left; margin: 5rem 1rem 3rem 0rem;}

a{color:#fac944;
}
body {
     background: #fac944;
     }

#page {width: 90%; margin: 0 auto 0 auto;}

  #main {
      margin: 0;
   padding: 0;
   display: -webkit-column;
   display:         column;
   -webkit-flex-flow: row;
           flex-flow: row;
   }
 
  #main > article {
float:left;
	  
margin: 0rem;
   padding: 0rem;
   border: 1rem solid #fac944;
   border-radius:1000px;
   
   -webkit-flex: 3 1 60%;
           flex: 3 1 60%;
   -webkit-order: 2;
           order: 2;
   }
  


  #main > nav {
   margin: 0.25rem;
   padding: 0rem;
   border: 0.0625rem solid #fac944;
   border-radius: 0.5rem;
   background: rgb(122, 100, 196);
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 1;
           order: 1;
   }
  
  #main > aside {
   margin: 0.25rem;
   padding: 0.3rem;
   border: 0.0625rem solid #fac944;
   border-radius: 0.5rem;
  background: rgb(122, 100, 196);
   -webkit-flex: 1 6 20%;
           flex: 1 6 20%;
   -webkit-order: 3;
           order: 3;
   }
 
  header {
margin: 0.25rem;
   padding: 0rem;
   display: block;
         min-height: 6.25rem;
   border: 0.0625rem solid #fac944;
   border-radius: 0.5rem;
   background: rgb(122, 100, 196);
   }


 
  /* Too narrow to support three columns */
  @media all and (max-width: 40rem) {
  
   #main {
    -webkit-flex-flow: column;
            flex-flow: column;
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
   }
  
   #main > nav, #main > aside, header, footer {
    /*min-height: 32rem;*/
    max-height: 32rem;
   }
  }