@import url('https://fonts.googleapis.com/css2?family=Rubik+Vinyl&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Denk+One&family=Rubik+Vinyl&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Denk+One&family=Montserrat&family=Rubik+Vinyl&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cantora+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz,wght@8..144,200&display=swap');

body{
  margin:0;
  height:100%;
  overflow: auto;
  background-color: lightgrey;
}
.header{
width:100%;
height:17vh;
margin:0;
box-sizing:border-box;
background-color:purple;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
float: left;
}

.logo{
  width:10%;
  box-sizing:border-box;
  height:17vh;
  float:left;
  /* border:1px solid red; */
  }

  .menu-bar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: purple;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    box-sizing: border-box;
  }
  
  .menu-links {
    color: purple;
    display: block;
    transition: 0.3s;
    float: left;
background-color: lightgrey;
font-size: 19px;
font-family: 'Cantora One', sans-serif;
padding: 10px;
width:98%;
text-decoration: none;
box-sizing: border-box;
text-align: left;
/* border:1px solid red; */
margin: 1%;
  }
  
  .menu-links:hover {
    color: white;
    background-color: purple;
  }
  
  .menu-close {
    background-color: crimson;
    font-family: 'Denk One', sans-serif;
    padding:8px;
    border-radius: 3px;
    outline: none;
    color:white;
    border:1px solid black;
    float:right;
    border:none;
    margin: 1%;
    position: absolute;
    right: 1%;
    top:1%;
  }
  
  .menu-open {
    font-size: 20px;
    cursor: pointer;
    background-color:lightgrey;
    color: black;
    padding: 10px;
    border: none;
    /* border:1px solid red; */
    margin:0;
    float:right;
    display: none;
  }
  
  .menu-open:hover {
    background-color: purple;
    color:white;
  }
  .menu-close:hover{
    transform: scale(1.02);
  }
  .alert-box{
    width:85%;
    box-sizing: border-box;
    height:12vh;
    float: left;
  background-color: transparent;
  /* border:1px solid orange; */
  }
  .logged{
    float: left;
    height:12vh;
    width:5%;
    box-sizing: border-box;
    color:white;
    font-family: 'Cantora One', sans-serif;
    text-align: center;
    font-size: 20px;
    display:block;
    padding: 5px;
    padding-top: 7vh;
  }
.nav-bar{
width:90%;
margin:0;
box-sizing:border-box;
height:5vh;
float:left;
/* margin-top:58px; */
box-sizing: border-box;
background-color: lightgrey;
padding:0;
}
.nav-links{
  text-decoration: none;
float: left;
  width:20%;
  margin:0;
  box-sizing: border-box;
}

li{
list-style: none;
background-color: lightgrey;
margin:0;
font-size: 1.2em;
font-family: 'Cantora One', sans-serif;
padding: 1.1vh;
width:100%;
text-decoration: none;
box-sizing: border-box;
text-align: center;
height: 100%;
/* border:1px solid red; */
}
li:hover{
background-color: purple;
color:white;
}
.active{
background-color: purple;
color:white;
}


.info-alert{
  color:white;
  font-size: 25px;
  font-family: 'Montserrat', sans-serif;
  padding: 30px;
  text-align: center;
  animation-name: call-alert;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  height:100%;
  /* border:1px solid red; */
  margin: 0;
  box-sizing: border-box;
}

.logout-btn{
  float: right;
  height: 40px;
  /* border:1px solid white; */
  width:3%;
  color:white;
  padding: 10px;
  margin-top: 58px;
  box-sizing: border-box;
  font-family: 'Cantora One', sans-serif;
}
.background {
  width:100%;
  height:850px;
  /* border:1px solid red; */
  box-sizing: border-box;
  overflow: hidden;
}

.background-image{
  width:100%;
  height:100%;
  display:none;
}
.welcome-note{
  width:72%;
  color:white;
  float: left;
  /* margin: 3%; */
  margin-bottom: 0;
  padding: 40px;
  box-sizing: border-box;
font-family: 'Roboto Serif', serif;
  font-size: 18px;
  line-height: 25px;
  /* border:1px solid green; */
  background-color: purple;
}

