/* #PORTFOLIO 1 GRID #NEW
=====================================================*/
.port-filter{
	list-style: none;
	padding: 0;
	margin: 0 0 45px 0;
	font-size: 13px;
	text-transform: uppercase;
	/* text-align: center; */
	letter-spacing: 2px;
	color: #555;
	cursor: default;
}
.port-filter a{
	display: inline-block;
	margin: 0 21px;
  margin-bottom:5px;
	color: #999;
	text-decoration: none;
  border-bottom: 1px solid transparent;
	
	-webkit-transition: all 0.37s cubic-bezier(0.000, 0.000, 0.580, 1.000);  
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); 
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
	
	cursor: pointer;
}
.port-filter a:hover{
	color: #101010;
	text-decoration: none;
}
.port-filter a.active{
	color: #101010;
  border-color:#101010;
	cursor: default;
}
.port-filter a.active:hover{
	color: #101010;
}
 
/******************************************************************************/ 
.port-grid{
	list-style: none;
	margin: 0;
	padding: 0;
}
.port-item{
	width: 25%;
	float: left;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
}
.port-item.port-item-width-2{
	width: 50%;
}
.port-grid-2 .port-item{
	width: 50%;
}
.port-grid-3 .port-item{
	width: 33.333%;
}
.container .port-grid-3 .port-item{
	width: 33.2%;
}
.port-grid-5 .port-item{
	width: 20%;
}
.port-grid.port-grid-gut{
  margin: 0 0 0 -15px;
}
.port-grid .port-item > a{
	display: block;	
	overflow: hidden;	
	padding: 0;
  margin:0;
}
.block-center-y {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); 
}
.block-center-xy {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.title-fs-45-wide {
  color: #4b4e53;
  font-size: 45px;
  line-height: 58px;
  font-weight: 300;
  letter-spacing: 10px;
}
.w-100 {
  width:100%;
}


@media only screen and (max-width: 1200px) {
  .port-grid-5 .port-item {
      width: 25%;
  }
  .port-text-cont .title-fs-45-wide {
    font-size: 35px;
    line-height: 47px;
    letter-spacing: 5px;
  }
}

/* ==============================
   Tablet landskape
   ============================== */
  
@media only screen and (max-width: 992px) {
	.port-item, .port-grid-3 .port-item, .container .port-grid-3 .port-item, .port-grid-5 .port-item, .port-item.port-item-width-2{
    width: 50%;
  }
  .port-item.port-item-width-2{
    width: 100%;
  }
  #counter-1 .row > div {
     border: none;
  }
}




  
@media only screen and (max-width: 772px) {
	.port-item, .port-grid-3 .port-item, .container .port-grid-3 .port-item, .port-grid-5 .port-item, .port-item.port-item-width-2{
    width: 100%;
  }
  .port-item.port-item-width-2{
    width: 100%;
  }
  #counter-1 .row > div {
     border: none;
  }
}




/* ==============================
   Phone
   ============================== */
  
@media only screen and (max-width: 480px) {
	.port-item, .port-grid-2 .port-item,	.port-grid-3 .port-item, .container .port-grid-3 .port-item, .port-grid-5 .port-item , .port-item.port-item-width-2{
    width: 100%;
  }	
  .port-text-cont .title-fs-45-wide {
    font-size: 25px;
    line-height: 38px;
    letter-spacing: 1px;
  } 
  .port-filter a {
    width:100%;
    display: block;
  }

}

