@font-face {
font-family:"Raleway";
    src: url("../FONTS/Raleway-VariableFont_wght.woff2") format("woff2");
        font-weight: 100 900; 
    
}
/* ----- h1 Style -------- */
*, ::before, ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
}

.slider img {
  max-width: 100%;
  display: none;
}
img.active {
  display: block;
  animation: fade 0.8s;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
span {color:coral;
font-weight: 700;}
.cont-btn {
   
  width: 100%;
  height: auto;
  border-top: 1px solid #000;

  display: flex;
  justify-content: center;
}
#close-project-box {
  position: fixed;
  z-index: 99999;
  top: 30px;
  right: 1.5%; }

#close-project-box svg {
  width: 3rem;
  height: auto; }

#close-project-box:hover {
  color:coral;}

.btn-nav {
  font-size: 50px;
  margin: 0 15px;
  cursor: pointer;
    color: black;
}

.btn-nav:hover {
  color:coral;
}


h1 { font-size: 4.54em;
font-family: 'Raleway';
font-weight: 900;
  /*  line-height: 1.1315; */
}
.box-img { border: solid 1px black;}
img {width: 100%;
height: 537px;

/*border: solid 1px black;*/}

p {line-height: 1.5;
font-family: 'Raleway';
    font-weight:500;
font-size:1.2em;
     max-height: 600px;
  overflow: scroll;
    border: solid 1px black;
}

a {
text-decoration: none;
color: black;
font-family: 'Raleway';
font-weight:100;}

a:hover{color:coral;
font-weight: 900;
transition: all ease-in-out 0.4s;}

a:not(:hover){
font-weight: 100;
transition: all ease-in-out 0.4s;}

footer a {text-align: center;
border: solid 1px black;
text-decoration: none;
    text-decoration-color: coral;
font-family: 'Raleway';
    font-weight:800;
font-size: 0.8em;
  transition:all ease-in-out 0.4s;}


@media screen and (max-width: 1560px) /*xlg*/ {
    p{font-size:0.8em;
      transition:all ease-in-out 0.4s;}
    #close-project-box svg {
  width: 3em;
  height: auto; 
      transition:all ease-in-out 0.4s;}
    #close-project-box {
  position: fixed;
  z-index: 99999;
  top: 30px;
  right: 1.3%;
      transition:all ease-in-out 0.4s;}}

@media screen and (max-width: 1050px) {
      #close-project-box svg {
  width: 2rem;
  height: auto;
      transition:all ease-in-out 0.4s;}
    #close-project-box {
  position: fixed;
  z-index: 99999;
  top: 25px;       
  right: 1.5%; }
    h1 {font-size: 3.03em;
     transition:all ease-in-out 0.4s}}

@media screen and (max-width: 960px) {
    p{font-size:1.2em;
    max-height: 350px;
      transition:all ease-in-out 0.4s; }
    img { max-height:400px;
     transition:all ease-in-out 0.4s}

}

@media screen and (max-width: 740px) {
      img { height:300px;}
    p{ font-size: 0.9em;
    max-height: 350px;
      transition:all ease-in-out 0.4s;}
    h1 {font-size: 1.85em;
      transition:all ease-in-out 0.4s;}
        #close-project-box svg {
  width: 1.5rem;
  height: auto;
      transition:all ease-in-out 0.4s;}
    #close-project-box {
  position: fixed;
  z-index: 99999;
  top: 15px;
  right: 1%;
      transition:all ease-in-out 0.4s;}
 }