@charset "utf-8";


	@import url("http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css");
      @import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
	
	*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
	
	
body { 

  font-family:'Lato';
  direction:rtl;
}



#header img{
	background-size:cover;
	width : 100%;
	 max-width: 100%;
	
  
}

	
	.textAlign{
		text-align:center;
		}
		
		
		#triangle-down {
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 100px solid #FFD100;
	margin: 0 auto;
	position:relative;
	top: -45px;
}
	
		
		
			span{
			font-family: 'Droid Arabic Naskh', sans-serif;
			 }
		
		.bgColor {
	 background: #FFD100; /* For browsers that do not support gradients */
	width:100%;
	max-width: 100%;
	

	}
	 
	 .bgColor h2{
	font-family:'Droid Arabic Naskh', sans-serif;
	padding: 40px;
	color : #323536;
	margin-top:0;
	 height: auto;
	 font-size:18px;
	 margin-top: -5px
	
	}
		
		
		
		.bgColor img { border: 1px solid #FF0000;
	border-radius: 4px;
	width: 30px;
	height: 30px;
	padding: 5px;
	margin-top: 14px;
	line-height:0;
	margin-bottom: -10px;
		}
		
		
		#text {
    padding: 90px 100px  50px  100px;
    line-height: 2em;
    font-family: 'Droid Arabic Naskh', sans-serif;
    font-size: 13px;
}
		
