/* Theme Name: Boshki Portfolio Theme URI: https://keithrigby.co.uk/latest-updates/wp-themes/boshki-portfolio-theme/ Author: Keith Rigby Author URI: https://www.keithrigby.co.uk/ Description: Boshki Portfolio Theme - designed for small businesses, professionals & freelancers. Including widgets and sections allowing you to add in your skills, services, experience, and portfolio in a slick business landing page. Featuring a slick single landing page design, with a 3D Animated flip out menu, parallax scrolling and an animated background on the homepage, with full customisation of all of the colours and positioning of elements on your site. This themes give you the control to make your site look beautiful, and promote your business. With google metadata included to help promote your business with search engines. Version: 1.1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, custom-background, custom-logo, custom-colors, custom-header, custom-menu,featured-images, featured-image-header, theme-options, portfolio, sticky-post, post-formats, footer-widgets, threaded-comments Text Domain: boshki-portfolio This theme, like WordPress, is licensed under the GPL. */ /* ##################################### */ /* Colour Theme Background #fff Body Text #6E6A6F Links #499F68 Menu Header #499F68 Text Highlight #499F68 Home Header #499F68 rgba(73, 159, 104, 1) Home Header Text #fff Warning / Errors #F45B69 Button #499F68 Button text #fff Info highlight #97CE8E Form #f4f4f4 Standard hover opacity 0.8 */ /* CSS Contents / structure # Style Resets # WP Styling/Resets # Main Styling # # Logo Styling # # Bshk Nav Menu # # # Bshk Nav Menu - animation # # Parralax Scrolling # # Home Page # # Pages # # Posts # # # Comments # Key Frames / Animations /* ##################################### */ /* Style Resets */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: none; } body, html { height: 100%; } body, html, h1, h2, h3, h4, h5, h6, p, span, a, input, textarea, select, option { margin: 0; padding: 0; border: 0; vertical-align: baseline; } input:focus, textarea:focus, select:focus, option:focus, button:focus { outline: none; } input.disabled, input:disabled, select.disabled, select:disabled, textarea.disabled, textarea:disabled { background-: #666; } a, a:hover, a:focus { text-decoration: none; } /* Style Resets */ /* ##################################### */ /* WP Styling/Resets */ .wp-caption { } .wp-caption-text { } .sticky { } .screen-reader-text { } .gallery-caption { } .bypostauthor { } blockquote{ padding: 1rem; border-radius:2px; position:relative; quotes:"\201C""\201D""\2018""\2019"; } div.krinfopane{ padding: 1rem; border-radius:2px; position:relative; } ul.krinfopane{ padding: 1rem; border-radius:2px; position:relative; padding-left:2.5rem; } ul.krinfopane ul{ margin-bottom:1rem; } blockquote:before { content: open-quote; position: absolute; top: 1rem; left: 0; font-style: italic; font-size: 3rem;} blockquote:after { content: close-quote; position: absolute; bottom: 0; right: 1rem; font-style: italic; font-size: 3rem;} .ab-sub-wrapper { min-width: 100%!important; position: relative!important; } .alignnone{margin:auto;} .aligncenter { text-align: center!important; margin: auto; } .aligncenter img { text-align: center; margin: auto; } .alignright { text-align: right!important; float: right!important; clear:both; } .alignleft { text-align: left!important; float: left!important; clear:both; } .spacer { margin-top: 2rem; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } .gallery-caption, .gallery-item dt { text-align: center; } .gallery-caption { height: 4rem; overflow: hidden; } .twitter-tweet { display: block!important; width: 50%!important; margin: auto!important; } nav.comment-navigation h2 { display: none; } .nav-links .nav-next { display: inline-block; margin: 0 0 1rem 0; } .nav-links .nav-previous { display: inline-block; margin: 0 1rem 1rem 0; } .admin-bar-padding { margin-top: 32px } @media (max-width: 768px) { .admin-bar-padding { margin-top: 46px } } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail{border: 2px solid #f4f4f4!important;border-radius: 5px;} .gallery-item{margin:auto;} .gallery-icon a{opacity:0.8} .gallery-icon a:hover{opacity:1} .gallery-columns-1 .gallery-item{width:calc(100% / 1)!important;} .gallery-columns-2 .gallery-item{width:calc(100% / 2)!important;} .gallery-columns-3 .gallery-item{width:calc(100% / 3)!important;} .gallery-columns-4 .gallery-item{width:calc(100% / 4)!important;} .gallery-columns-5 .gallery-item{width:calc(100% / 5)!important;} .gallery-columns-6 .gallery-item{width:calc(100% / 6)!important;} .gallery-columns-7 .gallery-item{width:calc(100% / 7)!important;} .gallery-columns-8 .gallery-item{width:calc(100% / 8)!important;} .gallery-columns-9 .gallery-item{width:calc(100% / 9)!important;} .format-aside .single-post-content p{ font-style:italic} /*label{height: 3rem ; border-radius: 0; padding: 0.8rem 1rem; margin: 0;} input, select{height: 3rem ; border-radius: 0; padding:0 1rem; margin: 0;}*/ #wp-calendar td a{ border-radius: 100%; width: 2rem; height: 2rem; display: inline-block; line-height: 2rem; text-decoration:none; } .blogroll{list-style:none;margin:0;padding:0;} .blogroll li {text-align:center;line-height:1.6rem;} .tagcloud a{ text-decoration: none; padding: 2px 5px; border-radius: 2px; line-height: 1.5em;} /* WP Styling/Resets */ /* ##################################### */ /* Main Styling */ body, html, #wrapper, #main { height: 100%; } body, html, h1, h2, h3, h4, h5, h6, p, span, a, input, textarea, select, option { font-family: 'Lato', sans-serif; font-size: 16px; line-height: 20px; font-weight: 400; } h1, h2, h3, h4, h5, h6, a, span.page-numbers { font-family: 'Josefin Sans', sans-serif; } div, p, span { max-width: 100%; } img { max-width: 100%; height: auto; margin: auto; } pre { white-space: pre-wrap } hr { border: 0; border-radius: 2px; margin: 1rem; } .bodycontainer { min-height: 100%; position: relative; outline: 1px solid rgba(0,0,0,0); z-index: 10; -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); /* reset transforms (Chrome bug) */ transform: translateZ(0) translateX(0) rotateY(0deg); } .bodycontainer::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0px; opacity: 0; background-color: rgba(0,0,0,0.2); -webkit-transition: opacity 0.4s, height 0s 0.4s; transition: opacity 0.4s, height 0s 0.4s; } .wrapper { position: absolute; height: 100%; width: 100%; } #animated-bg { height: 100vh; width: 100vw; } .error, .warning, .notification { } table { border-collapse: collapse; width:100%; } table tr { } table tr td, table tr th { padding: 0.3rem; } ol, ul, dt, dd { text-align: left; } dd { font-style: italic } a { text-decoration: underline; } .fa { margin: 0 0.3rem; position: absolute; right: 0; top: 25%; -webkit-transition: transform 0.3s; transition: transform 0.3s; } a:hover .fa { transform: scale(1.2, 1.2); } /* Main Styling */ /* ##################################### */ /* Logo Styling*/ h2#bshk-menu-head a { margin: 0; padding: 1.5rem 2rem 1rem; top: 0; left: 0; z-index: 9999; display: inline-block; width: 100%; line-height: 2rem; font-size: 2rem; border: none; text-decoration:none; } #bshk-logo .custom-logo-link img { height: 4rem; width: auto; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom: 10px; } #bshk-logo-main { position: fixed; z-index: 9999; top: 0; left: 0; opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s; } #bshk-logo-main.fadeOut { opacity: 0 } #bshk-logo-main .custom-logo-link { margin: 0; padding: 0; top: 0; left: 0; height: 4rem; z-index: 9999; } #bshk-logo-main .custom-logo-link img { height: 4rem; width: auto; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; } .bshk-menu-back{ position: absolute; top: -4.5rem; padding: 0.5rem 0.5rem 0.5rem 0; border-radius: 2px; margin: 0.1rem; font-size: 1rem; } .bshk-menu-back:hover, .bshk-menu-back:focus { cursor: pointer; } .bshk-menu-back .fa{ position:relative; } /* Media Queries*/ @media only screen and (min-width: 768px) { } @media (max-width: 768px) { #bshk-logo .custom-logo-link { padding: 0; } #bshk-logo .custom-logo-link img { margin-bottom: 0; } #bshk-logo-main .custom-logo-link img { } } @media (max-width: 768px) and (orientation:landscape) { } @media (min-width: 768px) and (max-width: 1023px) { } /* Logo Styling */ /* ##################################### */ /* Bshk Nav Menu */ #bshk-menu { padding: 0; border-radius: 2px; min-height: 30vh; max-height: 90vh } .bshk-menu-trig { position: fixed; right: 0; z-index: 100; top: -2px; display: block; margin-left: -30px; width: 60px; height: 60px; cursor: pointer; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s; } .bshk-menu-trig.fadeOut { opacity: 0 } .bshk-menu-trig span { position: absolute; top: 50%; left: 0; display: block; width: 80%; margin: 0 10%; height: 5%; font-size: 0px; -webkit-transition: transform 0.3s, background- 0.3s; transition: transform 0.3s, background- 0.3s; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bshk-menu-trig span:before, .bshk-menu-trig span:after { position: absolute; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: -webkit-transform 0.3s, background- 0.3s; transition: transform 0.3s, background- 0.3s; } .bshk-menu-trig span:before { -webkit-transform: translateY(-300%); transform: translateY(-300%); } .bshk-menu-trig span:after { -webkit-transform: translateY(300%); transform: translateY(300%); } .bshk-menu-close span { transform: rotate(405deg) translateY(0%); } .bshk-menu-close span:before { transform: rotate(450deg) translateY(0%); } .bshk-menu-close span:after { transform: translateY(0%); } ul.bshk-menu-wrap { list-style: none; margin: 0; padding: 0 0 2rem 0; text-align: center; width: 100%; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform 0.3s, background- 0.3s; transition: transform 0.3s, background- 0.3s; } ul.bshk-menu-wrap a .fa { position: initial; } ul.bshk-menu-wrap a:hover .fa { transform: scale(1, 1); } div.bshk-menu-container { overflow: hidden; } ul.bshk-menu-wrap.bshk-menu-level-1 { -webkit-transform: translateX(-100%); transform: translateX(-100%); } ul.bshk-menu-wrap.bshk-menu-level-2 { -webkit-transform: translateX(-200%); transform: translateX(-200%); } ul.sub-menu-1 { display: none; list-style: none; margin: 0; padding: 1rem 0; text-align: center; position: absolute; top: 0; width: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.3s, background- 0.3s; transition: transform 0.3s, background- 0.3s; } ul.sub-menu-2 { display: none; list-style: none; margin: 0; padding: 1rem 0; text-align: center; position: absolute; top: 0; width: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.3s, background- 0.3s; transition: transform 0.3s, background- 0.3s; } ul.bshk-menu-wrap li a { font-size: 1.2rem; line-height: 1.2rem; margin-top: 0.5rem; opacity: 0.8; position: relative; display: inline-block; outline: none; padding: 0.8rem 0; -webkit-transition: all 0.3s; transition: all 0.3s; text-decoration: none } ul.bshk-menu-wrap li a:focus, .bshk-menu-wrap li a:hover { outline: none; opacity: 1; font-size: 1.4rem; } ul.bshk-menu-wrap li a::before, .bshk-menu-wrap li a::after { position: absolute; top: 100%; left: 0; width: 100%; height: 3px; content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); } .bshk-menu-wrap li a::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s, background- 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s, background- 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s, background- 0.3s; } .bshk-menu-wrap li a:hover::before, .bshk-menu-wrap li a:hover::after, .bshk-menu-wrap li a:focus::before, .bshk-menu-wrap li a:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); opacity: 1; } .bshk-menu-wrap li a:hover::after, .bshk-menu-wrap li a:focus::after { top: 98%; } /* Media Queries*/ @media only screen and (min-width: 768px) { } @media (max-width: 768px) { .bshk-menu-trig, #bshk-logo-main { position: absolute; } .bshk-menu-wrap li a { padding: 0.8rem 0; } } @media (max-height: 400px) and (orientation:landscape) { .bshk-menu-wrap li a { padding: 0.3rem 0; font-size: 1rem; margin: 0.2rem; } #bshk-menu { } } @media (min-width: 768px) and (max-width: 1023px) { } /* Bshk Nav Menu */ /* ##################################### */ /* Bshk Nav Menu - animation */ .perspective { position: relative; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position-x: 0%; } .component { margin: 0 auto; width: 60%; text-align: justify; } /* Modal view */ .perspective.modalview { position: fixed; -webkit-perspective: 100vw; perspective: 100vw; } .modalview .bodycontainer { position: absolute; overflow: hidden; width: 100%; height: 100%; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .modalview .wrapper { -webkit-transform: translateZ(-1px); /* solves a rendering bug in Chrome on Windows */ } .animate .bodycontainer::after { opacity: 1; height: 101%; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .outer-nav { position: absolute; height: auto; text-align: center; } .outer-nav.vertical { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .outer-nav.left { left: 5%; } .outer-nav.right { left: 45%; } .outer-nav.top { top: 25%; } .outer-nav.bottom { bottom: 25%; } /* Menu Effect Styling */ .effect-moveleft .bodycontainer { -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .effect-moveleft .bodycontainer::after { background: rgba(255,255,255,0.6); } .effect-moveleft.animate .bodycontainer { -webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px); transform: translateX(-50%) rotateY(45deg) translateZ(-50px); opacity: 0.8; } .no-csstransforms3d .effect-moveleft.animate .bodycontainer { left: -75%; } .outer-nav.horizontal, .outer-nav.vertical { font-size: 1.2rem; width: 37%; margin: 0 5%; } /* Media Queries*/ @media only screen and (min-width: 768px) { .outer-nav.top { top: 50%; } } @media (max-width: 568px) { .effect-moveleft.animate .bodycontainer { -webkit-transform: translateX(-80%) rotateY(45deg) translateZ(-50px); transform: translateX(-80%) rotateY(45deg) translateZ(-50px); } .outer-nav.top { top: 50%; } .outer-nav.horizontal, .outer-nav.vertical { font-size: 1.2rem; width: 72%; margin: 0 5%; } .outer-nav.right { right: auto; left: 15%; } } @media (max-width: 768px) and (orientation:landscape) { .outer-nav.top { top: 50%; } } @media (min-width: 768px) and (max-width: 1023px) { } /* Animated Menu */ /* Bshk Nav Menu - animation */ /* ##################################### */ /* Parralax Scrolling */ /* Scroll elements */ div.scroll-container { width: 100%; margin: 0 auto; position: relative; padding: 1rem; } div.scroll-container::after { content: ''; display: table; clear: both; } div.scroll-main-content { height: calc( 100% - 60px); position: relative; z-index: 1; } div.scroll-container div.intro-header { padding: 30% 20%; border-radius: 2px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } div.scroll- { } div.full-page { height: 100%; width: 100%; position: absolute; top: 30%; left: 0; } .home-body-widget div.scroll-fixed-bg { position: relative; min-height: 15rem; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; z-index: 1; } .page-body div.scroll-fixed-bg { position: relative; min-height: 33vh; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; z-index: 1; } /* Media Queries*/ @media only screen and (min-width: 768px) { .scroll-fixed-bg { background-attachment: fixed; } } @media (max-width: 768px) { div.scroll-bg { opacity: 0.4; } div.scroll-container { padding: 4rem 0 1rem 0; } } @media (max-width: 768px) and (orientation:landscape) { } @media (min-width: 768px) and (max-width: 1023px) { } /* Parralax Scrolling */ /* ##################################### */ /* Home Page */ /* Start of Home Page Header - widget */ div.home-head-widget h1, div.home-head-widget h2, div.home-head-widget h3, div.home-head-widget p, div.home-head-widget a, div.home-head-widget span, div.home-head-widget { } div.home-head-widget { margin: auto; } div.home-head-widget h1 { line-height: 5rem; font-size: 4rem; margin-top: 3rem; margin-left: -0.1rem; } div.home-head-widget h2 { line-height: 2rem; font-size: 2rem; } div.home-head-widget a { line-height: 1rem; font-size: 1.5rem; margin-top: 1rem; text-decoration: none; } img.profile-image { border-radius: 50%; height: 250px; max-width: 250px; } div.profile-image-container { text-align: right; } /* end of Home Page Header - widget */ /* Start of Body Home Page Header - widget */ .home-body-widget h1, .home-body-widget h2, .home-body-widget h3, .home-body-widget p, .home-body-widget a, .home-body-widget span, .home-body-widget div { text-align: center } div.home-body-widget h1, div.home-body-widget h2, div.home-body-widget h3, div.home-body-widget h4, div.home-body-widget h5, div.home-body-widget h6 { } div.home-body-widget h1 { margin: 2rem auto; font-size: 3rem; display: inline-block; line-height: 4rem; } div.home-body-widget h2 { margin: 2rem auto; font-size: 2rem; display: table; line-height: 3rem; } div.home-body-widget h3 { margin: 1rem auto; display: table; font-size: 1.6rem; line-height: 2rem; } div.home-body-widget h4 { margin: 1rem auto; display: table; font-size: 1.4rem; line-height: 1.8rem; } div.home-body-widget h5 { margin: 1rem auto; display: table; font-size: 1.2rem; line-height: 1.5rem; } div.home-body-widget h6 { margin: 0.8rem auto; display: table; font-size: 1rem; line-height: 1rem; } div.home-body-widget p { margin: 1.5rem 0; font-size: 1rem; } /* End of Home Page Header - widget */ /* Button styling for home page & Menu */ /* Button Animation */ .main-btn { position: relative; display: inline-block; outline: none; padding: 1rem 0 1rem; } .main-btn:hover, .main-btn:focus { outline: none; opacity: 1; } .main-btn::before, .main-btn::after { position: absolute; top: 100%; left: 0; width: 100%; height: 3px; content: ''; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); } a.main-btn::after { opacity: 0; -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s, background- 0.3s; -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s, background- 0.3s; transition: top 0.3s, opacity 0.3s, transform 0.3s, background- 0.3s; } a.main-btn:hover::before, a.main-btn:hover::after, a.main-btn:focus::before, a.main-btn:focus::after { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); opacity: 1; } a.main-btn:hover::after, a.main-btn:focus::after { top: 98%; } /* end of button styling for home page */ /* Start of Skills styling */ span.skills { position: relative; border: none; cursor: default; outline: none; display: inline-block; text-align: center; height: 50px; line-height: 50px; width: 180px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin: 10px; border-radius: 5px; } /* end of Skills styling */ /* Media Queries*/ @media only screen and (min-width: 768px) { } @media (max-width: 768px) { div.home-head-widget div.full-page { top: 0rem; text-align: center; } div.home-head-widget h1 { line-height: 4rem; font-size: 3rem; margin-top: 0rem; } img.profile-image { margin-top: 2rem; border-radius: 50%; width: 65%; height: 65%; max-width: 300px; } div.profile-image-container { text-align: center; } span.skills { width: 0%; min-width: 140px } } @media (max-width: 768px) and (orientation:landscape) { div.profile-image-container { display: none; } div.home-head-widget h1 { margin-top: 3.5rem; } } @media (min-width: 768px) and (max-width: 990px) { div.home-head-widget div.full-page { top: 2rem; text-align: center; } div.home-head-widget h1 { line-height: 4rem; font-size: 3rem; margin-top: 5rem; } img.profile-image { margin-top: 2rem; border-radius: 50%; width: 65%; height: 65%; max-width: 300px; } div.profile-image-container { text-align: center; } span.skills { width: 0%; min-width: 140px } } /* Home Page */ /* ##################################### */ /* Pages */ div.page-body h1, div.page-body h2, div.page-body h3, div.page-body p, div.page-body div { text-align: center } div.page-body a, div.post-nav { font-size: 1.2rem; } div.page-body h1, div.page-body h2, div.page-body h3, div.page-body h4, div.page-body h5, div.page-body h6 { } .page-body h1 { margin: 1rem auto 1rem; font-size: 3rem; display: table; line-height: 4rem; max-width: 90%; } .page-body h2 { margin: 1rem auto 1rem; font-size: 2rem; display: table; line-height: 3rem; max-width: 100%; } .page-body h3 { margin: 1rem auto 1rem; display: table; font-size: 1.6rem; line-height: 2rem; } .page-body h4 { margin: 1rem auto 1rem; display: table; font-size: 1.4rem; line-height: 1.5rem; } .page-body h5 { margin: 1rem auto 1rem; display: table; font-size: 1.2rem; line-height: 1rem; } .page-body h6 { margin: 1rem auto 1rem; display: table; font-size: 1rem; line-height: 1rem; } .page-body p { margin: 1rem 0 1rem 0; font-size: 1rem; } .post-nav a:after { } /* Media Queries*/ @media only screen and (min-width: 768px) { } @media (max-width: 768px) { } @media (max-width: 768px) and (orientation:landscape) { } @media (min-width: 768px) and (max-width: 1023px) { } /* Pages */ /* ##################################### */ /* Posts */ .pagination h2 { display: none; } span.page-numbers { font-size: 1.2rem; } .posts-container { margin: .66rem 0; overflow: hidden; } .sticky-flag { display: block; width: 85px; height: 88px; overflow: hidden; position: absolute; top: 0; right: 0; } .sticky-flag span i{ right:initial; position:relative } .sticky-flag span { display: block; transform: rotate(45deg); text-align: center; position: relative; padding: 7px 0px 7px 7px; left: -5px; top: 15px; min-width: 120px; } .post-container { padding: 0; margin: 0.2rem 0; border-radius: 2px; opacity: 0.8; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; border: 3px solid #f4f4f4; position: relative; height: 12rem; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } .post-container:hover { opacity: 1; } .post-title { position: absolute; width: 100%; bottom: 0; left: 0; } .post-container .post-title h3 { width: 100%; font-size: 1.4rem; line-height: 3rem; padding: 0 1rem; margin: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; border: 0; } .post-container:hover .post-title h3 { } .post-container:hover .post-content p { } .post-image { width: 100%; border: 0; margin: 0; padding: 0; display: block; border-radius: 2px; } .single-posts-container { width: 100%; margin:3rem 0; } .single-post-post-nav .post-navigation h2 { display: none; } .post-navigation .nav-links .nav-previous { margin: 0 0.5rem 1rem 0; } .post-navigation .nav-links .nav-next { margin: 0 0 1rem 0.5rem; } .post-navigation .nav-links .nav-previous, .post-navigation .nav-links .nav-next { display: inline-block; width: calc(50% - 0.5rem); padding: 0; } .post-navigation .nav-links .nav-previous .fa { right:initial; left:0; font-size:1.2rem; padding:0.2rem 1rem; } .post-navigation .nav-links .nav-next .fa{ left:initial; right:0; font-size:1.2rem; padding:0.2rem 1rem; } .post-navigation .nav-links .nav-previous a span, .post-navigation .nav-links .nav-next a span { line-height: 3rem; } .post-navigation .nav-links .nav-previous a, .post-navigation .nav-links .nav-next a { display: block; width: 100%; height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0.2rem 2rem; position:relative; } .single-post-container { position: relative; display: inline-block; border-radius: 2px; opacity: 1; margin: 0 0 1rem; padding-bottom: .33rem; width: 100%; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .single-post-image { width: 80%; border-radius: 2px; } .single-post-title { top: 0; padding: 1.25rem; width: 100%; } .single-post-title h2 { margin: 0rem auto 0rem; } .single-post-content { margin-top: 1rem; padding: 1rem; } .single-post-content iframe{ min-width: 415px; min-height: 234px;} /* Media Queries*/ @media only screen and (min-width: 768px) { } @media (max-width: 768px) { } @media (max-width: 768px) and (orientation:landscape) { } @media (min-width: 768px) and (max-width: 1023px) { } /* Posts */ /* ##################################### */ /* Comments*/ /* ##################################### */ div.bshk-comment-list .comment { position: relative; text-align: right; padding:3rem 0 0 3rem; } div.bshk-comment-list .comment > .comment { margin-left: 2rem; padding-bottom: 0; } div.bshk-comment-list .comment .comment-author { position: absolute; top: 0; left: 0; } div.bshk-comment-list .comment .comment-meta { position: absolute; top: 1rem; right: 1rem; } div.bshk-comment-list .comment .comment-meta a { font-size: 0.9rem; } div.bshk-comment-list .comment p { font-size: 1rem; text-align: left; padding: 0; } div.bshk-comment-list .comment p+p { padding:0; } div.bshk-comment-list .comment .reply { margin-right: 1rem; margin-bottom: 1rem; } div.bshk-comment-list .comment .comment-author cite, div.bshk-comment-list .comment .comment-author span { position: relative; top: -1rem; font-size: 0.9rem; } textarea#comment { width: 100%; } form#commentform .logged-in-as a { font-size: 0.9rem; } .comment-form-comment label { display: none; } div.nav-next a, div.nav-previous a, div.reply a { text-decoration: none; } form#commentform .form-submit #submit, .comment-navigation div.nav-next, .comment-navigation div.nav-previous, div.reply { height: 3rem; font-size: 1rem; margin: 0.5rem; display: inline-block; padding: 1rem; border-radius: 2px; border: 0; outline: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } form#commentform .form-submit #submit:hover, form#commentform .form-submit #submit:focus, div.nav-next:focus, div.nav-previous:focus, div.nav-next:hover, div.nav-previous:hover, div.reply:hover, div.reply:focus { opacity: 0.8; } div.bypostauthor { } /* Comments */ /* ##################################### */ /* Social Footer */ .site-footer-widget h1, .site-footer-widget h2, .site-footer-widget h3, .site-footer-widget p, .site-footer-widget a, .site-footer-widget span, .site-footer-widget div { text-align: center } div.site-footer-widget h1, div.site-footer-widget h2, div.site-footer-widget h3, div.site-footer-widget h4, div.site-footer-widget h5, div.site-footer-widget h6 { } div.site-footer-widget h1 { margin: 2rem auto; font-size: 3rem; display: inline-block; line-height: 4rem; } div.site-footer-widget h2 { margin: 2rem auto; font-size: 2rem; display: table; line-height: 3rem; } div.site-footer-widget h3 { margin: 1rem auto; display: table; font-size: 1.6rem; line-height: 2rem; } div.site-footer-widget h4 { margin: 1rem auto; display: table; font-size: 1.4rem; line-height: 1.8rem; } div.site-footer-widget h5 { margin: 1rem auto; display: table; font-size: 1.2rem; line-height: 1.5rem; } div.site-footer-widget h6 { margin: 0.8rem auto; display: table; font-size: 1rem; line-height: 1rem; } div.site-footer-widget p { margin: 1.5rem 0; font-size: 1rem; } /* End of Home Page Header - widget */ div.bshk_social{text-align:center} div.bshk_social .fa{ position: initial; right: initial; top: initial; margin: 0.5rem; font-size: 3rem;} div.bshk_badges img{height:3rem;width:auto;margin:0.3rem;border-radius:5px;} /* Social Footer */ /* ##################################### */ /* Admin Style */ section.boshki-admin-section{ width:100%; background-color:#f4f4f4; border-radius:5px; } /* Admin Style */ /* ##################################### */ /* Key Frames / Animations */ @-webkit-keyframes Fade { 0% { background-position:0% 100% } 50% { background-position:100% 100% } 100% { background-position:0% 100% } } @-moz-keyframes Fade { 0% { background-position:0% 100% } 50% { background-position:100% 100% } 100% { background-position:0% 100% } } @keyframes Fade { 0% { background-position:0% 100% } 50% { background-position:100% 100% } 100% { background-position:0% 100% } } /* Key Frames / Animations */ /* ##################################### */ .bshk_footer_section{ width: 100%; text-align: center; margin:0.5rem; } .bshk_footer_section p,.bshk_footer_section a{ color: #97CE8E; font-size: 0.9rem; }