.updates{

  /* border-radius: 20px; */
  width:28%;
  /* height: 420px; */
  background-color: lightgrey;
  float: left;
  /* margin-left: 3%; */
  margin:0;
  color:black;
  padding:20px;
  box-sizing: border-box;
  padding: 30px;
}
.updates h3{
  font-family: 'Cantora One', sans-serif;
  font-size: 15px;
  line-height: 25px;
  font-weight: 300;
}
.sum-title{
  /* border:1px solid red; */
  width:50%;
  box-sizing: border-box;
  font-family: 'Roboto Serif', serif;
  text-align: left;
  font-size: 27px;
  /* margin: 0; */
  background-color: purple;
  color:white;
  margin-top: 1%;
  padding: 15px;
  float:left;
}
.projects-info{
  z-index: 90;
  /* border:1px solid green; */
  height:720px;
  width:100%;
  box-sizing: border-box;
  background-color: lightgrey;
  /* border-top:2px dotted white;
  border-bottom:2px dotted white; */
  color:black;
  font-size: 16px;
  line-height: 25px;
  padding: 30px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.projects-intro{
  font-family: 'Roboto Serif', serif;
  font-size: 16px;
  color:black;
  line-height: 28px;
  font-weight: 600;
   width:100%;
   float: left;
   padding: 30px;
   box-sizing: border-box;
   line-height: 30px;
}
.projects-div{
  /* border:1px solid blue; */
  /* height:350px; */
  width:250px;
  box-sizing: border-box;
 float: left;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-bottom: none;
  /* border-radius: 20px 20px 0 0 ; */
  margin: 2.5%;
}
.project-image{
  height:150px;
  width:100%;
  box-sizing: border-box;
}
.project-title{
    /* position: absolute;
    top:40%; */
    color:white;
    background-color: black;
    width:100%;
    opacity: 0.8;
    box-sizing: border-box;
    padding:10px;
    font-family: 'Cantora One', sans-serif;
    height:40px;
    /* border:1px solid orange; */
    font-size: 16px;

}
.project-desc{
    border:none;
    width:100%;
    height:130px;
    background-color: lightgrey;
    color:black;
    font-family: 'Cantora One', sans-serif;
    padding:10px;
    font-size: 15px;
    box-sizing: border-box;
    line-height: 22px;
    /* border-radius: 0 0 10px 10px; */
    overflow: hidden;
}
.subs-div{
  border:none;
  width:100%;
  box-sizing: border-box;
  background-color:purple;
  text-align: center;
padding:50px;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* border:1px solid red; */
float: left;
}
.subs-div h3{
  font-size: 30px;
  color:white;
  font-family: 'Denk One', sans-serif;
}
.subs-email{
  padding:10px;
  width:300px;
  font-family: 'Denk One', sans-serif;
  outline:none;
}
.subs-btn{
  padding:10px;
  width:100px;
  font-family: 'Denk One', sans-serif;
  outline:none;
  background-color: black;
  color:white;
}
.partners{
  width:100%;
  margin:0;
    box-sizing: border-box;
  }

  .hist-div{
    /* border:1px solid blue; */
    width:100%;
    height:780px;
    box-sizing: border-box;
    /* margin-top: 100px; */
    background-color: purple;
  }
  .achievements{
    background-color: lightgrey;
    width:40%;
    box-sizing: border-box;
    float: left;
    color:black;
    padding: 40px;
    font-family: 'Cantora One', sans-serif;
    /* border: 2px solid blue; */
    text-align: center;
  }
  .history{
    width:60%;
    box-sizing: border-box;
    float: left;
    padding: 50px;
    font-family: 'Cantora One', sans-serif;
    /* line-height: 25px; */
    font-size: 16.5px;
    font-weight:400;
    line-height: 28px;
    color:white;
    background-color: purple;
  }
  .history-header{
    font-family: 'Cantora One', sans-serif;
    font-weight: 900;
    font-size: 25px;
    color:white;
  }
  .achievements-header{
    font-family: 'Cantora One', sans-serif;
    font-weight: 900;
    font-size: 25px;
    color:black;
  text-decoration: double;
  }
.footer{
  border:none;
  width:100%;
  /* padding:5px; */
  box-sizing: border-box;
  background-color: purple;
  border-top:1px solid lightgrey;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  float:left;
}
.footer-divs{
  /* border:1px solid purple; */
  width: 33.3%;
  float:left;
  box-sizing: border-box;
  margin:0;
  padding: 10px;
}

.footer-title{
  font-family: 'Denk One', sans-serif;
font-size: 18px;
color:white;
padding:10px;
margin:0;
font-weight: 300;
}
.footer-desc{
font-family: 'Cantora One', sans-serif;
font-size: 16px;
/* border:1px solid red; */
color:white;
padding:10px;
margin:0;
height:230px;
line-height:27px;
font-weight: 300;
}
.page-rights{
/* border:1px solid red; */
width:100%;
box-sizing: border-box;
background-color: purple;
height:35px;
padding: 0;
margin: 0;
border-top:1px solid black;
float: left;
}
.copyright{
  font-family: 'Cantora One', sans-serif;
  color:white;
  width:70%;
  border:none;
  /* border-top:1px solid white; */
  text-align: right;
  float: right;
  padding:8px;
  box-sizing: border-box;
  background-color: purple;
  font-size:13px;
  margin: 0;
  height:100%;
  font-weight: 300;
  /* border:1px solid red; */
}
.socials{
/* border:1px solid blue; */
width:30%;
padding:8px;
box-sizing: border-box;
text-align: right;
background-color: purple;
height:100%;
float: left;
color:white;
font-family: 'Denk One', sans-serif;
font-size:13px;
 /* border:1px solid red; */
 text-align: left;
}
.media-links{
   /* border:1px solid red; */
   width:100%;
   padding: 3px;
   color:white;
   text-decoration: none;
   float: left;
   font-size: 13px;
}
.media-links:hover{
  text-decoration: underline;
}
.fa {
  padding: 5px;
  font-size: 12px;
  width: 10px;
  height:10px;
  text-align: center;
  text-decoration: none;
  /* margin: 2px 2px; */
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-instagram {
  background: #dd4b39;
  color: white;
}
.team-title{
  font-family: 'Denk One', sans-serif;
  color:black;
  font-size: 30px;
  width: 100%;
  box-sizing: border-box;
  /* border:1px solid red; */
  text-align: center;
  margin-top:2%;
  float:left;
  padding: 10px;
}
/* .team-div{
  border-top:1px solid grey;
  width:100%;
  height:570px;
  box-sizing: border-box;
} */
.team-photo{
  width:130px;
  height:150px;
  border-radius:50%;
}
.member-div{
  width:25%;
  box-sizing: border-box;
  float: left;
  /* border:1px solid blue; */
  margin:4%;
  margin-top: 1%;
  padding:10px;
}
.member-title{
  font-family: 'Cantora One', sans-serif;
  font-size: 15px;
  text-align: center;
}
.member-desc{
  font-family: 'Roboto Serif', serif;
  font-size: 15px;
  line-height: 24px;
  text-align: left;
  font-weight: 300;
}

.column {
  width:237px;
  /* border:1px solid purple; */
  float:left;
  border-radius: 3px 3px 0 0;
  height:220px;
  box-sizing: border-box;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.img-description{
  font-family: 'Cantora One', sans-serif;
  color:black;
  font-size: 14px;
  /* border:1px solid blue; */
  height:20%;
  margin: 0;
  overflow: hidden;
  font-weight: 300;
  padding: 6px;
  box-sizing: border-box;
}
.column img {
  height:80%;
  width: 100%;
  border-radius: 3px 3px 0 0;
  margin: 0;
}
.column img:hover{
  transform: scale(1.05);
}

.video-gallery{
  width:100%;
  height:550px;
  margin-top:2%;
  box-sizing: border-box;
  /* border:2px solid red; */
 float: left;
}

.contact-div{
  width:100%;
  margin:0;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  box-sizing: border-box;
  background-color: lightgrey;
  padding: 20px;

}
.cont-title{
  font-family: 'Denk One', sans-serif;
  color:black;
  font-size: 30px;
  width: 100%;
  box-sizing: border-box;
  /* border:1px solid red; */
  text-align: center;
  margin-top:2%;
  float:left;
  padding: 10px;
  /* border:1px solid red; */
  margin-bottom: 0;
}
.cont-labels{
  font-family: 'Cantora One', sans-serif;
  /* margin-left:25%; */
  width: 60%;
  padding: 5px;
  color:black;
  padding-left: 0;
  /* border:1px solid green; */
  text-align: left;
  margin: 0;
  box-sizing: border-box;
  margin-left: 20%;
  float:left;
}
.cont-inputs{
  padding: 12px;
  font-family: 'Cantora One', sans-serif;
  margin-left:20%;
  width: 60%;
  outline: none;
  border:0.5px solid gray;
  border-radius: 3px;
  margin-bottom:15px;
  color:black;
  margin-top: 0.5%;
  box-sizing: border-box;
}
.cont-inputs-text{
  padding: 12px;
  font-family: 'Cantora One', sans-serif;
  margin-left:20%;
  width: 60%;
  outline: none;
  border:0.5px solid gray;
  border-radius: 3px;
  margin-bottom:15px;
  color:black;
  resize: none;
  height:120px;
  margin-top: 0.5%;
}
.cont-btn{
  padding:10px;
  border:none;
  font-family: 'Denk One', sans-serif;
  font-size: 15px;
  color:white;
  background-color: rgb(24, 223, 24);
  border-radius: 5px;
  margin-top: 1%;
  display: block;
  margin-left:20%;
  box-sizing: border-box;
}
.map{
  width:100%;
  box-sizing: border-box;
}
  
  .more-div{
    /* border:1px solid red; */
    padding:2px;
    box-sizing: border-box;
    height:30px;
    font-size: 15px;
    padding-left:10px;
    width:50%;
    background-color: purple;
  }
  .more-div a{
    text-decoration: none;
    color:white;
    font-family: 'Cantora One', sans-serif;
  }
  .more-div a:hover{
    text-decoration: underline;
  }
  .project-view{
    /* border:1px solid purple; */
    width:100%;
    /* height:680px; */
    box-sizing: border-box;
    /* margin-top: 100px; */
   float:left;
  }

  .project-details-image{
    /* border:1px solid red; */
    width:50%;
    box-sizing: border-box;
    float: left;
    height:450px;
    padding: 15px;
    margin-top: 30px;
    border-radius: 3px;
  }
  .project-details-desc{
    /* border:1px solid blue; */
    width:50%;
    box-sizing: border-box;
 float: left;
    padding: 25px;
  }
  .project-details-header{
    /* border:1px solid purple; */
    width:100%;
    box-sizing: border-box;
    font-size: 16px;
    margin-bottom: 0;
    font-family: 'Cantora One', sans-serif;
    font-weight: 900;
    padding:5px;
  }
  .project-details-subheader{
    /* border:1px solid green; */
    width:100%;
    box-sizing: border-box;
    font-size: 15px;
    /* margin-bottom: 2%; */
    line-height: 25px;
    margin:0;
    font-family: 'Cantora One', sans-serif;
    font-weight: 100;
  }
  .applications-div{
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    float:left;
  }
  .apply-btns{
    padding:10px;
    font-family: 'Cantora One', sans-serif;
    color:black;
    font-size: 15px;
    border-radius: 3px;
    background-color: transparent;
    border:1px solid black;
    margin-right: 1.5%;
    float:left;
    outline:none;
  }
  
  .icon{
    position: absolute;
    bottom: 0;
    left:6%;
    z-index: 99;
  }
.application-letter{
width:100%;
/* border:1px solid red; */
  transition: display 1s;
 /*  */
    /* position:fixed;
   top:105px; */
   border-radius:0 0 3px 3px;
      height:1850px;
    /* border:1px solid lightgrey; */
    overflow-y: auto;
    margin-top:10px;

}
  .application-form{
    background-color: lightgrey;
    width:60%;
    padding: 15px;
   color:black;
    box-sizing: border-box;
    /* border-top:none; */
    font-family: 'Denk One', sans-serif;
border:1px solid black;
float:left;
  }
  .application-desc{
width:40%;
box-sizing: border-box;
padding:30px;
   color:white;
   font-weight: 300;
   font-size: 14px;
   line-height: 25px;
   font-family: 'RocknRoll One', sans-serif;
   margin:0;
   background-image: linear-gradient(to bottom, purple , lightgrey);
   float: left;
  }
  .form-btn{
    width:100%;
padding:10px;
box-sizing: border-box;
margin-bottom:0;
float: left;
background-color: lightgrey;
  }
  .form-title{
    font-family: 'RocknRoll One', sans-serif;
    float:left;
    margin:0;
    font-size: 17px;
    font-weight: 400;
  }
  .form-cancel{
    background-color: crimson;
    font-family: 'Denk One', sans-serif;
    padding:8px;
    border-radius: 3px;
    outline: none;
    color:white;
    /* border:1px solid black; */
    float:right;
    border:none;
  }
  .form-cancel:hover{
    transform: scale(1.1);
  }
  .form-submit{
    background-color: green;
    font-family: 'Denk One', sans-serif;
    padding:8px;
    border-radius: 25px;
    outline: none;
    color:white;
    /* border:1px solid black; */
    float:left;
    border:none;
    margin:2%;
  }
  .form-submit:hover{
    transform: scale(1.1);
  }
  .form-label{
    font-family: 'RocknRoll One', sans-serif;
    width:100%;
    margin:0;
     /* border:1px solid black; */
     font-size: 13px;
     padding: 8px;
     font-weight: 400;
     /* margin-bottom: 2%; */
     box-sizing: border-box;
     color:black;
  float:left;
     /* border:1px solid red; */
     outline:none;
  }
  .form-input{
    font-family: 'RocknRoll One', sans-serif;
    width:100%;
    margin:0;
     font-size: 13px;
     padding: 8px;
     font-weight: 400;
     margin-bottom: 2%;
     box-sizing: border-box;
     background-color: transparent;
     color:black;
     float:left;
     border:none;
     border-left:1px solid black;
     border-bottom:1px solid black;
     border-radius: 25px;
     outline:none;
  }

  ::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background: whitesmoke; 
  }
   
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #555; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(to bottom, purple , lightgrey);
  }
 
  
.downloads{
  background-image: linear-gradient(to bottom, lightgrey, whitesmoke);
  width:400px;
  left: 0;
   right: 0;
  padding: 20px;
  height:300px;
  transition: display 1s;
  display: none; 
  margin:0 auto;
  position: absolute;
 top:100px;
 border-radius:3px;
 color:black;
  box-sizing: border-box;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
  overflow-y: auto;
  font-family: 'Denk One', sans-serif;
  padding-top: 0;
  z-index: 1;
}

.download-form-input{
  font-family: 'Cantora One', sans-serif;
  width:96%;
   /* border:2px solid lightgrey; */
   border:none;
   font-size: 13px;
   padding: 11px;
   font-weight: 400;
   margin: 2%;
   box-sizing: border-box;
   background-color: transparent;
   color:black;
  box-sizing: border-box;
  border-radius: 25px;
  outline:none;
  border-left:1px solid black;
  border-bottom:1px solid black;
}

.download-form-submit{
  background-color: green;
  font-family: 'Denk One', sans-serif;
  padding:8px;
  border-radius: 3px;
  outline: none;
  color:white;
  /* border:1px solid black; */
  border:none;
  margin: 2%;
}

@keyframes call-alert {
  0%   {opacity:0;transform: scale(0);}
  25%  {opacity:0.25;transform: scale(0.25)}
  50%  {opacity:0.5;transform: scale(0.5)}
  75%  {opacity:0.75;transform: scale(0.75)}
  100% {opacity:1;transform: scale(1)}
}

.icon{
  display:none;
}
 @media only screen and (max-width: 800px) {
/* .background{
  height: 400px;
} */
.partners{
  height: 400px;
}
.map{
  height: 400px;
}
  .welcome-note{
    width:100%;
  }
  .updates{
    width:100%;
  }
  .sum-title{
    width:100%;
  }

  .history{
    width:100%;
  }
  .achievements{
    width:100%;
  }
  .more-div{
    width:100%;
  }
  .cont-labels{
    width: 80%;
    margin-left: 10%;
  }
  .cont-inputs{
    width: 80%;
    margin-left: 10%;
  }
  .cont-inputs-text{
    width: 80%;
    margin-left: 10%;
  }
  .cont-btn{
    margin-left: 10%;
  }
  .logo{
    height:12vh;
  }
  .info-alert{
    font-size: 18px;
  }

  .nav-bar{
    width: 100%;
  }
  li{
    font-size: 17px;
    padding: 7px;
  }
  .footer-divs{
    width:100%;
    border-top:1px solid black;
  } 
  .application-desc{
    width: 100%;
  }
  .application-form{
    width: 100%;
  }
  }  

  /* //SmartPhone  */
  @media only screen and (max-width: 500px) {
    .welcome-note{
      width:100%;
      font-size: 16px;
    }
    .logo{
      height:40px;
    }
    .alert-box{
      height:40px;
    }
    .logged{
      height:40px;
    }
    .info-alert{
      font-size: 16px;
    }
    
.member-div{
  width:60%;
  margin-left: 20%;
}
.column{
  margin-left: 20%;
}
.nav-links{
  display: none;
}
.menu-open{
  display: block;
}
.project-details-image{
  width: 80%;
  margin-left: 10%;
  height:350px;
}
.project-details-desc{
  width: 80%;
  margin-left: 10%;
}
.application-desc{
  width: 100%;
}
.application-form{
  width: 100%;
}
.copyright{
  font-size: 11px;
}
.downloads{
  width:100%;
}
.projects-div{
  width: 60%;
  margin-left: 20%;
}
.subs-div h3{
  font-size: 24px;
}
  }