/***********************************HEADER************************************/
.homeHeader{
   position:relative;
   width:100%;
   padding:30px 0px;
   background: #BFBBB7;
}
.homeLogo{
   position:relative;
   margin-top:120px;
   width:320px;
   height:60px;
   background:url("../images/logo-white.svg") center no-repeat;
   background-size:320px 60px;
}
.homeNav{
   position:relative;
   width:20px;
   height:20px;
   background:url("../images/nav-white.svg") center no-repeat;
   background-size:20px 20px;
}

.projectHeader{
   position:fixed;
   width:100%;
   top:0px;
   left:0px;
   padding:30px 0px;
   background: #FFF; 
   z-index:99;
}
.projectLogo{
   position:relative;
   width:170px;
   height:30px;
   background:url("../images/logo.svg") center no-repeat;
   background-size:170px 30px;
}
.projectNav{
   position:relative;
   width:20px;
   height:20px;
   background:url("../images/nav.svg") center no-repeat;
   background-size:20px 20px; 
}

#navMenu{
   position:fixed;
   width:100%;
   height:100%;
   top:0px;
   left:0px;
   background:#BFBBB7;
   z-index:99;
   overflow-y:scroll !important;
}
#navMenu .navHeader{
   width:100%;
   padding:30px 0px;
}
#navMenu .navMenuLogo{
   position:relative;
   width:170px;
   height:30px;
   background:url("../images/logo-white.svg") center no-repeat;
   background-size:170px 30px;
}
#navMenu .closeBtn{
   position:relative;
   width:20px;
   height:20px;
   background:url("../images/close-btn-white.svg") center no-repeat;
   background-size:20px 20px;
}
.popup{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:99;
	background:#6d6b69;
}
.pin{
   position: absolute;
	width:7px;
	height:7px;
	border-radius: 50%;
	border:1px solid black;  
   background:#ef5448;
   cursor:pointer;
}
a{
   text-decoration:none !important ;
}
#bottom .leftSide a:visited{
   color:#FFF ;
}
#navMenu a{
   color:#6D6B69 ;
}
/* #navMenu a:hover{
   color:#FFFFFF ;
} */

@media(max-width:800px){
   
}
@media(max-width:1200px){
   .content{
      position:relative;
      width:95%;
      margin:0px auto;
   }
   #stickyHeader{
      display:block;
   }
   #normalHeader{
      display:none;
   }
   .navMap{
      display:none;
   }
   #navMenu .titleEn{
      font-size:30px;
   }
   #navMenu .titleAr{
      font-size:25px;
   }
   .popupContent{
      position:relative;
      width:100%;
      margin:0px auto;
   }
}
@media(min-width:1200px){
   .content{
      position:relative;
      width:1200px;
      margin:0px auto;
   }
   #normalHeader{
      display:block;
   }
   #stickyHeader{
      display:none;
   }
   .navMap{
      display:block;
   }
   #navMenu .titleEn{
      font-size:35px;
   }
   #navMenu .titleAr{
      font-size:30px;
   }
   .homeNav:hover{
      background:url("../images/nav-brown.svg") center no-repeat;
   }
   .homeLogo:hover{
      background:url("../images/logo-brown.svg") center no-repeat;
   }
   .projectLogo:hover{
      background:url("../images/logo-brown.svg") center no-repeat;
   }
   .projectNav:hover{
      background:url("../images/nav-brown.svg") center no-repeat;
   }
   #navMenu .closeBtn:hover{
      background:url("../images/close-btn-brown.svg") center no-repeat;
   }
   #navMenu .navMenuLogo:hover{
      background:url("../images/logo-brown.svg") center no-repeat;
   }
   #navMenu .closeBtn:hover{
      background:url("../images/close-btn-brown.svg") center no-repeat;
   }
   #projectPage a:hover{
      color:#ef5448;
   }
   .popupContent{
      position:relative;
      width:800px;
      margin:0px auto;
   }
}

/**********************************HOME*************************************/
.shadow{
	position:absolute;
	bottom: 0;
	left: 0;
   width:100%;
   height: 100%;
	background:rgba(0,0,0,0.6);
	overflow: hidden;  
}

