/*

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.
If wrapping is allowed, it sets the direction that lines are stacked.
*/

html {
	position:relative;
  background: #ffffff;
  min-width:100%;
  max-width:100%;
  min-height: 100%;
  //max-height:100%;
  margin:0;

}



body {

  position:relative;
  font-family: Tajawal,sans-serif;
  min-width:100%;
  max-width:100%;
  min-height:100%;
  //max-height:100%;
  margin:0;

  display : table;
  overflow-x : hidden;
  /*
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction : column;*/
}

@font-face {
  font-family: "DroidSerif";
  src: url("https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf")
  format("truetype");
  unicode-range: U+600-6FF; /* Arabic */
}


@font-face {
  font-family: "DroidSerif";
  src: url("https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf")
  format("truetype");
  unicode-range: U+000-5FF; /* Latin glyphs */
}


@font-face {
  font-family: "DroidSerif";
  src: url("https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2")
  format("truetype");
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}



p{

	//font-family: "Noto Naskh Arabic",Verdana,serif;
	font-size : 20px;

}

.rtl{
	direction : rtl;
}

.ltr{
	direction : ltr;
}


.wrapper-navbar{
    position: relative;
	width: 100%;
	padding: 5px 0px;
	background : #fff;
	margin-top: 0px;



}

.navbar{
    position: absolute;
	width: 100%;
	padding: 5px 0px;
	background-image: linear-gradient(to right, #0014ff, #00ca3e);
	margin-top: 2px;
	text-align: center;

	box-shadow: 0 4px 4px -2px #232323;
    -moz-box-shadow: 0 4px 4px -2px #232323;
    -webkit-box-shadow: 0 4px 4px -2px #232323;
}



ul li a {

	color : #fff;

}

.navbar-mobile ul li{

    list-style-type: none;
    display: inline-block;
	margin-left: 0px;
	margin-right: 0px;
	color: #fff;
	font-size: 18px;
	width: 200px;
	height: 40px;
	line-height: 40px;
	//border-left: 1px solid #888;
	border-right: 1px solid #888;
	cursor: pointer;
	text-align: center;
	//font-family: calibri;
}


#header{
	position: fixed;
	width: 100%;
	height: 80px;
	background: #005acb;
	margin-top: 0px;
	top: 0;
    right: 0;
	left: 0;
	padding: 0px 0px;
	-webkit-box-shadow: 1px 2px 5px 1px #333;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:    1px 2px 5px 1px #333;/* Firefox 3.5 - 3.6 */
	box-shadow: 1px 2px 5px 1px #333;
	z-index: 1000;

	display: flex;
    flex-direction: column;

}



.icon-social-media {

  height: 50px;
  width: 50px;
  margin-left: 20px;

  display: flex;
  flex-direction: row;

}

.header-wrapper-icons-social-media{

	position:relative;
	margin-top : 5px;

}
.header-icon-social-media{

  height: 30px;
  width: 30px;
  margin-left: 20px;

}

.text-copyright{

text-align: center;
margin-bottom: 20px;
color: #333;

}


.container-icons-social-media{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;

}
.container-text-copyright{
text-align: center;
margin-top: 100px;
align-items: center;

}




a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}



.wrapper-menu-control-toggle{

	display:block;
	float:left;
	text-align:center;
	margin-top: -10px;
	width : 40px;

}

.vertical-divider{

    border: 0;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, rgba(244, 239, 239, 0.51), rgb(0, 0, 0), rgba(249, 244, 244, 0.55));

}


.header-wrapper-logo{

	position:relative;
	float:right;
	margin-right:10px;
	margin-left:10px;
	margin-top : -20px;

}

.header-logo{

	position:relative;
	width:128px;
	height:auto;
	float:right;

}



.navbar-toggle-menu{
  display: none;
	color :#fff;
	font-size : 40px;

}

.navbar-toggle-x{
	color: #fff;
  font-size: 40px;
  font-weight: bold;

}

.navbar-toggle{

	position :relative;
	color :#000;
	//width: 30px;
	//height: 30px;
	margin-left:20px;
	font-size : 40px;

}


