:root {
    --dark: #0a0a0a;
    --grey: #f6f6f6;
    --light: #ffffff;
    --nav:#474955;
}

body {
    font-family: 'Spartan', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    background-color: var(--grey);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.6;
}

/* ///////////
   Bootstrap
/////////// */

.py-6 {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.bg-light { background-color: var(--light) !important; }
.bg-grey { background-color: var(--grey) !important; }
.bg-dark { background-color: var(--dark) !important; }
.bg-nav { background-color: var(--nav) !important; }

.navbar { min-height: 5rem; }

.btn {
    padding: .75rem 1rem;
    border-radius: .1rem;
    font-weight: 600;
}

.btn-dark { background-color: var(--dark); }

.btn-outline-dark:hover {
    background-color: var(--dark);
}

.badge { padding: .5em 1em; }

.badge-secondary { 
    background-color: var(--grey);
    color: var(--dark);
}

.font-weight-bold { font-weight: 700 !important; }

button {
    cursor: pointer;
}

button:focus {
    outline: none;
}

.modal-dialog {
    max-width: 800px;
}

/* ///////////
   Hero
/////////// */

.hero {
    background: linear-gradient(180deg,var(--grey) 70%,var(--light) 0);
}

.play-icon {
    width: 5rem;
    height: 5rem;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .5);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.8);
	}

	70% {
		box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ///////////
   About us
/////////// */

.member-info {
    bottom: 3rem;
    left: 3rem;
}

/* ///////////
   Blog
/////////// */

.user {
    max-width: 50px;
}

/* ///////////
   Responsive 
/////////// */

@media (max-width: 768px) { 
    .modal-dialog {
        max-width: 500px;
    }
}
@media (max-width: 575.98px) { 
    .w-75 {
        width: 100% !important;
    }
    .display-4 {
        font-size: 2.4rem;
    }
    .btn {
        width: 100%;
    }
    .text-right {
        text-align: center !important;
    }
}