h1,h2 {font-family: 'Playfair Display', serif; font-weight: 400; font-size: 48px;}
.join-now {
    font-family: 'Playfair Display', sans-serif;
    font-weight: normal;
    font-size: 42px;
    position: relative;
    margin-bottom: 50px;
}
    .join-now::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -30px;
        height: 4px;
        background-color: #ccc;
        width: 70px;
        left: calc(50% - 35px);
    }
.no-card {
    font-size: 16px;
    color: #aaa;
    margin: 10px 0;
    line-height: 24px;
}
body,h3,h4,h5,h6,p{font-family: 'Poppins', sans-serif;} /*myriad-pro*/
body > .header{width: 100%;  z-index: 12; box-shadow: 0 0 40px 40px rgba(0,0,0,.05); }
.nav {max-width: 1200px; margin: 0 auto; padding: 0 20px !important; position: relative;}
.home .header {position: absolute; box-shadow: none; left: 0; right: 0; z-index: 10;} 
/*.home .header .menu:first-child a {color: #fff;}*/
.is_stuck {position: fixed !important;  bottom: auto !important; /*top: 1px !important;*/}
.home .header.is_stuck {background: #000;}


.menu{ list-style: none; display: inline-block; margin: 0; padding: 10px 0 0 0;}
.menu:first-of-type li:first-child, .menu:first-of-type li:first-child a {padding-left: 0;}

.menu li{display: inline-block;  text-align: center; position: relative; padding: 0 15px;}
.menu a.top-level{color: #111; letter-spacing: 2px; display: inline-block; font-size: 12px; font-weight: 500; padding: 10px 0 5px 0; text-transform: uppercase;  border-bottom: 2px solid transparent;}
.menu a.top-level:hover { border-bottom: 2px solid #222; }
.menu a:hover, .menu a:active, .menu a:visited, .menu a:link {text-decoration: none !important;}
.dropdown-trigger i {font-size: 8px; color: #555; vertical-align: middle;}
/*.home .menu a:hover {border-color: #fff;}*/

.menu.right {position: absolute; right: 10px; top: 0;}
.menu.right a {padding: 10px 0 5px 0;}
.menu.right a:hover {border-color: #333;}
.menu.right li:last-child {padding-right: 0;}

.menu .signup {padding-left: 0;}
.menu .signup a {background: #222; color: #fff; padding: 10px 18px; transition: all 0.3s;}
.menu .signup a:hover {background: #ddac58; color: #000; border-bottom: none;}
.slicknav_menu, #menu{display: none;}

.offer {background: #222; color: #ddac58; position: relative; height: 50px;}
.offer .content {max-width: 1200px; margin: 0 auto; padding: 0 20px; opacity: 0; display: flex;}
.offer .content > div { padding: 12px 0; flex: 1 1 50%; font-size: 16px; letter-spacing: 1px; font-family: 'Playfair Display', Georgia, serif;}
.offer .content > div:first-child {   text-align: left; }
.offer .content > div:first-child span { font-weight: bold; font-family: Poppins, sans-serif;}
.offer .content > div:nth-child(2) {position: relative; flex: 0 1 100px; }
.offer .content > div:last-child {text-align: right; }
.offer .content a {color: inherit; text-decoration: none; transition: all 0.3s; display: inline-block;}
.offer .content a:hover {color: #ddac58;}
.offer .content span {vertical-align: middle;}
.offer .content span i:not(.fal) { opacity: 0.6; font-size: 14px; font-weight: 200;}
.offer .content .fa-chevron-right { opacity: 0.3; padding: 0 5px;}
.offer .fa-star {font-size: 24px; padding-right: 8px; vertical-align: middle; color: #444; }

.offer .close {position: absolute; right: 20px; top: 12px;}
.offer .close a {color: #ddac58; opacity: .3; transition: all 0.3s;}
.offer .close a:hover {opacity: .8;}
.offer .joe {position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; width: 60px; height: 60px; border-radius: 50%; border: 2px solid #fff;  background-size: cover; display: inline-block;}

.blog-article-wrapper .ws-block p a {color: #cc8e35; text-decoration: underline;}

.typed-cursor{
    font-weight: 200;
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.body-content {}

.associated-brands { max-width: 1200px; margin: 50px auto; padding: 0 50px; text-align: center; border-top: 1px solid #eee; padding-top: 20px;}
.associated-brands ul { display: flex; align-items: center; }
.associated-brands li {list-style: none; margin: 0; padding: 0 50px; }
.associated-brands li img {width: 100%;}

.number-features {margin: 90px auto 0 auto; padding: 0; display: flex; font-family: 'Playfair Display', serif;}
.number-features li {list-style: none; width: 33.33%; padding: 0 35px; vertical-align: top; text-align: center; display: flex;}
.number-features li div:first-child {width: 60px; height: 60px; flex-shrink: 0; margin-right: 20px; border-radius: 50%;  color: #222; font-size: 32px; padding-top: 5px; text-align: center;} /*background: #eee;*/
.number-features li:nth-child(2) div:first-child {padding-top: 2px;}
.number-features li > div {display: inline-block; vertical-align: top;}
.number-features li div:last-child {text-align: left; flex-grow: 1;}
.number-features h5 {font-size: 24px; font-family: inherit;}
.number-features p {font-size: 14px; font-family: inherit; color: #888;}
.number-features a {color: inherit; text-decoration: none;}
.number-features a:hover {text-decoration: underline;}
.number-features-header {text-align: center; margin: 0 auto;}
.screen-examples { width: 80%; margin: 0 auto; display: block;  }

.feature-banner {position: relative; background: #eee ;}
.feature-container {padding-top: 15%; padding-bottom: 15%; }
.feature-text {max-width: 1200px; margin: 0 auto; position: relative; text-align: left;}
.feature-banner h1 {font-size: 48px; color: #222; text-shadow: 0 0 2px #888; text-transform: uppercase;  letter-spacing: 1px; font-weight: bold; } 
.feature-banner h1.feature {font-weight: 400; text-shadow: none; text-transform: none; max-width: 600px;}
.feature-banner h5 {font-size: 18px; color: #888;}

.feature-image {position: absolute; object-fit: cover; object-position: center;}
.feature-image.proofing-one {height: 150px; width: 150px; top: -150px; left: -180px;}
.feature-image.proofing-two {width: 92px; height: 92px; top: -130px; right: 200px;}
.feature-image.proofing-three {width: 370px; height: 370px; top: 20px; right: -180px;}
.feature-image.proofing-four {bottom: -300px; right: 400px; width: 200px; height: 250px;}


.devices {width: 100% !important; margin-left: 0 !important;}
.devices .desktop {width: 90% !important; margin-top: 15%;}
.devices .mobile {width: 30% !important; right: 0% !important; bottom: 0% !important;}

.page-banner { min-height: 580px; position: relative;  overflow: hidden;
              height: 100vh;
               /*sparkler_cover_bw*/
            background-size: cover;
            background-position: center top;
            border-bottom: 1px solid #eee;
}
.home .page-banner {}
.page-banner.sales {background-image: url('../jpg/cover-sales-dashboard.jpg'); background-position: center top !important; height: 75vh;}
.page-banner.light {background: rgba(233,212,96,0.2);}
.page-banner.dark {background: #000000;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #000000, #434343);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #000000, #434343); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.page-banner svg {position: absolute; bottom: -1px; left: 55%; width: 120%;}
.page-banner svg path {fill: pink;}
.page-banner .wrapper { position: relative; width: 100%; height: 100%;
                        /*background: rgba(20,20,20,.9);*/
}
.page-banner.light .wrapper, .page-banner.dark .wrapper {background: none;}
.page-banner .container {
    max-width: 1200px; margin: 0 auto; padding: 0 0; position: relative; height: 100%;
    
    /*position: absolute; top: 100px; left: 120px; bottom: 0; right: 120px; 
                         background-image: url(/Content/sparkler_cover.jpg);
                         background-size: cover;
                         background-position: center 40%;*/
                         }
.page-banner .screens {position: absolute; left: 50%; right: -200%; top: 12%; z-index: 10; bottom: 0;}
.page-banner .screens > div {width: 140%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: left top;}
.home .page-banner .screens {display: none;}
.sales .page-banner-text {top: 8%; transform: translateY(-10%);}
.page-banner-text {position: absolute; top: 45%; transform: translateY(-45%); left: 0; right: 0; padding: 0 20px;}
.light .page-banner-text, .dark .page-banner-text {width: 45%;}

.page-banner h1 { font-size: 54px; color: #222;  letter-spacing: 1px; line-height: 1.3; } /*text-shadow: 0 0 2px #ddac58;*/
.page-banner h1.feature {font-weight: 400; text-shadow: none; text-transform: none; text-align: center; max-width: 600px; margin: 0 auto;}
.page-banner h1 span.after-block::after {display: block; content: '';}
.page-banner h1 span.before-block::before {display: block; content: '';}
.page-banner h1 .typed-cursor {display: inline; z-index: 1; position: relative;}

.page-banner.sales h1 {color: #222; font-size: 42px; font-weight: bold;}
.page-banner.light h1 {color: #222; position: relative; margin-bottom: 50px;}
.page-banner.dark h1 {position: relative; margin-bottom: 50px;}
.page-banner h2 { font-size: 54px; color: #fff;  letter-spacing: 1px; line-height: 1.3; } 
.page-banner.light h3 {color: #333;}
.page-banner.dark h3 {color: #888;}
#spnTyped {color: #ddac58 !important;  display: inline; padding-right: 10px;}
#spnTyped.typing {padding-right: 0;}
/*#spnTyped {color: #ddac58 !important; text-shadow: 0 0 2px #ddac58 !important; font-size: 42px; display: inline;}
#spnTyped {font-weight: 200; color: #F62459; text-shadow: 0 0 5px #F62459;} */
.page-banner h6 {color: #888; font-size: 16px; line-height: 1.6; letter-spacing: 2px; font-weight: 200; margin: 20px 0 10px 0;}
.page-banner h6 u {text-decoration: none; border-bottom: 1px solid #555; padding-bottom: 1px;}
.page-banner h5 {text-align: center; font-size: 18px; color: #888;}

.page-banner .white h1 { color: #fff;}
.page-banner .white h6 { color: #ddd;}


.page-banner-thumb {width: 120px; position: absolute; z-index: 2; border-radius: 4px; box-shadow: 0 0 4px rgba(0,0,0,0.3); overflow: hidden;}
.page-banner-thumb.one { right: 35%; bottom: 20%; }
.page-banner-thumb.two { right: 30%; bottom: 35%; width: 200px;  }
.page-banner-thumb.three { right: 25%; bottom: 5%; width: 120px;}
.page-banner-thumb.four { right: 32%; bottom: 55%; width: 120px;}
.page-banner-thumb.five { right: 24%; bottom: 50%; width: 120px;}
.page-banner-thumb img {width: 100%;}

.cup-o-joe {position: absolute; top: -20px; right: -10px; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #aaa; background-image: url('../jpg/cupojoe.jpg'); background-size: cover;}

.pay-interval label {font-size: 18px; font-weight: normal; color: #555; cursor: pointer; }
.pay-interval label:first-of-type {padding-right: 20px;}
.pay-interval label span {color: #39ac6e; font-size: 16px;}
.pay-interval input[type=radio] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
    margin-right: 4px;
    outline: none !important;
}




.page-part {
    color: #333;    
    margin: 150px 0;
    text-align: left;
}
.home .page-part {margin: 100px 0;}
.page-part.nomargin {margin: 0 0;}
.page-part.first {margin: 100px 0 0 0;  padding-bottom: 5%;  }



.custom-options { display: inline-block; width: 100%; margin: 0; padding: 0;}
.custom-options li {list-style: none; width: 100%;   margin: 8px 0; max-width: 150px; cursor: pointer;}
.custom-options li > div:first-child {background-size: cover;  width: 100%; padding-bottom: 60%; border-radius: 3px; background: #555;}


.page-part.tall {/*margin-bottom: 320px;*/}
.page-part.gray { background-color: #f5f5f5; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;}
.page-part.center {text-align: center; padding: 6% 0 0 0;}
.page-part > div.page-part-text:first-child {padding-right: 10%;}
.page-part.narrow > div {max-width: 1200px; margin: 0 auto; position: relative;}
.page-part.highlight > div {position: relative; display: flex; align-items: center;
    flex-direction: row;}
.page-part.highlight > div.section-reversed {flex-direction:row-reverse;}
.page-part > div.page-part-image:first-child {}
.page-part-text { width: 45%; padding: 0 6vw 0 15vw;  }
.section-reversed .page-part-text {padding: 0 15vw 0 6vw;}
.gray .page-part-text {padding-top: 6vw; padding-bottom: 10vw;}
.page-part-image { width: 55%; position: relative; }
.page-part-image > div { position: absolute;}
.page-part > div.page-part-image:first-child > div {background-position: right center;}


.app-features {display: flex; flex-wrap: wrap; margin: 0 10%;}
.app-features > div {width: 25%; padding: 20px 40px; display: flex;}
.app-features > div > div {font-size: 20px; }
.feature .graphic i {font-size: 32px; display: inline-block; text-align: center; margin-bottom: 20px; background: #1a1a1a; color: #ddac58; width: 90px; height: 90px; padding-top: 28px; border: 2px solid #eaeaea; border-radius: 50%;}
.feature h5 {font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: normal; color: #bbb;}
.feature p {padding: 10px 0; font-size: 18px; line-height: 1.5;}
.page-part .app-features {max-width: 1200px; margin: 5% auto;}
.page-part .app-features .feature {width: 33.33%; text-align: center;}

.block-display {width: 100%; display: block !important;}
.block-display h5 { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: #1a1a1a; padding-top: 8px;}
.block-display p {padding: 10px 0; font-size: 16px; line-height: 26px;}
.block-display .top-section {position: relative;}
.top-section {margin-bottom: 5%;}
.top-section img {box-shadow: 0 1.8vw 4vw rgba(0,0,0,.2); width: 100%;}

.image-bottom { background:  #ddac58; background-size: cover; background-position: center center; background-image: none !important; opacity: 0.3; height: 100%; width: 50%;} 
.image-top{ z-index: 10; background-size: contain;  background-repeat: no-repeat; background-position: left center; box-shadow: 0 1.8vw 4vw rgba(0,0,0,.2);}
.image-top img {width: 100%;}

.carousel-holder {height: 100%; }
.carousel-holder > div {height: 100%;}
.carousel-holder img {height: 100%;}

#image-bottom-customize { position: absolute; left: 16vw; top: 2vw; width: 23.398994vw; height: 38vw; }
#image-top-customize { position: relative; left: 10vw;  width: 23.398994vw; height: 38vw;}

#image-bottom-proofing { position: relative; top: -5vw; left: 10vw; width: 15vw; height: 15vw; }
#image-top-proofing { top: -2vw; left: 13vw; width: 34.810116vw; height: 22vw;}

#image-bottom-download { bottom: -3vw; left: 23vw;  width: 15vw; height: 15vw;}
#image-top-download { position: relative;  width: 34.850772vw; height: 22vw;}

#image-bottom-sales { top: 10vw; left: 10vw; width: 15vw; height: 15vw; }
#image-top-sales { position: relative; left: 13vw; width: 34.366860vw; height: 22vw;}

#image-bottom-visitors { bottom: -3vw; left: 15vw; width: 22vw; height: 22vw;}
#image-top-visitors { position: relative; left: 8vw; width: 26.026808vw; height: 38vw;} 

#image-bottom-directory { top: -6%; left: 10vw; width: 15vw; height: 15vw; }
#image-top-directory { position: relative; top: 1vw; left: 13vw; width: 30.822616vw; height: 22vw;}

.page-part h1,.page-part h2 {font-size: 48px; line-height: 1.1; font-family: 'Playfair Display', serif; color: #151515; text-rendering: optimizeLegibility; position: relative; margin-bottom: 50px;}
.page-part h2 a { color: inherit; text-decoration: none; }
.page-part h2::after, .page-banner.light h1::after, .page-banner.dark h1::after {
/*    content: '';
    position: absolute;
    left: 0; bottom: -30px;
    height: 3px;
    background-color: #ccc;
    width: 70px;*/
 }
.page-banner.light h1::after {background-color: #888;}
.page-banner.dark h1::after {background-color: #555;}
.page-part h2.right::after {left: auto; right: 0;}
.page-part h2.center::after {left: calc(50% - 35px);}
.page-part h3 {font-size: 18px; font-weight: 300; color: #252525; margin: 25px 0; line-height: 1.8;}

.brand-fit {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.brand-fit > div { width: 100px; position: absolute;}
.brand-fit > div:nth-child(1) {left: 0%; top: 10%;  }
.brand-fit > div:nth-child(2) {left: 17%; bottom: -250px; }
.brand-fit > div:nth-child(3) {left: 40%; bottom: -180px;  }
.brand-fit > div:nth-child(4) {left: 65%; bottom: -210px;  }
.brand-fit > div:nth-child(5) {left: 90%; bottom: -20px;  }
.brand-fit > div:nth-child(6) {left: -18%; bottom: -50px;  }
.brand-fit > div:nth-child(7) {right: -18%; top: 5%;  }
.brand-fit .portrait {width: 100px; height: 100px; border-radius: 50%; background: #eee; background-size: cover; border: 5px solid #ddd;}
.brand-fit .caption {font-size: 11px; text-transform: uppercase; padding: 5px 0 0 0;}

.ig-feed {color: #555; background: #222; font-size: 12px; padding: 0 0 0 0; display: flex; flex-direction: row; flex-wrap: nowrap; overflow:hidden;
          background: #111;
}
.ig-feed > div { flex: 0 0 6.667%; flex-wrap: wrap;  }
.ig-feed > div img { transition: all 0.3s; opacity: 0.7;  width: 100%;}
.ig-feed > div:hover img {opacity: 1.0; }     
.ig-feed > div:hover {color: #888;}                       
.ig-feed > div:hover .zmdi-favorite {color: #C0392B;}                       
.ig-feed span {display: block; text-align: center; padding: 5px 0;}
.ig-feed .zmdi-favorite { color: #ddd; transition: color 0.3s;}

.themes {list-style: none; padding: 0; display: flex; flex-wrap: wrap;}
.themes li {box-sizing:border-box; width: 33.333%; padding: 20px 20px; position: relative; transition: all .2s ease-in-out; text-align: center;}
.themes li > a {display: block; text-decoration: none !important; color: #222;}

.themes li:hover {} /*transform: scale(1.03);*/
.themes li div:first-child {position: relative;}
.themes li .overlay {z-index: 10; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity 0.6s;}
.themes li .overlay img {max-height: 80%; width: auto !important; position: absolute; bottom: 0; right: 4%; }
.themes li .overlay:hover {opacity: 1;}
.themes li img {width: 100%;}

.themes li a:hover div {color: #ddac58; }
.themes li a:hover .overlay div {color: #fff;}
.themes li .preview {}
.themes li .preview img {width: 100%; }
.themes li:hover .preview img {}
.themes li .name {font-size: 16px; font-weight: 800; margin-top: 15px; text-transform: uppercase; letter-spacing: 2px;}
.themes li > div:first-child { box-shadow: 0 0 5px rgba(0,0,0,0.3);}

.alternate-layouts {}
.alternate-layouts li {list-style: none; padding: 5%; display: flex; flex-direction: row; align-items: center;}
.alternate-layouts li .left {width: 55%;}
.alternate-layouts li .right {width: 45%;  }
.alternate-layouts li.reverse {flex-direction: row-reverse;}

div.action { margin-top: 0;
  margin-bottom: .5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;}
.btn-action {background: #000; font-family: 'Poppins', sans-serif; color: #fff; letter-spacing: 2px; padding: 12px 25px; display: inline-block; margin-top: 20px; text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 400; transition: background-color 0.3s;}
.btn-action.more { background: #aaa;}
.btn-action.large {padding: 18px 30px; }
.btn-action:hover {background: #ddac58; border-color: #ddac58; color: #fff; text-decoration: none;}
.btn-action.green {background-color: #ddac58; color: #222;}
.btn-action.pink {background: #DB0A5B; }
.btn-action.pink:hover {background: #F62459;}
.btn-action.white {background: #eee; color: #222; }
.btn-action.white:hover {background: #fff;}

.btn-action.final {background: #ad7d2b; color: #fff; margin-right: 0;}
.btn-action.final:hover {background: #1E824C; border-color: #1E824C;}

mobilefooter {display: none; padding: 10px 20px; color: #aaa; background: #222; text-transform: uppercase; font-size: 11px; letter-spacing: 1px;}
.body-content > .footer{padding: 80px 20px 120px 20px; background: #111; }
.body-content > .footer .wrap{color: #aaa; font-size: 14px; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.body-content > .footer .wrap > div {flex: 1; padding-right: 20px; letter-spacing: 1px; }
.body-content > .footer h5 {font-weight: 700; font-size: 14px; text-transform: uppercase; color: #aaa; margin-top: 2px;}
.body-content > .footer a {display: block; line-height: 28px; color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.3s;}
.body-content > .footer a:hover { text-decoration: none; color: #fff;}
.body-content > .footer i {padding-right: 4px;}

#world-map {/*width: 800px; height: 350px; margin: 40px auto 100px auto; position: relative; max-width: 90%;*/ font-size: 1.25vw; position: absolute; top: 0; left: 0; height: 27em; width: 100%; z-index: 10; margin: 0; padding: 0; }
#world-map > img { position: absolute; top: 3em; left: 50%; transform: translateX(-50%); width: 40em; height: 15.835em; }
@media screen and (max-width: 700px) {
    #world-map > img { width: 70em; height: 27.711em; }

}

#world-map > div {list-style: none; margin: 0; padding: 0 -5px; position: absolute;   font-size: 9px; text-align: left;  
               font-size: 1.25vw;
               transition: all 0.7s;
/*               -webkit-transition:  -webkit-transform .4s ease-out;                                                                                 
                -moz-transition: -moz-transform .4s ease-out;
                -o-transition: -o-transform .4s ease-out;
                -ms-transition: -ms-transform .4s ease-out; 
                transition: transform .4s ease-out; */
}
    #world-map > div:hover {
        /*    -webkit-transform:scale(1.2);
   -moz-transform:scale(1.2);
   -o-transform:scale(1.2);
   transform:scale(1.2);*/
    }




#world-map > div {   }
#world-map .item { display: flex; padding: 6px 10px 6px 6px; border-radius: 4px; transition: all 0.7s; }
#world-map > div img {border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,.2); width: 2em; height: 2em; display: block; margin-right: 15px;}
#world-map > div.blue img { border-color: rgba(34, 167, 240, .5); }
#world-map > div.red img { border-color: rgba(246, 36, 89, .5); }
#world-map > div.orange img { border-color: rgba(246, 36, 89, .5); }
#world-map > div.orange img { border-color: rgba(248, 148, 6, .5); }
#world-map > div.purple img { border-color: rgba(142, 68, 173, .5); }
#world-map > div.green img { border-color: rgba(46, 204, 113, .5); }
#world-map > div.yellow img { border-color: rgba(244, 208, 63, 1); }
#world-map > div.gray img { border-color: rgba(149, 165, 166, .5); }
#world-map .details { opacity: 0; transition: all 0.7s;}
#world-map > div:hover .details { opacity: 1;}
#world-map .item:hover { box-shadow: 0 0 10px rgba(0,0,0,.2); background: #fff;}
#world-map .name { color: #111; text-shadow: 1px 1px 2px #fff; font-size: 10px; font-weight: bold; }
#world-map .title { color: #555; text-shadow: 1px 1px 1px #fff; font-size: 9px;}
#world-map .type { color: #888; text-shadow: 1px 1px 1px #fff; font-size: 9px; font-style: italic;}

@media screen and (max-width: 1600px) {
    .page-banner .screens {}
    .page-banner .screens > div {}
    .ig-feed > div { flex: 0 0 6.666%; }
}

@media screen and (max-width: 1200px) {
    #image-bottom-proofing { position: relative; left: 6vw; width: 22vw; height: 22vw; }
    #image-top-proofing { top: 3vw; left: 11vw; width: 41.139228vw; height: 26vw;}

    #image-bottom-download { bottom: -3vw; left: 28vw;  width: 22vw; height: 22vw;}
    #image-top-download { position: relative;  width: 45.009822vw; height: 26vw;}

    #image-bottom-sales { top: 8vw; left: 6vw; width: 22vw; height: 22vw; }
    #image-top-sales { position: relative; left: 11vw; width: 40.615380vw; height: 26vw;}


    #image-bottom-directory { top: 15%; left: 6vw; }
    #image-top-directory { position: relative; left: 11vw; width:36.426728vw; height: 26vw;}

/*    .page-banner { background-position: 20% top;}*/
    .page-banner .screens > div {}
    .ig-feed > div { flex: 0 0 10.0%; }
    .page-part {margin: 220px 0 !important;}
    .page-part.first {margin-top: 200px; padding-bottom: 15%;}
    .page-part.tall {margin-bottom: 200px;}
    .page-part.narrow > div, .page-part.highlight > div {}
    .page-banner-text {padding: 0 40px;}
    .page-banner-text h1 {font-size: 48px;}

    .page-banner.sales h1 {font-size: 36px;}
    .page-part h2 {font-size: 36px;}
    .page-part h3 {font-size: 14px;}

    .brand-fit > div, .brand-fit .portrait {width: 80px; height: 80px;}
    .brand-fit > div:nth-child(1) { left: -1%; }
    .brand-fit > div:nth-child(2) { bottom: -180px; }
    .brand-fit > div:nth-child(3) { bottom: -130px; }
    .brand-fit > div:nth-child(4) { bottom: -160px; }
    .brand-fit > div:nth-child(5) { left: 93%; }

    #image-bottom-customize {left: 30%;}
    #image-top-customize {top: -10%; left: 20%;}

    .themes li {width: 50%;}

    .number-features {margin: 60px auto 0 auto; width: 85%; }
    .number-features li {padding: 0 25px;}
    .number-features li div:first-child {width: 50px; height: 50px; flex-shrink: 0; margin-right: 20px; border-radius: 50%; background: #eee; color: #222; font-size: 26px; padding-top: 7px; text-align: center;}
    .number-features h5 {font-size: 20px;}
    .number-features p {font-size: 14px; color: #888;}
    .number-features-header {text-align: center; width: 75%; margin: 0 auto;}
    .screen-examples { width: 90%;  }
}

@media screen and (max-width: 975px) { .cup-o-joe  {top: 10px; right: 0;}}
@media screen and (max-width: 900px) {
    #world-map {width: 650px; height: 285px; margin: 20px auto 40px auto; }

    .menu {display: none;}
    .menu-home {display: none;}
    .slicknav_menu{display: block; position: fixed; top: 0; right: 0; left: 0; padding: 0; z-index: 11;}
    .slicknav_btn { z-index: 11; margin: 10px 15px 10px 0; }
    .slicknav_menu {background: none;}
    .slicknav_menu.open-menu{background: #444; }
    .slicknav_menu.open-menu .menu-home {display: block; position: absolute; top: 15px; left: 18px; text-transform: uppercase; font-size: 12px; color: #fff; font-weight: bold; letter-spacing: 1px;}
    .slicknav_menu.open-menu .menu-home:hover {text-decoration: none; color: #fff;}
    .slicknav_nav li {border-top: 1px solid #555;}
    .slicknav_nav a {margin: 0 0; padding: 12px 20px; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; color: #ccc;}
    .slicknav_nav a:hover {border-radius: unset; color: #555; text-decoration: none;}

    .page-banner { height: auto; overflow: hidden;}
    
    .home .page-banner {overflow: hidden; height: auto; min-height: unset;}
    .home .page-banner .container {height: auto;}
    .home .page-banner .screens {top: unset; height: auto; position: relative; display: block; width: 100%;}
    .home .page-banner .screens .devices {height: auto;}
    .home .page-banner .screens .devices img {width: 100%;}
    .home .page-banner-text {text-align: center; top: unset; transform: unset; position: relative; margin-bottom: 0;}
    .home .page-banner-text h1 {margin-top: 25%;}
    .page-banner h1::after  {right: 0; margin: 0 auto;}

    .page-banner .screens { position: relative;}
    .page-banner .screens > div {}
    .ig-feed > div { flex: 0 0 12.5%; }

    .page-banner-text {text-align: center; width: 100% !important; position: relative; top: unset; left: unset; right: unset; transform: unset; margin: 10% 0;}
    .page-banner-text h1 {font-size: 42px;}
    .page-banner svg {display: none;}
    .page-banner .screens {left: unset; right: unset; top: unset; bottom: unset; height: 100%;}

    .screenshot {height: auto !important; width: 90%; position: unset !important; display: block; margin: 0 auto;}

    .page-part {margin: 80px 0 !important;}
    .page-part.first {margin-top: 120px;}
    .page-part.tall {margin-bottom: 120px;}
    .page-part.narrow > div, .page-part.highlight > div {}
    .page-banner.sales h1 {font-size: 28px;}
    .page-banner h5 {font-size: 16px;}
    .page-part h2 {font-size: 22px;}
    .page-part h3 {font-size: 12px;}

    .brand-fit > div:nth-child(2) { bottom: -150px; }
    .brand-fit > div:nth-child(3) { bottom: -110px; }
    .brand-fit > div:nth-child(4) { bottom: -130px; }

    .page-part .app-features .feature {width: 50%;}
    .app-features > div {padding: 10px 20px;}

    .themes li {padding: 30px;}
    .themes li .name {font-size: 14px;}

    .offer {height: 50px; display: none !important;}
    .offer > .content > div {padding: 5px;}
    .offer > .content > div:first-child { order: 2;}
    .offer > .content > div:nth-child(2) {width: 70px;}
    .offer > .content > div:nth-child(2) .joe { width: 40px; height: 40px; order: 1; left: 10px; right: unset; }
    .offer > .content > div:last-child {display: none;}

    .number-features {margin: 30px auto 0 auto; width: 95%; }
    .number-features li {padding: 0 25px;}
    .number-features li div:first-child {width: 35px; height: 35px; flex-shrink: 0; margin-right: 12px; border-radius: 50%; background: #eee; color: #222; font-size: 16px; padding-top: 5px; text-align: center;}
    .number-features h5 {font-size: 16px; margin-top: 2px;}
    .number-features p {font-size: 12px; }
    .number-features-header {width: 85%; margin: 0 auto;}
    .screen-examples { width: 95%;  }

    .body-content > .footer {padding-top: 40px;}

    .app-features { }
    .app-features > div {width: 100%; padding: 10px; margin-bottom: 0;}
    .app-features > div > div { }
}

@media screen and (max-width: 600px) {
    #world-map {width: 500px; height: 220px; margin: 10px auto 20px auto;}
    .menu {display: none;}
    .brand-fit {position: relative; top: unset; padding: 20px 0; }
    .brand-fit > div, .brand-fit .portrait {width: 60px; height: 60px;}
    .brand-fit .portrait {border-width: 3px;}
    .brand-fit .caption {font-size: 9px;}
    .brand-fit > div { display: none; vertical-align: top; position: relative; top: unset !important; left: unset !important; bottom: unset !important; right: unset !important; margin: 0 8px;}
    .brand-fit > div:nth-child(1) {display: inline-block; }
    .brand-fit > div:nth-child(3) {display: inline-block;}
    .brand-fit > div:nth-child(7) {display: inline-block;}

    .associated-brands ul { flex-wrap: wrap; }
    .associated-brands li {padding: 5px 5px; flex-basis: 50%; }
    .associated-brands li img {width: 100px;}

    .page-banner .screens {}
    .page-banner .screens > div {}
    .page-banner h6 {font-size: 14px;}

    .light .page-banner-text {width: 100%;}
    .page-banner.light h1::after {right: 0; margin: 0 auto;}

    .page-part h2::after, .section h2::after {height: 1px; background-color: #555;}

    .page-part {margin: 50px 0;}
    .page-part.first {margin-top: 50px; padding-bottom: 5%;}
    .page-part.tall {margin-bottom: 50px;} 
    .page-part h1 {font-size: 32px;}
    .page-part h2 {font-size: 24px;}
    .page-part h3 {font-size: 12px;}
    .page-part.narrow > div, .page-part.highlight > div { flex-direction: column !important; padding: 0 20px;}
    .image-top {height: auto !important;}
    .page-part-text {width: 100%; padding: 20px 0;}
    .page-part-image {width: 100%;}
    .page-part-image > div {position: relative; top: unset !important; left: unset !important; bottom: unset !important; right: unset !important; width: 100% !important;}
    .image-bottom {display: none;}
    .page-part.narrow > div.section-reversed, .page-part.highlight > div.section-reversed {flex-direction: row;}
    .ig-feed > div { flex: 0 0 20.0%; }

    .page-banner-text {padding: 0 30px; position: relative; top: unset; transform: unset;}
    .page-banner.sales h1 {font-size: 24px;}
    .page-banner h5 {font-size: 14px;}
    .page-banner h6 {padding: 0 10%; line-height: 2.0;}
    .page-banner-text h1 {font-size: 32px; line-height: 1.6;}
    .page-banner-text h3 {font-size: 14px; line-height: 1.3; margin: 20px 0 40px 0;}

    .page-banner:not(.sales) .container {height: auto;}
    .page-banner .screens {position: relative; top: unset; height: auto; }
    
    /*.page-banner .screens {position: absolute; top: 90%; }
    .page-banner .screens > div {margin-bottom: 100%; background: none !important;}
    .page-banner .screens img {display: block; width: 100%;}*/

    .themes li {padding: 20px;}
    .themes li .name {font-size: 12px; margin-top: 5px;}
    .btn-action {font-size: 10px; padding: 12px 20px;}

    .page-part .app-features .feature {width: 100%;}
    .feature .graphic i {width: 50px; height: 50px; width: 50px; height: 50px; font-size: 20px; padding-top: 15px; margin-bottom: 10px;}
    .feature h5 {font-size: 14px; margin: 0 0;}
    .feature p {font-size: 14px; line-height: 20px; color:#888;}

    .number-features {margin: 25px auto 0 auto; width: 85%; display: block; }
    .number-features li {padding: 0 0; width: 100%;}
    .number-features li div:first-child {width: 35px; height: 35px; flex-shrink: 0; margin-right: 12px; border-radius: 50%; background: #eee; color: #222; font-size: 16px; padding-top: 5px; text-align: center;}
    .number-features h5 {font-size: 16px; margin-top: 7px;}
    .number-features p {font-size: 12px; }
    .number-features-header {width: 85%; margin: 0 auto;}
    .screen-examples { width: 100%; border-bottom: none;  }

    .body-content > .footer {padding-top: 20px;}

    
}

@media screen and (max-width: 480px) {
    #world-map {width: 300px; height: 130px; }
    .ig-feed {display: none;}
    .page-banner-text h1 {font-size: 28px; }
    .page-banner-text h3 {font-size: 12px;}
    .themes li {width: 100%; padding: 20px 0;}

    .page-banner h6 {font-size: 12px;}

    .page-part, .copy {text-align: center;}
    .page-part h2::after { left: 0 !important; right: 0; margin: 0 auto;}
    .page-part-text {padding: 20px !important;}

    .page-part {margin: 20px 0;}
    .page-part h3 {margin-top: 0;}
    .page-part .btn-action {margin-top: 0;}
    .page-part.first {margin-top: 30px; padding-top: 1px;}
    .page-part.tall {margin-bottom: 30px;}
    .page-banner h5 {font-size: 13px;}
    .page-banner.sales { display: none;}
    .sales .page-banner-text {top: 20%;}
}


@media screen and (max-width: 1050px) {
    .menu > li:first-child img { display: none; }
    .menu > li:first-child img.small { display: inline-block !important; }
}


.section.dark {background: #111; color: #fff;}
.section.dark h3 {color: #aaa;}



.dropdown .material-icons{-webkit-transition:.2s -webkit-transform;transition:.2s -webkit-transform;transition:.2s transform;transition:.2s transform,.2s -webkit-transform;font-size:18px}
.dropdown:hover .material-icons{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.dropdown{position:relative;display:inline-block}
.dropdown-listing{width:100%}

@media screen and (min-width:750px){.dropdown-listing{width:270px;margin-bottom:15px}}
@media screen and (min-width:750px){.sidebar .dropdown-listing{width:100%}}
@media screen and (min-width:970px){.sidebar .dropdown-listing{display:none}}

.dropdown-trigger{cursor:pointer;display:inline-block;padding:25px 0}
.home .dropdown-trigger {padding: 10px 0;}
.navbar[data-state~=sticky] .dropdown-trigger{padding:25px 0}
.dropdown-listing .dropdown-trigger{border-bottom:1px solid #bbced5;width:100%;padding:15px 0 5px}
.navbar .dropdown-text{letter-spacing:1px}
.dropdown-list{overflow:hidden;-webkit-transition:.2s all;transition:.2s all;background-color:#fff;box-shadow:0 2px 2px 0 rgba(11,37,71,.2),0 0 1px 0 rgba(10,37,70,.2); border-radius: 0 0 3px 3px; opacity:0;max-height:0;position:absolute;margin-top:0;z-index:10000;left:0}
.home .dropdown-list {border-radius: 3px; margin-top: -3px;}
.dropdown:hover .dropdown-list,.is-open>.dropdown-list{opacity:1;max-height:60em;}
.navbar .dropdown-list{text-transform:none}

.dropdown-list-title{font-size:16px;padding:20px}
.dropdown-option { text-align:left;color:#222 !important; font-size: 12px;}
.dropdown-option {display: flex; padding: 20px 20px 0 20px;}
.dropdown-option:last-child { padding-bottom: 15px; }
.dropdown-option > div:first-child { font-size: 18px; padding-right: 10px;   }
.dropdown-option > div:last-child { flex-grow: 1; }
.dropdown-option .title { font-weight: bold; font-size: 14px; transition: all 0.3s; }
.dropdown-option .description { margin-top: 2px; font-size: 10px; color: #888; transition: all 0.3s; }


.dropdown-option:hover .title { text-decoration: underline; }
.dropdown-option:hover .description { text-decoration: underline; }
.dropdown-listing .dropdown-option:hover{background-color:#1e88e5;color:#fff}
.with-icons .dropdown-option{display:-webkit-box;display:flex;padding:20px;white-space:normal}
.dropdown-two-columns .dropdown-column:first-child .dropdown-option{border-right:1px solid #d3dee2}
.dropdown-option-icon{margin-right:20px;align-self:flex-start;max-width:48px;margin-top:3px}
.dropdown-option-desc{margin-top:5px;font-size:12px;color:#7f919a;line-height:1.33} 
.dropdown-column{width:230px}

.dropdown-listing-icon{position:absolute;right:0;top:20px}

.dropdown-two-columns{  display:flex; flex-wrap: wrap; width: 460px; padding-bottom: 10px; }
.dropdown-two-columns .dropdown-option { flex-basis: 50%;  }


.dropdown-option i { /*align-self: flex-start; margin-right: 10px; margin-top: 5px; font-size: 8px; color:#ccc;*/}