Interactive White Paper

index.html

<nav>

  <ul class="list-unstyled main-menu">
    <li><img src="http://arti.us/clients/concept/insights/images/cj-logo.png" class="img-responsive" /></li>
    <li>
      <hr style="width:50%; border-width:5px; margin-left:0" />
    </li>
    <!--Include your navigation here-->
    <li class="text-right">
      <!--<a href="#" id="nav-close">X</a>--></li>
    <li>
      <p>CJ Affiliate by Conversant&reg; (formerly Commission Junction) is the leading global affiliate marketing network, specializing in pay-for-performance programs that drive results for businesses around the world. The CJ Network helps to reach and
        connect with millions of online consumers every day by facilitating productive partnerships between advertisers and publishers. Drive more sales and expand your reach - experience the Network Effect with CJ.</p>
    </li>
    <li>
      <hr style="width:50%; border-width:5px; margin-left:0" />
    </li>
    <li>
      <p>© 2014 CJ Affiliate by Conversant&reg;.</p>
    </li>
    <!--<li><a href="index.html#2">How it Works <span class="icon"></span></a></li>
    <li><a href="index.html#3">Truth in Data<span class="icon"></span></a></li>
    <li><a href="index.html#4">Empowerment<span class="icon"></span></a>
      <ul class="list-unstyled">
        <li class="sub-nav"><a href="#">Sub Menu One <span class="icon"></span></a></li>
        <li class="sub-nav"><a href="#">Sub Menu Two <span class="icon"></span></a></li>
        <li class="sub-nav"><a href="#">Sub Menu Three <span class="icon"></span></a></li>
        <li class="sub-nav"><a href="#">Sub Menu Four <span class="icon"></span></a></li>
        <li class="sub-nav"><a href="#">Sub Menu Five <span class="icon"></span></a></li>
      </ul>
    </li>
    <li><a href="index.html#5">Next Steps <span class="icon"></span></a></li>-->

  </ul>
  <div class="nav-col">
    <button id="nav-expander" class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a href="/"><img class="logo-icon" src="http://arti.us/clients/concept/insights/images/logo.png" /></a>
  </div>
