@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Lato);
 @import url(https://fonts.googleapis.com/css?family=Amaranth);
@import url(https://fonts.googleapis.com/css?family=Actor);
@import url(https://fonts.googleapis.com/css?family=Comfortaa:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Convergence);

html {
  -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
  overflow-x:hidden;
}
body{
	font-size:14px;
	font-family: 'Lato', sans-serif;
	line-height:20px;
	color:#333;
	background:#fff;
	padding:0;
}
a{
	text-decoration:none;
	color:#1a1a1a;
}
a:hover{
	text-decoration:none;
	color:#397fa9;
}
*{
	margin:0;
	padding:0;
}
img{
	border:0;
	outline:none;
	position:inherit;
	top:inherit;
}
.spacer,.clear{
	clear:both;
	line-height:0;
	font-size:0;
}
ul, li, ol{
	list-style:none;
}
.center{
	text-align:center;
}
.leftAlign{
	text-align:left;
}
section, article, header, footer, nav, aside, hgroup { display: block;}
.noBg{
	background:none!important;
}
.noRightMargin{
	margin-right:0!important;
}
.noBottomMargin{
	margin-right:0!important;
}
.noMargin{
	margin:0!important;
}
.noBorderRight{
	border-right:0 none!important;
}
p{
	padding-bottom:20px; 
	font-size:13px;
	line-height:22px;
}
h1, h2, h3, h4, h5, h6{
	padding:0;
	margin:0;
	
}
textarea {
	resize:none;	
}
.center{
	text-align:center;
}
hr{
	border:1px solid #323131;
	margin: 0;
	padding:0;
}
/*---------------------- GENERAL STYLE END ----------------------------*/

.topmain {
	background: #ec1f27;/*height:50px;*/
}
.topmain ul {
	list-style:none;
	display:inline-block;
	padding:0;
	margin:0;
	/*padding: 12px 0 0 1px;*/
}
.topmain a {
	color: #e2e9ef;
	text-decoration: none;
}
.topmain li {
	font-size:15px;
	font-family: 'Lato', sans-serif;
	color: #e2e9ef;
	display:inline-block;
}
.info {
	margin-top:12px;
}
.info ul li {
	display:inline-block;
	padding: 3px 34px 7px 0px;
	margin-right:18px;
	border-right:1px solid;
}
.info ul li:last-child {
	border-right:none;
}
.navbar-nav {
    float: right;
}
.navbar-nav > li{
	padding:15px 30px 15px 0;
	font-size:14px;
}
.navbar-nav > li:last-child{
	padding-right:0;
}
.navbar-collapse{
	padding-right:0;
}
.navbar-nav > li > a{
	padding:0px;
}
.navbar-nav > li > a:hover{
	background:none;
	color:#600;
}
.header {
	background-color:#f5f3f3;
	margin: 0;
	padding:10px 0;
}
.bottom {
	background:url(file:///D|/binil/images/top.png) no-repeat;
	padding: 15px 0px 15px 0px;
}
.logo{
	margin: -42px auto auto;
	padding: 0;
}
.navbar {
	background:none;
	border-radius:0px;
	margin:0;
}
.banner {
	margin:0;
}
/*----------------------------------welcomesession--------------------------------*/ 
.welcome {
	background-color:#FFF;
	text-align:center;
	padding:45px 0;
}
.welcomeimage {
	padding: 31px 0 6px 0;
}
.welcome h1 {
	color:#216b37;
	font-family: 'Lato', sans-serif;
	font-size:25px;
	text-align:center;
	padding:0;
	margin:0;
}
.welcome span {
	font-family: 'Lato', sans-serif;
	font-size:25px;
	color:#F00;
	text-align:center;
	font-style:inherit;
}
.wel {
	text-align:center;
}
.welcome p {
	color:216b37;
	font-size:15px;
	font-family: 'Lato', sans-serif;
	text-align:left;
	text-decoration:inherit;
	padding: 20px 0 0 0;
}
.welcome h4 {
	font-family: 'Lato', sans-serif;
	font-size:15px;
	color:#000;
	text-align:center;
	padding-top:10px;
}
.welcome-img {
}
/*---------------------------------------------------------------why----------------------------------------------*/
.noPadding{
	padding:0;
}
.why {
	background:#f3f2f2;
	margin: 0 0 40px;
	padding: 0;
	width:100%;
}
.whyheading{
	padding:35px 35px 35px 100px;
}
.whyheading h2 {
	color:#216b37;
	background:url(../images/whyline.png) repeat-x center center;
	font-family: 'Lato', sans-serif;
	font-size:25px;
	padding: 0;
	margin:0 0 25px 0;
	position:relative;
}
.whyheading h2 span {
	color:#216b37;
	background:#f3f2f2;
}
.whyheading h2 span span {
	color:#ec1f27;
}
.whyheading a {
	background:#f3f2f2;
	color:#216b37;
	font-family: 'Amaranth', sans-serif;
	font-size:15px;
	border: solid 1px #216b37;
	padding: 3px 20px 5px 21px;
	position:absolute;
	right:0;
	top:0;
}
.whyheading p {
	font-family: 'Lato', sans-serif;
	font-size:15px;
	color:#216b37;
	text-align:justify;
	padding:0;
	margin-bottom:20px;
}
.whyheading h3 {
	font-family: 'Lato', sans-serif;
	font-size:18px;
	color:#111111;
	margin: 0 0 20px 0;
	padding: 0;
}
.why img {
	width:100%;
}
/*---------------------------------currentopenings--------------*/
.current {
	background:url(../images/Layer%2023.jpg) no-repeat;
	padding:45px 0;
	background-size: cover;
	text-align:center;
}
.current h2 {
	font-size:25px;
	font-family: 'Lato', sans-serif;
	text-align:center;
	color:#FFF;
	padding: 0 0 5px;
	margin: 0;
}
.current h3 {
	color:#FFF;
	font-size:17px;
	font-family: 'Lato', sans-serif;
	text-align:left;
}
.current p {
	font-size:15px;
	font-family: 'Lato', sans-serif;
	color:#FFF;
	padding-top:15px;
	text-align:left;
}
.current ul {
	list-style:none;
	padding: 0;
}
.current li {
	font-size:15px;
	font-family: 'Lato', sans-serif;
	color:#FFF;
	padding: 4px 0 0px 0px;
	text-align:left;
}
.current a {
	color: #FFF;
	padding: 9px 24px;
	border: solid 1px #FFF;
	font-size: 17px;
	font-family: 'Amaranth', sans-serif;
	margin-top: 25px;
	display: inline-block;
}
.currentjob {
	padding:0;
	margin-top:20px;
}
.currentjob h2 {
	font-size:25px;
	font-family: 'Lato', sans-serif;
	text-align:center;
	color:#FFF;
	padding:0;
	margin:0;
}
/*------------------------------------------portfolio----------------------------------*/
#posts .post {
	float: left;
	height: 100%;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: inline-block;
	background: #2e5d5a;
	margin: 0 60px 60px 0;
	width: 100%;
}
.our {
	background-color:#FFF;
	text-align:center;
	padding:45px 0;
}
.our img {
	padding: 0 0 33px 0;
}
.our h2 {
	color:#216b37;
	font-size:25px;
	text-align:center;
	padding:0;
	margin:0;
}
.our span {
	font-family: 'Lato', sans-serif;
	font-size:25px;
	color:#F00;
	text-align:center;
	font-style:inherit;
}
.our1 {
	text-align:center;
}
.our1 img {
	height: 300px;
	width: 300px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.our1 img:hover {
	width: 400px;
	height: 400px;
}
/*----------------------------------------------footer--------------------------------*/
.footer {
	background-color:#262626;
	padding:45px 0;
}
.footer p {
	color:#c5c5c5;
	font-size:14px;
	font-family: 'Lato', sans-serif;
	padding: 25px 0 0 0;
	text-align: justify;
}
.footer h2 {
	font-size:20px;
	color:#c5c5c5;
	border-bottom:2px #999;
	padding: 25px 0 12px;
	margin: 0;
}
.footer ul {
	list-style:none;
	display:inline-block;
	padding: 35px 0 0 1px;
}
.footer a {
	color:#c5c5c5;
	text-decoration: none;
}
.footer li {
	font-size:15px;
	font-family: 'Lato', sans-serif;
	color:#c5c5c5;
	padding: 4px 0 0px 0px;
}
.footer hr {
	margin-top: 0;
	margin-bottom: 0;
	border: 0;
	border-top: 2px solid #c5c5c5;
	width: 30%;
}
.social li {
	border:solid 1px #FFF;
	text-align:center;
	padding: 6px 7px 7px 13px;
	display:inherit;
	margin: 0 0 0 10px;
}
.lowfooter {
	background-color:#030303;
	padding:20px 0;
}
.lowfooter p {
	font-size:14px;
	font-family: 'Lato', sans-serif;
	width:100%;
	text-align:center;
	float:left;
	color:#c5c5c5;
	padding:0;
	margin:0;
}
.lowfooter strong {
	color:#c5c5c5;
}
.footer i {
	padding: 0 7px 0 0;
}
.current1 h1 {
	font-family: 'Amaranth', sans-serif;
	font-size:17px;
	color:#FFF;
	text-align:center;
	width:100%;
	float:left;
	border-style: solid;
	padding: 8px 0 8px 0;
}
.headd {
	color:#FFF;
	font-size:15px;
}
.headd ul {
	list-style:none;
	display:inline-block;
	padding:15px 0 0 0;
}
.headd li {
	font-size:15px;
	font-family: 'Lato', sans-serif;
	color:#fac3c5;
	padding: 0 0 0px 0px;
}
.navbar-inverse .navbar-nav > li > a {
	color: #fac3c5;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
	color: #381717;
	background-color: transparent;
}
.binocular img {
	height:auto;
	margin:0 0 37px 105px;
}
.get2 a {
	color:#c5c5c5;
}
.quick2 a {
	color:#c5c5c5;
}
.mainfooter a {
	color:#c5c5c5;
}
.riyadh {
}
.riyadh h3 {
	font-family: 'Lato', sans-serif;
	font-size:15px;
	color:#fce1e2;
	float:left;
}
.navbar-inverse .navbar-nav > li > a {
	color: #fce1e2;
}
.home {
}
.riyadh a {
	color: #e4eaef;
}
.apple img {
	text-align:center;
	margin: -17px 0 0 117px;
}
.info p {
	color:#FFF;
	font-family: 'Lato', sans-serif;
	font-size:15px;
}
/*----------------------------------------about us page-------------------------------------------*/
.aboutus {
	background:#f3f2f2 repeat;
	text-align:center;
}
.aboutus h1 {
	font-family: 'Lato', sans-serif;
	font-size:35px;
	color:#ec1f27;
	margin: 36px 0 0 0;
	text-align:center;
}
.aboutus p {
	font-family: 'Lato', sans-serif;
	font-size:14px;
	color:#216b37;
	text-align:justify;
	margin: 14px 0 30px 0;
}
.aboutus h2 {
	text-align:left;
	font-size:20px;
	color:#ec1f27;
}
/*---------------------------------------career-------------------------------------------------*/
	 .career {
	background:#f3f2f2 repeat;
	margin: 33px 0 0 0;
	text-align:center;
}
.career h1 {
	font-family: 'Lato', sans-serif;
	font-size:25px;
	color:#ec1f27;
	text-align:center;
}
.career h2 {
	font-size:18px;
	margin: 45px 0 0 0;
}
.joboport {
	text-align:left;
}
.joboport p {
	margin: 12px 0 0 0;
	font-family: 'Lato', sans-serif;
}
.joboport h3 {
	font-size:14px;
}
.basic-grey {
	margin-right:auto;
	max-width: 500px;
	background: #F7F7F7;
	padding: 25px 15px 25px 10px;
	font: 12px Georgia, "Times New Roman", Times, serif;
	color: #888;
	text-shadow: 1px 1px 1px #FFF;
	border:1px solid #E4E4E4;
	margin: 45px 0 0 0;
}
.basic-grey h1 {
	font-size: 25px;
	padding: 0px 0px 10px 40px;
	display: block;
	border-bottom:1px solid #E4E4E4;
	margin: -10px -15px 30px -10px;
	;
	color: #888;
}
.basic-grey h1>span {
	display: block;
	font-size: 11px;
}
.basic-grey label {
	display: block;
	margin: 0px;
}
.basic-grey label>span {
	float: left;
	width: 20%;
	text-align: right;
	padding-right: 10px;
	margin-top: 10px;
	color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
	border: 1px solid #DADADA;
	color: #888;
	height: 30px;
	margin-bottom: 16px;
	margin-right: 6px;
	margin-top: 2px;
	outline: 0 none;
	padding: 3px 3px 3px 5px;
	width: 70%;
	font-size: 12px;
	line-height:15px;
	box-shadow: inset 0px 1px 4px #ECECEC;
	-moz-box-shadow: inset 0px 1px 4px #ECECEC;
	-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea {
	padding: 5px 3px 3px 5px;
}
.basic-grey select {
	background: #FFF url('down-arrow.png') no-repeat right;
	background: #FFF url('down-arrow.png') no-repeat right);
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance: none;
	text-indent: 0.01px;
	text-overflow: '';
	width: 70%;
	height: 35px;
	line-height: 25px;
}
.basic-grey textarea {
	height:100px;
}
.basic-grey .button {
	background: #E27575;
	border: none;
	padding: 10px 25px 10px 25px;
	color: #FFF;
	box-shadow: 1px 1px 5px #B6B6B6;
	border-radius: 3px;
	text-shadow: 1px 1px 1px #9E3F3F;
	cursor: pointer;
}
.basic-grey .button:hover {
	background: #CF7A7A
}
/*--------------------------------------------contact-----------------------------*/
.contacttt {
	margin: 48px 0 0 0;
}
.contactttt {
	text-align:center;
}
.contactt h1 {
	font-family: 'Lato', sans-serif;
	font-size:25px;
	text-align:center;
	color:#ec1f27;
	padding: 33px 0 0 0;
}
.contactt h2 {
	margin: 0px 0 12px 0;
}
.contactp p {
	padding: 0 0 0 17px;
}
.contactt img {
	text-align:center;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */
	border: 1px solid #ccc; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
	background-color: #4CAF50;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
	background-color: #45a049;
}
/* Add a background color and some padding around the form */
.contacttt {
}
.contacttt1 {
}
.map {
}
/*-----------------------------------------maap------------*/
.galleryWrap {
	padding:0 !important;
	margin-bottom:30px;
}
.galleryWrap h2 {
	color:#fff;
	font-size:24px;
	line-height:30px;
	font-family: 'Alike', serif;
	border-left:2px solid #fff;
	margin-top:0;
	margin-bottom:20px;
	padding:5px 0 5px 10px;
}
.galleryWrap p {
	color:#fff;
	font-size:15px;
	line-height:21px;
	font-family: 'Source Sans Pro', sans-serif;
}
.galleryWrap .gallery {
	background:url(../images/gallery-bg.jpg) no-repeat;
	background-size:cover;
	padding:40px 80px
}
.galleryWrap .getinTouch {
	background:#ebebeb;
	padding:40px 80px
}
.galleryWrap .getinTouch h2 {
	color:#1b6081;
	border-color:#1b6081;
}
.galleryWrap .getinTouch p {
	color:#353a3c;
}
.galleryWrap .getinTouch p.address, .galleryWrap .getinTouch p.phone, .galleryWrap .getinTouch p.email {
	font-size:16px;
	line-height:28px;
	padding-bottom:0;
	margin:0;
}
.galleryWrap .getinTouch p::before {
 font-family: "FontAwesome";
 display: inline-block;
 padding-right:10px;
}
.galleryWrap .getinTouch p.phone::before {
 content: '\f095';
}
.galleryWrap .getinTouch p.address::before {
 content: '\f041';
}
.galleryWrap .getinTouch p.email::before {
 content: '\f0e0';
}
.galleryWrap .getinTouch .map {
	border:5px solid #427a95;
	margin:20px 0;
	padding:0;
}
.galleryWrap .getinTouch a.clickBtn {
	background:#427a95;
	color:#fff;
	font-family: 'Amaranth', sans-serif;
	font-size:18px;
	padding:10px 18px;
	display:inline-block;
}
.galleryWrap .getinTouch a.clickBtn:hover {
	background:#d7aa17;
}
.galleryRow {
	position:relative;
	overflow:hidden;
	margin:0 0 15px;
}
.galleryRow .imgBox {
	display:inline-block;
	min-height:140px;
	border:5px solid #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom:15px;
}
.galleryRow .imgBox img {
	width:100%;
	min-height:140px;
}
.galleryRow .imgBox img:hover {
	opacity:0.75;
}
.galleryWrap .gallery a.viewBtn {
	background:#d7aa17;
	color:#fff;
	font-family: 'Amaranth', sans-serif;
	font-size:18px;
	padding:10px 18px;
	display:inline-block;
}
.galleryWrap .gallery a.viewBtn:hover {
	background:#427a95;
}
.shrink img {
	height: 400px;
	width: 400px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
.shrink img:hover {
	width: 300px;
	height: 300px;
}
.our1 h3 {
	text-align:left;
}
.portfolio h1 {
	text-align:center;
}
.contactWrap {
 margin:;
}
.contactForm {
	background:#e5edf5;
	border:1px solid #e1d8cd;
	padding:28px 25px 15px;
	margin: 0 0 51px 0;
}
.contactForm p {
	padding:0 0 25px 0;
	color:#023559;
	font-family: 'Lato', sans-serif;
}
.contactForm label {
	font-weight:400;
	font-size:15px;
}
.contactForm .form-group {
	margin-bottom:30px;
	position:relative;
}
.contactForm .form-control {
	font-size:13px;
	font-style:italic;
}
/*.contactForm textarea.form-control {
	min-height:200px;
}*/
.contactForm .sendQueryBtn {
	background:	#216b37;
	color:#fff;
	border:0;
	padding:8px 20px;
	text-transform:uppercase;
}
.contactForm .sendQueryBtn:hover {
	background:	#b90c0c;
}
.contactPageInfo {
	background:	#216b37;
	padding: 23px 14px;
}
.contactPageInfo h3 {
	color:#fff;
	font-family: 'Convergence', sans-serif;
	font-size:18px;
	margin:0
}
.contactPageInfo hr {
	border-color:#fff;
	width:15%;
	margin:0 0 15px;
}
.contactPageInfo p {
	margin:15px 0 25px;
	padding:0;
	color:#fff;
	font-size:14px;
	line-height:20px;
	text-align:left;
}
.contactPageInfo p a {
	color:#fff;
}
.contactPageInfo p a:hover {
	color:#94ebfe;
}
.contactPageInfo p:last-child {
	margin-bottom:0;
}
.contactMap {
	background:#fff;
	padding:8px;
	margin-top:30px;
}

/*..........................notify session.......................*/

.overlay-new {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay-new:target {
  visibility: visible;
  opacity: 1;
      z-index:1200;
}

.popup {
  margin: 0px auto;
  /*padding: 20px;*/
  background: #fff;
 /* border-radius: 5px;*/
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
  text-align:center;
  margin-top: 17%;
  height: 114px;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #E01765;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
.popdiv1{ float: left; display: inline-block; padding: 4%;}
.popdiv2{  padding: 4%;}


@media screen and (max-width: 700px){
  .popup{
    width: 70%;
  }
}
/*..........................notify session.......................*/

.footer .address{
	font-size:14px;
	line-height:20px;
	font-weight:400;	
	padding:0 0px 15px 30px;
	margin:0;
	position:relative;
}
.footer li.address::before{
	font-family: "FontAwesome";
	content: '\f1d9';
	font-size: 18px;
	position: absolute;
	top: 0;
	left: 0;
}

.footer .contact{
	font-size:14px;
	line-height:20px;
	font-weight:400;	
	padding:0 0px 15px 30px;
	margin:0;
	position:relative;
}
.footer li.contact::before{
	font-family: "FontAwesome";
	content: '\f095';
	font-size: 18px;
	position: absolute;
	top: 0;
	left: 0;
}

.footer .mail{
	font-size:14px;
	line-height:20px;
	font-weight:400;	
	padding:0 0px 15px 30px;
	margin:0;
	position:relative;
}
.footer li.mail::before{
	font-family: "FontAwesome";
	content: '\f003';
	font-size: 18px;
	position: absolute;
	top: 0;
	left: 0;
}

/*=============================== end contact page css ================================*/
		.view-ninth .mask-1, .view-ninth .mask-2 {
	background-color: rgba(0, 0, 0, 0.5);
	height: 361px;
	width: 361px;
	background: rgba(119, 0, 36, 0.5);
	opacity: 1;
	transition: all 0.3s ease-in-out 0.6s;
}
.view-ninth .mask-1 {
	left: auto;
	right: 0px;
	transform: rotate(56.5deg) translateX(-180px);
	transform-origin: 100% 0%;
}
.view-ninth .mask-2 {
	top: auto;
	bottom: 0px;
	transform: rotate(56.5deg) translateX(180px);
	transform-origin: 0% 100%;
}
.view-ninth .content {
	background: rgba(0, 0, 0, 0.9);
	height: 0px;
	opacity: 0.5;
	width: 361px;
	overflow: hidden;
	transform: rotate(-33.5deg) translate(-112px, 166px);
	transform-origin: 0% 100%;
	transition: all 0.4s ease-in-out 0.3s;
}
.view-ninth h2 {
	background: transparent;
	margin-top: 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.view-ninth a.info {
	display: none;
}
.view-ninth:hover .content {
	height: 120px;
	width: 300px;
	opacity: 0.9;
	top: 40px;
	transform: rotate(0deg) translate(0px, 0px);
}
.view-ninth:hover .mask-1, .view-ninth:hover .mask-2 {
	transition-delay: 0s;
}
.view-ninth:hover .mask-1 {
	transform: rotate(56.5deg) translateX(1px);
}
.view-ninth:hover .mask-2 {
	transform: rotate(56.5deg) translateX(-1px);
}
/*PORTFOLIO*/
* {
	margin: 0;
	padding: 0;
	outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.hidden {
	display: none;
}
#filter {
	text-align: center;
	padding-bottom: 35px;
}
#filter button {
	border: 0;
	background-color:transparent;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	padding: 5px 20px;
}
#filter button.active {
	border: solid 1px #d3d1d1;
}
#filter button:hover {
	border: solid 1px #d3d1d1;
	color:#333;
}
#filter button:focus {
	outline: 0;
}
#posts {
	max-width: 1200px;
	padding:0 0px 0 0;
	margin: 0 0px 0 0;
}
#posts .post {
	float: left;
	height: 250px;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
	position: relative;
	z-index: 1;
	display: inline-block;
	background: #2e5d5a;
	margin:0 60px 60px 0;
}
#posts .post img {
	position: relative;
	display: block;
	width: -webkit-calc(100% + 60px);
	width: calc(100% + 60px);
	opacity: 1;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
	transform: translate3d(-30px, 0, 0) scale(1.12);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	min-height: 100%;
}
#posts .post:hover img {
	opacity: 0.5;
	-webkit-transform: translate3d(0, 0, 0) scale(1);
	transform: translate3d(0, 0, 0) scale(1);
}
#posts .post .post-content {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
#posts .post .post-content::before, #posts .post .post-content::after {
pointer-events: none;
}
#posts .post .post-content, #posts .post a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#posts .post a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}
#posts .post h2 {
	word-spacing: -0.15em;
	font-weight: 300;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 1em 1.2em;
}
#posts .post h2, #posts .post p {
	margin: 0;
}
#posts .post p {
	letter-spacing: 1px;
	font-size: 68.5%;
	padding: 0 10px 0 0;
	width: 50%;
	border-right: 1px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px, 0, 0);
	transform: translate3d(-40px, 0, 0);
}
#posts .post:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.post-content h2 {
	font-size:22px;
	color:#FFF;
/*PORT END*/	 
	 	  <style>         /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
 position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
	position: absolute;
	/* size of bullet elment */
            width: 16px;
	height: 16px;
	background: url('img/b05.png') no-repeat;
	overflow: hidden;
	cursor: pointer;
}
.jssorb05 div {
	background-position: -7px -7px;
}
.jssorb05 div:hover, .jssorb05 .av:hover {
	background-position: -37px -7px;
}
.jssorb05 .av {
	background-position: -67px -7px;
}
.jssorb05 .dn, .jssorb05 .dn:hover {
	background-position: -97px -7px;
}
.jssora031 {
	display:block;
	position:absolute;
	cursor:pointer;
}
.jssora031 .a {
	fill:#fff;
}
.jssora031:hover {
	opacity:.8;
}
.jssora031.jssora031dn {
	opacity:.5;
}
.jssora031.jssora031ds {
	opacity: .3;
	pointer-events: none;
}
 </style>