@charset "utf-8";
/* Global Styles */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
}

body{
	/* background-image: url(../image/Fondo.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 330vh;
	min-width: 0px;
	min-height: 450px; */
}

h2{
	text-align: center;
	font-size: 60px;
	font-family: arial;
	margin-top: 80px;
	color: #184286;
	text-shadow: 0px 0px 6px black;
}


.carrusel {
	width: 100%;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background-image: url(../image/Fondo.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 330vh;
	min-width: 0px;
	min-height: 450px;
}

.content-all{
	width: 165px;  /* Ancho de cada imagen, este datos aplica para las 12 en total */
	margin: auto;
	perspective: 1000px;   /* Distancia de Visualización */
	position: relative;
	margin-top: 50px; 
}

.content-carrousel{
	width: 100%;
	position: absolute;
	animation: rotar 10s infinite linear;
	transform-style: preserve-3d;
}

.content-carrousel:hover{
	animation-play-state: paused;
	cursor: pointer;
}

.content-carrousel figure{
	width: 100%;
	height: 150px;
	overflow: hidden;
	position: absolute;
	box-shadow: 0px 0px 20px 0px black;
	transition: all 300ms;
}

.content-carrousel figure:hover{box-shadow: 0px 0px 0px 0px black;
	transition: all 300ms;
}


.content-carrousel figure:nth-child(1){transform: rotateY(0deg) translateZ(300px);}
.content-carrousel figure:nth-child(2){transform: rotateY(30deg) translateZ(300px);}
.content-carrousel figure:nth-child(3){transform: rotateY(60deg) translateZ(300px);}
.content-carrousel figure:nth-child(4){transform: rotateY(90deg) translateZ(300px);}
.content-carrousel figure:nth-child(5){transform: rotateY(120deg) translateZ(300px);}
.content-carrousel figure:nth-child(6){transform: rotateY(150deg) translateZ(300px);}
.content-carrousel figure:nth-child(7){transform: rotateY(180deg) translateZ(300px);}
.content-carrousel figure:nth-child(8){transform: rotateY(210deg) translateZ(300px);}
.content-carrousel figure:nth-child(9){transform: rotateY(240deg) translateZ(300px);}
.content-carrousel figure:nth-child(10){transform: rotateY(270deg) translateZ(300px);}
.content-carrousel figure:nth-child(11){transform: rotateY(300deg) translateZ(300px);}
.content-carrousel figure:nth-child(12){transform: rotateY(330deg) translateZ(300px);}
 
 .content-carrousel img{
	width: 100%;
	transition: all 300ms;
}

.content-carrousel img:hover{
	transform: scale(1.5);
	transition: all 300ms;
}

@keyframes rotar{
	from{transform: rotateY(0deg);
		}to{transform: rotateY(360deg);}
}

h3{
	font-size: 30px;
	font-family: arial;
	color: aqua;
	width: 100%;
	text-align: center;
}

/* Inicia secuencia para menú horizontal */
#menu_hor {
	padding: 0;
	width: 100%;
	box-sizing: content-box;
	display: inline-block;
 }

#menu_hor li {
 display: inline;
 }

#menu_hor li a {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size: 18px;
	text-decoration: none;
	float: left;
	padding: 10px;
	background-color: #8221BC;
	color: #fff;
	font-style: normal;
	width: 20%;
	text-align: center;
	}

#menu_hor li a:hover {
	background-color: #2586d7;
	margin-top: -2;
	padding-bottom: 10px;
 	color: #DBA065;
 }

/* Hasta aqui el manejo del menú horizontal superior */

/* Manejo de Las tablas de Productos */

.TabDeportivosheader {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	padding: 60px;
	background: white;
	marging-top: 100px;
	border-top: 6px solid #65d6a6;
}

.TabDeportivosheader img{
	width: 300px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	
}
.TabDeportivosheader h1 {
	width: 100%;
	margin-bottom: 60px;
	
}

.TabDeportivosheader p{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
	font-size: 18px;
	font-weight: 100;
	margin-top: 20px;
}

.TabDeportivosheader ul{
    padding-left: 150px;
}

.TabDeportivosheader ul li{
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
	font-size: 18px;
	font-weight: 100;
	
}

.TabDeportivosheader p a {
    width: 100%;
    text-decoration: none;
    color: #2921ef;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
    text-align: left;
    font-size: 15px;
    margin-left: 10%;
    background-color: goldenrod;
}

.TabDeportivosheader a:hover {
    background-color: #001dff;
     color: goldenrod;
}

/* Manejo de Tabla TablaProductos */

.TablaProductos {
    margin: 1px;
    width: 100%;
    background-color: rgb(201, 217, 219);
}
th {
    background-color: #232ad8;
    text-align: center;
    border-bottom: 5px solid #776c6c;
    color: #fff;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
    font-size: 16px;
    font-weight: 100;
}
td {
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
    font-size: 14px;
    font-weight: 100;
}

