body{background-color: #000;}

@font-face {
  font-family: MPLSC;
  src: url(../fonts/MyriadPro-LightSemiCn.otf);
}

.Swatch { background: rgba(90, 30, 10, 0.8);}

.Swatch_Olive { background: rgba(54, 63, 42, 0.8);}
.Swatch_Gold { background: rgba(125, 110, 70, 0.8);}

#SwatchA { background: rgba(90, 30, 10, 0.8);}
#SwatchB { background: rgba(138, 86, 90, 0.8);}
#SwatchC { background: rgba(132, 84, 34, 0.8);}
#SwatchD { background: rgba(128, 70, 27, 0.8);}
#SwatchE { background: rgba(127, 60, 16, 0.8);}
#SwatchF { background: rgba(121, 68, 59, 0.8);}
#SwatchG { background: rgba(120, 70, 50, 0.8);}
#SwatchH { background: rgba(107, 68, 35, 0.8);}
#SwatchI { background: rgba(103, 66, 53, 0.8);}
#SwatchJ { background: rgba(76, 42, 18, 0.8);}
#SwatchK { background: rgba(72, 60, 50, 0.8);}
#SwatchL { background: rgba(85, 69, 51, 0.8);}
#SwatchM { background: rgba(84, 50, 48, 0.8);}
#SwatchN { background: rgba(81, 61, 44, 0.8);}
#SwatchO { background: rgba(118, 56, 29, 0.8);}
#SwatchP { background: rgba(66, 13, 9, 0.8);}
#SwatchQ { background: rgba(66, 26, 26, 0.8);}
#SwatchR { background: rgba(44, 32, 24, 0.8);}
#SwatchS { background: rgba(21, 15, 14, 0.8);}

#bgImagePM { background-image: url("../imgs/project_management.jpg");}
#bgImageAD { background-image: url("../imgs/AandD_splash.jpg");}


#bgImage0 { background-image: url("../imgs/jnanylan_splash.jpg");}
#bgImage00 { background-image: url("../imgs/millet.jpg");}
#bgImage01 { background-image: url("../imgs/souk.jpg");}
#bgImage02 { background-image: url("../imgs/morocco_strategic.jpg");}
#bgImage03 { background-image: url("../imgs/JnanYlan_4199.jpg");}
#bgImage04 { background-image: url("../imgs/MLM.jpg");}
#bgImage05 { background-image: url("../imgs/farmland_hills.jpg");}
#bgImage06 { background-image: url("../imgs/MLM_olive2.jpg");}
#bgImage07 { background-image: url("../imgs/erfoud.jpg");}
#bgImage08 { background-image: url("../imgs/JnanYlan_05.jpg");}
#bgImage09 { background-image: url("../imgs/farming.jpg");}
#bgImage10 { background-image: url("../imgs/local_talent.jpg");}
#bgImage11 { background-image: url("../imgs/kasbah_concept.jpg");}
#bgImage12 { background-image: url("../imgs/douars_mood.jpg");}
#bgImage13 { background-image: url("../imgs/MasterPlan_Key.jpg");}
#bgImage14 { background-image: url("../imgs/entrance_mood.jpg");}
#bgImage15 { background-image: url("../imgs/3d_entrance.jpg");}
#bgImage16 { background-image: url("../imgs/3d_hotel_aerial.jpg");}
#bgImage17 { background-image: url("../imgs/kasbah_patio.jpg");}
#bgImage18 { background-image: url("../imgs/boutique_hotel_fp_rc.jpg");}
#bgImage19 { background-image: url("../imgs/boutique_hotel_fp_1f.jpg");}
#bgImage20 { background-image: url("../imgs/hotel_room_concept.jpg");}
#bgImage21 { background-image: url("../imgs/spa_masterplan.jpg");}
#bgImage22 { background-image: url("../imgs/spa_floorplan.jpg");}
#bgImage23 { background-image: url("../imgs/spa_mood.jpg");}
#bgImage24 { background-image: url("../imgs/3d_spa.jpg");}
#bgImage25 { background-image: url("../imgs/local_materials.jpg");}
#bgImage26 { background-image: url("../imgs/villas_masterplan.jpg");}
#bgImage27 { background-image: url("../imgs/3d_cluster.jpg");}
#bgImage28 { background-image: url("../imgs/douar_floorplan.jpg");}
#bgImage29 { background-image: url("../imgs/Villa_T2_floorplan.jpg");}
#bgImage30 { background-image: url("../imgs/Villa_T3_floorplan.jpg");}
#bgImage31 { background-image: url("../imgs/Villa_T4_floorplan.jpg");}
#bgImage32 { background-image: url("../imgs/villa_interior_mood.jpg");}
#bgImage33 { background-image: url("../imgs/villa_exterior_mood.jpg");}
#bgImage34 { background-image: url("../imgs/marrakech_mood.jpg");}
#bgImage36 { background-image: url("../imgs/marrakech_mood.jpg");}
#bgImage35 { background-image: url("../imgs/road_desert.jpg");}
#bgImage37 { background-image: url("../imgs/jy_usp.jpg");}
#bgImage38 { background-image: url("../imgs/fontaine.jpg");}
#bgImage39 { background-image: url("../imgs/woman_poolside_book.jpg");}
#bgImage40 { background-image: url("../imgs/pool_reflection.jpg");}
#bgImage41 { background-image: url("../imgs/boutique_hotel_concept.jpg");}





#arrow { font-family: MPLSC; font-size: 100px; font-weight: 100; color:#fff; padding: 30px 25px;}

a.button:link, a.button:visited {
    opacity: 0.2;
    background-color: black;
    border: none;
    color: #FFFFFF;
    padding: 10px 12px;
    text-align: center;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    text-decoration: none;
   cursor: pointer;
   display: inline-block;
}

a.button:hover, a.button:active {
   opacity: 0.9;
   background-color: #0a0a0a;
}

#IndexTxt {font-family: MPLSC; font-size: 25px; font-weight: 500; color:#fff;}
#IndexTxt50 {font-family: MPLSC; font-size: 25px; font-weight: 500; color: rgba(255, 255, 255, 0.5);}

#BanTxt { font-family: MPLSC; font-size: 60px; font-weight: 100; color:#fff; padding: 30px 35px 30px 20px;}

#BigTxt { font-family: MPLSC; font-size: 35px; font-weight: 200; color:#fff; }

#ContTxt { padding: 20px 20px; font-family: MPLSC; font-size: 28px; font-weight: 500; color:#fff;}

#DataTxt {font-family: MPLSC; font-size: 28px; font-weight: 500; color:#fff;}
#DataTxt50 {font-family: MPLSC; font-size: 28px; font-weight: 500; color: rgba(255, 255, 255, 0.5);}

#DataSmTxt {font-family: MPLSC; font-size: 25px; font-weight: 500; color:#fff;}

#NumberBox {
	width:34px;
	height:34px;
	display: flex;
  	align-items: center;
  	justify-content: center;
  	font-family: MPLSC;
  	font-size: 18px;
  	font-weight: 700;
  	color:#fff;
  	position: relative;
  	float: right;
  	margin: 7px;}

    #IndexBox {
    	width:250px;
    	height:34px;
    	display: flex;
      align-items: center;
      justify-content: center;
      font-family: MPLSC;
      font-size: 18px;
      font-weight: 700;
      color:#fff;
      position: relative;
      float: right;
      margin: 7px;
    }