.heading-primary {
  font-size:2em;
  padding:2em;
  text-align:center;
}
.accordion dl,
.accordion-list {
   border:1px solid #ddd;
}
   &:after {
       content: "";
       display:block;
       height:1em;
       width:100%;
       background-color:darken(#38cc70, 10%);
     }



.accordion dd,
.accordion__panel {
   background-color:#eee;
   font-size:1em;
   line-height:1.5em; 
}






 .grid_3 h4  {
	color :  #323536;
	text-align:center;
	padding: 5px;
	border : 1px solid #323536;
	margin: 10px;}
	
	
	
	 .grid_4 h4  {
	color : #323536;
	text-align:center;
	padding: 5px;
	border : 1px solid #323536;
	margin: 10px;}
	
	
	 h4:hover {
		background-color:#e0ebeb;
		box-shadow: 0 10px 6px -6px grey;
		
	 }

.accordion {
    position:relative;
    background-color:#eee;
}
.bg{
 background-color:#f2f2f2; 
	padding-bottom: 20px;
	}
	
	
.container {
  max-width:960px;
  margin:0 auto;
  padding:8em 0 5em 0;
 
 
  
}

.header {
  max-width:960px;
  margin:0 auto;
background-color: #737373;
text-align: center;
   padding:0.7em 0 ;
    font-family: 'Droid Arabic Naskh', sans-serif;
    font-size: 0.9em;
	color:#F8F8F8;
	 
}

.behinde{ background-color:#e0ebeb;
margin-top:-100px;
}


.accordionTitle,
.accordion__Heading {
font-family: 'Droid Arabic Naskh', sans-serif;
 background-color:#38cc70; 
   text-align:center;
     font-weight:700;
	 font-size:0.8em; 
          padding:1em;
          display:block;
          text-decoration:none;
          color:#fff;
          transition:background-color 0.5s ease-in-out;
		 /* border-bottom: 2px inset #38cc70; */  
 
}
  &:before {
   content: "+";
   font-size:1.5em;
   line-height:0.5em;
   float:left; 
   transition: transform 0.3s ease-in-out;
  }
 .dir{
	 direction:ltr;}

.accordionTitleActive, 
.accordionTitle.is-expanded {
   background-color:darken(#38cc70, 10%);
}
    &:before {
     
      transform:rotate(-225deg);
    }

.accordionItem {
    height:auto;
    overflow:hidden; 
    //SHAME: magic number to allow the accordion to animate
    
     max-height:50em;
    transition:max-height 1s;   
 
   
    
   
}
 
.accordionItem.is-collapsed {
    max-height:0;
}
.no-js .accordionItem.is-collapsed {
  max-height: auto;
}
.animateIn {
     animation: accordionIn 0.45s normal ease-in-out both 1; 
}
.animateOut {
     animation: accordionOut 0.45s alternate ease-in-out both 1;
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform:scale(0.9) rotateX(-60deg);
    transform-origin: 50% 0;
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes accordionOut {
    0% {
       opacity: 1;
       transform:scale(1);
     }
     100% {
          opacity:0;
           transform:scale(0.9) rotateX(-60deg);
       }
}


.footer{
	width: 100%;
	max-width:100%;
	background-color:#1F3747;
	
	}
	
	.footer h3 , h5{
			font-family:'Droid Arabic Naskh', sans-serif;
		padding-top: 10px;
		 }
		
		.footer  h5{
			
		padding-bottom: 5px;
		 }
		
		.footer h3 {
		color : #FFD100 ;
		 }
		 
		 .txtcolor{
			 color : #FFD100 ;}

.footer h5{
		color : #fff;
		 }
	
	.bg1{
		background-color:#595959;}
		.bg2{
		background-color:#666666;}
		.bg3{
		background-color:#737373;}
		.bg4{
		background-color:#808080;}
		.bg5{
		background-color:#8c8c8c;}
		.bg6{
		background-color:#999999;}
		.bg7{
		background-color:#a6a6a6;}
		.bg8{
		background-color:#b3b3b3;}
		.bg9{
		background-color:#bfbfbf;
		border-bottom:none;}
		
		.row{
	background-color: #eee;
	padding-bottom:20px;
	padding-top:20px;}
 
    @media screen and (min-width:480px) {
	.wrapper_960 {
  max-width: 480px;
  width:100%;
  margin: 0 auto;
	}
	
	 .wrapper_960 .grid_1 {
  width: 16.6666%;
}
.wrapper_960 .grid_2 {
  width: 30.3333%;
}
.wrapper_960 .grid_3 {
  width: 45%;
  
}
.wrapper_960 .grid_4 {
  width: 66.6666%
}
.wrapper_960 .grid_5 {
  width: 41.6666%;
}
.wrapper_960 .grid_6 {
  width: 100%;
}

.wrapper_960 .grid_1, .wrapper_960 .grid_2, .wrapper_960 .grid_3, .wrapper_960 .grid_4, .wrapper_960 .grid_5 {
	margin: 0 10px;
	float: left;
	display: block;
}

.row::after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
	
}
	
    }

@media screen and (min-width:768px){
.wrapper_960 {
  max-width: 768px;
  width:100%;
  margin-right: auto;
  margin-left: auto;
  
}

 .wrapper_960 .grid_1 {
  width: 8.3333%;
}
.wrapper_960 .grid_2 {
  width: 16.6666%;
}
.wrapper_960 .grid_3 {
  width: 22%;
  
}
.wrapper_960 .grid_4 {
  width: 30.3333%;
}
.wrapper_960 .grid_5 {
  width: 41.6666%;
}
.wrapper_960 .grid_6 {
  width: 50%;
}
.wrapper_960 .grid_7 {
  width: 58.3333%;
}
.wrapper_960 .grid_8 {
  width: 66.6666%;
}
.wrapper_960 .grid_9 {
  width: 75%;
}
.wrapper_960 .grid_10 {
  width: 83.3333%;
}
.wrapper_960 .grid_11 {
  width: 91.6666%;
}
.wrapper_960 .grid_12 {
  width: 100%;
}
.wrapper_960 .grid_1, .wrapper_960 .grid_2, .wrapper_960 .grid_3, .wrapper_960 .grid_4, .wrapper_960 .grid_5, .wrapper_960 .grid_6, .wrapper_960 .grid_7, .wrapper_960 .grid_8, .wrapper_960 .grid_9, .wrapper_960 .grid_10, .wrapper_960 .grid_11, .wrapper_960 .grid_12 {
	margin: 0 10px;
	float: left;
	display: block;
}

.row::after {
    content: "";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
	
}