/* LEGACY THEME OVERRIDES */

/* HEADER */

header {
}

/* MENU */

/* Fondo header */
.navbar {
background:#ffffff;
border:none;
}

.navbar-inverse {
    background: #ffffff;
    border: none;
}

/* HEADER HEIGHT */

.navbar {
    min-height: 60px;
	padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 0;
	position: relative;	    
}


/* Menu */
.navbar-nav > li > a {
color:#000000;
text-transform:uppercase;
}

/* Alineado verticalmente del menú */
.navbar-nav > li > a {
    padding-top: 20px;
    padding-bottom: 20px;
	margin-top: 0;
}

/* Espaciado horizontal */
.navbar-nav > li {
    margin-left: 15px;
}

/* Hover rojo */
.navbar-inverse .navbar-nav > li > a:hover {
    color: #c40000 !important;
}

/* Activo negrita */
.current-menu-item > a {
font-weight:700;
}

/* LOGO */

.logo-ost {
    padding: 0;
}

.logo-ost img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.navbar-brand {
    height: auto;
	padding-top: 10px;
    padding-bottom: 10px;
}

/* HOME */

.home .container {
}

/* BODY */
body:not(.home) {
    padding-top: 0px;
}

body {
    margin:0;
    font-family: "Courier New", Courier, monospace;
	line-height: 1.2;
}

/* FOOTER */

footer {
}

/* ESTILO DE REJILLA DE PROYECTOS */
.projects-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
max-width:945px;
margin:auto;
}

.project-item{
text-align:center;
}

.project-image{
position:relative;
display:block;
}

.project-image img{
width:80%;
height:auto;
border-radius:50%;
transition:opacity .4s ease;
}

.project-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
opacity:0;
transition:opacity .4s ease;
font-size:18px;
padding:20px;
}

.project-image:hover img{
opacity:0.2;
}

.project-image:hover .project-overlay{
opacity:1;
}

.project-code{
margin-top:15px;
font-size:14px;
letter-spacing:2px;
}

@media(max-width:1000px){

.projects-grid{
grid-template-columns:repeat(3,1fr);
}

}

@media(max-width:700px){

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

}

@media(max-width:500px){

.projects-grid{
grid-template-columns:1fr;
}

}