/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
 
 
 /* ==== Google font ==== */
@import url('https://fonts.googleapis.com/css?family=Lato:400,300,700,900');
@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url(https://fonts.googleapis.com/earlyaccess/amiri.css);
@import url(https://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);

@font-face{font-family:"JF Flat Regular";src:url(../fonts/JF-Flat-regular.eot);src:url(../fonts/JF-Flat-regular.eot?#iefix) format("embedded-opentype"),url('../fonts/JF-Flat-regular.svg#JF Flat Regular') format("svg"),url(../fonts/JF-Flat-regular.woff) format("woff"),url(../fonts/JF-Flat-regular.ttf) format("truetype");font-weight:400;font-style:normal}

body {
    width: 100%;
    height: 100%;
    font-family: "JF Flat Regular", 'Droid Arabic Kufi', 'Droid Arabic Naskh', Helvetica, Arial, sans-serif;
	line-height:2em;
	font-size: 16px;	
}

p, h1, h2, h3, h4, h5, h6 {text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);}

html {
    width: 100%;
    height: 100%;
}

header {
  /*background:#000 url(../img/background_products-category-bags_e01df835e6.jpg) center center;*/
  	background:url(../img/bg_contact.jpg) center center; 
  padding:25px 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: table;
	padding: 0;
	width:100%;
	height:100%;
}
h1 {color:#D6A736;  text-shadow: 0px 1px rgba(0,0,0, .5);}
h1, h2, h3, h4, h5 {line-height:normal}
@media(min-width:767px) {
    .navbar {
        padding: 12px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.intro-section {
/*    height: 100%;*/
    padding-top: 10px; padding-bottom:0;
    text-align: center;
    background: #ccc;
	background:url(../img/Pattern.png) center center repeat; 
}

.about-section {background:rgba(228, 224, 216, 0.12) url(../img/moon.png) bottom center no-repeat;
    height: 100%;
    padding-top: 100px;
    text-align: center;
 /*   background: #eee;*/
}

.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

/******************************************/
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
.nav.nav-justified > li > a { position: relative; }
.nav.nav-justified > li > a:hover,
.nav.nav-justified > li > a:focus { background-color: transparent; }
.nav.nav-justified > li > a > .quote {
    position: absolute;
    left: 0px;
    top: 0;
    opacity: 0;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: #13c0ba;
    border-radius: 15px;
    color: #fff;  
}
.nav.nav-justified > li.active > a > .quote { opacity: 1; }
.nav.nav-justified > li > a > div { box-shadow: 0 0 0 5px #DFB24A; }
.nav.nav-justified > li > a > div { width:150px; height:150px;
    max-width: 100%; 
    opacity: .3; 
    -webkit-transform: scale(.8,.8);
            transform: scale(.8,.8);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li > a > div > i {line-height:150px}
.nav.nav-justified > li.active > a > div,
.nav.nav-justified > li:hover > a > div,
.nav.nav-justified > li:focus > a > div { 
    opacity: 1; 
    -webkit-transform: none;
            transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tab-pane .tab-inner { padding: 30px 0 20px; }

@media (max-width: 768px) {
	.nav-justified {
        text-align: -webkit-center;}  
    .nav.nav-justified > li > a > .quote {
        left: auto;
        top: auto;
        right: 20px;
        bottom: 0px;
    }  
.nav-justified>li {
    display: inline-block;
}

.nav.nav-justified > li > a > div { width:80px; height:80px;}
.nav.nav-justified > li > a > div > i {line-height:80px; font-size:40px;}

}
/*************************************/


/*Remove that CSS*/
.col-md-3 {
    margin-left:5%;
    }
/*Remove that CSS*/



button {
  margin: 20px 0;
  line-height: 34px;
  position: relative;
  cursor: pointer;
  user-select: none;
  outline:none !important;
}
.navbar-toggle { float:left}
.navbar-nav>li>a {text-align:center}

button:active {

  outline:none;
}

button.ribbon {
  
  outline:none;
  outline-color: transparent;
}
button.ribbon:before, button.ribbon:after {
  top: 5px;
  z-index: -10;
}
button.ribbon:before {
  border-color: #53dab6 #53dab6 #53dab6 transparent;
  left: -25px;
  border-width: 17px;
}
button.ribbon:after {
  border-color: #53dab6 transparent #53dab6 #53dab6;
  right: -25px;
  border-width: 17px;
}

button:before, button:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0;
  outline:none;
}

button.btn-default:before {
  border-color: #757575 #757575 #757575 transparent;
    }
    button.btn-default:after {
  border-color: #757575 transparent #757575 #757575;
    }
    
    
    
    button.btn-primary:before {
  border-color: #2e6da4 #2e6da4 #2e6da4 transparent;
    }
    button.btn-primary:after {
  border-color: #2e6da4 transparent #2e6da4 #2e6da4;
    }
    
    
    button.btn-success:before {
  border-color: #398439 #398439 #398439 transparent;
    }
    button.btn-success:after {
  border-color: #398439 transparent #398439 #398439;
    }
    
    
    button.btn-info:before {
  border-color: #269abc #269abc #269abc transparent;
    }
    button.btn-info:after {
  border-color: #269abc transparent #269abc #269abc;
    }
    
    
    button.btn-warning:before {
  border-color: #d58512 #d58512 #d58512 transparent;
    }
    button.btn-warning:after {
  border-color: #d58512 transparent #d58512 #d58512;
    }
    
    
    button.btn-danger:before {
  border-color: #ac2925 #ac2925 #ac2925 transparent;
    }
    button.btn-danger:after {
  border-color: #ac2925 transparent #ac2925 #ac2925;
    }
    
    /*************************************************/
	
	.big-btn{
padding: 10px 0px 11px 0px;
width: 215px;
margin-top:5px;
}

.big-btn i{
font-size: 65px;
margin-right: 0px !important;
}
.big-btn strong{
font-size: 25px;
text-shadow: 1px 2px 0px #34659B;
color: #fff;
line-height: 24px;
}
.big-btn .btn-text{
margin-top:6px;
}

.big-btn small{font-size: 75%;}

.android-btn{

width: 240px;
padding: 13px 17px 13px 0px;
background-color: #000;
border-color: #000;

}
.android-btn:hover{
background-color: #272727;
}

.android-btn i{
font-size: 55px;
}

.android-btn .btn-text{
margin-top: 0px;
}

.android-btn strong{
font-size: 25px;
text-shadow: none;
color: #fff;
line-height: 24px;
}

.windows-btn{
background-color:#008A00;
width: 235px;
padding: 13px 5px 13px 10px;
border-color: #055805;
}

.windows-btn:hover{
background-color: #008A00;
}
.windows-btn .btn-text{
text-shadow: none;
font-size: 26px;
line-height: 25px;
}

/************outline after click**************/
.button:hover, button:focus, a:hover, .btn-link:hover, a:focus, .btn-link:focus {text-decoration:none; outline: none; }
a, button, .panel-heading { transition: all .3s ease-in-out; cursor:pointer;}

.btn-success{color:#fff;background-color:#383538;border-color:#383538; -webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; width:100%;}.btn-success.active,.btn-success.focus,.btn-success:active,.btn-success:focus,.btn-success:hover,.open>.dropdown-toggle.btn-success{color:#fff;background-color:#383538;border-color:#383538}.btn-success.active,.btn-success:active,.open>.dropdown-toggle.btn-success{background-image:none}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#383538;border-color:#383538}.btn-success .badge{color:#5cb85c;background-color:#fff}.btn-info{color:#fff;background-color:#383538;border-color:#383538}





/*---------------------*/

.red { 
  background-color: white; 
  
}

.diagram * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/* Generic styling */

/*body {
	background: #F5EEC9;	
}*/

.diagram{
	width: 100%;
}

.diagram a:focus{
	outline: 2px dashed #f7f7f7;
}

@media all and (max-width: 767px){
	.diagram{
		padding: 0 0px;
	}	
}

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

.diagram ul a{
	display: block;
	background: #026575 /*#6a5ab5*/;
	border: 3px solid #53b7bf;
	text-align: center;
	overflow: hidden;
	font-size: .9em;
	line-height: 1.7em;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	height: 94px;
	margin-bottom: -26px;
	box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4);
	-webkit-transition: all linear .1s;
	-moz-transition: all linear .1s;
	transition: all linear .1s;
	-webkit-border-top-right-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
-moz-border-radius-topright: 12px;
-moz-border-radius-bottomright: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}


@media all and (max-width: 767px){
	.diagram ul a{
		font-size: 1em;
	}
}


.diagram ul a span{
	top: 44%;
	margin-top: -0.7em;
	display: block;
}

/*
 
 */

.top > li > a{
	margin-bottom: 25px;
}

.director > li > a{
	width: 27%;
	margin: 0 auto 0px auto;
}

.structures{
	width: 100%;
}

/* top of structures lines */
.structures > li:first-child{	
	width: 18.59894921190893%;  
	height: 44px;
	margin: 0 auto 18px auto;		
	padding-top: 25px;
	border-bottom: 3px solid #53b7bf;
	z-index: 1;	
}

.structures > li:first-child{	
	float: left;
	left: 31.6%;
	border-right: 3px solid #53b7bf;	
  border-bottom: 0;
}

.structures > li:first-child a{
	width: 100%;
}


@media all and (max-width: 767px){
	.structures > li:first-child{
		width: 40%;	
	}

	.structures > li:first-child{
		left: 10%;
		margin-left: 2px;
	}
}


.structures > li:first-child a{
	right: 25px;
}

.structure:first-child,
.structures li:nth-child(2){
	margin-left: 1px;
	clear: left;	
}

/* lines for structures */
.structures:after{
	content: "";
	display: block;
	position: absolute;
	height: 22px;	
	border-top: 3px solid #53b7bf;
	border-right: 3px solid #53b7bf;
	border-left: 3px solid #53b7bf;
	margin: 0 auto;
	top: 40px;
	
}

.structures-1:after{
  border: 0px;
}

.structures-2:after{
  width: 57.3%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 23.8%; /* NEEDS CALCULATION => left of line */
}

.structures-3:after{
  width: 70.7%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 15.8%; /* NEEDS CALCULATION => left of line */
}

.structures-4:after{
  width: 75.9%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 11.6%; /* NEEDS CALCULATION => left of line */
}

.structures-5:after{
  	width: 81.1%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 9.1% /* NEEDS CALCULATION => left of line */
}

.structures-6:after{
  	width: 82.8%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 7.3% /* NEEDS CALCULATION => left of line */
}

.structures-7:after{
  	width: 82.8%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 5.8% /* NEEDS CALCULATION => left of line */
}

.structures-8:after{
  	width: 83.2%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 5% /* NEEDS CALCULATION => left of line */
}

.structures-9:after{
  	width: 87.5%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 4.4% /* NEEDS CALCULATION => left of line */
}

.structures-10:after{
  	width: 89.5%; /* 81%; */ /* NEEDS CALCULATION => total width of line */
  left: 4.0% /* NEEDS CALCULATION => left of line */
}

@media all and (max-width: 767px){
	.structures:after{
		border-right: none;
		left: 0;
		width: 49.8%;
	}  
}

@media all and (min-width: 768px){
	.structure:first-child:before,
   .structure:last-child:before{
    border:none;
  }
}

.structure:before{
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 22px;
	border-left: 3px solid #53b7bf;
	z-index: 1;
	top: -22px;
	left: 46%;
	margin-left: -3px;
}

/* The width of the structure blocks is being set here */
.structure{
	border-left: 3px solid #53b7bf;
	float: left;
	margin-left: 1.751313485113835%;
	margin-bottom: 60px;
}

.structure-1{
  width: 50%;/* NEEDS CALCULATION */
  left: 25%;
  top: -22px;
}

.structure-2{
  width: 48%;/* NEEDS CALCULATION */
}

.structure-3{
  width: 32.15%;/* NEEDS CALCULATION */
}

.structure-4{
  width: 23.6%;/* NEEDS CALCULATION */
}

.structure-5{
 width: 18.59894921190893%;/* NEEDS CALCULATION */
}

.structure-6{
 width: 15.2%;/* NEEDS CALCULATION */
}

.structure-7{
 width: 12.7%; /*width: 12.2%;*/ /* NEEDS CALCULATION */
}

.structure-8{
 width: 10.2%;/* NEEDS CALCULATION */
}

.structure-9{
 width: 9.2%;/* NEEDS CALCULATION */
}

.structure-10{
 width: 8.2%;/* NEEDS CALCULATION */
}

.lt-ie8 .structure{
	width: 18.25%;
}

@media all and (max-width: 767px){
	.structure{
		float: none;
		width: 100%;
		margin-left: 0;
	}

	.structure:before{
		content: "";
		display: block;
		position: absolute;
		width: 0;
		height: 60px;
		border-left: 3px solid #53b7bf;
		z-index: 1;
		top: -60px;
		left: 0%;
		margin-left: -4px;
	}

	.structure:nth-child(2):before{
		display: none;
	}
}

.structure > a{
	margin: 0 0 -26px -3px;
	z-index: 1;
}

.structure > a:hover{	
	height: 100px;
}

.structure > ul{
	margin-top: 0px;
	margin-bottom: 0px;
}

.structure li{	
	padding-left: 50px;
	border-bottom: 3px solid #53b7bf;
	height: 104px;	
	
}





.structure li a{
	background: #fff;
	top: 40px;
    position: absolute;
    z-index: 1;
    width: 90%;
    height: 92px;vertical-align: middle;
	right: -1px;
	background-image: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%) !important;
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0)))!important;
	background-image: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
	background-image: -o-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
	background-image: -ms-linear-gradient(-45deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
	background-image: linear-gradient(135deg,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#00000000',GradientType=1 );
}

.structure li a:hover{
	box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
	height: 90px;
	width: 92%;
	top: 39px;
	background-image: none!important;
}

/* structure/ section colors */
.structure.dep-a a{background: #8da9ad;}
.structure.dep-b a{background: #8da9ad;}
.structure.dep-c a{background: #8da9ad;}
.structure.dep-d a{background: #8da9ad;}
.structure.dep-e a{background: #8da9ad;}




/*----------------------*/
.icon-round, .icon-md, .icon-square.icon-md, .icon-rounded.icon-md {
    min-width: 92px;
}
.icon-round {
    margin: 0 auto;
    border: 2px solid #53b7bf;
    border-radius: 50%;
    padding: 32px 30px 26px 30px;
    min-width: 80px;
}
.icon-md {
    font-size: 30px!important;
}

section {
	padding:60px 0;
	}
	
.hr-theme {	
 border:none;
	border-bottom: 2px solid #53b7bf;
    width: 25px;}