Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Header Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->

<header id="header">
  <div class="main_nav">
    <div class="container">
      <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
      <nav>
        <ul>
          <li><a class="smoothscroll" href="#header">Home</a></li>
          <li><a class="smoothscroll" href="#about">About</a></li>
          <li><a class="smoothscroll" href="#skills">Sales</a></li>
          <li><a class="smoothscroll" href="#portfolio">Shop</a></li>
          <li><a class="smoothscroll" href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="title">
    <h1 class="heading"><img src="https://ryanforbes-7926.neocities.org/images/InstaLogo-CompanyLogo.png" with="180" height="180"></h1>
    <h2 class="heading">Our Official Company Site</h2>
    <a class="smoothscroll" href="#about">
    <div class="mouse">
      <div class="wheel"></div>
    </div>
    </a> </div>
  <a class="smoothscroll" href="#about">
  <div class="scroll-down"></div>
  </a> </header>
  
<!-- About Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->  
  
<section id="about">
  <div class="container">
    <div class="row">
      <h1>About</h1>
      <div class="block"></div>
      <p>We Are A Merchandise CLothing Social Media Company We Sell Clothing For Our Sponsor <a href="">ItsRyan25</a> Because We Are His New Sponsorship We Sponsor His Instagram And What Its All About And How It Goes</p>
    </div>
    <div class="row">
      <div class="six columns">
        <h3><span class="typcn typcn-device-desktop icon"></span>Shipping Process</h3>
        <p>All of Our Merchandise That is purchase the payment will always take up to 3-5 days to process the shipping fee.</p>
      </div>
      <div class="six columns">
        <h3><span class="typcn typcn-pen icon"></span>Merchandise</h3>
        <p>We Are Currently Working On A Sponsorship Program But Our Merchandise Shop is Completely Open, and you can get the merch by clicking <a href="/shop/">here</a></p>
      </div>
      <div class="row">
        <div class="six columns">
          <h3><span class="typcn typcn-cog-outline icon"></span>Our Goal</h3>
          <p>Is To Get This Brand So Popular That We Can Create A Huge Fanbase off of It And Hope That You Guys Love It</p>
        </div>
        <div class="six columns">
          <h3><span class="typcn typcn-lightbulb icon"></span>Merchandise Quality</h3>
          <p>merch quality is so good it comes from companies like vans, levis, and etc. </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Team Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->  

<section id="team">
  <div class="container">
    <div class="row">
      <h1>Meet the Team</h1>
      <div class="block"></div>
      <p>This is our wonderful company staff team or CEO teams and more.</p>
    </div>
    <div class="row">
      <div class="three columns"> <img src="https://ryanforbes-7926.neocities.org/images/47692065_346391449287696_3396147854899675136_n.jpg" width="220" height="220" alt=""/>
        <h4>Ryan Forbes</h4>
        <p>Sponsor</p>
        <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-twitter-circular icon"></span> </div>
      <div class="three columns"> <img src="https://ryanforbes-7926.neocities.org/images/NSLTJlQD_400x400.jpg" width="220" height="220" alt=""/>
        <h4>Jeff Smith</h4>
        <p>Support/Website Manager</p>
        <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
      <div class="three columns"> <img src="https://ryanforbes-7926.neocities.org/images/taylor-kitsch.jpg" width="220" height="220" alt=""/>
        <h4>Taylor Kitsch</h4>
        <p>Founder/CEO</p>
        <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
      <div class="three columns"> <img src="https://ryanforbes-7926.neocities.org/images/O77CdUBU.jpg" width="220" height="220" alt=""/>
        <h4>Hunter Johnson</h4>
        <p>Designer</p>
        <span class="typcn typcn-social-facebook-circular icon"></span><span class="typcn typcn-social-instagram-circular icon"></span><span class="typcn typcn-social-google-plus-circular icon"></span><span class="typcn typcn-social-linkedin-circular icon"></span> </div>
    </div>
  </div>
</section>

<!-- Skills Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->  

<section id="skills">
  <div class="container">
    <h1>Merchandise Sales</h1>
    <div class="block"></div>
    <div class="row">
      <div class="one-third column">
        <h3>Clothing</h3>
        <p>Purchase Count: <br> <a onclick="copyright()">
<img src="https://www.easycounter.com/counter.php?itsryan25"
border="0" alt="Free Web Counters"></a>
</p>
      </div>
      <div class="one-third column">
        <h3>Accessories</h3>
        <p>Purchase Count: <br> <a onclick="copyright()">
