/* paleta de colores:
    bordo       #006600
    rojito      #E54B4B
    crema       #F0E7D8
    grisecito   #74776B
    grisverde   #48483A
*/

/* Ejemplo de fuente subida al propio servidor de la pagina */
@font-face{ 
    font-family:'adidas'; 
    src:url('fuentes/Adidas.otf') format('opentype');             
} 

body{
    background-color: #48483A;
    font-family:  'Architects Daughter','adidas', cursive;
}

/* poniendo la coma entremedio indicamos que son atributos aplicados a cada etiqueta */
header, footer, section{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
header, #inicio, #objetivo, #productos{
    margin-bottom: 15px;
}

#titulo, #equipos, footer{
    background-image: url("imagenes/cesped.jpg");
}

/**********  ENCABEZADO  **********/
header{
    height: 100px;
    background-color: #006600;
}

#titulo{
    width: 960px;
    height: 110px;
    float: left;
    line-height: 100px;
    /* con esto le decimos que las propiedades de tamaño son para la caja
    sino te lo aplica para los elementos internos y te modifica la caja
    segun eso */
    box-sizing: border-box;
}


h1{
    font-size: 60px;
    margin:0px;
    padding: 0px;
    color: white;
    text-align: center;
    border: 5px solid white;
    box-sizing: border-box;
}


/**********  Equipos  **********/
#equipos{
    height: 630px;
    width: 790px;
    background-color:#006600;
    margin-top: 10px;
    box-sizing: border-box;
}

.titulo_equipo{
    height: 100px;
    width: 380px;
    margin: 10px 0px 0px 10px;
    background-color: #b00202;
    float: left;
}

.titulo_equipo h3{
    text-align: center;
    margin: 0px;
    font-size: 60px;
    line-height: 100px;
    text-shadow: 10px 5px 2px rgba(116, 119, 107, 0.3);
}

.lista_equipo{
    height: 500px;
    width: 380px;
    margin: 10px 0px 0px 10px;
    /* background-color: #b00202; */
    float: left;
}

.lista_equipo h3{
    text-align: left;
    margin: 0px 0px 0px 30px;
    /* margin: 0px; */
    font-size: 50px;
    line-height: 100px;
    box-sizing: border-box;
    /* text-shadow: 10px 5px 2px rgba(116, 119, 107, 0.3); */
}

.fuente_numeros{
    font-family: 'adidas', 'Architects Daughter';
    box-sizing: border-box;
    margin: 0px;
    font-size: 45px;
    line-height: 100px;
    /* text-shadow: 10px 5px 2px rgba(116, 119, 107, 0.3); */
}

.equipo_negro{
    background-color: black;
    color: grey;
}

@-webkit-keyframes anim-equipo-negro {
    0% {
        text-shadow: 10px 5px 2px rgba(116, 119, 107, 0.3);
        color: #ff9999;
    }
    25% {
        text-shadow: 5px 10px 2px rgba(116, 119, 107, 0.3);
        color: #ffe699;
    }   
    50% {
        text-shadow: 1px 15px 2px rgba(116, 119, 107, 0.3);
        color: #ccff99;
    }   
    75% {
        text-shadow: -5px 10px 2px rgba(116, 119, 107, 0.3);
        color: #99ffcc;
    }   
    100% {
        text-shadow: -10px 5px 2px rgba(116, 119, 107, 0.3);
        color: #99ccff;
    }   
}

.equipo_negro h3 { 
    -webkit-animation-name: anim-equipo-negro;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    /*para que vuelva a su posicion inicial */
    -webkit-animation-direction: alternate;
    position: relative;
}

.equipo_blanco{
    background-color: white;
    color: grey;
}

@-webkit-keyframes anim-equipo-blanco {
    0% {
        text-shadow: 10px 5px 2px rgba(116, 119, 107, 0.3);
        color: #802000;
    }
    25% {
        text-shadow: 5px 10px 2px rgba(116, 119, 107, 0.3);
        color: #808000;
    }   
    50% {
        text-shadow: 1px 15px 2px rgba(116, 119, 107, 0.3);
        color: #408000;
    }   
    75% {
        text-shadow: -5px 10px 2px rgba(116, 119, 107, 0.3);
        color: #008040;
    }   
    100% {
        text-shadow: -10px 5px 2px rgba(116, 119, 107, 0.3);
        color: #006080;
    }   
}

.equipo_blanco h3 { 
    -webkit-animation-name: anim-equipo-blanco;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    /*para que vuelva a su posicion inicial */
    -webkit-animation-direction: alternate;
    position: relative;
}

#botonera_principal{
    width: 790px;
    height: 600px;
    list-style-type: none;
    /*background-color: #D67AB1;*/
    float: left;
    padding: 0px;
    margin:0px;
}

#botonera_principal ul{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    float: left;
}

#botonera_principal ul li{
    display: inline;
    padding: 0px;
    margin: 10px 0px 0px 10px; 
    background-color: #F0E7D8;
    float: left;
}

#botonera_principal ul li a{
    /*  con display podemos cambiar el tipo de elemento ya que el a es de linea y lo podemos poner como bloque
        asi se pueden aplicar propiedades de bloque al vinculo */
    /*display: block;*/
    /*  si se usa el valor inline-block se le dice que queremos que tome a este elemento como bloque pero que
        va a estar dentro de otro con la propiedad enlinea */
        display: inline-block;
        /* display: block; */
        width: 250px;
        height: 300px;
        /* para centrar el texto verticalmente se le asigna una altura de linea igual a la altura del elemento */
        line-height: 30px;
        text-align: center;
        background-color: #F0E7D8;
        color: #b00202;
        border: 3px solid #74776B;
        text-decoration: none;
        font-weight: bold;
        box-sizing: border-box;
        padding: 0px;
        margin:0px;
}

#botonera_principal ul li a:hover{
    background-color: #E54B4B ;
    background-blend-mode:color-burn;
}

#botonera_principal ul li a img{
    width: 240px;
    height: 240px;
    margin-top: 2px;
}

/**********  PIE DE PAGINA  **********/
footer{
    height: 70px;
    background-color: #006600;
    margin-top: 10px;
    /*position:fixed;
    left: auto;
    right: auto;
    bottom: 0px;
    float: left;
    clear: both;*/
}

#contacto{
    border: 5px solid white;
    box-sizing: border-box;
}

#datos_cancha{
    /* background-color: #F0E7D8; */
    height: 50px;
    width: 950px;
    float: left;
    margin: 0px;
    list-style-type: none;
    text-align: center;
    font-size: 40px;
}

#datos_cancha a:link{
    color: white;
}

#datos_cancha a:visited{
    color: cyan;
}