@import url('https://fonts.googleapis.com/css?family=poppins:400,500,700');
  :root {

  }
  body {
	  padding-top: 78px;
  }
  
  html, body {
    color:#222;
    font-family: 'Poppins', sans-serif;
	height:100%;
	width:100%;
  }
  
  /*-- NAVBAR --*/
  .navbar {
	padding: .2rem;
  }
  .navbar-nav li{
    padding-right: 30px;
  }
  .nav-link {
	font-size: 1.1em !important;
  }
  .dropdown:hover>.dropdown-menu {
        display: block;
  }
  
  /*-- CAROUSEL --*/
  .carousel-inner img{
	height: 550px;
	width: 100%;
  }
  .carousel-caption {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
  }
  .carousel-caption h1, h2{
	font-size: 300%;
	text-transform: uppercase;
	text-shadow:-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
  }
  .carousel-caption h3, h4{
    font-size: 200%;
	font-weight: 500;
	padding-bottom: 1rem;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }
  .btn-primary {
	background-color: #6648b1;
	border: 1px solid #563d7c;
  }
  .btn-primary:hover{
	background-color: #563d7c;
	border: 1px solid #563d7c;
  }
  #brand {
	border-radius: 50%;
	box-shadow: 1px 1px #888888;
	height: 65px;
	width: 70px;
}
  
  /*-- SIDE BAR--*/
    #grid{
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
	}

	/* Create four equal columns that sits next to each other */
	#gridPic{
	  flex: 25%;
	  max-width: 33.3%;
	  padding: 0 4px;
	}

	#gridPic img {
	  margin-top: 0px;
	  vertical-align: middle;
	  width: 100%;
	  border-radius: 15px;
	  cursor: ;
	  transition: 0.4s ease-out;
	}
	#gridPic img:hover {
	  
	}
	@media screen and (max-width: 800px) {
	  #gridPic {
		flex: 50%;
		max-width: 50%;
	  }
	}

	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	  #gridPic {
		flex: 100%;
		max-width: 100%;
	  }
	  #gridPic img {
		filter: grayscale(0) brightness(1);
	  }
	}
  
  /*-- PROGRAMS --*/
  #prog {
	  
	  background-repeat: repeat;
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
  }
  .programCard {
  height: 380px;
  border-radius: 15px;
  padding: 1.5rem;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
  opacity: ;
  }
  .programCard:hover {
    transform: translateY(20px); }
    .programCard:hover:before {
      opacity: 0; }
    .programCard:hover #info {
      opacity: 1;
      transform: translateY(0px); }
  .programCard:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
    transition: 0.5s;
    opacity: 1; }
  .programCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 15px; }
  .programCard #info {
    position: relative;
    z-index: 3;
    color: white;
    opacity: 0;
    transform: translateY(30px);
    transition: 0.5s; }
    .programCard #info h1 {
      margin: 0px;
	  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	  }
    .programCard #info p {
      letter-spacing: 1px;
      font-size: 15px;
      margin-top: 8px; }
    .programCard #info button {
      padding: 0.6rem;
      outline: none;
      border: none;
      border-radius: 3px;
      background: white;
      color: black;
      font-weight: bold;
      cursor: pointer;
      transition: 0.4s ease; }
      .programCard #info button:hover {
        background: red;
        color: white; }
  
  /*-- MOBILE PROGRAMS --*/
  #mobileProg {
	  
  }
  
  /*-- JUMBOTRON --*/
  .jumbotron {
    padding: 1rem;
	border-radius: 0;
  }
  .padding{
    padding-bottom: 2rem;
  }
  .welcome {
    margin: 0 auto;
	padding-top: 2rem;
	width: 75%;
  }
  .welcome hr{
	border-top: 2px solid #b4b4b4;
	margin-top: .3rem;
	margin-bottom: 1rem;
	width: 95%;
  }
  
  /*-- SOCIAL MEDIA --*/
  .fa {
  border-radius: 4px;
  padding: 2px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
}

/* Add hover effect */
.fa:hover {
  color:black;	
  opacity: 0.7;
}

/* Facebook */
.fa-facebook {
  background: #bb0000;
  color: white;
}

/* Instagram */
.fa-instagram {
  background: #bb0000;
  color: white;
}

/* Twitter */
.fa-twitter {
  background: #bb0000;
  color: white;
}

/* Youtube */
.fa-youtube {
  background: #bb0000;
  color: white;
}
  
  /*-- FOOTER --*/
  footer{
	background-color: #3f3f3f;
	color: #d5d5d5;
	padding-top: 2rem;
  }
  hr.light {
	border-top: 1px solid #d5d5d5;
	margin-top: .8rem;
	margin-bottom: 1rem;
	width: 75%;
  }
  hr.light-wide{
	border-top: 1px solid #d5d5d5;
	margin-top: .8rem;
	margin-bottom: 1rem;
	width: 100%;
  }
  footer a{
	color: #d5d5d5;
  }
  footer a:hover{
	color: white;
  }
  
    /*-- SCHEDULE --*/
  #schedule {
	  width: 860px; 
	  height: 555px;
  }
  
  /*-- Media Queries --*/
  @media (max-width:1200px){
	#getInvolved {
		display: none;
	}
	#prog{
		display: none;
	}
  }
  @media (min-width:1200px){

	#mobileProg {
		display: none;
	}
	
  }
  @media (max-width:992px){
	#schedule{
		width: 650px;
		height: 650px;
	}
	#getInvolved {
		content: hidden;
	}
	
  }
  @media (max-width:768px){
	#schedule{
		width: 450px;
		height: 450px;
	}
	#getInvolved {
		content: hidden;
	}
	body {
	  padding-top: 56px;
    }
  }
  @media (max-width:576px){
	#schedule{
		width: 350px;
		height: 350px;
	}
	#getInvolved {
		content: hidden;
	}
	body {
	  padding-top: 56px;
    }
  }
 
/*-- INSTRUCTORS --*/ 
  /*Bio Tabs*/
#bioNav{
	background: #bb0000;
	border: 2px solid black;
	border-radius: 4px;
	padding: 5px;
	margin: 2px;
}

#bioNav a{
		color: black;
}
  
  /*-- Firefox Fix --*/
  .carousel-item {
	transition: -webkit- transform 0.5s ease;
	transition: transform 0.5s ease;
	transition: transform 0.5s ease, -webkit- transform 0.5s ease;
	-webkit-backface-visibility: visible;
  }
  /*-- Fixed Background Image --*/
  figure {
	position: relative;
	width: 100%;
	height: 60%;
	margin: 0!important;
  }
  .fixed-wrap {
	clip: rect(0, auto, auto, 0);
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
  }
  #fixed {
	background-image: url('images/borgesfavicon_3.png');
	background-repeat: repeat;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	-webkit-transform: translateZ(0);
			transform: translateZ(0);
	will-change: transform;		
  }
  /*-Bootstrap Padding Fix-*/
  [class*="col-"]{
	padding: 1rem;
  }