/* Global CSS */
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: calc(1.0em + 1vw);
color: #FFF;
background: #222;
}

.fixed-top {
height: 80px;
max-height: 80px;
}

p {
font-size: 0.6em;
line-height: 1.50em;
}

a {
color: #fe6c48;
}

a:hover {
color: #b24c32;  
text-decoration: none;
}

.h2, h2 {
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
font-weight: 900;
text-transform: uppercase;
line-height: 1.0em;
}

.h3, h3 {
font-family: 'Montserrat', sans-serif;    
color: #FFF;
font-size: 0.8em;
font-weight: 900;
text-transform: uppercase;
line-height: 1.1em;
}

.h4, h4 {
font-family: 'Montserrat', sans-serif;    
color: #fe6c48;
font-weight: bold;
font-size: 0.8em;
line-height:1.0em;    
}

.h5, h5 {
font-size: 0.60em;
font-weight: 600;
text-transform: uppercase;
line-height: 1.1em;
}

ul, ol {
font-size: 0.6em;
}

ul.navbar-nav {
font-size: 1.0em;
}

.main-body {
margin-top: 0 !important;
}

.mobile-size {
width: 100%;
background: #000; 
}

.container {
max-width: 1280px;
}

/* Custom Nav Classes */
.dropdown-menu-right {
right: -20px;
min-width: 200px;
}

.navbar-dark .navbar-nav .nav-link {
color: #fff;
text-transform: uppercase;
font-size: 0.5em;
line-height: 1.50em;
}

.navbar-dark .navbar-nav .nav-link:hover {
color: #b24c32;
}

.navbar-expand .navbar-nav .nav-link {
padding-right: 1.0em;
padding-left: 1.0em;
}

.customSpacer {
width: 100%;
margin: 10px 0;
padding: 10px 0;
}

/* Custom Text Classes */
.copy {
text-transform: uppercase;
}

.small-copy {
font-size: 0.4em;
text-transform: uppercase;
}

/* Custom Background Classes */
.bg-custom {
background: #000;
}

/* Custom Button Classes */
.btn {
border-radius: 0;
}

.btn-bg-custom {
background: #fe6c48;
color: #000;
padding: 1.0em 2.0em;
text-transform: uppercase;
font-weight: 700;
}

.btn-bg-custom:hover {
background: #b24c32;
color: #000;
}

/* Custom Form Classes */
.form-control, .btn {
font-size: 0.5em;
}

/* Custom Form Classes */
.orderForm .form-control, .orderForm .btn {
font-size: 1.0em;
}

.form-control {
border-radius: 0;
min-height: 30px;
}

.form-control::-webkit-input-placeholder { color: #999; border-radius: 0;}  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: #999; border-radius: 0;}  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: #999; border-radius: 0;}  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: #999; border-radius: 0;}  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: #999; border-radius: 0;}  /* Microsoft Edge */

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
border-color: rgba(0, 149, 235, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 2px rgba(0, 149, 235, 0.6);
outline: 0 none;
}

.subEmail {
width: 220px !important;
border-radius: 0;
}

.subButton {
width: 220px;
border-radius: 0;
background: #fe6c48;
}

.subEmailSmall {
width: 100%;
border-radius: 0;
}

.subPasswordSmall {
width: 100%;
border-radius: 0;
}

.subButtonSmall {
width: 100%;
border-radius: 0;
background: #fe6c48;
}

.form-check {
line-height: 1.0em;
}

.form-check-label {
margin-bottom: 0 !important;
vertical-align: top;
font-size: 0.5em;
}

label {
font-size: 0.7em;
margin-left: 10px;
}

/* Custom Iframe Classes */
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
 
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

/** Floating Video CSS */
section.videowrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
background: #000;
z-index: 3;
}

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

/** Use .sticky */
.ytvideo .is-sticky,.videoTag .is-sticky{
position: fixed;
right: 3px;
bottom: 3px;
top: auto;
left: auto;
max-width: 320px;
max-height: 180px;
width: 320px;
height: 180px;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
z-index: 3;
}

@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}

.close-button {
position: fixed;
box-sizing: border-box;
display: block;
right: 24px;
bottom: 175px;
top: auto;
left: auto;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
display: none;
z-index: 3;
}

.close-button:before,
.close-button:after {
width: 20px;
height: 5px;
transform: rotate(-45deg);
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
background-color: #4F2121;
transition: all 0.2s ease-out;
}

.close-button:after {
transform: rotate(45deg);
}

.close-button:hover:after {
transform: rotate(-45deg);
}

.close-button:hover:before {
transform: rotate(45deg);
}

