*{
	margin: 0px;
	padding: 0px;
}
body{
	margin: 0px;
	padding: 0px;
	font-family: wafi;
	overflow-x: hidden;
}
a{
	text-decoration: none;
	color: inherit;
}
a:hover{
	text-decoration: none;
	color: inherit;
}
a:link { text-decoration: none; }


a:visited { text-decoration: none; color: inherit;}

loadingImg
a:hover { text-decoration: none; }


a:active { text-decoration: none; }
.aler{
	width: 100%;
	display: block;
	text-align: center;
}

    /* first Header */
	header{
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1c806c+0,1c806c+100 */        
        background: rgb(28,128,108); /* Old browsers */
        background: -moz-linear-gradient(-45deg,  rgba(28,128,108,1) 0%, rgba(28,128,108,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg,  rgba(28,128,108,1) 0%,rgba(28,128,108,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg,  rgba(28,128,108,1) 0%,rgba(28,128,108,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c806c', endColorstr='#1c806c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        user-select: none;
        width:100%;
        margin: 0;
        padding:2px 0px;	
	}
	#headerMainDiv{
		background: url("../img/w_img/navZg.png");background-repeat: repeat;
	}
	#headerMainDiv .container{
		text-align: center;
        padding: 5px 10px;
        position: relative;
	}

	#headerMainDiv .container #logo {
		width: auto;
		position: relative;
		position:relative;
		margin:auto;
		text-align:center;
		display:inline-block;
        -webkit-box-shadow: 0 0 10px 1px #1f7d68;
        box-shadow: 0 0 10px 1px #1f7d68;        
	}
	#headerMainDiv .container #logo img[src="img/w_img/logoBackground.png"]{
		max-width:200px;height:auto;


	}
	#headerMainDiv .container #logo img[src="img/w_img/logo.svg"]{
        position: absolute;
		top:15px;
		left:38%;
		transform:translatX(38%);
		height:60px;
		width:auto;
	}
	#myWebsite {
        position: absolute;right: 5px;top: 5px;
	}
	#myWebsite div img[src="img/w_img/logo2.png"]{
		width:30px;
		height:auto;
		display: inline-block;
	}
	#myWebsite div img[src="img/w_img/navWebName.svg"]{
		width: 150px;
		height: auto;
	}
	#myWebsite div img[src="img/w_img/wafiNameText.png"]{
		max-width: 220px;
	}
    
    
    /*second Header*/
    
    #secondHeader{
        user-select: none;
        padding:0;margin:0;width:100%;
        background-color:#f6f8f9;
    }
    #secondHeader table{
        background-color: rgb(51,51,51,0);    
    }
    
    #secondHeader table tr td:nth-child(1),#secondHeader table tr td:nth-child(3){
        width:15%;
        over-flow:hidden;
        padding:0;
        position:relative;
    }
    #secondHeader table tr td:nth-child(1) p , #secondHeader table tr td:nth-child(3) p{
        height:16px;
        width:100%;
        background-color:#5a5a5a;
        position: absolute;top:0;
        left: 0;right: 0;
    }
    #secondHeader table tr td:nth-child(1) img{
        max-width: 33.07px;
        height: auto;
        position:absolute;
        top:0;
        left: -2px;
		user-select: none;
    }
    #secondHeader table tr td:nth-child(3) img{
        max-width: 33.07px;
        height: auto;        
        position:absolute;
        transform:rotateY(180deg);
        right:-2px;
        top:0px;
		user-select: none;
    }
    #secondHeader table tr td:nth-child(2) #webContent{
        background-color:#5a5a5a;
        padding:2px;
        width:100%;
        height:45px;
        max-height: 36px;
        text-align: center;
        color: #fff;
        font-family: wafi;
        font-size: 14px;
        display: flex;
        justify-content:space-between;
        align-content: stretch;
    }
	#secondHeader table tr td:nth-child(2) #webContent img[src="img/w_img/down.png"]{
        display: inline-block;
		width:15px;
		position:relative;
		margin: 3px;
		bottom: -3px;
		transition: all 0.3s ease;
	}
	#secondHeader table tr td:nth-child(2) #webContent div:hover img[src="img/w_img/down.png"]{
		bottom: -6px;
	}
    #secondHeader table tr td:nth-child(2) #webContent div {
        text-align: center; 
        padding-top: 5px;
		position: relative;
    }
    #secondHeader table tr td:nth-child(2) #webContent a div img[src="img/w_img/home.png"]{
        top: -4px;
        position: relative;
        margin: auto;
    }
    #secondHeader table tr td:nth-child(2) div{
        display: inline-block;
        margin: 0 0px;
        padding: 2px 5px;
        transition: all 0.3s ease;
    }
    #secondHeader table tr td:nth-child(2) div div:hover{
    color: #BBB8B8;
    border-radius: 0px;
    }
    #secondHeader table tr td:nth-child(2) div img[src="img/w_img/home.png"]{
        width: 30px;
        height: auto;
        margin-left: 20px;;
    }
	#secondHeader table tr td:nth-child(2) #webContent .list{
        position:absolute;
		top: 28px;
		background-color:rgba(255,255,255,0.95);border: 1px solid #ddd;
		color: #333;
		z-index: 3;
		left:50%;
		transform: translateX(-50%);
		width:100%;
		min-width:180px;
		font-size:12px; 
		font-family: wafi;
		text-align: right;
		padding: 1px 0;
		display: none;
	}
	#secondHeader table tr td:nth-child(2) #webContent div:hover .list{
        display: block;
	}
	#secondHeader table tr td:nth-child(2) #webContent .list p{
      padding: 5px 5px;
	  margin:2px 0;
	}
	#secondHeader table tr td:nth-child(2) #webContent .list p:hover{
        background-color:#5a5a5a;
		color: #fff;
	}
    /*white Header*/
    #thirdHeader{
        background-color:#f3f4f5;
        padding: 100px auto;
    }
    form{
        vertical-align: top;

    }
    form .advancedSearch{
        font-family: tahoma;
        font-size: 12px;
        display: inline-block;
        padding: 5px 10px;
        border-radius: 10px;
        background-color: #6a9781;
        color: #fff;
        user-select: none;
        margin: 0 5px;
    }
    form .advancedSearch:hover{
        cursor: pointer;
        background-color: #5e8572;
    }
    form #search{
        display: inline-block;
        position: relative;
        margin: 0 5px;
    }
    form #search input{
        border: 1px solid #d5dae0;
        border-radius: 10px;
        padding: 5px 10px;
        padding-left: 25px;
        text-align: right;
        outline: inherit;
    }
    form #search button{
        border: 0;
        position: absolute;left: 5px;
        top: 50%;
        transform: translateY(-50%);
    }
    form #search button img{
        width: 25px;
        background-color: #fff;
    }
    form  #mode{
        border: 1px solid #d5dae0;
        border-radius: 10px;
        padding: 2px 10px;
        display:inline-block;
        min-width:80px;
        transition: all 0.3s ease;
        user-select: none;
        position: relative;
        min-height: 30px;
    }
    #mode img{
        display: inline-block;
        width: 27px;
        height: auto;
        cursor: pointer;
    }
    #mode img[src="img/w_img/moon.svg"]{
        display: none;
        position: relative;
        right: -35px;
        transition: all 10s ease;
    }
    form #contactUs{
        padding: 5px 5px;
        display: inline-block;
        background-color: #e2b11a;
        color: #fff;
        margin: 0 5px;
        border-radius: 10px;
    }
    form #contactUs:hover{
        cursor: pointer;
        background-color: #cca018;
    }
    form #contactUs img{
        display: inline-block;
    }
    #background{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        background-color:rgba(24,24,24,1);
        display: none;

    }
    #advancedSearchContainer{
		display: none;
		width: 100%;
		max-width: 1224px;
        position: fixed;
		background-color:rgba(24,24,24,1);
        color: #fff;
        font-family: wafi;
        z-index: 3;
		top: 0;bottom: 0;
		left: 50%;
		transform: translateX(-50%);
        padding: 10px;
        user-select: none;
		text-align: center;
    }
