/* ========================================================================== :: INDEX ============================================================================= 1 - BASE STYLES 2 - GLOBAL LAYOUTS 2.1 - HEADER LAYOUTS 2.2. FOOTER LAYOUTS 3 - PAGE LAYOUTS 3.1 - LANDING LAYOUTS 3.2 - HOME LAYOUTS 3.3 - FEATURES LAYOUTS 3.4 - PARTNERS LAYOUTS 3.5 - MARKETS LAYOUTS 3.6 - SIGN UP LAYOUTS 3.7 - PACKAGES LAYOUTS 3.8 - TEAM LAYOUTS 3.9 - CONTACT LAYOUTS 4 - CONVERT PAGE LAYOUTS 4.1 - 4.2 - FEATURES LAYOUTS 4.3 - SOLUTIONS LAYOUTS 4.4 - PARTNERS LAYOUTS 5 - HELPER CLASSES 6 - PRINT STYLES ----------------------------------------------------------------------------- */ /* ========================================================================== :: :: 1. BASE STYLES :: ============================================================================= */ html, button, input, select, textarea { color: #222; background: #604E96; } body { font-size: 14px; line-height: 1.5; font-weight: 300; font-family: 'helvetica neue', helvetica, arial, sans-serif; background: #fff; -webkit-font-smoothing: antialiased; } /* Remove text-shadow in selection highlight */ ::-moz-selection { background: #b3d4fc; color: #333; text-shadow: none; } ::selection { background: #b3d4fc; color: #333; text-shadow: none; } /* A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */ img { vertical-align: middle; } /* Remove default fieldset styles.*/ fieldset { border: 0; margin: 0; padding: 0; } /* Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* Set box-sizing. */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Typeography ----------------------------------------------------------------------------- */ a { color: #f7e33a; text-decoration: none; } a:hover { color: #C2B22D; } h1, h2, h3, h4, h5 { font-family: 'Roboto', sans-serif; font-weight: 400; margin: 0 0 14px 0; color: #f7e33a; } h1 { font-size: 44px; } h2 { font-size: 36px; } h3 { font-size: 24px; } h4 { font-size: 24px; font-weight: 300; } h5 { font-size: 18px; font-weight: 300; } /* Wrappers ----------------------------------------------------------------------------- */ section:before, section:after { content: " "; display: table; } section:after { clear: both; } section { *zoom: 1; } section > section { max-width: 960px; width: 100%; margin: 0 auto; position: relative; } /* Buttons ----------------------------------------------------------------------------- */ .btn { display: inline-block; background: #f7e33a; padding: 12px 40px; margin: 5px; border-radius: 4px; box-shadow: 0 4px 0 0 #c6b62e; font-weight: 300; color: #333; font: 16px/16px 'Roboto', sans-serif; transition: all 0.1s ease; } .btn:hover { color: #333; background: #f8cf10; box-shadow: 0 4px 0 0 #d2af0b; margin: 5px; } .btn-01 { background: #a5e0f1; box-shadow: 0 4px 0 0 #619CAD; } .btn-01:hover { background: #c8e9f5; box-shadow: 0 4px 0 0 #619CAD; } .btn-02 { background: #605090; box-shadow: 0 4px 0 0 #4d4073; } .btn-02:hover { background: #4a397d; box-shadow: 0 4px 0 0 #2f2355; } .btn-03 { background: #41c0cc; box-shadow: 0 4px 0 0 #178994; } .btn-03:hover { background: #58cfda; box-shadow: 0 4px 0 0 #178994; } .btn-04 { background: #f8a63f; box-shadow: 0 4px 0 0 #df820b; } .btn-04:hover { background: #FFB051; box-shadow: 0 4px 0 0 #df820b; } .btn-05 { background: #3CD2E0; box-shadow: 0 4px 0 0 #178994; } .btn-05:hover { background: #62e5f1; box-shadow: 0 4px 0 0 #178994; } .btn-06 { background: #ee715f; box-shadow: 0 4px 0 0 #b85848; } .btn-06:hover { background: #EE4F38; box-shadow: 0 4px 0 0 #b85848; } .btn-07 { background: #a6c087; box-shadow: 0 4px 0 0 #83986c; } .btn-07:hover { background: #899E6F; box-shadow: 0 4px 0 0 #83986c; } .btn-08 { background: #5f5191; box-shadow: 0 4px 0 0 #4c3f71; } .btn-08:hover { background: #52467D; box-shadow: 0 4px 0 0 #4c3f71; } .btn-09 { background: #6ec4ee; box-shadow: 0 4px 0 0 #579aba; } .btn-09:hover { background: #67B7DE; box-shadow: 0 4px 0 0 #579aba; } .btn-buy { background: #605090; box-shadow: 0 4px 0 0 #4d4073; color: #fff; padding: 16px 10px 12px; display: block; font-size: 14px; } .btn-buy:hover { background: #4a397d; box-shadow: 0 4px 0 0 #2f2355; color: #fff; } .btn-free { color: #f19b2e; } .btn-premium { color: #a5e0f1; } .btn-large { font-size: 18px; padding: 16px 50px; } /* New Buttons ----------------------------------------------------------------------------- */ .button { display: inline-block; font-size: 16px; line-height: 16px; border-radius: 5px; padding: 14px 24px; margin: 0 10px 10px 0; font-weight: normal !important; color: #fff !important; background: #6c5aa1; } .button:hover { color: #fff !important; background: #aea2d6; } .button-outline { display: inline-block; font-size: 16px; line-height: 16px; border-radius: 5px; padding: 12px 24px; margin: 0 10px 10px 0; font-weight: normal !important; color: #6c5aa1 !important; background: transparent; border: 2px solid #aea2d6; } .button-outline:hover { color: #fff !important; background: #aea2d6; } /* Blue Buttons */ .button.button-blue { background: #74abbe !important; } .button.button-blue:hover { background: #2a687a; } .button-outline.button-blue { border-color: #74abbe; color: #2a687a !important; } .button-outline.button-blue:hover { background: #74abbe; color: #fff !important; } /* white Buttons */ .button.button-white { background: #fff; color: #6c5aa1 !important; } .button.button-white:hover { background: #d1c8ea; } .button-outline.button-white { border-color: #fff; color: #fff !important; } .button-outline.button-white:hover { background: #fff; color: #6c5aa1 !important; } /* yellow Buttons */ .button.button-yellow { background: #f6e23b; color: #71670e !important; } .button.button-yellow:hover { background: #f7ec93; } .button-outline.button-yellow { border-color: #f6e23b; color: #f6e23b !important; } .button-outline.button-yellow:hover { background: #f6e23b; color: #71670e !important; } /* Forms ----------------------------------------------------------------------------- */ input::-webkit-input-placeholder { color: #999; } input::-moz-placeholder { color: #999; } input:-ms-input-placeholder { color: #999; } input, select, textarea { background: #fff; border-radius: 0; border: 1px solid #b6add5; padding: 6px 10px 6px 15px; margin-bottom: 10px; width: 100%; min-height: 32px; outline: none; } input:focus { border-color: #605090; } input[type="submit"] { background-color: #8573BA; border: 0; color: #fff; padding: 10px; font-weight: bold; } input[type="submit"]:hover { background-color: #6C5AA1; } label { display: block; padding-bottom: 4px; } .field-blok { width: 100%; } .double-input > div { width: 49%; float: left; } .double-input > div:last-child { float: right; } .picker-element { width: 36px; height: 36px; } button { border: none; } form#searchform { float: right; width: auto; height: 41px; line-height: 41px; } form#searchform p { margin: 0; } form#searchform input.field { margin-bottom: 0; } form#searchform input.submit { display: none; } /* ========================================================================== :: :: 2.1 - HEADER LAYOUTS :: ============================================================================= */ header:before, header:after { content: " "; display: table; } header:after { clear: both; } header { *zoom: 1; background: #6C5AA1; } header > section { max-width: 960px; width: 100%; height: 90px; margin: 0 auto; position: relative; } /* Block Containers */ header .blok-1 { width: 50%; margin: 20px 0; float: left; } header .blok-1 img { max-width: 347px; height: auto; } header .blok-2 { width: 50%; margin: 0; float: left; } /* Social Icons */ .menu-socials-container { height: 42px; float: right; margin: 25px 0 5px; } footer .menu-socials-container { margin-top: 0; } .social-icons { margin: 0; padding: 0; list-style: none; text-align: right; } .social-icons li { margin: 4px 0; display: inline-block; height: 34px; } .social-icons li a { display: block; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; text-indent: 9999px; margin: 0 2px; background: #9083b8 url(../img/sprite_social-icn.png) no-repeat 32px 0; transition: all 0.3s ease; } .social-icons li a:hover { background-color: #baaedd; } .social-icons li.fb-icn a { background-position: 0 0; } .social-icons li.tw-icn a { background-position: -32px 0; } .social-icons li.in-icn a { background-position: -64px 0; } .social-icons li.gp-icn a { background-position: -96px 0; } .social-icons li.yt-icn a { background-position: -128px 0; } .social-icons li.login { border-left: 1px solid #9083b8; margin: 0 0 0 8px; padding-left: 12px; top: -4px; position: relative; height: 42px; } .social-icons li.login a { background: #9083b8; text-indent: inherit; color: #6c5aa1; width: auto; padding: 0 30px; border-radius: 20px; top: 5px; position: relative; line-height: 32px; font-weight: bold; } footer .social-icons li.login { display: none;} .social-icons li.login a:hover { background: #baaedd; } footer .social-icons { margin-top: 0;} /* Navigation ----------------------------------------------------------------------------- */ nav:before, nav:after { content: " "; display: table; } nav:after { clear: both; } nav { *zoom: 1; background: #ebe8f5; border-bottom: 1px solid #dcd5f3; } nav > section { max-width: 960px; width: 100%; margin: 0 auto; } /* Menu Root */ nav section > ul { margin: 0; padding: 0; list-style: none; float: left; border-left: 1px solid #dcd5f3; } nav section > ul li { margin: 0; float: left; border-right: 1px solid #dcd5f3; transition: all 0.3s ease; position: relative;} /* Menu Dropdown */ nav li .sub-menu { display: none; position: relative; transition: all 0.3s ease; } nav li:hover .sub-menu { display: block; } nav li .sub-menu { position: absolute; z-index: 99999; background: #ebe8f5; margin: 0 0 0 -1px; padding: 0; list-style: none; border: 1px solid #dcd5f3; border-bottom: 0; } nav li .sub-menu li { float: left; border-right: 0; border-bottom: 1px solid #dcd5f3; } /* Menu Links */ nav a { display: block; padding: 10px 15px; color: #6c5aa1; } nav li:hover, nav li.current-menu-item, nav li.current-menu-parent { background-color: #dcd5f3; } nav li:hover a { color: #6c5aa1; } nav li .sub-menu a { width: 200px; } nav li.nav-enterprise { background-color: #CDEAF3; border-right: 1px solid #A5E0F1; } nav li:hover.nav-enterprise { background-color: #A5E0F1; } nav li.nav-enterprise a { color: #2A5D6B; } a.menu { display: none; } /* Drop Form ----------------------------------------------------------------------------- */ .dropform { width: 560px; position: absolute; background: #f6e23b; z-index: 999; right: 0; color: #666; } .dropform .form-container { display: none; padding: 15px 10px 10px 10px; } .dropform a.btn-tab { display: block; height: 50px; position: absolute; right: 0; bottom: 0; margin-bottom: -40px; padding: 18px 40px 0 25px; border-radius: 0 0 5px 5px; background: #f6e23b; font-size: 14px; color: #333; cursor: pointer; transition: all 0.2s ease; } .dropform a.btn-tab:hover { margin-bottom: -50px; } .dropform .btn-tab:after { content: ' '; height: 0; width: 0; border: 5px solid transparent; border-top-color: #333; position: absolute; right: 20px; top: 27px; } .dropform .form-block { width: 40%; float: left; padding: 0 15px 10px; } .dropform .form-block-2 { width: 60%; margin-top: 20px; } .dropform .form-block input[type='text'], .dropform .form-block input[type='email'], .dropform .form-block input[type='tel'] { margin: 2px 0 8px; padding: 8px 10px; min-height: 30px; height: 30px; border: 1px solid #888; } .dropform .form-block input[type='submit'] { border: none; width: 50%; float: left; } .dropform .form-block input[type='checkbox'] { visibility: hidden; position: absolute; min-height: 0; height: 0; padding: 0; margin: 0; } .dropform .form-block input[type='checkbox'] + span:after { width: 20px; height: 20px; position: absolute; right: 0; top: 0; border: 1px solid #888; background: #fff url(../img/fs-picker-icon.png) no-repeat -999px 0; border-radius: 4px; content: " "; } .dropform .form-block input[type="checkbox"]:hover + span:after { background-color: #eee; } .dropform .form-block input[type="checkbox"]:checked + span:after { background-position: 4px 5px; } .lt-ie9 .dropform .form-block input[type='checkbox'] { visibility: visible; position: relative; float: right; min-height: 14px; height: 14px; width: 14px; padding: 0; margin: 0; border: none; } .lt-ie9 .dropform .form-block input[type='checkbox'] + span:after { content: none; } .dropform .wpcf7-list-item { display:block; padding: 0; margin: 0; height: 30px; position: relative; } .dropform .wpcf7-list-item-label { margin: 0; padding: 0; line-height: 16px; } .dropform .form-block textarea { margin: 8px 0 10px; } .dropform .check-field { background: #fff180; padding: 20px 20px 15px; } .dropform .wpcf7-response-output { clear: both; border: 0; background: #FFF180; padding: 10px 20px; } .dropform .wpcf7-not-valid-tip { width: 100%; height: 30px; left: 0; top: -7px; padding: 4px 10px; border-radius: 4px; font-size: 12px; } .lt-ie10 .dropform .wpcf7-not-valid-tip { top: -8px; } /* ========================================================================== :: :: 2.2 - FOOTER :: ============================================================================= */ footer:before, footer:after { content: " "; display: table; } footer:after { clear: both; } footer { *zoom: 1; } footer > section { width: 960px; margin: 0 auto; position: relative; } /* footer-content ----------------------------------------------------------------------------- */ footer#sitemap { background: #8573BA; } footer#sitemap > section { padding: 50px 0; } /* Block Containers */ footer#sitemap .blok { width: 33.33333%; min-height: 250px; float: left; padding: 0 30px; border-right: 1px solid #a495ce; } footer#sitemap .blok:last-child { border-right: none; } footer#sitemap .blok ul { list-style: none; margin: 0; padding: 0; } footer#sitemap .blok li { margin: 0 0 10px; border-bottom: 1px solid #8776b6; padding-bottom: 10px; color: #fff; } footer#sitemap .blok li a { color: #fff; } footer#sitemap .blok li .post-date, footer#sitemap .blok li .twitter-timestamp { color: #beb2e2; font-size: 12px; display: block; } footer#sitemap .blok li .rstw_comma { display: none; } footer#sitemap .blok li a.twitter-link { color: #F7E33A; } footer#sitemap div.testimonial { text-align: center; } footer#sitemap div.testimonial blockquote { font: 300 20px/26px 'Roboto', sans-serif; color: #cdc2eb; margin: 30px 0 10px; } footer#sitemap div.testimonial cite { font-size: 16px; line-height: 20px; color: #fff; display: block; font-style: normal; } footer#sitemap div.testimonial a { color: #F7E33A; margin: 15px 0; display: block;} /* Type Elements */ footer#sitemap h4 { margin: 0 0 10px 0; } /* Articles */ footer#sitemap article { padding: 10px 0; border-bottom: 1px solid #8776b6; } footer#sitemap article p, footer#sitemap article a { color: #fff; font-size: 15px; font-weight: 300; line-height: 20px; margin: 0; } footer#sitemap article p.time { color: #beb2e2; font-size: 13px; margin: 0; } footer#sitemap article a:hover { color: #F7E33A; } /* footer-sitemap ----------------------------------------------------------------------------- */ footer#linkmap { background: #7A68AE; } footer#linkmap > section { padding: 20px 0 20px; } /* Type Elements */ footer#linkmap ul { width: 100%; margin: 0; padding: 0; list-style: none; } footer#linkmap ul li { width: 192px; display: block; float: left; padding: 10px 20px; text-align: center; } footer#linkmap ul li a { color: #fff; font-size: 14px; } footer#linkmap ul li a:hover { color: #F6E23B; } /* footer-logo-strip ----------------------------------------------------------------------------- */ footer#logo-strip { background: #beb1e2; } footer#logo-strip > section { padding: 20px 0 20px; text-align: center; } /* Type Elements */ footer#logo-strip ul { margin: 0; padding: 0; list-style: none; margin: 0 auto; } footer#logo-strip ul li { display: block; float: left; padding: 10px 20px; text-align: center; } footer#logo-strip ul li a { color: #fff; font-size: 14px; display: block; } footer#logo-strip ul li a:hover { color: #F6E23B; } @media screen and (max-width: 860px) { footer#logo-strip { display: none; } } /* footer-copyright ----------------------------------------------------------------------------- */ footer#copyright { background: #604E96; } footer#copyright > section { padding: 40px 0; } /* Block Containers */ footer#copyright div[class*="blok"] { width: 50%; float: left; margin: 0 auto; } /* Type Elements */ footer#copyright p { font-size: 13px; color: #afa6ca; } /* CLICK DESK OVERRIDE STYLES ----------------------------------------------------------------------------- */ body .clickdesk .cd-bar { border: 0!important; border-radius: 0!important; box-shadow: none!important; background: #EBE8F5 url(../img/chat-icon.png) no-repeat right 15px!important; color: #605191!important; padding: 8px 50px 8px 20px!important; transition: all 0.3s ease; } body .clickdesk .cd-bar:hover { box-shadow: none!important; background-color: #291D4F!important; } body .clickdesk .cd-chat-inner { border-radius: 0!important; } body .clickdesk .cd-chat-inner-top { border-radius: 0!important; background-color: #433470!important; } body .clickdesk .cd-chat-content .cd-form-sec ul li input.clickdesk_next[type="submit"] { background-color: #433470!important; } body .clickdesk .cd-chat-content .cd-footer { background-color: #433470!important; } body .clickdesk .cd-chat-content .cd-footer ul li a { background-color: #433470!important; } body .clickdesk .cd-chat-content .cd-footer ul li { border-color: #32245B!important; } body .clickdesk .cd-chat-inner-top .cd-chat-inner-fig img { border-radius: 0!important; border: 0!important; padding: 0!important; margin-bottom: 6px!important; } body .clickdesk .cd-eye-catcher img { display: none; } /* Generic Headers */ #generic-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #generic-intro > section { padding: 40px 0 0; } /* Block Containers */ #generic-intro .blok-1 { width: 900px; margin: 0 auto; text-align: center; } /* Type Elements */ #generic-intro h1 { color: #7a68ae; margin: 0; } #generic-intro p { font-style: italic; color: #888; line-height: 24px; margin: 10px auto; width: 700px; } /* Divider Icon */ #generic-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* ========================================================================== :: :: 3. - REUSEABLE BLOCK LAYOUTS :: =========================================================================== */ /* General Pages ----------------------------------------------------------------------------- */ #general-section { background: #605090; } #general-section > section { padding: 50px 0 20px; position: relative; } #general-section h3 { color: #fff; } #general-section p { font-size: 14px; color: #C9BDEA; } /* Block Containers */ #general-section .general-blok:before, #general-section .general-blok:after { content: " "; display: table; } #general-section .general-blok:after { clear: both; } #general-section .general-blok { *zoom: 1; background: #fff; padding: 40px 50px 50px; border-top: 5px solid #8573BA; margin-bottom: 40px; } .general-blok.more-info { background-color: #614F96; text-align: center; border-top: none !important; padding: 30px 50px 30px; } /* Type Elements */ #general-section .blok-txt { width: 500px; float: left; } #general-section .blok-txt.full { width: 100%; } #general-section h2 { color: #8473B7; } #general-section h3 { color: #8473B7; } #general-section h4 { color: #8473B7; } #general-section h5 { color: #8473B7; } #general-section p { font-size: 16px; line-height: 24px; color: #888; margin: 0 0 20px 0; } #general-section a { color: #605090; } #general-section a:hover { color: #333; } #general-section ul li { font-size: 16px; color: #888; } #general-section .blok-txt a { font-size: 16px; } .general-blok.more-info h2 { color: #fff; font-size: 38px; } .general-blok.more-info p { color: #F1F0F7; } .inline-form { padding: 30px; margin-left: 30px; background: #F6E23B; float: right; width: 40%; } #general-section .inline-form h3 { line-height: 24px; margin-bottom: 20px; } #general-section .inline-form p { margin: 0; color: #666; font-size: 14px; } #general-section .inline-form input { margin: 0 0 5px 0; min-height: 0; } #general-section .inline-form input[type="submit"] { width: 50%; float: left; border: 0; padding: 6px 15px; } #general-section .inline-form textarea { margin: 0 0 15px 0; height: 120px; } #general-section .inline-form .wpcf7-response-output { clear: both; border: 0; background: #FFF180; padding: 10px 20px; } #general-section .inline-form .wpcf7-not-valid-tip { width: 100%; height: 31px; left: 0; top: -8px; padding: 4px 10px; border-radius: 4px; } #general-section .gallery-txt { float: left; width: 500px; } #general-section .gallery-img { float: right; width: 320px; } /* Reseller Form */ form.wpcf7-form p { margin-bottom: 15px !important; } form.wpcf7-form label { font-weight: bold; display: block; margin-bottom: 5px; } form.wpcf7-form .wpcf7-list-item { margin: 0 0 20px; display: block; } form.wpcf7-form .checks { float: left; } form.wpcf7-form .checks .wpcf7-list-item { width: 50%; float: left; } form.wpcf7-form .wpcf7-list-item input { width: auto; } /* Thumbnails ----------------------------------------------------------------------------- */ #general-section .lb-thumbnail { display: inline-block; border: 10px solid #CBC0ED; background: #CBC0ED; margin: 10px 0 20px 10px; } #general-section .lb-thumbnail:hover { border: 10px solid #8573BA; background: #8573BA; } #general-section .lb-thumbnail p { color: #605090; font-size: 12px; line-height: 16px; font-weight: bold; margin: 4px 0 0; } #general-section .lb-thumbnail:hover p { color: #EBE8F5; } #general-section .caption-thumb { display: inline-block; border: 5px solid #CBC0ED; background: #CBC0ED; margin: 10px 0 10px 10px; } #general-section .caption-thumb:hover { border-color: #8573BA; background: #8573BA; } #general-section .caption-thumb p { color: #605090; font-size: 12px; line-height: 16px; font-weight: bold; margin: 4px 0 0; } #general-section .caption-thumb:hover p { color: #EBE8F5; } /* Thumbnails ----------------------------------------------------------------------------- */ #general-section .well:before, #general-section .well:after { content: " "; display: table; } #general-section .well:after { clear: both; } #general-section .well { *zoom: 1; padding: 20px 25px 10px; background: #EBE8F5; border: 1px solid #DCD5F3; margin: 0 0 20px 0; } #general-section .well-note { background: #8573BA; border: 1px solid #7A68AE; color: #EBE8F5; padding: 20px 25px 5px; } #general-section .well-note p { color: #EBE8F5; font-size: 14px; line-height: 18px; } /* Search results ----------------------------------------------------------------------------- */ #general-section .search-item { padding: 20px 20px 10px; background: #F3EFFF; } #general-section .search-item:nth-child(even) { background: #E2DBF9; } #general-section .search-item h4 { font-size: 20px; margin-bottom: 8px; } #general-section .search-item p { } /* Tables ----------------------------------------------------------------------------- */ #general-section table { border: 2px solid #8573BA; margin-bottom: 20px; } #general-section table td { border: 1px solid #8573BA; padding: 5px 8px; } #general-section table th { border: 1px solid #8573BA; padding: 5px 8px; color: #7A68AE; text-align: left; } /* Reseller Banner ----------------------------------------------------------------------------- */ #reseller-banner { background: #473873; } #reseller-banner > section { padding: 40px 0; } /* Block Containers */ #reseller-banner .blok-1 { width: 60%; float: left; padding: 6px 80px 2px 0; border-right: 1px solid #aaa; } #reseller-banner .blok-2 { width: 40%; float: left; padding: 18px 0 0 80px; } /* Type Elements */ #reseller-banner h2 { color: #fff; margin: 0; } #reseller-banner h5 { color: #c9bdea; font-size: 16px; } /* Signup Banner ----------------------------------------------------------------------------- */ #signup-banner { background: #473873; } #signup-banner > section { padding: 30px 0 20px; } /* Block Containers */ #signup-banner .blok-1 { width: 66.6666%; float: left; padding: 18px 40px 2px 0; border-right: 1px solid #aaa; } #signup-banner .blok-2 { width: 33.3333%; float: left; padding: 0 0 0 50px; } /* Type Elements */ #signup-banner h3 { color: #c9bdea; font-size: 17px; } /* Hardware Banner ----------------------------------------------------------------------------- */ #hardware-banner { background: #604E96; } #hardware-banner > section { padding: 50px 0; } /* Block Containers */ #hardware-banner .blok-1 { width: 100%; float: left; padding: 0 0 0 180px; background: url(../img/hardware-banner-icon.png) no-repeat 0 12px; } /* Type Elements */ #hardware-banner h3 { color: #c9bdea; font-size: 26px; } #hardware-banner p { color: #fff; font-size: 14px; margin: 0 0 4px; } #hardware-banner p.small { color: #fff; font-size: 11px; margin: 15px 0 0; } /* Guide Instruction ----------------------------------------------------------------------------- */ #general-section p.instruction { margin-left: 30px; } #general-section p.instruction span { display: inline-block; width: 30px; margin-left: -34px; font-weight: bold; color: #7A68AE; } #general-section .wp-caption { margin-left: 30px; border: 6px solid #CBC0ED; background: #CBC0ED; } #general-section p.wp-caption-text { margin: 0; color: #605090; font-size: 12px; padding: 3px 3px 0; font-weight: bold; } #general-section .alignright { float: right; } #general-section .alignleft { float: left; } /* FAQs ----------------------------------------------------------------------------- */ .faqs-txt h2 { font-size: 28px; margin: 10px 0 20px 0; padding-bottom: 10px; border-bottom: 1px solid #B6ADD5; } .faqs-txt h3 { margin: 0 0 15px 0; font-size: 16px; font-weight: 400; color: #605090; font-family: 'helvetica neue', helvetica, arial, sans-serif; } .faqs-txt p { margin: 0 0 10px 0; } .faqs-txt #qaplus_searchform { background: #EBE8F5; padding: 20px 20px 15px; position: relative; } .faqs-txt .qaplus_search { width: 75%; } .faqs-txt #qaplus_searchsubmit { width: 20%; color: #fff; background: #605090; border: 0; box-shadow: 0 4px 0 0 #4D4073; min-height: 32px; vertical-align: top; } .faqs-txt .qa-category { margin-bottom: 15px; } /* ========================================================================== :: :: 3.1 - HOME LAYOUTS :: ============================================================================= */ /* Home-Intro ----------------------------------------------------------------------------- */ #enterprise-intro { background: #fff; } #enterprise-intro > section { text-align: center; padding: 30px 0 10px; } /* Block Containers */ #enterprise-intro .blok-1 { width: 50%; float: left; padding-top: 50px; } #enterprise-intro .blok-2 { text-align: right; float: right; width: 44%; margin-bottom: 20px; } /* Type Elements */ #enterprise-intro h1 { font-size: 40px; margin: 0; } #enterprise-intro h4 { color: #b0a8ca; margin: -5px 0 10px 0; } /* Divider Icon */ #enterprise-intro hr { width: 98px; height: 52px; margin: 50px 0 -3px 190px; border: 0; background: url(../img/divider_blue.png) no-repeat; } /* Home-about ----------------------------------------------------------------------------- */ #enterprise-about { background: #f4f2fa url(../img/bg-pro_home-about.jpg) no-repeat center right;; border-top: 10px solid #a5e0f1; } #enterprise-about > section { padding: 20px 0; } /* Block Containers */ #enterprise-about .blok-1 { width: 65%; padding-left: 50px; } /* Type Elements */ #enterprise-about h2 { margin: 10px 0 0; } #enterprise-about p { color: #666; margin: 18px 0; } /* Home-features ----------------------------------------------------------------------------- */ #enterprise-features { background: #e4e1ef; } #enterprise-features > section { padding: 50px 0 50px; } /* Block Containers */ #enterprise-features div[class*="feature"] { float: left; width: 20%; text-align: center; } /* Type Elements */ #enterprise-features h2 { text-align: center; margin: 0 0 20px; } #enterprise-features p { color: #666; font-size: 16px; line-height: 22px; margin: 30px 0 0 0; padding: 0 40px; } #enterprise-features div[class*="feature"] a { display: block; width: 72px; height: 72px; margin: 0 auto; padding: 15px 0 0; transition: all 0.4s ease; } #enterprise-features div[class*="feature"] a:hover { padding: 0 0 15px; } #enterprise-features .feature-2 p { padding: 0 20px; } #enterprise-features .feature-3 p { padding: 0 30px; } #enterprise-features .feature-4 p { padding: 0 10px; } #enterprise-features .feature-5 p { padding: 0 40px; } /* Home-partners ----------------------------------------------------------------------------- */ #enterprise-partners { background: #fff; } #enterprise-partners > section { padding: 50px 0; } /* Client Containers */ #enterprise-partners div[class*="partner"] { width: 33.33333%; height: 120px; margin: 15px 0 25px; float: left; } #enterprise-partners .partner-1 { background: url(../img/partner_ruckus.png) no-repeat center center; } #enterprise-partners .partner-2 { background: url(../img/partner_meraki.png) no-repeat center center; } #enterprise-partners .partner-3 { background: url(../img/partner_airtight.png) no-repeat center center; } /* Type Elements */ #enterprise-partners h2 { text-align: center; color: #7a68ae; } #enterprise-partners p { text-align: center; font-size: 16px; color: #666; } #enterprise-partners p strong { color: #7a68ae; } /* Home-signup-2 ----------------------------------------------------------------------------- */ #enterprise-signup-2 { background: #473873; } #enterprise-signup-2 > section { padding: 40px 0; } /* Block Containers */ #enterprise-signup-2 .blok-1 { width: 60%; float: left; padding: 6px 80px 2px 0; border-right: 1px solid #aaa; } #enterprise-signup-2 .blok-2 { width: 40%; float: left; padding: 18px 0 0 80px; } /* Type Elements */ #enterprise-signup-2 h2 { color: #f7e33a; margin: 0; } #enterprise-signup-2 h2 b { color: #fff; font-weight: 400; } #enterprise-signup-2 h5 { color: #c9bdea; } /* ========================================================================== :: :: 3.1 - HOME PAGE LAYOUT :: ============================================================================= */ /* Home-Intro ----------------------------------------------------------------------------- */ #index-intro { border-bottom: 10px solid #bcb3d6; display: none; background: #fff url(http://www.purplewifi.net/wp-content/uploads/2014/02/homeslider-bg-01.jpg) no-repeat center center; } #index-intro > section { padding: 30px 30px; } #index-intro .blok-1 { text-align: center; } /* Home Slider */ #index-intro div[class*="slide"] { width: 100%; overflow: hidden; } /* Slider Elements */ .rev_slider h2, #index-intro h1 { font-size: 40px; line-height: 50px; color: #6c5aa1; margin: 0 0 20px 0; color: #fff; font-weight: 900; } .rev_slider p, #index-intro p { font-size: 16px; line-height: 24px; color: #777; margin: 0 0 20px 0; color: #fff; } /* Type Elements */ #index-page h3 { font-size: 26px; line-height: 34px; color: #6c5aa1; margin: 0 0 20px 0; } #index-page p { font-size: 16px; line-height: 24px; color: #777; margin: 0 0 20px 0; } /* Home-Section-01 ----------------------------------------------------------------------------- */ #index-section-01 { background: #f4f2fa; border-top: 10px solid #bcb3d6; } #index-section-01 > section { padding: 50px 0 40px; } #index-section-01 .blok-1 { width: 40%; float: left; text-align: center; } #index-section-01 .blok-1 img { max-width: 100%; height: auto; } #index-section-01 .blok-2 { width: 60%; float: right; padding-left: 30px; } #index-section-01 .blok-2 h3 { max-width: 400px; } #index-section-01 .blok-2 p { max-width: 460px; } /* Home-Section-02 ----------------------------------------------------------------------------- */ #index-section-02 { background: #fff; } #index-section-02 > section { padding: 40px 0; } #index-section-02 .blok-1 { width: 40%; text-align: center; float: right; } #index-section-02 .blok-1 img { max-width: 70%; height: auto; } #index-section-02 .blok-2 { width: 60%; float: left; padding: 20px 0 0 30px; } #index-section-02 .blok-2 h3 { max-width: 500px; } #index-section-02 .blok-2 p { max-width: 500px; } /* Home-Section-03 ----------------------------------------------------------------------------- */ #index-section-03 { background: #c9ebf5; } #index-section-03 > section { padding: 50px 0; } #index-section-03 .blok-1 { width: 40%; text-align: center; float: left; } #index-section-03 .blok-1 img { max-width: 70%; height: auto; } #index-section-03 .blok-2 { width: 60%; float: right; padding: 20px 0 0 0; } #index-section-03 .blok-2 h3 { max-width: 500px; } #index-section-03 .blok-2 p { max-width: 460px; } /* Home Media Queries ----------------------------------------------------------------------------- */ @media screen and (max-width: 755px) { #index-section-01 .blok-1, #index-section-01 .blok-2, #index-section-02 .blok-1, #index-section-02 .blok-2, #index-section-03 .blok-1, #index-section-03 .blok-2 { width: 100%; float: none; padding-right: 20px; padding-left: 20px; text-align: center; } #index-section-01 .blok-1 img { margin-bottom: 20px; } #index-section-01 .blok-2 h3, #index-section-02 .blok-2 h3, #index-section-03 .blok-2 h3 { max-width: 100%; } #index-section-01 .blok-2 p, #index-section-02 .blok-2 p, #index-section-03 .blok-2 p { max-width: 100%; } } @media screen and (max-width: 640px) { #rev_slider_1_1_wrapper { display: none; } #index-intro { display: block; } } /* ========================================================================== :: :: 3.1 - LANDING PAGE LAYOUT :: ============================================================================= */ /* landing-Intro ----------------------------------------------------------------------------- */ #landing-intro { background: #fff; position: relative; } #landing-intro > section { } /* Block Containers */ #landing-intro div[class*="blok"] { height: 320px; float: left; } #landing-intro .blok-1 { padding: 40px 0 0 0; width: 56%; } #landing-intro .blok-2 { text-align: right; width: 44%; } #landing-intro .blok-2 img { max-width: 100%; height: auto; margin: 0; } #landing-intro div[class*="slide"] { max-width: 500px; width: 100%; overflow: hidden; } #landing-intro .slide-header { padding-bottom: 15px; border-bottom: 3px solid #EBE8F5; margin-bottom: 15px; } #landing-intro .slide-header img { float: left; margin-right: 20px; width: 58px; height: auto; } /* Type Elements */ #landing-intro [class*="slide"] h2 { color: #7a68ae; font-size: 34px; line-height: 36px; font-weight: 900; margin: 0; } #landing-intro div[class*="slide"] p { color: #444; font-size: 16px; line-height: 20px; font-weight: 300; font-family: 'Roboto', sans-serif; margin: 0 0 4px; } #landing-intro div[class*="slide"] p strong { color: #7a68ae; } #landing-intro div[class*="slide"] ul { margin: 0; padding: 0 0 0 17px; } #landing-intro div[class*="slide"] ul li { font: 300 16px/26px 'Roboto', sans-serif; margin: 0 0 4px; color: #666; } /* Collect Slide */ #landing-intro .slide-collect h2 { color: #bbcea1; } #landing-intro .slide-collect .slide-header { border-bottom-color: #e8eedf; } #landing-intro .slide-collect li strong { color: #bbcea1; } /* Connect Slide */ #landing-intro .slide-connect .slide-header h2 { color: #6bc5ef; } #landing-intro .slide-connect .slide-header { border-bottom-color: #cbebf9; } #landing-intro .slide-connect li strong { color: #6bc5ef; } /* Control Slide */ #landing-intro .slide-control .slide-header h2 { color: #f5c62f; } #landing-intro .slide-control .slide-header { border-bottom-color: #fcebb6; } #landing-intro .slide-control li strong { color: #f5c62f; } /* Communicate Slide */ #landing-intro .slide-communicate .slide-header h2 { color: #eb705e; } #landing-intro .slide-communicate .slide-header { border-bottom-color: #f8cdc7; } #landing-intro .slide-communicate li strong { color: #eb705e; } /* Anaylse Slide */ #landing-intro .slide-analyse .slide-header h2 { color: #af9fcc; } #landing-intro .slide-analyse .slide-header p { font-size: 17px; } #landing-intro .slide-analyse .slide-header img { float: none; margin: 0 10px 10px; width: 58px; height: auto; } #landing-intro .slide-analyse .slide-header { text-align: center; border-bottom-color: #e3dded; } #landing-intro .slide-analyse ul { list-style: none; } #landing-intro .slide-analyse li { text-align: center; } #landing-intro .slide-analyse li strong { color: #af9fcc; } #landing-intro .slide-analyse li img { float: none; margin: 4px; width: 58px; height: auto; } /* Image Elements */ #landing-intro .blok-2 img { max-width: 100%; height: auto; max-height: 290px; margin-top: 40px; } /* Divider Icon */ #landing-intro hr { position: absolute; width: 100%; height: 52px; bottom: -3px; margin: 0; border: 0; background: url('../img/divider_purple.png') no-repeat center; z-index: 1000; } /* Slider-Styles ----------------------------------------------------------------------------- */ /* Prevent the slideshow from flashing on load */ #landing-intro #slides { display: none; max-width: 500px; width: 100%; max-height: 280px; position: relative; } /* Show active item in the pagination */ #landing-intro .slidesjs-navigation { position: absolute; top: 105px; display: block; background: #D9D3EA url('../img/slider-controls.png') no-repeat; height: 80px; width: 60px; overflow: hidden; text-indent: 9999px; z-index: 9999; transition: all 200ms ease; } #landing-intro .slidesjs-navigation:hover { background-color: #7A68AE; } #landing-intro .slidesjs-previous { left: -10px; } #landing-intro .slidesjs-previous:hover { left: 0px; } #landing-intro .slidesjs-next { right: -10px; background-position: top right; } #landing-intro .slidesjs-next:hover { right: 0px; } #landing-intro ul.slidesjs-pagination { margin: -40px auto 0 auto; padding: 0; list-style: none; text-align: center; display: block; position: relative; z-index: 9999; } #landing-intro .slidesjs-pagination li { display: inline-block; } #landing-intro .slidesjs-pagination li a { background: #bbb1d6; display: block; margin: 0 3px; width: 12px; height: 12px; overflow: hidden; text-indent: 9999px; border-radius: 50%; } #landing-intro .slidesjs-pagination .active { background: #7a68ae; } #landing-intro .slidesjs-container { height: 280px !important; } #landing-intro .slidesjs-control { height: 280px !important; } /* landing-selection ----------------------------------------------------------------------------- */ #landing-selection { background: #7A68AE; } #landing-selection > section { min-height: 280px; padding: 50px 0 50px; } /* Block Containers */ #landing-selection [class*="blok"] { width: 33.3%; float: left; text-align: center; padding: 0 30px 0 0; border-right: 2px solid #9f90ca; } #landing-selection .blok-2 { padding: 0 30px 0; } #landing-selection .blok-3 { border-right: 0; padding: 0 0 0 30px; } #landing-selection .blok-4 { width: 100%; border-right: 0; text-align: center; margin-top: 20px; } /* Type Elements */ #landing-selection h2 { color: #F7E33A; text-align: center; margin: -20px 0 30px; font-size: 32px; } #landing-selection [class*="blok"] h3 { color: #fff; font-size: 26px; line-height: 30px; font-weight: 400; margin: 0 auto 10px; } #landing-selection [class*="blok"] h3 b { color: #fff; font-weight: 400; } #landing-selection .blok-1 h3 { color: #f8a63f; } #landing-selection .blok-2 h3 { color: #58CFDA; } #landing-selection .blok-3 h3 { color: #a5e0f1; } #landing-selection div[class*="blok"] p { color: #fff; font-size: 14px; } #landing-selection div.blok-4 p { font-size: 18px; font-weight: bold; } #landing-selection a.btn { font-size: 14px; } /* landing-partners ----------------------------------------------------------------------------- */ #landing-partners { background: #6C5AA1; } #landing-partners > section { padding: 50px 0; } /* Client Containers */ #landing-partners div[class*="partner"] { height: 120px; margin: 15px 0 25px; float: left; } #landing-partners .partner-1 { background: url(../img/partner_meraki.png) no-repeat center center; width: 19%; } #landing-partners .partner-2 { background: url(../img/partner_tplink.png) no-repeat center center; width: 27%; } #landing-partners .partner-3 { background: url(../img/partner_airtight.png) no-repeat center center; width: 27%; } #landing-partners .partner-4 { background: url(../img/partner_ruckus.png) no-repeat center center; width: 27%; } /* Type Elements */ #landing-partners h2 { text-align: center; color: #fff; } #landing-partners p { text-align: center; font-size: 16px; color: #c9bdea; } #landing-partners p strong { color: #c9bdea; } /* ========================================================================== :: :: 3.1 - LANDING PAGE OLD :: ============================================================================= */ /* Splash-Intro ----------------------------------------------------------------------------- */ #splash-intro { background: #fff; position: relative; } #splash-intro > section { } /* Block Containers */ #splash-intro div[class*="blok"] { width: 50%; height: 340px; float: left; } #splash-intro .blok-1 { text-align: center; padding: 50px 30px 0 0; } #splash-intro .blok-2 img { max-width: 100%; height: auto; margin: 0 20px; } #splash-intro .slide:nth-child(even) .blok-1 { padding: 50px 0 0 30px; } /* Type Elements */ #splash-intro h2 { color: #b3a7d5; font-size: 34px; line-height: 40px; font-weight: 300; margin: 0 auto 40px; width: 370px; } #splash-intro h3 { color: #6c5aa1; font-size: 26px; line-height: 26px; font-weight: 600; margin: 0 auto 10px; } #splash-intro h4 { color: #b3a7d5; font-size: 18px; line-height: 10px; font-weight: 300; margin: 0 auto 30px; } /* Image Elements */ #splash-intro .blok-2 img { max-width: 100%; height: auto; max-height: 290px; } #splash-intro .slide:nth-child(odd) img { float: right; } /* Divider Icon */ #splash-intro hr { position: absolute; width: 100%; height: 52px; bottom: -3px; margin: 0; border: 0; background: url('../img/divider_purple.png') no-repeat center; z-index: 1000; } /* Splash-selection ----------------------------------------------------------------------------- */ #splash-selection { background: #7a68ae; } #splash-selection > section { min-height: 300px; padding: 50px 0; } /* Block Containers */ #splash-selection [class*="blok"] { width: 50%; float: left; text-align: center; padding: 0 40px; } #splash-selection .blok-2 { border-left: 2px solid #9f90ca; } /* Type Elements */ #splash-selection [class*="blok"] h3 { color: #fff; font-size: 34px; line-height: 34px; font-weight: 400; margin: 0 auto 10px; } #splash-selection [class*="blok"] h3 b { color: #fff; font-weight: 400; } #splash-selection .blok-1 h3 { color: #f7e33a; } #splash-selection .blok-2 h3 { color: #a5e0f1; } #splash-selection div[class*="blok"] p { color: #b3a7d5; font-size: 16px; } /* ========================================================================== :: :: 3.2 - HOME LAYOUTS :: ============================================================================= */ /* Free-Intro ----------------------------------------------------------------------------- */ #free-intro { background: #fff url(img/bg_index-intro.png) no-repeat center center; border-bottom: 10px solid #7A68AE; } #free-intro > section { text-align: center; padding: 60px 0 0; } /* Block Containers */ #free-intro .blok-1 { width: 100%; } /* Type Elements */ #free-intro h1 { color: #ffa12c; margin: 0; } #free-intro h4 { color: #aaa; font-style: italic; margin: -5px 0 10px 0; } /* Divider Icon */ #free-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* Premium-Intro ----------------------------------------------------------------------------- */ #premium-intro { background: #fff url(img/bg_index-intro.png) no-repeat center center; border-bottom: 10px solid #7A68AE; } #premium-intro > section { text-align: center; padding: 60px 0 0; } /* Block Containers */ #premium-intro .blok-1 { width: 100%; } /* Type Elements */ #premium-intro h1 { color: #3cd2e0; margin: 0; } #premium-intro h4 { color: #aaa; font-style: italic; margin: -5px 0 10px 0; } /* Divider Icon */ #premium-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* Free-Summary ----------------------------------------------------------------------------- */ #free-summary { background: #8573ba; } #free-summary > section { padding: 50px 0 0; } /* Block Containers */ #free-summary .blok-1 { width: 25%; height: 250px; float: left; padding: 0; text-align: center; background: url(../img/free-summary-bg.png) no-repeat center bottom; } #free-summary .blok-2 { width: 75%; float: right; padding: 0; } /* Type Elements */ #free-summary p { color: #fff; padding-right: 30px; font-size: 14px; margin: 0 0 15px; } /* Home-signup ----------------------------------------------------------------------------- */ #home-signup-1 { background: #605090; } #home-signup-1 > section { padding: 50px 0; } /* Block Containers */ #home-signup-1 .blok-1 { width: 50%; float: left; padding: 6px 0 2px 0; } #home-signup-1 .blok-2 { width: 50%; float: right; padding: 0 0 0 20px; } /* Type Elements */ #home-signup-1 h2 { color: #fff; margin: 0; } #home-signup-1 h2 b { color: #a5e0f1; font-weight: 400; } #home-signup-1 h5 { font-size: 16px; color: #fff; font-weight: 400; margin-bottom: 25px; } #home-signup-1 .blok-1 h4 { font-size: 16px; color: #fff; font-weight: 400; margin: 15px 0 25px; } #home-signup-1 p { color: #C9BDEA; padding-right: 30px; font-size: 15px; margin: 0 0 6px; } #home-signup-1 p strong { color: #fff; } /* Home-steps ----------------------------------------------------------------------------- */ #home-steps { background: #7A68AE; } #home-steps.steps-dark { background: #605090; } #home-steps > section { padding: 50px 0 50px; } /* Block Containers */ #home-steps div[class*="step"] { float: left; width: 25%; text-align: center; padding: 0 35px 0 15px; background: url(img/bg_steps.png) no-repeat right 30px; } #home-steps div[class*="step"]:last-child { background: none; } /* Step Containers */ #home-steps div.step-1 { padding-top: 10px; width: 22%; } #home-steps div.step-2 { padding-top: 0px; width: 25%; } #home-steps div.step-3 { padding-top: 2px; width: 27%; } #home-steps div.step-4 { padding-top: 2px; width: 26%; } /* Type Elements */ #home-steps h2 { text-align: center; margin: 0 0 35px; } #home-steps p { color: #c9bdea; margin-top: 20px; } /* Home-features ----------------------------------------------------------------------------- */ #home-features { background: #7A68AE url(img/bg_home-features.png) no-repeat center top; } #home-features > section { height: 720px; padding: 70px 0 0; } /* Block Containers */ #home-features .blok-1 { width: 665px; } #home-features .blok-1 img { max-width: 665px; height: auto; } #home-features .blok-2 { position: absolute; z-index: 100; width: 355px; top: 60px; right: 0; } /* Feature Containers */ #home-features div[class*="feature"] { margin: 0 0 20px 0; padding: 0 0 0 70px; background: url(img/bg_feature-dots.png) no-repeat 0 30px; } #home-features div[class*="feature"]:before, #home-features div[class*="feature"]:after { content: " "; display: table; } #home-features div[class*="feature"]:after { clear: both; } #home-features div[class*="feature"] { *zoom: 1; } #home-features div[class*="feature"] img { float: left; margin: -2px 15px 3px 0; } /* Type Elements */ #home-features h3 { margin: 0 0 25px 70px; } #home-features p { color: #c9bdea; margin: 0; } #home-features p strong { color: #fff; } #home-features .blok-2 .btn { margin-left: 70px; } /* Divider Icon */ #home-features hr { width: 100%; height: 57px; border: 0; margin: 0; position: absolute; bottom: -4px; background: url(img/divider_white.png) no-repeat center top; } /* Home-clients ----------------------------------------------------------------------------- */ #home-clients { background: #fff; } #home-clients > section { padding: 50px; } /* Client Containers */ #home-clients div[class*="client"] { width: 25%; height: 150px; margin: 15px 0 25px; float: left; } #home-clients .client-1 { background: url(../img/client_visit-scotland.png) no-repeat center center; } #home-clients .client-2 { background: url(../img/client_jagermeister.png) no-repeat center center; } #home-clients .client-3 { background: url(../img/client_david-lloyd.png) no-repeat center center; } #home-clients .client-4 { background: url(../img/client_kingsgate.png) no-repeat center center; } /* Type Elements */ #home-clients h2 { text-align: center; color: #7a68ae; } #home-clients p { text-align: center; font-size: 16px; color: #666; } #home-clients p strong { color: #7a68ae; } /* ========================================================================== :: :: 3.3 - FEATURES LAYOUTS :: ============================================================================= */ /* Features-] ----------------------------------------------------------------------------- */ #features-intro { background: #fff; border-bottom: 10px solid #BCB3D6; } #features-intro > section { padding: 40px 0 0; } /* Block Containers */ #features-intro .blok-1 { width: 40%; margin: 0 auto; text-align: left; float: left; } #features-intro .blok-2 { width: 60%; margin: 0 auto; text-align: center; float: right; } /* Type Elements */ #features-intro h1 { color: #6c5aa1; font-size: 50px; margin: 0; float: left;} #features-intro p { font-style: normal; color: #888; font-size: 18px; line-height: 26px; margin: 10px 0 45px; float: left;} #features-intro a.btn { color: white; margin: 0; } /* Splash */ #features-intro figure.fl_right { } /* Divider Icon */ #features-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_light-purple.png) no-repeat; clear: both; } /* Features-items ----------------------------------------------------------------------------- */ .feat-section:nth-child(even) { background: #f4f2fa; } .feat-section:nth-child(odd) { background: #f4f2fa; } .feat-section > section { padding: 50px 0; min-height: 300px; position: relative; border-bottom: 2px solid #e0dbed; } /* Block Containers */ .feat-section .blok-text { width: 50%; } .feat-section:nth-child(even) .blok-text { float: left; } .feat-section:nth-child(odd) .blok-text { float: right; } /* .feat-section .blok-img { width: 50%; float: left; } .feat-section:nth-child(even) .blok-img { float: right; } .feat-section:nth-child(odd) .blok-img { } .feat-section .blok-img { max-width: 40%; } */ /* Block images #features-social .blok-img { max-width: 100%; height: auto; position: absolute; bottom: 0; right: 10px; } #features-marketing .blok-img { max-width: 100%; height: auto; position: absolute; top: 210px; left: 40px; } #features-analytics .blok-img { max-width: 100%; height: auto; position: absolute; bottom: 0; right: 10px; } #features-presence .blok-img { max-width: 100%; height: auto; position: absolute; top: 210px; left: 40px; } #features-security .blok-img { max-width: 100%; height: auto; position: absolute; top: 200px; right: 120px; } #features-filtering .blok-img { max-width: 100%; height: auto; position: absolute; top: 210px; left: 40px; } */ /* Header Elements */ .feat-section hgroup { padding: 0 0 30px; margin: 0 0 40px; text-align: center; } .feat-section hgroup div { display: inline-block; text-align: left; } .feat-section hgroup img { display: inline-block; margin-right: 20px; vertical-align: top; } /* Blok 1 */ .feat-section .blok-1 { width: 45%; float: left; } .feat-section .blok-1 div { margin-bottom: 30px; } .feat-section .blok-1 h4 { color: #666; } .feat-section .blok-1 img { float: left; margin: 0 20px 0 0; } .feat-section .blok-1 p { clear: both; color: #666; } .feat-section .blok-1 a.link { font-size: 16px; font-weight: bold; color: #65529b; } /* Blok 2 */ .feat-section .blok-2 { width: 45%; float: right; } .feat-section .blok-2 img { max-width: 100%; } #features-social h2 { color: #6bc5ef; } #features-marketing h2 { color: #eb705e; } #features-analytics h2 { color: #af9fcc; } #features-presence h2 { color: #e85fe3; } #features-security h2 { color: #eac620; } #features-filtering h2 { color: #63b85f; } #features-multilingual h2 { color: #7A68AE; } /* #features-social hgroup { border-bottom: 2px solid #6EC9F5; } #features-marketing hgroup { border-bottom: 2px solid #EB705E; } #features-analytics hgroup { border-bottom: 2px solid #AF9FCC; } #features-presence hgroup { border-bottom: 2px solid #E85FE3; } #features-security hgroup { border-bottom: 2px solid #F5C62F; } #features-filtering hgroup { border-bottom: 2px solid #8DD58A; } */ /* Type Elements */ .feat-section h2 { color: #fff; font-size: 36px; line-height: 36px; margin: 0px 0 5px; } .feat-section h4 { color: #c9bdea; font-size: 16px; margin: 0; } .feat-section p { color: #c9bdea; font-size: 15px; line-height: 24px; margin: 0 0 20px; } /* Positon of Bloks */ #features-analytics .blok-1, #features-presence .blok-1, #features-security .blok-1, #features-multilingual .blok-1 { float: right; } #features-analytics .blok-2, #features-presence .blok-2 , #features-security .blok-2, #features-multilingual .blok-2 { float: left;} .pp_expand { display: none !important;} /* ========================================================================== :: :: 3.4 - PARTNERS LAYOUTS :: ============================================================================= */ /* Partners-Intro ----------------------------------------------------------------------------- */ #partners-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #partners-intro > section { padding: 40px 0 0; } /* Block Containers */ #partners-intro .blok-1 { width: 560px; text-align: center; margin: 0 auto; } /* Type Elements */ #partners-intro h1 { color: #7a68ae; margin: 0; } #partners-intro p { font-style: italic; color: #888; line-height: 24px; margin: 10px 0; } /* Divider Icon */ #partners-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* Partners-signup ----------------------------------------------------------------------------- */ #partners-signup { background: #333; } #partners-signup > section { padding: 30px 0; } /* Block Containers */ #partners-signup .blok-1 { width: 65%; float: left; padding: 6px 0 2px; border-right: 1px solid #aaa; } #partners-signup .blok-2 { width: 35%; float: left; padding-top: 10px; text-align: center; } /* Type Elements */ #partners-signup h3 { color: #fff; margin: 0; } #partners-signup h5 { color: #ccc; padding-right: 30px; font-size: 16px; } /* Partners Sections ----------------------------------------------------------------------------- */ .partners-odd { background: #605090; } .partners-even { background: #7a68ae; } .partners-odd > section, .partners-even > section { padding: 50px 0 60px; min-height: 400px; position: relative; } /* Block Containers */ .partners-odd .blok-text { float: left; width: 50%; } .partners-even .blok-text { float: right; width: 50%; } .partners-odd .blok-img { float: right; width: 50%; text-align: center; } .partners-even .blok-img { float: left; width: 50%; text-align: center; } /* Type Elements */ .partners-even h2, .partners-odd h2 { color: #fff; font-size: 34px; line-height: 34px; margin: 8px 0 20px; } .partners-even h4, .partners-odd h4 { color: #c9bdea; font-size: 16px; margin: 0 0 20px 0; } .partners-even p, .partners-odd p { color: #c9bdea; font-size: 15px; line-height: 24px; margin: 0 0 20px; } /* Image Elements */ #logo-airtight { margin: 110px 0 0 80px; } #logo-iwf { margin: 60px 60px 0 0; } #logo-meraki { margin: 100px 0 0 80px; } #logo-ruckus { margin: 170px 80px 0 0; } #logo-tplink { margin: 180px 0 0 60px; } /* Partners grid ----------------------------------------------------------------------------- */ .partner-grid { float: left; margin: 10px; border: 2px solid #AFA5E5; background-color: #fff; width: calc(33.33333% - 20px); position: relative; } .partner-grid-logo { width: 100%; height: 218px; background-color: #fff; text-align: center; position: relative; } .partner-grid-logo a { display: block; width: 100%; padding: 20px; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); } .partner-grid-logo img { max-width: 100%; height: auto; } .partner-grid-text { height: 146px; overflow-y: scroll; background-color: #605090; color: #fff; padding: 20px; } .partners2-section .partner-grid-text p { color: #eee; } @media (min-width: 481px) and (max-width: 768px) { .partner-grid { width: calc(50% - 20px); } } @media screen and (max-width: 480px) { .partner-grid { width: calc(100% - 20px); } } /* ========================================================================== :: :: 3.5 - MARKETS LAYOUTS :: ============================================================================= */ /* Markets-Intro ----------------------------------------------------------------------------- */ #markets-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #markets-intro > section { padding: 40px 0 0; } /* Block Containers */ #markets-intro .blok-1 { width: 840px; text-align: center; margin: 0 auto; } /* Type Elements */ #markets-intro h1 { color: #7a68ae; margin: 0; } #markets-intro p { font-style: italic; color: #888; line-height: 24px; margin: 10px 0; } /* Divider Icon */ #markets-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* Markets Sections ----------------------------------------------------------------------------- */ .markets > section { padding: 50px 0 60px; min-height: 400px; position: relative; } .markets { background: #605090; } .markets:nth-child(odd) { background: #7a68ae; } /* Block Containers */ .markets .blok-text { float: left; width: 60%; } .markets:nth-child(odd) .blok-text { float: right; } .markets .blok-img { float: right; width: 40%; text-align: center; } .markets:nth-child(odd) .blok-img { float: left; } /* Type Elements */ .markets h2 { color: #fff; font-size: 34px; line-height: 34px; margin: 8px 0 20px; } .markets h4 { color: #c9bdea; font-size: 16px; margin: 0 0 20px 0; } .markets p { color: #c9bdea; font-size: 15px; line-height: 24px; margin: 0 0 20px; } /* ========================================================================== :: :: 3.6 - SIGN UP LAYOUTS :: ============================================================================= */ /* Signup-Intro ----------------------------------------------------------------------------- */ #signup-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #signup-intro > section { padding: 40px 0 0; text-align: center; } /* Type Elements */ #signup-intro h1 { color: #7a68ae; margin: 0; } /* Divider Icon */ #signup-intro hr { width: 98px; height: 52px; margin: 30px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* Signup-form ----------------------------------------------------------------------------- */ .signup-form { background: #605090; position: relative;} .signup-form > section { padding: 50px 0; min-height: 500px; position: relative; } /* Form Header */ .signup-form .form-header { background: #fff; padding: 30px 40px 40px; } .signup-form .form-header h2 { font-size: 20px; color: #7A68AE; margin: 0 0 10px; float: left; width: 33.3333%; text-align: center; } /* Form Progress Bar */ .signup-form .progress-bar { height: 10px; border-radius: 5px; background: #d0cae5; clear: both; position: relative; } .signup-form .progress-bar [class*="tracker"] { height: 10px; border-radius: 5px; background: #F7E33A; width: 0; } .signup-form .progress-bar .tracker-1 { width: 33.3333%; } .signup-form .progress-bar .tracker-2 { width: 66.6666%; } .signup-form .progress-bar .tracker-3 { width: 100%; } .signup-form .progress-bar [class*="step"] { width: 30px; height: 30px; border-radius: 50%; background: #d0cae5; position: absolute; top: -10px; color: #fff; padding-top: 2px; text-align: center; font-size: 16px; font-weight: bold; } .signup-form .progress-bar [class*="step"].active { background: #F7E33A; color: #333; } .signup-form .progress-bar .step-1 { left: 33%; } .signup-form .progress-bar .step-2 { left: 66%; } .signup-form .progress-bar .step-3 { right: 0; } /* Form Body */ .signup-form .form-body:before, .signup-form .form-body:after { content: " "; display: table; } .signup-form .form-body:after { clear: both; } .signup-form .form-body { *zoom: 1; background: #ebe8f5; padding: 30px 40px 40px; color: #666; } .signup-form .form-body a { color: #7A68AE; font-weight: bold; } .signup-form .form-body a:hover { color: #4D4073; } .signup-form .form-body .terms-agree { margin: 7px 10px 0 0; float: left; } .signup-form .blok-1 { width: 44%; min-height: 400px; border-right: 1px solid #d0cae5; float: left; padding-right: 40px; } .signup-form .blok-2 { width: 56%; min-height: 400px; border-left: 1px solid #d0cae5; float: left; padding-left: 40px; margin-left: -1px; } .signup-form .blok-2.center { text-align: center; } .signup-form form { position: relative; } .signup-form .form-blok:before, .signup-form .form-blok:after { content: " "; display: table; } .signup-form .form-blok:after { clear: both; } .signup-form .form-blok { *zoom: 1; padding-bottom: 15px; position: relative;} .signup-form .form-blok .btn { float: right; } /* Type Elements */ .signup-form h3 { font-size: 22px; color: #7A68AE; } .signup-form .order-detail { padding: 10px 0; border-bottom: 1px solid #D0CAE5; } .signup-form .order-detail p { margin: 0; color: #666; font-size: 14px; } .signup-form .order-detail p:first-child { font-weight: bold; } .signup-form .order-detail p.price { float: right; font-weight: bold; color: #7A68AE; } #wifi-signup-step-1 { display: block; } #wifi-signup-step-2 { display: none; } #wifi-signup-step-3 { display: none; } .select-position, .selecter-element { top: 0; left: 0; } input:valid {} input:invalid { color:#f00; box-shadow: none; border-color: #F21A1A; } input:required { } /* ========================================================================== :: :: 3.7 - PACKAGES LAYOUTS :: ============================================================================= */ /* packages-Intro ----------------------------------------------------------------------------- */ #packages-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #packages-intro > section { padding: 40px 0 0; } /* Block Containers */ #packages-intro .blok-1 { width: 780px; margin: 0 auto; text-align: center; } /* Type Elements */ #packages-intro h1 { color: #7a68ae; margin: 0; } #packages-intro p { font-style: italic; color: #888; line-height: 24px; margin: 10px 0; } /* Divider Icon */ #packages-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* packages-overview ----------------------------------------------------------------------------- */ #packages-overview { background: #6C5AA1; } #packages-overview > section { padding: 50px 0; } #packages-overview > section > p { color: #fff; } .pack-overview-table { background: #fff; width: 33.3333%; float: left; margin-bottom: 20px;} .pack-overview-table div[class*="pack-blok"] { float: left; width: 100%; text-align: center; padding: 30px 30px 20px; border-right: 1px solid #d2c9f2; border-bottom: 1px solid #d2c9f2; } .pack-overview-table .pack-blok-3 { border-right: none!important; } .pack-overview-table p { color: #666; margin: 0 0 10px 0; } .pack-overview-table p.currency { margin: 10px 0 0;} /* Pack header */ .pack-header { background: #6C5AA1; border-bottom: 8px solid #d2c9f2; } .pack-header div[class*="pack-blok"] { border-right: 1px solid #47357d; border-bottom: none; } .pack-header h3 { font-size: 24px; line-height: 30px; margin: 0; } .pack-header .pack-blok-1 h3 { color: #f9b258; } .pack-header .pack-blok-2 h3 { color: #5fd8e4; } .pack-header .pack-blok-3 h3 { color: #b8e2f2; } /* Pack intro */ .pack-intro div[class*="pack-blok"] { height: 160px; } .pack-intro h5 { color: #7e6fad; font-size: 20px; line-height: 26px; margin: 0 0 10px; } /* Pack price */ .pack-price div[class*="pack-blok"] { height: 160px; } .pack-price h4 { font-size: 30px; line-height: 30px; margin: 0 0 10px; } .pack-price h4 span { font-size: 18px; color: #666; } .pack-price .pack-blok-1 h4 { color: #ffa12c; } .pack-price .pack-blok-2 h4 { color: #3cd2e0; font-size: 18px; line-height: 22px; margin: -8px auto 8px; } .pack-price .pack-blok-3 h4 { color: #6bbfd7; } /* Pack details */ .pack-details div[class*="pack-blok"] { height: 220px; } .pack-details h5 { color: #7e6fad; font-size: 20px; line-height: 26px; margin: 0 0 10px; } .pack-details p { margin: 0 0 4px; } .pack-details p:last-child { margin: 0 0 10px; } /* packages-Table ----------------------------------------------------------------------------- */ #packages-comparison { background: #7a68ae; } #packages-comparison > section { padding: 50px 0; } #packages-table { border: 8px solid #dedaec; background: #f1eefb; width: 100%; margin-bottom: 0; } #packages-table table { border: 2px solid #fff; width: 100%; color: #473873; font-size: 13px; } #packages-table th, #packages-table td { border: 2px solid #fff; padding: 8px 30px; color: #473873; } #packages-table th:nth-child(1) { background: #473873; color: #f7e33a; } #packages-table th:nth-child(2) { background: #f19b2e; } #packages-table th:nth-child(3) { background: #32b2be; } #packages-table td:nth-child(1) { width: 440px; } #packages-table td:nth-child(2) { width: 240px; background: #fcebd5; text-align: center; } #packages-table td:nth-child(3) { width: 240px; background: #d7eef1; text-align: center; } #packages-table .sub-head td:nth-child(1) { background: #d2c9f2; } #packages-table .sub-head td:nth-child(2) { background: #f6c380; } #packages-table .sub-head td:nth-child(3) { background: #85d1d9; } #packages-table h3, #packages-table h4, #packages-table h5 { font-size: 25px; font-family: 'Roboto', sans-serif; margin: 0; color: #473873; } #packages-table th:nth-child(1) h3 { color: #F7E33A; } #packages-table h4 { font-size: 20px; font-weight: 400; } #packages-table h5 { font-size: 16px; font-weight: 400; } #packages-table i.yes, #packages-table i.no { display: inline-block; width: 21px; height: 18px; overflow: hidden; text-indent: 9999px; margin-top: 3px; background: url(../img/icn_tick.png) no-repeat; } #packages-table i.no { background: url(../img/icn_cross.png) no-repeat; } #packages-table tr.buttons td { padding: 8px 2px 30px; background: #fff; } #packages-table tr.buttons th { padding: 10px 2px 14px; background: #fff; } /* Text Block ----------------------------------------------------------------------------- */ .text-blok h5 { color: #fff; } .text-blok p { color: #c9bdea; } /* Pageage-signup ----------------------------------------------------------------------------- */ #package-signup { background: #333; border-top: 10px solid #7A68AE; } #package-signup > section { padding: 40px 0; } /* Block Containers */ #package-signup .blok-1 { width: 55%; float: left; padding: 6px 0 2px 80px; border-right: 1px solid #aaa; } #package-signup .blok-2 { width: 45%; float: left; padding: 18px 0 0 80px; } /* Type Elements */ #package-signup h2 { color: #fff; margin: 0; } #package-signup h2 b { color: #a5e0f1; font-weight: 400; } #package-signup h5 { color: #ccc; } /* ========================================================================== :: :: 3.8 - TEAM LAYOUTS :: ============================================================================= */ /* team-Intro ----------------------------------------------------------------------------- */ #team-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #team-intro > section { padding: 40px 0 0; } /* Block Containers */ #team-intro .blok-1 { width: 840px; text-align: center; margin: 0 auto; } /* Type Elements */ #team-intro h1 { color: #7a68ae; margin: 0; } #team-intro p { font-style: italic; color: #888; line-height: 24px; margin: 10px 0; } /* Divider Icon */ #team-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* Markets Sections ----------------------------------------------------------------------------- */ .team { background: #605090; } .team:nth-child(odd) { background: #7a68ae; } .team > section { padding: 50px 0; position: relative; } /* Block Containers */ .team .blok-text { float: left; width: 70%; } .team:nth-child(odd) .blok-text { float: right; } .team .blok-img { float: right; width: 30%; text-align: center; } .team:nth-child(odd) .blok-img { float: left; } /* Type Elements */ .team h2 { color: #fff; font-size: 34px; line-height: 34px; margin: 8px 0 5px; } .team h4 { color: #F7E33A; font-size: 22px; margin: 0 0 20px 0; } .team p { color: #c9bdea; font-size: 15px; line-height: 24px; margin: 0 0 20px; } /* Image Elements */ .team .blok-img img { border: 10px solid #EBE8F5; } /* ========================================================================== :: :: 3.9 - CONTACT LAYOUTS :: ============================================================================= */ /* contacts-Intro ----------------------------------------------------------------------------- */ #contact-intro { background: #fff; border-bottom: 10px solid #bcb3d6; height: 310px; } #contact-intro > section { padding: 0px 0; height: 300px; background: url(../img/contact-intro.png) no-repeat center right; position: relative; } /* Block Containers */ #contact-intro .blok-1 { max-width: 450px; height: auto; margin-top: 90px; } /* Type Elements */ #contact-intro h1 { color: #7a68ae; margin: 0; } #contact-intro h1 + p { font-weight: 300; font-size: 18px; color: #888; line-height: 24px; margin: 0; } #contact-intro p a { color: #7A68AE; } #contact-intro p a:hover { color: #1E211D; } /* Divider Icon */ #contact-intro hr { width: 100%; height: 52px; margin: 0 auto; position: absolute; bottom: -3px; border: 0; background: url(../img/divider_light-purple.png) no-repeat center center; clear: both; } @media screen and (max-width: 480px) { #contact-intro { height: auto; } #contact-intro > section { background-image: none; height: auto; } #contact-intro .blok-1 { margin: 0 0 80px; } } /* contacts-items ----------------------------------------------------------------------------- */ #contact-page { background : #605090; padding: 60px 0; } /* Block Containers */ #contact-page .bloks { width: 48%; background: #ebe8f5; } #contact-page .blok-1 { float: left; padding-bottom: 30px; } #contact-page .blok-2 { float: right; } /* Type Elements */ #contact-page .bloks p { color : #666666; padding : 0; } #contact-page .blok-1 p { padding: 0 40px;} #contact-page .bloks #contact-form-intro { margin-bottom: 30px; float: none; padding: 0 40px; } #contact-page .bloks h3, #contact-page .bloks h4 { font-weight: bold; font-family: 'helvetica neue', helvetica, arial, sans-serif; color : #7a68ae; padding : 0 40px; font-size : 1em; } #contact-page .bloks p span { font-weight: bold; color: #7a68ae; } #contact-page .bloks p a { font-weight: bold; color: #7a68ae; } #contact-page .bloks header { background: #ffffff; margin-bottom: 40px; } #contact-page .bloks header h2 { font-size: 26px; color: #7A68AE; padding : 20px 40px 5px 40px; } /* Map Elements */ #delph-office-map, #manchester-office-map { position: relative; display: block; float: none; width: 386px; height: 102px; margin: 0 auto 20px; border: 6px solid #fff; padding: 4px; background: #fff; } /* Form Elements */ .salesforce_w2l_lead form input { position: relative; } .salesforce_w2l_lead form { position:relative; margin: 0; } .salesforce_w2l_lead span.error-tooltip { background: #F7E33A; padding: 4px; border-radius: 0; color: #605090; display: block; font-size: 14px; height: auto; text-align: center; width: 276px; } .salesforce_w2l_lead span.error-tooltip:after { border: none; content: ""; height: 0; width: 0; } .salesforce_w2l_lead span.signup-error-tooltip, #contact-page span.confirm-signup-error-tooltip { border: none; background: #F7E33A; padding: 4px; border-radius: 0; color: #605090; font-size: 14px; height: 40px; text-align: center; width: 100%; display: block; } .salesforce_w2l_lead span.signup-error-tooltip:after { border: none; content: ""; height: 0; left: 5px; position: absolute; top: 9px; width: 0; } .salesforce_w2l_lead span.confirm-signup-error-tooltip:after { border-color: #FFFFFF transparent transparent transparent; border-style: solid; border-width: 3px; content: ""; height: 0; left: 5px; position: absolute; top: 9px; width: 0; } .salesforce_w2l_lead input#terms { position : relative; } .salesforce_w2l_lead form { display: block; position: relative; width: auto; height: auto; } .salesforce_w2l_lead form:after { clear: both; } .salesforce_w2l_lead form label { display: inline-block; min-width: 50px; width:100%; float: left; color: #666; } .salesforce_w2l_lead form input { margin: 0; width: 100%; min-height: 30px; display: inline-block; float: right; } .salesforce_w2l_lead form input[type=submit] { width: 126px; float: right; margin-left: 106px; height: auto; border: 0; } .salesforce_w2l_lead form textarea { background:#fff; width: 100%; height: 100px; float: right; } .salesforce_w2l_lead form.asterisk { color : #f00; } div.label-input:before, div.label-input:after { content: " "; display: table; } div.label-input:after { clear: both; } div.label-input { *zoom: 1; position: relative; display: block; margin-bottom : 14px; float: none; } div.error { position: absolute; z-index: 99; background: pink; } span.signup-error-tooltip, span.confirm-signup-error-tooltip { background: #F7E33A; border-radius: 5px; padding: 4px; color: #605090; display: block; text-align: center; margin: -10px 0 20px 0; } #contact-page .wpcf7 { padding: 0 0 30px; margin-left: 0; } #contact-page .wpcf7 h3 { line-height: 24px; margin-bottom: 20px; padding: 0; } #contact-page .wpcf7 p { margin: 0; color: #666; font-size: 14px; padding: 0 0 6px; } #contact-page .wpcf7 input { margin: 0 0 5px 0; min-height: 0; float: none; width: 100%; } #contact-page .wpcf7 input[type="submit"] { width: 150px; float: right; border: 0; padding: 6px 15px; color: #fff; } #contact-page .wpcf7 textarea { margin: 0 0 15px 0; height: 120px; float: none; width: 100%; } #contact-page .wpcf7 .wpcf7-response-output { clear: both; border: 0; background: #FFF180; padding: 10px 20px; margin: 20px 0 10px; border: 1px solid #D3C347; } #contact-page .wpcf7 .wpcf7-not-valid-tip { width: 100%; height: 31px; left: 0; top: -8px; padding: 4px 10px; border-radius: 4px; } /* Saleslead Form */ section.become-reseller .blok-1 { background: #e5e2f0; } .salesforce_contact-form { float: left; padding: 0 40px 20px; position: relative; } .salesforce_contact-form:before, .salesforce_contact-form:after { content: ''; display: table; } .salesforce_contact-form:after { clear: both; } .salesforce_contact-form:after { *zoom: 1; } form.w2llead { float: left; padding-top: 50px; padding-bottom: 50px; position: relative; width: 100%; } .salesforce_contact-form form.w2llead .sf_field { margin-bottom: 8px; float: left; width: 100%; } .salesforce_contact-form form.w2llead .w2lsubmit input { margin: 5px; padding: 6px 15px; color: #fff; display: inline-block; background: #605090; border-radius: 0; font-weight: 300; font: 16px/16px 'Roboto', sans-serif; transition: all 0.1s ease; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_field { width: 50%; padding-right: 5%; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_field:nth-child(even) { padding-right: 0; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_type_select { padding-right: 5% !important; height: 43px; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_field_Other { padding-right: 0 !important; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_type_checkbox { width: 20%; margin: 0 0 20px 0; padding: 0; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_type_checkbox label { display: inline; width: auto; margin: 0; line-height: 1; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_type_checkbox input.checkbox { height: auto; width: auto; display: inline; } .salesforce_contact-form form#salesforce_w2l_lead_3 select.w2linput.select { height: 43px; } .salesforce_w2l_lead form#salesforce_w2l_lead_3 .sf_field_Number { margin-top: 40px; clear: both; } .salesforce_contact-form form.w2llead label.w2llabel { margin-bottom: 0; } .salesforce_contact-form form.w2llead input.w2linput.text { width: 100%; padding: 4px 10px; font-size: 14px; color: #666; } .salesforce_contact-form form.w2llead .w2lsubmit input[type="submit"] { width: 150px; } .salesforce_contact-form form.w2llead input.checkbox { height: auto; float: left; margin: 0 5px 0 0; width: auto; } textarea.w2linput { height: 120px; } .salesforce_contact-form form#salesforce_w2l_lead_3 .sf_type_html { width: 100% !important; margin-top: 20px; } .salesforce_contact-form form.w2llead label.w2llabel.html { font-size: 26px; color: #6d5aa1; display: block; } p.sf_required_fields_msg { position: absolute !important; margin: 0 0 20px; } .contact-page-2 p.sf_required_fields_msg { position: absolute; top: 50px; text-align: left; } .page-template-page-free_contact-php p.sf_required_fields_msg { } .salesforce_contact-form form.w2llead .w2lsubmit { position: absolute; bottom: 40px; right: 0; } .page-template-page-free_contact-php .salesforce_contact-form form.w2llead .w2lsubmit { position: static; } /* ========================================================================== :: :: X.X - HOW IT WORKS :: ============================================================================= */ /* howitworks-Intro ----------------------------------------------------------------------------- */ #howitworks-intro { background: url(../img/howitworks-splash.png) no-repeat top right; border-bottom: 10px solid #bcb3d6; height: 370px; } #howitworks-intro > section { padding: 0px 0; height: 360px} /* Block Containers */ #howitworks-intro .blok-1 { max-width: 450px; height: auto; margin-top: 110px;} /* Type Elements */ #howitworks-intro h1 { margin: 0; line-height: 44px; margin-bottom: 20px; color: #6c5aa1; } #howitworks-intro h1 + p { font-weight: 300; font-size: 18px; color: #888; line-height: 24px; margin: 0; } /* Divider Icon */ #howitworks-intro hr { width: 98px; height: 52px; margin: 65px auto -3px; border: 0; background: url(../img/divider_light-purple.png) no-repeat; clear: both; } .how-it-works { background: #f4f2fa; } /* Main Content */ section.howitworks-maincontent { } section.howitworks-maincontent section { padding-top: 55px; padding-bottom: 55px; border-bottom: 1px solid #e3dfef; } section.howitworks-maincontent section .blok-1 { width: 65%; float: left; margin-right: 10%; } section.howitworks-maincontent section .blok-2 { width: 25%; float: right; padding-top: 72px; } section.howitworks-maincontent h1 { font-size: 36px; color: #6c5aa1; } section.howitworks-maincontent p { font-size: 18px; color: #888; } section.howitworks-maincontent ul { padding: 0; margin-top: 40px; } section.howitworks-maincontent ul li { display: inline; margin-right: 15px; } section.howitworks-maincontent ul li .btn { color: #fff; font-size: 20px; width: 290px; height: 55px; padding: 0; line-height: 55px; text-align: center; margin: 0; } /* Things you need */ section.thingsyouneed-content section { padding-top: 55px; padding-bottom: 55px; border-bottom: 1px solid #e3dfef; } section.thingsyouneed-content h2 { font-size: 36px; color: #6c5aa1; margin-bottom: 60px; } section.thingsyouneed-content img { margin-bottom: 40px; } section.thingsyouneed-content ol { list-style: none; max-width: 900px; float: left; margin-bottom: 40px; } section.thingsyouneed-content ol li { font-size: 18px; width: 30%; margin-right: 5%; float: left; color: #888; text-align: left; } section.thingsyouneed-content ol li span { display: none;} section.thingsyouneed-content ol li a { color: #5f5191; } section.thingsyouneed-content ol li:nth-child(2) { text-align: center; } section.thingsyouneed-content ol li:last-child { margin-right: 0; text-align: right; } section.thingsyouneed-content ol + p { clear: both; font-size: 18px; color: #888; } section.thingsyouneed-content ul { list-style: none; padding: 0; margin-top: 40px; } section.thingsyouneed-content ul li { display: inline; } section.thingsyouneed-content ul li .btn { color: #fff; font-size: 20px; width: 290px; height: 55px; line-height: 1.5; text-align: center; } /* Setup Steps */ section.howitworks-setupsteps { margin-top: 55px; } section.howitworks-setupsteps section { padding-bottom: 55px; margin-bottom: 50px; background: #e5e2f0; } section.howitworks-setupsteps h2 { font-size: 36px; color: #6c5aa1; padding: 20px 30px; background: #ddd8ee; margin: 0; } section.howitworks-setupsteps ol { list-style: none; float: left; margin: 50px 0; } section.howitworks-setupsteps ol li { float: left; width: 20%; padding: 0 3%; text-align: center; } section.howitworks-setupsteps ol li img { display: block; margin: 0 auto 35px; } section.howitworks-setupsteps ol li p { margin: 0; font-size: 18px; color: #888; } section.howitworks-setupsteps p.actions { text-align: center; } section.howitworks-setupsteps .btn { color: #fff; font-size: 20px; width: 290px; height: 55px; line-height: 1.5; text-align: center; margin: 0 auto; } /* ========================================================================== :: :: X.X - RESELLERS :: ============================================================================= */ /* resellers-Intro ----------------------------------------------------------------------------- */ #resellers-intro { background: #fff; border-bottom: 10px solid #bcb3d6; height: 310px; } #resellers-intro > section { padding: 0px 0; height: 300px; background: url(../img/reseller-splash-v2.png) no-repeat center right; position: relative; } /* Block Containers */ #resellers-intro .blok-1 { max-width: 450px; height: auto; margin-top: 110px; } /* Type Elements */ #resellers-intro h1 { margin: 0; line-height: 44px; margin-bottom: 20px; color: #6c5aa1; } #resellers-intro h1 + p { font-weight: 300; font-size: 18px; color: #888; line-height: 24px; margin: 0; } /* Divider Icon */ #resellers-intro hr { width: 100%; height: 52px; margin: 0 auto; position: absolute; bottom: -3px; border: 0; background: url(../img/divider_light-purple.png) no-repeat center center; clear: both; } .resellers { background: #f4f2fa; } /* Main Content */ section.resellers-maincontent section { padding-top: 55px; padding-bottom: 55px; /* border-bottom: 1px solid #e3dfef; margin-bottom: 80px; */ } section.resellers-maincontent section .blok-1 { width: 100%; } section.resellers-maincontent section .blok-2 { width: 100%; } section.resellers-maincontent h1 { font-size: 32px; color: #6c5aa1; line-height: 1; margin-bottom: 30px; } section.resellers-maincontent p { color: #888; } section.resellers-maincontent p.actions { text-align: center; clear: both; padding: 0; margin: 0; } section.resellers-maincontent .btn { color: #fff; font-size: 20px; width: 290px; height: 55px; line-height: 1.5; text-align: center; margin: 0 auto; } ol.partners { list-style: none; margin-bottom: 50px; } ol.partners li { float: left; width: 25%; padding: 0 5%; height: 60px; margin-bottom: 50px; text-align: center; line-height: 60px; } ol.partners li img { display: inline-block; margin: 0 auto; } /* How it works */ section.howitworks-content section { border-top: 2px solid #e3dfef; padding: 50px 0 20px; } section.howitworks-content h2 { font-size: 32px; color: #6c5aa1; margin-bottom: 50px; line-height: 1; } section.howitworks-content img { margin-bottom: 40px; } section.howitworks-content ol li span { display: none;} section.howitworks-content ol { list-style: none; max-width: 900px; float: left; margin-bottom: 0; margin-top: 0; } section.howitworks-content ol li { font-size: 18px; width: 30%; margin-right: 5%; float: left; color: #888; text-align: left; } section.howitworks-content ol li a { color: #5f5191; } section.howitworks-content ol li:nth-child(2) { text-align: center; } section.howitworks-content ol li:last-child { margin-right: 0; text-align: right; } /* Resellers Benefits */ section.resellers-benefits { margin-top: 60px; } section.resellers-benefits section { margin-bottom: 50px; background: #fff; } section.resellers-benefits p.actions { text-align: center; } section.resellers-benefits .btn { color: #fff; font-size: 20px; width: 290px; height: 55px; line-height: 1.5; text-align: center; margin: 0 auto 30px; } section.resellers-benefits h2 { font-size: 32px; color: #6c5aa1; padding: 20px 30px; background: #ddd8ee; margin: 0; } section.resellers-benefits ol { list-style: none; float: left; margin: 50px 0 0; } section.resellers-benefits ol li { float: left; width: 25%; padding: 0 3%; text-align: center; margin-bottom: 50px; } section.resellers-benefits ol li img { display: block; margin: 0 auto 35px; } section.resellers-benefits ol li p { margin: 0; font-size: 18px; color: #888; font-weight: bold; } /* Become a reseller */ section.become-reseller { margin-top: 60px; } section.become-reseller section { margin-bottom: 100px; background: #fff; } section.become-reseller h2 { font-size: 36px; color: #6c5aa1; padding: 20px 30px; background: #ddd8ee; margin: 0; } /* Reseller Form */ .purple-forms { background: #E5E2F0; } .purple-forms h2 { color: #6C5AA1; font-size: 26px; line-height: 26px; margin: 0; padding: 30px 40px; background: #DDD8EE; } .reseller-form:before, .reseller-form:after { content: " "; display: table; } .reseller-form:after { clear: both; } .reseller-form { *zoom: 1; padding: 30px 40px; } .reseller-form form.w2llead { float: none; padding: 0; } .reseller-form p.sf_required_fields_msg { display: none; } .reseller-form { padding: 30px 40px; } .reseller-form .form-submit-message { display: block; background: #BCB3D6; padding: 15px 30px; margin: 0 0 20px 0; color: #6C5AA1; } .reseller-form fieldset { padding: 0 0 20px 300px; border-bottom: 1px solid #bcb3d6; margin-bottom: 20px; position: relative; } .reseller-form fieldset:last-child { border-bottom: 0; padding-bottom: 0;} .reseller-form fieldset legend { position: absolute; left: 0; color: #6c5aa1; font-size: 18px; font-weight: bold; } .reseller-form .fieldgroup:before, .reseller-form .fieldgroup:after { content: " "; display: table; } .reseller-form .fieldgroup:after { clear: both; } .reseller-form .fieldgroup { *zoom: 1; margin-bottom: 15px;} .reseller-form .sf_field { float: left; width: 50%; padding: 0 0 0 20px; } .reseller-form .sf_type_textarea { width: 100%; } .reseller-form .sf_field input { width: 100%; padding: 8px 10px 8px 10px; } .reseller-form .sf_field textarea { width: 100%; padding: 8px 10px 8px 10px; height: 85px; } .reseller-form .sf_field select { width: 100%; padding: 8px 10px 8px 10px; } .reseller-form .sf_field input:disabled, .reseller-form .sf_field textarea:disabled, .reseller-form .sf_field select:disabled { opacity: 0.3; } .reseller-form .sf_field label { color: #6c5aa1; margin-bottom: 5px; display: block; position: relative; } .reseller-form .sf_field label .required { color: #F21A1A; } .reseller-form .sf_type_text label.error:after { content: url(../img/form-error.png); position: absolute; top: 7px; right: 5px; } .reseller-form .sf_type_text label.error:after { top: 34px; right: 10px; } .resellers-maincontent .reseller-form fieldset p { color: #6c5aa1; margin: 0 0 20px 20px; } .reseller-form .sf_field input[type="checkbox"] { width: auto; padding: 8px 10px 8px 10px; display: inline-block; vertical-align: top; background: none; float: right; } .reseller-form .agreement-fields .sf_type_checkbox { width: 100%; } .reseller-form .sf_field.sf_type_checkbox label { float: left; width: auto; padding: 0 } .reseller-form .agreement-warning { margin: 0 0 20px 20px; padding: 10px 15px; background: #BCB3D6; color: #6C5AA1; display: none; } .reseller-form input[type="submit"] { width: 160px; float: right; background: #5f5191; border: none; color: #fff; font-size: 16px; padding: 10px; } @media screen and (max-width: 960px) { .reseller-form fieldset { padding: 0 0 20px 0; } .reseller-form fieldset legend { position: relative; padding: 0 0 20px; } .reseller-form fieldset .sf_field { padding: 0 20px 0 0; } .resellers-maincontent .reseller-form p { color: #6c5aa1; margin: 0 20px 20px 0; } .resellers-maincontent .reseller-form fieldset p { margin: 0 20px 20px 0; } .reseller-form .agreement-warning { margin: 0 20px 20px 0; } } @media screen and (max-width: 700px) { .reseller-form fieldset .sf_field { float: none; width: 100%; padding: 0; } .resellers-maincontent .reseller-form p { color: #6c5aa1; margin: 0 0 20px 0; } .resellers-maincontent .reseller-form fieldset p { margin: 0 0 20px 0; } .reseller-form .agreement-warning { margin: 0 0 20px 0; } } /* ========================================================================== :: :: X.X - GENERIC PAGE TEMPLATE :: ============================================================================= */ /* Generic-Intro- 2 ----------------------------------------------------------------------------- */ #generic-intro-2 { background: #fff; border-bottom: 10px solid #bcb3d6; } #generic-intro-2 > section { padding: 0px 0; min-height: 200px; position: relative; } /* Block Containers */ #generic-intro-2 .blok-1 { max-width: 450px; height: auto; margin-top: 50px; } /* Type Elements */ #generic-intro-2 h1 { margin: 0; line-height: 44px; margin-bottom: 10px; color: #6c5aa1; } #generic-intro-2 p { color: #888; float: left; font-size: 18px; font-style: normal; line-height: 26px; margin: 10px 0 45px; } /* Divider Icon */ #generic-intro-2 hr { width: 100%; height: 52px; clear: both; margin: 0 auto; position: absolute; bottom: -3px; border: 0; background: url(../img/divider_light-purple.png) no-repeat center center; } /* Generic-Page-2 ----------------------------------------------------------------------------- */ #generic-page-2 { background: #f4f2fa; padding: 30px 0 50px; } .generic-layout-section { padding: 20px 0; color: #666; } .generic-layout-section .blok_full { width: 100%; } .generic-layout-section .blok_left { width: 50%; float: left; padding-right: 30px; } .generic-layout-section .blok_right { width: 50%; float: right; padding-left: 30px; } @media screen and (max-width: 767px) { .generic-layout-section .blok_left, .generic-layout-section .blok_right { width: 100%; float: none;} } /* Type Elements */ .generic-layout-section h1 { color: #6c5aa1; font-size: 50px; } .generic-layout-section h2 { color: #6c5aa1; font-size: 30px; } .generic-layout-section h3 { color: #666; font-size: 24px; } .generic-layout-section h4 { color: #6c5aa1; font-size: 18px; } .generic-layout-section p { color: #666; font-size: 14px; line-height: 24px; margin-bottom: 20px; } .generic-layout-section p a { color: #6c5aa1; } .generic-layout-section p a:hover { color: #222; } .generic-layout-section ul { margin: 0 0 30px; padding: 0 0 0 20px; } .generic-layout-section ul li { margin: 0 0 15px; } /* Image Elements */ .generic-layout-section img { max-width: 100%; height: auto; margin-bottom: 20px; } .generic-layout-section img { max-width: 100%; height: auto; margin-bottom: 20px; } .generic-layout-section p + p img { margin: 10px 0 0; } /* Generic Contact Form ----------------------------------------------------------------------------- */ .contact-form-section { } /* ========================================================================== :: :: X.X - GENERIC PAGE - CUSTOM STYLES :: ============================================================================= */ /* Generic-Page-2 custom spacing styles ----------------------------------------------------------------------------- */ .generic-layout-section.divider section { padding-bottom: 30px; margin-bottom: 10px; border-bottom: 2px solid #E0DBED; } .generic-layout-section.no-padding { margin-bottom: -20px; } .generic-layout-section.no-padding, .generic-layout-section.no-padding section { padding-bottom: 0; } .feat-section-3 > section { padding: 50px 0; position: relative; border-bottom: 2px solid #e0dbed; } .padding-top-0 > section { padding-top: 0; } .padding-top-10 > section { padding-top: 10px; } .padding-top-20 > section { padding-top: 20px; } .padding-top-30 > section { padding-top: 30px; } .padding-bottom-0 > section { padding-bottom: 0; } .padding-bottom-10 > section { padding-bottom: 10px; } .padding-bottom-20 > section { padding-bottom: 20px; } .padding-bottom-30 > section { padding-bottom: 30px; } /* Pricing Page ----------------------------------------------------------------------------- */ #generic-intro-2.pricing-page section { padding-top: 20px; min-height: 220px; background: url(../img/intro-pricing.png) no-repeat right 30px; } /* White Label Page ----------------------------------------------------------------------------- */ /* Intro */ #generic-intro-2.white-label section { padding-top: 10px; min-height: 220px; background: url(../img/intro-pricing.png) no-repeat right 30px; } /* Page */ #generic-page-2.white-label { padding-bottom: 0; } /* Login Process Intro ----------------------------------------------------------------------------- */ #generic-intro-2.login-process section { padding-top: 30px; min-height: 250px; background: url(../img/intro-login-process.png) no-repeat right 30px; } /* global and multilingual Intro ----------------------------------------------------------------------------- */ #generic-intro-2.global-multilingual section { padding-top: 30px; min-height: 270px; background: url(../img/intro-multilingual.png) no-repeat right 30px; } #generic-intro-2.global-multilingual .blok-1 { max-width: 500px; } /* Google Apps Intro ----------------------------------------------------------------------------- */ #generic-intro-2.google-apps section { padding-top: 30px; min-height: 270px; background: url(../img/google-apps.png) no-repeat right 50px; } #generic-intro-2.google-apps .blok-1 { max-width: 500px; } /* Bring Your Own Devices Intro ----------------------------------------------------------------------------- */ #generic-intro-2.byod-page section { padding-top: 30px; min-height: 270px; background: url(../img/byod-bg.png) no-repeat right 50px; } #generic-intro-2.byod-page .blok-1 { max-width: 500px; } /* Bring Your Own Devices Intro ----------------------------------------------------------------------------- */ #generic-intro-2.hotspot2 section { padding-top: 30px; min-height: 270px; background: url(../img/hotspot2-bg.png) no-repeat right 50px; } #generic-intro-2.hotspot2 .blok-1 { max-width: 500px; } /* ---------------------------------------------------------------------------- :: Sectors Home ----------------------------------------------------------------------------- */ #generic-intro-2.sector-home section { min-height: 350px; background: url(../img/sectors/sectors-header.png) no-repeat right center; } #generic-intro-2.sector-home .blok-1 { margin-top: 60px; } #generic-page-2.sector-home .generic-layout-section { padding: 0 0 20px; } #generic-page-2.sector-home .generic-layout-section section { border-bottom: 2px solid #e3dfef; text-align: center; } #generic-page-2.sector-home .generic-layout-section h4 { color: #65529b; margin: -5px 0 20px; font-weight: bold; } #generic-page-2.sector-home .generic-layout-section h4 a { color: #65529b; } #generic-page-2.sector-home .generic-layout-section h4 a:hover { color: #444; } #generic-page-2.sector-home .generic-layout-section h2 { margin-top: 40px; } #generic-page-2.sector-home .generic-layout-section p { font-size: 15px; line-height: 26px; } #generic-page-2.sector-home .generic-layout-section.retail-section .blok_left, #generic-page-2.sector-home .generic-layout-section.hospitality-section .blok_right, #generic-page-2.sector-home .generic-layout-section.health-section .blok_left, #generic-page-2.sector-home .generic-layout-section.travel-section .blok_right, #generic-page-2.sector-home .generic-layout-section.telecoms-section .blok_left, #generic-page-2.sector-home .generic-layout-section.marketing-section .blok_right { width: 40%; } #generic-page-2.sector-home .generic-layout-section.retail-section .blok_right, #generic-page-2.sector-home .generic-layout-section.hospitality-section .blok_left, #generic-page-2.sector-home .generic-layout-section.health-section .blok_right, #generic-page-2.sector-home .generic-layout-section.travel-section .blok_left, #generic-page-2.sector-home .generic-layout-section.telecoms-section .blok_right, #generic-page-2.sector-home .generic-layout-section.marketing-section .blok_left { width: 60%; padding: 0; } #generic-page-2.sector-home .generic-layout-section.event-section .blok_right, #generic-page-2.sector-home .generic-layout-section.event-section .blok_left, #generic-page-2.sector-home .generic-layout-section.public-section .blok_right, #generic-page-2.sector-home .generic-layout-section.public-section .blok_left { width: 100%; padding: 0; } @media screen and (max-width: 900px) { #generic-page-2.sector-home .generic-layout-section .blok_left, #generic-page-2.sector-home .generic-layout-section .blok_right { width: 100% !important; float: none !important; padding-left: 10px !important; padding-right: 10px !important; } #generic-intro-2.sector-home section { background: none !important; } } /* ---------------------------------------------------------------------------- :: Sector Inner ----------------------------------------------------------------------------- */ #generic-intro-2.sector-inner { background-color: #6c5aa1; } #generic-intro-2.sector-inner section { min-height: 280px; } #generic-intro-2.sector-inner hr { display: none; } #generic-intro-2.sector-inner .blok-1 { margin-top: 70px; max-width: 650px; } #generic-intro-2.sector-inner .blok-1 h1 { color: #fff; } #generic-intro-2.sector-inner .blok-1 p { color: #fff; } #generic-page-2.sector-inner ul { margin: 0 0 20px 10px; } #generic-page-2.sector-inner ul li { color: #6c5aa1; margin: 0 0 4px; } #generic-page-2.sector-inner .sector-examples { background: #e2deef; padding: 20px; margin: 0; list-style: none; font-weight: bold; } #generic-page-2.sector-inner .sector-examples a { color: #8573BA; } #generic-page-2.sector-inner .sector-examples a:hover { color: #1E211D; } /* Sector Headers ----------------------------------------------------------------------------- */ #generic-intro-2.sector-inner.sector-retail { background: #6c5aa1 url(../img/sectors/sector-header-retail.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-hospitality { background: #6c5aa1 url(../img/sectors/sector-header-hospitality.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-event { background: #6c5aa1 url(../img/sectors/sector-header-event.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-health { background: #6c5aa1 url(../img/sectors/sector-header-health.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-travel { background: #6c5aa1 url(../img/sectors/sector-header-travel.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-telecoms { background: #6c5aa1 url(../img/sectors/sector-header-telecoms.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-marketing { background: #6c5aa1 url(../img/sectors/sector-header-marketing.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-public { background: #6c5aa1 url(../img/sectors/sector-header-public.jpg) no-repeat center center; } #generic-intro-2.sector-inner.sector-landing { background: #6c5aa1 url(../img/sectors/sector-header-landing.jpg) no-repeat center center; } @media screen and (max-width: 900px) { #generic-intro-2.sector-inner section { min-height: none; } #generic-intro-2.sector-inner section .blok-1 { padding-left: 15px; padding-right: 15px; text-align: center; max-width: none; } .generic-layout-section .blok_left, .generic-layout-section .blok_right { width: 100%; padding-left: 15px !important; padding-right: 15px !important; } } /* ---------------------------------------------------------------------------- :: Sector Landing ----------------------------------------------------------------------------- */ #sector-landing-footer { background: #bcb3d6; padding: 40px 0; } #sector-landing-footer h2 { font-size: 26px; line-height: 32px; color: #6c5aa1; margin: 0; width: 250px; } #sector-landing-footer a.button { float: right; margin-top: 10px; } #sector-landing-footer section .blok_left { width: 47%; margin-right: 3%; float: left; padding: 30px; background-color: #f4f2fa; } #sector-landing-footer section .blok_right { width: 47%; margin-left: 3%; float: right; padding: 30px; background-color: #f4f2fa; } @media screen and (max-width: 900px) { #sector-landing-footer .blok_left, #sector-landing-footer .blok_right { width: 46%; margin: 0 2%; } } /* ========================================================================== :: :: 4.2 - FEATURES LAYOUTS :: ============================================================================= */ /* Features-Intro ----------------------------------------------------------------------------- */ #features2-intro { background: #fff; border-bottom: 10px solid #bcb3d6; height: 240px; } #features2-intro > section { padding: 80px 0; height: 232px} /* Block Containers */ #features2-intro .blok-1 { width: auto; height: 72px; padding-left: 100px; background: url(../img/features-sprites.png) no-repeat 0 0; } /* Type Elements */ #features2-intro h1 { margin: 0; line-height: 44px; margin-bottom: 4px; } #features2-intro h1 + p { font-weight: 300; font-size: 18px; color: #888; line-height: 24px; margin: 0; } /* Specific Features Pages */ /* WiFi Analytics */ #features2-intro.wifi-analytics { background: url(../img/wifi-analytics_splash.png) no-repeat top right; } #features2-intro.wifi-analytics h1, div.wifi-analytics h2 { color: #af9fcc; } #features2-intro.wifi-analytics .blok-1 { background-position: 0 0; } /* WiFi Marketing */ #features2-intro.wifi-marketing { background: url(../img/wifi-marketing_splash.png) no-repeat bottom right; } #features2-intro.wifi-marketing h1, div.wifi-marketing h2 { color: #eb705e; } #features2-intro.wifi-marketing .blok-1 { background-position: 0 -72px; } /* Presence Analytics */ #features2-intro.presence-analytics { background: url(../img/presence-analytics_splash.png) no-repeat bottom right; } #features2-intro.presence-analytics h1, div.presence-analytics h2 { color: #e85fe3; } #features2-intro.presence-analytics .blok-1 { background-position: 0 -144px; } /* Social WiFi */ #features2-intro.social-wifi { background: url(../img/social-wifi_splash.png) no-repeat bottom right; } #features2-intro.social-wifi h1, div.social-wifi h2 { color: #6bc5ef; } #features2-intro.social-wifi .blok-1 { background-position: 0 -216px; } /* Security Legal */ #features2-intro.security-legal { background: url(../img/security-legal_splash.png) no-repeat bottom right; } #features2-intro.security-legal h1, div.security-legal h2 { color: #eac620; } #features2-intro.security-legal .blok-1 { background-position: 0 -288px; } /* Content Filtering */ #features2-intro.content-filtering { background: url(../img/content-filtering_splash.png) no-repeat bottom right; } #features2-intro.content-filtering h1, div.content-filtering h2 { color: #63b85f; } #features2-intro.content-filtering .blok-1 { background-position: 0 -360px; } /* Features-Page ----------------------------------------------------------------------------- */ #features { background: #f4f2fa; } #features > section { padding: 50px 0; } section.feature-content { padding: 65px 0 0; background: #f4f2fa; } section.feature-content:last-of-type { padding-bottom: 65px; } section.feature-content h2 { font-size: 24px; margin-bottom: 10px; } section.feature-content p { color: #666; font-size: 14px; } section.feature-content a { font-size: 16px; font-weight: bold; } section.feature-content a.button, section.feature-content a.button-outline { font-weight: normal; margin-top: 10px; } section.feature-content img { float: left; max-width: 100%; height: auto; } section.feature-content .blok-1 { float: left; width: 45%; } section.feature-content.right .blok-1 { float: right; } section.feature-content .blok-2 { float: right; width: 45%; } section.feature-content.right .blok-2 { float: left; } section.feature-content.right .blok-2 img { float: left; } /* Security Legal Content */ section.security-legal section { margin-bottom: 30px; } section.security-legal h2 { color: #8573ba; font-size: 24px; } section.feature-slat section { margin-bottom: 0; } section.feature-slat .blok-1 { width: 100%; } section.feature-slat img { float: left; margin: 0 30px 30px 0; } section.feature-slat p { margin-left: 138px; } /* Block Containers */ .feat-section2 .blok-1 { width: 120px; float: left; } .feat-section2 .blok-2 { width: 840px; background: #fff; padding: 40px 50px; float: right; min-height: 530px; border-top: 5px solid #7A68AE; } /* Type Elements */ .feat-section2 h2 { font-size: 34px; margin: 0 0 20px; color: #7A68AE; } .feat-section2 p { font-size: 16px; line-height: 24px; color: #888; margin: 0 0 20px 0; } /* Features Navigaation */ .feat-section2 .blok-1 ul { list-style: none; margin: 0; padding: 0; } .feat-section2 .blok-1 li { margin: 0; display: block; position: relative; } .feat-section2 .blok-1 li a { display: block; margin-bottom: 20px; } .feat-section2 .blok-1 li a img { transition: all 0.4s ease; } .feat-section2 .blok-1 li a:hover img { margin-left: 25px; } .feat-section2 .blok-1 li.active:after { content: " "; border-bottom: 16px solid transparent; border-top: 16px solid transparent; border-right: 16px solid #fff; display: block; height: 0; width: 0; position: absolute; right: 0; top: 20px; } /* ========================================================================== :: :: 4.3 - SOLUTIONS LAYOUTS :: ============================================================================= */ /* solutions-Intro ----------------------------------------------------------------------------- */ #solutions-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #solutions-intro > section { padding: 40px 0 0; } /* Block Containers */ #solutions-intro .blok-1 { width: 900px; margin: 0 auto; text-align: center; } /* Type Elements */ #solutions-intro h1 { color: #7a68ae; margin: 0; } #solutions-intro p { font-style: italic; color: #888; line-height: 24px; margin: 10px auto; width: 700px; } /* Divider Icon */ #solutions-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* solutions-Page ----------------------------------------------------------------------------- */ .solutions-section { background: #605090; } .solutions-section > section { padding: 50px 0 20px 0; } /* Block Containers */ .solutions-section .blok:before, .solutions-section .blok:after { content: " "; display: table; } .solutions-section .blok:after { clear: both; } .solutions-section .blok { *zoom: 1; background: #fff; padding: 40px 50px 30px; margin-bottom: 40px;/* border-top: 5px solid #A5E0F1; */ } /* #solutions-retail .blok-1 { border-top: none; padding-top: 220px; background: #fff url(../img/bg_solution-retail.jpg) no-repeat; } #solutions-hospitality .blok-1 { border-top: none; padding-top: 220px; background: #fff url(../img/bg_solution-hospitality.jpg) no-repeat; } #solutions-leisure .blok-1 { border-top: none; padding-top: 220px; background: #fff url(../img/bg_solution-leisure.jpg) no-repeat; } */ .solutions-section .blok.more-info { background-color: #614F96; text-align: center; border-top: none !important; padding: 30px 50px 30px; } /* Type Elements */ .solutions-section .blok-txt { } .solutions-section h2 { color: #8473B7; } .solutions-section h4 { color: #8473B7; } .solutions-section h5 { color: #8473B7; } .solutions-section p { font-size: 16px; line-height: 24px; color: #888; margin: 0 0 20px 0; } .solutions-section ul li { font-size: 16px; color: #888; margin-bottom: 10px; } .solutions-section .blok-txt a { font-size: 16px; } .solutions-section .more-info h2 { color: #fff; font-size: 38px; } .solutions-section .more-info p { color: #F1F0F7; } /* Image Elements */ .solutions-section .blok-img { width: 200px; float: right; margin: 50px 10px 0 0; } .solutions-section .blok-img img { border: 2px solid #c8c1dc; margin: 0 0 20px; } #solutions-retail h4 { margin-bottom: 5px; padding-left: 64px; line-height: 20px; padding-bottom: 28px; background: url(../img/sprites.png?dfssf) no-repeat 0 0; } #solutions-retail h4.wifi-marketing { background-position: 0 -48px;} #solutions-retail h4.wifi-analytics { background-position: 0 -96px;} #solutions-retail h4.wifi-security { background-position: 0 -144px;} #solutions-retail h4 + p { margin-left: 64px; margin-top: -30px; } #solutions-retail p.cloud { padding-left: 74px; background: url(../img/sprites.png) no-repeat 0 -192px; line-height: 48px; } #solutions-retail p.global { padding-left: 74px; background: url(../img/sprites.png) no-repeat 0 -240px; line-height: 48px; } #solutions-retail .circular-block { float: right; background: #BEB6D9; width: 300px; height: 300px; border-radius: 300px; padding: 75px 50px; box-sizing: padding-box; text-align: center; border: 2px dashed #81779D; } #solutions-retail .circular-block h3 { font-size: 18px; color: #1E211D; } #solutions-retail .circular-block p { font-size: 14px; color: #1E211D; } /* ========================================================================== :: :: 4.4 - PARTNERS LAYOUTS :: ============================================================================= */ #partners2-intro { background: #fff; border-bottom: 10px solid #7A68AE; } #partners2-intro > section { padding: 40px 0 0; } /* Block Containers */ #partners2-intro .blok-1 { width: 900px; margin: 0 auto; text-align: center; } /* Type Elements */ #partners2-intro h1 { color: #7a68ae; margin: 0; } #partners2-intro p { font-style: italic; color: #888; line-height: 24px; margin: 10px auto; width: 700px; } /* Divider Icon */ #partners2-intro hr { width: 98px; height: 52px; margin: 40px auto -3px; border: 0; background: url(../img/divider_purple.png) no-repeat; } /* partners-Page ----------------------------------------------------------------------------- */ .partners2-section { background: #605090; } .partners2-section > section { padding: 50px 0 20px; } /* Block Containers */ .partners2-section .partner:before, .partners2-section .partner:after { content: " "; display: table; } .partners2-section .partner:after { clear: both; } .partners2-section .partner { *zoom: 1; background: #fff; padding: 40px 50px 50px; border-top: 5px solid #AFA5E5; margin-bottom: 40px; } .partner2.more-info { background-color: #614F96; text-align: center; border-top: none !important; padding: 30px 50px 30px; } /* Type Elements */ .partners2-section .blok-txt { width: 500px; float: left; } .partners2-section .partner:nth-child(even) .blok-txt { float: right; } .partners2-section .blok-txt.full { width: 100%; } .partners2-section h2 { color: #8473B7; } .partners2-section h5 { color: #8473B7; } .partners2-section p { font-size: 16px; line-height: 24px; color: #888; margin: 0 0 20px 0; } .partners2-section .blok-txt a { font-size: 16px; color: #8473B7; } .partner2.more-info { background: #7A68AE; } .partner2.more-info h2 { color: #fff; font-size: 38px; } .partner2.more-info p { color: #F1F0F7; } /* Image Elements */ .partners2-section .blok-img { width: 320px; float: right; margin: 50px 0 0 0; text-align: center; } .partners2-section .partner:nth-child(even) .blok-img { float: left; margin: 70px 0 0 0; } .partner2-purdicom .blok-img { margin: 120px 0 0 50px; } .partner2-nexusip .blok-img { margin: 130px 50px 0 0; } /* ========================================================================== :: :: 4.5 - TESTIMONIALS :: ============================================================================= */ ul#testimonials { list-style: none; } ul#testimonials li { background: #EBE8F5; padding: 10px; margin-bottom: 30px; border-left: 4px solid #8573BA; float: left; width: 100%; box-sizing: padding-box; } ul#testimonials li blockquote { margin: 0; padding: 0; } ul#testimonials li cite { display: block; margin-bottom: 20px; } ul#testimonials li cite a { display: inline; } ul#testimonials li a.read-more { display: block; } ul#testimonials li figure.fl_right { float: right; width: 30%; margin: 0 0 0 20px; } ul#testimonials li figure.fl_right img { float: right; } /* ========================================================================== :: :: 5 - HELPER CLASSES :: ============================================================================= */ /* Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* Hide from both screenreaders and browsers */ .hidden { display: none !important; visibility: hidden; } /* Hide only visually, but have it available for screenreaders */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* Clearfix */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .float-left { float: left; } .float-right { float: right; } .clear { clear: both; margin: 0; padding: 0; width: 0; height: 0; } /* ========================================================================== :: :: 6 - PRINT STYLES :: ============================================================================= */ @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } .bold { font-weight: 700; } } /* Map Elements */ #delph-office-map, #manchester-office-map { position: relative; display: block; float: none; width: 386px; height: 102px; margin: 0 auto 20px; border: 6px solid #fff; padding: 4px; background: #fff; }