html,body {
  font-family: 'Roboto', sans-serif;
  font-size:1em;
  background-color:#f5f5f5;

  height:100%;
  width:100%;
}

h1 {
  font-size:3em;
  font-weight:700;
}

h2 {
  font-size:2.5em;
  font-weight:700;
}

h3 {
  font-size:1.5em;
  font-weight:700;
}

h4 {
  font-size:1.5em;
  font-weight:700;
}

h5 {
  font-size:1em;
  font-weight:700;
}

a:hover,a:visited,a:active {
  text-decoration:none;
  color:inherit;
}



.wrapper-max-width {

}


.container {
  max-width:960px;
}


.panel-dark .panel-heading {
  background-color: #121212;
  border-color: #121212;

}
.panel-dark {
  border-color: #121212;
  box-shadow: 0px 0px 14px #DDD;
  border:1px solid #dddddd;
  border-top:none;

}

.col-md-20 {
  max-width:20%;
}

[class*="col-"] {
  padding-left:10px;
  padding-right:10px;  
}


.text-read-more {
  position:relative;
  font-weight:400;
  font-size:1em;
  color:#777;
  border:1px solid #777;

}

.text-read-more:active {
  color:#777;
}

.text-read-more:hover {
  color:#000;
}

table a:not(.btn), .table a:not(.btn) {
    text-decoration: none;
    font-weight:700;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #dddddd;
}

/************************/
/******** NAVBAR ********/
/************************/

.navbar-brand {
line-height:30px;
}

.navbar {
  margin-bottom: 0px;
}



ul.nav>li>a{
  line-height:30px;
  text-transform:uppercase;
  font-weight:300;

}

/************************/
/******** HEADER ********/
/************************/

header {
  position:relative;
  display:inline-block;
  width:100%;
  min-height:200px;
  background-color:#FFF;

  line-height:200px;
}

.brand {
margin-top:20px;
}

.brand img {
  display:block;
  float:left;
}


/************************/
/******* PLAYERS  *******/
/************************/

.players-main {
  margin-top:40px;
  margin-bottom:25px;
}
.players-main h3 {
  text-transform:uppercase;
  font-weight:400;
}

.players-main a, .players-main a:active{
  color:#DDD;
  text-decoration:none;
}

.players-main a:hover {
  color:#FFF;
}



.player-profile-main {
    border: 1px solid #DDD;
    position: relative;
    height: 200px;
    display: block;
    overflow: hidden;
    padding: 0px;
    
    background-color: #FFF;
}

.player-profile-main img {
  position:absolute;
  left:50%;
  height:100%;
  transform: translateX(-50%);
  object-fit:cover;
}


.player-profile-main ul {
  background-color:rgba(34, 34, 34, .75);
  color:#FFF;
  position: absolute;
  bottom:0px;
  margin:0px;
  width:100%;
  height:100%;
  line-height:12px;
  border:none;
  
  top:75%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;  
  z-index:1;

}


