You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

621 lines
11 KiB

.breadcrumb-trail a,
.link-btn,
a.more,
a.symbol {
text-decoration: none
}
#partner-link-3,
.bottomcta,
.btn-wrapper,
.cta-in,
.partner-cta,
.questions,
h1,
h2 {
text-align: center
}
body,
div,
html,
p {
margin: 0;
padding: 0
}
body {
/* max-width: 100%; */
/* overflow-x: hidden */
/* background-image: url('shop.jpg'); */
background-repeat: no-repeat;
}
@media(min-width:840px) {
.primary {
font-size: 4.7em
}
}
.wrapper {
width: 840px;
position: relative;
margin: auto;
max-width: 90%
}
.breadcrumb-trail {
list-style: none;
display: block;
font-size: 10pt;
margin-top: 0;
margin-bottom: 0;
padding-left: 0
}
.breadcrumb-trail li {
display: inline-block;
padding: 5px;
margin-right: 15px;
position: relative;
line-height: normal
}
.breadcrumb-trail a {
color: #00f;
font-weight: 400;
padding-bottom: 1px
}
.breadcrumb-trail a:hover {
border-bottom: 1px solid #00f
}
.breadcrumb-trail li:before {
content: '\0BB';
position: absolute;
left: -14px;
top: 0;
font-weight: 400;
font-size: 14pt
}
.breadcrumb-trail li:first-child:before {
content: '';
margin-left: 0
}
@font-face {
font-family: 'Mono Social Icons Font';
src: url(../fonts/MonoSocialIconsFont-1.10.eot);
src: url(../fonts/MonoSocialIconsFont-1.10.eot?#iefix) format('embedded-opentype'), url(../fonts/MonoSocialIconsFont-1.10.woff) format('woff'), url(../fonts/MonoSocialIconsFont-1.10.ttf) format('truetype'), url(../fonts/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont) format('svg');
src: url(../fonts/MonoSocialIconsFont-1.10.ttf) format('truetype');
font-weight: 400;
font-style: normal
}
.symbol,
a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased
}
a.symbol {
font-size: 50px;
line-height: 40px;
color: #333;
display: inline-block;
display: block;
-webkit-transition: .2s ease all;
transition: .2s ease all
}
html,
section {
font-weight: 100;
line-height: 1.4em
}
.s-tw:hover {
color: #4099FF
}
.s-fb:hover {
color: #3B5998
}
.s-gh:hover {
color: #000
}
a.symbol:hover {
background: rgba(255, 255, 255, .6)
}
.sharer {
position: fixed;
left: 0;
top: 100px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(0, 0, 0, .05);
-webkit-transition: .3s ease all;
transition: .3s ease all;
-webkit-transform: translateX(-40px) translateZ(0);
transform: translateX(-40px) translateZ(0)
}
.sharer.show {
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0)
}
.example.partner {
padding: 25px 15px 15px;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
transition: .3s ease all;
border: 5px dashed #48c600;
margin: 20px auto 40px -30px;
max-width: 100%;
cursor: pointer
}
* {
box-sizing: border-box
}
html {
color: #333;
font-family: sans-serif;
font-size: 16pt
}
section {
margin: 5px;
padding: 15px;
position: relative
}
h2 {
font-weight: 700;
font-size: 2em
}
.widgets {
position: fixed;
top: 200px;
width: 300px;
right: 40px;
display: none
}
.testimonial img {
position: absolute;
right: 0;
top: 10px;
border-radius: 100%;
overflow: hidden
}
.testimonial p {
padding-right: 130px;
padding-left: 40px;
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 10px
}
.testimonial span {
padding-left: 40px;
font-size: .8em
}
.testimonial span img {
position: relative;
top: 3px
}
.testimonial {
margin-bottom: 40px;
margin-top: 85px;
position: relative
}
a.more {
background: #494949;
color: rgba(255, 255, 255, .8);
font-size: .6em;
padding: 6px 8px;
line-height: 1.6em;
float: right;
margin-top: 5px
}
a.more:hover {
color: #fff
}
.questions {
font-size: .7em
}
.code {
max-width: 470px
}
.clear {
clear: both
}
.example-1 {
float: right;
background: rgba(0, 0, 0, .4);
width: 320px;
height: 270px;
margin-top: 10px
}
.plugin,
.showcase {
display: inline-block;
width: 262px;
height: 175px;
background: rgba(0, 0, 0, .2);
opacity: .9;
-webkit-transition: .3s ease all;
transition: .3s ease all;
margin-left: 6px
}
.plugin img,
.showcase img {
box-shadow: 0 0 5px #000;
border: 1px solid #000
}
.plugin:hover,
.showcase:hover {
opacity: 1
}
.primary {
padding: 0;
margin: 40px 0 50px
}
.secondary {
font-weight: 200
}
.hot {
color: #ec1e1e
}
.btn {
font-weight: 100;
display: block;
transition: .2s ease all
}
.btn,
.link-btn {
cursor: pointer;
padding: 10px 12px;
color: #fff;
border: none;
font-size: .8em;
margin: auto;
background: rgba(0, 0, 0, .8);
-webkit-transition: .2s ease all
}
.link-btn {
font-weight: 400;
transition: .2s ease all
}
.btn:hover {
background: rgba(0, 0, 0, .9)
}
.hot-cta {
background: rgba(236, 30, 30, .85) !important
}
.hot-cta:hover {
background: rgba(236, 30, 30, 1) !important
}
#t1 {
margin-top: 55px !important
}
.btn-gethm,
.in-email {
margin-top: 2px;
float: left
}
#t2 img {
top: 40px;
left: 0
}
#t2 {
margin-bottom: 0 !important
}
#t2 p {
padding-left: 120px;
padding-right: 0
}
.heatmap-wrapper {
position: absolute;
left: 0;
top: 0;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
transition: .3s ease all;
opacity: 1.0;
border-bottom: 1px solid rgba(255, 0, 0, .6)
}
.heatmap {
width: 100%;
height: 100%
}
.btn-gethm {
display: inline;
margin-left: -2px
}
.in-email {
font-size: 1em;
padding: 6px
}
.cta-in {
width: 500px;
margin: 20px auto
}
#partner-link-3 {
text-transform: uppercase;
display: block;
margin-top: 15px;
font-size: 16px;
padding-top: 15px
}
#partner-2 {
display: none;
position: fixed;
padding: 20px;
max-width: 300px;
margin-left: 450px;
-webkit-transition: 1s ease all;
-moz-transition: 1s ease all;
transition: 1s ease all;
-webkit-transform: translateY(1000px) translateZ(0);
-moz-transform: translateY(1000px) translateZ(0);
transform: translateY(1000px) translateZ(0);
margin-top: 0;
background: #f3f3f3;
bottom: 40%;
right: 20px
}
#partner-2.active {
-webkit-transform: translateY(0) translateZ(0);
-moz-transform: translateY(0) translateZ(0);
transform: translateY(0) translateZ(0)
}
#partner-2:after {
content: "";
position: absolute;
bottom: -15px;
right: 10px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3f3f3 transparent;
display: block;
width: 0
}
#partner-2 h3 {
margin-top: 0;
padding-top: 0;
font-size: 23px
}
#partner-2-closer {
float: right;
cursor: pointer;
margin-top: -10px;
margin-right: -5px
}
@media(min-width:1200px) {
#partner-2 {
display: block
}
}
@media(max-width:400px) {
.partner-cta {
width: 250px !important
}
}
#partner-1 {
padding: 15px;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
transition: .3s ease all;
border: 5px dashed #48c600;
margin: 50px auto auto;
max-width: 100%
}
#partner-1 .partner-headline {
text-transform: uppercase;
font-weight: 700;
font-size: 1.5em;
line-height: 150%;
padding-bottom: 10px
}
#partner-link-3,
.partner-cta {
background: #48c600 !important;
border-bottom: none;
box-shadow: 0 -3px rgba(0, 0, 0, .3) inset, 0 1px 1px rgba(0, 0, 0, .2);
border-radius: 2px;
cursor: pointer;
-webkit-transition: .2s ease all;
transition: .2s ease all
}
.partner-cta {
letter-spacing: 1px;
text-transform: uppercase;
margin: 20px auto auto
}
#partner-link-3:hover,
.partner-cta:hover {
background: #55e702 !important
}
code[class*=language-],
pre[class*=language-] {
color: #000;
text-shadow: 0 1px #fff;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
font-size: .9em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none
}
code[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
pre[class*=language-]::-moz-selection {
text-shadow: none;
background: #b3d4fc
}
code[class*=language-] ::selection,
code[class*=language-]::selection,
pre[class*=language-] ::selection,
pre[class*=language-]::selection {
text-shadow: none;
background: #b3d4fc
}
@media print {
code[class*=language-],
pre[class*=language-] {
text-shadow: none
}
}
pre[class*=language-] {
padding: 1em;
margin: .5em 0;
overflow: auto
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
background: #f5f2f0
}
:not(pre)>code[class*=language-] {
padding: .1em;
border-radius: .3em
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #708090
}
.token.punctuation {
color: #999
}
.namespace {
opacity: .7
}
.token.boolean,
.token.constant,
.token.number,
.token.property,
.token.symbol,
.token.tag {
color: #905
}
.token.attr-name,
.token.builtin,
.token.selector,
.token.string {
color: #690
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
color: #a67f59;
background: hsla(0, 0%, 100%, .5)
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a
}
.token.important,
.token.regex {
color: #e90
}
.token.important {
font-weight: 700
}
.token.entity {
cursor: help
}