/* rev.2024 v1.m */
/* Generic styles */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
	background-color: #337888;
	font:1.2rem Verdana, Arial, Helvetica, sans-serif;
	color:#c7bc9c;
	border:0px;
	margin:0;
	padding:0px;
}
	p, a {
		font-family: 'Source Sans Pro', sans-serif;
	}
	p {
		text-align:justify;
		line-height:1.2rem;
		text-indent:1rem;
		letter-spacing:0.2rem;
	}
		p:first-letter {
			font-size:1.3rem;
			font-weight:400;
		}
	h1 {			/* Contacts. Thank-you page */
		color:#ffcd12;
		font:italic 1.4rem Geneva, Verdana, Arial, sans-serif;
	}
	h2, h3, h4, h5, h6 {
		font-family: 'Playfair Display', serif;
		color:#ffcd12;
	}
		a:link, a:visited {
			text-decoration:none;
			color:goldenrod;
		}
		a:hover, a:focus, a:active {
			text-decoration: underline;
			color:goldenrod;
		}
@font-face {
	font-family: 'Arbat';
	src: local('fonts/arbat_.woff') format('woff'), 
		local('fonts/arbat_.ttf') format('truetype'), 
	}
@font-face {
	font-family: 'Hanford';
	src: local('fonts/hanford_.woff') format('woff'), 
		local('fonts/hanford_.ttf') format('truetype'), 
}
@font-face {
	font-family: 'Boyarsky';
	src: local('fonts/boyarsky_.woff') format('woff'), 
		local('fonts/boyarsky_.ttf') format('truetype'), 
}
.wrapper {
	min-width: 420px;
	overflow: hidden;
}
/* Styles for the top */
.verkh {
	background: url('img/verkh_bckgrnd.png') center;
	background-size: cover;
	padding: 1rem .5rem;
	display: flex;
	align-items: center;
	min-width: 410px;
}
	.poinc {
		display: box;
		min-width: 100px;
		max-width: 15%;
		float: left;
	}
	.poinc img {
		width: 100%;
		left: 33%;
		top: 10%;
		position: relative;
	}
	.verkh_spcr {
		display: box;
		width: 17%;
		float: left;
	}
	.verkh_logo {
		display: box;
		min-width: 300px;
		max-width: 68%;
		float: left;
	}	
	.verkh_logo img {
		width: 100%;
		left: 0;
		top: 15%;
		position: relative;
	}
#sv11 {
	position: sticky;
	top: 0;
	z-index: 1000;
	display: grid;
	min-width: 410px;
	background-color: #6fa8be;
	justify-content: center;
	min-width: 360px;
	height: fit-content;
	border-radius: 0 0 6px 6px; 
}
	ul.menu {
		padding: 0px;
		margin: 3px 0;
	}
	.menu li {
		display: inline-block;
		list-style-type: none;
		text-align: center;
		font-size:1.1rem;
		text-transform:uppercase;
		text-shadow:0px 1px 2px #d2d1ce;		
		margin: 0 0.15rem;
		font-weight:bolder;
		padding: 0.3rem 1.2rem 0.2rem 1rem;
		border: thin outset #57aec1;
		border-radius: 6px;	
	}
	#sv11 .currpage {
		color: #022131;
		font-stretch: extra-expanded;
		border: 1px outset #b38c00;
		background-color: #e6b300;
	}
	#sv11 a:link {
		color: #022131;
		text-decoration: none;
		display: inline-block;
		transition: all .3s;
	}
	#sv11 li a:hover:not(.currpage) {
		color: #ffcd12;
		text-shadow:0 0 2px #022131;
		opacity: .9;
	}

