@charset "UTF-8";
.hide{
	display:none;
}

#mainarea{
	text-align:center;
	position:relative;
	overflow:hidden;
}
#mainarea a:hover img{
	opacity:initial;
}
#mainarea img{
	max-width:100%;
	height:auto;
}

.backColorTop{
	background-color:#f0f4e2;
}

.mainContent{
	background-image:url(/brand/images/index/backpat.png);
	background-repeat:repeat;
	padding:60px 0;
}



/* in .menuList */

ul.menuList{
	width:945px;/*080211修正*/
	margin:auto;
}
ul.menuList:after{
	content:"";
	display:block;
	clear:both;
}
ul.menuList li{
	float:left;
	width:135px;/*080211修正*/
	position:relative;
}
ul.menuList li:after{
	content:"";
	position:absolute;
	right:0;
	top:14px;
	height:36px;
	width:0;
	border-right:1px solid #e1e1e1;
}
/*ul.menuList li:nth-child(1){
	width:56px;
}*/
ul.menuList li:nth-child(1):before{
	content:"";
	position:absolute;
	left:0;
	top:14px;
	height:36px;
	width:0;
	border-left:1px solid #e1e1e1;
}
ul.menuList li a{
	font-weight:bold;
	color:#100f14;
	font-size:14px;
	display:block;
	height:100%;
	padding:20px 0;
	position:relative;
	transition:color 0.3s linear;
}
ul.menuList li a span{
	position:relative;
	z-index:2;
}
ul.menuList li a:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	height:8px;
	width:100%;
	z-index:1;
	transition:height 0.3s ease-in-out;
}

ul.menuList li:nth-child(1) a:before{
	background-color:#959595;
}
ul.menuList li:nth-child(2) a:before{
	background-color:#ff02bb;
}
ul.menuList li:nth-child(3) a:before{
	background-color:#41baff;
}
ul.menuList li:nth-child(4) a:before{
	background-color:#29e143;
}
ul.menuList li:nth-child(5) a:before{
	background-color:#f08940;
}
ul.menuList li:nth-child(6) a:before{
	background-color:#af84ff;
}
/* add 20180406*/
ul.menuList li:nth-child(6) a{
	position:relative;
	z-index:40;
}
ul.menuList li:nth-child(6) .cm_icon_wrapper {
	position: absolute;
	overflow:hidden;
	display:block;
	top: 0;
	left: 0;
	width:100%;
	padding-bottom: 0;
	max-height: 0%;
	box-sizing:border-box;
	min-height: 0%;
	transition:min-height 0.2s;
}
ul.menuList li:nth-child(6) :hover .cm_icon_wrapper{
	min-height:250%;
}

ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm{
	display:inline-block;
	position: relative;
	padding:1em;
	top: 80px;
	font-size:80%;
	height:auto;
	border-radius:50%;
	background:#ffffff;
	z-index:10;
	box-shadow:0 2px 2px #666666;
	border:solid 3px #af84ff;
	white-space:nowrap;
	right:-20px;
	z-index:10;
}
ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm::before{
	display:none;
}
ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm::after{
	height:24px;
	content:"";
	width:3px;
	display:block;
	position:absolute;
	background:#af84ff;
	left:40%;
	top:-24px;
	transform-origin:right bottom;
	transform:rotate(-15deg);
}

ul.menuList li:nth-child(6) .radio_cm i{
	display:block;
	color:#af84ff;
	margin-bottom:3px;
}

ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm:hover{
	color:#ffffff;
	background:#af84ff;
}
ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm:hover i{
	color:#ffffff;
}


ul.menuList li:nth-child(7) a:before{
	background-color:#3c5fb5;
}
ul.menuList li a:hover:before, ul.menuList li a.current:before{
	height:100%;
}

ul.menuList li a:hover, ul.menuList li a.current{
	text-decoration:none;
	color:#ffffff;
}


/* in mainVisual */

.mainVisual{
	background:url(/brand/images/index/back_main.jpg) center center no-repeat;
	text-align:center;
	height:400px;
	overflow:hidden;
}

/* in .categoryList */

