@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

body {
    font-style: normal;
    background-color: white;
	font-family: Geneva, Arial, Helvetica, sans-serif;
    grid-template: plantilla;
}

header {
    width:98%;
    height:auto;
    margin: auto;
    margin-bottom:1rem;
    padding-top: 1rem;
    border-color:#000;
    background-color: floralwhite;
	box-shadow: 5px 5px 3px #000;
	-webkit-box-shadow: 5px 5px 3px #000;
	-moz-box-shadow: 5px 5px 3px #000;
}

    .cab{
        display: grid;
        grid-area: cab;
    }

    #col1_head {
        width: 100%;
		height: auto;
		font-size: 1em;
		font-weight: 500;
		color: black;
		background-color: rgba(0, 0, 0, 0.1);
        padding-left: 5px;
    }

    .col1_head{ 
        display: grid;
        grid-area: col1_head;
    }

    #col2_head {
        width:100%;
        height: 24em;
        color: #fff;
        font-weight: bold;
        }

    .col2_head{
        display: grid;
        grid-area: col2_head;
        }

        .col2_rw1{
            text-align: center;
            grid-area: col2_rw1;
        }

        .mn_sup {
            width:100%;
            height:auto;
            color: yellow;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: wrap;
            grid-area: mn_sp;
            }
            
            .mn_sp a{
                font-size: 1em;
                line-height: 1.5em;    
                padding: 0.3em 10px;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode',sans-serif;
                text-shadow: 1px 1px blue;
                border-bottom: 5px groove yellow;
                padding-bottom: 5px;
            }

            .mn_sp a:link{
                color:white;
                font-size: 1rem;
                font-weight: bold;
                text-decoration: none;
                border-top: 1px thin yellow;
                border-bottom: 2px solid white;
                background-image: url(../img/bgmn_amaver.jpg);
                background-size: cover;
            }

            .mn_sp a:hover{
                color: yellow;
                font-size: 1.2em;
                text-shadow: 1px 1px white;
                margin-top: 1px;
                margin-bottom: 1em;
                border-top: 2px solid green;
                border-bottom: 10px groove yellow;
                padding-bottom: 1px;
                background-image: url(../img/bgmn_azuldeg.jpg);
                background-color: #000;
            }

            .mn_sp a:active{
                color:yellow;
                margin-top: 1px;
                margin-bottom: 5rem;
            }

            .mn_sp a:visited {
                font-size: 1em;
                color: yellow;
                text-shadow: 5px 1px #000;
                background-image: url(../img/bgmn_azuldeg.jpg);
                border-top: 2px solid green;
                border-bottom: 10px groove yellow;
            }

        #imgs_cab{
            width:100%;
            height:auto;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 10px;
            padding: 5px;
            }

            .imgs_cab{
            grid-area: imgs_cab;
            }

            .imgcab1{
                margin-left: 3px;
                box-shadow: brown 3px 5px 5px;
                grid-area: imgs_cab1;
            }

            .imgcab2{
                margin-left: 3px;
                box-shadow: brown 3px 5px 5px;
                grid-area: imgs_cab1;
            }

            .col2_rw2{
                margin-top: 10px;
                text-align: center;
                grid-area: col2_rw2;
            }     

        .sbmn_hdr {
        width: 100%;
        height: auto;
        padding-left: 5px;
        display: inline-block;
        }

            .sbmn_hdr a{
                color: #fff;
                text-decoration: none;
                line-height: 2em;
                padding: 0.3em 0.5em;
            }

            .sbmn_hdr a:link{
                font-size: 1em;
                font-weight: bold;
                color: #000;
                text-decoration: none;
                line-height: 2em;
                border-top: 3px solid #05F2FF;
                border-bottom: 5px solid #000000;
                background-image: url(../img/bgmn_aqua.gif);
                background-size: cover;
            }

            .sbmn_hdr a:hover{
                font-size: 1.2em;
                color: black;
                font-weight: bold;
                border-bottom: 4px solid rgb(0, 0, 0);
                padding-bottom: 3px;
            }

            .sbmn_hdr a:visited {
                font-size: 1em;
                color: black;
                border-top: 1px solid #05F2FF;
                border-bottom: 2px solid #05f2ff;
                background-image: url(../img/bgmn_gradazul.jpg);
            }

            .sbmn_hdr a:active{
                color: #fff;
                text-decoration: none;
                border-top: 1px solid darkred;
                border-bottom: 1px solid gold;
            }

