/* INICIO MENU */
/* A simple, css only, (some-what) responsive menu */

/*body { 
  background: #ccc;
  font-family: helvetica, arial, serif;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
}*/
 

/* DISEÑO DEL BOTON */
.wrap {
  display: inline-block;
  margin: 0;
  left: 10px;
  top: -12px;
  position: relative;
  /*-webkit-box-shadow: 0 0 70px #fff;
  -moz-box-shadow: 0 0 70px #fff;
  box-shadow: 0 0 70px #fff;
  margin-top: 40px;*/
}

/* a little "umph" */
/*.decor {
  background: #6EAF8D;
  background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
  background: linear-gradient(left, white 50%, #6EAF8D 50%);
  background-size: 50px 25%;;
  padding: 2px;
  display: block;
}*/

/*a {
  text-decoration: none;
  color: #fff;
  display: block;
}*/

ul.primary {
  list-style: none;
  position: relative;
  text-align: left;
    top: 1px;
    margin: 4px 0px 27px 0px;
    padding: 0px;
    font: 24px/23px 'gothamrounded-light';
}

ul.sub {
  list-style: none;
  position: relative;
  text-align: left;

    margin: 0px 0px 27px 0px;
    padding: 0px;
}

ul.sub li, ul.primary li {
  float: left;
}

/* clear'n floats */
ul.sub:after, ul.primary:after {
  clear: both;
}

ul.sub:before,
ul.sub:after,
ul.primary:before,
ul.primary:after,{
    content: " ";
    display: table;
}

nav.mymenu {
  position: relative;
  letter-spacing: 1px;
  text-align: center;
  background: url(../img/bg-box.jpg) repeat-x 0px 0px; 
 border: 1px solid white;
  top: 8px;
    
  /*background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;*/
}

/* prime */
ul.primary li a {
    display: block;
    padding: 0px 25px;
    color: black;
    text-decoration: none;
    border-right: 1px solid #3D3D3D;
}

ul.primary li:last-child a {
  border-right: none;
}

ul.primary li a:hover {
  
  color: #000;
}

/* subs */
ul.sub {
  position: absolute;
  z-index: 200;
  box-shadow: 1px 1px 0 #222;
  width: 100%;
  display:none;
}

ul.sub li {
  float: none;
  margin: 0;
}

ul.sub li a {
    margin: 0;
    text-align: center;
    text-transform: uppercase;  
    
  border-bottom: 1px dotted #ccc;
  border-right: none;
  color: #000;
  padding: 10px 10px 10px 10px;
}

ul.sub li:last-child a {
  border-bottom: none;
}

ul.sub li a:hover {
  color: #000;
  background: #d3d727;
}

/* sub display*/
ul.primary li:hover ul {
  display: block;
  background: #fff;
}

/* keeps the tab background white */
ul.primary li:hover a {
  /*background: #fff;*/
  color: #000;
  text-shadow: none;
}

ul.primary li:hover > a{
  color: #000;
} 

@media only screen and (max-width: 600px) {
  .decor {
    padding: 3px;
  }
  
  .wrap {
    width: 100%;
    margin-top: 0px;
  }
  
   li {
    float: none;
  }
  
  ul.primary li:hover a {
    background: none;
    color: #8B8B8B;
    text-shadow: 1px 1px #000;
  }

  ul.primary li:hover ul {
    display: block;
    background: #272727;
    color: #fff;
  }
  
  ul.sub {
    display: block;  
    position: static;
    box-shadow: none;
    width: 100%;
  }
  
  ul.sub li a {
    background: #272727;
  	border: none;
    color: #8B8B8B;
  }
  
  ul.sub li a:hover {
    color: #ccc;
    background: none;
  }
}

/* FIN MENU */


.ajust {
    position: relative;
    padding-right: 10px;
    top: -6px;
}

body{
	background: #f2f2f4;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'gothamrounded-bold';
    src: url('../fonts/gothamrounded-bold.eot');
    src: url('../fonts/gothamrounded-bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamrounded-bold.woff') format('woff'),
         url('../fonts/gothamrounded-bold.ttf') format('truetype'),
         url('../fonts/gothamrounded-bold.svg#prelo_compressedsemibold') format('svg');
}

