JSFiddle - React, Tailwind, and code Playground

HTML

<section data-slide="2" id="acqua"> 
	    <h1>Papel Interfolhado<div class="ball"><img class="papel" src="img/papel.png"/></div></h1>
	    <div id="descricao">


        
    	  	<p>O papel toalha Safira tem qualidade <br/>e maciez comprovada.</p>
    	  	<p>O guardanapo de papel Safira <br/>é ultra-absorvente</p>
    		 <p>É macio e foi feito pensando <br/>na consciência ambiental e na <br/>preservação do meio ambiente</p>
	    </div>
    </section>

CSS

@mixin respond-to($media) {
    @if $media == phone {
        @media (max-width: 767px) { @content; }
    }
    @if $media == except-phone {
        @media (min-width: 768px) { @content; }
    }
    @if $media == tablet {
        @media (min-width: 768px) and (max-width: 979px) { @content; }
    }
    @if $media == desktop {
        @media (min-width: 1200px) { @content; }
    }
}

@mixin row() {
    margin-left: $gridGutterWidth * -1;
    @media (max-width: 767px) { margin-left: 0; }
    @media (min-width: 768px) and (max-width: 979px) { margin-left: $gridGutterWidth768 * -1; }
    @media (min-width: 1200px) { margin-left: $gridGutterWidth1200 * -1; }
    @include clearfix();
}

@mixin column($columns: 1, $offset: 0) {
    float: left;
    margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
    width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
    @media (max-width: 767px) {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        @include box-sizing(border-box);
    }
    @media (min-width: 768px) and (max-width: 979px) {
    margin-left: ($gridColumnWidth768 * $offset) + ($gridGutterWidth768 * ($offset - 1)) + ($gridGutterWidth768 * 2);
    width: ($gridColumnWidth768 * $columns) + ($gridGutterWidth768 * ($columns - 1));
}
    @media (min-width: 1200px) {
        margin-left: ($gridColumnWidth1200 * $offset) + ($gridGutterWidth1200 * ($offset - 1)) + ($gridGutterWidth1200 * 2);
        width: ($gridColumnWidth1200 * $columns) + ($gridGutterWidth1200 * ($columns - 1));
    }
}

.menu {
    left: 15%;
    position: relative;
    top: 45px;
}
.menu li a{color:#104e79;}
.logo {
    height: 122px;
    left: 100px;
    position: relative;
    top: 20px;
}
header {
    background: url("../img/bg_cima.jpg") repeat scroll center center / contain rgba(0, 0, 0, 0);
    height: 615px;
    margin-bottom: 0 !important;
    width: 100%;
}
#acqua {
   ...

JavaScript

$(document).ready(function($) {
              // build tween
              var tween = TweenMax.fromTo("#animate2", 0.5, 
                  {"border-top": "0px solid white"},
                  {"border-top": "30px solid white", backgroundColor: "blue", scale: 0.7}
                );

              // build scene
              var scene = new ScrollScene({triggerElement: "#trigger2", duration: 300})
                      .setTween(tween)
                      .addTo(controller);

              // show indicators (requires debug extension)
              scene.addIndicators();
            });