/* #PORTFOLIO 1 #NEW 
=====================================================*/
.port-main-img {
  width: 100%;
  display: block;
  overflow: hidden;
}
.port-overlay-cont {
/*   position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.port-overlay-cont .body {
	opacity: 0;
	visibility: hidden;
}

.port-overlay-cont .button {
	opacity: 0;
	visibility: hidden;
}


.port-main-img {
  transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.lightbox-item {
  position:relative;
}
.lightbox-item  .port-btn-cont {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12px;
  margin-top: -28px;
  transition: all .3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.lightbox-item:hover  .port-btn-cont {
  margin-top: -12px;
}
.lightbox-item  .port-btn-cont {
  font-size:26px;
  color:#fff;
}
.lightbox-item  .port-btn-cont.lightbox-video {
  margin-left: -18px;
  margin-top: -32px;
}
.lightbox-item:hover  .port-btn-cont.lightbox-video {
  margin-top: -17px;
}
.lightbox-item  .port-btn-cont.lightbox-video {
  font-size:34px;
}

.port-item .heading {
	position: relative;
	padding-top: 20px;
}



.port-item:hover .text {
  opacity: 1;
}

.port-item:hover .heading {
  opacity: 0;
}

.port-item:hover .button {
  opacity: 1;
   visibility: visible;
}

.port-item:hover .body {
  opacity: 1;
   visibility: visible;
}




/*
.port-item:hover .port-main-img, .lightbox-item:hover .port-main-img {
  -webkit-transform: scale(1.2) translateZ(0);
	-moz-transform: scale(1.2) translateZ(0);
	-o-transform: scale(1.2) translateZ(0);
	-ms-transform: scale(1.2) translateZ(0);
	transform: scale(1.2) translateZ(0);
}
*/

.port-item:hover .port-img-overlay:after, .lightbox-item:hover .port-img-overlay:after {
  background: rgba(0,46,80, .5);
}

.item-1 .port-img-overlay:after {
  background: none !important;
}

.port-item .port-img-overlay:after , .lightbox-item .port-img-overlay:after  {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
/*   background: rgba(0,46,80, .2); */
  -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.port-img-overlay {
  position: relative;
  overflow: hidden;
} 
.port-btn-cont a{
  display:inline-block;
} 
.port-overlay-cont{
  padding: 20px 20px 20px 20px;
}
.container .port-grid-5 .port-overlay-cont{
  padding: 20px;
  padding-right: 10px;
}
.port-item:hover .port-overlay-cont, .lightbox-item:hover .port-overlay-cont {
  padding-top: 40px;
}
.container .port-grid-5 .port-item:hover .port-overlay-cont, .container .port-grid-5 .lightbox-item:hover .port-overlay-cont {
  padding-top: 30px;
}
.port-title-cont {
  margin-bottom:0px;
  transition: all .4s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.port-item:hover .port-title-cont, .lightbox-item:hover .port-title-cont {
  margin-bottom:15px;
}

.port-item h1 {
	
	font-size: 36px !important;
	line-height: 40px !important;
	color: #fff !important;
	
}

.port-title-cont h3 {
  margin:0;
  font-size:28px;
  line-height:30px;
  text-align: right;
  color: #fff !important;
 font-style: italic;
 margin-top: 50%;
  
}

.port-title-cont h4 {
  margin:0 !important;
  font-size:12px;
  line-height:20px;
  text-align: right;
  color: #fff !important;
   font-style: italic;
   
}
.port-title-cont h3 a {
  color:#fff;
}
.port-title-cont h3 a:hover{
  color:#dedede;
}
.port-grid-gut li:first-child  .port-overlay-cont{
  padding-right: 40px;
}
.port-title-cont span a{
  color:#bebebe;
  font-size:12px;
  text-transform: uppercase;
}
.port-title-cont span a:hover{
  color:#fff;
}
.port-btn-cont a{
  color:#bebebe; 
  font-size:18px;
}
.port-btn-cont a:hover{
  color:#fff;
}
.port-view-more-cont {
  margin-top:-1px;
  text-align:center;
}
.port-view-more {
  display:block;
  padding-top:40px;
  padding-bottom:37px;
  background:#eee;
  font-size:18px;
  line-height:18px;
  font-weight:100;
  transition: all .3s ease 0s;
}
.port-view-more:hover {
  background:#dedede;
  color:#4b4e53;
}
.port-view-more-cont-dark {
  text-align:center;
}
.port-view-more-dark {
  display:block;
  padding-top:55px;
  padding-bottom:52px;
  background:#4b4e53;
  color:#fff;
  font-size:18px;
  line-height:18px;
  font-weight:normal;
  letter-spacing:4px;
  transition: all .3s ease 0s;
}
.port-view-more-dark:hover {
  background:#101010;
  color:#fff;
}
.port-view-more-inv{
  background:#dedede;
  display:block;
  padding-top:40px;
  padding-bottom:37px;
  font-size:18px;
  line-height:18px;
  font-weight:100;
  transition: all .3s ease 0s;
}
.port-view-more-inv:hover {
  background:#eee;
  color:#4b4e53;
}
.mobile .port-overlay-cont{
  display:none;
  visibility:hidden;
}

.port-overlay-cont {
	position: absolute;
	top: 25%;
	z-index: 100;
	height: 0;
}

.port-overlay-cont .text {
	position: absolute;
	top: 100%;
	z-index: 100;
	height: 0;
	color: #fff;
	margin: 0 auto;
	width: 80%;
	font-weight: 200;
	left: 11%;
	line-height: 20px;
}