body {
  background-color:#cfd1d7;
}

/* Custom Cursor*/
html, body {
  cursor: none;
  margin: 0 0 0 0;
  overflow: hidden;
}
.custom-cursor {
	position: absolute;
	top: 0;
	left: 0;
  z-index: 2;
}
.site-wide {
	width: 160px;
	height: auto;

}
.biguy{
  width: 100px;
  height: auto;
  top:80px;
}
.site-wide .pointer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-25%, 2%);
	transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
}

/* Health and Saftey Screen*/
#fullScreen{
  margin: 0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  background-color: black;
  width: 100%;
  height: 100%;
  position:absolute;
  opacity:100%;
  -webkit-transition: opacity 1s ease-in-out;
  z-index: 2;
}
#fullScreen.fade{
  opacity: 0%;
}

#fullScreen img{
  position: absolute;
  width: 100%;
  height: auto;
  justify-content: center;
  
}


#healthAndSafety.fade{
  opacity: 1;
}
#pressA.fade{
  opacity: 0;
}
.slowBlink{
  animation: blink 1.5s infinite;
}
.slowerBlink{
  animation: blink 2s infinite;
}
@keyframes blink{
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

/* Static Tab Left */
.static-tab-space-left{
  background-color: blu;
  height: 27%;
  width: 20%;
  bottom:2px;
  position: absolute;
  z-index: 1;
}
.static-tab-left{
  background-color: re;
  background-image: url("../IMAGES/home/static-tab-final-2.png");
  background-position:left;
  background-repeat: no-repeat;
  background-size: contain ;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom:0px;
}
.static-tab-circle-left{
  background-color: re;
  background-image: url("../IMAGES/home/static-tab-circle-final-2.png");
  background-position:left;
  background-repeat: no-repeat;
  background-size: contain ;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom:0px;
  transition: all 0.1s;
  transform: scale(1)
}
#i_icon{
  background-color: blu;
  background-image: url("../IMAGES/home/i-icon.png");
  background-position:left;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 100%;
  position: left;
  bottom:0px;
}
#static-left-button{
  width:78%;
  height:75%;
  position: absolute;
  top: 5%;
  left: 0%;
  opacity: 0%;
}

/* Static Tab Right */
.static-tab-space-right{
  background-color: blu;
  height: 27%;
  width: 20%;
  bottom:2px;
  right:0px;
  position: absolute;
  z-index: 1;
}
.static-tab-right{
  background-color: re;
  background-image: url("../IMAGES/home/static-tab-right-final-2.png");
  background-position:right;
  background-repeat: no-repeat;
  background-size: contain ;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom:0px;
}
.static-tab-circle-right{
  background-color: gree;
  background-image: url("../IMAGES/home/static-tab-circle-right-final-2.png");
  background-position:right;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom:0px;
  transition: all 0.1s;
  transform: scale(1)
}
#contactIcon{
  background-color: re;
  background-size: 28%;
  background-image: url("../IMAGES/home/mail-icon.png");
  background-position:right;
  background-repeat: no-repeat;
  background-size: contain ;
  height: 100%;
  width: 100%;
  position: absolute;
  bottom:0px;
}
#static-right-button{
  width:78%;
  height:75%;
  position: absolute;
  top: 5%;
  right: 0%;
  opacity: 0%;
}

/* Page */
.page{
  position: absolute;
  width: 100%;
  height: 83%;
}
.master-slider {
  width:100%;
  height: 100%;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  top:9%;
  position:absolute;
}

.master-slider::-webkit-scrollbar {
  display: none;
}

.channel-page {
  scroll-snap-align: start;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 100%;
}

@media (min-width: 768px) {
  .channels{
    background-color: gree;
    position: absolut;
    top:9%;
    left:7.93%;
    width:84.15%;
    height:76.5%;
    column-width: 100vw; 
    column-gap: 0;
    box-sizing: border-box;
  }
}
.repeat-background{
  background-color: white;
  background-image: url("../IMAGES/home/stripes.png");
  background-repeat: repeat;
  background-position: center;
  margin: 0;
  width: 100%;
  height: 87%;
  background-size: 84.15% 17.5px;
  position: absolute;
}

