/* ///// МОБИЛЬНАЯ НАСТРОЙКА СТИЛЕЙ 320 ПИКСЕЛЕЙ ///// */
@media screen and (min-width: 320px)  {
	body {
	font-family: Cambria, Palatino;
    background: #E4F1FF;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}
  .center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.a_button{
    background: #003366; /* Цвет фона */ 
    color: #FFFFFF; /* Цвет буквы */ 
    font-size: 16px;
	border-radius: 6px; /* Скругление */
}
  nav {
    padding: 0px;
    position: sticky; /* Липкое позиционирование */
    top: 0; /* Положение сверху */
  }
.fm {
    font-family: Minecraft;
    background: #FFFFFF; /* Цвет фона */ 
	background: url(/img/font.png) 100% 100% no-repeat; /* Добавляем фон */
    background-size: cover; /* Масштабируем фон */
	text-align: center;
	padding-top: 3%;
	padding-bottom: 33%;
	color: #669966;
    text-shadow: #fff -2px -2px 0, 
                 #333 3px 3px 0;
   }
.topnav {
    background-color: #003366;
    overflow: hidden;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #5588BB;
    color: white;
}
}


/* /////ПЛАНШЕТНАЯ НАСТРОЙКА СТИЛЕЙ 600 ПИКСЕЛЕЙ///// */
@media screen and (min-width: 600px)  {
	body {
	font-family: Cambria, Palatino, "Palatino Linotype";
    background: #E4F1FF;
}
  .center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.a_button{
    background: #336633; /* Цвет фона */ 
    color: #F9E3C2; /* Цвет буквы */ 
    font-size: 16px;
	border-radius: 6px; /* Скругление */
}
  nav {
    padding: 0px;
    position: sticky; /* Липкое позиционирование */
    top: 0; /* Положение сверху */
  }
.fm {
    font-family: Minecraft;
    background: 
      url(/img/animate-bg3.png) 60% 60% no-repeat fixed, 
      url(/img/animate-bg2.png) 40% 40% no-repeat fixed, 
      url(/img/animate-bg1.jpg) no-repeat fixed;
    background-size: auto, auto, 100%;
    animation: ball 40s linear infinite;
	text-align: center;
	padding-top: 5%;
	padding-bottom: 30%;
	color: #669966;
    text-shadow: #fff -2px -2px 0, 
                 #333 3px 3px 0;
   }
@keyframes ball {
    from { background-position: 3000px 10%, 180% 40%, 0 0; }
    to { background-position: -2000px 50%, -200px 20%, 0 0; }
   }
.topnav {
    background-color: #003366;
    overflow: hidden;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #5588BB;
    color: white;
}
}


/* ///// КОМПЬЮТЕРНАЯ НАСТРОЙКА СТИЛЕЙ 1200 ПИКСЕЛЕЙ///// */
@media screen and (min-width: 1200px)  {
	body {
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    background:
  center / contain no-repeat
    url("/shared-assets/images/examples/firefox-logo.svg"),
  #eeeeee 35% url("/shared-assets/images/examples/lizard.png");
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
  .center {
    margin: auto;
    width: 50%;
    padding: 10px;
}

.a_button{
    background: #330000; /* Цвет фона */ 
    color: #F9E3C2; /* Цвет буквы */ 
    font-size: 16px;
	border-radius: 6px; /* Скругление */
}
  nav {
    position: sticky; /* Липкое позиционирование */
    top: 0; /* Положение сверху */
  }
.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 0px;  
}

.after-box {
    clear: left;
    border: 0px;      
}
@keyframes ball {
    from { background-position: 3000px 40%, 180% 40%, 0 0; }
    to { background-position: -2000px 60%, -200px 20%, 0 0; }
   }
.topnav {
    background-color: ##003366;
    overflow: hidden;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #5588BB;
    color: white;
}

}

/* /////ФУТЕР САЙТА///// */
.footer-bs {
  background-color: #336699;
	padding: 60px 40px;
	color: rgba(255,255,255,1.00);
	border-bottom-right-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-left-radius: 8px;
  width: 100%;
  max-width: 1200px;
  margin: auto;
}
.footer-bs .footer-brand, .footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { padding:10px 25px; }
.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { border-color: transparent; }
.footer-bs .footer-brand h2 { margin:0px 0px 10px; }
.footer-bs .footer-brand p { font-size:12px; color:rgba(255,255,255,0.70); }

.footer-bs .footer-nav ul.pages { list-style:none; padding:0px; }
.footer-bs .footer-nav ul.pages li { padding:5px 0px;}
.footer-bs .footer-nav ul.pages a { color:rgba(255,255,255,1.00); font-weight:bold; text-transform:uppercase; }
.footer-bs .footer-nav ul.pages a:hover { color:rgba(255,255,255,0.80); text-decoration:none; }
.footer-bs .footer-nav h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom:10px;
}

