@charset "UTF-8";
/* CSS Document TEST */
html {
	height:100vh;
	width:100vw;
}
body {
  	height:100vh;
	width:100vw;
	margin:0;
	overflow: hidden;
	justify-content: center;
    will-change: opacity;
}
#container{
    position:absolute;
    display:flex;
    justify-content:center;
	align-items:center;
	height: 100vh;
	width: 100vw;
    overflow: hidden;
    background-color: #f0f0f0;
    z-index: -10000;
}
#slideshow {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	display: flex;
	align-items:center;	
    justify-content: right;
    z-index:0;
    padding-right: 10vw;
    padding-left: 10vw;
}
#about{
    position:fixed;
	height: 100vh;
	width: 100vw;
    display: flex;
	justify-content:left;
	overflow:hidden;
    align-items:flex-end;
    opacity:.5;
    mix-blend-mode:normal;
    }
#info{
    position:fixed;
	height: 80vh;
	width: 80vw;
    display: flex;
	justify-content:center;
	overflow:hidden;
    align-items:center;
    mix-blend-mode:normal;
    z-index: 1000;
}
#topbar{
    position:absolute;
    top: 5vh;
    height: 5vh;
    width: 100vw;
    z-index: 10;
    mix-blend-mode: difference;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
}
#overlay{
	position: absolute;
	height: 100vh;
	width: 100vw;
	justify-content:left;
    align-items:flex-end;
    opacity:1;
    z-index:1;
    mix-blend-mode:difference;
    display: flex;
}
#logo,
#item,
#indice {
    font-family: 'Gabarito', sans-serif; 
    color:whitesmoke;
    font-size: max(2vh, 1.5vw);
    font-weight:600;
    line-height: normal;
}
#indice{
   text-align: right; 
   padding-right: 5vw;
}
#logo{
    text-align: left;
    padding-left: 5vw;
}
#item{
    opacity:0;
}
#indice:hover > #item{
    opacity:1;
    transition: ease-in-out;
    transition-duration: 750ms;
}
.overlay__logo{
	width: 100vw;
    height: 100vh;
	overflow: hidden;
    display: flex;
    padding-bottom:0vh;
    z-index: 1;
    align-items: flex-end;
}
.project__list{
    width: 100vw;
    height: 100vh;
	overflow: hidden;
    display: flex;
    padding-bottom:0vh;
    align-items:flex-end;
     }

.prev, .next{
    position:absolute;
    bottom:25vh;
    z-index: 1000;
    color:black;
    padding: 25px;
    font-size:7vh;
    opacity:.4;
}

.prev{
    left: 2vw;
}
.next{
    right: 2vw;
}
.slide {
	max-width: 80vw;
	max-height: 75vh;
}
h1 {
    padding: 0vh 10vw 5vh 10vw;
    font-family: 'Gabarito', sans-serif; 
	color: whitesmoke;
	font-size: max(5vw, 5vh);
    font-weight: 900;
    line-height: max(5vw, 5vh);
    align-self: flex-end;
}
h2 {
    padding: 10vh 10vw 0vh 10vw;
    font-family: 'Gabarito', sans-serif; 
	color: whitesmoke;
    mix-blend-mode: screen;
	font-size: max(3vw, 3vh);
    font-weight: 600;
    line-height: normal;
    text-align: left;
    align-self: flex-end;
}
p1 {
    padding: 10vh 50vw 10vh 10vw;
    font-family: 'Gabarito', sans-serif; 
    color:black;
    font-size: max(2vh, 1.5vw);
    font-weight: 800;
    line-height: normal;
    text-align:justify;
}

p2 {
    padding: 20vh 50vw 10vh 10vw;
    font-family: 'Gabarito', sans-serif; 
    color:whitesmoke;
    font-size: max(4vh, 2vw);
    font-weight: 600;
    line-height:max(4vh, 2vw);
    text-align: left;
}
span::selection{
    color: whitesmoke;
}
.overlay__logo p1 span{
    text-decoration:none;
}

/* CSS for the popup container */
.project__list p1 span .popup2{
    position:absolute;
    right:10vw;
    bottom:10vh;
    transform-origin: center;
    max-width: auto;
    max-height: 80vh;
    max-width: 65vw;
    opacity: .0;  
}

.project__list p1 span:hover .popup2{
    opacity: 1;
    transition: ease-in-out;
    transition-duration: 750ms;
}

.overlay__logo p1 span .popup{
    position: absolute;
    transform: translate(-50%, -50%);
    max-width: auto;
    height: 50vh;
    visibility: hidden;
}
.overlay__logo p1 span:hover .popup{
    visibility: visible;
    background: black;
    mix-blend-mode:screen;
}

.overlay__logo p1 span:hover{
    color:whitesmoke;
}
a:link {
	color:currentColor;
	text-decoration: none;
	cursor: pointer;
}
a:visited {
	color:currentColor;
	text-decoration:line-through;
}
a:hover {
	color:whitesmoke;
	text-decoration:underline;
}
h1::selection {
    color: whitesmoke;
    text-decoration: none;
}
a::selection{
    color:black;
    text-decoration: none;
}

h2::selection{
    color: black;
    text-decoration: none;
}
p1::selection {
    color: whitesmoke;
    text-decoration: none;
}
.prev:hover, .next:hover{
    text-decoration: none;
    opacity:1;
    mix-blend-mode: difference;
}
#about:hover{
	opacity:1;
    mix-blend-mode: difference;
}
#container:hover .prev .next:hover #overlay{
    opacity:.5;
    transition: ease-in-out;
    transition-duration: 750ms;
}
.prev:hover ~ #overlay,
.next:hover ~ #overlay{
    opacity:0;
    transition: ease-in-out;
    transition-duration: 50ms;
}
/*#overlay:hover{
    opacity:1;
    transition: ease-in-out;
    transition-duration: 750ms;
}
#overlay:hover + #about{
	opacity:1;
    transition: ease-in-out;
    transition-duration: 500ms;
}
*/