.neuland-radio-player{

    margin-top: 30px;

    margin-bottom: 30px;

}

.logo-rn{

    height: 200px !important;

    margin-top: 50px;

    margin-bottom: 50px;

    z-index: 5;

}

.rn-body{

    z-index: 5;

}

.rn-title{

    color: #ededed !important;

    font-weight: 600;

}

.rn-line{

	border: 2px solid #a3bd31;

    border-radius: 2px;

	width: 40px;

	outline: none;

 	margin-bottom: 12px !important;

	margin-top: 8px !important;

 	display: inline-block !important;

	visibility: visible !important;

	box-sizing: border-box;

}

.rn-show-id{

    color: #ffffff !important;

    font-weight: 600;

	font-size: 1.85rem;

    letter-spacing: 0.04em;

}

.rn-time{

    color: #adb5bd !important;

     font-weight: 600;

    margin-top: 0.5rem;

    margin-bottom: 0.0rem;

}

.rn-host{

    color: #adb5bd !important;

     font-weight: 600;

    margin-top: 0.0rem;

    margin-bottom: 0.4rem;

}

.rn-button-play{

    font-size: 2.0em;

    border: 3px solid #bbb;

    width: 75px;

    height: 75px;

    border-radius: 50%;

    text-align: center;

    line-height: 67px;

    /*padding-left: 8px;*/

    vertical-align: middle;

    transition: 0.3s;

    margin-left: auto;

    margin-right: auto;

    margin-top: 30px;

    margin-bottom: 30px;

}

.rn-button-play:hover{

    border: 3px solid #a3bd31;

    color: #fff;

    background-color: #a3bd31;

}

.google{

    height: 65px !important;

    float: right;

}

.radio-volume {

    /*background: #fff;*/

    padding: 0px 0px;

    /*padding-left: 10px;*/

    /*height: 40px;*/

    width: 100%;

}

.radio-volume .button-sound {

    font-size: 2em;

    color: #ddd;

    width: 50px;

    padding-right: 15px;

}

.radio-volume .button-sound:hover {

    color: #bbb;

}

.radio-volume input[type=range] {

    width: 260px;

    height: 5px;

    margin: 0px 0px;

    /*display: inline;*/

    -webkit-appearance: none;

    border-radius: 8px;

    border: 1px solid #ddd;

    background-color: #fff;

    margin-bottom: 12px;;

    vertical-align: middle;

}

.radio-volume input[type=range]::-webkit-slider-thumb {

    -webkit-appearance: none;

    background-color: #bbb;

    border: 1px solid #bbb;

    width: 20px;

    height: 20px;

    border-radius: 10px;

    cursor: pointer;

}

.radio-volume input[type=range]::-moz-range-track {

    border-radius: 8px;

    width: 260px;

    height: 5px;

    border: 1px solid #bbb;

    background-color: #bbb;

}

.radio-volume input[type=range]::-moz-range-thumb {

    background: #fff;

    border: 1px solid #ccc;

    width: 15px;

    height: 15px;

    border-radius: 9px;

    cursor: pointer;

}

.radio-volume input[type=range]::-ms-track {

    width: 164px;

    height: 5px;

    cursor: pointer;

    background: transparent;

    border-color: transparent;

    color: transparent;

}

.radio-volume input[type=range]:focus {

    outline: 0;

}

.button {

    cursor: pointer;

}



/*Wave bars*/

.wave-bars .wave {

    margin-top: 125px;

    transform: translateY(-50%);

    height: 3px;

    width: 4px;

    background: rgba(255, 255, 255, 0.2);

    float: left;

    margin-right: 3px;

    animation-delay: 2s;

    border-radius: 5px;

}

.wave-bars{

    position:absolute;

    left: 0px;

    right: 0px;

    width: 100%;

    height: 300px;

    z-index: 1;

}

.wave-bars .sound-wave {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

.wave-bars .sound-wave .bar {

    animation-name: wave-lg;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

    animation-direction: alternate;

    background: #fff;

    margin: 0 9px;

    height: 10px;

    width: 5px;

    border-radius: 3px;

    z-index: 1;

}

.wave-bars .bar:nth-child(-n+7), .wave-bars .bar:nth-last-child(-n+7) {

    animation-name: wave-md;

}

.wave-bars .bar:nth-child(-n+3), .wave-bars .bar:nth-last-child(-n+3) {

    animation-name: wave-sm;

}

.sound-wave .bar.no-animation {

    animation: stopwaves 1s linear;

    animation-iteration-count: 1;

    animation-fill-mode:forwards;

}

.bar{

    max-height: 70px;

}

@keyframes wave-sm {

    0% {

        opacity: 0.05;

        height: 10px;

    }

    100% {

        opacity: 0.1;

        height: 25px;

    }

}

@keyframes wave-md {

    0% {

        opacity: 0.05;

        height: 15px;

    }

    100% {

        opacity: 0.1;

        height: 50px;

    }

}

@keyframes wave-lg {

    0% {

        opacity: 0.05;

        height: 15px;

    }

    100% {

        opacity: 0.10;

        height: 70px;

    }

}

@keyframes stopwaves {

    0% {

        opacity: 0.10;

    }

    100% { opacity: 0.0; height: 4px; }

}





@media only screen and (min-width: 768px) {

    .logo-rn{

        float: right !important;

        margin-right: 40px !important;

    }

}

@media only screen and (max-width: 767px) {

    .logo-rn{

        display: block !important;

        margin-left: auto !important;

        margin-right: auto !important;

    }

    .wave-bars .sound-wave .bar {

        background: #fff;

        margin: 0 5px;

        height: 10px;

        width: 4px;

        border-radius: 2px;

    }

    .rn-body{

        text-align: center;

        width: 100%

    }

    .google{

        margin-top: 25px;

        height: 70px;

        float: inherit;

    }

    .radio-volume{

        text-align: center

    }

}