> Platform : Blogger >> Category : Magazine >> Homepage : https://squeeze-template.blogspot.com >> Version : 1.0.0 >> License : Free =========================================================== */ /* ==================== >> TABLE OF CONTENTS : ======================= 🔹 Variables 🔹 Normalize 🔹 Spinner 🔹 Fonts 🔹 OwlCarousel 🔹 Main 🔹 Widths 🔹 Framework 🔹 Header 🔹 Intro 🔹 Sidebar 🔹 Footer 🔹 Widgets 🔹 Pages (Common) 🔹 Homepage 🔹 Post Page 🔹 Error Page 🔹 Redirect Page 🔹 Archive Page 🔹 Authors Page 🔹 Shortcodes 🔹 Responsive */ /*================= 🔹 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}iframe{border:none} *,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} /*================= 🔹 Fonts ===================*/ @font-face{font-family:'Cairo';font-style:normal;font-weight:400;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/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;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/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;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/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}@font-face{font-family:'Cairo';font-style:normal;font-weight:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6O59ZMaA.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:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6F59ZMaA.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:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6L59Y.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} /*================= 🔹 Main ===================*/ body{font-family:'Cairo',serif;font-size:14px;line-height:1.5em;visibility:visible!important;} body::-webkit-scrollbar{background-color:$(main.back);width:10px} body::-webkit-scrollbar-thumb{background:$(keycolor)} body::-moz-selection{background:$(keycolor);color:#FFF} body[data-boxed='true'] .main-container{max-width:$(content.width)} ::-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{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(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color))} .middle-content{overflow:hidden} .main-wrap{padding:0 $(main.padding)} #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;color:$(keycolor);background-color:$(step.color)} /*================= 🔹 Widths ===================*/ .side-$startSide{width:-webkit-calc(100% - $(sidebar.width) - 2%);width:-moz-calc(100% - $(sidebar.width) - 2%);width:calc(100% - $(sidebar.width) - 2%);float:$startSide} aside{float:$endSide;width:$(sidebar.width)} .wrapper{max-width:$(content.width);margin:0 auto} header .color-wrap{background-color:$(menu.back)} #footer .color-wrap{position:relative;background-color:rgba(0,0,0,0.1)} /*================= 🔹 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} @-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 $(main.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)} #LinkList303 .headline h6{margin-top:0} .headline h6{display:inline-block;margin:0 0 12px;font-size:17px;position:relative} .main-wrap .headline h6{color:$(main.title)} .main-wrap aside .headline h6{color:$(aside.title)} #footer .headline h6{color:$(footer.title)} .headline h6:after{content:"";height:2px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));position:absolute;top:33px;$endSide:0;$startSide:0;bottom:0} .headline a{color:$(main.text);float:$endSide;padding:5px 12px;font-size:12px;background-color:$(main.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(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:5px 15px;font-size:14px;font-weight:700;color:$(grad.color);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .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;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;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:100%} [dir='rtl'] .post-share .share-icon:after{border-color:transparent transparent transparent $(keycolor)} [dir='ltr'] .post-share .share-icon:after{border-color:transparent $(keycolor) transparent transparent} .post-share .share-icon.arrow:after{opacity:1} .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} [dir='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)} [dir='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:27px;margin-top:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;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:#dd4b39} .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;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;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(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(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:none;width:100%;height:100%} .details-on-img i{margin-$endSide:5px} .caption{padding:30px;background:-webkit-gradient(linear,$endSide top, $endSide 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{font-size:0} .social li{display:inline-block;margin:0 2px} .social li i{color:#FFF;width:28px;height:28px;line-height:28px;margin-bottom:5px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:inline-block;text-align:center;font-size:16px} .social-sites .social 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:cale(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:cale(1.5);transform:cale(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:cale(1.5);transform:cale(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:cale(1.5);-o-transform:cale(1.5);transform:cale(1.5)} } .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-youtube {background-color:#e52d27} .social .fa-wordpress {background-color:#1081B1} .social .fa-digg {background-color:#476BA3} .social .fa-quora {background-color:#a82400} .social .fa-spotify {background-color:#1ed760} .social .fa-reddit {background-color:#ff4500} .social .fa-snapchat {background-color:#f5d602} .social .fa-drupal {background-color:#008BCA} .social .fa-github {background-color:#000000} .social .fa-flickr {background-color:#FF0084} .social .fa-tumblr {background-color:#304E6C} .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-delicious {background-color:#DEDEDF} .social .fa-behance {background-color:#009fff} .social .fa-soundcloud {background-color:#FF5419} .social .fa-telegram {background-color:#32AEE1} .social .fa-website {background-color:#444444} .social .fa-google-play {background-color:#3d9dab} .fa-google-play:before{content:'\f04b'} .fa-website:before{content:"\f0ac"} /* ------ Label-Title ------ */ .label-title{padding:0 8px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(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(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:2px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-size:12px;margin-bottom:5px;color:$(grad.color);position:relative;$startSide:0} .img-wrap:hover .label-name{$startSide:-100%} /* ------ Ribble Button ------ */ .ribble{position:relative;overflow:hidden} .ribble b{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 b{color:$(grad.color)} .ribble:before{content:'';background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(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-$endSide{display:block;height:1px;clear:$endSide} .clear{height:1px;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} /*================= 🔹 Header ===================*/ 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} /* ------ Header Social ------ */ header #top-bar #LinkList301{max-width:30%;margin-$endSide:15px;float:$startSide;position:relative;height:40px} #LinkList301 .social-sites{margin-top:5px} #LinkList301 .social-sites li{vertical-align:top} /* ------ Header Pages List ------ */ header #top-bar #PageList301{float:$startSide;max-width:-webkit-calc(70% - 60px);max-width:-moz-calc(70% - 60px);max-width:calc(70% - 60px);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:rgba(255,255,255,0.1);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:$(menu.text);line-height:2em} header #top-bar .menu li a:hover,header #top-bar .menu li.selected a{color:$(grad.color);background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color))} header #top-bar .menu-res{display:none} header #top-bar .menu-res i{display:block;width:30px;height:30px;line-height:30px;font-size:20px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(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} nav.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} nav.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:9999} nav.menu-res-wrap ul a{display:block;border-bottom:1px dotted rgba(255,255,255,0.2);color:$(menu.text);text-align:center} nav.menu-res-wrap ul li:last-of-type a{border-bottom:none} /* ------ Search Box ------ */ header #top-bar #HTML301{direction:ltr;min-width:200px;height:30px;position:absolute;$endSide:$(main.padding);top:0} header #top-bar .search form{direction:rtl;position:relative} header #top-bar .search form span{color:$(grad.color);background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(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;position:absolute;top:5px;$endSide:0;z-index:2} header #top-bar .search form span.open-search:after{opacity:1;$endSide:100%} header #top-bar .search input{font-family:inherit;-webkit-border-radius:0 1px 1px 0;-moz-border-radius:0 1px 1px 0;border-radius:0 1px 1px 0;height:30px;margin:5px 0;background-color:$(menu.back);color:#FFF;font-size:12px;border:none;outline:none;position:absolute;$endSide:30px;width:0} header #top-bar .search .open-search ~ input{padding:0 15px;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} #HTML302{width:728px;float:$endSide;text-align:$endSide} /* ------ Main Menu ------ */ #menu-bar{clear:both;position:relative;margin-bottom:$(main.margin);padding:0 $(main.padding)} #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.text);position:relative} #menu-bar .menu-bar li>a:hover{background-color:rgba(0,0,0,0.2);color:#FFF} #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 b{position:relative;$startSide:50px} #menu-bar .home:hover b{$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} #menu-bar .menu-bar .drop-menu-st{position:relative;padding-bottom:5px} #menu-bar .menu-bar .drop-menu-st:after{content:"\f078";font-family:FontAwesome;font-size:10px;color:$(menu.text);position:absolute;top:18px;$endSide:10px} #menu-bar .menu-bar .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)} #menu-bar .menu-bar .drop-menu-st:hover ul{display:block} #menu-bar .menu-bar .drop-menu-st ul li{float:none} /* ------ Responsive Menu ------ */ .menu-bar-res{display:none} .menu-bar-res .fa-bars{cursor:pointer;float:$endSide;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} /*================= 🔹 Sidebar ===================*/ aside .widget{margin-bottom:$(main.margin)} /* ------ Social Widget ------ */ .social-counter .social{overflow:hidden;padding:$(main.padding);border:1px solid $(aside.line)} .social-counter li{float:$startSide;width:23.5%;margin:0 1%;min-width:55px} .social-counter li:nth-child(4n+1){margin-$startSide:0} .social-counter li:nth-child(4n+4){margin-$endSide:0} .social-counter li i{text-align:center;display:block;width:55px;height:55px;line-height:55px;margin:auto;color:#FFF;font-size:24px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transform:translate(0,5px);-ms-transform:translate(0,5px)} .social-counter li:hover i{-webkit-transform:translate(0);-ms-transform:translate(0)} .social-counter li div{color:$(aside.link);padding:5px 7px;margin-bottom:15px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:$(aside.line);font-size:11px;text-align:center;position:relative} .social-counter li div:after{content:"";display:block;border-width:5px;border-style:solid;border-color:transparent transparent $(aside.line);position:absolute;top:-10px;$endSide:44%} /*================= 🔹 Footer ===================*/ #footer{position:relative;background:-webkit-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:-o-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:-moz-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:linear-gradient(45deg,$(footer.back1),$(footer.back2));border-top:3px solid $(keycolor);clear:both} #footer-sections{font-size:0;padding:$(main.margin) $(main.padding)} #footer-sections .f-sec{display:inline-block;vertical-align:top;font-size:14px;width:-webkit-calc((100% - 90px)/4);width:-moz-calc((100% - 90px)/4);width:calc((100% - 90px)/4);margin-$endSide:30px} #footer-sections .f-sec:last-of-type{margin-$endSide:0} #footer-sections .f-sec .widget{margin-bottom:$(main.margin)} #footer-sections .f-sec .widget:last-of-type{margin-bottom:0} #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)} [data-boxed='false'] #footer-top-section:not(.no-items).wrapper{margin:$(main.margin) auto 0;padding:0 $(main.padding) $(main.margin)} [data-boxed='false'] #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);overflow:hidden;position:relative} /* ------ 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} #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);padding-top:7px;cursor:pointer;position:absolute;left:calc(50% - 15px);top:-15px;z-index:1} .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} .item-thumbnail img{display:none} /* ------ Email Subscription ------ */ aside .subscrib-sec p{margin:0 0 10px;color:$(aside.text);text-align:$startSide} #footer .subscrib-sec p{margin:0 0 10px;color:$(footer.text);text-align:$startSide} .subscrib-sec input[name="email"]{display:block;width:100%;padding:15px;margin:auto;line-height:0;outline:0;font-size:12px;border:0;border-radius:2px;direction:ltr;text-align:left} aside .subscrib-sec input[name="email"]{background-color:$(aside.line);color:$(aside.link)} #footer .subscrib-sec input[name="email"]{background-color:$(footer.line);color:$(footer.link)} .msg-send{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:#FFF;font-weight:700;cursor:pointer;position:relative;overflow:hidden;width:100%;color:$(grad.color)} .msg-send: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 Widget ------ */ .LinkList .widget-content li a, *:not(header) .PageList .widget-content li a{display:block;padding:13px 0;font-size:14px} .LinkList .widget-content li:first-child a, *:not(header) .PageList .widget-content li:first-child a{padding-top:0} aside .LinkList .widget-content li a,aside .PageList .widget-content li a{color:$(aside.link);border-bottom:1px solid $(aside.line)} footer .LinkList .widget-content li a,footer .PageList .widget-content li a{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"} *: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{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{color:$(aside.link)} footer .LinkList li a::before,footer .PageList .widget-content li a::before{color:$(footer.line)} 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;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;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .PopularPosts .item-thumbnail img{height:100%} .PopularPosts .item-thumbnail: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)} .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)} /* ------ Featured Post ------ */ .FeaturedPost h2{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} aside .FeaturedPost h2{color:$(aside.link)} footer .FeaturedPost h2{color:$(footer.link)} .widget.FeaturedPost h2:hover{color:$(keycolor)} aside .FeaturedPost p{color:$(aside.text)} footer .FeaturedPost p{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)} .BlogArchive .flat .archivedate a::before{color:$(step.color);display:inline-block;content:"\f08d";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);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} .label-size{float:$startSide;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:7px 15px;margin-$endSide:7px;margin-bottom:7px;-webkit-border-radius:2px;-moz-border-radius:2x;border-radius:2px;font-size:14px;color:$(grad.color);font-weight:700} .label-size a::before{content:"\f02b";font-family:fontawesome;display:inline-block;vertical-align:top;margin-$endSide:5px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;margin-top:-4px;font-size:14px;padding-top:5px;text-align:center;font-weight:400} .label-size:hover{-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);-moz-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)} .list-label-widget-content a{display:block;padding:5px 0} .label-size .label-count{display:none} .label-size:hover a:before{-webkit-animation:label .3s ease-in-out;-moz-animation:label .3s ease-in-out;-o-animation:label .3s ease-in-out;animation:label .3s ease-in-out} @-webkit-keyframes label { 50%{-webkit-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);transform:rotate(-60deg)} } @-moz-keyframes label { 50%{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);transform:rotate(-60deg)} } @-o-keyframes label { 50%{-webkit-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)} } @keyframes label { 50%{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-o-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;-o-transition:.3s ease-out;-moz-transition:.3s ease-out;transition:.3s ease-out;width:20px;font-size:18px;text-align:$endSide} aside .list-label-widget-content .label-name::before{color:$(aside.line)} footer .list-label-widget-content .label-name::before{color:$(footer.line)} .list-label-widget-content .label-name:hover::before{content:"\f07c";color:$(keycolor)} 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

