How We Do It - Primary Page Template

In this example below you will see how to do a How We Do It - Primary Page Template with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by cabplanalp, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright cabplanalp ©
  • HTML
  • CSS
  • JavaScript
    <!-- FOR DEMO ONLY -->
<nav class="header stalker">
  <div class="container">
    <img src="http://www.conversantmedia.com/sites/all/themes/my_theme/images/conversant_logo.png" />
    <ul class="pull-right">
      <li>What we do</li>
      <li class="active">How we do it</li>
      <li>What We Know</li>
      <li>Who We are</li>
      <li>Contact </li>
    </ul>

  </div>
</nav>
<!--<svg width="0" height="0" id="firefox-clip">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1 0, 1 0.95, 0.52 0.95, 0.5 1, 0.48 0.95, 0 0.95 " />
    </clipPath>
  </defs>
</svg>
<svg width="0" height="0" id="mobile-clipping">
  <defs>
    <clipPath id="mobile-clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1 0, 1 0.95, 0.54 0.95, 0.5 1, 0.46 0.95, 0 0.95 " />
    </clipPath>
  </defs>
</svg>-->
<div class="nav-container hidden-sm hidden-xs">

  <ul class="fixed-navigation">
    <!--<li class="first-li">&#9675;</li>-->
    <li class="hide"><a href="#Top">Top</a></li>
    <li><a href="#Display">Display</a></li>
    <li><a href="#Mobile">Mobile</a></li>
    <li><a href="#Video">Video</a></li>
    <li><a href="#CRM">CRM</a></li>
    <li><a href="#Creative">Creative</a></li>
  </ul>

</div>


<div class="theTron animated panel-section dark" id="Top">
<div id="kb-bg"></div>
  <div class="jcontent">
    <div class="container">
      <div class="col-md-offset-4 col-md-8  col-sm-offset-1 col-sm-10">
        
        <h1 class="">BETTER RESULTS<br>WITH THE INDUSTRY'S<br> 
        <span class="gold"> BEST PRODUCTS</span></h1>
        <p class="subtitle">
          Meet the four building blocks of the
          <br/> programs that drive 5.1+ million
           <br/>purchases every.
        </p>
      </div>
      
      <div class="down-caret gold col-md-offset-4 col-md-7 hidden-sm hidden-xs" id="caret0_arrow">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 80 80" style="enable-background:new 0 0 80 80; max-width:50px" xml:space="preserve">
        <style type="text/css">
          .st0 {
            fill: none;
            stroke: #bd9b60;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10;
          }
          
          .st1 {
            fill: none;
            stroke: #bd9b60 !important;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-miterlimit: 10;
          }
        </style>
        <g>
          <polyline id="XMLID_2_" class="st0" style="stroke:#bd9b60" points="59,31.7 40,50.7 21,31.7 	" />
          <circle id="XMLID_1_" class="st1" cx="40.1" cy="39.3" r="35.7" />
        </g>
      </svg>
    </div>
      
    </div>
        <div class="subnav-icons visible-sm">
       <div class="container">
         <div class="col-sm-offset-1 col-sm-10">
           <ul>
          <li class="nav-icons" id="caret1a" data-anchor="#Display">
          
          <h4>DISPLAY</h4>
        
        </li>
        <li class="nav-icons" id="caret2" data-anchor="#Mobile">
        
          <h4>MOBILE</h4>
         
        </li>
        <li class=" nav-icons" id="caret3" data-anchor="#Video">
        
          <h4>VIDEO</h4>
       
        </li>
        <li class="nav-icons" id="caret4" data-anchor="#CRM">
          
          <h4>CRM</h4>
          
        </li>
      <li class="nav-icons" id="caret5" data-anchor="#Creative">
          
          <h4>Creative</h4>
          
        </li>             
    </ul>
</div></div>      
</div>
        
  </div>

  <div class="clearfix"></div>

</div>


