body
	{
		margin:0px;
		//font-family:Arial;
		//font-family:Avenir Medium;
		font-family:Avenir;	
	
	}
	
	.header
	{
		position: fixed;
		height: 72px;
		width: 100%;
		top: 0px;
		left: 0px;
		background-color: black;
		z-index: 9999;
	}
  
	.logo
	{
		display:inline-block;
		height: 60px;
	}
	
	.menu
	{
		display:inline-block;
		padding: 6px;
		float:right;
	}
  
	.content
	{
		height: inherit;
		margin-top: 72px;
		min-height:calc(70vh);
	}
	
	/*
	.gallery-title
	{
		text-transform: capitalize;
		padding:0px 0px 9px 0px;
		font-size:24px;
		font-weight: bold;
	}
	*/
	
	.card
	{
		font-size:0px;
		display:inline-block;
		position: relative;
		
		/*transition: 0.3s;*/
    	transform-style: preserve-3d;
    	z-index:3;
	}
	
	.flip
	{
		transform: rotateY(180deg);
	}
	
	.card-front
	{
		display:block;
		position: relative;
		
  		border-radius: 6px;
    	overflow:hidden;
		
		z-index:2;
		transform: rotateY(0deg);
						
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
	}
	
	.card-back
	{
		position: absolute;
    	width:100%;
		height:calc(100% + 4px); /* why 4 needed here? */
    	top: 0px;
    	left: 0px;
		box-sizing:border-box;
		
  		border-radius: 6px;
    	overflow:hidden;
	
    	z-index: 1;
    	transform: rotateY(180deg);
    	
    	backface-visibility: hidden;
    	-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
	}
	
	.item
	{
		display:inline-block;
		position: relative;
		overflow:hidden;
	}
  
   .frame, .frame-with-title
	{	
		display: block;
    	position: relative;	
    	overflow:hidden;
   	}
   	
  	.full
  	{
  		max-width:100%;
  		max-height:100%;
  		left:-100%;
  		right:-100%;
  		top:-100%;
  		bottom:-100%;
  	}
  	
	.tall
	{
		width:100%;
		height:auto;
		left:-100%;
		right:-100%;
		top:-100%;
		bottom:-100%;
	}
				
	.wide
	{
		height:100%;
		width:auto;
		left:-100%;
		right:-100%;
		top:-100%;
		bottom:-100%;
	}	
  		
  	/* Desktop */
  	@media only screen and (-webkit-device-pixel-ratio:1)
  	{
  		body, .content
		{
			/*background-color:FloralWhite;
			background-color:WhiteSmoke;
			background-color:#202020;
			background-color:Black;*/
			background-image: url("images/texture.png");
		}
		
		.logo
		{	
			padding: 6px;
		}

		.content
  		{
  			padding:6px 0px 0px 6px;
  			
  			text-align:center;
  			
  			perspective:10000px;
  			perspective-origin: 50% 50%;
  		}
  		
  		.intro
  		{
  			width:100%;
  			visibility:visible;
  		}
  		
		/*.gallery-title
		{
			color:black;
		}*/
		
		.card
 		{
 			vertical-align:top;	
 			/*transition:0.3s;*/
 			margin:0px 6px 9px 0px;		
 		}
 		
 		/*
 		.flip
		{
			transform: rotateY(180deg);
		}
		*/
				
  		.card-front, .card-back
  		{
  			border:2px solid black;
		}
		
   		.card-front:hover, .card-back:hover
  		{
  			border:2px solid gold;
  			cursor:pointer;
  		}
  		
  		.item
  		{
  			width:100%;
 			height:100%;
 			
  			transform: translate3d(0px,0px,0px); /*fix wiggle bug */
  			filter: brightness(90%);
  		}	
  		
  		.item:hover
  		{
  			filter: brightness(100%);
  			/*transition:0.2s;*/
  		}	  		
 			
 		.frame
 		{
 			width:100%;
 			height:100%;
 		
 			/*background-color:#505050;*/
			background-color:white;
			/*background-color:FloralWhite;*/
		}
		
		.frame-with-title
 		{
 			width:100%;
 			height:calc(100% - 30px);
 		
 		 	background-color:FloralWhite;

 			/*background-color:#505050;*/
			/*background-color:white;*/
			/*background-color:FloralWhite;*/
			/*background-image: url("images/brick-texture.jpg");*/
		}	
		
		.frame-with-two-titles
 		{
 			width:100%;
 			height:calc(100% - 60px);
 		
 			background-color:FloralWhite;

 			/*background-color:#505050;*/
			/*background-color:white;*/
			/*background-color:FloralWhite;*/
			/*background-image: url("images/brick-texture.jpg");*/
		}	
		
		.purchase
		{
			background-color:#9bc2cf;
		}
		
		.purchase:hover
		{
			background-color:#add8e6;
		}	
		
		.prev_page, .next_page
		{
			color:black;
		}
 	} 	
	
  	/* Mobile */
	@media only screen and (-webkit-device-pixel-ratio:2), only screen and (-webkit-device-pixel-ratio:3)
	{
	 	body, .content
		{
			/*background-color:FloralWhite;
			background-color:WhiteSmoke;
			background-color:#202020;*/
			background-color:Black;
			/*background-image: url("images/texture.png");*/
		}
		
		.content
		{
			/*text-align:justify;*/
			
			text-align:center;

			padding:0px 0px 0px 0px;
		}
		
		.intro
  		{
  			font-size:0px;
  			width:0px;
  			height:0px;
  			overflow:hidden;
  			visibility:hidden;
  		}
		
		.logo
		{	
			padding:6px 0px 6px 4px;
		}
		
		/*.gallery-title
		{
			color:white;
		}*/
	
		.frame, .frame-with-title, .frame-with-two-titles
		{
			/*background-color:#505050;*/
			/*background-color:white;*/
			background-color:FloralWhite;
			/*background-image: url("images/texture.png");*/
			/*background-image: url("images/brickwall.jpg");*/
			/*background-image: url("images/stucco.jpg");*/
			/*background-image:url("images/brick-texture.jpg");*/
		}
		
		.card
		{
			margin:0px 0px 4px 0px;
			padding:4px;	
			
		}	
		
		.card-front, .card-back
  		{
  			border:2px solid gray;
		}
		
		.purchase
		{
			background-color:#add8e6;
		}
		
		.prev_page, .next_page
		{
			color:#C0C0C0;
		}
	}
  
    /* Mobile portrait */
	@media only screen and (orientation:portrait) and (-webkit-device-pixel-ratio:2), only screen and (orientation:portrait) and (-webkit-device-pixel-ratio:3)
	{
		.content
		{
			perspective:100000px;
		}

 		.item
 		{
 			width:100%;
 			height:100%;
 		}
 		
 		.frame
 		{
 			width:100%;
 			height:100%;
 		}
 		
 		.frame-with-title
 		{
 			width:100%;
 			height:calc(100% - 30px);
 		}
 		
 		.frame-with-two-titles
 		{
 			width:100%;
 			height:calc(100% - 60px);
 		}
 		
 		/*
 		.flip
		{
			width:calc(100vw);
			height:calc(100vh - 72px - 64px - 10px);
			transform: rotateY(180deg);
		}
		*/		
  	}
  	
  	/* Mobile landscape */
  	@media only screen and (orientation:landscape) and (-webkit-device-pixel-ratio:2), 	only screen and (orientation:landscape) and (-webkit-device-pixel-ratio:3)
	{
		.header
		{
			position: absolute;
		}
		
		.content
		{
			perspective:100000px;
		}
		
 		.item
 		{
 			width:100%;
 			height:100%;
 		}
 		
 		.frame
 		{
 			width:100%;
 			height:100%;
 		}
 		
 		.frame-with-title
 		{
 			width:100%;
 			/*height:calc(100vh - 44px - 4px - 30px);*/
 			height:calc(100% - 30px);
 		}
 		
 		.frame-with-two-titles
 		{
 			width:100%;
 			/*height:calc(100vh - 44px - 4px - 30px);*/
 			height:calc(100% - 60px);
 		}
 		
 		/*
 		.flip
		{
			width:100%;
			height:calc(100vh - 44px - 4px);
			transform: rotateY(180deg);			
		}
		*/
  	}
   	
	.picture
	{
		position:absolute;
		margin:auto;
	}
 	
 	.small-room
	{
		position:absolute;
		margin:auto;
		
		height:100%;
		height:auto;
		
		top:-100%;
		bottom:-100%;
  		left:-100%;
  		right:-100%;
  	}
 	
 	.medium-room
	{
		position:absolute;
		margin:auto;
		
  		height:100%;
  		width:auto;
  		
  		top:-100%;
  		bottom:-100%;
  		left:-100%;
  		right:-100%;
 	}		
 	
 	.large-room
	{
		position:absolute;
		margin:auto;
		
		height:100%;
  		height:auto;
  		
  		top:-100%;
  		bottom:-100%;
  		left:-100%;
  		right:-100%;
 	}
 	
 	.picture-in-room
	{
		position:absolute;
		margin:auto;
		
		max-width:95%;
		max-height:calc(95% - 64px);
			
		top:-100%;
  		bottom:-100%;
  		left:-100%;
  		right:-100%;
		
		border: 2px solid gray;
		box-shadow: -2px 2px 8px 0px rgba(0,0,0,0.2);
	}
	
	.picture-in-room-front
	{
		position:absolute;
		margin:auto;
		
		max-width:90%;
		//max-height:calc(95% - 32px);
		max-height:90%;
			
		top:-100%;
  		bottom:-100%;
  		left:-100%;
  		right:-100%;
		
		border: 2px solid gray;
		box-shadow: -2px 2px 8px 0px rgba(0,0,0,0.2);
	}
 	
 	.picture-in-room-portrait
	{
		position:absolute;
		margin:auto;
		
		height:50%;
		width:auto;
		
		/*top:-100%;
  		bottom:-100%;*/
  		top:-100%;
  		bottom:-100%;
  		left:-100%;
  		right:-100%;
		
		border: 2px solid gray;
		box-shadow: -2px 2px 8px 0px rgba(0,0,0,0.2);
	}
	
	.picture-in-room-landscape
	{
		position:absolute;
		margin:auto;
		
		width:50%;
		height:auto%;
		
		/*top:-100%;
  		bottom:-100%;*/
  		top:-100%;
  		bottom:-100%;
  		left:-100%;
  		right:-100%;
		
		border: 2px solid gray;
		box-shadow: -2px 2px 8px 0px rgba(0,0,0,0.2);
	}
	
	.model
	{
		position:absolute;

  		bottom:0px;
  		left:0px;
  		
  		/*border: 2px solid red;*/
 	}
 	
 	.brick-wall
 	{
 		position:absolute;
 		height:100%;
		width:100%; 		
		background-image:url("images/brick-texture.jpg");
 		background-size:50% 50%;
 	}
	
	.info
	{	
		display:block;
		
		max-width:100%;
		height:14px;
				
		//font-family:Arial;
		font-size:14px;
		/*color:black;*/
		color:white;
		
		/*background-color:WhiteSmoke;*/
		/*background-color:white;*/
		/*background-color:lightgray;*/
		background-color:#333333;
		
		padding:6px 4px 8px 4px;
	}
	
	.title
	{
		/*color:black;*/
		color:white;
		
		max-width:100%;	
		
		text-align:center;
		vertical-align: middle;
	
		overflow:hidden;
		text-overflow: ellipsis;
		white-space: nowrap;		
	}
	
	.dimensions
	{
		display:inline-block;
		
		max-width:50%;	
		width:30%;
			
		float:left;
		text-align:left;
		vertical-align: middle;
		
		overflow:hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.price
	{
		display:inline-block;
		
		max-width:50%;
		width:30%;	
			
		float:right;
		text-align:right;
		vertical-align: middle;
		
		overflow:hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.purchase
	{
		color:black;
		display:inline-block;
		width:40%;
		margin-top:-1px;
		
		border-radius: 6px;
		
		text-align:center;
		vertical-align: middle;
		z-index:10;
	}
	
	.prev_page
	{
		display:inline-block;
		margin-left:4px;
		width:25%;
		text-align:center;
		float:left;
		text-decoration:none;
	}
	
	.next_page
	{
		display:inline-block;
		margin-right:4px;
		width:25%;
		text-align:center;
		float:right;
		text-decoration:none;
	}