تحالف مكة ليس الحل .. الحل في وحدة العالم الإسلامي وإسقاط جدران الصراع جريدة الراصد 24



بقلم : يوحنا عزمي


بخصوص ما يُعرف بتحالف مكة بين تركيا وباكستان والمملكة العربية السعودية، فقد قلت منذ البداية إنه يمثل نقطة تحول استراتيجية مهمة ، بل وكنت من أوائل من دعوا ، منذ فترة طويلة ، إلى قيام مثل هذا النوع من الترتيبات والتحالفات بين الدول الإسلامية، والمقالات التي تناولت فيها هذه الرؤية لا تزال موجودة على الصفحة ويمكن الرجوع إليها.


ومن المهم هنا أن نفرق بين الترحيب بهذا التحالف وبين المبالغة في تقدير قدرته أو تحميله ما لا يحتمل. فمن زاوية استراتيجية بحتة، فإن مجرد جلوس دول إسلامية مؤثرة على طاولة واحدة لبناء إطار أمني وسياسي مشترك يمثل تطوراً إيجابياً، لأنه يكسر، ولو جزئياً، حالة الجليد وانعدام الثقة التي ظلت تحكم العلاقات بين كثير من الدول الإسلامية لعقود طويلة.


هذه الحالة تحديدًا كانت واحدة من أهم نقاط الضعف في العالم الإسلامي؛ فبدلًا من أن تمتلك الدول الإسلامية منظومة أمن جماعي نابعة من داخلها، أصبحت في كثير من الأحيان تعتمد على قوى خارجية لحماية أمنها ومصالحها، وهو اعتماد لم يكن مجانياً في السياسة الدولية ، لأن من يمتلك أدوات الحماية يمتلك، في المقابل، جزءًا من أدوات التأثير والضغط والابتزاز السياسي، وقد يدفع الطرف الأضعف ثمنًا باهظًا عندما تتعارض مصالحه مع مصالح القوة التي يعتمد عليها.


