<b:if cond='data:view.isError'><data:blog.title.escaped/></b:if><b:if cond='data:view.isMultipleItems'><b:if cond='data:view.isHomepage'><data:blog.title.escaped/><b:else/><data:blog.pageTitle.escaped/></b:if><b:elseif cond='data:view.isSingleItem'/><data:view.title.escaped/></b:if> Platform : Blogger -> Category : Magazine -> Homepage : https://squeeze-template.blogspot.com -> Version : 2.3.0 -> Updated : 07 October 2020 *//*================= >Variables =================== *//*================= >Normalize ===================*/ html{font-family:serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a:focus,a:active{outline:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{max-width:100%;border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:serif;font-size:100%;line-height:1.15;margin:0}button,input{outline:none!important;overflow:visible}button,select{text-transform:none}button,html [type="button"], [type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none} *,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} iframe{border:none} /*================= >Spinner ===================*/ .Loading{position:fixed;z-index:9999;background-color:#fff;width:100vw;height:100vh;right:0;top:0}.spinner{text-align:center;top:-webkit-calc(50% - 12.5px);top:-moz-calc(50% - 12.5px);top:calc(50% - 12.5px);position:relative}.spinner > div{margin:0 5px;width:20px;height:20px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;-moz-animation:sk-bouncedelay 1.4s infinite ease-in-out both;-o-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{-webkit-animation-delay:-.32s;-moz-animation-delay:-.32s;-o-animation-delay:-.32s;animation-delay:-.32s}.spinner .bounce2{-webkit-animation-delay:-.16s;-moz-animation-delay:-.16s;-o-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1.0)}}@-moz-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);-moz-transform:scale(1.0);transform:scale(1.0)}}@-o-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);-o-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);-o-transform:scale(1.0);transform:scale(1.0)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);-moz-transform:scale(1.0);-o-transform:scale(1.0);transform:scale(1.0)}} /*================= >Fonts ===================*/ @font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v6/SLXGc1nY6HkvalIkTpu0xg.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC} @font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v6/SLXGc1nY6HkvalIvTpu0xg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v6/SLXGc1nY6HkvalIhTps.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /*================= >Carousel ===================*/ @keyframes splide-loading{ 0%{transform:rotate(0)} to{transform:rotate(1turn)} } .splide__container{position:relative;box-sizing:border-box} .splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:max-content;will-change:transform} .splide.is-active .splide__list{display:flex} .splide{visibility:hidden} .splide,.splide__slide{position:relative;outline:none} .splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0} .splide__slide img{vertical-align:bottom} .splide__slider{position:relative} .splide__track{position:relative;z-index:0;overflow:hidden} .splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;user-select:none} .splide--fade>.splide__track>.splide__list{display:block} .splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0} .splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1} .splide--rtl{direction:rtl} .splide--ttb>.splide__track>.splide__list{display:block} .splide__arrow svg{width:1.2em;height:1.2em;fill:currentColor} .splide__arrow{cursor:pointer;outline:none} .splide__arrow--prev svg{transform:scaleX(-1)} .splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none} .splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)} .splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)} .splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)} .splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)} /*================= >Main ===================*/ body{font-family:'Cairo',sans-serif;font-size:14px;line-height:1.5em;visibility:visible!important} body[data-overflow='false']{overflow:hidden} body.boxed .main-container{max-width:$(content.width)} body[data-protect='true']{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} body::-webkit-scrollbar{background-color:$(main.back);width:10px} body::-webkit-scrollbar-thumb{background:$(keycolor)} body::-moz-selection{background:$(keycolor);color:#FFF} ::-moz-selection{background:$(keycolor);color:#FFF} ::selection{background:$(keycolor);color:#FFF} ul{list-style:none;padding:0;margin:0} p{line-height:2;font-size:12px;text-align:justify} a{text-decoration:none;color:inherit} .main-container{max-width:100%;width:100%;margin:0 auto;background-color:$(main.back);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-moz-box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} .main-container:before,.main-container:after{content:'';display:block;height:3px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color))} #RecentPosts{margin-bottom:$(main.margin)} .side-$startSide{margin-bottom:$(main.margin)} body.no-sidebar .side-$startSide{float:none;width:100%} body.no-sidebar aside{display:none} .tempscheme{border-color:$(keycolor) $(footer.line) $(step.color) $(footer.text);float:$startSide;text-align:$endSide} /*================= >Widths ===================*/ .middle-content{overflow:hidden;display:flex;align-items:flex-start;justify-content:space-between} .side-$startSide{position:relative;width:calc(100% - $(sidebar.width) - 20px)} aside{width:$(sidebar.width);position:relative;margin-$startSide:$(main.padding)} .wrapper{max-width:$(content.width);margin:0 auto} #footer .color-wrap{position:relative;background-color:rgba(0,0,0,0.1)} .main-wrap{padding:0 $(main.padding)} /*================= >Framework ===================*/ /* ------- Quickedit ------ */ .quickedit:after{content:'\f0ad';position:absolute;font-family:fontawesome;color:#666;top:100%;$endSide:0;font-size:18px;z-index:5;opacity:.8} .quickedit:hover:after{-webkit-animation:quickedit .3s ease-in-out;-moz-animation:quickedit .3s ease-in-out;-o-animation:quickedit .3s ease-in-out;animation:quickedit .3s ease-in-out;opacity:1} #LinkList304 .quickedit:after{top:0;right:100%} @-webkit-keyframes quickedit{ 50%{-webkit-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);transform:rotate(30deg)} } @-moz-keyframes quickedit{ 50%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)} } @-o-keyframes quickedit{ 50%{-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} } @keyframes quickedit{ 50%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} } /* ------- Headlines ------ */ .headline{margin-bottom:15px;border-bottom:2px solid $(home.cate.line)} .main-wrap aside .headline{margin-bottom:15px;border-bottom:2px solid $(aside.line)} footer .headline{margin-bottom:15px;border-bottom:2px solid $(footer.line)} .headline h2,.headline h4{display:inline-block;margin:0 0 12px;font-size:17px;position:relative} .main-wrap .headline h2{color:$(home.cate.title)} .main-wrap .headline h4{color:$(home.cate.title)} .main-wrap .headline{border-bottom:2px solid $(post.line)} .main-wrap aside .headline h4{color:$(aside.title)} footer .headline h4{color:$(footer.title)} .headline h2:after,.headline h4:after{content:"";height:2px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));position:absolute;top:33px;$endSide:0;$startSide:0;bottom:0} .headline > a{color:$(home.cate.text);float:$endSide;padding:5px 12px;font-size:12px;background-color:$(home.cate.line);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;line-height:18px} /* ------ Read More ------ */ .read-more{display:inline-block;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));padding:5px 15px;font-size:14px;font-weight:700;color:$(grad.color);border-radius:30px} .read-more:hover{padding:5px 25px} /* ------ Post Share ------ */ .post-share{float:$endSide} .post-share .share-icon{z-index:1;float:$endSide;width:31px;height:31px;line-height:31px;text-align:center;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-size:16px;border-radius:100%;cursor:pointer;position:relative} .post-share .share-icon:after{opacity:0;content:"";font-family:FontAwesome;border-width:5px;border-style:solid;position:absolute;top:11px;$endSide:97%;pointer-events:none} .rtl .post-share .share-icon:after{border-color:transparent transparent transparent $(keycolor)} .ltr .post-share .share-icon:after{border-color:transparent $(keycolor) transparent transparent} .post-share .share-icon.arrow:after{opacity:1} .post-share .share-icon i{pointer-events:none} .post-share .share-menu{visibility:hidden;float:$endSide;margin-top:1px;margin-bottom:0;margin-$endSide:5px} .post-share .share-menu li{float:$endSide;opacity:0;margin-$endSide:5px} .rtl .post-share .share-menu li{-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);-moz-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px)} .ltr .post-share .share-menu li{-webkit-transform:translateX(30px);-ms-transform:translateX(30px);-moz-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)} .post-share .share-menu li i{width:27px;height:27px;line-height:29px;margin-top:1px;border-radius:100%;color:#FFF} .post-share .share-menu li .fa-facebook{background-color:#3b5998} .post-share .share-menu li .fa-twitter{background-color:#1da1f2} .post-share .share-menu li .fa-pinterest-p{background-color:#cc2127} .share-open.share-menu{visibility:visible} [dir] .share-open.share-menu li{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)} .share-open.share-menu li:nth-of-type(1){-webkit-transition:.4s linear;-o-transition:.4s linear;-moz-transition:.4s linear;transition:.4s linear} .share-open.share-menu li:nth-of-type(2){-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear} .share-open.share-menu li:nth-of-type(3){-webkit-transition:.2s linear;-o-transition:.2s linear;-moz-transition:.2s linear;transition:.2s linear} /* ------ Image Wrap ------ */ .img-wrap{display:block;border-radius:4px;overflow:hidden;position:relative} .img-wrap:hover img{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);-moz-transform:scale(1.1) rotate(3deg);-o-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)} .overlay{opacity:0;width:100%;height:100%;overflow:hidden;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));position:absolute;top:0;$endSide:0}{opacity:0;width:100%;height:100%;overflow:hidden;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:rgba(0,0,0,0.6);position:absolute;top:0;$endSide:0} .img-wrap:hover .overlay{opacity:.8} .details-on-img{position:absolute;top:0;$endSide:0;$startSide:0;bottom:0} .details-on-img .author-prof,.details-on-img .post-date{padding:0 4px;background:$(main.back);font-size:10px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;position:absolute;$startSide:-100%;z-index:2;-webkit-box-shadow:-2px 2px 10px -1px rgba(0,0,0,0.3);-moz-box-shadow:-2px 2px 10px -1px rgba(0,0,0,0.3);box-shadow:-2px 2px 10px -1px rgba(0,0,0,0.3)} .details-on-img .author-prof{color:$(keycolor)} .details-on-img .post-date{color:$(step.color)} .img-wrap .author-prof{top:30px;-webkit-transition:.4s linear;-o-transition:.4s linear;-moz-transition:.4s linear;transition:.4s linear} .img-wrap .post-date{top:55px;-webkit-transition:.6s linear;-o-transition:.6s linear;-moz-transition:.6s linear;transition:.6s linear} .img-wrap:hover .author-prof,.img-wrap:hover .post-date{$startSide:0} .img-wrap img{display:block;width:100%;height:100%} .rtl .details-on-img > *{direction:rtl} .ltr .details-on-img > *{direction:ltr} .details-on-img i{margin-$endSide:5px;float:$startSide;margin-top:5px} .caption{padding:30px;background:-webkit-gradient(linear,left top, left bottom,from(transparent),color-stop(rgba(0,0,0,0.7)),to(#000));background:-webkit-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:-o-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:-moz-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:linear-gradient(transparent,rgba(0,0,0,0.7),#000);color:#FFF;position:absolute;bottom:0;$startSide:0;$endSide:0} aside .img-wrap:before,aside .img-wrap:after{display:none} /* ------ Social Colors ------ */ .social .fa-facebook{background-color:#3b5998}.social .fa-twitter{background-color:#1da1f2}.social .fa-rss{background-color:#f26522}.social .fa-dribbble{background-color:#ea4c89}.social .fa-google-plus{background-color:#dd4b39}.social .fa-pinterest{background-color:#cc2127}.social .fa-linkedin{background-color:#0976b4}.social .fa-wordpress{background-color:#00769d}.social .fa-github{background-color:#000000}.social .fa-youtube{background-color:#e52d27}.social .fa-quora{background-color:#a82400}.social .fa-spotify{background-color:#1ed760}.social .fa-snapchat{background-color:#f5d602}.social .fa-flickr{background-color:#FF0084}.social .fa-instagram{background-color:#7c38af;background:radial-gradient(circle at 0 130%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%)}.social .fa-behance{background-color:#009fff}.social .fa-whatsapp{background-color:#189d0e}.social .fa-soundcloud{background-color:#FF5419}.social .fa-tumblr{background-color:#3e5a70}.social .fa-khamsat{background-color:#f9b01c}.social .fa-tradent{background-color:#59c5c4}.social .fa-blogger{background-color:#fc9644}.social .fa-telegram{background-color:#32AEE1}.social .fa-google-play{background-color:#3d9dab}.social .fa-mostaql{background-color:#2caae2}.social .fa-messenger{background-color:#0084ff}.social .fa-paypal{background-color:#193685}.social .fa-reddit{background-color:#ff4500}.social .fa-vk{background-color:#45668e}.social .fa-website{background-color:#444444}.fa-website:before{content:"\f0ac"} /* ------ Label-Title ------ */ .label-title{padding:0 8px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-size:12px;-webkit-border-radius:1.5px;-moz-border-radius:1.5px;border-radius:1.5px;position:absolute;top:10px;$startSide:10px;z-index:2} .img-wrap:hover .label-title{$startSide:-100%} .img-wrap .label-name{float:$startSide;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));padding:2px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-size:12px;margin-bottom:10px;color:$(grad.color);position:relative;$startSide:0} .img-wrap:hover .label-name{$startSide:-100%} /* ------ Ribble Button ------ */ .ribble{position:relative;overflow:hidden} .ribble span{font-weight:bold;position:relative;z-index:1;-webkit-transition:.6s ease-in-out;-o-transition:.6s ease-in-out;-moz-transition:.6s ease-in-out;transition:.6s ease-in-out} .ribble:hover{padding:5px 20px} .ribble:hover span{color:$(grad.color)} .ribble:before{content:'';background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));position:absolute;top:100%;$startSide:-200%;height:200%;width:200%;display:block;z-index:1;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-transform:scale(0);-ms-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;transition:.5s ease-in-out} .ribble:hover:before{top:-25px;$startSide:-50px;-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} /* ------ Other ------ */ .blog-admin,#uds-searchControl,#ContactForm93{display:none} .clear-left{display:block;clear:$endSide} .clear{clear:both;display:block} object{max-width:100%} .hide{display:none!important} *:not(.notr),:not(.notr):before,:not(.notr):after{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out} .post-body #ContactForm93{display:block} div#Tempnec{display:none!important} #blogger-components{display:none!important} body .cookie-choices-info{top:auto;bottom:0;background-color:#333} /*================= >Header ===================*/ header .color-wrap{background-color:$(topbar.back)} header #top-bar{padding:0 $(main.padding);height:40px;line-height:40px;color:#FFF;position:relative} #head-sec{padding:$(main.margin) $(main.padding);min-height:120px;overflow:hidden} /* ------ Fixed TopBar ------ */ header .color-wrap.fixed{position:fixed;width:100%;top:0;$startSide:0;z-index:6} /* ------ Header Social ------ */ header #top-bar #LinkList301{z-index:1;max-width:30%;margin-$endSide:45px;float:$endSide;position:relative;height:40px} #LinkList301 .social-static{margin-top:5px;white-space:nowrap;overflow-x:auto} #LinkList301 .social-static li{vertical-align:top} #LinkList301 .social-static::-webkit-scrollbar{width:0px} .social-static li{display:inline-block;margin:1px 2px 0;overflow:hidden} .social-static li i{color:#FFF;width:28px;height:28px;line-height:28px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:block;text-align:center;font-size:16px} .social-static li svg{width:28px;height:28px;padding:6px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:block;fill:#FFF} .social-static li:hover{-webkit-animation:SocIcons .2s ease-in-out;-moz-animation:SocIcons .2s ease-in-out;-o-animation:SocIcons .2s ease-in-out;animation:SocIcons .2s ease-in-out} @-webkit-keyframes SocIcons{ 50%{-webkit-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);transform:scale(1.5)} } @-moz-keyframes SocIcons{ 50%{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);transform:scale(1.5)} } @-o-keyframes SocIcons{ 50%{-webkit-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)} } @keyframes SocIcons{ 50%{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)} } /* ------ Header Pages List ------ */ header #top-bar #PageList301{float:$startSide;height:40px} header #top-bar .menu li{float:$startSide;margin:8px 0} header #top-bar .menu li a{-webkit-transition:none;-o-transition:none;-moz-transition:none;transition:none;background:$(topbar.link.back);margin-$endSide:7px;font-size:12px;display:block;line-height:normal;padding:0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font-weight:700;color:$(topbar.link.color);line-height:2em} header #top-bar .menu li a:hover,header #top-bar .menu li.selected a{color:$(grad.color)!important;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color))} header #top-bar .menu-res{display:none} header #top-bar .menu-res button{background:none;border:none;display:block;width:30px;height:30px;line-height:30px;font-size:20px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;position:absolute;top:5px;$startSide:$(main.padding);z-index:2;cursor:pointer} .menu-res-wrap ul:before{content:"";border-width:8px;border-style:solid;border-color:transparent transparent $(menu.back);position:absolute;top:-14px;$startSide:10px;z-index:2} .menu-res-wrap ul{width:180px;top:50px;position:absolute;background-color:$(menu.back);$startSide:10px;padding:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;z-index:-1;opacity:0;pointer-events:none;} .menu-res-wrap ul.open{z-index:9999;opacity:1;pointer-events:auto;} .menu-res-wrap li a{display:block;border-bottom:1px dashed rgba(255,255,255,0.075);color:#dddddd;text-align:center} .menu-res-wrap li:last-of-type a{border-bottom:none} /* ------ Search Box ------ */ header #HTML301{height:100%;position:absolute;$endSide:20px;min-width:230px} header .search{position:relative;display:flex;justify-content:flex-end;align-items:center;height:30px;margin-top:5px} header .search label{width:0px;overflow:hidden;height:100%;display:flex;flex-wrap:wrap} header .search input{z-index:1;font-family:inherit;-webkit-border-radius:0 1px 1px 0;-moz-border-radius:0 1px 1px 0;border-radius:0 1px 1px 0;height:100%;width:100%;background-color:$(topbar.search.back);color:$(topbar.search.color);font-size:12px;border:none;outline:none;padding:0 15px} header .search button{color:$(grad.color);background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));display:block;width:30px;height:30px;line-height:29px;font-size:18px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;flex-shrink:0;position:relative;border:none} header .search.open-search label{width:100%} /* ------ Logo & AD ------ */ #Header1{width:290px;float:$startSide} #Header1 .headone{font-weight:700;display:block;margin:0 0 10px;font-size:35px;line-height:1em;text-align:center} #Header1 p{margin:0;font-size:12px;text-align:center;line-height:1.5em} #Header1 img{width:auto;max-width:100%;margin:0 auto;display:block} .img-logo{display:block} #HTML302,#HTML307{width:728px;float:$endSide;text-align:$endSide} /* ------ Main Menu ------ */ #menu-bar{clear:both;position:relative;padding:0 $(main.padding);margin-bottom:$(main.margin)} #LinkList302{height:58px;background-color:$(menu.back);position:relative} #LinkList302:before{content:'';display:block;height:3px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));position:absolute;width:100%;bottom:0;$startSide:0} #menu-bar .menu-bar ul li{float:$startSide} #menu-bar .menu-bar ul li>a{font-weight:700;display:block;width:100%;padding:17px 15px;color:$(menu.link.color);position:relative} #menu-bar .menu-bar li>a:hover{background-color:$(menu.link.hover.back);color:$(menu.link.hover.color)} #menu-bar .menu-bar ul li.drop-menu-st >a{padding-$endSide:30px} .menu-bar ul i{font-size:18px;display:inline-block;vertical-align:middle;margin-$endSide:10px} #menu-bar .home{white-space:nowrap;overflow:hidden;height:55px;line-height:25px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:#FFF!important;min-width:65px;max-width:65px} #menu-bar .home:hover{max-width:100%!important;padding-$startSide:40px} #menu-bar .home span{position:relative;$startSide:50px} #menu-bar .home:hover span{$startSide:0px} .home:before{font-weight:400;content:"\f015";font-family:"fontawesome";font-size:20px;position:absolute;$startSide:23px;text-indent:0;-webkit-transform:scale(2);-ms-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);transform:scale(2);top:16px} #menu-bar .home:hover:before{$startSide:10px;-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} /* ------ Sub Menu ------ */ #menu-bar .menu-bar li>ul li a{padding:12px 20px} #menu-bar .menu-bar li>ul li a:hover{background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);padding-$startSide:30px} .drop-menu-st{position:relative;padding-bottom:5px} .drop-menu-st:after{content:"\f078";font-family:"fontawesome";font-size:10px;color:$(menu.link.color);position:absolute;top:18px;$endSide:10px} .drop-menu-st > ul{display:none;width:200px;height:auto;background-color:$(menu.back);position:absolute;top:58px;z-index:10;-webkit-box-shadow:0 5px 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 0 rgba(0,0,0,0.2);box-shadow:0 5px 5px 0 rgba(0,0,0,0.2)} .drop-menu-st:hover > ul{display:block} #menu-bar .drop-menu-st ul li{float:none;position:relative} /* ------ Bottom Menu ------ */ .bot-menu-st:hover > ul{display:block} .bot-menu-st > ul{display:none;width:200px;height:auto;background-color:$(menu.back);position:absolute;top:0;$startSide:100%;z-index:10;-webkit-box-shadow:0 5px 5px 0 rgba(0,0,0,0.2);box-shadow:0 5px 5px 0 rgba(0,0,0,0.2)} .rtl .bot-menu-st:after{content:"\f053"} .ltr .bot-menu-st:after{content:"\f054"} .bot-menu-st:after{font-family:"fontawesome";font-size:10px;color:$(menu.link.color);position:absolute;top:12px;$endSide:10px} /* ------ Fixed Menu ------ */ .fixed#menu-bar{height:58px} .fixed#menu-bar #LinkList302{width:100%;position:fixed;z-index:6;top:0;$startSide:0;-webkit-box-shadow:rgba(0,0,0,0.1) 0 2px 2px;box-shadow:rgba(0,0,0,0.1) 0 2px 2px;opacity:.99;-webkit-animation:fxd 1s;animation:fxd 1s} @-webkit-keyframes fxd{ from{top:-60px} to{top:0} } @keyframes fxd{ from{top:-60px} to{top:0} } /* ------ Mega Menu ------ */ .mega-wrap{background-color:$(menu.back);overflow:hidden;width:100%;position:absolute;top:100%;right:0;padding:0 20px;z-index:-1;max-height:0} .mega-wrap.open{max-height:295px;height:295px;padding:20px;z-index:5} .mega-wrap > i.fa-spin{color:$(main.back);display:block;text-align:center;font-size:40px;margin-top:80px} .mega-post:last-of-type{margin-left:0} .mega-post{padding:0 10px} .mega-wrap .splide__track{margin:0 -10px} .mega-post .img-wrap{height:180px} .mega-post .post-title a{color:$(menu.link.color);font-size:14px} .mega-post .post-title a:hover{color:$(menu.link.hover.color)} .mega-post .post-title{margin:0;max-height:50px;overflow:hidden} .mega-carousel .splide__arrows button{position:absolute;top:80px;background-color:#d8d8d8;font-family:"fontawesome";width:25px;height:25px;fill:$(menu.back);font-size:10px;line-height:0;border:none;border-radius:100%;z-index:2} .mega-carousel .splide__arrow.splide__arrow--prev{$startSide:10px} .mega-carousel .splide__arrow.splide__arrow--next{$endSide:10px} .mega-post .details{margin-bottom:5px} .mega-post .post-date i{font-size:inherit} .mega-post .post-date{color:$(menu.link.color)} .mega-post .details{margin:5px 0 0} /* ------ Responsive Menu ------ */ .menu-bar-res{display:none;float:$endSide;border:none;background:none;padding:0px} .menu-bar-res .fa-bars{cursor:pointer;color:$(grad.color);background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));height:55px;width:55px;text-align:center;font-size:26px;padding-top:16px} .res-home{display:none;float:$startSide;height:55px;width:110px;text-align:center;padding-top:17px;color:$(grad.color);background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));font-weight:700} .res-home:before{content:"\f015";font-family:FontAwesome;font-weight:400;font-size:24px;margin-$endSide:5px;display:inline-block;vertical-align:-2px} /*================= >Intro ===================*/ .intro{clear:both;padding:0 $(main.padding)} #section11:not(:empty){margin-bottom:20px;overflow:hidden} /* ------ Ticker ------ */ .ticker{height:40px;overflow:hidden;background-color:$(ticker.back)} .ticker-title{float:$startSide;height:40px;line-height:40px;padding:0 20px 0 50px;padding-top:0;padding-bottom:0px;padding-$startSide:50px;padding-$endSide:20px;background-color:$(ticker.title.back);color:$(ticker.title.color);font-size:16px;border-$endSide:4px solid $(keycolor);position:relative;z-index:1} .ticker-title:after{content:"\f1ea";font-family:FontAwesome;font-size:18px;color:inherit;position:absolute;top:2px;$startSide:15px} .ticker-content nav{display:flex} .ticker-content ul{display:flex;align-items:center;height:40px;line-height:40px;position:relative} .ticker-content li{margin:0 20px;flex-shrink:0} .ticker-content li:first-child{margin-$startSide:0} .ticker-content li:last-child{margin-$endSide:0} .ticker-content li:hover{color:$(keycolor)} .ticker-content li:before{content:"\f02e";font-family:FontAwesome;font-size:12px;color:$(keycolor);margin-$endSide:15px;display:inline-block;} .ticker-content li a{color:$(ticker.link.color);font-weight:600;} .ticker-content li a:hover{text-decoration:underline;color:$(keycolor)} /* ------ Intro Slider ------ */ .intro .section{margin-bottom:$(main.margin)} .main-slider .splide__track,.main-slider .splide__list{height:100%} .main-slider .m-slider{float:$startSide;width:62.5%;height:440px} .main-slider .m-slider .img-wrap{width:100%;height:100%} .main-slider .m-slider .item{width:100%;height:100%} .main-slider .left-box{float:$endSide;width:36.459%;height:440px;overflow:hidden} .main-slider .left-box .top,.main-slider .left-box .bottom{position:relative} .main-slider .left-box .top{margin-bottom:12px} .main-slider .left-box .img-wrap{width:100%;height:214px} .main-slider .img-wrap:hover .details-on-img .author-prof{top:30px} .main-slider .img-wrap:hover .details-on-img .post-date{top:55px} .main-slider h3{margin:0;clear:both} .main-slider .m-slider h3{font-size:18px} .main-slider .left-box h3{font-size:16px} .main-slider h3 a{display:block} .main-slider .m-slider .caption p{height:52px;overflow:hidden;margin:5px 0 0;font-size:13px} .main-slider .splide__arrows{margin:auto;position:absolute;top:46%;left:0;right:0;z-index:1} .main-slider .splide__arrows button.splide__arrow--next,.main-slider .splide__arrows button.splide__arrow--prev{padding-top:3px;border:none;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));width:35px;height:35px;position:absolute;text-align:center;color:$(grad.color)} .main-slider .splide__arrows .splide__arrow--next{$endSide:0;border-radius:2px 0 0 2px} .main-slider .splide__arrows .splide__arrow--prev{$startSide:0;border-radius:0 2px 2px 0} .main-slider .img-wrap{cursor:pointer} /*================= >Sidebar ===================*/ aside .widget{margin-bottom:$(main.margin)} /*================= >Footer ===================*/ #footer{position:relative;background:-webkit-gradient(linear,$endSide,from($(footer.back1)),to($(footer.back2)));background:linear-gradient(to $endSide,$(footer.back1),$(footer.back2));border-top:3px solid $(keycolor);clear:both} #footer-sections{font-size:0;padding:$(main.margin) 10px;display:flex;justify-content:space-between} #footer-sections .f-sec.no-items{display:none} #footer-sections .f-sec{font-size:14px;width:100%;min-width:25%;padding:0 10px} #footer-sections .f-sec .widget{margin-bottom:$(main.margin)} #footer-sections .f-sec .widget:last-of-type{margin-bottom:0} body.boxed#footer-sections{margin:0 5px} body:not(.boxed)#footer-sections{margin:0 auto} #footer-top-section:not(.no-items){padding:$(main.margin) 0;margin:0 $(main.padding);border-bottom:1px solid $(footer.line)} #footer-bottom-section:not(.no-items){padding:$(main.margin) 0;margin:0 $(main.padding);border-top:1px solid $(footer.line)} body:not(.boxed) #footer-top-section:not(.no-items).wrapper{margin:$(main.margin) auto 0;padding:0 $(main.padding) $(main.margin)} body:not(.boxed) #footer-bottom-section:not(.no-items).wrapper{margin:0 auto;padding:$(main.margin) $(main.padding)} #footer-top-section:not(.no-items).wrapper{padding:$(main.margin) 0;margin:0 $(main.padding)} #footer-cop-section{padding:5px $(main.padding);position:relative} #footer-cop-section:after{content:"";clear:both;display:block} /* ------ Copyrights ------ */ #HTML303{color:$(footer.link);margin-top:5px;float:$startSide} #HTML303 > *{vertical-align:middle;display:inline-block} #HTML303 a{color:$(keycolor)} #HTML303 a:hover{color:$(step.color);text-decoration:underline} #HTML303 > b{font-family:Tahoma;color:$(keycolor);font-size:15px;margin:0 5px} #LinkList304{float:$endSide;margin-top:5px} .credits span{margin-$endSide:5px} /* ------ Footer Scroll To Top ------ */ .scroll-top{background-color:$(footer.line);width:30px;height:30px;text-align:center;border-radius:100px;color:$(footer.text);border:none;cursor:pointer;position:absolute;left:calc(50% - 15px);top:-15px;z-index:1} .scroll-top i{pointer-events:none} .scroll-top:before{display:block} .scroll-top:hover{background:$(keycolor);color:#FFF} /*================= >Widgets ===================*/ .widget{position:relative} .widget-item-control{position:absolute;$endSide:0;top:100%;z-index:2;opacity:.7} .widget-item-control:hover{opacity:1} #top-bar .widget-item-control{top:0} .headline[data-title*="[SOC]"],.headline[data-title*="[ACC]"]{display:none} .PLHolder{opacity:0.5;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color))} .PLHolder img{visibility:hidden} .img-wrap img{transition:.5s all} .pl-fade .PLHolder img{opacity:0} .pl-zoomin .PLHolder img{transform:scale(0)} .pl-zoomout .PLHolder img{transform:scale(2)} .pl-rotate .PLHolder img{transform:rotate(-360deg)} .pl-blur .PLHolder img{filter:blur(50px)} /* ------ Email Subscription && BlogSearch ------ */ aside .subscrib-sec p{margin:0 0 10px;color:$(aside.text);text-align:$startSide} footer .subscrib-sec label{display:block;font-size:12px;margin:0 0 10px;color:$(footer.text);text-align:$startSide} aside .subscrib-sec label{color:$(aside.text)} footer .subscrib-sec label{color:$(footer.text)} .subscrib-sec input[name="email"],.BlogSearch .search-input input{display:block;width:100%;padding:15px;margin:auto;line-height:0;outline:0;font-size:14px;border:0;border-radius:2px;direction:ltr;text-align:left;margin-top:15px;font-family:inherit} aside .subscrib-sec input[name="email"],aside .BlogSearch .search-input input{background-color:$(aside.line);color:$(aside.link)} footer .subscrib-sec input[name="email"],footer .BlogSearch .search-input input{background-color:$(footer.line);color:$(footer.link)} .msg-send,.BlogSearch .search-action{font-family:inherit;display:block;padding:10px 30px 10px 20px;margin:5px auto 0;outline:0;border:0;border-radius:2px;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-weight:700;cursor:pointer;position:relative;overflow:hidden;width:100%} .msg-send:hover,.BlogSearch .search-action:hover{-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)} .msg-send:before{content:"\f1d8";font-family:FontAwesome;position:absolute;top:10px;$startSide:10px;z-index:1;font-weight:normal} .msg-send:hover input[type="submit"]{color:#2c2c2c} .ltr .msg-send:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)} .msg-send:hover:before{-webkit-animation:subs .3s ease-in-out;animation:subs .3s ease-in-out} @-webkit-keyframes subs{ from{top:37px;$startSide:38px} to{top:10px;$startSide:10px} } @keyframes subs{ from{top:37px;$startSide:38px} to{top:10px;$startSide:10px} } /* ------ LinkList & PageList & TextList ------ */ .LinkList .widget-content li a, *:not(header) .PageList .widget-content li a,.TextList .widget-content li{display:block;padding:13px 0;font-size:14px} .LinkList .widget-content li:first-child a, *:not(header) .PageList .widget-content li:first-child a,.TextList .widget-content li:first-child{padding-top:0} aside .LinkList .widget-content li a,aside .PageList .widget-content li a,aside .TextList .widget-content li{color:$(aside.link);border-bottom:1px solid $(aside.line)} footer .LinkList .widget-content li a,footer .PageList .widget-content li a,footer .TextList .widget-content li{color:$(footer.link);display:block;border-bottom:1px solid $(footer.line)} aside .LinkList .widget-content li a::before, footer .LinkList .widget-content li a::before{content:"\f08b"} .TextList .widget-content li::before{content:"\f129";font-size:10px} *:not(header) .PageList .widget-content li a::before{content:"\f0f6"} aside .LinkList .widget-content li a::before, footer .LinkList .widget-content li a::before,*:not(header) .PageList .widget-content li a::before,.TextList .widget-content li::before{display:inline-block;vertical-align:top;font-family:fontawesome;margin-$endSide:10px;font-size:20px} aside .LinkList .widget-content li a::before,aside .PageList .widget-content li a::before,aside .TextList .widget-content li::before{color:$(aside.text)} footer .LinkList li a::before,footer .PageList .widget-content li a::before,footer .TextList .widget-content li::before{color:$(footer.text)} aside .LinkList .widget-content li a:hover, footer .LinkList .widget-content li a:hover, *:not(header) .PageList .widget-content li a:hover{color:$(keycolor);border-bottom:1px solid $(keycolor)} aside .LinkList .widget-content li a:hover::before, footer .LinkList .widget-content li a:hover::before{-webkit-animation:LinkIcon 0.2s linear;animation:LinkIcon 0.2s linear;color:$(keycolor)} *:not(header) .PageList .widget-content li a:hover::before{color:$(keycolor)} @-webkit-keyframes LinkIcon{100%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}} @keyframes LinkIcon{100%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}} /* ------ Popular Posts ------ */ .PopularPosts article{margin-bottom:15px;padding-bottom:15px;overflow:hidden} .PopularPosts article:last-of-type{margin-bottom:0;border-bottom:none} aside .PopularPosts article{border-bottom:1px solid $(aside.line)} footer .PopularPosts article{border-bottom:1px solid $(footer.line)} .PopularPosts .post-date{display:inline-block;background-color:$(keycolor);text-align:$startSide;font-size:10px;border-radius:5px;color:$(grad.color);padding-$startSide:5px;padding-$endSide:10px;margin-bottom:5px} .PopularPosts .post-date i{background-color:rgba(0,0,0,0.2);font-size:12px;display:inline-block;vertical-align:middle;padding:5px;color:$(grad.color);margin-$endSide:5px} .PopularPosts .item-thumbnail{display:block;overflow:hidden;float:$startSide;width:72px;height:72px;margin-$endSide:15px;border-radius:2px} .PopularPosts .item-thumbnail img{height:100%;display:block} .PopularPosts .item-thumbnail:hover img{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)} .PopularPosts .post-title{overflow:hidden;margin:0 0 5px;font-weight:700;font-size:16px} aside .PopularPosts .post-title a{color:$(aside.link)} footer .PopularPosts .post-title a{color:$(footer.link)} .PopularPosts .post-title a:hover{color:$(keycolor)} .snippet-item{font-size:12px;text-align:justify;line-height:1.5em;margin:0} aside .snippet-item{color:$(aside.text)} footer .snippet-item{color:$(footer.text)} /* ------ Archive Widget ------ */ .BlogArchive select{background:transparent;width:100%;outline:none;padding:5px 20px;margin:0 auto;display:block;font-family:inherit;font-size:12px} .BlogArchive select:focus{border:1px solid $(keycolor)} aside .BlogArchive select{border:1px solid $(aside.line);color:$(aside.link)} footer .BlogArchive select{border:1px solid $(footer.line);color:$(footer.link)} /* Flat */ .flat .archivedate .post-count{font-style:normal;float:$endSide} aside .flat .archivedate i{color:$(aside.text)} footer .flat .archivedate i{color:$(footer.text)} .BlogArchive .flat .archivedate a{display:block;padding:7px 2px} aside .BlogArchive .flat .archivedate a{color:$(aside.link);border-bottom:1px dotted $(aside.line)} footer .BlogArchive .flat .archivedate a{color:$(footer.link);border-bottom:1px dotted $(footer.line)} aside .BlogArchive .flat .archivedate a::before{color:$(aside.line)} footer .BlogArchive .flat .archivedate a::before{color:$(footer.text)} .BlogArchive .flat .archivedate a::before{display:inline-block;content:"\f08d";-webkit-transform:rotate(to $endSide);transform:rotate(to $endSide);font-family:fontawesome;margin-$endSide:10px;vertical-align:middle} .BlogArchive .flat .archivedate:hover a{color:$(keycolor);border-bottom:1px dotted $(step.color)} .BlogArchive .archivedate:hover a:before{color:$(keycolor)} /* Hierarchy */ .hierarchy .hierarchy{margin-$startSide:10px} aside .hierarchy-title{background:$(aside.line);margin-bottom:5px;padding:8px 15px} footer .hierarchy-title{background:$(footer.line);margin-bottom:5px;padding:5px 20px} aside .hierarchy .post-count-link,aside .hierarchy ul.posts a{color:$(aside.link)} footer .post-count-link, footer .hierarchy ul.posts a{color:$(footer.link)} .hierarchy .post-count{float:$endSide;color:#999} aside .hierarchy .post-count{color:$(aside.text)} footer .hierarchy .post-count{color:$(footer.text)} .hierarchy ul.posts{margin-$startSide:0} .hierarchy ul.posts a{font-size:12px;display:block;padding:5px 0} .hierarchy ul.posts a:hover{border-bottom:1px solid $(step.color);color:$(keycolor);padding-$startSide:5px} aside .hierarchy ul.posts a{border-bottom:1px solid $(aside.line)} footer .hierarchy ul.posts a{border-bottom:1px solid $(footer.line)} /* ------ Label Widget ------ */ .cloud-label-widget-content{overflow:hidden} .cloud-label-widget-content .label-name{float:$startSide;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));padding:7px 15px;margin-$endSide:7px;margin-bottom:7px;border-radius:2px;font-size:14px;color:$(grad.color);font-weight:700} .cloud-label-widget-content .label-name::before{content:"\f02b";font-family:fontawesome;display:inline-block;vertical-align:top;margin-$endSide:5px;border-radius:100%;margin-top:-4px;font-size:14px;padding-top:5px;text-align:center;font-weight:400} .cloud-label-widget-content .label-name:hover{-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)} .cloud-label-widget-content .label-name:hover:before{-webkit-animation:label .3s ease-in-out;animation:label .3s ease-in-out} .list-label-widget-content a{display:block;padding:7px 0} @-webkit-keyframes label{ 50%{-webkit-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);transform:rotate(-60deg)} } @keyframes label{ 50%{-webkit-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);transform:rotate(-60deg)} } aside .list-label-widget-content .label-name{color:$(aside.link);border-bottom:1px dotted $(aside.line)} footer .list-label-widget-content .label-name{color:$(footer.link);border-bottom:1px dotted $(footer.line)} .list-label-widget-content .label-name::before{content:"\f07b";font-family:fontawesome;margin-$endSide:10px;display:inline-block;vertical-align:top;-webkit-transition:.3s ease-out;transition:.3s ease-out;width:20px;text-align:$endSide} aside .list-label-widget-content .label-name::before{color:$(aside.text)} footer .list-label-widget-content .label-name::before{color:$(footer.text)} .list-label-widget-content .label-name:hover::before{content:"\f07c";color:$(keycolor)!important} .list-label-widget-content .label-count{margin-top:-28px} aside .list-label-widget-content .label-count{float:$endSide;color:$(aside.text)} footer .list-label-widget-content .label-count{float:$endSide;color:$(footer.text)} aside .list-label-widget-content .label-name:hover{color:$(keycolor);border-bottom:1px dotted $(keycolor)} footer .list-label-widget-content .label-name:hover{color:$(keycolor);border-bottom:1px dotted $(keycolor)} /* ------ Statistics ------ */ .Stats img{width:auto;height:auto;display:inline-block;vertical-align:-4px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin-$endSide:5px} .Stats .widget-content{text-align:center;font-size:30px;font-weight:700;font-family:Arial} aside .text-counter-wrapper{color:$(aside.link);margin:0 5px;vertical-align:5px} footer .text-counter-wrapper{color:$(footer.link);margin:0 5px;vertical-align:5px} /* ------ Contact Form ------ */ .post-body #ContactForm93{padding:$(main.padding);border:1px solid $(home.cate.line)} .post-body #ContactForm93 .headline{display:none} .ContactForm form{position:relative} .ContactForm input[type='text'],.ContactForm textarea{display:block;width:100%;margin-bottom:5px;padding-top:15px;padding-bottom:5px;padding-$startSide:30px;padding-$endSide:20px;border:0;resize:vertical;outline:0;font-family:inherit;font-size:14px;font-weight:700;line-height:2em;background-color:transparent;position:relative;z-index:2} aside .ContactForm input[type='text'],aside .ContactForm textarea{border-bottom:2px solid $(aside.line);color:$(aside.text)} footer .ContactForm input[type='text'], footer .ContactForm textarea{border-bottom:2px solid $(footer.line);color:$(footer.text)} .ContactForm textarea{min-height:150px} .ContactForm input[type='text']:focus,.ContactForm textarea:focus{border-bottom:2px solid $(keycolor)} .ContactForm i{position:absolute;$startSide:0;font-size:18px} aside .ContactForm i{color:$(aside.text)} footer .ContactForm i{color:$(footer.text)} .ContactForm input[type='text']:foucs + i,.ContactForm textarea:focus + i{color:$(keycolor)} .ContactForm i:nth-of-type(1){top:17px} .ContactForm i:nth-of-type(2){top:70px} .ContactForm i:nth-of-type(3){top:130px} .ContactForm label{position:absolute;$startSide:30px;font-size:14px;font-weight:bold} aside .ContactForm label{position:absolute;$startSide:30px;color:$(aside.text)} footer .ContactForm label{position:absolute;$startSide:30px;color:$(footer.text)} .ContactForm label:nth-of-type(1){font-size:14px;top:10px} .ContactForm label:nth-of-type(2){font-size:14px;top:60px} .ContactForm label:nth-of-type(3){font-size:14px;top:120px} .ContactForm input[type='text']:nth-of-type(1):valid ~ label:nth-of-type(1),.ContactForm input[type='text']:nth-of-type(1):focus ~ label:nth-of-type(1){font-size:10px;top:-5px} .ContactForm input[type='text']:nth-of-type(2):valid ~ label:nth-of-type(2),.ContactForm input[type='text']:nth-of-type(2):focus ~ label:nth-of-type(2){font-size:10px;top:50px} .ContactForm textarea:valid ~ label:nth-of-type(3),.ContactForm textarea:focus ~ label:nth-of-type(3){font-size:10px;top:105px} .ContactForm input[type='text']:valid + i + label,.ContactForm textarea:valid + i + label{color:$(keycolor)!important} .ContactForm input[type='button']{outline:0;border:0;border-radius:2px;background-color:$(keycolor);font-family:inherit;font-weight:700;font-size:18px;padding:10px 20px;float:$endSide;cursor:pointer;color:$(grad.color)} .ContactForm input[type='button']:hover{padding:10px 30px} .ContactForm input[type='text']:valid+i,.ContactForm textarea:valid+i{color:$(keycolor)!important} aside .contact-state{float:$startSide;color:$(aside.text)} footer .contact-state{float:$startSide;color:$(footer.text)} .contact-state img{float:$startSide;line-height:90px;margin-$endSide:10px} .contact-state p{line-height:11px} body .ContactForm input[type='text']:valid,body .ContactForm textarea:valid{border-bottom:2px solid $(keycolor)!important} /* ------ Feed ------ */ .Feed li{list-style:square;margin-$startSide:20px;padding-bottom:5px;margin-top:5px;border-bottom:1px solid} .Feed li:hover{color:$(keycolor);border-color:$(keycolor)} aside .Feed li{color:$(aside.text);border-color:$(aside.line)} footer .Feed li{color:$(footer.text);border-color:$(footer.line)} .Feed .item-title a{font-weight:700;display:block} aside .Feed .item-title a{color:$(aside.link)} footer .Feed .item-title a{color:$(footer.link)} .Feed .item-title a:hover{color:$(keycolor)} aside .Feed .item-date{color:$(aside.text)} footer .Feed .item-date{color:$(aside.text)} aside .Feed .item-author{color:$(aside.text)} footer .Feed .item-author{color:$(footer.text)} /* ------ Profile ------ */ .Profile .profile-img{float:$startSide;width:72px;height:72px;margin-$endSide:15px} .Profile a.profile-link.g-profile{display:block;font-weight:700;font-size:16px;margin-bottom:5px} aside .Profile a.profile-link.g-profile{color:$(aside.link)} footer .Profile a.profile-link.g-profile{color:$(footer.link)} .Profile .widget-content.individual a.profile-link:not([data-onload]){font-size:12px;width:100%;margin:10px auto 0;display:block;text-align:center;border-radius:2px;padding:5px 10px;line-height:20px;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)} .Profile .widget-content.individual dl.profile-datablock{margin-bottom:0} .Profile .team-member .profile-img{width:50px;height:50px} .Profile .widget-content.team li{clear:both;margin-bottom:5px;display:block;overflow:hidden;padding-bottom:5px;border-bottom:1px solid} aside .Profile .widget-content.team li{border-color:$(aside.line)} footer .Profile .widget-content.team li{border-color:$(footer.line)} .Profile .widget-content.team li:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none} aside .profile-textblock, aside .profile-data{color:$(aside.text)} footer .profile-textblock, footer .profile-data{color:$(footer.text)} /* ------ [GAL] Widget ------ */ .gallery-widget a{float:$startSide;border-radius:1px;overflow:hidden;opacity:.9} .gallery-widget.gal-1 a{width:100%;margin-bottom:15px} .gallery-widget.gal-2 a{width:47.5%;margin-$endSide:5%;margin-bottom:15px} .gallery-widget.gal-3 a{width:30%;margin-$endSide:5%;margin-bottom:15px} .gallery-widget.gal-4 a{width:22%;margin-$endSide:4%;margin-bottom:12px} .gallery-widget.gal-2 a:nth-of-type(2n),.gallery-widget.gal-3 a:nth-of-type(3n),.gallery-widget.gal-4 a:nth-of-type(4n){margin-$endSide:0} .gallery-widget{overflow:hidden} .gallery-widget a:hover{opacity:1} .gallery-widget a img{display:block;width:100%;height:100%} /* ------ [SOC] Widget ------ */ .social-widget{overflow:hidden;padding:$(main.padding);border:1px solid;list-style:none} aside .social-widget{border-color:$(aside.line)} footer .social-widget{border-color:$(footer.line)} .social-widget ul{display:flex;flex-wrap:wrap;justify-content:center} .social-widget li{width:24%;margin:0 0.5%;max-width:70px;min-width:65px} .social-widget li i,.social-widget li svg{text-align:center;display:block;width:80%;height:55px;line-height:55px;margin:auto;color:#FFF;font-size:24px;border-radius:100%;-webkit-transform:translate(0,9px);-ms-transform:translate(0,9px);transform:translate(0,9px)} .social-widget li svg{padding:16px;fill:#FFF} .social-widget li:hover i,.social-widget li:hover svg{-webkit-transform:translate(0);-ms-transform:translate(0)} .social-widget li div{padding:5px 7px;margin-bottom:15px;border-radius:10px;font-size:11px;text-align:center;position:relative} .social-widget li:nth-of-type(n+5) div{margin-bottom:0} aside .social-widget li div{background-color:$(aside.line);color:$(aside.link)} footer .social-widget li div{background-color:$(footer.line);color:$(footer.link)} .social-widget li div:after{content:"";display:block;border-width:5px;border-style:solid;position:absolute;top:-10px;$endSide:44%} aside .social-widget li div:after{border-color:transparent transparent $(aside.line)} footer .social-widget li div:after{border-color:transparent transparent $(footer.line)} /* ------ [ACC] Widget ------ */ .acc-head{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));padding:10px 15px;margin-bottom:3px;color:$(grad.color);font-weight:bold;font-size:14px;cursor:pointer;border-radius:5px;padding-$endSide:40px;position:relative} .acc-head:after{content:"\f078";font-family:fontawesome;font-weight:normal;position:absolute;$endSide:20px;top:10px;font-size:12px} .acc-head.open:after{content:"\f077"} .acc-body{padding:$(main.padding);margin-bottom:5px;text-align:justify;border-radius:5px;overflow:hidden;display:none} aside .acc-body{background-color:$(aside.line);color:$(aside.text)} footer .acc-body{background-color:$(footer.line);color:$(footer.text)} .accordion-widget > .acc-body:nth-of-type(2){display:block} /* ------ Recent Comments Widget ------ */ .recent-comments{overflow:hidden} .recent-comments .comment{margin-bottom:15px;padding-bottom:15px;overflow:hidden} aside .recent-comments .comment{border-bottom:1px solid $(aside.line)} footer .recent-comments .comment{border-bottom:1px solid $(footer.line)} .recent-comments .comment:last-child{margin-bottom:0;border-bottom:0} .comments-img-wrap{float:$startSide;width:50px;height:50px;border-radius:100px;margin-$endSide:15px;overflow:hidden} aside .comments-img-wrap{border:3px solid $(aside.line)} footer .comments-img-wrap{border:3px solid $(footer.line)} .recent-comments .comment .comm{float:$startSide;width:calc(100% - 65px)} .recent-comments .comment .comm-author{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;float:$startSide;height:21px;margin-$endSide:10px;overflow:hidden} aside .recent-comments .comment .comm-author{color:$(aside.text)} footer .recent-comments .comment .comm-author{color:$(footer.text)} .recent-comments .comment .comm-author:hover{text-decoration:underline} .recent-comments .comment .details{float:$endSide;overflow:hidden} .recent-comments .comment .details span{margin-$endSide:0;font-size:9.5px} .recent-comments .comment p{text-align:$startSide;width:100%;margin:0 0 2px;font-size:10px;line-height:1.8em;overflow:hidden;font-weight:700} aside .recent-comments .comment p{color:$(aside.link)} footer .recent-comments .comment p{color:$(footer.link)} aside .recent-comments .comment .leave-comm{color:$(aside.link)} footer .recent-comments .comment .leave-comm{color:$(footer.text)} .recent-comments .comment .leave-comm{display:block;padding-$startSide:15px;overflow:hidden;font-size:10px;position:relative} .recent-comments .comment .leave-comm:before{color:$(step.color);content:"\f086";font-family:FontAwesome;position:absolute;top:0;$startSide:0} .recent-comments .comment .leave-comm:hover{text-decoration:underline;color:$(step.color)} .attachment:before{font-family:fontawesome;font-weight:400;font-size:14px;vertical-align:top;display:inline-block} .attachment.att-pic:before{content:"\f03e"} .attachment.att-vid:before{content:"\f16a"} .attachment{margin:0 5px;color:$(keycolor);white-space:nowrap} /* ------ Costom Posts Widget [ Slider ] ------ */ .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut} .CusWidget .author-prof{top:15px} .CusWidget .post-date{top:40px} .CusWidget .caption h3{font-size:18px;margin:0;clear:both;line-height:1.5em} .CusWidget .slider-carousel .item{width:100%} .CusWidget .slider-carousel .img-wrap{width:100%;height:230px} .vCar-screen{overflow:hidden} .vCar-wrapper{position:relative;top:0} .CusWidget .v-carousel{position:relative} .CusWidget .v-carousel .item{overflow:hidden;position:relative} .CusWidget .v-carousel .img-wrap{width:100%;height:200px} aside .CusWidget .v-carousel{border:1px solid $(aside.line);padding:$(main.padding)} .CusWidget button{position:absolute;top:-55px;border-radius:0;width:30px;height:30px;text-align:center;border:none;cursor:pointer;transition:0s} aside .CusWidget button{background-color:$(aside.line);color:$(aside.text)} footer .CusWidget button{background-color:$(footer.line);color:$(footer.text)} .CusWidget button:hover{color:$(grad.color);background:-webkit-gradient(linear,left,from($(keycolor)),to($(step.color)));background:linear-gradient(to left,$(keycolor),$(step.color))} .CusWidget button.splide__arrow--next{$endSide:0} .CusWidget button.splide__arrow--prev{$endSide:35px} .CusWidget button svg{width:15px;position:static;float:none;display:block;margin:0 auto;transition:0s;pointer-events:none} /* ------ Featured Post ------ */ .FeaturedPost h3{margin:0 0 5px 0;line-height:1.5em;font-size:18px} .FeaturedPost .item-thumbnail,.FeaturedPost .item-thumbnail img{display:block;text-align:center;margin:0 auto;width:100%} .FeaturedPost .item-thumbnail{min-height:150px;overflow:hidden;margin-bottom:5px} .FeaturedPost .item-thumbnail.NoImage{min-height:180px} aside .FeaturedPost h3{color:$(aside.link)} footer .FeaturedPost h3{color:$(footer.link)} .widget.FeaturedPost h3:hover{color:$(keycolor)} aside .FeaturedPost p{color:$(aside.text)} footer .FeaturedPost p{color:$(footer.text)} /* ------ Costom Posts Widget [ Thumbs ] ------ */ aside .rand-content{padding:$(main.padding);border:1px solid $(aside.line)} .rand-content div{padding-bottom:10px;margin-bottom:10px;overflow:hidden} aside .rand-content > div{border-bottom:1px solid $(aside.line)} footer .rand-content > div{border-bottom:1px solid $(footer.line)} .rand-content .img-wrap{border-radius:2px;float:$startSide;height:72px;width:90px;margin-$endSide:15px} aside .rand-content div:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none} .rand-content h3{margin:0;font-size:16px;line-height:1.5em} aside .rand-content h3 a{color:$(aside.link)} footer .rand-content h3 a{color:$(footer.link)} .rand-content h3 a:hover{color:$(keycolor)} .rand-content .details > *{line-height:1.5em;font-size:10px;display:inline-block;vertical-align:middle;padding:8px 0;} /*================= >Pages (Common) ===================*/ /* ------ Pagination ------ */ #Pagination{margin-top:15px;text-align:center;clear:both;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} #Pagination span{color:$(home.cate.text);width:35px;height:35px;line-height:35px;background-color:$(home.cate.line);border-radius:100%;display:inline-block;text-align:center;margin:0 4px;cursor:pointer} #Pagination span.hid-num{display:none} #Pagination span,#Pagination a{-webkit-transition:none;transition:none} #Pagination a:hover,#Pagination span:hover,#Pagination .curr{color:$(grad.color)!important;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)} .nums{width:351px;overflow:hidden;max-width:calc(100% - 90px);margin:0 auto;display:inline-block;height:35px} #Pagination a{height:35px;width:35px;background-color:$(home.cate.line);color:$(home.cate.text);display:inline-block;vertical-align:top;line-height:35px;font-size:20px;cursor:pointer;margin:0 2px;border-radius:100%} #Pagination > a{font-family:fontawesome} .rtl .pg-prev:before, .ltr .pg-next:before{content:"\f101"} .rtl .pg-next:before, .ltr .pg-prev:before{content:"\f100"} .static-page .entry-title{line-height:1.35;} /*================= >Homepage ===================*/ /* ------ Category Error ------ */ .temp-error{text-align:center} .temp-error b{background-color:#d00;display:inline-block;color:#FFF;margin:0 auto 10px;padding:3px 10px;border-radius:2px;text-align:center} .temp-error span{display:block;clear:both;color:$(home.cate.text);text-align:center;line-height:2em} .temp-error i{font-weight:700;font-style:inherit;background-color:#eee;padding:0 10px;border-radius:100px} /* ------ Common ------ */ .cate .headline{display:none} .home-cate{margin-bottom:$(main.margin);clear:both} .home-cate .widget-content{padding:$(main.padding);border:1px solid $(home.cate.line);overflow:hidden} .cate-link{margin:0;font-size:17px;overflow:hidden;max-height:45px} .cate-link a{color:$(home.cate.link);line-height:1.3em} .cate-link a:hover{color:$(keycolor)} .cate-snippet{font-size:14px;color:$(home.cate.text);line-height:1.7em;margin:5px 0} .home-cate .details{margin-top:5px;line-height:1em} .cate-carousel .Item{padding:0 10px;width:25%} .home-cate .Item{overflow:hidden} .details > *{display:inline-block;vertical-align:middle;font-size:11px} .details > * i{color:$(keycolor);margin-$endSide:5px} .details > *:first-child{margin-$endSide:10px} .details a:hover{text-decoration:underline;color:$(keycolor)} .details > *{color:$(home.cate.text)} aside .details > *{color:$(aside.text)} footer .details > *{color:$(footer.text);vertical-align:middle;} .img-wrap:before{content:"\f0f6";font-size:20px;position:absolute;top:50%;$startSide:50%;margin-$startSide:-25px;margin-top:-25px;font-family:fontawesome;color:$(grad.color);line-height:51px;width:50px;height:50px;text-align:center;z-index:1;-webkit-transform:scale(0);transform:scale(0);opacity:0} .img-wrap:after{content:"";border-radius:100px;font-size:20px;border:4px solid $(grad.color);position:absolute;top:50%;$startSide:50%;margin-$startSide:-25px;margin-top:-25px;width:50px;height:50px;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0} .img-wrap:hover:before,.img-wrap:hover:after{-webkit-transform:scale(1);transform:scale(1);opacity:1} /* ------ Section Type :Sided ------ */ .two-cols .section{width:calc((100% - 15px)/3);float:$startSide} .two-cols .section.wide-right{width:calc((100% - 15px) / 3 * 2);margin-$endSide:15px} .two-cols .section.wide-left{width:calc(((100% - 15px) / 3) * 2);margin-$startSide:15px} .two-cols.no-wide .section{width:calc((100% - 15px) / 2)} .two-cols.no-wide .section:first-child{margin-$endSide:15px} .three-cols .section{width:calc((100% - 30px)/3);float:$startSide} .three-cols .section:nth-of-type(2){margin-$endSide:15px;margin-$startSide:14px} .cate-sided .Item:first-of-type{padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid $(home.cate.line)} .cate-sided .Item:first-of-type .img-wrap{width:100%;height:200px} .cate-sided .Item:first-of-type .cate-link{margin-top:10px} .cate-sided .Item:first-of-type .cate-snippet{margin:10px 0} .cate-sided .Item:nth-of-type(n+2){max-height:86px;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid $(home.cate.line)} .cate-sided .Item:nth-of-type(n+2) .img-wrap{float:$startSide;width:90px;height:70px;margin-$endSide:15px} .cate-sided .Item:last-of-type{margin-bottom:0;border-bottom:none;padding-bottom:0} .cate-sided .Item:nth-of-type(n+2) .img-wrap:after,.cate-sided .Item:nth-of-type(n+2) .img-wrap:before{display:none} /* ------ Section Type :Cover ------ */ .cate-cover .free-width .Item:first-of-type .img-wrap{float:$startSide;width:300px;height:180px;margin-$endSide:15px} .cate-cover .tight-width .Item:first-of-type .img-wrap{display:block;height:200px;margin-bottom:15px} .cate-cover .Item:first-of-type .cate-snippet{margin:10px 0} .cate-cover .free-width .Item:nth-of-type(n+2){float:$startSide;width:49%} .cate-cover .free-width .Item:nth-of-type(n+2):nth-of-type(even){margin-$endSide:2%} .cate-cover .Item:nth-of-type(n+2){margin-top:15px;padding-top:15px;border-top:1px solid $(home.cate.line)} .cate-cover .Item:nth-of-type(n+2) .img-wrap{float:$startSide;width:90px;height:70px;margin-$endSide:15px} .cate-cover .Item:nth-of-type(n+2) .img-wrap:after, .cate-cover .Item:nth-of-type(n+2) .img-wrap:before{display:none} /* ------ Section Type :Video ------ */ .cate-video .Item{float:$startSide} .cate-video .cate-link{max-height:63px} .cate-video .Item{margin-top:15px;padding-top:15px;border-top:1px solid $(home.cate.line)} .cate-video .Item:nth-of-type(-n+3){margin-top:0;padding-top:0;border-top:none} .cate-video .Item:nth-of-type(3n-1){margin-$startSide:1%;margin-$endSide:1%} .cate-video .free-width .Item{width:32.6666%} .cate-video .tight-width .Item{width:100%;margin:0;margin-bottom:15px} .cate-video .img-wrap{float:$startSide;width:170px;height:120px;margin-$endSide:15px;position:relative} .cate-video canvas{position:absolute;top:50%;z-index:5;margin-top:-25px;$startSide:50%;margin-$startSide:-25px;opacity:0} .cate-video .img-wrap i{content:"\f04b";font-family:fontawesome;position:absolute;top:50%;right:50%;color:#FFF;font-size:24px;margin-top:-9px;margin-right:-12px;-webkit-transform:scale(0);transform:scale(0);text-shadow:0 0 3px rgba(0,0,0,0.5);-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;line-height:18px} .cate-video .img-wrap:hover i{-webkit-transform:scale(1);transform:scale(1)} .cate-video .img-wrap:hover canvas{opacity:1} .cate-video .img-wrap:after,.cate-video .img-wrap:before{display:none} /* ------ Section Type :Slideshow ------ */ .slideshow-thumbnail{position:relative} .free-width .slideshow-thumbnail{float:$startSide;width:65.188%;height:350px;margin-$endSide:1.5%} .tight-width .slideshow-thumbnail{width:100%;height:200px;margin-bottom:15px} .slideshow-thumbnail .splide__list, .slideshow-thumbnail .splide__track,.slideshow-thumbnail .img-wrap{width:100%!important;height:100%!important} .cate-slideshow .Item{height:62px;margin-bottom:10px;padding:10px;background-color:$(home.cate.line);border-radius:2px;cursor:pointer;position:relative;color:$(home.cate.text)} .cate-slideshow .Item:last-of-type{margin-bottom:0} .cate-slideshow .free-width .slideshow-thumbs{float:left;width:33.31%} .cate-slideshow .tight-width .Item{height:auto} .cate-slideshow .Item h3{pointer-events:none;color:inherit} .cate-slideshow .Item a{font-size:14px;font-weight:700;color:inherit;transition:none} .cate-slideshow .Item.is-active{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color))} .cate-slideshow .Item.is-active a{color:$(grad.color)!important} .cate-slideshow .Item.is-active:after{content:"";display:block;border-width:8px;border-style:solid;border-color:transparent transparent transparent $(step.color);position:absolute;top:9px;$startSide:-15px} .s-progress{background:-webkit-gradient(linear,left,from(#d24949),to(#9e44c9));background:linear-gradient(to left,#d24949,#9e44c9);width:0;height:3px;position:absolute;top:0;right:0;z-index:5;width:0%} /* ------ Section Type :Carousel ------ */ .cate-carousel .widget-content{overflow:visible;padding:$(main.padding) -webkit-calc($(main.padding)/2);padding:$(main.padding) -moz-calc($(main.padding)/2);padding:$(main.padding) calc($(main.padding)/2)} .cate-carousel .img-wrap{width:100%;height:200px} .cate-carousel .cate-link{font-size:14px;max-height:42px;margin:10px 0 0;overflow:hidden} .cate-carousel .label-name{position:absolute;bottom:20px;$startSide:20px} .cate-carousel .splide__pagination{text-align:center;clear:both;margin-top:10px} .cate-carousel .splide__pagination li{;display:inline-block;vertical-align:middle;margin:0 2px} .cate-carousel .splide__pagination__page{width:10px;height:10px;background-color:$(home.cate.line);border-radius:10px;border:none;padding:0;cursor:pointer} .cate-carousel .splide__pagination__page.is-active{background-color:$(keycolor)!important;width:15px} .cate-carousel .splide__arrows{position:absolute;top:-51px;$endSide:100px;position:absolute} .cate-carousel .splide__arrows button{position:relative;border-radius:0;width:28px;height:28px;text-align:center;border:none;cursor:pointer;transition:0s;color:$(home.cate.text)} .cate-carousel .splide__arrows button:hover{color:$(grad.color)!important;background:-webkit-gradient(linear,left,from($(keycolor)),to($(step.color)));background:linear-gradient(to left,$(keycolor),$(step.color))} .cate-carousel .splide__arrows button.splide__arrow--next{$endSide:0} .cate-carousel .splide__arrows button.splide__arrow--prev{$endSide:5px} .cate-carousel .splide__arrows button svg{fill:currentColor;width:15px;position:static;float:none;display:block;margin:0 auto;transition:0s;pointer-events:none} /* ------ Recent Posts Widget ------ */ .index-posts .status a{float:$endSide;margin:0} .index-posts .img-wrap{float:$startSide;width:300px;height:180px;margin-$endSide:15px} .index-posts h3{margin:0 0 10px 0} .index-posts .post-outer{padding-bottom:20px;border-bottom:1px solid $(home.cate.line);margin-bottom:20px;overflow:hidden} .status-msg-body{border:1px solid $(home.cate.line);margin-bottom:20px;padding:$(main.padding);color:$(home.cate.text)} .status-msg-body a{color:$(keycolor);margin-$endSide:10px} .status-msg-body b{color:$(home.cate.text)} .status-msg-body a:hover{text-decoration:underline} /* ------ Index Ad ------ */ #HTML505{margin-bottom:20px} .Blog #HTML505{border-bottom:1px solid $(home.cate.line);padding-bottom:20px} /*================= >Post Page ===================*/ .item-page header{margin-bottom:$(main.margin)} .post-body,.post-body p{font-size:15px;color:$(post.text);line-height:2em} /* ------ Post Elements ------ */ .post-body h3,.post-body h2,.post-body h4{background-color:#f7f7f7;padding:10px 20px;color:$(post.headline);display:block;margin:5px 0 15px;border-bottom:3px solid #ddd;border-$startSide: 3px solid $(keycolor);box-shadow: 0 3px 6px rgba(0,0,0,0.05);} .post-body img{width:auto;height:auto;display:inline;max-width:100%} .post-body img[data-src]{height:60vh;display:inline-block;width:100%;background-color:#000000;opacity:0.05} .separator a{display:block} .post-body br{content:'';margin:15px;display:block} .post-body iframe{max-width:100%} .post-body a{cursor:pointer} .post-body a.d-link{text-decoration:none;color:#2465ef;cursor:pointer;font-weight:bold;} .post-body a.d-link:hover{-webkit-box-shadow:0 -5px 0px inset #2465ef50;box-shadow:0 -5px 0px inset #2465ef50;color:$(post.text)!important} .post-body *:not(.fa){font-family:'Cairo',sans-serif!important} .post-body ol li{padding:8px 30px;margin-$startSide:15px;margin-bottom:15px;list-style:none;-webkit-box-shadow:0 2px 3px #ddd;box-shadow:0 2px 3px #ddd;font-size:17px;position:relative} .post-body ol li:before{content:counter(li);counter-increment:ol li;background-color:$(keycolor);width:30px;height:30px;text-align:center;line-height:30px;margin-$endSide:15px;color:#FFF;border-radius:100%;font-size:17px;position:absolute;$startSide:-15px} .post-body ol{counter-reset:li;padding-$startSide:0} .post-body ol li:hover:after,.post-body ol li:hover:before{background-color:$(step.color)} .post-body ol li:after{content:'';width:10px;height:100%;background-color:$(keycolor);position:absolute;top:0;$endSide:0} .post-body ol li a{text-decoration:none} .post-body ul{list-style-type:disc;padding-$startSide:40px} .post-body li{color:$(post.text);padding-$startSide:10px} .post-body ul li a{text-decoration:none} /* ------ TOC ------ */ #TOC{margin:0 5px 30px;border-bottom:1px solid $(post.line);padding-bottom:20px} #TOC:empty{display:none} #TOC > span{background-color:$(post.line);display:block;padding:10px 20px;font-weight:bold;font-size:16px;margin-bottom:10px;color:$(post.headline)} #TOC li a{background-color:$(post.line);display:inline-block;margin-bottom:10px;padding-top:2px;padding-bottom:2px;padding-$startSide:0;padding-$endSide:20px;color:$(post.text);font-weight:700;font-size:14px;border-radius:5px;} #TOC li a:before{font-family:fontawesome;background-color:rgba(0,0,0,0.1);height:25px;width:25px;float:$startSide;margin:-2px 0;text-align:center;padding-top:3px;margin-$endSide:15px;color:$(post.text);font-size:12px;font-weight:400;-webkit-transition:font-size 0.1s,background-color .3s;transition:font-size 0.1s,background-color .3s} .rtl #TOC li a:before{content:"\f060"} .ltr #TOC li a:before{content:"\f061"} #TOC li[data-tag="h3"]{margin-$startSide:30px} #TOC li[data-tag="h4"]{margin-$startSide:60px} #TOC li a:hover:before{background-color:$(keycolor);color:$(grad.color);font-size:14px} /* ------ See Also ------ */ .see-also{border:1.5px solid $(post.line);padding:20px;border-radius:10px;margin:50px 0;text-align:$startSide;} .see-also strong{background-color:$(keycolor);color:$(grad.color);padding:3px 20px;margin-top:-40px;float:$startSide;border-radius:100px;font-size:16px;line-height:2em} .see-also ul{padding-$startSide:0;list-style:none} .see-also li{border-bottom:0.5px solid $(post.line);padding:7px 0;display:flex;align-items:center} .see-also li:last-of-type{border-bottom:none;padding-bottom:0} .see-also li a{font-weight:700;color:$(post.link.color);font-size:14px} .see-also li a:hover{color:$(keycolor)} .see-also li:before{font-family:fontAwesome;margin-$endSide:15px;content:"\f06d";font-size:15px;color:$(keycolor)} /* ------ Ads ------ */ .article-ad:empty{display:none} .article-ad{margin:20px auto;text-align:center} .str-ad{margin-top:0} .end-ad{margin-bottom:0} .Middle-Ad.fixedAd{text-align:center;margin:15px} .Middle-Ad:not(.fixedAd){clear:both;text-align:center} .Middle-Ad:not(.fixedAd):not(:empty){margin:20px 0} /* ------ Full Width ------ */ .fullwidth-topic{padding:$(main.padding);margin-top:35px;border:1px solid $(home.cate.line)} /* ------ Post Title ------ */ .topic-title{margin:0;padding:15px;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));border-radius:4px;position:relative;-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.2);box-shadow:0 3px 5px 0 rgba(0,0,0,0.2);font-size:24px;color:#fff;text-align:center;line-height:1.3em;text-shadow:1px 1px 2px rgba(0,0,0,0.5)} /* ------ Post Tools ------ */ article .topic-tools{display:inline-block;vertical-align:top;padding:5px 15px;background-color:$(post.nav.back);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px} /* ------ Zoom ------ */ .zooming{text-align:center;width:110px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .zooming span{color:$(post.nav.color);margin:0 2px;display:inline-block;vertical-align:top;font-size:12px} .zooming i{color:$(post.nav.color);border:2px solid $(keycolor);width:20px;display:inline-block;text-align:center;height:20px;-webkit-border-radius:100px;border-radius:100px;vertical-align:top;padding-top:3px;font-size:11px;cursor:pointer} .zooming i:hover{color:$(keycolor);border:2px solid $(keycolor)} .zooming i.disb{color:$(post.nav.line);border:2px solid $(post.nav.line);cursor:not-allowed} /* ------ Post Detils ------ */ .topic-details{margin:0 5%;font-size:0;width:calc(80% - 105px)} .topic-details > *{margin-$endSide:10px;color:$(post.nav.color);display:inline-block;vertical-align:top;margin-$endSide:15px;font-size:12px} .topic-details i{margin-$endSide:5px;color:$(keycolor);width:12px;height:12px;display:inline-block} .topic-details a:hover{color:$(keycolor);text-decoration:underline} .topic-details .categ{position:relative;margin-$endSide:0} .topic-details .categ a:first-of-type{position:relative} .topic-details .categ a{display:inline-block;vertical-align:middle;margin-$endSide:5px} .rtl .topic-details .categ a:first-of-type:after{content:"\f100"} .ltr .topic-details .categ a:first-of-type:after{content:"\f101"} .topic-details .categ a:first-of-type:after{line-height:12px;font-family:FontAwesome;font-size:12px;color:$(post.nav.line);display:inline-block;vertical-align:middle;margin-$startSide:5px} .topic-details .categ a:last-of-type{margin-$endSide:0} .topic{color:$(home.cate.text);padding:$(main.padding);margin:15px auto 0;overflow:hidden;text-align:justify;line-height:2.2;border:1px solid $(home.cate.line);margin-bottom:$(main.margin)} /* ------ Post Blockquote ------ */ .post-body blockquote{width:90%;clear:both;-webkit-print-color-adjust:exact;padding:10px 30px;margin:15px auto;line-height:2;text-indent:15px;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);border-radius:5px;position:relative} .rtl .post-body blockquote:before,.ltr .post-body blockquote:after{content:"\f10e"} .ltr .post-body blockquote:before,.rtl .post-body blockquote:after{content:"\f10d"} .post-body blockquote:before{top:0;$startSide:-4px} .post-body blockquote:before,blockquote:after{font-family:FontAwesome;font-size:20px;color:$(main.back);position:absolute} .post-body blockquote:after{bottom:0;$endSide:15px} .quote-share a{background:$(main.back);color:$(step.color);text-align:center;display:inline-block;width:35px;height:35px;text-indent:0;border-radius:100%;border:2px solid $(step.color);font-size:16px;margin:0 5px} .quote-share a:hover{-webkit-transform:rotate(360deg);transform:rotate(360deg)} .quote-share{position:absolute;$endSide:50px;bottom:-17px} /* ------ Post Pagination ----- */ .post-pages{position:relative;clear:both;overflow:hidden;margin-top:15px} .post-pages:before{content:"";background-color:$(home.cate.line);height:5px;position:absolute;width:100%;top:15px} a.next-page,a.prev-page{z-index:1;background-color:$(main.back);position:relative;border:2px solid $(keycolor);border-radius:100px;color:$(keycolor)} a.next-page:hover,a.prev-page:hover{border:2px solid $(step.color);color:$(step.color)} a.next-page:hover:before,a.prev-page:hover:before{background-color:$(step.color)} .rtl a.prev-page{margin-right:10px;-webkit-box-shadow:10px 0 0, -20px 0 0 #FFF;box-shadow:10px 0 0, -20px 0 0 #FFF;float:$startSide;padding:5px 10px 5px 15px} .ltr a.prev-page{margin-left:10px;-webkit-box-shadow:-10px 0 0, 20px 0 0 #FFF;box-shadow:-10px 0 0, 20px 0 0 #FFF;float:$startSide;padding:5px 10px 5px 15px} .rtl a.next-page{margin-left:10px;-webkit-box-shadow:-10px 0 0, 20px 0 0 #FFF;box-shadow:-10px 0 0, 20px 0 0 #FFF;float:$endSide;padding:5px 15px 5px 10px} .ltr a.next-page{margin-right:10px;-webkit-box-shadow:10px 0 0, -20px 0 0 #FFF;box-shadow:10px 0 0, -20px 0 0 #FFF;float:$endSide;padding:5px 15px 5px 10px} a.next-page:before,a.prev-page:before{font-family:fontawesome;background-color:$(keycolor);width:21px;height:21px;border-radius:100px;text-align:center;color:$(grad.color);font-size:16px} .rtl a.next-page:before{content:"\f104"} .rtl a.prev-page:before{content:"\f105"} .ltr a.next-page:before{content:"\f105"} .ltr a.prev-page:before{content:"\f104"} a.next-page:before{float:$endSide;margin-$startSide:10px} a.prev-page:before{float:$startSide;margin-$endSide:10px} /* ------ Edit Post Button ------ */ .edit-post a:before{content:"\f040";font-family:fontawesome;display:inline-block;font-weight:normal;margin-$endSide:10px} .edit-post a{display:block;width:120px;text-align:center;padding:10px 0;border-radius:100px;font-weight:bold;background-color:$(step.color);margin:20px auto 0;color:$(main.back)} .edit-post a:hover{width:130px;background-color:$(keycolor)} /* ------ Post Share ------ */ .topic-share .social{display:block;width:100%;margin-$startSide:0;padding-top:$(main.margin);border-top:1px solid $(home.cate.line);text-align:center;position:static;top:auto;$startSide:auto;z-index:1;font-size:0;margin-top:$(main.margin)} .topic-share .social li{display:inline-block;vertical-align:top;min-width:110px;margin:0 5px 5px 0;padding:0} .topic-share .social li a:hover{-webkit-box-shadow:0 90px 75px 1px rgba(255,255,255,0.0) inset,0 3px 5px -2px rgba(0,0,0,0.3);box-shadow:0 90px 75px 1px rgba(255,255,255,0.0) inset,0 3px 5px -2px rgba(0,0,0,0.3);-webkit-animation:Share .2s ease-in-out;animation:Share .2s ease-in-out} @-webkit-keyframes Share{ 50%{-webkit-transform:scaleX(0.9);transform:scaleX(0.9)} 100%{-webkit-transform:scaleX(1.1);transform:scaleX(1.1)} } @keyframes Share{ 50%{-webkit-transform:scaleX(0.9);transform:scaleX(0.9)} 100%{-webkit-transform:scaleX(1.1);transform:scaleX(1.1)} } .topic-share .social li a{display:block;padding:5px 6px;font-size:13px;font-family:inherit;color:#FFF;-webkit-box-shadow:0 90px 75px 1px rgba(255,255,255,0.1) inset;box-shadow:0 90px 75px 1px rgba(255,255,255,0.1) inset;border-radius:100px;text-align:$startSide;height:40px;overflow:hidden} .topic-share .social li a:before{font-size:16px;font-family:fontawesome;display:inline-block;vertical-align:-2px;margin-$endSide:8px;background-color:rgba(0,0,0,0.2);width:30px;height:30px;text-align:center;border-radius:100px;padding-top:8px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;float:$startSide} .topic-share .social li a:hover span:first-of-type{margin-top:2px} .topic-share .social li a span:first-of-type{float:$startSide;margin-$endSide:5px;margin-top:8px;font-weight:bolder;-webkit-transition-delay:.2s;transition-delay:.2s} .topic-share .social li a:hover span:last-of-type{margin-top:-11px} .topic-share .social li a span:last-of-type{font-size:10px;color:rgba(255,255,255,0.5);display:block;clear:both;float:$startSide;margin-$startSide:38px;margin-top:6px;-webkit-transition-delay:.2s;transition-delay:.2s} .topic-share .social li a:hover:before{background-color:#FFF;-webkit-animation:Share2 .2s ease-in-out;animation:Share2 .2s ease-in-out} @-webkit-keyframes Share2{ 50%{-webkit-transform:scale(0.8);transform:scale(0.8)} 100%{-webkit-transform:scale(1.3);transform:scale(1.3)} } @keyframes Share2{ 50%{-webkit-transform:scale(0.8);transform:scale(0.8)} 100%{-webkit-transform:scale(1.3);transform:scale(1.3)} } .topic-share .social li a.fa-envelope:before{font-size:14px} .topic-share .social li a.fa-facebook{background-color:#3b5998} .topic-share .social li a.fa-twitter{background-color:#1da1f2} .topic-share .social li a.fa-pinterest-p{background-color:#cc2127} .topic-share .social li a.fa-google-plus{background-color:#dd4b39} .topic-share .social li a.fa-phone{background-color:#189d0e} .topic-share .social li a.fa-envelope{background-color:#7954ad} .topic-share .social li a.fa-print{background-color:#555555} .topic-share .social li a.fa-facebook:hover:before{color:#3b5998} .topic-share .social li a.fa-twitter:hover:before{color:#1da1f2} .topic-share .social li a.fa-pinterest-p:hover:before{color:#cc2127} .topic-share .social li a.fa-linkedin:hover:before{color:#2384bc} .topic-share .social li a.fa-whatsapp:hover:before{color:#189d0e} .topic-share .social li a.fa-envelope:hover:before{color:#7954ad} .topic-share .social li a.fa-print:hover:before{color:#555555} /* ------ Post Reactions ------ */ .reaction-buttons{border-top:1px solid $(home.cate.line);display:block;margin:$(main.margin) 0 0;padding-top:$(main.margin)} .reactions-label{display:inline-block;vertical-align:top;font-weight:700;color:$(home.cate.text)} iframe.reactions-iframe{height:20px;display:inline-block;vertical-align:sub} #FancyAllItems *{-moz-transition:none;-webkit-transition:none;transition:none} /* ------ Topic Author ------ */ .topic-author{display:none;margin-top:$(main.margin);width:100%;margin-$endSide:0;padding:$(main.padding);overflow:hidden;border:1px solid $(home.cate.line);position:relative} .topic-author .author-img{float:$startSide;width:90px;height:90px;margin-$endSide:10px;border-radius:100px;overflow:hidden} .topic-author .author-img img{width:100%} .topic-author-name{display:inline-block;margin:0;font-size:15px;background:$(keycolor);color:#FFF;padding:3px 15px;border-radius:100px} b.author-rank{display:inline-block;margin:5px 0;background-color:$(step.color);font-size:11px;color:#FFF;padding:0 10px;border-radius:100px} .author-about{font-size:11px;font-weight:600;color:$(home.cate.text);text-align:justify;float:$startSide;width:calc(100% - 100px)} .topic-author .social{position:absolute;$endSide:15px;top:15px} .topic-author .social a{width:35px;height:35px;padding-top:9px;margin:0 2px;border-radius:2px;font-size:18px;display:inline-block;text-align:center;color:#FFF;vertical-align:top} .topic-author .social a svg{fill:#FFF;width:100%;height:15px} .topic-author .social a:hover{-webkit-animation:SocIcons .2s ease-in-out;animation:SocIcons .2s ease-in-out} .author-profile:before{content:"\f2bd"} .author-profile:before{font-family:fontawesome;display:inline-block;margin-$endSide:10px} .author-profile{float:$endSide;border:2px solid $(home.cate.line);color:$(home.cate.text);font-weight:700;font-size:12px;border-radius:5px;padding:5px 10px;margin-top:10px} .author-profile:hover{border:2px solid $(keycolor)!important;color:$(keycolor)!important} /* ------ Navigation ------ */ .topic-nav{margin-top:$(main.margin);display:block;padding:$(main.padding);border:1px solid $(home.cate.line)} .topic-nav-wrap{position:relative} .topic-nav-cont{overflow:hidden;font-size:0} .topic-nav-cont > a{width:50%;min-height:95px;padding:15px;text-align:center;border-radius:2px;position:relative} .topic-nav-cont > a:hover{position:static;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color))} .topic-nav .next{float:$endSide} .topic-nav .prev{float:$startSide;border-$endSide:1px solid $(home.cate.line)} .topic-nav-cont span{cursor:default;display:block;width:120px;margin:0 auto;font-size:12px;color:$(home.cate.text);position:relative;font-weight:700;padding:5px 0;border-radius:100px;background:$(home.cate.line)} .topic-nav-cont > a:hover span{background-color:#FFF;color:$(keycolor)!important} .topic-nav-cont h5{font-size:16px;margin:10px 0 0;overflow:hidden;color:$(post.text);max-height:50px;line-height:1.5em} .topic-nav-cont > a:hover h5{color:#FFF} .topic-nav .topic-img{background-color:$(main.back);opacity:0;width:49.9%;height:180px;border:10px solid $(step.color);border-radius:2px;position:absolute;bottom:150%;z-index:1} .topic-nav .topic-img img{border-radius:0;width:100%;height:100%} .topic-nav-cont > a:hover .topic-img{opacity:1;bottom:120%} .topic-nav .next .topic-img{$endSide:0} .topic-nav .prev .topic-img{$startSide:0} .topic-nav .topic-img:after{content:"";display:block;border-width:19px;border-style:solid;border-color:$(step.color) transparent transparent;position:absolute;$endSide:calc(50% - 19px);top:100%} /* ------ Related Posts ------ */ .related-carousel{padding-bottom:20px} .related-carousel .Item{width:33.3%;padding:0 7.5px} .related-carousel .item-wrap{position:relative;padding:15px;border:1px solid $(home.cate.line);border-radius:2px} .related-carousel .item-wrap:hover{-webkit-box-shadow:0 3px 8px -2px rgba(0,0,0,0.1);box-shadow:0 3px 8px -2px rgba(0,0,0,0.1)} .topic-related{margin-top:$(main.margin)} .topic-related .details{margin:10px 0 5px;display:block;border-bottom:1px solid $(home.cate.line)} .topic-related .details > *{color:$(home.cate.text)} .related-carousel .img-wrap{width:100%;height:200px} .topic-related .Item h3{font-size:14px;margin:0;overflow:hidden} .topic-related .Item h3 a{color:$(home.cate.link)} .topic-related .Item h3 a:hover{color:$(keycolor)} .related-carousel .splide__arrows{$endSide:0;top:-55px;position:absolute} .related-carousel button{position:relative;border-radius:0;width:30px;height:30px;text-align:center;border:none;cursor:pointer;transition:0s;background-color:$(home.cate.line);color:$(home.cate.text)} .related-carousel button:hover{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)} .related-carousel button.splide__arrow--next{left:0} .related-carousel button.splide__arrow--prev{left:5px} .related-carousel button svg{width:15px;position:static;float:none;display:block;margin:0 auto;transition:0s;pointer-events:none} /* ------ Topic Comments ------ */ .topic-comments{margin-top:$(main.margin)} #comment-editor{margin-top:20px} .comments-bar{display:block;overflow:hidden} .comments-bar button{height:40px;font-family:inherit;border:none;font-weight:700;float:$startSide;padding:10px 15px;margin-$endSide:10px;border-radius:2px 2px 1px 1px;background-color:$(home.cate.line);cursor:pointer;-webkit-transform:translate(0,7px);-ms-transform:translate(0,7px);text-shadow:0 2px rgba(0,0,0,.3)} .comments-bar .active{-webkit-transform:translate(0);-ms-transform:translate(0);color:#FFF} button[data-bar="face"]:hover,button[data-bar="facebook"]{background-color:#3b5998;color:#FFF} button[data-bar="disqus"]:hover,button[data-bar="disqus"]{background-color:#2e9fff;color:#FFF} button[data-bar="blogger"]:hover,button[data-bar="blogger"]{background-color:#f87850;color:#FFF} .comments-tabs{clear:both} .comments-tabs>div{background-color:$(main.back);padding:15px 0;text-align:center;border-width:4px 0;border-style:solid;overflow:hidden;display:none} .comments-tabs .default{display:block} .comments-tabs .facebook-tab{border-color:#3b5998} .comments-tabs .disqus-tab{border-color:#2e9fff} .comments-tabs .blogger-tab{border-color:#f87850;text-align:$startSide} .comments-info{margin-bottom:15px;overflow:hidden;font-size:12px} .comments-count{float:$startSide;padding:5px 0;font-size:14px;position:relative;color:$(home.cate.text)} .go-respond{float:$startSide;padding:5px 15px;margin:0 25px;background-color:$(home.cate.line);color:$(home.cate.text)} .comments-show{float:$endSide} .comments-show button{font-weight:Bold;margin-right:5px;color:$(home.cate.text);background-color:$(home.cate.line);cursor:pointer;display:inline-block;padding-top:10px;padding-$startSide:25px;padding-bottom:10px;padding-$endSide:15px;position:relative;font-family:inherit;border:none;appearance:none} .comments-show .active:before{content:"\f00c";font-family:FontAwesome;position:absolute;top:11px;$startSide:7px} .comments-show button:hover,.comments-show .active{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)!important} .comment-block{overflow:hidden} .comments-list{overflow:hidden;border:1px solid $(home.cate.line)} .comments-list ul{margin:0;padding:0;list-style:none} .comments-list .avatar-image-container{float:$startSide;width:72px;height:72px;margin-$endSide:15px;border-radius:3px} .comments-list .avatar-image-container img{width:100%;height:100%;display:block} .comments-list .comment-replies .avatar-image-container{width:40px;height:40px} .comments-list .comment-content{line-height:1.5em;margin:0;color:$(home.cate.text);font-size:14px;margin-$startSide:87px} .comments-list .comment-replies .comment-content{margin-$startSide:57px} .comments-list cite.user{font-style:normal;display:inline-block;margin:0 0 5px;font-size:13px;position:relative;font-weight:700;background-color:$(home.cate.text);color:$(home.cate.line);padding:0 15px} .comments-list cite.user.blog-author{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)} li.comment{position:relative;overflow:hidden} .comments-list > ul > li.comment{padding:15px 0;margin:0 15px;overflow:hidden;border-top:1px solid $(home.cate.line)} .comments-list > ul > li:first-of-type{border-top:none} .comments-list .comment-replies{float:$startSide;width:100%;padding-$startSide:90px} .comments-list .comment-replies li.comment{border-top:1px solid $(home.cate.line);margin-top:15px;padding-top:15px} .comments-list .comment-replies li:last-of-type{padding-bottom:0} #loadmore{float:$endSide;background-color:$(home.cate.line);margin:0 15px 15px;padding:5px 15px;color:$(home.cate.text);cursor:pointer;overflow:hidden} #loadmore:hover{box-shadow:0 3px 5px rgba(0,0,0,0.1)} .thread-toggle,.continue,.comment-replies:empty{display:none!important} .comment-content img{width:auto;width:100%;height:auto;display:block;position:relative;top:15px;margin-bottom:15px} .comment-content iframe{width:100%;height:350px;display:block;margin-bottom:30px;top:15px;position:relative} .comment-content a{color:$(keycolor);text-decoration:underline} .comment-content a:hover{color:$(step.color)} .comment-actions{position:absolute;$endSide:0;top:15px} .comment-actions span>*{float:left;color:$(home.cate.link);padding:7px 12px;background-color:$(home.cate.line);font-size:12px;position:relative;cursor:pointer;border-radius:100px;transition:0s;font-family:inherit;border:none;margin:0;line-height:1.5em;margin-$startSide:5px} .comment-actions span>*:hover{background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color)!important} .comment-actions span>*:before{font:normal normal normal 14px FontAwesome;display:inline-block;vertical-align:-2px;margin-$endSide:5px} .comment-actions span>button:before{content:"\f112"} .comment-actions span>a:before{content:"\f014"} #comments-respond{padding:$(main.padding);margin-top:25px;border:1px solid $(home.cate.line)} .com-date{display:block;margin-top:-5px;margin-$endSide:15px;font-size:10.2px;color:$(home.cate.text)} .com-date:before{content:"\f273";font-family:fontawesome;display:inline-block;vertical-align:top;margin-$endSide:5px} #comments-respond h4{margin:0;color:$(home.cate.link)} #comments-respond h4:before{content:"\f086";font-family:fontawesome;font-weight:400;color:$(step.color);margin-$endSide:10px;font-size:26px;display:inline-block;vertical-align:text-bottom} #comments-respond p{margin:0 0 5px;color:$(home.cate.text);padding-$startSide:35px} .c-not-allowed{font-size:16px;color:$(post.text)} /*================= >Error Page ===================*/ .error_page .side-$startSide{float:none;width:100%;margin-bottom:$(main.margin)} .ErrorSection{border:1px solid $(home.cate.line);padding:20px;text-align:center} .ErrorSection h2{color:$(home.cate.text);margin:38px 0 50px;font-size:64px} .ErrorSection span{display:block} .ErrorSection span i{font-size:110px;color:$(keycolor)} .ErrorSection p{color:$(home.cate.text);margin:20px 0 0;font-size:18px;font-weight:700;text-align:center} /*================= >Redirect Page ===================*/ #redirect-page{font-style:normal} .cLoaderWrap{text-align:center;width:200px;margin:0 auto;position:relative;font-style:normal;display:block} #cLoaderSVG{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);width:200px;height:200px;display:block} .cLoader{stroke-dashoffset:440;stroke-dasharray:440;-webkit-transition:all 1s linear;transition:all 1s linear;r:70;cy:100;cx:100;fill:none;stroke-width:5px;stroke:$(keycolor)} .cLoader.done{stroke:$(step.color)} .cPath{stroke-dashoffset:0;stroke-dasharray:440;r:70;cy:100;cx:100;stroke-width:12px;stroke:$(post.line);fill:none} .cCount{position:absolute;top:85px;right:calc(50% - 33px);font-size:60px;font-family:Arial!important;display:block;margin-bottom:0px;-webkit-transform:scale(0);transform:scale(0);color:$(step.color)} .zoom{-webkit-transform:scale(1)!important;transform:scale(1)!important} #redirect-page .cLoaded{width:180px;height:180px;position:absolute;right:calc(50% - 90px);top:19px;font-size:70px;padding-top:47px;color:$(step.color);-webkit-transform:scale(0);transform:scale(0)} .cLink.disabled{background:#DDD;color:#999;pointer-events:none} .cButton{text-align:center} .cLink{text-decoration:none;line-height:1.5em;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-weight:bold;border-radius:2px;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:10px 30px;font-size:22px} .cLink:hover{-webkit-box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);-webkit-transform:translateY(-3px);transform:translateY(-3px)} .redirect-modal{z-index:10;position:fixed;width:100vw;right:0;top:0;height:100vh;display:none;direction:ltr;display:none} .modal-overlay{background-color:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;overflow-y:auto} .modal-content{width:80%;position:relative;direction:unset;overflow:hidden;border-radius:2px;margin:30px auto;max-width:900px;-webkit-box-shadow:0 0 100px #000;box-shadow:0 0 100px #000} .modal-head{background-color:$(home.cate.line);height:50px;overflow:hidden} .modal-body{background-color:$(main.back);min-height:calc(100vh - 110px);overflow:hidden;overflow:hidden;padding:30px} .modal-title{float:$startSide;font-size:20px;margin:14px 30px;font-weight:700} .fa.modal-close{float:$endSide;background-color:#d24949;width:50px;height:50px;text-align:center;color:#FFF;font-size:20px;padding-top:15px;cursor:pointer} .modal-close:before{display:block} .modal-close:hover:before{-webkit-transform:scale(1.5);transform:scale(1.5)} /*================= >Archive Page ===================*/ .post-body .arp-item{overflow:hidden;margin-bottom:10px} .post-body .arp-thumb{width:72px;height:72px;float:$startSide;margin-$endSide:20px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} .post-body .arp-link{text-decoration:none;display:block;font-size:16px;font-weight:700;color:$(home.cate.link)} .post-body .arp-label-name{background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));display:block;margin-bottom:10px;padding-top:20px;padding-bottom:20px;padding-$startSide:20px;padding-$endSide:60px;color:$(grad.color);position:relative} .post-body .arp-label-name b{font-size:26px} .post-body .arp-label-count{position:absolute;font-size:14px;background-color:rgba(0,0,0,0.1);padding:5px 10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-weight:700;top:-webkit-calc(50% - 20px);top:-moz-calc(50% - 20px);top:calc(50% - 20px);$endSide:20px} .post-body .arp-label-count u{text-decoration:none} .post-body .arp-date,.arp-cate{display:inline-block;vertical-align:top;font-size:10px;padding:0 10px;-webkit-border-radius:300px;-moz-border-radius:300px;border-radius:300px;margin-bottom:8px;font-weight:700;line-height:2em} .post-body .arp-date{color:$(grad.color);background-color:$(keycolor);border:2px solid $(keycolor);margin-$endSide:5px} .post-body .arp-cate{color:$(step.color);border:2px solid $(step.color)} .post-body .arp-link:before{content:"";width:0;height:2px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:$(step.color);vertical-align:middle;display:inline-block} .post-body .arp-link:hover{color:$(keycolor)} .post-body .arp-link:hover:before{width:15px;margin-$endSide:5px} /*================= >Authors Page ===================*/ .aup-wrapper{margin:0 auto;width:70%} .aup-head{width:166px;height:166px;margin:0 auto 20px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px} .aup-photo{width:160px;height:160px;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;top:3px;$startSide:3px;border:10px solid $(main.back);position:relative;-moz-background-size:cover;background-size:cover} .aup-name{text-align:center;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0 auto 10px} .aup-title{text-align:center;display:block} .aup-title b{background-color:$(step.color);display:inline-block;padding:2px 20px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;color:$(grad.color)} .aup-about{margin:5px auto;font-size:13px;color:$(home.cate.text)} .aup-social{text-align:center} .aup-social a{font-size:14px;width:30px;height:30px;margin:0 2px;line-height:30px;color:#FFF!important;text-decoration:none!important;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;vertical-align:top} .aup-social a svg{fill:#FFF;width:100%;height:14px;margin-top:8px} .timeline-item{padding:10px 0;position:relative;overflow:hidden;height:102px} .timeline-date{float:$startSide;vertical-align:middle;width:100px;line-height:2em;padding-top:15px} .timeline-date b{display:block;text-align:center;font-size:40px;color:$(step.color)} .timeline-date i{text-align:center;display:block;font-style:normal;font-size:12px;color:$(home.cate.text)} .timeline-point{display:inline-block;width:5px;background:$(home.cate.line);height:100%;position:absolute;$startSide:120px;top:0} .timeline-point:before{content:'';width:21px;height:21px;display:block;background:$(keycolor);top:-webkit-calc(50% - 11.5px);top:-moz-calc(50% - 11.5px);top:calc(50% - 11.5px);position:relative;$startSide:-8px;border:5px solid $(main.back);-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%} .timeline-post{padding-$startSide:60px;float:$startSide;width:-webkit-calc(100% - 100px);width:-moz-calc(100% - 100px);width:calc(100% - 100px)} .post-body img.timeline-thumb{width:82px;height:82px;display:inline-block;vertical-align:middle;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;border:5px solid $(home.cate.line);-webkit-box-shadow:0 0 1px 0 $(home.cate.text);-moz-box-shadow:0 0 1px 0 $(home.cate.text);box-shadow:0 0 1px 0 $(home.cate.text)} .post-body a.timeline-title{text-decoration:none;display:inline-block;vertical-align:middle;margin-$startSide:20px;font-weight:700;font-size:16px;color:$(home.cate.link);width:-webkit-calc(100% - 102px);width:-moz-calc(100% - 102px);width:calc(100% - 102px);line-height:1.6em;max-height:75px;overflow:hidden} .timeline-item:hover .timeline-point:before{background-color:$(step.color);-webkit-transform:scale(1.5);-ms-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)} .timeline-post:hover a{color:$(keycolor)} .timeline-post:hover .timeline-thumb{-webkit-animation:thumb .5s ease-out;-moz-animation:thumb .5s ease-out;-o-animation:thumb .5s ease-out;animation:thumb .5s ease-out} @-webkit-keyframes thumb{ 25%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)} 75%{-webkit-transform:rotate(10deg);transform:rotate(10deg)} } @-moz-keyframes thumb{ 25%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);transform:rotate(-30deg)} 75%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg)} } @-o-keyframes thumb{ 25%{-webkit-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 75%{-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg)} } @keyframes thumb{ 25%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 75%{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg)} } .timeline-month{position:relative} .timeline-month > .timeline-point{height:70px} .timeline-month-name{margin-$startSide:140px;height:70px} .timeline-month-name span{line-height:1.5em;display:inline-block;color:$(home.cate.text);padding:5px 20px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-weight:700;margin-top:20px;border:2px solid $(home.cate.line)} .timeline-month > .timeline-point:before{background-color:$(home.cate.line);-webkit-transform:scale(1.5);-ms-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)} .blog-author-card{width:260px;display:inline-block;vertical-align:top;margin:0 10px 10px 0;border:2px solid $(home.cate.line);padding:20px;overflow:hidden;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px} .blog-authors{text-align:center} b.blog-author-name{display:block;font-size:18px;border-bottom:2px solid $(step.color);color:$(step.color);padding-bottom:10px} .blog-author-avatar{display:block;margin:10px auto;width:130px;height:130px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-moz-background-size:100% 100%;background-size:100% 100%;border:5px solid $(main.back);-webkit-box-shadow:0 0 0 3px $(keycolor);-moz-box-shadow:0 0 0 3px $(keycolor);box-shadow:0 0 0 3px $(keycolor)} .blog-author-rank{background-color:$(keycolor);font-size:12px;display:inline-block;padding:0px 15px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;margin-bottom:10px;color:#FFF} .blog-author-social a{text-decoration:none;display:inline-block;vertical-align:top;margin:2px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;width:25px;height:25px;line-height:24px;color:$(home.cate.text);border:1px solid $(home.cate.line)} .blog-author-social a svg{fill:$(home.cate.text);width:100%;height:13px;margin-top:5px;transition:0s} .blog-author-social a:before{-webkit-transition:none;-o-transition:none;-moz-transition:none;transition:none} .blog-author-social a:hover{border:1px solid $(step.color);background-color:$(step.color);color:$(main.back)} .blog-author-social a:hover svg{fill:$(main.back)} b.blog-author-count{float:$startSide;font-size:12px;color:$(home.cate.link)} b.blog-author-link{float:$endSide} .blog-author-social{min-height:30px;margin-bottom:10px} .post-body a.blog-author-link{text-decoration:none;line-height:2em;float:$endSide;color:$(step.color);padding:2px 15px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-size:11px;font-weight:700;border:2px solid $(step.color)} .post-body .blog-author-link:hover{background-color:$(step.color);color:#FFF} b.blog-author-count:before{content:'';width:10px;height:5px;display:inline-block;background-color:$(keycolor);-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;margin-$endSide:5px;vertical-align:2px} /*================= >Shortcodes ===================*/ /* ------ Premium Content ------ */ .post-body .premium{display:none;border:10px solid $(main.back);margin:20px auto;padding:20px;-webkit-box-shadow:0 0 2px 0 rgba(0,0,0,0.3);-moz-box-shadow:0 0 2px 0 rgba(0,0,0,0.3);box-shadow:0 0 2px 0 rgba(0,0,0,0.3);text-align:center;width:70%;position:relative;line-height:2em;background-color:$(home.cate.line);line-height:25px} .post-body .prm-title{margin-top:0px;margin-bottom:0px;margin-$startSide:20px;padding-$endSide:0px;font-size:20px;color:$(home.cate.link);text-align:$startSide} .post-body .prm-title:before{content:"\f023";font-family:fontawesome;margin:0 15px;font-weight:400;color:$(home.cate.text);font-size:35px;background-color:$(home.cate.line);width:60px;height:60px;padding-top:12px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;border:5px solid $(keycolor);display:inline-block;vertical-align:-17px;-webkit-box-shadow:0 0 0 10px $(home.cate.line);-moz-box-shadow:0 0 0 10px $(home.cate.line);box-shadow:0 0 0 10px $(home.cate.line);text-align:center} .post-body .prem-desc{display:block;color:$(grad.color);font-weight:700;font-size:12px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));width:100%;padding-top:5px;padding-bottom:5px;padding-$startSide:110px;padding-$endSide:0px;margin:-22px 0 20px;text-align:$startSide;line-height:1.5em} .post-body .pr-but{text-decoration:none;padding:5px 10px;display:inline-block;vertical-align:middle;margin:0 5px 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#FFF;font-family:inherit;direction:ltr;text-align:center;font-weight:700} .post-body .pr-but:hover{color:#FFF;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,0.2);box-shadow:0 2px 5px 0 rgba(0,0,0,0.2);-webkit-transform:translateY(-3px);-moz-transform:translateY(-3px);-ms-transform:translateY(-3px);-o-transform:translateY(-3px);transform:translateY(-3px)} .post-body .pr-but.pr-but-facebook:before{content:"\f09a"} .post-body .pr-but.pr-but-twitter:before{content:"\f099"} .post-body .pr-but.pr-but-google:before{content:"\f0d5"} .post-body .pr-but.pr-but-facebook{background-color:#3b5998} .post-body .pr-but.pr-but-twitter{background-color:#1da1f2} .post-body .pr-but.pr-but-google{background-color:#dd4b39} .post-body .pr-but:before{font-family:fontawesome;display:inline-block;vertical-align:middle;font-weight:400;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,0.1)} .hltd{-webkit-transition:none;-o-transition:none;-moz-transition:none;transition:none;-webkit-animation:hltd .5s linear;-moz-animation:hltd .5s linear;-o-animation:hltd .5s linear;animation:hltd .5s linear} @-webkit-keyframes hltd{ from{background-color:#ffa} to{background-color:transparent} } @-moz-keyframes hltd{ from{background-color:#ffa} to{background-color:transparent} } @-o-keyframes hltd{ from{background-color:#ffa} to{background-color:transparent} } @keyframes hltd{ from{background-color:#ffa} to{background-color:transparent} } /* ------ Messages ------ */ .post-body i.msgs{display:block;padding-bottom:15px;padding-top:15px;padding-$startSide:50px;padding-$endSide:50px;font-style:normal;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font-weight:bold;line-height:1.5em;position:relative;border-width:1px;border-style:solid;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .post-body i.msgs:before{font-family:fontawesome;width:30px;height:30px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;text-align:center;margin-$endSide:10px;color:#FFF;font-weight:normal;font-size:22px;line-height:30px;position:absolute;$startSide:10px;top:-webkit-calc(50% - 15px);top:-moz-calc(50% - 15px);top:calc(50% - 15px)} .post-body i.msgs.info:before{content:"\f129";background-color:#68c9ff} .post-body i.msgs.success:before{content:"\f00c";background-color:#46ea77} .post-body i.msgs.error:before{content:"\f00d";background-color:#f58282} .post-body i.msgs.warning:before{content:"\f12a";background-color:#d6c137} .post-body i.msgs.gift:before{content:"\f06b";background-color:#c775c3} .post-body i.msgs.info{border-color:#68c9ff;color:#68c9ff;background-color:#e4f5ff} .post-body i.msgs.success{border-color:#46ea77;color:#46ea77;background-color:#e4fff5} .post-body i.msgs.error{border-color:#f58282;color:#f58282;background-color:#ffe4e4} .post-body i.msgs.warning{border-color:#d6c137;color:#d6c137;background-color:#fff8e4} .post-body i.msgs.gift{border-color:#c775c3;color:#c775c3;background-color:#ffe4f9} /* ------ Buttons ------ */ .post-body a.sq-button{text-decoration:none;line-height:1.5em;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-weight:bold;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .post-body a.sq-button.sm{padding:2px 15px} .post-body a.sq-button.md{padding:5px 15px;font-size:16px} .post-body a.sq-button.lg{padding:5px 15px;font-size:20px} .post-body a.sq-button.xl{padding:10px 30px;font-size:22px} .post-body a.sq-button:hover{-webkit-box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);-moz-box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);box-shadow:0 8px 5px -5px rgba(0,0,0,0.3);-webkit-transform:translateY(-3px);-ms-transform:translateY(-3px);-moz-transform:translateY(-3px);-o-transform:translateY(-3px);transform:translateY(-3px)} /* ------ Dev Code ------ */ .post-body pre.sq-code{direction:ltr;width:100%;display:block;font-size:0;line-height:30px;overflow:auto} .post-body .code-sn{display:inline-block;width:40px;color:$(grad.color);font-weight:bold;text-align:center;background-color:$(keycolor);font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .post-body .code-sn span{display:block} .post-body .code-sn span:nth-of-type(odd){background-color:rgba(255,255,255,0.1)} .post-body .sq-source{margin:0;display:inline-block;vertical-align:top;background-color:$(home.cate.line);color:$(home.cate.link);width:calc(100% - 40px);font-size:12px;text-align:left} .post-body .sq-source code{display:block;padding:0 10px} .post-body .sq-source code:nth-of-type(odd){background-color:rgba(0,0,0,0.05)} /* ------ Contact Form ------ */ .post-body .ContactForm input[type='text'],.post-body .ContactForm textarea{border-bottom:2px solid $(home.cate.line);color:$(home.cate.text)} .post-body .ContactForm i{color:$(home.cate.text)} .post-body .ContactForm b{position:absolute;$startSide:30px;color:$(home.cate.text)} .post-body .contact-state{float:$startSide;color:$(home.cate.text)} /*================= >Float Toggles ===================*/ .b-toggles{position:fixed;bottom:30px;$startSide:30px;z-index:9999999} .b-toggles button{width:50px;height:50px;border:none;outline:none;border-radius:15px;margin-top:5px;font-size:30px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 5px 10px rgba(0, 0, 0, 0.1);background:#fff;opacity:0.9;font-family:inherit} .b-toggles button:hover{opacity:1} .b-toggles button:after{content:attr(title);position:absolute;$startSide:120%;background-color:#3e3e3e;white-space:nowrap;font-family:inherit;font-size:12px;padding:7px 12px 9px;border-radius:5px;font-weight:normal;color:#FFF;transform:translateX(-20px);opacity:0} .b-toggles button:before{content:'';border-top:5px solid transparent;border-bottom:5px solid transparent;border-$endSide:5px solid #3e3e3e;position:absolute;$startSide:110%;transform:translateX(-20px);opacity:0} .b-toggles button:hover:before,.b-toggles button:hover:after{transform:translateX(0);opacity:1} .dm .b-toggles button{background:#333} .b-toggles svg, .b-toggles i{width:30px;height:30px;display:block;fill:$(keycolor);color:$(keycolor);display:none} body:not(.dm) #bt-scheme svg:first-of-type{display:block} body.dm #bt-scheme svg:last-of-type{display:block} body:not(.boxed) #bt-boxing i:first-of-type{display:block} body.boxed #bt-boxing i:last-of-type{display:block} #bt-install i{display:block} /*================= >NightMode ===================*/ .dm .static-page .entry-title,.dm .quickedit:after{color:#FFF} /* MAIN */ .dm .main-container,.dm a.next-page, .dm a.prev-page,.dm .modal-body,.dm .Loading,.dm .comments-tabs>div, .dm .topic-nav .topic-img{background-color:$(dm.main)} .dm .blog-author-avatar,.dm .aup-photo,.dm .timeline-month > .timeline-point:before{border-color:$(dm.main)} .dm.rtl a.prev-page{-webkit-box-shadow:10px 0 0, -20px 0 0 $(dm.main);box-shadow:10px 0 0, -20px 0 0 $(dm.main)} .dm.ltr a.prev-page{-webkit-box-shadow:-10px 0 0, 20px 0 0 $(dm.main);box-shadow:-10px 0 0, 20px 0 0 $(dm.main)} .dm.rtl a.next-page{-webkit-box-shadow:-10px 0 0, 20px 0 0 $(dm.main);box-shadow:-10px 0 0, 20px 0 0 $(dm.main)} .dm.ltr a.next-page{-webkit-box-shadow:10px 0 0, -20px 0 0 $(dm.main);box-shadow:10px 0 0, -20px 0 0 $(dm.main)} /* MENUS */ .dm header .color-wrap,.dm #LinkList302,.dm .ticker-title,.dm #footer,.dm .post-body .sq-source,.dm .drop-menu-st > ul,.dm .bot-menu-st > ul,.dm .mega-wrap,.dm #menu-bar .menu-bar >ul>li>a:not(.home):hover,.dm #menu-bar .menu-bar > ul,.dm .menu-res-wrap ul{background:$(dm.menu)} /* TRACKS */ .dm .ticker,.dm article .topic-tools,.dm header #top-bar .menu li a,.dm .mega-carousel .splide__arrows button,.dm .scroll-top{background-color:$(dm.track)} /* LINKS */ .dm .headline h2 a,.dm .ticker-content li a,.dm .cate-link a,.dm .main-wrap .headline h4,.dm .main-wrap .headline h2,.dm .main-wrap aside .headline h4,.dm .rand-content h3 a,.dm .LinkList .widget-content li a,.dm * .PopularPosts .post-title a,.dm .headline h4,.dm .FeaturedPost h3,.dm .PageList .widget-content li a,.dm .list-label-widget-content .label-name,.dm #TOC li a,.dm #HTML303,.dm #TOC > span,.dm .post-body a.timeline-title,.dm .recent-comments .comment p,.dm .post-body .arp-link,.dm .comments-show button,.dm .go-respond,.dm #menu-bar .menu-bar ul li>a,.dm .ErrorSection h2,.dm header .search input,.dm .ContactForm input[type='text'],.dm .ContactForm textarea,.dm .status-msg-body b,.dm .bot-menu-st:after,.dm .drop-menu-st:after,.dm #Pagination span,.dm #Pagination a,.dm header #top-bar .menu li a,.dm .topic-nav-cont h5,.dm .topic-related .Item h3 a,.dm .go-respond,.dm .comment-actions span *,.dm .comments-list .comment-content,.dm #comments-respond h4,.dm .subscrib-sec input[name="email"],.dm .author-profile,.dm .mega-post .post-title a,.dm .post-body a.d-link,.dm .modal-head,.dm .menu-res-wrap li a,.dm .BlogArchive .flat .archivedate a,.dm .headone{color:$(dm.link)} /* TEXT */ .dm .post-body h3, .dm .post-body h2, .dm .post-body h4,.dm header #top-bar .menu li a:hover,.dm header #top-bar .search form span,.dm .cate-slideshow .Item.s-active,.dm .label-size,.dm .status-msg-body,.dm .timeline-month-name span,.dm .timeline-date i,.dm .aup-about,.dm .acc-body,.dm .social-widget li div,.dm .recent-comments .comment .comm-author,.dm .recent-comments .comment .leave-comm,.dm .post-body .prm-title,.dm .post-body .prm-title:before,.dm .details > *,.dm .cate-snippet,.dm .main-slider .m-slider .caption p,.dm .list-label-widget-content .label-count,.dm .headline > a,.dm .ticker-title,.dm .ErrorSection p,.dm .blog-author-social a,.dm b.blog-author-count,.dm .ContactForm i,.dm .ContactForm label,.dm .topic-nav-cont span,.dm .com-date,.dm #comments-respond p,.dm .comments-count,.dm .contact-state p,.dm .subscrib-sec label,.dm * .splide__arrow,.dm * .snippet-item,.dm #TOC li a:before,.dm .post-body,.dm .post-body p,.dm .author-about,.dm .topic-details > *,.dm .zooming b,.dm .post-body .sq-source,.dm .post-body li,.dm .cLink.disabled,.dm .modal-body,.dm .cate-carousel .splide__arrows button,.dm .text-counter-wrapper,.dm .flat .archivedate .post-count,.dm .TextList .widget-content li,.dm #Header1 p{color:$(dm.text)} /* LINES BACK */ .dm .headline > a,.dm .social-widget li div,.dm .CusWidget .v-carousel .vc-nav button,.dm .acc-body,.dm #Pagination span,.dm #Pagination a,.dm .cate-slideshow .Item,.dm .details-on-img .author-prof,.dm .details-on-img .post-date,.dm #TOC li a,.dm .post-body h3, .dm .post-body h2, .dm .post-body h4,.dm #TOC > span,.dm .timeline-point,.dm .timeline-month > .timeline-point:before,.dm .post-body .premium,.dm .comments-show button,.dm .go-respond,.dm .cate-carousel .splide__pagination__page,.dm header .search input,.dm .post-pages:before,.dm .topic-nav-cont span,.dm .comment-actions span *,.dm .subscrib-sec input[name="email"],.dm .BlogSearch .search-input input,.dm * .splide__arrow,.dm .post-body .prm-title:before,.dm .modal-head,.dm .cLink.disabled{background-color:$(dm.shade)} .dm .cPath{stroke:$(dm.shade)} .dm .PageList .widget-content li a::before,.dm .list-label-widget-content .label-name::before,.dm .BlogArchive .flat .archivedate a::before,.dm .TextList .widget-content li::before{color:$(dm.shade)} /* BORDERS */ .dm .headline,.dm .home-cate .widget-content,.dm .cate-sided .Item:nth-of-type(n+2),.dm .cate-sided .Item:first-of-type,.dm .cate-cover .Item:nth-of-type(n+2),.dm .index-posts .post-outer,.dm .main-wrap aside .headline,.dm .social-widget,.dm .CusWidget .v-carousel,.dm .rand-content,.dm .rand-content div,.dm .recent-comments .comment,.dm .comments-img-wrap,.dm .cate-video .Item,.dm #TOC,.dm .post-body h3, .dm .post-body h2, .dm .post-body h4,.dm .see-also,.dm .see-also li,.dm .topic-share .social,.dm .topic-author,.dm .topic-nav,.dm .related-carousel .item-wrap,.dm .comments-list,.dm .comments-list > ul > li.comment,.dm .comments-list .comment-replies li.comment,.dm #comments-respond,.dm .author-profile,.dm .topic-related .details,.dm .status-msg-body,.dm .ErrorSection,.dm .blog-author-card,.dm .blog-author-social a,.dm .post-body img.timeline-thumb,.dm .timeline-month-name span,.dm .timeline-point:before,.dm .post-body .premium,.dm .post-body #ContactForm93,.dm .ContactForm input[type='text'],.dm .ContactForm textarea,.dm .topic-nav .prev,.dm .list-label-widget-content .label-name,.dm .PageList .widget-content li a,.dm #footer-top-section:not(.no-items),.dm .PopularPosts article,.dm .BlogArchive .flat .archivedate a,.dm .TextList .widget-content li{border-color:$(dm.border)} .dm .social-widget li div:after{border-bottom-color:$(dm.border)} /*================= >Responsive ===================*/ @media screen and (max-width:1200px){#bt-boxing{display:none!important}} @media screen and (max-width:1050px){ #Header1,#HTML302,#HTML307{float:none;width:100%;text-align:center;margin:0 auto;min-height:auto} div#Header1{margin-bottom:$(main.margin)} .aup-wrapper{width:90%} #footer-sections{flex-wrap:wrap} #footer-sections .f-sec{width:50%;margin-bottom:$(main.margin)} } @media screen and (min-width:481px) and (max-width:1080px){ .cate-video .free-width .Item:nth-of-type(-n+3){margin:0;padding:0;border:0} .cate-video .free-width .Item:nth-of-type(3n-1){margin:0} .cate-video .free-width .Item{width:calc((100% - 15px)/2)} .cate-video .free-width .Item:nth-of-type(n+3){margin-top:$(main.margin);padding-top:$(main.margin);border-top:1px solid $(home.cate.line)} .cate-video .free-width .Item:nth-of-type(odd){margin-$endSide:15px} .cate-video .img-wrap{width:100%;margin:0 0 10px;height:150px} .cate-video .cate-link{width:100%} } @media screen and (min-width:481px) and (max-width:860px){ .cate-video .img-wrap{float:none;clear:both;width:100%;height:30vw} .cate-video .cate-link{margin-top:15px} } @media screen and (min-width:992px){ body{background:$(body.background);background-size:cover} } @media screen and (max-width:992px){ header #top-bar #LinkList301{max-width:calc(100% - 90px);float:$startSide;margin-$startSide:40px;margin-$endSide:0} .bot-menu-st > ul{$startSide:0} header #top-bar #PageList301{width:200px;position:absolute;$startSide:0;overflow:visible} header #top-bar .menu{display:none} header #top-bar .menu-res{display:block} header #top-bar #HTML301{width:30px;min-width:auto} header .search label{position:absolute;$endSide:30px;top:0} header .search.open-search label{width:200px} a.res-home{display:block} #menu-bar .menu-bar ul li>a.home{display:none} .menu-bar-res{display:block} #menu-bar .menu-bar > ul{position:absolute;$endSide:0;top:58px;background-color:$(menu.back);width:220px;max-height:0;overflow:auto!important;padding:0 15px;z-index:2;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);box-shadow:0 0 10px rgba(0,0,0,0.5)} #menu-bar .menu-bar > ul.open{max-height:340px;z-index:2;padding:15px} #menu-bar .menu-bar .drop-menu-st ul{display:block;background-color:rgba(0,0,0,0.2);position:relative;top:0;-webkit-box-shadow:none;box-shadow:none;width:auto} #menu-bar .menu-bar .drop-menu-st ul li a{font-size:12px} #menu-bar .menu-bar ul li>a{display:block;padding:10px;font-weight:700;text-align:$startSide;border-bottom:1px dashed rgba(255,255,255,0.075)} #menu-bar .menu-bar > ul.open > li:last-of-type a{border-bottom:none;} #menu-bar .menu-bar .drop-menu-st:after{display:none} #menu-bar .menu-bar ul li{float:none} .middle-content{flex-wrap:wrap} .side-$startSide,aside{width:100%;margin:0!important} .CusWidget .slider-carousel .img-wrap,.CusWidget .v-carousel .img-wrap{height:35vh} .details a,.topic-details a,.go-respond{display:inline-block;padding:8px 0;} } @media screen and (min-width:641px) and (max-width:992px){ .wide-sec .sided-sections.three-cols .section:first-of-type{float:none;width:100%;clear:both;width:100%} .wide-sec .sided-sections.three-cols .section:nth-of-type(2){margin:0 0 0 15px} .wide-sec .sided-sections.three-cols .section:nth-of-type(n+2){width:calc((100% - 15px)/2)} .wide-sec .sided-sections.two-cols .section{margin-$endSide:15px;width:calc((100% - 15px)/2)} .wide-sec .sided-sections.two-cols .section:last-of-type{margin:0} } @media screen and (max-width:860px){ .main-slider .m-slider{float:none;width:100%;margin-bottom:$(main.margin)} .main-slider .left-box{float:none;width:100%;clear:both;height:auto} .main-slider .left-box > div{float:$startSide;width:49%} .main-slider .left-box > div:first-of-type{margin-$endSide:2%} .topic-tools.zooming{display:block;margin:0 auto} .topic-tools{border-radius:0 0 5px 5px} .topic-details{width:95%;margin:0 2.5%;padding:35px $(main.padding) 10px;margin-top:-3px} .cate-cover .free-width .Item:nth-of-type(n+2){width:100%;float:none} } @media screen and (max-width:640px){ .topic-title{border-radius:5px} body .sided-sections .section{float:none!important;width:100%!important;margin-$endSide:0!important;margin-$startSide:0!important} #sidebar-section .widget{width:100%;float:none} #footer #footer-sections .f-sec{width:100%} .free-width .slideshow-thumbnail,.tight-width .slideshow-thumbnail{float:none;width:100%;height:320px;margin-$endSide:0;margin-bottom:$(main.padding)} .cate-slideshow .free-width .slideshow-thumbs{float:none;width:100%} .cate-slideshow .free-width .Item,.cate-slideshow .tight-width .Item{height:auto} .cate-slideshow .free-width .Item.s-active:after, .cate-slideshow .tight-width .Item.s-active:after{display:none} .index-posts .img-wrap{width:180px;height:180px;margin-$endSide:15px} .blog-author-card{margin-$startSide:0} .aup-wrapper{width:100%} .topic-author .social{position:relative;$endSide:0;top:0;text-align:$endSide} #LinkList304{float:none;clear:both;margin:0 auto;text-align:center} #HTML303{float:none;clear:both;text-align:center;margin-bottom:10px} .premium{width:98%} .comments-list .comment-replies{padding-$startSide:0} .comments-list .comment-replies .comment-content{margin-top:0} .comment-actions{margin-top:10px;position:relative;top:auto;$endSide:auto;display:block} .comment-actions span{float:$endSide} .comment-actions span:first-child{margin-bottom:5px} .comment-actions span:last-child{margin-$endSide:0} .post-body .premium{width:100%} .post-body .prem-desc{margin:10px 0;padding:10px;text-align:center} .post-body .prm-title{margin:0;text-align:center} .post-body .prm-title:before{display:block;margin:0 auto} .cate-cover .free-width .Item:first-of-type .img-wrap{float:none;width:100%;margin-bottom:$(main.padding)} } @media screen and (max-width:480px){ .ticker-title{font-size:0;padding:0 25px} header #top-bar #HTML301{min-width:auto;width:200px;position:absolute;$endSide:$(main.padding)} .slideshow-thumbnail{height:240px} .cate-slideshow .widget-content{padding:0;border:none} .main-slider .left-box > div{width:100%;float:none} .main-slider .m-slider{height:320px} .index-posts .post-outer .img-wrap{float:none;width:100%;height:50vw;margin-bottom:15px} .post-outer h3.post-title{display:block;width:100%} .comments-bar button{float:none;width:100%;display:block;-webkit-transform:translate(0);transform:translate(0);margin-bottom:5px} .comments-list .comment-content{clear:both;margin:40px 0px 0} .comments-list .comment-replies .comment-content{margin:5px 0 0} .topic-nav-cont .next,.topic-nav-cont .prev{float:none;width:100%;border:none;display:block} .topic-nav .topic-img{display:none!important} .arp-label-count u{display:none} .arp-link{font-size:14px} .arp-label-name b{font-size:20px} .timeline-mohth-name{margin-$startSide:110px} .timeline-date{width:75px} .timeline-point{$startSide:90px} .timeline-post{padding-$startSide:40px;width:calc(100% - 75px)} .timeline-title{margin-$startSide:10px} .topic-author{text-align:center} .author-about{float:none;display:block;width:100%;clear:both;margin-bottom:10px;text-align:center} .topic-author .author-img{display:block;margin:0 auto 10px;float:none} .topic-author .social{text-align:center} .author-profile{float:none;display:inline-block} .separator a{margin:0 auto!important} .cate-video .Item,.cate-video .free-width .Item{float:none;width:100%;margin:20px 0 0!important;margin-$endSide:0;border-top:1px solid #EEE;padding-top:$(main.padding)} .cate-video .Item:first-of-type,.cate-video .free-width .Item:first-of-type{margin-top:0!important;padding-top:0;border-top:none} .cate-video .img-wrap{width:100%;height:50vw;margin:0 0 10px 0} .cate-video .cate-link{max-height:100%;clear:both} .comments-tabs .go-respond{margin-bottom:30px;padding:8px} .comments-tabs .comments-show{float:none;text-align:center;clear:both;font-size:0} .comments-tabs .comments-show button{width:50%;font-size:12px} .comments-only{margin-bottom:10px} .post-body img.timeline-thumb{width:60px;height:60px;border-width:3px} .post-body a.timeline-title{margin-right:10px;font-size:14px;width:calc(100% - 75px)} } @media screen and (max-width:360px){ .home-cate .widget-content,.index-posts{padding:0;border:none} .timeline-mohth-name{margin-$startSide:30px} .timeline-item{height:auto} .timeline-date{width:100%;text-align:$startSide;padding:0 30px 0 0} .timeline-date b{display:inline-block;font-size:20px;margin-$endSide:5px;vertical-align:middle} .timeline-date i{display:inline-block;font-size:12px;vertical-align:middle} .timeline-point{$startSide:10px} .timeline-post{padding-$startSide:30px;width:100%} .timeline-thumb{display:none} a.timeline-title{display:block;margin-$startSide:0;width:100%} header #top-bar #HTML301{width:150px} .premium{width:98%} h6.prm-title{margin:0 0 20px;text-align:center} span.prem-desc{margin-top:5px;padding:5px 10px;text-align:center} .prm-title:before{display:block;-webkit-box-shadow:none;box-shadow:none;margin:0 auto} a.pr-but{display:block;text-align:$endSide} .pr-but:before{width:30px} } @media print{ .main-container>header,.intro,footer,aside,.topic-share,.topic-author,.topic-nav,.topic-related,div[id^='HTML30'],.zooming,.main-container:before,.main-container:after,article .topic-tools,.article-ad,.Middle-Ad,.quote-share,.item-control.blog-admin,#TOC,.see-also{display:none} .side-$startSide{width:100%!important;float:none} .middle-content,.main-wrap{margin:0 auto!important} .main-container{max-width:100%;-webkit-box-shadow:none;box-shadow:none} .topic-details{margin:0 5%;width:90%} .topic-title{color:#000;border-bottom:1px solid #DDD;background:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0;text-shadow:none} .post-body{color:#222!important} .post-body pre.sq-code{max-height:100%} } /*================= >Admin Custom CSS ===================*/ ]]> div.add_widget{margin-top:0;padding:7px 15px;border:none;border-bottom:2px solid #c7c7c7} body#layout div.section>div.add_widget:hover{border-bottom:2px solid #e87375} body#layout .add-icon{background-color:#d8d8d8;border-radius:2px} body#layout div.section>div.add_widget:hover .add-icon{background-color:#e87375} body#layout div.section>div.widget{margin-top:0;margin-bottom:10px} body#layout .section .widget a.editlink{border:0;padding:3px 15px;color:#b190bf!important;background:#562d67;text-decoration:none;border-radius:3px;height:20px;font:700 11px/18px Tahoma} body#layout .rtl .section .widget a.editlink{right:auto;left:10px;} body#layout .ltr .section .widget a.editlink{left:auto;right:10px;} body#layout .section .widget a.editlink:hover{background:#922c2d;color:#dadada!important} body#layout .visibility .editlink.icon{margin-top:15px} body#layout .add_widget{border:1px dashed rgba(0,0,0,0.3);margin-bottom:5px;margin-top:0} body#layout .add_widget:hover{border:1px dashed rgba(0,0,0,0.5)} body#layout .section .add_widget a{color:#757575;font-weight:700;text-decoration:none!important} body#layout.rtl .section .add_widget a{margin-right:40px;margin-left:0;} body#layout.ltr .section .add_widget a{margin-left:40px;margin-right:0;} body#layout div.widget-content{padding:10px 15px} body#layout .draggable-widget div.widget-wrap2{background-color:#e87375} body#layout .dr_active:before{content:'\افلت هُنا';font-size:30px;padding-top:25px;display:block;font-weight:700} body#layout .dr_active{height:50px!important;background-color:transparent;border:1px dashed #5558ea;color:#5e1056;margin-bottom:30px;top:20px;border-radius:100px} body#layout .widget.locked-widget:before{content:'\002638';font-size:14px;position:absolute;z-index:2;top:0;background-color:#562d67;width:17px;height:15px;color:#b190b6;line-height:1em;padding-top:5px;border-radius:0 0 20px 20px} body#layout .rtl .widget.locked-widget:before{left:10px} body#layout .ltr .widget.locked-widget:before{right:10px} body#layout .widget .visibility .layout-widget-state{margin-top:12px;background-image:url(https://4.bp.blogspot.com/-4ewGLNY2bfg/WmSZTIyIIfI/AAAAAAAAABg/hkOX-BjuVVUjfRomeZxjQtyVzTSEKa_WgCLcBGAs/s1600/eyes.png);opacity:1!important} body#layout .rtl .widget .visibility .layout-widget-state{float:right;} body#layout .ltr .widget .visibility .layout-widget-state{float:left;} .layout-widget-state.visible{background-position:center -1px!important} .layout-widget-state.not-visible{background-position:center -23px!important} /* ============= * Heads Title * ============= */ body#layout header:before,body#layout .intro:before,body#layout .sided-sections:before,body#layout aside:before,body#layout #RecentPosts:before,body#layout #Auth-Sec:before,body#layout footer:before{content:'';display:block;height:45px;background:#271e3a url(https://3.bp.blogspot.com/-lBhkNA-C7fk/WmSZM9WycNI/AAAAAAAAAAg/DxeNRhwfx8IIV8gg3CkKqcISm07mgH7hQCLcBGAs/s1600/LyN.png) no-repeat;margin-bottom:10px;margin-top:20px} body#layout header:before{background-position:center -9px} body#layout .intro:before{background-position:center -78px} body#layout .sided-sections:before{background-position:center -152px} body#layout aside:before{background-position:center -228px} body#layout #RecentPosts:before{background-position:center -308px} body#layout #Auth-Sec:before{background-position:center -398px} body#layout footer:before{background-position:center -486px} body#layout .opt-before:before{display:none} /* ============= * Header * ============= */ body#layout #Tempnec{background-color:transparent;border:none;margin:0;padding:0;overflow:hidden} body#layout #Tempnec .widget{display:none} body#layout .widget#LinkList400,body#layout .widget#HTML400{display:block;width:49.5%} body#layout .rtl .widget#LinkList400, body#layout .rtl .widget#HTML400{float:right} body#layout .ltr .widget#LinkList400, body#layout .ltr .widget#HTML400{float:left} body#layout .rtl .widget#HTML400{margin-left:1%} body#layout .ltr .widget#HTML400{margin-right:1%} body#layout #top-bar #HTML301{display:none} body#layout header div.dropregion{display:none!important} body#layout #top-bar .widget, body#layout #head-sec .widget{display:inline-block;width:49.5%;vertical-align:top} body#layout #head-sec #Header1{display:block;width:100%} body#layout .rtl .widget#HTML302{margin-left:1%} body#layout .ltr .widget#HTML302{margin-right:1%} body#layout .rtl #top-bar #LinkList301{margin-right:1%} body#layout .ltr #top-bar #LinkList301{margin-right:1%} /* ============= * Main * ============= */ body#layout .sided-sections,body#layout .sided-sections{font-size:0} body#layout .top-content .sided-sections .section,body#layout .bottom-content .sided-sections .section{display:inline-block;vertical-align:top;width:32.33333333333%} body#layout #section2, body#layout #section5, body#layout #section8, body#layout #section17, body#layout #section20{margin-right:1.5%;margin-left:1.5%} body#layout .middle-content .sided-sections .section{display:inline-block;vertical-align:top;width:49%} body#layout .rtl .middle-content .sided-sections .section:first-of-type{margin-left:2%} body#layout .ltr .middle-content .sided-sections .section:last-of-type{margin-left:2%} body#layout .intro{margin-bottom:10px} body#layout #section9{margin-bottom:10px} body#layout .middle-content{margin-bottom:10px} body#layout .Blog .widget-content{height:100px} body#layout #ContactForm93{display:none} body#layout div#RecentPosts .widget:last-of-type{margin-bottom:0} body#layout .rtl main, body#layout .rtl aside{float:right;} body#layout .ltr main, body#layout .ltr aside{float:left;} body#layout .rtl main{width:60%;border-left:2px solid #d8d8d8;} body#layout .ltr main{width:60%;border-right:2px solid #d8d8d8;} body#layout .rtl main{padding-left:1%} body#layout .ltr main{padding-right:1%} body#layout aside{width:37.5%;} body#layout .rtl aside{margin-right:1%} body#layout .ltr aside{margin-left:1%} /* ============= * footer * ============= */ body#layout #footer-sections{font-size:0} body#layout #footer-sections .section{width:24%;display:inline-block;vertical-align:top} body#layout .rtl #footer-sections .section{margin-left:1.333%} body#layout .ltr #footer-sections .section{margin-right:1.333%} body#layout .rtl #footer-sections div#sec4{margin-left:0} body#layout .ltr #footer-sections div#sec4{margin-right:0} body#layout #HTML303{display:none} ]]> Default Markups