@charset "UTF-8";
/* CSS Document */

#articleImage {
	max-width: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 4px;
}
#top-image-space {
	display: block;
}


#article-focus ul {
	list-style-type: disc;
	-ms-box-orient: vertical;
  	display: block;
  	-webkit-flex-direction: column; 
  	flex-direction: column;
  	justify-content: none;
}
#article-focus #writer ul {
	-ms-box-orient: horizontal;
  	display: -webkit-box;
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -moz-flex;
  	display: -webkit-flex;
  	display: flex;
  	-webkit-flex-direction: row; 
  	flex-direction: row;
  	justify-content: space-between;
  	border: none;
  	list-style-type: none;
  	margin: 0;
	padding: 0px;
}


#article-focus h1 {
	color: #202020;
}


#theCategory {
	font-size: 15px;
	text-transform: uppercase;
	font-family: 'Staatliches', cursive;
	color: #a0a0a0;
	letter-spacing: 1px;
}
#author {
	font-size: 14px;
}
#author img {
	height: 60px;
	width: 60px;
	object-fit: cover;
	border-radius: 50%;	
}
#author-name {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #d62d42;
}
#author-name a {
	text-decoration: none;
	color: #d62d42;
}


#author-mobile {
	display: none;	
}



/* ------- RATING POST MATCH ------- */
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 250px; /* Full-width */
	height: 5px; /* Specified height */
	background: rgba(0, 0, 0, 0.4); /* Grey background */
	outline: none; /* Remove outline */
	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: opacity .2s;
	border-radius: 10px;
}

/* Mouse-over effects */
.slider:hover {
	opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 28px; /* Set a specific slider handle width */
	height: 28px; /* Slider handle height */
	border-radius: 50%;
	background: #fff; /* Green background */
	border: 2px solid #d62d42;
	cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
	width: 28px; /* Set a specific slider handle width */
	height: 28px; /* Slider handle height */
	background: #d62d42; /* Green background */
	cursor: pointer; /* Cursor on hover */
}

#playerPostRating {
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	transition: 0.3s ease-in-out;
}
#playerPostRating:hover {
	background: rgba(255, 255, 255, 0.1);
}
#playerPostRating ul {
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row; 
	flex-direction: row;
	justify-content: space-between;
	border: none;
	list-style-type: none;
	margin: 0;
	padding: 0px;
}
#playerPostRating #name {
	width: 55%;
	color: #fff;
	font-size: 16px;
}
#playerPostRating #sliding {
	width: 50%;
	color: #fff;
	font-size: 15px;
}
/* --------------------------------- */

#ratingsBox {
	position: relative;
	max-width: 100%;
	width: 100%;
	background: rgb(235,51,73);
	background: linear-gradient(45deg, rgba(235,51,73,1) 0%, rgba(244,92,67,1) 100%);
	border-radius: 10px;
	padding: 5px;
	padding-top: 25px;
	padding-bottom: 25px;
	margin: auto;
	font-size: 13px;
}
#ratingsBox #playerPostRating {
	font-family: 'Staatliches', cursive;
}

.starChosen {
	color: #e9c444;
}

#dwn-image {
	display: inline-block;
	background: linear-gradient(to right, #262f2e 50%, #2ec7b0 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	border-radius: 40px;
	font-family: 'Staatliches', cursive;
	font-size: 16px;
	letter-spacing: 2px;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease;	
}
#dwn-image #padding {
	padding: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
}
#dwn-image:hover {
	background-position: left bottom;
	transform: scale(1.05);
}

#saveRatings {
	display: none;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	border: 0 !important;
	background: #1c7d68;
	background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
	display: none;
}
/* Custom Select */
.select {
	position: relative;
	display: flex;
	height: 3em;
	width: 115px;
	line-height: 3;
	background: #1c7d68;
	overflow: hidden;
	border-radius: .25em;	
	font-family: 'Noto Sans JP', sans-serif;
	text-transform: uppercase;
	font-size: 14px;
}
select {	
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 14px;
	background: rgba(0, 0, 0, 0.6);
	flex: 1;
	padding: 10px;
	color: #fff;
	cursor: pointer;
}
/* Arrow */
.select::after {	
	content: '\25BC';
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 1em;
	background: #1c7d68;
	cursor: pointer;
	pointer-events: none;
	color: #fff;
}


