/*! * Start Bootstrap - Landing Page Bootstrap Theme (http://startbootstrap.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ @font-face { font-family: 'Montserrat-Regular'; src: url('../fonts/Montserrat/Montserrat-Regular.ttf'); } @font-face { font-family: 'Montserrat-Bold'; src: url('../fonts/Montserrat/Montserrat-Bold.ttf'); } @font-face { font-family: 'Montserrat-Medium'; src: url('../fonts/Montserrat/Montserrat-Medium.ttf'); } @font-face { font-family: 'Montserrat-Light'; src: url('../fonts/Montserrat/Montserrat-Light.ttf'); } body, html { width: 100%; height: 100%; } body, h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat-Regular', sans-serif; font-weight: 700; } /*blue light #5A74AF*/ /*blue dark #29427A*/ .topnav { font-size: 14px; } .lead { font-size: 18px; font-weight: 400; } .btn{ box-shadow: 0 1px 4px rgba(0, 0, 0, .6); } .fa-li.fa-lg { color: #29427A; margin-top: 6px; } .btn-transparent{ background: transparent; border: 2px solid #fff; color: #fff; transition: all .2s ease-in; } .btn-primary{ background: #29427A; border-color: #29427A; color: #fff; width: auto; } .btn-primary:hover{ background: rgba(41, 66, 122, 0.8); border-color: #29427A; } .btn-transparent:hover{ background: #fff; border: 2px solid #fff; color: #000; transition: all .2s ease-in; } .btn-info { color: #fff; background-color: #5A74AF; border-color: #5A74AF; } .btn-info:hover { color: #fff; background-color: rgba(90, 116, 175, 0.8); border-color: #5A74AF; } .btn-info:focus { color: #fff; background-color: rgba(90, 116, 175, 0.8); border-color: #5A74AF; } .btn-lg{ min-width: 180px; } #logoWhite{ display: none; } #logoBlack{ display: block; } .navbar{ transition: all .3s ease-in; } .navbar-default{ background: #fff; border: none; padding: 5px; } .navbar-transparent{ background: transparent; border: none; padding: 20px; } .navbar-transparent #logoBlack{ display: none; } .navbar-transparent #logoWhite{ display: block; width: 220px; } .navbar-default .navbar-nav>li>a { cursor: pointer; } .navbar-transparent .navbar-nav>li>a { color: #fff; cursor: pointer; } .navbar-transparent .navbar-nav>li>a:hover { color: #fff; } .navbar-default .btn-link { box-shadow: none; } .navbar-brand { padding: 10px 15px; cursor: pointer; } .navbar-right { margin-right: 10px; } .navbar-default .btn-link { color: #fff; } .navbar-default .btn-link:hover { color: #fff !important; } .nav-language{ position: relative; } .nav-language .select-language{ padding: 15px 10px; color: #777; } .navbar-transparent .nav-language .select-language{ color: #fff; } .nav-language .select-language span{ margin-left: 5px; margin-right: 5px; } .nav-language .drop-language{ position: absolute; top: 45px; left: -8px; background: #fff; width: 100px; height: 40px; padding: 9px 10px; -webkit-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1); -moz-box-shadow: -8px 13px 31px -8px rgba(77,77,77,1); box-shadow: -8px 13px 31px -8px rgba(77,77,77,1); display: none; z-index: 100; /* margin-left: 10px; */ text-align: center; border-radius: 4px; } .nav-language .drop-language a{ cursor: pointer; } .navbar-transparent .nav-language .drop-language{ background: transparent; border: 1px solid #fff; } .navbar-transparent .nav-language .drop-language a{ color: #fff; } .nav-language:hover .drop-language{ display: block; } .intro-header { height: 100vh; text-align: center; color: #fff; background: url(../img/configure.jpg) no-repeat center center; background-size: cover; position: relative; display: flex; justify-content: center; align-items: center; } .intro-header::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(90, 116, 175, 0.7); } .intro-header-1 { padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ padding-bottom: 50px; text-align: center; color: #fff; background: url(../img/configure.jpg) no-repeat center center; background-size: cover; position: relative; } .intro-header-1::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(90, 116, 175, 0.36); } .intro-header-2 { padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ padding-bottom: 50px; text-align: center; color: #f8f8f8; background: url(../img/banner-bg.jpg) no-repeat center center; background-size: cover; position: relative; } .intro-header-2::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(41, 66, 122, 0.59); } .intro-message { position: relative; width: 80%; margin: 0 auto; } .intro-signup { position: relative; padding-top: 20%; padding-bottom: 20%; } .intro-message > h1 { margin: 0; font-weight: 400; font-size: 6em; font-family: 'Montserrat-Medium'; } .intro-divider { width: 400px; border-top: 1px solid #f8f8f8; border-bottom: 1px solid rgba(0,0,0,0.2); } .intro-message > h3 { font-weight: 300; font-family: 'Montserrat-Light'; } .intro-pricing{ text-align: center; color: #fff; background: url(../img/pattern.jpg) no-repeat center center; background-size: cover; height: 70vh; max-height: 400px; display: flex; justify-content: center; align-items: center; position: relative; } .intro-pricing.success-pricing{ height: 100vh; max-height: 100vh; } .intro-pricing::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(90, 116, 175, 0.7); } .intro-pricing .intro-message .section-heading{ font-size: 45px; width: 80%; margin: 0 auto; } .split-section { padding: 70px 0; } .split-section .icon-section{ position: relative; min-height: 330px; } .split-section .icon-section i{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 216px; color: #5A74AF; } .split-section .split-text .lead{ font-size: 21px; color: #3a3a3a; } .split-section .split-text .split-title{ position: relative; margin-bottom: 25px; } .split-section .split-text .split-title h2{ font-family: 'Montserrat-Bold'; font-size: 50px; line-height: 50px; padding-bottom: 25px; color: #3a3a3a; letter-spacing: 3px; } .split-section.left{ background: -webkit-linear-gradient(#f0f4f7, #fff) no-repeat; background: -o-linear-gradient(#f0f4f7, #fff) no-repeat; background: linear-gradient(#f0f4f7, #fff) no-repeat; } .split-section.left .split-description{ width: 90%; margin-right: auto; } .split-section.right .split-description{ width: 90%; margin-left: auto; } .split-section.right .split-text { text-align: right; } .split-section.right .split-text ul{ text-align: left; } .split-section.left .split-text { text-align: left; } .split-section.right .split-text .split-title h2{ text-align: right; } .split-section.left .split-text .split-title h2{ text-align: left; } .split-section.right .split-text .split-title::before{ content: ""; position: absolute; bottom: 0; background: #29427A; height: 7px; width: 70px; right: 0; } .split-section.left .split-text .split-title::before{ content: ""; position: absolute; bottom: 0; background: #29427A; height: 7px; width: 70px; left: 0; } .pricing-section{ padding: 80px 0 !important; background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat; background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat; } .pricing-section .card{ width: 350px; margin: 0 auto; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); padding-bottom: 40px; border-radius: 7px; position: relative; } .pricing-section .card .img-beta{ position: absolute; top: 5px; width: 60px; left: 3px; } .pricing-section .card .title{ padding: 15px 40px; font-family: 'Montserrat-Medium'; } .pricing-section .card .title h3{ font-family: 'Montserrat-Medium'; } .pricing-section .card .price{ background: #5A74AF; padding: 22px; color: #fff; font-size: 32px; } .pricing-section .card .description{ padding: 12px; border-bottom: 1px solid rgba(128, 128, 128, 0.3); } .pricing-section .card .descriptions{ padding: 10px 30px; } .pricing-section .card .description p{ margin: 0; } .pricing-section .card .btn{ margin-top: 20px; } .pricing-section .text{ text-align: left; } .pricing-section .text .section-heading{ font-family: 'Montserrat-Bold'; font-size: 50px; line-height: 50px; padding-bottom: 25px; color: #3a3a3a; letter-spacing: 1px; position: relative; } .pricing-section .text .section-heading::before{ content: ""; position: absolute; bottom: 0; background: #29427A; height: 7px; width: 70px; left: 0; } .request-section{ background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699)); background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%); padding: 70px 0; } .request-section .title h2{ font-family: 'Montserrat-Bold'; font-size: 45px; margin: 0; color: #fff; padding-bottom: 25px; position: relative; } .request-section .title h2::before{ content: ""; position: absolute; bottom: 0; background: #fff; height: 7px; width: 70px; left: 0; } .request-section .form-beta{ width: 80%; margin: 0 auto; max-width: 350px; text-align: center; } .request-section .form-beta input{ height: 50px; } .request-section .form-beta input{ height: 50px; } .request-section .form-beta .btn-lg{ width: 100%; font-size: 16px; } .banner { padding: 100px 0; color: #fff; background: url(../img/banner-bg.jpg) no-repeat center center; background-size: cover; position: relative; } .full-contact-section{ padding-top: 90px; background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699)); background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%); background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%); } .contact-section { padding: 60px 0; color: #fff; background-attachment: fixed; } .contact-section .card{ text-align: center; width: 350px; margin: 0 auto; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); padding-bottom: 40px; border-radius: 7px; color: #4c4444; box-sizing: border-box; padding: 45px; margin-top: -115px; } .contact-section .card .social a{ color: #29427A; font-size: 45px; } .contact-section .card .subtitle h3{ font-size: 30px; margin-bottom: 23px; font-family: 'Montserrat-Medium'; } .contact-section .card .social a:hover{ text-decoration: none; } .contact-section .title { margin-right: auto; width: 80%; max-width: 468px; } .contact-section .title h2{ font-family: 'Montserrat-Bold'; font-size: 65px; margin: 0; color: #fff; padding-bottom: 25px; position: relative; text-align: right; } .contact-section .title h2::before{ content: ""; position: absolute; bottom: 0; background: #fff; height: 7px; width: 70px; right: 0; } /*Pricing page*/ .price-calc-section{ padding: 80px 40px !important; background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat; background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat; display: flex; } .price-calc-section .text{ width: 50%; } .price-calc-section .text .section-heading{ font-family: 'Montserrat-Bold'; font-size: 50px; line-height: 50px; padding-bottom: 25px; color: #3a3a3a; letter-spacing: 1px; position: relative; text-align: right; } .price-calc-section .text .description{ font-size: 20px; text-align: right; } .price-calc-section .text .section-heading::before{ content: ""; position: absolute; bottom: 0; background: #29427A; height: 7px; width: 70px; right: 0; } .price-calc-section .card{ width: 50%; margin: 0 auto; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); padding-bottom: 40px; border-radius: 7px; text-align: center; /* margin-right: auto; */ max-width: 400px; position: relative; } .price-calc-section .landing { width: 100% !important; } .no-padding{ padding:0 !important; } .price-calc-section .card .img-beta{ position: absolute; top: 5px; width: 60px; left: 3px; } .price-calc-section .card .title{ padding: 15px 40px; font-family: 'Montserrat-Medium'; } .price-calc-section .card .title h3{ font-family: 'Montserrat-Medium'; } .price-calc-section .card .price{ background: #5A74AF; padding: 22px; color: #fff; font-size: 32px; } .price-calc-section .card .description{ padding: 12px; border-bottom: 1px solid rgba(128, 128, 128, 0.3); position: relative; display: flex; justify-content: space-around; align-items: center; } .price-calc-section .card .description span { font-size: 16px; margin-left: 4px; margin-left: 0px; /* justify-self: start; */ width: 30%; text-align: left; } .price-calc-section .card .description input{ font-size: 20px; text-align: center; width: 60px; } .price-calc-section .card .description i{ color: #29427A; cursor: pointer; font-size: 24px; } .price-calc-section .card .description .left{ margin-right: 7px; } .price-calc-section .card .description .right{ margin-left: 7px; } .price-calc-section .card .descriptions{ padding: 10px 30px; } .price-calc-section .card .description p{ margin: 0; } .price-calc-section .card .btn{ margin-top: 20px; font-size: 20px; width: 200px; } .price-calc-section .card .select-configuration select{ outline: none; background: #fff; border-color: #d0d0d0; height: 40px; width: 200px; text-align: center; font-size: 16px; margin-left: 10px; } .price-calc-section .card .check-ip{ font-size: 18px; } .price-calc-section .card .description.input{ justify-content: center; } .price-calc-section .card .description.input label{ font-size: 15px; font-weight: 800; font-family: 'Montserrat-Regular'; margin-bottom: 0; width: 40px; } .price-calc-section .card .description.input input{ width: 200px; font-size: 14px; text-align: left; padding: 5px 10px; border-radius: 4px; border: 1px solid #d0d0d0; background: #fff; margin-left: 10px; } .price-calc-section .card .check-ip input[type=checkbox]{ font-size: 17px; margin: 0 8px; } @media(max-width:990px) { .pricing-section .text { text-align: center; margin-bottom: 40px; } .navbar-transparent .navbar-nav>li>a { font-size: 14px; } .pricing-section .text .section-heading::before { left: 50%; transform: translate(-50%, 0); } } @media(max-width:768px) { .intro-message { padding-bottom: 15%; } .intro-message > h1 { font-size: 3em; } ul.intro-social-buttons > li { display: block; margin-bottom: 20px; padding: 0; } .intro-pricing .intro-message .section-heading { font-size: 35px; width: 80%; margin: 0 auto; } .intro-pricing .intro-message { padding-bottom: 0; } ul.intro-social-buttons > li:last-child { margin-bottom: 0; } .intro-divider { width: 100%; } .navbar-transparent { background: #fff; border: none; padding: 5px; } .navbar-transparent #logoBlack{ display: block; } .navbar-transparent #logoWhite{ display: none; } .navbar-transparent .navbar-nav>li>a { font-size: 15px; color: #777; } .nav-language:hover{ height: 80px; } .navbar-transparent .nav-language .select-language { color: #777; } .navbar-transparent .nav-language .drop-language a { color: #777; } .navbar-transparent .nav-language .drop-language { background: #fff; /* border: 1px solid #fff; */ z-index: 100000; left: 9px; border: 1px solid rgba(119, 119, 119, 0.4); box-shadow: none; } .split-section { padding: 10px 0; } .split-section .icon-section i{ font-size: 120px; } .split-section .split-text .split-title h2{ font-size: 35px; line-height: 35px; } .pricing-section .text .section-heading{ font-size: 35px; line-height: 35px; } .pricing-section .text .section-heading::before { left: 50%; transform: translate(-50%, 0); } .request-section .title h2 { font-size: 35px; line-height: 35px; text-align: center; margin-bottom: 55px; } .request-section .title h2::before{ left: 50%; transform: translate(-50%, 0); } .contact-section .title { width: 300px; margin: 0 auto; } .contact-section .title h2{ font-size: 35px; line-height: 40px; text-align: center; margin-top: 35px; } .contact-section .title h2::before{ left: 50%; transform: translate(-50%, 0); } .intro-pricing .intro-message .section-heading { font-size: 30px; } .price-calc-section{ flex-direction: column; padding: 60px 10px !important; } .price-calc-section .card { width: 90%; } .price-calc-section .text { width: 80%; text-align: center; margin: 0 auto; margin-top: 20px; } .price-calc-section .text .section-heading { font-family: 'Montserrat-Bold'; font-size: 35px; line-height: 35px; padding-bottom: 15px; text-align: center; } .price-calc-section .text .section-heading::before { left: 50%; transform: translate(-50%, 0); } .price-calc-section .text .description { font-size: 18px; text-align: center; } .price-calc-section .card .description input { font-size: 17px; text-align: center; width: 60px; } } @media(max-width:540px) { .pricing-section .card { width: 90%; } .contact-section .card { width: 90%; } .form-beta { width: 90%; padding: 25px 10px; } .intro-message > h1 { font-size: 2em; } .price-calc-section .text .section-heading { font-size: 24px; line-height: 25px; } .price-calc-section .card .description span { font-size: 15px; margin-left: 0px; } } .network-name { text-transform: uppercase; font-size: 14px; font-weight: 400; letter-spacing: 2px; } .content-section-a { padding: 50px 0; background-color: #f8f8f8; } .content-section-b { padding: 50px 0; } .section-heading { margin-bottom: 30px; font-family: 'Montserrat-Medium'; } .section-heading-spacer { float: left; width: 200px; border-top: 3px solid #e7e7e7; } .btn-buynow { background-color: #607D8B; border-color: #607D8B; } @media(max-width:1199px) { ul.banner-social-buttons { float: left; margin-top: 15px; } } footer { padding: 50px 0; background-color: #f8f8f8; } p.copyright { margin: 15px 0 0; } a#forgotpassword { color: #ffffff; } .topnav a:focus { outline: none; outline-offset: 0; } .topnav .btn:focus { outline: none !important; outline-offset: 0; } .selectpicker { margin-top: 8px !important; } .content-404 h1 { margin: 0 0 15px; font-size: 200px; line-height: 1; font-weight: 700; color: #6db97c; } .btn-buynow { background-color: #607D8B; border-color: #607D8B; } .form-300{ width: 300px; } .error-message-box{ margin-top: 20px; }