html , body{
		  overflow-x: hidden;
		  margin: 0
		}
		@font-face {
			font-family: HacenTunisia;
			src: url('../fonts/HacenTunisiaBold.ttf');
			}
		@font-face {
			font-family: HacenTunisia;
			src: url('../fonts/HacenTunisia.ttf');
		}
		/* journalistStory */
			.aBtn{
				outline: none;
			}
			.journalistStory{
				direction: rtl;
				border-top: 1px solid #c5c5c5;
			}
			.journHead{
				font-size: 22px;
				margin-top: 15px;
			}
			.journDiscr{
				direction: rtl;
				font-size: 13px;
				margin-top: 3px;
				margin-bottom: 3px;
			}
			.jourBtn{
				color: #fff;
				background-color: #d9534f;
				border-color: #d43f3a;
				border-radius: 5px;
    		margin-bottom: 15px;
			}
			.jourBtn:hover {
				color: #fff;
				background-color: #c9302c;
				border-color: #ac2925;
		}
		/* journalistStory */
		.arij-logo{
			top: 0;
			margin-top: 6px;
			width: 10%;
			margin-right: 16px;
			position: absolute;
		}
		.show2{
			opacity: 1 !important;
			transform: translateY(0)!important;
		}
		.titlContainer{
			text-align: center;
			opacity: 0;
			transform: translateY(100px);
			transition: all 1s ease-out;
		}
		.titlContainer2{
			text-align: center;
			opacity: 0;
			transform: translateY(100px);
			transition: all 1s ease-out;
		}
		/* mnue */
		.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a{
			box-shadow: inset 0 0px 0px rgba(0,0,0,.075) !important;
		}
		.navbar-default{
			background-image: linear-gradient(to bottom,#fff0 0,#f8f8f800 100%) !important;
			box-shadow: inset 0 0px 0 rgba(255,255,255,.15), 0 0px 0px rgba(0,0,0,.075) !important;
		}
		a {
			color: #c31e1e;
		}
		a:hover{
			color: #3e0808;
			text-decoration-line: none;
		}
		#logo{
			float:right;
			margin-left:0px;
			height: 100%;
		}
		#logo1{
			float:right;
			margin-left:0px;
			height:100%;
		}
		#main_menu{
			height:70px;
		}
		#main_menu.sticky{
			position:fixed;
			top:0;
			height:70px;
		}
		.navbar-default{
			background-color: transparent;
			border-color: transparent;
		}
		#main_menu.sticky .navbar{
			margin:10px 0 0 0;
		}
		#main_menu #menu_con{
			height:100%;
		}
		#main_menu .navbar{
			display:table-cell;
			vertical-align: middle;
		}
		#main_menu .navbar a{
			font-size:16px;
			color:#000;
		}
		.navbar-collapse{
			padding:0px;
		}
		.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
			background:#fff;
			color:#D13636 !important;
		}
		.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
			background:#FFF;
			color:#D13636;
		}
		.dropdown-menu li a{
			line-height:30px;
		}
		.dropdown-menu li a:hover{
			background:#f1f1f1;
		}
		.dropdown-menu {
			border: 1px solid #f1f1f1;
			border-radius: 0px;
			-webkit-box-shadow: 0 0px 0px rgba(0,0,0,.175);
			box-shadow: 0 0px 0px rgba(0,0,0,.175);
		}
		#main_menu{
			border-bottom:0px solid lightgray;
			padding:5px 0;
			-webkit-box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .2);
			box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .2);
			background:#FFF;
			width:100%;
			z-index: 5;
		}
		#main_menu i{
			font-size:20px;
		}

		.main-container .row{
			margin:15px 0px;
		}
		.clear{
			clear:both;
		}
		/* IntroTextsCovers */
		.bkIntro{
			
		}
		.head2{
			text-align: center;
		}
		.title {
			color: #ffffff;
			font-size: 100px;
			text-shadow: 2px 2px #040404;
			font-family: HacenTunisia;
		}
		.tilteSecound{
			color: #ffffff;
			font-size: 38px;
			text-shadow: 2px 2px #040404;
			font-family: HacenTunisia;
		}
		
		.tilteSecound2{
			padding-bottom: 20px;
			color: #1d0808;
			font-size: 24px;
			font-weight: 800;
		}
		.introh-text p span {
			color: #fff;
			font-size: 24px!important;
			text-align: center;
			font-weight: 700;
	}
		.introh{
			position: relative;
			margin: 0 auto;
			width: 100%;
			overflow-x: hidden;
			height: 100vh;
			z-index: 2;
			background-size: cover;
			background-image: url(../images/bk3.jpg);
			background-position: center center;
			background-attachment: fixed;
		}
			.introh-text {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				text-align: center;
				position: absolute;
				bottom: 0;
				top: 0;
				left: 0;
				right: 0;
				z-index: 999;
			}
			.line-spacer {
				width: 45%;
				margin: 0 auto;
				margin-top: 20px;
				margin-bottom: 25px;
				border-bottom: 2px solid #3e0808;
			}
			#author {
				padding-bottom: 85px;
			}
			#sup-title {
				font-size: 16px;
				color: rgb(51, 51, 51);
				font-weight: 700;
				float: right;
			}
			.date2{
				font-size: 16px;
				color: rgb(51, 51, 51);
				font-weight: 700;
				float: left;
			}
		/* SectionTezts */
			.containerTexts{
				margin-left: 20%;
				margin-right: 20%;
			}
			.sectionTexts{
				margin-top: 20px;
				direction: rtl;
				color: #333;
				text-align: right;
				line-height: 29px;
				font-size: 15px;
				font-weight: bold;
			}
			.sectionTextsHead{
				color: #a01e1e;
			}
			.infoChart{
				background-color: #e3e3e35e;
				border-right: 2px solid #a01e1e;
				text-align: right;
				padding-right: 10px;
				margin-top: 7px;
			}
			.headNewText{
				text-align: center;
				font-size: 20px;
				font-weight: bold;
				margin-top: 20px;
				color: #560202;
			}
			.imgPluse{
				margin-left: 5px;
			}
			.Chart1Map{
				width: 100%;
			}
			.Chart2judge{
				width: 100%;
			}
	/* GovernoratesTabs */
		.flex_container{
			display: flex;
			justify-content: space-between ;
			align-items: center;
			flex-direction: row-reverse;
		}
		.Governorates_btn{
			background-color: #d8d8d8;
			color: #747474;
			font-size: 17px;
			font-weight: 700;
			border: transparent;
			width: 20%;
			height: 40px;
			border: 1px solid #a4a4a4;
		}
		.Governorates_btn:hover {
			background-color: #989393;
			color: #fcf4f4;
		}
		.active{
			background-color: #989393;
			color: #fcf4f4;
		}
		.Governorates_btn:focus {
			outline: transparent;
		}
		.responsive-tablet{
			display: none;
		}
		.Governorates_btn .activeb{
			background-color: #989393;
			color: #fcf4f4;
		}
		.activeb{
			background-color: #989393;
			color: #fcf4f4;
		}
	/*Data representation */
		.Discription1{
			float: right;
			width: 50%;
		}
		.Discription2{
			float: left;
			width: 50%;
		}
		.allSection{
			overflow: hidden;
			background-color: #efefef;
		}
		.chartjustice{
			align-items: baseline;
		}
		.hidden{
			display: none;
		}
		.placeholder{
			width: 50%;
			cursor: pointer;
		}
		.Governorates_content{
			border: 1px solid #d4d2d2;
			margin-top: 10px;
		}
		.content-pens{
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			cursor: pointer;
			margin-bottom: 5px;
		}
		.active1 {
			background-color: #d1d1d1;
		}
		.active1 .pin-icon a{
			color: #ef2100;
			font-size: 27px;
		}
		.pin-icon {
			margin-right: 50px;
			margin-left: 10px;
			color: #a1a1a1;
			font-size: 30px;
		}
		.pin-icon a {
			color: #a1a1a1;
		}
		.placeholder_text{
			margin-top: 10px;
			margin-bottom: 10px;
			font-size: 17px;
			font-weight: 800;
			color: #777777;
		}
		.Governorates_names{
			margin-top: 55px;
			text-align: center;
			padding-left: 0px;
		}
		.chartDiscription{
			display: flex;
			flex-direction: column;
			text-align: right;
			margin-top: 35px;
			list-style: none;
			padding-left: 0px;
		}
		.chart-pad{
			padding-right: 80px;
			padding-left: 80px;
		}
		.chrst-top{
			margin-top: 35px;
		}
		.pin-country{
			margin-top: 10px;
			text-align: center;
			display: inline-flex;
		}
		.pin-country_text{
			margin-top: 7px;
			font-size: 22px;
			opacity: .8;
			font-weight: 900;
			color: #777777;
		}
		.pin-country-icon{
			color: #ef2100;
			margin-left: 7px;
			font-size: 30px;
	}
		.number-head{
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
		}
		.nubers{
			color: #d60101;
			font-size: 50px ;
			font-weight: 700;
			padding-left: 12px;
		}
		.nubersDicribiton{
			font-size: 14px;
			font-weight: 800;
			color: #707070;
			margin-top: -13px;
		}
		.number-thousand{
			font-size: 26px;
			color: #707070;
			font-weight: 900;
			display: flex;
			flex-direction: column;
			margin-top: -9px;
			list-style: none;
		}
		.number-thousand2{
					font-size: 19px;
				color: #707070;
				font-weight: 900;
				display: flex;
				flex-direction: column;
				margin-top: 0;
				list-style: none;
		}
		.number-thousand_icon {
			font-size: 38px;
			color: #707070;
			font-weight: 900;
			display: flex;
			flex-direction: column;
			margin-top: 0px;
			list-style: none;
		}
		.number-thousand_li{
			margin-bottom: -9px;
				margin-top: -5px;
		}
		  .chsrt {
			  margin-top: 20px;
			  height: 400px;
		  }
		.percentChart{
			position: absolute;
			top: 53%;
			left: 44%;
			font-size: 19px;
			font-weight: 600;
		}
		/* .cont-precent{
			position: relative;
		} */
		.graidColores{
			position: relative;
			left: 0;
			right: 0;
			margin: auto;
			height: 19px;
			border-radius: 2px;
			background-color: red;
			width: 50%;
			background-image: linear-gradient(to right,#f7a3a4,#f18d8d,#fa4a4a,#f74040,#f12d2d,#d60d0d,#e41010 ,#d60d0d,#c40808, #b80505, #a80909, #700404, #660303);
		}
		.graidColoresContainer{
			margin-top: 34px;
		}
			.graidColores .descrip-text1::after {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -5px;
				border-width: 5px;
				border-style: solid;
				border-color: black transparent transparent transparent;
		}
		.graidColores .descrip-text2::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: black transparent transparent transparent;
	}
	.graidColores .descrip-text1 {
		width: 120px;
    color: #1b0000;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0;
    position: absolute;
    z-index: 1;
    bottom: 140%;
    left: 99%;
    margin-left: -60px;
    opacity: .7;
}
		.graidColores .descrip-text2 {
			width: 120px;
			color: #1b0000;
			text-align: center;
			border-radius: 6px;
			padding: 5px 0;
			position: absolute;
			z-index: 1;
			bottom: 140%;
			left: 1%;
			margin-left: -60px;
			opacity: .7;
			font-size: 15px;
			font-weight: 700;
	}
	.map-percent-text{
		margin-top: 6px;
		margin-bottom: 4px;
		font-size: 14px;
		font-weight: 600;
		color: #68656b;
	}
	/* General classes */
	.top-10 {
		margin-top: 7px;
	}
	.top-50{
		margin-top: 50px;
	}

	.center{
		text-align: center;
	}
	.b-r{
		border-right: 1px solid #d4d2d2;
		background: #f9f9f9;
	}
	#mapsection{
		background-color: #fbf7f7;
	}
	hr{
		margin-top: 7px;
		margin-bottom: 0;
		border: 0;
		width: 100%;
		border-top: 1px solid #a1a1a19e;
	}
	/* more text */
		.more{
			margin-top: 7px;
			background-color: #e3e3e35e;
			border-radius: 3px;
			padding: 7px;
		}
	.morecontent span {
			display: none;
	}
	.morelink {
			display: block;
			color: #a01e1e;
			text-decoration: none;
	}
	.morelink:active{
		color: black;
		text-decoration: none;
		color: #a01e1ecf;
	}
	.morelink:hover{
		color: #a01e1ecf;
		text-decoration: none;
	}
	.morelink:visited{
		color: #a01e1ecf;
		text-decoration: none;
	}
	.morelink:focus{
		color: #a01e1ecf;
		text-decoration: none;

	}
	/* Finals */
		.finalTexts{
			font-size: 14px;
			font-weight: 700;
			color: #a01e1e;
			margin-bottom: 8px
		}
		#finalTextsFo span {
			border-right: 2px solid #a01e1e;
			padding-right: 5px;
			display: block;
			color: #333333;
		}
	/* footer */
		.direction2{
			text-align: center;
			margin-top: 11px;
			margin-bottom: 5px;
		}
		.footerHr {
			margin-top: 15px;
			margin-bottom: 15px;
			border: 0;
			width: 50%;
			border-top: 1px solid #464444;
		}
		.pro{
			margin-right: 10px;
		}
		#copyright {
			background: #1f1f1f;
			color: #fff;
			text-align: right;
			padding-left: 15px;
   		padding-right: 15px;
		}
		#copyright .kuplix {
			font-family: verdana;
			color: #fff;
		}
		#copyright .kuplix a {
			color: #D13636;
		}
		.black {
			background: #000;
			padding-top: 6px;
			padding-bottom: 6px;
		}
	/* responsive */
	@media screen and (max-width: 767px) and (min-width: 480px) {
		
		.containerTexts{
			margin-left: 15px;
			margin-right: 15px;
		}
		/* GovernoratesTabs */
			.pin-country{
				display: none;
			}
			.flex_container{
				display: none;
			}
			.responsive-tablet{
				display: flex;
				flex-direction: column;
			}
			.Governorates_btn {
				border-radius: 1px;
				width: 100%;
			}
			.responsive-tablet-prop{
				display: flex;
				flex-direction: row-reverse;
				width: 100%;
			}
			.Governorates_btn  .activeb{
				background-color: #989393;
				color: #fcf4f4;
			}
			.activeb{
				background-color: #989393;
				color: #fcf4f4;
			}

			.active  .colr-resp{
				background-color: #c30000;
			}
			.colr-resp{
				background-color: #bcbcbc;
			}
			.active {
				background-color: #989393;
				color: #fcf4f4;
			}

		/*Data representation */
			.allSection {
				background-color: white;
			}
			.content-pens {
				flex-direction: row-reverse;
			}
			.pin-icon {
				font-size: 40px;
				margin-left: 0;
				margin-right: 0;
			}
			.placeholder_text {
				font-size: 22px;
				margin-top: 0px;
				margin-bottom: 0px;
				padding-right: 10px;
			}
			.active1 {
				background-color: transparent;
			}
			.active1 .pin-icon{
				font-size: 41px;
			}
			.nubers {
				font-size: 45px;
			}
			.number-thousand {
				font-size: 24px;
			}.nubersDicribiton {
				font-size: 15px;
			}
			.number-thousand_icon {
				font-size: 32px;
			}
			.b-r {
				border-right: none;
				background: transparent;
			}
			.reverse-col{
				display: flex;
				flex-direction: column-reverse;
			}
			.chartDiscription {
				margin-top: 35px;
				margin-bottom: 35px;
				align-items: center;
				padding-left: 0;
			}
			.chart-pad {
				padding-right: 20px;
				padding-left: 20px;
			}
			.percent-discription{
				display: none;
			}
			.Governorates_names {
				display: flex;
				justify-content: space-evenly;
			}
			.placeholder {
				width: 100%;
			}
			.chrst-top {
				margin-right: 0;
				margin-left: 0;
				margin-bottom: 100px;
			}
			.graidColoresContainer {
				margin-top: 55px;
			}
	}

	@media screen and (max-width: 480px) {
		#sup-title{
			float: none;
		}
		.date2{
			float: none;
		}
		#author{
			text-align: right;
    		padding-bottom: 0;
		}
		.title{
			font-size: 43px;
		}
		.tilteSecound{
			font-size: 20px;
		}
		.tilteSecound2 {
			font-size: 16px;
		}
		.introh{
			background-attachment: initial;
		}
		.arij-logo {
			top: 0;
			margin-top: 6px;
			width: 32%;
			margin-right: 0;
			position: absolute;
		}
		.containerTexts{
			margin-left: 15px;
			margin-right: 15px;
		}
		.allSection {
			background-color: white;
		}
		.Governorates_btn {
			width: 100%;
			text-shadow: none;
			border: 1px solid #ffffff;
			background-color: #dad7d7;
		}
		.Governorates_btn:hover {
			font-size: 21px;
		}
		.Governorates_content {
			border: none;
		}
		.Governorates_names {
			padding-right: 0;
			display: flex;
			justify-content: space-evenly;
		}
		.b-r {
			border-right: none;
			background: transparent;
		}
		.active {
			font-size: 21px;
		}
		.active1 {
			background-color: transparent;
		}
		.chart-pad {
			padding-right: 0;
			padding-left: 0;
		}
		.chrst-top {
			margin-right: 0;
			margin-left: 0;
		}
		.chartDiscription {
			align-items: center;
			padding-left: 0px;
			margin-bottom: 75px;
		}
		.nubers {
			font-size: 49px;
		}
		.number-thousand {
			font-size: 25px;
		}
		.number-thousand_li {
			margin-bottom: -9px;
			margin-top: -5px;
		}
		.pin-icon {
			margin-right: 0;
			margin-left: 10px;
			font-size: 30;
		}
		.placeholder_text {
			margin-top: 0;
			margin-left: 0;
			font-size: 17;
		}
		.content-pens {
			flex-direction: row-reverse;
		}
		.active1 .pin-icon{
			font-size: 29px;
		}
		/* GovernoratesTabs */

		.flex_container{
			flex-direction: column;
		}
		.nubersDicribiton {
			font-size: 20px;
			margin-top: -7px;
		}
		.reverse-col{
			display: flex;
			flex-direction: column-reverse;
		}
		.chartDiscription {
			margin-top: 35px;
			margin-bottom: 35px;
			align-items: center;
			padding-left: 0;
		}
		.placeholder {
			width: 100%;
		}
		.chrst-top {
			margin-right: 0;
			margin-left: 0;
		}
		.active{
			background-color: #777171;
			color: #fcf4f4;
		}
		.Discription2{
			display: none;
		}
		.Discription1 {
			float: unset;
			width: 100%;
		}
		.graidColoresContainer {
			margin-top: 45px;
		}
		.graidColores{
			height: 16px;
		}
		#mapsection {
			padding-top: 15px;
		}
		.pin-country{
			display: none;
		}
	}

	/* svg style */
	  svg {
		font: 10px sans-serif;
	  }

	  #map {
		float: left;
	  }

	  path.land {
		fill: GhostWhite;
	  }

	  path.ocean {
		  fill: #efeeee;
	  }

	  path.river {
		fill: none;
		stroke: efeeee;
	  }

	  path.governate {
		fill: #ccc;
		stroke: white;
		cursor: pointer;
	  }

	  path.governate.selected {
		fill-opacity: .9;
	  }

	  path.governate.pinned {
		fill: YellowGreen;
		fill-opacity: .75;
	  }


	  .test + .tooltip > .tooltip-inner {
		  background-color: #73AD21;
		  color: #FFFFFF;
		  border: 1px solid green;
		  padding: 15px;
		  font-size: 20px;
	  }


	#alex:hover,
	 #cairo:hover,
	  #suways:hover,
		#northsina:hover,
		 #southsina:hover,
		  #kafr:hover,
		   #aswan:hover,
			#luxor:hover,
			 #ismailiya:hover,
			  #alwadi-aljaded:hover,
			   #suhaj:hover,
				#alminya:hover,
				 #matruh:hover,
				  #aldahalqeh:hover,
				   #jizah:hover,
					#alex:hover,
					 #algharbeh:hover,
					  #almunfeh:hover,
					   #albuhirah:hover,
						#alfayum:hover,
						 #swayef:hover,
						  #redsea:hover,
						   #almunfeh:hover,
							#alsharqeh:hover,
							 #aswan:hover,
							  #asyut:hover,
							   #qina:hover,
								#dumyat:hover,
								 #alqalobeh:hover,
								  #saeed:hover{fill: red;
											   opacity: 0.6;
								  }

	#dumyat {
	  fill: #660303;
	}
	#aswan{
	  fill: #700404;
	}
	#alsharqeh{
	  fill: #830808;
	}
	#ismailiya{
	  fill: #970606;
	}
	#alqalobeh{
	fill: #a80909;
	}
	#cairo , #northsina{
	  fill: #b80505;
	}

	#southsina , #swayef{
	  fill: #c40808;
	}
	#albuhirah{
	  fill: #d60d0d;
	}
	#kafr{
	  fill: #e41010;
	}
	#alfayum{
	  fill: #f01c1c;
	}
	#almunfeh ,#alminya , #asyut{
	  fill: #f12d2d;
	}
	#alex{
	  fill: #f74040;
	}
	#suhaj{
	  fill: #fa4a4a;
	}
	#jizah , #suways{
	  fill: #ff5959;
	}
	#matruh{
	  fill: #d86464;
	}
	#luxor{
	  fill: #f18d8d;
	}
	#qina{
	  fill: #ef7172;
	}
	#redsea{
	  fill: #f1797a;
	}
	#saeed{
	  fill: #f27c7c;
	}
	#aldahalqeh{
	  fill: #ff8d8d;
	}
	#algharbeh{
	  fill: #f7a3a4;
	}
	#alwadi-aljaded{
	  fill: #fca3a3;
	}
	svg {
	max-width: 100% !important;
	height: auto;
	}


	.heyo:hover {
	  -moz-transition: 0.3s;
	  -o-transition: 0.3s;
	  -webkit-transition: 0.3s;
	  transition: 0.3s;
	}

	.enabled {
	  stroke:white;
	  cursor: pointer;
	}

	.description {
	  pointer-events: none;
	  position: absolute;
	  font-size: 18px;
	  text-align: center;
	  background: white;
	  padding: 0 15px;
	  z-index: 5;
	  height: 30px;
	  line-height: 30px;
	  margin: 0 auto;
	  color: #980303;
	  border-radius: 5px;
	  box-shadow: 0 0 0 1px #eee;
	  -moz-transform: translateX(-50%);
	  -ms-transform: translateX(-50%);
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	  display: none;
	}
	.description.active {
	  display: block;
	}
	.description:after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  top: 100%;
	  width: 0;
	  height: 0;
	  margin-left: -10px;
	  border-left: 10px solid transparent;
	  border-right: 10px solid transparent;
	  border-top: 10px solid white;
	}


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

	.heyo1:hover {
	  -moz-transition: 0.3s;
	  -o-transition: 0.3s;
	  -webkit-transition: 0.3s;
	  transition: 0.3s;
	}

	.enabled1 {
	  stroke:white;
	  cursor: pointer;
	}

	.description1 {
	  pointer-events: none;
	  position: absolute;
	  font-size: 18px;
	  text-align: center;
	  background: white;
	  padding: 0px 15px;
	  z-index: 5;
	  height: 50px;
	  line-height: 30px;
	  margin: 0 auto;
	  color: #980303;
	  border-radius: 5px;
	  box-shadow: 0 0 0 1px #eee;
	  -moz-transform: translateX(-50%);
	  -ms-transform: translateX(-50%);
	  -webkit-transform: translateX(-50%);
	  transform: translateX(-50%);
	  display: none;
	}
	.description1.active {
	  display: block;
	}
	.description1:after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  top: 100%;
	  width: 0;
	  height: 0;
	  margin-left: -10px;
	  border-left: 10px solid transparent;
	  border-right: 10px solid transparent;
	  border-top: 10px solid white;
	}

	@media screen and (max-width: 767px) {
.navbar-default .navbar-collapse{
	background-color: #F8F8F8;
    position: absolute;
    top: 100%;
    padding: 10px;
    z-index: 500;
    left: 0;
    border: 1px solid #eaeaea;
		width: 250px;

}
.navbar-toggle{
	margin-top: 25%!important;
}
.reverse1{
	display: flex;
	flex-direction: column-reverse;
}
	}

.caret{

	margin-right: 4px!important;
}