/* STYLE CONFRONTO */
.site, .npa{
	font-size: 0px;
}

.site{
	background: transparent;
}

*{
	padding: 0;
	margin: 0;
}

.npa{
	padding: 4px 0px;
	background-color: transparent !important;
}

.leftSide{
	display: inline-block;
	width: 330px;
	vertical-align: top;
	position: relative;
	background: white;
	margin: 20px 10px;
	box-shadow: 0px 0px 5px rgba(0,0,0,.1);
}

/* popup atleti */
#velina{
	margin-top: 0px;
}

.darknight{
	margin-top: 0px;
	position: absolute;
	padding-bottom: 10px;
}

#darknight_all{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 900;
	display: none;
}

.popupBox{
	margin-top: 50px;
	top: 0px;
}

.rightSide{
	display: inline-block;
	width: calc( 100% - 370px );
	margin: 20px 10px;
	background: white;
	box-shadow: 0px 0px 5px rgba(0,0,0,.1);
	text-align: center;
}

/* HEADER */
.testata{
	background: url("/img/pattern/magic_land.png");
}

#large-header{
	height: auto;
	width: 100%;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: rgba(0,0,0,.68);
	padding: 40px 0px;
}

#description{
	height: auto;
	overflow: hidden;
	text-align: center;
	background-color: rgba(38, 50, 56, 0);
}

#large-header h1{
	font-size: 60px;
	line-height: 80px;
	margin: 0;
	font-weight: 300;
	color: white;
}


/* LEFT SIDE */

#inputBox{
	width: 90%;
	max-width: auto;
}

#inputBox input{
	-webkit-transition: 1s all;
}

.arena > p{
	padding: 15px 0px;
}

p{
	margin: 0;
	padding: 0;
}

.gen-linea{
	text-align: left;
}

.in-linea{
	display: inline-block;
	height: auto;
	width: 33.33%;
	position: relative;
	color: black;
	text-align: center;
	max-height: 78px;
	overflow: hidden;
	border-bottom: 10px solid;
	font-weight: 100;

	-webkit-transition: .3s all;
}

.tranWidth{
	width: 33.33%;
}

p.legenda{
	font-size: 13px;
	padding-bottom: 5px;
}

p.bigConf{
	line-height: 35px;
	font-size: 25px;
	padding: 10px 0px;
	color: rgb(100,100,100);
}

.leg1{
	border-color: rgb(150, 106, 168);
}

.leg2{
	border-color: #43C4DE;
}

.leg3{
	border-color: rgb(80,80,80);
	height: 78px;
	font-size: 0px;
	vertical-align: bottom;
	color: white;
}

.meta_l{
	color: black;
	font-size: 20px;
	line-height: 78px;
}

.meta{
	vertical-align: top;
	display: inline-block;
	width: 50%;
	height: 100%;
	font-size: 20px;
}

.meta_a{
	height: 50%;
}

.meta_a p{
	line-height: 39px;
}

.p1{
	background-color: rgb(150, 106, 168);
}

.p2{
	background-color: #43C4DE;
}

p.bigConf span{
	line-height: 20px; /*da risolvere*/
	color: black;
}

span.f1, span.f2{
	font-size: 22px;
}
span.f3,span.f4{
	font-size: 25px;
}
span.f5,span.f6,span.f7{
	font-size: 30px;
}
span.f8,span.f9,span.f10{
	font-size: 35px;
}


/* ---------------------- */

.contieni-scelte{
	font-size: 0px;
	text-align: center;
}

.scelta{
	display: inline-block;
	width: 50%;
	font-size: 13px;
	background-color: transparent;
	padding: 10px 0px;
	color: rgb(100,100,100);
	cursor: pointer;
	background-color: rgba(0,0,0,.1);
}

.scelta:hover{
	text-decoration: underline;
}

.contieni-scelte .acceso{
	background-color: transparent;
	color: black;
	cursor: inherit;
}

/* ---------------------- */

.arena{
	text-align: center;
}

.arena p{
	font-size: 14px;
}

.armatura{
	display: inline-block;
	vertical-align: top;
	font-size: 0px;
	background-color: rgb(60,60,60);
	max-width: 150px;
}

