> 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

عمليات البحرية المصريه ضد ميناء إيلات الإسرائيلى. جريده الراصد24

 

مقاله بقلم  جرجس ابادير

بعيدا عن فيلم الطريق الي ايلات 

و ما ذكر من احداث غير دقيقه

عملية ميناء ايلاث هي مجموعة من العمليات المتتاليه

تواريخ الاغارة علي ميناء إيلات

من نوفمبر 1969م حتى مايو 1970م

الاغارة الاولي 8 نوفمبر 1969م

لم تتم لظروف حدثت منعت اتمام العملية

الاغارة الثانية 15 نوفمبر 1969م

تم فيها إعطاب سفينة الانزال هداليا و هيداروما

الاغارة الثالثة 6 فبراير 1970م

تم فيها اغراق السفينة بات يام و إعطاب بات شيفع

الاغارة الرابعة 28 أبريل

لم تتم لظروف حدثت منعت إتمام العملية

الاغارة الخامسة 15 مايو 1970م

تم فيها تدمير الرصيف الحربي وقتل عدد كبير

من الضفادع البشرية الاسرائيلية

عمليه ايلات1  

تم تدمير سفينتين تجاريتين إسرائيليتين 

 هيدروما   و  داليا 

كانت الصحف المصرية والعربية والعالمية

 تشيد بهذه العملية البحرية الانتحارية الجريئة 

التي قامت بها القوات المصرية خلف خطوط العدو الإسرائيلي

و الخسائر الجسيمة التي أَوْقَعَتْها بالعدو

مما كان له أكبر الأثر في رفع الروح المعنوية للقوات المصرية 

قد استمع أفراد المجموعة المنفذة للعملية

وهم في شوارع عمان في اليوم التالي

إلى تعليقات الشعب الأردني المعبرة عن فرحتهم بتنفيذ العملية.

عند التخطيط لعودة أفراد العملية إلى القاهرة 

بعد تنفيذها كانت هناك مخاوف من أن تجبر إسرائيل 

طائرة الطيران الأردني التي سيركبها أفراد العملية على النزول 

لو عَلِمَ الإسرائيليون بهوية أفراد العملية أو هوية أحد منهم

لذا تم نقل أفراد العملية متفرقين إلى دمشق  

ثم بيروت منهما ركبوا عائدين جوًّا إلى القاهرة

قبل تنفيذ العملية بيوم تقريبًا

كان الرأي أن تعلن ان منظمة فتح الفلسطينية

 هي المسئوله عن تنفيذ العملية 

لكن بعد أن تمت العملية بنجاح تغيَّر القرار

تقرَّر أن تعلن مصر مسؤوليتها عن العملية بعد الحصول

 على موافقة مسبقة من الرئيس جمال عبد الناصر

للتمويه نُشِرت مقالة في جريدة الأهرام  

 على لسان قائد مجموعات الضفادع البشرية 

الذي لم يكن قد عاد إلى القاهرة بعد

قصة مفبركة بعيدة كل البعد عما حدث فعلًا 

في عملية تدمير السفينتين الإسرائيليتين

فصوَّرت العملية على غير حقيقتها 

بأن منفذي العملية وصلوا إلى مشارف إيلات بطائرة هليكوبتر مصرية 

طارت على ارتفاع منخفض لمنع اكتشافها بالرادارات

 تم هبوطها في منطقة نائية قرب طابا على ساحل خليج العقبة

منها كان نزول الضفادع البشرية بمعداتهم إلى الماء ثم دخول ميناء إيلات 

ثم اقترابهم من السفينتين الراسيتين فيه 

تثبيت الألغام فيهما مع ذكر بعض المعلومات الفعلية عن ظروف العملية داخل الميناء 

مع تخيُّل بعض المصاعب وكيفية التغلب عليها

ثم نهاية القصة بالعودة إلى الطائرة

إقلاعها بهم مرة أخرى عائدين سالمين إلى أرض الوطن

كان الغرض من ذكر تلك القصة المفبركة عدم الإفصاح عن حقيقة الطريقة 

التي تم بها تنفيذ العملية لصرف نظر العدو عن حقيقة 

