/********** About Us **********/

.aboutusDiv { width: calc(100% - 320px); margin-left: 20px;display:inline-block;float:right}
.aboutusDiv .aboutus { width:100%;padding:20px; height: auto; min-height: 830px;border:1px solid #E8E8E8;float:right;margin-bottom:50px;background:#fff;border-radius: 6px;  }
.aboutusDiv .aboutus .ttl,
.otherPortals .ttl{background:none;border:none;padding:0;border-bottom:1px solid #aaa;margin-bottom: 0;}
.aboutusDiv .aboutus .aboutusDtls { display: inline-block; width: 100%; padding: 24px 0 }
.aboutusDiv .aboutus .aboutusDtls .item { display: inline-block; width: 100%; margin-bottom: 24px;text-align:right }
.aboutusDiv .aboutus .aboutusDtls .item:last-child { margin-bottom: 0 }
.aboutusDiv .aboutus .aboutusDtls ul { display: inline-block; width: 100%; padding-right: 36px }
.aboutusDiv .aboutus .aboutusDtls p, .aboutusDiv .aboutus .aboutusDtls li, .aboutusDiv .aboutus .aboutusDtls .link { display: inline-block; width: 100%; font-family: droidLight,Arial; font-size: 14px; color: #1d1d1d; text-align: right; direction: rtl; margin: 6px 0; }
.aboutusDiv .aboutus .aboutusDtls li { list-style-type: square; display: list-item; margin: 12px 0; }
.aboutusDiv .aboutus .aboutusDtls .horizontalList li { width: calc((100% - 32px) / 3); margin: 8px 0 8px 16px; float: right }
.aboutusDiv .aboutus .aboutusDtls .horizontalList li:nth-child(3n) { margin-left: 0 }
.aboutusDiv .aboutus .aboutusDtls .link { color: #0079BB; text-decoration: underline; cursor: pointer ;width: auto;}
.aboutusDiv .aboutus .aboutusDtls p.head { font-family: droidBold,Arial; font-size: 16px; margin: 0; padding: 12px 10px; background: #F2F2F2; margin-bottom: 20px;border-radius: 6px; }
.aboutusDiv .aboutus .aboutusDtls p.point { font-family: droidBold,Arial; font-size: 14px; margin: 20px 0 0 }
.aboutusDiv .aboutus .aboutusDtls p strong { font-family: droidBold,Arial; font-size: 13px }


/********** Social Media **********/
.aboutusDiv .socialmedia{display:inline-block;width:100%;float:right;margin-top:10px}
.aboutusDiv .socialmedia a { display: inline-block; float: right; width: 40px; height: 40px; margin-left: 10px; position: relative;border-radius: 6px; }
.aboutusDiv .socialmedia a:last-child { margin-left: 0; }
.aboutusDiv .socialmedia a:before{display:inline-block;width:40px;height:40px;}
.aboutusDiv .socialmedia a.facebook { background: #3b5998;}
.aboutusDiv .socialmedia a.facebook:before{content:"";background: url(../../Images/SocialMedia/facebook.svg) center center no-repeat;background-size:100% 20px}
.aboutusDiv .socialmedia a.twitter { background: #000; }
.aboutusDiv .socialmedia a.twitter:before{content:"";background: url(../../Images/SocialMedia/x.svg) center center no-repeat;background-size:100% 18px}
.aboutusDiv .socialmedia a.instagram { background: #C32AA3; }
.aboutusDiv .socialmedia a.instagram:before{content:"";background: url(../../Images/SocialMedia/instagram.svg) center center no-repeat;background-size:100% 20px}
.aboutusDiv .socialmedia a.youtube { background: #FF0000; }
.aboutusDiv .socialmedia a.youtube:before{content:"";background: url(../../Images/SocialMedia/youtube.svg) center center no-repeat;background-size:100% 16px}
.aboutusDiv .socialmedia a.whats { background: #25D366; }
.aboutusDiv .socialmedia a.whats:before{content:"";background: url(../../Images/SocialMedia/whatsapp.svg) center center no-repeat;background-size:100% 22px}
.aboutusDiv .socialmedia a.tiktok { background: #010101; }
.aboutusDiv .socialmedia a.tiktok:before{content:"";background: url(../../Images/SocialMedia/tiktok.svg) center center no-repeat;background-size:100% 20px}
.aboutusDiv .socialmedia a.google { background: #4285F4; }
.aboutusDiv .socialmedia a.google:before{content:"";background: url(../../Images/SocialMedia/googleNews.svg) center center no-repeat;background-size:100% 20px}
.aboutusDiv .socialmedia a.mobileapp { background: #E63B34 }
.aboutusDiv .socialmedia a.mobileapp:before{content:"";background: url(../../Images/SocialMedia/downloadApp.svg) center center no-repeat;background-size:100% 24px}


/********** Othar Portals **********/
.otherPortals{background:none}
.otherPortals ul{text-align: justify;padding:16px 0 0;display:inline-block;float:right;width:100%}
.otherPortals ul li{background: #fff;border: 1px solid #e8e8e8;border-radius: 6px;margin-left: 16px;width: calc((100% - 32px) / 3);height: auto;position: relative;overflow: hidden;display: inline-block;float:right;transition: none;-webkit-transition: none;-moz-transition: none;-o-transition: none;-ms-transition: none;}
.otherPortals ul li:last-child{margin-left: 0;}
.otherPortals ul li .imageCntnr{position: relative;overflow: hidden;padding-bottom: 53.5%;display: inline-block;float: right;width: 100%;}
.otherPortals ul li .imageCntnr img{position: absolute;top: 50%;right: auto;bottom: auto;left: 50%;transform: translate(-50%, -50%);margin: 0 auto;width: 100%;height: auto;}
.otherPortals ul li .info{display:inline-block;float:right;width:100%;padding:12px 12px 20px}
.otherPortals ul li h2{display:inline-block;float:right;width:100%;font-family: droidBold, Arial; font-size: 16px;margin-bottom:10px}
.otherPortals ul li p{display:inline-block;float:right;width:100%;font-size: 14px;line-height:24px;color:#666666;margin-bottom:20px}
.otherPortals ul li .visit{display:inline-block;float:right;padding:6px 16px;font-size:13px;border-radius: 6px;-webkit-transition: background-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s; -moz-transition: background-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s; transition: background-color 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s}
.otherPortals ul li .visit.masrawy{border:1px solid #E63B34;color:#E63B34}
.otherPortals ul li .visit.masrawy:hover{background:#E63B34;color:#fff}
.otherPortals ul li .visit.yk{border:1px solid #0079BB;color:#0079BB}
.otherPortals ul li .visit.yk:hover{background:#0079BB;color:#fff}
.otherPortals ul li .visit.elconsolto{border:1px solid #2EA4A9;color:#2EA4A9}
.otherPortals ul li .visit.elconsolto:hover{background:#2EA4A9;color:#fff}
.otherPortals ul li .visit.shift{border:1px solid #111111;color:#111111}
.otherPortals ul li .visit.shift:hover{background:#111111;color:#fff}


/********** Akhbar Themak **********/
.akhbarthemak { display: inline-block; float: left; width: 300px; 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: #0079BB; border-bottom: none !important }
.akhbarThemak .ttl .inTtl { float: right; display: inline-block; padding: 0px; font-family: droidBold, 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: droidBold, 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: droidBold, 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: #0079BB; color: #fff }
.akhbarThemak .cd-popup-container .cd-buttons a:hover { background: #ccc }
.akhbarThemak .cd-popup-container .cd-buttons a:first-child:hover { background: #0079BB }
.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: droidBold, Arial; color: #fff; font-size: 12px; }
/*.akhbarThemak li .secName:before{content:"";float:right;margin-left:5px;width:4px;height:12px;background:#0079BB;margin-top:4px}*/
.akhbarThemak li.native { padding: 0; border-bottom: none; }
.akhbarThemak.fixed { position: fixed }


@media screen and (min-width:1280px) and (max-width:1919px) {
    .otherPortals ul li p{height:96px}
}

@media screen and (min-width:1024px) and (max-width:1279px) {
    .aboutusDiv .aboutus .aboutusDtls ul{padding:0 24px}
    .otherPortals ul li{width:100%;margin-left:0;margin-bottom:16px}
}


@media only screen and (max-width: 1023px) {
    .aboutusDiv{ width: 100%; margin-left: 0 }

    .akhbarThemak.fixed { position: relative; }
    .akhbarThemak { width: 100%; top: 0 !important; height: auto !important; }
    .akhbarThemak .cd-popup-container { width: 700px; height: 400px; }
    .akhbarThemak .cd-popup-container .sectionContainer { overflow-y: scroll; overflow-x: hidden; height: 200px }
    .akhbarThemak .cd-popup-container h4 { margin-bottom: 20px }
    .akhbarThemak .cd-popup-container h3 { line-height: 36px }
    .akhbarThemak .cd-popup-container .sec { width: 100%; margin-left: 0; margin-bottom: 24px; float: none; }
    .akhbarThemak .cd-popup-container .sec:nth-child(6n+1) { margin-left: 0 }
    .akhbarThemak input[type="checkbox"] + label { margin: 0 0 10px 20px; width: auto }
    .akhbarThemak .cd-popup-container .sec:last-child { width: 100% }
    .akhbarthemak { width: 100% }
    .otherPortals ul li p{height:96px}
}
@media screen and (min-width:320px) and (max-width:767px) {
    .aboutusDiv .aboutus { padding: 15px 10px;border-left:none;border-right:none}
    .aboutusDiv .aboutus .aboutusDtls p.head { font-size: 14px }
    .aboutusDiv .aboutus .aboutusDtls p, .aboutusDiv .aboutus .aboutusDtls li, .aboutusDiv .aboutus .aboutusDtls .link { font-size: 13px }
    .aboutusDiv .aboutus .aboutusDtls ul { padding-right: 24px }

    .aboutusDiv .aboutus .aboutusDtls .horizontalList li{width:calc((100% - 16px) / 2)}
    .aboutusDiv .aboutus .aboutusDtls .horizontalList li:nth-child(3n){margin-left:16px}
    .aboutusDiv .aboutus .aboutusDtls .horizontalList li:nth-child(2n){margin-left:0}

    .aboutusDiv .socialmedia a{width:34px;height:34px;margin-left:4px}
    .aboutusDiv .socialmedia a:before{width:34px;height:34px}

    .aboutusDiv .socialmedia a.facebook:before{background-size: 100% 16px;}
    .aboutusDiv .socialmedia a.twitter:before{background-size: 100% 14px;}
    .aboutusDiv .socialmedia a.instagram:before{background-size: 100% 16px;}
    .aboutusDiv .socialmedia a.youtube:before{background-size: 100% 12px;}
    .aboutusDiv .socialmedia a.whats:before{background-size: 100% 18px;}
    .aboutusDiv .socialmedia a.tiktok:before{background-size: 100% 16px;}
    .aboutusDiv .socialmedia a.google:before{background-size: 100% 16px;}
    .aboutusDiv .socialmedia a.mobileapp:before{background-size: 100% 20px;}

    .otherPortals{padding:0;margin-bottom:30px}
    .otherPortals ul li{width:100%;margin-left:0;margin-bottom:16px}

    .otherPortals ul li h2{font-size:15px}
    .otherPortals ul li p{font-size:13px}
    .otherPortals ul li .visit{font-size:12px}
    .otherPortals ul li p{height:auto}

    
    .akhbarThemak .cd-popup-container { width: 300px; height: 400px; padding: 24px 10px }
    .akhbarThemak .cd-popup-container h2 { font-size: 18px }
    .akhbarThemak .cd-popup-container h4 { font-size: 12px }
    .akhbarThemak .cd-popup-container .sec { width: 100%; margin-left: 0; margin-bottom: 24px }
    .akhbarThemak .cd-popup-container .sec:nth-child(6n+1) { margin-left: 0; margin-bottom: 0 }
    .akhbarThemak input[type="checkbox"] + label { margin: 0 0 12px; width: 100% }
    .akhbarThemak .cd-popup-container.notify { width: 300px; height: 150px; }
    .akhbarThemak .cd-popup-container .cd-buttons { width: 280px; height: 40px; }
    .akhbarThemak .cd-popup-container .cd-buttons a { width: 135px; height: 40px; line-height: 40px; font-size: 13px; }
    .akhbarThemak { height: 586px; }
    .akhbarThemak li img { width: 100%; height: auto; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) }
    .akhbarThemak { width: calc(100% - 20px); top: 0 !important; margin: 0 10px 40px; height: 590px }
    .akhbarThemak li .secName { margin-bottom: 2px; font-size: 11px }
    .akhbarThemak ul li .item .imageCntnr { padding-bottom: calc((110px * 56.25) / 100); width: 110px }
    .akhbarThemak li .cnts { width: calc(100% - 110px); }
    .akhbarThemak li h2 { font-size: 12px; height: auto }
}