﻿/* PROJECTS LIST*/

.project article{
	position:relative;
}

.project article .project-layer{
	z-index:51;
	position:absolute;
	width:100%;
	height:100%;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	opacity:0;
	-webkit-transition:all 1000ms ease;
	-moz-transition:all 1000ms ease;
	-ms-transition:all 1000ms ease;
	-o-transition:all 1000ms ease;
	transition:all 1000ms ease;
}
.project article:hover .project-layer{
	opacity:1;
}
.project article .project-layer-bg {
	z-index: 50;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #000;
	opacity: 0;
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
}
.project article:hover .project-layer-bg{
	opacity:0.5;
}

.project .project-item {
	margin:0;
}
.project .project-item .col-md-1 {
	position:relative;
	margin:0;
	padding:0;
}
.project .project-item .col-md-10 {
	padding:0;
}
.project .project-item .col-md-10 img {
	margin:0 auto;
}

.project {
	padding-top:40px;
	margin-bottom:60px;
}
.project.small {
	width:95vh;
	margin-left:auto;
	margin-right:auto;
}

.project .project-item {
	display:-webkit-flex;
	display:flex;
}
.project .project-item .col-md-1 h2 {
	display:none;
	text-transform:uppercase;
	font-family:'EB Garamond';
	line-height:100%;
	color:#777;	
	margin:0;
	position:absolute;
	bottom:0;
	right:0;
	padding-right:6px;
	border-right:solid 1px #777;
	text-align:right;
	font-size:13px;
}

@media (max-width:1200px) {

	.project .project-item .col-md-10 {
		padding:0 18px;
	}
	.project .project-item .col-md-1 h2 {
		font-size:12px;
	}
}
@media (max-width:1024px) {
	.project {
		padding-top:20px;
		margin-bottom:40px;
	}
	.project .project-item .col-md-10 {
		padding:0 18px;
	}
	.project .project-item .col-md-1 h2 {
		display: block;
		font-size: 10px;
	}
}
@media (max-width:992px) {
	.project .project-item {
		display:block;
	}
	.project .project-item .col-md-1 h2 {
		display: block;
		position: relative;
		padding: 10px;
		border: 0;
		text-align: center;
		font-size: 13px;
	}
}
@media (max-width:768px) {
	.project {
		padding-top:10px;
		margin-bottom:20px;
	}
	.project .project-item .col-md-1 h2 {		
		display:block;	
		font-size:10px;
	}
	.project article:hover .project-layer {
		opacity: 0;
	}
	.project article:hover .project-layer-bg {
		opacity: 0;
	}
}

/* PROJECT */

#project {
	opacity:1;
	-webkit-transition:all 1000ms ease;
	-moz-transition:all 1000ms ease;
	-ms-transition:all 1000ms ease;
	-o-transition:all 1000ms ease;
	transition:all 1000ms ease;
}

#project.concealed {
	opacity:0;
}

#project #project-item {
	margin:0;
}
#project #project-item .col-md-1 {
	position:relative;
	margin:0;
	padding:0;
}
#project #project-item .col-md-1 #text-column {
	text-align: right;
	font-size: 1.5vh;
	padding: 0 10px;
}
#project #project-item .col-md-1 #text-column-button {
	display:none;
	cursor:pointer;
}
#project #project-item .col-md-1 #text-column-content {
	margin:10px 0;
	height: 0;
	overflow: hidden;
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;
}
#project #project-item .col-md-1 #text-column-content.active {
	height: auto;
}
#project #project-item .col-md-10 {
	padding:0;
}

@media (max-width:991px) {
	#project #project-item .col-md-1 #text-column-button {
		display: block;
		cursor: pointer;
	}
	#project #project-item .col-md-1 #text-column {
		text-align: left;
	}
}

#project #project-item article .swiper-slide {
	text-align:center;
}
#project #project-item article .swiper-slide .landscape {
	width:99%;
}
#project #project-item article .no-ss {
	display:block;
	clear:both;
	margin:20px 0 0 0;
}
#project #project-item article .no-ss .landscape {
	width:100% !important;
}

#project #project-item article #text-column-button-2 {
	position:absolute;
	z-index:1000;
	bottom:10px;
	left:5px;
	display: block;
	cursor: pointer;
}

@media (max-width:991px) {
	#project #project-item article #text-column-button-2 {
		display: none;
	}
}

#project {
	position:relative;
	padding-top:6vh;
	margin-bottom:20px;
}
#project.small {
	width:95vh;
	margin-left:auto;
	margin-right:auto;
}

#project .swiper-button-prev {
	position: absolute;
	top: 0 !important;
	left: 0 !important;
	width: 50% !important;
	height: 100% !important;
	margin-top: 0 !important;
	z-index: 10;
	background: none !important;
	background-color: fuchsia;
	cursor:url('../Imgs/cursor-left.png'), auto !important;
}
#project .swiper-button-next {
    position:absolute;
    top:0 !important;
	right:0 !important;
    width:50% !important;
    height:100% !important;
    margin-top:0 !important;
    z-index:10;
    background:none !important;
	background-color:fuchsia;
	cursor:url(../Imgs/cursor-right.png), auto !important;
}
#project .swiper-pagination {
	position:relative !important;
	display:block !important;
	clear:both !important;
	width:100% !important;
	margin:10px 0 !important;
}
#project .swiper-pagination-bullet {
    width:6px!important;
    height:6px !important;
	margin:0 5px;
}
#project .swiper-pagination-bullet-active {
    opacity:1;
    background:#777 !important;
}

#project #project-dida{
	position:absolute;
	bottom:-20px;
	left:0;
	width:100%;
	height:auto;
	text-align:center;
}
#project #project-dida h1{
	width:95%;
	padding-left:5%;
	font-size:1.5vh;
	font-family:'EB Garamond';
	text-transform:uppercase;
	margin:2px;
}
#project #project-dida h1 span{
	display:inline-block;
	margin-left:5px;
	padding-left:5px;
	border-left:solid 1px #ccc;
	font-family:Raleway;
	font-size:1.3vh;
}
#project-close {
	position:absolute;
	display:block;
	bottom:0;
	right:5px;
	margin:0;
	padding:0;
}
#project-close img{
	width:80%;
	height:auto;
}

@media (max-width:1024px) {
	#project-close img{
		width:80%;
		height:auto;
	}
}
@media (max-width:992px) {
	#project-close img{
		width:60%;
		height:auto;
	}
	#project .swiper-button-next {
		display: none;
	}

	#project .swiper-button-prev {
		display: none;
	}

	#project .swiper-pagination-wrapper {
		display: none;
	}

	#project #project-dida {
		top: 10px;
		left: 0px;
		bottom:unset;
		height: auto;
		text-align: left;
	}

	#project-close {
		top: -4px;
		right: 0px;
		text-align: right;
	}
}
@media (max-width:768px) {
	#project-close img{
		width:40%;
		height:auto;
	}
}
/*
@media all and (orientation:portrait) {
	#project .swiper-button-next{
		display:none;
	}
	#project .swiper-button-prev {
		display:none;
	}
	#project .swiper-pagination-wrapper {
		display:none;
	}

	#project #project-dida{
		top:10px;
		left:0px;
		text-align:left;
	}
	#project-close {
		top:-4px;
		right:0px;
		text-align:right;
	}
}
*/