#medio_sup{
    width: 100%;
    height: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color:#fff;
	border-bottom: 3px groove #666666;
    grid-area: medio_sup;
    } 

    .navegacion {
        width:50%;
        height:auto;
        margin-top: 1px;
        margin-bottom: 5px;
        padding-left: 20px;
        padding-top: 5px;
        font-size: 1.2em;   
        flex-wrap: nowrap;
        background-image: url(../img/bghr_nav.gif);
    }

    .busqueda{
        width:50%;
        height:30px;
        margin-top: 1px;
        margin-bottom: 5px;
        padding-top: 5px;
        min-width: 400px;
        display: inline-flex;
        float: right;
        flex-wrap: nowrap;
        background-image: url(../img/bghr_nav.gif);
    }
    .pre_central{
        width: 80%;
        margin: auto;
        text-align: justify;
        background-color: rgba(50, 50, 0, 0.1);
        padding: 5px 5px;
    }

#central{
    width: 100%;
    height: auto;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    font-size: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-image: url(../img/bgpx_rayas.png);
    grid-area: central;
}
    #grupos {
        width: 50%;
        height: auto;
        margin-top: 5px;
        margin-left: 1px;
        margin-bottom: 5px;
        background-image: url(../img/bgpx_rayas.png);
        box-shadow: 2px 2px 2px 2px #000;
        -webkit-box-shadow: 2px 2px 2px 2px #000;
        -moz-box-shadow: 2px 2px 2px 2px #000;
        grid-area: grupos;
        }

        .listado{
        width: 100%;
        height: auto;
        display: flex;
        padding-left: 1%;
        justify-content: space-around;
        flex-direction: row;
        flex-flow: wrap;
        }

        #tropicales{
            background-color: rgba(150, 200, 0, 0.2);
        }

        #sonideros{
            background-color: rgba(100, 100, 250, 0.2);
        }

        #nortenos{
            background-color: rgba(255, 100, 100, 0.2);
        }

        #recuerdo{
            background-color: rgba(70, 31, 20, 0.2);
        }

        #versatiles{
            background-color: rgba(170, 31, 150, 0.2);
        }

        #tecladistas{
            background-color: rgba(246, 235, 11, 0.2);
        }

        .grupo{
        width: 13em;
        height: 11em;
        margin: 5px 5px 5px 5px;
        padding-top: 5px;
        margin-bottom: 1rem;
        box-sizing: border-box;
        align-content: center;
        text-align: center;
        background-color: white;
        box-shadow: 2px 5px 5px 3px #000909;
        -webkit-box-shadow: 2px 5px 5px 3px #000909;
        -moz-box-shadow: 2px 5px 5px 3px #000909;  
    }
        .grupo a:link{
            font-size: 1.1em;
            font-weight: 550;
            color: darkred;
            text-decoration: none;
        }
        .grupo a:hover{
            font-size: 1.2em;
            font-weight: 550;
            color: yellow;
            text-decoration: none;
            background-color: black;
        }

        .grupo a:visited{
            font-size: 1.2em;
            font-weight: 550;
            color: black;
            text-decoration: none;
            background-color: white;
        }

    #col_izq{
        width: 100%;  
        height: auto;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 1em;
        grid-area: col_izq;
    }
        #masreco {
            height:auto;
            padding-left: 5px;
            margin-bottom: 2rem;
            border-top: 2px solid #000;
            border-bottom: 1px solid #000;
            background-image: url(../img/bgpx_rayas.png);
        }

        .anuncios {
            height: auto;
            margin-bottom: 2rem;
            border-top: 2px solid #000;
            border-bottom: 1px solid #000;
        }

        #informes {
            height:auto;
            font-size: 1em;
            font-weight: bold;
            padding-left: 5px;
            border-top: 2px solid #000;
            border-bottom: 1px solid #000;
            margin-bottom: 2rem;
            background-image: url(../img/bgpx_rayas.png);
        }

        #promo_serv {
            height:auto;
            margin-top: 3em;
            padding-left: 2px;
            margin-bottom: 2rem;
            border-top: 2px solid #000;
            border-bottom: 2px solid #000;
            background-image: url(../img/bgpx_rayas.png);
        }

        #enlaces {
            height: auto;
            font-weight: bold;
            margin-bottom: 3rem;
            padding-left: 5px;
            border-top: 2px solid #000;
            border-bottom: 1px solid #000;
            background-image: url(../img/bgpx_rayas.png);
        }

        #contacto {
            height: auto;
            font-size: 0.9em;
            text-align: justify;
            border-top: 2px solid #000;
            border-bottom: 1px solid #000;
            margin-bottom: 2em;
        }

        #otros_enlaces {
            margin-bottom: 2em; 
        }

        #politicas {
            height: auto;
            padding-left: 2px;
            padding-right: 2px;
            margin-bottom: 10px;   
            font-size: .9em;
            font-style: italic;
            color: #000;
            background-image: url(../img/bg_rayas.png);
        }

        #socialmedia {
            width: 98%;
            height:auto;
            margin-top: 2em;
            margin-bottom: 3rem;
        }

    #col_der{
        width:100%;
        height: auto;
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: 1em;
    }
    
