/* ===================================== Template Name: Bizhub Author Name: Naimur Rahman Website: www.wpthemesgrid.com Description: Bizhub - Consulting Business HTML Template. Version: 1.0 ========================================*/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ @font-face { font-family: 'SimHei'; src: url("../fonts/SimHei.ttf"); } html { font-family: 'Microsoft YaHei UI Light', 'Barlow', sans-serif; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } html,body { height: 100%; margin: 0; } *{ padding:0; margin:0; } body { margin: 0; } img{ max-width:100%; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { text-decoration:none; } a:active, a:hover { outline: 0; text-decoration:none; } .slicknav_menu{ display:none; } .table { display: table; width: 100%; height: 100%; } .table-cell { display: table-cell; vertical-align: middle; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } #scrollUp { right:30px; z-index: 33; bottom:40px; text-align: center; } #scrollUp i { height: 45px; width: 45px; line-height: 45px; border: 2px solid #0C59DB; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.08); border-radius: 3px; font-size: 17px; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; transition: all 500ms ease; display: block; color: #0C59DB; } #scrollUp i:hover{ background:#0C59DB; color:#fff; } /* Bread Crumbs */ .breadcrumbs { background-image: url('/static/images/banner1.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; /*padding: 110px 0px;*/ height: 400px; } /*Subheader*/ .breadcrumbs:before{ content: ''; background-color: #14212b; opacity: 0.5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .breadcrumbs .breadcrumbs-content{ position: relative; } .breadcrumbs .breadcrumbs-content .page-title { font-size: 35px; margin-bottom: 8px; color:#fff; } .breadcrumbs .breadcrumbs-content .breadcrumb { background: transparent; border-radius: 0; margin-bottom: 0; padding: 0; } .breadcrumbs .breadcrumbs-content .breadcrumb li, .breadcrumbs .breadcrumbs-content .breadcrumb li a{ color: #fff; font-size: 16px; font-weight:500; } .breadcrumbs .breadcrumbs-content .breadcrumb li a{ padding-right: 15px; margin-right: 15px; position: relative; } .breadcrumbs .breadcrumbs-content .breadcrumb li a:hover{ color: #0C59DB; } .breadcrumbs .breadcrumbs-content .breadcrumb li a:after{ content: ''; height: 80%; width: 1px; background-color: #fff; position: absolute; top: 4px; right: 0; } /* Pagination CSS */ .pagination { text-align: left; margin: 65px 0 0 0; display: block; } .pagination.center { text-align: center; } .pagination .pagination-list li { margin-right: 5px; display: inline-block; line-height: 50px; } .pagination .pagination-list li:last-child{ margin-right:0px; } .pagination .pagination-list li a { background: #fff; color: #181E4E; padding: 10px 20px; font-weight: 500; border: 1px solid #e1e1e1; font-size: 16px; border-radius: 3px; } .pagination .pagination-list li.active a,.pagination .pagination-list li:hover a{ background: #0C59DB; color: #fff; border-color: transparent; } .pagination .pagination-list li a i{ font-size:20px; } .pagination .pagination-list li a i{} .blog-grids.pagination{ margin-top:50px; text-align:center; } /*-------------------------------------------------------------------------------------- PRELOADER --------------------------------------------------------------------------------------*/ .preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #FFF; z-index: 9999999; text-align: center } .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; display: flex; align-items: center; } .line { width: 7px; height: 40px; background: #0C59DB; margin: 0 3px; border-radius: 3px; animation: loading 1s infinite; } .line:nth-child(2) { animation-delay: 0.1s; } .line:nth-child(3) { animation-delay: 0.2s; } .line:nth-child(4) { animation-delay: 0.3s; } .line:nth-child(5) { animation-delay: 0.4s; } .line:nth-child(6) { animation-delay: 0.5s; } .line:nth-child(7) { animation-delay: 0.6s; } .line:nth-child(8) { animation-delay: 0.7s; } @keyframes loading { 0% { height: 0; } 50% { height: 40px; } 100% { height: 0; } } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body, button, input, select, optgroup, textarea { color: #181E4E; font-family: 'Microsoft YaHei UI Light', 'Barlow', sans-serif; font-weight:400; font-size: 16px; line-height: 24px; } h1,h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6 a { font-weight: 800; margin: 0; color:#181E4E; } h1{ line-height:45px; } h2{ line-height:40px; } h3{ line-height:35px; } h4{ line-height:30px; } h5{ line-height:25px; } h6{ line-height:20px; } p { color:#909090; margin: 0; line-height:24px; font-weight:400; font-size:16px; } a,button,input,textarea{ font-weight:600; } img,a,input,h1, h2, h3, h4, h5, h6{ -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } dfn, cite, em, i { font-style: italic; } address { margin: 0 0 1.5em; } ul, ul li{ margin:0; list-style:none; } pre { background: #eee; font-family: 'Microsoft YaHei UI Light', 'Barlow', sans-serif; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: 'Microsoft YaHei UI Light', 'Barlow', sans-serif; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } .section { padding-top:100px; padding-bottom:100px; position: relative; } .section-title { margin-bottom: 40px; text-align: center; position: relative; z-index: 22; } .section-title h2 { font-size: 35px; position: relative; display: block; text-transform: capitalize; color: #181E4E; font-weight: 800; line-height: 34px; margin-top: 10px; } .section-title h4 { display: block; font-size: 18px; color: #0C59DB; font-weight: 400; text-transform: capitalize; position: relative; display: inline-block; } .section-title h4::before { position: absolute; content: ""; left: -41px; top: 50%; height: 1px; width: 30px; border-radius: 0; background: #0C59DB; } .section-title h4::after { position: absolute; content: ""; right: -41px; top: 50%; height: 1px; width: 30px; border-radius: 0; background: #0C59DB; } .container{ max-width:1170px; } .overlay{ position:relative } .overlay::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; background: #000; content: ""; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .custom-shadow{ box-shadow: 0px 20px 60px #00000024; } .button .btn { text-align: center; margin: 0; padding: 0; padding: 14px 30px; background: #0C59DB; color: #fff; font-size: 15px; font-weight: 500; border-radius: 3px; text-transform: capitalize; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; } .button .btn:hover{ background:#181E4E; color:#fff; } .btn2{ display: inline-block; color: #555; font-size: 15px; font-weight:500; position:relative; } .btn2:before{ position: absolute; content: ""; left: 0; bottom: 4px; height: 1px; width: 0%; background: #0C59DB; display: inline-block; display: block; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; transition:all 0.4s ease; } .btn2:hover:before{ width:100%; } .btn2:hover{ color:#0C59DB; letter-spacing: 1px; } .button .btn3 { text-align: center; margin: 0; padding: 0; padding: 14px 30px; font-size: 15px; font-weight: 500; border-radius: 3px; text-transform: capitalize; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; transition: all 0.4s ease; display: inline-block; border:2px solid #0C59DB; color:#0C59DB; background:transparent; } .button .btn3:hover{ border-color:transparent; color:#fff; background:#0C59DB; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul,ul li{ list-style:none; padding:0; margin:0; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 1.5em; width: 100%; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; color: rgba(0, 0, 0, 0.8); line-height: 1; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { border: 1px solid #ccc; } textarea { width: 100%; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { color: inherit; } a:visited { color: inherit; } a:hover, a:focus, a:active { color: #0C59DB; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation { clear: both; display: block; float: left; width: 100%; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation li { float: left; position: relative; } .main-navigation a { display: block; text-decoration: none; } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: block; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; /* Make sure select elements fit in widgets. */ } .widget select { max-width: 100%; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .updated:not(.published) { display: none; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /* Precon Options */ .techopz-options { position: fixed; display: block; z-index: 99998; padding: 20px; width: 245px; background: #fff; right: -245px; text-align: left; top: 30%; -webkit-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2); -moz-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2); box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2); } .techopz-options .icon { position: absolute; left: -50px; width: 50px; height: 50px; line-height: 50px; font-size: 25px; border-radius: 5px 0 0 5px; background: #fff; text-align: center; color: #333; top: 0; cursor: pointer; box-shadow: -4px 0px 5px #00000036; } .techopz-options .icon i { cursor: pointer; } .techopz-options h4 { display: block; font-size: 14px; margin-bottom: 5px; } .techopz-options .single-option p { font-size: 14px; margin-bottom:15px; } .techopz-options ul li{ font-weight:500; font-size:14px; } .techopz-options ul li a{ color:#555; } .techopz-options span { width: 48px; height: 40px; border-radius: 0; cursor: pointer; display: inline-block; border: 2px solid #eee; } .techopz-options .select-layout a { border: 1px solid #eee; text-align: center; padding: 5px 0; outline: none; display: inline-block; padding: 5px 13px; color: #353535; cursor: pointer; font-size: 13px; } .techopz-options .select-layout a i { margin-right: 5px; } .techopz-options .single-option { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; outline:none; } .techopz-options .single-option:last-child{ margin:0; padding:0; border:none; } .techopz-options .bg-pattern li{ display:inline-block; } .techopz-options .bg-pattern li img { width: 38px; height: 34px; border: 1px solid #ccc; } .techopz-options span{ position:relative; } /* Skin 1 */ .techopz-options span.skin1:before, .techopz-options span.skin1:after{ content:""; position:absolute; top:0; width:50%; height:100%; } .techopz-options span.skin1:before{ left:0; background:#0C59DB; } .techopz-options span.skin1:after{ right:0; background:#0C59DB; } /* Skin 2 */ .techopz-options span.skin2:before, .techopz-options span.skin2:after{ content:""; position:absolute; top:0; width:50%; height:100%; } .techopz-options span.skin2:before{ left:0; background:#FF5E15; } .techopz-options span.skin2:after{ right:0; background:#FF5E15; } /* Skin 3 */ .techopz-options span.skin3:before, .techopz-options span.skin3:after{ content:""; position:absolute; top:0; width:50%; height:100%; } .techopz-options span.skin3:before{ left:0; background:#32B87D; } .techopz-options span.skin3:after{ right:0; background:#32B87D; } /* Skin 4 */ .techopz-options span.skin4:before, .techopz-options span.skin4:after{ content:""; position:absolute; top:0; width:50%; height:100%; } .techopz-options span.skin4:before { left: 0; background: #FEC43C; } .techopz-options span.skin4:after{ right:0; background:#FEC43C; } /* Video Animations */ @keyframes play-btn-1 { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); opacity: 0; } } @keyframes play-btn-2 { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); opacity: 0; } }