/* 
	Theme Name: The Mighty Wonton custom The Stella Collective.
	Theme URI: http://themightywonton.com/
	Version: 1.0
	Author: Miss Lee Wong
*/

/************************************************
*	NORMALIZE									*
************************************************/

@import "normalize.css";

/************************************************
*	The Stella Collective						*
************************************************/

html {
	height: 100%;
	overflow: hidden;
}

body {
	color: #000;
	font: 12px/15px "sofia-pro", Helvetica, Arial, Verdana, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	height: 100%; 
	margin: 0;
	padding: 0;
  	overflow: hidden;
  	position: relative;
}

/************************************************
*	Hyperlinks									*
************************************************/

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

a:hover {
	color: #999;
	text-decoration: none;
}

a img, a:hover img {
	border: 0;
}

/************************************************
*	Content 					     		    * 
************************************************/
#container {
	text-align: center;
	opacity: 0;
}

.logo {
	width: 100%;
	position: relative;
	text-align: center;
}

.logo img, .work img {
	
}

.work {
	width: 100%;
	position: absolute; 
	text-align: center;
	margin-top: -15px;
}

#logo {
  position: absolute;
  z-index: 9999;
  margin-top: -15px;
}

.fadeIn {
  -webkit-animation: fade-in 5s ease;
  -moz-animation: fade-in ease-in-out 5s both;
  -ms-animation: fade-in ease-in-out 5s both;
  -o-animation: fade-in ease-in-out 5s both;
  animation: fade-in 5s ease;
  visibility: visible;
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}

.blurb {
	width: 100%;
	height: 100% !important;
	max-height: 285px;
    display: table;
	text-align: center;
	position: fixed;
	bottom: 0px;
	padding: 0;
	z-index: 99999;
}

.centertext {
	display: table-cell;
    vertical-align: middle;
    text-align: center;
	padding-bottom: 0;
}

.blurb p {
	padding: 0 10px 5px;
	width: 440px;
	margin: 0 auto;
}

.emailpos {
	display: none;
	width: 100%;
	text-align: center;
	position: fixed;
	bottom: 40px;
	padding: 10px 0;
	z-index: 999999;
}


/************************************************
*	MEDIA QUERIES						 		* 
************************************************/

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
  
}

@media screen and (max-width: 2400px) {
	.blurb {
		max-height: 350px;
	}
}

@media screen and (max-width: 2200px) {
	.blurb {
		max-height: 375px;
	}
}

@media screen and (max-width: 2200px) {
	.blurb {
		max-height: 410px;
	}
}

@media screen and (max-width: 1800px) {
	.blurb {
		max-height: 430px;
	}
}

@media screen and (max-width: 1600px) {
	.blurb {
		max-height: 470px;
	}
}

@media screen and (max-width: 1400px) {
	.blurb {
		max-height: 490px;
	}
}

@media screen and (max-width: 1200px) {
	body {
		font-size: 10px;
		line-height: 13px;
	}
	
	.blurb {
		max-height: 520px;
	}
}

@media screen and (max-width: 1024px) {
	.blurb {
		max-height: 345px;
	}
}

@media screen and (max-width: 950px) {
	.blurb {
		max-height: 375px;
	}
}

@media screen and (max-width: 850px) {
	.blurb {
		max-height: 410px;
	}
}

@media screen and (max-width: 750px) {
	.blurb {
		max-height: 440px;
	}
}

@media screen and (max-width: 650px) {
	.blurb {
		max-height: 470px;
	}
}

@media screen and (max-width: 500px) {
	
	.blurb {
		display: none;
	}
	
	.emailpos {
		display :block;
	}
	
	.work, #logo {
		margin-top: 0;
	}
}

@media screen and (max-height: 1100px) {
	body {
		font-size: 10px;
		line-height: 13px;
	}
	
	.blurb {
		top: auto;
		bottom: 0;
		max-height: 200px;
	}
}

@media screen and (max-height: 900px) {
	.blurb {
		max-height: 150px;
	}
}

@media screen and (max-height: 1100px) and (min-width: 1880px) {
	body {
		font-size: 10px;
		line-height: 13px;
	}
	
	.blurb { 
		max-height: 310px;
	}
}

@media screen and (max-height: 1000px) {
	body {
		font-size: 10px;
		line-height: 13px;
	}
	
	/*.blurb { 
		max-height: 135px;
	}*/
}

@media screen and (max-height: 1000px) and (min-width: 1850px) {
	.blurb { 
		max-height: 135px;
	}
}

@media screen and (max-height: 850px) and (min-width: 1600px) {
	.blurb {
		display: none;
	}
	
	.emailpos {
		display: block;
	}
}

@media screen and (max-height: 768px) {	
	.emailpos {
		bottom: 30px;
	}
	
	.blurb {
		position: relative;
		max-height: 20%;
		top: 62%;
	}
}

@media screen and (max-height: 768px) and (max-width: 1024px) {	
	.blurb {
		display: none;
	}
	
	.emailpos {
		display: block;
	}
}

@media screen and (max-height: 768px) and (min-width: 1025px) {	
	.blurb {
		position: absolute;
		top: auto;
		max-height: 150px;
	}
}

@media screen and (max-height: 736px) {
	.blurb {
		display: none;
	}
	
	.emailpos {
		display: block;
	}
	
	.work, #logo {
		margin-top: 0;
	}
}

@media screen and (max-height: 360px) {
	.emailpos {
		bottom: 15px;
	}
}