<section class="panel-section" id="Display">
  <div class="container">
 <!-- <div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://placehold.it/200x550" class="infographic-image img-responsive" /></div> --><div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://dev.conversantmedia.com.vclk.net/system/files/placeholder_infographic_1reachrecognition.png" class="infographic-image img-responsive"></div>
    <div class="col-md-offset-4 col-md-7 col-sm-offset-1 col-sm-10">

      <h4 class="mobile-header visible-sm visible-xs">Display</h4>
      <h3 class="small-first italic-headline gold">Drive conversions with</h3>
      <h2 class="large-second">HIGHLY TARGETED DISPLAY.</h2>
      

      <p>We deliver display ads across 3.3 million websites via 6,000 direct publisher integrations.</p>

      <p>They’re targeted to consumers whom we understand across 7,000+ dimensions. </p>

      <p>And we work with all leading ad exchanges, plus our own private exchange, so we’re confident that we know the audience and have high levels of quality, viewability and brand safety.</p>
      
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 nopadding">
                <a href="#" class="btn btn-black btn-block">
        Learn More
        </a>

    </div>
    <div class="clearfix"></div>
  </div>
</section>


<section class="fw-hover-container panel-section dark" id="Mobile">
  <div class="container">
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://dev.conversantmedia.com.vclk.net/system/files/placeholder_infographic_2individualizedprofiles.png" class="infographic-image img-responsive"></div>
    <div class="col-md-offset-4 col-md-7 col-sm-offset-1 col-sm-10">
      <h4 class="mobile-header visible-sm visible-xs">Mobile</h4>

      <h3 class="small-first italic-headline gold">Accurately reach</h3>
      <h2 class="large-second">MILLIONS OF MOBILE USERS.</h2>
      <p>You’ll get a single view of each target consumer, rolling up their identity and activity across all of their (average 3.4) devices, thanks to the most accurate, commerce-driven matching technology in the industry.</p>

      <p>We reach over 90% of the iOS and Android universes without being dependent on device IDs or cookies. And we bring you measurements and insights to optimize your campaign for cross-device activity, store visits and more. </p>
      
           <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 nopadding">
                <a href="#" class="btn btn-white btn-block">
        Learn More
        </a>

    </div>
    <div class="clearfix"></div>
  </div>

</section>

<!-- //End Full Width Section -->
<section class="panel-section" id="Video">
  <div class="container">
 <!-- <div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://placehold.it/200x550" class="infographic-image img-responsive" /></div> --><div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://dev.conversantmedia.com.vclk.net/system/files/placeholder_infographic_3decisioningdelivery.png" class="infographic-image img-responsive"></div>
    <div class="col-md-offset-4 col-md-7 col-sm-offset-1 col-sm-10">

      <h4 class="mobile-header visible-sm visible-xs">Video</h4>
      <h3 class="small-first italic-headline gold">Run ads against</h3>
      <h2 class="large-second">PERFECTLY MATCHED VIDEOS.</h2>
      

      <p>Our advanced proprietary video technology watches and analyzes digital content that covers more than ~28 million viewing hours per month, so we can understand on a deep level, and at an enormous scale, what they’re about and who’s watching them.</p>

      <p>We’ll give your brand the right exposure and captivate your target audience through engaging content across all screens. And your messaging will be delivered in a brand-safe, relevant setting every time. </p>

      
      
     <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 nopadding">
                <a href="#" class="btn btn-black btn-block">
        Learn More
        </a>

    </div>
    <div class="clearfix"></div>
  </div>
</section>

<!-- //End Full Width Section -->


<section class="fw-hover-container panel-section dark" id="CRM">

  <div class="container">
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://dev.conversantmedia.com.vclk.net/system/files/placeholder_infographic_4measurementsinsight.png" class="infographic-image img-responsive"></div>
    <div class="col-md-offset-4 col-md-7 col-sm-offset-1 col-sm-10">
      <h4 class="mobile-header visible-sm visible-xs">CRM</h4>

      <h2 class="large-first" style="">GET CLOSER TO CUSTOMERS</h2>
      <h3 class="small-second italic-headline gold">than ever before.</h3>
      <p>Our CRM product is built on the anonymous transactional data of more than 4,000 retailers.</p>
      <p>Quickly and precisely match all your data to the right people, for one persistent view of each customer across devices, channels and media formats. Have ongoing, personalized conversations with millions, on mobile, video, display and social, varying your messages along the purchase funnel. </p>

      <p>Closed-loop measurement gives you a full view of your incremental impact, across buying channels. With our incredible scale and persistence, you’ll grow your audience over time, increasing market share and brand love.</p>
      
      <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 nopadding">
                <a href="#" class="btn btn-white btn-block">
        Learn More
        </a>

    </div>
    <div class="clearfix"></div>
  </div>
