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

body{ font-family:Trebuchet MS; }

.head {
	display: flex;
	justify-content: flex-start; /* разместим справа */
	/*background: #6e9cc3;*/
    
    background: #FFFFFF00; /* Fallback */
    /*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 33%);*/
    /*background: #6e9cc3;*/
    width: 100%;
    height: 40px;
    margin: -5px -5px -5px -5px;
    /*z-index: -1;*/
}

.head .userPane {
	display: flex;
	color:#000;
	-webkit-align-self: stretch;
	align-self: stretch;
	justify-self: stretch;
	margin-left:auto;
	padding: 15px 5px;
	line-height: 100%;
}

.head .headPane {
	display: flex;
	color:#000;
	-webkit-align-self: stretch;
	align-self: stretch;
	justify-self: stretch;
	margin-right:auto;
	padding:5px 5px;
}


.userPane a {
	color:#000000;
	padding:5px 5px;
	text-decoration:none;
	text-align:center;
	cursor: pointer;
	/*font-weight: 700;*/
	font-size: 1.25em;
}

.userPane a:hover {
	/*background: #999;*/
	/*-webkit-filter: opacity(80%);*/
	/*background: -webkit-linear-gradient(#f2f2f2, #ffffff 25%, #ffffff 75%, #f2f2f2 100%);*/
	/*font-weight: 700;*/
	text-shadow: 0 0 1em #D48B2199, 0 0 0.2em #D48B2199;
}

.info {
    width: 350px;
    /*height: 30%;*/
    padding: 75px 5px 5px 5px;
    position: absolute;
    z-index: 100;
}
.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: 2px;
	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;*/
}

.button_join {
	outline: none;
	/*background:#EEE;*/
    border-radius: 10px;
    padding: 5px 10px 5px 10px;
    margin: 10px;
    /*font-style: 700;*/
    font-weight: 700;
    cursor: pointer;
    border: none;

    background: #EEE;
    background: -moz-linear-gradient(#EEE, #AAA);
    background: -ms-linear-gradient(#EEE, #AAA);
    background: -o-linear-gradient(#EEE, #AAA);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEE), to(#AAA));
    background: -webkit-linear-gradient(#EEE, #AAA);
    background: linear-gradient(#EEE, #AAA);

    box-shadow: 
		0 0 5px rgb(50 50 50 / 50%), 
		0 5px 5px rgb(50 50 50/ 20%), 
		inset 0 -3px 2px rgb(50 50 50/ 20%)
	}
.button_join:hover {
/*	background:#D48B2199;
    box-shadow: 
		0 0 10px rgb(212 139 33 / 50%), 
		0 5px 5px rgb(212 139 33/ 20%), 
		inset 0 -3px 2px rgb(212 139 33/ 20%)*/

    background: #dddddd;
    background: -moz-linear-gradient(#FCD221, #D58921);
    background: -ms-linear-gradient(#FCD221, #D58921);
    background: -o-linear-gradient(#FCD221, #D58921);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#FCD221), to(#D58921));
    background: -webkit-linear-gradient(#FCD221, #D58921);
    background: linear-gradient(#FCD221, #D58921);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;


}

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





.mm_button {
    position: relative;
    z-index: 125;
    /*background-color: #808080;*/
    /*background: transparent;*/
    background: url(../Css/img/ButtonType1.png);
    background-size: cover;
    width: 42px;
    height: 42px;
    border: 0px solid #000000;
    vertical-align: top;
    color: #000000;
    padding: 0px;
    outline: none;
    margin: 2px;
    display: inline-block
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none; 
    /*box-sizing: border-box;*/
}

/*.mm_button img {position: relative;}*/

/*.mm_button:active {
    border: 0px solid #000000;
}*/


.mm_buttonicon{
    /*position: relative;*/
    left: 0px;
    top: 1px;
    z-index: 0;
    background: transparent;
    width: 36px;
    height: 36px;
    border: 0px solid #000000;
    /*text-align: center;*/
    vertical-align: top;
    /*-webkit-filter: contrast(1.9) grayscale(1);*/
    -webkit-filter: brightness(0.9) grayscale(0.8);
    /*-webkit-filter: grayscale(100%); */
    padding: 0px;

}

.mm_buttoniconselect{
    /*position: relative;*/
    left: 0px;
    top: 1px;
    z-index: 0;
    background: transparent;
    width: 42px;
    height: 42px;
    border: 0px solid #000000;
    /*text-align: center;*/
    vertical-align: top;
    /*-webkit-filter: contrast(1.9) grayscale(1);*/
    /*-webkit-filter: brightness(0.6) grayscale(1);*/
    /*-webkit-filter: grayscale(100%); */
    padding: 0px;

}

.mm_button:hover {
    -webkit-filter: grayscale(0%); 
}
.mm_button:focus {
    -webkit-filter: grayscale(0%); 
}
.mm_button:active {
    -webkit-filter: grayscale(0%);
    margin: 4px;
    width: 38px;
    height: 38px;
}


.mm_buttonicon:hover {
    -webkit-filter: grayscale(0%); 
}
.mm_buttonicon:focus {
    -webkit-filter: grayscale(0%); 
}
.mm_buttonicon:active {
    -webkit-filter: grayscale(0%);
    width: 32px;
    height: 32px;
}


.mm_buttonicon.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.mm_button.disabled {
    opacity: 0.5;
    pointer-events: none;
}


.mm_button_separator {
    position: relative;
    z-index: 125;
    background: url(../img/ButtonType2.png);
    background-size: cover;
    width: 6px;
    height: 36px;
    border: 0px solid #000000;
    vertical-align: top;
    /*color: #000000;*/
    padding: 0px;
    outline: none;
    margin-top: 2px;
    margin-left: 3px;
    margin-right: 3px;
    display: inline-block
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none; 
    /*box-sizing: border-box;*/
}




/* меньше 500px */
@media all and (max-width: 600px) {
	.head .headPane {
	 	flex-direction: column;
	 	display: none;
		}
    .info {
        width: 50%;
        padding: 5px 5px 5px 5px;
    }
	.foot {
		flex-direction: column;
		display: none;
		}
	.main {align-content: flex-start;}
}