/* #Media Queries
================================================== */
	
	/* iPad Portrait/Browser */
	@media only screen and (min-width: 768px) and (max-width: 991px) {}
	
	/* Mobile/Browser */
	@media only screen and (max-width: 767px) {}
	
	/* Mobile Landscape/Browser */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}
	
	/* Anything smaller than standard 960 */
	@media only screen and (max-width: 959px) {}
	
	/* iPad Portrait Only */
	@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) {}
	
	/* Mobile Only */
	@media only screen and (max-width: 767px) and (max-device-width: 1000px) {}
	
	/* Mobile Landscape Only */
	@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) {}




/* #Basic Styles
================================================== */
body { 
    background: #000;
	height:auto;
 }



/* BOX */

#case {	
	position: fixed;
	top:5px;
	left:5px;

	min-height: 300px;	
	max-height: auto;
	min-width: 150px;
	width: -moz-calc(100% - 10px);
	/* WebKit */
	width: -webkit-calc(100% - 10px);
	/* Opera */
	width: -o-calc(100% - 10px);
	/* Standard */
	width: calc(100% - 10px);	

	height: -moz-calc(100% - 10px);
	/* WebKit */
	height: -webkit-calc(100% -  10px);
	/* Opera */
	height: -o-calc(100% -  10px);
	/* Standard */
	height: calc(100% -  10px);	

	border-color: #666666;
	border-style: solid;
	border-width: 2px;
	border-bottom-right: 2px #666666;
	/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ 

	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#336666), to(#232723)); 	
	/* Safari 5.1+, Chrome 10+ 		*/ 
	background: -webkit-radial-gradient(circle, #336666, #232723); 	
	/* Firefox 3.6+ */ 
	background: -moz-radial-gradient(circle, #336666, #232723);
 /* IE 10 */
	background: radial-gradient(circle, #336666, #232723);
	z-index: 1;
}


#caseWindow{


	width: -moz-calc(100% - 50px);
	/* WebKit */
	width: -webkit-calc(100% - 50px);
	/* Opera */
	width: -o-calc(100% - 50px);
	/* Standard */
	width: calc(100% - 50px);

	/* Firefox */
	height: -moz-calc(100% - 200px);
	/* WebKit */
	height: -webkit-calc(100% - 200px);
	/* Opera */
	height: -o-calc(100% - 200px);
	/* Standard */
	height: calc(100% - 200px);	

	border-color: #505050;
	border-style: solid;
	border-width: 2px;
	background: #11100e;
		
	-moz-border-radius: 15px;
	border-radius: 15px;
	
	position: absolute;
	top: 100px;
	left: 25px;
	left: 50%;
	transform: translateX(-50%) translateY(0%);'

	box-shadow: inset 6px 6px 6px #000, inset -1px -2px 2px #5b5853;
	z-index:2;
}

.window{
	position: relative;
	top: 7.5px;
	left:-moz-calc(25% + 12.5px);
	left:-webkit-calc(25% + 12.5px);
	left:-o-calc(25% + 12.5px);
	left: calc(25% + 12.5px);


	display: block;
	max-width: -moz-calc(100% - 600px);
	max-width: -webkit-calc(100% - 600px);
	max-width: -o-calc(100% - 600px);
	max-width: calc(100% - 600px);  

	width: -moz-calc(50% + 25px);
	width: -webkit-calc(50% + 25px);
	width: -o-calc(50% + 25px);
	width: calc(50% + 25px);  

	min-width: 200px;
	margin-left:0px;     

	height:auto;
	margin-bottom: 500px;

}
	@media only screen and (max-height: 1200px) and (min-width: 400px) and (max-width: 1200px) {
	.window{
		position: relative;
		top: 7.5px;

		display: block;
		max-width: -moz-calc(100% - 225px);
		max-width: -webkit-calc(100% - 225px);
		max-width: -o-calc(100% - 225px);
		max-width: calc(100% - 225px);  

		left: 125px;
		width: -moz-calc(50% + 50px);
		width: -webkit-calc(50% + 50px);
		width: -o-calc(50% + 50px);
		width: calc(50% + 50px);  

		margin-left: 50px;
		min-width: 200px;   

		height:auto;
		margin-bottom: 500px;

	}



	}	


.toggleToolbar {
display: block;	
}



	/* Mobile Only */
	@media only screen and (max-height: 600px) and (max-width: 400px) {





	#caseWindow {
	/* Firefox */
	height: -moz-calc(100% - 125px);
	/* WebKit */
	height: -webkit-calc(100% - 125px);
	/* Opera */
	height: -o-calc(100% - 125px);
	/* Standard */
	height: calc(100% - 125px);	

	width: -moz-calc(100% - 25px);
	/* WebKit */
	width: -webkit-calc(100% - 25px);
	/* Opera */
	width: -o-calc(100% - 25px);
	/* Standard */
	width: calc(100% - 25px);


	}


.window{
	position: relative;
	margin-left:0px;
	margin-right: 10px; 
	top: 15px;
	left:0px;


	display: block;
	width: -moz-calc(100% - 50px);
	width: -webkit-calc(100% - 50px);
	width: -o-calc(100% - 50px);
	width: calc(100% - 50px);     

}


.toggleToolbar {
display: none;	
}

}	




#underConstruction{
	position: fixed;
	bottom: -100px;
	width: 50%;
	height:100%;
	margin-left:25%;
	background:  url(images/underconstruction2.png) no-repeat 0px 0px;
	z-index:999999;


}


#Paratoniclogo{
	position: absolute;
	top: 0px;
	width: 100%;
	height:60px;
	margin-left:0;
	left: 0px;
	background:  url(images/paralogo.png) no-repeat 0px 0px;
	background-size:100%;
	z-index:9999;
}

#howtouseparatonic{
	position: relative;
	top: 0px;
	display: inline-block;
	width: 100%;
	height: 1000px;   


	background: url(images/howtouseparatonic.png) no-repeat 0px 0px;
	background-size:100%;
	z-index:998;
}