ما حدث عدم الكشف عن تفاصيل العملية 

التي قد تَضُرُّ في المستقبل بأي عملية أخرى شبيهة لها 

لإمكانية العودة لمهاجمة ميناء إيلات من جديد وهو ما حدث بالفعل بعد ذلك.

كانت تلك العملية البحرية في إيلات هي أول عملية

 تقوم بها القوات الخاصة من الضفادع البشرية المصرية منذ نشأتها عام 1954م

فكان للعملية صدى عالمي رفع من الروح المعنوية 

للقوات المسلحة المصرية تم عمل احتفال شعبي وعسكري 

تم منح ابطال البحرية النياشين والأوسمة

 سادت إسرائيل حالة من الغضب الشديد نتيجة الخسائر 

الكبيره و قدرة القوات المصرية على الوصول إلى إيلات 

 هددت إسرائيل الأردن بالانتقام 

عملية إيلات الثانية

لم يتم ضرب السفينة  بيت شيفع و السفينه بيت يام 

 الحربيتين في العملية الأولى في ميناء إيلات

بل شاركت السفينة بيت شيفع  بعدها في العدوان الإسرائيلي

 على جزيرة شدوان المصرية لكن السفينة احتاجت بعد عودتها

 إلى البقاء في ميناء إيلات لإجراء بعض الإصلاحات

فكانت تلك فرصة مواتية لضربها

توجَّه أحد الضباط البحريه المصريه إلى عمان عاصمة الأردن

 في طائرة مدنية وهو يحمل جواز سفر مصريًّا مدنيًّا

 ذلك للدراسة على الطبيعة و وضع تفاصيل العملية القادمة

 خاصة مع توقع زيادة الإجراءات الأمنية الإسرائيلية 

في ميناء إيلات بعد العملية الاولي 

 بعد تمام الاستعداد والاتفاق على كافة الترتيبات

تم اختيار وإعداد الأفراد لتنفيذ عملية ايلات 2

 تم إعداد جواز سفر مدني لكل فرد منهم بوظيفة وهمية

 على أن ينتظر الجميع صدور الأوامر 

سافرت المجموعة مع المعدات اللازمة إلى مطار H3في العراق

 قرب الحدود الأردنية حيث استقلوا عربات تابعة لمنظمة فتح الفلسطينية 

نقلتهم إلى العاصمة الأردنية عمان ذلك في يوم 3 نوفمبر 1970م

في يوم العملية انطلق من عمان أربعة أفراد على مجموعتين

 متوجهين إلى ميناء العقبة الأردني لتنفيذ العملية

 في منتصف الطريق حملتهم عربة أخرى تابعة للجيش الأردني

 يقودها ضابط أردني تم اختياره للتعاون مع المجموعة حتي وصلوا العقبه

 كانت المسافة بين شاطئ العقبة وميناء إيلات نحو 5.5 كيلومتر 

تحتاج سباحة بالمعدات في نحو ثلاث ساعات ونصف الساعة.

كان البحر صعبًا والمياه شديدة البرودة علاوه علي  مرور لنشات إسرائيلية

 فتوقفوا لفترة عن السباحة ثم فوجئوا بنفاد الأكسجين

 من أحد الافراد فسمح له بالعودة إلى العقبة

كانت التعليمات صريحة أنه إذا وجدت المجموعة 

أنها غير قادرة على دخول الميناء 

لشدة الإجراءات الأمنية فيه فعليهم بالعودة فورا

لكن الجميع كانوا مصممين على تنفيذ العملية مهما كانت التضحيات والظروف

 مرَّ أفراد المجموعة من تحت الشباك التي تغلق الميناء 

وقاموا بالسباحة بعرض الميناء بحثًا عن السفينتين المطلوب تدميرهما

 رغم شدة الظلام وسماع أصوات لنشات إسرائيلية تمر قريبًا منهم

 و هي تلقي في الماء عبوات من الألغام المضادة للأفراد

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

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

أي متسلل نحوهما خاصة أن المياه في الميناء شفافة جدًّا

 غطس الثلاثة تحت الماء على مسافة نحو 200 متر 

من السفينتين فردٌ منهم توجه بمفرده 