<img src="https://www.easycounter.com/counter.php?itsryan25"
     border="0" alt="Free Web Counters"></a>
        </p>
      </div>
      <div class="one-third column">
        <h3>Giftcards</h3>
        <p>Purchase Count: <br> <a onclick="copyright()">
<img src="https://www.easycounter.com/counter.php?itsryan25"
border="0" alt="Free Web Counters"></a>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="eight columns">
        <div class="progressBar">
          <h4>Clothing Goal</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-90"></div>
          </div>
        </div>
        <div class="progressBar">
          <h4>Giftcards Goal</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-80"></div>
          </div>
        </div>
        <div class="progressBar">
          <h4>Accessories Goal</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-30"></div>
          </div>
        </div>
        <div class="progressBar">
          <h4>Pre-Orders Goal</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-70"></div>
          </div>
        </div>
      </div>
      <div class="four columns">
        <p>This are all the goals for this month at the end of the month they will be reset by our website manager. Thanks so much to the people that helped us get there goals going.</p>
      </div>
    </div>
  </div>
</section>

<!-- Portfolio Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->  

<section id="portfolio">
  <div class="container">
    <h1>Coming Soon</h1>
    <div class="block"></div>
    <div class="row">
        <div class="row" style="margin-top: 30px;">
          <img src="https://ryanforbes-7926.neocities.org/images/m_5661080447da81806e001fdb.png" width="150" height="150">
          
                    <img src="https://ryanforbes-7926.neocities.org/images/Ornament.png" width="150" height="150">
          <img src="https://ryanforbes-7926.neocities.org/images/PopSocket.png" width="150" height="150">
    </div>
      <button class="snip1535" onclick="location.href='/shop/';">Start Shopping</button>
</section>

<!-- Testimonials Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->  

<section id="testimonial">
  <div class="container">
    <div class="quoteLoop">
      <blockquote class="quote"> <img src="https://ryanforbes-7926.neocities.org/images/'.jpg" width="100" height="100" alt=""/>
        <h5>&nbsp;<br>
          &rdquo;Go Follow Our Sponsors Request Shoutout.&rdquo;<br>
          <small>      <button class="snip1535" onclick="location.href='https://www.instagram.com/kdhill/';">Follow</button></small></h5>
      </blockquote>
      <blockquote class="quote"> <img src="https://ryanforbes-7926.neocities.org/images/Socks%20Newly.png" width="100" height="100" alt=""/>
        <h5>&nbsp;<br>
          &ldquo;Go Follow Our Companies Official Instagram Account.&rdquo;<br>
          <small><button class="snip1535" onclick="location.href='https://www.instagram.com/r25brand/';">Follow</button></small></h5>
      </blockquote>
    </div>
  </div>
</section>

<!-- Contact Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->  

<section id="contact">
  <div class="container">
    <h1>Contact</h1>
    <div class="block"></div>
    <form>
      <div class="row">
        <div class="six columns">
          <label for="exampleRecipientInput">Name</label>
          <input class="u-full-width" type="text">
        </div>
        <div class="six columns">
          <label for="exampleEmailInput">Email</label>
          <input class="u-full-width" type="email">
        </div>
      </div>
      <div class="row">
        <label for="exampleMessage">Message</label>
        <textarea class="u-full-width"></textarea>
        <input class="button-primary" type="submit" value="Submit">
      </div>
    </form>
  </div>
</section>

<!-- Footer Section
–––––––––––––––––––––––––––––––––––––––––––––––––– -->  

<footer>
  <div class="container">
    <div class="nine columns">
      <p>Designed by Jeff Smith</p>
      <p>© Copyright 2018 - All Rights Reserved</p>
    </div>
    <div class="three columns"> <a href="https://www.facebook.com/TheRealRyanForbes"><span class="typcn typcn-social-facebook-circular socialIcons"></span></a> <a href="https://www.instagram.com/ItsRyan25/"><span class="typcn typcn-social-instagram-circular socialIcons"></span></a>
    <a href="https://www.instagram.com/ItsRyan25/"><span class="typcn typcn-social-instagram-circular socialIcons"></span></a>
    </div>
  </div>
</footer>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");

/* Base Styles
********************************************************************* */
html {
	font-size: 62.5%;
}
body {
	font-size: 1.5em;
	line-height: 1.6;
	font-weight: 400;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	color: #222;
}
/* Grid
********************************************************************* */  
.container {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.column, .columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
.container {
	width: 85%;
	padding: 0;
}
}