.player-profile-main:hover ul {
  background-color:rgba(34, 34, 34, .95);
  position: absolute;
  bottom:0px;
  margin:0px;
  width:100%;
  line-height:12px;
  border:none;
  top:0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.player-profile-main ul li {
  border:none;
  background-color:transparent;
  line-height:15px;
}

.player-profile-main ul li.social {
  position:absolute;
  bottom:5px;
  padding:0px;
  width:100%;
  border:none;
  background-color:transparent;
  line-height:30px;
  text-align:center;
}

.player-profile-main ul li i{
  font-size:1.3em;
  line-height:30px;

}

.player-profile-main ul li.player-name {
  border:none;
  font-size:1.3em;
  padding:16px 0px;
  padding-bottom:20px;
  font-weight:300;
  border-bottom: 1px solid rgb(123, 123, 123);

}

/************************/
/********* NEWS *********/
/************************/

.new {
  position:relative;
  display:block;
  margin-bottom:20px;
  padding:5px;
}

.new h3 {
  margin-top:0px;
  font-weight:700;
  font-size:24px;
  text-transform:uppercase;
}



.new .photo img{
  height:100%;
  width:100%;
  height:180px;

  max-height:180px;  

  object-fit:cover;
}

.new .body p{
  height:100%;
  text-align:justify;

  line-height:1.35;
  color:#000;
}

.new .teaser{
  height:100%;
  text-align:justify;
  font-weight:300;
  font-style:italic;

  line-height:1.35;
}


.new .footer{
  position:relative;
  display:block;
  padding-bottom:20px;
  border-bottom: 1px dotted #DDD;
  text-align:right;
  margin-right:10px;

}

.new hr {
  border-bottom: 1px dotted #DDD;
  border-top:none;
}

/************************/
/********* PLAYER *********/
/************************/

.player {
  height:auto;

  overflow:hidden;
  margin-bottom:20px;
}

.player h3 {
  text-align:center;
  margin-top:0px;
  margin-bottom:0px;

  padding-top:30px;
  padding-bottom:10px;
  font-weight:300;
  font-size:28px;
  text-transform:uppercase;
  border-bottom:1px solid #ddd;
}

.player .photo img{
  width:100%;
  height:250px;
  border:1px solid #ddd;
  padding:0px;
  object-fit:cover;

}

.player .body p{
  height:100%;
}

.player ul {
  border:none;
}
.player ul li {
  border:none;
  line-height:30px;
  border-bottom: 2px dotted #DDD;
}

.player ul li span {
  font-weight:700;
  float:right;
}

.panel-title span.id {
  font-weight:300;
  float:right;
  color:#777;
}



.player h3.player-name {
    border-bottom:none;

  padding-top:20px;
  padding-bottom:30px;    
}


.new h3.player-name {
  padding-top:0px;

  padding-bottom:10px; 
  border-bottom:1px dotted #ddd;     
}

.player .teaser{
  padding-top:10px;
  height:100%;
  text-align:justify;
  font-weight:300;
  font-style:italic;
  color:#999;

  line-height:1.35;
}

.team-photo img {
  height:200px;
  width:100%;
  object-fit:cover;
  margin-bottom:20px;
  padding-left:0px;
}

/************************/
/******* TEAMS ********/
/************************/



/************************/
/******* MATCHES ********/
/************************/

.matches ul {
  border:none;
}

.matches ul li {
  border: none;
  margin: 0px;
  padding: 15px 15px;
  overflow: hidden;
  margin: 10px 0px;
  box-shadow: 0px 0px 14px #DDD;
  border-left: 5px solid #333;
}

.matches ul li span.text {
  width: 100%;
  color: #000;
  height: 100%;
  font-size:18px;  
  position: relative;
  z-index: 1;
  padding-left: 0px;
}

.matches ul li span.team {
  position:absolute;
  font-size:12px;   
  bottom: 0px;
  color: #777;
}

.matches ul li span.result {
  position:relative;
  font-size:18px;
  font-weight:700;  
  float:right;
  z-index:1;
}

.matches ul li span.bg {
  content: '';
  display: inline-block;
  position: absolute;
  background-color: #222;
  width: 100%;
  height: 200%;
  transform: rotateZ(-45deg);
  left: 30%;
  z-index: 0;
}

.matches ul li.w {
  color: #5cb85c;
  border-color: #5cb85c;
}

.matches ul li.l {
  color: #d9534f;
  border-color: #d9534f;
}

.matches ul li.d {
  color: #F57F17;
  border-color: #F57F17;
}

.results td.datetime {
  font-size:12px;
}

.results th {
  text-align:center;
}

.results tr {
  height:60px;
  line-height:60px;
}

.results tr.w {
  border-left:10px solid;
  border-left-color: #5cb85c;
}

.results tr.l {
  border-left:10px solid;  
  border-left-color: #d9534f;
}

.results tr.d {
  border-left:10px solid;  
  border-left-color: #F57F17;
}




/************************/
/****** RESPONSIVE ******/
/************************/

@media (max-width: 768px) {

.col-md-20 {
  max-width:100%;
}

header {
  height:150px;
  line-height:150px;
}

.brand {
margin-top:20px;
}

.brand img {
  margin:0 auto;
 float:none;
}

.new {
  position:relative;
  display:block;
  height:100%;
  max-height:100%;
  margin-bottom:20px;
}

}