/****************************** Article Page ******************************/ .article { display: inline-block; width: calc(100% - 320px); margin-left: 20px; background: none } .cd-articles::before { content: 'desktop'; display: none; } .cd-articles article { margin-top: 0; display: inline-block; float: right; width: 100%; padding: 15px 80px; background: #fff; border: 1px solid #e8e8e8; } .cd-articles article:first-child { margin-top: 0 } .articleDiv { position: relative; z-index: 2; display: inline-block; float: right; width: 100% } /** Aside (Akhbar Themak) **/ /*.articleDiv .cd-read-more{height:auto;margin-bottom:30px}*/ .articleDiv .cd-read-more li { counter-increment: articles; } /*.articleDiv .cd-read-more li a .imageCntnr {padding-bottom: calc((74px * 75) / 100);width: 74px;} .articleDiv .cd-read-more li .secName{right:98px;bottom: 3px;}*/ .articleDiv .cd-read-more .item::before { content: counter(articles); position: absolute; top: 10px; right: 0; width: 24px; height: 24px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; background: #fff; color: #E03322; font-family: Arial; font-weight: bold; font-size: 20px; text-align: center; line-height: 1.3; pointer-events: none; z-index: 1; } /*.articleDiv .cd-read-more.fixed {position: fixed;top:60px} .showSponsor .articleDiv .cd-read-more.fixed {top:120px}*/ .articleDiv .cd-read-more li:last-of-type a::after { display: none; } /* Reading */ .articleDiv .cd-read-more .item.reading em { color: #2a76e8; } .articleDiv .cd-read-more .item.reading svg { display: block; } .articleDiv .cd-read-more .item.reading::before { background-color: #E03322; color: #fff; } /* Read */ .articleDiv .cd-read-more .item.read em { color: #a6a6a6; } .articleDiv .cd-read-more .item.read::before { background-color: #d9d9d9; color: #bbb; } .articleDiv .cd-read-more .item.read .imageCntnr { opacity: 0.5 } .articleDiv .cd-read-more .item.read p { color: #555 } .articleDiv .cd-read-more li .secName.read { color: #555 } .articleDiv .cd-read-more li .secName.read:before { opacity: 0.5 } /** Breadcrumb **/ .breadcrumb { display: inline-block; width: 100%; float: right; padding: 0 0 4px; margin-bottom: 10px; border-bottom: 1px solid #e8e8e8; position: relative; z-index: 2; } .breadcrumb li { display: inline-block; float: right;transition:none } .breadcrumb li a {display:inline-block;float:right; font-size: 14px; color: #1d1d1d; direction: rtl;transition:none } .breadcrumb li a:after { content: "q"; display: inline-block;width:12px;height:22px; float: left; margin: 0 10px; font-size: 13px; line-height: 22px; } .breadcrumb li:last-child a:after { display: none } .breadcrumb li.active a { color: #E03322 } /********** BBC **********/ .News_BBC .ttl { border-bottom: 2px solid #bb1919 } .News_BBC .ttl h1, .News_BBC .ttl h2, .News_BBC .ttl h3 { display: none } .News_BBC .ttl img.bbcHeaderImg { display: inline-block; float: right; width: auto; height: 32px } .bbcTtl { display: none } .listing.News_BBC .ttl, .news.BBC .bbcTtl { border-bottom: none; background: #bb1919; } .news.BBC .bbcTtl { display: inline-block; float: right; width: 100%; margin-bottom: 30px; text-align: right } .listing.News_BBC .ttl a, .news.BBC .bbcTtl a { display: inline-block; float: right; width: 100%; } .listing.News_BBC .ttl img.bbcHeaderImg, .news.BBC .bbcTtl img.bbcHeaderImg { height: 36px } .news.BBC .bbcTtl img.bbcFooterImg { height: 30px } .news.BBC .breadcrumb { margin-bottom: 30px } /*.news.BBC .provider { display: none }*/ /** Article Header **/ article .articleHeader { display: inline-block; width: 100%; float: right; margin-bottom: 10px; position: relative; z-index: 2 } article .articleHeader h1 { font-family: DroidKufiBold, Arial; font-size: 26px; color: #1d1d1d; direction: rtl; margin-bottom: 12px; line-height: 1.6; } article .articleHeader .time { display: inline-block; font-size: 12px; color: #666666; float: right; direction: rtl; margin-top: 0} article .articleHeader .icon-time:before {content:'e'; float: right;margin-left: 4px; font-size: 12px; line-height: 22px;color:#666666} article .articleHeader .icon-time span:nth-of-type(2n):before {content: "c"; float: right; margin-left: 4px; font-size: 12px;line-height: 22px;color:#666666;position:relative} article .articleHeader .icon-time span:nth-of-type(2n):after {content:''; width:1px;height:14px;background:#666666 ;position:absolute;left: -9px;top: 50%;transform: translateY(-50%);} article .articleHeader .time span {margin-left:19px; position: relative;float: right; line-height: 22px} article .articleHeader .time span:last-of-type:after { display: none } article .articleHeader .zedSponsor { float: left; position: relative; display: inline-block;margin-top:-10px} article .articleHeader .zedSponsor p { float: right; display: inline-block; line-height: 60px; text-align: right; font-size: 12px; color: #666; cursor: auto } article .articleHeader .zedSponsor a { float: left } article .articleHeader .zedSponsor img { width: auto; height: 60px; border: none;margin-right: 10px;float:right } @media screen and (min-width: 320px) and (max-width: 1279px) { article .articleHeader .zedSponsor { float: right;margin-top:20px;width:100%} article .articleHeader .zedSponsor img{float:right;width:60px} } article .educationSpons { float: left; position: relative; display: inline-block;margin-top:-10px} article .educationSpons a { float: right } article .educationSpons img { width: 70px; height: auto; border: none;float:right } article .educationSpons a:last-child img{margin-right:15px} @media screen and (min-width: 320px) and (max-width: 1279px) { article .educationSpons { float: right;margin-top:20px;width:100%} article .educationSpons img{float:right} } /** Article Image **/ .imageCntnr{overflow:hidden} article .imgDiv { margin: 0 auto; overflow: hidden; width: 100%; position: relative; max-width: 810px; margin-bottom: 15px; position: relative; z-index: 1 } article .imgDiv .imageCntnr { padding-bottom: 56.25%; float: right; max-width: 810px; width: 100%; position: relative } article .imgDiv .imageCntnr img { width: 100%; height: auto; position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%,-50%) } article .imgDiv .desc { width: 100%; height: 30px; overflow: hidden; position: relative; top: auto; bottom: auto; left: auto; right: auto; border-bottom: 1px solid #EEE;} article .imgDiv .desc p { color: #666666; text-align: right; line-height: 30px; padding: 0; font-size: 13px; background: unset; height: 30px; font-size: 13px; width: 100%; } article .imgDiv.crctr .desc { display: none } article .sponserLogo{ display: inline-block; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none;} article .imgDiv .sponsorFrame{position:absolute;top:0;left:10px;width:130px;height:104px;background:url(../Images/sponsorLogoFrame.webp) no-repeat left top;z-index: 3; background-size: 100% 100%;} article .imgDiv .sponsorFrame img{display:inline-block;position:absolute; width: auto; height: 80px; top: 4px;left: 20px;} /** Article Write By **/ article .writeBy { display: inline-block; width: 100% } article .writeBy .writerImg { float: right; margin-left: 12px; width: 50px; height: 50px } article .writeBy .writerImg img { width: 50px; height: auto } article .writeBy p { float: right; font-size: 16px; color: #666; direction: rtl; line-height: 3 } article p { cursor: default } /** Article Details **/ article .details { display: inline-block; width: 100%; float: right; direction: rtl; margin-bottom: 40px; text-align: right; white-space: normal !important; margin-top: 0 !important; position: relative; z-index: 2; overflow: hidden } article .details, article .details p:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p), article .details h2, article .details span:not(.divVideoStep span, .spk-stand-wg .sp-wi-item span), article .details pre { font-family: DroidKufiLight, Arial !important; font-size: 15px !important; color: #1d1d1d !important; text-align: right !important; line-height: 2.2; margin: 12px 0; width: 100%; white-space: normal; cursor: auto } article .sp-inline .sp-inline-hightlight .heightlight, article .sp-inline .sp-inline-hightlight span { font-family: DroidKufiLight, Arial !important; font-size: 15px !important; color: #1d1d1d !important; font-weight: bold; } article .details p a[data-saferedirecturl] { width: 100%; display: inline-block; float: right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; direction: ltr; } article.paginationDiv .details h3 { float: left; width: 300px } article.paginationDiv .details .pagingDtls { width: 100%; } article.paginationDiv .details p.WizImg { text-align: right !important; float: right; width: calc(100% - 320px); margin-right: 0; margin-left: 20px } article.paginationDiv .details p.WizImg img:not(article .details .divVideoStep .ivbsThumbWrapper>img) { margin: 0; width: 100%; height: auto; } article .details p:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p) { width: 100%; } article .details ul { display: inline-block; width: 100%; padding-right: 36px; } article .details li { list-style-type: square; display: list-item; margin: 15px 0; width: 100%; font-size: 16px; color: #1d1d1d; text-align: right; direction: rtl; cursor: default; font-style: italic } article .details h2 { font-family: DroidKufiBold, Arial !important; margin: 30px 0 0; font-size: 15px !important; } article .details p a { color: #777; position: relative } /*article .details p a:before{content:"";height:1px;background:#777;width:100%;position:absolute;right:0;bottom:1px}*/ /*article .details p .kwhd{white-space:nowrap}*/ article .details p .kwhd:before { width: calc(100% - 12px); right: 6px } article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img) { margin: 40px calc((100% - 600px) / 2); height: auto; width: 600px } article .details blockquote { display: inline-block; float: right; position: relative; width: 100%; margin: 15px 0; padding: 36px 24px 0 0; border-right: 3px solid #ccc } article .details blockquote:before { content: "E"; font-size: 36px; line-height: 1; color: #ccc; position: absolute; top: 0; right: 24px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } article .details blockquote p { font-style: italic; color: #666 !important } article .details iframe:not([src*="facebook.com"]) { margin: 40px calc((100% - 600px) / 2) !important; height: 450px; width: 600px; display: inline-block; position: relative !important; } article .details iframe#frmPAVast { margin: 0; width: unset; height: unset } article .details iframe.instagram-media { position: relative !important; min-height: 595px } article .details .pattern01 iframe { margin: 0 !important; width: 100%; height: 84px; background-color: #f8f8f8 } article .details P.facebookVideoT:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p) { width: 350px; position: relative; padding-bottom: calc((350px * 178) / 100); margin: 20px calc((100% - 350px) / 2); float: right } article .details P.facebookVideoT iframe { width: 100%; height: 100%; right: unset; left: 50%; transform: translateX(-50%); position: absolute !important; margin: 0 !important } article .details p iframe { width: 400px; float: right; margin: 0 } article .details p.facebookVideoW:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p) { width: calc(100% - 100px); position: relative; padding-bottom: calc((calc(100% - 100px) * 56.25)/100); margin: 40px calc((100% - calc(100% - 100px))/2); } article .details p.facebookVideoW iframe { width: 100%; height: 100%; right: unset; left: 50%; transform: translateX(-50%); position: absolute !important; margin: 0 !important } article .details p.facebookVideoS:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p) { width: 350px; position: relative; padding-bottom: calc((350px * 100) / 100); margin: 40px calc((100% - 350px) / 2) } article .details p.facebookVideoS iframe { width: 100%; height: 100%; right: unset; left: 50%; transform: translateX(-50%); position: absolute !important; margin: 0 !important } article .detailsarticle .details .twitter-video { margin: 24px auto !important } article .details .twitter-video iframe { margin: 0 auto; height: auto; width: 100% } div[id^="pa_1x1_psbk_"] { clear: none !important } article .details .flourish-embed iframe { margin: 0 !important } article .details .aries_stage, article .details .aries_stage.aries_horizontalAxis{width:100%;height:260px} /** Article Pagination **/ article .pagination { display: inline-block; width: 100%; float: right; text-align: center; margin-bottom: 50px; position: relative; z-index: 2 } article .pagination ul { margin: 0 auto; text-align: center; display: inline-block } article .pagination ul.PCount { margin: 0 20px } article .pagination ul li { float: right; border: 1px solid #ddd; margin: 0 2px } article .pagination ul li:hover { border: 1px solid #666 } article .pagination ul .liDots4, article .pagination ul .liDots7, article .pagination ul .liDots10, article .pagination ul .liDots13, article .pagination ul .liDots16, article .pagination ul .liDots19 { border: none !important } article .pagination ul li a, article .pagination ul li .dots { display: block; overflow: hidden; width: 30px; background: #f8f8f8; height: 30px; text-align: center; font-family: Arial; font-size: 16px; color: #595959; line-height: 2 } article .pagination ul li .dots { font-weight: bold; background: none } article .pagination ul li.nextPrev a { width: 55px; font-size: 14px; margin-left: 0; color: #1d1d1d } article .pagination ul li.nextPrev .icon-prev:hover:before, article .pagination ul li.nextPrev a:hover .prev { display: none } article .pagination ul li.nextPrev a:hover:before { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } article .pagination ul li.nextPrev a:before { display: block !important; } article .pagination ul li.current a { background-color: #444 } article .pagination ul li.nextPrev.disabled a { opacity: .2; cursor: default; } /*.paginationDiv .pattern01{margin-bottom:0}*/ .paginationDiv .pattern01 ul li { width: calc((100% - 32px) / 3) } .paginationDiv .pattern01 ul li:nth-child(5n) { margin-left: 16px } .paginationDiv .pattern01 ul li:nth-child(3n) { margin-left: 0 } .paginationDiv .pattern01 ul li:nth-last-child(-n+5) { margin-bottom: 16px; } .paginationDiv .pattern01 ul li:nth-last-child(-n+3) { margin-bottom: 0; } /* Prev */ article .pagination ul li.nextPrev .icon-prev:before { content: "r"; font-size: 14px; display: block; width: 100%; height: 30px; line-height: 2.4; font-weight: bold; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } article .pagination ul li.nextPrev a .prev { display: block; width: 100%; height: 35px; line-height: 5.2; font-size: 12px; color: #fff; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } /*article .pagination ul li.nextPrev .icon-prev:hover:before{-webkit-transform: translateY(-50px);-moz-transform: translateY(-50px);-ms-transform: translateY(-50px);-o-transform: translateY(-50px);transform: translateY(-50px);} article .pagination ul li.nextPrev a:hover .prev{-webkit-transform: translateY(-50px);-moz-transform: translateY(-50px);-ms-transform: translateY(-50px);-o-transform: translateY(-50px);transform: translateY(-50px);}*/ /* Next */ article .pagination ul li.nextPrev .icon-next:before { content: "q"; font-size: 14px; display: block; width: 100%; height: 30px; line-height: 2.4; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } article .pagination ul li.nextPrev a .next { display: block; width: 100%; height: 35px; line-height: 5.2; font-size: 12px; color: #fff; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } /*article .pagination ul li.nextPrev .icon-next:hover:before{-webkit-transform: translateY(-50px);-moz-transform: translateY(-50px);-ms-transform: translateY(-50px);-o-transform: translateY(-50px);transform: translateY(-50px);} article .pagination ul li.nextPrev a:hover .next{-webkit-transform: translateY(-50px);-moz-transform: translateY(-50px);-ms-transform: translateY(-50px);-o-transform: translateY(-50px);transform: translateY(-50px);}*/ /** Article Provider **/ article .provider { display: inline-block; width: 100%; float: right; margin-bottom: 40px } article .provider h2 { float: right; font-family: DroidKufiBold, Arial; font-size: 16px; color: #1d1d1d; margin-left: 10px; width: 130px; line-height: 2.5 } article .provider .providerImg { float: right; width: calc(100% - 140px); height: 40px; text-align: right; overflow: hidden } article .provider .providerImg img {margin-top: 9px; width: auto; height: 26px; } /** Next Link **/ article .nextLink { display: inline-block; width: 100%; float: right; margin-bottom: 60px; position: relative; z-index: 2 } article .nextLink .nextLinkTitle { float: right; font-family: DroidKufiBold, Arial; font-size: 15px; color: #1d1d1d; margin-left: 5px } article .nextLink a { float: right; font-size: 15px; color: #E03322; position: relative; direction: rtl; text-align: right } /** Elconsolto Link **/ .consoltoDiv { display: inline-block; width: 100%; float: right; margin-bottom: 40px; border-bottom: 1px solid #ddd; padding-bottom: 20px; position: relative; z-index: 2 } .consoltoLink { float: right; font-size: 15px; color: #1a3a4d; position: relative; direction: rtl; text-align: right; } /** Shift Link **/ .shiftDiv { display: inline-block; width: 100%; float: right; margin-bottom: 40px; border-bottom: 1px solid #ddd; padding-bottom: 20px; position: relative; z-index: 2 } .shiftLink { float: right; font-size: 15px; color: #ff6200; position: relative; direction: rtl; text-align: right; } /** Keywords **/ article .keywordsDiv { display: inline-block; width: 100%; float: right; margin-bottom: 0; position: relative; z-index: 1 } article .keywordsDiv .item { float: right; padding: 0px 15px; background: #E63B34; margin: 0 0 10px 10px; font-size: 14px; color: #fff; height: 36px; line-height: 2.6 } article .keywordsDiv .item:hover { background: #e2e2e2 } .dmPlayerCntnr{display:inline-block;float:right;width:100%;margin-bottom:30px} .dmPlayerCntnr p{display:inline-block;float:right;width:100%;font-family:DroidKufiBold,Arial!important;font-size:15px!important;margin-bottom:10px!important;cursor:auto!important} .dmPlayerCntnr .dm-player{display:inline-block;float:right;width:100%} #dailymotion-pip-large-viewport, #dailymotion-pip-small-viewport{--dm--pip-left: 0;--dm--pip-right: auto;transform: none!important;right: 0!important;bottom: 0!important;} .dailyvideoUp #dailymotion-pip-large-viewport, .dailyvideoUp #dailymotion-pip-small-viewport{bottom:82px!important} .dailyvideodownLAT #dailymotion-pip-large-viewport, .dailyvideodownLAT #dailymotion-pip-small-viewport{bottom:48px!important} article .pageLink{ display: inline-block;width: 100%; float: right; text-align: right; font-size: 15px; color: #330d46;font-family:DroidKufiBold,Arial;margin-bottom:10px} article .pageLink:nth-of-type(2n){margin-bottom:20px} article .pageLink span{color:#db7e08} @media screen and (min-width: 320px) and (max-width: 767px) { .dmPlayerCntnr p{font-size:14px!important} #dailymotion-pip-small-viewport{bottom: 40px!important;top: auto!important;height: 160px!important;width: 275px!important;} .dailyvideodownLAT #dailymotion-pip-small-viewport{bottom:50px!important} #dailymotion-pip-small-viewport iframe{transform:none!important;width:100%!important;height:100%!important} } /** News Feed **/ article .newsFeed { display: inline-block; float: right; width: 560px; margin: 0 calc((100% - 560px) / 2) 40px; background: #f8f8f8; padding: 14px 20px; border-radius: 6px; overflow: hidden } article .newsFeed a { display: inline-block; float: right; width: calc((100% - 60px) / 3); margin-left: 30px } article .newsFeed a:last-child { margin-left: 0 } article .newsFeed a .image { display: inline-block; float: right; width: 30px; height: 30px;overflow: hidden; position: relative; } article .newsFeed a .image img { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0 !important; border: none } article .newsFeed a p { display: inline-block; float: right; width: calc(100% - 36px); font-size: 12px !important; padding-right: 10px; margin: 0; line-height: 1.5; cursor: pointer } article .newsFeed a.google .image { background: #fff } article .newsFeed a.google .image img { max-width: 26px; max-height: 26px; } article .newsFeed a.google:hover p { color: #E03322 } article .newsFeed a.facebook .image { background: #3b5998 } article .newsFeed a.facebook .image img { max-width: 20px; max-height: 20px; } article .newsFeed a.facebook:hover p { color: #1877f2 } article .newsFeed a.youtube .image { background: #ff0000 } article .newsFeed a.youtube .image img { max-width: 22px; max-height: 22px; } article .newsFeed a.youtube:hover p { color: #ff0000 } @media screen and (min-width:1280px) and (max-width:1359px) { article .newsFeed { width: 100%; margin: 20px 0; } article .newsFeed a { width: calc((100% - 60px) / 3); margin-left: 30px; } article .newsFeed a p { width: 100%; text-align: center !important; padding-right: 0 } } @media screen and (min-width:1152px) and (max-width:1279px) { article .newsFeed { width: 100%; margin: 20px 0; } article .newsFeed a { width: calc((100% - 60px) / 3); margin-left: 30px; } article .newsFeed a p { width: 100%; text-align: center !important; padding-right: 0 } article .pageLink{font-size:14px} article .imgDiv .sponsorFrame{ width: 118px;height: 98px;} article .imgDiv .sponsorFrame img{height: 75px; left: 18px;} } @media screen and (min-width:1024px) and (max-width:1151px) { article .newsFeed { width: 100%; margin: 20px 0; } article .newsFeed a { width: calc((100% - 60px) / 3); margin-left: 30px; } article .newsFeed a p { width: 100%; text-align: center !important; padding-right: 0 } article .pageLink{font-size:14px} article .imgDiv .sponsorFrame{ width: 118px;height: 98px;} article .imgDiv .sponsorFrame img{height: 75px; left: 18px;} } @media only screen and (max-width: 1023px) { article .pageLink{font-size:13px} } @media screen and (min-width: 320px) and (max-width: 767px) { article .newsFeed { width: 100%; margin: 0 0 20px; padding: 10px } article .newsFeed a { width: calc((100% - 40px) / 3); margin-left: 20px; } article .newsFeed a p { width: 100%; text-align: center !important; padding-right: 0; font-size: 11px !important } article .imgDiv .sponsorFrame{ width: 75px;height: 60px;} article .imgDiv .sponsorFrame img{height: 50px; left: 10px;top: 0;} } /** RelatedNews **/ /** Listing View **/ article .details .pattern01 { box-shadow: none; float: left; width: 100%; margin: 0;border-right: 6px solid #E63B34;padding-right:16px ; margin: 20px 0 25px;} article .details .pattern01:before { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: -20px; background: #e8e8e8 } /*article .details .pattern01 .ttl{height:32px;border-bottom:1px solid #ddd!important}*/ /*article .details .pattern01 .ttl h3{font-size:18px}*/ /*article .details .pattern01 .ttl h3:after{height:18px;display:none}*/ article .details .pattern01 .allItems { padding: 10px 0 0; float: right } article .details .pattern01 ul { padding-right: 0; float: right } article .details .pattern01 ul li { width: 100%; list-style-type: none; display: inline-block; margin: 0 0 8px !important; padding-bottom: 8px; font-style: normal; border: none; border-bottom: 1px solid #e8e8e8 } article .details .pattern01 .ttl h4, article .details .pattern01 .ttl .titlep{ float: right; display: inline-block; padding: 0; font-family: DroidKufiBold, Arial; font-size: 15px; color: #1d1d1d; display: inline-block; line-height: 36px; background: none; } article .details .pattern01 ul li h3, article .details .pattern01 ul li .descp { color: #1d1d1d; height: 42px !important; cursor: pointer; overflow: hidden; text-align: right; line-height: 1.6; font-size: 13px !important; padding: 0 !important; margin: 26px 0 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; } article .details .pattern01 ul li .descp{ margin: 0 !important; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; max-height: 42px; height: auto !important;} article .details .pattern01 ul li:before { content: 'q'; position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #E63B34; font-size: 18px; } article .details .pattern01 ul li.news .item:hover h3 { color: #E03322 !important; } article .details .pattern01 ul li.sports .item:hover h3 { color: #056818 !important; } article .details .pattern01 ul li.arts .item:hover h3 { color: #A8006B !important; } article .details .pattern01 ul li.howa_w_hya .item:hover h3 { color: #7b1fa2 !important; } article .details .pattern01 ul li.autos .item:hover h3 { color: #1a237e !important; } article .details .pattern01 ul li.islameyat .item:hover h3 { color: #075C99 !important; } article .details .pattern01 ul li.ramadan .item:hover h3 { color: #330D46 !important; } article .details .pattern01 ul li:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important } article .details .pattern01 ul li .item .imageCntnr { width: 90px; padding-bottom:calc((90px * 56.25) / 100); float: right; } article .details .pattern01 ul li .item .imageCntnr span { margin: 0 } article .details .pattern01 ul li .desc { width: calc(100% - 110px); overflow: hidden; cursor: pointer; position: relative; float: right; padding: 0 10px 0 0; height: 50px;} article .details .pattern01 ul li .secName {display:none; position: absolute; top: 0; right: 110px; } /*article .details .pattern01 ul li .secName:after {content: "";width: 4px;height: 12px;float: right;margin-left: 5px;margin-top: 0;}*/ article .details .pattern01 ul li.icon-video .imageCntnr span, article .details .pattern01 ul li.icon-image .imageCntnr span { position: absolute; width: 32px; height: 32px; text-align: center !important; left: 4px; top: 4px; z-index: 1; margin: 0; line-height: 32px; text-align: center; background: #E03322; border-radius: 50%; } article .details .pattern01 ul li.icon-video .imageCntnr span:before, article .details .pattern01 ul li.icon-image .imageCntnr span:before { color: #fff; font-size: 17px; line-height: 32px; opacity: 1; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; } article .details .pattern01 ul li.icon-image .imageCntnr span:before { content: "t"; } article .details .pattern01 ul li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px } article.AuthorsListing .details .pattern01 { margin-top: 20px } article .details .pattern01 .ttl{ border-bottom: 2px solid #E0E0E0;} article .details .pattern01 .ttl .titlep{line-height:1;padding-bottom:10px} article .relatedItems .pattern01 { box-shadow: none; float: left; width: 270px; margin: 0 40px 30px 0; } article .relatedItems .pattern01:before { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: -20px; background: #e8e8e8 } article .relatedItems .pattern01 .allItems { padding: 16px 0 0; float: right } article .relatedItems .pattern01 ul { padding-right: 0; float: right } article .relatedItems .pattern01 ul li { width: 100%; list-style-type: none; display: inline-block; margin: 0 0 8px !important; padding-bottom: 8px; font-style: normal; border: none; border-bottom: 1px solid #e8e8e8 } article .relatedItems .pattern01 .ttl h4 { float: right; display: inline-block; padding: 0; font-family: DroidKufiBold, Arial; font-size: 17px; color: #1d1d1d; display: inline-block; line-height: 36px; background: none; } article .relatedItems .pattern01 ul li h3 { color: #1d1d1d; height: 42px !important; cursor: pointer; overflow: hidden; text-align: right; line-height: 1.6; font-size: 13px !important; padding: 0 !important; margin: 26px 0 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; } article .relatedItems .pattern01 ul li.news .item:hover h3 { color: #E03322 !important; } article .relatedItems .pattern01 ul li.sports .item:hover h3 { color: #056818 !important; } article .relatedItems .pattern01 ul li.arts .item:hover h3 { color: #A8006B !important; } article .relatedItems .pattern01 ul li.howa_w_hya .item:hover h3 { color: #7b1fa2 !important; } article .relatedItems .pattern01 ul li.autos .item:hover h3 { color: #1a237e !important; } article .relatedItems .pattern01 ul li.islameyat .item:hover h3 { color: #075C99 !important; } article .relatedItems .pattern01 ul li.ramadan .item:hover h3 { color: #330D46 !important; } article .relatedItems .pattern01 ul li:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important } article .relatedItems .pattern01 ul li .item .imageCntnr { width: 100px; padding-bottom: calc((120px * 56.25) / 100); float: right; } article .relatedItems .pattern01 ul li .item .imageCntnr span { margin: 0 } article .relatedItems .pattern01 ul li .desc { width: calc(100% - 100px); overflow: hidden; cursor: pointer; float: right; padding: 0 10px 0 0 } article .relatedItems .pattern01 ul li .secName { position: absolute; top: 0; right: 110px; } article .relatedItems .pattern01 ul li.icon-video .imageCntnr span, article .relatedItems .pattern01 ul li.icon-image .imageCntnr span { position: absolute; width: 32px; height: 32px; text-align: center !important; left: 4px; top: 4px; z-index: 1; margin: 0; line-height: 32px; text-align: center; background: #E03322; border-radius: 50%; } article .relatedItems .pattern01 ul li.icon-video .imageCntnr span:before, article .relatedItems .pattern01 ul li.icon-image .imageCntnr span:before { color: #fff; font-size: 17px; line-height: 32px; opacity: 1; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; } article .relatedItems .pattern01 ul li.icon-image .imageCntnr span:before { content: "t"; } article .relatedItems .pattern01 ul li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px } .moreButton{display:inline-block;width:200px;height:44px;line-height:44px;color:#fff;background:#E03322;text-align:center} /** News Pointer & Showcase DIV **/ article .nwsPntrSC { display: inline-block; width: 100% } article .billboardDiv iframe, article .leaderboardDiv iframe { width: 728px; } .speakolLeft { display: inline-block; float: left; width: 100%; overflow: hidden } .speakolLeft .speakol { border-bottom: 0 } .speakolLeft .speakol .ttl { border-bottom: 2px solid #1d1d1d; } .speakolLeft .speakol .ttl h3 { background: none; padding: 0; color: #1d1d1d } .speakolLeft.fixed { position: fixed; top: 70px; background: none !important; left: unset !important; } /*.showSponsor .speakolLeft.fixed {top: 60px;}*/ /** Second SC & Cross Media **/ .dtlsSc { float: left; width: 300px; display: inline-block; position: relative; z-index: 2 } .dtlsSc .featuredSC { width: 300px; display: inline-block; margin-bottom: 27px; float: left } .dtlsSc .featuredSC .showcaseDiv { margin: 0 } .leftDtlsSc { display: inline-block; float: left; width: 100% } /** Shift Article Pattern **/ #ShiftDetails{display:inline-block;float:right;width:300px} .dtlsSc .shiftArtclPattern{display:inline-block;float:right;width:300px;background:#000;position:relative;padding:14px 10px;margin-bottom:30px} .dtlsSc .shiftArtclPattern .shiftHeader{display: inline-block;width: 100%;height: 40px;float: right;position: relative;z-index: 2;margin-bottom:10px;padding: 0;border-bottom: none;} .dtlsSc .shiftArtclPattern .shiftHeader a{display: inline-block;width: 120px;height: 100%;float: right;position: relative;} .dtlsSc .shiftArtclPattern .shiftHeader a img{display: inline-block;width: 115px;height: auto;border: none;position: absolute;top: 50%;left: 50%;transform: translate(-50% , -50%);} .dtlsSc .shiftArtclPattern .shiftHeader a.more{float: left;color: #26ff00;width: auto;height: auto;display:inline-block;font-size:14px;line-height:2.5} .dtlsSc .shiftArtclPattern:before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;background: url(../Images/shiftPatternBk.jpg) top left no-repeat;background-size: cover;opacity: .1;z-index: 1;} .dtlsSc .shiftArtclPattern .allItems{display:inline-block;width:100%;padding:12px 0 0;position:relative;z-index:2} .dtlsSc .shiftArtclPattern .allItems li{width:100%;margin-bottom:24px;display:inline-block;position:relative;float: right;} .dtlsSc .shiftArtclPattern .allItems li:last-child{margin-bottom:0} /**/.dtlsSc .shiftArtclPattern .allItems li:after{content:"";position:absolute;bottom:-12px;right:0;width:100%;height:1px;background:#252525} .dtlsSc .shiftArtclPattern .allItems li:last-child:after{display:none} .dtlsSc .shiftArtclPattern ul li a .imageCntnr{position:relative;overflow:hidden;padding-bottom:calc((116px * 60) / 100);float:right;width:116px;} .dtlsSc .shiftArtclPattern .allItems li img{position:absolute;top:0;right:0;bottom:0;left:0;margin:0 auto;width:auto;max-width:unset;height:100%;object-fit:cover;border:none;float:right;} .dtlsSc .shiftArtclPattern .allItems li .desc{float:right;width:calc(100% - 116px);padding-right:12px} .dtlsSc .shiftArtclPattern .allItems li .desc p{font-family:inherit;font-size:13px;color:#fff;line-height:1.6;height:40px;overflow:hidden;cursor:pointer} .dtlsSc .shiftArtclPattern .allItems li .secName{position:absolute;right:128px;bottom:0px;font-size:12px;color:#666;display:inline-block} .dtlsSc .shiftArtclPattern .allItems li .secName:after{content:"";width:4px;height:12px;background:#E03322;float:right;margin-left:5px;margin-top:4px} .dtlsSc .shiftArtclPattern .allItems li .number{position:absolute;top:1px;right:1px;width:26px;height:26px;border-left:1px solid #fff;border-bottom:1px solid #fff;background:#E03322;color:#fff;font-family:Arial;font-weight:bold;font-size:20px;text-align:center;line-height:1.3;pointer-events:none;z-index:1} .dtlsSc .shiftArtclPattern .allItems li .item:hover .desc p{color:#26ff00} .dtlsSc .shiftArtclPattern .allItems li .secName:hover{color:#1d1d1d} .dtlsSc .shiftArtclPattern .shiftHeader .poweredBy {display: inline-block;width: 80px;height: 100%;float: left;position: relative;} .dtlsSc .shiftArtclPattern .shiftHeader .poweredBy img{display: inline-block;width: 80px;height: auto;border: none;} .dtlsSc .shiftArtclPattern p {color: #fff;font-family: DroidKufiBold, Arial;overflow: hidden;font-size: 16px;width: auto;float: right;line-height: 2.4;} /*** Amazon Widget ***/ .amazonWidgetLB { display: inline-block; float: right; width: 100%; background: #232f3e; padding: 10px 10px 24px; position: relative; margin-bottom: 30px; } .amazonWidgetLB p { color: #fff; font-family: DroidKufiBold, Arial; overflow: hidden; font-size: 16px; width: auto; float: right; line-height: 2.4; } .amazonWidgetLB p a { color: #fff } .amazonWidgetLB .ttl { border-bottom: 2px solid #D6AE7B !important } .amazonWidgetLB .ttl .more { color: #fff; } .amazonWidgetLB ul { display: inline-block; float: right; width: 100%; } .amazonWidgetLB li { width: 100%; display: inline-block; float: right; padding: 10px 0; position: relative; border-bottom: 1px solid rgba(255,255,255,0.2) } .amazonWidgetLB li:last-child { border-bottom: none } .amazonWidgetLB ul li .item .imageCntnr { position: relative; overflow: hidden; padding-bottom: calc((100px * 56.25) / 100); float: right; width: 100px; } .amazonWidgetLB li img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0 auto; float: right; width: auto; max-width: 100px; height: auto;max-height:100px;} .amazonWidgetLB li .cnts { display: inline-block; float: right; width: calc(100% - 100px); padding-right: 10px } .amazonWidgetLB li h2 { float: right; width: 100%; color: #fff; font-size: 13px; line-height: 1.6; height: 59px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .amazonWidgetLB li .secName { display: inline-block; float: right; margin-bottom: 6px; font-family: DroidKufiBold, Arial; color: #e67a00; font-size: 12px; } .amazonWidgetLB .strip { position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; background: #131921; padding: 0 10px; line-height: 22px; direction: ltr; text-align: left; font-family: BebasNeueBold; color: #D6AE7B; font-size: 18px; text-transform: uppercase; margin-bottom: 0 !important } /** Article Amazon Slider **/ .amazonTopSlider, .amazonBottomSliderSection{display:inline-block;float:right;width:100%;background:#EDFAFC;padding:10px 0;border:1px solid rgba(0,0,0,0.05)} .amazonTopSlider .amazonTitle, .amazonBottomSliderSection .amazonTitle{display:inline-block;float:right;width:100%;padding:0 10px} .amazonTopSlider .ttl, .amazonBottomSliderSection .ttl{border-bottom:1px solid rgba(0,0,0,0.1)!important} .amazonTopSlider .ttl p, .amazonBottomSliderSection .ttl p{float: right;display: inline-block;padding: 0;font-family: DroidKufiBold, Arial;font-size: 17px;color: #1d1d1d;display: inline-block;line-height: 36px;background: none;} .amazonTopSlider iframe.amazonTopSliderFrame{display: inline-block;float:right; height: 144px !important; width: 100%;position: relative !important;margin:16px 0 0;} /** Bottom Slider **/ .amazonBottomSliderMain{display:inline-block;float:right;width:100%;padding:0 20px;position: relative;} .amazonBottomSlider{display:inline-block;float:right;width:100%;position:relative;padding:10px 0} .amazonBottomSlider li{display:inline-block;float:right;width:270px;height:130px;border:1px solid rgba(0,0,0,0.05);overflow:hidden;position:relative; display: flex; align-items: center; justify-content: center} .amazonBottomSlider li a{display:inline-block;float:right;width:100%;height:130px;background:#fff;padding:10px} .amazonBottomSlider li .amznImg{display: inline-block;float:right;width:70px;height: 70px;overflow:hidden;position:relative} .amazonBottomSlider li .amznImg img {display: block;width: auto!important;height: auto;max-width: 124px;max-height:70px;background: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} .amazonBottomSlider li p{display:inline-block;float:right;width:calc(100% - 70px);padding:4px 10px 4px 0;color:#1d1d1d;line-height:1.6;text-align:right;direction:rtl;font-size:13px;pointer-events:none;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;} .amazonBottomSlider .priceMain{display:inline-block;float:right;width:calc(100% - 120px);padding-right:10px} .amazonBottomSlider .price, .amazonBottomSlider .oldPrice{display:inline-block;float:right;width:auto;font-family:CenturyGothicLight,arial;font-size:16px;color:#E67A00;font-weight:bold;padding:0;line-height:1} .amazonBottomSlider .price span, .amazonBottomSlider .oldPrice span{font-family:DroidKufiLight,arial;font-size:12px;font-weight:normal} .amazonBottomSlider .oldPrice{display:none;font-size:13px;color:#666;position:relative;font-weight:normal;margin-right:6px;width:auto;line-height: 16px;} .amazonBottomSlider .oldPrice span{font-size:10px} .amazonBottomSlider .oldPrice:after{content:"";position:absolute;left:0;top:50%;width:100%;border-top:1px solid #666} .amazonBottomSlider li .checkBtn{display:inline-block;width:calc(100% - 20px);height:26px;position:absolute;left:10px;bottom:10px;color:#fff;text-align:center;font-size:12px;background:#E67A00;line-height:26px;transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } .amazonBottomSlider li .checkBtn:hover{background:#232f3e;} .amazonBottomSliderSection .flickity-viewport{overflow:hidden} .amazonBottomSliderSection .flickity-button{width:30px;height:30px;position:absolute;top:50%;transform:translateY(-50%);background:#E67A00;color:#fff;border:none;border-radius:50%} .amazonBottomSliderSection .flickity-button svg{display:none} .amazonBottomSliderSection .flickity-button.previous{right:5px;left:auto} .amazonBottomSliderSection .flickity-button.next{left:5px;right:auto} .amazonBottomSliderSection .flickity-button.previous:before {content: 'r';} .amazonBottomSliderSection .flickity-button.next:before {content: 'q';} .amazonBottomSliderSection .flickity-button:active, .amazonBottomSliderSection .flickity-button:hover {background: #232f3e;} .amazonBottomSliderSection .flickity-button:disabled {opacity: 0;cursor: auto;pointer-events: none;} .amazonBottomSliderSection .swiper-button-next, .amazonBottomSliderSection .swiper-button-prev{margin-top:0} .amazonBottomSliderSection .swiper-button-next:after, .amazonBottomSliderSection .swiper-button-prev:after{display:none} .amazonBottomSliderSection .swiper-button-next.swiper-button-disabled, .amazonBottomSliderSection .swiper-button-prev.swiper-button-disabled { background: #f6d1a6;opacity:1;pointer-events: visible;} /** Elconsolto Article Pattern **/ .dtlsSc .consoltoArtclPattern { display: inline-block; float: right; width: 300px; background: #fff; border: 1px solid #e8e8e8; position: relative; padding: 14px 10px; } .dtlsSc .consoltoArtclPattern .consoltoHeader { display: inline-block; width: 100%; height: 40px; float: right; position: relative; z-index: 2; margin-bottom: 10px; border-bottom: 1px solid #e8e8e8; } .dtlsSc .consoltoArtclPattern .consoltoHeader a { display: inline-block; width: 120px; height: 100%; float: right; position: relative; } .dtlsSc .consoltoArtclPattern .consoltoHeader a img { display: inline-block; width: 115px; height: auto; border: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dtlsSc .consoltoArtclPattern .consoltoHeader a.more { float: left; color: #1a3a4d; width: auto; height: auto; display: inline-block; font-size: 14px; line-height: 2.5 } .dtlsSc .consoltoArtclPattern:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: url(../Images/shiftPatternBk.jpg) top left no-repeat; background-size: cover; opacity: .1; z-index: 1; } .dtlsSc .consoltoArtclPattern .allItems { display: inline-block; width: 100%; padding: 12px 0 0; position: relative; z-index: 2 } .dtlsSc .consoltoArtclPattern .allItems li { width: 100%; margin-bottom: 24px; display: inline-block; position: relative; float: right; } .dtlsSc .consoltoArtclPattern .allItems li:last-child { margin-bottom: 0 } .dtlsSc .consoltoArtclPattern .allItems li:after { content: ""; position: absolute; bottom: -12px; right: 0; width: 100%; height: 1px; background: #e8e8e8 } .dtlsSc .consoltoArtclPattern .allItems li:last-child:after { display: none } .dtlsSc .consoltoArtclPattern ul li a .imageCntnr { position: relative; overflow: hidden; padding-bottom: calc((116px * 60) / 100); float: right; width: 116px; } .dtlsSc .consoltoArtclPattern .allItems li img { position: absolute; top: 50%; bottom: 0; left: 0; right: 0; transform: translateY(-50%); margin: 0 auto; width: 100%; height: auto; border: none; float: right; } .dtlsSc .consoltoArtclPattern .allItems li .desc { float: right; width: calc(100% - 116px); padding-right: 12px } .dtlsSc .consoltoArtclPattern .allItems li .desc p { font-size: 13px; color: #222; line-height: 1.6; height: 40px; overflow: hidden; cursor: pointer } .dtlsSc .consoltoArtclPattern .allItems li .secName { position: absolute; right: 128px; bottom: 0px; font-size: 12px; color: #1a3a4d; display: inline-block } /*.dtlsSc .consoltoArtclPattern .allItems li .secName:after{content:"";width:4px;height:12px;background:#1a3a4d;float:right;margin-left:5px;margin-top:4px}*/ .dtlsSc .consoltoArtclPattern .allItems li .number { position: absolute; top: 1px; right: 1px; width: 26px; height: 26px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; background: #E03322; color: #fff; font-family: Arial; font-weight: bold; font-size: 20px; text-align: center; line-height: 1.3; pointer-events: none; z-index: 1 } .dtlsSc .consoltoArtclPattern .allItems li .item:hover .desc p { color: #1a3a4d } .dtlsSc .consoltoArtclPattern .allItems li .secName:hover { color: #1d1d1d } /** Album Slider **/ .dtlsSc .albumSliderDtls { width: 300px; height: 266px; background: #fff; display: inline-block; float: left; overflow: hidden; direction: ltr } .dtlsSc .albumSliderDtls .ttl { border-bottom: 0 !important; height: 38px } .dtlsSc .albumSliderDtls .ttl h2 { font-size: 20px } .dtlsSc .albumSliderDtls ul { width: 100%; height: 225px; overflow: hidden } .dtlsSc .albumSliderDtls ul li { position: relative; overflow: hidden } .dtlsSc .albumSliderDtls ul li a { display: block } .dtlsSc .albumSliderDtls ul li a img { width: 100%; height: auto; max-height: 225px;} .dtlsSc .albumSliderDtls .desc { width: 100%; height: 50%; overflow: hidden; cursor: pointer; position: absolute; bottom: 0; right: 0; background: linear-gradient(270deg,rgba(0,0,0,0),#000000); background: -webkit-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -o-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -moz-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -ms-linear-gradient(270deg,rgba(0,0,0,0),#000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c',endColorstr='#FF000000',GradientType=0); } .dtlsSc .albumSliderDtls .desc p { color: #fff; text-align: center; line-height: 1.6; padding: 12px; font-size: 20px; position: absolute; bottom: 20px; right: 0; height: 80px; overflow: hidden } /** Facebook Comments **/ article .fbComments { padding: 0; border-bottom: 1px solid #ddd; box-shadow: none; float: none } /** Article Leaderboard **/ article .leaderboardDiv { float: none; margin-bottom: 40px; position: relative; z-index: 2 } article .articleEnd { display: inline-block; float: right; width: 100% } /************************************** Article Gallery **************************************/ /***** Before *****/ .demo-gallery { padding-bottom: 56.25%; float: right; max-width: 733px; width: 100%; position: relative; z-index: 2;cursor:pointer } .articleCntnt .demo-gallery ul li::before { display: none } .demo-gallery > ul { margin-bottom: 0; padding-right: 0; } .demo-gallery > ul > li { display: none; width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #111 } .demo-gallery > ul > li:first-child { display: block } .demo-gallery > ul > li img { width: auto; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0 } .demo-gallery > ul > li a { display: block } .demo-gallery > ul > li .showGal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); padding: 0 10px; color: #fff; font-size: 14px; z-index: 9; line-height: 2.8 } .demo-gallery > ul > li .icon-camera:before { content: "t"; margin-right: 2px; font-size: 22px; color: #fff; float: right; margin-left: 10px; line-height: 1.8 } .demo-gallery > ul > li a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery > ul > li a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery > ul > li a:hover .demo-gallery-poster > img { opacity: 1; } .demo-gallery > ul > li a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery > ul > li a .demo-gallery-poster > img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery > ul > li a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .justified-gallery > a > img { -webkit-transition: -webkit-transform 0.15s ease 0s; -moz-transition: -moz-transform 0.15s ease 0s; -o-transition: -o-transform 0.15s ease 0s; transition: transform 0.15s ease 0s; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); height: 100%; width: 100%; } .demo-gallery .justified-gallery > a:hover > img { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img { opacity: 1; } .demo-gallery .justified-gallery > a .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.1); bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.15s ease 0s; -o-transition: background-color 0.15s ease 0s; transition: background-color 0.15s ease 0s; } .demo-gallery .justified-gallery > a .demo-gallery-poster > img { left: 50%; margin-left: -10px; margin-top: -10px; opacity: 0; position: absolute; top: 50%; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .demo-gallery .justified-gallery > a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); } .demo-gallery .video .demo-gallery-poster img { height: 48px; margin-left: -24px; margin-top: -24px; opacity: 0.8; width: 48px; } .demo-gallery.dark > ul > li a { border: 3px solid #04070a; } /***** Slider *****/ .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -21px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 1080; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { color: #FFF; } .lg-actions .lg-next { left: 0px; } .lg-actions .lg-next:before { content: "q"; font-size: 32px } .lg-actions .lg-prev { right: 0px; } .lg-actions .lg-prev:after { content: "r"; font-size: 32px } @-webkit-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-moz-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-ms-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-webkit-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-moz-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-ms-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } .lg-on #gpSlider, .lg-on .iz-news-hub-discovr-outer-wrapper{display:none !important} .lg-outer.lg-right-end .lg-object { -webkit-animation: lg-right-end 0.3s; -o-animation: lg-right-end 0.3s; animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { -webkit-animation: lg-left-end 0.3s; -o-animation: lg-left-end 0.3s; animation: lg-left-end 0.3s; position: relative; } .lg-toolbar { z-index: 1082; left: 0; position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { color: #999; cursor: pointer; float: right; font-size: 24px; height: 47px; line-height: 38px; padding: 5px 0; text-align: center; width: 50px; text-decoration: none !important; outline: medium none; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .lg-toolbar .lg-close{float:left} .lg-toolbar .lg-icon:hover { color: #FFF; } .lg-toolbar .lg-close:after { content: "O" } .lg-toolbar .lg-download { display: none } .lg-sub-html { background-color: rgba(0, 0, 0, 0.8); bottom: 0; color: #EEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 1080; } .lg-sub-html p { font-size: 16px; margin: 5px 0 0; line-height: 1.8; text-align: center; } #lg-counter { color: #999; display: inline-block; font-size: 20px; padding-left: 50px; padding-top: 14px; vertical-align: middle; font-family: arial; float: left;position:absolute;left: 50%; top: 0; transform: translateX(-50%);} .lg-toolbar, .lg-prev, .lg-next { opacity: 1; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } .lg-hide-items .lg-prev { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; border: none } .lg-outer .lg-thumb-outer { background-color: #000; bottom: 0; position: absolute; width: 100%; z-index: 1080; max-height: 350px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { position:relative;width:80px!important;cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; text-align: center; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item:first-child{margin-right: 0!important;} .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {width:80px!important; cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; text-align: center } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; background: rgba(0, 0, 0, 0.80);} .lg-outer .lg-thumb-item { border-radius: 5px; cursor: pointer; float: right; overflow: hidden; height: 100%; border: 2px solid #555; border-radius: 4px; margin-bottom: 5px; } @media (min-width: 1025px) { .lg-outer .lg-thumb-item { -webkit-transition: border-color 0.25s ease; -o-transition: border-color 0.25s ease; transition: border-color 0.25s ease; } } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #fff; } .lg-outer .lg-thumb-item img { width: auto; height: 100%; object-fit: cover; border: none;position:absolute;top:50%;left:50%;transform:translate(-50% , -50%) } .lg-outer .lg-thumb-item img[src='undefined'] { width: 96px; height: 76px; background: url(../Images/masrawyLogo.webp?ver=00.00) center center no-repeat; background-size: 80px 23px } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { -webkit-transition: bottom 0.25s ease; -o-transition: bottom 0.25s ease; transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toogle-thumb { border-radius: 2px 2px 0 0; color: #999; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 0; text-align: center; top: -39px; width: 26px; } .lg-outer .lg-toogle-thumb:after { content: "9"; font-size: 24px; } .lg-outer .lg-toogle-thumb:hover { color: #FFF; } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 1080; cursor: pointer; } .lg-outer .lg-has-vimeo .lg-video-play { background: url("../img/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { background: transparent url("../img/video-play.png") no-repeat scroll 0 0; height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { background: url("../img/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { background: url("../img/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; right: 0; position: absolute; top: 0; width: 100%; z-index: 1083; opacity: 0; -webkit-transition: opacity 0.08s ease 0s; -moz-transition: opacity 0.08s ease 0s; -o-transition: opacity 0.08s ease 0s; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: #c31717; height: 5px; width: 0; float: right } .lg-progress-bar.lg-start .lg-progress { width: 100% } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-autoplay-button:after { content: "s"; } .lg-show-autoplay .lg-autoplay-button:after { content: "Q"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transition-duration: 0s; transition-duration: 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #lg-zoom-in:after { content: "\e311"; } #lg-actual-size { font-size: 20px; } #lg-actual-size:after { content: "\e033"; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } #lg-zoom-out:after { content: "\e312"; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 1080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; -webkit-transition: box-shadow 0.3s ease 0s; -o-transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s; width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-fullscreen:after { content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e20d"; } .group { *zoom: 1; } .group:before, .group:after { display: table; content: ""; line-height: 0; } .group:after { clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1050; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg { height: 100%; width: calc(100% - 360px)!important; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; z-index: 1; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { /*background: url("../img/loading.gif") no-repeat scroll center center transparent;*/ display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete { background-image: none; } .lg-outer .lg-item.lg-current { z-index: 1060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; border: none } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: #000; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 1; } .lg-outer #lg-dropdown-overlay { background-color: rgba(0, 0, 0, 0.25); bottom: 0; cursor: default; left: 0; position: fixed; right: 0; top: 0; z-index: 1081; opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; } .lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay { -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transform: translate3d(0, 0px, 0); -o-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); opacity: 1; visibility: visible; } .lg-outer.lg-dropdown-active #lg-share { color: #FFF; } .lg-outer .lg-dropdown { background-color: #fff; border-radius: 2px; font-size: 14px; list-style-type: none; margin: 0; padding: 10px 0; position: absolute; right: 0; text-align: left; top: 50px; opacity: 0; visibility: hidden; -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; } .lg-outer .lg-dropdown:after { content: ""; display: block; height: 0; width: 0; position: absolute; border: 8px solid transparent; border-bottom-color: #FFF; right: 16px; top: -16px; } .lg-outer .lg-dropdown > li:last-child { margin-bottom: 0px; } .lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon { color: #333; } .lg-outer .lg-dropdown a { color: #333; display: block; white-space: pre; padding: 4px 12px; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; } .lg-outer .lg-dropdown a:hover { background-color: rgba(0, 0, 0, 0.07); } .lg-outer .lg-dropdown .lg-dropdown-text { display: inline-block; line-height: 1; margin-top: -3px; vertical-align: middle; font-size: 12px } .lg-outer .lg-dropdown .lg-icon { color: #333; display: inline-block; float: none; font-size: 15px; height: auto; line-height: 1; margin-left: 8px; padding: 0; vertical-align: middle; width: auto; } .lg-outer #lg-share { position: relative; } .lg-outer #lg-share:after { content: "o";} .lg-outer #lg-share-facebook .lg-icon { color: #3b5998; } .lg-outer #lg-share-facebook .lg-icon:after { content: "u"; } .lg-outer #lg-share-twitter .lg-icon { color: #00aced; } .lg-outer #lg-share-twitter .lg-icon:after { content: "?"; } .lg-outer #lg-share-googleplus .lg-icon { color: #dd4b39; } .lg-outer #lg-share-googleplus .lg-icon:after { content: "w"; } .lg-outer #lg-share-pinterest .lg-icon { color: #cb2027; display: none } .lg-outer #lg-share-pinterest .lg-icon:after { content: "\e903"; display: none } .lg-group:after { content: ""; display: table; clear: both; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { -webkit-transition: none 0s ease 0s !important; -moz-transition: none 0s ease 0s !important; -o-transition: none 0s ease 0s !important; transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { -webkit-transition: opacity 0.1s ease 0s; -moz-transition: opacity 0.1s ease 0s; -o-transition: opacity 0.1s ease 0s; transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-on header, .lg-on .headerBtns, .lg-on .component { display: none } /** InGallery Ads **/ .lg-item iframe { overflow: hidden; padding: 0; margin: 0; position: relative } .lg-item iframe.inGallery { width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0 } /** Gallery Title **/ .galleryTitle { float: right; display: none } .galleryTitle .galleryMasLogo { width: 137px; height: 40px; background: url(../Images/masrawyLogo.webp?ver=00.00) center center no-repeat; background-size: 116px 34px; margin-top: 5px; float: right } .galleryTitle h2 { float: right; display: inline-block; direction: rtl; color: #fff; font-size: 18px; line-height: 2.6; margin-right: 10px; height: 50px; padding-right: 20px; border-right: 1px solid #222 } .lg-outer .zedSponsor { position: absolute; display: inline-block; left: 10px; bottom: 160px; z-index: 2 } .lg-outer .zedSponsor p { float: right; display: inline-block; line-height: 4; text-align: right; font-size: 12px; color: #fff; margin-left: 10px; cursor: auto } .lg-outer .zedSponsor a { float: left } .lg-outer .zedSponsor img { width: auto; height: 60px; border: none } /***** After *****/ .repeatDiv { display: block; width: 600px; padding: 45px 20px; height: 100%; position: absolute; left: 50%; margin-left: -300px; top: 0; z-index: 2 } .repeatDiv .repeatAlbum { display: block; width: 100%; margin-bottom: 20px; text-align: center; } .repeatDiv .repeatAlbum p { display: block; color: #fff; font-size: 16px; text-align: center } .repeatDiv .repeatAlbum .icon-repeat:before { content: "R"; color: #fff; font-size: 50px; line-height: 1.1; } .repeatDiv .nextAlbum { display: block; width: 100%; height: 95px; padding: 15px 10px 10px; background: #E03322; position: relative } .repeatDiv .nextAlbum .progress-bar { opacity: 1; background-color: #c31717; height: 5px; right: 0; position: absolute; top: 0; width: 100%; z-index: 1083; -webkit-transition: opacity 0.08s ease 0s; -moz-transition: opacity 0.08s ease 0s; -o-transition: opacity 0.08s ease 0s; transition: opacity 0.08s ease 0s; } .repeatDiv .nextAlbum .progress-bar .progress { background-color: #fff; height: 5px; width: 0; float: right; transition: all 10000ms ease 0s; -webkit-transition: all 10000ms ease 0s; -moz-transition: all 10000ms ease 0s; -o-transition: all 10000ms ease 0s; -ms-transition: all 10000ms ease 0s } .repeatDiv .nextAlbum .progress-bar.start .progress { width: 100% } .repeatDiv .nextAlbum img { width: 98px; height: 70px; float: right; border: 1px solid #eee; margin-left: 10px } .repeatDiv .nextAlbum h3 { font-family: DroidKufiBold, Arial; font-size: 16px; color: #fff; display: block; float: right; margin-bottom: 5px; } .repeatDiv .nextAlbum p { font-size: 14px; color: #fff; display: block; float: right; width: calc(100% - 108px); height: 42px; overflow: hidden; line-height: 1.6; white-space: normal; } .repeatDiv .relatedAlbum { display: inline-block; float: right; width: 100%; padding: 10px 10px 0 10px; background: #fff; position: relative } .repeatDiv .relatedAlbum .ttl { height: auto; display: inline-block; float: right; width: 100%; border-bottom: none } .repeatDiv .relatedAlbum .ttl h2, .repeatDiv .relatedAlbum .ttl h4 { color: #E03322; padding: 0; font-size: 15px; font-family: DroidKufiBold, arial; text-align: right } .repeatDiv .relatedAlbum .ttl h2:after, .repeatDiv .relatedAlbum .ttl h4:after { display: none } .repeatDiv .relatedAlbum .content { display: inline-block; float: right; width: 100%; margin-top: 10px; padding: 0; background: none; min-height: unset; overflow-y: auto; height: 250px; } .repeatDiv .relatedAlbum .content .itmDiv { padding: 12px 0; position: relative; width: 100%; display: block; height: 72px } .repeatDiv .relatedAlbum .content .itmDiv:before { background-color: #dde2e4; top: -1px; clear: both; content: ""; display: block; float: none; height: 1px; margin: 0 auto; position: absolute; text-align: center; width: 100%; } .repeatDiv .relatedAlbum .content .itmDiv:first-child:before { display: none } .repeatDiv .relatedAlbum .content .itmDiv img { width: 65px; height: 46px; float: right; border: 1px solid #eee; margin-left: 10px; } .repeatDiv .relatedAlbum .content .itmDiv p { font-size: 14px; color: #1d1d1d; display: block; float: right; width: calc(100% - 75px); height: 42px; overflow: hidden; line-height: 1.6; white-space: normal; } .lastSlide .lg-toolbar .lg-autoplay-button { display: none } .lastSlide .lg-toolbar #lg-counter { display: none } .lastSlide .lg-actions { display: none } .lg-outer.lg-pull-caption-up .lg-sub-html{width:1543px; left: 50%; transform: translateX(-50%); right: auto;} .lg-outer{background:#000} .lg-on .SPgalleryAd .galleryDesktop, .lg-on .SPgalleryAd .galleryDesktop .gSPAd, .lg-on .SPgalleryAd{visibility:visible;opacity:1} .SPgalleryAd .galleryDesktop { display: inline-block; position: relative; width: 100%; float: right; z-index: 1;visibility:hidden;opacity:0 } .SPgalleryAd .galleryDesktop .gSPAd { position: fixed; bottom: 70px; height: 600px;width:160px; pointer-events: visible; z-index: 3; overflow: hidden; visibility: hidden; opacity: 0;top:50%;transform:translateY(-50%) } .SPgalleryAd .galleryDesktop .gSPAd.right { right: 0; } .SPgalleryAd .galleryDesktop .gSPAd .GalleryFrame { display: inline-block; float: right; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; height: 100%; } .SPgalleryAd .galleryDesktop .gSPAd .GalleryFrame iframe { position: absolute; top: 0; width: 160px; height: 100%; pointer-events: none; } .SPgalleryAd .galleryDesktop .gSPAd.right .GalleryFrame iframe { left: 0; } .SPgalleryAd .galleryDesktop .gSPAd.left { left: 0; } .SPgalleryAd .galleryDesktop .gSPAd.left .GalleryFrame iframe { right: 0; } /****************************** Author Article ******************************/ /** Dropdown List **/ .dropDownDiv { display: inline-block; width: 100%; margin-bottom: 40px; padding: 24px; background: #e8e8e8 } .wrapperDropdown { position: relative; width: 100%; background: #fff; cursor: pointer; padding: 12px; border: 1px solid #e8e8e8; z-index: 1; text-align: right; direction: rtl; font-size: 14px; color: #666; outline: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .wrapperDropdown:after { content: ""; width: 0; height: 0; position: absolute; top: 50%; left: 12px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #666 transparent; } .wrapperDropdown .dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0 0 5px 5px; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; max-height: 0; overflow: hidden; } .wrapperDropdown .dropdown li { padding: 0 10px; } .wrapperDropdown .dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; } .wrapperDropdown .dropdown li:last-of-type a { border: none; } .wrapperDropdown .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; } .wrapperDropdown .dropdown li:hover a { color: #E03322; } .wrapperDropdown.active { border-radius: 5px 5px 0 0; background: #666; box-shadow: none; border-bottom: none; color: white; } .wrapperDropdown.active:after { border-color: #ccc transparent; } .wrapperDropdown.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 400px; } /** Article Author Title **/ article .authorDtls { display: inline-block; width: 100%; float: right; margin: 24px 0 36px; position: relative; } article .authorDtls .imageCntnr { padding-bottom: calc((150px * 100) / 100); float: right; width: 150px; position: relative; margin-left: 24px; border-radius: 50%; overflow: hidden; } article .authorDtls .imageCntnr figure { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100% } article .authorDtls .imageCntnr img { width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: unset } article .authorDtls .articleHeader { width: calc(100% - 174px) } article .authorDtls .articleHeader h2 { margin-bottom: 0; font-size: 22px; max-height: 72px; overflow: hidden; margin: 5px 0 10px } article .authorDtls .articleHeader .authorName { display: inline-block; font-size: 16px; color: #666; float: right; direction: rtl; } article .authorDtls .articleHeader .icon-time:before { line-height: 1.7 } article .authorDtls .articleHeader .time span:after { top: 6px } /** Article Strip **/ article .articleStrip { display: inline-block; width: 100%; float: right; padding: 8px; background: #E03322; text-align: center; margin-bottom: 20px } article .articleStrip p { font-size: 14px; color: #fff; text-align: center; direction: rtl; margin: 0 auto; display: inline-block; line-height: 2.9; } article .articleStrip .icon-info:before { content: "h"; float: right; font-size: 24px; margin-left: 8px; } /** Article Video **/ article.articleVideo .videoCntnr { padding-bottom: 56.25%; float: right; max-width: 810px; width: 100%; position: relative; z-index: 2 } article.articleVideo .videoCntnr iframe, article.articleVideo .videoCntnr img { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.2s ease-in-out 0s } article.articleVideo .videoEnd { display: inline-block; height: 1px } article.articleVideo .articleVideoEnd { display: inline-block; height: 1px } article.articleVideo .fixed iframe { position: fixed; top: auto; bottom: 0px; right: 74px; left: auto; width: 300px; height: auto; z-index: 2; border: 12px solid #f2f2f2 } /** Video Strip **/ article .videoStrip { display: inline-block; float: right; width: 728px; height: auto; margin: -20px calc((100% - 728px) / 2) 20px; overflow: hidden; position: relative; z-index: 2 } /********** Shortcut Icons Menu **********/ .articleSocialMedia { position: absolute; margin-right: -35px; top: 0; z-index: 3; background: #fff; opacity: 1; visibility: visible; padding: 8px 0; width: 36px; border: 1px solid #e8e8e8; border-left: none; } .articleSocialMedia.fixed { width: 36px !important; background: #fff !important; top: 70px; position: fixed; } .articleSocialMedia.hidden { opacity: 0; visibility: hidden } /*.sponsorStickyOpen .articleSocialMedia{top:0;z-index:51;position:absolute} .sponsorStickyOpen.showSponsor .articleSocialMedia{top:50%;transform:translateY(-50%);z-index:51;position:fixed;transition:none}*/ .articleSocialMedia::before { position: absolute; top: 0; right: 0; visibility: hidden; z-index: 10; width: 40px; height: 100%; background: rgba(0,0,0,0.5); content: ''; opacity: 0; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s; transition: opacity 0.3s, transform 0s 0.3s; } .show-sponsor .articleSocialMedia::before { opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .sponsorHome .articleSocialMedia::before { opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .articleSocialMedia a { display: block; width: 28px; height: 28px; border-radius: 50%; margin: 0 calc((100% - 28px) / 2) 8px; text-align: center; color: #fff } .articleSocialMedia a:last-child { margin-bottom: 0 } .articleSocialMedia .icon-shorten { background:#1fa2f0;direction: ltr;position:relative } .tooltip{position: absolute;background: #fff;width: 130px;height: 36px;font-family: DroidKufiLight, Arial;font-size: 14px;text-align: center;bottom: 40px;line-height: 36px;right: 36px;box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);} .articleSocialMedia .icon-fb { background: #3a5799 } .articleSocialMedia .icon-fb:hover { background: #28437a } .articleSocialMedia .icon-fb:before { content: "u"; font-size: 18px; line-height: 1.7 } .articleSocialMedia .icon-tw { background: #000 } .articleSocialMedia .icon-tw:hover { background: #1083cf } .articleSocialMedia .icon-tw:before { content: "?"; font-size: 16px; line-height: 1.7 } .articleSocialMedia .icon-ggl { background: #d55142 } .articleSocialMedia .icon-ggl:hover { background: #bc3f31 } .articleSocialMedia .icon-ggl:before { content: "w"; font-size: 18px; line-height: 1.6 } .articleSocialMedia .icon-wapp { background: #189d0e; display: none } .articleSocialMedia .icon-wapp:hover { background: #108008 } .articleSocialMedia .icon-wapp:before { content: "S"; font-size: 20px; line-height: 1.6 } .articleSocialMedia .icon-msngr { background: #0084ff } .articleSocialMedia .icon-msngr:hover { background: #0070d9 } .articleSocialMedia .icon-msngr:before { content: "y"; font-size: 18px; line-height: 1.6 } .articleSocialMedia .icon-mail { background: #75c155 } .articleSocialMedia .icon-mail:hover { background: #5ca43e } .articleSocialMedia .icon-mail:before { content: "z"; font-size: 18px; line-height: 1.6 } .articleSocialMedia .icon-print { background: #566d7f } .articleSocialMedia .icon-print:hover { background: #465c6d } .articleSocialMedia .icon-print:before { content: "G"; font-size: 18px; line-height: 1.6 } .articleSocialMedia .icon-shorten:before { content: "]"; font-size: 18px; line-height: 28px} .hideSocialBtns .articleSocialMedia { margin-right: 0 } .cd-gallery { padding: 16px 0 0; width: 100%; box-shadow: none; margin-bottom: 0; padding-bottom: 0; background: none } .cd-gallery ul { text-align: justify; } .cd-gallery li { background: #fff; border: 1px solid #e8e8e8; margin-bottom: 16px; width: calc((100% - 32px) / 3); height: auto; position: relative; overflow: hidden; display: inline-block; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none } .cd-gallery li .item .imageCntnr { position: relative; overflow: hidden; padding-bottom: 56.25%; display: inline-block; float: right; width: 100% } .cd-gallery li .item img { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%,-50%); margin: 0 auto; width: 100%; height: auto;} .cd-gallery li .desc { width: 100%; overflow: hidden; cursor: pointer; position: relative; padding: 10px } .cd-gallery li .desc h2 { color: #1d1d1d; height: 68px; cursor: pointer; overflow: hidden; text-align: right; line-height: 1.6; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; } .cd-gallery li .item:hover .desc h2 { color: #666 } .cd-gallery li .desc.authorDesc { display: none } .cd-gallery li .authorName { display: none } .cd-gallery li .articleDate { display: none } .cd-gallery li .secName { display: none; font-family: DroidKufiBold, Arial; font-size: 12px; color: #fff; position: absolute; top: 10px; right: 10px; pointer-events: visible; } .searchResult .cd-gallery li .secName { display: inline-block; position: relative; top: auto; right: auto; margin-bottom: 10px } .cd-gallery li .time { font-size: 12px; color: #666; display: inline-block; float: right; width: 100%; cursor: default; padding: 0 10px 6px } .cd-gallery li .icon-time:before { content: "e"; font-size: 14px; float: right; margin-left: 5px; line-height: 1.6 } .cd-gallery ul li.icon-video .imageCntnr span, .cd-gallery ul li.icon-image .imageCntnr span { position: absolute; width: 32px; height: 32px; left: 4px; top: 4px; z-index: 1; line-height: 32px; text-align: center; background: #E03322; border-radius: 50%; } .cd-gallery ul li.icon-video .imageCntnr span:before, .cd-gallery ul li.icon-image .imageCntnr span:before { color: #fff; font-size: 17px; line-height: 32px; opacity: 1; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; } .cd-gallery ul li.icon-image .imageCntnr span:before { content: "t"; } .cd-gallery ul li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px } .cd-gallery li.gap { opacity: 0; height: 0; display: inline-block; } .cd-gallery img { display: block; width: 100%; } .cd-gallery .cd-fail-message { display: none; text-align: center; } .cd-gallery .leaderboardDiv { margin: 16px auto 40px } /******** Infinite Listing - Article Page *******/ .article.cd-gallery { display: inline-block; width: 100%; margin-left: 0; background: none; padding: 0; margin-top: 30px } .article.cd-gallery .infiniteListing li { display: inline-block; width: 100%; float: right; padding: 30px 80px; background: #fff; margin-bottom: 30px; cursor: auto } .article.cd-gallery .infiniteListing li .item { display: inline-block; float: right; width: 100%; text-align: center } .article.cd-gallery .infiniteListing li .articleHeader { display: inline-block; width: 100%; float: right; margin-bottom: 0; position: relative; z-index: 2; } .article.cd-gallery .infiniteListing li h3, .article.cd-gallery .infiniteListing li .infiniteTitle { font-family: DroidKufiBold,Arial; font-size: 22px; color: #1d1d1d; direction: rtl; margin-bottom: 30px; line-height: 1.6; text-align: right } .article.cd-gallery .infiniteListing li .secName { display: inline-block; float: right; font-family: DroidKufiBold, Arial; font-size: 14px; color: #fff; margin-bottom: 20px; text-align: center; position: relative; top: 0; right: 0 } .article.cd-gallery .infiniteListing li .time { padding: 0; text-align: right; margin-bottom: 20px; font-size: 13px; } .article.cd-gallery .infiniteListing li .icon-time:before { font-size: 14px; line-height: 26px; } .article.cd-gallery .infiniteListing li .imgDiv { display: inline-block; float: right; margin: 0 auto; overflow: hidden; width: 100%; max-width: 810px; padding-bottom: 20px; margin-bottom: 20px; position: relative; z-index: 2; border-bottom: 1px solid #ddd } .article.cd-gallery .infiniteListing li .imgDiv .imageCntnr { padding-bottom: 56.25%; float: right; max-width: 810px; width: 100%; position: relative; } .article.cd-gallery .infiniteListing li .imgDiv .imageCntnr img { width: 100%; height: auto; position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%); } .article.cd-gallery .infiniteListing li.icon-image:before, .article.cd-gallery .infiniteListing li.icon-video:before { display: none } .article.cd-gallery .infiniteListing li.icon-video .imageCntnr span, .article.cd-gallery .infiniteListing li.icon-image .imageCntnr span { position: absolute; width: 32px; height: 32px; text-align: center !important; left: 4px; top: 4px; z-index: 1; margin: 0; line-height: 32px; text-align: center; background: #E03322; border-radius: 50%; } .article.cd-gallery .infiniteListing li.icon-video .imageCntnr span:before, .article.cd-gallery .infiniteListing li.icon-image .imageCntnr span:before { color: #fff; font-size: 17px; line-height: 32px; opacity: 1; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; } .article.cd-gallery .infiniteListing li.icon-image .imageCntnr span:before { content: "t"; } .article.cd-gallery .infiniteListing li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px } .article.cd-gallery .infiniteListing li.innerListingAds { background: none; padding: 0 } .article.cd-gallery .infiniteListing li.innerListingAds .adTtl { text-align: center; color: #666; background: #fff; font-size: 11px !important; width: auto; height: 16px; max-height:16px; line-height: 16px; cursor: default; } .article.cd-gallery .infiniteListing li .moreBtn { display: inline-block; float: right; width: 200px; height: 44px; background: #ddd; margin: 0 calc((100% - 200px) / 2); font-size: 14px; color: #1d1d1d; text-align: center; line-height: 44px } .article.cd-gallery .infiniteListing li.news .moreBtn:hover { background: #E03322; color: #fff } .article.cd-gallery .infiniteListing li.sports .moreBtn:hover { background: #056818; color: #fff } .article.cd-gallery .infiniteListing li.arts .moreBtn:hover { background: #A8006B; color: #fff } .article.cd-gallery .infiniteListing li.howa_w_hya .moreBtn:hover { background: #7b1fa2; color: #fff } .article.cd-gallery .infiniteListing li.autos .moreBtn:hover { background: #1a237e; color: #fff } .article.cd-gallery .infiniteListing li.islameyat .moreBtn:hover { background: #075C99; color: #fff } .article.cd-gallery .infiniteListing li.ramadan .moreBtn:hover { background: #330D46; color: #fff } .article.cd-gallery .infiniteListing li.speakol-widget{padding:0 0 16px} /********** Loader **********/ .loader { display: inline-block; width: 60px; margin: 24px calc((100% - 60px) / 2); } .loader img { border: none; height: auto } .loader.grey { height: 206px; position: relative } .loader.grey img { position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px } /* Lazyload */ img.lazy { background: url(../Images/lazyLoadBG.jpg?ver=0.1) top left no-repeat; background-size: 100%; position: relative; min-height: 100%; max-width: unset; } .artclEnd { float: right; width: 100%; display: inline-block } /********** Listing **********/ .listing { width: calc(100% - 320px); margin-left: 20px; padding: 0; background: none } /*.listing .ttl h1:after{content:"";width:4px;height:24px;background:#E03322;float:right;margin-left:12px;margin-top:4px}*/ .listing .cd-gallery li { display: inline-block } .listing .cd-tab-filter-wrapper { display: none } .innerListingContainer { padding: 0; background: none } .searchResult { width: calc(100% - 320px); margin-left: 20px; padding: 0; background: none } .searchResult.wzTag .ttl p { float: right; display: inline-block; padding: 0; font-family: DroidKufiBold, Arial; font-size: 18px; color: #fff; display: inline-block; line-height: 40px; padding: 0px 20px 0 8px; background: #E03322; } /*.searchResult.wzTag .ttl h1{color: #E03322;padding: 0 10px;background: #fff;height: 40px;float: right;line-height: 38px;margin: 0;border: 2px solid #E03322;border-bottom: none;}*/ .searchResult form { display: inline-block; width: 100%; height: auto; margin: 0; padding: 20px; background: #e8e8e8; position: relative; margin-top: 16px } .searchResult form:before { display: none } .searchResult form input { display: inline-block; position: relative; width: 100%; height: auto; text-align: right; background: #fff; cursor: text; padding: 10px; border: 1px solid #ddd !important; z-index: 1; direction: rtl; font-size: 14px; color: #1d1d1d; outline: none; } .searchResult form .morphsearch-submit { position: absolute; width: 30px; height: 30px; margin-top: 0; overflow: hidden; left: 30px; top: 30px; background: #fff; z-index: 2; background-size: 100%; border: none; pointer-events: auto; transform-origin: 50% 50%; opacity: 1; -webkit-transform: translate3d(0,0,0) scale3d(1,1,1); transform: translate3d(0,0,0) scale3d(1,1,1); } .searchResult form .morphsearch-submit.icon-search:before { content: "f"; color: #ddd; font-size: 20px; line-height: 1.4; opacity: 1; height: 30px; width: 30px; transform: none; top: 0; } .searchResult form input:focus, .searchResult form textarea:focus { border: 1px solid #666 !important; outline: none; } /** Search Result Filter **/ .filterMainContent { position: relative; min-height: 28vh; display: inline-block; float: right; width: 100%; margin-top: 0 } .filterMainContent:after { content: ""; display: table; clear: both; } .filterMainContent h3 { display: inline-block; float: right; width: 110px; font-family: DroidKufiBold, Arial; font-size: 14px; color: #1d1d1d; line-height: 3.5; direction: rtl } .cd-tab-filter-wrapper { display: inline-block; width: 100%; float: right; position: relative; overflow: hidden; height: 100%; max-height: 0; box-sizing: border-box; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; } .cd-tab-filter-wrapper.show { opacity: 1; visibility: visible; margin: 40px 0 24px; } /*.cd-tab-filter-wrapper:before{content:"";display:inline-block;float:right;width:20px;height:20px;margin-top:8px;margin-left:16px;background:url(../Images/filter.png) no-repeat center center;background-size:100% auto}*/ .cd-tab-filter-wrapper:after { content: ""; display: table; clear: both; } .cd-tab-filter { display: inline-block; float: right; position: relative; width: 100%; margin: 0 auto; cursor: auto } .cd-tab-filter::after { content: 'q'; position: absolute; left: 20px; top: 50%; color: #666; bottom: auto; -webkit-transform: rotate(-90deg) translateY(-50%); -moz-transform: rotate(-90deg) translateY(-50%); -ms-transform: rotate(-90deg) translateY(-50%); -o-transform: rotate(-90deg) translateY(-50%); transform: rotate(-90deg) translateY(-50%); display: none; line-height: 0.5; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; pointer-events: none; } .cd-tab-filter ul { position: static; top: 0; left: 0; display: inline-block; float: right; width: 100%; } .cd-tab-filter li { display: inline-block; float: right; margin-left: 10px; margin-bottom: 10px } .cd-tab-filter li:last-of-type { border-left: none; margin-left: 0 } .cd-tab-filter li.placeholder { display: none !important } .cd-tab-filter li:first-child { display: block; } .cd-tab-filter a { display: inline-block; height: 36px; border-radius: 20px; padding: 0 30px; background: #fff; border: 1px solid #e8e8e8; line-height: 36px; font-size: 13px; color: #1d1d1d; text-align: center } .cd-tab-filter a:hover, .cd-tab-filter a.selected { background: #1d1d1d; color: #fff; } .cd-tab-filter li.news a:hover, .cd-tab-filter li.news a.selected { background: #E03322 } .cd-tab-filter li.arts a:hover, .cd-tab-filter li.arts a.selected { background: #A8006B } .cd-tab-filter li.howa_w_hya a:hover, .cd-tab-filter li.howa_w_hya a.selected { background: #7b1fa2 } .cd-tab-filter li.sports a:hover, .cd-tab-filter li.sports a.selected { background: #056818 } .cd-tab-filter li.autos a:hover, .cd-tab-filter li.autos a.selected { background: #1a237e } .cd-tab-filter li.islameyat a:hover, .cd-tab-filter li.islameyat a.selected { background: #075C99 } .cd-tab-filter li.ramadan a:hover, .cd-tab-filter li.ramadan a.selected { background: #330D46 } .cd-tab-filter.is-open::after { -webkit-transform: translateY(-50%) rotate(-270deg); -moz-transform: translateY(-50%) rotate(-270deg); -ms-transform: translateY(-50%) rotate(-270deg); -o-transform: translateY(-50%) rotate(-270deg); transform: translateY(-50%) rotate(-270deg); } .cd-tab-filter.is-open ul { box-shadow: inset 0 0 0 #1d1d1d, 0 2px 10px rgba(0, 0, 0, 0.2); max-height: 300px; overflow-y: scroll; z-index: 1; } .cd-tab-filter.is-open ul li { display: inline-block; } .cd-tab-filter.is-open .placeholder a { opacity: .4; } .cd-gallery li.innerListingAds { width: 100% !important; display: inline-block; text-align: center; margin-bottom: 0 !important; padding-bottom: 0; background: none !important; border: none !important; cursor: auto; } .cd-gallery li.innerListingAds iframe { width: 100% } .cd-gallery .billboardDiv .adAsync iframe { width: 728px } .cd-gallery li.innerListingAds section { margin-bottom: 16px } .cd-gallery li.innerListingAds .showcaseDiv, .articleDiv .showcaseDiv { margin: 0 calc((100% - 300px) / 2) 16px } .authorsListing .cd-gallery li .time { display: none } .authorsListing .cd-gallery li .authorName { display: inline-block; font-size: 13px; color: #666; height: 28px; overflow: hidden; padding: 0 10px } .authorsListing .cd-gallery li .authorName:hover { color: #1d1d1d } /********** Author Page **********/ .author .cd-tab-filter { width: 100%; margin: 0; } .author .cd-tab-filter::after { display: inline-block; left: 16px } .author .cd-tab-filter ul { display: inline-block; float: right; position: relative; width: 100%; height: auto; max-height: 300px; overflow-x: hidden; overflow-y: auto; text-align: right; background: #fff; cursor: text; padding: 0 12px; border: 1px solid #ddd; direction: rtl; font-size: 16px; color: #666; outline: none; } .author .cd-tab-filter.is-open ul { z-index: 1; } .author .cd-tab-filter li { display: none; width: 100%; border: none; margin-bottom: 0 } .author .cd-tab-filter li.placeholder { display: block !important; margin-left: 0 } .author .cd-tab-filter a { display: inline-block; width: 100%; padding: 0; text-align: right; height: 40px; line-height: 40px; border: none; border-radius: 0 } .author .cd-tab-filter a:hover { background: none !important; color: #1d1d1d; opacity: 0.4 } .author .cd-tab-filter a.selected { background: #f2f2f2; color: #1d1d1d; box-shadow: none; padding-right: 12px; } .author .cd-tab-filter.is-open ul li { display: block } .author .cd-tab-filter-wrapper { z-index: 3; width: 100%; height: auto; float: right; display: inline-block; padding: 16px; background: #e8e8e8; position: relative; margin-top: 16px; max-height: unset } .author .cd-tab-filter-wrapper:before { display: none } .author .cd-tab-filter-wrapper:after { content: ""; display: table; clear: both; } .author .authorData { display: inline-block; width: 100%; margin: 30px 0; box-shadow: none; background: none } .author .authorData .imgCntnr { display: inline-block; float: right; width: 150px; padding-bottom: calc((150px * 100) / 100); position: relative; border-radius: 50%; overflow: hidden; background: #e8e8e8; } .author .authorData .imgCntnr img { width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%) } .author .authorData .data { float: right; margin-right: 24px; width: calc(100% - 210px); display: inline-block; direction: rtl; color: #1d1d1d; font-size: 16px; text-align: right } .author .authorData .data .name { display: inline-block; width: 100%; font-family: DroidKufiBold, Arial; font-size: 22px; line-height: 1.2; float: right; margin: 5px 0 10px 0 } .author .authorData .data .bio, article .authorDtls .articleHeader .bio { display: inline-block; float: right; width: 100%; font-size: 14px; line-height: 1.8; margin-top: 10px; max-height: 78px; overflow: hidden; cursor: auto } .author .authorData .data .bio p, article .authorDtls .articleHeader .bio p { cursor: auto } .author .authorData .data .artclsNum { display: inline-block; width: 100%; margin-bottom: 20px; float: right } .author .authorData .data .lastArtcl { display: inline-block; width: 100%; float: right; height: 58px; overflow: hidden; font-size: 16px; margin-bottom: 20px; } .author .authorData .data .lastArtcl span { color: #666; margin-left: 5px } .author .authorData .data .date { font-size: 14px; color: #666; display: inline-block; width: 100%; float: right } .author .authorData .data .icon-date:before { content: "c"; font-size: 16px; float: right; margin-left: 5px; line-height: 1.6; } .author .allArtclsTtl { display: inline-block; width: 100%; background: #474747; height: 40px; padding: 0 12px } .author .allArtclsTtl h2 { font-size: 18px; color: #fff; text-align: right; direction: rtl; line-height: 2.2 } /** Author Page Listing **/ .author .cd-gallery li .articleDate { font-size: 14px; color: #666; display: inline-block; width: 100% } .author .cd-gallery li .icon-date:before { content: "c"; font-size: 16px; float: right; margin-left: 5px; line-height: 1.6 } .author .cd-gallery li .authorName { display: none } .innerListing.authorsListing.author .ttl .more { display: none } /********** Latest News **********/ .pattern01 { padding: 0; background: none; box-shadow: none; position: relative; z-index: 3 } .pattern01 .ttl h3 { padding: 0; background: none !important; color: #1d1d1d } .pattern01 .allItems { display: inline-block; width: 100%; padding: 16px 0 0 } .pattern01 ul li { float: right; margin-left: 16px; margin-bottom: 16px; width: calc((100% - 64px) / 5); height: auto; position: relative; overflow: hidden; display: inline-table; background: #fff; border: 1px solid #e8e8e8; } .pattern01 ul li a { display: block } .pattern01 ul li .item .imageCntnr { position: relative; overflow: hidden; padding-bottom: 56.25%; float: right; display: inline-block; width: 100%; } .pattern01 ul li .item img:not(article .details .divVideoStep .ivbsThumbWrapper>img) { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%,-50%); margin: 0 auto !important; width: 100%; height: auto; transition: none } .pattern01 ul li:nth-child(5n) { margin-left: 0 } .pattern01 ul li:nth-last-child(-n+5) { margin-bottom: 0 } .pattern01 ul li .desc { width: 100%; overflow: hidden; cursor: pointer; position: relative } .pattern01 ul li .desc h2 { color: #1d1d1d; height: 68px; cursor: pointer; overflow: hidden; text-align: right; line-height: 1.6; font-size: 14px; padding: 0 10px; margin: 40px 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s } .pattern01 ul li .item .desc:hover h2 { color: #666 } .pattern01 ul li .secName { font-family: DroidKufiBold, Arial; font-size: 12px; color: #fff; display: inline-block; position: absolute; top: 10px; right: 10px; pointer-events: visible } /*.pattern01 ul li .secName:after{content:"";width:4px;height:14px;background:#E03322;float:right;margin-left:5px;margin-top:6px}*/ /*.pattern01 ul li .secName:hover{color:#1d1d1d}*/ /*.pattern01 ul li.icon-video, .pattern01 ul li.icon-image{background:#1d1d1d;} .pattern01 ul li.icon-video .desc p, .pattern01 ul li.icon-image .desc p{color: #fff;padding: 10px} .pattern01 ul li.icon-video .item:hover .desc p, .pattern01 ul li.icon-image .item:hover .desc p{color:#666} .pattern01 ul li.icon-video .secName, .pattern01 ul li.icon-image .secName{margin-right:10px;color:#bbb;} .pattern01 ul li.icon-video .secName:hover, .pattern01 ul li.icon-image .secName:hover{color:#666}*/ .pattern01 ul li.icon-video .imageCntnr span, .pattern01 ul li.icon-image .imageCntnr span { position: absolute; width: 32px; height: 32px; left: 4px; top: 4px; z-index: 1; line-height: 32px; text-align: center; background: #E03322; border-radius: 50%; } .pattern01 ul li.icon-video .imageCntnr span:before, .pattern01 ul li.icon-image .imageCntnr span:before { color: #fff; font-size: 17px; line-height: 32px; opacity: 1; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; } .pattern01 ul li.icon-image .imageCntnr span:before { content: "t"; } .pattern01 ul li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px } /********** Akhbar Themak **********/ .akhbarthemak { display: inline-block; float: left;width:100%;height:655px; } .akhbarThemak { float: right; width: 300px; height:625px; box-shadow: none; overflow: hidden; position: relative; border: 1px solid #e8e8e8; background: #fff } .akhbarThemak .ttl { display: inline-block; float: right; width: 100%; height: 48px; overflow: hidden; padding: 0 12px; background: #E03322; border-bottom: none !important } .akhbarThemak .ttl .inTtl { float: right; display: inline-block; padding: 0px; font-family: DroidKufiBold, Arial; font-size: 18px; background: none !important; color: #fff; display: block; line-height: 48px; } .akhbarThemak .ttl .inTtl:after { display: none } .akhbarThemak .ttl .inTtl a { color: #fff } .akhbarThemak .ttl .icons { display: inline-block; float: left; } .akhbarThemak .ttl .icons .cd-popup-setting, .akhbarThemak .ttl .icons .cd-popup-notify { display: inline-block; float: right; } .akhbarThemak .ttl .icons .cd-popup-notify { margin-right: 10px } .akhbarThemak .ttl .icons .icon-setting:before { content: "p"; color: #fff; font-size: 20px; line-height: 48px } .akhbarThemak .ttl .icons .icon-notify:before { content: "i"; color: #fff; font-size: 22px; line-height: 48px } .akhbarThemak .popupSetting, .akhbarThemak .popupNotify { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; } .akhbarThemak .popupSetting.is-visible, .akhbarThemak .popupNotify.is-visible { opacity: 1; visibility: visible; z-index: 10; -webkit-transition: opacity 0.3s 0s, visibility 0s 0s; -moz-transition: opacity 0.3s 0s, visibility 0s 0s; transition: opacity 0.3s 0s, visibility 0s 0s; } .akhbarThemak .cd-popup-container { position: absolute; padding: 24px; width: 1000px; height: 500px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #FFF; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .akhbarThemak .cd-popup-container h2 { display: inline-block; width: 100%; font-family: DroidKufiBold, Arial; font-size: 22px; color: #1d1d1d; margin-bottom: 0; padding: 0; background: none; } .akhbarThemak .cd-popup-container h2:after { display: none } .akhbarThemak .cd-popup-container h4 { display: inline-block; float: right; width: 100%; font-size: 13px; color: #666; margin-bottom: 12px; padding: 0; text-align: right } .akhbarThemak .cd-popup-container .sectionContainer { display: inline-block; float: right; width: 100%; position: relative } .akhbarThemak .cd-popup-container .sec { display: inline-block; width: calc((100% - 160px) / 5); float: right; margin-left: 12px } .akhbarThemak .cd-popup-container .sec:last-child { margin-left: 0; width: 100px } .akhbarThemak .cd-popup-container h3 { display: inline-block; width: 100%; font-family: DroidKufiBold, Arial; font-size: 14px; color: #1d1d1d; margin-bottom: 12px; padding-right: 0; background: #eee } .akhbarThemak .cd-popup-container .cd-buttons { position: absolute; left: 50%; bottom: 20px; width: 410px; height: 50px; transform: translateX(-50%) } .akhbarThemak .cd-popup-container .cd-buttons a { position: relative; top: 0; left: 0; float: right; background: #ddd; margin-left: 10px; width: 200px; height: 50px; font-size: 14px; color: #1d1d1d; text-align: center; display: inline-block; line-height: 50px; } .akhbarThemak .cd-popup-container .cd-buttons a:before, .akhbarThemak .cd-popup-container .cd-buttons a:after { display: none } .akhbarThemak .cd-popup-container .cd-buttons a:first-child { background: #E03322; color: #fff } .akhbarThemak .cd-popup-container .cd-buttons a:hover { background: #ccc } .akhbarThemak .cd-popup-container .cd-buttons a:first-child:hover { background: #E03322 } .akhbarThemak .cd-popup-container .cd-buttons a:last-child { margin-left: 0 } /** Notify **/ .akhbarThemak .cd-popup-notify { position: relative } .akhbarThemak .cd-popup-notify .ntfyNum { position: absolute; top: 8px; right: -10px; width: 17px; height: 17px; background: red; border-radius: 50%; color: #fff; text-align: center; font-family: Arial; font-size: 12px; line-height: 1.5 } .akhbarThemak .cd-popup-container.notify { width: 700px; height: 150px } .akhbarThemak .cd-popup-container.notify p { display: inline-block; width: 100%; font-size: 15px; text-align: center; color: #1d1d1d; margin-bottom: 0; padding: 0; line-height: 102px } .akhbarThemak .cd-popup-container .cd-popup-close { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; } .akhbarThemak .cd-popup-container .cd-popup-close::before, .akhbarThemak .cd-popup-container .cd-popup-close::after { content: ''; position: absolute; top: 0; width: 2px; height: 100%; background-color: #1d1d1d; opacity: 0.2; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } .akhbarThemak .cd-popup-container .cd-popup-close:hover::before, .akhbarThemak .cd-popup-container .cd-popup-close:hover::after { opacity: 1 } .akhbarThemak .cd-popup-container .cd-popup-close::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .akhbarThemak .cd-popup-container .cd-popup-close::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } body.popupOverlay { position: fixed ;top: 0;left: 0;bottom: 0;right: 0;} .akhbarThemak ul { display: inline-block; float: right; width: 100%; padding: 0 10px; } .akhbarThemak li { width: 100%; display: inline-block; float: right; padding: 10px 0; position: relative; border-bottom: 1px solid #e8e8e8 } .akhbarThemak li:last-child { border-bottom: none } .akhbarThemak ul li .item .imageCntnr { position: relative; overflow: hidden; padding-bottom: calc((100px * 75) / 100); float: right; width: 100px; } .akhbarThemak li img { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0 auto; float: right; width: auto; max-width: unset; height: 100%;object-fit: cover; } .akhbarThemak li .cnts { display: inline-block; float: right; width: calc(100% - 100px); padding-right: 10px } .akhbarThemak li h2 { float: right; width: 100%; color: #000; font-size: 13px; line-height: 1.6; height: 42px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .akhbarThemak li .secName { display: inline-block; float: right; margin-bottom: 6px; font-family: DroidKufiBold, Arial; color: #fff; font-size: 12px; } /*.akhbarThemak li .secName:before{content:"";float:right;margin-left:5px;width:4px;height:12px;background:#E03322;margin-top:4px}*/ .akhbarThemak li.native{padding: 0;border-bottom: none;} .akhbarThemak.fixed { position: fixed } .leftDtlsSc .akhbarThemak { margin-bottom: 30px } /******************** app masrawy ********************/ .masrawyApp{display:inline-block;float:right;width:100%;height:250px;position:relative;margin-bottom:30px;overflow:hidden; background: linear-gradient(168deg, rgb(44 53 68) 0, rgba(29, 29, 29, 1) 100%);} .masrawyApp .appbk{display:inline-block;position:absolute;width:100%;height:auto;top:0;right:0;z-index:0;pointer-events:none} .masrawyApp a{display:inline-block;width:100%;padding:30px 300px 0;position:relative;z-index:1} .masrawyApp .rightSide{display:inline-block;width:341px;float:right} .masrawyApp .rightSide p{display:inline-block;width:100%;float:right;font-size:51px;font-weight:700;color:#E53935;line-height:1;margin-bottom:32px;text-align:right} .masrawyApp .rightSide span{display:inline-block;width:100%;float:right;font-size:34px;font-weight:400;color:#fff;line-height:1;margin-bottom:22px;text-align:right} .masrawyApp .rightSide .appBtns div{display:inline-block;float:right;width:164px;height:50px;margin-left:10px} .masrawyApp .rightSide .appBtns div:last-child{margin-left:0} article .masrawyApp{height:80px;padding: 0;} article .masrawyApp a{display:inline-block;width:100%;padding:0 135px 0;position:relative;z-index:1} article .masrawyApp .rightSide{width:100%;pointer-events:none} article .masrawyApp .text{ display:inline-block;float:right; width: 200px;padding:12px 0 } article .masrawyApp .rightSide p{font-size:26px;text-align:right;margin-bottom:14px} article .masrawyApp .rightSide span{font-size:17px;text-align:right;margin-bottom:0} article .masrawyApp .rightSide .appBtns{display:inline-block;float:left;width:102px;padding:7px 0} article .masrawyApp .rightSide .appBtns div{width:102px;height:31px;margin-bottom:4px;margin-left:0} article .masrawyApp .rightSide .appBtns div:last-child{margin-bottom:0} article .masrawyApp .appHand{ display:inline-block; width: auto;height: 90px;position: absolute;bottom: -7px;left: 38%;background-size: 100%;z-index:0;pointer-events:none} article .masrawyApp .rightSide .appBtns div img{max-height: unset;width: 100%;height: auto;} /******** Poll *******/ article .articlePoll { display: inline-block; position: relative; float: right; padding: 20px; width: 800px; border: 1px solid #d3d3d3; margin: 0 calc((100% - 800px) /2); } article .articlePoll .ttl { background: none; border-bottom: none !important; padding-right: 0; margin-bottom: 10px; height: 46px; } article .articlePoll .ttl h3 { font-size: 16px !important; line-height: 2.5 } article .articlePoll .ttl h3:after { display: none !important } article .articlePoll .allItems { display: inline-block; width: 100%; } article .articlePoll .allItems h3 { display: inline-block; width: 100%; float: right; text-align: right; font-family: DroidKufiBold, Arial; font-size: 16px; color: #000; margin-bottom: 20px } article .details .articlePoll h3 a { display: inline-block !important; float: right !important; margin: 10px 0 0 5px !important; white-space: unset !important; line-height: 1 !important; width: 25px !important; position: relative !important; } article .details .articlePoll h3 a img { width: 22px; height: auto; margin: 0 !important; border: 0 !important } article .articlePoll .allItems .pollBullets { display: inline-block; float: right; width: 100% } article .articlePoll .allItems input[type="radio"] + label { display: inline-block; width: 100%; height: auto; position: relative; padding: 5px; border: 1px solid #d3d3d3; background-color: #e6e6e6; margin-bottom: 15px; font-size: 15px; } article .articlePoll .allItems .btns { display: inline-block; float: right; margin-top: 20px; margin: 0 calc((100% - 105px) /2); position: relative } article .articlePoll .allItems .btns .vote { float: right; width: 100px; height: 30px; background: #E03322; font-size: 14px !important; color: #fff !important; text-align: center !important; margin: 0 0 0 4px; line-height: 2.2; } article .articlePoll .allItems .btns .social { float: right; width: 30px; height: 30px; margin-left: 2px; color: #fff; text-align: center } article .articlePoll .allItems .btns .social:last-child { margin-left: 0 } article .articlePoll .allItems .btns .icon-fb { background: #3c5899 } article .articlePoll .allItems .btns .icon-fb:hover { background: #2c4582 } article .articlePoll .allItems .btns .icon-fb:before { content: "b"; font-size: 20px; line-height: 1.6 } article .articlePoll .allItems .btns .icon-tw { background: #229ff3 } article .articlePoll .allItems .btns .icon-tw:hover { background: #178cd7 } article .articlePoll .allItems .btns .icon-tw:before { content: "c"; font-size: 20px; line-height: 1.6 } article .articlePoll .allItems .btns .Popup { position: absolute; width: 300px; background-color: #868686; padding: 5px 10px; top: -55px; right: -200px; } article .articlePoll .allItems .btns .Popup h6 { color: #fff; float: right; font-size: 15px; } article .articlePoll .allItems .btns .Popup:before { content: ''; position: absolute; bottom: -8px; left: 20px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #868686; } article .articlePoll input[type="radio"] + label { color: #000; font-size: 16px; float: right; margin: 0 5px 10px; text-align: right; display: inline-block; width: 100%; direction: rtl } article .articlePoll input[type="radio"] + label img { width: auto; height: 30px; margin: 0 } article .articlePoll input[type="radio"] + label span { display: inline-block; margin: 4px 0 0 8px; vertical-align: middle; cursor: pointer; } /*article .articlePoll input[type="radio"]:checked + label span {background:url(../Images/pollRadio.png) left -12px top no-repeat;}*/ /*article .articlePoll input[type="radio"]:checked + label{background-color:#056818;color:#fff} article .articlePoll input[type="radio"]:checked + label span{background-color:#056818}*/ article .articlePoll .secondStep { display: inline-block; width: 100%; float: right } article .articlePoll .secondStep ul { padding-right: 0; float: right } article .articlePoll .secondStep li { display: inline-block; width: 100%; float: right; margin-bottom: 20px; } article .articlePoll .secondStep .itemDiv { display: inline-block; width: 100%; float: right } article .articlePoll .secondStep .itemDiv .item { display: inline-block; width: auto; float: right; font-size: 16px !important; white-space: unset !important; text-align: right; direction: rtl; color: #000; margin: 0 !important; margin-left: 10px !important } article .articlePoll .secondStep .itemDiv .votes { display: inline-block; width: auto; float: right; white-space: unset !important; font-size: 12px !important; text-align: right; direction: rtl; color: #a7a7a7 !important; margin: 0 !important; line-height: 2.9; } article .articlePoll .secondStep .itemDiv .votes span { display: inline-block; width: auto; float: left; font-size: 12px !important; text-align: right; direction: rtl; color: #a7a7a7 !important; margin: 0 !important; line-height: 2.9; } article .articlePoll .secondStep .itemDiv .percentage { display: inline-block; width: auto; float: left; font-size: 16px !important; font-weight: bold; margin: 0 !important } article .articlePoll .secondStep .votesPercent { display: inline-block; float: right; width: 100%; position: relative; height: 6px; background: #ddd; overflow: hidden } article .articlePoll .secondStep .votesPercent .voteSlide { position: absolute; right: 0; top: 0; width: auto; height: 6px; background: #E03322 } /***** Tofan El Aqsa ****/ .aqsa{padding:20px;position:relative} .aqsa .ttl, .aqsa .allItems{position:relative;z-index:2} .aqsa:before{content:"";position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background:url(../Images/palestine07.jpg) top left no-repeat;background-size:cover;pointer-events:none;opacity:0.2} .aqsa:after{content:"";position:absolute;width:110px;height:40px;top:10px;left:20px;background:url(../Images/palestineFlag.png) center center no-repeat;background-size:cover;pointer-events:none;opacity:0.7} .articleListWidget{border: 1px solid #e8e8e8;margin-bottom:30px} .articleListWidget .ttl{padding:0 12px;height:48px} .articleListWidget .ttl p{float: right;display: inline-block;padding: 0;font-family: DroidKufiBold, Arial;font-size: 17px;color: #1d1d1d;display: inline-block;line-height: 48px;background: none;} .articleListWidget .ttl .more, .articleListWidget .ttl .icon-more:before{line-height:48px} .articleListWidget .allItems{display:inline-block;float:right;width:100%;margin-top: 10px;} .articleListWidget ul { display: inline-block; float: right; width: 100%; padding: 0 10px; } .articleListWidget li { width: 100%; display: inline-block; float: right; padding: 10px 0; position: relative; border-bottom: 1px solid #e8e8e8 } .articleListWidget li:last-child { border-bottom: none } .articleListWidget ul li .item .imageCntnr { position: relative; overflow: hidden; padding-bottom: calc((100px * 75) / 100); float: right; width: 100px; } .articleListWidget li img { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0 auto; float: right; width: auto; max-width: unset; height: 100%;object-fit: cover; } .articleListWidget li .cnts { display: inline-block; float: right; width: calc(100% - 100px); padding-right: 10px } .articleListWidget li h2 { float: right; width: 100%; color: #000; font-size: 13px; line-height: 1.6; height: 42px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .articleListWidget li .secName { display: inline-block; float: right; margin-bottom: 6px; font-family: DroidKufiBold, Arial; color: #fff; font-size: 12px; } .thanwyaWidget .articleListWidget .ttl{background:#E03322} .thanwyaWidget .articleListWidget .ttl p a, .thanwyaWidget .articleListWidget .ttl .more, .thanwyaWidget .articleListWidget .ttl .icon-more:before{color:#fff} .sportsWidget .articleListWidget{background:#000} .sportsWidget .articleListWidget .ttl{ border-bottom: 2px solid #F1BE48;} .sportsWidget .articleListWidget .ttl p a, .sportsWidget .articleListWidget .ttl .more, .sportsWidget .articleListWidget .ttl .icon-more:before, .sportsWidget .articleListWidget li .secName.sports{color:#F1BE48} .sportsWidget .articleListWidget li h2{color:#fff} .sportsWidget .articleListWidget li{ border-bottom: 1px solid #FFFFFF33;} .sportsWidget .articleListWidget li.sports h2:hover { color: #F1BE48!important;} .thanawyaVideo{display:inline-block;width:100%;float:right;margin-bottom:25px} .thanawyaVideo p{display: inline-block; float: right; width: 100%; font-family: DroidKufiBold, Arial !important; font-size: 15px !important; margin-bottom: 10px !important; cursor: auto !important;} .thanawyaVideo .iframeDiv{display:inline-block;width:100%;height: auto;padding-bottom:56%; position: relative;box-sizing: border-box;} .thanawyaVideo iframe{width:100%;height:100%;border:0;position:absolute;top:0;right:0} .articleData{float:right;width:calc(100% - 50px)} .articleData:before{content:'';float:right;width:40px;height:40px;border: 1px solid #E8E8E8;background: #FFF;margin-left:10px;background:url(../Images/Logo/57x57.png) no-repeat center center #fff;background-size:80% auto} .articleData p{width:calc(100% - 55px);float:right;color: #666;font-size: 14px;position:relative} /*taboola*/ .tabolaaContainer{ background-color:#fff; padding:30px; margin-bottom:30px; display:inline-block; border: 1px solid #e8e8e8;width:100%;height:1460px;overflow:hidden; padding: 16px 60px; overflow-y: auto;float:right } .tabolaaContainer .tbl-feed-header{display:inline-block!important} .tabolaaContainer .thumbnails-feed .videoCube .video-label-box .video-title{ text-decoration:unset; font-family:DroidKufiLight, arial!important; font-size: 15px; margin-bottom: 10px; line-height: 1.5;font-weight:400 } .tabolaaContainer .videoCube a.video-cta-style .video-label-flex-cta-item{ font-family:DroidKufiLight, arial!important; font-size:14px; margin-bottom:12px } .tabolaaContainer .tbl-feed-container .videoCube .video-cta-href:not(.app-install-child) button.video-cta-button{ font-family: DroidKufiLight, arial !important; font-size: 11px; color: #000 !important; } .tabolaaContainer .videoCube a.video-cta-style .video-branding-flex-cta-item{ font-family: DroidKufiLight, arial !important; } .tabolaaContainer p{display:none} .tabolaaContainer .thumbnails-feed .syndicatedItem .video-label-box{padding:5px} .tabolaaContainer [data-feed-main-container-id="taboola-below-article-thumbnails"] .tbl-feed-card{margin-bottom:0} @media screen and (min-width:1680px) and (max-width:1919px) { .tabolaaContainer {height:1259px} .cd-articles article, .article.cd-gallery .infiniteListing li , .tabolaaContainer{ padding: 15px 50px } .masrawyApp{padding:30px 210px 0} .masrawyApp:after{left:15%} article .masrawyApp a{padding:0 85px 0} .lg-outer.lg-pull-caption-up .lg-sub-html{width:1303px} } @media screen and (min-width:1600px) and (max-width:1679px) { .tabolaaContainer {height:1259px} .masrawyApp{padding:30px 210px 0} .masrawyApp .appHand{left:15%} article .masrawyApp a{padding:0 68px 0 100px} .cd-articles article, .article.cd-gallery .infiniteListing li, .tabolaaContainer{ padding: 15px 50px } .lg-outer.lg-pull-caption-up .lg-sub-html{width:1224px} } @media screen and (min-width:1536px) and (max-width:1599px) { .tabolaaContainer {height:1259px} .masrawyApp{padding:30px 210px 0} .masrawyApp .appHand{left:15%} article .masrawyApp a{padding:0 68px 0 100px} .cd-articles article, .article.cd-gallery .infiniteListing li, .tabolaaContainer{ padding: 15px 50px } .lg-outer.lg-pull-caption-up .lg-sub-html{width:1160px} } @media screen and (min-width:1440px) and (max-width:1535px) { .tabolaaContainer {height:1259px} .masrawyApp{padding:30px 210px 0} .masrawyApp .appHand{left:15%} article .masrawyApp a{padding:0 68px 0 100px} .cd-articles article, .article.cd-gallery .infiniteListing li, .tabolaaContainer{ padding: 15px 50px } .lg-outer.lg-pull-caption-up .lg-sub-html{width:1064px} } @media screen and (min-width:1360px) and (max-width:1439px) { .tabolaaContainer {height:1259px} .QEntryPoint { width: 600px; margin: 0 calc((100% - 600px) /2); } .QEntryPoint .Qimg { margin: 0 !important } article .articlePoll { width: 700px; margin: 0 calc((100% - 700px) /2) } article .articlePoll .allItems input[type="radio"] + label { font-size: 14px } .article .totalQues { width: 500px; margin: 0 calc((100% - 500px) /2) } .article .totalQues .answer { height: 70px } .article .totalQues .question h4.pQues { font-size: 18px } .article .totalQues .answer label { font-size: 16px } .article .totalQues .question h3 { font-size: 14px } .article .totalQues .question img { padding: 0 } .masrawyApp{padding:30px 210px 0} .masrawyApp .appHand {left:15%} article .masrawyApp a{padding:0 68px 0 100px} .cd-articles article, .article.cd-gallery .infiniteListing li { padding: 15px 50px } article .details iframe:not([src*="facebook.com"]), article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img, .spk-stand-wg .sp-wi-item img) { width: 100%; margin: 40px 0 !important } article .details .pattern01 iframe { margin: 0 !important } article .details iframe#frmPAVast { margin: 0 !important; width: unset; height: unset } article .imgDiv { width: 100% } .cd-articles article{ padding: 15px 50px} .lg-outer.lg-pull-caption-up .lg-sub-html{width:984px} } @media screen and (min-width:1280px) and (max-width:1359px) { .tabolaaContainer {height:1178px} .QEntryPoint { width: 600px; margin: 0 calc((100% - 600px) /2); } .QEntryPoint .Qimg { width: 170px; margin: 0 !important } .QEntryPoint .QDetails { width: calc(100% - 200px) } .QEntryPoint.NoImg .QDetails { width: 100% } article .articlePoll { width: 700px; margin: 0 calc((100% - 700px) /2) } article .articlePoll .allItems input[type="radio"] + label { font-size: 14px } .article .totalQues { width: 500px; margin: 0 calc((100% - 500px) /2) } .article .totalQues .answer { height: 70px } .article .totalQues .question h4.pQues { font-size: 18px } .article .totalQues .answer label { font-size: 16px } .article .totalQues .question h3 { font-size: 14px } .article .totalQues .question img { padding: 0 } .masrawyApp .rightSide p{font-size:46px} .masrawyApp .rightSide span{font-size:30px} .masrawyApp .rightSide .appBtns div{width:148px;height:45px} article .masrawyApp a{padding:0 54px 0} article .masrawyApp .appHand{left: 33%} .cd-articles article, .article.cd-gallery .infiniteListing li { padding: 15px 50px } article .authorDtls .imageCntnr { margin: 0 calc((100% - 150px) / 2) 20px } article .authorDtls .articleHeader { width: 100%; text-align: center; margin-bottom: 0 } article .authorDtls .articleHeader h1 { font-size: 24px; text-align: center } article .authorDtls .articleHeader .authorName { text-align: center; width: 100% } article .authorDtls .articleHeader .time { width: auto; float: unset; margin: 10px auto 0 } article .authorDtls .articleHeader .time span:last-of-type { margin-left: 0 } article .details iframe:not([src*="facebook.com"]), article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img) { width: 100%; margin: 40px 0 !important } article .details .pattern01 iframe { margin: 0 !important } article .details iframe#frmPAVast { margin: 0 !important; width: unset; height: unset } article .imgDiv { width: 100% } .lg-outer.lg-pull-caption-up .lg-sub-html{width:984px} .cd-articles article, .tabolaaContainer{ padding: 15px 50px} } @media screen and (min-width:1152px) and (max-width:1359px) { .paginationDiv .pattern01 ul li { width: calc((100% - 16px) / 2) } .paginationDiv .pattern01 ul li:nth-child(3n) { margin-left: 16px } .paginationDiv .pattern01 ul li:nth-child(2n) { margin-left: 0 } .paginationDiv .pattern01 ul li:nth-last-of-type(-n+2) { display: inline-block } } @media screen and (min-width:1152px) and (max-width:1279px) { .QEntryPoint { width: 100%; margin: 0; } .QEntryPoint .Qimg { width: 170px; margin: 0 !important } .QEntryPoint .QDetails { width: calc(100% - 200px) } .QEntryPoint.NoImg .QDetails { width: 100% } article .articlePoll { width: 100%; margin: 0 } article .articlePoll .allItems input[type="radio"] + label { font-size: 14px } .article .totalQues { width: 450px; margin: 0 calc((100% - 450px) /2) } .article .totalQues .answer { height: 70px } .article .totalQues .question h4.pQues { font-size: 18px } .article .totalQues .answer label { font-size: 16px } .article .totalQues .question h3 { font-size: 14px } .article .totalQues .question img { padding: 0 } .masrawyApp a{padding:30px 100px 0} .masrawyApp .appHand{left:8%} .masrawyApp .rightSide{width:300px} .masrawyApp .rightSide p{font-size:40px} .masrawyApp .rightSide span{font-size:26px} .masrawyApp .rightSide .appBtns div{width:130px;height:40px} article .masrawyApp a{padding:0 25px 0} article .masrawyApp .appHand{left: 30%; bottom: -13px; height: 90px;} article .masrawyApp .text{width:134px;padding: 17px 0;} article .masrawyApp .rightSide p{font-size:19px} article .masrawyApp .rightSide span{font-size:13px} article .masrawyApp .rightSide .appBtns{width:85px;padding:13px 0} article .masrawyApp .rightSide .appBtns div{width:85px;height:25px} .cd-gallery li { width: calc((100% - 16px) / 2); } .cd-articles article, .article.cd-gallery .infiniteListing li { padding: 30px } article .authorDtls .imageCntnr { margin: 0 calc((100% - 150px) / 2) 20px } article .authorDtls .articleHeader { width: 100%; text-align: center; margin-bottom: 0 } article .authorDtls .articleHeader h1 { font-size: 24px; text-align: center } article .authorDtls .articleHeader .authorName { text-align: center; width: 100% } article .authorDtls .articleHeader .time { width: auto; float: unset; margin: 10px auto 0 } article .authorDtls .articleHeader .time span:last-of-type { margin-left: 0 } article .details iframe:not([src*="facebook.com"]), article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img) { width: 100%; margin: 40px 0 !important } article .details .pattern01 iframe { margin: 0 !important } article .details iframe#frmPAVast { margin: 0 !important; width: unset; height: unset } article .imgDiv { width: 100% } .lg-outer.lg-pull-caption-up .lg-sub-html{width:775px} .cd-articles article{ padding: 15px 50px} } @media screen and (min-width:1024px) and (max-width:1279px) { .tabolaaContainer {height:1000px;padding:16px 20px} article .relatedItems .pattern01 { width: 140px; padding: 0 } article .relatedItems .pattern01:before { right: -10px } article .relatedItems .pattern01 ul li .item .imageCntnr { width: 100%; padding-bottom: 56.25% } article .relatedItems .pattern01 ul li .desc { width: 100%; padding: 0 } article .relatedItems .pattern01 ul li .secName { right: 0; font-size: 12px; top: 86px } article .relatedItems .pattern01 ul li .secName:after { height: 12px; } article .relatedItems .pattern01 ul li h3 { margin: 34px 0 0 !important; } .articleData {width: calc(100% - 36px);} .articleData:before{display:none} article .articleHeader .time {font-size: 11px;} article .articleHeader .time span {margin-left: 8px;} article .articleHeader .time span:last-child{margin-left:0} article .articleHeader .icon-time span:nth-of-type(2n):after{left:-5px} } @media screen and (min-width:1024px) and (max-width:1151px) { .QEntryPoint { width: 100%; margin: 0; } .QEntryPoint .Qimg { width: 150px; margin: 0 !important } .QEntryPoint .QDetails { width: calc(100% - 180px) } .QEntryPoint.NoImg .QDetails { width: 100% } .QEntryPoint h5 { font-size: 14px !important } article .details .QEntryPoint span { font-size: 15px !important; line-height: 1.6 !important } article .articlePoll { width: 100%; margin: 0 } article .articlePoll .allItems input[type="radio"] + label { font-size: 14px } article .articlePoll .allItems .btns .Popup { right: auto; left: -50px } article .articlePoll .allItems .btns .Popup:before { left: 80px } .article .totalQues { width: calc(100% - 20px); margin: 0 10px 0 0 } .article .totalQues .question h4.pQues { font-size: 16px } .article .totalQues .answer { height: 70px } .article .totalQues .question h4.pQues { font-size: 18px } .article .totalQues .answer label { font-size: 16px } .article .totalQues .question h3 { font-size: 14px } .article .totalQues .question img { padding: 0 } .paginationDiv .pattern01 ul li { width: calc((100% - 16px) / 2) } .paginationDiv .pattern01 ul li:nth-child(3n) { margin-left: 16px } .paginationDiv .pattern01 ul li:nth-child(2n) { margin-left: 0 } .paginationDiv .pattern01 ul li:nth-last-of-type(-n+2) { display: inline-block } .masrawyApp a{padding:30px 100px 0} .masrawyApp .rightSide{width:300px} .masrawyApp .rightSide p{font-size:40px} .masrawyApp .rightSide span{font-size:26px} .masrawyApp .rightSide .appBtns div{width:130px;height:40px} article .masrawyApp a{padding:0 25px 0} article .masrawyApp .appHand{left: 30%; bottom: -13px; height: 90px;} article .masrawyApp .text{width:134px;padding: 17px 0;} article .masrawyApp .rightSide p{font-size:19px} article .masrawyApp .rightSide span{font-size:13px} article .masrawyApp .rightSide .appBtns{width:85px;padding:13px 0} article .masrawyApp .rightSide .appBtns div{width:85px;height:25px} .cd-gallery li { width: calc((100% - 16px) / 2); } .cd-articles article, .article.cd-gallery .infiniteListing li { padding: 30px } .cd-articles article{ padding: 15px 30px} article .authorDtls .imageCntnr { margin: 0 calc((100% - 150px) / 2) 20px } article .authorDtls .articleHeader { width: 100%; text-align: center; margin-bottom: 0 } article .authorDtls .articleHeader h1 { font-size: 24px; text-align: center } article .authorDtls .articleHeader .authorName { text-align: center; width: 100% } article .authorDtls .articleHeader .time { width: auto; float: unset; margin: 10px auto 0 } article .authorDtls .articleHeader .time span:last-of-type { margin-left: 0 } article .details iframe:not([src*="facebook.com"]), article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img, .spk-stand-wg .sp-wi-item img) { width: 100%; margin: 40px 0 !important } article .imgDiv { width: 100%; max-width: 100%; float: right } article .imgDiv .imageCntnr { max-width: 100% } .demo-gallery, article.articleVideo .videoCntnr { max-width: 100% } article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img) { margin: 40px 0 !important; height: auto; width: 100% } article .details iframe:not([src*="facebook.com"]) { margin: 40px 0 !important; width: 100% } article .details .pattern01 iframe { margin: 0 !important } article .details iframe#frmPAVast { margin: 0 !important; width: unset; height: unset } article .details iframe.instagram-media { min-height: 495px; } .lg-outer.lg-pull-caption-up .lg-sub-html{width:647px} } @media only screen and (max-width: 1023px) { .tabolaaContainer {height:1165px} .masrawyApp a{padding:30px 100px 0} .masrawyApp .rightSide{width:300px} .masrawyApp .rightSide p{font-size:40px} .masrawyApp .rightSide span{font-size:26px} .masrawyApp .rightSide .appBtns div{width:130px;height:40px} article .masrawyApp a{padding:0 54px 0} article .masrawyApp .appHand{left: 27%} article .details iframe:not([src*="facebook.com"]), article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img, .spk-stand-wg .sp-wi-item img) { width: 100%; margin: 40px 0 !important } article .details .pattern01 iframe { margin: 0 !important } article .details iframe#frmPAVast { margin: 0 !important; width: unset; height: unset } article .imgDiv { width: 100%; max-width: 100%; float: right } article .imgDiv .imageCntnr { max-width: 100% } .demo-gallery, article.articleVideo .videoCntnr { max-width: 100% } .cd-articles article, .article.cd-gallery .infiniteListing li { padding: 30px 50px } .cd-articles article, .tabolaaContainer{ padding: 15px 50px} .article { width: 100% } .articleDiv .cd-read-more { display: none } /*.articleSocialMedia.fixed { width: 100% !important }*/ article .relatedItems .pattern01 { width: 230px } article .relatedItems .pattern01 ul li h3 { height: 36px !important; line-height: 1.4 } article .relatedItems .pattern01 ul li .item .imageCntnr { width: 84px; padding-bottom: calc((84px * 75) / 100); } article .relatedItems .pattern01 ul li .secName { right: 96px; font-size: 12px } article .relatedItems .pattern01 ul li .secName:after { height: 12px; margin-top: 2px } article .relatedItems .pattern01 ul li:after { display: none } article .relatedItems .pattern01 ul li .desc { width: calc(100% - 84px); } .hideSocialBtns .articleSocialMedia { bottom: -40px } .articleSocialMedia a { display: inline-block; width: calc(100% / 4); height: 40px; border-radius: 0; margin-bottom: 0; float: right; margin: 0 } .articleSocialMedia .icon-fb { background: rgba(58, 87, 153, 0.95) } .articleSocialMedia .icon-tw { background: rgba(31, 162, 240, 0.95) } .articleSocialMedia .icon-ggl { background: rgba(213, 81, 66, 0.95) } .articleSocialMedia .icon-wapp { background: rgba(24, 157, 14, 0.95) } .articleSocialMedia .icon-msngr { background: rgba(0, 132, 255, 0.95) } .articleSocialMedia .icon-fb:before { line-height: 40px } .articleSocialMedia .icon-tw:before { line-height: 40px } .articleSocialMedia .icon-ggl:before { line-height: 40px } .articleSocialMedia .icon-wapp { display: inline-block } .articleSocialMedia .icon-wapp:before { line-height:40px } .articleSocialMedia .icon-msngr:before { line-height: 40px } .articleSocialMedia .icon-mail { display: none } .articleSocialMedia .icon-print { display: none } .articleSocialMedia::before { display: none } .articleSocialMedia .icon-shorten:before { line-height: 40px;font-size:20px} .galleryTitle h2 { display: none } article.paginationDiv .details h3 { width: 250px } article .details p.WizImg { width: calc(100% - 270px); } .paginationDiv .pattern01 ul li:nth-last-of-type(-n+2) { display: inline-block } .paginationDiv .pattern01 ul li:nth-child(4n) { margin-left: 16px; } .lg-outer .lg{width:100%!important; height: calc(100% - 100px)!important; margin-top: 100px;} .lg-outer.lg-pull-caption-up .lg-sub-html{width:100%} .SPgalleryAd{position: fixed; width: 100%; height: auto; z-index: 3; left: 0;top:0; pointer-events: none;} .SPgalleryAd .mobileGallery{ display: inline-block; position: relative; padding-bottom: 19%; width: 100%; float: right;} .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item,.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {width:60px!important;height:60px} .SPgalleryAd .mobileStickyGallery{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 3;transform: none;pointer-events: visible;} .SPgalleryAd .mobileStickyGallery .GalleryFrame{display:inline-block;float:right;width:100%;position: absolute;top: 0;bottom: 0;left:0;height: 100%;z-index:3} .SPgalleryAd .mobileStickyGallery iframe{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;} .lg-outer .lg-toogle-thumb{right:10px} .lg-sub-html p{font-size:14px} .articleData {width: calc(100% - 36px);} .articleData:before{display:none} article .articleHeader .time {font-size: 11px;} article .articleHeader .time span {margin-left: 8px;} article .articleHeader .time span:last-child{margin-left:0} article .articleHeader .icon-time span:nth-of-type(2n):after{left:-5px} } @media screen and (min-width:768px) and (max-width:1023px) { .galleryAD{display:none} } @media screen and (min-width:320px) and (max-width:767px) { .tabolaaContainer {height:2110px;width:340px;margin-bottom: 10px;margin:0 calc((100% - 340px) /2)} article .details .pattern01 .ttl h4, article .details .pattern01 .ttl .titlep { font-size: 14px } article .leftWeather{margin:0 0 40px;width:100%} .infoClips { padding: 0 10px } article .infoClips { padding: 0; } article .waya, article .infoClips.inner .waya { width: 100%; margin: 0 } .paginationDiv .pattern01 ul li { width: 100%; margin-left: 0 !important; margin-bottom: 16px !important } article .details .pattern01 ul li .item .imageCntnr { width: 120px; padding-bottom: calc((120px * 56.25) / 100); } article .details .pattern01 ul li .desc { width: calc(100% - 120px); } article .details .pattern01 ul li .secName { right: 130px; font-size: 11px; } article .details .pattern01 ul li h3, article .details .pattern01 ul li .descp { height: auto !important; font-size: 12px !important } article .relatedItems .pattern01 ul li .item .imageCntnr { width: 120px; padding-bottom: calc((120px * 56.25) / 100); } article .relatedItems .pattern01 ul li .desc { width: calc(100% - 120px); } article .relatedItems .pattern01 ul li .secName { right: 130px; font-size: 11px; } article .relatedItems .pattern01 ul li h3 { height: auto !important; font-size: 12px !important } .pattern01 ul li { width: 100%; margin-left: 0; margin-bottom: 16px !important } .pattern01 ul li:nth-last-of-type(-n+2) { display: inline-block; } .pattern01 ul li:last-of-type { margin-bottom: 0px !important } .pattern01 ul li .item img:not(article .details .divVideoStep .ivbsThumbWrapper>img, .spk-stand-wg .sp-wi-item img) { width: auto; height: 100% } .pattern01 ul li .nativeFrameMob { display: inline-block; float: right; width: 100% } .pattern01 ul li .nativeFrameMob > div { display: inline-block; float: right; width: 100% } .pattern01 ul li .nativeFrameMob iframe { height: 90px } .pattern01 ul li .item .imageCntnr { width: 120px; padding-bottom: calc((120px * 56.25) / 100); } .pattern01 ul li .desc { width: calc(100% - 120px); display: inline-block; float: right; } .pattern01 ul li .secName { top: 2px; font-size: 11px } .pattern01 ul li .desc h2 { line-height: 1.6; height: auto; overflow: hidden; font-size: 12px; margin: 26px 0 0; -webkit-line-clamp: 2; } .paginationDiv .pattern01 ul li { width: 100%; margin-left: 0 !important; margin-bottom: 16px !important } article .details .pattern01 ul li .item .imageCntnr { width: 90px; padding-bottom: calc((90px * 56.25) / 100); } /*article .details .pattern01 ul li .desc { width: calc(100% - calc(100% - 110px)); }*/ article .details .pattern01 ul li .secName { right: 130px; font-size: 11px; } article .details .pattern01 ul li h3, article .details .pattern01 ul li .descp { height: auto !important; font-size: 12px !important } article .details p.facebookVideoW:not(.divVideoStep p,.spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p){ width:100%; padding-bottom: 56.25%;margin: 20px 0;} article .details p iframe:not([src*="facebook.com"]) {padding-bottom:unset;height:340px} article .relatedItems .pattern01 ul li .item .imageCntnr { width: 120px; padding-bottom: calc((120px * 56.25) / 100); } article .relatedItems .pattern01 ul li .desc { width: calc(100% - 120px); } article .relatedItems .pattern01 ul li .secName { right: 130px; font-size: 11px; } article .relatedItems .pattern01 ul li h3 { height: auto !important; font-size: 12px !important } .QEntryPoint { width: 100%; margin: 0; padding: 10px } .QEntryPoint .QDetails { width: 100% } .QEntryPoint .MasrawyIcon { position: relative !important; top: auto; right: auto; margin: 15px calc((100% - 72px) /2) !important } .QEntryPoint .MasrawyIcon img { float: right; margin: 0 0 0 8px !important; width: 16px } article .details .QEntryPoint .MasrawyIcon span { float: right; font-size: 16px !important; line-height: 1.2 !important; display: inline-block !important; } article .details .QEntryPoint span { display: none !important } .QEntryPoint h5 { text-align: center; font-size: 14px !important } .QEntryPoint .Qimg { display: none } .QEntryPoint .Begin { width: 100%; font-size: 15px !important; line-height: 2.5; margin: 20px 0 15px 0 !important } article .articlePoll { width: 100%; margin: 15px 0; padding: 10px; } article .articlePoll .allItems h3 { font-size: 14px } article .articlePoll .secondStep .itemDiv .votes { line-height: 2.4 } article .articlePoll .secondStep .itemDiv .votes span { line-height: 2.4 } article .articlePoll .allItems input[type="radio"] + label { margin: 0 0 15px 0; font-size: 14px } .masrawyApp{height:150px;padding:24px 20px 0;width:300px;margin:0 calc((100% - 300px) /2) 40px;} .masrawyApp .rightSide p{font-size:23px;margin-bottom:16px} .masrawyApp .rightSide span{font-size:15px;margin-bottom:14px} .masrawyApp .rightSide{width:auto} .masrawyApp .rightSide .appBtns div{width:80px;height:24px} article .masrawyApp .appHand{left: 19px;bottom: 0; height: 100%;} article .masrawyApp .rightSide{width:145px;padding:7px 0} article .masrawyApp .rightSide p{font-size:18px;margin-bottom:9px} article .masrawyApp .rightSide span{font-size:14px;margin-bottom:2px} article .masrawyApp .rightSide .appBtns div{width:65px;height:25px} article .masrawyApp .appBtns div img{height:auto;width:100%} .sportsWidget .articleListWidget{width:calc(100% - 20px);margin-right:10px} article .masrawyApp{height:80px;width:300px;margin:0 calc((100% - 300px) /2) 40px} article .masrawyApp a{padding:0 20px} article .masrawyApp .text{width:100%;padding:0} article .masrawyApp .rightSide .appBtns{width:100%;padding:0} article .masrawyApp .rightSide .appBtns div{margin-bottom:0; margin-left:10px;float:right} article .masrawyApp .rightSide .appBtns div:last-child{margin-left:0} .article { width: 100% } .articleDiv .cd-read-more { display: none } article .details .pattern01 ul li h3, article .details .pattern01 ul li .descp { height: auto !important; float: right; max-height: 50px; line-height: 2; font-size: 13px !important; } article .details .pattern01 ul li:after { display: none } /*.articleSocialMedia { position: fixed; margin-right: 0; right: 0; top: auto !important; bottom: 0 !important; left: 0; z-index: 10; background: none; padding: 0; width: 100%; height: 40px; z-index: 99 }*/ /*.articleSocialMedia.fixed { width: 100% !important }*/ .articleSocialMedia{ position: relative; display: inline-block; right: auto; width: 100%; height: 40px; margin-top: 0;margin:10px 0; padding: 0; left: auto; top: auto !important; z-index: 2; transform: none; -webkit-transition-property: -webkit-transform, left; -moz-transition-property: -moz-transform, left; transition-property: transform, left; transition: transform 0.8s,-webkit-transform 0.8s,left 0.2s; } .articleSocialMedia.fixed { right: auto; left: 0!important;z-index:3 } .articleSocialMedia a { margin-bottom: 0; height: 40px; width: calc(100% / 5); line-height: 40px; border-radius: 0 } .articleSocialMedia a.icon-fb { background: #4267b2; } .articleSocialMedia a.icon-tw { background: #000 } .articleSocialMedia a.icon-wapp { background: #25d366; } .articleSocialMedia a:before { color: #fff; line-height: 40px } article .relatedItems .pattern01 { width: 230px } article .relatedItems .pattern01 ul li h3 { height: 36px !important; line-height: 1.4 } article .relatedItems .pattern01 ul li .item .imageCntnr { width: 84px; padding-bottom: calc((84px * 75) / 100); } article .relatedItems .pattern01 ul li .secName { right: 96px; font-size: 12px } article .relatedItems .pattern01 ul li .secName:after { height: 12px; margin-top: 2px } article .relatedItems .pattern01 ul li:after { display: none } article .relatedItems .pattern01 ul li .desc { width: calc(100% - 84px); } .hideSocialBtns .articleSocialMedia { right: -40px } /*.articleSocialMedia a { display: inline-block; width: calc(100% / 4); height: 40px; border-radius: 0; margin-bottom: 0; float: right; margin: 0 }*/ .articleSocialMedia .icon-fb { background: rgba(58, 87, 153, 0.95) } .articleSocialMedia .icon-tw { background: rgba(31, 162, 240, 0.95) } .articleSocialMedia .icon-ggl { background: rgba(213, 81, 66, 0.95) } .articleSocialMedia .icon-wapp { background: rgba(24, 157, 14, 0.95) } .articleSocialMedia .icon-msngr { background: rgba(0, 132, 255, 0.95) } .articleSocialMedia .icon-fb:before { line-height: 40px } .articleSocialMedia .icon-tw:before { line-height: 40px } .articleSocialMedia .icon-ggl:before { line-height: 40px } .articleSocialMedia .icon-wapp { display: inline-block } .articleSocialMedia .icon-wapp:before { line-height:40px } .articleSocialMedia .icon-msngr:before { line-height: 40px } .articleSocialMedia .icon-mail { display: none } .articleSocialMedia .icon-print { display: none } .articleSocialMedia::before { display: none } article .relatedItems .pattern01 .allItems{ padding: 16px 0 0; float: right } article .relatedItems .pattern01 ul { padding-right: 0; float: right } article .relatedItems .pattern01 ul li { width: 100%; list-style-type: none; display: inline-block; margin: 0 0 8px !important; padding-bottom: 8px; font-style: normal; border: none; border-bottom: 1px solid #e8e8e8 } article .relatedItems .pattern01 .ttl .titlep{ float: right; display: inline-block; padding: 0; font-family: DroidKufiBold, Arial; font-size: 17px; color: #1d1d1d; display: inline-block; line-height: 36px; background: none; } article .relatedItems .pattern01 ul li .descp { color: #1d1d1d; height: 42px !important; cursor: pointer; overflow: hidden; text-align: right; line-height: 1.6; font-size: 13px !important; padding: 0 !important; margin: 26px 0 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; } article .relatedItems .pattern01 ul li.news .item:hover h3 { color: #E03322 !important; } article .relatedItems .pattern01 ul li.sports .item:hover h3 { color: #056818 !important; } article .relatedItems .pattern01 ul li.arts .item:hover h3 { color: #A8006B !important; } article .relatedItems .pattern01 ul li.howa_w_hya .item:hover h3 { color: #7b1fa2 !important; } article .relatedItems .pattern01 ul li.autos .item:hover h3 { color: #1a237e !important; } article .relatedItems .pattern01 ul li.islameyat .item:hover h3 { color: #075C99 !important; } article .relatedItems .pattern01 ul li.ramadan .item:hover h3 { color: #330D46 !important; } article .relatedItems .pattern01 ul li:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important } article .relatedItems .pattern01 ul li .item .imageCntnr { width: 100px; padding-bottom: calc((120px * 56.25) / 100); float: right; } article .relatedItems .pattern01 ul li .item .imageCntnr span { margin: 0 } article .relatedItems .pattern01 ul li .desc { width: calc(100% - 100px); overflow: hidden; cursor: pointer; float: right; padding: 0 10px 0 0 } article .relatedItems .pattern01 ul li .secName { position: absolute; top: 0; right: 110px; } /*article .details .pattern01 ul li .secName:after {content: "";width: 4px;height: 12px;float: right;margin-left: 5px;margin-top: 0;}*/ article .relatedItems .pattern01 ul li.icon-video .imageCntnr span, article .relatedItems .pattern01 ul li.icon-image .imageCntnr span{ position: absolute; width: 32px; height: 32px; text-align: center !important; left: 4px; top: 4px; z-index: 1; margin: 0; line-height: 32px; text-align: center; background: #E03322; border-radius: 50%; } .article { padding: 0; margin-left: 0 } /*.breadcrumb { margin-bottom: 30px }*/ .breadcrumb li a { font-size: 12px } .breadcrumb li a:after { font-size: 11px; margin: 0 6px; } .topLBArticle { padding-top: 16px;display: inline-block;float: right;height: 160px;width: 100%; } article .articleHeader { margin-bottom: 10px } article .imgDiv { width: 100%; margin-bottom: 16px } article .articleHeader h1 { font-size: 20px } article .articleHeader .time { font-size: 13px } article .articleHeader .time span { margin-left: 14px } article .articleHeader .time span:after { top: 6px; height: 14px; left: -7px } article .details, article .details p:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p), article .details h2, article .details span:not(.divVideoStep span, .spk-stand-wg .sp-wi-item span), article .details pre { font-size: 14px !important; line-height: 2; float: right } article .details .facebookVideoT { width: 100%; padding-bottom: 178%; margin: 40px 0 } article .details .facebookVideoW { width: 100%; padding-bottom: 56.25%; margin: 40px 0 } article .details .facebookVideoS { width: 100%; padding-bottom: 100%; margin: 40px 0 } article .sp-inline .sp-inline-hightlight .heightlight, article .sp-inline .sp-inline-hightlight span { font-size: 14px !important } article .amazonBanner { font-size: 13px; padding: 10px; } article .amazonBanner p { margin-bottom: 10px; } article .amazonBanner a { width: 100%; height: 30px; margin: 0; font-size: 12px; } article .keywordsDiv .item { padding: 0px 15px; font-size: 12px; height: 30px; line-height: 30px; } article .nextLink .nextLinkTitle { font-size: 14px } article .nextLink a { font-size: 14px } .shiftDiv { margin-bottom: 30px } .shiftLink { font-size: 14px } article .provider h2 { font-size: 13px; width: 110px; line-height: 2.5 } article .provider .providerImg { width: calc(100% - 120px); height: 30px; } article .provider .providerImg img {margin-top: 6px;height:23px} .consoltoDiv { margin-bottom: 30px } .consoltoLink { font-size: 14px } .articleSocialMedia a:before{width:100%;height:40px} .articleSocialMedia .icon-fb:before { line-height: 40px } .articleSocialMedia .icon-tw:before { line-height: 40px } .topLBArticle { padding-top: 0;height:auto } article .articleHeader { margin-bottom: 10px } article .imgDiv { width: 100%; margin-bottom: 16px } .articleData p{font-size:13px} article .articleHeader h1 { font-size: 18px;margin-bottom:10px } article .articleHeader .time { font-size: 10px } article .articleHeader .time span { margin-left: 10px } article .articleHeader .time span:after { top: 6px; height: 14px; left: -7px } article .details, article .details p:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p), article .details h2, article .details span:not(.divVideoStep span, .spk-stand-wg .sp-wi-item span), article .details pre { font-size: 14px !important; line-height: 2; float: right } .articleDiv .details .showcaseDiv {margin: 10px calc((100% - 300px) / 2)} article .details .showcaseDiv .adTtl:not(.divVideoStep p, .spk-stand-wg.sp-mobile.sp-one-item .sp-title-container p) {text-align: center !important; color: #666 !important;font-size: 11px !important;line-height: 16px!important; cursor: default; margin: 0!important } .articleSocialMedia .icon-ggl:before { line-height: 40px } .articleSocialMedia .icon-wapp:before { line-height: 40px } .articleSocialMedia .icon-msngr:before { line-height: 40px } article .pagination ul { width: 46px } article .pagination ul li { width: 100% } article .pagination ul:nth-child(2) { width: calc(100% - 100px) } article .pagination ul:nth-child(2) li { width: calc(100% / 5) } article .pagination ul li a, article .pagination ul li .dots { width: 100% } article .pagination ul li.nextPrev a { width: 100% } article .nextLink a:after { display: none } article .details img:not(article .details .divVideoStep .ivbsThumbWrapper>img, .spk-stand-wg .sp-wi-item img){ margin: 40px 0 !important; height: auto; width: 100% } article .details .pattern01 iframe { margin: 0 !important; background-color: transparent } article .details iframe#frmPAVast { margin: 0; width: unset; height: unset } article .details iframe.instagram-media { min-height: 460px; } article .pagination ul.PCount { display: none } article .details .showcaseDiv .showcaseCnts iframe { margin: 0 !important } .repeatDiv { width: 300px; margin-left: -150px; padding: 45px 0 } .repeatDiv .nextAlbum h3 { font-size: 14px; margin-bottom: 0 } article .pagination ul { width: 46px } article .pagination ul li { width: 100% } article .pagination ul:nth-child(2) { width: calc(100% - 100px) } article .pagination ul:nth-child(2) li { width: calc(100% / 5) } article .pagination ul li a, article .pagination ul li .dots { width: 100% } article .pagination ul li.nextPrev a { width: 100% } article .nextLink a:after { display: none } article .details img { margin: 40px 0 !important; height: auto; width: 100% } article .details iframe:not([src*="facebook.com"]) { margin: 10px 0 !important;padding-bottom:56%; height: 100%; width: 100% ;} article .details .showcaseDiv iframe{height:250px;margin:0!important;padding-bottom:unset} article .details .pattern01 iframe { margin: 0 !important; background-color: transparent } article .details .twitter-tweet iframe{padding-bottom:unset} article .details iframe#frmPAVast { margin: 0; width: unset; height: unset } article .details iframe.instagram-media { min-height: 460px; } article .pagination ul.PCount { display: none } article .details .showcaseDiv .showcaseCnts iframe { margin: 0 !important } .repeatDiv { width: 300px; margin-left: -150px; padding: 45px 0 } .repeatDiv .nextAlbum h3 { font-size: 14px; margin-bottom: 0 } .innerListingContainer { padding: 15px 10px } .authorsListing .cd-tab-filter-wrapper { padding: 12px; margin: 16px 0 } .author .cd-tab-filter-wrapper { padding: 12px; margin-bottom: 0 } .AuthorsListing .cd-tab-filter-wrapper { margin: 0 } article .authorDtls { margin-bottom: 0 } article .authorDtls .imageCntnr { margin: 0 calc((100% - 190px) / 2) } article .authorDtls .articleHeader { width: 100%; margin-right: 0; } article .authorDtls .articleHeader .icon-time:before { font-size: 14px } article .articleStrip p { font-size: 12px; line-height: 1.6; text-align: right } article .articleStrip .icon-info:before { font-size: 18px } .overflow-hidden .morphSearchDiv { display: none !important } article .details .leaderboardDiv { width: 300px; height: 266px; margin: 24px calc((100% - 300px) / 2) } article .details .leaderboardDiv .adTtl { text-align: center !important; margin: 0; width: 300px; height: 16px;max-height:16px; line-height: 16px; } article .details .leaderboardDiv .leaderboard { width: 300px; height: 250px } article .details .leaderboardDiv iframe { margin: 0 calc((100% - 300px) / 2) !important; height: 250px; width: 300px; } .articleDiv .topLBArticle .leaderboardDiv { margin: 24px auto } article.paginationDiv .details h3 { width: 100%; float: right } article .details p.WizImg { text-align: center !important; float: unset; width: 100%; margin: 0; } article .details p.WizImg img { margin: 20px calc((100% - 300px)/ 2); height: auto; width: 300px; } article.paginationDiv .details .pagingDtls { width: 100%; margin-right: 0 } article .pagination { margin-top: 20px } article.paginationDiv .details p.WizImg { width: 100% } article .authorDtls .articleHeader h2 { font-size: 18px; margin-bottom: 8px } article .authorDtls .articleHeader .authorName { font-size: 14px; max-height: 52px; height: auto; } article .articleHeader .zedSponsor p { line-height: 3.6; font-size: 11px; margin-left: 6px } article .articleHeader .zedSponsor img { height: 42px } .lg-outer .zedSponsor { bottom: 160px; padding: 5px; background: rgba(0,0,0,0.3) } .lg-outer .zedSponsor p { line-height: 3.6; font-size: 11px; margin-left: 6px } .lg-outer .zedSponsor img { height: 42px } .lg-outer.hideSponsor .zedSponsor { display: none } article .videoStrip { width: 300px; height: 25px; margin: -20px calc((100% - 300px) / 2) 20px } .cd-articles article { padding: 0 10px; border-right: none; border-left: none;border-top:none } .article.cd-gallery .infiniteListing li { padding: 16px 10px 10px; border-right: none; border-left: none } .article.cd-gallery .infiniteListing li h3, .article.cd-gallery .infiniteListing li .infiniteTitle { font-size: 18px; margin-bottom: 20px } .article.cd-gallery .infiniteListing li .secName { font-size: 12px; } .article.cd-gallery .infiniteListing li .time { font-size: 12px } .article.cd-gallery .infiniteListing li .icon-time:before { font-size: 13px; line-height: 24px; } .article.cd-gallery .infiniteListing li .imgDiv { padding-bottom: 10px; margin-bottom: 10px } .article.cd-gallery .infiniteListing li .moreBtn { width: 100%; height: 40px; line-height: 40px; font-size: 13px; margin: 0 } .author .authorData .data { margin: 0; width: 100% } article .authorDtls .imageCntnr, .author .authorData .imgCntnr { margin: 0 calc((100% - 150px) / 2) 20px } article .authorDtls .articleHeader, .author .authorData .data .name { width: 100%; text-align: center; margin-bottom: 20px } article .authorDtls .articleHeader h1, .author .authorData .data .name h1 { font-size: 20px; text-align: center } article .authorDtls .articleHeader .authorName { text-align: center; width: 100% } article .authorDtls .articleHeader .time { width: auto; float: unset; margin: 10px auto 0 } article .authorDtls .articleHeader .time span:last-of-type { margin-left: 0 } article .billboardDiv iframe, article .leaderboardDiv iframe { width: 320px; } article .dtlsSc{width:100%} .dtlsSc .consoltoArtclPattern{width:100%;margin-bottom:30px} .tooltip{ right: auto; left: 0; width: 129px; height: 36px; font-size: 14px; line-height: 36px; bottom: -32px;} .tabolaaContainer{padding:0 30px;background-color:unset;border:0} .tabolaaContainer .thumbnails-feed .videoCube .video-label-box .video-title{font-size:14px;margin-bottom: 6px;} .tabolaaContainer .videoCube a.video-cta-style .video-label-flex-cta-item{font-size:13px; margin-bottom: 8px;} } @media screen and (max-width:767px) and (orientation:portrait) { article .articlePoll .allItems .btns .Popup { right: -80%; width: 280px; padding: 5px; top: -50px } article .articlePoll .allItems .btns .Popup:before { left: 50%; transform: translateX(-50%) } article .articlePoll .allItems .btns .Popup h6 { font-size: 13px } .article .totalQues { width: 100%; margin: 0 } .article .totalQues .answer label { font-size: 15px; line-height: 1.6; } .article .totalQues .answer.multi.correct:before, .article .totalQues .answer.imgAns.correct:before, .article .totalQues .answer.multi.wrong:before, .article .totalQues .answer.imgAns.wrong:before { top: 0; right: 5px; font-size: 10px } .article .totalQues .question img { padding: 0 } .article .totalQues h6 { font-size: 18px } .article .totalQues .quesDiv { width: 100%; padding: 25px 10px } .article .totalQues .question h3 { font-size: 13px; line-height: 3 } .article .totalQues .answer { width: calc((100% - 10px) /2); margin-left: 10px; height: 70px } .article .totalQues .question h4.pQues { font-size: 16px } .article .result { padding: 0 } .article .result .resContainer { width: 100%; margin: 0; padding: 15px 15px 10px 15px; } .article .result .resContainer h5 { font-size: 16px !important; margin-bottom: 10px } .article .result .resContainer h5 span { font-size: 16px !important } .article .result .resContainer span.share { font-size: 15px } .article .result .resContainer .shareRes { width: 100%; margin: 0 } .article .result .resContainer .shareRes a { width: calc((100% - 20px) /2); height: 35px; line-height: 2.2; font-size: 15px !important } article .details .pattern01 { width: 100%; margin-bottom:10px } article .details .pattern01:before { display: none } article .relatedItems .pattern01 { width: 100%; padding: 0 } } @media screen and (max-width: 480px) { #taboola-below-article-thumbnails[data-feed-main-container-id="taboola-below-article-thumbnails"].tbl-feed-full-width { margin-left: 0; margin-right: 0; } }