.categoryBox{
	width:auto;
	margin:auto;
	margin-bottom:50px;
}
.categoryBoxClone{
	position:fixed;
	left:0;
	top:0;
	z-index:10001;
	width:100%;
	background-color:white;
}
ul.categoryList{
	margin:auto;
	width:960px;/*080211修正*/
}
ul.categoryList:after{
	content:"";
	display:block;
	clear:both;
}
ul.categoryList > li{
	float:left;
	width:137px;/*080211修正*/
	text-align:center;
}
ul.categoryList > li > a{
	display:inline-block;
}

ul.categoryList > li dt{
	margin:auto;
	text-align:center;
	font-weight:bold;
	font-size:15px;
	color:#100f14;
	display:inline-block;
	margin-bottom:13px;
	text-shadow:0px 0px 2px #ffffffff, 0px 0px 3px #ffffffff, 0px 0px 4px #ffffffff;
	transition: transform 0.2s linear;
}
.categoryBoxClone ul.categoryList > li dt{
	padding-top:5px;
	margin-bottom:8px;
}
ul.categoryList > li dd{
	overflow:hidden;
	border-radius:50%;
	background:white;
	width:75px;
	height:75px;
	position:relative;
	margin:auto;
	border: 2px solid transparent;
	box-shadow:0px 0px 8px #0000004C, 5px 5px 13px #0000004C;
	transition: transform 0.3s ease;
}
ul.categoryList > li dd img{
	display:block;
	margin:auto;
}
ul.categoryList > li .icon{
	width:50%;
	height:auto;
	margin-top:20%;
}
ul.categoryList > li .arrow{
	width:15%;
	height:auto;
	position:absolute;
	left:50%;
	margin-left:-7.5%;
	bottom:15%;
	margin:0 0 0 -7.5%;
}
ul.categoryList > li > a:hover dt, ul.categoryList > li > a.current dt{
	transform:scale(1.1) translateY(-10px);
}
.categoryBoxClone ul.categoryList > li > a:hover dt, ul.categoryList > li > a.current dt{
	transform:scale(1.1) translateY(0px);
}
ul.categoryList > li > a:hover dd, ul.categoryList > li > a.current dd{
	transform:scale(1.4) translateY(7px);
}

ul.categoryList > li:nth-child(1) > a dd{
	border-color: #959595;
}
ul.categoryList > li:nth-child(2) > a dd{
	border-color: #ff02bb;
}
ul.categoryList > li:nth-child(3) > a dd{
	border-color: #41baff;
}
ul.categoryList > li:nth-child(4) > a dd{
	border-color: #29e143;
}
ul.categoryList > li:nth-child(5) > a dd{
	border-color: #f08940;
}
ul.categoryList > li:nth-child(6) > a dd{
	border-color: #af84ff;
}

ul.categoryList > li:nth-child(7) > a dd{
	background: url(../images/index/iconb6.png) no-repeat center center;/*080211修正*/
	background-size: 100% auto;/*080211修正*/
}
ul.categoryList > li:nth-child(7) > a dd{
	border-color: #3c5fb5;/*080211修正*/
}
/* in linkList */

ul.linkList,
ul.linkList2{
	width:940px;
	margin:auto;
	position:relative;
}
ul.linkList:after,
ul.linkList2:after{
	content:"";
	display:block;
	clear:both;
}

.mainLink ul.linkList > li,
.mainLink ul.linkList2 > li{
	width:300px;
	height:300px;
	margin-right:20px;
	margin-bottom:20px;
	float:left;
	position:relative;
}

.mainLink ul.linkList2 > li:nth-of-type(3n){
	margin-right:0;}

.mainLink ul.linkList > li.dbl,
.mainLink ul.linkList2 > li.dbl{
	width:620px;
	height:620px;
}
ul.linkList > li img,
ul.linkList2 > li img{
	width:100%;
	height:auto;
}
ul.linkList > li > a,
ul.linkList2 > li > a{
	overflow:hidden;
	border-radius:10px;
	width:100%;
	height:100%;
	display:block;
	position:relative;
}
ul.linkList > li > a:before,
ul.linkList2 > li > a:before{
	content:"";
	display:block;
	width:70px;
	height:70px;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	transition: width 0.2s ease, height 0.2s ease;
}


