html,
button,
input,
select,
textarea {
    color : #484ee8;
    }

html {
    font-size   : 16px;
    line-height : 1.5em;
    }

::-moz-selection {
    background  : #B3D4FC;
    text-shadow : none;
    }

::selection {
    background  : #B3D4FC;
    text-shadow : none;
}

/*
   * Remove the gap between images, videos, audio and canvas and the bottom of
   * their containers: h5bp.com/i/440
*/

audio,
canvas,
img,
video {
    vertical-align : middle;
    }

/*
   * Remove default fieldset styles.
   */

fieldset {
    border  : 0;
    margin  : 0;
    padding : 0;
}

.form-control {
  display: block;
  width: 100%;
  height: 50px;
  padding: 6px 12px;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus {
    outline: none;
    border:1px solid #ff5e4c;
    box-shadow: 0 0 2px #ff5e4c;
}

textarea {
    resize : vertical;
    margin-top:10px;
}
/* do not group these rules */
.form-control::-webkit-input-placeholder {
    color      : #9195f1;
    font-weight: 400;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    opacity    : 1;
    font-size  : 13px;
}
.form-control:-moz-placeholder {
    /* FF 4-18 */
    color      : #9195f1;
    font-weight: 400;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    opacity    : 1;
    font-size  : 13px;
}
.form-control::-moz-placeholder {
    /* FF 19+ */
   color       : #9195f1;
   font-weight : 400;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    opacity    : 1;
    font-size  : 13px;
}
.form-control:-ms-input-placeholder {
    /* IE 10+ */
    color      : #9195f1;
    font-weight: 400;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    opacity    : 1;
    font-size  : 13px;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
   font-weight: normal; 
}

p, ul, ol, pre, table, blockquote {
  margin-top: 1rem;
}
ul ul, ol ol, ul ol, ol ul {
  margin-top   : 0;
  margin-bottom: 0;
}
hr {
  border: 1px solid;
  margin: -1px 0;
}

a {
    color           : #484ee8;
    text-decoration : none;
    transition      : all 600ms ease 0s;
}
a:active,
a:focus,
a:active {
    text-decoration : underline;
    color           : #b5b8f5;
    outline         : none
}

ul {
    margin     : 0;
    padding    : 0;
    list-style : none
    }

h1{
    font-family: 'hk_groteskregular'; 
    font-size  : 58px;
    line-height: 69px;
    font-weight: normal;
    margin     : 0;
  }
h2{
    font-family: 'hk_groteskregular'; 
    font-size: 30px;
    line-height: 31px;
    font-weight: normal;
    margin     : 0;
  }
h3{
    font-family: 'hk_grotesksemibold'; 
    font-size  : 24px;
    line-height: 29px;
    font-weight: normal;
    margin     : 0;
}

p{
  font-size   : 17px;
  line-height : 23px;
  margin      : 0;
}
p.caption{
  font-size   : 15px; 
  line-height : 21px;
  margin      : 0; 
}


img{
  max-width: 100%;
  height   :auto;
}
.rs-btn{
    background: #484ee8;
    color: #fff;
    font-family: 'hk_grotesksemibold'; 
    font-size: 15px;
    text-transform: uppercase;
    height:54px;
    width:240px;
    border:1px solid #484ee8;
    border-radius: 40px; 
    margin-top: 40px;
    display: inline-block;
    -webkit-transition  : all 0.3s ease 0s;
    -moz-transition     : all 0.3s ease 0s;
    -o-transition       : all 0.3s ease 0s;
    transition          : all 0.3s ease 0s;
}

.rs-btn:hover{
    background  : #9195f1;
    border-color:transparent;
}


@font-face {
    font-family: 'hk_groteskregular';
    src: url('../fonts/hkgrotesk-regular-webfont.eot');
    src: url('../fonts/hkgrotesk-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hkgrotesk-regular-webfont.woff2') format('woff2'),
         url('../fonts/hkgrotesk-regular-webfont.woff') format('woff'),
         url('../fonts/hkgrotesk-regular-webfont.ttf') format('truetype'),
         url('../fonts/hkgrotesk-regular-webfont.svg#hk_groteskregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'hk_grotesksemibold';
    src: url('../fonts/hkgrotesk-semibold-webfont.eot');
    src: url('../fonts/hkgrotesk-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hkgrotesk-semibold-webfont.woff2') format('woff2'),
         url('../fonts/hkgrotesk-semibold-webfont.woff') format('woff'),
         url('../fonts/hkgrotesk-semibold-webfont.ttf') format('truetype'),
         url('../fonts/hkgrotesk-semibold-webfont.svg#hk_grotesksemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}


body {
  background                 : #fff;
  font-family                : 'hk_groteskregular'; 
  font-weight                : normal;
  font-size                  : 17px;
  line-height                : 23px;
  color                      : #333;
  overflow-x                 : hidden;
  -webkit-text-size-adjust   : 100%;
  -webkit-overflow-scrolling : touch;
  -webkit-font-smoothing     : antialiased !important;
}

#wrapper {
  position: relative;
}

.wrapper-overlay::before{
  content:'';
  position: absolute;
  width: 100%;
  height:100%;
  background:rgba(16,20,86,0.7);
  z-index: 1;
}

.sidecan, #mobileMenu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    background-color: #fff;
    padding: 0;
    overflow-x: hidden;
    -moz-transition: all 0.3s cubic-bezier(0.6, 0.32, 1, 0.54);
    -webkit-transition: all 0.3s cubic-bezier(0.6, 0.32, 1, 0.54);
    transition: all 0.3s cubic-bezier(0.6, 0.32, 1, 0.54);
    
}

.sidecan h2 {
    margin:0 45px 40px 0;
    color:#484ee8;
}

.sidecan a:hover {
    color: #f1f1f1;
}

.sidecan .closebtn {
    position: absolute;
    top: 0;
    left: 30px;
}
.form-group {
    margin-bottom: 30px;
}
input[type="radio"], input[type="checkbox"] {
  margin: 0!important ;
  line-height: normal;
}
input.form-control, .form-control{
  color:#484ee8;
}
/*----Custom Check Box Design-----*/
.checkbox {
    display: block;
    position: relative;
    padding-left: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 19px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 8px;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid #babbcc;
  border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
    background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
    border-color:#484ee8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #484ee8;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.form-group label.title{
  margin:0;
}
#sign-up-rs-btn{
  display: block;
  margin:0 0 40px;
  width:100%;
}

/*---------------------------------------------
Header
------------------------------------------*/
#header{
  background: url(../img/hero-home-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-size: cover;
  height:100vh;
  position: relative; 
}

.navbar-header{
	height: 70px;
}

.navbar-default{
  background: transparent;
  -webkit-transition         : all 0.3s ease 0s;
  -moz-transition            : all 0.3s ease 0s;
  -o-transition              : all 0.3s ease 0s;
  transition                 : all 0.3s ease 0s;  
  border:none; 
  margin:0;
}
.navbar-brand {
    padding: 22px 40px;
    height: inherit;
}
.navbar-brand .logo{
  height: 40px;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    background-color:transparent;
}
.navbar-default .navbar-nav li {
  padding: 8px 20px;
  margin-top: 15px;
  position: relative;
}
.navbar-default .navbar-nav li:last-child {
  padding-right: 40px;
}
.navbar-default .navbar-nav li a {
  font-family: 'hk_groteskregular'; 
  font-size: 15px;
  display: block;
  padding: 0;
  color: #fff;
  text-transform: uppercase;
  -webkit-transition         : all 0.6s ease 0s;
  -moz-transition            : all 0.6s ease 0s;
  -o-transition              : all 0.6s ease 0s;
  transition                 : all 0.6s ease 0s;
}
.navbar-default .navbar-nav a:focus, .navbar-default .navbar-nav li a:hover {
  color:#fff;
}

/*--------------------------------------------------------------
#hero-section
---------------------------------------------------------*/
.hero-content {
  width:30%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}

.hero-content h1{
  color:#fff;
}
.hero-content p{
  margin-top: 40px;
  color:#fff;
}

/*--------------------------------------------------------------
#benefits
---------------------------------------------------------*/
#benefits{
  padding:200px 0 100px;
  background: url(../img/background-search.svg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 
    calc(100% - 0%) /* 0px from the right */
    calc(100% - 235px); /* 235px from the bottom */  
  background-size: 60% auto;
}
.custom-row{
  width: 100%;
  float: left;
  padding:100px 0 0 110px;
}
.organic-search{
  float:left;
  width:33.333%;
  padding-right:5%;
}
.organic-search h1{
  font-family: 'hk_groteskregular'; 
  font-size: 70px;
  letter-spacing: 12px;
  color: #484ee8;
}

.case-study{

}
.case-study-cont{
  /* width:96%; */
  background: #484ee8;
  padding:100px;
  margin: 100px -100px 0 -100px;
  border-radius:5px;
  -webkit-box-shadow:0px 18px 30px -6px #777;
  -moz-box-shadow:0px 18px 30px -6px #777;
  box-shadow:0px 18px 30px -6px #777;
}
.case-study-cont p{
  color:#fff;
  text-transform: capitalize;
}
.case-study-cont a{
  font-family: 'hk_groteskregular';
  font-size: 40px;
  line-height: 52px;
  color:#fff;
  text-decoration: none;
  border-bottom: 1px solid;
}
.case-study-cont a:hover{
  color:#b5b8f5;
}


/*--------------------------------------------------------------
#ab-testing
---------------------------------------------------------*/
#ab-testing{
  padding:200px 0 0;
  background: #101457;
  position: relative;
}

