nav.nav-bar{
    padding: 10px;
    background-color: #0d1e4be6;
    height: 50px;
}

nav.nav-bar .logo{
    display: none;
}

@media screen and (max-width: 840px){
    nav.nav-bar .logo{
        width: 75px;
        height: 100%;
        display: block;
    }
    nav.nav-bar .logo img{
        width: 100%;
        height: 100%;
    }
}


@media screen and (max-width: 1150px){
    #container section.galeria{
        width: 650px;
        grid-auto-rows: 190px;
    }

    div.item00{
        grid-column: 1 / 5;
        grid-row: 31 / 33;
    }
    div.item01{
        grid-column: 4 / 12;
        grid-row: 25 / 27;
    }
    div.item02{
        grid-column: 1 / 5;
        grid-row: 23 / 24;
    }
    div.item05{
        grid-column: 1 / 5;
        grid-row: 24 / 25;
    }
    div.item06{
        grid-column: 1 / 5;
        grid-row: 16 / 17;
    }
    div.item07{
        grid-column: 8 / 12;
        grid-row: 2 / 3;
    }
    div.item08{
        grid-column: 4 / 12;
        grid-row: 17 / 19;
    }
    div.item09{
        grid-column: 1 / 12;
        grid-row: 35 / 37;
    }
    div.item10{
        grid-column: 1 / 9;
        grid-row: 5 / 7;
    }

    div.item11{
        grid-column: 8 / 12;
        grid-row: 1 / 2;
    }
    div.item12{
        grid-column: 1 / 12;
        grid-row: 3 / 5;
    }
    div.item13{
        grid-column: 1 / 8;
        grid-row: 1 / 3;
    }
    div.item14{
        grid-column: 1 / 8;
        grid-row: 33 / 35;
    }
    div.item15{
        grid-column: 5 / 12;
        grid-row: 31 / 33;
    }
    div.item16{
        grid-column: 5 / 12;
        grid-row: 21 / 23;
    }
    div.item17{
        grid-column: 1 / 7;
        grid-row: 7 / 9;
    }
    div.item18{
        grid-column: 1 / 5;
        grid-row: 15 / 16;
    }
    div.item19{
        grid-column: 5 / 12;
        grid-row: 15 / 17;
    } 
    div.item20{
        grid-column: 5 / 12;
        grid-row: 19 / 21;
    }
    div.item21{
        grid-column: 7 / 12;
        grid-row: 7 / 9;
    } 
    div.item22{
        grid-column: 1 / 5;
        grid-row: 21 / 23;
    } 
    div.item24{
        grid-column: 1 / 8;
        grid-row: 13 / 15;
    }        
    div.item26{
        grid-column: 6 / 12;
        grid-row: 37 / 39;
    }
    div.item27{
        grid-column: 8 / 12;
        grid-row: 13 / 15;
    }
    div.item28{
        grid-column: 8 / 12;
        grid-row: 33 / 35;
    }
    div.item29{
        grid-column: 9 / 12;
        grid-row: 5 / 7;
    }
    div.item30{
        grid-column: 1 / 4;
        grid-row: 25 / 27;
    }
    div.item31{
        grid-column: 1 / 4;
        grid-row: 17 / 19;
    }
    div.item32{
        grid-column: 9 / 12;
        grid-row: 9 / 11;
    }
    div.item33{
        grid-column: 6 / 12;
        grid-row: 27 / 29;
    }
    div.item34{
        grid-column: 1 / 6;
        grid-row: 27 / 29;
        display: block;
    }
    div.item36{
        grid-column: 5 / 12;
        grid-row: 23 / 25;
    }
    div.item37{
        grid-column: 1 / 5;
        grid-row: 19 / 21;
    }
    div.item38{
        grid-column: 1 / 6;
        grid-row: 37 / 39;
    }
    div.item40{
        grid-column: 1 / 12;
        grid-row: 11 / 13;
    }
    div.item41{
        grid-column: 1 / 12;
        grid-row: 29 / 31;
    }
    div.item42{
        grid-column: 1 / 9;
        grid-row: 9 / 11;
    }
}

