@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	color: white;
}

li {
	list-style: none;
}

hr {
	width: 100%;
	margin: 20px 0 20px 0;
}

.link4 {
	color: green;
}


.blur {
	-webkit-filter: blur(3px);
	   -moz-filter: blur(3px);
		 -o-filter: blur(3px);
		-ms-filter: blur(3px);
			filter: blur(3px);
  }

  .overlay {
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.7);
	z-index: 110;
}

.static {
	position: fixed !important;
}

.hide {
	visibility: hidden;
	min-height: 0px !important;
	width: 0 !important;
}

.infotext {
	text-shadow: 5px 1px 3px black, 0 0 1em #01061c; 
}

.infotext2 {
	color:white;
	text-shadow: 5px 1px 3px black, 0 0 1em #01061c; 
}

.main {
	display: flex;
	flex-direction: column;
}

.headertop {
	height: 60px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: fixed;
	background-color: rgba(33,37,41,1);
	z-index: 100;
}

.logo {
	width: 20%;
	padding-left: 10%;
	margin: 10px 0;
	color: white;
	font-family: 'Lobster', cursive;
	letter-spacing: 3px;
	text-shadow: 5px 1px 3px black, 0 0 1em #01061c; 
}

.menubar {
	margin: 20px 5% 20px 0;
	width: 40%;
}

.menu > li {
	display: inline;
	font-size: 1.1em;
	margin-left: 90px;
	font-weight: bold;
}

.menu > li:hover {
	text-decoration: underline;
}

.menuactive {
	text-decoration: underline;
}


.headermiddle {
	display: flex;
	width: 100%;
	height: 100vh;
	position: fixed;
	background: url(background.jpg);
	background-size: 100%;
	z-index: 0;
	margin-top: 60px;
}

.headermiddlecontent {
	width: 50%;
	margin: 75px auto;
	text-align: center;
}

.headermiddlecontent > h2 {
	color:white;
	font-size: 2.4em;
	margin-bottom: 40px;
	text-shadow: 5px 1px 3px black, 0 0 1em #01061c; 
}

.content {
	width: 100%;
	display: flex;
	flex-direction: column;
	z-index: 95;
	position: absolute;
	top: calc(60vh + 60px);
	overflow: hidden;
}

.contentmenubar {
	width: 100%;
	    background-color: #094d67;
}

.contentmenu {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.contentmenu > a {
	text-align: center;
	padding: 20px 0;
	font-size: 1.1em;
	width: 100%;
}

.mainpart {
	display: flex;
	justify-content: space-between;
	background-color: #212529;
	box-shadow: 0 0 10px rgba(0,0,0,1);
}

.partname {
	width: 60%;
	margin: 0 auto;
	text-align: center;
	padding: 15px 0;
	color: white;
	transition: .2s linear;
}

.partname:hover {
	cursor: pointer;
	color: #39c8ff;
	transition: .2s linear;
}

.closebtn {
	width: 10%;
	margin-right: 20px;
	text-align: center;
	padding: 15px 0;
	cursor: pointer;
	color: white;
	transition: .2s linear;
}

.closebtn:hover {
	color: #39c8ff;
	transition: .2s linear;
}

.contentmenu > a:hover {
	background-color: violet;
	color: black;
	transition: .3s linear;
}

.active {
	background-color: gray;
	color: black;
}

.contentwrapper {
	width: 100%;
	min-height: 300px;
	    background-color: #053040;
	display: flex;
	justify-content: center;
}

.container {
	display: grid;
	grid-template-rows: 1fr repeat;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100vw;
	padding: 0 15vw;
	margin-top: 20px;
}

.post {
	max-height: 250px;
	margin-right: 10px;
	position: relative;
	overflow: hidden;
    box-shadow: 0 0 6px;
    opacity: .85;
    transition-duration: .25s;
}

.post:hover {
	opacity: 1;
	transition-duration: .25s;
	cursor: pointer;
}

.post:hover img {
	top: -10%;
	left: -10%;
	width: 120%;
	height: 120%;
	transition-duration: .25s;
}

.postcontent > img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	top: 0;
	left: 0;
	transition-duration: .25s;
	z-index: 125;
}

.postinfo {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 125;
	display: flex;
	flex-direction: column;
}

.postauthor {
	width: 95%;
	height: 15%;
	position: absolute;
	margin: 5% 0 0 5%;
	font-size: 1.2em;
	font-weight: bold;
	color: white;
}

.postname {
	width: 98%;
	height: 75%;
	position: absolute;
	z-index: 150;
	top: 5%;
}

.postinfo > .postname > h3 {
	position: absolute;
	top: 30%;
	left: 5%;
	color: white;
	z-index: 150;
	font-size: 1.5em;
	text-shadow: 0 0 2px;
}



/* статьи */


p:first-child {
	margin-top: 20px;
}

p {
	margin: 20px 30px 0 30px;
	font-size: 1.2em;
}

.imgcontainer {
	margin: 20px auto;
}

.qr {
	width: 200px;
}

.soloimg {
	width: 500px;
}

.list {
	margin-left: 50px;
}

.statecontent {
	width: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	z-index: 120;
	position: absolute;
	top:100px;
	overflow: hidden;
	opacity: 1;
}

.statecontainer {
	width: 70%;
	margin: 0 auto;
	overflow: hidden;
	background: white;
}

.statepicture {
	width: 100%;
	height: 80vh;
	position: relative;
}

.statepicture > img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	top: 0;
	left: 0;
}

.statemaincontent {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.stateheader > h2 {
	text-align: center;
	font-size: 2.4em;
	margin: 40px 0 0 0;
	color: #333;
}

.stateheader > h4 {
	text-align: center;
	font-size: .8em;
	text-transform: uppercase;
	color: gray;
	letter-spacing: 2px;
}

.stateside {
	width: 100%;
	display: flex;
	margin-bottom: 60px;
	flex-direction: column;
}

.statetext {
	width: 100%;
	margin: 40px 3% 40px 6%;
	font-size: 1.15em;
	color: gray;
}



.removemodal {
	position: absolute;
	z-index: 1000;
	width: 50px;
	left: 86%;
}

.removemodal:hover {
	cursor: pointer;
}

.footer {
	width: 100%;
	height: 70px;
	background-color: #212529;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: white;
	padding-bottom: 20px;
}

.footer > .msou {
	font-size: .9em;
}