body {
      background-image: linear-gradient(rgb(255, 51, 0), rgb(255, 204, 0));
      font-family: Arial, Helvetica, sans-serif;
  }

  header {
      padding: 0.5vw 12vw;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-family: "Rubik", sans-serif;
  }

  h1 {
      font-size: 4.4vw;
      font-family: "Poppins", sans-serif;
      font-weight: 900;
      padding-bottom: 10px;
  }

  a {
      font-size: 1.4vw;
      font-family: "Rubik", sans-serif;
  }

  p {
      font-size: 1.2vw;
      font-family: "Poppins", sans-serif;
      font-weight: 300;
      line-height: 1.9vw;
  }

  h3 {
      font-size: 1.4vw;
      font-family: "Rubik", sans-serif;
      font-weight: 500;
  }

  #underscore {
      font-weight: bold;
      font-size: 1.5vw;
      padding-top: 5px;
  }

  h4 {
      font-family: "Rubik", sans-serif;
      font-weight: bolder;
      font-size: 1.5vw;
      margin-bottom: 1vw;

  }

  .vidsec1 h4 {
      color: rgb(177, 41, 41)
  }


  header a {
      font-size: 1.2vw;
  }

  header img {
      width: 57%;
  }

  .logo {
      flex: 1;
  }

  iframe {
      width: 100%;
  }

  main {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0px 12vw;
      box-sizing: border-box;


  }



  .vids {
      background-image: linear-gradient(rgb(6, 6, 6), rgb(37, 37, 37));
      color: white;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
  }

  .blog {
      background-image: linear-gradient(rgb(255, 251, 249), rgb(229, 235, 236));
      display: flex;
      align-items: center;

  }

  .socials {
      background-image: linear-gradient(rgb(255, 51, 0), rgb(255, 136, 0));
  }

  .mainbox1 {
      flex: 1;
      justify-content: space-evenly;
  }

  .imgcards {
      display: inline-block;
  }

  .mainbox1 img {
      max-width: 120%;
  }

  .mainbox2 {
      flex: 2;
      margin-left: 90px;

  }

  .vidsec1 {
      flex: 2;
  }

  .vidsec1 p {
      margin-right: 10vw;
  }

  .vidsec2 {
      flex: 1;
  }

  .mainicons {
      justify-items: end;
  }

  .mainicons a {
      color: white;
      text-decoration: none;
      font-weight: bolder;
  }

  .mainicons img {
      width: 110%;
  }

  .imgcards {
      width: 20%;
      padding: 10px;
      margin-top: 10px;
      text-align: center;
  }


  .imgcards:hover {
      scale: 120%;
      transition-duration: 500ms;
  }

  .imgcards img:hover {
      transition-duration: 30s;
      transform: rotate(360deg);

  }

  .blogmain1 {
      flex: 2;

  }

  .blogmain2 {
      flex: 2;
      text-align: center;
  }

  .socials {
      text-align: center;
  }

  .socials img {
      width: 9%;

  }

  .vids,
  .main-portfolio,
  .blog,
  .rtvvideosmain,
  .demoreel,
  .blogmain,
  .blogentry-main,
  .subscribe,
  .abtme-portfolio,
  .video-latest,
  .socials {
      padding: 70px 12vw;
      box-sizing: border-box;
  }

  nav .navbutton:last-child a {
      background-color: black;
      color: white;
  }

  nav .navbutton:last-child a:hover {
      color: orangered;
  }

  .navbutton {
      text-align: center;
      display: inline-block;
      position: relative;
      transition-duration: 500ms;
      text-align: center;
      border-radius: 10px;
  }

  .navbutton a {
      text-decoration: none;
      color: black;
      padding: 0.6vw 1vw;
      font-weight: bold;
      border-radius: 10px;
  }

  .navbutton a:hover {
      text-decoration: none;
      color: white;
      background-color: black;
      transition-duration: 500ms;
      z-index: 2;
  }

  .navbutton a:active {
      text-decoration: none;
      color: orangered;
      background-color: white;
      transition-duration: 100ms;
      z-index: 2;
  }

  .dropdown-box .navbutton {
      padding-top: 2vw;
      border-radius: 10px;
  }

  .dropdown-box .navbutton a {
      padding: 0.9vw;
      color: white;
      font-size: 0.90vw;
      font-weight: 400;

  }

  .dropdown-box .navbutton a:hover {
      color: orangered;
      font-weight: 700;
      background-color: rgb(23, 23, 23);

  }


  .dropdown-box {
      display: none;
      position: absolute;
      transition-duration: 1s;
      width: 110%;
      transform: translateX(-5.4%);
      padding-bottom: 1.2vw;
      border-radius: 10px;

  }

  .navbutton:hover .dropdown-box {
      transition: all 0.2s ease-in-out;
      display: block;
      z-index: 1;
      background-color: black;
      transition: all 0.2s ease-in-out;


  }

  footer {
      font-size: 1.1vw;
      color: white;
      background-color: rgb(29, 29, 29);
      display: flex;
      justify-content: space-around;
      text-align: center;
      box-sizing: border-box;
      padding: 30px 5vw;
  }

  footer a {
      color: white;
  }

  footer a:hover {
      color: orangered;
      scale: 300%;
      transition: all 0.2s ease-in-out;


  }

  footer i {
      padding-left: 2vw;
      font-size: 1.3vw;
  }

  footer i:hover {
      scale: 120%;
      transition: all 0.2s ease-in-out;

  }

  .footer1 {
      flex: 1;
  }

  .footer2 {
      flex: 1;
  }

  .pgbutton {
      margin: 3vw 0px;
      box-sizing: border-box;

  }

  .pgbutton a {
      border: 14px;
      padding: 1vw;
      border: solid #000;
      border-width: 2px 2px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: bold;
      font-size: 1.1vw;
  }

  .pgbutton i {
      padding: 0px 1vw;
  }

  .vids .pgbutton a {
      border: solid #fff;
      color: white;
  }

  .vids .pgbutton a:hover {
      background-color: white;
      color: orangered;
      scale: 200%;
      transition: all 0.3s ease-in-out;
      border: 5px;
      font-size: 1.2vw;
      font-weight: bolder;
  }

  .blogmain2 .pgbutton a {
      border: solid #000000;
      color: rgb(0, 0, 0);
      scale:90%;
  }

  .blogmain2 .pgbutton a:hover {
      background-color: rgb(217, 217, 217);
      color: #fff;
      transition: all 0.3s ease-in-out;
      scale:95%;
      
  }

  .blogmain1 .pgbutton a {
      border: solid orangered;
      color: orangered;
  }

  .blogmain1 .pgbutton a:hover {
      background-color: orangered;
      color: rgb(0, 0, 0);
      scale: 200%;
      transition: all 0.3s ease-in-out;
      border: 0px;
      font-size: 1.2vw;
      font-weight: bolder;
  }

  .socials img:hover {
      scale: 110%;
      transition: all 0.3s ease-in-out;
  }

  i {
      font-size: 1vw;
      padding-left: 5px;
  }




  /* REALITY TV PAGE */
  /* REALITY TV PAGE */
  /* REALITY TV PAGE */
  /* REALITY TV PAGE */

  .header2 {
      padding: 0.6vw 12vw;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      font-family: "Rubik", sans-serif;
      background-color: #000;
  }

  .header2 a {
      font-size: 1.2vw;
  }

  .header2 img {
      width: 57%;
  }

  .blacknav .navbutton-black:last-child a {
      background-color: rgb(255, 255, 255);
      color: rgb(0, 0, 0);
  }

  .blacknav .navbutton-black:last-child a:hover {
      color: orangered;
  }

  .navbutton-black {
      text-align: center;
      display: inline-block;
      position: relative;
      transition-duration: 500ms;
      text-align: center;
      border-radius: 10px;
  }

  .navbutton-black a {
      text-decoration: none;
      color: white;
      padding: 0.6vw 1vw;
      font-weight: bold;
      border-radius: 10px;
  }

  .navbutton-black a:hover {
      text-decoration: none;
      color: orangered;
      background-color: rgb(255, 255, 255);
      transition-duration: 500ms;
      z-index: 2;
  }

  .dropdown-box-black .navbutton-black {
      padding-top: 1.5vw;
      border-radius: 10px;
  }

  .dropdown-box-black .navbutton-black a {
      padding: 0.8vw 1vw;
      ;
      color: rgb(0, 0, 0);
      font-size: 0.90vw;
      font-weight: 400;


  }

  .dropdown-box-black .navbutton-black a:hover {
      color: orangered;
      font-weight: 700;
      background-color: rgb(239, 242, 245);

  }


  .dropdown-box-black {
      display: none;
      position: absolute;
      transition-duration: 1s;
      width: 110%;
      transform: translateX(-5.4%);
      padding-bottom: 1.3vw;
      border-radius: 10px;


  }

  .navbutton-black:hover .dropdown-box-black {
      transition: all 0.2s ease-in-out;
      display: block;
      z-index: 1;
      background-color: rgb(255, 255, 255);
      transition: all 0.2s ease-in-out;
      color: black;


  }

  .realitymain {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 2vw 10vw;
      box-sizing: border-box;
      background-image: linear-gradient(rgb(6, 6, 6), rgb(37, 37, 37));
      color: #fff;

  }

  .realitymain h1 {
      color: rgb(19, 93, 230);
  }


  .rtvsec1 {
      flex: 1;
      justify-content: space-evenly;
  }


  .rtvsec1 img {
      max-width: 185%;
      margin-bottom: -2.2vw;
  }

  .rtvsec2 {
      flex: 2;
      margin-left: 16vw;

  }


  .mainicons-rtv {
      justify-items: space-around;
  }

  .mainicons-rtv a {
      color: white;
      text-decoration: none;
      font-weight: bolder;
  }


  .mainicons-rtv img {
      width: 80%;
      padding-bottom: 1vw;
  }

  .rtv-glossary {
      background-image: url(../img/gloss-coverbg.png);
      color: white;
      display: flex;
      box-sizing: border-box;
      padding: 5vw 10vw;
      justify-content: space-between;
  }

  .rtv-glossary img {
      width: 70%;
      transform: rotate(-8deg);
      filter: drop-shadow(15px 15px 4px #440a0a89);
      padding-left: 6vw;

  }

  .rtvgloss-sec1 {
      flex: 1;
  }

  .rtvgloss-sec2 {
      flex: 1;
      padding-top: 2vw;
  }

  .rtvgloss-sec2 .pgbutton a {
      border-color: white;
      color: white;
      font-size: 1.5vw;
      font-family: 'Poppins';
  }

  .rtvgloss-sec2 .pgbutton a:hover {
      border: none;
      color: rgb(116, 3, 3);
      background-color: white;
      font-size: 1.5vw;
      font-family: 'Poppins';
      transition: all 0.5s ease-in-out;
  }

  /* ABOUT ME PAGE */
  /* ABOUT ME PAGE */
  /* ABOUT ME PAGE */
  /* ABOUT ME PAGE */
  /* ABOUT ME PAGE */
  /* ABOUT ME PAGE */

  .mainbox2abt img {
      max-width: 160%;
  }

  .mainbox1abt {
      flex: 2;
      justify-content: space-evenly;
  }

  .mainbox1abt p {
      color: white;
  }

  .mainbox1abt h4 {
      color: rgb(0, 0, 0);
      font-family: 'Poppins';
      margin-top: 2vw;
  }


  .mainbox2abt {
      flex: 1;
      padding-right: 4vw;

  }

  .mainbox1abt img {
      width: 10%;
      padding-right: 2vw;

  }

  .mainbox1abt img:hover {
      width: 15%;
      transition: all 0.5s ease-in-out;
  }

  .abtme-portfolio {
      background-image: linear-gradient(rgb(255, 251, 249), rgb(229, 235, 236));
      display: flex;
      align-items: center;

  }

  .portfolio-abtme1 {
      flex: 1;

  }


  .portfolio-abtme1 h1 {
      color: orangered;

  }

  .portfolio-abtme2 {
      flex: 1;
      text-align: center;
      height: 20vw;
      margin-left: 7vw;
      filter: drop-shadow(15px 15px 7px #440a0a43);
      background-image: url(../img/josju-portfolio\ cover.png);
      background-position: center;
      background-size: cover;
  }


  .portfolio-abtme1 .pgbutton a {
      border: solid rgb(0, 0, 0);
      color: rgb(50, 48, 47);
  }

  .portfolio-abtme1 .pgbutton a:hover {
      background-color: black;
      color: orangered;
      scale: 200%;
      transition: all 0.3s ease-in-out;
      border: 0px;
      font-size: 1.2vw;
      font-weight: bolder;
  }

  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */
  /* PORTFOLIO PAGE */

  .main-portfolio {
      text-align: center;
      color: rgb(223, 46, 79);
      background-color: black;
  }

  .cardsect {
      align-items: center;
      display: flex;
      justify-content: space-evenly;
      margin-top: 2vw;
      color: black;


  }

  .portfoliocards {
      width: 30%;
      height: 17vw;
      border-radius: 30px;
      align-content: flex-end;
      box-sizing: border-box;
      border: solid rgb(255, 255, 255);
      border-width: 7px;
  }

  .cardsect a {
      text-decoration: none;
      color: black;
  }

  .portfoliocards:hover {
      width: 33%;
      height: 19vw;
      transition: all 0.3s ease-in-out;
      border: solid rgb(242, 85, 7);
      border-width: 6px;
      border-radius: 10px;


  }

  .portcard1,
  .portcard2,
  .portcard3 {
      background-color: #ffffff;
      border-radius: 0px 0px 10px 10px;
      padding: 0.7vw;
  }


  .portcard1:hover,
  .portcard2:hover,
  .portcard3:hover {
      background-color: rgb(242, 85, 7);
      border-radius: 0px 0px 5px 5px;
      padding: 0.7vw;
      transition: all 0.3s ease-in-out;
  }

  .main-portfolio .portfoliocards:first-child {
      background-image: url(../img/josju-portfolio\ cover.png);
      background-position: center;
      background-size: cover;
  }

  .main-portfolio .portfoliocards:nth-child(2) {
      background-image: url(../img/josju-artportfolio.png);
      background-position: center;
      background-size: cover;
  }

  .main-portfolio .portfoliocards:nth-child(3) {
      background-image: url(../img/artworkpage.PNG);
      background-position: bottom;
      background-size: 140%;
  }

  .demoreel {
      display: flex;
      align-items: center;
      background-image: linear-gradient(white, rgb(215, 212, 212));
  }

  .demosect1 {
      flex: 1;
  }

  .demosect2 {
      flex: 1;
  }

  /* VIDEOS PAGE */
  /* VIDEOS PAGE */
  /* VIDEOS PAGE */
  /* VIDEOS PAGE */
  /* VIDEOS PAGE */
  /* VIDEOS PAGE */
  /* VIDEOS PAGE */

  .videos-cat {
      text-align: center;
      background-color: #000;
      box-sizing: border-box;
      padding: 0vw 14vw;
  }


  .videos-cat a {
      text-decoration: none;
  }



  .videos-cat a h4 {
      color: white;
      padding-top: 0.4vw;
      font-size: 1.1vw;
  }

  .videos-cat a:hover h4 {
      color: orangered;
      transition: all 0.3s ease-in-out;
  }


  .videos-cat h2,
  .videosection h2 {
      font-size: 1.5vw;
      font-weight: bolder;
      font-family: 'Poppins';
      padding: 1.5vw 0vw;
      color: red;
  }

  .vidicons-sec {
      display: flex;
      text-align: center;
      box-sizing: border-box;
      padding: 0vw 15vw;
  }

  .vid-icons {
      width: 100%;
  }

  .vid-icons img {
      width: 60%;
  }

  .vid-icons:hover img {
      width: 70%;
      transition: all 0.3s ease-in-out;
  }

  .videowheel {
      display: flex;
      text-align: center;
      box-sizing: border-box;
      padding: 2vw 9vw;
      margin-left: -2vw;


  }

  .videowheel h2 {
      margin: 4.5vw -1vw;
      line-height: 1.2vw;
      padding: 1vw 2vw;
      color: white;
      font-size: 1.1vw;
      font-weight: 500;
      font-family: 'Poppins';
  }

  .videowheel h4 {
      background-color: orangered;
      color: white;
      padding: 0.5vw;
      font-size: 1.3vw;
      border-radius: 12px;
      margin: 0.5vw 7vw;
  }

  .vidthumbs img {
      width: 95%;
      border-radius: 1vw;
  }

  .vidthumbs:hover img {
      width: 96%;
      transition: all 0.3s ease-in-out;
  }

  .vidthumbs:hover h3 {
      color: yellow;
      transition: all 0.6s ease-in-out;
  }

  .videosection {
      background-color: #000000;
      text-align: center;
  }

  .vidthumbs a {
      text-decoration: none;
      color: white;
      font-family: 'Poppins';
  }

  .vidthumbs a h3 {
      font-family: 'Poppins';
      font-weight: bold;
      font-size: 1vw;
      padding: 0.4vw 1.3vw;
      line-height: 1.5vw;
      letter-spacing: 0.01vw;
  }

  .vidthumbs a h5 {
      font-family: 'Rubik', sans-serif;
      font-weight: 600;
      font-size: 1vw;
      letter-spacing: 0.02vw;
      padding: 0.7vw;
      margin: 0vw 1.2vw;
      border-radius: 1.4vw 1.4vw 0vw 0vw;


  }

  .vidthumb1 h5 {
      background-color: rgb(32, 32, 30);
      ;
      color: yellow;
  }

  .vidthumb2 h5 {
      background-color: rgb(32, 32, 30);
      ;
      color: rgb(36, 82, 222);
  }

  .vidthumb3 h5 {
      background-color: rgb(32, 32, 30);
      ;
      color: rgb(36, 82, 222);
  }

  .vidthumb4 h5 {
      background-color: rgb(32, 32, 30);
      ;
      color: rgb(36, 82, 222);
  }

  .vidthumb6 h5 {
    background-color: rgb(32, 32, 30);
    ;
    color: rgb(205, 60, 47);
}

  .video-latest {
      display: flex;
      background-color: rgb(32, 30, 30);
      justify-items: space-around;
      color: #fff;
  }

  .vidlatest-sect1 {
      flex: 1;
      text-align: center;
  }

  .vidlatest-sect2 {
      flex: 1;
      align-content: center;
      padding: 0vw 3vw;
  }

  .vidlatest-sect2 h4 {
      color: yellow;
  }

  .subscribe {
      background-image: linear-gradient(rgb(220, 11, 11), rgb(232, 47, 47));
      display: flex;
      align-items: center;
      text-align: center;
      color: white;
  }

  .sub-info {
      flex: 1;
      text-align: left;
  }

  .sub-photo {
      flex: 1;
  }

  .sub-photo img {
      width: 70%;
      border-radius: 999px;
      filter: drop-shadow(10px 7px 4px rgba(57, 28, 28, 0.207));

  }

  .sub-info .pgbutton a {
      background-color: black;
      color: white;
  }

  .sub-info .pgbutton a:hover {
      background-color: rgb(255, 255, 255);
      color: rgb(234, 14, 14);
      transition: all 0.3s ease-in-out;
      border: none;
      filter: drop-shadow(10px 7px 4px rgba(57, 28, 28, 0.207));
      font-size: 1.2vw;
  }

  .rtvvideosmain {
      background-color: black;
      text-align: center;
      padding: 2vw;
      color: white;
  }

  .rtvvideosmain h1 {
      color: rgb(54, 54, 214);
      font-size: 4vw;
  }

  .rtvvideos-sect1 p {
      box-sizing: border-box;
      padding: 1vw;
  }


  .rtvvideos-sect2 {

      color: white;
      box-sizing: border-box;
      padding: 4vw 12vw;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      background-color: rgb(40, 40, 169);
      ;
  }

  .rtvvideos-sect2 a {
      color: white;
      text-decoration: none;
  }

  .rtvvideos-sect2 a h3 {

      font-family: 'Rubik';
      font-weight: 600;
      padding: 0.7vw 1.6vw;
      font-size: 0.9vw;
      line-height: 1.3vw;

  }

  .rtvvideos-sect2 a p {
      background-color: #000;
      color: orangered;
      font-family: 'Poppins';
      font-weight: 600;
      font-size: 0.9vw;
      border-radius: 8px;
      margin: -0.1vw 6vw 0.5vw 6vw;
      padding: 0.05vw;

  }



  .rtvthumbs {
      width: 20%
  }

  .rtvthumbs img {
      width: 85%;
      border-radius: 10px;
      filter: drop-shadow(10px 7px 4px rgba(57, 28, 28, 0.207));


  }


  .rtvthumbs h6 {
      margin-bottom: 1.3vw;
      margin-top: -0.5vw;


  }

  .rtvthumbs:hover img {
      width: 90%;
      transition: all 0.3s ease-in-out;
      filter: drop-shadow(10px 7px 4px rgba(12, 6, 6, 0.207));
  }

  .rtvthumbs:hover h3 {
      color: yellow;
      transition: all 0.3s ease-in-out;
  }

  .rtvvideos-sect2 h6 {
      font-size: 0.8vw;
  }

  .infobanner {
      font-family: 'Poppins';
      box-sizing: border-box;
      padding: 1vw 12vw;
      font-size: 1.2vw;
      font-weight: 900;
      background-color: rgb(43, 39, 39);


  }

  .infobanner h2 {
      color: rgb(255, 255, 255);
  }

  .ss-main-bb {
      background-color: rgb(22, 21, 21);
  }

  .ss-header-bb {
      display: flex;
      box-sizing: border-box;
      padding: 2vw 12vw;
      align-items: center;
      color: white;
  }

  .ss-image-bb {
      flex: 1;
  }

  .ss-image-bb img {
      width: 80%;
      filter: drop-shadow(10px 7px 4px rgba(0, 0, 0, 0.207));
  }



  .ss-description-bb {
      flex: 2;
  }


  .ss-description-bb h2 {
      font-size: 2vw;
      font-family: 'Poppins';
      font-weight: 900;
      padding-bottom: 0.6vw;
  }


  .ss-description-bb h4 {
      font-size: 1vw;
      font-family: 'Poppins';
      font-weight: 900;
      color: rgb(49, 49, 183);
      padding-bottom: 1vw;
  }

  .ss-description-bb p {
      font-size: 1vw;
      font-family: 'Rubik';
      font-weight: 300;
      color: rgb(251, 252, 236);
      padding-bottom: 0.6vw;
      margin-top: -1vw;
  }


  .ss-content-all {
      box-sizing: border-box;
      padding: 2vw 2vw;
      align-items: center;
      text-align: center;
      background-color: rgb(30, 30, 28);

  }

  .ss-content-all img {
      width: 100%;
      filter: drop-shadow(10px 7px 4px rgba(12, 6, 6, 0.207));

  }

  .ss-icon-bb {
      flex: 0.2;
  }

  .ss-icon-bb a {
      text-decoration: none;
      color: white;
      width: 120%;
      padding: 1vw;

  }

  .ss-icon-bb a:hover {
      color: orangered;
      transition: all 0.3s ease-in-out;


  }

  .ss-icon-bb i {
      font-size: 2vw;

  }


  .ss-icon-bb a:hover i {
      transform: translatex(-0.9rem);
      transition: all 0.3s ease-in-out;

  }

  .ss-info {
      display: flex;
      text-align: center;
      box-sizing: border-box;
      padding: 0vw 1vw;
      align-items: flex-start;
      color: white;
      font-weight: 600;
  }

  .ss-info h2 {
      padding: 1vw;
  }

  .ss-info img {
      width: 90%;
      background-color: rgb(59, 57, 56);
      padding: 1vw;
      border-radius: 10px;
  }


  .ss-alliances {
      flex: 1;
  }

  .ss-facts {
      flex: 1.1;
  }

  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */
  /* BLOG PAGE */

  .blogmain {
      background-color: rgb(238, 237, 234);
      text-align: center;
      box-sizing: border-box;
      align-items: center;
      padding: 2.5vw 25vw;


  }

  .blogmain h1 {
      padding-bottom: 1.5vw;
      font-size: 3vw;
  }


  .blogcards {
      display: flex;
      background-color: white;
      text-align: left;
      align-items: center;
      border-radius: 4px;
      margin-bottom: 0.5vw;
  }

  .blogimg img {
      width: 100%;
      padding: 0.4vw;
      border-radius: 12px;

  }

  .blogicon img {
      width: 80%;
      opacity: 35%;

  }

  .blogimg {
      flex: 1;
  }

  .blogicon {
      flex: 1;
  }

  .blogtext {
      flex: 6;
      padding: 0.9vw 0vw 0.9vw 2vw;
  }

  .blogmain a {
      text-decoration: none;
  }

  .blogmain a:hover h2 {
      color: orangered;
      transition: all 0.3s ease-in-out;

  }

  .blogcards:hover {
      filter: drop-shadow(10px 7px 4px rgba(12, 6, 6, 0.088));
      transition: all 0.3s ease-in-out;
  }

  .blogmain a:hover img {
      opacity: 100%;
      transition: all 0.3s ease-in-out;

  }

  .blogtext h2 {
      font-size: 1.2vw;
      font-family: 'Poppins';
      font-weight: 800;
      color: black;
      padding-bottom: 0.4vw;

  }

  .blogtext p {
      font-size: 0.9vw;
      font-family: 'Rubik';
      font-weight: 400;
      color: rgb(105, 103, 103);
      line-height: 1.2vw;
      padding-right: 1vw;
  }


  /* TVVideos*/

  .tvvideos {
      background-color: black;
      text-align: center;
      padding: 2vw;
      color: white;
      text-align: center;
  }

  .tvvideos h1 {
      color: rgb(57, 57, 142);
      font-size: 4vw;
      text-align: center;

  }

  .tvvideos-sect1 p {
      box-sizing: border-box;
      padding: 1vw;
  }


  .tvvideos-sect2 {

      color: white;
      box-sizing: border-box;
      padding: 6vw 12vw;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      background-color: rgb(43, 43, 121);
  }

  .tvvideos-sect2 h2 {
      font-size: 2vw;
      font-weight: 800;
      font-family: 'Rubik';
      text-align: center;
  }

  .tvvideos-sect2 a {
      color: white;
      text-decoration: none;
  }

  .tvvideos-sect2 a h3 {

      font-family: 'Rubik';
      font-weight: 600;
      padding: 0.7vw 1.6vw;
      font-size: 0.9vw;
      line-height: 1.3vw;

  }

  .tvvideos-sect2 a p {
      background-color: #000;
      color: orangered;
      font-family: 'Poppins';
      font-weight: 600;
      font-size: 0.9vw;
      border-radius: 8px;
      margin: -0.1vw 6vw 0.5vw 6vw;
      padding: 0.05vw;

  }

  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/
  /* Internet Videos*/

  .internetvideos {
      background-color: black;
      text-align: center;
      padding: 2vw;
      color: white;
      text-align: center;
  }

  .internetvideos h1 {
      color: rgb(255, 230, 39);
      font-size: 4vw;
      text-align: center;

  }

  .internetvideos-sect1 p {
      box-sizing: border-box;
      padding: 1vw;
  }


  .internetvideos-sect2 {

      color: white;
      box-sizing: border-box;
      padding: 5vw 12vw;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      background-color: rgb(255, 230, 39);
  }

  .internetvideos-sect2 h2 {
      font-size: 2vw;
      font-weight: 800;
      font-family: 'Rubik';
      text-align: center;
  }

  .internetvideos-sect2 a {
      color: white;
      text-decoration: none;
  }

  .internetvideos-sect2 a h3 {

      font-family: 'Rubik';
      font-weight: 600;
      padding: 0.7vw 1.6vw;
      font-size: 0.9vw;
      line-height: 1.3vw;
      color: black;

  }

  .internetvideos-sect2 a:hover h3 {
      color: rgb(223, 24, 27);

  }

  .internetvideos-sect2 a p {
      background-color: #000;
      color: orangered;
      font-family: 'Poppins';
      font-weight: 600;
      font-size: 0.9vw;
      border-radius: 8px;
      margin: -0.1vw 6vw 0.5vw 6vw;
      padding: 0.05vw;

  }

  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/
  /* GAMES Videos*/

  .gamesvideos {
      background-color: black;
      text-align: center;
      padding: 2vw;
      color: white;
      text-align: center;
  }

  .gamesvideos h1 {
      color: rgb(10, 210, 20);
      font-size: 4vw;
      text-align: center;

  }

  .gamesvideos-sect1 p {
      box-sizing: border-box;
      padding: 1vw;
  }


  .gamesvideos-sect2 {

      color: white;
      box-sizing: border-box;
      padding: 5vw 12vw;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      background-color: rgb(10, 210, 20);
  }

  .gamesvideos-sect2 h2 {
      font-size: 2vw;
      font-weight: 800;
      font-family: 'Rubik';
      text-align: center;
  }

  .gamesvideos-sect2 a {
      color: white;
      text-decoration: none;
  }

  .gamesvideos-sect2 a h3 {

      font-family: 'Rubik';
      font-weight: 600;
      padding: 0.7vw 1.6vw;
      font-size: 0.9vw;
      line-height: 1.3vw;
      color: rgb(255, 255, 255);

  }

  .gamesvideos-sect2 a:hover h3 {
      color: rgb(235, 255, 14);

  }

  .gamesvideos-sect2 a p {
      background-color: #000;
      color: orangered;
      font-family: 'Poppins';
      font-weight: 600;
      font-size: 0.9vw;
      border-radius: 8px;
      margin: -0.1vw 6vw 0.5vw 6vw;
      padding: 0.05vw;

  }

  /* MUSIC Videos*/
  /* MUSIC Videos*/
  /* MUSIC Videos*/
  .musicvideos {
      background-color: black;
      text-align: center;
      padding: 2vw;
      color: white;
      text-align: center;
  }

  .musicvideos h1 {
      color: rgb(113, 0, 205);
      font-size: 4vw;
      text-align: center;

  }

  .musicvideos-sect1 p {
      box-sizing: border-box;
      padding: 1vw;
  }


  .musicvideos-sect2 {

      color: white;
      box-sizing: border-box;
      padding: 5vw 12vw;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      background-color: rgb(113, 0, 205);
  }

  .musicvideos-sect2 h2 {
      font-size: 2vw;
      font-weight: 800;
      font-family: 'Rubik';
      text-align: center;
  }

  .musicvideos-sect2 a {
      color: white;
      text-decoration: none;
  }

  .musicvideos-sect2 a h3 {

      font-family: 'Rubik';
      font-weight: 600;
      padding: 0.7vw 1.6vw;
      font-size: 0.9vw;
      line-height: 1.3vw;
      color: rgb(255, 255, 255);

  }

  .musicvideos-sect2 a:hover h3 {
      color: rgb(235, 255, 14);

  }

  .musicvideos-sect2 a p {
      background-color: #000;
      color: orangered;
      font-family: 'Poppins';
      font-weight: 600;
      font-size: 0.9vw;
      border-radius: 8px;
      margin: -0.1vw 6vw 0.5vw 6vw;
      padding: 0.05vw;

  }

  /* GLOSSARY Videos*/
  /* GLOSSARY Videos*/
  /* GLOSSARY Videos*/
  .glossaryvideos {
      background-color: black;
      text-align: center;
      padding: 2vw;
      color: white;
      text-align: center;
  }

  .glossaryvideos h1 {
      color: rgb(149, 14, 9);
      font-size: 4vw;
      text-align: center;

  }

  .glossaryvideos-sect1 p {
      box-sizing: border-box;
      padding: 1vw;
  }


  .glossaryvideos-sect2 {

      color: white;
      box-sizing: border-box;
      padding: 5vw 12vw;
      display: flex;
      text-align: center;
      flex-wrap: wrap;
      background-color: rgb(123, 7, 3);
      background-image: url(../img/gloss-coverbg.png);
  }

  .glossaryvideos-sect2 h2 {
      font-size: 2vw;
      font-weight: 800;
      font-family: 'Rubik';
      text-align: center;
  }

  .glossaryvideos-sect2 a {
      color: white;
      text-decoration: none;
  }

  .glossaryvideos-sect2 a h3 {

      font-family: 'Rubik';
      font-weight: 600;
      padding: 0.7vw 1.6vw;
      font-size: 0.9vw;
      line-height: 1.3vw;
      color: rgb(255, 255, 255);

  }

  .glossaryvideos-sect2 a:hover h3 {
      color: rgb(235, 255, 14);

  }

  .glossaryvideos-sect2 a p {
      background-color: #000;
      color: orangered;
      font-family: 'Poppins';
      font-weight: 600;
      font-size: 0.9vw;
      border-radius: 8px;
      margin: -0.1vw 6vw 0.5vw 6vw;
      padding: 0.05vw;

  }

  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/
  /* BLOG ENTRIES*/


  .blogentry-main {
      text-align: center;
      background-image: linear-gradient(white, rgb(220, 216, 216));
  }


  .wrapper {
      height: 200px;
      display: flex;
      padding-top: 2vw;
      padding-bottom: 1vw;
      justify-content:center;

  }

  .box {
      border-radius: 12px;
  }

  .box img {
      width: 80%;
      height: 90%;
      border-radius: 12px;
  }



  .box2 img {
      object-fit: cover;
      object-position: 15% 15%;
  }

  .blogentry-title {
      font-family: 'Poppins';
      font-weight: 900;
      font-size: 2vw;
      padding-bottom: 2vw;
  }

  .blogentry-description p {
      font-family: 'Rubik';
      font-weight: 400;
      font-size: 1vw;
      line-height: 1.7vw;
      color: #2b2a2a;
  }

  .blogentry-description li p {
      font-family: 'Rubik';
      font-weight: 450;
      font-size: 1vw;
      line-height: 1.7vw;
      color: rgb(1, 1, 1);
      text-align: left;

  }

  li p {
      margin: 1vw;
      padding: 0.3vw;
      border-radius: 10px;

  }

  .blogbutton {
      padding: 0.4vw 0.8vw;
      border: solid 2px black;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 700;
      color: black;
      font-size: 1.3vw;
  }

  .blogbutton:hover {
      color: white;
      background-color: black;
      transition: all 0.3s ease-in-out;
  }

  .blogbutton i {

      margin-right: 0.6vw;


  }

  .imgleft {
      float: left;
      text-align: center;
      align-items: left;
      width: 13%;
      padding-right: 4vw;
  }

  .imgleft h6 {
      font-size: 1vw;
      color: #7f7e7e;
      padding-left: 1.6vw;
      line-height: 1.3vw;

  }


  .imgleft img {
      width: 100%;
      border-radius: 30px;
      padding: 0.5vw 1vw;

  }

  .imgright {
      float: right;
      text-align: center;
      width: 15%;
      padding-left: 3vw;
  }

  .imgright h6 {
      font-size: 1vw;
      color: #7f7e7e;
      padding-left: 1.6vw;
      line-height: 1.3vw;

  }


  .imgright img {
      width: 100%;
      border-radius: 30px;
      padding: 0.5vw 1vw;

  }

  .blogentry-description h2 {
      font-size: 2vw;
      font-weight: 700;
      font-family: 'Poppins';
      padding: 2vw;
  }

  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */
  /*ARTWORK PAGE */

  .artworkpage {
      background-color: black;
      text-align: center;
      padding: 2vw;
      color: rgb(255, 255, 255);
      text-align: center;
  }

  .artworkpage h1 {
      color: rgb(231, 249, 255);
      font-size: 4vw;
      text-align: center;

  }

  .artworkpage-sect1 p {
      box-sizing: border-box;
      padding: 1vw;
  }


  .artworkpage-sect2 {

      color: white;
      box-sizing: border-box;
      padding: 3vw 12vw;
      text-align: center;
            background-color: rgb(231, 249, 255);
  }

  .artworkpage-sect2 h2 {
      font-size: 2vw;
      font-weight: 800;
      font-family: 'Rubik';
      text-align: center;
  }

  .artworkpage-sect2 a {
      color: rgb(32, 31, 31);
      text-decoration: none;
  }

  .artworkpage-sect2 a h3 {

      font-family: 'Rubik';
      font-weight: 600;
      padding: 0.7vw 0vw;
      font-size: 0.9vw;
      line-height: 1.3vw;
      color: rgb(43, 43, 43);

  }

  .artworkpage-sect2 a:hover h3 {
      color: rgb(255, 100, 16);
      transition: all 0.3s ease-in-out;

  }

  .artworkpage-sect2 a p {
      background-color: #000;
      color: orangered;
      font-family: 'Poppins';
      font-weight: 600;
      font-size: 0.9vw;
      border-radius: 8px;
      margin: -0.1vw 6vw 0.5vw 6vw;
      padding: 0.05vw;

  }

  .gallery{
    display:flex;
    gap:1.6vw;
    margin-top:-1vw;
  }

 
  .newwrapper {
    display: flex;
    padding-top: 1vw;
    padding-bottom: 1vw;
  
    

}

.newbox {
    border-radius: 12px;
    
}

.newbox img {
    width: 11vw;
    height: 11vw;
    border-radius: 12px;
    filter: drop-shadow(6px 6px 2px #440a0a30);
}



.newbox2 img {
    object-fit: cover;

}

.newbox h6{
    font-size:0.7vw;
    font-family:'Rubik';
    font-style:italic;
    margin-top:-0.5vw;
    color:#595959;
}

.img-magnifier-glass {
    position: absolute;
    border: none;
    border-radius: none;
    cursor: none;
    border-radius:10px;
    /*Set the size of the magnifier glass:*/
    min-width: 29vw;
    min-height: 29vw;
  }

  .img-magnifier-container {
    position: relative;
    text-align:center;
  }

  .img-magnifier-container img{
    width:100%;
    box-sizing: border-box;
    padding:1vw 2.2vw;
    align-self:center;

  }

  .img-magnifier-container h2 {
   color:white;
   font-family:'Poppins';
   font-weight:600;
   padding:1vw;
   
  }

  .vids-individuals{
    text-align:center;
    font-size:2.5vw;
    color:white;
    font-family:'Poppins';
    font-weight:800;
    box-sizing: border-box;
    padding:2vw 12vw;
    background-image: linear-gradient(black,rgb(38, 37, 37));
  }

  .vidsindividual-sect1 h2{
    padding-bottom:2vw;
    padding-top:2vw;

  }

  .vidsindividual-sect1{
    padding:0vw 18vw;
  }

  .vidsindividual-sect1 p{
    padding-top:2vw;
    font-size:0.9vw;
  }

  .videodescription{
    margin-top:2vw;
    background-color:white;
    color:black;
    border-radius:10px;
    text-align:justify;
    margin:2vw -15vw;

  }

  .videodescription h3{
    padding-top:1vw;
    text-align:center;
  }

  .videodescription p{
    font-family:'Rubik';
    font-size:0.9vw;
    line-height:1.2vw;
    padding:2vw;
  }

  .vidsindividual-sect1 .blogbutton{
    background-color:white;
    color:black;
    margin-bottom:2vw;
  }

  .vidsindividual-sect1 .blogbutton:hover{
    background-color:orangered;
    

  }