</nav>
<div class="container fill bgfill">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
      <div class="active item">
        <div class="fill">
          <div class="col-lg-5 leftside fade-in">
            <div class="header"> <img src="http://arti.us/clients/concept/insights/images/insights.png" class="img-responsive" style="width:250px; margin:0 auto">
              <h1 class="title ">Affiliate Customer Insights</h1>
              <h3 class="">Customer and Publisher performance data completely new to the Affiliate Channel.</h3>
              <h4 class="">A Product solution from CJ by Conversant&reg;</h4>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="col-lg-7 rightside ">
            <div class="col-md-10 fade-in one">
              <h2>INTRODUCTION</h2>
              <p><img class="img-responsive" src="http://arti.us/clients/concept/insights/images/1.png" /></p>
              <p>Finally, a data driven solution to determining the value and loyalty of the affiliate customer and the effectiveness of partnerships with affiliate publishers, all in direct comparison to online and offline marketing efforts within your
                organization.</p>
            </div>
          </div>
        </div>
      </div>
      <div class=" item">
        <div class="fill">
          <div class="col-lg-5 leftside fade-in">
            <div class="header"> <img src="http://arti.us/clients/concept/insights/images/insights.png" class="img-responsive" style="width:100px; margin:0 auto;">
              <h2 class="title ">Affiliate Customer Insights</h2>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <h1>How does it work?</h1>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <p style="padding:25px 0">Affiliate Customer Insights will be the first time that data is available within the affiliate channel that merges customer profiles, transactional data, and insights and value through analyzing behavior and trends at the customer, publisher,
                and publisher classification levels. </p>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="col-lg-7 rightside ">
            <div class="col-md-10 fade-in one">
              <h2>SO POWERFULLY SIMPLE</h2>
              <div class="col-md-12" style="padding-bottom:25px;"><img class="img-responsive" src="http://arti.us/clients/concept/insights/images/2.jpg" /></div>
              <div class="col-md-12">
                <div class="blockquote-box clearfix">
                  <div class="square pull-left"> <img src="http://arti.us/clients/concept/insights/images/icon-1.png" alt="" class="" /> </div>
                  <h4> ONE</h4>
                  <p> Customers, transactions, and actions are measured across multiple publishers </p>
                </div>
              </div>
              <div class="col-md-12">
                <div class="blockquote-box clearfix">
                  <div class="square pull-left"> <img src="http://arti.us/clients/concept/insights/images/icon-2.png" alt="" class="" /> </div>
                  <h4> TWO</h4>
                  <p> Reports are compiled and analyzed in relation to all other marketing efforts </p>
                </div>
              </div>
              <div class="col-md-12">
                <div class="blockquote-box clearfix">
                  <div class="square pull-left"> <img src="http://arti.us/clients/concept/insights/images/icon-3.png" alt="" class="" /> </div>
                  <h4> THREE</h4>
                  <p> Insight is gained and strategy is developed for optimal account management </p>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>

      <!--item-->
      <div class=" item">
        <div class="fill">
          <div class="col-lg-5 leftside fade-in">
            <div class="header"> <img src="http://arti.us/clients/concept/insights/images/insights.png" class="img-responsive" style="width:100px; margin:0 auto;">
              <h2 class="title ">Affiliate Customer Insights</h2>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <h1>The Truth is in the Data</h1>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <p style="padding:25px 0">Want to be the hero? We've come up with some seriously innovative reporting that's not only going to help you make better informed decision within your affiliate plan, but you're going to feel like the smartest person in the room. </p>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="col-lg-7 rightside ">
            <div class="col-md-10 fade-in one">
              <h2>Be the hero</h2>
              <div class="col-md-12" style="padding-bottom:25px;"><img class="img-responsive" src="http://arti.us/clients/concept/insights/images/3.jpg" /></div>
              <div class="col-md-4 success">
                <h4 class="report btn btn-success" data-id="CI">Channel Insights</h4>
              </div>
              <div class="col-md-4">
                <h4 class="report btn btn-success" data-id="OI">Offline Impact</h4>
              </div>
              <div class="col-md-4">
                <h4 class="report btn btn-success" data-id="NTF">New To File</h4>
              </div>
              <div class="col-md-12">
                <div class="blockquote-box animated clearfix hide" id="CI">
                  <h4> Channel Insights </h4>
                  <p> Compare the buying trends and residual value of affiliate channel customers to non-affiliate channel customers. Based on this data, the average order value, subsequent orders, and associated revenue is compared in a clear way to determine
                    how affiliate initiatives drive results for your business. </p>
                </div>
              </div>
              <div class="col-md-12">
                <div class="blockquote-box  animated clearfix hide" id="OI">
                  <h4> Offline Impact</h4>
                  <p> Effectively measures the influence of clicks within the affiliate customer journey to in-store or on-site conversions. Customers may click on an affiliate link during their purchase research process, but may not be ready to make a purchase
                    at that moment. Rather than ignore this influence, by combining affiliate click data with customer specific purchase data, these interactions can be measured and acted upon over time. </p>
                </div>
              </div>
              <div class="col-md-12">
                <div class="blockquote-box animated clearfix hide" id="NTF">
                  <h4> New To File</h4>
                  <p> Analyzes the percentage of unique new customers acquired through the affiliate channel vs. non-affiliate channels and the associated revenue of those transactions. With this insight, advertisers will be able to compare the performance
                    of multiple channels with the specific goal of new customer acquisition. </p>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- end item -->
      <!--item-->
      <div class=" item">
        <div class="fill">
          <div class="col-lg-5 leftside fade-in">
            <div class="header"> <img src="http://arti.us/clients/concept/insights/images/insights.png" class="img-responsive" style="width:100px; margin:0 auto;">
              <h2 class="title ">Affiliate Customer Insights</h2>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <h1>POWERFUL. PROPRIETARY. PERSONAL.</h1>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <p style="padding:25px 0">Only CJ Affiliate has the ability to provide this new level of visibility into the performance of the affiliate marketing channel. We believe that affiliate customers and the revenue that is generated from their initial and ongoing purchases
                is exceptionally valuable to the sustained growth of your business both online and offline. </p>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="col-lg-7 rightside ">
            <div class="col-md-10 fade-in one">
              <h2>These aren't magic beans</h2>
              <div class="col-md-12" style="padding-bottom:25px;"><img class="img-responsive" src="http://arti.us/clients/concept/insights/images/4.jpg" /></div>

              <div class="col-md-12">
                <p>Affiliate Customer Insights merges affiliate marketing initiatives with all other marketing initiatives and delivers transparent data in one place. By gaining this insight and developing strategy, affiliate programs are managed more effectively,
                  positive consumer behaviors are accelerated, and negative consumer behaviors are improved and changed.</p>
                <p class="alert-success" style="padding:20px;"><strong>It’s time for your organization, and you the marketer, to be informed and empowered to do better.</strong></p>
              </div>

              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- end item -->


      <!--item-->
      <div class=" item">
        <div class="fill">
          <div class="col-lg-5 leftside fade-in">
            <div class="header"> <img src="http://arti.us/clients/concept/insights/images/insights.png" class="img-responsive" style="width:100px; margin:0 auto;">
              <h2 class="title ">Affiliate Customer Insights</h2>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <h1>Your Next Steps</h1>
              <hr style="width:50%; border-width:5px; margin:0 auto" />
              <p style="padding:25px 0">Speak to your CJ Affiliate Account Manager for more information about integration and program eligibility.</p>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="col-lg-7 rightside ">
            <div class="col-md-10 fade-in one">
              <h2></h2>

              <h2 style="text-align:center">Not a CJ Affiliate Advertiser Yet?</h2>
              <p style="text-align:center">Experience a better network today with CJ Affiliate</p>
              <div class="col-md-12" style="padding:20px 0">
                <a class="btn btn-block btn-info btn-lg padding" href="http://www.cj.com/why-cj">Learn More</a>
              </div>
              <div class="col-md-12">
                <p style="text-align:center">-or-</p>
                </p>
              </div>
              <div class="col-md-12" style="padding:20px 0">
                <a class="btn btn-block btn-info btn-lg padding" href="http://www.cj.com/join">Apply to become an advertiser</a>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- end item -->

    </div>
    <div class=" controls"> <a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="">&#10151;</span></a> </div>
  </div>