#ab-testing .section-title h2{
  color:#fff;
}
#ab-testing .custom-row{
  padding:100px 0 300px 110px;
}
.ab-test-item{
  float:left;
  width:33.333%;
  padding-right: 6%;
}

.ab-test-item p{
  margin-top:40px;
  color:#fff;
}
.ab-testing-works{
  bottom: -12%;
  position: absolute;
  z-index: 2;
}
.ab-testing-works-cont{
  background: #fff;
  padding:100px;
  margin: 0px -100px 0 -100px;
  border-radius:5px;
  -webkit-box-shadow:0px 18px 30px -6px rgba(0,0,0,.1);
  -moz-box-shadow:0px 18px 30px -6px rgba(0,0,0,.1);
  box-shadow:0px 18px 30px -6px rgba(0,0,0,.1); 
}
.ab-testing-works-cont p{
  text-transform: capitalize;
}
.ab-testing-works-cont a{
  font-family: 'hk_groteskregular';
  font-size: 40px;
  line-height: 52px;
  text-decoration: none;
  border-bottom: 1px solid;
}
.ab-testing-works-cont a:hover{
  color: #b5b8f5;
}



/*--------------------------------------------------------------
#logo-stripe
---------------------------------------------------------*/
#logo-stripe{
  position: relative;
  padding: 320px 0 200px;
  background:#f0f1f6;
}

