/*HEADER*/
.logo a:hover{
	box-shadow: none;
	transform: none;
	cursor: default;
}
.home-intro-container{
	position: absolute;
	max-width: 800px;
	margin: 5%;
}
.home-intro{
	font-size: 30;
	font-weight: 700;
	line-height: 1.5em;
	letter-spacing: -.9;
}

.h1-container {
	display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    height: 75vh;
	border-bottom: 2px dashed #DC005F30;
	margin-bottom:20vh;
}
.h1-hp{
	align-self: end;
	padding-top: 0;
	line-height: 1.01;
	grid-area: stack;
	margin-right:5%;
	/*animation: parallax ease-out;
	animation-timeline: scroll();*/
}
/*.h1-hp{
	--move: -220vw;
}
@keyframes parallax {
	to {
		transform: translateX(var(--move));
	}
}*/

/*.site-title-grid{
	border-top: 2px dashed #DC005F30;
}*/
/*PROJECTS*/
/*Structure*/
.home-projects-pending-background{
	color: #FFF4E8;
	background: #AB004A;
	width: 100vw;
	position: relative;
	left: -3.13vw;
}
.home-projects-pending-container{
	padding: 4rem 3%;
	display: block;
	margin: 0 4.8%;
}
.home-projects-pending-container h2{
	margin-bottom: 2rem;
	display: block;
}
.home-projects-pending{
	display: inline-flex;
	gap: 4rem;
	justify-content: center;
}
.project-pending-1, .project-pending-2{
	width:50%;
	max-width: 760px;
}
.project-pending-text{
	padding:1rem 0;
}
.project-pending-text a{
	color: #FFF4E8;
	text-decoration: underline;
}
.project-pending-text a:hover{
	text-decoration: none;
}
.project-pending-list{
	font-weight: 300;
}

.home-projects-container{
	margin: 5%;
}
.home-projects-container h2{
	margin: 2rem 0;
}
.home-projects{
	display: block;
	list-style: none;
	/*border: 2px dashed #DC005F30;*/
}
.home-project{
	display: grid;
	grid-template-columns:33% 66%;
	margin:6em 0 3em;
}
/*.home-project-col-1{
	border-right: 2px dashed #DC005F30;
}*/
.home-project-col-1-row-2{
	display: block;
	margin-top: auto;
	margin-bottom: auto;
}
.home-project-col-1-row-2 h3{
	max-width: 300px;
    margin-left: auto!important;
}
/*.home-project-col-1, .home-project-col-2{
	display: grid;
	grid-template-rows:1fr 6fr;
}*/
.home-project-col-2-row-1{
	display: grid;
	grid-template-columns:50% 50%;
}
.home-project-col-2-row-2{
	margin-left: 1em;
}
/*.home-project-col-2-row-1-col-2{
	border-left: 2px dashed #DC005F30;
}*/
.home-project-col-2-row-2-col-1{
	display: grid;
	margin: 0 1rem;
	width: 90%;
	height: 475px;
	transition: width .4s ease-in-out;
}
.home-project:nth-child(1) .home-project-col-2-row-2-col-1{
	background: rgb(254,229,202);
    background: -webkit-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(17,54,129,1) 16%, rgba(17,54,129,1) 45%, rgba(220,0,23,1) 45%, rgba(220,0,23,1) 76%, rgba(254,229,202,0) 76%);
    background: -o-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(17,54,129,1) 16%, rgba(17,54,129,1) 45%, rgba(220,0,23,1) 45%, rgba(220,0,23,1) 76%, rgba(254,229,202,0) 76%);
    background: linear-gradient(103deg, rgba(254,229,202,0) 16%, rgba(17,54,129,1) 16%, rgba(17,54,129,1) 45%, rgba(220,0,23,1) 45%, rgba(220,0,23,1) 76%, rgba(254,229,202,0) 76%);
}
.home-project:nth-child(2) .home-project-col-2-row-2-col-1{
	background: rgb(254,229,202);
    background: -webkit-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(231,89,28,1) 16%, rgba(231,89,28,1) 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 76%, rgba(254,229,202,0) 76%);
    background: -o-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(231,89,28,1) 16%, rgba(231,89,28,1) 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 76%, rgba(254,229,202,0) 76%);
    background: linear-gradient(103deg, rgba(254,229,202,0) 16%, rgba(231,89,28,1) 16%, rgba(231,89,28,1) 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 76%, rgba(254,229,202,0) 76%);
}
.home-project:nth-child(3) .home-project-col-2-row-2-col-1{
	background: rgb(254,229,202);
    background: -webkit-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(243,150,53,1) 16%, rgba(238,126,62,1) 25%, rgba(226,65,86,1) 76%, rgba(254,229,202,0) 76%);
    background: -o-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(243,150,53,1) 16%, rgba(238,126,62,1) 25%, rgba(226,65,86,1) 76%, rgba(254,229,202,0) 76%);
    background: linear-gradient(103deg, rgba(254,229,202,0) 16%, rgba(243,150,53,1) 16%, rgba(238,126,62,1) 25%, rgba(226,65,86,1) 76%, rgba(254,229,202,0) 76%);
}
.home-project:nth-child(4) .home-project-col-2-row-2-col-1{
	background: rgb(254,229,202);
    background: -webkit-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(29,60,111,1) 16%, rgba(29,60,111,1) 45%, rgba(15,129,196,1) 45%, rgba(15,129,196,1) 76%, rgba(254,229,202,0) 76%);
    background: -o-linear-gradient(13deg, rgba(254,229,202,0) 16%, rgba(29,60,111,1) 16%, rgba(29,60,111,1) 45%, rgba(15,129,196,1) 45%, rgba(15,129,196,1) 76%, rgba(254,229,202,0) 76%);
    background: linear-gradient(103deg, rgba(254,229,202,0) 16%, rgba(29,60,111,1) 16%, rgba(29,60,111,1) 45%, rgba(15,129,196,1) 45%, rgba(15,129,196,1) 76%, rgba(254,229,202,0) 76%);
}

