@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bilbo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sulphur+Point:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,500;1,300&display=swap');

/* CSS Document */

*{
	margin: 0;
	padding: 0;
}

body {
	background-color: #FFFFFF;
}

header {
	width:100%;
    height:auto;
    margin:auto;
    padding-bottom: 10px;
}

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

    #id_site {
        width:100%; 
        height:auto;
        grid-area: id_site; 
    }

    .logo{
        width: 80%;
        height: auto;
        font-family: 'Bilbo', cursive;
        font-size: 1.4em;
        font-weight: 600;
        grid-area: logo;
    }

    .mn_prin {
        width:100%;
        height:auto;
        padding-left: 10px;
        padding-top: 5px;
        grid-area: mn_prin;
    }

    .mn_prin ul {
            display: flex;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .mn_prin a {
                display: block;
                padding: .5em .5em;
                background-color:#ffffff;
                text-decoration: none;
        }

        .mn_prin a:hover {
            background-color: rgba(66, 0, 0, 0.2);
            transform: scale(1.2, 1.1);
            border-top: 1px solid #660000;
            border-bottom: 3px groove #660000;
        }

#post_head{
    text-align: center;
    border-bottom: 5px rgba(230, 150, 150, 0.8) groove;
}

    .post_head{
        width:95%;
        height: auto;
        margin: auto;
        margin-bottom: 1em;
        padding-bottom: .5em;
        display: grid;
        grid-area: post_head;
    }
    .tit_ph{
        font-size: 1.4em;
        font-family: 'Tangerine', cursive;
        grid-area: tit_ph;
    }

    .fig1_ph{
        grid-area: fig1_ph;
    }

    .fig2_ph{
        width: 95%;
        height: 100%;
        margin: auto;
        grid-area: fig2_ph;
    }

    .nave{
        width:90%;
        margin: auto;
        font-size: 1.3em;
        font-style: italic;
        text-align: left;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: groove 5px rgba(0, 0, 0, .80);
        grid-area: nave;
    }