</div>

Interactive White Paper.markdown

Interactive White Paper

Whitepapers don't have to be boring.

A Pen by Gavin Simpson on CodePen.

License.

script.js

jQuery(document).bind('keyup', function(e) {

  if (e.keyCode == 39) {
    jQuery('a.carousel-control.right').trigger('click');
  } else if (e.keyCode == 37) {
    jQuery('a.carousel-control.left').trigger('click');
  }

});

$(document).ready(function() {
  $('#myCarousel').carousel({
    interval: 0
  })
  var url = document.location.toString();
  if (url.match('#')) {
    // Clear active item
    $('.carousel-inner div.item').removeClass('active');

    // Activate item number #hash
    $('.carousel-inner div:nth-child(' + url.split('#')[1] + ')').addClass('active');
  }

  $('#myCarousel').bind('slid.bs.carousel', function(e) {
    // Update location based on slide (index is 0-based)
    var item = $('#myCarousel .carousel-inner .item.active');
    window.location.hash = "#" + parseInt(item.index() + 1);
  })

  $('.report').click(function() {
    $('.report').removeClass("activeBtn");
    var getID = $(this).attr('data-id');
    $(this).addClass('activeBtn');
    $('.blockquote-box').removeClass('fadeInDown').addClass('fadeOutUp, hide');
    $('#' + getID).removeClass('fadeOutUp').removeClass('hide').addClass('fadeInDown')

  })

  $('.carousel').carousel({
      interval: false
    })
    /* $("#myCarousel").swiperight(function() {
        $("#myCarousel").carousel('prev');
      });
     $("#myCarousel").swipeleft(function() {
        $("#myCarousel").carousel('next');
     });*/

  //Navigation Menu Slider
  $('#nav-expander').on('click', function(e) {
    e.preventDefault();
    $('body').toggleClass('nav-expanded');
  });
  $('#nav-close').on('click', function(e) {
    e.preventDefault();
    $('body').removeClass('nav-expanded');
  });

  // Initialize navgoco with default options
  $(".main-menu").navgoco({
    caret: '<span class="caret"></span>',
    accordion: false,
    openClass: 'open',
    save: true,
    cookie: {
      name: 'navgoco',
      expires: false,
      path: '/'
    },
    slide: {
      duration: 300,
      easing: 'swing'
    }
  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://arti.us/clients/concept/insights/js/bootstrap.min.js"></script>
<script src="http://arti.us/clients/concept/insights/js/jquery.navgoco.js"></script>

style.css

@charset "UTF-8";
.glyphicon-lg {
  font-size: 3em
}

.blockquote-box {
  border-right: 5px solid #f1f1f2;
  margin-bottom: 25px
}

.blockquote-box .square {
  width: 100px;
  min-height: 40px;
  margin-right: 22px;
  text-align: center!important;
  background-color: #f1f1f2;
  padding: 20px 0
}

.square img {
  width: 60px;
}

.blockquote-box.blockquote-primary {
  border-color: #357EBD
}

.blockquote-box.blockquote-primary .square {
  background-color: #428BCA;
  color: #FFF
}

.blockquote-box.blockquote-success {
  border-color: #4CAE4C
}

.blockquote-box.blockquote-success .square {
  background-color: #5CB85C;
  color: #FFF
}

.blockquote-box.blockquote-info {
  border-color: #46B8DA
}

.blockquote-box.blockquote-info .square {
  background-color: #5BC0DE;
  color: #FFF
}

.blockquote-box.blockquote-warning {
  border-color: #EEA236
}

.blockquote-box.blockquote-warning .square {
  background-color: #F0AD4E;
  color: #FFF
}

.blockquote-box.blockquote-danger {
  border-color: #D43F3A
}

.blockquote-box.blockquote-danger .square {
  background-color: #D9534F;
  color: #FFF
}

.report {
  width: 100%;
  margin-bottom: 15px;
}

.activeBtn {
  background: #e1523d;
  border-color: #cc4b37
}

@font-face {
  font-family: "arrows";
  src: url("../fonts/arrows.eot");
  src: url("../fonts/arrows.eot?#iefix") format("embedded-opentype"), url("../fonts/arrows.woff") format("woff"), url("../fonts/arrows.ttf") format("truetype"), url("../fonts/arrows.svg#arrows") format("svg");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "arrows" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "arrows" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-66:before {
  content: "a";
}

.icon-arrow-65:before {
  content: "b";
}

.icon-arrow-62:before {
  content: "c";
}

.icon-arrow-61:before {
  content: "d";
}

.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5%;
  font-size: 60px;
  color: #999;
  text-align: center;
  text-shadow: rgb(255, 255, 255) 0px 1px;
  filter: alpha(opacity=50);
  opacity: .5;
}

.carousel-control:hover {
  color: #999;
}

.carousel-control span {
  position: absolute;
  top: 50%;
  left: 50% z-index: 5;
  display: inline-block;
  height: 60px;
  width: 60px;
  margin-top: -30px;
  margin-left: -30px;
}

html,
body {
  height: 100%;
  background: #000;
  font-family: "Open Sans";
  font-weight:300;
}

body {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat";
  text-transform: uppercase
}

strong {
  font-weight: normal;
  font-family: "Open Sans";
  text-transform: uppercase;
  font-weight:400;
}

.padding {
  padding: 20px;
  text-transform: uppercase;
}

.carousel,
.item,
.active {
  height: 100%;
}

.carousel-inner {
  height: 100%;
}

.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  padding: 0;
  background-repeat: no-repeat;
}
/* faster sliding speed */

.carousel-inner > .item {
  -webkit-transition: 0.3s ease-in-out left;
  -moz-transition: 0.3s ease-in-out left;
  -o-transition: 0.3s ease-in-out left;
  transition: 0.3s ease-in-out left;
}

.darken {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99998;
  opacity: .90
}

.dotted {
  border-bottom: 2px dotted #444;
  margin: 20px 0;
}

#loader {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -50px;
  height: 100px;
  width: 200px;
  z-index: 9999999;
  text-align: center
}

.carousel.fade {
  opacity: 1;
}

.carousel.fade .item {
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  z-index: 1;
}

.carousel.fade .item:first-child {
  top: auto;
  position: relative;
}

.carousel.fade .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  z-index: 2;
}

.bgfill {
  background-color: #ffc533;
}
/* Fade transition for carousel items */

.carousel .item {
  left: 0 !important;
  overflow: auto;
  -webkit-transition: opacity .4s;
  /*adjust timing here */
  
  -moz-transition: opacity .4s;
  -o-transition: opacity .4s;
  transition: opacity .4s;
}

.carousel-control {
  background-image: none !important;
  /* remove background gradients on controls */
}
/* Fade controls with items */

.next.left,
.prev.right {
  opacity: 1;
  z-index: 1;
}

.active.left,
.active.right {
  opacity: 0;
  z-index: 2;
}

.leftside {
  height: 100%;
  text-align: center;
  color: #000;
  padding: 30px 0;
}

.leftside h1 {
  font-size: 48px;
}

.leftside h3 {
  font-size: 18px;
  text-transform: none;
  font-family: "Montserrat"
}

.leftside h4 {
  font-size: 16px;
  text-transform: none;
  font-family: "Montserrat"
}

.circle {
  width: 200px;
  height: 200px;
  background: none;
  border-radius: 350px;
  padding: 20px;
  margin: 40px auto;
}

.rightside {
  background: #f1f1f2;
  min-height: 100%;
  color: #444;
  font-size: 18px;
  padding-top: 70px;
  padding-left: 100px;
}
/* keep full widget on smaller screens */

#nav-side {
  height: 100%;
  background: #000;
}