</section>

<!-- //End Full Width Section -->

<!-- <section class="bg-gold cta-section" id="Creative">
  <div class="content-container">
    <div class="container">
      <div class="col-lg-12">

        <h3 class="italic-headline" style="margin-top:0;">
        See more of what we can do for you.
        </h2>

              
               <div class="col-sm-offset-5 col-sm-2 text-center">
                <a href="#" class="btn  btn-white btn-block">
        Creative Showcase
        </a>
               <!-- <hr style="border:0;" class="hidden-lg" />
              </div>
              <div class="col-md-4">
                <a href="#" class="btn btn-white btn-block">
        For Agencies
        </a>


              </div> 


      </div>


      <div class="clearfix"></div>
    </div>
  </div>
</section> -->
  
  <section class="panel-section" id="Creative">
  <div class="container">
 <!-- <div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://placehold.it/200x550" class="infographic-image img-responsive" /></div> --><div class="col-lg-2 hidden-md hidden-sm hidden-xs infographic"><img src="http://dev.conversantmedia.com.vclk.net/system/files/placeholder_infographic_3decisioningdelivery.png" class="infographic-image img-responsive"></div>
    <div class="col-md-offset-4 col-md-7 col-sm-offset-1 col-sm-10">

      <h4 class="mobile-header visible-sm visible-xs">Creative</h4>
    <h2 class="large-first" style="">SMART, DYNAMIC CREATIVE.</h2>
      <h3 class="small-second italic-headline gold">tailored to your customers.</h3>
      

      <p>We produce some of the industry’s smartest and most effective marketing, branding and digital media—and we develop the systems to optimize and personalize it. All of which strengthens your brand message and boosts your incremental ROAS. </p>
      
      <p>Other solutions might use a wireframe for all retailers, rotating different product images and calling it dynamic. Not us. We collaborate with you to understand your brand guidelines and messaging strategy, and then deliver unique, highly customized ads, faithfully representing your brand with exceptional creative execution.  </p>

   <!--   <p>Among the services we provide:</p>
      
      <ul class="col-box">
	<li><strong>	Art Direction.</strong> Executing flawless design.</li>
	<li><strong>	Copywriting.</strong> Creating stories that connect consumers to your brand.</li>
	<li><strong>Digital Production.</strong> Managing the creative during production and throughout the campaign.</li>
	<li><strong>Creative Technology.</strong> Bridging ad-unit innovation and cutting-edge technologies.</li>
 <li><strong>Creative Operations Management.</strong> Optimizing client-service relationships.</li>
 <li><strong>User Experience.</strong> Refining the science behind usability and Human-Computer Interaction.</li>
</ul>-->

      
      
     <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 nopadding">
                <a href="#" class="btn btn-black btn-block">
        See Our Creative
        </a>

    </div>
    <div class="clearfix"></div>
  </div>
</section>

<!-- //End Full Width Section -->

<footer style="background:#000; min-height:300px"></footer>

/*Downloaded from https://www.codeseek.co/cabplanalp/how-we-do-it-primary-page-template-QjqpLd */
    /* DONT COPY THE CSS BELOW THIS LINE */

@import url("https://fontastic.s3.amazonaws.com/Zn8UrYD3yreE6iPteokSUZ/icons.css");
nav {
  background: transparent;
  padding: 20px 0;
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  z-index: 999999;
}

nav img {
  width: 150px;
}

nav .container {
  width: 1260px;
}

nav ul {
  width: 52%;
  margin: 0;
  padding: 0;
}

nav ul li {
  list-style: none;
  float: left;
  padding: 5px 20px;
  color: white;
  text-transform: uppercase;
  font-family: Gibson-Regular;
}

nav ul li.active{
  text-decoration:underline;
}

body {
  /*padding-top: 70px;*/
}
/* DONT COPY THE CSS ABOVE THIS LINE */

