@charset "utf-8";
/* CSS Document */


@font-face {
  font-family: 'asmaa';
  src: url('asmaa.eot') format('eot'); 
  src: url('asmaa.woff') format('woff'); 
}


body {     background: #e1decf;
	 margin:0 auto !important;
	 overflow-x: hidden !important;
	 direction:rtl;
	 font-family: 'El Messiri', 'asmaa', sans-serif;
	 animation-duration: 0.5s; 
    animation-fill-mode: both; 
    animation-timing-function: ease-in;
	animation-name: fadeIn;}
	@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
}

::selection {
	background:#fff; /* Safari */
	}
::-moz-selection {
	background: #fff; /* Firefox */
}
	
.selection {color:#fff;}

::-webkit-scrollbar  {
    width: 8px;
    background: rgb(241, 237, 219);
    }
::-webkit-scrollbar-button {
	background: rgb(220, 215, 193);
	height: 8px;
	}
::-webkit-scrollbar-thumb {background: rgb(194, 185, 165);}

a:hover {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

/********ALL TITLES STYLES*********/
.titles {
	font-family: 'asmaa';
	width: max-content;
	display: table;
	margin: -56px auto 0 auto;
	padding: 0 27px;
	text-align: center;
	border-radius: 10px;
	background: url(images/ornament-I.png) no-repeat center right, url(images/ornament-II.png) no-repeat center left;
	position: relative;
	z-index: 2;
}

.la-title h4 {
    background: #006c80;
    border-radius: 10px;
    padding: 0 20px 5px 20px;
    color: #eacc9b;
    font-weight: lighter;
    font-size: 24px;
    line-height: 40px;
    box-shadow: inset 0px 0px 19px #003443;
}

.th-title h3 {
    background: #ffe8c2;
    border-radius: 10px;
    padding: 0 20px 5px 20px;
    color: #b83535;
    font-weight: lighter;
    font-size: 28px;
    line-height: 40px;
    box-shadow: inset 0px 0px 20px #e08f38;
}

.th-title {
    margin-top: -20px;
}
/********END TITLES STYLES*********/

/********START HEADER*******/

#header {
    width: 100%;
    height: 645px;
    background: url(images/wall-de.png) top 46% left repeat-x, url(images/wall-patt.jpg) top left repeat-x;
    overflow: hidden;
    padding-bottom: 50px;
}

.header-cont {
    /*background: url(images/grandma.png) center bottom no-repeat;*/
    width: 98%;
    /*height: 630px;*/
    max-width: 1170px;
    margin: 0 auto;
    text-align: center;
    background-size: contain;
}

.logo {
    float: right;
    margin-top: 9px;
    width: 24%;
    max-width: 258px;
}

.logo img {
    width: 100%;
    height: auto;
    min-width: 200px;
}


.acc {
    margin-top: 128px;
    position: absolute;
    left: 140px;
    z-index: 0;
}


.grandma {
    position: relative;
    z-index: 1;
    background: url(images/grandma.png) center bottom no-repeat;
    width: 60%;
    float: right;
    max-width: 664px;
    max-height: 690px;
    height: -webkit-fill-available;
    background-size: contain;
    margin-right: -50px;
	min-height:600px;
}

.grandma img {
    width: 100%;
    height: auto;
    min-width: 400px;
}

/********MENU***********/


.menu-cont {
    padding: 0 22px;
    margin: 0px auto;
    width: 87%;
    max-width: 695px;
    height: 44px;
    text-align: center;
    background: url(images/ornament-I.png) right center no-repeat, url(images/ornament-II.png) left center no-repeat;
}

 .toggle, [id^=drop] {
 display: none;
}

nav {font-family: 'asmaa';
    margin: 0;
    padding: 0;
    background: #006c80;
    border-radius: 14px;
    box-shadow: inset #003443 0px 0px 24px;
}


nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    position: relative;
    z-index: 9;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    text-align: center;
    display: inline-block;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: right;
}


nav a {font-family: 'asmaa';
    display: inline;
    padding: 44px 0 0;
    color: #fff;
    margin: 0px 10px;
    line-height: 44px;
    font-size: 17px;
    text-decoration: none;
    font-weight: lighter;
    letter-spacing: 1px;
}
nav ul ul li a {
    line-height: 3.5;
}

