/*///////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%;
}
/*Buttons*/
button {
    margin: 0em;
    font: 100 13.3333px Sulphur Point;
    padding: 0;
    border-width: 0;
    background-color:rgb(61, 61, 61);
    -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%;   
    }
    .button-right:active, .button-left:active, .button-right:focus, .button-left:focus{
        background-color:rgb(69, 238, 182);
        border:none;
        outline:none;
    }
        @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*/

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

.ProjSlider-Container{
    display:block;
}
.ProjSlider-Containermob{
    display:none;
}

@media screen and (max-width: 600px){
    .ProjSlider-Container{
        display:none;
    }
    .ProjSlider-Containermob{
        display:block;
    }
    }
/*///////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; 
    }
    }

    @media screen and (max-width: 450px){
        .ProjectsH1,.ProjectsH2  {
            font-size:7vw; 
    }
    }
.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;
    }
    }

/*Grid  photos*/

#SMALL-GRID{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:40px;
    width:65%;
    margin:3% auto;
    }
    @media screen and (max-width: 800px){
        #SMALL-GRID{
        grid-gap:10px;
        width:75%;
        }
        }
        @media screen and (max-width: 600px){
            #SMALL-GRID{
                grid-template-columns:repeat(2,1fr);
            width:80%;
            }
            }
            @media screen and (max-width: 450px){
                #SMALL-GRID{
                    grid-template-columns:repeat(2,1fr);
                width:90%;
                margin:0 auto;
                }
                }
            
.SMALL-GRID-THUBS{
    background:white;
}
.SMALL-GRID-THUBS img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.8;
    -webkit-transition: filter .3s ease-out;
    -moz-transition: filter .3s ease-out;
    -o-transition: filter .3s ease-out;
    transition: filter .3s ease-out;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    -o-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    }
    @media screen and (max-width: 800px){
        .SMALL-GRID-THUBS img{
            opacity:1;
        }
        }
.SMALL-GRID-THUBS img{
 
    filter: contrast(150%) brightness(100%) grayscale(20%);
}

.SMALL-GRID-THUBS img:hover{
    opacity:1;
cursor:pointer;
filter: none;
}
/*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/2;
}
#third{
grid-column: 4 / 5;
grid-row:1/2;
}
#fourth{
grid-column: 3 / 4;
grid-row:2/3;
}
#fifth{
grid-column: 4 / 5;
grid-row:2/3;
}

@media screen and (max-width: 600px){
    #first{
        grid-column: 1 / 3;
        grid-row:1/2;
        }
    #second{
    grid-column: 1 / 2;
    grid-row:2/3;
    }
    #third{
    grid-column: 2 / 3;
    grid-row:2/3;
    }
    #fourth{
    grid-column: 1 / 2;
    grid-row:3/4;
    }
    #fifth{
    grid-column: 2 / 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;
  }