.container{
  min-width:100%;
}

.lock-width{
  max-width:900px;
}

html,
body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.m0 {
  margin: 0 !important;
}
.btn {
    -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  
}
.text-bold {
  font-weight: 700;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-right {
  text-align: right
}

h1 {
  font-family: Gibson-Semibold;
  text-transform: uppercase;
  letter-spacing: 1.5px
}

h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Gibson-Semibold;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #000;
}

h2 {
  font-size: 50px;
  font-family: Gibson-Semibold;
}

h3 {
  font-size: 32px
}

h3.italic-headline {
  font-family: "Gibson-SemiboldIt";
  text-transform: none;
}

h2.subheader {
  text-align: center;
  font-size: 30px;
  padding-bottom: 30px;
  letter-spacing: 0.5px;
}

p {
  font-size: 18px;
  font-family: Gibson-Light;
  line-height: 1.6em;
  margin-bottom: 24px;
}

.nav-container {
  display: block;
  color: white;
  position: fixed;
  width: 160px;
  top: 20%;
  left: 22%;
  z-index: 10;
  height: 80%;
  color: #373b37;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

ul.fixed-navigation {
  height: 100%;
  border-left: 1px solid #bd9b60;
  padding-top: 10px;
    list-style-type:none;
  padding-left:0px;
}

ul.fixed-navigation li {
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
  
}

ul.fixed-navigation li:hover {
  border-left: 5px solid #fff;
}

ul.fixed-navigation li.light-bg:hover {
  color: #bd9b60;
  border-left: 5px solid #bd9b60;
}

ul.fixed-navigation li.active.light-bg {
  opacity: 1;
  border-left: 5px solid #000;
}

ul.fixed-navigation li.active.dark-bg {
  opacity: 1;
  border-left: 5px solid #fff;
}

ul.fixed-navigation li.dark-bg:hover {
  border-left: 5px solid #bd9b60;
}

ul.fixed-navigation li.active.light-bg a {
  opacity: 1;
}

ul.fixed-navigation li.active.dark-bg a {
  opacity: 1;
}

ul.fixed-navigation li.light-bg a {
  /*opacity: 0.1;*/
  color: black;
}

ul.fixed-navigation li.dark-bg a {
 /* opacity: 0.1;*/
  color: white;
}

ul.fixed-navigation li.light-bg a:hover, ul.fixed-navigation li.dark-bg a:hover {
  color: #bd9b60;
}

div.active ul.fixed-navigation li {
  opacity: 1;
  margin-top: 0;
}

ul.fixed-navigation li a {
  color: white;
  display: block;
  width: 100%;
  text-align: left;
  color: white;
  opacity: 1;
  cursor: pointer;
  font-family: "Gibson-Semibold";
  text-transform: uppercase;
  padding: 25px 0 25px 20px;
  -webkit-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
}

ul.fixed-navigation li:first-child {
  position: absolute;
  top: -23px;
  padding: 0;
  margin: 0;
  font-size: 24px;
  left: -7px;
  color: #bd9b60;
  font-weight: 800;
}

ul.fixed-navigation li a:hover {
  text-decoration: none;
  padding-left: 40px;
}

ul.fixed-navigation li.active {
  border-left: 5px solid #000;
}

ul.fixed-navigation li.active:hover {
  border-left: 5px solid #000;
}

.get-started {
  cursor: pointer !important;
  z-index: 999;
  display: block;
  width: 100%;
  font-size: 50px;
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  left: 0;
  line-height: .5;
}

.banded-box {
  width: 100%;
  margin: 0 auto;
  ;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}

.jcontent {
  opacity: 1;
 /* transform: translate3d(0,0,0) scale(1);
    background-blend-mode: overlay;
    background-color: #666;
    background-image: url("http://www.conversantmedia.com/sites/default/files/backgrounds/main-cb1.jpg");
    background-position: 50% 0;
  background-size: cover; */

}

/* Loaded image container 
.loaded .theTron .jcontent {
  transform: scale(1.1);
  transition: 3.5s transform; 
}*/

#kb-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  z-index: -1;
  background: #000;
  background-size: cover;
  opacity: .3 ;
  transform: translate3d(0,0,0) scale(1.0);
  /*background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/home-img.jpg');*/
  /*background-image:url('http://dev.conversantmedia.com.vclk.net/sites/default/files/backgrounds/PaddleBoarders_Banner_1200x800.jpg');*/
  background-image:url('http://dev.conversantmedia.com.vclk.net/sites/default/files/backgrounds/GirlKidBeach_Banner_1200x800_flip.jpg');
  background-position: center center;
} 

