#sup { 
    vertical-align: super;
    display:inline-block;
}

#sup { 
    vertical-align: super;
    display:inline-block;
}

/*///////HEADER IMAGE animationnfade/////*/
@-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }

.Head-containerImg25048, .Head-containerImg1920, .Head-containerImg800{
    opacity:0;  /* make things invisible upon start */
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn  1s  ease-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode:forwards;

    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

#Head-container{
    width:100%;
    z-index:-10;
      margin: 0;
}

.Head-containerImg2048, .Head-containerImg1920, .Head-containerImg800{
    position:relative;
    width:100%; 
    opacity:0;
}
.Head-containerImg2048{
    aspect-ratio: 16 / 9;
    display: block;
    opacity:1;
}

.Head-containerImg1920, .Head-containerImg800{
    display:none;
}
    
    @media screen and (max-width:1920px){
        .Head-containerImg2048, .Head-containerImg800{
        display:none;
        }
        .Head-containerImg1920{
            display:block;
            aspect-ratio: 8 / 3;
            }
        }
    @media screen and (max-width:800px){

        
        .Head-containerImg2048, .Head-containerImg1920{
        display:none;
        }
        .Head-containerImg800{
            display:block;
			width:100%;
            aspect-ratio: 4 / 3;
			margin:0;
			padding:0;         
            }
        }



/*///////HEADER TITLE/////*/
.Head-Title{
    position:absolute;
    top:50%;
    left:5%;
}
    @media screen and (max-width:1680px){
        .Head-Title{
            top:40vh;
            left:5%;
            height:20vh;
        }       
        }
    @media screen and (max-width:1536px){
        .Head-Title{
            top:55vh;
            left:5%;
            height:20vh;
        }       
        }
    @media screen and (max-width:1336px){
        .Head-Title{
            top:45vh;
            left:5%;
            height:20vh;
        }       
        }
    @media screen and (max-width:1120px){
        .Head-Title{
            top:30vh;
            left:5%;
            height:20vh;
        }       
        }
    @media screen and (max-width:1000px){
        .Head-Title{
            top:25vh;
            left:5%;
            height:15vh;
        }       
        }
  @media screen and (max-width:800px){
        .Head-Title{
            top:50vh;
            left:10%;
            height:15vh;
        }       
        }
        @media screen and (max-width:600px){
            .Head-Title{
                top: 40vh;
                left:10%;
                height:33vh;
            }       
            }
        @media screen and (max-width:414px){
            .Head-Title{
                top: 30vh;
                width:100%;
                margin:auto;
                height:20vh;
            }       
            }

h4{
    font-size:3vw;
    font-weight:300;
}
    @media screen and (max-width:1680px){
        h4{
            font-size:3.5vw;
            font-weight:300;
        }
        }
    @media screen and (max-width:1280px){
        h4{
            font-size:4vw;
            font-weight:300;
        }
        }
    @media screen and (max-width:1120px){
        h4{
            font-size:5vw;
            font-weight:300;
        }
        }
        @media screen and (max-width:1100px){
            h4{
                font-size:4.5vw;
                font-weight:300;
            }
            }
            @media screen and (max-width:600px){
                h4{
                    font-size:5vw;
                    font-weight:300;
                }
                }
        @media screen and (max-width:414px){
            h4{
                font-size:8vw;
                font-weight:300;
            }
            }  

.Headerp{
    font-size:1.5vw;
    letter-spacing: .1em;
    margin-top:4%;
}
@media screen and (max-width:1680px){
    .Headerp{
        font-size:1.5vw;
        letter-spacing: .1em;
    }
    }
@media screen and (max-width:1280px){
    .Headerp{
        font-size:1.5vw;
        letter-spacing: .1em;
    }
    }
    @media screen and (max-width:1120px){
        .Headerp{
            font-size:2vw;
            letter-spacing: .1em;
        }
        }
        @media screen and (max-width:800px){
            .Headerp{
                font-size:2.5vw;
                letter-spacing: .1em;
            }
            }
        @media screen and (max-width:600px){
            .Headerp{
                font-size:4vw;
                letter-spacing:normal;
            }
            }

/*///////HEADER ARROW/////*/
.svgContainer{  
        display: inline-block;
        position: relative;
        width: 50%;
        height:20%;
        padding-bottom: 50%; 
        vertical-align: middle; 
        overflow: hidden; 
}
    @media screen and (max-width:1680px){
        .svgContainer{  
            width: 20%;
        }
        } 
    @media screen and (max-width:1280px){
        .svgContainer{  
            width: 20%;
        }
        } 
    @media screen and (max-width:1120px){
        .svgContainer{  
            width: 20%;
        }
        } 
        @media screen and (max-width:414px){
            .svgContainer{  
                height:8%;
                padding-bottom: 20%;
            }
            } 


.arrow { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

h6{
    font-size:5vw;
    font-weight:300;
    position:absolute;
    left:5%;
}
@media screen and (max-width:414px){
    h6{
        width:100%;
        margin:0 auto;
        margin-top:20%;
        font-size:12vw;
        position: relative;
        display:block;
        line-height:30px;
        text-align:right;
        padding-right:10%;

    }
}

/*//////CONTAINER////*/
#RE-Project{
    width:100%;
    display:flex;
    padding:0 0 0 5%;
    align-items:center;
    height:30vh;
    overflow:hidden;
    justify-content:space-between;
    border-bottom:solid .5px black;
    transition: 1s;
}