ul.linkList > li.category1 > a:before,
ul.linkList2 > li.category1 > a:before{
	background:url(/brand/images/index/icon_cat1.png) left top no-repeat;
	background-size:100% 100%;
}
ul.linkList > li.category2 > a::before,
ul.linkList2 > li.category2 > a::before{
	background:url(/brand/images/index/icon_cat2.png) left top no-repeat;
	background-size:100% 100%;
}
ul.linkList > li.category3 > a::before,
ul.linkList2 > li.category3 > a::before{
	background:url(/brand/images/index/icon_cat3.png) left top no-repeat;
	background-size:100% 100%;
}
ul.linkList > li.category4 > a::before,
ul.linkList2 > li.category4 > a::before{
	background:url(/brand/images/index/icon_cat4.png) left top no-repeat;
	background-size:100% 100%;
}
ul.linkList > li.category5 > a::before,
ul.linkList2 > li.category5 > a::before{
	background:url(/brand/images/index/icon_cat5.png) left top no-repeat;
	background-size:100% 100%;
}
ul.linkList > li.category6 > a::before,
ul.linkList2 > li.category6 > a::before{
	background:url(/brand/images/kuroyon/category6_icon.png) left top no-repeat;
	background-size:100% 100%;
}
ul.linkList > li > a:hover:before,
ul.linkList2 > li > a:hover:before{
	width:80px;
	height:80px;
}

ul.linkList > li > a,
ul.linkList2 > li > a{
	display:block;
	width:100%;
	height:100%;
	overflow:hidden;
}
ul.linkList > li > a img,
ul.linkList2 > li > a img{
	transition:transform 0.5s ease;
}
ul.linkList > li > a:hover img,
ul.linkList2 > li > a:hover img{
	transform:scale(1.04);
}

ul.linkList > li > a:after,
ul.linkList2 > li > a:after{
	content:"";
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	right:50%;
	bottom:50%;
	background-color:white;
	opacity:0;
	transition:opacity 0.5s ease, left 0.5s ease-in-out, right 0.5s ease-in-out, top 0.5s ease-in-out, bottom 0.5s ease-in-out;
}
ul.linkList > li > a:hover:after,
ul.linkList2 > li > a:hover:after{
	opacity:0.15;
	left:0;
	top:0;
	right:0;
	bottom:0;
	border-radius:10px;
}

a .btnPlay{
	display:block;
	position:absolute;
	right:0;
	bottom:0;
	background:url(/brand/images/index/btn_play.png) center no-repeat;
	background-size:100% 100%;
	width:64px;
	height:64px;
	z-index:1;
	transition:transform 0.2s ease-out;
}

a:hover .btnPlay{
	transform:scale(1.2);
}

ul.linkList > li.category1 > a:after,
ul.linkList2 > li.category1 > a:after{
	background-color:#ff02bb;
}
ul.linkList > li.category2 > a:after,
ul.linkList2 > li.category2 > a:after{
	background-color:#41baff;
}
ul.linkList > li.category3 > a:after,
ul.linkList2 > li.category3 > a:after{
	background-color:#29e143;
}
ul.linkList > li.category4 > a:after,
ul.linkList2 > li.category4 > a:after{
	background-color:#f08940;
}
ul.linkList > li.category5 > a:after,
ul.linkList2 > li.category5 > a:after{
	background-color:#af84ff;
}
ul.linkList > li.category6 > a:after,
ul.linkList2 > li.category6 > a:after{
	background-color:#3c5fb5;
}
.modalonly{
	display:none;
}

.contentsTitle {
    bottom: 10px;
    color: #fff;
    font-weight: bold;
    text-align: left;
    width: 70%;
}

.titleBack{
	content:'';
	display:block;
	position:absolute;
	width:100%;
	padding:3%;
	bottom:0;
	left:0;
	background-color:rgba(0,0,0,0.6);
}

ul.linkList2 > li.category5 .note{
	display:none;}

/* in popup */
.popupOwner{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:10001;
	display:none;
}

.popupOwner .modalonly{
	display:block;
}

