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

.PrPageTitle, #ProjSlider-Container, #ProjSlider-Containermob{
    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;
}

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

@media screen and (max-width: 600px){
    .line{
        margin-top: 2%;
        width: 90%;
    } 
}
/*Buttons*/
button {
    margin: 0em;
    padding: 0;
    border-width: 0;
    background-color:white;
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
}
    button:hover{
        background-color:aquamarine;
        cursor:pointer;
    }
    .button-right, .button-left{
        width:60px;
        height:60px;
        color:rgb(161, 161, 161);
        margin-top:14%;   
    }
    
        @media screen and (max-width: 800px){
            .button-right, .button-left {
                position:absolute;
                top:70%;
                z-index:100;
                }
            .button-left {
                left:70px;  
                }
                .button-right{
                    margin-left:0;
                }
                }


/*Slider*/

.mySlidesheader, .mySlidesmob{
    width:100%;
    float:right;
    }
    @media screen and (max-width: 800px){
        .mySlidesheader, .mySlidesmob{
            width:100%;
            position:relative;
    }
    }
.fading{
    animation:opac 0.4s}
@keyframes opac{
    from{opacity:0} to{opacity:1}
}

#ProjSlider-Container{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-gap:2vw;
}
    @media screen and (max-width: 800px){
        #ProjSlider-Container{
            grid-gap:1vw;
        }
        }
#icon-first, #icon-second, #icon-third, #icon-fourth{
    display:flex;
    justify-content: left;
    align-items:center;
    padding-left:3vw;
}
@media screen and (max-width: 600px){
    #icon-first, #icon-second, #icon-third, #icon-fourth{
        display:flex;
        padding-left:0vw;
        padding-right:5vw;
        padding-bottom:0;
        
}
}
.icon{
    width:2.5vw;
}
    @media screen and (max-width: 800px){
        .icon{
            width:4vw;
        }
    }
    @media screen and (max-width: 600px){
        .icon{
            width:5vw;
        }
    }
.RE-icons-text{
    padding-left:2vw;
    font-size:2vw;
}
    @media screen and (max-width: 800px){
        .RE-icons-text{
            font-size:2.5vw;
    }
    }
    @media screen and (max-width: 600px){
        .RE-icons-text{
            font-size:4vw;
    }
}
#icon-first{
    grid-column: 1 / 2;
    grid-row:3/4;
    }
    #icon-second{
        grid-column: 1 / 2;
        grid-row:4/5;
        }
    #icon-third{
        grid-column: 1 / 2;
        grid-row:5/6;
        }
    #icon-fourth{
        grid-column: 1 / 2;
        grid-row:6/7;
        }  
#mySlidesheader{
    grid-column: 2 / 6;
    grid-row:1/9;
    }

    .mob-icons{
        display:none;
    }
    
    @media screen and (max-width: 600px){
        .mob-icons{
            width:90%;
            display:flex;
            float:left;
            margin-bottom:2vw;
        }

        .RE-icons-text{
            padding-bottom:0;
        }
 
        #mySlidesheader{
            grid-column: 1 / 6;
            grid-row:2/3;
            }

    }

#ProjSlider-Containermob{
    display:none;
}

    @media screen and (max-width: 600px){
        #ProjSlider-Container{
            display:none;
        }
    
        #ProjSlider-Containermob{
            display:grid;
            grid-template-columns:repeat(5,1fr);
            }
        }
    
/*///////HEADER END//////////*/

/*Page titles and text*/
.PrPageTitle{
    width:80%;
    margin:3% auto;
    float:right;
    text-align:left;
    }
    @media screen and (max-width: 600px){
        .PrPageTitle{
            width:95%;
            margin:6% auto;
    }
    }
.ProjectsH1,.ProjectsH2  {
    font-size:3vw;
    font-weight:100;
    }
    @media screen and (max-width: 1280px){
        .ProjectsH1,.ProjectsH2{
            font-size:4vw;
    }
    }
    @media screen and (max-width: 800px){
        .ProjectsH1,.ProjectsH2  {
            font-size:5vw;
           
    }
    }
    @media screen and (max-width: 600px){
        .ProjectsH1,.ProjectsH2  {
            font-size:6vw;
            display:block;
            padding-bottom:0;
    }
    }

    @media screen and (max-width: 600px){

        .ProjectsH2{
            margin: 6% ;
        }
    }
    @media screen and (max-width: 450px){
        .ProjectsH1,.ProjectsH2  {
            font-size:8vw;
            margin-block-start: 0em;
            margin-block-end: 0em;
    }
    }
.Projectsp{
    font-size:1.2vw;
}
    @media screen and (max-width: 1280px){
        .Projectsp{
            font-size:1.6vw;  
    }
    }
    @media screen and (max-width: 800px){
        .Projectsp{
            font-size:2.4vw;  
            padding-right:2%;
            font-weight:100;
    }
    }
    @media screen and (max-width: 600px){
        .Projectsp{
            font-size:3.8vw;  
    }
    }

    @media screen and (max-width: 450px){
        .Projectsp{
            font-size:5vw;  
    }
    }