#advancedSearchContainer #searchTarget{
	
}
    #search img[src="img/w_img/advanceSet.png"]{
        max-width: 20px;
        border: 0;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        display: none;
    }
    #siteAdministrationAddresses{
        margin: 30px auto;
    }
    #siteAdministrationAddresses h3{
        font-family: cairo;
        font-size: 20px;
        margin: 20px auto;
    }
    #siteAdministrationAddresses .contact{
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        margin: 10px auto;
    }
    #siteAdministrationAddresses div p:nth-child(1){
        width: 200px;
        text-align: right;
        font-size: 14px;
    }
    #siteAdministrationAddresses div:hover{
        color: #6a9781;
    } 
    #siteAdministrationAddresses #social{
        display: flex;
        justify-content: space-between;
        max-width: 500px;
        margin: 10px 3%;
    }
    #siteAdministrationAddresses #social p{
        width: 40px;
        height: 40px;
        position: relative;
        transition: all 0.3s ease;
    }
    #siteAdministrationAddresses #social p img{
        width: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    #siteAdministrationAddresses #social  p:nth-child(1){background-color:#445597;}
    #siteAdministrationAddresses #social  p:nth-child(2){background-color:#449bf1;}
    #siteAdministrationAddresses #social  p:nth-child(3){background-color:#61aceb;}
    #siteAdministrationAddresses #social  p:nth-child(4){background-color:#bb1a22;}
    #siteAdministrationAddresses #social  p:hover{
        background-color: #455c51;
        transform: rotate(20deg) scale(1.4);
        border-radius: 10px;
    }
    #siteAdministrationAddresses .msg{
        display: grid;
        grid-template-columns: 120px 1fr;
        font-size: 16px;
        font-family: wafi;
        margin: 10px 3%;
    }
    #siteAdministrationAddresses .msg div:nth-child(2) input{
        border: 1px solid #c9c9c9;
        width: 100%;
        max-width:290px;
        padding: 5px;
        outline: none;
        
    }
    
    #siteAdministrationAddresses .msg div:nth-child(2) textarea{
        border: 1px solid #c9c9c9;
        width: 100%;
        max-width:565px;
        height: 265px;
        padding: 5px;
        outline: none;
        
    } 
    #siteAdministrationAddresses #submit{
        text-align: left;
        margin-left:20%;
    }
    #siteAdministrationAddresses #submit input{
        font-family: wafi;
        color: #fff;
        background-color: #585f61;
        border: 0;
        padding: 5px 10px;
    }
    #siteAdministrationAddresses .alert{
        visibility: hidden;
        text-align: center;
    }
    #siteAdministrationAddresses #reCheck{
		max-width: 190px;
		text-align: center;
		border-radius: 10px;
		font-size: 16px;
		padding: 8px 5px;
		text-transform: uppercase;
		font-family: tahoma;
    }
    #leftSide.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 200px;
    }

/* social media */
#socialMedia table tr td:nth-child(1){
	width:40px;vertical-align:midle;text-align:center;border-right:2px solid #fff;padding:3px;
}
#socialMedia table tr td:nth-child(1) img{
	width:30px;height:auto;
}
#socialMedia table tr td:nth-child(2){
	vertical-align:midle;padding-left:5px;
}

    /*NEWS*/
    .fourmSubject{
        font-family: wafiBold;
        margin: 10px;
        text-align: center;
    }
    .fourmSubject img{
        width: 21px;
        display: inline-block;
        height: auto;
    }
    .fourmSubject p{
        display: inline-block;
        font-size: 26px;
        position: relative;
        bottom: -10px;
        font-weight: bolder;
		color: #525252;
    }
    
    
    
    /*news - Section 1 */
    
    
    
    
    /*drasat - Section 2*/
    #drasat{
        width: 100%;
        margin: auto;
        padding: 5px;        
    }

    .drasatIndexPost{
        width: 100%;
        padding: 6px;
        margin: 10px auto;
        font-family: wafiBold;  
        border: 1px solid #dcdcdc;
        transition: all 0.3s ease;
        display: grid;
        grid-template-columns:292px 1fr;
        grid-column-gap: 10px;
    }
    .drasatIndexPost:hover{
        background-color: rgba(220,220,220,0.5);
    }
    #drasatIndex{
        border: 1px solid #dcdcdc;
        padding-right: 5px;
        padding-left: 5px;
    }
    #drasatIndex .drasatIndexPost{
        width: 100%;
        padding: 6px;
        margin: 10px auto;
        font-family: wafiBold;  
        border: 0;
        border-bottom: 1px dashed #dcdcdc;
    }
    .drasatIndexPost div{
        display: inline-block;
        margin-bottom: 5px;
        vertical-align: middle;
    }
    .drasatIndexPost div:nth-child(1){

    }
    .drasatIndexPost div:nth-child(2){
        align-self: center
    }
    .drasatIndexPost div:nth-child(1) img{
        display: inline-block;
        width:100% ;
        height: auto;
    }
    .drasatIndexPost .title{
        font-size: 18px;
    }
    .drasatIndexPost .title:hover{
        color: #6a9781;
    }
    .drasatIndexPost .writer{
        font-family: wafiMedium;
        background-color: #6a9781;
        padding: 2px 5px;
        color: #fff;
        display: inline-block;
        text-align: center;
    }
    .drasatIndexPost .writer img{
        position: relative;
        top: -2px;
    }
    .drasatIndexPost .writer span{
        position: relative;
        top: -0px;
    }
    .drasatIndexPost .details{
        font-family:wafi3;color:#999999;
    }
	#pageN,#fourmId{
		display: none;
	}
	#DrastMore{
		direction: ltr;
	}
	#DrastMore div{
		background-color: #6a9781;
		display: inline-block;
		color: #fff;
		font-family: wafi;
		font-size: 16px;
		padding: 10px 30px;
		margin: 10px;
		border: 0;
		border-radius: 5px;
	}
#DrastMore div:hover{
	background-color: #76a68e;
}
    #more {
        position: relative;
        width: 100%;
        direction: ltr;
        right: -5px;
        margin-bottom: 5px;
		display: none;
    }
    #more div{
        text-align: center;
        width: 150px;
        padding: 5px 10px;
        background-color: #6a9781;
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    #more div p{
        position:absolute;
        padding: 30px;
        width: 200px;
        transform: rotate(-45deg);
        right: -200px;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
        background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg,  rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
        transition: all 0.2s ease;

    }
    #more div:hover{
        background-color: #455c51;
        cursor: pointer;
    }
    #more div:hover p{
        right: -5px;
}
    #socialMedia div:nth-child(1){
        width: 100%;
        text-align: center;
        font-family: wafi;
        color: #646464;
        font-size: 14px;
    }
    #socialMedia div table{
        width:100%;direction:ltr;color:#fff;font-family:arial;
    }
    #socialMedia div table tr{
        width:100%;border:4px solid #fafafb;
    }
    #socialMedia div table tr{
        transition: all 0.3s ease;
}
    #socialMedia div table tr:nth-child(1){background-color:#516eab;}
    #socialMedia div table tr:nth-child(1):hover{
        background-color:#223d76;
    }
    #socialMedia div table tr:nth-child(2){background-color:#44b3eb;}
    #socialMedia div table tr:nth-child(2):hover{
        background-color:#029fef;
    }
    #socialMedia div table tr:nth-child(3){background-color:#cd201f;}
    #socialMedia div table tr:nth-child(3):hover{
        background-color:#f83e3c;
    }
    #socialMedia div table tr:nth-child(4){background-color:#43a2d4;}
    #socialMedia div table tr:nth-child(4):hover{
        background-color:#029fef;
    }
    #socialMedia div table tr:nth-child(5){background-color:#fa5918;}
    #socialMedia div table tr:nth-child(5):hover{
        background-color:#d54004;
    }
    #drasatLeftSide{
        background-color: #fafafb;
        padding: 10px;
		margin-top: 20px;
}
    #drasatLeftSide #announcement{
        width: 100%;
        text-align: center;
    }
    #drasatLeftSide #announcement p{
        position: relative;
        margin: auto;
        font-family: wafiBold;
        font-size: 29px;
        font-weight: bold;
    }
    #drasatLeftSide #announcement img{
        margin-top: 10px;
        width: 100%;
        height: auto;
    }

