/* Base styling */
h1, h2, h3{
    font-family: 'Bebas Neue';
}

body{
    font-family:  'Titillium Web', sans-serif;
    background-color:black;
    color: white;
}

html{
    scroll-behavior:smooth;
}

img{
    max-width: 100%;
}

h4, h5, h6, p{
    font-weight: 600;
    font-size: 1rem;

}

.maintext{
    font-size: 1.1rem;
    padding-bottom: 1.3rem;
}

.card-text{
    font-size: 1rem;
}

.card-heading{
    font-size: 1.1rem;
}

.card-img-top{
    object-fit: cover;
    max-height: 7rem;
}


.news-readmore-btn.btn-outline-dark{
    color: black;

}

.news-readmore-btn:hover{
    background-color: white;
    border-color: #FF6700;

}

.orange-text{
    color: #FF6700;
}

.grey-text{
    color: gray;
}

/* For posts */

.article-div {
font-size: 1.1rem;
line-height: 1.8;
padding-bottom: 1rem;
margin-bottom: 1.5em;
}

.article-div p {
text-align: justify;
}

.quote-block {
margin-bottom: 3rem;
border-left: 3px solid #ccc;
font-style: italic;
color: #444;
}

.quote-block p {
padding-left: 1rem;
}

.angled-image {
    margin-bottom: 2rem;
}

/* Tablet + web */
@media (min-width: 1200px) {
.article-div {
    padding-right: 5%
}

.angled-image {
    margin-bottom: 5rem;
}

.angled-image.angle-right img{
    transform: rotate(5deg);
  }

  .angled-image img{
    transform: rotate(-5deg);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  .angled-image img:hover {
    transform: rotate(0deg);
  }

 
}

/* Layout styling */

.heading{
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 2rem;  /* for the horizontal line underneath */
    }

.heading-div p{
    margin-bottom: 1rem;}

.white-div{
    background-color: white;
    color: black;
}

.shell{
    text-align: left;
    padding: 1rem 2rem;
}

.row{
    padding-bottom: 5%;
}

.device-box{
    overflow: hidden;
}

.device{
    position: absolute; /* or absolute */
    background-image: url('../images/graphic_device.png');
    background-size: cover;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
}

.device-1{
    top: 90rem;
    right: 0rem;
    width: 20%;

}

.device-2{
    top: 130rem;
    left: 0rem;
    width: 20%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.device-3{
    top: 200rem;
    right:0rem;
    width: 20%;

}

.device-4{
    top: 250rem;
    left:0rem;
    width: 20%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);

}
/* State styling */
.heading-div{
    margin: 6rem 10% 2rem 0rem;
    text-align: left;}

.subtext{
    font-weight: 400;
}

.center-div{
    text-align: center;}
     

.hyperlink{
    color: gray;

}

.hyperlink:hover{
    color: #FF6700;
}

/* Navigation Bar */

.navbar {
    overflow: hidden;
    background-color: rgba(0,0,0,0.9);
    z-index: 100;
    padding: 0 2rem 1rem 2rem;
  }
  
  /* Navbar links
  #navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
  } */
  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
 .sticky {
    position: fixed;
    top: 0rem;
    width: 100%;
  }
  
.navbar-brand{
    width: 5rem;
    padding: 2rem 0;
}

.nav-item{
    margin-right: 1rem;
    margin-left: .5rem;
    font-size: 0.8rem;
}

.nav-line{
    border-style: none solid none none;
    border-width: 1px;
    line-height: 1px;
    margin-left: 2rem;
    color: white;
    display: inline;
}

.nav-icon{
    margin-left: 0;
    margin-right: 0;
}

.navbar-dark:hover .navbar-nav:hover .nav-link:hover{ 
    color: #FF6700;
}

/* Removes the border around burger icon  */
.custom-toggler.navbar-toggler {
border-color:none;
border:none;}

.dropdown-menu{
    background-color:inherit;
    padding: 0;
}

.dropdown-item{
    background-color: inherit;
    color:white;
    font-size: 0.8rem;
    margin: 0 0;
}


.dropdown-item:hover{
    color:#FF6700;
    background-color: inherit;
}
    

.donate-btn{
    margin-bottom: 2rem;
  }

/* Setting the stroke to green using rgb values (0, 128, 0) */
    
/* .custom-toggler 
.navbar-toggler-icon {
background-image: 
url(
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(91, 67, 242, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
} */


/* Title */

.header .heading-div{
    margin: 4rem 15% 0rem 2rem;

}

.header .heading{
    font-size: 3.5rem;
}

.header .flex-box{
    display: block;

}
.header-image{
    width:100%;
    height: 35vh;
    background-image: url('../images/header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 10rem;
    background-clip: border-box;
    filter: brightness(80%);
    }

hr{
    width: 10rem;
    height: 0.4rem;
    margin: 1.5rem auto 3rem 0;
    background-color: #FF6700;
}

/* About Us */

.about{
    background-image: url('../images/ramon-salinero.jpg');
    background-size: contain;
    background-repeat: repeat-x;
    width: 100%;
}

.about .inner-div{
    margin: 0 10% 0 auto ;

}

.about p{
    padding:0 0 2rem 0;
    margin-top: 0;
}

.read-more-btn{
    font-size: 1.25rem;
    color:gray;
    background-color: rgba(0,0,0,0.05);
    padding: 0 0;
    border: none;
}

.btn {
    &:not(.disable):hover
    {
    color: #FF6700;
    }
}

.btn-dark{
    border-color: white;
    border: solid 1pt;
}

.btn-dark {
    &:not(.disable):hover{
    background-color: white;
}
}

.black-btn{
    background-color: black;
}

.orange-btn{
    background-color: #FF6700;
    border-color: white;
}

.donate-btn{
    background-color: black;
    border-color: white;
    border: solid 1pt;
}

.donate-btn:hover{
    background-color: white;
}

.btn .subtext{
    color: white;
}

#ReadMore{
    display: none;
}

#LessBtn{
    display: none;
}