.popupOwner .popupBack{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:10001;
	background-color:black;
	opacity:0.7;
}
.popupOwner .popupWrapper{
	z-index:10002;
	max-width:830px;
	width:100%;
	color:#100f14;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-415px;
	margin-top:-360px;
}
.popupOwner .popupBox{
	position:relative;
	background:white;
	padding:28px;
	padding-bottom:0;
	overflow:hidden;
	overflow-y:auto;
	border-radius:10px;
}
.popupOwner .popupBox:before{
	content:"";
	display:block;
	background:#e60012;
	height:4px;
	width:100%;
	position:absolute;
	left:0;
	top:0;
}
.popupOwner .popupBox h2{
	text-align:left;
	font-size:22px;
	margin-bottom:20px;
}

.popupOwner .popupBox .movieBox, .popupOwner .popupBox .linkBox{
	width:100%;
	height:0;
	padding-bottom:56.25%;
	overflow:hidden;
	position:relative;
	margin-bottom:28px;
}
.popupOwner .popupBox .movieBox > iframe, .popupOwner .popupBox .linkBox > a{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.popupOwner .popupBox .linkBox > a > img{
	width:100%;
	height:auto;
}
.popupOwner .popupBox .popupNote{
	padding:25px 28px;
	margin:0 -28px;
	background:url(/brand/images/index/back_note.png) center repeat;
	text-align:left;
	font-weight:bold;
}

.popupOwner .popupBox .popupNote a[target="_blank"]:after{
	content:"";
	background:url(/brand/images/index/mark_window.png) center no-repeat;
	display:inline-block;
	width:13px;
	height:11px;
	margin-left: 3px;
	margin-top: 1px;
}

.popupOwner .popupCloseBox{
	text-align:right;
}
.popupOwner .forCap{
	display:none;
}

/* in categoryHeader */

.categoryHeaderOwner{
	width:942px;
	margin:auto;
	margin-bottom:40px;
}

.categoryHeader{
	position:relative;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	}

.categoryHeader .categoryCap{
	width:50%;
	height:100%;
	/*position:absolute;*/
	display:table;
}
.categoryHeader .categoryCap > div{
	display:table-cell;
	vertical-align:middle;
}


.categoryHeader .categoryCap h2{
	font-size:20px;
	margin:20px 0 15px;
}
.categoryHeader .categoryCap .categoryNote{
	text-align:center;
}
.categoryHeader .categoryLink{
	flex-basis: 47%;
}
.categoryHeader .categoryLink .linkList,
.categoryHeader .categoryLink .linkList2{
	width:100%;
	height:0;
	padding-bottom:100%;
	position:relative;
	margin-left:0;
}
.categoryHeader .categoryLink .linkList li,
.categoryHeader .categoryLink .linkList2 li{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.categoryHeader ul.linkList > li > a::before,
.categoryHeader ul.linkList2 > li > a::before{
	content:none;
}

.linkList li.new::before ,
.linkList2 li.new::before {
    background: #ffcc00 none repeat scroll 0 0;
    border-radius: 100%;
    color: #ffffff;
    content: "New";
    display: inline-block;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 1em 0.5em;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
    line-height:1;
}


@media screen and (min-width:980px){
	.spOnly{
		display:none;
	}
	/*ul.menuList{
		display:block !important;
	}*/
}
@media screen and (max-width:979px){
	.pcOnly{
		display:none;
	}
	
	
	.spMenuBtn{
		position:absolute;
		right:0%;
		margin-top:1%;
		width: 10%;
		max-width:64px;
		z-index:3;
		box-shadow:0px 0px 13px #0000001C;
/*		border:1px solid #0000001C;*/
	}
	.spMenuBtn img{
		width:100%;
		height:auto;
		vertical-align:bottom;
	}
	ul.menuList{
		width:auto;
		display:none;
	}
	ul.menuList li{
		float:none;
		width:100%;
		text-align:left;
		border-bottom:1px solid #e1e1e1;
	}
	ul.menuList li:nth-child(1){
		width:100%;
	}
	ul.menuList li a{
		font-size:150%;
		padding-left:5%;
	}

	/*add for radio*/
ul.menuList li:nth-child(6) .cm_icon_wrapper {
	position: relative;
	overflow:visible;
	display:block;
	width:100%;
	padding-bottom: 0;
	max-height: 100%;
	box-sizing:border-box;
	margin-top: 20px;
	margin-left: 20px;
	background: transparent;
}
ul.menuList li:nth-child(6) :hover .cm_icon_wrapper{
	min-height:auto;
}

ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm{
	display:block;
	position: relative;
	padding:0;
	font-size:80%;
	height:auto;
	border-radius:0;
	box-shadow:none;
	border:none;
	z-index:10;
	top: 0;
	background: transparent;
}
ul.menuList li:nth-child(6) .current .cm_icon_wrapper .radio_cm,
ul.menuList li:nth-child(6) .current .cm_icon_wrapper .radio_cm i{
	color:#ffffff;
}

ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm::before{
	display:none;
}
ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm::after{
	display:none;
}

ul.menuList li:nth-child(6) .radio_cm i{
	display: inline;
	color: #260f14;
	margin-bottom:3px;
	vertical-align: middle;
	margin-right: 0.2em;
	position: relative;
	top: -2px;
}


ul.menuList li:nth-child(6) .cm_icon_wrapper .radio_cm:hover{
	color:#333333;
	opacity:0.5;
}

	/* add for radio */
	
	ul.menuList li a:before{
		height:100%;
		width:2%;
	}
	ul.menuList li a:hover:before, ul.menuList li a.current:before{
		width:100%;
		margin-left:2%;
	}
	
	.categoryBox{
		width:auto;
	}
	.categoryBoxClone{
		display:none !important;
	}
	ul.categoryList{
		width:auto;
		max-width:600px/*080211修正*/;
	}
	
	ul.categoryList > li{
		display:inline-block;
		float:none;
	}
	
	ul.linkList,
	ul.linkList2{
		width:auto;
		margin-left:3%;
	}
	.mainLink ul.linkList > li,
	.mainLink ul.linkList2 > li{
		width:30%;
		height:0;
		padding-bottom:30%;
		margin-right:3%;
		margin-bottom:3%;
	}
	.mainLink ul.linkList > li.dbl,
	.mainLink ul.linkList2 > li.dbl{
		width:63%;
		height:0;
		padding-bottom:63%;
	}
	
	.categoryHeaderOwner{
		width:auto;
		margin-left:3%;
		margin-right:3%;
	}
	
	ul.linkList > li > a,
	ul.linkList2 > li > a{
		position:absolute;
		left:0;
		top:0;
	}


}
@media screen and (max-width:640px){
	.spMenuBtn{
		width: 15%;
		max-width:initial;
	}
	
	.mainVisual{
		height:0;
		padding-bottom:50%;
		background-size:auto 100%;
	}
	.mainVisual img{
		width:60%;
	}
	
	ul.linkList,
	ul.linkList2{
		width:auto;
		margin-left:3%;
	}
	.mainLink ul.linkList > li,
	.mainLink ul.linkList2 > li{
		width:47%;
		height:0;
		padding-bottom:47%;
		margin-right:3%;
	}
              .mainLink ul.linkList2 > li:nth-of-type(3n){
		margin-right:3%;}
	.mainLink ul.linkList > li.dbl,
	.mainLink ul.linkList2 > li.dbl{
		width:97%;
		height:0;
		padding-bottom:97%;
	}
	
	
	.categoryHeaderOwner{
		width:auto;
		margin-bottom:0;
	}
	
	.categoryHeader{
		height:auto;
		padding-bottom:0;
	}
	.categoryHeader .categoryCap{
		width:auto;
		height:auto;
		position:relative;
		display:block;
		margin-left: 3%;
		margin-right: 3%;
	}
	.categoryHeader .categoryCap .categoryNote{
		text-align:left;
		margin-bottom:3%;
	}
	.categoryHeader .categoryLink{
		width:auto;
		position:relative;
		right:auto;
		margin-right:0;
		margin-left:0;
		margin-bottom:3%;
		flex-grow:1;
	}
	.categoryHeader .categoryLink .linkList,
	.categoryHeader .categoryLink .linkList2{
		width:auto;
	}
	ul.categoryList{text-align: left;/*080211修正*/}
	ul.categoryList > li{
		width:33.3333%;/*080211修正*/
		text-align: center;/*080211修正*/
	}
	ul.categoryList > li dt{
		font-size: 12px;
	}
	
	.popupOwner .popupBox{
		padding:0;
		padding-bottom:0;
		border-radius:initial;
	}
	
	.popupOwner .popupBox h2{
		padding:15px 20px;
		margin-bottom:0;
	}
	.popupOwner .popupBox .movieBox{
		margin-bottom:15px;
	}
	
	.popupOwner .popupBox .popupNote{
		margin:0;
		padding:20px;
	}
	.mainLink .linkList li.new::before ,
	.mainLink .linkList2 li.new::before {
	    font-size: 12px;
	}

	a .btnPlay {
	    bottom: 2%;
	    height: 36px;
	    right: 2%;
	    width: 36px;
	}
	.contentsTitle{
	    width:100%;
	    font-size:90%;}
}

/*---------------radio-----------------*/

#radio{
	margin: 20px auto 40px;
	border-radius:10px;
	max-width:940px;
	box-sizing:border-box;
	background-color: rgba(240, 244, 226, 0.75);
	padding: calc((100% - 96.5vw) * 0.75) calc(100% - 96.5vw);
}

#radio h2,#radio h3,#radio p{
	text-align:left;	
}