/*ARCHIVE*/
    #leftSide{
        position: sticky;
        top: 60px;
    }
    .drasatIndexPost{
        border: 1px solid #dadada;
    }   
	#lastNews{
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-column-gap: 5px;
	}
	#lastNews .lastNew{
		padding: 5px;
		font-family: wafi;
		font-weight: bold;		
	}
	#lastNews div:hover{
		background-color:rgba(236,236,236,1.00);
		border-radius:5px;
	}	
	#lastNews .date{
		color: #999999;
		font-weight: solid;
		font-family:arial;
		margin: 2px 0;
	}
   #lastNews .date img[src='img/w_img/calender.png']{
	    position: relative;
	   top: -1px;
   }
	.loading p{
		color: #ddd;
		font-family: wafi;
	}
	#pageN{
		display: none;
	}
    
    /*encyclopedias*/

    #encFourmTitle .row{
        margin: 10px auto;
    }
    #encFourmTitle #fourmTitle{
        color: #000;
        text-align: center;
        font-size: 22px;
        font-family: wafiBold;
        max-width: 370px;
        margin:20px auto;
        margin-top: 50px;
    }

    #encFourmTitle #pdf{
        border: 2px solid #dadada; 
        padding: 0 10px;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(5,auto);
        grid-row-gap: 0px;
        grid-column-gap: 5px;
         align-items: stretch;
		margin-bottom: 40px;
    } 
    
    #encFourmTitle #pdf div{
        padding: 10px;
        text-align: center;
        position: relative;
    }
    #encFourmTitle #pdf div div{
        position: relative;
        padding: 0;
        overflow: hidden;
        border-radius: 10px; 
        vertical-align: top;
    }
    #encFourmTitle #pdf div div .img-responsive{
        background-color: #c8c8c8;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 10px;
        margin: 0;
        transition: all 0.3s ease;
        user-select: none;
    }
    #encFourmTitle #pdf div div img[src="img/w_img/redPdf.png"]{
        position: absolute;
        bottom: 10px;
        left: 10px;
        z-index: 2;
        width: auto;
        max-width: 40px;
        height: auto;
		cursor: pointer;
    }
    #encFourmTitle #pdf div p{
        margin-top: 5px;
        font-family: cairo;
    }
    #encFourmTitle #pdf div:hover p{
        color: #026b57;
        cursor: pointer;
    }  
    #encFourmTitle #pdf div:hover div .img-responsive{
        transform: scale(1.1);
        filter: grayscale(75%);
        cursor: pointer;

    }    
    #encFourmTitle #pdf div p img[src="img/w_img/calender.png"]{
        display: inline-block;
        border-radius: 0;
        position: relative;
        bottom: -1px;
    }
    #encFourmTitle #pdf div p span{
        font-family: tahoma;
        color: #858585;
    }


    /* makalat - section 3 */
    
    .mkalat{
        width: 100%;
        border: 1px solid #dadada;
        padding: 20px 20px;
        border-radius: 10px;
    }
    .mkalat .makalatTitle{
        width: 100%;
        position: relative;
        display: block;
    }
    .mkalat .makalatTitle img{
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .mkalat .makalatTitle p{
        color: #fff;
        font-family: wafiBold;
        font-size: 20px;
        text-align: center;        
        background-color: rgba(29,145,90,0.8);
        padding: 10px;
        min-width: 90px;
        border-radius: 10px;
        transition: all 0.3s ease;
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
    }
    .mkalat .makalatTitle p:hover{
        background-color: rgba(29,145,90,0.9);
        cursor: pointer;
    }
    
    .mkalat .makalatTitle p span{
        position: relative;
        top: -4px;
    }
    .mkalat .writer{
        display: grid;
		grid-template-columns: 105px 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: 10px;
        width: 100%;
        margin-top: 20px;
        font-family: wafi;
    }
    .mkalat .writer div{
		align-self: baseline;
    }

    .mkalat .writer div:nth-child(1) img{
        width:100%;
    }    

    .mkalat .writer div:nth-child(2) p{
        margin: 5px auto;
    }
    .mkalat .writer div:nth-child(2) p:nth-child(1){
        font-family: Cairo;
        margin-bottom: 10px;
    }
    .mkalat .writer div:nth-child(2) p:hover{
        color: red;
    }
    .mkalat .writer div:nth-child(2) p:nth-child(3) , .mkalat .writer div:nth-child(2) p:nth-child(2){
        font-size: 12px;
    }
    .drasatIndexPost{
        border: 1px solid #dadada;
    } 

    #readingPage #twoDiv{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows:repeat(1,1fr);
        grid-column-gap: 20px;
        align-items: stretch;
        align-content: stretch;
        margin: 20px auto;
        margin-top: 40px;
    }
    #readingPage #twoDiv div div{
        overflow: hidden;
    }
    #readingPage #twoDiv div div img{
        width: 100%;        
        position: relative;
        transition: all 0.4s ease;
        transform: scale(1.2);
        cursor: pointer;
    }    
    #readingPage #twoDiv div div:hover img{
       transform: scale(1.2) translateX(-4%);
    }
    #readingPage #twoDiv div .title{
        font-family: wafiBold;
        margin: 10px auto;
        font-size: 20px;
    }
    #readingPage #twoDiv div .title:hover{
        cursor: pointer;
        color: #6a9781;
    }
    #readingPage #twoDiv div .writer{
        background-color: #6a9781;
        color: #fff;
        font-family: wafiMedium;
        font-size: 16px;
        padding: 2px 5px;
        max-width: auto;
        display: inline-block;
        vertical-align: middle;        
    }

    #readingPage #twoDiv div .date{
        color: #999;
        font-family: wafi3;
    }
    #readingPage #twoDiv div .date img{
        width: auto;
    }
    #readingPage #twoDiv div .writer img{
       position: relative;
       top: -2px;
       width: auto;
    }
    #readingPage #fourDiv{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows:repeat(1,1fr);
        grid-column-gap: 10px;
        align-items: center;
        align-content: stretch;
        margin: 20px auto;
    }
    #readingPage #fourDiv .img-responsive{
        width: 100%;
    }
    #readingPage #fourDiv .date{
        color: #999;
        font-family: wafi3;
        margin: 5px auto;
    }
    #readingPage #fourDiv .title{
        font-family: wafi2;
        transition: all 0.2s ease;
        text-align:right;
    }
    #readingPage #fourDiv div:hover .title{
        color: #6a9781;
    } 
