/* Template Name : Recruit Plus Template By : Konnect Code Author Website : http://www.konnectplugins.com/ Fonts: Credit By Google fonts */ /* Table of Content ================================================== 1. Fonts 2. Common css 3. Loader CSS 4. Pagination 5. Careers/Jobs 6. Top Bar CSS 7. Navigation + Logo CSS 8. Plain Banner/ Flat Banner Home page 9. inner page CSS 10. Our Team /Team Member 11. Services CSS 12. Side bar 13. Blog/News CSS 14. Buttons Css 15. Testimonials CSS 16. Contact Us CSS 17. Footer CSS 18. Google Map CSS 19. Responsive Design CSS ================================================ 1. Fonts - Hind and Poppins (Credits: Google Fonts) ================================================ */ @import url(https://fonts.googleapis.com/css?family=Hind:300,400,700|Arimo:400,700); /* ================================================ 2. Common Css ================================================ */ * { position: relative; outline: 0!important; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; transition: all ease-in-out .3s; -webkit-transition: all ease-in-out .3s; } :before, :after { transition: all ease-in-out .3s; -webkit-transition: all ease-in-out .3s; } html, body { height: 100%; width: 100%; } body { font-family: 'Hind', sans-serif; color: #444444; webkit-tap-highlight-color: #222222; } ::-moz-selection { color: white; text-shadow: none; background: #222222; } ::selection { color: white; text-shadow: none; background: #222222; } img::selection { color: white; background: transparent; } img::-moz-selection { color: white; background: transparent; } hr { border-color: #0A84CB; border-width: 3px; max-width: 50px; } hr.light { border-color: white; } a { -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; color: #0A84CB; } a:hover, a:focus { color: #6c6c6c; } h1, h2, h3, h4, h5, h6 { font-family: 'Arimo', sans-serif; font-weight: 400; color: #000000; } .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 { color: #ffffff; } .services h4 { font-weight: 400; color: #0A84CB; } p { font-size: 16px; line-height: 1.5; margin-bottom: 20px; letter-spacing: 0.2px; } p.konnect-para::first-letter { font-size: 200%; color: #0A84CB; } .justify { text-align: justify; } .konnect-section-heading { margin-top: 0; background: rgba(10,132,203,0.8); color: #fff; width: auto; padding: 10px; text-align: left; box-shadow: 0px 10px rgba(0,0,0,0.7); } .color-default { color: #0A84CB; } .konnect-well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #ffffff; -webkit-box-shadow: 5px 5px rgba(108, 184,92,1); box-shadow: 5px 5px #f1f1f1; border: 1px solid #f1f1f1; } .konnect-list li { list-style: none; font-size: 17px; line-height: 31px; font-weight: 300; padding-left: 3px; } .konnect-list li:before { content: "\f1db"; font-family: FontAwesome; font-style: normal; text-decoration: inherit; color: #7FAAFF; margin-right: 6px; font-weight: bold; font-size: 14px; } .konnect-space { min-height: 20px; } .bg-primary { background-color: #0A84CB; } .bg-dark { background-color: #222222; color: white; } .text-faded { color: rgba(255, 255, 255, 0.7); } .text-primary { color: #0A84CB; } .text-white { color: #ffffff; } .text-dark { color: #333333; } .text-center span{ display:block; } section{ padding: 60px 0; } aside { padding: 25px 0; } .konnect-clients img{ box-shadow: 0px 0px 5px #d2d2d2; } .footer-contact { padding: 40px 0; } .footer-contact p { margin: 20px 0 0; } .navbar-fixed-top { position: static; } .navbar-fixed-top.affix { position: fixed; } .no-padding { padding: 0; } .icon-border { border: 1px solid #0A84CB; padding: 20px; border-radius: 50%; background: rgba(10,132,203,0.2); } .services img { width: 58px; margin-bottom: 10px; } .img-border { box-shadow: 5px 5px 3px #ddd; } .container-fluid { padding-right: 0; padding-left: 0; } /* margin classes */ .margin-0 { margin: 0px; } .margin-top-20 { margin-top: 20px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-50 { margin-bottom: 50px; } .margin-top-50 { margin-top: 50px; } /*dark theme*/ .dark-bg { position: relative; width: 100%; min-height: auto; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-position: center; background-image: url('../img/dark-bg.jpg'); text-align: center; color: white; } .light-bg { background: #f9f9f9; box-shadow: 0px 0px 5px #d2d2d2; } .light-bg p { color: #000000; font-weight: 400; } p a { line-height: 1; } .section-heading { margin-top: 0; font-weight: 400; } .section-heading span { color: #0A84CB; font-weight: 400; } .hidden { display: none; } .fixed-right-bottom { min-width: 200px; } .img-shadow { border: 1px solid #f1f1f1; padding: 20px 10px; box-shadow: 5px 6px 9px #f1f1f1; } /*Table*/ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 20px 10px; } .table > tbody > tr > td { border-top: 1px solid #0A84CB; } /* back to top*/ .back-to-top { background: #0F0F0F; cursor: pointer; position: fixed; bottom: 20px; right: 20px; display: none; z-index: 9; padding: 5px 20px; font-size: 35px; color: #ffffff; } .back-to-top:hover { background: #444444; } .container.job-single{ overflow-x:hidden; } /* ================================================ 3. Loader ================================================ */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { background: #fff; position: fixed; z-index: 99999; width: 100%; height: 100%; } .loader { border: 3px solid #f3f3f3; border-radius: 50%; border-top: 3px solid #0A84CB; width: 50px; height: 50px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; position: absolute; top: 45%; left: 45%; } /* ================================================ 4. Pagination ================================================ */ .pagination { margin: 25px 0 0; } .pagination > li:first-child > a, .pagination > li:first-child > span { border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .pagination > li:last-child > a, .pagination > li:last-child > span { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .pagination > li > a, .pagination > li > span { padding: 5px 20px; color: #0A84CB; background-color: #fff; border: 1px solid #0A84CB; margin: 0 1px; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { z-index: 2; color: #ffffff; background-color: #0A84CB; border-color: #0A84CB; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 3; color: #fff; cursor: default; background-color: #0A84CB; border-color: #0A84CB; } /* ================================================ 5. Careers/Jobs ================================================ */ .job-single { border-bottom: 1px solid #f5f5f5; clear: both; float: left; padding: 20px 0; } .job-single p{ margin-bottom: 0; } .job-single-last { padding: 20px 0; border-bottom: 0px solid #ccc; } .job-single-header { background: #0a84cb; border: 1px solid #0a84cb; color: #ffffff; float: left; padding: 15px 20px; width: 100%; } h4.job-title { color: #0A84CB; margin-top: 0; font-weight: 400; margin-bottom: 20px; } span.job-date { padding: 5px 5px 1px 5px; color: #444444; border: 1px solid #0A84CB; } /* ================================================ 6. Top Bar CSS ================================================ */ div.konnect-info { border-bottom: 1px solid #f1f1f1; padding: 7px 0; transition: all 1s ease; background: #0A84CB; color: #FFFFFF; letter-spacing: 0.9px; } nav#mainNav { padding: 10px 0px; } .konnect-info a { color: white; } .konnect-info .fa { margin: 0 3px; } .konnect-info ul { margin-bottom: 0px; } .konnect-info a:hover { color: #fafafa; text-decoration: none; } .konnect-info img { width: 17px; margin: 0 3px; } .konnect-info ol, ul { padding: 0px; } ol, ul { margin:0px; } .konnect-info li { float: left; list-style: none; } .konnect-info li.li-last { margin-left: 15px; } .konnect-portfolio-box { padding: 15px; } .konnect-float-right { float: right; } .konnect-float-left { float: left; } /* ================================================ 7. Navigation + Logo CSS ================================================ */ .navbar{ margin:0px; } .navbar-nav > li > a { letter-spacing: 0.9px; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #000; background: #ffffff; } .navbar-brand { height: auto; padding: 0px; } .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: 0px; } /**/ nav.affix .konnect-info { display: none; transition: all 0.35s; } .navbar-default { background-color: white; border-color: rgba(34, 34, 34, 0.05); font-family: 'Arimo', sans-serif; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .navbar-default i.fa { padding-right: 3px; font-size: 14px; font-weight: normal; } .navbar-default .navbar-header .navbar-brand { color: #0A84CB; font-family: 'Hind', sans-serif; font-weight: 700; text-transform: uppercase; } .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: #6c6c6c; } .navbar-default .navbar-header .navbar-toggle { font-weight: 700; font-size: 12px; color: #222222; text-transform: uppercase; } .navbar-default .nav > li > a, .navbar-default .nav > li > a:focus { text-transform: uppercase; font-weight: 400; font-size: 13px; color: #444444; } .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus:hover { color: #0A84CB; } .navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus, .navbar-default .nav > li > a:focus { color: #0A84CB !important; background-color: transparent; } .navbar-default .nav > li.active > a:hover, .navbar-default .nav > li.active > a:focus:hover { background-color: transparent; } .dropdown-menu { border-radius: 0px; } @media (max-width: 767px) { .navbar-collapse{ display:none; } .navbar-brand > img { display: block; margin-left: 7px; } nav#mainNav { padding: 0px; } .navbar-default .navbar-nav .dropdown-menu > li > a { color: red; background-color: #ccc; margin-top: 2px; } .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #444444; text-transform: uppercase; background: #ffffff; padding: 9px 18px; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #0A84CB; text-transform: uppercase; background: #ffffff; } .navbar-nav .open .dropdown-menu { border-bottom: 1px solid white; border-radius: 0; } .dropdown-menu { padding-left: 10px; } .dropdown-menu .dropdown-menu { padding-left: 20px; } .dropdown-menu .dropdown-menu .dropdown-menu { padding-left: 30px; } li.dropdown.open { border: 0px solid red; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #0A84CB; background-color: #ffffff; } .job-single-header { display: none; } .job-single p { padding: 10px 0 2px 0; } footer .text-right p { padding-top:8px; } } @media (min-width: 768px) { .navbar-nav > li > a { padding-top: 15px; padding-bottom: 5px; } ul.dropdown-menu { text-transform: uppercase; font-weight: 400; font-size: 13px; color: #ffffff; padding: 0px; font-family: 'Arimo', sans-serif; background:#0A84CB; } ul.dropdown-menu li a { padding: 10px; text-decoration: none; color:#ffffff; } ul.dropdown-menu li a:hover { color: #0A84CB; background: #ffffff; text-decoration: none; padding-left: 15px; } ul.nav li:hover > ul.dropdown-menu { display: block; border: 1px solid #0A84CB; padding: 0px; font-family: 'Arimo', sans-serif; } #navbar { text-align: center; } .navbar-right .dropdown-menu { right: 0; left: 0; } .border-right { border-right: 1px solid #f1f1f1; } .konnect-button-2 { position: absolute; margin: 15px 0 0 0; } } /* ================================================ 8. Plain Banner/ Flat Banner Home page ================================================ */ .flat-header { position: relative; width: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-position: center; text-align: center; color: white; } .flat-header .header-content { position: relative; text-align: center; padding: 80px 15px 100px; width: 100%; } .flat-header .homeHeading { color: #ffffff; text-transform: capitalize; font-weight: 400; } .flat-header .header-content .header-content-inner h1 { font-size: 50px; font-weight: 400; text-transform: none; } .flat-header .header-content .header-content-inner h1 span { display:block; } .flat-header .header-content .header-content-inner hr { margin: 30px auto; } .flat-header .header-content .header-content-inner p { font-weight: 400; color: rgba(255, 255, 255, 0.7); font-size: 16px; margin-bottom: 50px; } /* ================================================ 9. inner page CSS ================================================ */ header.innner-page { padding: 25px 0; background-image: url('../img/dark-bg.jpg'); text-align: left; overflow-x: hidden; } header.innner-page h1 { margin: 0px; color: #eeeeee; } header.innner-page h1 .fa { color: #0A84CB; } @media (max-width:766px){ header.innner-page h1 { margin: 0px; color: #eeeeee; font-size:30px; } } /* ================================================ 10. Our Team /Team Member ================================================ */ .konnect-team-member { background: #ffffff; padding: 20px; } .our-team li { padding: 0px; margin: 0px 8px; display: inline-block; text-align: center; } h4.team-member-title { color: #0A84CB; font-size: 25px; } @media (max-width:767px){ .konnect-facts, .konnect-awards{ padding:25px 0 0 0; } } /* ================================================ 11. Services CSS ================================================ */ .service-box { margin: 20px 0; } .service-box p { margin-bottom: 0; } /* ================================================ 12. Side bar ================================================ */ .sidebar-cta { background: url(../img/sidebar-cta.png); min-height: 300px; padding: 10px 20px; } .sidebar-cta h2 { color: #ffffff; font-weight: 400; font-size: 35px; line-height: 42px; text-transform: uppercase; } .side-bar h3 { background: #fafafa; color: #666666; padding: 10px; font-size: 23px; font-weight: 400; box-shadow: 0px 2px 3px #d2d2d2; } .side-bar h3:before { content: "\f103"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #0A84CB; margin-right: 10px; } a.konnect-download-cta { padding: 10px 30px; font-size: 17px; background: #ffffff; border: 1px solid #ffffff; color: #444444; text-decoration: none; } ul.ul-tags li { list-style: none; display: inline; border: 1px solid #ccc; padding: 5px 10px; line-height: 40px; margin-left: 4px; } ul.ul-tags li:hover { background: #000000; } ul.ul-tags li a { color: #000000; text-decoration: none; } ul.ul-tags li a:hover { color: #ffffff; text-decoration: none; } /* ================================================ 13. Blog/News CSS ================================================ */ .social-share { border-bottom: 2px solid #f1f1f1; padding-bottom: 10px; } .social-share .fa { /* width: 20px; */ text-align: center; background: #0A84CB; color: #ffffff; padding: 6px 19px; margin-left: 5px; cursor: pointer; } .post-content-text h3 { color: #0A84CB; font-weight: 400; } .blog-heading { margin: 0px 0 20px 0; font-weight: 400; color: #444444; } .latest-blog-single h4 a { font-weight: 400; text-decoration: none; text-transform: uppercase; font-size: 16px; } .latest-blog-single span { color: #888888; } .latest-blog-single-img { float: left; } .latest-blog-single-img img { width: 140px; margin-right: 10px; padding: 4px; border: 1px solid #f1f1f1; } .blog-commetns h3 { background: #fafafa; color: #666666; padding: 10px; font-size: 23px; font-weight: 400; box-shadow: 0px 2px 3px #d2d2d2; } .blog-commetns h3:before { content: "\f103"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #0A84CB; margin-right: 10px; } .comment-avtar img { width: 100px; float: left; margin-right: 10px; padding: 4px; border: 1px solid #f1f1f1; border-radius: 50%; } span.comment-person { font-size: 21px; color: #0A84CB; margin-right: 10px; } div.comment-time { font-size: 12px; color: #666; } @media (min-width:778px){ .form-control.form-left{ width:48% !important; float:left; margin-right: 28px; } .form-control.form-right{ width:48% !important; } } .blog-next-prev { padding-top: 20px; border-top: 1px solid #f1f1f1; } .blog-next-prev a { text-decoration: none; font-size: 20px; } .blog-prev { float: left; } .blog-next { float: right; } .blog-next span { float: right; } .img-box img { max-width: 100%; } .post-content-text { margin-top: 10px; } ul.blog_info li:first-child { margin:0; } ul.blog_info li { display: inline-block; margin-left: 15px; } ul.blog_info li a { color: #282a2b; } ul.blog_info li .fa { color: #0A84CB; } .news-post a:hover { text-decoration: none; } .news-post { border: 1px solid #f1f1f1; padding: 10px 10px 15px 10px; margin: 15px 0; } .news-post h3 a { color: #0A84CB; } @media (min-width: 768px) { .blog-content { border-right: 1px solid #f1f1f1; margin-bottom:20px; } } @media (max-width: 400px) { .social-share .fa { padding: 5px 10px; } } /* ================================================ 14. Buttons Css ================================================ */ .konnect-button { border: 1px solid #0a84cb; color: #444444; font-size: 14px; line-height: normal; padding: 8px 10px 5px; text-transform: lowercase; } .konnect-button:hover, .konnect-button:active, .konnect-button:focus { border: 1px solid #0A84CB; background: #0A84CB; color: #ffffff; text-decoration: none; } .konnect-button-1 { margin-top: 60px; } .konnect-button-1 a { padding: 15px 41px; border: 1px solid #0A84CB; color: #fff; text-transform: uppercase; font-size: 20px; letter-spacing: 4px; font-family: 'Arimo', sans-serif; } .konnect-button-1 a:hover, .konnect-button-1 a:active, .konnect-button-1 a:focus { border: 1px solid #0A84CB; background: #0A84CB; color: #ffffff; text-decoration: none; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .konnect-button-2, .konnect-home { padding: 5px 15px; border: 1px solid #0A84CB; color: #ffffff; text-transform: uppercase; font-size: 16px; background: #0A84CB; } .konnect-button-2:hover, .konnect-button-2:active, .konnect-button-2:focus, .konnect-home:hover, .konnect-home:active, .konnect-home:focus { text-decoration: none; color: #ffffff; border: 1px solid #444444; background: #444444; } .konnect-button-3 { color: #96d7fc; font-weight: 500; text-decoration: none; } .konnect-button-3:hover, .konnect-button-3:focus, .konnect-button-3:active { text-decoration: none; color: #47b6f5; } .konnect-button-4 { padding: 5px 0px; text-transform: none; font-size: 16px; background: #ffffff; text-decoration: none; cursor: pointer; color: #999999; } .konnect-button-4:hover, .konnect-button-4:active, .konnect-button-4:focus { text-decoration: none; opacity: 0.9; } .konnect-button-4:hover a, .konnect-button-4:active a, .konnect-button-4:focus a { color: #0A84CB; } @media (max-width:768px){ .konnect-button-3{ border-bottom:none; } .sidebar-cta{ display:none; } } /*bootstrap buttons*/ .btn-file { position: relative; overflow: hidden; color: #444444 !important; border: 1px solid #d2d2d2 !important; width: 100%; text-align: left; border-radius: 0px; padding-top: 12px; } .btn-file::before { content: "\f1c2"; font-family: FontAwesome; color: #0A84CB; margin-right: 5px; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: #0A84CB; cursor: inherit; display: block; } .btn-default { color: #222222; background-color: white; border-color: white; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #222222; background-color: #f2f2f2; border-color: #ededed; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: white; border-color: white; } .btn-default .badge { color: white; background-color: #222222; } .btn-primary { color: white; background-color: #0A84CB; border-color: #0A84CB; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: white; background-color: #6c6c6c; border-color: #6c6c6c; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #0A84CB; border-color: #0A84CB; } .btn-primary .badge { color: #0A84CB; background-color: white; } .btn { font-family: 'Hind', sans-serif; border: none; font-weight: 400; text-transform: uppercase; } .btn-xl { padding: 15px 30px; } /* ================================================ 15. Testimonials CSS ================================================ */ .carousel-inner { margin-bottom: 10px; } #quote-carousel { padding: 0 10px 30px 10px; } #quote-carousel p { font-size: 17px; line-height: 1.5; margin-bottom: 20px; font-weight: 300; } #quote-carousel .carousel-control { background: none; color: #f1f1f1; font-size: 2.3em; text-shadow: none; margin-top: 30px; } #quote-carousel .carousel-control.left { left: 10px; } #quote-carousel .carousel-control.right { right: 10px; } #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: 0px; } #quote-carousel .carousel-indicators li { width: 15px; height: 15px; margin: 5px; cursor: pointer; border: 1px solid #fff; overflow: hidden; transition: all 0.4s; border-radius: 0; } #quote-carousel .carousel-indicators .active { background: #0A84CB; border-color: #0A84CB; opacity: 1; } .item blockquote { border-left: none; margin: 0; } .item blockquote p:before { content: "\f10d"; font-family: 'Fontawesome'; float: left; margin-right: 10px; } /* ================================================ 16. Contact Us CSS ================================================ */ img.konnect-contact-icon { width: 30px; float: left; margin-right: 15px; } .konnect-form .form-control:focus { outline: 0; border-color: #0A84CB; -webkit-box-shadow: 0 0 #fff; box-shadow: 0 0 #fff; border-radius: 0; } .konnect-form .form-control { display: block; width: 100%; height:40px; font-size: 16px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #d2d2d2; border-radius: 0px; margin-bottom: 15px; } .konnect-form textarea.form-control { padding: 5px 20px 20px 10px; height: 91px; } .konnect-submit { font-size: 15px; border: 0px solid #fff; padding: 10px 20px; background: rgba(10,132,203,0.9); color: #fff; border-radius: 0; font-weight: 300; } .konnect-submit:hover { background: rgba(10,132,203,1); } .contact-address-box{ padding: 10px 15px; background: #0A84CB; color: #f1f1f1; } .contact-address-box h3{ color: #ffffff; text-transform: uppercase; margin-bottom: 0px; } .contact-address-box .fa{ border: 2px solid #ffffff; border-radius: 50%; padding: 7px; font-size: 14px; margin-right: 5px; } /* ================================================ 17. Footer CSS ================================================ */ footer { padding: 15px 0px; background: #0A84CB; } footer .container p { margin: 0px; font-size: 12px; color: #ffffff; } .contact-social a { display: inline-block; float: none; margin: 0 0 0 10px; font-size: 16px; } .footer-contact h3{ margin:5px 0; } /* ================================================ 18. Google Map CSS ================================================ */ a[href^="http://maps.google.com/maps"] { display: none !important } a[href^="https://maps.google.com/maps"] { display: none !important } .gmnoprint div { background: none !important; } .googleMap .gm-style { border-style: solid; border-width: 1px; border-color: rgba(113,113,113,0.5); } #map { height: 400px; } .contact-map{ padding-bottom:0; } @media (max-width:768px){ .small-map{ margin-bottom:20px; } } /* ================================================ 19. Responsive Design CSS ================================================ */ @media (max-width: 767px) { .h3, h3 { font-size: 21px; } h1, .h1{ font-size:25px; } .col-xs-12.text-left, .col-xs-12.text-right{ float:none; } header.innner-page { padding: 25px 0 25px 15px; } .konnect-callout{ margin:0 0 60px; } .flat-header .header-content .header-content-inner h1 { font-size:35px; } .fixed-right-bottom { bottom: 10px; left: 10px; min-width: 90%; position: fixed; z-index: 9999; } .navbar-toggle { border: 0px; padding: 0px; background-color: #fff; margin: 11px; } .navbar-header { padding: 0 15px; } .navbar-toggle .fa.fa-bars { font-size: 22px; padding: 2px 5px; color: #fff; background: #0A84CB; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: #fff; } .row { margin: 0px; } img.konnect-contact-icon { margin-right: 10px; width: 25px; } .konnect-space { min-height: 10px; } nav.affix-top a.logo-color { display: block; transition: all 0.35s; } nav.affix a.logo-white, nav.affix-top a.logo-white { display: none; transition: all 0.35s; } .konnect-list{ margin-bottom: 15px; } .konnect-float-right, .konnect-info li { border-right: 0px; text-align: center; float: none; } .text-center img { margin: 5px auto; } .affix-top { background-color: #ffffff; } .text-right, .text-left { text-align: center; } #quote-carousel { padding: 0; } #quote-carousel .carousel-indicators { position: relative; } #quote-carousel p { font-size: 16px; line-height: 1.2; margin-bottom: 20px; font-weight: 300; } #quote-carousel .carousel-control { display: none; } .section-heading { font-size: 25px; } .btn-file { margin-bottom: 20px; } .job-single p{ margin-bottom: 20px; } .job-single{ padding-bottom: 30px; } .pagination > li > a, .pagination > li > span{ padding:5px 13px; } div.footer-box { margin: 10px 0 20px 0; } } @media (min-width: 768px) { .navbar-default { background-color: #ffffff; border-color: rgba(255, 255, 255, 0.3); } .navbar-default .navbar-header .navbar-brand { color: rgba(255, 255, 255, 0.7); } .navbar-default .navbar-header .navbar-brand:hover, .navbar-default .navbar-header .navbar-brand:focus { color: white; } .navbar-default.affix { background-color: rgba(255,255,255,1); border-color: rgba(34, 34, 34, 0.05); transition: top 0.5s ease 0s; -webkit-transition: top 0.5s ease 0s; -moz-transition: top 0.5s ease 0s; -o-transition: top 0.5s ease 0s; } .navbar-default.affix .navbar-header .navbar-brand { color: #0A84CB; font-size: 14px; } .navbar-default.affix .navbar-header .navbar-brand:hover, .navbar-default.affix .navbar-header .navbar-brand:focus { color: #6c6c6c; } .navbar-default.affix .nav > li > a, .navbar-default.affix .nav > li > a:focus { color: #000000; } .navbar-default.affix .nav > li > a:hover, .navbar-default.affix .nav > li > a:focus:hover { color: #0A84CB; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category { font-size: 16px; } .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name { font-size: 22px; } } @media (min-width: 768px) and (max-width: 991px) { .navbar-right { float: none !important; margin-right: 0; } .navbar-collapse.collapse { display: none !important; } .navbar-collapse.collapse.in { display: block !important; } .navbar-header .collapse, .navbar-toggle { display: block !important; } .navbar-header { float: none; } .navbar-toggle { border: 0px; margin: 12px 20px; padding: 0px; background-color: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: transparent; } .konnect-submit { margin-top: 15px; } img.konnect-contact-icon { margin: 15px 15px 0 0; } .konnect-clients img{ margin-top:20px; } .job-single-header{ display:none; } .footer-contact img { display:none; } .footer-contact .konnect-space { min-height:0px; } .footer-box:nth-child(3), .footer-box:nth-child(4){ margin-top:20px; } } @media (min-width: 992px) { .service-box { margin: 20px auto 0; } } @media (min-width: 992px) and (max-width: 1024px) { h3, .h3{ font-size:22px; } .job-single-header{ display:none; } }