.strip-logos{
  float:left;
  width:33.333%;
}

.strip-logos{
  float:left;
  width:33.333%;
  height:70px;
  position: relative;
}

.strip-logos img{
  position: absolute;
  max-width:170px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);

}
.cups-html img{
  max-width:80px;
}
.zapier img{
  max-width:100px;
}


/*--------------------------------------------------------------
#rankscience-customer
---------------------------------------------------------*/
#rankscience-customer{
  background: url(../img/cta-home.jpg)no-repeat scroll;
  height:100vh;
  position: relative; 
  background-size: cover;
  padding:200px 0;
}
.customer-content h2{
  color:#fff;
}
.customer-content{
  width:44%;
  float:left;
}


/*--------------------------------------------------------------
Footer
---------------------------------------------------------*/
.footer{
  background: #444;
  padding:40px 0;
  color: #fff;
}
.footer-list{
  padding-left: 0px;
}
.footer-list li{
  display: inline-block;
  margin-right: 60px;
  font-size: 15px;
  line-height: 21px;
  float: left;
}
.footer-list li a, .footer-list li a:hover{
  color: #fff;
  text-decoration: none;
}


/*--------------------------------------------------------------
Casestudy Page
---------------------------------------------------------*/
.case-study #header{
  background:#fff;
  background-color: #fff;
  height:auto;
}