/* == MAIN CONTENT == */
.mainContent {
	display: block;
	margin: auto;
	padding: 15px;
	min-width: 410px;
	max-width: 1150px;
	background-color: #022131;
	border: .5px solid #022131;
	border-radius: 6px;
	overflow:hidden;
}
/* HOME-RAZDEL styles */
.razdel {
  padding: 2rem;
}
	.razdel > ul {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	  grid-gap: 1rem;
	  padding: 0;
	}
	.razdel > ul > li {
	  border: 1px solid goldenrod;
	  border-radius: .5rem;
	  list-style: none;
	  padding: 1rem 0;
	  text-align: center;
	}
	.razdel > ul > li > figure {
	  height: 250px;
	  overflow: hidden;
	  border-top-left-radius: .5rem;
	  border-top-right-radius: .5rem;
	  position: relative;
	}
	.razdel > ul > li > figure > img {
	  width: 100%;
	}
	.razdel > ul > li > figure > figcaption {
	  position: absolute;
	  bottom: 0;
	  background-color: rgba(0,0,0,.75);
	  width: 100%;
	}
	.razdel > ul > li > figure > figcaption > h3 {
	  color: #ffcd12;
	  padding: .05rem;
	  font-size: 1.5rem;
	  letter-spacing: .25rem;
	  text-align: center;
	}
	.razdel > ul > li > p {
	  font-size: 1rem;
	  line-height: 1.5;
	  padding: 1rem .75rem;
	  color: #666666;
	}
	.razdel > ul > li > a {
	  padding: .5rem 1rem;
	  margin: .5rem;
	}
	.cornerLink {
		display: block;
		position: relative;
		clear: both;
		bottom: 6px;
	}
	.cornerLink > a {
		color: goldenrod;
		font-size-adjust: .7;
	}
/* Pages -- Main Content */
.pageHeading {
	float: right;
	clear:both;
	position:relative;
	right:11px;
	height:2rem;
	padding:0 0.9em 0 1.2rem;
	letter-spacing:0.1rem;
	word-spacing:0.4rem;
	white-space:nowrap;
	font: italic small-caps bold 1.4rem/2rem Georgia, "Times New Roman", Times, serif;
	color:#FBC505;
}
/* Other Pages - Content */
.sv123past {
  margin: 15px auto;
  padding: 0 15px;
  width: 100%; 
  display: box;
  text-align: justify;
}

/*
article {
  border-radius: 10px;
  padding: 7px;
  color: #fff;
}


article:nth-child(odd) {
  float: left;
  clear: left;
}

article:nth-child(even) {
  float: left;
}
*/

.lineclamp {
	display: block;
	width: 100%;
	overflow: hidden;
	padding: 0 1rem;
	margin-bottom: .7rem;
}

/* CONTENT begin*/
/* General pages*/
sect_hat, #sect_cont, #sect_shoe {
	clear:both;
	position:relative;
	top:-5px;
	margin:auto auto;
	visibility:visible;
	overflow:hidden;
	width:98%;
	border:0px;
}
/*Store pages*/
	#sect_cont.store {
		border-top:0.01rem outset Maroon;
		border-radius:11px;
	}
/*Museum pages*/
	#mus_cat {
		font: italic small-caps bold 1.6rem/2.1rem Georgia, "Times New Roman", Times, serif;
		text-align:center;
		margin:1rem auto;
	}
		.mc {
			float:left;
			margin:0.2rem 2.9rem;
		}
/*????????????? ????????*/
.contPicL , .contPicR  {
	display:inline-block;
	max-width:220px;
	max-height:220px;
	border-top:0.01rem outset SteelBlue;
	border-left:0.01rem outset SteelBlue;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	border-radius:4px;
	box-shadow:1px 2px 11px 1px Maroon;
}
	.contPicL  {
		float:left;
		margin:4px 13px 4px 4px;
	}
	.contPicR  {
		float:right;
		margin:4px 4px 4px 13px;
	}
.venzContTL {
	float:left;
}
.venzContBR {
	float:right;
	margin:6px 0 0 13px;
}
/* CONTENT end*/

