/*HOME PAGE*/

@font-face {font-family: 'RFDewiCond'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('fonts/rfdewicond-600.woff2') format('woff2'), url('fonts/rfdewicond-600.woff') format('woff');
}

@media (max-width: 1780px) and (min-width: 840px) {.bodyhead span {display: block;}}
@media (max-width: 1000px) {#bread {margin-bottom: 10px;}}

.bahome {padding-top: 40px !important;}


/*--------------------------------*/

/*Big Pic*/

#homepic {position: relative; overflow: hidden; z-index: 0; background-color: #8A877E;}
#homepic img {width: 500px; height: 300px; width: 100%; height: 40vw; max-height: 420px; object-fit: cover; object-position: 50% 40%; display: block;}
@media (max-width: 700px) {#homepic img {height: 60vw;}}
@media (max-width: 500px) {#homepic img {height: 70vw;}}

/*--------------------------------*/

/*Blocks*/

#grid {display: grid; gap: 4px;} .item {height: 200px; position: relative; overflow: hidden;}

@media (min-width: 1801px) {#grid span {font-size: 22px;}}
@media (max-width: 1800px) {#grid span {font-size: 20px;}}
@media (min-width: 1501px) {#grid {grid-template-columns: repeat(7, auto); grid-auto-flow: column;}}

@media (max-width: 1500px) and (min-width: 421px) {
.item:nth-child(1) {grid-area: a;} .item:nth-child(2) {grid-area: b;} .item:nth-child(3) {grid-area: c;} .item:nth-child(4) {grid-area: d;}
.item:nth-child(5) {grid-area: e;} .item:nth-child(6) {grid-area: f;} .item:nth-child(7) {grid-area: g;}
}

@media (max-width: 1500px) and (min-width: 751px) {
#grid {grid-template-columns: repeat(12, 1fr); grid-template-areas: "a a a b b b c c c d d d" "e e e e f f f f g g g g";}
}

/*@media (max-width: 1500px) and (min-width: 751px) {
#grid {grid-template-columns: repeat(12, 1fr);} .item:nth-child(-n+4) {grid-column: span 3;} .item:nth-child(n+5) {grid-column: span 4;}
}*/

@media (max-width: 750px) and (min-width: 551px) {
#grid {grid-template-columns: repeat(6, 1fr); grid-template-areas: "a a b b c c" "d d d e e e" "f f f g g g";}
}
/*This works same way, but using nth-child is tricky:
@media (max-width: 750px) and (min-width: 151px) {
#grid {grid-template-columns: repeat(12, 1fr);}
.item:nth-child(-n+3) {grid-column: span 4;} .item:nth-child(n+4):nth-child(-n+5) {grid-column: span 6;} .item:nth-child(n+6) {grid-column: span 6;}
}*/

@media (max-width: 550px) and (min-width: 421px) {
#grid {grid-template-columns: repeat(4, 1fr); grid-template-areas: "a a b b" "c c d d" "e e f f" "g g g g";}
}

@media (max-width: 420px) {grid-template-columns: 1fr;}

#grid img {width: 500px; height: 300px; width: 100%; height: 100%; /*display: inline-block;*/ object-fit: cover; object-position: 50% 50%; -webkit-transition: .2s;}

#grid span {position: absolute; padding: 10px; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1.15; text-align: center; color: #333; background-color: rgba(255,255,255,.8); border: 1px solid rgba(225,225,225,1); box-shadow: 0px 0px 1.5px 1px rgba(255,255,255,.8); -webkit-transition: .2s;}

#grid div:hover img {filter: brightness(80%);}
#grid div:hover span {outline: solid 15px rgba(255,255,255,.4); background-color: rgba(255,255,255,.85); border: 3px solid var(--darkblue);
box-shadow: 0px 0px 2px 1px rgba(255,255,255,1);}

/*nth-child or letters (grid-template-areas) are required if row patterns are uneven/staggered due to uneven number of boxes.
If number of boxes is even, it's much simpler: .grid {display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto;} (see AAA Computer's menu)


/*--------------------------------*/

/*Top Area*/

#sidearea {background-color: #DDD;} #sidearea .bodyarea {-webkit-display: grid; display: grid;}
#sidearea section {align-content: center; align-items: center; align-self: center;} #sidearea p {margin-bottom: 0;}

/*If padding above and below, do this to make image not so tall: for section:last-child {height: 90%; align-self: center;}*/

.sidepics {display: grid; gap: 10px; grid-gap: 10px; overflow: hidden /*for old Safari*/;}
.sidepics img {width: 500px; height: 300px; width: 100%; height: 100%; object-fit: cover;}

@media (min-width: 1771px) {.sidepics {grid-template-rows: 330px 230px;}}
@media (max-width: 1770px) and (min-width: 1301px) {.sidepics {grid-template-rows: calc(590px - 16vw) calc(490px - 16vw);}}
@media (min-width: 1301px) {
#sidearea .bodyarea {grid-template-columns: 60% 40%; grid-auto-rows: 1fr;}
#sidearea section:first-child {margin-right: 20px; padding: 50px 0;} #sidearea section:last-child {margin-left: 20px;}
.sidepics {padding: 40px 0;}
.sidepics {grid-template-columns: 1fr 1fr;}
.sidepics img:nth-child(1) {grid-column: 1 / span 2; /* spans both columns */ grid-row: 1; object-position: 50% 0%;}
.sidepics img:nth-child(2) {grid-column: 1; grid-row: 2; object-position: 50% 50%;}
.sidepics img:nth-child(3) {grid-column: 2; grid-row: 2; object-position: 25% 50%;}
}

@media (max-width: 1300px) {
#sidearea .bodyarea {padding: 10px 0 30px 0;}
#sidearea section:first-child {padding: 30px 0 0 0;} #sidearea section:last-child {margin: 30px 0 50px 0;}
}
@media (max-width: 1300px) and (min-width: 801px) {
.sidepics {grid-auto-rows: 220px; grid-template-columns: 55% 45%; /*grid-template-columns: 50% 50%; grid-auto-rows: 220px;*/}
.sidepics img:nth-child(1) {grid-column: 1 / 2; grid-row: 1 / 3; object-position: 50% 0%;}
.sidepics img:nth-child(2) {grid-column: 2 / 2; grid-row: 1 / 1; object-position: 50% 35%}
.sidepics img:nth-child(3) {grid-column: 2 / 2; grid-row: 2 / 2;}
}
@media (max-width: 800px) and (min-width: 551px) {
.sidepics {grid-auto-rows: 320px; grid-template-columns: 50% 50%; grid-template-rows: 330px 230px;}
.sidepics img:nth-child(1) {grid-column: 1 / 3; grid-row: 1 / 1; object-position: 50% 0%;}
.sidepics img:nth-child(2) {grid-column: 1 / 1; grid-row: 2 / 2; object-position: 50% 35%}
.sidepics img:nth-child(3) {grid-column: 2 / 2; grid-row: 2 / 2;}
}
@media (max-width: 550px) {
#sidearea .bodyarea {padding: 10px 0;} .sidepics {grid-auto-rows: 300px; grid-template-columns: 1fr;}
.sidepics img:nth-child(1) {object-position: 50% 0%;} .sidepics img:nth-child(2) {object-position: 50% 35%}
}

/*--------------------------------*/

#gmap {margin: 40px auto 20px auto; text-align: center;} #gmap iframe {margin: auto; text-align: center; width: 100%; height: 500px;}
@media (max-width: 400px) {#gmap iframe {height: 400px;}}