*{

    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(img/logo.png) 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: 0px;

}

.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.twitter:hover{

    opacity: 1;

    border: 1px solid rgba(255,255,255, 0);

    background-color:#1DA1F2;

    color: #fff;

}

.share a.whatsapp:hover{

    opacity: 1;

    border: 1px solid rgba(255,255,255, 0);

    background-color:#00e676;

    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: 0px ;

    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: 0px;

    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;/*<?php echo $dados_stm["logo"]; ?>*/

    background: #ffc400 url('https://player3.apps.radio.br/img/logo.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;

    }

}

img {

  vertical-align: middle;

}

.img-responsive,

.thumbnail > img,

.thumbnail a > img,

.carousel-inner > .item > img,

.carousel-inner > .item > a > img {

  display: block;

  max-width: 100%;

  height: auto;

}

.img-rounded {

  border-radius: 6px;

}

.img-thumbnail {

  display: inline-block;

  max-width: 100%;

  height: auto;

  padding: 4px;

  line-height: 1.42857143;

  background-color: #fff;

  border: 1px solid #ddd;

  border-radius: 4px;

  -webkit-transition: all .2s ease-in-out;

       -o-transition: all .2s ease-in-out;

          transition: all .2s ease-in-out;

}

.img-circle {

  border-radius: 50%;

}