ومن هذا المنطلق تحديداً ، فإنني أعتبر تحالف مكة تطوراً استراتيجياً مهماً، وأراه خطوة في الاتجاه الصحيح ، ليس لأنه يمثل نهاية الطريق ، وإنما لأنه قد يكون بداية لكسر نمط تاريخي طويل من الاعتماد على الخارج.


لكن هنا يجب أن نكون واضحين جداً ، وأن نضع النقاط فوق الحروف، لأن السياسة لا تحتمل المجاملات، والاستراتيجيات الكبرى لا تُبنى على الأمنيات.


هل هذا التحالف كاف وحده؟ الإجابة بكل وضوح، لا.


وهل هو تحالف موجه ضد إيران أو ضد حلفائها؟ الإجابة أيضاً : لا، ومن السذاجة السياسية أن يتم اختزال المشهد بهذه الطريقة. أي شخص لديه قدر معقول من المعرفة بالتوازنات الإقليمية والدولية يستطيع أن يدرك أن بناء إطار أمني بين ثلاث دول إسلامية لا يعني بالضرورة تأسيس جبهة عسكرية ضد دولة إسلامية أخرى. بل إن قراءة التحالف بهذه الطريقة قد تكون من أخطر القراءات الممكنة ، لأنها تحول خطوة يمكن أن تكون مدخلًا إلى بناء منظومة أمن إقليمية أوسع إلى أداة جديدة للاستقطاب والانقسام.


