.flexbox {display: flex; justify-content:center; flex-flow: row wrap; margin: 0; clear: both;}
.flexdiv{display: flex; justify-content:center; flex-flow: row nowrap; margin: 0;}
.flexalignbox {display: flex;}

.img100 {width: 100%; height: auto; cursor: pointer;}
.img50, .img30 {display: flex; flex-flow: row wrap;}
.img50 p, .img30 p {width: 49%; margin: 1% 0; background-size:cover;}
.img50 p:nth-child(2n) {margin-left: 2%;}
.img50 p img {width: 100%; height: auto; cursor: pointer;}

.img30 p {width: 32%; margin: 1% 0;}
.img30 p:nth-child(2n) {margin: 1% 2%;}
.img30 p img {width: 100%; height: auto; cursor: pointer;}

.img-50 {display: flex; flex-flow: row wrap;}
.img-50 div {width: 49%; margin: 1% 0;}
.img-50 div:nth-child(2n) {margin-left: 2%;}
.img-50 div img {width: 100%; height: auto; cursor: pointer;}
.img-50 div p {margin: 1em 0;}
@media screen and (max-width: 900px) {
 .img50 p, .img30 p {width: 100%; margin: 6px 0;}
 .img-50 div  {width: 100%; margin: 6px 0;}
 .img-50 div:nth-child(2n) {margin-left: 0;}
}
.flexalignbox img, .flexalignbox div, .flexalignbox .img-50 div div{margin: auto;}
.img25{width: 25%; height: auto; padding: 0; margin: 0;}

.pcenter {text-align: center; font-weight: bold; margin-bottom: 24px;}
.pcenter img {width: 100%; height: auto; margin-bottom: 12px;}
.alignmagik{margin: auto;}
.middlebox {display: flex;}
.middlebox p,.middlebox div, .img-50 .middlebox p,.img-50 .middlebox div {margin: auto 12px;}
.verticalmiddle{display:flex; flex-direction: column;  justify-content: center;}

.f75 {flex-grow:1; flex-basis:75%;}
.f50 {flex-grow:1; flex-basis:50%;}
.f33{flex-grow:1; flex-basis:33%;}
.f25{flex-grow:1; flex-basis:25%;}
.f66 {flex-grow:2;  flex-basis:66%;}
@media screen and (max-width: 1000px) {
    .flexdiv{display: flex; justify-content:center; flex-flow: row wrap; margin: 0;}
    .f25{flex-grow:1; flex-basis:50%;}
    .f75{flex-grow:1; flex-basis:50%;}
}
@media screen and (max-width: 640px) {
.f50 {flex-grow:1; flex-basis:100%;}
.f33{flex-grow:1; flex-basis:100%;}
.f66 {flex-grow:1;  flex-basis:100%;}
.f25{flex-grow:1; flex-basis:100%;}
.f75{flex-grow:1; flex-basis:100%;}
}

.flex70 {width: 70%;}
.flex60 {width: 60%;}
.flex50 {width: 50%;}
.flex40 {width: 40%;}
.flex30 {width: 30%;}
@media screen and (max-width: 720px) {
.flex70 {width: 100%;}
.flex60 {width: 100%;}
.flex50 {width: 100%;}
.flex40 {width: 100%;}
.flex30 {width: 100%;}
   }
/*новости*/
.flexnews {width: calc((100% - 24px)/3); margin: 1em 6px; font-size: 1em; position: relative; padding-bottom: 4px;}
.flexnews:nth-child(3n+1) {margin-left: 0;}
.flexnews:nth-child(3n) {margin-right: 0;}
.flexnews_img {width: 100%; margin-bottom: 4px;}
.flexnews h4 {margin: 8px 0 12px 0; color: #666;}
.flexndate{font-size: 0.8em; font-weight: bold; color: #344d65;}
.smalli{font-size: 0.7em; font-weight: bold; color: #344d65;}
.news_more{position: absolute; right: 0; bottom: 0; color: #BBB;}
@media screen and (max-width: 720px) {
     .flexnews {font-size: 0.9em;}
     .flexnews {width: 98%; margin:12px 1%;}
   }
/*фотоальбом*/
.fotoalboom {display: flex; flex-flow: row wrap; margin: 24px 0;}
.fotoalboom-mp {display: flex; flex-flow: row wrap; margin: 24px 0;}
.foto{width:33.3%; position: relative;}
@media screen and (max-width: 840px) {
     .foto {width:50%;}
     .img25{width: 50%;}
   }
 @media screen and (max-width: 480px) {
     .foto {width:100%;}
   }
.foto4{width:25%; position: relative;}
@media screen and (max-width: 840px) {
     .foto4 {width:50%;}
   }
 @media screen and (max-width: 480px) {
     .foto4 {width:100%;}
     .img25{width: 100%;}
   } 
.hr {border-bottom: 1px solid #CCC; height: 1px; margin: 1em 0;}
.foto img, .foto4 img {width:98%; height:auto; margin:0 1%}
.foto div, .foto4 div{padding:8px 2%; position: absolute; left: 1%; bottom: 1%; background: rgba(0,0,0,0.5); color: white; text-align: left; width: 94%; font-size: small; font-weight: bold;}