/* Loaded image container */
.loaded #kb-bg {
  transform: translate3d(50px,0px,0) scale(1.10);
  transition: 15s transform; 
}


p.featured {
  font-size: 22px;
  font-family: Gibson-Regular;
  margin-bottom: 20px;
  line-height: 1.3em
}

.columns {
  -webkit-column-count: 2;
  width: 100%;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}

.panel-section {
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: #000;
  height: auto;
  padding-bottom: 10%;
  margin: 0;
  position: relative;
  -webkit-transition: all 500ms ease-out .5s;
  -moz-transition: all 500ms ease-out .5s;
  -o-transition: all 500ms ease-out .5s;
  transition: all 500ms ease-out .5s;
}

.panel-section.dark {
  /*background: #555;*/
  background:#000;
  background-size: cover;
  /*background-blend-mode: multiply;*/
  color: white;
  background-repeat: no-repeat;
}

.panel-section.dark h1,
.panel-section.dark h2,
.panel-section.dark h3,
.panel-section.dark h4,
.panel-section.dark h5,
.panel-section.dark h6,
.panel-section.dark p,
.panel-section.dark a {
  color: white
}

.panel-section h2 {
  /*margin-bottom: 0;*/
  line-height: .9;
  margin-top: 20%
}

.panel-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
}

.panel-section h3.small-first {
  margin-bottom: 5px;
  line-height: .9;
  margin-top: 20%;
}

.panel-section h2.large-first {
   margin-bottom: 0;
  line-height: .9;
  margin-top: 20%
}

.panel-section h2.large-second {
  margin-top: 0;
  /*margin-bottom: 20px;*/
}

.panel-section h3.small-second {
  margin-top: 0;
  margin-bottom: 20px;
}

#Mobile:before {
  /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/mobile-lp.jpg);*/
  content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  opacity: 0.3;
  background-color:#000;
    background-image: url(http://dev.conversantmedia.com.vclk.net/sites/default/files/backgrounds/GirlCar_Banner_1200x800_zoomout.jpg);
  background-repeat: no-repeat;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

#CRM:before {
  /*background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/lp.jpg)*/
  content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  opacity: 0.3;
  background-color:#000;  
  background-image: url(http://dev.conversantmedia.com.vclk.net/sites/default/files/backgrounds/AsianFam_Banner_1200x800.jpg);
    background-repeat: no-repeat;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.cta-section {
  text-align: center
}

.cta-section h3 {
  color: white;
}

.hide-it {
  opacity: 0
}

.btn {
  font-family: Gibson-Semibold;
  text-transform: uppercase;
/*  letter-spacing: 2px;
  padding: 16px 15px 13px 15px;
  font-size: 14px;*/
}

.nav-icons {
  cursor: pointer;
  text-align: left;
}

.nav-icons img {
  padding: 0 60px;
}

.nav-icons h4 {
  text-align: left;
  font-size: 14px;
}

.nav-icons i {
  font-size: 20px;
}

.nav-icons p {
  font-size: 12px;
  text-transform: uppercase;
  font-family: Gibson-Regular;
  letter-spacing: .5px;
  text-decoration: underline;
  color: #888;
}

.bg-gold {
  background-color: #bd9b60;
  color: white;
  border-radius: 0;
}

.vicon {
  max-width: 30px;
  opacity: 0.4;
  margin-right: 15px;
  cursor: pointer !important
}

::selection {
  background-color: #bd9b60;
  color: #fff;
}

.overlay {
  background: #bd9b60;
  top: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999999999;
}

.loader {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.loader svg path,
.loader svg rect {
  fill: #ffffff;
}

.hiding {
  opacity: 0;
}

html.touch .hiding {
  opacity: 1
}

a.back-to-top {
  text-decoration: none;
  font-family: "Gibson-Semibold";
  color: #999;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  border: 1px solid #999;
  text-align: center;
  padding: 3px;
  margin: 25px auto;
}

.gold {
  color: #bd9b60 !important;
  -webkit-transition: color 1s ease-in;
  -moz-transition: color .5s ease-in;
  -o-transition: color .5s ease-in;
  -ms-transition: color .5s ease-in;
  transition: color .5s ease-in;
}

.bold {
  font-family: Gibson-Semibold;
}

.black {
  color: #1d1d1d
}

.theTron {
  display: block;
  z-index: 1;
  padding: 0;
  width: 100%;
  min-height: 80%;
  position: relative;
  border-radius: 0px;
  color: white;
  text-align: left;
  text-transform: uppercase;
  margin: 0;
  background-color: #000 !important;
  -webkit-transition: all 1000ms linear;
  -moz-transition: all 1000ms linear;
  -ms-transition: all 1000ms linear;
  -o-transition: all 1000ms linear;
  transition: all 1000ms linear;
  overflow: hidden;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 52% 95%, 50% 100%, 48% 95%, 0 95%);
  -moz-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 52% 95%, 50% 100%, 48% 95%, 0 95%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 52% 95%, 50% 100%, 48% 95%, 0 95%);
  -webkit-clip-path: url("#clip-shape");
  clip-path: url("#clip-shape");
}

#firefox-clip,
#mobile-clipping {
  position: absolute;
  top: -50px;
}