@media screen and (max-width: 670px){
    #container section.galeria{
        width: 450px;
        grid-auto-rows: 50px;
    }

    div.item00{
        grid-column: 1 / 6;
        grid-row: 119 / 125;
    }
    div.item01{
        grid-column: 1 / 12;
        grid-row: 96 / 100;
    }
    div.item02{
        grid-column: 1 / 6;
        grid-row: 88 / 92;
    }
    div.item05{
        grid-column: 1 / 6;
        grid-row: 92 / 96;
    }
    div.item06{
        grid-column: 6 / 12;
        grid-row: 61 / 65;
    }
    div.item07{
        grid-column: 7 / 12;
        grid-row: 6 / 10;
    }
    div.item08{
        grid-column: 1 / 12;
        grid-row: 65 / 70;
    }
    div.item09{
        grid-column: 1 / 12;
        grid-row: 138 / 143;
    }
    div.item10{
        grid-column: 1 / 12;
        grid-row: 25 / 30;
    }

    div.item11{
        grid-column: 1 / 7;
        grid-row: 6 / 10;
    }
    div.item12{
        grid-column: 1 / 12;
        grid-row: 1 / 6;
    }
    div.item13{
        grid-column: 1 / 12;
        grid-row: 10 / 18;
    }
    div.item14{
        grid-column: 1 / 12;
        grid-row: 143 / 151;
    }
    div.item15{
        grid-column: 1 / 7;
        grid-row: 35 / 41;
    }
    div.item16{
        grid-column: 1 / 12;
        grid-row: 81 / 88;
    }
    div.item17{
        grid-column: 1 / 12;
        grid-row: 125 / 132;
    }
    div.item18{
        grid-column: 6 / 12;
        grid-row: 57 / 61;
    }
    div.item19{
        grid-column: 1 / 12;
        grid-row: 52 / 57;
    } 
    div.item20{
        grid-column: 1 / 12;
        grid-row: 76 / 81;
    }
    div.item21{
        grid-column: 6 / 12;
        grid-row: 18 / 25;
    } 
    div.item22{
        grid-column: 1 / 6;
        grid-row: 70 / 76;
    } 
    div.item24{
        grid-column: 1 / 8;
        grid-row: 45 / 52;
    }        
    div.item26{
        grid-column: 6 / 12;
        grid-row: 119 / 125;
    }
    div.item27{
        grid-column: 8 / 12;
        grid-row: 45 / 52;
    }
    div.item28{
        grid-column: 7 / 12;
        grid-row: 132 / 138;
    }
    div.item29{
        grid-column: 1 / 6;
        grid-row: 18 / 25;
    }
    div.item30{
        grid-column: 6 / 12;
        grid-row: 88 / 96;
    }
    div.item31{
        grid-column: 1 / 6;
        grid-row: 57 / 65;
    }
    div.item32{
        grid-column: 7 / 12;
        grid-row: 35 / 41;
    }
    div.item33{
        grid-column: 6 / 12;
        grid-row: 108 / 114;
    }
    div.item34{
        grid-column: 1 / 6;
        grid-row: 108 / 114;
        display: block;
    }
    div.item36{
        grid-column: 1 / 12;
        grid-row: 100 / 108;
    }
    div.item37{
        grid-column: 6 / 12;
        grid-row: 70 / 76;
    }
    div.item38{
        grid-column: 1 / 7;
        grid-row: 132 / 138;
    }
    div.item40{
        grid-column: 1 / 12;
        grid-row: 41 / 45;
    }
    div.item41{
        grid-column: 1 / 12;
        grid-row: 114 / 119;
    }
    div.item42{
        grid-column: 1 / 12;
        grid-row: 30 / 35;
    }
}