@media(max-width:800px){
   .text{
      margin-top:35% !important;
   }
}
@media(max-width:1200px){
   .projectImage{
      width:100%;
   }
   .text{
      margin-top:45%;
   }
   #projects .project{
      padding-right:0px !important;
   }
}
@media(min-width:1200px){
   .projectImage{
      width:100%;
      height:550px;
   }
   .text{
      margin-top:210px;
   }
   .paddingRight{
      padding-right:30px !important;
   }
}

/**********************************PROJECT*************************************/
#projectPage .innerImage{
   z-index:9;
}
#projectPage .socialMedia{
   display: none;
}
#projectPage .artistDesktop .projectTextEn a{
   font-size:16px !important;
}
#projectPage .artistDesktop .projectTextAr a{
   font-size:16px !important;
}
#projectPage .shareText{
   color:#6d6b69;
}
@media(max-width:800px){
   #projectPage .imageOnly{
      height:300px !important;
   }
   #projectPage .captionImage{
      height:300px !important;
   }
   #projectPage .captionText{
      margin-top:20px;
   }
   #projectPage .textOnly{
      width:100%;
      height:300px !important;
      font-size:11px;
      padding:80px 10px;
   }
   iframe{
      height:300px !important;
   }
}
@media(max-width:1200px){
   #projectPage .section1Desktop{
      display:none;
      margin-top:100px;
   }
   #projectPage .section1Mobile{
      display:block;
   }
   #projectPage .artistDesktop{
      display:none;
   }
   #projectPage .artistMobile{
      display:block;
   }
   #projectPage .innerText{
      margin-top:40px;
   }
   #projectPage .titleEn{
      margin-top:20px;
      font-size:30px;
   }
   #projectPage .titleAr{
      font-size:30px;
   }
   #projectPage .swiper-container{
      position:relative;
      overflow:hidden;
      margin:0px auto;
   }
   #projectPage .swiper-container .swiper-wrapper{
      position:relative;
   }
   #projectPage .swiper-container .swiper-wrapper .swiper-slide{
      position:relative;
      float:left;
   }
   #projectPage .imageOnly{
      width:100%;
      height:480px;
   }
   #projectPage .captionImage{
      width:100% ;
      height:480px;
   }
   #projectPage .captionText{
      width:80%;
      margin:0px auto;
      text-align:center;
      word-wrap:break-word;
   }
   #projectPage .top20{
      margin-top:20px;
   }
   #projectPage .textOnly{
      width:100%;
      height:480px;
      font-size:11px;
      padding:80px 10px;
   }
   iframe{
      height:480px;
   }
   #projectPage .slidesNumber{
      position:relative;
      margin-top:20px;
      color:#6d6b69;
   }
   .share{
      font-size:12px;
   }
   #projectPage .slideBtns{
      width:70px;
   }
   #projectPage .nextSlide{
      width:30px;
      height:30px;
      background:white url("../images/arrow-right.svg") center no-repeat;
      background-size:15px 15px;
   }
   #projectPage .previousSlide{
      width:30px;
      height:30px;
      background:white url("../images/arrow-left.svg") center no-repeat;
      background-size:15px 15px;
   }
   #projectPage .projectTextEn{
      margin-top:20px;
      font-size:18px;
   }
   #projectPage .projectTextAr{
      font-size:16px;
   }
   #projectPage .artistImage{
      margin-top:30px;
   }
   #projectPage a{
      font-size:12px !important; 
   }
   #projectPage .projectImage{
      margin-top:20px;
   }
   #projectPage .margin50_100{
      margin-top:50px;
   }
}
@media(min-width:1200px){
   #projectPage .section1Desktop{
      display:block;
   }
   #projectPage .section1Mobile{
      display:none;
   }
   #projectPage .artistDesktop{
      display:block;
   }
   #projectPage .artistMobile{
      display:none;
   }
   #projectPage{
      margin-top:90px;
   }
   #projectPage .titleEn{
      margin-top:50px;
      font-size:40px;
   }
   #projectPage .titleAr{
      font-size:30px;
   }
   #projectPage .artistName{
      margin-top:20px;
   }
   #projectPage .innerText{
      padding-left:50px;
      margin-top:100px;
   }
   #projectPage .swiper-container::-webkit-scrollbar {
      display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
   #projectPage .swiper-container {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
   #projectPage .swiper-container{
      position:relative;
      overflow:initial;
      overflow-x: hidden;
   }
   #projectPage .swiper-container .swiper-wrapper{
      position:relative;
   }
   #projectPage .swiper-container .swiper-wrapper .swiper-slide{
      position:relative;
      float:left;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
   }
   #projectPage .imageOnly{
      width:100%;
   }
   #projectPage .captionImage{
      position:relative;
      float:left;
   }
   #projectPage .captionText{
      float:left;
      margin-left:5%;
      overflow-y: auto;
      padding-right:10px;
   }
   #projectPage .top20{
      margin-bottom:20px;
   }
   #projectPage .textOnly{
      width:100%;
      height:auto;
      font-size:20px;
      padding:10% 100px;
   }
   iframe#projectVideo{
      height:auto;
   }
   #projectPage .slidesNumber{
      position:absolute;
      bottom:0px;
      left:0px;
      color:#6d6b69;
   }
   #projectPage .slideBtns{
      width:130px;
   }
   #projectPage .nextSlide{
      width:60px;
      height:60px;
      background:white url("../images/arrow-right.svg") center no-repeat;
      background-size:15px 15px;
   }
   #projectPage .previousSlide{
      width:60px;
      height:60px;
      background:white url("../images/arrow-left.svg") center no-repeat;
      background-size:15px 15px;
   }
   #projectPage .projectTextEn{
      font-size:16px;
   }
   #projectPage .projectTextAr{
      font-size:16px;
   }
   #projectPage .margin50_100{
      margin-top:100px;
   }
   .share{
      font-size:12px;
   }
   #projectPage a{
      font-size:12px; 
   }
   #projectPage .share:hover{
      color:#6d6b69;
   }
   #projectPage .shareText{
      position:absolute;
      bottom:0px;
      left:60px;
      color:#6d6b69;
   }
}
#projectPage .captionText div, #projectPage .captionText del, #projectPage .captionText p{
   font-family: 'Cairo' !important;
}
/**********************************FOOTER*************************************/
#bottom{
   position:relative;
   width:100%;
   background:#6d6b69;
}
#bottom .copyRight a:hover{
   color:#FFF !important; 
}
#bottom .copyRight a:visited{
   color:#ef5448;
}
#bottom a{
   color:white;
}
#bottom .footerLogos a{
   color:#ef5448;
}
#bottom .title{
   font-size:25px;
}

@media(max-width:1200px){
   #bottomDesktop{
      display:none;
   }
   #bottomMobile{
      display:block;
   }
   #bottom .footerLogos{
      position:relative;
      width:100%;
      margin-top:50px;  
   }
   #bottom .info{
      font-size:16px;
   }
   .redLine{
      position:relative;
      width:100%;
      height:10px;
      background-color:#ef5448;
   }
}
@media(min-width:1200px){
   #bottomDesktop{
      display:block;
   }
   #bottomMobile{
      display:none;
   }
   #bottom .section1{
      width:48%;
      float:left;
   }
   #bottom .section2{
      width:40%;
      margin-left:12%;
      float:left;
   }
   #bottom .section2_2{
      margin-top:100px;
   }
   #bottom .leftSide{
      width:49%;
      float:left;
      margin-right:2%;
   }
   #bottom .rightSide{
      width:49%;
      float:left;
   }
   #bottom .footerLogos{
      position:relative;
      width:350px;
   }
   #bottom .info{
      font-size:16px ;
      line-height:20px;
   }
   #bottom .infoAr{
      font-size:16px ;
      line-height:21px ;
   }
   .redLine{
      position:relative;
      width:100%;
      height:10px;
      background-color:#ef5448;
   }
}