@import url('../quriobot/assets/css/components/fonts.css'); @import url('./cookie-consent.css'); /* QURIOBOT © 2017 */ html{ width:100%; height:100%; margin:0; padding:0; font-size: 12px; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* -webkit-overflow-scrolling:touch; */ } body{ width:100%; height:100%; margin:0px; padding:0px; font-family:"Open Sans",sans-serif; font-weight:400; font-size:12px; background-color:#fdf5d4; /* -webkit-overflow-scrolling:touch; */ } img { max-width: 100%; } *{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .clear{ width:100%; height:0px; line-height:0px; display:block; clear:both; opacity:0; } .hidden{ display:none !important; visibility:none; } a{ outline:none; text-decoration:none; cursor:pointer !important; } h1,h2,h3,h4,h5,h6,p{ padding:0; margin:0; } p{ color:inherit; } /* MENU STRUCTURE */ nav{ box-sizing:border-box; padding:20px 0; position:fixed; left:0px; top:0px; z-index:1010; display:inline-block; background-color:transparent; overflow:hidden; } nav ul, nav table{ list-style-type:none; display:inline-block; padding:0; margin:0; } nav ul.menu--main{ margin:0; } nav ul li{ list-style-type:none; display:inline-block; float:left; padding:0; margin:0; white-space:nowrap; } nav ul li.menu--mainContent{ border:1px solid transparent; border-radius:21px; box-sizing:border-box; margin:0; transition:all .3s; } nav ul li a.menu--mainItem, nav a.menu--subItem{ font-size:1.4em; line-height:36px; box-sizing:border-box; display:inline-block; padding:0 10px; color:#272727; transition:all .3s; } nav a.menu--subItem{ color:#bac0c4; } nav a.menu--subItem:hover{ color:#8c99a2; } nav a.menu--subItem.open{ color:#4ba2f9; } nav ul li a.menu--mainItem{ font-weight:600; padding:0 12px; float:left; } nav ul li a.menu--mainItem:hover{ color:#4ba2f9 !important; cursor:pointer; } nav ul li a.signin, nav ul li a.signup { color:#fff; font-size:1.4em; margin:0 10px; font-weight:600; padding:0 20px; float:left; font-weight:bold; height:auto; line-height:36px; background-image:-webkit-gradient(linear, left top, right top, from(#00C6FF), to(#4BA2F9)); background-image:linear-gradient(to right, #00C6FF, #4BA2F9); -webkit-box-shadow: 0 2px 6px 0 rgba(75, 162, 249, 0.4); box-shadow: 0 2px 6px 0 rgba(75, 162, 249, 0.4); -webkit-border-radius:100px; border-radius:100px; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } nav ul li a.signin:hover{ background-image:-webkit-gradient(linear, left top, right top, from(#00C6FF), to(#4BA2F9)); background-image:linear-gradient(to right, #00C6FF, #4BA2F9); -webkit-box-shadow: 0 4px 12px 0 rgba(75, 162, 249, 0.6); box-shadow: 0 4px 12px 0 rgba(75, 162, 249, 0.6); } nav ul li a.signup { background-image:-webkit-gradient(linear, left top, right top, from(#FFB75E), to(#ED8F03)); background-image:linear-gradient(to right, #FFB75E, #ED8F03); -webkit-box-shadow: 0 2px 6px 0 rgba(255, 183, 94, 0.4); box-shadow: 0 2px 6px 0 rgba(255, 183, 94, 0.4); } nav ul li a.signup:hover { background-image:-webkit-gradient(linear, left top, right top, from(#FFB75E), to(#ED8F03)); background-image:linear-gradient(to right, #FFB75E, #ED8F03); -webkit-box-shadow: 0 4px 12px 0 rgba(255, 183, 94, 0.6); box-shadow: 0 4px 12px 0 rgba(255, 183, 94, 0.6); } nav ul li.menu--mainContent.open{ border-color:#4ba2f9; } nav ul li.menu--mainContent.open a.menu--mainItem{ color:#4ba2f9; } nav ul li div.menu--subWrapper{ float:left; width:0px; opacity:0; overflow:hidden; transition:all .3s; } nav ul li.open div.menu--subWrapper{ opacity:1; } nav div#logo{ padding:0 20px; float:left; } nav div#logo .logo--icon{ float:left; } nav div#logo .logo--text{ line-height:36px; float:left; font-size:2em; font-weight:600; color:#000; } nav div#logo .logo--text:hover{ color:#4ba2f9; } .nav--background{ width:100%; height:76px; background-color:#fff; z-index:1000; left:0px; top:0px; position:fixed; } #menuIcon{ position:absolute; right:20px; top:50%; height:42px; width:42px; transform:translate(200%,-50%); -webkit-transform:translate(200%,-50%); display:block; border-radius:50%; box-sizing:border-box; border:1px solid #4ba2f9; transition:all .3s; } /* button */ .button{ color: #fff; font-size: 1.25em; height: auto; font-weight: 600; padding:8px 24px; display: inline-block; text-decoration: none !important; border: none; font-weight: bold; background-image: linear-gradient(to right, #00C6FF, #4BA2F9); box-shadow: 0 2px 6px 0 rgba(75, 162, 249, 0.4); border-radius: 100px; transition: all .3s ease-out; } .button:hover{ color: #fff; background-image:linear-gradient(to right, #00C6FF, #4BA2F9); box-shadow: 0 4px 12px 0 rgba(75, 162, 249, 0.6); } .button.is-success{ background-image: linear-gradient(to right, #2DDE98, #1CC7D0); box-shadow: 0 2px 6px 0 rgba(45, 222, 152, .4); } .button.is-success:hover{ background-image: linear-gradient(to right, #2DDE98, #1CC7D0); box-shadow: 0 4px 12px 0 rgba(45, 222, 152, .6); } /* check */ .check{ display: inline-block; width: 12px; height: 12px; position: relative; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .check::before, .check::after{ content: ''; border-radius: 3px; background-color: #4aa2f9; position: absolute; left: 0; bottom: 0; width: 2px; height: 2px; } .check::before{ width: 8px; } .check::after{ left: 6px; height: 12px; } /* header social links */ nav ul li.menu--social{ height: auto; position: fixed; left: 25px; bottom: 25px; z-index: 1001; } .menu--social__title{ margin-bottom: .2em; font-size: 1.4em; text-align: center; } @media only screen and (min-width: 769px){ .menu--social__title{ position: absolute; margin-bottom: 0; font-size: 1em; top: -10px; left: 50%; transform: translateX(-50%); color: #fff; background: #4aa2f9; border-radius: 100px; padding: 0 10px; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.1); box-shadow: 0 0 8px rgba(0,0,0,0.1); } } .header-social-links { list-style: none; margin: 0; padding: 15px; background-color: rgba(255,255,255,0.95); border-radius: 30px; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2); box-shadow: 0 0 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2); } .header-social-links li { display: inline-block; width: 30px; height: 25px; margin: 0 3px; background-repeat: no-repeat; background-position: center; background-size: auto 100%; } .header-social-links .icon-facebook { background-image: url('../img/website/icons/facebook_circle_color-256.png'); } .header-social-links .icon-twitter { background-image: url('../img/website/icons/twitter_circle_color-256.png'); } .header-social-links .icon-linkedin { background-image: url('../img/website/icons/linkedin_circle_color-256.png'); } .header-social-links .icon-producthunt { background-image: url('../img/website/icons/product-hunt.png'); } .header-social-links .icon-slack { background-image: url('../img/website/icons/slack.png'); } .header-social-links .icon-shopify { background-image: url('../img/website/icons/shopify.png'); } .header-social-links .icon-wp { background-image: url('../img/website/icons/wp.png'); } .header-social-links .icon-squareSpace { background-image: url('../img/website/icons/squareSpace.png'); } .header-social-links .icon-mailChimp { background-image: url('../img/website/icons/mailChimp.png'); } .header-social-links .icon-pabblyConnect { background-image: url('../img/website/icons/pabblyConnect.png'); } .header-social-links li:hover { position: relative; top: -2px; } .header-social-links li a { display: block; height: 0; width: 100%; padding-top: 25px; overflow: hidden; } /* CONTENT STRUCTURE */ main{ width:100%; height:100%; max-width:1080px; background-color:#fff; position:fixed; left:0px; top:0px; z-index:1005; box-shadow:0px 0px 4px rgba(0,0,0,.2); transform:translate(-110%,0px); -webkit-transform:translate(-110%,0px); transition:all .3s; transition-timing-function:ease-in; } .main--open main, .is-open{ transform:translate(0px,0px); -webkit-transform:translate(0px,0px); } .is-open > section{ display: block; } .nav--background{ position:absolute; border-bottom:1px solid #e8e8e8; } .close--main{ width:32px; height:32px; border-radius:50%; box-sizing:border-box; background-color:#4ba2f9; position:absolute; right:24px; top:50%; transform:translate(0px,-50%); -webkit-transform:translate(0px,-50%); transition:opacity .3s,transform .3s; transition-delay:0s,0s; opacity:0; } body.main--open .close--main{ opacity:1; transition-delay:.3s,0s; } .close--main:hover{ transform:translate(0px,-50%); -webkit-transform:translate(0px,-50%); } .close--main:active{ transition:opacity 0s, transform .1s; transform:translate(0px,-50%); -webkit-transform:translate(0px,-50%); transition-delay:0s,0s; } .close--main:before, .close--main:after{ height:16px; width:2px; border-radius:1px; background-color:#fff; content:""; transform:translate(-50%,-50%) rotate(45deg); -webkit-transform:translate(-50%,-50%) rotate(45deg); position:absolute; left:50%; top:50%; } .close--main:after{ transform:translate(-50%,-50%) rotate(135deg); -webkit-transform:translate(-50%,-50%) rotate(135deg); } section{ width:100%; height:100%; overflow:hidden; box-sizing:border-box; padding:76px 0 0 0; display:none; } section.active{ display:block; } .section--wrapper{ height:100%; overflow-y:auto; overflow-x:hidden; box-sizing:border-box; padding:0 40px 0 0; } .section--menu{ position:absolute; left:0px; top:75px; z-index:10; width:100%; height:60px; box-sizing:border-box; padding:0 75px 0 42px; background-color:#fff; } .section--menuContent{ height:60px; border-bottom:1px solid #d4d7d9; box-sizing:border-box; } .section--menuContent a{ color:#bac0c4; height:59px; line-height:62px; box-sizing:border-box; padding:0 14px; font-size:1.4em; cursor:pointer; } .section--menuContent a:hover{ color:#8c99a2; } .section--menuContent a:active, .section--menuContent a.current{ color:#4ba2f9; } .section--body{ width:100%; min-height:100%; box-sizing:border-box; padding:42px 96px 102px 56px; position:relative; } .hasMenu { padding-top: 136px; } .hasMenu .section--body{ padding:42px 46px 102px; } .section--body h1, .section--body .section__title{ color:#272727; font-weight:400; font-size:3.2em; line-height:100%; margin:0 0 20px 0; } .section--body h2{ font-size:2.4em; font-weight:400; width:80%; line-height:1.4em; margin-bottom:15px; color:#272727; } .section--body h2 span, .section--body h3 span{ color:#8c99a2; opacity:.6; } .section--body a{ text-decoration: underline; } .section--body ul{ padding:0; margin:0; list-style-type:none; } .section--body ul.addresses{ background-color:#f6f6f8; box-sizing:border-box; margin-top: 40px; padding:20px 0 10px 42px; border-radius:9px; } .section--body ul li{ width:50%; display:inline-block; padding:20px 62px 20px 0; float:left; box-sizing:border-box; } .list--icon { margin: 0 auto 10px; display: block; max-width: 60px; } .section--body .nests--three li{ width:33.33%; } .section--body ul li ul{ width:100%; padding:20px 0; text-align: left; } .section--body ul li ul.list-centered{ text-align: center; } .section--body ul li ul li, .section--body .nests--three li ul li{ width:100%; padding:0; font-size:1.4em; padding: 5px 0 5px 15px; position:relative; } .section--body ul li ul li:before{ height:6px; width:6px; border-radius:3px; background-color:#4ba2f9; position:absolute; left:0px; top:50%; transform:translate(0,-50%); -webkit-transform:translate(0,-50%); content:""; } .section--body ul li ul.list-centered li:before{ content: none; } .section--body ol{ padding:0 0 0 20px; margin:0; } .section--body ol.rom{ list-style-type:upper-roman; } .section--body ol.none{ list-style-type:disc; } .section--body ol > li{ font-size:1.6em; padding:5px 60px 5px 16px; } .section--body ol > li > ol{ padding-left:10px; } .section--body ol > li > ol > li{ font-size:1em; padding:3px 0px 3px 5px; } .section--body dl{ width:100%; box-sizing:border-box; padding:0 60px 30px 0; font-size:1.6em; } .section--body dt, .section--body dd{ display:inline-block; float:left; padding:16px 0; margin:0; border-top:1px solid #d4d7d9; } .section--body dt{ width:20%; color:#4ba2f9; clear:both; } .section--body dd{ width:80%; color:#8c99a2; } .section--body .tc{ font-size:.8em; } .section--body ul li h3, .section--body h3{ color:#4ba2f9; font-size:2rem; font-weight:400; } .section--body .tc h3{ margin-top:20px; } .section--body p{ font-size:1.4rem; line-height:150%; padding:10px 62px 10px 0px; } .section--body blockquote{ padding:0; margin:0; padding:10px 62px 30px 0px; } .section--body blockquote p{ background-color:#f6f6f8; box-sizing:border-box; padding:18px 20px; border-radius:6px; } .section--body p a:hover{ color:#333; text-decoration: underline; } .section--body ul li p{ font-size:1.2rem; line-height:150%; padding:5px 0; } .section--body .section--split{ width:100%; height:100px; display:block; position:relative; } .section--body .section--split:before{ width:100%; height:1px; background-color:#d4d7d9; position:absolute; left:0px; top:40%; content:""; opacity:.5; } .section--body .section--split.major:before{ height:2px; background-color:#4ba2f9; } .section--body .section--end{ height:320px; width:100%; display:block; } .section--body .section--footer{ width:100%; height:60px; border-top:1px solid #d4d7d9; padding:20px 0; box-sizing:border-box; position:relative; } .section--body .section--footer a, .section--body .section--footer span{ line-height:20px; font-size:1.4em; font-weight:400; display:inline-block; padding:0 5px; margin:0 10px 0 0; color:#8c99a2; cursor:pointer; } .section--body .section--footer span{ float:right; margin-right:0px; opacity:.6; } .section--body .section--footer a:hover{ color:#4ba2f9; } /* .section-content_centered */ .section-content_centered { text-align: center; } .section-content_centered h2{ margin: 0 auto 15px; } .section-content_centered p{ padding: 10px 0; width: 80%; margin: 0 auto; } @media screen and (max-width:768px){ .section-content_centered p{ width: 100%; } .section-content_centered h2{ width: 100%; } } /* .list */ .list{ color: #272727; } .list_with-checks li{ position: relative; padding-left: 20px; } .list_with-checks .check{ position: absolute; left: 0; top: 50%; -webkit-transform: translate3d(0,-50%,0) rotate(45deg); -ms-transform: translate3d(0,-50%,0) rotate(45deg); transform: translate3d(0,-50%,0) rotate(45deg); } /* section-product */ .section-product__horizontal { position: relative; display: -webkit-flex; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; margin-bottom: 60px; } .section-product__horizontal::before{ content: ''; position: absolute; top: 20px; left: 0; border-radius: 8px; width: 100%; height: calc(100% - 40px); background: #f8f8f8; } .section-product__horizontal h3 { color: #272727; min-width: 260px; position: relative; margin: 35px 15px; } .section-product__horizontal .section-product__img, .section-product__landing .section-product__img{ width: 60%; min-width: 260px; display: -webkit-flex; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; position: relative; } .section-product__icon { position: relative; padding: 20px; flex:none; display: -webkit-flex; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; z-index: 1; } .section-product__icon img{ width: 60px; } .section-product__img img:not(.no-shadow) { display: block; width: 100%; border-radius: 8px; -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.14), 0 6px 20px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.14), 0 6px 20px 0 rgba(0, 0, 0, 0.12); } .section-product__vertical { margin-bottom: 60px; } .section-product__vertical h3{ color: #272727; text-align: center; margin-bottom: 20px; } .section-product__landing .section-product__img{ margin: 0 auto; max-width: 600px; } /* .back-to-top */ .back-to-top{ width:32px; height:56px; border-radius:16px; background-color:#4ba2f9; position:absolute; left:0px; bottom:100%; margin-bottom:20px; transition:all .3s; cursor:pointer; } .back-to-top:hover{ height:66px; } .back-to-top span{ height:42px; width:32px; position:absolute; top:0px; left:50%; transform:translate(-50%,0); -webkit-transform:translate(-50%,0); opacity:1; } .back-to-top span:before{ height:20px; width:4px; border-radius:2px; background-color:#fff; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); } .back-to-top span:after{ width:14px; height:14px; border-radius:4px; border-top:4px solid #fff; border-right:4px solid #fff; transform:translate(-50%,10px) rotate(-45deg); -webkit-transform:translate(-50%,10px) rotate(-45deg); position:absolute; top:0px; left:50%; content:""; box-sizing:border-box; } /* LANDING CONTENT */ #content{ display:block; position:fixed; height:100%; width:100%; left:0px; top:0px; z-index:1; background-color:transparent; box-sizing:border-box; padding:82px 0 0 0; font-size: 1rem; transform:translate(0px,0px); -webkit-transform:translate(0px,0px); transition:all .3s; transition-timing-function:ease-in; } #message{ display:block; width:100%; max-width:600px; margin:80px 0 0 90px; } #message h1{ font-size:3.5em; font-weight:600; margin-bottom:0px; } #message h2{ font-size:2.5em; font-weight:400; margin-bottom:20px; margin-top:-10px; } #message p{ font-size:1.5em; font-weight:400; margin-bottom:50px; } #message a { text-decoration: underline; color: #4ba2f9; } .outlined--button, .use-bot{ display:inline-block; border-radius:100px; box-sizing:border-box; line-height:20px; padding:14px 28px; font-size:1.5em; color:#4ba2f9; margin-right:10px; } .use-bot.align--right{ float:right; margin-right:0px; margin-left:10px; } #message .use-bot, .use-bot{ text-decoration: none; background-color:#4ba2f9; color:#fff; padding-right: 54px; position:relative; } #message .use-bot span, .use-bot span{ height:38px; width:38px; box-shadow:0px 2px 4px rgba(0,0,0,.2); border-radius:21px; float:right; display:block; margin:0 0 0 0; box-sizing:border-box; background-color: #4ba2f9; background-image: url('../img/website/bot_avatar.png'); background-position: center center; background-repeat: no-repeat; background-size:cover; position:absolute; left:100%; top:50%; transform:translate(-43px,-50%); -webkit-transform:translate(-43px,-50%); overflow:hidden; transition:all .3s; transition-timing-function:ease-in; } .use-bot span:after{ background-color:rgba(255,255,255,.2); width:100%; height:100%; content:""; display:block; position:absolute; left:0px; top:0px; } section .use-bot, section .outlined--button{ transform-origin:0px 50%; -webkit-transform-origin:0px 50%; } .section--body .clients-logos { overflow: hidden; /* clearfix */ margin: 30px 0 50px; } .section--body .clients-logos li { display: block; float: left; width: 33.33%; padding: 0; text-align: center; } .section--body .clients-logos img { width: 100%; max-width: 180px; } .terms-wrapper { position: fixed; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; width: 100%; bottom: 0; left: 0; } .terms { position: relative; padding: 5px 14px; background: #fff; border-radius: 20px; display: inline-block; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } .terms-link { color: #4aa2f9; opacity: .8; font-size: .9rem; } .terms-link:hover{ opacity: 1; text-decoration: underline; } .terms-link + .terms-link { margin-left: 1rem; } .terms .tooltip { width: 100%; max-width: 600px; } #termsConditions .tooltip::after{ left: 25%; } #privacy .tooltip::after{ left: 75%; } /* Tooltip */ .tooltip { position: absolute; bottom: 100%; left: 0; max-width: 100%; background: #4aa2f9; color: #fff; font-size: .8em; border-radius: 9px; padding: .5em; visibility: hidden; opacity: 0; box-sizing: border-box; transition: all .2s ease; -webkit-transition: all .2s ease; pointer-events: none; } .tooltip::after{ content: ''; position: absolute; bottom: -8px; left: 50%; -webkit-transform: translate3d(-50%, 0, 0); -ms-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #4aa2f9 transparent transparent transparent; } .tooltip-wrapper:hover .tooltip { visibility: visible; opacity: 1; bottom: 120%; } /* WALLPAPER */ body.main--open #wallpaper{ transform:translate(300px,0); -webkit-transform:translate(300px,0); } #wallpaper{ height:100%; width:100%; position:fixed; left:0px; top:0px; z-index:0; background-color:#fdf5d4; background-image:url('../img/website/bots.png'); background-repeat:no-repeat; background-size:75% auto; background-position:center bottom; transform:translate(0px,0px); -webkit-transform:translate(0px,0px); transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; opacity:1; } #wallpaper.loading{ opacity: 0; transform:translate(0px,0px); -webkit-transform:translate(0px,0px); } #content-preloader{ opacity: 0; visibility: hidden; position: fixed; z-index: 2010; width: 100%; height: 100%; top: 0; left: 0; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; background: #fff; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; } #content-preloader.loading{ opacity: 1; visibility: visible; } #content-preloader.loading .bot--loading{ display: block; } #content-preloader .bot--loading{ display: none; } .bot--loading{ display:block; height:20px; width:30px; opacity:1; visibility: visible; transition:all .3s; left:15px; top:13px; } .loading--dots{ width:100%; height:100%; position:relative; } @keyframes dancing { 0% {height:6px;} 50%{height:16px;} 100%{height:6px;} } .dot{ width:10px; height:100%; position:absolute; } .dot--a{ left:0px; top:0px; } .dot--b{ left:10px; top:0px; } .dot--c{ left:20px; top:0px; } .dot--a:before, .dot--b:before, .dot--c:before{ height:6px; width:6px; background-color:#4ba2f9; content:""; position:absolute; top:50%; left:50%; border-radius:3px; transform:translate3d(-50%,-50%,0); -webkit-transform:translate3d(-50%,-50%,0); animation-name:dancing; animation-duration:.6s; animation-iteration-count:infinite; animation-timing-function:linear; } .dot--a:before{ animation-delay:0s; } .dot--b:before{ animation-delay:.2s; } .dot--c:before{ animation-delay:.4s; } .bot--text{ opacity:0; height:20px; width:30px; transition:opacity .3s; box-sizing:border-box; padding:0 3px; overflow: hidden; } /**********************************************/ /* .intro */ /**********************************************/ .intro { display:block; width:100%; max-width:600px; margin:3vh 0 0 120px; } .intro__title{ font-size: 4em; } .intro__subtitle{ font-size: 2.4em; text-decoration: underline; color: #4a4a4a; } .intro__subtitle:hover{ color: #4aa2f9; } .intro__video { position: relative; margin-top: 30px; border-radius: 9px; overflow: hidden; display: inline-block; -webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.12); box-shadow: 0 8px 16px rgba(0,0,0,0.12); } .intro__video iframe { display: block; width: 587px; height: 330px; } @media only screen and (max-width: 1440px) { .intro__video iframe { width: 480px; height: 270px; } } @media only screen and (max-width: 1024px) { .intro{ margin: 0; padding: 0 5vw; } .intro__video{ display: block; width: 100%; padding-top: 56.25%; } .intro__video iframe { position: absolute; top: 0; width: 100%; height: 100%; } } .intro__text{ font-size: 2em; margin-top: 3em; } .intro__hash{ font-size: 1.5rem; display: block; margin: 10px 0 20px; font-weight: bold; } .intro__hash a { text-decoration: underline; } .intro .button{ font-size: 1.25em; padding: 12px 24px; height: auto; line-height: 20px; } .intro .button.use-bot{ padding-right: 56px; } .intro .button span{ height: 40px; width: 40px; left: auto; right: 2px; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } .read-more{ margin-bottom:10px; margin-right: 1em; font-size:2em; height: auto; } /**********************************************/ /* other-channels */ /**********************************************/ .other-channels__logos{ margin-top: 2rem; } .other-channels__logos img{ width: 70%; max-width: 96px; } /**********************************************/ /* Pricing */ /**********************************************/ .pricing{ margin-bottom: 20px; } .pricing-card{ padding: 20px; border-radius: 18px; border: 1px solid #DAEBFE; box-sizing: border-box; height: 100%; position: relative; -webkit-box-shadow: 0 2px 5px 0 rgba(75, 162, 249, 0.24), 0 1px 10px 0 rgba(75, 162, 249, 0.06); box-shadow: 0 2px 5px 0 rgba(75, 162, 249, 0.24), 0 1px 10px 0 rgba(75, 162, 249, 0.06); display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; } @media only screen and (max-width: 768px){ .pricing__column{ width: 100%; margin-bottom: 40px; } } .pricing-card > div{ width: 100%; } .pricing-card__header{ flex: none; } .pricing-card__content{ padding-bottom: 20px; display: -webkit-flex; display: -ms-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; align-items: center; justify-content: center; } .pricing-card__footer{ text-align: center; } .pricing-card__icon{ margin: 0 auto 10px; } .pricing-card__title{ padding-bottom: 10px; margin-bottom: 10px; text-align: center; position: relative; } .pricing-card__title::after{ content: ''; position: absolute; background: #4ba2f9; border-radius: 100px; width: 20px; height: 4px; bottom: 0; left: calc(50% - 10px); } .pricing-card__description{ text-align: center; } .pricing-card__price{ position: relative; font-size: 2.5rem; display: inline-block; color: #4aa2f9; margin-bottom: 35px; } .pricing-card__price_with_old{ margin-top: 35px; margin-bottom: 0; position: relative } .pricing-card__price_type_old{ font-size: .74em; color: rgba(254, 102, 119, .7); position: absolute; top: -30px; left: 50%; font-weight: 400; transform: translate3d(-50%,0,0); } .pricing-card__price_type_old::after{ content: ''; display: block; width: 100%; height: 2px; border-radius: 2px; background-color: #fe6677; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0) rotate(-20deg); } .pricing-card__price-title{ font-size: 1.2em; } .pricing-card__price-prefix, .pricing-card__price-suffix{ font-size: .4em; position: absolute; white-space: nowrap; opacity: .8; } .pricing-card__price-prefix{ left: 0; -webkit-transform: translate3d(-100%,0,0); -ms-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); } .pricing-card__price-suffix{ right: 0; bottom: 0; -webkit-transform: translate3d(100%,0,0); -ms-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); } .pricing-card .pricing-card__chat-packages{ display: -webkit-flex; display: -ms-flex; display: flex; flex-flow: row wrap; justify-content: center; margin: 20px 0; font-size: 1rem; } .pricing-card .pricing-card__chat-packages .chat-package{ padding: 0 10px 20px; text-align: center; position: relative; width: auto; } .pricing-card .pricing-card__chat-packages .chat-package .chat-package__amount{ padding: 0; font-weight: bold; color: #4aa2f9; font-size: 1.5em; } .pricing-card .pricing-card__chat-packages .chat-package .chat-package__subtitle{ padding: 0; font-size: .8em; } .chat-package__additional-price{ text-align: center; width: 100%; position: absolute; bottom: 0; left: 0; font-size: 1.1em; font-weight: bold; } .section--body .pricing-card__features{ font-size: 1rem; margin-bottom: 1.5rem; } .pricing-card .pricing-card__features li{ width: 100%; font-weight: normal; padding: .2em .4em .2em 1.5em; cursor: pointer; } .pricing-card .pricing-card__chat-packages li{ padding: .2em .4em; float: none; } .pricing-card .pricing-card__chat-packages li::before, .pricing-card .pricing-card__features li::before{ content: none; } .pricing-card__custom-request{ text-align: center; margin: 10px 0 15px; } .pricing-card__remarks{ color: #4aa2f9; font-size: .8em; display: -webkit-flex; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; text-align: center; } @media only screen and (min-width: 1024px){ .pricing-card__remarks{ height: 50px; } } /**********************************************/ /* pricing-table */ /**********************************************/ .pricing-table{ width: 100%; font-size: 1rem; margin: 20px 0 40px; } .pricing-table__row:nth-child(odd){ background: #f8f8f8; } .pricing-table__row:hover{ background: #f0f0f0; } .pricing-table__col{ border: none; font-size: 1rem; padding: .5em; text-align: center; vertical-align: middle; position: relative; } .pricing-table__col img{ width: 16px; height: 16px; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .pricing-table__plan{ font-weight: 500; text-align: center; font-size: 1em; color: #4aa2f9; width: 15%; } @media only screen and (max-width: 768px){ .pricing-table__plan{ font-size: .9em; } } .pricing-table__feature{ text-align: left; } .pricing-table__feature .collapsible__title{ font-size: 1.25em; } /**********************************************/ /* Product page */ /**********************************************/ /* .browser */ .browser{ width: 80%; max-width: 600px; margin: 2rem auto 3rem; overflow: hidden; border-radius: 5px; -webkit-box-shadow: 0 25px 50px -20px rgb(183, 183, 193); box-shadow: 0 25px 50px -20px rgb(183, 183, 193); } @media screen and (max-width:768px){ .browser{ width: 100%; } } .browser img{ display: block; } /* .phone */ .phone{ width: 80%; max-width: 370px; overflow: hidden; position: relative; } @media screen and (max-width:768px){ .phone{ width: 100%; } } .phone img{ display: block; } .phone__body{ -webkit-box-shadow: 0 25px 50px -20px rgb(183, 183, 193); box-shadow: 0 25px 50px -20px rgb(183, 183, 193); } .phone__content{ position: absolute; top: 9%; left: 4%; width: 92%; border-radius: 6px; } /* .team */ .team{ margin-top: 2rem; } .team__member{ font-size: 1.25rem; } .team__member-photo{ border-radius: 200px; max-width: 80%; width: 120px; -webkit-box-shadow: 0 25px 50px -20px rgb(183, 183, 193); box-shadow: 0 25px 50px -20px rgb(183, 183, 193); } .team__member-name{ color: #4aa2f9; font-size: 1.2em; } .team__member-company{ font-style: italic; font-weight: bold; font-size: .9em; } .team .team__member-description{ font-size: .9em; } /* collapsible */ .collapsible__title{ cursor: pointer; padding: .2em 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .collapsible__title:hover{ color: #4aa2f9; } .collapsible__icon{ display: inline-block; width: 12px; height: 12px; position: relative; } .collapsible__icon::before, .collapsible__icon::after{ content: ''; position: absolute; top: 50%; width: 8px; height: 2px; background: #4aa2f9; border-radius: 2px; display: block; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .collapsible__icon::before{ left: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .collapsible__icon::after{ right: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .collapsible__title_is-expanded{ color: #4aa2f9; } .collapsible__title_is-expanded .collapsible__icon::before{ -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .collapsible__title_is-expanded .collapsible__icon::after{ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* .templates */ .template { background: white; position: relative; background-size: cover; min-height: 200px; height: 100%; border-radius: 5px; cursor: pointer; transition: all .3s ease; box-shadow: 0 2px 3px 0 rgba(75,162,249,.12), 0 1px 8px 0 rgba(75,162,249,.06); } .template:not(.template_active):hover { box-shadow: 0 6px 12px 0 rgba(75,162,249,.16), 0 6px 16px 0 rgba(75,162,249,.08); } .template_active{ box-shadow: 0 25px 55px 0 rgba(75,162,249,.24), 0 16px 28px 0 rgba(75,162,249,.18); } .template::before { content: ''; position: absolute; top: 0; left: 0; border-radius: 5px; background: rgba(255,255,255,.2); width: 100%; height: 100%; display: block; transition: all .3s ease; } .template:hover::before, .template_active::before { background: rgba(255,255,255,0); } .template__check { position: absolute; right: 10px; top: 10px; background: white; border-radius: 100px; z-index: 2; width: 36px; height: 36px; opacity: .8; } .template_active .template__check { opacity: 1; box-shadow: 0 6px 12px 0 rgba(75,162,249,.16), 0 6px 16px 0 rgba(75,162,249,.08); } .template__check::before, .template__check::after { content: ''; height: 4px; background: #4ba2f9; border-radius: 2px; position: absolute; opacity: 0; transition: all .3s ease; } .template_active .template__check::before, .template_active .template__check::after { opacity: 1; } .template__check::before { transform: rotate(45deg); width: 12px; top: 20px; left: 8px; } .template__check::after { transform: rotate(-45deg); width: 18px; top: 18px; right: 5px; } .template__info { position: absolute; bottom: 0; left: 0; padding: 15px; font-size: 1rem; transition: all .3s ease; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .template:hover .template__info, .template_active .template__info { background: rgba(255,255,255,.9) } .template__title { font-size: 1.6em; color: black; } .template .template__description { font-size: 1em; margin-bottom: 1em; padding: 0; max-height: 0; transition: all .3s ease; opacity: 0; visibility: hidden; } .template:hover .template__description, .template_active .template__description { max-height: 100px; opacity: 1; visibility: visible; } .template__buttons { transition: all .3s ease; position: relative; } .template__signup { margin-left: 10px; opacity: 0; visibility: hidden; } .template_active .template__signup { opacity: 1; visibility: visible; } .template__url { padding: 8px; } .template__url::after { content: ''; display: block; background-image: url('../img/preview.png'); background-size: cover; width: 20px; height: 20px; } .template__avatar { width: 36px; height: 36px; background-image: linear-gradient(to right, #00C6FF, #4BA2F9); box-shadow: 0 2px 6px 0 rgba(75, 162, 249, 0.4); border-radius: 100px; position: absolute; right: 10px; top: 10px; z-index: 1; overflow: hidden; transition: all 1s ease; } .template__avatar::after { content: ''; background-image: url('../img/website/bot_avatar.png'); background-size: cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .template_active .template__avatar { opacity: 0; } /* .sticker */ .sticker{ text-transform: uppercase; font-weight: 600; text-align: center; color: #fff; padding: .5rem 1rem 1rem; transform: skew(-15deg) rotate(-15deg); background-color: #4BA2F9; border-radius: 5px 5px 5px 0; font-size: 1rem; box-shadow: 3px 3px 5px 0px rgba(0,0,0, .2); position: absolute; top: 0; left: -5px; width: auto !important; } .sticker::after{ content: ''; display: block; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent #3E80C0 transparent transparent; position: absolute; top: 100%; left: 0; right: auto; bottom: auto; width: 0; height: 0; } .sticker__text{ text-shadow: -1px 1px 0 #000; padding: 0 !important; line-height: 1.5rem !important; } .sticker__badge{ font-size: .9em; line-height: 1.6em; white-space: nowrap; background: #FC6767; padding: 0 5px; border-radius: 3px; transform: translate3d(-50%, 0, 0); position: absolute; top: auto; left: 50%; right: auto; bottom: -0.8em; } /* Media start */ @media screen and (max-width:1445px){ #message{ transition:all .3s; } } @media screen and (max-height:970px){ #message{ transition:all .3s; } } /* responsiveness */ @media screen and (max-width:769px){ #menuIcon{ transform:translate(0px,-50%); -webkit-transform:translate(0px,-50%); } #menuIcon span, #menuIcon:before, #menuIcon:after{ content:""; position:absolute; left:50%; top:50%; height:2px; width:50%; display:block; transition:all .3s; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:#4ba2f9; border-radius:1px; } #menuIcon:before{ transform:translate(-50%,-6px); -webkit-transform:translate(-50%,-6px); } #menuIcon:after{ transform:translate(-50%,4px); -webkit-transform:translate(-50%,4px); } body.showMenu #menuIcon span{ opacity:0; } body.showMenu #menuIcon:before{ transform:translate(-50%,-50%) rotate(-45deg); -webkit-transform:translate(-50%,-50%) rotate(-45deg); } body.showMenu #menuIcon:after{ transform:translate(-50%,-50%) rotate(45deg); -webkit-transform:translate(-50%,-50%) rotate(45deg); } body.main--open #menuIcon{ transform:translate(46px,-50%); -webkit-transform:translate(46px,-50%); } nav{ width:100%; overflow:visible; transition:all .3s; } body.main--open nav{ width:calc(100% - 82px); } body.showMenu nav ul.menu--main{ transform:translate(0px,0px); -webkit-transform:translate(0px,0px); transition-delay:0s, 0s; opacity:1; } nav ul.menu--main{ width:100vw; position:absolute; left:0px; top:82px; background-color:#fff; padding:0 20px; box-sizing:border-box; box-shadow:0 0 20px rgba(0,0,0,0.1), 0 5px 10px rgba(0,0,0,0.2); transform:translate(-150%,0px); -webkit-transform:translate(-150%,0px); opacity:0; transition:opacity .3s,transform 0s; -webkit-transition:opacity .3s,-webkit-transform 0s; transition-delay:0s, .3s; transition-timing-function:ease-out; } .menu--signin, .menu--signup{ padding: 1em; width: 50%; } nav ul .menu--signin .signin, nav ul .menu--signup .signup{ width: 100%; text-align: center; margin: 0; } nav ul.menu--main:before{ position:absolute; content:""; height:12px; width:12px; top:0px; right:0px; transform:translate(-34px,-7px) rotate(45deg); -webkit-transform:translate(-34px,-7px) rotate(45deg); background-color:#fff; border-radius:3px 0 0 0; } nav ul li.menu--mainContent{ width:100%; height:60px; border:none; border-radius:0px; box-sizing:border-box; margin:0; padding:10px 0; transition:all .3s; border-bottom:1px solid #e8e8e8; } nav ul li.menu--mainContent:last-child{ border-bottom:none; } nav ul li a.menu--mainItem{ font-size:1.4em; height:40px; line-height:40px; box-sizing:border-box; display:inline-block; width: 100%; padding:0 5px; transition:all .3s; cursor:pointer; } nav ul li a.menu--mainItem:hover{ color:#4ba2f9 !important; cursor:pointer; } nav ul li.menu--social{ margin-top: 1.5em; margin-bottom: 2em; position: static; padding: 5px 0; box-shadow: none; border-radius: 0; height: auto; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } nav ul li.menu--social .header-social-links li{ margin: 0 15px 0 0; } nav ul li.menu--social .menu--mainItem{ display: none; } /* LANDING CONTENT */ #content{ display:block; position:fixed; height:100%; width:100%; left:0px; top:0px; z-index:1; background-color:transparent; box-sizing:border-box; padding:82px 0 0 0; transform:translate(0px,0px); -webkit-transform:translate(0px,0px); transition:all .3s; transition-timing-function:ease-in; } #content #message{ display:block; width:100%; max-width:600px; margin:0; box-sizing:border-box; padding:0 10px; } #content #message h1{ font-size:4em; font-weight:600; margin-bottom:0px; } #content #message h2{ font-size:3em; font-weight:400; margin-bottom:20px; margin-top:-10px; } #content #message p{ font-size:1.5em; font-weight:400; margin-bottom:50px; } #wallpaper{ background-size:110% auto; } main .close--main{ width:32px; height:32px; border-radius:50%; box-sizing:border-box; background-color:#4ba2f9; position:absolute; right:24px; top:50%; transform:translate(0px,-50%); transition:opacity .3s,transform .3s; -webkit-transform:translate(0px,-50%); -webkit-transition:opacity .3s,-webkit-transform .3s; transition-delay:0s,0s; opacity:0; } main section .section--body{ padding:20px 26px; } main section.hasMenu .section--body{ padding:76px 26px 26px 26px; } .section--body h1{ font-size:2.6em; } .section--body h2{ width:100%; font-size:2em; } .section--body h3{ font-size:1.8rem; } .section--body ul.addresses{ padding:20px 0 10px 42px; } .section--body ul li{ width:100%; padding:20px 0px 20px 0; float:none; } .section--body .nests--three li{ width:100%; } .section--body ul li ul{ width:100%; padding:20px 0; } .section--body dl{ padding:0 0px 30px 0; } .section--body dt{ width:25%; } .section--body dd{ width:75%; } main section .section--wrapper:before, main section .section--wrapper:after{ content:""; position:absolute; left:0px; top:83px; background:linear-gradient(to right, rgba(255,255,255,1),rgba(255,255,255,0)); z-index:1000; width:20px; height:53px; } main section .section--wrapper:after{ right:0px; left:auto; background:linear-gradient(to left, rgba(255,255,255,1),rgba(255,255,255,0)); } main section .section--menu{ position:absolute; left:0px; top:80px; z-index:10; width:100%; height:56px; box-sizing:border-box; padding:0 0 0 0; background-color:#fff; white-space:nowrap; overflow:hidden; } main section .section--menu:after{ background-color:#d4d7d9; position:absolute; top:55px; left:26px; width:calc(100% - 52px); height:1px; content:""; } main section .section--menuContent{ height:76px; box-sizing:border-box; width:100%; padding:0 26px; overflow-y:hidden; overflow-x:scroll; position:relative; } main section .section--menuContent a{ color:#bac0c4; height:55px; line-height:55px; box-sizing:border-box; padding:0 26px 0 0; font-size:1.4em; cursor:pointer; } main section .section--menuContent a:hover{ color:#8c99a2; } main section .section--menuContent a:active, main section .section--menuContent a.current{ color:#4ba2f9; } main .close--main{ right:20px; } .section--body p{ font-size:1.6em; line-height:150%; color:#8c99a2; padding:10px 0px 10px 0px; } .section--body ol li{ font-size:1.6em; padding:5px 0px 5px 16px; } .section--body .section--footer{ text-align: center; height: auto; } .section--body .section--footer a{ margin-bottom: 6px; } .section--body .section--footer span{ width:100%; text-align:bottom; clear:both; padding-left:3px; box-sizing:border-box; margin-top:-10px; margin-bottom:6px; } .section--body .section--footer .back-to-top span{ margin-top:0px; margin-bottom:0px; } } @media screen and (max-width:425px){ nav{ height:72px; padding-top:14px; padding-bottom:0px; } .nav--background{ height:72px; } nav ul.menu--main{ top:72px; } main section{ padding-top:72px; } main section .section--menu{ top:72px; } #content{ height:auto; min-height:100%; width:100%; font-size:.8rem; padding:72px 0 0 0; } #content #message{ padding:0 16px; } } @media screen and (max-width:375px){ nav{ height:60px; padding-top:9px; padding-bottom:0px; } .nav--background{ height:60px; } nav ul.menu--main{ top:60px; } main section{ padding-top:60px; } main section .section--menu{ top:60px; } #content{ height:auto; min-height:100%; width:100%; font-size:.8em; padding:60px 0 0 0; } #content #message p{ font-size: 1.75em; } } .table th, td { border-bottom: 1px solid; font-size: 10px; }