nav ul li ul li:hover {
    background: #006c80;
}

nav ul li ul li a {display:block !important;
padding:0;}

nav ul li ul li a:hover {
    color: #f7a76e;
    border-bottom: 0;
}


nav a:hover {
    color: #f7a76e;
	background-size:28px;
}

nav ul ul {
  display: none;
  position: absolute;
}

nav ul li:hover > ul {
    display: inherit;
    background: #005263;
}
nav ul ul li {
    width: 220px;
    float: none;
    display: list-item;
    position: relative;
}
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}

/***menu icons***/

.home-i {background:url(images/home.png) no-repeat top center;}
.read-i {background:url(images/read.png) no-repeat top center;}
.listen-i {background:url(images/listen.png) no-repeat top center;}
.color-i {background:url(images/paint.png) no-repeat top center;}
.play-i {background:url(images/pl.png) no-repeat top center;}
.wh-i {background: url(images/wh.png) no-repeat top center;}
.about-i {background: url(images/about.png) no-repeat top center;}

/************END MENU***********/

/*****LATEST****/
#latest {
    width: 88%;
    max-width: 980px;
    margin: 100px auto 0 auto;
    border-radius: 50px 50px 0 0;
    border: 2px solid #007c8e;
    border-bottom: 0 !important;
    padding-bottom: 0px;
    background: #b4e4e1 url(images/clouds.png) no-repeat bottom center;
    background: -moz-linear-gradient(top, #8dd4e4 1%, #9edfeb 15%, #e1f3d2 37%, #ffffff 58%, #ffffff 78%, #e1decf 100%);
    background: url(images/clouds.png) no-repeat bottom 52% center, -webkit-linear-gradient(top, #8dd4e4 1%,#9edfeb 15%,#e1f3d2 37%,#ffffff 58%,#ffffff 78%,#e1decf 100%);
    background: url(images/clouds.png) no-repeat bottom 57% center, linear-gradient(to bottom, #8dd4e4 1%,#9edfeb 15%,#E1F3D3 37%,#ffffff 50%,#ffffff 78%,#e1decf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dd4e4', endColorstr='#e1decf',GradientType=0 );
}

.gradient-borders {
    height: 100px;
    border-left: 2px;
    border-right: 2px;
    border-top: 0px;
    border-bottom: 0px;
    border-style: outset;
    border-image: linear-gradient(to bottom, #007c8e 7%,#007c8e 8%,#e1decf 90%);
    border-image-slice: 1;
    width: 100%;
    margin-right: -2px;
    padding: 0 0 140px 0;
}

p.description {
    font-size: 15px;
    color: #ffffff;
    font-weight: lighter;
    max-width: 760px;
    margin: 0px auto 40px auto;
    width: 88%;
    font-family: 'El Messiri';
    line-height: 2;
}

.description span {
    color: #4abfbb;
    font-size: 18px;
    font-weight: bold;
}

#theater {
    width: 94%;
    max-width: 1210px;
    margin: -168px auto 0 auto;
    text-align: center;
}

.top {
    width: 100%;
    border-bottom: inset 25px #9a4143;
    box-shadow: 0px 9px 3px -4px #5400002e;
    position: relative;
    z-index: 99;
}

.top img {
    width: 94%;
    max-width: 1163px;
    height: auto;
    margin: 0 auto;
}

#curtains {
    position: absolute;
    height: 500px;
    /*background: #b85558;*/
    width: 94%;
    max-width: 1210px;
    margin: -3px 0px 0 auto;
    -webkit-clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
    clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#883839+0,d25a57+100 */
background: #883839; /* Old browsers */
background: -moz-linear-gradient(top, #883839 0%, #d25a57 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #883839 0%,#d25a57 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #883839 0%,#d25a57 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#883839', endColorstr='#d25a57',GradientType=0 ); /* IE6-9 */
}
 /*   #curtains {
      border-bottom: 100px solid red;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      width: 100px;
    }*/
	
.curtains-decorations {
    width: 106%;
    height: 72px;
    overflow: hidden;
    margin: 0 -6% 60px auto;
    position: relative;
    z-index: 9;
    white-space: nowrap;
}
	
.decoration {
    height: 50px;
    text-align: right;
    width: 140px;
    background: #c86904;
    display: inline-block;
    margin: 0 -4px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-bottom: 20px solid #f3b358;
    box-shadow: inset 0px -20px 0px #e08f38;
}

#dark-th {
    width: 94%;
    max-width: 1080px;
    margin: 0 auto;
    background: #203750;
    position: relative;
    z-index: 4;
    overflow: hidden;
    box-shadow: inset 0px 73px 75px #050f1d;
}

	
#vid-slider {
    width: 80%;
    max-width: 760px;
    background: #f7fffd1c;
    border: 1px solid #eaf6e129;
    border-radius: 3px;
    padding: 9px 0px 10px 10px;
    position: relative;
    z-index: 2;
    margin: 0 auto;
}

