@import url('custom-select.css');

#player {
	width: 100%;
	background: #fff;
	overflow: hidden;
}

#player .social-icon-container {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	bottom: 1rem;
	right: 1rem;	
}

#player .social-icon-container .player-social-icon{
	padding: 5px;
	border: 1px solid #fff;
	border-radius: 100px;
	display: inline-block;
	width: 30px;
	text-align: center;
	margin: 6px;	
}

#player .social-icon-container .player-social-icon i{
	color: #fff;
	font-size: 18px;
}

#player .player-cover{
	width: 100%;
	position: relative;
}

#player .player-cover .bottomP {
	width: 100%;
	position: relative;
	bottom: 0;
	height: 400px;
	background: #000;
	clip-path: polygon(50% 35%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
	-webkit-clip-path: polygon(50% 35%, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 0);
}

#player .player-coverback::after {
	background: url("/images/players/11.png");
    content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 85%;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center;
	z-index: 1;
}

#player .player-container {
	position: absolute;
	bottom: 0;
	height: 80%;
	text-align: center;
	z-index: 1;
		width: 100%;
}

#player .player-img {
	height: 100%;
	z-index: 1;
}

#player .player-cover .bottomP .bottom-inside {
	position: relative;
	height: 100%;
	background: #fff;
	clip-path: polygon(50% 40%, 100% 25%, 100% 32%, 50% 45%, 0% 32%, 0% 25%);
	-webkit-clip-path: polygon(50% 40%, 100% 25%, 100% 32%, 50% 45%, 0% 32%, 0% 25%);
}

#player .player-cover .topP {
	color: #000;
	display: table;
	margin: 0 auto;
}

#player .player-cover .topP .name {
	position: relative;
	font-size: 50px;
	line-height: 1.5;
	
}

#player .player-cover .topP .surname {
	position: relative;
	font-size: 70px;
	line-height: 1;
}

#player .player-cover .player-photo {
	padding: 0 5px;
	overflow: hidden;
	height: 128px;
	width: 150px;
	position: relative;
	z-index: 1;
	bottom: 0;
	text-align: center;
}

#player .player-cover .player-photo > img{
	display: block;
	margin: 0 auto;
	height: auto;
	width: 100%;
}



#player .player-info {
	width: 100%;
	position: relative;
	background: #000;
	display: inline-block;
	margin-top: 10px;
	box-shadow: -10px -10px 25px #00000080;
}

#player .player-info .info-left {
	color: #fff;
	padding-left: 2rem;
}

#player .player-info .info-left .number{
	font-size: 100px;
	line-height: 90px;
	text-align: end;
	float: left;
}

#player .player-info .info-left .name{
	font-size: 25px;	
}

#player .player-info .info-left .surname{
	color: #000;
	font-size: 30px;
	display: inline;
	background: #fff;
}

#player .player-info .info-left .details div:nth-child(2) {
	padding: 20px 0px;
}

#player .player-bio {
	width: 100%;
	position: relative;
	clear: both;
}

#player .player-bio .inside {
	margin: 1rem 3rem;
	box-shadow: 10px 10px 12px #00000080;
}

#player .player-bio .inside  ._corner {
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
	clip-path: polygon(0 0, 0 100%, 100% 0);
	height: 3rem;
	background: #000;
}

#player .player-bio .inside .bio, #player .player-bio .inside .achievements, #player .player-bio .inside .career {
	padding: 1rem 2rem;
}

#player .player-bio .inside .title{
	color: #000;
	font-size: 20px;
	padding-bottom: 1.5rem;
}

#player .headlines, #player .footages {
	width: 100%;
	padding: 0px 6%
}

#player .headlines .title, #player .footages .title {
	color: #000;
	font-size: 20px;
	padding: 1rem;
}

#player .headlines .post{
	width: 320px;
	height: 370px;
    padding: 1rem;
	display: inline-block;
}

#player .post .post-photo {
    height: 200px;
    position: relative;
    text-align: center;
    width: auto;
	box-shadow: 5px 5px 20px #00000080;
}

#player .post .post-photo img {
    height: 100%;
    width: 100%;
}

#player .post .post-info {
	padding: 5px 2px;
	width: 100%;
	height: 25px;
	font-size: 11px;
}

#player .post .post-info .post-date {
	float: left;
}

#player .post .post-info .post-date >span {
	padding-right: 5px;
}

#player .post .post-details {
	margin: 20px 0px;
}

#player .post .post-details .post-header > span{
	font-size: 15px;
	font-weight: bold;
}

#player .post .post-details .post-subject {
	font-size: 13px;
	padding-top: 3px;
}

#player .footages .post {
	width: 320px;
	padding: 1rem;
	display: inline-block;
}

#player .footages .post .post-photo {
    height: 150px;
    position: relative;
    text-align: center;
    width: auto;
	box-shadow: 5px 5px 20px #00000080;
}

#player .player-statistics-container {
    width: 300px;
    height: 300px;
    text-align: center;
    margin: auto;
    position: relative;
    background-color: #000;
}

#player .player-statistics-container canvas {
    padding: 50px; 
    width: 100%;
    height: 100%;
}

#player .player-statistics-container #player-statistics-canvas-values {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#player .player-info-selector {
    background: #000;
    margin-top: -20px;
    height: 150px;
    padding: 2rem;
    float: right;
    text-align: center;
}

@media only screen and (max-width: 520px) {
	#player .player-bio .inside {
		margin: 1rem;
	} 
	
	#player .player-bio .inside .bio, #player .player-bio .inside .achievements, #player .player-bio .inside .career {
		padding: 1rem;
	}
	
	#player .player-bio .inside .title {
		font-size: 1em;
	}
	
	#player .player-bio .inside .content {
		font-size: 0.8em;
	}
	
}



/*#player .player-info-selector select {
    width: 100%;
    max-width: 300px;
    background: #fff;
}

#player .player-info-selector select option {
    background: #fff;
    padding: 5px 1rem;
    color: #000;
    text-transform: uppercase;
    text-align: left;
}

#player .player-info-selector select option:hover {
    color: #fff;
    background: #000;
}*/