/* For devices larger than 550px */
@media (min-width: 550px) {
.container {
	width: 80%;
}
.column,  .columns {
	margin-left: 4%;
}
.column:first-child,  .columns:first-child {
	margin-left: 0;
}
.one.column,  .one.columns {
	width: 4.66666666667%;
}
.two.columns {
	width: 13.3333333333%;
}
.three.columns {
	width: 22%;
}
.four.columns {
	width: 30.6666666667%;
}
.five.columns {
	width: 39.3333333333%;
}
.six.columns {
	width: 48%;
}
.seven.columns {
	width: 56.6666666667%;
}
.eight.columns {
	width: 65.3333333333%;
}
.nine.columns {
	width: 74.0%;
}
.ten.columns {
	width: 82.6666666667%;
}
.eleven.columns {
	width: 91.3333333333%;
}
.twelve.columns {
	width: 100%;
	margin-left: 0;
}
.one-third.column {
	width: 30.6666666667%;
}
.two-thirds.column {
	width: 65.3333333333%;
}
.one-half.column {
	width: 48%;
}
/* Offsets */
.offset-by-one.column,  .offset-by-one.columns {
	margin-left: 8.66666666667%;
}
.offset-by-two.column,  .offset-by-two.columns {
	margin-left: 17.3333333333%;
}
.offset-by-three.column,  .offset-by-three.columns {
	margin-left: 26%;
}
.offset-by-four.column,  .offset-by-four.columns {
	margin-left: 34.6666666667%;
}
.offset-by-five.column,  .offset-by-five.columns {
	margin-left: 43.3333333333%;
}
.offset-by-six.column,  .offset-by-six.columns {
	margin-left: 52%;
}
.offset-by-seven.column,  .offset-by-seven.columns {
	margin-left: 60.6666666667%;
}
.offset-by-eight.column,  .offset-by-eight.columns {
	margin-left: 69.3333333333%;
}
.offset-by-nine.column,  .offset-by-nine.columns {
	margin-left: 78.0%;
}
.offset-by-ten.column,  .offset-by-ten.columns {
	margin-left: 86.6666666667%;
}
.offset-by-eleven.column,  .offset-by-eleven.columns {
	margin-left: 95.3333333333%;
}
.offset-by-one-third.column,  .offset-by-one-third.columns {
	margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,  .offset-by-two-thirds.columns {
	margin-left: 69.3333333333%;
}
.offset-by-one-half.column,  .offset-by-one-half.columns {
	margin-left: 52%;
}
}
/* Typography
********************************************************************* */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 300;
}
h1 {
	font-size: 4.0rem;
	line-height: 1.2;
	letter-spacing: -.1rem;
}
h2 {
	font-size: 3.6rem;
	line-height: 1.25;
	letter-spacing: -.1rem;
}
h3 {
	font-size: 3.0rem;
	line-height: 1.3;
	letter-spacing: -.1rem;
}
h4 {
	font-size: 2.4rem;
	line-height: 1.35;
	letter-spacing: -.08rem;
}
h5 {
	font-size: 1.8rem;
	line-height: 1.5;
	letter-spacing: -.05rem;
}
h6 {
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
h1 {
	font-size: 5.0rem;
}
h2 {
	font-size: 4.2rem;
}
h3 {
	font-size: 3.6rem;
}
h4 {
	font-size: 3.0rem;
}
h5 {
	font-size: 2.4rem;
}
h6 {
	font-size: 1.5rem;
}
}
p {
	margin-top: 0;
}
/* Links
********************************************************************* */
a {
	color: #ff9900;
}
a:hover {
	color: #222;
}
/* Header Section
********************************************************************* */