.elmo{
	height: 150px;
	width: 150px;
	position: relative;
	background-color: rgb(200,200,200);
	display: inline-block;
	vertical-align: top;

	cursor: pointer;
}

.elmo img{
	width: 100% !important;
	height: 100% !important;
}

.elmo .visiera{
	width: 100%;
	height: 100%;
	-webkit-transition: 1s all;
	-moz-transition: 1s all;
	-ms-transition: 1s all;
	-o-transition: 1s all;
	transition: 1s all;
}

.elmo .velo{
	position: absolute;
	height: auto;
	width: 100%;
	bottom: 0;
	left: 0;
	padding: 5px 0px;
	color: white;

    background-color: rgb(100,100,100);
	background-color: rgba(0,0,0,.6);

	background: -o-linear-gradient(to top, rgba(0,0,0,.6) 10%, transparent 100%);
	background: -ms-linear-gradient(to top, rgba(0,0,0,.6) 10%, transparent 100%);
	background: -moz-linear-gradient(to top, rgba(0,0,0,.6) 10%, transparent 100%);
	background: -webkit-linear-gradient(to top, rgba(0,0,0,.6) 10%, transparent 100%);
	background: linear-gradient(to top, rgba(0,0,0,.6) 10%, transparent 100%);
}

.elmo .velo p{
	margin: 0;
	padding: 0;
	line-height: 20px;
	padding-top: 20px;
	font-size: 13px;
}

.attivaCerchio .cerchioSel{
	position: absolute;
	top: 24px;
	left: 24px;
	margin-top: -15px;
	margin-left: -15px;
	border: 1px solid white;
	border-radius: 100%;
	padding: 5px;
	height: 25px;
	width: 25px;

	-webkit-transition: .4s all;
	-moz-transition: .4s all;
	-ms-transition: .4s all;
	-o-transition: .4s all;
	transition: .4s all;
}

.attivaCerchio .cerchioSel .intSel{
	height: 100%;
	width: 100%;
	background-color: white;
	border-radius: 100%;

	-webkit-animation: pulsate 3s infinite linear;
	animation: pulsate 3s infinite linear;
}


/* --- */
.armatura .infoBox{
	max-width: 100%;
	background-color: white;
	padding: 6px;
}

.armatura .infoBox p.info{
	margin: 0;
	font-size: 12px;
	line-height: 20px;
	text-align: left;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#atleta1{
	border-bottom: 10px solid rgb(150, 106, 168);
}

#atleta1 .visiera{
	background-color: rgb(150, 106, 168);
}

#atleta2{
	border-bottom: 10px solid #43C4DE;
}

#atleta2 .visiera{
	background-color: #43C4DE;
}

.backRed{
	background-color: #f61e23 !important;
}

.armatura .visiera .sf{
	background: transparent !important;
}

.comandi{
	width: 100%;
	min-height: 40px;
	text-align: center;
	font-size: 0px;
	padding: 10px 0px;
}

.comandi .mezzo{
	cursor: pointer;
	font-size: 13px;
	text-align: center;
	display: inline-block;
	width: 50%;
	max-width: 150px;
	line-height: 40px;
}

#confronta{
	background-color: #263238;
	color: white
}

#resetta{
	background-color: transparent;
}

.comandi{
	margin-top: 5px;
}


/* ----- */
/* suggerimento atleti/avversari */
.sfidaAuto{
	font-size: 13px;
	padding: 10px 0px;
	width: 90%;
	margin: 0 auto;
}

.sfidaAuto ul{

}

.sfidaAuto ul li{
	font-size: 13px;
	color: rgb(80,80,80);
	padding: 5px 0px;
	border-bottom: 1px solid rgba(0,0,0,.1);
}

.sfidaAuto ul li a{
	color: rgb(80,80,80);
}

.sfidaAuto ul li a:hover{
	color: black;
}

.sfidaAuto > p{
	font-size: 13px;
	text-transform: uppercase;
	text-align: center;
}

/* --------------------------------------------------------------------- */
/* AREA DI BATTAGLIA (rightside)*/

#area_di_battaglia{
	padding: 10px 0px;
	text-align: center;
}


/* todo: da spostare! */
/* tabella personali */
.T0{
	min-height: 266px !important;
	max-height: 266px !important;
	overflow: auto;
	background-color: rgb(60,60,60) !important;
}