#makalTitle{
	font-family: wafi;
	color: #787878;
	font-size: 36px;
	text-align: center;
	margin-bottom: 35px;
}
#makalLike{
	direction: ltr;
	color: #6e6e6e;
	font-family: wafi;
	font-size: 14px;
}
#makalLike img{
	max-width: 20px;
	position: relative;
	bottom: -3px;
	
}

    /* الموسوعات - section 3 */
    .wafiIcon{
        width: 90px;height: auto;position: relative;margin: 20px 0 0 0;
    }
    .encyclopedias{
        width: 100%;
        max-width: 300px;
        text-align: center;
        position: relative;
        margin: auto;
    }
    .encyclopedias div:nth-child(1) img{
        width: 100%;
        height: 100%;
        border-radius: 15px;
        border: 1px solid #a6a6a6;
        transition: all 0.3s ease;
    }
    .encyclopedias div:nth-child(1) img:hover{
        filter: grayscale(100%);
    }    
    .encyclopedias div:nth-child(2){
        font-family: wafiBold;
        font-size: 22px;
        max-width: 300px;
        position: relative;
        margin: auto 15px;
    }
    .encyclopedias div:nth-child(2) .greenLine{
        width: 100%;
        height: 2px;
        background-color: #1c9c57;
        margin-top: 10px;
        transition: all 0.3s;
    }
    .encyclopedias div:nth-child(2):hover .greenLine{
        width: 0;
    }
    #articlsType {
        margin: 20px auto;
        vertical-align: middle;
        align-items: stretch;
    }
    #articlsType p{
        font-family: cairo;
        font-size: 16px;
        display: inline-block;
    }
    #articlsType select{
        font-family: wafi2;
        font-size: 16px;
        position: relative;
        bottom: -1px;
        text-align: center;       
    }
    .makalatFourmLine{
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    .makalatFourmLine div:nth-child(1){
        display: inline-block;
        width: auto;
        border-radius: 0 15px 0 0;
        margin: 0;
        position: relative;

    }
    .makalatFourmLine div:nth-child(1) div{
        display: inline-block;
        color: #fff;
        font-family: wafiBold;
        font-size: 16px;
        background-color: #5a5a5a;
        margin: 0;
        padding: 3px 15px;
        padding-right: 25px;
        position: relative;
        bottom: -2px;
    }
    .makalatFourmLine div:nth-child(1) img{
        display: inline-block;
        transform: rotate(180deg);
        height: 40px;
        width: auto;
        margin: auto;
        position: absolute;
        left: -35px;
        top: 2px;
		user-select: none;
    }
    .makalatFourmLine div:nth-child(2){
        width: 100%;
        height: 7px;
        background-color: #5a5a5a;
        display: block;
    }    
    .mkalat{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-row-gap: 5px;
        grid-column-gap: 5px;
        margin-top: 20px;
		padding: 0;
    }
    .mkalat .mkalatContainer{
        border-radius: 0;
        border: 1px solid #f6f6f6;
        -webkit-box-shadow: 0 0 2px 1px #f6f6f6;
        box-shadow: 0 0 2px 1px #f6f6f6;  
        vertical-align: top;
		display: grid;
		grid-template-columns: 105px 1fr;
		grid-template-rows: 1fr;
		padding: 5px;
    }
    .mkalat .mkalatContainer div{display: inline-block;}
    .mkalat .mkalatContainer div:nth-child(1){
        vertical-align: middle;
        padding: 5px;
		background-position: center;background-size: cover;
    }
    .mkalat .mkalatContainer div:nth-child(1) img{
        width: 100%;

        position: relative;
        margin: auto;
    }
    .mkalat .mkalatContainer div:nth-child(2){
        vertical-align: middle;
    }    
    .mkalat .mkalatContainer div:nth-child(2){
        vertical-align: middle;
        align-content: center;
    }
    .mkalat .mkalatContainer div:nth-child(2) p:nth-child(1){
        display: inline-block;
        font-family: wafiBold;
        font-size: 16px;
        border-bottom: 2px solid #d21515;
        padding: 5px 5px;
        padding-left: 10px;            
    }
    .mkalat .mkalatContainer div:nth-child(2) p:nth-child(2){
        font-family: wafiBold;
        color: #525252;
        font-size: 16px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #949494;
        text-align: right;
    }
    .mkalat .mkalatContainer div:nth-child(2) p:nth-child(3){
        display: flex;
        justify-content: space-between;
    }
    .mkalat .mkalatContainer div:nth-child(2) p:nth-child(3) img{
        max-width: 20px;
        height: auto;
    }
	.articalArchive{
        direction: ltr;
		vertical-align: middle;
		align-items: center;
        margin-top: 10px;
		font-size: 13px;
	}
	.articalArchive p{
        display: inline-block;
		width: 12px;
		height: 12px;
		background-color: #a4a4a4;
		align-self: center;
		margin: auto 3px;
	}
	.articalArchive span{
        position: relative;
		top: -2px;
	}
    #mkalatLeftSide{
        background-color: #f4f5f6;
        padding: 5px ;
    }
    #mkalatLeftSide .mkalatLeftSide{
        border-bottom: 5px solid #fff;
        padding-bottom: 10px;
		display: grid;
		grid-template-columns: 105px 1fr;
		grid-column-gap:5px;
    }
    #mkalatLeftSide .mkalatLeftSide div{
        display: inline-block;
        vertical-align: middle;
		align-self: center;
    }
    #mkalatLeftSide .mkalatLeftSide div:nth-child(2) p:nth-child(1){
        font-family: wafiBold;
        font-size: 16px;
    }
    #mkalatLeftSide .mkalatLeftSide div:nth-child(2) p:nth-child(2){
        font-family: wafi;
        font-size: 14px;
        text-align: right;
    }
    #mkalatLeftSide .mkalatLeftSide div:nth-child(2) p:nth-child(3){
        color: #4a4a4a;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 12px;
    }
    #mkalatLeftSide .mkalatLeftSide div:nth-child(2) p:nth-child(3) img{
        display: inline-block;
        max-width: 20px;
    }
    #mkalatLeftSide #More{
        overflow: hidden;
        width: 100%;
        direction: ltr;
        
    }
    #mkalatLeftSide #More div{
        position: relative;
        height: 25px;
        cursor: pointer;
        margin-top: 20px;        
        display: inline-block;
        padding: 2px 20px;
        border: 0;
        background-color: #3a3f41;
        color: #fff;
        overflow: hidden;
    }
    #mkalatLeftSide #More div p{
        position: absolute;
        padding: 30px;
        width: 200px;
        transform: rotate(-45deg);
        right: -150px;
        background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);
        background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
        transition: all 0.3s ease;
        z-index: 1;    
    }
    #mkalatLeftSide #More:hover div span{
        position: relative;
        z-index: 2;
    }
    #mkalatLeftSide #More:hover div p{
        right: -80px;
    } 
    
    /* documents - section 4 */
    .document{
        padding: 5px;        
    }
    .document div:nth-child(1) img{
        width: 100%;
        height: auto;
        border-radius:10px;
    }
    .document div:nth-child(2) p:nth-child(1){
        font-family: cairo;
        text-align: right;
    }
    .document div:nth-child(2) p:nth-child(2){
        text-align: right;
        font-family: tahoma;
    }
    #releases p{
        font-size: 24px;
        font-family: wafiBold;
    }
    #releases .release {
        width: 100%;
        padding: 0;
        border-left:2px solid #938877;
        padding: 5px;
        transition: all 0.3s ease;
        display: grid;
        grid-template-columns: 90px 1fr;
        grid-column-gap: 10px;
        grid-auto-flow: column;
        justify-content: center;
        align-content: center;
    }
    #releases .release:hover{
        background-color: #ddd;
    }
    #releases .release div{ 
        display: inline-block;
        align-self:flex-end
     }    
    #releases .release div:nth-child(1) {
        position: relative;
        padding: 0;
        height: auto;
        overflow: hidden;
    }
    #releases .release div:nth-child(1) img{
        width: 100%;
        max-width: 90px;
        height: auto;
        border-radius: 5px;
    }


    #releases .release div:nth-child(2) {
        padding: 2px 5px;
    }
    #releases .release div:nth-child(2) .title{
        width: 100%;
        font-family: cairo;
        font-size: 14px;
    }
    #releases .release div:nth-child(2) div{
        width: 100%;
    }
    #releases .release div:nth-child(2).writer p
    {
        display: inline-block;
        width:5px;
        height:5px;
        background-color:#6a9781;
        position: relative;
        margin-left: 3px;
        bottom: -10px;
    }
    #releases .release div:nth-child(2).writer span{
        font-family: wafi;
        font-size: 12px;
    }
    #moreWriterPosts{
		font-family:wafi4;
		font-weight:solid;
    }
    #moreWriterPosts h5{
	    font-family: wafi4;
		font-size: 18px;
		color: #f00;
    }
	#moreWriterPosts div{
		line-height: 20px;
		position: relative;
	}
    #moreWriterPosts div p{
		position: relative;
		display:inline-block;
    }
    #moreWriterPosts div p:nth-child(1){
		 width: 6px;
		 height: 6px;
		 background-color: #fff;
		 border: 2px solid #3d3d3d;
		 margin-left: 5px;
		 position: absolute;
		 top: 10px;
    }
	#moreWriterPosts div p:nth-child(2){
		padding-right: 12px;
		font-size: 20px;
		font-family: wafi4solid;
	}
		 #writerImg{
			 width:100%;
			 background-color:#e9e9e9;
			 text-align:center;
			 padding:16% 10%;
			 max-width: 400px;
			 max-height: 400px;
			 position: relative;
			 margin: auto;
			 vertical-align: middle;
		 }