/* Meet The Team */

.mobile-only .float-div .image{
margin-left: 0rem;
}

.web-only{
    display: none;
}
.flex-box{
display: flex;
    text-align: left;
    align-items:center;
    margin: 3rem 0;
}

.image{
    width: 8rem; 
    margin:  0 0;
    padding: 0 0;
}


.name{    
    font-size: 1.3rem;
    font-weight: 800;
    margin: 1rem 0 0 1rem;
}


.role{
    font-size: 90%;
    font-weight: 400;
    margin-left: 1rem;

}

.team-div .job{
    font-size: 90%;
    margin: 0 0 0 1rem;
}

/* Mission */

.mission-div{
    display: inline-block;
    white-space: nowrap;
}

.mission-card{
    margin: 0 0 4rem 0;
    white-space: normal;
    text-align: left;
}

.mission-icon  {
    height: auto;
float: left;    
min-width: 4rem;
max-width: 4rem;
vertical-align: middle;
margin: 1rem 2rem 2rem 0;
}

.obj-icon{
    padding: 2.5rem 2rem;
    width: 7.5rem;
}

.obj-div {
    margin-bottom: 25px;
    align-items: center;

}


.mission .heading-div h3{
    font-family: Titillium Web;
}

.mission-title{
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 0;
}


/* Gallery */

.col-3{
    flex: 0 0 0%;
}
.speech-icon{
    width: 1rem;
}

.speech-icon-flip{
    transform: scaleX(-1);
}

.testimonial-text{
    font-family: Titillium Web;
    font-weight: 600;
    font-size: 1rem;
}

.carousel-inner .container-fluid{
    padding: 0 0rem 2rem 0rem;
}

.carousel-indicators li{
    background-color: white;
    width: 10px;
    height: 10px;
    border-radius: 100%;
  }


ol.carousel-indicators{
    margin-bottom: 0;
}

.carousel-item em{
    font-weight: 100;
    color: gray;
}

.carousel-indicators .active{
    background-color: #FF6700;
}

.curator-box{
padding: 3rem 0rem;
}



.partners-div{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 3rem;

}
.partner-logo{
    width: 40%;
}
 /* CTA */

.cta-div .heading{
    padding: 4rem 0 ;
    margin: 0 0; }

 .cta-outer{
    width: 100%;
 }

.cta-div{
     background-color: rgb(41, 41, 41);
     height: 100%;
     padding-bottom: 2rem;
     bottom: 2rem;
     overflow: hidden;
     margin: 0 auto;
     width: 80%;
     z-index: 99;
     position: relative;
 }

.cta-div .inner{
     padding: 0rem 1rem 2rem 1em;
 }

.white-border-round{
    border: 0.8px solid;
    border-radius: 10px;
    border-color: white;
    width: 80px;
    height: auto;
    padding: 0.5rem 0rem;
    margin: 2rem auto 0 auto;
    position: relative;   
}

.popup-button {
    cursor: pointer;
  }

.popup-button .popup-text {
    visibility: hidden;
    width: 90%;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 1rem 1rem;
    position: absolute;
    font-size: 80%;
    z-index: 101;
    bottom: 69%;
    left: 60%;
    margin-left: -55%;
  }

.popup-button  .popup-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
  }

  .popup-button .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

  .clickhere{
      color: gray;
  }

  .clickhere:hover{
      color: #FF6700;
  }
/* Footer */

.footer{
    color: white;
    padding: 0 0;
    margin-bottom: 2rem;
    text-align: center;
}