#video-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  z-index: -1;
  background: #000;
  background-size: cover;
  opacity: .5;
}

.btn-gold {
  font-size: 15px;
  letter-spacing: .5px;
  padding: 15px 0 15px;
  border-radius: 0px;
  font-family: 'Gibson-Semibold', sans-serif;
  text-transform: uppercase;
  background-color: transparent;
  color: #bd9b60;
  border-radius: 0;
  font-family: Gibson-Semibold;
  border-color: #bd9b60;
}

.btn-gold:hover {
  
  color:#bd9b60;
  background:rgba(189,155,96, 0.2)
}

.btn-white {
  font-size: 15px;
  letter-spacing: .5px;
  padding: 15px 0 15px;
  border-radius: 0px;
  font-family: 'Gibson-Semibold', sans-serif;
  text-transform: uppercase;
  background-color: transparent;
  color: white;
  border-radius: 0;
  border-color: white;
}

.btn-white:hover {
  color: black !important;
    background: rgba(255,255,255, 1);
}

.btn-black {
  font-size:15px;
  letter-spacing: .5px;
  padding: 15px 0 15px;
  border-radius: 0px;
  font-family: 'Gibson-Semibold', sans-serif;
  text-transform: uppercase;
  background-color: transparent;
  color: black;
  border-radius: 0;
  border-color: black;
}

.btn-black:hover {
  color:white;
  background:rgba(0,0,0, 1)
}

.theTron h1 {
  margin: 25% 0 0 0;
  letter-spacing: 1px;
  font-size: 60px;
  line-height: 1;
}

.theTron .subtitle {
  text-transform: none;
  letter-spacing: .5px;
  font-size: 24px;
  font-family: "Gibson-SemiboldIt";
  line-height: 1.2;
}

.down-caret {
    cursor: pointer !important;
    text-align: left;
    position: absolute;
    bottom: 40px;
    padding: 0;
  background-color:transparent;
  z-index:9999;
  width: 50px;
}

.anchor {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
  top: -40px;
  left: 0;
  visibility: hidden;
}

.title-header {
  font-family: Gibson-Regular;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 20px 40px;
  width: 25%;
  text-align: center;
  margin: 10% 0 15px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 3s linear 3s forwards;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 3s linear 3s forwards;
}

.content-container {
  padding: 85px 0;
}

.anchor {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  z-index: -1;
  top: -73px;
  left: 0;
  visibility: hidden;
}
/***** JUMBOTRON TABLET SUBNAV *****/

.subnav-icons {
  background: rgba(0, 0, 0, 0.3);
  margin-top: 30px;
}

