#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: 30%;
        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%;

    }
}
/*//////PROJECTS///////*/
#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;
}
    @media screen and (max-width:1960px){
        #Project{  
            height:40vh;
        }
        }
    @media screen and (max-width:1100px){
        #Project{  
            height:50vh;
        }
        }
    @media screen and (max-width:800px){
        #Project{  
            height:50vh;
        }
        }
    @media screen and (max-width:600px){
        #Project{  
             height:45vh;
        }
        }
    @media screen and (max-width:414px){
        #Project{  
            height:auto;
            flex-wrap:wrap;
            border-bottom:none;
            padding:0;
            border-top:none;
            justify-content:end;
            margin-top:6%;
        }
        } 

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

#Project:hover .ProjectTitle,
#Project:hover .Projectsp,#Project:active .Projectsp, #Project:focus .Projectsp,
#Project:hover h5, #Project:active h5, #Project:focus h5{
    color:white;
}

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

.projectTitle{
    width:60%;
    padding-right:10%;
    color:black;
}
    @media screen and (max-width:1100px){
        .projectTitle{
            width:100%;
        }
        }
        @media screen and (max-width:414px){
            .projectTitle{
                display:block;
                width:100%;
                padding:5% 8% 5% 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;
}

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

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

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

#Project:focus >.ProjectImg{
    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%;
  }