.white-border-round a{
    color: white;
}

.white-border-round a:hover{
    color: #FF6700;
}

.footer-icon{
    margin: 2rem 1rem;
    color: white;
}

.footer-icon:hover{
    color: #FF6700;
}

.footer p{
    font-size: 0.6rem;
}

.footer a{
    color:white
}



/* Join Us Page */

.shell.form{
    width: 100%;
    margin-bottom: 0rem;
    padding-bottom: 0;
    padding-top: 20%;
}

.form .heading{
    margin-top: 5rem;
}
.form-group .paragraph{
margin-bottom: 3rem;
}


.form-group .subtext{
font-size: 80%;
}
.form a{
    margin: 1rem 0;
    color: white;
}

a.fb-link{
font-size: 0.8rem;
}
.form a:hover{
    color: #FF6700;
}

.read-more-btn.form-readmore{
    font-size: 1rem;
    padding: 0 0;
    margin: 0 0;
}


/* Redirect and Welcome Page */


.redirect-link{
    font-size: 0.8rem;
    list-style-position: outside;
}

ul{
    list-style: inside;
    list-style-type: square;
}

.redirect-links{
    margin: 5% auto;
    text-align: left;
}

.list-item{
    margin: 2% auto;
}

.darkBox {
margin: 5% auto 0 auto;
padding: 5% 5%;
max-width: 800px;
background-color: black;
border: white 1px;
border-style: solid;
border-radius: 5px;
color: white;
word-break: break-word;
}

textarea.darkBoxSubBox {
background-color: white !important;
color: darkgrey !important;
margin: 1em 0;
resize: none;
}

a.darkBoxLink:link, a.darkBoxLink:visited {
color: #FF6700;
text-decoration: none;
}
a.darkBoxLink:hover, a.darkBoxLink:active {
color: #FF6700;
text-decoration: underline;
}

ul.centreList {
text-align: left;
display: table;
margin: 0 auto;
list-style-position: outside;
width: 80%;
padding: 0 0;

}

.notice {
color: #FF6700;
font-weight: bold;
}

/* Event Pages */

.event .heading{
    margin-top: 5rem;
    /* background-image: url('../images/rp-image.png');
    background-size: cover; */
}


.rp-page .header{
   padding-top: 10rem;
   margin-left: 2rem;
}



.rp-page .header .heading{
    font-size: 3rem;
    margin-left: 0rem;
 }


 .rp-page .header img{
    height: 50%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    position: absolute;
    top: 5rem;
    left: 0rem;
    z-index: -1;
 }

 .rp-page .header-amplify img{
    object-fit: contain;
    top: 0;
    padding: 0;
 }

.rp-page .d-flex{
    padding: 10% 8%;
    }


.rp-page ul{
 list-style-position: inside;
}

.rp-page .img-responsive{
    margin-bottom: 5%;
   }
   

#faqs .btn{
    padding-left:0;
    text-align: left;
}

#sponsors .heading{
    font-size: 2em;
}

/* Responsiveness */

