/* Theme Name: Assembly - Bloc Theme URI: http://bloc.loopthemes.com/ Description: Bloc is a minimalist WorpPress theme for creatives, digital studios, design agencies, artists, ilustrators and photographers. It's built on top of Assembly a framework and modular drag and drop page builder which makes Bloc trully powerful, fast and incredibly flexible and dynamic. Version: 1.0.2 Author: LOOP Themes Author URI: http://loopthemes.com/ Text Domain: assembly-bloc Tags: sticky-post, theme-options, threaded-comments License: GNU General Public License License URI: license.txt */ /* LAYOUT */ html{ font-size: 17px; } .w-col{ padding: 0; } .w-container .w-row{ margin-left: 0; margin-right: 0; } /* BODY */ body{ line-height: 1.8em; } .w-container{ padding: 0; max-width: 100%; } body .asm-row .w-container{ padding: 0; } a, a:visited{ color: #808080; } a:hover{ color: #B9B9B9; } a:focus { /* Normalizing */ outline: none; } p { /* Normalizing */ margin-top: 10px; margin-bottom: 1.5em; } /* WP */ .wp-caption, .wp-caption-text, .sticky, .screen-reader-text, .gallery-caption, .bypostauthor, .alignright, .alignleft, .aligncenter{} /* MENU */ .navbar{ z-index: 10; position: relative; } nav ul.menu, .asm-extra-menu .menu{ list-style: none; padding-left: 0; font-size: 0; display: inline-block; padding: 10px 10px; } nav ul, .asm-extra-menu ul{ background-color: transparent; } nav ul.menu li, .asm-extra-menu .menu li{ display: inline-block; vertical-align: top; position: relative; text-align: left; font-size: 15px; line-height: 1em; white-space: nowrap; } nav ul.menu li a, .asm-extra-menu .menu li a{ text-decoration: none; color: #808080; font-size: inherit; display: inherit; padding: 8px 15px; } nav ul.menu li:last-child a, .asm-extra-menu .menu li:last-child a{ padding-right: 0; } /*nav ul.menu > li > a{ padding: 30px 10px; }*/ .asm-extra-menu .menu .current-menu-item a, .asm-extra-menu .menu .current_page_item a, .asm-extra-menu .menu a:hover, nav ul.menu .current-menu-item a, nav ul.menu .current_page_item a, nav ul.menu a:hover{ color: #B9B9B9 } nav ul.menu ul, .asm-extra-menu .menu ul{ visibility: hidden; position: absolute; padding-left: 0; margin-left: 0; } nav ul.menu > li > ul, .asm-extra-menu .menu > li > ul{ padding-top: 20px; } nav ul.menu ul li, .asm-extra-menu .menu ul li{ padding-left: 0; display: flex; display: -webkit-flex; } nav ul.menu li:hover > ul, .asm-extra-menu .menu li:hover > ul{ visibility: visible; } /*nav ul.menu ul li ul{ top: 0; }*/ nav .asm-standard-menu-container{ font-size: 0; } .loading-mask.undisplay{ display: none; } /* Logo */ .asm-header .w-container, .asm-header .w-container > .w-row, .asm-header .w-container > .w-row > .asm-header-logo{ height:100%; } .asm-header-logo .asm-image-responsive-logo{ min-width: 71px; min-height: 25px; height: 100%; display: inline-block; background-repeat: no-repeat; background-position: left center; background-size: cover; } .asm-header-logo .asm-logo-link .asm-image-responsive-logo{ display:block; } .asm-header-logo .asm-logo-link{ width: auto; display: inline-block; height: 100%; } .logo-col .logo{ display: inline-block; } .asm-header{ } .asm-header.asm-sticky{ position: fixed; -webkit-transition: -webkit-transform 0.25s ease; transition: -ms-transform 0.25s ease; -o-transition: -o-transform 0.25s ease; transition: transform 0.25s ease; } .asm-header.asm-sticky.asm-sticky-offscreen{ transform: translate3d(0px, -80px, 0px); -ms-transform: translate3d(0px, -80px, 0px); -webkit-transform: translate3d(0px, -80px, 0px); } /* Lightbox */ .w-lightbox{ cursor: pointer; z-index: 1; } /* Burger Button */ .burger-box{ display: inline-block; height: 60px; width: 60px; z-index: 9999; position: relative; margin-top: -15px; margin-right: -15px; } .burger-box .anim-burger, .burger-box .anim-burger:before, .burger-box .anim-burger:after { position: absolute; top: 28px; left: 18px; width: 20px; height: 3px; background: #444; -webkit-transition: background 0.15s, -webkit-transform 0.15s, top 0.15s; transition: background 0.15s, -ms-transform 0.15s, top 0.15s; -o-transition: background 0.15s, -o-transform 0.15s, top 0.15s; transition: background 0.15s, transform 0.15s, top 0.15s; } .burger-box .anim-burger:before { top: -6px; left: 0; content: ""; } .burger-box .anim-burger:after { top: 6px; left: 0; content: ""; } .burger-box.open .anim-burger { background: transparent; } .burger-box.open .anim-burger:before { top: 0; background: #fff; -webkit-transform: rotate3d(0, 0, 1, 45deg); -ms-transform: rotate3d(0, 0, 1, 45deg); -o-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .burger-box.open .anim-burger:after { top: 0; background: #fff; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); -o-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } .burger-box.side.open .anim-burger:before, .burger-box.side.open .anim-burger:after { background: #444; } .menu-temporal{ position: fixed; } #menu-mask, #menu-overlay{ position:fixed; background-color: #000; opacity: 0; height:100%; width:100%; top: 0; right: 0; bottom: 0; left: 0; z-index:99; visibility: hidden; -webkit-transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; -o-transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; transition: opacity 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; cursor: pointer; } #menu-overlay{ cursor: default; overflow-y:scroll; width: 103%; } #menu-mask.visible, #menu-overlay.visible{ visibility: visible; } #menu-mask.open{ opacity:.7; } #menu-overlay.open{ opacity:.9; } #menu-side{ position:fixed; background-color:#FDFDF9; opacity: 1; height:100%; width: 35%; right: -35%; top: 0; margin-right: -25px; bottom: 0; z-index:-1; padding: 60px 80px; } #menu-side.open{ z-index: 99; overflow: auto; overflow-y: scroll; } #menu-side #menu-list > ul{ position: relative; width: 100%; margin: 0; } #menu-side ul{ list-style: none; padding-left: 0; } #menu-side ul.sub-menu{ overflow: hidden; } #menu-side ul li{ padding-left: 0; } #menu-side ul li a.child{ color: rgb(210, 210, 210) !important; } #menu-side ul li a{ color: rgba(158, 157, 144, 0.73); font-size: 15px; display: inline-block; } #menu-overlay .menu-list{ list-style: none; padding-left: 0; width: 50%; margin: 0 auto; position: relative; text-align: center; } #menu-overlay .menu-list ul{ list-style: none; padding-left: 0; margin-left: 0; } #menu-overlay .menu-list ul li{ } #menu-overlay .menu-list ul li a.child{ color: rgb(210, 210, 210) !important; } #menu-overlay .menu-list ul li a{ color: rgba(158, 157, 144, 0.73); font-size: 15px; display: inline-block; } #menu-overlay ul.sub-menu{ overflow: hidden; } .pushReady{ -webkit-transition: -webkit-transform 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; transition: -ms-transform 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; -o-transition: -o-transform 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; transition: transform 400ms cubic-bezier(0.645, 0.045, 0.355, 1.000) !important; } .pushReady.pushLeft{ -webkit-transform: translateX(-100px) translateY(0px) !important; -ms-transform: translateX(-100px) translateY(0px) !important; -o-transform: translateX(-100px) translateY(0px) !important; transform: translateX(-100px) translateY(0px) !important; } .pushReady.pushLeft-faster{ -webkit-transform: translateX(-100%) translateY(0px) !important; -ms-transform: translateX(-100%) translateY(0px) !important; -o-transform: translateX(-100%) translateY(0px) !important; transform: translateX(-100%) translateY(0px) !important; } .pushReady.pushRight{ -webkit-transform: translateX(100%) translateY(0px) !important; -ms-transform: translateX(100%) translateY(0px) !important; -o-transform: translateX(100%) translateY(0px) !important; transform: translateX(100%) translateY(0px) !important; } @media screen and (max-width: 991px) { #menu-side{ width: 40%; right: -40%; } } @media screen and (max-width: 767px) { #menu-side{ width: 60%; right: -60%; } } @media screen and (max-width: 479px) { #menu-side{ width: 80%; right: -80%; } } /* GALLERY */ .asm-gallery{ padding-left: 0px; padding-right: 0px; } .asm-gallery-cell-item{ background-size: cover; background-position: 50%; padding: 0; border-color: #fff; border-style: solid; border-width: 0; } .asm-gallery-cell-item .portfolio-image-responsive-size{ visibility: hidden; display: block; top: 0; position: absolute; width: 100%; padding-top: 100%; } .asm-gallery-cell-item .inner{ width: 100%; position: absolute; height: 100%; top: 0; text-decoration: initial; display: block; } .asm-gallery-cell-item .inner:hover .mask{ opacity: 1; } .asm-gallery-cell-item .mask{ width: 100%; height: 100%; padding: 40px; background-color: rgba(255,255,255,.85); opacity: 0; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 1; } .asm-gallery-cell-item .inner-over{ width: 100%; height: 100%; padding: 40px; position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 0; } .asm-gallery-cell-item h3{ text-align: center; color: white; } .asm-gallery-cell-item .portfolio-terms{ color: #404040; } .asm-gallery.masonry .asm-gallery-cell-item .portfolio-image-responsive-size, .asm-gallery.masonry .asm-gallery-cell-item .inner{ position: relative; } .asm-gallery-cell .w-background-video{ height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* GALLERY & CATEGORY FILTERS */ .asm-gallery-filters, .asm-category-filters{ list-style: none; letter-spacing: .5px; margin-left: 0; margin-bottom: 0; } .asm-gallery-filters li, .asm-category-filters li{ display: inline-block; vertical-align: top; position: relative; text-align: left; font-size: 15px; padding: 8px 15px; line-height: 1em; } .asm-gallery-filters li:first-child, .asm-category-filters li:first-child{ padding-left: 0; } .asm-gallery-filters li:last-child, .asm-category-filters li:last-child{ padding-right: 0; } .asm-gallery-filters li .sup-num, .asm-category-filters li .sup-num{ font-size: 10px; vertical-align: 6px; padding-left: 3px; } .asm-category-filters li a, .asm-gallery-filters li a{ color: #808080; text-decoration: none; } .asm-gallery-filters li a.w--current, .asm-gallery-filters li a:hover, .asm-category-filters li a.w--current, .asm-category-filters li a:hover{ color: #B9B9B9; } /* ANIMATION */ [data-ix*="interaction-cropped"]{ transition: all 2000ms cubic-bezier(0.075, 0.82, 0.165, 1); -webkit-clip-path: inset(0px 0px 100% 0px); clip-path: inset(0px 0px 100% 0px); } [data-ix*="interaction-cropped-up-3"]{ transition: all 2000ms cubic-bezier(0.075, 0.82, 0.165, 1) 600ms; } /* BUTTON */ .asm-button a{ color: #bb9d56; border-bottom: 1px solid #bb9d56; padding: 5px 0px; } /* MAP */ .asm-map .asm-map-responsive-size{ display:block; } .w-widget-map { width: 100%; height: 100%; position: absolute; } /* IMAGE */ .asm-image{ position: relative; } .asm-image > .w-container{ position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; } .asm-image-link{ display: block; height: 100%; width: 100%; -webkit-transition: background-color 500ms; -moz-transition: background-color 500ms; -o-transition: background-color 500ms; transition: background-color 500ms; } .asm-image-link:hover{ background-color: rgba(255,255,255,.5); } .asm-title-link{ color: inherit; line-height: inherit; text-decoration: none; } .asm-image-responsive-size{ visibility: hidden; display: block; top: 0; width: 100%; padding-top: 100%; } .asm-image-responsive-img{ top: 0; bottom: 0; right: 0; left: 0; position: absolute; display: block; } /* POSTS */ .asm-post-categories{ display: inline-block; padding-right: 22px; } .asm-post-categories ul{ list-style: none; padding-left: 0; margin-left: 0; display: inline; } .asm-post-categories li{ padding-right: 30px; display: inline-block; } .asm-post-image{ margin-bottom: 40px; } .asm-title.asm-post-title{ margin-top: 20px; margin-bottom: 20px; } .asm-post-content{ margin-bottom: 40px; } .asm-post-date{ font-size: 13px; } .pagination{ padding-bottom: 20px; clear: both; } .pagination .page-numbers{ padding-right: 5px; } /* BACKGROUND VIDEO */ .w-background-video{ height: auto; } .w-background-video > .w-container{ position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .w-background-video > video{ z-index: 0; visibility: hidden; } .w-background-video > video.visible{ visibility: visible; } .w-background-video > *{ position: relative; } /* SLIDER */ .w-slide{ float: none; } .w-slide > .w-container{ position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .w-slide .asm-image-link:hover{ background-color:transparent; } .w-slide > .w-background-video{ height: 100%; } .w-slide > .w-background-video > video{ z-index: -100; } /* SOCIAL MEDIA */ .asm-social a::before{ vertical-align: -webkit-baseline-middle; vertical-align: baseline-middle; } .asm-social a{ width: 32px; height: 32px; text-align: center; font-size: 14px; }