@import 'shortcodes.css';
@import 'settings-panel.css';

/*													  												  BASE ^
-----------------------------------------------------------------------------------------------------------*/

.bg-wood_pattern { background: #fff url(../img/bg/wood_pattern.png); }
.bg-shattered { background: #fff url(../img/bg/shattered.png); }

.bg-vichy { background: #fff url(../img/bg/vichy.png); }
.bg-random-grey-variations { background: #fff url(../img/bg/random_grey_variations.png); }
.bg-irongrip { background: #fff url(../img/bg/irongrip.png); }
.bg-gplaypattern { background: #fff url(../img/bg/gplaypattern.png); }

.bg-diamond_upholstery { background: #fff url(../img/bg/diamond_upholstery.png); }
.bg-denim { background: #fff url(../img/bg/denim.png); }
.bg-crissXcross { background: #fff url(../img/bg/crissXcross.png); }
.bg-climpek { background: #fff url(../img/bg/climpek.png); }

*::-moz-selection {
	background-color: #040404;
	color: #fff;
}

*::selection {
	background-color: #e34735;
	color: #fff;
}

.element-wrap {
	margin-bottom: 30px;
}

.element-wrap iframe, #map_canvas {
	width: 100%;
}

#map_canvas img {
	max-width: none !important;
}

.video-wrap {
	position: relative;
	padding-top: 56.25%;
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.video-wrap iframe {
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;		left: 0;
}

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

img {
	max-width: 100%;
	border: none;
}

.full-shadow {
	border: 1px solid #ccc;
	box-shadow: 1px 1px 4px 0 rgba(180,180,180,0.3);
}

.img-wrap {
	position: relative;
	clear: both;
}

.img-wrap.shadow, .img-wrap .shadow {
	margin-bottom: 5px;
}

.img-wrap img {
	display: block;
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

img.no-shadow {
	box-shadow: none;
}

.pretty-photo-item {
	display: block;
	position: relative;
	z-index: 1;
}

.pretty-photo-item:hover .link-overlay {
	background: rgba(15,16,17,0.5); 
}

.pretty-photo-item:hover .link-overlay:before {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity:1;
}

.img-wrap.m-left, img.m-left {
	float: left;
	margin: 0 25px 20px 0;
}

.img-wrap.m-right, img.m-right {
	float: right;
	margin: 0 0 20px 25px;
}

.img-wrap.m-center {
	display: block;
	margin: 0 0 16px;
	text-align: center;
}

.img-wrap.m-center img {
	display: block;
}

.img-wrap.m-center .shadow {
	display: inline-block;
}

img.m-center {
	display: block;
	margin: 0 auto 20px;
}

.img-title {
	position: absolute;
	bottom: 0;	left: 0;
				right: 0;

	z-index: 1;

	padding: 20% 20px 16px;

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(35,38,40,0)), color-stop(100%,rgba(35,38,40,0.6)));
	background: -webkit-linear-gradient(top,  rgba(35,38,40,0) 0%,rgba(35,38,40,0.6) 100%);
	background: linear-gradient(to bottom,  rgba(35,38,40,0) 0%,rgba(35,38,40,0.6) 100%);

	text-align: left;
	color: #ececec;
	text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}



.row {
	margin: 0 -12px;

	line-height: 0;
	font-size: 0px;

	letter-spacing: -.31em;
	word-spacing: -.43em;
}

.row-item {
	display: inline-block;

	margin: 0 12px;
	vertical-align: top;	

	text-align: left;
	line-height: 20px;
	font-size: 13px;

	letter-spacing: normal;
	word-spacing: normal;
}

.col-1_2 	{ 	width: 493px;	 }
.col-1_3 	{ 	width: 320px;	 }
.col-2_3 	{ 	width: 664px;	 }
.col-1_4 	{ 	width: 234px;	 }
.col-3_4 	{ 	width: 750px;	 }


.btn-layout {
	width: 32px;
	height: 32px;

	position: fixed;
	top: 10px;	left: 10px;
	z-index: 100;

	border: 1px solid #FC5E32;
	box-shadow: inset 0 1px 0 #FCAB94;
	text-shadow: inset 0 1px 0 #FC5E32;

	background: #ff855f;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#ff855f), color-stop(100%,#ff6d41));
	background: -webkit-linear-gradient(top,  #ff855f 2%,#ff6d41 100%);
	background: linear-gradient(to bottom,  #ff855f 2%,#ff6d41 100%);

	text-align: center;
	font: 20px/31px 'FontAwesome';
	color: #fff;

	cursor: pointer;
}

.btn-layout.active {
	background: #444;
	box-shadow: inset 0 0 3px #333;
	border: 1px solid #333;
}

.main {
	margin: 0 auto;

	background:  #fff;
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

.main.boxed { 
	width: 1090px; 
	margin-top: 20px;
	margin-bottom: 20px;
}

.layout {
	width: 1000px;
	min-width: 200px;
	margin: auto;
	padding: 0 40px;
}


s

/*													  											 PORTFOLIO ^
-----------------------------------------------------------------------------------------------------------*/

/*-------------------------------------------------------------- MAIN PAGE */

.b-filter-list {
	margin: -10px 0 20px;
	padding: 0;

	list-style: none;
}

.b-filter-list li {
	display: inline-block;
	position: relative;
	
	margin-right: 23px;
	padding-bottom: 10px;

	font-size: 13px;
	color: #313538;
	cursor: pointer;
}

.b-filter-list li.active {
	color: #e34735;
}

.b-filter-list li:before, .b-filter-list li.active:before { 
	content: '';
	display: block;
	height: 0;

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 53;

	background: #888;

	-webkit-transition: height 0.2s ease;
	transition: height 0.2s ease;
}

.b-filter-list li:hover:before { height: 2px; }

.b-filter-list li.active:before {
	height: 2px;
	background: #e34735;
}


.b-filter-select {
	display: none;

    position: relative;
    margin-top: -15px;
    margin-bottom: 25px;
}

.b-filter-select ul {
    display: none;
    position: absolute;
    left: 0;    right: 0;
    z-index: 10;
    
    margin: 0;
    padding: 0;
    
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: none;
    
    list-style: none;
}

.b-filter-select .filter-current {
	background: #fafafa;
	border: 1px solid #e2e2e2;
	border-bottom: 1px solid #dfdfdf;
}

.b-filter-select .filter-current:hover {
	background: #fafafa url(../img/light-btn.jpg) repeat-x top;
	box-shadow: 0 2px 2px rgba(0,0,0,0.04);
	border-color: #d9d9d9;
	border-bottom: 1px solid #cecece;
}

.b-filter-select .filter-current:active {
	background: #f5f5f5;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
	border-color: #d9d9d9;
}

.b-filter-select .filter-current:after {
	content: "\f0d7";

	float: right;
	margin-top: 5px;
	font: 12px 'FontAwesome';
}

.b-filter-select li, .b-filter-select .filter-current {
    padding: 5px 15px 4px;
    
    line-height: 22px;
    cursor: pointer;
}

.b-filter-select li:hover {
    margin: 0 -1px;
    
    background: #e34735;
    color: #fff;
}


/*--------------------------------------------------*/

.tag {
	margin: 15px 7px 0 0;
	padding: 0 13px;

	line-height: 28px;
}

.work {
	position: relative;
	margin-bottom: 40px;

	text-align: center;
}

.work-image {
    display: block;
    position: relative;
    z-index: 2;
    overflow: hidden;
	
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);

	-webkit-transition: box-shadow 0.2s ease;
	transition: box-shadow 0.2s ease;
}

.work-image img {
    width: 100%;
    display: block;
    
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.work-image:hover img {
    -webkit-transform: scale(1.1);
	transform: scale(1.1);
}

.link-overlay {
	position: absolute;
	top: 0;       left: 0;
	bottom: 0;    right: 0;

	background: rgba(0,0,0,0);

	-webkit-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;
}

.link-overlay:before {
	display: block;

	width: 46px;
	height: 46px;

	position: absolute;
	top: 50%;    left: 50%;

	margin: -22px 0 0 -25px;

	border-radius: 50%;
	background: #fff;

	text-align: center;
	font: 14px/46px 'FontAwesome';
	color: #2c2c2c;

	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	opacity:0;

	-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.work-image:hover .link-overlay { background: rgba(20,22,23,0.6);}

.work-image:hover  .link-overlay:before {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity:1;
}


.work p { margin: 0; }

.work-name {
	display: inline-block;
	margin: 15px 0 6px;

	font: 14px 'OpenSansSemiboldRegular';
}

a.work-name {
	color: #313538;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;

	position: relative;
}

a.work-name:hover {
	color: #e34735;
}

.tags {

	font: 12px 'OpenSansItalic';
	color: #c9c9c9;
}


/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}