/* Media query para celulares y dispositivos con pantallas menores a 480 px */
@media only screen and (min-width : 285px) and (max-width : 480px) [

    /* AGREGADO EL 11-JULIO-2019 */
    
.carrusel {
	width: 50%;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background-image: url(../image/Fondo.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 330vh;
	min-width: 0px;
	min-height: 450px;
} 
.content-all{
	width: 105px;  /* Ancho de cada imagen, este datos aplica para las 12 en total */
	margin: auto;
	perspective: 800px;   /* Distancia de Visualización */
	position: relative;
	margin-top: 25px; 
}

.content-carrousel{
	width: 50%;
	position: absolute;
	animation: rotar 10s infinite linear;
	transform-style: preserve-3d;
}

.content-carrousel:hover{
	animation-play-state: paused;
	cursor: pointer;
}

.content-carrousel figure{
	width: 50%;
	height: 100px;
	overflow: hidden;
	position: absolute;
	box-shadow: 0px 0px 20px 0px black;
	transition: all 300ms;
}

.content-carrousel figure:hover{box-shadow: 0px 0px 0px 0px black;
	transition: all 300ms;
}


.content-carrousel figure:nth-child(1){transform: rotateY(0deg) translateZ(300px);}
.content-carrousel figure:nth-child(2){transform: rotateY(30deg) translateZ(300px);}
.content-carrousel figure:nth-child(3){transform: rotateY(60deg) translateZ(300px);}
.content-carrousel figure:nth-child(4){transform: rotateY(90deg) translateZ(300px);}
.content-carrousel figure:nth-child(5){transform: rotateY(120deg) translateZ(300px);}
.content-carrousel figure:nth-child(6){transform: rotateY(150deg) translateZ(300px);}
.content-carrousel figure:nth-child(7){transform: rotateY(180deg) translateZ(300px);}
.content-carrousel figure:nth-child(8){transform: rotateY(210deg) translateZ(300px);}
.content-carrousel figure:nth-child(9){transform: rotateY(240deg) translateZ(300px);}
.content-carrousel figure:nth-child(10){transform: rotateY(270deg) translateZ(300px);}
.content-carrousel figure:nth-child(11){transform: rotateY(300deg) translateZ(300px);}
.content-carrousel figure:nth-child(12){transform: rotateY(330deg) translateZ(300px);}
 
 .content-carrousel img{
	width: 100%;
	transition: all 300ms;
}

.content-carrousel img:hover{
	transform: scale(1.0);
	transition: all 300ms;
}

@keyframes rotar{
	from{transform: rotateY(0deg);
		}to{transform: rotateY(360deg);}
}


h3{
	font-size: 15px;
	font-family: arial;
	color: aqua;
	width: 50%;
	text-align: center;
}

/* Inicia secuencia para menú horizontal */
#menu_hor {
	padding: 0;
	width: 100%;
	box-sizing: content-box;
	display: inline-table;
 }

#menu_hor li {
 display: table-column;
 }

#menu_hor li a {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size: 10px;
	text-decoration: none;
	float: left;
	padding: 10px;
	background-color: #8221BC;
	color: #fff;
	font-style: normal;
	width: 20%;
	text-align: center;
	}

#menu_hor li a:hover {
	background-color: #2586d7;
	margin-top: -2;
	padding-bottom: 10px;
 	color: #DBA065;
 }

/* Manejo de Las tablas de Productos */

.TabDeportivosheader {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	padding: 60px;
	background: white;
	marging-top: 100px;
	border-top: 6px solid #65d6a6;
}

.TabDeportivosheader img{
	width: 300px;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	
}
.TabDeportivosheader h1 {
	width: 100%;
	margin-bottom: 60px;
	
}

.TabDeportivosheader p{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
	font-size: 18px;
	font-weight: 100;
	margin-top: 20px;
}

.TabDeportivosheader ul{
    padding-left: 150px;
}

.TabDeportivosheader ul li{
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
	font-size: 18px;
	font-weight: 100;
	
}

.TabDeportivosheader p a {
    width: 100%;
    text-decoration: none;
    color: #2921ef;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
    text-align: left;
    font-size: 15px;
    margin-left: 10%;
    background-color: goldenrod;
}

.TabDeportivosheader a:hover {
    background-color: #001dff;
     color: goldenrod;
}

/* Manejo de Tabla TablaProductos */

.TablaProductos {
    margin: 1px;
    width: 100%;
    background-color: rgb(201, 217, 219);
}
th {
    background-color: #232ad8;
    text-align: center;
    border-bottom: 5px solid #776c6c;
    color: #fff;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
    font-size: 16px;
    font-weight: 100;
}
td {
    text-align: center;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
    font-size: 14px;
    font-weight: 100;
}

    ]