/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* reset end */

body {
    font-size: 1.125rem;
    line-height: 2.0rem;
    font-family: Helvetica, Arial, sans-serif;
	font-weight: 400;
    font-style: normal;    
    background: #1b1b1b;
    color: #eee;
    height: 100%;      
    padding: 0;
    margin: 0;
}

a, a:visited {
    color: #ccc;
    font-weight: bold;
    text-decoration: none;
}

h1 {
    font-size: var(--size-900);
    font-family: Garamond, serif;
    margin:0;
    padding: 0;
}
h2 {
    font-size: var(--size-800);
    font-family: Garamond, serif;
    margin: 0;
    padding: 1rem 0;
}
H3 {
    font-size: var(--size-700);
    font-family: Garamond, serif;
    margin: 0;
    padding: 1rem 0;
}
H4 {
    font-size: var(--size-600);
    font-family: Garamond, serif;
    margin: 0;
    padding: 1rem 0;
}
H5 {
    font-size: var(--size-500);
    font-family: Garamond, serif;
    margin: 0;
    padding: 1rem 0;
}
h6 {
    font-size: var(--size-400);
    font-family: Garamond, serif;
    margin: 0;
    padding: 1rem 0;    
}
/* clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem); */
header {
    display: flex;
    flex-wrap: wrap;  
    align-items: center;
}

header h1 {
    padding: 1rem 0;
}

#container {  
    width: clamp(16rem,93vw,75rem);
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    text-align:left;
}
header h1 a, header li a , .tagcloud {
    text-shadow: 2px 2px 4px #222;
}

a {
    background-image: linear-gradient(to right, #a8ff78 0%, #78ffd6 100%);
    background-repeat: no-repeat;
    background-size: 0% 0.15em;
    background-position: 0% 110%;
    transition: all 0.5s;
}

a:hover {
    background-image: linear-gradient(to right, #a8ff78 0%, #78ffd6 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.15em;
    background-position: 0% 110%;
    transition: all 0.5s;
}

.noline:hover {
    background: none;
}

header nav {
    border-left: 1px solid #ccc;
    margin: 0.75rem 0 0.75rem 1rem;
    padding: 0.75rem 1.00rem;
    font-size: 1.25rem;
}

header nav ul {
    width: auto;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}
header nav li {
    float: left;
    margin: 0;
    padding: 0;
    display: inline;
}
/*
header nav div {
	max-width: 400px;
}
*/
header a {
    text-decoration: none;
}


#nav-icon {
    font-size: 2em;
    cursor: pointer;
}

#small-menu {
/*    transition: opacity 1s ease-out; */
/*    transition: height 300ms; */
    transition: max-height 0.3s ease;
    max-height: 0;
    opacity: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    clear: both;
    visibility: hidden;
}

#small-menu.active {
    opacity: 1;
    display:block;
    max-height: 500px;
    margin-bottom: 1rem;
    visibility: visible;
}

#small-menu li {
    border: 1px solid #666;
    border-left: 0;
    border-right: 0;
    padding: 0.5em;
    margin: 0 0 -1px;

}

#content {
    clear:both;
}
.fot-wraper {
    z-index: 50;
    position: relative;
    filter: drop-shadow(0 0 0.75rem #222);
}
.fot {
    text-align: center;
	position:relative;
	margin: 0 auto;
}

.fot img {
    display: block;
}
/*
.foto {
    float: left;
    border: 1px solid #555;
    padding: 0;
    margin: 10px 20px 10px 0;
}

.foto:hover {
    border: 1px solid #C6E100;
}

.foto IMG {
    padding: 0;
    margin: 2px;
}

.foto A {
    display: block;
}
*/
.list {
    display: flex;
    flex-wrap: wrap;
}
.list .item {
    padding:0;
    margin: 0;
    transition-duration: 0.5s;
    position: relative;
    content-visibility: auto;
    aspect-ratio: 1;
}
.list .item:hover {
    background: #fff;
}
.list .item:hover img {
	opacity: 0.5;
	transition-duration: 0.5s;
}
.list .item img {
	z-index: 9;
	display: block;
	transition-duration: 1s;
    display: block;
    width: 100%;
    height: auto;
}
.list .item-title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	background: none;
	padding: 10px;
	display: none;
	color: #000;
	font-weight: bold;
	font-size: 1em;
}

.list .item:hover .item-title {
	display: block;
}

.desc {
    font-size: 1rem;
    padding: 10px;
    margin: 5px 0 0 0;
    background: #666;
    position: relative;
    z-index: 40;
    filter: drop-shadow(0 0 0.75rem #222);
    line-height: 1.5;
}
.params {
    clear:both;
}

#others {
    font-size: var(--size-400);
    padding: 0.625rem;
    margin: 5px 0 0 0;
    background-color: #555;
    line-height: 1.5rem;
}

.icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
} 

.icon.tag {    
    background-image: url( /img/tag_icon.svg );
    filter: invert();
    vertical-align: -0.4rem;
}

.icon.map-pin {    
    background-image: url( /img/map_pin_icon.svg );
    filter: invert();
    vertical-align: -0.4rem;
}

#others H6 {
    font-size: var(--size-400);    
    font-family: verdana, helvetica, sans-serif;
    display: inline;
    margin:0;
    padding: 0 2px 0 2px;
    vertical-align: top;
}

.counter {
    float: right;
    font-size: 10px;
    color: #eee;
}

.coment {
    padding: 10px;
    margin: 5px 0;
    background: #444;
}

.comentAuthor, .comentData, .comentWeb, .comentRatting {
	font-size:9px;
	margin:0;
	padding:0;
	line-height: 12px;
	color: #ddd;
}