تجاه السفينة بيت يام 

الآخران تجاه السفينة  بيت شيفع 

قام الفرد المكلف بالسفينة بيت يام 

بقطع مسافة المائتي متر تحت الماء وهو يكاد يلتصق بالقاع

 لكي يتجنب إضاءة الكشافات القوية فاختار أسفل غرفة الماكينات مباشرة

التي عندها توجد المصافي التي تقوم بسحب مياه البحر لتبريد الماكينات 

نظرًا لوجود طحالب على جدار السفينة 

الذي يمنع إلصاق اللغم المغناطيسي الذي يحمله بجدار السفينة

 فقد قام بإزالة هذه الطحالب ثم تم تثبيت اللغم 

وضبط التايمر لينفجر بعد ساعتينثم غادر المكان مسرعًا

 سباحة خارجًا من الميناء عائدًا إلى ميناء العقبة الأردني.

أما المجموعة الثانية المكونة من فردين

التي توجهت إلى السفينة  بيت شيفع 

 فقد قامت بنفس العمل لكنها تأخرت في تثبيت اللغم

بنحو عشر دقائق عن زميلهما 

لذا تأخر انفجار السفينة  بيت شيفع 

عن انفجار السفينة  بيت يام  بهذه الدقائق العشر

 انسحب البطلان من المكان مسرعين سابحين خارجين 

من الميناء عائدين إلى ميناء العقبة الأردني.

بعد حوالي الساعتين المجموعة في منتصف طريق العودة

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

شوهدت كرة لهب رهيبة من النار صعدت عاليًا

أعقبها صوت انفجار عالٍ فشعر أفراد المجموعة جميعًا بالفرحة الشديدة

 بعد نحو عشر دقائق كان الانفجار الثاني في السفينة  بيت شيفع 

خرجت قوات اسرائيليه كبيرة للبحث عن المهاجمين

 منهم من كانوا في لنشات ترمي المفرقعات في مياه الميناء

و طائرات هليكوبتر تطلق طلقات مضيئة

بينما كان أفراد المجموعة غاطسين تحت الماء 

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

 في حالة شديدة من الإعياء والتعب حيث سلموا أنفسهم

 إلى الجنود الأردنيين المتواجدين في المنطقة

أخبروهم أنهم مصريون قاموا بعملية ضد ميناء إيلات مكررين 

ما قيل في العملية الأولى من أن هناك طائرة هليكوبتر مصرية أنزلتهم

 قرب طابا جنوب إيلات لتنفيذ العملية

ثم تعذر عليهم اللحاق بهذه الطائرة بعد تنفيذ العملية

 فسرعان ما ملأ المكان رجال المخابرات الأردنية 

الذين قاموا باستجواب أفراد المجموعة لفترة قليلة

ثم صدرت لهم الأوامر بنقلهم إلى عمان حيث تم احتجازهم هناك

ثم عادوا بعد ذلك من جديد إلى أرض الوطن حيث قابلهم قائد القوات البحرية

فقصوا عليه تفاصيل العملية كما وقعت نالوا على ذلك وسام النجمة العسكرية

توجه وزير الدفاع الإسرائيلي موشيه ديان 

إلى ميناء إيلات لمعرفة ما جرى عن قرب للبحث عن إجابة شافية

 حول كيفية وصول الضفادع البشرية إلى ميناء إيلات للمرة الثانية 

وتوجيه هذه الضربة العسكرية الناجحة 

خلال أقل من 8 أشهر تقرر بعدها ضرورة وضع خطة جديدة

 لتأمين ميناء إيلات والقطع البحرية داخله

عملية ميناء إيلات 3

تسببت العملية الثانية في ميناء إيلات 

في إغراق السفينة  بيت يام  إلا جزءًا من قمة أحد طرفيها ظل باقيًا مرتفعًا فوق الماء

 لعدة أشهر قبل تقطيعها ورفعها من المجرى الملاحي

أما السفينة بيت شيفع فسمح تأخر انفجارها عن السفينة الأولى بيت يام 

 سحبها إلى منطقة ضحلة فلم تتعرض للغرق