#principal{
    width: 100%;
    height: auto;
    margin: auto;
    padding-top: 5px;
    border-bottom: medium groove #000000;
}
    .principal{
        display: grid;
        grid-area: principal;
    }

    .col_izq{        
        width: 95%;
        height: auto;
        font-size: 1em;
        font-family: 'Bilbo', cursive;
        padding-left: 1em;
        grid-area: col_izq;
    }

    .izqui_med{

    }

    .col_central{
        width: 90%;
        height: auto;
        font-size: 1.2em;
        font-style: italic;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        display: grid;     
        grid-area: col_central;
}
        .cel1{
            width: 97%;
            height: auto;
            grid-area: cel1;
        }

            .f1cel1{
                padding-left: 20px;
                grid-area: f1cel1;
            }

            .p1cel1{
                padding-left: 20px;
                grid-area: p1cel1;
            }
            .p2cel1{
                padding-left: 1.5em;
                grid-area: p2cel1;
            }

        .cel2{
            width: 97%;
            height: auto;
            margin-bottom: 1em;
            grid-area: cel2;
        }
  
        .cel3{
            width: 97%;
            height: auto;
            margin-bottom: 1em;
            grid-area: cel3;
        }

        .cel4{
            width: 97%;
            height: auto;
            grid-area: cel4;
            margin-bottom: 1em;
        }
        
        .cel5{  
            width: 97%;
            height: auto;
            grid-area: cel5;
        }

        .p1cel5{
            grid-area: p1cel5;
        }

        .p2cel5{
            grid-area: p2cel5;
        }

        .f1cel5{
            grid-area: f1cel5;
        }

        .cel6{
            margin-top: 20px;
            width: 100%;
            height: 30em;
            grid-area: cel6;
        }

        .p1cel6{
            grid-area: p1cel6;
        }

        .p2cel6{
            margin-top: .5em;
            padding-left: 1em;
            grid-area: p2cel6;
        }

        .f2cel6{
            grid-area: f2cel6;
        }

        .cel7{   
            width: 97%;
            height: 30em;
            margin-bottom: 1em;
            grid-area: cel7;
        }

        .cel8{
            width: 95%;
            height: auto;
            grid-area: cel8;
            margin-bottom: 1em;
        }

        .cel9{
            width: 95%;
            height: auto;
            margin-bottom: 1em;
            grid-area: cel9;
        }

        .cel10{
            width: 97%;
            height: 5em;
            grid-area: cel10;
        }

        .cel11{
            width: 98%;
            height: auto;
            grid-area: cel11;
        }

        .p1cel11{
            grid-area: p1cel11;
        }

        .p2cel11{
            padding-top: 1em;
            padding-left: 1em;
            grid-area: p2cel11;
        }

        .f1cel11{
            grid-area: f1cel11;
        }

        .p3cel11{
            grid-area: p3cel11;
        }

        .p4cel11{
            grid-area: p4cel11;
        }

        .f2cel11{
            text-align: center;
            margin-bottom: 1em;
            grid-area: f2cel11;
        }

        .p5cel11{
            grid-area: p5cel11;
        }

        .p6cel11{
            grid-area: p6cel11;
        }

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

        .p7cel11{
            grid-area: p7cel11;
        }

        .p8cel11{
            grid-area: p8cel11;
        }

        .f4cel11{
            grid-area: f4cel11;
        }
        
        .cel12{
            width: 90%;
            height: auto;
            margin-bottom:2em;
            grid-area: cel12;
        }

        .cel13{
            width: 100%;
            height: auto;
            grid-area: cel13;
        }

            .p1cel13{
                grid-area: p1cel13;
            }

            .f1cel13{
                grid-area: f1cel13;
            }

            .p2cel13{
                grid-area: p2cel13;
            }

            .f2cel13{
                grid-area: f2cel13;
            }

            .p3cel13{
                grid-area: p3cel13;
            }

            .p4cel13{
                grid-area: p4cel13;
            }

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

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

            .p6cel13{
                grid-area: p6cel13;
            }

            .p7cel13{
                grid-area: p7cel13;
            }

            .p8cel13{
                grid-area: p8cel13;
            }

            .f4cel13{
                grid-area: f4cel13;
            }

            .p9cel13{
                grid-area: p9cel13;
            }

            .p10cel13{
                grid-area: p10cel13;
            }
          
            .f5cel13{
                grid-area: f5cel13;
            }

            .p11cel13{
                grid-area: p11cel13;
            }

            .p12cel13{
                grid-area: p12cel13;
            }

            .f6cel13{
                grid-area: f6cel13;
            }

            .p13cel13{
                grid-area: p13cel13;
            }

            .p14cel13{
                grid-area: p14cel13;
            }

            .f7cel13{
                grid-area: f7cel13;
            }

        .cel14{
            width: 100%;
            height: auto;
            grid-area: cel14;
        }

        .cel15{
            width: 100%;
            height: auto;
            grid-area: cel15;
        }