@font-face {
    font-family: 'gothamrounded-light';
    src: url('../fonts/gothamrounded-light.eot');
    src: url('../fonts/gothamrounded-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamrounded-light.woff') format('woff'),
         url('../fonts/gothamrounded-light.ttf') format('truetype'),
         url('../fonts/gothamrounded-bold.svg#prelo_compressedsemilight') format('svg');
}


@font-face {
    font-family: 'prelo_compressedsemibold';
    src: url('../fonts/prelocompressed-semibold-webfont.eot');
    src: url('../fonts/prelocompressed-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelocompressed-semibold-webfont.woff') format('woff'),
         url('../fonts/prelocompressed-semibold-webfont.ttf') format('truetype'),
         url('../fonts/prelocompressed-semibold-webfont.svg#prelo_compressedsemibold') format('svg');
}
@font-face {
    font-family: 'prelo_compressedbook';
    src: url('../fonts/prelocompressed-book-webfont.eot');
    src: url('../fonts/prelocompressed-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelocompressed-book-webfont.woff') format('woff'),
         url('../fonts/prelocompressed-book-webfont.ttf') format('truetype'),
         url('../fonts/prelocompressed-book-webfont.svg#prelo_compressedbook') format('svg');
}
@font-face {
    font-family: 'prelo_condensedbook';
    src: url('../fonts/prelocondensed-book-webfont.eot');
    src: url('../fonts/prelocondensed-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelocondensed-book-webfont.woff') format('woff'),
         url('../fonts/prelocondensed-book-webfont.ttf') format('truetype'),
         url('../fonts/prelocondensed-book-webfont.svg#prelo_condensedbook') format('svg');
}
@font-face {
    font-family: 'prelo_condensedbold';
    src: url('../fonts/prelocondensed-bold-webfont.eot');
    src: url('../fonts/prelocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelocondensed-bold-webfont.woff') format('woff'),
         url('../fonts/prelocondensed-bold-webfont.ttf') format('truetype'),
         url('../fonts/prelocondensed-bold-webfont.svg#prelo_condensedbold') format('svg');
}
@font-face {
    font-family: 'prelo_compressedbold';
    src: url('../fonts/prelocompressed-bold-webfont.eot');
    src: url('../fonts/prelocompressed-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/prelocompressed-bold-webfont.woff') format('woff'),
         url('../fonts/prelocompressed-bold-webfont.ttf') format('truetype'),
         url('../fonts/prelocompressed-bold-webfont.svg#prelo_compressedbold') format('svg');
}

@font-face {
    font-family: 'actoblack_italic';
    src: url('../fonts/acto-black_italic-webfont.woff2') format('woff2'),
         url('../fonts/acto-black_italic-webfont.woff') format('woff');
}
@font-face {
    font-family: 'actobold';
    src: url('../fonts/acto-bold-webfont.woff2') format('woff2'),
         url('../fonts/acto-bold-webfont.woff') format('woff');
}

a.btn-enviar {
    color: black;
    text-decoration: none;
    padding-right: 5px;
}


.header-comercio {
    background: #000;
    min-width: 980px;
    padding: 5px 0px 5px 0px;
}
    .ctn-header-comercio {
        margin: 0 auto;
        max-width: 980px;
        padding: 0 15px;
        text-align: left;
    }

        .ctn-header-comercio a {
            display: inline-block;
            text-indent: -9999px;
        }
            a.logo-comercio {
                background: url(../img/logo-depor.png) no-repeat 0 6px;
                background-size: 100%;
                height: 40px;
                width: 154px;
            }
        #social {
            float: right;
            margin-right: 0;
        }
            #social ul{
                display: inline-block;
                margin: 5px auto 0;
                padding: 0;
                vertical-align: middle;
            }
                #social ul li{
                    display: inline-block;
                    margin: 0 1px;
                    vertical-align: middle;
                }
                    #social ul li a{
                        height: 32px;
                        text-indent:-9999px;
                        width: 32px;
                    }
                        #social ul li a.facebook {
                            background: url('../img/redes.png') no-repeat -17px -9px;
                        }
                        #social ul li a.tw {
                            background: url('../img/redes.png') no-repeat -56px -9px;
                        }
                        #social ul li:hover{
                            opacity: 0.5;
                        }



