@charset "UTF-8";

/* CSS Document Customize */

/* 
    Author : CoolCoder@khamsat
    Theme Name : ZWeb Theme
    Description : ZWeb, Portofolio HTML Template Based On Bootstrap, HTML5, CSS3, And Jquery
    Tags : ZWeb, portofolio, theme, html5, css3, bootstrap, jquery 
    Version : 1.0
*/

/* ------------------------------------------ */
/*             CSS General Rules
/* ------------------------------------------ */

/** 01- General Styles **/

@font-face {
  font-family: 'kab';
  src: url('fonts/kab/khalid-art-bold.eot');
  src: url('fonts/kab/khalid-art-bold.woff2') format('woff2'),
       url('fonts/kab/khalid-art-bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'NeoSansW';
  src: url('fonts/ns/NeoSansW23-Medium.eot?#iefix') format('embedded-opentype'),
       url('fonts/ns/NeoSansW23-Medium.woff') format('woff'),
       url('fonts/ns/NeoSansW23-Medium.ttf')  format('truetype'),
       url('fonts/ns/NeoSansW23-Medium.svg#NeoSansW23-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

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

* {padding: 0;margin:0;}

/** {padding: 0;margin: 0; box-sizing: border-box;-webkit-box-sizing: border-box;-o-box-sizing: border-box;-moz-box-sizing: border-box;}*/

body {-webkit-font-smoothing:antialiased;font-size: 16px; font-family: NeoSansW;background: url(../images/bg.jpg) repeat center center; }
.h1, .h2, .h3, h1, h2, h3 {margin: 0;padding: 0;font-weight: 600;}
p {margin: 0;padding: 0;}
a:hover, a:focus {text-decoration: none;}
hr {border-color: #ddd;margin-top: 35px;margin-bottom: 35px;}
button {border: none; cursor: pointer}
li {list-style: none;}

::-moz-selection {
	background: #ed8a3f;
	color: #fff;
}
::selection {
	background: #ed8a3f;
	color: #fff;
}

/* - Loading Layer (JS Plugin) */

.loading-layer {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999999;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1);
}

.loader {
  font-size: 15px;
  margin: 100px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
	background: url(../images/loader.gif) no-repeat center center;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

/* 1- Scroll To Top/Bottom Link (JS Plugin) */

.up {
	position: fixed;
	right: 30px;
	bottom: -200px;
	z-index: 9999;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
}

.up a {
	display: block;
	background: rgba(255,255,255,.7);
	color: #444;
	box-shadow: 0 0 3px 0 #444;	
	width: 50px;
	height: 50px;
	border-radius: 8%;
	text-align: center;
	font-size: 1.5em;	
	position: relative;
	overflow: hidden;
}

.up a:hover {background: #444;color: #eee;box-shadow: 0 0 1px 0 #444;}

.up a span {position: absolute;width: 100%;height: 100%;}

.up a .fa-angle-up {bottom: -13px;right: 0;}

.up a .fa-angle-down {top: 13px;right: 0;}

.up a:hover span.fa-angle-up {
	animation: up 1s 1 ease normal;
	-webkit-animation: up 1s 1 ease normal;
	-moz-animation: up 1s 1 ease normal;
	-o-animation: up 1s 1 ease normal;
}

.up a:hover span.fa-angle-down {
	animation: down 1s 1 ease normal;
	-webkit-animation: down 1s 1 ease normal;
	-moz-animation: down 1s 1 ease normal;
	-o-animation: down 1s 1 ease normal;
}

.up {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.up:hover {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;  	
}

/** - KeyFrames **/

@keyframes up {

	49% {
		bottom: 100px;
	}

	50% {
		opacity: 0;
		bottom: -40px;
	}

	100% {
		opacity: 1;
		bottom: -13px;
	}

}

@keyframes down {

	49% {
		top: 100px;
	}

	50% {
		opacity: 0;
		top: -40px;
	}

	100% {
		opacity: 1;
		top: 13px;
	}

}

@-webkit-keyframes down {

	49% {
		top: 100px;
	}

	50% {
		opacity: 0;
		top: -40px;
	}

	100% {
		opacity: 1;
		top: 13px;
	}

}

/* Buzz Out */

@-webkit-keyframes hvr-buzz-out {
  10% {-webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg);}

  20% {-webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg);}

  30% {-webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg);}

  40% {-webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg);}

  50% {-webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg);}

  60% {-webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg);}

  70% {-webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg);}

  80% {-webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg);}

  90% {-webkit-transform: translateX(1px) rotate(0);transform: translateX(1px) rotate(0);}

  100% {-webkit-transform: translateX(-1px) rotate(0);transform: translateX(-1px) rotate(0);}
}