.grumus{
    width: 100%;
    height: 100%;
    font-size: 1em;
    padding: 10px 10px;
    border-top: groove 3px rgba(200, 0, 0, .80);
    background-image: linear-gradient(rgba(255, 249, 214, 0.4) 8%, 
                                      rgba(169, 245, 216, 0.2) 80%);
    display: grid;
    grid-area: grumus;
}
        
    .tit_rider{
        width: 100%;
        height: 2.5em;
        color: white;
        font-size: 1.2em;
        text-align: center;
        text-shadow: 2px 2px 5px rgba(255, 0, 0, 1);
        margin-bottom: .5em;
        background-color: rgba(100, 10, 10, 0.90);
        grid-area: tit_rider;
    }
        
    .tit_elerid{
        width: 100%;
        height: 1.5em;
        color:black;
        font-weight: 600;
        font-size: 1.3em;
        text-align: center;
        margin-bottom: 5px;
        background-image: url(../img/bg_nav3.jpg);
        background-size: cover;
        border-top: rgba(255, 179, 0, 0.51) 2px groove;
        border-bottom: rgba(255, 179, 0, 0.51) 2px groove;
    }
                
    .elerid{
        font-weight: 600;
        font-style: italic;
        width: 100%;
        height: 14em;
        margin-bottom: 50px;
        display: flexbox;
        flex-direction: row;
        flex-wrap: wrap;
        background-image: url(../img/bgpx_rayas.png);
        gap: 1px;
    }
        .elerid1{
            grid-area: elerid1;
        }
        .elerid2{
            grid-area: elerid2;
        }
        .elerid3{
            grid-area: elerid3;
        }
        .elerid4{
            grid-area: elerid4;
        }
        .elerid5{
            grid-area: elerid5;
        }

        .elerid6{
            grid-area: elerid6;
        }
        
    .capcard{
        font-size: 1em;
        font-style: italic;
        padding-left: 10px;
        padding-bottom: 10px;
        list-style-type: none;
        text-shadow: goldenrod 1px 2px 1px;
    }

    .pre_ft{
        width: 100%;
        height: 100%;
        margin: auto;
        margin-top: 1rem;
        text-align: center;
        justify-content: center;
        align-items: center;
        align-content: center;
        align-self: center;
        border-bottom: groove 7px rgba(0, 0, 0, .80);
        grid-area: pre_ft;
    }

    .fg1_pft{
        grid-area: fg1_pft;
    }

    .fg2_pft{
        grid-area: fg2_pft;
    }

        .mn_sec{
            width: 100%;
            height: auto;
            font-size: 1.1em;
            font-weight: 600;
            justify-content: center;
            grid-area: mn_sec;
        }
    
        .mn_sec ul{
            text-align: center;
            margin: auto;
            margin-bottom: 10px;
            display:inline-flex;
            list-style: none;
            column-gap: 15px;
            }
    
            .mn_sec a{
                border-top: 5px groove darkred;
                border-bottom: 2px solid goldenrod;
                background-color: white;
                background-image: url(../img/bgbtn_caoba.jpg);
                background-size: cover;
            }
    
            .mn_sec a:link{
                color: white;
                text-decoration: none;
                padding: 1px 15px;
            }
    
            .mn_sec a:hover {
                color: yellow;
                font-size: 1.3em;
                transform: scale(1.2, 1.4);
                border-top: 5px groove goldenrod;
                border-bottom: 5px solid black;
                background-image: url(../img/bgbtn_rojograd.jpg);
            }
    
            .mn_sec a:visited {
                color: #FFF;
                background-color: black;
            }
    
            .mn_sec a:active {
                color: #FFF;
                background-color: black;
            }
            
footer {
    font-size: 1.1em;
    bottom: 5px;
    border-top: 5px groove #ffbb00;
    background-color: #000;
}
        
.pie_pag{
    width: 100%;
    height: auto;
    margin-top: 1em;
    color: antiquewhite;
    align-items: center;
    background-image: linear-gradient(rgba(106, 0, 0, 0.8) 10%, 
                                    rgba(0, 0, 0, 1)100%), 
                                    url(../img/bgvr_rojograd.jpg);
    background-position: center center;
    background-size: cover;
    display: grid;
    grid-area: pie_pag;
    }

    .col1_ft{
        grid-area: col1_ft;
    }

    .col2_ft{
        grid-area: col2_ft;
    }

    .col3_ft{
        padding-right: 30px;
        grid-area: col3_ft;
    }
        
    .mn_inf{
        width: 100%;
        height: auto;
        background-color: rgba(0, 0, 0, .20);
        text-align: left;
        padding-left: 1em;
        grid-area: mn_inf;
    }

    .mn_inf ul{
        width: 100%;
        font-size: 1.3em;
        list-style-type: none;
        line-height: 2em;
    }

    .mn_inf a:link{
        width: 100%;
        color:white;
        font-style: italic;
        text-decoration: none;
    }

    .mn_inf a:hover{
        color:yellow;
        font-size: 1.3em;
        background-color: black;
        border-bottom: antiquewhite 5px solid;
    }

    .mn_inf a:visited{
        color:yellow;
        font-size: 1.1em;
        background-color: black;
    }

    .mn_inf a:active{
        color:yellow;
        font-size: 1.1em;
        background-color: black;
    }

    