لكنها أصبحت تحتاج بعد الانفجار الذي تعرضت له 

إلى الإصلاح تم إصلاحها في وقت قصيرفعادت للعمل من جديد

 لكن وُضِعَ لها نظام جديد حيث تقوم بالإبحار الدائم خارج الميناء ليلًا

ثم تعود فتدخل الميناء نهارًا مع نظام حراسة دقيق

مع استخدام قنابل أعماق ليلية كل دقيقة لمنع أي تسلل اليها

تجددت الرغبة من جديد لدى قيادة مصر البحرية 

في محاولة إغراق السفينة عملية جديدة لم تُستكمل

كانت هناك فكرة انتحارية جريئة تقوم خلالها 

مجموعة من الضفادع البشريه بدخول ميناء إيلات

 عن طريق ميناء العقبة الأردني ليلًا حاملة لغمين

 ينتظروا داخل الجزء الظاهر من السفينة الغارقه  بيت يام 

حتى الصباح ينتظرون رسو السفينة  بيت شيفع 

في الصباح ليقوموا بالغطس و زرع اللغمين بها 

لتغرق تمامًا في مفاجأة لا يتوقعها العدو مطلقًا

رغم خطورة المحاولة واحتمال اكتشاف المجموعة نهارًا

 بالتالي تعرضها لخطر كبير إلا أن المجموعة

 قامت بالمحاولة في 27 إبريل 1970م 

وصلت بالفعل إلى مكان السفينة الغارقة بيت يام 

لكنها وجدت المكان لا يتسع للبقاء أو التواجد 

لفرد واحد منهم فيه حتى الصباح مما يعني 

سهولة اكتشاف المجموعة وفشل العملية 

صعوبة بقاء أحد أفراد المجموعة بكامل جسمه تحت الماء 

طوال فترة الانتظار لا يُمكِن بالتالي تنفيذ العملية

عملية ميناء إيلات 3

كانت فكرة العملية الجديدة تقوم على استخدام لغمين

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

بما يعادل ضعف قوة الديناميت العادي وزنها 150 كيلوجرام 

مع استخدام تايمر روسي الصنع حيث يتم زرع اللغمين أسفل رصيف الميناء 

في الساعة الثانية عشرة مساءً يوم 14 مايو 1970م

 بحيث ينفجران بعد 12 ساعة عند الظهيرة بعد نحو خمس ساعات من رسو السفينة 

بيت شيفع في الميناء

 الذي يكون عادة في الساعة السابعة صباحًا

 مما يتسبب في إحداث عطل جسيم في السفينة يبقيها بصفة دائمة في الميناء

فيمكن بعد ذلك تدميرها تم تنفيذ تلك الخطة

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

في سيارة جندي أردني عبروا إلى ميناء إيلات ليلًا 

رغم قذائف الأعماق التي كان يُسمع صوت انفجار 

عبوة منها كل دقيقتين تقريبًا

حتى كادت أن تصيب بعض أفراد العملية إصابة مباشرة

 بعد الوصول إلى رصيف الميناء و زرع اللغمين أسفل الرصيف

وجد أن اللغمين يطفوان فوق الماء مما يعني سهولة اكتشاف اللغمين

 والتعرف عليهما فقام أفراد العملية بخلع أحزمة الرصاص التي يلبسونها

 حول وسطهم يزن كل حزام منهم نحو ثلاثة كيلوجرامات 

ليساعدهم على الغوص تحت الماء فربطوا بها اللغمين

ثم سارعوا بالسباحة عائدين إلى ميناء العقبة الأردني

قد اضطروا إلى السباحة معظم الوقت فوق سطح الماء رغم ما كان مقررًا

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

 كما أن اللغم الأول انفجر في الساعة السابعة والنصف صباحًا

 مبكرًا قبل الموعد المقرر له ربما بسبب ما تعرضت له المجموعة

 من قذائف الأعماق التي أَثَّرَتْ في تايمر اللغم فانفجر قبل وقته المحدد له