دعونا لا نعيد إنتاج المشكلة نفسها التي نحاول الخروج منها.


فإذا كان الهدف هو بناء أمن إسلامي مستقل ، فلا يمكن أن يكون الطريق إلى ذلك هو تأسيس تحالفات إسلامية في مواجهة تحالفات إسلامية أخرى. لأننا   في هذه الحالة لا نكون قد حللنا الأزمة، وإنما قمنا بإعادة توزيع أطرافها فقط.


وهنا يأتي السؤال الأهم: هل يستطيع هذا التحالف وحده أن ينهي الصراعات القائمة؟ هل يستطيع بمفرده أن يضمن الأمن للمملكة العربية السعودية؟ هل يمكن أن يكون بمفرده مظلة كافية لحماية المنطقة من جميع التهديدات؟


الإجابة مرة أخرى : لا.


الأزمات التي تراكمت على مدى عقود لا يمكن حلها بمجرد إنشاء إطار عسكري أو أمني جديد. المسألة أكبر بكثير من عدد الجنود والطائرات والصواريخ، لأن جذور الصراع سياسية وأمنية واستراتيجية، وبعضها مرتبط بانعدام الثقة المتبادل، وبعضها الآخر مرتبط بتضارب المصالح والنفوذ والهواجس الأمنية المتراكمة بين دول المنطقة.


