﻿/** survey result **/
.resultContainer h3 { display: inline-block; width: 100%;  font-size: 16px; color: rgb(29, 29, 29); text-align: right; direction: rtl; float: right; margin: 24px 0px 36px; background: rgb(242, 242, 242); padding: 12px 24px; }
.resultContainer h3 span { color: #330D46; font-weight: bold; line-height: 1.4; margin-right: 5px; font-size: 20px; }
/** ramdan survey design3**/
.ramadanSurvey.design3 { width: calc(100% - 320px); margin-left: 20px; padding: 24px 24px 0 24px; height: auto; background-color: #fff; float: right; }
.ramadanSurvey.design3 .surveyQuestion, .resultContainer { display: inline-block; float: right; width: 100%; height: auto; text-align: center; margin: auto }
.ramadanSurvey.design3 .surveyQuestion .ttl, .resultDiv.ramadanResult .ttl { border-bottom: 1px solid #330D46 }
.ramadanSurvey.design3 .surveyQuestion .ttl h2, .resultDiv.ramadanResult .ttl h2 { display: inline-block; width: 100%;  font-size: 16px; color: #1d1d1d; text-align: right; }
.ramadanSurvey.design3 .surveyQuestion h3 { display: inline-block; width: 100%; height: auto; margin: 0 0 36px;  font-size: 14px; color: #fff; text-align: right; direction: rtl; background: #9F6332;border-radius: 5px; padding: 8px 20px; line-height: 2.4; z-index: 101; }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions { display: inline-block; position: relative; width: 100%; float: right }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .allQuestions { display: inline-block; position: relative; width: 100%; overflow: hidden; }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionBox{display:inline-block;float:right;width:100%;border-bottom: 1px solid #870257;}
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer { display: inline-block; float: right; width: 100%; position: relative; transition: all .3s ease-in-out; z-index: 2; height: auto; margin-bottom: 60px }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer:last-child { padding-bottom: 20px }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions h4 { color: #000; font-family: DroidKufiBold, arial; font-size: 16px; text-align: right; margin-bottom: 10px; width: calc(100% - 100px) }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { display: inline-block; float: right; margin-top: 30px; position: relative; cursor: pointer; width: calc((100% - 40px) / 5); margin-left: 10px; opacity: 1; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 0 }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerImg { display: inline-block; margin: 0 auto; position: relative; }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerImg img { width: 100%; height: auto; border: none; max-height: 115px }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerName { display: inline-block; position:relative;padding:0 10px;float: right; width: 100%; overflow:hidden;height: 44px; background-color: #49221A; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerName p { color: #fff;  font-size: 12px; text-align: right;;overflow:hidden;position:absolute;top:50%;transform:translateY(-50%);right:8px;max-height:44px}
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer:after { content: ''; width: 100%; height: 100%; opacity: .5; background-color: #fff; position: absolute; top: 0; right: 0; pointer-events: none; }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer:first-child:after { display: none }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer.removeAfter:after { display: none }
/*.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer.answerOverlay {pointer-events:none}*/
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer.answerOverlay .questionAnswer {     background: rgba(0, 0, 0, 0.40); }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer.answerOverlay .questionAnswer.select { opacity: 1 }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionContainer.answerOverlay .questionAnswer.select .answerName { background-color: #9F6332; }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions iframe { height: 600px; width: 100%;}
.ramadanSurvey.design3 .itemsConts { display: inline-block; width: 100%; position: relative; }
/*.ramadanSurvey.design3:before{content:'';width:calc(100% - 324px);height:100%;display:inline-block;background:url(../Images/ramadanPattern.png);z-index:99;position:absolute;right:0;top:0;opacity:.04}*/
.ramadanSurvey.design3 .questionContainer:after { content: ''; width: 100%; height: 100%; opacity: .5; background-color: #fff; position: absolute; top: 0; right: 0; pointer-events: none; }
.ramadanSurvey.design3 .questionContainer:first-child:after { display: none }
.ramadanSurvey.design3 .questionContainer.removeAfter:after { display: none }
/*.questionContainer.answerOverlay .questionAnswer{opacity:.3}*/
.ramadanSurvey.design3 .questionContainer.answerOverlay .answerImg { opacity: 0.3 }
.ramadanSurvey.design3 .questionContainer.answerOverlay .answerName { opacity: 0.3 }
.ramadanSurvey.design3 .questionContainer.answerOverlay .questionAnswer.select .answerImg { opacity: 1 }
.ramadanSurvey.design3 .questionContainer.answerOverlay .questionAnswer.select .answerName { opacity: 1; background-color: #330D46 }
.timelineQuestions { position: fixed; margin-right: -45px; top: 155px; z-index: 1; background: #f2f2f2; padding: 10px 0; width: 40px; box-shadow: 2px 2px 2px 0 rgba(0,0,0,.2); }
.timelineQuestion::before { position: absolute; top: 0; right: 0; visibility: hidden; z-index: 10; width: 36px; height: 100%; background: rgba(0,0,0,.5); content: ''; opacity: 0; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: opacity .3s,-webkit-transform 0s .3s; transition: opacity .3s,transform 0s .3s; }
.timelineQuestions li { display: inline-block; text-align: right; position: relative; width: 28px; height: 28px; background-color: #fff; border: 2px solid #dddddd; border-radius: 50%; margin: 0 calc((100% - 28px)/2) 10px; }
.timelineQuestions li a { text-align: center; color: #1d1d1d; font-size: 14px; line-height: 1.8; width: 100%; height: 100%; display: inline-block; font-family: arial; cursor: pointer }
.timelineQuestions li.selected { background-color: #cb8831; }
.timelineQuestions li.selected a { color: #fff }
.ramadanSurvey.design3 a.sumbit { position: relative; text-align: center; display: inline-block; width: 110px; height: 30px; font-size: 14px; color: #fff; background-color: #9F6332; margin-bottom: 10px }
.ramadanSurvey.design3 .allQues .chooseAnswer { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(255, 255, 255, 0.8); opacity: 0; visibility: hidden;z-index:3; -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; }
.ramadanSurvey.design3 .allQues .chooseAnswer.is-visible { opacity: 1; visibility: visible; z-index: 999; -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; }
.ramadanSurvey.design3 .allQues .cd-popup-container { position: relative; padding: 24px; width: 500px; height: 180px; top: 50%; margin: -90px auto; background: #FFF; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); -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; }
.ramadanSurvey.design3 .allQues .chooseAnswer p {  font-size: 17px; color: #1d1d1d; direction: rtl; float: right; display: inline-block; width: 100%; margin-top: 24px }
.ramadanSurvey.design3 .allQues .chooseAnswer .ok { position: absolute; bottom: 15px; left: 0; display: inline-block; width: 100px; padding: 5px 0; background: #1a6399;  font-size: 16px; color: #fff; text-align: center; border: none; margin: 24px calc((100% - 100px) / 2) 0; cursor: pointer; }
.ramadanSurvey.design3 .allQues .cd-popup-container .cd-popup-close { position: absolute; top: 12px; left: 12px; width: 36px; height: 36px; }
.ramadanSurvey.design3 .allQues .cd-popup-container .cd-popup-close::before, .allQues .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; }
.ramadanSurvey.design3 .allQues .cd-popup-container .cd-popup-close:hover::before, .allQues .cd-popup-container .cd-popup-close:hover::after { opacity: 1 }
.ramadanSurvey.design3 .allQues .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); }
.ramadanSurvey.design3 .allQues .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); }
.ramadanSurvey.design3 .allQues .is-visible .cd-popup-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions p.quesCount { position: absolute; left: 0; top: 0; display: inline-block; float: right; font-weight: bold; font-family: CenturyGothicBold, Arial; font-size: 16px; color: #000; line-height: 38px }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions p.quesCount span { line-height: 1.4 }
.ramadanSurvey.design3 .surveyQuestion .ramadanQuestions p.quesCount span:first-child { color: #330D46 }
.surveyQuestion .survInfo { display: inline-block; float: right; width: 100%; margin: 10px 0 40px }
.surveyQuestion .survInfo .attSclBar { position: relative; display: inline-block; float: right; width: 100%; height: 50px; padding: 16px; margin: 0; background: #2a2a2a; margin-left: 20px; border-radius: 6px; overflow: hidden }
.surveyQuestion .survInfo .attSclBar p { display: inline-block; float: right; width: calc(100% - 330px); position: absolute; right: 16px; top: 50%; transform: translateY(-50%);  font-size: 13px; color: #fff; text-align: right; direction: rtl; line-height: 1.8; }
.surveyQuestion .survInfo .attSclBar .articleSocial { padding: 0 }
.surveyQuestion .survInfo .attSclBar .articleSocial a { width: 36px; height: 36px }
.surveyQuestion .survInfo .attSclBar .articleSocial a:before { line-height: 2 }
.surveyQuestion .survInfo .attSclBar .articleSocial a:last-of-type { margin-left: 0 }
.ramadanSurveyResult{overflow:visible!important}

/********** 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 }
.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 }
.dtlsSc { float: left; width: 300px; display: inline-block; position: relative; z-index: 2 }

.leftDtlsSc .akhbarThemak { margin-bottom: 30px }
.leftDtlsSc { display: inline-block; float: left; width: 100% }


@media screen and (min-width:1680px) and (max-width:1919px) {
     .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 30px) / 4) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(4n) { margin-left: 0 }
}

@media screen and (min-width:1600px) and (max-width:1679px) {
       .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 30px) / 4) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(4n) { margin-left: 0 }
}

@media screen and (min-width:1536px) and (max-width:1599px) {
      .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 30px) / 4) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(4n) { margin-left: 0 }
}

@media screen and (min-width:1440px) and (max-width:1535px) {
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 30px) / 4) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(4n) { margin-left: 0 }
}

@media screen and (min-width:1360px) and (max-width:1439px) {
        .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 30px) / 4) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(4n) { margin-left: 0 }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerImg img { max-height: 125px }
}

@media screen and (min-width:1280px) and (max-width:1359px) {
        .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 20px) / 3) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(3n) { margin-left: 0 }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerImg img { max-height: 145px }
}

@media screen and (min-width:1152px) and (max-width:1279px) {
    .surveyQuestion .survInfo .attSclBar .surveySponsor { width: 100%; margin-bottom: 32px }
    .surveyQuestion .survInfo .attSclBar p { width: 100%; position: relative; top: auto; transform: none; right: auto }
    .surveyQuestion .survInfo .attSclBar .surveySponsor:before { right: auto; bottom: -16px; width: 100%; height: 1px; transform: none; top: auto; left: 0 }

       .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 10px) / 2) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(2n) { margin-left: 0 }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerImg img { max-height: 146px }
}

@media screen and (min-width:1024px) and (max-width:1151px) {
       .surveyQuestion .survInfo .attSclBar .surveySponsor { width: 100%; margin-bottom: 32px }
    .surveyQuestion .survInfo .attSclBar p { width: 100%; position: relative; top: auto; transform: none; right: auto }
    .surveyQuestion .survInfo .attSclBar .surveySponsor:before { right: auto; bottom: -16px; width: 100%; height: 1px; transform: none; top: auto; left: 0 }

    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 10px) / 2) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(2n) { margin-left: 0 }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerImg img { max-height: 146px }

       .ramadanSurvey .surveyQuestion .ttl, .resultContainer .ttl { height: 30px }
    .ramadanSurvey .surveyQuestion .ttl h2, .resultContainer .ttl h2 { font-size: 15px }
    .ramadanSurvey.design3 .surveyQuestion h3 { font-size: 13px; height: auto }
}

@media only screen and (max-width: 1023px) {
     .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% }
}

@media screen and (min-width:767px) and (max-width:1023px) {
        .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .answerImg img { max-height: 130px }
        .ramadanSurvey.design3{width:100%;margin-left:0}
        .dtlsSc{width:100%;margin-top:20px}
}

@media screen and (min-width: 320px) and (max-width: 767px) {
      .surveyQuestion .survInfo .attSclBar { width: 100%; margin-left: 0 }
    .surveyQuestion .survInfo .attSclBar p { width: calc(100% - 20px); right: 10px; font-size: 11px; }
    .surveyQuestion .survInfo .attSclBar .surveySponsor { width: 100%; margin-bottom: 32px; transform: none }
    .surveyQuestion .survInfo .attSclBar p { width: 100%; position: relative; top: auto; transform: none; right: auto }
    .surveyQuestion .survInfo .attSclBar .surveySponsor:before { right: auto; bottom: -16px; width: 100%; height: 1px; transform: none; top: auto; left: 0 }
            .ramadanSurvey.design3{width:100%;margin-left:0;    padding: 10px 10px 0 10px;}
        .dtlsSc{width:100%;margin-top:20px}
     .ramadanSurvey .surveyQuestion .ttl, .resultContainer .ttl { height: 33px }
    .ramadanSurvey .surveyQuestion .ttl h2, .resultContainer .ttl h2 { font-size: 15px }

        .ramadanSurvey.design3 .surveyQuestion h3 { margin: 10px 0; padding: 8px 10px;line-height: 1.8; font-size: 12px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions p.quesCount { font-size: 15px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer { width: calc((100% - 10px)/ 2) }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(5n) { margin-left: 10px }
    .ramadanSurvey.design3 .surveyQuestion .ramadanQuestions .questionAnswer:nth-of-type(2n) { margin-left: 0 }

       .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 li img{ width: 100%; height: auto; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) }
          .akhbarthemak{height:586px}

          .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 }

}


@media only screen and (max-width:1360px) {

    .surveyDiv .resultDiv .grid li { width: calc((100% - 24px) / 2); }
    .surveyDiv .resultDiv .grid li:nth-child(3n) { margin-left: 24px }
    .surveyDiv .resultDiv .grid li:nth-child(2n) { margin-left: 0; }
}

@media only screen and (max-width:1024px) {
    /*.ramadanSurvey .surveyQuestion .ramadanQuestions, .ramadanSurvey .surveyQuestion .ramadanQuestions iframe{height:420px}*/
    .ramadanSurvey .surveyQuestion h3 { margin: 15px 0 15px; font-size: 12px; line-height: 2.4; padding: 0 10px; height: 30px; }
}