* {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Raleway', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #777;
        }

        h1 {
            font-size: 2rem;
            color: #555;
            font-weight: bold;
            font-family: "Charm", cursive;
        }

        h2 {
            font-size: 1.75rem;
            color: #9c1c20;
            font-weight: bold;
            font-family: "Charm", cursive;
        }

        h3 {
            font-size: 1.5rem;
            color: #333;
            font-weight: bold;
        }

        h5 {
            font-size: 1rem;
            color: #9c1c20;
            font-weight: bold;
	    margin: 1rem 0;
        }

        .team i {
            font-size: 24px;
            color: #555;
	    border-radius: 50%;
	    border: 4px solid #555;
	    width: 48px;
    	    height: 48px;
    	    text-align: center;
    	    align-content: center;
        }

        .team p {
            font-weight: 300;
	    font-size: 1.25rem;
	    line-height: 125%;
	    text-align: justify;
	    margin-top: 1rem;
	    margin-bottom: 1rem;
        }

        .team .card {
            border: none;
            border-radius: 8px;
            transition: all 0.3s ease-in;
            -webkit-transition: all 0.3s ease-in;
            -moz-transition: all 0.3s ease-in;
            box-shadow: 5px 5px 15px #9e9e9e;
        }

        .team .card:hover {
            background: #f98d00;
            color: #fff;
            border-radius: 8px;
            border: none;
            box-shadow: 5px 5px 15px #f98d00;
        }

        .team .card:hover h3 {
            color: #fff;
	}

        .team .card:hover i {
            color: #fff;
	    border: 4px solid #fff;
        }
        .team .card i:hover {
            color: #555;
	    border: 4px solid #555;
	    background: #fff;
        }

	.team .card .social-links {
	    bottom: 10px;
    	    position: relative;
    	    justify-self: anchor-center;
    	}

        .team .card .card-body img {
            height: 150px;
            width: 150px !important;
            object-fit: cover;
            object-position: center center;
            border-radius: 50% !important;
            border: 5px solid transparent;
        }

        .team .card:hover .card-body img {
            border: 5px solid white !important;
            transform: scale(1.1);
            transition: transform 2s;
        }



.hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: center;
    width: auto;
    background-repeat: no-repeat;
    
    position: relative;
    top: 0;
  }
  .hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .hero > * {
    color: white;
  }
  
  .hero > h1 {
    font-size: 4rem;
    padding-bottom: 1rem;
  }
  
  .hero > article > p {
    font-size: 1.5rem;
    font-weight: 200;
  }
  
  .hero > article > a {
    padding: 1rem;
    margin-top: .75rem;
  }
  
  /* teams styles */
  .teams {
    padding: 1rem;
  }
  
  .teams > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
  }
  
  .teams > ul > li {
    border: 1px solid #323232;
    border-radius: 8px;
    height: auto;
    box-shadow: 4px 4px 12px lightgray;
  }

  .teams > ul > li:hover {
    box-shadow: 4px 4px 12px #f98d00;
  }
  
  .teams > ul > li > figure {
    max-height: 320px;
    overflow: hidden;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    position: relative;
  }
  
  .teams > ul > li > figure > img {
    width: 100%;
  }
  
  .teams > ul > li > figure > figcaption {
    position: absolute;
    bottom: 0;
    background-color: rgba(0,0,0,.7);
    width: 100%;
  }
  
  .teams > ul > li > figure > figcaption > h3 {
    color: white;
    padding: .75rem;
    font-size: 1.25rem;
    font-family: "Charm", cursive;
  }
  
  .teams > ul > li > p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 1rem .75rem;
    color: #666666;
  }
  
  .teams > ul > li > a {
    padding: .5rem 1rem;
    margin: 5%;
    background: #9c1c20;
    color: #fff;
    padding: 10px 16px;
    margin-bottom: 8px;
    width: 90%;
    display: block;
    text-align: center;
    border-radius: 6px;
  }
  
@media (max-width: 448px) { 
  .teams > ul > li {
    height: auto;
  }
}

@media (max-width: 640px) { 
  .teams > ul > li {
    height: auto;
  }
}


/* Video Overlay */

#overlay {
	background-color:rgba(0,0,0,0);
	height:100%;
	left:0;
	position:relative;
	top:0;
	transition:background-color 300ms ease;
	width:100%;
}

.fade { 
	background-color:rgba(0,0,0,.85) !important; 
}


/* Hero Video + Fallback */

#hero-vid {
	backface-visibility:hidden;
	background:url("gr_icc.jpg") no-repeat scroll 0 0 #000;
	background-size:cover;
	bottom:0;
	height:auto;
	min-height:100%;
	max-width:100vw;
	position:relative;
	right:0;
	z-index:1;
}

#state {
	bottom:0;
	cursor:pointer;
	font-size:2.25rem;
	left:0;
	line-height:1;
	padding:2rem 2.5rem 1.65rem;
	position:relative;
	z-index:10;
	margin-top: -5rem;
}