.clear{clear:both;*zoom:1;}
#header{
	background:#ffc605;
	padding: 3px 0;
	position: relative;
	width: 100%;
	z-index: 100;
}
	.ctn-header{
		margin: 0 auto;
		width: 1065px;
	}		
		.logo{
			background:url(../img/logo-comercio.png) no-repeat;
			background-position: 0 -49px;
			margin: 0 auto;
			width: 122px;
		}
			.logo > a{
				display: block;
				height: 25px;
			}
		.comp{
			background-position: 0 -129px;
			float: right;
			height: 40px;
			margin: 35px -8px 0 0;
			width: 257px;
		}
.main{
    background: url(../img/bg-movil.jpg) repeat-x;
    height: 920px;
    margin: 0 auto;
    position: relative;
    width: 1200px;
}
.main2{
	background: url(../img/bg.jpg) no-repeat center top;
	height: 400px;
	margin: 0 auto;
	position: relative;
	width: 1200px
}	
	.inner{
		height: 535px;
		width: 915px;
	}	

    .box-texto-intro-movil{
            color: #fff;
            margin: 0 auto;
            padding: 10px 0;
            width: 100%;
        }
        .padding-bottom-20{
            padding-bottom: 20px;
        }	
        .box-texto-intro-movil h1{			
            font: 35px/35px 'actoblack_italic';
            margin: 0;
            padding-bottom: 10px;
			text-align: center;
			text-transform: uppercase;
		}	
			.box-texto-intro-movil h1 a{
				color: #e31113;
				text-decoration: none;
			}
		.box-texto-intro-movil h2{
                font: 20px/25px 'actobold';
                text-align: center;
                margin: 5px 20px;
		}

		.box-texto-intro-movil h2 span, .box-texto-intro-movil h1 span {
            font: 18px/28px 'actobold';
            padding: 3px 11px;
            border-radius: 110px;
            background-color: #e31113;
            margin-right: 5px;
		}

		.box-texto-intro-movil h3{
			float: left;
			font: 20px/20px  'prelo_compressedbook';
			margin: 0;
			padding: 15px 15px 0 15px;	
			width: 370px;		
		}

	.box-texto-intro{
		color: #fff;
		margin: 0 auto;
		padding: 10px 0;
		width: 900px;
	}
		.box-texto-intro h1{			
            font: 25px/20px 'gothamrounded-bold';
			margin: 0;
			text-align: center;
			text-transform: uppercase;
            color: black;
            padding-top: 20px;
		}	
			.box-texto-intro h1 a{
				color: #ff0703;
				text-decoration: none;
			}
                .box-texto-intro h1 span{
				    /*color: #fff;*/
				    text-decoration: none;
                    font: 12px/20px 'gothamrounded-bold';
			     }

                    .box-texto-intro p {
                        font: 20px/20px 'gothamrounded-light';
                        text-align: center;
                        margin: 2px 0px 10px 0px;
                        color: #000200;
                    }

            .box-texto-intro h4 {
                margin: 0px;
            }

            .box-texto-intro h4 p {
                text-align: right;
                margin: 0px;
                width: 58%;
                float: left;
            }

        .box-texto-intro h2 {
            font: 45px/45px 'gothamrounded-light';
            text-align: center;
            margin: 10px 0px;
            color: #000200;
        }

		.box-texto-intro h2 span, .box-texto-intro h1 span {
            text-decoration: none;
            font: 15px/20px 'gothamrounded-bold';
		}

		.box-texto-intro h3{
			float: left;
			font: 20px/20px  'prelo_compressedbook';
			margin: 0;
			padding: 15px 15px 0 15px;	
			width: 370px;		
		}

.contendor-cesar{
    width: 100%;
    /* height: 100%; */
    min-height: 30%;
    display: block;
    position: absolute;
    background-color: pink;
}


.box-tab{
	height: 530px;
	margin: 0 auto;
	overflow: hidden;
}

.guerrero{
	position: relative;
    top: -300px;
    left: 720px;
}

.farfan{
	position: relative;
    top: -300px;
    left: -140px;
}