#writerImg img{
	max-width: 100%;
}
#writerImg p{
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
}
		 #makalLike,#makalLike-button{
			 direction: ltr;
			 font-size: 18px;
		 }
		 #makalLike div,#makalLike-button div{display: inline-block;}	
		 #makalLike div:nth-child(1),#makalLike-button div:nth-child(1){color:#fff;background-color:#3d8162;min-width: 115px;text-align: center;padding: 5px;}	
		 #topRateContainer{
			 margin-top: 35px;
			 margin-bottom: 20px;
		 }
		 #topRateContainer h5{
		    font-family: wafi4;
			font-size: 18px;
			color: #f00;
		 }
		 #topRateContainer #topRate{
			 display: grid;
			 grid-template-columns: 1.5fr 1fr ;
			 grid-template-rows: 1fr ;
		 }
		 #topRateContainer #topRate div:nth-child(2){
			 text-align: center;
			 align-self:center;
		 }
		 #topRateContainer #show-r-i p {
			 display: inline-block;
			 background-color: #3d8162;
			 color: #fff;
			 padding: 3px 10px;
		 }
		 .topRateContent{
             display: flex;
			 justify-content: space-between;
			 line-height: 20px;
		 }
		 .topRateContent div:nth-child(1){
			 position: relative;
		 }
		 .topRateContent div:nth-child(1) p{
			 display: inline-block;
			 font-family: wafi4solid;
			 font-size: 20px;
		 }
		 .topRateContent div p:nth-child(1){
			 width: 6px;
			 height: 6px;
			 background-color: #fff;
			 border: 1px solid #3d3d3d;
			 margin-left: 5px;
			 position: absolute;
			 top:10px;
		 }
		 .topRateContent div p:nth-child(2){
			 padding-right: 12px;
			 text-align: right;
		 }
		 .topRateContent div:nth-child(2){
			 padding: 5px;
			 min-width: 70px;
			 color: #17725f;
			 border-bottom: 2px dashed #c2c2c2;
			 font-family: wafi;
			 font-weight: 100;
			 font-size: 16px;
		 }
    #releases .release div:nth-child(2) img{
        margin-left: 3px;
    }    
    #releases .release div:nth-child(2) .date{
        font-family: tahoma;
    }
    #releases .release div:nth-child(2) .more{
        direction: ltr;
        vertical-align: middle;
        font-size: 12px;
        font-family: wafiBold;
    }
    #releases .release div:nth-child(2) .more .square{
        width: 10px;height: 10px;
        background-color: #6a9781;
        margin-left: 3px;
        display: inline-block;
        position: relative;
        bottom: -10px;
    }
	#latestReleases{
        text-align: center;
	}
    #latestReleases #fTitle{
        font-size: 24px;
        font-family: wafiBold;
        text-align: center;
    }
    #latestReleases #title{
        font-family: cairo;
        font-size: 16px;
        text-align: center;
        
        
    }
    #latestReleases img{
        width: 100%;
		max-width: 150px;
		position: relative;
		margin: auto;
        border-radius: 10px;
    }
    #latestReleases #title{
        vertical-align: middle;
    }
    #latestReleases .title p:nth-child(1){
        width: 5px;height: 5px;
        background-color: #6a9781;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        bottom: -6px;
    }
    #latestReleases .title p:nth-child(2){
        display: inline-block;
        position: relative;
        bottom: -2px;
        font-family: wafi;
        font-size: 14px;
    }
    #latestReleases .title p:nth-child(3){
        font-family: tahoma;
        margin: 0;
        font-size: 12px;
    }    
    #latestReleases .title p:nth-child(3) img{
        display: inline-block;
        width: auto;
        border-radius: 0;
    }
    #latestReleases .title p:nth-child(4){
        margin-top:10%;
        font-family: wafi;
        text-align: justify;
        font-size: 16px;
    }
    #section4LeftSide #zakeraLeftSide{
       padding: 10px 5px;
       background-color: #f4f5f6; 
    }
    #section4LeftSide h3 , #section4RightSide h3{
        font-family: wafiBold;
        text-align: center;
        margin-bottom: 25px;
		font-size: 30px;
    }
    #section4LeftSide .title{
        font-family: wafi;
		font-size: 18px;
        color: #fff;
        background-color: #464e51;
        max-width: 150px;
        padding: 5px 5px;
        border-right: 3px solid #c7cdd4;
        border-radius: 20px 0 0 20px;
        text-align: right;
        position: relative;
        right: -8px;
    }
    #section4LeftSide .iraqMemory{
        margin-top: 10px;
        border-bottom: 1px dashed #abacac;
		padding-bottom: 5px;
    }
    #section4LeftSide .iraqMemory div{
        display: inline-block;
        vertical-align: middle;
    }
    #section4LeftSide .iraqMemory div:nth-child(1){
        width: 40%;        
    }
     #section4LeftSide .iraqMemory div:nth-child(2){
        width: 55%; 
        font-family: wafi;
         vertical-align: top;
         font-size: 12px;
    } 
    #section4LeftSide .iraqMemory div:nth-child(2) p:nth-child(2){
        font-family: tahoma;
    }
    #section4LeftSide #more{
        direction: ltr;
        width: 100%;
		margin-top: 10px;
    }
    #section4LeftSide #more p{
        display: inline-block;
        vertical-align: middle;        
    }
    #section4LeftSide #more p:nth-child(1){
        font-family: cairo;
        font-size: 12px;
    }
    #section4LeftSide #more p:nth-child(2){
        width: 8px;
        height: 8px;
        background-color: #6a9781;
    }   
    
    
    /* video documents - section 4 */

    .videoDocument{
        margin: 5px auto;
        border: 1px solid #ebebeb;
        border-radius: 10px;
        padding: 10px;
		background-color:#f5f6f7; 
    }
    .videoDocument .bigPic {
        position: relative;
        width: 100%;
    }
	.videoDocument .bigPicTitle{
		margin: 10px auto;
	}
    .videoDocument .bigPic img{
        width: 100%;
        height: auto;
    }
    .videoDocument .bigPic p{
        width: 60px;height: 60px;
        border-radius: 50%;
        background-color:rgba(197,216,237,0.8);
        position: absolute;
        top: 50%;left: 50%;
        transform: translate(-50%,-50%);
    }
	.videoDocument .bigPic p img{
		position: absolute;
        width: 40px;
		top: 10px;
		right: 5px;
	}
    .videoDocument .bigPic p:hover{
        background-color:rgba(51,51,51,0.6);
        position: absolute;   
        font-weight: 600;
        margin-top: 5px;  
        text-align: justify;
        font-size: 16px;
    }
    .videoDocument h3{
        font-size: 20px;
        text-align: center;
        font-family: wafi;
		margin-bottom: 15px;
    }
    .videoDocument .smallPic{
        margin: 10px auto;
        display: grid;
        grid-template-columns: 125px 1fr;
        grid-column-gap: 10px;
    }
    .videoDocument .smallPic div{
        display: inline-block;
    }
    .videoDocument .smallPic div:nth-child(1){
        vertical-align: middle;
    }
    .videoDocument .smallPic div:nth-child(1) img{
        width: 100%;
        border-radius: 10px;
    }
    .videoDocument .smallPic div:nth-child(2){
        vertical-align: top;
    }
    .videoDocument .smallPic div:nth-child(2) p:nth-child(1){
        font-family: tahoma;
        font-size: 12px;
        position: relative;
    }
    .videoDocument .smallPic div:nth-child(2) p:nth-child(1) img{
        position: relative;
        top: -2px;
    }
    .videoDocument .smallPic div:nth-child(2) p:nth-child(2){
        font-family: wafi3;
        color: #444444;
        font-weight: bold;
        font-size: 14px;
    }
    

/*FOOTER*/
#footer-container{
    background-color:#455c51;
    border-top: 15px solid #3c3c3c;
}

