<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/simpson77/pen/RaMVZe?depth=everything&order=popularity&page=65&q=iframe&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://codepen.io/simpson77/pen/ZQqyBo.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'><link rel='stylesheet prefetch' href='https://codepen.io/simpson77/pen/5130ec77521fe795fa5f7d49b55cca4b.css'><link rel='stylesheet prefetch' href='//file.myfontastic.com/MXYirDHrqepxks3owwDtM6/icons.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Open+Sans:600,400,300,100,300italic,400italic,600,600italic'>
<style class="cp-pen-styles">::selection {
background: #00af66;
color: white;
}
html,
#main {
min-height: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 62.5%;
overflow-x: hidden;
}
body {
padding-top: 81px;
height: 100%;
min-height: 100%;
background: #fff;
font-size: 1.8rem;
line-height: 1.6;
font-family: 'Open Sans', sans-serif;
color: #444;
font-weight: 100;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
nav {
padding: 15px 20px;
height: 80px;
position: fixed;
background: rgba(255, 255, 255, .9);
z-index: 1;
width: 100%;
top: 0;
left: 0;
box-shadow: 0 0px 5px 0 rgba(0, 0, 0, .2);
border: none;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.flexbox-container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.navbar-nav {
position: relative;
top: -150px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.navbar-nav.block {
top: 0
}
.navbar-nav a {
color: #333;
font-size: 1.6rem;
font-weight: 100;
}
.navbar-nav > li {
margin: 0 10px;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:visited,
.navbar-nav > li > a:active,
.navbar-nav > li > a:focus {
background: transparent;
}
.navbar-nav > li > a:hover:before,
.navbar-nav > li > a:visited:before,
.navbar-nav > li > a:active:before,
.navbar-nav > li > a:focus:before,
.navbar-nav > li.active > a:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.navbar-nav > li.active > a {
color: #00af66
}
.navbar-nav > li > a:before {
content: '';
position: absolute;
width: 100%;
height: 3px;
background: #34b5ae;
left: 0;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #34b5ae 0%, #00af66 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #34b5ae 0%, #00af66 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #34b5ae 0%, #00af66 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#34b5ae', endColorstr='#00af66', GradientType=1);
bottom: 15px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-out;
transition: all: 0.3s ease-out;
}
.navbar-nav > li > a {
padding: 29.5px 0;
margin: -15px 0;
overflow: hidden;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.nav li.active {}
.half-page .page-content {
padding: 10%
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Gibson-Light';
text-transform: none;
letter-spacing: 0px;
line-height: 1.15;
margin: 0 0 1.5rem 0;
padding: 0;
color: #212121
}
h1 {
font-size: 4rem
}
h2 {
font-size: 3rem
}
h3 {
font-size: 2.5rem
}
h4 {
font-size: 2.2rem
}
h5 {
font-size: 2rem
}
h6 {
font-size: 1.8rem
}
labels {
font-size: 0.9rem !important
}
p.lead {
font-size: 2.4rem;
margin-bottom: 4rem
}
p {
margin-bottom: 1.5rem
}
img.article {
margin-bottom: 4rem
}
a {
color: #00af66;
font-weight: 400;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
a:hover {
text-decoration: none;
color: #008941
}
.navbar-brand {
float: left;
padding: 0px;
*/ font-weight: 100;
/* line-height: 20px; */
max-height: 60px;
width: 150px;
}
.logo {
max-width: 175px;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}
.white-bg {
background: #ffffff;
}
.grey-bg {
background: #eceeef
}
.green-bg {
background: #00af66;
}
.darkblue-bg {
background: #34495e;
}
.p0 {
padding: 0;
}
.m0 {
margin: 0;
}
.white,
.white h1,
.white h2,
.white h3,
.white h4,
.white h5,
.white h6,
.white h7,
.white p,
.white a {
color: white
}
.padding100 {
padding: 100px 0;
}
.padding75 {
padding: 75px 0;
}
.hover div {
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.parallax {
-webkit-transform: translateZ(0) !important;
-webkit-transform: translateX(0) !important;
-webkit-transform: translateY(0) !important
}
.green-bg div:hover {
background: #00af66;
}
.start-here{
position: absolute;
height: 50px;
z-index: 999999;
bottom: 10px;
width: 100%;
left: 0;
text-align: center;
font-size: 4rem;
}
.scroll-top {
cursor: pointer;
position: fixed;
width: 40px;
height: 40px;
padding: 8px 10px 10px 10px;
text-align: center;
background: rgba(255, 255, 255, .2);
border: 1px solid rgba(0, 0, 0, .2);
bottom: -100px;
right: 10px;
z-index: 9999;
border-radius: 1000px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.scroll-top.block {
bottom: 10px;
}
.scroll-top:hover {
background: rgba(255, 255, 255, 1)
}
.flex-container {
position: relative;
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.longhand {
-webkit-flex-flow: wrap row;
flex-flow: wrap row;
}
.flex-item {
overflow: hidden;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
padding: 75px 3%;
}
.flex-item:before {
opacity: 1;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .5s ease-in-out;
padding: 75px 3%;
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 100%;
z-index: 0;
background: #34b5ae;
/* Old browsers */
background: -moz-linear-gradient(-45deg, #34b5ae 0%, #00af66 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #34b5ae 0%, #00af66 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #34b5ae 0%, #00af66 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#34b5ae', endColorstr='#00af66', GradientType=1);
}
.flex-item:hover:before {
top: 0;
}
.flex-item h4,
.flex-item p {
position: relative;
z-index: 1
}
.flex-icon {
position: relative;
z-index: 1
}
.flex-icon svg {
padding: 15px 0;
max-width: 100px
}
.flex-content {
position: relative;
z-index: 1
}
/*==================================================
= Buttons: =
==================================================*/
.small {
line-height: 1.4;
margin-bottom: 1.4rem
}
.btn {
color: white;
border-radius: 200px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
border: 0;
}
a.btn:hover {
color: #ffffff;
}
.btn-default {
background: #212a33;
}
.btn-white {
background: #fff;
color: #2d2d2d !important;
}
.btn-outline {
background: transparent;
border: 3px solid rgba(255, 255, 255, 1)
}
.btn-green {
background: #00af66;
}
.btn-blue {
background: #0094ef;
}
.btn-blue:hover {
background: #0076bf;
}
.btn-default:hover {
background: #171e23;
color: white
}
/*==================================================
= FORMs: =
==================================================*/
form {
background: #fff;
padding: 10px;
width: 100% !important;
}
.checkbox label,
.radio label {
padding-left: 0;
}
.mktoForm .mktoFormRow {
clear: none !important;
float: left;
width: 45%;
margin: 0 15px;
}
.mktoForm .mktoFormCol,
.mktoForm .mktoFieldWrap {
width: 100% !important
}
.mktoForm .mktoGutter {
float: left;
height: .5em;
}
.mktoField {
display: block;
width: 100% !important;
height: 60px;
padding: 12px 12px !important;
font-size: 1.6rem !important;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #eceeef;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
font-family: "Open Sans" !important;
font-weight: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select.mktoField {
background:#eceeef url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/down-arrow.svg');
background-size:12px;
background-repeat:no-repeat;
background-position:98% 55%;
}
.mktoField:focus {
border-color: #d4d6d7;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
color: #fff;
border: none !important;
border-radius: 1000px;
padding: 0.4em 1em;
font-size: 1em;
background: #0094ef !important;
font-family: "Open Sans";
font-size: 1.8rem !important;
font-weight: 400;
padding: 12px 25px !important;
margin: 25px 0;
display:block;
width:100%;
}
.mktoButtonWrap {
margin-left: 0 !important;
display:block;
width:100%;
}
.mktoButtonRow {
display: inline-block;
position: relative;
width: 100%;
}
label {
font-weight: 100;
font-family: "Open Sans" !important;
font-weight: 100 !important;
width: 100% !important;
font-size: 1.6rem;
}
input[type=checkbox] {
display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: interface;
display: inline-block;
font-weight: 100 !important;
color: #d4d6d7;
font-size: 2rem;
margin-top: -1px;
vertical-align: middle;
}
input[type=checkbox] + label:before {
content: "\68";
}
/* unchecked icon */
input[type=checkbox] + label:before {
letter-spacing: 10px;
}
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\69";
-webkit-transition: all 0.50s;
-moz-transition: all 0.50s;
-o-transition: all 0.50s;
transition: all 0.50s;
}
/* checked icon */
input[type=checkbox]:checked + label:before {
letter-spacing: 12px;
color: #00af66
}
/* allow space for check mark */
/*** custom checkboxes ***/
label {
font-weight: 100
}
input[type=radio] {
display: none;
}
/* to hide the checkbox itself */
input[type=radio] + label:before {
font-family: interface;
display: inline-block;
font-weight: 100 !important;
color: #d4d6d7;
font-size: 2rem;
margin-top: 0px;
vertical-align: middle;
}
input[type=radio] + label:before {
content: "\64";
}
/* unchecked icon */
input[type=radio] + label:before {
letter-spacing: 10px;
}
/* space between checkbox and label */
input[type=radio]:checked + label:before {
content: "\63";
-webkit-transition: all 0.50s;
-moz-transition: all 0.50s;
-o-transition: all 0.50s;
transition: all 0.50s;
}
input[type=radio]:checked + label {
color: #00af66;
}
/* checked icon */
input[type=radio]:checked + label:before {
letter-spacing: 12px;
color: #00af66
}
/* allow space for check mark */
.success {background:#00af66;}
section {
overflow: hidden;
position: relative;
padding: 75px 0;
}
.hp-subheader {
display:block;
font-family:"Gibson-SemiboldIt";
font-size:1.8rem;
text-transform:;
margin-bottom:10px;
}
.flex-col {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-col > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/*.hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
opacity: 1;
width: 100%;
height: 100%;
z-index: 0;
}*/
.hero:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
background: rgb(52,181,174);
background: -moz-linear-gradient(-45deg, rgba(52,181,174,1) 0%, rgba(52,73,94,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(52,181,174,1) 0%,rgba(52,73,94,1) 100%);
background: linear-gradient(135deg, rgba(52,181,174,1) 0%,rgba(52,73,94,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34b5ae', endColorstr='#34495e',GradientType=1 );
opacity: .85;
width: 100%;
height: 100%;
z-index: -1;
}
.hero.videoHeight {
overflow:hidden;
min-height:0;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
.hero #ACI-icon {
height: 200px;
width: 200px;
position: relative;
z-index: 3;
}
.hero #ACI-icon .cls-1,
.hero #ACI-icon .cls-2 {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
}
.hero #ACI-icon .cls-2 {
stroke-linejoin: round;
}
.hero {
position: relative;
z-index: 0;
/* background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/ACI1.jpg);*/
background-color: #000;
background-position: bottom center;
background-attachment: fixed;
background-size: cover;
min-height: 90%;
color: white;
text-align: center;
overflow: hidden;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
}
#video-bg {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -1;
background: #000;
background-size: cover;
opacity: .6;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
-webkit-filter: grayscale(100%) contrast(1.5) ;
filter: grayscale(100%) contrast(1.5);
}
.hero p,
.hero h1,
.hero a {
color: inherit;
position: relative;
z-index: 210;
text-transform: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
}
.hero a {}
.hero p {
font-size: 2.5rem;
line-height: 1.2
}
.hero .video-modal {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 0;
overflow: hidden;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
transition: all .5s ease-in;
z-index: 1000;
}
.video-modal .close-video {
position: absolute;
line-height: 1;
z-index: 1;
background: rgba(255, 255, 255, 0.25);
top: 10px;
right: 10px;
padding: 10px;
}
.svg-icons {
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
background: #eceeef;
width: 150px;
height: 150px;
padding: 8%;
border-radius: 150px;
}
.embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 1000ms linear;
-moz-transition: all 1000ms linear;
-ms-transition: all 1000ms linear;
-o-transition: all 1000ms linear;
transition: all 1000ms linear;
}
.split-column {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -ms-flexbox;
display: flex;
}
.split-column .image {
margin-bottom: -1px
}
.split-column .image img {
;
width: 100%;
}
.split-column .content {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.split-column.left .content .inner-content {
padding-left: 0;
padding-right: 100px;
float: right;
}
.no-flexbox .hero {padding:75px 0;}
.no-flexbox .inner-content {
padding-top:50px;
}
.no-flexbox .stat-box {padding-top:20px; padding-bottom:20px;}
.no-flexbox .flex-item {min-height:600px;}
.split-column .content .inner-content {
padding-left: 100px;
width: 500px;
max-width: 100%;
}
.cls-1,
.cls-2 {
fill: none;
stroke: #666;
stroke-width: 1px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
.cls-1 {
stroke-linecap: round;
stroke-linejoin: round;
}
.cls-2 {
stroke-miterlimit: 10;
}
.flex-icon .cls-1,
.flex-icon .cls-2 {
fill: none;
stroke: #fff;
stroke-width: 1px;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
.icon-col {
padding: 15px;
}
.icon-col:hover .svg-icons {
transform: translateY(-15px);
box-shadow: inset 0 0 500px 500px #34495e
}
.icon-col:hover .svg-icons .cls-1,
.icon-col:hover .svg-icons .cls-2 {
stroke: #fff
}
#Deeper-Analysis {
min-height: 60%
}
#Strategic-Recommendations .hp-subheader {
font-size:1.2rem
}
.mini-display {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/ipadmini-1.png);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 50%;
background-repeat: no-repeat;
}
.mini-display svg {}
.stats {
position: absolute;
padding: 30px;
max-width: 40%;
background: rgba(0, 0, 0, .5);
color: white;
min-height: 100%;
}
.stats > div:first-child {
border-bottom: 5px solid #fff;
}
.stats .stat-number {
font-weight: 700;
font-size: 5rem;
line-height: 1.3;
font-family: "Gibson-Semibold"
}
.stats .stat-content {
font-size: 1.8rem;
line-height: 2rem;
font-weight: 400
}
section.quote {
min-height: 600px;
background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/quote-bg.jpg);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3eceeef', endColorstr='#b3eceeef',GradientType=0 ); /* IE6-9 */ ); /* IE6-9 fallback on horizontal gradient */
background-size: cover;
background-color: #fff;
}
section.quote p {
font-size: 2.5rem;
}
section.quote p.small {
font-size: 1.6rem;
font-weight: 400;
line-height: 1.3;
}
section.quote .company {
font-size: 1rem;
}
.cta {
padding: 75px 0;
}
.cta p {
font-size: 2.5rem;
font-weight: 400
}
.cta a {
margin: 20px;
font-size: 1.6rem
}
footer {
position: relative;
padding: 50px 0 65px 0;
}
footer .logo {
max-height: 40px;
}
footer .policy {
padding: 12px 15px;
text-align: right;
}
footer .subfooter {
position: absolute;
bottom: 0;
font-size: 1.2rem;
margin-top: 20px;
padding: 10px 0;
width: 100%;
z-index: 999;
left: 0;
}
/*==================================================
= Overylay ; =
==================================================*/
.overlay {
background: #212a33;
top: 0;
left: 0;
height: 100%;
width: 100%;
position: fixed;
z-index: 999999999999999999;
}
.loader-container {position:absolute; width:300px;height:300px; top:50%; margin-top:-150px; left:50%; margin-left:-150px;}
#loading {
width:300px;
position:aboslute;
top:0%;
left:0%;
}
#loading2 {width:250px;
position:absolute; top:50%; margin-top:-125px; left:50%; margin-left:-125px;}
#CJ-Overlay {width: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -100px;
}
@-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
@-webkit-keyframes spinnerRotateRev
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes spinnerRotateRev
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(-360deg);}
}
@-ms-keyframes spinnerRotateRev
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(-360deg);}
}
#loading{
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
}
#loading2{
-webkit-animation-name: spinnerRotateRev;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950) ;
-moz-animation-name: spinnerRotateRev;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
-ms-animation-name: spinnerRotateRev;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
}
/*** Modal Layout ****/
.modal {
text-align: left;
}
.modal-backdrop {
background-color: #eceeef; opacity:.95!important;
}
.modal-dialog {
width: 700px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: none;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.05);
border-radius: 0;
border: transparent;
}
.modal-header {
border: transparent;
}
.modal-header.danger {
background: #f14045;
color: #fff;
}
.modal-body {
pa dding: 30px;
}
.modal-footer {
padding: 15px 0;
display: block;
text-align: left;
margin: 0 30px;
}
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media (max-width: 1920px) {
#product .carousel-inner > .item > img,
#product .carousel-inner > .item > a > img {
max-width: 80%
}
}
@media (max-width: 1024px) {
.stats {
max-width: 50%;
}
.stats .stat-content {
font-size: 1.4rem;
line-height: 2rem;
font-weight: 400
}
}
/* Medium Devices, Desktops */
@media (max-width: 992px) {
.hero {
min-height:0;
padding:75px 0;
}
.split-column {
display: block;
}
.split-column .content .inner-content,
.split-column.left .content .inner-content {
width: auto;
padding: 75px 50px;
}
.stats {
max-width: 40%;
}
#Deeper-Analysis {
min-height: 0;
}
footer .logo {
max-height: 100px;
}
.count svg {
width: 30%;
padding:0 0 40px 0;
}
.overlay .progress-load {
width: 30%;
height: 2px;
background: #3b4a56;
margin: 0 auto;
overflow: hidden;
}
}
/* Small Devices, Tablets */
@media (max-width: 767px) {
body {
padding-top: 64px
}
.hero {
min-height:0;
padding:75px 0;
}
.split-column {
display: block;
}
nav {
padding: 10px 30px;
}
nav .logo {
max-width: 150px;
}
.stats {
max-width: 50%;
}
#Deeper-Analysis {
min-height: 0;
}
.count svg {
width: 70%;
padding: 20px;
}
.mktoForm .mktoFormRow {
clear:both !important;
float: none;
width: 100%;
margin: 0 ;
}
.modal-dialog {
width: 100%;
margin: 30px auto;
}
}
/* Extra Small Devices, Phones */
@media (max-width: 480px) {
nav {
height: 64px;
}
.hero {
padding: 40px 0;
}
.hero h1 {
font-size: 4rem
}
.hero p {
font-size: 1.6rem
}
.hero svg {
width: 100px
}
.flex-item {
padding: 40px 40px;
}
.icon-col {
padding: 40px 15px;
}
.stats {
max-width: 100%;
}
.stats > div:first-child {
border-bottom: none;
}
.stats .stat-content {
font-size: 1.4rem
}
.flex-col > div {
flex: initial
}
.stat-box {
padding: 15px
}
.flex-col {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
footer .logo {
max-height: 60px;
}
footer .social {
text-align: center;
padding: 15px 0;
}
footer .policy {
padding: 12px 15px;
text-align: center;
}
.count svg {
width: 40%;
padding: 20px;
}
.mktoForm input[type=url], .mktoForm input[type=text], .mktoForm input[type=date], .mktoForm input[type=tel], .mktoForm input[type=email], .mktoForm input[type=number], .mktoForm textarea.mktoField, .mktoForm select.mktoField {
height:40px !important; font-size:1.2rem !important;
}
}
@media (max-height: 768px) {
.embed-responsive {max-width:800px; margin:0 auto; padding:0 !imortant}
}
/* Custom, iPhone Retina */
@media (max-width: 320px) {}
/* Social Media Brand Colors
twitter: #00aced rgba(0, 172, 237, 1)
facebook: #3b5998 rgba(59, 89, 152, 1)
googleplus: #dd4b39 rgba(221, 75, 57, 1)
pinterest: #cb2027 rgba(203, 32, 39, 1)
linkedin: #007bb6 rgba(0, 123, 182, 1)
youtube: #bb0000 rgba(187, 0, 0, 1)
vimeo: #aad450 rgba(170, 212, 80, 1)
tumblr: #32506d rgba(50, 80, 109, 1)
instagram: #517fa4 rgba(81, 127, 164, 1)
flickr: #ff0084 rgba(255, 0, 132, 1)
dribbble: #ea4c89 rgba(234, 76, 137, 1)
quora: #a82400 rgba(168, 36, 0, 1)
foursquare: #0072b1 rgb(0, 114, 177, 1)
forrst: #5B9A68 rgba(91, 154, 104, 1)
vk: #45668e rgba(69, 102, 142, 1)
wordpress: #21759b rgba(33, 117, 155, 1)
stumbleupon: #EB4823 rgba(235, 72, 35, 1)
yahoo: #7B0099 rgba(123, 0, 153, 1)
blogger: #fb8f3d rgba(251, 143, 61, 1)
soundcloud: #ff3a00 rgba(255, 58, 0, 1)
*/
.social {}
.social a {
color: #fff;
border-radius: 80px;
text-align: center;
text-decoration: none;
font-family: fontawesome;
position: relative;
display: inline-block;
width: 40px;
height: 40px;
padding-top: 8px;
margin: 0 2px;
-webkit-transition: all .5s;
transition: all .5s;
font-size: 2rem;
}
.social a:hover {
background: rgba(0, 0, 0, .4);
}
.social a:hover p {
bottom: 35px;
visibility: visible;
}
.social a p {
color: #666;
position: absolute;
bottom: 0;
left: -25px;
right: -25px;
padding: 5px 7px;
z-index: -1;
font-size: 14px;
border-radius: 2px;
background: #fff;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.6, -0.6, 0.2, 1.5);
}
.social a p:before {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
position: absolute;
bottom: -5px;
left: 40px;
}
.facebook-bg {
background-color: rgba(59, 89, 152, 1)
}
.facebook {
color: rgba(59, 89, 152, 1)
}
.google-bg {
background-color: rgba(221, 75, 57, 1)
}
.google {
color: rgba(221, 75, 57, 1)
}
.twitter-bg {
background-color: rgba(0, 172, 237, 1)
}
.twitter {
color: rgba(0, 172, 237, 1)
}
.linkedin-bg {
background-color: rgba(0, 123, 182, 1)
}
.linkedin {
color: rgba(0, 123, 182, 1)
}
.vimeo-bg {
background-color: rgba(0, 123, 182, 1)
}
.vimeo {
color: rgba(0, 123, 182, 1)
}
.youtube {
color: rgba(187, 0, 0, 1)
}
.youtube-bg {
background: rgba(187, 0, 0, 1)
}</style></head><body>
<div class="overlay">
<div class="loader-container">
<svg id="loading2" data-name="loading2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 203"><defs><style>.line-1{opacity:0.1;}.line-2,.line-3{fill:none;stroke-miterlimit:10;stroke-width:1px;}.line-2{stroke:#fff;}.line-3{stroke:#00af66;}</style></defs><title>Untitled-2</title><g class="line-1"><circle class="line-2" cx="101.5" cy="101.5" r="100"/></g><path class="line-3" d="M220.71,79.29A99.69,99.69,0,0,0,150,50" transform="translate(-48.5 -48.5)"/></svg>
<svg id="loading" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 203"><defs><style>.scls-1,.scls-2{fill:none;}.scls-2{stroke:#00af66;}.scls-1{stroke:#fff;stroke-miterlimit:10;stroke-width:1px;opacity:0.1;}</style></defs><title>Untitled-2</title><circle class="scls-1" cx="101.5" cy="101.5" r="100"/><path class="scls-2" d="M220.71,79.29a100,100,0,0,0-141.42,0" transform="translate(-48.5 -48.5)"/></svg>
<svg id="CJ-Overlay" class="animated" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260.62 260.62"><defs><style>.greenfill{fill:#00af66;}.whitefill{fill:#fff;}</style></defs><title>CJ</title><path class="greenfill" d="M164.84,39.47C93,39.47,34.52,97.92,34.52,169.78S93,300.09,164.84,300.09s130.3-58.46,130.3-130.31A130.45,130.45,0,0,0,164.84,39.47Z" transform="translate(-34.52 -39.47)"/><path class="whitefill" d="M150.42,134.78c-1.1,5.48-3.78,18.53-5.41,26.27h52.08s-10.81,54.07-10.82,54.27A18.7,18.7,0,0,1,179.9,225l-0.36.33a19.57,19.57,0,0,1-12.32,4.08H130.52c-1.16,5.48-3.84,18.45-5.41,26.17h34.36c48.35,0,57.88-41.18,58.23-42.84,0,0,13.82-66.63,16.16-78.08C222.55,134.64,158.14,134.78,150.42,134.78Zm15.38,73.37c1.17-5.46,3.8-18.44,5.45-26.23H136.66a18.57,18.57,0,0,1-10.33-3.76,12.51,12.51,0,0,1-1.84-1.89,0.35,0.35,0,0,1-.16-0.19c-3.28-4.18-2.36-9.6-2.15-10.76,0,0,7.74-37.45,7.76-37.61a19.07,19.07,0,0,1,6.29-9.57l0.63-.51a19.55,19.55,0,0,1,12.2-3.93h36.69c1.13-5.55,3.82-18.46,5.4-26.17H156.77c-48.35,0-57.85,41.06-58.27,42.78l-7.69,37.34c0,0.18-3.21,17.39,6.52,29,6.38,7.63,17,11.49,31.8,11.49H165.8Z" transform="translate(-34.52 -39.47)"/></svg>
</div>
</div>
<nav>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/Cj-Affiliate.svg" alt="CJ Affiliate By Conversant" /></a>
</div>
<div id="navbar" class="navbar-collapse collapse ">
<ul class="nav navbar-nav navbar-right">
<li><a href="#Deeper-Analysis">Deeper Analysis<span class="sr-only">(current)</span></a></li>
<li><a href="#Strategic-Recommendations">Strategic Recommendations</a></li>
<li><a href="#Zero-Effort">Zero Effort</a></li>
</ul>
</div>
</nav>
<header class="hero split-column">
<video autoplay="" muted="" loop="" id="video-bg" poster="//cdn7.dissolve.com/p/D18_1_106/D18_1_106_0004_600.jpg">
<source src="https://dl.dropboxusercontent.com/s/eiegzueecpjlpew/DSC_7600.mp4" type="video/mp4">
</video>
<div class="content animated">
<div class="container">
<svg id="ACI-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.02 81.02"><title>futuro_icons_collection [Recovered]</title><g id="LINE_ICONS" data-name="LINE ICONS"><g id="_35._DATA_SCIENCE" data-name="35. DATA SCIENCE"><g id="_35_data_insight" data-name="35_data_insight"><path class="cls-1" d="M-71.5,11601v2.75c0,0.55,0,.75-0.5.75H-84c-0.55,0-1.5-.2-1.5-0.75V11601" transform="translate(118.26 -11535.48)"/><path class="cls-1" d="M-75.5,11605v2.75c0,0.55,0,.75-0.5.75h-4c-0.55,0-1.5-.2-1.5-0.75V11605" transform="translate(118.26 -11535.48)"/><line class="cls-1" x1="50.26" y1="66.02" x2="30.26" y2="66.02"/><line class="cls-1" x1="30.26" y1="62.02" x2="50.26" y2="62.02"/><line class="cls-1" x1="45.26" y1="30.02" x2="47.26" y2="30.02"/><line class="cls-1" x1="49.26" y1="34.02" x2="51.26" y2="34.02"/><line class="cls-1" x1="41.26" y1="30.02" x2="43.26" y2="30.02"/><line class="cls-1" x1="49.26" y1="30.02" x2="51.26" y2="30.02"/><line class="cls-1" x1="49.26" y1="38.02" x2="51.26" y2="38.02"/><line class="cls-1" x1="33.26" y1="34.02" x2="35.26" y2="34.02"/><line class="cls-1" x1="29.26" y1="34.02" x2="31.26" y2="34.02"/><line class="cls-1" x1="37.26" y1="34.02" x2="39.26" y2="34.02"/><line class="cls-1" x1="33.26" y1="38.02" x2="35.26" y2="38.02"/><line class="cls-1" x1="29.26" y1="38.02" x2="31.26" y2="38.02"/><line class="cls-1" x1="29.26" y1="30.02" x2="31.26" y2="30.02"/><line class="cls-1" x1="45.26" y1="26.02" x2="47.26" y2="26.02"/><line class="cls-1" x1="41.26" y1="26.02" x2="43.26" y2="26.02"/><line class="cls-1" x1="49.26" y1="26.02" x2="51.26" y2="26.02"/><line class="cls-1" x1="29.26" y1="26.02" x2="31.26" y2="26.02"/><line class="cls-1" x1="45.26" y1="22.02" x2="47.26" y2="22.02"/><line class="cls-1" x1="41.26" y1="22.02" x2="43.26" y2="22.02"/><line class="cls-1" x1="33.26" y1="22.02" x2="35.26" y2="22.02"/><line class="cls-1" x1="37.26" y1="22.02" x2="39.26" y2="22.02"/><line class="cls-1" x1="45.26" y1="42.02" x2="47.26" y2="42.02"/><line class="cls-1" x1="41.26" y1="42.02" x2="43.26" y2="42.02"/><line class="cls-1" x1="33.26" y1="42.02" x2="35.26" y2="42.02"/><line class="cls-1" x1="37.26" y1="42.02" x2="39.26" y2="42.02"/><line class="cls-1" x1="37.26" y1="38.02" x2="39.26" y2="38.02"/><rect class="cls-1" x="33.76" y="26.02" width="4" height="4"/><rect class="cls-1" x="41.76" y="34.02" width="4" height="4"/><path class="cls-2" d="M-93,11569.75l-5-3a20.69,20.69,0,0,0,8,16.37l3,10.37h18l3-10.37" transform="translate(118.26 -11535.48)"/><path class="cls-2" d="M-73,11581.75l-5,5a20,20,0,0,0,20-20,20,20,0,0,0-.91-6,20,20,0,0,0-3.09-6" transform="translate(118.26 -11535.48)"/><path class="cls-2" d="M-72.25,11552.75l5.75-2h0a18.47,18.47,0,0,0-11.75-4,20,20,0,0,0-19,14" transform="translate(118.26 -11535.48)"/><circle class="cls-1" cx="40.51" cy="40.51" r="40.01"/></g></g></g></svg>
<h1 class="wow fadeInDown" data-wow-duration="1.2s" data-wow-delay="0.5s">Affiliate Customer Insights</h1>
<p class="large wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s" style="padding:0 0 25px 0">
Merging affiliate marketing initiatives with all other marketing initiatives <br class="hidden-xs hidden-sm" />and delivers transparent data in one place.
</p>
<a href="#" class="btn btn-lg btn-blue wow flipInX watch-video" data-wow-duration="1.4s" data-wow-delay="1.2s" style="padding:15px 30px">Watch Video <span class="icon-play-1" style="font-size: 1.2rem; padding-left: 5px;"></span></a></div>
</div>
<div class="video-modal split-column">
<div class="close-video">✕</div>
<div class="content">
<div class="container">
<div class="embed-container">
<iframe id="aci-video" src="https://player.vimeo.com/video/165932184?api=1&player_id=aci-video" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
</div>
</div>
</div>
<div class="start-here hidden-sm hidden-xs"><span class="icon-arrow-67"></span></div>
</header>
<section class="full-page subnav">
<div class="container">
<div class="col-sm-6 col-sm-offset-1 text-center icon-col">
<svg onclick="obt1.reset().play();" id="ICONS1" class="svg-icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs></defs><title>futuro_icons_collection</title><g id="LINE_ICONS" data-name="LINE ICONS"><g id="_35._DATA_SCIENCE" data-name="35. DATA SCIENCE"><g id="_35_data_science" data-name="35_data_science"><ellipse class="cls-1" cx="32" cy="32" rx="15" ry="31"/><ellipse class="cls-1" cx="32" cy="32" rx="31" ry="15"/><ellipse class="cls-1" cx="135" cy="11367" rx="31" ry="15" transform="translate(-8101.14 -7910.22) rotate(-45)"/><ellipse class="cls-1" cx="135" cy="11367" rx="15" ry="31" transform="translate(-8101.14 -7910.22) rotate(-45)"/><ellipse class="cls-1" cx="32" cy="26" rx="7" ry="3"/><path class="cls-1" d="M142,11365c0,1.66-3.13,3-7,3s-7-1.34-7-3" transform="translate(-103 -11335)"/><path class="cls-1" d="M142,11369c0,1.66-3.13,3-7,3s-7-1.34-7-3" transform="translate(-103 -11335)"/><path class="cls-1" d="M142,11361v12c0,1.66-3.13,3-7,3s-7-1.34-7-3v-12" transform="translate(-103 -11335)"/><line class="cls-1" x1="49" y1="14" x2="51" y2="14"/><line class="cls-1" x1="49" y1="50" x2="51" y2="50"/><line class="cls-1" x1="13" y1="50" x2="15" y2="50"/><line class="cls-1" x1="13" y1="14" x2="15" y2="14"/></g></g></g></svg>
<h2>Deeper<br/>Analysis</h2>
<p class="small">Powerful and proprietary reporting that offers visibility and value that is unique in the affiliate space.</p>
<a href="" data-anchor="#Deeper-Analysis" class="btn btn-blue btn-sm">Learn More </a>
</div>
<div class="col-sm-6 col-sm-offset-2 text-center icon-col ">
<!---->
<svg onclick="obt2.reset().play();" id="ICONS2" class="svg-icons" viewBox="0 0 64 59"><title>futuro_icons_collection0</title><g id="LINE_ICONS" data-name="LINE ICONS"><g id="_11._SEO_WEB_OPTIMIZATION" data-name="11. SEO WEB OPTIMIZATION"><g id="_11_dashboard_speed" data-name="11_dashboard_speed"><circle class="cls-1" cx="32" cy="32" r="3"/><path class="cls-1" d="M475,3807H431A31,31,0,1,1,475,3807Z" transform="translate(-421 -3753)"/><path class="cls-1" d="M433,3800a25,25,0,1,1,40,0" transform="translate(-421 -3753)"/><line class="cls-1" x1="32" y1="47" x2="32" y2="49"/><line class="cls-1" x1="28" y1="47" x2="28" y2="49"/><line class="cls-1" x1="36" y1="47" x2="36" y2="49"/><line class="cls-1" x1="40" y1="47" x2="40" y2="49"/><line class="cls-1" x1="24" y1="47" x2="24" y2="49"/><line class="cls-1" x1="7" y1="32" x2="10" y2="32"/><line class="cls-1" x1="32" y1="7" x2="32" y2="10"/><line class="cls-1" x1="57" y1="32" x2="54" y2="32"/><line class="cls-1" x1="14" y1="14" x2="17" y2="17"/><line class="cls-1" x1="47" y1="17" x2="50" y2="14"/><line class="cls-1" x1="34" y1="30" x2="44" y2="20"/><path class="cls-1" d="M445,3791a10,10,0,1,1,16,0" transform="translate(-421 -3753)"/><line class="cls-1" x1="12" y1="58" x2="52" y2="58"/></g></g></g></svg>
<h2>Strategic Recommendations</h2>
<p class="small">Not just reporting. Insights. Get the visibility needed to drive affiliate strategies like never before.</p>
<a href="" data-anchor="#Strategic-Recommendations" class="btn btn-blue btn-sm">Learn More </a>
</div>
<div class="col-sm-6 col-sm-offset-2 text-center icon-col ">
<svg onclick="obt3.reset().play();" id="ICONS" class="svg-icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs></defs><title>futuro_icons_collection</title><g id="LINE_ICONS" data-name="LINE ICONS"><g id="_09._BUSINESS_ELEMENTS" data-name="09. BUSINESS ELEMENTS"><g id="_09_success_mark" data-name="09_success_mark"><polygon class="cls-1" points="48 25 43 20 29 34 21 26 16 31 29 44 48 25"/><line class="cls-2" x1="31" y1="57" x2="33" y2="57"/><line class="cls-2" x1="31" y1="7" x2="33" y2="7"/><line class="cls-2" x1="6" y1="32" x2="8" y2="32"/><line class="cls-2" x1="56" y1="32" x2="58" y2="32"/><circle class="cls-2" cx="32" cy="32" r="31"/></g></g></g></svg>
<h2>No Effort<br/>Required</h2>
<p class="small">Say goodbye to the time and effort required to compile and analyze data from multiple sources. </p>
<a href="#" data-anchor="#Zero-Effort" class="btn btn-blue btn-sm">Learn More </a>
</div>
<div class="clearfix"></div>
</div>
</section>
<section id="Deeper-Analysis" class="row m0 full-page split-column grey-bg ">
<div class="content">
<div class="container">
<div class="col-md-8 col-md-push-14">
<h4 style="font-size:4rem;width:100%;left:0; 0">
<span class="hp-subheader">Deeper Analysis</span>
Know what’s happening and finally answer the why
</h4>
<p>We’ve taken the guesswork out of understanding why your affiliate program is working, and given you the insights to drive greater growth. You receive detailed analysis of new customer acquisition, loyalty customers, online versus offline, and
channel benchmarking – all in one easy to read report. </p>
</div>
<div class="mini-display parallax hidden-sm hidden-xs" data-position="10" data-speed="175" data-topdistance="50"></div>
</div>
</div>
</section>
<section id="Case-Study" class="row m0 split-column left p0">
<div class="col-md-12 col-md-push-12 image p0">
<div class="flex-col stats wow fadeIn" data-wow-duration=".5s" data-wow-delay="0">
<div class="stat-box wow fadeInLeft" data-wow-duration=".5s" data-wow-delay=".5s">
<div class="stat-number">55%</div>
<div class="stat-content">YoY increase in overall revenue during Thanksgiving week</div>
</div>
<div class="stat-box wow fadeInLeft" data-wow-duration=".5s" data-wow-delay=".5s">
<div class="stat-number">11%</div>
<div class="stat-content">YoY increase in Black Friday revenue</div>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/aci-img.jpg" class="img" /></div>
<div class="col-md-12 col-md-pull-12 content p0">
<div class="inner-content ">
<h1> <span class="hp-subheader">Case Study</span>A Smarter Approach to Publisher Investment</h1>
<p>An outerwear retail company increased YOY sales during the Thanksgiving sales week by using Affiliate Customer Insights to reassess publisher value. Ranking each publisher by potential to drive revenue, deliver new customers, and influence offline
sales, they invested the right spend at the right time.
</p>
</div>
</div>
<div class="clearfix"></div>
</section>
<section id="Strategic-Recommendations" class="full-page white hover darkblue-bg p0">
<ul class="flex-container longhand">
<li class="flex-item col-sm-8 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0s">
<div class="flex-icon">
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In -->
<svg id="flex-icon1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g id="LINE_ICONS" data-name="LINE ICONS"><g id="_17._DESIGN_THINKING" data-name="17. DESIGN THINKING"><g id="_17_client_service" data-name="17_client_service"><line class="cls-1" x1="26" y1="44" x2="26" y2="38"/><line class="cls-1" x1="38" y1="44" x2="38" y2="38"/><path class="cls-1" d="M358,5672h-1a2,2,0,0,1-2-2v-2a2,2,0,0,0-2-2v-2l-4,2h-8a2,2,0,0,0-2,2v2a2,2,0,0,1-2,2" transform="translate(-315 -5648)"/><line class="cls-1" x1="22" y1="24" x2="21" y2="24"/><path class="cls-1" d="M336,5664v11l1,1c0,5,3,12,10,12s10-7,10-12l1-1v-13a4,4,0,0,0-4-4H343a3,3,0,0,0-3,3h-1A3,3,0,0,0,336,5664Z" transform="translate(-315 -5648)"/><polygon class="cls-1" points="28 52 19 48 24 44 32 46 32 48 28 52"/><polygon class="cls-1" points="36 52 45 48 40 44 32 46 32 48 36 52"/><line class="cls-1" x1="32" y1="57" x2="32" y2="59"/><line class="cls-1" x1="32" y1="53" x2="32" y2="55"/><path class="cls-2" d="M373,5697a31,31,0,1,0-52,0" transform="translate(-315 -5648)"/><path class="cls-1" d="M360,5696l3,1c6,2,6,5,6,5a30.67,30.67,0,0,1-22,9,31.07,31.07,0,0,1-22-9s0-3,6-5l3-1" transform="translate(-315 -5648)"/><polyline class="cls-2" points="7 44 6 49 1 48"/><polyline class="cls-2" points="57 44 58 49 63 48"/></g></g></g></svg>
</div>
<div class="flex-content">
<h4> <span class="hp-subheader">Strategic Recommendations</span>New & Repeat Customers</h4>
<p>Analyze the percentage of unique new customers acquired through the affiliate channel vs. non-affiliate channels and the associated revenue of those transactions.</p>
</div>
</li>
<li class="flex-item col-sm-8 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".25s">
<div class="flex-icon"><svg id="flex-icon2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 59"><g id="LINE_ICONS" data-name="LINE ICONS"><g id="_03._MODERN_BUSINESS" data-name="03. MODERN BUSINESS"><g id="_03_success_tactics" data-name="03_success_tactics"><line class="cls-1" x1="31.5" y1="40" x2="31.5" y2="58"/><polyline class="cls-1" points="41.5 40 47.5 57 47.5 58"/><polyline class="cls-1" points="21.5 40 15.5 57 15.5 58"/><polyline class="cls-1" points="58.5 11 58.5 40.5 4.5 40.5 4.5 11"/><polygon class="cls-1" points="0.5 8.5 0.5 4.5 25 4.5 27 0.5 37 0.5 39 4.5 62.5 4.5 62.5 8.5 0.5 8.5"/><line class="cls-1" x1="29" y1="4.5" x2="35" y2="4.5"/><line class="cls-1" y1="58.5" x2="64" y2="58.5"/><circle class="cls-1" cx="26" cy="17" r="1"/><circle class="cls-1" cx="36" cy="31" r="1"/><path class="cls-1" d="M238.5,1251v-2a5,5,0,0,0-10,0v6c0,2.76-1.74,5.5-4.5,5.5h-6" transform="translate(-208 -1232)"/><path class="cls-1" d="M262,1252.5h-8c-2.76,0-5.5,1.74-5.5,4.5v6a5,5,0,0,1-10,0v-2" transform="translate(-208 -1232)"/><polyline class="cls-1" points="50 24 54 20 50 16"/><line class="cls-1" x1="30.5" y1="21" x2="30.5" y2="23"/><line class="cls-1" x1="30.5" y1="25" x2="30.5" y2="27"/><line class="cls-1" x1="8" y1="12.5" x2="10" y2="12.5"/><line class="cls-1" x1="54" y1="12.5" x2="56" y2="12.5"/><line class="cls-1" x1="54" y1="36.5" x2="56" y2="36.5"/><line class="cls-1" x1="8" y1="36.5" x2="10" y2="36.5"/></g></g></g></svg></div>
<div class="flex-content">
<h4><span class="hp-subheader">Strategic Recommendations</span>Discover Offline <br class="visible-md"/> Impact</h4>
<p>Effectively measure the influence of clicks within the affiliate customer journey to in-store conversions by combining affiliate click data with customer specific purchase data.</p>
</div>
</li>
<li class="flex-item col-sm-8 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="flex-icon"><svg id="flex-icon3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.5 64"><g id="LINE_ICONS" data-name="LINE ICONS"><g id="_02._STARTUP_AND_DEVELOPMENT" data-name="02. STARTUP AND DEVELOPMENT"><g id="_02_goal_target" data-name="02_goal_target"><path class="cls-1" d="M782,722a31,31,0,1,1-18-18" transform="translate(-721.5 -701)"/><polyline class="cls-1" points="31.5 32 53.5 10 62.5 1"/><polyline class="cls-1" points="63.5 7.5 56 7.5 56 0"/><polyline class="cls-1" points="59.5 11.5 52 11.5 52 4"/><circle class="cls-1" cx="31.5" cy="32" r="25"/><circle class="cls-1" cx="31.5" cy="32" r="19"/><circle class="cls-1" cx="31.5" cy="32" r="13"/><circle class="cls-1" cx="31.5" cy="32" r="7"/><circle class="cls-1" cx="31.5" cy="32" r="1"/><polyline class="cls-2" points="11.5 56.25 4.5 63.5 0.5 63.5 6.5 51.38"/><polyline class="cls-2" points="51.5 56.25 58.5 63.5 62.5 63.5 56.5 51.38"/></g></g></g></svg></div>
<div class="flex-content">
<h4><span class="hp-subheader">Strategic Recommendations</span>Channel Benchmarking</h4>
<p>Compare the average order value, subsequent orders, and associated revenue of affiliate and non-affiliate programs to determine how affiliate initiatives drive results for your business.</p>
</div>
</li>
</ul>
<div class="clearfix"></div>
</section>
<section id="Zero-Effort" class="row m0 split-column p0">
<div class="col-md-12 image p0">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/aci-img2.jpg" class="img" /></div>
<div class="col-md-12 content p0 ">
<div class="inner-content">
<h1><span class="hp-subheader">Zero Effort</span>Powerful insights. <br/>No effort required.</h1>
<p>Manage up and across the organization with detailed insights and actionable recommendations.Our team of experts will analyze the data and provide you with your own comprehensive report, presented to you at the cadence that works for your business. </p>
</div>
</div>
<div class="clearfix"></div>
</section>
<section class="quote text-center gr ey-bg split-column parallax " data-position="10" data-speed="175" data-topdistance="50">
<div class="content">
<div class="container">
<div class="col-md-16 col-md-offset-4">
<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="small">Desire Toto<br/><span class="company">Director, Product Management</span></p>
</div>
</div>
</div>
</section>
<section class="cta green-bg white">
<div class="container text-center">
<p>Interested in adding Affiliate Customer Insights for your business?<br class="visible-sm visible-xs" /> <a href="#" class="btn btn-lg btn-white " data-toggle="modal" data-target="#modal">Let's Get Started</a></p>
</div>
</section>
<footer class="split-column" style="">
<div class="content">
<div class="col-md-8 col-md-push-8 col-sm-24 text-center">
<a class="" href="#">
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/Cj-Affiliate.svg" alt="CJ Affiliate By Conversant" /></a>
</div>
<div class="social col-md-8 col-md-pull-8 col-sm-12">
<a href="http://facebook.cj.com" target="_blank" class="facebook-bg">
<p>Facebook</p><span class="icon icon-social-facebook"></span></a>
<a href="http://twitter.cj.com" target="_blank" class="twitter-bg">
<p>Twitter</p><span class="icon icon-social-twitter"></span></a>
<a href="http://linkedin.cj.com" target="_blank" class="linkedin-bg">
<p>LinkedIn</p><span class="icon icon-social-linkedin"></span></a>
</a>
<a href="#" class="youtube-bg">
<p>YouTube</p><span class="icon icon-social-youtube"></span></a>
</div>
<div class="col-md-8 col-sm-12 policy">
<p class="small ">
<a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="#">Contact Us</a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="text-center grey-bg subfooter">© 2016 Commission Junction, LLC</div>
</footer>
<div class="scroll-top animated">
<span class="icon-arrow-up"></span>
</div>
<div id="modal" class="modal fade " tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header success white">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Please Fill Out the Form: </h4>
</div>
<div class="modal-body">
<script src="//app-sj14.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1081" class="mktoForm"></form>
<script>
MktoForms2.loadForm("//app-sj14.marketo.com", "860-WNA-885", 1081);
</script>
<div id="confirmform" class="animated" style="font-size:3rem; display:none; text-align: center; padding: 75px;">
<p>Thank you. Check your email for details on your request.</p>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script><script src='https://maxwellito.github.io/vivus/dist/vivus.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/jquery.easing.1.3.js'></script><script src='https://demo3.pixflow.net/themoon-intro/js/jquery.parallax.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/143797/wow.min.js'></script><script src='https://codepen.io/simpson77/pen/ojwNXQ.js?aa'></script><script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>
<script >$(window).load(function() {
setTimeout(function() {
$('#CJ-Overlay').fadeOut(800);
}, 2500);
setTimeout(function() {
$('#loading, #loading2').fadeOut(400);
}, 1500);
setTimeout(function() {
$('.overlay').fadeOut(800);
}, 3000);
});
/* Logo Resize */
$(function() {
var lastScrollTop = 0,
delta = 5;
$(window).scroll(function(event) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop) {
$('.logo').css({
'max-width': '100px'
});
$('nav').css({
'height': '45px',
'padding': '8px 20px'
})
$('.navbar-nav > li > a').css({
'padding': '20px 0px'
})
$('.navbar-brand').css({
'max-height': '30px'
})
} else {
// upscroll code
$('.logo').css({
'max-width': '175px'
});
$('nav').css({
'height': '80px',
'padding': '15px 20px'
});
$('.navbar-nav > li > a').css({
'padding': '29.5px 0px'
});
$('.navbar-brand').css({
'max-height': '60px'
})
}
lastScrollTop = st;
});
});
/* Brings in Navigation on Scroll*/
$(window).scroll(function() {
var distance = $('.subnav').offset().top - 400,
$window = $(window);
if ($window.scrollTop() >= distance) {
$('.navbar-nav, .scroll-top').addClass('block');
} else {
$('.navbar-nav, .scroll-top').removeClass('block');
};
});
/* feature video controls */
$('.watch-video').click(function() {
$('.hero .content').addClass('zoomOut');
setTimeout(function() {
$('.video-modal').css({
'height': '100%'
}).dequeue();
$('video').css({
'top': '100%'
}).dequeue();
}, 500);
});
obt1 = new Vivus('ICONS1', {
type: 'async',
duration: 75
});
obt2 = new Vivus('ICONS2', {
type: 'async',
duration: 75
});
obt3 = new Vivus('ICONS', {
type: 'async',
duration: 75
});
obt4 = new Vivus('flex-icon1', {
type: 'async',
duration: 75
});
obt5 = new Vivus('flex-icon2', {
type: 'async',
duration: 75
});
obt6 = new Vivus('flex-icon3', {
type: 'async',
duration: 75
});
obt6 = new Vivus('ACI-icon', {
type: 'delayed',
duration: 200,
pathTimingFunction: Vivus.EASE,
start: 'autostart',
dashGap: 8
});
if (!$('html').hasClass("touch")) {
new WOW().init({
offset: 0
});
}
$scroll = 0,
$windowWidth = $(window).width(),
isTouchDevice = 'ontouchstart' in window || 'onmsgesturechange' in window, // second test works on ie10 (surface)
animationEnabled = true,
monitorsAnimationDone = false;
if ($windowWidth > 1023 && !isTouchDevice) {
var $parallaxContainers = $('.parallax');
// var $parallaxDivContainers = $('.parallaxdiv');
$parallaxContainers.each(function() {
var $parallax = $(this),
$pPos = $(this).attr('data-Position') + '%',
$pSpeed = parseInt($(this).attr('data-speed')) / 100;
$topDistance = parseInt($(this).attr('data-topdistance'));
//Run parallax script
$parallax.parallax($pPos, $pSpeed, true, $topDistance);
});
$parallaxContainers.css({
backgroundAttachment: "fixed"
});
}
$('.icon-col a').click(function() {
var getAnchor = $(this).data('anchor');
$('html, body').animate({
scrollTop: $(getAnchor).offset().top - 80
}, 1750);
return false;
});
$('.scroll-top').click(function() {
var getAnchor = $(this).data('anchor');
$('html, body').animate({
scrollTop: 0
}, 1750, 'swing');
return false;
});
$('.navbar-nav').onePageNav({
currentClass: 'active',
changeHash: true,
scrollSpeed: 1500,
scrollThreshold: .2,
easing: 'swing',
scrollChange: function() {
},
end: function() {
var getTarget = $('li.active a').attr("href");
$(getTarget)
/*
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);
}
*/
}
});
$('.social a').each(function() {
var uri = window.location;
var res = encodeURI(uri);
var shareURL = $(this).data('url');
$(this).attr('href', shareURL + res);
$(this).attr('onclick', "window.open('" + shareURL + res + "', 'newwindow', 'width=600, height=400'); return false;")
});
/* VIMEO STUFF */
(function() {
// Listen for the ready event for any vimeo video players on the page
var vimeoPlayers = document.querySelectorAll('iframe'),
player;
for (var i = 0, length = vimeoPlayers.length; i < length; i++) {if (window.CP.shouldStopExecution(1)){break;}
player = vimeoPlayers[i];
$f(player).addEvent('ready', ready);
}
window.CP.exitedLoop(1);
/**
* Utility function for adding an event. Handles the inconsistencies
* between the W3C method for adding events (addEventListener) and
* IE's (attachEvent).
*/
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else {
element.attachEvent(eventName, callback, false);
}
}
/**
* Called once a vimeo player is loaded and ready to receive
* commands. You can add events and make api calls only after this
* function has been called.
*/
function ready(player_id) {
// Keep a reference to Froogaloop for this player
var container = document.getElementById(player_id).parentNode.parentNode,
froogaloop = $f(player_id),
apiConsole = container.querySelector('.console .output');
/**
* Prepends log messages to the example console for you to see.
*/
$('.close-video').click(function() {
froogaloop.api('pause');
$('.video-modal').css({
'height': '0%'
})
$('video').css({
'top': '0%'
});
$('.hero').removeClass('videoHeight');
setTimeout(function() {
$('.hero .content').removeClass('zoomOut').addClass('zoomIn');
}, 500);
});
$('.watch-video').click(function() {
froogaloop.api('play');
// var getNewHeight = $('#aci-video').outerHeight() - 230;
// $('.hero').css({
// 'height' : getNewHeight
// }).addClass('videoHeight')
});
// $( window ).resize(function() {
// if($('.video-modal').outerHeight() > 1){
// var resizeHeight = $('#aci-video').outerHeight();
// $('.hero').outerHeight(resizeHeight);
// };
// });
froogaloop.addEvent('finish', function(data) {
$('.video-modal').css({
'height': '0%'
})
$('video').css({
'top': '0%'
});
setTimeout(function() {
$('.hero .content').removeClass('zoomOut').addClass('zoomIn');
}, 500);
});
}
})();
MktoForms2.whenReady(function(form) {
//Add an onSuccess handler
form.onSuccess(function(values, followUpUrl) {
//get the form's jQuery element and hide it
form.getFormElem().hide();
$('#confirmform').show().addClass("fadeIn");
//return false to prevent the submission handler from taking the lead to the follow up url.
return false;
});
});
//# sourceURL=pen.js
</script>
</body></html>