ولهذا قلت مراراً ، وفي أكثر من مناسبة، إنني لا أرى الحل العسكري طريقاً نهائياً لهذه الأزمة، ولن يكون كذلك مهما طال أمد الصراع أو ارتفعت مستويات التوتر.


الحل الحقيقي ، من وجهة نظري ، ليس أن تنتصر دولة إسلامية على دولة إسلامية أخرى ، ولا أن تتشكل جبهة إسلامية لمواجهة جبهة إسلامية أخرى، وإنما أن نصل إلى مرحلة يصبح فيها الصراع نفسه بلا ضرورة.


وهنا أصل إلى جوهر المبادرة التي طرحتها منذ فترة طويلة، وقبل اندلاع الحرب الحالية أصلًا، والتي لا تزال مقالاتها موجودة على الصفحة ويمكن الرجوع إليها لفهم تفاصيلها بصورة أكبر.


أنا أطرح بوضوح فكرة توحيد الدول الإسلامية سياسياً ضمن إطار مؤسسي قائم على التوافق ، بحيث تكون إيران جزءًا من هذا الإطار ، لا خصماً له، وتكون تركيا والسعودية وباكستان وبقية الدول الإسلامية أطرافاً في منظومة واحدة ، لكل دولة فيها مصالحها وسيادتها وخصوصيتها، ولكن الجميع يلتزم بقواعد مشتركة ومعاهدات واضحة تنظم الخلافات وتمنع تحولها إلى صراعات مفتوحة.