#footer{
    display: grid;
    grid-template-columns: 310px 1fr;
    grid-column-gap: 10px;
}

#footer div{
    display: inline-block;
    padding: 10px;
}
#footer div:nth-child(1){
    text-align: center;
}
#footer div:nth-child(1) img[src="img/w_img/logo.svg"]{
    max-width: 60px;
    position: relative;
    margin:5px auto;
    display: block;
}
#footer div:nth-child(1) img[src="img/w_img/wafiFooterName.svg"]{
    width: 100%;
    position: relative;
    margin: 10px auto;
    display: block;
}
#footer img[src="img/w_img/youtubeF.svg"],#footer img[src="img/w_img/instgramF.svg"],#footer img[src="img/w_img/twiterF.svg"],#footer img[src="img/w_img/facebookF.svg"],#footer img[src="img/w_img/telegramF.svg"]{
    display: inline-block;
    max-width: 35px;
    margin: 2px;
}
#footer img[src="img/w_img/facebookF.svg"]{
	width: 14px;
}
#footer div:nth-child(2){
    text-align: center;
    align-self: center;
}

#footer div:nth-child(2) #line1{
    color: #fff;
    width: 100%;
    padding: 5px 5px;
    border: 1px solid #586f64;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(7,auto);
}
#footer div:nth-child(2) .square{
    width:7px;
    height:7px;
    border:1px solid #fff;
    border-radius: 2px;
    vertical-align: middle;
    position: relative;  
    bottom: -10px;
    display: inline-block;
    margin-left: 5px;
}
#footer div:nth-child(2) #line1 div{
    display: inline-block;
    padding:3px 3px;
    font-family: wafi;
    font-size: 16.5px;
    border-radius: 3px;
    position: relative;
    transition: all 0.3s ease;
    align-self: center;
}
#footer div:nth-child(2) #line2 div{
   transition: all 0.3s ease; 
}
    #footer #line2{
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: 16.5px;        
    }
#footer div:nth-child(2) #line1 div:hover , #footer div:nth-child(2) #line2 div:hover{
    color: #e2b11a;
}
#footer div:nth-child(2) #line1:hover .square , #footer div:nth-child(2) #line2:hover .square{
    border:1px solid #e2b11a;
}



/*READING PAGE*/




#readingFourmName{
    display:inline-block;
    position:absolute;
    right:1%;
    top: -3px;
    vertical-align: middle;
}
#readingFourmName img{
    width: 20px;
    height: auto;
    position: relative;
    top: -5px;
}
#readingFourmName a{
   font-size: 24px;
   font-family: wafiBold;
    vertical-align: bottom;
    user-select: none;
}

#readingPage #date{
    margin-top: 20px;
    color: #999;
    font-family: CairoExtra;
    font-weight:bold;
}
#readingPage #rightSide{
    margin-top: 20px;
    
}

#readingPage h3{
    font-size: 20px;
    font-family: wafiBold;
}
#readingPage #control{
    position: relative;
}
#readingPage #postImage{
    width: 100%;
}
#readingPage #postImage img{
    width: 100%;
}
#readingPage #content{
    margin-top: 10px;
    text-align: justify;
    font-family: wafi;
    font-size: 16px;
    line-height: 2;
	color: #292929;
}
#postRelated{
    background-color: #f2f5f7;
    padding: 3px 5px;
    border-top: 2px solid #ebebeb;
    border-bottom: 2px solid #ebebeb;
    margin: 10px auto;
}
#postRelated div{
    display: inline-block;
}
#postRelated div:nth-child(1){/*title*/
    display:block;vertical-align:bottom;
}
#postRelated div:nth-child(1) p:nth-child(1){/*title*/
    display:inline-block;font-size:20px;
}
#postRelated div:nth-child(1) p:nth-child(2){/*title*/
    display:inline-block;
    width:100px;
    height:3px;
    background-color:#000;
    vertical-align:bottom;
    margin-bottom:15px;
}
#readingPage #postRelated #rs{
    width: 30%;
    vertical-align: top;
}
#readingPage #postRelated #rs img{
    width: 100%;
}
#readingPage #postRelated #ls{
    width: 68%;
    vertical-align: top;
    position: relative;
    margin: auto;
}
#readingPage #postRelated #ls #title{
    font-size: 16px;
    font-family: wafiBold;
}
#readingPage #postRelated #ls #title{
    font-family: wafiBold;
}
#readingPage #postRelated #ls #date{
    font-family: tahoma;
    font-size: 14px
}
#readingPage .part{
    display: block;
    width: 100%;
    margin-top: 10px;
    color: #525252;
    font-weight: bold;
	font-family: readingTags;
}      
#readingPage .part p:nth-child(1){/*title*/
    display:inline-block;font-size:20px;
}
#readingPage .part p:nth-child(2){/*line*/
    display:inline-block;
    width:100px;
    height:2px;
    background-color:#000;
    vertical-align:bottom;
    margin-bottom:18px;
}    
        
#readingPage #postTags p{
    display: inline-block;
    margin: 5px;
    color: #fff;
    background-color: #2b7b6c;
    padding: 3px 5px;
    font-family: readingTags;
    font-size: 18px;
    border-radius: 5px;
    user-select: none;
} 
#readingPage #intrestedPosts{
    width:100%;padding:5px;border:2px solid #ebebeb;
    margin: 10px auto;
}
#readingPage #intrestedPosts .post{
    color:#e18787;
    font-size: 22px;
    font-family: wafiBold;
}
#readingPage #intrestedPosts .post p{
    display: inline-block;
    vertical-align: middle;
}
#readingPage #intrestedPosts .post p:nth-child(1){
    width: 10px;
    height: 10px;
    background-color: #de3f48;
    border-radius: 50%;
}
#readingPage #intrestedPosts .post p:nth-child(2){
	padding-right: 10px;
}
#readingPage #leftSide h3{
    background-color:#ff0000;
    color:#fff;
    padding:10px 10px;
    font-family:cairo;
    font-size:16px;
    max-width:200px;
    position: relative;
    right: -5px;
}
#readingPage #leftSide .newsContainer{
    position: relative;
    margin-bottom: 40px;
    background-color:#fafafb;
    padding:0 5px 15px 5px;
}

#readingPage #leftSide .newsContainer .more{
    padding: 2px 20px;
    border: 0;
    background-color: #3a3f41;
    color: #fff;
    display: inline-block;
    position: absolute;
    bottom:-10px;
    left: 30px;
    overflow: hidden;
    width: 80px;
    height: 25px;
    cursor: pointer;
}
#readingPage #leftSide .newsContainer .more span{
    position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);
    z-index: 2;
}
#readingPage #leftSide .newsContainer .more p{
    position: absolute;
    padding: 30px;
    width: 200px;
    transform: rotate(-45deg);
    right: -150px;
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
    transition: all 0.3s ease;
    z-index: 1;
}
#readingPage #leftSide .newsContainer .more:hover p{
    right: -90px;
}
#readingPage #leftSide .news{
    padding-bottom: 30px auto;
    margin-top:10px;
	display: grid;
	grid-template-columns: 155px 1fr;
	grid-template-rows: 1fr;
	grid-column-gap: 5px;
	vertical-align: baseline;
}
#leftSide .news div{
    display: inline-block;
    vertical-align: middle;        
}

#readingPage #leftSide .news div:nth-child(1) img{
    width: 100%;
    height: auto;
    border-radius: 5px;
}
#readingPage #leftSide .news div:nth-child(2){
	display: flex;
	align-self: center;
}

    .loading{
        position: fixed;
        background: rgba(51,51,51,0.7);
        z-index: 5;
        padding: 20px;
        top: 0;
        bottom:0;
        left: 0;
        right: 0;
        display: none;
    } 
	.loading div{
        position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
	}
	.loading div p{
	    color: #ddd;	
    }
#loadingImg{
	text-align: center;
	margin: 5px;
	display: none;
}
#loadingImg img{
	width:60px;
}
.rotating {
    -webkit-animation: rotating 3s linear infinite; 
    max-width: 70px;height: auto;
	margin-bottom: 15px;
}