.T0 .titolo-tabella{
	background-color: rgb(40,40,40);
}

.riga_pb{
	border-bottom: 1px solid rgba(0,0,0,.3);
}

.all_pb{
	width: 75%;
	display: inline-block;
	vertical-align: top;
	color: rgb(230,230,230);
}

.pb1{
	border-bottom: 10px solid rgb(150, 106, 168);
}

.pb2{
	border-bottom: 10px solid #43C4DE;
}

.gara{
	font-size: 13px;
	line-height: 30px;
	color: rgb(130,130,130);
	width: 25%;
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.pb_split_50{
	font-size: 15px;
	line-height: 30px;
	width: 50%;
	display: inline-block;
	vertical-align: top;
}

.sfidaTitle{
	padding: 10px 0px;
	text-align: center;
	color: rgb(150, 106, 168);
}

#description .sfidaTitle h1{
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 25px;
}

#description h1 .borda{
	color: white;
	padding: 0px 10px;
	line-height: 110%;
	font-weight: 100;
}

.hover{
	background-color: rgba(0,0,0,.7);
	color: white;
}

.allineatore{
	display: none;
	font-size: 11px;
	display: inline-block;
	vertical-align: top;
}

.contieniTab{
	max-height: 230px;
	overflow-y: auto;
}


.no-small{
	display: none;
}

.contieni-tabelle{
	margin: 20px 0px;
	text-align: center;
	font-size: 0px;
	background: rgb(240,240,240);
	display: inline-block;
	vertical-align: top;
	margin: 5px;
	width: 300px;
}

.fluttua{
	width: 100%;
	max-width: 700px;
	margin: 0;
	background-color: rgba(0,0,0,.03) !important;
}

.analisiBox{
	overflow: hidden;
	-webkit-transition: .5s all;
}

.contaAltezza{

}

.titolo-tabella{
	text-align: left;
	background-color: rgb(150, 106, 168);
	cursor: pointer;
}

.titolo-tabella p.big{
	padding: 6px 24px;
	font-size: 25px;
	margin: 0;
	color: white;
	background-color: rgba(0,0,0,.1);
	display: inline-block;
}

.titolo-tabella img.rightImg{
	float: right;
	padding: 10px;
	width: 26px;
	height: 26px;
}

.corpo-tabella{
	padding: 10px 0px;
}

.corpo-tabella p.tabUno{
	color: #f61e23;
}

.corpo-tabella p.tabDue{
	color: #1C5386;
}

.footer-tabella{
	padding: 10px 20px;
	background-color: rgb(80,80,80);
	text-align: left;
}

.footer-tabella{
	margin: 0;
	padding: 0;
	color: white;
	text-align: right;
}

.riquadro-scontro{
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: rgba(0,0,0,.5);
	font-size: 17px;
	line-height: 50px;
	text-align: center;
}

#scontro-uno{
	background-color: #f61e23;
}

#scontro-due{
	background-color: #71B0EB;
}

.autom{
	width: auto !important;
	padding: 0px 20px;
}

.single-race{
	display: none;
}

.contieni-tabelle table thead{
	background-color: transparent;
	color: black;
}

.contieni-tabelle table,
.contieni-tabelle table th{
	font-size: 11px;
}

.contieni-tabelle table.tabUno th{
	background-color: #2CB4D1;
}

.contieni-tabelle table.tabDue th{
	background-color: #EF6469;
}

/* ------ */
.sf{
  width: 100%;
  height: 100%;
  background-color: red;
  text-align: center;
  font-weight: 100;
}

.sf p{
  line-height: 150px;
  margin: 0;
  color: white;
  margin:0;
  font-size: 55px;
  text-shadow:1px 1px 2px rgba(0,0,0,.6)
}

@media screen and (max-width: 980px) {
  .contieni-tabelle{
  	width: 95%;
  }
}



/* -------------------------- */

.noEff{
	box-shadow: none !important;
	background: transparent !important;
}

.titolo{
}

.bigTips{
	background: url("../img/pattern/magic_land.png");
	margin-bottom: 30px;
}

.noMarg{
	width: 95%;
	max-width: 700px;
	margin: 10px auto;
}