.stickytop {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.stickytop + .container {
  padding-top: 60px;
}



.wrapper-carousel {

 position : relative;
 display : block;
 width :100%;
 text-align : center;
}

.carousel {

 position : relative;
 display  : block;
 width : max-content;
 max-width : 90%;
 height : max-content;
 max-height : 600px;
 box-shadow : 1px 1px #CCC;
 -webkit-box-shadow : 1px 1px #CCC;
}

ol{
	list-style : none;

}

.carousel-inner{

	position :relative;
	width : 100%;
	height : auto;
}


.carousel-indicators {
  position: absolute;
    display: inline-block;
    height: 20px;
    width: auto;
    max-width: 200px;
    max-height: 20px;
    text-align: center;
    list-style: none;
    bottom: -80px;

}

.carousel-item {
  position: relative;
  display: none;
  align-items: center;
  width: 100%;

  perspective: 1000px;

}


.carousel {
  position: relative;
  z-index : 1;

}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-indicators li {
  position :relative;
  display : list-item;
  background-color: #6e6e6e !important;
  height : 20px !important;
  width : 20px !important;
  border-radius : 20px;
  float : left;
  margin-left : 10px;
}



.carousel-indicators .active {
  background-color: #fff !important;
  border : 2px solid #008800;
}


.gradient-text{

	background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.wrapper-menu-control-toggle{

    display : block;

}

.wrapper-menu-control-toggle {
    position: absolute;
    display: block;
    float: left;
    text-align: center;
    margin-top: 10px;
    width: 40px;
}


.wrapper-pano-item{

	position : relative;
	display : block;
	margin-bottom : 10px;
	text-align : center;
	text-align: -webkit-center;

}




.pano-thumb{
	position: relative;
  display: block;
  width: 200px;
  height: auto;
	overflow : hidden;
	overflow-y: scroll;
	background : #00a31c;
}


.pano-title{
	position: relative;
  display: block;
  font-size: 20px;
	color : #555;
  font-weight: bold;
  width: 200px;
  height: auto;

}

.wrapper-pano{

	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	background : #000;

	z-index:0;
}


.pano{

	position:absolute;
	width:100vw;
	height:100vh;
	margin-left:0px;
	margin-right:0px;
	z-index:1;
	box-shadow: 0px 5px 0px #888888;


}

.banner{

	position : fixed;
	display : block;
	bottom: 60px;
	right: 5px;
	z-index : 1;
	width : 100%;
	height : auto;
	max-width: 100%;
	text-align: -webkit-center;
	//background : #0000ff;

}

.banner-img{

	position : relative;
	display : block;
	//float: right;
	width: 640px;
	height: 100px;
	max-width: 100%;

}

.navbar-left-wrapper{

	position: relative;
	display :block;
	z-index: 1;
  margin-top: 80px;
	height: 100vh;
  width: 320px;
  overflow-y:scroll;
	box-shadow: 0px 0px 10px 0px #333;
	background : #fafafa;

}


.wrapper-pano-thumb{

	position: relative;
	display :block;
    margin-top: 0px;
	height: auto;
    width: 100%;

}


.wrapper-pano{

	position: relative;
	display :block;
    margin-top: 0px;
	height: 100%;
    width: 100%;

}

.wrapper-pano-nav{

position: sticky;
margin-top: 5px;
height: 30px;
width: 100%;
max-width: 100%;
/*box-shadow: 0 4px 4px -2px #232323;
-moz-box-shadow: 0 4px 4px -2px #232323;
-webkit-box-shadow: 2px 4px 6px 0px #232323;*/

}

.wrapper-pano-infos{

position: absolute;
display: none;
margin-top: 5px;
width: 100%;
height: 100vh;
max-width: 100%;

}


.wrapper-panos-list{


	position: absolute;
	display: block;
	margin-top: 20px;
	width: 100%;
	height: 100vh;
	max-width: 100%;
	text-align: -webkit-center;

}

.wrapper-pano-info-thumb{


}



.pano-infos-text{

position:  relative;
display: block;
color: #7b7b7b;
font-size: 16px;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;

}




/* width */
::-webkit-scrollbar {
  width: 5px;
  height : 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #005acb;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

embed, iframe, img, object, video { max-width: 100%; }