<b:if cond='data:blog.pageType == "index"'> <data:blog.pageTitle/> <b:else/> <b:if cond='data:blog.pageType != "error_page"'> <data:blog.pageName/> | <data:blog.title/> <b:else/> 404 | <data:blog.title/> </b:if> </b:if> */ /*======================================== 01. CSS REST =========================================*/ div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; } body { font: normal 14px sans-serif, fontawesome, arial, tahoma; color: #222; line-height: 25px; background-color: #eee; } body { background: $(body.background); background-size: cover; } .color-bg, a.color-bg-hover:hover, .color-bg-hover:hover { background-color: $(keycolor); } a.border-color, .border-color, a.border-color-hover:hover, .border-color-hover:hover { border-color: $(keycolor); } .mfont, h1, h2, h3, h4, h5, h6 { font: $(main.font); } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } *, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } audio, canvas, video { display: inline-block; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } iframe { width: 100%; } .section { margin: 0; } .widget { margin: 0; line-height: inherit; } .widget ul { padding: 0; } .feed-links { display: none; } img { max-width: 100%; } * { outline: 0; } *, :before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { margin: 0 auto; max-width: 1200px; } .container:before, .container:after { content: " "; display: table; } .row { margin-left: 2%; margin-right: 2%; } /* vietnamese */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2'); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/gFXtEMCp1m_YzxsBpKl68iEAvth_LlrfE80CYdSH47w.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } /* latin-ext */ @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400; src: local('Overpass Regular'), local('Overpass-Regular'), url(https://fonts.gstatic.com/s/overpass/v1/xf9_Q4u6c0bcCd8geHaSgxTbgVql8nDJpwnrE27mub0.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400; src: local('Overpass Regular'), local('Overpass-Regular'), url(https://fonts.gstatic.com/s/overpass/v1/o3S9a2vetxRRO8sKA6PL0_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } /* latin-ext */ @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400; src: local('Overpass Regular'), local('Overpass-Regular'), url(https://fonts.gstatic.com/s/overpass/v1/xf9_Q4u6c0bcCd8geHaSgxTbgVql8nDJpwnrE27mub0.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400; src: local('Overpass Regular'), local('Overpass-Regular'), url(https://fonts.gstatic.com/s/overpass/v1/o3S9a2vetxRRO8sKA6PL0_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } /*======================================== 02. HEADER =========================================*/ #outer-wrapper { background-color: #f3f3f3; overflow: hidden; border-top: 2px solid $(keycolor); } /*========== Bpxed Layout ==========*/ body.boxed-layout #outer-wrapper { max-width: 1200px; margin: auto; box-shadow: 0 0 10px #aaa; } #header-wrapper { background-color: #fff; } /*========== Topbar ==========*/ #topbar { background-color: #fff; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; } /*========== Top Menu ==========*/ #top-menu { float: left; } #top-menu .selectnav { display: none; } .menu-top li { display: inline-block; line-height: 40px; padding: 0; } .menu-top li a { color: #666; text-transform: capitalize; font-size: 12px; font: $(top.menu.font); text-decoration: none; margin-right: 15px; } .menu-top li a:hover { color: $(keycolor) !important; } /*========== Top Social Icons ==========*/ #top-social { float: right; } #social { width: 100%; text-align: right; line-height: 40px; } .social-sec li { display: inline-block; list-style: none; line-height: 40px; padding: 0 !important; } .social-sec .widget ul { padding: 0; } .social-sec .LinkList ul { text-align: center; } .social-sec ul#social a:hover { color: $(keycolor) !important; } .social-sec #social a { display: block; height: 40px; width: 25px; line-height: 40px; font-size: 15px; text-align: center; color: #666; } .social-sec #social a:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; line-height: 29px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .social-sec .facebook:before { content: "\f09a"; } .social-sec .twitter:before { content: "\f099"; } .social-sec .gplus:before { content: "\f0d5"; } .social-sec .rss:before { content: "\f09e"; } .social-sec .youtube:before { content: "\f16a"; } .social-sec .skype:before { content: "\f17e"; } .social-sec .stumbleupon:before { content: "\f1a4"; } .social-sec .tumblr:before { content: "\f173"; } .social-sec .vine:before { content: "\f1ca"; } .social-sec .stack-overflow:before { content: "\f16c"; } .social-sec .linkedin:before { content: "\f0e1"; } .social-sec .dribbble:before { content: "\f17d"; } .social-sec .soundcloud:before { content: "\f1be"; } .social-sec .behance:before { content: "\f1b4"; } .social-sec .digg:before { content: "\f1a6"; } .social-sec .instagram:before { content: "\f16d"; } .social-sec .pinterest:before { content: "\f0d2"; } .social-sec .delicious:before { content: "\f1a5"; } .social-sec .apple:before { content: "\f179"; } .social-sec .android:before { content: "\f17b"; } /*========== Header Content ==========*/ #header-content { display: block; padding: 50px 0; } .logo { margin: auto; text-align: center; -moz-text-align: center; -webkit-text-align: center; -o-text-align: center; } #header-inner a { display: inline-block !important; } #Header1_headerimg { height: auto; margin: auto; text-align: center; } .Header h1 { font-size: 2.5em; text-transform: uppercase; color: $(keycolor); } .Header .description { text-transform: capitalize; color: #666; } /*========== Menu Wrapper ==========*/ #menu-wrapper { height: 60px; width: 100%; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .fixed-menu { top: 0; z-index: 9999; position: fixed; background: #fff; -webkit-box-shadow: 0 7px 31px -11px rgba(0, 0, 0, 0.62); -moz-box-shadow: 0 7px 31px -11px rgba(0, 0, 0, 0.62); box-shadow: 0 7px 31px -11px rgba(0, 0, 0, 0.62); transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .fixed-menu #nav2 { float: left; text-align: left; } body.boxed-layout .fixed-menu { max-width: 1200px; } .fixed-menu .search-button { display: block !important; } .fixed-menu li.HOME a { padding-left: 0px !important; } .fixed-menu .fixed-search { float: right; cursor: pointer; display: block !important; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .fixed-menu .fixed-search a { float: right; line-height: 30px; color: #fff; width: 30px; height: 30px; text-align: center; border-radius: 50%; margin-top: 13px; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .fixed-menu .fixed-search a:hover { -webkit-box-shadow: 0 0 1px 5px #eee; box-shadow: 0 0 1px 5px #eee; } body.dark-skin .fixed-menu .fixed-search a:hover { -webkit-box-shadow: 0 0 1px 5px #3e3e3e; box-shadow: 0 0 1px 5px #3e3e3e; } .fixed-search { float: right; display: none; cursor: pointer; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; line-height: 60px; width: 50px; text-align: center; } body.dark-skin .fixed-menu, body.dark-skin .menu { background: #2a2a2a; } body.dark-skin .fixed-menu { top: 0; z-index: 9999; position: fixed; background: #2a2a2a; border-bottom: 1px solid #3c3c3c; -webkit-box-shadow: 0 7px 31px -11px #000; -moz-box-shadow: 0 7px 31px -11px #000; box-shadow: 0 7px 31px -11px #000; } .menu { background: #fff; height: 57px; } .menu li { display: inline-block; line-height: 60px; padding: 0; } .menu li a { padding: 0 20px; color: #555; text-transform: uppercase; font-size: 13px; font: $(menu.font); display: block; line-height: 58px; } .menu li ul { margin-top: 15px; transition: all .3s ease; opacity: 0; visibility: hidden; position: absolute; z-index: 5; max-width: 200px; width: 100%; -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.40); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.40); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.40); } .menu li a:hover { color: $(keycolor); } .menu li ul li { display: block; line-height: 40px; } .menu li ul li a { text-align: left; letter-spacing: 0; font-size: 12px; font-weight: 400; color: #555; display: block; line-height: 40px; background-color: #FFF; text-transform: capitalize; border-bottom: 1px solid #eee; } .menu li:hover ul li a { color: #555; } .menu li:hover ul li a:hover { color: $(keycolor); } #nav ul, #nav li ul li { float: none; } li.drop-down a { padding-left: 15px; } .menu li ul li a:before { content: ""; width: 5px; height: 5px; background-color: $(keycolor); display: block; float: left; position: relative; left: 0; top: 19px; border-radius: 100%; margin-right: 8px; } .drop-down:after { content: '\f0d7'; font-family: fontawesome; line-height: 0; position: relative; top: -30px; font-size: 10px; color: #555; float: right; padding: 0 5px; } body.dark-skin .drop-down:after { color: #aaa; } .menu li ul li:last-child a { border-bottom: 0; } .menu li:hover ul ul { margin-top: 25px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; opacity: 0; visibility: hidden; } .menu li ul ul { top: 0; } .menu li ul li:hover ul { margin-top: 0; opacity: 1; visibility: visible; } .menu li:hover ul { margin-top: 1px; opacity: 1; visibility: visible; } .fixed-menu .menu li:hover ul { margin-top: 1px; opacity: 1; visibility: visible; } .menu li:hover .megaContent { margin-top: 0; opacity: 1; visibility: visible; } #nav2 { float: none; text-align: center; } #nav, #nav li, #nav-top, #nav-top li { float: left; } .selectnav { height: 57px; border: none !important; background: transparent; font: $(main.font); color: #444; display: none; padding-left: 40px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCDlIXJTLLh6xNUbaeqyX-0kv-oIktBUgob6BnfdH3g0q8zLEehBvzWEJXr0GIwpcKNMx3RlnUB62gQ3Om9pj2XSsdtLfQxhMgwL681U92UckKKes5_klDIYTAIYEq7eAuDC4dEG6jCM0/s1600/menu-icon.png) no-repeat left #fff; background-size: 30px; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; } body.dark-skin .selectnav { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRjYvZIDAXisQblIskOY5VQ9oIgwy7X-_gycfToTK1yvcEna3f7g4wPZoAgsJ7rDXP4ldjswezHhKzsx2W4eIsr0EVBNnhTKo0mKNPubQxxfvDTs_ybBVmmwas9X1XhzSJBcrsIAqS4Y0/s1600/588a64e7d06f6719692a2d11.png) no-repeat left #2a2a2a; background-size: 25px; } .selectnav option { text-transform: capitalize; } select#selectnav1 { height: 30px; margin-top: 8px; padding-left: 30px; background-size: 20px; } select#selectnav2 { width: 100%; text-transform: uppercase; } select#selectnav3 { height: 40px; margin: auto; padding-left: 50px; background-size: 20px; background-position: 22%; } /*========== Mega Menu ==========*/ .mega-container { margin-top: 25px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; opacity: 0; visibility: hidden; width: 100%; left: 0; right: 0; z-index: 3; color: #FFF; height: auto; padding: 20px; text-align: center; min-height: 100px; position: absolute; background-color: #fff; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.28); } body.dark-skin .mega-container { background-color: #2a2a2a; } .menu li:hover .mega-container { margin-top: 1px; opacity: 1; visibility: visible } .mega-post { width: 23.888%; height: 220px; margin-right: 1.39%; float: left; overflow: hidden; position: relative; display: table; } .mega-post:last-child { margin-right: 0; } .mega-posts { overflow: hidden; line-height: 1 } .mega-post:hover .mega-thumb a { -webkit-filter: grayscale(0) brightness(60%) contrast(100%); -moz-filter: grayscale(0) brightness(60%) contrast(100%); -o-filter: grayscale(0) brightness(60%) contrast(100%); filter: grayscale(0) brightness(60%) contrast(100%); } .mega-posts .mega-menu-thumb { position: absolute; width: 100%; top: 0 } .mega-menu-thumb .mega-thumb a { height: 220px; width: 100%; display: block; } .menu .mega-posts .mega-title a { background-color: transparent!important; font-size: 14px; line-height: 23px; padding: 0; text-transform: none; letter-spacing: 0; color: #FFF } .mega-posts .mega-content { position: absolute; width: 100%; bottom: 0; z-index: 1; padding: 15px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.84)); } .mega-menu-loader { width: 50px; height: 50px; text-align: center; font-size: 30px; position: absolute; right: 0; left: 0; margin: auto; color: #444; } body.dark-skin .mega-menu-loader { color: #fff; } .mega-category { color: #fff !important; display: inline-block !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 1px; line-height: normal !important; padding: 2px 10px !important; position: relative; text-transform: uppercase !important; margin-bottom: 5px; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .mega-category:hover { color: #fff !important; } /*========== Search Button ==========*/ .search-button { float: right; } .search-button a { float: right; } .search-button:before { content: ""; display: inline-block; width: 1px; height: 10px; background-color: #000; margin: 0 12px; opacity: .1; } .search-button a:hover { color: $(keycolor); } .search-box-overlay.search-box-overlay-show { visibility: visible; opacity: 1; } .search-box-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; z-index: 999999; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); background-color: rgba(255, 255, 255, 0.94); text-align: center; -webkit-transition: all ease-in-out .25s; -moz-transition: all ease-in-out .25s; -ms-transition: all ease-in-out .25s; -o-transition: all ease-in-out .25s; transition: all ease-in-out .25s; } body.dark-skin .search-box-overlay { background-color: rgba(0, 0, 0, 0.83); } .search-box-close { position: absolute; right: 80px; top: 80px; font-size: 40px; -webkit-transition: transform ease-out .2s; -moz-transition: transform ease-out .2s; -ms-transition: transform ease-out .2s; -o-transition: transform ease-out .2s; transition: transform ease-out .2s; transform: rotate(0deg); color: $(keycolor); } .search-box-close:hover { transform: rotate(90deg); color: #000; } .search-box-wrapper p { font-size: 14px; margin-bottom: 40px; color: #666; letter-spacing: 2px; text-transform: uppercase; } input.search-input { width: 800px; background-color: transparent; border-bottom: 2px dotted #333 !important; border: 0; text-align: center; font-size: 35px; padding: 20px; color: #444; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } body.dark-skin input.search-input { color: #fff; border-bottom: 2px dotted #aaa !important; } .search-box-wrapper .fa-search { font-size: 25px; position: absolute; right: 15px; top: 30px; color: #000; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .search-box-wrapper form { position: relative; } .search-box-wrapper { display: inline-block; max-width: 1000px; vertical-align: middle; text-align: center; font-size: 18px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); ms-transform: scale(0.9); opacity: 0; visibility: hidden; -webkit-transition: all ease-in-out .3s; -moz-transition: all ease-in-out .3s; -ms-transition: all ease-in-out .3s; -o-transition: all ease-in-out .3s; transition: all ease-in-out .3s; } .search-box-overlay-show .search-box-wrapper { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); ms-transform: scale(1); } .search-box-wrapper input[type="submit"] { position: absolute; width: 100px; height: 100%; background-color: transparent; border: 0; right: 0; top: 0; cursor: pointer; -webkit-appearance: button; } .search-box-overlay:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -.25em; } .search-box-wrapper .fa-search:hover { color: $(keycolor); } /*======================================== 03. INTRO SLIDER POSTS =========================================*/ #intro-slider { margin-top: 20px; overflow: hidden; } .intro-posts { position: relative; z-index: 2; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .intro-posts .outer-slider { overflow: hidden; padding: 0; position: relative; } .intro-posts .swiper-slide { position: relative; height: 540px; background-size: cover; background-repeat: no-repeat; background-position: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: none !important; border: 1px solid #eee; display: block; width: 100%; } .intro-thumbnail a { width: 100%; height: 540px; display: block; position: relative; object-fit: cover; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .intro-posts-overlay { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; margin: auto; padding: 40px; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.58), #000); } a.category { color: #fff; display: inline-block; font-size: 12px; font-weight: 600; border-radius: 1px; line-height: normal; padding: 4px 12px; position: relative; text-transform: uppercase; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } a.category:hover { color: #fff; } .featured-overlay .featured-cat .cat a { color: #fff; display: inline-block; font-size: 12px; font-weight: 600; line-height: normal; padding: 4px 12px; position: relative; text-transform: uppercase; } .intro-posts-title { padding-bottom: 16px; padding-top: 7px; margin: 0; max-width: 650px; margin: auto; text-align: center; } .intro-posts-title a { color: #fff; text-transform: capitalize; display: inline-block; margin-bottom: 4px; font-weight: bold; font: $(slider.font); } .intro-posts-title a:hover { color: #fff; text-decoration: underline !important; } .intro-posts-meta{display:none;} .intro-posts-meta { color: #aaa; font-size: 11px; list-style: none; text-transform: uppercase; line-height: 1; } .intro-posts-meta li { display: inline-block; } li.intro-author-img img { width: 29px; height: 29px; border-radius: 50%; margin-right: 10px; margin-bottom: -10px; border: 2px solid #9e9e9e; } .intro-posts-meta a { color: #aaa; font-size: 10px; font-weight: 600; line-height: 1; } .intro-posts-meta a:hover { color: #fff; text-decoration: underline !important; } .intro-posts-meta .intro-posts-author:after { content: ""; width: 1px; height: 8px; margin: 0 7px; display: inline-block; background-color: #aaa; } /* * Swiper 3.3.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2016, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: February 7, 2016 */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate(0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .swiper-container-multirow>.swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform, height; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform, height; } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -22px; z-index: 10; cursor: pointer; -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-next { border-radius: 15px 0 0 15px; } .swiper-button-prev { border-radius: 0 15px 15px 0; } .swiper-button-next:hover, .swiper-button-prev:hover { color: $(keycolor); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: -44px; right: auto; background: #fff; line-height: 40px; text-align: center; -moz-text-align: center; -webkit-text-align: center; -o-text-align: center; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {} .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {} .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: -44px; left: auto; background: #fff; line-height: 40px; text-align: center; -moz-text-align: center; -webkit-text-align: center; -o-text-align: center; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .intro-posts:hover .swiper-button-next { right: 0; opacity: 1; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .intro-posts:hover .swiper-button-prev { left: 0; opacity: 1; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; left: 0; right: 0; bottom: 10px; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullet { width: 11px; height: 11px; display: inline-block; border-radius: 100%; background: transparent; border: 2px solid #fff; margin: 0 2px; opacity: .5; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet { background: #fff; } .swiper-pagination-bullet-active { opacity: 1; background: #fff; border-color: #fff; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000; } .swiper-container-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -o-transform: translate(0, -50%); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 5px 0; display: block; } .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } .swiper-pagination-progress { background: rgba(0, 0, 0, .25); position: absolute; } .swiper-pagination-progress .swiper-pagination-progressbar { background: #007aff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal>.swiper-pagination-progress { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical>.swiper-pagination-progress { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-progress.swiper-pagination-white { background: rgba(255, 255, 255, .5); } .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background: #fff; } .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background: #000; } .swiper-container-3d { -webkit-perspective: 1200px; -moz-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); } .swiper-container-coverflow .swiper-wrapper, .swiper-container-flip .swiper-wrapper { -ms-perspective: 1200px; } .swiper-container-cube, .swiper-container-flip { overflow: visible; } .swiper-container-cube .swiper-slide, .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active, .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-slide { visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, .1); } .swiper-container-horizontal>.swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical>.swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, .5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /*======================================== 03. INTRO FAVOURITE POSTS =========================================*/ #intro-favourite-posts { overflow: hidden; margin-top: 6px; } .favourite-posts-title-home { height: 44px; line-height: 39px; font-size: 19px; margin-top: 10px; margin-bottom: 20px; background: #fff; border-bottom: 2px solid $(keycolor); } .favourite-posts-title-home h2 { color: #555; background: #ffffff; display: table; margin: auto; float: left; padding: 10px 10px 0; margin-left: 20px; text-align: center; font: $(favourite.title.font); text-transform: uppercase; } .favourite-posts-title-home:before { content: ""; border-top: 2px solid #f3f3f3; position: relative; top: 50%; right: 0; display: block; left: 0; bottom: -22px; width: 100%; } .favourite-post { width: 24.2%; float: left; overflow: hidden; position: relative; border: 1px solid #eee; } .favourite-posts-title { font-size: 18px; line-height: 22px; text-align: center; font: $(favourite.font); } .favourite-posts-title a { color: #fff; display: inline-block; } .favourite-posts-title a:hover { color: #fff; text-decoration: underline !important; } .favourite-thumbnail { height: 250px; } .favourite-thumbnail img { height: 250px; width: 100%; object-fit: cover; } .slider-pagination { float: right; color: #6f6f6f; font-size: 21px; display: inline-flex; background: #ffffff; margin-right: 20px; z-index: 2; margin-top: 8px; position: relative; } .swiper-button-prev-2 { display: block; width: 25px; height: 25px; line-height: 25px; background: #fff; text-align: center; margin-right: 5px; cursor: pointer; border-radius: 100%; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .swiper-button-next-2 { display: block; width: 25px; height: 25px; line-height: 25px; background: #fff; text-align: center; cursor: pointer; border-radius: 100%; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .swiper-button-prev-2:hover, .swiper-button-next-2:hover { color: #555; background: #f3f3f3; } .favourite-posts-overlay { position: absolute; width: 100%; padding: 20px 15px; margin: auto; bottom: 0; z-index: 10; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgb(0, 0, 0)); } .favourite-category { position: absolute; top: -35px; left: 20px; z-index: 1; color: #fff; display: inline-block; font-size: 12px; font-weight: 600; border-radius: 1px; line-height: normal; padding: 4px 12px; border-radius: 0 0 10px 10px; text-transform: uppercase; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .favourite-category:hover { color: #fff; } .favourite-post:hover .favourite-category { top: 0px; color: #fff !important; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } /*======================================== 04. ERROR PAGE =========================================*/ #error-page { padding: 50px 20px; } .error_page #main-wrapper { display: none; } .error_page #blog-pager { display: none; } .error_page .errornumber { font-size: 120px; text-align: center; margin: auto; width: 100%; float: left; color: $(keycolor); } .error_page .error { text-align: center; font-size: 30px; } .error_page p { text-align: center; margin-bottom: 15px; } body.error_page.dark-skin.error_page p { color: #aaa; } .error_page a.homepage { color: #fff; padding: 10px; display: block; } .error_page #i { text-align: center; display: block; font-size: 30px; margin-top: -15px; margin-bottom: 10px; } body.error_page.dark-skin.error_page #i { color: #aaa; } .error_page #h-b:hover { background-color: #222; } .error_page .fa-exclamation-circle:before { font-size: 120px; margin: 0 8px 0 10px; } .error_page #h-b { text-align: center; display: block; margin: auto; background-color: $(keycolor); width: 150px; color: #fff; border-radius: 25px; } /*======================================== 05. MAIN CONTENT =========================================*/ #main-wrapper { overflow: hidden; margin-top: 20px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } /*========== Content Wrapper ==========*/ #content-wrapper { width: 69%; float: left; } .post-ad-area { display: none; overflow: hidden; text-align: center; border: 1px solid rgba(238, 238, 238, 0); margin-bottom: 10px; } .item .post-ad-area { display: block !important; } .post-outer { margin-bottom: 40px; border: 1px solid #eee; box-sizing: border-box; background-color: #fff; } .post-thumb { width: 100%; height: 370px; overflow: hidden; background: #222; } .post-thumb a { display: block; width: 100%; height: 370px; overflow: hidden; } .post-thumb a:hover { opacity: .7; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; } .post-info { padding: 20px; } .meta-category { margin-bottom: 10px; text-align: center; } .post-title a { display: block; font-size: 22px; font-weight: 600; line-height: 25px; text-align: center; font: $(post.title.font); color: $(post.title.color); text-transform: capitalize; } .post-title a:hover { color: $(keycolor); text-decoration: underline; } .meta-post { text-align: center; margin: auto; margin-top: 15px; color: #909090; font-size: 13px; font-style: italic; text-transform: capitalize; } .meta-post:before { content: ""; width: 80px; border-top-width: 1px; border-top-style: solid; border-color: $(keycolor); position: relative; left: 50%; top: 0; margin-left: -40px; padding-bottom: 15px; display: block; } .post-timestamp-home { margin-right: 10px; } a.timestamp-link { font-style: italic; color: #909090; } .published { text-decoration: none; } .post-labels a { color: #909090; } .post-labels a:hover { color: $(keycolor); } .post-labels span { margin-left: 10px; margin-right: 5px; color: #aaa; } .post-labels a:last-child span { display: none; } .data-snippet { text-align: center; color: #868686; padding: 10px 0; font-size: 14px; line-height: 27px; } .read-more { margin: auto; text-align: center; margin-top: 15px; display: block; } .read-more a { color: #fff; -webkit-border-radius: 50px; border-radius: 50px; display: inline-block; position: relative; padding: 1px 25px; font-size: 85%; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .read-more:before { content: ""; border-top: 1px solid #e8e8e8; position: relative; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); right: 0; display: block; left: 0; bottom: -14px; } .read-more span { left: 0; position: relative; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .read-more a:hover { color: #fff; } .read-more a:hover span { left: -12px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .read-more i { opacity: 0; filter: alpha(opacity=0); position: absolute; right: 40px; top: 50%; transform: translate(0, -50%); transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .read-more a:hover i { opacity: 1; filter: alpha(opacity=100); right: 15px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .meta-author, .share-button-home, .meta-comment { display: table-cell; width: 33.333333333333%; } .meta-author { font-style: italic; font-size: 13px; text-transform: capitalize; color: #777; } #post-foot { display: table; width: 100%; margin-top: 20px; } .author-pic { width: 25px; float: left; margin-right: 10px; border-radius: 100%; } .author-pic img { border-radius: 100%; } .share-button-home { text-align: center; } .share-button-home a { width: 25px; height: 25px; color: #777; font-size: 14px; margin: 0 10px; text-align: center; display: inline-block; } .share-button-home a:hover { color: $(keycolor) !important; } .meta-comment { text-align: right; font-style: italic; font-size: 13px; text-transform: capitalize; } .comment-link { text-align: right; color: #777; } /*========== Status Message ==========*/ .status-msg-border { display: none; } .status-msg-body { text-transform: capitalize; position: relative; padding: 0; z-index: 0; } .status-msg-body a { color: $(keycolor); } .status-msg-wrap { width: initial; display: block; background-color: #FFF; margin: 0 auto 10px; padding: 30px 0; font-size: 120%; box-shadow: 0 0 5px rgba(37, 37, 37, 0.13); -moz-box-shadow: 0 0 5px rgba(37, 37, 37, 0.13); -webkit-box-shadow: 0 0 5px rgba(37, 37, 37, 0.13); -o-box-shadow: 0 0 5px rgba(37, 37, 37, 0.13); -ms-box-shadow: 0 0 5px rgba(37, 37, 37, 0.13); border: 1px solid #eee; } body.dark-skin .status-msg-wrap { background-color: #2a2a2a; border: 1px solid #3c3c3c; color: #fff; } /*========== Post Format ==========*/ .post-format { position: absolute; top: 0; width: 45px; height: 45px; color: #fff; border-radius: 0 0 10px 10px; left: 20px; line-height: 45px; text-align: center; font-size: 16px; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } /*========== Grid Style ==========*/ body.index.grid-style #main-wrapper .row, body.archive.grid-style #main-wrapper .row { margin-left: 1%; margin-right: 1%; } body.index.grid-style #content-wrapper, body.archive.grid-style #content-wrapper { width: 100%; float: none; } body.index.grid-style .post-outer, body.archive.grid-style .post-outer { width: 48%; float: left; margin: 1%; overflow: hidden; margin-bottom: 1%; } body.index.grid-style .post-info, body.archive.grid-style .post-info { top: 0; width: 100%; height: 100%; padding: 20px; position: absolute; padding-top: 170px; background: rgba(0, 0, 0, 0.61); transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } body.grid-style .post-outer:hover .post-thumb a { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); } body.index.grid-style .post-format, body.archive.grid-style .post-format { left: 50%; margin-left: -20px; z-index: 1; } body.index.grid-style .post-title a, body.archive.grid-style .post-title a { color: #fff !important; } body.index.grid-style .meta-post-line, body.archive.grid-style .meta-post-line { border-top-width: 3px; } body.index.grid-style .meta-post, body.archive.grid-style .meta-post { color: #d0d0d0 !important; } body.index.grid-style .meta-post a:hover, body.archive.grid-style .meta-post a:hover { color: #d0d0d0 !important; text-decoration: underline !important; } body.index.grid-style .post-labels a, body.archive.grid-style .post-labels a { color: #d0d0d0 !important; } body.index.grid-style a.timestamp-link, body.archive.grid-style a.timestamp-link { color: #d0d0d0 !important; } body.index.grid-style .data-snippet, body.archive.grid-style .data-snippet { display: none !important; } body.index.grid-style .post-labels span:hover, body.archive.grid-style .post-labels span:hover { text-decoration: none; } body.index.grid-style .read-more, body.archive.grid-style .read-more { display: none !important; } body.index.grid-style #post-foot, body.archive.grid-style #post-foot { display: none !important; } body.index.grid-style #sidebar-wrapper, body.archive.grid-style #sidebar-wrapper { display: none; } body.index.grid-style .favourite-post { width: 23.5%; } body.index.grid-style .favourite-post:nth-child(1), body.index.grid-style .favourite-post:nth-child(2), body.index.grid-style .favourite-post:nth-child(3) { margin-right: 1.99%; } /*========== List Style ==========*/ body.index.list-style #post-img, body.archive.list-style #post-img { float: left; width: 300px; height: 300px; overflow: hidden; } body.index.list-style .post-thumb, body.index.list-style .post-thumb a, body.archive.list-style .post-thumb, body.archive.list-style .post-thumb a { height: 300px; } body.index.list-style .post-outer, body.archive.list-style .post-outer { margin-bottom: 30px; } body.index.list-style .post-info, body.archive.list-style .post-info { display: table-cell; padding-bottom: 0; width: 100vh; } body.index.list-style .post-format, body.archive.list-style .post-format { width: 40px; height: 40px; line-height: 40px; font-size: 15px; } body.index.list-style .post-title a, body.archive.list-style .post-title a { text-align: left; font-size: 18px !important; } body.index.list-style .meta-post:before, body.archive.list-style .meta-post:before { left: 9%; } body.index.list-style .data-snippet, body.archive.list-style .data-snippet { text-align: left; height: 70px; overflow: hidden; } body.index.list-style .meta-post, body.index.list-style .read-more, body.archive.list-style .meta-post, body.archive.list-style .read-more { text-align: left; } body.index.list-style .share-button-home a, body.archive.list-style .share-button-home a { width: 20px; height: 20px; margin: 0 5px; } /*========== Portfolio Style ==========*/ body.por-style #outer-wrapper, body.por-style { background-color: #ffffff; } body.item.por-style #outer-wrapper { background-color: #f9f9f9; } body.por-style .favourite-posts-title-home h2 { margin-left: 0px; padding-left: 0; } body.por-style .slider-pagination { margin-right: 0px; } body.por-style .favourite-posts-title-home { border-bottom: none; } body.por-style .swiper-button-next { border-radius: 50%; } body.por-style .swiper-button-prev { border-radius: 50%; } body.por-style .intro-posts:hover .swiper-button-next { right: 10px; } body.por-style .intro-posts:hover .swiper-button-prev { left: 10px; } body.por-style.dark-skin .post-info { background: transparent; } body.index.por-style #content-wrapper, body.archive.por-style #content-wrapper { width: 100%; float: none; } body.index.por-style #sidebar-wrapper, body.archive.por-style #sidebar-wrapper { display: none; } body.index.por-style #main-wrapper .row { margin-left: 1%; margin-right: 1%; } body.index.por-style .post-outer, body.archive.por-style .post-outer { width: 31.33%; float: left; margin: 1%; overflow: hidden; margin-bottom: 1%; } body.por-style .post-info { top: 0; width: 100%; height: 100%; padding: 0; position: absolute; padding-top: 0; background: transparent; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } body.index.por-style .post-outer:hover .post-title, body.archive.por-style .post-outer:hover .post-title { background: rgba(0, 0, 0, 0.80); display: block; height: 100%; width: 100%; opacity: 1; } body.index.por-style .post-title, body.archive.por-style .post-title { transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; background: rgba(0, 0, 0, 0.80); opacity: 0; } body.por-style .post-thumb, body.por-style .post-thumb a { width: 100%; height: 340px; overflow: hidden; } body.por-style .post-title a { color: #fff; opacity: 0; width: 100vh; height: 340px; display: table-cell; vertical-align: middle; padding: 20px; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); } body.por-style .meta-post, body.por-style .post-format { opacity: 0; -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; } body.por-style .post-outer:hover .meta-post, body.por-style .post-outer:hover .post-format { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } body.por-style .post-title a:hover { text-decoration: none !important; } body.por-style .post-outer:hover .post-title a { opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } body.por-style .post-format { position: absolute; top: 25px; width: 45px; height: 45px; color: #fff; border-radius: 50%; left: 0; margin: auto; right: 0; line-height: 45px; text-align: center; font-size: 16px; background: transparent !important; border: 2px solid #fff; z-index: 2; } body.por-style .meta-post { text-align: center; position: absolute; bottom: 50px; color: #fff; width: 100%; left: 0; right: 0; } body.por-style .meta-post a { color: #fff; } body.por-style .data-snippet, body.por-style .read-more, body.por-style #post-foot, body.por-style .post-timestamp-home, body.por-style .meta-post:before { display: none !important; } .morepost { text-align: center; text-align: -webkit-center; text-align: -moz-center; text-align: -o-center; display: inline-table; width: 100%; margin-top: 40px; margin-bottom: 20px; font: $(main.font); } .morepost a { color: #fff; font-size: 14px; text-transform: capitalize; padding: 10px 40px; border-radius: 20px; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .morepost a:hover { color: #fff !important; box-shadow: 0 5px 10px #b1b1b1; } body.dark-skin .morepost a:hover { -webkit-box-shadow: 0 0 1px 5px rgba(0, 0, 0, 0.22); box-shadow: 0 0 1px 5px rgba(0, 0, 0, 0.22); } .morepost span { color: #fff; font-size: 14px; text-transform: capitalize; padding: 10px 25px; cursor: not-allowed; border-radius: 20px; background: #ff2e41; } .morepost .fa-frown-o { font-size: 23px; margin-left: 16px; line-height: 20px; position: relative; top: 3px; } .sp-load { color: #fff; font-size: 14px; text-transform: capitalize; padding: 6px 40px; border-radius: 20px; background: #333; display: inline-block; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; font-size: 19px; width: 152px; height: 38px; } /*========== Dark Skin ==========*/ body.dark-skin #header-wrapper { background-color: #2a2a2a; } body.dark-skin #topbar { background-color: #2a2a2a; border-bottom: 1px solid #3c3c3c; } body.dark-skin #menu-wrapper { border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; } body.dark-skin #outer-wrapper { background-color: #3c3c3c; box-shadow: 0 0 10px #252525; } body.por-style.dark-skin #outer-wrapper { background-color: #2a2a2a; } body.item.por-style.dark-skin #outer-wrapper, body.static_page.por-style.dark-skin #outer-wrapper { background-color: #3c3c3c; } body.dark-skin .social-sec #social a { color: #aaa; } body.dark-skin .menu-top li a { color: #aaa; } body.dark-skin .menu li a { color: #fff; } body.dark-skin .menu li:hover { background: rgba(0, 0, 0, 0.11); } body.dark-skin .search-button:before { background-color: #fff; margin: 0 12px; opacity: .5; } body.dark-skin .menu li ul { border-top: none !important; border: 1px solid #3c3c3c; } body.dark-skin .menu li ul li a { color: #eee; background-color: #2a2a2a; border-bottom: 1px solid #3c3c3c; } body.dark-skin .menu li ul li { background-color: #2a2a2a; } body.dark-skin #topbar { background-color: #2a2a2a; } body.dark-skin .swiper-button-next, body.dark-skin .swiper-button-prev { color: #fff; background: #2a2a2a; } body.dark-skin .favourite-posts-title-home { background-color: #2a2a2a; } body.dark-skin .favourite-posts-title-home:before { content: ""; border-top: 2px solid #3c3c3c; } body.dark-skin .favourite-posts-title-home h2 { color: #fff; background: #2a2a2a; } body.dark-skin .swiper-button-next-2, body.dark-skin .swiper-button-prev-2 { line-height: 25px; background: #2a2a2a; } body.dark-skin .slider-pagination { float: right; color: #6f6f6f; font-size: 21px; display: inline-flex; background: #2a2a2a; } body.dark-skin .swiper-button-prev-2:hover, body.dark-skin .swiper-button-next-2:hover { color: #fff; background: #3c3c3c; } body.dark-skin .favourite-post, body.dark-skin .intro-posts .swiper-slide { border: 1px solid #3c3c3c; } body.dark-skin .sidebar .widget { border: 1px solid #2a2a2a; background: #2a2a2a; } body.dark-skin .read-more:before, body.dark-skin .scrollToTop:before { content: ""; border-top: 1px solid #3c3c3c; } body.dark-skin .PopularPosts .widget-content ul li { border-bottom: 1px solid #3c3c3c; } body.dark-skin .popular-posts ul li .item-caption { background-color: #2a2a2a; } body.dark-skin .popular-posts .item-title { background: #2a2a2a; } body.dark-skin .item-title a { color: #fff; } body.dark-skin .form { color: #eee; background-color: #2a2a2a; } body.dark-skin .cloud-label-widget-content span a { background-color: #3c3c3c; color: #aaa; } body.dark-skin .BlogArchive #ArchiveList ul li a { color: #eee; } body.dark-skin .BlogArchive #ArchiveList ul li { color: #eee; } body.dark-skin .contact-form-name, body.dark-skin .contact-form-email, body.dark-skin .contact-form-email-message, body.dark-skin .contact-form-widget { color: #eee; background-color: #3c3c3c !important; } body.index.dark-skin.list-style .post-outer, body.archive.dark-skin.list-style .post-outer { background: #2a2a2a; } body.dark-skin .sidebar .widget h2 { color: #ffffff; } body.dark-skin .author-pic img { border: 2px solid #aaa; } body.dark-skin .PageList li { border-bottom: 1px dotted #3c3c3c; } body.dark-skin .PageList li a { color: #eee; } body.dark-skin .contact-form-button-submit { background: #1b1b1b; } body.dark-skin #footer-wrapper { background: #2a2a2a; color: #eee; } body.dark-skin .list-label-widget-content ul li a { color: #eee; border-bottom: 1px dotted #3c3c3c; } body.dark-skin .intro-posts-title a:hover { color: #fff !important; } body.dark-skin .post-outer { border: 1px solid #3c3c3c; background-color: #3c3c3c; } body.dark-skin .post-actions { border: 1px solid #2a2a2a; background-color: #2a2a2a; } body.item.dark-skin .post-body { color: #eee; background: #2a2a2a; border: 1px solid #2a2a2a; border-bottom: 1px solid #3c3c3c; } body.item.dark-skin .post-tags a { background: #3c3c3c; } body.item.dark-skin .post-tags a:before { border-right: 8px solid #3c3c3c; } body.item.dark-skin .post-title { color: #fff; } body.dark-skin .line { background: #3c3c3c; } body.dark-skin .author-box { border: 1px solid #2a2a2a; background: #2a2a2a; } body.dark-skin .heading { border-bottom: 1px solid #3c3c3c; } body.dark-skin .post-footer-title, body.dark-skin .related-posts-title a, body.dark-skin .author-name-a { color: #fff; } body.dark-skin .author-description, body.dark-skin .author-description a { color: #aaa; } body.dark-skin .previous { border-right: 1px solid #3c3c3c; } body.dark-skin .related-posts, body.dark-skin .post-pager, body.dark-skin .comments { border: 1px solid #2a2a2a; background: #2a2a2a; } body.dark-skin .post-title a { color: #fff !important; } body.dark-skin .post-meta { color: #888; } body.dark-skin.post-labels a { color: #888; } body.dark-skin .data-snippet { color: #bfbfbf; } body.dark-skin .comment-link { color: #898989; } body.dark-skin .share-button-home a { color: #898989; } body.dark-skin .author-name-home a { color: #898989 !important; } body.dark-skin .blog-pager a { color: #fff; background: #2a2a2a; border: 1px solid #3c3c3c; } body.dark-skin .post-info { background: #2a2a2a; } body.index.dark-skin.post-info { background: none; } body.dark-skin #footer-wrapper .widget h2 { color: #fff; background: #3c3c3c; } body.dark-skin .footer-social-icons { background: #2a2a2a; padding: 20px; } body.dark-skin .footer-social-icons #f-social-icons a { color: #fff; background: #3c3c3c; } body.dark-skin .footer-social-icons ul#f-social-icons a:hover { -webkit-box-shadow: 0 0 1px 5px #3e3e3e; box-shadow: 0 0 1px 5px #3e3e3e; } body.dark-skin .footer-menu li a { color: #eee; } body.dark-skin .about-me { background: #2a2a2a; border: 1px solid #2a2a2a; } body.dark-skin .cover-img-section h2, body.dark-skin #profile-caption h2 { color: #fff; } body.dark-skin #profile-caption .widget-content, body.dark-skin .profile-social #profile-icons a { color: #aaa; } body.dark-skin #footer-wrapper .item-title a { color: #eee; } body.dark-skin .copy-right, body.dark-skin .copy-right a { color: #aaa; } body.dark-skin .item .post-body { color: #eee; background: #2a2a2a; border: 1px solid #2a2a2a; } body.dark-skin .post-header { background: #2a2a2a; border: 1px solid #2a2a2a; border-bottom: 1px solid #3c3c3c !important; } body.dark-skin .item .post-title { color: #fff; } body.dark-skin blockquote.tr_bq { color: #aaa; background-image: none; } body.dark-skin .item .post-outer { border: 1px solid #3c3c3c; background-color: #3c3c3c; } body.dark-skin .item .post-body { color: #5E5E5E; background: #2a2a2a; border: 1px solid #2a2a2a; } body.dark-skin .widget-content { color: #eee; } body.dark-skin #BlogArchive1_ArchiveMenu { border: 1px solid #3c3c3c; background: #3c3c3c; color: #fff; } body.dark-skin h1, body.dark-skin h2, body.dark-skin h3, body.dark-skin h4, body.dark-skin h5, body.dark-skin h6 { color: #fff; } /*======================================== 06. SINGLE POST =========================================*/ .item .post-outer { border: none; margin-bottom: 0; margin: 0 !important; background-color: transparent; } .index .post-header { display: none; } .post-cover-thumb { display: none; overflow: hidden; border: 1px solid transparent; border-bottom: none; } body.fimg .post-cover-thumb { display: block; } .post-cover-thumb img { display: block; width: 100%; height: auto; overflow: hidden; } .goog-inline-block { margin-top: 50px !important; } .post-header { padding: 20px; border: 1px solid #eee; border-bottom: none; background: #ffffff; overflow: hidden; } .author-photo { width: 50px; height: 50px; border-radius: 100%; float: left; margin-right: 20px; overflow: hidden; display: none; } .author-photo img { border-radius: 100%; } .post-heading { display: table-cell; } .in-post-meta { float: left; } .in-post-meta a, .in-post-meta i { color: #888; font-style: normal; font-size: 12px !important; } .in-post-meta span { margin-right: 1em; } .post-author span { margin-right: 0 !important; } .post-timestamp { margin-left: 0 !important; } .item .post-title { color: #333; font-size: 22px; line-height: 35px; font-weight: 600; margin-bottom: 10px; text-transform: capitalize; font: $(item.post.title.font); } .item .post-body { width: 100%; color: #5E5E5E; font-size: 15px; line-height: 27px; overflow: hidden; background: #fff; padding: 20px; border: 1px solid #eee; } .item .post-body img { display: block; margin: auto; } /*========== Post footer ==========*/ .post-footer-line>* { margin-right: 0 !important; } /*========== Post Interaction ==========*/ .post-interaction { background: #fff; border: 1px solid #eee; border-top: none; overflow: hidden; height: 60px; line-height: 60px; padding: 0 20px; } body.dark-skin .post-interaction { background: #2a2a2a; border: 1px solid #3c3c3c; border-top: none; border-left: none; border-right: none; color: #fff; } body.dark-skin #rx-options a.rx-option:link { color: #fff !important; } body.dark-skin a.rx-option.rx-unchecked { color: #fff !important; } body.dark-skin span.rx-label { color: #fff !important; } body.dark-skin #rx-options .rx-option { color: #fff !important; } #rx-options a.rx-option:link { color: #fff !important; } .article-reaction { float: left; width: 80%; } td.reactions-label-cell { line-height: 59px; vertical-align: top; } .reactions-iframe { vertical-align: middle; } .reactions-label { width: 25px; float: left; font-size: 18px; line-height: 52px; color: $(keycolor); } /*========== Post Actions ==========*/ .post-actions { overflow: hidden; padding: 20px; margin-bottom: 30px; background: #fff; border-top: none !important; border: 1px solid #eee; } /*========== Post Tags ==========*/ .post-tags { float: left; } .post-tags span { width: 25px; float: left; font-size: 15px; line-height: 22px; color: #444; margin-right: 10px; } .post-tags span i { padding-right: 5px; color: $(keycolor); } .post-tags a { background-color: #aaa; border-radius: 0 2px 2px 0; color: #fff; display: inline-block; font-size: 11px; line-height: 13px; margin-right: 10px; padding: 4px 7px 3px; position: relative; transition: 0s; text-transform: uppercase; } .post-tags a:before { border-top: 10px solid transparent; border-right: 8px solid #aaa; border-bottom: 10px solid transparent; content: ""; height: 0; position: absolute; top: 0; left: -8px; width: 0; } .post-tags a:after { background-color: #fff; border-radius: 50%; content: ""; height: 4px; position: absolute; top: 8px; left: -2px; width: 4px; } .post-tags a:hover { background: #444; color: #FFF; transition: 0s; } .post-tags a:hover:before { border-right-color: #444; } /*========== Share Post ==========*/ .share-post { float: right; } .share-post span { float: left; font-size: 15px; color: #444; margin-right: 10px; line-height: 25px; } .share-post span i { padding-right: 5px; color: $(keycolor); } .share-post a { color: #777; width: 25px; height: 25px; line-height: 25px; background: transparent; display: inline-block; text-align: center; } body.dark-skin .share-post a { color: #aaa; } a.whatsapp-send { font-size: 16px; font-weight: 900; cursor: pointer; } .share-post a:hover { color: $(keycolor); } /*========== Author Box ==========*/ .author-box { padding: 20px; border: 1px solid #eee; margin-bottom: 30px; overflow: hidden; background: #fff; } .author-box h5 { font-size: 15px; color: #444; margin-right: 10px; line-height: 36px; float: none; } .author-box h5 span { margin-right: 15px; float: left; color: #fff; background: $(keycolor); left: 0; height: 56px; width: 35px; text-align: center; line-height: 73px; border-radius: 0 0 10px 10px; position: relative; margin-top: -20px; } .author-bio { overflow: hidden; display: inline-flex; float: left; } .author-picture { width: 100px; float: left; display: table; } .author-picture img { border-radius: 60%; height: 100px; width: 100px; } .author-content { float: left; padding: 20px; } a.author-name-a { color: #444; font-size: 15px; font-weight: 600; text-transform: uppercase; } .author-description { font-size: 13px; line-height: 22px; color: #666; } /*========== Archive Page ==========*/ .archive .post-header { display: none; } /*========== Post Pager ==========*/ .post-pager { margin-bottom: 40px; margin-top: -10px; } .post-pager li { padding: 0; display: table-cell; width: 50%; float: right; overflow: hidden; } .post-pager li strong { display: block; color: $(keycolor); font-size: 16px; font-weight: 600; font: normal normal 14px Montserrat; } .newer-link .post-pager-title { text-align: right; padding-top: 5px; } .older-link .post-pager-title { text-align: left; padding-top: 5px; } .older-link .post-pager-title:aftre { text-align: left; } .previous { border-right: 1px solid #E1E1E1; } .next strong { float: right; } .previous strong { float: left; } ul.post-pager { display: block; width: 100%; max-height: 95px; overflow: hidden; border: 1px solid #eee; background: #fff; margin-bottom: 30px; } .post-pager li a { width: 100vw; height: 93px; padding: 20px; color: #757575; text-align: center; display: table-cell; vertical-align: middle; font-family: sans-serif; } .post-pager li a:hover { color: $(keycolor); } ul.post-pager * { transition: all 0 ease; -webkit-transition: all 0 ease; -moz-transition: all 0 ease; -o-transition: all 0 ease; font-size: 13px; line-height: 20px; font-family: 'Overpass', FontAwesome; } ul.post-pager .fa-angle-right:before { content: "\f105"; margin-left: 5px; } ul.post-pager .fa-angle-left:before { content: "\f104"; margin-right: 5px; } /*========== Related Posts ==========*/ .related-posts { padding: 20px 10px 20px 20px; border: 1px solid #eee; margin-bottom: 30px; background: #fff; overflow: hidden; } .related-posts .heading{ margin-right: 10px; } .heading { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee; } .post-footer-title { color: #555; line-height: 20px; font-size: 17px !important; font-weight: bold !important; font: $(main.font); } .post-footer-icon { width: 22px; font-size: 18px; color: $(keycolor); margin-right: 5px; display: inline-block; } .related-container { padding-top: 20px; } .related { display: block; } .related-posts a.category { display: inline-block; padding: 0 8px; line-height: 1.5; font-size: 11px; color: #fff !important; vertical-align: middle; white-space: nowrap; border-radius: 2px; margin-top: 12px; text-transform: uppercase; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .related-post { display: inline-block; vertical-align: top; width: 33.3333333%; list-style: none; padding-right: 10px !important; } .related-posts-title { padding: 10px 0px; font-size: 14px; line-height: 20px; } .related-posts-title a { font-weight: 600; color: #444; margin-bottom: 5px; } .related-posts-title a:hover { color: $(keycolor) !important; } .related-thumbnail { display: block; width: 100%; object-fit: cover; height: 160px; overflow: hidden; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .related-post img { width: 100%; object-fit: cover; height: 100%; } .related-post .related-thumbnail:hover { -webkit-filter: grayscale(0) brightness(60%) contrast(100%); -moz-filter: grayscale(0) brightness(60%) contrast(100%); -o-filter: grayscale(0) brightness(60%) contrast(100%); filter: grayscale(0) brightness(60%) contrast(100%); } /*======================================== 07. SINGLE PAGE =========================================*/ .static_page h1.post-title.entry-title { color: #333; font-size: 22px; line-height: 35px; font-weight: 600; margin: 10px 0; text-transform: capitalize; font: $(item.post.title.font); } body.static_page.dark-skin h1.post-title.entry-title { color: #fff; } .static_page .post-body { width: 100%; color: #464646; font-size: 15px; line-height: 25px; overflow: hidden; background: #fff; padding: 20px; border: 1px solid #eee; margin-bottom: 30px; } body.static_page.dark-skin .post-body { color: #aaa; background: #2a2a2a; border: 1px solid #2a2a2a; } body.static_page.dark-skin .post-body span { background: transparent !important; } body.static_page.dark-skin .post-body div { background: transparent; } .static_page .post-outer { border: none; background-color: transparent; } .static_page .author-photo { display: none !important; } /*======================================== 08. COMMENTS =========================================*/ .comments { padding: 20px; margin-top: 0; border: 1px solid #eee; background: #fff; } #comments h5 { font-size: 15px; color: #444; margin-right: 10px; line-height: 25px; } #comments h5 i { padding-right: 5px; color: $(keycolor); } .comment-header { margin-left: -5px !important; } h4#comment-post-message { display: none !important; } .comments .comments-content .comment-thread ol { margin: 20px 0; } .comments .comments-content .comment-thread { margin: 8px 0 -40px; } .comments .comments-content .comment:first-child { padding-top: 0; } .comments .comments-content .comment { margin-bottom: 0; padding-bottom: 0; } .comments .avatar-image-container { float: left; max-height: 50px; width: 50px; height: 50px; } .comments .avatar-image-container img { width: 50px; max-width: 50px; height: 50px; border-radius: 50px; } .comments .comment-block { position: relative; background: #f5f5f5; margin-left: 72px; padding: 14px 0 0 20px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; border: 1px solid #f5f5f5; } .comments .comment-block:before { content: "\f0d9"; position: absolute; left: -13px; font-family: FontAwesome; top: 13px; font-size: 45px; color: #f5f5f5; } body.dark-skin .comments .comment-block:before { content: "\f0d9"; color: #3c3c3c; } body.dark-skin .comments .comment-block { position: relative; background: #3c3c3c; border: 1px solid #2a2a2a; } body.dark-skin .comments .comment-block:hover { -webkit-box-shadow: 0px 9px 22px -9px rgb(0, 0, 0); -moz-box-shadow: 0px 9px 22px -9px rgb(0, 0, 0); box-shadow: 0px 9px 22px -9px rgb(0, 0, 0); border: 1px solid #2a2a2a; } body.dark-skin .comments .comments-content .comment-content, body.dark-skin .comments .comments-content .comment-header { color: #eee; } body.dark-skin .comments .comments-content .comment-header a { color: #fff; text-transform: capitalize; } .comments .comment-block:hover { -webkit-box-shadow: 0px 9px 22px -9px rgba(0,0,0,0.2); -moz-box-shadow: 0px 9px 22px -9px rgba(0,0,0,0.2); box-shadow: 0px 9px 22px -9px rgba(0, 0, 0, 0.2); border: 1px solid #f5f5f5; } .comments .comments-content .loadmore.loaded { max-height: initial; display: none; } .comments .comments-content .comment-header a { color: #333; text-transform: capitalize; } .comments .comments-content .user { display: block; font-style: normal; font-weight: 700; } .comments .comments-content cite.user:before { content: "\f007"; margin: 0 5px; color: $(keycolor); margin-right: 10px; font-family: FontAwesome; } .comments .comments-content .user .icon .user { display: none; } .comments .comments-content .datetime { margin-left: 0; } .comments .comments-content .datetime a { font-size: 11px; font-style: italic; color: #999 !important; } .comments .comments-content .comment-content, .comments .comments-content .comment-header { color: #555; text-align: left; margin: 0 20px 0 0; } .comments .comments-content { background-color: #fff; padding: 10px; margin-bottom: 0; } body.dark-skin .comments .comments-content { background-color: #2a2a2a; } .comment-content { padding: 10px 0 20px; } .comments .comment-block .comment-actions { display: block; text-align: right; } .comments .comment .comment-actions a { background: $(keycolor); color: #fff; display: inline-block; font-size: 12px; line-height: normal; letter-spacing: 1px; margin: 0px 10px 10px 0; padding: 5px 10px; text-transform: capitalize; transition: all .3s; margin: 5px 10px; border-radius: 4px; } .comments .comment .comment-actions a:hover { text-decoration: none; background: #e74c3c; color: #fff; } .comments .thread-toggle { display: none; } .comments .comments-content .inline-thread { margin: 0 0 20px 35px !important; padding: 0 0 0 20px; } .comments .continue { display: none; } .comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { color: #bbb; content: counter(countcomments, decimal); counter-increment: countcomments; float: right; font-size: 21px; padding: 15px 20px 10px; position: relative; z-index: 10; } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments, decimal) "." counter(contrebasse, lower-latin); counter-increment: contrebasse; float: right; font-size: 18px; } .comments .comments-content .icon.blog-author { display: none !important; } .comments-content iframe { display: block; margin-bottom: -60px; } .comments span.item-control.blog-admin { display: inline-block !important; } .comment-form iframe { display: block; background-color: #fff; background-color: #fff; display: block; height: auto; min-height: 240px; } /*========== Blog Pager Buttons ==========*/ #blog-pager-newer-link { float: right !important; } #blog-pager-older-link { float: left !important; } .blog-posts.hfeed { clear: both; overflow: hidden; } .blog-pager { display: block; overflow: hidden; position: relative; clear: both; text-align: center; } .blog-pager a { display: inline-block; text-decoration: none; margin: 0 auto; padding: 0; border-radius: 0; font-size: 10px; margin-left: 2px; color: #555; text-transform: uppercase; letter-spacing: 1px; background: #fff; padding: 5px 15px; border: 1px solid #eee; font-family: 'Montserrat'; } .blog-pager-older-link { float: left; } .blog-pager-older-link:before { content: '\f053'; font-family: 'FontAwesome'; margin-right: 5px; } .blog-pager-newer-link { float: right; } .blog-pager-newer-link:after { content: '\f054'; font-family: 'FontAwesome'; margin-left: 5px; } .blog-pager a:hover { color: #fff; background: $(keycolor) !important; } a#Blog1_blog-pager-older-link { border-radius: 20px 0 0 20px; } a#Blog1_blog-pager-newer-link { border-radius: 0 20px 20px 0; } /*========== Hidden Section's ==========*/ body.index .post-footer { display: none !important; } h2.date-header, span.blog-admin { display: none !important; } .blog-mobile-link { display: none !important; } /*======================================== 09. SIDEBAR =========================================*/ #sidebar-wrapper { width: 29%; float: right; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } /*========== About Me Section ==========*/ .about-me { background: #fff; overflow: hidden; margin-bottom: 30px; border: 1px solid #eee; } .cover-img-section { border-bottom: 2px solid $(keycolor); min-height: 125px; } .cover-img-section h2 { padding: 20px; font-size: 15px; line-height: 19px; text-transform: capitalize; color: #444; text-align: center; font: $(sidebar.font); text-transform: uppercase; border-bottom: 2px solid $(keycolor); } .cover-img-section h2:after { content: ""; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid $(keycolor); position: absolute; left: 50%; margin: auto; right: 0; margin-left: -12px; bottom: -12px; } .cover-img-section img { height: 200px; width: 100%; object-fit: cover; } .profile-img-section { display: inline-block; width: 100%; text-align: center; } #profile-img { display: inline-block; width: 100%; text-align: center; } img#Image1_img { height: 200px; width: 100%; object-fit: cover; } .profile-img-section .widget-content { position: relative; left: 67%; width: 100%; display: inline-block; text-align: center; margin: auto; float: none; height: 30px; } .p-img { width: 100%; height: 36px; display: inline-block; position: relative; } img#Image2_img { height: 100px !important; width: 100px !important; border: 2px solid $(keycolor); border-radius: 100%; position: relative; object-fit: cover; top: -55px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } img#Image2_img:hover { box-shadow: 0 0 22px rgba(0, 0, 0, 0.57); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); } .profile-caption-section { overflow: hidden; width: 100%; display: block; } #profile-caption .widget-content { padding: 0 20px; padding-top: 0px; color: #777; font-size: 12px; line-height: 25px; display: block; text-align: center; } #profile-caption h2 { text-align: center; font-size: 18px; line-height: 20px; font-weight: 600; text-transform: uppercase; color: #454545; margin: 10px 0; } /*========== Profile Social Icons ==========*/ .profile-social-icons { overflow: hidden; float: none; display: inline-block; padding: 0 20px; width: 100%; } #profile-icons { width: 100%; text-align: center; line-height: 40px; } .profile-social li { display: inline-block; list-style: none; line-height: 40px; padding: 0 !important; } .profile-social .widget ul { padding: 0; } .profile-social .LinkList ul { text-align: center; } .profile-social ul#profile-icons a:hover { color: $(keycolor); } .profile-social #profile-icons a { display: block; height: 40px; width: 25px; line-height: 40px; font-size: 15px; text-align: center; color: #666; } .profile-social #social a:before { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; line-height: 29px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .profile-social .facebook:before { content: "\f09a"; } .profile-social .twitter:before { content: "\f099"; } .profile-social .gplus:before { content: "\f0d5"; } .profile-social .pinterest:before { content: "\f0d2"; } .profile-social .youtube:before { content: "\f16a"; } .profile-social .instagram:before { content: "\f16d "; } .profile-social .bloglovin:before { content: "\f004 "; } .profile-social .tumblr:before { content: "\f173"; } .profile-social .vine:before { content: "\f1ca"; } .profile-social .linkedin:before { content: "\f0e1"; } .profile-social .vk:before { content: "\f189"; } /*========== Sticky Sidebar ==========*/ .theiaStickySidebar { transition: all -.9s ease; -webkit-transition: all -.9s ease; -moz-transition: all -.9s ease; -o-transition: all -.9s ease; -webkit-transition: all -.9s ease; } /*========== Sidebar Widget ==========*/ .sidebar .widget { border: 1px solid #eee; background: #fff; display: block; width: 100%; box-sizing: border-box; height: auto; margin-bottom: 30px; overflow: hidden; } .sidebar .widget h2 { padding: 20px; line-height: 19px; text-transform: capitalize; font: $(sidebar.font); color: $(sidebar.color); text-align: center; text-transform: uppercase; } .sidebar .widget-title { border-bottom: 2px solid $(keycolor); } .sidebar .widget-title:before { display: none; } .sidebar .widget-title:after { content: ""; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid $(keycolor); position: absolute; left: 50%; margin: auto; right: 0; margin-left: -12px; } .sidebar .widget-content { padding: 20px; } .sidebar .widget-content br { display: none; } .sidebar ul { list-style: none; } .FeaturedPost p { position: absolute; bottom: 0; color: #A8A8A7; height: 50px; padding: 0 15px; z-index: 1; font-size: 12px; overflow: hidden; font-family: sans-serif; line-height: 22px; } #sidebar { transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } #sidebar-wrapper .widget-title:before { padding: 20px; text-align: center; color: $(keycolor); } #sidebar-wrapper .Text .widget-title:before { content: "\f10d"; } #sidebar-wrapper .FollowByEmail .widget-title:before { content: "\f0e0"; } #sidebar-wrapper .widget-title:before { content: "\f142"; } #sidebar-wrapper .FollowByEmail .widget-title:before { content: "\f0e0"; } #sidebar-wrapper .widget-title:before { content: "\f142"; } #sidebar-wrapper .Label .widget-title:before { content: "\f02c"; } #sidebar-wrapper iframe .widget-title:before { content: "\f082"; } #sidebar-wrapper .PopularPosts .widget-title:before { content: "\f02e"; } #sidebar-wrapper .CustomSearch .widget-title:before { content: "\f002"; } #sidebar-wrapper .ContactForm .widget-title:before { content: "\f1d8"; } #sidebar-wrapper .PlusBadge .widget-title:before { content: "\f0d5"; } #sidebar-wrapper .Followers .widget-title:before { content: "\f1a0"; } #sidebar-wrapper .FeaturedPost .widget-title:before { content: "\f005"; color: #FFB200; } #sidebar-wrapper .PageList .widget-title:before { content: "\f15c"; } #sidebar-wrapper .BlogArchive .widget-title:before { content: "\f073"; } #sidebar-wrapper .LinkList .widget-title:before { content: "\f03a"; } #sidebar-wrapper .Feed .widget-title:before { content: "\f09e"; } #sidebar-wrapper .Image .widget-title:before, #sidebar-wrapper .Slideshow .widget-title:before { content: "\f03e"; } #recentposts .widget-title:before { content: "\f0f6 "; } #sidebar-wrapper img { display: block; margin: auto; height: auto; } .PopularPosts .widget-content ul li { margin-bottom: 10px; padding-bottom: 10px !important; border-bottom: 1px solid #eee; } .PopularPosts .widget-content ul li:last-child { margin-bottom: 0; border-bottom: none !important; padding-bottom: 0 !important; } .PopularPosts img { width: 100%; object-fit: cover; height: 150px !important; padding-right: 0 !important; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .item-title a { font-weight: 600; color: #444; margin-bottom: 5px; } .item-title a:hover { color: $(keycolor); } #home-popular { background-color: rgba(34, 34, 34, 0.86); overflow: hidden; padding-bottom: 15px; width: 80%margin: 0 auto; } #popular-sec .widget-content li { width: 25%; overflow: hidden; height: 190px; float: right; position: relative; } .popularm-thumb { overflow: hidden; height: 200px; width: 100%; } #popular-sec .widget-content li:nth-child(5n+1) { width: 50%; height: 400px; } #popular-sec .widget-content li:nth-child(5n+1) .popularm-thumb { height: 410px; } .popularm-title { position: absolute; bottom: 0; right: 6px; left: 0; line-height: 28px; background: rgba(38, 38, 38, 0.8); padding: 5px; } .popularm-title a { color: #fff; } .popularm { margin: 0 4px; position: relative; } #popular-sec .widget-content li:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); } .list-label-widget-content ul li { list-style: none; padding: 0; } .list-label-widget-content ul { padding: 0; } .list-label-widget-content ul li a { display: block; padding: 7px 0; margin-bottom: 2px; color: #666; text-transform: capitalize; border-bottom: 1px dotted #eee; } .list-label-widget-content ul li:last-child a { border-bottom: none; margin-bottom: 0; } .list-label-widget-content ul li a:hover { text-decoration: none; padding-left: 20px; color: $(keycolor); } .list-label-widget-content ul li a:before { content: "\f105"; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: 400; padding-left: 10px; font-size: 16px; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0 7px 0 -5px; color: $(keycolor); } .sidebar .LinkList li { text-transform: capitalize; border-bottom: 1px dotted #eee; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .sidebar .LinkList li a { display: block; padding: 5px 0; } .sidebar .LinkList li:last-child { border-bottom: none; } .sidebar .LinkList li:hover { padding-left: 20px; } .sidebar .PageList li { text-transform: capitalize; border-bottom: 1px dotted #eee; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .sidebar .PageList li a { display: block; padding: 5px 0; } .sidebar .PageList li:last-child { border-bottom: none; } .sidebar .PageList li:hover { padding-left: 20px; } .Label span { display: none; } .sidebar .LinkList li a:before, .footer .LinkList li a:before, .sidebar .PageList li a:before, .footer .PageList li a:before, .widget.TextList li a:before { content: '\f101'; margin: 0 7px 0 5px; float: left; color: $(keycolor); } .sidebar .LinkList li a:hover, .footer .LinkList li a:hover, .sidebar .PageList li a:hover, .footer .PageList li a:hover, .widget.TextList li a:hover, #ArchiveList li a:hover { color: $(keycolor); } .FeaturedPost:after { content: no-close-quote; position: absolute; bottom: 0; width: 100%; height: 170px; background: linear-gradient(rgba(0, 0, 0, 0), #000); } .FeaturedPost h3 { position: absolute; font-size: 16px; line-height: 20px; padding: 0 15px; bottom: 55px; color: #fff; z-index: 1; } .FeaturedPost h3 a { color: #fff; line-height: 25px; } .FeaturedPost .post-summary { padding-top: 0 !important; } .FeaturedPost p { position: absolute; bottom: 0; color: #A8A8A7; height: 50px; padding: 0 15px; z-index: 1; font-size: 12px; overflow: hidden; font-family: sans-serif; line-height: 22px; } .cloud-label-widget-content span { display: inline-block; font-size: 100% !important; min-height: 30px; line-height: 2em; margin-bottom: 5px; } .cloud-label-widget-content span a { background-color: #E9E9E9; color: #555; padding: 0 10px; font-size: 13px; float: left; border-radius: 3px; text-transform: capitalize; } .cloud-label-widget-content span a:hover { background-color: $(keycolor) !important; text-decoration: none; color: #fff !important; } .FollowByEmail .follow-by-email-inner td { display: block; width: 100%; margin-bottom: 10px; } .FollowByEmail .follow-by-email-inner td:last-child { margin-bottom: 0; } .FollowByEmail .follow-by-email-inner .follow-by-email-submit { width: 100% !important; margin-left: 0; border-radius: 0 !important; height: 45px !important; background-color: hsla(0, 0%, 0%, 0.61); color: #fff !important; font-family: inherit; } .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover { background-color: #111; } .FollowByEmail .follow-by-email-inner .follow-by-email-address { display: block; height: 45px; width: 100% !important; font-style: italic; padding: 0 20px; border: 0 !important; background-color: #fff !important; } .FollowByEmail .follow-by-email-inner:before { content: "Enter your email address to subscribe to this blog and receive notifications of new posts by email."; font-size: 12px; line-height: 20px; margin: 14px 0; color: #eee; display: block; } .FollowByEmail .widget-content { background: $(keycolor); padding: 20px; } .FollowByEmail .widget-title { border-bottom: none; } .FollowByEmail h2.title { display: none; } .FollowByEmail .widget-title:after { display: none; } .FollowByEmail .widget-content:before { content: "Newsletter"; color: #fff; text-align: center; font-size: 20px; font-weight: 700; display: block; font-style: normal; } .email-icon { position: absolute; color: $(keycolor); background: #fff; left: 20px; height: 35px; width: 35px; text-align: center; line-height: 35px; border-radius: 0 0 10px 10px; top: 0; } .popular-posts ul { padding: 0; list-style: none; } .PopularPosts .item-thumbnail { float: none; height: 150px; width: 100%; background: #222; overflow: hidden; margin: 0 10px 0 0 !important; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .popular-posts .item-snippet { font-size: 12px; line-height: 19px; color: #868686; text-align: center; } .popular-posts .item-snippet:before { content: ""; width: 40px; border-top-width: 1px; border-top-style: solid; border-color: $(keycolor); position: relative; left: 50%; top: 0; margin-left: -22px; padding-bottom: 10px; display: block; } .popular-posts ul li .item-caption { background-color: #ffffff; position: relative; text-align: center; width: 90%; margin: auto; margin-top: -40px; } .popular-posts .item-title { line-height: 22px; font-size: 14px; text-align: center; padding: 10px; background: #ffffff; } .PopularPosts .item-thumbnail img:hover { opacity: .8; } #BlogArchive1_ArchiveMenu { width: 100%; padding: 10px; border: 1px solid $(keycolor); } #Attribution1, #Attribution2, #Attribution3 { display: none; } .quickedit { display: none; } .contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-widget { max-width: none; margin-bottom: 15px; background-color: #eee !important; background-color: #eee; border: #f0f8ff; } input#ContactForm1_contact-form-name { padding: 0 10px; } input#ContactForm1_contact-form-email { padding: 0 10px; } textarea#ContactForm1_contact-form-email-message { padding: 5px 10px; } .contact-form-widget { margin-bottom: 0; } .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover { border: none; border-top: none; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1); } .contact-form-button-submit { width: 100% !important; margin-left: 0; border-radius: 0 !important; height: 35px !important; border: none !important; color: #fff !important; font-family: inherit; background: #aaa; cursor: pointer; } .contact-form-button-submit:hover { background-color: $(keycolor); background-image: none; border: 0; } .form { padding: 20px; background-color: #fff; } .cloud-label-widget-content span { float: left; margin: 0 4px 5px 0; } .cloud-label-widget-content span { display: inline-block; font-size: 100%; min-height: 29px; line-height: 2em; } span.blog-admin { display: none !important; } a.toggle:before { display: none; } /*======================================== 10. INSTAGRAM WIDGET =========================================*/ #insta img {margin:auto;text-align:center;} #insta .widget-content {margin:auto;text-align:center;} .instagram-widget { height: 100%; background: #fff; overflow: hidden; min-height: 250px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .instagram-widget .widget { margin-bottom: 0px !important; } #insta .title { background: $(keycolor); padding: 20px; text-align: center; color: #fff; font-size: 18px; display: inline-block; position: absolute; border-radius: 20pc; top: 100px; left: 43%; z-index: 1; } .instagram-logo { display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; text-align: center; color: #fff; left: 50%; position: absolute; margin-left: -25px; z-index: 1; font-size: 30px; margin-top: 100px; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } body.boxed-layout .instagram-logo { margin-top: 72px; } ul.il-instagram-lite { padding: 0; } li.il-item { float: left; list-style: none; padding: 0; width: 16.6666666%; height: 250px; overflow: hidden; position: relative; } body.boxed-layout li.il-item { height: 200px; } body.boxed-layout .instagram-widget { min-height: 100px; } li.il-item:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); } li.il-item img { height: 100%; width: 100%; overflow: hidden; object-fit: cover; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .il-photo__meta { position: absolute; bottom: -65px; text-align: center; left: 0; right: 0; padding: 20px; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.68)); } .il-photo__likes { width: 43%; color: #fff; float: left; text-align: right; } .il-photo__comments { width: 43%; color: #fff; float: right; text-align: left; } li.il-item:hover .il-photo__meta { bottom: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; } .il-photo__likes:before { content: "\f08a"; margin-right: 5px; } .il-photo__comments:before { content: "\f0e5"; margin-right: 5px; } /*======================================== 11. FOOTER =========================================*/ #footer-wrapper { display: block; background: #fff; margin-top: 40px; } #footer-wrapper .row { padding: 20px; } /*======================================== 12. FOOTER SOCIAL ICONS =========================================*/ .footer-social-icons { background: #fff; padding: 20px; } #f-social-icons { width: 100%; line-height: 40px; } .footer-social-icons li { display: inline-block; list-style: none; line-height: 40px; padding: 0 !important; } .footer-social-icons .widget { margin-bottom: 0px !important; } .footer-social-icons .widget ul { padding: 0; } .footer-social-icons .LinkList ul { text-align: center; } .footer-social-icons ul#f-social-icons a:hover { -webkit-box-shadow: 0 0 1px 5px #eee; box-shadow: 0 0 1px 5px #eee; color: #fff; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .footer-social-icons #f-social-icons a { width: 49px; height: 49px; position: relative; text-align: center; line-height: 47px; font-size: 15px; color: #fff; margin: 0 5px; font-family: FontAwesome; background: #000000; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all .4s ease 0; -o-transition: all .4s ease 0; transition: all .4s ease 0; display: inline-block; } .footer-social-icons #f-social-icons a:before { background: transparent !important; } .footer-social-icons .facebook:before { content: "\f09a"; background: #3b5998; } .footer-social-icons .twitter:before { content: "\f099"; background: #1da1f2; } .footer-social-icons .gplus:before { content: "\f0d5"; background: #dd4b39; } .footer-social-icons .rss:before { content: "\f09e"; background: #f26522; } .footer-social-icons .youtube:before { content: "\f16a"; background: #cd201f; } .footer-social-icons .skype:before { content: "\f17e"; background: #00aff0; } .footer-social-icons .stumbleupon:before { content: "\f1a4"; background: #eb4924; } .footer-social-icons .tumblr:before { content: "\f173"; background: #35465c; } .footer-social-icons .vine:before { content: "\f1ca"; background: #00b488; } .footer-social-icons .linkedin:before { content: "\f0e1"; background: #0077b5; } .footer-social-icons .dribbble:before { content: "\f17d"; background: #ea4c89; } .footer-social-icons .soundcloud:before { content: "\f1be"; background: #; } .footer-social-icons .behance:before { content: "\f1b4"; background: #f80; } .footer-social-icons .digg:before { content: "\f1a6"; background: #000; } .footer-social-icons .instagram:before { content: "\f16d"; background: #c13584; } .footer-social-icons .pinterest:before { content: "\f0d2"; background: #bd081c; } .footer-social-icons .apple:before { content: "\f179"; background: #111; } .footer-social-icons .android:before { content: "\f17b"; background: #a4c639; } .footer-social-icons .vk:before { content: "\f189"; background: #45668e; } #footer-wrapper .footer-column { width: 32.222222%; overflow: hidden; float: left; } #footer-wrapper #column1, #column2 { margin-right: 1.6666667%; } #footer-wrapper .widget { margin: 0; color: #666; margin-bottom: 30px; } #footer-wrapper .widget ul { padding: 0; list-style-type: none; } #footer-wrapper a:hover { color: $(keycolor); } #footer-wrapper .widget h2 { font: $(sidebar.font); line-height: 19px; color: #333; font-size: 15px; text-transform: capitalize; background: #eee; padding: 10px; display: block; border-left: 2px solid $(keycolor); } /*========== Footer Widget ==========*/ #footer-wrapper .list-label-widget-content ul li:last-child { border-bottom: none; } #footer-wrapper .FollowByEmail .widget-content { background: #eee !important; } #footer-wrapper .FollowByEmail .follow-by-email-inner .follow-by-email-submit:hover { background-color: $(keycolor); } #footer-wrapper .popular-posts .item-title { line-height: 22px; font-size: 15px; text-align: left; padding: 0 10px; height: initial; display: block; color: #fff; width: 100%; display: table-header-group; } #footer-wrapper .popular-posts .item-snippet { display: none; } #footer-wrapper .PopularPosts .item-thumbnail { float: left; width: 75px; height: 75px; min-width: 75px; min-height: 75px; border-radius: 0; margin-right: 5px !important; } #footer-wrapper .PopularPosts img { width: 100%; object-fit: cover; height: 100% !important; } #footer-wrapper .popular-posts ul li .item-caption { background-color: transparent; position: static; text-align: start; margin-top: 0; height: auto; width: initial; display: block; } #footer-wrapper .item-title a { font-weight: 600; color: #666; font-size: 13px; padding: 10px 0px 5px 10px; text-align: start; display: block; } #footer-wrapper .item-title a:hover { color: $(keycolor); } #footer-wrapper span.label-size { background-color: #353535; } #footer-wrapper .FeaturedPost h3 a { color: #fff; font-size: 18px; line-height: 30px; } #footer-wrapper .FollowByEmail .widget-content:before { color: #666; } #footer-wrapper .form { color: #666; padding-top: 10px !important; padding: 0px; } #footer-wrapper .contact-form-button-submit:hover { background: $(keycolor); } .footer .PageList li { list-style: none; float: none; padding-right: .75em; margin: 0; background: none; border-bottom: 1px dotted #eee; } .footer .PageList li a { padding: 7px 0; display: block; } .footer .PageList li:last-child { border-bottom: none; } .footer .PageList li a:hover { text-decoration: none; padding-left: 20px; } #footer-wrapper .email-icon { display: none; } #footer-wrapper .TextList li { padding: 5px 0; text-transform: capitalize; border-bottom: 1px solid #2f2f2f; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } #footer-wrapper .TextList li a { display: block; padding: 5px 0; } #footer-wrapper .TextList li:last-child { border-bottom: none; } #footer-wrapper .TextList li:hover { color: $(keycolor); padding-left: 20px; } .footer-col .widget-content { margin-top: 10px; } .footer-col .PopularPosts .widget-content ul li { padding: 0px; } .footer-col .FollowByEmail .follow-by-email-inner:before { color: #929292; } /*======================================== 13. FOOTER MENU =========================================*/ .footer-menu { text-align: center; display: block; } .footer-menu li { display: inline-block; line-height: 40px; padding: 0; } .footer-menu li:after { content: ""; width: 5px; height: 5px; background: $(keycolor); display: inline-block; border-radius: 100%; } .footer-menu li a { color: #666; text-transform: capitalize; font-size: 13px; margin: 0 15px; font: $(footer.menu.font); } .footer-menu li a:hover { color: $(keycolor); } .footer-menu li:last-child:after { content: ''; display: none; } /*========== Go To Top ==========*/ .scrollToTop { margin-top: 20px; } .scrollToTop span { display: inline-block; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; text-align: center; color: #fff; left: 50%; position: relative; margin-left: -17px; cursor: pointer; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; background: $(keycolor); /* fallback for old browsers */ background: -webkit-linear-gradient(to left, $(keycolor2), $(keycolor3)); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, $(keycolor2), $(keycolor3)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .scrollToTop span:hover { -webkit-box-shadow: 0 0 1px 5px #eee; box-shadow: 0 0 1px 5px #eee; } body.dark-skin .scrollToTop span:hover { -webkit-box-shadow: 0 0 1px 5px #3e3e3e; box-shadow: 0 0 1px 5px #3e3e3e; } .scrollToTop:before { content: ""; border-top: 1px solid #e8e8e8; position: relative; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); right: 0; display: block; left: 0; bottom: -19px; width: 80%; margin: auto; } /*======================================== 14. COPYRIGHT =========================================*/ .copy-right { margin: auto; display: block; text-align: center; margin: 20px 0; color: #444444; } .copy-right a:hover { color: $(keycolor); text-decoration: underline !important; } .copy-right p .fa { color: #ffcc00; } /*===================================== 15. ShoreCodes =====================================*/ /* .ContactForm { display: none; } */ .blogger-items-contact .ContactForm { display: block; } .widget.ContactForm * { max-width: 100%; } .blogger-items-contact .form { padding: 0; } .blogger-items-contact .widget-title { display: none; } .blogger-items-contact .contact-form-widget { margin-top: 10px; } .blogger-items-contact .contact-form-name { width: 50%; height: 50px; } .blogger-items-contact .contact-form-email { width: 50%; height: 50px; } .blogger-items-contact .contact-form-email-message { height: 150px; } /*========== Button's ==========*/ a.button { color: #fff; } .button { float: left; color: #fff; } .button.small { font-size: 12px; padding: 5px 15px; } .button { font-size: 16px; } .button { padding: 10px 20px; margin: 5px; color: #fff; text-align: center; border: 0; cursor: pointer; border-radius: 2px; display: block; text-decoration: none; font-weight: 400; box-shadow: 0 1px 9px rgba(51, 51, 51, 0.15); } .button:hover { box-shadow: none; } .button.small:hover { -webkit-box-shadow: inset -400px 0 rgba(0, 0, 0, 0.6); box-shadow: inset -400px 0 rgba(0, 0, 0, 0.6); color: #fff; -webkit-transition: all 1s ease; transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .button:hover { -webkit-box-shadow: inset -400px 0 rgba(0, 0, 0, 0.6); box-shadow: inset -400px 0 rgba(0, 0, 0, 0.6); color: #fff; -webkit-transition: all 1s ease; transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } .red { background: #f34736; } .orange { background: #e8930c; } .green { background: #2ecc71; } .blue { background: #3498db; } .yellow { background: #FFD600; } .pink { background: #c370e4; } .black { background: #333333; } .small-button { width: 100%; overflow: hidden; clear: both; } .medium-button { width: 100%; overflow: hidden; clear: both; } .button .fa { margin: 0 10px 0 -10px; } /*========== Alert Message ==========*/ .alert-message { display: block; padding: 20px; color: #2f3239; margin: 10px 0; position: relative; border-radius: 2px; background-color: #c3c3c3; -webkit-border-radius: 2px; -moz-border-radius: 2px; box-shadow: 0 7px 10px rgba(130, 130, 130, 0.26); } .alert-message i { font-size: 16px; line-height: 20px; } .alert-message.alert { background-color: #46a3ff !important; color: #fff; } .alert-message.alert:before { position: absolute; content: "\f05a"; font-size: 4rem; opacity: 0.4; right: 10px; top: 22px; } .alert-message.warning { background-color: #ffc53a !important; color: #fff; } .alert-message.warning:before { position: absolute; content: "\f071"; font-size: 3.5rem; opacity: 0.4; right: 10px; top: 22px; } .alert-message.error { background-color: #ff6555 !important; color: #fff; } .alert-message.error:before { position: absolute; content: "\f06a"; font-size: 4rem; opacity: 0.4; right: 10px; top: 22px; } /*======================================== 16. TYPOGRAPHY =========================================*/ h1, h2, h3, h4, h5, h6 { color: #444; clear: both; font-weight: 400; } h1 { font-size: 26px; line-height: 28px; } h2 { font-size: 24px; line-height: 26px; } h3 { font-size: 22px; line-height: 24px; } h4 { font-size: 20px; line-height: 24px; } h5 { font-size: 16px; line-height: 22px; } h6 { font-size: 13px; line-height: 20px; margin-bottom: 0; margin-top: 0; } @media only screen and (min-width: 64.063em) { h1 { font-size: 42px; line-height: 46px; } h2 { font-size: 36px; line-height: 40px; } h3 { font-size: 28px; line-height: 35px; } h4 { font-size: 21px; line-height: 26px; } } ol, ul, li { padding: 0 40px; } blockquote { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } a { color: #444; text-decoration: none !important; -moz-transition: .2s; transition: .2s; } a:hover { color: $(keycolor); text-decoration: none; } blockquote.tr_bq { color: #191919; font-size: 26px; font-style: italic; font-family: Playfair Display, serif; line-height: 1.5; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEo25decW5UIEZMcl3u5z9rub1D0OUMxq8YfdfIgZbHacGRI35YwTKoUnlr-Hsu2nDDhwOEiDbjS1fOvTtchB4TmyI_C3X3G4bQrmzZpWHethe1-sig3KUFQvsgtyP-P-TxSxkKJFCT1LB/s1600/blockquote.png); text-align: center; background-repeat: no-repeat; background-position: 15px 0px; padding: 10px 20px; } .line { height: 1px; width: 100%; display: block; background: #e4e4e4; margin: 20px 0; } /*========== Error Message ==========*/ .error-message { background: #25d366; color: #fff; position: fixed; font-size: 17px; font-family: sans-serif; text-transform: capitalize; top: 150px; margin: auto; height: auto; line-height: 77px; left: 0; right: 0; padding: 4px; width: 350px; overflow: hidden; display: none; z-index: 999999999; border-radius: 10px; border: 6px solid #25d366; box-shadow: 0 0 100px #07a543; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .whats-icon { float: left; position: absolute; font-size: 40px; top: -10px; left: 20px; } .error-message p { color: #ffffff; line-height: 25px; font-size: 15px; width: 78%; float: right; } .error-message.active-message { top: 100px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } /*======================================== 17. RESPONSIVE STYLE =========================================*/ @media screen and (max-width: 320px) { #top-menu { float: left; width: 30%; } } @media screen and (max-width: 640px) { #nav1, #nav2, #nav3 { display: none; } #topbar { height: auto; } .search-button { display: none !important; } .fixed-search { display: block; } .menu { height: 45px; overflow: hidden; } div#menu-sec { display: inline-block; width: 80%; } .selectnav { display: block !important; } input.search-input { width: 100%; } .search-box-wrapper { max-width: 300px !important; } .intro-posts .swiper-slide { height: 400px; } .intro-thumbnail a { height: 400px; } .intro-posts-title a { font-size: 28px; } .favourite-posts-title-home:before { bottom: -15px; } .favourite-category { top: 0px; } #content-wrapper { width: 100%; margin-bottom: 30px; } body.index.por-style #main-wrapper .row { margin-left: 3%; margin-right: 3%; } body.index.por-style .post-outer, body.archive.por-style .post-outer { width: 100% !important; float: none; margin: auto; margin-bottom: 3% !important; } body.index.list-style #post-img { width: 100%; } body.index.list-style .data-snippet { text-align: center; } body.index.list-style .meta-post, body.index.list-style .read-more { text-align: center; } body.index.list-style .post-info { padding-bottom: 20px; } body.index.list-style .post-title a { text-align: center; } body.index.list-style .meta-post:before { left: 50%; } body.index.list-style .read-more { text-align: center; } blockquote.tr_bq { font-size: 20px; } .meta-author, .meta-comment { display: none; } .share-button-home { width: 100%; } .post-tags { width: 100%; float: left; display: block; margin-bottom: 20px; } .share-post { width: 100%; float: left; display: block; } .author-bio { text-align: center; display: block; } .author-picture { width: 100px; float: none; margin: auto; display: inline-block; } .related-post { width: 100%; padding-right: 0; text-align: center; padding-top: 20px !important; border-bottom: 1px solid #eee; } .related-post:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .post-pager-title { display: none; } .post-pager li a { margin-bottom: -6px; } #sidebar-wrapper { width: 100%; } li.il-item { float: left; list-style: none; padding: 0; width: 50%; height: 150px; } .instagram-widget { background: #fff; overflow: hidden; height: 100%; } .instagram-logo { margin-top: 200px; } .footer-social-icons #f-social-icons a { margin-bottom: 10px; } #footer-wrapper .footer-column { width: 100%; float: none; } } @media screen and (max-width: 768px) { #nav2 { display: none; } select#selectnav2 { display: inline-block; float: left; width: 80%; } .favourite-post { width: 49.2%; margin-bottom: 1.5% } .favourite-posts-title-home:before { bottom: -15px; } .favourite-post:nth-child(1), .favourite-post:nth-child(3) { margin-right: 1.5%; } .favourite-post:nth-child(2), .favourite-post:nth-child(4) { margin-right: 0%; } #content-wrapper { width: 100%; float: none; margin-bottom: 30px; } body.index.por-style .post-outer, body.archive.por-style .post-outer { width: 48%; } body.index.grid-style #main-wrapper .row, body.archive.grid-style #main-wrapper .row { margin-left: 2%; margin-right: 2%; } body.index.grid-style .post-outer, body.archive.grid-style .post-outer { width: 100% !important; float: none; margin: 0px; margin-bottom: 20px; } #sidebar-wrapper { width: 100%; } } @media screen and (max-width: 1025px) { .search-box-wrapper { max-width: 550px; } input.search-input { width: 100%; } body.index.list-style .share-button-home a { width: 15px; height: 25px; margin: 0 4px; } li.il-item { float: left; list-style: none; padding: 0; width: 50%; height: 150px; } .instagram-logo { margin-top: 200px; } } ]]> div.dropregion:last-child { clear: both; } body#layout .section-label .widget-content { background: none; border: none; } body#layout .section-label .widget-content div.layout-title { font-size: 30px; } body#layout .section-label .editlink { display: none; } body#layout .locked-widget .widget-content { background-color: #f8f8f8; box-shadow: none !important; } body#layout .admin-panel { background: #f9784e; overflow: hidden; max-width: 1200px; margin: 0 2%; } body#layout .admin-panel:before { content: 'TEMPLATE OPTION'; font-size: 17px; font-family: monospace; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 2px; background: #f9784e; padding: 20px; display: block; border-bottom: 1px solid #e45300; } body#layout .admin-panel div.widget { width: 47.11111111%; float: left; margin: 10px; margin-top: 0px !important; } body#layout .admin-panel .section { background-color: #f9784e !important; margin: 0 !important; padding: 30px 0 !important; border: 0 !important; } body#layout .admin-panel .locked-widget .widget-content { background-color: #f9784e; color: #fff; box-shadow: 0 0 10px #e04814 !important; } body#layout .admin-panel .editlink { color: #f9784e !important; background: #fff; padding: 0 10px !important; border-radius: 5px; } /*======== PAGE LAYOUT : HEADER ========*/ body#layout #topbar { height: auto; padding-top: 20px; } body#layout #top-menu { float: left; width: 49%; } body#layout #top-social { float: right; width: 49%; } body#layout #header-content { display: block; padding: 20px 0; } body#layout .home-icon { display: none; } body#layout #top-social:before { content: 'Top Social Icons'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } body#layout #top-menu:before { content: 'Top Menu'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } body#layout .logo:before { content: 'Logo'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } body#layout #menu-wrapper { height: inherit; } body#layout .menu:before { content: 'Main Menu'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } /*======== PAGE LAYOUT : INTRO SLIDER POSTS ========*/ body#layout #intro-slider { padding: 20px 0; overflow: hidden; } body#layout #intro-slider:before { content: 'Intro Slider Posts'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; margin-left: 2%; margin-right: 2%; } body#layout #intro-slider #HTML937 .widget-content { color: #fff; margin-top: 20px; background: #fe7044 !important; } body#layout #intro-slider #HTML937 .widget-content .editlink { color: #757575 !important; background: #fff; padding: 0 10px; border-radius: 10px; line-height: 15px; } body#layout #intro-slider #HTML937:before { content: ""; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #fe7044; position: absolute; left: 50%; margin: auto; right: 0; margin-left: -12px; top: -12px; } body#layout .f-p:before { content: 'Favourite Posts'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; margin-left: 2%; margin-right: 2%; } /*======== PAGE LAYOUT : CONTENT WRAPPER ========*/ body#layout #main-wrapper { margin-top: 20px; } body#layout #content-wrapper { width: 69%; float: left; } body#layout #content-wrapper:before { content: 'Main'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } body#layout #post-ad .widget-content { background: #fff59d !important; } body#layout #post-ad .editlink { color: #757575 !important; background: #fff; padding: 0 10px; border-radius: 10px; line-height: 15px; } body#layout #post-home-style { border-bottom: 0 !important; } body#layout #post-home-style:after { content: ""; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #fe7044; position: absolute; left: 50%; margin: auto; right: 0; margin-left: -12px; bottom: 0; } body#layout #post-home-style .widget-content { color: #fff; background: #fe7044 !important; } body#layout #post-home-style .editlink { color: #757575 !important; background: #fff; padding: 0 10px; border-radius: 10px; line-height: 15px; } /*======== PAGE LAYOUT : SIDEBAR WRAPPER ========*/ body#layout #sidebar-wrapper { overflow: visible; width: 30%; float: right; } body#layout #sidebar-wrapper:before { content: 'Sidebar'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } body#layout .about-me { background: #f8f8f8; overflow: hidden; border: 1px solid #ccc; border-bottom: none; } body#layout .about-me:before { content: 'About Me Section'; font-size: 17px; color: #666; padding: 20px; display: inline-flex; width: 100%; font-family: Roboto, sans-serif; border-bottom: 1px solid #ccc; } body#layout .about-me div.section { background-color: transparent; border: none; } body#layout .about-me .section h4 { display: none; } body#layout .about-me div.layout-widget-description { display: none; } body#layout #hide-about .widget-content { background: #ff4431; color: #fff; } body#layout #hide-about .editlink { color: #757575 !important; background: #fff; padding: 0 10px; border-radius: 10px; line-height: 15px; } body#layout #hide-about:before { content: ""; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #ff4431; position: absolute; left: 50%; margin: auto; right: 0; margin-left: -12px; top: 6px; } /*======== PAGE LAYOUT : INSTAGRAM AREA ========*/ body#layout .instagram-widget { margin-left: 2%; margin-right: 2%; padding: 20px 0; } body#layout .instagram-widget:before { content: '728x90 Ad'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } body#layout #HTML935 { margin-top: 20px !important; } body#layout #HTML935 .widget-content { background-color: #ff4431; color: #fff; } body#layout #HTML935 .editlink { color: #757575 !important; background: #fff; padding: 0 10px; border-radius: 10px; line-height: 15px; } body#layout #HTML935:before { content: ""; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #ff4431; position: absolute; left: 50%; margin: auto; right: 0; margin-left: -12px; top: -12px; } /*======== PAGE LAYOUT : FOOTER ========*/ body#layout #footer-wrapper { overflow: auto; width: 100%; } body#layout .footer-col:before { content: 'FOOTER'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: 2px solid #ccc; margin-top: 20px; } body#layout #column1, body#layout #column2, body#layout #column3 { width: 33.3333%; float: left; } /*======== PAGE LAYOUT : FOOTER SOCIAL ICONS ========*/ body#layout .footer-social-icons { width: 49%; float: left; } body#layout .footer-social-icons:before { content: 'Footer Social Icons'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } /*======== PAGE LAYOUT : FOOTER SOCIAL MENU ========*/ body#layout .footer-menu { width: 49%; float: right; } body#layout .footer-menu:before { content: 'Footer Menu'; font-size: 17px; font-family: monospace; font-weight: 600; color: #000; text-transform: uppercase; letter-spacing: 2px; background: #fff; padding: 20px; display: block; border: 1px solid #ccc; border-bottom: none; } ]]>
boxed
6 https:// NONE About Us https:// Home https://feshto-templatezy.blogspot.com/. Privacy Policy https://feshto-templatezy.blogspot.com/ Contact US