.navbar-toggle {
  display: inline-block !important;
}

.navbar-toggle .icon-bar {
  background: #444
}

.title {
  padding: ;
}

blockquote {
  border-color: #E1532D
}

@media (max-width: 767px) {
  body {
    padding-left: 0;
    padding-right: 0;
    padding-top: 60px;
  }
}

p {
  line-height: 1.4em;
  margin-bottom: 1em;
  font-size: 20px;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */

a.nav-expander {
  background: none repeat scroll 0 0 #000000;
  color: #FFFFFF;
  display: block;
  font-size: 15px;
  font-weight: 400;
  height: 50px;
  margin-right: 0;
  padding: 1em;
  position: absolute;
  right: 0;
  text-decoration: none;
  text-transform: uppercase;
  top: 0;
  transition: right 0.3s ease-in-out 0s;
  width: 130px;
  z-index: 12;
  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;
}

nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 5em;
  height: 100%;
  z-index: 800;
  background: #111111;
  display: block;
  height: 100%;
  font-size: 15px;
  transition: left 0.3s ease-in-out 0s;
  -webkit-transition: left 0.3s ease-in-out 0s;
  -moz-transition: left 0.3s ease-in-out 0s;
  -o-transition: left 0.3s ease-in-out 0s;
}

.nav-expanded nav {
  left: 0;
}

