/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of the site
 * and in the editor.
 */
* {
  box-sizing: border-box;
}

.rvp-h3 {
  color: var(--color-theme-primary) !important;
  font-size: 40px !important;
  color: white;
  font-weight: 600;
  font-family: var(--secondary-font-family);
}

.rvp-h2 {
  font-size: var(--font-size-h3) !important;
  padding-left: 0;
  color: white;
  font-weight: 500 !important;
  font-family: var(--secondary-font-family);
}

.rvp-h1 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  font-family: var(--secondary-font-family);
}

.rvp-primary-font {
  font-family: var(--secondary-font-family);
}

/* Style of page lines in side menu */
hr.rounded {
  border-top: 1px solid #2DA0CE;
  border-radius: 5px;
}

/* Small icons styling */
.dashicons {
  justify-content: center;
  align-items: center;
}

.dashicons-live-button {
  padding: 20px;
}

.rvp-side-menu .dashicons-twitch::before {
  font-size: 50px !important;
  width: 50px !important;
  height: 50px !important;
  color: white !important;
}

/* Drop shadow */
.rvp-shadow {
  box-shadow: 7px 5px 30px -10px black;
}

/* container for entire block */
.rvp-container-block {
  padding: 5rem !important;
  margin: 0%;
  background-color: #14284B;
  padding: 2.5%;
}

.rvp-topbar {
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
  display: block;
  width: 100%;
  height: auto;
  background-color: white;
}

/* Main grid that splits the main video and side menu */
.grid-esports {
  display: grid;
  gap: 50px;
  margin-top: 1%;
  grid-template-columns: 3fr 1fr;
}

/* Grid display to lay out elements in the button */
.grid-twitch-button {
  display: grid;
  grid-template-columns: 0.25fr 1fr 0.25fr;
  justify-content: center;
  align-items: center;
}

/* Grid that holds both video and text in side menu */
.grid-side-video {
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: 0.25s ease;
  border-radius: 5px;
  cursor: pointer;
}

.grid-side-video:not(.rvp-selected-video):hover,
.grid-side-video:not(.rvp-selected-video):focus {
  background-color: var(--color-theme-blue);
}

.grid-side-video .rvp-selected-video:focus {
  outline-color: var(--color-theme-blue-bright);
}

/* Styling for Twitch button in side menu */
button.twitch-button {
  padding-left: 5% !important;
  padding-right: 5% !important;
  margin-bottom: 5% !important;
  width: 100% !important;
  background-color: #9147ff !important;
  transition-duration: 0.25s;
  font-weight: 300;
  font-size: 40px !important;
  border: 2px none black;
  border-radius: 5px;
}

button.twitch-button:hover {
  background-color: #6441a5 !important;
}

.rvp-video-overlay {
  background: radial-gradient(white 50%, transparent 50%);
  color: grey;
  opacity: 75%;
  position: absolute;
  transition: 0.25s ease;
}

.grid-side-video:not(.rvp-selected-video):hover .rvp-video-overlay {
  color: var(--color-theme-blue);
  opacity: 100%;
}

.rvp-selected-video .rvp-video-overlay {
  color: var(--color-theme-primary);
  opacity: 100%;
}

/* Gif styling for live red dot in Twitch button */
.rvp-live-dot {
  height: 30px;
  width: 30px;
  margin-right: 5px;
}

/*Styling for the main video displayed on page*/
.rvp-main-video {
  float: left;
  grid-column-start: 1;
  grid-column-end: 2;
}

/* Styling for upper level container of side menu */
.rvp-side-menu {
  padding: 7.5%;
  padding-top: 0%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 77.5%;
  background-color: white;
  overflow: hidden;
  transition: 0.25s ease;
}

.rvp-side-menu-header {
  position: -webkit-sticky;
  position: sticky;
  top: -0.2%;
  padding: 6%;
  padding-left: 0;
  z-index: 2;
  background-color: white;
}

/* Lower-level styling for side menu */
.rvp-side-videos {
  position: relative;
  grid-column-start: 2;
  grid-column-end: 3;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 100%;
}

/* Styling of videos on side menu */
.rvp-video-style {
  border-radius: 5px;
  width: 100%;
  height: 100%;
}

/* Text that displays on the left side of videos in side menu */
.rvp-side-video-text {
  color: black;
  padding-right: 5%;
  display: flex;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.rvp-selected-video {
  background-color: var(--color-theme-primary);
}

.rvp-selected-video .rvp-side-video-text {
  color: var(--color-theme-white);
}

/* Container for the entire side video ( overlay, image, button ) */
.container-playbutton {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

/* Shows play button when hovered over */
.container-playbutton:hover .rvp-overlay {
  opacity: 1; /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}

/*YouTube Thumbnail on right menu*/
.container-playbutton img {
  width: 100%;
  height: auto;
}

/* Extra styling for the videos in the side menu to prevent inheriting padding */
.grid-side-video .container-playbutton {
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 2.5%;
  margin-top: 2.5%;
}

/* Styling for the main video on the page */
.container-iframe {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin-bottom: 2.5%;
  border-radius: 0.5rem;
}

/* Makes videos responsive */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* General Styling */
.white_text {
  color: var(--color-theme-white);
}

.hide {
  display: none;
}

/*******************/
/* Responsive Styling when viewport size is smaller than normal */
@media (max-width: 1042px) {
  /* CSS that should be displayed if width is equal to or less than 1042px goes here */
  .grid-side-video {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(auto-fit, 100%);
  }
}
@media (max-width: 730px) {
  .rvp-container-block {
    padding: 1rem !important;
  }
  /* CSS that should be displayed if width is equal to or less than 730px goes here */
  .grid-side-video {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-columns: repeat(auto-fit, 100%);
  }
  /* Styling for Twitch button in side menu */
  button.twitch-button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    background-color: #9147ff !important;
    transition-duration: 0.25s;
    font-weight: 600;
    font-size: 20px !important;
    border: 2px none black;
    border-radius: 5px;
  }
  .grid-esports {
    display: grid;
    gap: 50px;
    margin-top: 1%;
    grid-template-columns: 3fr;
  }
  .rvp-side-videos {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
  }
  .rvp-hr {
    margin: 0.5rem;
  }
  .rvp-side-menu-header {
    display: none;
  }
  .rvp-side-menu {
    padding: 1%;
    padding-bottom: 0;
  }
  .rvp-side-video-text {
    color: black;
    display: flex;
    font-weight: 500;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    font-size: 1.5rem;
    margin: 0;
  }
  .rvp-side-menu .dashicons-twitch::before {
    font-size: 25px !important;
    width: 50px !important;
    height: 50px !important;
    color: white !important;
  }
  .rvp-live-dot {
    height: auto;
    width: auto;
  }
}

/*# sourceMappingURL=style-index.css.map*/