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

img{
    width:100%;
}

/*///////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%; 
    height:auto;
    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:30em;
    left:5%;
}
    @media screen and (max-width:1680px){
        .Head-Title{
            left:5%;
        }       
        }
    @media screen and (max-width:1536px){
        .Head-Title{
            left:5%;
        }       
        }
    @media screen and (max-width:1336px){
        .Head-Title{
            left:5%;

        }       
        }
    @media screen and (max-width:1120px){
        .Head-Title{
            left:5%;
            top:25em;
        }       
        }
    @media screen and (max-width:1000px){
        .Head-Title{
            left:5%;          
        }       
        }
  @media screen and (max-width:800px){
        .Head-Title{
            top:100vw;
            left:10%;
            top:20em;
        }       
        }
        @media screen and (max-width:600px){
            .Head-Title{
                left:10%;
            }       
            }
        @media screen and (max-width:414px){
            .Head-Title{
                width:100%;
                margin:auto;               
            }       
            }
        @media screen and (max-width:290px){
            .Head-Title{
                width:100%;
                margin:auto;
                top:15em;              
            }       
            }
        

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: 40%;
        height:15%;
        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%;

    }
}
/*///////////MAIN///////*/

#homeslider, .sliderimg, .homeProjects, img{
    width:100%;
}
.hometitles{
    margin:4% 0% 1% 4%;
}
@media screen and (max-width:800px){
    .hometitles{
        margin:4% 0% 1% 8%;
}
}

@media screen and (max-width:600px){
    .hometitles.contact.news{
        margin-top:-13%;
}
}
.hometitles h2{
    color:black;
    font-weight:100;
    font-size:2.8vw;
    letter-spacing:1vw;
}
/*SERVICES*/
.services-title{
    text-align:center;
    font-size:2.2vw;
    font-weight:100;
    padding: 3%;
}
    @media screen and (max-width:1280px){
    .services-title{
        padding: 2%;
    }
    }
    @media screen and (max-width:800px){
        .hometitle-News h2, .services-title{
            font-size:4vw;
            padding: 0;
            line-height: 0vh;
        }
        }

#homeServices-container{
    width:100;
    padding:10% 12% 0% 12%;
    position:relative;
    transition:.5s;
}

    @media screen and (max-width:1120px){
        #homeServices-container{
            padding:10% 5% 0% 5%;
        }
        }
#homeServices-container:hover{
    color:black;
}
#home-services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:5%;
    width:90%;
    margin:7% auto;
    padding-bottom:20%;
    text-align:center;
    font-size:1.3vw;
    color:grey;
}
    @media screen and (max-width:800px){
        #home-services-grid{
            width:100%;
            margin:2% auto;
            grid-gap:2%;
            padding-bottom:20%;
            font-size:2vw;
        }
        }
    @media screen and (max-width:800px){
         #home-services-grid {
            margin:4% auto;
            margin-bottom:15%;
        }
        }
     @media screen and (max-width:600px){
         #home-services-grid {
            grid-template-columns:repeat(2,1fr);
            margin:4% auto;
            margin-bottom:15%;
            font-size:3.6vw;
            grid-gap:10%;
            padding-bottom:30%;
        }
        }
.signServices{
  width:100%;
  height:7vh;
  margin:0 auto 10%;
  transition:.3s;
}
  @media screen and (max-width:1100px){
    .signServices{
      height:5vh;
    }
  }

  @media screen and (max-width:500px){
    .signServices{
      height:7vh;
      margin-top:12%;
    }
  }


  .signServices:hover {
  filter: invert(32%) sepia(55%) saturate(2000%) hue-rotate(138deg) brightness(200%) contrast(90%);
}
.linkServices h3{
    position:absolute;
    bottom:4%;
    right:4%;
    transition:0.1s;
    font-size:1.5vw;
    font-weight:1000;
    letter-spacing:.3vw;
}

    @media screen and (max-width:1280px){
    .linkServices h3{
        font-size:2vw;
        font-weight:100;
    }
    }

    @media screen and (max-width:800px){
        .linkServices h3 {
            font-size:3vw;
            font-weight:100;
            bottom:0;
        }
        }
    @media screen and (max-width:600px){
        .linkServices h3 {
            font-size:4.5vw;
            font-weight:100;
            bottom:0;
            right:0%;
            left:0%;
            text-align:center;
            margin:0 auto;
        }
        }
