/* * Theme Name: Barcelona. * Theme URI: http://themeforest.net/item/barcelona-clean-news-magazine-wordpress-theme/13308848 * Description: Clean, modern, and responsive wordpress news & magazine theme by Aggressive Motions. * Author: Aggressive Motions * Author URI: http://www.aggressivemotions.com * Version: 1.5.0 * License: Themeforest Regular License * License URI: http://themeforest.net/licenses/standard * Text Domain: barcelona * Tags: blog, two-columns */ /*------------------------------------------------------------------ [Table of contents] 1. Selection & Placeholder Colors 2. Transitions 3. Body 4. Bootstrap Hack 4.1. Breadcrumb 4.2. Pagination 4.3. Labels 4.4. Form Elements 4.5. Accordion 4.6. Misc. 5. Links & Buttons 5.1. Links 5.2. Buttons 5.2.1. Red Buttons 5.2.2. Vote Buttons 6. Navbar 6.1. Nav Bar Top 6.2. Nav Bar Header 6.3. Nav Bar Logo & Cover Image 6.4. Nav Menu 6.4.1. Mega Menu 6.4.1.1. Mega Menu Posts 6.4.1.2. Mega Menu Bottom 6.4.2. Sub Menu 7. Advertisement 8. Miscellaneous 8.1. Sidebar & Widgets 8.2. Positioning 8.3. Tag List 9. Search Form 10. Posts 10.1. Posts Box 10.1.1. Posts Box 1 10.1.2. Posts Box 2 10.1.3. Posts Box 3 10.1.5. Posts Box 5 10.1.7. Posts Box 7 10.1.8. Posts Box Sidebar 10.1.9. Posts Box Carousel 10.2. Post Summary 11. Footer 11.1. Footer Widgets 12. Single Post & Page (Singular) 12.1. Featured Image Area 12.2. Post Content 12.3. Post Tags 12.4. Post Vote 12.5. Post Sharing 12.6. Post Nav 12.7. Author Box 12.8. Comments 13. Featured Posts 14. Shortcodes 15. Gallery 16. Contact Form 7 -------------------------------------------------------------------*/ /* ------------------ * 1. Selection & Placeholder Colors * ------------------ */ ::-moz-selection { text-shadow: none; background-color: #f2132d; color: #fff; } ::selection { text-shadow: none; background-color: #f2132d; color: #fff; } .form-control::-moz-placeholder { color: inherit; opacity: 1; } .form-control:-ms-input-placeholder { color: inherit; } .form-control::-webkit-input-placeholder { color: inherit; } /* ------------------ * 2. Transitions * ------------------ */ a, .btn, .trs, .mega-menu .post-summary, .instagram-widget img, .posts-box-carousel .item-overlay, .owl-theme .owl-nav [class*=owl-] { -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; -ms-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } .navbar-nav > li > a, .navbar-nav > li > .btn, .navbar-logo { -webkit-transition: color 0.15s ease, background 0.15s ease; -moz-transition: color 0.15s ease, background 0.15s ease; -ms-transition: color 0.15s ease, background 0.15s ease; -o-transition: color 0.15s ease, background 0.15s ease; transition: color 0.15s ease, background 0.15s ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } /* ------------------ * 3. Body * ------------------ */ body { font-size: 14px; color: #010101; overflow-y: scroll; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body.boxed-layout { background-color: rgb( 240, 240, 240 ); } /* ------------------ * 4. Bootstrap Hack * ------------------ */ /* ------------------ * 4.1. Breadcrumb * ------------------ */ .breadcrumb-wrapper { position: relative; z-index: 5; } .breadcrumb-wrapper .container { padding-top: 15px; padding-bottom: 15px; } @media only screen and (min-width: 768px) { .breadcrumb-wrapper .container { padding-top: 11px; padding-bottom: 20px; } } .barcelona-fimg-fp .breadcrumb-wrapper .container, .barcelona-fimg-fs .breadcrumb-wrapper .container { background-color: transparent; } .breadcrumb-wrapper .btn-back { position: absolute; top: 0; right: 15px; text-transform: uppercase; font-size: 12px; font-weight: bold; } .boxed-layout .breadcrumb-wrapper .btn-back { right: 35px; } .breadcrumb-wrapper .btn-back .fa { margin-left: 5px; } .breadcrumb { margin: 0; padding: 0; text-transform: uppercase; letter-spacing: -0.4px; font-size: 12px; font-weight: bold; background-color: transparent; } .breadcrumb > li + .fa { margin: 0 10px; font-weight: bold; } .barcelona-fimg-fp .breadcrumb, .barcelona-fimg-fp .breadcrumb a, .barcelona-fimg-fs .breadcrumb, .barcelona-fimg-fs .breadcrumb a { color: #fff; } /* ------------------ * 4.2. Pagination * ------------------ */ .pagination { width: 100%; margin: 0 0 40px; } .single .pagination { margin: 0; } .posts-box + .pagination { margin-bottom: 60px; } .posts-box + .pagination-infinite .btn { visibility: hidden; border-color: #dfdfdf; } .posts-box + .pagination-infinite .btn-loader { display: block; } .pagination > .page-numbers { display: block; float: left; margin-right: 6px; padding: 0 12px; border: 1px solid #010101; text-transform: uppercase; line-height: 32px; font-weight: bold; color: #010101; } .pagination > .title { border: none; text-transform: none; } .pagination > .prev, .pagination > .next { font-size: 13px; } .pagination > .dots { display: inline-block; margin: 0 3px 0 -3px; border: none; font-size: 22px; } .pagination > .current, .pagination > a.page-numbers:hover { background-color: #010101; color: #fff; } .pagination > li:first-child > a, .pagination > li:first-child > span, .pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > .btn-inverse { outline: 0; border-color: #010101; background-color: #010101; color: #fff; } /* ------------------ * 4.3. Labels * ------------------ */ .label-default { padding: 5px 15px; border-radius: 0; font-size: 12px; background-color: #d5d5d5; color: #fff; } .label-default:active, .label-default:focus, .label-default:hover { background-color: #010101; } /* ------------------ * 4.4. Form Elements * ------------------ */ .form-control, .sidebar-widget select, .footer-widget select { outline: 0; width: 100%; height: 34px; padding: 6px 12px; box-shadow: none; border-color: #d2d2d2; border-radius: 0; resize: vertical; font-size: inherit; background-color: #fff; color: #5b5b5b; } .footer:not(.footer-light) .footer-widget select { border-color: #343434; background-color: #212121; color: #868686; } .footer-light .footer-widget select { background-color: #fafafa; } .form-control:focus { outline: 0; box-shadow: none; border-color: #b2b2b2; } /* ------------------ * 4.5. Accordion * ------------------ */ .panel { position: relative; z-index: 1; box-shadow: none; } .panel-heading { padding-left: 0; } .panel-title a, .panel-body { padding-left: 61px; } .panel-title { position: relative; z-index: 1; min-height: 44px; } .panel-title a { display: inline-block; position: relative; z-index: 1; line-height: 1.4; letter-spacing: -0.4px; font-size: 16px; font-weight: bold; } .panel-title a .inner { display: block; width: 100%; } @media only screen and (min-width: 768px) { .panel-title a .inner { width: 70%; } } .panel-title a .barcelona-toggle-icon { display: block; position: absolute; top: 0; left: 0; width: 42px; padding: 14px 0; text-align: center; background-color: #010101; color: #fff; } .panel-title a .barcelona-toggle-icon .fa { display: none; } .panel-title a.collapsed .barcelona-toggle-icon .fa-plus, .panel-title a:not(.collapsed) .barcelona-toggle-icon .fa-minus { display: block; } .panel-group .panel-heading+.panel-collapse > .panel-body { border-top: none; } .panel-body { padding-top: 0; padding-bottom: 10px; font-size: 14px; } /* ------------------ * 4.6. Misc. * ------------------ */ p { line-height: 1.8; } .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: 0; } .nav > li > a:focus { background-color: transparent; } .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group { margin-left: 0; } .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths, .col-xs-10ths, .col-sm-10ths, .col-md-10ths, .col-lg-10ths, .col-xs-15ths, .col-sm-15ths, .col-md-15ths, .col-lg-15ths, .col-xs-20ths, .col-sm-20ths, .col-md-20ths, .col-lg-20ths { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-5ths { width: 20%; float: left; } .col-xs-10ths { width: 40%; float: left; } .col-xs-15ths { width: 60%; float: left; } .col-xs-20ths { width: 80%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } .col-sm-10ths { width: 40%; float: left; } .col-sm-15ths { width: 60%; float: left; } .col-sm-20ths { width: 80%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } .col-md-10ths { width: 40%; float: left; } .col-md-15ths { width: 60%; float: left; } .col-md-20ths { width: 80%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } .col-lg-10ths { width: 40%; float: left; } .col-lg-15ths { width: 60%; float: left; } .col-lg-20ths { width: 80%; float: left; } } /* ------------------ * 5. Links & Buttons * ------------------ */ /* ------------------ * 5.1. Links * ------------------ */ a:link, a:visited { text-decoration: none; color: #010101; } a:link { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25); } a:hover { color: #f2132d; } /* ------------------ * 5.2. Buttons * ------------------ */ .btn { padding: 3px 11px; border: 1px solid #010101; border-radius: 0; font-size: inherit; background-color: transparent; color: #010101; } .btn:focus, .btn:active { box-shadow: none; border-color: inherit; background-color: transparent; } .btn.disabled, .btn[disabled] { border: 1px solid #a9a9a9; color: #a9a9a9; opacity: 1; } .btn.active, .btn:hover, .nav > li:hover > a, .nav > .current-menu-item > a, .nav > .menu-item-hover > a { border-color: #010101; background-color: #010101; color: #fff; } .btn.btn-full { display: block; width: 100%; padding: 8px 0; font-weight: bold; text-transform: uppercase; } .btn > .btn-loader { display: none; margin-right: 15px; } .btn > .btn-loader img { vertical-align: baseline; } /* ------------------ * 5.2.1. Red Buttons * ------------------ */ .btn-red, .btn-red:focus { padding: 10px 15px; border-color: #7d0f0f; background-color: #7d0f0f; color: #fff; } .btn-red:hover { border-color: #be0000; background-color: #be0000; } .btn-red-2, .btn-red-2:focus { padding: 10px 15px; border-color: #cc1919; background-color: #cc1919; color: #fff; } .btn-red-2:hover { border-color: #e71d1d; background-color: #e71d1d; } /* ------------------ * 5.2.2. Vote Buttons * ------------------ */ .btn-vote, .btn-vote:focus, .btn-vote.btn-voted { padding: 8px 15px; text-transform: uppercase; font-size: 12px; font-weight: bold; color: #fff; } .btn-vote .fa { margin-right: 10px; } .comment-vote .btn-vote .fa { margin-right: 4px; } .btn-vote-up { border-color: #cc1919; background-color: #cc1919; } .btn-vote-up:hover { border-color: #d71414; background-color: #d71414; } .btn-vote-up:focus, .btn-vote-up.btn-voted { border-color: #E50000; background-color: #E50000; } .btn-vote-down { border-color: #010101; background-color: #010101; } .btn-vote-down:hover { border-color: #2e2e2e; background-color: #2e2e2e; } .btn-vote-down:focus, .btn-vote-down.btn-voted { border-color: rgb(73, 73, 73); background-color: rgb(73, 73, 73); } .comment-vote .btn-voted { color: initial !important; } /* ------------------ * 6. Navbar * ------------------ */ .navbar { z-index: 99; margin: 0; border: none; } #navbar { position: relative; z-index: 1; } .navbar-toggle { display: block; position: absolute; z-index: 2; top: 0; right: 0; float: none; margin: 0; padding: 10px 15px; border: none; font-size: 20px; } .navbar-search { display: block; position: absolute; z-index: 2; top: 0; right: 40px; background: transparent; border: none; padding: 10px 15px 10px 15px; font-size: 20px; color: inherit; outline: 0; } @media only screen and (max-width: 767px) { .header-style-c.navbar-dark .navbar-toggle, .header-style-c.navbar-dark .navbar-search { margin: 0; text-shadow: 0 0 25px #010101; } .header-style-c.navbar-light .navbar-toggle, .header-style-c.navbar-light .navbar-search { margin: 0; text-shadow: 0 0 25px #fff; } } @media only screen and (min-width: 768px) { .navbar-search { display: none; } .barcelona-fimg-fp .navbar, .barcelona-fimg-fs .navbar { color: #fff; } .barcelona-fimg-fp .navbar a, .barcelona-fimg-fs .navbar a { color: rgba(255,255,255,1); } .barcelona-fimg-fp .navbar a:hover, .barcelona-fimg-fs .navbar a:hover { color: #fff; } .barcelona-fimg-fp .navbar-light .navbar-nav a, .barcelona-fimg-fs .navbar-light .navbar-nav a { color: #010101; } .barcelona-fimg-fp .navbar-light .navbar-nav li:hover a, .barcelona-fimg-fs .navbar-light .navbar-nav li:hover a { color: #fff; } #navbar { width: 100%; height: auto !important; float: left; padding-bottom: 9px; overflow: hidden; } .navbar-stuck { padding-bottom: 0; } .barcelona-fimg-sw:not(.has-breadcrumb) .navbar:not(.navbar-stuck) #navbar, .barcelona-fimg-sp:not(.has-breadcrumb) .navbar:not(.navbar-stuck) #navbar { padding-bottom: 29px; } .barcelona-fimg-sw:not(.has-breadcrumb) .navbar-stuck, .barcelona-fimg-sp:not(.has-breadcrumb) .navbar-stuck { padding-bottom: 20px; } .navbar-stuck #navbar { padding-bottom: 0; } .navbar .container { padding-top: 30px; } .navbar-stuck .container, .barcelona-fimg-fp .navbar .container, .barcelona-fimg-fs .navbar .container { background-color: transparent; } .navbar-stuck .container { padding-bottom: 0; } .navbar-stuck .navbar-inner { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .navbar-stuck.navbar-light .navbar-inner { background-color: rgb(255, 255, 255) !important; } .navbar-stuck.navbar-dark .navbar-inner { background-color: rgb(0, 0, 0) !important; } .navbar-toggle { display: none; } } /* ------------------ * 6.1. Nav Bar Top * ------------------ */ .navbar-top { display: none; margin: -10px 0 20px; font-size: 12px; } @media only screen and (min-width: 768px) { .navbar-top { display: block; } } .navbar-top ul { margin: 0; } .navbar-top-left { float: left; } .navbar-top-right { float: right; } .navbar-top .social-icons { list-style: none; padding: 0; font-size: 13px; line-height: 12px; } .navbar-top .social-icons li { display: inline-block; padding-left: 7px; padding-right: 8px; } .navbar-top-menu { padding: 0; list-style: none; } .navbar-top-menu li { float: left; } .navbar-top-menu li + li:before { content: "|"; padding: 0 7px; color: #ddd; } /* ------------------ * 6.2. Nav Bar Header * ------------------ */ .container > .navbar-header { position: relative; z-index: 2; width: 100%; margin: 0; } @media only screen and (max-width: 767px) { .container > .navbar-header { height: auto !important; } } .navbar-stuck.navbar-dark .navbar-header { color: #fff; } @media only screen and (min-width: 768px) { .container > .navbar-header { padding-bottom: 10px; } } @media only screen and (min-width: 992px) { .container > .navbar-header { padding-bottom: 10px; } .has-nav-menu .container > .navbar-header { padding-bottom: 30px; } } /* ------------------ * 6.3. Nav Bar Logo & Cover Image * ------------------ */ .navbar-logo { display: block; float: left; height: 50px; line-height: 50px; letter-spacing: -1.8px; white-space: nowrap; font-size: 28px; font-weight: bold; } .navbar-logo:hover { color: inherit !important; } .navbar-stuck.navbar-dark .navbar-logo { color: #fff; } .navbar:not(.navbar-stuck) .logo-text { display: none; } .navbar.header-style-c .navbar-logo { display: none; } .navbar.header-style-c .navbar-header { padding-bottom: 0; } @media only screen and (min-width: 768px) { .navbar:not(.navbar-stuck) .logo-location-sticky_nav { display: none; } } .navbar-stuck .logo-text { display: block; height: 49px; line-height: 49px; } span.logo-text {} .barcelona-fimg-fp .navbar-logo:hover, .barcelona-fimg-fs .navbar-logo:hover { color: #fff !important; } .header-style-b:not(.navbar-stuck) .navbar-header { text-align: center; } .header-style-b .navbar-logo { display: inline-block; float: none; } .navbar-logo .logo-img { display: block; width: 100%; height: 100%; } .navbar-logo .logo-img img { width: auto; height: 100%; vertical-align: top; } .navbar.header-style-c .header-cover-image img { width: 100%; height: auto; } @media only screen and (max-width: 767px) { .navbar-logo .logo-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; } .navbar.header-style-c > .container { padding: 0; } .navbar-dark.header-style-c .header-cover-image img { opacity: 0.2; } } .navbar-logo .logo-both.logo-light, .barcelona-fimg-fp .logo-both.logo-dark, .barcelona-fimg-fs .logo-both.logo-dark { display: none; } .barcelona-fimg-fp .navbar:not(.navbar-stuck) .logo-light, .barcelona-fimg-fs .navbar:not(.navbar-stuck) .logo-light { display: block !important; } .logo-location-header.logov-stuck { display: block; width: auto; height: 49px; } @media only screen and (max-width: 767px) { .navbar-dark .logo-both.logo-dark, .navbar-light .logo-both.logo-light { display: none; } .navbar-dark .logo-light, .navbar-light .logo-dark { display: block !important; } .sticky-logo-custom .logo-location-header { display: none; } } @media only screen and (min-width: 768px) { .navbar-logo { height: 90px; line-height: 90px; font-size: 38px; } .navbar-stuck:not(.sticky-logo-disabled) .navbar-logo { position: absolute; z-index: 2; bottom: -48px; } .navbar-stuck:not(.sticky-logo-disabled) .navbar-logo, .logo-location-sticky_nav, .logo-location-header.logov-stuck { height: 49px; line-height: 45px; font-size: 22px; } .navbar-stuck.sticky-logo-custom .logo-location-header { display: none; } } @media only screen and (min-width: 992px) { .navbar-stuck:not(.sticky-logo-disabled) .navbar-logo, .logo-location-sticky_nav, .logo-location-header.logov-stuck { font-size: 26px; } .navbar-stuck.navbar.header-style-c .navbar-logo { display: block; } .navbar-stuck.navbar-dark .navbar-logo .logo-light, .navbar-stuck.navbar-light .navbar-logo .logo-dark { display: block; } .navbar-stuck.navbar-dark .navbar-logo .logo-both.logo-dark, .navbar-stuck.navbar-light .navbar-logo .logo-both.logo-light { display: none; } .navbar-stuck .navbar-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; } } /* ------------------ * 6.4. Nav Menu * ------------------ */ .navbar-nav { width: 100%; margin: 0; border: 1px solid #010101; background-color: #fff; } .barcelona-fimg-fp .navbar-nav, .barcelona-fimg-fs .navbar-nav { border: none; } @media only screen and (min-width: 768px) { .navbar-stuck .navbar-nav { margin: 0 1px; border: none; background-color: transparent; } } @media only screen and (max-width: 767px) { .navbar-nav { margin-bottom: 25px; padding-left: 0 !important; } } .navbar-nav > li { position: static; } .navbar-nav > li.search { display: none; float: right; } @media only screen and (min-width: 768px) { .navbar-nav > li.search { display: block; } } .navbar-nav > li > a, .navbar-nav > li > .btn { padding: 13px 8px 12px 13px; border: none; line-height: 1; text-transform: uppercase; letter-spacing: -0.2px; font-size: 14px; font-weight: bold; } .navbar-nav li > a .fa { display: none; } .navbar-nav li > a .sc-fa { display: inline-block; font-size: 14px; line-height: 12px; vertical-align: top; margin: 0 4px 0 0; } .navbar-nav > li.search > .btn { height: 37px; padding: 0 14px; font-size: 14px; } @media only screen and (min-width: 768px) { .navbar-nav > li > a { font-size: 11px; } .navbar-stuck .navbar-nav > li > a { padding: 18px 10px; } .navbar-stuck .navbar-nav > li.search > .btn { height: 48px; } } @media only screen and (min-width: 992px) { .navbar-nav > li > a { padding: 12px 14px 13px 18px; font-size: 12px; } .navbar-stuck .navbar-nav > li > a { padding: 18px 10px 18px 10px; } .navbar-nav > li.search > .btn { height: 38px; padding: 0 15px; font-size: 16px; } .navbar-stuck .navbar-nav > li.search > .btn { height: 49px; padding: 0 22px; } .navbar-nav li > a .sc-fa { font-size: 16px; margin-right: 6px; } } @media only screen and (min-width: 1200px) { .navbar-nav > li > a { padding-right: 28px; padding-left: 28px; font-size: 13px; } .navbar-stuck .navbar-nav > li > a { padding-left: 16px; padding-right: 16px; } } .navbar-nav > li > .sub-menu, .navbar-nav > li > .sub-menu li > ul, .navbar-nav > li > .mega-menu { display: none; } @media only screen and (min-width: 768px) { .navbar-nav > li > .sub-menu, .navbar-nav > li > .sub-menu li > ul, .navbar-nav > li > .mega-menu { display: block; visibility: hidden; opacity: 0; pointer-events: none; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .navbar-nav > li:hover > .sub-menu, .navbar-nav > li > .sub-menu li:hover > ul, .navbar-nav > li:hover > .mega-menu { visibility: visible; opacity: 1; pointer-events: auto; } } .navbar-dark .navbar-nav { background-color: #010101; } .navbar-dark .navbar-nav > li > a { color: #fcfcfc; } .navbar-light .navbar-nav > li.current-menu-item > a { outline: 0 !important; background-color: #010101; color: #fff; } .navbar-dark .navbar-nav > li > a:hover, .navbar-dark .navbar-nav > li > a:focus, .navbar-dark .navbar-nav > li.menu-item-hover > a, .navbar-dark .navbar-nav > li.current-menu-item > a, .navbar-dark .navbar-nav > li.search > .btn { color: #fff; } @media only screen and (max-width: 767px) { .navbar { overflow-y: auto; box-shadow: 0 0 10px rgba(0,0,0,0.15); } .navbar li a .fa { margin-left: 10px; } .navbar-nav li > a .sc-fa { margin-left: 0; font-size: 18px; line-height: 13px; } .navbar li.barcelona-tap > a .fa-caret-down { display: inline-block; } .navbar li:not(.barcelona-tap) > a .fa-caret-right { display: inline-block; margin-left: 10px; } .navbar-dark .navbar-inner, .navbar-dark .navbar-inner > .container { background-color: #010101; color: #fff; } .navbar-dark a { color: #fff; } .navbar-dark .navbar-nav > li > .sub-menu > li > a:hover, .navbar-dark .navbar-nav > li > .sub-menu > li:hover > a { color: #fff; } .navbar-light .navbar-nav > li > .sub-menu > li > a:hover, .navbar-light .navbar-nav > li > .sub-menu > li:hover > a { color: #010101; } } /* ------------------ * 6.4.1. Mega Menu * ------------------ */ .mega-menu { position: absolute; left: 0; min-width: 100%; padding: 21px 15px 5px; background-color: #010101; color: #fff; } .navbar-stuck .mega-menu { margin: 0; } .mega-menu-light .mega-menu { z-index: -1; box-shadow: 0 5px 10px rgba(80, 80, 80, 0.4); border: 1px solid #dedede; border-top-color: rgb(245, 245, 245); background-color: #fff; } /* ------------------ * 6.4.1.1. Mega Menu Posts * ------------------ */ .mega-menu .posts-wrapper { padding: 0 10px; } .mega-menu .posts-wrapper .col { padding-right: 10px; padding-left: 10px; } .mega-menu .post-summary { margin-bottom: 0; opacity: 0.75; } .mega-menu .posts-wrapper:hover .post-summary { opacity: 0.55; } .mega-menu-light .mega-menu .post-summary, .mega-menu .post-summary:hover, .mega-menu .posts-wrapper:hover .post-summary:hover { opacity: 1; } .mega-menu .post-summary .post-image { margin-bottom: 15px; } .mega-menu .post-summary .post-title { line-height: 1.2; font-size: 14px; } .mega-menu .post-summary .post-title a { color: #fff; } .mega-menu-light .mega-menu .post-summary .post-title a { color: #010101; } .mega-menu-light .mega-menu .post-summary .post-title a:hover { color: #f2132d; } .mega-menu .post-summary .post-meta { margin-bottom: 20px; font-size: 11px } .mega-menu-light .mega-menu .post-summary .post-meta { color: #5d5d5d; } @media only screen and (min-width: 992px) { .mega-menu .post-summary .post-title { line-height: 1.4; letter-spacing: -0.6px; font-size: 15px; } .mega-menu .post-summary .post-meta { font-size: 13px; } } @media only screen and (min-width: 1200px) { .mega-menu .post-summary .post-title { font-size: 16px; } } /* ------------------ * 6.4.1.2. Mega Menu Bottom * ------------------ */ .mega-menu .mm-bottom { margin-top: 10px; padding: 15px 0 10px; border-top: 1px solid #323232; font-size: 12px; } @media only screen and (min-width: 992px) { .mega-menu .mm-bottom { font-size: 14px; } } .mega-menu-light .mega-menu .mm-bottom { border-color: #e7e7e7; color: #010101; } .mega-menu .tag-list { margin: 0; } .mega-menu .see-all { text-align: right; } .mega-menu .tag-list .list, .mega-menu .tag-list .list a, .mega-menu .see-all a { color: #bebebe; } .mega-menu .tag-list .list a:hover, .mega-menu .see-all a:hover { color: #fff; } .mega-menu-light .mega-menu .tag-list .list, .mega-menu-light .mega-menu .tag-list .list a, .mega-menu-light .mega-menu .see-all a { color: #5d5d5d; } .mega-menu-light .mega-menu .tag-list .list a:hover, .mega-menu-light .mega-menu .see-all a:hover { color: #010101; } /* ------------------ * 6.4.2. Sub Menu * ------------------ */ .sub-menu { display: none; padding: 6px 0 6px 15px; list-style: none; } @media only screen and (min-width: 768px) { .sub-menu { position: absolute; padding: 8px 0; } .sub-menu > li > a:hover, .sub-menu > li:hover > a { background-color: #212121; color: #fff; } .navbar-nav > li > .sub-menu { margin-left: -1px; border: 1px solid #010101; background-color: #010101; color: #AFAFAF; } } @media only screen and (min-width: 1200px) { .sub-menu { padding: 10px 0; } } .sub-menu a { display: block; position: relative; z-index: 1; padding: 9px 45px 9px 30px; font-size: 13px; font-weight: bold; text-transform: uppercase; color: inherit; } .sub-menu > li { position: relative; z-index: 1; } .navbar-nav > li > .sub-menu > li .sub-menu { top: -8px; left: 100%; white-space: nowrap; } .navbar-nav > li > .sub-menu > li .sub-menu a { display: block; padding: 9px 45px 9px 30px; } @media only screen and (min-width: 768px) { .navbar-nav > li > .sub-menu .menu-item-has-children > a .fa-caret-right { display: inline-block; position: absolute; top: 5px; right: 20px; line-height: 28px; font-size: 18px; } .navbar-nav > li > .sub-menu > li .sub-menu { background-color: #212121; } } @media only screen and (min-width: 1200px) { .sub-menu a { font-size: 13px; } .navbar-nav > li > .sub-menu > li .sub-menu { top: -9px; } } /* ------------------ * 7. Advertisement * ------------------ */ .navbar-bn { float: right; } .navbar-bn .barcelona-sc-ad { max-width: 720px; margin: 0 !important; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px) { .navbar-bn { margin-top: 15px; } } .content-bn { width: 100%; margin-bottom: 40px; text-align: center; overflow: hidden; } .content-bn img { max-width: 100%; } .sidebar-bn { margin-bottom: 30px; overflow: hidden; text-align: center; } /* ------------------ * 8. Miscellaneous * ------------------ */ .vm-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; text-align: center; } .vm-wrapper:before { content: " "; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } .vm-middle { display: inline-block; width: 90%; vertical-align: middle; text-align: center; } .nf-wrapper { padding: 30px; text-align: center; } .error404 .nf-wrapper { padding: 0; margin-bottom: 120px; } .nf-404 { display: block; margin-bottom: 20px; font-size: 152px; font-weight: bold; color: #ebebeb; } .nf-title { display: block; margin-bottom: 10px; text-transform: uppercase; font-size: 30px; font-weight: bold; } .nf-wrapper .search-form { width: 100%; margin: 0 auto; } .fa-strava:before { content: "S"; font-weight: 900; font-family: Verdana, sans-serif; } .posts-box .nf-title { color: #ddd; } .nf-desc { display: block; max-width: 390px; margin: 0 auto 40px; line-height: 1.6; text-transform: uppercase; font-size: 12px; font-weight: bold; color: #919191; } @media only screen and (min-width: 768px) { .vm-middle { width: 60%; } .nf-404 { margin: 40px 0 40px; line-height: 1.2; font-size: 216px; } .nf-wrapper .search-form { width: 460px; } } .post-password-form .description { margin-bottom: 20px; } .post-password-form .input-group { max-width: 480px; } .post-password-form .form-control { border-color: #ddd; } .post-password-form .btn { padding: 6px 10px; text-transform: uppercase; font-size: 14px; font-weight: bold; } /* * Override owl-theme */ .owl-theme .owl-dots .owl-dot span { width: 16px; height: 16px; background: #dedede; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; margin: 0 5px; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 20px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #cccaca; } .sidebar-widget .owl-theme .owl-dots .owl-dot span, .footer-widget .owl-theme .owl-dots .owl-dot span { width: 14px; height: 14px; } .footer-dark .owl-theme .owl-dots .owl-dot span { background: #494949; } .footer-dark .owl-theme .owl-dots .owl-dot.active span, .footer-dark .owl-theme .owl-dots .owl-dot:hover span { background: #868686; } .owl-theme .owl-nav { margin: 0 0 40px; padding: 0 10px; text-align: left; } .owl-theme .owl-nav [class*=owl-] { margin: 0 3px; padding: 2px 9px; border: 1px solid #010101; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: #fff; color: #010101; } .owl-theme .owl-nav [class*=owl-] .fa { font-weight: bold; } .owl-theme .owl-nav [class*=owl-]:hover { background: #010101; color: #fff; } iframe[name="google_conversion_frame"] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px; float: left; } .seperator { width: 100%; height: 1px; display: block; margin: 0 0 40px; background: #ebebeb; } #sidebar .seperator { margin: 0 0 40px; } .container { background: #fff; } #page-wrapper > .container:nth-of-type(1) { margin-top: -300px; padding-top: 300px; } .no-breadcrumb #page-wrapper > .container:nth-of-type(1) { padding-top: 320px; } @media only screen and (min-width: 768px) { #page-wrapper > .container:nth-of-type(1) { padding-top: 320px; } #page-wrapper > .featured-posts:nth-of-type(1) .container { padding-top: 20px; } } .barcelona-buddypress, .barcelona-bbpress { margin-bottom: 60px; } .bypostauthor {} .gallery-caption {} /* ------------------ * 8.1. Sidebar & Widgets * ------------------ */ #sidebar, #sidebar * { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .sidebar-inner { margin: 0 auto; padding-bottom: 20px; } .sidebar-widget { margin-bottom: 40px; } .sidebar-widget .widget-title { position: relative; z-index: 1; margin-bottom: 20px; line-height: 33px; } .sidebar-widget .widget-title:after { position: absolute; z-index: 0; top: 13px; left: 0; width: 100%; height: 5px; background-color: rgb(245, 245, 245); content: " "; } .sidebar-widget .widget-title .title { display: inline-block; position: relative; z-index: 1; margin: 0; padding-right: 15px; font-size: 18px; letter-spacing: -0.4px; text-transform: uppercase; font-weight: bold; background-color: #fff; } .sidebar-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) { padding-left: 20px; list-style: none; } .sidebar-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li { position: relative; z-index: 1; padding: 8px 0; border-bottom: 1px solid #f3f3f3; text-transform: uppercase; font-size: 12px; color: inherit; } .sidebar-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li:before { position: absolute; left: -20px; top: 0; font-size: 22px; color: #010101; content: "\203a"; } .sidebar-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li:last-child { border-bottom: none; } .sidebar-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) ul.children { margin-top: 8px; border-top: 1px solid #f3f3f3; } .sidebar-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) ul.children li:last-child { padding-bottom: 0; } .bbp-search-form .search-form .input-group-addon, .sidebar-widget .search-form .input-group-addon, .footer-widget .search-form .input-group-addon, .nf-wrapper .search-form .input-group-addon { display: none; } .bbp-search-form .search-form .form-control, .sidebar-widget .search-form .form-control, .footer-widget .search-form .form-control, .nf-wrapper .search-form .form-control { height: 40px; border-color: #010101; } .bbp-search-form .search-form .btn, .sidebar-widget .search-form .btn, .footer-widget .search-form .btn, .nf-wrapper .search-form .btn { height: 40px; padding-right: 15px; padding-left: 15px; margin-left: -1px; font-size: 14px; border-color: #010101; background-color: #010101; color: #fff; } .bbp-search-form .search-form .btn-search-text, .sidebar-widget .search-form .btn .btn-search-text, .footer-widget .search-form .btn .btn-search-text, .nf-wrapper .search-form .btn .btn-search-text { display: none; } .sidebar-widget.barcelona-widget-facebook-box .fb-page-wrapper { width: 100%; min-height: 215px; overflow: hidden; } .sidebar-widget.barcelona-widget-google-plus-box .g-page-wrapper { width: 100%; min-height: 111px; overflow: hidden; } .widget_rss .widget-title .title .rsswidget img { margin: 3px 6px 0 0; vertical-align: top; } .widget_recent_comments ul li, .widget_recent_entries ul li, .widget_rss ul li, .widget_display_replies ul li, .widget_display_topics ul li { padding: 11px 0 !important; text-transform: none !important; } .sidebar-widget.widget_recent_comments ul li:before, .sidebar-widget.widget_recent_entries ul li:before, .sidebar-widget.widget_rss ul li:before, .sidebar-widget.widget_display_replies ul li:before, .sidebar-widget.widget_display_topics ul li:before { top: 3px !important; } .sidebar-widget.widget_recent_entries .post-date, .sidebar-widget.widget_rss .rss-date { display: block; padding-top: 5px; font-size: 12px; } .sidebar-widget.widget_rss .rssSummary { padding-top: 8px; font-size: 12px; } .sidebar-widget.widget_rss cite { display: inline-block; margin-top: 10px; font-size: 12px; } .sidebar-widget.widget_rss cite:before { content: "\2015 "; } .sidebar-widget.widget_categories .screen-reader-text, .sidebar-widget.widget_archive .screen-reader-text { display: none; } .sidebar-widget .tagcloud a { display: inline-block; margin: 0 4px 8px 0; padding: 5px 10px; border: 1px solid #010101; font-size: inherit !important; } .sidebar-widget .tagcloud a:hover { background-color: #010101; color: #fff; } .footer-widget .textwidget p, .sidebar-widget .textwidget p { line-height: 1.875; font-size: 13px; } .footer-widget .textwidget img, .sidebar-widget .textwidget img { margin: 10px 0; max-width: 100%; height: auto; } .sidebar-inner .sidebar-widget:first-child .textwidget img { margin-top: 0; } .widget_display_stats dl { display: inline-block; } .widget_display_stats dl:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .widget_display_stats dt, .widget_display_stats dd { float: left; padding: 10px 0; border-bottom: 1px solid #efefef; } .footer-widget.widget_display_stats dt, .footer-widget.widget_display_stats dd { border-color: #333; } .footer-light .footer-widget.widget_display_stats dt, .footer-light .footer-widget.widget_display_stats dd { border-color: #ececec; } .widget_display_stats dt:last-of-type, .widget_display_stats dd:last-of-type { border-bottom: none; } .widget_display_stats dt { width: 60%; } .widget_display_stats dd { width: 40%; text-align: center; } .sidebar-widget.barcelona-widget-posts .post-summary { margin-bottom: 35px; } @media only screen and (min-width: 768px) { .sidebar-widget.barcelona-widget-posts .post-summary { margin-bottom: 20px; } } .sidebar-widget.barcelona-widget-posts .posts-box .col:last-child .post-summary { margin-bottom: 0; } .sidebar-widget.barcelona-widget-slider-posts .posts-box-carousel { margin-bottom: 40px; } @media only screen and (min-width: 1200px) { .sidebar-widget.barcelona-widget-slider-posts .posts-box-carousel { min-height: 493px; } } .barcelona-widget-about-me .about-me { padding: 30px 15px; text-align: center; background-color: rgb(250,250,250); } .barcelona-widget-about-me .about-image { margin-bottom: 30px; } .barcelona-widget-about-me .about-name { font-size: 16px; font-weight: bold; } .barcelona-widget-about-me .about-job-title { font-size: 12px; } .barcelona-widget-about-me .about-image img { width: 200px; height: 200px; border-radius: 100%; } .barcelona-widget-about-me .description { padding: 5px 20px 0; line-height: 1.7; text-align: center; color: #656565; } @media only screen and (min-width: 768px) { .sidebar-widget.barcelona-widget-slider-posts .posts-box-carousel .post-summary { padding-top: 25px; } .sidebar-widget.barcelona-widget-slider-posts .posts-box-carousel .post-summary .post-title { width: 80%; } } @media only screen and (min-width: 992px) { .sidebar-widget.barcelona-widget-slider-posts .posts-box-carousel .nav-dir li .btn { width: 45px; height: 45px; font-size: 22px; } .sidebar-widget.barcelona-widget-slider-posts .posts-box-carousel .post-summary .post-title { width: 100%; } } #calendar_wrap caption { padding: 8px 0; text-transform: uppercase; text-align: center; font-size: 16px; font-weight: bold; background-color: #010101; color: #fff; } #wp-calendar { width: 100%; border: 2px solid #010101; } #wp-calendar td, #wp-calendar th { padding: 10px 0; text-align: center; } #wp-calendar tbody td { border: 1px solid rgb(240,240,240); color: #919191; } #wp-calendar thead th { border: 1px solid rgb(240,240,240); background-color: rgb(252,252,252); } .barcelona-widget-latest-tweets .tweet { margin-bottom: 25px; } .barcelona-widget-latest-tweets .tweet .date { margin-bottom: 10px; font-size: 12px; } .barcelona-widget-latest-tweets .tweet .date .fa { margin-right: 12px; font-size: 16px; vertical-align: bottom; } .barcelona-widget-latest-tweets .tweet .text { padding-left: 30px; line-height: 152%; } .barcelona-widget-latest-tweets .tweet .text a { text-decoration: underline; } .instagram-images { padding: 0; list-style: none; } .instagram-images li { position: relative; z-index: 1; float: left; width: 112px; height: 112px; } .footer-widget .instagram-images li { width: 33.3333%; height: auto; } .instagram-images li a { display: block; background-color: #010101; } .instagram-images li a img { width: 100%; height: auto; vertical-align: middle; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .instagram-images li a:hover img { opacity: 0.85; } .barcelona-widget-social-media-icons { padding-top: 10px } .barcelona-widget-social-media-icons .social-icons { padding: 0; list-style: none; text-align: center; } .barcelona-widget-social-media-icons .social-icons li { margin: 0 4px 8px 0; display: inline-block; } @media only screen and (min-width: 992px) { .barcelona-widget-social-media-icons .social-icons li { margin: 0 6px 8px 0; float: left; } } .sidebar-widget .social-icons li:nth-child(8n) { margin-right: 0; } .barcelona-widget-social-media-icons .social-icons li a { display: block; width: 36px; height: 36px; line-height: 36px; border: 1px solid #010101; text-align: center; font-size: 16px; background-color: #fff; color: #010101; } .barcelona-widget-social-media-icons .social-icons.circle li a { border-radius: 100%; } .barcelona-widget-social-media-icons .social-icons li a:hover { background-color: #010101; color: #fff; } .sidebar-widget.widget_text { width: 336px; margin-left: auto; margin-right: auto; } /* ------------------ * 8.2. Positioning * ------------------ */ #sidebar { width: auto; z-index: 1; } #sidebar .sidebar-inner { width: 100%; overflow: hidden; } @media only screen and (min-width: 560px) { #sidebar { margin: 0 -15px; } #sidebar .sidebar-inner { width: 300px; } } @media only screen and (min-width: 768px) { #sidebar { margin: 0; } #sidebar .sidebar-inner { width: auto; } } @media only screen and (min-width: 992px) { .sidebar-right #main { float: left; padding-right: 19px; } .sidebar-right #sidebar { float: right; padding-left: 15px; } .sidebar-left #main { float: right; padding-left: 19px; } .sidebar-left #sidebar { float: left; padding-right: 15px; } .has-sidebar #main { width: 589px; } #sidebar { width: 351px; } .boxed-layout .container, .boxed-layout-bg .container { width: 970px; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 1032px) { .boxed-layout .container, .boxed-layout-bg .container { width: 990px; padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 1200px) { .sidebar-right #main { padding-right: 27px; border-right: 1px solid #f3f3f3; } .sidebar-right #sidebar { padding-left: 26px; } .sidebar-left #main { padding-left: 27px; border-left: 1px solid #f3f3f3; } .sidebar-left #sidebar { padding-right: 26px; } .has-sidebar #main { width: 778px; } #sidebar { width: 362px; } .boxed-layout .container, .boxed-layout-bg .container { width: 1170px; padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 1240px) { .boxed-layout .container, .boxed-layout-bg .container { width: 1210px; padding-left: 35px; padding-right: 35px; } } /* ------------------ * 8.3. Tag List * ------------------ */ .tag-list { margin-bottom: 25px; } .tag-list .title { display: inline-block; margin-right: 5px; } .tag-list .list { display: inline-block; } .tag-list .list a { margin-left: 5px; } /* ------------------ * 9. Search Form * ------------------ */ .search-form-full { display: none; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.55); -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -ms-transition: background 0.2s; -o-transition: background 0.2s; transition: background 0.2s; } .search-form-full:before { display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle; content: " "; } .search-form-full .search-form { display: inline-block; width: 90%; vertical-align: middle; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .search-form-full .search-form-inner { position: relative; } .search-form .barcelona-sc-close { display: none; } .search-form-full .search-form .barcelona-sc-close { display: block; position: absolute; z-index: 1; left: 0; top: -65px; height: 45px; line-height: 45px; text-transform: uppercase; font-weight: bold; cursor: pointer; color: #fff; } .search-form-full .barcelona-sc-close .barcelona-ic { display: inline-block; width: 35px; height: 35px; margin: 5px 10px 0 0; border-radius: 100%; font-size: 22px; line-height: 35px; background-color: #fff; color: #010101; } .search-form-full .barcelona-sc-close .barcelona-text { vertical-align: top; } .search-form-full .input-group { margin-top: -10%; box-shadow: 0 0 65px rgba(0,0,0,0.5); border-radius: 4px; } .search-form-full .input-group-addon { padding-right: 5px; padding-left: 15px; border: none; font-weight: bold; font-size: 16px; background-color: #fff; color: inherit; } .search-form-full .btn-search-icon { display: none; } .search-form-full .form-control { outline: 0; height: 60px; box-shadow: none; border: none; font-size: 14px; } .search-form-full .input-group-btn { border-radius: 0 4px 4px 0; font-size: inherit; } .search-form-full .btn { height: 60px; padding: 0 15px; border-radius: 0 4px 4px 0; text-transform: uppercase; background-color: #010101; color: #fff; } .search-form-full .btn:hover { margin: 0; } @media only screen and (min-width: 768px) { .search-form-full .search-form { width: 80%; } .search-form-full .input-group-addon { width: 50px; padding-left: 20px; font-size: 24px; } .search-form-full .form-control { font-size: 18px; } .search-form-full .btn { padding: 0 25px; font-size: 16px; } } @media only screen and (min-width: 992px) { .search-form-full .search-form { width: 70%; } } @media only screen and (min-width: 1200px) { .search-form-full .search-form { width: 45%; } } .in-search-box { display: none; max-width: 240px; margin: 0 0 40px; background-color: #e30c0c; } @media only screen and (min-width: 768px) { .in-search-box { display: table; } } .in-search-box .btn { padding: 9px 16px; border: none; background-color: #cc0b0b; font-size: 16px; color: #fff; } .in-search-box .btn .fa { font-weight: bold; } .in-search-box .form-control { padding: 0 12px; height: 40px; border: none; background-color: transparent; color: #fff; } /* ------------------ * 10. Posts * ------------------ */ /* ------------------ * 10.1. Posts Box * ------------------ */ .posts-box { margin-bottom: 20px; } .posts-box-2 { margin-bottom: 40px; } .section-html { margin-bottom: 60px; } #sidebar .posts-box { margin-bottom: 15px; } .posts-box .posts-wrapper { position: relative; z-index: 1; } @media only screen and (max-width: 767px) { .posts-box .posts-wrapper .row .col:first-child { padding-left: 15px; } .posts-box .posts-wrapper .row .col:last-child { padding-right: 15px; } .posts-box .posts-wrapper .row .col { padding-left: 7.5px; padding-right: 7.5px; } .posts-box-6 .col, .posts-box-8 .col, .posts-box-9 .col { margin-bottom: 40px; } } .posts-box .posts-wrapper .loader-overlay { display: block; position: absolute; top: 0; left: 0; z-index: 11; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); } .posts-box .posts-wrapper .loader-overlay .preload-wrap { top: 60px; } @media only screen and (min-width: 768px) { .posts-box .posts-wrapper .loader-overlay .preload-wrap { top: 120px; } } .posts-box-related-posts { margin: 20px 0 40px; } .box-header { position: relative; z-index: 1; margin: 0 0 35px; } .bbpress .box-header { margin: 0 0 25px; } .box-header .title { display: inline-block; position: relative; z-index: 1; margin: 0; padding-right: 20px; text-transform: uppercase; font-size: 26px; font-weight: bold; background-color: #fff; } .box-header.has-title:after { position: absolute; z-index: 0; top: 13px; left: 0; width: 100%; height: 5px; background-color: rgb(245, 245, 245); content: " "; } .box-header .btn-group { position: relative; z-index: 1; width: 100%; margin: 0; min-height: 32px; border-color: #010101; } .box-header.has-title .btn-group { margin: 35px 0 0; } .box-header .btn-group .btn { margin: 0; padding: 4px 11px; overflow: hidden; text-transform: uppercase; letter-spacing: -0.6px; font-size: 12px; } .box-header .btn-group .btn:not(:first-child) { border-left: none; } .box-header .btn-group .btn.active { font-weight: bold; } .box-header .btn-group-items-1 .btn { width: 100%; } .box-header .btn-group-items-2 .btn { width: 50%; } .box-header .btn-group-items-3 .btn { width: 33.333333%; } .box-header .btn-group-items-4 .btn { width: 25%; } .box-header .btn-group-items-5 .btn { width: 20%; } .box-header .btn-group-items-6 .btn { width: 16.6666%; } .box-header .btn-group-items-7 .btn { width: 14.2857%; } .box-header .btn-group-items-8 .btn { width: 12.5%; } .box-header .btn-group .btn-toggle { display: none; } .box-description { width: 100% !important; margin: -10px 0 40px !important; } @media only screen and (max-width: 767px) { .box-header .btn-group { overflow: hidden; height: 32px; padding-top: 32px; } .box-header .btn-group .btn:not(.active) { display: block; width: 100%; margin: 0 0 -1px; padding: 6px 0 6px 15px; text-align: left; font-size: 13px; font-weight: bold; color: #bdbdbd; background-color: #010101; } .box-header .btn-group .btn.active { position: absolute; left: 0; top: 0; width: 100%; height: 32px; padding: 0 0 0 15px; border: none; box-shadow: none; line-height: 1; text-align: left; font-size: 14px; background-color: #010101; color: #fff; } .box-header .btn-group .btn-toggle { display: block; position: absolute; top: 0; right: 0; z-index: 2; height: 32px; line-height: 1; padding: 0 20px 0 0; border: none; outline: 0; font-size: 16px; color: #fff; background-color: transparent; } } .search-header .title { font-size: 22px; } .search-header.has-title:after { top: 11px; } /* ------------------ * 10.2. Post Summary * ------------------ */ .post-summary { margin-bottom: 25px; } .post-summary .post-image { display: block; position: relative; z-index: 1; margin-bottom: 20px; text-align: center; } .post-summary .post-image > a { display: block; position: relative; z-index: 1; overflow: hidden; background: #010101; } .post-summary .post-image > a img { width: 100%; height: auto; opacity: 1; -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -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; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } @media only screen and (min-width: 768px) { .post-summary .post-image > a:hover img { opacity: 0.8; } .zoom-enabled .post-image > a:hover img { -webkit-transform: scale3d(1.05, 1.05, 1.05); -moz-transform: scale3d(1.05, 1.05, 1.05); -ms-transform: scale3d(1.05, 1.05, 1.05); -o-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } .post-summary .post-image a:hover .overlay { opacity: 1; } } .post-summary .post-image .video-duration { position: absolute; z-index: 2; bottom: 15px; left: 15px; padding: 2px 5px; background-color: #010101; color: #fff; } .post-summary .post-image .overlay { display: block; position: absolute; z-index: 1; width: 100%; height: 100%; text-align: center; color: #fff; background-color: rgba(0, 0, 0, 0.3); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .post-summary .post-image .overlay:before { display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle; content: " "; } .post-summary .post-image .overlay .fa { padding: 15px 0 15px; width: 65px; height: 65px; border: 2px solid #fff; border-radius: 100%; line-height: 33px; vertical-align: middle; text-align: center; font-size: 32px; background-color: rgba(0,0,0,0.25); } .posts-box-4 .psum-small .post-image .overlay .fa { width: 48px; height: 48px; line-height: 15px; font-size: 28px; } @media only screen and (min-width: 768px) { .posts-box-4 .psum-small .post-image .overlay .fa { width: 48px; height: 48px; line-height: 15px; font-size: 28px; } } @media only screen and (min-width: 992px) { .sidebar-widget .post-summary .post-image .overlay .fa { width: 48px; height: 48px; line-height: 15px; font-size: 28px; } } .post-summary .post-image .overlay .fa-play { padding-left: 4px; } .post-summary .post-title { width: 100%; margin: 0 0 15px; line-height: 1.33; font-weight: bold; letter-spacing: -0.6px; font-size: 24px; } .post-summary .post-excerpt { margin: 0 0 15px; line-height: 1.65; color: #919191; font-size: 0.95em; } .post-summary .post-meta { position: relative; z-index: 1; margin: 0 0 15px; padding: 15px 0 0; min-height: 33px; list-style: none; font-size: 12px; color: #bdbdbd; } .post-summary .post-meta:not(.no-sep):before { content: " "; position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 40px; height: 1px; background-color: #dfdfdf; } .post-summary .post-meta.no-sep { padding-top: 0; min-height: 18px; } .post-summary .post-meta li { display: block; float: left; margin-right: 10px; } .post-summary .post-meta li:last-child { margin-right: 0; } .post-summary .post-meta .post-date { margin-right: 15px; } .post-summary .post-meta .fa { margin-right: 5px; } .psum-small .post-title { font-weight: normal; } /* Post Summary Horizontal */ .psum-horizontal .post-image { float: left; width: 40%; } .psum-horizontal .post-details { float: left; width: 60%; padding-left: 15px; } .psum-horizontal .post-meta { margin-bottom: 0; } /* Post Summary Labelled (See Author Archive) */ .psum-labelled .post-image { position: relative; z-index: 1; float: left; width: 55%; padding-left: 76px; } .psum-labelled .post-image .post-date-label { position: absolute; top: 0; left: 0; width: 60px; padding: 9px 0; text-align: center; background-color: #010101; color: #fff; font-weight: bold; } .psum-labelled .post-image .post-date-label .month { display: block; text-transform: uppercase; line-height: 1; font-size: 18px; } .psum-labelled .post-image .post-date-label .day { display: block; line-height: 1; font-size: 32px; } .psum-labelled .post-details { float: left; width: 45%; padding-left: 15px; } .psum-labelled .post-meta { margin-bottom: 0; } /* ------------------ * 10.1.1. Posts Box 1 * ------------------ */ /* Layout A */ .posts-box-1 .psum-small .post-title { font-size: 14px; } .posts-box-1 .psum-small .post-image, .posts-box-1 .psum-small .post-title, .posts-box-1 .psum-small .post-excerpt, .posts-box-1 .psum-small .post-meta { margin-bottom: 9px; } /* ------------------ * 10.1.2. Posts Box 2 * ------------------ */ /* Layout B */ .posts-box-2 .post-summary .post-title { width: 100%; } .posts-box-2 .psum-horizontal .post-details { padding-left: 30px; } /* ------------------ * 10.1.3. Posts Box 3 * ------------------ */ /* Layout E */ .posts-box-3 .post-summary { margin-bottom: 20px; } .posts-box-3 .post-summary .post-image { background-color: #010101; } .posts-box-3 .post-summary .post-image img { position: relative; z-index: -1; opacity: 0.7; } @media only screen and (min-width: 768px) { .posts-box-3 .post-summary .post-image a:hover img { opacity: 1; } .posts-box-3 .post-summary .post-image a:hover .overlay { background-color: rgba(0,0,0,0.15); } } /* ------------------ * 10.1.5. Posts Box 5 * ------------------ */ /* Layout E */ .posts-box-5 .post-summary { border-bottom: 1px solid #ebebeb; margin-bottom: 20px; } .posts-box-5 .post-summary:last-child { border-bottom: none; } .posts-box-5 .psum-small { margin-bottom: 15px; padding-bottom: 5px; } .posts-box-5 .psum-featured .post-title { font-size: 22px; } /* ------------------ * 10.1.7. Posts Box 7 * ------------------ */ .posts-box-7 .post-summary .post-title { font-size: 20px; } /* ------------------ * 10.1.8. Posts Box Sidebar * ------------------ */ .posts-box-sidebar .box-title { margin-bottom: 30px; font-size: 18px; } @media only screen and (min-width: 768px) { .post-summary .post-title { font-size: 22px; } .psum-featured .post-title { font-size: 32px; } .psum-small .post-title { font-size: 20px; } .posts-box-5 .psum-small .post-title { font-size: 16px; } .posts-box-1 .psum-small .post-title { font-size: 16px; } .posts-box-1 .psum-small .post-meta { padding-top: 5px; } .posts-box-1 .psum-small .post-meta .post-date { margin-right: 10px; } .posts-box-1 .post-summary.psum-small { margin-bottom: 45px; } .posts-box-1 .col-right > .row .col:last-child .post-summary { margin-bottom: 0; } .posts-box-4 { margin-bottom: 30px; } .posts-box-4 .psum-featured .post-title { font-size: 22px; } .posts-box-4 .psum-small { margin-bottom: 5px; } .posts-box-4 .psum-small .post-title { margin-bottom: 10px; line-height: 1.45; letter-spacing: -0.4px; font-size: 13px; } .posts-box-5 .post-summary:not(.psum-featured) .post-title { width: 70%; } .posts-box-5 .psum-featured .post-title { font-size: 20px; } .posts-box-5 .col-num-4 .psum-featured .post-title { font-size: 16px; line-height: 1.4; } .posts-box-5 .col-num-4 .post-meta .post-date { width: 100%; margin-bottom: 5px; } .posts-box-7 .post-summary .post-title { font-size: 32px; } .posts-box-8 .post-summary .post-title { font-size: 22px; } .posts-box-9 .post-summary .post-title { font-size: 20px; } } @media only screen and (min-width: 992px) { .post-summary .post-title { font-size: 24px; } .posts-box-4 .psum-small { margin-bottom: 10px; } .posts-box-5 .post-summary:not(.psum-featured) .post-title { width: 80%; } .posts-box-7 .post-summary .post-title { font-size: 38px; } .posts-box-7 .post-summary .post-excerpt { width: 90%; font-size: 16px; } .has-sidebar .posts-box-8 .post-summary .post-title { font-size: 18px; } .has-sidebar .posts-box-9 .post-summary .post-excerpt { display: none; } .posts-box-9 .post-summary .post-title { font-size: 20px; } .has-sidebar .posts-box-9 .post-summary .post-title { font-size: 16px; } .has-sidebar .posts-box-9 .post-meta .post-date { width: 100%; margin-bottom: 5px; } .psum-featured .post-title { font-size: 30px; } .psum-small { margin-bottom: 30px; } .psum-small .post-image, .psum-small .post-title, .psum-small .post-excerpt, .psum-small .post-meta { margin-bottom: 15px; } .psum-small .post-meta { margin-top: -5px; padding-top: 12px; } .psum-small .post-meta .post-date { float: none; margin-bottom: 5px; } .psum-small .post-title { font-size: 16px; } .posts-box-sidebar .psum-small .post-title { font-size: 14px; } .sidebar-none .psum-featured .post-title, .sidebar-none .posts-box-2 .post-summary .post-title, .sidebar-none .posts-box-3 .post-summary .post-title, .sidebar-none .posts-box-6 .post-summary .post-title, .sidebar-none .posts-box-carousel .post-summary .post-title { font-size: 32px; } .sidebar-none .psum-small .post-title { font-size: 18px; } } @media only screen and (min-width: 1200px) { .psum-featured .post-title { font-size: 32px; } .posts-box-4 .psum-featured .post-title { font-size: 27px; } .posts-box-4 .psum-small { margin-bottom: 15px; } .posts-box-5 .psum-featured .post-title { font-size: 22px; } .posts-box-5 .col-num-4 .psum-featured .post-title { font-size: 18px; line-height: 1.4; } .posts-box-5 .col-num-4 .post-meta .post-date { width: auto; margin-bottom: 0; } .posts-box-5 .col-num-5 .psum-featured .post-title { font-size: 15px; line-height: 1.4; } .posts-box-5 .col-num-6 .psum-featured .post-title { font-size: 15px; line-height: 1.4; } .posts-box-5 .col-num-5 .post-meta .post-date, .posts-box-5 .col-num-6 .post-meta .post-date { width: 100%; margin-bottom: 5px; } .posts-box-5 .post-summary:not(.psum-featured) .post-title { width: 70%; } .posts-box-5 .col-num-4 .post-summary:not(.psum-featured) .post-title { width: 90%; } .posts-box-5 .col-num-5 .post-summary:not(.psum-featured) .post-title, .posts-box-5 .col-num-6 .post-summary:not(.psum-featured) .post-title { width: 100%; font-size: 14px; } .psum-small .post-title { font-size: 16px; } .posts-box-4 .psum-small .post-title { font-size: 14px; } .posts-box-sidebar .psum-small .post-title { font-size: 14px; } .sidebar-none .psum-featured .post-title, .sidebar-none .posts-box-2 .post-summary .post-title, .sidebar-none .posts-box-3 .post-summary .post-title, .sidebar-none .posts-box-6 .post-summary .post-title, .sidebar-none .posts-box-carousel .post-summary .post-title { font-size: 36px; } .sidebar-none .psum-small .post-title { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .posts-box-3 .post-summary .post-date { display: none; } .posts-box-5 .col-sm-4 .psum-featured .post-meta .post-views, .posts-box-5 .col-sm-4 .psum-featured .post-meta .post-likes, .posts-box-5 .col-sm-4 .psum-featured .post-meta .post-comments { display: none; } } @media only screen and (max-width: 991px) { .posts-box-sidebar .psum-horizontal .post-image, .posts-box-sidebar .psum-horizontal .post-details { float: none; width: 100%; padding-left: 0; } .posts-box-sidebar .psum-horizontal .post-image { margin-bottom: 15px; } } @media only screen and (max-width: 767px) { .psum-featured .post-title { font-size: 26px; } .psum-small .post-title { font-size: 18px; } .posts-box-4 .psum-small .post-title { font-size: 16px; } .posts-box-5 .psum-small { margin-bottom: 25px; padding-bottom: 15px; } } @media only screen and (max-width: 560px) { .posts-box-2 .post-summary .post-image { width: 100%; float: none; } .posts-box-2 .post-summary .post-details { float: none; width: 100%; padding-left: 0; } .posts-box-2 .post-summary.psum-labelled .post-details { padding-left: 75px; } .posts-box-2 .post-summary .post-title { font-size: 22px; } } /* ------------------ * 10.1.9. Posts Box Carousel * ------------------ */ .posts-box-carousel { margin-bottom: 60px; overflow: hidden; } .posts-box-gallery { margin-bottom: 40px; } .posts-box-carousel .posts-wrapper, .posts-box-3 .posts-wrapper { overflow: hidden; white-space: nowrap; } .posts-box-carousel .owl-carousel, .posts-box-3 .owl-carousel { float: left; } .posts-box-carousel .item, .posts-box-3 .item { position: relative; z-index: 1; display: inline-block; width: 100%; float: none; text-align: left; vertical-align: top; white-space: initial; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } @media only screen and (max-width: 767px) { .posts-box-3 .owl-item .item .post-image { margin-right: -15px; margin-left: -15px; } } .posts-box-carousel .owl-item.center { text-align: center; } .posts-box-carousel .owl-item.center .item { text-align: left; } .posts-box-carousel .item img { display: block; max-width: 100%; height: auto; } .posts-box-carousel .item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(1,1,1,0.3); } .posts-box-carousel a.item-overlay .post-title { color: initial; } .posts-box-carousel .item-overlay:not(.show-always) { opacity: 0; } .posts-box-carousel .owl-stage:hover .item-overlay:not(.show-always), .posts-box-gallery .posts-wrapper:hover .item-overlay:not(.show-always), .posts-box-gallery .posts-wrapper:hover .nav-dir { opacity: 1; } .posts-box-carousel .item-overlay .inner { position: absolute; width: 100%; left: 0; bottom: 0; padding: 15px; } .posts-box-carousel .post-summary { float: left; width: 85%; margin-bottom: 0; padding: 20px 20px 15px; white-space: initial; background-color: #fff; } .posts-box-carousel .post-summary .post-cat { margin-bottom: 15px; text-transform: uppercase; } .posts-box-carousel .post-summary .post-cat a { font-weight: bold; color: #fff; } .posts-box-carousel .post-summary .post-cat a:hover { background-color: #010101; } .posts-box-carousel .post-summary .post-title { font-size: 18px; font-weight: bold; line-height: 1.3; } @media only screen and (max-width: 767px) { .posts-box.posts-box-carousel { margin-right: -15px; margin-left: -15px; } .posts-box.posts-box-carousel .post-summary .post-title { font-size: 16px; } .posts-box.posts-box-carousel .post-summary .post-cat { display: none; } .posts-box.posts-box-carousel .post-summary .post-meta { margin: 0 0 3px; } } .posts-box-gallery .post-summary .post-title { margin: 0; font-size: 14px; font-weight: normal; } .posts-box-carousel .nav-dir { float: left; width: 15%; padding: 0; list-style: none; } .posts-box-gallery .nav-dir { opacity: 0; position: absolute; z-index: 2; top: calc(50% - 40px); width: 100%; cursor: pointer; } .posts-box-gallery .nav-dir li { float: left; } .posts-box-gallery .nav-dir li:first-child { float: right; } .posts-box-carousel .nav-dir li .btn { width: 40px; height: 40px; border: none !important; font-size: 18px; background-color: #fff; } .posts-box-gallery .nav-dir li .btn { height: 80px !important; background-color: rgba(255,255,255,0.5); } .posts-box-gallery .nav-dir li .btn:hover { background-color: rgba(255,255,255,0.8); } .posts-box-carousel:not(.posts-box-gallery) .nav-dir li:first-child .btn { background-color: #010101; color: #fff; } .posts-box-carousel .nav-dir li:last-child .btn:hover { color: inherit; } .posts-box-gallery .nav-dir li .btn:hover { color: #010101; } .posts-box-carousel .slide-nav { margin-bottom: 40px; } .posts-box-carousel .slide-nav li { float: left; margin-right: 5px; } .posts-box-carousel .slide-nav li:first-child { float: right; } @media only screen and (min-width: 768px) { .posts-box-gallery .post-summary .post-title { font-weight: bold; } .posts-box-carousel .post-summary { width: 70%; } .posts-box-carousel .post-summary .post-title { width: 80%; font-size: 28px; } } @media only screen and (min-width: 992px) { .posts-box-carousel .nav-dir li .btn { width: 50px; height: 50px; font-size: 22px; } .posts-box-carousel .post-summary { width: 60%; } .sidebar-none .posts-box-carousel .post-summary { width: 50%; } .posts-box-carousel .post-summary .post-title { width: 90%; font-size: 22px; } .posts-box-gallery .post-summary .post-title { font-size: 16px; } .sidebar-widget .posts-box-carousel .post-summary, .footer-widget .posts-box-carousel .post-summary { width: 85%; } .sidebar-widget .posts-box-carousel .post-summary .post-title, .footer-widget .posts-box-carousel .post-summary .post-title { font-size: 20px; } } @media only screen and (min-width: 1200px) { .posts-box-carousel .post-summary .post-title { font-size: 26px; } .posts-box-gallery .post-summary .post-title { font-size: 20px; } .sidebar-widget .posts-box-carousel .post-summary, .footer-widget .posts-box-carousel .post-summary { width: 85%; } } /* ------------------ * 11. Footer * ------------------ */ .footer, .footer .container { background-color: #010101; color: #868686; } .footer .container { padding-top: 55px; padding-bottom: 45px; overflow: hidden; } .footer:not(.footer-light), .footer:not(.footer-light) a { color: #868686; } .footer:not(.footer-light) a:hover { color: #fff; } .footer-light, .footer-light .container { background-color: #f9f9f9; color: inherit; } @media only screen and (min-width: 992px) { .boxed-layout .footer { background-color: transparent; } } .footer .logo-inverse { display: inline-block; margin-bottom: 5px; letter-spacing: -1.1px; font-size: 38px; font-weight: bold; color: #fff !important; } .footer-light .logo-inverse { color: #010101 !important; } .footer-dark .logo-both.logo-dark, .footer-light .logo-both.logo-light { display: none; } .footer-menu { width: 100%; display: block; padding: 0; min-height: 22px; list-style: none; text-align: center; } .footer-menu li { display: inline-block; margin: 0 10px 10px; } .footer-menu li a { text-transform: uppercase; font-size: 13px; } .footer-bottom .f-col { margin-bottom: 30px; text-align: center; } .footer-bottom .f-col:last-child { margin-bottom: 0; } @media only screen and (min-width: 992px) { .footer-menu { text-align: right; } .footer-menu li { margin: 0 0 10px 20px; } .footer-bottom.has-logo .footer-menu { margin-top: 20px; } .footer-bottom.has-logo.has-copy-text .footer-menu { margin-top: 30px; } .footer-bottom .f-col:first-child { margin-bottom: 0; text-align: left; } .footer-bottom .f-col:last-child { text-align: right; } } /* ------------------ * 11.1. Footer Widgets * ------------------ */ .footer-widget { margin-bottom: 60px; } @media only screen and (min-width: 768px) { .footer-sidebars { margin: 0 -30px; } .footer-sidebars .f-col { padding: 0 30px; } } @media only screen and (min-width: 992px) { .f-col .footer-widget:first-child { margin-bottom: 50px; } .footer-widget + .footer-widget { margin-top: 30px; } } .footer-widget .widget-title { position: relative; z-index: 1; margin-bottom: 25px; line-height: 33px; } .footer-sidebars .sidebar-widget .widget-title:after, .footer-widget .widget-title:after { position: absolute; z-index: 0; top: 13px; left: 0; width: 100%; height: 5px; background-color: rgba(100, 100, 100, 0.35); content: " "; } .footer-light .footer-widget .widget-title:after, .footer-light .footer-sidebars .sidebar-widget .widget-title:after { background-color: rgb(235, 235, 235); } .footer-widget .widget-title .title, .footer-sidebars .sidebar-widget .widget-title .title { display: inline-block; position: relative; z-index: 1; margin: 0; padding-right: 15px; font-size: 18px; letter-spacing: -0.4px; text-transform: uppercase; font-weight: bold; background-color: #010101; color: #fff; } .footer-widget .widget-title .title a, .footer-sidebars .sidebar-widget .widget-title a { color: #fff; } .footer-light .footer-widget .widget-title .title, .footer-light .footer-widget .widget-title .title a { background-color: #f9f9f9; color: inherit; } .footer-widget.barcelona-widget-posts .post-summary { margin-bottom: 35px; } @media only screen and (min-width: 992px) { .footer-widget.barcelona-widget-posts .post-summary { margin-bottom: 10px; } } @media only screen and (max-width: 560px) { .footer-widget.barcelona-widget-posts .posts-box .col { width: 100%; } } .footer-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) { margin-top: -8px; padding-left: 15px; list-style: none; } .footer-sidebars .sidebar-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li, .footer-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li { position: relative; z-index: 1; padding: 8px 0; border-bottom: 1px solid #212121; text-transform: uppercase; font-size: 12px; } .footer-light .footer-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li { border-color: #ececec; } .footer-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li:before { position: absolute; left: -15px; top: 0; font-size: 22px; content: "\203a"; } .footer-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) li:last-child { border-bottom: none; } .footer-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) ul.children { margin-top: 8px; border-top: 1px solid #212121; } .footer-widget ul:not(.post-meta):not(.nav-dir):not(.instagram-images):not(.social-icons) ul.children li:last-child { padding-bottom: 0; } .footer:not(.footer-light) .footer-widget #calendar_wrap caption { background-color: #212121; color: #fff; } .footer:not(.footer-light) .footer-widget #wp-calendar { border-color: #212121; } .footer:not(.footer-light) .footer-widget #wp-calendar thead th { border-color: #212121; background-color: #111; } .footer:not(.footer-light) .footer-widget #wp-calendar tbody td { border-color: #212121; color: #868686; } .footer:not(.footer-light) .footer-widget #wp-calendar tbody td a { color: #fff; } .footer-widget.widget_categories .screen-reader-text, .footer-widget.widget_archive .screen-reader-text { display: none; } .footer-dark .footer-widget .post-meta { color: #767676; } .footer-widget.barcelona-widget-slider-posts a, .footer-widget.barcelona-widget-slider-posts a:hover { color: #010101; } .footer-widget.barcelona-widget-facebook-box .fb-page-wrapper { min-height: 215px; } .footer-widget.widget.barcelona-widget-google-plus-box .g-page-wrapper { min-height: 111px; } .footer-widget.widget_recent_comments ul li, .footer-widget.widget_recent_entries ul li, .footer-widget.widget_rss ul li { text-transform: none !important; } .footer-widget.widget_recent_entries .post-date, .footer-widget.widget_rss .rss-date { display: block; padding-top: 5px; font-size: 12px; } .footer-widget.widget_rss .rssSummary { padding-top: 8px; font-size: 12px; } .footer-widget.widget_rss cite { display: inline-block; margin-top: 10px; font-size: 12px; } .footer-widget.widget_rss cite:before { content: "\2015 "; } .footer-widget .search-form .input-group-addon { display: none; } .footer-widget .search-form .form-control { height: 40px; border-color: #010101; } .footer-dark .footer-widget .search-form .form-control { border-right-color: #1f1f1f; background-color: #1f1f1f; color: #868686; } .footer-widget .search-form .btn { height: 40px; padding-right: 15px; padding-left: 15px; margin-left: -1px; font-size: 14px; border-color: #010101; background-color: #010101; color: #fff; } .footer-dark .footer-widget .search-form .btn { background-color: #1f1f1f; color: #fff; } .footer-dark .footer-widget .search-form .btn:hover, .footer-dark .footer-widget .search-form .btn:focus { border-left-color: #1f1f1f; } .footer-widget .search-form .btn .btn-search-text { display: none; } .footer-widget .tagcloud a { display: inline-block; margin: 0 4px 8px 0; padding: 5px 10px; border: 1px solid #444; font-size: inherit !important; } .footer-widget .tagcloud a:hover { background-color: #010101; color: #fff; } .footer-light .footer-widget .tagcloud a { border-color: #010101; } /* ------------------ * 12. Single Post & Page (Singular) * ------------------ */ /* ------------------ * 12.1. Featured Image Area * ------------------ */ .featured-image { position: relative; z-index: 3; margin: 0 -15px 0; background-color: #010101; } header.post-image { position: relative; } .featured-image-credit { position: absolute; z-index: 5; bottom: 0; right: 0; padding: 8px 16px; font-size: 11px; background-color: rgba(0, 0, 0, 0.5); color: #fff; } .single-container .fimg-wrapper.fimg-no-thumb .featured-image { margin: 0; } .featured-image .container { background-color: transparent; } .featured-image .fimg-inner { display: block; position: relative; z-index: 1; width: 100%; min-height: 384px; } @media only screen and (max-width: 767px) { .featured-image .fimg-inner { height: auto !important; } } .featured-image .backstretch { opacity: 0.6; -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; } .featured-image .post-title { display: block; margin: 0 0 10px; line-height: 1.2; letter-spacing: -0.6px; font-size: 24px; font-weight: bold; color: #fff; } @media only screen and (min-width: 768px) { .featured-image { margin: 0; } .featured-image .backstretch { opacity: 0.55; } .fimg-wrapper:not(.fimg-sp) .featured-image:hover .backstretch { opacity: 0.4; } .featured-image .post-title { font-size: 30px; } } @media only screen and (min-width: 992px) { .featured-image .fimg-inner { min-height: 484px; } .featured-image .post-title { font-size: 36px; } } @media only screen and (min-width: 1200px) { .featured-image .fimg-inner { min-height: 584px; } .featured-image .post-title { font-size: 42px; } } .featured-image .post-excerpt { margin: 10px 0 0; line-height: 1.6; font-size: 14px; color: #efefef; } .featured-image .post-meta { display: inline-block; list-style: none; margin: 0; padding: 0 10px; color: #fff; } .featured-image .post-meta a { color: inherit; } .featured-image .post-meta > li { display: inline-block; padding: 10px; font-size: 14px; color: #fff; } .featured-image .post-meta > li .fa { margin-right: 10px; } .featured-image .post-meta > li.post-categories { display: block; } .featured-image .post-meta > li.post-categories ul { display: inline-block; } .featured-image .post-meta > li.post-categories ul li:after { content: ","; } .featured-image .post-meta > li.post-categories ul li:last-child:after { content: ""; } .featured-image .post-meta > li.post-categories ul li a { display: inline-block; } .fimg-wrapper:not(.fimg-no-thumb) .featured-image .post-meta > li.post-categories ul li a { color: #fff; } @media only screen and (max-width: 560px) { .featured-image .post-meta > li { padding: 10px 8px; font-size: 12px; } .featured-image .post-meta > li .fa { margin-right: 5px; } .featured-image .post-meta .post-date { width: 100%; } } .fimg-wrapper:not(.fimg-cl) + .single-container { padding-top: 25px; } @media only screen and (min-width: 768px) { .fimg-wrapper:not(.fimg-cl):not(.fimg-no-thumb) .featured-image .post-meta > li { font-size: 14px; } .fimg-wrapper:not(.fimg-cl):not(.fimg-no-thumb) + .single-container { padding-top: 65px; } .fimg-wrapper.fimg-media + .single-container { padding-top: 45px; } } /* * Featured Image Area - Classic Image */ .fimg-cl { margin-bottom: 35px; } .fimg-cl.fimg-no-meta, .fimg-cl.fimg-no-thumb { margin-bottom: 25px; } .home-page .fimg-cl.fimg-no-meta, .home-page .fimg-cl.fimg-no-thumb { margin-bottom: 35px; } .fimg-cl .vm-middle { width: 70%; } @media only screen and (min-width: 1200px) { .fimg-cl .featured-image .fimg-inner { min-height: 453px; } } /* * Featured Image Area - Screen Width Image */ .fimg-sw .featured-image { margin-left: -15px; margin-right: -15px; } /* * Featured Image Area - Parallax */ .barcelona-parallax-wrapper { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; min-height: 560px; overflow: hidden; background-color: #010101; } @media only screen and (max-width: 767px) { .barcelona-parallax-wrapper { top: auto !important; bottom: 0; height: auto !important; min-height: 424px; } } .barcelona-parallax-inner { position: absolute; overflow: hidden; top: -50%; left: -50%; width: 200%; height: 200%; } .barcelona-parallax-inner img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; min-width: 50%; min-height: 50%; max-width: 100%; height: auto; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } @media only screen and (max-width: 767px) { .barcelona-parallax-inner img { transform: translate3d(0px, 0px, 0px) !important; } } /* * Featured Image Area - Screen Width Parallax */ .fimg-sp { position: relative; z-index: 1; overflow: hidden; width: 100%; } .fimg-sp .featured-image { position: relative; z-index: 1; overflow: hidden; margin-left: -15px; margin-right: -15px; background-color: #010101; } .fimg-sp .featured-image .container { position: relative; z-index: 3; } /* * Featured Image Area - Full Screen Image */ .fimg-fs .featured-image { position: relative; background-color: transparent; } @media only screen and (min-width: 768px) { .fimg-fs .featured-image { position: initial; } } .fimg-fs .featured-image .container { position: relative; z-index: 3; } .fimg-fs .fimg-inner { display: none; } @media only screen and (min-width: 768px) { .fimg-fs .fimg-inner { min-height: 301px; } } /* * Featured Image Area - Full Screen Parallax */ .fimg-fp .featured-image { position: relative; background-color: transparent; } @media only screen and (min-width: 768px) { .fimg-fp .featured-image { position: initial; } } .fimg-fp .featured-image .container { position: relative; z-index: 3; padding: 0; } .fimg-fp .fimg-inner { display: none; } @media only screen and (min-width: 768px) { .fimg-fp .fimg-inner { min-height: 301px; } .fimg-fp .vm-middle { margin-bottom: 38px; } } /* * Featured Image Area - No Thumbnail */ .fimg-no-thumb .featured-image { background-color: transparent; } .fimg-no-thumb .featured-image .post-meta { color: #010101; } .fimg-no-thumb .featured-image .fimg-inner { min-height: 0; } .fimg-no-thumb .featured-image .container { background-color: #fff; } .fimg-no-thumb .vm-wrapper { position: static; } .fimg-no-thumb .vm-wrapper:before { display: none; } .fimg-no-thumb .vm-middle { width: 100%; text-align: initial; } .fimg-no-thumb .featured-image .post-title { margin-bottom: 25px; color: inherit; } .fimg-no-thumb:not(.fimg-cl) .featured-image .post-title { padding: 16px 0 8px; } .fimg-no-thumb .featured-image .post-meta { margin: 0 0 5px; border: 1px solid #010101; background-color: #fff; clear: both; float: left; } .fimg-no-thumb .featured-image .post-meta li { color: inherit; } .fimg-no-thumb:not(.fimg-media) .featured-image .vm-middle:after { position: absolute; z-index: 0; top: 17px; left: 0; width: 100%; height: 10px; background-color: rgb(245, 245, 245); content: " "; } .fimg-no-thumb .featured-image .vm-middle .post-title { display: inline-block; position: relative; z-index: 1; margin: 0; padding-right: 20px; text-transform: uppercase; font-size: 34px; font-weight: bold; background-color: #fff; float: left; margin: 0 0 20px; } /* * Featured Image Area - No Meta */ .fimg-no-meta .featured-image .post-title { margin-bottom: 0; } .fimg-no-meta:not(.fimg-cl) .featured-image .post-title { margin-bottom: 12px; } /* * Featured Image Area - Media */ .fimg-media .featured-image iframe, .fimg-media .featured-image object { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; } .fimg-media.fimg-cl .featured-image iframe, .fimg-media.fimg-cl .featured-image object { position: initial; margin-bottom: 15px; } /* * Featured Image Area - Audio */ .fimg-media-audio:not(.fimg-cl) .featured-image { background-color: #f6f6f6; } .fimg-media-audio:not(.fimg-cl) .featured-image .fimg-inner { min-height: 180px; } .fimg-media-audio.fimg-sw .featured-image .fimg-inner { min-height: 220px; } .fimg-media-audio.fimg-media-internal .featured-image .fimg-inner { min-height: 0; } .fimg-media-audio.fimg-cl .mejs-audio { margin-bottom: 30px; } /* * Featured Image Area - Video */ .fimg-media-video.fimg-cl .fluid-width-video-wrapper { margin-bottom: 30px; } .fimg-media-video .wp-video { width: 100% !important; } .fimg-media-video.fimg-cl .wp-video { margin-bottom: 30px; } /* ------------------ * 12.2. Post Content * ------------------ */ .post-content { margin-bottom: 60px; line-height: 2; font-size: 16px; color: rgb(49, 49, 49); } .page-template-page-modules .post-content { margin-bottom: 30px; } .post-content .woocommerce { font-size: .875em; } @media only screen and (min-width: 992px) { .sidebar-none .post-content { margin: 0 auto; width: 750px; } } .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin: 0 0 30px; line-height: 1.475; font-weight: bold; letter-spacing: -0.6px; color: #010101; } .post-content h1 { font-size: 28px; } @media only screen and (min-width: 768px) { .post-content h1 { font-size: 36px; } .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { line-height: 1.4; } body:not(.barcelona-fimg-cl) .sidebar-right .post-content:not(.box-description) h1:first-child, body:not(.barcelona-fimg-cl) .sidebar-right .post-content:not(.box-description) h2:first-child, body:not(.barcelona-fimg-cl) .sidebar-right .post-content:not(.box-description) h3:first-child, body:not(.barcelona-fimg-cl) .sidebar-right .post-content:not(.box-description) h4:first-child, body:not(.barcelona-fimg-cl) .sidebar-right .post-content:not(.box-description) h5:first-child, body:not(.barcelona-fimg-cl) .sidebar-right .post-content:not(.box-description) h6:first-child { margin-bottom: 12px; -webkit-transform: translateY(-18px); -moz-transform: translateY(-18px); -ms-transform: translateY(-18px); -o-transform: translateY(-18px); transform: translateY(-18px); } body:not(.barcelona-fimg-cl) .sidebar-left .post-content:not(.box-description) h1:first-child, body:not(.barcelona-fimg-cl) .sidebar-left .post-content:not(.box-description) h2:first-child, body:not(.barcelona-fimg-cl) .sidebar-left .post-content:not(.box-description) h3:first-child, body:not(.barcelona-fimg-cl) .sidebar-left .post-content:not(.box-description) h4:first-child, body:not(.barcelona-fimg-cl) .sidebar-left .post-content:not(.box-description) h5:first-child, body:not(.barcelona-fimg-cl) .sidebar-left .post-content:not(.box-description) h6:first-child { margin-bottom: 18px; -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); -ms-transform: translateY(-12px); -o-transform: translateY(-12px); transform: translateY(-12px); } } .post-content > p, .post-content > div, .post-content > ul, .post-content > ol, .post-tags { margin: 0 0 30px; font-size: inherit; color: inherit; line-height: 1.875; } .post-content > ul, .post-content > ol { margin: 30px 0 30px; } .post-content > ul li, .post-content > ol li { padding: 0 0 8px } .post-content > .pagination { margin: 15px 0; } .post-content blockquote { border: none; min-height: 71px; margin: 0 0 50px; padding: 15px 60px 0 100px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuBAMAAACllzYEAAAALVBMVEXeCAj////ug4P3wcHmRkb98PDkNjbzoqLqYGD50dHiJyfgFxf74OD1srLxk5O8mzOYAAAATklEQVQ4y2MYBfQFXEogoIUhzioIAsIY4owOIFJ5KIhz4BAvLMAqzh4kjk3ce2pCagEW8c4wBrZwLOIxCQwMqcEY4ny3gQSbBcMooCsAAA+fDMJ6pXLXAAAAAElFTkSuQmCC) no-repeat 40px 20px; line-height: 1.875; font-size: 16px; font-weight: 400; } .post-content blockquote p { line-height: inherit; } @media only screen and (min-width: 768px) { .sidebar-none .post-content blockquote { width: 80%; } } @media screen and (max-width: 560px) { .post-content blockquote { padding-left: 70px; padding-right: 15px; background-position: 15px 20px; font-size: 14px; } } .post-content .twitter-tweet { margin: 40px auto !important; } .post-content > pre { margin-bottom: 15px; padding: 5px 10px; border-radius: 0; border-color: rgb(230,230,230); line-height: 1.875; font-weight: 400; font-size: 14px; background-color: rgb(252,252,252); color: inherit; } .post-content strong { color: initial; } .post-content img, .post-content iframe, .post-content object, .post-content video { max-width: 100%; } .post-content iframe, .post-content object, .post-content video { margin: 10px 0 15px; border: none; } .post-content:not(.section-html) img { height: auto; } .post-content .wp-caption { max-width: 100%; margin-bottom: 20px !important; padding: 10px; border: 1px solid rgb(230,230,230); background: rgb(250,250,250); } .post-content .wp-caption > .wp-caption-text { margin: 8px 0 0; text-align: center; font-size: 14px; } .post-content .alignleft { float: left; margin: 5px 20px 10px 0; } .post-content .alignright { float: right; margin: 5px 0 10px 20px; } .post-content .aligncenter { display: block; margin: 40px auto 40px; } .post-content .wp-caption.aligncenter { text-align: center; } .post-content .alignnone { margin: 5px 20px 10px 0; } @media only screen and (min-width: 992px) { .sidebar-none .post-footer { width: 750px; margin: 0 auto; } } /* ------------------ * 12.3. Post Tags * ------------------ */ .post-tags { margin: 0 -15px 40px; padding: 20px 15px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; font-size: inherit; } @media only screen and (min-width: 768px) { .post-tags { margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; } } .post-tags .title { color: initial; } .post-tags a { display: inline-block; margin-left: 10px; color: #A9A9A9; } .post-tags a:hover, .post-tags a:focus { color: inherit; } /* ------------------ * 12.4. Post Vote * ------------------ */ .post-vote { margin-bottom: 40px; } .post-vote .vote-login { padding-bottom: 10px; color: #CA0B20; } .post-vote .col-left { padding-right: 5px; text-align: right; } .post-vote .col-right { padding-left: 5px; text-align: left; } .post-vote-disabled .col .btn { cursor: default; } .post-vote-disabled .col .btn:not(.btn-voted) { border-color: #d9d9d9 !important; background-color: #d9d9d9; } /* ------------------ * 12.5. Post Sharing * ------------------ */ .post-sharing { margin-bottom: 40px; font-size: 24px; } .post-sharing li > a { padding: 10px; } /* ------------------ * 12.6. Post Nav * ------------------ */ .posts-nav { margin-bottom: 60px; } @media only screen and (max-width: 767px) { .posts-nav .col { width: 100%; } } .posts-nav .col:first-child { padding: 0 30px 0 60px; border-bottom: 1px solid #efefef; text-align: right; } .posts-nav .col:last-child { padding: 0 65px 0 30px; text-align: left; } .posts-nav .col > a { position: relative; z-index: 1; display: block; padding: 30px 0; font-size: 14px; font-weight: bold; line-height: 1.3; color: #d2d2d2; } .posts-nav .col > a .fa { position: absolute; left: -40px; top: calc(50% - 13px); width: 26px; height: 26px; line-height: 21px; text-align: center; border: 2px solid; border-radius: 100%; font-size: 16px; } .posts-nav .col:last-child > a { color: inherit; } .posts-nav .col:last-child > a .fa { left: auto; right: -40px; padding-left: 2px; border-color: inherit; } @media only screen and (min-width: 768px) { .posts-nav { margin: 0 auto 40px; border-top: 1px solid #efefef; border-bottom: 1px solid #efefef; } .posts-nav .col:first-child { border-bottom: none; border-right: 1px solid #efefef; } .posts-nav .col > a .fa { left: -55px; } .posts-nav .col:last-child > a .fa { left: auto; right: -55px; } .posts-nav .col > a:hover { color: inherit; } } /* ------------------ * 12.7. Author Box * ------------------ */ .author-box { position: relative; z-index: 1; width: 100%; min-height: 194px; margin-bottom: 40px; } .page-template-page-authors .author-box { margin-bottom: 30px; padding: 30px; background: rgb(250,250,250); } .page-template-page-authors .author-box .author-image { top: 15px; left: 20px; } .page-template-page-authors .author-box .author-image img { border-radius: 100%; } .post-footer .author-box { width: auto; margin-left: -15px; margin-right: -15px; } @media only screen and (min-width: 768px) { .post-footer .author-box { max-width: 768px; margin-left: auto; margin-right: auto; } } .author-box-inverse { padding: 20px; min-height: 204px; background: #010101; color: #fff; } .author-box .author-image { position: absolute; } .author-box .author-details { padding-left: 184px; font-size: 13px; } .author-box .author-name { display: block; font-size: 16px; font-weight: bold; } .page-template-page-authors .author-box .author-name { font-size: 22px; } .author-box-inverse a { color: #fff; } .author-box .author-title, .author-box .author-desc { margin-bottom: 0; font-family: Georgia, sans-serif !important; font-style: italic; } .author.archive .author-box .author-title, .author.archive .author-box .author-desc { font-style: normal; font-size: 14px; } .author-box .author-title, .author-box-inverse .author-desc { letter-spacing: 0.2px; line-height: 1.5; color: #a0a0a0; } .author-box .author-title { display: inline-block; margin-bottom: 10px; font-size: 12px; } .author-box .author-social { margin-bottom: 15px; } .author-box .author-social a { margin-right: 3px; color: #b0b0b0; } .author-box .author-social a:hover { color: inherit; } .author-box-inverse .author-social a:hover { color: #fff; } @media only screen and (max-width: 767px) { .author-box .author-image { width: 20%; } .author-box .author-image img { width: 100%; height: auto; } .author-box .author-details { padding-left: calc(20% + 30px); } } @media only screen and (max-width: 560px) { .author-box .author-details { padding-left: calc(20% + 30px); } } @media only screen and (max-width: 370px) { .author-box .author-details { padding-left: calc(20% + 30px); } } /* ------------------ * 12.8. Comments * ------------------ */ .comments-title { margin-bottom: 30px; padding: 0 0 15px; border-bottom: 1px solid #ededed; text-transform: uppercase; font-size: 24px; font-weight: bold; } .comments-nav ul { list-style: none; margin: 0 0 25px; padding: 0 0 15px; border-bottom: 1px dashed #a2a2a2; } .comments-nav-bottom { margin-top: -15px; } .comments-nav-bottom ul { border-bottom: none; border-top: 1px dashed #a2a2a2; margin: 0 0 40px; padding: 15px 0 0; } .comments-nav ul .nav-previous { float: left; } .comments-nav ul .nav-next { float: right; } .comments-list { margin-bottom: 60px; } .comments-list > .comment { margin-bottom: 20px; } .comment { position: relative; z-index: 1; min-height: 100px; margin-bottom: 0; padding-left: 118px; } .comments-list .comment:last-child { margin-bottom: 0; } .comments-list.hide-avatars .comment { padding-left: 60px; } .comment.depth-1 { padding-left: 0 !important; } .comment .author-image { position: absolute; left: 118px; top: 0; } .comment.depth-1 > article .author-image { left: 0; } .comment-body { min-height: 100px; margin-bottom: 40px; padding-left: 118px; } .comments-list.hide-avatars .comment-body { padding-left: 0; } .comment-body .comment-author { margin-bottom: 10px; } .comment-body .comment-author .fn { margin-right: 10px; font-size: 16px; font-style: normal; font-weight: bold; } .comment-body .comment-date, .comment-body .comment-date a { text-transform: uppercase; font-size: 10px; color: #a2a2a2; } .comment-body .comment-author .comment-edit-link { margin-left: 10px; font-size: 12px; } .comment-body .comment-content { margin-bottom: 15px; line-height: 1.7; color: #5b5b5b; } .comment-body .comment-content .alert { margin-bottom: 10px; padding: 5px 10px; } .comment-body .comment-meta ul { position: relative; z-index: 1; list-style: none; margin-bottom: 0; padding: 0; font-size: 12px; } .comment-body .comment-meta li { display: block; float: left; margin-right: 15px; } .comment-body .comment-meta li.comment-reply { margin-right: 20px; } .comment-body .comment-meta li button, .comment-body .comment-meta li a { outline: 0; padding: 0; border: none; background: none; color: #9d9d9d; } .comment-body .comment-meta li.comment-vote-disabled button, .comment-body .comment-meta li.comment-vote-disabled a { cursor: default; } .comment-body .comment-meta li:not(.comment-vote-disabled) button:hover, .comment-body .comment-meta li:not(.comment-vote-disabled) a:hover { color: initial; } .comment-body .comment-meta .vote-login { position: absolute; bottom: -20px; left: 0; color: #CA0B20; } .comment-form-row { max-width: 768px; margin-bottom: 25px; } .comment-reply-title { margin: 0 0 10px; padding: 0 15px; font-size: 22px; font-weight: bold; } .comment-form .form-before-text { margin: 0 0 15px; color: #a2a2a2; } .comment-form .form-before-text a { color: #828282; } .comment-form .form-before-text a:hover { color: initial; } .comment-form .form-submit .btn { text-transform: uppercase; font-weight: bold; } .comment-respond .comment-form { overflow: auto; } .comment-subscription-form { margin: 0 0 5px; } .comment-subscription-form label { display: inline-block; padding: 0 0 0 3px; font-weight: 100; font-size: .928em; color: rgb(49, 49, 49); } @media only screen and (max-width: 560px) { .comment { padding-left: 25%; } .comment.comment-reply-1 { margin-left: 25%; } .comment .author-image { width: 20%; left: 0; } .comment .author-image > img { width: 100%; height: auto; } .comment-body { position: relative; z-index: 1; padding-left: 25%; } } /* ------------------ * 13. Featured Posts * ------------------ */ .featured-posts > .container { position: relative; z-index: 1; padding-top: 21px; padding-bottom: 35px; } .has-breadcrumb .featured-posts > .container { padding-top: 0; } @media only screen and (max-width: 767px) { .featured-posts > .container { margin-top: -10px; padding: 0 0 15px; } } .featured-posts.fptype-category > .container { padding-bottom: 30px; } .featured-posts .fp-box { position: relative; z-index: 3; background-color: #010101 !important; } .featured-posts .fp-box .fp-inner { display: block; position: relative; z-index: 1; width: 100%; min-height: 384px; } .featured-posts .fp-box-h1 .fp-inner { min-height: 312px; } @media only screen and (max-width: 991px) { .featured-posts .fp-box-h1.fp-box-c2 .fp-inner { min-height: 188px; } } @media only screen and (min-width: 992px) { .featured-posts .fp-box .fp-inner { min-height: 484px; } .featured-posts .fp-box-h1 .fp-inner { min-height: 241.5px; } } @media only screen and (min-width: 1200px) { .featured-posts > .container, .featured-posts .fp-box .fp-inner { min-height: 584px; } .featured-posts.fpstyle-e > .container, .featured-posts .fp-box-h1 .fp-inner { min-height: 291.5px; } } .featured-posts .owl-carousel { width: auto; } .featured-posts .fp-box .post-title { margin-bottom: 15px; letter-spacing: -0.6px; text-transform: uppercase; font-size: 20px; color: #fff; } .featured-posts .fp-box .mask-title { position: absolute; z-index: 1; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: hidden; text-indent: -9999px; background-color: transparent; } .featured-posts:not(.fpstyle-a) .fp-box .vm-wrapper { text-align: left; } .featured-posts:not(.fpstyle-a) .fp-box .vm-middle { padding: 0 0 15px 30px; vertical-align: bottom; text-align: left; } .featured-posts .fp-box-h2 .vm-middle { width: 90%; } .featured-posts .fp-box-h2 .post-title { font-size: 20px; } .featured-posts .fp-box .post-meta { position: relative; z-index: 2; display: inline-block; margin: 0; color: #fff; opacity: 0.85; font-size: 13px; } .featured-posts .fp-box .post-meta .fa { margin-right: 8px; } .featured-posts .fp-box .post-meta a { color: #fff; } .featured-posts .fp-box .post-meta .post-categories ul { display: inline-block; vertical-align: top; } .featured-posts .fp-box .backstretch { opacity: 0.65; -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; } .featured-posts .owl-theme .owl-nav { opacity: 0; position: absolute; z-index: 1; top: 0; right: 0; margin: 16px 20px 0 0; padding: 0; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .featured-posts > .container:hover .owl-theme .owl-nav { opacity: 1; } .featured-posts .fp-col .fp-box { margin: 0 0 4px; } @media only screen and (min-width: 768px) { .featured-posts .fp-box .post-title { margin-bottom: 5px; letter-spacing: -1.2px; font-size: 24px; } .featured-posts .owl-carousel { margin: 0; } .owl-carousel.owl-theme.owl-loaded {} .featured-posts .fp-col .fp-box { margin: 0 1px 1px 0; } .featured-posts .fp-box:hover .backstretch { opacity: 0.2; } .featured-posts .fp-box-h2 .vm-middle { width: 80%; } .featured-posts .fp-box-h2 .post-title { font-size: 32px; } } @media only screen and (min-width: 992px) { .featured-posts .fp-box-h2 .vm-middle { width: 70%; } .featured-posts .fp-box-h2 .post-title { font-size: 30px; } } @media only screen and (min-width: 1200px) { .featured-posts .fp-box-h2 .vm-middle { width: 60%; } .featured-posts .fp-box-h2.fp-box-c2 .vm-middle { width: 99%; } .featured-posts .fp-box-h2 .post-title { font-size: 34px; } } .featured-posts .fp-box .backstretch { opacity: 0.7; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } @media only screen and (min-width: 768px) { .featured-posts .fp-box .backstretch { opacity: 0.65; } } .featured-posts .owl-theme .owl-nav [class*=owl-] { margin: 0 4px; padding: 8px 18px; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: rgba(255,255,255,0.5); opacity: 1; color: #fff; } .featured-posts .owl-theme .owl-nav [class*=owl-].disabled { background: rgba(255,255,255,0.25); } .featured-posts .owl-theme .owl-nav [class*=owl-] .fa { font-size: 28px; font-weight: bold; } .featured-posts .owl-theme .owl-nav [class*=owl-]:not(.disabled):hover { background: rgba(255,255,255,0.8); color: #010101; } /* ------------------ * 14. Shortcodes * ------------------ */ .barcelona-sc-tab { display: none; margin-bottom: 30px; } .barcelona-sc-tab .box-header { margin: 0; } .barcelona-sc-tab .box-header .btn-group { min-height: 0; } @media only screen and (min-width: 768px) { .barcelona-sc-tab .box-header .btn-group { height: auto !important; } } .barcelona-sc-tab .box-header .btn-group .btn { padding: 7px 0; } @media only screen and (max-width: 767px) { .barcelona-sc-tab .box-header .btn-group { height: 42px; padding-top: 42px; } .barcelona-sc-tab .box-header .btn-group .btn:not(.active) { padding: 7px 0 7px 25px; } .barcelona-sc-tab .box-header .btn-group .btn.active { height: 42px; padding: 0 0 0 25px; } .box-header .btn-group .btn-toggle { height: 32px; padding: 0 15px 0 0; font-size: 18px; } .barcelona-sc-tab .box-header .btn-group .btn-toggle { height: 42px; padding: 0 25px 0 0; font-size: 20px; } } .barcelona-sc-tab .tab-body { position: relative; z-index: 1; } .barcelona-sc-tab .tab-body .tab-content:not(:first-child) { display: none; } .barcelona-sc-tab .tab-content { margin-top: -1px; padding: 25px 30px; border: 1px solid #010101; font-size: 14px; color: #010101; } .barcelona-sc-tab.dark .tab-content { background-color: #010101; color: #fff; } .barcelona-sc-tab.dark .tab-content h1, .barcelona-sc-tab.dark .tab-content h2, .barcelona-sc-tab.dark .tab-content h3, .barcelona-sc-tab.dark .tab-content h4, .barcelona-sc-tab.dark .tab-content h5, .barcelona-sc-tab.dark .tab-content h6 { color: inherit; } .barcelona-sc-ad { width: 100%; margin-bottom: 40px !important; overflow: hidden; text-align: center; } .barcelona-sc-ad img { max-width: 100%; height: auto; } .post-content > .barcelona-sc-row { margin-left: -15px; margin-right: -15px; } /* ------------------ * 15. Gallery * ------------------ */ .gallery:not(.boxer-caption) { margin: 40px -3px 50px; } .gallery-item { float: left; padding: 3px; text-align: center; overflow: hidden; } .gallery-icon { position: relative; z-index: 1; } .gallery-icon .caption-overlay { display: none; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; padding: 8px 13px 11px; text-align: left; font-size: 14px; line-height: 1.4; color: #fff; cursor: pointer; opacity: 0; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } @media only screen and (min-width: 768px) { .gallery-columns-1 .gallery-icon .caption-overlay, .gallery-columns-2 .gallery-icon .caption-overlay { display: block; } } @media only screen and (min-width: 992px) { .gallery-columns-3 .gallery-icon .caption-overlay { display: block; } } @media only screen and (min-width: 1200px) { .gallery-columns-4 .gallery-icon .caption-overlay { display: block; } } .gallery-icon:hover .caption-overlay { opacity: 1; } .gallery-icon a { display: block; background-color: #010101; } .gallery-icon a img { width: 100%; height: auto; opacity: 1; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .gallery-icon:hover a img { opacity: 0.35; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.33333%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.66666%; } .gallery-columns-7 .gallery-item { width: 14.28571%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.11111%; } /* ------------------ * 16. Contact Form 7 * ------------------ */ div.wpcf7 { margin: 40px 0; font-size: 14px; } .post-content > div.wpcf7:first-child { margin-top: 0; } div.wpcf7-response-output { margin: 2em 0 1em; padding: 0.2em 1em; } div.wpcf7-mail-sent-ok { border: none; background-color: #509034; color: #fff; } div.wpcf7-spam-blocked { border: none; background-color: #FFF6E5; color: #ffa500; } div.wpcf7-validation-errors, div.wpcf7-mail-sent-ng { border: none; background-color: #FFF4F4; color: #cc1919; } span.wpcf7-form-control-wrap { position: relative; z-index: 1; } span.wpcf7-not-valid-tip { display: block; color: #f2132d; font-size: 1em; } span.wpcf7-list-item { margin-left: 0.5em; } .wpcf7-display-none { display: none; } div.wpcf7 img.ajax-loader { border: none; vertical-align: middle; margin-left: 4px; } div.wpcf7 div.ajax-error { display: none; } div.wpcf7 .placeheld { color: #888; } .wpcf7-form p { margin-bottom: 30px; text-transform: uppercase; font-weight: bold; color: #464646; } .wpcf7-form .wpcf7-form-control { margin-top: 10px; font-weight: normal; } .wpcf7-text, .wpcf7-textarea { width: 100%; padding: 10px 15px; border: none; background-color: #eee; font-size: 14px; } @media only screen and (min-width: 1200px) { .wpcf7-text { width: 80%; } } .wpcf7-textarea { resize: vertical; } .wpcf7-text:focus, .wpcf7-textarea:focus { outline: 0; } .wpcf7-submit { padding: 10px 15px; border: none; text-transform: uppercase; font-weight: bold !important; background-color: #cc1919; color: #fff; } .wpcf7-submit:focus { outline: 0; } .wpcf7-submit:hover { border-color: #e71d1d; background-color: #e71d1d; }