.subnav-icons ul {
  float: left;
  padding: 30px 0;
  margin: 0
}

.subnav-icons ul li {
  float: left;
  padding: 0px 15px;
  border-right: 1px solid #bd9b60
}

.subnav-icons ul li:first-child {
  padding: 0 10px 0 0
}

.subnav-icons ul li:last-child {
  border-right: 0
}

.subnav-icons ul li h4 {
  margin: 0;
}
/***** THIS ENDS JUMBOTRON TABLET SUBNAV *****/

@media (min-width: 1400px) {}

@media (min-width: 1200px) {}

@media (max-width: 992px) {
  .nav-icons img {
    padding: 0 20px;
  }
  .black-box-content {
    border-right: 0px solid #000;
    margin-bottom: 25px;
  }
  .nav-container.active {
    height: 65px
  }
}

@media (max-width: 768px) {
  .panel-section {
    height: auto;
    min-height: 0;
    padding-bottom: 10%
  }
  .nav-icons img {
    padding: 0 20px;
  }
  .panel-section h2 {
    margin-top: 40px;
  }
  .panel-section h4.mobile-header {
    padding-left: 15px;
    border-left: 1px solid #bd9b60;
    margin-top: 20%;
    font-size: 18px
  }
  .panel-section img {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.3);
    opacity: .5;
  }
  .theTron {
    min-height: 66%;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 54% 95%, 50% 100%, 46% 95%, 0 95%);
    -moz-clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 52% 95%, 50% 100%, 48% 95%, 0 95%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 52% 95%, 50% 100%, 48% 95%, 0 95%);
    -webkit-clip-path: url("#mobile-clip-shape");
    clip-path: url("mobile-clip-shape");
  }
  .theTron h1 {
    font-size: 50px
  }
  .theTron .subtitle {
    font-size: 24px;
    padding-top: 10px
  }
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 24px
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  .content-container {
    padding: 0 0;
  }
  h2.subheader {
    font-size: 20px;
  }
  .cta-section {
    padding: 50px 0;
  }
  .hide-it {
    opacity: 1;
  }
  .theTron h1 {
    font-size: 40px
  }
  
  #kb-bg {
  transform: none;
} 

/* Loaded image container */
.loaded #kb-bg {
  transform: none;
  transition: none; 
}
  
  
  .title-header {
    font-family: Gibson-Regular;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 10px 0 8px 0;
    border: 2px solid #ffffff;
    width: 60%;
    text-align: center;
    margin: 15px auto;
    line-height:
  }
  .challenge,
  .solution {
    padding: 20px 15px;
  }
  .banded-box {
    padding-top: 40px;
    padding-bottom: 40px
  }
  .stat-header span {
    display: block;
    width: 100%
  }
  .panel-section {
    min-height: 0;
    padding: 25px 0;
  }
  .panel .img-hover h3,
  .theTron h1 {
    font-size: 40px
  }
  .theTron .subtitle {
    font-size: 18px
  }
  .panel img {
    max-width: auto;
    width: auto;
    /* margin: -20% 0; */
    
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter: grayscale(100%);
    transform: scale(1.3);
    opacity: .5;
  }
  .gold-circle {
    width: 70px;
    height: 70px;
    border-radius: 300px;
    background: ;
    padding: 22px 0;
    border: 2px solid #bd9b60;
  }
  .gold-circle.h1 {
    font-size: 24px
  }
}

.subnav-icons ul, .subnav-icons ul li {
list-style-type:none;
}

.infographic{
float:left;
position:absolute;
top: 20%;
/*transform: translateY(-50%);*/
padding:0px;
  left:45px;
}

.infographic-image{
float:right;
max-width:300px;
}

.nopadding{
  padding:0px;
}


/*Downloaded from https://www.codeseek.co/cabplanalp/how-we-do-it-primary-page-template-QjqpLd */
    // scroll for down arrows
$('#caret0_arrow').click(function() {
  $('html, body').animate({
    scrollTop: $('#Display').offset().top - 70
  }, 750);
  return false;
});

//subnav scrolling
$('.subnav-icons .nav-icons').click(function() {
  var getAnchor = $(this).data('anchor');

  $('html, body').animate({
    scrollTop: $(getAnchor).offset().top - 120
  }, 1750);
  return false;
});

