@charset "UTF-8";

h1{
	font-family:"Franx", sans-serif;
	color: #FCFCFC!important;
	font-size: 96pt!important;
}

p{
	font-family:"Kiyo", sans-serif;
	color: #000000;
}

.heading{
	font-family:"Franx", sans-serif;
	color: #000000!important;
	font-size: 38px;
}

.subhead{
	font-family:"Franx", sans-serif;
	color: #000000!important;
	font-size: 28pt !important;
}

.nav-link{
	text-transform: uppercase;
	font-family: "Franx", sans-serif;
	color: #000000;
	font-size: 14pt !important;
}

/* Flaoting Animation */
.floating {
            animation: float 4s ease-in-out infinite;
        }

.floating2 {
            animation: float 6s ease-in-out infinite;
        }

.floating3 {
            animation: float 5s ease-in-out infinite;
        }

@keyframes float {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }

            100% {
                transform: translateY(0);
            }
        }

.MD {
	transform: translate(10%, 300%);
    position: absolute;
}

.GD {
	transform: translate(-30%, 25%);
    position: absolute;
}

.ANI{
	position: absolute;
	transform: translate(10%, 225%);

}

/* Making the DIVS click-through */

.NDog{
	object-fit: cover;
	pointer-events: none;
	
}

.qtrupp{
	object-fit: cover;
	pointer-events: none;

}

.SwipeS{
	object-fit: cover;
	
}

.Febre{
	object-fit: cover;
	
}

.letterboxd{
	object-fit: cover;
	
}

.porchlyt{
	object-fit: cover;
	pointer-events: none;
	
}

.grog{
	object-fit: cover;
	
}
/* Video Size Calculation */
.grog video{
	width: calc(0.33 * 100vw);
	transform: translate(200%, -80%);
	border-radius: 15px;
}

.letterboxd img{
	width: calc(0.3 * 100vw);
    transform: translate(20%, 35%);
	border-radius: 15px;
}

.porchlyt img{
	width: calc(0.45 * 100vw);
	transform: translate(65%, -30%);
	border-radius: 15px;
}

.SwipeS img{
	width: calc(0.4 * 100vw);
	transform: translate(10%, 60%);
	border-radius: 15px;
}

.qtrupp img{
	width: calc(0.3 * 100vw);
	height: auto;
	transform: translate(160%, 50%);
	border-radius: 15px;
	pointer-events: auto;
}

.NDog img{
	width: calc(0.33 * 100vw);
	transform: translate(110%, -150%);
	border-radius: 15px;
}

.Febre img{
	width: calc(0.3 * 100vw);
    transform: translate(250%, -200%);
	border-radius: 15px;
}

.flipAni img{
	border-radius: 15px;
	transform: translate(20%, 10%);
    width: calc(40vw);
}

.parkAni img{
	border-radius: 15px;
	transform: translate(120%, 20%);
    width: calc(35vw);
}

.tron img{
	border-radius: 15px;
	transform: translate(400%, -105%);
    width: calc(20vw);
}

/* Segment Size Calculation */
.slide {
  width: 110vw;
  height: 100vh;
}


.wrapper {
  display: flex;
  flex-direction: row;
  width: 330vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}
.one {
  background: #000000;
}
.two {
  background: #000000;
}
.three {
  background: #000000;
}

.outer-wrapper {
	width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

::-webkit-scrollbar {
  display:none;
}

/* MOBILE SIZING CONTROLS */
@media (max-width: 500px){
	
	html{
		box-sizing: border-box;
	}
	
	h1{
	font-family:"Franx", sans-serif;
	color: #FCFCFC!important;
	font-size: 46pt!important;
	}
	
	.heading {
    font-family: "Franx", sans-serif;
    color: #000000 !important;
    font-size: 56pt !important;
	}
	
	.subhead {
    font-family: "Franx", sans-serif;
    color: #000000 !important;
    font-size: 35pt !important;
	}
	
	.nav-link{
	text-transform: uppercase;
	font-family: "Franx", sans-serif;
	color: #000000;
	font-size: 28pt !important;
	}
	
	.slide {
    width: 150vw;
    height: 100vh;
	}
	
	.outer-wrapper{
	
	height: 50vh!important;

	}

	.wrapper{

	width: calc(435vw + (100vh - 200vw))!important;

	}

	.MD {
    transform: translate(20%, 950%);
    position: absolute;
    color: #FCFCFC !important;
    font-size: 46pt;
	}
	
	.GD {
	transform: translate(15%, 30%);
    position: absolute;
    font-size: 46pt !important;
	}
	
	.ANI{
		transform: translate(45%, 480%);
		position: absolute;
    	font-size: 46pt !important;
	}
	
	/* Making the DIVS click-through mobile */
	
	.NDog{
		object-fit: cover;
		pointer-events: none;
	}

	.qtrupp{
		object-fit: cover;
		pointer-events: none;

	}

	.SwipeS{
		object-fit: cover;
		pointer-events: none;
	}

	.Febre{
		object-fit: cover;
		pointer-events: none;
	}

	.letterboxd{
		object-fit: cover;
		pointer-events: none;
	}

	.porchlyt{
		object-fit: cover;
		pointer-events: none;
	}

	.grog{
		object-fit: cover;
		pointer-events: none;
	}


	.grog video {
        width: calc(70vw);
        transform: translate(5%, 90%);
        border-radius: 15px;
    }
	
    .letterboxd img {
        width: calc(0.75 * 104vw);
        transform: translate(3%, 20%);
        border-radius: 15px;
		pointer-events: auto;
    }

	.porchlyt img {
        width: calc(85vw);
        transform: translate(25%, 40%);
        border-radius: 15px;
		pointer-events: auto;
    }
	
	.SwipeS img {
    width: calc(75vw);
    transform: translate(50%, 60%);
    border-radius: 15px;
		pointer-events: auto;
	}
	
	.NDog img {
    width: calc(0.7 * 100vw);
	height: auto;
    transform: translate(15%, -30%);
    border-radius: 15px;
		pointer-events: auto;
	}
	
	.Febre img {
    width: calc(0.6 * 100vw);
    transform: translate(85%, -15%);
    border-radius: 15px;
		pointer-events: auto;
	}
	
	.qtrupp img {
    width: calc(0.7 * 100vw);
    transform: translate(5%, 330%);
    border-radius: 15px;
		pointer-events: auto;
	}
	.flipAni img{
	border-radius: 15px;
	transform: translate(25%, 30%);
    width: calc(100vw);
	}

	.parkAni img{
		border-radius: 15px;
		transform: translate(0%, 155%);
		width: calc(72vw);
	}

	.tron img{
		border-radius: 15px;
		transform: translate(150%, -5%);
		width: calc(60vw);
	}
}

/* Custom Fonts */
@font-face {
  font-family: 'Franx'; /* Name you choose to use in your CSS */
  src: url('FranxurterTotallyMedium-gxwjp.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Kiyo'; /* Name you choose to use in your CSS */
  src: url('KiyosunaSans-L-1.0.1.otf');
  font-weight: normal;
  font-style: normal;
}