/* Page Tab */
.tab{
  width: 100%;
  height: 20%;
  top:87%;
  left: 0%;
  position:absolute;
  background-color: urple;
}
.repeat-background-tab{
  background-color: white;
  background-image: url("../IMAGES/home/stripes.png");
  -webkit-mask-image: url(https://wiiportfolio.s3.us-east-2.amazonaws.com/tabMask.svg);
  mask-repeat: no-repeat;
  mask-position: top 0px left 50%;
  mask-size: 86%;
  background-repeat: repeat;
  background-position: top 5px left 50%;
  top:0%;
  left:0px;
  height:100%;
  width:100%;
  margin: 0;
  background-size: 84.15% 17.5px;
  position: absolute;
}
.repeat-background-tab-border{
  background-color: blu;
  background-image: url("../IMAGES/home/tab-border.png");
  background-repeat: repeat-x;
  background-size: 85.5%;
  background-position: top 0px left 50%;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  margin: 0;
  position: absolute;
}
.repeat-background-tab-shadow{
  background-color: lue;
  background-image: url("../IMAGES/home/tab-border-shadow.png");
  background-repeat: repeat-x;
  background-size: 85%;
  background-position: top 0px left 50%;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  margin: 0;
  position: absolute;
  z-index: 0;
}

/* Clock */
#clock{
  background-color: re;
  font-family: "clock-font";
  margin: 0px;
  top: -12px;
  left: 0.8%;
  text-align: center;
  position: absolute;
  width: 99%;
  height:0%;
  font-size: 2.2vw;
  line-height: 0px;
  letter-spacing: 10px;
  color: #9b9b9b;
  transform: scale(1.1,1);
}
#hours-digit-1{
  background-color: blu;
  text-align: center;
  position:absolute;
  width: 2.5%;
  height: auto;
  padding-top: 5px;
  left:43.1%;
  font-size: 92%;
}
#hours-digit-2{
  background-color: gree;
  text-align: center;
  position:absolute;
  width: 2.5%;
  height: 100px;
  padding-top: 5px;
  left:46.25%;
  font-size: 92%;
}
#colon{
  background-color: blac;
  text-align: center;
  position:absolute;
  width: 2.5%;
  top: -15px;
  padding-bottom: 0px;
  left:48.8%;
  font-size: 92%;
}
#minutes-digit-1{
  background-color: re;
  text-align: center;
  position:absolute;
  width: 2.5%;
  height: 100px;
  padding-top: 5px;
  left:50.85%;
  font-size: 92%;
}
#minutes-digit-2{
  background-color: yello;
  left:54%;
  position:absolute;
  text-align: center;
  width: 2.5%;
  height: 100px;
  padding-top: 5px;
  font-size: 92%;
}
#AMPM{
  background-color: blu;
  left:58%;
  position:absolute;
  text-align: center;
  width: 3.5%;
  height: 100px;
  padding-top: 36px;
  font-size: 92%;
  letter-spacing: -1px;
}

/* Date */
#date {
background-color: blu;
position: absolute;
height:20%;
left:35%;
bottom: 3%;
text-align: center;
width: 30%;
color: #9b9b9b;
letter-spacing: 3px;
}
#segment_date{
  font-size: 3.65vw;
}

/* Individual Channels*/
.channel{
  position: relative;
  height: 33.33333%;
  width:25%;
  float:left;
}

.spacer {
  width:7.93%;
}

