/* phone styles */
@media (max-width: 767px) {
	html.android-max-sizes, html.android-max-sizes body {
		max-width: 320px;
		min-height: 456px !important;
	}
	
	body{
		min-height: 416px;
	}
	
	#container {
		min-width: inherit;
		min-height: inherit;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		overflow-y: visible;
	}
	
	#videoContainer {
		height: auto;
		bottom: 0;
	}

	html .video{
		min-width: inherit;
	}
	
	a.btn-play.tiny:hover, a.btn-play.invert:hover, a.btn-play.close:hover, a.btn-play:hover, a.btn-play.small:hover, a.btn-play.medium:hover, a.btn-play.large:hover, a#showSentences:hover span, a.btn-play.wide:hover span, a.nav-control:hover, .nav-control-container:hover a.nav-control, #share ul.sidepanel>li:hover a.btn-play{
		-webkit-animation:none;
		-moz-animation: none;
		animation:none;
	}
	
	.itemSelector-container{
		position: absolute;
		top: 50px;
		bottom: 50px;
		left: 10px;
		margin-left: auto;
		width: 100%;
		padding: 0;
		min-height: inherit;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}
	
	#container-inner {
		min-height: inherit;
		height: 100%;
		width: 100%;
		min-width: inherit;
		margin: 0 !important;
		position: absolute;
	}

	#mobileheader{
		position: absolute;
		display: block;
		min-width: 275px;
		min-height: 73px;
		background: url(../img/mobile/mobnav.png) no-repeat;
		background-size: 275px auto;
		left:22.5px;
		right:22.5px;
		top:22.5px;
		width: auto;
		z-index: 50;
	}
	#pumaHotspot{
		display: inline-block;
		background-color: transparent;
		position: absolute;
		top: 0;
		bottom: 20px;
		left: 0;
		width: 85px;	
	}
	.drawer{
		width: 56px;
		position: absolute;
		top:13px;
		right:1px;
		height: 36px;
		background-size: 111px 36px !important;
		background-position-y: 0;
		background: url(../img/mobile/menu_nav.png) no-repeat;
	}
	.drawer.drawer-closed{
		background-position-x: 0;
	}
	.drawer.drawer-open{
		background-position-x: -56px;
	}
	.drawer.disable{
		opacity: 0.2;
	}
	
	#mobileMenuSelector .mobileMenu-inner-thin{
		padding: 0 30px;
	}
	
	.mobileMenu-option-big {
		padding-top: 20px;
		text-align: center;
	}
	.mobileMenu-option-big:first-child {
		padding-top: 0;
	}
	.mobileMenu-option-big a{
		font-family: "adobe-caslon-pro",serif;
		font-weight: 600;
		color: white;
		font-size: 24px;
		line-height: 24px;
		text-decoration: none;
		text-transform: lowercase;
	}
	
	.mobileMenu-option-big a > span {
		font-style: italic;
	}

	.mobile-menu-slide {
		position: absolute;
		bottom: 0;
		top: 0;
		width: 275px;
	}
	
	a.mobile-back, .copyright{
		color: white;
		text-transform: uppercase;
		text-align: left;
		font-size: 12px;
		font-family: arial;
		font-weight: bold;
		text-decoration: none;
	}
	a.mobile-back span{
		display: inline-block;
		width: 7px;
		height: 10px;
		background: url(../img/mobile/bg_nav_left_sml.png) no-repeat;
		background-size: 7px 10px;
		margin-right: 10px;
	}
	
	
	.copyright {
		position: absolute;
		bottom: 0;
	}
	
	ul.stacked{
		border-top: 1px dotted white;
		width: auto;
		top: auto;
		color: white;
		position: relative;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	ul.stacked.main{
		position: absolute;
		left:0;
		right: 0;
		bottom: 2px;
	}
	ul.stacked li{
		font-family: sans-serif, arial;
		text-transform: uppercase;
		font-size: 10px;
		line-height: 30px;
		height: 30px;
		border-bottom: 1px dotted white;
		position: relative;
		font-weight: 600;
		margin: 0;
	}
	ul.stacked li a.btn-play {
		background: url(../img/mobile/bg_nav_right_sml.png) no-repeat;
		background-size: 7px auto;
		right: 10px;
		width: 7px;
		height: 11px;
		position: absolute;
		top: 11px;
	}
	ul.stacked li > span {
		position: absolute;
		margin-top: auto;
		padding-right: 30px;
		letter-spacing: -0.5px;
		top: auto;
		display: inline-block;
	}
	ul.stacked.legals,ul.stacked.languages{
		margin-top: 30px;
	}
	ul.stacked.languages{
		/* overflow-y: scroll; */
	}
	
	#intro, #content, #share, #email {
		display: block;
		top: 100px;
		left: 22.5px;
		right: 22.5px;
		bottom: 50px;
		min-width: 0;
		min-height: 0;
		height:auto;
		width: auto;
	}
	#intro{
		bottom:0px;
	}
	#content{
		min-height: 245px;
	}
	
	
	#content h1 {
		width: 275px;
	}
	
	#content h1>span {
		border-bottom: rgb(239,4,3) 4px solid;
	}
	
	#introWrapper {
		padding-left: 0;
	}
	#introWrapper img {
		margin-top: 40px;
		width: 275px;
		height: auto;
	}
	#introWrapper .intro.intro-right {
		width: auto;
		margin:0 auto;
	}
	#introWrapper .intro.intro-right h1 {
		font-size: 28px;
	}
	
	#intro > h2 {
		font-size: 30px;
	}
	
	a.btn-play.tiny {
		width: 45px;
		height: 45px;
		background: url(../img/mobile/lg_play.png) no-repeat;
		background-size: 45px auto;
	}
	
	
	#navMenu {
		display: none;
		height: auto;
		bottom: 0;
	}
	.nav-inner {
		left: 0;
		width: auto;
		padding: 0 60px;
		position: relative;
		height: 58px;
		margin-left: auto;
	}
	.inner-wrap {
		width: 45%;
		float: none;
		height: auto;
	}

	.inner-wrap:first-child {
		display: none;
	}
	a.nav-control:hover {
		background: none;
	}

	a.nav-control{
		background: none;	
		line-height: normal;
		font-size: 0px;
	}
	
	a.nav-control.left {
		right: 57px;
		left: auto;
	}
	a.nav-control.left span{
		background: url(../img/mobile/bg_nav_left.png) center center no-repeat;
		background-size: 13px 18px;
	}
	a.nav-control.right span{
		background: url(../img/mobile/bg_nav_right.png) center center no-repeat;
		background-size: 13px 18px;
	}

	a#showSentences {
		position: relative;
		padding-top: 10px;
		line-height: 20px;
		font-size: 20px;
	}
	a#showSentences span, a#showSentences:hover span, a#showSentences:active span, a#showSentences:visited span {
		top: 2px;
		background: url(../img/mobile/bg_nav_down.png) no-repeat center center;
		background-size: 16px auto;
		width: 52px;
		height: 52px;
		left: -50px;
	}


	#itemSelector.mobilemenu-selector {
		background-color: rgba(0,0,0,0.8) !important;
	}
	
	.itemSelector-container {
		top: 100px;
		bottom: 22.5px;
		left:22.5px;
		right:22.5px;
		width:auto;
	}
	html.no-overflowscrolling .itemSelector-container{ /* !no-overflowscrolling{*/
		overflow-y: visible;
	}
	
	#itemSelector{
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch; 
	}
	html.no-overflowscrolling #itemSelector{ /* !no-overflowscrolling{*/
		overflow-y: visible;
	}
	
	#itemSelector.sentence-selector li {
		padding-right: 35px;
	}
	
	#itemSelector.sentence-selector li div.arrow {
		background: url(../img/mobile/bg_nav_right_red.png) no-repeat center center;
		background-size: 7px 10px;
		height: 100%;
		padding: 0 8px;
	}
	
	
	#itemSelector.sentence-selector li.active {
		background: url(../img/bg_sentence.png) repeat-y left top;
		color: rgb(239,4,3);
		padding-left: 10px;
	}
	#itemSelector.sentence-selector li.active div.arrow{
		display:block;
	}
	
	#itemSelector.sentence-selector li.active span{
		color:black;
	}
	#itemSelector.word-selector li.word.active{
		font-style: italic;
		color: black;
	}

	
	.itemSelector-container.words p.fragment-start, .itemSelector-container.words p.fragment-end {
		display: none;
	}
	
	#itemSelector.word-selector ul {
		margin-bottom: 0;
	}

	#itemSelector.word-selector li {
		float: none;
		text-align: center;
		font-size: 35px;
		height: auto;
		margin-top: 15px;
	}
	a.btn-play, a.btn-play.wide span {
		width: 45px;
		height: 45px;
		line-height: inherit;
	}
	#share.with-nav, #email.with-nav {
		bottom: 0 !important;
	}
	#share ul{
		width: auto;
		float: none;
		z-index: 20;
	}
	#share ul li {
		font-size: 50px;
		line-height: 30px;
	}
	#share ul.sidepanel {
		float: none;
		width: inherit;
		top: inherit;
	}
	.mobile-title{
		display: inherit;
		font-family: "adobe-caslon-pro",serif;
		font-weight: 600;
		color: white;
		font-size: 24px;
		line-height: 24px;
	}
	
	#share ul.sidepanel li > span {
		display: inline-block;
		height: 24px;
	}
	#share ul.sidepanel li > span.double {
		height: auto;
		margin-top: auto;
	}
	
	#share div.share-inner ul:first-child li a.btn-play, #share div.share-inner ul:first-child li a.btn-play.wide {
		display: inline-block;
	}
	#share div.share-inner ul.sidepanel:nth-child(2) {
		margin-top: 10px;
		overflow-y: hidden;
		z-index: 22;
	}
	
	#share div.share-inner ul.sidepanel:nth-child(2) li {
		border-bottom: none;
		width: 50%;
		float: left;
		height: 40px;
	}
	#share div.share-inner ul.sidepanel:nth-child(2) li > span{
		position: relative;
		margin-top: auto;
		top: auto;
		line-height: 28px;
	}
	#share div.share-inner ul.sidepanel:nth-child(2) li a.btn-play{
		right: auto;
		top:auto;
	}
	
	#share div.share-inner ul.sidepanel:nth-child(3){
		clear: both;
		border-top: 1px dotted white;
		position: absolute;
		bottom: 13px;
		left: 0;
		right: 0;
	}
	
	#share div.share-inner ul.sidepanel:nth-child(3) li{
		font-family: sans-serif, arial;
		text-transform: uppercase;
		font-size: 10px;
		line-height: 35px;
		height: 35px;
	}
	
	#share div.share-inner ul.sidepanel:nth-child(3) li > span{
		position: absolute;
		margin-top: auto;
		padding-right: 30px;
		letter-spacing: -0.5px;
		top:auto;
	}
	i.breaker{
		display: inline;
		line-height: normal;
	}
	
	
	#email {
		font-size: 18px;
		bottom:0 !important;
	}
	#email .email-inner {
		width: auto;
	}
	#email_form, #email_sent {
		width: auto;
		min-height: inherit;
		height: auto;
		top: auto;
		bottom: auto;
		position: relative;
	}
	#email input, #email textarea {
		display: block;
		padding:0;
		min-width: 275px;
	}
	#email textarea {
		width: auto;
		height: 50px;
		max-height: 50px;
		font-size: inherit;
	}
	#email p {
		width: auto;
	}
	#email h2 {
		text-align: right;
		line-height: 54px;
		width: 100%;
		margin-left: 0;
		position: relative;
		display: inline-block;
		margin-bottom: 33px;
	}
	#email h2.release{
		display: inline-block;
	}
	#email_sent{
		min-width: 275px;
	}
	#email_sent h1 {
		font-size: 62px;
		line-height: 62px !important;
	}
	#email_sent h2 {
		margin: 0;
		bottom:-54px;
	}
	#email_sent p {
		margin-top: 0;
		font-size: 22px;
	}
	
	#share div.share-inner ul.sidepanel:nth-child(2) li a.btn-play{
		width: 26px;
		height: 25px;
	}
	#share div.share-inner ul.sidepanel:nth-child(3) li a.btn-play {
		width:7px;
		height: 11px;
	}
	
	#email a#emailClose span {
		background: url(../img/mobile/lg_x.png) no-repeat;
		background-size: 12px 11px;
	}
	#email h2 a {
		margin-left: 10px;
	}

	a.btn-play.close {
		width: 45px;
		height: 45px;
		background: url(../img/mobile/lg_close.png) no-repeat;
		background-size: 45px auto;
	}
	
	
	a.btn-play.wide span.btn-twitter, a.btn-play.wide span.btn-twitter:hover, a.btn-play.wide span.btn-twitter:visited, a.btn-play.wide span.btn-twitter:active {
		background: url(../img/mobile/lg_twitter.png) no-repeat;
		background-size: 45px auto;
	}
	a.btn-play.wide span.btn-facebook, a.btn-play.wide span.btn-facebook:hover, a.btn-play.wide span.btn-facebook:visited, a.btn-play.wide span.btn-facebook:active {
		background: url(../img/mobile/lg_facebook.png) no-repeat;
		background-size: 45px auto;
	}
	a.btn-play.wide span.btn-email, a.btn-play.wide span.btn-email:hover, a.btn-play.wide span.btn-email:visited, a.btn-play.wide span.btn-email:active {
		background: url(../img/mobile/lg_email.png) no-repeat;
		background-size: 45px auto;
	}
	a.btn-play.btn-replay, a.btn-play.btn-replay:hover, a.btn-play.btn-replay:visited, a.btn-play.btn-replay:active {
		background: url(../img/mobile/sml_replay.png) no-repeat;
		background-size: 26px auto;
		padding-left: 10px;
		background-position-x: 10px;
	}
	
	a.btn-play.btn-new, a.btn-play.btn-new:hover, a.btn-play.btn-new:visited, a.btn-play.btn-new:active {
		background: url(../img/mobile/sml_play.png) no-repeat;
		background-size: 26px auto;
		padding-left: 10px;
		background-position-x: 10px;
	}
	#share div.share-inner ul.sidepanel:nth-child(3) li a.btn-play{
		background: url(../img/mobile/bg_nav_right_sml.png) no-repeat;
		background-size: 7px auto;
		right: 10px;
	}
	
	a.btn-play.invert {
		width: 45px;
		height: 45px;
		background: url(../img/mobile/lg_play.png) no-repeat;
		background-size: 45px auto;
	}
	
	
	#content h1 span span.downarrow{
		width: 7px;
		background:url(../img/icon_blankreveal.png) -7px center no-repeat;
		background-size: 14px;
		margin-left: 10px;
	}
	
	.fancybox-close{
		top: -10px !important;
		right: -10px !important;
	}
	
}


@media (min-device-width: 560px) and (max-device-width: 1136px){
    /* iPhone 5 only */
    body{
    
    }
}

@media (max-width: 767px) and (orientation: landscape) {
	.fancybox-close{
		width:18px !important;
		height:18px !important;
		background-size:125% !important;
	}
}

@media (min-device-width: 560px) and (max-device-width: 1136px) and (orientation: landscape){
    .fancybox-close{
    	width:18px !important;
    	height:18px !important;
    	background-size:125% !important;
	}
}