قد أحدث الانفجار تلفيات كبيرة في رصيف الميناء على أثرها

 تم رفع درجة الطوارئ بالميناء تم على الفور إنزال أعداد من

 الضفادع البشرية الإسرائيلية لاستطلاع الموقف

 فإذا باللغم الثاني ينفجر بعد ساعتين من انفجار اللغم الأول

 أي في الساعة التاسعة والنصف صباحًا قبل الموعد المحدد له أيضًا

فأسفر انفجاره عن قتل عدد كبير من الإسرائيليين 

من الضفادع البشرية والفنيين العاملين في الميناء

قد شوهد بعدها عملية انتشال للجثث الإسرائيلية الكثيرة

 من الماء كما شوهدت ست عربات إسعاف تنقل جرحى مصابين 

من مبنى الضباط المقام خلف الرصيف الحربي مباشرة.

عادت المجموعة المصرية إلى ميناء العقبة الأردني

هناك سلمت نفسها كالمعتاد في كل مرة للقوات الأردنية المتواجدة 

هناك قابلوهم بالترحاب والفرحة والفخر بهم أمدوهم بالطعام والشراب

تكررت قصة الطائرة الهليكوبتر المصرية التي أنزلت المجموعة في طابا

 جنوب إيلات التي نفذت العملية لكن تعذر عليها اللحاق بالطائرة 

فاضطرت إلى اللجوء لميناء العقبة الأردني لم تَغْرَق السفينة بيت شيفع

 هذه المرة أيضًا لكنها اعتبرت منتهية الصلاحية 

بعد هذه الضربات التي وُجِّهَتْ لها فتم الإعلان بعد ذلك 

عن خروجها من الخدمة العسكرية

من نوادر عمليات ايلات للبحريه المصريه

ما حدث أثناء العمليه ايلات 2

قامت المخابرات الاردنيه باحتجاز ابطال البحريه 

و أنكروا وجودهم عندما السؤال عنهم من قياده العمليه

 حدث اتصال بالقاهرة

  كان الملك حسين موجودا فى القاهرة لحضور قمة للملوك والرؤساء العرب 

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

 فى أذن الرئيس عبدالناصر بتفاصيل الموقف فرفع الرئيس الجلسة 

اجتمع عبد الناصر مع الملك بحضور  فوزى 

الفريق محمد أحمد صادق رئيس أركان حرب القوات المسلحة المصرية

 قال عبد الناصر  للملك حسين 

 جلالة الملك أنت ضيف لدينا لحين عودة أولادنا المحتجزين لديك فى المخابرات الأردنية   

كانت النتيجة اختلاف المعامله ما هى إلا ساعات قليلة حتى رجعوا إلى مصر 

كانت عملية الهجوم الثانية على ميناء إيلات ناجحة

 أطلق عليها اسم  عملية الشهيد البرقوقى تخليدا للرقيب فوزى البرقوقى 

الذى استشهد فى العملية الأولى يوم 16 نوفمبر 1969م 

التي أدت إلى تدمير السفينتين  التجاريتين 

 هيدروما  و  داليا 

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

رغم صعوبة المهمة وراء نجاح الهدف منها قد أَثَارَ هذا الإصرار دهشة العالم

إذ لم يحدث في تاريخ البحرية أن تعرض ميناء ما 

للهجوم عليه ثلاث مرات كلها ناجحة في فترة زمنية قصيرة

فالمعروف والمتوقع عدم تكرار الهجوم على نفس الميناء 

اي ميناء خاصة في الموانئ العسكرية

حيث تُتَّخَذ فيه بالطبع أقصى درجات الحيطة والحذر 

بعد أول هجوم عليها لمنع تكرارها من خلال إلقاء العبوات المتفجرة الكثيرة

في أعماق المياه غير ذلك من أساليب الدفاع والحيطة

 التي يصعب معها الجرأة على محاولة تكرار مثل هذه العمليات الانتحارية 

مهما كانت شجاعة منفذيها

لم تكن عملية ميناء ايلات عمليه واحده كما يعتقد البعض لكنها 3 عمليات

 علاوه علي عمليتين لم تكتمل 

مجموع العمليات 5 عمليات في فتره صغيره

 انه اعجاز وانجاز للبحريه المصريه و رجالها العظماء


جرجس أبادير


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

إرسال تعليق