@media screen and (max-width: 670px){
    #container section.galeria{
        width: 315px;
        gap: 5px;
        grid-auto-rows: 50px;
    }

    div.item00{
        grid-column: 1 / 6;
        grid-row: 110 / 115;
    }
    div.item01{
        grid-column: 1 / 12;
        grid-row: 99 / 102;
    }
    div.item02{
        grid-column: 1 / 7;
        grid-row: 89 / 93;
    }
    div.item05{
        grid-column: 7 / 12;
        grid-row: 89 / 93;
    }
    div.item06{
        grid-column: 1 / 6;
        grid-row: 54 / 58;
    }
    div.item07{
        grid-column: 1 / 12;
        grid-row: 11 / 16;
    }
    div.item08{
        grid-column: 1 / 12;
        grid-row: 62 / 66;
    }
    div.item09{
        grid-column: 1 / 12;
        grid-row: 127 / 131;
    }
    div.item10{
        grid-column: 1 / 12;
        grid-row: 21 / 25;
    }
    div.item11{
        grid-column: 1 / 12;
        grid-row: 5 / 11;
    }
    div.item12{
        grid-column: 1 / 12;
        grid-row: 1 / 5;
    }
    div.item13{
        grid-column: 1 / 12;
        grid-row: 16 / 21;
    }
    div.item14{
        grid-column: 1 / 12;
        grid-row: 121 / 127;
    }
    div.item15{
        grid-column: 1 / 12;
        grid-row: 30 / 36;
    }
    div.item16{
        grid-column: 1 / 12;
        grid-row: 83 / 89;
    }
    div.item17{
        grid-column: 1 / 12;
        grid-row: 115 / 121;
    }
    div.item18{
        grid-column: 6 / 12;
        grid-row: 54 / 58;
    }
    div.item19{
        grid-column: 1 / 12;
        grid-row: 58 / 62;
    } 
    div.item20{
        grid-column: 1 / 12;
        grid-row: 73 / 77;
    }
    div.item21{
        grid-column: 1 / 7;
        grid-row: 25 / 30;
    } 
    div.item22{
        grid-column: 1 / 7;
        grid-row: 77 / 83;
    } 
    div.item24{
        grid-column: 1 / 7;
        grid-row: 49 / 54;
    }        
    div.item26{
        grid-column: 6 / 12;
        grid-row: 131 / 135;
    }
    div.item27{
        grid-column: 6 / 12;
        grid-row: 40 / 46;
    }
    div.item28{
        grid-column: 6 / 12;
        grid-row: 110 / 115;
    }
    div.item29{
        grid-column: 7 / 12;
        grid-row: 25 / 30;
    }
    div.item30{
        grid-column: 7 / 12;
        grid-row: 77 / 83;
    }
    div.item31{
        grid-column: 7 / 12;
        grid-row: 49 / 54;
    }
    div.item32{
        grid-column: 1 / 6;
        grid-row: 40 / 46;
    }
    div.item33{
        grid-column: 6 / 12;
        grid-row: 102 / 106;
    }
    div.item34{
        grid-column: 1 / 6;
        grid-row: 102 / 106;
    }
    div.item36{
        grid-column: 1 / 12;
        grid-row: 93 / 99;
    }
    div.item37{
        grid-column: 1 / 12;
        grid-row: 66 / 73;
    }
    div.item38{
        grid-column: 1 / 6;
        grid-row: 131 / 135;
    }
    div.item40{
        grid-column: 1 / 12;
        grid-row: 46 / 49;
    }
    div.item41{
        grid-column: 1 / 12;
        grid-row: 106 / 110;
    }
    div.item42{
        grid-column: 1 / 12;
        grid-row: 36 / 40;
    }
}

section.galeria{
    margin: 30px auto;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-auto-rows: 220px;
    width: 1100px;
    gap: 10px;
}

