/* Table of Contents - - - - - - - - - 1. Global 2. Header 3. Home Page 4. Shared Hosting Page 5. VPS Page 6. Dedicated servers 7. Domains 8. About Us 9. FAQ 10. Datacenter 11. Affiliates 12. Blog 13. Contact 14. Elements 15. Footer 16. Media Queries - - - - - - - - - */ /* ============ 1 = Global ============ */ body { background: #fff; color: #5a5a5a; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; font-style: normal; font-weight: normal; margin: 0; position: relative; webkit-font-smoothing: antialiased;} .row { margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; max-width: 1280px; width: 100%; } .row.full-width { margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; max-width: 100%; width: 100%; } .row.no-gutter { margin:0 auto;} .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-left: 0; padding-right: 0; } .center-block { float: none; } a { color: #000000; outline: 0; text-decoration: underline; } a:hover, a:active, a:focus { outline: 0; text-decoration: bold; color:#FC6700; } code { background: #f5f2f0; border: 0; border-radius: 6px; color: #303038; display: block; font-family: consolas, monaco, 'andale mono', monospace; font-weight: normal; line-height: 1.3; margin: 8px 0; padding: 12px; text-shadow: 0 1px white; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; } img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; display: inline-block; vertical-align: middle;} .center-block { float: none; } .spacing-75 {padding-top:75px;} .spacing-50 {padding-top:50px;} .spacing-25 {padding-top:25px;} .alignright {float:right; padding-left:35px;} .alignleft {float:left; padding-right:35px;} /* Ηeadings */ h1, h2, h3, h4, h5, h6 { color: #5a5a5a; font-family: 'Trebuchet MS', sans-serif; font-weight: 700; line-height: 1.3; margin-bottom: 12px; margin-top: 12px; text-rendering: optimizelegibility; letter-spacing: -.05em; } h1 { font-size: 44px; } h2 { font-size: 34px; } h3 { font-size: 27px; } h4 { font-size: 23px; } h5 { font-size: 17px; } h6 { font-size: 14px; } /* End of Ηeadings */ p { font-family: inherit; font-size: 17px; line-height: 1.5; margin: 0 0 17px 0; font-weight: 300;} ul li, ol li { font-family: inherit; font-size: 17px; line-height: 1.5; font-weight: 300;} hr { border: solid #999; border-width: 1px 0 0; clear: both; height: 0; margin: 21px 0; } hr.small { border: solid #313740; border-width: 1px 0 0; clear: both; height: 0; margin: 0 auto; margin-top:21px; margin-bottom:21px; max-width:100px;} input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { border-radius: 0; } /* Bootstrap 5 columns */ .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px;} /* Border Effect below the Titles ----------------------- */ .titleborder{ margin:27px 0; width:80%;} .titleborder.fullwidth { width:100%;} .titleborder_left{ height:1px; } .titleborder_left {background:#D9D8DD;} .titleborder_sign { background: #768B1F; width:14%; height:4px; margin-top: -3px; right:43%;} .titleborder.pink .titleborder_sign { background: #FC6700;} .titleborder.centered { margin:0 auto; width:80%; margin-top:37px; margin-bottom:37px; text-align: center;} .titleborder.centered .titleborder_left{ height:1px; width:37%; margin-left:13%; margin-right:auto;} .titleborder.centered .titleborder_right{ height:1px; width:37%; margin-left: auto; margin-right: 13%;} .titleborder.centered .titleborder_left, .titleborder.centered .titleborder_right {background:#C9C9C9;} .titleborder.dark .titleborder_left, .titleborder.dark .titleborder_right {background:#313a4a;} .titleborder.centered .titleborder_sign { background: #FC6700; width:14%; height:4px; position: absolute; display: inline-block; margin-top: -3px; left:43%; right:43%;} /* ============ 2 = Header ============ */ /* Top Bar ---------------------- */ .topmenu { width: 100%; padding:5px 0; border:0; margin:0; background: #ccccca; } ul.top { list-style: none; margin:0; padding:5px 0;border:none;color: #666;} ul.top li { float:left; display:inline; margin-right:27px; padding-top:4px; font-size:11px;} ul.top li i { margin-right:5px;} ul.top li:last-child { margin-right:0; } ul.top li a {color: #666;} ul.top li a:hover, ul.top li a:focus {color: #666; text-decoration: none; outline:0;} ul.topright { list-style: none; margin:0; padding:5px 0;border:none;color: #666; float:right;} ul.topright li { float:left; display:inline; margin-right:27px; padding-top:4px; font-size:11px; } ul.topright li i { margin-right:5px;} ul.topright li:last-child { margin-right:0; } ul.topright li a {color: #666;} ul.topright li a:hover, ul.topright li a:focus {color: #FC6700; text-decoration: underline; outline:0;} /* Header ------------------------ */ .header{ width: 100%; padding:0; border:0; margin:0;background: #768B1F; box-shadow:0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;} .logo {padding-top:14px; max-width: 100%; height: auto} /* Navigation ---------------------- */ nav#desktop-menu { padding: 0; float:right; text-align: left; } .f-nav{ z-index: 999; position: fixed; left: 0; top: 0; width: 100%; } .fadeindown { -webkit-animation-duration: .45s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -webkit-animation-name: fadeInDown; -moz-animation-duration: .45s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -moz-animation-name: fadeInDown; animation-duration: .45s; animation-timing-function: ease; animation-fill-mode: both; animation-name: fadeInDown;} /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none;} .sf-menu li { position: relative;} .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99;} .sf-menu > li { float: left;} .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block;} .sf-menu a { display: block; position: relative;} .sf-menu ul ul { top: 0; left: 100%;} /*** SKIN ***/ .sf-menu { float: left; margin: 0;} .sf-menu ul { min-width: 12em; *width: 12em; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);} /* 1st level */ .sf-menu li { white-space: nowrap; *white-space: normal;} .sf-menu li a {color: #fff; font-weight: 500; padding:25px; font-size: 13px; letter-spacing: 0px; text-transform: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;} .sf-menu li:hover a, .sf-menu li.sfHover a, .sf-menu li.current a { color: #FC6700; background:#c9e082; } /* 2nd level */ .sf-menu ul li, .sf-menu li.current ul li{background:#fff!important; } .sf-menu ul li a {border-bottom: 0; background:#fff!important; font-size: 14px; padding: 16px 20px; color: #424242!important;} .sf-menu ul li:hover a, .sf-menu ul li.sfHover a { background: #E0E0E0!important; color: #6f6f6f; -webkit-transition: none; transition: none;} /* 3rd level */ .sf-menu ul li.sfHover li a {background:#fff!important; } .sf-menu ul li li:hover a, .sf-menu ul li li.sfHover a { background: #E0E0E0!important; color: #424242!important; -webkit-transition: none; transition: none;} /* styling for both css and generated arrows */ .sf-arrows .sf-with-ul { padding-right: 2.5em; *padding-right: 1em; } .sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #fff; } .sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #fff; } .sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #6f6f6f; } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #6f6f6f;} .slicknav_menu { display:none;} /*======modal login=========*/ #LoginModal .modal-content {border-radius:0; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);} #LoginModal .modal-header {border:0; background:#FC6700;} #LoginModal .modal-header h4.modal-title {text-align: center; color:#fff; font-size:15px; } #LoginModal .modal-header h4.modal-title i {font-size:90px; padding:15px 10px; display:table; margin:0 auto;} #LoginModal .modal-body {padding:15px 50px;} #LoginModal .modal-body button[type="submit"] {width:auto; font-size:12px; font-weight:500; font-family: 'Trebuchet MS', sans-serif; text-transform: none; margin:12px 0 8px; } /* ============ 3 = Home Page ============ */ /* Header Background ---------------------- */ #mainimage { position: relative; overflow: hidden; background: #768B1F url(images/calltoaction.jpg) no-repeat bottom center;} #mainimage .introcaption { opacity:0; } #mainimage h1 { font-family: 'Trebuchet MS', sans-serif; text-align: center; color:#FC6700; padding-top:70px; z-index:2; position: relative; font-weight:100; font-size: 3.28em; text-shadow: -1px 1px 0 #2d2d2f;} #mainimage h1 span#js-rotating {padding:25px 25px 0; color:#768B1F; display:table; margin:0 auto; text-align:center; } .pricingbox.headerimg {padding-bottom:0; margin-top:30px; background:transparent;} .pricingbox.headerimg .verticalbottom { margin-top:139px;} .pricingbox.headerimg .progressbars {padding: 0 20px 20px; color:#fff;} .pricingbox.headerimg .progressbars:first-child {padding-top:20px;} .pricingbox.headerimg .progressbars:last-child {border-bottom:1px solid rgba(0,0,0,.1);} .pricingbox.headerimg .progressbars p {margin:2px 0 0; font-weight:300; text-align: left; padding:0; font-size:12px; letter-spacing: .09em;} .pricingbox.headerimg .progress { margin:8px 0 0; padding:0; width:100%; height:8px; overflow:hidden; background:#fff; background: rgba(255,255,255,.4); border-radius:0; border:0;} .pricingbox.headerimg .meter { float:left; min-width:1%; height:100%; } .pricingbox.headerimg .progress.red .meter { background:#cc1a56;} .pricingbox.headerimg .progress.purple .meter { background:#7a1b8a;} .pricingbox.headerimg .progress.blue .meter { background:#2d3c8f;} /* Header Background Image Two ---------------------- */ #mainimage-two {background: #768B1F url(images/pricingbox-bg-dark.jpg);} #mainimage-two canvas {position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #mainimage-two [class*='col-'] { text-align:center;} .top-column-content {padding:90px 0 0;} #mainimage-two h2 {color:#fff; letter-spacing: -.03em; margin-bottom:50px; font-size:23px; font-weight:500;} #mainimage-two .subtitle {background:rgba(0,0,0,.15); padding:8px 15px; border-radius:6px; font-size:16px; letter-spacing: 0; display:table; margin:0 auto; font-weight:300; margin-top:18px;} #mainimage-two .part-one .pricing-price {background: rgba(147,169,61,.92);} #mainimage-two .part-two .pricing-price {background: rgba(117,139,31,.92);} #mainimage-two .part-three .pricing-price {background: rgba(117,139,31,.92);} .part-one { border-right:1px dotted rgba(255,255,255,.1);} .part-two { border-right:1px dotted rgba(255,255,255,.1);} .arrow_box { position: relative; background: transparent; border: 2px solid rgba(255,255,255,.25); border-left:0; border-right:0; border-bottom:0; max-width:65%; display:block; margin:0 auto;} .arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} .arrow_box:after { border-color: rgba(44, 51, 61, 0); border-bottom-color: rgba(44, 51, 61, 0); border-width: 15px; margin-left: -15px;} .part-one .arrow_box:before { border-color: rgba(255, 255, 255, 0); border-bottom-color:#FC6700; border-width: 18px; margin-left: -18px; margin-bottom:3px;} .part-two .arrow_box:before { border-color: rgba(255, 255, 255, 0); border-bottom-color:#FC6700; border-width: 18px; margin-left: -18px; margin-bottom:3px;} .part-three .arrow_box:before { border-color: rgba(255, 255, 255, 0); border-bottom-color:#FC6700; border-width: 18px; margin-left: -18px; margin-bottom:3px;} #mainimage-two .progressbars {padding: 0 20px 20px; color:#fff;} #mainimage-two .progressbars:first-child {padding-top:20px;} #mainimage-two .progressbars:last-child {border-bottom:0;} #mainimage-two .progressbars p {margin:2px 0 0; font-weight:300; text-align: left; padding:0; font-size:16px; letter-spacing: .09em;} #mainimage-two .progress { margin:8px 0 0; padding:0; width:100%; height:5px; overflow:hidden; background:#fff; background: rgba(255,255,255,.7); border-radius:6px; border:0;} #mainimage-two .meter { float:left; min-width:1%; height:100%; } #mainimage-two .progress.red .meter { background:#FC6700;} #mainimage-two .progress.purple .meter { background:#FC6700;} #mainimage-two .progress.blue .meter { background:#FC6700;} #mainimage-two .mtr-btn {margin-top:15px;} /* Header Slider ---------------------- */ #mainslider { position: relative; overflow: hidden;} .flex-caption {left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);} .flex-caption h2 {font-family: 'Trebuchet MS', sans-serif; text-align:center; color: #E1E3E4; font-size: 2.5em; text-shadow: -1px 1px 0 #304500; font-weight:100; } .flex-caption h2 span {padding: 20px 20px; color:#FC6700; background-color: #c9e082; text-shadow: 1px 2px 0 #fff; } .flex-caption h4 {font-family: 'Trebuchet MS', sans-serif;text-align:center; color: #768B1F; font-size: 1.5em; font-weight: 300; margin-top: 55px; text-shadow: -1px 1px 0 #2d2d2f;} .flex-caption .mtr-btn {margin-top:45px; margin-bottom:25px; font-size: 15px;} .flex-caption a.mtr-btn:hover, .flex-caption a.mtr-btn:focus {color:#fff;} /* Header Video Background ---------------------- */ #home-intro .home-intro-container { height:70vh; position: relative; overflow: hidden;} #home-intro .home-intro-container:after { bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } #home-intro .home-intro-container .introcaption { opacity:0; left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } #home-intro .home-intro-container .introcaption h2 { font-family: 'Trebuchet MS', sans-serif; color: #E1E3E4; font-size: 2.19em; text-shadow: -1px 1px 0 #2d2d2f; font-weight:100; } #home-intro .home-intro-container .introcaption h2 span#js-rotating {padding:14px 0 0; font-size: 1.59em; color:#FC6700; text-shadow: -1px 1px 0 #304500; display:block; } #home-intro .home-intro-container .introcaption h1 { font-family: 'Trebuchet MS', sans-serif; color: #fff; font-size: 2.4em; font-weight: 200; margin-top: 55px; text-shadow: -1px 1px 0 #304500; } #home-intro .home-intro-container .introcaption h4 { font-family: 'Trebuchet MS', sans-serif; color: #fff; font-size: 2.1em; font-weight: 300; margin-top: 55px; text-shadow: -1px 1px 0 #304500; } #home-intro video { width:100%; min-height:100%; background-size: cover; position: absolute; top: 0; left: 0; object-fit: cover; } .morphext > .animated { display: inline-block;} /* Features Multicolor ---------------------- */ .introcolumns { text-align: center;background:#F0F0F0; padding:67px 0 55px;} .introcolumns [class*='col-'] {padding:0 45px;} .introcolumns h4 {color:#424242; font-weight:300; margin:20px 0;} .introcolumns p {font-size: 17px;} .introcolumns .circle {width:100px; height:100px; border-radius: 50%; background:#c9e082; position:relative; margin:0 auto; box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);} .introcolumns .circle.red {background:#FC6700;} .introcolumns .circle.purple {background:#768B1F;} .introcolumns .circle.orange {background: #FE6A2B;} .introcolumns .circle i {position:absolute; font-size:48px; color:#fff; top:50%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);} /* Features ---------------------- */ .features {background:#ffffff; padding:55px 0; overflow:hidden;} .features h3 {color:#424242; letter-spacing: -.03em; margin-bottom:70px; padding: 0 20px;} .features .circle {width:100px; height:100px; border-radius: 50%; background:#c9e082; position:relative; margin:0 auto; box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);} .features .circle i {position:absolute; font-size:48px; color:#fff; top:50%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);} .features h4 {color:#424242; font-weight:300; margin:20px 0;} .features p {padding:0 40px;} /* Call To Action ------------------------ */ .calltoaction {padding:55px 0 360px; background:#fff url(images/calltoaction.jpg) no-repeat bottom center; background-size:cover; overflow:hidden;} .calltoaction h2 {font-weight:300; font-size:31px; display:table; border-bottom:1px solid #e4e4e4; padding:15px; margin:0 auto; margin-bottom:25px; letter-spacing: -.05em;} .calltoaction h2 span {color:#FC6700; display: block; margin-top:15px; margin-bottom:15px; } .calltoaction .mtr-btn {margin-top:15px;} /* Pricing Boxes ------------------------ */ .pricingbox {padding:55px 0; margin:0; background: #768B1F url(images/pricingbox-bg-dark.jpg) no-repeat bottom center; overflow:hidden; } .pricingbox.no-image-bg {background: #768B1F url(images/popular_plans_bg.jpg);} .pricingbox h3 {color:#fff; letter-spacing: -.03em; margin-bottom:30px; text-align: center; font-size:29px;} .pricingbox h3.poptitle {color:#fff; letter-spacing: -.03em; margin-bottom:20px; text-align: center; font-size:29px; font-weight:900; position: relative; padding-bottom:25px;} .pricingbox h3.poptitle::after {background-color: #c9e082; bottom: 0; content: ""; height: 2px; left: 50%; margin-left: -30px; position: absolute; width: 60px;} .pricingbox p {color:#fff; margin-bottom:70px; text-align: center; padding:0 95px; font-size:18px;} .pricingbox .row {margin-bottom:0; } .pricing-plan { position: relative; top: 0; opacity: 1; float: left; padding: 30px 0px; width: 100%; border-radius: 0; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5; background: #FF2770;} .pricing-plan:before { content: ""; width: 100%; height: 30px; border-radius: 0; position: absolute; top: -10px; left: 0; transform: scale(.95); -webkit-transform: scale(.95); -ms-transform: scale(.95); z-index: -1; background: rgba(255,39,112,.5);} .pricing-title { width: 100%; float: left; line-height: 36px; font-size: 23px; font-weight: 400; letter-spacing: -.03em; color: #fff; position: relative; padding-left:30px; margin-bottom:27px; font-family: 'Montserrat', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; } .pricing-title:before { content: ""; width: 5px; height: 100%; position: absolute; top: 0; left: 0; background: #fff;} .pricing-price { clear:both; width: 100%; font-size: 47px; font-weight: 100; letter-spacing: -.03em; color: #fff; padding:30px 30px 25px; background: rgba(0,0,0,.15); text-align: center; } .pricing-price span {font-size: 17px; font-weight: 300; letter-spacing: 0; color: #fff; } .pricing-price .starting {color:#ccc; margin-bottom:0; text-align: center; padding:0; font-size:11px; letter-spacing: .12em;} .pricing-features { padding:15px 0;} .pricing-features ul { padding:0; margin:0; list-style:none;} .pricing-features ul li { color:#fff; padding:10px 20px; border-bottom:1px solid rgba(0,0,0,.2); text-align: center;} .pricing-plan.red { background: #FC6700;} .pricing-plan.black { background: rgb(69.8%,78%,35.7%) ; color: #000!important;} .pricing-plan.red:before { background: rgba(255,39,112,.5);} .pricing-plan.blue { background: #FC6700;} .pricing-plan.blue:before { background: rgba(63,81,181,.5);} .pricing-plan.purple { background: #abc264;} .pricing-plan.purple:before { background: rgba(229,236,171);} .pricing-plan button {display:table; margin:0 auto;} .pricing-plan button.mdl-button.mdl-button--raised {background:#fff;} .pricing-plan button i {font-size:14px;} /* Domain Names Search Box ------------------------ */ .domainsearch{ width: 100%; background: #768B1F; padding:55px 0 40px;border-top:1px solid #252d38; position:relative; } .domainsearch h3 {color:#fff; letter-spacing: -.03em; margin-bottom:30px; text-align: center;} .domainsearch button{ position:absolute; top:100%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); margin-top:40px; z-index:9; font-size:16px; line-height:29px; font-weight:300;} .domainform {padding:55px 0;background: #c9e082; display:none; } .domainform .material .material-input :focus ~ label, .domainform .material .material-input .filled ~ label {font-weight:300;} .domainform .material .material-input label {margin-top:7px;} .domainform .material .material-input input { font-size: 16px; height:41px; width: 100%; border:0; border-bottom: 1px solid lightgray; outline: none; background: 0; float:left;} .domainform .material .material-select { font-size: 14px;} .domainform .material .material-select ul {padding:0; margin:0; list-style:none;} .domainform button {width: 100%; -webkit-border-radius:0; -moz-border-radius:0; margin-top:22px; font-weight: 700; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border:0; background:#FC6700; color:#fff;} .domainform button i {font-size:16px;} /* Home Page Features */ .various {padding:60px 0; background: #E5ECAB; overflow:hidden;} .various h2 {font-weight:700; font-size:29px; display:inline-block; padding:15px 0 0; margin-bottom:0; } .various h5 {font-weight:700; font-size:20px; padding:15px 0 6px; color:#FC6700;} .various p {font-size:17px; } .various .why {padding-right:25px; } .various a.mtr-btn {margin-top:15px; } .various i {font-size:49px; color:#C3C3C3; margin-top:29px; float:right;} /* Home Page Tabs */ .features-tabs {padding:90px 0 75px; background:#E5ECAB; overflow:hidden;} .features-tabs .tab-content {margin-top:55px; padding:40px 40px 55px; font-size:16px; background:#fff; border: 1px solid #ccc; border-radius:5px; box-shadow:inset 0 -4px 0 0 #f6f6f6, inset 0 -5px 0 0 #ddd, inset 0 -10px 0 0 #f6f6f6, inset 0 -11px 0 0 #ddd,0 2px 8px -2px rgba(0, 0, 0, 0.1);} .features-tabs .tab-content h4 {font-weight:700; font-size:29px; color:#FC6700; display: block; margin:0 0 30px; padding-bottom:30px; letter-spacing: -0.05em; text-align:center; position:relative;} .features-tabs .tab-content h4::after {background-color: #999; bottom: 0; content: ""; height: 2px; left: 50%; margin-left: -30px; position: absolute; width: 60px;} .features-tabs .tab-content p.subtitle {padding:0 150px; text-align:center;} .features-tabs .tabs-top-horizontal > .nav-tabs { display:table; margin:0 auto; } .features-tabs .tab-content > .tab-pane,.pill-content > .pill-pane { display: none;} .features-tabs .tab-content > .active,.pill-content > .active { display: block;} .features-tabs .tabs-top-horizontal > .nav-tabs > li { float: left; text-align: center; min-width:175px; margin-bottom: 0; border-right:1px solid #E1DFE0; background: #fff;} .features-tabs .tabs-top-horizontal > .nav-tabs > li i {display:block; text-align:center; margin-bottom:8px; font-size:30px;} .features-tabs .tabs-top-horizontal > .nav-tabs > li i.green {color:#B5BD8E;} .features-tabs .tabs-top-horizontal > .nav-tabs > li i.red {color:#DA3867;} .features-tabs .tabs-top-horizontal > .nav-tabs > li i.lightblue {color:#8ACDDD;} .features-tabs .tabs-top-horizontal > .nav-tabs > li i.orange {color:#FC6700;} .features-tabs .tabs-top-horizontal > .nav-tabs > li i.darkgray {color:#6A6665;} .features-tabs .tabs-top-horizontal > .nav-tabs > li i.royalblue {color:#405499;} .features-tabs .tabs-top-horizontal > .nav-tabs > li > a { margin-right: 0;color:#424242;padding:25px 10px;-webkit-border-radius:0;-moz-border-radius:0; border-radius:0; border:0; text-transform: uppercase;font-size:14px;font-weight:400;} .features-tabs .tabs-top-horizontal > .nav-tabs > li > a:hover,.features-tabs .tabs-top-horizontal > .nav-tabs > li > a:focus { border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;background:#fff;} .features-tabs .tabs-top-horizontal > .nav-tabs .active > a,.features-tabs .tabs-top-horizontal > .nav-tabs .active > a:hover,.features-tabs .tabs-top-horizontal > .nav-tabs .active > a:focus { border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; background:#fff; position: relative;} .features-tabs .tabs-top-horizontal > .nav-tabs .active > a:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(238, 238, 238, 0); border-top-color: #fff; border-width: 15px; margin-left: -15px;} .features-tabs .tab-content ul {list-style:none; margin:0; padding:0;} .features-tabs .tab-content ul li { padding:5px 20px 5px 0; border-bottom:1px solid #ccc;} .features-tabs .tab-content ul li:last-child {border-bottom:0;} .features-tabs .tab-content ul li i {margin-right:10px; color:#f67081;} /* fully managed tab */ .fully-managed {text-align:center; padding-top:40px;} .fully-managed .block-grid-item {text-align: center; padding:50px 35px; border:1px solid #e9e6e8; border-left:0; border-top:0; } .fully-managed .block-grid-item:nth-child(3n+3) { border-right:0;} .fully-managed .block-grid-item:nth-last-child(-n+3) {border-bottom:0;} .fully-managed .block-grid-item h5 {font-weight:400; font-size:19px;padding-top:18px; } /* security tab */ .security {padding-top:25px;} .security .block-grid-item {text-align: left; padding:10px 35px;} .security .security-tab-icon {float:left; width:17%; position:relative;} .security .security-tab-icon i {margin-top:25px; font-size:42px; color:#AEAEAE; text-align:center;} .security .security-tab-feature {float:right; width:78%;} .security .block-grid-item h5 {font-weight:400; font-size:18px;padding-top:12px; color:#6A6665; } /* backups tab */ .backups-restore .backupcolumn { border:1px solid #ccc; border-left:0; border-bottom:4px solid #FC6700; padding:25px!important; min-height:370px; background:#f6f4f5;} .backups-restore .backupcolumn:first-child { border-left:1px solid #ccc; } .backups-restore h5 {font-weight:300; font-size:20px;} .backups-restore h5.blue {color:#40549B;} .backups-restore h5.purple {color:#abc264;} .backups-restore h5.orange {color: #FE6A2B;} .backups-restore h5.lightblue {color:#768B1F;} /* Testimonials ------------------------ */ .testimonials {background: url(images/s8.png); padding:55px 0; overflow:hidden; } .testimonials h3 {color:#fff; letter-spacing: -.03em; margin-bottom:50px; text-align: center; font-size:29px; font-weight:900;} .testimonials .hr-awesome { position: relative; margin:0 auto; max-width:50%; margin-bottom:50px; border: solid rgba(255,255,255,.075); border-width: 1px 0 0;} .testimonials .hr-awesome::after { color: #fff; font-family:'FontAwesome'; content: "\f08a"; font-size: 19px; position: absolute; right: calc(50% - 15px); top: calc(50% - 22px); width: 40px; height:40px; border-radius:50%; background:#c9e082; padding:7px 0 0 11px; box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);} .testimonial-content { background:#fff; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); position:relative; } #testimonials-carousel .item {margin:12px; } #testimonials-carousel .item p { border-radius:0;color: #757575; font-size: 16px; line-height: 1.5; padding: 24px 16px; text-align: left; margin-bottom:0; } .testimonial-content h5 {font-size:14px; color: #757575; text-transform: uppercase; font-weight:500; padding:16px; margin:0; border-top:1px solid rgba(0,0,0,.1);} .testimonial-content h5 a {color:#FC6700; } .testimonials .owl-theme .owl-controls {margin-top:30px;} .testimonials .owl-theme .owl-controls .owl-page span {width: 40px; height: 7px; background: #fff; cursor: pointer; border-radius: 10px; border: 0; margin: 5px 7px; opacity: 1; box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.24),0 1px 1px 0 rgba(0,0,0,.48);} .testimonials .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { opacity: 1; background: #ff8f28;} /* New Plans */ .newplans {padding:55px 0 75px; background: #E5ECAB; overflow:hidden;} .newplans h3 {letter-spacing: -.03em; margin-bottom:45px; text-align: center; font-size:29px; font-weight:700;} .newplans_box { position: relative; background: #c9e082; border: 0; border-bottom: 4px solid #E5E5E5; max-width:540px; margin:0 auto; margin-top:25px; margin-bottom:55px;} .newplans_box:after, .newplans_box:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} .newplans_box:after { border-color: rgba(255, 255, 255, 0); border-top-color: #c9e082; border-width: 15px; margin-left: -15px;} .newplans_box:before { border-color: rgba(229, 229, 229, 0); border-top-color: #E5E5E5; border-width: 21px; margin-left: -21px;} .newplanscolumn { position: relative; top: 0; opacity: 1; float: left; padding: 25px; width: 100%; border-radius: 0; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5; background: #E5E5E5; min-height:370px;} .newplanscolumn:before { content: ""; width: 100%; height: 30px; border-radius: 0; position: absolute; top: -10px; left: 0; transform: scale(.95); -webkit-transform: scale(.95); -ms-transform: scale(.95); z-index: -1; background: rgba(229,229,229,.5);} .newplanscolumn h5 {color:#5A5A5A; font-size:19px; font-weight:900; border-bottom:1px solid #dfdbdb; padding-bottom:12px; letter-spacing: -.03em; margin-bottom:25px; text-transform: uppercase;} .newplanscolumn.white {background:#fff;} .newplanscolumn.white:before {background:rgba(255,255,255,.5);} .newplans p {font-size:17px;} .newplans ul {list-style:none; margin:0; padding:0;} .newplans ul li { padding:5px 0;} .newplans ul li:last-child {border-bottom:0;} .newplans ul li i {margin-right:10px; color:#FC6700;} .progressbars p {margin-bottom:3px; font-weight:300;font-size:16px;} .thebar { position:relative; margin-bottom:25px;} p.percent { position:absolute; top:10px; right:0; margin:0; font-size:15px; padding:0; } .progress { margin:8px 0 0; padding:0; width:100%; height:5px; overflow:hidden; background:#fff; border-radius:6px; border:0; box-shadow: none;} .progress .meter { float:left; min-width:1%; height:100%; background:#FC6700;} .progress.alt-1 .meter { background:#009DD7;} .progress.alt-2 .meter { background:#FC6700;} .progress.alt-3 .meter { background:#0DB900;} /* Logos Carousel */ .partners {background: #f0f0f0; padding:35px 0; border-top:1px solid #e4e4e4;} #company-partners .item {margin: 3px; text-align: center;} /* Subheaders */ #subheader {padding:150px 25px; position: relative; background-size:cover;} .subheader-text {position: absolute; text-align: center; z-index: 2; left:1%; right:1%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} #subheader h1 { text-align: center; color:#768B1F; font-weight:700; font-size: 31px; text-shadow: -1px 1px 0 #fff; letter-spacing:-0.05em; text-transform: uppercase;} #subheader h2 { text-align: center; color:#768B1F; font-weight:400; font-size: 17px; margin-top:25px;} /* ======================== 4 = Shared Hosting Page ======================== */ #subheader.shared {background: #E5ECAB; padding:100px 25px;} #subheader.shared h1 {color:#768B1F; text-shadow:none; } #subheader.shared h2 {color:#768B1F;} /* Choose Price Period */ span.chooseprice { background: #6c8115; border-radius: 0; color: #fff; display: table; font-size: 16px; margin: 0 auto; padding: 5px 20px 8px; position: relative; } span.chooseprice:after { border: solid transparent; border-color: rgba(222, 98, 98, 0); border-top-color: #6c8115; border-width: 10px; content: " "; height: 0; left: 50%; margin-left: -10px; pointer-events: none; position: absolute; top: 100%; width: 0; } .price-per-period { display: table; margin: 0 auto; margin-top: 30px; text-align: center;} .price-per-period .btn { font-size: 15px; padding: 10px 15px 8px; border:0; border-radius: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.24);} .btn-shared-checked { background: #673AB7; border:0; box-shadow: none; color:#fff; border-radius: 0; } .btn-shared-checked:hover, .btn-shared-checked:focus, .btn-shared-checked.focus, .btn-shared-checked:active, .btn-shared-checked.active { border:none; box-shadow: none; color:#fff; border-radius: 0; outline: 0; } /* End of Choose Price Period */ .yearprice, .twoyearprice { display: none; } .pricingbox.shared {padding:55px 0 90px;} /* Responsive Table - Shared Hosting */ .shared-table {background: #E5ECAB; padding:45px 0 70px; z-index:0; position: relative;} .shared-table button.mtr-btn { position:absolute; top:0%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); z-index:99999999; font-size:16px; line-height:29px; font-weight:300;} .shared-table p {font-weight:300;} .products-table { min-width:100%; border:1px solid #eae8e8; font-family: 'Trebuchet MS', sans-serif!important; background:#fcfcfc; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); display:none; margin-bottom:45px;} .products-table thead th {background:#FC6700; color:#000!important; font-weight:400; font-size:16px; border:0!important; font-family: 'Trebuchet MS', sans-serif!important;height:45px; } .products-table th {font-weight: normal; -webkit-font-smoothing: antialiased; padding:16px 12px; color: #424242; font-size: 14px; background: #fff; } .products-table td {color: #424242; padding:16px 12px; font-size: 16px; border-bottom:1px solid #eae8e8;} .products-table td, .products-table thead th {text-align: center;} .products-table td:first-child, .products-table thead th:first-child {text-align: left;} .products-table tr.even, .products-table tr.alt, .products-table tr:nth-of-type(even) { background: #fff!important; } .products-table td i.fa-times {color:#FC6700;} .products-table td i.fa-check {color:#768B1F;} .products-table tr.price-comparison td {font-weight:300; font-size:19px;} .products-table tr.price-comparison td:first-child {font-weight:400; font-size:16px;} /* End of Responsive Table */ .shared-table .difference h3 {letter-spacing: -.03em; margin-bottom:45px; text-align: center; font-size:29px;} .shared-table .block-grid-item {text-align: center; padding:50px 20px; border:1px solid #eae8e8; border-left:0; border-top:0; } .shared-table .block-grid-item:nth-child(3n+3) { border-right:0;} .shared-table .block-grid-item:nth-last-child(-n+3) {border-bottom:0;} .shared-table .block-grid-item h5 {font-weight:700; font-size:19px;padding-top:12px; } /* Video Background */ #shared-video .shared-video-container { min-height: 600px; padding-bottom: 50px; position: relative; overflow:hidden;} #shared-video .shared-video-container:after {bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } #shared-video .shared-video-container .videocaption { left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } #shared-video .shared-video-container .videocaption .videocaption-content {display:inline-block; padding:25px; background:#FC6700; background:rgb(98.8%,40.4%,0%); text-align: left; max-width:420px; } #shared-video .shared-video-container .videocaption .videocaption-content h2 { color: #fff; font-size: 3.2em; font-weight:100; } #shared-video .shared-video-container .videocaption .videocaption-content hr { opacity:0.1; } #shared-video .shared-video-container .videocaption .videocaption-content p { color: #fff; font-size: 15px; font-weight: 300; margin-top: 25px; } #shared-video video { width:100%; background-size: cover; position: absolute; top: 0; left: 0;} /* Apps */ .apps {padding:55px 0 80px; overflow:hidden;} .apps-grid {text-align:center; padding-top:40px;} .apps-grid .block-grid-item {text-align: left; padding:15px 25px; border:2px solid #fff; border-left:0; border-top:0; background:#F0F0F0; } .apps-grid .block-grid-item:nth-child(3n+3) { border-right:0;} .apps-grid .block-grid-item:nth-last-child(-n+3) {border-bottom:0;} .apps-grid .block-grid-item h5 {font-weight:700; font-size:24px;padding-top:5px; } .apps-grid .block-grid-item .odometer {color:#d1cfcf; font-size:82px; font-weight:900; font-family: 'Trebuchet MS', sans-serif; margin-top:10px; letter-spacing: -.05em; line-height:1; } .apps-grid .block-grid-item .graphicline span {display:block; width:100%; margin: 0px 0 16px; } .apps-grid .block-grid-item .graphicline {margin-bottom: 15px; } .apps-grid .block-grid-item p {margin-top:0; padding-top:0; } /* ======================== 5 = VPS Page ======================== */ /* Order Slider - VPS Page */ .pricingbox.vps {padding-bottom:0;} .pricingbox.vps-comparison {padding:55px 0 90px; background: url(images/popular_plans_bg.jpg); background-size:cover;} .pricingbox.vps h1 {font-size:29px; display:table; border-bottom:0; padding:0 15px; margin:0 auto;color:#fff; font-weight:700; margin-bottom:0;} .pricingbox.vps .centralized { position: relative; top: 0; opacity: 1; float: left; padding:15px 0 0; width: 100%; border-radius: 0; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5; text-align:center; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); background: #FC6700; margin-top:30px;} .pricingbox.vps .centralized:before { content: ""; width: 100%; height: 30px; border-radius: 0; position: absolute; top: -10px; left: 0; transform: scale(.95); -webkit-transform: scale(.95); -ms-transform: scale(.95); z-index: -1; background: rgba(255,64,129,.5);} .pricingbox.vps .centralized span.how_much {background:rgba(0,0,0,.17); width:100%; display: block; padding:15px; position:relative; font-weight:100; font-size:22px;} .pricingbox.vps .centralized span.how_much:after { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(196, 71, 71, 0); border-bottom-color: rgba(0,0,0,.17); border-width: 10px; margin-left: -10px;} .pricingbox.vps h6 {font-size:15px;letter-spacing:.04em; color:#fff;font-weight:500; padding-bottom:12px;} .pricingbox.vps .how_much {font-size:19px;color:#fff; font-weight:900; text-transform: uppercase; letter-spacing: -.03em; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { cursor: default; height: 1.2em; position: absolute; width: 1.2em; z-index: 2; } .ui-slider .ui-slider-range { background-position:0 0; border: 0; display: block; font-size: .7em; position: absolute; z-index: 1; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { margin-left: -.6em; top: -.3em; } .ui-slider-horizontal .ui-slider-range { height: 100%; top: 0; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { height: 100px; width: .8em; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-bottom: -.6em; margin-left: 0; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .vps-prices-drag { float: left; margin: 0; padding: 55px 30px; width: 100%; background: rgba(0,0,0,.11); border-radius: 0;} .vps-prices-container {float: left; width: 100%; margin-top:30px;} .vps-prices-panel { float: left; width: 100%; } .vps-prices-container #vps-slider { background: #bbbbbb; border-radius: 0; float: left; height:6px; margin: 0 0 15px; width: 100%; padding:0; box-shadow: 0 13px 16px rgba(0,0,0,0.16), 0 13px 16px rgba(0,0,0,0.23); cursor:pointer;} .vps-prices-container #sliderlines { background: url(images/lines1.png) center top; display: table; height: 10px; margin: 0 auto; width: 100%; opacity:.2; } .vps-prices-container #vps-slider .ui-slider-range { background: #FC6700; border-radius: 0; } .vps-prices-container #vps-slider .ui-slider-handle { background: url(images/slider_range.png) no-repeat left top; border: 0; border-radius: 0; height: 25px; margin-left: -15px; margin-top:-6px; outline: none; width: 25px; } #vps_name_option h3 span {font-size:20px; display:table; border-bottom:0; padding:11px 29px; margin:0 auto; margin-top:0; margin-bottom:-30px; letter-spacing:.04em; color:#fff; background:#FC6700; font-weight:300; position: relative; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} #vps_name_option h3 span:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 64, 129, 0); border-top-color: #FC6700; border-width: 10px; margin-left: -10px;} .total_amount h3 {text-align: center; margin-top:40px; } .total_amount h3 span {font-size:45px; color:#fff; font-weight:400; letter-spacing: -0.09em; } .total_amount h3 span#period {font-size:22px; } /* End Order Slider - VPS Page */ /* VPS Page Vertical Tabs */ .vps-features-tabs {padding:55px 0 80px; background:#E5ECAB; overflow:hidden;} .vps-features-tabs h2 {font-size:29px; text-align:center; padding:0; margin-bottom:35px; letter-spacing: -0.05em; } .vps-features-tabs .tab-content {padding:50px 75px; float:right; width:85%; background:#fff; -webkit-border-radius: 6px;-webkit-border-top-left-radius: 0;-moz-border-radius: 6px;-moz-border-radius-topleft: 0;border-radius: 6px;border-top-left-radius: 0;} .vps-features-tabs .tab-content h4 {font-weight:700; font-size:24px; color:#FC6700; display: block; margin:0 0 20px; letter-spacing: -0.05em;} .vps-features-tabs .tab-content hr.small {margin:21px 0; border-color:#d8d6d6;} .vps-features-tabs .tab-content p.subtitle {font-size:19px; font-weight:400;} .vps-features-tabs .tab-content p {font-size:17px;} .vps-features-tabs .tabs-left-vertical {margin-top:55px;} .vps-features-tabs .tabs-left-vertical > .nav-tabs { float:left; width:15%; border:0; box-shadow:none;} .vps-features-tabs .tab-content > .tab-pane,.pill-content > .pill-pane { display: none;} .vps-features-tabs .tab-content > .active,.pill-content > .active { display: block;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li { text-align: center; display:block; width:100%; margin-bottom: 1px; } .vps-features-tabs .tabs-left-vertical > .nav-tabs > li i {margin-right:8px;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li i.green {color:#B5BD8E;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li i.red {color:#DA3867;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li i.lightblue {color:#8ACDDD;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li i.orange {color:#FC6700;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li i.darkgray {color:#6A6665;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li i.royalblue {color:#405499;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li > a { margin-right: 0;color:#424242;padding:20px 10px;-webkit-border-radius:0;-moz-border-radius:0; border-radius:0; border:0; text-transform: uppercase;font-size:16px;font-weight:400;} .vps-features-tabs .tabs-left-vertical > .nav-tabs > li > a:hover,.vps-features-tabs .tabs-left-vertical > .nav-tabs > li > a:focus { border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;background:#fff; -webkit-border-top-left-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-bottomleft: 6px;border-top-left-radius: 6px;border-bottom-left-radius: 6px;} .vps-features-tabs .tabs-left-vertical > .nav-tabs .active > a,.vps-features-tabs .tabs-left-vertical > .nav-tabs .active > a:hover,.vps-features-tabs .tabs-left-vertical > .nav-tabs .active > a:focus { border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; background:#fff; position: relative; -webkit-border-top-left-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-topleft: 6px;-moz-border-radius-bottomleft: 6px;border-top-left-radius: 6px;border-bottom-left-radius: 6px;} .vps-features-tabs .tabs-left-vertical > .nav-tabs .active > a:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-left-color: #ffffff; border-width: 15px; margin-top: -15px; } .tabcircle {width:170px; height:170px; border-radius: 50%; background:#fff; border:8px solid #e1dfe0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); float:right; margin:0 0 30px 30px; position:relative; overflow:hidden;} .tabcircle i {left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size:87px; text-shadow: 1px 1px rgb(230, 230, 230), 2px 2px rgb(230, 230, 230), 3px 3px rgb(230, 230, 230), 4px 4px rgb(230, 230, 230), 5px 5px rgb(230, 230, 230), 6px 6px rgb(230, 230, 230), 7px 7px rgb(230, 230, 230), 8px 8px rgb(230, 230, 230), 9px 9px rgb(230, 230, 230), 10px 10px rgb(230, 230, 230), 11px 11px rgb(230, 230, 230), 12px 12px rgb(230, 230, 230), 13px 13px rgb(230, 230, 230), 14px 14px rgb(230, 230, 230), 15px 15px rgb(230, 230, 230), 16px 16px rgb(231, 231, 231), 17px 17px rgb(231, 231, 231), 18px 18px rgb(232, 232, 232), 19px 19px rgb(232, 232, 232), 20px 20px rgb(233, 233, 233), 21px 21px rgb(234, 234, 234), 22px 22px rgb(234, 234, 234), 23px 23px rgb(235, 235, 235), 24px 24px rgb(235, 235, 235), 25px 25px rgb(236, 236, 236), 26px 26px rgb(236, 236, 236), 27px 27px rgb(237, 237, 237), 28px 28px rgb(238, 238, 238), 29px 29px rgb(238, 238, 238), 30px 30px rgb(239, 239, 239), 31px 31px rgb(239, 239, 239), 32px 32px rgb(240, 240, 240), 33px 33px rgb(241, 241, 241), 34px 34px rgb(241, 241, 241), 35px 35px rgb(242, 242, 242), 36px 36px rgb(242, 242, 242), 37px 37px rgb(243, 243, 243), 38px 38px rgb(243, 243, 243), 39px 39px rgb(244, 244, 244), 40px 40px rgb(245, 245, 245), 41px 41px rgb(245, 245, 245), 42px 42px rgb(246, 246, 246), 43px 43px rgb(246, 246, 246), 44px 44px rgb(247, 247, 247), 45px 45px rgb(248, 248, 248), 46px 46px rgb(248, 248, 248), 47px 47px rgb(249, 249, 249), 48px 48px rgb(249, 249, 249), 49px 49px rgb(250, 250, 250), 50px 50px rgb(250, 250, 250), 51px 51px rgb(251, 251, 251), 52px 52px rgb(252, 252, 252), 53px 53px rgb(252, 252, 252), 54px 54px rgb(253, 253, 253), 55px 55px rgb(253, 253, 253), 56px 56px rgb(254, 254, 254), 57px 57px rgb(255, 255, 255); } .tabcircle i.royalblue {color:#405499; } .tabcircle i.green {color:#B5BD8E; } .tabcircle i.red {color:#DA3867; } .tabcircle i.lightblue {color:#8ACDDD; } .tabcircle i.orange {color:#E38F75; } /* VPS Text */ .vps-text {padding:55px 0; overflow:hidden;} .vps-text h2 {font-weight:700; font-size:26px; padding:0; margin-bottom:0; letter-spacing: -0.07em; } .vps-text p {font-size:16px; padding-right: 35px;} /* VPS Page Accordion */ .vps-accordion {padding:55px 0; overflow:hidden; background:#E5ECAB;} .vps-accordion h3 {font-weight:700; font-size:26px; padding:0; margin-bottom:30px; letter-spacing: -0.07em; } .vps-accordion p.maintext {font-size:16px; padding-right: 35px;} .vps-accordion .panel {box-shadow: none !important; background:transparent;} .vps-accordion .panel, .vps-accordion .panel-group .panel-heading+.panel-collapse>.panel-body{ border: none; box-shadow: 0;} .vps-accordion .panel-body {border-top: 0 !important;} .vps-accordion .panel-heading {border:0; border-bottom:1px solid #d8d6d6; background:transparent; border-radius:0; padding:12px 0; } .vps-accordion .panel-heading h4.panel-title a {font-size:16px; font-weight:400; line-height: 1.3; color:#212121;} .vps-accordion .panel-heading h4.panel-title a:hover {color:#DA3867;} .vps-accordion .panel-heading h4.panel-title i {margin:2px 7px 0 0; vertical-align:middle; font-size:19px; color:#DA3867;} .vps-accordion .panel-body {padding:15px 0; margin:0;} .vps-accordion .panel-body p {text-align: left; font-size:16px; padding:0; margin:0;} /* Responsive Table - VPS */ .vps-table {background: url(images/vps-table-bg.png) no-repeat; background-size:cover; padding:70px 0; z-index:0; position: relative;} .vps-products-table { min-width:100%; border:0; font-family: 'Trebuchet MS', sans-serif!important;margin-bottom:45px; } .vps-products-table thead {border:0;background:transparent;} .vps-products-table thead th {background:#FC6700; color:#fff!important; font-weight:900; font-size:18px!important; border:0!important; font-family: 'Trebuchet MS', sans-serif!important; text-shadow: none; padding-top:10px!important; padding-bottom:10px!important; text-align: center;} .vps-products-table thead th span {display:block; width:100%; margin-top:6px;} .vps-products-table thead th:first-child, .vps-products-table thead tr {background:transparent;} .vps-products-table th {font-weight: normal; -webkit-font-smoothing: antialiased; padding:16px 12px; color: #424242; font-size: 14px; background: #fff; } .vps-products-table td {color: #424242; padding:16px 12px; font-size: 14px; border-right:1px solid #eae8e8; text-align: center;} .vps-products-table td:first-child {text-align: left;} .vps-products-table td:last-child {border-right:0;} .vps-products-table tr { background: #fff; } .vps-products-table td i.fa-times {color:#FC6700;} .vps-products-table td i.fa-check {color:#768B1F;} .vps-products-table tr.price-comparison {background:transparent;} .vps-products-table tr.price-comparison td {font-weight:300; font-size:23px; letter-spacing: -.06em; background:#ee2f70; border:0; color:#fff;} .vps-products-table tr.price-comparison td:first-child { background:transparent; border-top:0; } /* End of Responsive Table */ /* ======================== 6 = Dedicated Servers ======================== */ #subheader.dedicated-servers {background:url(images/deticated-servers-bg.png); padding:100px 25px;} #subheader.dedicated-servers h1 {color:#424242; text-shadow:none; } #subheader.dedicated-servers h2 {color:#424242;} .pricingbox.servers {padding:55px 0 90px;} /* Dedicated Servers Table */ .moreservers{ width: 100%; background: #212832; padding:55px 0 40px;border-top:1px solid #252d38; position:relative; } .moreservers h3 {color:#fff; letter-spacing: -.05em; margin-bottom:30px; text-align: center; font-size:29px;} .moreservers button{ position:absolute; top:100%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); margin-top:40px; z-index:9; font-size:16px; line-height:29px; font-weight:300;} .servers-table {padding:75px 0 55px; overflow:hidden; display: none;} .server-products-table { min-width:100%; border:1px solid #eae8e8; font-family: 'Trebuchet MS', sans-serif!important;margin-bottom:45px; } .server-products-table thead {border:0;background:transparent;} .server-products-table thead th {background:#FC6700; color:#fff!important; font-weight:900; font-size:15px!important; border:0!important; font-family: 'Trebuchet MS', sans-serif!important; text-shadow: none; padding-top:10px!important; padding-bottom:10px!important; text-align: center;} .server-products-table th {font-weight: normal; -webkit-font-smoothing: antialiased; padding:16px 12px; color: #424242; font-size: 14px; background: #fff; } .server-products-table td {color: #424242; padding:16px 12px; font-size: 14px; border-right:1px solid #eae8e8; text-align: center;} .server-products-table td:first-child, .server-products-table thead th:first-child {text-align: left;} .server-products-table td:last-child {border-right:0;} .server-products-table tr { background: #fff; } .server-products-table td i.fa-times {color:#FC6700;} .server-products-table td i.fa-check {color:#768B1F;} /* Features */ .features-server {background:#F0F0F0; padding:80px 0 55px; overflow:hidden;} .features-server h3 {color:#424242; letter-spacing: -.05em; margin-bottom:30px; padding: 0 20px; font-size:29px;} .features-server p {font-size:17px; padding: 0 50px;} .server-feature {margin-bottom:40px;} .rightside {text-align:right;} .server-feature h4 {color:#FC6700; margin-bottom:5px; padding: 0; font-size:18px;} .server-feature p {font-size:16px; padding: 0; margin-bottom: 0;} /* ======================== 7 = Domains ======================== */ .domainavailability {padding:55px 0 70px;background: #E5ECAB;} .domainavailability h1 {font-size:29px; display:table; border-bottom:0; padding:15px; margin:0 auto;color:#768B1F; font-weight:700; margin-bottom:40px; letter-spacing: -.05em;} .domain-form-container { background:#E5ECAB; position: relative; top: 0; opacity: 4; float: left; padding: 30px 50px; width: 100%; border-radius: 0; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5;} .domain-form-container:before { background:#E5ECAB; content:#fff; width: 100%; height: 30px; border-radius: 0; position: absolute; top: -10px; left: 0; transform: scale(.95); -webkit-transform: scale(.95); -ms-transform: scale(.95); z-index: -1;} .domainavailability .material .material-input :focus ~ label, .domainform .material .material-input .filled ~ label {color:#FC6700; font-size:18px;} .domainavailability .material .material-input label {color:#FC6700; font-size:18px;} .domainavailability .material .material-input input {color:#FC6700; font-size: 22px; height:71px; width: 100%; border:0; border-bottom: 1px solid lightgray; outline: none; background: 0; float:left;} .domainavailability .material .material-select {color:#E5ECAB; font-size:14px;} .domainavailability .material .material-select ul {padding:0; margin:0; list-style:none;} .domainavailability button {width: 100%; -webkit-border-radius:0; -moz-border-radius:0; margin-top:22px; font-weight: 700; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border:0; background:#FC6700; color:#fff;} .domainavailability button i {font-size:16px;} /* Domain TLDs */ .domaintlds {padding:55px 0; background:#eee; overflow:hidden;} .domaintlds h2 {letter-spacing: -.05em; font-size: 29px; margin-bottom:22px;} .domaintlds p.subtitle {padding:0 100px;} .domain-tlds-grid {text-align:center; margin:50px 0;} .domain-tlds-grid .block-grid-item {padding:25px;} .domain-tlds-grid .block-grid-item .tld {padding:25px; background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .tldprice {font-size:15px; padding-top:20px; margin:30px 0 0; border-top:2px solid #e2e0e0; position:relative; background: #ffffff;} .tldprice:after, .tldprice:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;} .tldprice:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px;} .tldprice:before { border-color: rgba(204, 204, 204, 0); border-bottom-color: #e2e0e0; border-width: 13px; margin-left: -13px;} .domaintlds h3 {font-size: 29px; letter-spacing: -.05em;} .domaintlds h3 strong {color:#FC6700; } .domaintlds h3 span {display:block; color:#FC6700; padding-top:10px;} .domain-prices {padding:67px 0; overflow:hidden; background-color:#E5ECAB;} #tld-table {min-width:100%; font-family: 'Trebuchet MS', sans-serif; background: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border: 0; font-size: 16px; position: relative; white-space: nowrap; } #tld-table thead {border:0!important; } #tld-table thead th {background:#FC6700; color:#fff!important; font-weight:900; font-size:14px; position:relative; -webkit-box-shadow: -1px 0px 0px 0px rgba(255,255,255,.3);-moz-box-shadow: -1px 0px 0px 0px rgba(255,255,255,.3);box-shadow: -1px 0px 0px 0px rgba(255,255,255,.3); text-align:center; text-shadow: none; font-family: 'Trebuchet MS', sans-serif;} #tld-table thead th:first-child {box-shadow:none;} #tld-table th {font-weight: normal; -webkit-font-smoothing: antialiased; padding:16px 12px; color: #6E6E6E; font-size: 16px; background: #FFFFFF; } #tld-table td {color: #6E6E6E; padding:16px 12px; font-size: 16px; border-bottom:1px solid #DFE0E5; text-align: center;} #tld-table td:first-child { font-weight:bold; text-align: left; background:#eee;} #tld-table thead th:first-child { text-align: left; } #tld-table tr.even, #tld-table tr.alt, #tld-table tr:nth-of-type(even) { background: #FFFFFF!important; } /* Features */ .domain-features-text {padding:67px 0 60px; overflow:hidden; background:#E5ECAB;} .domain-features-text h4 {color:#424242; margin-top:0; font-size:29px; letter-spacing: -.05em;} .domain-features-text h5 {font-size:23px; color:#FC6700; letter-spacing: -.05em;} .domain-features {padding:55px 0; overflow:hidden; border-top:4px solid #dcdada;} .domain-features h5 {font-weight:700; font-size:20px; padding:0 0 6px; color:#FC6700; letter-spacing: -.05em;} .domain-features p {font-size:17px; } .domain-features img {margin-top:15px; background:#eee; padding:10px;} /* ======================== 8 = About Us ======================== */ #subheader.about {background: url(images/about_bg.png) center center no-repeat; padding:100px 25px;} #subheader.about:after { background: #E5ECAB; bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } /* Description */ .about-descr {padding:55px 0 67px; overflow:hidden;} .about-descr h3 {color:#424242; letter-spacing: -.05em; margin-bottom:0; padding: 0; text-align:center; font-size:29px;} .about-descr p {font-size:17px;} .about-descr p.topspacing {padding-top:50px;} .about-descr p.description {padding:0 40px; margin-bottom:55px; text-align:center; } .about-icons {background:#FC6700; padding:67px 0 55px; overflow:hidden; text-align:center;} .about-icons p {font-weight:100; font-size:21px; color:#fff; margin-top:25px;} .about-team {padding:55px 0; overflow:hidden;} .about-team h3 {color:#424242; letter-spacing: -.05em; margin-bottom:30px; padding: 0; text-align:center; font-size:29px;} .about-team p {padding:0 40px; margin-bottom:55px; text-align:center; font-size:19px;} /* Team */ .team-grid {margin-top:15px;} .team-grid .block-grid-item {padding:0; margin:0;} .team-grid .block-grid-item h6 {font-weight:700; font-size:20px; text-align: center; margin-bottom:0; padding:0;letter-spacing: -.05em;} .team-grid .block-grid-item p {font-size:16px; text-align: center; margin-bottom:17px;} /* Timeline */ .about-timeline {padding:65px 0; overflow:hidden; background:#E5ECAB;} .timeline { list-style: none; position: relative; max-width: 1170px; padding: 20px; margin: 0 auto; overflow: hidden; } .timeline:after { content: ""; position: absolute; top: 0; left: 50%; margin-left: -2px; background: #dad7d7; height: 100%; width: 2px; display: block; } .timeline .timeline-row {padding-left: 50%; position: relative; z-index: 10; } .timeline .timeline-row .timeline-time { position: absolute; right: 50%; top: 40px; text-align: right; margin-right: 40px; font-size: 25px;line-height: 1.3;font-weight: 300; color:#424242; } .timeline .timeline-row .timeline-icon {position: absolute; top: 37px;left: 50%; margin-left: -18px; width: 36px; height: 36px; background:#80D5DD; overflow: hidden; z-index: 100; border-radius:50%; border:8px solid #eee;} .timeline .timeline-row .timeline-content {margin-left: 40px; position: relative; background: #FC6700; color: #fff; border-radius: 0; opacity: 1; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5; padding:25px;} .timeline .timeline-row .timeline-content:before { content: ""; width: 100%; height: 30px; border-radius: 0; position: absolute; top: -10px; left: 0; transform: scale(.95); -webkit-transform: scale(.95); -ms-transform: scale(.95); z-index: -1; background: rgba(255,64,129,.5); } .timeline .timeline-row .timeline-content:after { content: "";position: absolute; top: 53px; left: -41px; height: 2px; width: 40px; background: #dad7d7; z-index: -1; } .timeline .timeline-row .timeline-content .panel-body {padding: 15px 15px 2px; position: relative;z-index: 10; } .timeline .timeline-row .timeline-content h2 {font-size: 19px; margin-bottom: 12px; margin-top: 0; line-height: 1.2; text-transform: uppercase; letter-spacing: -.03em; color:#fff;} .timeline .timeline-row .timeline-content p {margin-bottom: 15px; } .timeline .timeline-row:nth-child(odd) { padding-left: 0; padding-right: 50%; } .timeline .timeline-row:nth-child(odd) .timeline-time { right: auto; left: 50%; text-align: left; margin-right: 0; margin-left: 40px; } .timeline .timeline-row:nth-child(odd) .timeline-content { margin-right: 40px; margin-left: 0; } .timeline .timeline-row:nth-child(odd) .timeline-content:after { left: auto; right: -41px; } .timeline.animated .timeline-row .timeline-content { left: 20px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; } .timeline.animated .timeline-row:nth-child(odd) .timeline-content { left: -20px; } .timeline.animated .timeline-row.active .timeline-content { left: 0; } .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {left: 0; } /* ======================== 9 = FAQ ======================== */ #subheader.faq {background: url(images/faq_bg.png) center center no-repeat; background-color:#E5ECAB; padding:100px 25px;} /* FAQ categories and accordions */ .faq-tabs {padding:40px 0; background:#E5ECAB; overflow:hidden;} .faq-categories {overflow:hidden;} .faq-categories ul {list-style: none; padding:0; margin:0;} .faq-categories ul li a {border:3px solid #C6C6C8; color: #999; font-weight:400; display: block; float: left; font-size: 15px; margin: 0 6px 6px 0; padding: 7px 10px; position: relative; border-radius:8px;} .faq-categories ul li a span.badge {margin-left:5px; font-size:11px; background:#b2b2b4; padding:4px 7px 5px;} .faq-categories ul li a:hover, .faq-categories ul li.active a { border-color:#9E9996; color:#fff; background:#9E9996;} .faq-categories ul li a:hover span.badge, .faq-categories ul li.active span.badge {background:#fff;color: #999;} .faq-tabs-white {padding:55px 0; overflow:hidden;} .faq-tabs-white .tab-content {font-size:16px;} .faq-tabs-white .panel {box-shadow: none !important; background:transparent;} .faq-tabs-white .panel, .faq-tabs-white .panel-group .panel-heading+.panel-collapse>.panel-body{ border: none; box-shadow: 0;} .faq-tabs-white .panel-body {border-top: 0 !important;} .faq-tabs-white .panel-heading {border:0; border-bottom:1px solid #E5ECAB; background:transparent; border-radius:0; padding:12px 0; } .faq-tabs-white .panel-heading h4.panel-title a {font-size:16px; font-weight:400; line-height: 1.3; color:#212121;} .faq-tabs-white .panel-heading h4.panel-title a:hover {color:#DA3867;} .faq-tabs-white .panel-heading h4.panel-title i {margin:2px 7px 0 0; vertical-align:middle; font-size:19px; color:#DA3867;} .faq-tabs-white .panel-body {padding:15px 0; margin:0;} .faq-tabs-white .panel-body p {text-align: left; font-size:15px; padding:0; margin:0;} /* Support Nethods */ .other-support-methods {padding:67px 0; background:url(images/other-support-bg.png); overflow:hidden;} .other-support-methods h3 {color:#fff; letter-spacing: -.05em; margin:0 0 20px; padding: 0; font-size:29px;} .other-support-methods p {color:#fff; margin:0; font-size:16px;} .support-method {padding-left:80px; margin-bottom:50px;} .support-method:last-child {margin-bottom:0;} .support-method h4 {padding: 0 0 15px; margin:0; font-size:24px; color:#fff;} .support-method h4 i {margin-right:8px; color:#E5ECAB;} .support-method p {color:#ccc; font-size:17px;} ul.support-links {margin:80px 0 0; padding:0; list-style:none;} ul.support-links li {background:#a6b763; padding:8px 12px; margin-bottom:1px; color:#fff; font-size:16px;} ul.support-links li i {margin-right:8px; } ul.support-links li a {color:#fff; font-weight:300; } ul.support-links li a span {color:#768B1F; font-weight:500;} /* ======================== 10 = Datacenter ======================== */ #subheader.datacenter {background:#E5ECAB; padding:100px 25px;} /* Description */ .datacenter-descr {padding:55px 0; background: #E5ECAB; text-align:center; min-height:680px;} .datacenter-descr h3 {color:#424242; margin-bottom:0; padding: 0; font-size:29px; letter-spacing: -0.05em;text-align:center;} .datacenter-descr p {font-size:17px; text-align:center;} .datacenter-img-descr {padding:55px 0; overflow:hidden; background: #fff url(images/data_bg.png) center center no-repeat; background-size:cover; text-align:center; min-height:680px;} .datacenter-img-descr h3 {color:#424242; margin-bottom:0; padding: 0; font-size:29px; letter-spacing: -0.05em;text-align:center;} .datacenter-img-descr p {font-size:17px; text-align:center;} .datacenter-grid {text-align:center; padding-top:40px;} .datacenter-grid .block-grid-item {text-align: left; padding:15px 25px; background:#F0F0F0; margin:1%; width:48%;} .datacenter-grid .block-grid-item.blue {background:#FC6700; color:#fff;} .datacenter-grid .block-grid-item.gray {background:#768B1F; color:#fff;} .datacenter-grid .block-grid-item.pink {background:#c9e082; color:#768B1F;} .datacenter-grid .block-grid-item.green {background:#E5ECAB; color:#768B1F;} .datacenter-grid .block-grid-item.blue h5, .datacenter-grid .block-grid-item.gray h5, .datacenter-grid .block-grid-item.pink h5, .datacenter-grid .block-grid-item.green h5 {color:#fff;} .datacenter-grid .block-grid-item h5 {font-size:22px;padding-top:5px; letter-spacing: -0.05em;} .datacenter-grid .block-grid-item p {margin-top:0; padding:0; text-align:left; font-size:15px;} /* Map */ .map_wrapper {padding:55px 0; background:url(images/other-support-bg.png); } .datacenter-photos {padding:55px 0 75px; overflow:hidden; background:#eee;} .datacenter-photos h3 {color:#424242; margin-bottom:0; padding: 0; font-size:29px; letter-spacing: -0.05em;text-align:center;} .datacenter-photos p {font-size:17px; text-align:center;} #gallerypostContainer {margin-top:45px;} /* ======================== 11 = Affiliates ======================== */ #subheader.affiliates {background: url(images/affiliates_bg.png) center center no-repeat; } #subheader.affiliates:after bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } #subheader.affiliates .mtr-btn {margin-top:35px;} /* Description */ .affiliates-descr {padding:55px 0 70px; overflow:hidden;} .affiliates-descr h3 {color:#424242; letter-spacing: -.05em; margin-bottom:20px; padding: 0 20px; font-size:29px;} .affiliates-descr p.description {padding:0 40px; margin-bottom:55px; text-align:center;} .affiliates-descr .number {color:#EB1E94; font-size:20px; font-weight:100; background:#ccc; padding:10px; text-align:center; margin-top:20px; border-radius:6px;} .affiliates-descr .number.darkgray {background:#2C2C2C; color:#fff;} .affiliates-descr .number.red {background:#CA2C46; color:#fff;} .affiliates-descr .number.green {background:#89B22D; color:#fff;} .affiliates-descr h4 {color:#424242; padding:18px 0 10px; margin:0; font-size:18px;} .whiteframe {padding:15px; background:#fff; border: 1px solid #ccc; border-radius:5px; box-shadow:inset 0 -4px 0 0 #f6f6f6, inset 0 -5px 0 0 #ddd, inset 0 -10px 0 0 #f6f6f6, inset 0 -11px 0 0 #ddd,0 2px 8px -2px rgba(0, 0, 0, 0.1);} /* Counters */ .affiliates-counts {background:url(images/affiliates_steps.jpg) center center no-repeat; padding:80px 0; overflow:hidden; text-align:center;} .affiliates-counts .odometer {color:#fff; font-size:50px; font-weight:900; font-family: 'Trebuchet MS', sans-serif;} .affiliates-counts #odometer1.odometer:after {content: "+"; font-size:30px; margin:4px 0 0 4px; font-weight:100;} .affiliates-counts #odometer3.odometer:after {content: "%"; font-size:30px; margin:4px 0 0 4px; font-weight:100;} .odometer-inside { display: inherit;} .affiliates-counts p {font-size:17px; font-weight: 300; margin:10px 0 0; color:#fff;} /* How it Works */ .howitworks {padding:55px 0 70px; background: #eee; overflow:hidden;} .howitworks h3 {color:#424242; letter-spacing: -.05em; margin-bottom:20px; padding: 0 20px; font-size:29px;} .howitworks p.description {padding:0 40px; margin-bottom:55px; text-align:center;} .howitworks .mtr-btn {margin-top:60px;} .affiliates-examples {text-align:center; padding-bottom:20px; background:#fff; color:#424242; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .affiliates-examples p { margin-bottom:0; font-weight:300; font-size:16px; background:#75787A; padding:15px; color:#fff; } .affiliates-examples h5 { margin:0; padding:12px 0 0; font-size:40px; font-weight:900; } .affiliates-examples span { margin:0; padding:0; font-weight:300; font-size:14px; } .affiliates-features {padding:55px 0 67px; background: #fff; overflow:hidden;} .affiliates-features i {font-size:60px; color:#B9B9B9; vertical-align: top; margin-top:25px; float:right;} .affiliates-features h5 {font-size:22px; padding:15px 0 6px; color:#FC6700;} .affiliates-features p {font-size:17px; } /* ============================== 12 = Blog ============================== */ #subheader.blog {background:#3F445B; padding:100px 25px;} #subheader.blog h2 a {color:#ccc;} #subheader.blog .mtr-btn {position:absolute; top:100%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);z-index:9; font-size:16px; line-height:29px; font-weight:300; padding-top:12px;} .popover.sharing {background:#3F445B; border:0; border-radius:2px; padding:5px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);z-index: 998;} .popover.sharing.bottom .arrow:after { border-bottom-color: #3F445B;} .popover.sharing .popover-title {background:transparent; border-color:#444960;} .popover.sharing h3.popover-title {color:#fff; font-weight:300; text-align: center;} .blog-share-buttons {margin:0 auto; padding:0; display: table;} .blog-share-buttons li { list-style: none; display: inline-table;} .blog-share-buttons li a { color:#fff; display: inline-block; padding-top:10px; text-align: center; height: 42px; width: 42px; position: relative; z-index: 1; -webkit-transition: color 0.15s; transition: color 0.15s; -moz-osx-font-smoothing: grayscale; border-radius:50%; -webkit-backface-visibility: hidden;} .blog-share-buttons li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; z-index: -1; box-shadow: inset 0 0 0 35px #50556d; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transition: box-shadow 0.15s, -webkit-transform 0.15; transition: box-shadow 0.15s, transform 0.15s;} .blog-share-buttons li a:hover::before { -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); box-shadow: inset 0 0 0 35px #FC6700;} .blog { background: #E5ECAB; padding:60px 0 15px;} .blog article {background: #fff; border-radius:0; margin-bottom:70px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .blog.single {padding:75px 0 60px;} .blog.single article {margin-bottom:35px;} .blog article .post-content {padding:25px;} .blog article .post-content h2 {font-size:29px;letter-spacing: -.05em; margin:10px 0 17px; padding:0; text-transform: uppercase;} .blog article .post-content h2 a {color:#666;} .blog article .post-content h2 a:hover {color:#212121;} .blog article .post-content hr {border-color:#ECECEC;} .blog article .post-content .themeta {font-family: 'Montserrat', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; color:#abaaaa; font-size:13px; font-weight:400;margin:12px 0 17px; } .blog article .post-content p {font-size:17px;} .blog article .post-content ul li {font-size:17px; font-weight:300;} .blog article .post-content .mtr-btn {margin:15px 0 10px;} .blog article .post-content blockquote {border: 0; border-left:5px solid #FC6700; background:#ebebeb; font-size:17px; font-weight:300; padding:12px 18px;} .blog .sidebar {background: #fff; border-radius: 0; padding:15px 25px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .blog .sidebar .widget {margin-bottom:45px;} .blog .sidebar .widget h3.badge {border-radius:0; padding:12px; display:block; font-size:16px; text-align: left; color:#fff; background:#3F445B;} .blog .sidebar .widget ul {padding:0; margin:0; list-style:none;} .blog .sidebar .widget ul li {padding:9px 6px; font-size:15px; border-bottom:1px solid #EDEDED;} .blog .sidebar .widget ul li span.badge {float:right; margin-top:2px; background:#FC6700; border-radius: 2px;} .blog .sidebar .widget ul li a {color:#424242;} .blog .sidebar .widget ul li a:hover {color:#000;} .blog .sidebar .widget .blogsearch input[type="text"].form-control { border:0; box-shadow:none; border-radius: 6px; font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; background: #EDEDED; } .tagcloud {overflow:hidden;} .tagcloud a { background: #ECECEC; border: 0 none; color: #424242; font-weight:300; display: block; float: left; font-size: 13px; margin: 0 3px 3px 0; padding: 5px 7px; position: relative; border-radius:2px;} .tagcloud a:hover { background: #FC6700; color:#fff;} .blog nav ul.pagination {display:table; margin:0 auto; margin-bottom:45px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .blog nav ul.pagination li {font-size:15px;} .blog nav ul.pagination li a {color:#424242; padding: 10px 18px 8px;} .blog nav ul.pagination li a:hover {background:#ECECEC; } /* Author box */ .author-wrap {position: relative; overflow:hidden; padding:0; background: #fff; border-radius: 0; margin-bottom:35px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .author-gravatar {margin: 0;line-height: 1; background: url(images/s8.png) repeat; min-height:150px; position:relative;} .author-gravatar img {width:96px; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .author-info {padding:30px 20px;} .author-title {color: #424242;display: block;line-height: 1.5;margin: 0; padding: 0 0 10px;} .author-title h6 {padding:0; margin: 0 0 6px;font-size: 24px; color:#FC6700; letter-spacing: -.05em;} .author-description {display: block; margin: 0 0 5px;} .author-description p {margin: 0; font-size: 17px;} /* Comments */ .comments, #addcomments {padding:20px 30px 30px; background: #fff; border-radius: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .comments { margin-bottom:35px;} #thecomments {margin-top: 0;} #thecomments h2, #respond h2 { font-size: 24px; color:#FC6700; letter-spacing: -.05em;} #addcomments {margin-top: 0;} /* Comments List */ ol.commentlist { margin: 0; padding: 0;} .commentlist .comment-body{ padding: 0; margin: 0; position: relative; border-top: 0;} .comment-body a:hover{ text-decoration: underline;} .comment-body a.comment-reply-link {margin: 0; text-decoration:none; color:#fff; font-size:10px; border:0; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;} ol.commentlist li { margin-top:0; list-style: none; padding: 20px 0; background:#fff; border-bottom: 1px solid #E5ECAB;} ol.commentlist li ul.children {margin-bottom: 0px !important; margin-top: 25px !important;} ol.commentlist li ul.children li{ border-bottom: 0; padding-left: 20px !important; margin: 10px 0; border-left:1px solid #e8e8e8;} ol.commentlist li ul.children .comment-body{ padding: 15px 0 5px; margin: 10px 0 0; position: relative;} .reply {margin-bottom:10px;} ol.commentlist img.avatar { margin:10px 20px 0 0; float:left; width:48px; -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} ol.commentlist .comment-author { line-height: 25px; border:0; width:100%; } .comment-body h6 { margin:0; padding:14px 0 0; font-size:18px; letter-spacing: -.05em;} .comment-body h6 a {color: #424242; } .comment-body h6 a:hover {color: #DE6262; text-decoration: none;} .comment-time{ font-size: 12px; font-style: normal; color: #ccc;} .commentmetadata { clear: both; padding: 0; margin: 0;} .commentmetadata a{ margin: 0; color: #000; text-decoration: underline;} .comment-body p{ padding:20px 0 6px; font-weight:300;} .comment-body .comment-author.vcard{ margin: 0; border-bottom: 1px solid #e8e8e8; padding-bottom:15px;} .comment-body ul, .comment-body ol {padding:0; margin:0;} .comment-body ul li, .comment-body ol li {padding:7px 0; margin:0; border:0;} .comment-body ul li ul, .comment-body ol li ol {padding:7px 0 7px 7px; margin:0; border:0;} #reply-title { margin:10px 0; padding:0 0 5px; font-weight:normal; font-size:26px; line-height:1.3; display: block; margin-bottom:-2px; font-weight: 700;} .comment-notes {padding:25px 0 0;} form#commentform input#submit {margin-top: 0; border:0; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;} /* ============================== 13 = Contact ============================== */ #subheader.contact {background: url(images/contact_bg.png) center bottom no-repeat; padding:100px 25px;} #map_wrapper { height: 450px;} #map_canvas {width: 100%; height: 100%;} #map_canvas img {max-width: none;} .contact-elements {padding:55px 0 70px; background:#F1F1EF;} .contact-elements h3 {margin:0; padding:0; font-size:29px; } .contact-elements h4 {margin:10px 0; padding:0; font-size:22px; } .contact-elements p {padding:15px 0; margin-bottom:0;} .contactmethod {padding:15px; min-height:200px; color:#fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .contactmethod.purple {background:#b2c75b;} .contactmethod.blue {background:#809529;} .contactmethod.green {background:#9eb347;} .contactmethod.darkgray {background:#6c8115;} .contactmethod h5 { margin:0; padding:0 0 12px; font-size:20px; border-bottom:1px solid rgba(255,255,255,.1); color:#fff;} .contactmethod p { margin-bottom:0; font-weight:300; font-size:15px; padding:12px 0 0; color:#fff; } .contactmethod p a {color:#fff; text-decoration: underline; font-size:500;} .contactmethod p span {display:block;} .contactmethod .mtr-btn {margin-top:15px;} #contactform {margin-top:35px; padding:10px 25px 45px; font-size:16px; background:#fff; border: 1px solid #ccc; border-radius:5px; box-shadow:inset 0 -4px 0 0 #f6f6f6, inset 0 -5px 0 0 #ddd, inset 0 -10px 0 0 #f6f6f6, inset 0 -11px 0 0 #ddd,0 2px 8px -2px rgba(0, 0, 0, 0.1);} #contactform .material input, #contactform .material textarea {box-shadow:none; border-radius: 0; padding-left:0; padding-right:0;} #contactform .material p {padding:0;margin:0;} #contactform input#submit {background:#898BFE; color:#fff; margin-top:21px; font-size:15px; border:0; line-height:15px; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; width:auto; color:#fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} #sendstatus { margin: 10px 0 0;} #sendstatus .alert.alert-danger {border:0; background:#C266D3; color:#fff; border-radius: 0; margin-bottom:2px;} #sendstatus .alert.alert-success {border:0; background:#6FCCC6; color:#fff; border-radius: 0;} /* ============================== 14 = Elements ============================== */ .elements { background: #e0e1e7; padding:20px 0 45px; overflow:hidden;} h2.elements { font-weight: 300; margin: 30px 0; font-size:24px; text-align:center; border-bottom: 4px solid #6c8115; padding-bottom:12px; background:#768B1F; color:#fff;} .elements p { font-size: 17px; font-weight: 300; margin: 18px 0 0;} blockquote {border: 0; border-left:5px solid #FC6700; background:#ebebeb; font-size:17px; font-weight:300; padding:12px 18px;} /* Accordion */ #accordion.example .panel {box-shadow: none !important; background:transparent;} #accordion.example .panel, .vps-accordion .panel-group .panel-heading+.panel-collapse>.panel-body{ border: none; box-shadow: 0;} #accordion.example .panel-body {border-top: 0 !important;} #accordion.example .panel-heading {border:0; border-bottom:1px solid #d8d6d6; background:transparent; border-radius:0; padding:12px 0; } #accordion.example .panel-heading h4.panel-title a {font-size:16px; font-weight:400; line-height: 1.3; color:#212121;} #accordion.example .panel-heading h4.panel-title a:hover {color:#DA3867;} #accordion.example .panel-heading h4.panel-title i {margin:2px 7px 0 0; vertical-align:middle; font-size:19px; color:#DA3867;} #accordion.example .panel-body {padding:15px 0; margin:0;} #accordion.example .panel-body p {text-align: left; font-size:15px; padding:0; margin:0;} /* Horizontal Tabs */ .ds-horizontal-tabs .tab-content {margin-top:45px; border-top:1px solid #d9d1d5; padding:45px 0; font-size:16px;} .ds-horizontal-tabs .tab-content h4 {font-weight:300; font-size:21px; color:#FC6700; display: block; margin:0 0 20px;} .ds-horizontal-tabs .tabs-top-horizontal > .nav-tabs { display:table; margin:0 auto; } .ds-horizontal-tabs .tab-content > .tab-pane,.pill-content > .pill-pane { display: none;} .ds-horizontal-tabs .tab-content > .active,.pill-content > .active { display: block;} .ds-horizontal-tabs .tabs-top-horizontal > .nav-tabs > li { float: left; text-align: center; border:0; margin-bottom: 0; background: #E5ECAB;} .ds-horizontal-tabs .tabs-top-horizontal > .nav-tabs > li > a { margin-right: 0;color:#424242;padding:10px;-webkit-border-radius:0;-moz-border-radius:0; border-radius:0; border:0; text-transform: uppercase;font-size:14px;font-weight:400;} .ds-horizontal-tabs .tabs-top-horizontal > .nav-tabs > li.active:after > a { content:"";} /* Vartical Tabs */ .ds-vertical-tabs .tab-content {padding:0 50px; font-size:16px; float:right; width:85%;} .ds-vertical-tabs .tab-content h4 {font-weight:300; font-size:31px; color:#FC6700; display: block; margin:0 0 20px;} .ds-vertical-tabs .tab-content hr.small {margin:21px 0; border-color:#d8d6d6;} .ds-vertical-tabs .tabs-left-vertical > .nav-tabs { float:left; width:15%; } .ds-vertical-tabs .tab-content > .tab-pane,.pill-content > .pill-pane { display: none;} .ds-vertical-tabs .tab-content > .active,.pill-content > .active { display: block;} .ds-vertical-tabs .tabs-left-vertical > .nav-tabs > li { text-align: left; display:block; width:100%; border:0; margin-bottom: 0; background: #E5ECAB;} .ds-vertical-tabs .tabs-left-vertical > .nav-tabs > li > a { margin-right: 0;color:#424242;padding:20px 10px;-webkit-border-radius:0;-moz-border-radius:0; border-radius:0; border:0; text-transform: uppercase;font-size:14px;font-weight:400;} /* Buttons */ .buttons-example {display:table; margin:0 auto;} .elements .btn {margin-bottom:12px;} .btn {text-shadow:none; border:0; } .btn.no-radius {border-radius: 0;} .btn.btn-default {background:#DADFE1;} .btn.btn-primary {background:#4B77BE;} .btn.btn-info {background:#59ABE3;} .btn.btn-success {background:#26C281;} .btn.btn-warning {background:#E67E22;} .btn.btn-danger {background:#F62459;} /* Counters */ .counters .odometer {color:#424242; font-size:50px; text-align:center; font-weight:900; font-family: 'Trebuchet MS', sans-serif;} .elements h5.badge {font-size:18px; padding:9px 20px; background:#DE6262; display:table; margin:0 auto; margin-top:40px; margin-bottom:30px;} .pricingtables.default { background: #fff; overflow: hidden; padding:0; } .pricingtables.default .panel-heading { background: #222; } .pricingtables.default .most-popular .panel-heading { background: #3a5955; } .pricingtables.default .panel-heading h3 { color: #fff; font-size: 16px; font-weight: 400; letter-spacing: -.07em; margin: 0; padding: 12px 0; } /* BUTTONS */ .mtr-btn { border: none; border-radius: 2px; display: block; position: relative; min-width: 64px; padding: 8px; display: inline-block; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0; overflow: hidden; will-change: box-shadow,transform; -webkit-transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1); transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1); outline: none; cursor: pointer; text-decoration: none; text-align: center; vertical-align: middle; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);} .mtr-btn.btn-lg { padding:12px 24px; font-size: 20px;} .mtr-btn.btn-sm { padding: 6px; font-size: 13px;} .mtr-btn.btn-xs { padding: 3px; font-size: 12px; } .button-fab { color: #fff; background: #FC6700; } .button-raised {background: #ccc;} .button-white {background: #fff;} .button-purple {color:#fff; background:#FC6700;} .button-blue {color: #fff; background: #FC6700;} .button-navy {color: #fff; background:#768B1F;} a.button-fab, a.button-purple, a.button-blue, a.button-navy { color: #fff; text-decoration: none;} a.button-fab:hover, a.button-purple:hover, a.button-blue:hover, a.button-navy:hover, a.button-fab:focus, a.button-purple:focus, a.button-blue:focus, a.button-navy:focus { color: #fff; text-decoration: none;} a.button-raised, a.button-white { color: #000; text-decoration: none;} a.button-raised:hover, a.button-white:hover, a.button-raised:focus, a.button-white:focus { color: #000; text-decoration: none;} .button-circle {border-radius: 50%; font-size: 24px; height: 56px; margin: auto; min-width: 56px; width: 56px; padding: 0; overflow: hidden; box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24); position: relative; line-height: normal; } button.button-circle i {color:#fff;} /* Ripple Effect */ .ripple-wrapper { display: block; position: absolute; background: rgba(255,255,255,0.4); border-radius: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);} .ripple-wrapper.animated { animation: ripple 0.65s linear; -webkit-animation: ripple 0.65s linear; -moz-animation: ripple 0.65s linear; -o-animation: ripple 0.65s linear;} .has-ripple { overflow: hidden; position: relative; user-select: none; outline: none;} @keyframes ripple { 100% { -webkit-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); opacity: 0; }} @-webkit-keyframes ripple { 100% { -webkit-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); opacity: 0; }} @-o-keyframes ripple { 100% { -webkit-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); opacity: 0; }} @-moz-keyframes ripple { 100% { -webkit-transform: scale(2.5); -ms-transform: scale(2.5); -o-transform: scale(2.5); transform: scale(2.5); opacity: 0; }} /* FORMS */ .material .material-input{ position: relative; padding-top: 18px; margin-bottom: 10px; } .material .material-input:after{ display: block; clear: both; content:"";} .material .material-input input{ font-size: 16px; width: 100%; border:0; border-bottom: 1px solid lightgray; outline: none; background: 0; float:left; height: 32px; color:#757575; font-size: 12px; font-weight:500; font-family: 'Trebuchet MS', sans-serif;} .material .material-input textarea{ font-size: 16px; width: 100%; border:0; border-bottom: 1px solid lightgray; outline: none; background: 0; float:left; height: 120px; padding:7px 0;} .material .material-input label{ color:#757575; font-size: 14px; font-weight:500; font-family: 'Trebuchet MS', sans-serif; position: absolute; left:0; top:15px; line-height: 32px;} .material .material-bar{ position: absolute; bottom:0;left:0; display: block; width: 100%;} .material .material-bar:before,.material .material-bar:after{ content:""; height: 2px; width: 0; bottom:0; position: absolute; background: #6c8115;} .material .material-bar:before{ left:50%; } .material .material-bar:after{ right:50%; } .material .material-input :focus ~ .material-bar:before,.material .material-input :focus ~ .material-bar:after{ width:50%;} .material .material-input :focus ~ label,.material .material-input .filled ~ label{ color:lightgray; font-size: 13px; top:0; line-height: 24px;} /* Radio */ .material .material-group{ padding-top: 10px;} .material .material-group input{ display: none;} .material .material-group-item{ position: relative; margin-bottom: 5px;} .material .material-group-item:last-child{ margin-bottom: 0;} .material .material-group label{ padding-left: 30px; position: relative; cursor: pointer; z-index: 2; font-weight: 300;} .material .material-checkbox,.material .material-radio{ width: 18px; height: 18px; background:#fff; left:0; top:50%; margin-top: -9px; position: absolute; z-index: 1; border: 2px solid gray;} .material .material-radio{ border-radius: 10px;} .material .material-checkbox{ border-radius: 3px;} .material .material-checkbox:before{ content:"a"; font-size: 14px; text-align: center; padding-top: 3px; color:#fff; background:gray; position: absolute; top:0;left:0;right:0;bottom:0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);} .material .material-radio:before{ position: absolute; top:3px;left:3px; width: 8px; height: 8px; border-radius: 4px; background:gray; content:""; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);} .material input:checked ~ .material-radio:before,.material input:checked ~ .material-checkbox:before{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);} /* Select */ .material .material-select { font-size: 16px; font-weight: 300; width: 100%; position: relative; margin-bottom: 10px; padding-top: 18px; z-index: 3;} .material .material-select input{display: none;} .material .material-select > label{ color:gray; border-bottom: 1px solid lightgray; height: 40px; line-height: 40px; padding:0 30px 0 0px; width: 100%; cursor: pointer; position: relative; display: block;} .material .material-select > .material-title{ position: absolute; color:lightgray; height: 40px; line-height: 40px; top:18px;left:0; opacity: 0; visibility: hidden;} .material .material-select > input:checked + .material-title,.material .material-select.filled > .material-title{ top:0; opacity: 1; visibility: visible; font-size: 13px; line-height: 24px;} .material .material-select > label strong{ border-color: lightgray transparent transparent transparent; border-style: solid; border-width: 6px 5px 0 5px; margin-top: -3px; width: 0; height: 0; position: absolute; right:0;top:50%;} .material .material-select > input:checked ~ ul{ visibility: visible; opacity: 1; top:24px;} .material .material-select ul{ background:#fff; top:0; left:0;width: 100%; position: absolute; opacity: 0; visibility: hidden; z-index: 2;} .material .material-select ul li label{ color:gray;} .material .material-select ul li input:checked + label,.material .material-select ul li:hover input:checked + label{ font-weight: 400;} .material .material-select ul li label{ display: block; cursor: pointer; padding:7px 10px;} .material .material-select ul li label:hover{ background:#f5f5f5;} .material .material-select > input:checked + .material-bar{ top:22px;} .material .material-select .material-bar{ height: 2px; background: #0000ff; width: 0; bottom:auto; top:56px;} /* Shadow */ .material .material-select ul{ box-shadow: 0 2px 2px rgba(0,0,0,.2);} /* Animation */ .material .material-select ul,.material .material-bar:before,.material .material-bar:after,.material .material-input label,.material .material-select .material-bar,.material .material-select > span,.material .material-radio:before,.material .material-checkbox,.material .material-checkbox:before,.material .material-checkbox:after{ transition:.2s ease all; -moz-transition:.2s ease all; -webkit-transition:.2s ease all;} /* Disable select */ .material{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} /* Material border box reset */ .material *,.material *:before,.material *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} /* ======================== 15 = Footer ======================== */ /* Footer ---------------------- */ .footer{ width: 100%; background: #333333; padding:55px } .footer h4 {color:#e0e0e0; font-weight:700; padding-bottom:17px; font-size: 20px; margin:0 0 17px; position:relative;} .footer h4::after {background-color: #E5ECAB; bottom: 0; content: ""; height: 1px; left: 0%; position: absolute; width: 40px;} .footer a {color:#eeeeee;} .footer a:hover {color:#9e9e9e; text-decoration: none;} .footer ul {margin:0; padding:0; list-style:none;} .footer ul li {font-size:15px; font-weight:300; padding-bottom:4px; list-style: none;} .footer ul li:last-child {border:0;} /* MailChimp Newsletter Form Styling ----------------------- */ #mc_embed_signup input[type="email"] { border-radius:0;} #mc_embed_signup input[type="submit"] { margin-top:10px;} /* Footer / Social Buttons ---------------------- */ .social{ width: 100%; background: #222222; padding:20px 0; } .social-links {margin:0 auto; padding:0; display: table;} .social-links li { list-style: none; display: inline-table;} .social-links li a { color:#fff; display: inline-block; padding-top:10px; text-align: center; height: 42px; width: 42px; position: relative; z-index: 1; -webkit-transition: color 0.15s; transition: color 0.15s; -moz-osx-font-smoothing: grayscale; border-radius:50%; -webkit-backface-visibility: hidden;} .social-links li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; z-index: -1; box-shadow: inset 0 0 0 35px #333; -webkit-transform: scale3d(0.7, 0.7, 1); transform: scale3d(0.7, 0.7, 1); -webkit-transition: box-shadow 0.15s, -webkit-transform 0.15; transition: box-shadow 0.15s, transform 0.15s;} .social-links li a:hover::before { -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); box-shadow: inset 0 0 0 35px #6c8115;} .social p {padding-top:15px; font-size:14px; margin-bottom:0;} /* Back to Top Button ----------------------- */ #back-to-top { color:#fff; position:fixed; bottom:20px; right:20px; z-index:99; display:none; text-align: center; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; z-index: 10000; height: 59px; width: 59px; background-color:#C4D581; background-repeat: no-repeat; background-position: center; box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24); -webkit-transform: scale3d(0.7, 0.7, 1); transform: scale3d(0.7, 0.7, 1); -webkit-transition: box-shadow 0.15s, -webkit-transform 0.15; transition: box-shadow 0.15s, transform 0.15s;} #back-to-top i { padding-top:20px; font-size:17px; } #back-to-top:hover { background:#c9e082; -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1);} /* =================== 16 = Media Queries =================== */ /* For IE Edge (Spartan) ----------------------- */ @supports (-ms-accelerator:true) { .header{ padding:0 0 1px 0;} .sf-menu ul { top: 101%; } ::-webkit-input-placeholder { opacity: 0;} } /* End For IE Edge (Spartan) ----------------------- */ @media only screen and (max-width: 767px) { #navigation {display:none;} .slicknav_menu {display: block;font-size: 13px; font-weight: 500; background: #fff; border-bottom: 1px solid #494B4C; top: 0; z-index: 9999; } .slicknav_btn { font-size: 16px; background: #768B1F; border-radius: 5px; padding: 7px 10px; display: table; margin: 8px auto; float: none; } .slicknav_nav a { text-transform: uppercase; font-size: 13px;font-weight: 500; text-shadow: 0; } .slicknav_nav a:hover { -webkit-border-radius: 0!important; -moz-border-radius: 0!important; border-radius: 0!important;background: #d1d897!important; color: #fff; } .slicknav_nav a { font-size: 13px!important; color: #768A1E!important; } .slicknav_nav a:hover { text-decoration: none; } ul.top, ul.topright {display:table; margin:0 auto; text-align:center;} ul.topright {float:none;} ul.topright li { margin-right:17px;} .logo img {text-align:center; display:table; margin:0 auto; max-width:60%; padding-bottom:15px;} #mainimage { height:auto; position: relative; overflow: hidden; background: #768B1F url(images/pricingbox-bg-dark.jpg) fixed bottom center;} #mainimage h1 { font-size:2em;} #home-intro .home-intro-container {display:block; background: url(images/345454354353.png) no-repeat;} #home-intro .home-intro-container { height:90vh; position: relative; overflow: hidden;} #home-intro .home-intro-container .introcaption h2 { font-size: 1.9em; font-weight: 300; } #home-intro .home-intro-container .introcaption h4 { font-size: 1.65em;} .pricingbox.headerimg { position:relative; } .pricingbox.headerimg .verticalbottom { margin-top:0;} .pricingbox.headerimg .pricing-price p {color:#ccc; margin-bottom:0; text-align: center; padding:0; font-size:11px; letter-spacing: .12em;} .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-left: 15px; padding-right: 15px; } .calltoaction {padding:40px 0; background:#fff;} .pricingbox {padding:40px 0;} .pricingbox p {margin-bottom:70px;padding:0 15px;} .pricing-plan {margin-bottom:30px;} .domainsearch{ padding:20px 0 10px;} .various {text-align: center;} .testimonials .owl-theme .owl-controls .owl-page span {width: 30px; height: 8px; margin: 5px;} .testimonial-content h5 {font-size:13px;} .titleborder{ width:100%;} .various .why {padding-right:0; } .various i {float:none; } .newplanscolumn {margin-bottom:30px;} .footer h4 {margin-top:20px;} .affiliates-counts p, .affiliates-examples {margin-bottom:25px;} .affiliates-features {text-align:center;} .affiliates-features i {float:none;} #subheader, #subheader.shared, #subheader.dedicated-servers, #subheader.about, #subheader.faq, #subheader.datacenter, #subheader.blog, #subheader.contact {padding-top:25px; padding-bottom:25px;} #subheader h1 {font-size: 2.18em;} #subheader h2 {font-size: 1em;} .subheader-text {position: relative; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} .features-tabs .tabs-top-horizontal > .nav-tabs > li { border-right:0; display:block; width:100%; margin-bottom:2px;} .features-tabs .tabs-top-horizontal > .nav-tabs .active { border-bottom: 2px solid #424242;} .features-tabs .tab-content p.subtitle {padding:0; text-align:center;} .features-tabs .tabs-top-horizontal > .nav-tabs .active > a:after { border-width: 0;} .fully-managed .block-grid-item {padding:30px 15px; border:0; } .security .block-grid-item {text-align: left; padding:10px;} .security .security-tab-icon {float:none; width:100%; } .security .security-tab-icon i {margin-top:25px; font-size:42px; color:#AEAEAE; text-align:center;} .security .security-tab-feature {float:none; width:100%; } .backups-restore .backupcolumn { min-height:25px; margin-bottom: 15px;} #emails img, #monitoring img, #cdn img {margin-bottom:20px;} .products-table td, .products-table thead th {text-align: left;} .products-table td:first-child, .products-table thead th:first-child {background:#FC6700; color:#fff!important;} .apps-grid .block-grid-item {border:0; margin-bottom:2px; } .vps-features-tabs .tab-content {padding:25px 0 0; width:100%; float:none;} .vps-features-tabs .tabs-left-vertical > .nav-tabs { width:100%; float:none; } .vps-features-tabs .tabs-left-vertical > .nav-tabs .active > a:after { border-width: 0;} .tabcircle {float:none; padding-left:0; display:table; margin:0 auto; margin-top:30px; margin-bottom:30px; text-align:center; } .tabcircle i { text-shadow:none; } .vps-products-table td, .vps-products-table thead th {text-align: left; border-bottom:1px solid #E5ECAB;} .vps-products-table td:first-child, .vps-products-table thead th:first-child, .vps-products-table tr.price-comparison td:first-child {background:#FC6700; color:#fff!important;} .vps-products-table tr.price-comparison td {font-weight:400; font-size:14px; letter-spacing: 0; background:#fff; color:#424242;} .rightside {text-align:left;} .features-server p {padding: 0 15px;} .moreservers button{ margin-top:70px; } .server-products-table td, .server-products-table thead th {text-align: left; border-bottom:1px solid #E5ECAB;} .server-products-table td:first-child, .server-products-table thead th:first-child {background:#FC6700; color:#fff;} .server-products-table tr td:first-child .tablesaw-cell-label {display:none;} .domaintlds p.subtitle {padding:0 15px;} #tld-table td {text-align:left;} #tld-table td span.tablesaw-cell-content {display:block; color:#424242;} ul.support-links {margin:30px 0;} ul.support-links li {padding:6px 10px; font-size:15px;} .support-method {padding:0;} .about-team p {padding:0;} .datacenter-grid .block-grid-item {margin:1% 0; width:100%;} .contactmethod, .whiteframe {margin-bottom:15px;} #home-intro .home-intro-container .introcaption span#xyztitle {display:none;} } @media only screen and (min-width: 768px) and (max-width: 959px) { .logo {margin-top:7px;} .sf-menu li a {padding:25px 10px; } #home-intro .home-intro-container .introcaption h2 { font-size: 1.9em; } #home-intro .home-intro-container .introcaption h4 { font-size: 1.65em;} .flex-caption h2 { font-size: 1.5em;} .flex-caption h2 span {border:0; } .flex-caption h4 {font-size: 1.25em; margin-top: 15px;} .flex-caption .mtr-btn {margin-top:15px; margin-bottom:0;} .flex-control-nav {bottom:10px;} .features-tabs .tab-content { padding:30px 15px; } .features-tabs .tabs-top-horizontal > .nav-tabs > li { min-width:110px;} .features-tabs .tab-content p.subtitle {padding:0; } .fully-managed .block-grid-item {padding:50px 10px;} .fully-managed .block-grid-item h5 {ffont-size:16px;} .security .block-grid-item {text-align: left; padding:10px;} .security .security-tab-icon {float:none; width:100%; } .security .security-tab-icon i {margin-top:25px; font-size:42px; color:#AEAEAE; text-align:center;} .security .security-tab-feature {float:none; width:100%; } .backups-restore .backupcolumn { min-height:570px; } #emails img, #monitoring img, #cdn img {margin-bottom:20px;} .pricingbox.headerimg .verticalbottom {margin-top:130px;} .pricing-title { font-size: 15px; } .pricing-price { font-size: 25px; } .pricingbox.headerimg .progressbars, #mainimage-two .progressbars {padding: 0 0 20px; } #mainimage-two h2 {font-size:18px;} .pricingbox.headerimg ul li, .pricingbox.shared ul li, .pricingbox.servers ul li {font-size: 15px;} .features p {padding:0 10px; font-size:16px;} #shared-video .shared-video-container { min-height: 380px;} #shared-video .shared-video-container .videocaption .videocaption-content {max-width:480px; } .apps-grid .block-grid-item .odometer {font-size:60px; } .vps-features-tabs .tab-content {padding:0 30px; width:80%;} .vps-features-tabs .tabs-left-vertical > .nav-tabs { width:20%; } .vps-products-table tr.price-comparison td {font-weight:300; font-size:17px;} .tabcircle {margin-bottom:15px;} .rightside {text-align:left;} .features-server p {padding: 0 15px;} .rightside, .server-feature h4, .server-feature p {text-align:center;} #tld-table thead th {font-weight:500; font-size:11px;} #tld-table th {padding:12px 7px;font-size: 11px;} #tld-table td {padding:12px 7px;font-size: 11px;} .testimonial-content h5 {font-size:13px;} .newplanscolumn {margin-bottom:30px;} .footer h4 {font-size: 13px;} .contactmethod {min-height:300px;} .contactmethod h5 {font-size:14px;} .contact-elements h3 {font-size:19px; } .whiteframe {padding:8px;} .whiteframe p {font-size:15px;} } @media only screen and (min-width: 960px) and (max-width: 1025px) { #home-intro .home-intro-container .introcaption h2 { font-size: 3.1em; } #home-intro .home-intro-container .introcaption h4 { font-size: 1.65em;} .flex-caption h2 {font-size: 2.1em;} .flex-caption h2 span {padding: 14px 0;color:#fff;} .flex-caption h4 {font-size: 1.3em; margin-top:35px;} .flex-caption .mtr-btn {margin-top:35px;} .pricing-title { font-size: 20px; } .pricing-price { font-size: 36px; } #shared-video .shared-video-container { min-height: 370px;} #shared-video .shared-video-container .videocaption .videocaption-content {max-width:520px; } .features-tabs .tabs-top-horizontal > .nav-tabs > li { min-width:140px;} .security .security-tab-icon i {font-size:35px;} .backups-restore .backupcolumn { min-height:400px; } .testimonial-content h5 {font-size:12px;} .newplanscolumn {min-height:400px;} .newplanscolumn p {margin-bottom:0;} .newplanscolumn {margin-bottom:30px;} .about-descr p {font-size:16px;} .about-descr p.topspacing {padding-top:0;} .whiteframe {padding:8px;} } @media (max-width: 1200px) { .timeline { padding: 15px 10px; } .timeline:after { left: 26px; } .timeline .timeline-row { padding-left: 0; margin-bottom: 16px; } .timeline .timeline-row .timeline-time { position: relative; right: auto; top: 0;text-align: left; margin: 0 0 6px 56px; padding:0 0 12px 20px;} .timeline .timeline-row .timeline-icon { top: 65px; left: -2px; margin-left: 0; } .timeline .timeline-row .timeline-content { margin-left: 56px; position: relative; } .timeline .timeline-row .timeline-content:after { right: auto !important;left: -48px !important; top: 32px; } .timeline .timeline-row:nth-child(odd) { padding-right: 0; } .timeline .timeline-row:nth-child(odd) .timeline-time { position: relative;right: auto;left: auto; top: 0;text-align: left; margin: 0 0 6px 56px; } .timeline .timeline-row:nth-child(odd) .timeline-content { margin-right: 0;margin-left: 55px; } .timeline.animated .timeline-row:nth-child(odd) .timeline-content { left: 20px; } .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content { left: 0; } } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } #loginbox { margin: 10px 5px 70px 20px; background: #FFF; box-shadow: 3px 3px 6px #999; border: 1px solid #CDC1C5; padding: 15px; align: center; width: 200px; float: left; } #input.loginfield { width: 92%; border: 1px!important; font-size: 16px; } #appbox { margin: 10px 5px 70px 20px; background: #FFF; box-shadow: 3px 3px 6px #999; border: 1px solid #CDC1C5; padding: 15px; align: center; width: 200px; float: left; } img.centerimage { display: block; margin-left: auto; margin-right: auto } #appsimage { position: relative; overflow: hidden; background: #E5ECAB url(images/faq_bg.png) no-repeat bottom center;} #appsimage .introcaption { opacity:0; } #appsimage h1 { font-family: 'Trebuchet MS', sans-serif; text-align: center; color:#FC6700; padding-top:20px; padding-bottom:10px; z-index:2; position: relative; font-weight:100; font-size: 2.28em; text-shadow: -1px 1px 0 #c9e082;} #appsimage h1 span#js-rotating {padding:2px 2px 0; color:#FC6700; display:table; margin:0 auto; font-size: 2.28em; text-align:center; } #subheader.codeguard {background: url(images/img/codeguardbanner.png) center center no-repeat; padding:180px 25px;} #subheader.codeguard h1 { text-align: center; color:#768B1F; font-weight:700; font-size: 35px; text-shadow: -1px 1px 0 #FC6700; letter-spacing:-0.05em; text-transform: none;} #subheader.codeguard h2 { text-align: center; color:#768B1F; font-weight:400; font-size: 17px; margin-top:25px;} #subheader.impress {background: url(images/img/impress.gif) center center no-repeat; background-color:#3B3B4B; padding:180px 25px; width: 100%;} #subheader.impress h1 { text-align: center; color:#fff; font-weight:700; font-size: 35px; text-shadow: -1px 1px 0 #FC6700; letter-spacing:-0.05em; text-transform: none;} #subheader.impress h2 { text-align: center; color:#fff; font-weight:400; font-size: 17px; margin-top:25px;} #subheader.weebly {background: url(images/weebly-hero.png) center center no-repeat; background-color:#E5ECAB; padding:220px 2px; width: 100%;} #subheader.weebly h1 { text-align: center; color:#1f8eed; font-weight:800; font-size: 65px; text-shadow: 4px 7px 0 #fff; letter-spacing:-0.05em; text-transform: none;} #subheader.weebly h2 { text-align: center; color:#fff; font-weight:400; font-size: 17px; margin-top:25px;} #subheader.sitelock {background: url(images/sitelock-banner-mountain.png) center center no-repeat; background-color:#c01e29; padding:100px 5px;} #subheader.sitelock h1 { text-align: center; color:#fff; font-weight:700; font-size: 35px; text-shadow: -1px 1px 0 #FC6700; letter-spacing:-0.05em; text-transform: none;} #subheader.sitelock h2 { text-align: center; color:#fff; font-weight:400; font-size: 17px; margin-top:5px;} #subheader.gsuite {background: url(images/img/gsuite-b.png) center center no-repeat; background-color:#fff; padding:200px 5px;} #subheader.gsuite h1 { text-align: center; color:#000; font-weight:700; font-size: 35px; padding-bottom:151px; text-shadow: -1px 2px 0 #FC6700; letter-spacing:-0.05em; text-transform: none;} #subheader.gsuite h2 { text-align: center; color:#000; font-weight:400; font-size: 17px; margin-bottom:164px;} .premium-domain-prices {padding:67px 0; overflow:hidden; background:#fff;} #subheader.career {background: url(images/img/career-banner.png) center center no-repeat; background-color:#E5ECAB; padding:180px 25px;} #subheader.career h1 { text-align: center; color:#fff; font-weight:700; font-size: 35px; text-shadow: -1px 1px 0 #FC6700; letter-spacing:-0.05em; text-transform: none;} #subheader.career h2 { text-align: center; color:#fff; font-weight:400; font-size: 17px; margin-top:25px;} .pricingbox.365 {padding:55px 0 90px; background-color:#000;} /*Office 365 Pricing Boxes ------------------------ */ .pricingbox365 {padding:55px 0; margin:0; background: #E5ECAB url(images/webmail-pricing.png) no-repeat bottom center; overflow:hidden; } .pricingbox365.no-image-bg {background: #768B1F url(images/popular_plans_bg.jpg);} .pricingbox365 h3 {color:#768B1F; letter-spacing: -.03em; margin-bottom:30px; text-align: center; font-size:29px;} .pricingbox365 h3.poptitle {color:#768B1F; letter-spacing: -.03em; margin-bottom:20px; text-align: center; font-size:29px; font-weight:900; position: relative; padding-bottom:25px;} .pricingbox365 h3.poptitle::after {background-color: #768B1F; bottom: 0; content: ""; height: 2px; left: 50%; margin-left: -30px; position: absolute; width: 60px;} .pricingbox365 p {color:#768B1F; margin-bottom:70px; text-align: center; padding:0 95px; font-size:18px;} .pricingbox365 .row {margin-bottom:0; } #centerbutt {background:#eee; align:center; padding:10px 5px;} .webmail-tabs { border-bottom:1px solid #ddd; } .webmail-tabs>li { float:left; margin-bottom:-1px; } .webmail-tabs>li>a { margin-right:2px; line-height:1.42857143; border:1px solid transparent; border-radius:4px 4px 0 0; float:center; } .webmail-tabs>li>a:hover { border-color:#eee #eee #ddd; } .webmail-tabs>li.active>a,.webmail-tabs>li.active>a:focus,.nwebmailav-tabs>li.active>a:hover { color:#fff; cursor:default; background-color:#fff; border:1px solid #ddd; border-bottom-color:transparent; } .webmail-tabs.nav-justified { width:100%; border-bottom:0; float:center; } .webmail-tabs.nav-justified>li { float:center; } .webmail-tabs.nav-justified>li>a { margin-bottom:5px; text-align:center; margin-right:0; border-radius:4px; } .webmail-tabs.nav-justified>.active>a,.webmail-tabs.nav-justified>.active>a:focus,.webmail-tabs.nav-justified>.active>a:hover { border:1px solid #ddd; } .topspacing2 {padding-top:100px;} @media min-width768px{ .webmail-tabs.nav-justified>li { display:table-cell; width:1%; } .webmail-tabs.nav-justified>li>a { margin-bottom:0; border-bottom:1px solid #ddd; border-radius:4px 4px 0 0; } .webmail-tabs.nav-justified>.active>a,.webmail-tabs.nav-justified>.active>a:focus,.webmail-tabs.nav-justified>.active>a:hover { border-bottom-color:#fff; } } .emailmenu { padding-left:0; margin-bottom:0; list-style:none; } .emailmenu>li>a { padding:10px 15px; } .emailmenu>li>a:focus,.emailmenu>li>a:hover { text-decoration:none; background-color:#eee; } .emailmenu>li.disabled>a { color:#777; } .emailmenu>li.disabled>a:focus,.emailmenu>li.disabled>a:hover { color:#777; text-decoration:none; cursor:not-allowed; background-color:transparent; } .emailmenu .open>a,.emailmenu .open>a:focus,.emailmenu .open>a:hover { background-color:#eee; border-color:#337ab7; } .emailmenu .nav-divider { height:1px; margin:9px 0; overflow:hidden; background-color:#e5e5e5; } .emailmenu>li>a>img { max-width:none; } /* ============================== 12 = Blog (modified) ============================== */ #subheader.blog {background:#E5ECAB; padding:100px 25px;} #subheader.blog h2 a {color:#ccc;} #subheader.blog .mtr-btn {position:absolute; top:100%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);z-index:9; font-size:16px; line-height:29px; font-weight:300; padding-top:12px;} .popover.sharing {background:#768B1F; border:0; border-radius:2px; padding:5px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);z-index: 998;} .popover.sharing.bottom .arrow:after { border-bottom-color: #768B1F;} .popover.sharing .popover-title {background:transparent; border-color:#444960;} .popover.sharing h3.popover-title {color:#fff; font-weight:300; text-align: center;} .blog-share-buttons {margin:0 auto; padding:0; display: table;} .blog-share-buttons li { list-style: none; display: inline-table;} .blog-share-buttons li a { color:#fff; display: inline-block; padding-top:10px; text-align: center; height: 42px; width: 42px; position: relative; z-index: 1; -webkit-transition: color 0.15s; transition: color 0.15s; -moz-osx-font-smoothing: grayscale; border-radius:50%; -webkit-backface-visibility: hidden;} .blog-share-buttons li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; z-index: -1; box-shadow: inset 0 0 0 35px #50556d; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transition: box-shadow 0.15s, -webkit-transform 0.15; transition: box-shadow 0.15s, transform 0.15s;} .blog-share-buttons li a:hover::before { -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); box-shadow: inset 0 0 0 35px #FC6700;} .blog { background: #E5ECAB; padding:60px 0 15px;} .blog article {background: #fff; border-radius:0; margin-bottom:70px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .blog.single {padding:75px 0 60px;} .blog.single article {margin-bottom:35px;} .blog article .post-content {padding:25px;} .blog article .post-content h2 {font-size:29px;letter-spacing: -.05em; margin:10px 0 17px; padding:0; text-transform: uppercase;} .blog article .post-content h2 a {color:#666;} .blog article .post-content h2 a:hover {color:#212121;} .blog article .post-content hr {border-color:#ECECEC;} .blog article .post-content .themeta {font-family: 'Montserrat', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; color:#abaaaa; font-size:13px; font-weight:400;margin:12px 0 17px; } .blog article .post-content p {font-size:17px;} .blog article .post-content ul li {font-size:17px; font-weight:300;} .blog article .post-content .mtr-btn {margin:15px 0 10px;} .blog article .post-content blockquote {border: 0; border-left:5px solid #FC6700; background:#ebebeb; font-size:17px; font-weight:300; padding:12px 18px;} .blog .sidebar {background: #fff; border-radius: 0; padding:15px 25px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .blog .sidebar .widget {margin-bottom:45px;} .blog .sidebar .widget h3.badge {border-radius:0; padding:12px; display:block; font-size:16px; text-align: left; color:#fff; background:#768B1F;} .blog .sidebar .widget ul {padding:0; margin:0; list-style:none;} .blog .sidebar .widget ul li {padding:9px 6px; font-size:15px; border-bottom:1px solid #EDEDED;} .blog .sidebar .widget ul li span.badge {float:right; margin-top:2px; background:#FC6700; border-radius: 2px;} .blog .sidebar .widget ul li a {color:#424242;} .blog .sidebar .widget ul li a:hover {color:#000;} .blog .sidebar .widget .blogsearch input[type="text"].form-control { border:0; box-shadow:none; border-radius: 6px; font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; background: #EDEDED; } .tagcloud {overflow:hidden;} .tagcloud a { background: #ECECEC; border: 0 none; color: #424242; font-weight:300; display: block; float: left; font-size: 13px; margin: 0 3px 3px 0; padding: 5px 7px; position: relative; border-radius:2px;} .tagcloud a:hover { background: #FC6700; color:#fff;} .blog nav ul.pagination {display:table; margin:0 auto; margin-bottom:45px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);} .blog nav ul.pagination li {font-size:15px;} .blog nav ul.pagination li a {color:#424242; padding: 10px 18px 8px;} .blog nav ul.pagination li a:hover {background:#ECECEC; } .btn.btn-primary { background: #768b1f; } .homecircle {width:130px; height:130px; border-radius: 50%; background:#fff; border:8px solid #768b1f; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); float:center; margin:0 0 30px 30px; position:relative; overflow:hidden;} .homecircle i {left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size:57px; text-shadow: 1px 1px rgb(230, 230, 230), 2px 2px rgb(230, 230, 230), 3px 3px rgb(230, 230, 230), 4px 4px rgb(230, 230, 230), 5px 5px rgb(230, 230, 230), 6px 6px rgb(230, 230, 230), 7px 7px rgb(230, 230, 230), 8px 8px rgb(230, 230, 230), 9px 9px rgb(230, 230, 230), 10px 10px rgb(230, 230, 230), 11px 11px rgb(230, 230, 230), 12px 12px rgb(230, 230, 230), 13px 13px rgb(230, 230, 230), 14px 14px rgb(230, 230, 230), 15px 15px rgb(230, 230, 230), 16px 16px rgb(231, 231, 231), 17px 17px rgb(231, 231, 231), 18px 18px rgb(232, 232, 232), 19px 19px rgb(232, 232, 232), 20px 20px rgb(233, 233, 233), 21px 21px rgb(234, 234, 234), 22px 22px rgb(234, 234, 234), 23px 23px rgb(235, 235, 235), 24px 24px rgb(235, 235, 235), 25px 25px rgb(236, 236, 236), 26px 26px rgb(236, 236, 236), 27px 27px rgb(237, 237, 237), 28px 28px rgb(238, 238, 238), 29px 29px rgb(238, 238, 238), 30px 30px rgb(239, 239, 239), 31px 31px rgb(239, 239, 239), 32px 32px rgb(240, 240, 240), 33px 33px rgb(241, 241, 241), 34px 34px rgb(241, 241, 241), 35px 35px rgb(242, 242, 242), 36px 36px rgb(242, 242, 242), 37px 37px rgb(243, 243, 243), 38px 38px rgb(243, 243, 243), 39px 39px rgb(244, 244, 244), 40px 40px rgb(245, 245, 245), 41px 41px rgb(245, 245, 245), 42px 42px rgb(246, 246, 246), 43px 43px rgb(246, 246, 246), 44px 44px rgb(247, 247, 247), 45px 45px rgb(248, 248, 248), 46px 46px rgb(248, 248, 248), 47px 47px rgb(249, 249, 249), 48px 48px rgb(249, 249, 249), 49px 49px rgb(250, 250, 250), 50px 50px rgb(250, 250, 250), 51px 51px rgb(251, 251, 251), 52px 52px rgb(252, 252, 252), 53px 53px rgb(252, 252, 252), 54px 54px rgb(253, 253, 253), 55px 55px rgb(253, 253, 253), 56px 56px rgb(254, 254, 254), 57px 57px rgb(255, 255, 255); } .homecircle i.royalblue {color:#405499; } .homecircle i.green {color:#B5BD8E; } .homecircle i.red {color:#db3236; } .homecircle i.lightblue {color:#8ACDDD; } .homecircle i.orange {color:#FC6700; } .servercircle {width:150px; height:150px; border-radius: 50%; background:#fff; align: center; border:8px solid #768b1f; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); float:center; margin:0 auto; padding: 15px; position:relative; overflow:hidden;} .servercircle i {left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); font-size:57px; text-shadow: 1px 1px rgb(230, 230, 230), 2px 2px rgb(230, 230, 230), 3px 3px rgb(230, 230, 230), 4px 4px rgb(230, 230, 230), 5px 5px rgb(230, 230, 230), 6px 6px rgb(230, 230, 230), 7px 7px rgb(230, 230, 230), 8px 8px rgb(230, 230, 230), 9px 9px rgb(230, 230, 230), 10px 10px rgb(230, 230, 230), 11px 11px rgb(230, 230, 230), 12px 12px rgb(230, 230, 230), 13px 13px rgb(230, 230, 230), 14px 14px rgb(230, 230, 230), 15px 15px rgb(230, 230, 230), 16px 16px rgb(231, 231, 231), 17px 17px rgb(231, 231, 231), 18px 18px rgb(232, 232, 232), 19px 19px rgb(232, 232, 232), 20px 20px rgb(233, 233, 233), 21px 21px rgb(234, 234, 234), 22px 22px rgb(234, 234, 234), 23px 23px rgb(235, 235, 235), 24px 24px rgb(235, 235, 235), 25px 25px rgb(236, 236, 236), 26px 26px rgb(236, 236, 236), 27px 27px rgb(237, 237, 237), 28px 28px rgb(238, 238, 238), 29px 29px rgb(238, 238, 238), 30px 30px rgb(239, 239, 239), 31px 31px rgb(239, 239, 239), 32px 32px rgb(240, 240, 240), 33px 33px rgb(241, 241, 241), 34px 34px rgb(241, 241, 241), 35px 35px rgb(242, 242, 242), 36px 36px rgb(242, 242, 242), 37px 37px rgb(243, 243, 243), 38px 38px rgb(243, 243, 243), 39px 39px rgb(244, 244, 244), 40px 40px rgb(245, 245, 245), 41px 41px rgb(245, 245, 245), 42px 42px rgb(246, 246, 246), 43px 43px rgb(246, 246, 246), 44px 44px rgb(247, 247, 247), 45px 45px rgb(248, 248, 248), 46px 46px rgb(248, 248, 248), 47px 47px rgb(249, 249, 249), 48px 48px rgb(249, 249, 249), 49px 49px rgb(250, 250, 250), 50px 50px rgb(250, 250, 250), 51px 51px rgb(251, 251, 251), 52px 52px rgb(252, 252, 252), 53px 53px rgb(252, 252, 252), 54px 54px rgb(253, 253, 253), 55px 55px rgb(253, 253, 253), 56px 56px rgb(254, 254, 254), 57px 57px rgb(255, 255, 255); } .servercircle i.royalblue {color:#405499; } .servercircle i.green {color:#B5BD8E; } .servercircle i.red {color:#db3236; } .servercircle i.lightblue {color:#8ACDDD; } .servercircle i.orange {color:#FC6700; } #hero { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 50; border-bottom: 1px solid #1f1f1f; height: 790px; min-height: 400px; max-height: 400px; max-height: 56vh; padding: 30px 0; background-color: #768B1F; background-position: 50% 50%; background-size: cover; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, .5) } .hero-item { margin: 15px 35px; max-width: 390px color: #fff; } #hero h1 { width: 55%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #fff; } #hero h3 { width: 55%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #fff; } @media screen and (max-width:768px) { #hero { min-height: 300px; max-height: 50vh } .hero-item { text-align: center; max-width: 100% text-color: #fff; } #hero h1 { margin: 15px auto; width: 100%; max-width: 400px; font-size: 200% text-color: #fff!important; } .button { width: 250px margin: 15px 15px; } } #hero { background-position: 30% 30%; background-image: url(images/img/homepage_thexyz_desktop-min.png) } #perryhero { background-position: 30% 30%; background-image: url(images/perry-min-1000x420.png) } #perryhero { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 50; border-bottom: 1px solid #1f1f1f; height: 790px; min-height: 400px; max-height: 400px; max-height: 56vh; padding: 30px 0; background-color: #768B1F; background-position: 50% 50%; background-size: cover; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, .5) } .perryhero-item { margin: 15px 35px; max-width: 390px color: #fff; } #perryhero h1 { width: 55%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #fff; } #perryhero h3 { width: 55%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #fff; } #supporthero { background-position: 30% 30%; background-image: url(images/22-5-support-working.jpg) } #supporthero { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 50; border-bottom: 1px solid #1f1f1f; height: 790px; min-height: 400px; max-height: 400px; max-height: 56vh; padding: 30px 0; background-color: #768B1F; background-position: 50% 50%; background-size: cover; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, .5) } .supporthero-item { margin: 15px 35px; max-width: 390px color: #fff; } #supporthero h1 { width: 55%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #fff; } #supporthero h3 { width: 55%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #fff; } #home-hero-section { background-position: 30% 30%; background-image: url(https://www.thexyz.com/images/ad-free-tracking-banner.svg ) } #home-hero-section { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 50; border-bottom: 1px solid #1f1f1f; height: 790px; min-height: 400px; max-height: 400px; max-height: 56vh; padding: 30px 0; background-color: #768B1F; background-position: 50% 50%; background-size: cover; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, .5) } .home-hero-section-item { margin: 15px 15px; max-width: 390px color: #fff; } #home-hero-section h1 { width: 75%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #768B1F; } #home-hero-section h3 { width: 75%; max-width: 440px; line-height: 1.1; font-size: 312.5% text-color: #fff; } #homepage-getbusiness { position: relative; z-index: 50; padding: 18px 0; background: #E5ECAB; color: #768B1F; font-size: 112.5%; font-weight: 300; text-align: center; } #homepage-grey-slip { position: relative; z-index: 50; padding: 18px 0; background: #ccccca; color: #768B1F; font-size: 112.5%; font-weight: 300; text-align: center; } h1.title-page { color: #ffffff; margin: 15px 35px; text-shadow: 2px 2px 3px #fff background-color: #768B1F; padding:25px; background:rgba(200,224,130,.7); } h3.title-page { color: #ffffff; margin: 15px 35px; text-shadow: 1px 1px 3px #FC6700 background-color: #768B1F; padding:25px; background:rgba(200,224,130,.7); } @media only screen and (max-width: 981px){ h3.title-page { display: none; } } .emailsub { font-size:15px; color: #e2e0e0; padding-top:2px; } .emailsub2 { font-size:15px; font-color: #7f8c8d; font-weight: bold; background: #c9e082 text-shadow: 0px 0px 0px 1px } #twitterFeedOutput .tweet { padding: 12px 0; border-bottom: 12px; border-bottom: 1px solid #e9e9e9; } #twitterFeedOutput .tweet p { padding: 7px 0 0; margin-bottom: 5px; } #twitterFeedOutput p { padding: 22px 0; } .newdomainavailability {padding:55px 0 70px;background: #E5ECAB;} .newdomainavailability h1 {font-size:7 15px; display:table; border-bottom:0; background:#fff; padding:15px; margin:0 auto;color:#768B1F; font-weight:700; margin-bottom:40px; letter-spacing: -.05em;} .newdomain-form-container { background:#E5ECAB; position: relative; top: 0; opacity: 4; float: left; padding: 30px 50px; width: 100%; border-radius: 0; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5;} .newdomain-form-container:before { background:#E5ECAB; content:#fff; width: 100%; height: 30px; border-radius: 0; position: absolute; top: -10px; left: 0; transform: scale(.95); -webkit-transform: scale(.95); -ms-transform: scale(.95); z-index: -1;} .newdomainavailability .material .material-input :focus ~ label, .domainform .material .material-input .filled ~ label {color:#FC6700; font-size:28px;} .newdomainavailability .material .material-input label {color:#FC6700; font-size:18px;} .newdomainavailability .material .material-input input {background:#fff; color:#FC6700; font-size: 22px; height:71px; width: 100%; border:0; border-bottom: 1px solid lightgray; outline: none; float:left;} .newdomainavailability .material .material-select {color:#fff; font-size:14px;} .newdomainavailability .material .material-select ul {padding:0; margin:0; list-style:none;} .newdomainavailability button {width: 100%; -webkit-border-radius:0; -moz-border-radius:0; margin-top:45px; font-weight: 700; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border:0; background:#FC6700; color:#fff;} .newdomainavailability button i {font-size:29px;} #ticker .tickertext li {font-size:15px; color:#fff!important;} .subdomainavailability {padding:55px 0 70px;background: #E5ECAB;} .subdomainavailability h1 {font-size:7 15px; display:table; border-bottom:0; background:#fff; padding:15px; margin:0 auto;color:#768B1F; font-weight:700; margin-bottom:40px; letter-spacing: -.05em;} .subdomain-form-container { background:#E5ECAB; position: relative; top: 0; opacity: 4; float: left; padding: 30px 50px; width: 100%; border-radius: 0; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); z-index: 5;} .subdomain-form-container:before { background:#E5ECAB; content:#fff; width: 100%; height: 30px; border-radius: 0; position: absolute; top: -10px; left: 0; transform: scale(.95); -webkit-transform: scale(.95); -ms-transform: scale(.95); z-index: -1;} .subdomainavailability .material .material-input :focus ~ label, .domainform .material .material-input .filled ~ label {color:#FC6700; font-size:28px;} .subdomainavailability .material .material-input label {color:#FC6700; font-size:18px;} .subdomainavailability .material .material-input input {background:#fff; color:#FC6700; font-size: 22px; height:71px; width: 100%; border:0; border-bottom: 1px solid lightgray; outline: none; float:left;} .subdomainavailability .material .material-select {color:#fff; font-size:14px;} .subdomainavailability .material .material-select ul {padding:0; margin:0; list-style:none;} .subdomainavailability button {width: 100%; -webkit-border-radius:0; -moz-border-radius:0; margin-top:32px; font-weight: 700; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border:0; background:#FC6700; color:#fff;} .subdomainavailability button i {font-size:29px;} .weebly-logo-img { background: url('images/weebly-logo.png') no-repeat; height: 38px; width: 100px; margin: 10px auto 0 auto; } .premiumdomainheader h3 a { color: white; } .badge h3 a { color: #ffffff; outline: 0; text-decoration: none; } a:hover, a:active, a:focus { outline: 0; text-decoration: none; color:#000; } #widget h3 a.hover { color:#fff; background:#768B1F;} /* Call To Action ------------------------ */ .vpncalltoaction {padding:55px 0 360px; background:#fff url(images/vpnbanner.png) no-repeat bottom center; background-size:cover; overflow:hidden;} .vpncalltoaction h2 {font-weight:300; font-size:31px; display:table; border-bottom:1px solid #e4e4e4; padding:15px; margin:0 auto; margin-bottom:25px; letter-spacing: -.05em;} .vpncalltoaction h2 span {color:#FC6700; display: block; margin-top:15px; margin-bottom:15px; } .vpncalltoaction .mtr-btn {margin-top:15px;} .vpncalltoaction {padding:40px 0; background:#fff;} .datacenter-grid .block-grid-item.xyzorange {background:#FC6700; color:#fff;} @media screen and (min-width: 0px) and (max-width: 720px) { .webmail-tabs { display: none!important; } } /* Home Page Tabs */ .webmail-tabs {padding:90px 0 75px; background:#E5ECAB; overflow:hidden;} .webmail-tabs .tab-content {margin-top:55px; padding:40px 40px 55px; font-size:16px; background:#fff; border: 1px solid #ccc; border-radius:5px; box-shadow:inset 0 -4px 0 0 #f6f6f6, inset 0 -5px 0 0 #ddd, inset 0 -10px 0 0 #f6f6f6, inset 0 -11px 0 0 #ddd,0 2px 8px -2px rgba(0, 0, 0, 0.1);} .webmail-tabs .tab-content h4 {font-weight:700; font-size:29px; color:#FC6700; display: block; margin:0 0 30px; padding-bottom:30px; letter-spacing: -0.05em; text-align:center; position:relative;} .webmail-tabs .tab-content h4::after {background-color: #999; bottom: 0; content: ""; height: 2px; left: 50%; margin-left: -30px; position: absolute; width: 60px;} .webmail-tabs .tab-content p.subtitle {padding:0 150px; text-align:center;} .webmail-tabs .tabs-top-horizontal > .nav-tabs { display:table; margin:0 auto; } .webmail-tabs .tab-content > .tab-pane,.pill-content > .pill-pane { display: none;} .webmail-tabs .tab-content > .active,.pill-content > .active { display: block;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li { float: left; text-align: center; min-width:175px; margin-bottom: 0; border-right:1px solid #E1DFE0; background: #fff;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li i {display:block; text-align:center; margin-bottom:8px; font-size:30px;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li i.green {color:#B5BD8E;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li i.red {color:#DA3867;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li i.lightblue {color:#8ACDDD;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li i.orange {color:#FC6700;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li i.darkgray {color:#6A6665;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li i.royalblue {color:#405499;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li > a { margin-right: 0;color:#424242;padding:25px 10px;-webkit-border-radius:0;-moz-border-radius:0; border-radius:0; border:0; text-transform: uppercase;font-size:14px;font-weight:400;} .webmail-tabs .tabs-top-horizontal > .nav-tabs > li > a:hover,.webmail-tabs .tabs-top-horizontal > .nav-tabs > li > a:focus { border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;background:#fff;} .webmail-tabs .tabs-top-horizontal > .nav-tabs .active > a,.webmail-tabs .tabs-top-horizontal > .nav-tabs .active > a:hover,.webmail-tabs .tabs-top-horizontal > .nav-tabs .active > a:focus { border:0; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0; background:#fff; position: relative;} .webmail-tabs .tabs-top-horizontal > .nav-tabs .active > a:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(238, 238, 238, 0); border-top-color: #fff; border-width: 15px; margin-left: -15px;} .webmail-tabs .tab-content ul {list-style:none; margin:0; padding:0;} .webmail-tabs .tab-content ul li { padding:5px 20px 5px 0; border-bottom:1px solid #ccc;} .webmail-tabs .tab-content ul li:last-child {border-bottom:0;} .webmail-tabs .tab-content ul li i {margin-right:10px; color:#f67081;} /* Video Background */ #home-hero-section .home-hero-section-container { min-height: 600px; padding-bottom: 50px; position: relative; overflow:hidden;} #home-hero-section .home-hero-section-container:after {bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } #home-hero-section .home-hero-section-container .videocaption { left: 50%; top:50%; position: absolute; text-align: center; z-index: 2; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } #home-hero-section .home-hero-section-container .videocaption .videocaption-content {display:inline-block; padding:25px; background:#FC6700; background:rgb(98.8%,40.4%,0%); text-align: left; max-width:420px; } #home-hero-section .home-hero-section-container .videocaption .videocaption-content h2 { color: #fff; font-size: 3.2em; font-weight:100; } #home-hero-section .home-hero-section-container .videocaption .videocaption-content hr { opacity:0.1; } #home-hero-section .home-hero-section-container .videocaption .videocaption-content p { color: #fff; font-size: 15px; font-weight: 300; margin-top: 25px; } #home-hero-section video { width:100%; background-size: cover; position: absolute; top: 0; left: 0;} /* Add this attribute to the element that needs a tooltip */ [data-tooltip] { position: relative; z-index: 2; cursor: pointer; } /* Hide the tooltip content by default */ [data-tooltip]:before, [data-tooltip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } /* Position tooltip above the element */ [data-tooltip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip); text-align: center; font-size: 14px; line-height: 1.2; } /* Triangle hack to make tooltip look like a speech bubble */ [data-tooltip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } /* Show tooltip content on hover */ [data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } .pricing-tables { background: #E5ECAB; }