/* Theme Name: GoodLight Theme URI: https://themeforest.net/item/lenslight-horizontal-wordpress-theme-for-photographers/18686119 Author: Darinka Kostelníková Author URI: http://themeforest.net/user/Darinka/ Description: Clean and lightweight photography theme featuring horizontal scrolling. Version: 1.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: goodlight Tags: one-column, custom-colors, custom-menu, editor-style, featured-images, full-width-template, theme-options, translation-ready, photography, portfolio */ /******************************************************************************************************** * Please do not make edits directly to this file. You will lose all modifications when the theme is next updated if you do so. Please use a child theme. This theme's styles will automatically be loaded for you. You can then overwrite specific style rules in your child theme's 'style.css' file. /* CONTENTS: 1. FORM ELEMENTS - inputs, selects, buttons, fields 2. BODY DEFAULTS - html, body 3. MAIN WRAPPERS - wrappers 4. HEADER - header, logo, navigation 5. CONTENT - blog, content elements and classes (find more classes in editor-style.css) 6. GALLERIES - images, galleries, albums styling 7. WOOCOMMERCE - ecommerce styling 8. FOOTER - footer 9. RESPONSIVNESS - media queries */ /* 1. FORM ELEMENTS _____________________________________ */ form { position: relative; } input, textarea, select, button { font-family: sans-serif; vertical-align: middle; } label { display: block; padding: 8px 0; font-size: 9pt; font-weight: 300; text-transform: uppercase; letter-spacing: .07em; } label.inline { display: inline-block; } input, select, textarea { outline: 0; background: transparent; width: 100%; margin: 5px 0; min-width: 60px; padding: 11px 20px; -webkit-appearance: none; -webkit-focus-ring-color: none; border: 1px solid #ccc; font-weight: 300; font-size: 1em; color: #121212; transition: all .2s ease-out; } select { outline: 0 !important; vertical-align: middle; border-radius: 0; background-image: url('imgs/arrow-down.svg'); background-position: right center; background-repeat: no-repeat; } textarea { height: 120px; background: url('imgs/textarea.png') repeat; border: 0; line-height: 32px; padding: 0; } input:focus { background: transparent; } input[type=checkbox] { float: left; margin: 12px 12px 0 0; } input[type=radio] { float: left; margin: 12px 12px 0 0 !important; } input[type=number] { width: 40px; margin: 0 5px; } input.wpcf7-not-valid { background-color: #f9e5e6; } input[type=submit], input[type=button], button, .button, .woocommerce #respond input#submit, .woocommerce a.button { display: inline-block; width: 100%; height: auto; padding: 14px 30px 12px; font-weight: bold; font-size: 1em; line-height: 1; text-align: center; cursor: pointer; border: 0; border-bottom: 2px solid transparent; background: #52bd46; margin: -1px 8px 8px 0; text-decoration: none !important; color: white; z-index: 2; overflow: hidden; position: relative; vertical-align: middle; outline: 0; text-transform: uppercase; border-radius: 8px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } input[type=submit]:hover, input[type=button]:hover, button:hover, .button:hover, input[type=submit]:focus, input[type=button]:focus, button:focus, .button:focus { border-bottom-color: rgba(0,0,0,.3); background: #48a33e; } input[type=submit]:active, input[type=button]:active, button:active, .button:active { top: 1px; } input[type=text]:hover, input[type=number]:hover, input[type=email]:hover, input[type=password]:hover, input[type=url]:hover, input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=password]:focus, input[type=url]:focus { border-color: #48a33e; } :focus { outline: none; } ::-moz-focus-inner { border: 0; outline: 0; } ::-webkit-input-placeholder { color: #ddd; } ::-moz-placeholder { color: #ddd; } :-ms-input-placeholder { color: #ddd; } :-moz-placeholder { color: #ddd; } /* 2. BODY DEFAULTS _____________________________________ */ html { font-family: sans-serif; font-size: 100%; } body { width: 100%; height: 100%; background: white; color: #121212; font-size: 1em; overflow-y: hidden; overflow-x: auto; letter-spacing: .015em; font-weight: 300; } body::after { content: ""; display: block; position: fixed; right: 0; top: 0; width: 30px; height: 100vh; background: white; z-index: 99; } body.admin-bar #header { top: 32px; } body.admin-bar main#content { height: calc(100vh - 30px - 32px); } /* 3. MAIN WRAPPERS _____________________________________ */ main#content { position: relative; background: #f7f7f7; padding: 86px 0 0; margin-left: 300px; height: calc(100vh - 30px); width: auto; z-index: 3; } main#content > .wrapper { background: #f7f7f7; min-width: 100%; width: auto; float: left; height: 100%; white-space: nowrap; display: flex; flex-direction: row; overflow-y: hidden; overflow-x: hidden; } main#content::after { content: ''; clear: both; display: block } body.layout-vert { overflow-x: hidden; overflow-y: auto; } body.layout-vert main#content > .wrapper { display: block; white-space: normal; height: auto; width: 100%; } body.layout-vert.singular-page main#content > .wrapper { padding: 75px 20%; } .col { display: inline-block; white-space: normal; width: 50vw; vertical-align: middle; margin: auto 0; padding: 0 70px 0 35px; min-width: 320px; } .col.size-20 { width: 20vw; } .col.size-25 { width: 25vw; } .col.size-30 { width: 30vw; } .col.size-33 { width: 33vw; } .col.size-40 { width: 40vw; } .col.size-50 { width: 50vw; } .col.size-60 { width: 60vw; } .col.size-70 { width: 70vw; } .col.size-75 { width: 75vw; } .col.size-80 { width: 80vw; } .col.size-90 { width: 90vw; } .col.size-100 { width: 100vw; } .col img.stick-to-bottom { position: absolute; margin: 0; bottom: 0; } .col:first-child { padding-left: 100px; } .col:last-child { margin-right: 100px; } /* 4. HEADER _____________________________________ */ #header { width: 100%; height: 86px; padding: 35px 60px 0; position: fixed; background: white; top: 0; left: 0; z-index: 5; } #header::after { content: ''; clear: both; display: block } /* Preloading effects */ body.loading main#content, body.loading #sidebar, body.loading #logo { opacity: 0; } body.loading #mainmenu { opacity: 0; transform: translateX(-20px); } body.loading #top-bar { opacity: 0; transform: translateY(20px); } body main#content, body #sidebar, body #logo, body #mainmenu, body #top-bar { opacity: 1; transform: translateX(0) translateY(0); transition: all .25s cubic-bezier(0.7,0,0.3,1); } body #mainmenu, body #top-bar { transition-delay: 0.25s; } body main#content { transition-delay: .3s; transition-duration: .6s; } body.loading .gallery figure { opacity: 0; } body .gallery figure { opacity: 1; transition: opacity 1s cubic-bezier(0.7,0,0.3,1); } body .gallery figure:nth-child(1) { transition-delay: .5s; } body .gallery figure:nth-child(2) { transition-delay: .6s; } body .gallery figure:nth-child(3) { transition-delay: .7s; } body .gallery figure:nth-child(4) { transition-delay: .8s; } body .gallery figure:nth-child(5) { transition-delay: .9s; } body .gallery figure:nth-child(6) { transition-delay: 1s; } body .gallery figure:nth-child(7) { transition-delay: 1.1s; } body .gallery figure:nth-child(8) { transition-delay: 1.2s; } body .gallery figure:nth-child(9) { transition-delay: 1.3s; } body .gallery figure:nth-child(10) { transition-delay: 1.4s; } body .gallery figure:nth-child(11) { transition-delay: 1.5s; } body .gallery figure:nth-child(12) { transition-delay: 1.6s; } body .gallery figure:nth-child(13) { transition-delay: 1.7s; } body .gallery figure:nth-child(14) { transition-delay: 1.8s; } body .gallery figure:nth-child(15) { transition-delay: 1.9s; } body .gallery figure:nth-child(16) { transition-delay: 2s; } body .gallery figure:nth-child(17) { transition-delay: 2.1s; } body .gallery figure:nth-child(18) { transition-delay: 2.2s; } body .gallery figure:nth-child(19) { transition-delay: 2.3s; } body .gallery figure:nth-child(20) { transition-delay: 2.4s; } body .gallery figure:nth-child(21) { transition-delay: 2.5s; } body .gallery figure:nth-child(22) { transition-delay: 2.6s; } body .gallery figure:nth-child(23) { transition-delay: 2.7s; } body .gallery figure:nth-child(24) { transition-delay: 2.8s; } body .gallery figure:nth-child(25) { transition-delay: 2.9s; } body .gallery figure:nth-child(26) { transition-delay: 3s; } body .gallery figure:nth-child(27) { transition-delay: 3.1s; } body .gallery figure:nth-child(28) { transition-delay: 3.2s; } body .gallery figure:nth-child(29) { transition-delay: 3.3s; } body .gallery figure:nth-child(30) { transition-delay: 3.4s; } #loadscreen { position: fixed; width: 100%; height: 100%; top: 0; background: white; opacity: 1; z-index: 9999; animation: hideLoadScreen 1s linear forwards; } body.loading #loadscreen { animation: none; opacity: 0; transition: opacity 1s ease-in; } @keyframes hideLoadScreen { 0% { opacity: 1; z-index: 9999; } 99% { opacity: 0; z-index: 9999; } 100% { opacity: 0; z-index: -1; } } /* Logo */ #logo { float: left; height: auto; position: relative; z-index: 302; } #logo a { text-decoration: none; white-space: nowrap; display: block; font-size: 16pt; color: #121212; letter-spacing: .3em; text-transform: uppercase; } #logo a span { display: block; font-size: 8pt; padding: 8px 0 0; opacity: .5; font-weight: 300; text-transform: uppercase; } #logo img { position: relative; margin: 0; top: 0; left: 0; max-width: 100%; } /* Navigation */ #mainmenu { width: 300px; height: 100vh; background: white; position: absolute; left: 0; top: 0; z-index: 300; padding: 165px 45px 60px 60px; display: flex; flex-direction: column; font-size: 95%; } .nicescroll-rails-hr { z-index: 9 !important; display: block !important; background: transparent !important; } #menu ul li { display: block; position: relative; } #menu > ul > li { width: calc(100% + 30px); } #menu ul li a { display: block; color: #121212; padding: 0 0 1em; text-decoration: none; position: relative; z-index: 5; opacity: .45; font-weight: 500; } #menu ul li:last-child a { padding: 0; } #menu ul li a:hover, #menu ul li.current-menu-item > a, #menu ul li.current-menu-parent > a, #menu ul li.current_page_parent:first-child > a { opacity: 1 !important; text-decoration: none; } #menu ul.sub-menu, #menu ul.children { margin: 0; padding: 25px 35px; position: absolute; width: 225px; left: 99%; top: -30px; background: white; box-shadow: 0 0 10px rgba(0,0,0,.04); border-top: 3px solid #121212; /*hidden dropdown*/ display: none; opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); -webkit-animation: hideMenu .2s cubic-bezier(0.7,0,0.3,1) forwards; animation: hideMenu .2s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes hideMenu { 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes hideMenu { 100% { opacity: 0; transform: translateX(-20px); } } #menu ul.sub-menu li a, #menu ul.children li a { display: block; font-weight: 300; padding: 0 0 8px; font-size: 90%; opacity: .7; } #menu ul.sub-menu li a:hover, #menu ul.children li a:hover { opacity: 1; } #menu ul li.new::after { content: "NEW"; display: inline-block; color: white; background: #52bd46; font-size: 80%; font-weight: 500; line-height: 1.1; letter-spacing: 0; padding: 1px 5px; position: absolute; right: 5px; top: 0; margin: -3px 0 0; } #menu ul li.menu-item-has-children::after, #menu ul li.page_item_has_children::after { content: ""; display: inline-block; width: 10px; height: 10px; position: absolute; right: 25px; top: 0; background: url('imgs/submenu-arrow.svg') no-repeat center center; opacity: .5; margin: 5px 0; transition: all .25s; } #menu ul li.menu-item-has-children:hover::after, #menu ul li.page_item_has_children:hover::after { opacity: 1; } #menu ul li.submenu-shown > ul { display: block; -webkit-animation: revealMenu .2s cubic-bezier(0.7,0,0.3,1) forwards; animation: revealMenu .2s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes revealMenu { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes revealMenu { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } /* Submenu style */ body.white-submenu #menu ul.sub-menu, body.white-submenu #menu ul.children { background: #fff; } body.white-submenu #menu ul.sub-menu li a, body.white-submenu #menu ul.children li a { color: #111; } body.dark-submenu #menu ul.sub-menu, body.dark-submenu #menu ul.children { background: #111; } body.dark-submenu #menu ul.sub-menu li a, body.dark-submenu #menu ul.children li a { color: #fff; } /* Top bar */ #top-bar { float: right; height: 100%; font-size: 95%; } #top-bar > div { display: table; height: 100%; float: left; } /* Hidden sidebar */ .menu-burger { display: block; cursor: pointer; width: 80px; height: 50px; margin-right: -20px; position: relative; right: 30%; z-index: 6; } .menu-burger span { position: absolute; top: 3px; right: 0; width: 20px; height: 2px; background: #121212; opacity: .7; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition: .2s ease-in-out; } .menu-burger span:nth-child(2) { top: 8px; } .menu-burger span:nth-child(3) { top: 13px; } .menu-burger:hover span:nth-child(2) { width: 28px; right: -13px; } .menu-burger:hover span:nth-child(1) { width: 14px; -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); transform: rotate(-35deg); top: 4px; } .menu-burger:hover span:nth-child(3) { width: 14px; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); top: 12px; } #sidebar .menu-burger span:nth-child(2) { width: 0%; opacity: 0; } #sidebar .menu-burger span:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 8px; } #sidebar .menu-burger span:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 8px; } #sidebar .menu-burger:hover span:nth-child(2) { opacity: 1; width: 28px; right: 0px; } #sidebar .menu-burger:hover span:nth-child(1) { top: 4px; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); } #sidebar .menu-burger:hover span:nth-child(3) { top: 12px; -webkit-transform: rotate(-35deg); -ms-transform: rotate(-35deg); transform: rotate(-35deg); } #sidebar { width: 450px; background: white; position: fixed; top: 0; right: -20px; height: 100vh; overflow-x: hidden; overflow-y: scroll; opacity: 1; z-index: 100; font-size: 90%; box-shadow: 0 -80px 160px rgba(0,0,0,.5); -webkit-animation: hideSidebar .15s linear forwards; animation: hideSidebar .15s linear forwards; } @-webkit-keyframes hideSidebar { 0% { width: 450px; } 100% { width: 0; } } @keyframes hideSidebar { 0% { width: 450px; } 100% { width: 0; } } body.sidebar-shown #sidebar { -webkit-animation: revealSidebar .35s cubic-bezier(0.51, 0.15, 0.50, 1) forwards; animation: revealSidebar .35s cubic-bezier(0.51, 0.15, 0.50, 1) forwards; } @-webkit-keyframes revealSidebar { 0% { width: 0; } 100% { width: 450px; } } @keyframes revealSidebar { 0% { width: 0; } 100% { width: 450px; } } #sidebar-overlay { background: black; width: 100%; height: 100vh; position: fixed; top: 0; left: -100%; opacity: 0; z-index: 6; -webkit-transition: opacity .2s linear, left .2s .2s; -moz-transition: opacity .2s linear, left .2s .2s; -ms-transition: opacity .2s linear, left .2s .2s; transition: opacity .2s linear, left .2s .2s; } body.sidebar-shown #sidebar-overlay { left: 0; opacity: .7; transition: left .1s, opacity .35s .1s cubic-bezier(0.7,0,0.3,1); } #sidebar .wrapper { margin: 0; width: 450px; padding: 86px 77px 0 60px; opacity: 0; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); -webkit-transition: all .2s .25s; -moz-transition: all .2s .25s; -ms-transition: all .2s .25s; transition: all .2s .25s; } body.sidebar-shown #sidebar .wrapper { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #sidebar h3 { font-size: 11pt; text-transform: uppercase; margin: 0 0 35px; font-weight: bold; } #sidebar .widget { margin: 0 0 80px; } #sidebar .widget p { line-height: 2.2; } #searchbar button { padding: 20px 10px; background: none !important; position: absolute; right: 0; top: 0; border: 0 !important; width: auto; opacity: .4; transition: all .2s; } #searchbar button path { stroke: #121212; } #searchbar:hover button { opacity: 1; } #instafeed { width: calc(100% + 25px); } #instafeed a { display: inline-block; width: calc(33.33% - 25px); margin: 0 25px 20px 0; } #instafeed a img { border-radius: 50%; } .widget p:last-child { padding-bottom: 0; } .widget a img { margin: 0; } #sidebar .menu-burger { float: right; margin: 35px 0 0 0; right: 60px; } /* Cart */ #header-bag svg { width: 18px; height: 18px; } #header-bag path, #header-bag circle { stroke: #121212; } #header-bag a { border: 0; top: 33px; right: 30%; position: relative; height: 100%; } #header-bag .cart-count { width: 14px; height: 14px; display: inline-block; position: relative; background: #da2366; text-align: center; color: white; border-radius: 50%; line-height: 14px; top: -5px; left: -3px; } /* 5. CONTENT _____________________________________ */ /* Fullscreen Video */ .wrapper > p > iframe:first-of-type { width: 100vw; height: 100vh; margin: 0 0 -2em; } .wrapper > .wp-video:first-child, body.layout-fullscreen .wrapper > .wp-video:first-child .mejs-container { width: 100vw !important; height: 100vh; margin: 0; } /* Blog Posts */ #meta-heading { display: inline-block; white-space: normal; width: 280px; vertical-align: middle; margin: auto 40px auto 0; padding: 2em 60px; border-right: 1px solid rgba(0,0,0,.2); text-align: right; flex-grow: 0; flex-shrink: 0; font-size: 90%; } #meta-heading h5 { text-transform: uppercase; margin: 0 0 10px; } #meta-heading p { opacity: .45; padding: 0; } div.excerpt { display: flex; white-space: normal; position: relative; width: 360px; height: 80%; margin: auto 35px; overflow: hidden; } div.excerpt:first-child { margin-left: 100px; } div.excerpt:last-child { margin-right: 100px; } .featured-image-excerpt { position: absolute; z-index: 0; width: 100%; height: 100%; } .featured-image-excerpt img { margin: 0; height: 100%; width: auto; max-width: 9999px; position: relative; left: 50%; transform: translateX(-50%); } .entry-excerpt { position: relative; margin-top: auto; padding: 40px 60px; } .entry-excerpt > p:first-of-type { opacity: .45; } div.excerpt .entry-meta { position: absolute; top: 0; padding: 40px 60px; } div.excerpt.has-post-thumbnail .entry-excerpt, div.excerpt.has-post-thumbnail .entry-meta { color: white; } div.excerpt h2 { text-transform: uppercase; font-size: 150%; } div.excerpt h2 a { color: inherit; } p.read-more { padding: 0 0 20px; } p.read-more a { text-transform: uppercase; font-weight: bold; font-size: 80%; } div.excerpt.has-post-thumbnail .entry-excerpt > p { display: none; } /* Blog Posts Layouts */ .page-template-blog-alternative .featured-image-excerpt { height: 360px; overflow: hidden; } .page-template-blog-alternative div.excerpt.has-post-thumbnail .entry-excerpt { color: #121212; margin-top: 360px; padding-left: 0; } .page-template-blog-alternative-with-excerpt .featured-image-excerpt { height: 250px; overflow: hidden; } .page-template-blog-alternative-with-excerpt .featured-image-excerpt img { width: 100%; min-height: 100%; height: auto; } .page-template-blog-alternative-with-excerpt div.excerpt.has-post-thumbnail .entry-excerpt { color: #121212; padding: 0; } .page-template-blog-alternative-with-excerpt div.excerpt.has-post-thumbnail .entry-excerpt > p { display: block; } .blog-grid { width: auto; height: calc(100vh - 116px); overflow: hidden; margin-right: 30px; } .page-template-blog-grid div.excerpt { display: block; float: left; width: auto; min-width: 300px; height: 50%; margin: 0; } .page-template-blog-grid div.excerpt h2 { font-size: 125%; margin: 0 0 10px; } .page-template-blog-grid .featured-image-excerpt { position: relative; } .page-template-blog-grid .featured-image-excerpt img { min-width: 100%; } .page-template-blog-grid .entry-excerpt { position: absolute; bottom: 0; } .page-template-blog-masonry div.excerpt { display: block; float: left; width: auto; min-width: 300px; height: 50%; margin: 0; } .page-template-blog-masonry div.excerpt h2 { font-size: 125%; margin: 0 0 10px; } .page-template-blog-masonry .featured-image-excerpt { position: relative; } .page-template-blog-masonry .featured-image-excerpt img { min-width: 100%; } .page-template-blog-masonry .entry-excerpt { position: absolute; bottom: 0; } /* Single Post */ article { } article .entry-meta { display: inline-block; white-space: normal; width: 280px; vertical-align: middle; margin: 0; padding: 2em 35px 2em 100px; border-right: 1px solid rgba(0,0,0,.2); text-align: right; flex-grow: 0; flex-shrink: 0; position: fixed; top: 53vh; transform: translateY(-50%); } article .entry-content { width: calc(100vw - 300px - 280px); display: inline-block; white-space: normal; vertical-align: middle; padding: 80px 15% 0 7%; flex-grow: 1; float: right; } article h2 { text-transform: uppercase; } .entry-meta { font-size: 90%; } .entry-meta h5 { text-transform: uppercase; white-space: nowrap; } .entry-meta a { opacity: .45; border: 0; } .entry-meta div:last-child p:last-child { padding: 0; } .entry-category a { display: block; } .featured-image { width: 125%; margin: 0 0 2em; } /* Pagination */ .navigation.pagination { display: inline-block; white-space: normal; width: 80px; vertical-align: middle; margin: auto 40px; padding: 2em 100px 2em 35px; border-left: 1px solid rgba(0,0,0,.2); text-align: right; flex-grow: 0; flex-shrink: 0; font-size: 90%; } .screen-reader-text { display: none; font-size: 0; } .post-pagination { font-size: 90%; } .post-pagination::after { clear: both; content: ""; display: block; } .post-pagination > div { width: 50%; height: 100px; float: left; text-align: left; padding: 0 25px; line-height: 1.4; position: relative; } .post-pagination > div.prev-post { border-right: 1px solid rgba(0,0,0,.2); text-align: right; } .post-pagination > div a { display: table; height: 100%; padding: 0 30px; } .post-pagination > div a span { display: table-cell; vertical-align: middle; } .post-pagination strong { font-weight: 300; display: block; left: 0; top: 43px; text-align: left; position: absolute; transform: rotate(90deg); text-transform: uppercase; font-size: 9pt; letter-spacing: .07em; padding: 0 10px; } .post-pagination > div.prev-post a { float: right; } .post-pagination > div.prev-post strong { left: auto; right: 0; transform: rotate(-90deg); } .page-links span.page-numbers, .page-links a { margin: 5px; } .nav-links span.page-numbers.current { opacity: .5; } /* Comments */ #comments { clear: both; margin: 2em 0; padding-top: 3em; } ol.comment-list { list-style: none; padding: 0; } ol.comment-list li { list-style: none !important; margin: 35px 0; clear: both; position: relative; } ol.comment-list li::after { content: ""; display: block; clear: both; } ol.comment-list li article { margin: 0; display: block; } .comment-list img.avatar { float: left; margin: 0 20px 10px 0; width: 48px; height: 48px; border-radius: 50%; } .comment-author cite { text-transform: uppercase; padding: 0 2em 0 0; } .comment-meta time { opacity: .3; } .comment-meta, p.log-in-out, .form-allowed-tags, p.logged-in-as { font-size: 85%; } .comment-reply-link { position: absolute; top: 10px; right: 0; font-size: 0; width: 28px; height: 28px; display: block; background: url('imgs/reply.svg') no-repeat; background-size: cover; opacity: .3; border: 0; } .comment-reply-link:hover { opacity: .8; } .comment-content { clear: both; margin: 1em 0 0; font-size: 95%; border: 1px solid rgba(0,0,0,.1); background: white; box-shadow: 0 3px 7px rgba(0,0,0,.05); padding: 35px 50px 0; } .comment-edit-link { font-size: 80%; position: absolute; bottom: 1em; right: 1em; border: 0; opacity: .3; } #respond { margin: 4em 0; clear: both; } #comments .loop-pagination { font-size: 90%; } .loop-pagination > span { opacity: .5; float: right; } /* Password-protected post */ .post-password-form { white-space: normal; margin: auto; padding: 50px 80px 20px; max-width: 500px; border: 1px solid rgba(0,0,0,.1); background: white; box-shadow: 0 3px 7px rgba(0,0,0,.05); text-align: center; } .post-password-form > p:first-child { opacity: .45; } .post-password-form input[type=password] { margin: 10px 0; } /* 6. GALLERIES _____________________________________ */ .gallery { width: auto; height: calc(100vh - 116px); overflow: hidden; } .gallery::after { content: ""; display: block; clear: both; } .gallery-item { position: relative; overflow: hidden; } .gallery-icon { height: 100%; background: url('imgs/spinner.svg') no-repeat center center; } .gallery-icon a { display: inline-block; width: auto; height: 100%; margin-bottom: -5px; position: relative; } .gallery-item img { margin: 0; display: block; } .gallery.horizontal { white-space: nowrap; padding-right: 30px; } .gallery.horizontal .gallery-item { width: auto; height: 100%; display: inline-block; white-space: normal; vertical-align: top; overflow: hidden; } .gallery.horizontal .gallery-item:last-child { margin-right: 0 !important; } .gallery.horizontal .gallery-item img { max-width: 9999px; width: auto; height: 100%; } .gallery.horizontal.categories-list .gallery-icon { width: 360px; display: flex; justify-content: center; } .gallery.horizontal.categories-list.angled { margin-right: -73px; } .gallery.horizontal.categories-list.angled .gallery-item { -webkit-clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); margin-left: -73px; } .gallery.fullscreen { width: calc(100vw - 300px - 30px); margin: 0 !important; } .gallery.fullscreen .gallery-item { width: 100%; height: 100%; text-align: center; margin: 0 !important; } .gallery.fullscreen .gallery-item img { max-width: 9999px; width: auto; min-width: 100%; height: auto; min-height: 100%; margin: 0 auto; } .gallery.fullscreen .gallery-icon { height: calc(100vh - 116px); max-width: calc(100vw - 300px - 30px); overflow: hidden;/*cut wider image*/ } .gallery.fullscreen.portrait .gallery-item img { min-width: 0px; margin: 0 auto; } .gallery.grid { margin-right: 30px; } .gallery.grid .gallery-item { float: left; width: auto; min-width: 1px; height: 50%; } .gallery.grid .gallery-item.col-3 { height: 33.33%; } .gallery.grid .gallery-item.col-3:first-child { height: 66.66%; } .gallery.grid .gallery-item.col-4 { height: 25%; } .gallery.grid .gallery-item.col-4:first-child { height: 50%; } .gallery.grid .gallery-item.col-4:nth-child(2) { height: 50%; } .gallery.grid .gallery-item img { width: auto; height: 100%; } .gallery.ri_grid { width: calc(100% - 30px); background: black; } .gallery.ri_grid .gallery-item { width: 20%; height: 33.33%; float: left; z-index: 1; overflow: visible; } .gallery.ri_grid .gallery-icon { opacity: .5; } .gallery.ri_grid .gallery-item img { height: 100%; width: 100%; } .gallery.ri_grid .gallery-item:first-child { z-index: 99; overflow: visible !important; } /* Gaps */ .gallery.gaps-10 { margin: 10px; height: calc(100vh - 116px - 10px); } .gallery.gaps-20 { margin: 20px; height: calc(100vh - 116px - 20px); } .gallery.gaps-30 { margin: 30px; height: calc(100vh - 116px - 30px); } .gallery.gaps-40 { margin: 40px; height: calc(100vh - 116px - 40px); } .gallery.gaps-50 { margin: 50px; height: calc(100vh - 116px - 50px); } .gaps-10 .gallery-item { margin-right: 10px; padding-bottom: 10px; } .gaps-20 .gallery-item { margin-right: 20px; padding-bottom: 20px; } .gaps-30 .gallery-item { margin-right: 30px; padding-bottom: 30px; } .gaps-40 .gallery-item { margin-right: 40px; padding-bottom: 40px; } .gaps-50 .gallery-item { margin-right: 50px; padding-bottom: 50px; } .gaps-10 .gallery-caps { bottom: 10px; } .gaps-20 .gallery-caps { bottom: 20px; } .gaps-30 .gallery-caps { bottom: 30px; } .gaps-40 .gallery-caps { bottom: 40px; } .gaps-50 .gallery-caps { bottom: 50px; } /* Captions */ .gallery-caps { position: absolute; bottom: 0; top: 0; left: 0; right: 0; white-space: normal; } .gallery-item.link-file .gallery-caps { pointer-events: none;/*for lightbox to work*/ } .gallery-caps .wrapper { width: 100%; position: absolute; bottom: 0; padding: 40px 50px; z-index: 1; } .gallery-caps::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(to top, #000000 0%, rgba(0,0,0,0) 0%); opacity: 0; transition: opacity .25s ease-in-out; } .gallery-item:hover .gallery-caps::after { opacity: 0; } .gallery-caps footer { color: white; font-weight: bold; font-size: 125%; text-align: left; line-height: 1.1; max-width: 480px; animation: hideMe20pxUp .25s ease-out forwards; } .gallery-item:hover .gallery-caps footer { opacity: 0; transform: translateY(-20px); animation: revealMe .25s ease-out forwards; } .gallery-caps footer span { display: block; font-size: 12pt; font-weight: 300; padding: 20px 0 0; color: #ddd; line-height: 1.4; } .gallery-caps footer span a.button { width: 240px; margin: 28px 0 0 0; border-radius: 30px; font-size: 1.1em; } .bubbles { position: absolute; right: 0; bottom: 0; margin: 40px; padding: 0; list-style: none; } .bubbles > li { width: 24px; height: 24px; display: inline-block; text-align: center; margin: 0 0 0 20px; vertical-align: middle; float: right; position: relative; pointer-events: all; cursor: pointer; animation: hideMe20pxUp .25s ease-out forwards; } .gallery-item:hover .bubbles > li { opacity: 0; transform: translateY(-20px); animation: revealMe .25s ease-out forwards; } .bubbles li.like-heart, .gallery-item:hover .bubbles li.like-heart { animation-delay: .1s; } .bubbles li path { fill: none; stroke: white; fill-rule: evenodd; transition: all 1s; } li.like-heart span { position: absolute; top: -35px; left: 0; right: 0; color: white; display: inline-block; vertical-align: top; animation: hideMe15pxDown .25s ease-out forwards; } li.like-heart:hover span { opacity: 0; -webkit-transform: translateY(15px); animation: revealMe .25s ease-out forwards; } li.like-heart.voted svg { animation: clickedHeart 1s ease-out forwards; } @keyframes clickedHeart { 0% { transform: scale(1); opacity: 1; } 90% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } li.like-heart.voted svg path { fill: white; } .social-share > div { position: absolute; left: -45px; bottom: 50px; width: 120px; background: white; border-radius: 6px; padding: 10px; text-align: center; font-size: 11pt; animation: hideMe15pxDown .25s ease-out forwards; } .social-share > div::after { content: ""; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -8px; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: #ffffff transparent transparent transparent; } .social-share:hover > div { opacity: 0; -webkit-transform: translateY(15px); animation: revealMe .25s ease-out forwards; } .social-share ul.social-icons { padding: 10px 0 0; } .social-share ul.social-icons li a { margin: 0 5px; } .social-share ul.social-icons img { width: 16px !important; height: 16px !important; } /* Centered captions */ .captions-center .gallery-caps .wrapper { top: 0; } .captions-center .gallery-caps footer { position: absolute; left: 0; top: 54.5%; transform: translateY(-50%); right: 0; text-align: center; margin: auto; padding: 0 35px; animation: hideMeOffCenter .25s ease-out forwards; } .captions-center:hover .gallery-caps footer { opacity: 0; transform: translateY(-55%); animation: revealMeInCenter .25s ease-out forwards; } .gallery.fullscreen .captions-center .gallery-caps footer, .gallery.ri_grid .captions-center .gallery-caps footer { font-size: 36pt; opacity: 1; font-weight: 400; } .gallery.fullscreen .captions-center .gallery-caps footer span, .gallery.ri_grid .captions-center .gallery-caps footer span { font-weight: 600; padding: 25px 0 0; font-size: 13pt; line-height: 1.65; } .gallery.grid .gallery-caps::after, .captions-center .gallery-caps::after { background: rgba(0,0,0,.9); } .gallery.fullscreen .captions-center .gallery-caps::after { background: transparent; } .gallery.ri_grid .captions-center .gallery-caps::after { display: none; } .gallery.fullscreen.portrait .gallery-caps::after { background: transparent; } .gallery.categories-list .captions-center .gallery-caps { pointer-events: none; } .gallery.categories-list .captions-center .gallery-caps footer { opacity: 1; animation: none; transform: translateY(-50%) !important; } .gallery.categories-list .captions-center .gallery-caps footer span { max-width: 180px; margin: 0 auto; } .gallery.categories-list .captions-center .gallery-caps::after { opacity: 1; background: rgba(0,0,0,.7); transition: all .75s ease-out; } .gallery.categories-list .captions-center:hover .gallery-caps::after { background: rgba(0,0,0,.5); } .gallery.ri_grid .gallery-item .gallery-caps { display: none; } .gallery.ri_grid .gallery-item:first-child .gallery-caps { display: block; position: fixed; width: 100%; left: auto; z-index: 99; } .gallery.ri_grid .captions-center:hover .gallery-caps footer { opacity: 1; } .gallery.ri_grid .gallery-item:first-child .gallery-caps footer { -webkit-animation: revealMeInCenter .5s 2.5s ease-in forwards; animation: revealMeInCenter .5s 2.5s ease-in forwards; opacity: 0; filter: blur(2px); transform: translateY(-55%); left: -30px; } /* Fullscreen gallery animations */ .gallery.fullscreen .gallery-item.slick-active footer { opacity: 0; transform: translateY(-55%); animation: revealMeInCenter .25s .75s ease-out forwards; } .gallery.fullscreen .gallery-item.slick-active footer span { opacity: 0; transform: translateY(-10px); animation: revealMe .25s .85s ease-out forwards; } .gallery.fullscreen .gallery-item.slick-active .bubbles a { opacity: 0; transform: translateY(-20px); animation: revealMe .25s 1s ease-out forwards; } .gallery.fullscreen .gallery-item.slick-active .bubbles a.like-heart { animation-delay: 1.1s; } /* Animations */ @-webkit-keyframes hideMe15pxDown { 0% { -webkit-transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(15px); opacity: 0; } } @keyframes hideMe15pxDown { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } } @-webkit-keyframes hideMe20pxUp { 0% { -webkit-transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-20px); opacity: 0; } } @keyframes hideMe20pxUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } } @-webkit-keyframes hideMeOffCenter { 0% { -webkit-transform: translateY(-50%); opacity: 1; } 100% { -webkit-transform: translateY(-55%); opacity: 0; } } @keyframes hideMeOffCenter { 0% { transform: translateY(-50%); opacity: 1; } 100% { transform: translateY(-55%); opacity: 0; } } @-webkit-keyframes revealMe { 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes revealMe { 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes revealMeInCenter { 100% { -webkit-transform: translateY(-50%); opacity: 1; filter: blur(0); } } @keyframes revealMeInCenter { 100% { transform: translateY(-50%); opacity: 1; filter: blur(0); } } /* Slick.css */ .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} /* Arrows */ #scroll-left, #scroll-right { position: fixed; top: 100px; bottom: 200px; right: 0; display: block; vertical-align: middle; cursor: url('imgs/arrow-next.png'), auto; width: 300px; z-index: 12; } #scroll-left { right: auto; left: 0; cursor: url('imgs/arrow-prev.png'), auto; } /* Filter */ .gallery.grid { transition: opacity .45s ease-out; opacity: 1; } .gallery.grid.filtering { opacity: 0; } ul.filter-links { list-style: none; padding: 2em 0; border-right: 1px solid rgba(0,0,0,.2); text-align: right; } ul.filter-links li a { display: block; border: 0; opacity: .3; padding: 2px 45px 2px 0; } ul.filter-links li a:hover, ul.filter-links li a.active { opacity: 1; } /* Fade-in lazy loaded */ .lazy-hidden { opacity: 0; -webkit-transition: all .3s; transition: all .3s; } .lazy-loaded { opacity: 1; transform: translate(0px,0px); -webkit-transition: all .3s; transition: all .3s; } .gallery.horizontal .lazy-hidden { transform: translate(40px,0); } .gallery.fullscreen .lazy-hidden { transform: translate(0,0); } /* Thickbox */ #TB_overlay { opacity: .9 !important; } #TB_window { background: transparent !important; box-shadow: none !important; animation: revealTB 1s ease-in-out forwards; } @keyframes revealTB { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } #TB_window img#TB_Image { border: 0 !important; } #TB_closeWindow { position: absolute; top: -5px; right: -60px; } .tb-close-icon:before { content: "" !important; width: 22px; height: 22px; display: block; background: url('imgs/close.svg') no-repeat center center; background-size: contain; } #TB_caption { color: white; font-size: 85%; float: none !important; padding: 20px !important; text-align: center; } #TB_next, #TB_prev { font-size: 0; display: block; width: 120px; height: 100%; background: url('imgs/arrow-next.svg') no-repeat center center; background-size: 30px 22px; position: absolute; top: 0; right: -100px; } #TB_prev { background-image: url('imgs/arrow-prev.svg'); left: -100px; } #TB_next a, #TB_prev a { display: block; width: 100%; height: 100%; cursor: pointer; } #TB_load { background: url('imgs/spinner-white.svg') no-repeat center center !important; z-index: 100051 !important; border: 0 !important; } #TB_load img { visibility: hidden; opacity: 0; } /* 7. WOOCOMMERCE _____________________________________ */ #container, #container #content { height: 100%; width: auto; } /* Shop page */ .woocommerce .page-title { display: none; } .woocommerce .woocommerce-breadcrumb { display: none; } .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count { display: none; } .woocommerce .woocommerce-ordering select { display: none; } /* Products list */ .woocommerce .products ul, .woocommerce ul.products { display: flex; white-space: nowrap; padding: 0 100px; height: 100%; } .woocommerce ul.products li.product { display: flex; flex-direction: column; white-space: normal; position: relative; width: 360px; overflow: hidden; height: 80%; margin: auto 35px; border: 1px solid rgba(0,0,0,.1); background: white; box-shadow: 0 3px 7px rgba(0,0,0,.05); padding: 35px 50px 5px; } .woocommerce ul.products li.product h3 { margin-top: 20px; } .woocommerce ul.products li.product a { border-bottom: 0; text-align: center; } .woocommerce .star-rating { display: none; } .woocommerce .price { font-size: 150%; opacity: .6; } .woocommerce .price del { display: inline-block; opacity: .6; } .woocommerce ul.products li.product .button { margin: auto 0 30px 0; } .woocommerce span.onsale { position: absolute; top: 0; right: 0; padding: 8px 15px; min-height: 20px; line-height: 1; text-transform: uppercase; font-size: 9pt; font-weight: bold; color: white; margin: 0; background: #52bd46; z-index: 2; } .woocommerce ul.products li.product .onsale { margin: 30px 0 0 0; } .related.products, .woocommerce a.added_to_cart { display: none; } /* Product */ .woocommerce .product .images { display: inline-block; white-space: normal; width: 360px; vertical-align: middle; margin: 0; padding: 2em 35px 2em 100px; border-right: 1px solid rgba(0,0,0,.2); text-align: right; flex-grow: 0; flex-shrink: 0; position: fixed; top: 53vh; transform: translateY(-50%); } .woocommerce .product .summary { width: calc(100vw - 300px - 360px); display: inline-block; white-space: normal; vertical-align: middle; padding: 80px 15% 0 7%; flex-grow: 1; float: right; } .woocommerce div.product .woocommerce-product-rating, .woocommerce div.product .product_meta { display: none; } .woocommerce div[itemprop=description] p { opacity: .45; } .woocommerce div.product .woocommerce-tabs { display: none; clear: both; } .woocommerce div.product .cart div.woocommerce-variation-add-to-cart { display: flex; } .woocommerce div.product .cart table { max-width: 200px; margin: 0 20px 0 0; } .woocommerce div.product .cart table td { padding: 0; } .woocommerce div.product .cart table td.label, .woocommerce div.product .cart table .reset_variations { display: none; } .woocommerce div.product .cart button { max-width: 200px; } .woocommerce div.product .cart .woocommerce-variation-price { padding: 30px; } .woocommerce #reviews { display: none; } /* Cart */ .woocommerce table.shop_table { border: 0; font-size: .9em; } .woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 0; border-bottom: 1px solid rgba(0,0,0,.2); text-align: left; padding: 8px 0; } .woocommerce-cart table.cart img { width: 100px; margin: 20px; } .woocommerce table.shop_table td.product-price { opacity: .6; } .woocommerce table.shop_table td.product-total { text-align: right; } .woocommerce table.shop_table td.product-subtotal { font-weight: bold; } .woocommerce-cart table.cart td.actions .coupon .input-text, .woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text { width: 150px; height: 48px; margin-right: 1em; } .woocommerce-cart .cart-collaterals .cart_totals table td, .woocommerce-cart .cart-collaterals .cart_totals table th { vertical-align: bottom; } .woocommerce #content table.cart td.actions, .woocommerce table.cart td.actions, .woocommerce-page #content table.cart td.actions, .woocommerce-page table.cart td.actions { padding: 2em 0 1em 0; border-bottom: 0; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; margin: 4em auto; text-align: center; } .cart_totals h2 { max-width: 100%; } .cart_totals h2::after { margin: 20px auto; } .cart-subtotal td, .order-total td { text-align: right !important; } .woocommerce form .form-row textarea { line-height: 32px; } #add_payment_method #payment, .woocommerce-checkout #payment { background: transparent; padding: 0; } #order_review_heading { margin: 2em 0; } #add_payment_method #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { border-bottom: 0; padding: 2em 0; } .woocommerce #payment #place_order, .woocommerce-page #payment #place_order { float: none; margin: 0 auto 2em; } .woocommerce .woocommerce-info { border: 0; background: rgba(0,0,0,.2); font-size: .9em; } .woocommerce .woocommerce-info:before { color: #52bd46; } #add_payment_method #payment div.payment_box p:last-child, .woocommerce-checkout #payment div.payment_box p:last-child { padding-bottom: 0; } /* 8. FOOTER _____________________________________ */ #footer { clear: both; margin: 0 0 60px; padding: 45px 45px 0 0; position: absolute; bottom: 0; } #footer > img { border-radius: 50%; margin: 0 0 25px; width: 52px; height: 52px; } #footer p { opacity: .45; font-size: 90%; padding: 0 0 15px; } /* 9. RESPONSIVNESS _____________________________________ */ /* Header Styles */ @media screen and (min-width: 1024px) { /*layouts for desktops*/ body.left-full-header { } body.left-full-header::after { display: none; } body.left-full-header #header { width: auto; background: transparent !important; } body.left-full-header main#content { padding: 0; height: 100vh; } body.left-full-header .blog-grid { height: 100vh; } body.left-full-header .gallery { height: 100vh; } body.left-full-header .gallery.fullscreen, body.left-full-header .gallery.ri_grid, body.left-full-header .gallery.ri_grid .gallery-item:first-child .gallery-caps { width: calc(100vw - 300px); } body.left-full-header .gallery.ri_grid .gallery-item { width: 25%; } body.left-full-header .gallery.fullscreen .gallery-icon { max-width: calc(100vw - 300px); height: 100vh; } body.left-full-header .gallery.horizontal { padding-right: 0; } body.left-full-header .gallery.grid { margin-right: 0; } body.left-full-header .gallery.gaps-10 { height: calc(100vh - 10px); } body.left-full-header .gallery.gaps-20 { height: calc(100vh - 20px); } body.left-full-header .gallery.gaps-30 { height: calc(100vh - 30px); } body.left-full-header .gallery.gaps-40 { height: calc(100vh - 40px); } body.left-full-header .gallery.gaps-50 { height: calc(100vh - 50px); } body.top-header { } body.top-header::after { display: none; } body.top-header #logo { top: -16px; } body.top-header #logo img { max-height: 50px; } body.top-header #mainmenu { position: static; width: auto; height: 100%; padding: 0; margin: 0 auto; background: transparent !important; text-align: right; } body.top-header #menu > ul > li { display: inline-block; width: auto; text-align: left; top: -23px; } body.top-header #menu > ul > li > a { padding: 20px 25px; } body.top-header #menu ul li.menu-item-has-children::after { right: 5px; top: 0; bottom: 0; margin: auto; transform: rotate(90deg); } body.top-header #menu ul.sub-menu, body.top-header #menu ul.children { top: 99%; left: 0; } body.top-header #footer { display: none; } body.top-header main#content { margin: 0; height: 100vh; } body.top-header .blog-grid { height: calc(100vh - 86px); } body.top-header article .entry-content { width: calc(100vw - 280px); } body.top-header .gallery { height: calc(100vh - 86px); } body.top-header .gallery.fullscreen, body.top-header .gallery.ri_grid, body.top-header .gallery.ri_grid .gallery-item:first-child .gallery-caps { width: 100vw; } body.top-header .gallery.fullscreen .gallery-icon { max-width: 100vw; height: calc(100vh - 86px); } body.top-header .gallery.horizontal { padding-right: 0; } body.top-header .gallery.grid { margin-right: 0; } body.top-header .gallery.gaps-10 { height: calc(100vh - 86px - 10px); } body.top-header .gallery.gaps-20 { height: calc(100vh - 86px - 20px); } body.top-header .gallery.gaps-30 { height: calc(100vh - 86px - 30px); } body.top-header .gallery.gaps-40 { height: calc(100vh - 86px - 40px); } body.top-header .gallery.gaps-50 { height: calc(100vh - 86px - 50px); } body.top-header #scroll-arrows a:first-child { left: 0; } } @media screen and (max-width: 1024px) { /*tablet*/ /* horizontal layout becomes normal vertical */ body { height: auto; min-height: 100%; overflow-y: auto; overflow-x: hidden; } body::after { display: none; } main#content { width: 100%; margin-left: 0 !important; height: auto !important; min-height: 320px; padding: 0; } main#content > .wrapper { width: 100%; height: auto; overflow: visible; display: block; white-space: normal; float: none; } /* mainmenu hidden */ #header { position: static; padding-left: 40px; padding-right: 40px; height: auto; } #logo a { white-space: normal; line-height: 1.2; }/*logo on multiple lines if needed*/ #mainmenu { left: -300px; padding-left: 40px; padding-right: 40px; overflow-y: auto; height: auto; min-height: 100%; } #menu ul.sub-menu, #menu ul.children { position: static; } body.sidebar-shown #mainmenu { left: 0; transition: all .25s ease-out; } #sidebar { position: static; width: 100%; height: auto; -webkit-animation: none; animation: none; box-shadow: none; overflow-x: hidden; overflow-y: visible; } #sidebar .wrapper { opacity: 1; width: 100%; -webkit-transform: none; transform: none; padding-left: 40px; padding-right: 40px; } #sidebar-overlay { z-index: 4; } #sidebar .menu-burger { display: none; } #footer { position: relative; padding-right: 0; } /* blog */ div.excerpt { width: 100%; height: auto; margin: 0 !important; display: block; } .featured-image-excerpt { position: relative; height: auto !important; } .featured-image-excerpt img { width: 100%; height: auto; min-height: 100%; margin-bottom: -6px; } .entry-excerpt { padding-left: 40px !important; padding-right: 40px; } div.excerpt.has-post-thumbnail .entry-excerpt { position: absolute; bottom: 0; padding: 40px !important; color: white !important; } div.excerpt.has-post-thumbnail .entry-excerpt h2 a { color: white; } div.excerpt .entry-meta { padding-left: 40px; padding-right: 40px; padding-bottom: 0; position: static; } div.excerpt.has-post-thumbnail .entry-meta { position: absolute } article .entry-meta { position: static; transform: none; border-right: 0; text-align: left; padding: 40px 40px 0; width: auto; } article .entry-content { width: 100%; padding-left: 40px; padding-right: 40px; } .navigation.pagination { width: auto; } /* galleries */ #scroll-left, #scroll-right { display: none; } .gallery, .blog-grid { width: 100% !important; height: auto; white-space: normal !important; margin: 0 !important; padding: 0 !important; } .gallery.horizontal, .gallery.fullscreen { height: auto !important } .gallery.ri_grid { height: calc(100vh - 86px) !important } .gallery.fullscreen .gallery-icon { max-width: 100%; height: auto; } .gallery.horizontal .gallery-item { width: 100%; height: auto; margin-right: 0 !important; padding-bottom: 0 !important; } .gallery.grid .gallery-item { width: 50%; height: auto !important; min-height: 1px; margin-right: 0 !important; padding-bottom: 0 !important; } .gallery-icon a, .gallery.grid .gallery-item img, .gallery.horizontal .gallery-item img { width: 100%; height: auto; } .gallery.fullscreen .captions-center .gallery-caps footer, .gallery.ri_grid .captions-center .gallery-caps footer { animation: none; font-size: 28pt; } .gallery.horizontal.categories-list .gallery-icon { width: auto; } .gallery.horizontal.categories-list.angled .gallery-item { -webkit-clip-path: none !important; clip-path: none !important; margin-left: 0; } /* content 100% width */ .col { margin: 0; width: 100% !important; padding: 0 40px !important; } body.layout-vert.singular-page main#content > .wrapper { padding-left: 40px; padding-right: 40px; } .col img.stick-to-bottom { position: static; } ol.comment-list ol { padding-left: 0 } blockquote { float: none; width: 100%; margin: 0; } } @media screen and (orientation: portrait) { .gallery.ri_grid .gallery-item { width: 33.33%; } } @media screen and (min-width: 1024px) and (max-height: 700px) { #footer { display: none; } } @media screen and (max-width: 640px) { .captions-center .gallery-caps .wrapper { zoom: .5; } }