وهنا تكمن الفكرة الأساسية التي أراها مختلفة جذرياً عن منطق التحالفات التقليدية: بدلًا من أن نسأل كيف نبني تحالفًا إسلاميًا ضد إيران، علينا أن نسأل كيف نبني منظومة إسلامية لا تحتاج أصلًا إلى التحالف ضد أي دولة إسلامية.


الفرق بين السؤالين هو الفرق بين إدارة الصراع وإنهاء الصراع.


أنا لا أطرح هذه الرؤية باعتبارها شعاراً عاطفياً عن الوحدة، ولا باعتبارها أمنية رومانسية منفصلة عن الواقع. الوحدة التي أتحدث عنها تحتاج إلى مؤسسات، ومعاهدات، وآليات فض نزاعات، وضمانات متبادلة، وتوافق سياسي، وترتيبات أمنية واقتصادية، وقواعد واضحة تحمي سيادة الدول وتمنع استخدام القوة في تسوية الخلافات.


فالحديث عن الوحدة دون الإجابة عن سؤال : ماذا سيحدث في اليوم التالي؟ هو مجرد خطاب إنشائي.


أما الرؤية الاستراتيجية الحقيقية فتبدأ من اليوم التالي.


كيف تُدار الخلافات؟ كيف تُحل النزاعات؟ كيف تُضمن الحدود؟ كيف تُحترم سيادة الدول؟ كيف تُبنى منظومة أمن جماعي؟ كيف تُدار المصالح الاقتصادية المتعارضة؟ وكيف نضمن أن يتحول الاختلاف من سبب للحرب إلى وسيلة للتفاوض؟


هذه هي الأسئلة التي يجب أن تُطرح إذا كنا نتحدث بجدية عن مشروع تاريخي وليس مجرد شعار.


ومن وجهة نظري، فإن إدخال إيران في هذه المنظومة تحديداً ليس تفصيلًا ثانوياً، بل هو جوهر الحل. لأن بناء منظومة إسلامية تستثني دولة بحجم إيران، ثم محاولة فرض الأمن عليها أو مواجهتها عسكرياً، يعني أن بذرة الصراع ستظل موجودة داخل النظام نفسه.


أما إذا أصبحت إيران جزءًا من منظومة توافقية ، فإن كثيراً من الملفات التي تبدو اليوم مستعصية يمكن نقلها من ساحات الصراع إلى غرف التفاوض والمؤسسات المشتركة.


وبحسب ما أشرت إليه في مقالاتي السابقة، فقد صدرت من الجانب الإيراني مواقف إيجابية تجاه فكرة الوحدة بالشكل الذي أطرحه ، ووصلت رسائل الترحيب بها إلى مستويات قيادية عليا، وبالتالي فإن الكرة، من وجهة نظري، ليست في ملعب طرف واحد.


المطلوب هو أن تتحول هذه الأفكار من ردود أفعال إلى مشروع سياسي واضح.


وأنا أقول ذلك لأنني أعتقد أن عامل الوقت أصبح بالغ الخطورة.