#radio i{
	vertical-align:bottom;
	margin-right:0.25em;
}
#radio h2{
	font-size:1.25rem;

}
#radio h3{
	margin: 1.4rem auto 0.5rem;
	font-size:1.2em;
	border-bottom: dotted 1px #cccccc;
	padding-bottom: 3px;
}

#radio .summary{
	margin:0 auto 1em;
}


#radio h2 i{
	background-color:#af84ff;
	color:#ffffff;
	padding:0.5em;
	vertical-align:middle;
	border-radius:100%;
}


#radio ul{
	display:flex;
	flex-wrap:wrap;
	justify-content:left;
}

#radio ul li{
	flex-basis:50%;
	margin-bottom:14px;
}

#radio ul li a{
	width:95%;
	display:block;
	margin:0 auto;
	box-shadow: 0 1px 2px #ababab;
	border-radius:8px;
	box-sizing:border-box;
	padding:1em;
	font-size:0.75rem;
	color:#333333;
	font-weight:bold;
	background-color: #ffffff;
	border: solid 2px #ffffff;
	outline:none;
}

#radio ul li a strong{
	font-weight:bold;
	display: block;
}

#radio ul li a:hover{
	text-decoration:none;
	border-color: #e8dcff;
}

#radio .playback_time{
	font-weight:normal;
	color:#525252;
	font-size: 94%;
	display:inline-block;

}

