@charset "UTF-8";



.cd-filter-block h4,
.custom-header nav span {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

#cd-lateral-nav,
#cd-menu-trigger,
#cd-vertical-nav a,
.cd-main-content,
header {
    -webkit-backface-visibility: hidden
}

@font-face {
    font-family: DroidKufiBold;
    src: url(../fonts/droidkufi-bold.eot);
    src: url(../fonts/droidkufi-bold.eot?#iefix) format('embedded-opentype'), url(../fonts/droidkufi-bold.woff) format('woff'), url(../fonts/droidkufi-bold.ttf) format('truetype'), url(../fonts/droidkufi-bold.svg#webfontRl4nowrT) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: DroidKufiLight;
    src: url(../fonts/droidkufi-regular.eot);
    src: url(../fonts/droidkufi-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/droidkufi-regular.woff) format('woff'), url(../fonts/droidkufi-regular.ttf) format('truetype'), url(../fonts/droidkufi-regular.svg#webfontRl4nowrT) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: MasrawyIcons;
    src: url(../fonts/masrawyicons.eot?ref=1.1);
    src: url(../fonts/masrawyicons.eot?#iefix) format("embedded-opentype"), url(../fonts/masrawyicons.woff?ref=1.1) format("woff"), url(../fonts/masrawyicons.ttf?ref=1.1) format("truetype"), url(../fonts/masrawyicons.svg?ref=1.1) format("svg");
    font-weight: 400;
    font-style: normal
}

.breadcrumb li a:after,
.bx-wrapper .bx-next:before,
.bx-wrapper .bx-prev:before,
.cd-tab-filter::after,
.custom-header nav span:before,
.icon-leftArr:after,
.icon-more:after,
.lg-actions .lg-next:before,
.lg-actions .lg-prev:after,
.lg-autoplay-button:after,
.lg-show-autoplay .lg-autoplay-button:after,
.lg-toolbar .lg-close:after,
.surveyDiv .allQues .answersDiv .answerItem.selected .imgMask:after,
.surveyDiv .allQues .nxtPrevDiv .btn a.next:after,
.surveyDiv .allQues .nxtPrevDiv .btn a.prev:before,
.ui-datepicker .ui-icon-circle-triangle-e:before,
.ui-datepicker .ui-icon-circle-triangle-w:before,
[class*=" icon-"]:before,
[class^=icon-]:before,
article .details blockquote:before {
    font-family: MasrawyIcons;
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1.7em
}

a,
li,
ul {
    text-decoration: none
}

* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -ms-tap-highlight-color: transparent;
    -o-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    appearance: none
}

a {
    color: #1d1d1d
}

button {
    border: none;
    outline: 0
}

a,
button,
li,
{
    -webkit-touch-action: manipulation;
    -moz-touch-action: manipulation;
    -o-touch-action: manipulation;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -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;
    cursor: pointer
}





img {
    border: 1px solid #ddd;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
    text-indent: -500%
}


.clear,
.clr {
    clear: both;
    float: none;
    line-height: 0
}

::-moz-selection {
    background: #1d1d1d;
    color: #fff;
    text-shadow: none
}

::selection {
    background: #1d1d1d;
    color: #fff;
    text-shadow: none
}

iframe {
    border: none
}



input,
textarea {
    outline: 0;
    -webkit-appearance: textfield!important;
    -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
}

input:focus,
textarea:focus {
    border: 1px solid #888!important;
    outline: 0
}

input[type=checkbox],
input[type=radio] {
    display: none
}

input[type=checkbox]+label,
input[type=radio]+label {
    color: #1d1d1d;
    font-family: DroidKufiLight, Arial;
    font-size: 12px;
    float: right;
    margin: 0 5px 10px;
    text-align: right;
    display: inline-block;
    width: 100%;
    direction: rtl
}

input[type=checkbox]+label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 2px 0 0 5px;
    vertical-align: middle;
    background: url(http://www.masrawy.com/Images/check-radio-img.png) 0 top no-repeat;
    cursor: pointer
}

input[type=checkbox]:checked+label span {
    background: url(http://www.masrawy.com/Images/check-radio-img.png) -18px top no-repeat
}

input[type=radio]+label span {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 2px 0 0 5px;
    vertical-align: middle;
    background: url(http://www.masrawy.com/Images/check-radio-img.png) -37px top no-repeat;
    cursor: pointer
}

input[type=radio]:checked+label span {
    background: url(http://www.masrawy.com/Images/check-radio-img.png) -55px top no-repeat
}

.custom-calendar-wrap {
    margin: 10px auto;
    position: relative;
    overflow: hidden
}

.custom-inner {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

.custom-inner:after,
.custom-inner:before {
    content: '';
    width: 99%;
    height: 50%;
    position: absolute;
    background: #f6f6f6;
    bottom: -4px;
    left: .5%;
    z-index: -1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

.custom-inner:after {
    content: '';
    width: 98%;
    bottom: -7px;
    left: 1%;
    z-index: -2
}

.custom-header {
    background: #fff;
    padding: 5px 10px 10px 20px;
    height: 70px;
    position: relative;
    border-top: 5px solid #aa120d;
    border-bottom: 1px solid #ddd
}

.custom-header h2,
.custom-header h3 {
    text-align: center;
    display: block
}

.custom-header h2 {
    color: #1d1d1d;
    font-size: 20px;
    margin-top: 10px;
    font-family: DroidKufiLight, arial
}

.custom-header h3 {
    font-size: 12px;
    color: #888;
    font-family: arial
}

.custom-header nav span {
    position: absolute;
    top: 17px;
    width: 30px;
    height: 30px;
    color: transparent;
    cursor: pointer;
    margin: 0 1px;
    font-size: 20px;
    line-height: 30px;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    user-select: none
}

.custom-header nav span:first-child {
    left: 5px
}

.custom-header nav span:last-child {
    right: 5px
}

.custom-header nav span:before {
    color: #aa120d;
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 12px;
    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
}

.custom-header nav span.custom-prev:before {
    content: 'q'
}

.custom-header nav span.custom-next:before {
    content: 'r'
}

.custom-header nav span:hover:before {
    color: #495468
}

.custom-content-reveal {
    background: #f6f6f6;
    background: rgba(246, 246, 246, .9);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    text-align: center;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out
}

.custom-content-reveal span.custom-content-close {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    background: #ef4f69;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    cursor: pointer;
    line-height: 13px;
    padding: 0
}

.custom-content-reveal span.custom-content-close:after {
    content: 'x';
    font-size: 18px;
    color: #fff
}

.custom-content-reveal a,
.custom-content-reveal span {
    font-size: 22px;
    padding: 10px 30px;
    display: block
}

.custom-content-reveal h4 {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 3px;
    color: #777;
    padding: 20px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    border-top: 5px solid #ef4f69;
    box-shadow: 0 1px rgba(255, 255, 255, .9);
    margin-bottom: 30px
}

.custom-content-reveal span {
    color: #888
}

.custom-content-reveal a {
    color: #ef4f69
}

.custom-content-reveal a:hover {
    color: #333
}

.fc-calendar-container {
    padding: 30px;
    background: #f6f6f6;
    box-shadow: inset 0 1px rgba(255, 255, 255, .8)
}

.fc-calendar .fc-head {
    background: 0 0;
    color: #aa120d;
    font-weight: 700;
    text-transform: uppercase;
    font-family: arial;
    font-size: 10px;
    height: 30px;
    line-height: 30px
}

.fc-calendar .fc-row>div {
    background: #fff;
    cursor: pointer
}

.fc-calendar .fc-row>div:empty {
    background: 0 0
}

.fc-calendar .fc-row>div>a.fc-date {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 20px;
    font-family: arial;
    color: #1d1d1d;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, .8);
    margin: 0;
    top: 0;
    right: 0;
    text-align: center
}

.fc-calendar .fc-row>div.fc-today {
    background: #aa120d;
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .1)
}

.fc-calendar .fc-row>div.fc-today>a.fc-date {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .1)
}

.fc-calendar .fc-row>div.fc-content:after {
    content: '\00B7';
    text-align: center;
    width: 20px;
    margin-left: -10px;
    position: absolute;
    color: #DDD;
    font-size: 70px;
    line-height: 20px;
    left: 50%;
    bottom: 3px
}

.fc-calendar .fc-row>div.fc-today.fc-content:after {
    color: #b02c42
}

.fc-calendar .fc-row>div.fc-content:hover:after {
    color: #ef4f69
}

.fc-calendar .fc-row>div.fc-today.fc-content:hover:after {
    color: #fff
}

.fc-calendar .fc-row>div>div a,
.fc-calendar .fc-row>div>div span {
    display: none;
    font-size: 22px
}

@media screen and (max-width:400px) {
    .fc-calendar-container {
        height: 300px
    }
    .fc-calendar .fc-row>div>span.fc-date {
        font-size: 15px
    }
}

.fc-calendar-container {
    position: relative;
    height: 400px;
    width: 400px
}

.fc-calendar,
.fc-calendar .fc-body {
    height: 100%;
    width: 100%
}

.fc-calendar .fc-body {
    position: relative;
    height: -moz-calc(100% - 30px);
    height: -webkit-calc(100% - 30px);
    height: calc(100% - 30px);
    border: 1px solid #ddd
}

.fc-calendar .fc-row {
    width: 100%;
    border-bottom: 1px solid #ddd
}

.fc-four-rows .fc-row {
    height: 25%
}

.fc-five-rows .fc-row {
    height: 20%
}

.fc-six-rows .fc-row {
    height: 16.66%;
    height: -moz-calc(100% / 6);
    height: -webkit-calc(100%/6);
    height: calc(100%/6)
}

.fc-calendar .fc-head>div,
.fc-calendar .fc-row>div {
    float: left;
    height: 100%;
    width: 14.28%;
    width: -moz-calc(100%/7);
    width: -webkit-calc(100%/7);
    width: calc(100%/7);
    position: relative
}

.ie9 .fc-calendar .fc-head>div,
.ie9 .fc-calendar .fc-row>div {
    width: 14.2%
}

.fc-calendar .fc-row>div {
    border-right: 1px solid #ddd;
    padding: 0;
    overflow: hidden;
    position: relative
}

.fc-calendar .fc-head>div {
    text-align: center
}

.fc-calendar .fc-row>div>span.fc-weekday {
    padding-left: 5px;
    display: none
}

.fc-calendar .fc-row>div.fc-out {
    opacity: .6
}

.fc-calendar .fc-head>div:last-child,
.fc-calendar .fc-row>div:last-child {
    border-right: none
}

.fc-calendar .fc-row:last-child {
    border-bottom: none
}

.ui-datepicker {
    width: 250px;
    direction: ltr;
    box-shadow: 0 0 20px rgba(0, 0, 0, .4);
    line-height: normal
}

.ui-datepicker .ui-datepicker-header {
    background: #fff;
    padding: 5px 10px;
    height: 60px;
    position: relative;
    border-bottom: 1px solid #ddd;
    text-align: center
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 14px;
    cursor: pointer;
    color: #1d1d1d;
    background: 0 0!important;
    font-size: 30px;
    z-index: 1;
    line-height: 1
}

.ui-datepicker .ui-datepicker-prev {
    left: 10px
}

.ui-icon {
    display: block;
    overflow: hidden;
    background-repeat: no-repeat;
    font-size: 20px
}

.ui-datepicker span {
    cursor: pointer!important
}

.ui-widget-content .ui-state-disabled span {
    cursor: auto!important
}

.ui-datepicker .ui-icon-circle-triangle-w:before {
    content: "q"
}

.ui-datepicker .ui-icon-circle-triangle-e:before {
    content: "r"
}

.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev:hover {
    color: #aa120d
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled {
    background: 0 0
}

.ui-datepicker .ui-datepicker-next {
    right: 10px
}

.ui-datepicker .ui-datepicker-title {
    display: inline-block;
    width: 100%;
    height: 60px;
    font-size: 0;
    position: absolute;
    left: 0;
    top: 0;
    zoom: 1
}

.ui-datepicker .ui-datepicker-title .ui-datepicker-month {
    display: inline-block;
    width: 100%;
    float: right;
    line-height: normal;
    margin: 0!important;
    font-size: 20px;
    color: #1d1d1d;
    font-family: DroidKufiLight, arial
}

.ui-datepicker .ui-datepicker-title .ui-datepicker-year {
    display: inline-block;
    width: 100%;
    float: right;
    font-size: 14px;
    color: #888;
    font-family: arial;
    line-height: normal
}

.ui-datepicker table {
    width: 100%;
    padding: 12px;
    position: relative;
    background: #f6f6f6;
    box-shadow: inset 0 1px rgba(255, 255, 255, .8);
    display: inline-block;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 2.4
}

.ui-datepicker thead {
    background: 0 0;
    color: #aa120d;
    font-weight: 700;
    text-transform: uppercase;
    font-family: arial;
    font-size: 10px;
    line-height: 1;
    display: table-row-group
}

.ui-datepicker thead tr {
    display: table-row;
    width: 100%;
    height: 22px
}

.ui-datepicker th {
    height: 100%;
    width: calc(228px / 7);
    position: relative;
    text-align: center;
    line-height: 2;
    display: table-cell
}

.ui-datepicker tbody {
    display: table-row-group;
    border: 1px solid #ddd;
    width: 100%
}

.ui-datepicker tbody tr {
    display: table-row;
    width: 100%;
    height: 28px;
    border-bottom: 1px solid #ddd
}

.ui-datepicker tbody tr:last-child {
    border-bottom: 0
}

.ui-datepicker tbody td {
    width: calc(222px / 7);
    position: relative;
    display: table-cell;
    height: 100%;
    border-right: 1px solid #ddd;
    padding: 0;
    margin: 0
}

.ui-datepicker tbody td:nth-child(7n) {
    border-right: 0
}

.ui-state-disabled {
    cursor: default!important;
    color: #ddd!important
}

.ui-widget-content .ui-state-default {
    display: block;
    position: relative;
    background: #fff;
    width: 100%;
    height: 100%;
    font-family: arial;
    color: #1d1d1d;
    margin: 0;
    top: 0;
    right: 0;
    text-align: center
}

.lstNwsNtfy,
header {
    position: fixed;
    top: 0;
    right: 0;
    display: inline-block
}

.ui-widget-content .ui-state-default:hover,
.ui-widget-content a.ui-state-active {
    background: #ddd;
    color: #1d1d1d
}

.ui-widget-content .ui-datepicker-today .ui-state-default,
.ui-widget-content .ui-datepicker-today .ui-state-default:hover {
    background: #aa120d;
    color: #fff
}

.ui-widget-content .ui-state-disabled .ui-state-default {
    cursor: default!important;
    color: #ddd
}

.ui-widget-content .ui-state-disabled .ui-state-default:hover {
    background: #fff;
    color: #ddd
}

.lstNwsNtfy {
    width: 100%;
    height: 0;
    background: #aa120d;
    overflow: hidden;
    left: 0;
    z-index: 4;
    text-align: center;
    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-top-nav,
body.lastNews .lstNwsNtfy,
header {
    height: 50px
}

.lstNwsNtfy .cnts {
    width: calc(100% - 144px);
    margin: 0 60px 0 84px;
    display: inline-block;
    max-width: 1440px;
    padding: 8px 0
}

.lstNwsNtfy .cnts img {
    float: right;
    margin-left: 12px;
    border: none
}

.lstNwsNtfy .cnts p {
    display: inline-block;
    font-family: DroidKufiLight, Arial;
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transition-delay: .3s
}

.lstNwsNtfy .cnts p span {
    font-weight: 700;
    font-size: 18px
}

.lstNwsNtfy .cnts p a {
    background: #fff;
    color: #aa120d;
    padding: 5px 10px;
    line-height: 1;
    display: inline-block;
    margin-right: 5px
}

#cd-top-nav .rightDiv date,
#cd-top-nav>ul>li>a {
    font-family: DroidKufiLight, arial;
    color: #b8b8b8
}

.lstNwsNtfy .cnts .icon-notify:before {
    content: "i";
    float: right;
    margin-left: 12px;
    font-size: 22px
}

body.lastNews .lstNwsNtfy .cnts p {
    opacity: 1
}

header {
    width: 100%;
    float: right;
    z-index: 3;
    background: #1d1d1d;
    box-shadow: 0 0 1px 1px #1d1d1d;
    -webkit-transform: translateZ(0);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    transition-duration: .4s
}

#cd-top-nav .masLogo,
#cd-top-nav .rightDiv date {
    float: right;
    opacity: 1;
    visibility: visible;
    transition: all .2s ease-in-out 0s
}

#cd-top-nav {
    float: right;
    margin-right: 14px;
    display: inline-block;
    width: calc(100% - 74px)
}

#cd-top-nav .rightDiv {
    float: right;
    display: inline-block
}

#cd-top-nav .masLogo {
    width: 137px;
    height: 40px;
    background: url(http://www.masrawy.com/Images/masrawyLogo.png?ver=2) center center no-repeat;
    background-size: 137px 40px;
    margin-top: 6px;
    -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-top-nav .rightDiv date {
    direction: rtl;
    font-size: 16px;
    margin-right: 14px;
    padding-right: 14px;
    border-right: 1px solid #474747;
    height: 50px;
    line-height: 3.4;
    -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-top-nav ul>li>.subMenu,
.lateral-menu-is-open #cd-top-nav .masLogo,
.lateral-menu-is-open #cd-top-nav date {
    visibility: hidden;
    opacity: 0
}

#cd-top-nav>ul {
    float: left;
    margin-left: 84px
}

#cd-top-nav>ul>li {
    float: right;
    width: 84px;
    height: 50px;
    border-left: 1px solid #474747;
    position: relative;
    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-top-nav>ul>li:hover {
    background: #444
}

#cd-top-nav>ul>li>a {
    font-size: 10px;
    display: block;
    text-align: center;
    width: 80px;
    height: 50px;
    padding-top: 5px
}

#cd-top-nav>ul>li:hover>a {
    color: #fff
}

#cd-top-nav>ul>li.thanawya,
#cd-top-nav>ul>li.thanawya .firstLevel {
    width: 100px
}

#cd-top-nav ul li.thanawya .firstLevel .thanawyaIcon {
    background: url(http://www.masrawy.com/Images/thanawya.png) center center no-repeat;
    height: 24px
}

#cd-top-nav ul li .icon-newsPntr:before {
    content: "b";
    display: block;
    font-size: 24px;
    line-height: 1
}

#cd-top-nav ul li .icon-archive:before {
    content: "c";
    display: block;
    font-size: 20px;
    line-height: 1;
    margin: 2px 0
}

#cd-top-nav ul li .icon-prayerTms:before {
    content: "e";
    display: block;
    font-size: 24px;
    line-height: 1
}




#cd-top-nav ul li .icon-currency:before {
    content: "d";
    display: block;
    font-size: 24px;
    line-height: 1
}

#cd-top-nav ul li .icon-gold:before {
    content: "2";
    display: block;
    font-size: 24px;
    line-height: 1
}
#cd-top-nav ul li .icon-weather:before {
    content: "J";
    display: block;
    font-size: 24px;
    line-height: 1
}
#cd-top-nav ul li .icon-ads:before {
    content: "n";
    display: block;
    font-size: 24px;
    line-height: 1
}

#cd-top-nav ul li>.icon-search:before {
    content: "f";
    display: block;
    font-size: 22px;
    line-height: 1;
    margin: 1px 0
}






#cd-top-nav ul li .weather>span {
    font-family: Arial;
    font-size: 20px;
    font-weight: 700;
    margin-right: 14px;
    line-height: 2.2;
    position: relative
}

#cd-top-nav ul li .weather>.icon-temp:before {
    content: "H";
    font-size: 8px;
    position: absolute;
    right: -5px;
    top: 5px
}

#cd-top-nav ul>li>.subMenu {
    background: #444;
    width: 252px;
    height: 0;
    position: absolute;
    right: -1px;
    top: 50px;
    z-index: 999;
    overflow: hidden;
    padding: 12px;
    -moz-transition: all .2s ease-in-out 0s;
    -webkit-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s
}

.morphSearchDiv,
.morphsearch {
    -webkit-transition: all .5s ease-in-out 0s;
    left: 0
}

#cd-top-nav ul>li:hover>.subMenu {
    z-index: 9999;
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    height: 278px;
    overflow: visible
}

#cd-top-nav ul>li:first-child>.subMenu {
    right: 0
}

#cd-top-nav ul .subMenu .more {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 40px;
    background: #333;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    text-align: center;
    color: #fff;
    float: right;
    line-height: 2.8
}

#cd-top-nav ul .subMenu .icon-more:after {
    content: "q";
    margin-right: 12px;
    font-size: 10px
}

#cd-top-nav ul .subMenu .more:hover {
    background: #1d1d1d
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts {
    display: inline-block;
    width: 100%;
    background: 0 0;
    margin-bottom: 0;
    box-shadow: none
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts {
    display: inline-block;
    width: 100%;
    margin: 12px 0 0;
    font-family: DroidKufiLight, Arial;
    font-size: 20px;
    color: #fff;
    text-align: center
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon p {
    width: 100%;
    display: block;
    font-family: DroidKufiLight, Arial;
    font-size: 26px;
    color: #fff;
    text-align: center;
    line-height: 2;
    margin-top: 30px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon p span {
    display: block;
    font-family: DroidKufiBold, Arial;
    color: #e63b34;
    font-size: 36px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .ttl {
    display: none
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .labelDiv {
    float: right;
    width: 100%
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .labelDiv label {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    direction: rtl;
    text-align: right;
    float: right;
    margin-bottom: 5px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .labelDiv span {
    color: #e63b34;
    float: right;
    margin-right: 2px;
    line-height: 1.5
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber input {
    width: 100%;
    height: 40px!important;
    border: 1px solid #ddd;
    float: right;
    outline: 0;
    padding: 12px;
    font-family: DroidKufiLight, Arial;
    color: #888;
    font-size: 14px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .errorMsg {
    position: relative;
    float: right;
    right: 0;
    display: inline-block;
    font-family: DroidKufiLight, Arial;
    font-size: 12px;
    color: #aaa;
    direction: rtl;
    text-align: right;
    visibility: hidden;
    margin-top: 5px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber a {
    display: inline-block;
    width: 132px;
    font-family: DroidKufiLight, Arial;
    background: #e63b34;
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 5px 0;
    margin: 5px calc((100% - 132px)/ 2) 12px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber a:hover {
    background: #aa120d
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor {
    display: inline-block;
    width: 100%
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts {
    display: inline-block;
    width: 166px;
    margin: 0 calc((100% - 166px)/ 2);
    float: right;
    padding: 8px 0
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts .spnsr {
    float: right;
    margin-left: 24px;
    margin-top: 4px;
    font-family: DroidKufiLight, Arial;
    color: #fff;
    font-size: 14px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts a {
    float: right;
    width: auto;
    background: 0 0;
    color: none;
    padding: 0;
    margin: 0
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts img {
    width: auto;
    height: 27px;
    border: none
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor {
    display: inline-block;
    width: 100%
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts {
    display: inline-block;
    width: 166px;
    margin: 0 calc((100% - 166px)/ 2);
    float: right;
    padding: 8px 0
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts .spnsr {
    float: right;
    margin-left: 24px;
    margin-top: 4px;
    font-family: DroidKufiLight, Arial;
    color: #fff;
    font-size: 14px
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts a {
    float: right;
    width: auto;
    background: 0 0;
    color: none;
    padding: 0;
    margin: 0
}

#cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts img {
    width: auto;
    height: 27px;
    border: none
}

#cd-top-nav ul .subMenu.newsPntr ul {
    display: inline-block;
    width: 100%;
    height: 254px
}

#cd-top-nav ul .subMenu.newsPntr ul li {
    display: inline-block;
    width: 100%;
    height: 76px;
    border-bottom: 1px solid #555;
    float: right
}

#cd-top-nav ul .subMenu.newsPntr ul li:last-child {
    border-bottom: none
}

#cd-top-nav ul .subMenu.newsPntr ul li .trendDiv {
    float: right;
    width: 40px;
    height: 60px;
    border: 1px solid #aaa;
    display: inline-block;
    margin: 8px 0 0 12px
}

#cd-top-nav ul .subMenu.newsPntr ul li .trendDiv .trendImg {
    width: 38px;
    height: 29px;
    display: block;
    text-align: center
}

#cd-top-nav ul .subMenu.newsPntr ul li .trendDiv .trendImg img {
    width: 18px;
    height: 18px;
    border: none;
    margin-top: 5px
}

.morphsearch-input,
.openSearch .morphsearch.open .morphsearch-input:focus {
    border: none!important
}

#cd-top-nav ul .subMenu.newsPntr ul li .trendDiv .vstrs {
    text-align: center;
    background: #aaa;
    width: 38px;
    height: 29px;
    font-family: Arial;
    color: #1d1d1d;
    font-size: 12px;
    line-height: 2.8
}

#cd-top-nav ul .subMenu.newsPntr ul li .news {
    float: right;
    display: block;
    font-family: DroidKufiLight, arial;
    color: #fff;
    font-size: 13px;
    width: calc(100% - 52px);
    padding: 0;
    text-align: right;
    height: 66px;
    overflow: hidden;
    margin-top: 5px;
    line-height: 1.7
}

#cd-top-nav ul .subMenu.prayerTms .cnts,
#cd-top-nav ul .subMenu.prayerTms .cnts .cntdwn,
#cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv,
#cd-top-nav ul .subMenu.prayerTms .cnts date,
#cd-top-nav ul .subMenu.prayerTms .cnts p {
    display: inline-block;
    width: 100%
}

#cd-top-nav ul .subMenu.newsPntr ul li .news:hover {
    color: #aaa
}

#cd-top-nav ul>li:hover>.subMenu.archive {
    height: auto
}

#cd-top-nav ul .subMenu.archive .ui-datepicker {
    width: 228px;
    height: auto;
    box-shadow: none
}

#cd-top-nav ul .subMenu.prayerTms .cnts {
    height: 254px;
    background: 0 0;
    margin-bottom: 0;
    box-shadow: none
}

#cd-top-nav ul .subMenu.prayerTms .cnts date {
    color: #fff;
    margin: 12px 0;
    font-family: DroidKufiLight, arial;
    font-size: 13px
}

#cd-top-nav ul .subMenu.prayerTms .cnts .location {
    display: inline-block;
    width: 100%;
    margin-bottom: 12px;
    color: #fff;
    font-size: 30px
}

#cd-top-nav ul .subMenu.prayerTms .cnts p {
    color: #aaa;
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    margin: 0 0 12px;
    text-align: center
}

#cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul {
    display: inline-block;
    width: 100%;
    margin: 0 auto
}

#cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li {
    float: left;
    width: 60px;
    height: 50px;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 32px;
    position: relative;
    background: #4e4e4e;
    margin-right: 24px;
    line-height: 1.5
}

#cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li:last-child {
    margin-right: 0
}

#cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li:nth-child(1):after,
#cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li:nth-child(2):after {
    content: ":";
    background: rgba(0, 0, 0, 0);
    color: #fff;
    display: block;
    font-size: 28px;
    position: absolute;
    top: 3px;
    right: -16px
}

#cd-top-nav ul .subMenu.weather .wtrCnts {
    display: inline-block;
    width: 100%;
    height: 254px;
    background: 0 0;
    margin-bottom: 0;
    box-shadow: none
}

#cd-top-nav ul .subMenu.weather .wtrCnts .location {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-size: 30px;
    margin: 0 0 12px;
    text-align: right;
    font-family: DroidKufiLight, arial
}

#cd-top-nav ul .subMenu.weather .wtrCnts .cntdwn,
#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls {
    display: inline-block;
    width: 100%
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon {
    float: right;
    width: 70px;
    height: 70px;
    margin-left: 24px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .highTemp {
    float: right;
    position: relative;
    margin-left: 10px;
    width: 62px;
    height: 70px;
    text-align: center;
    font-family: arial;
    font-size: 48px;
    color: #fff;
    line-height: 1.8
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .icon-high:before {
    content: "H";
    font-size: 14px;
    position: absolute;
    right: -5px;
    top: 5px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .lowTemp {
    float: right;
    position: relative;
    width: 62px;
    height: 70px;
    text-align: center;
    font-family: arial;
    font-size: 32px;
    color: #aaa;
    line-height: 2.8
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .icon-low:before {
    content: "H";
    font-size: 10px;
    position: absolute;
    right: 6px;
    top: 18px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.sunny {
    background: url(http://www.masrawy.com/images/weatherSprite.png) no-repeat;
    height: 70px;
    margin: 2px 0 12px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.cloudy {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -68px no-repeat;
    height: 46px;
    margin: 8px 0 18px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.partlycloudy {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -124px no-repeat;
    height: 52px;
    margin: 5px 0 15px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.patchylightdrizzle {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -184px no-repeat;
    height: 62px;
    margin: 0 0 10px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.lightdrizzle {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -256px no-repeat;
    height: 48px;
    margin: 7px 0 17px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.lightrainshower,
#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.lightsleetshowers {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -184px no-repeat;
    height: 62px;
    margin: 0 0 10px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.patchylightrain {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -256px no-repeat;
    height: 48px;
    margin: 7px 0 17px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.patchyrainnearby {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -184px no-repeat;
    height: 62px;
    margin: 0 0 10px 24px;
    background-size: 70px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .windHum {
    display: inline-block;
    width: 100%;
    margin-top: 5px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .windHum>div {
    width: 100%;
    float: right;
    font-family: DroidKufiLight, Arial;
    color: #aaa;
    font-size: 13px;
    display: inline-block
}

#cd-top-nav ul .subMenu.weather .wtrCnts .windHum>div span {
    color: #fff
}

#cd-top-nav ul .subMenu.weather .wtrCnts .windHum .hum {
    margin-bottom: 2px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .windHum .icon-hum:before {
    content: "K";
    float: right;
    margin-left: 5px;
    font-size: 16px
}

#cd-top-nav ul .subMenu.weather .wtrCnts .windHum .icon-wind:before {
    content: "L";
    float: right;
    margin-left: 5px;
    font-size: 16px
}

.morphsearch-form.icon-search:before,
.morphsearch-submit.icon-search:before {
    content: "f";
    line-height: 1;
    pointer-events: none
}

#cd-top-nav ul .subMenu.currency .currCnts {
    display: inline-block;
    width: 100%;
    background: 0 0;
    margin-bottom: 0;
    box-shadow: none;
    height: 254px
}

#cd-top-nav ul .subMenu.currency .currCnts p {
    display: inline-block;
    width: 100%;
    margin: 12px 0 0;
    font-family: DroidKufiLight, Arial;
    font-size: 20px;
    color: #fff;
    text-align: center
}

#cd-top-nav ul .subMenu.currency .currCnts p:nth-child(2) {
    color: #aaa;
    font-size: 14px;
    margin: 12px 0
}

#cd-top-nav ul .subMenu.currency .currCnts .number {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: Arial;
    font-size: 62px;
    color: #fff;
    margin-top: 24px
}

#cd-top-nav ul .subMenu.currency .currCnts .number span {
    margin-left: 10px;
    font-size: 24px;
    color: #aaa
}

#cd-top-nav ul .subMenu.gold .goldCnts {
    display: inline-block;
    width: 100%;
    background: 0 0;
    margin-bottom: 0;
    box-shadow: none
}

#cd-top-nav ul .subMenu.gold .goldCnts p {
    display: inline-block;
    width: 100%;
    margin: 12px 0 0;
    font-family: DroidKufiLight, Arial;
    font-size: 20px;
    color: #fff;
    text-align: center
}

#cd-top-nav ul .subMenu.gold .goldCnts p:nth-child(2) {
    color: #aaa;
    font-size: 14px;
    margin: 12px 0
}

#cd-top-nav ul .subMenu.gold .goldCnts .number {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: Arial;
    font-size: 62px;
    color: #fff;
    margin-top: 24px
}

#cd-top-nav ul .subMenu.gold .goldCnts .number span {
    margin-left: 10px;
    font-size: 24px;
    color: #aaa
}

.morphSearchDiv {
    position: fixed;
    width: 84px;
    height: 50px;
    display: inline-block;
    top: 0;
    z-index: 3;
    background: 0 0;
    transition: all .5s ease-in-out 0s;
    overflow: hidden
}

.openSearch .morphSearchDiv {
    width: 100%;
    height: 100%;
    box-shadow: none!important
}

.morphsearch {
    width: 84px;
    min-height: 50px;
    background: #1d1d1d;
    position: absolute;
    z-index: 10000;
    top: 0;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    transition: all .5s ease-in-out 0s
}

.openSearch .morphsearch.open {
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background: #fff
}

.morphsearch-form {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    position: relative;
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

.morphsearch-form.icon-search:before {
    display: block;
    font-size: 22px;
    color: #b8b8b8;
    position: absolute;
    right: 50%;
    margin: 6px -11px 0 0;
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

.openSearch .morphsearch.open .morphsearch-form {
    width: 80%;
    height: 160px;
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0)
}

.openSearch .morphsearch.open .morphsearch-form.icon-search:before {
    visibility: hidden;
    opacity: 0
}

.morphsearch-input {
    width: 100%;
    height: 100%;
    padding: 28px 28px 0 20px;
    text-align: right;
    cursor: pointer;
    background: 0 0;
    font-family: DroidKufiBold, Arial;
    font-size: 10px;
    color: #b8b8b8;
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

.morphsearch-input::-ms-clear {
    display: none
}

.morphsearch.hideInput .morphsearch-input {
    color: transparent;
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

.openSearch .morphsearch.open .morphsearch-input {
    font-size: 3em;
    text-align: right;
    cursor: text;
    padding: 0
}

.openSearch .morphsearch.open .morphsearch-input:focus img,
.openSearch .morphsearch.open .morphsearch-input:hover img {
    display: none
}

input[type=search]::-webkit-search-cancel-button {
    display: none
}

.morphsearch-input::-webkit-input-placeholder {
    color: #c2c2c2
}

.morphsearch-input:-moz-placeholder {
    color: #c2c2c2
}

.morphsearch-input::-moz-placeholder {
    color: #c2c2c2
}

.morphsearch-input:-ms-input-placeholder {
    color: #c2c2c2
}

.gn-search:focus::-webkit-input-placeholder {
    color: transparent
}

input[type=search] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.morphsearch-input:focus,
.morphsearch-submit:focus {
    outline: 0
}

.morphsearch-submit.icon-search:before {
    color: #ddd;
    font-size: 68px;
    position: absolute;
    width: 80px;
    height: 80px;
    overflow: hidden;
    left: 0;
    top: 50%;
    border: none;
    transform-origin: 50% 50%;
    opacity: 0;
    -webkit-transform: translate3d(-30px, -50%, 0) scale3d(0, 0, 1);
    transform: translate3d(-30px, -50%, 0) scale3d(0, 0, 1)
}

.openSearch .morphsearch.open .morphsearch-submit.icon-search:before {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(-30px, -50%, 0) scale3d(1, 1, 1);
    transform: translate3d(-30px, -50%, 0) scale3d(1, 1, 1);
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s
}

.morphsearch-close,
.ps-container.ps-in-scrolling,
.ps-container:hover.ps-in-scrolling {
    pointer-events: none
}

.morphsearch-submit.icon-search:hover:before {
    color: #b8b8b8
}

.morphsearch-close {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 100%;
    cursor: pointer;
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1)
}

.openSearch .morphsearch.open .morphsearch-close {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s
}

.morphsearch-close::after,
.morphsearch-close::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 3px;
    opacity: .2;
    background: #1d1d1d;
    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
}

.morphsearch-close:hover.morphsearch-close::after,
.morphsearch-close:hover.morphsearch-close::before {
    opacity: 1
}

.morphsearch-close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.morphsearch-close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.morphsearch-content {
    color: #333;
    margin-top: 4.5em;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding: 0 10.5%;
    background: #fff;
    position: absolute;
    opacity: 0
}

.openSearch .morphsearch.open .morphsearch-content {
    opacity: 1;
    height: auto;
    overflow: visible;
    -webkit-transition: all .3s ease-in-out .5s;
    transition: all .3s ease-in-out .5s
}

.morphsearch-content h2 {
    float: right;
    display: block;
    font-family: DroidKufiBold, Arial;
    font-size: 32px;
    color: #1d1d1d;
    margin-bottom: 24px
}

.morphsearch-content .keywordsDiv {
    display: inline-block;
    width: 100%
}

.morphsearch-content .keywordsDiv .item {
    float: right;
    padding: 4px 30px;
    background: #eee;
    margin: 0 0 24px 24px;
    font-family: DroidKufiLight, Arial;
    font-size: 18px;
    color: #1d1d1d
}

.morphsearch-content .keywordsDiv .item:hover {
    background: #e2e2e2
}

.overflow-hidden.openSearch .openSearch .morphsearch.open {
    width: calc(100% - 320px)
}

@media screen and (max-width:53.125em) {
    .openSearch .morphsearch.open .morphsearch-input {
        font-size: 2em
    }
}

#cd-lateral-nav .masLogo {
    display: inline-block;
    width: 150px;
    height: 44px;
    background: url(http://www.masrawy.com/Images/masrawyLogo.png?ver=2) center center no-repeat;
    background-size: 150px 44px;
    margin: 10px calc((100% - 150px)/ 2) 24px
}

.cd-img-replace {
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap
}

.overflow-hidden {
    overflow: hidden;
    margin-right: 17px;
    width: calc(100% - 17px)
}

.cd-main-content {
    background: #d8d8d8;
    min-height: 100%;
    position: relative;
    z-index: 2;
    width: 100%;
    display: inline-block;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .4s;
    -moz-transition-duration: .4s;
    transition-duration: .4s
}

.cd-main-content.lateral-menu-is-open,
header.lateral-menu-is-open {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

header.is-fixed {
    position: fixed
}

header.lateral-menu-is-open #cd-menu-trigger {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    -ms-transform: translateX(-320px);
    -o-transform: translateX(-320px);
    transform: translateX(-320px);
    visibility: visible;
    -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
    -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
    transition: transform .4s 0s, visibility 0s 0s;
    -webkit-overflow-scrolling: touch
}

#cd-menu-trigger {
    position: relative;
    right: 0;
    top: 0;
    height: 100%;
    width: 60px;
    background-color: #aa120d;
    float: right;
    -webkit-transform: translateZ(0);
    -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
    -moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
    transition: transform .4s 0s, visibility 0s .4s;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

#cd-menu-trigger .cd-menu-icon {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    width: 30px;
    height: 3px;
    background-color: #FFF;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

#cd-menu-trigger .cd-menu-icon::before,
#cd-menu-trigger .cd-menu-icon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0
}

#cd-menu-trigger .cd-menu-icon::before {
    bottom: 8px
}

#cd-menu-trigger .cd-menu-icon::after {
    top: 8px
}

#cd-menu-trigger.is-clicked .cd-menu-icon {
    background-color: rgba(255, 255, 255, 0)
}

#cd-menu-trigger.is-clicked .cd-menu-icon::after,
#cd-menu-trigger.is-clicked .cd-menu-icon::before {
    background-color: #fff
}

#cd-menu-trigger.is-clicked .cd-menu-icon::before {
    bottom: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg)
}

#cd-menu-trigger.is-clicked .cd-menu-icon::after {
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

#cd-lateral-nav {
    position: fixed;
    height: 100%;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 3;
    width: 320px;
    background-color: #1d1d1d;
    -webkit-transform: translateZ(0);
    -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
    -moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
    transition: transform .4s 0s, visibility 0s .4s;
    -webkit-transform: translateX(320px);
    -moz-transform: translateX(320px);
    -ms-transform: translateX(320px);
    -o-transform: translateX(320px);
    transform: translateX(320px)
}

#cd-menu-trigger .notify {
    position: absolute;
    top: 5px;
    left: -10px;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    font-family: Arial;
    font-size: 14px;
    line-height: 1.5
}

#cd-lateral-nav .scroll {
    width: 320px;
    height: 100%;
    overflow-y: scroll;
    margin: 0;
    mix-blend-mode: multiply;
    background: #1d1d1d
}

.scrollContainer {
    width: 320px;
    height: calc(100% - 88px);
    margin: 0;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    background: url(http://www.masrawy.com/Images/scrollBarBg.jpg) left top repeat-y #fff;
    background-size: 17px
}

@supports (-ms-overflow-style:none) {
    .ps-container {
        overflow: auto!important
    }
}

@media screen and (-ms-high-contrast:active),
(-ms-high-contrast:none) {
    .ps-container {
        overflow: auto!important
    }
}

.scrollContainer .scroll {
    width: 310px;
    height: 100%;
    margin: 0 calc((100% - 310px)/ 2)
}

.ps-container.ps-active-y>.ps-scrollbar-x-rail {
    display: none
}

.ps-container.ps-active-y>.ps-scrollbar-y-rail {
    display: block;
    background-color: transparent
}

.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
    background-color: #1d1d1d;
    opacity: .9
}

.ps-container.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
    background-color: #444
}

.ps-container>.ps-scrollbar-y-rail {
    display: none;
    position: absolute;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    -o-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
    right: 3px;
    width: 6px
}

.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
    position: absolute;
    background-color: #444;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background-color .2s linear;
    -moz-transition: background-color .2s linear;
    -o-transition: background-color .2s linear;
    transition: background-color .2s linear;
    right: 0;
    width: 6px
}

.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail {
    background-color: #1d1d1d;
    opacity: .9
}

.ps-container:hover.ps-in-scrolling.ps-y>.ps-scrollbar-y-rail>.ps-scrollbar-y {
    background-color: #444
}

.ps-container:hover>.ps-scrollbar-y-rail {
    opacity: .6
}

.ps-container:hover>.ps-scrollbar-y-rail:hover {
    background-color: #1d1d1d;
    opacity: .9
}

.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
    background-color: #444
}

#show-result #content {
    -moz-transition: opacity .1s;
    -webkit-transition: opacity .1s;
    -o-transition: opacity .1s;
    -ms-transition: opacity .1s;
    transition: opacity .1s;
    opacity: 0
}

#branding,
#branding .changelog-badge,
#content,
#header,
.abuseDetected {
    position: relative;
    height: 100%
}

#cd-lateral-nav .cd-navigation {
    margin: 0 0 24px;
    display: inline-block;
    width: 100%
}

#cd-lateral-nav .sub-menu {
    padding: 0 10px 20px 15px;
    display: none;
    font-family: DroidKufiLight, arial;
    font-size: 14px
}

#cd-lateral-nav a {
    display: block;
    line-height: 3.6em;
    padding: 0 10px;
    color: #fff;
    font-family: DroidKufiLight, Arial;
    font-size: 16px
}

#cd-lateral-nav .sub-menu a {
    line-height: 50px
}

#cd-lateral-nav li .sub-menu li.selected a {
    color: #fff;
    background: 0 0
}

#cd-lateral-nav li:hover .sub-menu a {
    background: 0 0
}

#cd-lateral-nav .item-has-children .sub-menu li a {
    color: #888;
    font-size: 14px
}

#cd-lateral-nav .item-has-children .sub-menu li a:hover {
    color: #fff
}

#cd-lateral-nav.lateral-menu-is-open {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
    -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
    -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
    transition: transform .4s 0s, visibility 0s 0s;
    -webkit-overflow-scrolling: touch
}

#cd-lateral-nav li {
    margin: 0 10px 0 5px
}

#cd-lateral-nav .sub-menu li {
    border-bottom: none;
    margin: 0
}

#cd-lateral-nav li>a {
    position: relative;
    font-family: DroidKufiLight, arial;
    height: 60px;
    font-size: 16px;
    color: #fff;
    overflow: hidden;
    border-bottom: 1px solid #333
}

#cd-lateral-nav li.selected>a,
#cd-lateral-nav li:hover>a {
    background: #333
}

#cd-lateral-nav .item-has-children>.icon-leftArr:after {
    content: "q";
    position: absolute;
    left: 10px;
    top: 16px;
    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-lateral-nav .item-has-children>.icon-leftArr.submenu-open:after {
    transform: rotate(-90deg)
}

#cd-lateral-nav .item-has-children .icon-news:before {
    content: "g";
    float: right;
    margin-left: 8px;
    font-size: 22px;
    line-height: 2.8
}

#cd-lateral-nav .item-has-children .icon-sports:before {
    content: "Z";
    float: right;
    margin-left: 10px;
    font-size: 22px;
    line-height: 2.8
}

#cd-lateral-nav .item-has-children .icon-howa_w_hya:before {
    content: "V";
    float: right;
    margin-left: 10px;
    font-size: 20px;
    line-height: 2.9
}

#cd-lateral-nav .item-has-children .icon-arts:before {
    content: "X";
    float: right;
    margin-left: 9px;
    font-size: 22px;
    line-height: 2.73
}

#cd-lateral-nav .item-has-children .icon-autos:before {
    content: "l";
    float: right;
    margin-left: 10px;
    font-size: 18px;
    line-height: 3.3
}

#cd-lateral-nav .item-has-children .icon-islameyat:before {
    content: "T";
    float: right;
    margin-left: 8px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .icon-economy:before {
    content: "U";
    float: right;
    margin-left: 9px;
    font-size: 20px;
    line-height: 2.95
}

#cd-lateral-nav .icon-reports:before {
    content: "W";
    float: right;
    margin-left: 10px;
    font-size: 20px;
    line-height: 2.95
}

#cd-lateral-nav .icon-media:before {
    content: "j";
    float: right;
    margin-left: 10px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .icon-technology:before {
    content: "0";
    float: right;
    margin-left: 10px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .icon-service:before {
    content: "1";
    float: right;
    margin-left: 10px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .cd-navigation .icon-newspntr:before {
    content: "b";
    float: right;
    margin-left: 8px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .cd-navigation .icon-archive:before {
    content: "c";
    float: right;
    margin-left: 10px;
    font-size: 18px;
    line-height: 3.2
}

#cd-lateral-nav .cd-navigation .icon-prayertms:before {
    content: "e";
    float: right;
    margin-left: 8px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .cd-navigation .icon-weather:before {
    content: "J";
    float: right;
    margin-left: 8px;
    font-size: 20px;
    line-height: 2.6
}

#cd-lateral-nav .cd-navigation .icon-currency:before {
    content: "d";
    float: right;
    margin-left: 8px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .cd-navigation .icon-gold:before {
    content: "2";
    float: right;
    margin-left: 8px;
    font-size: 20px;
    line-height: 2.8
}

#cd-lateral-nav .cd-navigation .icon-ads:before {
    content: "n";
    float: right;
    margin-left: 6px;
    font-size: 22px;
    line-height: 2.6
}

#cd-lateral-nav .cd-navigation .icon-ramadan:before {
    content: "Y";
    float: right;
    margin-left: 6px;
    font-size: 22px;
    line-height: 2.7
}

#cd-lateral-nav .cd-navigation .icon-thanawya:before {
    content: "6";
    float: right;
    margin-left: 6px;
    font-size: 22px;
    line-height: 2.7
}

#cd-lateral-nav .cd-navigation .icon-aqar:before {
    content: "m";
    float: right;
    margin-left: 6px;
    font-size: 22px;
    line-height: 2.7
}

#cd-lateral-nav .linksMenu {
    width: 234px;
    margin: 12px calc((100% - 234px)/ 2) 40px;
    display: none
}

#cd-lateral-nav .linksMenu a {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    float: right;
    margin-left: 20px;
    font-family: DroidKufiLight, arial;
    padding: 0;
    line-height: 1
}

.sponsorBanner p,
.sponsorBtnText {
    text-align: center;
    font-family: DroidKufiBold, Arial
}

#cd-lateral-nav .linksMenu a:last-child {
    margin-left: 0
}

#cd-lateral-nav .linksMenu a:hover {
    color: #888
}

#cd-lateral-nav .socialDiv {
    width: 248px;
    height: 40px;
    margin: 0 calc((100% - 248px)/ 2) 24px;
    display: inline-block
}

#cd-lateral-nav .socialDiv a {
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: 24px;
    color: #fff;
    text-align: center;
    background: #2d2d2d;
    float: right;
    margin-left: 12px;
    border-radius: 50%;
    padding: 0;
    line-height: 0
}

#cd-lateral-nav .socialDiv a:last-child {
    margin-left: 0
}

#cd-lateral-nav .socialDiv a:hover {
    color: #fff
}

#cd-lateral-nav .icon-fb:before {
    content: "u"
}

#cd-lateral-nav .icon-fb:hover {
    background: #3c5899
}

#cd-lateral-nav .icon-tw:before {
    content: "v"
}

#cd-lateral-nav .icon-tw:hover {
    background: #229ff3
}

#cd-lateral-nav .icon-ggl:before {
    content: "w"
}

#cd-lateral-nav .icon-ggl:hover {
    background: #d65142
}

#cd-lateral-nav .icon-yt:before {
    content: "x"
}

#cd-lateral-nav .icon-yt:hover {
    background: #e62117
}

#cd-lateral-nav .icon-rss:before {
    content: "A"
}

#cd-lateral-nav .icon-rss:hover {
    background: #ffaf5c
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: all .4s ease-in-out 0s;
    -webkit-transition: all .4s ease-in-out 0s;
    -moz-transition: all .4s ease-in-out 0s;
    -ms-transition: all .4s ease-in-out 0s;
    -o-transition: all .4s ease-in-out 0s
}

.content,
.content-wrap {
    position: relative;
    background: #f2f2f2;
    display: inline-block
}

.overflow-hidden .overlay {
    visibility: visible;
    opacity: .85
}


.content-wrap {
    top: 0;
    width: calc(100% - 144px);
    margin: 0 60px 0 84px;
    padding: 14px 14px 40px;
    max-width: 1440px;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    z-index: 2
}

.takeover .content-wrap {
    margin: 60px 60px 0 84px
}

.content {
    width: 100%
}

#cd-vertical-nav::before,
.content-wrap::before {
    position: absolute;
    top: 0;
    z-index: 10;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    content: ''
}

.content-wrap::before {
    left: 0;
    visibility: hidden;
    width: 100%;
    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
}

.show-sponsor .content-wrap::before {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

#cd-vertical-nav::before {
    right: 0;
    visibility: hidden;
    width: 36px;
    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
}

.show-sponsor #cd-vertical-nav::before,
.sponsorHome #cd-vertical-nav::before {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.sponsor {
    position: fixed;
    font-weight: 700;
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    width: 100%;
    display: block;
    height: 100%;
    background: #aa120d
}

.sponsor .content,
.sponsor .right {
    display: inline-block;
    height: 100%;
    position: relative
}

.sponsor .content {
    width: 100%;
    margin: 60px 0 0;
    background-size: 100%!important;
    background-repeat: no-repeat!important;
    background-position: center 0!important
}

.sponsor .right {
    width: calc(((100% - 1440px)/ 2) - 12px);
    float: right;
    right: 0;
    top: -60px;
    min-width: 60px
}

.sponsor .middle {
    position: relative;
    float: right;
    width: calc(100% - 144px);
    height: 100%;
    max-width: 1440px;
    max-height: 400px;
    overflow: hidden
}

.sponsor .middle .sponsorContent {
    width: auto;
    height: 100%;
    text-align: center;
    margin-top: 1px
}

.sponsor .middle .sponsorContent a {
    display: block;
    height: 100%
}

.sponsor .middle .sponsorContent img {
    width: 100%;
    height: auto
}

.sponsor .left {
    position: relative;
    width: calc(((100% - 1440px)/ 2) + 12px);
    height: 100%;
    float: right;
    display: inline-block;
    left: 0;
    top: -60px;
    min-width: 84px
}

.currGoldDiv .currGoldTable .currGoldDtls .item:first-child,
.currGoldDiv .currGoldTable .title .name:first-child {
    min-width: 150px
}

.sponsor .sponsorLogoBtn {
    display: block;
    position: absolute;
    margin: 0 12px;
    bottom: 172px;
    left: 0;
    transition: none;
    width: 60px
}

.sponsor .sponsorLogoBtn img {
    width: 100%;
    height: 100%
}

.sponsor img {
    width: auto;
    height: 100%;
    border: none
}

.sponsorBanner {
    position: fixed;
    top: 50px;
    margin-top: 0!important;
    height: 60px;
    z-index: 3;
    transition: 0s;
    width: 100%;
    margin: 60px 0 0;
    display: inline-block;
    max-width: 1584px
}

.sponsorBanner img {
    width: 100%;
    height: auto;
    border: none;
    position: absolute;
    right: 0;
    bottom: 0
}

.show-sponsor,
.sponsorBtnText,
.sponsorClick,
.sponsorHome {
    position: fixed
}

.sponsorBanner p {
    font-size: 18px;
    color: #fff;
    line-height: 3.4
}

.sponsorClick {
    left: 0;
    top: 50px;
    z-index: 1;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: 0 0;
    -webkit-transition: -webkit-transform .3s;
    transition: transform .3s
}

.sponsorBtnText {
    left: 98px;
    top: 70px;
    z-index: 4;
    background: #fff;
    width: 180px;
    height: 40px;
    font-size: 14px;
    color: #1d1d1d;
    -webkit-transition: top .3s;
    -moz-transition: top .3s;
    -ms-transition: top .3s;
    -o-transition: top .3s;
    transition: top .3s
}

.sponsorBtnText:after {
    content: "مشاهدة كل الإعلان";
    line-height: 3
}

.icon-spnsrBottom:before {
    content: "o";
    font-size: 20px;
    float: right;
    margin: 0 5px 0 -5px;
    line-height: 2;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg)
}

.show-sponsor .sponsorBtnText:after,
.sponsorHome .sponsorBtnText:after {
    content: "الرجوع الى مصراوى"
}

.show-sponsor .sponsor {
    margin-right: 9px;
    width: calc(100% - 17px);
    opacity: 1
}

.show-sponsor .cd-main-content {
    background: 0 0
}

.show-sponsor .container {
    margin-right: 8px
}

.show-sponsor.takeover .content-wrap {
    width: calc(100% - 161px);
    margin: 60px 69px 0 92px
}

.show-sponsor .sponsorBanner,
.sponsorHome .sponsor {
    margin-right: 9px;
    width: calc(100% - 17px)
}

.show-sponsor .sponsorBtnText {
    background: #fff;
    color: #1d1d1d
}

.show-sponsor .sponsorBtnText:before {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg)
}

.sponsorHome .sponsor {
    opacity: 1
}

.sponsorHome .cd-main-content {
    background: 0 0
}

.sponsorHome .container {
    margin-right: 8px
}

.sponsorHome.takeover .content-wrap {
    width: calc(100% - 161px);
    margin: 60px 69px 0 92px
}

.sponsorHome .sponsorBtnText:before {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg)
}

.sponsorHome .content-wrap::before {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.sponsorHome .content-wrap {
    top: 340px
}

.sponsorHome .sponsorBanner {
    margin-right: 9px;
    width: calc(100% - 17px);
    top: 50px
}

.sponsorHome .sponsorBtnText {
    background: #fff;
    color: #1d1d1d;
    top: 411px
}

footer {
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 4;
    background: #fff
}

footer .top {
    display: block;
    width: 100%;
    height: 80px;
    background: #222
}

footer .top .cnts {
    width: 618px;
    padding: 20px 0;
    margin: 0 calc((100% - 618px)/ 2);
    display: inline-block
}

footer .top .cnts h2 {
    font-family: DroidKufiLight, arial;
    font-size: 20px;
    color: #fff;
    float: right;
    margin-left: 24px;
    line-height: 2
}

footer .top .cnts .subTxt button,
footer .top .cnts .subTxt input {
    height: 40px;
    font-size: 16px;
    font-family: DroidKufiLight, arial;
    float: right
}

footer .top .cnts .subTxt {
    width: 300px;
    float: right;
    height: 40px;
    display: inline-block
}

footer .top .cnts .subTxt input {
    display: block;
    color: #aaa;
    direction: rtl;
    text-align: right;
    padding: 0 10px;
    width: 200px;
    border: none;
    outline: 0
}

footer .top .cnts .subTxt button {
    background: #aa120d;
    width: 100px;
    color: #fff;
    line-height: .5
}

footer .top .cnts .subTxt button:hover {
    background: #7f0a06
}

footer .middle {
    display: block;
    width: 100%;
    height: auto;
    background: #111
}

footer .middle .navMenu {
    width: calc(100% - 216px);
    padding: 10px 0;
    margin: 12px 108px;
    display: inline-block
}

footer .middle .navMenu ul .has-children {
    float: right;
    width: 132px;
    height: 310px;
    margin-left: calc((100% - 882px)/ 6)
}

footer .middle .navMenu ul .has-children:last-child {
    width: 90px;
    margin-left: 0
}

footer .middle .navMenu ul .has-children a {
    font-family: DroidKufiLight, arial;
    font-size: 14px;
    display: block;
    color: #fff;
    white-space: nowrap
}

footer .middle .navMenu ul .has-children a:hover {
    color: #888
}

footer .middle .navMenu ul .is-hidden a {
    font-family: DroidKufiLight, arial;
    font-size: 12px;
    color: #888
}

footer .middle .navMenu ul .is-hidden a:hover {
    color: #fff
}

footer .middle .socialDiv {
    width: 248px;
    height: 40px;
    margin: 0 calc((100% - 248px)/ 2) 10px;
    display: inline-block
}

footer .middle .socialDiv a {
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: 24px;
    color: #fff;
    text-align: center;
    background: #2d2d2d;
    float: right;
    margin-left: 12px;
    border-radius: 50%
}

footer .middle .socialDiv a:last-child {
    margin-left: 0
}

footer .middle .socialDiv a:hover {
    color: #fff
}

footer .middle .icon-fb:before {
    content: "u"
}

footer .middle .icon-fb:hover {
    background: #3c5899
}

footer .middle .icon-tw:before {
    content: "v"
}

footer .middle .icon-tw:hover {
    background: #229ff3
}

footer .middle .icon-ggl:before {
    content: "w"
}

footer .middle .icon-ggl:hover {
    background: #d65142
}

footer .middle .icon-yt:before {
    content: "x"
}

footer .middle .icon-yt:hover {
    background: #e62117
}

footer .middle .icon-rss:before {
    content: "A"
}

footer .middle .icon-rss:hover {
    background: #ffaf5c
}

footer .middle .linksMenu {
    width: 298px;
    margin: 0 calc((100% - 298px)/ 2);
    display: inline-block
}

footer .middle .linksMenu a {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    float: right;
    margin-left: 36px;
    font-family: DroidKufiLight, arial
}

footer .middle .linksMenu a:last-child {
    margin-left: 0
}

footer .middle .linksMenu a:hover {
    color: #888
}

footer .bottom {
    display: block;
    width: 100%;
    height: 40px;
    background: #000
}

footer .copyright {
    display: inline-block;
    width: 294px;
    margin: 0 calc((100% - 294px)/ 2)
}

footer .copyright p {
    float: right;
    font-family: DroidKufiLight, arial;
    font-size: 12px;
    color: #fff;
    line-height: 1.5;
    margin-left: 10px;
    margin-top: 12px
}

footer .copyright .icon-copy:before {
    content: "B";
    font-size: 14px;
    float: right;
    margin-left: 5px;
    line-height: 1.4
}

footer .copyright .masLogo {
    float: right;
    width: 82px;
    height: 24px;
    background: url(http://www.masrawy.com/Images/masrawyLogo.png?ver=2) center center no-repeat;
    background-size: 82px 24px;
    margin-top: 8px
}

#cd-vertical-nav {
    position: fixed;
    margin-right: -50px;
    bottom: auto;
    z-index: 1;
    background: #f2f2f2;
    padding: 12px 0;
    width: 50px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, .2)
}

#cd-vertical-nav li {
    text-align: right;
    margin: 0 calc((100% - 32px)/ 2) 12px;
    width: 32px
}

#cd-vertical-nav li:last-child {
    margin-bottom: 0
}

.featuredArea ul li,
.mainKeywords {
    margin-bottom: 12px;
    overflow: hidden
}

#cd-vertical-nav a {
    display: inline-block;
    backface-visibility: hidden;
    text-align: center
}

#cd-vertical-nav a:after {
    content: "";
    display: table;
    clear: both
}

#cd-vertical-nav a span,
.mainKeywords h2 {
    display: inline-block
}

#cd-vertical-nav a:hover .cd-label {
    opacity: 1
}

#cd-vertical-nav .cd-dot {
    position: relative;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background-color: #ddd;
    color: #1d1d1d;
    -webkit-transition: -webkit-transform .2s, background-color .2s;
    -moz-transition: -moz-transform .2s, background-color .2s;
    transition: transform .2s, background-color .2s;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

#cd-vertical-nav .icon-news:before {
    content: "g";
    font-size: 24px;
    line-height: 1.4;
    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-vertical-nav .icon-seen:before {
    content: "N";
    font-size: 24px;
    line-height: 1.4;
    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-vertical-nav .icon-ramadan:before {
    content: "Y";
    font-size: 24px;
    line-height: 1.4;
    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-vertical-nav .icon-sports:before {
    content: "Z";
    font-size: 22px;
    line-height: 1.5;
    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-vertical-nav .icon-media:before {
    content: "j";
    font-size: 18px;
    line-height: 1.7;
    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-vertical-nav .icon-economy:before {
    content: "U";
    font-size: 20px;
    line-height: 1.7;
    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-vertical-nav .icon-howa_w_hya:before {
    content: "V";
    font-size: 20px;
    line-height: 1.7;
    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-vertical-nav .icon-arts:before {
    content: "X";
    font-size: 24px;
    line-height: 1.4;
    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-vertical-nav .icon-autos:before {
    content: "l";
    font-size: 20px;
    line-height: 1.5;
    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-vertical-nav .icon-islameyat:before {
    content: "T";
    font-size: 22px;
    line-height: 1.4;
    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-vertical-nav .icon-ads:before {
    content: "n";
    font-size: 24px;
    line-height: 1.4;
    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-vertical-nav .icon-news:hover,
#cd-vertical-nav .icon-seen:hover,
#cd-vertical-nav a.is-selected .icon-news,
#cd-vertical-nav a.is-selected .icon-seen {
    background: #aa120d;
    color: #fff
}

#cd-vertical-nav .icon-ramadan:hover,
#cd-vertical-nav a.is-selected .icon-ramadan {
    background: #c15709;
    color: #fff
}

#cd-vertical-nav .icon-sports:hover,
#cd-vertical-nav a.is-selected .icon-sports {
    background: #006829;
    color: #fff
}

#cd-vertical-nav .icon-media:hover,
#cd-vertical-nav a.is-selected .icon-media {
    background: #1d1d1d;
    color: #fff
}

#cd-vertical-nav .icon-economy:hover,
#cd-vertical-nav a.is-selected .icon-economy {
    background: #aa120d;
    color: #fff
}

#cd-vertical-nav .icon-howa_w_hya:hover,
#cd-vertical-nav a.is-selected .icon-howa_w_hya {
    background: #9224a5;
    color: #fff
}

#cd-vertical-nav .icon-arts:hover,
#cd-vertical-nav a.is-selected .icon-arts {
    background: #c15709;
    color: #fff
}

#cd-vertical-nav .icon-autos:hover,
#cd-vertical-nav a.is-selected .icon-autos {
    background: #1877b6;
    color: #fff
}

#cd-vertical-nav .icon-islameyat:hover,
#cd-vertical-nav a.is-selected .icon-islameyat {
    background: #119e9e;
    color: #fff
}

#cd-vertical-nav .icon-ads:hover {
    background: #3c14c1;
    color: #fff
}

.mainKeywords {
    height: 36px;
    background: #f2f2f2;
    border-bottom: 1px solid #ddd;
    box-shadow: none
}

.mainKeywords h2 {
    float: right;
    font-family: DroidKufiBold, Arial;
    font-size: 14px;
    color: #1d1d1d;
    width: 160px;
    height: 36px;
    text-align: center;
    line-height: 2.8;
    background: #ddd
}

.akhbarThemak .ttl h2,
.featuredArea .desc p,
.featuredArea ul li .secName,
.mainKeywords .keywords a {
    font-family: DroidKufiLight, Arial
}

.mainKeywords .keywords {
    float: right;
    display: inline-block;
    width: calc(100% - 160px)
}

.mainKeywords .keywords a {
    float: right;
    padding: 5px 20px;
    color: #1d1d1d;
    font-size: 14px;
    background: #f2f2f2
}

.mainKeywords .keywords a:hover {
    background: #e8e8e8
}

.featuredArea {
    padding: 12px;
    margin-left: 12px;
    width: calc(100% - 312px);
    float: right
}

.featuredArea ul li {
    float: right;
    margin-left: 12px;
    width: calc((100% - 24.1px)/ 3);
    height: auto;
    position: relative;
    border: 1px solid #ddd
}

.featuredArea ul li a {
    display: block
}

.featuredArea ul li .secName {
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    background: #aa120d;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1
}

.featuredArea ul li:first-child .secName {
    font-size: 18px
}

.featuredArea ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.featuredArea .desc,
.featuredArea .desc p,
.featuredArea ul li a img {
    position: absolute;
    right: 0;
    bottom: 0
}

.featuredArea ul li:first-child a .imageCntnr {
    padding-bottom: calc(75% + 4px)
}

.featuredArea ul li a img {
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: none;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.featuredArea ul li:first-child {
    width: calc(100% - ((100% + 12px)/ 3))
}

.featuredArea ul li:last-child,
.featuredArea ul li:nth-child(2),
.featuredArea ul li:nth-child(3) {
    margin-left: 0
}

.featuredArea ul li:last-child,
.featuredArea ul li:nth-child(4),
.featuredArea ul li:nth-child(5) {
    margin-bottom: 0
}

.featuredArea ul li:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.featuredArea .desc {
    width: 100%;
    height: 50%;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.featuredArea .desc p {
    color: #fff;
    text-align: right;
    line-height: 1.6;
    padding: 12px;
    font-size: 16px
}

.featuredArea ul li:first-child .desc p {
    font-size: 24px;
    line-height: 1.8
}

.akhbarThemak {
    float: right;
    width: 300px;
    height: 384px;
    box-shadow: none;
    background: #1d1d1d;
    overflow: hidden;
    position: relative
}

.akhbarThemak .ttl {
    display: block;
    width: 100%;
    height: 48px;
    overflow: hidden;
    border-bottom: none!important
}

.akhbarThemak .ttl h2 {
    float: right;
    padding: 4px 12px;
    font-size: 20px;
    color: #fff;
    display: block;
    line-height: inherit
}

.akhbarThemak .ttl h2:after {
    display: none
}

.akhbarThemak .ttl h2 a {
    color: #fff
}

.akhbarThemak .ttl .icons {
    display: inline-block;
    float: left
}

.akhbarThemak .ttl .icons .cd-popup-notify,
.akhbarThemak .ttl .icons .cd-popup-setting {
    display: inline-block;
    float: right
}

.akhbarThemak .ttl .icons .cd-popup-notify {
    margin: 0 16px 0 12px
}

.akhbarThemak .ttl .icons .icon-setting:before {
    content: "p";
    color: #fff;
    font-size: 22px;
    line-height: 2.2
}

.akhbarThemak .ttl .icons .icon-notify:before {
    content: "M";
    color: #fff;
    font-size: 18px;
    line-height: 2.8
}

.akhbarThemak .popupNotify,
.akhbarThemak .popupSetting {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .95);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s
}

.akhbarThemak .popupNotify.is-visible,
.akhbarThemak .popupSetting.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 10;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s
}

.akhbarThemak .cd-popup-container {
    position: relative;
    padding: 24px;
    width: 1000px;
    height: 430px;
    margin: 120px auto;
    background: #FFF;
    text-align: center;
    box-shadow: 0 0 20px rgba(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: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .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
}

.akhbarThemak .cd-popup-container h2:after {
    display: none
}

.akhbarThemak .cd-popup-container h4 {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #888;
    margin-bottom: 12px;
    padding: 0;
    text-align: right
}

.akhbarThemak .cd-popup-container .sec {
    display: inline-block;
    width: calc((100% - 60px)/ 6);
    float: right;
    margin-left: 12px
}

.akhbarThemak .cd-popup-container .sec:nth-child(6n+1) {
    margin-left: 0
}

.akhbarThemak .cd-popup-container h3 {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    margin-bottom: 12px;
    padding-right: 12px;
    background: #eee
}

.akhbarThemak .cd-popup-container .cd-buttons {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 60px
}

.akhbarThemak .cd-popup-container .cd-buttons a {
    position: relative;
    top: 0;
    left: 0;
    float: right;
    background: #ddd;
    width: calc(100% / 2);
    height: 60px;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: center;
    display: block;
    line-height: 3.5
}

.akhbarThemak .cd-popup-container .cd-buttons a:after,
.akhbarThemak .cd-popup-container .cd-buttons a:before {
    display: none
}

.akhbarThemak .cd-popup-container .cd-buttons a:first-child {
    background: #1d1d1d;
    color: #fff
}

.akhbarThemak .cd-popup-container .cd-buttons a:hover {
    background: #ccc
}

.akhbarThemak .cd-popup-container .cd-buttons a:first-child:hover {
    background: #aa120d
}

.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: 769px;
    height: 200px
}

.akhbarThemak .cd-popup-container.notify p {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 18px;
    color: #1d1d1d;
    margin-bottom: 24px;
    padding: 0
}

.akhbarThemak .cd-popup-container .cd-popup-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px
}

.akhbarThemak .cd-popup-container .cd-popup-close::after,
.akhbarThemak .cd-popup-container .cd-popup-close::before {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #1d1d1d;
    opacity: .2;
    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
}

.akhbarThemak .cd-popup-container .cd-popup-close:hover::after,
.akhbarThemak .cd-popup-container .cd-popup-close:hover::before {
    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)
}

.akhbarThemak .is-visible .cd-popup-container,
article .pagination ul li.nextPrev .icon-prev:before {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0)
}

.akhbarThemak .is-visible .cd-popup-container {
    transform: translateY(0)
}

.akhbarThemak li {
    width: 100%;
    display: block;
    padding: 12px;
    height: 84px;
    position: relative
}

.akhbarThemak li:nth-child(odd) {
    background: #363636
}

.akhbarThemak li:nth-child(even) {
    background: #2a2a2a
}

.akhbarThemak li:hover {
    background: #444
}

.akhbarThemak ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: calc((80px * 75)/ 100);
    float: right;
    width: 80px;
    margin-left: 12px
}

.akhbarThemak li img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    float: right;
    width: 100%;
    height: 100%;
    max-width: 80px;
    border: 1px solid #555
}

.akhbarThemak li p {
    float: right;
    width: calc(100% - 92px);
    font-family: DroidKufiLight, Arial;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    margin-top: -2px;
    height: 40px;
    overflow: hidden
}

.akhbarThemak li .secName:before,
.ttl h2:after {
    content: "";
    float: right;
    margin-top: 4px;
    background: #aa120d
}

.akhbarThemak li .secName {
    position: absolute;
    right: 104px;
    bottom: 6px;
    font-family: DroidKufiLight, Arial;
    color: #aaa;
    font-size: 12px
}

.ttl .more,
.ttl h2 {
    color: #1d1d1d;
    display: block
}

.akhbarThemak li .secName:before {
    margin-left: 5px;
    width: 4px;
    height: 12px
}

.akhbarThemak.fixed {
    position: fixed
}

.ttl {
    display: block;
    width: 100%;
    height: 46px;
    overflow: hidden;
    border-bottom: 1px solid #aa120d
}

.ttl h2 {
    float: right;
    padding: 0;
    font-family: DroidKufiBold, Arial;
    font-size: 24px;
    line-height: 1.4
}

.opinions,
.pattern01 {
    padding: 12px
}

.opinions .allItems li .desc p,
.pattern01 ul li .desc p,
.pattern01 ul li .secName,
.ttl .more {
    font-family: DroidKufiLight, Arial
}

.ttl h2:after {
    width: 4px;
    height: 24px;
    margin-left: 12px
}

.ttl .more {
    float: left;
    font-size: 18px
}

.ttl .icon-more:before {
    content: "q";
    font-size: 18px;
    float: left;
    margin-right: 5px;
    line-height: 2
}

.ttl .more:hover {
    color: #888
}

.pattern01 .allItems {
    display: inline-block;
    width: 100%;
    padding: 24px 0
}

.pattern01 ul li {
    float: right;
    margin-left: 24px;
    margin-bottom: 24px;
    padding-bottom: 5px;
    width: calc((100% - 96px)/ 5);
    height: auto;
    position: relative;
    overflow: hidden
}

.pattern01 ul li a {
    display: block
}

.pattern01 ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.pattern01 ul li .item img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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 .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.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
}

.pattern01 ul li .desc p {
    color: #1d1d1d;
    height: 84px;
    cursor: pointer;
    margin-bottom: 5px;
    overflow: hidden;
    text-align: right;
    line-height: 1.6;
    padding: 10px 0;
    font-size: 15px;
    transition: all .2s ease-in-out 0s;
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s
}

.pattern01 ul li .item:hover .desc p {
    color: #888
}

.pattern01 ul li .secName {
    font-size: 14px;
    color: #888;
    display: inline-block
}

.pattern01 ul li .secName:after {
    content: "";
    width: 4px;
    height: 14px;
    background: #aa120d;
    float: right;
    margin-left: 5px;
    margin-top: 6px
}

.pattern01 ul li .secName:hover {
    color: #1d1d1d
}

.pattern01 ul li.icon-image,
.pattern01 ul li.icon-video {
    background: #1d1d1d
}

.pattern01 ul li.icon-image .desc p,
.pattern01 ul li.icon-video .desc p {
    color: #fff;
    padding: 10px
}

.pattern01 ul li.icon-image .item:hover .desc p,
.pattern01 ul li.icon-video .item:hover .desc p {
    color: #aaa
}

.pattern01 ul li.icon-image .secName,
.pattern01 ul li.icon-video .secName {
    margin-right: 10px;
    color: #bbb
}

.pattern01 ul li.icon-image .secName:hover,
.pattern01 ul li.icon-video .secName:hover {
    color: #888
}

.pattern01 ul li.icon-image:before,
.pattern01 ul li.icon-video:before {
    color: #fff;
    font-size: 30px;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    top: 1px;
    left: 1px;
    width: 41px;
    height: 40px;
    line-height: 1.35;
    pointer-events: none;
    z-index: 1
}

.pattern01 ul li.icon-video:before {
    content: "s"
}

.pattern01 ul li.icon-image:before {
    content: "t"
}

.opinions {
    height: 266px;
    width: calc(100% - 696px);
    float: right;
    margin-left: 48px
}

.opinions .allItems {
    display: inline-block;
    width: 100%;
    padding: 12px 0 0
}

.opinions .allItems li {
    width: 100%;
    margin-bottom: 24px;
    display: inline-block;
    position: relative;
    float: right
}

.opinions .allItems li:after {
    content: "";
    position: absolute;
    bottom: -12px;
    right: 0;
    width: 100%;
    height: 1px;
    background: #ddd
}

.opinions .allItems li:last-child:after {
    display: none
}

.opinions ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: calc((60px * 75)/ 100);
    float: right;
    width: 60px
}

.opinions .allItems li img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    float: right;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.opinions .allItems li .desc {
    float: right;
    width: calc(100% - 60px);
    padding-right: 12px
}

.opinions .allItems li .desc p {
    font-size: 14px;
    color: #1d1d1d;
    line-height: 1.5;
    height: 22px;
    overflow: hidden
}

.opinions .allItems li .date,
.opinions .allItems li .writer {
    bottom: -4px;
    font-size: 12px;
    display: inline-block;
    font-family: DroidKufiLight, Arial
}

.opinions .allItems li .writer {
    position: absolute;
    right: 72px;
    color: #888
}

.pattern02 .desc,
.pattern02 .desc p,
.pattern02 ul li a img {
    right: 0;
    bottom: 0;
    position: absolute
}

.opinions .allItems li .date {
    position: absolute;
    left: 0;
    color: #888;
    cursor: default
}

.mobawaba .desc,
.pattern02 .desc,
.specialFiles .desc {
    cursor: pointer;
    overflow: hidden
}

.opinions .allItems li .icon-date:before {
    content: "c";
    float: right;
    margin-left: 5px
}

.opinions .allItems li .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.opinions .allItems li .item:hover .desc p {
    color: #888
}

.opinions .allItems li .writer:hover {
    color: #1d1d1d
}

.entrypoints {
    background: 0 0;
    box-shadow: none;
    width: 300px;
    height: 266px;
    margin-left: 48px
}

.entrypoints .bx-wrapper:first-child {
    margin-bottom: 24px!important
}

.entrypoints ul {
    display: inline-block;
    width: 300px!important;
    height: 121px!important;
    margin-bottom: 24px;
    overflow: hidden;
    float: right
}

.entrypoints ul:last-child {
    margin-bottom: 0
}

.entrypoints ul li {
    display: inline-block;
    width: 100%;
    transition: none
}

.entrypoints ul li img {
    width: 300px;
    height: 121px
}

.pattern02 {
    padding: 12px
}

.pattern02 .allItems {
    display: inline-block;
    width: 100%;
    padding: 24px 0 0
}

.pattern02 ul li {
    float: right;
    margin-left: 24px;
    margin-bottom: 24px;
    width: calc((50% - 72.1px)/ 3);
    height: auto;
    position: relative;
    overflow: hidden
}

.pattern02 ul li a {
    display: block
}

.pattern02 ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.pattern02 ul li:first-child a .imageCntnr {
    padding-bottom: calc(75% + 5px)
}

.pattern02 ul li a img {
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.pattern02 ul li:first-child {
    width: 50%
}

.pattern02 ul li:nth-child(2),
.pattern02 ul li:nth-child(3) {
    width: calc((50% - 48px)/ 2)
}

.pattern02 ul li:last-child,
.pattern02 ul li:nth-child(3) {
    margin-left: 0
}

.pattern02 ul li:first-child,
.pattern02 ul li:last-child,
.pattern02 ul li:nth-child(4),
.pattern02 ul li:nth-child(5) {
    margin-bottom: 0
}

.pattern02 ul li .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.pattern02 .desc {
    width: 100%;
    height: 50%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.pattern02 .desc p {
    color: #fff;
    text-align: right;
    line-height: 1.6;
    padding: 12px;
    font-size: 16px;
    font-family: DroidKufiLight, Arial
}

.pattern02 ul li:first-child .desc p {
    font-size: 20px;
    line-height: 1.6
}

.pattern02 ul li .secName {
    padding: 0 10px;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #fff;
    background: #aa120d;
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 1
}

.pattern02 ul li:first-child .secName {
    font-size: 18px
}

.pattern02 ul li:nth-last-child(-n+3) .desc {
    position: relative;
    background: 0 0
}

.pattern02 ul li:nth-last-child(-n+3) .desc p {
    position: relative;
    color: #1d1d1d;
    font-size: 14px;
    line-height: 1.4;
    padding: 5px 0;
    height: 62px;
    overflow: hidden
}

.pattern02 ul li:nth-last-child(-n+3) .secName {
    position: relative;
    background: 0 0!important;
    padding: 0;
    color: #888;
    top: auto;
    bottom: -2px;
    right: 0;
    display: inline-block
}

.pattern02 ul li:nth-last-child(-n+3) .secName:after {
    content: "";
    width: 4px;
    height: 14px;
    background: #aa120d;
    float: right;
    margin-left: 5px;
    margin-top: 6px
}

.media ul li.icon-video:before,
.pattern02 ul li.icon-video:before {
    content: "s"
}

.pattern02 ul li:nth-last-child(-n+3) .item:hover .desc p {
    color: #888
}

.pattern02 ul li:nth-last-child(-n+3) .secName:hover {
    color: #1d1d1d
}

.pattern02 ul li:nth-last-child(-n+3).icon-image,
.pattern02 ul li:nth-last-child(-n+3).icon-video {
    background: #1d1d1d
}

.pattern02 ul li:nth-last-child(-n+3).icon-image .desc p,
.pattern02 ul li:nth-last-child(-n+3).icon-video .desc p {
    color: #fff;
    padding: 5px
}

.pattern02 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
.pattern02 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
    color: #aaa
}

.pattern02 ul li:nth-last-child(-n+3).icon-image .secName,
.pattern02 ul li:nth-last-child(-n+3).icon-video .secName {
    margin-right: 5px;
    color: #bbb
}

.pattern02 ul li:nth-last-child(-n+3).icon-image .secName:hover,
.pattern02 ul li:nth-last-child(-n+3).icon-video .secName:hover {
    color: #888
}

.pattern02 ul li.icon-image:before,
.pattern02 ul li.icon-video:before {
    color: #fff;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    pointer-events: none
}

.pattern02 ul li.icon-video:before {
    font-size: 30px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.pattern02 ul li:first-child.icon-video:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25
}

.pattern02 ul li.icon-image:before {
    content: "t";
    font-size: 30px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.pattern02 ul li:first-child.icon-image:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25
}

.mostRead {
    padding: 12px;
    height: 616px;
    width: calc(100% - 696px);
    float: right;
    margin-left: 48px
}

.mostRead .allItems {
    display: inline-block;
    width: 100%;
    padding: 12px 0 0
}

.mostRead .allItems li {
    width: 100%;
    margin-bottom: 24px;
    display: inline-block;
    position: relative;
    float: right
}

.mostRead .allItems li:after {
    content: "";
    position: absolute;
    bottom: -12px;
    right: 0;
    width: 100%;
    height: 1px;
    background: #ddd
}

.mostRead .allItems li:last-child:after {
    display: none
}

.mostRead ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: calc((116px * 75)/ 100);
    float: right;
    width: 116px
}

.mostRead .allItems li img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    float: right;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.mostRead .allItems li .desc {
    float: right;
    width: calc(100% - 116px);
    padding-right: 12px
}

.mostRead .allItems li .desc p {
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d;
    line-height: 1.5;
    height: 62px;
    overflow: hidden
}

.mostRead .allItems li .secName {
    position: absolute;
    right: 128px;
    bottom: -7px;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #888;
    display: inline-block
}

.mostRead .allItems li .secName:after {
    content: "";
    width: 4px;
    height: 14px;
    background: #aa120d;
    float: right;
    margin-left: 5px;
    margin-top: 6px
}

.mostRead .allItems li .number {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 30px;
    height: 30px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #aa120d;
    color: #fff;
    font-family: Arial;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    line-height: 1.25;
    pointer-events: none;
    z-index: 1
}

.mostRead .allItems li .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.mostRead .allItems li .item:hover .desc p {
    color: #888
}

.mostRead .allItems li .secName:hover {
    color: #1d1d1d
}

.specialFiles {
    padding: 0;
    width: 300px;
    height: 225px;
    margin-bottom: 24px;
    direction: ltr;
    overflow: hidden
}

.specialFiles ul li {
    position: relative;
    overflow: hidden
}

.specialFiles ul li a {
    display: block
}

.specialFiles ul li a img {
    width: 100%;
    height: auto;
    max-height: 225px;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.specialFiles ul li:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.specialFiles .desc {
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.specialFiles .desc p {
    color: #fff;
    text-align: center;
    line-height: 1.6;
    padding: 12px;
    font-size: 20px;
    font-family: DroidKufiLight, Arial;
    position: absolute;
    bottom: 20px;
    right: 0;
    height: 80px;
    overflow: hidden
}

.specialFiles .name {
    width: 150px;
    height: 70px;
    background: #aa120d;
    border-bottom: 5px solid #fff;
    position: absolute;
    left: -52px;
    top: -8px;
    z-index: 999;
    pointer-events: none;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg)
}

.specialFiles .name h2 {
    padding: 0;
    font-family: DroidKufiBold, arial;
    color: #fff;
    font-size: 20px;
    display: block;
    line-height: 4;
    text-align: center
}

.bx-wrapper {
    width: 100%;
    height: auto;
    position: relative
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
    border: none
}

.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
    position: absolute;
    bottom: 0;
    width: 100%
}

.bx-wrapper .bx-controls-direction a {
    top: 50%;
    margin-top: -39px;
    outline: 0;
    display: block;
    position: absolute;
    color: #fff;
    opacity: .7
}

.bx-wrapper .bx-controls-direction a:hover {
    opacity: 1
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none
}

.bx-wrapper .bx-controls-direction a:before {
    font-size: 46px
}

.bx-wrapper .bx-next {
    right: 0
}

.bx-wrapper .bx-next:before {
    content: "r"
}

.bx-wrapper .bx-prev {
    left: 0
}

.bx-wrapper .bx-prev:before {
    content: "q"
}

.bx-wrapper .bx-pager {
    text-align: center
}

.bx-wrapper .bx-pager-item {
    margin-right: 3px
}

.bx-wrapper .bx-pager-item:last-child {
    margin-right: 0
}

.bx-wrapper .bx-controls-auto .bx-controls-auto-item,
.bx-wrapper .bx-pager .bx-pager-item {
    display: inline-block;
    position: relative
}

.bx-wrapper .bx-pager a {
    background: 0 0;
    text-indent: -9999px;
    display: block;
    width: 12px;
    height: 12px;
    outline: 0;
    border: 1px solid #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.bx-wrapper .bx-pager a.active,
.bx-wrapper .bx-pager a:hover {
    background: #fff
}

.mobawaba {
    padding: 12px;
    background: #0683a4;
    width: 300px;
    height: 367px
}

.mobawaba .border {
    border: 1px solid #5daebf;
    height: 343px
}

.mobawaba .ttl {
    padding: 0 8px;
    height: 49px;
    border-bottom: 1px solid #5daebf!important
}

.mobawaba .ttl h2 a {
    background: url(http://www.masrawy.com/Images/mobawabaLogo.png) right 0 no-repeat;
    height: 33px;
    line-height: 4.4;
    padding: 10px 80px 5px 0;
    color: #fff;
    font-size: 14px;
    font-family: DroidKufiLight, arial
}

.mobawaba .ttl h2:after {
    display: none
}

.mobawaba .allItems {
    padding: 8px;
    border-bottom: 1px solid #5daebf
}

.mobawaba ul li {
    position: relative
}

.mobawaba .desc,
.mobawaba .desc p,
.mobawaba .footer {
    position: absolute;
    right: 0
}

.mobawaba ul li a {
    display: block
}

.mobawaba ul li a img {
    width: 100%;
    height: auto;
    border: none;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.mobawaba ul li:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.mobawaba .desc {
    width: 100%;
    height: 50%;
    bottom: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.mobawaba .desc p {
    color: #fff;
    text-align: center;
    line-height: 1.6;
    padding: 12px;
    font-size: 18px;
    font-family: DroidKufiLight, Arial;
    bottom: 0;
    height: 80px;
    overflow: hidden
}

.mobawaba .footer {
    width: 100%;
    height: 65px;
    background: #01313d;
    padding: 8px;
    bottom: -82px;
    cursor: default
}

.mobawaba .footer .price {
    float: right;
    font-family: Arial;
    font-weight: 700;
    font-size: 22px;
    color: #fff;
    line-height: 2.2;
    cursor: default
}

.mobawaba .footer .price span {
    margin-right: 5px;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    font-weight: 400
}

.mobawaba .footer .add {
    float: left;
    height: 49px;
    padding: 0 8px;
    font-family: DroidKufiLight, Arial;
    font-size: 15px;
    color: #fff;
    background: #0683a4;
    line-height: 3.4
}

.mobawaba .footer .add:hover {
    background: #08708a
}

.tabs-nav {
    list-style: none;
    margin: 0;
    font-family: DroidKufiLight, arial
}

.tabs-nav:after {
    display: block;
    clear: both;
    content: " "
}

.tabs-nav>li {
    position: relative;
    float: right;
    font-size: 12px
}

.tabs-nav>li>a {
    display: block;
    color: #8a8a8a;
    position: relative;
    text-align: center;
    height: 26px;
    line-height: 2;
    white-space: nowrap;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out
}

.tabs-nav .tabs-selected>a {
    font-size: 12px;
    line-height: 1.5;
    background-color: #168039;
    color: #fff
}

.tabs-nav>li:active>a,
.tabs-nav>li:focus>a,
.tabs-nav>li:hover>a,
.tabs-nav>li>a:active,
.tabs-nav>li>a:focus,
.tabs-nav>li>a:hover {
    background-color: #168039;
    color: #fff;
    outline: 0
}

.tabs-nav .tabs-disabled a:link,
.tabs-nav .tabs-disabled a:visited,
.tabs-nav .tabs-selected>a:link,
.tabs-nav .tabs-selected>a:visited {
    cursor: text
}

.media .desc,
.tabs-nav>li>a:active,
.tabs-nav>li>a:focus,
.tabs-nav>li>a:hover {
    cursor: pointer
}

.tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) 0 50% no-repeat
}

.matchesTabs,
.sportsContainer {
    background: 0 0;
    box-shadow: none
}

.tabs-hide {
    display: none
}

.sportsContainer {
    margin-bottom: 0
}

.matchesTable {
    padding: 10px 15px;
    min-height: 142px;
    display: inline-block;
    width: 270px
}

.matchesTable .tabs-container .slide .noMatches {
    text-align: center;
    font-family: DroidKufiLight, arial;
    font-size: 14px;
    padding-top: 0;
    line-height: 8
}

.allMatches .tabs-nav li {
    width: 80px;
    height: 30px;
    margin-left: 2px
}

.allMatches .tabs-nav li>a {
    height: 30px;
    line-height: 2.4;
    border: 0;
    box-shadow: none;
    font-size: 14px;
    background-color: #ddd;
    color: #1d1d1d
}

.allMatches .tabs-nav .tabs-selected>a {
    background-color: #fff;
    color: #1d1d1d
}

.allMatches .tabs-nav>li>a {
    border-right: none;
    box-shadow: none
}

.allMatches #tab-content {
    border: 1px solid #d7d7d7;
    background-color: #eee;
    height: 100%;
    margin: 0;
    clear: both;
    padding: 0;
    display: block
}

.allMatches #tab-01,
.allMatches #tab-02,
.allMatches #tab-03 {
    width: 100%
}

.allMatches .tabs-container .slide p {
    text-align: center;
    font-family: DroidKufiLight, Arial;
    font-size: 13px;
    padding-top: 10px;
    color: #fff
}

.allMatches .tabs-container {
    overflow: auto;
    direction: rtl
}

.allMatches .slide {
    background: #fff;
    display: inline-block;
    width: 100%;
    height: 182px;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    float: right
}

.allMatches .item {
    color: #1d1d1d;
    font-size: 12px;
    text-align: center;
    padding: 18px;
    position: relative;
    width: calc((100% /3) - .1px);
    float: right;
    white-space: normal
}

.allMatches .item:after {
    content: "";
    position: absolute;
    top: 74px;
    left: -1px;
    height: 86px;
    width: 1px;
    background: #ddd
}

.allMatches .item:nth-child(3n):after {
    display: none
}

.allMatches .item .tourName {
    font-size: 16px;
    font-family: DroidKufiLight, arial;
    color: #1d1d1d;
    padding-bottom: 5px;
    margin-bottom: 18px;
    text-align: center;
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid #006829
}

.allMatches .item .teamA {
    float: right;
    width: 110px;
    height: 90px
}

.allMatches .item .teamA img,
.allMatches .item .teamB img {
    height: 60px;
    width: auto;
    border: none
}

.allMatches .item .teamA p,
.allMatches .item .teamB p {
    display: block;
    margin: 0;
    padding-top: 5px;
    color: #1d1d1d;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    line-height: 1.4
}

.allMatches .item .result {
    float: right;
    width: calc(100% - 220px);
    padding-top: 0;
    font-size: 42px
}

.allMatches .item .result.yesterday {
    padding-top: 12px;
    font-family: arial
}

.allMatches .item .teamB {
    float: right;
    width: 110px;
    height: 90px
}

.allMatches .item .result span {
    color: #1d1d1d;
    font-size: 18px!important;
    text-align: center
}

.allMatches .item .status a {
    background: #aaa;
    color: #fff;
    font-size: 12px;
    display: block
}

.allMatches .status {
    position: relative;
    margin: 0 auto;
    width: 100%;
    font-family: arial
}

.allMatches .status span {
    background: 0 0;
    color: #1d1d1d!important;
    line-height: 1;
    display: block;
    margin-top: 19px
}

.allMatches .item .result span.now {
    width: 60px;
    height: 20px;
    background: #006829;
    color: #fff!important;
    text-align: center;
    font-family: DroidKufiLight, arial;
    font-size: 12px!important;
    line-height: 1.8;
    margin: 18px auto 0!important;
    border-radius: 0!important
}

.allMatches .matchResult {
    font-family: Arial;
    font-size: 42px;
    line-height: .9;
    margin-top: 10px
}

.matchesTabs .more {
    color: #fff;
    width: 100%;
    height: 36px;
    font-size: 16px;
    text-align: center;
    background: #006829;
    display: block;
    font-family: DroidKufiLight, arial;
    padding: 3px 0;
    line-height: 2;
    transition: background-color .4s ease 0s
}

.masrawyServices li .item,
.masrawyServices ul {
    display: inline-block
}

.masrawyServices li img,
.media ul li a img {
    transition: all .2s ease-in-out 0s;
    filter: brightness(100%) contrast(100%)
}

.matchesTabs .more:hover {
    background-color: #005220
}

.matchesTabs .slide .noMatches {
    font-size: 20px!important;
    padding-top: 56px!important;
    width: 100%;
    color: #1d1d1d!important;
    line-height: 3.5
}

.masrawyServices {
    padding: 12px;
    border-bottom: 4px solid #df182b
}

.masrawyServices .ttl {
    border-bottom: 1px solid #df182b
}

.masrawyServices .ttl h2:after {
    background: #df182b
}

.masrawyServices .allItems {
    overflow: auto;
    direction: rtl;
    padding: 24px 0 0
}

.masrawyServices ul {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    float: right
}

.masrawyServices li {
    width: calc((100% - 48.1px)/ 3);
    position: relative;
    float: right;
    margin-left: 24px;
    white-space: normal
}

.masrawyServices li:last-child {
    margin-left: 0
}

.masrawyServices li img {
    width: 100%;
    height: auto;
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    -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
}

.masrawyServices ul li:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.masrawyServices li .more {
    width: 150px;
    height: 40px;
    display: none;
    margin: 12px calc((100% - 150px)/ 2);
    background: #fc0;
    font-family: DroidKufiBold, Arial;
    color: #1d1d1d;
    font-size: 18px;
    text-align: center;
    line-height: 2.2
}

.caricature li a .item,
.caricature li p,
.media .allItems,
.media ul li {
    display: inline-block
}

.caricature li p,
.media .desc p,
.media ul li .secName {
    font-family: DroidKufiLight, Arial
}

.masrawyServices li .more:hover {
    background: #eebe00
}

.media {
    padding: 12px;
    background: #1d1d1d
}

.media .ttl {
    border-bottom: none!important
}

.media .ttl h2,
.media .ttl h2 a {
    color: #fff!important
}

.media .ttl h2:after {
    background: #fff!important
}

.media .ttl .icon-more:before,
.media .ttl .more {
    color: #fff
}

.media .allItems {
    width: 100%;
    padding: 5px 0 0
}

.media ul li {
    position: relative;
    width: calc((100% - 72px)/ 4);
    margin-left: 24px;
    float: right;
    margin-bottom: 24px;
    border: 1px solid #333
}

.media ul li:first-child,
.media ul li:nth-child(4) {
    width: calc((100% - 24px)/ 2)
}

.media ul li:nth-child(3),
.media ul li:nth-child(4) {
    margin-left: 0
}

.media ul li:nth-child(4) {
    float: left
}

.media ul li:nth-last-child(-n+3) {
    margin-bottom: 0
}

.media ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.media .desc,
.media .desc p,
.media ul li .secName,
.media ul li a img {
    position: absolute;
    right: 0
}

.media ul li a img {
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: none;
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    -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
}

.media ul li:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.media .desc {
    width: 100%;
    height: 50%;
    overflow: hidden;
    bottom: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.media .desc p {
    color: #fff;
    text-align: right;
    line-height: 1.6;
    padding: 12px;
    font-size: 16px;
    bottom: 0
}

.media ul li .secName {
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    background: #aa120d;
    top: 0;
    z-index: 1
}

.media ul li:first-child .desc p,
.media ul li:nth-child(4) .desc p {
    font-size: 24px;
    line-height: 1.8
}

.media ul li:first-child .secName,
.media ul li:nth-child(4) .secName {
    font-size: 18px
}

.media ul li.icon-image:before,
.media ul li.icon-video:before {
    color: #fff;
    font-size: 30px;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    width: 41px;
    height: 40px;
    line-height: 1.35;
    z-index: 1;
    left: 0;
    top: 0;
    pointer-events: none
}

.media ul li.icon-image:before {
    content: "t"
}

.media ul li:first-child.icon-image:before,
.media ul li:first-child.icon-video:before,
.media ul li:nth-child(4).icon-image:before,
.media ul li:nth-child(4).icon-video:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25
}

.caricature {
    padding: 12px;
    width: 100%;
    margin-left: 0
}

.caricature .ttl {
    border-bottom: 1px solid #ccc269
}

.caricature .ttl h2:after {
    background: #ccc269
}

.caricature .allItems {
    padding: 24px 0 0
}

.caricature li {
    width: calc((100% - 96px)/ 5);
    position: relative;
    float: right;
    margin-left: 24px
}

.caricature li:last-child {
    margin-left: 0
}

.caricature li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.caricature li a .imageCntnr img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    filter: brightness(100%) contrast(100%);
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.caricature ul li:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.caricature li p {
    width: 100%;
    height: 40px;
    color: #1d1d1d;
    font-size: 14px;
    text-align: right;
    line-height: 1.6;
    margin-top: 5px
}

.caricature li:hover p {
    color: #888
}

.poll {
    padding: 12px;
    width: calc(100% - 696px);
    height: 266px;
    position: relative
}

.poll .allItems,
.poll .allItems h2 {
    width: 100%;
    display: inline-block
}

.poll .allItems h2 {
    background: #eee;
    padding: 5px 12px;
    text-align: right;
    font-family: DroidKufiBold, Arial;
    font-size: 14px;
    color: #1d1d1d;
    margin: 12px 0
}

.poll .allItems input[type=radio]+label {
    font-size: 14px;
    margin: 0 5px 8px
}

.poll .allItems .btns .social,
.poll .allItems .btns .vote {
    height: 30px;
    margin-left: 2px;
    color: #fff;
    text-align: center;
    float: right
}

.poll .allItems .btns {
    position: absolute;
    left: 12px;
    bottom: 12px
}

.poll .allItems .btns .vote {
    width: 100px;
    background: #aa120d;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    line-height: 2.2
}

.poll .allItems .btns .vote:hover {
    background: #940500
}

.poll .allItems .btns .social {
    width: 30px
}

.poll .allItems .btns .social:last-child {
    margin-left: 0
}

.poll .allItems .btns .icon-fb {
    background: #3c5899
}

.poll .allItems .btns .icon-fb:hover {
    background: #2c4582
}

.poll .allItems .btns .icon-fb:before {
    content: "u";
    font-size: 20px;
    line-height: 1.6
}

.poll .allItems .btns .icon-tw {
    background: #229ff3
}

.poll .allItems .btns .icon-tw:hover {
    background: #178cd7
}

.poll .allItems .btns .icon-tw:before {
    content: "v";
    font-size: 20px;
    line-height: 1.6
}

.article {
    display: inline-block;
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px 24px 0
}

.cd-articles::before {
    content: 'desktop';
    display: none
}

.cd-articles article {
    padding: 0;
    margin-top: 24px
}

.cd-articles article:first-child {
    margin-top: 0
}

.cd-articles article:last-of-type {
    border-bottom: none
}

.articleDiv {
    position: relative;
    z-index: 2
}

.articleDiv .cd-read-more {
    height: 528px
}

.articleDiv .cd-read-more li {
    counter-increment: articles;
    height: 80px;
    padding: 12px
}

.articleDiv .cd-read-more li a .imageCntnr {
    padding-bottom: calc((74px * 75)/ 100);
    width: 74px
}

.articleDiv .cd-read-more li .secName {
    right: 98px;
    bottom: 6px
}

.articleDiv .cd-read-more .item::before {
    content: counter(articles);
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #fff;
    color: #aa120d;
    font-family: Arial;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    line-height: 1.25;
    pointer-events: none;
    z-index: 1
}

.articleDiv .cd-read-more.fixed {
    position: fixed
}

.articleDiv .cd-read-more li:last-of-type a::after {
    display: none
}

.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: #aa120d;
    color: #fff
}

.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: .5
}

.articleDiv .cd-read-more .item.read p,
.articleDiv .cd-read-more li .secName.read {
    color: #555
}

.articleDiv .cd-read-more li .secName.read:before {
    opacity: .5
}

.breadcrumb {
    display: inline-block;
    width: 100%;
    background: #f2f2f2;
    padding: 5px 24px;
    margin-bottom: 24px
}

.breadcrumb li {
    display: inline-block;
    float: right
}

.breadcrumb li a {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    direction: rtl
}

.breadcrumb li a:after {
    content: "D";
    display: inline-block;
    float: left;
    margin: 0 15px;
    font-size: 18px
}

.breadcrumb li:last-child a:after {
    display: none
}

.breadcrumb li.active a {
    color: #aa120d
}

article .articleHeader {
    display: inline-block;
    width: 100%;
    margin-bottom: 24px
}

article .articleHeader h2 {
    font-family: DroidKufiBold, Arial;
    font-size: 34px;
    color: #1d1d1d;
    direction: rtl;
    margin-bottom: 12px;
    line-height: 1.6
}

article .articleHeader .time {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #888;
    float: right;
    direction: rtl
}

article .articleHeader .time span:last-child:after,
article .imgDiv.crctr .desc {
    display: none
}

article .articleHeader .icon-time:before {
    content: "C";
    float: right;
    margin-left: 5px;
    font-size: 20px;
    line-height: 1.5
}

article .articleHeader .time span {
    margin-left: 24px;
    position: relative;
    float: right
}

article .articleHeader .time span:after {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    width: 1px;
    height: 16px;
    background: #888
}

article .imgDiv {
    margin: 0 auto 24px;
    overflow: hidden;
    width: calc(100% - 72px);
    position: relative;
    max-width: 733px
}

article .imgDiv .imageCntnr {
    padding-bottom: 75%;
    float: right;
    max-width: 733px;
    width: 100%;
    position: relative
}

article .imgDiv .imageCntnr img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

article .imgDiv .desc {
    width: 100%;
    height: 50%;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

article .imgDiv .desc p {
    color: #fff;
    text-align: right;
    line-height: 1.6;
    padding: 12px;
    font-size: 12px;
    font-family: DroidKufiLight, Arial;
    position: absolute;
    bottom: 0;
    right: 0
}

article .details li,
article .writeBy p {
    font-family: DroidKufiLight, Arial;
    font-size: 16px
}

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;
    color: #888;
    direction: rtl;
    line-height: 3
}

article p {
    cursor: default
}

article .details {
    direction: rtl;
    margin-bottom: 40px
}

article .details,
article .details h3,
article .details p {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d!important;
    text-align: right!important;
    line-height: 2.2;
    margin: 15px 0;
    display: inline-block;
    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%;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    cursor: default;
    font-style: italic
}

article .details h3 {
    font-family: DroidKufiBold, Arial
}

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 iframe,
article .details img {
    margin: 40px calc((100% - 600px)/ 2);
    width: 600px
}

article .details img {
    height: auto
}

article .details iframe {
    height: 450px
}

article .details blockquote {
    display: inline-block;
    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"
}

.catPattern01 ul li a img,
.catPattern02 ul li a img {
    filter: brightness(100%) contrast(100%);
    border: 1px solid #ddd
}

article .details blockquote p {
    font-style: italic;
    color: #aaa!important
}

article .pagination {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 40px
}

article .pagination ul {
    margin: 0 auto;
    text-align: center;
    border: 1px solid #ddd;
    display: inline-block
}

article .pagination ul li {
    float: right;
    border-left: 1px solid #ddd;
    margin: 0
}

article .pagination ul li:nth-child(5n),
article .pagination ul:first-child li,
article .pagination ul:last-child li {
    border-left: 0
}

article .pagination ul li .dots,
article .pagination ul li a {
    display: block;
    overflow: hidden;
    width: 50px;
    background: #fff;
    height: 50px;
    text-align: center;
    font-family: Arial;
    font-size: 18px;
    color: #1d1d1d;
    line-height: 2.8
}

article .pagination ul li .dots:hover,
article .pagination ul li a:hover,
article .pagination ul li.current a {
    background: #eee
}

article .pagination ul li.nextPrev a {
    width: 100px;
    font-family: DroidKufiLight, Arial;
    font-size: 14px
}

article .nextLink h2,
article .provider h2 {
    font-family: DroidKufiBold, Arial;
    color: #1d1d1d;
    float: right
}

article .pagination ul li.nextPrev .icon-prev:before {
    content: "r";
    font-size: 22px;
    display: block;
    width: 100%;
    height: 50px;
    line-height: 2.3;
    transform: translateY(0);
    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 .pagination ul li.nextPrev .icon-next:before,
article .pagination ul li.nextPrev a .prev {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transition: all .2s ease-in-out 0s;
    display: block;
    height: 50px;
    width: 100%
}

article .pagination ul li.nextPrev a .prev {
    line-height: 3.5;
    transform: translateY(0);
    -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 .pagination ul li.nextPrev .icon-prev:hover:before,
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)
}

article .pagination ul li.nextPrev .icon-next:before {
    content: "q";
    font-size: 22px;
    line-height: 2.3;
    transform: translateY(0);
    -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 .pagination ul li.nextPrev a .next {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 3.5;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    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 .pagination ul li.nextPrev .icon-next:hover:before,
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 {
    display: inline-block;
    width: 100%;
    margin-bottom: 40px
}

article .provider h2 {
    font-size: 16px;
    margin-left: 10px;
    width: 130px;
    line-height: 2.5
}

article .provider .providerImg {
    float: right;
    width: calc(100% - 140px);
    height: 40px;
    text-align: right
}

article .provider .providerImg img {
    width: auto;
    height: 40px
}

article .keywordsDiv,
article .nextLink {
    width: 100%;
    margin-bottom: 40px;
    display: inline-block
}

article .nextLink {
    border-bottom: 1px solid #ddd;
    padding-bottom: 40px
}

article .nextLink h2 {
    font-size: 16px;
    margin-left: 5px
}

article .nextLink a {
    float: right;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #aa120d;
    position: relative;
    direction: rtl;
    text-align: right
}

article .keywordsDiv .item {
    float: right;
    padding: 2px 20px;
    background: #eee;
    margin: 0 0 24px 24px;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d
}

.newsPointer,
article .pattern01 {
    padding: 0;
    border-bottom: 1px solid #ddd;
    box-shadow: none
}

article .keywordsDiv .item:hover {
    background: #e2e2e2
}

article .pattern01 {
    float: none
}

article .pattern01 ul li {
    width: calc((100% - 72px)/ 4)
}

article .pattern01 ul li:last-child {
    margin-left: 0
}

article .nwsPntrSC {
    display: inline-block;
    width: 100%
}

.newsPointer {
    width: calc(100% - 324px);
    height: 266px;
    margin-bottom: 40px;
    overflow: hidden
}

.newsPointer .allItems {
    padding: 12px 0
}

.newsPointer .allItems ul {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-align: center
}

.newsPointer .allItems ul iframe {
    text-align: center
}

.newsPointer .allItems ul li {
    display: block;
    width: 100%;
    height: 52px;
    border-bottom: 1px solid #eee;
    padding: 10px 0
}

.newsPointer .allItems ul li:last-child {
    border-bottom: 0
}

.newsPointer .allItems ul li .trendDiv {
    float: right;
    width: 72px;
    height: 32px;
    border: 1px solid #ddd;
    display: inline-block;
    margin-left: 10px
}

.newsPointer .allItems ul li .trendDiv .trendImg {
    width: 30px;
    height: 30px;
    float: right;
    display: inline-block;
    text-align: center
}

.newsPointer .allItems ul li .trendDiv .trendImg img {
    width: 18px;
    height: 18px;
    border: none;
    margin-top: 6px
}

.newsPointer .allItems ul li .trendDiv .vstrs {
    float: right;
    display: inline-block;
    text-align: center;
    background: #ddd;
    width: 40px;
    height: 30px;
    font-family: Arial;
    color: #1d1d1d;
    font-size: 12px;
    line-height: 2.8
}

.newsPointer .allItems ul li .news {
    float: right;
    display: block;
    font-family: DroidKufiLight, arial;
    color: #1d1d1d;
    font-size: 13px;
    width: calc(100% - 82px);
    padding: 0;
    text-align: right;
    height: 32px;
    line-height: 2.4;
    overflow: hidden
}

.demo-gallery>ul>li,
.demo-gallery>ul>li img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.newsPointer .allItems ul .leaderboardDiv {
    margin: 40px 0
}

article .fbComments {
    padding: 0;
    border-bottom: 1px solid #ddd;
    box-shadow: none;
    float: none
}

article .leaderboardDiv {
    float: none;
    margin-bottom: 40px
}

.demo-gallery {
    padding-bottom: 75%;
    float: right;
    max-width: 733px;
    width: 100%;
    position: relative
}

.articleCntnt .demo-gallery ul li::before {
    display: none
}

.demo-gallery>ul {
    margin-bottom: 0;
    padding-right: 0
}

.demo-gallery>ul>li {
    display: none;
    position: absolute
}

.demo-gallery>ul>li a,
.demo-gallery>ul>li:first-child {
    display: block
}

.demo-gallery>ul>li img {
    position: absolute
}

.demo-gallery>ul>li .showGal {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -75px;
    background: rgba(0, 0, 0, .8);
    width: 150px;
    height: 40px;
    padding: 0 10px;
    font-family: DroidKufiLight, Arial;
    color: #fff;
    font-size: 14px;
    z-index: 9;
    line-height: 2.8
}

.demo-gallery>ul>li .icon-camera:before {
    content: "t";
    font-size: 22px;
    color: #fff;
    float: right;
    margin-left: 10px;
    line-height: 1.8
}

.demo-gallery>ul>li a>img {
    -webkit-transition: -webkit-transform .15s ease 0s;
    -moz-transition: -moz-transform .15s ease 0s;
    -o-transition: -o-transform .15s ease 0s;
    transition: transform .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, .1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color .15s ease 0s;
    -o-transition: background-color .15s ease 0s;
    transition: background-color .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 .3s ease 0s;
    -o-transition: opacity .3s ease 0s;
    transition: opacity .3s ease 0s
}

.demo-gallery>ul>li a:hover .demo-gallery-poster {
    background-color: rgba(0, 0, 0, .5)
}

.demo-gallery .justified-gallery>a>img {
    -webkit-transition: -webkit-transform .15s ease 0s;
    -moz-transition: -moz-transform .15s ease 0s;
    -o-transition: -o-transform .15s ease 0s;
    transition: transform .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, .1);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: background-color .15s ease 0s;
    -o-transition: background-color .15s ease 0s;
    transition: background-color .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 .3s ease 0s;
    -o-transition: opacity .3s ease 0s;
    transition: opacity .3s ease 0s
}

.demo-gallery .justified-gallery>a:hover .demo-gallery-poster {
    background-color: rgba(0, 0, 0, .5)
}

.demo-gallery .video .demo-gallery-poster img {
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    opacity: .8;
    width: 48px
}

.demo-gallery.dark>ul>li a {
    border: 3px solid #04070a
}

.lg-actions .lg-next,
.lg-actions .lg-prev {
    background-color: rgba(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: .5
}

.lg-actions .lg-next:hover,
.lg-actions .lg-prev:hover {
    color: #FFF
}

.lg-actions .lg-next {
    right: 0
}

.lg-actions .lg-next:before {
    content: "r";
    font-size: 32px
}

.lg-actions .lg-prev {
    left: 0
}

.lg-actions .lg-prev:after {
    content: "q";
    font-size: 32px
}

@-webkit-keyframes lg-right-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: -30px
    }
}

@-moz-keyframes lg-right-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: -30px
    }
}

@-ms-keyframes lg-right-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: -30px
    }
}

@keyframes lg-right-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: -30px
    }
}

@-webkit-keyframes lg-left-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: 30px
    }
}

@-moz-keyframes lg-left-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: 30px
    }
}

@-ms-keyframes lg-left-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: 30px
    }
}

@keyframes lg-left-end {
    0%,
    100% {
        left: 0
    }
    50% {
        left: 30px
    }
}

.lg-outer.lg-right-end .lg-object {
    -webkit-animation: lg-right-end .3s;
    -o-animation: lg-right-end .3s;
    animation: lg-right-end .3s;
    position: relative
}

.lg-outer.lg-left-end .lg-object {
    -webkit-animation: lg-left-end .3s;
    -o-animation: lg-left-end .3s;
    animation: lg-left-end .3s;
    position: relative
}

.lg-toolbar {
    z-index: 1082;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .45)
}

.lg-toolbar .lg-icon {
    color: #999;
    cursor: pointer;
    float: right;
    font-size: 24px;
    height: 47px;
    line-height: 27px;
    padding: 5px 0;
    text-align: center;
    width: 50px;
    text-decoration: none!important;
    outline: 0;
    -webkit-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition: color .2s linear
}

.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, .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: 14px;
    margin: 5px 0 0;
    font-family: DroidKufiLight, arial;
    line-height: 1.8;
    text-align: center
}

#lg-counter {
    color: #999;
    display: inline-block;
    font-size: 20px;
    padding-left: 20px;
    padding-top: 14px;
    vertical-align: middle;
    font-family: arial
}

.lg-next,
.lg-prev,
.lg-toolbar {
    opacity: 1;
    -webkit-transition: -webkit-transform .35s cubic-bezier(0, 0, .25, 1) 0s, opacity .35s cubic-bezier(0, 0, .25, 1) 0s, color .2s linear;
    -moz-transition: -moz-transform .35s cubic-bezier(0, 0, .25, 1) 0s, opacity .35s cubic-bezier(0, 0, .25, 1) 0s, color .2s linear;
    -o-transition: -o-transform .35s cubic-bezier(0, 0, .25, 1) 0s, opacity .35s cubic-bezier(0, 0, .25, 1) 0s, color .2s linear;
    transition: transform .35s cubic-bezier(0, 0, .25, 1) 0s, opacity .35s cubic-bezier(0, 0, .25, 1) 0s, color .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(.5, .5, .5);
    transform: scale3d(.5, .5, .5);
    opacity: 0;
    -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, .25, 1) 0s, opacity 250ms cubic-bezier(0, 0, .25, 1)!important;
    -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, .25, 1) 0s, opacity 250ms cubic-bezier(0, 0, .25, 1)!important;
    -o-transition: -o-transform 250ms cubic-bezier(0, 0, .25, 1) 0s, opacity 250ms cubic-bezier(0, 0, .25, 1)!important;
    transition: transform 250ms cubic-bezier(0, 0, .25, 1) 0s, opacity 250ms cubic-bezier(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: 1px solid #333
}

.lg-outer .lg-thumb-outer {
    background-color: #0D0A0A;
    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 .25s cubic-bezier(0, 0, .25, 1) 0s;
    -moz-transition: -moz-transform .25s cubic-bezier(0, 0, .25, 1) 0s;
    -o-transition: -o-transform .25s cubic-bezier(0, 0, .25, 1) 0s;
    transition: transform .25s cubic-bezier(0, 0, .25, 1) 0s
}

.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: -ms-grab;
    cursor: grab
}

.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: -o-grabbing;
    cursor: -ms-grabbing;
    cursor: grabbing
}

.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
}

.lg-outer .lg-thumb-item {
    cursor: pointer;
    float: left;
    overflow: hidden;
    height: 100%;
    border: 2px solid #FFF;
    border-radius: 4px;
    margin-bottom: 5px
}

@media (min-width:1025px) {
    .lg-outer .lg-thumb-item {
        -webkit-transition: border-color .25s ease;
        -o-transition: border-color .25s ease;
        transition: border-color .25s ease
    }
}

.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
    border-color: #a90707
}

.lg-outer .lg-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.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 .25s ease;
    -o-transition: bottom .25s ease;
    transition: bottom .25s ease
}

.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
    bottom: 100px
}

.lg-outer .lg-toogle-thumb {
    background-color: #0D0A0A;
    border-radius: 2px 2px 0 0;
    color: #999;
    cursor: pointer;
    font-size: 24px;
    height: 39px;
    line-height: 27px;
    padding: 5px 0;
    position: absolute;
    right: 20px;
    text-align: center;
    top: -39px;
    width: 50px
}

.lg-outer .lg-toogle-thumb:after {
    content: "\e1ff"
}

.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(http://www.masrawy.com/img/vimeo-play.png) no-repeat
}

.lg-outer .lg-has-vimeo:hover .lg-video-play {
    background: url(http://www.masrawy.com/img/vimeo-play.png) 0 -58px no-repeat
}

.lg-outer .lg-has-html5 .lg-video-play {
    background: url(http://www.masrawy.com/img/video-play.png) no-repeat;
    height: 64px;
    margin-left: -32px;
    margin-top: -32px;
    width: 64px;
    opacity: .8
}

.lg-outer .lg-has-html5:hover .lg-video-play {
    opacity: 1
}

.lg-outer .lg-has-youtube .lg-video-play {
    background: url(http://www.masrawy.com/img/youtube-play.png) no-repeat
}

.lg-outer .lg-has-youtube:hover .lg-video-play {
    background: url(http://www.masrawy.com/img/youtube-play.png) 0 -60px no-repeat
}

.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 80ms ease 0s;
    -moz-transition: opacity 80ms ease 0s;
    -o-transition: opacity 80ms ease 0s;
    transition: opacity 80ms 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: "P"
}

.lg-show-autoplay .lg-autoplay-button:after {
    content: "Q"
}

.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image,
.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
    -webkit-transition-duration: 0s;
    transition-duration: 0s
}

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
    -webkit-transition: left .3s cubic-bezier(0, 0, .25, 1) 0s, top .3s cubic-bezier(0, 0, .25, 1) 0s;
    -moz-transition: left .3s cubic-bezier(0, 0, .25, 1) 0s, top .3s cubic-bezier(0, 0, .25, 1) 0s;
    -o-transition: left .3s cubic-bezier(0, 0, .25, 1) 0s, top .3s cubic-bezier(0, 0, .25, 1) 0s;
    transition: left .3s cubic-bezier(0, 0, .25, 1) 0s, top .3s cubic-bezier(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 .3s cubic-bezier(0, 0, .25, 1) 0s, opacity .15s!important;
    -moz-transition: -moz-transform .3s cubic-bezier(0, 0, .25, 1) 0s, opacity .15s!important;
    -o-transition: -o-transform .3s cubic-bezier(0, 0, .25, 1) 0s, opacity .15s!important;
    transition: transform .3s cubic-bezier(0, 0, .25, 1) 0s, opacity .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: .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 #fff 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 .15s ease 0s, -webkit-transform .15s ease 0s;
    -moz-transition: opacity .15s ease 0s, -moz-transform .15s ease 0s;
    -o-transition: opacity .15s ease 0s, -o-transform .15s ease 0s;
    transition: opacity .15s ease 0s, transform .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, .5);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .7) inset;
    display: block;
    height: 12px;
    -webkit-transition: box-shadow .3s ease 0s;
    -o-transition: box-shadow .3s ease 0s;
    transition: box-shadow .3s ease 0s;
    width: 12px
}

.lg-outer .lg-pager:focus,
.lg-outer .lg-pager:hover {
    box-shadow: 0 0 0 8px #fff 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-outer,
.lg-outer .lg,
.lg-outer .lg-inner {
    width: 100%;
    height: 100%
}

.lg-fullscreen:after {
    content: "\e20c"
}

.lg-fullscreen-on .lg-fullscreen:after {
    content: "\e20d"
}

.group:after,
.group:before {
    display: table;
    content: "";
    line-height: 0
}

.group:after {
    clear: both
}

.lg-outer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    opacity: 0;
    -webkit-transition: opacity .15s ease 0s;
    -o-transition: opacity .15s ease 0s;
    transition: opacity .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-current,
.lg-outer.lg-css3 .lg-item.lg-next-slide,
.lg-outer.lg-css3 .lg-item.lg-prev-slide {
    -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-current,
.lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide,
.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide {
    -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 {
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 100%
}

.lg-outer .lg-inner {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap
}

.lg-outer .lg-item {
    display: none!important
}

.lg-outer.lg-css .lg-current,
.lg-outer.lg-css3 .lg-current,
.lg-outer.lg-css3 .lg-next-slide,
.lg-outer.lg-css3 .lg-prev-slide {
    display: inline-block!important
}

.lg-outer .lg-img-wrap,
.lg-outer .lg-item {
    display: inline-block;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%
}

.lg-outer .lg-img-wrap:before,
.lg-outer .lg-item: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
}

.lg-on .component,
.lg-on .headerBtns,
.lg-on header,
.lg-outer .lg-empty-html,
.lg-outer.lg-hide-download #lg-download {
    display: 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 .15s ease 0s;
    -o-transition: opacity .15s ease 0s;
    transition: opacity .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-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0;
    -webkit-transition: opacity .15s ease 0s;
    -o-transition: opacity .15s ease 0s;
    transition: opacity .15s ease 0s
}

.lg-backdrop.in {
    opacity: 1
}

.lg-css3.lg-no-trans .lg-current,
.lg-css3.lg-no-trans .lg-next-slide,
.lg-css3.lg-no-trans .lg-prev-slide {
    -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,
.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-current,
.lg-css3.lg-fade .lg-item.lg-next-slide,
.lg-css3.lg-fade .lg-item.lg-prev-slide {
    -webkit-transition: opacity .1s ease 0s;
    -moz-transition: opacity .1s ease 0s;
    -o-transition: opacity .1s ease 0s;
    transition: opacity .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-current,
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide,
.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
    -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .1s ease 0s;
    -moz-transition: -moz-transform 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .1s ease 0s;
    -o-transition: -o-transform 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .1s ease 0s;
    transition: transform 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .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-current,
.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide,
.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide {
    -webkit-transition: left 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .1s ease 0s;
    -moz-transition: left 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .1s ease 0s;
    -o-transition: left 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .1s ease 0s;
    transition: left 1s cubic-bezier(0, 0, .25, 1) 0s, opacity .1s ease 0s
}

.lg-item iframe {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 300px;
    height: 266px;
    position: relative;
    top: 133px
}

.repeatDiv {
    display: block;
    width: 600px;
    padding: 45px 20px;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 0
}

.repeatDiv .repeatAlbum {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    text-align: center
}

.repeatDiv .repeatAlbum p {
    display: block;
    color: #fff;
    font-family: DroidKufiLight, Arial;
    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;
    margin-bottom: 20px;
    padding: 15px 10px 10px;
    background: #aa120d;
    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 80ms ease 0s;
    -moz-transition: opacity 80ms ease 0s;
    -o-transition: opacity 80ms ease 0s;
    transition: opacity 80ms ease 0s
}

.repeatDiv .nextAlbum .progress-bar .progress {
    background-color: #fff;
    height: 5px;
    width: 0;
    float: right;
    transition: all 10s ease 0s;
    -webkit-transition: all 10s ease 0s;
    -moz-transition: all 10s ease 0s;
    -o-transition: all 10s ease 0s;
    -ms-transition: all 10s 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-family: DroidKufiLight, Arial;
    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: block;
    width: 100%;
    padding: 10px 10px 0;
    background: #fff;
    position: relative
}

.repeatDiv .relatedAlbum .ttl {
    height: auto;
    border-bottom: none
}

.repeatDiv .relatedAlbum .ttl h2 {
    color: #aa120d;
    padding: 0;
    font-size: 18px
}

.repeatDiv .relatedAlbum .ttl h2:after {
    display: none
}

.repeatDiv .relatedAlbum .content {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    background: 0 0;
    min-height: unset
}

.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-family: DroidKufiLight, arial;
    font-size: 14px;
    color: #1d1d1d;
    display: block;
    float: right;
    width: calc(100% - 75px);
    height: 42px;
    overflow: hidden;
    line-height: 1.6;
    white-space: normal
}

.catPattern01 .desc p,
.catPattern02 .desc p,
.catPattern03 .desc p,
.wrapperDropdown,
article .articleStrip p {
    font-family: DroidKufiLight, Arial
}

.lastSlide .lg-actions,
.lastSlide .lg-toolbar #lg-counter,
.lastSlide .lg-toolbar .lg-autoplay-button {
    display: none
}

.dropDownDiv {
    display: inline-block;
    width: 100%;
    margin-bottom: 40px;
    padding: 24px;
    background: #f2f2f2
}

.wrapperDropdown {
    position: relative;
    width: 100%;
    background: #fff;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #ddd;
    z-index: 1;
    text-align: right;
    direction: rtl;
    font-size: 14px;
    color: #aaa;
    outline: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.wrapperDropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 12px;
    margin-top: -3px;
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: #aaa 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, .2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .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 .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: #aa120d
}

.wrapperDropdown.active {
    border-radius: 5px 5px 0 0;
    background: #aaa;
    box-shadow: none;
    border-bottom: none;
    color: #fff
}

.wrapperDropdown.active:after {
    border-color: #ccc transparent
}

.wrapperDropdown.active .dropdown {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    max-height: 400px
}

article .authorDtls {
    display: inline-block;
    width: 100%;
    margin: 24px 0 36px;
    position: relative
}

article .authorDtls .imageCntnr {
    padding-bottom: calc((190px * 75)/ 100);
    float: right;
    width: 190px;
    position: relative;
    margin-left: 24px
}

article .authorDtls .imageCntnr img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

article .authorDtls .articleHeader {
    width: calc(100% - 214px)
}

article .authorDtls .articleHeader h2 {
    margin-bottom: 0;
    font-size: 24px;
    height: 72px;
    overflow: hidden
}

article .authorDtls .articleHeader .authorName {
    display: block;
    font-family: DroidKufiLight, Arial;
    font-size: 18px;
    color: #888;
    float: right;
    direction: rtl
}

article .authorDtls .articleHeader .time {
    position: absolute;
    width: calc(100% - 214px);
    bottom: 0;
    right: 214px;
    font-size: 14px
}

article .authorDtls .articleHeader .icon-time:before {
    line-height: 1.3
}

article .authorDtls .articleHeader .time span:after {
    top: 6px
}

article .articleStrip {
    display: inline-block;
    width: 100%;
    padding: 8px;
    background: #aa120d;
    text-align: center
}

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.articleVideo .videoCntnr {
    padding-bottom: 75%;
    float: right;
    max-width: 733px;
    width: 100%;
    position: relative
}

article.articleVideo .videoCntnr iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all .2s ease-in-out 0s
}

article.articleVideo .articleVideoEnd,
article.articleVideo .videoEnd {
    display: inline-block;
    height: 1px
}

article.articleVideo .fixed iframe {
    position: fixed;
    top: auto;
    bottom: 0;
    right: 74px;
    left: auto;
    width: 300px;
    height: auto;
    z-index: 2;
    border: 12px solid #f2f2f2
}

.articleSocialMedia {
    position: fixed;
    margin-right: -54px;
    bottom: auto;
    z-index: 1;
    background: #f2f2f2;
    padding: 12px 9px;
    width: 50px;
    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
}

.articleSocialMedia::before {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
    z-index: 10;
    width: 40px;
    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
}

.show-sponsor .articleSocialMedia::before,
.sponsorHome .articleSocialMedia::before {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.articleSocialMedia a {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 12px;
    text-align: center;
    color: #fff
}

.articleSocialMedia a:last-child {
    margin-bottom: 0
}

.articleSocialMedia .icon-fb {
    background: #3a5799
}

.articleSocialMedia .icon-fb:hover {
    background: #28437a
}

.articleSocialMedia .icon-fb:before {
    content: "u";
    font-size: 20px;
    line-height: 1.7
}

.articleSocialMedia .icon-tw {
    background: #1fa2f0
}

.articleSocialMedia .icon-tw:hover {
    background: #1083cf
}

.articleSocialMedia .icon-tw:before {
    content: "v";
    font-size: 20px;
    line-height: 1.7
}

.articleSocialMedia .icon-ggl {
    background: #d55142
}

.articleSocialMedia .icon-ggl:hover {
    background: #bc3f31
}

.articleSocialMedia .icon-ggl:before {
    content: "w";
    font-size: 20px;
    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: 22px;
    line-height: 1.6
}

.articleSocialMedia .icon-msngr {
    background: #0084ff
}

.articleSocialMedia .icon-msngr:hover {
    background: #0070d9
}

.articleSocialMedia .icon-msngr:before {
    content: "y";
    font-size: 20px;
    line-height: 1.6
}

.articleSocialMedia .icon-mail {
    background: #75c155
}

.articleSocialMedia .icon-mail:hover {
    background: #5ca43e
}

.articleSocialMedia .icon-mail:before {
    content: "z";
    font-size: 20px;
    line-height: 1.6
}

.articleSocialMedia .icon-print {
    background: #566d7f
}

.articleSocialMedia .icon-print:hover {
    background: #465c6d
}

.articleSocialMedia .icon-print:before {
    content: "G";
    font-size: 20px;
    line-height: 1.6
}

.hideSocialBtns .articleSocialMedia {
    margin-right: 0
}

.catPattern01 {
    padding: 12px
}

.catPattern01 .allItems {
    display: inline-block;
    width: 100%;
    padding: 24px 0 0
}

.catPattern01 ul li {
    float: right;
    margin-left: 24px;
    margin-bottom: 24px;
    width: calc((100% - 96px)/ 5);
    height: auto;
    position: relative;
    overflow: hidden
}

.catPattern01 ul li a {
    display: block
}

.catPattern01 ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.catPattern01 .desc,
.catPattern01 .desc p,
.catPattern01 ul li a img {
    position: absolute;
    bottom: 0;
    right: 0
}

.catPattern01 ul li a img {
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.catPattern01 ul li:first-child,
.catPattern01 ul li:nth-child(2),
.catPattern01 ul li:nth-child(3) {
    width: calc((100% - 48.1px)/ 3)
}

.catPattern01 ul li:last-child,
.catPattern01 ul li:nth-child(3) {
    margin-left: 0
}

.catPattern01 ul li:nth-last-child(-n+5) {
    margin-bottom: 0
}

.catPattern01 ul li .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.catPattern01 .desc {
    width: 100%;
    height: 50%;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.catPattern01 .desc p {
    color: #fff;
    text-align: right;
    line-height: 1.6;
    padding: 12px;
    font-size: 16px
}

.catPattern01 ul li:first-child .desc p,
.catPattern01 ul li:nth-child(2) .desc p,
.catPattern01 ul li:nth-child(3) .desc p {
    font-size: 18px;
    line-height: 1.6
}

.catPattern01 ul li:nth-last-child(-n+5) .desc {
    position: relative;
    background: 0 0
}

.catPattern01 ul li:nth-last-child(-n+5) .desc p {
    position: relative;
    color: #1d1d1d;
    font-size: 14px;
    line-height: 1.4;
    padding: 5px 0;
    height: 62px;
    overflow: hidden;
    margin-bottom: 5px
}

.catPattern01 ul li.icon-image:before,
.catPattern01 ul li.icon-video:before {
    background: rgba(0, 0, 0, .7);
    position: absolute;
    top: 1px;
    left: 1px;
    pointer-events: none;
    z-index: 1
}

.catPattern01 ul li:nth-last-child(-n+5) .item:hover .desc p {
    color: #888
}

.catPattern01 ul li:nth-last-child(-n+5) .secName:hover {
    color: #1d1d1d
}

.catPattern01 ul li.icon-video:before {
    content: "s";
    color: #fff;
    font-size: 30px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.catPattern01 ul li:first-child.icon-video:before,
.catPattern01 ul li:nth-child(2).icon-video:before,
.catPattern01 ul li:nth-child(3).icon-video:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25
}

.catPattern01 ul li.icon-image:before {
    content: "t";
    color: #fff;
    font-size: 30px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.catPattern01 ul li:first-child.icon-image:before,
.catPattern01 ul li:nth-child(2).icon-image:before,
.catPattern01 ul li:nth-child(3).icon-image:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25
}

.catPattern01 ul li:nth-last-child(-n+5).icon-image,
.catPattern01 ul li:nth-last-child(-n+5).icon-video {
    background: #1d1d1d
}

.catPattern01 ul li:nth-last-child(-n+5).icon-image .desc p,
.catPattern01 ul li:nth-last-child(-n+5).icon-video .desc p {
    color: #fff;
    padding: 5px
}

.catPattern01 ul li:nth-last-child(-n+5).icon-image .item:hover .desc p,
.catPattern01 ul li:nth-last-child(-n+5).icon-video .item:hover .desc p {
    color: #aaa
}

.catPattern02 {
    padding: 12px;
    width: calc((100% - 48px)/ 2);
    margin-left: 48px
}

.catPattern02:last-child {
    margin-left: 0
}

.catPattern02 .allItems {
    display: inline-block;
    width: 100%;
    padding: 24px 0 0
}

.catPattern02 ul li {
    float: right;
    margin-left: 24px;
    margin-bottom: 24px;
    width: calc((100% - 48px)/ 3);
    height: auto;
    position: relative;
    overflow: hidden
}

.catPattern02 ul li a {
    display: block
}

.catPattern02 ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.catPattern02 .desc,
.catPattern02 .desc p,
.catPattern02 ul li a img {
    position: absolute;
    bottom: 0;
    right: 0
}

.catPattern02 ul li a img {
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    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
}

.catPattern02 ul li:first-child,
.catPattern02 ul li:nth-child(2) {
    width: calc((100% - 24px)/ 2)
}

.catPattern02 ul li:last-child,
.catPattern02 ul li:nth-child(2) {
    margin-left: 0
}

.catPattern02 ul li:nth-last-child(-n+3) {
    margin-bottom: 0
}

.catPattern02 ul li .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.catPattern02 .desc {
    width: 100%;
    height: 50%;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.catPattern03 ul li a img,
.cd-gallery li .item img {
    filter: brightness(100%) contrast(100%);
    transition: all .2s ease-in-out 0s
}

.catPattern02 .desc p {
    color: #fff;
    text-align: right;
    line-height: 1.6;
    padding: 12px;
    font-size: 16px
}

.catPattern02 ul li:first-child .desc p,
.catPattern02 ul li:nth-child(2) .desc p {
    font-size: 18px;
    line-height: 1.6
}

.catPattern02 ul li:nth-last-child(-n+3) .desc {
    position: relative;
    background: 0 0
}

.catPattern02 ul li:nth-last-child(-n+3) .desc p {
    position: relative;
    color: #1d1d1d;
    font-size: 14px;
    line-height: 1.4;
    padding: 5px 0;
    height: 62px;
    overflow: hidden;
    margin-bottom: 5px
}

.catPattern02 ul li.icon-image:before,
.catPattern02 ul li.icon-video:before {
    background: rgba(0, 0, 0, .7);
    position: absolute;
    top: 1px;
    left: 1px;
    pointer-events: none;
    z-index: 1
}

.catPattern02 ul li:nth-last-child(-n+3) .item:hover .desc p {
    color: #888
}

.catPattern02 ul li:nth-last-child(-n+3) .secName:hover {
    color: #1d1d1d
}

.catPattern02 ul li.icon-video:before {
    content: "s";
    color: #fff;
    font-size: 30px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.catPattern02 ul li:first-child.icon-video:before,
.catPattern02 ul li:nth-child(2).icon-video:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25
}

.catPattern02 ul li.icon-image:before {
    content: "t";
    color: #fff;
    font-size: 30px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.catPattern02 ul li:first-child.icon-image:before,
.catPattern02 ul li:nth-child(2).icon-image:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25
}

.catPattern02 ul li:nth-last-child(-n+3).icon-image,
.catPattern02 ul li:nth-last-child(-n+3).icon-video {
    background: #1d1d1d
}

.catPattern02 ul li:nth-last-child(-n+3).icon-image .desc p,
.catPattern02 ul li:nth-last-child(-n+3).icon-video .desc p {
    color: #fff;
    padding: 5px
}

.catPattern02 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
.catPattern02 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
    color: #aaa
}

.catPattern03 {
    padding: 12px;
    width: calc((100% - 96.1px)/ 3);
    margin-left: 48px;
    overflow: hidden
}

.catPattern03:last-child {
    margin-left: 0
}

.catPattern03 .allItems {
    display: inline-block;
    width: 100%;
    padding: 24px 0 0
}

.catPattern03 ul li {
    float: right;
    margin-bottom: 24px;
    width: 100%;
    height: auto;
    position: relative
}

.catPattern03 ul li:after {
    content: "";
    position: absolute;
    bottom: -12px;
    right: 0;
    width: 100%;
    height: 1px;
    background: #ddd
}

.catPattern03 ul li:first-child:after,
.catPattern03 ul li:last-child:after {
    display: none
}

.catPattern03 ul li:last-child {
    margin-bottom: 0
}

.catPattern03 ul li a {
    display: block
}

.catPattern03 ul li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: calc((88px * 75)/ 100);
    float: right;
    width: 88px;
    margin-left: 12px
}

.catPattern03 ul li:first-child a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%;
    float: none;
    width: auto;
    margin-left: 0
}

.catPattern03 ul li a img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    -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
}

.catPattern03 ul li .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.catPattern03 .desc {
    width: calc(100% - 100px);
    height: 50%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    float: right
}

.catPattern03 .desc p {
    color: #1d1d1d;
    text-align: right;
    line-height: 1.6;
    font-size: 14px;
    position: relative;
    bottom: 0;
    right: 0;
    margin-bottom: 5px
}

.filterMainContent h3,
.searchResult h2 {
    font-family: DroidKufiBold, Arial;
    direction: rtl
}

.catPattern03 ul li:first-child .desc {
    position: absolute;
    bottom: 0;
    right: 0;
    float: none;
    width: 100%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
    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)
}

.catPattern03 ul li.icon-image:before,
.catPattern03 ul li.icon-video:before {
    background: rgba(0, 0, 0, .7);
    position: absolute;
    top: 1px;
    pointer-events: none;
    z-index: 1
}

.catPattern03 ul li:first-child .desc p {
    line-height: 1.6;
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 16px;
    color: #fff;
    padding: 12px
}

.catPattern03 ul li:nth-last-child(-n+3) .item:hover .desc p {
    color: #888
}

.catPattern03 ul li.icon-video:before {
    content: "s";
    color: #fff;
    font-size: 30px;
    right: 1px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.catPattern03 ul li:first-child.icon-video:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25;
    left: 1px;
    right: auto
}

.catPattern03 ul li.icon-image:before {
    content: "t";
    color: #fff;
    font-size: 30px;
    right: 1px;
    width: 41px;
    height: 40px;
    line-height: 1.35
}

.catPattern03 ul li:first-child.icon-image:before {
    font-size: 56px;
    width: 70px;
    height: 70px;
    line-height: 1.25;
    left: 1px;
    right: auto
}

.catPattern03 ul li:nth-last-child(-n+3).icon-image,
.catPattern03 ul li:nth-last-child(-n+3).icon-video {
    background: #1d1d1d
}

.catPattern03 ul li:nth-last-child(-n+3).icon-image .desc p,
.catPattern03 ul li:nth-last-child(-n+3).icon-video .desc p {
    color: #fff;
    padding: 5px
}

.catPattern03 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
.catPattern03 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
    color: #aaa
}

.searchResult {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px 24px 0
}

.searchResult h2 {
    display: inline-block;
    width: 100%;
    font-size: 24px;
    color: #1d1d1d;
    margin-bottom: 24px
}

.searchResult h2 span {
    margin-right: 8px;
    color: #aaa
}

.searchResult form {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    padding: 24px;
    background: #f2f2f2;
    position: relative
}

.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 12px;
    border: 1px solid #ddd!important;
    z-index: 1;
    direction: rtl;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #aaa;
    outline: 0
}

.searchResult form .morphsearch-submit {
    position: absolute;
    width: 30px;
    height: 30px;
    margin-top: 0;
    overflow: hidden;
    left: 35px;
    top: 35px;
    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: 30px;
    line-height: 1
}

.cd-tab-filter-wrapper:after,
.filterMainContent:after {
    content: "";
    display: table;
    clear: both
}

.searchResult form input:focus,
.searchResult form textarea:focus {
    border: 1px solid #888!important;
    outline: 0
}

.filterMainContent {
    position: relative;
    min-height: 28vh
}

.filterMainContent h3 {
    float: right;
    width: 120px;
    font-size: 16px;
    color: #1d1d1d;
    line-height: 3.5
}

.cd-tab-filter-wrapper {
    background-color: #fff;
    z-index: 2;
    width: calc(100% - 120px);
    float: right
}

.cd-tab-filter {
    position: relative;
    height: 50px;
    width: auto;
    margin: 0 auto;
    z-index: 2;
    cursor: auto
}

.cd-tab-filter::after {
    content: 'q';
    position: absolute;
    left: 12px;
    top: 50%;
    color: #aaa;
    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: .5;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    pointer-events: none
}

.cd-tab-filter ul {
    position: static;
    top: 0;
    left: 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd
}

.cd-tab-filter li {
    display: inline-block
}

.cd-tab-filter li.placeholder {
    display: none!important
}

.cd-tab-filter li:first-child {
    display: block
}

.cd-gallery li,
.cd-tab-filter a,
.cd-tab-filter.is-open ul li {
    display: inline-block
}

.cd-tab-filter a {
    height: 50px;
    width: auto;
    line-height: 50px;
    padding: 0 24px;
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    color: #aaa
}

.cd-tab-filter a.selected {
    background: 0 0;
    color: #1d1d1d;
    box-shadow: inset 0 -2px 0 #1d1d1d
}

.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, .2)
}

.cd-tab-filter.is-open .placeholder a {
    opacity: .4
}

.cd-gallery {
    padding: 24px 0 0;
    width: 100%;
    box-shadow: none;
    margin-bottom: 0
}

.cd-gallery ul {
    text-align: justify
}

.cd-gallery li {
    margin-bottom: 24px;
    width: calc((100% - 48px)/ 3);
    padding-bottom: 5px;
    height: auto;
    position: relative;
    overflow: hidden;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none
}

.cd-gallery li a .imageCntnr {
    position: relative;
    overflow: hidden;
    padding-bottom: 75%
}

.cd-gallery li .item img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    -webkit-filter: brightness(100%) contrast(100%);
    -moz-filter: brightness(100%) contrast(100%);
    -o-filter: brightness(100%) contrast(100%);
    -ms-filter: brightness(100%) contrast(100%);
    -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 li .item:hover img {
    filter: brightness(108%) contrast(108%);
    -webkit-filter: brightness(108%) contrast(108%);
    -moz-filter: brightness(108%) contrast(108%);
    -o-filter: brightness(108%) contrast(108%);
    -ms-filter: brightness(108%) contrast(108%)
}

.cd-gallery li .desc {
    width: 100%;
    overflow: hidden;
    cursor: pointer
}

.cd-gallery li .desc p {
    color: #1d1d1d;
    height: 96px;
    margin-bottom: 5px;
    overflow: hidden;
    text-align: right;
    line-height: 1.8;
    padding: 10px 0;
    font-size: 16px;
    font-family: DroidKufiLight, Arial;
    transition: all .2s ease-in-out 0s;
    -webkit-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -ms-transition: all .2s ease-in-out 0s
}

.cd-gallery li .secName,
.cd-gallery li .time {
    font-family: DroidKufiLight, Arial;
    font-size: 14px
}

.cd-gallery li .item:hover .desc p {
    color: #888
}

.cd-gallery li .articleDate,
.cd-gallery li .authorName,
.cd-gallery li .desc.authorDesc {
    display: none
}

.cd-gallery li .secName {
    color: #888;
    display: inline-block;
    margin-bottom: 5px
}

.cd-gallery li .secName:after {
    content: "";
    width: 4px;
    height: 14px;
    background: #aa120d;
    float: right;
    margin-left: 5px;
    margin-top: 6px
}

.cd-gallery li .secName:hover {
    color: #1d1d1d
}

.cd-gallery li .time {
    color: #888;
    display: inline-block;
    width: 100%;
    cursor: default
}

.cd-gallery li .icon-time:before {
    content: "C";
    font-size: 16px;
    float: right;
    margin-left: 5px;
    line-height: 1.6
}

.cd-gallery li.icon-image,
.cd-gallery li.icon-video {
    background: #1d1d1d
}

.cd-gallery li.icon-image:before,
.cd-gallery li.icon-video:before {
    font-size: 30px;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    top: 1px;
    left: 1px;
    width: 41px;
    height: 40px;
    line-height: 1.35;
    z-index: 1;
    pointer-events: none
}

.cd-gallery li.icon-image .desc p,
.cd-gallery li.icon-video .desc p {
    color: #fff;
    padding: 10px
}

.cd-gallery li.icon-image .item:hover .desc p,
.cd-gallery li.icon-video .item:hover .desc p {
    color: #aaa
}

.cd-gallery li.icon-image .secName,
.cd-gallery li.icon-video .secName {
    margin-right: 10px;
    color: #bbb
}

.cd-gallery li.icon-image .secName:hover,
.cd-gallery li.icon-video .secName:hover {
    color: #888
}

.cd-gallery li.icon-image .time,
.cd-gallery li.icon-video .time {
    margin-right: 10px;
    color: #bbb
}

.cd-gallery li.icon-video:before {
    content: "s";
    color: #fff
}

.cd-gallery li.icon-image:before {
    content: "t";
    color: #fff
}

.cd-filter,
.cd-filter::before {
    position: absolute;
    top: 0;
    z-index: 2;
    left: 0
}

.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
}

.cd-filter {
    width: 280px;
    height: 100%;
    background: #fff;
    box-shadow: 4px 4px 20px transparent;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .3s, box-shadow .3s;
    -moz-transition: -moz-transform .3s, box-shadow .3s;
    transition: transform .3s, box-shadow .3s
}

.cd-filter::before {
    content: '';
    height: 50px;
    width: 100%;
    background-color: #1d1d1d
}

.cd-filter .cd-close,
.cd-filter-trigger {
    position: absolute;
    top: 0;
    height: 50px;
    line-height: 50px;
    width: 60px;
    z-index: 3
}

.cd-filter form {
    padding: 70px 20px
}

.cd-filter .cd-close {
    right: 0;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    background: #37296a;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s
}

.no-touch .cd-filter .cd-close:hover {
    background: #32255f
}

.cd-filter.filter-is-visible {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, .2)
}

.cd-filter.filter-is-visible .cd-close {
    opacity: 1
}

.no-touch .cd-tab-filter a:hover {
    color: #1d1d1d
}

.cd-filter-trigger {
    left: 0;
    overflow: hidden;
    text-indent: 100%;
    color: transparent;
    white-space: nowrap
}

.cd-filter-block .cd-select::after,
.cd-filter-block h4::before {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    content: ''
}

.cd-filter-trigger.filter-is-visible {
    pointer-events: none
}

.cd-filter-block {
    margin-bottom: 1.6em
}

.cd-filter-block h4 {
    position: relative;
    margin-bottom: .2em;
    padding: 10px 0 10px 20px;
    color: #9a9a9a;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.3rem;
    user-select: none;
    cursor: pointer
}

.archivePage h2,
.no-touch .cd-filter-block h4:hover {
    color: #1d1d1d
}

.cd-filter-block h4::before {
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s
}

.cd-filter-block h4.closed::before {
    -webkit-transform: translateY(-50%) rotate(-90deg);
    -moz-transform: translateY(-50%) rotate(-90deg);
    -ms-transform: translateY(-50%) rotate(-90deg);
    -o-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg)
}

.cd-filter-block .checkbox-label::before,
.cd-filter-block .radio-label::before,
.cd-filter-block input,
.cd-filter-block select {
    font-family: "Open Sans", sans-serif;
    border-radius: 0;
    background-color: #fff;
    border: 2px solid #e6e6e6
}

.cd-filter-block input[type=search],
.cd-filter-block input[type=text],
.cd-filter-block select {
    width: 100%;
    padding: .8em;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    box-shadow: none
}

.cd-filter-block input[type=search]:focus,
.cd-filter-block input[type=text]:focus,
.cd-filter-block select:focus {
    outline: 0;
    background-color: #fff;
    border-color: #1d1d1d
}

.cd-filter-block input[type=search] {
    border-color: transparent;
    background-color: #e6e6e6;
    font-size: 1.6rem!important
}

.cd-filter-block input[type=search]::-webkit-search-cancel-button {
    display: none
}

.cd-filter-block .cd-select {
    position: relative
}

.cd-filter-block .cd-select::after {
    position: absolute;
    z-index: 1;
    right: 14px;
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
    transform: translateY(-50%)
}

.cd-filter-block select {
    cursor: pointer;
    font-size: 1.4rem
}

.cd-filter-block select::-ms-expand {
    display: none
}

.cd-filter-block .list li {
    position: relative;
    margin-bottom: .8em
}

.cd-filter-block .list li:last-of-type {
    margin-bottom: 0
}

.cd-filter-block input[type=checkbox],
.cd-filter-block input[type=radio] {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 2
}

.cd-filter-block .checkbox-label,
.cd-filter-block .radio-label {
    padding-left: 24px;
    font-size: 1.4rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cd-filter-block .checkbox-label::after,
.cd-filter-block .checkbox-label::before,
.cd-filter-block .radio-label::after,
.cd-filter-block .radio-label::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.matchesSchedule .allMatches .icon-downArrow:before,
.prayerTimes .main .icon-downArrow:before {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg)
}

.cd-filter-block .checkbox-label::before,
.cd-filter-block .radio-label::before {
    width: 16px;
    height: 16px;
    left: 0
}

.cd-filter-block .checkbox-label::after,
.cd-filter-block .radio-label::after {
    display: none
}

.cd-filter-block .checkbox-label::after {
    width: 16px;
    height: 16px
}

.cd-filter-block .radio-label::after,
.cd-filter-block .radio-label::before {
    border-radius: 50%
}

.cd-filter-block .radio-label::after {
    width: 6px;
    height: 6px;
    background-color: #fff;
    left: 5px
}

.cd-filter-block input[type=checkbox]:checked+label::before,
.cd-filter-block input[type=radio]:checked+label::before {
    border-color: #1d1d1d;
    background-color: #1d1d1d
}

.cd-filter-block input[type=checkbox]:checked+label::after,
.cd-filter-block input[type=radio]:checked+label::after {
    display: block
}

@-moz-document url-prefix() {
    .cd-filter-block .cd-select::after {
        display: none
    }
}

.innerListing .akhbarThemak {
    height: 552px
}

.innerListing .akhbarThemak.fixed {
    position: fixed
}

.datepicker-form .ui-datepicker-trigger {
    display: none
}

.datepicker-form .icon-date {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 35px;
    top: 35px;
    pointer-events: none;
    z-index: 2
}

.datepicker-form .icon-date:before {
    content: "c";
    color: #aaa;
    font-size: 30px;
    line-height: 1
}

.archivePage .cd-tab-filter {
    width: 100%;
    margin: 0
}

.archivePage .cd-tab-filter::after {
    display: inline-block
}

.archivePage .cd-tab-filter ul {
    position: absolute;
    width: 100%
}

.archivePage .cd-tab-filter li {
    display: none
}

.archivePage .cd-tab-filter li.placeholder {
    display: block!important
}

.archivePage .cd-tab-filter li.placeholder a:hover {
    color: #aaa
}

.archivePage .cd-tab-filter a {
    display: inline-block;
    width: 100%;
    padding-right: 12px
}

.archivePage .cd-tab-filter a.selected {
    background: #f2f2f2;
    color: #1d1d1d;
    box-shadow: none;
    padding-right: 12px
}

.innerListingContainer,
.listing {
    padding: 24px
}

.archivePage .cd-tab-filter.is-open ul li {
    display: block
}

.listing {
    width: calc(100% - 324px);
    margin-left: 24px
}

.listing .cd-gallery li {
    display: inline-block
}

.listing .cd-tab-filter-wrapper {
    display: none
}

.innerListingAds {
    width: 100%;
    display: inline-block;
    text-align: center
}

.authorsListing h3 {
    display: none
}

.authorsListing .cd-tab-filter {
    width: 100%;
    margin: 0
}

.authorsListing .cd-tab-filter::after {
    display: inline-block;
    left: 16px
}

.authorsListing .cd-tab-filter ul {
    display: inline-block;
    position: static;
    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;
    z-index: 1;
    direction: rtl;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #aaa;
    outline: 0
}

.authorsListing .cd-tab-filter li {
    display: none
}

.authorsListing .cd-tab-filter li.placeholder {
    display: block!important
}

.authorsListing .cd-tab-filter li.placeholder a:hover {
    color: #aaa
}

.authorsListing .cd-tab-filter a {
    display: inline-block;
    width: 100%;
    padding: 0
}

.authorsListing .cd-tab-filter a.selected {
    background: #f2f2f2;
    color: #1d1d1d;
    box-shadow: none;
    padding-right: 12px
}

.authorsListing .cd-tab-filter.is-open ul li {
    display: block
}

.authorsListing .cd-tab-filter-wrapper {
    z-index: 2;
    width: 100%;
    height: auto;
    float: right;
    display: inline-block;
    margin: 24px 0 0;
    padding: 24px;
    background: #f2f2f2;
    position: relative
}

.authorsListing .cd-tab-filter-wrapper:after {
    content: "";
    display: table;
    clear: both
}

.authorsListing .cd-gallery li {
    width: calc((100% - 72px)/ 4)
}

.authorsListing .cd-gallery li .desc.authorDesc {
    display: block
}

.authorsListing .cd-gallery li .desc.authorDesc p {
    height: 66px
}

.authorsListing .cd-gallery li .secName,
.authorsListing .cd-gallery li .time {
    display: none
}

.authorsListing .cd-gallery li .authorName {
    display: block;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #888;
    height: 28px;
    overflow: hidden
}

.author .authorData .data,
.author .cd-tab-filter ul {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    text-align: right;
    direction: rtl
}

.authorsListing .cd-gallery li .authorName:hover {
    color: #1d1d1d
}

.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;
    position: static;
    width: 100%;
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    cursor: text;
    padding: 0 12px;
    border: 1px solid #ddd;
    z-index: 1;
    color: #aaa;
    outline: 0
}

.author .cd-tab-filter li {
    display: none
}

.author .cd-tab-filter li.placeholder {
    display: block!important
}

.author .cd-tab-filter li.placeholder a:hover {
    color: #aaa
}

.author .cd-tab-filter a {
    display: inline-block;
    width: 100%;
    padding: 0
}

.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: 2;
    width: 100%;
    height: auto;
    float: right;
    display: inline-block;
    margin: 24px 0 0;
    padding: 24px;
    background: #f2f2f2;
    position: relative
}

.author .cd-tab-filter-wrapper:after {
    content: "";
    display: table;
    clear: both
}

.author .authorData {
    display: inline-block;
    width: 100%;
    margin: 24px 0 36px;
    box-shadow: none
}

.author .authorData img {
    width: 186px;
    height: 140px;
    float: right
}

.author .authorData .data {
    float: right;
    margin-right: 24px;
    width: calc(100% - 210px);
    display: inline-block;
    color: #1d1d1d
}

.author .authorData .data .name {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiBold, Arial;
    font-size: 22px;
    line-height: 1.2;
    float: right;
    margin-top: 5px
}

.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: 32px;
    overflow: hidden
}

.author .authorData .data .lastArtcl span {
    color: #888;
    margin-left: 5px
}

.author .authorData .data .date {
    font-size: 14px;
    color: #888;
    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 .cd-gallery li a .imageCntnr,
.author .cd-gallery li.icon-image:before,
.author .cd-gallery li.icon-video:before,
.author .cd-gallery li:after {
    display: none
}

.author .allArtclsTtl h2 {
    font-family: DroidKufiLight, Arial;
    font-size: 18px;
    color: #fff;
    text-align: right;
    direction: rtl;
    line-height: 2.2
}

.author .cd-gallery li .item:hover .desc p,
.author .cd-gallery li.icon-image .desc p,
.author .cd-gallery li.icon-video .desc p {
    color: #1d1d1d
}

.author .cd-gallery li {
    width: calc((100% - 24px)/ 2);
    padding: 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    margin-bottom: 24px
}

.author .cd-gallery li .authorDesc {
    position: relative;
    width: 100%
}

.author .cd-gallery li .authorDesc p {
    padding: 0;
    margin-bottom: 0;
    margin-right: 14px;
    width: calc(100% - 14px);
    line-height: 1.8
}

.author .cd-gallery li:hover .item .desc p {
    color: #888
}

.author .cd-gallery li .authorDesc:after {
    content: "";
    width: 4px;
    height: 28px;
    background: #aa120d;
    float: right;
    margin-left: 5px;
    margin-top: 2px;
    top: 0;
    right: 0;
    position: absolute
}

.author .cd-gallery li .articleDate {
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #888;
    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
}

.matchesSchedule .schedule {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 0;
    background: 0 0;
    box-shadow: none;
    margin-bottom: 0
}

.matchesSchedule .schedule .cd-gallery li {
    display: inline-block
}

.matchesSchedule .akhbarThemak {
    height: 552px
}

.matchesSchedule .allMatches .icon-downArrow:before {
    content: "q";
    position: absolute;
    left: 12px;
    line-height: 2.2;
    transform: rotate(-90deg)
}

.matchesSchedule .allMatches .wrapperDropdown:after {
    display: none
}

.matchesSchedule .allMatches .wrapperDropdown .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    max-height: 0;
    overflow: hidden
}

.matchesSchedule .allMatches .wrapperDropdown .dropdown li {
    padding: 0 10px
}

.matchesSchedule .allMatches .wrapperDropdown .dropdown li a {
    display: block;
    text-decoration: none;
    color: #888;
    padding: 10px 0;
    transition: all .3s ease-out;
    border-bottom: 1px solid #e6e8ea
}

.matchesSchedule .allMatches .wrapperDropdown .dropdown li:last-of-type a {
    border: none
}

.matchesSchedule .allMatches .wrapperDropdown .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle
}

.matchesSchedule .allMatches .wrapperDropdown .dropdown li:hover a {
    color: #1d1d1d
}

.matchesSchedule .allMatches .wrapperDropdown.active {
    border-radius: 0;
    background: #eee;
    box-shadow: none;
    border-bottom: none;
    color: #1d1d1d
}

.matchesSchedule .allMatches .wrapperDropdown.active:after {
    border-color: #aaa transparent
}

.matchesSchedule .allMatches .wrapperDropdown.active .dropdown {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    max-height: 400px;
    overflow: auto
}

.matchesSchedule .table {
    background: #fff;
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .1);
    padding: 24px
}

.matchesSchedule .table .allMatches {
    display: inline-block;
    width: 100%;
    margin: 24px 0 0
}

.matchesSchedule .table .allMatches .tabs-nav {
    position: static;
    top: 0;
    left: 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 24px
}

.matchesSchedule .table .allMatches .tabs-nav li {
    display: inline-block;
    width: auto;
    height: 50px;
    margin-left: 0
}

.matchesSchedule .table .allMatches .tabs-nav li>a {
    display: inline-block;
    height: 50px;
    width: auto;
    line-height: 50px;
    padding: 0 48px;
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    color: #aaa;
    background: 0 0
}

.matchesSchedule .table .allMatches .tabs-nav li .icon-date:before {
    content: "c";
    font-size: 22px;
    line-height: 2.5
}

.matchesSchedule .table .allMatches .tabs-nav li.tabs-selected>a {
    background: 0 0;
    color: #1d1d1d;
    box-shadow: inset 0 -2px 0 #1d1d1d
}

.matchesSchedule .table .allMatches .tabs-nav li>a:hover {
    color: #1d1d1d
}

.matchesSchedule .table .allMatches .tabs-nav li a.date {
    position: relative
}

.matchesSchedule .table .allMatches .tabs-nav li a.date .calendarDiv {
    position: absolute
}

.matchesSchedule .allMatches .dropDownDiv {
    margin-bottom: 24px
}

.matchesSchedule .allMatches h2 {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    color: #1d1d1d;
    font-size: 22px;
    text-align: right;
    direction: rtl;
    margin-bottom: 24px
}

.matchesSchedule .allMatches h2 span {
    color: #888;
    margin-right: 5px
}

.matchesSchedule .showCal .ui-datepicker {
    position: absolute;
    z-index: 2;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    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
}

.matchesSchedule .showCal.show .ui-datepicker {
    max-height: 250px;
    opacity: 1;
    visibility: visible
}

.matchesSchedule .table .allMatches .slide {
    height: auto
}

.matchesSchedule .table .allMatches .item {
    width: 100%;
    padding: 0;
    display: inline-block;
    margin-bottom: 24px
}

.matchesSchedule .table .allMatches .item:last-child {
    margin-bottom: 0
}

.matchesSchedule .table .allMatches .item .tourName {
    padding-bottom: 0;
    height: 46px;
    text-align: right;
    border-bottom: none;
    background: #474747;
    padding-right: 12px;
    margin-bottom: 4px;
    color: #fff;
    line-height: 2.6
}

.matchesSchedule .table .allMatches .item .match {
    display: inline-block;
    width: 100%;
    margin-bottom: 4px;
    background: #ececec;
    height: 70px;
    overflow: hidden;
    padding: 12px;
    float: right
}

.matchesSchedule .filterMainContent h3,
.prayerTimes .main .ttl h2:after {
    display: none
}

.matchesSchedule .table .allMatches .item .match:last-child {
    margin-bottom: 0
}

.matchesSchedule .table .allMatches .item .time {
    float: right;
    width: 50px;
    font-family: Arial;
    font-size: 18px;
    color: #1d1d1d;
    line-height: 2.8;
    text-align: center
}

.matchesSchedule .table .allMatches .item .time span {
    margin-top: 15px
}

.matchesSchedule .table .allMatches .item .time span.now {
    width: 50px;
    height: 26px;
    background: #006829;
    color: #fff!important;
    text-align: center;
    font-family: DroidKufiLight, arial;
    font-size: 14px!important;
    line-height: 2;
    margin: 10px auto 0!important;
    border-radius: 0!important
}

.matchesSchedule .table .allMatches .item .teamA,
.matchesSchedule .table .allMatches .item .teamB {
    float: right;
    width: calc((100% - 330px)/ 2);
    height: 46px
}

.matchesSchedule .table .allMatches .item .teamA img {
    float: left;
    margin-right: 12px;
    height: 46px;
    width: auto
}

.matchesSchedule .table .allMatches .item .teamB img {
    float: right;
    margin-left: 12px;
    height: 46px;
    width: auto
}

.matchesSchedule .table .allMatches .item .teamA p {
    float: left;
    padding-top: 0;
    text-align: left;
    line-height: 3.4
}

.matchesSchedule .table .allMatches .item .teamB p {
    float: right;
    padding-top: 0;
    text-align: right;
    line-height: 3.4
}

.matchesSchedule .table .allMatches .item .result {
    width: 160px
}

.matchesSchedule .table .allMatches .matchResult {
    margin-top: 2px
}

.matchesSchedule .table .allMatches .item .channel {
    float: right;
    width: 120px;
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    color: #1d1d1d;
    line-height: 3;
    direction: rtl;
    text-align: center
}

.matchesSchedule .listing {
    width: 100%;
    margin-bottom: 0
}

.prayerTimes .akhbarThemak {
    height: 552px
}

.prayerTimes .prayerTimesTable {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 0;
    background: 0 0;
    box-shadow: none;
    margin-bottom: 0
}

.prayerTimes .main {
    padding: 24px;
    background: url(http://www.masrawy.com/Images/mosqueBg.jpg) right center no-repeat;
    background-size: cover
}

.prayerTimes .main .ttl {
    border-bottom: none;
    margin-bottom: 24px
}

.prayerTimes .main .ttl h2 {
    color: #fff
}

.prayerTimes .main .location {
    display: inline-block;
    width: 100%;
    margin-bottom: 40px
}

.prayerTimes .main .cityDate {
    float: right;
    display: inline-block;
    margin-left: 24px;
    width: calc(100% - 324px)
}

.prayerTimes .main .cityDate .cityName {
    font-family: DroidKufiBold, Arial;
    font-size: 32px;
    color: #fff;
    direction: rtl;
    float: right
}

.prayerTimes .main .cityDate .cityName:after {
    content: "-";
    display: inline-block;
    float: left;
    margin: 0 15px;
    font-size: 36px
}

.prayerTimes .main .cityDate .countryName {
    font-family: DroidKufiBold, Arial;
    font-size: 32px;
    color: #fff;
    direction: rtl;
    float: right
}

.prayerTimes .main .cityDate date,
.prayerTimes .main .wrapperDropdown {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    text-align: right;
    direction: rtl
}

.prayerTimes .main .cityDate date {
    float: right;
    display: inline-block;
    width: 100%
}

.prayerTimes .main .dropDownDiv {
    display: inline-block;
    float: left;
    width: 300px;
    margin-bottom: 0;
    padding: 0;
    background: 0 0
}

.prayerTimes .main .wrapper-demo {
    display: inline-block;
    width: 100%;
    margin-bottom: 12px
}

.prayerTimes .main .wrapper-demo:last-child {
    margin-bottom: 0
}

.prayerTimes .main .wrapperDropdown {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 6px 12px;
    border: none;
    z-index: 1;
    outline: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.prayerTimes .main .wrapper-demo:first-child .wrapperDropdown {
    z-index: 2
}

.prayerTimes .main .icon-downArrow:before {
    content: "q";
    position: absolute;
    left: 12px;
    line-height: 2.2;
    transform: rotate(-90deg)
}

.contactUsDiv .contactForms .forms .icon-downArrow:before,
.weatherDiv .main .icon-downArrow:before {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg)
}

.prayerTimes .main .wrapperDropdown:after {
    display: none
}

.prayerTimes .main .wrapperDropdown .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    max-height: 0;
    overflow: hidden
}

.prayerTimes .main .wrapperDropdown .dropdown li {
    padding: 0 10px
}

.prayerTimes .main .wrapperDropdown .dropdown li a {
    display: block;
    text-decoration: none;
    color: #888;
    padding: 10px 0;
    transition: all .3s ease-out;
    border-bottom: 1px solid #e6e8ea
}

.prayerTimes .main .wrapperDropdown .dropdown li:last-of-type a {
    border: none
}

.prayerTimes .main .wrapperDropdown .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle
}

.prayerTimes .main .wrapperDropdown .dropdown li:hover a {
    color: #1d1d1d
}

.prayerTimes .main .wrapperDropdown.active {
    border-radius: 0;
    background: #eee;
    box-shadow: none;
    border-bottom: none;
    color: #1d1d1d
}

.prayerTimes .main .wrapperDropdown.active:after {
    border-color: #aaa transparent
}

.prayerTimes .main .wrapperDropdown.active .dropdown {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    max-height: 400px;
    overflow: auto
}

.prayerTimes .mainTable {
    display: inline-block;
    width: 100%
}

.prayerTimes .cntdwn {
    display: inline-block;
    width: 240px;
    float: right;
    text-align: right;
    margin: 0 0 0 36px
}

.prayerTimes .cntdwn p {
    display: inline-block;
    width: 100%;
    color: #fff;
    font-family: DroidKufiLight, arial;
    font-size: 18px;
    margin: 0 0 12px;
    text-align: right;
    direction: rtl
}

.prayerTimes .cntdwn p:first-child {
    font-size: 14px;
    margin-bottom: 10px
}

.prayerTimes .cntdwn p:first-child span {
    margin: 0 5px
}

.prayerTimes .cntdwn .timerDiv {
    display: inline-block;
    width: 228px;
    height: 50px;
    float: right
}

.prayerTimes .cntdwn .timerDiv ul {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    direction: ltr
}

.prayerTimes .cntdwn .timerDiv ul li {
    float: left;
    width: 60px;
    height: 50px;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 32px;
    position: relative;
    background: rgba(255, 255, 255, .2);
    margin-right: 24px;
    line-height: 1.5
}

.prayerTimes .cntdwn .timerDiv ul li:last-child {
    margin-right: 0
}

.prayerTimes .cntdwn .timerDiv ul li:nth-child(1):after,
.prayerTimes .cntdwn .timerDiv ul li:nth-child(2):after {
    content: ":";
    background: rgba(0, 0, 0, 0);
    color: #fff;
    display: block;
    font-size: 28px;
    position: absolute;
    top: 3px;
    right: -16px
}

.prayerTimes .mainTable .prayersTable {
    float: right;
    width: calc(100% - 276px)
}

.prayerTimes .mainTable .prayersTable .title {
    display: inline-block;
    width: 100%;
    float: right
}

.prayerTimes .mainTable .prayersTable .title .name {
    float: right;
    width: calc(100% / 6);
    font-family: DroidKufiBold, Arial;
    font-size: 16px;
    color: #1d1d1d;
    padding: 8px 0;
    text-align: center
}

.prayerTimes .mainTable .prayersTable .title .name.active {
    color: #119e9e
}

.prayerTimes .mainTable .prayersTable .title .name:nth-child(odd) {
    background: #ebebeb
}

.prayerTimes .mainTable .prayersTable .title .name:nth-child(even) {
    background: #f8f8f8
}

.prayerTimes .mainTable .prayersTable .allTimes {
    display: inline-block;
    width: 100%;
    float: right
}

.prayerTimes .mainTable .prayersTable .allTimes .time {
    float: right;
    width: calc(100% / 6);
    font-family: Arial;
    font-size: 26px;
    color: #888;
    padding: 16px 0;
    text-align: center;
    display: block
}

.prayerTimes .mainTable .prayersTable .allTimes .time span {
    display: block;
    font-size: 12px;
    font-family: DroidKufiLight, Arial;
    color: #1d1d1d;
    margin-top: 5px
}

.prayerTimes .mainTable .prayersTable .allTimes .time.active,
.prayerTimes .mainTable .prayersTable .allTimes .time.active span {
    color: #119e9e
}

.prayerTimes .mainTable .prayersTable .allTimes .time:nth-child(odd) {
    background: #f2f2f2
}

.prayerTimes .mainTable .prayersTable .allTimes .time:nth-child(even) {
    background: #fff
}

.prayerTimesTable button {
    display: inline-block;
    width: 280px;
    padding: 5px 0;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    background: #1d1d1d;
    border: none;
    margin: 0 calc((100% - 280px)/ 2) 40px
}

.prayerTimesTable button.hide,
.prayerTimesTable button:hover {
    background: #119e9e
}

.prayerTimesTable button:after {
    content: "عرض مواقيت الصلاة خلال شهر";
    display: block
}

.prayerTimesTable button.hide:after {
    content: "إخفاء مواقيت الصلاة خلال شهر"
}

.prayerTimes .monthTable {
    max-height: 0;
    margin-bottom: 0;
    visibility: hidden;
    opacity: 0;
    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
}

.prayerTimes .monthTable.show {
    max-height: 100%;
    visibility: visible;
    opacity: 1;
    margin-bottom: 40px
}

.prayerTimes .monthTable .prayersTable {
    float: right;
    width: 100%
}

.prayerTimes .monthTable .prayersTable .title {
    display: inline-block;
    width: 100%;
    float: right
}

.prayerTimes .monthTable .prayersTable .title .name {
    float: right;
    width: calc((100% - 220.1px)/ 6);
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    padding: 8px 0;
    text-align: center;
    background: #1d1d1d
}

.prayerTimes .monthTable .prayersTable .title .name:first-child {
    width: 220px
}

.prayerTimes .monthTable .prayersTable .allTimes {
    display: inline-block;
    width: 100%;
    float: right;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd
}

.prayerTimes .monthTable .prayersTable .allTimes .time {
    float: right;
    width: calc((100% - 220px)/ 6);
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    padding: 8px 0;
    text-align: center;
    display: block
}

.prayerTimes .monthTable .prayersTable .allTimes .time:first-child {
    width: 220px
}

.prayerTimes .monthTable .prayersTable .allTimes .time span {
    margin-left: 5px
}

.prayerTimes .monthTable .prayersTable .allTimes:nth-child(even) .time:first-child {
    background: #ebebeb
}

.prayerTimes .monthTable .prayersTable .allTimes:nth-child(even) .time,
.prayerTimes .monthTable .prayersTable .allTimes:nth-child(odd) .time:first-child {
    background: #f2f2f2
}

.prayerTimes .monthTable .prayersTable .allTimes:nth-child(odd) .time {
    background: #fff
}

.prayerTimes .monthTable .prayersTable .allTimes:nth-child(2) .time:first-child {
    background: #ddd;
    color: #119e9e
}

.prayerTimes .monthTable .prayersTable .allTimes:nth-child(2) .time {
    background: #e8e8e8;
    color: #119e9e
}

.weatherDiv .akhbarThemak {
    height: 552px
}

.weatherDiv .weatherCnts {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 0;
    background: 0 0;
    box-shadow: none;
    margin-bottom: 0
}

.weatherDiv .main {
    padding: 24px;
    background: url(http://www.masrawy.com/Images/weatherBg.jpg) right center no-repeat;
    background-size: cover
}

.weatherDiv .main .ttl {
    border-bottom: none;
    margin-bottom: 24px
}

.weatherDiv .ttl h2 {
    color: #fff
}

.weatherDiv .ttl h2:after {
    display: none
}

.weatherDiv .innerListingContainer .ttl {
    border-bottom: 1px solid #51c8f0
}

.weatherDiv .innerListingContainer .ttl h2 {
    color: #1d1d1d
}

.weatherDiv .innerListingContainer .ttl h2:after {
    display: block;
    background: #51c8f0
}

.weatherDiv .main .location {
    display: inline-block;
    width: 100%;
    margin-bottom: 24px
}

.weatherDiv .main .cityDate {
    float: right;
    display: inline-block;
    margin-left: 24px;
    width: calc(100% - 324px)
}

.weatherDiv .main .cityDate .cityName {
    font-family: DroidKufiBold, Arial;
    font-size: 32px;
    color: #fff;
    direction: rtl;
    float: right
}

.weatherDiv .main .cityDate .cityName:after {
    content: "-";
    display: inline-block;
    float: left;
    margin: 0 15px;
    font-size: 36px
}

.weatherDiv .main .cityDate .countryName {
    font-family: DroidKufiBold, Arial;
    font-size: 32px;
    color: #fff;
    direction: rtl;
    float: right
}

.weatherDiv .main .cityDate date,
.weatherDiv .main .wrapperDropdown {
    text-align: right;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    direction: rtl
}

.weatherDiv .main .cityDate date {
    float: right;
    display: inline-block;
    width: 100%
}

.weatherDiv .main .dropDownDiv {
    display: inline-block;
    float: left;
    width: 300px;
    margin-bottom: 0;
    padding: 0;
    background: 0 0
}

.weatherDiv .main .wrapper-demo {
    display: inline-block;
    width: 100%;
    margin-bottom: 12px
}

.weatherDiv .main .wrapper-demo:last-child {
    margin-bottom: 0
}

.weatherDiv .main .wrapperDropdown {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 6px 12px;
    border: none;
    z-index: 1;
    outline: 0;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.weatherDiv .main .wrapper-demo:first-child .wrapperDropdown {
    z-index: 2
}

.weatherDiv .main .icon-downArrow:before {
    content: "q";
    position: absolute;
    left: 12px;
    line-height: 2.2;
    transform: rotate(-90deg)
}

.weatherDiv .main .wrapperDropdown:after {
    display: none
}

.weatherDiv .main .wrapperDropdown .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    max-height: 0;
    overflow: hidden
}

.weatherDiv .main .wrapperDropdown .dropdown li {
    padding: 0 10px
}

.weatherDiv .main .wrapperDropdown .dropdown li a {
    display: block;
    text-decoration: none;
    color: #888;
    padding: 10px 0;
    transition: all .3s ease-out;
    border-bottom: 1px solid #e6e8ea
}

.weatherDiv .main .wrapperDropdown .dropdown li:last-of-type a {
    border: none
}

.weatherDiv .main .wrapperDropdown .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle
}

.weatherDiv .main .wrapperDropdown .dropdown li:hover a {
    color: #1d1d1d
}

.weatherDiv .main .wrapperDropdown.active {
    border-radius: 0;
    background: #eee;
    box-shadow: none;
    border-bottom: none;
    color: #1d1d1d
}

.weatherDiv .main .wrapperDropdown.active:after {
    border-color: #aaa transparent
}

.weatherDiv .main .wrapperDropdown.active .dropdown {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    max-height: 400px;
    overflow: auto
}

.weatherDiv .main .weatherIconCnts {
    float: right;
    width: 110px;
    margin-left: 48px
}

.weatherDiv .main .weatherIcon {
    width: 110px;
    margin: 0 calc((100% - 110px)/ 2)
}

.weatherDiv .main .weatherIcon.sunny {
    background: url(http://www.masrawy.com/images/weatherSprite.png) no-repeat;
    height: 110px;
    margin-top: 2px
}

.weatherDiv .main .weatherIcon.cloudy {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -130px no-repeat;
    height: 86px;
    margin-top: 14px
}

.weatherDiv .main .weatherIcon.partlycloudy {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -236px no-repeat;
    height: 98px;
    margin-top: 8px
}

.weatherDiv .main .weatherIcon.patchylightdrizzle {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -354px no-repeat;
    height: 114px;
    margin-top: 0
}

.weatherDiv .main .weatherIcon.lightdrizzle {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -488px no-repeat;
    height: 90px;
    margin-top: 12px
}

.weatherDiv .main .weatherIcon.lightrainshower,
.weatherDiv .main .weatherIcon.lightsleetshowers {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -354px no-repeat;
    height: 114px;
    margin-top: 0
}

.weatherDiv .main .weatherIcon.patchylightrain {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -488px no-repeat;
    height: 90px;
    margin-top: 12px
}

.weatherDiv .main .weatherIcon.patchyrainnearby {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -354px no-repeat;
    height: 114px;
    margin-top: 0
}

.weatherDiv .temp {
    width: 100%;
    display: inline-block;
    margin-bottom: 24px
}

.weatherDiv .temp .icon-high {
    float: right;
    font-family: Arial;
    color: #fff;
    font-size: 82px;
    position: relative;
    padding-right: 24px;
    margin-left: 48px;
    margin-top: 10px
}

.weatherDiv .temp .icon-high:before {
    content: "H";
    font-size: 24px;
    position: absolute;
    top: 0;
    right: 0
}

.weatherDiv .temp .icon-low {
    float: right;
    font-family: Arial;
    color: #fff;
    font-size: 60px;
    position: relative;
    padding-right: 18px;
    opacity: .5;
    margin-top: 28px
}

.weatherDiv .temp .icon-low:before {
    content: "H";
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0
}

.weatherDiv .weatherTable {
    float: right;
    width: 100%
}

.weatherDiv .weatherTable .title {
    display: inline-block;
    width: 100%;
    float: right
}

.weatherDiv .weatherTable .title .name {
    float: right;
    width: calc((100% / 3) - .1px);
    font-family: DroidKufiBold, Arial;
    font-size: 16px;
    color: #1d1d1d;
    padding: 8px 0;
    text-align: center
}

.weatherDiv .weatherTable .title .name.active {
    color: #119e9e
}

.weatherDiv .weatherTable .title .name:nth-child(odd) {
    background: #ebebeb
}

.weatherDiv .weatherTable .title .name:nth-child(even) {
    background: #f8f8f8
}

.weatherDiv .weatherTable .allTimes {
    display: inline-block;
    width: 100%;
    float: right
}

.weatherDiv .weatherTable .allTimes .dayTemp {
    float: right;
    width: calc((100% / 3) - .1px);
    height: 190px;
    padding: 16px 0;
    text-align: center;
    display: block
}

.weatherDiv .weatherTable .allTimes .dayTemp date {
    font-family: DroidKufiLight, Arial;
    color: #888;
    font-size: 14px;
    margin-bottom: 12px;
    display: inline-block
}

.weatherDiv .main .weatherDayIcon {
    width: 58px
}

.weatherDiv .main .weatherDayIcon.sunny {
    background: url(http://www.masrawy.com/images/weatherSprite.png) no-repeat;
    height: 58px;
    margin: 2px calc((100% - 58px)/ 2) 22px;
    background-size: 58px
}

.weatherDiv .main .weatherDayIcon.cloudy {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -68px no-repeat;
    height: 46px;
    margin: 8px calc((100% - 58px)/ 2) 28px;
    background-size: 58px
}

.weatherDiv .main .weatherDayIcon.partlycloudy {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -124px no-repeat;
    height: 52px;
    margin: 5px calc((100% - 58px)/ 2) 25px;
    background-size: 58px
}

.weatherDiv .main .weatherDayIcon.patchylightdrizzle {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -184px no-repeat;
    height: 62px;
    margin: 0 calc((100% - 58px)/ 2) 20px;
    background-size: 58px
}

.weatherDiv .main .weatherDayIcon.lightdrizzle {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -256px no-repeat;
    height: 48px;
    margin: 7px calc((100% - 58px)/ 2) 27px;
    background-size: 58px
}

.weatherDiv .main .weatherDayIcon.lightrainshower,
.weatherDiv .main .weatherDayIcon.lightsleetshowers {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -184px no-repeat;
    height: 62px;
    margin: 0 calc((100% - 58px)/ 2) 20px;
    background-size: 58px
}

.weatherDiv .main .weatherDayIcon.patchylightrain {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -256px no-repeat;
    height: 48px;
    margin: 7px calc((100% - 58px)/ 2) 27px;
    background-size: 58px
}

.weatherDiv .main .weatherDayIcon.patchyrainnearby {
    background: url(http://www.masrawy.com/images/weatherSprite.png) 0 -184px no-repeat;
    height: 62px;
    margin: 0 calc((100% - 58px)/ 2) 20px;
    background-size: 58px
}

.weatherDiv .dayTempDtls {
    display: inline-block
}

.weatherDiv .dayTempDtls .icon-high {
    float: right;
    font-family: Arial;
    color: #1d1d1d;
    font-size: 36px;
    position: relative;
    margin-left: 24px;
    text-align: left
}

.weatherDiv .dayTempDtls .icon-high:before {
    content: "H";
    font-size: 14px;
    position: absolute;
    top: -2px;
    right: -12px
}

.weatherDiv .dayTempDtls .icon-low {
    float: right;
    font-family: Arial;
    color: #888;
    font-size: 30px;
    position: relative;
    margin-top: 6px;
    text-align: right
}

.weatherDiv .dayTempDtls .icon-low:before {
    content: "H";
    font-size: 10px;
    position: absolute;
    top: -2px;
    right: -10px
}

.weatherDiv .weatherTable .allTimes .dayTemp:nth-child(odd) {
    background: #f2f2f2
}

.weatherDiv .weatherTable .allTimes .dayTemp:nth-child(even) {
    background: #fff
}

.currGoldDiv .akhbarThemak {
    height: 552px
}

.currGoldDiv .currencyDiv {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 0;
    background: 0 0;
    box-shadow: none;
    margin-bottom: 0
}

.currGoldDiv .main {
    padding: 24px
}

.currGoldDiv .ttl {
    border-bottom: 1px solid #f5c525
}

.currGoldDiv .ttl h2:after {
    background: #f5c525
}

.currGoldDiv .main h3 {
    display: inline-block;
    width: 100%;
    margin: 24px 0;
    font-family: DroidKufiLight, arial;
    font-size: 18px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl
}

.currGoldDiv .main h3 span {
    color: #888;
    margin-right: 5px
}

.currGoldDiv .currGoldTable {
    float: right;
    width: 100%;
    border: 1px solid #ddd
}

.currGoldDiv .currGoldTable .title {
    display: inline-block;
    width: 100%;
    float: right
}

.currGoldDiv .currGoldTable .title .name {
    float: right;
    width: calc(100% / 4);
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    padding: 8px 0;
    text-align: center;
    background: #1d1d1d
}

.currGoldDiv .currGoldTable .currGoldDtls {
    display: inline-block;
    width: 100%;
    float: right;
    height: 46px;
    overflow: hidden
}

.currGoldDiv .currGoldTable .currGoldDtls .item {
    float: right;
    width: calc(100% / 4);
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    line-height: 2.1;
    color: #1d1d1d;
    padding: 8px 0;
    text-align: center;
    display: block
}

.currGoldDiv .goldDiv .currGoldTable .currGoldDtls .item:first-child,
.currGoldDiv .goldDiv .currGoldTable .title .name:first-child {
    min-width: initial
}

.currGoldDiv .currGoldTable .currGoldDtls .item img {
    float: right;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin: 2px 10px 0
}

.currGoldDiv .currGoldTable .currGoldDtls .item p {
    line-height: 2.4;
    font-size: 14px
}

.currGoldDiv .currGoldTable .currGoldDtls:nth-child(even) .item:first-child {
    background: #ebebeb
}

.currGoldDiv .currGoldTable .currGoldDtls:nth-child(even) .item,
.currGoldDiv .currGoldTable .currGoldDtls:nth-child(odd) .item:first-child {
    background: #f2f2f2
}

.currGoldDiv .currGoldTable .currGoldDtls:nth-child(odd) .item {
    background: #fff
}

@media screen and (min-width:1024px) and (max-width:1162px) {
    .currGoldDiv .currGoldTable .currGoldDtls .item,
    .currGoldDiv .currGoldTable .title .name {
        width: calc((100% - 150px)/ 3)
    }
}

@media screen and (min-width:320px) and (max-width:638px) {
    .currGoldDiv .currGoldTable .currGoldDtls .item,
    .currGoldDiv .currGoldTable .title .name {
        width: calc((100% - 150px)/ 3)
    }
}

.currGoldDiv .goldDiv {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 0;
    background: 0 0;
    box-shadow: none;
    margin-bottom: 0
}

.currGoldDiv .goldDiv .currGoldTable .currGoldDtls .item,
.currGoldDiv .goldDiv .currGoldTable .title .name {
    width: calc(100% / 2)
}

.currGoldDiv .goldDiv .goldProvider {
    width: 300px;
    display: inline-block;
    margin: 24px calc((100% - 300px)/ 2) 0
}

.currGoldDiv .goldDiv .goldProvider p {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: center;
    cursor: default
}

.currGoldDiv .goldDiv .goldProvider p a {
    color: #888;
    cursor: pointer
}

.currGoldDiv .goldDiv .goldProvider a {
    display: inline-block;
    margin-top: 12px
}

.currGoldDiv .goldDiv .goldProvider a img {
    border: none
}

.contactUsDiv .contactUsCnts {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px
}

.contactUsDiv .contactForms .forms,
.contactUsDiv .contactForms h3 {
    width: 100%;
    display: inline-block
}

.contactUsDiv .akhbarThemak {
    height: 552px
}

.contactUsDiv .contactForms {
    background: 0 0;
    box-shadow: none;
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
    margin-bottom: 0
}

.contactUsDiv .contactForms h3 {
    margin: 24px 0 36px;
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    background: #f2f2f2;
    padding: 12px 24px
}

.contactUsDiv .contactForms .forms .item {
    display: inline-block;
    width: 100%;
    margin-bottom: 36px;
    position: relative
}

.contactUsDiv .contactForms .forms .item .labelDiv {
    float: right;
    width: 156px
}

.contactUsDiv .contactForms .forms .item .labelDiv label {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    direction: rtl;
    text-align: right;
    float: right
}

.contactUsDiv .contactForms .forms .item .labelDiv span {
    color: red;
    float: right;
    margin-right: 2px;
    line-height: 1.5
}

.contactUsDiv .contactForms .forms .item .errorMsg {
    position: absolute;
    top: 40px;
    right: 156px;
    display: inline-block;
    font-family: DroidKufiLight, Arial;
    font-size: 13px;
    color: red;
    direction: rtl;
    text-align: right;
    visibility: hidden
}

.contactUsDiv .contactForms .forms .item input,
.contactUsDiv .contactForms .forms .item textarea {
    width: calc(100% - 156px)!important;
    height: 40px!important;
    border: 1px solid #ddd;
    float: right;
    outline: 0;
    padding: 12px;
    font-family: DroidKufiLight, Arial;
    color: #888;
    font-size: 14px
}

.contactUsDiv .contactForms .forms .item textarea {
    height: 200px!important
}

.contactUsDiv .contactForms .forms .item .captcha {
    float: right
}

.contactUsDiv .contactForms .forms input[type=submit] {
    display: inline-block;
    width: 300px;
    padding: 5px 0;
    background: #aa120d;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border: none;
    margin: 24px calc((100% - 300px)/ 2);
    cursor: pointer
}

.contactUsDiv .contactForms .forms .wrapper-demo {
    display: inline-block;
    width: calc(100% - 156px);
    float: right
}

.contactUsDiv .contactForms .forms .wrapperDropdown {
    width: 100%;
    height: 40px!important;
    border: 1px solid #ddd;
    float: right;
    outline: 0;
    padding: 5px 12px;
    font-family: DroidKufiLight, Arial;
    color: #888;
    font-size: 14px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.contactUsDiv .contactForms .forms .icon-downArrow:before {
    content: "q";
    position: absolute;
    left: 12px;
    line-height: 2.2;
    transform: rotate(-90deg)
}

.contactUsDiv .contactForms .forms .wrapperDropdown:after {
    display: none
}

.contactUsDiv .contactForms .forms .wrapperDropdown .dropdown {
    position: absolute;
    width: calc(100% + 2px);
    top: 100%;
    left: 0;
    right: -1px;
    background: #fff;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    max-height: 0;
    overflow: hidden
}

.contactUsDiv .contactForms .forms .wrapperDropdown .dropdown li {
    padding: 0 10px
}

.contactUsDiv .contactForms .forms .wrapperDropdown .dropdown li a {
    display: block;
    text-decoration: none;
    color: #888;
    padding: 10px 0;
    transition: all .3s ease-out;
    border-bottom: 1px solid #e6e8ea
}

.contactUsDiv .contactForms .forms .wrapperDropdown .dropdown li:last-of-type a {
    border: none
}

.contactUsDiv .contactForms .forms .wrapperDropdown .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle
}

.contactUsDiv .contactForms .forms .wrapperDropdown .dropdown li:hover a {
    color: #1d1d1d
}

.contactUsDiv .contactForms .forms .wrapperDropdown.active {
    border-radius: 0;
    background: #eee;
    box-shadow: none;
    border-bottom: none;
    color: #1d1d1d
}

.contactUsDiv .contactForms .forms .wrapperDropdown.active:after {
    border-color: #aaa transparent
}

.contactUsDiv .contactForms .forms .wrapperDropdown.active .dropdown {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    max-height: 400px;
    overflow: auto
}

.contactUsDiv .contactAds {
    background: 0 0;
    box-shadow: none;
    margin-bottom: 0
}

.contactUsDiv .contactAds h3 {
    display: inline-block;
    width: 100%;
    margin: 24px 0;
    font-family: DroidKufiLight, arial;
    font-size: 18px;
    color: #fff;
    text-align: right;
    direction: rtl;
    background: #1d1d1d;
    padding: 12px 24px
}

.contactUsDiv .contactAds .ads {
    display: inline-block;
    width: 100%;
    margin: 0 0 12px
}

.contactUsDiv .contactAds .ads .item {
    display: inline-block;
    width: calc((100% - 24px)/ 2);
    position: relative;
    margin: 0 0 24px 24px;
    float: right
}

.contactUsDiv .contactAds .ads .item:nth-child(2n) {
    margin-left: 0
}

.contactUsDiv .contactAds .ads .item label {
    float: right;
    width: 100%;
    font-family: DroidKufiBold, Arial;
    font-size: 16px;
    color: #1d1d1d;
    direction: rtl;
    text-align: right
}

.contactUsDiv .contactAds .ads .item a,
.contactUsDiv .contactAds .ads .item p {
    float: right;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #888;
    direction: rtl;
    text-align: right
}

#gmap_canvas,
.contactUsDiv .contactAds .ads .item.phone p {
    direction: ltr
}

.contactUsDiv .contactAds .ads .item p {
    cursor: default
}

.contactUsDiv .contactAds .ads .item a {
    text-decoration: underline;
    color: #aa120d
}

#gmap_canvas {
    height: 450px;
    width: 100%
}

#gmap_canvas img {
    max-width: none!important;
    background: 0 0!important
}

#gmap_canvas strong {
    font-weight: 700
}

.zakahDiv .zakahCnts {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px
}

.zakahDiv .akhbarThemak {
    height: 552px
}

.zakahDiv .zakahForms {
    background: 0 0;
    box-shadow: none;
    padding-bottom: 12px;
    margin-bottom: 0
}

.zakahDiv .zakahForms h3,
.zakahDiv .zakahForms h4 {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, arial;
    padding: 12px 24px;
    direction: rtl;
    text-align: right
}

.zakahDiv .zakahForms h3 {
    margin: 24px 0 36px;
    font-size: 16px;
    color: #1d1d1d;
    background: #f2f2f2
}

.zakahDiv .zakahForms h4 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    background: #1d1d1d
}

.zakahDiv .zakahForms .forms .item,
.zakahDiv .zakahForms .forms .item .formItem {
    margin-bottom: 36px;
    position: relative;
    width: 100%;
    display: inline-block
}

.zakahDiv .zakahForms .forms {
    display: inline-block;
    width: 100%
}

.zakahDiv .zakahForms .forms .item .formItem {
    background: #f2f2f2;
    padding: 24px
}

.zakahDiv .zakahForms .forms .item .formItem:last-child {
    margin-bottom: 0
}

.zakahDiv .zakahForms .forms .item .top {
    display: inline-block;
    width: 100%;
    margin-bottom: 12px;
    position: relative
}

.zakahDiv .zakahForms .forms .item .labelDiv {
    float: right;
    width: 100%
}

.zakahDiv .zakahForms .forms .item .labelDiv label {
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    direction: rtl;
    text-align: right;
    float: right
}

.zakahDiv .zakahForms .forms .item .labelDiv span {
    color: red;
    float: right;
    margin-right: 2px;
    line-height: 1.5
}

.zakahDiv .zakahForms .forms .item .errorMsg {
    position: absolute;
    top: 40px;
    right: 156px;
    display: inline-block;
    font-family: DroidKufiLight, Arial;
    font-size: 13px;
    color: red;
    direction: rtl;
    text-align: right;
    visibility: hidden
}

.zakahDiv .zakahForms .forms .item input,
.zakahDiv .zakahForms .forms .item textarea {
    width: 100%!important;
    height: 40px!important;
    border: 1px solid #ddd;
    float: right;
    outline: 0;
    padding: 12px;
    font-family: DroidKufiLight, Arial;
    color: #888;
    font-size: 14px
}

.zakahDiv .zakahForms .forms .item textarea {
    height: 200px!important
}

.zakahDiv .zakahForms .forms .item .captcha {
    float: right
}

.zakahDiv .zakahForms .forms .calculate {
    display: inline-block;
    width: 300px;
    padding: 5px 0;
    background: #119e9e;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border: none;
    margin: 24px calc((100% - 300px)/ 2);
    cursor: pointer
}

.zakahDiv .zakahForms .forms .wrapper-demo {
    display: inline-block;
    width: calc(100% - 156px);
    float: right
}

.zakahDiv .zakahForms .forms .wrapperDropdown {
    width: 100%;
    height: 40px!important;
    border: 1px solid #ddd;
    float: right;
    outline: 0;
    padding: 5px 12px;
    font-family: DroidKufiLight, Arial;
    color: #888;
    font-size: 14px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.zakahDiv .zakahForms .forms .icon-downArrow:before {
    content: "q";
    position: absolute;
    left: 12px;
    line-height: 2.2;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.zakahDiv .zakahForms .forms .wrapperDropdown:after {
    display: none
}

.zakahDiv .zakahForms .forms .wrapperDropdown .dropdown {
    position: absolute;
    width: calc(100% + 2px);
    top: 100%;
    left: 0;
    right: -1px;
    background: #fff;
    border-radius: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    max-height: 0;
    overflow: hidden
}

.zakahDiv .zakahForms .forms .wrapperDropdown .dropdown li {
    padding: 0 10px
}

.zakahDiv .zakahForms .forms .wrapperDropdown .dropdown li a {
    display: block;
    text-decoration: none;
    color: #888;
    padding: 10px 0;
    transition: all .3s ease-out;
    border-bottom: 1px solid #e6e8ea
}

.zakahDiv .zakahForms .forms .wrapperDropdown .dropdown li:last-of-type a {
    border: none
}

.zakahDiv .zakahForms .forms .wrapperDropdown .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle
}

.zakahDiv .zakahForms .forms .wrapperDropdown .dropdown li:hover a {
    color: #1d1d1d
}

.zakahDiv .zakahForms .forms .wrapperDropdown.active {
    border-radius: 0;
    background: #eee;
    box-shadow: none;
    border-bottom: none;
    color: #1d1d1d
}

.surveyDiv .allQues .cd-popup-container,
.zakahDiv .zakahForms .cd-popup-container {
    box-shadow: 0 0 20px rgba(0, 0, 0, .4);
    -moz-transform: translateY(-40px);
    -webkit-backface-visibility: hidden
}

.zakahDiv .zakahForms .forms .wrapperDropdown.active:after {
    border-color: #aaa transparent
}

.zakahDiv .zakahForms .forms .wrapperDropdown.active .dropdown {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    max-height: 400px;
    overflow: auto
}

.zakahDiv .zakahForms .popupSetting {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .95);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s
}

.zakahDiv .zakahForms .popupSetting.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 9;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s
}

.zakahDiv .zakahForms .cd-popup-container {
    position: relative;
    padding: 24px;
    width: 700px;
    height: 430px;
    margin: 120px auto;
    background: #FFF;
    text-align: center;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s
}

.zakahDiv .zakahForms .cd-popup-container h2 {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiBold, Arial;
    font-size: 22px;
    color: #1d1d1d;
    margin-bottom: 24px;
    padding: 0
}

.zakahDiv .zakahForms .cd-popup-container #lblres,
.zakahDiv .zakahForms .cd-popup-container #txtGoldPriceValidation,
.zakahDiv .zakahForms .cd-popup-container .labelDiv label {
    font-size: 16px;
    color: #1d1d1d;
    line-height: 2.6;
    text-align: right;
    float: right;
    direction: rtl
}

.zakahDiv .zakahForms .cd-popup-container h2:after {
    display: none
}

.zakahDiv .zakahForms .cd-popup-container .labelDiv {
    display: inline-block;
    width: 100%;
    float: right;
    margin: 24px 0
}

.zakahDiv .zakahForms .cd-popup-container .labelDiv label {
    font-family: DroidKufiLight, Arial;
    width: 200px
}

.zakahDiv .zakahForms .cd-popup-container #txtGoldPriceValidation {
    font-family: DroidKufiLight, Arial
}

.zakahDiv .zakahForms .cd-popup-container #lblres {
    font-family: DroidKufiBold, Arial
}

.zakahDiv .zakahForms .cd-popup-container .labelDiv p {
    font-family: Arial;
    font-size: 32px;
    color: #119e9e;
    float: right
}

.zakahDiv .zakahForms .cd-popup-container .labelDiv span {
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d;
    margin-right: 5px;
    font-weight: 400
}

.zakahDiv .zakahForms .cd-popup-container .cd-popup-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px
}

.zakahDiv .zakahForms .cd-popup-container .cd-popup-close::after,
.zakahDiv .zakahForms .cd-popup-container .cd-popup-close::before {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #1d1d1d;
    opacity: .2;
    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
}

.zakahDiv .zakahForms .cd-popup-container .cd-popup-close:hover::after,
.zakahDiv .zakahForms .cd-popup-container .cd-popup-close:hover::before {
    opacity: 1
}

.zakahDiv .zakahForms .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)
}

.zakahDiv .zakahForms .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)
}

.zakahDiv .zakahForms .is-visible .cd-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

body.popupOverlay {
    position: fixed
}

.newsPointerDiv .newsPointer {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px;
    height: auto
}

.masrawyServicesDiv .akhbarThemak,
.newsPointerDiv .akhbarThemak {
    height: 552px
}

.masrawyServicesDiv .ttl {
    border-bottom: 1px solid #e2192c
}

.masrawyServicesDiv .ttl h2:after {
    background: #e2192c
}

.masrawyServicesDiv .services {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px;
    height: auto
}

.masrawyServicesDiv .services h3 {
    display: inline-block;
    width: 100%;
    margin: 24px 0;
    font-family: DroidKufiLight, arial;
    font-size: 18px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    background: #f2f2f2;
    padding: 12px 24px
}

.masrawyServicesDiv .services .servicesCnts {
    display: inline-block;
    width: 100%
}

.masrawyServicesDiv .services .servicesCnts .item {
    float: right;
    min-width: 300px;
    width: calc((100% - 24px)/ 2);
    margin: 0 0 24px 24px;
    border: 1px solid #ddd;
    text-align: center;
    padding: 24px
}

.masrawyServicesDiv .services .servicesCnts .item:nth-child(2n) {
    margin-left: 0
}

.masrawyServicesDiv .services .servicesCnts .item img {
    margin-bottom: 24px;
    border: none
}

.masrawyServicesDiv .services .servicesCnts .item h4 {
    font-family: Arial;
    font-size: 36px;
    color: #1d1d1d;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -2px
}

.masrawyServicesDiv .services .servicesCnts .item h5 {
    display: inline-block;
    width: 100%;
    margin: 24px 0;
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: center;
    direction: rtl;
    background: #f2f2f2;
    padding: 5px 0
}

.masrawyServicesDiv .services .servicesCnts .item p {
    display: inline-block;
    width: 100%;
    color: #1d1d1d;
    font-family: DroidKufiLight, arial;
    font-size: 14px;
    text-align: right;
    direction: rtl;
    height: 80px
}

.masrawyServicesDiv .services .servicesCnts .item button {
    width: 100%;
    padding: 5px 0;
    background: #1d1d1d;
    font-family: DroidKufiLight, Arial;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border: none;
    margin: 24px 0 0
}

.masrawyServicesDiv .services .servicesCnts .item.bulk {
    border: 1px solid #ef7d46
}

.masrawyServicesDiv .services .servicesCnts .item.bulk button {
    background: #ef7d46
}

.masrawyServicesDiv .services .servicesCnts .item.bulk button:hover {
    background: #d86c38
}

.masrawyServicesDiv .services .servicesCnts .item.jm {
    border: 1px solid #85c34a
}

.masrawyServicesDiv .services .servicesCnts .item.jm button {
    background: #85c34a
}

.masrawyServicesDiv .services .servicesCnts .item.jm button:hover {
    background: #6daa33
}

.masrawyServicesDiv .services .servicesCnts .item.vas {
    border: 1px solid #7e5ae2
}

.masrawyServicesDiv .services .servicesCnts .item.vas button {
    background: #7e5ae2
}

.masrawyServicesDiv .services .servicesCnts .item.vas button:hover {
    background: #6642c9
}

.masrawyServicesDiv .services .servicesCnts .item.bulk img {
    margin: 2px 0 25px
}

.masrawyServicesDiv .services .servicesCnts .item.jumia img {
    margin: 13px 0 36px
}

.masrawyServicesDiv .services .servicesCnts .item.mob img {
    margin: 2px 0 26px
}

@media screen and (min-width:1359px) and (max-width:1571px) {
    .masrawyServicesDiv .services .servicesCnts .item p {
        height: 108px
    }
}

@media screen and (min-width:1237px) and (max-width:1358px) {
    .masrawyServicesDiv .services .servicesCnts .item p {
        height: 135px
    }
}

@media screen and (min-width:1185px) and (max-width:1237px) {
    .masrawyServicesDiv .services .servicesCnts .item p {
        height: 162px
    }
}

@media screen and (min-width:1024px) and (max-width:1184px) {
    .masrawyServicesDiv .services .servicesCnts .item {
        min-width: 300px;
        width: 100%;
        margin: 0 0 24px
    }
    .masrawyServicesDiv .services .servicesCnts .item p {
        height: auto
    }
}

.pollListingDiv .akhbarThemak {
    height: 552px
}

.pollListingDiv .pollListing {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px;
    height: auto;
    min-height: 830px
}

.pollListingDiv .pollListing .allItems,
.pollListingDiv .pollListing .allItems ul li {
    padding: 12px 0;
    width: 100%;
    display: inline-block
}

.pollListingDiv .pollListing .allItems ul {
    display: inline-block;
    width: 100%
}

.pollListingDiv .pollListing .allItems ul li {
    border-bottom: 1px solid #eee
}

.pollListingDiv .pollListing .allItems ul li p {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    margin-bottom: 12px
}

.pollListingDiv .pollListing .allItems ul li .allButtons {
    display: inline-block;
    width: 100%
}

.pollListingDiv .pollListing .allItems ul li .allButtons button {
    float: right;
    margin-left: 5px;
    width: 100px;
    height: 30px;
    background: #1d1d1d;
    font-family: DroidKufiLight, Arial;
    text-align: center;
    font-size: 14px;
    color: #fff
}

.pollListingDiv .pollListing .allItems ul li .allButtons button:last-child {
    margin-left: 0
}

.pollListingDiv .pollListing .allItems ul li .allButtons button.results {
    background: #1d1d1d
}

.pollListingDiv .pollListing .allItems ul li .allButtons button.choices {
    background: #aa120d
}

.pollListingDiv .pollListing .allItems ul li .allButtons button.fb {
    background: #3d5698;
    width: 30px
}

.pollListingDiv .pollListing .allItems ul li .allButtons button.icon-fb:before {
    content: "u";
    font-size: 20px;
    line-height: 1.6
}

.pollListingDiv .pollListing .allItems ul li .allButtons button.tw {
    background: #219ff3;
    width: 30px
}

.pollListingDiv .pollListing .allItems ul li .allButtons button.icon-tw:before {
    content: "v";
    font-size: 20px;
    line-height: 1.5
}

.policyDiv .akhbarThemak {
    height: 552px
}

.policyDiv .policy {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px;
    height: auto;
    min-height: 830px
}

.policyDiv .policy .policyDtls {
    display: inline-block;
    width: 100%;
    padding: 24px 0
}

.policyDiv .policy .policyDtls .item {
    display: inline-block;
    width: 100%;
    margin-bottom: 40px
}

.policyDiv .policy .policyDtls .item:last-child {
    margin-bottom: 0
}

.policyDiv .policy .policyDtls ul {
    display: inline-block;
    width: 100%;
    padding-right: 36px
}

.policyDiv .policy .policyDtls a,
.policyDiv .policy .policyDtls li,
.policyDiv .policy .policyDtls p {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    margin: 12px 0;
    cursor: default
}

.policyDiv .policy .policyDtls li {
    list-style-type: square;
    display: list-item;
    margin: 24px 0
}

.loader,
.showcaseDiv {
    display: inline-block
}

.policyDiv .policy .policyDtls a {
    color: #aa120d;
    text-decoration: underline;
    cursor: pointer
}

.policyDiv .policy .policyDtls p.head {
    font-family: DroidKufiBold, Arial;
    font-size: 16px;
    margin: 0
}

.policyDiv .policy .policyDtls p.point {
    font-family: DroidKufiBold, Arial;
    font-size: 14px;
    margin: 12px 0 0
}

.policyDiv .policy .policyDtls p strong {
    font-family: DroidKufiBold, Arial;
    font-size: 13px
}

.content .mainMedia section {
    background: #1d1d1d
}

.content .mainMedia .featuredArea li {
    border: 1px solid #333
}

.content .mainMedia .ttl {
    border-bottom: none
}

.content .mainMedia .ttl h2,
.content .mainMedia .ttl h2 a {
    color: #fff
}

.billboardDiv .adTtl,
.leaderboardDiv .adTtl,
.monsterDiv .adTtl,
.showcaseDiv .adTtl {
    font-family: DroidKufiLight, arial;
    color: #aaa;
    font-size: 11px;
    line-height: 1.6;
    text-align: center
}

.content .mainMedia .ttl h2:after {
    background: #fff
}

.content .mainMedia .catPattern01 .allItems {
    padding: 5px 0 0
}

.content .mainMedia .catPattern01 ul li a img {
    border: 1px solid #333
}

.loader img,
.oneStickyDiv .onLogo img {
    border: none
}

.loader {
    width: 60px;
    margin: 24px calc((100% - 60px)/ 2)
}

.loader img {
    height: auto
}

.loader.grey {
    height: 206px;
    position: relative
}

.loader.grey img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px
}

.showcaseDiv {
    width: 300px;
    float: left;
    height: auto;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: none;
    min-width: 300px
}

.billboardDiv,
.leaderboardDiv {
    display: inline-block;
    box-shadow: none;
    float: none;
    overflow: hidden
}

.showcaseDiv .adTtl {
    background: #fff;
    width: 300px;
    height: 16px;
    cursor: default
}

.showcaseDiv .showcase {
    background: #ddd;
    width: 300px;
    height: auto
}

.billboardDiv {
    width: auto;
    height: auto;
    margin: 0 auto 40px;
    min-width: 728px
}

.billboardDiv .adTtl {
    background: #fff;
    width: auto;
    height: 16px;
    cursor: default
}

.billboardDiv .billboard {
    background: #ddd;
    width: auto;
    height: auto
}

.monsterDiv {
    display: inline-block;
    width: 300px;
    height: 616px;
    overflow: hidden;
    box-shadow: none;
    margin-left: 48px;
    min-width: 300px
}

.monsterDiv .adTtl {
    background: #fff;
    width: 300px;
    height: 16px;
    cursor: default
}

.monsterDiv .monster {
    background: #ddd;
    width: 300px;
    height: auto
}

.leaderboardDiv {
    width: auto;
    height: auto;
    margin: 0 auto 40px;
    min-width: 728px
}

.leaderboardDiv .adTtl {
    background: #fff;
    width: auto;
    height: 16px;
    cursor: default
}

.oneStickyDiv .onSlider li h3,
.oneStickyDiv .onSlider li p {
    font-size: 24px;
    display: inline-block;
    float: right;
    cursor: default
}

.leaderboardDiv .leaderboard {
    background: #ddd;
    width: auto;
    height: auto
}

.oneStickyDiv {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 51;
    visibility: visible;
    opacity: 1;
    transition: all .3s ease-in 0s;
    background: linear-gradient(270deg, #4c88c4, #345985);
    background: -webkit-linear-gradient(270deg, #4c88c4, #345985);
    background: -o-linear-gradient(270deg, #4c88c4, #345985);
    background: -moz-linear-gradient(270deg, #4c88c4, #345985);
    background: -ms-linear-gradient(270deg, #4c88c4, #345985);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c88c4', endColorstr='#345985', GradientType=0)
}

.oneStickyDiv .cnts {
    display: inline-block;
    width: calc(100% - 158px);
    margin: 0 74px 0 84px;
    position: relative
}

.oneStickyDiv .onLogo {
    float: right;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9
}

.oneStickyDiv .onSlider {
    float: right;
    display: inline-block;
    width: calc(100% - 108px);
    margin-right: 84px;
    height: 50px
}

.oneStickyDiv .onSlider li {
    display: inline-block;
    width: 100%;
    cursor: default
}

.oneStickyDiv .onSlider li h3 {
    font-family: DroidKufiBold, Arial;
    color: #cd1e25;
    margin-left: 24px;
    line-height: 2.2;
    background: #edf1f2;
    height: 50px;
    width: 100px;
    text-align: center
}

.oneStickyDiv .onSlider li p {
    font-family: DroidKufiLight, Arial;
    color: #edf1f2;
    line-height: 2;
    direction: rtl
}

.surveyDiv .questionsDiv h3,
.surveyDiv .timeLineDiv p {
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: right
}

.oneStickyDiv .bx-controls {
    display: none
}

.show-sponsor .oneStickyDiv,
.sponsorHome .oneStickyDiv {
    visibility: hidden;
    opacity: 0
}

.surveyDiv .akhbarThemak {
    height: 552px
}

.surveyDiv .questionsDiv {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px;
    height: auto;
    min-height: 830px
}

.surveyDiv .questionsDiv h3,
.surveyDiv .timeLineDiv,
.surveyDiv .timeLineDiv ul {
    width: 100%;
    display: inline-block
}

.surveyDiv .questionsDiv h3 {
    margin: 24px 0 36px;
    direction: rtl;
    background: #f2f2f2;
    padding: 12px 24px
}

.surveyDiv .timeLineDiv p {
    margin-bottom: 12px;
    cursor: default
}

.surveyDiv .timeLineDiv p span {
    color: #c15709
}

.surveyDiv .timeLineDiv ul {
    margin: 0
}

.surveyDiv .timeLineDiv ul li {
    display: inline-block;
    width: calc(100% / 13);
    float: right;
    cursor: default
}

.surveyDiv .timeLineDiv li:before {
    content: "";
    background-color: #cfcfcf!important;
    border-radius: 100px;
    z-index: 9;
    float: left;
    width: 14px;
    height: 14px;
    margin: 0;
    position: relative;
    cursor: default
}

.surveyDiv .timeLineDiv li:after,
.surveyDiv .timeLineDiv ul:after {
    display: block;
    height: 2px;
    top: 6px;
    width: 100%;
    position: relative;
    content: "";
    right: 0
}

.surveyDiv .timeLineDiv li.checked:before {
    background-color: #c15709!important
}

.surveyDiv .timeLineDiv li:after {
    background-color: #cfcfcf!important;
    z-index: 10
}

.surveyDiv .timeLineDiv li.checked:after {
    background-color: #c15709!important
}

.surveyDiv .timeLineDiv ul:after {
    background-color: #cfcfcf!important
}

.surveyDiv .allQues h4 {
    color: #1d1d1d;
    font-family: DroidKufiBold, arial;
    font-size: 24px;
    margin: 60px 0 24px;
    text-align: center;
    background: #f2f2f2;
    padding: 5px 0
}

.surveyDiv .allQues .answersDiv {
    display: inline-block;
    width: 100%
}

.surveyDiv .allQues .answersDiv .answerItem {
    float: right;
    display: inline-block;
    margin-left: 24px;
    margin-bottom: 24px;
    width: calc((100% - 72px)/ 4);
    cursor: pointer
}

.surveyDiv .allQues .answersDiv .answerItem:nth-child(4n) {
    margin-left: 0
}

.surveyDiv .allQues .answersDiv .answerItem .imgMask {
    display: inline-block;
    width: 100%;
    position: relative
}

.surveyDiv .allQues .answersDiv .answerItem.selected .imgMask:before {
    content: "";
    background: rgba(0, 0, 0, .5);
    text-align: center;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1
}

.surveyDiv .allQues .answersDiv .answerItem.selected .imgMask:after {
    content: "3";
    color: #fff;
    font-size: 72px;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    line-height: 1;
    margin: -36px 0 0 -36px
}

.surveyDiv .allQues .answersDiv .answerItem .imgMask img {
    width: 100%;
    height: auto
}

.surveyDiv .allQues .answersDiv .answerItem p {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #1d1d1d;
    padding: 5px 0
}

.surveyDiv .allQues .answersDiv .answerItem.selected p {
    color: #c15709
}

.surveyDiv .allQues .nxtPrevDiv {
    width: 300px;
    height: 40px;
    margin: 24px calc((100% - 300px)/ 2)
}

.surveyDiv .allQues .nxtPrevDiv .btn {
    width: 144px;
    height: 40px;
    background: #c15709;
    float: left;
    margin-right: 12px;
    text-align: center;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff
}

.surveyDiv .allQues .nxtPrevDiv .btn:last-child {
    margin-right: 0
}

.surveyDiv .allQues .nxtPrevDiv .btn a {
    color: #fff;
    float: right;
    padding: 4px 40px
}

.surveyDiv .allQues .nxtPrevDiv .btn a.prev {
    padding: 4px 37px
}

.surveyDiv .allQues .nxtPrevDiv .btn a.next {
    padding: 4px 40px
}

.surveyDiv .allQues .nxtPrevDiv .btn a.prev:before {
    content: "r";
    line-height: 2;
    float: right;
    margin-left: 5px
}

.surveyDiv .allQues .nxtPrevDiv .btn a.next:after {
    content: "q";
    line-height: 2;
    float: left;
    margin-right: 5px
}

.surveyDiv .allQues .chooseAnswer {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .95);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s
}

.surveyDiv .allQues .chooseAnswer.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 10;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s
}

.surveyDiv .allQues .cd-popup-container {
    position: relative;
    padding: 24px;
    width: 420px;
    height: 180px;
    top: 50%;
    margin: -90px auto;
    background: #FFF;
    text-align: center;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s
}

.surveyDiv .allQues .chooseAnswer p {
    font-family: DroidKufiLight, Arial;
    font-size: 18px;
    color: #1d1d1d;
    direction: rtl;
    float: right;
    display: inline-block;
    width: 100%;
    margin-top: 24px
}

.surveyDiv .allQues .chooseAnswer .ok {
    position: absolute;
    bottom: 24px;
    left: 0;
    display: inline-block;
    width: 100px;
    padding: 5px 0;
    background: #c15709;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border: none;
    margin: 24px calc((100% - 100px)/ 2) 0;
    cursor: pointer
}

.surveyDiv .allQues .cd-popup-container .cd-popup-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px
}

.surveyDiv .allQues .cd-popup-container .cd-popup-close::after,
.surveyDiv .allQues .cd-popup-container .cd-popup-close::before {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #1d1d1d;
    opacity: .2;
    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
}

.surveyDiv .allQues .cd-popup-container .cd-popup-close:hover::after,
.surveyDiv .allQues .cd-popup-container .cd-popup-close:hover::before {
    opacity: 1
}

.surveyDiv .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)
}

.surveyDiv .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)
}

.surveyDiv .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)
}

.surveyDiv .resultDiv {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px;
    height: auto;
    min-height: 830px
}

.surveyDiv .resultDiv h3 {
    display: inline-block;
    width: 100%;
    margin: 24px 0 36px;
    font-family: DroidKufiLight, arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    background: #f2f2f2;
    padding: 12px 24px;
    float: right
}

.surveyDiv .resultDiv h3 span {
    color: #c15709;
    font-weight: 700;
    line-height: 1.4;
    margin-right: 5px;
    font-size: 20px
}

.surveyDiv .resultDiv .grid-wrap {
    margin: 0;
    padding: 0;
    box-shadow: none
}

.surveyDiv .resultDiv .grid {
    margin: 0 auto;
    height: auto!important
}

.surveyDiv .resultDiv .grid li {
    min-width: 300px;
    width: calc((100% - 48px)/ 3);
    margin-left: 24px;
    margin-bottom: 24px;
    float: right;
    cursor: pointer;
    padding: 12px;
    border: 1px solid #ddd;
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .1)
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem:last-child,
.surveyDiv .resultDiv .grid li:nth-child(3n) {
    margin-left: 0
}

.surveyDiv .resultDiv .grid li .answersDiv,
.surveyDiv .resultDiv .grid li h2 {
    width: 100%;
    margin-bottom: 12px;
    display: inline-block
}

.surveyDiv .resultDiv .grid li h2 {
    color: #1d1d1d;
    background: #ddd;
    padding: 5px 0;
    font-family: DroidKufiBold, Arial;
    font-size: 16px;
    text-align: center
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem {
    float: right;
    width: calc(100% / 3);
    display: inline-block
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem:nth-child(odd) {
    background: #fff
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem:nth-child(even) {
    background: #f2f2f2
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem img {
    width: 100%;
    height: auto
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem p {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d;
    padding: 8px 0;
    line-height: 1.5;
    height: 70px;
    overflow: hidden
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem span {
    color: #1d1d1d;
    font-family: arial;
    font-size: 32px;
    width: 100%;
    text-align: center;
    display: inline-block;
    margin-top: 12px
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem span:after {
    content: "%";
    font-size: 18px
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem:nth-child(1) span {
    color: #fbb03b;
    border-bottom: 4px solid #fbb03b
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem:nth-child(2) span {
    color: #45bb61;
    font-size: 42px;
    line-height: .9;
    border-bottom: 4px solid #45bb61
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem:nth-child(2) span:after {
    font-size: 22px
}

.surveyDiv .resultDiv .grid li .answersDiv .answerItem:nth-child(3) span {
    color: #f44;
    border-bottom: 4px solid #f44
}

.surveyDiv .resultDiv .grid li .more {
    display: inline-block;
    width: 100%;
    padding: 5px 0;
    background: #c15709;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #fff;
    text-align: center
}

.surveyDiv .resultDiv .surveyCompleted {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .95);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s
}

.surveyDiv .resultDiv .surveyCompleted.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 10;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s
}

.surveyDiv .resultDiv .cd-popup-container {
    position: relative;
    padding: 24px;
    width: 420px;
    height: 180px;
    top: 50%;
    margin: -90px auto;
    background: #FFF;
    text-align: center;
    box-shadow: 0 0 20px rgba(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: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s
}

.surveyDiv .resultDiv .surveyCompleted p {
    font-family: DroidKufiLight, Arial;
    font-size: 18px;
    color: #1d1d1d;
    direction: rtl;
    float: right;
    display: inline-block;
    width: 100%;
    margin-top: 24px
}

.surveyDiv .resultDiv .surveyCompleted .ok {
    position: absolute;
    bottom: 24px;
    left: 0;
    display: inline-block;
    width: 100px;
    padding: 5px 0;
    background: #c15709;
    font-family: DroidKufiLight, Arial;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border: none;
    margin: 24px calc((100% - 100px)/ 2) 0;
    cursor: pointer
}

.surveyDiv .resultDiv .cd-popup-container .cd-popup-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 36px;
    height: 36px
}

.surveyDiv .resultDiv .cd-popup-container .cd-popup-close::after,
.surveyDiv .resultDiv .cd-popup-container .cd-popup-close::before {
    content: '';
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: #1d1d1d;
    opacity: .2;
    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
}

.surveyDiv .resultDiv .cd-popup-container .cd-popup-close:hover::after,
.surveyDiv .resultDiv .cd-popup-container .cd-popup-close:hover::before {
    opacity: 1
}

.surveyDiv .resultDiv .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)
}

.surveyDiv .resultDiv .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)
}

.surveyDiv .resultDiv .is-visible .cd-popup-container {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

.surveyDiv .resultDiv .slideshow {
    position: fixed;
    background: rgba(0, 0, 0, .85);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transition: opacity .5s, visibility 0s .5s;
    transition: opacity .5s, visibility 0s .5s
}

.surveyDiv .resultDiv .slideshow-open .slideshow {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.surveyDiv .resultDiv .slideshow ul {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 150px);
    transform: translate3d(0, 0, 150px);
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s
}

.surveyDiv .resultDiv .slideshow ul.animatable li {
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s
}

.surveyDiv .resultDiv .slideshow-open .slideshow ul {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.surveyDiv .resultDiv .slideshow li {
    width: 660px;
    height: 730px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -365px 0 0 -330px;
    visibility: hidden;
    transition: none
}

.surveyDiv .resultDiv .slideshow li h2 {
    color: #1d1d1d;
    background: #f2f2f2;
    padding: 5px 0;
    font-family: DroidKufiBold, Arial;
    font-size: 22px;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-bottom: 12px
}

.surveyDiv .resultDiv .slideshow li .answersDiv {
    display: inline-block;
    width: 100%
}

.surveyDiv .resultDiv .slideshow li .answersDiv .answerItem {
    float: right;
    width: calc((100% - 36px)/ 4);
    display: inline-block;
    margin-left: 12px;
    margin-bottom: 24px
}

.surveyDiv .resultDiv .slideshow li .answersDiv .answerItem:nth-child(4n) {
    margin-left: 0
}

.surveyDiv .resultDiv .slideshow li .answersDiv .answerItem img {
    width: 100%;
    height: auto
}

.surveyDiv .resultDiv .slideshow li .answersDiv .answerItem p {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d;
    padding: 8px 0 0;
    line-height: 1.5;
    overflow: hidden;
    height: 50px
}

.surveyDiv .resultDiv .slideshow li .answersDiv .answerItem span {
    color: #888;
    font-family: arial;
    font-size: 24px;
    width: 100%;
    text-align: center;
    display: inline-block
}

.popupOverlay #OptDiv,
.popupOverlay .sponsorBanner,
.popupOverlay .sponsorBtnText,
.srvyRslts #OptDiv,
.srvyRslts .morphSearchDiv,
.srvyRslts .sponsorBanner,
.srvyRslts .sponsorBtnText,
.srvyRslts footer,
.srvyRslts header {
    display: none
}

.surveyDiv .resultDiv .slideshow li .answersDiv .answerItem span:after {
    content: "%";
    font-size: 18px
}

.surveyDiv .resultDiv .slideshow li.show {
    visibility: visible
}

.surveyDiv .resultDiv .slideshow li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .8);
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.surveyDiv .resultDiv .slideshow li.current:after {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s, visibility 0s .3s;
    transition: opacity .3s, visibility 0s .3s
}

.surveyDiv .resultDiv .slideshow figure {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 24px solid #fff;
    overflow: hidden
}

.surveyDiv .resultDiv .slideshow nav span {
    position: fixed;
    z-index: 1000;
    color: #59656c;
    text-align: center;
    padding: 3% 1%;
    cursor: pointer;
    font-size: 2.2em
}

.surveyDiv .resultDiv .slideshow nav span.nav-next,
.surveyDiv .resultDiv .slideshow nav span.nav-prev {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.surveyDiv .resultDiv .slideshow nav span.nav-next {
    left: 0
}

.surveyDiv .resultDiv .slideshow nav span.nav-prev {
    right: 0
}

.surveyDiv .resultDiv .slideshow nav span.icon-prev:before {
    content: "5";
    color: #1d1d1d;
    font-size: 36px
}

.surveyDiv .resultDiv .slideshow nav span.icon-next:before {
    content: "4";
    color: #1d1d1d;
    font-size: 36px
}

.surveyDiv .resultDiv .slideshow nav span.nav-close {
    top: 12px;
    left: 0;
    padding: .5em .8em;
    color: #fff
}

.surveyDiv .resultDiv .slideshow nav span.nav-close::after,
.surveyDiv .resultDiv .slideshow nav span.nav-close::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 3px;
    opacity: 1;
    background: #fff;
    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
}

.surveyDiv .resultDiv .slideshow nav span.nav-close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.surveyDiv .resultDiv .slideshow nav span.nav-close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.srvyRslts .cd-main-content {
    background: #1d1d1d
}

.rssDiv .rssCnts {
    width: calc(100% - 324px);
    margin-left: 24px;
    padding: 24px
}

.rssDiv .akhbarThemak {
    height: 552px
}

.rssDiv .rssCnts .info {
    display: inline-block;
    width: 100%;
    margin: 24px 0 36px;
    direction: rtl;
    background: #f2f2f2;
    padding: 12px 24px
}

.rssDiv .rssCnts .info h3 {
    display: inline-block;
    width: 100%;
    font-family: DroidKufiBold, arial;
    font-size: 16px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    font-weight: 700
}

.rssDiv .rssCnts .info ul {
    display: inline-block;
    width: 100%;
    padding-right: 30px
}

.rssDiv .rssCnts .info li {
    display: list-item;
    width: 100%;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d;
    text-align: right;
    direction: rtl;
    margin: 12px 0;
    cursor: default;
    list-style-type: square
}

.rssDiv .rssCnts .allItems {
    display: inline-block;
    width: 100%
}

.rssDiv .rssCnts .allItems .item {
    display: inline-block;
    width: 100%;
    padding: 10px 12px;
    background: #f2f2f2;
    cursor: pointer;
    float: right;
    margin-bottom: 12px;
    max-height: 50px;
    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
}

.rssDiv .rssCnts .allItems .item.open {
    max-height: 800px
}

.rssDiv .rssCnts .allItems .icon-downArrow {
    position: relative
}

.rssDiv .rssCnts .allItems .icon-downArrow:before {
    content: "q";
    position: absolute;
    left: 12px;
    top: 12px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    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
}

.rssDiv .rssCnts .allItems .icon-downArrow.open:before {
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
    -ms-transform: rotate(-270deg);
    -o-transform: rotate(-270deg);
    transform: rotate(-270deg)
}

.rssDiv .rssCnts .allItems .item p {
    float: right;
    font-family: DroidKufiBold, Arial;
    font-size: 16px;
    color: #1d1d1d;
    margin-bottom: 12px
}

.rssDiv .rssCnts .allItems .item p:after {
    content: "";
    width: 4px;
    height: 18px;
    float: right;
    margin-left: 8px;
    margin-top: 7px
}

.rssDiv .rssCnts .allItems .item.news p:after {
    background: #aa120d
}

.rssDiv .rssCnts .allItems .item.arts p:after {
    background: #c15709
}

.rssDiv .rssCnts .allItems .item.lifeStyle p:after {
    background: #9224a5
}

.rssDiv .rssCnts .allItems .item.sports p:after {
    background: #006829
}

.rssDiv .rssCnts .allItems .item.autos p:after {
    background: #1877b6
}

.rssDiv .rssCnts .allItems .item.islameyat p:after {
    background: #119e9e
}

.rssDiv .rssCnts .allItems .item img {
    float: left;
    margin-top: 5px;
    border: none
}

.rssDiv .rssCnts .allItems .item .itemExpand {
    width: 100%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    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
}

.rssDiv .rssCnts .allItems .item.open .itemExpand {
    display: inline-block;
    height: auto;
    visibility: visible;
    opacity: 1
}

.rssDiv .rssCnts .allItems .item .itemExpand li {
    display: inline-block;
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
    float: right;
    margin-bottom: 2px
}

.mobile.seatNumber,
.rssDiv .rssCnts .allItems .item .itemExpand li p:after {
    display: none
}

.rssDiv .rssCnts .allItems .item .itemExpand li p {
    float: right;
    font-family: DroidKufiLight, Arial;
    font-size: 14px;
    color: #1d1d1d;
    margin-bottom: 0
}

img.lazy {
    background: url(http://www.masrawy.com/Images/lazyLoadBG.jpg) top left no-repeat;
    background-size: 100%;
    position: relative
}

img.lazy:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 80%;
    height: 100%;
    opacity: .7;
    animation: lazyPosition 2s ease infinite;
    background: linear-gradient(0deg, transparent, #eee, transparent);
    background: -webkit-linear-gradient(0deg, transparent, #eee, transparent);
    background: -o-linear-gradient(0deg, transparent, #eee, transparent);
    background: -moz-linear-gradient(0deg, transparent, #eee, transparent);
    background: -ms-linear-gradient(0deg, transparent, #eee, transparent)
}

@keyframes lazyPosition {
    from {
        left: -100%
    }
    to {
        left: 200%
    }
}

.article .strip {
    display: inline-block;
    margin-bottom: 20px
}

.article .strip img {
    width: 100%;
    height: auto
}

@media screen and (max-width:60em) {
    .surveyDiv .resultDiv .grid li {
        width: 33.3%
    }
    .surveyDiv .resultDiv .slideshow li {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0
    }
    .surveyDiv .resultDiv .slideshow li figure img {
        width: auto;
        margin: 0 auto;
        max-width: 100%
    }
    .surveyDiv .resultDiv .slideshow nav span,
    .surveyDiv .resultDiv .slideshow nav span.nav-close {
        font-size: 1.8em;
        padding: .3em
    }
    .surveyDiv .resultDiv .info-keys {
        display: none
    }
}

@media screen and (max-width:35em) {
    .surveyDiv .resultDiv .grid li {
        width: 50%
    }
}

@media screen and (max-width:24em) {
    .surveyDiv .resultDiv .grid li {
        width: 100%
    }
}

@media only screen and (max-height:690px) {
    .surveyDiv .resultDiv .slideshow nav span.nav-close::after,
    .surveyDiv .resultDiv .slideshow nav span.nav-close::before {
        background: #1d1d1d
    }
}

@media screen and (min-width:1601px) and (max-width:1950px) {
    .show-sponsor .sponsor,
    .sponsorHome .sponsor {
        margin-right: 0;
        width: 100%
    }
    .sponsorBtnText {
        left: calc(((100% - 1440px)/ 2) + 26px)
    }
    .show-sponsor .sponsorBtnText,
    .sponsorHome .sponsorBtnText {
        left: calc(((100% - 1440px)/ 2) + 18px)
    }
    .sponsor .sponsorLogoBtn {
        left: calc(((100% - 1440px)/ 2) - 72px)
    }
    .akhbarThemak {
        height: 560px
    }
    .akhbarThemak li {
        height: 85px
    }
    .sponsorBanner {
        margin-right: calc(((100% - 1440px)/ 2) - 73px)
    }
    .sponsor .content {
        background-size: 1584px!important
    }
    .show-sponsor .sponsorBanner,
    .sponsorHome .sponsorBanner {
        margin-right: calc(((100% - 1440px)/ 2) - 72px)
    }
    .oneStickyDiv .cnts {
        width: 1440px;
        margin: 0 calc((100% - 1440px)/ 2)
    }
}

@media screen and (min-width:1185px) and (max-width:1508px) {
    .surveyDiv .allQues .answersDiv .answerItem {
        width: calc((100% - 48px)/ 3)
    }
    .surveyDiv .allQues .answersDiv .answerItem:nth-child(4n) {
        margin-left: 24px
    }
    .surveyDiv .allQues .answersDiv .answerItem:nth-child(3n) {
        margin-left: 0
    }
    .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 screen and (min-width:1024px) and (max-width:1184px) {
    .surveyDiv .allQues .answersDiv .answerItem {
        width: calc((100% - 24px)/ 2)
    }
    .surveyDiv .allQues .answersDiv .answerItem:nth-child(4n) {
        margin-left: 24px
    }
    .surveyDiv .allQues .answersDiv .answerItem:nth-child(2n) {
        margin-left: 0
    }
    .surveyDiv .resultDiv .grid li {
        width: 100%;
        margin-left: 0
    }
}

@media screen and (max-width:660px) {
    footer .top .cnts {
        width: 560px;
        margin: 0 calc((100% - 560px)/ 2)
    }
    footer .top .cnts h2 {
        font-size: 16px;
        line-height: 2.5
    }
    footer .top .cnts .subTxt button,
    footer .top .cnts .subTxt input {
        font-size: 14px
    }
}

@media screen and (min-width:776px) and (max-width:1338px) {
    footer .middle .navMenu ul .has-children {
        margin-left: calc((100% - 480px)/ 3);
        margin-bottom: 24px
    }
    footer .middle .navMenu ul .has-children:nth-child(4) {
        width: 84px;
        margin-left: 0
    }
    footer .middle .navMenu ul .has-children:last-child {
        width: 117px;
        margin-left: 24px
    }
}

@media screen and (min-width:630px) and (max-width:775px) {
    footer .middle .navMenu {
        width: calc(100% - 96px);
        padding: 10px 0;
        margin: 0 48px
    }
    footer .middle .navMenu ul .has-children {
        margin-left: calc((100% - 480px)/ 3);
        margin-bottom: 24px
    }
    footer .middle .navMenu ul .has-children:nth-child(4) {
        width: 84px;
        margin-left: 0
    }
    footer .middle .navMenu ul .has-children:last-child {
        width: 117px;
        margin-left: 24px
    }
}

@media only screen and (max-width:1260px) {
    .newsPointer {
        width: 100%;
        height: 370px
    }
    article .showcaseDiv {
        margin: 0 calc((100% - 300px)/ 2) 40px
    }
}

@media screen and (min-width:1440px) and (max-width:1599px) {
    .akhbarThemak li {
        padding: 20px 12px;
        height: 98px
    }
    .akhbarThemak li .secName {
        bottom: 12px
    }
}

@media screen and (min-width:1280px) and (max-width:1359px) {
    .akhbarThemak li {
        padding: 15px 12px;
        height: 90px
    }
    .akhbarThemak li .secName {
        bottom: 8px
    }
}

@media screen and (min-width:1152px) and (max-width:1279px) {
    .akhbarThemak li {
        padding: 25px 12px;
        height: 110px
    }
    .akhbarThemak li .secName {
        bottom: 18px
    }
}

@media screen and (min-width:1024px) and (max-width:1151px) {
    .akhbarThemak li {
        padding: 9px 12px;
        height: 77px
    }
    .akhbarThemak li .secName {
        bottom: 2px
    }
}

@media screen and (min-width:1153px) and (max-width:1260px) {
    .featuredArea ul li:first-child .desc p {
        font-size: 22px;
        height: auto;
        padding-bottom: 12px;
        margin-bottom: 0;
        bottom: 0
    }
    .featuredArea ul li .desc p {
        height: 64px;
        padding-bottom: 0;
        margin-bottom: 18px;
        overflow: hidden;
        bottom: -12px
    }
}

@media screen and (min-width:1024px) and (max-width:1161px) {
    article .details iframe,
    article .details img {
        margin: 40px calc((100% - 390px)/ 2);
        width: 390px
    }
    article .details img {
        height: auto
    }
    article .details iframe {
        height: 293px
    }
}

@media screen and (min-width:1024px) and (max-width:1230px) {
    .weatherDiv .dayTempDtls .icon-high {
        font-size: 28px;
        margin-left: 16px
    }
    .weatherDiv .dayTempDtls .icon-high:before {
        font-size: 12px
    }
    .weatherDiv .dayTempDtls .icon-low {
        font-size: 20px
    }
    .weatherDiv .dayTempDtls .icon-low:before {
        font-size: 8px
    }
}

@media screen and (min-width:1024px) and (max-width:1260px) {
    .matchesSchedule .table .allMatches .tabs-nav li a {
        padding: 0 30px
    }
    .matchesSchedule .table .allMatches .item .time {
        line-height: 4
    }
    .matchesSchedule .table .allMatches .item .time span {
        margin-top: 28px
    }
    .matchesSchedule .table .allMatches .item .time span.now {
        margin: 22px auto 0!important
    }
    .matchesSchedule .table .allMatches .item .teamA,
    .matchesSchedule .table .allMatches .item .teamB {
        text-align: center;
        width: calc((100% - 220px)/ 2);
        height: auto
    }
    .matchesSchedule .table .allMatches .item .teamA img {
        float: none;
        margin-right: 0
    }
    .matchesSchedule .table .allMatches .item .teamB img {
        float: none;
        margin-left: 0
    }
    .matchesSchedule .table .allMatches .item .teamA p,
    .matchesSchedule .table .allMatches .item .teamB p {
        float: none;
        text-align: center;
        line-height: 1.6;
        margin-top: 5px
    }
    .matchesSchedule .table .allMatches .item .match {
        height: auto
    }
    .matchesSchedule .table .allMatches .item .result {
        width: 100px;
        margin-top: 20px
    }
    .matchesSchedule .table .allMatches .item .result .matchResult {
        margin-top: 0
    }
    .matchesSchedule .table .allMatches .item .channel {
        font-size: 14px;
        line-height: 1.8;
        width: 70px;
        margin-top: 10px
    }
    .prayerTimes .main .location {
        margin-bottom: 24px
    }
    .prayerTimes .main .dropDownDiv {
        width: 100%;
        margin-bottom: 24px
    }
    .prayerTimes .main .cityDate {
        width: 100%;
        margin-left: 0
    }
    .prayerTimes .cntdwn {
        width: 100%;
        margin: 0 0 24px
    }
    .prayerTimes .mainTable .prayersTable {
        width: 100%
    }
    .prayerTimes .monthTable .prayersTable .title .name:first-child {
        width: 180px
    }
    .prayerTimes .monthTable .prayersTable .title .name {
        width: calc((100% - 180px)/ 6);
        font-size: 14px
    }
    .prayerTimes .monthTable .prayersTable .allTimes .time:first-child {
        width: 180px
    }
    .prayerTimes .monthTable .prayersTable .allTimes .time {
        width: calc((100% - 180px)/ 6);
        font-size: 14px
    }
    .prayerTimes .monthTable .prayersTable .allTimes .time span {
        display: none
    }
}

@media screen and (min-width:1024px) and (max-width:1365px) {
    .cd-tab-filter {
        width: 100%;
        margin: 0
    }
    .cd-tab-filter::after {
        display: inline-block
    }
    .cd-tab-filter ul {
        position: absolute;
        width: 100%
    }
    .cd-tab-filter li {
        display: none
    }
    .cd-tab-filter li.placeholder {
        display: block!important
    }
    .cd-tab-filter li.placeholder a:hover {
        color: #aaa
    }
    .cd-tab-filter a {
        display: inline-block;
        width: 100%;
        padding-right: 12px
    }
    .cd-tab-filter a.selected {
        background: #f2f2f2;
        color: #1d1d1d;
        box-shadow: none;
        padding-right: 12px
    }
    .cd-tab-filter.is-open ul li {
        display: block
    }
}

@media screen and (min-width:1024px) and (max-width:1180px) {
    #cd-top-nav>ul {
        margin-left: 72px
    }
    #cd-top-nav ul li {
        width: 72px
    }
    #cd-top-nav ul li>a {
        width: 72px;
        font-size: 9px
    }
    #cd-top-nav ul li .weather.sunnyCloud {
        background: url(http://www.masrawy.com/Images/weather.png) 10px center no-repeat
    }
    #cd-top-nav ul li .weather>span {
        margin-right: 10px
    }
    #cd-top-nav>ul>li:last-child {
        display: none
    }
}

@media screen and (min-width:1024px) and (max-width:1152px) {
    .featuredArea .desc,
    .pattern02 .desc,
    .pattern02 ul li:nth-last-child(-n+3) .desc {
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c', endColorstr='#FF000000', GradientType=0)
    }
    .caricature li,
    .caricature li img {
        max-width: none
    }
    .morphSearchDiv,
    .morphsearch {
        width: 72px
    }
    .morphsearch-input {
        padding: 28px 24px 0;
        font-size: 9px
    }
    .featuredArea .desc p,
    .pattern02 .desc p {
        padding: 12px;
        bottom: 0;
        right: 0;
        color: #fff;
        font-family: DroidKufiLight, Arial;
        text-align: right
    }
    .featuredArea ul li {
        margin-left: 12px;
        margin-bottom: 12px;
        width: calc((100% - 12px)/ 2);
        position: relative;
        border: none;
        overflow: hidden
    }
    .featuredArea ul li:first-child .secName {
        font-size: 18px
    }
    .featuredArea ul li a img {
        width: 100%;
        height: auto;
        border: 1px solid #ddd;
        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
    }
    .featuredArea ul li:first-child,
    .featuredArea ul li:first-child a img {
        width: 100%
    }
    .featuredArea ul li:last-child {
        display: none
    }
    .featuredArea ul li:last-child,
    .featuredArea ul li:nth-child(2) {
        margin-left: 12px
    }
    .featuredArea ul li:nth-child(2n+1) {
        margin-left: 0
    }
    .featuredArea ul li:last-child,
    .featuredArea ul li:nth-child(4),
    .featuredArea ul li:nth-child(5) {
        margin-bottom: 0
    }
    .featuredArea .desc {
        width: 100%;
        height: 50%;
        overflow: hidden;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .featuredArea .desc p {
        line-height: 1.6;
        font-size: 16px;
        position: absolute
    }
    .featuredArea ul li:first-child .desc p {
        font-size: 24px;
        line-height: 1.8
    }
    .pattern01 ul li .desc p {
        height: 77px;
        line-height: 1.6;
        font-size: 14px
    }
    .pattern02 ul li {
        float: right;
        margin-left: 24px;
        margin-bottom: 24px;
        width: calc((50% - 40px)/ 2);
        height: auto;
        position: relative;
        overflow: hidden
    }
    .caricature,
    .monsterDiv,
    .pattern02 ul li:nth-child(3),
    .pattern02 ul li:nth-child(5) {
        margin-left: 0
    }
    .pattern02 ul li a {
        display: block
    }
    .pattern02 ul li:first-child {
        width: calc(50% - 8px)
    }
    .pattern02 ul li:nth-child(2),
    .pattern02 ul li:nth-child(3) {
        width: calc((50% - 40px)/ 2)
    }
    .pattern02 ul li:first-child,
    .pattern02 ul li:last-child,
    .pattern02 ul li:nth-child(4),
    .pattern02 ul li:nth-child(5) {
        margin-bottom: 0
    }
    .pattern02 ul li:last-child {
        display: none
    }
    .pattern02 .desc {
        width: 100%;
        height: 65%;
        overflow: hidden;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .pattern02 .desc p {
        line-height: 1.6;
        font-size: 16px;
        position: absolute
    }
    .pattern02 ul li:first-child .desc p {
        font-size: 24px;
        line-height: 1.8;
        height: auto
    }
    .pattern02 ul li .secName {
        padding: 0 5px;
        font-size: 14px;
        color: #fff;
        background: #aa120d
    }
    .pattern02 ul li:first-child .secName {
        font-size: 18px
    }
    .pattern02 ul li:nth-last-child(-n+3) .desc {
        position: absolute;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .pattern02 ul li:nth-last-child(-n+5) .desc p {
        position: absolute;
        color: #fff;
        font-size: 16px;
        line-height: 1.6;
        padding: 12px;
        height: 62px;
        overflow: hidden;
        margin-bottom: 5px
    }
    .pattern02 ul li:nth-last-child(-n+3) .secName {
        position: absolute;
        background: #aa120d!important;
        padding: 0 10px;
        color: #fff;
        top: 1px;
        bottom: auto;
        right: 1px;
        display: inline-block
    }
    .pattern02 ul li:nth-last-child(-n+3) .secName:after {
        display: none
    }
    .pattern02 ul li:nth-last-child(-n+3) .item:hover .desc p,
    .pattern02 ul li:nth-last-child(-n+3) .secName:hover {
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image,
    .pattern02 ul li:nth-last-child(-n+3).icon-video {
        background: #1d1d1d
    }
    .pattern02 ul li.icon-image:before,
    .pattern02 ul li.icon-video:before {
        color: #fff;
        background: rgba(0, 0, 0, .7);
        position: absolute;
        top: 1px;
        left: 1px;
        pointer-events: none;
        z-index: 1
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .desc p,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .desc p {
        color: #fff;
        padding: 12px
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .secName,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .secName {
        margin-right: 0;
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .secName:hover,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .secName:hover {
        color: #fff
    }
    .pattern02 ul li.icon-video:before {
        content: "s";
        font-size: 30px;
        width: 41px;
        height: 40px;
        line-height: 1.35
    }
    .pattern02 ul li:first-child.icon-video:before {
        font-size: 56px;
        width: 70px;
        height: 70px;
        line-height: 1.25
    }
    .pattern02 ul li.icon-image:before {
        content: "t";
        font-size: 30px;
        width: 41px;
        height: 40px;
        line-height: 1.35
    }
    .pattern02 ul li:first-child.icon-image:before {
        font-size: 56px;
        width: 70px;
        height: 70px;
        line-height: 1.25
    }
    .opinions {
        width: 100%
    }
    .mobawaba,
    .mostRead {
        width: calc(100% - 348px)
    }
    .specialFiles {
        margin-left: 48px
    }
    .mobawaba {
        height: 225px
    }
    .mobawaba .border {
        height: 201px
    }
    .mobawaba .allItems {
        border-bottom: none;
        height: 225px
    }
    .mobawaba ul li {
        display: inline-block
    }
    .cd-gallery li.gap,
    .cd-gallery li:last-child:after,
    article .pattern01 ul li:last-child:after {
        display: none
    }
    .mobawaba ul li a img {
        width: 178px;
        height: auto;
        float: right;
        margin-left: 12px
    }
    .mobawaba .desc,
    .mobawaba .footer {
        width: calc(100% - 190px);
        float: right
    }
    .mobawaba .desc {
        height: auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        bottom: auto;
        top: 0;
        right: 0;
        background: 0 0
    }
    .mobawaba .desc p {
        text-align: right;
        padding: 0;
        position: relative
    }
    .mobawaba .footer {
        height: 65px;
        background: #01313d;
        padding: 8px;
        right: 190px;
        bottom: 0
    }
    .allMatches .item .tourName {
        margin-bottom: 24px
    }
    .allMatches .item .teamA {
        width: 80px;
        height: 70px
    }
    .allMatches .item .teamA img,
    .allMatches .item .teamB img {
        height: 42px
    }
    .allMatches .item .teamA p,
    .allMatches .item .teamB p {
        padding-top: 10px;
        font-size: 12px
    }
    .allMatches .item .result {
        width: calc(100% - 160px);
        font-size: 32px
    }
    .allMatches .item .result.yesterday {
        padding-top: 12px
    }
    .allMatches .item .teamB {
        float: right;
        width: 80px;
        height: 70px
    }
    .allMatches .item .result span {
        font-size: 14px!important
    }
    .allMatches .item .status a {
        font-size: 12px
    }
    .allMatches .status span {
        margin-top: 26px
    }
    .allMatches .matchResult {
        font-size: 32px;
        margin-top: 0
    }
    .media .desc p {
        line-height: 1.5;
        padding: 12px;
        font-size: 16px;
        height: 62px;
        overflow: hidden;
        margin-bottom: 5px
    }
    .media ul li:first-child .desc p,
    .media ul li:nth-child(4) .desc p {
        height: auto;
        margin-bottom: 0
    }
    .media ul li .secName {
        padding: 0 5px;
        font-size: 14px
    }
    .media ul li.icon-image:before,
    .media ul li.icon-video:before {
        color: #fff;
        font-size: 30px;
        background: rgba(0, 0, 0, .7);
        position: absolute;
        top: 0;
        left: 0;
        width: 41px;
        height: 40px;
        line-height: 1.35;
        pointer-events: none;
        z-index: 1
    }
    .media ul li.icon-video:before {
        content: "s"
    }
    .media ul li.icon-image:before {
        content: "t"
    }
    .cd-gallery li .secName:after,
    .cd-gallery li:after,
    article .pattern01 ul li .secName:after,
    article .pattern01 ul li:after {
        content: ""
    }
    .caricature {
        width: 100%;
        height: auto
    }
    .caricature li {
        margin-left: 24px
    }
    .poll {
        width: 100%
    }
    .entrypoints {
        margin-right: calc((100% - 648px)/ 2)
    }
    .cd-gallery li.icon-image .secName,
    .cd-gallery li.icon-video .secName,
    article .pattern01 ul li.icon-image .secName,
    article .pattern01 ul li.icon-video .secName {
        margin-right: 0
    }
    .secondSC {
        margin-left: calc((100% - 648px)/ 2)
    }
    .pattern01 {
        padding: 10px
    }
    article .pattern01 .allItems {
        padding: 10px 0 0
    }
    article .pattern01 ul li {
        margin-left: 0;
        margin-bottom: 20px;
        padding-bottom: 0;
        width: 100%;
        height: auto;
        border-bottom: none;
        position: relative;
        overflow: visible
    }
    article .pattern01 ul li:after {
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0
    }
    article .pattern01 ul li:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0
    }
    article .pattern01 ul li .item .imageCntnr {
        width: 132px;
        padding-bottom: calc((132px * 75)/ 100);
        margin-left: 10px;
        float: right
    }
    article .pattern01 ul li .item img {
        width: 100%;
        height: 100%;
        float: right;
        border: 1px solid #ddd
    }
    article .pattern01 ul li:nth-last-child(-n+5) {
        margin-bottom: 20px
    }
    article .pattern01 ul li .desc {
        width: calc(100% - 142px);
        overflow: hidden;
        cursor: pointer
    }
    article .pattern01 ul li .desc p {
        color: #1d1d1d;
        width: 100%;
        height: 62px;
        overflow: hidden;
        text-align: right;
        line-height: 1.4;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        transition: all .2s ease-in-out 0s;
        -webkit-transition: all .2s ease-in-out 0s;
        -moz-transition: all .2s ease-in-out 0s;
        -o-transition: all .2s ease-in-out 0s;
        -ms-transition: all .2s ease-in-out 0s
    }
    article .pattern01 ul li .item:hover .desc p {
        color: #888
    }
    article .pattern01 ul li .secName {
        font-family: DroidKufiLight, Arial;
        font-size: 14px;
        color: #888;
        position: absolute;
        bottom: 0;
        right: 142px
    }
    article .pattern01 ul li .secName:after {
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 4px
    }
    article .pattern01 ul li .secName:hover {
        color: #1d1d1d
    }
    article .pattern01 ul li.icon-image .desc p,
    article .pattern01 ul li.icon-video .desc p {
        padding: 5px 0 5px 10px
    }
    article .pattern01 ul li.icon-image:before,
    article .pattern01 ul li.icon-video:before {
        right: 1px
    }
    article .imgDiv {
        width: 100%
    }
    .catPattern01 ul li:first-child .desc p,
    .catPattern01 ul li:nth-child(2) .desc p,
    .catPattern01 ul li:nth-child(3) .desc p {
        line-height: 1.5;
        font-size: 16px;
        height: 59px;
        margin-bottom: 5px
    }
    .catPattern01 ul li:first-child.icon-video:before,
    .catPattern01 ul li:nth-child(2).icon-video:before,
    .catPattern01 ul li:nth-child(3).icon-video:before {
        font-size: 38px;
        width: 50px;
        height: 50px;
        line-height: 1.35
    }
    .catPattern02 ul li:first-child .desc p,
    .catPattern02 ul li:nth-child(2) .desc p {
        line-height: 1.5;
        font-size: 16px;
        height: 59px;
        margin-bottom: 5px
    }
    .catPattern02 ul li:first-child.icon-video:before,
    .catPattern02 ul li:nth-child(2).icon-video:before,
    .catPattern02 ul li:nth-child(3).icon-video:before,
    .catPattern03 ul li:first-child.icon-video:before {
        font-size: 38px;
        width: 50px;
        height: 50px;
        line-height: 1.35
    }
    .cd-gallery li .desc p,
    .cd-gallery li .secName {
        font-family: DroidKufiLight, Arial;
        font-size: 14px
    }
    .catPattern03 .desc p {
        height: 60px;
        line-height: 1.3;
        overflow: hidden;
        padding: 5px
    }
    .catPattern03 ul li:first-child .desc p {
        height: auto
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image .desc p,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video .desc p {
        height: 60px;
        line-height: 1.3;
        overflow: hidden
    }
    .cd-gallery .allItems {
        padding: 10px 0 0
    }
    .cd-gallery li {
        margin-left: 0;
        margin-bottom: 20px;
        padding-bottom: 0;
        width: 100%;
        height: auto;
        border-bottom: none;
        position: relative;
        overflow: visible
    }
    .cd-gallery li:after {
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0
    }
    .cd-gallery li:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0
    }
    .cd-gallery li .item .imageCntnr {
        width: 132px;
        padding-bottom: calc((132px * 75)/ 100);
        margin-left: 10px;
        float: right
    }
    .cd-gallery li .item img {
        width: 100%;
        height: 100%;
        float: right;
        border: 1px solid #ddd
    }
    .cd-gallery li:nth-last-child(-n+5) {
        margin-bottom: 20px
    }
    .cd-gallery li .desc {
        width: calc(100% - 142px);
        overflow: hidden;
        cursor: pointer
    }
    .cd-gallery li .desc p {
        color: #1d1d1d;
        width: 100%;
        height: 62px;
        overflow: hidden;
        text-align: right;
        line-height: 1.4;
        padding: 5px 0;
        transition: all .2s ease-in-out 0s;
        -webkit-transition: all .2s ease-in-out 0s;
        -moz-transition: all .2s ease-in-out 0s;
        -o-transition: all .2s ease-in-out 0s;
        -ms-transition: all .2s ease-in-out 0s
    }
    .cd-gallery li .item:hover .desc p {
        color: #888
    }
    .cd-gallery li .secName {
        color: #888;
        position: absolute;
        right: 142px;
        bottom: 0;
        margin-bottom: 0
    }
    .cd-gallery li .secName:after {
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 4px
    }
    .cd-gallery li .secName:hover {
        color: #1d1d1d
    }
    .cd-gallery li .time {
        width: auto;
        float: left;
        margin-left: 10px;
        margin-top: 5px
    }
    .cd-gallery li.icon-image .desc p,
    .cd-gallery li.icon-video .desc p {
        padding: 5px 0 5px 10px
    }
    .cd-gallery li.icon-image:before,
    .cd-gallery li.icon-video:before {
        right: 1px
    }
    .weatherDiv .main .dropDownDiv {
        width: 100%;
        margin-bottom: 24px
    }
    .weatherDiv .main .cityDate {
        width: 100%
    }
}

@media only screen and (max-width:1023px) {
    #cd-top-nav ul li,
    .sponsor .left,
    .sponsor .right,
    .sponsor .sponsorLogoBtn {
        display: none
    }
    .featuredArea .desc p,
    .featuredArea ul li .secName {
        color: #fff;
        right: 0;
        font-family: DroidKufiLight, Arial
    }
    .caricature li,
    .caricature li img {
        max-width: none
    }
    .catPattern01 ul li:nth-last-child(-n+5) .desc,
    .catPattern02 ul li:nth-last-child(-n+3) .desc,
    .catPattern03 .desc,
    .featuredArea .desc,
    .pattern02 ul li:nth-last-child(-n+3) .desc {
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c', endColorstr='#FF000000', GradientType=0)
    }
    .show-sponsor .container,
    .sponsorHome .container {
        margin-right: 0
    }
    .show-sponsor .sponsor,
    .sponsorHome .sponsor {
        margin-right: 0;
        width: 100%
    }
    .show-sponsor.takeover .content-wrap,
    .sponsorHome.takeover .content-wrap,
    .takeover .content-wrap {
        margin: 60px 0 0;
        width: 100%
    }
    .sponsor .middle {
        width: 100%
    }
    .takeover .content-wrap {
        padding: 10px 10px 40px
    }
    .content-wrap {
        margin: 0;
        width: 100%
    }
    #cd-lateral-nav .linksMenu {
        display: inline-block
    }
    .no-touch #cd-vertical-nav,
    footer {
        display: none
    }
    body.openSearch .content-wrap {
        width: 100%;
        margin: 60px 0 0
    }
    .featuredArea {
        padding: 12px;
        margin-left: 12px;
        width: 100%;
        float: right
    }
    .featuredArea ul li,
    .featuredArea ul li:first-child {
        width: calc((100% - 12px)/ 2);
        margin-left: 12px
    }
    .featuredArea ul li {
        margin-bottom: 12px;
        position: relative;
        border: none;
        overflow: hidden
    }
    .featuredArea ul li .secName {
        padding: 0 10px;
        font-size: 14px;
        background: #aa120d;
        position: absolute;
        top: 0;
        z-index: 1
    }
    .featuredArea ul li:first-child .secName {
        font-size: 14px
    }
    .featuredArea .desc p,
    .featuredArea ul li:first-child .desc p {
        font-size: 16px;
        line-height: 1.6
    }
    .featuredArea ul li:first-child a .imageCntnr {
        padding-bottom: 75%
    }
    .featuredArea ul li:first-child a img {
        width: 100%
    }
    .featuredArea ul li:last-child {
        display: block
    }
    .featuredArea ul li:last-child,
    .featuredArea ul li:nth-child(2),
    .featuredArea ul li:nth-child(4) {
        margin-left: 0
    }
    .featuredArea ul li:nth-child(3),
    .featuredArea ul li:nth-child(5) {
        margin-left: 12px
    }
    .featuredArea ul li:last-child,
    .featuredArea ul li:nth-child(4),
    .featuredArea ul li:nth-child(5) {
        margin-bottom: 0
    }
    .featuredArea .desc {
        width: 100%;
        height: 50%;
        overflow: hidden;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .featuredArea .desc p {
        text-align: right;
        padding: 12px;
        position: absolute;
        bottom: 0
    }
    .akhbarThemak.fixed,
    .pattern01 ul li {
        position: relative
    }
    .showcaseDiv {
        margin: 0 calc((100% - 300px)/ 2) 40px
    }
    .akhbarThemak {
        width: 100%;
        top: 0!important
    }
    .akhbarThemak .cd-popup-container {
        width: calc(100% - 48px);
        height: 400px;
        margin: 120px 24px;
        overflow-y: scroll
    }
    .akhbarThemak .cd-popup-container h2 {
        float: none
    }
    .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 12px;
        width: auto
    }
    .pattern01 {
        padding: 10px
    }
    .pattern01 .allItems {
        padding: 10px 0 0
    }
    .pattern01 ul li {
        margin-left: 0;
        margin-bottom: 20px;
        padding-bottom: 0;
        width: 100%;
        height: auto;
        border-bottom: none;
        overflow: visible
    }
    .pattern01 ul li:after {
        content: "";
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0
    }
    .pattern01 ul li:last-child:after {
        display: none
    }
    .pattern01 ul li:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0
    }
    .pattern01 ul li .item .imageCntnr {
        width: 132px;
        padding-bottom: calc((132px * 75)/ 100);
        margin-left: 10px;
        float: right
    }
    .pattern01 ul li .item img {
        width: 100%;
        height: 100%;
        float: right;
        border: 1px solid #ddd
    }
    .pattern01 ul li:nth-last-child(-n+5) {
        margin-bottom: 20px
    }
    .pattern01 ul li .desc {
        width: calc(100% - 142px);
        overflow: hidden;
        cursor: pointer
    }
    .pattern01 ul li .desc p {
        color: #1d1d1d;
        width: 100%;
        height: 62px;
        overflow: hidden;
        text-align: right;
        line-height: 1.4;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        transition: all .2s ease-in-out 0s;
        -webkit-transition: all .2s ease-in-out 0s;
        -moz-transition: all .2s ease-in-out 0s;
        -o-transition: all .2s ease-in-out 0s;
        -ms-transition: all .2s ease-in-out 0s
    }
    .pattern01 ul li .item:hover .desc p {
        color: #888
    }
    .pattern01 ul li .secName {
        font-family: DroidKufiLight, Arial;
        font-size: 14px;
        color: #888;
        position: absolute;
        bottom: 0;
        right: 142px
    }
    .pattern01 ul li .secName:after {
        content: "";
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 4px
    }
    .pattern02 ul li,
    .pattern02 ul li:first-child,
    .pattern02 ul li:nth-child(2),
    .pattern02 ul li:nth-child(3) {
        width: calc((100% - 12px)/ 2)
    }
    .pattern01 ul li .secName:hover {
        color: #1d1d1d
    }
    .pattern01 ul li.icon-image .desc p,
    .pattern01 ul li.icon-video .desc p {
        padding: 5px 0 5px 10px
    }
    .pattern01 ul li.icon-image .secName,
    .pattern01 ul li.icon-video .secName {
        margin-right: 0
    }
    .pattern01 ul li.icon-image:before,
    .pattern01 ul li.icon-video:before {
        right: 1px
    }
    .pattern02 ul li {
        margin-left: 12px;
        margin-bottom: 12px
    }
    .pattern02 ul li a .imageCntnr {
        position: relative;
        overflow: hidden;
        padding-bottom: 75%
    }
    .pattern02 ul li:last-child,
    .pattern02 ul li:nth-child(2),
    .pattern02 ul li:nth-child(3),
    .pattern02 ul li:nth-child(4),
    .pattern02 ul li:nth-child(5) {
        margin-left: 0
    }
    .pattern02 ul li:first-child,
    .pattern02 ul li:nth-child(3),
    .pattern02 ul li:nth-child(5) {
        margin-left: 12px
    }
    .pattern02 ul li:nth-child(4),
    .pattern02 ul li:nth-child(5) {
        margin-bottom: 0
    }
    .pattern02 ul li:last-child {
        display: block
    }
    .monsterDiv,
    .pattern02 ul li:nth-last-child(-n+3) .secName:after {
        display: none
    }
    .pattern02 ul li:first-child .item .imageCntnr {
        padding-bottom: 75%
    }
    .pattern02 ul li:first-child .desc p {
        font-size: 16px;
        line-height: 1.6
    }
    .pattern02 ul li:first-child .secName {
        font-size: 14px
    }
    .pattern02 ul li:nth-last-child(-n+3) .desc {
        width: 100%;
        height: 50%;
        overflow: hidden;
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .pattern02 ul li:nth-last-child(-n+3) .desc p {
        color: #fff;
        text-align: right;
        line-height: 1.6;
        height: auto;
        padding: 12px;
        font-size: 16px;
        font-family: DroidKufiLight, Arial;
        position: absolute;
        bottom: 0;
        right: 0
    }
    .pattern02 ul li:nth-last-child(-n+3) .secName {
        padding: 0 10px;
        font-family: DroidKufiLight, Arial;
        font-size: 14px;
        color: #fff;
        background: #aa120d;
        position: absolute;
        top: 1px;
        bottom: auto;
        right: 1px;
        z-index: 1
    }
    .pattern02 ul li:nth-last-child(-n+3) .item:hover .desc p,
    .pattern02 ul li:nth-last-child(-n+3) .secName:hover {
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image,
    .pattern02 ul li:nth-last-child(-n+3).icon-video {
        background: #1d1d1d
    }
    .pattern02 ul li.icon-image:before,
    .pattern02 ul li.icon-video:before {
        background: rgba(0, 0, 0, .7);
        position: absolute;
        top: 1px;
        left: 1px;
        pointer-events: none;
        z-index: 1;
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .desc p,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .desc p {
        color: #fff;
        padding: 12px
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .secName,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .secName {
        margin-right: 0;
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+3).icon-image .secName:hover,
    .pattern02 ul li:nth-last-child(-n+3).icon-video .secName:hover {
        color: #fff
    }
    .pattern02 ul li.icon-video:before {
        content: "s";
        font-size: 30px;
        width: 41px;
        height: 40px;
        line-height: 1.35
    }
    .pattern02 ul li:first-child.icon-video:before {
        font-size: 56px;
        width: 70px;
        height: 70px;
        line-height: 1.25
    }
    .pattern02 ul li.icon-image:before {
        content: "t";
        font-size: 30px;
        width: 41px;
        height: 40px;
        line-height: 1.35
    }
    .pattern02 ul li:first-child.icon-image:before {
        font-size: 56px;
        width: 70px;
        height: 70px;
        line-height: 1.25
    }
    .media .desc p,
    .media ul li:first-child .desc p,
    .media ul li:nth-child(4) .desc p {
        font-size: 18px;
        line-height: 1.6
    }
    .mostRead,
    .opinions {
        width: 100%
    }
    .media ul li {
        width: calc((100% - 24px)/ 2)
    }
    .media ul li:nth-child(2n) {
        margin-left: 0
    }
    .media ul li:nth-child(4) {
        float: right
    }
    .media ul li:nth-child(3) {
        margin-left: 24px
    }
    .media ul li .secName {
        font-size: 18px
    }
    .media ul li.icon-image:before,
    .media ul li.icon-video:before,
    .media ul li:first-child.icon-image:before,
    .media ul li:first-child.icon-video:before,
    .media ul li:nth-child(4).icon-image:before,
    .media ul li:nth-child(4).icon-video:before {
        font-size: 40px;
        width: 50px;
        height: 50px;
        line-height: 1.25
    }
    .specialFiles {
        margin-bottom: 40px;
        margin-left: 48px
    }
    .mobawaba {
        width: calc(100% - 348px);
        height: 225px
    }
    .mobawaba .border {
        height: 201px
    }
    .mobawaba .allItems {
        border-bottom: none
    }
    .mobawaba ul li {
        display: inline-block;
        width: 100%
    }
    .articleDiv .cd-read-more,
    article .pattern01 ul li:after {
        display: none
    }
    .mobawaba ul li a img {
        width: 120px;
        height: auto;
        float: right;
        margin-left: 12px
    }
    .mobawaba .desc {
        width: calc(100% - 132px);
        height: auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        bottom: auto;
        top: 0;
        right: 0;
        float: right;
        background: 0 0
    }
    .mobawaba .desc p {
        text-align: right;
        padding: 0;
        position: relative
    }
    .mobawaba .footer {
        width: 100%;
        height: 40px;
        background: #01313d;
        padding: 8px;
        float: right;
        right: 0;
        bottom: -46px
    }
    .mobawaba .footer .price {
        float: right;
        font-family: Arial;
        font-weight: 700;
        font-size: 20px;
        color: #fff;
        line-height: 1.2
    }
    .mobawaba .footer .price span {
        margin-right: 5px;
        font-family: DroidKufiLight, Arial;
        font-size: 14px;
        font-weight: 400
    }
    .mobawaba .footer .add {
        float: left;
        height: 24px;
        padding: 0 8px;
        font-family: DroidKufiLight, Arial;
        font-size: 15px;
        color: #fff;
        background: #0683a4;
        line-height: 1.8
    }
    .mobawaba .footer .add:hover {
        background: #08708a
    }
    .sportsContainer .allMatches .slide {
        width: 140%
    }
    .sportsContainer .allMatches .item {
        width: calc(100% / 3);
        min-width: 290px
    }
    .masrawyServices ul {
        width: 100%
    }
    .caricature {
        width: 100%;
        margin-left: 0;
        height: auto
    }
    .caricature li {
        width: calc((100% - 72px)/ 4);
        margin-left: 24px
    }
    .article,
    .poll,
    .sponsorBanner {
        width: 100%
    }
    .caricature li:nth-child(4) {
        margin-left: 0
    }
    .caricature li:last-child {
        margin-left: 0;
        display: none
    }
    .entrypoints {
        margin-right: calc((100% - 648px)/ 2)
    }
    .secondSC {
        margin-left: calc((100% - 648px)/ 2);
        margin-right: 0
    }
    .sponsorBanner {
        margin: 0
    }
    .show-sponsor .sponsorBanner,
    .sponsorHome .sponsorBanner {
        width: 100%;
        margin-right: 0
    }
    .sponsorBtnText {
        left: 10px
    }
    article .pattern01 .allItems {
        padding: 24px 0 0
    }
    article .pattern01 ul li {
        margin-left: 24px
    }
    article .pattern01 ul li .item .imageCntnr {
        width: auto;
        padding-bottom: 75%;
        margin-left: 0;
        float: none
    }
    article .pattern01 ul li .desc {
        width: 100%
    }
    article .pattern01 ul li .desc p {
        color: #1d1d1d;
        height: 84px;
        margin-bottom: 5px;
        overflow: hidden;
        text-align: right;
        line-height: 1.6;
        padding: 10px 0;
        font-size: 15px;
        font-family: DroidKufiLight, Arial;
        transition: all .2s ease-in-out 0s;
        -webkit-transition: all .2s ease-in-out 0s;
        -moz-transition: all .2s ease-in-out 0s;
        -o-transition: all .2s ease-in-out 0s;
        -ms-transition: all .2s ease-in-out 0s
    }
    article .pattern01 ul li .secName {
        position: relative;
        right: 0
    }
    .articleSocialMedia {
        position: fixed;
        margin-right: 0;
        right: 0;
        top: auto;
        bottom: 0;
        left: 0;
        z-index: 10;
        background: 0 0;
        padding: 0;
        width: 100%;
        height: 40px
    }
    .hideSocialBtns .articleSocialMedia {
        bottom: -40px
    }
    .articleSocialMedia a {
        display: inline-block;
        width: calc(100% / 5);
        height: 40px;
        border-radius: 0;
        margin-bottom: 0;
        float: right
    }
    .catPattern01 ul li,
    .catPattern01 ul li:first-child,
    .catPattern01 ul li:nth-child(2),
    .catPattern01 ul li:nth-child(3) {
        width: calc((100% - 12px)/ 2)
    }
    .articleSocialMedia .icon-fb {
        background: rgba(58, 87, 153, .95)
    }
    .articleSocialMedia .icon-tw {
        background: rgba(31, 162, 240, .95)
    }
    .articleSocialMedia .icon-ggl {
        background: rgba(213, 81, 66, .95)
    }
    .articleSocialMedia .icon-wapp {
        background: rgba(24, 157, 14, .95);
        display: block
    }
    .articleSocialMedia .icon-mail,
    .articleSocialMedia .icon-print,
    .catPattern02 ul li:last-child,
    .catPattern03 ul li:after {
        display: none
    }
    .articleSocialMedia .icon-msngr {
        background: rgba(0, 132, 255, .95)
    }
    .articleSocialMedia .icon-fb:before,
    .articleSocialMedia .icon-ggl:before,
    .articleSocialMedia .icon-tw:before {
        line-height: 2
    }
    .articleSocialMedia .icon-wapp:before {
        line-height: 1.9
    }
    .articleSocialMedia .icon-msngr:before {
        line-height: 2
    }
    .catPattern01 .desc p,
    .catPattern01 ul li:first-child .desc p,
    .catPattern01 ul li:nth-child(2) .desc p,
    .catPattern01 ul li:nth-child(3) .desc p {
        font-size: 16px;
        line-height: 1.6
    }
    .catPattern01 ul li {
        margin-left: 12px;
        margin-bottom: 12px
    }
    .catPattern01 ul li:nth-child(3) {
        margin-left: 12px
    }
    .catPattern01 ul li:nth-child(2n),
    .catPattern02 {
        margin-left: 0
    }
    .catPattern01 ul li:nth-last-child(-n+5) {
        margin-bottom: 12px
    }
    .catPattern01 ul li:nth-last-child(-n+5) .desc {
        position: absolute;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .catPattern01 ul li:nth-last-child(-n+5) .desc p {
        position: absolute;
        color: #fff;
        font-size: 16px;
        line-height: 1.6;
        padding: 12px;
        height: auto;
        margin-bottom: 0
    }
    .catPattern01 ul li:nth-last-child(-n+5) .item:hover .desc p {
        color: #fff
    }
    .catPattern01 ul li:first-child.icon-image:before,
    .catPattern01 ul li:first-child.icon-video:before,
    .catPattern01 ul li:nth-child(2).icon-image:before,
    .catPattern01 ul li:nth-child(2).icon-video:before,
    .catPattern01 ul li:nth-child(3).icon-image:before,
    .catPattern01 ul li:nth-child(3).icon-video:before {
        font-size: 40px;
        width: 50px;
        height: 50px;
        line-height: 1.2
    }
    .catPattern01 ul li:nth-child(2) .desc p,
    .catPattern02 .desc p,
    .catPattern02 ul li:first-child .desc p {
        font-size: 16px;
        line-height: 1.6
    }
    .catPattern01 ul li:nth-last-child(-n+5).icon-image,
    .catPattern01 ul li:nth-last-child(-n+5).icon-video {
        background: 0 0
    }
    .catPattern01 ul li:nth-last-child(-n+5).icon-image .desc p,
    .catPattern01 ul li:nth-last-child(-n+5).icon-video .desc p {
        color: #fff;
        padding: 12px
    }
    .catPattern01 ul li:nth-last-child(-n+5).icon-image .item:hover .desc p,
    .catPattern01 ul li:nth-last-child(-n+5).icon-video .item:hover .desc p {
        color: #fff
    }
    .catPattern02 {
        width: 100%
    }
    .catPattern02 ul li,
    .catPattern02 ul li:first-child,
    .catPattern02 ul li:nth-child(2) {
        width: calc((100% - 12px)/ 2)
    }
    .catPattern02 ul li {
        margin-left: 12px;
        margin-bottom: 12px
    }
    .catPattern02 ul li:nth-child(2n),
    .catPattern03 {
        margin-left: 0
    }
    .catPattern02 ul li:nth-last-child(-n+3) .desc {
        position: absolute;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .catPattern02 ul li:nth-last-child(-n+3) .desc p {
        position: absolute;
        color: #fff;
        font-size: 16px;
        line-height: 1.6;
        padding: 12px;
        height: auto;
        margin-bottom: 0
    }
    .catPattern02 ul li:nth-last-child(-n+3) .item:hover .desc p {
        color: #fff
    }
    .catPattern02 ul li:first-child.icon-image:before,
    .catPattern02 ul li:first-child.icon-video:before,
    .catPattern02 ul li:nth-child(2).icon-image:before,
    .catPattern02 ul li:nth-child(2).icon-video:before {
        font-size: 40px;
        width: 50px;
        height: 50px;
        line-height: 1.2
    }
    .catPattern02 ul li:nth-last-child(-n+3).icon-image,
    .catPattern02 ul li:nth-last-child(-n+3).icon-video {
        background: 0 0
    }
    .catPattern02 ul li:nth-last-child(-n+3).icon-image .desc p,
    .catPattern02 ul li:nth-last-child(-n+3).icon-video .desc p {
        color: #fff;
        padding: 12px
    }
    .catPattern02 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
    .catPattern02 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
        color: #fff
    }
    .catPattern03 {
        width: 100%;
        height: auto
    }
    .catPattern03 ul li {
        margin-left: 12px;
        margin-bottom: 12px;
        width: calc((100% - 12px)/ 2)
    }
    .catPattern03 ul li a .imageCntnr {
        position: relative;
        overflow: hidden;
        padding-bottom: 75%;
        float: none;
        width: auto;
        margin-left: 0
    }
    .catPattern03 .desc p,
    .catPattern03 ul li:nth-last-child(-n+3).icon-image .desc p,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video .desc p {
        padding: 12px;
        color: #fff
    }
    .catPattern03 ul li:nth-child(2n) {
        margin-left: 0
    }
    .catPattern03 .desc {
        position: absolute;
        bottom: 0;
        right: 0;
        float: none;
        width: 100%;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .catPattern03 .desc p {
        line-height: 1.6;
        margin-bottom: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 16px
    }
    .catPattern03 ul li:nth-last-child(-n+3) .item:hover .desc p {
        color: #fff
    }
    .catPattern03 ul li:first-child.icon-image:before,
    .catPattern03 ul li:first-child.icon-video:before,
    .catPattern03 ul li:nth-child(2).icon-image:before,
    .catPattern03 ul li:nth-child(2).icon-video:before {
        font-size: 30px;
        width: 41px;
        height: 40px;
        line-height: 1.35
    }
    .contactUsDiv .contactUsCnts,
    .currGoldDiv .currencyDiv,
    .currGoldDiv .goldDiv,
    .listing,
    .masrawyServicesDiv .services,
    .matchesSchedule .schedule,
    .newsPointerDiv .newsPointer,
    .policyDiv .policy,
    .pollListingDiv .pollListing,
    .prayerTimes .prayerTimesTable,
    .searchResult,
    .weatherDiv .weatherCnts,
    .zakahDiv .zakahCnts {
        width: 100%;
        margin-left: 0
    }
    .catPattern03 ul li.icon-image:before,
    .catPattern03 ul li.icon-video:before {
        left: 1px;
        right: auto
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video {
        background: 0 0
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
        color: #fff
    }
    .innerListing .akhbarThemak {
        position: relative;
        top: 0!important
    }
    .currGoldDiv .main {
        padding: 10px
    }
    .masrawyServicesDiv .services .servicesCnts .item p {
        height: 108px
    }
    .oneStickyDiv {
        height: 40px
    }
    .oneStickyDiv .cnts {
        width: calc(100% - 10px);
        margin: 0 10px
    }
    .oneStickyDiv .bx-viewport {
        height: 40px!important
    }
    .oneStickyDiv .onSlider {
        margin-right: 60px;
        height: 40px
    }
    .oneStickyDiv .onSlider li h3 {
        margin-left: 12px;
        font-size: 18px;
        line-height: 2.5;
        width: 70px
    }
    .oneStickyDiv .onSlider li p {
        font-size: 16px;
        line-height: 2.6
    }
    .oneStickyDiv .onLogo {
        width: 50px;
        height: 50px
    }
    .oneStickyDiv .onLogo img {
        width: 100%;
        height: 100%
    }
    .billboardDiv,
    .leaderboardDiv {
        min-width: 300px
    }
    .featuredSC .showcaseDiv {
        display: inline-block
    }
    .surveyDiv .questionsDiv,
    .surveyDiv .resultDiv {
        width: 100%;
        margin-left: 0
    }
    .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
    }
    .articleSocialMedia::before {
        display: none
    }
    .rssDiv .rssCnts {
        width: 100%;
        margin-left: 0
    }
}

@media screen and (min-width:768px) and (max-width:882px) {
    .masrawyServicesDiv .services .servicesCnts .item p {
        height: 135px
    }
}

@media screen and (min-width:320px) and (max-width:872px) {
    .cd-tab-filter {
        width: 100%;
        margin: 0
    }
    .cd-tab-filter::after {
        display: inline-block
    }
    .cd-tab-filter ul {
        position: absolute;
        width: 100%
    }
    .cd-tab-filter li {
        display: none
    }
    .cd-tab-filter li.placeholder {
        display: block!important
    }
    .cd-tab-filter li.placeholder a:hover {
        color: #aaa
    }
    .cd-tab-filter a {
        display: inline-block;
        width: 100%;
        padding-right: 12px
    }
    .cd-tab-filter a.selected {
        background: #f2f2f2;
        color: #1d1d1d;
        box-shadow: none;
        padding-right: 12px
    }
    .cd-tab-filter.is-open ul li {
        display: block
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .cd-main-content,
    .content-wrap {
        top: 0;
        height: 100%;
        left: 0;
        right: 0
    }
    #cd-top-nav>ul>li:hover,
    .morphsearch {
        background: 0 0
    }
    #cd-top-nav .rightDiv date,
    .overflow-hidden #cd-top-nav,
    .show-sponsor .sponsor .left,
    .show-sponsor .sponsor .right,
    .show-sponsor .sponsorLogoBtn,
    .sponsorBtnText:after,
    .sponsorHome .sponsor .left,
    .sponsorHome .sponsor .right,
    .sponsorHome .sponsorLogoBtn {
        display: none
    }
    .mobawaba .desc p,
    .ttl h2 {
        font-family: DroidKufiLight, Arial
    }
    .cd-main-content {
        position: absolute;
        bottom: 0;
        width: 100%
    }
    .content-wrap,
    .overflow-hidden .cd-main-content {
        position: relative
    }
    .content-wrap {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0
    }
    .sponsorHome.takeover .content-wrap {
        padding: 0;
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        left: 0;
        right: 0
    }
    .show-sponsor .sponsorBanner,
    .show-sponsor.takeover .content-wrap,
    .sponsorHome .sponsorBanner,
    .sponsorHome.takeover .content-wrap {
        width: 100%;
        margin: 60px 0 0
    }
    .show-sponsor .container,
    .sponsorHome .container {
        margin-right: 0
    }
    .sponsor .middle {
        width: 100%
    }
    .sponsor .middle .sponsorContent img {
        height: auto;
        width: calc(100% - 20px)
    }
    .sponsorBanner p {
        font-size: 14px;
        text-align: right;
        padding: 8px 12px 0 0;
        line-height: 3.5
    }
    .sponsorBtnText {
        width: 40px
    }
    .icon-spnsrBottom:before {
        margin: 0 10px
    }
    #cd-top-nav {
        margin-right: 0;
        width: calc(100% - 60px)
    }
    #cd-top-nav ul li:last-child,
    #cd-top-nav>ul {
        width: 60px
    }
    .morphSearchDiv {
        width: 60px;
        transition: 0s
    }
    .morphsearch {
        width: 60px;
        transition: background .1s ease-in-out 0s
    }
    .morphsearch-input {
        padding: 28px 18px 0;
        transition: 0s
    }
    .morphsearch-form,
    .morphsearch-form.icon-search:before,
    .morphsearch-submit.icon-search {
        transition: 0s
    }
    .openSearch .morphsearch.open .morphsearch-submit.icon-search:before {
        width: 54px;
        height: 54px;
        font-size: 42px;
        left: 24px;
        line-height: 1.2;
        transition: 0s
    }
    .ttl h2,
    .ttl h2 a {
        font-size: 20px
    }
    .openSearch .morphsearch.open .morphsearch-content {
        padding: 0 5%;
        height: 390px;
        overflow: hidden;
        transition: 0s;
        margin-top: 0;
        top: 180px
    }
    #cd-top-nav .rightDiv {
        width: calc(100% - 60px)
    }
    #cd-top-nav .masLogo {
        margin: 5px calc((100% - 150px)/ 2)
    }
    .overflow-hidden {
        margin-right: 0;
        width: 100%
    }
    footer .top {
        height: auto
    }
    footer .top .cnts {
        width: calc(100% - 24px);
        margin: 0 12px;
        padding: 10px 0 15px
    }
    footer .top .cnts h2 {
        float: right;
        margin-left: 0;
        display: inline-block;
        width: 100%
    }
    footer .top .cnts .subTxt {
        width: 300px;
        float: right;
        height: 40px;
        display: inline-block
    }
    footer .middle .navMenu {
        width: 100%;
        padding: 10px 0;
        margin: 0
    }
    footer .middle .navMenu ul .has-children {
        float: right;
        width: 100%;
        height: 40px;
        margin-left: 0;
        margin-bottom: 12px
    }
    footer .middle .navMenu ul .has-children a {
        display: block;
        width: calc(100% - 24px);
        height: 40px;
        padding-right: 12px;
        margin: 0 12px;
        line-height: 3;
        background: #1a1a1a
    }
    .featuredArea ul li:first-child:after,
    .featuredArea ul li:last-child:after,
    .mainKeywords,
    footer .middle .navMenu ul .is-hidden {
        display: none
    }
    footer .middle .navMenu ul .has-children:last-child {
        width: 100%;
        margin-bottom: 0
    }
    .ttl h2 {
        line-height: 1.8
    }
    .ttl .more {
        font-size: 16px;
        line-height: 2.2
    }
    .ttl .icon-more:before {
        font-size: 16px;
        line-height: 2.3
    }
    .featuredArea {
        padding: 10px
    }
    .featuredArea .allItems {
        padding: 10px 0
    }
    .featuredArea ul li {
        margin-left: 0;
        width: 100%;
        margin-bottom: 20px;
        overflow: visible
    }
    .featuredArea ul li:after {
        content: "";
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0
    }
    .featuredArea ul li a .imageCntnr {
        position: relative;
        width: 132px;
        overflow: hidden;
        padding-bottom: calc((132px * 75)/ 100);
        float: right;
        margin-left: 10px
    }
    .featuredArea ul li:first-child a .imageCntnr {
        width: 100%;
        padding-bottom: 75%
    }
    .featuredArea ul li:first-child,
    .featuredArea ul li:nth-child(2),
    .featuredArea ul li:nth-child(3) {
        width: 100%
    }
    .featuredArea ul li:last-child,
    .featuredArea ul li:nth-child(3),
    .featuredArea ul li:nth-child(5) {
        margin-left: 0
    }
    .featuredArea ul li:first-child,
    .featuredArea ul li:nth-child(4),
    .featuredArea ul li:nth-child(5) {
        margin-bottom: 20px
    }
    .featuredArea ul li:last-child {
        display: block
    }
    .featuredArea ul li:nth-last-child(-n+5) .desc {
        width: calc(100% - 142px);
        height: auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        bottom: 0;
        right: 0;
        background: 0 0
    }
    .featuredArea ul li:nth-last-child(-n+5) .desc p {
        color: #1d1d1d;
        text-align: right;
        line-height: 1.6;
        height: 72px;
        overflow: hidden;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        position: relative;
        bottom: 0;
        right: 0
    }
    .featuredArea ul li:nth-last-child(-n+5) .secName {
        padding: 0;
        position: absolute;
        top: auto;
        bottom: -7px;
        right: 142px;
        background: 0 0!important;
        color: #888;
        font-size: 14px
    }
    .featuredArea ul li:nth-last-child(-n+5) .secName:after {
        content: "";
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 6px;
        display: block
    }
    .mobawaba .ttl h2 a:after,
    .opinions .allItems li .date {
        display: none
    }
    .featuredArea ul li:nth-last-child(-n+5) .item:hover .desc p {
        color: #888
    }
    .featuredArea ul li:nth-last-child(-n+5) .secName:hover {
        color: #1d1d1d
    }
    .akhbarThemak .cd-popup-container {
        width: calc(100% - 20px);
        height: 400px;
        margin: 120px 10px;
        overflow-y: scroll;
        padding: 24px 12px
    }
    .mostRead,
    .opinions {
        padding: 10px
    }
    .akhbarThemak .cd-popup-container h2 {
        font-size: 20px
    }
    .media .desc p,
    .media ul li .secName {
        font-size: 16px
    }
    .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 5px 12px;
        width: 100%
    }
    .akhbarThemak .cd-popup-container.notify {
        width: calc(100% - 20px);
        height: 200px;
        margin: 120px 10px;
        overflow-y: hidden
    }
    .media ul li,
    .media ul li:first-child,
    .media ul li:nth-child(4),
    .mostRead,
    .opinions {
        width: 100%
    }
    .pattern01 ul li .desc p {
        line-height: 1.6;
        height: 72px;
        overflow: hidden
    }
    .pattern01 ul li .secName {
        bottom: -7px
    }
    .pattern01 ul li.icon-image .secName,
    .pattern01 ul li.icon-video .secName {
        bottom: -2px
    }
    .media ul li:nth-child(2n) {
        margin-left: 0
    }
    .media ul li:nth-child(4) {
        float: right
    }
    .media ul li:nth-child(3) {
        margin-left: 24px
    }
    .media ul li:nth-last-child(-n+3) {
        margin-bottom: 24px
    }
    .media ul li:last-child {
        margin-bottom: 0
    }
    .media .desc p {
        line-height: 1.6
    }
    .media ul li:first-child .desc p,
    .media ul li:nth-child(4) .desc p {
        font-size: 16px;
        line-height: 1.6
    }
    .media ul li.icon-image:before,
    .media ul li.icon-video:before,
    .media ul li:first-child.icon-image:before,
    .media ul li:first-child.icon-video:before,
    .media ul li:nth-child(4).icon-image:before,
    .media ul li:nth-child(4).icon-video:before {
        font-size: 40px;
        width: 50px;
        height: 50px;
        line-height: 1.2
    }
    .mobawaba,
    .specialFiles {
        width: 300px;
        margin: 0 calc((100% - 300px)/ 2) 40px
    }
    .mobawaba {
        padding: 12px;
        background: #0683a4;
        height: 367px
    }
    .mobawaba .border {
        border: 1px solid #5daebf;
        height: 343px
    }
    .mobawaba .ttl {
        height: 49px;
        border-bottom: 1px solid #5daebf
    }
    .mobawaba .allItems {
        padding: 8px;
        border-bottom: 1px solid #5daebf
    }
    .mobawaba ul li {
        position: relative
    }
    .mobawaba .desc,
    .mobawaba .desc p,
    .mobawaba .footer,
    .pattern02 ul li:after {
        position: absolute;
        right: 0
    }
    .mobawaba ul li a {
        display: block
    }
    .mobawaba ul li a img {
        width: 100%;
        height: auto;
        margin-left: 0;
        border: none;
        filter: brightness(100%) contrast(100%);
        -webkit-filter: brightness(100%) contrast(100%);
        -moz-filter: brightness(100%) contrast(100%);
        -o-filter: brightness(100%) contrast(100%);
        -ms-filter: brightness(100%) contrast(100%);
        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
    }
    .mobawaba ul li:hover img {
        filter: brightness(108%) contrast(108%);
        -webkit-filter: brightness(108%) contrast(108%);
        -moz-filter: brightness(108%) contrast(108%);
        -o-filter: brightness(108%) contrast(108%);
        -ms-filter: brightness(108%) contrast(108%)
    }
    .mobawaba .desc {
        width: 100%;
        height: 50%;
        overflow: hidden;
        cursor: pointer;
        bottom: 0;
        top: auto;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0), #000);
        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)
    }
    .mobawaba .desc p {
        color: #fff;
        text-align: center;
        line-height: 1.6;
        padding: 12px;
        font-size: 18px;
        bottom: 0;
        height: 80px;
        overflow: hidden
    }
    .mobawaba .footer {
        width: 100%;
        height: 65px;
        background: #01313d;
        padding: 8px;
        bottom: -84px;
        cursor: default
    }
    .mobawaba .footer .price {
        float: right;
        font-family: Arial;
        font-weight: 700;
        font-size: 22px;
        color: #fff;
        line-height: 2.2;
        cursor: default
    }
    .mobawaba .footer .price span {
        margin-right: 5px;
        font-family: DroidKufiLight, Arial;
        font-size: 14px;
        font-weight: 400
    }
    .mobawaba .footer .add {
        float: left;
        height: 49px;
        padding: 0 8px;
        font-family: DroidKufiLight, Arial;
        font-size: 15px;
        color: #fff;
        background: #0683a4;
        line-height: 3.4
    }
    .mobawaba .footer .add:hover {
        background: #08708a
    }
    .poll {
        padding: 10px;
        width: 100%;
        height: auto
    }
    .poll .allItems {
        margin-bottom: 24px
    }
    .entrypoints,
    .secondSC {
        margin: 0 calc((100% - 300px)/ 2) 40px
    }
    body.openSearch .content-wrap {
        width: 100%;
        margin: 0
    }
    .pattern02 ul li,
    .pattern02 ul li:first-child,
    .pattern02 ul li:nth-child(4),
    .pattern02 ul li:nth-child(5) {
        margin-bottom: 20px
    }
    .openSearch .morphsearch.open .morphsearch-form {
        height: 100px;
        width: 90%
    }
    .morphsearch-content h2 {
        font-size: 20px
    }
    .morphsearch-content .keywordsDiv .item {
        font-size: 13px;
        padding: 4px 10px
    }
    .pattern02 {
        padding: 10px
    }
    .pattern02 .allItems {
        padding: 10px 0
    }
    .pattern02 ul li {
        margin-left: 0;
        width: 100%;
        overflow: visible
    }
    .pattern02 ul li:after {
        content: "";
        width: 100%;
        height: 1px;
        background: #ddd;
        bottom: -10px
    }
    .pattern02 ul li:first-child:after,
    .pattern02 ul li:last-child:after {
        display: none
    }
    .pattern02 ul li a .imageCntnr {
        position: relative;
        width: 132px;
        overflow: hidden;
        padding-bottom: calc((132px * 75)/ 100);
        float: right;
        margin-left: 10px
    }
    .pattern02 ul li:first-child a .imageCntnr {
        width: 100%;
        padding-bottom: 75%
    }
    .pattern02 ul li:first-child,
    .pattern02 ul li:nth-child(2),
    .pattern02 ul li:nth-child(3) {
        width: 100%
    }
    .pattern02 ul li:last-child,
    .pattern02 ul li:nth-child(3),
    .pattern02 ul li:nth-child(5) {
        margin-left: 0
    }
    .pattern02 ul li:last-child {
        display: block
    }
    .pattern02 ul li:nth-last-child(-n+5) .desc {
        width: calc(100% - 142px);
        height: auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        bottom: 0;
        right: 0;
        background: 0 0
    }
    .pattern02 ul li:nth-last-child(-n+5) .desc p {
        color: #1d1d1d;
        text-align: right;
        line-height: 1.6;
        height: 72px;
        overflow: hidden;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        position: relative;
        bottom: 0;
        right: 0
    }
    .pattern02 ul li:nth-last-child(-n+5) .secName {
        padding: 0;
        position: absolute;
        top: auto;
        bottom: -7px;
        right: 142px;
        background: 0 0!important;
        color: #888;
        font-size: 14px
    }
    .pattern02 ul li:nth-last-child(-n+5) .secName:after {
        content: "";
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 6px;
        display: block
    }
    .pattern02 ul li:nth-last-child(-n+5) .item:hover .desc p {
        color: #888
    }
    .pattern02 ul li:nth-last-child(-n+5) .secName:hover {
        color: #1d1d1d
    }
    .pattern02 ul li:nth-last-child(-n+5).icon-image,
    .pattern02 ul li:nth-last-child(-n+5).icon-video {
        background: #1d1d1d
    }
    .pattern02 ul li.icon-image:before,
    .pattern02 ul li.icon-video:before {
        background: rgba(0, 0, 0, .7);
        position: absolute;
        top: 1px;
        pointer-events: none;
        z-index: 1
    }
    .pattern02 ul li:nth-last-child(-n+5).icon-image .desc p,
    .pattern02 ul li:nth-last-child(-n+5).icon-video .desc p {
        color: #fff;
        padding: 5px 0 5px 10px
    }
    .pattern02 ul li:nth-last-child(-n+5).icon-image .item:hover .desc p,
    .pattern02 ul li:nth-last-child(-n+5).icon-video .item:hover .desc p {
        color: #fff
    }
    .pattern02 ul li:nth-last-child(-n+5).icon-image .secName,
    .pattern02 ul li:nth-last-child(-n+5).icon-video .secName {
        margin-right: 0;
        color: #bbb;
        bottom: -2px
    }
    .pattern02 ul li:nth-last-child(-n+5).icon-image .secName:hover,
    .pattern02 ul li:nth-last-child(-n+5).icon-video .secName:hover {
        color: #fff
    }
    .pattern02 ul li.icon-video:before {
        content: "s";
        color: #fff;
        font-size: 30px;
        left: auto;
        right: 1px;
        width: 41px;
        height: 40px;
        line-height: 1.35
    }
    .pattern02 ul li:first-child.icon-video:before {
        font-size: 40px;
        width: 50px;
        height: 50px;
        line-height: 1.25;
        right: auto;
        left: 1px
    }
    .pattern02 ul li.icon-image:before {
        content: "t";
        color: #fff;
        font-size: 30px;
        left: auto;
        right: 1px;
        width: 41px;
        height: 40px;
        line-height: 1.35
    }
    .catPattern01 ul li:after,
    .catPattern01 ul li:nth-last-child(-n+7) .secName:after,
    .catPattern02 ul li:after,
    .catPattern03 ul li:after,
    .catPattern03 ul li:nth-last-child(-n+3) .secName:after,
    .cd-gallery li .secName:after,
    .cd-gallery li:after,
    .cd-gallery ul:after,
    article .pattern01 ul li .secName:after,
    article .pattern01 ul li:after {
        content: ""
    }
    .pattern02 ul li:first-child.icon-image:before {
        font-size: 40px;
        width: 50px;
        height: 50px;
        line-height: 1.25;
        right: auto;
        left: 1px
    }
    .listing {
        padding: 15px 10px
    }
    .article {
        padding: 10px
    }
    .breadcrumb {
        padding: 5px 12px
    }
    .breadcrumb li a {
        font-size: 14px
    }
    .breadcrumb li a:after {
        margin: 0 10px;
        font-size: 16px
    }
    article .imgDiv {
        width: 100%
    }
    article .articleHeader h2 {
        font-size: 24px
    }
    article .articleHeader .time {
        font-size: 14px
    }
    article .articleHeader .icon-time:before {
        font-size: 18px
    }
    article .articleHeader .time span:after {
        top: 6px;
        height: 14px
    }
    article .pattern01 .allItems {
        padding: 10px 0
    }
    article .pattern01 ul li {
        margin-left: 0;
        margin-bottom: 20px;
        padding-bottom: 0;
        width: 100%;
        height: auto;
        border-bottom: none;
        position: relative;
        overflow: visible
    }
    article .pattern01 ul li:after {
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0;
        display: block
    }
    .catPattern01 ul li:first-child:after,
    .catPattern01 ul li:last-child:after,
    article .nextLink a:after,
    article .pattern01 ul li:last-child:after {
        display: none
    }
    article .pattern01 ul li:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0
    }
    article .pattern01 ul li .item .imageCntnr {
        width: 132px;
        padding-bottom: calc((132px * 75)/ 100);
        margin-left: 10px;
        float: right
    }
    article .pattern01 ul li .item img {
        width: 100%;
        height: 100%;
        float: right;
        border: 1px solid #ddd
    }
    article .pattern01 ul li:nth-last-child(-n+5) {
        margin-bottom: 20px
    }
    article .pattern01 ul li .desc {
        width: calc(100% - 142px);
        overflow: hidden;
        cursor: pointer;
        float: right
    }
    article .pattern01 ul li .desc p {
        color: #1d1d1d;
        width: 100%;
        height: 62px;
        overflow: hidden;
        text-align: right;
        line-height: 1.4;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        transition: all .2s ease-in-out 0s;
        -webkit-transition: all .2s ease-in-out 0s;
        -moz-transition: all .2s ease-in-out 0s;
        -o-transition: all .2s ease-in-out 0s;
        -ms-transition: all .2s ease-in-out 0s
    }
    article .pattern01 ul li .item:hover .desc p {
        color: #888
    }
    article .pattern01 ul li .secName {
        font-family: DroidKufiLight, Arial;
        font-size: 14px;
        color: #888;
        position: absolute;
        bottom: 0;
        right: 142px
    }
    article .pattern01 ul li .secName:after {
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 4px
    }
    article .pattern01 ul li .secName:hover {
        color: #1d1d1d
    }
    article .pattern01 ul li.icon-image .desc p,
    article .pattern01 ul li.icon-video .desc p {
        padding: 5px 0 5px 10px
    }
    article .pattern01 ul li.icon-image .secName,
    article .pattern01 ul li.icon-video .secName {
        margin-right: 0
    }
    article .details iframe,
    article .details img {
        margin: 40px calc((100% - 300px)/ 2);
        width: 300px
    }
    article .pattern01 ul li.icon-image:before,
    article .pattern01 ul li.icon-video:before {
        right: 1px
    }
    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 .dots,
    article .pagination ul li a,
    article .pagination ul li.nextPrev a {
        width: 100%
    }
    article .details img {
        height: auto
    }
    article .details iframe {
        height: 225px
    }
    .repeatDiv {
        width: 300px;
        margin-left: -150px;
        padding: 45px 0
    }
    .repeatDiv .nextAlbum h3 {
        font-size: 14px;
        margin-bottom: 0
    }
    .catPattern01 ul li:first-child,
    .catPattern01 ul li:nth-child(4),
    .catPattern01 ul li:nth-child(5),
    .catPattern01 ul li:nth-last-child(-n+7) {
        margin-bottom: 20px
    }
    .catPattern01 {
        padding: 10px
    }
    .catPattern01 .allItems {
        padding: 10px 0
    }
    .catPattern01 ul li {
        margin-left: 0;
        width: 100%;
        margin-bottom: 20px;
        overflow: visible
    }
    .catPattern01 ul li:after {
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0
    }
    .catPattern01 ul li a .imageCntnr {
        position: relative;
        width: 132px;
        overflow: hidden;
        padding-bottom: calc((132px * 75)/ 100);
        float: right;
        margin-left: 10px
    }
    .catPattern01 ul li:first-child a .imageCntnr {
        width: 100%;
        padding-bottom: 75%
    }
    .catPattern01 ul li:first-child,
    .catPattern01 ul li:nth-child(2),
    .catPattern01 ul li:nth-child(3) {
        width: 100%
    }
    .catPattern01 ul li:last-child,
    .catPattern01 ul li:nth-child(3),
    .catPattern01 ul li:nth-child(5) {
        margin-left: 0
    }
    .catPattern01 ul li:last-child {
        display: block;
        margin-bottom: 0
    }
    .catPattern02 ul li:first-child,
    .catPattern02 ul li:nth-child(4),
    .catPattern02 ul li:nth-child(5),
    .catPattern02 ul li:nth-last-child(-n+4) {
        margin-bottom: 20px
    }
    .catPattern01 ul li:nth-last-child(-n+7) .desc {
        width: calc(100% - 142px);
        height: auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        bottom: 0;
        right: 0;
        background: 0 0
    }
    .catPattern01 ul li:nth-last-child(-n+7) .desc p {
        color: #1d1d1d;
        text-align: right;
        line-height: 1.6;
        height: 72px;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        position: relative;
        bottom: 0;
        right: 0
    }
    .catPattern01 ul li:nth-last-child(-n+7) .secName {
        padding: 0;
        position: absolute;
        top: auto;
        bottom: 5px;
        right: 142px;
        background: 0 0!important;
        color: #888;
        font-size: 14px
    }
    .catPattern01 ul li:nth-last-child(-n+7) .secName:after {
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 6px;
        display: block
    }
    .catPattern01 ul li:nth-last-child(-n+7) .item:hover .desc p {
        color: #888
    }
    .catPattern01 ul li:nth-last-child(-n+7) .secName:hover {
        color: #1d1d1d
    }
    .catPattern01 ul li:nth-last-child(-n+7).icon-image,
    .catPattern01 ul li:nth-last-child(-n+7).icon-video {
        background: #1d1d1d
    }
    .catPattern01 ul li:nth-last-child(-n+7).icon-image:before,
    .catPattern01 ul li:nth-last-child(-n+7).icon-video:before {
        right: 1px;
        width: 40px;
        height: 40px;
        font-size: 30px
    }
    .catPattern01 ul li:nth-last-child(-n+7).icon-image .desc p,
    .catPattern01 ul li:nth-last-child(-n+7).icon-video .desc p {
        color: #fff;
        padding: 5px 0 5px 10px
    }
    .catPattern01 ul li:nth-last-child(-n+7).icon-image .item:hover .desc p,
    .catPattern01 ul li:nth-last-child(-n+7).icon-video .item:hover .desc p {
        color: #fff
    }
    .catPattern01 ul li:nth-last-child(-n+7).icon-image .secName,
    .catPattern01 ul li:nth-last-child(-n+7).icon-video .secName {
        margin-right: 0;
        color: #fff
    }
    .catPattern01 ul li:nth-last-child(-n+7).icon-image .secName:hover,
    .catPattern01 ul li:nth-last-child(-n+7).icon-video .secName:hover {
        color: #fff
    }
    .catPattern02 {
        padding: 10px
    }
    .catPattern02 .allItems {
        padding: 10px 0
    }
    .catPattern02 ul li {
        margin-left: 0;
        width: 100%;
        margin-bottom: 20px;
        overflow: visible
    }
    .catPattern02 ul li:after {
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0
    }
    .catPattern02 ul li:first-child:after,
    .catPattern02 ul li:last-child:after {
        display: none
    }
    .catPattern02 ul li a .imageCntnr {
        position: relative;
        width: 132px;
        overflow: hidden;
        padding-bottom: calc((132px * 75)/ 100);
        float: right;
        margin-left: 10px
    }
    .catPattern02 ul li:first-child a .imageCntnr {
        width: 100%;
        padding-bottom: 75%
    }
    .catPattern02 ul li:first-child,
    .catPattern02 ul li:nth-child(2),
    .catPattern02 ul li:nth-child(3) {
        width: 100%
    }
    .catPattern02 ul li:last-child,
    .catPattern02 ul li:nth-child(3),
    .catPattern02 ul li:nth-child(5) {
        margin-left: 0
    }
    .catPattern02 ul li:last-child {
        display: block;
        margin-bottom: 0
    }
    .catPattern03 ul li:first-child,
    .catPattern03 ul li:nth-child(4),
    .catPattern03 ul li:nth-child(5),
    .catPattern03 ul li:nth-last-child(-n+3) {
        margin-bottom: 20px
    }
    .catPattern02 ul li:nth-last-child(-n+4) .desc {
        width: calc(100% - 142px);
        height: auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        bottom: 0;
        right: 0;
        background: 0 0
    }
    .catPattern02 ul li:nth-last-child(-n+4) .desc p {
        color: #1d1d1d;
        text-align: right;
        line-height: 1.6;
        height: 72px;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        position: relative;
        bottom: 0;
        right: 0
    }
    .catPattern02 ul li:nth-last-child(-n+4) .secName {
        padding: 0;
        position: absolute;
        top: auto;
        bottom: 5px;
        right: 142px;
        background: 0 0!important;
        color: #888;
        font-size: 14px
    }
    .catPattern02 ul li:nth-last-child(-n+4) .secName:after {
        content: "";
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 6px;
        display: block
    }
    .catPattern02 ul li:nth-last-child(-n+4) .item:hover .desc p {
        color: #888
    }
    .catPattern02 ul li:nth-last-child(-n+4) .secName:hover {
        color: #1d1d1d
    }
    .catPattern02 ul li:nth-last-child(-n+4).icon-image,
    .catPattern02 ul li:nth-last-child(-n+4).icon-video {
        background: #1d1d1d
    }
    .catPattern02 ul li:nth-last-child(-n+4).icon-image:before,
    .catPattern02 ul li:nth-last-child(-n+4).icon-video:before {
        right: 1px;
        width: 40px;
        height: 40px;
        font-size: 30px
    }
    .catPattern02 ul li:nth-last-child(-n+4).icon-image .desc p,
    .catPattern02 ul li:nth-last-child(-n+4).icon-video .desc p {
        color: #fff;
        padding: 5px 0 5px 10px
    }
    .catPattern02 ul li:nth-last-child(-n+4).icon-image .item:hover .desc p,
    .catPattern02 ul li:nth-last-child(-n+4).icon-video .item:hover .desc p {
        color: #fff
    }
    .catPattern02 ul li:nth-last-child(-n+4).icon-image .secName,
    .catPattern02 ul li:nth-last-child(-n+4).icon-video .secName {
        margin-right: 0;
        color: #fff
    }
    .catPattern02 ul li:nth-last-child(-n+4).icon-image .secName:hover,
    .catPattern02 ul li:nth-last-child(-n+4).icon-video .secName:hover {
        color: #fff
    }
    .catPattern03 {
        padding: 10px
    }
    .catPattern03 .allItems {
        padding: 10px 0
    }
    .catPattern03 ul li {
        margin-left: 0;
        width: 100%;
        margin-bottom: 20px;
        overflow: visible
    }
    .catPattern03 ul li:after {
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0;
        display: block
    }
    .catPattern03 ul li:first-child:after,
    .catPattern03 ul li:last-child:after {
        display: none
    }
    .catPattern03 ul li a .imageCntnr {
        position: relative;
        width: 132px;
        overflow: hidden;
        padding-bottom: calc((132px * 75)/ 100);
        float: right;
        margin-left: 10px
    }
    .catPattern03 ul li:first-child a .imageCntnr {
        width: 100%;
        padding-bottom: 75%
    }
    .catPattern03 ul li:first-child,
    .catPattern03 ul li:nth-child(2),
    .catPattern03 ul li:nth-child(3) {
        width: 100%
    }
    .catPattern03 ul li:last-child,
    .catPattern03 ul li:nth-child(3),
    .catPattern03 ul li:nth-child(5) {
        margin-left: 0
    }
    .catPattern03 ul li:last-child {
        display: block;
        margin-bottom: 0
    }
    .catPattern03 ul li:nth-last-child(-n+3) .desc {
        width: calc(100% - 142px);
        height: auto;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        bottom: 0;
        right: 0;
        background: 0 0
    }
    .catPattern03 ul li:nth-last-child(-n+3) .desc p {
        color: #1d1d1d;
        text-align: right;
        line-height: 1.6;
        height: 72px;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        position: relative;
        bottom: 0;
        right: 0
    }
    .catPattern03 ul li:nth-last-child(-n+3) .secName {
        padding: 0;
        position: absolute;
        top: auto;
        bottom: 5px;
        right: 142px;
        background: 0 0!important;
        color: #888;
        font-size: 14px
    }
    .catPattern03 ul li:nth-last-child(-n+3) .secName:after {
        width: 4px;
        height: 14px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 6px;
        display: block
    }
    .catPattern03 ul li:nth-last-child(-n+3) .item:hover .desc p {
        color: #888
    }
    .catPattern03 ul li:nth-last-child(-n+3) .secName:hover {
        color: #1d1d1d
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video {
        background: #1d1d1d
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image:before,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video:before {
        right: 1px
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image .desc p,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video .desc p {
        color: #fff;
        padding: 5px 0 5px 10px
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image .item:hover .desc p,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video .item:hover .desc p {
        color: #fff
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image .secName,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video .secName {
        margin-right: 0;
        color: #fff
    }
    .catPattern03 ul li:nth-last-child(-n+3).icon-image .secName:hover,
    .catPattern03 ul li:nth-last-child(-n+3).icon-video .secName:hover {
        color: #fff
    }
    .searchResult {
        padding: 15px 10px
    }
    .filterMainContent.is-fixed .cd-gallery {
        padding-top: 76px
    }
    .cd-gallery ul:after {
        display: table;
        clear: both
    }
    .cd-gallery .allItems {
        padding: 10px 0 0
    }
    .cd-gallery li {
        margin-left: 0;
        margin-bottom: 20px;
        padding-bottom: 0;
        width: 100%;
        height: auto;
        border-bottom: none;
        position: relative;
        overflow: visible;
        display: inline-block
    }
    .cd-gallery li.gap,
    .cd-gallery li:nth-last-child(-n+4):after {
        display: none
    }
    .cd-gallery li:after {
        width: 100%;
        height: 1px;
        background: #ddd;
        position: absolute;
        bottom: -10px;
        right: 0
    }
    .cd-gallery li:nth-last-child(-n+4) {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0
    }
    .cd-gallery li .item .imageCntnr {
        width: 132px;
        padding-bottom: calc((132px * 75)/ 100);
        margin-left: 10px;
        float: right
    }
    .cd-gallery li .item img {
        width: 100%;
        height: 100%;
        float: right;
        border: 1px solid #ddd
    }
    .cd-gallery li:last-child {
        margin-bottom: 0
    }
    .cd-gallery li .desc {
        width: calc(100% - 142px);
        overflow: hidden;
        cursor: pointer
    }
    .cd-gallery li .desc p {
        color: #1d1d1d;
        width: 100%;
        height: 46px;
        overflow: hidden;
        text-align: right;
        line-height: 1.6;
        padding: 5px 0;
        font-size: 14px;
        font-family: DroidKufiLight, Arial;
        transition: all .2s ease-in-out 0s;
        -webkit-transition: all .2s ease-in-out 0s;
        -moz-transition: all .2s ease-in-out 0s;
        -o-transition: all .2s ease-in-out 0s;
        -ms-transition: all .2s ease-in-out 0s
    }
    .cd-gallery li .item:hover .desc p {
        color: #888
    }
    .cd-gallery li .secName {
        font-family: DroidKufiLight, Arial;
        font-size: 12px;
        color: #888;
        position: relative;
        margin-top: 4px
    }
    .cd-gallery li .secName:after {
        width: 4px;
        height: 10px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 5px
    }
    .cd-gallery li .secName:hover {
        color: #1d1d1d
    }
    .cd-gallery li .time {
        width: auto;
        float: right;
        margin: 0;
        font-size: 12px;
        position: absolute;
        right: 142px;
        bottom: 0
    }
    .surveyDiv .allQues .chooseAnswer .ok,
    .surveyDiv .resultDiv .surveyCompleted .ok {
        bottom: 12px
    }
    .cd-gallery li .icon-time:before {
        font-size: 14px
    }
    .cd-gallery li.icon-image .desc p,
    .cd-gallery li.icon-video .desc p {
        padding: 5px 0 5px 10px
    }
    .cd-gallery li.icon-image .secName,
    .cd-gallery li.icon-video .secName {
        margin-right: 0
    }
    .cd-gallery li.icon-image .time,
    .cd-gallery li.icon-video .time {
        margin: 0
    }
    .cd-gallery li.icon-image:before,
    .cd-gallery li.icon-video:before {
        right: 1px
    }
    .author .cd-gallery li,
    .authorsListing .cd-gallery li {
        width: 100%
    }
    .searchResult h2 {
        font-size: 20px;
        margin-bottom: 15px
    }
    .searchResult form {
        padding: 12px
    }
    .datepicker-form .icon-date,
    .searchResult form .morphsearch-submit {
        top: 24px;
        left: 24px
    }
    .filterMainContent h3 {
        width: 100px
    }
    .cd-tab-filter-wrapper {
        width: calc(100% - 100px)
    }
    .sportsContainer .allMatches .slide {
        width: 160%
    }
    .sportsContainer .allMatches .item {
        width: calc(100% / 3)
    }
    .sportsContainer .allMatches .item .tourName {
        margin-bottom: 24px
    }
    .sportsContainer .allMatches .item .teamA {
        width: 80px;
        height: 70px
    }
    .sportsContainer .allMatches .item .teamA img,
    .sportsContainer .allMatches .item .teamB img {
        height: 42px
    }
    .sportsContainer .allMatches .item .teamA p,
    .sportsContainer .allMatches .item .teamB p {
        padding-top: 10px;
        font-size: 12px
    }
    .sportsContainer .allMatches .item .result {
        width: calc(100% - 160px);
        font-size: 32px
    }
    .sportsContainer .allMatches .item .result.yesterday {
        padding-top: 12px
    }
    .sportsContainer .allMatches .item .teamB {
        float: right;
        width: 80px;
        height: 70px
    }
    .sportsContainer .allMatches .item .result span {
        font-size: 16px!important
    }
    .sportsContainer .allMatches .item .result span.now {
        font-size: 14px!important;
        line-height: 1.6
    }
    .sportsContainer .allMatches .item .status a {
        font-size: 12px
    }
    .sportsContainer .allMatches .status span {
        margin-top: 26px
    }
    .sportsContainer .allMatches .matchResult {
        font-size: 32px;
        margin-top: 0
    }
    .matchesSchedule .allMatches h2 {
        font-size: 18px
    }
    .matchesSchedule .allMatches .dropDownDiv {
        padding: 12px
    }
    .matchesSchedule .table {
        padding: 15px 10px
    }
    .matchesSchedule .table .allMatches .tabs-nav li>a {
        padding: 0 16px;
        font-size: 14px
    }
    .matchesSchedule .table .allMatches .item .time {
        line-height: 4;
        width: 60px;
        font-size: 16px;
        text-align: right;
        position: relative;
        display: inline-block;
        height: 70px
    }
    .matchesSchedule .table .allMatches .item .channel,
    .overflow-hidden .morphSearchDiv,
    .prayerTimes .monthTable .prayersTable .allTimes .time span,
    .surveyDiv .timeLineDiv ul {
        display: none
    }
    .matchesSchedule .table .allMatches .item .time span {
        margin-top: -8px;
        position: absolute;
        top: 50%;
        right: 0
    }
    .matchesSchedule .table .allMatches .item .time span.now {
        margin: -13px 0 0!important;
        position: absolute;
        top: 50%;
        right: 0
    }
    .matchesSchedule .table .allMatches .item .teamA,
    .matchesSchedule .table .allMatches .item .teamB {
        text-align: center;
        width: calc((100% - 150px)/ 2);
        height: auto
    }
    .matchesSchedule .table .allMatches .item .teamA img {
        float: none;
        margin-right: 0
    }
    .matchesSchedule .table .allMatches .item .teamB img {
        float: none;
        margin-left: 0
    }
    .matchesSchedule .table .allMatches .item .teamA p,
    .matchesSchedule .table .allMatches .item .teamB p {
        float: none;
        text-align: center;
        line-height: 1.6;
        margin-top: 5px;
        height: auto;
        overflow: hidden
    }
    .matchesSchedule .table .allMatches .item .match {
        height: auto
    }
    .matchesSchedule .table .allMatches .item .result {
        width: 90px;
        margin-top: 20px
    }
    .matchesSchedule .table .allMatches .item .result .matchResult {
        margin-top: 0;
        font-size: 32px
    }
    .matchesSchedule .listing {
        padding: 24px 10px
    }
    .prayerTimes .main {
        padding: 10px
    }
    .prayerTimes .main .location,
    .prayerTimes .main .ttl {
        margin-bottom: 12px
    }
    .prayerTimes .main .cityDate .cityName,
    .prayerTimes .main .cityDate .cityName:after,
    .prayerTimes .main .cityDate .countryName {
        font-size: 24px
    }
    .prayerTimes .main .dropDownDiv {
        width: 100%;
        margin-bottom: 24px
    }
    .prayerTimes .main .cityDate {
        width: 100%;
        margin-left: 0
    }
    .prayerTimes .cntdwn {
        width: 100%;
        margin: 0 0 24px
    }
    .prayerTimes .mainTable .prayersTable {
        width: 100%
    }
    .prayerTimes .mainTable .prayersTable .title .name {
        font-size: 12px
    }
    .prayerTimes .mainTable .prayersTable .allTimes .time {
        font-size: 16px
    }
    .prayerTimes .mainTable .prayersTable .allTimes .time span {
        font-size: 14px
    }
    .prayerTimes .monthTable .prayersTable .title .name:first-child {
        width: 110px
    }
    .prayerTimes .monthTable .prayersTable .title .name {
        width: calc((100% - 110px)/ 6);
        font-size: 10px
    }
    .prayerTimes .monthTable .prayersTable .allTimes .time:first-child {
        width: 110px
    }
    .prayerTimes .monthTable .prayersTable .allTimes .time {
        width: calc((100% - 110px)/ 6);
        font-size: 11px
    }
    .weatherDiv .main {
        padding: 24px 10px
    }
    .weatherDiv .main .location,
    .weatherDiv .main .ttl {
        margin-bottom: 12px
    }
    .weatherDiv .main .cityDate .cityName,
    .weatherDiv .main .cityDate .cityName:after,
    .weatherDiv .main .cityDate .countryName {
        font-size: 24px
    }
    .weatherDiv .main .dropDownDiv {
        width: 100%;
        margin-bottom: 24px
    }
    .weatherDiv .main .cityDate {
        width: 100%;
        margin-left: 0
    }
    .weatherDiv .cntdwn {
        width: 100%;
        margin: 0 0 24px
    }
    .weatherDiv .mainTable .weatherTable {
        width: 100%
    }
    .weatherDiv .mainTable .weatherTable .title .name {
        font-size: 12px
    }
    .weatherDiv .mainTable .weatherTable .allTimes .time {
        font-size: 16px
    }
    .weatherDiv .mainTable .weatherTable .allTimes .time span {
        font-size: 14px
    }
    .weatherDiv .main .weatherIconCnts {
        margin-left: 30px
    }
    .weatherDiv .temp .icon-high {
        font-size: 48px;
        margin-left: 24px;
        margin-top: 30px
    }
    .weatherDiv .temp .icon-low {
        font-size: 36px;
        margin-top: 40px
    }
    .currGoldDiv .main h3 {
        font-size: 16px;
        margin: 12px 0
    }
    .currGoldDiv .goldDiv .goldProvider {
        margin: 12px calc((100% - 300px)/ 2) 24px
    }
    .contactUsDiv .contactUsCnts,
    .masrawyServicesDiv .services,
    .newsPointerDiv .newsPointer,
    .zakahDiv .zakahCnts {
        padding: 15px 10px
    }
    .masrawyServicesDiv .services h3 {
        padding: 12px;
        font-size: 16px
    }
    .surveyDiv .questionsDiv .ttl h2,
    .surveyDiv .resultDiv .ttl h2 {
        font-size: 18px
    }
    .masrawyServicesDiv .services .servicesCnts .item {
        min-width: 300px;
        width: 100%;
        margin: 0 0 24px
    }
    .masrawyServicesDiv .services .servicesCnts .item p {
        height: auto
    }
    .innerListingContainer,
    .policyDiv .policy,
    .pollListingDiv .pollListing {
        padding: 15px 10px
    }
    .author .cd-tab-filter-wrapper,
    .authorsListing .cd-tab-filter-wrapper {
        padding: 12px
    }
    .author .authorData img {
        margin: 0 calc((100% - 186px)/ 2)
    }
    .author .authorData .data {
        width: 100%;
        margin-right: 0;
        margin-top: 24px
    }
    .author .cd-gallery li .desc {
        width: 100%
    }
    .author .cd-gallery li.icon-image .desc p,
    .author .cd-gallery li.icon-video .desc p {
        padding: 5px 0 5px 30px
    }
    .surveyDiv .questionsDiv,
    .surveyDiv .resultDiv {
        padding: 15px 10px
    }
    .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;
        margin-top: 24px
    }
    article .authorDtls .articleHeader .time {
        width: 100%;
        right: 0;
        position: relative;
        margin-top: 12px
    }
    .author .authorData .data .name {
        margin-bottom: 12px
    }
    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
    }
    .mobile.seatNumber .errorMsg,
    .mobile.seatNumber .labelDiv label {
        direction: rtl;
        text-align: right;
        font-family: DroidKufiLight, Arial;
        float: right
    }
    article .details .leaderboardDiv .leaderboard {
        width: 300px;
        height: 250px
    }
    article .details .leaderboardDiv iframe {
        margin: 0 calc((100% - 300px)/ 2);
        height: 250px;
        width: 300px
    }
    .articleDiv .topLBArticle .leaderboardDiv {
        margin: 24px auto
    }
    #cd-lateral-nav .scroll {
        mix-blend-mode: normal;
        background: 0 0;
        width: 100%
    }
    .scrollContainer {
        background: 0 0
    }
    .surveyDiv .allQues h4 {
        margin: 24px 0;
        font-size: 18px
    }
    .surveyDiv .allQues .answersDiv .answerItem,
    .surveyDiv .resultDiv .grid li {
        width: 100%;
        margin-left: 0
    }
    .surveyDiv .resultDiv .slideshow,
    .surveyDiv .resultDiv .slideshow figure {
        overflow: auto
    }
    .surveyDiv .questionsDiv .cd-popup-container {
        width: 300px;
        padding: 12px;
        height: 150px;
        margin: -75px auto
    }
    .surveyDiv .questionsDiv .cd-popup-container p {
        margin-top: 20px;
        font-size: 16px
    }
    .surveyDiv .questionsDiv .cd-popup-container .cd-popup-close {
        width: 24px;
        height: 24px
    }
    .surveyDiv .resultDiv .cd-popup-container {
        width: 300px;
        padding: 12px;
        height: 150px;
        margin: -75px auto
    }
    .surveyDiv .resultDiv .surveyCompleted p {
        margin-top: 20px;
        font-size: 16px
    }
    .surveyDiv .resultDiv .cd-popup-container .cd-popup-close {
        width: 24px;
        height: 24px
    }
    .mobile.seatNumber {
        display: inline-block;
        width: 300px;
        margin: 0 calc((100% - 300px)/ 2) 40px;
        background: #1d1d1d;
        padding: 10px;
        position: relative;
        height: 300px
    }
    .mobile.seatNumber .ttl {
        border-bottom: 1px solid #fff
    }
    .mobile.seatNumber .ttl h2 {
        color: #fff
    }
    .mobile.seatNumber .ttl h2:after {
        background: #fff
    }
    .mobile.seatNumber .labelDiv {
        float: right;
        width: 100%;
        margin-top: 12px
    }
    .mobile.seatNumber .labelDiv label {
        font-size: 16px;
        color: #fff;
        margin-bottom: 5px
    }
    .mobile.seatNumber .labelDiv span {
        color: #e63b34;
        float: right;
        margin-right: 2px;
        line-height: 1.5
    }
    .mobile.seatNumber input {
        width: 100%;
        height: 40px!important;
        border: 1px solid #ddd;
        float: right;
        outline: 0;
        padding: 12px;
        font-family: DroidKufiLight, Arial;
        color: #888;
        font-size: 14px
    }
    .mobile.seatNumber .errorMsg {
        position: relative;
        right: 0;
        display: inline-block;
        font-size: 12px;
        color: #aaa;
        visibility: hidden;
        margin-top: 5px
    }
    .mobile.seatNumber a {
        display: inline-block;
        width: 132px;
        font-family: DroidKufiLight, Arial;
        background: #e63b34;
        color: #fff;
        font-size: 16px;
        text-align: center;
        padding: 5px 0;
        margin: 5px calc((100% - 132px)/ 2)
    }
    .mobile.seatNumber a:hover {
        background: #aa120d
    }
    .mobile.seatNumber .thanawyaSponsor {
        display: inline-block;
        width: 100%;
        background: #000;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1
    }
    .mobile.seatNumber .thanawyaSponsor .cnts {
        display: inline-block;
        width: 166px;
        margin: 0 calc((100% - 166px)/ 2);
        float: right;
        padding: 8px 0
    }
    .mobile.seatNumber .thanawyaSponsor .cnts .spnsr {
        float: right;
        margin-left: 24px;
        margin-top: 4px;
        font-family: DroidKufiLight, Arial;
        color: #fff;
        font-size: 14px
    }
    .mobile.seatNumber .thanawyaSponsor .cnts a {
        float: right;
        width: auto;
        background: 0 0;
        color: none;
        padding: 0;
        margin: 0
    }
    .mobile.seatNumber .thanawyaSponsor .cnts img {
        width: auto;
        height: 27px;
        border: none;
        margin: 0
    }
    .rssDiv .rssCnts {
        padding: 15px 10px
    }
}

.news .ttl,
.pattern02.news .ttl,
article.news .ttl {
    border-bottom: 1px solid #aa120d
}

@media screen and (max-width:767px) and (orientation:landscape) {
    .sportsContainer .allMatches .slide {
        width: 160%
    }
    .sportsContainer .allMatches .slide .noMatches {
        width: calc((100% / 2) + 108px)
    }
    .masrawyServices ul {
        width: 100%
    }
    .cd-gallery li .secName {
        font-family: DroidKufiLight, Arial;
        font-size: 12px;
        color: #888;
        position: absolute;
        bottom: 0;
        right: 142px
    }
    .cd-gallery li .secName:after {
        content: "";
        width: 4px;
        height: 10px;
        background: #aa120d;
        float: right;
        margin-left: 5px;
        margin-top: 5px
    }
    .cd-gallery li .secName:hover {
        color: #1d1d1d
    }
    .cd-gallery li .time {
        width: auto;
        float: left;
        margin: 0;
        font-size: 12px;
        position: absolute;
        right: auto;
        left: 10px;
        bottom: 5px
    }
    .cd-gallery li .icon-time:before {
        font-size: 14px
    }
    .openSearch .morphsearch.open .morphsearch-content {
        height: 160px
    }
}

.news .breadcrumb li.active a,
article.news .details p a,
article.news .nextLink a {
    color: #aa120d
}

@media screen and (max-width:767px) and (orientation:portrait) {
    .currGoldDiv .currencyDiv .currGoldTable .currGoldDtls .item:nth-child(2),
    .currGoldDiv .currencyDiv .currGoldTable .title .name:nth-child(2) {
        display: none
    }
    .contactUsDiv .contactForms .forms .item .errorMsg,
    .zakahDiv .zakahForms .forms .item .errorMsg {
        right: auto;
        left: 0;
        top: 0
    }
    .sportsContainer .allMatches .slide {
        width: 272%
    }
    .sportsContainer .allMatches .slide .noMatches {
        width: calc((100% / 3) + 36px)
    }
    .matchesSchedule .allMatches .item {
        width: 100%
    }
    .matchesSchedule .allMatches .item .tourName {
        margin-bottom: 24px
    }
    .matchesSchedule .allMatches .item .teamA {
        width: 80px;
        height: 70px
    }
    .matchesSchedule .allMatches .item .teamA img,
    .matchesSchedule .allMatches .item .teamB img {
        height: 42px
    }
    .matchesSchedule .allMatches .item .teamA p,
    .matchesSchedule .allMatches .item .teamB p {
        padding-top: 10px;
        font-size: 12px
    }
    .matchesSchedule .allMatches .item .result {
        width: calc(100% - 160px);
        font-size: 32px
    }
    .matchesSchedule .allMatches .item .result.yesterday {
        padding-top: 12px
    }
    .matchesSchedule .allMatches .item .teamB {
        float: right;
        width: 80px;
        height: 70px
    }
    .matchesSchedule .allMatches .item .result span {
        font-size: 14px!important
    }
    .matchesSchedule .allMatches .item .status a {
        font-size: 12px
    }
    .matchesSchedule .allMatches .status span {
        margin-top: 26px
    }
    .matchesSchedule .allMatches .matchResult {
        font-size: 32px;
        margin-top: 0
    }
    .caricature li {
        width: calc((100% - 24px)/ 2);
        max-width: none;
        margin-left: 24px;
        margin-bottom: 12px
    }
    .caricature li:nth-child(2n) {
        margin-left: 0
    }
    .caricature li:nth-last-child(-n+2) {
        margin-bottom: 0
    }
    .contactUsDiv .contactForms .forms .item,
    .zakahDiv .zakahForms .forms .item {
        margin-bottom: 24px
    }
    .poll {
        padding: 10px;
        width: 100%;
        height: auto
    }
    .masrawyServices ul {
        width: 200%
    }
    .table .allMatches .tabs-nav li>a {
        padding: 0 16px
    }
    .contactUsDiv .contactAds h3,
    .contactUsDiv .contactForms h3,
    .zakahDiv .zakahForms h3,
    .zakahDiv .zakahForms h4 {
        padding: 12px
    }
    .weatherDiv .weatherTable .allTimes .dayTemp,
    .weatherDiv .weatherTable .title .name {
        width: calc(100% / 3)
    }
    .weatherDiv .dayTempDtls .icon-high {
        font-size: 28px;
        margin-left: 16px
    }
    .weatherDiv .dayTempDtls .icon-high:before {
        font-size: 12px
    }
    .weatherDiv .dayTempDtls .icon-low {
        font-size: 20px
    }
    .weatherDiv .dayTempDtls .icon-low:before {
        font-size: 8px
    }
    .currGoldDiv .currencyDiv .currGoldTable .title .name {
        font-size: 14px;
        width: calc((100% - 150px)/ 2)
    }
    .currGoldDiv .currencyDiv .currGoldTable .title .name:first-child {
        width: 150px
    }
    .currGoldDiv .currencyDiv .currGoldTable .currGoldDtls .item {
        font-size: 14px;
        width: calc((100% - 150px)/ 2)
    }
    .currGoldDiv .currencyDiv .currGoldTable .currGoldDtls .item:first-child {
        width: 150px
    }
    .currGoldDiv .goldDiv .currGoldTable .currGoldDtls .item:nth-child(2),
    .currGoldDiv .goldDiv .currGoldTable .title .name:nth-child(2) {
        display: block
    }
    .contactUsDiv .contactForms .forms .item .labelDiv {
        width: 100%
    }
    .contactUsDiv .contactForms .forms .item input,
    .contactUsDiv .contactForms .forms .item textarea,
    .contactUsDiv .contactForms .forms .wrapper-demo {
        width: 100%!important
    }
    .contactUsDiv .contactAds .ads .item {
        width: 100%;
        margin-left: 0
    }
    .zakahDiv .zakahForms .forms .item .labelDiv {
        width: 100%
    }
    .zakahDiv .zakahForms .forms .item input,
    .zakahDiv .zakahForms .forms .item textarea,
    .zakahDiv .zakahForms .forms .wrapper-demo {
        width: 100%!important
    }
    header.lateral-menu-is-open #cd-menu-trigger {
        -webkit-transform: translateX(-260px);
        -moz-transform: translateX(-260px);
        -ms-transform: translateX(-260px);
        -o-transform: translateX(-260px);
        transform: translateX(-260px)
    }
    #cd-lateral-nav {
        width: 260px;
        -webkit-transform: translateX(260px);
        -moz-transform: translateX(260px);
        -ms-transform: translateX(260px);
        -o-transform: translateX(260px);
        transform: translateX(260px)
    }
    .scrollContainer {
        width: 260px
    }
    .scrollContainer .scroll {
        width: 250px;
        margin: 0 calc((100% - 250px)/ 2)
    }
    #cd-lateral-nav .socialDiv {
        width: 248px;
        margin: 0 calc((100% - 248px)/ 2) 24px
    }
    #cd-lateral-nav .socialDiv a {
        margin-left: 10px
    }
    .surveyDiv .resultDiv .slideshow li .answersDiv .answerItem {
        width: 100%
    }
}

.featuredArea ul li .secName.news {
    background: #aa120d
}

.featuredArea ul li:first-child .secName.news {
    background: #aa120d!important
}

.akhbarThemak li .secName.news:before,
.featuredArea ul li .secName.news:before,
.media ul li .secName.news,
.mostRead .allItems li .secName.news:after,
.news .mostRead .allItems li .number,
.news .ttl h2:after,
.pattern01 ul li .secName.news:after,
.pattern02.news .ttl h2:after,
.pattern02.news ul li .secName,
.pattern02.news ul li:nth-last-child(-n+3) .secName:after,
article.news .details p a:before,
article.news .nextLink a:after,
article.news .ttl h2:after {
    background: #aa120d
}

.pattern02.sports .ttl,
.sports .ttl,
article.sports .ttl {
    border-bottom: 1px solid #006829
}

.sports .breadcrumb li.active a,
article.sports .details p a,
article.sports .nextLink a {
    color: #006829
}

@media screen and (min-width:769px) and (max-width:1152px) {
    .pattern02.news ul li:nth-last-child(-n+3) .secName {
        background: #aa120d!important
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .featuredArea ul li:nth-last-child(-n+5) .secName.news:after,
    .pattern02.news ul li:nth-last-child(-n+5) .secName:after {
        background: #aa120d
    }
}

.cd-gallery li.news .secName:after {
    background: #aa120d
}

.featuredArea ul li .secName.sports {
    background: #006829
}

.featuredArea ul li:first-child .secName.sports {
    background: #006829!important
}

.akhbarThemak li .secName.sports:before,
.featuredArea ul li .secName.sports:before,
.media ul li .secName.sports,
.mostRead .allItems li .secName.sports:after,
.pattern01 ul li .secName.sports:after,
.pattern02.sports .ttl h2:after,
.pattern02.sports ul li .secName,
.pattern02.sports ul li:nth-last-child(-n+3) .secName:after,
.sports .mostRead .allItems li .number,
.sports .ttl h2:after,
article.sports .details p a:before,
article.sports .nextLink a:after,
article.sports .ttl h2:after {
    background: #006829
}

.arts .ttl,
.pattern02.arts .ttl,
.pattern02.ramadan .ttl,
article.arts .ttl {
    border-bottom: 1px solid #c15709
}

.arts .breadcrumb li.active a,
article.arts .details p a,
article.arts .nextLink a {
    color: #c15709
}

@media screen and (min-width:769px) and (max-width:1152px) {
    .pattern02.sports ul li:nth-last-child(-n+3) .secName {
        background: #006829!important
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .featuredArea ul li:nth-last-child(-n+5) .secName.sports:after,
    .pattern02.sports ul li:nth-last-child(-n+5) .secName:after {
        background: #006829
    }
}

.cd-gallery li.sports .secName:after {
    background: #006829
}

.featuredArea ul li .secName.arts {
    background: #c15709
}

.featuredArea ul li:first-child .secName.arts {
    background: #c15709!important
}

.akhbarThemak li .secName.arts:before,
.arts .mostRead .allItems li .number,
.arts .ttl h2:after,
.featuredArea ul li .secName.arts:before,
.media ul li .secName.arts,
.mostRead .allItems li .secName.arts:after,
.pattern01 ul li .secName.arts:after,
.pattern02.arts .ttl h2:after,
.pattern02.arts ul li .secName,
.pattern02.arts ul li:nth-last-child(-n+3) .secName:after,
.pattern02.ramadan .ttl h2:after,
.pattern02.ramadan ul li .secName,
.pattern02.ramadan ul li:nth-last-child(-n+3) .secName:after,
article.arts .details p a:before,
article.arts .nextLink a:after,
article.arts .ttl h2:after {
    background: #c15709
}

.howa_w_hya .ttl,
.pattern02.howa_w_hya .ttl,
article.howa_w_hya .ttl {
    border-bottom: 1px solid #9224a5
}

.howa_w_hya .breadcrumb li.active a,
article.howa_w_hya .details p a,
article.howa_w_hya .nextLink a {
    color: #9224a5
}

@media screen and (min-width:769px) and (max-width:1152px) {
    .pattern02.arts ul li:nth-last-child(-n+3) .secName,
    .pattern02.ramadan ul li:nth-last-child(-n+3) .secName {
        background: #c15709!important
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .featuredArea ul li:nth-last-child(-n+5) .secName.arts:after,
    .pattern02.arts ul li:nth-last-child(-n+5) .secName:after,
    .pattern02.ramadan ul li:nth-last-child(-n+5) .secName:after {
        background: #c15709
    }
}

.cd-gallery li.arts .secName:after {
    background: #c15709
}

.featuredArea ul li .secName.howa_w_hya {
    background: #9224a5
}

.featuredArea ul li:first-child .secName.howa_w_hya {
    background: #9224a5!important
}

.akhbarThemak li .secName.howa_w_hya:before,
.featuredArea ul li .secName.howa_w_hya:before,
.howa_w_hya .mostRead .allItems li .number,
.howa_w_hya .ttl h2:after,
.media ul li .secName.howa_w_hya,
.mostRead .allItems li .secName.howa_w_hya:after,
.pattern01 ul li .secName.howa_w_hya:after,
.pattern02.howa_w_hya .ttl h2:after,
.pattern02.howa_w_hya ul li .secName,
.pattern02.howa_w_hya ul li:nth-last-child(-n+3) .secName:after,
article.howa_w_hya .details p a:before,
article.howa_w_hya .nextLink a:after,
article.howa_w_hya .ttl h2:after {
    background: #9224a5
}

.autos .ttl,
.pattern02.autos .ttl,
article.autos .ttl {
    border-bottom: 1px solid #1877b6
}

.autos .breadcrumb li.active a,
article.autos .details p a,
article.autos .nextLink a {
    color: #1877b6
}

@media screen and (min-width:769px) and (max-width:1152px) {
    .pattern02.howa_w_hya ul li:nth-last-child(-n+3) .secName {
        background: #9224a5!important
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .featuredArea ul li:nth-last-child(-n+5) .secName.howa_w_hya:after,
    .pattern02.howa_w_hya ul li:nth-last-child(-n+5) .secName:after {
        background: #9224a5
    }
}

.cd-gallery li.howa_w_hya .secName:after {
    background: #9224a5
}

.featuredArea ul li .secName.autos {
    background: #1877b6
}

.featuredArea ul li:first-child .secName.autos {
    background: #1877b6!important
}

.akhbarThemak li .secName.autos:before,
.autos .mostRead .allItems li .number,
.autos .ttl h2:after,
.featuredArea ul li .secName.autos:before,
.media ul li .secName.autos,
.mostRead .allItems li .secName.autos:after,
.pattern01 ul li .secName.autos:after,
.pattern02.autos .ttl h2:after,
.pattern02.autos ul li .secName,
.pattern02.autos ul li:nth-last-child(-n+3) .secName:after,
article.autos .details p a:before,
article.autos .nextLink a:after,
article.autos .ttl h2:after {
    background: #1877b6
}

.islameyat .ttl,
.pattern02.islameyat .ttl,
article.islameyat .ttl {
    border-bottom: 1px solid #119e9e
}

.islameyat .breadcrumb li.active a,
article.islameyat .details p a,
article.islameyat .nextLink a {
    color: #119e9e
}

@media screen and (min-width:769px) and (max-width:1152px) {
    .pattern02.autos ul li:nth-last-child(-n+3) .secName {
        background: #1877b6!important
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .featuredArea ul li:nth-last-child(-n+5) .secName.autos:after,
    .pattern02.autos ul li:nth-last-child(-n+5) .secName:after {
        background: #1877b6
    }
}

.cd-gallery li.autos .secName:after {
    background: #1877b6
}

.featuredArea ul li .secName.islameyat {
    background: #119e9e
}

.featuredArea ul li:first-child .secName.islameyat {
    background: #119e9e!important
}

.akhbarThemak li .secName.islameyat:before,
.featuredArea ul li .secName.islameyat:before,
.islameyat .mostRead .allItems li .number,
.islameyat .ttl h2:after,
.media ul li .secName.islameyat,
.mostRead .allItems li .secName.islameyat:after,
.pattern01 ul li .secName.islameyat:after,
.pattern02.islameyat .ttl h2:after,
.pattern02.islameyat ul li .secName,
.pattern02.islameyat ul li:nth-last-child(-n+3) .secName:after,
article.islameyat .details p a:before,
article.islameyat .nextLink a:after,
article.islameyat .ttl h2:after {
    background: #119e9e
}

@media screen and (min-width:769px) and (max-width:1152px) {
    .pattern02.islameyat ul li:nth-last-child(-n+3) .secName {
        background: #119e9e!important
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .featuredArea ul li:nth-last-child(-n+5) .secName.islameyat:after,
    .pattern02.islameyat ul li:nth-last-child(-n+5) .secName:after {
        background: #119e9e
    }
}

.cd-gallery li.islameyat .secName:after {
    background: #119e9e
}