<style>
        body {
            margin:0;
            padding:0;
            
            font-family: sans-serif;
        }
        a, a:hover, a:visited {
            color: #0071bc;
        }
        #map {
            top:0;
            height: 100vh;
            width: 100%;
            /*da problemas width:100vw;*/
            position: fixed;
        }
        #header {
            margin: auto;
            width: 90%;
            position: relative;
            z-index: 5;
            border-radius: 10px;
        }
        #header h1, #header h2, #header p {
            margin: 0;
            padding: 2vh 2vw;
            text-align: center;
        }
        #logo {
            padding: 20px;
            font-weight: bold;
            color: #fafafa;
            background-color: #138d75;
            margin: 0;
        }
        #nav {
            display: inline-block;
        }
        nav ul {
            list-style: none;
        }
        .wrapper{/*prueba*/
            background: #138b73;
            width:100% ; 
            padding:20px 30px; 
            margin:0;
        }
        .wrapper h1{
            padding: 10px 0px;
        }
        .wrapper h2{
            padding: 10px 0px;
        }
        .wrapper h3{
            padding: 10px 0px;
        }
        .wrapper p{
            padding-bottom: 10px;
        }
        #footer {
            width: 100%;
            min-height: 5vh;
            padding-top: 2vh;
            padding-bottom: 2vh;
            text-align: center;
            line-height: 25px;
            font-size: 13px;
            position: relative;
            z-index: 5;
        }
        #features {
            padding-top: 10vh;
            padding-bottom: 10vh;
        }
        .hidden {
            visibility: hidden;
        }
        .centered {
            width: 50vw;
            margin: 0 auto;
        }
        .lefty {
            width: 33vw;
            margin-left: 5vw;
        }
        .righty {
            width: 33vw;
            margin-left: 62vw;
        }
        .fully {
            width: 100%;
            margin: auto;
        }
        .light {
            color: #138d75;
            background-color: #fafafa;
        }
        .dark {
            color: #fafafa;
            background-color: #138b73;
            border-radius: 10px;
        }
        .step {
            padding-bottom: 50vh;
            /* margin-bottom: 10vh; */
            opacity: 0.25;
        }
        .step.active {
            opacity: 0.9;
        }

        .step div {
            padding:  25px 50px;
            line-height: 25px;
            font-size: 13px;
        }

        .step img {
            width: 100%;
        }

        @media (max-width: 750px) {
            .centered, .lefty, .righty, .fully {
                width: 90vw;
                margin: 0 auto;
            }
        }

        /* Fix issue on mobile browser where scroll breaks  */
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, 
        .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
            touch-action: unset;
        }

</style>