/* Base */

body{
	   font-size:16px;
	margin:0;
	line-hight:1.38em;
	padding:0;
	font-family: aktiv-grotesk, sans-serif;

	
}




header{clear:both;}


#Top{background-color:#ffbcd2;
margin:0;
	z-index:300;
}

a:link,a:visited{color:#303030;
text-decoration:none;}

a:hover{text-decoration: line-through;
text-decoration-thickness: 2px;
color:#fff;}


a:active, a:visite, a:focus, *,*:focus,*:hover{outline: none;}


#Content, #OtherProjects{background-color:#ffbcd2;
margin:0;
}


/* Type*/
.Hidden{display:none;}

header h1{font-size:1.38em;
margin:0;
	font-weight:200;
	
	/* background: rgba(0, 0, 0, 0) url("../assets/siteAssets/bleepshapes-logo.svg") no-repeat left center;*/
}

#Content h1{font-size:1.38em;
margin-bottom:1em;}


h1{margin:0;
color:#303030;}

#Content h1{
	border-bottom:2px solid #303030;}
	

h2{font-size:1.19em;
margin: 1.2em 0;}


#Content  p, #Content  ul{font-size:0.94em;
color:#303030;
font-weight:300;}





html{cursor:url("../assets/siteAssets/Cursor.svg"), auto;}

#Burger, #Close, a, button{
	  cursor:url("../assets/siteAssets/CursorHover.svg"), auto;
}

.TextMainContent{font-size:2.07em;
line-height:1.2;}
.TextMainContent p, .TextMainContent nav{
	position:relative;
	margin-top:0;

}


.TextMainContent li{display:block;
clear:both;}

button {
 display: inline-block;
    border: none;
    padding: 0.69em ;
    margin: -2em 0 1em 0 ;
    text-decoration: none;
    background: #ffbcd2;
    color: #303030;
	text-transform: uppercase;
	font-family: aktiv-grotesk, sans-serif;
    font-size: 1.06em;
	line-height:1.06em;
    text-align: center;
	border:2px solid #303030;
	font-style:italic;
	font-weight:800;
	}
	
button:hover{
text-decoration: line-through;
text-decoration-thickness: 2px;}
	
.PlayButton{ background: #fff;
}

.PlayButton:active{background: #303030;
  color: #ffbcd2;}


.Clicked{ background: #303030!important;
    color: #ffbcd2;
border:2px solid #ffbcd2;}


img{width:100%;
 	margin-bottom:2em;}




@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }









/* Responsive */


/* Phone only */

@media only screen and (min-width: 0px) {
	
	body{background-color: #ffbcd2;
}
	
	header{padding:1.38em;}
	
	video{
		max-width:100%;
	 	border:2px solid #303030;
	 	margin-bottom:1.38em;
		background-color:#ffbcd2;
	
	 	
	}


	#Close{display:none;}
	
#Top{
	width:100%;
	border-bottom:2px solid #303030;
	position:fixed;
		z-index:300;

}
	
	
	#Content{position:relative;
		top:4.8em;}
	
	#MainContent{
	position:relative;
		top:4.7em;
		padding:0 1.38em 4.5em 1.38em;
	min-height: calc(100vh - 8.4em);
}
	
		#MainContent .Layout:first-child{
		margin-top:1em;
	
}
	
	.TextMainContent nav li{
	margin-bottom:0.33em;
}
	
	#Burger, #Close{
	position:absolute;
	width:2em;
	margin:1.38em;
	right:0;
	z-index:120;}
	
	#Top  header{
	clear:both;
	
	}
	
	#Top header svg{
	height:2.7em;
	margin:0;
		display:block;
}
	
	
	
		
	#Top nav{display:none;
		position:fixed;
		top:0.6em;
		width:100%;
		height:100%;
		z-index:100;
		padding:0.6em 0.7em;
		background-color: #ffbcd2;
	}
	
	#Top nav li{
		font-size:1.38em;
