/*
	Theme Name: Norbert
	Description: Find anyone email address
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	font:500 16px/1.6 "proxima-nova",sans-serif;
	color:#444;
	background: #fff;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:#444;
	text-decoration:none;
}
a:hover {
	color:#444;
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
	border:1px solid #04A4CC;
}

h4 {margin:0 0 5px 0;}
p {margin:0 0 20px 0;color:#777777;}

.green {color:#5fbe52;}
.purple {color:#d4a3d4;}

/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* wrapper */
.wrapper {
	max-width:1280px;
	width:95%;
	margin:0 auto;
	position:relative;
}

.col-half {
    width:50%;
    float:left;
    text-align:left;
    padding-right:5%;
}

.col-right {float:right;padding-left:5%;padding-right:0;}

code {
    background:#333;
    display:block;
    color:#fff;
    padding:25px;
    border-radius:3px;
    font-size:13px;
    font-family:Menlo,Monaco,"Courier New",monospace;
}


/*------------------------------------*\
    NORBERT
\*------------------------------------*/

#norbert {
    width:35px;
}

#norbert .style0 {
    fill: #E48130;
}

#norbert .style1 {
    opacity: 0.4;
}

#norbert .style2 {
    clip-path: url(#SVGID_2_);
    fill: none;
}

body.home {background:#f7f5f3;}

h2.post-article {
    font-weight: 100;
    font-size: 30px;
    margin: 15px 0;
    color: #e48130;
}

.btn {background:#5fbe52;color:#fff;font-weight:bold;}
a.btn, input.btn {border:none;padding:15px;border-radius:3px;display:inline-block;}
input.btn {padding:17px 20px!important;border-radius:3px!important;}
.btn:hover {color:#fff;}
.svg-icon {width:30px;height:30px;vertical-align:middle;opacity:0.6;}


#form-success .fake-title {
    font-weight: 300;
    font-size: 38px;
    margin-bottom: 10px;
    margin-top: 0;
    padding: 0;
    color:#5fbe52;
}

.blog-single #form-success .fake-title {
    font-weight:lighter;
    color:#5fbe52;
    font-size: 30px;
    margin-bottom: 11px;
    display: block;
}

.wrapper {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    position:relative;
}

.clear {clear:both;}

.centered {
    text-align:center;
}

header {
    padding: 20px 0 0 0; 
}

header nav {float:right;}
header nav ul li {float:left;list-style-type:none;margin-left:25px;margin-top:5px;}
header nav ul li a {position:relative;font-size:14px;opacity:0.6;letter-spacing:1.3px;padding:5px;font-family:"brandon-grotesque",sans-serif;font-weight:bold;text-transform:uppercase;font-size:11px;}
header nav ul li a:hover, header nav ul li.current-menu-item a {color:#e48130;opacity:1;}
header nav ul li a:before {
    opacity: 0;
    content: "";
    position: absolute;
    width: calc(100% - 10px);
    height: 1px;
    bottom: -2px;
    left: 5px;
    background-color: #e48130;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s!important;
    transition: all 0.3s ease-in-out 0s!important;
}
header nav ul li.current-menu-item a:before {
    content: "";
    position: absolute;
    width: calc(100% - 10px);
    height: 1px;
    bottom: -2px;
    left: 5px;
    background-color: #e48130;
    visibility: visible!important;
    -webkit-transition: all 0.3s ease-in-out 0s!important;
    transition: all 0.3s ease-in-out 0s!important;
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    opacity: 1;
}
header nav ul li:hover a:before {
    visibility: visible!important;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    opacity: 1;
}

a, a:before, .plans .save {
-webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

body {
-webkit-transition: background-color .25s ease-in-out;
    -moz-transition: background-color  .25s ease-in-out;
    -o-transition: background-color  .25s ease-in-out;
    transition: background-color  .25s ease-in-out;
}

.wrapper-bg {
    background:#f7f5f3;
    padding:70px 0;
}


.search {padding:40px 0 0 0;}
.search p.lead {font-weight:500;font-size:14px;font-weight:bold;opacity:0.5;}
.search h1 {font-weight:300;font-size:38px;margin-bottom:10px;margin-top:0;padding:0;}
.home h1 {margin-bottom:30px;}

.get-leads-video {text-align:left;font-size:13px;display:block;width:250px;margin:0 auto;opacity:0.6;}
.get-leads-video svg {float:left;width:35px;opacity:0.5;margin-right:15px;}

.features {background:#f4eee9;}
.features .row {padding:30px 0;}
.features .row .left, .features .row .right {position: relative;display: inline-block;width: 49%;margin: 0;padding: 0;vertical-align: top;}
.features .tour-content {width: 100%;max-width: 28.125em;margin: 0 auto;padding-top:100px;}
.features .tour-content h3 {opacity:.5;font-weight:500;}
.features .tour-content h2 {font-weight: 500;font-size: 30px;}
.cta {width:100%;margin:30px 0 40px;}
.cta strong {display:block;font-size: 30px;margin-bottom: 25px;font-weight: 500;}
.cta .btn {clear:both;float:none;margin:0 auto 0px auto;font-size:11px;letter-spacing:1.3px;padding:15px 20px;text-transform:uppercase;font-family:"brandon-grotesque", sans-serif;font-weight:bold;}
.cta-second .btn {
    background: transparent;
    border: 2px solid rgb(232, 230, 228);
    color: rgb(169, 164, 159);
}
.cta .btn:hover {background: #4bb53c;}
.cta-second .btn:hover {
    background: transparent;
    border: 2px solid rgb(195, 187, 179);
    color: rgb(128, 122, 117);
}
.cta span {font-size:13px;display:block;margin-top:15px;opacity:.8;}

.extension .btn {display:inline-block;margin-bottom:30px;}
.extension ul li {list-style-type:none;width:33.333333%;float:left;padding:0 20px;margin-top:15px;}
.extension {border-bottom:none;}

.feedback > div {width:50%;float:left;color:#fff;padding: 200px 10%;height:100%;}
.feedback .state-meh {background:#ea7474;}
.feedback .state-awesome {background: #5fbe52;}

video {
    margin-top: 80px;
    box-shadow: 0 6px 50px 0 rgba(0, 0, 0, 0.15);
    border-radius: 5px 5px 0 0;
    margin-bottom: -8px;
}


/************************************
Pricing
************************************/

.plans {
    margin:40px auto;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    list-style:none;
    padding:0;
}

.plans li {
    width: 18.5%;
    overflow:hidden;
    float: left;
    position:relative;
    text-align: center;
    margin: 0;
    padding: 20px;
    border-radius: 3px;
    border:1px solid #eee;
    margin-left: 1.5%;
    height:185px;
    transition: .2s all ease-in-out;
}

.plans li.is-prepaid {background: #fffbf8;
    border: 1px solid #ffd4b0;}

.monthly, .yearly {
    font-size: 13px;
    background: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 5px 15px;
    color: #777;
}

.monthly.active, .yearly.active {
    background: rgb(169, 164, 159);
    color:#fff;
}

.time-switch {
    margin-top:60px;
}

.plans li input {
    display:none;
}

.plans li.prepaid ul {
    margin:0;
    padding:0;
}

.plans li.prepaid ul strong {
    float:left;
}
.plans li.prepaid ul span {
    float:right;
}

.plans li.prepaid ul li {
    clear:both;
    margin:0;
    padding:0;
    display:block;
    width:100%;
    height:auto!important;
    border:none;
}

.plans li.plan-selected {
    border: 1px solid #E48436;
    box-shadow: 0 26px 40px -24px rgb(212, 189, 166);
}

.plans li p {
    color:rgba(0, 0, 0, 0.55);
    font-size:13px;
    margin-bottom:0px;
}

.plans h2 {
    margin-top:10px;
    font-size: 35px;
    position:relative;
    color: #e48130;
    font-size: 25px;
    font-weight:100;
    margin-bottom: 0;
}

.plans .lead-price {
    color:rgba(0, 0, 0, 0.55);
    margin-top:15px;
    font-size:14px;
}
.plans .price, .plans  .price-yearly {
    font-size: 30px;
    margin-top:15px;
    margin-bottom:-5px;
    font-weight: lighter;
    color: #E48130;
}

.plans .prepaid .price, .plans .prepaid .price-yearly {
    font-size: 13px;
    font-weight: normal;
    outline:none;
    border-radius:3px;
    width:100%;
    color:#333;
    background:none;
}

.plans li.active .price, .plans li.active .price-yearly {
    font-size: 13px;
    font-weight: normal;
    outline:none;
    border-radius:3px;
    width:100%;
    color:#333;
    background:none;
}

.plans .price sup {
    margin-left:-10px;
}

.plans .price span em {
    font-style:normal;
    font-size:9px;
    opacity:.5;
    display:block;
    margin-top:-5px;
    text-transform:uppercase;
    font-weight:100;
    font-family:"brandon-grotesque",sans-serif;
    letter-spacing:2px;
}

.plans .price-yearly, .plans.is-yearly .price {
    display:none;
}

.plans .price-prepaid {display:block!important;}

.plans.is-yearly .price-yearly {
    display:block;
}

.plans.is-yearly .price-yearly .old,
.plans.is-yearly .price-yearly .new {
    display:inline;
}

.plans.is-yearly .price-yearly .old {
    font-size:15px;
    opacity:0.7;
}


.plans .save {bottom:-30px;}

.plans.is-yearly .price-yearly .save {
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

.plans.is-yearly .price-yearly .save span {
     color: #5FBE52;
    background:rgb(222, 245, 219);
    padding: 7px 10px;
    font-weight: bold;
    font-size: 11px;
    margin-left: -21px;
    margin-right: -21px;
    display: block;
    margin-top:9px;
}

.plan-selection .cta {
    margin-bottom:100px;
}

.friends {
padding-bottom: 40px;
}

.friends img {
    float:right;
}

.side-h3 {
font-family:"brandon-grotesque", sans-serif;
float:left;
text-transform:uppercase;
font-weight:100;
font-size:12px;
letter-spacing:1.3px;
opacity:0.5;
}

hr {
height:1px;
opacity:0.3;
}

.questions h3 {
    font-size:38px;
    font-weight:lighter;
    margin:70px 0 50px 0;
    opacity:0.9;
}

.questions h4 {opacity:0.9;}
.questions p {margin-bottom:30px;}

.code-sample {
    margin-bottom:50px;
}

.code-sample .col-half {padding-right:2.5%}
.code-sample .col-right {padding-left:2.5%;}
.code-sample .side-h3 {float:none;clear:both;}


/************************************
BLOG
************************************/

.blog {
    width:100%;
    max-width: 720px;
    margin: 0 auto 100px auto;
}

.comments {margin:0 auto;width:100%;max-width:720px;}

.article-heading {margin-bottom:70px;}

article.post p {
        font-size: 18px;
    text-align: left;
    line-height: 35px;
    margin-bottom: 35px;
}

article.post ul li {    font-size: 18px;
    text-align: left;
    line-height: 35px;color: #777777;}

article {
    max-width: 650px;
    margin: 0 auto 50px auto;
}

.blog-single article h2 {
    margin-top: 55px;
    margin-bottom: 25px;
    text-align: left;
    color: #616161;
    font-size: 20px;
}

.capture-form {
    background:#fff;
    width:100%;
    padding:40px 0;
    border:1px solid #eaeaea;
    border-radius:3px;
    margin:40px auto;
}

.capture-form p {
    font-size:15px;
}

.fake-title {
    font-size: 30px;
    margin-bottom: 11px;
    display: block;
    font-weight: lighter;
    color: #e48130;
}

.article-meta {
    font-size:14px;
    color:#6b6b6b;
    margin-top:30px;
}

.article-heading h1 a {
    color:#e48130;
    font-size:45px;
}

.article-meta a {color:#6b6b6b}

.capture-input {
    height: 50px;
    padding-left: 14px;
    font-size: 13px;
    width: 200px;
    border-radius: 3px;
    border: 1px solid rgb(232, 230, 228);    
}

.capture-form-revenue {
    position: relative;
    clear: both;
    height: 30px;
    width:100%;
    max-width:645px;
    margin:30px auto 0 auto;
}

.revenue-progress {
    background: #eaeaea;
    width: 100%;
    height: 5px;
    border-radius: 5px;
}

.revenue-current {background:#5fbe52;height:5px;border-radius:5px;}

.revenue-marks>li {
    display: inline-block;
    position: absolute;
    bottom: 0;
    width: 40px;
    text-align:center;
    color:rgb(169, 164, 159);
    font-size:11px;
    transform: translateX(-50%);
}
.mark-0 {
    text-align: left;
    left: 0
}
.mark-20 {
    left:20%;
}
.mark-40 {
    left:40%;
}
.mark-60 {
    left:60%;
}
.mark-80 {
    left:80%;
}
.mark-100 {
    left:100%;
}

.article-heading img {width:204px;margin-top:30px;}

.loop article {border-bottom:1px solid rgba(0,0,0,.2);}
.loop article:last-child {border-bottom:none;}

.author {
    text-align:left;
    max-width: 450px;
    margin: 15px auto;
    width: 100%;
    display:block;
}
.author img {
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin-right:25px;
    float: left;
}

.author span {display:block;}


/************************************
RESPONSIVE
************************************/

@media screen and (min-width: 1450px) {
    video {width:1280px;margin-left:-140px;}
}

@media screen and (min-height: 900px) {
    .search {padding-top:80px;}
    video {margin-top:100px;border-radius:5px;}
}

@media screen and (max-width: 1000px) {
    video {width:95%;}
    .wrapper {padding:0 20px;}
}

@media screen and (max-width: 600px) {
    .col-half {width:100%;float:none;clear:both;margin:0;padding:0!important;}
    .side-h3 {text-align:center;display:block;width:100%;}
    #logo {text-align: center;display: block;}
    header nav {float: none;width: 100%;text-align: center;display: block;}
    header nav ul {padding:0;margin:0;}
    header nav ul li {float:none;display:inline-block;margin-left:10px;}
    header nav ul li:first-child {margin-left:0;}
    .plans {padding:40px;margin:0;}
    .plans li {width:100%;margin-bottom:10px;margin:0 0 10px 0;height:auto;}
    .plans.is-yearly li {padding-bottom:45px;}
    .plans h2 {float:left;margin-top:0;}
    .plans .price {float:right;margin-top:-35px;}
    .plans.is-yearly .price-yearly {text-align:right;float:right;margin-top:-35px;}
    .save {text-align:center;}
    .plans li p {float:left;clear:both;display:block;}
    .plans.is-yearly .is-prepaid {height:auto!important;padding-bottom:20px!important;}
}


/************************************
What have we done? NORBERT IS ALIVE !
************************************/

.eye {
    -webkit-animation: eyes-search 3s infinite;
    -moz-animation: eyes-search 3s infinite;
    animation: eyes-search 3s infinite;
}

@-webkit-keyframes eyes-search {
    0% {transform:translate(0,0);}
    33.3333333333% {transform:translate(4px,0);}
    66.6666666666% {transform:translate(-4px,0);}
    100% {transform:translate(0,0);}
}

@-moz-keyframes eyes-search {
    0% {transform:translate(0,0);}
    33.3333333333% {transform:translate(4px,0);}
    66.6666666666% {transform:translate(-4px,0);}
    100% {transform:translate(0,0);}
}

@keyframes eyes-search {
    0% {transform:translate(0,0);}
    33.3333333333% {transform:translate(4px,0);}
    66.6666666666% {transform:translate(-4px,0);}
    100% {transform:translate(0,0);}
}

/* Making the eyebrows up and down */

.eyebrows {
    -webkit-animation: eyebrows-search 3s infinite;
    -moz-animation: eyebrows-search 3s infinite;
    animation: eyebrows-search 3s infinite;
}

@-webkit-keyframes eyebrows-search {
    0% {transform:translate(0,0);}
    20% {transform:translate(0,0);}
    25% {transform:translate(0,-4px);}
    30% {transform:translate(0,-4px);}
    35% {transform:translate(0,0px);}
    35% {transform:translate(0,0);}
    40% {transform:translate(0,-4px);}
    45% {transform:translate(0,-4px);}
    50% {transform:translate(0,0px);}
    100% {transform:translate(0,0);}
}

@-moz-keyframes eyebrows-search {
    0% {transform:translate(0,0);}
    20% {transform:translate(0,0);}
    25% {transform:translate(0,-4px);}
    30% {transform:translate(0,-4px);}
    35% {transform:translate(0,0px);}
    35% {transform:translate(0,0);}
    40% {transform:translate(0,-4px);}
    45% {transform:translate(0,-4px);}
    50% {transform:translate(0,0px);}
    100% {transform:translate(0,0);}
}

@keyframes eyebrows-search {
    0% {transform:translate(0,0);}
    20% {transform:translate(0,0);}
    25% {transform:translate(0,-4px);}
    30% {transform:translate(0,-4px);}
    35% {transform:translate(0,0px);}
    35% {transform:translate(0,0);}
    40% {transform:translate(0,-4px);}
    45% {transform:translate(0,-4px);}
    50% {transform:translate(0,0px);}
    100% {transform:translate(0,0);}
}