/*----------------------------------------------------------------------------------- Template Name: Koncrete - Construction Bootstrap 4 Template Version: 1.0 ----------------------------------------------------------------------------------- 更多精品模板请访问：http://www.bootstrapmb.com CSS INDEX =================== 01. Theme default CSS 02. Header CSS 03. Hero CSS 04. About CSS 05. Feature CSS 06. Project CSS 07. Funfact CSS 08. Service CSS 09. Team CSS 10. Testimonial CSS 11. Product CSS 12. Cart CSS 13. Checkout CSS 14. Blog CSS 15. Comment CSS 16. Sidebar CSS 17. Brand CSS 18. Contact CSS 19. Footer CSS -----------------------------------------------------------------------------------*/ /*----------------------------------------*/ /* 01. Theme default CSS /*----------------------------------------*/ /*-- Google Font --*/ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap'); /*-- Common Style --*/ *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body, .site-wrapper { height: 100%; } body { background-color: #ffffff; font-size: 15px; line-height: 28px; font-style: normal; font-weight: normal; visibility: visible; font-family: 'Roboto', sans-serif; color: #666666; position: relative; } body[data-rtl="rtl"] { direction: rtl; text-align: right; } h1, h2, h3, h4, h5, h6 { font-family: "Roboto", sans-serif; color: #1f2d30; font-weight: 400; margin-top: 0; line-height: 1.2; } h1 { font-size: 36px; } @media only screen and (max-width: 767px) { h1 { font-size: 32px; } } @media only screen and (max-width: 575px) { h1 { font-size: 30px; } } h2 { font-size: 30px; } @media only screen and (max-width: 767px) { h2 { font-size: 26px; } } @media only screen and (max-width: 575px) { h2 { font-size: 24px; } } h3 { font-size: 24px; } @media only screen and (max-width: 767px) { h3 { font-size: 22px; } } @media only screen and (max-width: 575px) { h3 { font-size: 20px; } } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } p:last-child { margin-bottom: 0; } a, button { color: inherit; display: inline-block; line-height: inherit; text-decoration: none; cursor: pointer; } a, button, img, input, span { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } *:focus { outline: none !important; } a:focus { color: inherit; outline: none; text-decoration: none; } a:hover { text-decoration: none; color: #297bc2; } button, input[type="submit"] { cursor: pointer; } ul { list-style: outside none none; margin: 0; padding: 0; } img { max-width: 100%; } /*-- - Common Classes -----------------------------------------*/ .fix { overflow: hidden; } .hidden { display: none; } .clear { clear: both; } .section, .main-wrapper { float: left; width: 100%; } @media (min-width: 1200px) { .container { max-width: 1200px; } .row-five-column > [class*="col-xl-"] { max-width: 20%; -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; } } @media only screen and (max-width: 575px) { .container { max-width: 450px; } } @media only screen and (max-width: 479px) { .container { max-width: 100%; } } .no-gutters { margin-left: 0; margin-right: 0; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; margin: 0 !important; } .inline-YTPlayer { max-width: none !important; width: 100%; } .mbYTP_wrapper { z-index: -9 !important; } /*-- - Input Placeholder -----------------------------------------*/ input:-moz-placeholder, textarea:-moz-placeholder { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /*-- - Background Color ------------------------------------------*/ .bg-white { background-color: #ffffff !important; } .bg-gray { background-color: #f8f8f8 !important; } .bg-dark { background-color: #1f2d30 !important; } .bg-theme { background-color: #297bc2 !important; } /*-- - Tab Content & Pane Fix ------------------------------------------*/ .tab-content { width: 100%; } .tab-content .tab-pane { display: block; height: 0; max-width: 100%; visibility: hidden; overflow: hidden; opacity: 0; } .tab-content .tab-pane.active { height: auto; visibility: visible; opacity: 1; overflow: visible; } /*-- - Main Wrapper ------------------------------------------*/ /*-- - Section Title ------------------------------------------*/ .section-title { } .section-title.no-icon { background-image: none; padding-bottom: 0; } .section-title h1 { font-weight: 700; font-size: 34px; line-height: 1; margin: 0; } @media only screen and (max-width: 479px) { .section-title h1 { font-size: 24px; } } .section-title p { max-width: 800px; margin-top: 15px; line-height: 26px;margin: 0px auto} .section-title.text-center { text-align: center; background-position: top center; } .section-title.text-center p { margin-left: auto; margin-right: auto; } .section-title.text-left { text-align: left; background-position: top left; } .section-title.text-left p { margin-left: 0; margin-right: auto; } .section-title.text-right { text-align: right; background-position: top right; } .section-title.text-right p { margin-left: auto; margin-right: 0; } .product-section .section-title h3{ color: #0060aa; } /*-- - Button ------------------------------------------*/ .btn { background-color: #297bc2; color: #ffffff; font-size: 16px; line-height: 24px; height: 40px; font-weight: 400; padding: 8px 30px; border-radius: 0px; position: relative; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .btn:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } .btn::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; border: 2px solid #297bc2; z-index: -1; } .btn::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; border: 2px solid #297bc2; z-index: -1; } .btn:hover { color: #ffffff; } .btn:hover::before { left: 8px; top: 8px; } .btn:hover::after { left: -8px; top: -8px; } @media only screen and (max-width: 767px) { .btn { font-size: 14px; line-height: 23px; height: 45px; padding: 10px 25px; } .btn:hover::before { left: 6px; top: 6px; } .btn:hover::after { left: -6px; top: -6px; } } /*-- - Page Banner Section ------------------------------------------*/ .page-banner-section { margin-top: 160px; padding: 80px 0 90px; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; z-index: 1; } .page-banner-section::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: #007ac6; opacity: 0.25; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .page-banner-section { margin-top: 160px; padding: 60px 0 70px; } } @media only screen and (max-width: 767px) { .page-banner-section { margin-top: 160px; padding: 40px 0 50px; } } @media only screen and (max-width: 575px) { .page-banner-section { margin-top: 160px; padding: 25px 0 35px; } } @media only screen and (max-width: 479px) { .page-banner-section { margin-top: 160px; } } /*-- Page Banner --*/ .page-banner h1,.page-banner h3 { font-size: 48px; color: #ffffff; font-weight: 500; letter-spacing: 0.1px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .page-banner h1,.page-banner h3 { font-size: 36px; } } @media only screen and (max-width: 767px) { .page-banner h1 ,.page-banner h3{ font-size: 30px; } } @media only screen and (max-width: 575px) { .page-banner h1,.page-banner h3 { font-size: 24px; } } /*-- Page Breadcrumb --*/ .page-breadcrumb { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .page-breadcrumb li { color: #ffffff; font-size: 18px; font-weight: 300; letter-spacing: 0.5px; font-family: "Roboto", sans-serif; line-height: 1; margin-top: 10px; } @media only screen and (max-width: 575px) { .page-breadcrumb li { font-size: 16px; } } .page-breadcrumb li::after { content: "-"; margin: 0 6px; } .page-breadcrumb li:last-child::after { display: none; } .page-breadcrumb li a:hover { color: #f49130; } /*-- - Page Pagination ------------------------------------------*/ .page-pagination { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -5px -10px; } .page-pagination li { font-size: 16px; line-height: 24px; font-family: "Roboto", sans-serif; color: #1f2d30; text-align: center; margin: 5px 10px; } .page-pagination li a { color: #1f2d30; background-color: #f8f8f8; padding: 10px; border-radius: 50px; width: 44px; height: 44px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .page-pagination li a i { line-height: 24px; } @media only screen and (max-width: 575px) { .page-pagination li { font-size: 14px; } .page-pagination li a { padding: 9px; width: 40px; height: 40px; } .page-pagination li a i { line-height: 24px; } } .page-pagination li:hover a { color: #fff; background-color: #1f2d30; } .page-pagination li.active a { color: #ffffff; background-color: #297bc2; } .page-pagination li:first-child a { color: #1f2d30; width: auto; padding: 10px 20px; } .page-pagination li:first-child a i { margin-right: 10px; float: left; } .page-pagination li:first-child a:hover { color: #fff; } .page-pagination li:last-child a { color: #1f2d30; width: auto; padding: 10px 20px; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .page-pagination li:last-child a i { margin-left: 10px; float: right; } .page-pagination li:last-child a:hover { color: #fff; } .grid-filter { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 20px; } .grid-filter button { background-color: transparent; color: #1f2d30; border: none; padding: 0; font-size: 14px; font-weight: 600; margin: 0 10px 10px; text-transform: capitalize; line-height: 1; padding-bottom: 15px; position: relative; } .grid-filter button::before { content: ""; height: 4px; width: 0; position: absolute; left: 0; bottom: 4px; background-color: #df1519; z-index: -1; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .grid-filter button:hover::before, .grid-filter button.active::before { width: 100%; } .grid-filter.center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .grid-filter.center button { margin: 0 10px 10px; } .grid-filter.left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .grid-filter.left button { margin-left: 0; margin-right: 20px; margin-bottom: 10px; } .grid-filter.left button:last-child { margin-right: 0; } .grid-filter.right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .grid-filter.right button { margin-left: 20px; margin-right: 0; margin-bottom: 10px; } .grid-filter.right button:last-child { margin-left: 0; } .slick-slider .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; border: none; background-color: #297bc2; color: #ffffff; padding: 10px; width: 44px; height: 44px; border-radius: 0; text-align: center; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); opacity: 0; } .slick-slider .slick-arrow::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #297bc2; background-color: transparent; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .slick-slider .slick-arrow i { font-size: 24px; line-height: 20px; display: block; } .slick-slider .slick-arrow.slick-prev { left: 0; margin-left: 40px; } .slick-slider .slick-arrow.slick-next { right: 0; margin-right: 40px; } .slick-slider .slick-arrow:hover::before { margin-left: 6px; margin-top: 6px; } .slick-slider:hover .slick-arrow { opacity: 1; } .slick-slider:hover .slick-arrow.slick-prev { margin-left: 20px; } .slick-slider:hover .slick-arrow.slick-next { margin-right: 20px; } .slick-slider .slick-dots { width: 100%; padding: 0; margin: 20px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .slick-slider .slick-dots li { margin: 0 5px; } .slick-slider .slick-dots li button { display: block; padding: 0; width: 12px; height: 12px; border: none; background-color: #d8d8d8; text-indent: -9999px; border-radius: 50px; } .slick-slider .slick-dots li.slick-active button { background-color: #297bc2; } .gallery-item { position: relative; } .gallery-item::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: #1f2d30; z-index: 1; opacity: 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .gallery-item img { width: 100%; } .gallery-item .plus { display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 3; opacity: 0; } .gallery-item .plus::before, .gallery-item .plus::after { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-color: #ffffff; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .gallery-item .plus::before { width: 150px; height: 1px; } .gallery-item .plus::after { width: 1px; height: 150px; } .gallery-item:hover::before { opacity: 0.75; } .gallery-item:hover .plus { opacity: 1; } .gallery-item:hover .plus::before { width: 40px; } .gallery-item:hover .plus::after { height: 40px; } blockquote.blockquote { background-color: #f1f2f3; padding: 30px; position: relative; z-index: 1; overflow: hidden; } blockquote.blockquote::before { position: absolute; content: url(../images/icons/quote-left.png); left: -5px; top: -10px; z-index: -1; opacity: 0.07; } blockquote.blockquote p { font-size: 18px; font-style: italic; } blockquote.blockquote .author { font-size: 14px; display: block; line-height: 18px; } /*----------------------------------------*/ /* 02. Header CSS /*----------------------------------------*/ header.header { background-color: #ffffff; position: absolute; left: 0; top: 0; width: 100%; z-index: 999; } header.header.is-sticky { position: fixed; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: slideInDown; animation-name: slideInDown; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } header.header.is-sticky .header-top { display: none; } /*-- Header Top --*/ .header-top { background-color: #007ac6; } .header-top > .container > .row > div { margin: 12px 0 5px; } @media only screen and (max-width: 575px) { .header-top > .container > .row > div { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0; } .header-top > .container > .row > div:first-child { margin-top: 10px; margin-bottom: 5px; } .header-top > .container > .row > div:last-child { margin-bottom: 5px; margin-top: 10px;} } /*-- Header Top Links --*/ .header-top-links ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .header-top-links ul li { font-size: 14px; line-height: 26px; margin-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #ffffff; } .header-top-links ul li:last-child { margin-right: 0; } .header-top-links ul li i { margin-right: 6px; line-height: 26px; float: left; } .header-top-links ul li a { display: block; } @media only screen and (max-width: 479px) { .header-top-links ul li { font-size: 12px; margin-right: 10px; } .header-top-links ul li:last-child { margin-right: 0; } } .header-top-links a:hover{ color: #f49130 !important; } /*-- Header Top Social --*/ .header-top-social { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .header-top-social a { margin-right: 15px; color: #ffffff; } .header-top-social a:last-child { margin-right: 0; } .header-top-social a i { font-size: 14px; display: block; line-height: 28px; } .header-top-social a:hover { color: #f49130; } @media only screen and (max-width: 479px) { .header-top-social a { margin-right: 8px; } } /*-- Header Bottom --*/ .header-bottom.menu-right > .container > .row { -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-bottom.menu-right > .container > .row { -webkit-box-align: inherit; -ms-flex-align: inherit; align-items: inherit; } } @media only screen and (max-width: 767px) { .header-bottom.menu-right > .container > .row { -webkit-box-align: inherit; -ms-flex-align: inherit; align-items: inherit; } } .header-bottom.menu-right > .container > .row > .col { position: static; } /*-- Header Logo --*/ @media only screen and (max-width: 479px) { .logo { width: 120px; } } .logo a { display: inline-block; } .logo a img { max-width: 100%; } /*-- Header Search --*/ .header-search { margin-left: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-search { margin-left: 0; } } @media only screen and (max-width: 767px) { .header-search { margin-left: 0; } } @media only screen and (max-width: 479px) { .header-search { margin-left: 0; } } .header-search-toggle { background-color: transparent; border: none; color: #1f2d30; padding: 0; line-height: 1; width: 30px; height: 30px; } .header-search-toggle i { font-size: 24px; } .header-search-toggle.open i { font-size: 30px; } /*-- Search Form --*/ .header-search-form { display: none; position: absolute; right: 0; top: 100%; background-color: #ffffff; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 479px) { .header-search-form { right: -85px; } } .header-search-form form { display: -webkit-box; display: -ms-flexbox; display: flex; } .header-search-form form input { width: 250px; border: none; background-color: transparent; color: #666666; line-height: 24px; padding: 13px 20px; } @media only screen and (max-width: 479px) { .header-search-form form input { width: 216px; } } .header-search-form form button { line-height: 24px; padding: 13px 15px; border: none; background-color: #297bc2; display: -webkit-box; display: -ms-flexbox; display: flex; color: #ffffff; } .header-search-form form button i { font-size: 24px; line-height: 24px; } /*-- Header Cart --*/ .header-cart { margin-left: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-search { margin-right: 50px; } } @media only screen and (max-width: 767px) { .header-search { margin-right: 50px; } } @media only screen and (max-width: 479px) { .header-search { margin-right: 40px; } } .header-cart a { background-color: transparent; border: none; color: #1f2d30; padding: 0; line-height: 1; width: 30px; height: 30px; position: relative; } .header-cart a i { font-size: 24px; margin-top: 2px; } .header-cart a span { position: absolute; right: 0; top: 0; background-color: #297bc2; width: 15px; height: 15px; text-align: center; font-size: 11px; line-height: 15px; border-radius: 50%; } /*-- Main Menu --*/ .main-menu > ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .main-menu > ul > li { margin-right: 30px; position: relative; } .main-menu > ul > li:last-child { margin-right: 0; } .main-menu > ul > li > a { font-size: 20px; line-height: 30px; font-weight: 500; letter-spacing: 0.25px; font-family: "Roboto", sans-serif; color: #1f2d30; display: block; padding: 30px 0; position: relative; text-transform: capitalize; } .main-menu > ul > li > a::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background-color: #1f2d30; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .main-menu > ul > li.has-dropdown > a::after { content: "\f107"; font-family: Fontawesome; line-height: 30px; margin-left: 3px; } .main-menu > ul > li.active > a, .main-menu > ul > li:hover > a { color: #297bc2; } .main-menu > ul > li.active > a::before, .main-menu > ul > li:hover > a::before { width: 100%; background-color: #297bc2; } .main-menu > ul > li:hover > .sub-menu { margin-top: 0; opacity: 1; visibility: visible; z-index: 99; } .main-menu > ul > li:hover > .mega-menu { margin-top: 0; opacity: 1; visibility: visible; z-index: 99; } .main-menu > ul > li:last-child .sub-menu { left: auto; right: 0; } .main-menu > ul > li:last-child .sub-menu .sub-menu .sub-menu { left: 100%; right: auto; } .main-menu > ul > li:last-child .sub-menu .sub-menu .sub-menu .sub-menu { left: auto; right: 100%; } .main-menu > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu { left: auto; right: 100%; } .main-menu > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu .sub-menu { left: 100%; right: auto; } /*-- Sub Menu --*/ .sub-menu { position: absolute; left: 0; top: 100%; margin-left: -20px; margin-top: 30px; padding: 20px 0; background-color: #ffffff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; width: 300px; z-index: -99; opacity: 0; visibility: hidden; } .sub-menu li { margin-bottom: 5px; position: relative; } .sub-menu li:last-child { margin-bottom: 0; } .sub-menu li a { letter-spacing: 0.25px; font-family: "Roboto", sans-serif; color: #666666; display: block; font-size: 14px; line-height: 30px; font-weight: 400; padding: 0 20px; } .sub-menu li.has-dropdown > a::after { content: "\f105"; font-family: Fontawesome; line-height: 30px; float: right; } .sub-menu li.active > a { color: #297bc2; } .sub-menu li .sub-menu { left: 100%; top: 0; margin-left: 0; } .sub-menu li:hover > a { color: #297bc2; padding-left: 25px; } .sub-menu li:hover > .sub-menu { margin-top: -10px; opacity: 1; visibility: visible; z-index: 99; } .sub-menu li .sub-menu { left: 100%; margin-left: 0; top: 0; } .sub-menu li .sub-menu .sub-menu { left: auto; right: 100%; } .sub-menu li .sub-menu .sub-menu .sub-menu { left: 100%; right: auto; } /*-- Mobile Menu --*/ .mobile-menu { -webkit-box-flex: 1 !important; -ms-flex: 1 0 100% !important; flex: 1 0 100% !important; } .mobile-menu .mean-bar { position: relative; /*---- Mean Nav ----*/ } .mobile-menu .mean-bar .meanmenu-reveal { position: absolute; top: -64px; } @media only screen and (max-width: 479px) { .mobile-menu .mean-bar .meanmenu-reveal { top: -54px; } } .mobile-menu .mean-bar .meanmenu-reveal span { position: relative; /*---- Menu Open ----*/ /*---- Menu Close ----*/ } .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar { height: 2px; width: 26px; background-color: #1f2d30; display: block; margin: 8px 0; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: #1f2d30; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::before { top: -8px; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-bar::after { bottom: -8px; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-close { height: 2px; width: 26px; background-color: transparent; display: block; margin: 8px 0; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before, .mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: #1f2d30; } .mobile-menu .mean-bar .meanmenu-reveal span.menu-close::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .mobile-menu .mean-bar .meanmenu-reveal span.menu-close::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .mobile-menu .mean-bar .mean-nav { background-color: #ffffff; } .mobile-menu .mean-bar .mean-nav > ul { margin-bottom: 30px; border: 1px solid rgba(0, 0, 0, 0.05); overflow-x: hidden; max-height: 250px; } @media only screen and (max-width: 767px) { .mobile-menu .mean-bar .mean-nav > ul { max-height: 180px; overflow-y: auto; } } @media only screen and (max-width: 575px) { .mobile-menu .mean-bar .mean-nav > ul { max-height: 220px; overflow-y: auto; } } .mobile-menu .mean-bar .mean-nav > ul > li:first-child > a { border-top: none; } .mobile-menu .mean-bar .mean-nav > ul li { position: relative; display: block; float: left; width: 100%; /*---- Sub Menu & Mega Menu ----*/ } .mobile-menu .mean-bar .mean-nav > ul li a { font-size: 13px; display: block; font-family: "Roboto", sans-serif; color: #666666; font-weight: 600; text-transform: uppercase; line-height: 44px; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 0 40px 0 20px; /*---- Menu Expand For Sub Menu ----*/ } .mobile-menu .mean-bar .mean-nav > ul li a::after { display: none; } .mobile-menu .mean-bar .mean-nav > ul li a:hover { color: #297bc2; padding-left: 25px; } .mobile-menu .mean-bar .mean-nav > ul li a.active { color: #297bc2; } .mobile-menu .mean-bar .mean-nav > ul li a.mean-expand { border-width: 0 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.05); position: absolute; right: -1px; top: 0; font-size: 20px !important; color: #666666; line-height: 44px; height: 46px; width: 40px; text-align: center; padding: 0; } .mobile-menu .mean-bar .mean-nav > ul li a.mean-expand.mean-clicked { line-height: 40px; } .mobile-menu .mean-bar .mean-nav > ul li span { font-size: 13px; display: block; color: #666666; font-weight: 600; text-transform: uppercase; line-height: 44px; position: relative; border-top: 1px solid rgba(0, 0, 0, 0.05); border-bottom: none; padding: 0 40px 0 20px; margin: 0; } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu, .mobile-menu .mean-bar .mean-nav > ul li ul { position: static; background-color: rgba(0, 0, 0, 0.03); margin: 0; padding: 0 !important; width: 100%; -webkit-box-shadow: none; box-shadow: none; margin: 0; display: none; float: left; width: 100%; opacity: 1; visibility: visible; z-index: 1; -webkit-transition: none; -o-transition: none; transition: none; } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li, .mobile-menu .mean-bar .mean-nav > ul li ul li { padding: 0; margin: 0; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; border-right: 0px solid transparent; width: 100%; display: block !important; float: left; width: 100%; } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li a { font-size: 11px; display: block !important; } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li a::before, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li a::before, .mobile-menu .mean-bar .mean-nav > ul li ul li a::before { display: none; } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li span, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li span, .mobile-menu .mean-bar .mean-nav > ul li ul li span { font-size: 11px; } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul { background-color: rgba(0, 0, 0, 0.04); } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a { border-top: 1px solid rgba(0, 0, 0, 0.05); } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul li a.mean-expand { border-width: 0 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.05); } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul { background-color: rgba(0, 0, 0, 0.05); } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a { border-top: 1px solid rgba(0, 0, 0, 0.05); } .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .sub-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li .mega-menu li ul ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li .sub-menu ul li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul .sub-menu li a.mean-expand, .mobile-menu .mean-bar .mean-nav > ul li ul li ul ul li a.mean-expand { border-width: 0 1px; border-style: solid; border-color: rgba(0, 0, 0, 0.05); } /*----------------------------------------*/ /* 03. Hero CSS /*----------------------------------------*/ .hero-section { margin-top: 160px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-section { margin-top: 160px; } } @media only screen and (max-width: 767px) { .hero-section { margin-top: 160px; } } @media only screen and (max-width: 575px) { .hero-section { margin-top: 160px; } } @media only screen and (max-width: 479px) { .hero-section { margin-top: 160px; } } .hero-section .inline-YTPlayer { width: 100% !important; } /*-- Hero Slider --*/ .hero-slider .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; border: none; background-color: transparent; color: #297bc2; padding: 10px; width: 54px; height: 54px; border-radius: 0; text-align: center; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); opacity: 0; } .hero-slider .slick-arrow::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #297bc2; background-color: transparent; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .hero-slider .slick-arrow i { font-size: 24px; line-height: 30px; display: block; } .hero-slider .slick-arrow.slick-prev { left: 40px; margin-left: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .hero-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (max-width: 767px) { .hero-slider .slick-arrow.slick-prev { left: 8px; } } .hero-slider .slick-arrow.slick-next { right: 40px; margin-right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .hero-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (max-width: 767px) { .hero-slider .slick-arrow.slick-next { right: 8px; } } .hero-slider .slick-arrow:hover { background-color: #297bc2; color: #ffffff; } .hero-slider .slick-arrow:hover::before { margin-left: 6px; margin-top: 6px; } .hero-slider:hover .slick-arrow { opacity: 1; } .hero-slider:hover .slick-arrow.slick-prev { margin-left: 0; } .hero-slider:hover .slick-arrow.slick-next { margin-right: 0; } .hero-slider .slick-dots { position: absolute; left: 0; bottom: 40px; width: 100%; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-slider .slick-dots { bottom: 20px; } } @media only screen and (max-width: 767px) { .hero-slider .slick-dots { bottom: 20px; } } @media only screen and (max-width: 575px) { .hero-slider .slick-dots { bottom: 15px; } } .hero-slider .slick-dots li { margin: 0 5px; } .hero-slider .slick-dots li button { display: block; padding: 0; width: 15px; height: 15px; border: 3px solid #297bc2; background-color: #1f2d30; text-indent: -9999px; border-radius: 50px; } @media only screen and (max-width: 767px) { .hero-slider .slick-dots li button { border-width: 2px; width: 10px; height: 10px; } } .hero-slider .slick-dots li.slick-active button { width: 30px; background-color: #297bc2; } @media only screen and (max-width: 767px) { .hero-slider .slick-dots li.slick-active button { width: 20px; } } /*-- Hero Item --*/ .hero-item { width: 100%; height: calc(100vh - 131px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; z-index: 1; } .hero-item::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: #000000; opacity: 0; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-item { height: auto; padding: 80px 0; min-height: 480px; } } @media only screen and (max-width: 767px) { .hero-item { height: auto; padding: 50px 0; min-height: 320px; } } .hero-item.player { height: calc(100vh - 131px) !important; padding: 0 !important; } @media only screen and (max-width: 767px) { .hero-item.player { height: auto !important; padding: 50px 0 !important; } } /*-- Hero Content For Background Video --*/ .hero-content { text-align: center; } .hero-content h2 { font-size: 32px; line-height: 1; font-weight: 500; text-transform: uppercase; color: #ffffff; margin-bottom: 20px; } @media only screen and (max-width: 767px) { .hero-content h2 { font-size: 24px; } } @media only screen and (max-width: 575px) { .hero-content h2 { font-size: 22px; } } @media only screen and (max-width: 479px) { .hero-content h2 { font-size: 18px; } } .hero-content h1 { font-size: 90px; line-height: 1; font-weight: 700; text-transform: uppercase; color: #ffffff; margin-bottom: 20px; } @media only screen and (max-width: 767px) { .hero-content h1 { font-size: 60px; } } @media only screen and (max-width: 575px) { .hero-content h1 { font-size: 50px; } } @media only screen and (max-width: 479px) { .hero-content h1 { font-size: 44px; } } .hero-content h3 { font-size: 24px; color: #ffffff; margin-bottom: 40px; } @media only screen and (max-width: 767px) { .hero-content h3 { font-size: 18px; } } @media only screen and (max-width: 575px) { .hero-content h3 { font-size: 16px; margin-bottom: 30px; } } @media only screen and (max-width: 479px) { .hero-content h3 { font-size: 14px; } } /*-- Hero Content Two For Hero Slider --*/ .hero-content-2.left { text-align: left; } .hero-content-2.center { text-align: center; } .hero-content-2.right { text-align: right; } .hero-content-2 > * { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } .hero-content-2 h2 { font-size: 30px; line-height: 1; font-weight: 300; text-transform: capitalize; color: #9a1e23; margin-bottom: 20px; } @media only screen and (max-width: 767px) { .hero-content-2 h2 { font-size: 24px; } } @media only screen and (max-width: 575px) { .hero-content-2 h2 { font-size: 22px; } } @media only screen and (max-width: 479px) { .hero-content-2 h2 { font-size: 20px; } } .hero-content-2 h1 { font-size: 60px; line-height: 1; font-weight: 700; text-transform: capitalize; color: #062c5a; margin-bottom: 30px; } @media only screen and (max-width: 767px) { .hero-content-2 h1 { font-size: 50px; } } @media only screen and (max-width: 575px) { .hero-content-2 h1 { font-size: 44px; } } @media only screen and (max-width: 479px) { .hero-content-2 h1 { font-size: 36px; } } .hero-content-2 p { font-size: 16px; color: #062c5a; max-width: 650px; margin-bottom: 40px; } /*-- Slide Content In Animation --*/ .slick-active { /*-- Hero Content Two For Hero Slider --*/ } .slick-active .hero-content-2 > * { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .slick-active .hero-content-2 > *:nth-child(1) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .slick-active .hero-content-2 > *:nth-child(2) { -webkit-animation-delay: 1s; animation-delay: 1s; } .slick-active .hero-content-2 > *:nth-child(3) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .slick-active .hero-content-2 > *:nth-child(4) { -webkit-animation-delay: 2s; animation-delay: 2s; } .slick-active .hero-content-2 > *:nth-child(5) { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; } .slick-active .hero-content-2 > *:nth-child(6) { -webkit-animation-delay: 3s; animation-delay: 3s; } /*----------------------------------------*/ /* 04. About CSS /*----------------------------------------*/ .about-wrapper { margin-left: 0; margin-right: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .about-wrapper > .col, .about-wrapper > [class*="col-"] { padding-left: 0; padding-right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-wrapper { -webkit-box-align: inherit; -ms-flex-align: inherit; align-items: inherit; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-wrapper { margin-left: -15px; margin-right: -15px; } .about-wrapper > .col, .about-wrapper > [class*="col-"] { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 767px) { .about-wrapper { margin-left: -15px; margin-right: -15px; } .about-wrapper > .col, .about-wrapper > [class*="col-"] { padding-left: 15px; padding-right: 15px; } } /*-- About Image --*/ .about-image { position: relative; z-index: 1; } .about-image.about-image-1 { margin-bottom: -50px; } .about-image.about-image-2 { margin-top: -50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-image { margin: 0 !important; } } @media only screen and (max-width: 767px) { .about-image { margin: 0 !important; } } @media only screen and (max-width: 575px) { .about-image.about-image-2 { margin-top: 30px !important; } } .about-image img { width: 100%; } /*-- About Content --*/ .about-content.about-content-1 { margin-bottom: 50px; } .about-content.about-content-2 { margin-top: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content.about-content-2 { margin-top: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-content.about-content-1 { margin-bottom: 0; } .about-content.about-content-2 { margin-top: 15px; } } @media only screen and (max-width: 767px) { .about-content.about-content-1 { margin-bottom: 0; } .about-content.about-content-2 { margin-top: 15px; } } .about-content h1 { font-weight: 400; position: relative; margin-bottom: 30px; font-size: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .about-content h1 span { font-size: 48px; line-height: 1; font-weight: 700; margin-right: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content h1 { font-size: 30px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .about-content h1 { font-size: 30px; margin-bottom: 20px; } } @media only screen and (max-width: 479px) { .about-content h1 { font-size: 24px; } .about-content h1 span { font-size: 36px; } } .about-content p { margin-bottom: 20px; } .about-content p:last-child { margin-bottom: 0; } .about-content .btn { margin-top: 10px; } /*-- About Image Two --*/ .about-image-two { position: relative; } .about-image-two img { width: 100%; } .about-image-two a { position: absolute; z-index: 3; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 50%; width: 80px; height: 80px; text-align: center; background-color: #ffffff; color: #1f2d30; border-radius: 50%; padding-left: 5px; } .about-image-two a i { font-size: 40px; line-height: 80px; } .about-image-two a:hover { -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.2); -ms-transform: translateX(-50%) translateY(-50%) scale(1.2); transform: translateX(-50%) translateY(-50%) scale(1.2); } /*-- About Content Two --*/ .about-content-two h1 { font-weight: 400; margin-bottom: 15px; font-size: 30px;color: #0060aa; } .about-content-two h1::after{ display: block; height: 7px; width: 100%; background: url(/images/abo-ico.png) no-repeat left; content: ""; margin-top: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-two h1 { font-size: 30px; } } @media only screen and (max-width: 767px) { .about-content-two h1 { font-size: 30px; } } @media only screen and (max-width: 479px) { .about-content-two h1 { font-size: 24px; } } .about-content-two h4 { line-height: 1.5; margin-bottom: 25px; } .about-content-two p { margin-bottom: 20px; } .about-content-two p:last-child { margin-bottom: 0; } .about-content-two .btn { margin-top: 10px; } /*----------------------------------------*/ /* 05. About CSS /*----------------------------------------*/ .feature { display: -webkit-box; display: -ms-flexbox; display: flex; } .feature .icon { min-width: 50px; width: 50px; margin-right: 20px; } .feature .icon img { width: 100%; } .feature .content h3 { font-size: 24px; font-weight: 600; } .feature .content p { max-width: 265px; } /*----------------------------------------*/ /* 06. Project CSS /*----------------------------------------*/ /*-- Project Slider --*/ .project-slider .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; border: none; background-color: transparent; color: #297bc2; padding: 10px; width: 44px; height: 44px; border-radius: 0; text-align: center; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); opacity: 0; } .project-slider .slick-arrow::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #297bc2; background-color: transparent; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .project-slider .slick-arrow i { font-size: 24px; line-height: 20px; display: block; } .project-slider .slick-arrow.slick-prev { left: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .project-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (max-width: 767px) { .project-slider .slick-arrow.slick-prev { left: 8px; } } .project-slider .slick-arrow.slick-next { right: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .project-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (max-width: 767px) { .project-slider .slick-arrow.slick-next { right: 8px; } } .project-slider .slick-arrow:hover { background-color: #297bc2; color: #ffffff; } .project-slider .slick-arrow:hover::before { margin-left: 6px; margin-top: 6px; } .project-slider:hover .slick-arrow { opacity: 1; } .project-slider:hover .slick-arrow.slick-prev { left: 15px; } .project-slider:hover .slick-arrow.slick-next { right: 15px; } .project-slider .slick-dots { width: 100%; padding: 0; margin: 20px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .project-slider .slick-dots li { margin: 0 5px; } .project-slider .slick-dots li button { display: block; padding: 0; width: 12px; height: 12px; border: none; background-color: #d8d8d8; text-indent: -9999px; border-radius: 50px; } .project-slider .slick-dots li.slick-active button { background-color: #297bc2; } .project-slider .slick-slide > div { display: -webkit-box; display: -ms-flexbox; display: flex; } /*-- Project --*/ .project { position: relative; } .project .image { display: block; position: relative; } .project .image::before { content: ""; position: absolute; left: 10px; background-color: #000; top: 10px; right: 10px; bottom: 10px; opacity: 0.3; } .project .image img { width: 100%; } .project .content { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; padding: 0 30px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; opacity: 1; } .project .content .title { color: #ffffff; font-weight: 600; font-size: 18px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .project .content .category { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .project .content .category a { color: #ffffff; margin-right: 5px; font-size: 13px; } .project .content .category a::after { content: ','; } .project .content .category a:last-child { margin-right: 0; } .project .content .category a:last-child::after { display: none; } .project .content .category a:hover { color: #297bc2; } /*-- Project Information --*/ .project-information { background-color: #1f2d30; padding: 30px 35px; } .project-information h3 { color: #ffffff; margin-bottom: 20px; } .project-information ul li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 14px; } .project-information ul li:last-child { margin-bottom: 0; padding-bottom: 0; border: none; } .project-information ul li strong { width: 80px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } /*----------------------------------------*/ /* 07. Funfact CSS /*----------------------------------------*/ .funfact-section { background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; z-index: 1; } .funfact-section::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } /*-- Funfact --*/ .single-fact { text-align: center; } .single-fact img { margin-bottom: 20px; } .single-fact .counter { font-size: 50px; font-weight: 700; font-family: "Open Sans", sans-serif; color: #ffffff; line-height: 1; margin-bottom: 15px; } .single-fact h4 { line-height: 1; margin: 0; color: #ffffff; } /*----------------------------------------*/ /* 08. Service CSS /*----------------------------------------*/ /*-- Service --*/ .service .service-inner { text-align: center; padding: 70px 40px; border: 1px solid #eeeeee; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service .service-inner { padding: 60px 30px; } } @media only screen and (max-width: 479px) { .service .service-inner { padding: 60px 30px; } } .service .service-inner:hover { border-color: rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .service .service-inner .icon { margin-bottom: 30px; } .service .service-inner .content h3 { font-size: 24px; margin-bottom: 15px; font-weight: 600; } .service .service-inner .content .read-more { color: #1f2d30; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-transform: capitalize; font-weight: 600; position: relative; z-index: 1; line-height: 20px; } .service .service-inner .content .read-more::before { content: ""; height: 6px; width: 0; position: absolute; left: 0; bottom: 2px; background-color: #297bc2; z-index: -1; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .service .service-inner .content .read-more:hover::before { width: 100%; } .service.service-two .service-inner { padding: 0; border: 1px solid #eeeeee; } .service.service-two .service-inner:hover { border-color: transparent; -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .service.service-two .service-inner .icon { max-width: 80px; height: 80px; margin: auto; margin-top: -40px; margin-bottom: 25px; background-color: #ffffff; padding: 10px; position: relative; border-radius: 50%; z-index: 9; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); display: -webkit-box; display: -ms-flexbox; display: flex; } .service.service-two .service-inner .icon img { max-width: 100%; margin: auto; } .service.service-two .service-inner .content { padding: 0 30px 30px; } .service.service-two .service-inner .content h3 { font-size: 24px; margin-bottom: 25px; font-weight: 600; } .service.service-two .service-inner .content .read-more { color: #1f2d30; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-transform: capitalize; font-weight: 600; position: relative; z-index: 1; line-height: 20px; } .service.service-two .service-inner .content .read-more::before { content: ""; height: 6px; width: 0; position: absolute; left: 0; bottom: 2px; background-color: #297bc2; z-index: -1; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .service.service-two .service-inner .content .read-more:hover::before { width: 100%; } /*----------------------------------------*/ /* 09. Team CSS /*----------------------------------------*/ /*-- Team --*/ .team { border: 1px solid #eeeeee; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .team .image img { width: 100%; } .team .content { text-align: center; padding: 25px 20px 30px; } .team .content .title { font-size: 24px; margin-bottom: 10px; } .team .content span { display: block; line-height: 18px; margin-bottom: 5px; } .team .content .email { display: block; line-height: 18px; margin-bottom: 5px; } .team .content .social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .team .content .social a { width: 30px; height: 30px; padding: 5px; text-align: center; border-radius: 50px; display: block; border: 1px solid #297bc2; color: #297bc2; margin-top: 10px; margin-right: 10px; } .team .content .social a:last-child { margin-right: 0; } .team .content .social a:hover { color: #ffffff !important; background-color: #297bc2; } .team .content .social a:hover.facebook { background-color: #4867AA; } .team .content .social a:hover.twitter { background-color: #1DA1F2; } .team .content .social a:hover.linkedin { background-color: #007BB6; } .team .content .social a:hover.google { background-color: #DD5144; } .team .content .social a:hover.instagram { background-color: #B23A94; } .team .content .social a:hover.pinterest { background-color: #BD081B; } .team .content .social a:hover.skype { background-color: #00A9F0; } .team .content .social a:hover.tumblr { background-color: #36465D; } .team .content .social a i { display: block; font-size: 14px; line-height: 18px; } .team .content .social a.facebook { border-color: #4867AA; color: #4867AA; } .team .content .social a.twitter { border-color: #1DA1F2; color: #1DA1F2; } .team .content .social a.linkedin { border-color: #007BB6; color: #007BB6; } .team .content .social a.google { border-color: #DD5144; color: #DD5144; } .team .content .social a.instagram { border-color: #B23A94; color: #B23A94; } .team .content .social a.pinterest { border-color: #BD081B; color: #BD081B; } .team .content .social a.skype { border-color: #00A9F0; color: #00A9F0; } .team .content .social a.tumblr { border-color: #36465D; color: #36465D; } .team:hover { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); border-color: transparent; } /*-- Team Two --*/ .team-2 .image { position: relative; border-radius: 50%; overflow: hidden; width: 200px; margin: auto; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .team-2 .image::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #1f2d30; opacity: 0; -webkit-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .team-2 .image img { width: 100%; } .team-2 .image .social { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .team-2 .image .social a { width: 30px; height: 30px; padding: 5px; text-align: center; border-radius: 50px; display: block; color: #ffffff; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); margin-right: 10px; opacity: 0; } .team-2 .image .social a:nth-child(1) { -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .team-2 .image .social a:nth-child(2) { -webkit-transition: all 0.3s ease 0.1s; -o-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s; } .team-2 .image .social a:nth-child(3) { -webkit-transition: all 0.3s ease 0.2s; -o-transition: all 0.3s ease 0.2s; transition: all 0.3s ease 0.2s; } .team-2 .image .social a:nth-child(4) { -webkit-transition: all 0.3s ease 0.3s; -o-transition: all 0.3s ease 0.3s; transition: all 0.3s ease 0.3s; } .team-2 .image .social a:nth-child(5) { -webkit-transition: all 0.3s ease 0.4s; -o-transition: all 0.3s ease 0.4s; transition: all 0.3s ease 0.4s; } .team-2 .image .social a:nth-child(6) { -webkit-transition: all 0.3s ease 0.5s; -o-transition: all 0.3s ease 0.5s; transition: all 0.3s ease 0.5s; } .team-2 .image .social a:last-child { margin-right: 0; } .team-2 .image .social a i { display: block; font-size: 14px; line-height: 20px; } .team-2 .image .social a.facebook { background-color: #4867AA; } .team-2 .image .social a.twitter { background-color: #1DA1F2; } .team-2 .image .social a.linkedin { background-color: #007BB6; } .team-2 .image .social a.google { background-color: #DD5144; } .team-2 .image .social a.instagram { background-color: #B23A94; } .team-2 .image .social a.pinterest { background-color: #BD081B; } .team-2 .image .social a.skype { background-color: #00A9F0; } .team-2 .image .social a.tumblr { background-color: #36465D; } .team-2 .content { text-align: center; padding: 20px 20px 0; } .team-2 .content .title { font-size: 24px; margin-bottom: 10px; } .team-2 .content span { display: block; line-height: 18px; margin-bottom: 5px; } .team-2 .content .email { display: block; line-height: 18px; margin-bottom: 5px; } .team-2:hover .image { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } .team-2:hover .image::before { opacity: 0.75; } .team-2:hover .image .social a { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } /*----------------------------------------*/ /* 10. Testimonial CSS /*----------------------------------------*/ /*-- Testimonial Slider Image --*/ .testimonial-slider-image { max-width: 300px; margin: auto; float: none; overflow: hidden; } /*-- Testimonial --*/ .testimonial .testimonial-inner { text-align: center; } .testimonial .testimonial-inner::before { display: block; content: url(../images/icons/quote-left.png); opacity: 0.15; line-height: 1; margin-bottom: 30px; } .testimonial .testimonial-inner p { font-size: 18px; font-style: italic; line-height: 32px; margin-bottom: 25px; } .testimonial .testimonial-inner h4 { font-size: 20px; color: #297bc2; font-weight: 600; margin-bottom: 8px; } .testimonial .testimonial-inner span { font-size: 14px; display: block; line-height: 1; } .testimonial .image { width: 100px; margin: 40px auto 0; display: block; overflow: hidden; border-radius: 50%; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } .testimonial .image img { width: 100%; border-radius: 50%; } @media only screen and (max-width: 479px) { .testimonial .image { width: 90px; } } .testimonial.slick-center .image { -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*----------------------------------------*/ /* 11. Product CSS /*----------------------------------------*/ /*-- Product --*/ .product .product-inner .media { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; margin-bottom: 15px; border: 1px solid #ddd; } .product .product-inner .media .image { width: 100%; position: relative; z-index: 1; } .product .product-inner .media .image::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #1f2d30; z-index: 2; opacity: 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .product .product-inner .media .image img { width: 100%; } .product .product-inner .media .add-to-cart { z-index: 9; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); margin-top: 20px; background-color: #297bc2; color: #ffffff; text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 24px; padding: 10px 20px; white-space: nowrap; font-family: "Roboto", sans-serif; opacity: 0; } .product .product-inner .media .add-to-cart i { font-size: 20px; margin-right: 10px; } .product .product-inner .media .add-to-cart:hover { background-color: #1f2d30; color: #297bc2; } .product .product-inner .content { text-align: center; } .product .product-inner .content .price { line-height: 1; margin: 0; } .product .product-inner .content .price span.old { margin-left: 10px; color: #666666; text-decoration: line-through; } .product .product-inner .content .ratting { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 5px; } .product .product-inner .content .ratting i { font-size: 12px; line-height: 18px; margin-right: 5px; color: #297bc2; } .product .product-inner .content .ratting i:last-child { margin-right: 0; } .product .product-inner:hover .media .image::before { opacity: 0.55; } .product .product-inner:hover .media .add-to-cart { opacity: 1; margin-top: 0; } /*-- Product Details --*/ .product-details .product-inner .product-image-slider { margin-bottom: 10px; border: 1px solid #f1f2f3; padding-right: 1px; } .product-details .product-inner .product-image-slider .item a { display: block; } .product-details .product-inner .product-image-slider .item a.gallery-popup { position: relative; } .product-details .product-inner .product-image-slider .item a.gallery-popup::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #1f2d30; opacity: 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .product-details .product-inner .product-image-slider .item a.gallery-popup i { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%) scale(0); -ms-transform: translateX(-50%) translateY(-50%) scale(0); transform: translateX(-50%) translateY(-50%) scale(0); opacity: 0; font-size: 40px; color: #ffffff; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .product-details .product-inner .product-image-slider .item a.gallery-popup:hover::before { opacity: 0.75; } .product-details .product-inner .product-image-slider .item a.gallery-popup:hover i { -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); opacity: 1; } .product-details .product-inner .product-image-slider .item img { width: 100%; } .product-details .product-inner .product-thumb-slider { margin: -5px; } .product-details .product-inner .product-thumb-slider .item { padding: 5px; } .product-details .product-inner .product-thumb-slider .item img { width: 100%; border: 1px solid #f1f2f3; } .product-details .product-inner .content .title { margin-bottom: 20px; } .product-details .product-inner .content .price { margin-bottom: 15px; } .product-details .product-inner .content .price span.old { color: #666666; text-decoration: line-through; margin-left: 5px; } .product-details .product-inner .content .ratting-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 25px; } .product-details .product-inner .content .ratting-wrap h4 { margin-right: 10px; margin-bottom: 0; padding-top: 2px; } .product-details .product-inner .content .ratting-wrap .ratting i { color: #297bc2; } .product-details .product-inner .content .desc { margin-bottom: 30px; white-space: pre-line; } .product-details .product-inner .content .actions { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .product-details .product-inner .content .actions .pro-qty { text-align: center; border: 1px solid #eeeeee; } .product-details .product-inner .content .actions .pro-qty .qtybtn { height: 42px; padding: 0 10px; border: none; background-color: transparent; } .product-details .product-inner .content .actions .pro-qty input { height: 42px; width: 50px; text-align: center; border-width: 0 1px; border-style: solid; border-color: #eeeeee; color: #666666; } .product-details .product-inner .content .actions .add-to-cart { z-index: 9; margin-left: 20px; background-color: #297bc2; color: #ffffff; text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 24px; padding: 10px 20px; white-space: nowrap; font-family: "Roboto", sans-serif; } .product-details .product-inner .content .actions .add-to-cart i { font-size: 20px; margin-right: 10px; } .product-details .product-inner .content .actions .add-to-cart:hover { background-color: #1f2d30; color: #297bc2; } /*-- Product Details Tab List --*/ .product-details-tab-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0px 30px; } .product-details-tab-list li { padding: 0 15px; margin: 0px auto} .product-details-tab-list li a { line-height: 1; display: block; font-size: 18px; font-family: "Roboto", sans-serif; color: #1f2d30; padding-bottom: 8px; border-bottom: 3px solid transparent; } .product-details-tab-list li a.active { border-color: #df1519; /*color: #297bc2;*/ } /*-- Product Details Tab Content --*/ .product-specification { padding-top: 5px; } .review-form h4 { margin-bottom: 30px; } .review-form input { width: 100%; height: 50px; border: 1px solid #eeeeee; padding: 5px 20px; color: #666666; } .review-form textarea { width: 100%; height: 120px; border: 1px solid #eeeeee; padding: 10px 20px; color: #666666; resize: none; } .review-form input[type="submit"], .review-form button, .review-form .submit { width: auto; height: 50px; border: none; padding: 5px 30px; background-color: #297bc2; color: #ffffff; text-transform: uppercase; font-weight: 700; } .review-form input[type="submit"]:hover, .review-form button:hover, .review-form .submit:hover { background-color: #1f2d30; } /*--------------------------------------- 12. Cart CSS -----------------------------------------*/ /*-- Cart Table --*/ .cart-table .table { border-bottom: 2px solid #1f2d30; margin: 0; } @media only screen and (max-width: 767px) { .cart-table .table { border-top: 2px solid #1f2d30; } } .cart-table .table thead { background-color: #1f2d30; } @media only screen and (max-width: 767px) { .cart-table .table thead { display: none; } } .cart-table .table thead tr th { text-align: center; border: none; font-size: 16px; font-weight: 600; color: #ffffff; padding: 12px 20px; } .cart-table .table tbody tr td { text-align: center; border: none; padding: 25px 20px; vertical-align: middle; border-bottom: 1px solid #dddddd; } @media only screen and (max-width: 767px) { .cart-table .table tbody tr td { display: block; width: 100%; max-width: none; padding: 15px; text-align: left; } } .cart-table th.pro-thumbnail, .cart-table td.pro-thumbnail { max-width: 120px; min-width: 100px; width: 120px; } @media only screen and (max-width: 767px) { .cart-table th.pro-thumbnail a, .cart-table td.pro-thumbnail a { width: 120px; } } .cart-table th.pro-title, .cart-table td.pro-title { min-width: 200px; } .cart-table td.pro-thumbnail a { display: block; border: 1px solid #eeeeee; } .cart-table td.pro-thumbnail a img { width: 100%; background-color: #f6f7f8; } .cart-table td.pro-title a { font-size: 16px; font-weight: 600; color: #666666; } .cart-table td.pro-title a:hover { color: #297bc2; } .cart-table td.pro-price span { display: block; font-size: 15px; font-weight: 600; color: #666666; } .cart-table td.pro-quantity .pro-qty { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-align: center; border: 1px solid #eeeeee; } .cart-table td.pro-quantity .pro-qty .qtybtn { height: 42px; padding: 0 10px; border: none; background-color: transparent; } .cart-table td.pro-quantity .pro-qty input { height: 42px; width: 50px; text-align: center; border-width: 0 1px; border-style: solid; border-color: #eeeeee; color: #666666; } .cart-table td.pro-subtotal span { display: block; font-size: 15px; font-weight: 600; color: #666666; } .cart-table td.pro-addtocart button { width: 140px; border-radius: 50px; height: 36px; border: 1px solid #297bc2; line-height: 24px; padding: 5px 20px; font-weight: 700; text-transform: capitalize; color: #1f2d30; background-color: #297bc2; } .cart-table td.pro-addtocart button:hover { background-color: #1f2d30; border-color: #1f2d30; color: #297bc2; } .cart-table td.pro-remove a { display: block; font-weight: 600; color: #666666; } .cart-table td.pro-remove a i { font-size: 15px; } .cart-table td.pro-remove a:hover { color: #ff0000; } @media only screen and (max-width: 767px) { .cart-table td.pro-remove a { width: 60px; text-align: center; } } /*-- Calculate Shipping --*/ .calculate-shipping { margin-bottom: 23px; } .calculate-shipping h4 { font-size: 20px; line-height: 23px; text-decoration: underline; text-transform: capitalize; font-weight: 700; margin-bottom: 30px; } .calculate-shipping form .nice-select { width: 100%; border-radius: 0; height: 44px; border: 1px solid #999999; line-height: 24px; padding: 9px 20px; color: #666666; background-color: transparent; } .calculate-shipping form input { width: 100%; height: 44px; border: 1px solid #999999; line-height: 24px; padding: 9px 20px; color: #666666; color: #666666; background-color: transparent; } .calculate-shipping form input[type="submit"] { font-weight: 700; color: #1f2d30; background-color: #297bc2; border-color: #297bc2; width: 140px; } .calculate-shipping form input[type="submit"]:hover { background-color: #1f2d30; border-color: #1f2d30; color: #297bc2; } /*-- Discount Coupon --*/ .discount-coupon h4 { font-size: 20px; line-height: 23px; text-decoration: underline; text-transform: capitalize; font-weight: 700; margin-bottom: 30px; } .discount-coupon form input { width: 100%; height: 44px; border: 1px solid #999999; line-height: 24px; padding: 9px 20px; color: #666666; background-color: transparent; } .discount-coupon form input[type="submit"] { font-weight: 700; color: #1f2d30; background-color: #297bc2; border-color: #297bc2; width: 140px; } .discount-coupon form input[type="submit"]:hover { background-color: #1f2d30; border-color: #1f2d30; color: #297bc2; } /*-- Cart Summary --*/ .cart-summary { float: right; max-width: 410px; width: 100%; margin-left: auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cart-summary { margin-left: 0; } } @media only screen and (max-width: 767px) { .cart-summary { margin-left: 0; } } .cart-summary .cart-summary-wrap { background-color: #1f2d30; padding: 45px 50px; margin-bottom: 20px; } @media only screen and (max-width: 575px) { .cart-summary .cart-summary-wrap { padding: 25px 30px; } } .cart-summary .cart-summary-wrap h4 { font-size: 20px; line-height: 23px; text-decoration: underline; text-transform: capitalize; font-weight: 700; margin-bottom: 30px; color: #297bc2; } .cart-summary .cart-summary-wrap p { font-size: 14px; font-weight: 600; line-height: 23px; color: #ffffff; } .cart-summary .cart-summary-wrap p span { float: right; } .cart-summary .cart-summary-wrap h2 { border-top: 1px solid #ffffff; padding-top: 9px; font-size: 18px; line-height: 23px; font-weight: 700; color: #297bc2; margin: 0; } .cart-summary .cart-summary-wrap h2 span { float: right; } .cart-summary .cart-summary-button { overflow: hidden; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cart-summary .cart-summary-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media only screen and (max-width: 767px) { .cart-summary .cart-summary-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .cart-summary .cart-summary-button button { margin-top: 10px; width: 140px; border-radius: 0; height: 44px; border: 1px solid #999999; line-height: 24px; padding: 9px 20px; color: #666666; background-color: transparent; margin-left: 20px; font-weight: 700; float: right; } .cart-summary .cart-summary-button button:last-child { margin-left: 0; } .cart-summary .cart-summary-button button.checkout-btn { color: #1f2d30; background-color: #297bc2; border-color: #297bc2; } .cart-summary .cart-summary-button button:hover { background-color: #1f2d30; border-color: #1f2d30; color: #297bc2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cart-summary .cart-summary-button button { margin-left: 0; margin-right: 20px; } .cart-summary .cart-summary-button button:last-child { margin-right: 0; } } @media only screen and (max-width: 767px) { .cart-summary .cart-summary-button button { margin-left: 0; margin-right: 10px; } .cart-summary .cart-summary-button button:last-child { margin-right: 0; } } @media only screen and (max-width: 575px) { .cart-summary .cart-summary-button button { width: 130px; } } /*--------------------------------------- 13. Checkout CSS -----------------------------------------*/ /*-- Checkout Title --*/ .checkout-title { font-size: 20px; line-height: 23px; text-decoration: underline; text-transform: capitalize; font-weight: 700; margin-bottom: 30px; } /*-- Checkout Form --*/ .checkout-form label { display: block; font-size: 14px; margin-bottom: 12px; font-weight: 600; text-transform: capitalize; } .checkout-form .nice-select { width: 100%; background-color: transparent; border: 1px solid #999999; border-radius: 0; line-height: 23px; padding: 10px 20px; font-size: 14px; height: 45px; color: #666666; margin-bottom: 15px; } .checkout-form input { width: 100%; background-color: transparent; border: 1px solid #999999; border-radius: 0; line-height: 23px; padding: 10px 20px; font-size: 14px; color: #666666; margin-bottom: 15px; } .checkout-form input[type="checkbox"] { width: auto; } .checkout-form .check-box { float: left; margin-right: 70px; } .checkout-form .check-box:last-child { margin-right: 0; } .checkout-form .check-box input[type="checkbox"] { display: none; } .checkout-form .check-box input[type="checkbox"] + label { position: relative; padding-left: 30px; line-height: 20px; font-size: 14px; font-weight: 400; color: #1f2d30; margin: 0; } .checkout-form .check-box input[type="checkbox"] + label::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: block; border: 2px solid #999999; content: ""; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .checkout-form .check-box input[type="checkbox"] + label::after { position: absolute; left: 0; top: 0; display: block; content: "\f00c"; font-family: Fontawesome; font-size: 12px; line-height: 20px; opacity: 0; color: #1f2d30; width: 20px; text-align: center; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .checkout-form .check-box input[type="checkbox"]:checked + label::before { border: 2px solid #1f2d30; } .checkout-form .check-box input[type="checkbox"]:checked + label::after { opacity: 1; } /*-- Shipping Form --*/ #shipping-form { display: none; } /*-- Checkout Cart Total --*/ .checkout-cart-total { background-color: #1f2d30; padding: 45px; } @media only screen and (max-width: 575px) { .checkout-cart-total { padding: 30px; } } .checkout-cart-total h4 { -ms-flex-preferred-size: 18px; flex-basis: 18px; line-height: 23px; font-weight: 700; color: #297bc2; } .checkout-cart-total h4:first-child { margin-top: 0; margin-bottom: 25px; } .checkout-cart-total h4:last-child { margin-top: 15px; margin-bottom: 0; } .checkout-cart-total h4 span { float: right; display: block; } .checkout-cart-total ul { border-bottom: 1px solid #ffffff; } .checkout-cart-total ul li { color: #ffffff; font-size: 14px; line-height: 23px; font-weight: 600; display: block; margin-bottom: 16px; } .checkout-cart-total ul li span { color: #ffffff; float: right; } .checkout-cart-total p { font-size: 14px; line-height: 30px; font-weight: 600; color: #ffffff; padding: 10px 0; border-bottom: 1px solid #ffffff; margin: 0; } .checkout-cart-total p span { float: right; } /*-- Checkout Payment Method --*/ .checkout-payment-method { background-color: #1f2d30; padding: 45px; } @media only screen and (max-width: 575px) { .checkout-payment-method { padding: 30px; } } /*-- Single Payment Method --*/ .single-method { margin-bottom: 20px; } .single-method:last-child { margin-bottom: 0; } .single-method input[type="radio"] { display: none; } .single-method input[type="radio"] + label { position: relative; padding-left: 30px; line-height: 20px; font-size: 14px; font-weight: 400; color: #ffffff; margin: 0; } .single-method input[type="radio"] + label::before { position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: block; border: 2px solid #ffffff; content: ""; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .single-method input[type="radio"] + label::after { position: absolute; left: 5px; top: 5px; display: block; content: ""; opacity: 0; background-color: #297bc2; width: 10px; text-align: center; height: 10px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .single-method input[type="radio"]:checked + label::before { border: 2px solid #297bc2; } .single-method input[type="radio"]:checked + label::after { opacity: 1; } .single-method input[type="checkbox"] { display: none; } .single-method input[type="checkbox"] + label { position: relative; padding-left: 30px; line-height: 20px; font-size: 14px; font-weight: 400; color: #ffffff; margin: 0; } .single-method input[type="checkbox"] + label::before { position: absolute; left: 0; top: 0; width: 16px; height: 16px; display: block; border: 2px solid #ffffff; content: ""; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .single-method input[type="checkbox"] + label::after { position: absolute; left: 4px; top: 4px; display: block; content: ""; opacity: 0; background-color: #297bc2; width: 8px; text-align: center; height: 8px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .single-method input[type="checkbox"]:checked + label::before { border: 2px solid #297bc2; } .single-method input[type="checkbox"]:checked + label::after { opacity: 1; } .single-method p { display: none; margin-top: 8px; font-size: 14px; color: #ffffff; line-height: 23px; } /*-- Place Order --*/ .place-order { margin-top: 40px; float: left; } /*--------------------------------------- 14. Blog CSS -----------------------------------------*/ /*-- Blog Slider --*/ .blog-slider .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; border: none; background-color: transparent; color: #297bc2; padding: 10px; width: 44px; height: 44px; border-radius: 0; text-align: center; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); opacity: 0; } .blog-slider .slick-arrow::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #297bc2; background-color: transparent; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .blog-slider .slick-arrow i { font-size: 24px; line-height: 20px; display: block; } .blog-slider .slick-arrow.slick-prev { left: -40px; margin-left: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .blog-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (max-width: 767px) { .blog-slider .slick-arrow.slick-prev { left: 8px; } } .blog-slider .slick-arrow.slick-next { right: -40px; margin-right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .blog-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (max-width: 767px) { .blog-slider .slick-arrow.slick-next { right: 8px; } } .blog-slider .slick-arrow:hover { background-color: #297bc2; color: #ffffff; } .blog-slider .slick-arrow:hover::before { margin-left: 6px; margin-top: 6px; } .blog-slider:hover .slick-arrow { opacity: 1; } .blog-slider:hover .slick-arrow.slick-prev { margin-left: 0; } .blog-slider:hover .slick-arrow.slick-next { margin-right: 0; } .blog-slider .slick-dots { width: 100%; padding: 0; margin: 20px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .blog-slider .slick-dots li { margin: 0 5px; } .blog-slider .slick-dots li button { display: block; padding: 0; width: 12px; height: 12px; border: none; background-color: #d8d8d8; text-indent: -9999px; border-radius: 50px; } .blog-slider .slick-dots li.slick-active button { background-color: #297bc2; } /*-- Blog --*/ .blog .blog-inner .media { margin-bottom: 20px; } .blog .blog-inner .media .image { max-height: 240px; overflow: hidden; display: block; } .blog .blog-inner .media .image img { width: 100%; } .blog .blog-inner .content .meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px; } .blog .blog-inner .content .meta li { font-size: 14px; font-weight: 500; line-height: 18px; text-transform: capitalize; margin-bottom: 5px; } .blog .blog-inner .content .meta li::after { content: "-"; margin: 0 10px; } .blog .blog-inner .content .meta li:last-child::after { display: none; } .blog .blog-inner .content .title { font-size: 24px; font-weight: 600; margin-bottom: 0; } @media only screen and (max-width: 479px) { .blog .blog-inner .content .title { font-size: 20px; } } .blog .blog-inner .content .desc { margin-top: 20px; } .blog .blog-inner .content .read-more { margin-top: 15px; font-family: "Roboto", sans-serif; color: #1f2d30; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog .blog-inner .content .read-more i { margin-left: 6px; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .blog .blog-inner .content .read-more:hover { color: #297bc2; } .blog .blog-inner .content .read-more:hover i { margin-left: 10px; } /*-- Blog Details --*/ .blog-details .blog-inner .media { margin-bottom: 30px; } .blog-details .blog-inner .media .image { display: block; } .blog-details .blog-inner .media .image img { width: 100%; } .blog-details .blog-inner .content .meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 10px; } .blog-details .blog-inner .content .meta li { font-size: 14px; font-weight: 500; line-height: 18px; text-transform: capitalize; margin-bottom: 5px; } .blog-details .blog-inner .content .meta li::after { content: "-"; margin: 0 10px; } .blog-details .blog-inner .content .meta li:last-child::after { display: none; } .blog-details .blog-inner .content .title { font-size: 30px; font-weight: 600; margin-bottom: 0; } @media only screen and (max-width: 767px) { .blog-details .blog-inner .content .title { font-size: 24px; } } @media only screen and (max-width: 479px) { .blog-details .blog-inner .content .title { font-size: 20px; } } .blog-details .blog-inner .content .desc { margin-top: 20px;font-size: 16px; } .blog-details .blog-inner .content .iframe { max-width: 100% } .blog-details .blog-inner .content .tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-details .blog-inner .content .tags li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 24px; margin-right: 15px; } .blog-details .blog-inner .content .tags li::after { content: ","; margin-left: 3px; } .blog-details .blog-inner .content .tags li:first-child::after, .blog-details .blog-inner .content .tags li:last-child::after { display: none; } .blog-details .blog-inner .content .tags li i { font-size: 18px; line-height: 24px; } .blog-details .blog-inner .content .tags li a { display: block; } /*--------------------------------------- 15. Comment CSS -----------------------------------------*/ /*-- Comment Wrap --*/ .comment-wrapper h3 { margin-bottom: 30px; } /*-- Comment Form --*/ .comment-form input { width: 100%; height: 50px; border: 1px solid #eeeeee; padding: 5px 20px; color: #666666; } .comment-form textarea { width: 100%; height: 120px; border: 1px solid #eeeeee; padding: 10px 20px; color: #666666; resize: none; } .comment-form input[type="submit"], .comment-form button, .comment-form .submit { width: auto; height: 50px; border: none; padding: 5px 30px; background-color: #297bc2; color: #ffffff; text-transform: uppercase; font-weight: 700; } .comment-form input[type="submit"]:hover, .comment-form button:hover, .comment-form .submit:hover { background-color: #1f2d30; } /*--------------------------------------- 16. Sidebar CSS -----------------------------------------*/ /*-- Sidebar --*/ .sidebar { margin-bottom: 50px; background-color: #f7f8f9; padding: 30px; } .sidebar.sidebar-two { padding: 0; background-color: transparent; } .sidebar:last-child { margin-bottom: 0; } /*-- Sidebar Title --*/ .sidebar-title { margin-bottom: 30px; margin-top: -4px; } /*-- Sidebar Search --*/ .sidebar-search form { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid #e5e6e7; } .sidebar-search form input { -webkit-box-flex: 1; -ms-flex: 1 0 calc(100% - 40px); flex: 1 0 calc(100% - 40px); max-width: calc(100% - 40px); height: 40px; border: none; background-color: transparent; padding: 0 15px; color: #666666; } .sidebar-search form button { max-width: 40px; -webkit-box-flex: 1; -ms-flex: 1 0 40px; flex: 1 0 40px; height: 40px; border: none; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0; } .sidebar-search form button i { font-size: 20px; } .sidebar-search form button:hover { color: #297bc2; } /*-- Sidebar List --*/ .sidebar-list li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #e5e6e7; } .sidebar-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0px solid transparent; } .sidebar-list li a { font-size: 14px; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sidebar-list li a img { width: 25px; margin-right: 15px; } .sidebar-list li a i { margin-right: 15px; font-size: 24px; } .sidebar-list li a:hover { color: #297bc2; } /*-- Sidebar Blog --*/ .sidebar-blog { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e5e6e7; } .sidebar-blog:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .sidebar-blog .image { max-width: 80px; -webkit-box-flex: 1; -ms-flex: 1 0 80px; flex: 1 0 80px; } .sidebar-blog .image img { width: 100%; } .sidebar-blog .content { -webkit-box-flex: 1; -ms-flex: 1 0 calc(100% - 80px); flex: 1 0 calc(100% - 80px); max-width: calc(100% - 80px); padding-left: 15px; } .sidebar-blog .content h5 { font-size: 16px; line-height: 1.5; } .sidebar-blog .content a {display: block; text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; } .sidebar-blog .content span { font-size: 13px; display: block; line-height: 18px; } /*-- Sidebar Tags --*/ .sidebar-tag { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -5px; } .sidebar-tag li { padding: 5px; } .sidebar-tag li a { display: block; border: 1px solid #e5e6e7; padding: 3px 15px; font-size: 14px; } .sidebar-tag li a:hover { background-color: #1f2d30; border-color: #1f2d30; color: #297bc2; } /*-- Sidebar Product --*/ .sidebar-product { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e5e6e7; } .sidebar-product:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .sidebar-product .image { max-width: 80px; -webkit-box-flex: 1; -ms-flex: 1 0 80px; flex: 1 0 80px; } .sidebar-product .image img { width: 100%; border: 1px solid #f1f2f3; } .sidebar-product .content { -webkit-box-flex: 1; -ms-flex: 1 0 calc(100% - 80px); flex: 1 0 calc(100% - 80px); padding-left: 15px; } .sidebar-product .content .title { font-size: 16px; line-height: 1.5; margin-bottom: 5px; } .sidebar-product .content .price span.old { margin-left: 10px; color: #666666; text-decoration: line-through; } .sidebar-product .content .ratting { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 5px; } .sidebar-product .content .ratting i { font-size: 12px; line-height: 18px; margin-right: 5px; color: #297bc2; } .sidebar-product .content .ratting i:last-child { margin-right: 0; } /*----------------------------------------*/ /* 17. Brand CSS /*----------------------------------------*/ /*-- Brand Slider --*/ .brand-slider .slick-list .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .brand-slider .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -15px; z-index: 9; border: none; background-color: #ffffff; color: #297bc2; padding: 10px; width: 44px; height: 44px; border-radius: 50%; text-align: center; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); opacity: 0; } .brand-slider .slick-arrow i { font-size: 24px; line-height: 24px; display: block; } .brand-slider .slick-arrow.slick-prev { left: -7px; margin-left: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .brand-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .brand-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand-slider .slick-arrow.slick-prev { left: 8px; } } @media only screen and (max-width: 767px) { .brand-slider .slick-arrow.slick-prev { left: 8px; } } .brand-slider .slick-arrow.slick-next { right: -7px; margin-right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1499px) { .brand-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .brand-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .brand-slider .slick-arrow.slick-next { right: 8px; } } @media only screen and (max-width: 767px) { .brand-slider .slick-arrow.slick-next { right: 8px; } } .brand-slider .slick-arrow:hover { background-color: #297bc2; color: #ffffff; } .brand-slider:hover .slick-arrow { opacity: 1; } .brand-slider:hover .slick-arrow.slick-prev { margin-left: 0; } .brand-slider:hover .slick-arrow.slick-next { margin-right: 0; } .brand-slider .slick-dots { width: 100%; padding: 0; margin: 10px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .brand-slider .slick-dots li { margin: 0 5px; } .brand-slider .slick-dots li button { display: block; padding: 0; width: 12px; height: 12px; border: none; background-color: #d8d8d8; text-indent: -9999px; border-radius: 50px; } .brand-slider .slick-dots li.slick-active button { background-color: #297bc2; } /*-- Brand --*/ .brand { text-align: center; } .brand img { max-width: 100%; margin: auto; } /*--------------------------------------- 16. Sidebar CSS -----------------------------------------*/ /*-- Map --*/ .contact-map { height: 400px; width: 100%; } /*-- Contact Information --*/ .contact-information h3 { margin-bottom: 30px; } .contact-information ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 30px; } .contact-information ul li:last-child { margin-bottom: 0; } .contact-information ul li .icon { width: 50px; } .contact-information ul li .icon i { font-size: 30px; } .contact-information ul li .text { max-width: calc(100% - 50px); } .contact-information ul li .text span{ display: block; line-height: 24px; } /*-- Contact Form --*/ .contact-form h3 { margin-bottom: 30px; } .contact-form input { width: 100%; height: 50px; border: 1px solid #eeeeee; padding: 5px 20px; color: #666666; } .contact-form textarea { width: 100%; height: 120px; border: 1px solid #eeeeee; padding: 10px 20px; color: #666666; resize: none; } .contact-form input[type="submit"], .contact-form button, .contact-form .submit { width: auto; height: 50px; border: none; padding: 5px 30px; background-color: #297bc2; color: #ffffff; text-transform: uppercase; font-weight: 700; } .contact-form input[type="submit"]:hover, .contact-form button:hover, .contact-form .submit:hover { background-color: #1f2d30; } /*----------------------------------------*/ /* 19. Footer CSS /*----------------------------------------*/ .footer-section { background-color: #080f1e; position: relative; z-index: 1; } .footer-section::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: -1; } /*-- Footer Widget --*/ .footer-widget .title { font-size: 18px; font-weight: 400; color: #d8d8d8; white-space: nowrap; text-transform: uppercase; margin-bottom: 30px; border-bottom: 1px solid #2b313e;} .footer-widget .title::after{ display: block;width: 50px;height: 3px;content: "";background: #2761d8; } .footer-widget .title .text { display: block;line-height: 32px;padding-bottom: 10px; } .footer-widget img { margin-bottom: 18px; } .footer-widget p { color: #d8d8d8; margin-bottom: 12px; line-height: 22px; } @media only screen and (max-width: 767px) { .footer-widget p { width: auto; } } .footer-widget ul li { color: #d8d8d8; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; line-height: 22px; margin-bottom: 12px; } .footer-widget ul li:last-child { margin-bottom: 0; } .footer-widget ul li i { margin-right: 15px; line-height: 22px; font-size: 18px; } .footer-widget ul li span { overflow: hidden; } .footer-widget ul li a { display: block; } .footer-widget ul li a:hover { color: #297bc2; } /*-- Footer Social --*/ .footer-instafeed { margin: -5px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-instafeed li { padding: 5px; max-width: 33.3333%; -webkit-box-flex: 1; -ms-flex: 1 0 33.3333%; flex: 1 0 33.3333%; margin: 0 !important; } .footer-instafeed li a { display: block; position: relative; overflow: hidden; } .footer-instafeed li a img { width: 100%; margin: 0; } .footer-instafeed li a::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: #1f2d30; opacity: 0; z-index: 3; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .footer-instafeed li a::after { position: absolute; font-family: Fontawesome; content: "\f16d"; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 4; font-size: 18px; opacity: 0; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .footer-instafeed li a:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .footer-instafeed li a:hover::before { opacity: 0.75; } .footer-instafeed li a:hover::after { opacity: 1; } /*-- Footer Social --*/ .footer-social { } .footer-social a { text-align: center; border-radius: 50px; color: #ffffff; margin-top: 5px; margin-right: 15px;height: 40px; width: 40px; border: 1px solid #fff; line-height: 48px; } .footer-social a:last-child { margin-right: 0; } .footer-social a:hover { color: #297bc2;border-color: #297bc2; } .footer-social a i { display: block; font-size: 18px; line-height: 40px; } /*-- Footer News Letter --*/ .footer-newsletter { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-newsletter input { width: calc(100% - 40px); max-width: 250px; border: 1px solid rgba(255, 255, 255, 0.3); background-color: transparent; color: #ffffff; line-height: 24px; padding: 7px 15px; font-size: 13px; } .footer-newsletter button { width: 40px; height: 40px; border: none; background-color: #a21413; color: #ffffff; } /*-- Footer Bottom --*/ .footer-bottom .container{ background: #0f192f; } /*-- Copyright --*/ .copyright{background: #0f192f;} .copyright p { line-height: 30px;font-size: 14px; color: #d8d8d8; } .copyright p a:hover { color: #297bc2; }