*{
			margin: 0 auto;
			padding: 0;
			box-sizing: border-box;
			-webkit-transition: 0.5s;  /*For Safari 3.1 to 6.0 */
    		transition: 0.5s;
		}
		html, body{
			height: 100%;
			min-height: 100%;
		}
		body{
			font: 14px 'Open Sans', sans-serif;
			background-size: cover !important;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: fixed;
		}
		.wrapper{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;			
			text-align: center;
		}
		.content{
			max-width: 350px;
			width: 100%;
			padding: 20px;
			text-align: center;
			z-index: 1;
		}
		.logo h1{
			width: 200px;
			height: 155px;
			background: url(images/francesfm.html) no-repeat center center;
		}
		.player{
			width: 100%;
			height: 100%;
			border-radius: 600px;
			max-width: 340px;
			min-height: 310px;
			position: relative;
			background: rgba(0,0,0, 0.2);
		}
		.clearfix:before,
		.clearfix:after {
		    content: " ";
		    display: table;
		}
		.clearfix:after {
		    clear: both;
		}
		.clearfix {
		    *zoom: 1;
		}
		.status{
			width: 90px;
			margin-top: 20px;
			margin-bottom: 20px;
			padding: 5px 5px 5px 10px;
			border-radius: 100px;
			color: #fff;
			background-color: rgba(0,0,0,0.8);
			z-index: 3;
		}
		.status .light{
			width: 10px;
			height: 10px;
			margin-left: 3px;
			display: inline-block;
			border-radius: 100px;
			background-color: red;
			animation: blinker 1.5s linear infinite;
		}
		@keyframes blinker {  
		    50% { opacity: 0; }
		}
		button{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -100px;
			margin-top: -100px;
			border: 8px solid #fff;
			border-radius: 300px;
			font-size: 80px;
			cursor: pointer !important;
			box-shadow: 0 0 20px rgba(0,0,0,0.2);
			z-index: 999;
			outline: none;
		}
		.play{
			padding-left: 20px;
		}
		.play, .stop{
			background: #febe05;
			color: #fff;
			opacity: 1;
			z-index: 4;
		}
		button:hover{
			background: #6f29ac !important;
			transform: scale(0.9)
		}
		/*.player:hover .pulse, .player:hover .pulseDois{
			animation: none;
		}*/
		button:active{
			background: #6f29ac !important;
			transform: scale(1.1)
		}
		.stop{
			display:none;
		}
		.share{
			margin-top: 10px;
			list-style: none;
		}
		.share li{
			width: 48px;
			height: 48px;
			line-height: 46px;
			font-size: 26px;		
			display: inline-block;
		}
		.share li{
			margin-right: 20px;
		}
		.share li:nth-child(2){
			margin-right: 0;
		}
		.share li:last-child{
			margin-right: 0;
			display: none;
		}
		.share li a{
			display: block;
			color: #fff;
			opacity: 0.7;
			border-radius: 48px;
			border: 1px solid #fff;
		}
		.share a.facebook:hover{
			opacity: 1;
			border: 1px solid rgba(255,255,255, 0);
			background-color:#3b5998;
			color: #fff;
		}
		.share a.instagram:hover{
			opacity: 1;
			border: 1px solid rgba(255,255,255, 0);
			background-color:#ff006f;
			color: #fff;
		}
		.share a.mail:hover{
			opacity: 1;
			border: 1px solid rgba(255,255,255, 0);
			background-color:#5E6A7A;
			color: #fff;
		}
		.email{
			margin-top: 20px;
			margin-bottom: 20px;
			height: 48px;
		}
		.email a{
			width: 90%;
			height: 48px;
			display: block;
			border: 1px solid #fff;
			border-radius: 100px;
			line-height: 48px;
			text-decoration: none;
			color: #fff;
			text-shadow: 0 0 3px rgba(0,0,0, 0.5);
			opacity: 0.7;
			cursor: pointer;
		}
		.email a:hover{
			opacity: 1;
		}
		.content p{
			width: 100%;
			text-align: center;
			color: #fff;
			text-shadow: 0 0 3px rgba(0,0,0, 0.5);
		}
		.color{
			width: 100%;
			height: 100%;
			min-height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: -1;
			mix-blend-mode: multiply;
			-moz-mix-blend-mode: multiply;
			-webkit-mix-blend-mode: multiply;
		}
		.green{
			background: rgb(0,255,126,0.9);
			background: -moz-linear-gradient(top,  rgba(0,255,126,0.9) 0%, rgba(0,127,63,0.9) 100%);
			background: -webkit-linear-gradient(top,  rgba(0,255,126,1) 0%,rgba(0,127,63,1) 100%);
			background: linear-gradient(to bottom,  rgba(0,255,126,1) 0%,rgba(0,127,63,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff7e', endColorstr='#007f3f',GradientType=0);
		}
		.purple{
			background: rgb(138,0,255,0.7);
			background: -moz-linear-gradient(top,  rgba(138,0,255,0.9) 0%, rgba(69,0,128,0.7) 100%);
			background: -webkit-linear-gradient(top,  rgba(138,0,255,0.7) 0%, rgba(69,0,128,0.7) 100%);
			background: linear-gradient(to bottom,  rgba(138,0,255,0.7) 0%, rgba(69,0,128,0.7) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a00ff', endColorstr='#450080',GradientType=0, opacity=70 );
		}
		.pink{
			background: rgba(216,0,255,0.7);
			background: -moz-linear-gradient(top,  rgba(216,0,255,0.7) 0%, rgba(109,0,129,0.7) 100%);
			background: -webkit-linear-gradient(top,  rgba(216,0,255,0.7) 0%,rgba(109,0,129,0.7) 100%);
			background: linear-gradient(to bottom,  rgba(216,0,255,0.7) 0%,rgba(109,0,129,0.7) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6d800ff', endColorstr='#e66d0081',GradientType=0, opacity=70 );
		}
		.blue{
			background: rgba(0,252,255,0.7);
			background: -moz-linear-gradient(top,  rgba(0,252,255,0.7) 0%, rgba(0,127,129,0.7) 100%);
			background: -webkit-linear-gradient(top,  rgba(0,252,255,0.7) 0%,rgba(0,127,129,0.7) 100%);
			background: linear-gradient(to bottom,  rgba(0,252,255,0.7) 0%,rgba(0,127,129,0.7) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e600fcff', endColorstr='#e6007f81',GradientType=0, opacity=70 );
		}
		.yellow{
			background: rgba(255,196,0,0.7);
			background: -moz-linear-gradient(top,  rgba(255,196,0,0.7) 0%, rgba(129,99,0,0.7) 100%);
			background: -webkit-linear-gradient(top,  rgba(255,196,0,0.7) 0%,rgba(129,99,0,0.7) 100%);
			background: linear-gradient(to bottom,  rgba(255,196,0,0.7) 0%,rgba(129,99,0,0.7) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffc400', endColorstr='#e6816300',GradientType=0, opacity=70);
		}
		.stopAnimation{animation: none; transition: 0.5s; display: none;}
		.pulse{
			width: 250px;
			height: 250px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -125px;
			margin-top: -125px;
			border-radius: 250px;
			padding: ;
			background: #fda100;
			box-shadow: 0 0 0 rgba(204,169,44, 1);
  			animation: pulse 1s infinite;
  			z-index: 1;
		}
		.pulseDois{
			width: 300px;
			height: 300px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -150px;
			margin-top: -150px;
			border-radius: 250px;
			padding: ;
			background: #d28500;
			box-shadow: 0 0 0 rgba(210,133,0, 1);
  			animation: pulseDois 2s infinite;
  			z-index: 0;
		}
		@-webkit-keyframes pulse {
		  0% 	{-webkit-box-shadow: 0 0 0 0 rgba(253,161,0, 1);}
		  10% 	{-webkit-box-shadow: 0 0 0 20px rgba(253,161,0, 1);}
		  20%	{-webkit-box-shadow: 0 0 0 0 rgba(253,161,0, 1);}
		  30%	{-webkit-box-shadow: 0 0 0 10px rgba(253,161,0, 1);}
		  40%	{-webkit-box-shadow: 0 0 0 0 rgba(253,161,0, 1);}
		  50%	{-webkit-box-shadow: 0 0 0 0 rgba(253,161,0, 1);}
		  60% 	{-webkit-box-shadow: 0 0 0 0 rgba(253,161,0, 1);}
		  70% 	{-webkit-box-shadow: 0 0 0 20px rgba(253,161,0, 1);}
		  80%	{-webkit-box-shadow: 0 0 0 0 rgba(253,161,0, 1);}
		  90%	{-webkit-box-shadow: 0 0 0 50px rgba(253,161,0, 1);}
		  100%	{-webkit-box-shadow: 0 0 0 0 rgba(253,161,0, 1);}
		}
		@-webkit-keyframes pulseDois {
		  0% 	{-webkit-box-shadow: 0 0 0 0 rgba(210,133,0, 1);}
		  10% 	{-webkit-box-shadow: 0 0 0 20px rgba(210,133,0, 1);}
		  20%	{-webkit-box-shadow: 0 0 0 0 rgba(210,133,0, 1);}
		  30%	{-webkit-box-shadow: 0 0 0 10px rgba(210,133,0, 1);}
		  40%	{-webkit-box-shadow: 0 0 0 0 rgba(210,133,0, 1);}
		  50%	{-webkit-box-shadow: 0 0 0 0 rgba(210,133,0, 1);}
		  60% 	{-webkit-box-shadow: 0 0 0 0 rgba(210,133,0, 1);}
		  70% 	{-webkit-box-shadow: 0 0 0 20px rgba(210,133,0, 1);}
		  80%	{-webkit-box-shadow: 0 0 0 0 rgba(210,133,0, 1);}
		  90%	{-webkit-box-shadow: 0 0 0 50px rgba(210,133,0, 1);}
		  100%	{-webkit-box-shadow: 0 0 0 0 rgba(210,133,0, 1);}
		}

		.preload{
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: fixed;
			background: #ffc400 url('../images/francesfm.png') no-repeat center center;
			z-index: 99999;
			animation: logo 3s infinite;
		}
		.preStatus{
			width: 120px;
			height: 30px;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -60px;
			margin-top: 180px;
			border-radius: 60px;
			background: rgba(0,0,0, 0.5);
			color: #fff;
			text-align: center;
			line-height: 30px;
		}
		.closesLoad{
			position: relative;
			width: 0px;
			height: 0px;
			top: 50px;
			left: 50px;
			text-align: center;
			color: white;
			border-radius: 100%;
			padding: 100%;
			animation: close 1s;
		}
		@-webkit-keyframes logo{
			0% {background-size: none;}
			10% {background-size: 10%}
			20% {background-size: 15%}
			30% {background-size: 10%}
			40% {background-size: 15%}
			50% {background-size: 10%}
			60% {background-size: 15%}
			70% {background-size: 10%}
			80% {background-size: 15%}
			90% {background-size: 10%}
			100% {background-size: none;}
		}
		@-webkit-keyframes close{
			0% {-webkit-transform: scale(100%);
			   -moz-transform: scale(100%);
			    -ms-transform: scale(100%);
			     -o-transform: scale(100%);
			        transform: scale(100%);}
			100% {-webkit-transform: scale(0);
			   -moz-transform: scale(0);
			    -ms-transform: scale(0);
			     -o-transform: scale(0);
			        transform: scale(0);}
		}
		
		@media all and (max-width: 450px) {
			.logo{
				text-align: left;
			}
			.logo img{
				width: 40%;
			}
			.status{
				position: absolute;
				top: 30px;
				right: 20px;
			}
			.share{
				margin-top: 20px;
				margin-bottom: 20px;
			}
			.share li:nth-child(2){
				margin-right: 20px;
			}
			.share li:last-child{
				display: inline-block;
			}
			.email{
				display: none;
			}
			.preload{	
				background-size: 100% !important;
			}
			.player {
			    max-width: 280px;
			    min-height: 280px;
			}
			button{
				width: 150px;
				height: 150px;
				top: 50%;
				left: 50%;
				margin-left: -75px;
				margin-top: -75px;
			}
			.pulse{
				width: 200px;
				height: 200px;
				margin-left: -100px;
				margin-top: -100px;
			}
			.pulseDois{
				width: 250px;
				height: 250px;
				margin-left: -125px;
				margin-top: -125px;
			}
		}