/*
 * Shop-Script.RU 2018
 *
 * Requires linking webasystcom.css main CSS file
 *
 * @link https://www.shop-script.ru
 * @author Webasyst
 * @copyright 2018 Webasyst
 * @package Webasyst
 */

ul.mainmenu li a { color: #777; }

#wanav { background: #eee; }
#wanav ul.mainmenu li a { color: #777; }
#wanav ul.mainmenu li.selected a { color: #333; }

#ssnav { position: relative; z-index: 12; background: transparent; }
#ssnav h4 { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; font-family: 'StemText-Bold', sans-serif; align-self: center; font-size: 1.3em; }
#ssnav h4 a { color: #000; }
#ssnav ul.mainmenu { margin: 0; padding-left: 1rem; }
#ssnav ul.mainmenu { flex: 1; display: flex; list-style: none; }
#ssnav ul.mainmenu li { flex: 0 0 auto; padding-bottom: 0; align-self: center; }
#ssnav ul.mainmenu li .promo-badge-glyph { color: #97eb00; }
#ssnav ul.mainmenu #ss-mainmenu-dropdown li .promo-badge-glyph  { color: #24d861; margin-top: 1px; opacity: 1; }
#ssnav ul.mainmenu li .promo-badge-glyph.fa-thumbs-up { position: relative; top: -0.1rem; }
#ssnav .dropdown .dropdown-toggle { color: #aaa; }
#ssnav .dropdown .dropdown-toggle svg { opacity: 0.7; }
#ssnav .dropdown #ss-mainmenu-dropdown { visibility: hidden; position: absolute; top: 70%; background: #fff; opacity: 0; z-index: 1311; box-shadow: 0 45px 145px rgba(40, 40, 80, .2), 0 15px 10px rgba(0, 0, 0, .07); transition: 0.2s; transform: translateY(1rem); border-radius: 5px; }
#ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v { margin: 0.6rem 0; }
#ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v li { margin-left: 0; }
#ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v li a { padding: 0.6rem 1rem; color: #000; }
#ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v li a svg { order: 2; }
#ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v li a span { font-size: 15px; margin-right: 3rem; }
#ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v li a:hover { color: inherit !important; }
/* #ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v li a:hover span { color: #000 !important; } */
#ssnav .dropdown #ss-mainmenu-dropdown ul.menu-v li.divider { border-bottom: 1px solid rgba(0,0,0,0.1); margin: 0.4rem 0; }
#ssnav .dropdown:hover .dropdown-toggle { opacity: 1; color: #999; }
#ssnav .dropdown:not(.is-locked):hover #ss-mainmenu-dropdown { visibility: visible; opacity: 1; transform: translateY(0); }

@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
    #ssnav .dropdown #ss-mainmenu-dropdown {
        background-color: rgba(255, 255, 255, .85);
        -webkit-backdrop-filter: blur(2em);
        backdrop-filter: blur(2em);
    }
}