.titulos {
    font-size: 1.1em;
    font-style: normal;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    color: #FFF;
    font-weight: bold;
    letter-spacing: normal;
    text-align: center;
}

.tit_page {
	font-size: 2.2em;
	font-style: normal;
	color: darkred;
    font-family: 'Tangerine', cursive;
	font-weight:bold;
    text-align: center;
    background-color:floralwhite;
    text-shadow:2px 1px 1px white, 
                3px 1px 1px black,
                2px 2px 8px rgb(255,0, 0);
}

.tit_secc {
    font-size: 1.1em;
    font-style: italic;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.subtit {
    font-size: 1.5em;
    font-style: italic;
    font-weight: 600;
    padding-left: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    text-shadow: goldenrod 1px 2px 1px;
}

.blangord{
    font-size: 1.2em;
    color: #fff;
    font-weight: 600;
}

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

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

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

.listar{
    list-style-image: url(../img/listar.png);
    text-decoration: none;
    color: dimgrey;
    background-color: blanchedalmond;
    text-justify: auto;
}  
        
    .linkpp:link{
        color: white;
        font-size: 1.2em;
        font-weight: 600;
        padding: 3px 0px;
        text-decoration: none;   
        text-shadow: goldenrod 2px 3px 3px;
    }
    
    .linkpp:hover {
        padding: 3px 0px;
        color: white;
        font-size: 1.2em;
        text-decoration: none;   
        background-color: goldenrod;
    }
    
    .linkpp:visited {
        padding: 3px 0px;
        color: white;
        font-size: 1.2em;
        text-decoration: none;   
    }
        
    .linkpp:active {
        padding: 3px 0px;
        color: white;
        font-size: 1.2em;
        text-decoration: none;   
    }
            
.imgcent{
    padding: 10px 10px;
    background-color: rgba(250, 100, 50, 0.1);
    border-top: 2px groove gray;
    border-bottom: 5px groove black;
}

.imgcol{
    width: 95%;
    height: auto;
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 15px 10px 20px 10px;
    text-align: center;
    border-top: 1px solid black;
    border-bottom: 5px groove darkred;
    border-left: red 1px solid;
    border-right: red 1px solid;
    -webkit-box-shadow:0 3px 4px rgba(173, 0, 0, 0.3),0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 3px 4px rgba(173, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 5px 10px rgba(100, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    
}

.piefoto{
    font-family: 'Bilbo', cursive;
    font-weight: 600;
    text-align: center;
    font-size: 1.5em;
    align-content: center;
    justify-content: center;
    padding:5px;
    color:darkred;
    background-color: #fff;
}

h1{
    font-size: 1em;
    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;
    color:darkred;
}


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


a{
	text-decoration: none;
    color:darkred 
}

a:hover{
   font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline;
	vertical-align: top;
    color:darkred  
}

.img_prin{
    padding: 10px 10px;
    background-color: rgba(251, 203, 187, 0.3);
    border-top: 2px groove gray;
    border-bottom: 5px groove black;
}

.zoom{
    padding: 10px 10px;
    background-color: rgba(250, 100, 50, 0.1);
    border-top: 2px groove gray;
    border-bottom: 5px groove black;
    

        /* 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 */
}

@media (min-width: 480px) {
    breakpoint {
        max-width: 48%;
    }
}

@media (min-width: 760px) {
    breakpoint {
        max-width: 44%;
    }
}