@font-face {
    font-family: 'Roboto-Regular';
    src: local('Roboto-Regular'), local('Roboto-Regular'), url('Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: local('Roboto-Bold'), local('Roboto-Bold'), url('Roboto-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

html, body {
	margin:0;
	padding:0;
}

body {
	display:flex;
	flex-direction:column;
	background:#fafafa;
	font-family:Roboto-Regular, Verdana, Arial;

	justify-content: flex-start;
	align-items:center;
	color:#333;
}

a {
	color:#5097ed;
	text-decoration:none;
	
	transition:color 0.25s,text-shadow 0.25s;
}

a:hover {
	color:#1a6acc;
	text-shadow: 0px 0px 2px rgba(0, 85, 193, 0.5);
}

p {
	margin:0;
	text-indent:24px;
}

input, select, textarea {
	padding:7px;
	font-family:Roboto-Regular, Verdana, Arial;
	margin-top:5px;
	margin-bottom:5px;
	border:1px solid #ccc;
	width:175px;
	
	transition: border 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s, -moz-box-shadow 0.3s;
}

textarea {
	width:500px;
	height:180px;
}

input[type="submit"] {
	width:177px;
	background: #3a62a3;
	border:none;
	cursor:pointer;
	color:#fff;
	transition: background 0.3s, border 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s, -moz-box-shadow 0.3s;
	
	-webkit-appearance: none;  /* mobiles fix */
	border-radius:0px;  /* mobiles fix */
}

input[type="submit"]:hover {
	background: #54b2ff;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
	box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
}

input:focus, select:focus, textarea:focus {
	outline: none;
	
	border:1px solid #54b2ff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
	box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
}

h2 {
	margin-top:2px;
	margin-bottom:4px;
	
	padding:0;
	
	font-size:14pt;
}

img
{
	max-width:768px;
	max-height:768px;
}

.header {
	display:flex;
	
	width:95%;
	max-width:1280px;
	
	height:150px;

	margin-bottom:30px;
	margin-top:30px;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;

	
}

.header_logo {
	display:flex;
	background:url('../media/otzi_logo_full.png') 100% 100% no-repeat;
	background-size:contain;
	height:128px;
	width:384px;

}

.header_login_form {
	padding:15px;
	background-color:#fff;
	margin-top:12px;
	width:175px;
	height:115px;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	border-radius:2px;
}


.login_input {
	display:flex;
	flex-direction:row;
	
}

.login_input_field {
	width:144px;
	margin-top:0px;
	margin-bottom:10px;
	padding:7px 7px 7px 7px;
	
	
	-webkit-appearance: none; /* mobiles fix */
	border-radius:0px;  /* mobiles fix */
}

/* firefox */
_:-moz-any-link, :root .login_input_field  {
	padding:7px 7px 6px 7px;
}

.login_input_icon {
	padding:7px 10px;
	min-width:12px;
	width:14px;

	color:#aaa;
	border:1px solid #ccc;
	border-right:none;
	max-height:16px;
	text-align:center;
}


.button_submit, .button_cancel, .button_disabled {
	background: #3a62a3;
	width:177px;
	color:#fff;
	cursor:pointer;
	padding:7px;
	text-align:center;
	border:none;
	
	transition: background 0.3s, border 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s, -moz-box-shadow 0.3s;
	
	-webkit-appearance: none;  /* mobiles fix */
	border-radius:0px;  /* mobiles fix */
}

.button_cancel  {
	background: #aa1717 !important;
}

.button_disabled {
	background: #ccc !important;
}

.button_submit:hover {
	background: #54b2ff;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
	-moz-box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
	box-shadow: 0px 0px 5px 0px rgba(43,170,255,1);
}

.button_cancel:hover {
	background: #ce1c1c !important;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(255,64,64,1) !important;
	-moz-box-shadow: 0px 0px 5px 0px rgba(255,64,64,1) !important;
	box-shadow: 0px 0px 5px 0px rgba(255,64,64,1) !important;
}

.button_disabled:hover {
	background: #ccc !important;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(255,64,64,0) !important;
	-moz-box-shadow: 0px 0px 5px 0px rgba(255,64,64,0) !important;
	box-shadow: 0px 0px 5px 0px rgba(255,64,64,0) !important;
}

.button_submit:focus, .button_cancel:focus, .button_disabled:focus {
	border:none;
}

.kunteynir {
	display:flex;
	
	width:95%;
	max-width:1280px;
	
	min-height:100px;
	flex: 1 0 auto;  /*magic*/
	
	justify-content: space-between;
	flex-direction: row;
}

.kunteynir_block {
	display:flex;
	flex-direction: column;

}

.kb_subblock_small {
	
	margin-bottom:20px;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	border-radius:2px;
}

.kbss_header {
	padding:10px;
	color:#fff;
	background-color:#3a62a3;

	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.kbss_inner {
	padding:10px;
	background-color:#fff;
}


.kb_subblock_big {
	background-color:#fff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	border-radius:2px;
	margin-bottom:20px;
}

.kbsb_header {
	display:flex;
	padding:10px 20px 5px 20px;

	flex-direction:row;
	justify-content:space-between;
	align-items:flex-start;
}

.kbsbh_title {
	display:flex;
	font-size:15pt;
	color:#777;
	
}

.kbsbh_date {
	display:flex;
	
	color:#999;
	padding-top:2px;
	
	flex-shrink:0;
}

.kbsb_inner {
	padding:20px;
	padding-top:10px;
}


.kb_main {

	width:970px;
	flex-shrink: 2; 
}


.kb_menus {

	width:280px;
	flex-shrink: 0; 
	margin-right:10px;
}


.news_image {
	display:block;
	margin:0 auto 10 auto;
	
	max-width:276px;
	min-width:140px;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	
	border-radius:2px;
}

.news_nonews_text {
	margin-top:35px;
	margin-bottom:30px;
	text-align:center;
	color:#bbb;
	font-size:14pt;
}

.news_loading_indicator {
	color:#777;
	margin:0 auto;
	text-align:center;
}
/* —остав кафедры дл¤ маленького блока */
.cathedra {
	overflow-y:scroll;
	overflow-x:hidden;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	max-height:440px;
}

.cathedra_item {
	display:flex;
	flex-direction:row;
	flex-shrink:0;
	height:75px;
}

.cathedra_image {
	background:url('/media/teachers/small_nophoto.png') 100% 100% no-repeat;
	background-size:cover;
	width:64px;
	height:64px;
	margin-right:10px;
	
	border-radius:999px;
}

.cathedra_text {
	font-size:10pt;
}



/* Меню сайта */
.vertical_menu {
	
}

.vertical_menu a {
	color:#333;
}


.vertical_menu_button {
	background-color:#fff;
	padding:10px;
	cursor:pointer;
}

.vertical_menu_button:hover {
	background-color:#def;
}

.vertical_menu_button:hover .vertical_menu_icon {
	color:#5af;
}

.vertical_submenu {
	max-height:0;
	overflow:hidden;
	transition:height 0.3s, max-height 0.3s;
}

.vertical_rightmenu {
	display:none;
	
	position:absolute;
	width:280px;
	margin-left:280px;
	margin-top:-39px;
	
	-webkit-box-shadow: 3px 0px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 3px 0px 4px 0px rgba(0,0,0,0.2);
	box-shadow: 3px 0px 3px 0px rgba(0,0,0,0.2);
}

.vmb_submenu {
	background-color:#f4f4f4;
	padding-left:30px;
}

.vmb_submenu:hover {
	background-color:#bdf;
}

.vmb_rightmenu {
	background-color:#bdf;
	padding-left:30px;
}


.vertical_menu_icon {
	float:right;
	margin-right:10px;
	color:#aaa;
}

.window_classic {
	display:none;

	flex-direction:column;
	position:fixed;
	left:0;right:0;top:0;bottom:0;
	margin:auto auto;
	background-color:#fff;
	width:600px;
	height:600px;
	opacity:0;
	
	z-index:15;
	
	border-radius:10px;
	
	transition:opacity 1s;
	
}

.window_classic_icon {
	text-align:center;
	font-size:32pt;
	padding:50px;
	padding-bottom:10px;
}

.window_classic_inner {
	font-size:13pt;
	padding:0px 40px;
}

.background-fade {
	display:none;
	position:fixed;
	left:0;right:0;top:0;bottom:0;
	margin:auto auto;
	background-color:#000;
	z-index:10;
	
	opacity:0;
	
	transition:opacity 1s;
}

/* spoiler */

.spoiler {
	width:100%;
		
	margin-top:10px;
	margin-bottom:10px;
}

.spoiler_header {
	padding:10px;
	cursor:pointer;
	background-color:#5275ad;
	color:#fff;
	
	border-radius: 2px 2px 2px 2px;
	
	transition:background-color 0.5s, border-radius 0.5s;
}

.spoiler_header:hover {
	background-color:#5080ce;
}

.spoiler_content {
	height:0px;
	overflow:hidden;
	transition: height 0.5s;
	background-color:#fff;
	border-radius: 0px 0px 2px 2px;
	-moz-border-radius: 0px 0px 2px 2px;
	-webkit-border-radius: 0px 0px 2px 2px;
	border: 1px solid #e6e6e6;
	border-top:none;

}

.spoiler_subContent {
	padding:10px;
	

}

/* photogallery */
.photoalbum_news_block {
	display:flex;
	flex-direction: row;
	justify-content:space-between;
	flex-wrap:wrap;
}

.photoalbum_photo_preview, .ppp_selected {
	margin: 10;
	width: 200px;
	height: 160px;
	background-repeat: no-repeat;
	background-color: #fffff;
	background-size: cover;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
	
	border-radius:2px;
	
	transition: box-shadow 0.3s;
}

.ppp_selected {
	-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
	box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
}





/* footer */
.footer {
	display:flex;
	padding:20px;
	color:#ccc;
	width:1240px;

	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height:50px;
	margin:auto;
	flex: 0 0 auto; /*magic*/
	
}

.footer_text {
	margin:0 auto;
	display:flex;
	text-align:center;
	font-size:10pt;
}

/* Адаптивность */
@media (max-width: 500px) { 
	.kunteynir, .header {
		flex-direction:column;
	}
	
	.header {
		height:300px;
	}
	
	.header_logo {
		width:300px;
	}
	
	.kb_main, .kb_menus {
		width:95%;
		margin:0 auto;
	}
	
	.footer {
		width:80%;
	}
	
	.message {
		width:80%;
	}
	
	.login_input_field {
		padding:8px 8px;
	}
	
	.news_image {
		max-width:236px;
	}
	
	.kbsb_header {
		flex-direction:column;
	}
	
}

.admin_block_floating
{
	position:fixed;
	width:180px;
	right:50;
	top:0;
	background: #fff;
	padding:10px;
	height:20px;
	border-radius:0px 0px 5px 5px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
	transition:height 0.3s, opacity 0.3s;
	overflow:hidden;
	opacity:0.75;
}

.admin_block_header
{
	color:#c55;
	text-align:center;
	padding-bottom:10px;
}

.admin_block_floating:hover
{
	height:142px;
	opacity:1;
}

.admin_block_floating a
{
	color: #f55;
	display:block;
	padding: 5 5;
}

.admin_block_floating a:hover 
{
	color:#dd2222;
	text-shadow: 0px 0px 2px rgba(193, 15, 0, 0.5);
}

/* Анонсы */

.announce
{
	background-color: #fff;
	display:flex;
	flex-direction: row;
	font-size: 10pt;
	padding: 5px;
	border: 1px solid #eee;
	cursor: pointer;
	
	border-radius: 3px;
	
	transition: box-shadow 0.3s;
	margin-bottom: 5px;
	
	color: #333;
}

.announce:hover
{
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.25);
}

.announceDate
{
	display: flex;
	flex-direction: column;
	
	flex-basis: 60px;
	max-width: 60px;
	flex-shrink: 0;
	margin-right: 10px;
}

.announceDateMonth
{
	background-color: #3a62a3;
	padding: 3 10;
	
	color: #fff;
	
	font-size:12pt;
	
	border-radius: 5px 5px 0px 0px;
	text-align:center;
}

.announceDateDay
{
	background-color: #e0ecfd;
	font-size: 16pt;
	text-align:center;
	padding: 5px;
	border-radius: 0px 0px 5px 5px;
}

.announceText
{
	
}

.materialAdminAllButtons
{
	display:flex;
	flex-direction: column;
	position: absolute;
	margin-left: 980px;
}

.materialAdminButton
{
	background-color:#fff;
	display:flex;
	flex-direction: column;
	justify-content:center;
	
	border-radius:4px;
	text-align:center;
	width:32px;
	height:32px;
	cursor:pointer;
	
	margin-bottom: 5px;
	
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	
	
	transition: box-shadow 0.3s, transform 0.3s;
}

.materialAdminButton:hover
{
	color: #fff;
	background-color: #1a6acc;
}

.grecaptcha-badge
{
	opacity: 0.5;
	
	transition: opacity 0.3s;
}

.grecaptcha-badge:hover
{
	opacity: 1;
}