/*
#4D85BD небо
#CB6318 земля
#F5E356 солнце
#7CAA2D трава
*/

body{
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
}

img{
      max-width: 100%;
    } 
.center{
    text-align: center;
}

.vertical {
  writing-mode: vertical-rl;
}

.dropzone{
	flex-basis: 100%;
	flex-grow: 1;
	padding: 10px;
	text-align: left;
	min-height: 50px;
}

header {
	text-transform: uppercase;
	padding: 10px;
	color: #fff;
    background-color: #4D85BD;
	font: 14px 'Arial' sans-serif;
	-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
	-ms-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
	box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
	-webkit-animation: fade .6s;
	-moz-animation: fade .6s;
	animation: fade .6s;
    z-index: 100;
    position: fixed;
    top: 0px;
    width: 100%;
}

article{
    padding-bottom: 4em;
    padding-top: 46px;
}

.footer{
    background-color: #F97300;
    color: #fff;
    padding-top: 8px;
}

.paddingTop20{
    padding-top: 20px;
}

.width100{
    width: 100%;
}

.mebuBtn{
    margin-top: 6px; 
    width: 120px;
    margin-right: 4px;
}


.figures {
    font-size: 48px;
    color: #4D85BD
}
.silver{
    font-size: 18px;
    color: #777;
}
.whiteBoxBlueBorder{
    background-color: #fff;
    border: 1px solid #4D85BD;
    color: #4D85BD;
    padding-top: 15px;
    padding-bottom: 15px;
}

.whiteBoxBlueBorder:hover{
    background-color: #4D85BD;
    color: #fff;
}
.silverBorderFrame{
    border: 1px solid #ccc;
    padding: 6px;
}

input{
    padding: 6px;
}

.bigText{
    margin: 10px;
}

.silverBorderFrame:hover{
    border: 1px solid #4D85BD;
    padding: 6px;
}

.dashBox{
    display: inline-table;
    width: 225px;
    height: 250px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: 0 0 20px #ccc;
}
.dashBox:hover{
    box-shadow: 0 0 0 #ccc;
}

.dashHeader{
    font-size: 18px;
    color: #777;
    text-transform: uppercase;
    font-family: monospace;
    letter-spacing: 5px;
}

.centerDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}


.gosuslugiBtn{
    background-color: #fff;
    border: 1px solid #4D85BD;
    color: #4D85BD;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 300px;
    font-size: 16px;
}

.gosuslugiBtn:hover{
    border: 1px solid #ccc;
    cursor: pointer;
    box-shadow:  4px 4px 4px rgba(0,0,0,0.5);
}

.gosuslugiBtn:active{
    border: 1px solid #4D85BD;
    cursor: pointer;
    box-shadow:  0 0 0 rgba(0,0,0,0.5);
}


.navbar{
 background:#4D85BD;
}
.nav-link , .navbar-brand{
 cursor: pointer;
}
.nav-link{
 margin-right: 1em !important;
}
.nav-link:hover{
 background: #fff;
 color: #4D85BD !important;
}
.navbar-collapse{
 justify-content: flex-end;
}

.blog{
 position: relative; 
}
.blog h1{
 color:#F97300;
 margin: 1em; 
}
.blog h2{
 color:#F97300;
 margin: 1em; 
}
.blog h3{
 color:#F97300;
 margin: 1em; 
 font-size: 18px;
}
.blog .card{
    box-shadow: 0 0 20px #ccc;
    margin-bottom: 1em;
    cursor: pointer;
}
.blog .card:hover{
    box-shadow: 0 0 20px #777;
    border: 1px solid #ccc;
}
.blog .card img{
 width: 100%;
}
.blog .card-text{
 color:#4D85BD;
  
}
.blog .card-body{
 padding: 1em;
}

.blog .btn{
 width: 130px;
    margin-bottom: 1em;
}

.blog .screen{
    display: none;
}

.about{
 position: relative;
}
.about h1{
 color:#F97300;
 margin: 2em;
}
.about img{
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
    padding-left: 1em;
}
.about .desc{
 padding: 1em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:#888;
}

.zebra {
	color: black;
}

.zebra tbody td:nth-child(odd) {
	background-color: #dddddd;
	/* фон нечетных столбцов */
}

.zebra tbody td:nth-child(even) {
	background-color: #eeeeee;
	/* фон четных столбцов */
}

.zebra tbody th:nth-child(odd) {
	background-color: #dddddd;
	/* фон нечетных столбцов */
}

.zebra tbody th:nth-child(even) {
	background-color: #eeeeee;
	/* фон четных столбцов */
}

.zebra tr:hover td {
	background: #bbbbbb;
	/* фон строки при наведении */
}

.zebra tr:hover th {
	background: #bbbbbb;
	/* фон строки при наведении */
}