* {scroll-behavior: smooth;}
body{font-family: 'Barlow', sans-serif;font-weight: 400;font-size:1rem; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.bg-dark{background:#000!important}
.bg-gray{background:#ebe8e8; color:#555}
main {padding-top:68px;}

.navbar-dark .navbar-toggler[aria-expanded="false"] span {
    transform: none;
    opacity: 1;
}
.navbar-dark .navbar-toggler:hover span, .navbar-dark .navbar-toggler:focus span {
    background: #fff;
}
.navbar-dark .navbar-toggler span {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px auto;
    background: #fff;
    transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.navbar-dark .navbar-toggler {
    border: none;
}
.navbar-toggler:focus {
    box-shadow: none;
}
header button:focus{outline: none;}
/*3 strikes to x */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:first-of-type {
    transform: rotate(
	45deg
	) translate(6px, 6px);
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;
}
.navbar-dark .navbar-toggler[aria-expanded="true"] span:last-of-type {
    transform: rotate(
	-45deg
	) translate(5px, -5px);
}
#box-leagues .owl-carousel, #box-leagues .owl-stage, .owl-carousel .owl-stage-outer{height:100%!important;}
#box-leagues .owl-stage{padding-top:1.5em}
#box-leagues{ background:url('../images/bg-leagues-slider.jpg') no-repeat; overflow:hidden; height:180px; background-size:cover;padding-left: 10px;}
#box-leagues .card{border-radius:1em; border:none;overflow:hidden;    box-shadow: rgb(91 91 132 / 80%) 0px 13px 27px -5px, rgb(0 0 0 / 80%) 0px 8px 16px -8px;}
#box-leagues a { width: 100%; }
#box-leagues a:hover {text-decoration:none;}
#box-leagues .owl-item { transition: 0.3s;}
#box-leagues .owl-item:hover { transform: translate(0, -10px);}
#box-leagues .owl-carousel .owl-item img {
    display: block;
    width: auto!important;
	margin:20px auto;
}
#box-leagues span{margin-bottom:0;background:#000;display:block;color:#fff;text-align:center;font-size:0.8em;line-height:1.2em;padding:0.5em; margin-top:10px;height:43px;}
.icon-ball{background:url('../images/icon-ball.jpg') no-repeat; width:16px;height:16px;display: inline-block;margin-right:5px;}
.card{border-radius: 1em;}
.card-body{padding:1rem;}
.card-header{border:none;}
.bg-transparent{background:transparent;}
.card-header h1{font-size:1.25em; }
.card-header,.card-body{color:#555}
.card-header .bi, a .bi {margin-top:-4px;margin-right:4px}
.btn-back {color:#fff; transition:0.2s;padding:1em 0.5em 1em 0em;display:inline-block}
.btn-back svg{transition:0.2s;}
.btn-back:hover svg {transform: translate(-5px, 0px);}
.btn-back:hover {text-decoration:none;color:#fff;}
.match > .d-flex {
    margin-bottom: 10px;
}
.match .team-logo {
    width: 40%;
	line-height: 1em;
	padding:0.5em;
}
.match .team-logo:first-child img {
    display: inline-block;
    float: right;
	margin-left:5px;
}
.match .team-logo:first-child{text-align:right;}
.match .team-logo:last-child img {
    display: inline-block;
    float: left;
	margin-right:5px;
}
.match .result {
    width: 20%;
	text-align:center;
}
.match .time {
    font-size: .80em;
	font-weight:normal;
}
.match .time.badge{
	padding: 0.5em 1em;
    margin: 1em 0em;
}
.match .end.badge{
	padding: 0.25em 1em;
	font-size:1em;
}

.badge-light{background:#f4f4f4;}
.line-bottom{border-bottom:1px solid #ced4da;}
.match .result .vs {
    font-size: 1.6em;
    line-height: 1.2em;
    font-weight: 400;
}

.shadow-sm {
    box-shadow: 0 .250rem .25rem rgba(0,0,0,.095)!important;
}
/*tabs*/
.border-top {border-top:1px solid #ced4da}
.tabs .nav-link, .tabs .nav-link.active:hover{color:#565656;}
.tabs .nav-link:hover{
    color:#004791;
}
.tabs .nav-link.active{
    border-bottom: 4px solid #004791;
}
.shield {width:18px;height:18px}

.table .thead-dark th{background:#081f2c; border: none;}
.table td, .table th, .table thead th{border-top:none;border-bottom:1px solid #dee2e6;}
.table .shield {margin-right:5px}
.card-header:first-child{border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0;}
#alineaciones .shield {width:45px;height:45px;margin-right:5px}
#alineaciones h3{font-weight:normal;}
#alineaciones table td:first-child{width:20px}
.team-full-name{display:none;}
footer {background:#000;color:#fff;font-size:0.8em;letter-spacing: 0.5px;}
.box-league{ background:url('../images/bg-league.jpg') top center no-repeat; 
	background-size: cover;
	margin-bottom: 2rem!important;
}
h1 {color:#555}
.day h1 {font-size:2em;margin-bottom:0}
.match h2{font-size:18px;color:#555;border-bottom:1px solid #ced4da;padding-bottom:5px; margin-bottom:20px}
.match a{color:#555;display:block;}
.match a:hover{text-decoration:none;background:#f4f4f4;}
#box-league .card {width:135px;padding:1em;top:25px;}
#box-league .card img {margin:0 auto;}

select {text-align-last: center;}
/*masonery grid*/
.twitter-tweet{margin-top:0px!important}
.grid {
	width:100%;
	margin: 0px auto;
}
.grid-item {
	padding: 0.5em;
	box-sizing: border-box;
	display:inline;
}

.goal {background:#000;color:#fff;}

.timeline {
	position: relative;
	margin: 0 0 0 10px;
}
.timeline:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 100%;
	background: #a7a7a7;
}
.timeline .timeline-container {
	position: relative;
	margin-bottom:10px
}
.timeline .timeline-container .timeline-icon {
	position: absolute;
	left: -4px;
	top: 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	text-align: center;
	font-size: 2rem;
	background: #4f537b;
}
.timeline .timeline-container .timeline-icon i {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.timeline .timeline-container .timeline-icon img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.timeline .timeline-body{padding:5px 5px 5px 25px}

.timeline .timeline-container .timeline-body .timeline-title,.timeline .timeline-body p {
	margin-bottom: 0px;
	line-height: 1.3rem;
}
.timeline .timeline-container .timeline-body .timeline-title{font-size:1.3em;font-weight:600}
.timeline .timeline-container .timeline-body .timeline-subtitle {
	font-weight: 300;
	font-style: italic;
	opacity: 0.4;
	margin-top: 16px;
	font-size: 11px;
}

.timeline-container.interaction .timeline-icon {
    width: 30px;
    height: 30px;
	top: 10px;
    left: -14px;
}

.icon-goal{    
	width: 20px;
    height: 20px;
    background: #fff url(../images/icon-goal.svg) no-repeat;
    border: 2px solid white;
    border-radius: 50px;
}
.icon-sustitution{    
	width: 20px;
    height: 20px;
    background: #fff url(../images/icon-sustitution.svg) no-repeat;
	border: 2px solid white;
    border-radius: 50px;
}
.icon-var{    
	width: 20px;
    height: 20px;
    background: url(../images/icon-var.svg) no-repeat;
}
.icon-yellow-card,.icon-red-card{
	width: 10px;
    height: 16px;
	border-radius:2px;
}
.icon-yellow-card{background:#ffcc00;}
.icon-red-card{background:#ff0000;}
.stats-content {margin-bottom:10px;}
#social{}
#tweet .twitter-tweet {width:100%!important;}


/*date picker*/
table.table-condensed {
    width: 100%;
}
.dropdown-menu{min-width:310px;}
.result-prode input[type="text"]{width:50px}
@media (max-width: 320px){
	.match .team-logo {
		line-height: 1.2em;
		font-size: 0.8em;
	}
}
@media (min-width: 320px) and (max-width: 375px){
	.table td, .table th {
		padding: .5rem .3rem;
	}
	.table tbody th{text-align:center;}
	#social h3 {
		font-size: 1.2rem;
	}
	
	#alineaciones h3 {font-size:1em;}
	
}
@media (min-width: 500px) {
	.grid-item {
		width: 50%;
	}
}
@media (max-width: 768px){
#principal {height:calc(100vh - 68px);}
}

@media (min-width: 768px){
	.team-abbr{display:none;}
	.team-full-name{display:inline-block}
	#fixture .form-group, #box-league #selectLigue {max-width:320px}
}
@media (min-width: 992px) { 
	.sticky-matches {
		position: sticky;
		top: 100px;
		z-index: 10;
		padding-bottom: 20px;
	}
	#box-leagues .owl-carousel, #box-leagues .owl-stage, .owl-carousel .owl-stage-outer{margin:0 auto!important;
	}
	#box-leagues{ background:url('../images/bg-leagues-slider-desktop.jpg') no-repeat; }
	.box-league{ background:url('../images/bg-league-desktop.jpg') no-repeat; }
	#posiciones thead tr th:first-child{width:20px}
	#posiciones thead tr th, #posiciones td{vertical-align:middle}
	#alineaciones h3{font-size:1.25em}
	#box-league .match .team-logo{font-size:1.8em}
	#box-league .match .end.badge {
		font-size: 1.25em;
	}
	.date{text-align:right;}
	.table .shield{width:35px;height:35px}
	.result-prode {font-size:18px}
}

@media (min-width: 1200px) {
	.grid-item {
		width: 33%;
	}
	#social .grid-item {
		width: 25%;
	}
	.tabs .nav-link{font-size:1.4em}
	.match .result {
		width: 40%;
		text-align: center;
	}
}
@media (min-width: 2100px) {
	.grid-item {
		width: 20%;
	}
}