ul.tabs-home{
		list-style: none;
		margin: 0 auto;
		padding: 0;
		text-align: center;
		text-transform: uppercase;
		width: 865px;
	}
		ul.tabs-home li{
			/*display: inline-block;*/
			*display: inline;
			margin-right: -4px;
            
                background-color: rgba(0,0,0,0.7);
                width: 30%;
                padding: 2px 2px;
                margin: 2px auto;
                background-color: ;
                border: 1px solid #93080b;
		}
		ul.tabs-home li:hover{
            background-color: rgb(193,0,3, 0.7);
		}
			ul.tabs-home li a{			
                color: #fff;
                font: 35px/45px 'prelo_compressedbold';
                /* padding: 10px; */
                text-decoration: none;
			}   
			ul.tabs-home li a.active{
					background: url(../img/bg-trans.png) repeat;
				} 

	ul.tabs{
		list-style: none;
		margin: 0 auto;
		padding: 20px 0 0 0;
		text-align: center;
		text-transform: uppercase;
		/*width: 865px;*/
        background-color: #d3d727;
	}
		ul.tabs li{
			display: inline-block;
			*display: inline;
			margin-right: -4px;
            padding: 0px 5px;
		}
			ul.tabs li a{				
                color: #000;
                font: 20px/25px 'prelo_compressedbold';
                padding: 2px 8px;
                text-decoration: none;
                width: 100px;
                height: 25px;
                background-color: white;
                display: block;
			}   
			ul.tabs li a.active{
					/*background: url(../img/bg-trans.png) repeat;*/     
                    background-color: rgb(0, 0, 0);
                    color: white;
				} 
			.uni-content{
				/*background: url(../img/bg-trans.png) repeat;	*/
				width: 100%;
                /*background-color: rgba(78, 0, 0, 0.5);
                border: 1px solid black;*/
			}
				.orbit{
					/*margin-top: 11px;*/
                    background: url(../movil/img/bg-jugadores.jpg);
				}
					.ui-item{ 
						float: left;
					}
						.ui-item ul{ 			
							list-style: none; 
							margin: 0 auto;
							padding: 0; 
							text-align: center;	
							width: 865px;	 
						}
							.ui-item ul li{ 
								cursor: pointer;
								display: inline-block; 
								margin: 10px;
								position: relative;
								z-index: 2; 
							}
							.ui-arrows{
								height: 64px;
								margin: 0 auto;
								position: relative;
								text-indent: -99999px;
								top: 50px;
								width: 865px;
							}
								a.ui-prev{
                                    background: url(../img/sprites.png) no-repeat -250px -118px;
                                    display: block;
                                    height: 55px;
                                    left: 5px;
                                    position: absolute;
                                    top: 0;
                                    width: 35px;
								}
								a.ui-next{
                                    background: url(../img/sprites.png) no-repeat -250px -163px;
                                    display: block;
                                    height: 50px;
                                    position: absolute;
                                    top: 0;
                                    right: 5px;
                                    width: 34px;
								}
							.drag-item img{ 
								border-radius:50%;
							}
							.last{
								float: left;
								margin: 0 0 0 245px;
								width: 420px;
							}
								.lat{
									margin: 0 0 0 209px !important;
									width: 640px !important;
								}
					.dropable-content .drop-list{ 
						list-style: none; 	
						margin: 0; 
						padding: 0; 
						text-align: center;
					}
						.dropable-content .drop-list li{ 							
							display: inline-block; 
							margin: 0 10px;

							*float: left;
							/*margin-left: 15px;*/
							*position: relative;
							*width: 110px;
						}
							.dropable-content .drop-list li .drop-item{ 								
								border-radius: 50%; 
								height: 110px; 		
								position: relative; 
								width: 110px;
								z-index: 1;
							}
								.dropable-content .drop-list li .drop-item.DropTarget{ 
									background: rgba(225,233,12, 0.65); 
									opacity: .5;
									-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
									/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#c04040, endColorstr=#a43333);*/
								}
					.content-names{
						background: url(../img/sprites.png) no-repeat 0 -225px; 
						height: 102px;	
						margin: 20px auto;						
						width: 715px; 	
					}
						span.names{
							display: block;
							color: #000;
							font: 23px/24px 'prelo_compressedsemibold';
							margin: 0 auto;
							padding-top: 30px;
							text-align: center;
							width: 490px;
						}
					.select{ 
						cursor: auto;
						opacity: .5;
						-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
					}
					.caption > span.nombre-jugador{
						    color: #000;
                            font: 15px/17px 'gothamrounded-light';
					}
					.caption > span.apellido-jugador{
                        color: #000;
                        float: none;
                        font: 21px/18px 'gothamrounded-bold';
					}
					.caption > span.anio{
						color: #fff;
					}
					.drop-item .cerrar{ 
						background: #000;
						border: 2px solid #ecebd5;
						border-radius: 20px;
						color: #fff;
						cursor: pointer;
						display: none; 
						font: 25px/17px 'prelo_condensedbold';
						height: 20px;
						position: absolute; 
						right: 10px; 
						top: 0;
						width: 20px;
					}
						.drop-item:hover .cerrar{
						 display: block;
						}
						.arquero{
							background: url(../img/sprites.png) no-repeat -70px 0;
						}
						.lat-der{
							background: url(../img/sprites.png) no-repeat -182px 0;
						}
						.def{
							background: url(../img/sprites.png) no-repeat -293px 0;
						}
						.lat-izq{
							background: url(../img/sprites.png) no-repeat -404px 0;
						}
						.med{
							background: url(../img/sprites.png) no-repeat -515px 0;
						}
						.med-del{
							background: url(../img/sprites.png) no-repeat -2px -112px;
						}
						.del{
							background: url(../img/sprites.png) no-repeat -114px -112px;
						}
						.dt{
							background: url(../img/sprites.png) no-repeat -226px -112px;
						}
						/*.primero{
							margin: 0 0 0 -40px !important;
						}*/
						/*.medio{
							margin: 0 0 0 80px !important;
						}*/
		span.nombre-jugador, span.apellido-jugador, span.anio{
			color: #000;
			display: block;
			text-transform: uppercase;
			font: 16px/18px 'prelo_condensedbook';
		}
		span.apellido-jugador{
			*display: inline;
			display: inline-block;
			font: 19px/22px 'prelo_condensedbold';
		}
		span.anio{
			font-family: 16px/18px 'prelo_compressedbook';
		}
		span.coma{
			*display: inline;
			display: inline-block;
			line-height: 15px;
			margin: 0 2px;
		}
		.separador{
			/*background: #b70000;*/
			display: inline-block;
			*display: inline;
			height: 160px;
			margin: 0 auto;
			width: 1px;
		}
		.drops{
			margin: 0 165px;
			position: absolute;
			top: 470px;
			width: 865px;
		}
			.seleccion{
				margin: 0 25px;
				top: 150px;
			}
		.send{
            background: black;
            border: 1px solid #fff;
            color: #fff;
			cursor: pointer;
			display: block;
			font: 22px/23px 'prelo_compressedbold';698
			height: 35px;
			margin: 0 385px;
			padding: 5px 15px;
			text-transform: uppercase;		
		}
		input[disabled]{
            border-color: #9c9c9c;
            color: #9c9c9c;
            background-color: transparent;
		}