/*The Project Div*/
.TheProject{
    padding:5% 0 0 0;
    }
    @media screen and (max-width: 800px){
        .TheProject{
            padding:5% 0 0 0;
    }
    }
    @media screen and (max-width: 450px){
        .TheProject{
            padding:5% 0;
    }
    }
.ProjectsH2{
    text-align:center;
    margin-bottom:3%;
    }

    @media screen and (max-width: 800px){
        .ProjectsH2{
            margin-top:5%;
    }
    }
.Projectsp2{
    font-size:1.1vw;
    width:50%;
    margin:2% auto;
    text-align:justify;
    text-align-last: center;
    line-height:4vh;
    color:grey;
    }
    @media screen and (max-width: 1280px){
        .Projectsp2{
            font-size:1.5vw;  
    }
    }
    @media screen and (max-width: 800px){
        .Projectsp2{
            font-size:2.4vw;  
            padding-right:0%;
            font-weight:100;
            width:70%;
            margin:0% auto;
    }
    }
    @media screen and (max-width: 600px){
        .Projectsp2{
            font-size:3.8vw;  
            padding-right:0;
            width:85%;
            padding:0% 8% 5% 8%;
            text-align:left;
    }
    }


    /*TARGET-EMPTY BLOCK*/
    #RE-grid-Target{
        height:100px;
        width:100%;
    }
    @media screen and (max-width: 1120px){
        #RE-grid-Target{
            height:20px;
            width:100%;
        }
    }
    @media screen and (max-width: 800px){
        #RE-grid-Target{
            height:50px;
            width:100%;
        }
    }
    

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

 .Innerimg img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.8;
    transition: opacity .3s ease-out;
    }
    @media screen and (max-width: 800px){
        .Innerimg img{
            opacity:1;
        }
        }


.Innerimg img:hover{
    opacity:1;
cursor:pointer;
filter: none;
}

/*Grid Present photos*/
#first{
    grid-column: 1 / 3;
    grid-row:1/3;
    }
    #second{
    grid-column: 3 / 4;
    grid-row:1/3;
    }
    #third{
    grid-column: 4 / 5;
    grid-row:1/3;
    }
    
    @media screen and (max-width: 600px){
        #first{
            grid-column: 1 / 3;
            grid-row:1/2;
            }
        #second{
        grid-column: 1 / 3;
        grid-row:2/3;
        }
        #third{
        grid-column: 1 / 3;
        grid-row:3/4;
        }
    }

/*BOTTOM - PAGE BUTTONS*/
  
#PRJ-button{
    background-color: rgba(246, 244, 239, 0.9);
    width:5vw;
    height:5vw;
    z-index: 9999;
    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:10vw; 
        margin:0;              
    }
    #PRJ-button p{
        font-size:11px;  
    }
    #PG-Buttons{
        bottom: 0;
        right:0;
    }
}


@media screen and (max-width: 414px){
    #PRJ-button {
        width:16vw; 
    }
    #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;
  }

 /*/////CAROUSEL/////*/
  

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #f6f6f6;
  }
  
  /* Modal Content */
  .modal-content {
    position: relative;
    background-color: (253, 253, 253, 0.5);
    margin: auto;
    padding: 0;
    padding-bottom:20px;
    width: 90%;
    aspect-ratio:4/3;
    max-width: 1200px;
  }
  
  /* The Close Button */
  .close {
    color: black;
    background-color:white;
    position: absolute;
    top: 50px;
    right: 450px;
    height: 5vw;
    width: 5vw;   
    font-size: 35px;
    font-weight: bold;
    text-align:center;
    line-height:5vw;
    z-index:1500;
  }
  @media screen and (max-width: 1920px){
    .close {
        top: 50px;
        right: 20%;
  }
}

@media screen and (max-width: 1668px){
    .close {
        right: 15%;
  }
}

@media screen and (max-width: 1536px){
    .close {
        right: 8%;
        top: 30px;
  }
}

@media screen and (max-width: 600px){
    .close {
        height: 11vw;
        width: 11vw; 
        line-height:11vw;
  }
}
@media screen and (max-width: 414px){
    .close {
        height: 10vw;
        width: 10vw; 
        line-height:10vw;
  }
}

@media screen and (max-width: 315px){
    .close {
        height: 15vw;
        width: 15vw; 
        line-height:15vw;
        top: 25px;       
  }
}

  .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  
  .mySlides {
    display: none;
  }
  
  .cursor {
    cursor: pointer;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: rgb(43, 43, 43);
    background-color:rgba(253, 253, 253, 0.5);
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(253, 253, 253, 0.8);
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  img {
    margin-bottom: -4px;
  }