.RE-Project-First{
    margin-top:11%;
    border-top:1px solid black;
}
@media screen and (max-width:1960px){
    #RE-Project{  
        height:40vh;
    }
    }

    @media screen and (max-width:1640px){
        #RE-Project{  
            height:30vh;
        }
        }

    @media screen and (max-width:1100px){
        #RE-Project{  
            height:20vh;
        }
        }
    @media screen and (max-width:800px){
        #RE-Project{  
            height:25vh;
        }
        }
        @media screen and (max-width:600px){
            #RE-Project{  
                height:20vh;
            }
            }
        @media screen and (max-width:414px){
            #RE-Project{  
                height:40vh;
                flex-wrap:wrap;
                border-bottom:none;
                padding:0;
                border-top:1px solid grey;
            }
            .RE-Project-First{
                margin-top:3%;
            }
            } 

#RE-Project:hover, #RE-Project:focus, #RE-Project:active{
    background:black;
}

#RE-Project:hover .RETitle, #RE-Project:hover .REp{
    color:white;
}

#RE-Project:hover .line, #RE-Project:focus .line{
    width: 200px;
}

.RETitle{
    width:60%;
    padding-right:10%;
    color:black;
}
    @media screen and (max-width:1100px){
        .RETitle{
            width:100%;
        }
        }
        @media screen and (max-width:414px){
            .RETitle{
                width:100%;
                padding:5% 8% 1% 8%;
            }
            }

h5{
    display:block;
    font-size:2.2vw;
    font-weight:300;    
}
@media screen and (max-width:1680px){
    h5{ 
        font-size:3vw;
    }
    }
@media screen and (max-width:1280px){
    h5{ 
        font-size:3.5vw;
    }
    }
    @media screen and (max-width:1120px){
        h5{ 
            font-size:3.5vw;
        }
        }
        @media screen and (max-width:800px){
            h5{ 
                font-size:3.5vw;
            }
            }
            @media screen and (max-width:600px){
                h5{ 
                    font-size:4vw;
                }
                }
            @media screen and (max-width:414px){
                h5{ 
                    font-size:7vw;
                }
                }

.line{
  width: 50px;
  height: 2px;
  background: rgba(0, 253, 219);
  transition: width 1.5s .1s ease;
  margin-bottom:2%;
}

.line:hover {
  width: 200px;
}

.REp{
    color:grey;
    font-size:1.3vw;
    font-weight:300;
}
    @media screen and (max-width:1680px){
        .REp{
            font-size:1.8vw;
        }
        }
    @media screen and (max-width:1280px){
        .REp{
            font-size:2vw;
        }
        }
    @media screen and (max-width:1120px){
        .REp{
            font-size:2vw;
        }
        }
        @media screen and (max-width:800px){
            .REp{
                font-size:2.5vw;
            }
            }
            @media screen and (max-width:600px){
                .REp{
                    width:100%;
                    font-size:3vw;
                }
                }
            @media screen and (max-width:414px){
                .REp{
                    font-size:5vw;
                    line-height:6vw;
                }
                } 

.REImg{
    width:40%;
    aspect-ratio:2/1;
    transform:translateX(900px);
    animation:positionImgOut 1s;
    opacity:0;
    transition:1s;

}

.REImg img{
    display:block;
    width:100%;
    }
    
    @media screen and (max-width:1100px){
        .REImg{ 
            width:10%;
            display:none;
        }
        }
        @media screen and (max-width:414px){
            .REImg{ 
                width:100%;
                display:block;
                opacity:1;
                animation:positionImgmob 1s ease-out forwards;
                transform:translateX(0px)
                
            }
            }

#RE-Project:hover >.REImg{
    animation:positionImg 1s ease-out forwards;
    opacity:1;
}

#RE-Project:focus >.REImg{
    animation:positionImg 1s ease-out forwards;
}

@keyframes positionImg{
    from { transform:translateX(900px)}
    to{  transform:translateX(0px)}
  }

  @keyframes positionImgmob{
    from { transform:translateX(900px)}
    to{  transform:translateX(0px)}
  }

  @keyframes positionImgOut{
    from { transform:translateX(0px)}
    to{  transform:translateX(900px)}
  }

  main{
      margin-bottom:5%;
  }

  /*BOTTOM - PAGE BUTTONS*/
  
#PRJ-button{
    background-color: rgba(246, 244, 239, 0.9);
    width:5vw;
    height:5vw;
    z-index: 99999;
    border-style: none;
  }
  #PRJ-button:hover{
    background-color:var(--background);
  }
@media screen and (max-width: 1536px){
    #PRJ-button {
        width:7vw;
        height:7vw;
  }
}

@media screen and (max-width: 1024px){
    #PRJ-button {
        width:10vw;
        height:10vw;
  }
}

@media screen and (max-width: 768px){
    #PRJ-button {
        width:12vw;
        height:12vw;
  }
  #PRJ-button p{
    font-size:16px;

  }
}
@media screen and (max-width: 600px){
    #PRJ-button {
        width:11vw;
        height:8vw; 
        margin:0;              
    }
    #PRJ-button p{
        font-size:11px;  
    }
    #PG-Buttons{
        flex-direction: column;
        bottom: 0;
        right:0;
    }
}


@media screen and (max-width: 414px){
    #PRJ-button {
        width:16vw;
        height:10vw; 
    }
    #PRJ-button p{
        font-size:9px;  
    }
    #PG-Buttons{
        gap: 0;
        padding-right:0;
    }

}

  #PG-Buttons{
    display:flex;
    position:sticky;
    bottom: 0;
    right:0;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 1px;
    padding-right:0;
  }
  @media screen and (max-width: 500px){
    #PG-Buttons{
        justify-content:space-between;
        align-items:space-between;
        padding-right:0;
  }
}