.footer-bs .footer-nav ul.list { list-style:none; padding:0px; }
.footer-bs .footer-nav ul.list li { padding:5px 0px;}
.footer-bs .footer-nav ul.list a { color:rgba(255,255,255,0.80); }
.footer-bs .footer-nav ul.list a:hover { color:rgba(255,255,255,0.60); text-decoration:none; }

.footer-bs .footer-social ul { list-style:none; padding:0px; }
.footer-bs .footer-social h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3px;
}
.footer-bs .footer-social li { padding:5px 4px;}
.footer-bs .footer-social a { color:rgba(255,255,255,1.00);}
.footer-bs .footer-social a:hover { color:rgba(255,255,255,0.80); text-decoration:none; }

.footer-bs .footer-ns h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom:10px;
}
.footer-bs .footer-ns p { font-size:12px; color:rgba(255,255,255,0.70); }

@media (min-width: 968px) {
	.footer-bs .footer-nav, .footer-bs .footer-social, .footer-bs .footer-ns { border-left:solid 1px rgba(255,255,255,0.10); }
}

.description {
    width:295px;	
}
.btext {
    margin-top:3px;
    font-size:12px;
    color:#E0E0D8;
	list-style-type: none;
    text-align:left;
}
/* /////ОБЩИЕ НАСТРОЙКИ СТИЛЕЙ///// */



/* Pagination links */
.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}
/* Style the active/current link */
.pagination a.active {
    background-color: dodgerblue;
    color: white;
}
/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {background-color: #ddd;}

/* Add a black background color to the top navigation */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
.active {
    background-color: #4CAF50;
    color: white;
}
.topnav .icon {
    display: none;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}
.dropdown:hover .dropdown-content {
    display: block;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


.tab input, .tab-content { display: none; }
   .tab {
    font: 0.8rem/1.2 Arial, sans-serif; /* Параметры шрифта */
    background-color: #F5F5F5; /* Цвет фона */
    border: 1px solid #D3D7D6; /* Параметры рамки */
    border-radius: 5px; /* Скругляем уголки */
    color: #666666; /* Цвет текста */
    margin-bottom: 10px; /* Расстояние между пунктами */
	width: 100%;
   }
   .tab-title {
    padding: 10px; /* Поля вокруг текста */
    display: block; /* Блочный элемент */
    text-transform: uppercase; /* Все буквы заглавные */
    font-weight: bold; /* Жирное начертание */
    cursor: pointer; /* Вид курсора */
   }
   .tab-title::after {
    content: '◄'; /* Выводим плюс */
    float: right; /* Размещаем по правому краю */
   }
   .tab-content {
    padding: 10px 20px; /* Поля вокруг текста */
   }
   .tab :checked + .tab-title {
    background-color: #50a2de; /* Цвет фона */
    border-radius: 3px 3px 0 0; /* Скругляем уголки */
    color: #fff; /* Цвет текста */
   }
   .tab :checked + .tab-title::after {
    content: '▼'; /* Выводим минус */
   }
   .tab :checked ~ .tab-content {
    display: block; /* Показываем содержимое */
   }
   
/*Стили счетчиков*/
.counts { display: inline; }
.counts ul {float: right;}
.counts ul li {
    float: right;
    width:88px;
    height: 31px;
    margin: 0 0 0 3px;
    opacity:0.4;
    -moz-opacity:0.4;
    filter:alpha(opacity=40);
}
.counts ul li:hover {
    opacity:1.0;
    -moz-opacity:1.0;
    filter:alpha(opacity=100);
}
.reset, .reset li {
    list-style: none;
    padding: 0;
    margin: 0;
}
/*Конец стили счетчиков*/

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}