@charset "UTF-8";
* {margin: 0; padding: 0; box-sizing: border-box; outline: none;}

a {text-decoration: none;}
p {margin-bottom: 1.2em; line-height: 1.2em; font-size: 1em;}
ul {list-style-type: none;}


body {font: 16px/18px 'Open Sans', sans-serif; color: #333;}

header {height: auto; background: #F7DFC7;}
#navigation {width: 100%; margin: 0 auto; padding: 10px 2%;}
#navigation > div {position: relative; max-width: 1200px; width: 100%; margin: 0 auto;}
#logo {display: inline-block;}
#logo img {width: 160px; height: auto;}
#menu {position: absolute; display: flex; bottom: 10px; right: 0}
#menu li {padding: 10px 20px; display: inline-block;}

#wrapper {height: 500px;}

footer {height: 300px; background: #555;}
#acceso {position: absolute; bottom: 30px; right: 100px;}








 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
    /* xs */
    .xs-12 {grid-column: span 12;}
    .xs-6 {grid-column: span 6;}
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {

    .sm-12 {grid-column: span 12;}
    .sm-6 {grid-column: span 6;}
   
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {

    .md-12 {grid-column: span 12;}
    
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {

    .lg-12 {grid-column: span 12;}
    .lg-6 {grid-column: span 6;}
    
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {

    .xl-6 {grid-column: span 6;}
 } 

 .clearfix:after {content: " ";visibility: hidden;display: block;height: 0;clear: both;}