/* Theme name: MailBakery Description: Custom Theme */ /* Source post-css styles are located in the postcss directory. The compiled bundle is in assets/bundle.css; The README.md file contains instructions how to get the compilation process up & running. If you need to make a quick fix, feel free to add CSS below this comment. It will override bundle.css styles. */ * { margin: 0; outline: 0; padding: 0; } html, body { height: 100%; } html.disable-scroll { overflow: hidden; } body { background: #fcfaf4; font-size: 16px; line-height: 1.2; color: #445361; min-width: 1000px; } a { text-decoration: underline; color: #445361; cursor: pointer; } a:hover { text-decoration: none; } a img { border: 0 none; } input, textarea, select { font-size: 20px; color: #8e959b; } textarea { overflow: auto; resize: none; } .shell:after, .clearfix:after, .nav:after, .cols:after, .process-step:after { content: ''; clear: both; display: block; height: 0; overflow: hidden; } .shell, .clearfix, .nav, .cols, .process-step { zoom: 1; } .logo, .btn-order-l .btn-circle, .btn-order-l .btn-circle-inner, .btn-risk-free, .footer-bar .ico-cards, .ico-hand, .ico-person, .popup .close, .btn-close, .btn-close .ico-close, .slider-generic .slider-mask, .slider-contact .slider-mask, .logo-hover, .slider-generic .slider-nav a, .flex-direction-nav a, .section-clients-feedback .arrow-more, .slider-testimonials .slider-nav a { background-image: url(../png/consistent-sprite.png); background-repeat: no-repeat; } .hi-dpi .logo, .hi-dpi .logo-hover, .hi-dpi .btn-order-l .btn-circle, .hi-dpi .btn-order-l .btn-circle-inner, .hi-dpi .btn-risk-free, .hi-dpi .footer-bar .ico-cards, .hi-dpi .ico-hand, .hi-dpi .ico-person, .hi-dpi .popup .close, .hi-dpi .btn-close, .hi-dpi .btn-close .ico-close, .hi-dpi .slider-generic .slider-mask, .hi-dpi .slider-contact .slider-mask, .hi-dpi .slider-generic .slider-nav a, .hi-dpi .flex-direction-nav a, .hi-dpi .section-clients-feedback .arrow-more, .hi-dpi .slider-testimonials .slider-nav a { background-image: url(../png/consistent-sprite%402x.png); -webkit-background-size: 954px 770px; background-size: 954px 770px; } .row-devices, .section-more .section-item-image i { background-image: url(../png/home-sprite.png); background-repeat: no-repeat; } .hi-dpi .row-devices { background-image: url(../png/home-sprite%402x.png); background-position: -784px -188px; -webkit-background-size: 974px 902px; background-size: 974px 902px; } .wrapper { width: 100%; overflow: hidden; display: flex; } .wrapper-inner { width: 100%; display: flex; flex-direction: column; min-height: 100vh; overflow: hidden; position: relative; } .shell { width: 980px; margin: 0 auto; } .top-bar { background: #faf1be; position: fixed; top: 0; left: 0; right: 0; z-index: 51; text-align: center; display: none; padding: 13px 55px 15px; } .top-bar-visible .top-bar { display: block; } .top-bar-message { color: #333; font-family: "Source Sans Pro","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif; font-size: 15px; line-height: 22px; font-weight: 400; font-style: normal; } .top-bar-message a { color: #425262; text-decoration: none; border-bottom: 1px dashed; } .top-bar-message a:hover { color: #c62408; } .top-bar-message strong { font-weight: 500; } .top-bar-close { background: url(../png/ico-close-bar.png) 50% no-repeat; width: 13px; height: 13px; position: absolute; top: 50%; margin-top: -6px; right: 13px; } .hi-dpi .top-bar-close { background-image: url(../png/ico-close-bar%402x.png); -webkit-background-size: 13px 13px; background-size: 13px 13px; } .header { width: 100%; position: fixed; top: 0; left: 0; z-index: 50; background: #e05333; height: 55px; } .header-inner { position: relative; z-index: 1; } .header-sample { height: 10px; background: #e05333; box-shadow: 0 0 13px rgba(0,0,0,.3); } .header-sample:after { content: none; } .logo { background-position: 0 0; width: 68px; height: 103px; position: absolute; top: 0; left: 50%; z-index: 20; margin: 0 0 0 -34px; } .logo-hover, .no-touch .page-home .logo:hover .logo-hover { background-position: 0 -175px; width: 52px; height: 74px; position: absolute; top: 13px; left: 8px; display: none; } .no-touch .logo:hover .logo-hover { display: block; } .nav { height: 55px; } .nav { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; } .nav > ul { width: 50%; font-size: 0; line-height: 0; } .nav > ul:first-child { padding-right: 40px; text-align: right; } .nav > ul:last-child { padding-left: 40px; } .nav > ul > li { display: inline-block; vertical-align: top; } .nav > ul > li > a { display: block; font-size: 16px; line-height: 35px; padding: 10px 20px; text-transform: uppercase; color: #fff; text-decoration: none; } .nav ul + ul > li > a { padding: 10px 17px; } .no-touch .nav > ul > li > a:hover, .nav li.current > a { background-color: #c62408; } .nav li.has-dropdown.current > a, .nav li.has-dropdown:hover > a { position: relative; z-index: 10; background: #c62408; } .nav li.has-dropdown.current > a:after, .nav li.has-dropdown:hover > a:after { content: ''; width: 0; height: 0; overflow: hidden; position: absolute; top: 100%; left: 50%; border-width: 7px 14px 0; border-style: solid; border-color: #c62408 transparent transparent; margin: 0 0 0 -14px; } .nav li a.link-order { background: #f8ac42; padding: 3px 20px; margin-top: 7px; margin-left: 10px; border-radius: 10px; } .nav li.current a.link-order { background: #c62408; } .nav-toggle { display: none; } .has-dropdown { overflow: hidden; } .has-dropdown:hover { overflow: visible; } .dropdown-main { background: #f7f2e0; position: absolute; top: 55px; left: 0; right: 0; box-shadow: 5px 5px 18px rgba(0,0,0,.2); visibility: hidden; opacity: 0; display: none; z-index: 2; } .has-dropdown:hover > .dropdown-main { visibility: visible; opacity: 1; display: block; } .has-dropdown:hover > .dropdown-main { -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } .dropdown-main ul { list-style: none; overflow: hidden; background: #fcf9f2; text-align: center; border-right: 1px solid #e4dec7; } .dropdown-main li { float: left; border-width: 0 0 0 1px; border-style: solid; border-color: #e4dec7; width: 325px; } .dropdown-main li + li + li + li { border-width: 1px 0 0 1px; } .dropdown-main a { display: block; overflow: hidden; font-size: 22px; line-height: 1.5; text-decoration: none; padding: 45px 20px 25px; height: 120px; } .dropdown-main a .ico-animated-holder { top: -5px; } .dropdown-main a strong { font-weight: 400; display: block; } .dropdown-main a small { font-size: 12px; display: block; font-family: 'Trebuchet MS', Arial, sans-serif; opacity: .7; } .no-touch .dropdown-main a:hover, .no-touch .nav .dropdown-main li.current > a { background: #fff; color: #e05333; } /* .container { padding: 178px 0 656px; } */ .container { padding: 178px 0 0; flex-grow: 1; } .dropdown-overlay { background: #e7debc; position: fixed; top: 64px; left: 0; bottom: 0; right: 0; visibility: hidden; opacity: 0; z-index: 1; } .dropdown-shown .dropdown-overlay { visibility: visible; opacity: .9; filter:alpha(opacity=90); } body.top-bar-visible .dropdown-overlay { top: 96px; } /*.bar-featured.active + header .dropdown-overlay { top: 114px; }*/ @media only screen and (max-width: 1023px) { .nav { display: block; } .nav > ul { width: auto; } .nav > ul:first-child { padding-right: 0; text-align: left; } .nav > ul:last-child { padding-left: 0; } .nav > ul > li { display: block; } } /* ------------------------------------------------------------ *\ Header Bar \* ------------------------------------------------------------ */ .header .header__bar { position: relative; z-index: 25; background-color: #FFF; font-size: 14px; padding: 18px 0; font-weight: 500; } .header .header__bar .shell { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; justify-content: space-between; } .header .header__bar .shell:after { display: none; } .header .header__bar p { margin-bottom: 0; } /*body.top-bar-visible .header { top: 32px; }*/ /*body.top-bar-visible .header { top: 40px; }*/ body.top-bar-visible .header { top: 50px; } @media (max-width: 1024px) { .header .header__bar { border-bottom: 6px solid #e05333; } } @media (max-width: 767px) { .header .header__bar .shell { display: block; width: auto; padding: 0 12px; } .header .header__bar p + * { margin-top: 10px; } } /* ========================================================================== # buttons ========================================================================== */ .btn { display: inline-block; vertical-align: top; font-size: 17px; line-height: 37px; padding: 0 20px; border-radius: 6px; background-color: #8ac1b2; color: #fff; text-decoration: none; text-transform: uppercase; text-align: center; } .no-touch .btn:hover { background-color: #45907b; } input.btn, button.btn { cursor: pointer; overflow: visible; border: 0 none; -webkit-appearance: none; } .btn sup { display: inline-block; vertical-align: top; } .btn-dark { background-color: #45907b; } .no-touch .btn-dark:hover { background-color: #43756e; } .btn-ribbon { padding: 0 18px 0 25px; } /* .no-touch .btn-ribbon:hover { padding-right: 24px; } */ .btn-login { background: url(../png/btn-client-area.png) 0 0 no-repeat; border-radius: 0; position: absolute; top: 136px; right: 0; line-height: 44px; text-shadow: 1px 1px 0 #61a18f; } .btn-login:before { content: ''; width: 0; height: 0; overflow: hidden; border-width: 8px 200px 8px 0; border-style: solid; border-color: rgba(0,0,0,.1) transparent transparent; position: absolute; top: 100%; left: 7px; right: 0; } .btn-login:before { -webkit-transform: skew(-35deg); -moz-transform: skew(-35deg); -ms-transform: skew(-35deg); -o-transform: skew(-35deg); transform: skew(-35deg); } .hi-dpi .btn-login { background-image: url(../png/btn-client-area%402x.png); -webkit-background-size: 154px 89px; background-size: 154px 89px; } .no-touch .btn-login:hover { background-position: 0 -45px; background-color: transparent; } .btn-quote { background: url(../png/btn-request-quote.png) 0 0 no-repeat; border-radius: 0; top: 196px; right: 0; line-height: 44px; height: 44px; text-shadow: 1px 1px 0 #c62408; position: absolute; } .btn-quote:before { content: ''; width: 0; height: 0; overflow: hidden; border-width: 8px 200px 8px 0; border-style: solid; border-color: rgba(0,0,0,.1) transparent transparent; position: absolute; top: 100%; left: 7px; right: 0; } .btn-quote:before { -webkit-transform: skew(-35deg); -moz-transform: skew(-35deg); -ms-transform: skew(-35deg); -o-transform: skew(-35deg); transform: skew(-35deg); } .hi-dpi .btn-quote { background-image: url(../png/btn-request-quote%402x.png); -webkit-background-size: 194px 89px; background-size: 194px 89px; } .no-touch .btn-quote:hover { background-position: 0 -45px; background-color: transparent; } .btn-test { line-height: 40px; position: absolute; bottom: -100px; right: 0; border-radius: 0; background: #f2ecce; color: #445361; } .no-touch .btn-test:hover { background: #e2d59a; } .btn-test:before, .btn-test .before, .btn-test:after, .btn-test .after { border-color: transparent #f2ecce transparent transparent; } .no-touch .btn-test:hover:before, .no-touch .btn-test:hover .before, .no-touch .btn-test:hover:after, .no-touch .btn-test:hover .after { border-color: transparent #e2d59a transparent transparent; } .btn-orange { background-color: #e05333; } .no-touch .btn-orange:hover { background-color: #c62408; } .btn-order-l { background: transparent; width: 384px; height: 384px; position: absolute; top: 100%; left: 50%; margin: -265px 0 0 -192px; padding: 0; text-align: center; z-index: 1; border-radius: 180px; } .btn-order-l .btn-inner { width: 304px; height: 344px; padding: 0 0 0 38px; position: absolute; top: 50%; left: 50%; margin: -172px 0 0 -172px; font-size: 46px; line-height: 168px; z-index: 5; } .btn-order-l .btn-circle-container { width: 384px; height: 384px; position: absolute; top: 0; left: 0; } .btn-order-l .btn-circle { background-position: -415px -32px; width: 384px; height: 384px; position: absolute; top: 50%; left: 50%; margin: -192px 0 0 -192px; } .btn-order-l .btn-circle-inner { background-position: -69px -72px; width: 344px; height: 344px; position: absolute; top: 50%; left: 50%; margin: -172px 0 0 -172px; z-index: 2; } .no-touch .btn-order-l:hover { background: transparent; } .btn-order-l-container { width: 424px; height: 284px; overflow: hidden; margin-bottom: -113px; left: 50%; margin-left: -212px; position: relative; } .btn-close { background-color: transparent; background-position: -339px 0; width: 45px; height: 45px; position: absolute; top: 50px; right: 20px; padding: 0; } .no-touch .btn-close:hover { background-color: transparent; } .btn-close .ico-close { background-position: -385px 0; width: 21px; height: 23px; position: absolute; top: 11px; left: 12px; } .btn-risk-free { background-position: 0 -104px; background-color: transparent; width: 54px; height: 70px; position: absolute; top: 0; right: 19px; z-index: 3; padding: 0; border-radius: 0; } .no-touch .btn-risk-free:hover { background-color: transparent; } .btn-upload { background: #f2e9d5; border: 1px solid #e8dfbf; border-radius: 3px; font-size: 17px; line-height: 32px; padding: 0 10px; color: #445361; margin: 3px; box-shadow: 0 0 0 3px #f6f0e4; } .no-touch .btn-upload:hover { background: #f2e9d5; } .no-touch .custom-upload:hover .btn-upload { border-color: #c69c6d; box-shadow: 0 0 0 3px #ecddca; } .no-touch .custom-upload:hover .shadow-btn-upload { background: #ecddca; } .btn-l { font-size: 30px; line-height: 52px; padding: 0 20px; } input.btn-l { height: 52px; } .btn-xl { font-size: 50px; line-height: 62px; padding: 0 15px; margin-bottom: 16px; } .btn-xl sup { display: inline-block; vertical-align: top; font-size: 26px; line-height: 44px; margin: 0 2px 0 0; } input.btn-xl { height: 62px; } .btn-wide { min-width: 150px; padding: 0 20px; } .btn-blue { background: #54abee; } .no-touch .btn-blue:hover { background-color: #338bce; } .btn-tweet { padding-left: 50px; background-image: url(../png/ico-tweet.png); background-position: 24px 50%; background-repeat: no-repeat; } .hi-dpi .btn-tweet { background-image: url(../png/ico-tweet%402x.png); -webkit-background-size: 18px 15px; background-size: 18px 15px; } .btn-yellow { background-color: #f7ad44; } .no-touch .btn-yellow:hover { background: #d88616; } .btn-outline { background: transparent; border: 1px solid #8ac1b2; color: #8ac1b2; font-size: 14px; line-height: 32px; padding: 0 16px; } .no-touch .btn-outline:hover { background: transparent; border-color: #45907b; color: #45907b; } .btn-large { line-height: 44px; padding: 0 15px; } .btn-large-alt { font-size: 24px; padding: 10px 51px; border-radius: 8px; } /* ------------------------------------------------------------ *\ Btn Banner Intro \* ------------------------------------------------------------ */ .btn-banner-intro { text-decoration: none; display: block; text-align: center; text-transform: uppercase; font-size: 13px; color: #41756d; font-weight: bold; } .btn-banner-intro strong { display: block; font-family: 'GothamCondensed', Arial, sans-serif; color: #e35130; font-weight: 400; font-size: 38px; padding: 8px 0 3px; } .ico-intro { background: url(../png/ico-intro.png); width: 279px; height: 192px; font-size: 0; display: inline-block; line-height: 0; } /* ========================================================================== # mini header ========================================================================== */ .header .shell { visibility: visible; opacity: 1; } .mini-header .header .shell { visibility: hidden; opacity: 0; } .mini-header .btn-quote { bottom: -65px; } .mini-header .dropdown-main { visibility: hidden; } .checked .btn-xl, .no-touch .checked .btn-xl:hover { background-color: #e05333; } .ico-hand { background-position: -339px -46px; width: 38px; height: 28px; vertical-align: middle; display: inline-block; } .ico-person { background-position: -407px 0; width: 14px; height: 15px; vertical-align: top; display: inline-block; position: relative; top: 4px; } /* .footer { background: #43756e; position: absolute; bottom: 0; left: 0; width: 100%; } */ .footer { background: #43756e; width: 100%; } .hide-footer .footer { display: none; } .hide-footer .container { padding-bottom: 0; } .footer-nav { background: #4e8680; position: relative; z-index: 2; border-top: 1px solid #44706c; text-align: center; } .footer-nav p { padding: 31px 0 18px; font-size: 12px; line-height: 16px; font-weight: bold; color: #aeccb4; } .footer-nav p span { margin: 0 1px; } .footer-nav p a { text-transform: uppercase; color: #aeccb4; text-decoration: none; } .no-touch .footer-nav p a:hover, .footer-nav p a.current { color: #fff; } .footer-section { background: #4e8680; position: relative; z-index: 2; border-top: 1px solid #44706c; overflow: hidden; padding: 40px 0; } .footer-section h4 { font-size: 16px; font-weight: normal; text-transform: uppercase; color: #fff; padding: 0 0 16px; } .page-thank-you-subscribe .footer-section { display: none; } .page-thank-you-subscribe .section-thanks { background: transparent !important; } .section-thanks-subscribe .section-description { padding: 0; } .hi-dpi .section-thanks.section-thanks-store { background: none; } .logo-footer { background: url(../png/logo-footer.png) 50% no-repeat; width: 193px; height: 39px; display: block; margin: 0 0 20px; } .hi-dpi .logo-footer { background-image: url(../png/logo-footer%402x.png); -webkit-background-size: 193px 39px; background-size: 193px 39px; } .col-footer { float: left; } .col-subscribe { width: 260px; } /* ------------------------------------------------------------ *\ Subscribe \* ------------------------------------------------------------ */ /* Base */ .form-subscribe_wrapper { font-size: 18px; } .form-subscribe_wrapper .gform_heading { padding: 18px 0; } .form-subscribe_wrapper .gform_heading .gform_title { font-size: 14px; font-weight: normal; color: #fff; } /* Fields */ .form-subscribe .gform_body .gform_fields .gfield .gfield_label { color: $c-base-gray; display: none; } .form-subscribe .gform_body .gform_fields { margin: 0 -14px !important; } .form-subscribe .gform_body .gform_fields .gfield, .form-subscribe_wrapper .gform_validation_error .gform_body .gform_fields .gfield.gfield_error { margin: 0 14px; margin-bottom: 22px !important; } .form-subscribe .gform_body .gform_fields .gfield, .form-subscribe_wrapper .gform_validation_error .gform_body .gform_fields .gfield.gfield_error { position: relative; } .form-subscribe .gform_body .gform_fields .gfield .ginput_container textarea, .form-subscribe .gform_body .gform_fields .gfield .ginput_container select, .form-subscribe .gform_body .gform_fields .gfield .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { width: 100%; min-height: 22px; background: #43756e; font-size: 14px; color: #fff; width: 232px; box-shadow: 0 0 0 3px #5e9791; line-height: 22px; border: 1px solid #2e5b55; border-radius: 3px; margin: 3px; display: block; line-height: 22px; padding: 5px 10px; font-family: 'Trebuchet MS', arial, helvetica, sans-serif; } .sidebar .form-subscribe_wrapper .gform_heading { padding-top: 0; } .sidebar .form-subscribe_wrapper .gform_heading .gform_title { text-align: center; font-size: 22px; } /* Footer */ .form-subscribe_wrapper .gform_footer input.button, .form-subscribe_wrapper .gform_footer input[type=submit], .form-subscribe_wrapper .gform_page_footer input.button, .form-subscribe_wrapper .gform_page_footer input[type=submit] { appearance: none; color: #FFFFFF; border-radius: 6px; border: none; font-size: 14px; padding: 0 10px; background: #5e9791; line-height: 37px; font-family: 'Bryant', arial, helvetica, sans-serif; font-weight: normal; color: #fff; text-decoration: none; text-transform: uppercase; text-align: center; transition: background-color .15s ease-in; } .form-subscribe_wrapper .gform_footer input.button:hover, .form-subscribe_wrapper .gform_footer input[type=submit]:hover, .form-subscribe_wrapper .gform_page_footer input.button:hover, .form-subscribe_wrapper .gform_page_footer input[type=submit]:hover { background: #2e5b55; color: #FFFFFF; cursor: pointer; } /* Spinner */ .form-subscribe .gform_footer { text-align: left; margin-top: 3px !important; position: relative; } .form-subscribe .gform_footer .gform_ajax_spinner { height: 26px; position: absolute; top: 50%; margin-top: -12px; margin-left: 7px; } /* Error States */ .form-subscribe_wrapper div.validation_error, .form-subscribe_wrapper .validation_message, .form-subscribe_wrapper .gfield_required { color: #fff; height: 14px; line-height: 1.2; position: absolute; bottom: -18px; left: 4px; text-align: left; font-family: 'Trebuchet MS', arial, helvetica, sans-serif; font-size: 11px; } .form-subscribe .gform_body .gform_fields .gfield_error .ginput_container textarea, .form-subscribe .gform_body .gform_fields .gfield_error .ginput_container select, .form-subscribe .gform_body .gform_fields .gfield_error .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { border-color: #cd4c2f; } /* Confirmation */ .gform_confirmation_wrapper .gform_confirmation_message { font-size: 11px; line-height: 14px; color: #fff; margin-bottom: 10px; font-family: 'Trebuchet MS', arial, helvetica, sans-serif; margin-top: 18px; } .form-subscribe { border-top: 1px solid #64a29b; } .footer .form-subscribe { border: 0; } .form-subscribe ::-webkit-input-placeholder { color: #fff; } .form-subscribe input:focus::-webkit-input-placeholder { opacity: .5; } .form-subscribe ::-moz-placeholder { color: #fff; } .form-subscribe input:focus::-moz-placeholder { opacity: .5; } .form-subscribe :-moz-placeholder { color: #fff; } .form-subscribe input:focus:-moz-placeholder { opacity: .5; } .form-subscribe :-ms-input-placeholder { color: #fff; } .form-subscribe input:focus:-ms-input-placeholder { opacity: .5; } /* Section Subscribe */ .form-newsletter { border: 0 none; position: relative; max-width: 402px; margin: 0 auto; padding-top: 213px; height: 306px; overflow: hidden; margin-top: -50px; } .form-newsletter:before { content: ''; background: url(../png/mascot-form-subscribe.png) 50% no-repeat; width: 160px; height: 252px; position: absolute; top: 0; left: 122px; z-index: 1; } .hi-dpi .form-newsletter:before { background-image: url(../png/mascot-form-subscribe%402x.png); -webkit-background-size: 160px 252px; background-size: 160px 252px; } .form-newsletter:after { content: ''; background: url(../png/bg-form-subscribe.png) 0 0 no-repeat; width: 387px; height: 306px; position: absolute; bottom: 0; left: 0; z-index: 2; } .hi-dpi .form-newsletter:after { background-image: url(../png/bg-form-subscribe%402x.png); -webkit-background-size: 387px 306px; background-size: 387px 306px; } .form-newsletter .form-head, .form-newsletter .form-body, .form-newsletter .form-actions { position: relative; z-index: 3; } .form-newsletter .form-head { padding: 16px 38px 7px; } .form-newsletter .form-head h4 { font-size: 30px; text-transform: uppercase; } .form-newsletter .form-body { padding: 10px 40px; } .form-newsletter .form-row { width: auto; } .form-newsletter .field { width: 292px; } .form-newsletter .field.mce_inline_error { border-color: #cd4c2f !important; } .form-newsletter .field.mce_inline_error + .notice { display: inline; color: #cd4c2f; } .form-newsletter .response { font-size: 15px; margin-bottom: 80px; position: relative; } .form-newsletter div.mce_inline_error { display: none !important; } .form-newsletter form { border: none; } .form-newsletter ul { list-style: none; } .form-newsletter .gform_body .gform_fields .gfield .ginput_container textarea, .form-newsletter .gform_body .gform_fields .gfield .ginput_container select, .form-newsletter .gform_body .gform_fields .gfield .ginput_container input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { width: 100%; background: #fff; color: #445361; border: 1px solid #e8dfbf; box-shadow: 0 0 0 3px #f6f0e4; } .form-newsletter .gform_footer { text-align: center; } .form-newsletter .gform_footer input.button, .form-newsletter .gform_footer input[type=submit], .form-newsletter .gform_page_footer input.button, .form-newsletter .gform_page_footer input[type=submit] { background-color: #e05333; } .form-newsletter .validation_message, .form-newsletter .gfield_required { color: #e05333; } .form-newsletter div.validation_error { display: none; } .form-newsletter ::-webkit-input-placeholder { color: #445361; } .form-newsletter input:focus::-webkit-input-placeholder { opacity: .5; } .form-newsletter ::-moz-placeholder { color: #445361; } .form-newsletter input:focus::-moz-placeholder { opacity: .5; } .form-newsletter :-moz-placeholder { color: #445361; } .form-newsletter input:focus:-moz-placeholder { opacity: .5; } .form-newsletter :-ms-input-placeholder { color: #445361; } .form-newsletter input:focus:-ms-input-placeholder { opacity: .5; } .col-nav { width: 460px; margin-left: 50px; } .col-nav ul { float: left; min-width: 130px; font-size: 14px; line-height: 20px; } .col-nav ul ~ ul { float: right; } .col-nav ul li { padding: 5px 0 5px 24px; background: url(../png/li-footer.png) 9px 9px no-repeat; } .hi-dpi .col-nav ul li { background-image: url(../png/li-footer%402x.png); -webkit-background-size: 6px 12px; background-size: 6px 12px; } .col-nav li a { text-decoration: none; color: #fff; } .section-generic-entry .contacts-items { clear: both; } .contact-address-left { float: left; width: 50%; } .contact-address-right { float: right; width: 50%; } .col-contacts { float: right; width: 180px; } .col-trustspot { margin-top: 20px; width: 100%; margin-left: -3px; } .col-trustspot iframe { margin: 0 auto; display: block; } .col-contacts .btn-request { background: #fff; color: #43756e; padding: 0 10px; display: block; text-align: center; } .no-touch .col-contacts .btn-request:hover { background: #fff; } .col-contacts .credits { padding-top: 21px; margin-right: -38px; } .col-contacts .credits p { color: #B8CECC; font-size: 13px; font-family: 'Trebuchet MS', arial, helvetica, sans-serif; line-height: 32px; padding-bottom: 0; } .col-contacts .credits a { color: #B8CECC; display: block; text-decoration: none; transition: color .3s ease-out; } .col-contacts .credits a:hover { color: #fff; } .col-contacts .credits p:first-of-type { line-height: 22px; margin-bottom: 13px; } .col-contacts .credits p:first-of-type a { display: inline-block; text-decoration: underline; } .col-contacts .credits p:first-of-type a:hover { display: inline-block; } .footer .contacts { list-style: none; font-size: 14px; line-height: 20px; color: #fff; margin: 0 0 18px; } .footer .contacts dt { float: left; width: 25px; height: 34px; } .footer .contacts dt i { display: inline-block; vertical-align: top; position: relative; } .footer .contacts dd { padding: 7px 0; } .footer .contacts dd a { color: #fff; text-decoration: none; } .footer .contacts .ico-phone { background: url(../png/ico-phone.png) 50% no-repeat; width: 14px; height: 15px; top: 9px; } .footer .contacts .ico-email { background: url(../png/ico-email.png) 50% no-repeat; width: 15px; height: 11px; top: 12px; } .footer .contacts .ico-skype { background: url(../png/ico-skype.png) 50% no-repeat; width: 15px; height: 15px; top: 9px; } .hi-dpi .footer .contacts .ico-phone { background-image: url(../png/ico-phone%402x.png); -webkit-background-size: 14px 15px; background-size: 14px 15px; } .hi-dpi .footer .contacts .ico-email { background-image: url(../png/ico-email%402x.png); -webkit-background-size: 15px 11px; background-size: 15px 11px; } .hi-dpi .footer .contacts .ico-skype { background-image: url(../png/ico-skype%402x.png); -webkit-background-size: 15px 15px; background-size: 15px 15px; } .contacts-items { list-style: none; font-size: 14px; line-height: 20px; margin: 0 0 15px; } .contacts-items dt { float: left; width: 25px; height: 26px; } .contacts-items dt i { display: inline-block; vertical-align: top; position: relative; } .contacts-items dd { padding: 3px 0; } .contacts-items dd a { color: #445361; text-decoration: none; } .contacts-items .ico-phone { background: url(../png/ico-phone-dark.png) 50% no-repeat; width: 14px; height: 15px; top: 7px; } .contacts-items .ico-email { background: url(../png/ico-email-dark.png) 50% no-repeat; width: 15px; height: 11px; top: 10px; } .contacts-items .ico-skype { background: url(../png/ico-skype-dark.png) 50% no-repeat; width: 15px; height: 15px; top: 7px; } .hi-dpi .contacts-items .ico-phone { background-image: url(../png/ico-phone-dark%402x.png); -webkit-background-size: 14px 15px; background-size: 14px 15px; } .hi-dpi .contacts-items .ico-email { background-image: url(../png/ico-email-dark%402x.png); -webkit-background-size: 15px 11px; background-size: 15px 11px; } .hi-dpi .contacts-items .ico-skype { background-image: url(../png/ico-skype-dark%402x.png); -webkit-background-size: 15px 15px; background-size: 15px 15px; } .footer-socials { list-style: none; font-size: 0; line-height: 0; margin: 20px 0 0; } .footer-socials li { display: inline; } .footer-socials li ~ li { margin-left: 1px; } .footer-socials a { display: inline-block; vertical-align: top; width: 35px; height: 35px; position: relative; background: #69a9a2; text-align: center; border-radius: 3px; box-shadow: 1px 1px 0 #84c6bf inset, 1px 1px 0 #43756e; } .footer-socials a i { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: url(../png/footer-socials.png); background-repeat: no-repeat; } .footer-socials .ico-facebook { background-position: 1px 0; } .footer-socials .ico-twitter { background-position: -35px 0; } .footer-socials .ico-linkedin { background-position: -70px 0; } .footer-socials .ico-youtube { background-position: -106px 0; } .footer-socials .ico-pinterest { background-position: -143px 0; } .hi-dpi .footer-socials a i { background-image: url(../png/footer-socials%402x.png); -webkit-background-size: 180px 35px; background-size: 180px 35px; } .socials { font-size: 0; text-align: center; padding: 0 0 21px; } .socials li { display: inline; margin: 0 2px; } .socials a { display: inline-block; vertical-align: top; width: 34px; height: 34px; background-image: url(../png/socials.png); } .socials a:hover { opacity: .7; } .socials .link-facebook { background-position: 0 0; } .socials .link-twitter { background-position: -35px 0; } .socials .link-googleplus { background-position: -70px 0; } .hi-dpi .socials a { background-image: url(../png/socials%402x.png); -webkit-background-size: 104px 34px; background-size: 104px 34px; } .footer-bar { background: #43756e; position: relative; z-index: 2; padding: 20px 0; } .footer-bar p { font-size: 12px; line-height: 20px; color: #aeccb4; } .footer-bar .copyright { float: left; } .footer-bar .cards, .footer-bar .ico-cards { background-position: -422px 0; width: 213px; height: 16px; display: inline-block; vertical-align: top; position: relative; top: 2px; margin: 0 0 0 7px; } .footer-bar .ico-burger { background: url(../png/logo-burger.png) 50% no-repeat; width: 17px; height: 17px; display: inline-block; vertical-align: top; margin: 0 2px; } .section { padding: 32px 0; text-align: center; } .section p, .section dl { line-height: 25px; padding: 0 0 28px; } .section-dark { background: #f7f2e0; border-width: 1px 0; border-style: solid; border-color: #e7debc; } .section.no-top-border { border-top-width: 0; padding-top: 0; } .section.no-bottom-border { border-bottom-width: 0; } .section.no-border { border: none; } .section-bottom-border { border-width: 1px 0; border-style: solid; border-color: #e7debc; } .section-headline { font-size: 80px; line-height: 80px; text-transform: uppercase; border-top: 1px solid #d7d8d5; margin: -1px 0 0; position: relative; height: 56px; } .section-headline > span { display: inline-block; vertical-align: top; background: #fcf9f2; padding: 0 18px; top: -41px; position: relative; } .section-headline-small { font-size: 54px; } .page-thank-you-subscribe .section-headline { font-size: 40px; } .section-title { font-size: 54px; line-height: 54px; text-transform: uppercase; color: #445361; padding: 0 0 10px; } .section-subtitle { font-size: 24px; line-height: 24px; color: #445361; padding: 0 0 26px; } .section-services p { max-width: 630px; margin: 0 auto; } .section-services-generic .list-checked-large { max-width: 340px; } .section-testing .list-checked { padding: 0 0 28px; } .section-team .section-actions { padding: 28px 0 0; } .section-testimonials .section-actions { padding: 40px 0 0; } .section-more { padding-bottom: 55px; } .section-more h3 { font-size: 30px; line-height: 30px; padding: 0 0 10px; } .section-more .nav-tabbed { padding: 12px 0 28px; } .section-more .section-items { text-align: left; } .section-more .section-items .slide { height: 100%; } .section-more .section-items-clip { position: relative; width: 100%; } .section-more .section-item { width: 100%; position: absolute; top: 0; left: 0; z-index: -1; visibility: hidden; } .section-more .section-item-current { opacity: 1; z-index: 20; visibility: visible; } .section-more .section-item-outgoing { opacity: 0; z-index: -1; visibility: visible; } .section-more .section-item-entry { float: left; width: 420px; padding: 10px 43px 0 157px; } .section-more .section-item-image { float: right; width: 270px; padding: 0 88px 0 0; } .section-more .section-item-image i { display: block; margin: 0 auto; position: relative; } .section-more .section-items-arrows { display: none; } .section-more .ico-refunds { background-position: -521px -382px; width: 265px; height: 187px; } .section-more .ico-privacy { background-position: -787px -382px; width: 187px; height: 183px; top: -10px; } .section-more .ico-communication { background-position: -521px -570px; width: 262px; height: 177px; top: -10px; } .hi-dpi .section-more .section-item-image i { background-image: url(../png/home-sprite%402x.png); -webkit-background-size: 974px 902px; background-size: 974px 902px; } .hi-dpi .section-more .ico-refunds { background-position: -521px 0; } .hi-dpi .section-more .ico-privacy { background-position: -787px 0; } .hi-dpi .section-more .ico-communication { background-position: -521px -188px; } .section-more .section-body { padding-top: 81px; position: relative; } .section-more .nav-tabbed { width: 100%; position: absolute; top: 0; left: 0; } .section-more .section-items-prev, .section-more .section-items-next, .section-more .flex-direction-nav a { background-image: url(../png/consistent-sprite.png); width: 36px; height: 36px; border-radius: 6px; z-index: 10; position: absolute; top: 60px; font-size: 0; line-height: 0; text-indent: -9999px; background-color: #e05333; } .section-more .section-items-prev, .section-more .flex-prev { background-position: -801px -32px; left: -10px; } .no-touch .section-more .section-items-prev:hover, .no-touch .section-more .flex-prev:hover { background-position: -801px -69px; } .section-more .section-items-next, .section-more .flex-next { background-position: -836px -32px; right: -10px; } .no-touch .section-more .section-items-next:hover, .no-touch .section-more .flex-next:hover { background-position: -836px -69px; } .section-more .flex-direction-nav { display: none; } .hi-dpi .section-more .section-items-prev, .hi-dpi .section-more .section-items-next, .hi-dpi .section-more .flex-direction-nav a { background-image: url(../png/consistent-sprite%402x.png); -webkit-background-size: 954px 770px; background-size: 954px 770px; } .section-more.flex-init .section-items-arrows { display: none; } .section-more.flex-init .section-item { visibility: visible; position: relative; } .section-more.flex-init .section-items-clip { overflow: visible !important; } .section-description { padding: 0 0 34px; } .section-description p { font-size: 26px; line-height: 36px; padding: 0 0 18px; } .section-description span.padder { padding: 0 52px; } .section-nav { padding: 0 0 68px; position: relative; top: -20px; } .section-nav .nav-tabbed { position: relative; top: -20px; display: inline-block; vertical-align: top; padding: 0 12px; background: #fcf9f2; top: 0; } .section-intro { padding: 0 0 73px; } .section-listing, .section-store { background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; margin: 0 0 48px; } .hi-dpi .section-listing, .hi-dpi .section-store { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .section-listing-actions-inner, .section-thanks-actions-inner, .section-clients-actions-inner, .section-description-actions-inner { display: inline-block; vertical-align: top; background: #fcf9f2; padding: 0 12px; position: relative; top: 17px; } .section-clients-image { background: url(../png/dotted-horizontal.png) 50% 2px repeat-x; padding: 0 0 20px; width: 100%; position: relative; } .section-clients-image img { display: block; margin: 0 auto -44px; top: -44px; position: relative; z-index: 10; } .section-clients-image .shell { background: #fcf9f2 url(../png/dotted-testimonials.png) 50% 1px no-repeat; padding: 0; } .hi-dpi .section-clients-image .shell { background-image: url(../png/dotted-testimonials%402x.png); -webkit-background-size: 974px 128px; background-size: 974px 128px; } .hi-dpi .section-clients-image { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .clients-image-mask { width: auto; height: auto; position: absolute; top: 0; bottom: 20px; left: 0; right: 0; background: #fcf9f2; } .section-clients-loaded .clients-image-mask { left: 50%; right: 50%; } .section-thanks { background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; padding-bottom: 0; margin: 0 0 300px; } .section-thanks img { display: block; margin: 0 auto 12px; } .section-thanks .section-description { padding-bottom: 0; } .section-thanks-store { background: transparent; margin: 30px 0; } .section-thanks-details { padding: 60px 0; } .section-thanks-details a { text-decoration: none; color: #d4643f; transition: color .2s; } .section-thanks-details a:hover { color: #c62408; } .section-download-item { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } .section-download-item h4 { font-size: 30px; color: #d4643f; font-weight: 400; margin: 30px; } .section-download-item .btn { font-size: 24px; border-radius: 3px; margin: 0 30px; padding: 0 30px; height: 43px; line-height: 43px; } .hi-dpi .section-thanks { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .section-thanks-actions small { display: block; font-size: 11px; color: #8e959b; line-height: 21px; } .section-last { padding-bottom: 230px; border-bottom: 0 none; position: relative; margin-bottom: -173px; } .section-about .section-description { background: url(../png/dotted-horizontal.png) 52% 100% repeat-x; padding-bottom: 0; margin-bottom: 34px; } .hi-dpi .section-about .section-description { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } /*.ico-about-team { background-position: 0 -308px; width: 980px; height: 112px; display: block; position: relative; margin: -60px 0 0; top: 48px; }*/ .ico-about-team { width: 982px; height: 112px; display: block; position: relative; margin: -60px 0 0 -11px; top: 48px; background-position: -86px -311px; } .section-generic { padding: 36px 0 24px; text-align: left; } .section-generic .section-title { text-align: center; } .section-generic h3 { font-size: 54px; line-height: 58px; padding: 0 0 8px; text-transform: uppercase; } .section-generic h4 { font-size: 30px; line-height: 32px; padding: 8px 0 10px; } .section-generic h5 { font-size: 24px; line-height: 30px; padding: 0 0 18px; } .section-generic p, .section-generic dl { padding: 0 0 15px; } .section-generic ol { padding: 0 0 15px 25px; } .section-generic-entry { float: left; width: 460px; padding: 22px 0 0; } .section-spaced { padding-bottom: 130px; } .section-clients-feedback { z-index: 2; position: relative; } .section-clients-feedback .arrow-more { background-position: -637px 0; width: 32px; height: 14px; position: fixed; bottom: 64px; left: 50%; margin: 0 0 0 -16px; visibility: hidden; opacity: 0; } .section-clients-feedback .arrow-more-show { visibility: visible; opacity: 1; } .section-contact { margin: 0 0 34px; } .section-contact .section-description { background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; } .section-solutions-headline { padding-bottom: 0; } .section-solutions-headline .section-headline { padding-bottom: 0; } .section-solutions-headline .section-description { padding-bottom: 0; } .section-solutions-headline .section-headline { height: 112px; } .section-solutions-headline .section-headline span { top: -77px; } .section-terms .section-description { background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; } .section-terms .section-generic h4 { padding-bottom: 20px; } .section-terms .section-generic h5 { padding-bottom: 10px; } .section-terms .section-generic ul { list-style-type: none; padding-bottom: 17px; } .section-terms .section-generic ul li { background: url(../png/green-check.png) 0 6px no-repeat; padding: 0 0 10px 22px; } .section-terms .section-generic ul .hi-dpi .list-checked li { background-image: url(../png/green-check%402x.png); -webkit-background-size: 11px 9px; background-size: 11px 9px; } .hi-dpi .section-contact .section-description { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .section-policies, .section-clients { padding-bottom: 42px; } .section-policies .section-nav { padding-bottom: 0; } .section-faq { padding-bottom: 52px; } .section-faq .section-nav { padding: 0; } .section-order { padding-bottom: 30px; } .section-partners { padding-bottom: 0; } .section-partners .section-description { background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; padding: 0; margin: 0 0 110px; } .hi-dpi .section-partners .section-description { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .section-process { padding: 0 0 80px; } .section-process .shell { background: url(../png/dotted-vertical.png) 50% 0 repeat-y; position: relative; } .hi-dpi .section-process .shell { background-image: url(../png/dotted-vertical%402x.png); -webkit-background-size: 2px 6px; background-size: 2px 6px; } .process-step { padding: 0 30px 90px; width: 920px; position: relative; text-align: left; } .process-step h3 { font-size: 46px; line-height: 48px; text-transform: uppercase; padding: 0 0 10px; } .process-step-image { float: left; width: 408px; } .process-step-image i { display: block; margin: 0 auto; } .process-step-image .ico-submit-order { background-position: 0 0; width: 322px; height: 272px; } .process-step-image .ico-hard-work { background-position: -323px 0; width: 382px; height: 309px; } .process-step-image .ico-testing-qa { background-position: -706px 0; width: 326px; height: 348px; } .process-step-image .ico-files-delivery { background-position: -1033px 0; width: 340px; height: 307px; } .process-step-entry { float: right; width: 394px; padding-right: 10px; } .process-step-alt .process-step-image { float: right; } .process-step-alt .process-step-entry { float: left; } .process-step-number { background-position: -1280px -96px; width: 51px; height: 51px; position: absolute; top: 0; left: 50%; margin-left: -25px; font-size: 36px; line-height: 50px; text-align: center; color: #8ac1b2; } .process-step-work .process-step-image i { margin: 0 0 0 auto; } .process-step-testing .process-step-image i { position: relative; margin-top: -74px; } .process-step-delivery .process-step-image i { position: relative; margin-top: -48px; } .process-end { background: #8ac1b2; width: 11px; height: 11px; border-radius: 6px; position: absolute; bottom: 0; left: 50%; margin-left: -5px; } .pricing-nav { position: relative; top: -36px; padding: 36px 70px 0; } .pricing-nav li { float: left; width: 100px; margin: 0 20px; } .pricing-nav li a { font-size: 12px; line-height: 14px; text-transform: uppercase; color: #445361; text-decoration: none; } .no-touch .pricing-nav li a:hover, .pricing-nav li.current a { color: #e05333; } .pricing-nav li img { display: block; margin: 0 auto; } .section-pricing { padding-bottom: 40px; } .section-pricing .section-description { padding-bottom: 0; } .slider-generic { float: right; width: 492px; position: relative; } .slider-generic .slides { height: 323px; } .slider-generic .slider-clip { width: 492px; height: 323px; position: relative; overflow: hidden; } .slider-generic .slider-mask { background-position: -461px -417px; width: 492px; height: 323px; position: absolute; top: 0; left: 0; z-index: 2; } .slider-generic .slide { width: 492px; position: absolute; top: 0; left: 0; visibility: hidden; } .slider-generic.flex-init .slide { visibility: visible; } .slider-generic .slide img { display: block; width: 100%; height: auto; } .slider-generic .slide-current { opacity: 1; z-index: 2; visibility: visible; } .slider-generic .slide-outgoing { visibility: visible; } .slider-generic .flex-control-nav, .slider-generic .slider-paging { padding: 20px 0 12px; } .slider-generic .flex-control-nav a.flex-active span, .slider-generic .slider-paging .current span { background: #e05333; } .slider-generic .slider-nav, .slider-generic .flex-direction-nav { font-size: 0; line-height: 0; } .slider-generic .slider-nav a, .slider-generic .flex-direction-nav a { width: 36px; height: 36px; background-color: #e05333; border-radius: 6px; position: absolute; top: 150px; text-indent: -9999px; z-index: 10; } .slider-generic.flex-init .slides { overflow: hidden; } .slider-generic.flex-init .slider-nav { display: none; } .slider-generic.flex-init .slider-clip { overflow: visible; } .slider-generic .slider-nav .link-prev, .slider-generic .flex-direction-nav .flex-prev { background-position: -802px -32px; left: -8px; } .no-touch .slider-generic .slider-nav .link-prev:hover, .no-touch .slider-generic .flex-direction-nav .flex-prev:hover { background-position: -802px -69px; } .slider-generic .slider-nav .link-next, .slider-generic .flex-direction-nav .flex-next { background-position: -836px -32px; right: -6px; } .no-touch .slider-generic .slider-nav .link-next:hover, .no-touch .slider-generic .flex-direction-nav .flex-next:hover { background-position: -837px -69px; } .slider-contact, .slider-contact .slide, .slider-contact .slider-clip { width: 460px; height: 353px; } .slider-generic ol { padding: 0; } .slider-contact .slides { height: 353px; } .slider-contact .slider-mask { background-position: 0 -417px; width: 460px; height: 353px; } .slider-generic .slider-paging a.current span, .slider-generic .slider-paging a.current:hover span { background-color: #e05333; } .slider-contact .slider-nav a { top: 162px; } .entry-actions { font-size: 0; } .entry-actions .btn { margin-right: 20px; } .section-intro-nav, .section-pricing-nav { height: 45px; } .section-intro-nav { background: url(../png/dotted-horizontal.png) 50% 0 repeat-x; } .intro-slider-nav { position: relative; top: -36px; } .intro-slider-nav li { float: left; width: 100px; padding: 0 20px; } .intro-slider-nav li a { font-size: 12px; line-height: 14px; text-transform: uppercase; color: #445361; text-decoration: none; display: block; } .no-touch .intro-slider-nav li a:hover, .intro-slider-nav li.current a { color: #e05333; } .hi-dpi .section-intro-nav { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .section-pricing-nav { position: relative; width: 100%; } .section-pricing-nav:before, .section-pricing-nav > .before, .section-pricing-nav:after, .section-pricing-nav > .after { content: ''; background-image: url(../png/dotted-horizontal.png); background-repeat: repeat-x; width: 1500px; height: 2px; position: absolute; top: 36px; } .section-pricing-nav:before, .section-pricing-nav > .before { right: 50%; margin-right: 376px; background-position: 100% 0; } .section-pricing-nav:after, .section-pricing-nav > .after { left: 50%; margin-left: 380px; background-position: 0 0; } .section-pricing-nav .ico-animated:after, .section-pricing-nav .ico-animated > .after { content: ''; width: 75px; height: 2px; background: url(../png/dotted-horizontal.png) 0 0 repeat-x; position: absolute; top: 76px; left: 80px; } .section-pricing-nav .ico-animated7:after, .section-pricing-nav .ico-animated7 > .after { display: none; } .hi-dpi .section-pricing-nav:before, .hi-dpi .section-pricing-nav > .before, .hi-dpi .section-pricing-nav:after, .hi-dpi .section-pricing-nav > .after, .hi-dpi .section-pricing-nav .ico-animated:after, .hi-dpi .section-pricing-nav .ico-animated > .after { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .pricing-nav-fixed .section-pricing { padding-bottom: 85px; } .pricing-nav-fixed .section-pricing-nav { width: 100%; position: fixed; top: 100px; left: 0; z-index: 10; } .pricing-nav-fixed .pricing-nav { padding-top: 0; } .pricing-nav-fixed .section-pricing-nav .section-nav-bg { background: rgba(252,249,242,.85); width: 5000px; height: 100px; position: absolute; top: -100px; left: 50%; margin: 0 0 0 -2500px; } .pricing-nav-fixed .pricing-nav li { position: relative; z-index: 5; } .pricing-nav-fixed .pricing-nav a { text-shadow: 0 0 8px #fcf9f2, 0 0 8px #fcf9f2, 0 0 8px #fcf9f2, 0 0 8px #fcf9f2, 0 0 8px #fcf9f2; } .pricing-nav-fixed .ico-animated-label { visibility: hidden; opacity: 0; } .pricing-nav-fixed .section-pricing-nav:before, .pricing-nav-fixed .section-pricing-nav > .before, .pricing-nav-fixed .section-pricing-nav:after, .pricing-nav-fixed .section-pricing-nav > .after { top: 0; } .col { float: left; text-align: left; } .col-1of3 { width: 300px; } .col-1of3 + .col-1of3 { margin: 0 0 0 40px; } .col-1of5 { width: 180px; } .col-1of5 + .col-1of5 { margin: 0 0 0 20px; } .col-1of4 { width: 230px; } .col-1of4 + .col-1of4 { margin: 0 0 0 20px; } .highlighted { color: #e05333; } .highlighted2 { color: #45907b; } .list-checked, .list-bulleted { line-height: 20px; } .list-checked li { background: url(../png/green-check.png) 0 6px no-repeat; padding: 0 0 10px 22px; } .list-checked-alt li { background-image: url(../png/brown-check.png); } .list-bulleted li { background: url(../png/li-faq.png) 10px 8px no-repeat; padding: 0 0 10px 22px; } .list-checked ul li:first-child { padding-top: 10px; background-position: 0 16px; } .hi-dpi .list-checked li { background-image: url(../png/green-check%402x.png); -webkit-background-size: 11px 9px; background-size: 11px 9px; } .hi-dpi .list-checked-alt li { background-image: url(../png/brown-check%402x.png); -webkit-background-size: 11px 9px; background-size: 11px 9px; } .hi-dpi .list-bulleted li { background-image: url(../png/li-faq%402x.png); -webkit-background-size: 5px 5px; background-size: 5px 5px; } .list-checked-large { font-size: 26px; line-height: 36px; } .list-checked-large li { background: url(../png/check-large.png) 0 11px no-repeat; padding: 0 0 24px 30px; } .hi-dpi .list-checked-large li { background-image: url(../png/check-large%402x.png); -webkit-background-size: 17px 16px; background-size: 17px 16px; } .ico-about-team, .ico-team-member, .ico-team-member-inner { background-image: url(../png/about-sprite-2019.png); background-repeat: no-repeat; } .hi-dpi .ico-about-team, .hi-dpi .ico-team-member, .hi-dpi .ico-team-member-inner { background-image: url(../png/about-sprite-2019%402x.png); -webkit-background-size: 1554px 420px; background-size: 1554px 420px; } .team-thumbs { width: 100%; display: flex; flex-flow: row wrap; justify-content: center; } .team-thumb { width: 114px; margin: 15px 25px; } .team-thumb img { display: block; } .team-thumb h3 { font-size: 22px; line-height: 24px; font-weight: normal; color: #e05333; } .team-thumb h3 small { display: block; font-size: 60%; line-height: 1.3; color: #8ac1b2; } .team-thumb p { font-size: 14px; line-height: 16px; color: #969391; text-transform: uppercase; padding: 0; } .team-thumb-image { margin: 0 0 10px; } .team-thumb-image .ico-team-member, .team-thumb-image .ico-team-member-inner { width: 114px; height: 141px; display: block; } .team-thumb-image .ico-team-member { margin: -27px auto 0; position: relative; } .team-thumb-image .ico-team-member-inner { opacity: 0; } .team-thumb:hover .ico-team-member-inner { opacity: 1; } .team-thumb-image .ico-dave { background-position: 0 -153px; } .team-thumb-image .ico-dave .ico-team-member-inner { background-position: 0 -2px; } .team-thumb-image .ico-steve { background-position: -638px -151px; } .team-thumb-image .ico-steve .ico-team-member-inner { background-position: -638px 0px; } .team-thumb-image .ico-bob { background-position: -959px -150px; } .team-thumb-image .ico-bob .ico-team-member-inner { background-position: -959px 1px; } .team-thumb-image .ico-george { background-position: -477px -152px; } .team-thumb-image .ico-george .ico-team-member-inner { background-position: -477px -1px; } .team-thumb-image .ico-kevin { background-position: -1118px -150px; } .team-thumb-image .ico-kevin .ico-team-member-inner { background-position: -1118px -1px; } .team-thumb-image .ico-cveti { background-position: -156px -153px; } .team-thumb-image .ico-cveti .ico-team-member-inner { background-position: -156px -1px; } .team-thumb-image .ico-gerrie { background-position: -1249px -151px; } .team-thumb-image .ico-gerrie .ico-team-member-inner { background-position: -1249px 0px; } .team-thumb-image .ico-marto { background-position: -316px -153px; } .team-thumb-image .ico-marto .ico-team-member-inner { background-position: -316px -4px; } .team-thumb-image .ico-annie { background-position: -798px -152px; } .team-thumb-image .ico-annie .ico-team-member-inner { background-position: -798px -1px; } .team-thumb-image .ico-teddy { background-position: -1279px -152px; } .team-thumb-image .ico-teddy .ico-team-member-inner { background-position: -1279px -1px; } .touch .team-thumb { cursor: pointer; } .slider-testimonials { width: 100%; } .slider-testimonials .slider-clip { width: 100%; position: relative; } .slider-testimonials .slides { height: 100%; } .slider-testimonials .slide { width: 100%; position: absolute; top: 0; left: 0; visibility: hidden; opacity: 0; } .slider-testimonials .slide-current { opacity: 1; z-index: 2; visibility: visible; } .slider-testimonials .slide-outgoing { visibility: visible; opacity: 0; } .slider-testimonials h5 { font-size: 22px; line-height: 24px; padding: 0 0 26px; } .slider-testimonials h5 span { color: #969391; } .slider-testimonials p { font-style: italic; color: #445361; } .slider-testimonials.flex-init .slide { visibility: visible; } .slider-testimonials .flex-control-nav { position: absolute; width: 100%; bottom: 0; left: 0; z-index: 5; } .slider-testimonials.flex-init .slider-clip { padding-bottom: 22px; } .slider-testimonials.flex-init .flex-prev, .slider-testimonials.flex-init .flex-next, .slider-testimonials .slider-nav a { display: none; } .flex-control-nav { font-size: 0; line-height: 0; text-align: center; } .flex-control-nav li { display: inline; } .flex-control-nav a { display: inline-block; vertical-align: top; width: 22px; height: 22px; position: relative; } .flex-control-nav a span { border-radius: 8px; background: #c4c7c6; width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; } .flex-control-nav a.flex-active span { background: #445361; } .slider-generic .flex-control-nav a.flex-active span { background: #e05333; } .slider-paging { font-size: 0; line-height: 0; text-align: center; } .slider-paging li { display: inline; } .slider-paging a { display: inline-block; vertical-align: top; width: 22px; height: 22px; position: relative; } .slider-paging a span { text-indent: -9999px; width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; border-radius: 8px; background: #c4c7c6; } .no-touch .slider-paging a:hover span { background: #b6b9b8; } .slider-paging a.current span, .no-touch .slider-paging a.current:hover span { background: #445361; } .nav-tabbed { text-align: center; } .nav-tabbed-inner { background: #f2ecce; border-radius: 9px; padding: 2px; height: 37px; position: relative; font-size: 0; display: inline-block; vertical-align: top; position: relative; z-index: 5; } .nav-tabbed li { display: inline-block; vertical-align: top; position: relative; height: 37px; } .nav-tabbed li + li { margin: 0 0 0 10px; } .nav-tabbed a, .nav-tabbed label { display: inline-block; vertical-align: top; font-size: 17px; line-height: 37px; text-transform: uppercase; color: #445361; text-decoration: none; padding: 0 20px; position: relative; z-index: 3; overflow: hidden; cursor: pointer; } .nav-tabbed label input { width: 13px; height: 13px; position: absolute; top: 0; left: -50px; } .nav-tabbed .current a, .nav-tabbed .current label { color: #fff; } .nav-tabbed .unhover a, .nav-tabbed .unhover label { color: #e05333; } .nav-tabbed-active { background: #e05333; border-radius: 7px; height: 37px; position: absolute; top: 2px; left: 2px; } .nav-tabbed-hover { background: #e2d59a; } .nav-tabbed-extended { margin-bottom: 38px; } .nav-tabbed-extended li small { width: 100%; position: absolute; top: 45px; left: 0; text-align: center; font-size: 16px; line-height: 18px; color: #8e959b; } .nav-tabbed-extended li.current small { color: #e05333; } .section-nav { width: 100%; } .section-nav .nav-tabbed { background: transparent; } .section-nav .nav-tabbed:before, .section-nav .nav-tabbed:after, .section-nav .nav-tabbed > .before, .section-nav .nav-tabbed > .after { content: ''; background-image: url(../png/dotted-horizontal.png); width: 1500px; height: 2px; position: absolute; top: 19px; } .section-nav .nav-tabbed:before, .section-nav .nav-tabbed > .before { left: 100%; background-position: 0 0; } .section-nav .nav-tabbed:after, .section-nav .nav-tabbed > .after { right: 100%; background-position: 100% 0; } .hi-dpi .section-nav .nav-tabbed:before, .hi-dpi .section-nav .nav-tabbed > .before, .hi-dpi .section-nav .nav-tabbed:after, .hi-dpi .section-nav .nav-tabbed > .after { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .anchors-fix .section-nav { width: 100%; position: fixed; top: 80px; left: 0; z-index: 10; background: transparent; padding: 0; } .hi-dpi.anchors-fix .section-nav { background: transparent; } .section-nav-bg { background: rgba(252,249,242,0); width: 100%; height: 0; position: absolute; left: 0; z-index: 1; } .anchors-fix .section-nav-bg { height: 100px; background: rgba(252,249,242,.85); top: -80px; left: 0; width: 100%; display: block; position: absolute; z-index: 2; } .anchors-fix .section-description { background: #fcf9f2; } .anchors-fix .section .section-description { padding-bottom: 76px; } .anchors-fix .section-samples .section-description { padding-bottom: 144px; } .products { width: 1000px; position: relative; margin: 0 0 0 -10px; overflow: hidden; } .product { float: left; width: 230px; height: 255px; margin: 0 0 0 20px; } .product.product-small { height: auto; } .product a { text-decoration: none; } .product h4 { font-size: 20px; line-height: 20px; color: #445361; } .product h4 a { color: #445361; } .product h5 { font-size: 14px; line-height: 20px; text-transform: uppercase; color: #969391; } .product h5 a { color: #969391; } .product-image { padding: 0 0 5px; } .product-image a { display: block; background: #f6f0e4; border-radius: 5px; padding: 4px; } .no-touch .product-image a:hover { background-color: #ecddca;} .product-image img { display: block; border: 1px solid #dec6a8; border-radius: 3px; } .no-touch .product-image a:hover img { border-color: #c69c6d; } .section-samples.section-bottom-border .product { height: 100%; } /* Products Secondary */ .products-secondary { padding: 40px 0; margin: 0 -10px; } .products-secondary .product { width: 33.33%; height: auto; margin: 0; padding: 0 10px; box-sizing: border-box; } .products-secondary .product-image { padding-bottom: 15px; } .products-secondary .product-image img { width: 100%; height: auto; } .sample-frame { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .sample-wrapper { background: #fff; padding: 0; min-height: 100%; overflow: visible; } .sample-wrapper .shell { padding: 50px 0 0; } .testimonials { padding: 0 0 12px; } .testimonial h4 { font-size: 30px; line-height: 36px; padding: 0 0 10px; } .testimonial h4 span { color: #969391; } .testimonial h4 a { color: #969391; } .testimonial h4 .ico-person { top: 13px; } .testimonial p { font-style: italic; } .testimonial-meta{ } .form-quote { background: url(../png/dotted-horizontal.png) 50% 0 repeat-x; border-bottom: 1px solid #d7d8d5; margin: 0 0 80px; } .form-quote p { font-size: 14px; line-height: 20px; padding: 0 0 20px; } .form-quote small { display: block; font-size: 11px; line-height: 23px; color: #8e959b; } .form-quote small a { color: #8e959b; } .form-quote .nav-tabbed { top: -20px; position: relative; display: inline-block; vertical-align: top; padding: 0 12px; background: #fcf9f2; } .form-quote .form-body { width: 602px; margin: 0 auto; } .form-quote .form-actions { position: relative; margin: 0 0 -30px; top: 20px; } .hi-dpi .form-quote { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .form-actions { z-index: 101; } .form-body { position: relative; } .form-row { min-height: 40px; width: 100%; overflow: hidden; padding-bottom: 24px; overflow: visible; } .form-row small { text-align: left; } .form-row--dropdow { overflow: visible; } .form-row.section-centered > .form-controls { display: inline-block; width: auto; } .form-row-subscribe { display: none; padding-bottom: 0; position: relative; top: -10px; } .form-row-subscribe .form-controls { background: #f6f0e4; border-radius: 5px; padding: 3px; text-align: left; width: auto; } .form-row-subscribe .form-message { border: 1px solid #e8dfbf; border-radius: 3px; font-size: 12px; padding: 10px; } .form-row-subscribe .form-message-subscribe { display: block; } .form-row-subscribe .form-message-thanks { display: none; } .form-row-subscribe .checkbox { margin-top: 10px; margin-left: 10px; } .form-actions-inner { display: inline-block; vertical-align: top; padding: 0 10px; background: #fcf9f2; } .field, .textarea { background: #fff; border: 1px solid #e8dfbf; border-radius: 3px; box-shadow: 0 0 0 3px #f6f0e4; margin: 3px; display: block; line-height: 22px; padding: 5px 10px; width: 574px; color: #445361; -webkit-appearance: none; } .field { height: 22px; } .field-s { width: 262px; } .field-xs { width: 172px; } .field-m { width: 382px; } .textarea { padding: 6px 10px; height: 220px; } .field.select { height: 34px; width: 596px; -webkit-appearance: none; } .field-s.select { width: 284px; } .field-xs.select { width: 194px; } .field-error, .textarea-error { border-color: #cd4c2f !important; } .form-alert-hidden { display: none; } .form-controls { width: 100%; display: block; position: relative; min-height: 37px; } .form-row .col-1of2 { width: 290px; float: left; } .form-row .col-1of2 + .col-1of2 { margin-left: 22px; } .notice { height: 14px; position: absolute; bottom: -18px; left: 4px; text-align: left; } .form-response { display: none; } .ico-form-loading { width: 48px; height: 48px; background: url(../gif/loading.gif) no-repeat 0 0; display: block; position: absolute; top: -54px; left: 50%; margin-left: -24px; display: none; } .hi-dpi .ico-form-loading { background-position: 50%; -webkit-background-size: 24px 24px; background-size: 24px 24px; } .form-sending .form-row, .form-sending .form-group { opacity: 0.3; filter:alpha(opacity=30); } .form-sending .field-section-holder .field-holder { visibility: hidden; } .form-sending .ico-form-loading { display: block; } .form-sending-overlay { display: none; position: absolute; top: -80px; left: 0; background: #fcf9f2; width: 100%; height: 100%; z-index: 6; opacity: 0.5; filter:alpha(opacity=50); } .form-order .form-sending-overlay { top: -30px; padding-bottom: 30px; left: -50px; padding-right: 80px } .shadow-field, .shadow-field-s, .shadow-textarea, .shadow-btn-upload, .shadow-increment-field { background: #f6f0e4; padding: 3px; overflow: hidden; } .shadow-field-s { float: left; } .shadow-field .field, .shadow-field-s .field-s, .shadow-textarea .textarea, .shadow-btn-upload .btn-upload, .shadow-increment-field .increment-field { margin: 0; } .shadow-increment-field { margin: 0 auto; } .shadow-filled { background: #ecddca; } .shadow-filled .field, .shadow-filled .textarea { border-color: #c69c6d; color: #445361; } .custom-upload-row { width: 100%; height: 40px; overflow: hidden; } .custom-upload { height: 40px; position: relative; overflow: hidden; float: left; margin: 0 20px 0 0; } .custom-upload input { height: 40px; position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; } .section .upload-src { font-size: 20px; line-height: 40px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height: 40px; text-align: left; padding: 0; } .order-terms h5 { font-size: 14px; line-height: 18px; text-transform: uppercase; } .order-terms p { font-size: 12px; line-height: 17px; padding: 0 0 12px; } .form-store-subscribe { margin: 0 0 66px; } .form-order { background: url(../png/dotted-horizontal.png) 50% 0 repeat-x; border-bottom: 1px solid #d7d8d5; margin: 0 0 48px; } .form-order .form-actions { position: relative; margin: 0; top: 25px; } .form-order .form-actions small, .form-order .form-row small { display: block; font-size: 11px; line-height: 23px; color: #8e959b; } .form-order .form-actions small a, .form-order .form-row small a { color: #8e959b; } .form-customization .form-row-others, .form-order .form-row-others { display: none; } .form-customization .form-row-others-selected, .form-order .form-row-others-selected { display: block; } .form-order .form-row-subscribe { margin-top: 40px; } .hi-dpi .form-order { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .form-label-placeholder { line-height: 22px; padding: 5px 10px; cursor: text; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 0; text-align: left; font-size: 20px; color: #b0b0b0; z-index: 2; } .form-group { width: 730px; margin: 0 auto; } .form-group p { font-size: 14px; line-height: 20px; } .form-group-title { background: url(../png/dotted-horizontal.png) 50% repeat-x; font-size: 26px; line-height: 30px; text-transform: uppercase; margin: 0 0 18px; } .form-group-title > span { display: inline-block; background: #fcf9f2; padding: 0 12px; vertical-align: top; } .hi-dpi .form-group-title { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .form-order .order-type { padding: 0 25px; background: #fcf9f2; position: relative; top: -28px; } .form-order .form-row { width: 602px; margin: 0 auto; } .form-totals-container { width: 250px; position: absolute; top: 406px; right: 30px; z-index: 10; } .form-totals-container .form-group-title { display: none; } .form-totals { background: #f6f0e4; width: 242px; padding: 4px; border-radius: 7px; position: relative; } .form-totals h2 { font-size: 46px; text-transform: uppercase; line-height: 46px; padding: 0 0 6px; } .form-totals h2.highlighted { font-size: 50px; line-height: 50px; } .form-totals h2 sup { display: inline-block; vertical-align: top; font-size: 27px; line-height: 34px; } .form-totals h3 { font-size: 30px; line-height: 38px; } .form-totals h3 sup { font-size: 15px; display: inline-block; vertical-align: top; line-height: 25px; } .form-totals h4 { font-size: 14px; line-height: 16px; text-transform: uppercase; padding: 10px 0 0; border-top: 1px solid #e5dbb6; } .form-totals h4.highlighted { border: 0 none; padding: 4px 0 0; } .form-totals ul { font-size: 14px; line-height: 16px; padding: 6px 0 7px; } .form-totals ul li { padding: 0 10px 5px; text-align: left; text-transform:capitalize; } .form-totals li small { font-size: 10px; text-transform: none; } .form-totals .right { float: right; } .form-totals-inner { background: #f7f2e0; border: 1px solid #e5dbb6; border-radius: 5px; width: 220px; padding: 10px; } .form-totals-container .hand { background-position: -710px -782px; width: 119px; height: 57px; position: absolute; top: -36px; right: 31px; z-index: 2; } .form-totals-container .arm { background: url(../png/arm.png) 50% repeat-x; width: 2000px; height: 9px; position: absolute; top: -33px; margin-left: -31px; left: 100%; } .form-totals-fixed { position: fixed; top: 112px; } .hi-dpi .form-totals-container .arm { background-image: url(../png/arm%402x.png); -webkit-background-size: 10px 9px; background-size: 10px 9px; } .checkbox { display: inline-block; vertical-align: top; font-size: 14px; line-height: 20px; margin: 0 0 10px; } .custom-checkbox { display: inline-block; vertical-align: top; background: #fff url(../png/checkbox.png) 1px -20px no-repeat; width: 12px; height: 12px; border: 1px solid #ccc; border-radius: 3px; position: relative; overflow: hidden; cursor: pointer; top: 3px; margin: 0 6px 0 0; } .custom-checkbox input { width: 13px; height: 13px; position: absolute; top: 0; left: -50px; } .custom-checkbox.checked { background-position: 1px 2px; } .hi-dpi .custom-checkbox { background-image: url(../png/checkbox%402x.png); -webkit-background-size: 11px 9px; background-size: 11px 9px; } .alert { padding: 10px 10px 12px 10px; text-align: left; width: 500px; margin: auto; border-radius: 10px; margin-bottom: 20px; } .alert ul { padding-left: 20px; line-height: 1.4; } .alert-error { background: #e05333; color: #fff; } .email-software .cols { width: 510px; margin: 0 auto; overflow: hidden; text-align: left; padding: 0; } .email-software .cols ~ .cols { padding: 0 0 20px; } .email-software .col-1of2 { float: left; width: 238px; } .email-software .col-1of2 + .col-1of2 { float: right; } .email-software .checkbox { display: block; } .order-type h4 { font-size: 46px; line-height: 50px; text-transform: uppercase; padding: 0 0 8px; } .order-type p { padding: 0 0 16px; } .order-type p a { color: #45907b; } .order-type .checked p a { color: #e05333; } .order-type .radio-container { float: left; width: 354px; height: 294px; position: relative; margin-left: -8px; z-index: 5; } .order-type .radio-container + .radio-container { float: right; margin: 0 -8px 0 0; } .order-type .radio { display: block; width: 354px; height: 294px; position: relative; z-index: 5; } .order-type .radio input { width: 13px; height: 13px; position: absolute; top: 0; left: -5000px; } .order-type .radio-container.checked { z-index: 4; } .box-order { width: 354px; height: 294px; position: relative; } .box-order .box-front, .box-order .box-back { width: 314px; height: 272px; padding: 22px 20px 0; position: absolute; top: 0; left: 0; background-position: 0 0; background-repeat: no-repeat; } .box-order .list-checked { text-align: left; padding-left: 32px; font-size: 14px; } .box-order .box-back h4 { opacity: .2; position: relative; z-index: 2; } .box-order .box-back ul { position: relative; z-index: 2; } .box-order .box-back-bg { width: 341px; height: 279px; position: absolute; top: 5px; left: 4px; } .box-order .box-front { z-index: 4; } .box-order .box-back { z-index: 1; opacity: 0; } .box-reveal .box-front { z-index: 2; opacity: 0; } .box-reveal .box-back { z-index: 4; opacity: 1; } .box-reveal.box-order .box-back-hand { opacity: 0; } .box-reveal.box-order .box-back-shadow { opacity: 1; } .box-design-coding .box-front, .box-design-coding .box-back, .box-only-coding .box-front, .box-only-coding .box-back, .box-order .box-back-bg, .box-order .box-back-girl, .box-order .box-back-hand, .box-order .box-back-arm, .box-order .box-back-shadow, .form-totals-container .hand { background-image: url(../png/order-sprite.png); background-repeat: no-repeat; } .box-design-coding .box-front, .box-design-coding .box-back { background-position: 0 -502px; } .checked .box-design-coding .box-front, .checked .box-design-coding .box-back { background-position: 0 -798px; } .box-only-coding .box-front, .box-only-coding .box-back { background-position: -355px -502px; } .checked .box-only-coding .box-front, .checked .box-only-coding .box-back { background-position: -355px -798px; } .box-order .box-back-bg { background-position: -710px -502px; } .hi-dpi .box-design-coding .box-front, .hi-dpi .box-design-coding .box-back, .hi-dpi .box-only-coding .box-front, .hi-dpi .box-only-coding .box-back, .hi-dpi .box-order .box-back-bg, .hi-dpi .box-order .box-back-girl, .hi-dpi .box-order .box-back-hand, .hi-dpi .box-order .box-back-arm, .hi-dpi .box-order .box-back-shadow, .hi-dpi .form-totals-container .hand { background-image: url(../png/order-sprite%402x.png); -webkit-background-size: 1052px 1093px; background-size: 1052px 1093px; } .box-order .box-back-girl { width: 181px; height: 250px; position: absolute; top: 22px; opacity: 0; } .box-order .box-back-hand { width: 10px; height: 21px; position: absolute; top: 143px; z-index: 6; visibility: hidden } .box-order .box-back-arm { width: 77px; height: 54px; position: absolute; top: 165px; right: -62px; z-index: 7; visibility: hidden; } .box-order .box-back-shadow { width: 181px; height: 250px; position: absolute; top: 22px; opacity: 0; } .checked .box-order .box-back-hand { visibility: visible; } .checked .box-order .box-back-girl { opacity: 1; } .box-design-coding .box-back-girl { background-position: 0 0; left: 20px; } .box-design-coding .box-back-hand { background-position: -546px -416px; left: -1px; } .box-design-coding .box-back-shadow { background-position: -728px 0; left: 20px; } .box-design-coding.box-frame1 .box-back-girl { background-position: -182px 0; } .box-design-coding.box-frame2 .box-back-girl, .box-design-coding.box-frame4 .box-back-girl { background-position: -364px 0; } .box-design-coding.box-frame3 .box-back-girl { background-position: -546px 0; } .box-only-coding .box-back-girl { background-position: 0 -251px; right: 20px; } .box-only-coding .box-back-hand { background-position: -557px -416px; right: -1px; } .box-only-coding .box-back-arm { background-position: -546px -251px; } .box-only-coding .box-back-shadow { background-position: -728px -251px; right: 20px; } .box-only-coding.box-frame1 .box-back-girl, .box-only-coding.box-frame3 .box-back-girl { background-position: -182px -251px; } .box-only-coding.box-frame2 .box-back-girl { background-position: -364px -251px; } .box-only-coding.box-frame1 .box-back-arm { visibility: visible; } .box-only-coding.box-frame2 .box-back-arm { background-position: -546px -306px; visibility: visible; } .box-only-coding.box-frame3 .box-back-arm { background-position: -546px -361px; visibility: visible; } .box-reveal.box-order .box-back-girl, .box-reveal.box-order .box-back-hand, .box-reveal.box-order .box-back-arm { opacity: 0; } .custom-increment { width: 70px; height: 70px; position: relative; margin: 0 auto 24px; overflow: hidden; padding: 0 26px; } .custom-increment .link-less, .custom-increment .link-more { background: #f2ecce; width: 22px; height: 22px; border-radius: 12px; position: absolute; top: 50%; margin-top: -11px; } .custom-increment .link-less { left: 0; } .custom-increment .link-more { right: 0; } .custom-increment .ico-less, .custom-increment .ico-more { width: 0; height: 0; overflow: hidden; border-width: 4px 5px 5px; border-style: solid; display: inline-block; vertical-align: top; top: 6px; position: relative; } .custom-increment .ico-less { border-color: transparent #a88d79 transparent transparent; left: -4px; } .custom-increment .ico-more { border-color: transparent transparent transparent #a88d79; right: -4px; } .increment-field-outer { background: #f7f2e0; border: 1px solid #e8dfbf; height: 50px; width: 62px; padding: 6px 0; border-radius: 60px; box-shadow: 0 0 0 3px #f6f0e4; margin: 3px auto; display: block; overflow: hidden; position: relative; } .increment-field { font-size: 46px; line-height: 50px; text-align: center; color: #445361; text-indent: -2px; background: transparent; border: 0; width: 52px; height: 50px; position: relative; left: 0; } .field-changed { left: -20px; opacity: 0; } .expandables { padding: 10px 0 0; } .expandable { padding: 0 0 10px 16px; position: relative; } .expandables .expandable-title { font-size: 16px; line-height: 25px; padding: 0; font-weight: normal; cursor: pointer; display: inline-block; vertical-align: top; } .expanded .expandable-title { font-weight: bold; } .expandable-body { width: 100%; display: none; } .expandable-body p { padding: 0; } .expandable-body ol { line-height: 20px; padding: 4px 0 10px 30px; } .expandable-body .list-checked, .expandable-body .list-bulleted { padding: 4px 0 10px; } .expandable-body ul li, .expandable-body ol li { margin-top: 6px; } .expandable .ico-arrow { background: url(../png/arrow-expandable.png) 0 0 no-repeat; width: 8px; height: 8px; position: absolute; top: 8px; left: 0; } .expandable-alt { background-image: url(../png/dotted-horizontal.png); background-position: bottom; background-repeat: repeat-x; padding: 20px 0; } .expandable-alt:last-of-type { background: none; } .expandable-alt .expandable-body { font-size: 16px; } .expandable-alt .expandable-title { display: flex; justify-content: space-between; font-weight: bold; font-size: 20px; } .expandable-alt .expandable-title span { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; background: #fcfaf4; border-radius: 50%; border: 1px solid #e8dfbf; transition: transform .3s ease; flex-shrink: 0;} .expandable-alt .ico-arrow { right: 0; left: auto; position: static; transform: rotate( 90deg ); transition: transform .5s ease; } .expandable-alt.expanded .expandable-title span { background: #e8dfbf; } .expandable-alt.expanded .ico-arrow { background-image: url(../png/arrow-expandable-white.png); transform: rotate( 270deg ); } .hi-dpi .expandable .ico-arrow { background-image: url(../png/arrow-expandable%402x.png); -webkit-background-size: 8px 17px; background-size: 8px 17px; } .hi-dpi .expandable-alt .ico-arrow { background-image: url(../png/arrow-expandable%402x.png); } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.2); z-index: 100; overflow: hidden; visibility: hidden; } .popup .popup-container { background: #fff; border-radius: 24px; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); overflow: auto; opacity: 0; max-height: 80%; } .popup-absolute { position: absolute; } .popup h2 { font-size: 54px; line-height: 54px; text-transform: uppercase; padding: 0 0 12px; } .popup h4 { font-size: 24px; line-height: 24px; padding: 0 0 12px; } .popup h5, #js-popup h5 { font-size: 24px; line-height: 24px; padding: 0 0 8px; } .popup p { line-height: 25px; padding: 0 0 15px; } .popup .list-checked { font-size: 14px; } .popup .list-checked + h5 { margin-top: 20px; } .popup .section-head { padding: 26px 0 2px; margin: 0 30px; background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; text-align: center; } .popup .section-body { padding: 18px 30px; } .popup .section-body p { display: none; } .popup-terms .section { padding: 0; } .popup-terms .section-body { text-align: left; } .popup-terms .section-body p { display: block; } .popup-terms .section-body h4 { font-family: 'Trebuchet MS', arial, helvetica, sans-serif; font-size: 17px; } .popup-terms .section-body ul { list-style-type: none; padding-bottom: 17px; } .popup-terms .section-body ul li { background: url(../png/green-check.png) 0 6px no-repeat; padding: 0 0 10px 22px; } .popup-terms .section-body ul .hi-dpi .list-checked li { background-image: url(../png/green-check%402x.png); -webkit-background-size: 11px 9px; background-size: 11px 9px; } .hi-dpi .popup .section-head { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .popup .col-1of2 { width: 346px; } .popup .col-1of3 { width: 218px; } .popup .col-1of3 + .col-1of3 { margin: 0 0 0 20px; } .popup .col-1of4 { width: 168px; padding: 0 0 0 10px; } .popup .close { background-position: -385px -24px; width: 29px; height: 31px; position: absolute; top: 12px; right: 18px; } .visible-popup { visibility: visible; z-index: 100; } .show-popup .popup-container { opacity: 1; border: 3px solid #d7d8d5; } @media screen and (max-width: 767px) { .popup .popup-container { width: 80%; min-width: 300px; } } .partners { width: 1000px; position: relative; overflow: hidden; margin: 0 0 0 -20px; text-align: left; padding: 0 0 60px; } .partner { width: 480px; float: left; margin: 0 0 20px 20px; overflow: hidden; } .partner h3 { font-size: 46px; line-height: 48px; text-transform: uppercase; } .partner p { padding: 0 0 10px; } .partner-inner { background: #f7f2e0; border: 1px solid #dec6a8; border-radius: 3px; margin: 4px; box-shadow: 0 0 0 4px #f6f0e4; } .partner-head { padding: 16px 20px 14px; } .partner-body { padding: 0 20px 10px 190px; position: relative; min-height: 205px; } .partner-logo { position: absolute; top: 6px; left: 20px; border-radius: 4px; } .link-external { display: inline-block; vertical-align: top; padding-right: 13px; background: url(../png/arrow-external.png) 100% 10px no-repeat; color: #e05333; text-decoration: none; } .hi-dpi .link-external { background-image: url(../png/arrow-external%402x.png); -webkit-background-size: 8px 8px; background-size: 8px 8px; } .pricing-boxes { width: 1000px; position: relative; margin: 0 0 0 -20px; overflow: hidden; text-align: left; } .pricing-box { width: 480px; float: left; margin: 0 0 40px 20px; overflow: hidden; } .pricing-box h3 { font-size: 46px; line-height: 48px; text-transform: uppercase; letter-spacing: -.5px; } .pricing-box p { padding: 0 0 12px; } .pricing-box .list-checked { font-size: 14px; } .pricing-box-inner { border: 1px dashed #dec6a8; border-radius: 10px; } .pricing-box-head { padding: 24px 10px 12px 29px; } .pricing-box-body { padding: 0 10px 0 29px; position: relative; z-index: 2; min-height: 285px; } .pricing-box-foot { padding: 0 29px 34px; min-height: 102px; position: relative; } .pricing-box-foot .btn { position: absolute; bottom: 30px; left: 26px; } .pricing-box-primary .pricing-box-inner { border-style: solid; border-color: #dec6a8; border-radius: 3px; margin: 4px; box-shadow: 0 0 0 4px #f6f0e4; background: #f7f2e0; } .pricing-box-primary .pricing-box-head { padding: 20px 10px 12px 25px; } .pricing-box-primary .pricing-box-body { padding: 0 25px; } .pricing-box-primary .pricing-box-foot { padding: 0 25px 30px; } .pricing-box-primary .pricing-btns li + li { border-color: #5aa18e; } .pricing-box-primary .pricing-btn { background-color: #8ac1b2; color: #43756e; } .box-current .pricing-box-inner { border-color: #8ac1b2; border-width: 2px; } .box-current .pricing-box-head { padding: 23px 9px 12px 28px; } .box-current .pricing-box-body { padding: 0 9px 0 28px; } .box-current .pricing-box-foot { padding: 0 28px 33px; } .box-current.pricing-box-primary .pricing-box-inner { border-style: dashed; } .box-current.pricing-box-primary .pricing-box-head { padding: 19px 9px 12px 24px; } .box-current.pricing-box-primary .pricing-box-body { padding: 0 24px; } .box-current.pricing-box-primary .pricing-box-foot { padding: 0 24px 29px; } .pricing-box-alt { width: 253px; float: left; overflow: hidden; background: #fcfaf4; border-radius: 10px; padding: 40px 30px; margin: 0 0 2px 20px; box-shadow: 1px 1px 0 #e7debc; margin-bottom: 20px; } .pricing-box-alt h3 { font-size: 32px; text-transform: uppercase; letter-spacing: -.5px; font-weight: 400; font-family: 'GothamCondensed', arial, sans-serif; } .pricing-box-alt h3 a { text-decoration: none; } .pricing-box-alt p { padding: 0 0 12px; } .pricing-box-alt .list-checked { font-size: 14px; } .pricing-box-alt .list-checked li { padding-bottom: 5px; } .pricing-box-alt-inner { border-radius: 10px; } .pricing-box-alt-head { border-bottom: 1px dashed #dec6a8; padding-bottom: 24px; } .pricing-box-alt-head p { padding-bottom: 0; font-size: 14px; } .pricing-box-alt-body { padding: 26px 0; border-bottom: 1px dashed #dec6a8; } .pricing-box-alt-foot { padding-top: 26px; display: flex; justify-content: space-between; } .pricing-box-alt-foot p { font-size: 26px; font-family: 'GothamCondensed', Arial, sans-serif; color: #e05333; padding-bottom: 0; } .pricing-box-alt-foot p + p { font-size: 16px; } .pricing-box-alt-foot span { background: #50907b; border-radius: 6px; color: #fff; font-size: 36px; font-family: Bryant, sans-serif; padding: 0 18px; display: flex; align-items: center; } .pricing-box-alt-full { width: 640px; margin: 0 auto 2px; float: none; } .pricing-box-alt-full .list-checked { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .pricing-box-alt-full .pricing-box-alt-foot { justify-content: flex-start; } .pricing-box-alt-full .pricing-box-alt-foot div { padding-right: 13px; } .pricing-btns { width: 145px; position: absolute; top: 0; left: 30px; font-size: 0; line-height: 0; z-index: 3; } .pricing-btns li { width: 145px; position: relative; } .pricing-btns li + li { border-top: 1px solid #e5dbb6; } .pricing-btns li:first-of-type a { border-radius: 5px 5px 0 0; } .pricing-btns li:last-of-type a { border-radius: 0 0 5px 5px; } .pricing-btns li:only-child a { border-radius: 5px; } .pricing-btn { display: block; background: #f7f2e0; font-size: 10px; line-height: 32px; text-transform: uppercase; color: #9e784a; text-decoration: none; overflow: hidden; width: 100%; } .pricing-btn strong { float: left; font-size: 20px; width: 25px; text-align: center; } .pricing-btn strong.right { float: right; width: auto; padding: 0 10px 0 0; } .pricing-btn sup { display: inline-block; vertical-align: top; font-size: 10px; line-height: 24px; padding: 0 2px 0 0; } .no-touch .pricing-btn:hover { background: #e05333; color: #fff; } .pricing-tip { background: #e05333; font-size: 10px; line-height: 20px; position: absolute; top: 50%; left: 152px; white-space: nowrap; margin: -10px 0 0; border-radius: 4px; padding: 0 9px; text-transform: uppercase; color: #fff; visibility: hidden; opacity: 0; } .pricing-tip .arrow { width: 0; height: 0; overflow: hidden; border-width: 4px 3px; border-style: solid; border-color: transparent #e05333 transparent transparent; position: absolute; top: 50%; right: 100%; margin: -4px 0 0; } .no-touch .pricing-btns li:hover .pricing-tip { visibility: visible; opacity: 1; } .ico-pricing { background-image: url(../png/pricing-sprite.png); background-repeat: no-repeat; position: absolute; } .ico-pricing-design { background-position: 0 0; width: 199px; height: 178px; bottom: 18px; right: 27px; } .ico-pricing-coding { background-position: -200px 0; width: 200px; height: 171px; bottom: 22px; right: 19px; } .ico-pricing-responsive { background-position: -401px 0; width: 172px; height: 198px; bottom: 29px; right: 22px; } .ico-pricing-mailchimp { background-position: 0 -199px; width: 197px; height: 180px; bottom: 30px; right: 17px; } .ico-pricing-campaignmonitor { background-position: -198px -199px; width: 173px; height: 174px; bottom: 11px; right: 19px; } .ico-pricing-accessibility { background-position: -608px 0; width: 226px; height: 190px; bottom: 11px; right: 19px; } .ico-pricing-darkmode { background-position: -617px -213px; width: 234px; height: 168px; bottom: 11px; right: 19px; } .ico-pricing-other { background-position: -372px -199px; width: 183px; height: 174px; bottom: 21px; right: 25px; } .hi-dpi .ico-pricing { background-image: url(../png/pricing-sprite%402x.png); -webkit-background-size: 850px 380px; background-size: 850px 380px; } .platform { font-size: 11px; color: #969391; } .row-devices { background-position: -784px -570px; width: 172px; height: 122px; position: relative; margin: 20px auto 40px; } .row-devices .device-strip { background-image: url(../png/bg-testing.png); background-repeat: repeat-x; width: 1500px; height: 72px; position: absolute; top: 26px; } .row-devices .device-strip-left { background-position: 100% 0; right: 162px; } .row-devices .device-strip-right { background-position: 0 0; left: 162px; } .hi-dpi .row-devices .device-strip { background-image: url(../png/bg-testing%402x.png); -webkit-background-size: 411px 72px; background-size: 411px 72px; } .section-services-generic .col-1of2 p { max-width: 320px; } .section-services-generic .col-1of2 p a { color: #e05333; } .col-consultation { float: right; } .form-consultation { margin: 0 0 0 auto; position: relative; width: 410px; height: 490px; padding: 20px 22px 0 23px; } .form-consultation-big { height: 635px;; } .form-consultation:after { content: ''; background: url(../png/box-consultation.png) 50% no-repeat; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .hi-dpi .form-consultation:after { background-image: url(../png/box-consultation%402x.png); -webkit-background-size: 453px 396px; background-size: 453px 396px; } .form-consultation-big:after { background-image: url(../png/box-consultation-big.png); } .hi-dpi .form-consultation-big:after { background-image: url(../png/box-consultation-big%402x.png); -webkit-background-size: 453px 645px; background-size: 453px 645px; } .form-consultation h4 { font-size: 30px; text-transform: uppercase; padding: 0 0 16px; } .form-consultation .form-row { padding-bottom: 10px; } .form-consultation .form-recaptcha { padding-bottom: 17px; } .form-consultation .col-1of2 { width: 200px; } .form-consultation .col-1of2 ~ .col-1of2 { float: right; margin: 0; } .form-consultation .form-head, .form-consultation .form-body, .form-consultation .form-message, .form-consultation .form-actions { position: relative; z-index: 3; } .form-consultation .form-actions { margin-top: 10px; text-align: center; } .form-consultation .textarea { height: 100px; width: 382px; } .form-consultation .form-row-subscribe { top: 0; min-height: 0; } .form-consultation .form-row-subscribe .form-controls { height: auto; min-height: 0; overflow: hidden; } .form-consultation .form-row-subscribe .checkbox { margin: 3px; } .form-consultation .form-message { padding: 10px 0; text-align: center; } .form-consultation .form-message p { font-size: 15px; padding: 0; max-width: none; } .form-consultation .form-mascot { background: url(../png/consultation-mascot.png) 50% no-repeat; width: 180px; height: 250px; position: absolute; top: 27px; left: -150px; } .form-consultation .field-section-holder .field-holder-upload { align-items: flex-start; } .form-consultation .field-section-holder .field-holder-upload p, .form-consultation .field-section-holder .field-holder-upload small { width: 270px; margin: 0 auto; padding-left: 50px; } .form-consultation .field-section-holder .field-holder-upload p:before { position: absolute; left: 0; margin-right: 17px; } .hi-dpi .form-consultation .form-mascot { background-image: url(../png/ico-mascot-sketch%402x.png) !important; -webkit-background-size: 145px 228px; background-size: 145px 228px; } .page-email-template-from-scratch .form-consultation .form-mascot { background-image: url(../png/ico-mascot-scratch.png); width: 139px; height: 227px; left: -127px; z-index: 3; } .hi-dpi .page-email-template-from-scratch .form-consultation .form-mascot { background-image: url(../png/ico-mascot-scratch%402x.png); -webkit-background-size: 139px 227px; background-size: 139px 227px; } .page-email-template-from-scratch .products .product { height: 100%; } .page-psd-sketch-to-html-email .form-consultation .form-mascot, .page-psd-sketch-to-html-email .form-consultation .form-mascot, .page-free-email-testing .form-consultation .form-mascot, .page-first-order-free .form-consultation .form-mascot, .page-salesforce-pardot-email-templates .form-consultation .form-mascot, .page-marketo-email-templates .form-consultation .form-mascot, .page-braze-email-templates .form-consultation .form-mascot, .page-rasa-email-templates .form-consultation .form-mascot, .page-hubpost-email-templates .form-consultation .form-mascot { background-image: url(../png/ico-mascot-sketch.png); width: 145px; height: 228px; left: -120px; z-index: 4; } .hi-dpi .page-psd-sketch-to-html-email .form-consultation .form-mascot, .hi-dpi .page-first-order-free .form-consultation .form-mascot, .hi-dpi .page-email-software-integration .form-consultation .form-mascot { background-image: url(../png/ico-mascot-sketch%402x.png); -webkit-background-size: 145px 228px; background-size: 145px 228px; } .page-responsive-html-email .form-consultation .form-mascot, .page-interactive-emails .form-consultation .form-mascot { background-image: url(../png/ico-mascot-responsive.png); width: 139px; height: 219px; left: -132px; z-index: 3; } .hi-dpi .page-responsive-html-email .form-consultation .form-mascot, .hi-dpi .page-interactive-emails .form-consultation .form-mascot { background-image: url(../png/ico-mascot-responsive%402x.png); -webkit-background-size: 139px 219px; background-size: 139px 219px; } .page-changes-on-existing-templates .form-consultation .form-mascot { background-image: url(../png/ico-mascot-changes.png); width: 134px; height: 234px; left: -115px; z-index: 3; } .hi-dpi .page-changes-on-existing-templates .form-consultation .form-mascot { background-image: url(../png/ico-mascot-changes%402x.png); -webkit-background-size: 134px 234px; background-size: 134px 234px; } .page-mailchimp-integration .form-consultation .form-mascot { background-image: url(../png/ico-mascot-mailchimp.png); width: 156px; height: 219px; left: -148px; z-index: 3; } .hi-dpi .page-mailchimp-integration .form-consultation .form-mascot { background-image: url(../png/ico-mascot-mailchimp%402x.png); -webkit-background-size: 156px 219px; background-size: 156px 219px; } .page-mailchimp-expert .form-consultation .form-mascot { background-image: url(../png/ico-mascot-mailchimp.png); width: 156px; height: 219px; left: -148px; z-index: 3; } .hi-dpi .page-mailchimp-expert .form-consultation .form-mascot { background-image: url(../png/ico-mascot-mailchimp%402x.png); -webkit-background-size: 156px 219px; background-size: 156px 219px; } .page-campaign-monitor .form-consultation .form-mascot { background-image: url(../png/ico-mascot-cm.png); width: 148px; height: 233px; left: -124px; z-index: 3; } .hi-dpi .page-campaign-monitor .form-consultation .form-mascot { background-image: url(../png/ico-mascot-cm%402x.png); -webkit-background-size: 148px 233px; background-size: 148px 233px; } .page-email-software-integration .form-consultation .form-mascot { background-image: url(../png/ico-mascot-integration.png); width: 144px; height: 225px; left: -136px; z-index: 3; } .hi-dpi .page-email-software-integration .form-consultation .form-mascot { background-image: url(../png/ico-mascot-integration%402x.png); -webkit-background-size: 144px 225px; background-size: 144px 225px; } .page-interactive-emails .form-consultation .form-mascot { background-image: url(../png/ico-mascot-interactive.png); width: 139px; height: 225px; left: -129px; z-index: 3; } .hi-dpi .page-interactive-emails .form-consultation .form-mascot { background-image: url(../png/ico-mascot-interactive%402x.png); -webkit-background-size: 139px 225px; background-size: 139px 225px; } .form-consultation .ico-expert { background: url(../png/ico-expert.png) 50% no-repeat; width: 101px; height: 103px; position: absolute; top: 92px; left: -276px; } .hi-dpi .form-consultation .ico-expert { background-image: url(../png/ico-expert%402x.png); -webkit-background-size: 101px 103px; background-size: 101px 103px; } .page-changes-on-existing-templates .section-services-generic .list-checked-large { padding-top: 42px; } .page-email-software-integration .section-services-generic .list-checked-large { max-width: 360px; } .cols-recipe { padding-top: 16px; } .cols-recipe h4 { font-size: 30px; padding: 0 0 30px; } .cols-recipe .col-1of2 { width: 470px; } .cols-recipe .col-1of2 ~ .col-1of2 { float: right; } .recipe-image { float: left; width: 220px; } .recipe-image .ico-pricing { display: block; margin: 0 auto; position: static; } .recipe-image .ico-pricing { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .recipe-content { float: right; width: 250px; } .ico-transition-platforms, .ico-recipe-testing, .ico-recipe-testing2, .ico-recipe-support, .ico-recipe-nda, .ico-recipe-refunds, .ico-recipe-commented, .ico-recipe-retina, .ico-recipe-setup { display: block; margin-left: auto; margin-right: auto; } .ico-transition-platforms { background: url(../png/ico-transition.png) 50% no-repeat; width: 178px; height: 144px; margin-top: 30px; } .hi-dpi .ico-transition-platforms { background-image: url(../png/ico-transition%402x.png); -webkit-background-size: 178px 144px; background-size: 178px 144px; } .ico-recipe-testing { background: url(../png/ico-recipe-testing.png) 50% no-repeat; width: 130px; height: 91px; margin-top: 16px; } .hi-dpi .ico-recipe-testing { background-image: url(../png/ico-recipe-testing%402x.png); -webkit-background-size: 130px 91px; background-size: 130px 91px; } .ico-recipe-support { background: url(../png/ico-recipe-support.png) 50% no-repeat; width: 130px; height: 98px; margin-top: 22px; } .hi-dpi .ico-recipe-support { background-image: url(../png/ico-recipe-support%402x.png); -webkit-background-size: 130px 98px; background-size: 130px 98px; } .ico-recipe-nda { background: url(../png/ico-recipe-nda.png) 50% no-repeat; width: 94px; height: 103px; } .hi-dpi .ico-recipe-nda { background-image: url(../png/ico-recipe-nda%402x.png); -webkit-background-size: 94px 103px; background-size: 94px 103px; } .ico-recipe-refunds { background: url(../png/ico-recipe-refunds.png) 50% no-repeat; width: 140px; height: 98px; margin-top: 24px; } .hi-dpi .ico-recipe-refunds { background-image: url(../png/ico-recipe-refunds%402x.png); -webkit-background-size: 140px 98px; background-size: 140px 98px; } .ico-recipe-testing2 { background: url(../png/ico-recipe-testing2.png) 50% no-repeat; width: 131px; height: 71px; margin-top: 16px; } .hi-dpi .ico-recipe-testing2 { background-image: url(../png/ico-recipe-testing2%402x.png); -webkit-background-size: 131px 71px; background-size: 131px 71px; } .ico-recipe-commented { background: url(../png/ico-recipe-commented.png) 50% no-repeat; width: 104px; height: 110px; margin-top: 16px; } .hi-dpi .ico-recipe-commented { background-image: url(../png/ico-recipe-commented%402x.png); -webkit-background-size: 104px 110px; background-size: 104px 110px; } .ico-recipe-retina { background: url(../png/ico-recipe-retina.png) 50% no-repeat; width: 120px; height: 126px; margin-top: 16px; } .hi-dpi .ico-recipe-retina { background-image: url(../png/ico-recipe-retina%402x.png); -webkit-background-size: 120px 126px; background-size: 120px 126px; } .ico-recipe-setup { background: url(../png/ico-recipe-setup.png) 50% no-repeat; width: 177px; height: 160px; margin-bottom: 30px; } .hi-dpi .ico-recipe-setup { background-image: url(../png/ico-recipe-setup%402x.png); -webkit-background-size: 177px 160px; background-size: 177px 160px; } .hi-dpi .dk-selected:before { background-image: url(../png/arrow-select-filter%402x.png); -webkit-background-size: 10px 6px; background-size: 10px 6px; } .recipe-prices h5 { font-size: 16px; padding: 0 0 18px; } .recipe-prices > i { float: right; position: static; } .recipe-prices .ico-pricing { -webkit-transform: scale(.8); -moz-transform: scale(.8); -ms-transform: scale(.8); -o-transform: scale(.8); transform: scale(.8); -webkit-transform-origin: top right; -moz-transform-origin: top right; -ms-transform-origin: top right; -o-transform-origin: top right; transform-origin: top right; } .recipe-prices .ico-transition-platforms { margin-top: 0; } .recipe-prices .ico-recipe-testing { position: relative; top: -20px; left: -40px; } .recipe-pricing { list-style: none; font-size: 12px; line-height: 32px; text-transform: uppercase; width: 232px; } .recipe-pricing li { margin: 0 0 1px; } .recipe-pricing a, .recipe-pricing span { display: block; background: #fcf9f2; border-radius: 5px; padding: 0 10px; overflow: hidden; box-shadow: 1px 1px 0 #e7debc; text-decoration: none; } .recipe-pricing strong { font-size: 20px; } .recipe-pricing sup { font-weight: normal; font-size: 16px; line-height: 16px; vertical-align: top; position: relative; top: 2px; } .no-touch .recipe-pricing a:hover { background: #e05333; color: #fff; } .recipe-pricing .left-l { float: left; margin-right: 8px; } .recipe-price { float: left; margin-right: 8px; } .recipe-price-right { float: right; margin-right: 0; } .section-sample .cols { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; max-width: 600px; margin: 0 auto; } .section-sample .cols:after { display: none; } .section-sample .col-1of2 { flex: 0 0 36%; max-width: 36%; float: none; } .section-sample .col-1of2 + .col-1of2 { flex: 0 0 58%; max-width: 58%; } .section-sample .col-1of2 img { display: block; max-width: 100%; height: auto; margin: 0; } .section-sample .cols.cols-reversed .col-1of2 { flex: 0 0 58%; max-width: 58%; } .section-sample .cols.cols-reversed .col-1of2 + .col-1of2 { flex: 0 0 36%; max-width: 36%; } .section-sample .cols.cols-reversed .col-1of2 img { margin-left: auto; } .section-cta { padding: 20px 0; background-image: url(../png/dotted-horizontal.png); background-position: 50%; background-repeat: repeat-x; } .hi-dpi .section-cta { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 6px 2px; background-size: 6px 2px; } .section-cta .padder { background: #fcf9f2; padding: 0 20px; display: inline-block; vertical-align: top; } .section-cta.section-dark .padder { background: #f7f2e0; } .section-cta-alt .section-title { font-size: 46px; line-height: 46px; } .section-dotted-border { background-image: url(../png/dotted-horizontal.png); background-position: bottom; background-repeat: repeat-x; } .section-confidence .section-body h4 { font-size: 36px; padding: 0 0 30px; } .section-confidence .counters-container h4 { font-size: 30px; text-transform: uppercase; padding: 10px 0 0; } .counters-container { width: 564px; margin: 0 auto; text-align: center; } .counters-container:after { content:""; display:block; clear:both; } .counter-projects { float: left; } .counter-projects .digits { width: 257px; } .counter-clients { float: right; } .mid-text { display: inline; position: relative; top: 24px; font-size: 20px; text-transform: uppercase; } .digits { width: 200px; position: relative; overflow: hidden; } .digits:after { content: ''; position: absolute; top: 34px; left: 6px; right: 9px; border-top: 1px solid #ada790; height: 1px; background: rgba(255,255,255,.5); border-bottom: 1px solid #c1bfb7; } .digit { float: left; background: url(../png/digit.png) 50% no-repeat; width: 49px; height: 75px; font-size: 65px; line-height: 71px; text-indent: -1px; font-weight: bold; color: #7b7562; text-shadow: 2px 2px 0 #fff; margin: 0 1px 0 0; } .hi-dpi .digit { background-image: url(../png/digit%402x.png); -webkit-background-size: 49px 75px; background-size: 49px 75px; } .page-responsive-html-email .section-recipe .ico-recipe-testing { margin-top: 20px; } .page-responsive-html-email .section-recipe .ico-recipe-testing2 { margin-top: 40px; } .section-recipe .section-actions { padding: 69px 0 53px; } .section-confidence .section-actions { padding: 69px 0 20px; } .attestment { background: #fcf9f2 url(../png/bg-section-stamp.png) 50% 0 repeat-y; border: 1px dashed #dec6a8; border-radius: 4px; text-align: center; padding: 30px 30px 0; } .attestment h3 { font-size: 36px; padding: 0 0 18px; } .attestment h3 a { text-decoration: none; } .attestment h3 a:hover { text-decoration: underline; } .logo-mailchimp { display: inline-block; position: relative; top: 10px; } .section-hiw .section-works-nav { top: 0; } .cols-expert-pricing { padding: 20px 0; } .cols-expert-pricing h4 { font-size: 36px; padding: 0 0 30px; } .cols-expert-pricing h5 { font-size: 20px; margin: 20px 0 28px; } .cols-expert-pricing .col-1of3 { text-align: center; } .list-checked-center li { background: transparent; } .hi-dpi .list-checked-center li { background: transparent; } .list-checked-center li:before { content: ''; background: url(../png/checkbox.png) 50% no-repeat; width: 11px; height: 9px; display: inline-block; vertical-align: top; position: relative; top: 5px; margin-right: 7px; } .hi-dpi .list-checked-center li:before { background-image: url(../png/checkbox%402x.png); -webkit-background-size: 11px 9px; background-size: 11px 9px; } .section-request-quote .form-quote, .hi-dpi .section-request-quote .form-quote { background: transparent; } .section-request-quote .form-quote .form-actions { margin-bottom: -18px; top: 8px; } .section-services-generic .section-description h5 { font-weight: normal; font-size: 16px; } .partnership-description { text-align: left; } .partnership-description h4 { font-size: 20px; padding: 16px 0 24px; } .partnership-description .list-bulleted { max-width: 450px; } .img-for-agencies { float: right; } .section-centered { text-align: center; } .cols-features h4 { font-size: 24px; padding: 0 0 20px; } .cols-features .col-1of2 { width: 460px; } .cols-features .col-1of2 ~ .col-1of2 { float: right; } .ico-feature-check { background: url(../png/check-large.png) 50% no-repeat; width: 17px; height: 16px; display: inline-block; vertical-align: top; margin-right: 6px; position: relative; top: 6px; } .table-discounts { background: #fbf7ed; border: 1px solid #d5cca9; border-collapse: collapse; border-spacing: 0; margin: 0 0 10px; } .table-discounts th, .table-discounts td { padding: 8px 18px; text-align: center; font-weight: normal; border: 1px solid #d5cca9; } .table-discounts tr th:first-child, .table-discounts tr td:first-child { text-align: left; } .small-print { font-size: 11px; } /* ------------------------------------------------------------ *\ samples filters \* ------------------------------------------------------------ */ .section-filters { padding-top: 0; } .section-filters label { font-size: 20px; color: #8e959b; margin: 0 20px; } .section-filters select { width: 170px; } /* ========================================================================== # samples detailed ========================================================================== */ .page-samples-detailed { overflow:hidden; } .page-samples-detailed .footer { display: none; } .page-samples-detailed .container { padding: 10px 0 0; } html.mini-header .page-samples-detailed .bar-featured.active ~ .container { padding: 10px 0 0; } .section-sample { padding: 45px 0 0 0; } .section-sample .section-nav { padding: 0; position: relative; top: 20px; } .section-sample .section-description, .section-sample .section-description p{ padding: 0; } .notice { display: none; font-size: 11px; } .notice-error { color: #cd4c2f; } .btn-sending { color: #fff !important; } .tab-frame { display: none; } .ios-device .tab-frame { width: 100%; -webkit-overflow-scrolling:touch; overflow: auto; height: 500px; } /* ========================================================================== # upload ========================================================================== */ .field-section-holder { text-align: left; display: block; } .field-section-inner { border-radius: 3px; margin: 3px; box-shadow: 0 0 0 3px #f6f0e4; overflow: hidden; } .field-section-holder input { font-size: 16px; } .field-section-holder .field-holder { height: 40px; display: block; } .field-section-holder .btn-upload { text-decoration: none; text-transform: uppercase; display: inline-block; cursor: pointer; } .field-section-holder .btn-upload:hover { border-color: #c69c6d; box-shadow: 0 0 0 3px #ecddca; } .field-section-holder .field-holder-upload { display: flex; align-items: center; justify-content: center; flex-direction: column; height: auto; background: #fff url(../png/upload-pattern-bg.png) 100% 100% repeat; border: 1px dashed #b8b8ac; border-bottom: none; border-radius: 3px 3px 0 0; padding: 19px 10px 24px; } .field-section-holder .field-holder-upload p { position: relative; padding-bottom: 5px; font-size: 15px; } .field-section-holder .field-holder-upload p:before { content: ''; display: block; width: 23px; height: 30px; margin: 10px auto 17px auto; background: url(../png/ico-upload.png) no-repeat 0 0; pointer-events: none; } .field-section-holder .field-holder-upload .notice { position: static; line-height: 23px; height: auto; } .hi-dpi .field-section-holder .field-holder-upload p:before { background-image: url(../png/ico-upload%402x.png); -webkit-background-size: 23px 30px; background-size: 23px 30px; } ul.upload-list { list-style-type: none; background: #fff url(../png/upload-pattern-bg.png) 100% 100% repeat; border: 1px dashed #b8b8ac; border-radius: 0 0 3px 3px; border-top: none; } ul.upload-list li.attached-file { font-size: 12px; white-space: nowrap; display: flex; border-top: 1px dashed #b8b8ac; padding: 14px 22px; justify-content: space-between; box-shadow: inset 0 1px 0 2px #f6f0e4, inset 0 -1px 0 2px #f6f0e4; } ul.upload-list li.attached-file:last-child { box-shadow: inset 0 1px 0 2px #f6f0e4, inset 0 -1px 0 2px transparent; } ul.upload-list li.attached-file .custom-checkbox { margin-right: 10px; } ul.upload-list li.attached-file .checkbox { margin-bottom: 0; } ul.upload-list li.attached-file .progress { display: inline-block; width: 158px; position: relative; height: 13px; font-size: 0; line-height: 0; padding: 1px; background: #e5dbb6; box-shadow: 0 0 0 3px #f6f0e4; border-radius: 4px; border: 1px solid #d7cead; top: 2px; } ul.upload-list li.attached-file .progress .progress-bar { width: 0; height: 100%; background: #fcf9f2; border-radius: 4px; border-right: 1px solid #d8cfae; } ul.upload-list li.attached-file .progress .progress-bar-text { text-align: right; font-size: 8px; line-height: 13px; padding-right: 3px; position: absolute; top: 1px; right: 0; } .dz-drag-hover .field-section-holder .field-holder-upload p:before { background-image: url(../png/ico-upload-red.png); } .dz-drag-hover .field-section-holder .field-holder-upload, .dz-drag-hover .upload-list .attached-file, .dz-drag-hover .upload-list { border-color: #e25037; } .hi-dpi .dz-drag-hover .field-section-holder .field-holder-upload p:before { background-image: url(../png/ico-upload-red%402x.png); -webkit-background-size: 23px 30px; background-size: 23px 30px; } @media screen and (max-width: 767px) { ul.upload-list li.attached-file { flex-direction: column; } ul.upload-list li.attached-file .checkbox { padding-bottom: 14px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; } .form-consultation .field-section-holder .field-holder-upload p, .form-consultation .field-section-holder .field-holder-upload small { width: auto; padding-left: 0; text-align: center; } .form-consultation .field-section-holder .field-holder-upload p:before { position: static; display: block; margin: 0 auto 10px; } } /* Hidden text */ .logo, .footer-bar .ico-cards, .btn-risk-free, .btn-close .ico-close, .popup .close, .nav-toggle, .intro-arrow, .slider-testimonials.flex-init .flex-prev, .slider-testimonials.flex-init .flex-next, .slider-testimonials .slider-nav a { font-size: 0; line-height: 0; text-indent: -9999px; text-align: left; text-decoration: none; } /* List style */ .list-checked, .slider-testimonials ul, .slider-testimonials ol, .nav-tabbed ul, .intro-slider ul, .intro-slider-nav ul, .products, .testimonials, .form-totals ul, .slider-generic ul, .slider-generic ol, .expandables, .partners, .pricing-nav ul, .pricing-boxes, .pricing-btns, .section-more .slides, .list-bulleted, .nav ul, .footer ul, .team-thumbs, .flex-direction-nav { list-style: none; } /* ========================================================================== # section how it works ========================================================================== */ .nav-works, .ico-works, .ico-brief, .fixed .section-works-nav-fixed .shell, .process-step-number { background-image: url(../png/how-it-works-sprite.png); background-repeat: no-repeat; } .hi-dpi .nav-works, .hi-dpi .ico-works, .hi-dpi .ico-brief, .hi-dpi.fixed .section-works-nav-fixed .shell, .hi-dpi .process-step-number { background-image: url(../png/how-it-works-sprite%402x.png); -webkit-background-size: 1373px 832px; background-size: 1373px 832px; } .process-step-image i { background-image: url(../png/how-it-works-images-sprite.png); background-repeat: no-repeat; } .hi-dpi .process-step-image i { background-image: url(../png/how-it-works-images-sprite%402x.png); -webkit-background-size: 1373px 367px; background-size: 1373px 367px; } .section-works-nav { margin: 0 0 36px 0; position: relative; top: -44px; width: 100%; } .ios-device .section-works-nav { -webkit-transform: translate3d(0,0,0); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; } .nav-works { display: block; position: relative; top: 0; z-index: 10; width: 100%; height: 153px; background-position: 0 -571px; } .nav-works:before, .nav-works > .before, .nav-works:after, .nav-works > .after { content: ''; background-image: url(../png/dotted-horizontal.png); width: 1500px; height: 2px; position: absolute; top: 50px; } .nav-works:before { left: 100%; background-position: 0 0; } .nav-works:after { right: 100%; background-position: 100% 0; } .nav-works-inner { position: relative; top: 2px; } .nav-works-inner img { opacity: 0.5; } .hi-dpi .nav-works:before, .hi-dpi .nav-works > .before, .hi-dpi .nav-works:after, .hi-dpi .nav-works > .after { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; background-repeat: repeat-x; } .hi-dpi .nav-works:before, .hi-dpi .nav-works > .before { margin-left: 2px; } .hi-dpi .nav-works:after, .hi-dpi .nav-works > .after { height: 1px; top: 51px; } .nav-works ul { list-style-type: none; position: relative; z-index: 11; } .nav-works li { position: absolute; } .nav-works a { display: block; text-decoration: none; } .nav-works li strong { font-size: 12px; text-transform: uppercase; font-weight: normal; color: #56636f; position: relative; top: -3px; } .no-touch .nav-works a:hover strong { color: #e05333; } .nav-works li.link-order { left: 173px; top: 28px; } .nav-works li.link-coding { left: 368px; top: 60px; } .nav-works li.link-quality { left: 534px; top: -9px; } .nav-works li.link-delivery { left: 710px; top: -18px; } .fixed .section-works-nav li a strong { visibility: hidden; opacity: 0; } .ico-works { display: block; position: relative; font-size: 0; line-height: 0; text-indent: -9999px; } .ico-works-order { background-position: 0 0; width: 116px; height: 82px; } .ico-works-current .ico-works-order { background-position: -117px 0; } .ico-works-coding { background-position: 0 -83px; width: 104px; height: 90px; } .ico-works-coding.ico-works-frame1 { background-position: -105px -83px; } .ico-works-coding.ico-works-frame2 { background-position: -210px -83px; } .ico-works-coding.ico-works-frame3 { background-position: -315px -83px; } .ico-works-coding.ico-works-frame4 { background-position: -420px -83px; } .ico-works-coding.ico-works-frame5 { background-position: -525px -83px; } .ico-works-coding.ico-works-frame6 { background-position: 0 -83px; } .ico-works-quality { background-position: 0 -174px; width: 114px; height: 126px; } .ico-works-quality.ico-works-frame1 { background-position: -115px -174px; } .ico-works-quality.ico-works-frame2 { background-position: -230px -174px; } .ico-works-quality.ico-works-frame3 { background-position: -345px -174px; } .ico-works-quality.ico-works-frame4 { background-position: 0 -174px; } .ico-works-delivery, .ico-works-delivery.ico-works-frame1, .ico-works-delivery.ico-works-frame2, .ico-works-delivery.ico-works-frame3, .ico-works-delivery.ico-works-frame4, .ico-works-delivery.ico-works-frame5, .ico-works-delivery.ico-works-frame6 { background-position: 0 -301px; width: 120px; height: 109px; } .ico-works-delivery.ico-works-frame7 { background-position: -242px -301px; } .ico-works-delivery.ico-works-frame8 { background-position: -363px -301px; } .ico-works-delivery.ico-works-frame9 { background-position: -484px -301px; } .ico-works-delivery.ico-works-frame10 { background-position: -605px -301px; } .ico-works-delivery.ico-works-frame11 { background-position: -726px -301px; } .ico-works-delivery.ico-works-frame12 { background-position: -847px -301px; } .ico-works-delivery.ico-works-frame13 { background-position: -968px -301px; } .ico-works-delivery.ico-works-frame14 { background-position: -1089px -301px; } .ico-works-delivery.ico-works-frame15 { background-position: -1210px -301px; } .ico-works-delivery.ico-works-frame16 { background-position: -1210px -301px; } .ico-works-delivery-helper { background-position: -121px -301px; width: 120px; height: 109px; position: absolute; top: -18px; left: 710px; z-index: 15; display: none; } .ico-brief { position: absolute; background-position: -1301px 0; width: 30px; height: 24px; font-size: 0; left: 0; text-indent: -4000px; z-index: 10; } .ico-brief { left: 216px; top: 35px; } .ico-brief1 { left: 216px; top: 35px; background-position: -1301px 0; } .ico-brief2 { left: 404px; top: 95px; background-position: -1296px -69px; width: 35px; height: 26px; } .ico-brief3 { left: 581px; top: 70px; background-position: -1289px -25px; width: 42px; height: 43px; margin-top: -15px; } .ico-brief4 { left: 760px; top: 40px; background-position: -1289px -25px; width: 42px; height: 43px; margin-top: -15px; } .fixed .section-works-nav-fixed { position: fixed; top: 50px; left: 0; width: 100%; z-index: 20; } .fixed .section-works-nav-fixed .shell { background-position: 0 -411px; } .fixed .section-works-nav-fixed .section-nav-bg { height: 100px; background: rgba(252,249,242,.9); top: -50px; left: 0; width: 100%; display: block; position: absolute; z-index: 2; } .fixed .section-works .section-description { margin-bottom: 189px; } .ios-device.fixed .section-works-nav-fixed { position: relative; top: -44px; height: auto; } .ios-device.fixed .section-works-nav-fixed:before { display: none; content: none; } .ios-device.fixed .section-works .section-description { margin-bottom: 0; } .diff-footer .container, .page-thank-you .container { padding-bottom: 280px; } .page-thank-you .section-description .section-subtitle { font-size: 36px; } .page-mailchimp-tags .section-testing, .page-campaignmonitor-tags .section-testing { padding-top: 0; } .page-mailchimp-tags .section-about, .page-campaignmonitor-tags .section-about { padding-bottom: 0; } .ios-device .form-totals-container { position: fixed; } .ios-device .header { position: absolute; } .popup-loading { background: #fff url(../gif/loading-popup.gif) 50% no-repeat; width: 74px; height: 74px; border-radius: 50px; position: fixed; top: 50%; left: 50%; margin: -40px 0 0 -40px; border: 3px solid #d7d8d5; z-index: 50; visibility: hidden; opacity: 0; } .popup-loading-show { opacity: 1; visibility: visible; } .hi-dpi .popup-loading { -webkit-background-size: 24px 24px; background-size: 24px 24px; } .ios-device .tab-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ios-device .tab-frame iframe { overflow-x: hidden; } .holiday-note { position: absolute; top: 55px; left: 0; width: 100%; text-align: center; background: #f8f2e0; border-bottom: solid 1px #efe2d3; } .holiday-note p { padding: 35px 15px 12px 15px; } .popular-platforms { list-style: none; text-align: left; overflow: hidden; } .popular-platform { float: left; width: 50%; padding: 0 0 0 130px; margin: 40px 0 0; position: relative; /*display: flex;*/ } .popular-platform { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .popular-platform h3 { font-size: 20px; padding: 0 0 16px; } .popular-platform p a.highlighted { margin-top: 10px; display: inline-block; } .popular-platform-secondary { padding: 0 40px 0 130px; } .popular-platforms-secondary .popular-platform { width: 33%; } .ico-platform { display: block; background-image: url(../png/popular-services-icons.png); background-repeat: no-repeat; position: absolute; top: 5px; } .ico-platform-mailchimp { background-position: 0 0; width: 80px; height: 90px; left: 12px; } .ico-platform-campaign-monitor { background-position: -81px 0; width: 74px; height: 50px; left: 16px; } .ico-platform-apsis { background-position: -81px -51px; width: 68px; height: 12px; left: 26px; top: 6px; } .ico-platform-dotmailer { background-position: -156px 0; width: 68px; height: 68px; left: 26px; } .ico-platform-autopilot { background-position: -81px -64px; width: 64px; height: 30px; left: 28px; } .ico-platform-exact-target { background-position: 0 -95px; width: 91px; height: 84px; left: 14px; } .ico-platform-aweber { background-position: -225px 0; width: 71px; height: 70px; left: 26px; } .ico-platform-icontact { background-position: -92px -95px; width: 70px; height: 70px; left: 26px; } .ico-platform-cakemail { background-position: -163px -69px; width: 59px; height: 73px; left: 32px; } .ico-platform-myemma { background-position: -223px -71px; width: 70px; height: 69px; left: 26px; } .ico-platform-pardot { background-position: 0 -180px; width: 85px; height: 87px; left: 18px; } .ico-platform-sendloop { background-position: -92px -166px; width: 70px; height: 53px; left: 27px; } .ico-platform-klaviyo { background-image: url(../png/klaviyo-logo-%402x.png); background-size: 100%; background-repeat: no-repeat; width: 75px; height: 53px; position: absolute; left: 18px; } .ico-platform.ico-platform-html-css { background-image: url( ../png/html_css.png); background-repeat: no-repeat; position: absolute; top: 5px; left: 0px; width: 105px; height: 74px; background-size: contain; } .ico-platform.ico-platform-wordpress { background-image: url( ../png/wordpress.png); background-repeat: no-repeat; position: absolute; top: 5px; left: 0px; width: 90px; height: 90px; background-size: contain; } .ico-platform.ico-platfomr-landing-page { background-image: url( ../png/landing-page-from-scratch.png); background-repeat: no-repeat; position: absolute; top: 5px; left: 130px; width: 75px; height: 75px; background-size: contain; -webkit-transform: translateX(calc(-100% - 20px)); -ms-transform: translateX(calc(-100% - 20px)); -o-transform: translateX(calc(-100% - 20px)); transform: translateX(calc(-100% - 20px)); } .hi-dpi .ico-platform.ico-platform-html-css { background-image: url(../png/html_css%402x.png); background-size: contain; } .hi-dpi .ico-platform.ico-platform-wordpress { background-image: url(../png/wordpress%402x.png); background-size: contain; } .hi-dpi .ico-platform.ico-platfomr-landing-page { background-image: url( ../png/landing-page-from-scratch%402x.png); background-size: contain; } .popular-platforms-secondary.short .popular-platform { height: 115px; position: relative; } .popular-platforms-secondary.short .popular-platform h3 { display: none; } .popular-platforms-secondary.short .popular-platform .ico-platform { height: 115px; position: absolute; top: 5px; left: 50%; background-image: url(../png/platform-logos-2021.png); background-repeat: no-repeat; } .popular-platforms-secondary.short .popular-platform.platform-mailchimp .ico-platform { background-position: 0 0; width: 200px; height: 54px; margin-left: -100px; } .popular-platforms-secondary.short .popular-platform.platform-hubspot .ico-platform { background-position: 0 -54px; width: 200px; height: 57px; margin-left: -100px; } .popular-platforms-secondary.short .popular-platform.platform-klaviyo .ico-platform { background-position: 0 -110px; width: 200px; height: 49px; margin-left: -100px; } .popular-platforms-secondary.short .popular-platform.platform-campaign-monitor .ico-platform { background-position: 0 -159px; width: 200px; height: 21px; margin-left: -100px; top: 15px; } .popular-platforms-secondary.short .popular-platform.platform-braze .ico-platform { background-position: 0 -180px; width: 200px; height: 58px; margin-left: -100px; top: 0; } .popular-platforms-secondary.short .popular-platform.platform-shopify .ico-platform { background-position: 0 -238px; width: 200px; height: 73px; margin-left: -100px; top: -15px; } .popular-platforms-secondary.short .popular-platform.platform-salesforce-pardot .ico-platform { background-position: 0 -317px; width: 200px; height: 72px; margin-left: -100px; top: -15px; } .popular-platforms-secondary.short .popular-platform.platform-salesforce-marketing-cloud .ico-platform { background-position: 0 -394px; width: 200px; height: 50px; margin-left: -100px; top: -5px; } .popular-platforms-secondary.short .popular-platform.platform-marketo .ico-platform { background-position: 0 -445px; width: 200px; height: 60px; margin-left: -100px; top: -10px; } @media(max-width: 1023px){ .popular-platform-secondary { padding-right: 10px; } } @media screen and (max-width: 767px) { .ico-platform.ico-platform-html-css, .ico-platform.ico-platform-wordpress, .ico-platform.ico-platfomr-landing-page { position: static; } .ico-platform.ico-platfomr-landing-page { -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } .hi-dpi .ico-platform { background-image: url(../png/popular-services-icons%402x.png); -webkit-background-size: 297px 268px; background-size: 297px 268px; } .interactive-demos { list-style: none; overflow: hidden; } .interactive-demo { width: 302px; margin: 10px 12px 20px; float: left; } .interactive-demo img { display: block; border: 1px solid #dec6a8; margin: 0 0 16px; } .interactive-demo h4 { font-size: 26px; margin: 0 0 16px; } /* ------------------------------------------------------------ *\ Section Logos \* ------------------------------------------------------------ */ .section-logos { padding-bottom: 52px; } .section-logos .section-subtitle { margin-bottom: 33px; text-align: center; } /* ------------------------------------------------------------ *\ Slider Logos \* ------------------------------------------------------------ */ .slider-logos { visibility: hidden; opacity: 0; transition: opacity .7s, visibility .7s; } .slider-logos img { display: block; width: 100%; height: auto; } .slider-logos.visible { visibility: visible; opacity: 1; } .slider-logos .slick-track { display: flex; flex-wrap: wrap; align-items: center; } .slider-logos .slick-track:before, .slider-logos .slick-track:after { display: none; } .slider-logos .slick-slide { flex: 1; float: none; } .slider-logos .slick-slide img { margin: 0 auto; } .slider-logos .slick-dots { list-style: none outside none; text-align: center; margin-top: 37px; } .slider-logos .slick-dots button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); appearance: none; border-radius: 50%; border: 0; font-size: 0; line-height: 0; text-indent: -4004px; background-color: #c4c7c6; width: 10px; height: 10px; cursor: pointer; transition: background .3s; } .slider-logos .slick-dots li { cursor: pointer; position: relative; display: inline-block; vertical-align: text-top; margin: 0 3px; text-align: center; width: 16px; height: 16px; } .slider-logos .slick-dots li:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 14px; height: 14px; background-color: transparent; transition: background .3s; } .slider-logos .slick-dots .slick-active button { background-color: #445361; } .slider-logos .slick-dots .slick-active:after { background-color: #445361; } /* ------------------------------------------------------------ *\ Client Area \* ------------------------------------------------------------ */ .page-client-area .container { padding-top: 0; } .intro-client-area { background: #f8f3e0; padding-top: 16px; } .intro-client-area .intro-image img { position: relative; margin: 0 -51px; display: block; } .section-client-area { padding: 60px 0; } .section-client-area:after { content: ''; clear: both; display: table; width: 100%; height: 0; } .section-client-area .section-aside { float: right; width: 450px; padding-top: 32px; } .section-client-area .section-content { width: 470px; padding-left: 12px; text-align: left; } .section-client-area .section-content p { font-size: 24px; line-height: 36px; } .section-client-area .section-content .section-title { padding-bottom: 30px; } .section-client-area .section-content .btn ~ .btn { margin-left: 10px; } .section-client-area .form-login { background: url(../png/box-client-login.png) -75px 0 no-repeat; width: 378px; height: 329px; position: relative; text-align: left; } .hi-dpi .section-client-area .form-login { background-image: url(../png/box-client-login%402x.png); -webkit-background-size:cover; background-size:cover; } .section-client-area .form-login .form-mascot { background: url(../png/ico-mascot-client-area.png); width: 133px; height: 233px; position: absolute; top: 30px; right: -115px; } .hi-dpi .section-client-area .form-login .form-mascot { background-image: url(../png/ico-mascot-client-area%402x.png); -webkit-background-size: 133px 233px; background-size: 133px 233px; } .section-client-area .form-login .form-head, .section-client-area .form-login .form-body, .section-client-area .form-login .form-actions { position: relative; } .section-client-area .form-login .form-head { padding: 34px 30px 0 80px; } .section-client-area .form-login .form-head h3 { font-size: 30px; line-height: 36px; text-transform: uppercase; } .section-client-area .form-login .form-body { padding: 10px 30px 0 80px; } .section-client-area .form-login .form-row { padding-bottom: 10px; } .section-client-area .form-login .form-actions { padding: 5px 30px 30px 80px; } .section-client-area .form-login .checkbox { padding: 10px 0 0; } .section-client-area .form-login .field { width: 205px; } .section-client-area .form-login .forgot-trigger { font-size: 12px; line-height: 36px; margin-left: 12px; } .section-client-area .form-forgot .form-head { padding-top: 80px; } .section-client-area .form-forgot .cancel-trigger { font-size: 12px; line-height: 36px; margin-left: 12px; } .section-client-area .notice { margin-left: 3px; position: unset; display: inline-block; } .section-client-area .hidden { display: none; } /* ------------------------------------------------------------ *\ Store Templates \* ------------------------------------------------------------ */ .section-store { padding-bottom: 0; position: relative; } .store-templates { position: relative; margin: 0 -20px; font-size: 0; line-height: 0; text-align: center; } .store-template { width: 300px; display: inline-block; vertical-align: top; margin: 0 20px 40px; } .store-template a.disable { pointer-events: none; cursor: default; } .store-template-thumb { display: block; border: 1px solid #dcc2a0; border-radius: 4px; box-shadow: 0 0 0 4px #f2e9d4; } .store-template-title { font-size: 20px; line-height: 24px; margin: 18px 0; } .store-template-title a { text-decoration: none; } .store-template-price { font-size: 12px; line-height: 34px; display: inline-block; vertical-align: top; margin: 0 10px; text-transform: uppercase; color: #969391; } .store-templates-nav .btn { position: relative; top: 17px; } .section-store ~ .btn-order-l-container, .section-store-template ~ .btn-order-l-container, .section-store-buy ~ .btn-order-l-container, .section-store-customize ~ .btn-order-l-container, .section-thanks-store ~ .btn-order-l-container { display: none; } .section-store-template ~ .section:last-of-type { position: relative; padding-bottom: 80px; } .section-thanks-details { position: relative; margin-bottom: -180px; } .section-store-buy { position: relative; margin-bottom: -80px; } .section-store-buy .box-content p { padding-bottom: 10px; } .section-store-buy .box-content ul { list-style-type: none; } .section-store-buy .box-content ul li { background: url(../png/green-check.png) 0 6px no-repeat; padding: 0 0 10px 22px; } .section-store-buy .box-content ul .hi-dpi .list-checked li { background-image: url(../png/green-check%402x.png); -webkit-background-size: 11px 9px; background-size: 11px 9px; } .section-store-customize { position: relative; margin-bottom: -42px; border-bottom: 1px solid #e2e2de; } .box-buy-template { background: #fff; border: 1px solid #e8dfbf; border-radius: 4px; box-shadow: 0 0 0 4px #f2e9d4; margin: 40px 0 0; padding: 40px 30px; text-align: left; overflow: hidden; } .box-buy-template h2 { font-size: 30px; line-height: 42px; margin: 0 0 10px; } .box-buy-template ul { list-style: none; } .box-buy-template .box-preview { float: left; } .box-buy-template .box-preview img { display: block; border: 1px solid #e8dfbf; border-radius: 1px; box-shadow: 0 0 0 4px #f2e9d4; width: 296px; height: auto; margin: 6px 0; } .box-buy-template .box-content { float: right; width: 594px; } .box-buy-template .price { float: left; font-size: 30px; line-height: 52px; margin: 0 25px 0 0; padding: 0; } .box-buy-template .btn-orange { padding-top: 8px; padding-bottom: 8px; font-size: 18px; } .section-store-template { padding-bottom: 0; } .section-store-template .section-body { font-size: 0; line-height: 0; text-align: center; overflow: hidden; padding: 4px 0 0; } .store-template-preview { width: 600px; height: 250px; border: 1px solid #dcc2a0; border-radius: 4px; box-shadow: 0 0 0 4px #f2e9d4; overflow: hidden; position: relative; margin: 30px auto; } .store-template-preview img { width: 100%; position: absolute; top: 0; left: 0; } .store-template-preview-desktop { background: url(../png/desktop-mail-chrome.png) 50% 0 no-repeat; padding: 59px 0 0; display: inline-block; vertical-align: bottom; margin: 0 8px; border-width: 1px 1px 0; border-style: solid; border-color: #dcc2a0; box-shadow: 0 0 0 4px #f2e9d4; border-radius: 4px 4px 0 0; width: 596px; height: 320px; } .store-template-preview-desktop .store-template-preview { border: 0 none; width: 596px; height: 320px; border-radius: 0; box-shadow: none; margin: 0; } .store-template-preview-mobile { background: url(../png/mobile-mail-chrome.png) 50% 0 no-repeat; width: 149px; height: 180px; padding: 75px 13px 0; display: inline-block; vertical-align: bottom; margin: 0 8px; } .store-template-preview-mobile .store-template-preview { width: 148px; height: 180px; border: 0 none; border-radius: 0; box-shadow: none; margin: 0; } .hi-dpi .store-template-preview-mobile { background-image: url(../png/mobile-mail-chrome%402x.png); -webkit-background-size: 175px 352px; background-size: 175px 352px; } .section-template-options { text-align: center; font-size: 0; padding: 20px 0; } .btn-template-option { display: inline-block; vertical-align: top; font-size: 18px; line-height: 20px; padding: 12px 18px 8px 64px; position: relative; background: #8ac1b2; text-transform: uppercase; text-decoration: none; color: #fff; border-radius: 4px; margin: 0 10px; text-align: left; } .no-touch .btn-template-option:hover { background: #45907b; } .btn-template-option small { display: block; font-size: 11px; line-height: 20px; } .btn-template-option i { position: absolute; top: 50%; left: 32px; } .btn-template-option i { -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .btn-template-option .price { width: 88px; border-radius: 4px; background: #b94528; font-size: 30px; line-height: 60px; position: absolute; top: 0; left: 0; text-align: center; } .btn-template-customize { background: #f8ac42; } .no-touch .btn-template-customize:hover { background: #d79333; } .btn-template-buy { background: #e05333; padding-left: 106px; padding-right: 30px; border: none; cursor: pointer; } .no-touch .btn-template-buy:hover { background: #b94528; } .ico-fa-customize { background: url(../png/ico-fa-customize.png) 50% no-repeat; width: 24px; height: 25px; } .hi-dpi .ico-fa-customize { background-image: url(../png/ico-fa-customize%402x.png); -webkit-background-size: 24px 25px; background-size: 24px 25px; } .ico-fa-preview { background: url(../png/ico-fa-preview.png) 50% no-repeat; width: 24px; height: 16px; } .hi-dpi .ico-fa-preview { background-image: url(../png/ico-fa-preview%402x.png); -webkit-background-size: 24px 16px; background-size: 24px 16px; } .section-template-features .cols { max-width: 780px; margin: 0 auto; text-align: left; padding: 20px 0; } .section-template-features .list-checked { width: 306px; float: left; } .section-template-features .list-checked ~ .list-checked { float: right; } .template-examples { font-size: 0; line-height: 0; margin: 0 -20px; position: relative; } .template-example { display: inline-block; vertical-align: top; width: 302px; margin: 24px 16px 8px; } .template-example a { height: 190px; border: 1px solid #dcc2a0; border-radius: 4px; box-shadow: 0 0 0 4px #f2e9d4; overflow: hidden; display: block; } .template-example img { display: block; width: 300px; } .template-example .template-example-caption { padding: 10px 0; } .template-example .template-example-caption h3 { font-size: 24px; line-height: 24px; } .preview { width: 600px; margin: 0 auto 80px; } .preview-image { width: auto; height: auto; max-width: 100%; border-radius: 4px; display: block; } .popup .preview { max-height: 560px; overflow-y: auto; padding: 50px 0; width: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; } .popup .preview img { margin: 0 auto; border-radius: 0; } .form-customization h4 { font-size: 30px; line-height: 36px; margin: 0 0 10px; } .form-customization p { font-size: 14px; line-height: 22px; margin: 0 0 10px; padding: 0; } .form-customization .email-software .col-1of2 { width: 200px; text-align: left; } .form-customization .email-software .checkbox { display: block; } .form-customization .shell { max-width: 602px; margin: 0 auto; width: auto; } .form-customization .form-section { margin: 48px 0 0; } .form-customization .form-controls { margin: 24px 0 0; } .form-customization .form-cols:after { content: ''; clear: both; display: table; height: 0; } .form-customization .col-1of2 { float: left; width: 286px; } .form-customization .col-1of2 ~ .col-1of2 { float: right; } .form-customization .field-section-holder { text-align: center; } .form-customization .field-section-holder small { display: block; font-size: 11px; color: #8e959b; margin: 20px 0; } .form-customization .field-section-holder a { color: #8e959b; } .form-customization .field-section-holder .field-holder { height: auto; } .form-customization .form-actions { position: relative; margin: 0 0 -60px; top: 20px; } .form-customization .form-actions small, .form-customization .form-row small { display: block; font-size: 11px; line-height: 23px; color: #8e959b; } .form-customization .form-actions small a, .form-customization .form-row small a { color: #8e959b; } .form-buy { clear: both; padding: 40px 0 0; } .form-buy .form-group { width: auto; } .form-buy .form-group-title span { background: #fff; padding-left: 0; } .form-buy .field { width: 566px; } .form-buy .field.select { width: 588px; } .form-buy .nav-tabbed { text-align: left; } @media screen and (max-width: 767px) { .section-template-features .list-checked ~ .list-checked { float: left; } .form-customization .email-software .cols.form-cols { text-align: center; } .form-customization .email-software .col-1of2 { text-align: center; margin: 0 auto; } } /* ------------------------------------------------------------ *\ dropkick select \* ------------------------------------------------------------ */ .dk-select { width: 192px; text-align: left; position: relative; } .dk-selected, .dk-selected:hover, .dk-selected:focus, .dk-select-open-down .dk-selected, .dk-select-open-up .dk-selected { background: #fff; border: 1px solid #e8dfc0; } .dk-selected { font-size: 14px; line-height: 32px; padding: 0 36px 0 12px; color: #8e959b; border-radius: 2px; box-shadow: 0 0 0 3px #f7f1e5; position: relative; z-index: 2; } .dk-selected:before, .dk-selected:hover:before, .dk-selected:focus:before { background: url(../png/arrow-select-filter.png) 50% no-repeat; width: 10px; height: 6px; border: 0 none; position: absolute; top: 50%; right: 16px; margin: -3px -5px 0 0; } .dk-selected:after, .dk-selected:hover:after, .dk-selected:focus:after, .dk-select-open-up .dk-selected:after, .dk-select-open-down .dk-selected:after { border-color: #e8dfc0; margin-right: 33px; } .dk-select-options, .dk-select-open-up .dk-select-options, .dk-select-open-down .dk-select-options { border-color: #e8dfc0; border-radius: 0 0 2px 2px; } .dk-select-options { background: #fff; border-width: 0 1px 1px; border-style: solid; border-color: #8e959b; box-shadow: 0 0 0 3px #f7f1e5; top: 100%; margin-top: 3px; max-height: 135px; overflow-x: hidden; overflow-y: auto; padding: 7px; } .dk-select-options::-webkit-scrollbar { width: 7px; background: #fff; } .dk-select-options::-webkit-scrollbar-track { background: #f7f1e5; } .dk-select-options::-webkit-scrollbar-thumb { background: #bfb9a1; } .dk-select .dk-option { padding: 0 0 0 5px; font-size: 14px; line-height: 34px; color: #8e959b; } .dk-select .dk-option-selected, .dk-select .dk-option-highlight, .dk-select .dk-option:hover, .dk-select .dk-option:focus { background: transparent; color: #445361; } body { -moz-transition: -moz-transform .5s ease; } iframe[name="google_conversion_frame"] { font-size: 0 !important; line-height: 0 !important; position: absolute; width: 0 !important; height: 0 !important; bottom: 0 !important; left: 0 !important; } @media screen and (max-width: 1430px) { .btn-quote { right: -200px; } } @media screen and (max-width: 1380px) { .form-totals-container { top: 680px; right: 10px; margin-right: 0 !important; } .form-totals-fixed { top: 112px; } } @media screen and (max-width: 1340px) { .btn-login { right: -160px; } } @media screen and (max-width: 1220px) { .form-order .form-row { width: 472px; } .form-order .form-row .col-1of2 { width: 230px; } .page-order-now .form-row .col-1of2 + .col-1of2 { margin-left: 12px; } .form-order .field-s { width: 202px; } .field { width: 444px; } .field-m { width: 382px; } .field-xs { width: 172px; } .field-phone { width: 172px; } .form-order .textarea { width: 444px; } } @media screen and (max-width: 1150px) { .btn-risk-free { visibility: hidden; opacity: 0; } } @media screen and (max-width: 1024px) { .popular-platforms-secondary .popular-platform { width: 100%; } } @media screen and (max-width: 1024px), screen and (max-width: 1280px) and (max-height: 680px) { .holiday-note { position: relative; top: -20px; margin-bottom: -25px; } .container, .container.no-order-btn, body.page-order-now .container, body.page-first-order-free .container, body.page-request-quote .container { padding-top: 130px; } .section-headline { font-size: 40px; line-height: 50px; height: auto; border: 0 none; padding-bottom: 16px; } .section-headline > span { top: 0; } .section-headline-small { font-size: 28px; } .section-title { font-size: 38px; line-height: 44px; } .section-description p { font-size: 18px; line-height: 24px; } .header { position: absolute; } .mini-header .header .shell { visibility: visible; opacity: 1; } .mini-header .page-samples-detailed .header .shell { visibility: hidden; opacity: 0; } .slider-testimonials { position: relative; } .slider-testimonials .slider-clip { padding-left: 50px; padding-right: 50px; width: 880px; overflow: hidden; } .slider-testimonials .slide { width: 880px; left: 50px; } .slider-testimonials.flex-init { width: 980px; } .slider-testimonials.flex-init .slide { left: 0; } .slider-testimonials .slider-nav a, .slider-testimonials.flex-init .flex-prev, .slider-testimonials.flex-init .flex-next { display: block; background-image: url(../png/consistent-sprite-tablet.png); background-color: #8ac1b2; width: 36px; height: 36px; border-radius: 5px; position: absolute; top: 20px; } .slider-testimonials.flex-init .slider-nav { display: none; } .hi-dpi .slider-testimonials .slider-nav a, .hi-dpi .slider-testimonials.flex-init .flex-prev, .hi-dpi .slider-testimonials.flex-init .flex-next { background-image: url(../png/consistent-sprite-tablet%402x.png); -webkit-background-size: 107px 73px; background-size: 107px 73px; } .slider-testimonials.flex-init .flex-prev, .slider-testimonials .link-prev { background-position: -35px 0; left: 0; } .no-touch .slider-testimonials.flex-init .flex-prev:hover, .no-touch .slider-testimonials .link-prev:hover { background-position: -35px -37px; } .slider-testimonials.flex-init .flex-next, .slider-testimonials .link-next { background-position: -71px 0; right: 0; } .no-touch .slider-testimonials.flex-init .flex-next:hover, .no-touch .slider-testimonials .link-next:hover { background-position: -71px -37px; } .interactive-demos { margin: 0 auto; max-width: 652px; } .popular-platform p br { display: none; } .popular-platform p a.highlighted { display: block; } .popular-platform:nth-of-type(odd) { clear: left; } .intro-client-area { padding-top: 0; } .intro-client-area .intro-image img { width: 830px; height: auto; } .section-client-area .section-aside { width: 328px; } .section-client-area .section-content { width: 380px; position: relative; margin-right: -50px; } .section-client-area .form-login { background-position: -125px 0; width: 328px; } .section-client-area .form-login .form-head, .section-client-area .form-login .form-body, .section-client-area .form-login .form-actions { padding-left: 30px; } .popular-platforms-secondary .popular-platform { clear: none; } .col-contacts .credits { margin-right: 0; } } @media screen and (max-width: 1023px) { body { min-width: 768px; } .holiday-note { top: 0; font-size: 13px; position: relative; border-top: solid 1px #efe2d3; margin-bottom: 0; } .holiday-note p { padding: 15px 15px 15px 50px; } .disable-scroll, .disable-scroll body { overflow: hidden; } .touch.disable-scroll .container { cursor: pointer; } .touch.disable-scroll .header { position: fixed; } .shell { width: 728px; } .top-bar { position: absolute; } .header { position: absolute; height: 10px; } body.top-bar-visible .header { top: 56px; } .g-recaptcha { transform: scale(.85); transform-origin: 0 0; } .nav-toggle { background-color: #e05333; background-position: 0 0; display: block; width: 33px; height: 33px; border-width: 0 1px 1px; border-style: solid; border-color: #d23823; border-radius: 0 0 3px 3px; position: absolute; top: 0; left: 11px; z-index: 100; } .show-nav .nav-toggle { background-position: 0 -34px; border-width: 1px; border-radius: 3px; top: 9px; } .show-nav .logo, .disable-scrolling .logo { z-index: 1; } .nav { background: #e05333; width: 199px; height: auto; border-right: 1px solid #d23823; position: fixed; top: 0; padding-top: 117px; left: -200px; bottom: 0; z-index: 99; } .nav > ul, .nav > ul + ul, .nav > ul > li { float: none; overflow: hidden; } .nav > ul > li { border-top: 1px solid #d23823; } .nav > ul > li > a, .nav > ul + ul > li > a { font-size: 14px; line-height: 24px; padding: 5px 18px; } .disable-scroll .nav { overflow: auto; -webkit-overflow-scrolling: touch; } .dropdown-main { visibility: visible; opacity: 1; position: static; display: none; } .dropdown-main .shell { width: 100%; } .dropdown-main a { height: auto; } .dropdown-main a small { font-size: 10px; line-height: 1.2; } /* .dropdown-main a small { display: none; } */ .has-dropdown:hover .dropdown-main { display: block; } .has-dropdown > a:after { content: none !important; } .dropdown-main .ico-animated-holder { display: none; } .dropdown-main ul { width: auto; background: transparent; } .dropdown-main li { text-align: left; border-top: 0 none; border-left: 0 none !important; width: auto; padding: 0; float: none; } .dropdown-main li ~ li { border-top: 1px solid #e4dec7; } .dropdown-main li a { padding: 5px 20px; font-size: 14px; line-height: 16px; } .touch .has-dropdown { position: relative; } .touch .has-dropdown:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; cursor: pointer; z-index: 10; } .touch .has-dropdown:hover:after { display: none; } .dropdown-overlay { display: none; } .nav li a.link-order, .no-touch .nav li a.link-order:hover, .hi-dpi .nav li a.link-order, .hi-dpi.no-touch .nav li a.link-order:hover { background: #f8ac42; width: auto; height: auto; line-height: 24px; top: 0 !important; position: static; padding: 10px 8px; text-align: center; margin: 14px 20px; border-radius: 5px; } .nav li.current a.link-order, .hi-dpi .nav li.current a.link-order { background: #c62408; height: auto !important; top: 0 !important; padding: 8px !important; line-height: 24px; } .btn-login, .no-touch .btn-login:hover { position: static; top: 0; right: 0; margin: 0; display: block; margin: 0 20px 14px; border-radius: 5px; padding: 0; background: #8ac1b2; text-shadow: none; font-size: 14px; height: auto; padding: 0; } .btn-login:before, .btn-login .before, .btn-login:after, .btn-login .after, .btn-quote:before, .btn-quote .before, .btn-quote:after, .btn-quote .after { display: none; content: none; } .hi-dpi .btn-login, .hi-dpi .btn-quote { background-image: none; } .btn-quote, .no-touch .btn-quote:hover { position: static; top: 0; right: 0; margin: 0; display: block; margin: 0 20px 14px; border-radius: 5px; padding: 0; font-size: 14px; background: #c62408; } .hi-dpi .section-intro-nav { background: transparent; } .btn-order-l-container { height: 204px; margin-bottom: -30px; } .btn-order-l { margin-top: -185px; } .col-1of3 { width: 220px; } .col-1of3 + .col-1of3 { margin: 0 0 0 25px; } .col-1of4, .col-1of4 + .col-1of4 { width: 304px; margin: 0 30px; } .slider-testimonials.flex-init { width: 728px; } .slider-testimonials .slider-clip, .slider-testimonials .slide { width: 628px; } .slider-testimonials .slider-clip { margin: 0 auto; } .team-thumbs { width: 582px; margin: 0 auto; text-align: center; font-size: 0; } .team-thumb, .team-thumb + .team-thumb { margin: 0 15px 20px; float: none; display: inline-block; vertical-align: top; } .section-team .section-actions { padding-top: 8px; } .section-testing .section-body p br { display: none; } .section-testing .col-1of4 .list-checked { padding: 0; } .section-more .section-items-clip { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0,0,0); } .section-more .section-item-image { padding: 0; } .section-more .section-item-entry { width: 420px; padding: 10px 15px 0; } .products { width: 100%; margin: 0; } .product { margin: 0 6px; } .section-samples.section-bottom-border .product { height: 255px; } .section-works .section-description p, .section-pricing .section-description p { padding: 0 80px 18px; } .section-pricing { padding-bottom: 0; } .section-prices { padding-top: 20px; } .pricing-boxes { width: 748px; } .pricing-box { width: 354px; } .pricing-box p { font-size: 13px; } .pricing-box .list-checked { font-size: 11px; line-height: 16px; } .pricing-box .list-checked li { padding-left: 18px; background-position: 0 3px; } .pricing-box-head { padding: 12px 8px 10px 14px; } .pricing-box-body { padding: 0 6px 0 14px; min-height: 260px; } .pricing-box-foot { padding: 0 14px 12px; } .pricing-box-foot .btn { bottom: 12px; left: 12px; } .pricing-box-primary .pricing-box-head { padding: 8px 8px 10px 12px; } .pricing-box-primary .pricing-box-body { padding: 0 18px 0 12px; } .pricing-box-primary .pricing-box-foot { padding: 0 12px 8px; } .pricing-btns { left: 12px; } .ico-pricing { background-image: url(../png/pricing-sprite-tablet.png); } .ico-pricing-design { width: 142px; height: 128px; bottom: 10px; right: 18px; } .ico-pricing-coding { background-position: -143px 0; width: 143px; height: 122px; bottom: 10px; } .ico-pricing-responsive { background-position: -287px 0; width: 124px; height: 141px; bottom: 13px; } .ico-pricing-mailchimp { background-position: 0 -142px; width: 141px; height: 130px; bottom: 12px; } .ico-pricing-campaignmonitor { background-position: -142px -142px; width: 125px; height: 126px; bottom: 13px; } .ico-pricing-other { background-position: -268px -142px; width: 132px; height: 126px; bottom: 12px; right: 14px; } .hi-dpi .ico-pricing { background-image: url(../png/pricing-sprite-tablet%402x.png); -webkit-background-size: 412px 273px; background-size: 412px 273px; } .nav-works { margin: 0 -116px; } .process-step { width: 688px; padding: 0 20px 80px; } .process-step-image { width: 318px; } .process-step-image i { background-image: url(../png/how-it-works-sprite-tablet.png); } .process-step-image .ico-submit-order { background-position: 0 0; width: 242px; height: 204px; } .process-step-image .ico-hard-work { background-position: -243px 0; width: 287px; height: 232px; } .process-step-image .ico-testing-qa { background-position: 0 -233px; width: 245px; height: 262px; } .process-step-image .ico-files-delivery { background-position: -246px -233px; width: 256px; height: 231px; } .process-step-entry { width: 300px; padding: 0; } #step-coding h3 { padding-right: 80px; } .process-step-testing .process-step-image i { position: relative; margin-top: -54px; } .process-step-delivery .process-step-image i { position: relative; margin-top: -32px; } .hi-dpi .process-step-image i { background-image: url(../png/how-it-works-sprite-tablet%402x.png); -webkit-background-size: 532px 496px; background-size: 532px 496px; } .ico-about-team { background-position: 0 -308px; margin-left: -212px; } .slider-generic { float: none; margin: 0 auto; } .slider-contact { margin-bottom: 40px; } .section-contact { margin: 0; } .section-generic-entry { float: none; width: auto; text-align: center } .section-partners .section-description { margin-bottom: 60px; } .partners { width: 748px; } .partner { width: 354px; } .partner-body { padding-left: 20px; } .partner-logo { position: static; display: block; margin: 0 0 14px; } .form-order .order-type { padding: 0; width: 728px; } .order-type .radio-container, .order-type .radio-container + .radio-container { margin: 0; } .form-totals-container, .form-totals-fixed, .ios-device .form-totals-container { position: static; margin: 10px auto 0 !important; } .form-totals-container { width: auto !important; } .form-totals-container .form-group-title { display: block; } .form-totals, .form-reviews-container .form-totals { width: auto !important; max-width: 461px; margin: 0 auto; } .form-totals-inner, .form-reviews-container .form-totals { width: auto !important; } .page-thank-you-payment .section-headline { padding-left: 130px; padding-right: 130px; height: 136px; } .page-error-500 .section-headline { padding-left: 100px; padding-right: 100px; height: 136px; } .nav-toggle { background-image: url(../png/consistent-sprite-tablet.png); background-repeat: no-repeat; } .hi-dpi .nav-toggle { background-image: url(../png/consistent-sprite-tablet%402x.png); -webkit-background-size: 107px 73px; background-size: 107px 73px; } .mini-header .page-samples-detailed .header .shell { visibility: visible; opacity: 1; } .form-order { position: relative; width: 100%; } .form-order .form-body { position: static; } .form-totals-container { z-index: 1; } .col-nav { margin-left: 0; } .page-changes-on-existing-templates .section-services-generic .list-checked-large { padding-top: 0; padding-bottom: 16px; } .section-services-generic .shell > .cols > .col-1of2 { float: none; width: 360px; margin: 0 auto; } .section-services-generic .shell > .cols > .col-consultation { float: none; width: 455px; margin: 0 auto; } .cols-recipe h4 { text-align: center; } .cols-recipe .col-1of2 { float: none; margin: 10px auto 0; overflow: hidden; } .cols-recipe .col-1of2 ~ .col-1of2 { float: none; } .products-curated { width: 484px; margin: 0 auto; } .section-sample .col-1of2, .section-sample .col-1of2 + .col-1of2, .section-sample .cols.cols-reversed .col-1of2, .section-sample .cols.cols-reversed .col-1of2 + .col-1of2 { flex: 0 0 100%; max-width: 100%; margin: 0; padding-top: 0; } .section-sample .cols.cols-reversed { flex-direction: column-reverse; } .section-sample .col-1of2 img { margin: 0 auto; } .section-sample .col-1of2 + .col-1of2, .section-sample .cols.cols-reversed .col-1of2 { max-width: 300px; margin: 0 auto 20px; padding-top: 30px; } .section-sample .cols.cols-reversed .col-1of2 + .col-1of2 { width: 100%; } .attestment { margin-top: 20px; } .page-mailchimp-expert .ico-recipe-retina { top: -24px; position: relative; } .cols-expert-pricing { padding: 0; } .cols-expert-pricing .col-1of2 { float: none; width: 100%; padding: 20px 0; } .cols-expert-pricing .col-1of2 ~ .col-1of2 { margin: 0; } .logo-mailchimp { width: 160px; height: auto; } .cols-features .col-1of2, .cols-features .col-1of2 ~ .col-1of2 { float: none; margin: 0 auto; } .recipe-prices .ico-recipe-testing { left: -20px; } .contact-address-left, .contact-address-right { float: none; width: auto; } .contacts-items dt { float: none; display: inline; } .section-thanks-subscribe > p { font-size: 12px; } .section-store-template .section-body { text-align: left; position: relative; } .store-template-preview-mobile, .store-template-preview-desktop { margin: 0; } .store-template-preview-mobile { position: absolute; bottom: 0; left: 50%; margin-left: 200px; } .btn-template-option { margin: 0 4px; padding-left: 44px; padding-right: 12px; } .btn-template-option i { left: 22px; } .btn-template-option .price { width: 68px; font-size: 24px; } .btn-template-buy { padding-left: 80px; } .box-buy-template { padding: 20px; } .box-buy-template .box-content { width: 340px; } .page-thank-you .section-description .section-subtitle { font-size: 24px; } .form-buy { margin-left: 0; } .footer-nav, .section-pricing-nav, .box-order .box-back-hand, .box-order .box-back-girl, .box-order .box-back-shadow, .box-order .box-back-arm, .form-totals-container .hand, .form-totals-container .arm, .col-subscribe, .ico-expert { display: none; } .section-intro-nav { background: transparent; height: auto; text-align: center; } .intro-slider-nav { top: 0; } .intro-slider-nav li { float: none; display: inline; padding: 0; font-size: 0; line-height: 0; width: auto; height: auto; } .intro-slider-nav li a { display: inline-block; vertical-align: top; width: 22px; height: 22px; position: relative; overflow: hidden; } .intro-slider-nav .ico-animated-label { display: none; } .intro-slider-nav .ico-animated-holder { width: 22px; height: 22px; margin: 0; padding: 0; position: absolute; top: 0; left: 0; } .intro-slider-nav .ico-animated { width: 14px; height: 14px; background: #ccc; border-radius: 8px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; } .intro-slider-nav .current .ico-animated { background: #8ac1b2; } .blog .footer { position: static; } } @media screen and (max-width: 767px) { body { min-width: 320px; } .shell { width: 280px; } .wrapper-blog .shell { width: calc(100% - 24px); } .top-bar { height: 40px; } .top-bar-message { font-size: 11px; line-height: 14px; padding: 0 15px; position: relative; top: 50%; } .top-bar-message { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .footer .shell { width: 300px; text-align: center; } .footer-bar .copyright { float: none; padding: 0 0 8px; } .footer-bar .cards, .footer-bar .credits { float: none; } .footer-push { height: 68px; } .container { padding-top: 72px; } .page-home .container { padding-top: 194px; } .section p, .section dl { font-size: 16px; } .section p.small-print { font-size: 10px; } .section-samples .section-description p { padding-left: 24px; padding-right: 24px; } .section-subtitle { font-size: 22px; } .col-1of3, .col-1of3 + .col-1of3, .col-1of4, .col-1of4 + .col-1of4 { margin: 0; float: none; width: auto; display: block; } .team-thumbs { width: 300px; } .team-thumb, .team-thumb + .team-thumb { margin: 0 0 20px 30px; } .slider-testimonials, .slider-testimonials .slide { width: 280px; left: 0; } .slider-testimonials .slider-clip { width: 280px; padding: 0 0 30px; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0,0,0); } .slider-testimonials.flex-init { width: 391px; } .slider-testimonials.flex-init .flex-control-nav, .slider-testimonials .slider-paging { bottom: 8px; position: absolute; width: 100%; left: 0; } .slider-testimonials.flex-init .flex-prev, .slider-testimonials.flex-init .flex-next, .slider-testimonials .slider-nav a { top: auto; bottom: 0; z-index: 10; } .section-testimonials .section-subtitle { padding: 0 30px 26px; } .section-testing .section-subtitle { padding: 0 50px 26px; } .section-testing .section-body p { padding: 0 5px 28px; } .nav { padding-top: 140px; } .nav-tabbed-inner { display: block; height: auto; } .nav-tabbed li { display: block; } .nav-tabbed li + li { margin: 0; } .nav-tabbed a, .nav-tabbed label { display: block; border-radius: 7px; } .nav-tabbed .current a, .nav-tabbed .current label { background: #e05333; display: block; } .section-more .section-item-image { float: none; width: auto; } .section-more .section-item-entry { float: none; width: auto; padding: 10px 0 0; text-align: center; } .section-more .section-items-arrows { display: block; } .process-step-alt .process-step-image { float: none; } .process-step-delivery .process-step-image i { margin-left: -17px; } .section-more .section-body { padding: 0 20px 30px; position: relative; margin: 0 -20px; } .section-more .section-items { position: relative; } .section-more .nav-tabbed { top: auto; bottom: 8px; padding: 0; } .section-more .nav-tabbed-inner, .hi-dpi .section-more .nav-tabbed-inner { background: transparent; border-radius: 0; text-align: center; padding: 0; } .section-more .nav-tabbed ul { font-size: 0; } .section-more .nav-tabbed li { display: inline; float: none; } .section-more .nav-tabbed a, .section-more .nav-tabbed a.current, .section-more .nav-tabbed .current a { display: inline-block; vertical-align: top; font-size: 0; line-height: 0; text-indent: -9999px; width: 22px; height: 22px; padding: 0; border-radius: 0; background: transparent; position: relative; } .section-more .nav-tabbed li span { width: 14px; height: 14px; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; border-radius: 8px; background: #ccc; } .section-more .nav-tabbed li.current span { background: #e05333; } .section-more.flex-init .flex-direction-nav { display: block; } .section-intro { padding: 0 0 30px; } .section-logos h5 { margin-bottom: 25px; } .slider-logos .slick-dots { margin-top: 25px; } .section-nav { padding-bottom: 20px; } .section-nav .nav-tabbed, .form-quote .nav-tabbed { display: block; padding: 0; } .section-works .section-description p, .section-pricing .section-description p { padding-left: 20px; padding-right: 20px; } .product { float: none; margin: 0 auto; } .products-secondary .product { width: 222px; margin: 0 auto 30px; } .products-secondary .product:last-child { margin-bottom: 0; } .section-process { padding-bottom: 0; } .section-process .shell, .form-order, .form-quote, .section-about .section-description, .hi-dpi .section-process .shell, .hi-dpi .form-order, .hi-dpi .form-quote, .hi-dpi .section-about .section-description { background: transparent; } .process-step { width: 280px; padding: 0 0 40px; } .process-step-image { width: auto; padding: 0 0 20px; } .process-step-image i { margin-left: auto; margin-right: auto; } .process-step-entry { width: auto; } .pricing-boxes { width: 300px; margin: 0 auto; } .pricing-boxes-alt { width: 341px; margin: 0 auto; } .pricing-box-alt { margin-bottom: 20px; } .pricing-box-alt-full { width: 253px; } .pricing-box-alt-full .list-checked { column-count: 1; } .pricing-box { width: 300px; margin: 0 0 20px; } .pricing-box-body, .pricing-box-primary .pricing-box-body { min-height: 0; padding-bottom: 20px; padding-left: 10px; padding-right: 4px; } .pricing-box-foot .btn { z-index: 5; } .ico-pricing-design, .ico-pricing-coding, .ico-pricing-responsive, .ico-pricing-mailchimp, .ico-pricing-campaignmonitor, .ico-pricing-other { bottom: 8px; right: 8px; } .section-generic { padding-top: 20px; } .section-faq .section-description, .section-policies .section-description, .section-about .section-description { padding: 0 0 10px; background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; } .hi-dpi .section-faq .section-description, .hi-dpi .section-policies .section-description, .hi-dpi .section-about .section-description { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; background-position: 50% 100%; background-repeat: repeat-x; } .section .order-terms p { font-size: 11px; } .section .form-group p, .section .form-quote p { font-size: 14px; } .form-group, .form-order .form-row, .email-software .cols, .form-quote .form-body { width: auto; } .email-software .col-1of2, .email-software .col-1of2 + .col-1of2, .form-order .form-row .col-1of2, .form-order .form-row .col-1of2 + .col-1of2, .form-row .col-1of2, .form-row .col-1of2 + .col-1of2 { float: none; margin: 0; width: auto; } .form-row .col-1of2 + .col-1of2 { padding-top: 24px; } .form-order .checkbox { display: block; } .field, .field-s, .textarea, .form-order .field, .form-order .field-s, .form-order .textarea { width: calc(100% - 28px); } .field-phone { width: calc(100% - 58px); } .form-order .order-type { width: auto; padding: 2px; background: #f2ecce; border-radius: 9px; } .order-type .radio-container, .order-type .radio-container + .radio-container { float: none; display: block; width: auto; height: auto; margin: 0; } .order-type .radio, .box-order { width: auto; height: auto; } .order-type h4 { font-size: 17px; line-height: 37px; padding: 0 20px; border-radius: 7px; color: #445361; } .order-type .checked h4 { color: #fff; background: #e05333; } .box-order .box-front, .hi-dpi .box-order .box-front { background: transparent; position: static; width: auto; height: auto; padding: 0; cursor: pointer; } .section-clients .section-description p { padding-left: 30px; padding-right: 30px; } .partners { width: auto; margin: 0; } .partner { width: auto; float: none; margin: 0 0 20px; } .section .partner p { font-size: 14px; } .section-testing .section-subtitle { padding-left: 20px; padding-right: 20px; } .section-generic h3 { font-size: 30px; line-height: 36px; } .section-generic h5 { font-size: 18px; line-height: 24px; } .section-about + .section-generic p { font-size: 14px; } .section-about + .section-generic p br { display: none; } .entry-actions .btn { margin: 0; } .entry-actions .btn + .btn { margin: 20px 0 0; } .section-spaced { padding-bottom: 60px; } .slider-generic, .slider-generic .slide { width: 280px; } .slider-generic .slider-clip { width: 280px; height: 183px; } .slider-generic .slides { height: 183px; } .slider-generic .slider-mask { background: url(../about-slider-overlay-mobile.html); width: 280px; height: 183px; } .slider-generic.slider-contact { height: 215px; } .slider-generic.slider-contact .slider-clip, .slider-generic.slider-contact .slides { height: 215px; } .slider-generic.slider-contact .slider-mask { background-position: 0 -184px; height: 215px; } .slider-generic .slider-mask { background-image: url(../png/mobile-slider-overlays.png); } .hi-dpi .slider-generic .slider-mask { background-image: url(../png/mobile-slider-overlays%402x.png); -webkit-background-size: 280px 399px; background-size: 280px 399px; } .slider-generic .slider-nav a, .slider-generic .flex-direction-nav a { top: 80px; } .section-about { padding-bottom: 10px; } .section-about .section-description { margin: 0; } .page-mailchimp-tags .section-about, .page-campaignmonitor-tags .section-about { padding-bottom: 30px; } .section-works .section-description { padding-bottom: 0; background: url(../png/dotted-horizontal.png) 50% 100% repeat-x; } .hi-dpi .section-works .section-description { background-image: url(../png/dotted-horizontal%402x.png); -webkit-background-size: 3px 1px; background-size: 3px 1px; } .container.no-order-btn, body.page-order-now .container, body.page-request-quote .container, body.page-for-agencies .container, body.page-first-order-free .container, body.page-mailchimp-expert .container { padding-top: 72px; } .section-contact { padding-bottom: 10px; } .section-contact .section-description { padding-bottom: 10px; } .section-pricing .section-headline { padding-left: 50px; padding-right: 50px; } .pricing-box .list-checked li { padding-left: 15px; } .page-request-quote .form-sending-overlay { top: -140px; } .col-contacts { float: none; margin: 0 auto; } .footer .contacts { text-align: left; } .section-services-generic .shell > .cols > .col-1of2 { width: auto; margin: 0; } .form-consultation { width: 260px; background: #fff; border: 2px solid #efdfcd; border-radius: 10px; padding: 8px; margin: 0 auto; height: auto; } .form-consultation h4 { padding-bottom: 8px; text-align: center; } .form-consultation:after { content: none; } .form-consultation .form-col { padding-bottom: 0; } .form-consultation .form-col ~ .form-col { padding-top: 10px; } .form-consultation .field, .form-consultation .textarea { width: 232px; } .form-consultation .form-row-subscribe .checkbox { padding-left: 22px; position: relative; } .form-consultation .form-row-subscribe .checkbox .custom-checkbox { position: absolute; top: 2px; left: 0px; } .form-consultation .btn { display: block; width: 100%; } .list-checked-large { font-size: 20px; line-height: 26px; } .list-checked-large li { padding-left: 28px; padding-bottom: 18px; background-position: 0 5px; } .cols-recipe h4 { padding-bottom: 16px; } .cols-recipe .col-1of2 { width: auto; } .recipe-image { float: none; width: auto; padding-bottom: 12px; } .recipe-content { float: none; width: auto; } .recipe-content p { padding-bottom: 20px; } .products-curated { width: auto; margin: 0; } .counters-container { width: auto; margin: 0 0 20px; } .counter { margin: 0 auto; } .counter-projects, .counter-clients { float: none; } .digits { margin: 0 auto; } .mid-text { display: block; top: 0; margin: 16px 0 0; } .recipe-pricing { margin-bottom: 20px; width: auto; } .attestment { padding: 20px 10px; } .attestment h3 { font-size: 24px; } .attestment p { font-size: 13px; padding: 0 0 20px; } .cols-features .col-1of2 { width: auto; } .table-discounts th, .table-discounts td { font-size: 12px; padding: 5px; } .img-for-agencies { float: none; display: block; width: 100%; height: auto; } .attached-file .progress { width: 50px; } .form-order .attached-file .checkbox { display: inline-block; } .section-thanks-subscribe > p { font-size: 12px; margin: 0 auto; max-width: 280px; } .interactive-demos { max-width: 302px; position: relative; margin: 0 -11px; } .interactive-demo { margin: 10px 0 20px; float: none; } .section-stand-out .section-body p br { display: none; } .section-services-generic .section-description p br { display: none; } .popular-platform { padding: 0; float: none; width: auto; text-align: center; } .ico-platform, .ico-platform-klaviyo { display: block; position: static; margin: 0 auto 20px; } .page-client-area .container { padding-top: 30px; } .section-client-area .section-aside, .section-client-area .section-content { width: auto; float: none; margin: 0; } .section-client-area .section-content { text-align: center; padding: 20px 0 0; } .section-client-area .section-content p { font-size: 20px; line-height: 24px; } .section-client-area .section-content .btn ~ .btn { margin: 10px 0 0; } .section-client-area .form-login, .hi-dpi .section-client-area .form-login { background-image: none; width: auto; } .section-client-area .form-login { background-color: #fff; width: 260px; border: 2px solid #efdfcd; border-radius: 10px; padding: 8px; margin: 0 auto; height: auto; text-align: center; position: static; } .section-client-area .form-login .form-head { padding: 0 0 8px; position: static; } .section-client-area .form-login .form-body { padding: 0; position: static; } .section-client-area .form-login .form-actions { padding: 0; position: static; } .section-client-area .form-login .field { width: 232px; } .section-client-area .form-login .checkbox { text-align: left; display: block; padding-top: 0; margin: 0; } .section-client-area .form-login .form-row { min-height: 0; } .section-client-area .form-login .form-actions .btn { display: block; width: 100%; } .section-client-area .form-login .forgot-trigger { line-height: 2.2; margin-top: 10px; display: inline-block; vertical-align: top; margin-left: 0; } .section-client-area .form-forgot .cancel-trigger { line-height: 2.2; margin-top: 10px; display: inline-block; vertical-align: top; margin-left: 0; } .store-templates { margin-left: 0; margin-right: 0; } .store-template { margin: 0 0 40px; width: 280px; } .store-template-thumb { width: 278px; height: auto; } .store-template-preview { width: 278px; height: 278px; margin: 0; } .store-template-preview-mobile { display: block; margin: 0 auto 20px; position: static; height: 231px; padding-bottom: 45px; } .store-template-preview-mobile .store-template-preview { height: 231px; border-radius: 0 0 2px 2px; } .section-store-template .section-description { padding: 0; } .btn-template-option { display: block; margin: 0 auto; padding-left: 60px; } .btn-template-option ~ .btn-template-option { margin-top: 10px; } .btn-template-option i { left: 30px; } .btn-template-buy { padding-left: 85px; } .preview { width: auto; margin: 0 10px 80px; } .preview img { width: 100%; height: auto; } .form-customization p { font-size: 13px; } .form-customization .shell { width: 280px; } .form-customization .col-1of2 { width: 280px; margin: 0; float: none; } .form-customization .col-1of2 ~ .col-1of2 { width: 280px; margin: 10px 0 0; float: none; } .form-customization .form-section { margin: 20px 0 0; } .form-customization .textarea { height: 100px; } .box-buy-template { margin: 0; padding: 10px; } .box-buy-template .box-preview, .box-buy-template .box-content { float: none; width: auto; } .box-buy-template .box-preview img { width: 256px; margin: 0 0 20px; box-shadow: none; border-radius: 4px; } .box-buy-template .price { float: none; margin: 0; } .section-filters label { display: block; margin-bottom: 10px; } .section-filters .dk-select { margin-bottom: 10px; } .form-newsletter:before { left: 72px; } .form-newsletter .form-body { padding: 0 20px; } .form-newsletter .field { width: 212px; } .form-newsletter .response { font-size: 13px; } .page-newsletter-signup .section-description br { display: none; } .form-buy { padding-top: 20px; } .form-buy .field { width: 230px; } .form-buy .field.select { width: 252px; } .form-buy .nav-tabbed { text-align: center; } .form-buy .nav-tabbed ul { margin-bottom: 0; } .nav-tabbed-active, .section-nav .nav-tabbed:before, .section-nav .nav-tabbed:after, .section-nav .nav-tabbed > .before, .section-nav .nav-tabbed > .after, .section-sample .section-nav, .section-works-nav, .process-step-number, .process-end, .section-faq .section-nav, .section-policies .section-nav, .nav-tabbed-extended li small, .box-order .box-back, .box-order .box-front p, .box-order .btn, .section-clients-feedback .arrow-more, .ico-about-team, .col-nav, .form-mascot, .section-recipe .section-head br, .recipe-prices i, .section-hiw, .intro-client-area, .section-client-area .form-login .form-mascot, .store-template-preview-desktop { display: none; } } /* ========================================================================== # single product ========================================================================== */ .single-product .section:last-of-type, .page-store .section:last-of-type { border-bottom: none; } .single-product .section:last-of-type { margin-bottom: -190px; } .page-store .section:last-of-type:not(.section-store) { margin-bottom: -200px; } /* ========================================================================== # magnific popup ========================================================================== */ .mfp-screenshots { background: rgba(0,0,0,.2) !important; } .mfp-screenshots .mfp-content:before { content: ''; width: 100%; height: 3px; background: #E05333; position: absolute; z-index: 1; top: 0; } .mfp-screenshots .mfp-iframe-holder { padding: 0; } .mfp-screenshots .mfp-iframe-holder .mfp-content { height: 100%; width: 100%; max-width: none; } .mfp-screenshots .mfp-iframe-holder .mfp-arrow:before{ color: black; } .mfp-screenshots .mfp-iframe-holder .mfp-close { color: #fff; top: 0; right: 28px; width: auto; padding: 0 15px; background: #E05333; opacity: 1; border-radius: 0 0 6px 6px; } .mfp-screenshots .mfp-iframe-holder .mfp-close:hover { opacity: 0.9; } .mfp-screenshots .mfp-iframe-scaler iframe { background: url('../gif/loading-popup.gif') no-repeat scroll center center #fff !important; } /* ========================================================================== # gravity forms ========================================================================== */ .form-store-subscribe .gform_wrapper { position: relative; padding-bottom: 105px; } .form-store-subscribe .gform_wrapper:before, .form-store-subscribe .gform_wrapper:after { content: ''; clear: both; display: table; height: 0; overflow: hidden; width: 100%; } .form-store-subscribe .gform_wrapper label { display: none; } .form-store-subscribe ul.gform_fields { padding: 0; margin: 0; list-style-type: none; } .form-store-subscribe .gfield_label { display: none; } .form-store-subscribe .gfield input { background: #fff; border: 1px solid #e8dfbf; border-radius: 3px; box-shadow: 0 0 0 3px #f6f0e4; margin: 3px; display: block; line-height: 22px; padding: 5px 10px; width: 100%; -webkit-appearance: none; display: inline-block; box-sizing: border-box; color: #445361; } .form-store-subscribe .gfield input:focus { border-color: #c69c6d; box-shadow: 0 0 0 3px #ecddca; } .form-store-subscribe .gform_wrapper.gform_wrapper ul.gform_fields li.gfield { display: inline-block; vertical-align: top; width: 29%; } .form-store-subscribe .gform_wrapper.gform_wrapper ul.gform_fields li.gfield + li.gfield { margin-left: 26px; } .form-store-subscribe .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description { color: #cd4c2f; font-size: 11px; text-align: left; margin-left: 4px; } .form-store-subscribe .gform_wrapper div.validation_error { display: none; } .form-store-subscribe .gform_wrapper .gform_footer { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; } .form-store-subscribe .gform_wrapper .gform_footer:before, .form-store-subscribe .gform_wrapper .gform_footer:after { content: ''; position: absolute; top: 50%; height: 1px; background: #d7d8d5; width: 9999px; right: calc(100% + 10px); } .form-store-subscribe .gform_wrapper .gform_footer:after { left: calc(100% + 10px); } .form-store-subscribe .gform_wrapper .gform_footer input.button, .form-store-subscribe .gform_wrapper .gform_footer input[type=submit], .form-store-subscribe .gform_wrapper .gform_page_footer input.button, .form-store-subscribe .gform_wrapper .gform_page_footer input[type=submit] { background-color: #e05333; font-size: 30px; line-height: 52px; padding: 0 20px; display: inline-block; vertical-align: top; border-radius: 6px; color: #fff; text-decoration: none; text-transform: uppercase; text-align: center; } .form-store-subscribe .gform_wrapper .gform_footer input.button:hover, .form-store-subscribe .gform_wrapper .gform_footer input[type=submit]:hover, .form-store-subscribe .gform_wrapper .gform_page_footer input.button:hover, .form-store-subscribe .gform_wrapper .gform_page_footer input[type=submit]:hover { background-color: #e05333; } .form-store-subscribe .gform_ajax_spinner { width: 48px; height: 48px; display: block; position: absolute; top: -54px; left: 50%; margin-left: -24px; } .form-store-subscribe .gform_confirmation_message { font-family: 'GothamCondensed', arial, sans-serif; font-weight: normal; font-size: 26px; text-align: center; padding: 30px 100px; } @media screen and (max-width: 767px) { .form-store-subscribe .gform_wrapper.gform_wrapper ul.gform_fields li.gfield { width: 100%; } .form-store-subscribe .gform_wrapper.gform_wrapper ul.gform_fields li.gfield + li.gfield { margin: 0; } .form-store-subscribe .gform_confirmation_message { padding: 30px 0; } } /* ========================================================================== # wordpress admin bar ========================================================================== */ .admin-bar .header { top: 32px; } .admin-bar .dropdown-overlay { top: 142px; } @media screen and (max-width: 1024px), screen and (max-width: 1280px) { .admin-bar .header { top: 0; } .admin-bar .nav { top: 32px; } .admin-bar .mini-header .header { top: 46px; } .touch.disable-scroll .admin-bar .header { top: 32px; } } @media screen and (max-width: 767px) { .admin-bar .nav { top: 46px; } .touch.disable-scroll .admin-bar .header { top: 46px; } } /* ========================================================================== # Section Features ========================================================================== */ .ico-check { background-image: url(../png/ico-check.png); width: 19px; height: 23px; background-size: contain; background-repeat: no-repeat; display: inline-block; } .section-features { } .section-features .section-head { margin-bottom: 36px; } .section-features .section-head .section-title { padding-bottom: 14px; } .section-features .section-head .section-subtitle { line-height: 1.5; } .features { box-sizing: border-box; text-align: left; display: flex; flex-wrap: wrap; justify-content: space-between; } .feature { box-sizing: border-box; display: inline-block; vertical-align: top; width: 31%; margin-bottom: 65px; padding: 0 5px; font-size: 16px; } .feature .feature-head { position: relative; padding-left: 35px; margin-bottom: 15px; } .feature .feature-head h3 { font-size: 30px; font-family: 'GothamCondensed', arial, sans-serif; font-weight: 500; } .feature .feature-head .ico-feature { position: absolute; left: 0; top: 9px; } .feature .feature-body p { padding-bottom: 0; } .features-alt .feature { width: 49%; } .features-alt .feature-body { width: 58%; display: inline-block; } .features-alt .feature-footer { display: inline-block; margin-left: 10px; } .features-alt .ico-works-quality { display: inline-block; } .features-alt .ico-transition-platforms { display: inline-block; margin: 0; } .ico-email-graphics { background-image: url(../png/ico-email-graphics.png); width: 91px; height: 145px; background-size: contain; background-repeat: no-repeat; display: inline-block; } .hi-dpi .ico-email-graphics { background-image: url(../png/ico-email-graphics%402x.png); } .ico-launching-campaingn { background-image: url(../png/ico-launching-campaingn.png); width: 141px; height: 127px; background-size: contain; background-repeat: no-repeat; display: inline-block; } .hi-dpi .ico-launching-campaingn { background-image: url(../png/ico-launching-campaingn%402x.png); } .ico-pros-cons { background-image: url(../png/ico-pros-cons.png); width: 162px; height: 146px; background-size: contain; background-repeat: no-repeat; display: inline-block; } .hi-dpi .ico-pros-cons { background-image: url(../png/ico-pros-cons%402x.png); } .ico-best-practices { background-image: url(../png/ico-best-practices.png); width: 140px; height: 189px; background-size: contain; background-repeat: no-repeat; display: inline-block; } .hi-dpi .ico-best-practices { background-image: url(../png/ico-best-practices%402x.png); } .ico-dark-mode { background-image: url(../png/ico-dark-mode.png); width: 120px; height: 100px; background-size: contain; background-repeat: no-repeat; display: inline-block; } .hi-dpi .ico-dark-mode { background-image: url(../png/ico-dark-mode%402x.png); } @media screen and (max-width: 767px) { .section-features .section-subtitle br { display: none; } .features-alt .feature { width: 100%; } .features-alt .feature-body { width: 100%; } .features-alt .feature-footer { width: 100%; } .features-alt .feature-footer i { display: block; margin: 24px auto 0; } .feature { width: 100%; margin-bottom: 35px; padding: 0; } } /* ========================================================================== # Website Development Form ========================================================================== */ .form-website-development { height: 410px; } .form-website-development:after { background-image: url(../png/box-consultation-small.png); } .hi-dpi .form-website-development:after { background-image: url(../png/box-consultation-small%402x.png); background-size: 453px 336px; } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main {} .main .main__title { margin-bottom: 60px; color: #e35130; font-size: 36px; line-height: 1; } /* ------------------------------------------------------------ *\ Holiday Banner \* ------------------------------------------------------------ */ .holiday-banner { background: #fcfaf4; font-size: 12px; line-height: 16px; border: 1px solid #e5dbb6; padding: 12px 27px 12px 44px; text-align: left; position: relative; margin-bottom: 13px; } .holiday-banner:before { content: ''; background: url('../svg/ico-error.svg'); position: absolute; left: 13px; top: 13px; width: 20px; height: 20px; } /* ------------------------------------------------------------ *\ Bar Featured \* ------------------------------------------------------------ */ .bar-featured { position: fixed; bottom: 0; left: 0; width: 100%; background: #fffcd5; text-align: center; font-weight: 700; font-family: Bryant, sans-serif; z-index: 50; overflow: hidden; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out; transition: transform .3s ease-in-out; } body.top-bar-visible .bar-featured { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .bar-featured .bar-inner { height: 50px; padding: 15px 50px; align-items: center; justify-content: center; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .bar-featured a { text-decoration: none; border-bottom: 1px solid #c6c7af; } .bar-featured .highlighted { border-bottom: 1px solid #f4c7a4; } .bar-featured .bar-close { display: inline-block; background: url(../png/ico-close-bar.png) 50% no-repeat; width: 13px; height: 13px; position: absolute; top: 18px; right: 18px; border-bottom: 0; } .hi-dpi .bar-featured .bar-close { background-image: url(../png/ico-close-bar%402x.png); -webkit-background-size: 13px 13px; background-size: 13px 13px; } /* Admin Bar */ .admin-bar .bar-featured { z-index: 5; } /* Header*/ .mini-header .bar-featured.active + .header { top: 0 !important; } .mini-header .admin-bar .bar-featured.active + .header { top: 32px !important; } /* Container */ .bar-featured ~ .container { -webkit-transition: padding-top .3s ease-in-out; -moz-transition: padding-top .3s ease-in-out; -ms-transition: padding-top .3s ease-in-out; -o-transition: padding-top .3s ease-in-out; transition: padding-top .3s ease-in-out; } /*.bar-featured.active ~ .container { padding-top: 182px; }*/ @media(max-width: 1023px){ .bar-featured, .admin-bar .bar-featured { position: absolute; } .mini-header .bar-featured { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } /* .admin-bar .bar-featured.active + .header, .mini-header .bar-featured.active + .header, .mini-header .admin-bar .bar-featured.active + .header { top: 50px !important; }*/ .touch.disable-scroll .admin-bar .bar-featured.active + .header { position: absolute; } /*.bar-featured.active ~ .container { padding-top: 122px; }*/ .bar-featured ~ .header .nav { -webkit-transition: transform .5s ease, padding-top .3s ease-in-out; -o-transition: transform .5s ease, padding-top .3s ease-in-out; transition: transform .5s ease, padding-top .3s ease-in-out; } /*.bar-featured.active ~ .header .nav { padding-top: 105px; }*/ } @media(max-width: 767px){ .bar-featured .bar-inner { padding: 0 15px; } .bar-featured h4 { font-size: 14px; } } /* ------------------------------------------------------------ *\ Section Promo \* ------------------------------------------------------------ */ .section-promo { padding: 72px 0 32px; } .section-promo .section-inner { max-width: 700px; margin: 0 auto; } .section-promo .section-head { padding: 0 0 30px; } .section-promo .section-title { padding: 0 0 23px; } .section-promo .section-subtitle { padding: 0; font-size: 26px; } .section-promo .section-image { max-width: 735px; margin: 0 auto 65px; } .section-promo .section-image img { display: inline-block; margin-bottom: 20px; max-width: 100%; height: auto; } .section-promo .section-image figcaption { line-height: 1.56; } .section-promo .section-groups { margin: 0 -37px; } .section-promo .section-groups:after { content: ''; display: table; width: 100%; clear: both; } .section-promo .section-group { float: left; width: calc(50% - 74px); padding: 0 37px; } .section-promo .section-group-title { margin-bottom: 14px; font-weight: normal; font-size: 44px; line-height: 1.14; font-family: 'GothamCondensed', arial, sans-serif; } .section-promo .section-group-subtitle { margin-bottom: 21px; font-weight: normal; font-size: 26px; line-height: 1.38; font-family: 'GothamCondensed', arial, sans-serif; } /* Section Promo Featured */ .section-promo-featured { padding: 87px 0 72px; text-align: left; } .section-promo-featured .section-title { padding-bottom: 28px; font-size: 80px; } .section-promo-featured .section-container:after { content: ''; display: table; width: 100%; clear: both; } .section-promo-featured .section-content, .section-promo-featured .section-aside { float: left; width: 50%; } .section-promo-featured .section-aside { padding: 10px 0; } .section-promo-featured .section-aside img { max-width: 100%; height: auto; } @media(max-width: 767px){ .section-promo { padding: 32px 0; } .section-promo .section-groups { margin: 0; } .section-promo .section-group { float: none; width: 100%; padding: 0; } .section-promo .section-group-title { font-size: 30px; } .section-promo .section-subtitle, .section-promo .section-group-subtitle { font-size: 22px; } /* Section Promo Featured */ .section-promo-featured { padding: 80px 0 32px; } .section-promo-featured .section-title { font-size: 56px; } .section-promo-featured .section-content, .section-promo-featured .section-aside { float: none; width: 100%; } } /* ------------------------------------------------------------ *\ Section Confirmation \* ------------------------------------------------------------ */ .section-confirmation { padding: 80px 0 90px; text-align: center; } .section-confirmation .section-head { margin-bottom: 25px; } .section-confirmation .section-title { padding-bottom: 25px; font-size: 80px; } .section-confirmation .section-subtitle { font-size: 26px; line-height: 1.38; } .section-confirmation .section-body { margin-bottom: 27px; } .section-confirmation .section-foot p { margin-bottom: 30px; } @media(max-width: 767px){ .section-confirmation .section-title { font-size: 56px; } .section-confirmation .section-subtitle { font-size: 22px; } } /* ------------------------------------------------------------ *\ Steps \* ------------------------------------------------------------ */ .steps, .steps * { box-sizing: border-box; } .steps { position: relative; list-style: none; counter-reset: step; } .steps:before { content: ''; position: absolute; top: 50px; left: 15%; width: 66%; border-top: 1px dashed #cececc; } .steps:after { content: ''; display: table; width: 100%; clear: both; margin: 0 -35px; } .steps .step { float: left; width: 33.33%; padding: 0 35px; } .steps .step:before { position: relative; z-index: 5; counter-increment: step; content: counter(step); display: inline-block; width: 100px; height: 100px; margin-bottom: 25px; border: 1px solid #e9e0c2; border-radius: 100%; background: #f7f2e0; color: #e05333; font-weight: normal; font-family: 'GothamCondensed', arial, sans-serif; font-size: 60px; -webkit-box-shadow: 0 0 0 3px #f7f1e5; box-shadow: 0 0 0 3px #f7f1e5; } .step { line-height: 1.56; } .step .step-title { margin-bottom: 20px; font-weight: normal; font-size: 26px; font-family: 'GothamCondensed', arial, sans-serif; line-height: 1.38; } @media(max-width: 1023px){ .steps { margin: 0 -10px; } .steps .step { padding: 0 10px; } } @media(max-width: 767px){ .steps:before { display: none; } .steps .step { float: none; width: 100%; margin-bottom: 30px; } .steps .step:before { width: 70px; height: 70px; font-size: 42px; } .step .step-title { font-size: 22px; } } /* ------------------------------------------------------------ *\ Number \* ------------------------------------------------------------ */ .number { margin-bottom: 42px; color: #e05333; } .number h6 { margin-bottom: 12px; font-weight: normal; font-size: 22px; font-family: 'GothamCondensed', arial, sans-serif; } .number strong { display: inline-block; padding: 10px 32px; border: 2px dashed #cececc; border-radius: 5px; font-size: 36px; font-family: Bryant, sans-serif; } /* ------------------------------------------------------------ *\ List Ckechs \* ------------------------------------------------------------ */ .list-checks { margin-bottom: 25px; list-style: none; font-weight: normal; font-size: 26px; line-height: 1.38; font-family: 'GothamCondensed', arial, sans-serif; } .list-checks li { display: inline-block; padding: 0 17px; } .list-checks i { top: 0; vertical-align: middle; } @media(max-width: 767px){ .list-checks { font-size: 22px; } } /* ------------------------------------------------------------ *\ Form Voucher \* ------------------------------------------------------------ */ .page-voucher-promo .btn-quote { display: none; } .form-voucher { margin-bottom: 50px; } .form-voucher * { box-sizing: border-box; } .form-voucher .form-content { position: relative; margin-bottom: 50px; border-radius: 25px; padding: 2px; background-color: #efdfcd; background:-webkit-linear-gradient(to right, #efdfcd, #fcfaf4, #efdfcd); background: -o-linear-gradient(to right, #efdfcd, #fcfaf4, #efdfcd); background:linear-gradient(to right, #efdfcd, #fcfaf4, #efdfcd); } .form-voucher .form-inner { position: relative; padding: 20px 10px 0; border-radius: 23px; background-color: #fffefd; background:-webkit-linear-gradient(to right, #fffefd, #fcfaf4, #fffefd); background: -o-linear-gradient(to right, #fffefd, #fcfaf4, #fffefd); background:linear-gradient(to right, #fffefd, #fcfaf4, #fffefd); } .form-voucher .form-content:before, .form-voucher .form-content:after { content: ''; position: absolute; bottom: -10px; width: 50%; height: 50%; background: #f2f0e6; border-radius: 25px; z-index: -5; } .form-voucher .form-content:before { left: 8px; -webkit-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } .form-voucher .form-content:after { right: 8px; -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); -o-transform: rotate(2deg); transform: rotate(2deg); } .form-voucher .form-content .ginput_container input, .form-voucher .form-content .ginput_container textarea { background: #fff; border: 1px solid #e8dfbf; border-radius: 3px; box-shadow: 0 0 0 3px #f6f0e4; margin: 3px; display: block; line-height: 22px; padding: 5px 20px; width: 100%; color: #8e959b; -webkit-appearance: none; } .form-voucher .form-content .ginput_container input:focus, .form-voucher .form-content .ginput_container textarea:focus { border-color: #c69c6d; box-shadow: 0 0 0 3px #ecddca; } .form-voucher .form-content .ginput_container ::-webkit-input-placeholder { color: #8e959b; } .form-voucher .form-content .ginput_container ::-moz-placeholder { color: #8e959b; } .form-voucher .form-content .ginput_container :-ms-input-placeholder { color: #8e959b; } .form-voucher .form-content .ginput_container :-moz-placeholder { color: #8e959b; } .form-voucher .form-content .gform_fields { list-style: none; } .form-voucher .form-content .gform_fields:after { content: ''; display: table; width: 100%; clear: both; } .form-voucher .form-content .gfield { position: relative; float: left; width: 100%; padding: 10px; } .form-voucher .form-content .gfield-medium { width: 50%; } .form-voucher .form-content .gfield-small { width: 33.33%; } .form-voucher .form-content .gfield-hidden, .form-voucher .form-content .gfield_label { display: none; } .form-voucher .form-content .gform_footer { text-align: center; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .form-voucher .form-content .button { display: inline-block; padding: 10px 15px; border: 0; border-radius: 6px; background: #e05333; color: #fff; font-weight: 700; font-size: 18px; font-family: Bryant, sans-serif; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-voucher .form-actions { font-size: 14px; } /* Validation */ .form-voucher .form-content .gform_ajax_spinner { position: absolute; top: -2px; } .form-voucher .form-content .validation_error { display: none; } .form-voucher .form-content .gfield .gfield_description:not(.validation_message) { position: absolute; top: 22px; right: 15px; display: block; font-size: 0; } .form-voucher .form-content .validation_message { position: static; margin-left: 4px; color: #cd4c2f; text-align: left; font-size: 11px; } @media(max-width: 1023px){ .form-voucher .form-content .gfield .gfield_description:not(.validation_message) { position: static; padding: 4px; color: #8e959b; font-size: 11px; } .form-voucher .form-content .gfield .gfield_description:not(.validation_message) .tooltip { display: none; } } @media(max-width: 767px){ .form-voucher .form-content .gfield-medium, .form-voucher .form-content .gfield-small { width: 100%; } .form-voucher .form-content .button { font-size: 16px; } } /* ------------------------------------------------------------ *\ Tooltip \* ------------------------------------------------------------ */ .tooltip { position: relative; display: inline-block; } .tooltip i { display: inline-block; background: url(../png/ico-info.png) no-repeat 0 0; width: 16px; height: 16px; } .tooltip span, .tooltip span:before { position: absolute; top: 100%; transform: translateX(-50%); left: 50%; } .tooltip span { background: #000; color: #000; min-width: 150px; max-width: 300px; padding: .5em; margin-top: .75em; } .tooltip span:before { top: auto; bottom: 100%; content: ''; width: 19px; height: 19px; background: #fff; border: 1px solid green; transform: rotate(45deg) translate(25%, 25%); transform-origin: top left; } .tooltip span:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border-radius: inherit; } .tooltip span:before, .tooltip span:after { z-index: -5; } /* Animations */ .tooltip span { opacity: 0; visibility: hidden; transition: .6s .5s; text-align: center; } .tooltip:hover span { opacity: 1; visibility: visible; transition-delay: .2s; } /* Theme Style */ .tooltip { font-weight: 700; font-size: 13px; line-height: 1.54; } .tooltip span { top: auto; bottom: calc(100% + 15px); background: #fff; border: 1px solid #e8dfc0; border-radius: 5px; color: inherit; padding: 15px 20px; min-width: 300px; white-space: initial; font-weight: 400; } .tooltip span:before { bottom: auto; top: 100%; width: 12px; height: 12px; border-color: #e8dfc0; transform: rotate(45deg) translate(-50%, -50%); } .tooltip span:after { border-radius: 5px; } /* ------------------------------------------------------------ *\ Section Reviews \* ------------------------------------------------------------ */ .section-reviews p { padding-bottom: 0; } .section-reviews .section-body { position: relative; } .section-reviews .section-body:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: url(../png/dotted-horizontal.png) 52% 100% repeat-x;} .section-reviews .section-body:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: url(../png/dotted-horizontal.png) 52% 100% repeat-x;} .section-reviews .section-body iframe { min-height: 4350px; } @media screen and (max-width: 1024px) { .section-reviews .section-body iframe { min-height: 500px; } } /* ------------------------------------------------------------ *\ Templates \* ------------------------------------------------------------ */ .page-template-policies .list-checked li { line-height: 1.5; } /* ------------------------------------------------------------ *\ - Bar \* ------------------------------------------------------------ */ .nav-bar > ul { list-style: none; font-size: 0; line-height: 0; } .nav-bar > ul > li { display: inline-block; vertical-align: top; position: relative; font-size: 16px; line-height: 1.25; font-weight: 600; padding: 0 17px; } .nav-bar > ul > li:first-child { padding-left: 0; } .nav-bar > ul > li:last-child { padding-right: 0; } .nav-bar > ul > li:nth-child(2n) > a:before { background-position: -110px -226px; } .nav-bar a { display: block; text-decoration: none; color: #f76842; position: relative; padding-left: 39px; filter: grayscale(100%); opacity: 0.8; } .nav-bar a { -webkit-transition: filter 0.4s; transition: filter 0.4s; } .nav-bar a:before { content: ' '; position: absolute; left: 0; top: 50%; width: 30px; height: 30px; } .nav-bar a:before { background: url(../png/sprite.png) no-repeat -110px -26px; } .nav-bar a:before { -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: transform 0.4s; transition: transform 0.4s; } .nav-bar strong { font-weight: 600; color: #111; opacity: 0.5; } .nav-bar strong { -webkit-transition: opacity 0.4s; transition: opacity 0.4s; } .nav-bar > ul > li.active a:before, .nav-bar > ul > li.current-menu-item a:before { -webkit-transform: rotate(10deg) translateY(-50%); transform: rotate(10deg) translateY(-50%); } .nav-bar > ul > li.active a, .nav-bar > ul > li.current-menu-item a { filter: grayscale(0%); opacity: 1; } .nav-bar > ul > li.active strong, .nav-bar > ul > li.current-menu-item strong { opacity: 1; } .nav-bar a:hover:before { -webkit-transform: rotate(10deg) translateY(-50%); transform: rotate(10deg) translateY(-50%); } .nav-bar a:hover { filter: grayscale(0%); opacity: 1; } .nav-bar a:hover strong { opacity: 1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .nav-bar a:before { background-image: url(../png/sprite%402x.png); background-size: 320px 320px; } } @media (max-width: 1024px) { .nav-bar > ul > li { font-size: 14px; } .nav-bar > ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: space-between; } .nav-bar strong { display: none; } } /* ------------------------------------------------------------ *\ Ribbon \* ------------------------------------------------------------ */ .ribbon { position: fixed; left: 0; top: 150px; transform: translate(-100%); transform-origin: 100% 100%; animation: slideIn 2s forwards; z-index: 9999; } .ribbon-inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform: translateX(-100%); animation: slideInBody 1.7s forwards .3s; } .ribbon-back, .ribbon-front { position: absolute; right: 60px; } .ribbon-front { top: -9px; z-index: 2; } .ribbon-back { top: 35px; z-index: 1; } .ribbon-front-inner { position: relative; width: 178px; height: 286px; } .ribbon-front-top, .ribbon-front-bottom { position: absolute; left: 0; top: 0; width: 100%; } .ribbon-front-top span, .ribbon-front-bottom span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% auto; } .ribbon-front-top { height: 61px; } .ribbon-front-bottom { top: 61px; height: 31px; will-change: height; animation: slideDownBody 1.5s forwards 2s cubic-bezier(0, 0, 0.3, 1); } .ribbon-front-bottom span { background-position: 0 bottom; } .ribbon-text { position: absolute; z-index: 3; top: -4px; right: 91px; width: 126px; height: 271px; overflow: hidden; } .ribbon-text > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; } .ribbon-text img { position: absolute; top: 0; left: 0; margin-top: 53px; transform: translateY(-100%); animation: slideDownText 1.5s forwards 2s cubic-bezier(0, 0, 0.3, 1); } @media (max-width: 1640px) { .ribbon { transform-origin: 0% 0%; transform: translate(-100%) scale(0.9); animation: slideInScale 2s forwards; } } @media(max-width: 767px){ .ribbon { display: none; } } @keyframes slideIn { 0% { transform: translate(-100%, -44px) rotate(30deg); } 100% { transform: translate(0%, 0px) rotate(0deg); } } @keyframes slideInScale { 0% { transform: translate(-100%, -44px) rotate(30deg) scale(0.9); } 100% { transform: translate(0%, 0px) rotate(0deg) scale(0.9); } } @keyframes slideInBody { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes slideDownBody { 0% { height: 31px; } 100% { height: 226px; } } @keyframes slideDownText { 0% { margin-top: 48px; transform: translateY(-100%); } 100% { margin-top: 36px; transform: translateY(0%); } } /* ------------------------------------------------------------ *\ Free Email Testing Widget \* ------------------------------------------------------------ */ .free-email-testing-banner { width: 100%; box-sizing: border-box; border: 1px solid #dec6a8; border-radius: 10px; position: relative; padding: 45px 20px 20px 20px; margin-top: 40px; } .free-email-testing-banner .new { position: absolute; top: -31px; left: 50%; margin-left: -55px; background: url(../png/ico_banner_new.png) no-repeat 0 0; width: 110px; height: 63px; display: block; font-size: 0; line-height: 0; text-indent: -4000px; } .free-email-testing-banner h2 { font-size: 30px; line-height: 34px; color: #e05333; text-transform: uppercase; text-align: center; font-family: 'GothamCondensed', Arial, sans-serif; font-weight: 400; padding-bottom: 14px; } .free-email-testing-banner p { font-size: 15px; line-height: 24px; text-align: center; font-family: 'Trebuchet MS', Arial, sans-serif; color: #445361; padding-bottom: 20px; } .free-email-testing-banner img { display: block; margin: 0 auto; padding-bottom: 20px; } .free-email-testing-banner .button.button-orange { box-sizing: border-box; background: #e05333; width: 100%; display: block; } .free-email-testing-banner a { text-decoration: none; } /* ------------------------------------------------------------ *\ Free Email Testing Widget \* ------------------------------------------------------------ */ .free-email-testing-banner.free { width: 100%; box-sizing: border-box; border: 1px solid #dec6a8; border-radius: 10px; position: relative; padding: 30px 20px 20px 20px; margin-top: 40px; text-align: center; } .free-email-testing-banner.free span.new-secondary { padding: 4px 8px; border-radius: 3px; font-size: 18px; text-transform: uppercase; font-weight: bold; font-family: Trebuchet, 'Trebuchet MS', Arial, sans-serif; background: #f66843; color: #ffffff; margin-bottom: 10px; display: inline-block; margin: 0 auto; } .free-email-testing-banner.free h5 { font-size: 18px; text-transform: uppercase; font-weight: bold; font-family: Trebuchet, 'Trebuchet MS', Arial, sans-serif; margin: 15px 0px 10px 0px; color: #f66843; text-align: center; } .free-email-testing-banner.free h4 { text-align: center; font-size: 26px; font-weight: bold; color: #445361; font-family: Trebuchet, 'Trebuchet MS', Arial, sans-serif; margin: 0px 0px 10px 0px; } .free-email-testing-banner.free p { font-size: 15px; text-align: center; font-family: Trebuchet, 'Trebuchet MS', Arial, sans-serif; color: #445361; padding-bottom: 18px; } .free-email-testing-banner.free a { color: #445361; text-decoration: none; } .free-email-testing-banner.free .button.button-orange { box-sizing: border-box; transition: opacity .2s; background: #f66843; width: 100%; display: block; border: 0; border-radius: 6px; color: #fff; text-decoration: none; font-size: 18px; line-height: 1.2; text-align: center; font-family: 'BryantMedium', sans-serif; text-transform: uppercase; padding: 10px 18px 8px; cursor: pointer; } /* ------------------------------------------------------------ *\ FAQ Inner body styles \* ------------------------------------------------------------ */ .section-faq .expandable-body { padding-top: 15px; } .section-faq .expandable-body p { padding-bottom: 15px; } .section-faq .expandable-body ul { padding: 0 0 30px 30px; } .section-faq .section-actions { padding: 30px 0 50px; } /* ------------------------------------------------------------ *\ Blog posts reading time \* ------------------------------------------------------------ */ .rt-reading-time { padding-bottom: 20px; } /* ------------------------------------------------------------ *\ Blog posts reading progress bar \* ------------------------------------------------------------ */ .readingProgressbar { bottom: -11px !important; } .mini-header .readingProgressbar { bottom: 0 !important; } /* ------------------------------------------------------------ *\ Live Chat \* ------------------------------------------------------------ */ /* .live-chat-icon { position: fixed; bottom: 1.2%; right: 0.7%; z-index: 206; background: #e05333; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .live-chat-icon img { width: 40px; height: 40px; margin-top: 6px; margin-left: 2px; } .live-chat-icon:before { content: ''; position: absolute; left: -40px; top: 50%; margin-top: -17px; width: 34px; height: 34px; background: url(images/loading.gif) no-repeat 0 0; background-size: contain; display: none; } .live-chat-icon.loading:before { display: block; } */ /* ------------------------------------------------------------ *\ Captcha \* ------------------------------------------------------------ */ .grecaptcha-badge { visibility: hidden; } /* ------------------------------------------------------------ *\ Schedule Consultation Page \* ------------------------------------------------------------ */ .section-conslutation-steps {} .section-conslutation-steps h4 { position: relative; margin-top: 250px; } .section-conslutation-steps h4, .section-conslutation-steps p { text-align: center; } .section-conslutation-steps h4:before { position: absolute; top: -236px; left: 50%; margin-left: -145px; content: ''; display: block; width: 290px; height: 236px; background-size: 100%; } .section-conslutation-steps h4.step-1:before { background: url(../png/ico-schedule-consultation%402x.png) no-repeat 0 0; background-size: 100%; } .section-conslutation-steps h4.step-2:before { background: url(../png/ico-get-details%402x.png) no-repeat 0 0; background-size: 100%; } .section-conslutation-steps h4.step-3:before { background: url(../png/ico-receive-quote%402x.png) no-repeat 0 0; background-size: 100%; } .section-conslutation-steps .section-actions { margin: 50px 0; } .section-services-generic .col-consultation-description h1 { margin-bottom: 25px; font-weight: bold; font-size: 64px; line-height: 100%; } .section-services-generic .col-consultation-description h3 { font-size: 26px; margin-bottom: 25px; } .section-services-generic .col-consultation-description .list-checked-large { max-width: 450px; } .section-services-generic .col-consultation-description .list-checked-large li { font-size: 24px; } .page-schedule-consultation .section-services-generic { padding-bottom: 40px; } .page-schedule-consultation .container { padding-top: 0; } .page-schedule-consultation .logo-footer { margin: 0 auto; } .page-schedule-consultation .footer-bar .copyright { text-align: center; float: none; display: block; } .page-schedule-consultation .footer-bar .copyright a { color: #aeccb4; } /* ------------------------------------------------------------ *\ Cookie Disclaimer \* ------------------------------------------------------------ */ .cookie-disclaimer { padding: 20px 0; background: #353535; color: #fff; font-size: 16px; line-height: 1.25; box-shadow: 0 -5px 5px rgba(0, 0, 0, .25); position: relative; display: none; } .cookie-disclaimer a:not([class]) { color: inherit; text-decoration: underline; font-weight: 700; } .cookie-disclaimer .cookie-disclaimer-inner { display: flex; justify-content: center;align-items: center; } .cookie-disclaimer .cookie-disclaimer-content { color: #b6b6b6; font-size: 13px; } .cookie-disclaimer .cookie-disclaimer-content a { color: #fff; transition: color .125s; } .cookie-disclaimer .cookie-disclaimer-content a:hover { color: #b6b6b6; } .cookie-disclaimer .cookie-disclaimer-actions { margin-left: 20px; } .cookie-disclaimer .btn-cookie-disclaimer { position: relative; display: inline-block; border: 0; vertical-align: middle; font-size: 14px; font-weight: 600; text-transform: uppercase; text-decoration: none; background: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; height: 34px; line-height: 28px; top: auto; width: auto; right: auto; } .cookie-disclaimer .btn-cookie-disclaimer:hover { background: transparent; } .cookie-disclaimer .btn-cookie-disclaimer:before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 5px; top: 7px; left: 7px; transition: top .15s,left .15s; pointer-events: none; background: #2a2a2a; } .cookie-disclaimer .btn-cookie-disclaimer:hover:before { top: 0; left: 0; } .cookie-disclaimer .btn-cookie-disclaimer > span { display: inline-block; height: 28px; padding: 0 20px; border: 2px solid #6b6b6b; border-radius: 5px; line-height: 28px; text-align: center; font-size: 12px; position: relative; } @media screen and (max-width: 1648px) { .cookie-disclaimer .cookie-disclaimer-inner { display: block; text-align: center; } .cookie-disclaimer .cookie-disclaimer-content { padding-bottom: 10px; } } @media screen and (max-width: 1024px) { .cookie-disclaimer .cookie-disclaimer { padding: 10px 0; } .cookie-disclaimer .cookie-disclaimer-actions { margin: 0; } } /* ------------------------------------------------------------ *\ Schedule Consultation Sticky Banner \* ------------------------------------------------------------ */ .sticky-schedule-consultation { background: #f66843; padding: 20px 0; color: #fff; display: none; } .sticky-schedule-consultation p { font-size: 14px; font-family: 'Century Gothic', 'Trebuchet MS', Helvetica, Arial, sans-serif; } .sticky-schedule-consultation p strong { font-size: 16px; display: block; padding-bottom: 5px; } .sticky-schedule-consultation-content { float: left; } .sticky-schedule-consultation-actions { float: right; } .sticky-schedule-consultation-actions a { margin-right: -150px; color: #fff; text-decoration: none; display: inline-block; padding: 10px 15px; font: bold 14px/18px 'Century Gothic', 'Trebuchet MS', Helvetica, Arial, sans-serif; border: 1px solid #fff; } .sticky-schedule-consultation-inner { position: relative; clear: both; } .sticky-schedule-consultation-inner:before { position: absolute; bottom: -20px; left: -144px; content: ''; display: block; width: 144px; height: 227px; background: url(../png/ico-schedule-consultation-sticky-banner%402x.png) no-repeat 0 0; background-size: 100%; transform: translateY(calc(100% + 74px)); transition: transform .6s;} .sticky-schedule-consultation.active .sticky-schedule-consultation-inner:before { transform: translateY(0); transition: transform .6s 2s; } .sticky-schedule-consultation-inner .btn-close { position: absolute; left: -200px; top: 50%; margin-top: -10px; display: block; width: 19px; height: 19px; background: url(../png/ico-close-schedule-consultation-sticky-banner%402x.png) no-repeat 0 0; background-size: 100%; } @media only screen and (max-width: 1412px) { .sticky-schedule-consultation-inner:before { display: none; } .sticky-schedule-consultation-inner { padding-left: 50px; } .sticky-schedule-consultation-inner .btn-close { left: 0; } .sticky-schedule-consultation-content { margin-right: 240px; } .sticky-schedule-consultation-actions a { margin-left: -180px } } @media screen and (max-width: 1024px) { .sticky-schedule-consultation { padding-top: 10px; } .sticky-schedule-consultation-inner .btn-close { left: 50%; margin: 0 0 0 -10px; top: 0; } .sticky-schedule-consultation-inner { padding: 25px 0 0; } .sticky-schedule-consultation-content { float: none; margin-right: 0; margin-bottom: 10px; } .sticky-schedule-consultation-content p { font-size: 13px; text-align: center; } .sticky-schedule-consultation-content p strong { font-size: 14px; } .sticky-schedule-consultation-actions { float: none; text-align: center; } .sticky-schedule-consultation-actions a { margin-left: 0; margin-right: 0; } } div.blog-banner-schedule-consultation { position: relative; display: block; } div.blog-banner-schedule-consultation::before { content: ''; position: absolute; left: -153px; top: 0; width: 160px; height: 251px; background: url(../png/ico-mascot-responsive%402x.png) no-repeat 0 0; background-size: cover; } @media screen and (max-width: 768px) { div.blog-banner-schedule-consultation { margin-left: 150px; } } @media screen and (max-width: 646px) { div.blog-banner-schedule-consultation { margin-left: 0; } div.blog-banner-schedule-consultation::before { display: none; } } /* ------------------------------------------------------------ *\ footer-banners \* ------------------------------------------------------------ */ .footer-banners { position: fixed; top: auto; bottom: 0; left: 0; width: 100%; z-index: 9999; } /* ------------------------------------------------------------ *\ \* ------------------------------------------------------------ */ .form-reviews-container { width: 340px; left: 30px; right: 0; } .form-reviews-container h2 { text-transform: none; font-size: 20px; line-height: 35px; padding-bottom: 30px; } .form-reviews-container h4 { border-top: 0; font-size: 17px; line-height: 20px; padding: 0; } .form-reviews-container .form-totals { width: 342px; } .form-reviews-container .form-totals-inner { width: 260px; padding: 36px 40px 27px; } .form-reviews-container .form-order-stars { padding: 19px 0; display: flex; flex-direction: row; align-items: center; justify-content: center; } .form-reviews-container .form-order-stars img { padding-left: 2px; } .form-reviews-container .form-order-stars strong { margin-left: 16px; font-size: 19px; font-family: 'GothamCondensed'; color: #45907B; } .form-reviews-container .hand { left: 31px; transform: scaleX(-1); } .form-reviews-container .arm { margin-right: -31px; right: 100%; left: auto; margin-left: 0; } /* ------------------------------------------------------------ *\ Phone field \* ------------------------------------------------------------ */ .iti__flag { background-image: url(../png/flags.png); } .iti input.field-s { width: 227px; } .iti input.field-xs { width: 137px; } .iti input { width: 227px; } .iti__country-list { z-index: 3; } .hi-dpi .iti__flag { background-image: url(../png/flags%402x.png); } .hi-dpi .iti--allow-dropdown input { padding-right: 0; } .hi-dpi .iti--allow-dropdown input { padding-right: 0; } @media screen and (max-width: 767px) { .iti input.field-xs { width: 194px; margin: 3px; } } /* ------------------------------------------------------------ *\ Shopify Emails Page \* ------------------------------------------------------------ */ .pricing-box-alt-foot .btn { font-size: 20px; padding: 10px 37px; display: block; } /* ------------------------------------------------------------ *\ Additional Services \* ------------------------------------------------------------ */ .addional-services { list-style: none; text-align: left; overflow: hidden; display: flex; } .addional-service { width: 50%; padding: 0 0 0 45px; margin: 40px 0 0; position: relative; display: flex; } .addional-service { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .addional-service .addional-service-content { padding-left: 21px; display: flex; flex-direction: column; justify-content: center;} .addional-service h3 { font-family: "GothamCondensed", Arial, sans-serif; font-size: 26px; font-weight: normal; padding: 0 0 16px; } .addional-service p { padding-bottom: 0; } .addional-service p a.highlighted { margin-top: 10px; display: inline-block; } .hi-dpi .addional-service { padding: 0 10px; flex-direction: column; align-items: center; } .hi-dpi .addional-service .addional-service-content { padding: 16px 0 0 0; text-align: center; } /* ------------------------------------------------------------ *\ Solutions for Ecommerce Page Solutions for Agencies Page Solutions for Large Organizations Page \* ------------------------------------------------------------ */ .shell-1086 { width: 1086px; margin: 0 auto; zoom: 1; } .page-solutions-for-ecommerce .section-request-quote .form-quote .form-actions, .page-solutions-for-agencies .section-request-quote .form-quote .form-actions, .page-solutions-for-large-organizations .section-request-quote .form-quote .form-actions { margin-bottom: -38px; } .page-solutions-for-ecommerce .section, .page-solutions-for-agencies .section, .page-solutions-for-large-organizations .section { padding-top: 50px; } .page-solutions-for-ecommerce .section-services-generic.reversed .col, .page-solutions-for-large-organizations .section-services-generic.reversed .col, .page-solutions-for-agencies .section-services-generic.reversed .col { float: right; } .page-solutions-for-ecommerce .section-services-generic.reversed .col-consultation, .page-solutions-for-large-organizations .section-services-generic.reversed .col-consultation, .page-solutions-for-agencies .section-services-generic.reversed .col-consultation { float: left; } .page-solutions-for-ecommerce .section-services-generic h2.section-title, .page-solutions-for-large-organizations .section-services-generic h2.section-title, .page-solutions-for-agencies .section-services-generic h2.section-title { padding-bottom: 50px; } .page-solutions-for-ecommerce .section-services-generic .section-body h3, .page-solutions-for-large-organizations .section-services-generic .section-body h3, .page-solutions-for-agencies .section-services-generic .section-body h3 { font-size: 42px; line-height: 44px; padding-bottom: 50px; text-transform: uppercase; } .page-solutions-for-ecommerce .section-services-generic .section-body h4, .page-solutions-for-large-organizations .section-services-generic .section-body h4, .page-solutions-for-agencies .section-services-generic .section-body h4 { font-family: "GothamCondensed", Arial, sans-serif; font-size: 26px; font-weight: normal; padding-bottom: 30px; } .page-solutions-for-ecommerce .section-services-generic .section-body p, .page-solutions-for-large-organizations .section-services-generic .section-body p, .page-solutions-for-agencies .section-services-generic .section-body p { max-width: 400px; } .page-solutions-for-ecommerce .section-services-generic .section-body h3, .page-solutions-for-large-organizations .section-services-generic .section-body h3, .page-solutions-for-agencies .section-services-generic .section-body h3 { padding-bottom: 35px; } .page-solutions-for-ecommerce .section-services-generic .section-body h6, .page-solutions-for-large-organizations .section-services-generic .section-body h6, .page-solutions-for-agencies .section-services-generic .section-body h6 { padding-bottom: 28px; } .page-solutions-for-ecommerce .section-services-generic .list-checked { padding-top: 45px; } .page-solutions-for-ecommerce .section-services-generic { padding-bottom: 40px; } .page-solutions-for-ecommerce .list-images, .page-solutions-for-large-organizations .list-images, .page-solutions-for-agencies .list-images { list-style-type: none; display: flex; align-items: center; padding-bottom: 28px; } .page-solutions-for-ecommerce .list-images li + li, .page-solutions-for-large-organizations .list-images li + li, .page-solutions-for-agencies .list-images li + li { margin-left: 19px; } .page-solutions-for-ecommerce .section-quote, .page-solutions-for-large-organizations .section-quote, .page-solutions-for-agencies .section-quote { padding-top: 76px; } .section-prices-models h3 { text-align: center; } .section-prices-models img { display: block; margin: 20px auto; } .section-prices-models .pricing-box-alt { padding: 25px; } .section-prices-models .pricing-box-alt-head, .section-prices-models .pricing-box-alt-body { border: 0; padding: 0; } .section-prices-models .pricing-box-alt-body { min-height: 315px; } @media screen and (max-width: 767px) { .page-template-solutions-for-ecommerce .section-services-generic .col, .page-template-solutions-for-large-organizations .section-services-generic .col, .page-template-solutions-for-agencies .section-services-generic .col { float: left; padding-bottom: 28px; } .page-template-solutions-for-ecommerce .section-services-generic.reversed .col, .page-template-solutions-for-large-organizations .section-services-generic.reversed .col, .page-template-solutions-for-agencies .section-services-generic.reversed .col { float: left; } .page-template-solutions-for-ecommerce .section-services-generic.reversed .col-consultation, .page-template-solutions-for-large-organizations .section-services-generic.reversed .col-consultation, .page-template-solutions-for-agencies .section-services-generic.reversed .col-consultation { float: right; } .page-template-solutions-for-ecommerce .section-services-generic img, .page-template-solutions-for-large-organizations .section-services-generic img, .page-template-solutions-for-agencies .section-services-generic img { float: none; display: block; width: 100%; height: auto; } } /* Popup Offer */ .popup-offer{ z-index: 10000; position: fixed; inset: 0; display: flex; background-color: rgba(40, 40, 40, 0.85); backdrop-filter: blur(3px); isolation: isolate; padding: 40px; transition-property: opacity, visibility; transition-duration: .4s; transition-timing-function: ease; opacity: 0; visibility: hidden; } .popup-offer.is-active { opacity: 1; visibility: visible; } .popup-offer .popup__container { position: relative; margin: auto; padding: 73px 80px 76px; box-sizing: border-box; max-width: 740px; text-align: center; color:#fff; font-family: 'Trebuchet MS', sans-serif; } .popup-offer .popup__close { position: absolute; cursor: pointer; top: 6.3%; right: 4.2%; width: 25px; height: 25px; color: var(--close-color, rgba(255, 255, 255, .5)); transform: rotate(-45deg); background: none; outline: none; border: none; } .popup-offer .popup__close:before, .popup-offer .popup__close:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 3px; border-radius: 3px; background-color: currentColor; } .popup-offer .popup__close:after { transform: translate(-50%, -50%) rotate(90deg); } .popup-offer .popup__background{ position: absolute; inset: 0; z-index: -1; } .popup-offer .popup__background .popup__shape{ width: 100%; height: 100%; } .popup-offer .popup__background .popup__brush{ position: absolute; bottom: -5%; right: 0%; height: 27%; aspect-ratio: 0.87; } .popup-offer .popup__head { margin-bottom: 7px; font-family: 'GothamCondensed', sans-serif; } .popup-offer .popup__head h2{ font-size: 70px; font-weight: 400; line-height: 1.2; } .popup-offer .popup__entry { font-size: 18px; line-height: 1.39; margin-bottom: 22px; } .popup-offer .popup__entry a { text-decoration: none; color: #fff; font-weight: bold; } .popup-offer .popup__prices{ margin-bottom: 20px; } .price-discount .price__inner{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; font-family: 'BryantBold', sans-serif; font-weight: bold; align-items: center; gap: 12px; } .price-discount .price__previous{ font-size: 40px; font-family: 'BryantMedium', sans-serif; opacity: .5; font-weight: 500; } .price-discount .price__previous, .price-discount .price__new{ display: flex; gap: 4px; flex-shrink: 0; } .price-discount span { font-size: .6em; vertical-align: super; } .price-discount .price__new{ font-size: 72px; border: 2px dotted #ddc5a7; padding: 6px 20px; background: #f8f5e9; line-height: 1; border-radius: 10px; color: #445361; } .popup-offer .popup__btn{ background: #f8ac42; border: 4px solid #fff; border-radius: 10px; padding: 15px 55px; font-family: 'Trebuchet MS', sans-serif; font-weight: bold; font-size: 22px; line-height: 1; } body.admin-bar .popup-offer { top: 32px; } @media(max-width: 782px) { body.admin-bar .popup-offer { top: 46px; } } @media(max-width: 767px) { .popup-offer { padding: 20px; } .popup-offer .popup__container { padding: 100px 60px 120px; } .popup-offer .popup__head h2 { font-size: 56px; } .popup-offer .popup__close { top: 8%; right: 8%; } .popup-offer .popup__background .popup__brush { height: auto; width: 20%; right: 2%; bottom: 0; } .price-discount .price__new { font-size: 56px; } .price-discount .price__previous { font-size: 32px; } } @media(max-width: 575px) { .popup-offer .popup__container { padding: 75px 40px 90px; } .popup-offer .popup__background .popup__brush { bottom: -3%; } }