> 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

ر


كتب اشرف عبده 

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

ومن هذا المنظور، فإن قصة الطفلة «بسملة» ـ بحسب ما هو متداول عن الواقعة والصور المرتبطة بها ـ لا ينبغي أن تُقرأ باعتبارها مجرد حادث مروري مؤلم، وإنما باعتبارها مناسبة لفتح ملف أكبر: **عمالة الأطفال، ونقل العمالة غير المنتظمة، ومسؤولية أصحاب العمل والمتعهدين والأسر والجهات الرقابية عن حماية أرواح الأطفال والعمال.**

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

## بسملة.. حين تتحول الطفولة إلى مصدر دخل

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

وهنا يجب أن نتوقف أمام مفهوم خطير بدأ يتسلل إلى بعض البيئات الفقيرة: اعتبار عمل الطفل «مساعدة للأسرة».

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

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

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

## هل كانت بسملة تعمل؟ ومن كان يشغلها؟

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

السؤال القانوني الأهم هو:

**من قام بتشغيلها؟ ومن نظم العمل؟ وما طبيعة المهمة التي كانت تؤديها؟ وكم ساعة كانت تعمل؟ وهل كان العمل يهدد سلامتها أو صحتها أو يعوق تعليمها؟ ومن كان مسؤولًا عن نقلها؟**

هذه الأسئلة يجب أن توجه التحقيق.

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

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

## القانون المصري واضح في حماية الطفل

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

### الدستور المصري

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

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

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

## قانون العمل رقم 14 لسنة 2025

ومع دخول قانون العمل الجديد رقم **14 لسنة 2025** حيز التنفيذ، أصبح تنظيم تشغيل وتدريب الأطفال أكثر وضوحًا.

فالمادة 61 تعتبر كل من لم يبلغ 18 سنة طفلًا في تطبيق أحكام الفصل الخاص بتشغيل الأطفال، بينما تنص المادة 62 على **حظر تشغيل الأطفال قبل بلوغ 15 سنة**، مع السماح بالتدريب من سن 14 سنة وفق الضوابط القانونية وبما لا يعوق مواصلة التعليم.

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

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

وتحظر المادة 68 على الأبوين أو متولي أمر الطفل تشغيله بالمخالفة للقانون والقرارات التنفيذية.

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

## العمل الخطر محظور حتى بالنسبة إلى من بلغ السن المسموح بها

المسألة لا تتوقف عند سن الخامسة عشرة.

فحتى عندما يكون الطفل قد بلغ السن التي يسمح فيها القانون بالعمل، لا يعني ذلك أنه يستطيع القيام بأي عمل وفي أي ظروف.

فالعمل الذي يعرض صحة الطفل أو سلامته أو أخلاقه للخطر محظور، وتوجد قائمة بالأعمال والمهن والظروف الخطرة التي يحظر تشغيل الأطفال فيها، وفق القرار الوزاري رقم **215 لسنة 2021**.

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

ومن أمثلة الأعمال الخطرة، بحسب المعايير الدولية، الأعمال التي تتضمن حمل أوزان ثقيلة، أو التعامل مع آلات خطرة، أو العمل في ظروف قاسية، أو العمل لساعات طويلة أو ليلًا.

وهذا يجعل السؤال عن طبيعة العمل الزراعي الذي كان يؤديه الطفل أمرًا ضروريًا، لأن وصف العمل بأنه «زراعي» لا يجعله تلقائيًا عملًا آمنًا أو مسموحًا به للأطفال.

## قانون الطفل.. حماية إضافية

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

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

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

## وماذا تقول اتفاقية حقوق الطفل؟

الموضوع لا يقف عند حدود القانون المصري.

فمصر ملتزمة أيضًا باتفاقية الأمم المتحدة لحقوق الطفل.

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

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

وهنا تتضح الصورة أكثر:

**ليس من حق الطفل أن يدفع ثمن فقر أسرته من صحته وتعليمه وسلامته.**

## اتفاقيتا منظمة العمل الدولية 138 و182

على المستوى الدولي، توجد اتفاقيتان أساسيتان لمنظمة العمل الدولية بشأن عمالة الأطفال:

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

و**الاتفاقية رقم 182 بشأن أسوأ أشكال عمل الأطفال**، التي تلزم الدول باتخاذ إجراءات فورية وفعالة للقضاء على أخطر أشكال استغلال الأطفال.

ومصر صادقت على الاتفاقية 138 في **9 يونيو 1999**، وعلى الاتفاقية 182 في **6 مايو 2002**، وكلتاهما نافذتان بالنسبة إلى مصر.

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

## «النعوش الطائرة».. الوجه الآخر للمأساة

أما الجانب الآخر من القضية فهو وسيلة النقل.

الصور المتداولة في مثل هذه الحوادث، والتي تظهر أعدادًا كبيرة من العمال فوق أو داخل مركبات غير مخصصة لنقل هذه الأعداد، تطرح سؤالًا بالغ الخطورة:

**هل أصبح نقل العمالة الفقيرة يتم باعتبار البشر حمولة يمكن تكديسها، أم باعتبارهم أرواحًا لها حق في وسيلة نقل آمنة؟**

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

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

ولا يكفي بعد وقوع الحادث أن نسأل عن السائق فقط.

بل يجب أن يُسأل:

من استأجر المركبة؟

من جمع العمال؟

من حدد عدد الركاب؟

من تولى تنظيم الرحلة؟

هل كان هناك متعهد أو مقاول للعمالة؟

وهل كانت المركبة مرخصة ومجهزة لنقل الركاب بهذا العدد؟

وهل كان المسؤولون عن تشغيل العمال يعلمون بوجود أطفال بينهم؟

## الفقر ليس جريمة.. واستغلال الفقر جريمة أخلاقية

من الخطأ أن ننظر إلى الأسر الفقيرة باعتبارها المشكلة.

الأسرة التي تكافح من أجل لقمة العيش تحتاج إلى دعم، لا إلى إدانة.

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

الحل ليس في أن نقول للأب الفقير: «لا تجعل ابنك يعمل» ثم نتركه دون بديل.

الحل الحقيقي هو توفير:

* حماية اجتماعية حقيقية للأسر الأكثر احتياجًا.

* فرص عمل مناسبة للبالغين.

* دعم استمرار الأطفال في التعليم.

* رقابة على العمالة الزراعية غير المنتظمة.

* تسجيل ومتابعة الأطفال المعرضين للتسرب من التعليم.

* رقابة حقيقية على متعهدي العمالة.

* وسائل نقل آمنة ومخصصة لنقل العمال.

* عقوبات فعالة على كل من يثبت تعريض الأطفال للخطر.

## لا تجعلوا مأساة بسملة مادة للتشهير

هناك فارق كبير بين **المطالبة بالتحقيق والمحاسبة** وبين التشهير.

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

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

بسملة ليست عنوانًا لجمع التفاعل.

إنها طفلة فقدت حياتها، ومن حقها وحق أسرتها أن تُعامل قصتها باحترام.

## ماذا يجب أن يحدث بعد هذه المأساة؟

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

أولًا: **فتح تحقيق شامل** في ظروف تشغيل الأطفال الذين كانوا ضمن العمالة، وتحديد الجهة التي قامت بالتشغيل أو تنظيم الرحلة.

ثانيًا: **فحص قانونية وسيلة النقل** التي كانت تقل العمال، ومدى صلاحيتها وعدد الركاب المسموح به وظروف الرحلة.

ثالثًا: **التحقيق في وجود أطفال ضمن العمالة**، ومعرفة أعمارهم وطبيعة الأعمال التي كانوا يؤدونها.

رابعًا: **تطبيق قوانين حماية الطفل** على كل من تثبت مسؤوليته، سواء كان صاحب عمل أو متعهدًا أو مسؤولًا عن النقل أو ولي أمر، بحسب ما تسفر عنه التحقيقات.

خامسًا: **مراجعة منظومة نقل العمالة الزراعية غير المنتظمة**، لأنها لا ينبغي أن تظل خارج الرقابة بحجة أن العمال غير دائمين.

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

## بسملة ليست مجرد رقم في حادث

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

أن نبكيها أيامًا، ثم ننسى.

أن نتبادل صورها، ثم نغلق الملف.

أن نتهم هذا الطرف أو ذاك، ثم لا يتغير شيء.

المطلوب أن تتحول قصتها إلى سؤال دائم أمام كل مسؤول وكل صاحب عمل وكل متعهد وكل أسرة:

**هل أطفالنا آمنون؟**

فإذا كان الطفل في الثانية عشرة من عمره يعمل بدلًا من أن يتعلم، فهذه مشكلة.

وإذا كان العامل يُنقل في مركبة غير آمنة، فهذه مشكلة.

وإذا كان الفقر يدفع الأسرة إلى تشغيل أطفالها، فهذه مشكلة.

وإذا كانت القوانين موجودة ولا تُطبق، فهذه مشكلة أكبر.

## الخاتمة: حماية الطفل مسؤولية الجميع

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

إنها اختبار حقيقي لمنظومة حماية الطفل والعمل والنقل والرقابة الاجتماعية.

القانون المصري يضع حدًا أدنى لسن العمل ويحظر تشغيل الأطفال في الأعمال الخطرة، والدستور يكفل حماية الطفل من الاستغلال، واتفاقية حقوق الطفل تحظر الاستغلال الاقتصادي والعمل الذي يهدد صحة الطفل أو تعليمه، كما أن مصر ملتزمة باتفاقيتي منظمة العمل الدولية 138 و182 بشأن الحد الأدنى لسن العمل وأسوأ أشكال عمالة الأطفال.

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

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

ولعل الرسالة الأهم التي يجب أن تبقى بعد رحيلها هي:

**الطفل ليس عاملًا رخيصًا، والفقر ليس تصريحًا لاستغلاله، والعامل ليس حمولة، والطريق ليس ساحة للمغامرة بأرواح البشر.**

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

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

إرسال تعليق