#radio .playback_time i{
	vertical-align: middle;
	margin-right: 0.1em;
	color:#a7a7a7;
	font-size:1.5em;
}


#radio ul li a::after{
	content:"";
	display:block;
	background:url(/share/images/power_with_heart.svg) no-repeat center center;
	height: 20px;
	margin-top: 7px;
	background-size: contain;
	margin-top:0.75rem;
}

@media screen and (min-width:764px){
	#radio ul li{
		flex-basis:33%;
	}

	#radio ul li a{
		font-size: 0.9rem;
	}
}
/*radio*/
#radio_tpl{
	padding: 14px;
	max-width: 500px;
}

#radio_tpl h3{
	margin-bottom:1em;
	font-size:1.1em;
	align-items:center;
}

#radio_tpl h3 i{
	display:block;
	text-align:center;
	color:#eb6100;
}


#radio_tpl .radio_player{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: space-between;
}
#radio_tpl .radio_player_play_ctrl{
	padding-right:5px;
	display: table;
}

#radio_tpl .radio_player_wrapper{
	padding:20px 14px;
	border:solid 1px #cccccc;
	box-sizing:border-box;
}
#radio_tpl .radio_player_logo{
	width:70%;
	margin:10px auto 20px;
	display: block;
}


#radio_tpl .radio_player_bar{
	flex-basis: 70%;
	background-color:#efefef;
	position:relative;
	overflow:hidden;
	height:20px;
	flex-grow: 1;
}

#radio_tpl .radio_player_bar_current{
	background-color: #eb6100;
	display:block;
	transition:width 1s;
	position:absolute;
	left:0;
	top:0;
	height:21px;
	box-sizing:content-box;
	padding-right:6px;
}