#medio_inf{
    width: 80%;
    height: auto;
    margin-left: 10%;
    margin-right: 10%;    
}
    .medio_inf{
        grid-area: medio_inf;
    }
    
#pre_ft{
    width: 80%;
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    grid-area: pre_ft;    
}

footer {
    bottom: 5px;
	width: 100%;
    height: auto;
    padding: 5px;
    font-size: .9em;
    color: #fff;
    border-top: 5px groove black;
    background-image: url(../img/bgvr_verdesombra.jpg);
    background-size: cover;
    }

    .pie_pag{
        display: grid;
        grid-area: pie_pag;
    }

    #col1_ft{
        width: 100%;
        height: auto;
        text-align: center;
        align-items: center;
        justify-content: center;
        padding-left: .5em;
        background-image: url(../img/bgvr_verdesombra.jpg);
        grid-area: col1_ft;
    }

    #col2_ft{
        width: 100%;
        height: auto;
        font-size: 0.9em;
        padding: 10px;
        padding-right: 1em;
        grid-area: col2_ft;
    }

    #col3_ft{
        width: 100%;
        height: auto;
        padding-left: 10px;
        font-size: 0.9em;
        text-align: center;
        align-content: center;
        justify-content: center;
        grid-area: col3_ft;
        }

    #col4_ft{
        width: 100%;
        height: auto;
        padding-left: 5px;
        padding-top: 10px;
        font-size: 1em;
        text-align: center;
        align-content: center;
        justify-content: center;
        background-image: url(../img/bgvr_verdesombra.jpg);
        grid-area: col4_ft;
        }

    .mn_inf {
        color: #fff;
        font-size: 1em;
        padding: 2px 2px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    
    }
        .mn_inf a{
            width: 100%;
            margin: auto;
            padding: 5px 10px 5px 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            text-decoration: none;
            border-bottom: 1px groove #fff;
            border-top: 1px groove rgb(0, 0, 0);
            color: #fff;
        }
        
        .mn_inf a:link{
            width: 70%;
            height: auto;
            margin: auto;
            margin-top: 5px;
            color: #fff;
            font-size: 1.2em;
            margin-bottom: 5px;
            padding: 5px 2px 5px 2px;
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        .mn_inf a:hover{
            font-size: 1.3em;
            margin: auto;
            color: #fff;
            background: black;
            border-top: rgb(255, 251, 0) 3px solid;
            border-bottom: rgb(255, 255, 5) 3px solid;
        }
        
        .mn_inf a:visited {
            font-size: 1em;
            color: rgb(238, 238, 163);
            background-color: rgb(0, 0, 0);
        }
        
        .mn_inf a:active {
            font-size: 1em;
            color: rgb(255, 255, 255);
            background-color: rgb(25, 25, 25);
        }
        
        .link_inf a:link{
            margin: auto;
            color: white;
            background: black;
            font-size: 0.8em;
            line-height: 3rem;
            padding: 0px 10px 2px 10px;
        }
        
        .link_inf a:hover{
            font-size: 1.3em;
            margin: auto;
            color: #fff;
            background: black;
        }
        
.blangor{
    font-size: 1.2em;
	color: #fff;
	font-style:normal;
    font-weight: 600;
}

.blanmed{
    font-size: 1.0em;
	color: #fff;
	font-style:normal;
    font-weight: 400;
}

.negrus{
	color: #000;
	font-weight: bold;
}

.peques{
	font-size: 0.8em;
	font-style: normal;
	color: #fff;
	font-weight: normal;
	letter-spacing: normal;
	text-align: justify;
	word-spacing: normal;
}

.pequeneg {
	font-size: 0.8em;
	font-style: normal;
	color: #000;
	font-weight: bold;
	letter-spacing: normal;
	text-align: justify;
	word-spacing: normal;
}

.tit_secc {
    width: 100%;
	font-size: 1.5em;
    line-height: 1.8rem;
	font-family: Geneva, Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
    letter-spacing: normal;
    text-shadow: 1px 1px black;
    text-align: center;
    padding: 2px 5px;
    background-image:  url(../img/bgts_verde.jpg);
    border-top: #000 solid 2px;
    border-bottom: #000 groove 5px;
}


.tit_gen {
    width: 100%;
	font-size: 1.3em;
    line-height: 1.5rem;
	font-family: Geneva, Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 5px 5px;
    background-image:  url(../img/bgts_amaver.jpg);
    background-size: cover;
    border-top: yellow solid 2px;
    border-bottom: yellow groove 5px;
}

.tit_pg{
    font-size: 1.5em;
    color:white;
    text-align: center;
    background-color: #000;
    margin: 10px 5px;
}

.imgbanner{
	padding-top: 1px;
	border-top: 3px ridge #000000;
	border-bottom: 3px ridge #000000;
	padding-bottom: 5px;
    margin-bottom: 10px;
	box-shadow: 2px 3px 5px 1px #000009;
	-webkit-box-shadow: 2px 3px 5px 1px #000009;
	-moz-box-shadow: 2px 3px 5px 1px #000009;
}

.listar{
    font-size: 1.2em;
    font-weight: bold;
    list-style-image:url(../img/listar.png);
    padding-left: 1%;
}  

.listar a:link{
    font-size: 1em;
    font-weight: 600;
}  

.listlink{
    list-style-type: none;
    padding-left: 1%;
    font-size: 1em;
    font-weight: 600;
    text-align: justify;
    text-decoration: none;
}  
.zoom{
        padding-top: 0.5em;
        /* Aumentamos la anchura y altura durante 2 segundos */

        transition: width 2s, height 2s, transform 1s;

        -moz-transition: width 2s, height 2s, -moz-transform 1s;

        -webkit-transition: width 2s, height 2s, -webkit-transform 1s;

        -o-transition: width 2s, height 2s,-o-transform 1s;

}

.zoom:hover{

        /* tranformamos el elemento al pasar el mouse por encima al doble de

           su tamaño con scale(2). */

        transform : scale(2);

        -moz-transform : scale(2);      /* Firefox */

        -webkit-transform : scale(2);   /* Chrome - Safari */

        -o-transform : scale(2);        /* Opera */

}

h1{
	font-weight: bold;
	line-height: normal;
	text-align: center;
	vertical-align: top;
}

h2{
	font-weight: bold;
	line-height: normal;
	text-align: center;
	vertical-align: top;
}

h3{
	font-weight: bold;
	line-height: normal;
	text-align: center;
	vertical-align: top;
}


li{
	font-style: italic;
	font-weight: Bold;
	letter-spacing: normal;
	text-align: justify;
	vertical-align: baseline;
	word-spacing: normal;
}

a{
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
    a:link {
        font-size: 0.9em;
        font-weight: 400;
        color: rgb(0, 0, 0);
        
    }
    a:visited {
        font-size: 0.8em;
        color:rgb(112, 63, 0);
    }
    a:hover {
        font-size: 1.2em;
        color: #ffffff;
        background-color: #000000;
    }
    a:active {
        font-size: 0.8em;
        color: #EDD467;
        background-color: #333333;
    }