/**
 * @license
 * MyFonts Webfont Build ID 3526256, 2018-02-14T08:32:52-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: UniversLTPro-BlackExt by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/univers/pro-black-extended/
 * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 2008 Linotype GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype GmbH, and may not be reproduced, 
 * Licensed pageviews: 250,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3526256
 * 
 * © 2018 MyFonts Inc
*/
html, body {font: 13px Helmet, Freesans, sans-serif;position:relative;background:#16161d;}

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #03f;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style placeholders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }
  
@font-face {font-family: 'UniversLTPro-BlackExt';
            src: url('/assets/fonts/35CE70_0_0.eot');
            src: url('/assets/fonts/35CE70_0_0.eot?#iefix') format('embedded-opentype'),
                 url('/assets/fonts/35CE70_0_0.woff') format('woff'),
                 url('/assets/fonts/35CE70_0_0.ttf') format('truetype');}

article{
	font-family: 'UniversLTPro-BlackExt';
	text-transform: uppercase;
	color:#16161D;
   	top:0;
   	height: 100%;
   	font-size: 205px;
    text-align: center;
    line-height: 180px;
   	overflow-x: hidden;
   	white-space: nowrap;
}

ul:first-of-type{
	margin-top: 15%;
}

ul{
	overflow:hidden;
	padding-top:20px;

}
ul:nth-child(2){
	margin-top:16%;
}

ul li{
	display: inline;
	position:relative;
	padding-left: -190px;
	padding-right: -179px;
}

.no{
	font-size: 16px;
	-webkit-text-stroke-width: 0px;
	color: #fff;
	-webkit-text-fill-color: #fff;
	padding: 0 !important;
	margin: 0 auto;
}

footer.foot{
	font-size: 16px;
	text-align:center;
	line-height: 64px;
	font-family: 'UniversLTPro-BlackExt';
	text-transform: uppercase;
	white-space: initial;
	color: #fff;
	padding: 0 0 15%;
}

.foot a {
    border-bottom: 1px solid #ff2a00;
}

.foot a:hover {
    color: #ff2a00;

}

.also{
	font-size: 40px;
	line-height:40px;
	width: 80%;
	margin: 44px auto 0 auto;
	text-align:center;
	white-space: initial;
	-webkit-text-stroke-width: 2px;
	margin-bottom: 80px;

}

.spin-left{
    vertical-align: top;
    top: 12px;
    font-size: 12px;
    line-height: 16px;
    position: relative;
    display: inline-block;
    white-space: initial;
    text-align: justify;
    width: auto;
    margin-top: -26px;
    text-align:right;
    font-family: 'arial';
    color: #fff;
    -webkit-text-stroke-width: 0px;
    text-transform: initial;
    width: 200px;

}

ul li a{
	-webkit-text-fill-color: #16161D;
	text-decoration: none;
	color: white;
	border-bottom: 1px solid #ff2a00;
	-webkit-font-smoothing: antialiased;
   	-moz-osx-font-smoothing: grayscale;
    -webkit-text-fill-color: #16161D;
	-webkit-text-stroke-color: white;
   	-webkit-text-stroke-width:1px;
   	font-kerning: normal;
    font-weight: normal; 
    font-style: normal;
}

.spin-left a:hover{
	-webkit-text-fill-color: #ff2a00;
	-webkit-text-stroke-width: 0px;
}

.spacer{
	vertical-align:top;
	display: inline-block;
	height: 160px;
	margin-top: -20px;
	width: 300px;
	border-radius: 4px;

	overflow: hidden; /* Hide the overflow of the image */
    position: relative;
}

.spacer img{
	width: 100%; /* Make image fit the width of the container */
    height: auto; /* Maintain aspect ratio */
    transition: transform 8s ease-in-out; /* Smooth transition for the scrolling effect */
    object-fit: cover; /* Ensure the image covers the container area */
}

ul li:hover .scrolling {
    transform: translateY(calc(-100% + 160px)); /* Scroll the image up */
}

.end{
	margin-left: 25px;
}
.space{
	margin-left: -57px;
margin-right: -20px;
}
.start{
	margin-left: 10px;
    margin-right: 15px;
}
footer.foot a{
	color: white;
	text-decoration: none;
}

@-moz-document url-prefix() { 
ul li a{
  	color: #16161D;
  	text-shadow:0;
  }
  article, .spin-left, .spin-left a {
   text-shadow:0;
  }
  .no{
  	text-shadow: none;
  }
  .spin-left a{
  	color:#000;
  }
  .spin-left a:hover{
  	color:#fff;
  	text-shadow: none;
  }
}


.subline {
    font-size: 12px;
    font-family: 'Helvetica';
    text-transform: initial;
    line-height: initial;
}




/* Media queries
-------------------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
/*	.no{
		font-size: 100px;
	}

	ul{
		width: 100%;
		overflow:hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		padding-top: 30px;
		margin: 0;
	}
	ul li{
		margin-right: 20px;
	}
	ul li.no{
		margin-right: 0px;
		-webkit-text-stroke-width: 1px;
	}
	.also{
		font-size: 20px;
		line-height: 20px;
		width: 95%;
		-webkit-text-stroke-width: 1px;
	}
	.spin-left{
		margin-left:200px;
	}
	article{
		font-size: 24px;
		-webkit-text-stroke-width:1px;

	}*/
	html, body{
		overflow-x:hidden;
	}
	ul{
		overflow:hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
    	padding: 25px 0;
	}
	ul.project li{
		margin-left: 0 !important;
		padding-left:158px;
		overflow:auto;
	}
	.spin-left{
		font-size: 30px;
		line-height: 30px;
	}

        .vid {
        width: 95%;
      }
}