.sshomepage { text-align: center; position: absolute; top: 0; left: 0; right: 0; }
.sshomepage .flexbox { align-items: center; justify-content: center; min-height: 100vh; }
.sshomepage .flexbox .centered { flex: 1; }
.sshomepage h1 { color: white; margin-top: 1em; }
.sshomepage h3 { color: #aaa; margin-bottom: 2em; }
.sshomepage .button2 {}

/* Homepage
----------- */

ul.thumbs.homepage-bullets { margin: 1rem; }
ul.thumbs.homepage-bullets li { color: #888; }
ul.thumbs.homepage-bullets li:before { background: url('img/shopscript/homepage-bullets.png') no-repeat; background-size: 300%; display: block; width: 96px; height: 96px; margin-top: 10px; content: ""; }
ul.thumbs.homepage-bullets li h5 { color: #000; font-size: 1.3em; margin-top: 13px; }
/* ul.thumbs.homepage-bullets li p { max-width: 80%; } */
ul.thumbs.homepage-bullets li p a { display: inline; }
ul.thumbs.homepage-bullets li.owndomain { width: 260px; }
ul.thumbs.homepage-bullets li.owndomain:before { background-position: 0 0; }
ul.thumbs.homepage-bullets li.self:before { background-position: -96px 0; }
ul.thumbs.homepage-bullets li.everythingsincluded:before { background-position: -192px 0; }
ul.thumbs.homepage-bullets li.socialfriendly:before { background-position: 0  -96px; }
ul.thumbs.homepage-bullets li.mobilefriendly:before { background-position: -96px  -96px; }
ul.thumbs.homepage-bullets li.cash54:before { background-position: -192px -96px; }

.welcometoshopscript { position: relative; clear: both; margin-top: 250px; padding-top: 30px; }
#ss-vstr-type-toggle { padding-left: 0; position: absolute; bottom: 100%; margin: 0 0 -2px; left: 0; right: 0; text-align: center; white-space: nowrap; }
#ss-vstr-type-toggle li { font-size: 1.1em; list-style: none; display: inline-block; text-align: center; padding: 0; min-height: 136px; }
#ss-vstr-type-toggle li a { text-decoration: none; padding: 20px 30px; display: block; color: #aaa; }
#ss-vstr-type-toggle li a i.sshelperglyph { opacity: 0.4; }
#ss-vstr-type-toggle li a:hover { color: #a00 !important; }
#ss-vstr-type-toggle li.selected a { color: #000; background: #eee; background-position: 50% 100%; border-radius: 5px 5px 0 0; }
#ss-vstr-type-toggle li.selected a i.sshelperglyph { opacity: 1; }
#ss-vstr-type-toggle li.selected a:hover { color: #000 !important; }

@media screen and (max-width: 760px) {
    #ss-vstr-type-toggle { overflow-x: auto; overflow-y: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent); }
}

i.sshelperglyph { width: 96px; height: 96px; display: block; background: url("img/shopscript/ss-helper-glyphs.png") no-repeat; background-size: 768px 96px; margin: 0 auto; }
i.sshelperglyph.store { background-position: 0 0; }
i.sshelperglyph.toocool { background-position: -96px 0; }
i.sshelperglyph.corporate { background-position: -192px 0; }
i.sshelperglyph.megacorporate { background-position: -288px 0; }
i.sshelperglyph.bag { background-position: -384px 0; }

/* Styles for "Get Started"
****************************/

.get-started-wrapper {font-size:0;line-height:0;text-align:center;padding:0 0 2.5rem 0;}
.get-started-wrapper .hidden-text {display:none}
.get-started-wrapper input[type="text"],
.get-started-wrapper input[type="submit"],
.get-started-wrapper select {display:inline-block;vertical-align:top;margin:0;padding:.5rem 1rem;border:0;box-sizing:border-box;height:3.75rem;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font:normal 1.3rem Arial,sans-serif;text-decoration:none;color:#000}
.get-started-wrapper input[type="text"] {width:300px;margin-right:30px}
.get-started-wrapper input[type="submit"] {position:relative;white-space:nowrap;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.6);-webkit-box-shadow:0 3px 8px rgba(0,0,0,0.2);box-shadow:0 3px 8px rgba(0,0,0,0.2);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin-left:30px;background:#fbbd00 -webkit-linear-gradient(#ffed7a,#fbbd00);background:#fbbd00 linear-gradient(#ffed7a,#fbbd00)}
.get-started-wrapper select {max-width:350px;padding:.5rem 1rem .5rem 1rem;cursor:pointer;line-height:3.5rem}
.get-started-wrapper .select-wrapper {position:relative;display:inline-block;-webkit-box-shadow:0 3px 8px rgba(0,0,0,0.2);box-shadow:0 3px 8px rgba(0,0,0,0.2)}
.get-started-wrapper p.hint {margin-top:10px;color:rgba(0,0,0,0.3)}

/* Demo
------- */

.demo-doodles { background: #4ca546 url('img/shopscript/backgrounds/doodles-shopping.jpg?1510'); background-size: 500px 500px; overflow-x: hidden; margin-bottom: 20px; min-height: 500px; }
.demo-doodles .container { position: relative; }
.demo-launcher { position: absolute; left: 600px; right: 0; top: 140px; text-align: center; color: #fff; }
.demo-launcher a,
.demo-launcher p { color: #fff; }
.demo-launcher a:hover { color: #ffa; }
.demo-launcher .button2:hover { color: #000; }
.demo-launcher h2,
.demo-launcher h3 { font-size: 2.5em; font-family: 'StemText-Bold', sans-serif; }
.demo-launcher .view-demo-button { margin-top: 40px; margin-bottom: 40px; }
.demo-launcher p.hint { color: #bdb; }
.demo-launcher p.hint a { color: #cec; }
.demo-launcher p.hint a:hover { color: #ffa !important; }
.demo-store-mockup { margin-left: -100px; }

/* Testimonials
--------------- */

ul.testimonials { padding: 40px 0 0; margin-bottom: 0px; text-align: center; }
ul.testimonials li { list-style: none; width: 25%; display: inline-block; vertical-align: top; text-align: left; padding-left: 96px; padding-right: 20px; padding-bottom: 50px; position: relative; color: #888; min-width: 300px; }
ul.testimonials li:before { background: url('img/shopscript/ss-testimonials.png') no-repeat; position: absolute; width: 96px; height: 96px; margin-left: -96px; content: ""; }
ul.testimonials li p { margin-top: 10px; }
ul.testimonials li em.signature { font-size: 0.9em; }
ul.testimonials li#tm-endostore:before { background-position: 0 0; }
ul.testimonials li#tm-bonasilva:before { background-position: -96px 0; }
ul.testimonials li#tm-megapodarki:before { background-position: 0 -96px; }
ul.testimonials li#tm-geekkg:before { background-position: -96px -96px; }
ul.testimonials.full-width li { width: 65%; }

.testimonials .feature img { float: none; margin-top: 30px; margin-bottom: 10px; }

/* Platform
----------- */

ul.benefits { padding: 0; margin: 0 0 4rem; }
ul.benefits li { display: inline-block; width: 48%; text-align: left; color: #555; list-style: none; padding: 6px 0 13px 26px; box-sizing: border-box; background: transparent 4px 6px no-repeat; background-size: 14px; background-image: url("img/shopscript/black-checkmark.png"); vertical-align: top; }
.col ul.benefits { text-align: left; width: 100%; margin: 2rem auto; }
.col ul.benefits li { width: auto; display: block; }
.col.align-center ul.benefits { width: 65%; padding-left: 4rem; }

/* Features
----------- */

.s-store-badge { width: 58px; height: 58px; margin: 16px; background: #e0b8ff; position: relative; text-align: center; line-height: 58px; float: right; }
.s-store-badge:before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.s-store-badge:after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }
.s-store-badge > span { position: relative; z-index: 1; }
.s-store-badge.new { background: #ff4; color: #000; }

.s-tv-section { background: #fff url('img/wall.jpg') center top repeat-x; background-size: auto 800px; }

/* Social
--------- */

.vkontakte { background: #4d75a2 no-repeat; text-shadow: 0 1px 1px rgba(0,0,0,0.5); margin-bottom: 50px; }
.vkontakte h1 { color: #fff; text-shadow: 0 1px 2px #000; font-weight: normal; margin-bottom: 0.3em; padding-top: 50px; }
.vkontakte .tagline { color: #dde; font-size: 1.2em; line-height: 1.4em; margin-bottom: 1.2em; max-height: 180px; }
.vkontakte .tagline img { display: block; margin: 20px auto 70px; }
.vkontakte .get-started { margin-top: 40px; }
.vkontakte .get-started p { margin-top: 40px; }
.vkontakte p { color: #f3f3ff; }
.vkontakte p.hint,
.vkontakte p.hint a { color: #d3d3e3; }
.vkontakte p.hint strong { color: #eef; }
.vkontakte p.hint a:hover,
.vkontakte p.hint a:hover * { color: #ff5 !important; }
.vkontakte .video { margin-bottom: -85px; margin-top: 40px; }
.vkontakte-setup-howto p,
.vkontakte-setup-howto ol { color: #888; }
.vkontakte-setup-howto strong { color: #555; }

.facebook { background: #3b5998 no-repeat; text-shadow: 0 1px 1px rgba(0,0,0,0.5); margin-bottom: 150px; }
.facebook h1 { color: #fff; text-shadow: 0 1px 2px #000; font-weight: normal; margin-bottom: 0.3em; padding-top: 50px; }
.facebook .tagline { color: #dde; font-size: 1.2em; line-height: 1.4em; margin-bottom: 1.2em; max-height: 180px; }
.facebook .tagline img { display: block; margin: 20px auto 70px; }
.facebook .get-started { margin-top: 40px; }
.facebook .get-started p { margin-top: 40px; }
.facebook p { color: #f3f3ff; }
.facebook p.hint,
.facebook p.hint a { color: #d3d3e3; }
.facebook p.hint strong { color: #eef; }
.facebook p.hint a:hover,
.facebook p.hint a:hover * { color: #ff5 !important; }
.facebook-app-embedded { margin-left: 150px; }
.facebook .video { margin-bottom: -85px; margin-top: 40px; }
.facebook-setup-howto p,
.facebook-setup-howto ol { color: #888; }
.facebook-setup-howto strong { color: #555; }

/* Turnkey
---------- */

.ss-turnkey-page ul { margin-bottom: 0; margin-top: 1em; }
.ss-turnkey-page ul li:last-child { margin-bottom: 0; padding-bottom: 0; }
.ss-turnkey-page img { max-width: 100%; }
.ss-turnkey-page .turnkey { background: #4c6050 url('img/shopscript/backgrounds/ss-homepage-onthego-ru-hammock.jpg') 50% 0 no-repeat; background-size: cover; text-shadow: 0 1px 2px #000; min-height: 550px; }
.ss-turnkey-page .turnkey .feature { max-width: 640px; }
.ss-turnkey-page .turnkey .main-features { margin: 1.5rem 0; }
.ss-turnkey-page .turnkey h1 { padding-top: 50px; color: #fff; text-shadow: 0 2px 13px #000; font-size: 2rem; max-width: 620px; }
.ss-turnkey-page .turnkey .tagline { color: #eef; font-size: 1.5em; }
.ss-turnkey-page .turnkey p { color: #ccd; }
.ss-turnkey-page .turnkey p.small { font-size: 0.9em; }
.ss-turnkey-page .turnkey p strong { color: #fff; }
.ss-turnkey-page .turnkey p a { color: #ccd; }
.ss-turnkey-page .turnkey p a:hover { color: #7fd376; }
.ss-turnkey-page .turnkey #promo-cling { position: absolute; bottom: 0; left: 0; right: 0; padding-top: 15px; padding-bottom: 65px; }
.ss-turnkey-page .get-started p { margin-top: 3em; }
.ss-turnkey-page .turnkey .button2 { text-shadow: none !important; }
.ss-turnkey-page .turnkey ul { padding-left: 22px; }
.ss-turnkey-page .turnkey ul li { text-align: left; padding: 0; color: white; font-size: 1.1em; line-height: 1.25em; }
.ss-turnkey-page .turnkey ul li:not(:first-child) { margin-top: .75rem; }
.ss-turnkey-page .turnkey ul li strong { color: #a4d4ff; }
.ss-turnkey-page .button2 { background: #3998ec; color: #fff !important; }

.ss-turnkey-page .s-banner-description-section { font-size: 1.1rem; line-height: 1.5em; }
.ss-turnkey-page .s-banner-description-section .flexbox { margin-top: 1rem; }
.ss-turnkey-page .s-banner-description-section .flexbox .s-icon-wrapper { margin-right: 1rem; }
@media screen and (min-width: 761px) {
    .ss-turnkey-page .s-banner-description-section .flexbox .s-icon-wrapper { text-align: center; }
}
.ss-turnkey-page .s-banner-description-section .flexbox .s-icon-wrapper { text-align: left; }
.ss-turnkey-page .s-banner-description-section .flexbox .s-icon-wrapper .s-icon { display: inline-block; width: 60px; font-size: 2.5em; }

/* Platform3 page (ELIJAH 2016)
------------------------------- */

    .helloshopscript { background: #0d563d url('./img/helloshopscript7.jpg') 50%; background-size: cover; padding-top: 120px;text-align: center;}
    .helloshopscript h1 { color: #fff; margin-bottom: 20px; text-shadow: 0 3px 20px rgba(0,0,0,0.5); font-weight: normal; position: relative; }
    .helloshopscript .subheader { margin: 0 150px 40px; position: relative; }
    .helloshopscript h2,
    .helloshopscript h4 { display: inline; color: #aca; font-weight: normal; font-size: 1.3em; line-height: 1.2em; }
    .helloshopscript h2 strong { color: #fff; }
    .helloshopscript .ssdesk { margin-top: 40px; min-height: 200px; }
    .helloshopscript .ssdesk img { max-width: 100%; height: auto !important; }
    .helloshopscript p.hint { margin-top: 30px; color: #dfd; text-shadow: 0 1px 1px rgba(0,0,0,0.3); position: relative; }
    .helloshopscript p.hint a { color: #fff; }
    .helloshopscript p.hint a:hover { color: #ffa !important; }
    .helloshopscript p.hint strong { color: #efe; }
    .helloshopscript .action { display: block; margin-top: 30px; }
    .helloshopscript .action .button2 { margin-right: 20px; }
    .helloshopscript.no-menu { padding-top: 80px; }

    .cohortwaves { background: #4ca546 url('./img/shopscript/backgrounds/cohort-waves.jpg') no-repeat top center; background-size: cover; padding-top: 40px; overflow: hidden; }
    .cohortwaves .container { position: relative; }
    .cohortwaves .vofka { position: absolute; right: 0; top: -20px; }
    .cohortwaves .feature { margin-left: 40px; margin-bottom: 80px; }
    .cohortwaves .feature h3 { color: #fff; font-size: 2.4em; text-shadow: 0 1px 5px rgba(0,0,0,0.3); }
    .cohortwaves .feature p { color: #efb; }
    .cohortwaves .feature p a { color: #efb; }
    .cohortwaves .feature p a:hover { color: #ff7 !important; }

/* How to open an online store v2015
------------------------------------ */

.hwtcronst { background: #4ca546 url('img/shopscript/backgrounds/doodles-shopping.jpg?1510'); background-size: 500px 500px; margin-bottom: 20px; min-height: 500px; color: #fff; text-align: center; }
.hwtcronst h1 { margin-top: 20px; }
.hwtcronst h2 { color: #ded; font-size: 1.3em; margin-bottom: 20px; }
.hwtcronst .video { margin-bottom: -85px; margin-top: 40px; }
.badge { background: #ff7; font-size: 0.7em; border-radius: 3px; padding: 0 3px 1px; }

/* Customer stories
------------------- */

.story-cover.kpsoap-cover { background-image: url('img/shopscript/sshomepage-kpsoap-story-teaser-dark.jpg'); }
.story-cover.megapodarki-cover { background-image: url('img/shopscript/backgrounds/stories/mega-podarki.jpg'); }
.story-cover.svetiko-cover { background-image: url('img/shopscript/backgrounds/stories/svetiko.jpg'); }
.story-cover.svetiko-cover .quote { color: #222; text-shadow: 0 1px 2px #fff; }
.story-cover.svetiko-cover .author { color: #000; }
.story-cover.leokids-cover { background-image: url('img/shopscript/backgrounds/stories/leokids.jpg'); }
.story-cover.leokids-cover .quote { padding-top: 430px; text-align: center; color: #fff; text-shadow: 0 1px 3px #000; }
.story-cover.leokids-cover .author { text-align: center; }
.story-cover.photovideo5-cover { background-image: url('img/shopscript/backgrounds/stories/photovideo5.jpg'); min-height: 650px; }
.story-cover.photovideo5-cover.full-height { min-height: 790px; }
.story-cover.photovideo5-cover .author { width: 45%; }

/* High-density displays
------------------------ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	ul.testimonials li:before { background-image: url('img/shopscript/ss-testimonials@2x.png'); background-size: 300%; }
	.demo-doodles,
	.hwtcronst { background-image: url('img/shopscript/backgrounds/doodles-shopping@2x.jpg?1510'); background-size: 500px 500px; }
}

/* TABLETS
---------- */

@media screen and (min-width: 760px) and (max-width: 1024px) {
    .helloshopscript h1 { font-size: 2.4em; }
    .helloshopscript .subheader { margin-left: 30px; margin-right: 30px; }

    #ssnav ul.mainmenu { flex: 1; overflow-x: auto; overflow-y: hidden; -webkit-mask-image: linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 1rem),transparent); }
    #ssnav ul.mainmenu li.dropdown { display: none; }

}

/* MOBILE
--------- */

@media screen and (max-width: 760px) {

    #ssnav .flexbox { flex-direction: row; border-bottom: 1px solid rgba(0,0,0,0.1); }
    #ssnav .container { padding: 0 0rem 0 1rem; margin: 0.5rem 1rem 0 0; overflow-x: auto; overflow-y: hidden1; -webkit-mask-image: linear-gradient(90deg,transparent,#000 1rem,#000 calc(100% - 1rem),transparent); }
    #ssnav h4 { flex: 0 0 auto; order: 1; padding: 1rem 0; }
    #ssnav ul.mainmenu { flex: 1; order: 2; flex-direction: row; padding: 1.1rem 0 0.9rem; margin-left: 0.5rem;  }
    #ssnav ul.mainmenu li { width: auto; padding-left: 1rem; }
    #ssnav ul.mainmenu li a { padding: 0; }
    #ssnav ul.mainmenu li.dropdown { display: none; }
    #ssnav ul.mainmenu li:last-child { padding-right: 30px; }
    #ssnav ul.mainmenu::-webkit-scrollbar { display: none; }

    .sshomepage { background-attachment: scroll; }
    .sshomepage .flexbox .centered { margin-top: 140px; margin-bottom: 20px; }
    .sshomepage br { display: none; }
    .sshomepage h3 { padding: 1rem; font-size: 1.1rem; }
    .sshomepage .button2 { margin-bottom: 1rem; }

    ul.benefits li { width: auto; display: block; }
    .col.align-center ul.benefits { width: auto; padding-left: 0; }

    ul.testimonials li { padding-left: 0; padding-top: 80px; padding-right: 20px; padding-bottom: 50px; position: relative; color: #888; width: 70%; min-width: 0; }
    ul.testimonials li:before { margin-top: -80px; margin-left: -23px; }

    .leokids-cover.story-cover { min-height: 300px; }
    .megapodarki-static .quote { width: 100%; }
    .megapodarki-static .author { width: 90%; }

    .facebook-app-embedded { margin-left: 0; }

    .helloshopscript { padding-top: 50px; }
    .helloshopscript h1 { font-size: 2em; }
    .helloshopscript h2,
    .helloshopscript h4 { font-size: 1.3em; }
    .helloshopscript .subheader { margin-left: 0; margin-right: 0; }
    .helloshopscript .action .button2 { margin-bottom: 20px; }

    .ss-turnkey-page .turnkey h1,
    .ss-turnkey-page .turnkey p { padding-right: 0; }

}

/* WIDE DESKTOPS
================ */

@media screen and (min-width: 1441px) {

}