@charset "utf-8";

@font-face { font-family: 'regularbold'; src: url('../webfonts/regular-bold-webfont.eot'); src: url('../webfonts/regular-bold-webfont.eot?#iefix') format('embedded-opentype'),  url('../webfonts/regular-bold-webfont.woff') format('woff'),  url('../webfonts/regular-bold-webfont.ttf') format('truetype'),  url('../webfonts/regular-bold-webfont.svg#regularbold') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'regularlight'; src: url('../webfonts/regular-light-webfont.eot'); src: url('../webfonts/regular-light-webfont.eot?#iefix') format('embedded-opentype'),  url('../webfonts/regular-light-webfont.woff') format('woff'),  url('../webfonts/regular-light-webfont.ttf') format('truetype'),  url('../webfonts/regular-light-webfont.svg#regularlight') format('svg'); font-weight: normal; font-style: normal; }

html { background: url(/images/mnekbg_portrait03.jpg) no-repeat top center fixed #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
body { font-family: 'regularlight'; color:white; background-color:#000000; }

a:focus { outline: 0; }

/*LOGO MECHANIC*/
#mode-a { height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; display: none; }
#mode-b { width:65%; min-width:110px; max-width:320px; z-index:6; top:55%; }
#mode-b img { width:100%; height:auto; }

#buttons, #mode-a, #mode-b { position: absolute; }
#buttons { width:100%; height:13%; max-height:60px; min-height:50px; z-index:5; bottom:10%; }
#buttons img { height:100%; width:auto; cursor:pointer; }
.share-button, .mode-button { width:50%; height:100%; text-align:center; float:left; }

/*PLAYER*/
#footer { position: fixed; bottom: 0; left: 0; width: 100%; padding:0px 0; background-color: transparent; z-index:100; }
.track { color: white; font-family: 'regularlight'; text-transform:uppercase; line-height:1.5em; font-size:0.75em; line-height:2; text-align:center;}
.track a { color:white; }
.track a:hover { color:#8f8f8f; }
.track a:hover .player { background-color:#8f8f8f; }
.track .ss-icon { vertical-align:middle; font-size:22px; margin-top:3px;}
.break { margin:0 30px; }
.break { display:block; }
.player { width: 22px; height: 22px; display:inline-block; vertical-align:middle; margin:0 0 3px 0; cursor:pointer; background-color:white; border-radius:100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  }
.player-play { background-image: url(http://cdn.umg3.net/mnekofficial/images/player.png); background-position: 0px 0px; }
.player-pause { background-image: url(http://cdn.umg3.net/mnekofficial/images/player.png); background-position: 21px 0px; background-color:#8f8f8f; }
.song-logo { width:200px; height:auto; vertical-align:middle; padding-bottom:6px; }

/*SHAKE*/
#shake { position:absolute; top:0; right:0; width:25%; height:auto; }
#pack.dt { display:none; }

/*SHARE DROP DOWN*/
#share-this { height:168px; width:80px; overflow:hidden; text-transform: uppercase; position: fixed; top: -216px; right: 0; z-index: 1000; padding: 12px; background-color:black; }
#share-this .share-title {  color:white; vertical-align:middle; font-size: 1.5em; }
#share-this .ss-icon { margin-left:3px; vertical-align:middle; }
#share-bar { margin-top:12px; text-align:left; }
#tweet, #fb-like, #tumblr, #plusone { margin-bottom:6px; height:24px; overflow:hidden; }

/*SOCIAL BAR*/
#social-bar { top: 3%; left: 3%; z-index:100; position: fixed; }
#social-bar a { color: black; }
#social-bar span { font-size: 1.5em; display:block; }

/*UPSELL*/
#overlay { position:fixed; top:0; right:0; left:0; bottom:0; z-index:900; width:100%; height:100%; background-color:rgba(0,0,0,.9); }
#pack { position:absolute;  text-align:center; color:white; z-index:901; }
#pack img { width:100%; margin:12px auto; height:auto; display:block; }
h1, p { font-size:1.125em; line-height:1.3333333333333; font-weight:normal; text-transform:uppercase; font-family: 'regularlight'; color:white; text-align:center; }
#pack .ss-icon { vertical-align:middle; }
.close-pack { display:block; position:absolute; top:24px; right:24px; font-size:.75em; }

#umg { display:none; }

@media only screen and (max-width : 727px) {
	/*#mode-b img { margin-top:100px; }	*/
}

@media only screen and (orientation:landscape) {
	html { background: url(/images/mnekbg_landscape03.jpg) no-repeat top center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
	/*LOGO MECHANIC*/
	#mode-b { width:30%; min-width:110px; max-width:500px; }
	
}
@media only screen and (min-width : 45.5em) and (orientation:portrait) {
	#mode-b { width:30%; min-width:110px; max-width:300px; margin-top: 60%;}
}

@media only screen 
and (min-width : 45.5em) {
html { background: url(/images/mnekbg_desktop03.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
body { font-family: 'regularlight'; color:white; }


/*SHAKE*/
#shake { position:absolute; top:0; right:0; width:15%; height:auto; }

/*LOGO MECHANIC*/
#buttons { max-height:100px; }
#mode-b { bottom:17%; top:inherit; }

/*PLAYER*/
#footer { padding:0px 0 36px; }
.break { display:inline; }

/*SHARE DROPDOWN*/
#share-this { width:100px; padding: 24px; left: 120px; height:227px; top:-275px; }

/*UPSELL*/
#pack.dt { display:block; }
#pack { position:absolute; top:0; right:24px; left:inherit; bottom:inherit; width:15%; min-width:200px; color:black; background-color:transparent; }
#pack img { width:80%; height:auto; margin:0 auto 12px; display:block; }
h1, p { color:black; }

#pack.mob  { top:inherit; right:inherit; left:inherit; bottom:inherit; width:40%; min-width:250px; color:white; }
.mob h1, .mob p { color:white; } 
.close-pack { display:none; }
.mob .close-pack { display:block; }

/*UMG*/
#cookie-banner { padding:6px 0; }
#cont_button { border-radius:12px; }
#umg { position:fixed; bottom:6px; width:100%; text-align:center; color:#8f8f8f; display:block; }
#umg a { color:#8f8f8f; font-size:0.6875em; line-height:2.181818181818182; text-transform:uppercase;  }
}