.colore{
	background-color: rgb(98, 145, 47);
	background-color: rgba(98, 145, 47, 0.85);

	background: -o-linear-gradient(to right, rgba(98, 145, 47, 0.85) 0%, rgba(148, 181, 98, 0.78) 100%);
	background: -ms-linear-gradient(to right, rgba(98, 145, 47, 0.85) 0%, rgba(148, 181, 98, 0.78) 100%);
	background: -moz-linear-gradient(to right, rgba(98, 145, 47, 0.85) 0%, rgba(148, 181, 98, 0.78) 100%);
	background: -webkit-linear-gradient(to right, rgba(98, 145, 47, 0.85) 0%, rgba(148, 181, 98, 0.78) 100%);
	background: linear-gradient(to right, rgba(98, 145, 47, 0.85) 0%, rgba(148, 181, 98, 0.78) 100%);
}

.othercolore{
	background-color: rgb(84, 111, 85);
	background-color: rgba(84, 111, 85, 0.87);

	background: -o-linear-gradient(to right, rgba(84, 111, 85, 0.87) 0%, rgba(119, 141, 139, 0.9) 100%);
	background: -ms-linear-gradient(to right, rgba(84, 111, 85, 0.87) 0%, rgba(119, 141, 139, 0.9) 100%);
	background: -moz-linear-gradient(to right, rgba(84, 111, 85, 0.87) 0%, rgba(119, 141, 139, 0.9) 100%);
	background: -webkit-linear-gradient(to right, rgba(84, 111, 85, 0.87) 0%, rgba(119, 141, 139, 0.9) 100%);
	background: linear-gradient(to right, rgba(84, 111, 85, 0.87) 0%, rgba(119, 141, 139, 0.9) 100%);
}

.velato h2{
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 100;
}

.velato{
	padding: 15px;
	color: white;
}

.avviso{
	background: rgba(255,255,255,.6);
	font-size: 14px;
	padding: 15px;
	text-align: justify;
}

.avviso a{
	display: block;
	padding: 2px 0px;
	color: rgba(0,0,0,.8);
}

.avviso a:hover{
	color: rgb(84, 111, 85);
	text-transform: uppercase;
}


#caricaBox{
	text-align: center;
	font-size: 14px;
}

#loadTable{
	display: inline-block;
}

/* -------------------------------- */
.darkscroll::-webkit-scrollbar {  
    width: 8px;  
}  
.darkscroll::-webkit-scrollbar-track {  
    background-color: #eaeaea; 
    border-left: 1px solid #ccc;  
}  
.darkscroll::-webkit-scrollbar-thumb {  
    background-color: #555;  
}  
.darkscroll::-webkit-scrollbar-thumb:hover {  
    background-color: #222;  
}  

::-moz-scrollbar {
     background-color: purple;
}

::-moz-scrollbar-thumb {
     background-color: red;
}

div.darkarea::-moz-scrollbar {
    background-color: white;
}

div.darkarea::-moz-scrollbar {
    background: gray;
}

.social-container{
	text-align: center;
}

.social-button{
	display: inline;
	display: inline-block;
	padding: 5px;
}



/* ------------------------------------------- */
/* ------------------------------------------- */
@keyframes pulsate {
  from {
    opacity: 1;
  }
  to { 
   	opacity: 0;
  }
}

@-webkit-keyframes pulsate {
  from {
    opacity: 1;
  }
  to { 
    opacity: 0;
  }
}

@media all and (max-width: 540px){
	.sfidaTitle{
		font-size: 14px;
		position: fixed;
		top: 50px;
		left: 0px;
		width: 100%;
		background-color: rgb(73,73,73);
		z-index: 189;
	}

	#description .sfidaTitle h1{
		font-size: 15px;
		line-height: 17px;
	}

	#description .sfidaTitle span.borda{
		display: inline-block;
		padding: 3px 6px;
		max-width: 140px;
		overflow: hidden;
		text-overflow: ellipsis;
		vertical-align: middle;
		white-space: nowrap;
	}

	#large-header h1{
		font-size: 32px;
	}

	.leftSide, .rightSide{
		margin: 5px 0px;
		width: 100%;
	}

	.meta, .meta_a, .meta_l{
		font-size: 15px !important;
	}
}