ul li a:hover {
    -webkit-text-fill-color: #16161d;
}


/* Container for the flip effect */
.flip-container {
    perspective: 1000px; /* Create a 3D perspective */
    width: 200px; /* Width of the div */
    height: 300px; /* Height of the div */
    transform: rotate(12deg);
}

.flip-container:hover {
	z-index: 100;
}

/* The card itself (inside the container) */
.flip-card {
    position: relative;
    width: 500px;
    height: 321px;
    transform-style: preserve-3d; /* Allow 3D transformations */
    transition: transform 0.6s; /* Transition for the flip effect */
  
}

/* Front of the card */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hide the back face when flipped */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* Style the front side */
.flip-card-front {
	font-family: 'UniversLTPro-BlackExt';
    background-color: #16161d;
    color: #fff;
    border: 1px solid ;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 1px;
}

/* Style the back side */
.flip-card-back {
    background-color: #000;
    color: white;
    transform: rotateY(180deg); /* Initially rotate the back 180 degrees */
    overflow: scroll;
    border-radius: 10px;
    border: 1px solid #ff2a00;

   	overflow: hidden;
}

.flip-card-back img {
	width: 100%;
}

/* Flip the card on hover */
/*.flip-container:hover .flip-card {
    transform: rotateY(180deg); /* Flip the card when hovered */

.flip-card-back ul {
	margin: 0;
	display: inline-grid;
}

body {
    margin: 0;
    overflow: hidden; /* Hide the overflow since the wrapper will be larger than the screen */
    height: 100vh;
    width: 100vw;
    position: relative;
}

.wrapper2 {
    position: absolute;
    width: 240vw;  /* 2x the width of the viewport */
    height: 240vh; /* 2x the height of the viewport */
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s ease-out; /* Smooth transition for the wrapper's movement */
    border: 1px solid white;
    border-radius: 50px;
}

.number {
	font-family: 'UniversLTPro-BlackExt';
	text-transform: uppercase;
	color:#16161D;
   	font-size: 100px;
   	   	-webkit-text-stroke-width: 1px;
   	-webkit-text-stroke-color: white;
   	-webkit-text-stroke-fill: #16161d;
   	letter-spacing: 4px;
}

.back-title {
	position: absolute;
	top: 40px;
	color: #ff2a00;
	font-family: arial;
	display: none;
	transition: top 2s ease;
	font-family: 'UniversLTPro-BlackExt';
	font-size: 24px;
	text-transform: uppercase;
	white-space: nowrap;	
}

.show-info {
	width: 300px;
}

.back-desc {
	position: absolute;
	top: 321px;
	color: #fff;
	font-family: arial;
	display: none;
	transition: bottom 2s ease;
	color: #ff2a00;
	padding-top: 20px;
}

.back-desc a {
	color: #ff2a00;
	border-bottom: 1px solid #fff;
	text-decoration: none;
}

.back-desc a:hover {
	color: #fff;

}

.back-desc a.site {
	color: #fff;
	background: #ff2a00;
	text-decoration: none;
}

.back-desc.active {
	bottom: -40px;
	display: block;
}

.back-title.active {
	top: -40px;
	display: block;
}

.email {
	font-family: 'UniversLTPro-BlackExt';
	font-size: 16px;
	position: absolute;
	width: 600px;
	color: #ff2a00;
	text-transform: uppercase;
	text-align: center;
	line-height: 30px;
}

.email:hover {
	z-index: 100;
}

.email-1 {
	bottom: -140px;
	left: calc(50% - 300px);
}

.nopls {
    font-family: 'UniversLTPro-BlackExt';
    text-transform: uppercase;
    color:#16161D;
    font-size: 30px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-fill: #16161d;
}

/* Print styles
-------------------------------------------------------------------------------*/
@media print {



}