@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@font-face {
    font-family: 'Poppins';
}

* {
    width: auto;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    font-family: 'Poppins';
    color: white;
    height: var(--pageHeight);
}

button {
    font-family: 'Poppins';
    width: 15vw;
    height: 3vw;
    background-color: black;
    border: none;
    border-radius: 0.2vw;
    color: white;
    padding: 0.5vw;
    font-size: 1.2vw;
    transition-duration: 0.2s;
    cursor: pointer;
}

button:hover {
    background-color: white;
    border: 1.5px solid #121212;
    color: black;
}

h1.combat-class-heading {
    padding: 1vw;
    font-size: 5vw;
    line-height: 5vw;
}
h1.combat-class-heading em {
    font-size: 9vw;
    font-style: normal;
    line-height: 9vw;
}

h2.combat-class-subheading {
    position: absolute;
    top: 24vw;
    padding-left: 1vw;
    font-size: 1vw;
    width: 45%;
}

h2.combat-class-subheading em {
    font-size: 1.3vw;
    font-style: normal;
}

h2.combat-class-description {
    font-size: 0.8vw;
    width: 45%;
    font-weight: 300;
    padding-left: 1vw;
}
p.course-content {
    font-size: 1vw;
    font-weight: 200;
    line-height: 1.7vw;
}

p.course-content em {
    font-size: 1.2vw;
    font-style: normal;
    text-decoration: underline;
}

.course-pricing {
    position: relative;
  	display: flex;
    font-size: 1.5vw;
    text-align: center;
    width: 100%;
    background-color: #ff3939;
    color: white;
    padding: 1vw;
}

.usertype-buttons {
  width: auto;
  margin: 0vw 1vw;
  padding: 0vw 2vw;
}

.courses-value {
    visibility: collapse;
    opacity: 0;
    font-size: 1000px;
}

