From a7a3c1cc15a2858d68127d0a9d0f59548f502541 Mon Sep 17 00:00:00 2001 From: Arvind Tiwari Date: Thu, 18 Jan 2018 23:42:09 +0530 Subject: [PATCH] removed unused styles --- .../static/datacenterlight/css/common.css | 88 +- .../static/datacenterlight/css/hosting.css | 618 +++---- .../datacenterlight/css/landing-page.css | 1559 +++++++++-------- .../templates/datacenterlight/base.html | 2 - 4 files changed, 1101 insertions(+), 1166 deletions(-) diff --git a/datacenterlight/static/datacenterlight/css/common.css b/datacenterlight/static/datacenterlight/css/common.css index 9530d4a3..69c9a8e0 100644 --- a/datacenterlight/static/datacenterlight/css/common.css +++ b/datacenterlight/static/datacenterlight/css/common.css @@ -1,11 +1,22 @@ body, html { - width: 100%; - min-height: 100%; + width: 100%; + min-height: 100%; +} + +body, +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Lato', sans-serif; } /* bootstrap danger color override from #a94442 */ + .text-danger, .has-error .help-block, .has-error .control-label, @@ -23,74 +34,61 @@ html { a.list-group-item-danger, a.list-group-item-danger:hover, a.list-group-item-danger:focus, -.panel-danger > .panel-heading { - color: #eb4d5c; +.panel-danger>.panel-heading { + color: #eb4d5c; } -.alert-danger{ - background: rgba(235, 204, 209, 0.2); +.alert-danger { + background: rgba(235, 204, 209, 0.2); } .has-error .form-control, .has-error .form-control:focus, .has-error .form-control:active, .has-error .input-group-addon { - color: #eb4d5c; - border-color: #eb4d5c; + color: #eb4d5c; + border-color: #eb4d5c; } a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus { - background-color: #eb4d5c; - border-color: #eb4d5c; + background-color: #eb4d5c; + border-color: #eb4d5c; } -.panel-danger > .panel-heading .badge { - background-color: #eb4d5c; +.panel-danger>.panel-heading .badge { + background-color: #eb4d5c; } - -.checkmark { - display: inline-block; -} - -.checkmark:after { - /*Add another block-level blank space*/ - content: ''; - display: block; - /*Make it a small rectangle so the border will create an L-shape*/ - width: 25px; - height: 60px; - /*Add a white border on the bottom and left, creating that 'L' */ - border: solid #777; - border-width: 0 3px 3px 0; - /*Rotate the L 45 degrees to turn it into a checkmark*/ - transform: rotate(45deg); -} - - .topnav { - font-size: 14px; + font-size: 14px; } .navbar-default { - background: #fff; - padding: 5px; + background: #fff; + padding: 5px; } .navbar-brand { - padding: 10px 15px; -} - -@media (max-width: 767px) { - .navbar-brand { - padding: 10px; - } + padding: 10px; } @media (min-width: 768px) { - .navbar-right { - margin-right: 10px; - } + .navbar-right { + margin-right: 10px; + } + .navbar-brand { + padding-right: 15px; + padding-left: 15px; + } +} + +p.copyright { + margin: 15px 0 0; +} + +footer { + padding: 20px 0; + background-color: #f8f8f8; } \ No newline at end of file diff --git a/datacenterlight/static/datacenterlight/css/hosting.css b/datacenterlight/static/datacenterlight/css/hosting.css index 1c6d9f4e..0a63f609 100644 --- a/datacenterlight/static/datacenterlight/css/hosting.css +++ b/datacenterlight/static/datacenterlight/css/hosting.css @@ -1,121 +1,45 @@ -body, -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: 'Lato', sans-serif; -} - .topnav .navbar-fixed-top .navbar-collapse { - max-height: 740px; + max-height: 740px; } .navbar-default .navbar-header { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } .navbar-right .highlights-dropdown .dropdown-menu { - left: 0 !important; - min-width: 155px; - margin-left: 15px; - padding: 0 5px 8px !important; + left: 0 !important; + min-width: 155px; + margin-left: 15px; + padding: 0 5px 8px !important; } + @media(min-width: 768px) { - .navbar-default .navbar-nav>li>a, - .navbar-right .highlights-dropdown .dropdown-menu > li > a { - font-weight: 300; - } - .navbar-right .highlights-dropdown .dropdown-menu { - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.02); - border-width: 0 0 1px 0; - border-color: #e7e7e7; - box-shadow: -8px 14px 20px -5px rgba(77, 77, 77, 0.5); - } -} -.navbar-right .highlights-dropdown .dropdown-menu > li > a{ - font-size: 13px; - font-family: 'Lato', sans-serif; - padding: 1px 10px 1px 18px !important; - background: transparent; - color: #333; -} -.navbar-right .highlights-dropdown .dropdown-menu > li > a:hover, -.navbar-right .highlights-dropdown .dropdown-menu > li > a:focus, -.navbar-right .highlights-dropdown .dropdown-menu > li > a:active { - background: transparent; - text-decoration: underline !important; -} - -.lead { - font-size: 18px; - font-weight: 400; -} - -.intro-header { - 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/intro-bg.jpg) no-repeat center center; - background-size: cover; -} - -.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/configure.jpg) no-repeat center center; - background-size: cover; -} - -.intro-message { - position: relative; - padding-top: 20%; - padding-bottom: 20%; -} - -.intro-message > h1 { - margin: 0; - font-weight: 400; - font-size: 5em; -} - -.intro-divider { - width: 400px; - border-top: 1px solid #f8f8f8; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); -} - -.intro-message > h3 { + .navbar-default .navbar-nav>li>a, + .navbar-right .highlights-dropdown .dropdown-menu>li>a { font-weight: 300; + } + .navbar-right .highlights-dropdown .dropdown-menu { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.02); + border-width: 0 0 1px 0; + border-color: #e7e7e7; + box-shadow: -8px 14px 20px -5px rgba(77, 77, 77, 0.5); + } } -@media (max-width: 767px) { - .intro-message { - padding-bottom: 15%; - } +.navbar-right .highlights-dropdown .dropdown-menu>li>a { + font-size: 13px; + font-family: 'Lato', sans-serif; + padding: 1px 10px 1px 18px !important; + background: transparent; + color: #333; +} - .intro-message > h1 { - font-size: 3em; - } - - ul.intro-social-buttons > li { - display: block; - margin-bottom: 20px; - padding: 0; - } - - ul.intro-social-buttons > li:last-child { - margin-bottom: 0; - } - - .intro-divider { - width: 100%; - } +.navbar-right .highlights-dropdown .dropdown-menu>li>a:hover, +.navbar-right .highlights-dropdown .dropdown-menu>li>a:focus, +.navbar-right .highlights-dropdown .dropdown-menu>li>a:active { + background: transparent; + text-decoration: underline !important; } .un-icon { @@ -125,138 +49,92 @@ h6 { margin-top: -1px; } -.network-name { - text-transform: uppercase; - font-size: 14px; - font-weight: 400; - letter-spacing: 2px; -} - -.content-section-a { - padding: 50px 0; - background-color: #f8f8f8; -} - -.section-heading { - margin-bottom: 30px; -} - -/*------Auth section---------*/ -footer { - padding: 20px 0; - background-color: #f8f8f8; - right: 0; - bottom: 0; - left: 0; -} - -p.copyright { - margin: 14px 0 0; -} - -.content-404 h1 { - margin: 0 0 15px; - font-size: 200px; - line-height: 1; - font-weight: 700; - color: #6db97c; -} /***** DCL payment page **********/ + .dcl-order-container { - font-weight: 300; + font-weight: 300; } -.dcl-place-order-text{ - color: #808080; +.dcl-place-order-text { + color: #808080; } .card-warning-content { - font-weight: 300; - border: 1px solid #a1a1a1; - border-radius: 3px; - padding: 5px; - margin-bottom: 15px; + font-weight: 300; + border: 1px solid #a1a1a1; + border-radius: 3px; + padding: 5px; + margin-bottom: 15px; } + .card-warning-error { - border: 1px solid #EB4D5C; - color: #EB4D5C; + border: 1px solid #EB4D5C; + color: #EB4D5C; } .card-warning-addtional-margin { - margin-top: 15px; + margin-top: 15px; } .card-cvc-element label { - padding-left: 10px; + padding-left: 10px; } .card-element { - margin-bottom: 10px; + margin-bottom: 10px; } -.card-element label{ - width:100%; - margin-bottom:0px; +.card-element label { + width: 100%; + margin-bottom: 0px; } .my-input { - border-bottom: 1px solid #ccc; - } + border-bottom: 1px solid #ccc; +} .card-cvc-element .my-input { - padding-left: 10px; + padding-left: 10px; } #card-errors { - clear: both; - padding: 0 0 10px; - color: #eb4d5c; + clear: both; + padding: 0 0 10px; + color: #eb4d5c; } -.credit-card-goup{ - padding: 0; +.credit-card-goup { + padding: 0; } @media (max-width: 767px) { - .card-expiry-element { + .card-expiry-element { padding-right: 10px; - } + } - .card-cvc-element { + .card-cvc-element { padding-left: 10px; - } + } - #billing-form .form-control { + #billing-form .form-control { box-shadow: none !important; font-weight: 400; - } + } } @media (min-width: 1200px) { - .dcl-order-container { - width: 990px; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; - } -} - -@media only screen and (max-width: 1040px) and (min-width: 768px) { - .content-dashboard { - width: 96% !important; - } -} - -@media only screen and (max-width: 1330px) and (min-width: 1200px) { - .content-dashboard { - width: 100% !important; - } + .dcl-order-container { + width: 990px; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; + } } .footer-vm p.copyright { - margin-top: 4px; + margin-top: 4px; } .navbar-default .navbar-nav>.open>a, @@ -265,51 +143,72 @@ p.copyright { .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { - background-color: transparent; + background-color: transparent; } @media (max-width: 767px) { - .navbar-default .navbar-nav .open .dropdown-menu>.active>a, - .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, - .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover { - background-color: transparent; - } + .navbar-default .navbar-nav .open .dropdown-menu>.active>a, + .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, + .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover { + background-color: transparent; + } } -/* bootstrap input box-shadom disable */ + + +/* bootstrap input box-shadow disable */ + .has-error .form-control:focus, .has-error .form-control:active, .has-success .form-control:focus, .has-success .form-control:active { - box-shadow: inset 0 0 1px rgba(0,0,0,0.25); + box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.25); } -.content-dashboard{ - min-height: calc(100vh - 60px); - width: 80%; - margin: 0 auto; - max-width: 1120px; +.content-dashboard { + min-height: calc(100vh - 60px); + width: 80%; + margin: 0 auto; + max-width: 1120px; +} + +@media only screen and (max-width: 1040px) and (min-width: 768px) { + .content-dashboard { + width: 96% !important; + } +} + +@media only screen and (max-width: 1330px) and (min-width: 1200px) { + .content-dashboard { + width: 100% !important; + } } @media (max-width: 540px) { - select { - width: 280px; - } - .content-dashboard { - padding-left: 15px; - padding-right: 15px; - width: 100%; + select { + width: 280px; + } + .content-dashboard { + padding-left: 15px; + padding-right: 15px; + width: 100%; } } -.btn:focus, .btn:active:focus { - outline: 0; + +.btn:focus, +.btn:active:focus { + outline: 0; } + + + /***********Styles for Model********************/ + .modal-content { - border-radius: 0px; - font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; - width: 100%; + border-radius: 0px; + font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; + width: 100%; float: left; border-radius: 0; font-weight: 300; @@ -317,18 +216,22 @@ p.copyright { .modal-header { min-height: 30px; + border-bottom: 0px solid #e5e5e5; + padding: 0px 15px; + width: 100%; } .modal-header .close { - font-size: 75px; - font-weight: 300; - margin-top: 0; - position: absolute; - top: 0; - right: 11px; - z-index: 10; - line-height: 60px; + font-size: 75px; + font-weight: 300; + margin-top: 0; + position: absolute; + top: 0; + right: 11px; + z-index: 10; + line-height: 60px; } + .modal-header .close span { display: block; } @@ -337,75 +240,83 @@ p.copyright { outline: 0; } -.modal-header { - border-bottom: 0px solid #e5e5e5; - padding: 0px 15px; - width: 100%; - } .modal-body { - text-align: center; - width: 100%; - float: left; - padding: 0px 30px 15px 30px; + text-align: center; + width: 100%; + float: left; + padding: 0px 30px 15px 30px; } + .modal-body .modal-icon i { - font-size: 80px; - font-weight: 100; - color: #999; + font-size: 80px; + font-weight: 100; + color: #999; } + .modal-body .modal-icon { margin-bottom: 15px; } + .modal-title { - margin: 0; - line-height: 1.42857143; - font-size: 25px; - padding: 0; - font-weight: 300; -} -.modal-text { - padding-top: 5px; - font-size: 16px; -} -.modal-text p:not(:last-of-type){ - margin-bottom: 5px; + margin: 0; + line-height: 1.42857143; + font-size: 25px; + padding: 0; + font-weight: 300; } -.modal-title + .modal-footer { - margin-top: 5px; +.modal-text { + padding-top: 5px; + font-size: 16px; } + +.modal-text p:not(:last-of-type) { + margin-bottom: 5px; +} + +.modal-title+.modal-footer { + margin-top: 5px; +} + .modal-footer { - border-top: 0px solid #e5e5e5; - width: 100%; - float: left; - text-align: center; - padding: 15px 15px; + border-top: 0px solid #e5e5e5; + width: 100%; + float: left; + text-align: center; + padding: 15px 15px; } -@media (min-width: 1300px) { - .modal-dialog { - width: 40%; - } + +.modal { + text-align: center; } + +.modal-dialog { + display: inline-block; + text-align: left; + vertical-align: middle; + width: 40%; + margin: 15px auto; +} + @media (max-width: 1299px) { - .modal-dialog { + .modal-dialog { width: 43%; } } + @media (max-width: 900px) { - .modal-dialog { + .modal-dialog { width: 50%; } } + @media (max-width: 767px) { - .modal-dialog { + .modal-dialog { width: 95%; margin: 0 auto !important; } } - - -/* ========= */ @media(min-width: 320px) { .modal:before { content: ''; @@ -417,95 +328,92 @@ p.copyright { } -@media (min-width: 768px) { - .modal-dialog { - margin: 15px auto; - } -} -.modal { - text-align: center; -} - -.modal-dialog { - display: inline-block; - text-align: left; - vertical-align: middle; -} +/* ========= */ .btn-wide { - min-width: 100px; + min-width: 100px; } .choice-btn { - min-width: 110px; - background-color: #3C5480; - color: #fff; - border: 2px solid #3C5480; - padding: 4px 10px; - transition: 0.3s all ease-out; + min-width: 110px; + background-color: #3C5480; + color: #fff; + border: 2px solid #3C5480; + padding: 4px 10px; + transition: 0.3s all ease-out; } + .choice-btn:focus, .choice-btn:hover, .choice-btn:active { - color: #3C5480; - background-color: #fff; + color: #3C5480; + background-color: #fff; } @media (max-width: 767px) { - .choice-btn{ - margin-top: 15px; - } + .choice-btn { + margin-top: 15px; + } } -.control-label{ - font-weight: 300; - font-size: 20px; +.payment-container { + padding-top: 70px; + padding-bottom: 11%; } -.payment-container {padding-top:70px; padding-bottom: 11%;} - .last-p { margin-bottom: 0; } + .dcl-payment-section { - max-width: 391px; - margin: 0 auto 30px; - padding: 0 10px 30px; - border-bottom: 1px solid #edebeb; - height: 100%; + max-width: 391px; + margin: 0 auto 30px; + padding: 0 10px 30px; + border-bottom: 1px solid #edebeb; + height: 100%; } -.dcl-payment-section hr{ + +.dcl-payment-section hr { margin-top: 15px; margin-bottom: 15px; } + .dcl-payment-section .top-hr { margin-left: -10px; } + .dcl-payment-section h3 { font-weight: 600; } + .dcl-payment-section p { font-weight: 400; } + .dcl-payment-section .card-warning-content { padding: 8px 10px; font-weight: 300; } -.dcl-payment-order strong{ + +.dcl-payment-order strong { font-size: 17px; } + .dcl-payment-order p { font-weight: 300; } + .dcl-payment-section .form-group { margin-bottom: 10px; } + .dcl-payment-section .form-control { box-shadow: none; padding: 6px 12px; height: 32px; } + .dcl-payment-user { height: 100%; display: flex; @@ -558,14 +466,14 @@ p.copyright { } @media (max-width: 767px) { - .order-confirm-btn { - text-align: center; - margin-top: 10px; - } + .order-confirm-btn { + text-align: center; + margin-top: 10px; + } } #virtual_machine_create_form { - padding: 15px 0; + padding: 15px 0; } .btn-vm-contact { @@ -576,92 +484,93 @@ p.copyright { font-size: 12px; letter-spacing: 1.3px; } -.btn-vm-contact:hover, .btn-vm-contact:focus { + +.btn-vm-contact:hover, +.btn-vm-contact:focus { background: #fff; color: #a3c0e2; } -.no-padding { - padding: 0 !important; -} + /* hosting-order */ + .order-detail-container { - max-width: 600px; - margin: 100px auto 40px; - border: 1px solid #ccc; - padding: 30px 30px 20px; + max-width: 600px; + margin: 100px auto 40px; + border: 1px solid #ccc; + padding: 30px 30px 20px; } .order-detail-container .dashboard-title-thin { - margin-top: 0; - margin-left: -3px; + margin-top: 0; + margin-left: -3px; } .order-detail-container .dashboard-title-thin .un-icon { - margin-top: -6px; + margin-top: -6px; } .order-detail-container .dashboard-container-head { - position: relative; - padding: 0; - margin-bottom: 38px; + position: relative; + padding: 0; + margin-bottom: 38px; } .order-detail-container .order-details { - margin-bottom: 15px; + margin-bottom: 15px; } .order-detail-container .order-details strong { - color: #595959; + color: #595959; } .order-detail-container h4 { - font-size: 16px; - font-weight: bold; - margin-bottom: 10px; + font-size: 16px; + font-weight: bold; + margin-bottom: 10px; } .order-detail-container p { - margin-bottom: 5px; - color: #595959; + margin-bottom: 5px; + color: #595959; } .order-detail-container hr { - margin: 15px 0; + margin: 15px 0; } @media (max-width: 767px) { - .order-detail-container { - padding: 15px; - } - .order-confirm-btn { - text-align: center; - margin-top: 10px; - } - .order-detail-container .dashboard-container-options { - position: absolute; - top: 4px; - right: -4px; - } - .order-detail-container .dashboard-container-options .svg-img { - height: 16px; - width: 16px; - } + .order-detail-container { + padding: 15px; + } + .order-confirm-btn { + text-align: center; + margin-top: 10px; + } + .order-detail-container .dashboard-container-options { + position: absolute; + top: 4px; + right: -4px; + } + .order-detail-container .dashboard-container-options .svg-img { + height: 16px; + width: 16px; + } } .order_detail_footer { - font-size: 9px; - letter-spacing: 1px; - color: #333333; + font-size: 9px; + letter-spacing: 1px; + color: #333333; } .order_detail_footer strong { - font-size: 11px; + font-size: 11px; } #virtual_machine_create_form { - padding: 15px 0; + padding: 15px 0; } .dashboard-title-thin { @@ -688,12 +597,11 @@ p.copyright { } } - .locale_date { opacity: 0; } -.locale_date.done{ +.locale_date.done { opacity: 1; } @@ -705,7 +613,9 @@ p.copyright { font-size: 12px; letter-spacing: 1.3px; } -.btn-vm-back:hover, .btn-vm-back:focus { + +.btn-vm-back:hover, +.btn-vm-back:focus { color: #fff; background: #8da4c0; border-color: #8da4c0; diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index e8943b0f..a00a41fc 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -4,1292 +4,1321 @@ h2, h3, h4, h5, -h6 { - font-family: 'Lato', sans-serif; - font-weight: 300; +h6, +button, +input, +optgroup, +select, +textarea { + font-weight: 300; } -button, input, optgroup, select, textarea { - font-weight: 300; -} /*blue light #5A74AF*/ + + /*blue dark #29427A*/ .lead { - font-size: 18px; + font-size: 18px; } @media (min-width: 768px) { - .lead-right { - text-align: right; - } + .lead-right { + text-align: right; + } } .btn { - box-shadow: 0 1px 4px rgba(0, 0, 0, .6); + box-shadow: 0 1px 4px rgba(0, 0, 0, .6); } .fa-li.fa-lg { - color: #29427A; - margin-top: 6px; + color: #29427A; + margin-top: 6px; } .btn-transparent { - background: transparent; - border: 2px solid #fff; - color: #fff; - transition: all .2s ease-in; + background: transparent; + border: 2px solid #fff; + color: #fff; + transition: all .2s ease-in; } .btn-primary { - background: #29427A; - border-color: #29427A; - color: #fff; - width: auto; + background: #29427A; + border-color: #29427A; + color: #fff; + width: auto; } .btn-primary:hover { - background: rgba(41, 66, 122, 0.8); - border-color: #29427A; + 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; + background: #fff; + border: 2px solid #fff; + color: #000; + transition: all .2s ease-in; } .btn-lg { - min-width: 180px; + min-width: 180px; } #logoWhite { - display: none; + display: none; } #logoBlack { - display: block; + display: block; } .navbar { - transition: all .3s ease-in; + transition: all .3s ease-in; } .navbar-transparent { - background: transparent; - border: none; - padding: 20px; + background: transparent; + border: none; + padding: 20px; } .navbar-transparent #logoBlack { - display: none; + display: none; } .navbar-transparent #logoWhite { - display: block; - width: 220px; + display: block; + width: 220px; } .navbar-default .navbar-nav>li>a { - cursor: pointer; + cursor: pointer; } .navbar-transparent .navbar-nav>li>a { - color: #fff; - cursor: pointer; + color: #fff; + cursor: pointer; } @media (max-width: 767px) { - .navbar-default .navbar-nav>li>a, - .navbar-transparent .navbar-nav>li>a { - font-weight: 400; - } + .navbar-default .navbar-nav>li>a, + .navbar-transparent .navbar-nav>li>a { + font-weight: 400; + } } .navbar-transparent .navbar-nav>li>a:hover { - color: #fff; + color: #fff; } .navbar-transparent .navbar-nav>li>a:focus, .navbar-transparent .navbar-nav>li>a:hover { - color: #fff; - background-color: transparent; + color: #fff; + background-color: transparent; } .navbar-transparent .navbar-nav>li>.on-hover-border { - transition: all 0.3s linear; - box-shadow: none; + transition: all 0.3s linear; + box-shadow: none; } + .navbar-transparent .navbar-nav>li>.on-hover-border:hover { - box-shadow: 0 0 0 1px #eee; - border-radius: 5px; + box-shadow: 0 0 0 1px #eee; + border-radius: 5px; } .nav-language { - position: relative; + position: relative; } .nav-language .select-language { - padding: 15px 10px; - color: #777; + padding: 15px 10px; + color: #777; } .navbar-transparent .nav-language .select-language { - color: #fff; + color: #fff; } .nav-language .select-language span { - margin-left: 5px; - margin-right: 5px; - font-weight: normal; -} -.nav-language .drop-language{ - top: 45px; - left: auto !important; - width: 100px; - min-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); - z-index: 100; - text-align: center; - border-radius: 4px; + margin-left: 5px; + margin-right: 5px; + font-weight: normal; } -.nav-language .open .drop-language{ - width: 100px; - min-width: 100px; +.nav-language .drop-language { + top: 45px; + left: auto !important; + width: 100px; + min-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); + z-index: 100; + text-align: center; + border-radius: 4px; } -.nav-language .drop-language a{ - cursor: pointer; - padding: 5px 10px !important; +.nav-language .open .drop-language { + width: 100px; + min-width: 100px; } +.nav-language .drop-language a { + cursor: pointer; + padding: 5px 10px !important; +} + + /* Show the dropdown menu on hover */ + @media (min-width: 769px) { - .nav-language .dropdown:hover .dropdown-menu { - display: block; - } -} -@media (max-width: 767px){ - .nav-language .open .dropdown-menu>li>a { - line-height: 1.42857143; - } + .nav-language .dropdown:hover .dropdown-menu { + display: block; + } } -.navbar-transparent .nav-language .drop-language{ - background: transparent; - border: 1px solid #fff; +@media (max-width: 767px) { + .nav-language .open .dropdown-menu>li>a { + line-height: 1.42857143; + } +} + +.navbar-transparent .nav-language .drop-language { + background: transparent; + border: 1px solid #fff; } .navbar-transparent .nav-language .drop-language a { - color: #fff; - padding: 5px 10px !important; + color: #fff; + padding: 5px 10px !important; } .intro-header { - min-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; + min-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(38, 59, 107, 0.7); + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(38, 59, 107, 0.7); } .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; - color: #f8f8f8; - background: url(../img/pattern.jpg) no-repeat center center; - background-size: cover; - position: relative; + 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; + color: #f8f8f8; + background: url(../img/pattern.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); + 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; + position: relative; + width: 80%; + margin: 0 auto; } .intro-message>h1 { - margin: 0; - font-size: 6em; + margin: 0; + font-size: 6em; } .intro-divider { - width: 400px; - border-top: 1px solid #f8f8f8; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + width: 400px; + border-top: 1px solid #f8f8f8; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .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; + 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; + 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); + 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; + font-size: 45px; + width: 80%; + margin: 0 auto; } .split-section { - padding: 70px 0; + padding: 70px 0; } .split-section .icon-section { - position: relative; - min-height: 330px; + 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; + 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; - font-weight: 300 !important; + font-size: 21px; + color: #3a3a3a; + font-weight: 300 !important; } .new-lead { - font-weight: 300 !important; - font-size: 21px !important; + font-weight: 300 !important; + font-size: 21px !important; } -.split-section .split-text .split-title{ - position: relative; - margin-bottom: 25px; +.split-section .split-text .split-title { + position: relative; + margin-bottom: 25px; } .split-section .split-text .split-title h2 { - font-size: 50px; - line-height: 50px; - padding-bottom: 25px; - color: #3a3a3a; - letter-spacing: 3px; + 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; + 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; + width: 90%; + margin-right: auto; } .split-section.right .split-description { - width: 90%; - margin-left: auto; + width: 90%; + margin-left: auto; } .split-section.right .split-description.title p { - font-size: 27px; - margin-bottom: 10px; - text-align: left; + font-size: 27px; + margin-bottom: 10px; + text-align: left; } .split-section.right .split-text { - text-align: right; + text-align: right; } .split-section.right .split-text ul { - text-align: left; + text-align: left; } .split-section.left .split-text { - text-align: left; + text-align: left; } .split-section.right .split-text .split-title h2 { - text-align: right; + text-align: right; } .split-section.left .split-text .split-title h2 { - text-align: left; + text-align: left; } .split-section.right .split-text .split-title::before { - content: ""; - position: absolute; - bottom: 0; - background: #29427A; - height: 7px; - width: 70px; - right: 0; + 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; + 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; + 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; + 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; + position: absolute; + top: 5px; + width: 60px; + left: 3px; } .pricing-section .card .title { - padding: 15px 40px; + padding: 15px 40px; } .pricing-section .card .title h3 {} .pricing-section .card .price { - background: #5A74AF; - padding: 22px; - color: #fff; - font-size: 32px; + background: #5A74AF; + padding: 22px; + color: #fff; + font-size: 32px; } .pricing-section .card .description { - padding: 12px; + padding: 12px; } .pricing-section .card .descriptions { - padding: 10px 30px; + padding: 10px 30px; } .pricing-section .card .description p { - margin: 0; + margin: 0; } .pricing-section .card .btn { - margin-top: 20px; + margin-top: 20px; } .pricing-section .text { - text-align: left; + text-align: left; } .pricing-section .text .section-heading { - font-size: 48px; - line-height: 50px; - padding-bottom: 25px; - color: #3a3a3a; - letter-spacing: 1px; - position: relative; + font-size: 48px; + 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; + content: ""; + position: absolute; + bottom: 0; + background: #29427A; + height: 7px; + width: 70px; + left: 0; } .contact-section { - padding: 80px 0; - color: rgba(255,255,255,0.9); - background-attachment: fixed; + padding: 80px 0; + color: rgba(255, 255, 255, 0.9); + background-attachment: fixed; } .contact-section .modal { - color: #333; + color: #333; } .contact-details { - padding-left: 5px; + padding-left: 5px; } -.contact-section .description{ - font-size: 20px; +.contact-section .description { + font-size: 20px; } .contact-section .social a { - color: #fff; - font-size: 45px; + color: #fff; + font-size: 45px; } .contact-section .social .fa-facebook { - font-size: 40px; - background: #fff; - border-radius: 100%; - color: #425d89; - width: 40px; - text-align: center; - top: -2px; - position: relative; - left: 10px; + font-size: 40px; + background: #fff; + border-radius: 100%; + color: #425d89; + width: 40px; + text-align: center; + top: -2px; + position: relative; + left: 10px; } + .contact-section .social .fa-facebook:before { - font-size: 32px; - position: relative; - top: -1px; - left: -1px; + font-size: 32px; + position: relative; + top: -1px; + left: -1px; } .contact-section .social a:hover { - text-decoration: none; + text-decoration: none; } .contact-section .subtitle h3 { - font-size: 30px; - margin-bottom: 15px; + font-size: 30px; + margin-bottom: 15px; } .contact-section .contact-form-success { - font-size: 18px; - text-align: center; - background-color: rgba(0,0,0,0.2); - padding: 0 15px 35px; - margin-top: 25px; + font-size: 18px; + text-align: center; + background-color: rgba(0, 0, 0, 0.2); + padding: 0 15px 35px; + margin-top: 25px; } .contact-section .title h2 { - font-size: 65px; - margin: 0; - position: relative; + font-size: 65px; + margin: 0; + position: relative; } .contact-form .form-group { - border: 0; - margin-bottom: 20px; + border: 0; + margin-bottom: 20px; } .contact-form .form-group label { - letter-spacing: 0.6px; - font-weight: 400; + letter-spacing: 0.6px; + font-weight: 400; } .contact-form .with-errors ul { - margin-bottom: 0; - color: #ffc4ca; - text-align: left; - margin-left: 5px; - margin-top: 2px; + margin-bottom: 0; + color: #ffc4ca; + text-align: left; + margin-left: 5px; + margin-top: 2px; } .contact-form .btn { - min-width: 140px; - background: rgba(23, 23, 23, 0.18); - color: #fff; - border-radius: 4px; - border-width: 2px; - box-shadow: none; - letter-spacing: 2px; - border-color: #fff; + min-width: 140px; + background: rgba(23, 23, 23, 0.18); + color: #fff; + border-radius: 4px; + border-width: 2px; + box-shadow: none; + letter-spacing: 2px; + border-color: #fff; } .contact-form .btn.sending { - cursor: wait; + cursor: wait; } @keyframes sending { - 0% {content: '.';} - 50% {content: '..';} - 100% {content: '...';} + 0% { + content: '.'; + } + 50% { + content: '..'; + } + 100% { + content: '...'; + } } .contact-form .btn.sending:after { - content: '.'; - position: absolute; - display: inline-block; - text-align: left; - margin-left: 5px; - width: 20px; - animation: sending 1s linear infinite; + content: '.'; + position: absolute; + display: inline-block; + text-align: left; + margin-left: 5px; + width: 20px; + animation: sending 1s linear infinite; } .contact-form .btn:hover, .contact-form .btn:focus { - background: rgba(23, 23, 23, 0.28); - border-color: #fff; - box-shadow: none; - outline: 0; + background: rgba(23, 23, 23, 0.28); + border-color: #fff; + box-shadow: none; + outline: 0; } .contact-form .form-control { - box-shadow: none; - border-color: #ccc; + box-shadow: none; + border-color: #ccc; } .contact-form .form-error { - background: rgba(255,255,255,0.9); - color: #eb4d5c; - padding: 10px; - text-align: center; - margin-bottom: 20px; - border-radius: 5px; + background: rgba(255, 255, 255, 0.9); + color: #eb4d5c; + padding: 10px; + text-align: center; + margin-bottom: 20px; + border-radius: 5px; } .contact-form .has-error label { - color: #fff; + color: #fff; } .contact-form .has-error .form-control { - border: 2px solid #e8534b; - box-shadow: none; + border: 2px solid #e8534b; + box-shadow: none; } .contact-form .subtitle { - padding: 22px 0 15px; + padding: 22px 0 15px; } .contact-form textarea { - resize: none; + resize: none; } + /*Why DCL*/ .full-whydcl-sec { - color: #fff; - text-align: center; - 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%); + color: #fff; + text-align: center; + 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%); } .whydcl-header { - padding: 150px 0 150px 0; - text-align: center; - color: #f8f8f8; - background: url(../img/pattern.jpg) no-repeat center center; - background-size: cover; - position: relative; - background-attachment: fixed; + padding: 150px 0 150px 0; + text-align: center; + color: #f8f8f8; + background: url(../img/pattern.jpg) no-repeat center center; + background-size: cover; + position: relative; + background-attachment: fixed; } .whydcl-header::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: rgba(90, 116, 175, 0.85); - /*background: rgba(45,70,122,0.8);*/ + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(90, 116, 175, 0.85); + /*background: rgba(45,70,122,0.8);*/ } .single-heading h2 { - font-size: 65px; - margin: 0; - padding: 0; + font-size: 65px; + margin: 0; + padding: 0; } #tech_stack { - background: #fff; + background: #fff; } #tech_stack h3 { - font-size: 42px; - width: 70%; + font-size: 42px; + width: 70%; } hr.thick-divider { - border-top: 3px solid #eee !important; + border-top: 3px solid #eee !important; } .space { - padding: 50px 0; + padding: 50px 0; } tech-sub-sec h2 { - font-size: 45px; - line-height: 60px; - padding-bottom: 25px; - color: #3a3a3a; - letter-spacing: 1px; + font-size: 45px; + line-height: 60px; + padding-bottom: 25px; + color: #3a3a3a; + letter-spacing: 1px; } .logo-wrap { - text-align: center; - min-height: 140px; - padding: 20px 40px 30px 40px; + text-align: center; + min-height: 140px; + padding: 20px 40px 30px 40px; } .btm-space { - padding-bottom: 8px; + padding-bottom: 8px; } .btm-space-tayga { - padding-bottom: 12px; + padding-bottom: 12px; } .percent-text { - font-size: 50px; - color: #999; + font-size: 50px; + color: #999; } .tech-sub-sec h2 { - font-size: 40px; - line-height: 55px; + font-size: 40px; + line-height: 55px; } -.space-middle{ - padding: 45px 0; - display: inline-block; + +.space-middle { + padding: 45px 0; + display: inline-block; } + .ssdimg { - vertical-align: middle; - display: inline-block; + vertical-align: middle; + display: inline-block; } + @media (max-width: 768px) { - .ssdimg img { - width: 100px; - } + .ssdimg img { + width: 100px; + } } -.padding-vertical{ - padding: 30px 2px; + +.padding-vertical { + padding: 30px 2px; } .dropdown-menu { - border: 1px solid #fff; - -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 14px 20px -5px rgba(77, 77, 77, 0.5); - display: none; - text-align: center; - border-radius: 4px !important; - padding: 5px !important; + border: 1px solid #fff; + -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 14px 20px -5px rgba(77, 77, 77, 0.5); + display: none; + text-align: center; + border-radius: 4px !important; + padding: 5px !important; } .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { - background: transparent; - text-decoration: underline !important; + background: transparent; + text-decoration: underline !important; } .logo-wrap .logo-caption { - padding-top: 20px; - display: inline-block; - color: #999 !important; + padding-top: 20px; + display: inline-block; + color: #999 !important; } .logo-wrap-1 { - padding-top: 50px; + padding-top: 50px; } .dropdown-menu>li>a { - padding: 1px 10px !important; + padding: 1px 10px !important; } .dropdown-menu { - left: 0 !important; - min-width: 155px; - text-align: left; - margin-left: 15px; + left: 0 !important; + min-width: 155px; + text-align: left; + margin-left: 15px; } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { - background: transparent; + background: transparent; } + .navbar-transparent .navbar-nav>.open>a, .navbar-transparent .navbar-nav>.open>a:focus, .navbar-transparent .navbar-nav>.open>a:hover { - color: #fff; + color: #fff; } .dropdown-menu>li>a { - font-size: 13px; + font-size: 13px; } @media (min-width: 768px) { - .dropdown-menu>li>a { - font-weight: 300; - } + .dropdown-menu>li>a { + font-weight: 300; + } } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { - background: #2D457A; - color: #fff; - border-radius: 6px; + background: #2D457A; + color: #fff; + border-radius: 6px; } + /*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; + 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%; + width: 50%; } .price-calc-section .text .section-heading { - font-size: 48px; - line-height: 48px; - padding-bottom: 27px; - color: #3a3a3a; - letter-spacing: 1px; - position: relative; - text-align: right; + font-size: 48px; + line-height: 48px; + padding-bottom: 27px; + color: #3a3a3a; + letter-spacing: 1px; + position: relative; + text-align: right; } .price-calc-section .text .description { - font-size: 20px; - text-align: right; + 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; + 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; - max-width: 400px; - position: relative; + 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; + max-width: 400px; + position: relative; } .price-calc-section .landing { - width: 100% !important; + width: 100% !important; } .no-padding { - padding: 0 !important; + padding: 0 !important; } .price-calc-section .card .img-beta { - position: absolute; - top: 5px; - width: 60px; - left: 3px; + position: absolute; + top: 5px; + width: 60px; + left: 3px; } .price-calc-section .card .title { - padding: 15px 40px; + padding: 15px 40px; } .price-calc-section .card .title h3 { - font-weight: normal; + font-weight: normal; } .price-calc-section .card .price { - background: #5A74AF; - padding: 22px; - color: #fff; - font-size: 32px; + background: #5A74AF; + padding: 22px; + color: #fff; + font-size: 32px; } .price-calc-section .card .price .price-text { - font-size: 14px; + font-size: 14px; } .price-calc-section .card .description { - padding: 12px; - position: relative; - display: flex; - justify-content: space-around !important; - align-items: center !important; + padding: 12px; + position: relative; + display: flex; + justify-content: space-around !important; + align-items: center !important; } .price-calc-section .card .description span { - font-size: 16px; - margin-left: 4px; - margin-left: 0px; - width: 30%; - text-align: left; + font-size: 16px; + margin-left: 4px; + margin-left: 0px; + width: 30%; + text-align: left; } -.price-calc-section .card .description .select-number{ - font-size: 20px; - text-align: center; - width: 85px; +.price-calc-section .card .description .select-number { + font-size: 20px; + text-align: center; + width: 85px; } .price-calc-section .card .description i { - color: #29427A; - cursor: pointer; - font-size: 24px; + color: #29427A; + cursor: pointer; + font-size: 24px; } .price-calc-section .card .description .left { - margin-right: 7px; + margin-right: 7px; } .price-calc-section .card .description .right { - margin-left: 7px; + margin-left: 7px; } .price-calc-section .card .descriptions { - padding: 10px 30px; + padding: 10px 30px; } .price-calc-section .card .description p { - margin: 0; + margin: 0; } .price-calc-section .card .btn { - margin-top: 20px; - font-size: 20px; - width: 200px; - border: none; + margin-top: 20px; + font-size: 20px; + width: 200px; + border: none; } .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; + 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; + font-size: 18px; } .price-calc-section .card .justify-center { - justify-content: center !important; + justify-content: center !important; } .price-calc-section .card .description.input label { - font-size: 15px; - font-weight: 700; - margin-bottom: 0; - width: 40px; + font-size: 15px; + font-weight: 700; + margin-bottom: 0; + width: 40px; } + /*Changed class****.price-calc-section .card .description.input input*/ .price-calc-section .card .description input { - width: 200px; - font-size: 14px; - text-align: left; - padding: 5px 10px; - border-radius: 4px; - border: 1px solid #d0d0d0; - background: #fff; - margin-left: 10px; + 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; + font-size: 17px; + margin: 0 8px; } .help-block.with-errors { - text-align: center; - margin: 0; - padding: 0; + text-align: center; + margin: 0; + padding: 0; } .form-group { - margin: 0; - border-bottom: 1px solid rgba(128, 128, 128, 0.3); + margin: 0; + border-bottom: 1px solid rgba(128, 128, 128, 0.3); } @media(max-width:767px) { - #tech_stack h3 { - font-size: 30px; - line-height: 40px; - width: 100%; - } - .navbar-nav .open .dropdown-menu { + #tech_stack h3 { + font-size: 30px; + line-height: 40px; + width: 100%; + } + .navbar-nav .open .dropdown-menu { text-align: left; font-size: 12px; - } + } - .navbar-default .navbar-nav>.open>a, - .navbar-default .navbar-nav>.open>a:focus, - .navbar-default .navbar-nav>.open>a:hover { - background: transparent; - color: #777 !important; - } + .navbar-default .navbar-nav>.open>a, + .navbar-default .navbar-nav>.open>a:focus, + .navbar-default .navbar-nav>.open>a:hover { + background: transparent; + color: #777 !important; + } } @media screen and (min-device-width: 480px) and (max-device-width: 767px) { - .logo-wrap { - width: 50%; - padding: 15px 30px !important; - min-height: 179px; - } - .logo-wrap-1 { - width: 50%; - padding: 15px 30px !important; - min-height: 179px; - } + .logo-wrap { + width: 50%; + padding: 15px 30px !important; + min-height: 179px; + } + .logo-wrap-1 { + width: 50%; + padding: 15px 30px !important; + min-height: 179px; + } } @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); - } + .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) { - .single-heading h2 { - font-size: 50px; - } - .logo-wrap { - padding: 10px; - } - .navbar-transparent li a { - color: #777 !important; - } - .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: 14px; - color: #777; - } - .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; - z-index: 100000; - left: 9px; - border: 1px solid rgba(119, 119, 119, 0.4); - box-shadow: none; - } - .navbar-default .nav-language .drop-language { - background: #fff; - z-index: 100000; - left: 9px; - border: 1px solid rgba(119, 119, 119, 0.4); - box-shadow: none; - } - .navbar-default .nav-language .select-language { - color: #777; - } - .navbar-default .nav-language .drop-language a { - color: #777; - } - .navbar-transparent .navbar-nav>li>a:focus, - .navbar-transparent .navbar-nav>li>a:hover { - color: #333; - background-color: transparent; - } - .navbar-default .navbar-nav>li>a:focus, - .navbar-default .navbar-nav>li>a:hover { - color: #333; - background-color: transparent; - } - .split-section { - padding: 10px 0; - } - .split-section .icon-section { - min-height: 160px; - } - .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); - } - .contact-section .title { - width: 300px; - margin: 0 auto; - } - .contact-section .title h2 { - font-size: 45px; - line-height: 40px; - margin-top: 35px; - } - .contact-section .title h2::before { - left: 50%; - transform: translate(-50%, 0); - } - .contact-section .card .social a { - color: #29427A; - font-size: 30px; - } - .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-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 .select-number { - font-size: 17px; - text-align: center; - width: 60px; - } + .single-heading h2 { + font-size: 50px; + } + .logo-wrap { + padding: 10px; + } + .navbar-transparent li a { + color: #777 !important; + } + .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: 14px; + color: #777; + } + .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; + z-index: 100000; + left: 9px; + border: 1px solid rgba(119, 119, 119, 0.4); + box-shadow: none; + } + .navbar-default .nav-language .drop-language { + background: #fff; + z-index: 100000; + left: 9px; + border: 1px solid rgba(119, 119, 119, 0.4); + box-shadow: none; + } + .navbar-default .nav-language .select-language { + color: #777; + } + .navbar-default .nav-language .drop-language a { + color: #777; + } + .navbar-transparent .navbar-nav>li>a:focus, + .navbar-transparent .navbar-nav>li>a:hover { + color: #333; + background-color: transparent; + } + .navbar-default .navbar-nav>li>a:focus, + .navbar-default .navbar-nav>li>a:hover { + color: #333; + background-color: transparent; + } + .split-section { + padding: 10px 0; + } + .split-section .icon-section { + min-height: 160px; + } + .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); + } + .contact-section .title { + width: 300px; + margin: 0 auto; + } + .contact-section .title h2 { + font-size: 45px; + line-height: 40px; + margin-top: 35px; + } + .contact-section .title h2::before { + left: 50%; + transform: translate(-50%, 0); + } + .contact-section .card .social a { + color: #29427A; + font-size: 30px; + } + .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-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 .select-number { + font-size: 17px; + text-align: center; + width: 60px; + } } @media(max-width:540px) { - .logo-wrap { - padding: 30px; - } - .percent-text { - font-weight: normal; - font-size: 37px; - } - .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; - } + .logo-wrap { + padding: 30px; + } + .percent-text { + font-weight: normal; + font-size: 37px; + } + .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: 300; - letter-spacing: 2px; - line-height: 24px; - display: block; + text-transform: uppercase; + font-size: 14px; + font-weight: 300; + letter-spacing: 2px; + line-height: 24px; + display: block; } .content-section-a { - padding: 50px 0; - background-color: #f8f8f8; + padding: 50px 0; + background-color: #f8f8f8; } .section-heading { - margin-bottom: 30px; + margin-bottom: 30px; } footer { - padding: 50px 20px; - background-color: #f8f8f8; -} - -p.copyright { - margin: 15px 0 0; + padding: 50px 20px; + background-color: #f8f8f8; } .topnav a:focus { - outline: none; - outline-offset: 0; + outline: none; + outline-offset: 0; } .topnav .btn:focus { - outline: none !important; - outline-offset: 0; -} - -.content-404 h1 { - margin: 0 0 15px; - font-size: 200px; - line-height: 1; - font-weight: 700; - color: #6db97c; + outline: none !important; + outline-offset: 0; } .flex-row-rev { - margin-top: 25px; + margin-top: 25px; } @media (min-width: 768px) { - .flex-row { - display: flex; - align-items: center; - justify-content: space-between; - } - .flex-row .percent-text { - flex-shrink : 0; - padding: 0 15px; - } - .flex-row .percent-text, - .flex-row .desc-text { - max-width: 710px; - } - .flex-row-rev .percent-text { - order: 2; - } - .flex-row-rev { - margin-bottom: 25px; - } + .flex-row { + display: flex; + align-items: center; + justify-content: space-between; + } + .flex-row .percent-text { + flex-shrink: 0; + padding: 0 15px; + } + .flex-row .percent-text, + .flex-row .desc-text { + max-width: 710px; + } + .flex-row-rev .percent-text { + order: 2; + } + .flex-row-rev { + margin-bottom: 25px; + } } .w380 { - max-width: 380px !important; + max-width: 380px !important; +} + +.checkmark { + display: inline-block; +} + +.checkmark:after { + /*Add another block-level blank space*/ + content: ''; + display: block; + /*Make it a small rectangle so the border will create an L-shape*/ + width: 25px; + height: 60px; + /*Add a white border on the bottom and left, creating that 'L' */ + border: solid #777; + border-width: 0 3px 3px 0; + /*Rotate the L 45 degrees to turn it into a checkmark*/ + transform: rotate(45deg); } \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/base.html b/datacenterlight/templates/datacenterlight/base.html index ef3e2894..5c073155 100644 --- a/datacenterlight/templates/datacenterlight/base.html +++ b/datacenterlight/templates/datacenterlight/base.html @@ -55,9 +55,7 @@ - -