.pure-g > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* < 568px             */
body {
    background: #FFCC00;
}

.img-svg {
    width: 100%;
}

.header {
    position: relative;
    display: block;
    /*height ratio to width, contents should be position: absolute*/
    /* 56% = ~16:9 // 75% = 4:3 */
    padding-bottom: 56%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.container {
    position: relative;
    /*background-color: #92bcd5;*/
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url('/fotos/playa-sm.jpg'), linear-gradient(to bottom, white 50%, #92bcd5 90%);
}

.menu-min,
.menu-link {
    display: none;
    text-decoration: none;
    color: white;
}
.menu-link {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    background: #FFCC00;
    background-image: url(/img/hamburgesa.png);
}
.menu-link span {
    display: block;
    text-align: center;
    font-size: .8em;
    margin-top: .4em;
}
.menu-min {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    overflow-y: scroll;
    background: #f5dd79;
    border-left: solid #FFCC00;
}
.menu-min a {
    color: black;
    text-align: left;
    text-transform: capitalize;
    background: #f5dd79;
    font-family: 'Dancing Script', cursive;
    font-size: 1.1em;
    border-bottom: solid #FFFFCC 1px;
}
.menu-min a:hover {
    background: #FFCC00;
}

.logo {
    position: absolute;
    bottom: -14%;
    left: -2px;
    width: 60%;
    height: 47%;
    background-image: url(/img/logo.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.logo h1,
.logo h2 {
    display: none;
}

.sidegal {
    padding-left: .5em;
}
.sidegal-img {
    padding-right: .5em;
    padding-bottom: .5em;
}

.intro-exito {
    margin-top: 5em;
    margin-bottom: 13em;
}

.footer-items {
    width: 18em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    font-size: smaller;
}
.footer-items > div {
    white-space: nowrap;
    margin-bottom: .75em;
}
.footer-items a {
    text-decoration: none;
    color: black;
    text-shadow: 1px 1px 0px white;
}
.footer-email .fa-envelope {
    padding-right: .2em;
    padding-left: .2em;
}
.footer-telefono a:last-child {
    margin-left: .5em;
}


/* .pure-u-sm ≥ 568px  */
@media screen and (min-width: 35.5em) {

    .header {
        padding-bottom: 35%;
    }

    .logo {
        width: 40%;
        height: 51%;
        bottom: -15%;
    }

    .container {
        background-image: url('/fotos/playa-md.jpg'), linear-gradient(to bottom, white 50%, #92bcd5 75%);
    }
}

/* .pure-u-md ≥ 768px  */
@media screen and (min-width: 48em) {

    .header {
        margin: .5em;
        margin-bottom: 0;
    }

    .menu-horizontal {
        background-color: #ffcc00;
        text-align: center;
        width: auto;
        margin-left: .5em;
        margin-right: .5em;
    }
    .menu-horizontal a {
        color: white;
        text-transform: capitalize;
    }
    .menu-horizontal a:hover {
        color: black;
        background-color: #ffdf60;
    }
    .menu-horizontal > ul > li {
        padding-top: .5em;
    }
    .menu-horizontal li {
        background-color: #ffcc00;
    }
    .menu-horizontal .pure-menu-has-children .pure-menu-link {
        width: 7em;
    }

    .logo {
        left: 0;
        bottom: -16%;
        background-image: url(/img/logo.sincomplejo.svg);
    }

    .footer-items {
        width: auto;
        margin-left: 1em;
        margin-right: 1em;
    }
    .footer-direccion i {
        width: initial;
    }
    .footer-email {
        text-align: center;
    }
    .footer-telefono {
        text-align: right;
    }

    .container {
        max-width: 46em;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-right: auto;
        margin-left: auto;
        background-image: url('/fotos/playa-lg.jpg'), linear-gradient(to bottom, white 50%, #92bcd5 70%);
    }
}

/* .pure-u-lg ≥ 1024px */
@media screen and (min-width: 64em) {

    .container {
        margin-top: 2em;
    }
}

/* .pure-u-xl ≥ 1280px */
@media screen and (min-width: 80em) {
}