############################################################################# Metadata ############################################################################# ############################################################################# CSS ############################################################################# ### Template skin ### ### Skin ### /* */ /* * Theme Name : Josefina Blogger Theme * Theme Version : 1.0.0 * Devoloper Team : YUGERthemes Team * Version: 1.0 */ /*TABLE OF CONTENTS: # 01. GENERAL # 02. TYPOGRAPHY # 03. HEADER # 04. NAVIGATIONS ## 4.1 Main Menu ## 4.2 Mobile Menu # 05. INTRO SLIDER POSTS # 06. CONTENT AND PAGES ## 6.1 ERROR PAGE ## 6.2 CONTACT PAGE # 07. SINGLE POST # 08. SIDEBAR # 09. INSTAGRAM GALLERY # 10. FOOTER # 11. RTL STYLE # 12. RESPONSIVE STYLE /*--------------------------------------------- 01. GENERAL -----------------------------------------------*/ html { background-color: $(body.background.color); } body { background-color: #ffffff; font: $(body.text.font); font-size: 16px; line-height: 1.7; font-weight: 400; color:#444444; padding: 0; margin: 0; overflow-x: hidden; } a { color: $(body.link.color); outline: 0 none; text-decoration: none; cursor: pointer; } a:hover, a:focus { text-decoration: none; outline: 0 none; } a:visited{ color:$(body.link.visited.color) } a:hover{ color: $(body.link.hover.color); } p a { color: #333333; } hr { clear: both; border-top: 1px solid rgba(0,0,0,.3); } section, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, summary { display: block; } address { font-style: italic; } table { background-color: transparent; } table thead th { color: #333; } ::selection { color: #000; background:#dbdbdb; } ::-moz-selection { color:#000; background:#dbdbdb; } .overflow-hide { overflow: hidden; } .overflow-auto { overflow: auto; } .clear { clear: both; } .pull-none { float: none; } ::-moz-selection { background: #3396d1; color: #fff; } ::selection { background: #3396d1; color: #fff; } .dis-block{ display:block; width: 100%; } ul, li{ list-style:none; margin:0; padding:0; } /* FORMS */ input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], textarea{ color: #777777; padding: 9px 10px; width: 100%; font-size: 12px; background-color: #fff; border: 1px solid #ccc; border-radius: 0; margin-bottom: 10px; box-sizing: border-box; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus{ color: #777; background-color: #fff; border-color: #777; outline: none; } input[type="submit"] { font-family: Montserrat, Helvetica, Arial, sans-serif; font-weight: 600; padding: 8px 26px; font-size: 11px; color: #000000; border: 2px solid #282828; letter-spacing: 1px; text-transform: uppercase; display: inline-block; -webkit-transition: all .3s ease-in; transition: all .3s ease-in; background-color: #fff; } button, input[type=button], input[type=reset], input[type=submit], .button { cursor: pointer; display: inline-block; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-color: transparent; text-decoration: none !important; border: 1px solid transparent; padding: .375rem 1rem; -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; } button:focus, input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, .button:focus { outline: 0; } button:hover, button:focus, input[type=button]:hover, input[type=button]:focus, input[type=reset]:hover, input[type=reset]:focus, input[type=submit]:hover, input[type=submit]:focus, .button:hover, .button:focus { border-color: #ffffff00; } #themeoptions, .widget-item-control, .blog-feeds{ display:none } /* PRELOADER */ #loader { position: fixed; top: 0; bottom: 0; margin: auto; background: #fff; height: 100%; width: 100%; z-index: 99999; } #stringPreloader { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; } #stringPreloader path { fill: none; stroke: #000; stroke-width: 2; transform: translateX(-10px); animation: shift 1s linear infinite; } @keyframes shift { to { transform: translateX(-50px); } } .archive .home-link, .index .home-link, .home-link { display: none!important; } .post-filter-message{ display: block; font: $(blog.title.font); font-size: 13px; font-weight: 400; color: #222222; background: #f8f8f8; margin-bottom: 40px; text-decoration: none; text-transform: uppercase; text-align: center; } .post-filter-message p{ display: block; padding: 20px; } .post-filter-message .search-label{ font-weight: 600; color: $(keycolor); } .post-filter-message .search-label:after{ content: '.'; color: #d0004c; } .post-filter-message p a { padding-left: .4em; text-decoration: underline; } body.open{ overflow: hidden; top: 0; } .blog-posts, .post-outer-container{ width: 100%; } /*--------------------------------------------- 02. TYPOGRAPHY -----------------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #060429; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #060429; } h1 { font-size: 36px; line-height: 45px; margin-bottom: 25px; font-weight: 700; } h2 { font-size: 32px; line-height: 45px; margin-bottom: 25px; font-weight: 700; } h3 { font-size: 28px; line-height: 35px; margin-bottom: 20px; font-weight: 700; } h4 { font-size: 22px; line-height: 32px; margin-bottom: 15px; font-weight: 600; } h5 { font-size: 18px; line-height: 24px; margin-bottom: 10px; font-weight: 600; } h6 { font-size: 16px; line-height: 22px; margin-bottom: 10px; font-weight: 600; } p { line-height: 24px; margin-bottom: 24px; } /*------------------------------------- 3. HEADER ---------------------------------------*/ #header-top { padding: 30px 60px !important; } /*Logo*/ .logo-area .page-header-title{ text-transform: uppercase; letter-spacing: 5px; font: $(blog.title.font); color: $(blog.title.color); margin:0; opacity: 1; visibility: visible; -webkit-transition: opacity .24s ease-in-out; -moz-transition: opacity .24s ease-in-out; transition: opacity .24s ease-in-out; } .logo-area .page-header-title a:hover{ color: $(blog.title.color); } .logo-area .page-header-description{ display: inline-block; font-size: 10px; letter-spacing: .1em; line-height: 1.2; margin:0; padding: 4px 0; text-transform: uppercase; } .logo-area img { max-width: none; height: 70px; opacity: 1; -webkit-transition: all .3s cubic-bezier(.215,.61,.355,1); -ms-transition: all .3s cubic-bezier(.215,.61,.355,1); transition: all .3s cubic-bezier(.215,.61,.355,1); } /*Social header*/ .social-header{ display: flex; align-items: center; } .social-header ul>li { margin-right: 20px; float: left; list-style: none; } .social-header ul>li a svg{ fill: #6f6f6f; } .social-header ul>li a:hover svg{ fill: $(labels.background.color.hover); } /*search Form*/ .openBtn.search { height: 61px; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; justify-content: flex-end; } .header .openBtn span{ margin-left: 10px; } .overlay { top: 0; left: 0; visibility: hidden; display: block; opacity: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); background-color: #FFFFFF; width: 100%; height: 100%; position: fixed; z-index: 99999; -webkit-transition: opacity .5s ease-in-out, visibility .5s ease-in-out; -moz-transition: opacity .5s ease-in-out, visibility .5s ease-in-out; -ms-transition: opacity .5s ease-in-out, visibility .5s ease-in-out; -o-transition: opacity .5s ease-in-out, visibility .5s ease-in-out; transition: opacity .5s ease-in-out, visibility .5s ease-in-out; } .overlay-content form { max-width: 90%; width: 800px; height: 100px; margin: auto !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } span.closebtn { font-size: 23px; line-height: 23px; display: block; cursor: pointer; width: 25px; height: 25px; margin: auto !important; position: absolute; left: auto; right: 50px; top: 50px; bottom: auto; } .overlay-content input[type="text"] { background-color: #d4cdcd00; padding: 0 85px 0 30px; width: 100%; height: 100%; font-size: 40px; line-height: 50px; border-width: 0; border-style: solid; border-bottom-width: 1px; border-bottom-style: solid; } .overlay-content button { background-color: transparent; font-size: 32px; line-height: 32px; padding: 0; border-width: 0; border-style: solid; width: 90px; height: 100%; margin: auto !important; position: absolute; left: auto; right: 0; top: 0; bottom: 0; } .search-overlay-show { visibility: visible; opacity: 1; } /*--------------------------------------- 04. NAVIGATIONS -----------------------------------------*/ /* 04.1 main menu*/ #header-menu { position: relative; border-top: 1px solid #eee; border-bottom: 1px solid #eee; height: 55px; } a.toggle-btn { display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } a.tf-subscribe { font-size: 10px; line-height: 24px; font-weight: 600; text-decoration: none; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: black; color: white; padding: 0 14px; border-radius: 20px; } .main-menu { position: relative; height: 53px; } .main-menu>ul { display: -ms-flexbox; flex-direction: -ms-row; display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; display: flex; flex-direction: row; justify-content: center; width: 100%; height:100%; list-style: none; margin: 0px; padding: 0px; } .main-menu >ul >li { position: relative; text-align: center; } .main-menu ul li a { font: $(topbar.text.font); display: block; padding: 0 1em; color: #000; font-size: 15px; font-weight: 600; line-height: 22px; text-decoration: none; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; letter-spacing: 0.05em; text-transform: uppercase; } .main-menu>ul>li>a:not(:last-child):after { background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 129' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new 0 0 129 129'%3e%3cg%3e%3cpath d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/%3e%3c/g%3e%3c/svg%3e"); left: 0; right: auto; background-size: 10px 10px; display: flex; width: 10px; height: 10px; margin: auto; margin-left: 5px; content: ' '; opacity: 1; } /*Child*/ .main-menu ul li ul { display: none !important; position: absolute; left: 0; display: block; min-width: 200px; z-index: 200; background-color: #ffffff; border: 1px #efefef solid; border-top: 2px $(keycolor) solid; margin-left: .5em; } .main-menu ul li:hover > ul { display: block !important; } .main-menu ul li ul li { background-color: #ffffff; position: relative; } .main-menu ul>li>ul>li+li>a { border-top: 1px #ededed solid; } .main-menu ul>li>ul>li>ul { z-index: 300; top: 0; left: 100%; } .main-menu ul>li>ul>li>a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 10px 15px; transition: padding-left .3s linear, padding-right .3s linear; font-size: 11px; line-height: 20px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 1px; } .main-menu ul>li>ul>li>a:not(:last-child):after { content: '\f105'; font-family: "Font Awesome 5 Free"; font-weight: 900; background: none!important; color: #999!important; font-size: 14px; position: relative; top: 2px; } .main-menu ul>li>ul a:hover{ padding-left: 1.5rem; color:black; background-color: #eee; } /* 04.2 Mobile Menu*/ #sidebar-menu { position: fixed; top: 0; left: -300px; width: 300px; height: 100%; padding: 50px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; text-align: center; background-color: #fff; z-index: 1000; } body.open { overflow: hidden; top: 0; } .mobile-logo .page-header-container img { height: auto; width: 150px; } .header-mobile { display: flex; webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #ffffff; height: 80px; border-bottom: 1px solid #e6e6e6; } .mobile-logo { line-height: 55px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mobile-logo .page-header-title{ text-transform: uppercase; letter-spacing: 5px; font: $(blog.title.font); font-size: 40px; display: block; color: $(blog.title.color); margin: 0; opacity: 1; visibility: visible; -webkit-transition: opacity .24s ease-in-out; -moz-transition: opacity .24s ease-in-out; transition: opacity .24s ease-in-out; } .mobile-logo .page-header-title a:hover{ color: $(blog.title.color); } .mobile-logo .page-header-description{ display: none; } body.open #sidebar-menu { left: 0; box-shadow: 0.2px 0.2px 20px #000; } .sidebar-menu { width: 270px; height: 100%; background: #fff; z-index: 999999999; transition: all 300ms ease-in-out; position: absolute; top: 0; bottom: 0; left: 0; box-sizing: border-box; padding: 20px 20px; overflow-y: auto; } .close-icon { display: table; height: 40px; right: 0; } a.toggle-btn span { display: block; width: 35px; height: 2px; background: #d9d9d9; transform: rotate(-45deg); } a.toggle-btn span:after { content: ''; display: block; width: 35px; height: 2px; background: #d9d9d9; transform: rotate(90deg); } #mobile-menu { float: left; width: 100%; background: transparent; margin-top: 0; position: relative; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #mobile-menu ul { padding-left: 0; list-style: none; margin-bottom: 0; } #mobile-menu ul li { position: relative; width: 100%; margin: 0px; font-weight: 400; text-transform: uppercase; } #mobile-menu ul li a { width: 100%; margin: 0; text-align: left; color: #000; border-bottom: 1px solid #eeeeee; text-decoration: none; position: relative; display: flex; padding: 1rem 0; font-size: 14px; cursor: pointer; font-weight: 700; letter-spacing: 1.5px; } #mobile-menu ul.menu-dropdown li a { font-family: "futura-pt",sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding-left: 1rem; padding: 1.2em 10%!important; text-shadow: none!important; } #mobile-menu .menu-dropdown{ display: none; } #mobile-menu ul li a:hover{ color:#A0A0A0; } #mobile-menu ul>li.parent>a:after, #mobile-menu ul>li.parent>a:after { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' data-svg='chevron-down'%3e%3cpolyline fill='none' stroke='%23000' stroke-width='1.03' points='16 7 10 13 4 7'%3e%3c/polyline%3e%3c/svg%3e"); left: 0; right: auto; background-size: 20px 20px; display: flex; width: 20px; height: 20px; margin: auto; margin-right: 0; content: ' '; opacity: 1; } #mobile-menu ul> .parent.active >a:after { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' data-svg='chevron-up'%3e%3cpolyline fill='none' stroke='%23000' stroke-width='1.03' points='4 13 10 7 16 13'%3e%3c/polyline%3e%3c/svg%3e"); } /*Fixed Nav*/ .fixed-nav.header-mobile, .fixed-nav#header-menu { position: fixed; box-shadow: 0 2px 8px rgba(0,0,0,.08); border: 0; top: 0; z-index: 999; width: 100%; background-color: #fff; } .mobile-items{ display: flex; } @media screen and (max-width: 1199px){ .header-mobile .mobile-items > a { margin-left: 10px; } } /*----------------------------------------- 05.INTRO SLIDER POSTS -------------------------------------------*/ #featured-area{ margin-top: 40px; margin-bottom: 40px; } #featured.swiper-container, #grid.swiper-container { height: 540px; width:100%; } #featured.swiper-container .featured-overlay, #grid.swiper-container .featured-overlay { position: relative; background-color: rgba(0,0,0,.65)!important; height: 100%; width: 100%; margin: 0; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 60px 20px; } #featured.swiper-container .featured-overlay .featured-title { font: $(posts.title.font); font-size: 48px; padding-left: 12%; padding-right: 12%; text-shadow: 0 0 150px rgba(0,0,0,0.2); line-height: 1.3em; } #grid.swiper-container .featured-overlay .featured-title { font: $(posts.title.font); font-size: 28px; padding-bottom: 16px; padding-top: 7px; margin: 0; line-height: 1.3em; } #grid.swiper-container .featured-title a { color: #fff; } .featured-overlay .featured-cat, .featured-overlay .featured-post-meta { font: normal normal 100% Roboto; font-weight: 600; font-size: 11px; line-height: 1.5; margin-bottom: 16px; text-transform: uppercase; color: #fff; } .featured-overlay a{ color:#fff; } .featured-overlay .cat>a { background-color: white; color: #000; padding: 4px 10px; } .featured-overlay .cat>a.none{ display:none; } .featured-overlay .featured-post-meta a { color: #fff; } .featured-overlay .featured-post-meta .post-date { padding-left: 10px } .featured-overlay .featured-post-meta .post-author { position: relative; margin-bottom: 0; padding-right: 15px; } .featured-overlay .featured-post-meta .post-author:after { content: ""; width: 5px; height: 1px; position: absolute; top: 50%; margin-top: -2px; border-top: 5px solid #fff; right: 0; border-radius: 50%; } /* swiper navigation*/ .swiper-button-prev, .swiper-button-next { background: #fff; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; -moz-background-size: 17px 34px; -webkit-background-size: 17px 34px; background-size: 17px 34px; background-position: center; background-repeat: no-repeat; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0; cursor: auto; pointer-events: none; } .swiper-container:hover .swiper-button-prev.swiper-button-disabled, .swiper-container:hover .swiper-button-next.swiper-button-disabled { opacity: 0.3; } .swiper-button-next, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); left: 0; right: auto; opacity: 0; background-size: 15px 15px; } .swiper-container:hover .swiper-button-prev, .swiper-container:hover .swiper-container-rtl .swiper-button-prev { right: 15px; opacity: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%23000000'/%3E%3C/svg%3E%0A"); right: 0; left: auto; opacity: 0; background-size: 15px 15px; } .swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-container-rtl .swiper-button-next { left: 15px; opacity: 1; } /*-------------------------------- 06. CONTENT ----------------------------------*/ #main-content { margin-top: 60px; margin-bottom: 30px; } .blog-box { margin-bottom: 40px; display: flex; align-items: center; } @media (min-width: 992px) and (max-width: 1199px) { .blog-box { display: block; } } @media only screen and (max-width: 767px) { .blog-box { display: block; } } .blog-box .item-img { width: 50%; margin-right: 40px; overflow: hidden; } .blog-box .item-img img{ top: 0; left: 0; width: 100%; z-index: 2; object-fit: cover; height: 400px; } @media (min-width: 992px) and (max-width: 1199px) { .blog-box .item-img { margin-right: 0; margin-bottom: 20px; width: auto; } } @media only screen and (max-width: 767px) { .blog-box .item-img { margin-right: 0; margin-bottom: 20px; width: auto; } } .blog-box .item-content { width: 50%; } @media (min-width: 992px) and (max-width: 1199px) { .blog-box .item-content { width: auto; } } @media only screen and (max-width: 767px) { .blog-box .item-content { width: auto; } } .blog-box .item-content .item-title { font: $(posts.title.font); font-size: 24px; font-weight: 600; margin-bottom: 14px; line-height: 1.5; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media only screen and (max-width: 991px) { .blog-box .item-content .item-title { font-size: 22px; } } @media only screen and (max-width: 767px) { .blog-box .item-content .item-title { font-size: 20px; } } .blog-box .item-content .item-title a { color: $(posts.title.color); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .blog-box .item-content .item-title a:hover { color: $(posts.title.color.hover); } .blog-box .item-content p { font:$(posts.text.font); line-height: 27px; margin: 0 auto 13px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .blog-box .item-content .action-area { display: flex; justify-content: space-between; align-items: center; } .blog-box .item-content .action-area .item-btn { display: inline-block; color: #444444; font-size: 14px; font-weight: 700; letter-spacing: 2px; padding: 5px 5px 5px 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .blog-box .item-content .action-area .item-btn i { color: #cccccc; font-size: 12px; margin-left: 8px; } .blog-box .item-content .action-area .item-btn:hover { color: #111111; } .blog-box .item-content .action-area .item-btn:hover i { animation: headShake 0.5s; } .blog-box .item-content .action-area .response-area li { display: inline-block; margin-right: 26px; } .blog-box .item-content .action-area .response-area li:last-child { margin-right: 0; } .blog-box .item-content .action-area .response-area li a { font-size: 16px; color: #444444; } .blog-box .item-content .action-area .response-area li a i { font-size: 18px; color: #a5a5a5; margin-right: 10px; } /*Post label*/ .blog-box .post-label{ font-size: 12px; margin-bottom: 15px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; } .blog-box .post-label>a{ color: $(keycolor); } .blog-box .post-label a:nth-child(n+2) { display: none; } /* Post Meta*/ .blog-box .item-content .post-meta { font:$(widget.title.font); font-size: 12px; font-weight: 400; letter-spacing: .04em; display: inline-block; margin: 0 0 20px 0; text-transform: uppercase; color: #aaa; } .blog-box .post-meta .post-author { position: relative; margin-bottom: 0; padding-right: 15px; } .blog-box .post-meta .post-author:after { content: ""; width: 5px; height: 5px; position: absolute; top: 50%; margin-top: -3px; border-top: 5px solid #dddddd; right: 0; border-radius: 50%; } .blog-box .post-meta .post-date { position: relative; margin-bottom: 0; padding-left: 10px; } /* Read More Button*/ .blog-box .item-content .post-more { margin-top: 25px } .blog-box .item-content .post-more .link--arrowed { color: #111; cursor: pointer; font-weight: 400; text-decoration: none; display: inline-block; height: 2rem; line-height: 2rem } .blog-box .item-content .post-more .link--arrowed .arrow-icon { position: relative; stroke-width: 1.3; stroke-miterlimit: 10; stroke: #111; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; top: -1px; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; vertical-align: middle } .blog-box .item-content .post-more .link--arrowed .arrow-icon--circle { transition: stroke-dashoffset .3s ease; stroke-dasharray: 95; stroke-dashoffset: 95 } .blog-box .item-content .post-more .link--arrowed:hover .arrow-icon { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } .blog-box .item-content .post-more .link--arrowed:hover .arrow-icon--circle { stroke-dashoffset: 0 } /* Pagination */ .pagination>li>a, .pagination>li>span { border-radius: 50%!important; margin: 0 5px } li.page-item.disabled { display: none } .page-item.active .page-link { color: $(posts.navigation.link.color); background-color: $(posts.navigation.link.hover.color); border-color: $(posts.navigation.link.hover.color) } .page-link:focus, .page-link:hover { background: $(posts.navigation.link.hover.color); border: rgba(236, 240, 241, 1) solid 1px; color: $(posts.navigation.link.color) } li.page-item a { font-size: 1em; border-radius: 50%; text-align: center; margin: 0 2px; background: #fff; display: inline-block; width: 42px; height: 42px; line-height: 42px; font-weight: 700; color: #747474; border-bottom: 1px solid rgba(0, 0, 0, .2); padding: 0 } .page-link:focus { z-index: 2; outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, 0) } /*6.1 ERROR PAGE*/ .page-404 { padding: 100px 0; margin: 0 auto; text-align: center; line-height: 1.7 } .page-404 h1 span { position: relative; background: #ef4824; color: #fff; font-size: 300%; padding: 0 20px; border-radius: 5px; font-weight: bolder; transition: all .5s; cursor: pointer; margin: 0 0 40px 0 } .page-404 p span.msg1 { line-height: 2; font-size: 22px } .page-404 h1 { font-size: 150px; line-height: 1; margin-bottom: 30px; display: block } .page-404 p { line-height: 2; opacity: .7; margin-bottom: 30px } .page-404 input[type="search"] { width: 300px } .page-404 .orgo { display: block; margin: 20px auto; width: 400px; position: relative } .page-404 .orgo span { display: inline-block; background: #fafafa; padding: 0 10px; font-weight: 600; position: relative; z-index: 2; text-transform: uppercase; color: rgba(25, 25, 25, 0.5) } .page-404 .orgo:before { content: ""; display: block; width: 100%; height: 1px; background: #eee; position: absolute; top: 11px; z-index: 1 } .page-404 .gohome { color: #fff; padding: 15px 35px; background-color:#d0004c; font-weight: 600; position: relative; z-index: 2; text-transform: uppercase; display: inline-block; letter-spacing: 1.5px } .input, .submit { display: inline-block; padding: 10px 15px; font-size: 20px; border-radius: 0; -webkit-appearance: none } .input { border: 1px solid lightgray } .submit { background-color: lightgreen; border: 1px solid transparent } input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], textarea { color: #888; padding: 9px 10px; width: 100%; font-size: 12px; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 0; margin-bottom: 10px; box-sizing: border-box } .submit::-moz-focus-inner { border: 0 } .submite::-moz-focus-inner { border: 0 } span.post-comments { display: inline-block; position: relative; padding-right: 8px; margin-right: 8px; font-size: 10px; letter-spacing: 1px; line-height: 32px; text-transform: uppercase; } /* 6.2 CONTACT PAGE*/ .single .contact-form { margin-top: 40px } .contact-form p { margin: 0 } input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], textarea { color: #888; padding: 9px 10px; width: 100%; font-size: 12px; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 0; margin-bottom: 10px; box-sizing: border-box } textarea { font-size: 13px!important; line-height: 1.7 } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus { border: 1px solid #f0f0f0 } input[type="submit"], input[type="button"] { text-transform: uppercase; letter-spacing: 2px; background: #000; border-radius: 0; font-size: 11px; color: #fff; padding: 9px 21px 7px; display: inline-block; border: 0; cursor: pointer; border-radius: 0; width: auto; outline: 0 } .contact-form-error-message-with-border, .contact-form-success-message-with-border { font-size: 10px!important; font-weight: 600!important; opacity: .5!important; line-height: 1; text-transform: uppercase; letter-spacing: 3px; margin: 0; height: 30px; padding: 10px 30px; text-align: left; position: relative; display: block; float: left } .contact-form label { font-family: Lato; font-size: 15px; opacity: .7; font-style: italic; margin-bottom: 10px; display: block } .contact-form-error-message-with-border img, .contact-form-success-message-with-border img { position: absolute; top: 9px; left: 9px } .contact-form-error-message-with-border { background: #ffd7d7; color: red } .contact-form-success-message-with-border { background: #bdffc1; color: #238027 } .form-group { margin-bottom: 10px; display: block; overflow: hidden } .form-group:last-child { margin-bottom: 0 } .form-group a { text-decoration: underline; font-size: 11px } /*------------------------------------------------------------- 07. SINGLE POST ---------------------------------------------------------------*/ .is-post #main-content { margin: 50px 0 36px 0; width: 100%; position: relative; } .single .single-post-title { font: $(posts.title.font); margin-bottom: 0; font-size: 36px; margin-top: 0; font-weight: 700; line-height: 46px; letter-spacing: -0.025em; text-transform: none; } .single img{ max-width:100%; } .single .post-meta { font:$(widget.title.font); font-size: 12px; line-height: 1.2em; font-weight: 400; letter-spacing: .04em; margin: 20px 0 20px 0; text-transform: uppercase; color: #aaa; } .single .post-meta .post-meta-inner { box-sizing: border-box; display: -ms-flexbox; display: -webkit-box; display: flex; } .single .post-meta .post-author { position: relative; margin-bottom: 0; padding-right: 15px; } .single .post-meta .post-date { position: relative; margin-bottom: 0; padding-right: 15px; padding-left: 10px; } .single .post-meta .post-comments { position: relative; margin-bottom: 0; padding-right: 30px; padding-left: 15px; } .single .post-meta .post-date:after, .single .post-meta .post-author:after { content: ""; width: 5px; height: 5px; position: absolute; top: 50%; margin-top: -2px; border-top: 5px solid #cecbd2; right: 0; border-radius: 50%; } .single .post-body { color:$(body.text.color); font-size: 15px; line-height: 27px; margin-top: 10px; padding-bottom: 26px; list-style:initial; } .single .post-body ol li { list-style: decimal; } /* 07.1 POST TAGS */ .single .post-footer { margin-top: 36px; } .single .post-tags .tag { font-size: 12px; line-height: 12px; padding: 7px 11px 6px; background-color: #eee; text-transform: uppercase; margin-right: 5px; } /* 07.2 SHARE BUTTON */ .single .social-footer { display: flex; align-items: center; margin-top: 30px; } .single .social-footer .social-footer-buttons { flex: 1; display: flex; flex-wrap: wrap; } .single .social-footer .social-footer-buttons .social-button-holder:nth-child(1), .single .social-footer .social-footer-buttons .social-button-holder:nth-child(2) { flex-grow: 1; } .single .social-footer .social-footer-buttons .social-button-holder { padding: 5px; display: flex; } .single .social-footer .social-footer-buttons .social-button-holder svg{ fill: #fff; } .single .social-footer .social-footer-buttons .social.social-facebook:hover { background: #3b5998; } .single .social-footer .social-footer-buttons .social.social-twitter:hover { background: #00aced; } .single .social-footer .social-footer-buttons .social.social-pinterest:hover { background: #8c0615; } .single .social-footer .social-footer-buttons .social.social-whatsapp:hover { background: #25d366; } .single .social-footer .social-footer-buttons .social.social-email:hover { background: #828282; } .single .social-footer .social-footer-buttons .social { background: #c3b9b9; text-align: center; justify-content: center; color: #fff; } .single .social-footer .social-footer-buttons .social { display: inline-flex; align-items: center; height: 45px; padding: 0 20px; width: 100%; } .single .social-footer .social-footer-buttons .social .social-icon { display: inline-flex; align-items: center; justify-content: space-between; font-size: 10px; text-transform: uppercase; font-weight: 600; } .single .social-footer .social-footer-buttons .social .social-icon i { text-align: left; font-size: 16px; font-style:normal; line-height:0; } .single .social-footer .social-footer-buttons .social .social-icon .social-text { margin-left: 10px; } /* 07.3 AUTHOR BIO */ .author-bio { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; background-color: #f9f9f9; margin: 22px 0; padding: 20px; } .author-bio img { webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 22px; } .author-bio .post-author-des { -webkit-align-items: center; align-items: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; margin: auto; } .author-bio h5 { font: $(posts.title.font); font-size: 20px; line-height: 24px; font-weight: 700; margin: 0 0 .5em 0; padding-top: 0; } .author-bio .post-content h5 { font-size: 1.118rem; font-weight: 500; line-height: 1.35em; letter-spacing: 0px; margin-top: 1.71em; margin-bottom: 1.08em; } .author-bio .post-by { display: inline-block; margin-bottom: .5em; font-size: .9rem; margin-top: 1em; } .post-author-des p { margin-bottom: 10px; } .post-author-des a.icon { margin-right: 10px; } /* 07.4 RELATED POSTS*/ .related-posts .title{ font: $(posts.title.font); font-weight: 600; font-size: 18px; line-height: 28px; color: #2b2c2e; margin-top: 40px; text-transform: uppercase; } .related-posts .item .item-date { font-size: 11px; opacity: .5; text-transform: uppercase; } .related-posts .item .item-date:after { content: ""; display: inline-block; background: $(keycolor); vertical-align: middle; margin: 0px 10px; width: 5px; height: 5px; border-radius: 50%; } .related-posts .item .item-tag{ font-size: 11px; opacity: .5; text-transform: uppercase; } .related-posts .item .item-img{ display: block; margin-bottom: 15px; } .related-posts .item-title{ font: $(posts.title.font); font-size: 16px; font-weight: 600; text-transform: capitalize; letter-spacing: 0px; margin-top: 5px; line-height: 1.4; color: #121212; -webkit-transition: color .1s linear; -o-transition: color .1s linear; transition: color .1s linear; -ms-word-wrap: break-word; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } @media (max-width: 767px){ .related-posts .item { margin-bottom: 40px; } .related-posts .item-title{ font-size: 20px; line-height: 26px; } } /* 07.5 COMMENTS */ .comments { position: relative; margin-bottom: 0; margin-top: 60px; } .comments h3 { font: $(posts.title.font); font-size: 18px; font-weight: 600; text-transform: uppercase; } .comments .comments-content { margin-bottom: 40px; overflow: hidden; } .comments .footer{ background-color: transparent; } .comment-thread .avatar-image-container { position: absolute; top: 0; left: 0; width: 58px; height: 58px; float: left; border-radius: 100px; overflow: hidden; background: rgba(0, 0, 0, 0.1) url(https://2.bp.blogspot.com/-am-sD4fOJlE/WNDl-8W4OlI/AAAAAAAAKOg/0NSMZEynkI0Z96P3ccf_vmazph9h62uRgCLcB/s1600/avatar.png) no-repeat center; background-size: 30px; } .comments .comment-header { padding-left: 70px; padding-top: 5px; } .comments .user { font:$(posts.title.font); letter-spacing: 2px; color: #424242; display: inline-block; color: #000; font-size: 14px; text-transform: uppercase; font-weight: 600; font-style: normal; } .comments .datetime { display: flex; text-transform: capitalize; font-size: 13px; margin-bottom: 5px; } .comments .comment-content { overflow: hidden; margin-bottom: 0; line-height: 1.7; opacity: .8; margin: 15px 0 10px 70px; } .comments .comment-actions { display: block; margin-bottom: 15px; overflow: hidden; margin-left: 70px; margin-top: 20px; margin-bottom: 0; line-height: 1.7; opacity: .8; } .comments .comment-actions a { border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-decoration: none; color: #bac1c3; margin-right: 15px; padding-bottom: 3px; float: none; font-size: 12px; line-height: 12px; padding: 6px 10px 5px; background-color: #000; color: #fff; margin-right: 5px; text-transform: uppercase; letter-spacing: .5px; } .comments .comment-actions .item-control { display: none; } .thread-expanded .thread-count a { display: none; } .comments .comment-replies { padding-left: 70px; position: relative; overflow: hidden; } .comments .user.icon { display: none; } .comments .thread-count { display: none; } .comments h4#comment-post-message { display: none; } .comments .comment-actions .item-control { display: none; } .comments .comment-actions a:hover { opacity: 1; } .loadmore { display: none; } .thread-expanded .thread-count a { display: none; } .comments-area { margin-top: 70px; display: block; border-top: 1px solid #e6e6e6 } #comments { position: relative } #comments h4#comment-post-message { display: none } .comment-thread ol { padding: 0 } .comment-thread .comment { position: relative; list-style: none } .comment-form { padding-top: 30px } .avatar-image-container img { width: 100%; height: 100% } .comments .comment-header .user a { text-decoration: none; color: #000; display: block } .comment-header .datetime a { font: 400 11px Oswald, sans-serif; display: inline-block; letter-spacing: .04em; text-transform: uppercase; color: #b7bfc1 } .comments .comment-actions { display: block; margin-bottom: 15px } .comments .comment-actions a { border-bottom: 1px solid rgba(0, 0, 0, .1); text-decoration: none; color: #bac1c3; margin-right: 15px; padding-bottom: 3px } .comments .comment-actions .item-control { display: none } .comments .comment-actions a:hover { opacity: 1 } .loadmore { display: none } .loadmore.loaded a { display: inline-block; border-bottom: 1px solid rgba(0, 0, 0, .1); text-decoration: none; margin-top: 15px } .comments .continue { display: none!important } .thread-expanded .thread-count a { display: none } .comment-replies .comment-block { padding-bottom: 0 } .comment-replies .comment-replies { display: none } .comments .comment-thread>ol li>.comment-replies .comment-thread.inline-thread { padding-left: 70px; position: relative; overflow: hidden } .comments .comment-thread.inline-thread { border-top: 1px dotted #f0f0f0; padding-top: 34px } body.is-page #comments, body.is-page .single .post-meta { display:none !important; } /*-------------------------------- 08. SIDEBAR ----------------------------------*/ .sidebar .widget h3 { font:$(widget.title.font); background-color: $(widget.title.background.color); color:$(widget.title.color); padding-bottom: 0; position: relative; margin-bottom: 24px; padding: 13px 0; text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 0.05em; border-radius: 2px; } .sidebar .widget h3.title:after { content: ""; border: 2px solid rgb(255, 255, 255); position: absolute; width: calc(100% - 10px); height: calc(100% - 10px); top: 0; left: 0; margin: 5px; } .sidebar .widget:not(:first-child) { margin-top: $(widget.margin); } .sidebar .FollowByEmail h3.title:after{ content: none; } /* 08.1 WIDGET : ABOUT ME */ .widget.Image img { width: 250px; height: 250px; border-radius: 50%; margin: auto; background-size: cover; background-position: 50% 50%; margin-bottom: 30px; } .widget.Image .widget-content { text-align: center } .widget.Image .widget-content .name { font: $(posts.title.font); font-size: 17px; font-weight: 700; line-height: 28px; letter-spacing: 2px; color: #212121; text-align: center; padding-bottom: 10px ; text-transform: uppercase; text-decoration: none; } .widget.Image .widget-content span { font: 14px Open Sans; font-size: 14px; text-align: justify; line-height: 1.7; padding: 0px 25px; display: block } /* 08.2 WIDGET : FOLLOW ME*/ .widget .follow-widget { text-align: center } .widget .follow-widget li { display: inline-block } .widget .follow-widget li a { display: block; width: 45px; height: 45px; line-height: 43px; font-size: 15px; text-align: center; text-decoration: none; margin: 0 2px; color: #707070; border: 1px solid #707070; border-radius: 50% } .widget .follow-widget li a:hover { background-color: #000; border-color: #000; color: #fff } .widget .follow-widget li a:hover svg { fill: #fff } /* 08.3 WIDGET : POPULAR POSTS */ .PopularPosts ul{ list-style: none; padding: 0; counter-reset: count; } .PopularPosts .popular-post-list > li { display: flex; margin-top: 1rem; padding: 0 0; margin-bottom: 18px; position: relative; } .PopularPosts .popular-post-list > li:first-child { border-top: 0; padding-top: 0; } .PopularPosts .popular-post-list > li:before { counter-increment: count; content: counter(count); position: absolute; font-size: 14px; font-weight: 400; text-transform: uppercase; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; border-color: #fff; top: 5px; left: 5px; background-color: $(keycolor); } .PopularPosts .popular-post-list > li>a { width: 90px; height: 90px; margin-right: 15px; } .PopularPosts .popular-post-list > li img { width: 90px; height: 90px; margin-right: 15px; } .popular-post-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .PopularPosts .popular-post-title { font:$(popularposts.title.font); color:$(popularposts.title.color); font-size: 16px; line-height: 26px; font-weight: 700; margin-bottom: 8px; text-transform: capitalize; } .PopularPosts .post-date { font-size: 11px; line-height: 11px; text-transform: uppercase; letter-spacing: 1px; color:$(popularposts.text.color); } /* 08.4 WIDGET : RECENT POSTS*/ .recent-feeds li.feeds-item { display: flex; margin-top: 1rem; padding: 0 0; margin-bottom: 18px; position: relative; } .recent-feeds .feeds-item:first-child { border-top: 0; padding-top: 0; } .recent-feeds li.feeds-item img { min-width: 90px; min-height: 90px; margin-right: 15px; } .recent-feeds .feeds-entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .recent-feeds .feeds-entry h4 { font: $(posts.title.font); font-size: 16px; line-height: 26px; margin-bottom: 8px; text-transform: capitalize; } .recent-feeds .feeds-date { font-family: 'Overpass', sans-serif; font-size: 11px; line-height: 11px; text-transform: uppercase; letter-spacing: 1px; color: #a8aab2; } /* 08.5 WIDGET : LIST STYLE LABEL*/ .label-list > .label-list-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #cccccc; font-size: 13px; font-weight: 500; color: #aaa; } .label-list > .label-list-item > .label-list-link:hover{ color: $(labels.background.color.hover); } .label-list > .label-list-item .label-list-count { font-style: normal; float: right; color: #000; } /* 08.6 WIDGET : CLOUD STYLE LABEL*/ ul.label-cloud { margin: 0; padding: 0; list-style: none; } ul.label-cloud li { display: inline-block; margin: 0 .3em .3em 0; padding: 0; } ul.label-cloud li a { display: inline-block; font-size: 12px; line-height: 28px; color: $(labels.text.color); background-color: $(labels.background.color); border: 1px solid $(labels.background.color); min-width: 4em; padding-left: 1em; padding-right: 1em; margin-top: 0.25em; } ul.label-cloud li a:hover { color: #ffffff; background-color: $(labels.background.color.hover); border: 1px solid $(labels.background.color.hover); } /* 08.6 WIDGET : FOLLOW BY EMAIL*/ .FollowByEmail .subscribe-box { background-color: #000; text-align: center; padding: 40px 20px 30px; position: relative; border: 1px solid #fff; } .FollowByEmail .subscribe-box .title { color: #fff; background-color: transparent; height: auto; padding: 0; margin: 0; } .FollowByEmail .subscribe-box h4 { font: $(posts.title.font); font-size: 14px; line-height: 24px; color: #b1b1be; font-weight: 400; letter-spacing: 1px; margin-top: 10px; margin-bottom: 10px; } .FollowByEmail .subscribe-box .subscribe { position: relative; margin: 0 10px; margin-top: 15px; } .FollowByEmail .subscribe-box .subscribe input { border: none; border-bottom: 1px solid #fff; height: 50px; padding: 0; color: #fff; background-color: transparent; font-size: 13px; } .FollowByEmail .subscribe-box .subscribe .follow-by-email-submit { font-family: inherit; background: #fff; color: #000; width: 100%; height: auto; display: inline-block; padding: 0.35em 1.2em; border: 0.1em solid #FFFFFF; box-sizing: border-box; text-decoration: none; font-weight: 300; text-align: center; transition: all 0.2s; cursor: pointer; } /*--------------------------- 09.INSTAGRAM GALLERY ----------------------------*/ .instagram-widget { display: block; position: relative; overflow: hidden; } .instagram-title { text-align: center; margin: 20px 0; } .instagram-title > h4 { font: $(blog.title.font); font-size: 28px; font-weight: 700; margin-bottom: 0; } .instagram-title > span { font: $(posts.title.font); font-size: 14px; margin-bottom: 0; line-height: 35px; } .instagram-item { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333333%; flex: 0 0 33.333333333%; display: block; position: relative; } @media (min-width: 900px){ .instagram-item { -webkit-box-flex: 0; -ms-flex: 0 0 16.6666666667%; flex: 0 0 16.6666666667%; }} .instagram-item img{ max-width:100%; } #instagram figure { height: 0; width: 100%; padding-bottom: 90% !important; margin-bottom: 0; overflow: hidden; position: relative; background-size: cover; background-position: center center; } .instagram-count { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; font-weight: 600; font-size: 12px; color: #fff; opacity: 0; } .instagram-count:hover{ opacity: 1; background-color: #00000061; } .instagram-count-item { margin-left: 10px; } .instagram-count-item i { margin-right: 5px; } .instagram-count-item svg { fill: #fff; } .instagram-count-item span { font-style: normal; line-height: 1; font-weight: 600; font-size: 12px; color: #fff; } /*------------------------------- 10. FOOTER ---------------------------------*/ .footer { font-weight: 500; background-color: #151618; color: #f5f5f5; position: relative; } .footer .widget.Image img{ max-width: 250px; height: auto; margin: auto; background-position: 50% 50%; border-radius: inherit; } .footer .social-footer { text-align: center; padding: 25px 0; display: flex; align-items: center; justify-content: space-around; } .footer .social-icon { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; } .footer .social-icon>li { display: inline-block; text-align: center; -webkit-transition: all .1s linear; -o-transition: all .1s linear; transition: all .1s linear; } .footer .social-icon >li> a { display: block; background-color: #303030; color: #fff; margin: 11px 0; line-height: 45px; font-size: 15px; background: transparent !important; } .footer .social-icon >li> a svg{ fill:#fff; } .footer .social-icon >li> a:hover svg{ fill:#ffffffc2; } .footer .social-icon a i { font-style: normal; font-variant: normal; font-weight: normal; speak: none; text-transform: none; } /* Footer Navigation*/ .footer-nav { display: flex; justify-content: center; height: 55px; align-items: center; list-style: none; } .social-icon>li+li { margin-left: 15px; } /* Copyright*/ .footer .copyrights { text-align: center; border-top: 1px solid #f0f0f0; padding: 20px 0; color: #A4A4A2; border-radius: 0px; font-size: 14px; } .footer .footer-text { margin-top: 0; margin-bottom: 0; font-size: 12px; font-weight: normal; line-height: 1.2; text-transform: uppercase; color: white; } li.footer-nav-item+li{ margin-left: 15px; } .footer-nav-link { color: #fff; font-size: 13px; line-height:1.5; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .footer-nav-link:hover{ color: #fff; } /* to the top*/ #return-to-top { text-align: center; width: 60px; height: 60px; position: fixed; bottom: 75px; right: 20px; display: block; background: #161616; padding: 5px; z-index: 999; opacity: 0; display: inline-flex; justify-content: center; align-items: center; box-shadow: 0 5px 10px rgba(0, 0, 0, .15); transition: .3s ease-in-out; border-radius: 100% } .post-feeds { display: none!important } } iframe#comment-editor { height: 100px!important } /*-------------------------- 11. RTL STYLE ---------------------------*/ /*-------------------------- 12. RESPONSIVE STYLE ---------------------------*/ @media screen and (max-width: 960px) { .single .single-post-title { font-size: 34px; line-height: 42px } } @media only screen and (max-width: 480px) { #featured-area { margin-top: 25px } .blog-box .item-img img { height: 300px } .single .social-footer .social-text { display: none!important } .author-bio { display: block; text-align: center } .author-bio img { width: 80px; height: auto; margin-right: 0 } .author-bio h5 { font-size: 16px; margin: 0; padding-top: 0; margin-top: 0 } .author-bio .post-by { display: inline-block; margin-bottom: .2em; font-size: .9rem; margin-top: 0 } .single .single-post-title { margin-bottom: 18px; font-size: 24px; line-height: 28px } .single .post-meta .post-comments { display: none } .single .post-meta .post-date:after { content: none } .social-icon>li+li { margin-left: 0 } #return-to-top { width: 50px; height: 50px; bottom: 0; right: 0 } .comments .comment-thread>ol li>.comment-replies .comment-thread.inline-thread { padding-left: 0; position: relative; overflow: hidden } #featured.swiper-container .featured-overlay .featured-title, #grid.swiper-container .featured-overlay .featured-title { font-size: 34px; padding-left: 0; padding-right: 0 } #featured.swiper-container .featured-overlay, #grid.swiper-container .featured-overlay { padding: 40px 8% 40px 8%!important } .comments { margin-top: 20px } .footer .social-footer{ display:block; } .footer .social-footer{ display:block; } } @media only screen and (max-width: 950px) { .sidebar { padding: 80px 15px } #social-footer .widget:first-child { display: none; } .footer .widget.Image img { max-width: 200px; } } .featured-post-meta.overlay-meta { position: relative; font-size: 12px; font-weight: 600; margin: 0; z-index: 2; display: inline-block; /* font-family: Oswald, Noto Kufi Arabic, sans-serif; */ /* font-size: 12px; */ /* font-weight: 400; */ letter-spacing: .04em; /* margin: 0 0 20px 0; */ /* text-transform: uppercase; */ /* color: #aaa; */ } /* Paging ------------------------------ */ #blog-nav{padding:35px 0 0;margin-bottom:20px;margin:0 -3px} .blog-nav{background:none} .pagecurrent, .displaypageNum a, .showpage { border: 1px solid #eeeeee; padding: 4px 2px; margin: 3px; padding: 6px 11px; display: inline-block; width: 42px; font-weight: 700; text-align: center; border-radius: 50px; height: 42px; line-height: 28px; } .showpage, .displaypageNum a svg { overflow: hidden; vertical-align: middle; } .showpage.firstpage, .showpageOf, .displaypageNum.lastpage{ display:none; } .showpage:hover{ background-color: $(posts.navigation.link.hover.color); } .displaypageNum a:hover, .showpage:hover a, .pagecurrent{ color: $(posts.navigation.link.color); background-color: $(posts.navigation.link.hover.color); border-color: $(posts.navigation.link.hover.color) } displaypageNum a:hover svg{ fill: $(posts.navigation.link.color); } .overlay-content button svg { width: 50px; height: 50px; } .button { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; } .button.learn-more { width: 12rem; height: auto; } .button.learn-more .circle { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #282936; border-radius: 1.625rem; } .button.learn-more .circle .icon { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } .button.learn-more .circle .icon.arrow { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; } .button.learn-more .circle .icon.arrow::before { position: absolute; content: ''; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .button.learn-more .button-text { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 .85rem; color: #282936; font-weight: 700; line-height: 1.6; text-align: center; text-transform: uppercase; } .button:hover .circle { width: 100%; } .button:hover .circle .icon.arrow { background: #fff; -webkit-transform: translate(1rem, 0); transform: translate(1rem, 0); } .button:hover .button-text { color: #fff; } .wrapper { height: 100vh; width: 100%; top: 0; left: 0; background-size: cover; background-position: center; background-color: #00000096; display: none; flex-direction: column; justify-content: center; align-items: center; position: fixed; z-index: 1000; } .wrapper .modal { display: none; width: 630px; height: auto; margin: 0 auto; box-shadow: 1px 1px 10px #111; z-index: 1; position: relative; background-image: url("https://1.bp.blogspot.com/-ySCazdyqqYY/XiTOmTskkcI/AAAAAAAAAAQ/hdlgeoQvbk8bkXktexU0omN9mtu8h3elwCLcBGAsYHQ/s1600/laura-chouette-QzekrIW57-4-unsplash.jpg"); background-size: cover; display: block; transition: all 0.5s; animation-delay: 1s; } @media screen and (max-width: 700px) { .wrapper .modal { width: 90%; } } .wrapper .modal .close { position: absolute; padding: 8px; background-color: rgba(0, 0, 0, 0.5); top: 0; right: 0; line-height: 0; z-index: 2; } .wrapper .modal .close:hover { background-color: rgba(0, 0, 0, 0.9); } .wrapper .modal .content { padding: 50px 30px; width: 50%; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.8); } @media screen and (max-width: 700px) { .wrapper .modal .content { width: 100% !important; } } .wrapper .modal .content .logo { max-width: 150px; } .wrapper .modal .content h1 { font: $(posts.title.font); font-size: 2.9em; font-weight: 800; line-height: .9em; margin: 10px 0; color: #f2454c; } .wrapper .modal .content p { margin-bottom: 15px; } .wrapper .modal .content input { width: 100%; margin: 5px 0; padding: 15px; border: none; box-sizing: border-box; outline: none; } .wrapper .modal .content input[type=submit] { color: #fff; font-weight: 800; text-transform: uppercase; background: #f2454c; cursor: pointer; transition: all 0.5s; } .wrapper .modal .content input[type=submit]:hover { background-color: #f2454c; } .wrapper .modal .content .now-stream { margin-top: 10px; } ]]>
=== Body classes === ############################################################################# Header #############################################################################
×
################################# Slider ################################# 5/recent/featured
############################################################################# Main content (main and sidebar) #############################################################################

404

Sorry, we can't find the page you're looking for.


Go to Homepage
=== Main ===
false #777777 false true #6f6f6f true true #f24545 TextAndImage #ffffff true 1x1 true false true 1 false #ffffff false false

=== Sidebar ===
Hi, i am glad you made it here to know more about me. I am a Lifestyle blogger. Him fowl divided. Lesser which fruitful image, first seas have the, seas grass image don't.]]>

http:// NONE fa-facebook http:// fa-youtube http:// fa-youtube http:// fa-github
3 true false LAST_YEAR
ALPHA LIST ALL true
ALPHA CLOUD ALL false
HIERARCHY yyyy true MMMM yyyy MMM dd MMMM d false true MONTHLY
  1. ( )
  1. ( )
############################################################################# Footer ############################################################################# 6/IGQVJVbU9HaG54VktDTF9PWDZAyMGQzT3laamZA3SkJiVVpVd216bG9GUXZAkLWp2dG4wOXVBMVA5c2RpVXlKLXNRb2hNMFZAmekVsbHhabmdyWmtReDEzWmFKT1NQQWVFbkljZAkFsa1BwSTRybGU2MmEwUAZDZD