.tournamentStats{
	font-family: @type_Special;
	color: @bg_type;
	text-transform: uppercase;
	.owl-carousel{
		display: block !important;
	}
	header{
		padding: 15px;
		background: darken(@bg, 5%);
		font-weight: 600;
		color: lighten(@bg_type, 20%);
		border-bottom: 1px solid @bg;
	}
	section{
		position: relative;
		.content{
			.flex-display(@display: flex);
			.flex-direction(@direction: row);
			.flex-wrap(@wrap: wrap);
			position: relative;
			height: auto;
			.box{
				position: relative;
				overflow: hidden;
				height: 200px;
				background: @bg;
				border: 1px solid @bg;
				.detailsLink{
					color: @bg_type;
					text-decoration: none;
					cursor: pointer;

					h1, h2{
					margin: 0;
					padding: 10px 15px;
					background-color: darken(@bg, 15%);
					font-size: 14px;
					font-weight: 500;
					}
					h2{
						background: transparent;
					}
				}
				
				span, strong{
					display: block;
					margin: 0;
					text-align: center;
					word-wrap: break-word;
					white-space: pre-wrap;
				}
				.comp-1{
					padding: 0 40px;
					color:@bg;
					> div{
						float: left;
						width: 50%;
						margin-top: 40px;
					}
					.element-1{
						strong, span{
							font-size: 10px;
							font-weight: 300;
						}
					}
					.rounded{
						&.small{
							margin-top: 0;
							margin-bottom: 10px;
						}
					}
				}
				.comp-2{
					padding: 10px 15px 0;
					>div{
						display: block;
						float: left;
					}
					p{
						font-weight: bold;
						text-align: center;
					}
					.element-1{
						width: 50%;
						p{
							margin-top: 10px;
							font-size: 14px;
						}
					}
					.element-2{
						width: 50%;
						p{
							margin: 25px 0 0;
							font-size: 30px;
							text-align: center;
						}
						span, strong{
							margin: 0 0 0 -10px;
							font-size: 10px;
							font-weight: 400;
							text-align: left;
						}
						strong{
							margin-top: 30px;
							font-weight: bold;
						}
					}
				}
				.comp-3{
					.element-1{
						position: relative;
						overflow: hidden;
						height: 190px;
						background-color: darken(@bg, 5%);
						svg{
							position: absolute;
							left: -60px;
							height: 310px;
							width: 360px;
						}
					}
					.element-2{
						.rounded{
							margin-top: -30px;
						}
						span, strong{
							font-size: 15px;
							font-weight: 400;
						}
						strong{
							margin-top: 15px;
							font-weight: bold;
						}
						p{
							margin: 0;
							font-size: 40px;
							font-weight: bold;
							text-align: center;
						}
					}
				}
				.comp-4{
					padding: 10px 15px 0;
					>div{
						display: block;
						float: left;
					}
					.element-1{
						width: 30%;
						p{
							margin-top: 10px;
							font-size: 14px;
							font-weight: bold;
							text-align: center;
						}
					}
					.element-2{
						width: 70%;
						> div{
							float: left;
						}
						.boxComparing {
							position: relative;
							display: block;
							height: 100px;
							width: 60%;
							text-align: center;
							padding:0;
							.canvas-holder{
								width: 110px;
							}
							canvas {
								position: absolute;
								right: 0;
								left: 0;
								height: 100px;
								width: 100px;
								margin: 0 auto;
							}
							span{
								position: absolute;
								top: 38px;
								right: 0;
								left: 0;
								margin: 0 auto;
								font-size: 22px;
								font-weight: bold;
								color: @bg_type;
							}
						}
						.data{
							width: 40%;
							margin-top: 20px;
							ul{
								margin: 0;
								padding: 0;
								list-style: none;
								li{
									&:first-child{
										color: @referenceColor05;
									}
									&:last-child{
										margin-top: 5px;
										color: @referenceColor12;
									}
								}
								p{
									margin: 0;
									font-size: 16px;
								}
								span{
									display: block;
									font-size: 10px;
									text-align: left;
								}
							}
						}
					}
				}
				.options{
					position: absolute;
					right: 15px;
					bottom: 10px;
					width: auto;
				}
				&.box1{
					.item{
						background-image:url("../images/assist.jpg");
					}
				}
				&.box1, &.box14, &.box-goals, &.box2{
					.owl-carousel {
						.item{
							height: 100%;
							width: 100%;
							background-color:@referenceColor12;
							background-repeat: no-repeat;
							background-size: cover;
							background-blend-mode: multiply;
						}
					}
				}
				&.box2{
					.owl-carousel {
						.item{
							background-color:@referenceColor05;
							background-image: url("../images/correct-pass.jpg");
						    background-position: center bottom;
						}
					}
				}
				&.box9, &.box12{
					background-color:@referenceColor05;
					color:@referenceColor05_type;
					.detailsLink h2{
						color:@referenceColor05_type;
					}
				}
				&.box4, &.box7, &.box13{
					background-color:@neutral;
				}
				&.box3, &.box6{
					background-color:@referenceColor12;
					color:@referenceColor12_type;
					.detailsLink h2{
						color:@referenceColor12_type;
					}
				}
				&.box5 {
					h2{
						padding: 20px;
					}
				}
				.rounded{
					.border-radius(50%;);
					position: relative;
					z-index: 1;
					overflow: hidden;
					height: 90px;
					width: 90px;
					margin: 0 auto;
					background-color: @bg;
					border: 5px solid darken(@bg, 8%);
					&.svg{
						background-color: darken(@bg, 5%);
						border: 5px solid darken(@bg, 10%);
						svg{
							position: absolute;
							left: -20px;
							height: 140px;
							width: 140px;
						}
					}
					&.elem{
						img{
							width: 100%;
							max-width: 100%;
						}
					}
					&.data{
						.box-shadow(8px 10px 20px @bg_type);
						height: 80px;
						width: 80px;
						background-color: @referenceColor05;
						border:0;
						span{
							.translate(-50%, -50%);
							position: relative;
							top: 50%;
							left: 50%;
							font-size: 28px;
						}
					}
					img{
						.translate(-50%, -50%);
						position: relative;
						top: 50%;
						left: 50%;
						width: auto;
						&.icon-teams-bigger{
    						width: 58px;
						}
						&.icon-teams-small{
    						width: 40px;
						}
					}
					&.small{
						height: 60px;
						width: 60px;
						margin-top: -20px;
						img{
						    height: auto;
    						width: 38px;
							&.icon-teams-small{
								width: 40px;
							}
						}
					}
				}
				&.withoutData{
					h2{
						position: relative;;
						top: 50%;
						font-weight: bold;
						text-align: center;
						-webkit-transform: translateY(-50%);
						-ms-transform: translateY(-50%);
						transform: translateY(-50%);
						> div{
							display: inline-block;
							padding: 0 5px;
							background-color: darken(@bg, 100%);
							color: lighten(@bg_type, 100%);
						}
					}
					&.darkbg{
						h2{
							> div{
								background-color: darken(@bg, 100%);
								color: lighten(@bg_type, 100%);
							}
						}
					}
					&.referenceColor05{
						h2{
							> div{
								background-color:@referenceColor05_type;
								color: @referenceColor05;
							}
						}
					}
					&.referenceColor12{
						h2{
							> div{
								background-color:@referenceColor12_type;
								color: @referenceColor12;
							}
						}
					}
				}
				&.box-goals{
					.owl-carousel {
						height: 86%;
						&.buttonsBottom .owl-controls .owl-nav > div {
						    bottom: 10%;
						    &.owl-prev, &.owl-next {
							    right: 0;
							    left: 0;
							    margin: 0 auto;
							}
							&.owl-prev{
							    right: 30px;
							    left: 0px;
							}
							&.owl-next {
							    left: 30px;
							}
						}
						.element-1{
							width: 100%;
							p{
								margin: 25px 0 0;
								font-size: 30px;
								text-align: center;
							}
							span, strong{
								margin: 0 0 0 -10px;
								font-size: 12px;
								font-weight: 400;
								text-align: center;
							}
							strong{
								margin-top: 30px;
								font-weight: bold;
							}
						}
					}
					.item{
					    background-position: center;
						background-image:url("../images/goals.jpg");
					}
					.comp-1 {
						> div {
						    float: none;
						    width: 100%;
						}
					}
				}
			}
		}
		.grid9{
			.box{
				width: 25%;
				&.box1, &.box2, &.box14, &.box15{
					width: 50%;
				}
				&.box5{
					height: 400px;
				}
				&.box7, &.box8, &.box9{
					margin-top: -200px;
				}
				&.box9{
					margin-left: 25%;
				}
			}
		}
		.grid15 {
			.box{
				width: 20%;
				&.box1, &.box2, &.box14, &.box15{
					width: 40%;
				}
				&.box5{
					h2{
						padding:10px 15px;
					}
				}
				&.box6{
					height: 400px;
					h2{
						padding: 20px;
						text-align: center;
					}
					.comp-3{
						.element-1{
							height: 220px;
							img{
								height: 100%;
							    margin: 0 auto;
							    display: block;
							}
						}
					}
				}
				&.box9, &.box10, &.box11, &.box12{
					margin-top: -200px;
				}
				&.box11{
					margin-left: 20%;
				}
			}
		}
	}
	.owl-carousel {
		height: calc(100% - 18px);
		&.buttonsBottom{
			.owl-controls {
				.owl-nav{
					>div{
						top: inherit;
						bottom: 15%;
						&.owl-prev{
							right: 40px;
							left: inherit;
						}
					}
				}
			}
		}
		.owl-stage-outer, .owl-stage{
			height: 100%;
		}
		.owl-item{
			height: 100%;
			float:left;
			.item{
				height: 100%;
				width: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-size: cover;
				background-blend-mode: multiply;
			}
		}
		.owl-controls{
			.owl-nav{
				> div{
					.border-radius(4px);
					position: absolute;
					display: block;
					top: 40%;
					z-index: 999;
					height: 25px;
					width: 25px;
					cursor: pointer;
					background-color: @referenceColor05;
					line-height: 25px;
					text-indent: -9999px;
					border-bottom: 3px solid darken(@referenceColor05, 20%);
					transition:all 0.5s ease;
					&:after{
						content: " ";
						position: absolute;
						display: block;
						height: 0;
						width: 0;
						margin-top: 4px;
						margin-left: 8px;
						border: 6px solid transparent;
					}
					&:focus, &:hover, &:active{
						height: 23px;
						margin-top: 2px;
						line-height: 23px;
					}
					&.disabled{
						cursor: default;
						pointer-events: none;
						&:focus, &:hover, &:active{
							height: 25px;
							margin-top: 0;
						}
						&.owl-prev{
							&:after{
								border-right-color: darken(@referenceColor05, 20%);
							}
						}
						&.owl-next{
							&:after{
								border-left-color: darken(@referenceColor05, 20%);
							}
						}
					}
					&.owl-prev{
						left: 10px;
						&:after{
							border-right: 8px solid @referenceColor05_type;
							border-left: 0;
						}
					}
					&.owl-next{
						right: 10px;
						&:after{
							border-right: 0;
							border-left: 8px solid @referenceColor05_type;
						}
					}
				}
			}
		}
	}
	.footer{
		height: auto;
	    margin-bottom: 10px;
	    position: relative;
	    .flex-display(@display: flex);
		.flex-direction(@direction: row);
		.flex-wrap(@wrap: wrap);
	    &:after, &:before{
			content: "";
			height: 1px;
			background-color: darken(@bg, 20%);
			position: absolute;
			width: 30%;
			top: 24px;
	    }
	    &:before{
	      	left: 3%;
	    }
	    &:after{
	      	right: 3%;
	    }
	    img{
	      	height: 33px;
	      	margin: 8px auto 0;
	    }
	}
	@media screen and (max-width: @md) {
		section{
			.content {
				.box {
					.comp-2 {
						.element-2 {
							p{
								font-size: 26px;
							}
						}
					}
				}
			}
			.grid15 {
				.box{
					width: 25%;
					&.box1, &.box2, &.box14, &.box15{
						width: 50%;
					}
					&.box3{
						margin-top: 400px;
					}
					&.box4{
						margin-left: -25%;
					}
					&.box9, &.box10, &.box11{
						margin-top: 200px;
					}
					&.box8{
						margin-top: 400px;
						margin-left: -75%;
					}
					&.box9{
						margin-left: -50%;
					}
					&.box11{
						margin-left: 25%;
					}
					&.box12{
						margin-left: 50%;
					}
					&.box13{
						margin-top: -200px;
					}
				}
			}
		}
		.footer{
			&:after, &:before{
				width: 25%;
			}
		}
	}
	@media screen and (max-width: @sm) {
		section{
			.grid9{
				.box{
					width: 50%;
					&.box3, &.box4, &.box5{
						width: 33.33%;
					}
					&.box7, &.box8{
						width: 33.33%;
						margin-left: -50%;
					}
					&.box8{
						margin-left:0;
					}
					&.box9{
						margin-left: 50%;
					}
				}
			}
			.grid15 {
				.box{
					width: 33.33%;
					&.box1, &.box2, &.box14, &.box15{
						width: 50%;
					}
					&.box3{
						margin-left: 33.33%;
					}
					&.box4{
						margin-left: -66.66%;
					}
					&.box7{
						margin-top: 400px;
						margin-left: -100%;
					}
					&.box8{
						margin-top: -200px;
						margin-left: 66.66%;
					}
					&.box9{
						margin-left: -100%;
					}
					&.box9, &.box10{
						margin-top: -400px;
					}
					&.box11 {
						margin-top: 0;
						margin-left: 0.1%;
					}
					&.box12{
						margin-top: -200px;
						margin-left: 33.33%;
					}
				}
			}
		}
		.footer{
			&:after, &:before{
				width: 20%;
			}
		}
	}
	@media screen and (max-width: 650px) {
		section{
			.grid15 {
				.box{
					&.box14, &.box15{
						width: 100%;
					}
				}
			}
		}
		.footer{
			&:after, &:before{
				width: 15%;
			}
		}
	}
	@media screen and (max-width: 550px) {
		section{
			.grid9{
				.box{
					&.box1, &.box2{
						width: 100%;
					}
					&.box3, &.box4, &.box5, &.box7, &.box8{
						width: 50%;
					}
					&.box5, &.box6{
						margin-top: 200px;
					}
					&.box7{
						margin-top: 0px;
						margin-left: -100%;
					}
					&.box8{
						margin-top: 0;
					}
					&.box9{
						margin-left: 50%;
					}
				}
			}
			.grid15 {
				.box{
					width: 50%;
					&.box1, &.box2, &.box14, &.box15{
						width: 100%;
					}
					&.box3{
						margin-top: 800px;
						margin-left: 0;
					}
					&.box4{
						margin-left: -50%;
					}
					&.box6{
						margin-top: -600px;
					}
					&.box7{
						margin-top: -600px;
						margin-left: 0;
					}
					&.box8{
						margin-left: 50%;
					}
					&.box9{
						margin-left: -100%;
					}
					&.box9, &.box10{
						margin-top: -800px;
					}
					&.box11 {
						margin-top: -400px;
						margin-left: 50%;
					}
					&.box12{
						margin-top: 0px;
						margin-left: 0;
					}
					&.box13 {
						margin-top: 0;
					}
				}
			}
			.msjDatos{
				&:before, &:after{
					display: none;
				}
			}
		}
		.footer{
			&:after, &:before{
				width: 10%;
			}
		}
	}
	@media screen and (max-width: 400px) {
		section{
			.grid9{
				.box{
					width: 100%;
					&.box1, &.box2,&.box3, &.box4, &.box5, &.box7, &.box8, &.box9{
						width: 100%;
						margin-left: 0;
					}
					&.box5{
						margin-top: 400px;
					}
					&.box6{
						margin-top: 0;
					}
					&.box7{
						margin-top: -1000px;
					}
					&.box8{
						margin-top: -800px;
					}
					&.box9{
						margin-top: 0;
					}
				}
			}
			.grid15 {
				.box{
					width: 100%;
					&.box3{
						margin-top: 1600px;
					}
					&.box4,&.box8, &.box11{
						margin-left: 0;
					}
					&.box4{
						margin-top: -1800px;
					}
					&.box5{
						margin-top: -1600px;
					}
					&.box6{
						margin-top: -1000px;
					}
					&.box8{
						margin-top: 0;
					}
					&.box9, &.box10{
						margin-top: -1400px;
					}
					&.box11{
						margin-top: -600px;
					}
					&.box15{
						.rounded{
							height: 90px;
							width: 90px;
						}
						.comp-4 {
							.element-1{
								width: 40%;
							}
							.element-2 {
								width: 60%;
								.boxComparing {
									height: 70px;
									width: 100%;
									.canvas-holder {
										width: 70px;
									}
									span{
										top: 26px;
										font-size: 16px;
									}
								}
								.data {
									width: 100%;
									margin-top: 0;
									text-align: center;
									ul{
										li{
											margin:0;
											p, span{
												display: inline-block;
												font-size: 12px;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
		.footer{
			&:after, &:before{
				display: none;
			}
			img{
				height: 25px;
				width: 200px;
				margin: 12px auto 0;
			}
		}
	}
}