body.nav-expanded {
  -webkit-transform: translateX(300px);
  -moz-transform: translateX(300px);
  -o-transform: translateX(300px);
  transform: translateX(300px);
}

#nav-close {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 24px;
  padding-right: 10px;
}

.main-menu {
  position: absolute;
  top: 0;
  width: 20em;
  right: 5em
}

.main-menu li {
  margin-left: 20px;
  font-size: 18px;
  padding: 12px;
}

.main-menu li a {
  color: #fff;
  text-decoration: none;
  font-family: "Montserrat", arial;
  text-transform: uppercase;
}

.main-menu li a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.main-menu li .sub-nav {
  border-bottom: 0px;
  padding: 4px;
}

.main-menu li p {
  color: #fff;
  font-size: 18px;
}

.main-menu a .caret {
  width: 0;
  height: 0;
  display: inline-block;
  vertical-align: top;
  border-top: 4px solid #4f5963;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  margin-top: 8px;
}

.main-menu a:hover .caret {
  border-top-color: #4f5963;
}

.main-menu li.open > a > .caret {
  border-top: none;
  border-bottom: 4px solid #4f5963;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.main-menu li.open > a:hover > .caret {
  border-bottom-color: #4f5963;
}

.icon:before {
  font-family: 'arrows';
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  content: 'a';
}