.case-study .mainNav li a{
  color:inherit;
}
.case-study .mainNav li a:hover{
  color: rgba(72, 78, 232, .7);
}
.main-content{
  max-width:600px;
  margin:0 auto;
}
.price .main-content{
  max-width:700px;
  margin:0 auto;
}
.price .main-content{
  margin: 40px auto 30px auto;
}
.main-content h1{
  text-align: center;
  font-size: 53px;
  line-height: 53px;
  margin:0 0 25px 0;
}
.main-content h2{
  margin:0 0 15px 0;
}
.case-study .main-content a{
  text-decoration:underline;
}
.case-study .main-content p{
  margin-bottom: 25px;
}
.case-study .main-content ul{
  margin-left: 35px;
}
.case-study .main-content ul li{
  list-style: disc;
}
.main-content img{
  margin-bottom: 30px; 
}
.main-content img.withshadow{
  -webkit-box-shadow:0px 18px 30px -6px rgba(0,0,0,.1);
  -moz-box-shadow:0px 18px 30px -6px rgba(0,0,0,.1);
  box-shadow:0px 18px 30px -6px rgba(0,0,0,.1); 
}
.main-content img.withshadow-extra{
  width: 100%;
  text-align: center;
  padding: 10px;
  border: 8px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,1,.3), inset 0 0 10px rgba(0,0,0,.1);
}
.cover-image{
  text-align: center;
}
.case-study .main-content .cover-image img{
  box-shadow: none;
  width: 100%;
  margin-top: 0;
}
.case-study2 .main-content .cover-image img{
  box-shadow: none;
  width: 100%;
  margin-top: 30px;
}
.case-study .about{
  background:#f0f1f6;
  padding:50px 0;
}
.about-rankscience{
  max-width: 600px;
  margin:0 auto;
}
.about a{
  text-decoration:underline;
}

.author-thumb, .about-thumb{
  width:25%;
  padding-right:30px;
  float:left;
}
.about-thumb{
  text-align: right;
}
.autor-desc, .about-rankscience-desc{
  float:left;
  width:75%;
  padding-right: 8%;
}
.autor-desc h3, .about-rankscience-desc h3{
  margin-bottom:5px;
}
.autor-desc p{
  margin-bottom:30px;
}
.getstarted{
  background:#0e1252;
  padding:100px 0;
}

.getstarted-content h2{
  display: inline-block;
  margin-right:40px;
  color:#fff;
}
.getstarted-content button#get_std{
  margin:0px;
}

/*------------------------------------------
how-it-works page style
------------------------------------*/
.how-it-works #header{
  background:#1A1F7F;
  background-color: #1A1F7F;
  height:auto;
}
.works-banner{
  padding:100px 0 150px;
}
.works-banner span{
  color:#fff;
  text-transform: capitalize;
}
.works-banner p, .works-banner h1, .works-banner h2, .works-banner h3{
  color:#fff;
  margin-bottom:40px;
}
.banner-item{
  float:left;
  width:33.333%;
  padding-right: 6%;
}
.banner-item img{
  height:130px;
  margin-bottom: 40px;
}

#rs-is-fast{
  padding:200px 0;
  background: url(../img/background-howitworks-rocket.svg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 
    calc(100%)
    calc(100% - 50%); /* 10% from the bottom */ 
}

#rs-is-fast .section-title{
  width:30%;
  margin-bottom:350px;
}
.client-platform{
  width:850px;
}
.client-platform ul li{
  display: inline-block;
  width:182px;
  color:#d3d4df;
  text-transform: capitalize;
  vertical-align: top;
}

