/*https://wp-kama.ru/wp-content/uploads/2017/11/shpargalka-flexbox.png*/

body{ font-family:Trebuchet MS}



.info {
    width: 350px;
    /*height: 30%;*/
    padding: 75px 5px 5px 5px;
    position: absolute;
/*    z-index: 0;*/
}
.info a {
    color:#0000FF;
    /*padding:5px 5px;*/
    text-decoration:none;
    text-align:center;
    cursor: pointer;
}
.info a:hover {
}


.foot {
	display: flex;
	justify-content: flex-end;
    background: white; /* Fallback */
    background: -moz-linear-gradient(#ffffff 75%, #f2f2f2 100%);
    background: -ms-linear-gradient(#ffffff 75%, #f2f2f2 100%);
    background: -o-linear-gradient(#ffffff 75%, #f2f2f2 100%);
    /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));*/
    background: -webkit-linear-gradient(#ffffff 75%, #f2f2f2 100%);
    background: linear-gradient(#ffffff 75%, #f2f2f2 100%);
    width: 100%;

}

.foot a {
	color:#000;
	padding:15px 10px;
	text-decoration:none;
	text-align:center;
}

.foot a:hover {
	font-weight: 700;
}



.main {
	display: flex;
	/*flex-flow: row wrap;*/
	flex-wrap: wrap;
	/*align-self: left;*/
	/*align-items: flex-start;*/
	align-content: space-around;
	justify-content: space-around;
	background: #99999900;
	padding: 0px;
	min-width: 80%;
}

.mediacontainer {
	color:#000;
	display: flex;
	align-content: space-evenly;
	/*align-content: flex-end;*/
	justify-content: space-around;
	flex-flow: row wrap;        
	writing-mode: horizontal-tb;
	-webkit-align-self: flex-start; 
	align-self: flex-start;
	/*padding:20px;*/
	margin: 10px;
	/*text-decoration:none;*/
	/*text-align:left;*/

    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 3px 7px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 10px;
    background: white; /* Fall		back */
    background: -moz-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    background: -ms-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    background: -o-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));*/
    background: -webkit-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);
    background: linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);


	/*width: 50%;*/
	max-width: 600px;
	min-width: 200px;
	min-height: 400px;
/*	max-height: 200px;
	min-height: 100px;*/
}


.mediacontainer_img {
	color:#000;
	align-self: center;
	/*padding:5px;*/
	text-align:center;
	/*background: #AAAAAA11;*/
	-webkit-filter: brightness(1.0) grayscale(0.8);
	width: 30%;
	min-width: 200px;
	max-height: 200px;
	}
.mediacontainer_head {
	color:#000;
	align-self: center;
	padding:10px;
	text-align:center;
	/*background: #AAA;*/
	width: 70%;
	/*max-width: 200px;*/
}
.mediacontainer_text {
	color:#000;
	align-self: center;
	padding: 0px 20px 20px 20px;
	text-align:left;
	/*background: #AAA;*/
	width: 100%;
	/*max-width: 200px;*/
}

.mediacontainer:hover .mediacontainer_img{
	-webkit-filter: brightness(1.0) grayscale(0.0);
}

:root{ --nav-h: 56px; }

html, body{
    height:100%;     /* ← чтобы 100 % у body было чем мерить */
    margin:0;
}

.Loader {
    position: fixed;
    top: var(--nav-h); /* Start right below the navbar */
    left: 0;
    right: 0;
    bottom: 29px; /* Extend to the footer */
    z-index: 9999;
    display: flex;
    flex-direction: column; /* Располагаем элементы вертикально */
    align-items: center; /* Центрируем по горизонтали */
    justify-content: center; /* Центрируем по вертикали */
    background: #ffffff;
}

.Logo {
	margin:0 0 40px;
    width: 100%;
    display: flex;
    justify-content: space-around;

}

.StatusLoader {
    margin-top:20px;
/*    font-style:italic;*/
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    z-index: 100;
    }

/* ������ 500px */

@media (max-height:500px){
    .Logo img{ max-height:40px; }
    .Logo{ margin:0 0 20px; }
    .StatusLoader{ font-size:1rem; }
}

@media all and (max-width: 600px) {
    .info {
        width: 50%;
        padding: 5px 5px 5px 5px;
    }
	.foot {
		flex-direction: column;
		display: none;
		}
	.main {align-content: flex-start;}
}