#change_lang{
	width: 230px;
}
#change_lang > div {
	display: flex;
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;    /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	height: 40px;
	width: 30px;
}
.school {
	align-items: flex-end;
	display: flex;
	margin-bottom: 7px;
}
#flag, #flag + label { display: none; }

.flag {
	border-left: 1px solid #D1D3D4;
	margin-right: 5px;
	height: 100%;
	position: relative;
	width: 29px;
}

.flag img.mask{
	position:absolute; 
	width:7px; 
	height: 21px; 
	top: 0px; 
	right: 0px;
}

.loading{ width: 30px; float:left; height: 40px }

.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:#FFFFFF;}

@media screen and (max-width: 900px) {
	#change_lang{
		width: auto;
	}
	#change_lang > div {
		background-color: #fff;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		display: none;
		flex-wrap: wrap;
		justify-content: center;
		margin-right: 5px;
		padding: 6px;
		position: absolute;
		right: 0;
		top: 47px;
		width: 155px;
		height: auto;
		z-index: 100;
	}
	#flag + label{
		align-items: center;
		cursor: pointer;
		display: flex;
	}
	#flag + label span {
		margin-right: 10px;
		width: 6px;
		transform: rotate(90deg);
		transition: transform .5s;
	}
	#flag + label span svg path { fill: #FFF; }
	.flag {
		border-left: none;
		margin: 10px;
	}
	label svg.loading{ margin-top: 15px; }
	#change_lang input:checked + label + div { display: flex; }
	#change_lang input:checked + label span {
		transform: rotate(270deg);
	}
}