/*Title, link and tasks*/
.home-project ul{
	margin: 4rem 1rem 0 0;
	text-align: right;
	list-style: none;
}

.home-project li:after{
	content:" |";
}
.visible-link{
	margin: 4rem 0 0 1rem;
	text-align: right;
	margin-right: 1rem;
}
.visible-link a{
	text-decoration: underline;
}
.visible-link a:hover{
	text-decoration: none;
}
.home-project-col-1-row-2-row-1{
	display: flex;
    align-items: flex-end;
    margin: 1em auto;
}

/*Image*/
.home-project figure{
	margin: 1rem 1rem 0;
	overflow: visible;
	display: grid;
	grid-template-rows: 80% 20%;
}
.home-project figure img{
	max-height: 400px;
	max-width: 100%;
	transition: all .3s ease-in-out;
	transform-origin: left top;
}
.home-project-col-2-row-2-col-1:hover{
	width: 95%;
}
.home-project-col-2-row-2-col-1:hover img{
	transform: scale(1.03);
}


/*Quote*/
.home-project-quote{
	color: #fff;
	font-weight: 300;
	font-style: italic;
	margin: 2.5rem 4rem 0.5rem;
	z-index: 2;
	opacity: 0;
	-webkit-transition: opacity .4s ease-in;
	transition: opacity .4s ease-in;
}
.home-project-quote:before{
	content:"| ";
	font-style: initial;
}
.home-project-col-2-row-2-col-1:hover .home-project-quote{
	opacity: 1;
}
/*ABOUT*/

.home-about{
	margin: 10em auto;
	max-width: 836px;
	margin-left: auto;
	margin-right: auto;
}
.home-about-texts{
	margin: 2em 0;
	color: #DC005F;
}
.home-about-buttons-container{
	text-align: center;
}
.home-about-buttons{
	list-style: none;
	display: inline-block;
	padding: 0;
	column-count: 3;
}
.home-about-buttons li{
	margin: 0 1em 0 0;
}
.home-about-buttons li button{
	max-width: 175px;
	min-height:84px;
	cursor: url('cursor_example.png'), pointer;
}

/*MEDIA QUERIES*/

/*Specific desktop*/
@media screen and (max-width: 1430px){
	.home-project-col-2-row-2-col-1:hover img{
		transform: none;
	}
	.home-project figure img{
		max-width: 92%;
	}
	.home-project-col-2-row-2-col-1{
		height: 430px;
		width: 90%;
	}
	.home-project-quote{
		margin-top:1.8rem;
	}
}
@media screen and (max-width: 1280px){
	.home-project-col-1-row-2 h3{
		margin-left: 1em!important;
	}
	.home-project-col-2-row-2-col-1{
		width: 90%;
		height: 410px;
	}
	.home-project-col-2-row-2-col-1:hover{
		width: 94%;
	}
	.home-project-quote{
		margin:1.9rem 3rem 0;
	}
}

