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

.portfolio-bg {
	background-color: #060808;
	color: #9F9F9F;
}

/* -------------------------------- control btns ---*/

.gallery-btn-group button:active, .gallery-btn-group button.is-checked {color: white; }

.gallery-controls { 
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex; 
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap; 
	width: auto; 
	margin-bottom: 14px;
	padding-left: 14px;
}

.gallery-controls .btn { 
	margin-right: 6px; 
	margin-bottom: 6px;
	padding: 2px 4px; 
	font-weight: 600; 
	border: 1px solid #6B6B6B;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 12px;
	text-align: center;
	text-decoration: none;
	font-family: "Barlow" , sans-serif;
	color: #9F9F9F;
}

.gallery-controls.btn:active, .btn.mixitup-control-active { 
	background-color: #6B6B6B; color: white; border: 1px solid #6B6B6B;}

.gallery-controls .btn-view { 
	margin-right: 15px;  
	border: 1px solid #6B6B6B;
	font-size: 13px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	font-family: "Barlow" , sans-serif;
	height: 30px;
	padding: 1px;
	background-color: #6B6B6B;
}
.gallery-controls .btn-view.active {
	background-color: #6B6B6B;
}
.gallery-btn-group .btn:hover {color: white;}

.gallery-controls .btn i {
	font-weight: bold;
	padding-left: 1px;
}

.gallery-controls b { font-size: 11px; line-height: 20px; margin-right: 10px; font-weight: 500; color:#666666; }
.gallery-controls small { font-size: 12px; line-height: 20px; margin-right: 20px; color:#666666;}

.gallery-btn-group { 
	width: auto; 
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 2px;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}


/* -------------------------------- gallery ---*/


.grid-item { width: 25%; padding: 18px; float: left; }

.item-wrap { border: 1px solid #060808;}
.item-wrap:hover {
	border: 1px solid #575757;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.grid-item .img-wrap {
	border-bottom: 2px solid #040505;
}

@media only screen and (max-width: 860px){ .grid-item { width: 33.33%; min-width: 220px;}}
@media only screen and (max-width: 7600px){.det-btn {font-size: 10px;} }
@media only screen and (max-width: 680px){ 
	.gallery-btn-group { padding: 6px 0 ; flex: auto; }
	.gallery-controls .btn { margin-right: 4px; padding: 4px 8px;}
	.grid-item { width: 50%; }
	.det-btn {font-size: 10px;}
}
@media only screen and (max-width: 460px){
	.grid-item { width: 100%; } .grid-item-text {width: 60%;} .grid-item-btn {width: 30%;}}


.grid-item-info {
	width: 100%;
	color: #9F9F9F;
	padding: 8px;
	height: auto;
}
.grid-item-info::after { clear: both; }

.grid-item-text {width: 70%; float: left; padding-left: 5px; }

.grid-item-text h5 { font-size: 16px; margin: 3px 0px;}
.grid-item-text p { font-size: 13px; font-weight: 400; padding-right:5px ; margin: 0px; line-height: 15px;}

.grid-item-btn {
	width: 30%;
	float: right;
	color: #F4F4F4;
	background-color: #272727;
	border: 1px solid #373737;
	padding: 2px;
	margin: 3px auto auto;
}

.grid-item-btn:hover { color: #FFFFFF; border: 1px solid #555555; }
.grid-item .hvr-rectangle-out::before { background-color: #060808; }

.det-btn {
	font-family: "Barlow", "sans-serif";
	font-size: 9px;
	line-height: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	display: block;
	text-align: center;
	margin: auto;
	padding: 3px;
}

.det-btn .image { width:26px; height: 26px; margin: 0 auto 3px auto; opacity: 0.9; }
.det-btn .image:hover {opacity: 1; }

.img-mask-patt {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	transition: .5s ease;
	background-image: url(../img/bg/patterns/21.png);
	background-repeat: repeat;
	opacity: 0.1;
	background-blend-mode: multiply;
}
	
.img-wrap span {
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 30px;
	height: 30px;
	background-image: url(../img/icons/white-30px/16.png);
	opacity: 0.5;
}


/* -------------------------------- portfolio item ---*/

.pf-item .one-img { max-width: 500px; margin: auto auto 30px;}

.pf-item::after {clear: both; }
.pf-item {
	padding: 40px 20px;
	width: auto;
	height: auto;
	display: block;
	min-height: 600px;
}
.pfi-text {color: #F0F0F0; padding-left: 20px;}
.pfi-text h4 {margin-bottom: 8px;}
.pfi-text p {font-size: 15px;}
.pfi-text span {
	font-size: 13px;
	font-weight: 600;
	color: #A3A3A3;
	text-transform: uppercase;
}
.pfi-text p a { font-size: 14px; color:#A3A3A3; }
.pfi-text u { border-bottom: 1px solid inherit;}

.pfi-text a:hover, .portfolio-infotext a:hover {
	text-decoration: none;
	color: #B40000;
	-webkit-transition: background-color .4s linear, color .4s linear;
	-moz-transition: background-color .4s linear, color .4s linear;
	-o-transition: background-color .4s linear, color .4s linear;
	-ms-transition: background-color .4s linear, color .4s linear;
	transition: background-color .4s linear, color .4s linear;
}


.pfi-text .img-wrap {max-width: 110px; float: left; margin: 0 15px 10px 0;}

.pfi-text .img-wrap span {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 24px;
	height: 24px;
	background-image: url(../img/icons/white-30px/16.png);
	background-color: rgba(0,0,0,0.50);
	opacity: 0.5;
}


.pfi-text .img-hov {position: relative;}
.img-reveal {display: none}
.pfi-text .img-hov:hover .img-reveal {
	display:block;
  	position:absolute;
  	top:20px;
  	left:50px;
  	z-index:10000;
  	width:auto;
  	max-width:400px;
  	min-height:400px;
  	border:1px solid black;
  	margin-top:12px;
  	margin-left:32px;
  	overflow:auto;
  	padding:2px;
}

.pfi-text-wrap { overflow: auto;}
.pfi-text-wrap::after { clear: both;}


@media screen and (min-width: 769px) {
	.pf-item .one_third  { width: 33.33%; }
  	.pf-item .two_third { width: 66.66%; } }
@media screen and (max-width: 768px) {
	.pf-item .one_third  { width: 100%;  }
  	.pf-item .two_third { width: 100%; margin-bottom: 30px; } 
	.pfi-text {padding-left: 0px;}}



/* FancyBox
-----------------------------------------------------------------*/

.compensate-for-scrollbar { margin-right: 20px;}
.fancybox-slide--iframe .fancybox-content { background: transparent;}
.fancybox-slide--iframe {
	width  : 100%;
    height : 100%;
    max-height: calc(100vh);
	padding: 10px;
}
.fancybox-slide--iframe .fancybox-content {
    width  : 100%;
    height : 100%;
    max-height: calc(100vh);
    margin: 0;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    transition: opacity .3s;
	background-color: #060808;
	overflow: visible;
}
@media only screen and (max-width: 800px) {
	.fancybox-slide--iframe .fancybox-content {max-height: 100%; max-width: 100%; }
	.fancybox-slide { padding: 5px;}
}

.fancybox-slide.watermark .fancybox-spaceball {
	background-image: url(../img/me/patt/5cf89c0c-ae97-4748-ad96-e429745ac0ac.png);
	opacity: 0.05;
	background-size: auto;
	background-repeat: repeat;
}
.fancybox-button { width: 46px; height: 46px; top: 30; right: 30px; padding: 5px;}
.fancybox-close-small { padding: 6px; right: -10px; top: -44px;}

/* ----------------------------------------------- end FancyBox */