@font-face {
    font-family: 'FabrigaGrotesk-Black';
    src: url('work/assets/fonts/FabrigaGrotesk-Black.eot'); /* IE9 Compat Modes */
    src: url('work/assets/fonts/FabrigaGrotesk-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('work/assets/fonts/FabrigaGrotesk-Black.woff2') format('woff2'), /* Modern Browsers */
        url('work/assets/fonts/FabrigaGrotesk-Black.woff') format('woff'), /* Modern Browsers */
        url('work/assets/fonts/FabrigaGrotesk-Black.ttf') format('truetype'), /* Safari, Android, iOS */
        url('work/assets/fonts/FabrigaGrotesk-Black.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'FabrigaGrotesk-Regular';
    src: url('work/assets/fonts/FabrigaGrotesk-Regular.eot'); /* IE9 Compat Modes */
    src: url('work/assets/fonts/FabrigaGrotesk-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('work/assets/fonts/FabrigaGrotesk-Regular.woff2') format('woff2'), /* Modern Browsers */
        url('work/assets/fonts/FabrigaGrotesk-Regular.woff') format('woff'), /* Modern Browsers */
        url('work/assets/fonts/FabrigaGrotesk-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('work/assets/fonts/FabrigaGrotesk-Regular.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FabrigaGrotesk-Bold';
    src: url('work/assets/fonts/FabrigaGrotesk-Bold.eot'); /* IE9 Compat Modes */
    src: url('work/assets/fonts/FabrigaGrotesk-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('work/assets/fonts/FabrigaGrotesk-Bold.woff2') format('woff2'), /* Modern Browsers */
        url('work/assets/fonts/FabrigaGrotesk-Bold.woff') format('woff'), /* Modern Browsers */
        url('work/assets/fonts/FabrigaGrotesk-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
        url('work/assets/fonts/FabrigaGrotesk-Bold.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}


body, html {
    height: 100%;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

#videoplayer {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}


#rawvideo {
  object-fit: cover;

}

.content-r {
    position: absolute;
    right: 0px;
    top:50%;
    text-align: right;
    /* Safari */
	-webkit-transform: rotate(90deg);
	/* Firefox */
	-moz-transform: rotate(90deg);
	/* IE */
	-ms-transform: rotate(90deg);
	/* Opera */
	-o-transform: rotate(90deg);
}

h1 {
  font-family: FabrigaGrotesk-Bold;
    text-rendering: optimizeLegibility;
font-size: 15px;
color: white;
    }

h2{
  font-family: FabrigaGrotesk-Bold;
    text-rendering: optimizeLegibility;
font-size: 15px;
color: red;
    }


.content-b {
    position: absolute;
    right: 45%;
    bottom:0px;
    text-align: center;
}


.content-t {
    position: absolute;
    right: 45%;
    top:75px;
    text-align: center;
}



.content-l {
    position: absolute;
    left: 0px;
    top:50%;
    text-align: right;
    /* Safari */
	-webkit-transform: rotate(-90deg);
	/* Firefox */
	-moz-transform: rotate(-90deg);
	/* IE */
	-ms-transform: rotate(-90deg);
	/* Opera */
	-o-transform: rotate(-90deg);
}


                     #warped {
                     	position: absolute; display: block; color: white; 
                     	right: 50%;
                     	top: 0;

                       }

                     #warped>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;
                     -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; -o-transform-origin:50%
                     100%; -ms-transform-origin:50% 100%; transform-origin:50% 100%; }

                     #warped span{font-family: FabrigaGrotesk-Bold;
    text-rendering: optimizeLegibility; font-size:8.2px;font-weight:regular;font-style:normal;
                     line-height:0.65; white-space:pre; overflow:visible; padding:0px;}

                     #warped .w0 {-moz-transform: rotate(3.62rad);-webkit-transform: rotate(3.62rad);-o-transform:
                     rotate(3.62rad);-ms-transform: rotate(3.62rad); transform: rotate(3.62rad);
                     width: 5px; height: 5px; left: 268.44px; top: 259.36px;}

                     #warped .w1 {-moz-transform: rotate(3.81rad);-webkit-transform: rotate(3.81rad);-o-transform:
                     rotate(3.81rad);-ms-transform: rotate(3.81rad); transform: rotate(3.81rad);
                     width: 4px; height: 5px; left: 260.98px; top: 254.21px;}

                     #warped .w2 {-moz-transform: rotate(3.99rad);-webkit-transform: rotate(3.99rad);-o-transform:
                     rotate(3.99rad);-ms-transform: rotate(3.99rad); transform: rotate(3.99rad);
                     width: 4px; height: 5px; left: 254.46px; top: 248.02px;}

                     #warped .w3 {-moz-transform: rotate(4.15rad);-webkit-transform: rotate(4.15rad);-o-transform:
                     rotate(4.15rad);-ms-transform: rotate(4.15rad); transform: rotate(4.15rad);
                     width: 2px; height: 5px; left: 250.67px; top: 241.62px;}

                     #warped .w4 {-moz-transform: rotate(4.32rad);-webkit-transform: rotate(4.32rad);-o-transform:
                     rotate(4.32rad);-ms-transform: rotate(4.32rad); transform: rotate(4.32rad);
                     width: 5px; height: 5px; left: 245.28px; top: 234.08px;}

                     #warped .w5 {-moz-transform: rotate(4.52rad);-webkit-transform: rotate(4.52rad);-o-transform:
                     rotate(4.52rad);-ms-transform: rotate(4.52rad); transform: rotate(4.52rad);
                     width: 5px; height: 5px; left: 242.41px; top: 224.52px;}

                     #warped .w6 {-moz-transform: rotate(4.71rad);-webkit-transform: rotate(4.71rad);-o-transform:
                     rotate(4.71rad);-ms-transform: rotate(4.71rad); transform: rotate(4.71rad);
                     width: 4px; height: 5px; left: 242px; top: 215.07px;}

                     #warped .w7 {-moz-transform: rotate(4.89rad);-webkit-transform: rotate(4.89rad);-o-transform:
                     rotate(4.89rad);-ms-transform: rotate(4.89rad); transform: rotate(4.89rad);
                     width: 4px; height: 5px; left: 242.79px; top: 206.12px;}

                     #warped .w8 {-moz-transform: rotate(5.05rad);-webkit-transform: rotate(5.05rad);-o-transform:
                     rotate(5.05rad);-ms-transform: rotate(5.05rad); transform: rotate(5.05rad);
                     width: 2px; height: 5px; left: 245.83px; top: 198.4px;}

                     #warped .w9 {-moz-transform: rotate(5.22rad);-webkit-transform: rotate(5.22rad);-o-transform:
                     rotate(5.22rad);-ms-transform: rotate(5.22rad); transform: rotate(5.22rad);
                     width: 5px; height: 5px; left: 247.82px; top: 190.66px;}

                     #warped .w10 {-moz-transform: rotate(5.44rad);-webkit-transform: rotate(5.44rad);-o-transform:
                     rotate(5.44rad);-ms-transform: rotate(5.44rad); transform: rotate(5.44rad);
                     width: 7px; height: 5px; left: 253.18px; top: 181.71px;}

                     #warped .w11 {-moz-transform: rotate(5.65rad);-webkit-transform: rotate(5.65rad);-o-transform:
                     rotate(5.65rad);-ms-transform: rotate(5.65rad); transform: rotate(5.65rad);
                     width: 4px; height: 5px; left: 262.44px; top: 174.66px;}

                     #warped .w12 {-moz-transform: rotate(5.84rad);-webkit-transform: rotate(5.84rad);-o-transform:
                     rotate(5.84rad);-ms-transform: rotate(5.84rad); transform: rotate(5.84rad);
                     width: 5px; height: 5px; left: 270.09px; top: 169.81px;}

                     #warped .w13 {-moz-transform: rotate(6.01rad);-webkit-transform: rotate(6.01rad);-o-transform:
                     rotate(6.01rad);-ms-transform: rotate(6.01rad); transform: rotate(6.01rad);
                     width: 2px; height: 5px; left: 279.54px; top: 166.84px;}

                     #warped .w14 {-moz-transform: rotate(6.18rad);-webkit-transform: rotate(6.18rad);-o-transform:
                     rotate(6.18rad);-ms-transform: rotate(6.18rad); transform: rotate(6.18rad);
                     width: 5px; height: 5px; left: 286.38px; top: 165.26px;}

                     #warped .w15 {-moz-transform: rotate(6.38rad);-webkit-transform: rotate(6.38rad);-o-transform:
                     rotate(6.38rad);-ms-transform: rotate(6.38rad); transform: rotate(6.38rad);
                     width: 5px; height: 5px; left: 296.37px; top: 165.23px;}

                     #warped .w16 {-moz-transform: rotate(6.59rad);-webkit-transform: rotate(6.59rad);-o-transform:
                     rotate(6.59rad);-ms-transform: rotate(6.59rad); transform: rotate(6.59rad);
                     width: 6px; height: 5px; left: 306.13px; top: 167.34px;}

                     #warped .w17 {-moz-transform: rotate(6.77rad);-webkit-transform: rotate(6.77rad);-o-transform:
                     rotate(6.77rad);-ms-transform: rotate(6.77rad); transform: rotate(6.77rad);
                     width: 2px; height: 5px; left: 316.42px; top: 170.82px;}

                     #warped .w18 {-moz-transform: rotate(6.94rad);-webkit-transform: rotate(6.94rad);-o-transform:
                     rotate(6.94rad);-ms-transform: rotate(6.94rad); transform: rotate(6.94rad);
                     width: 5px; height: 5px; left: 322.06px; top: 175.42px;}

                     #warped .w19 {-moz-transform: rotate(7.14rad);-webkit-transform: rotate(7.14rad);-o-transform:
                     rotate(7.14rad);-ms-transform: rotate(7.14rad); transform: rotate(7.14rad);
                     width: 5px; height: 5px; left: 329.31px; top: 182.28px;}

                     #warped .w20 {-moz-transform: rotate(7.34rad);-webkit-transform: rotate(7.34rad);-o-transform:
                     rotate(7.34rad);-ms-transform: rotate(7.34rad); transform: rotate(7.34rad);
                     width: 5px; height: 5px; left: 335.05px; top: 190.45px;}

                     #warped .w21 {-moz-transform: rotate(7.54rad);-webkit-transform: rotate(7.54rad);-o-transform:
                     rotate(7.54rad);-ms-transform: rotate(7.54rad); transform: rotate(7.54rad);
                     width: 5px; height: 5px; left: 339.06px; top: 199.59px;}

                     #warped .w22 {-moz-transform: rotate(7.75rad);-webkit-transform: rotate(7.75rad);-o-transform:
                     rotate(7.75rad);-ms-transform: rotate(7.75rad); transform: rotate(7.75rad);
                     width: 6px; height: 5px; left: 340.73px; top: 209.84px;}

                     #warped .w23 {-moz-transform: rotate(7.93rad);-webkit-transform: rotate(7.93rad);-o-transform:
                     rotate(7.93rad);-ms-transform: rotate(7.93rad); transform: rotate(7.93rad);
                     width: 2px; height: 5px; left: 342.85px; top: 218.83px;}

                     #warped .w24 {-moz-transform: rotate(8.1rad);-webkit-transform: rotate(8.1rad);-o-transform:
                     rotate(8.1rad);-ms-transform: rotate(8.1rad); transform: rotate(8.1rad);
                     width: 5px; height: 5px; left: 339.98px; top: 227.21px;}

                     #warped .w25 {-moz-transform: rotate(8.27rad);-webkit-transform: rotate(8.27rad);-o-transform:
                     rotate(8.27rad);-ms-transform: rotate(8.27rad); transform: rotate(8.27rad);
                     width: 2px; height: 5px; left: 338.71px; top: 235.24px;}

                     #warped .w26 {-moz-transform: rotate(8.44rad);-webkit-transform: rotate(8.44rad);-o-transform:
                     rotate(8.44rad);-ms-transform: rotate(8.44rad); transform: rotate(8.44rad);
                     width: 5px; height: 5px; left: 333.13px; top: 242.68px;}

                     #warped .w27 {-moz-transform: rotate(8.63rad);-webkit-transform: rotate(8.63rad);-o-transform:
                     rotate(8.63rad);-ms-transform: rotate(8.63rad); transform: rotate(8.63rad);
                     width: 4px; height: 5px; left: 327.65px; top: 250.05px;}

                     #warped .w28 {-moz-transform: rotate(8.82rad);-webkit-transform: rotate(8.82rad);-o-transform:
                     rotate(8.82rad);-ms-transform: rotate(8.82rad); transform: rotate(8.82rad);
                     width: 5px; height: 5px; left: 319.89px; top: 256.15px;}

                     #warped .w29 {-moz-transform: rotate(8.99rad);-webkit-transform: rotate(8.99rad);-o-transform:
                     rotate(8.99rad);-ms-transform: rotate(8.99rad); transform: rotate(8.99rad);
                     width: 2px; height: 5px; left: 314.02px; top: 260.36px;}

                     #warped .w30 {-moz-transform: rotate(9.16rad);-webkit-transform: rotate(9.16rad);-o-transform:
                     rotate(9.16rad);-ms-transform: rotate(9.16rad); transform: rotate(9.16rad);
                     width: 5px; height: 5px; left: 304.54px; top: 263.26px;}

                     #warped .w31 {-moz-transform: rotate(9.37rad);-webkit-transform: rotate(9.37rad);-o-transform:
                     rotate(9.37rad);-ms-transform: rotate(9.37rad); transform: rotate(9.37rad);
                     width: 6px; height: 5px; left: 293.69px; top: 264.92px;}

                     #warped .w32 {-moz-transform: rotate(9.55rad);-webkit-transform: rotate(9.55rad);-o-transform:
                     rotate(9.55rad);-ms-transform: rotate(9.55rad); transform: rotate(9.55rad);
                     width: 2px; height: 5px; left: 286.71px; top: 264.6px;}



/*
.content-b {
   position: relative;
   color: red;
}

.content-b h1 {
	font-size: 50px;
	position: absolute;
    bottom: 50%;
    right: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    color: red;
}



.content-t {
   position: relative;
   color: white;
 
}

.content-t h1 {
	font-size: 50px;
	  position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    color:white;

}*/