.courses-banner {
    width: 100%;
    background-image: linear-gradient(to bottom right, #1d1d1d, black);
    background-size: cover;
    height: 26vw;
    overflow: hidden;
}

.courses-banner img {
    position: relative;
    top: -26vw;
    width: 100%;
    background-size: contain;
}

video.main-trailer {
    position: absolute;
    top: 5vw;
    right: 0vw;
    height: 26vw;
    opacity: 0%;
    visibility: hidden;
    transition-duration: 0.4s;
    z-index: 10;
}

video.main-trailer-visible {
    visibility: visible;
    opacity: 100%;
}

.main-trailer-play {
    position: absolute;
    top: 25vw;
    right: 6vw;
}

.main-trailer-play-hidden {
    visibility: hidden;
    opacity: 0%;
}

.free-trial-top {
  position: absolute;
  top: 25vw;
  right: 23vw;
  background-color: #ff3939;
}

.register-account {
    position: absolute;
    top: 25vw;
    right: 23vw;
}

.register-account-hidden {
    visibility: hidden;
    opacity: 0;
}

.video-close {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 6vw;
    right: 1vw;
    border-radius: 50%;
    height: 2.2vw;
    width: 2.2vw;
    background-image: url('/images/delete.png');
    background-color: black;
    background-size: cover;
    transition-duration: 0.1s;
    z-index: 11;
}

.video-close:hover {
    height: 2.4vw;
    width: 2.4vw;
}

.video-close-visible {
    opacity: 100%;
    visibility: visible;
}

.course-pricing-container {
  position: relative;
  height: 0vw;
  background-color: #121212;
  transition-duration: 1s;
  overflow: hidden;
}

.course-pricing-container-expanded {
  height: 10vw;
}

.course-pricing-options {
    position: absolute;
    font-size: 1.1vw;
  	margin: 1vw;
    width: 100%;
    color: white;
  	opacity: 0;
  	transition-duration: 0.4s;
}

.course-pricing-options em {
    font-size: 1vw;
    font-style: normal;
    text-decoration: line-through;
}

.pricing-option-description {
	position: absolute;
    top: 5vw;
    left: 1vw;
  	opacity: 0%;
  	transition-duration: 0.4s;
}

.teacher-pack-button {
    position: absolute;
  top: 1vw;
  right: 28vw;
      font-family: 'Poppins';
    width: 15vw;
    height: 3vw;
    background-color: black;
    border: none;
    border-radius: 0.2vw;
    color: white;
    padding: 0.5vw;
    font-size: 1.2vw;
    transition-duration: 0.2s;
    cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
  opacity: 0%;
}

.teacher-pack-button:hover {
    background-color: white;
    border: 1.5px solid #121212;
    color: black;
}

.course-pricing-selected {
  opacity: 100%;
}

.buy-courses {
  position: absolute;
  right: 1vw;
  background-color:#ff3939;
  margin: 1vw;
  z-index: 2;
  width: 12vw;
}

.free-trial {
  position: absolute;
  right: 14vw;
  margin: 1vw;
  z-index: 2;
  width: 12vw;
}

.courses {
    position: relative;
    width: 100%;
    background-image: linear-gradient(to bottom right, #1d1d1d, black);
    height: 23vw;
    overflow: hidden;
    -webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 0%, 95% 100%, 0 100%, 0 0);
    z-index: 1;
    transition-duration: 0.5s;
  	margin-bottom: 0.5vw;
}

.coursestrailerview {
    width: 95%;
}

.coursesexpanded {
    height: 500px;
}

.courses-trailer {
    position: absolute;
    right: 1vw;
    background-color: transparent;
    color: white;
    height: 23vw;
    overflow: hidden;
    z-index: 1;
}

.courses-sample {
    position: absolute;
    right: 1vw;
    background-color: transparent;
    color: white;
    height: 23vw;
    overflow: hidden;
    z-index: 1;
}

.trailer-buttons {
    position: absolute;
    top: 18vw;
    right: 5vw;
    z-index: 5;
}

.sample-buttons {
    position: absolute;
    top: 18vw;
    right: 25vw;
    z-index: 5;
}

.unarmed-course-banner-hidden {
    opacity: 0%;
}

h1.course-headings {
    position: absolute;
    margin-left: 2vw;
    padding: 0.5vw;
    color: white;
    float: left;
    letter-spacing: 2px;
    white-space: nowrap;
    font-size: 3vw;
    z-index: 1;
}

h1.course-info {
    font-size: 2vw;
}

h2.course-subheadings {
    position: absolute;
    top: 3.5vw;
    left: 2vw;
    padding: 0.5vw;
    color: white;
    float: left;
    letter-spacing: 2px;
    white-space: nowrap;
}

h2.course-info-subheading {
    font-size: 1.5vw;
}

p.course-descriptions {
    position: absolute;
    width: 40%;
    font-size: 1.2vw;
    top: 6.5vw;
    left: 2vw;
    padding: 0.5vw;
    color: white;
    float: left;
}

p.course-info {
    font-size: 1vw;
    top: 3vw;
    width: 22%;
}

p.course-info em {
    text-decoration: underline;
    font-style: normal;
}

button.expand {
    position: absolute;
    height: 50px;
    width: 200px;
    border: 0.2vw solid white;
    background-image: linear-gradient(to right, #1d1d1d, black);
    color: white;
}

button.close-trailer {
    visibility: hidden;
    opacity: 0%;
    position: absolute;
    top: 18vw;
    right: 5vw;
    z-index: 0;
}

button.close-sample {
	visibility: hidden;
    opacity: 0%;
    position: absolute;
    top: 17vw;
    right: 5vw;
    z-index: 0;
}

button.see-trailer-close {
    opacity: 0;
    visibility: hidden;
}


button.close-trailer-visible {
    visibility: visible;
    opacity: 100%;
    z-index: 5;
}

.course-subheading {
    position: absolute;
    left: 0vw;
    top: 3vw;
}

.course-images {
    position: absolute;
    top: 0vw;
    height: 100%;
    right: -5vw;
    overflow: hidden;
    z-index: 1;
}

.see-more-buttons {
    position: absolute;
    top: 19vw;
    left: 3vw;
    z-index: 5;
}

.unarmed-description {
    position: absolute;
    top: 6vw;
}

.broadsword-course-info {
        position: relative;
        margin-top: -23.5vw;
        background-color: black;
        visibility: hidden;
        opacity: 0%;
        z-index: 0;
}

.broadsword-back {
    position: absolute;
    top: 19vw;
    left: 3vw;
    z-index: 5;
}

.courses-video {
    opacity: 0%;
    height: 100%;
    z-index: 0;
    transition-duration: 0.4s;
}

.course-images-container {
    z-index: 1;
}

.quarterstaff-course-info {
  	position: relative;
  	margin-top: -23.5vw;
    background-color: black;
    visibility: hidden;
    opacity: 0%;
    z-index: 0;
}

.quarterstaff-back {
    position: absolute;
    top: 19vw;
    left: 3vw;
    z-index: 5;
}

.randd-course-info {
position: relative;
top: -23vw;
background-color: black;
visibility: hidden;
opacity: 0%;
z-index: 0;
}

.randd-back {
    position: absolute;
    top: 19vw;
    left: 3vw;
    z-index: 5;
}

.trailer-playing {
    opacity: 100%;
    visibility: visible;
    z-index: 5;
}

/*COURSE INFO*/

.unarmed-course-info {
  	position: relative;
    margin-top: -23.5vw;
    background-color: black;
    visibility: hidden;
    opacity: 0%;
    z-index: 0;
}

.course-info-visible {
    visibility: visible;
    opacity: 100%;
    z-index: 6;
}

.content-columns {
    position: absolute;
    top: 1vw;
    left: 25vw;
    width: 70%;
}

.column {
    width: 20%;
  float: left;
  padding-left: 10px;
}

.left, .right {
  width: 25%;
}

.middle {
  width: 50%;
}

.content-columns:after {
  content: "";
  display: table;
  clear: both;
}

.unarmed-back {
    position: absolute;
    top: 19vw;
    left: 3vw;
    z-index: 5;
}

/*Mobile version*/

@media only screen and (max-width: 800px) {
    
body {
    height: var(--mobilePageHeight)
}
  
  .course-pricing-container-expanded {
    height: 75vw;
  }
  
  .pricing-option-description {
    position: absolute;
    top: 19vw;
    left: 0vw;
    transition-duration: 0.4s;
    text-align: center;
    padding: 1vw;
    font-size: 4vw;
  }

    .course-pricing {
        position: relative;
        font-size: 3vw;
        text-align: center;
        width: 100%;
      	height: 20vw;
        background-color: #121212;
        color: white;
        padding: 1vw;
        margin-top: 10vw;
        border: 2px solid silver;
      	margin-bottom: 2vw;
    }

    .course-pricing em {
        font-size: 2.5vw;
        font-style: normal;
        text-decoration: line-through;
    }
  
  	.course-pricing-options {
      font-size: 4vw;
      text-align: center;
      padding: 1vw;
      line-height: 5vw;
  }
  
  	.course-pricing-options em {
      font-size: 3vw;
  }
  
  .course-pricing-text {
    width: 100%;
    position: absolute;
  }
  
  .usertype-buttons {
    width: 95vw;
    border-radius: 1vw;
    margin-top: 7vw;
  }
  
  .buy-courses {
    position: absolute;
    background-color: #ff3939;
    right: 2vw;
    top: 63vw;
    width: 30vw;
    border-radius: 1vw;
    font-size: 3vw;
  }
  
  .free-trial {
    position: absolute;
    right: 33vw;
    top: 63vw;
    width: 30vw;
    border-radius: 1vw;
    font-size: 3vw;
  }
  
    .teacher-pack-button {
    position: absolute;
    right: 66vw;
    top: 64vw;
    width: 32vw;
    height: 7vw;
    border-radius: 1vw;
    font-size: 3vw;
    line-height: 6vw;
  }
    .courses-value {
        visibility: collapse;
        opacity: 0;
        font-size: 1000px;
    }

    .courses-banner {
        width: 100%;
        background-image: linear-gradient(to bottom right, #1d1d1d, black);
        background-size: cover;
        height: 50vw;
        padding-top: 2vw;
        transition-duration: 0.4s;
    }

    .courses-banner img {
        position: absolute;
        top: 11vw;
        z-index: 1;
}
    video.main-trailer {
        position: absolute;
        top: 6vw;
        right: 0%;
        width: 100%;
        height: 60vw;
        opacity: 0%;
        visibility: hidden;
        transition-duration: 0.4s;
    }

    video.main-trailer-visible {
        visibility: visible;
        opacity: 100%;
        z-index: 10;
    }

    .main-trailer-play {
		position: absolute;
        right: 70vw;
      	top: 63vw;
      	z-index: 3;
    }
  
  .free-trial-top {
position: absolute;
right: 2vw;
top: 63vw;
z-index: 3;
height: 7vw;
  }

    .main-trailer-play-hidden {
        visibility: hidden;
        opacity: 0%;
    }

    .register-account {
        position: absolute;
        right: 35vw;
      	top: 63vw;
        font-size: 2vw;
    }

    .register-account-hidden {
        visibility: hidden;
        opacity: 0;
    }

    .buy-courses {
        position: absolute;
        background-color: red;
        right: 1vw;
      	top: 63vw;
    }

    .buy-courses-hidden {
        visibility: hidden;
        opacity: 0;
    }
  
  	.sample-teacher-pack {
        position: absolute;
        top: 63vw;
        right: 35vw;
        font-size: 2vw;
  }
    .video-close {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        top: 12vw;
        right: 5vw;
        border-radius: 50%;
        height: 8vw;
        width: 8vw;
        background-image: url('/images/delete.png');
        background-color: black;
        background-size: cover;
        transition-duration: 0.1s;
        z-index: 12;
    }

    .video-close:hover {
        height: 2.4vw;
        width: 2.4vw;
    }

    .video-close-visible {
        opacity: 100%;
        visibility: visible;
    }

    h1.combat-class-heading {
        padding: 1vw;
        font-size: 5vw;
        line-height: 5vw;
    }
    h1.combat-class-heading em {
        font-size: 9vw;
        font-style: normal;
        line-height: 9vw;
    }

    h2.combat-class-subheading {
        padding: 1.5vw;
        font-size: 2.5vw;
        background-color: black;
        text-align: center;
        width: 100%;
        top: 35vw;
        z-index: 2;
    }

    h2.combat-class-subheading em {
        font-size: 3vw;
        font-style: normal;
    }
    
    h2.combat-class-description {
    position: relative;
    padding: 1vw;
    font-size: 2.5vw;
    background-color: black;
    text-align: center;
    width: 100%;
    z-index: 2;
    top: 8vw;
}
  
.education-option {
  font-size: 2.5vw;
  }

.education-explainer-heading {
  margin-left: 2vw;
  }
  
.education-explainer {
  font-size: 3vw;
  width: 95%;
  margin-left: 2vw;
  }
  
.courses  {
    position: relative;
    width: 100%;
    height: 100vw;
    overflow: hidden;
    -webkit-clip-path: polygon(100% 100%;, 100% 0%, 0% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 0%, 100% 100%, 0% 100%, 0 0);
    background-image: linear-gradient(to bottom right, #1d1d1d, black);
    z-index: 0;
    transition-duration: 0.5s;
  	margin-bottom: 2vw;
}

.unarmed-course-info {
    margin-top: 0vw;
}
  
.broadsword-course-info {
    margin-top: 0vw;
}
  
.quarterstaff-course-info {
    margin-top: 0vw;
}
  
.randd-course-info {
    margin-top: 0vw;
}

.course-info {
    top: 0vw;
    bottom: 0vw;
    position: fixed;
    height: 300%;
    width: 100%;
    z-index: 10;
}

.content-columns {
    position: absolute;
    top: 45vw;
    left: 5vw;
    height: 100%;
    width: 100%;
}

.column {
  padding-top: 1vw;
  padding-bottom: 3vw;
    width: 30%;
    height: auto;
    text-align: center;
}


.content-columns:after {
  content: "";
  display: table;
  clear: both;
}

.unarmed-back {
    position: absolute;
    top: 1vw;
    left: 70vw;
    width: 20vw;
}
.broadsword-back {
    position: absolute;
    top: 1vw;
    left: 70vw;
    width: 20vw;
}
.quarterstaff-back {
    position: absolute;
    top: 1vw;
    left: 70vw;
    width: 20vw;
}
.randd-back {
    position: absolute;
    top: 1vw;
    left: 70vw;
    width: 20vw;
}

p.course-descriptions {
    font-size: 3vw;
    top: 73vw;
    text-align: center;
    left: 0vw;
    width: 100%;
}

p.course-info {
    text-align: center;
    top: 12vw;
    font-size: 3vw;
    line-height: 4vw;

}

p.course-content {
    font-size: 3vw;
    line-height: 4vw;
}

p.course-content em {
    font-size: 3vw;
}

.course-images {
    -webkit-clip-path: polygon(100% 100%;, 100% 0%, 0% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0%, 100% 10%, 100% 100%, 0% 100%, 0 10%);
    top: 7vw;
    left: -5vw;
    height: 65%;
    z-index: 0;
}

.courses-trailer {
    position: absolute;
    width: 100%;
    top: 6.5vw;
    height: 67vw;
    overflow: hidden;
    -webkit-clip-path: polygon(100% 100%;, 100% 0%, 0% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0%, 100% 10%, 100% 100%, 0% 100%, 0 10%);
    left: 0vw;
}
  
  .courses-sample {
    position: absolute;
    width: 100%;
    top: 6.5vw;
    height: 67vw;
    overflow: hidden;
    -webkit-clip-path: polygon(100% 100%;, 100% 0%, 0% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0%, 100% 10%, 100% 100%, 0% 100%, 0 10%);
    left: 0vw;
}

h1.course-headings {
    font-size: 5vw;
}

h2.course-subheadings {
    font-size: 3vw;
    top: 5.5vw;
}

h2.coming-soon {
    top: 56.5vw;
    right: 5vw;
}

.see-more-buttons {
    top: 60vw;
    width: 40%;
    height: 7vw;
    font-size: 3vw;
}

button {
    width: 30%;
    height: 7vw;
    font-size: 2.5vw;
}

button:hover {
    border: none;
}

.courses-video {
    opacity: 0%;
    margin-left: -8vw;
    z-index: 1;
}

.trailer-playing {
    opacity: 100%;
    z-index: 5;
}

.unarmed-see-more {
    top: 60vw;
}

.trailer-buttons {
    position: absolute;
    top: 60vw;
}

.sample-buttons {
  	position: absolute;
  	top: 50vw;
  	right: 5vw;
 }  
button.close-trailer {
    position: absolute;
    top: 60vw;
}
  
button.close-sample {
  	position: absolute;
  	top: 60vw;
  	right: 5vw;
 }
 

}