#CH_1{
  background-color: blue;
  background-image: url("../IMAGES/home/about-me-channel-thumbnail.gif");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_2{
  background-color: yello;
  background-image: url("../IMAGES/home/filmmaking-channel-thumbnail.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_3{
  background-color: re;
  background-image: url("../IMAGES/home/photography-channel-thumbnail.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_4{
  background-color: blu;
  background-image: url("../IMAGES/home/broadcast-engineering-channel-thumbnail.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_5{
  background-color: pink;
  background-image: url("../IMAGES/home/electronics-channel-thumbnail.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_6{
  background-color: purple;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_7{
  background-color: cyan;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_8{
  background-color: brown;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_9{
  background-color: grey;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_10{
  background-color: orange;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_11{
  background-color: magenta;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_12{
  background-color: mediumpurple;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_13{
  background-color: blue;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_14{
  background-color: yello;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_15{
  background-color: re;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_16{
  background-color: blu;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_17{
  background-color: pink;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_18{
  background-color: purple;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_19{
  background-color: cyan;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_20{
  background-color: brown;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_21{
  background-color: grey;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_22{
  background-color: orange;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_23{
  background-color: magenta;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
#CH_24{
  background-color: mediumpurple;
  background-image: url("../IMAGES/home/static.gif");
  background-position: center;
  background-size: contain;
  width:100%;
  height: 100%;
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.colorBars{
  -webkit-mask-image: url("https://wiiportfolio.s3.us-east-2.amazonaws.com/channelMaskFinal.svg");
  mask-size: 0%;
  mask-repeat: no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.border{
  position: absolute;
  display:block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.blueBorder{
  position: absolute;
  display:block;
  width: 100%;
  height: 100%;
  opacity: 20%;
}
#ch1Button{
  position: absolute;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Reference Image */
.ref-image{
  /*background-size: cover;*/
  opacity: 50%;
  position:absolute;
  width: 100%
}
img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Fonts */
@font-face {
    font-family: 'wii-menu-font';
    src: url('../FONT/font-1.otf');
    
}
.date {
    font-family: "wii-menu-font";
}
@font-face {
    font-family: "clock-font";
    src: url("../FONT/font-2.ttf");
}
.clock{
    font-family: "clockFont";
}

.interactive-img {

  position: absolute;
  /* 1. Default State (The "Exit" animation) */
  opacity: 0.0;
  transform: scale(0.9);
  z-index: 2;

  /* 2. The Magic: Smoothly animate changes over 0.5 seconds */
  transition: opacity 0.5s ease, transform 0.5s ease;
  display:block;
  width: 100%;
  height: 100%;
}
.interactive-img:hover {
  /* 2. HOVER STATE (The "In" Animation) */
    opacity: 1;
    transform: scale(1);
    /* This transition runs when the hover state is ACTIVE */
    /* By setting transform duration to 0s, it happens instantly! */
    transition: opacity 0.2s ease, transform 0s;
}



@media (max-width: 768px) {
  .master-slider {
    
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    position: absolute;
    top:8%;
    left:0%;
    width:100%;
    height:76.5%;
    
  }
  
  .site-wide .pointer {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	width: 0%;
  	transform: translate(-25%, 2%);
  	transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
  }
  /* Static Tab Left */
  .static-tab-space-left{
    background-color: blu;
    height: 27%;
    width: 30%;
    bottom:-60px;
    position: absolute;
    z-index: 1;
  }
  /* Static Tab Right */
  .static-tab-space-right{
    background-color: blu;
    height: 27%;
    width: 30%;
    bottom:-60px;
    right:0px;
    position: absolute;
    z-index: 1;
  }
  /* Page */
  .page{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  /* Page Tab */
  .tab{
    width: 100%;
    height: 20%;
    top:87%;
    left: 0%;
    position:absolute;
    background-color: urple;
  }
  
  .channel-page {
  
  scroll-snap-align: start;
  display: flow-root;
  flex-wrap: wrap;
  flex: 0 0 100%;
  
  
}
  
  /* Individual Channels*/
  .channel{
  position: relative;
  height: 16.66666666%;
  width:50%;
  float:left;

}
  .channels{
    background-color: gree;
    position: absolut;
    top:9%;
    left:7.93%;
    width:80%;
    height:100%;
    column-width: 100vw; 
    column-gap: 0;
    box-sizing: border-box;
    float: left;
  }
  
  .spacer {
    width:10%;
    height: 30%;
    float: left;
  }
  
  /* Date and Time*/
  #date {
    background-color: blu;
    position: absolute;
    height:20%;
    left:33.33%;
    bottom: -10%;
    text-align: center;
    width: 35%;
    color: #9b9b9b;
    letter-spacing: 3px;
    }  
  #segment_date{
    font-size: 5.0vw;
  }
  #clock{
    background-color: re;
    font-family: "clock-font";
    margin: 0px;
    top: -12px;
    left: 0.8%;
    text-align: center;
    position: absolute;
    width: 99%;
    height:0%;
    font-size: 2.8vw;
    line-height: 0px;
    letter-spacing: 50px;
    color: #9b9b9b;
    transform: scale(1.1,1);
  }
  #hours-digit-1{
    background-color: blu;
    text-align: center;
    position:absolute;
    width: 2.5%;
    height: auto;
    padding-top: 5px;
    left:42.1%;
    font-size: 92%;
  }
  #hours-digit-2{
    background-color: gree;
    text-align: center;
    position:absolute;
    width: 2.5%;
    height: 100px;
    padding-top: 5px;
    left:45.75%;
    font-size: 92%;
  }
  #colon{
    background-color: blac;
    text-align: center;
    position:absolute;
    width: 2.5%;
    top: 0px;
    padding-bottom: 0px;
    left:48.8%;
    font-size: 92%;
  }
  #minutes-digit-1{
    background-color: re;
    text-align: center;
    position:absolute;
    width: 2.5%;
    height: 100px;
    padding-top: 5px;
    left:51.1%;
    font-size: 92%;
  }
  #minutes-digit-2{
    background-color: yello;
    left:55%;
    position:absolute;
    text-align: center;
    width: 2.5%;
    height: 100px;
    padding-top: 5px;
    font-size: 92%;
    
  }
  #AMPM{
    background-color: blu;
    left:59.5%;
    position:absolute;
    text-align: center;
    width: 3.5%;
    height: 150px;
    padding-top: 15px;
    font-size: 92%;
    letter-spacing: -1px;
  }

}