.main-menu li > a > span.icon {
  float: right;
  margin: 0.1em 1.7em -0.1em 0;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.main-menu li > a:hover > span.icon {
  float: right;
  margin: 0.1em 0.8em -0.1em 0;
  opacity: 1;
}
/* Small devices (tablets, 768px and up) */
/*==========  Non-Mobile First Method  ==========*/

.logo-icon {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -25px
}

.header {
  width: 80%;
  margin: 0 auto;
  padding-left: 70px;
}

.header h1 {
  font-size: 68px;
}
/* make keyframes that tell the start state and the end state of our object */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateX(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0px);
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
    -moz-transform: translateX(-100px);
  }
  to {
    opacity: 1;
    -moz-transform: translateX(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.fade-in {
  opacity: 0;
  /* make things invisible upon start */
  
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  
  -moz-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 1;
  animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 1;
  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}

.fade-in.one {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
  background-color: #fff;
  box-shadow: rgb(217, 217, 218) 1px 1px, rgb(217, 217, 218) 2px 2px, rgb(217, 217, 218) 3px 3px, rgb(217, 217, 218) 4px 4px, rgb(241, 241, 242) 5px 5px;
  padding: 20px;
  min-height: 90%;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.acUnit {
  display: none;
  opacity: 0;
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  position: relative;
  left: -100px;
}

.view {
  opacity: 1;
  left: 0;
}

.acTitle {
  opacity: 1;
  cursor: pointer;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.grey {
  opacity: .25;
}

.media-list li {
  font-size: 24px;
  font-weight: 500;
  cursor: pointer
}
/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {
  .nav-col {
    position: relative;
    width: 5em;
    height: 100%;
    background-color: #111111;
    z-index: 999999999999999;
    cursor: pointer;
    text-align: center
  }
  .leftside {
    height: auto;
    text-align: center
  }
  .header {
    padding-left: 75px;
    width: auto;
  }
  .rightside .col-md-10 {
    margin: 0 auto;
    float: none;
  }
  .media-list li {
    font-size: 18px;
  }
}
/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {
  .header h1 {
    font-size: 58px;
  }
  .leftside h1.title {
    font-size: 40px;
    padding: 20px 0;
  }
  .leftside h2 {
    font-size: 18px;
  }
  .leftside h3 {
    font-size: 16px;
  }
  .header {
    float: none;
    text-align: center;
    margin: 0 auto;
    width: 100%
  }
  .nav-col {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 5px;
    background-color: #111111;
    z-index: 999999999999999;
    cursor: pointer;
    text-align: center;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  nav {
    position: absolute;
    width: 100%;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  .logo-icon {
    height: 30px;
    width: 30px;
    position: absolute;
    top: 50%;
    right: 0px;
    margin-top: -15px;
    right: 50%;
    margin-right: -15px;
  }
  .navbar-toggle {
    float: left
  }
  .header {
    padding: 70px 0
  }
  .rightside {
    padding: 20px;
  }
  .controls {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    left: 0;
  }
  .controls .carousel-control.right {
    margin: 0 auto;
    position: static;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    display: block;
    font-size: 30px;
    height: 50px;
    width: 50px;
    padding: 10px;
  }
  .carousel-control span {
    text-align: center;
    position: static;
    top: auto;
    left: auto;
    z-index: auto;
    display: inline-block;
    height: 50px;
    width: 50px;
    /* margin-top: -30px; */
    /* margin-left: -30px; */
  }
}
/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {
  .header h1 {
    font-size: 48px;
  }
  .media-list li {
    font-size: 14px;
  }
  .main-menu {
    position: absolute;
    top: 0;
    width: 20em;
    right: 0em
  }
  .leftside {
    text-align: left;
    height: auto;
  }
  .leftside h1.title {
    font-size: 30px;
    padding: 0px;
  }
  .leftside h2 {
    font-size: 18px;
  }
  .leftside h3 {
    font-size: 16px;
  }
  .rightside {
    padding-left: 10px;
  }
  .header {
    padding: 20px;
  }
}
/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
  .header h1 {
    font-size: 36px;
  }
  .blockquote-box .square {
    width: 100px;
    /* height: 100%; */
    /* min-height: 80px; */
    /* margin-right: 22px; */
    
    margin: 0 auto;
    text-align: center !important;
    background-color: transparent;
    padding: 20px 0;
  }
  .square.pull-left {
    float: none !important
  }
  .blockquote-box {
    border-right: none;
    margin-bottom: 25px;
    text-align: center;
  }
  /* Custom, iPhone Retina */
  
  @media only screen and (max-width: 320px) {}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" />