#abtest-tab{
  background:#f0f1f6;
  padding: 200px 0;
}

#abtest-tab .section-title{
  margin-bottom:100px;
}

.carousel-inner {
  background: #fff;
  margin:0 -100px;
  width: initial;
  border-radius: 5px;
}
.carousel-control{
  background-image: none!important;
  top:50%;
  bottom: initial;
}
.carousel-inner{
  padding:100px;
    -webkit-box-shadow:0px 18px 30px -6px rgba(0,0,0,.1);
  -moz-box-shadow:0px 18px 30px -6px rgba(0,0,0,.1);
  box-shadow:0px 18px 30px -6px rgba(0,0,0,.1); 
}
.carousel-inner .item{
  padding:0 100px;
}
.scenario-thumb{
  width:48%;
  float:left;
}
.scenario-thumb img{
  width:70%;
  float:left;
}
.scenario-content{
  width:52%;
  float:left;
}
.scenario-content p{
  margin:30px 0;
}
.carousel-indicators{
  top:10px;
  bottom:initial;
  position: initial;
  margin:0 0 40px;
  text-align: left;
  counter-reset: dots;
}
.carousel-indicators li, .carousel-indicators li.active{
  display: inline-block;
  text-indent: inherit;
  width:initial;
  height:auto;
  padding:4px 20px;
  background:transparent;
  border-color: transparent;
  color:#babbcc;
}
.carousel-indicators li.active{
  text-decoration: underline;
  color:inherit;
}

.scenario-content h3 xmp{
  display: inline-block;
  margin:0;
  padding:0;
}
.carousel-control {
  font-size: 36px;
  color: #484ee8;
  text-shadow: none;
  text-align: initial;
}
.carousel-control.left{
  text-align: left;
}
.carousel-control.right{
  text-align: right;
}
.carousel-control.right img{
  transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.carousel-control:hover, .carousel-control:focus {
  outline: 0;
  color: #070a58;
  text-decoration: none;
  opacity: .9;
  filter: alpha(opacity=90);
}

.carousel-indicators li::before {
  counter-increment: dots;
  content: counter(dots);
  display: block;
  font-weight: bold;
  font-size: 16px;
  width: 24px;
  height: 24px;
  padding: 3px 10px;
  color:#babbcc;
}
.carousel-indicators li.active::before {
  text-decoration: none;
}

.how-it-works #logo-stripe{
  padding: 200px 0 250px;
}

.how-it-works .ab-testing-works-cont {
  background: #484ee8;
  
}
.how-it-works .ab-testing-works-cont a, .how-it-works .ab-testing-works-cont p{
  color:#fff;
}

.how-it-works .customer-content h2 {
    margin-top:110px;
}

.client-platform ul li { color:#aaa; }

/*CSS price page*/
.subscription-plan-body{
    background: #fff;
    border-top: 0;
    color: #666;
    border-radius: 8px;
}
.subscription-plan-body .plan{
  background: #e8e8e8;
  margin: 35px 0px 60px 0px;
  box-shadow: 1px 1px 10px 5px #dad9d9;
  min-height: 280px;
}
.subscription-plan-body .plan-price{
  text-align: center;
  cursor: pointer;
  padding: 20px 0;  
  color: #767676;
}
.subscription-plan-body .plan-title{
  margin-top: 0;
  font-size: 20px;
}
.subscription-plan-body h4{
  font-family: 'proxima-nova-light', sans-serif;;
  font-size: 24px;  
}
.subscription-plan-body .plan .selected{
  background: #fff;
  border: 2px solid #23297e; 
  position: absolute;
  width: 100%;
  height: 340px;
  margin-top: -30px;
  border-radius: 5px;
  padding: 45px 0;
  color: #23297e;
}
.subscription-plan-body .payment-hr{
  border-bottom: 2px solid #f9f9f9; 
  margin-bottom: 25px;
}
.subscription-plan-body .pay-btn-area{
  text-align: center;
}