#grade-box {
	position: relative;
	overflow: hidden;
}
#grade-box #info {
	padding-left: 22%;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	min-height: 180px;
}
#grade-box #info #padding {
	padding: 15px;
	font-size: 13px;
}
#grade-box #info #padding h1 {
	padding: 0px;
	margin: 0px;
	font-size: 20px;
}
#grade-box #info #padding #moreGrades {
	font-size: 10px;
}
#grade-box #image {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 60px;
	width: 20%;
	background-color: #00f;
	border-top-left-radius: 8px;
	overflow: hidden;
}
#grade-box #image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
#grade-box #grade {
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 60px;
	width: 20%;
	background-color: #0ff;
	border-bottom-left-radius: 8px;
	overflow: hidden;
	text-align: center;
	font-family: 'Staatliches', cursive;
	color: #fff;
	font-size: 30px;
	line-height: 60px;
}


@media only screen and (max-width: 1374px) {
	#ratingsBox {
		max-width: 90%;		
	}
	#playerPostRating #name {
		width: 55%;
	}
	#playerPostRating #sliding {
		width: 50%;
	}
}
@media only screen and (max-width: 1060px) {		
	#article-focus {
		max-width: 600px;
	}
}
@media only screen and (max-width: 850px) {	
	#dekstop-ad {
		display: none;	
	}
	#mobile-ad {
		display: block;	
	}

	#author {
		font-size: 13px;	
	}
	#author img {
		height: 40px;
		width: 40px;
		margin-top: 8px;
	}
	
	#some-space {
		padding-top: 14px;	
	}
	#some-button {
		height: 30px;
		width: 30px;
	}
	#some-button .content {
		font-size: 15px;
	}
	
	
	#article-focus #content {
		font-size: 2.4vw;
		width: 95%;
		margin: auto;
		padding: 0px;
	}
	
	
	#message-userimg {
		padding-top: 4px;
		width: 50px;
	}
	#message-userimg #friend {
		top: -2px;
		right: 10px;
		font-size: 9px;
		height: 15px;
		width: 15px;
		line-height: 13px;
	}
	#message-left-placeholder {
		width: 0px;
	}
	#message-userimg img {
		width: 30px;
		height: 30px;
	}
	#message-username h4 {
		font-size: 13px;
	}
	#message-username #time {
		font-size: 11px;	
	}
	
	#playerPostRating #name {
		width: auto;
	}
	#playerPostRating #sliding {
		width: 45%;
	}
	/*
	#playerPostRating #sliding {
		width: 180px;
	}
	*/
	.slider {
		width: 170px; /* Full-width */
	}

	#grade-box #image {
		max-height: 90px;
	}
	#grade-box #grade {
		bottom: none;
		top: 90px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 8px;
	}
	
	
}
@media only screen and (max-width: 600px) {	
	#articleImage {
		border-radius: 0px;
	}
	#top-image-space {
		display: none;
	}
	
}
@media only screen and (max-width: 550px) {
	.slider {
		width: 80px;
	}
	#playerPostRating #name {
		font-size: 13px;
	}
	/*
	#playerPostRating #sliding {
		width: 110px;
	}
	*/
	.slider {
		width: 110px; /* Full-width */
	}
}
@media only screen and (max-width: 500px) {
	#headline-article {
		font-size: 10vw;
		line-height: 11vw;
	}
	#some-space {
		display: none;
	}
	#writer #author {
		display: none;
		height: 0px;
		width: 0px;
		overflow: hidden;
	}
	#author-mobile {
		display: block;
		text-align: center;
		font-size: 13px;
	}
	#author-mobile img {
		height: 60px;
		width: 60px;
		object-fit: cover;
		border-radius: 50%;	
	}
	#author-mobile #some-button {
		height: 30px;
		width: 30px;
	}
	#author-mobile #some-button .content {
		font-size: 15px;
	}
	
	
	#article-focus #content {
		font-size: 3.9vw;
	}
	
	#ratingsBox {
		max-width: 300px;
		font-size: 11px;
		padding: 10px;		
	}
}