text-transform:uppercase;
	font-weight:500;
		margin:0.2em 0 1.55em 0 ;
}
	
	#Top nav li a{padding: 0.55em ;
}
	
	
	
	
	
	
	
	
	
	


	
	
		#Content h1{padding: 0.5em 1em;
	text-transform:uppercase;
		  font-style: italic;
		font-weight:800;}
	
		#Content #Description{margin:0 1.38em 1.38em 1.38em;}
	
	
	#Description h2, #Description h3, #Description p, #Description ul, #Description h4{
		margin:0.66em 0 0 0;
	  vertical-align: baseline;}
	
	#Description nav ul li{font-size:1.38em;
		clear:both;
}
	#More{margin-left:-1.5em;
	font-size:1em;
	border-top:2px solid #303030;
	width:100%;
	padding:1.5em 1.5em 0 1.5em;
	bottom:4em;
			text-align:right;
}
	
	#OtherProjects{border-top:2px solid #303030;
overflow:hidden;
padding:1.38em 1.38em 1.4em 1.38em;
	/*	position:relative;
		bottom:-5.52em;*/
}


#OtherProjects li{width:50%;
text-align:right;
	float:left;}

#OtherProjects li#Next{
text-align:right;
	margin-left:50%;
}
	
#OtherProjects li:first-child{
text-align:left;}
	
	
		
	#OtherProjects{position:fixed;
			top:auto;
	bottom:0;
	width:calc(100% - 1.38em - 1.38em);
	z-index:200;}
	
	
	.Layout{position:relative;
	}
	
	.Button{min-width:10em;}
	
	.ButtonA{margin: 0 0 1.7em 0;
		backface-visibility: hidden;
	
	}
	
	
	#TypeButtonA{bottom:-2.5em; left:3em;}
	#TypeButtonB{}
	#TypeButtonC{bottom:5em;left:-6em;}
	#TypeButtonD{}
	
	#PlayFoundA,  #PlayGeoC{bottom:8em;
	right:1em;}
		#PlayFoundB{bottom:8em;
	left:0em;}
			#PlayFoundC, #PlayGeoA, #PlayGeoI, #PlayModF{bottom:10em;
	right:1em;}
		#PlayFoundD, #PlayGeoB, #PlayGeoH{bottom:8em;
	left:1.5em;}
				#PlayFoundE, #PlayModB, #PlayModD{bottom:8em;
	right:1.25em;}
		#PlayFoundF{bottom:11em;
	left:1em;}
	
	#PlayGeoD{bottom:0.5em;
	left:0em;}
	
	#PlayGeoE{bottom:8em;
	}
	
		#PlayGeoG{bottom:9em;
	}
	.ButtonB{margin: 0 0 1.7em 0;
		backface-visibility: hidden;
	}
	.PlayButtonA{margin: 0 0 1.7em 0;
			right:2em;
		backface-visibility: hidden;
	
	}
	.PlayButtonB{margin: 0 0 1.7em 0;
	
		backface-visibility: hidden;
	
	}
	
	#GeoButtonA{background-color:#63c8b9;}
		#GeoButtonB{background-color:#f3ca45;}
		#GeoButtonC{background-color:#e18ae6;}
		#GeoButtonD{background-color:#f8ed55;}
		#GeoButtonE{background-color:#eb5b73;}
		#GeoButtonF{background-color:#e18ae6;}
		#GeoButtonG{background-color:#63c8b9;}
		#GeoButtonH{background-color:#e95750;}
	
	#ModularButtonA{background-color:#f19e5d;}
	#ModularButtonB{background-color:#fbe74e;}
	#ModularButtonC{background-color:#d38bd2;}
	#ModularButtonD{background-color:#e25650;}
	#ModularButtonE{background-color:#77d585;}
	#ModularButtonF{background-color:#f9db58;}

	 #FoundFootageA{background-color:#ece44b;}
	 #FoundFootageB{background-color:#f3b292;}
	 #FoundFootageC{background-color:#a7e14e;}
	 #FoundFootageD{background-color:#5c81f0;}
	 #FoundFootageE{background-color:#ddb545;}
	 #FoundFootageF{background-color:#e4e3c8;}
	
	
		#TypeButtonA{background-color:#d5aa40;}
		#TypeButtonB{background-color:#a5fb79;}
	#TypeButtonC{background-color:#b5ebc4;}
		#TypeButtonD{background-color:#f44d8b;}
	
	#ConcreteA{background-color:#f5be41;}
	
	#DesktopDivide{display:none;}
	
	
	
	
		#HomePageTest{
		position:relative;
		height: calc(50vh);
		padding:0;
			margin:0;
			width: calc(100%);
		border:2px solid #303030;
		background-image: url("../assets/posters/ModGif.gif");
			 background-size: cover;
			  background-position: center;
	}
	
	
	
	
	
	
		.NavPageTest1{
		position:relative;
	height: calc(6.5vh - 2px);
		padding:0;
			margin:0;
			
			width: calc(100% );

			border:none;
					border-left:2px solid #303030;
					border-top:2px solid #303030;
				border-right:2px solid #303030;	
			 background-size: cover;
			  background-position: center;
			
	}
	
	
	.NavPageTest2{
		position:relative;
		height: calc(6.5vh - 2px);
		padding:0;
			margin:0;
		
			width: calc(100% );
		
			 background-size: cover;
			  background-position: center;
	border:none;
			border-left:2px solid #303030;
		border-top:2px solid #303030;
		border-right:2px solid #303030;	
		
	}
	
	
	.ProjectsBorderLeft1{border-bottom:2px solid #303030;}
	
	
	
	
		#ConcreteImage{background-image: url("../assets/posters/Concrete-Gif.gif");}
#CastleImage{background-image: url("../assets/posters/CastleGif.gif");}
#ModularImage{background-image: url("../assets/posters/ModGif.gif");
}
	#TypeImage{background-image: url("../assets/posters/Type-Gif.gif");	border-top:none;}
#FoundImage{background-image: url("../assets/posters/FoundGif.gif");}
#GeoImage{background-image: url("../assets/posters/Geo-Gif.gif");}
	
	.ProjectsImageLinks:hover {
		filter:grayscale(100%) sepia(1) invert(15%) hue-rotate(275deg);}

	
	.Paused{/*filter:invert(10%);
	opacity:0.9;*/
		
		filter:grayscale(100%) sepia(1) invert(15%) hue-rotate(275deg);

}
	
	

	
}





/* Tablet portrait up */

@media only screen and (min-width: 650px) {
	
		body{background-color: #ffbcd2;}
	
	#Burger, #Close{display:none;
	}
	
	


#Top nav{display:none;
		position:fixed;
		top:0;
		width:100%;
		height:100%;
		z-index:100;
		padding:0.6em 0;
		background-color: #ffbcd2;
	}
	
	#Top nav li{
		font-size:2.76em;
text-transform:uppercase;
	font-weight:500;
		margin:0.2em 0 0.55em 0 ;
}
	
	#Top nav li a{padding: 0.55em ;}
	
	
	
#Top nav li a{padding: 0.55em 0;}


nav li{font-size:1.1em;
		float:left;
}

	#Top  nav li{font-size:1.1em;
}
	
	
	#Top nav {float:right;
}
	
	#active{border-top:2px solid #303030;
border-bottom:2px solid #303030;}

header{width:33%;
float:left;
position:absolute;
top:0;}

	
	#Top{
		width:100%;
		z-index:300;
		
}
	
	

	
	
	#Top nav{
		
	padding:0.85em 0.665em;

			
	  overflow:hidden;
		text-align:right;
			height:3em;
		border-left:2px solid #303030;
		width:50%;
		min-width:26em;
		position:relative;
				display:block;
	}
	
	#Top nav ul{

		width:calc(26em);
		right:0;
		margin-top:0.75em;
		position:absolute;
	}
	
	#Top nav li{

margin:0 0.33em;
		

		
}
	
	
	

	
	
	

	
	
	#MainContent{
	position:relative;
		top:3.6em;
		padding:1.38em 1.38em 6.8em 1.38em;
	
	
}
	
	
	
	
	#OtherProjects{position:fixed;
			top:auto;
	bottom:0;
	width:calc(100% - 1.38em - 1.38em);
	z-index:200;}
		
	
		
	#MainContent .Layout:first-child{
		margin-top:0;
	
}
	
 video{max-height: 50vh;
	 min-height: 20em;
	 max-width:	 calc(100% - 2px);
padding:0em;
	 	margin-bottom:2.7em;
	 position:relative;
	 display:block;
margin-bottom:1.38em;
	  outline: none;
	object-fit: fill;
	box-sizing: content-box;
	}
	
	
	
	
	
	
	
	.LayoutA video{left:0;}


.LayoutB video{margin-right:0;
	margin-left:auto;
}

	.LayoutC video{margin-right:0;
	margin-left:auto;
		 min-height: auto;
}
	
	button {
transition: background 250ms ease-in-out, 
                transform 120ms ease,
				font-size 120ms ease;
	-webkit-appearance: none;
    -moz-appearance: none;
	/* chris adds*/
	border-radius: 50%;
	position:absolute;
	 width: 6.5em;
    height: 6.5em;
	margin-left:10%;
	margin-top:-2em;
-webkit-animation:spin 12s linear infinite;
    -moz-animation:spin 12s linear infinite;
    animation:spin 12s linear infinite;
	z-index:100;
	
	}
	

	
	
	
		.Button{min-width:6.5em;}
	
	.ButtonA{margin-top:-10em;
margin-left:75%;}
	
	.ButtonB{margin-top:-10em;
margin-left:10%;}


		.PlayButton{transition: background 0ms ease-in-out; 
            border-radius:0%;  
	-webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
		 width: 6em;
    height: 6em;
	bottom:-0.5em;
			
	}
	
	.NavPageTest1{
		position:relative;
	height: calc(25vh - 2px);
		padding:0;
			margin:0;
			
			width: calc(25% );
				float:right;
			border:none;
			 background-size: cover;
			  background-position: center;
		top:-7.5em;

			
	}
	
	#FoundImage, #ModularImage{clear:both;}
	.NavPageTest2{
		position:relative;
		height: calc(25vh - 2px);
		padding:0;
			margin:0;
			width: calc(25% );
			float:right;
			 background-size: cover;
			  background-position: center;
	border:none;
			top:-7.5em;
	}
	
	
	/*border-left:2px solid #303030;
		border-top:2px solid #303030;
		border-right:2px solid #303030;	*/
	
	
	#ConcreteImage, #CastleImage{border-top:2px solid #303030;}
	
	#ConcreteImage, #CastleImage, #ModularImage, #GeoImage, #FoundImage, #TypeImage{border-bottom:2px solid #303030;
	border-left:2px solid #303030;}
	
	#ModularImage, #ConcreteImage,#FoundImage{border-right:2px solid #303030;}
	
	#Description{z-index:200;
	position:relative;}
	
#More{margin-left:-1.5em;
	font-size:1.1em;
	border-top:2px solid #303030;
	width:100%;
	padding:1.5em 1.5em 0 1.5em;
	bottom:-1.75em;
	position:relative;

	
}
}
	
	
	



/* Tablet landscape up */

@media only screen and (min-width: 900px) {
	
	
	
	body{
	max-width:1400px;
	margin:0 auto;
	position:relative;
		padding-right:0.69em;
	}

	#Top{position:relative;
				border-bottom:none;


}
	
		
	#Top nav {float:none;
width:auto;
		border-bottom:none;
			height:auto;
				border-left:none;
				min-width:1em;
padding:1.26em 0.665em;


}

	
	#Top nav ul{

		margin-top:0;
				position:relative;
min-width:100%;
	}
	
	
	
	
	
header{width:auto;
float:none;
	position:relative;
top:0;
padding:1em;}
	
	
	#Top  header{border-top:2px solid #303030;
		border-bottom:2px solid #303030;
	
	}
	
	
	header h1{font-size:2.76em;}
	
	
	#Top header svg{
	height:7.45em;
}
	
	#Top nav li{
		margin:0 0.33em;
}
	
	#Content{
	height: calc(100vh - 14.5em);	
	position:relative;
		top:0;
}
	
	#Content h1{
		transform-origin: top left ;
		transform: rotate(270deg);
	position:absolute;
	left:0;
		max-height:1.5em;
		bottom:0;
		margin-bottom: -2.5em;
		width:calc(100vh );
	}
	
	
		#Description nav ul li{font-size:2.07em;
		clear:both;
}
	#Description nav{position:relative; bottom:-0.5em;}
	
	#Lefty{
	position:fixed;
	/*width:476px;*/
		width:428px;
	border-right:2px solid #303030;}
	
	#OtherProjects{position:relative;
		width:auto;
	bottom:0;}
	
	#FillerBlock{position:relative;
		width:auto;
	bottom:0;
	display:block;
	height:4.2em;
	border-top:2px solid #303030;}
	
	
	#MainContent{
	width:  calc(100% - 428px);
		position:relative;
		top:0;
		padding:0;
			padding-top:4.2em;
margin-right:0;
		margin-left:auto;
	padding-bottom:2.7em;
			border-top:none;
		

	
}
	
	
	
	
	#MainContent section{
		position:relative;
		padding-left:0.6875em;
	}
	
	

	
	#Content #Description{position:absolute;
	bottom:0;
	left:3.5em;}
	/**/
	
 video{max-height: calc(100vh - 15em);
	 	
	}
	
	

	
		.ForcedBorders{width:100%;
	height:1px;
	position:fixed;
	z-index:600;
	background-color:#303030;
	display:none;
	border:1px solid #303030;}
	
	#BorderTop{top:0;}
	
		#BorderBottom{bottom:0;}
	
	
	
	.TextMainContent {
		top:0.6em;
		font-size:2.76em;
		padding-right: 0.6875em;
	
	}
	

	#GeoImage{
	border-left:none;}
	#ConcreteImage{
	border-bottom:none;}
		
	
	
			.NavPageTest1{
		position:relative;
		height: calc(25vh - 2px);
		padding:0;
			margin:0;
			
			width: calc(33% );
				
							float:none;

				border:none;
					border-left:2px solid #303030;
					border-top:2px solid #303030;
				border-right:2px solid #303030;
			 background-size: cover;
			  background-position: center;
			
						top:0em;
			
	}
	
	
	.NavPageTest2{
		position:relative;
		height: calc(50vh - 8.6em);
		padding:0;
			margin:0;
		
			width: calc(33%);
			 background-size: cover;
			  background-position: center;
				float:left;
		border:none;
			border-left:2px solid #303030;
		border-top:2px solid #303030;
			border-bottom:2px solid #303030;
		top:0em;
		
	}
	
	.ProjectsBorderLeft1{		border-top:none;
		border-bottom:2px solid #303030;
}
	
	
		.ProjectsBorderLeft2{	
			border-right:2px solid #303030;
			width: calc(33% - 4px);
}
	
	#ModularImage{
	border-top:none;
	float:left;}
	#TypeImage{float:left;
	border-left:none;}


	#HomePageTest{
		height: calc(100vh - 8.7em);
	}
	

	
	#FoundImage{clear:none;}	
	
	
		
	
	#More{margin-left:0;
	font-size:1.1em;
	border-top:2px solid #303030;
			border-left:2px solid #303030;
	width:100%;
	padding:1.2em 0em 1.2em 1em;
	bottom:0;
margin-bottom:0;
		text-align:left;
		background-color:#ffbcd2;
		z-index:200;
width: calc(100% - 0.5em);
		position:fixed;

	
}
	
	.PlayButton{z-index:500;}
}


/* Desktop up */

@media only screen and (min-width: 1200px) {
	
	body{
	padding:0.69em;
	
border:none;

	}
	
	header{
padding:1.2em;}
	
	.ForcedBorders{
	height:0.69em;
	
		background-color:#ffbcd2;
		border:2px solid #303030;
		left:0em;
			display:block;

		border-left:none;
		border-rigt:none;
	}
	
	#BorderTop{top:0;
	border-top:none;}
	
		#BorderBottom{bottom:0;
	border-bottom:none;}
	
	
	#Top nav li{

margin:0 0.665em;

}
	
	#Top header svg{
	height:8.45em;
	
	}
#Lefty{
	width:476px;
	border:2px solid #303030;
	}
	
	
	#Content{
height: calc(100vh - 16.25em);
}
	
	#Content h1{
		
		margin-bottom: -2.5em;

		
	}
	
	
	
	#MainContent{
	width:  calc(100% - 469px);
	border-right:2px solid #303030;
padding-top:4.2em;


	
}
	
	
	
	
		.LayoutA video{left:2px;}
	
	.LayoutA video, .LayoutC{border-left:none;}


.LayoutB video, .LayoutC{border-right:none;
}

	
.TextMainContent {
		top:0.6em;
		padding:0 0.6875em 0 1.38em!important;
	
	}
	
	
		.NavPageTest1{
		
	
			width: calc(33.333% );

				border:none;
					border-left:2px solid #303030;
					border-top:2px solid #303030;
				border-right:2px solid #303030;
			 background-size: cover;
							float:none;

			  background-position: center;
			
	}
	
	.NavPageTest2{
		position:relative;
		height: calc(50vh - 9.9em);
		padding:0;
			margin:0;
		
			width: calc(33.333%);
		
			 background-size: cover;
			  background-position: center;
				float:left;
		border:none;
			border-left:2px solid #303030;
		border-top:2px solid #303030;
			border-bottom:2px solid #303030;
		
	}

	.ProjectsBorderLeft1{		border-top:none;
		border-bottom:2px solid #303030;
}
	
	
		.ProjectsBorderLeft2{	
			width: calc(33.333% - 6px);
}
	
	
	
		
			#HomePageTest{
		position:relative;
		height: calc(100vh - 9.9em);
			margin:0;
		border-left:0;
			width: calc(100% - 2px);
		border:2px solid #303030;
		background-image: url("../assets/posters/ModGif.gif");
			 background-size: cover;
			  background-position: center;
	}

	
		#More{margin-left:0.75em;
	font-size:1.1em;
	border-top:2px solid #303030;
			border-left:none;
	width:100%;
	padding:1.2em 0em 1.7em 1em;
	bottom:0em;
margin-bottom:0;
		text-align:left;
		background-color:#ffbcd2;
		z-index:100;
	width: calc(100% - 1.75em);
	}
	
			

			
	}
	


/* Big Desktop up */

/*
@media only screen and (min-width: 1600px) {
	
	#MainContent{background-color:#ffbcd2;
		z-index:0;}
	
	#Lefty{z-index:1;}
	
	#DesktopDivideLeft{height:1px;
		border-bottom:2px solid #303030;
		position:fixed;
		width:calc(100% - 1400px);
		display:block;
		top:4.8em;
		left:0;
		z-index:-2;
	}
			
	
	#DesktopDivideRightTop{
		height:1px;
		border-bottom:2px solid #303030;
		position:fixed;
		width:calc(100% - 1400px);
		display:block;
		top:4.8em;
		right:0;
		z-index:-3;
	
	}
		
	#DesktopDivideRight{height:1px;
		border-bottom:2px solid #303030;
		position:fixed;
		width:calc(100% - 1400px);
		display:block;
		bottom:4.75em;
		right:0;
		z-index:-3;
	}
	
	#DesktopDivideLeftBottom{height:1px;
		border-bottom:2px solid #303030;
		position:fixed;
		width:calc(100% - 1400px);
		display:block;
		bottom:4.75em;
		left:0;
		z-index:-3;
	}
	*/
}