@font-face {
    font-family: 'barcelony';
    src: url('../fuentes/barcelony.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;

}

@font-face {
    font-family: 'encode';
    src: url('../fuentes/EncodeSans-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;

}

html, body{
    width: 1300px;
    margin:auto;
}

header{
    display: grid;
    grid-template-rows: 2fr 1fr;
}


.fondo-menu-toggle{
    display: none;
}

.menu-toggle{
    display:none;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #FFFFFF;
    margin: 2px;
    transition: 0.4s;
}

.botonera{
    width: 1300px;
    height: 100px;
    background-image: url("../images/menu/barra_gris.png");
}

.botones{
    display: grid;
    grid-template-columns: 2fr repeat(5, 1fr);
}

ul{
    list-style: none;
}


.botonera-boton{
    display: inline;

}


.img-botonera{
    margin-top: 35px;
} 

#img-botonera-logo{
    margin-top: 10px;
} 

.degrade{
    width: 1280px;
    height: 50px;
    background: -webkit-linear-gradient(left, #206C95, #FFFFFF);
    display: block;
}

.img-redes{

    display: inline;
    padding: 5px;
}

#peron{
    padding: 5px;
}

#separador{
    margin-top: 10px;
}

#tit_principal{
    text-align: right;
    font-family: 'barcelony';
    color: #44AAE1;
}

#formacion{
    height: 500px;
    
}

#img-formacion{
    display: block;
}



.iconos-formacion{
    padding: 7px;
    margin: 25px;
}

#actualidad{
    height: 800px;

}

#img-actualidad{
    display: block;
}
#actualidad-grid{
    display: grid;
    grid-template-rows:350px 350px;
    grid-template-columns: 1fr 1fr 1fr;

}

#tarjeta-agenda{
    display: grid;
    grid-template-rows:200px 150px;
    grid-template-columns: 1fr;
    
}

#padron{
    height: 300px;
}

.formu{
    display:inline;
    width: 200px;
    margin-left: 15px;
}

.btn-padron{
    margin-top: 15px;
    background-color: #FFE500;
    font-family: 'encode';
    border: none;
    color: #616160;
    margin-left: 60px;
}

.formulario{
    margin-top: 15px;
}

.etq-form{
    font-family: 'encode';
    color: #44AAE1;
    width: 40px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

.sep-form{
    width: 8px;
    height: 0px;
}

.lin-form{
    display:block;
    margin-top: 15px;
}

#titulo-padron{
    font-family: 'enconde';
    color: #206C95;
    font-size: 60px;
}

#institucional{
    height: 500px;
}

#acercate{
    height: 500px;
    display: grid;
    grid-template-rows:100px 300px;
    grid-template-columns: 1fr 1fr;
    
}

#futer{
    
    display:grid;
    background-color: #44AAE1;
    grid-template-rows:300px;
    grid-template-columns: 1fr 1fr 1fr;
}

#futer-redes{
    display:grid;
    grid-template-rows: 2fr 1fr 1fr 1fr;

}

#futer-contacto{
    display:grid;
    grid-template-rows: 2fr 1fr 1fr 1fr;

}

.tit-futer{
    color:#FFFFFF;
    padding: 10px;
}


@media all and (min-width: 600px) and (max-width:1100px){

    html, body{
        width: 580px;
        margin:auto;
    }
    
    header, section, footer{
        width: 580px;
        margin:auto;
    }
    
    .botonera{
        width: 580px;
        height: 100px;
        background-image: url("../images/menu/barra_gris.png");
    }
    

    ul{
        width: 580px;
        height: 100px;

    }
    
    .botonera-boton{
        display: inline;
        width: 70%;
    
    }
    
    .img-botonera{
        padding: 0px;
        width: 15%;
    } 
    
    .botonera{
       height: 50px;

    }
    
    #escudo-pj{
        display: inline;
        width: 15%;
    
    }
    
    .degrade{
        width: 100%;
        height: 50%;
        background: -webkit-linear-gradient(left, #206C95, #FFFFFF);
        display: block;
    }
    

    .img-redes{
        width: 4%;
    }


    #tit_principal{
        text-align: right;
        font-size: 25px;
        color: #44AAE1;
    }

    #img-peron{
        width: 20%;
        height: 20%;
    }

    #frase-peron{
        width: 75%;
        height: 75%;
        
    }

}

@media all and (max-width:599px){

    html, body{
        width: 100%;
        height: 1200px;

    }

    .fondo-menu-toggle{
        display: grid;
        grid-template-columns: 1fr 3fr;
        width: 100%;
        height: 100%;
        background-color: #616160;

    }

    .menu-toggle{
        width: 30px;
        height: 30px;
        margin: 2px solid white;
    }
    
    #logopj1{
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        width: 35px;
        height: 35px;
        border: 1px solid white;
        border-radius: 2px;
        margin: 5px;
        position: relative;
        top: 15px;
        justify-content: center;
        align-items: center;       
    }

    .img-botonera{
      display: none;
    }

    .botonera{
        display: none;

    }

    .botonera-boton{
        display: none;
    
    }
    

    .degrade{
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(left, #206C95, #FFFFFF);
        display: block;
    }
    
    
    .menu {
        display: block;
    }
    
    .menu ul li {
        display: block;
    }

    #tit_principal{
        text-align: right;
        font-size: 25px;
        color: #44AAE1;
    }

    #img-peron{
        width: 20%;
        height: 20%;
    }

    #frase-peron{
        width: 75%;
        height: 75%;
        
    }
}