* {
    margin: 0;
    padding: 0;
    }
body {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	margin: 0 auto;
	background-color: rgba(253, 238, 143, .75);
	}
[class*="col-"] {
    float: left;
    padding: 0;
    width: 100%;
}
@media only screen and (min-width: 1000px) {
	.col-0 {width: 0;}
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
p {
padding: 10px;
}
a { text-decoration: none; color: #0066fa; }
a:hover { text-decoration: underline; }

.main {
	max-width: 999px;
	margin: 0 auto;
	clear: both;
}
.mMen {
float: left;
margin: 15px 4px;
}
.mMen a {
padding: 12px 16px;
color: rgb(60, 155, 125);
font-size: 17px;
font-weight: bold;
border: 2px solid rgb(60, 155, 125);
}
.mMen a:hover { 
text-decoration: none; 
color: rgb(90, 90, 90);
background-color: rgb(100, 250, 175);
border: 2px solid rgb(100, 250, 175);
}
@media only screen and (min-width: 999px) {
.mMen { width: auto; }
}
.l0 {
width: 100%;
clear: both;
}


#active a {
color: white;
background-color: rgb(60, 155, 125);
border: 2px solid rgb(60, 155, 125);	
}
#active2 a {
text-decoration: underline;	
}

.logo {
width: 500px;
margin: 10px 0;
float: left;
}
.sitename {
color: rgb(60, 155, 125);
font-size: 46px;
font-weight: bold;	
padding: 40px 0 0 40px;
float: left;
}

.zaNas {
float: left;
margin-right: 12px;
width: 236px;
}

.foot {
border-top: 1px dotted grey;
margin: 20px 0;
padding: 20px 0;
text-align: center;
font-size: 90%;
width: 100%;
background-color: rgba(60, 155, 125, .25);
}
.foot p {
margin: 4px;
padding: 0;
}

.gall {
width: 33%;
float: left;
min-height: 320px;
margin-bottom: 10px;
}
.gall img {
    width: 99%;
    aspect-ratio: 3/2;
    object-fit: contain;
}
.gall p {
margin: 0; 
padding: 0; 
padding-bottom: 15px; 
text-align: center;
font-size: 85%;
}

.alignMenu {
	width: 100%;
	margin: 15px auto 0 auto;
}

.indImg img {
	width: 100%;
}

.copyright {
	text-align: center;
	font-size: 80%;
	color: rgb(80,80,80);
}

/****************************/

.pagination {
    margin-top: 20px;
	text-align: center;
}
.pagination a {
    margin: 0 2px;
    padding: 8px 12px;
    background: rgb(60, 155, 125);
    text-decoration: none;
    color: rgb(253, 238, 143);
}
.pagination a.active {
    background: rgb(253, 238, 143);
    color: rgb(60, 155, 125);
    border: dotted 1px rgb(60, 155, 125);
}

/****************************/
.next{
display:none;
position:absolute; 
top: 50%;
right:1%;
padding:25px 30px; 
cursor:pointer; 
color: white;
font-weight: bold;
font-size: 150%;
background-color:rgba(0, 0, 0, .5);
}
.next:hover {
background-color: blue;
}

.prev{
display:none;
position:absolute; 
top: 50%;
left:1%;
padding:25px 30px; 
cursor:pointer; 
color: white;
font-weight: bold;
font-size: 150%;
background-color:rgba(0, 0, 0, .5);
}
.prev:hover {
background-color: green;
}

.close{
display:none;
position:absolute; 
right:0;
top:0;
padding:25px 30px;
cursor:pointer; 
color: white;
font-weight: bold;
font-size: 150%;
background-color:rgba(0, 0, 0, .5);
}
.close:hover {
background-color: red;
color: white;
}

.imageDisplay { 
margin:0 auto; 
position: relative; 
}

.imageDisplay img { 
/* max-width: 100%; */
width: auto;
max-height: 98vh;
margin: auto; 
}

.imageContainer {
	float:left; 
	padding:10px;
	}
.imageContainer img {
	height: 200px; 
	cursor:pointer; 
	box-shadow: 0 0 5px 1px rgb(130, 130, 130);
}

.locationGallery {
margin:0 auto;
float: left;
height: 100vh;
}

.abso {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color:rgba(0, 0, 0, .75);
}

.frameimg img {
width: 180px; 
/* height: 128px;  */
overflow: hidden; 
position: relative; 
}

.puTit {
font-size: 200%;
font-weight: bold; 
padding: 5px 15px 0 15px;
color: rgb(60, 155, 125);
}
.puSubt {
font-style: italic;
padding: 0 15px 15px 15px;
}
.puHits {
font-size: 80%;
color: grey;
border-top: dotted 1px black;
border-bottom: dotted 1px black;
padding: 5px 0 5px 25px;
}
.puCover {
float: left;
margin: 25px 30px 10px 0;
/* background-color: white; */
/* padding: 0; */
}
.puCover img {
max-width: 100%;
/* border-radius: 20px 40px; */
}
@media only screen and (min-width: 999px) {
.puCover img { width: 350px; }
 }
 .puCoverTxt {
 width: 350px; 
 position: relative;
 text-align: center;
 font-size: 90%;
 color: rgb(80,80,80);
 }
.pubFrame {
margin: 0 10px;
padding: 40px 80px;
    background-color: rgba(253, 238, 143, .1);
box-shadow: 0 0 5px 1px rgb(130, 130, 130);
}
.puText img {
width: auto;
} 

.boIll {
margin: 10px auto;
}
.boIll img {
border: solid 1px grey;
max-width: 800px;

}.boIll2 {
margin: 10px auto;
}
.boIll2 img {
border: solid 1px grey;
max-width: 800px;
}

.point { cursor: pointer; }

.iSear {
background-color: rgba(255, 179, 0, .25);
padding: 5px 10px;
margin: 4px auto;
display: block;
width: 66%;
text-align: center;
}
.iSear a {
color: black;
text-decoration: none;
display: block;
}
.iSear:hover {
background-color: rgba(255, 179, 0, .5);
}

.wait {
color: grey;
text-align: center;
}

.icnPg {
width: 111px;
margin: 0 auto 25px auto;
}
.icnPg img {
width: 100%;
}
.cmnDiv {
display: flex;
  flex-direction: row;      /* Подрежда елементите един до друг */
  justify-content: center;  /* Центрира ги хоризонтално */
  align-items: center;      /* Центрира ги вертикално (ако контейнерът има височина) */
  gap: 15px;                /* Разстояние между вътрешните div-ове */
  width: 100%;

}

@media (max-width: 999px) {
  .cmnDiv {
    flex-direction: column; /* Подрежда елементите един под друг */
  }
}