@keyframes hvr-buzz-out {
  10% {-webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg)}

  20% {-webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg);}

  30% {-webkit-transform: translateX(3px) rotate(2deg);transform: translateX(3px) rotate(2deg);}

  40% {-webkit-transform: translateX(-3px) rotate(-2deg);transform: translateX(-3px) rotate(-2deg);}

  50% {-webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg);}

  60% {-webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg);}

  70% {-webkit-transform: translateX(2px) rotate(1deg);transform: translateX(2px) rotate(1deg);}

  80% {-webkit-transform: translateX(-2px) rotate(-1deg);transform: translateX(-2px) rotate(-1deg);}

  90% {-webkit-transform: translateX(1px) rotate(0);transform: translateX(1px) rotate(0);}

  100% {-webkit-transform: translateX(-1px) rotate(0);transform: translateX(-1px) rotate(0);}
}

/* - Group System */

.up, .up a {
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

/* ------------------------------------------ */
/*             CSS Base Rules
/* ------------------------------------------ */

.container {
	width: 930px;
	margin: auto;
	background: #ed8a3f;
	min-height: 1200px;
	border-right: solid 3px #000;
	border-left: solid 3px #000;
	box-shadow: 0 0 20px 1px #000;
}

.header{
	min-height: 295px;
	background: url(../images/hbg.jpg) no-repeat center center;
}

.header h2 {
	font-family: kab;
    font-size: 42px;
    color: #243242;
    text-align: center;
    line-height: 1.2em;
    padding-top: 10px;
}

.header .nav {
	float: left;
	margin-top: 50px;
	margin-left: 74px;	
}

.header .nav li {
	float: right;
	width: 108px;
	height: 34px;
	line-height: 28px;
}

.header .nav li:nth-child(2) {
	margin: 0 20px;
}

.header .nav li a {
	display: block;
	font-size: 13px;
	text-align: center;
	border: 1px solid #ae6228;
	color: #eee;
	padding: 2px 6px;
	text-decoration: none;
	transition: all .3s linear 0s;
	-webkit-transition: all .3s linear 0s;
	-moz-transition: all .3s linear 0s;
	-o-transition: all .3s linear 0s;
	-ms-transition: all .3s linear 0s;
	border-radius: 2px;
}

.header .nav li a:hover {
	background: #ae6228;
}

section {
	overflow: hidden;
}

.sec1 {
	height: 315px;
	overflow: visible;
	background: #eee;
	position: relative;
}

.sec1:before {
	content: "";
	width: 100%;
	height: 6px;
	background:  url(../images/top-bg.png) repeat-x;
	position: absolute;
	left: 0;
	top: -6px;
	z-index: 1
}

.rside {
	float: right
}

.rside img {
	width: 490px;
	display: block;
	margin-top: -173px;
	position: relative;
	z-index: 2;
}

.lside {
	float: left;
	width: 400px;
	text-align: center;
	line-height: 60px;
	font-size: 13px;
	margin-left: 40px;
	direction: rtl;
}

.lside p:nth-child(4) {
	line-height: 30px;
}

.lside p a {
	text-decoration: none;
	color: #eee;
	background: #243242;
	width: 145px;
	height: 35px;
	line-height: 35px;
	display: block;
	text-align: center;
	margin: 18px auto;
	transition: all .3s linear 0s;
	-webkit-transition: all .3s linear 0s;
	-moz-transition: all .3s linear 0s;
	-o-transition: all .3s linear 0s;
	-ms-transition: all .3s linear 0s;	
	border-radius: 2px;
}

.lside p a:hover {
	background: #0c233b;
}


.sec2 {
	background: #eee url(../images/secbg.jpg) no-repeat center center;
	min-height: 204px;
}

.sec2 img {
	display: block;
	width: 505px;
	margin-left: 60px;
	padding-top: 10px;
}

.sec2 figcaption {
	padding-right: 280px;
}

.sec2 a {
	display: block;
	margin: auto;
	text-align: center;
	width: 145px;
	height: 35px;	
	line-height: 35px;
	text-decoration: none;
	color: #ed8a3f;
	font-size: .95em;
	background: #243242;	
	transition: all .3s linear 0s;
	-webkit-transition: all .3s linear 0s;
	-moz-transition: all .3s linear 0s;
	-o-transition: all .3s linear 0s;
	-ms-transition: all .3s linear 0s;	
	border-radius: 2px;	
}

.sec2 a:hover {
	background: #0c233b;
}

.sec3 {
	background: #eee;
}

.sp-heading {
	color: #243242;
	padding: 15px 0 10px;
	text-align: center;
	border-bottom: solid 2px #ed8a3f;
	font-size: 17px;
	width: 85px;
	margin: auto;
	font-weight: normal;
	margin-bottom: -2px;
	position: relative;
	z-index: 4;
}

.videos {
	border-top: solid 2px #dfdfdf;
	padding-top: 20px;
	overflow: hidden;
}

.videos li {
	float: left;
	width: 25%;
	text-align: center;
	font-weight: normal;
	position: relative;
	overflow: hidden;
}
.videos li img {
	width: 149px;
	height: 149px;
}

.videos li p {
	color: #888;
	line-height: 1.3em;
	padding: 10px 0;
	font-family: flat;
}

.watch {
	position: absolute;
	top: 55px;
	right: 0;
	left: 0;
	margin: auto;
	text-decoration: none;
	color: #243242;
	background: #ed8a3f;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	line-height: 50px;
	font-family: flat;
	display: none;
}

.sec3 a.summary {
	display: block;
	text-align: center;
	width: 145px;
	height: 35px;	
	line-height: 35px;
	text-decoration: none;
	color: #243242;
	font-size: .95em;
	background: #ed8a3f;	
	transition: all .3s linear 0s;
	-webkit-transition: all .3s linear 0s;
	-moz-transition: all .3s linear 0s;
	-o-transition: all .3s linear 0s;
	-ms-transition: all .3s linear 0s;	
	border-radius: 2px;	
	font-family: flat;
	padding: 2px 13px;
	margin: 30px auto;
}

.sec3 a.summary:hover {
	background: #cf6617;
	color: #eee;
}

.sec4 {
	background: #243242;
	padding: 30px 60px;
}

.sec4 li {
	float: left;
	width: 14.285%;
	text-align: center;
	transition: all .3s linear 0s;
	-webkit-transition: all .3s linear 0s;
	-moz-transition: all .3s linear 0s;
	-o-transition: all .3s linear 0s;
	-ms-transition: all .3s linear 0s;
	translate: rotate(0deg);
	-webkit-translate: rotate(0deg);
}

.sec4 li:hover {
	opacity: .9;
	filter: alpha(opacity=90);
	transform: rotate(360deg) scale(.95);
	-webkit-transform: rotate(360deg) scale(.95);	
}

.sec5 {
	background: #eee;
	overflow: hidden;
	padding: 0 25px 45px;
}

.sec5 li {
	float: left;
	width: 25%;
	text-align: center;
	height: 130px;
	line-height: 130px;
	position: relative;
}

.sec5 li:first-child {
	background: #ed8a3f;	
}

.articles {
	border-top: solid 2px #dfdfdf;
	padding-top: 30px;
	overflow: hidden;
}

.sec5 li a {
	text-decoration: none;
	color: #243242;
}

.sec5 li a.preview {
	position: absolute;
	z-index: 9;
	left: 0;
	right: 0;
	top: 50px;
	margin: auto;
	color: #eee;
	background: rgba(140,140,140,.7);
	padding: 0 10px;
	width: 70px;
	height: 35px;
	line-height: 35px;
	border-radius: 50%;
	display: none;
}

.footer {
	overflow: hidden;
	padding: 10px 30px;
	background: #191e25;
	color: #eee;
	direction: rtl;
	font-family: flat;
}

.rfoot {
	float: right;
}

.lfoot {
	float: left;
}