* {
    margin: auto;
}

body {
    text-align: center;
    background-color: black;
    color: white;
    cursor: url("../img/pointan.png"), auto;
}

nav {
    height: 66px;
}

#sf1 {
    animation: fade 2s;
}

#sf2 {
    animation: fade 4s;
}

#sf3 {
    animation: fade 8s;
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.flow-text, h1, h2, h3, h4 {
    text-shadow: 0px 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
    font-weight: 300;
}

.responsive-img {
    margin: 2rem;
}

.btn, .btn-large, .btn-small, .btn-flat {
    border-radius: 0;
}

.btn-large {
    border-radius: 0;
    margin: 2rem 0.125rem 0rem 0.125rem;
}

.btn:hover, .btn-large:hover, .btn-small:hover, .btn-flat:hover {
    filter: brightness(1.25);
}

.modal-content .flow-text, .modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4 {
    text-shadow: none;
}

.bgimage {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url("../img/background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    z-index: -100;
  }

.bgvideo {
    position: fixed;
    top: -64px;
    bottom: -64px;
    width: 100%;
    height: 125%;
    left: 0;
    right: 0;
    filter: blur(2rem);
    z-index: -100;
}

.bgshade {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, #001E3E, #402811);
    opacity: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    z-index:-90;
}

.glass {
  background-color: rgba(255, 255, 255, 0.125);
}

nav ul li.active {
    background-color: rgba(255, 255, 255, 0.125);
}

.container {
  width: 75%;
  max-width: 1080px;
}

.nav-wrapper {
  width: 75%;
  max-width: 1280px;
}

.avatar-left {
    float: left;
    padding-right: 2rem;
}

.avatar-right {
    float: right; 
    padding-left: 2rem;
}

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

.text-right {
    text-align: right;
    padding: 2rem 0;
}

.member-role {
    font-style: italic;
}

.member-description {
    min-height: 4rem;
}

.text-left h3, .text-right h3 {
    line-height: 62.5%;
}

nav ul a:hover {
  background-color: rgba(255, 255, 255, 0.125);
}

.slider {
    max-width: 768px;
    height: 672px;
}

.slider .slides {
    max-height: 672px;
}

.collapsible-header {
    background-color: transparent;
    border-bottom: none;
    text-transform: uppercase;
}

.collapsible-body {
    border-bottom: none;
}

.collapsible {
    border: none;
    
}
.modal-content {
    color: black;
    text-align: left;
}

.modal-content .flow-text {
    font-size: 1.375rem;
}

.page {
  margin: 0 auto;
  padding-top: 1rem;
  min-height: calc(100vh - 13rem);
  padding-bottom: 3rem;
}

.page-footer .footer-copyright {
    background-color: rgba(255, 255, 255, 0.0625);
}

.level-image {
    float: left;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.level-info {
    display: inline-block;
    width: calc(20rem + 30vw);
}

.search-card {
    background-color: rgba(55, 71, 79, 0.875);
}

input {
    text-align: center;
}

.dropdown-content li a {
    color: #039be5;
}

@keyframes scale {
    from { transform: scale(0); }
    to   { transform: scale(1.0); }
}

.scale-transition {
    animation: scale 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.sidenav {
    width: 24rem;
}

.sidenav li {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.sidenav li a {
    font-size: 2rem;
}

span.role-programmer { 
	color : #40eaf3; 
} 

span.role-projectLeader { 
	color : red; 
} 

span.role-spriter { 
	color : #ff01ff; 
} 

span.role-musician { 
	color : rgb(26,188,156); 
}  

span.role-server { 
	color : #d35656; 
}  

span.role-trailer { 
	color : #f9ff01; 
}  
span.role-website { 
	color : #ffbf01; 
}  

span.role-betaTester { 
	color : #5669ff; 
} 

h3.pastMember
{
	margin-bottom:0px;
}
a.memberSocialLink{
	font-size:20px;
}