هذه المبادرة طرحت قبل الحرب الحالية، ولو كان هناك في ذلك الوقت استعداد حقيقي للتعامل معها بجدية ، فربما كانت المنطقة قد تجنبت الوصول إلى مستويات التصعيد التي نراها اليوم. وكلما تأخر الحل السياسي، أصبح الوصول إليه أكثر صعوبة، لأن الحروب لا تقتل البشر فقط، وإنما تقتل أيضاً الثقة، وتراكم الكراهية ، وتخلق أجيالًا كاملة ترى الطرف الآخر باعتباره عدواً وجودياً.


وهنا تكمن أخطر نقطة.


هناك فرق بين الصراع السياسي، والصراع الذي يتحول إلى صراع وجودي.


الصراع السياسي يمكن احتواؤه بالتفاوض والتنازلات والضمانات.


أما عندما يتحول الصراع إلى معركة وجود، فإن مساحة التسوية تضيق تدريجياً ، ويصبح الميدان هو اللغة الوحيدة التي يفهمها الجميع، وعندها قد نصل إلى نقطة اللاعودة التي لا أتمنى أن نصل إليها بأي شكل من الأشكال.


لأن المنتصر في صراع إسلامي طويل لن يكون منتصراً بالمعنى الحقيقي.


حتى لو انتصرت دولة على أخرى، فإن الخسارة الكبرى ستكون خسارة الأمة نفسها، وخسارة فرصة تاريخية لبناء توافق يمكن أن يستمر لعقود وقرون.


نحن لا نتحدث هنا عن أزمة عابرة أو خلاف سياسي محدود، وإنما عن لحظة يمكن أن تحدد شكل المنطقة لعقود طويلة قادمة.


ولهذا فإنني أعتقد أن المسؤولية التاريخية اليوم أكبر من الحسابات السياسية قصيرة المدى.


نحن أمام مرحلة تأسيسية يمكن أن تعيد تشكيل مستقبل العالم الإسلامي، ولذلك لا يجوز أن نتعامل معها بعقلية رد الفعل أو بمنطق الثأر السياسي أو الحسابات الضيقة.


نحن بحاجة إلى رؤية تمتد إلى ما بعد الأزمة الحالية، وإلى ما بعد الأشخاص والحكومات ، وإلى ما بعد حدود الجغرافيا السياسية الحالية.


إذا كنا فعلًا نريد بناء مستقبل مختلف، فعلينا أن نتوقف عن السؤال: من سينتصر على من؟ ونبدأ في السؤال: كيف نخرج جميعًا من هذه الدائرة رابحين؟


هذه ليست مثالية سياسية ، وإنما هي في رأيي أكثر واقعية من الاعتقاد بأن الحروب تستطيع إنتاج أمن دائم.


لأن الأمن الذي يحتاج إلى حرب جديدة كل عدة سنوات ليس أمناً حقيقياً، والتحالف الذي يحتاج دائماً إلى عدو كي يستمر ليس منظومة استقرار، والوحدة التي تقوم على استبعاد طرف آخر ليست وحدة كاملة.


المطلوب هو بناء إطار يجعل الخلافات قابلة للإدارة، ويجعل الحرب خياراً مستحيلًا أو مكلفاً سياسياً على الجميع، ويخلق مصالح مشتركة تجعل السلام أكثر فائدة من الصراع.


وهذا هو جوهر الرؤية التي أطرحها.


قد يختلف البعض معها، وقد يرى آخرون أنها صعبة أو بعيدة المنال، وهذا طبيعي في كل مشروع استراتيجي كبير. لكن ما أؤمن به أن صعوبة التنفيذ لا تعني غياب الحاجة إليه.


والتاريخ لا يتغير دائماً عندما تكون الأفكار سهلة، وإنما عندما يدرك الناس أن البديل أصبح أكثر كلفة من التغيير.


لهذا أقول إن مسار الحل بالنسبة لي واضح، وليس من الحكمة أن نستمر في البحث عن الحل الأصعب بينما الحل السياسي والاستراتيجي الممكن موجود أمامنا.


لا نحتاج إلى مزيد من الحروب حتى نكتشف أن الحرب لا تنهي كل شيء.