.btns {
    margin: 40px auto;
}

.seemore {
    text-decoration: none;
    font-size: 16px;
    text-shadow: 0px 1px 1px #652121;
    font-weight: bold;
    border-bottom: 3px solid #8c3a3c;
    border-radius: 5px;
    padding: 6px 15px;
    color: #ffffff;
    background: #d25a57;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.seemore:hover {
    color: #fde4bd;
    background: #d25a57;
    border-bottom: 3px solid #9a4143;
    text-shadow: 0px 0px 2px #4e1818;
}

.bottom-decor {
    width: 94%;
    max-width: 1080px;
    margin: -5px auto 0 auto;
    height: 58px;
    background: #9a4143 url(images/theater-bot.png) repeat-x center center;
    border-radius: 0 0 70px 70px;
    box-shadow: 0px -4px 0px #022127e6;
    position: relative;
    z-index: 9;
}

div#multiple {
    text-align: center;
    width: 88%;
    max-width: 980px;
    margin: -50px auto 0 auto;
    padding-bottom: 80px;
	border-radius: 0 0 50px 50px;
    border: 2px solid #007c8e;
    background: #e1decf;
    background: -moz-linear-gradient(top, #e1decf 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #e1decf 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #e1decf 0%,#ffffff 28%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1decf', endColorstr='#ffffff',GradientType=0 );
}

.gradient-borders-totop {
    height: 150px;
    border-left: 2px;
    border-right: 2px;
    border-top: 0px;
    border-bottom: 0px;
    border-style: outset;
    border-image: linear-gradient(to top, #007c8e -10%,#e1decf 30%);
    border-image-slice: 1;
    width: 100%;
    margin-right: -2px;
    margin-top: -85px;
    padding: 100px 0 0 0;
}

.sections-cont {
    padding: 0 0 0 18px;
    width: 98%;
    margin: 0 auto;
    max-width: 900px;
}

.listen-container, .read-container {
    width: 45%;
    min-width: auto !important;
    display: inline-block;
    margin: 0 2%;
}

.listen-container {
    min-width: 300px;
}

.play {
    vertical-align: top;
    text-align: center;
    margin-top: 100px;
    width: 45%;
    display: inline-block;
    margin-left: 4%;
}

.play img {
    width: 100%;
    height: auto;
    max-width: 338px;
}

.read-container {
    vertical-align: top;
    min-width: 300px;
    max-width: 300px;
    /* background: #ffffff87; */
    /* outline: 2px solid #158f96; */
    border: solid 1px #006b7f;
}

.amazingcarousel-bullet-list div {
    display: inline-block !important;
	margin-bottom: 16px !important;
}




.text {
    width: 44%;
    text-align: justify;
    display: inline-block;
    vertical-align: bottom;
    /* margin-right: 1%; */
    background: #f3e6d1cf;
    margin-top: 120px;
    max-width: 268px;
    border-radius: 0px;
    padding: 0px 10px 0;
    border: double 7px #d4c6ab;
    /* outline: 2px solid #158f96; */
    outline-offset: -4px;
    border-bottom: 5px solid #d2c4ab;
}

.text p {
    font-size: 14px;
    font-weight: lighter;
    color: #024654;
    margin: -20px 0 0 -17px;
    line-height: 1.6;
    max-height: 150px;
    overflow-y: auto;
    padding-left: 10px;
}

.wh-title h4{
    background: #b14141;
    border-radius: 10px;
    padding: 0 20px 5px 20px;
    color: #fefefe;
    font-weight: lighter;
    font-size: 22px;
    line-height: 40px;
    box-shadow: inset 0px 0px 19px #772425;
}

/****************/

/*************/

div#footer {
    margin: 120px 0 0 0;
    width: 100%;
    padding: 10px 0 0;
    background: #e1decf;
}