@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotateY(0deg);
    }
    to{
        -webkit-transform: rotateY(360deg);
    }
}





/* refrence المرجعية والحضارة */

#refrence{
    width: 100%;
    font-family: wafiBold;
    margin-top: 40px;
}
#refrence div:first-child ,#refrence div{
    display: inline-block;
    margin: 10px;
    padding: 10px; 
    color: #fff;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
}
#refrence div:nth-child(odd){
	background-color: #1d836c;
}
#refrence div:nth-child(odd):hover{
	background-color: #176553;
}
#refrence div:nth-child(even){
	background-color: #414141;
}
#refrence div:nth-child(even):hover{
	background-color: #333;
}

#refrence div:nth-child(1) span , #refrence div:nth-child(2) span{
    position: relative;
    top: -4px;
}

/* الاصدارات pdf   */

    #date{
        font-family: CairoExtra;
        color: #919191;
        font-weight: bold;
        user-select: none;
    }
    
    #myPdfFile{
        width: 100%;
        min-width: 100px;
        max-width: 700px;
        margin: 20px 5%;;
        padding: 10px;
        display: grid;
        grid-template-columns: 2fr 1.5fr; 
    }
    #myPdfFile div:nth-child(1){
       position: relative;
    }
    #myPdfFile div:nth-child(1) p{
        font-family: wafiBold;
        color: #393939;
        font-size: 22px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #myPdfFile div:nth-child(1) p span{
        font-family: wafi;
        color: #393939;
        font-size: 16px;
        display: block;
        text-align: justify;
        margin-top: 10px;
    }
    #myPdfFile div:nth-child(2){
        position: relative;
    }
    #myPdfFile div:nth-child(2) .img-responsive{
        width: 100%;
        border-radius: 10px;
        user-select: none;
    }
    #myPdfFile div:nth-child(2) img[src="img/w_img/redPdf.png"]{
        position: absolute;
        bottom: 5px;
        left: 5px;
        width: 40px;
		cursor: pointer;
    }

    .pdfArchive{
        width: 100%;
        max-width: 100%;
        margin: 60px auto;
        padding: 10px 5px;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(1,1fr);
        gap: 0;
        border: 1px solid #dadada;
        border-radius: 3px;
    } 
    .pdfArchive .pdf{
        padding: 5px;
        transition: all 0.3s ease;
        border-radius:5px;        
    }
    .pdfArchive .pdf:hover{
        background-color: #333;
    }
    .pdfArchive .pdf div{
        padding: 10px;
        text-align: center;
    }
    .pdfArchive .pdf .img-responsive{
        width: 100%;
        border-radius: 10px;
    }    
    .pdfArchive .pdf div:nth-child(1){
        position: relative;
    } 
    .pdfArchive .pdf:hover{
        background-color:#ddd;
    }    
    .pdfArchive .pdf div:nth-child(1) img[src="img/w_img/redPdf.png"]{
        width: 30px;
        position: absolute;
        bottom: 15px;
        left: 15px;
		cursor: pointer;
    }
    .pdfArchive .pdf div:nth-child(2){
        font-family: cairo;
        font-size: 14px;
        margin: 5px auto;
    }
    .pdfArchive .pdf div:nth-child(3) img , .pdfArchive .pdf div:nth-child(3) p{
        display: inline-block;
        font-family: tahoma;
        font-size: 12px;
        color: #858585;
    }
    .pdfArchive .pdf:hover{
        background-color:#ddd;
    }
    .pdfArchive .pdf:hover div:nth-child(2){
        color: #6a9781;
    }

/* DOCS  وثائقيات */

    .videoDocs{
        margin-bottom: 5px;
    }
    .videoDocs div{
        display: inline-block;
        vertical-align: middle;
    }
    .videoDocs div:nth-child(1){
        width: 60%;
        padding: 5px;
    }
    .videoDocs div:nth-child(1) img{
        width: 100%;
        height: auto;
    }    
    .videoDocs div:nth-child(2){
        width: 38%;
        vertical-align: middle;
        font-family: wafiBold;
        font-weight: bold;
        font-size: 18px;
    }    
    .videoDocs div:nth-child(2) p:nth-child(2){
        color: #fff;
        background-color:#6a9781;
		padding: 5px 10px;
		width:auto;
		display:inline-block;
		
    }
    .videoDocs div:nth-child(2) p:nth-child(2) img , .videoDocs div:nth-child(2) p:nth-child(2) span{
        position: relative;
        top: -3px;
        font-size: 16px;
    }
	.videoDocs .date{
        color: #999999;
		font-weight: 100;
		font-family: wafi3;
		font-size: 14px;
	}


/* iraq Memory */

    .videoMemory{
        width: 100%;
        background-color: #f6f6f6;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-column-gap: 10px;
        margin: 20px auto;
        padding: 2%;
        border-radius: 10px;
    }
    .videoMemory .video img{
        width: 100%;
    }
    .videoMemory .video .date{
        color: #999999;
        margin: 5px auto;
        font-family: wafi3;
    }
    .videoMemory .video img[src="img/w_img/clock.png"]{
        width: auto;  
        margin-left: 5px;
        position: relative;
        top: -2px;
    }
    .videoMemory .video .title{
        font-size: 14px;
        font-family: wafi;
        color: #000;
        font-weight: bold;
    }

    .videoMemory .video:hover .title
    {
        color: #6a9781;
    }

    #iraqMemoryT1{
        font-family: wafiBold;
        font-size: 25px;
        margin: 20px 2%;;
    }
    .mainVideo{
        display: grid;
        grid-template-columns: 543px 1.5fr;
        margin: 20px auto;
          grid-auto-flow: column;
          grid-column-gap: 5px;
          align-items: center;
          justify-items: center;
    }
    .mainVideo div:nth-child(1){
        position: relative;
    }
    .mainVideo div:nth-child(1) img{
		width: 100%;
	}
    .mainVideo div:nth-child(1) p{
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index: 2;
        width: 60px;
        height: 60px;
        background-color: rgba(197,216,237,0.8);
        border-radius: 50%;
    } 
    .mainVideo div:nth-child(1) p:hover{
        background-color: rgba(197,216,237,0.7);
    }
    .mainVideo div:nth-child(1) p img{
        width: 60%;
        position: absolute;
        top: 50%;
        left: 30%;
        transform: translateY(-50%);
    }
    .mainVideo div:nth-child(2){
        vertical-align: middle;
        width: 100%;
        font-family:wafiBold;
        font-size: 16px;
        padding: 10px;
    }
    .mainVideo div:nth-child(2) p:nth-child(2){
        background-color: #6a9781;
        color: #fff;
        padding: 3px 10px;
        display: inline-block;
        vertical-align: center;
    }
    .mainVideo div:nth-child(2) p:nth-child(2) span , .mainVideo div:nth-child(2) p:nth-child(2) img{
        position: relative;
        top: -3px;
    }
    .mainVideo div:nth-child(2) p:nth-child(3){
        font-family: wafi3;
        color: #999999;
    }
    .mainVideo div:nth-child(2) p:nth-child(3) img[src="img/w_img/calender.png"]{
        position: relative;
        top: -1px;
    }
    .mainVideo:hover div:nth-child(2) p:nth-child(1){
        color: #6a9781;
    }
    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* box-sizing: border-box; */
    }
    #picMemoryTitle{
        color: #fff;
        font-size:24 pt;
        font-family: wafiBold;
        margin: 30px auto;
		margin-right: 20px;
    }

    #picMemory{
        min-height: 490px;
        width: 100%;
		max-width: 1117px;
		min-width: 1117px;
        display: grid;
        grid-template-columns: 0.9fr 1.1fr 0.9fr 1.1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 10px;
		position: relative;
		margin: auto;
    }
    .towDivContainer{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 1fr;
        grid-row-gap: 10px;
    }
    .towDivContainer div{
       background-size: cover;
       background-position: center;
        position: relative;
        overflow: hidden;

    }
    .towDivContainer div p , .threeDivContainer div p{
        font-family: wafi;
        position: absolute;
        z-index: 2;
        right: 0px;
        left: 0px;
        height: auto;
        bottom: -10px;
        color: #fff;
        padding: 10px 5px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+6,000000+100,000000+100&0+-1,0+0,0.65+46 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) -1%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.65) 46%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) -1%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.08) 6%,rgba(0,0,0,0.65) 46%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) -1%,rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.08) 6%,rgba(0,0,0,0.65) 46%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

        transition: all 0.3s ease;
    }
    .towDivContainer div{
        background-size: cover;
        background-position: center;
    }    
    .towDivContainer div:nth-child(2){
        max-height: 155px;
        overflow: hidden;
    }
    .towDivContainer div img{
        width: 100%;
    }
    .threeDivContainer{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3,1fr);
        grid-row-gap: 10px;
    }
    .threeDivContainer div{
        background-size: cover;
        background-position: center;
        max-height: 150px;
        overflow: hidden;
        position: relative;
    }
    .threeDivContainer div img{
        width: 100%;
        
    }
    .picMemoryContainer{
        padding:0;
        overflow-x: scroll;
        padding-bottom: 10px;
    }
    