.galeria div{
    overflow: hidden;
}

.galeria div img{
    width: 100%;
    height: 100%;
}

.galeria div img:hover{
    transform: scale(1.3);
    transition: 0.8s;
    cursor: pointer;
}

.item00{
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}

.item01{
    grid-column: 1 / 9;
    grid-row: 21 / 23;
}

.item02{
    grid-column: 1 / 3;
    grid-row: 19 / 20;
}

.item05{
    grid-column: 1 / 3;
    grid-row: 20 / 21;
}

.item06{
    grid-column: 3 / 5;
    grid-row: 10 / 11;
}

.item07{
    grid-column: 4 / 6;
    grid-row: 2 / 3;
}

.item08{
    grid-column: 1 / 8;
    grid-row: 11 / 13;
}

.item09{
    grid-column: 4 / 9;
    grid-row: 15 / 17;
}

.item10{
    grid-column: 1 / 6;
    grid-row: 3 / 5;
}

.item11{
    grid-column: 4 / 6;
    grid-row: 1 / 2;
}

.item12{
    grid-column: 6 / 12;
    grid-row: 1 / 3;
}

.item13{
    grid-column: 7 / 9;
    grid-row: 13 / 14;
}

.item14{
    grid-column: 7 / 9;
    grid-row: 14 / 15;
}

.item15{
    grid-column: 9 / 12;
    grid-row: 13 / 15;
}

.item16{
    grid-column: 3 / 7;
    grid-row: 19 / 21;
}

.item17{
    grid-column: 8 / 12;
    grid-row: 3 / 5;
}

.item18{
    grid-column: 3 / 5;
    grid-row: 9 / 10;
}

.item19{
    grid-column: 5 / 10;
    grid-row: 9 / 11;
}

.item20{
    grid-column: 1 / 7;
    grid-row: 17 / 19;
}

.item21{
    grid-column: 1 / 4;
    grid-row: 5 / 7;
}

.item22{
    grid-column: 7 / 10;
    grid-row: 17 / 19;
}

.item24{
    grid-column: 9 / 12;
    grid-row: 7 / 9;
}

.item26{
    grid-column: 1 / 4;
    grid-row: 15 / 17;
}

.item27{
    grid-column: 1 / 3;
    grid-row: 9 / 11;
}

.item28{
    grid-column: 10 / 12;
    grid-row: 17 / 19;
}

.item29{
    grid-column: 6 / 8;
    grid-row: 3 / 5;
}

.item30{
    grid-column: 10 / 12;
    grid-row: 19 / 21;
}

.item31{
    grid-column: 10 / 12;
    grid-row: 9 / 11;
}

.item32{
    grid-column: 10 / 12;
    grid-row: 5 / 7;
}

.item33{
    grid-column: 9 / 12;
    grid-row: 21 / 23 
}

.item34{
    grid-column: 7 / 9;
    grid-row: 21 / 23;
    display: none;
}

.item36{
    grid-column: 7 / 10;
    grid-row: 19 / 21;
}

.item37{
    grid-column: 8 / 12;
    grid-row: 11 / 13;
}

.item38{
    grid-column: 9 / 12;
    grid-row: 15 / 17;
}

.item40{
    grid-column: 1 / 9;
    grid-row: 7 / 9;
}

.item41{
    grid-column: 1 / 7;
    grid-row: 13 / 15;
}

.item42{
    grid-column: 4 / 10;
    grid-row: 5 / 7;
}

#lightboxBg{
    position: fixed;
    z-index: 150;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(150, 150, 150, .6);
    backdrop-filter: blur(2px);
    display: none;
}

#lightboxBg.active{
    display: flex;
    justify-content: center;
    align-items: center;
}

#lightboxImg{
    max-width: 85%;
    max-height: 85%;
    border: 4px solid white;
    box-shadow: 1px 3px 20px rgba(0,0,0,.5);
}