/* Theme Name: Business Way Lite Theme URI: Author: WEN Themes Author URI: http://wenthemes.com Description: Business Way Lite is clean and responsive, modern and feature rich multipurpose WordPress theme. It is suitable for business, portfolio, digital agencies and general corporate website. It is designed with great attention to details, flexibility and performance thus looks stunning on all types of screens and devices. It comes with creative and well-organized sections. Smooth integration with SiteOrigin Page Builder makes customization easy and enriched user experience. Version: 1.0.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: business-way-lite Tags: custom-logo, custom-menu, custom-header, featured-images, threaded-comments, translation-ready, blog Business Way Lite WordPress Theme, Copyright (C) 2017, WEN Themes Business Way Lite is distributed under the terms of the GNU GPL This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Business Way is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1. Normalize 2. Typography 3. Elements 4. Forms 4.1. Search Forms 5. Alignments 6. Clearings 7. Media 7.1. Captions 7.2. Gallery 8. Custom Buttons 9. Navigation 9.1. Links 9.2. Menus 10. Header Section 10.1. Top Header 10.2. Header 10.3. Custom Header 11. Home 11.1. Home v1 11.2. Home v2 11.3 Home v3 11.4 Home v4 12. Featured slider 13. Content 13.1 Posts and pages 13.2 Comments 13.3 Sidebar 14. Widget 15. Footer 16. Footer widgets 17. Scrollup Style 18. Front Page sections 18.1. Latest News 18.2. Call to action 18.14. Social Links 19 Inner Page Templates 19.1 Basic Breadcrumb 19.2 Error 404 Page 19.3 Contact page /*-------------------------------------------------------------- 1. Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } a { background-color: transparent; } a:active, a:hover { outline: 0; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; } 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; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 10px 15px; border: 3px double #f9f9f9; } /*-------------------------------------------------------------- 2. Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #4f5d75; font-size: 15px; line-height: 1.75; font-family: 'Roboto', sans-serif; } h1 { font-size:34px; } h2 { font-size:28px; } h3 { font-size:24px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } h1, h2, h3, h4, h5, h6 { margin: 0 0 20px 0; font-family: 'Noto Sans', sans-serif; font-weight: 500; color: #000; } p { margin: 0 0 25px 0; } dfn, cite, em, i { font-style: italic; } blockquote { text-align: center; position: relative; margin: 0 0 25px; font-size: 27px; font-weight: 100; } blockquote cite { font-size: 18px; line-height: 1.89; color: #888888; } blockquote cite { display: block; margin-top: 7px; } address { margin: 0 0 15px; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; line-height: 1.6; margin-bottom: 15px; max-width: 100%; overflow: auto; padding: 15px; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- 3. 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 http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: #fafafd; /* Fallback for when there is no custom background color defined. */ -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote:before { content: "\201c"; font-family: "Times New Roman"; display: block; font-size: 93px; line-height: 50px; font-weight: 700; } blockquote:before { color: #3a85eb; } hr { background-color: #ECECEE; border: 0; height: 1px; margin: 60px 0; clear: both; } ul, ol { margin: 0 0 15px 0; padding: 0 0 0 15px; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 15px; } dt { font-weight: bold; } dd { margin: 0 15px 15px; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ vertical-align: middle; } figure { margin: 15px 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 15px; width: 100%; } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; white-space: nowrap; height: 1px; width: 1px; overflow: hidden; } .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; 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; } /*-------------------------------------------------------------- 4. Forms --------------------------------------------------------------*/ input[type="button"], input[type="reset"], input[type="submit"] { background: #3a85eb; color: #fff; font-size: 16px; line-height: 1.5; padding: 10px 20px; border: none; height: auto; width: auto; cursor: pointer; display: inline-block; } input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background-color: #222; color: #fff; } input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus{ outline: 1px dotted #3a85eb; } 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, select { color: #272727; border: 1px solid #e7e7e7; padding: 7px 10px 7px 15px; } select { border: 1px solid #ccc; width: 100%; } [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } 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 { border:1px solid #319be2; } textarea { width: 100%; } /*-------------------------------------------------------------- 4.1. Search Forms --------------------------------------------------------------*/ form.search-form { position: relative; } input.search-field { width: 100%; } input.search-submit { font-family: FontAwesome; background: none; position: absolute; top: 0; color: #3a85eb; margin: 0; right: 0; font-size: 13px; } input.search-submit:hover, input.search-submit:active, input.search-submit:focus { background:inherit; color: #222; box-shadow: inherit; } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #272727; } ::-moz-placeholder { /* Firefox 19+ */ color: #272727; } :-ms-input-placeholder { /* IE 10+ */ color: #272727; } :-moz-placeholder { /* Firefox 18- */ color: #272727; } .search-submit { width: 100%; margin-top: 15px; } .searchform { width: 335px; margin: 0 auto; max-width: 100%; } .searchform-inner { position: relative; } .search-box-wrap .search-form .search-field{ border: none; font-size: 25px; width: 100%; padding: 5px 15px; font-style: italic; } .search-box-wrap .search-form .search-field:focus{ outline: none; } .search-box-wrap .search-form input.search-submit { display: none; } .searchform input[type="submit"] { float: right; padding: 7px 11px; margin-left: 0; font-family: "FontAwesome"; font-size: 16px; } .searchform input[type="text"] { width: 88%; padding: 4px 5% 4px 5%; } /*-------------------------------------------------------------- 5. Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 50px; } .alignright { display: inline; float: right; margin-left: 50px; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 50px; } .text-alignleft { text-align: left; } .text-alignright { text-align: right; } .text-aligncenter { text-align: center; } a:hover img, a:focus img, a:active img { opacity: 0.8; transition: box-shadow 0.2s ease-out 0s; } /*-------------------------------------------------------------- 6. 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; } /*-------------------------------------------------------------- 7. 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%; } /** * Print */ @media print { form, button, input, select, textarea, .navigation, .main-navigation, .social-navigation, .sidebar, .content-bottom-sections, .header-image, .page-links, .edit-link, .comment-respond, .comment-edit-link, .comment-reply-link, .comment-metadata .edit-link, .pingback .edit-link { display: none; } } /** * Media Queries */ /** * Does the same thing as , * but in the future W3C standard way. -ms- prefix is required for IE10+ to * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor * the meta tag. See https://core.trac.wordpress.org/ticket/25888. */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } /*-------------------------------------------------------------- 7.1. Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 15px; 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; } /*-------------------------------------------------------------- 7.2. 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; } /*-------------------------------------------------------------- 8. Custom Button --------------------------------------------------------------*/ a.custom-button, a.custom-button:visited, button, a.button, a.custom-button.custom-primary-button, a.custom-button.custom-primary-button:visited { transition: all 0.3s ease 0s; background: #3a85eb; color: #fff; font-size: 13px; line-height: 1.8; padding: 15px 35px; border: none; height: auto; width: auto; cursor: pointer; display: inline-block; min-width: 135px; text-align: center; text-transform: uppercase; text-align: center; margin: 0 10px; position: relative; font-weight: 500; border-radius: 2px; vertical-align: middle; } /*Circle button style*/ a.custom-button-circle, a.custom-button-circle:visited, a.button.custom-button-circle, a.button.custom-button-circle:visited a.custom-button-circle.custom-primary-button, a.custom-button-circle.custom-primary-button:visited { border-radius: 27px; } a.custom-button:hover, button:hover, a.button:hover, button:focus, a.button:focus, a.custom-button:focus, button:active, a.custom-button:active, a.custom-button.custom-primary-button:hover, a.custom-button.custom-primary-button:active, a.custom-button.custom-primary-button:focus { background-color: #3a85eb; color: #fff; box-shadow: 0px 2px 7px 0px rgba(162, 160, 160, 0.54); } a.custom-button:before { background: rgba(0, 0, 0, 0) radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0; content: ""; height: 10px; left: 5%; opacity: 0; pointer-events: none; position: absolute; top: 100%; transition-duration: 0.3s; transition-property: transform, opacity; width: 90%; z-index: -1; } a.custom-button:hover::before, a.custom-button:focus::before, a.custom-button:active::before { opacity: 1; transform: translateY(5px); } a.custom-button:hover, a.custom-button:focus, a.custom-button:active { transform: translateY(-5px); } /*custom-secondary*/ a.custom-button.custom-secondary-button { background-color: #fff; color: #2c3038; margin-left: 15px; } a.custom-button.custom-secondary-button:hover { background: #3a85eb; color: #fff; } .more-link { transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } .more-link:after { content: "\f178"; font-family: FontAwesome; padding-left: 6px; font-weight: normal; font-size: 14px; } .more-link:hover { padding-left: 10px; } a.more-link:hover::after { content: "\f00c"; } /*-------------------------------------------------------------- 9. Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- 9.1. Links --------------------------------------------------------------*/ a { color:#3a85eb; text-decoration: inherit; } a:visited { color: #3a85eb; } a:hover, a:focus, a:active { color: #272727; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- 9.2. Menus --------------------------------------------------------------*/ .main-navigation ul { display: block; margin: 0; padding: 0; } .main-navigation ul ul { background-color: #ffffff; box-shadow: 0px 2px 2px #969696; left: -9999px; margin: 0; min-width: 220px; position: absolute; top: 56px; opacity: 0; z-index: -9999; -webkit-transform-origin: top; transform-origin: top; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: scale(1, 0); transform: scale(1, 0); display: block; opacity: 0; transition: transform 0.5s ease, opacity 0.2s ease; -webkit-transition: -webkit-transform 0.5s ease, opacity 0.2s ease; } .main-navigation ul li:hover > ul { display: block; opacity: 1; z-index: 1000; -webkit-transform: scale(1, 1); transform: scale(1, 1); transition: transform 0.3s ease, opacity 0.2s ease .1s; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.2s ease .1s; } .main-navigation ul ul::before { content: ""; height: 10px; display: block; position: absolute; top: -38px; background: transparent; z-index: 9999; width: 100%; } .main-navigation ul ul ul { left: 100%; top: 0; box-shadow: 2px 1px 2px #222; } .main-navigation li { position: relative; display: inline-block; margin-bottom:0; } .main-navigation ul > li:hover > ul { opacity: 1; left:0; z-index: 9999; } .main-navigation ul ul ul ul { display: none; } .main-navigation ul ul ul li:hover > ul { display: block; } .main-navigation ul ul li:hover > ul { opacity: 1; left:100%; } .main-navigation li li { float: none; display: block; } .main-navigation ul li li:first-child > a { border-left: none; } .main-navigation ul li a { color: #222; display: block; font-size: 15px; font-weight: normal; padding: 15px 10px; position: relative; z-index: 99; } .main-navigation ul ul a { border-bottom: 1px dashed #f5f2f2; border-left: medium none; border-right: medium none; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.18) inset; transition: padding 0.2s ease-in-out 0s; height: auto; padding: 10px 20px; text-align: left; width: 100%; margin: 0; color: #222; text-transform: capitalize; font-size: 14px; } .main-navigation ul li.menu-item-has-childrenv > a, .main-navigation ul li.page-item-has-children > a { padding-right: 30px; } .main-navigation li > a:hover, .main-navigation li.current-menu-item > a, .main-navigation li.current-page-item > a, .main-navigation li:hover > a { color:#3a85eb; } .main-navigation ul li.menu-item-has-children.current-menu-item > a::after, .main-navigation ul li.page-item-has-children.current-menu-item > a::after { border-top-color: #3a85eb; } .main-navigation li.menu-item-has-children:hover > a:after, .main-navigation li.page-item-has-children:hover > a:after { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); } .main-navigation li li > a:hover, .main-navigation li li.current-menu-item > a, .main-navigation li li.current-page-item > a, .main-navigation li li:hover > a{ background-color: #3a85eb; border-bottom: 1px solid #cccccc; padding-left: 20px; color:#fff; } .main-navigation ul li.menu-item-has-children > a::after, .main-navigation ul li.page-item-has-children > a::after { content: ""; position: absolute; right: 6px; top: 28px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; border-top: 4px solid #aaa; border-left: 4px solid transparent; border-right: 4px solid transparent; } .main-navigation ul li li.menu-item-has-children > a::after, .main-navigation ul li li.page-item-has-children > a::after { content: ""; top: 20px; right: 20px; border-left: 4px solid #aaa; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .main-navigation ul li.menu-item-has-children a, .main-navigation ul li.page-item-has-children a { padding-right: 20px; } .main-navigation .menu-toggle, .main-navigation .dropdown-toggle { display: none; } #mobile-trigger { display: none; } #mob-menu { display: none; } /*Page/Post Navigation*/ .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { clear: both; overflow: hidden; padding: 0; border-bottom: 1px solid #f7f7f7; padding: 60px 0; } .nav-links a { display: inline-block; } .nav-links span.meta-nav { display: none; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-previous a::before, .posts-navigation .nav-previous a::before, .post-navigation .nav-previous a::before{ content: "\f177"; display: inline-block; font-family: FontAwesome; margin-right: 10px; } .comment-navigation .nav-next a::after, .posts-navigation .nav-next a::after, .post-navigation .nav-next a::after{ content: "\f178"; display: inline-block; font-family: FontAwesome; margin-left: 10px; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } .pagination .nav-links .page-numbers { padding: 5px; background: #fff; } .pagination .nav-links .page-numbers.dots { background-color: inherit; border:none; color:#272727; } .pagination .nav-links .page-numbers { padding: 5px 15px; color: #272727; display: inline-block; border: 1px solid #e7e7e7; } .pagination .nav-links .current, .pagination .nav-links a:hover, .pagination .nav-links a:active, .pagination .nav-links a:focus { background: #3a85eb; color: #fff; border-color: #3a85eb; } .pagination .nav-links { text-align: center; } nav.navigation.pagination { margin: 60px 0; } /*-------------------------------------------------------------- 10. Header Section --------------------------------------------------------------*/ /*-------------------------------------------------------------- 10.1. Top Header --------------------------------------------------------------*/ #tophead { background: #3a85eb; overflow: hidden; } /*quick contact*/ #quick-contact { float: left; margin-top: 0; } #quick-contact > ul { margin: 0; padding: 0; } #quick-contact a { color: #ffffff; display: inline-block; } #quick-contact a:hover { color: #ffcc07; } #quick-contact li.quick-email::before { content: "\f0e0"; } #quick-contact li.quick-call::before { content: "\f2a0"; } #quick-contact li.quick-address::before { content: "\f0ac"; } #quick-contact li::before { color: #fff; content: ""; display: inline-block; font-family: FontAwesome; font-size: 11px; margin-right: 5px; padding: 8px 0; text-align: center; } #quick-contact li { clear: inherit; float: left; font-size: 13px; line-height: 0.8; list-style: outside none none; text-align: left; font-weight: 400; border-right:1px solid rgba(255, 255, 255, 0.15); margin-right: 15px; padding: 10px 15px 10px 0; color: #fff; } #tophead .section { margin:0; } .header-social-wrapper { float: right; } #tophead .social-links li a { border: none; margin: 0; width: 45px; height: initial; padding: 6px 0; border-left: 1px solid rgba(255, 255, 255, 0.15); } #tophead .social-links li { display: block; margin-right: 0; margin-top: 0; margin-left: 0px; float: right; } #tophead .social-links li a::before { color: #ffffff; line-height: 2.5; font-size: 13px; font-weight: 100; text-shadow: none; } #tophead .social-links li a:hover::before { color: #fff; } #tophead a.search-icon { float: right; display: block; color: #3a85eb; background: #ffffff; padding: 11px 15px; font-size: 13px; } #tophead a.search-icon:hover { background-color: #222; color: #fff; } #tophead .searchform input[type="submit"] { float: right; padding: 7px 11px; } #tophead .searchform input[type="text"] { background: none; color: #fff; border: 1px solid transparent; border-bottom: 1px solid #c7c7c7; } .search-box-wrap .searchform { width: 100%; } .search-box-wrap { background: #fff; display: none; } .search-box-wrap .searchform input[type="text"] { border: none; font-size: 25px; width: 100%; padding: 5px 15px; font-style: italic; } /*-------------------------------------------------------------- 10.2. Header --------------------------------------------------------------*/ #masthead { background: #fff; clear: both; width: 100%; z-index: 999; position: relative; transition: all 0.2s ease-in-out 0s; padding: 15px 0 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.2); } #masthead.fixed { position: fixed; top: 0; width: 100%; left: 0; } #masthead.fixed:after, #masthead.fixed:before { visibility: hidden; } #masthead.fixed #header-right { float: right; margin-top: 0; } #masthead::before { content: ""; position: absolute; border-right: 20px solid white; border-bottom: 20px solid transparent; bottom: -20px; z-index: 9; right: 70%; } #masthead::after { content: ""; display: block; background: #fff; height: 20px; width: 70%; position: absolute; bottom: -20px; right: 0; box-shadow: 0 2px 2px rgba(0,0,0,0.2); } .site-branding { float: left; margin: 0; text-align: center; margin-bottom: 15px; } .site-title { font-size: 29px; font-weight: 700; margin-bottom: 0px; line-height: 2; letter-spacing: 1px; } a.custom-logo-link { float: left; max-width: 250px; margin-right: 15px; } #site-identity { float: left; } .site-title a, .site-title a:visited { color: #272727; } .site-title a span { color: #3a85eb; } .site-title a:hover, .site-title a:focus, .site-title a:active{ color: #3a85eb; } .site-description { color: #777; font-size: 14px; font-style: inherit; font-weight: 300; letter-spacing: 1px; margin: 0; } #header-right { float: right; margin-top: 15px; } #main-header #header-right { float: right; margin-top: 25px; } #quick-link-buttons { float: right; display: table; } #quick-link-buttons a.custom-button { margin: 10px 0 10px 20px; padding: 5px 12px; font-size: 13px; min-width: 115px; } #quick-link-buttons a.custom-button.quick-link-button { background: #2c3038; border-color: #2c3038; } #quick-link-buttons a.custom-button.cart-button, #quick-link-buttons a.custom-button.quick-link-button { border:2px solid transparent; } #quick-link-buttons a.custom-button.cart-button:hover { background-color: inherit; color: #3a85eb; border:2px solid #3a85eb; } #quick-link-buttons a.custom-button.cart-button:hover > span { background-color:#3a85eb; color: #fff; } #quick-link-buttons a.custom-button.quick-link-button:hover { background-color: inherit; color: #3a85eb; border:2px solid #3a85eb; } #quick-link-buttons .cart-button i { margin-right: 10px; } #quick-link-buttons .cart-button > span { min-width: 15px; min-height: 15px; background-color: #fff; color: #3a85eb; border-radius: 100%; display: inline-block; font-size: 11px; padding: 1px 0px; line-height: 1.2; display: inline-block; float: right; margin-top: 5px; transition: all 0.2s ease 0s; } .site-header #main-navigation { display: table; float: right; margin-top: 15px; } #masthead.fixed #main-navigation { margin-top: 0; } /*-------------------------------------------------------------- 10.3. Custom Header --------------------------------------------------------------*/ #custom-header { position: relative; z-index: 9; } #custom-header img { vertical-align: middle; } #custom-header::after { background: #1c3a48; content: ""; display: block; height: 100%; opacity: 0.4; position: absolute; top: 0; width: 100%; z-index: 888; } .custom-header-content { position: absolute; width: 100%; text-align: center; z-index: 999; padding: 0; bottom: 35%; } .page-title { color: #fff; text-transform: capitalize; font-size: 50px; } .page-title:first-letter { color: #3a85eb; display: block; } /*-------------------------------------------------------------- 11. Home --------------------------------------------------------------*/ /*-------------------------------------------------------------- 11.1. Home v1 --------------------------------------------------------------*/ .home-v1 #main-navigation { margin-top: 0; } .home-v1 .main-navigation ul ul:before { display: none; } .home-v1 .site-branding { float: left; margin: 0; text-align: left; } .home-v1 #masthead.fixed { background: #1c3a48; position: fixed; top: 0; width: 100%; left: 0; } .section.section-services.dark-background { background: #1c3a48; } .section.section-services.dark-background .widget-title{ color:#fff; } .home-v1 #masthead::after, .home-v1 #masthead::before { display: none; } .home-v1 #header-right { float: right; margin: 0; } .home-v1 .widget_business-way-slider .overlay-enabled article::after { opacity: 0.5; background-color: #0f2c3a; } .home-v1 .widget_business-way-slider p { color:#fff; } .home-v1 #header-right .search-icon { float: right; margin: 15px 0 0 15px; border: 2px solid; padding: 2px 6px; text-align: center; display: block; color: #fff; border-radius: 100%; font-size: 13px; } .home-v1 .widget_business-way-slider::before { background: rgba(0, 0, 0, 0) linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.4) 107%) repeat scroll 0 0; position: absolute; top: 0; width: 100%; z-index: 9; height: 114px; content: ""; left: 0; } .home-v1 .search-box-wrap .searchform input[type="text"] { border: none; font-size: 21px; width: 100%; padding: 5px 15px; } .home-v1 .main-navigation { float: right; } .home-v1 #masthead{ position: absolute; top: 0; background: none; z-index: 999; box-shadow: inherit; } .home-v1 #masthead .search-box-wrap { position: relative; clear: both; padding: 15px; background: rgba(221, 221, 221, 0.56); } .home-v1 .main-navigation ul li a, .home-v1 .site-title a, .home-v1 .site-description { color: #fff; } .home-v1 .main-navigation ul ul li a { color: #222; } .home-v1 .main-navigation ul ul li a:hover { color: #fff; } .home-v1 .main-navigation ul li.menu-item-has-children > a::after, .home-v1 .main-navigation ul li.page-item-has-children > a::after { border-top:4px solid #fff; } .home-v1 .widget_business-way-slider .cycle-prev, .home-v1 .widget_business-way-slider .cycle-next { border-radius: 18px; } /*-------------------------------------------------------------- 11.2. Home v2 --------------------------------------------------------------*/ .home-v2 .site-branding { float: left; margin: 0; text-align: left; } .home-v2 #header-right { float: right; } .home-v2 #header-right .search-icon { float: right; margin: 15px 10px; } .home-v2 .main-navigation { text-align: center; background: inherit; float: right; } /*-------------------------------------------------------------- 11.3. Home v3 --------------------------------------------------------------*/ .home-v3 #main-navigation { display: block; float: none; text-align: center; } .home-v3 #main-navigation { margin-top: 0; } .home-v3 #masthead::after, .home-v3 #masthead::before { display: none; } .home-v3 #masthead { box-shadow: none; padding: 20px 0; } .home-v3 #masthead.fixed { box-shadow: 0 2px 3px; padding: 5px 0; } .home-v3 #header-right { margin-top: 0; } .home-v3 .site-branding { float: none; margin: 0; text-align: center; margin: 15px 0; } /*-------------------------------------------------------------- 11.4. Home v4 --------------------------------------------------------------*/ .home-v4 #main-navigation { margin-top: 5px; } .home-v4 #masthead::after, .home-v4 #masthead::before { display: none; } .home-v4 #header-right { margin-top: 5px; } /*-------------------------------------------------------------- 12. Featured slider --------------------------------------------------------------*/ .widget_business-way-slider { color: #686868; clear: both; overflow: hidden; position: relative; z-index: 99; text-align: center; } .widget_business-way-slider .overlay-enabled article::after { content: ""; display: block; height: 100%; opacity: 0.4; position: absolute; top: 0; width: 100%; z-index: 888; background-color: #1c3a48; } .widget_business-way-slider img { width: 100%; vertical-align: middle; } .widget_business-way-slider .cycle-slide { width: 100%; } .widget_business-way-slider article.first { display: block; } .widget_business-way-slider article { display: none; } .widget_business-way-slider .cycle-slideshow { margin-bottom: 0; padding: 0; } .widget_business-way-slider .cycle-caption { bottom: 35%; height: auto; left: 15%; max-width: 100%; padding: 0; position: absolute; transition: all 1s ease-in-out 0s; width: 70%; z-index: 999; } .widget_business-way-slider h3 { display: inline-block; font-size: 50px; line-height: 1.2; margin-bottom: 10px; font-weight: 600; letter-spacing: 1px; padding: 15px 0; opacity: 0; padding-right: 100px; transition: all 0.5s linear 1s; } .widget_business-way-slider p { font-size: 19px; margin-bottom: 55px; font-weight: 500; opacity: 0; -webkit-transition: all 0.5s linear 1.5s; -moz-transition: all 0.5s linear 1.5s; -ms-transition: all 0.5s linear 1.5s; -o-transition: all 0.5s linear 1.5s; transition: all 0.5s linear 1.5s; padding-left: 100px; } .widget_business-way-slider h3 a{ color: #fff; } .widget_business-way-slider .slider-buttons a { font-size: 14px; line-height: 1.5; margin: 0 15px; } .widget_business-way-slider .slider-buttons a.custom-button.custom-secondary-button:after { border-top: 8px solid #fff; } .widget_business-way-slider .slider-buttons a.custom-button { margin-left: 0; padding: 15px 33px; } .widget_business-way-slider .slider-buttons a.custom-button.custom-secondary-button { margin-left: 0; } .widget_business-way-slider .slider-buttons{ opacity: 0; -webkit-transition: all 0.5s linear 2s; -moz-transition: all 0.5s linear 2s; -ms-transition: all 0.5s linear 2s; -o-transition: all 0.5s linear 2s; transition: all 0.5s linear 2s; } .widget_business-way-slider .cycle-slide-active h3, .widget_business-way-slider .cycle-slide-active p, .widget_business-way-slider .cycle-slide-active .slider-buttons{ opacity: 1; } .widget_business-way-slider .cycle-slide-active h3 { padding-right: 0; } .widget_business-way-slider .cycle-slide-active p { padding-left: 0; } .widget_business-way-slider .cycle-slide-active .slider-buttons { opacity: 1; padding-right: 0; } /*slider pager box*/ .widget_business-way-slider .cycle-pager span { background-color: #fff; cursor: pointer; display: inline-block; float: none; height: 5px; margin: 3px 4px; width: 30px; z-index: 99; } .widget_business-way-slider .cycle-pager { bottom:15px; left: 0; position: absolute; text-align: center; width: 100%; z-index: 999; } .widget_business-way-slider .cycle-pager .cycle-pager-active { background-color: #3a85eb; border-color:#fff; } /*Slider cycle next / previous*/ .widget_business-way-slider .cycle-prev, .widget_business-way-slider .cycle-next { bottom: 45%; color: #fff; cursor: pointer; display: block; font-size: 27px; font-weight: normal; position: absolute; text-align: center; width: 35px; z-index: 999; height: 49px; padding: 0; z-index: 999; line-height: 1.7; } .widget_business-way-slider .cycle-prev { left:2%; } .widget_business-way-slider .cycle-next { right:2%; } .widget_business-way-slider .cycle-prev:hover, .widget_business-way-slider .cycle-next:hover{ background-color: #3a85eb; color: #fff; } /*-------------------------------------------------------------- 13. Content --------------------------------------------------------------*/ #content { padding: 50px 0; background: #fff; } #primary { float: left; padding-left: 25px; padding-right: 25px; width: 70%; } .container { width: 1230px; margin: 0 auto; padding-left: 25px; padding-right: 25px; max-width: 100%; } .container::after, .inner-wrapper::after { clear: both; content: ""; display: table; } .inner-wrapper { margin-left: -25px; margin-right: -25px; } .site-layout-boxed #page { width: 1270px; margin: 30px auto; max-width: 100%; background: #fff; } .site-layout-boxed .container { padding: 0 40px; } body.site-layout-boxed { background: rgb(234, 234, 234); } /*-------------------------------------------------------------- 13.1. Post And Single Post Meta --------------------------------------------------------------*/ .sticky { display: block; position: relative; } .hentry{ margin: 0 0 40px; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin:0; } .page-links { clear: both; margin: 0 0 15px; } .entry-meta { margin-top: 0; margin-bottom: 20px; } .entry-meta > span { display: inline-block; margin-bottom: 0; font-size: 14px; color: #100f0f; border-left: 1px solid #ddd; line-height: 1; padding-left: 10px; font-size: 14px; margin-left: 10px; } article.hentry.post .entry-meta { margin-top: 0; margin-bottom: 0; } .entry-header { margin-bottom: 15px; } .entry-meta > span:first-child { margin-left: 0; padding-left:0; border:none; } .entry-title { font-size: 24px; margin-bottom: 5px; font-weight: 600; } .entry-title a, .entry-title a:visited { color: #272727; } .entry-title a:hover, .entry-title a:focus, .entry-title a:active { color: #3a85eb; } article.hentry.post { padding-bottom: 40px; border-bottom: 1px solid #ddd; } article.hentry.post .custom-button { margin: 15px 0 0; } .entry-thumb.alignleft, .entry-thumb.alignright { max-width: 50%; } .entry-thumb.aligncenter { position: relative; margin-bottom: 25px; } .entry-thumb { position: relative; } .entry-thumb img { vertical-align: middle; border-radius: 5px 5px 0 0; } .entry-meta a, .entry-meta a:visited { color: #ada9a9; } .entry-meta a:hover, .entry-meta a:focus, .entry-meta a:active { color: #3a85eb; } .entry-thumb .custom-entry-date { float: right; width: 70px; position: absolute; bottom: 20px; background: #3a85eb; left: 25px; color: #fff; border-radius: 5px 5px 0 0; } .blog .entry-content-inner, .archive .entry-content-inner, .single .entry-content-inner { padding: 30px 40px 50px 140px; background: #fff; margin-left: 20px; margin-right: 20px; } .blog .has-post-thumbnail .entry-content-inner, .archive .has-post-thumbnail .entry-content-inner, .single .has-post-thumbnail .entry-content-inner { margin-top: -30px; } .page-header { background: #fff; padding: 30px 50px; margin-bottom: 30px; } /* blog grid layout*/ .blog.archive-layout-grid .hentry.post .entry-thumb, .archive .archive-layout-grid .hentry.post .entry-thumb { max-width: 100%; float: none; margin: 0; } .blog.archive-layout-grid .hentry.post, .archive .archive-layout-grid .hentry.post{ width:50%; float: left; padding: 10px 30px; float: left; clear: none; border: none; } .blog.archive-layout-grid .hentry.post .entry-meta, .archive .archive-layout-grid .hentry.post .entry-meta { margin-bottom: 10px; } .blog.archive-layout-grid .hentry.post .entry-content-wrapper, .archive .archive-layout-grid .hentry.post .entry-content-wrapper { background: #f7f7f7; padding: 30px; text-align: center; } .blog.archive-layout-grid .hentry.post a.more-link, .archive .archive-layout-grid .hentry.post a.more-link { clear: both; margin-top: 20px; clear: both; } .blog.archive-layout-grid #main, .archive .archive-layout-grid #main { margin: 0 -25px; } .entry-header .entry-meta { position: absolute; left: 30px; top: 30px; text-align: center; margin: 0; } .entry-header .entry-meta span::before { display: none; } .entry-header .entry-meta span.posted-on { background: #f5f5f5; display: block; margin: 0; } .entry-content a, .entry-header a { display: inline-block; } .entry-header .entry-meta span span { display: block; padding: 3px 25px; } .entry-header .entry-meta span span.entry-day { background: #3a85eb; color: #fff; font-size: 25px; text-align: center; line-height: 1.5; } .entry-header .entry-meta span.entry-month { padding: 10px; } .entry-header .entry-meta a:hover span.entry-day, .entry-header .entry-meta a:focus span.entry-day, .entry-header .entry-meta a:active span.entry-day { background-color: #3a85eb; } /*-------------------------------------------------------------- 13.2. Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .comment-notes { position: relative; } #respond { clear: both; display: block; background: #fcfcfc; padding: 30px; } #comments { margin-top: 30px; } #commentform label { display: inline-block; width: 100px; position: relative; } #comment-form-title { font-size: 24px; padding-bottom: 10px; } .comment-list li.comment::after { content: inherit; display: none; } .comment-list li{ padding-left: 0; } .comment { display: block; float: left; width: 100%; } ol.comment-list { border-radius: 5px; float: left; margin-bottom: 15px; margin-left: 0; margin-right: 0; overflow: inherit; padding: 0; width: 100%; } ol.comment-list .children { border: medium none; float: left; margin: 35px 0; width: 100%; } ol.comment-list li { list-style: outside none none; margin-bottom: 15px; } .authorbox { overflow: hidden; padding: 50px 0 40px; border-bottom: 1px solid #f7f7f7; border-top: 1px solid #f7f7f7; } .authorbox h4.author-header { margin-bottom: 5px; } .author-header > a { font-size: 14px; margin-left: 5px; } .comment .comment-body { border-radius: 0; clear: both; display: block; float: left; padding: 30px 30px 30px 0; position: relative; text-align: left; width: 100%; border-bottom: 1px solid #f7f7f7; } .comments-title { padding: 10px 0 45px; clear: both; border-bottom: 1px solid #f7f7f7; } .comment-author.vcard { font-size: 20px; margin-bottom: 5px; } .comment-list .children { padding-left: 40px; } #tab-reviews .comment-form-author, #tab-reviews .comment-form-email, #tab-reviews .comment-form-url{ width: 100%; } .comment-form-author input, .comment-form-email input, .comment-form-url input{ width: 100%; } #commentform span.required { font-size: 19px; position: absolute; bottom: 2px; color: red; } .comment-list li.comment > div img.avatar { left: 29px; position: absolute; top: 29px; } .vcard .avatar { float: left; margin-right: 40px; } .comment-metadata { font-size: 14px; line-height: 16px; margin-bottom: 10px; } .comment-metadata > a{ color: #49616b; margin-right: 30px; } .form-allowed-tags code { white-space: inherit; word-wrap: break-word; } .bypostauthor { display: block; } .author-avatar { float: left; margin-right: 40px; } .author-avatar img, .vcard .avatar { border-radius: 100%; } .comment p { font-size: 14px; } .reply { float: right; font-size: 16px; } /*-------------------------------------------------------------- 13.3. Sidebar --------------------------------------------------------------*/ #sidebar-primary { float: right; } #sidebar-secondary { float: left; } .sidebar { width: 30%; padding-left: 25px; padding-right: 25px; float: left; } .sidebar .widget { margin-bottom: 40px; padding: 15px; border: 1px solid #f7f7f7; } .widget-area .widget::after, .widget-area .widget::before { clear: both; content: ""; display: table; } .sidebar .widget-title { position: relative; font-weight: 400; font-size: 21px; line-height: 1.5; overflow: hidden; } .sidebar .widget-title-wrapper::after { content: ""; border-left: 25px solid #fafbff; border-top: 39px solid transparent; display: inline-block; position: absolute; right: -25px; bottom: 0; } .sidebar ul { list-style: outside none none; padding: 0; margin: 0; } .sidebar ul ul { border-bottom:none; padding-bottom: 0; } .sidebar ul li { padding-bottom: 7px; padding-top: 7px; position: relative; padding-left: 25px; font-size: 15px; border-bottom: 1px solid #f0f0f0; } .sidebar ul li::before { color: #4f7acd; content: "\f178"; display: inline-block; font-family: FontAwesome; font-size: 12px; left: 0; position: absolute; top: 10px; } .sidebar .widget-archive ul li::before, .sidebar .widget-categories ul li::before, .sidebar .widget-pages ul li::before, .sidebar .widget-meta ul li::before, .sidebar .widget-recent-comments ul li::before, .sidebar .widget-recent-entries ul li::before, .sidebar .widget-tag-cloud ul li::before, .sidebar .widget-rss ul li::before { background: inherit; transform: inherit; margin-right: 20px; color: #bdbbbb; font-size: 12px; } .sidebar .widget-archive ul li::before { content: "\f0c6"; font-size: 17px; top: 4px; left: 0px; } .sidebar .widget-categories ul li::before { content: "\f07c"; } .sidebar .widget-pages ul li::before { content: "\f15b"; } .sidebar .widget-meta ul li::before { content: "\f0c1"; } .sidebar .widget-recent-comments ul li::before { content: "\f086"; } .sidebar .widget-recent-entries ul li::before { content: "\f02b"; } .sidebar .widget-rss ul li::before { content: "\f09e"; } .sidebar .widget-tag-cloud ul li::before { content: "\f0c2"; } .widget .tagcloud a:hover { border: 1px solid #3a85eb; color: #3a85eb; } .widget .tagcloud { text-align: center; } .widget .tagcloud a { border: 1px solid #dddddd; display: inline-block; font-size: 14px !important; line-height: 1.5; margin: 5px; padding: 3px 15px; float: left; } .sidebar ul li a, .sidebar ul li a:visited { color: #272727; } .sidebar ul li a:hover, .sidebar ul li a:focus, .sidebar ul li a:active { color:#3a85eb; } /*calendar section*/ .section-calendar { text-align: center; } .section-calendar caption { border:1px solid #ddd; margin-bottom: 15px; padding: 5px; } .section .tagcloud a { border: 1px solid; display: inline-block; font-size: 16px; line-height: 1.5; margin-bottom: 5px; padding: 5px 15px; } .section-categories li > a, .section-archive li > a { display: inline-block; min-width: 85%; } .sidebar .widget-title-wrapper { background: #3a85eb; padding: 7px 5px 7px 25px; display: inline-block; position: relative; font-weight: 100; font-size: 19px; display: block; color: #fff; border-radius: 5px 5px 0 0; } /* layout sidebar*/ .global-layout-left-sidebar #primary { float: right; } .three-columns-enabled #primary { display: inline-block; float: none; width: 50%; } .global-layout-three-columns .sidebar { float: right; } .three-columns-enabled .sidebar { width: 25%; } .global-layout-no-sidebar > .container, .page-template-tpl-builders #content , .page-template-tpl-builders #content > .container > .inner-wrapper{ width: 100%; padding: 0; margin:0; } .page-template-tpl-builders #content .container .container { padding: 0; } .global-layout-no-sidebar #primary { width: 100%; } .equal-three-columns-enabled #primary, .equal-three-columns-enabled .sidebar { width: 33.33%; } #content.global-layout-no-sidebar > .container > .inner-wrapper { margin: 0; } .global-layout-no-sidebar #primary { width: 100%; padding: 0; } /* Global layout sidebar*/ .global-layout-three-columns-pcs #sidebar-primary, .global-layout-three-columns-cps #sidebar-primary, .global-layout-three-columns-psc #sidebar-primary { float: left; } .global-layout-three-columns-pcs #sidebar-secondary, .global-layout-three-columns-cps #sidebar-secondary { float: right; } .global-layout-three-columns-cps #primary { float: left; } .default-full-width #primary { width: 100%; } /*-------------------------------------------------------------- 14. Widget --------------------------------------------------------------*/ .widget { margin: 0 0 15px; } /* Make sure select elements fit in widget. */ .widget select { max-width: 100%; } /*-------------------------------------------------------------- 15. Footer --------------------------------------------------------------*/ #colophon { background-color: #414244; clear: both; color: #fff; font-size: 14px; text-align: center; } #colophon p { margin: 0; } #colophon a, #colophon a:visited { color:#ccc; } #colophon a:hover, #colophon a:focus, #colophon a:active { color:#fff; } .site-info { float: right; } .copyright { float: left; } .colophon-bottom { padding: 10px 0; } .colophon-top { padding: 20px 0; background: #2c3038; } /*-------------------------------------------------------------- 16. Footer Widgets --------------------------------------------------------------*/ #footer-widgets { background-color: #252831; overflow: hidden; padding: 35px 0 100px; color: #fff; font-size: 15px; font-weight: 300; background-image: url("images/footer-bg.png"); position: relative; z-index: 9; background-attachment: fixed; } #footer-widgets::after { content: ""; display: block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background: #252831; opacity: 0.9; z-index: -1; } #footer-widgets .widget-title { color: #fff; } #footer-widgets ul { list-style: none; margin: 0; padding: 0; } #footer-widgets ul li { font-size: 15px; padding: 0px 15px 0px 25px; position: relative; } #footer-widgets ul li::before { color: #fff; content: "\f178"; display: inline-block; font-family: FontAwesome; font-size: 10px; left: 3px; position: absolute; top: 4px; } #footer-widgets ul li:hover::before { content: "\f00c"; } #footer-widgets .footer-widget-area { float: left; padding: 0 25px; width: 25%; } #footer-widgets a, #footer-widgets a:visited { color:#ddd; } #footer-widgets a:hover, #footer-widgets a:active, #footer-widgets a:focus { color:#fff; } #footer-widgets .footer-active-1 { width: 100%; } #footer-widgets .footer-active-2 { width: 50%; } #footer-widgets .footer-active-3 { width: 33.33%; } #footer-widgets .footer-active-4 { width: 25%; } #footer-widgets .widget-title { color: #fff; font-weight: 400; } #footer-widgets .widget-title:after { display: block; content: ""; height: 2px; background: #3a85eb; width: 50px; margin-top: 10px; margin-bottom: 20px; } /*Footer Navigation*/ #footer-navigation { margin-top:15px; } #footer-navigation li { display: inline-block; list-style: outside none none; } #footer-navigation li a { display: block; padding: 5px 8px; text-transform: capitalize; } #footer-navigation ul { margin: 0; } #footer-contact { background: #fbfcfc; text-align: center; padding: 60px 0; position: relative; z-index: 99; } #footer-contact::before { height: 50px; content: ""; display: block; background: url("images/footer-contact-bg.png"); margin: -110px auto 0; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; max-width: 1349px; } #footer-contact .contact-title { display: inline-block; margin: 0 25px; } #footer-contact .contact-buttons { display: inline-block; margin: 0 25px; } #footer-contact input[type="text"] { width: 50%; height: 44px; border-radius: 36px; padding: 30px; border: 2px solid #3a85eb; color: #ffffsdfs; } #footer-contact input[type="submit"] { height: 60px; border-radius: 61px; margin-left: -27px; padding: 0 35px; font-family: FontAwesome; font-size: 17px; line-height: 1; } .recent-posts-widget p { margin-bottom: 5px; color: #bbc0d2; font-style: italic; } .recent-posts-widget ul li, #footer-widgets .recent-posts-widget ul li { padding:0; } #footer-widgets .recent-posts-widget ul li:before, #footer-widgets .social-links ul li:before { display: none; } .recent-posts-widget h4 { margin: 0; font-weight: 500; color: #fff; line-height: 1.5; font-size: 17px; } .sidebar .recent-post-item { clear: both; margin-bottom: 15px; overflow: hidden; } .sidebar .recent-posts-widget h4 a { color: #222; } #footer-widgets .social-links ul li { display: inline-block; margin-right: 5px; margin-top: 0; padding: 0; } #footer-widgets .social-links { float: left; margin-top: 0; } .recent-posts-widget img { max-width: 105px; margin-right: 25px; } /*-------------------------------------------------------------- 17. Scrollup Style --------------------------------------------------------------*/ a.scrollup, a.scrollup:visited { background-color: #3a85eb; bottom: 50px; color: #ffffff; display: none; float: right; line-height: 1.2; padding: 5px 10px; position: fixed; right: 32px; text-align: center; z-index: 99999; } a.scrollup:hover, a.scrollup:focus, a.scrollup:active { background-color:#333; color: #ffffff; } .scrollup i { font-size:32px; } /*-------------------------------------------------------------- 18. Front page sections --------------------------------------------------------------*/ #content { background: #fff; } #content::after, #content::before { content: ""; display: table; clear: both; } .panel-layout .panel-grid > div{ margin-bottom: 0; padding: 45px 0 55px; } .panel-layout .widget-title { text-align: center; margin-bottom: 25px; position: relative; font-size: 33px; } .panel-layout .widget-title:first-letter { color: #3a85eb; display: block; } .panel-layout .widget-subtitle { text-align: center; font-size: 15px; margin: 0 auto 30px; max-width: 700px; } .panel-layout .dark-background .widget-subtitle { color:#ddd; } .panel-layout .dark-background { background: #1c3a48; } .panel-layout .dark-background .widget-title { color:#fff; } .panel-layout .heading-left .widget-title, .panel-layout .heading-left .widget-subtitle { text-align: left; margin-left: 0; } .panel-layout .heading-right .widget-title, .panel-layout .heading-right .widget-subtitle { text-align: right; margin-right: 0; } #content .panel-layout .panel-grid .widget_business-way-slider, .section-call-to-action { margin-top: -60px; margin-bottom: -70px; } .widget_business-way-cta .section-call-to-action.cta-layout-2 { margin-top: -40px; margin-bottom: -50px; float: left; width: 100%; } .so-widget-sow-slider, .so-widget-sow-hero { margin-top:-60px; margin-bottom: -60px; } .call-to-action-inner-wrapper { padding: 0 40px; } /*-------------------------------------------------------------- 18.1. Latest News --------------------------------------------------------------*/ .section-latest-news .latest-news-wrapper { clear: both; overflow: hidden; padding-bottom: 15px; border-bottom: 1px solid #f7f7f7; } .section-latest-news .latest-news-item { float: left; padding: 15px 25px; margin: 15px 0; text-align:left; } .section-latest-news .latest-news-text-wrap { padding: 20px 0 0; } .section-latest-news .latest-news-item .latest-news-title a { color:#272727; } .section-latest-news .latest-news-item .latest-news-title a:hover { color:#3a85eb; } .section-latest-news .latest-news-item img { margin: 0; border-radius: 5px 5px 0 0; } .section-latest-news .latest-news-thumb { margin-bottom: 15px; } .section-latest-news .latest-news-title { line-height: 1.2; margin-bottom: 10px; font-size: 21px; } .section-latest-news .latest-news-col-3 .latest-news-item { width: 33.33%; } .section-latest-news .latest-news-col-4 .latest-news-item { width: 25%; } .section-latest-news .latest-news-col-2 .latest-news-item { width: 50%; } .section-latest-news .latest-news-col-1 .latest-news-item { width: 100%; } .section-latest-news .latest-news-meta { margin-bottom: 15px; padding-bottom: 35px; border-bottom: 1px solid #f7f7f7; } .section-latest-news .latest-news-meta span { color: #9ea2a5; margin: 0px 10px 0 0; display: inline-block; font-weight: 100; font-size: 15px; } .latest-news-text-content .entry-month { background: #3a85eb; color: #fff; width: 72px; } .custom-entry-date { float: right; width: 70px; border-radius: 5px 5px 0 0; } .entry-day { font-size: 30px; line-height: 1.3; background: #f5f5f5; color: #222; border-radius: 5px 5px 0 0; font-weight: bold; } .custom-entry-date span { display: block; padding: 3px 10px; text-align: center; } .more-wrapper { display: block; text-align: center; margin-top: 20px; clear: both; float: left; width: 100%; } /*widget in sidebar*/ .sidebar .section-latest-news .latest-news-item, #footer-widgets .section-latest-news .latest-news-item{ width: 100%; margin: 0; } /*-------------------------------------------------------------- 18.2. Call to action --------------------------------------------------------------*/ .section-call-to-action { text-align: center; background: #1c3a48 none repeat scroll 0 0; position: relative; margin: 0; } .section-call-to-action .call-to-action-description p { font-size: 16px; color: #cccccc; } .section-call-to-action .cta-title { margin-bottom: 15px; color: #fff; font-size: 33px; } .section-call-to-action .widget-title { color: #fff; } .section-call-to-action .call-to-action-description { margin: 0 auto 30px; } .section-call-to-action .widget-title:after, .section-call-to-action .widget-title:before { display: none; } .section-call-to-action.cta-layout-1 .call-to-action-description { margin: 0 auto 30px; max-width: 900px; } /*.CTA-layout-2 */ .section-call-to-action.cta-layout-2 { padding: 40px 0!important; margin-top: 20px; } .section-call-to-action.cta-layout-2 .call-to-action-description { float: left; margin: 0; max-width: inherit; } #content .section-call-to-action.cta-layout-2 .widget-title { margin-bottom: 25px; } .section-call-to-action.cta-layout-2 .call-to-action-buttons { float: right; margin-top: 20px; } .section-call-to-action.cta-layout-2:before { content: ""; display: block; width: 65%; height: 20px; float: left; background: #1c3a48; position: absolute; top: -20px; } .section-call-to-action.cta-layout-2:after { content:""; display: block; width: 35%; height: 20px; right: 0; background: #1c3a48; position: absolute; bottom: -20px; } .section-call-to-action.cta-layout-2 .call-to-action-inner-wrapper:after { content: ""; display: block; position: absolute; right: 35%; bottom: -40px; border-top: 20px solid #1c3a48; border-bottom: 20px solid transparent; border-left: 20px solid transparent; } .section-call-to-action.cta-layout-2 .call-to-action-inner-wrapper:before { content: ""; display: block; position: absolute; left: 65%; top: -40px; border-bottom: 20px solid #1c3a48; border-top: 20px solid transparent; border-right: 20px solid transparent; z-index: 9; } /*.CTA-layout-3 */ #content .section-call-to-action.cta-layout-3 { background: #00aef0 none repeat scroll 0 0; padding: 30px 0; text-align: center; max-width: 1170px; margin: 70px auto; } .section-call-to-action.cta-layout-3 .call-to-action-content { padding-left: 10px; } .section-call-to-action.cta-layout-3 .call-to-action-description { float: left; text-align: left; width: 69%; margin: 0; } .section-call-to-action.cta-layout-3 .cta-title { margin: 0; } .section-call-to-action.cta-layout-3 .call-to-action-buttons { float: right; } /*-------------------------------------------------------------- 18.3. Social Links --------------------------------------------------------------*/ .social-links { text-align: center; } .social-links { clear: both; overflow: hidden; } .social-links ul { margin: 0; padding: 0; } .social-links li a { border: 2px solid #777; display: inline-block; height: 33px; line-height: 1.7; margin-right: 0; padding: 0; text-align: center; vertical-align: middle; width: 33px; } .social-links.circle li a { border-radius: 100%; } .social-links li { display: inline-block; margin-right: 2px; margin-top: 2px; margin-left: 0px; } .social-links ul li::after{ display: none; } .social-links li a i { color:#cacad8; font-size: 18px; font-weight: normal; } .social-links ul li a::before { color: #8c8c8c; content: "\f0c1"; display: block; font-family: FontAwesome; font-weight: normal; line-height: 2; font-size: 14px; } .social-links ul li a:hover { background-color: #001837; border: 1px solid rgba(0, 0, 0, 0); -moz-transition: all 0.4s ease-out 0s; -webkit-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .social-links ul li a:hover::before { color: #fff; } .social-links ul li a[href*="facebook.com"]::before { content: "\f09a"; } .social-links ul li a[href*="twitter.com"]::before { content: "\f099"; } .social-links ul li a[href*="linkedin.com"]::before { content: "\f0e1"; } .social-links ul li a[href*="plus.google.com"]::before { content: "\f0d5"; } .social-links ul li a[href*="youtube.com"]::before { content: "\f167"; } .social-links ul li a[href*="dribbble.com"]::before { content: "\f17d"; } .social-links ul li a[href*="pinterest.com"]::before { content: "\f0d2"; } .social-links ul li a[href*="bitbucket.org"]::before { content: "\f171"; } .social-links ul li a[href*="github.com"]::before { content: "\f113"; } .social-links ul li a[href*="codepen.io"]::before { content: "\f1cb"; } .social-links ul li a[href*="flickr.com"]::before { content: "\f16e"; } .social-links ul li a[href$="/feed/"]::before { content: "\f09e"; } .social-links ul li a[href*="foursquare.com"]::before { content: "\f180"; } .social-links ul li a[href*="instagram.com"]::before { content: "\f16d"; } .social-links ul li a[href*="tumblr.com"]::before { content: "\f173"; } .social-links ul li a[href*="reddit.com"]::before { content: "\f1a1"; } .social-links ul li a[href*="vimeo.com"]::before { content: "\f194"; } .social-links ul li a[href*="digg.com"]::before { content: "\f1a6"; } .social-links ul li a[href*="twitch.tv"]::before { content: "\f1e8"; } .social-links ul li a[href*="stumbleupon.com"]::before { content: "\f1a4"; } .social-links ul li a[href*="delicious.com"]::before { content: "\f1a5"; } .social-links ul li a[href*="mailto:"]::before { content: "\f0e0"; } .social-links ul li a[href*="soundcloud.com"]::before { content: "\f1be"; } .social-links ul li a[href*="wordpress.org"]::before { content: "\f19a"; } .social-links ul li a[href*="wordpress.com"]::before { content: "\f19a"; } .social-links ul li a[href*="jsfiddle.net"]::before { content: "\f1cc"; } .social-links ul li a[href*="tripadvisor.com"]::before { content: "\f262"; } .social-links ul li a[href*="foursquare.com"]::before { content: "\f180"; } .social-links ul li a[href*="angel.co"]::before { content: "\f209"; } .social-links ul li a[href*="slack.com"]::before { content: "\f198"; } /*social links hover effect */ .social-links ul li a[href*="facebook.com"]:hover { background-color: #3b5998; } .social-links ul li a[href*="twitter.com"]:hover { background-color: #00aced; } .social-links ul li a[href*="plus.google.com"]:hover { background-color: #dd4b39; } .social-links ul li a[href*="/feed/"]:hover { background-color: #dc622c; } .social-links ul li a[href*="wordpress.org"]:hover, .social-links ul li a[href*="wordpress.com"]:hover { background-color: #45bbe6; } .social-links ul li a[href*="github.com"]:hover { background-color: #4183c4; } .social-links ul li a[href*="linkedin.com"]:hover { background-color: #007bb6; } .social-links ul li a[href*="pinterest.com"]:hover { background-color: #cb2027; } .social-links ul li a[href*="flickr.com"]:hover { background-color: #ff0084; } .social-links ul li a[href*="vimeo.com"]:hover { background-color: #aad450; } .social-links ul li a[href*="youtube.com"]:hover { background-color: #bb0000; } .social-links ul li a[href*="instagram.com"]:hover { background-color: #517fa4; } .social-links ul li a[href*="dribbble.com"]:hover { background-color: #ea4c89; } .social-links ul li a[href*="skype.com"]:hover { background-color: #12a5f4; } .social-links ul li a[href*="digg.com"]:hover { background-color: #333; } .social-links ul li a[href*="codepen.io"]:hover { background-color: #000; } .social-links ul li a[href*="reddit.com"]:hover { background-color: #ff4500; } .social-links ul li a[href*="mailto:"]:hover { background-color: #1d62f0; } .social-links ul li a[href*="foursquare.com"]:hover { background-color: #f94877; } .social-links ul li a[href*="stumbleupon.com"]:hover { background-color: #eb4924; } .social-links ul li a[href*="twitch.tv"]:hover { background-color: #6441a5; } .social-links ul li a[href*="tumblr.com"]:hover { background-color: #32506d; } .social-links ul li a[href*="foursquare.com"]:hover { background-color: #f94877; } .social-links ul li a[href*="stumbleupon.com"]:hover { background-color: #eb4924; } .social-links ul li a[href*="twitch.tv"]:hover { background-color: #6441a5; } .social-links ul li a[href*="tumblr.com"]:hover { background-color: #32506d; } .social-links ul li a[href*="soundcloud.com"]:hover { background-color: #ff5500; } .social-links ul li a[href*="wordpress.org"]:hover { background-color:#45bbe6; } .social-links ul li a[href*="jsfiddle.net"]:hover { background-color:#4679bd; } .social-links ul li a[href*="tripadvisor.com"]:hover { background-color:#86c171; } .social-links ul li a[href*="foursquare.com"]:hover { background-color:#2d5be3; } .social-links ul li a[href*="angel.co"]:hover { background-color:#000; } .social-links ul li a[href*="slack.com"]:hover { background-color:#56b68b; } /*-------------------------------------------------------------- 18.4. Quick Contact Widget --------------------------------------------------------------*/ .contact-item { display: block; margin-bottom: 10px; font-size: 15px; color: #ddd; line-height: 2; display: table; clear: both; } .contact-icon { font-size: 18px; padding-right: 10px; display: table-cell; } /*-------------------------------------------------------------- 19. Inner Page Template --------------------------------------------------------------*/ /*-------------------------------------------------------------- 19.1. Basic Breadcrumb --------------------------------------------------------------*/ #breadcrumb { color: #444; clear: both; position: absolute; left: 0; width: 100%; bottom: 0; z-index: 999; border-bottom: 5px solid #fff; } #breadcrumb .breadcrumb-wrapper { background: #fff; display: block; padding: 12px 15px 6px; float: left; margin-left: -1000px; padding-left: 1000px; position: relative; } #breadcrumb .breadcrumb-wrapper::after { content: ""; border-left: 25px solid white; border-top: 45px solid transparent; display: inline-block; position: absolute; right: -25px; bottom: 0; } #breadcrumb ul { margin:0; padding: 0; } #breadcrumb li { display: block; float: left; list-style: outside none none; padding-right: 10px; } #breadcrumb .breadcrumb-trail li.trail-item.trail-end::after { display: none; } #breadcrumb .breadcrumb-trail li::after { content: "\f105"; margin-left: 10px; font-family: 'FontAwesome'; } /*-------------------------------------------------------------- 19.2. Error 404 Page* --------------------------------------------------------------*/ section.error-404 { text-align: center; } .error-404 h2{ font-size: 87px; font-weight: bold; } #quick-links-404 { margin-top: 30px; } #quick-links-404 ul li { display: inline-block; list-style: outside none none; } #quick-links-404 ul li a { display: block; padding: 5px 10px; } .error404 #primary { width: 100%; } section.error-404 .search-form { position: relative; max-width: 320px; margin: 0 auto; } /* Media Queries --------------------------- */ /* Smaller than standard 1230(devices and browsers) */ @media only screen and (max-width:1230px){ .container { margin: 0 auto; width: 96%; padding: 0 15px; } .global-layout-no-sidebar > .container { margin: 0 auto; width: 96%; } #masthead.fixed #quick-link-buttons { display: none; } #content .section-call-to-action.cta-layout-3 { margin: 0; } } /* Smaller than standard 1024 (devices and browsers) */ @media only screen and (max-width:1024px) { .main-navigation ul > li ul { display: none; opacity: 1; visibility: visible; } .main-navigation ul > li:hover > ul { display: block; opacity: 1; visibility: visible; } a.custom-logo-link { max-width: 150px; } } /* Smaller than standard 1024 (devices and browsers) */ @media only screen and (max-width:1023px){ a.custom-button, a.custom-button:visited, button, a.button, a.custom-button.custom-primary-button, a.custom-button.custom-primary-button:visited { padding: 10px 20px; margin-bottom:15px; } p { margin: 0 0 15px 0; } .header-social-wrapper { float: right; width: 100%; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.12); } #quick-link-buttons { float: none; display: block; } .site-header #main-navigation { display: table; float: none; width: 100%; } .section-latest-news .latest-news-item { padding: 15px; } .section-latest-news .latest-news-col-3 .latest-news-item, .section-latest-news .latest-news-item { width: 50%; } .inner-wrapper { margin-left: -15px; margin-right: -15px; } #content .widget-title { margin-bottom: 20px; font-size: 28px; } .section-call-to-action .cta-title { margin-bottom: 30px; color: #fff; font-size: 24px; } .section-call-to-action .cta-title { margin-bottom: 10px; font-size: 24px; } #footer-widgets .footer-widget-area { padding:0 15px; } #footer-widgets .widget-title { font-size: 18px; } .custom-header-content { padding: 55px; } .page-title { font-size: 40px; } .sidebar, #primary, .three-columns-enabled .sidebar, .three-columns-enabled #primary { width: 100%; padding-left: 15px; padding-right: 15px; float: left; } .three-columns-enabled .sidebar { width: 50%; } #primary .hentry.post.blog-gird { width: 50%; padding: 10px 15px; } .widget_business-way-slider h3 { font-size: 28px; margin-bottom: 10px; padding: 5px 0; } .widget_business-way-slider .slider-buttons a.custom-button { padding: 10px 20px; } .widget_business-way-slider p { margin-bottom: 20px; font-size: 15px; } .widget_business-way-slider .cycle-caption { bottom:100px; } .section-featured-page img.alignleft, .section-featured-page img.aligright { float: none; max-width: 100%; text-align: center; margin: 0 auto 15px; float: none; padding: 0; } #masthead.fixed #quick-link-buttons { display: block; } #masthead.fixed.site-header #main-navigation { border-top: 1px solid #ddd; } } /* Smaller than standard 768 (devices and browsers) */ @media only screen and (max-width:767px){ a.custom-logo-link { max-width: 150px; margin: 0 auto 15px; float: none; display: block; } #site-identity { float: none; } #masthead #header-right { width: 100%; } #mobile-trigger { display: block; background: #222; color: #fff; padding: 20px 15px; } #mobile-trigger i.fa{ font-size: 23px; line-height: 0; display: block; } #page #main-navigation { display: none; } #tophead .container { width: 100%; padding: 0; } #quick-contact li { display: inline-block; float: none; border: none; padding: 10px 5px; margin: 0; } #quick-contact > ul { margin: 0; padding: 0; text-align: center; } .header-social-wrapper { float: left; width: auto; text-align: center; border: none; } #quick-contact { border-bottom: 1px solid rgba(255, 255, 255, 0.12); width: 100%; } #masthead.fixed { position: inherit; top: inherit; width: 100%; left: inherit; } #masthead:after, #masthead:before { visibility:visible; display: none; } .widget_business-way-slider .cycle-caption { width: 80%; left: 10%; bottom: 95px; } #footer-widgets .footer-widget-area { width: 50%; margin-bottom: 15px; } #footer-contact .contact-title { display: block; margin: 0; margin-bottom: 15px; } #footer-widgets .footer-widget-area { width: 100%; } } /* Smaller than standard 700 (devices and browsers) */ @media only screen and (max-width:700px){ .page-title { font-size: 31px; } .site-title { font-size: 22px; } #quick-link-buttons a.custom-button { margin: 5px 0 6px 5px; padding: 5px 12px; font-size: 13px; min-width: 100px; font-size: 11px; } #quick-link-buttons .cart-button > span { margin-top:2px; } .widget_business-way-slider .slider-buttons a.custom-button { padding: 8px 16px; min-width: inherit; text-transform: capitalize; font-size: 12px; } .copyright { float: none; } .site-info { float: none; } .section-latest-news .latest-news-col-3 .latest-news-item, .section-latest-news .latest-news-item { width: 100%; } #tophead .container { padding: 0; width: 100%; } .site-branding { float: none; } #header-right { margin-top: 0; width: 100%; text-align: center; padding-bottom: 10px; } #footer-widgets { padding: 35px 0 70px; } #footer-contact { padding: 30px 0; } #footer-contact::before { height: 35px; margin: -65px auto 0; } #tophead a.search-icon { background-color: inherit; color: #fff; } #breadcrumb { position: relative; left: 0; width: 100%; bottom: 0; z-index: 99999; border-bottom: 1px solid #efefef; background: #fff; } #breadcrumb .bareadcrumb-wrapper { padding: 10px 15px 10px; margin:0; } .entry-thumb.alignleft, .entry-thumb.alignright { max-width: 100%; margin: 0 0 20px; } .custom-header-content { padding: 30px 0 0; } .contact-map, .contact-form-area.contactdesc{ padding: 15px; float: left; width: 100%; } #content .panel-layout .panel-grid .widget_business-way-slider, .section-call-to-action { margin-top: -25px; margin-bottom: 0; } .panel-layout .panel-grid > div { margin-bottom: 0; padding: 25px 0 35px; } } /* Smaller than standard 480 (devices and browsers) */ @media only screen and (max-width:600px){ .widget_business-way-slider p { display: none; } .widget_business-way-slider h3 { font-size: 19px; margin-bottom: 15px; } .widget_business-way-slider .cycle-caption { bottom: 75px; } .widget_business-way-slider .cycle-prev, .widget_business-way-slider .cycle-next { bottom: 45%; font-size: 23px; width: 20px; height: 40px; padding: 0; z-index: 999; line-height: 1.7; } } /* Smaller than standard 480 (devices and browsers) */ @media only screen and (max-width:479px){ #quick-contact li { display: inline-block; float: none; border: none; padding: 0 5px 5px; margin: 0; width: 100%; } #quick-contact li { border-bottom: 1px solid rgba(221, 221, 221, 0.38); padding: 5px 20px; } #quick-contact { border:none; } .custom-header-content { padding: 15px 0 0; } .page-title { font-size: 26px; } .widget_business-way-slider .cycle-pager { display: none; } .widget_business-way-slider .cycle-caption { bottom:15px; } .widget_business-way-slider .slider-buttons a.custom-button { padding: 5px 10px; min-width: inherit; text-transform: capitalize; font-size: 12px; } .widget_business-way-slider .cycle-prev, .widget_business-way-slider .cycle-next { bottom:35%; } #content .widget-title { margin-bottom: 15px; font-size: 25px; } #content .widget-subtitle { font-size: 13px; margin: 0 auto 20px; } body, button, input, select, textarea { font-size: 13px; } .section-latest-news .latest-news-title { line-height: 1.5; font-size: 18px; } .panel-grid.panel-no-style, .panel-grid.panel-has-style > .panel-row-style { display: block; } .blog.archive-layout-grid .hentry.post, .archive .archive-layout-grid .hentry.post{ width: 100%; } } /* Smaller than standard 320 (devices and browsers) */ @media only screen and (max-width:219px){ .container{ width: 310px; max-width: 310px; } }