@-moz-document url-prefix() {
    .orbit{
		margin-top: 13px;
	}
}
/* IE7, IE8 */
.send { margin/*\**/: 0 370px\9; }

.dropable-content .drop-list li .drop-item{ height/*\**/: 112px\9; }

@media screen and (max-width: 1024px){
    #header {
        width: 1200px;
    }
}

.seleccion{
	position: relative;
	top: 0;
}
.box-image-upload{
	height: 495px;
}

.btn-descargar{
	background: #fff;
	color: #000;
	cursor: pointer;
	font: 16px/26px 'actobold';
	margin: 25px auto 0;
	padding: 10px 0;
	text-align: center;
	width: 195px;
}
	.btn-descargar i{
		background: url(../img/btn-descargar-negro.png) no-repeat 0 0;
		display: inline-block;
		height: 26px;
		vertical-align: top;
		width: 26px;
	}

	.btn-descargar:hover{
		background: #e31114;
		color: #fff;
	}
	.btn-descargar:hover i{
		background: url(../img/btn-descargar.png) no-repeat 0 0;
	}
.img-logo{
    height: 37px;
    position: absolute;
    right: 10px;
    top: 15px;
    width: 95px;
}

@media screen and (max-width: 768px){

    .header-comercio {
    	min-width: inherit;
        width: 100%;
    }
    	.ctn-header-comercio{
			width: 95%;
    	}
    .main,
    .main2,
    .drops,
    .content-names,
    .box-texto-intro,
    ul.tabs,ul.tabs-home,
    .ui-arrows{
    	width: 100%;
    }
    	.drops{
    		margin: 0 auto;
    	}
    	.send{
    		margin: 0 auto;
    	}

    .ui-item ul{
    	width: 100%;
    }
    .dropable-content .drop-list li {
	    margin: 0 30px;
	}

	.box-image-upload{
		height: 100%;
	}
	.btn-descargar{
		font: 22px/26px 'actobold';
		width: 250px;

}