.gradient-overlay {
position: fixed;
right: 3px;
bottom: 3px;
top: auto;
left: auto;
max-width: 280px;
max-height: 158px;
width: 280px;
height: 158px;
opacity: .01;
background: #000;
z-index: 2;
display: none;
}

i.fa.fa-arrows-alt {
position: fixed;
right: 8px;
bottom: 5px;
top: auto;
left: auto;
color: #fff;
z-index: 2;
cursor: pointer;
display: none;
}

/* Font Awesome Toggle Adjustments  */
[data-toggle="collapse"] .fa:before {  
content: "\f056";
color: #c31f2e;
}

[data-toggle="collapse"].collapsed .fa:before {
content: "\f055";
color: #c31f2e;
}

.courseHeading {
background: #f4f4f4;
border: 1px #d9d9d9 solid;
}

.courseDetails {
padding: 10px 10px 0 !important;
border: 1px #d9d9d9 solid;
}

.courseSpacer {
 display: block;
height: 25px;
}

/* Progress Bar Adjustments  */

.progress {
height: 30px;
background-color: #777;
border-radius: 0;
text-indent: 10px;
margin-bottom: 10px;
}

.progress-bar {
text-align: left;
background-color: #c31f2e;
overflow: visible;
}

/* Course Menus */

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

.topicMenus {
padding: 10px;
margin: 0;
}

.modSpcaer {
border-top-color: #cccccc;
border-top-style: dashed;
border-top-width: 1px;
}

.mainCourse {
list-style: none;
background: #c31f2e;
padding: 10px 20px;
display: inline-block;
text-transform: uppercase;
font-size: 0.8em;
}

.mainCourse a {
color: #FFF;
}

.mainTopic {
list-style: none;
background: #FFF;
padding: 6px 10px;
display: inline-block;
text-transform: uppercase;
font-size: 0.8em;
}

.mainTopic.active {
border-bottom: 4px #fe6c48 solid;
}

/* Media Breakpoint Fixes and Adjustments  */

@media screen and (min-width: 0px) and (max-width: 767px){
body {
text-align: center;
}

p {
text-align: center;
}
}

.promoButton {
position: absolute;
height: 30px;
width: 50px;
margin-left: -50px;
margin-top: -30px;
}

ul.check {
list-style-image: url('https://dev.clubreadydjcourse.com/img/checkbox.jpg');
text-align: left;
}

td {
font-size: 0.6em;
}

@media screen and (min-width: 769px) {
.buyMain {
-ms-flex: 0 0 64.333333%;
flex: 0 0 64.333333%;
max-width: 64.333333%;    
}
.buySpacer {
-ms-flex: 0 0 2.333333%;
flex: 0 0 2.333333%;
max-width: 2.333333%;     
}

.orderForm {
border: 1px #ddd solid;
border-radius: 5px;
padding: 10px;
width: 48%;
float: left;
margin: 1%;
}
}

@media screen and (max-width: 768px) {
.buyMain {
-ms-flex: 0 0 100.00%;
flex: 0 0 100.00%;
max-width:  100.00%;    
}
.buySpacer {
-ms-flex: 0 0 100.00%;
flex: 0 0 100.00%;
max-width:  100.00%;        
}

.orderForm {
border: 1px #ddd solid;
border-radius: 5px;
padding: 10px;
width: 98%;
float: left;
margin: 1%;
}
}

#profilephoto {
font-size: 0.8em;
}

@media screen and (max-width: 990px) {
#nav {
background: #222;
padding: 20px;
width: 200px;
float: right;
text-align: left;
position: relative;
}
}

.fa, .fas {
font-weight: 900;
margin: 0 7px;
}

#pp-error {
width: 100%;
margin: 10px auto 5px;
text-align: center;
}

#pp-error .alert {
font-size: 0.9em;    
}

#pp-error:empty {
display: none;
}

.parallax-zoom-header {
/* The image used */
background-image: url("../img/zoom-header.jpg");

/* Set a specific height */
height: 1080px !important;
display: flex;
justify-content: center;
align-items: center; 

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

.parallax-vip-header {
/* The image used */
background-image: url("../img/vip-header.jpg");

/* Set a specific height */
height: 1080px !important;
display: flex;
justify-content: center;
align-items: center; 

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

.oval-top {
/* The image used */
background-image: url("../img/oval-top.png");


background-repeat: no-repeat;
background-size: cover;
}

.isDisabled {
color: #555;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}

ol ul li {
font-size: 1.4em;
margin-bottom: 5px;
}

ol ul ul li {
  font-size: 2.4em;
  margin-bottom: 5px;
  list-style: square;
}