body {
font-family: 'Poppins', sans-serif;
color: #000;
}

a {
color: indianred;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: none;
}

h1, h6 {
font-family: 'Oswald', sans-serif;
color: red;
}

h2 {
font-family: 'Oswald', sans-serif;
font-size: 2.5em;
margin-bottom: 20px;
color: red;
}

h3 {
font-family: 'Oswald', sans-serif;
font-size: 2.0em;
margin-bottom: 20px;
color: red;
}

h4 {
font-family: 'Oswald', sans-serif;
font-size: 1.50em;
margin-bottom: 20px;
color: blue;
}

h5 {
font-family: 'Oswald', sans-serif;
font-size: 1.25em;
margin-bottom: 20px;
color: black;
}

.section {
padding: 0;
margin: 0;
}

#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
transition: all ease-in-out 0.5s;
z-index: 100;
background: #000;
overflow-y: auto;
}

#header .logo img {
margin: 15px auto;
display: block;
width: 125px;
height: auto;
}

#logo {
color: #fff;
text-decoration: none;
}

.slogan {
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.5em;
padding: 0 15px;
}

#navbar {
overflow-y: auto;
}

#intro {
width: 100%;
height: 100vh;
background: url("../img/the-best-dj-courses-online.jpg") top center;
background-size: cover;
}

#intro .intro-container {
position: relative;
z-index: 2;
min-width: 300px;
}

.intro-header {
font-family: 'Oswald', sans-serif;
font-size: 4.0em;
color: #FFFFFF;
margin-left: 350px;
text-shadow: 2px 2px 4px #333;
}

.intro-subheader {
font-family: 'Oswald', sans-serif;
font-size: 2.0em;
color: #edf000;
margin-left: 350px;
text-shadow: 2px 2px 4px #333;
}

#main {
margin-left: 300px;
}

.container {
max-width: 100%;
}

.nav-menu>ul>li {
position: relative;
white-space: nowrap;
list-style: none;
}

.nav-menu a,
.nav-menu a:focus {
display: flex;
align-items: center;
color: #FFF;
transition: 0.3s;
font-size: 18px;
padding: 20px 10px;
}

.nav-menu a i,
.nav-menu a:focus i {
font-size: 24px;
padding-right: 10px;
color: #FFF;
}

.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu li:hover>a {
text-decoration: none;
color: #edf000;
}

.nav-menu a:hover i,
.nav-menu .active i,
.nav-menu .active:focus i,
.nav-menu li:hover>a i {
color: #edf000;
}

.subnav {
font-size: 0.6em;
position: absolute;
margin: 45px 0 0 35px;
color: indianred;
}

.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 65px;
z-index: 300;
border: 0;
font-size: 24px;
transition: all 0.5s;
background-color: indianred;
color: #fff;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: 50px;
cursor: pointer;
}

.mobile-nav-active {
overflow: hidden;
}

.mobile-nav-active #header {
left: 0;
}

.bx-ul > li {
margin-bottom: 10px;
}

#submenu {
position: static;
right: 0;
bottom: 0;
width: 100%;
}

.submenu-nav {
font-size: 0.75em;
padding: 20px;
}

.copy {
color: #f5f5f5;
font-size: 0.6em;
padding: 20px;
width: 100%;
}

.back-to-top {
position: fixed;
visibility: hidden;
right: 15px;
bottom: 15px;
z-index: 400;
width: 40px;
height: 40px;
transition: all 0.3s;
}

.back-to-top i {
font-size: 36px;
color: indianred;
line-height: 0;
}

.back-to-top:hover {
color: white;
}

.back-to-top.active {
visibility: visible;
opacity: 1;
}

@media only screen and (max-width: 1199px) {
#header {
left: -300px;
}

.intro-header {
margin-left: 25px;
}

.intro-subheader {
margin-left: 25px;
}

#main {
margin-left: 0;
}
}

/* Parallax Sections */
.parallax-courses {
/* The image used */
background-image: url("https://www.bestdjcourses.com/img/learn-how-to-dj-course.jpg");

/* Set a specific height */
height: 100%; 

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

/* Remove Paralax on Mobile Devices  */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
.parallax-courses {
background-attachment:scroll !important;
background-size: cover;
height: 100%;
overflow: hidden;
}
}

.pulse {
background-color: red;
position: relative;
animation: animate 3s linear infinite
}

@keyframes animate{0%{box-shadow: 0 0 0 0 rgb(255, 109, 74, 0.7) , 0 0 0 0 rgb(255, 109, 74, 0.7)}40%{box-shadow: 0 0 0 50px rgb(255, 109, 74, 0) , 0 0 0 0 rgb(255, 109, 74, 0.7)}80%{box-shadow: 0 0 0 50px rgb(255, 109, 74, 0) , 0 0 0 30px rgb(255, 109, 74, 0)}100%{box-shadow: 0 0 0 0 rgb(255, 109, 74, 0) , 0 0 0 30px rgb(255, 109, 74, 0)}}