/* footer */
#sv151 {
	display: flex;
	flex-direction: raw;
	justify-content: space-evenly;
	background-color: #6fa8be;
	min-width: 360px;
	height: fit-content;
	border-radius: 0 0 6px 6px; 
	padding: 5px 9px 3px;
}
#sv151 > .mediabttn {
	border: solid white .5px;
	border-radius: 3px;
}
#sv15 > .legal {
  font-size: .75rem;
  font-style: italic;
  text-align: center;
  margin-top: 0;
}

	@media screen and (max-width: 2400px) {
		.menu li { font-size: 1.3rem; }
		.pageHeading { font-size: 1.4rem; right:7px; height:2rem; padding:0 0.9rem 0 1.2em; }

	}
	@media screen and (max-width: 900px) {
		.menu li { font-size: 1.2rem; }
		.pageHeading { font-size: 1.35rem; right:7px; height:1.9rem; padding:0 0.7rem 0 0.8em; }

	}
	@media screen and (max-width: 860px) {
		.menu li { font-size: 1.15rem; }
		.pageHeading { font-size: 1.3rem; right:5px; height:1.8rem; padding:0 0.5rem 0 1.2em; }
	}
	@media screen and (max-width: 840px) {
		.menu li { font-size: 1.1rem; }
		.pageHeading { font-size: 1.25rem; right:3px; height:1.75rem; padding:0 0.3rem 0 0.9rem; }
	}
	@media screen and (max-width: 660px) {
		.menu li { font-size: 1.05rem; }
		.pageHeading { font-size: 1.2rem; right:2px; height:1.7rem; padding:0 0.2rem 0 0.7rem; }
	}
	@media screen and (max-width: 580px) {
		.menu li { font-size: 1rem; }
		.pageHeading { font-size: 1.2rem; right:1px; height:1.6rem; padding:0 0.1rem 0 0.5rem; }
	}
	@media screen and (max-width: 500px) {
		.menu li { font-size: 0.95rem; }
		.pageHeading { font-size: 1.15rem; right:0; height:1.5rem; padding:0 0 0 0.3rem; }
	}


/*
	.lineclamp > .lcover {
		display: block;
		position: absolute;
		bottom: -3rem;
		width: 100%;
		height: 3rem:
		background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
		padding: 3rem .1rem .5rem .1rem;
		text-align: left;
	}
		.lcobutton {
			background-color: #e7e7e7;
			font-weight: bold;
			color: black;}
		}

*/


/*

<div id="container">
    <div id="floated">...some other random text</div>
    ...
    some random text
    ...
</div>
   <div style="width:100%;">
        <div style="float:left;width:30%; background:red;">...something something something  random text</div>
        <div style="float:none; background:yellow;"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div>
    </div>
CSS

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
#container:before {
  content: ' ';
  display: table;
  width: 10rem;    
}
*/
/* Min width required */

/*
#floated{
    float: left;
    width: 150px;
    background: red;
}


*/


/* 
.oval {
  width: 400px;
  height: 250px;
  color: #111;
  border-radius: 50%;
  text-align: center;
  font-size: 90px;
  float: left;
  shape-outside: ellipse();
  padding: 10px;
  background-color: MediumPurple;
  background-clip: content-box;
}
span {
  padding-top: 70px;
  display: inline-block;
}

<div class="oval"><span>PHP</span>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
  of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
  Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing Lorem Ip
  
  
  
*/
/*

#wrap {
    margin: 3rem 8rem;
}
.left {
    float: left;
    margin-right: 1.5rem;
}
.right {
    float: right;
    margin-left: 1rem;
}
*/
/* this is what keep the <p> from wrapping */
/*
p {							
    overflow: hidden; 
}
/*
/* this is an example of the browser default */
/*
p:last-child {
    overflow: visible; 
}

<div id="wrap">
<img class="left" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nulla... ermentum.</p>
<img class="right" src="http://dummyimage.com/172x172/0088cc/ffffff.gif&amp;text=.img">
<p>Nullam id ... ra augue. Morbi leo risus</p>




*/