* {
  margin: 0;
  padding: 0; }

html {
  box-sizing: border-box;
  scroll-behavior: smooth; }
  html body {
    display: flex;
    font-family: "Nunito", sans-serif; }

nav {
  background-color: #EFF1F9;
  width: 5%;
  text-align: center;
  height: 100vh;
  border-right: 2px solid #AFAFB0; }

ul.navbar-list {
  display: flex;
  list-style: none;
  flex-direction: column; }
  ul.navbar-list li {
    margin-top: 50px; }
  ul.navbar-list li a {
    color: #000000; }
  ul.navbar-list li a i.active {
    color: #6F14AB; }

.hover {
  background-color: #CBCBD2;
  width: 25%;
  overflow: scroll;
  height: 100vh; }
  .hover::-webkit-scrollbar {
    display: none; }

p.section-header.slide {
  display: none; }

.section-content {
  width: 85%;
  margin: auto;
  padding-top: 30px; }

p.section-header {
  font-weight: 800;
  color: #6F14AB;
  font-size: 18px;
  margin-bottom: 20px; }

.flex {
  display: flex; }

p.small-text,
p.small {
  font-size: 12px;
  margin-bottom: 10px; }

.left-flex-obj {
  width: 50%;
  margin-right: 10px; }
  .left-flex-obj a {
    width: 100%; }
    .left-flex-obj a img {
      width: 100%; }

.right-flex-obj {
  width: 40%; }

p.title {
  margin-bottom: 15px; }

.details-container {
  width: 10%; }
  .details-container img {
    transform: rotate(90deg);
    cursor: pointer; }

.details {
  display: none; }
  .details a {
    font-size: 12px;
    text-decoration: none;
    color: #000;
    padding: 5px;
    background-color: #fff; }
    .details a:hover {
      background-color: #6F14AB;
      color: #fff; }

.show {
  display: block; }

.space {
  margin-bottom: 20px; }

.video-part {
  width: 70%;
  height: 100vh;
  overflow: scroll;
  background-color: #EFF1F9; }
  .video-part::-webkit-scrollbar {
    display: none; }

.video-container {
  width: 90%;
  margin: auto;
  padding: 30px 0; }

.header-icons {
  display: flex;
  justify-content: space-between;
  width: 83%;
  margin: auto; }
  .header-icons a {
    margin-right: 30px; }

iframe {
  display: block;
  margin: auto;
  margin-top: 30px;
  font-family: inherit;
  border-radius: 10px;
  border: transparent;
  height: 300px; }
  iframe:focus {
    outline: none; }

.footer-stuff {
  width: 83%;
  margin: auto; }

.part {
  font-size: 14px;
  margin: 30px 0; }

.like-share {
  display: flex; }
  .like-share p {
    display: block;
    font-weight: 700;
    margin-top: 10px; }

.ico-flex {
  text-align: center;
  margin-left: 20px; }

p.numbers {
  display: inline-block; }

.my-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .my-flex a {
    color: #000; }
  .my-flex p {
    font-size: 12px; }
  .my-flex i {
    margin: 0 5px; }

.ico-flex {
  height: 45px;
  width: 45px;
  display: grid;
  place-items: center; }

.whatsapp {
  border-radius: 50%;
  background-color: #25D366; }

.fa-whatsapp {
  color: #fff; }

.fa-facebook-official {
  color: #3b5998; }

.instagram {
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-radius: 10px; }

.fa-instagram {
  color: #fff; }

.fa-twitter {
  color: #00acee; }

@media (max-width: 768px) {
  body {
    flex-direction: column-reverse; }

  nav,
  .hover,
  .video-part {
    width: 100%; }

  ul.navbar-list {
    flex-direction: row;
    width: auto;
    margin: auto; }
    ul.navbar-list li {
      margin: 0;
      margin-left: 20px; }

  nav {
    height: 10vh;
    position: fixed;
    bottom: 0;
    z-index: 1;
    display: grid;
    place-items: center; }

  iframe {
    width: 100%;
    border-radius: 0;
    height: 400px;
    margin: 0; }

  .hover {
    height: 500px;
    margin-bottom: 50px; }

  .video-container {
    padding: 0; }

  .video-part {
    height: auto;
    overflow: none;
    background-color: #fff; }

  .part {
    margin: 10px 0; }

  .video-container {
    width: 100%; }

  p.section-header {
    display: none; }

  ul.navbar-list li a {
    margin: 10px; }

  p.section-header.slide {
    display: block; }

  .participants {
    width: 100%; }

  .header-icons {
    margin-top: 20px; }
    .header-icons a {
      margin-right: 0;
      margin-left: 10px; }

  .ico-flex {
    margin: 10px; }

  p.numbers {
    display: block; }

  .like-share p {
    display: none; } }
@media (max-width: 414px) {
  iframe {
    height: 200px; } }

/*# sourceMappingURL=app.css.map */