/*Desktop, default*/
@media screen and (min-width: 1201px){
	.home-project-col-1-row-2-row-1{
		display: block;
	}
}

/*Classic devices (landscape tablets, laptops)*/
@media screen and (max-width: 1200px){
	.home-project-col-1-row-2-row-1{
		display: block;
	}
	.home-project-col-2-row-2-col-1{
		height: 380px;
	}
	.home-project-col-2-row-2-col-1:hover{
		width: 96%;
	}
}

/*Specific project img home*/
@media screen and (max-width: 1080px){
	.h1-hp{
		line-height: 1.1;
		font-size: 99;
	}
	.home-project-col-2-row-2-col-1{
		width: 95%;
	}
	.home-project-col-2-row-2-col-1:hover{
		width: 100%;
	}
}

@media screen and (max-width: 960px){
	.home-intro-container{
		position: initial;
	}
	.h1-container {
    	height: 30vh;
    }
    .home-projects-pending-container{
    	margin-bottom: 15%;
    }
	.home-projects{
		margin-top:4rem;
		border:0;
	}
	.home-project, .home-project-col-1, .home-project-col-2{
		display: block;
		border: none;
	}
	.home-project-col-1-row-2 h3{
		margin-right: auto!important;
		margin-left: auto!important;
		max-width: 400px;
	}
	.home-project-col-1-row-2-row-1{
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 2em;
	}
	.home-project ul{
		text-align: left;
		margin: 2rem 0 0 1rem;
	}
	.home-project li:before{
		content:"| ";
	}
	.home-project li:after{
		content:none;
	}
	.home-project-col-2{
		margin: 0.5em;
	}
	.home-project-col-2-row-2{
		margin: 0 1em;
	}
	.home-project-col-2-row-2-col-1{
		display: block;
		width: 100%;
		height: initial;
		padding:1.2rem 0 1.5rem;
		margin: 0;
	}
	.home-project-col-2-row-2-col-1 figure{
		display: block;
	}
	.home-project-quote, .home-project-col-2-row-2-col-2{
		display: none;
	}
	.home-project-col-2-row-2-col-1:hover{
		transform:none;
	}
	.home-project figure, .home-project figure img{
		margin: 0 auto;
	}
	.home-project figure img{
		display: block;
		max-width: 100%
	}
	.home-about{
		margin: 10em 1em;
	}
	.home-about-buttons{
		column-count: 2;
	}
}

/*Medium devices (landscape phones, portrait tablets)*/
@media screen and (max-width: 768px){
	.h1-hp{
		font-size: 60;
    	margin-block-end: -0.9rem;
	}
	.home-projects-pending{
		display: block;
	}
	.project-pending-1, .project-pending-2{
	width:100%;
	}
	.project-pending-2 .project-pending-title{
		padding:4rem 0 2rem 0;
	}
	.home-project-quote{
		display: none;
	}
	.home-project figure img:hover{
		transform: none;
	}
	.home-project figure:hover{
		transform: none;
	}
	.home-about-buttons{
		column-count: 1;
	}
	.home-about-buttons li{
		margin: 0;
	}
	.home-about-buttons li button{
		width: auto;
	}
}

/*Small devices (portrait phones)*/
@media screen and (max-width: 576px){
	.h1-container {
    	height: 20vh;
    }
	.home-project-col-1-row-2 h3{
		margin-right: 1em!important;
		margin-left: 1em!important;
	}
	.home-project-col-1-row-2-row-1{
		display: block;
	}
	.visible-link{
		text-align: left;
		margin-top: 2em;
	}
}

@media screen and (max-width: 514px){
	.h1-container {
    	height: 18vh;
    }
	.h1-hp{
		font-size: 46;
		line-height: 1;
		margin-block-end: -0.6rem;
	}
}
/*Very small devices (SE)*/
@media screen and (max-width: 440px){
	mark{
		font-size: 24;
	}
    .h1-hp{
    	margin-block-end: -0.6rem;
    }
}

@media screen and (max-width: 380px){
	.home-intro{
		font-size:26px;
	}
	.h1-container{
		margin: auto;
	}
	.h1-hp{
		margin-block-end:-0.6rem;
	}