/* Tablet & Web */
@media (min-width:768px){
    .mobile-only{
        display: none;
    }

    .web-only{
        display: block;}


    .heading{
        font-size: 5rem;
        }

    .heading-div{
            margin: 8rem 10% 0 auto;
  }

  .shell.form{

    padding-top: 15%;
}


.shell.event{

    padding-top: 15%;
}

/* Navbar */

.donate-btn{
    margin-bottom: 0;
  }

  /* Header section */

    .header .heading{
        font-size: 6vmax;
    }

    .header .heading-div{
        margin: auto 8% auto 4rem;
    }

    .header .flex-box{
      margin: 10% 0 0 4rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-image{
    width:100%;
    height: 600px;
    overflow:hidden;
    margin-top: 0;
    position: relative;
    }

    .navbar-brand{
    width: 6rem;
    margin: 0 0 0 2rem;
    padding: 3rem 0;
    }

    .nav-item{
        margin-left: 0;
    }

    .shell{
    text-align: left;
    padding: 4rem 4rem;
    }

    .flex-box{
        padding-top: 5rem;
    }

    h4, h5, h6, p{
        font-size: 1.2rem;}

    .maintext{font-size: 1.3rem;}

    a.fb-link{
        font-size: 1rem;
        }
    .about{
            background-repeat: no-repeat;
        background-size:cover;
        max-width: 100%;
height:auto;
        }
        
    .about .heading-div{
                margin-right: 50%;
                }
     
    .name{
        font-size: 1.6rem;
        margin:  5rem 2rem 0 1rem ;

    }

    .image-div{
        position: relative; 
        display:inline-block;
        max-width: 11.2rem;
        min-width: 10rem;
        min-height: 220px;
    }
    .image{
        width: 100%;
        height: auto;
    }

.team-div:hover .image{
    opacity: 0.2;
}
.team-div:hover .job{
    opacity: 1;
}

    .role{
        font-weight: 400;
        font-size: 1.2rem;
        margin: 0  2rem 0 0;
        padding: 0 0 0 1rem;
    
    }

    .team-div .job{
        position:absolute;
        z-index: 10;
        width: 100%;
        padding:  0 2rem;
        opacity: 0;
        top: 50%;
        text-align: center;
        font-weight: 600;
        font-size: 1rem;
        margin: 0 auto;
    }

    .mission-div, .mission-card{
        margin: 0 0;
    }
    
    .mission-card{
        padding: 2rem 0;
    }
    .mission-icon{
        min-width: 5rem;
        height: auto;
        margin: 0 2rem;
    }

    .mission-title{
        font-size: 1.6rem;
    }
    

    .obj-icon{
        width: 8rem;
        height: 9rem;
    }

    .testimonial-text{
        font-size: 1.2rem;
        padding: 0 3rem;
    }


    .partner-logo{
        width: 50%;
    }

    .cta-div .inner{
        padding: 0rem 3rem 0rem 3rem;
    }

    .add-seperator{
        border-style: none solid none none;
        border-color: white;
        border-width: 2px;
    }


.form .heading{
    font-size: 6rem;
    margin-top: 5rem;
}

.form-group .paragraph{
margin-bottom: 3rem;
}

.form-group .subtext{
font-size: 1rem;}


.popup-button .popup-text {
   font-size: 1rem;
   bottom: 110%;
   left: 63%;
   width: 85%;
  }
  
.find-us h3{
font-size: 1.8rem;}

.rp-page .header{
    padding-top: 15rem;
    margin-left: 5rem;
    margin-bottom: 5rem;
 }

.rp-page .header .heading{
    font-size: 6vmax;
}

 .rp-page .header img{
    top: 0rem;
    height: auto;
 }


.rp-page .img-responsive{
margin-bottom: 0%;
}

.rp-page .img-rocket{
    margin-bottom: 5%;
}


.rp-page .d-flex{
padding: 5% 15%;
}

.rp-page .img-div{
   padding-bottom: 5%;
   width: 50rem;
    }
    

#faqs .btn{
    text-align: center;
}


#sponsors .heading{
    font-size: 3em;
}

}

/* Animations */
.fade-in {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
  }

 

  /* Tablet Only */

@media (min-width: 768px) and (max-width: 1200px) {
    #meet-the-team .flex-box{
        display: block;
        text-align: center;
    }

    .mission-icon{
        padding: 2.5rem  0;

    }


    .donate-btn{
        margin-bottom: 2rem;
    }
  
    .name{
        width: 100%;
        margin: 2rem 0 0 0;
        padding: 0 0;
    }
    .role{
       width: 100%;
       margin: 0 0;
       padding: 0 0;
    }

    .image{
        height: 200px;
        width: auto;
    }

    .header .header-image{
        background-position: -130px -30px;
    }
    .header .flex-box{
        margin-top: 8%;
        padding-top: 15%;

    }

        .nav-item{
        margin-left: 1rem;
    }

    .about{
        background-size: contain;
        background-repeat: repeat-x;
    }
    .heading{
        font-size: 5rem;
    }
    .header .heading{
        font-size: 7vmax;
    }
    .form .heading{
        font-size: 5rem;
    }

    .partner-logo{
        width: 80%;
    }

    .partners-div{
        padding-bottom: 2rem;
    }

    
    .rp-page .header{
        margin-left: 4rem;
        margin-bottom: 0rem;
     }
     
     .rp-page .header img{
        top: 5rem;
        height: auto;
      }

    .rp-page .header-amplify img{
        top: 0
      }
   
     #sponsors .heading{
        font-size: 3rem;
    }
    
}

/* Timeline for Representing Physics */

.timeline {
    border-left: 3px solid #FF6700;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    line-height: 1.4em;
    padding: 50px;
    list-style: none;
    text-align: left;
    max-width:100%;
    margin-left: 45%;
}

@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
        margin-left: 0;
    }
}


.timeline .event {
    padding-bottom: 35px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline .event {
        padding-top: 25px;
        padding-bottom: 20px;

    }
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 500;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline .event:before {
        left: 0px;
        text-align: left;
    }
}

.timeline .event:after {
    -webkit-box-shadow: 0 0 0 3px #FF6700;
    box-shadow: 0 0 0 3px #FF6700;
    left: -55.8px;
    background: white;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 5px;
}

@media (max-width: 767px) {
    .timeline .event:after {
        left: -31.8px;
    }
}


.rp-page .header-amplify{
    position: relative;
    top: 12rem;
    margin-left: 0;
    padding-bottom: 240px;
    }