.linkServices h3:hover{
    color:var(--background);
}
.iconServices{
    width:30%;
    aspect-ratio:1/1;
    margin:10% auto;
    display:block;
}
.homeli1, .homeli2, .homeli3, .homeli4{
    background-color:none;
    -webkit-transition: .4s ease-out;
    -moz-transition: .4s ease-out;
    -o-transition: .4s ease-out;
    transition: .4s ease-out;
}
.homeli1:hover, .homeli2:hover, .homeli3:hover, .homeli4:hover{
    background-color:var(--background);

}

/*Projects*/
#homeProjects-container{
    position:relative; 
}
    @media screen and (max-width:600px){
    #homeProjects-container{
        margin-bottom:25%; 
    }
    }
.homeProjects801{
    width:100vw;
    aspect-ratio:2.39/1;
}

  .homeProjects800, .homeProjects600{
    display:none;
 }

 @media screen and (max-width:800px){
    .homeProjects801, .homeProjects600{
        display:none;
     }
     .homeProjects800{
        display:block;
        opacity:.8;
        width:100vw;
        aspect-ratio:16/9;
     }
     }
     @media screen and (max-width:600px){
        .homeProjects801,.homeProjects800{
            display:none;
         }
         .homeProjects600{
            display:block;
            opacity:.6;
            width:100vw;
            aspect-ratio:4/3;
         }
         }
    

.links1, .links2, .links3, .links4{
    width:100%;
    position:absolute;
    display:flex;
    align-content:right;
    justify-content: flex-end;
    font-weight:100;
    color:grey;
    letter-spacing:1.5vw;
}
.links1:hover, .links2:hover, .links3:hover, .links4 h3:hover{
    color:var(--background);
}
    .links1{
        top:25%;
    }
    .links2{
        top:40%;
    }
    .links3{
        top:55%;
    }
    .links4{
        top:90%;
    }
    @media screen and (max-width:800px){
        .links1{
            top:20%;
            text-align:left;
        }
        .links2{
            top:40%;
            text-align:left;
        }
        .links3{
            top:60%;
            text-align:left;
        }
        .links4{
            top:90%;
        }
        }
    @media screen and (max-width:600px){
        .links1{
            top:12%;
            text-align:left;
            padding:4%;
        }
        .links2{
            top:40%;
            text-align:left;
            padding:4%;
        }
        .links3{
            top:68%;
            text-align:left;
            padding:4%;
        }
        
        .links4{
            top:105%;
        }
        }
    .links4 h3{
        color:black;
        font-weight:400;
        font-size:2vw;
        letter-spacing:0.5vw;
        padding-right:4%;
    }
        @media screen and (max-width:800px){
        .links4 h3 {
            font-size:3vw;
        }
        }
        @media screen and (max-width:600px){
            .links4 h3 {
                font-size:4.5vw;
            }
            }

    .projectlink1{
    width: 25%;
    font-size:2.5vw;
    }
        @media screen and (max-width:800px){
            .projectlink1{
            font-size:3vw;
        }
        }
        @media screen and (max-width:600px){
            .projectlink1{
            font-size:4vw;
            width: 30%;
        }
        }
    .projectlink1-No{
        width: 25%;
        border-bottom: 1px solid grey!important;
        padding: 0.01em 5px;
        font-size:2.3vw;
    }
    @media screen and (max-width:600px){
        .projectlink1-No{
            width: 20%;
            font-size:3.5vw;
    }
    }
    .projectlink1-No:hover{
        border-bottom: 1px solid rgb(0, 207, 207)!important;
    }
/*YOU PROJECT*/
/*Projects*/
#homeTALK2US-container{
    position:relative; 
}
    @media screen and (max-width:600px){
    #homeTALK2US-container{
        margin-bottom:10%;
        padding:1% 10% 15% 10%
    }
    }
.contact{
    margin-top:10%;
    width:65%;
    margin:10% auto 2% auto;
}
@media screen and (max-width: 800px){
    .contact{
        width:75%;
    }
    }
    @media screen and (max-width: 600px){
        .contact{
            width:80%;
        }
        }

 #Inner{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-gap:40px;
    width:65%;
    margin:3% auto;
    }
    @media screen and (max-width: 800px){
        #Inner{
            grid-template-columns:repeat(1,2fr);
            grid-template-rows: auto auto;  
        grid-gap:10px;
        width:75%;
        }
        }
        @media screen and (max-width: 600px){
            #Inner{
            width:80%;
            margin:1% auto;
            }
            }
            @media screen and (max-width: 450px){
                #Inner{
                width:100%;
                margin:0 auto;
                }
                }
            