.links {
    width: fit-content;
    margin: 0 auto;
	text-align: center;
}

.links ul{	padding:0;
	list-style:none;}
	
.links ul li {
    display: inline-block;
    padding: 8px;
}

.links a {
    color: #635c4c;
    font-size: 13px;
    text-decoration: none;
}

.links a:hover{color: #c86904;}

.copyrights {
    padding: 25px 0 16px 0;
    text-align: center;
    background: #ccc5b3 url(images/pattern.png) repeat-x top center;
    font-size: 12px;
}

.copyrights span {
    color: #635c4c;
}

/*********************************
STORY DETAILS PAGE
*********************************/

.pages-logo {
    width: 98%;
    max-width: 220px;
    text-align: center;
    margin: 0px auto 98px auto;
    padding-top: 36px;
}

.pages-logo img {
    width: 100%;
    height: auto;
}

#pages-header {
    width: 100%;
    height: 293px;
    background: url(images/wall-de.png) bottom left repeat-x, url(images/wall-patt.jpg) top left repeat-x;
    /* overflow: hidden; */
    /* padding-bottom: 50px; */
}

/*********************************************/

.pages-bg {
    text-align: center;
    width: 96%;
    max-width: 980px;
    margin: 200px auto 0 auto;
    border: 2px solid #007c8e;
    border-radius: 50px;
    padding: 30px 0;
    background: #ffffff url(images/clouds.png) no-repeat bottom center;
    background: -moz-linear-gradient(top, #8dd4e4 1%, #9edfeb 5%, #e1f3d2 24%, #ffffff 30%, #ffffff 100%);
    background: url(images/clouds.png) no-repeat bottom 74% center, -webkit-linear-gradient(top, #8dd4e4 1%,#9edfeb 5%,#e1f3d2 24%,#ffffff 30%,#ffffff );
    background: url(images/clouds.png) no-repeat bottom 74% center, linear-gradient(to bottom, #8dd4e4 1%,#9edfeb 5%,#E1F3D3 24%,#ffffff 30%,#ffffff );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dd4e4', endColorstr='#e1decf',GradientType=0 );
}

.sections-bg {
    text-align: center;
    width: 96%;
    max-width: 980px;
    margin: 200px auto 0 auto;
    padding: 30px 0;
}

.title {
    text-align: center;
    background: #ffffff;
    outline-offset: -10px;
    outline-style: dashed;
    outline-width: 1px;
    outline-color: #4cb3bc;
    border-radius: 5px;
    max-width: 600px;
    width: 84%;
    margin: 30px auto;
    padding: 30px 20px;
}

.title h4 {
    color: #1099a5;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.title p {
    font-size: 15px;
    line-height: 2;
    color: #793608;
    margin: 0;
}

.vid-holder {
    margin: 0 auto;
    max-width: 750px;
    text-align: center;
    background: #005263;
    width: 98%;
    padding: 12px 0;
}

.vid-footer {
    width: 98%;
    max-width: 750px;
    height: 40px;
    padding-top: 6px;
    background: #004654;
    margin: 0 auto;
    text-align: center;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid #b3badc26;
}

/**********SHARE***********/

ul.share-buttons img {
    width: 24px;
    height: 24px;
}

.sharebtns {
    padding-top: 2px;
}

ul.share-buttons{
  list-style: none;
  padding: 0;
      margin: 0;
}

ul.share-buttons li {
    display: inline;
    padding: 0 4px;
}

ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/******************************/

/****************tabs******/
.tab_container {
    border-top: 1px solid #d3e8d9;
    clear: both;
    margin: -1px auto 0 auto;
    width: 100%;
    max-width: 1170px;
    background: #f3fbfa;
    overflow: auto;
    box-shadow: 0px 2px 0px #d3e8e6;
    padding-bottom: 20px;
}

.tabs-cont {
    clear: both;
    width: 96%;
    max-width: 1030px;
    min-height: 207px;
    margin: 100px auto;
    text-align: right;
}

ul.tabs {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    height: 40px;
    width: 100%;
	text-align: center;
}

ul.tabs li {
    display: inline-block;
    margin: 0px 0;
    cursor: pointer;
    padding: 0px 20px;
    height: 38px;
    line-height: 37px;
    border-bottom: none;
    background-color: #158f96;
    color: #ffffff;
    overflow: hidden;
    position: relative;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px 6px 0 0;
}

.tab_content h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    text-align: right;
    line-height: 2;
    color: #009cb0;
    padding-right: 20px;
	background:url(images/sq.png) no-repeat right center;
	    background-size: 12px;
}

.tab_content p {
    font-size: 15px;
    line-height: 1.7;
    color: #383c4e;
    text-align: justify;
    background: #fff;
    padding: 12px;
    margin-top: 20px;
    border-bottom: 2px solid #d5dede;
}

ul.tabs li:hover {
    background-color: #007f8e;
	-webkit-transition: background 0.3s ease-in-out;
	-moz-transition: background 0.3s ease-in-out;
	-ms-transition: background 0.3s ease-in-out;
	-o-transition: background 0.3s ease-in-out;
	transition: background 0.3s ease-in-out;
}

ul.tabs li.active {
    background-color: #f3fbfa;
    color: #158f96;
    border: 1px solid #d3e8d9;
    border-bottom: 1px solid #f3fbf5;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    -ms-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
}


.tab_content {
    padding: 20px;
    display: none;
    color: #444;
    overflow: auto;
    height: 380px;
}

.tab_drawer_heading { display: none; }

/**********************************
Comments
********************************/

.comment-block input, textarea {
  outline: none;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  color: #555f77;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ced2db;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #ced2db;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ced2db;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #ced2db;
}

p {
  line-height: 1.3125rem;
}

.comments {
  margin: 2.5rem auto 0;
  max-width: 60.75rem;
  padding: 0 1.25rem;
}

.comment-wrap {
  margin-bottom: 1.25rem;
  display: table;
  width: 100%;
  min-height: 5.3125rem;
}

.photo {
  padding-top: 0.625rem;
  display: table-cell;
  width: 3.5rem;
}
.photo .avatar {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background-size: contain;
}

.comment-block {
  padding: 1rem;
  background-color: #fff;
  display: table-cell;
  vertical-align: top;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
.comment-block textarea {
  width: 100%;
  resize: none;
}

.comment-text {
  margin-bottom: 1.25rem;
}

.bottom-comment {
  color: #acb4c2;
  font-size: 0.875rem;
}

.comment-date {
  float: left;
}

.comment-actions {
  float: right;
}
.comment-actions li {
  display: inline;
  margin: -2px;
  cursor: pointer;
}
.comment-actions li.complain {
  padding-right: 0.75rem;
  border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
  padding-left: 0.75rem;
  padding-right: 0.125rem;
}
.comment-actions li:hover {
  color: #0095ff;
}

/*********************************
The entire section
*********************************/

.kharofa {
    width: 28.6%;
    padding: 1% 1%;
    background: #fff;
    display: inline-block;
    margin: 30px 1%;
    border: solid 1px #c2b9a5;
    border-bottom: 4px solid #c2b9a5;
}


.sections-bg img {
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.sections-bg h4 {
    font-size: 16px;
    font-weight: bold;
    margin:15px 0 0 0;
    color: #006c80;
    }
	
.sections-bg p {
    font-size: 13px;
    text-align: justify;
    direction: rtl;
    margin: 0px;
    color: #73350a;
    border-bottom: 1px solid #c2b9a56b;
    padding: 5px 0 15px 0;
}

.sections-bg h4 a {
    text-decoration: none;
    color: #fefefe;
    background: #006c80;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: lighter;
    line-height: 2;
    font-size: 15px;
}

.sections-bg h4 a:hover {
    color: #f6a76e;
}

.kha-img {
    max-height: 250px;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

a.effect {
    display: block;
    position: relative;
    overflow: hidden;
}

a.effect img {
    width: 100%;
    height: auto;
    transition: all 0.5s ease-in-out;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

a.effect img:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
}