.comentValue  {
    font-size: 12px;
}
.comentAuthor {
    padding-left:12px;
    background: url(/img/dymek.png) no-repeat 0 1px;
}

.comentRatting {
    color: #fff;
    font-weight: bold;
}
.commentForm {
    margin: 5px 0 0 0;
    background: #333;
    text-align: left;
    padding-left: 10px;
    padding-bottom: 10px;
}
.commentForm LABEL {
    display: block;
    font-size: 0.8em;
    padding-top: 0.1em;
}
.commentForm .form_stars {
    padding: 0.5em 0;
    font-size: 1.5em;
    cursor: pointer;
    width: 6.5em;
}
.commentForm .form_stars .selected {
    color: #ffff60;
}
.commentForm .form_stars.invalid {
    border-bottom: 1px solid #f00;
}
.commentForm INPUT, .commentForm TEXTAREA {
    box-sizing: content-box;
    font-size: 0.9em;
    background-color: #444;
    border: 1px solid #777;
    border-radius: 2px;
    color: #fff;
    padding: 0.7rem;
    width: 30em;
    font-family: verdana, helvetica, sans-serif;
    margin: 0.4rem 0;
    outline: none;
}
.commentForm INPUT[type=submit] {
    cursor: pointer;
}

.commentForm INPUT[type=submit]:active {
    background-color: #b9e400;
}
.editor { clear:both; }
.footer { 
    font-size:0.7rem;
    margin: 0.5rem 0;
}
.footer a {
    background-image: none;
}
.footer a:hover {
    background-image: none;
}
.footer .gray-text a {
    font-size: 5px;
    color: #222 !important;
}
#map {
    color: #333;
}

.mapPhotosFrame {
	max-width: 100%;
    overflow: hidden;
}
.mapPhotos {
    display: flex;
    flex-direction: row;
    overflow: auto;
}
.mapPhotos .mapListPhoto {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 15rem;
    width: 15rem;
    box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset;
    border-radius: 0.3rem;
    padding: 0;
    margin: 5px;
    overflow: hidden;
    justify-content: space-between;
}
.mapPhotos .mapListPhoto:hover {
    box-shadow: rgb(95, 96, 255) 0px 0px 0px 3px, rgb(255, 255, 255) 0px 0px 0px 1px;
}
.mapPhotos IMG {
    padding:0;
    margin: 0;
    display: block;
    width: 100%;
}
.mapPhotos A {
    text-decoration: none;
}

.mapPhotos H6 {
    padding: 1rem;
    word-break: break-all; 
    white-space: normal;
}

.tagcloud {
	padding: 1.25rem 0 0.75rem 0;
	text-align:center;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
}
.tagcloud H1, .tagcloud H2, .tagcloud H3, .tagcloud H4, .tagcloud H5, .tagcloud H6 {
	font-family: Garamond, serif;
    font-weight: bold;
    margin: 5px;
    padding:0;
	display: inline;
	background: none;
	line-height: 53px;
}

.tagcloud H1 { font-size: var(--size-900);}
.tagcloud H2 { font-size: var(--size-800);}
.tagcloud H3 { font-size: var(--size-700);}
.tagcloud H4 { font-size: var(--size-600);}
.tagcloud H5 { font-size: var(--size-500);}
.tagcloud H6 { font-size: var(--size-400);}

#fot-overlay img {
	z-index: 9;
}
.fot-prev {
	position: absolute;
	display:block;
	z-index: 10;
	height: 100%;
	min-height: 10px;
	left: 0;
	top: 0;
	background: transparent url(/img/br_prev.png) no-repeat;
	background-position: -70px 90%;
}
.fot-prev:hover {
	background: url(/img/br_prev.png) no-repeat;
    background-position: calc(0% + 35px) 90%;
}
.fot-next {
	position: absolute;
	display:block;
	z-index: 10;
	height: 100%;
	min-height: 10px;
	right: 0;
	top: 0;
	background: transparent url(/img/br_next.png) no-repeat;
	background-position: calc(100% + 70px) 90%;
}
.fot-next:hover {
	background: url(/img/br_next.png) no-repeat;
    background-position: calc(100% - 35px) 90%
}

.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: -120px;
    left: -100px;
    font-size: 1rem;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "✖";
}


.last-photos {
    display: flex;
    flex-wrap: wrap;
}

.last-photo {
    aspect-ratio: 3 / 2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.last-photo a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    align-content: center;
    color: rgba(204, 204, 204, 0.25);
    font-size: 1.5rem;
}
.last-photo a:hover {
    color: rgba(254, 254, 254, 0.95);
    text-shadow: 0 0 2px #000, 2px 2px 4px #000;
}

hr {
    border: 0;
    border-top: 1px dashed #999;
    margin-top: 3rem;
}

.links {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    font-size: 1rem;
    font-weight: 200;
}

.links .prev {
    flex: 1;
    text-align: left;
}

.links .next {
    flex: 1;
    text-align: right;
}

.links a {
    font-weight: normal;
    color: #777;
}

@media (max-width:799px) { 
    DIV.list DIV.item { width: 50%; }
    .last-photo {width: 100%;}    
    .last-photo a {
        color: rgba(254, 254, 254, 0.95);
        text-shadow: 2px 2px 4px #222;
        align-content:end;
    }    
    header {justify-content: space-between;}
    header nav.nav {display: none;}
    header nav.small-nav {display: block; border:none;}
    header ul#small-menu { flex: 1 100%; }
    .commentForm INPUT, .commentForm TEXTAREA { width: 18rem; }
    
}

@media (min-width:800px) {
    DIV.list DIV.item { width: 25%; }
    .last-photo {width: 50%;}
    header nav.nav {display: block;}
    header nav.small-nav {display: none;}
}


:root {
    --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
    --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
    --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
    --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
    --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
    --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
    --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
    --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
};