header {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
 width: 100%%;
	height: 100vh;
	background: url("/Intro-Asset.png");
}
.title {
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
	padding: 2rem;
	max-width: 960px;
	text-align: center;
}
.title .smallsep {
	background: #fff;
	height: 2px;
	width: 70px;
	margin: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
.title h1 {
	font-size: 80px;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 0.85;
	margin-bottom: 28px;
	margin: 0;
	padding: 0;
	color: #FFFFFF;
}
.title h2 {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin-top: 50px;
}

@media only screen and (max-height: 700px) {
.title h1 {
	font-size: 80px;
}
}
.title p {
	max-width: 600px;
	margin: 0 auto;
	line-height: 150%;
}

@media only screen and (max-width: 500px) {
.title h1 {
	font-size: 65px;
}
}
.title .icon {
	color: #FFFFFF;
	font-size: 50px;
}
.main_nav {
	position: fixed;
	top: 0px;
	max-height: 50px;
	z-index: 999;
	width: 100%;
	padding-top: 17px;
	background: none;
	overflow: hidden;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
	top: -100px;
	padding-bottom: 6px;
}

@media only screen and (max-width: 766px) {
.main_nav {
	padding-top: 25px;
}
}
.open-nav {
	max-height: 400px !important;
}
.sticky {
	background-color: #ffffff;
	opacity: 1;
	top: 0px;
}
nav {
	width: 100%;
	margin-top: 5px;
}

@media only screen and (max-width: 766px) {
nav {
	width: 100%;
}
}
nav ul {
	list-style: none;
	overflow: hidden;
	text-align: center;
}

@media only screen and (max-width: 766px) {
nav ul {
	padding-top: 0px;
	margin-bottom: 22px;
	text-align: center;
	width: 100%;
}
}
nav ul li {
	display: inline-block;
	margin-left: 35px;
	line-height: 1.5;
	letter-spacing: 1px;
}

@media only screen and (max-width: 766px) {
nav ul li {
	width: 100%;
	padding: 7px 0;
	margin: 0;
}
nav ul li:first-child {
	margin-top: 70px;
}
}
nav ul a {
	text-transform: uppercase;
	font-size: 12px;
	text-decoration: none;
}
nav ul a:hover {
	color: #CFCFCF;
}
.mobile-toggle {
	display: none;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	right: 22px;
	top: 0;
	width: 30px;
}

@media only screen and (max-width: 766px) {
.mobile-toggle {
	display: block;
}
}
.mobile-toggle span {
	width: 30px;
	height: 4px;
	margin-bottom: 6px;
	background: #000000;
	display: block;
}
.scroll-down {
	position: absolute;
	left: 50%;
	bottom: 5vh;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
	width: 13px;
	height: 13px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	z-index: 9;
	-webkit-transform: translate(-50%, 0%) rotate(45deg);
	-moz-transform: translate(-50%, 0%) rotate(45deg);
	transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 2s ease-in-out infinite;
	-moz-animation: fade_move_down 2s ease-in-out infinite;
	animation: fade_move_down 2s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
 0% {
-webkit-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
-webkit-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@-moz-keyframes fade_move_down {
 0% {
-moz-transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
-moz-transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
@keyframes fade_move_down {
 0% {
transform:translate(0, -10px) rotate(45deg);
opacity: 0;
}
 50% {
opacity: 1;
}
 100% {
transform:translate(0, 10px) rotate(45deg);
opacity: 0;
}
}
/* About Section
********************************************************************* */

#about {
	padding: 100px 0 50px 0;
}
/* Team Section
********************************************************************* */
#team {
	padding: 50px 0 100px 0;
}
#team .icon {
	font-size: 26px;
}
/* Skills Section
********************************************************************* */
#skills {
	padding: 100px 0 100px 0;
	background-color: #F5F5F5;
}
.progressBar {
	margin-bottom: 26px;
	margin-bottom: 1.66em;
}
.progressBar h4 {
	font-size: 16px;
	text-transform: none;
	margin-bottom: 7px;
	margin-bottom: .33em;
}
.progressBarContainer {
	width: 100%;
	height: 8px;
	background: #E1E1E1;
	overflow: hidden;
}
.progressBarValue {
	height: 8px;
	float: left;
	background: #e55d87; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: -webkit-linear-gradient(-45deg, #e55d87 0%, #5fc3e4 100%);
	background: linear-gradient(135deg, #e55d87 0%, #5fc3e4 100%);
}
.value-00 {
	width: 0;
}
.value-10 {
	width: 10%;
}
.value-20 {
	width: 20%;
}
.value-30 {
	width: 30%;
}
.value-40 {
	width: 40%;
}
.value-50 {
	width: 50%;
}
.value-60 {
	width: 60%;
}
.value-70 {
	width: 70%;
}
.value-80 {
	width: 80%;
}
.value-90 {
	width: 90%;
}
.value-100 {
	width: 100%;
}
/* Portfolio Section
********************************************************************* */
#portfolio {
	padding: 100px 0 100px 0;
}
.image {
	background-color: #5a5a5a;
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	transition: .5s;
}
.image:hover {
	opacity: 0.6;
	transition: .3s;
	background-image: url(../images/hoverbg.png);
	background-repeat: no-repeat;
	background-position: center;
}

/* Testimonial Section
********************************************************************* */
#testimonial {
	background-color: #F5F5F5;
	padding: 100px 0 100px 0;
}
.quoteLoop {
	height: auto;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.quote {
	margin: 10px 30px;
	height: inherit;
	top: 0px;
	display: none;
	text-align: center;
}
/* Contact Section
********************************************************************* */
#contact {
	padding: 100px 0 100px 0;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
	height: 38px;
	padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
	background-color: #F5F5F5;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	border-radius: 0;
	outline: none;
}
textarea {
	min-height: 250px;
}
input[type="submit"] {
	display: inline-block;
	height: 38px;
	padding: 0 30px;
	color: #fff;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: .1rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	background: #5fc3e4;
	border-radius: 0px;
	border: 0;
	cursor: pointer;
	box-sizing: border-box;
}
input[type="submit"]:hover {
	background: #e55d87;
	text-decoration: none;
}
/* Footer Section
********************************************************************* */
footer {
	min-height: 120px;
	padding: 40px 0 40px 0;
	background: url(/Intro-Asset.png);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55d87', endColorstr='#5fc3e4', GradientType=1 );
	box-sizing: border-box;
}
footer p {
	color: #FFFFFF;
	margin: 20px 0 0 0;
}
.socialIcons {
	font-size: 34px;
	color: #ffff;
}
/* Lists
********************************************************************* */
ul {
	list-style: circle inside;
}
ol {
	list-style: decimal inside;
}
ol, ul {
	padding-left: 0;
	margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
	margin: 1.5rem 0 1.5rem 3rem;
	font-size: 90%;
}
li {
	margin-bottom: 1rem;
}
/* Spacing
********************************************************************* */
button, .button {
	margin-bottom: 1rem;
}
input, textarea, select, fieldset {
	margin-bottom: 1.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
	margin-bottom: 2.5rem;
}
/* Utilities
********************************************************************* */
.u-full-width {
	width: 100%;
	box-sizing: border-box;
}
.u-max-full-width {
	max-width: 100%;
	box-sizing: border-box;
}
.u-pull-right {
	float: right;
}
.u-pull-left {
	float: left;
}
/* Clearing
********************************************************************* */
.container:after, .row:after, .u-cf {
	content: "";
	display: table;
	clear: both;
}
/* Misc
********************************************************************* */

