*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Cairo', sans-serif;
	overflow-x: hidden;
}
.clear{
    clear: both;
}
li{
    list-style: none;
}
section{
	padding-top: 5%;
}
p{
    line-height: 1.8;
    color: dimgrey !important;
}
.c{
	perspective: 1000px;
}
/*start nav*/
nav{
	direction: ltr !important;
	margin-bottom: 0 !important;
	position: fixed !important;
	width: 100%;
	z-index: 10000;
}
.navbar-nav{
	margin-top: 2%;
}
.navbar{
    width: 100%;
	height: 100px;
}
.navbar-brand>img{
	height: 50px;
	    margin-top: 5%;
}
.navbar-default .navbar-nav>li>a{
	font-size: 1.5em;
}
.on{
	position: relative!important;
	top:100px;
	width: 98%;
	z-index: 10000;
	margin-left: 2%;
	animation-name: example;
    animation-duration: .5s;
	animation-fill-mode: forwards;
}
.navbar-nav>li>.dropdown-menu{
	z-index: 10000;
}
@keyframes example {
    0% {
		transform:rotateX(0deg);
    	backface-visibility: visible;
	}
    25% {
		transform:rotateX(-60deg);
		transform-origin: top;
    	backface-visibility: visible;
	}
    50% {
		transform:rotateX(-120deg);
		transform-origin: top;
    	backface-visibility: visible;
	}
    100% {
		transform:rotateX(-180deg);
		transform-origin: top;
    	backface-visibility: hidden;
	}
}
.dropdown-menu>li>a {
    padding: 8px 20px;
}
/*nav end*/
/*start slider*/
.ss{
	padding: 0;
	margin: 0;
	padding-bottom: 2%;
	position: relative;
	top:100px;
}
.da-slider{
	width: 100%;
	height: 500px;
	position: relative;
	margin: 0;
	overflow: hidden;
	background: transparent url(../image/back.jpg) no-repeat 0% 0%;
	background-size: 100% 100%;
	border-top: 8px solid #2998ff;
	border-bottom: 8px solid #2998ff;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
	-webkit-transition: background-position 1s ease-out 0.3s;
	-moz-transition: background-position 1s ease-out 0.3s;
	-o-transition: background-position 1s ease-out 0.3s;
	-ms-transition: background-position 1s ease-out 0.3s;
	transition: background-position 1s ease-out 0.3s;
}
.da-slide{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.da-slide-current{
	z-index: 1000;
}
.da-slider-fb .da-slide{
	left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
	left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-link,
.da-slide .da-img{
	position: absolute;
	opacity: 0;
	left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p,
.da-slider-fb .da-slide .da-link{
	left: 10%;
	opacity: 1;
}
.da-slider-fb .da-slide .da-img{
	left: 60%;
	opacity: 1;
}
.da-slide h2{
	color: #fff;
	font-size: 35px;
	width: 50%;
	top: 60px;
	white-space: nowrap;
	z-index: 10;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.da-slide p{
	width: 45%;
	top: 155px;
	color: black;
	font-size: 18px;
	line-height: 26px;
	height: 80px;
	overflow: hidden;
}
.da-slide .da-img{
	text-align: center;
	width: 35% !important;
	top: 70px;
	height: 450px;
	line-height: 320px;
	left: 110%; /*60%*/
}
.da-slide .da-img img{
	width: 100%;
	height: 60%;
}
.da-slide .da-link{
	top: 270px; /*depends on p height*/
	border-radius: 30px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	color: black;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	border: 5px solid #2998ff;
	padding: 5px 20px 5px;
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	background: rgba(255,255,255,0.2);
}
.da-slide .da-link:hover{
	background: rgba(255,255,255,0.3);
}
.da-dots{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: 80px;
	z-index: 2000;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-dots span{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #2998ff;
	margin: 3px;
	cursor: pointer;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
	-moz-user-select: none;
	-webkit-user-select: none;
}
.da-arrows span{
	position: absolute;
	top: 50%;
	height: 30px;
	width: 30px;
	border-radius: 50%;
	background: #2998ff;
	cursor: pointer;
	z-index: 2000;
	opacity: 0;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1) inset, 
		1px 1px 1px rgba(255,255,255,0.1);
	-webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
	-moz-transition: opacity 0.4s ease-in-out-out 0.2s;
	-o-transition: opacity 0.4s ease-in-out-out 0.2s;
	-ms-transition: opacity 0.4s ease-in-out-out 0.2s;
	transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
	opacity: 1;
}
.da-arrows span:after{
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 5px;
	background: transparent url(../image/arrows.png) no-repeat top left;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
	box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
	background-position: top right;
}
.da-arrows span.da-arrows-prev{
	left: 15px;
}
.da-arrows span.da-arrows-next{
	right: 15px;
}
.da-slide-current h2,
.da-slide-current p,
.da-slide-current .da-link{
	left: 10%;
	opacity: 1;
}
.da-slide-current .da-img{
	left: 60%;
	opacity: 1;
}
/* Animation classes and animations */
/* Slide in from the right*/
.da-slide-fromright h2{
	-webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
	-webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-link{
	-webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	-ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
	animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromright .da-img{
	-webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	-ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
	animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@-moz-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@-o-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@-ms-keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@keyframes fromRightAnim1{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
	0%{ left: 110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
	0%{ left: 110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
/* Slide in from the left*/
.da-slide-fromleft h2{
	-webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
	-webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft .da-link{
	-webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	-ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
	animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
}
.da-slide-fromleft .da-img{
	-webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	-ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
	animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@-o-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
@keyframes fromLeftAnim1{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim2{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim3{
	0%{ left: -110%; opacity: 0; }
	1%{ left: 10%; opacity: 0; }
	100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim4{
	0%{ left: -110%; opacity: 0; }
	100%{ left: 60%; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
	-webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	-ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
	animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
	-webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
	animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toright .da-link{
	-webkit-animation: toRightAnim3 0.4s ease-in-out both;
	-moz-animation: toRightAnim3 0.4s ease-in-out both;
	-o-animation: toRightAnim3 0.4s ease-in-out both;
	-ms-animation: toRightAnim3 0.4s ease-in-out both;
	animation: toRightAnim3 0.4s ease-in-out both;
}
.da-slide-toright .da-img{
	-webkit-animation: toRightAnim4 0.6s ease-in-out both;
	-moz-animation: toRightAnim4 0.6s ease-in-out both;
	-o-animation: toRightAnim4 0.6s ease-in-out both;
	-ms-animation: toRightAnim4 0.6s ease-in-out both;
	animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim1{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
	0%{ left: 10%;  opacity: 1; }
	99%{ left: 10%; opacity: 0; }
	100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
	0%{ left: 60%;  opacity: 1; }
	30%{ left: 55%;  opacity: 1; }
	100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
	-webkit-animation: toLeftAnim1 0.6s ease-in-out both;
	-moz-animation: toLeftAnim1 0.6s ease-in-out both;
	-o-animation: toLeftAnim1 0.6s ease-in-out both;
	-ms-animation: toLeftAnim1 0.6s ease-in-out both;
	animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
	-webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	-ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
	animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-link{
	-webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	-ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
	animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
}
.da-slide-toleft .da-img{
	-webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	-ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
	animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim1{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
	0%{ left: 10%;  opacity: 1; }
	30%{ left: 15%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
	0%{ left: 10%;  opacity: 1; }
	100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
	0%{ left: 60%;  opacity: 1; }
	70%{ left: 30%;  opacity: 0; }
	100%{ left: -50%; opacity: 0; }
}
/*end slider*/
/*end slider*/
/* underline style*/
.head-line{
	margin-bottom: 20px;
    position: relative;
}
.head-long{
    display: inline-block;
    width: 76px;
    height: 3px;
    background-color:  #4cc2c0;
    border-radius: 10px;
    position: relative;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
.head-short{
    display: inline-block;
    width: 30px;
    height: 3px;
    background-color:  #4cc2c0;
    border-radius: 10px;
    position: relative;
    margin-right: 10px;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
/*end underline style*/
/*start about*/
.about{
    margin-top: 4%;
}
.about img {
    width: 100%;
    height: 300px;
	box-shadow: 10px 10px 5px grey;
}
.about p {
    line-height: 1.8;
}
/*end about*/
/*start services*/
.services{
	
}
.services .service h5 {
    width: 72%;
    line-height: 1.4;
    height: 66px;
    float: left;
    padding-top: 3%;
    color: black;
    text-align: right;
}
.services .service {
    margin-bottom: 3%;
}
.services .service img {
    height: 100px;
}
.services .details {
    margin-top: 3%;
}
.services .service a,
.news .latest a{
    text-decoration: none;
}
.services .service p {
    color: darkgray;
    line-height: 1.8;
}
.last_news{
    margin: auto;
}
.news .latest {
    background: #f7f9f9;
    padding: 3%;
    transition: all 0.5s;
    max-width: 31%;
    margin-left: 2%;
    border-radius: 5px;
    margin-bottom: 3%;
}
.news .latest:hover{
    background:  #4cc2c0;
}
.news .latest img {
    width: 100%;
    height: 220px;
    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.3);
    margin-bottom: 8%;
}

.news .details {
    margin-top: 3%;
}
.news .latest h5 {
    color: black;
}
.last_news .lnews{
    margin: 0;
    padding: 0;
}
.last_news .lnews .col {
    text-align: center;
    padding: 3%;
    height: 77px;
    border: 2px solid lightgrey;
}
.last_news .lnews .col:hover{
    border-left: 6px solid #4cc2c0;
}
.last_news .tech img {
    width: 100%;
    height: 240px;
}
.blogs{
    margin-top: 3%;
}
.blogs a {
    text-decoration: none;
}
.blogs a .num{
    display: inline-block;
    width: 15%;
    height: 64px;
    background:  #4cc2c0;
    color: white;
    text-align: center;
    padding-top: 1%;
}
.blogs a h4 {
    display: inline-block;
}
.panel-heading{
    padding: 0 !important;
}
.blogs a span:first-child{
        font-size: 18px;
    display: block;
    margin: 10px;
}
 .blog-pic img  {
    width: 100%;
    height: 400px;
}
 .blog-pic {
    position: relative;
} .blog-pic .date {
    position: absolute;
    top: 0;
    width: 12%;
    height: 55px;
    background:  #4cc2c0;
    color: white;
    border-radius: 5px;
    text-align: center;
    line-height: 1.2;
    padding-top: 1%;
}
.blogs .panel-body a{
    	border-radius: 30px;
    text-decoration: none;
    display: block;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	color: black;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	border: 5px solid #4cc2c0;
/*	padding: 9px;*/
	font-size: 18px;
    margin-top: 2%;
    margin-bottom: 2%;
       width: 18%;
    height: 38px;
/*	line-height: 30px;*/
	text-align: center;
	background: rgba(255,255,255,0.2);
}
 .blog-pic .caption {
    bottom: 5%;
    padding-right: 3%;
    position: absolute;
}
 .blog-pic img {
    border-radius: 4px;
}
 .blog-pic .caption a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 23px;
}
 .blog-pic .date span:first-child{
    font-size: 22px;
    display: block;
}
footer{
    background-color: #f8f8f8;
    padding-top: 2%;
    padding-bottom: 2%;
/*    text-align: center;*/
    margin-top: 3%;
}
footer img {
    height: 50px;
}
footer p {
    color: grey;
}
footer a {
    text-decoration: none;
    color: #4cc2c0;
    padding-top: 2%;
    font-size: 18px;
    letter-spacing: 1;
    
}
footer .part2 li a  {
    text-decoration: none;
    color: #4cc2c0;
  
}
footer .part2 {
        width: 79%;
    margin: auto;
}
footer .part2 hr {
    border-top: 1px solid #d3d1d1;
}
footer .part3 {
    line-height: 2;
}
footer .part3 a {
    text-decoration: none;
}
footer .part3 .social a {
        display: inline-block;
    background-color: #4cc2c0;
    color: grey;
    font-size: 20px;
    padding: 0 2%;
    margin-left: 2%;
    border-radius: 5px;
        margin-top: 5%;
}
footer .part3 .links a {
    display: inline-block;
    margin-left: 3%;
}
footer h2 {
    color:#4cc2c0; 
}



/*all news page */
.all_news{
    padding-top: 8%;
}
.all_news li {
    list-style: none;
    display: inline-block;
    margin-right: 1%;
    background-color: #4cc2c0;
    padding: 7px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 3px;
}
#Container .mix{
	display: none;
}
/*contact page */
.contact{
    padding-top: 8%;
}
.form-control{
    width: 46%;
    display: inline-block;
    margin-bottom: 1%;
    margin-left: 2%;
}
.contact textarea {
    width: 94.5%;
resize: none;}
.contact .contact-us{
    padding-top: 9%;
}
.contact p {
    font-size: 14px;
    font-weight: bold;
    color: grey;
}
.contact li {
    line-height: 1.9;
    color: grey;
    font-size: 18px;
    
}
.contact a {
    height: 32px;
    display: inline-block;
    color: white;
background-color: #4cc2c0;
    padding: 0% 3%;
    margin-left: 1%;
    font-size: 18px;
    margin-top: 2%;
}

.only_new .details img {
    width: 100%;
    height: 300px;
    margin: 1% auto;
    background-color: #f8f8f8;
    box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.3);
}
.only_new .details a {
    width: 30%;
    display: block;
    background-color: #4cc2c0;
    padding: 1%;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    margin: 4% auto;
}
.only_new .details {
    width: 100%;
    margin: 2% auto;
	    line-height: 2;
    font-size: 18px;
}
.slidder{
    direction: ltr;
    margin-top: 3%;
    margin-bottom: 4%;
}

.owl-carousel .owl-item img {
 	width: 70%;
	border-radius: 4px;
	height: 140px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background-color:  #4cc2c0;
}
.all_blogs{
    padding-top: 10%;
    
}
.all_blogs .title {
        height:68px;
    background-color: #f5f5f5;
    border-color:2px solid #ddd;
    
}
.all_blogs .details{
  border:2px solid #ddd;
      height: 200px;
    margin-top: 4%;
}
.all_blogs .time{
    background-color: #4cc2c0;
      height: 100%;
    font-size: 20px;
        padding-top: 1%;
    text-align: center;
}
.all_blogs .time span {
    display: block;
    color: white;
}
.all_blogs a{
    text-decoration: none;
    font-size: 18px;
    display: block;
    padding-top:6%;
    color: black;
    width: 100%;
}
.all_blogs .title_blog{
    height: 68px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 3%;
}
.all_blogs .details {
/*        padding: 0 3%;*/
    text-align: center;
}
.all_blogs .date {
    width: 9%;
    height: 65px;

}