#radio_tpl .radio_volume_slider{
	box-sizing: border-box;
	padding-bottom: 5px;
	display: inline-block;
	vertical-align: middle;
}
#radio_tpl .radio_player_bottom_box{
	display:flex;
	align-items:center;
	justify-content: space-between;
	width: 100%;
	font-size:90%;
	padding:5px;
	box-sizing:border-box;
}
#radio_tpl .radio_player_volume_ctrl{
	display:table;
	max-width: 150px;
	margin-left: 6px;
	flex-grow:1;
	
}
#radio_tpl .radio_player_volume_ctrl > div{
	display:table-cell;
}
#radio_tpl .radio_player_volume_ctrl .radio_player_play_ctrl{
	width:20%;
}
#radio_tpl .radio_player_volume_ctrl .radio_volume_slider{
	width:80%;
	text-align:center;
}


#radio_tpl .radio_player_volume_ctrl button i{
	font-size:1.5rem;
}

/*range*/
input[type="range"] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;
    
    /*required for proper track sizing in FF*/
    width: 100%;

    outline:none;

    cursor:pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
	background-color:#dddddd;
	height:3px;
	width:100%;
}

input[type="range"]::-moz-range-track {
width:100%;
    height: 3px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type="range"]::-ms-track {
    width: 100%;
    height: 3px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type="range"]::-ms-fill-lower {
    background: #eb6100;
}
input[type="range"]::-ms-fill-upper {
    background: #ddd;
}
input[type="range"]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

/*volume_range*/
#radio_tpl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  background:#eb6100;
  height:14px;
  width:14px;
  border-radius:50%;
  margin-top:-6px;

}
#radio_tpl input[type="range"]::-moz-range-thumb{
  background:#eb6100;
  height:14px;;
  width:14px;
  border-radius:50%;
  margin-top:-6px;
  border:none;
}
#radio_tpl input[type="range"]::-ms-thumb{
  background:#eb6100;
  height:14px;;
  width:14px;
  border-radius:50%;
  border:none;
}

/*volume_range*/

#radio_tpl input[type="range"]::-ms-tooltip{
  display:none;
}
#radio_tpl input[type="range"]::-moz-range-track{
  height:0;
}

/*progress bar*/

#radio_tpl input.radio_progress_bar[type="range"]::-webkit-slider-runnable-track {
	height:20px;
	border:none;
}
#radio_tpl input[type="range"].radio_progress_bar::-webkit-slider-thumb{
  height:100%;
  margin-top:0;
  border-radius:0;
}

#radio_tpl input.radio_progress_bar[type="range"]::-ms-track  {
	height:20px;
	border:none;
}
#radio_tpl input[type="range"].radio_progress_bar::-ms-thumb{
  height:100%;
  margin-top:0;
  border-radius:0;
}

#radio_tpl input[type="range"]::-moz-range-track {
	height:20px;
	border:none;
}

#radio_tpl input[type="range"].radio_progress_bar::-moz-range-thumb{
  height:100%;
  margin-top:0;
  border-radius:0;
}
#radio_tpl input[type="range"].radio_progress_bar::-moz-range-progress{
    background:#eb6100;
    height:100%;
}

/*range*/

#radio_tpl button{
	color:#eb6100;
	border:none;
	background:none;
	padding:0;
	cursor:pointer;
	padding: 0.2em 0;
}

#radio_tpl button i{
	font-size:2rem;
}

#radio_tpl .radio_play{
	display:inline-block;
}
#radio_tpl .radio_pause{
	display:none;
}

#radio_tpl .radio_play i,
#radio_tpl .radio_pause i{
	font-size:2.5rem;
}

#radio_tpl .radio_play{
	display:inline-block;
}
#radio_tpl .radio_unmute{
	display:none;
}

#radio_tpl .nowplaying .radio_play{
	display:none;
}
#radio_tpl .nowplaying .radio_pause{
	display:inline-block;
}

#radio_tpl .mute .radio_mute{
	display:none;
}
#radio_tpl .mute .radio_unmute{
	display:inline-block;
}


#radio_tpl .time{
	text-align: right;
	color:#666666;
	font-size:96%;
	vertical-align:middle;
	flex-grow:  1;
	white-space:  nowrap;
}