ولا نحتاج إلى مزيد من الدماء حتى نعرف أن الكراهية المتبادلة لا تبني مستقبلًا.


ولا نحتاج إلى مزيد من الاستقطاب حتى ندرك أن العالم الإسلامي ظل يدفع ثمن انقسامه لعقود طويلة.


آن الأوان لأن نغلق هذه الصفحة، وأن نبدأ عصرًا جديداً من التعاون الإسلامي بصيغة عصرية حديثة، لا تلغي الدول ولا سيادتها ولا خصوصيتها، وإنما تجمعها في إطار سياسي وأمني واقتصادي قادر على إدارة الخلافات بدلًا من تحويلها إلى حروب.


قد تكون أمامنا فرصة تاريخية نادرة ، وربما لا تتكرر.


وإذا ضاعت هذه الفرصة، فقد لا يكون من السهل إعادة إنتاجها مرة أخرى، لأن الصراعات كلما طالت تحولت من خلافات سياسية إلى ذاكرة جماعية من الكراهية، وعندها يصبح علاجها أصعب بكثير.


لذلك، فإن المطلوب اليوم ليس مزيداً من الأحقاد، ولا المزيد من الأوهام، ولا المزيد من الرؤى الضيقة.


المطلوب شجاعة سياسية حقيقية.


شجاعة تجعلنا نفكر في المستقبل بدلًا من الانتقام من الماضي.


وشجاعة تجعلنا نضع مصلحة الأمة فوق الحسابات المرحلية.


وشجاعة تجعلنا ندرك أن تأسيس منظومة توافق إسلامية حقيقية قد يكون واحدًا من أهم المشاريع الحضارية التي يمكن أن تُبنى في عصرنا.


نحن، في النهاية، لا نؤسس لتحالف عابر ينتهي بانتهاء أزمة، وإنما إذا نجحنا في بناء منظومة حقيقية للتوافق، فنحن نضع أساسًا يمكن أن يحدد شكل علاقات هذه الدول لأجيال طويلة قادمة.


ولهذا أقول مرة أخرى : تحالف مكة خطوة مهمة وإيجابية ، لكن لا ينبغي أن نتعامل معه باعتباره نهاية الطريق.


هو يمكن أن يكون بداية الطريق.


أما النهاية الحقيقية، في رأيي، فهي أن نصل إلى مرحلة لا تحتاج فيها الدول الإسلامية إلى التحالف ضد بعضها ، لأننا نكون قد أزلنا أسباب العداوة من جذورها، ووضعنا بدلًا منها نظاماً واضحاً للتوافق والتعاون وحل النزاعات.


هذه هي المعركة الحقيقية.


ليست معركة من ينتصر على من، وإنما معركة هل نستطيع أن نخرج من قرون الانقسام إلى عصر جديد من التوافق.


والاختيار في النهاية ليس بين طرف منتصر وطرف مهزوم، وإنما بين مستقبل نبنيه بإرادتنا، ومستقبل قد تفرضه علينا الحروب إذا استمررنا في تجاهل الفرصة.


ولهذا أتمنى أن يكون الجميع على قدر المسؤولية التاريخية، لأن أمتنا لا تحتمل المزيد من القرارات الاستراتيجية الخاطئة التي دفعت بها إلى هذا القدر من الانقسام والضعف.


والوقت، أكثر من أي وقت مضى، ليس في صالحنا.


ومن أراد فهم المبادرة بصورة أعمق، فعليه الرجوع إلى المقال الأخير والمقالات السابقة التي شرحت فيها الرؤية وتفاصيلها، لأن ما أطرحه ليس موقفاً طارئاً فرضته الأحداث، وإنما رؤية طرحتها قبل اندلاع الحرب، وما زلت أؤمن بها اليوم بالقدر نفسه.


فالسياسة قد تتغير، والحكومات قد تتغير، والتحالفات قد تتغير، لكن الفرصة التاريخية إذا ضاعت قد لا تعود.


تعليقات
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق