/*  
			Project specific CSS RULES | Can be refreshed on project turnover
			====================================================================================
*/

/* 
			------------------------------------------------------------------------------------
			media query independent css rules
				
				Dynamic styles
				
			------------------------------------------------------------------------------------		
*/

/* Dynamic background styles Level 4-03 */	

.receiver-home-h {
	color:#FBF8EF;
	background:#232426 url("../img/_backgrounds/studio3_table.webp");
	background-repeat: no-repeat;
  background-size: cover}	
  
.receiver-home-v {
	color:#d1dadf;
	background:#232426 url("../img/_backgrounds/studio3_table_v.webp");
	background-repeat: no-repeat;
  background-size: cover}
  
.receiver-holder-home {
	background:#232426}

.receiver-toc {
	color:#d1dadf;
	background:#090809 url("../img/_backgrounds/smove_bg1.jpg");
	background-repeat: no-repeat;
  background-size: cover} 
  
.receiver-holder-toc {
	background:#090809} 

.receiver-darkgrey {
	color:#d1dadf;
	background:#5d6163}
	
.receiver-holder-darkgrey	{
	background:#5d6163}

.receiver-poh {
	color:#d1dadf;
	background:#232426 url("../img/_backgrounds/large_bg_poh5.jpg");
	background-repeat: no-repeat;
  background-size: cover}	
	
.receiver-holder-poh {
	background:#232426}	
	
.receiver-pm {
	color:#d1dadf;
	background:#232426 url("../img/_backgrounds/db_pm_bg.jpg");
	background-repeat: no-repeat;
  background-size: cover}	

.receiver-holder-pm {
	background:#232426}	
	
.receiver-melter {
	color:#313131;
	background:#d1d2d4 url("../img/_backgrounds/melter_bg5.jpg");
	background-size: cover}	

.receiver-holder-melter {
	background:#d1d2d4}	
	
.receiver-glass {
	color:white;
	background:#2b2b2b url("../img/_backgrounds/glass_bg1.jpg");
	background-size: cover}	

.receiver-holder-glass {
	background:#2b2b2b}	
	
.receiver-object {
	color:white;
	background:#0c0f10 url("../img/_backgrounds/object_bg1.jpg");
	background-size: cover}	

.receiver-holder-object {
	background:#0c0f10}	
	
.receiver-smove {
	color:#d1dadf;
	background:#090809 url("../img/_backgrounds/smove_bg2.jpg");
	background-repeat: no-repeat;
  background-size: cover}	
	
.receiver-holder-smove {
	background:#090809}	
	
.receiver-soup {
	color:#313131;
	background:#f9f9f9 url("../img/_backgrounds/soup_bg2.jpg");
	background-repeat: no-repeat;
  background-size: cover}	
	
.receiver-holder-soup {
	background:#f9f9f9}	
	
.receiver-moons {
	color:#d1dadf;
	background:#404040 url("../img/_backgrounds/moon.jpg");
	background-repeat: no-repeat;
  background-size: cover}	
	
.receiver-holder-moons {
	background:#404040}		
	

/* 
			------------------------------------------------------------------------------------
			media query dependent css rules
				
			------------------------------------------------------------------------------------
*/

.padBot-vh {
	padding:2vh 1.5vw 3vh}

.b-shadow1 {
	box-shadow: 0px 0px 20px 3px #151618}
	
.b-shadow2 {
	box-shadow: 0px 0px 15px 3px #525253}	
	
.lh16 {
	line-height:1.6}	
	

/* - - - - - beeswax phase 1, 2, 3 */
.panel10c {
	margin-top:0.8vh;
	width:10%;
	text-align:center}	
	
.panel60c {
	width:60%}

.panel10c img, .panel10c video, .panel60c video {
	cursor:pointer}

.panel60c img, .panel60c video {
	box-shadow: 0px 0px 20px 3px #151618}		
	

/* - - - - - poetry machine, beeswax melter */	
.tilt-left {
	cursor:pointer;
	opacity:1;
	-ms-transform: rotate(-17deg); /* IE 9 */
  -webkit-transform: rotate(-17deg); /* Safari 3-8 */
  transform: rotate(-17deg);
  -webkit-transition:transform 0.5s ease, opacity 0.5s;
  transition:transform 0.5s ease, opacity 0.5s}	
  
.tilt-right {
	opacity:0.4;
	-ms-transform: rotate(17deg);
  -webkit-transform: rotate(17deg);
  transform: rotate(17deg);
  -webkit-transition:transform 0.5s ease, opacity 0.5s;
  transition:transform 0.5s ease, opacity 0.5s}  
  
.padRotate {
	padding:1.5vw 1.5vw}  
	
.panelpm58 {
	width:58%}	
	
.panelpm11 {
	width:11%}
	
.panelpm31 {
	width:31%}
	
.padTextbox {
	padding:0.5vh 2vw}
	
/* - - - - - Glass Gestalt */
.vimtypo {
	color:#bdbdbd; 
	font-size:66%}
	
.vimhead, #vimback {
	background:rgba(189, 189, 189, 0.2);
	border-radius:6px 6px 0 0;
	cursor:pointer;
	margin:0.425vh 0.2vw;
	padding:3%}
	
.vimbox {
	padding:0.5vh 15%}	
	
.vimpic {
	cursor:pointer}	
	
/* - - - - - Objects */	
.peepee {
	position:relative;
	text-align:center}

.peephole {
	border-radius:6px;
	overflow:hidden;
	position:relative;
	width:100%}
	
.peeptext {
	padding:2vh 0;
	text-align:center}	
	
.peepbox10c {
	cursor:pointer;
	float:left;
	width:10%;}	
	
.peepbox60c {
	float:left;
	width:60%}
	
.add {
	opacity:0.8}	
	
/* - - - - - info */	
.mailink {
	color:#ce8f3e}
.mailink:hover {
	color:#c07d3b}	

/* --------------------------------------------------------------------- special panels */	

#toc-thumbs-container {}

.toc-thumb-box {
	float:left;
	height:200px;
	padding:0 10px;
	text-align:center;
	width:16.6667%;
}	

.toc-thumb-box img {
	/* display:block */}

/* -------------------------------------------------------- MEDIA QUERIES / BREAKPOINTS */

/* small */
@media screen and (max-width: 559px) {
	/* - - - - - TOC */
	.toc-thumb-box {
		width:50%;
		height:155px}
	
	/* - - - - - beeswax phase 1, 2, 3 */
	.panel10c {
		margin-top:0.1vw;
		width:33.3%}	
	.panel60c {
		width:100%}	
	
	/* - - - - - poetry machine, beeswax melter */	
	.tilt-left, .tilt-right {
		-ms-transform: none;
  	-webkit-transform: none;
		transform: none}
	.padRotate {
		padding:0.6vw calc(0.4vw + 12px)}	
	.panelpm58 {
		width:100%}	
	.panelpm11 {
		width:100%}
	.panelpm31 {
		width:100%}
	.break-s25 {
		width:25%}
	
	/* - - - - - Glass Gestalt */
	.vimtypo {
		font-size:90%}
		
	/* - - - - - objects */
	.peepbox10c {
		width:33.3%}
	.peepbox60c {
		width:100%}	
}

/* medium */
@media screen and (min-width: 560px) and (max-width: 823px) {
	/* - - - - - TOC */
	.toc-thumb-box {
		width:33.33%;
		height:160px}
	
	/* - - - - - beeswax phase 1, 2, 3 */
	.panel10c {
		width:20%}	
	.panel60c {
		width:100%}
	
	/* - - - - - poetry machine, beeswax melter */	
	.padRotate {
		padding:calc(0.8vh + 4px) calc(0.8vw + 12px) }
	.panelpm58 {
		width:82%}	
	.panelpm11 {
		width:18%}
	.panelpm31 {
		width:100%}	
	.padTextbox {
		padding:2vh 2vw}
	
	/* - - - - - Glass Gestalt */
	.vimtypo {
		font-size:100%}
		
	/* - - - - - objects */
	.peepbox10c {
		width:20%}
	.peepbox60c {
		width:100%}					
}

/* large */
@media screen and (min-width: 824px) and (max-width: 1139px) {
	/* - - - - - TOC */
	.toc-thumb-box {
		width:25%;
		height:175px}
	
	/* - - - - - Glass Gestalt */
	.vimtypo {
		font-size:75%}
}		

/* wide */
@media screen and (min-width: 1140px) {
	
}