/* @font-face {
 font-family: "Sequel";
 src: url("../fonts/Sequel Sans Medium Body.ttf") format("ttf");
} */
@font-face {
    font-family: 'SequelMedium';
    src: url("../fonts/Sequel_Sans_Medium_Body.ttf");
}
@font-face {
    font-family: 'SequelBody-o';
    src: url("../fonts/Sequel_Sans_Medium_Head.ttf");
}
@font-face {
    font-family: 'SequelBody';
    src: url("../fonts/Sequel Sans Roman Body.ttf");
}
@font-face {
    font-family: 'SequelHead';
    src: url("../fonts/Sequel Sans Roman Head.ttf");
}
/* html,body{
	height: 100%;
} */
body
{
	font-size: 16px;
	font-family: 'SequelBody', 'Times new roman', arial, Helvetica, sans-serif, Impact, "Arial Black";
	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

body *
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul
{
	list-style: none;
}
a
{
	text-decoration: none;
}

.header-bar{
	height: 38px;
	width: 100%;
	background: #4269EB; /* blue */
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 1em;
	position: fixed;
	top: 0;
	left: 0;
	font-size: 1.3em;
	padding: 0 10px;
	cursor: pointer;
	z-index: 2200;
	font-family: 'SequelHead';
	letter-spacing: 1px;
}
.header-bar:hover{
	background: #3B5FD6;
}
	.header-bar .left-text{
		position: relative;
		top: -1px;
		min-width: 94px;
	}
	.header-bar .right-text{
		min-width: 58px;
		margin-left: calc(100% - 68px - 94px);
		position: relative;
		top: -1px;
		transition: margin .3s;
	}
	body.modal-header-active .header-bar .right-text{
		margin-left: 6px;
	}
	body.modal-header-active .header-bar {
		cursor: unset;
	}
.left-bar,
.right-bar{
	position: fixed;
	top: 38px;
	width: 38px;
	height: calc(100vh - 38px);
	z-index: 2000;
}
.left-bar{
	background: #F2DC30; /* yellow */
	left: 0;
	font-size: 1.3em;
	overflow: hidden;
	cursor: pointer;
	font-family: 'SequelHead';
	letter-spacing: 1px;
	transition: opacity .3s;
}
.left-bar:hover{
	background: #E3CE2B;
}
	.title{
		width: calc(100vh - 38px - 5px);
		display: block;
		transform: rotate(270deg);
		transform-origin: center left;
		position: absolute;
		overflow: hidden;
		white-space: nowrap;
		padding-right: 15px;
		text-overflow: ellipsis;
		left: 0;
		bottom: 0;
		text-align: right;
		margin-left: 14px;
		font-size: 1.1em;

		height: 38px;
		margin-left: 50%;
		padding-top: 3px;
		padding-right: 24px;
	}
body.modal-filters-active .left-bar{
	opacity: 0;
}
.right-bar{
	background: #F45B22;
	right: 0;
}
	body.zoom-slider-in-use .right-bar::before{
		content:"";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
	body.zoom-slider-in-use{
		cursor: n-resize;
	}
	body .right-bar .btn-close{
		left: 0;
		top: 0;
		z-index:2000;
		width: 38px;
		left: 0;
		top: 5px;
		display: none;
		/* transform: scale(.7); */
	}
	body .right-bar .btn-close::before,
	body .right-bar .btn-close::after{
		left: calc(50% - 2px);
	}
	
	.zoom-slider{
		width: 100%;
		height: calc(100% - 38px);
		position: relative;
		background: #F45B22;
	}
		.right-bar .zoom-slider-cursor{
			width: 100%;
			height: 38px;
			border-radius: 100%;
			background: #000;
			position: absolute;
			left: 0;
			top: calc(17.6% - 16px);
			cursor: pointer;
			display: block;
		}
		.right-bar .zoom-slider-cursor:hover,
		.right-bar .zoom-slider-cursor.moving{
			background: #fff;
		}











body.zoom-slider-in-use *{
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}


.main-container{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	display: flex;
	padding: 38px;
	/* padding-right: 15px; */
	padding-bottom: 0;
	position: relative;
	z-index: 1000;
}

	.left-col, .right-col{
		width: 50%;
		overflow: auto;
		/* overflow: overlay; */
		height: 100%;
	}
	.right-col{
		border-left: 1px solid #000;
	}

	/* for mobile only: */
	.right-col.galery-mono-col{
		width: calc(100%);
		height: 100%;
		overflow: hidden;
		border-left: none;
		display: none; /* mobile only */
	}
	.right-col.galery-mono-col .projects-img-list{
		width:calc(50% - 2px);
		overflow: auto;
		padding: 0;
	}
	.right-col.galery-mono-col .projects-img-list li{
		width:100%;
		margin: 0;
	}
	.right-col.galery-mono-col .projects-img-list li + li{
		margin-top: 4px;
	}
	.right-col.galery-mono-col .sub-left-col.projects-img-list{
		
	}
	.right-col.galery-mono-col .sub-right-col.projects-img-list{
		margin-left: auto;
	}

	.left-col.projects-summary{
	
	}
		.left-col.projects-summary .projects-list{
			color: #000;
		}
			.left-col.projects-summary .project-btn{
				border-bottom: 1px solid #707070;
				padding: 10px 20px;
				font-size: 2.6em;
				cursor: pointer;
				/* font-family : 'SequelMedium'; */
			}
			.left-col.projects-summary .project-btn:hover{
				background: #000;
				color: #fff;
			}

	.right-col{
	
	}
		.right-col .projects-img-list{
			display: flex;
			flex-wrap: wrap;
			padding-right: 5px;
		}
			.right-col .projects-img-list li{
				position: relative;
				width: calc(17.6% + ( (100 - 25) * 20% / 100));
				cursor: pointer;
				margin-left: 5px;
				margin-top: 5px;
			}
			.right-col .projects-img-list li .wrapper{
				position: relative;
			}
				.right-col .projects-img-list img.main-img,
				.right-col .projects-img-list img.alt-img,
				.right-col .projects-img-list .open-tile-info{
					display: block;
					width: 100%;
					transition: opacity .1s;
				}
				.right-col .projects-img-list img.main-img{
					display: block;
					position: relative;
					z-index: 1;
				}
				.right-col .projects-img-list img.alt-img{
					position: absolute;
					display: block;
					top: 0;
					left: 0;
					z-index: 5;
					opacity: 0;
				}
				.right-col .projects-img-list li:hover img.alt-img{
					opacity: 1;
				}
				.right-col .projects-img-list .open-tile-info{
					position: absolute;
					display: block;
					top: 0;
					left: 0;
					z-index: 10;
					background: #000;
					color: #fff;
					opacity: 0;
					height: 100%;
					overflow: hidden;
					display: flex;
					align-items: end;
					overflow: hidden;
					transition: opacity .3s;
				}
				.right-col .projects-img-list .open-tile-info.btn-close-light{
					margin: 0;
					pointer-events: none;
				}
				body .right-col .projects-img-list li[data-project] .open-tile-info:hover{
					color: rgba(255,255,255,.5);
				}
					.right-col .projects-img-list .action,
					.right-col .projects-img-list .project-year{
						padding: 6px 10px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.right-col .projects-img-list .action{
						left: 0;
						padding-right: 0;
					}
					.right-col .projects-img-list .project-year{
						right: 0;
    					flex-shrink: 0;
						margin-left: auto;
					}


/* MODALs ================================== */

.modal{
	position: relative;
	z-index: 10000;
	display: none;
	padding: 15px;
	padding-right: 50px;
	padding-bottom: 60px;
	max-height: 100vh;
}
.modal .btn-close,
.right-bar .btn-close{
	position: absolute;
	right: 10px;
	top: 10px;
	color: #fff;
	font-size: 2em;
	width: 30px;
	height: 30px;
	cursor: pointer;
}
.modal .btn-close:hover,
.right-bar .btn-close:hover{
	opacity: .5;
}
	.modal .btn-close::before,
	.modal .btn-close::after,
	.right-bar .btn-close::before,
	.right-bar .btn-close::after{
		content: "";
		width: 2px;
		height: 100%;
		position: absolute;
		background: #fff;
		left: calc(50% / 2 + 1px / 2);
		top: 0;
	}
	.modal .btn-close::before,
	.right-bar .btn-close::before{
		transform: rotate(45deg);
	}
	.modal .btn-close::after,
	.right-bar .btn-close::after{
		transform: rotate(-45deg);
	}


.modal.about{
	position: fixed;
	top: 38px;
	left: 0;
	background: #4269EB;
	color: #fff;
	width: 100%;
	font-size: 1.05em;
	opacity: 0;
	/*transition: opacity .5s;*/
	z-index: 2300;
	display: flex;
	pointer-events: none;
}
body.modal-header-active .modal.about{
	opacity: 1;
	pointer-events: auto;
	min-height: 50vh;
}
	.modal.about .btn-close{
		top: -34px;
	}
	.modal.about .displayed-content{
		max-width: 600px;
		max-height: 100vh;
		/* min-height: 50vh; */
		overflow: auto;
		padding-top: 10px;
		padding-left: 96px;
		font-size: 1.3em;
	}
		.modal.about .displayed-content p{
			margin-bottom: 20px;
		}
		.modal.about .displayed-content a{
			color: #fff;
			text-decoration: underline;
		}
		.modal.about .displayed-content a:hover{
			/* opacity: .5; */
			text-decoration: none;
		}
		.modal.about .displayed-content ul.social-networks{
			margin-top: 30px;

		}
			.modal.about .displayed-content .social-networks li{
				display: inline-block;
			}
			.modal.about .displayed-content .social-networks li + li{
				margin-left: 20px;
			}
			.modal.about .displayed-content .social-networks li a{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50px;
				height: 50px;
				border-radius: 100%;
				border: 2px solid #fff;
				color: #fff;
				text-decoration: none;
				padding-bottom:4px;
			}
			.modal.about .displayed-content .social-networks li a:hover{
				opacity: 1;
				background: #fff;
				color: #4269EB;
			}


.modal.filters{
	position: fixed;
	top: 38px;
	left: -25%;
	left: -400px;
	color: #000;
	/* width: 25%;
	min-width: 400px; */
	width: 400px;
    max-width: 100%;
	height: calc(100vh - 38px);
	/* opacity: 0; */
	transition: opacity .5s, left .5s;
	z-index: 1900;
	display: flex;
	pointer-events: none;
	font-size: 1.3em;
	padding-bottom: 20px;
	padding-left: 10px;
}
.modal.filters::before{
	content: "";
	/* width: 0; */
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #F2DC30;
	transition: width .3s;
	z-index: -1;
}
body.modal-filters-active .modal.filters{
	opacity: 1;
	left: 0;
	pointer-events: auto;
}
body.modal-filters-active .modal.filters::before{
	/* width: 100%; */
}
	.modal.filters .btn-close::before,
	.modal.filters .btn-close::after{
		background: #000;
	}
	.modal.filters .title{

	}
	.modal.filters ul.categories{
		margin-left: 20px;
		margin-top: 50px;
		overflow: auto;
	}
		.modal.filters ul.categories li{
			margin-bottom: 5px;
			position: relative;
			padding-left: 30px;
			cursor: pointer;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.modal.filters ul.categories li[data-category="p-all"]{
			margin-bottom: 15px;
			position: relative;
			padding-left: 30px;
			cursor: pointer;
		}
		.modal.filters ul.categories li:hover{
			/* opacity: .5; */
		}
		.modal.filters ul.categories li .check{
			content: "";
			width: 16px;
			height: 16px;
			border: 1.5px solid #000;
			border-radius: 50px;
			position: absolute;
			top: 5px;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
			.modal.filters ul.categories li.active .check .inner{
				width: 10px;
				height: 10px;
				background: #000;
				border-radius: 50px;
			}


/* Projects details modals */
   
.modal.project-detail{
	position: fixed;
	top: 38px;
	left: 38px;
	background: #fff;
	color: #000;
	width: calc(50% - 38px);
	height: calc(100vh - 38px);
	padding: 10px;
	overflow-x: hidden;
}
	/* .btn-close-light{
		margin-bottom: 20px;
		margin-top: 10px;
		cursor: pointer;
		display: inline-block;
	}
	.btn-close-light:hover{
		opacity: 0.5;
	} */
	
	.project-header{
		font-size: 1.2em;
		display: flex;
		margin-bottom: 10px;
		font-size: 1.3em;
	}
		.project-title{
			font-size: inherit;
			font-weight: normal;
			font-family: 'SequelHead';
		}
		.project-year{
			margin-left: auto;
		}

	.modal.project-detail p,
	.modal.project-detail figure,
	.modal.project-detail video{
		margin-bottom: 30px;
	}
	.modal.project-detail .slide figure{
		margin-bottom: 0px;
	}
	.modal.project-detail p,
	.modal.project-detail figure,
	.modal.project-detail img,
	.modal.project-detail video{
		width: 100%;
	}
	.modal.project-detail p{
		font-size: 1.1em;
		line-height: 1.2em;
	}
	.modal.project-detail figure{

	}
		.modal.project-detail img{

		}