.icon {
	padding-right: 10px;
	color: #ff9900;
}
.block {
	width: 70px;
	height: 2px;
	background: #ff9900; /* Old browsers */
	margin-bottom: 50px;
}
.snip1535 {
  background-color: #fff;
  border: none;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-family: 'BenchNine', Arial, sans-serif;
  font-size: 1em;
  font-size: 22px;
  line-height: 1em;
  margin: 15px 40px;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
}
.snip1535:before,
.snip1535:after {
  border-color: transparent;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  border-style: solid;
  border-width: 0;
  content: "";
  height: 24px;
  position: absolute;
  width: 24px;
}
.snip1535:before {
  border-color: #ff9900;
  border-right-width: 2px;
  border-top-width: 2px;
  right: -5px;
  top: -5px;
}
.snip1535:after {
  border-bottom-width: 2px;
  border-color: #ff9900;
  border-left-width: 2px;
  bottom: -5px;
  left: -5px;
}
.snip1535:hover,
.snip1535.hover {
  background-color: #ff9900;
}
.snip1535:hover:before,
.snip1535.hover:before,
.snip1535:hover:after,
.snip1535.hover:after {
  height: 100%;
  width: 100%;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fff; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #F5F5F5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #F5F5F5; 
}

              
            
!

JS

              
                /*----------------------------------------------------*/
/* Quote Loop
------------------------------------------------------ */

function fade($ele) {
    $ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
        var $next = $(this).next('.quote');
        fade($next.length > 0 ? $next : $(this).parent().children().first());
   });
}
fade($('.quoteLoop > .quote').first());


/*----------------------------------------------------*/
/* Navigation
------------------------------------------------------ */

$(window).scroll(function() {

    if ($(window).scrollTop() > 300) {
        $('.main_nav').addClass('sticky');
    } else {
        $('.main_nav').removeClass('sticky');
    }
});

// Mobile Navigation
$('.mobile-toggle').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.main_nav').removeClass('open-nav');
    } else {
        $('.main_nav').addClass('open-nav');
    }
});

$('.main_nav li a').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_nav').removeClass('open-nav');
    }
});


/*----------------------------------------------------*/
/* Smooth Scrolling
------------------------------------------------------ */

jQuery(document).ready(function($) {

   $('.smoothscroll').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 800, 'swing', function () {
	        window.location.hash = target;
	    });
	});
  
});


TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);
              
            
!
999px

Console