// scroll body to first slide on click

if ($('html').hasClass("no-touch")) {

  if ($('html').hasClass("no-touch")) {

    $('.animated').appear(function() {
      var element = $(this);
      var animation = element.data('animation');
      var animationDelay = element.data('delay');
      if (element.hasClass('getScale')) {
        element.parents('.fw-hover-container').find('.img-content').addClass('scaleIt');
      }

      if (animationDelay) {
        setTimeout(function() {
          element.addClass(animation + " visible");
          element.removeClass('hiding');
          if (element.hasClass('counter')) {
            element.find('.value').countTo();
          }
        }, animationDelay);
      } else {
        element.addClass(animation + " visible");
        element.removeClass('hiding');
        if (element.hasClass('counter')) {
          element.find('.value').countTo();
        }

      }

    }, {
      accY: -0
    });
  };

  if ($('.img-hover').hasClass('visible')) {
    $(this).parents().find('.img-content').addClass('scaleIt');
  }

}

// Trigger class name on load
window.onload = function() {
  document.body.className += ' loaded'
};

$('.overlay').delay(1200).fadeOut(400, function() {
  $('.jcontent').addClass("fadeInUp");
});

$('.fixed-navigation').onePageNav({
  currentClass: 'active',
  changeHash: true,
  scrollSpeed: 750,
  scrollThreshold: .5,
  easing: 'swing',
  scrollChange: function() {
    var getTarget = $('li.active a').attr("href");

    if ($(getTarget).hasClass("dark")) {
      $('.fixed-navigation li').removeClass("light-bg");
      $('.fixed-navigation li').addClass("dark-bg");
     }
     else {
      $('.fixed-navigation li').removeClass("dark-bg");
      $('.fixed-navigation li').addClass("light-bg");
    }
    
      if ($(getTarget).hasClass("footer")) {
      $('.nav-container').fadeOut(200);
      
     } else {
       
         $('.nav-container').fadeIn(200);
     }
    

  },
  end: function() {

    var getTarget = $('li.active a').attr("href");

    if ($(getTarget).hasClass("dark")) {
      $('.fixed-navigation li').removeClass("light-bg");
      $('.fixed-navigation li').addClass("dark-bg");
    } else {
      $('.fixed-navigation li').removeClass("dark-bg");
      $('.fixed-navigation li').addClass("light-bg");

    }
    
    if ($(getTarget).hasClass("cta-section")) {
      $('.nav-container').fadeOut(200);
      
     } else {
       
         $('.nav-container').fadeIn(200);
     }

  }
});


$('.nav-container li').hover(function(){
  
  $('.nav-container li').css('opacity', '1')
  
  $(this).css('opacity', '1')
    $('.first-li').css('opacity', '1')
  
}, function(){
 
   //$('.nav-container li').css('opacity', '.1');
  
  //$('.nav-container li.active').css('opacity', '1')
  
 
});

var scroll_start = 0;
   var startchange = $('nav.header .container');
   var offset = startchange.offset();
    if (startchange.length){
  $(document).scroll(function() { 
     scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        
        //as you scroll
         $(".header").css('background-color', 'rgba(0,0,0,0.85)');

        
        //$('ul.fixed-navigation li.dark-bg > a').css('opacity','.1');
   
        //$('ul.fixed-navigation li.active.light-bg a').css('opacity','1');
        //$('ul.fixed-navigation li.active.dark-bg a').css('opacity','1');
 
        
       } 
    
    //at the top
    else {
          $('.header').css('background-color', 'transparent');
         //$('li.dark-bg').removeAttr('class').attr('class', '');
         //$("ul.fixed-navigation li.dark-bg a").css("opacity", "1");
         
         //$('ul.fixed-navigation li.dark-bg > a').css('opacity','1');
         //$('ul.fixed-navigation li.light-bg > a').css('opacity','.1');
         //$('ul.fixed-navigation li.active.dark-bg a').css('opacity','1');
         //$('ul.fixed-navigation li.active.light-bg a').css('opacity','1');
         
       }
   });
    }

Comments