/* width */
.picMemoryContainer::-webkit-scrollbar {
  width: 20px;
    height: 5px;
}

/* Track */
.picMemoryContainer::-webkit-scrollbar-track {

  border-radius: 10px;
}
 
/* Handle */
.picMemoryContainer::-webkit-scrollbar-thumb {
  background: #2a2929; 
  border-radius: 2px;
}

/* Handle on hover */
.picMemoryContainer::-webkit-scrollbar-thumb:hover {
  background: #2a2929; 
}    
   

/*reading makal S*/
		#rLine{
			display: grid;
			grid-template-columns: 1fr 60px;
			color: #fff;
			width: 100%;
			max-width: 250px;
			margin-top: 60px;
			font-family: cairo;
		}
		#rLine div:nth-child(1){
			background-color: #ff0000;
			text-align: center;
			font-size: 16px;
			padding: 5px 10px;
		}
		#rLine div:nth-child(2){
			background-color: #e2e5e9;
			border-radius: 0 0 0 10px;
		}
		#newArtical h5{
			color: #da0000;
			font-family: wafiBold;
			font-size: 18px;
			margin: 20px 0px;
		}
		#newArtical .newArtical-container{
			display: grid;
			grid-template-columns: 105px 1fr;
			grid-template-rows: 1fr;
			vertical-align: middle;
			grid-column-gap: 10px;
			margin: 10px 0;
			border: 1px solid #f6f6f6;
		}
		#newArtical .newArtical-container div:nth-child(1){
			align-self: center;
		}
		#newArtical .newArtical-container div:nth-child(1) img{
			width: 100%;
			height: auto;
		}
		#newArtical .newArtical-container div:nth-child(2){
			align-self: center;
			padding:0px 5px;
		}
		#newArtical .newArtical-container div:nth-child(2) div:nth-child(1){
			font-family: cairo;
			border-bottom: 2px solid red;
			display: inline-block;
			padding-bottom: 5px;
		}
		#newArtical .newArtical-container div:nth-child(2) div:nth-child(2){
			display:block;
			font-family: wafiBold;
			font-size: 17px;
			border-bottom: 2px dashed #949494;
			margin: 5px 0;
			padding-bottom: 5px;
		}
		#newArtical .newArtical-container div:nth-child(2) div:nth-child(3){
			display:flex;
			justify-content: space-between;
		}
		#newArtical .newArtical-container div:nth-child(2) div:nth-child(3) p{
			display: inline-block;
		}
		#newArtical .newArtical-container div:nth-child(2) div:nth-child(3) p img{
			display: inline-block;
			max-width: 20px;
			height: auto;
		}

/*writer page*/
#writerImg{
	width: 438px;
	height: 421px;
}	
	#writerImg img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#writerName{
	margin-top: 10%;
 	font-size:30px;
    font-family: wafiBold;
    color: #787878;
    font-size: 36px;
    text-align: center;
    margin-bottom: 35px;	
}
#writerRate p:nth-child(1){
	background-color: #96c1ad;
	color: #fff;
	font-family: wafiBold;
	}

.writerPage{
    max-width: 1240px;
	position: relative;
	margin: auto;	
    display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	align-items: center;
}
.writerPage div{
	text-align: center;
}	
.writerPage #writerRate p:nth-child(1){
	display: inline-block;
	text-align: center;
	font-family: Cairo;
	font-size: 25px;
	padding: 15px 55px;
}
.writerPage #writerRate p:nth-child(2){
	font-family: CairoExtra;
	font-size: 14px;
	color: #747474;
}
#writerPost{
	max-width: 1240px;
	position: relative;
	margin: auto;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	grid-template-rows: 1fr;
	margin-top: 0100px;
	grid-column-gap: 40px;
}
#writerPost #writerPostGrid{
	display: grid;
	grid-template-columns: 1fr 100px 100px;
	grid-template-rows: auto;	
}
	#writerPost .rtitle{
		color: #da0000;
		font-family: wafiBold;
		font-size: 18px;
		margin-bottom: 10px;
	}
	.rPostTitle{
		position: relative;
	}
	.rPostTitle p:nth-child(1){
		width: 4px;
		height: 4px;
		background-color: #fff;
		border: 1px solid #3d3d3d;
		margin-left: 5px;
		position: absolute;
		top: 10px;
	}
	.rPostTitle p:nth-child(2){
		padding-right: 12px;
		font-family: wafi;
		font-size: 16px;
		color: #757575;
	}
	.rPostDate p{
		text-align: center;
		font-family: wafiBold;
		color: #747474;
	}
	#topArticles h3{
		font-family: wafiBold;
		font-size: 18px;
		margin: 0;
		color: #da0000;
		margin-bottom: 10px;

	}
	#topArticles-grid{
		display: grid;
		grid-template-columns: 1fr 80px ;
		color: #757575;
	}
	#topArticles-grid .seen{
		color: #17725f;
		
	}

/*SEARCH*/
    .search{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    .search div{
        transition: all 0.3s ease;
        padding:5px;
    }
    .search div:hover{
        transform: scale(0.95) rotate3d(-20%);
        background-color: #ddd;
    }
    .search .title{
        font-family: cairo;
        margin-top: 15px;
        margin-bottom: 0;
    }
    .search .section{
        color: #d31616;
        font-family: tahoma;
        font-weight: bold;
    }
    .search .date{
        color: #999999;
        font-family: wafi3;
        direction: ltr;
        text-align: right;
    }
    .search .img-responsive{
       filter: grayscale(0%);
        transition: all 0.2s ease;
        position: relative;
        margin: auto;
    }
    .search .img-responsive:hover{
       filter: grayscale(60%);
    }   

	#advancedSearchContainer h3{
		font-family:wafiBold;
		font-size: 40px;
		margin-bottom:60px;
	}
	#advancedSearchContainer h4{
		margin-bottom: 20px;
	}
	#advancedSearchContainer #searchTarget{		
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 100;
		color: #b2b2b2;
		font-family: wafi;
	}
	#advancedSearchContainer #searchTarget p{
		display: inline-block;
		position: relative;
	}
	#advancedSearchContainer #searchTarget p img[src="img/w_img/dowSelect.png"]{
		border-radius: 50%;
		position: absolute;
		left: 5px;
		top: 50%;
		transform: translateY(-50%);
	}
	#advancedSearchContainer #searchTarget select{
		outline: none;
		user-select: none;
	}
	#advancedSearchContainer #searchTarget select option{
		text-align: center;
	}
	#advancedSearchContainer #searchTarget input[type="text"],#advancedSearchContainer #searchTarget input[type="date"]{
		width:170px;
		padding: 6px 5px;
		font-size: 17px;
		border-radius: 30px;
		border: 0;
		margin: 5px;
		text-align: center;
		user-select: none;
		outline: none;
	}
	#advancedSearchContainer #searchTarget input[type="submit"]{
		background-color: #ff3657;
		color: #fff;
		padding: 10px 60px;
		margin-left: 21%;
		font-size: 18px;
		border: 0;
		border-radius: 25px;
	}
.dateFrom,.dateTo{
    display: none;
}