.Innerimg img{
    width:100%;
    height:100%;
    object-fit:cover;
    -webkit-transition: filter .4s ease-out;
    -moz-transition: filter .4s ease-out;
    -o-transition: filter .4s ease-out;
    transition: filter .4s ease-out;
    filter: drop-shadow(0 0 4rem rgb(241, 241, 241));
    }
    @media screen and (max-width: 800px){
        .Innerimg img{
            opacity:1;
        }
        }
.Innerimg img:hover{
cursor:pointer;
filter: drop-shadow(0 0 0.5rem rgb(255, 255, 255));
}

#second p{
    position:absolute;
    bottom:10vh;
    font-size: 1.2vw;
    font-weight:200;
}

@media screen and (max-width: 1080px){
    #second p{
        bottom:5vh;
        font-size: 1.5vw;

}
}
@media screen and (max-width: 800px){
    #second p{
        padding:4vh 0 7vh 0;
        position:inherit;
        font-size: 2.2vw;

}
}

@media screen and (max-width: 600px){
    #second p{
        font-size: 3.5vw;
        line-height: 6vw;
        padding:4vh 0 3vh 0;
}
}

/*Grid Present photos*/
#first{
grid-column: 1 / 2;

}
#second{

grid-column: 2 /2;
grid-row:1/2;
}


@media screen and (max-width: 800px){
    #first{
        grid-column: 1 / 1;
        grid-row:1/2;
        opacity:.6;
        }
    #second{
        grid-column: 1 / 1;
        grid-row:2/2;
    }
    }

.linkContact h3{
    position:absolute;
    bottom:0;
    right:0;
    font-size:2vw;
    font-weight:400;
}
    @media screen and (max-width: 800px){
        .linkContact h3{
            font-size:3vw;
            right:0;
        }
        }
    @media screen and (max-width: 600px){
        .linkContact h3{
            font-size:4.5vw;
            bottom:0%;
        }
        }
/*NEWS*/
#homeNews-container{
    width:100%;
    position:relative;
    text-align:center;
    margin:0 auto;
    padding:1% 18% 10% 18%;
    transition:0.5s;
}
    @media screen and (max-width: 800px){
        #homeNews-container{
            width:100%;
            position:relative;
            text-align:center;
            margin:0 auto;
            padding:1% 12.5% 10% 12.5%;
            transition:0.5s;
        }
        }
        @media screen and (max-width: 600px){
            #homeNews-container{
                margin:0 auto;
                padding:1% 10% 10% 10%;

            }
            }


#homeNews-container:hover, #home-News-grid:hover, .Newstext1:hover{
    color:black;
}
.Newsimg{
    width:100%;
    aspect-ratio:4/3;
    object-fit:contain;
    margin:0 auto;
}
.linkNews h3{
    position:absolute;
    bottom:0%;
    right:18%;
    font-size:2vw;
    font-weight:400;
}
    @media screen and (max-width:1120px){
        .linkNews h3{
            bottom:5%;
    }
    }
    @media screen and (max-width:800px){
        .linkNews h3{
            font-size:3vw;
            bottom:2%;
            right:12.5%;
    }
    }
    @media screen and (max-width:600px){
        .linkNews h3{
            font-size:4.5vw;
    }
    }

.linkNews:hover{
    color:var(--background);

}
.hometitle-News{
    padding:8% 0 5% 0;
}
    @media screen and (max-width:1120px){
        .hometitle-News{
            padding:8% 0 1% 0;
        }
        }
.hometitle-News h2, .services-title{
    font-size:2.8vw;
    font-weight:100;
    letter-spacing: 1vw;
    line-height:7vh;
}
    @media screen and (max-width:800px){
        .hometitle-News h2, .services-title, .hometitles h2{
            font-size:3.6vw;
        }
        }
    @media screen and (max-width:800px){
    .hometitle-News h2, .services-title, .hometitles h2{
        font-size:4.8vw;
    }
    }

.Newstext1{
    font-size:1.2vw;
    line-height:2vw;
}
    @media screen and (max-width:1120px){
        .Newstext1{
            font-size:1.6vw;
            line-height:3vw;
        }
        }
        @media screen and (max-width:800px){
            .Newstext1{
                font-size:2.2vw;
                line-height:4vw;
            }
            }
        @media screen and (max-width:600px){
            .Newstext1{
                font-size:3.5vw;
                line-height:6vw;
            }
            .secondtext{
                display:none;
            }
            }


#home-News-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-gap:5%;
    width:100%;
    margin:0 auto;
    padding:20% auto;
    text-align:left;
}
    @media screen and (max-width:600px){
        #home-News-grid{
            display:grid;
            grid-template-columns:repeat(1,1fr);
        }
         }