﻿



   /* адаптация к мобильным */
@media screen and (max-width: 600px) /* адаптация страницы */
{
.three {
       column-count: 1;
       -moz-column-count: 1;
       -webkit-column-count: 1;
	   min-width: 100%;
	   position: absolute; 
       width: 1200px;
   }
}
.three /* адаптация + текстовая форма в две колонки  */
{
       column-count: 2;
       column-gap: 20px;
       column-rule: 1px dotted #ccc;
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -moz-column-rule: 1px dotted #ccc;  
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
       -webkit-column-rule: 1px dotted #ccc;
       text-align:left; 
}










 body { /* тело сайта */
    margin: 0; /* отступы */
	background-image: url(/img/fon.gif); /*картинка фона */	
	background-color:#5F9EA0; /* цвет фона */
	-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -webkit-text-size-adjust: 120%;	/* позиционирование в смартфоне */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
	background-attachment: fixed; /* Фиксируем фон веб-страницы */
	background-repeat: repeat; /* Повторяем фон по горизонтали и вертикали */
}
   
 body.fre{ /* тело сайта */
    margin: 0; /* отступы */ 	
	background-color: white; /* цвет фона */
	-moz-background-size: 35%; /* Firefox 3.6+ */
    -webkit-background-size: 35%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 35%; /* Opera 9.6+ */
    background-size: 35%; /* Современные браузеры */
	background-attachment: fixed; /* Фиксируем фон веб-страницы */
	background-repeat: no-repeat no-repeat; /* Повторяем фон по горизонтали и вертикали */
   }  
   
   
   


   /* контейнер */   
div /* адаптивный контейнер */
     {
	   background:BurlyWood;
	   background: rgba(95, 158, 160, 0.95); /* полупрозрачный фон сайта  */
	   vertical-align:top;
	   padding: 0px; 
       width: 100%;
       max-width: 960px;
       margin: 0 auto; /* центрируем основной контейнер */
	   -moz-background-size: 100%; /* Firefox 3.6+ */
       -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
       -o-background-size: 100%; /* Opera 9.6+ */
       background-size: 100%; /* Современные браузеры */
	   background-attachment: fixed; /* Фиксируем фон веб-страницы */	
      } 
 .arrow {	 /* стрелка наверх  */ 
      width: 60px;
      height: 60px;
      border-top: 10px solid #FF4500; /* цвет левой стороны стрелки  */
      border-right: 10px solid #FF4500; /* цвет правой стороны стрелки  */
      margin-right: 60px;
	  position:fixed;
      bottom:5px;
      right:5px;
      opacity: 0.6;	  
} 
 .arrow-top {
      background:none;	
	  transform: rotate(-45deg);
}
    div.con
     {
	   background:#DEB887; 
	   vertical-align:top;
	   padding: 0px; 
       width: 100%;
       max-width: 960px;
       margin: 0 auto; /* центрируем основной контейнер */
	   -moz-background-size: 100%; /* Firefox 3.6+ */
       -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
       -o-background-size: 100%; /* Opera 9.6+ */
       background-size: 100%; /* Современные браузеры */
	   background-attachment: fixed; /* Фиксируем фон веб-страницы */	
	   background: rgba(95, 158, 160, 0.85); /* полупрозрачный фон сайта  */	   
      }	  

    div.container /* адаптивный контейнер с прозрачным фоном */
     {
	   vertical-align:top; 
	   padding: 0px; 
	   margin: 0 auto;
       width: 100%; /* ширина картинки */
       max-width: 960px; /* максимальна ширина картинки */
       margin: center; /* центрируем основной контейнер */
	   border: 1px solid #FF4500; /* рамка */
	   background: rgba(95, 158, 160, 0.35); /* полупрозрачный фон сайта  */
       border-radius: 0px; /* радиус */	   
      }
	  
	  
    div.nav /* адаптивный контейнер с прозрачным фоном */
     {
	   vertical-align:top; 
	   padding: 0px; 
	   margin: 0 auto;
       width: 100%; /* ширина картинки */
       max-width: 960px; /* максимальна ширина картинки */
       margin: center; /* центрируем основной контейнер */
	   border: 1px solid #FF4500; /* рамка */
	   background: rgba(47, 79, 79, 0.0); /* полупрозрачный фон сайта  */
       border-radius: 0px; /* радиус */	   
      }	  
	  


   
   
   
   
   
 header /* шапка сайта */
   {
   vertical-align:top;  
   padding: 0px;
   margin: 0 auto; /* отступы */
   background: #8B4513; /* цвет фона */
   background: rgba(65, 105, 225, 1.0); /* полупрозрачный фон сайта  */
   background-image: url(); /*картинка фона */
   -moz-background-size: 100%;
   -webkit-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
   background-repeat: no-repeat no-repeat; /* Повторяем фон по горизонтали и вертикали */
   }
    
  header.s /* шапка сайта */
   {
   vertical-align:top;    
   padding: 0px;   
   margin: 0 auto; /* отступы */
   background: #696969; /* цвет фона */
   background-image: url(/img/imagecompressor.gif); /*картинка фона */
   -moz-background-size: 100%;
   -webkit-background-size: 100%;
   -o-background-size: 100%;
   background-size: 100%;
   } 
   
   
   
 


 
   
  /* подвал */ 
 footer
  {
	 	font-size: 130%;/* размер текста */ 
	   color: #FFD700; /* цвет шрифта */
	   background: #8B0000; /* цвет фона  */
	   font-weight: 0; /* Жирное начертание */	  
	   font-family: ; /* шрифт  */	  
	   vertical-align:top;
	   padding: 0px; 
       width: 100%;
       max-width: 960px;
       margin: 0 auto; /* центрируем основной контейнер */
	   -moz-background-size: 100%; /* Firefox 3.6+ */
       -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
       -o-background-size: 100%; /* Opera 9.6+ */
       background-size: 100%; /* Современные браузеры */
	   background-attachment: fixed; /* Фиксируем фон веб-страницы */	
      } 
   
   
   






/* навигация */
nav { /* адаптивная навигации */
	   vertical-align:top;
	   padding: 0px; 
       width: 100%;
       max-width: 960px;
       margin: 0 auto; /* центрируем основной контейнер */
	   -moz-background-size: 100%; /* Firefox 3.6+ */
       -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
       -o-background-size: 100%; /* Opera 9.6+ */
       background-size: 100%; /* Современные браузеры */
	   background-attachment: fixed; /* Фиксируем фон веб-страницы */	   
      }
 nav.text { /* обрамление навигации */
             color: #8B0000; /* цвет выделения */
			 /*border: 1px solid #808080; /* рамка */
	         border-radius: 0px; /* радиус */	
	         background: rgba(95, 158, 160,  0.90); /* полупрозрачный фон  */			 
}

li {
	   padding: 0px; 
       width: 100%;
       max-width: 960px;
       text-indent: 20px; /* Отступ первой строки в пикселах */	   
       margin: 0 auto; /* центрируем основной контейнер */
	   -moz-background-size: 100%; /* Firefox 3.6+ */
       -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
       -o-background-size: 100%; /* Opera 9.6+ */
       background-size: 100%; /* Современные браузеры */
	   background-attachment: fixed; /* Фиксируем фон веб-страницы */	
	   color: #FF4500;
}	  
 li.left { /* class */
    text-align:left; /* Выравнивание по левому краю */
}   
 li.right {  /* class */
    text-align: right; /* Выравнивание по правому краю  */ 
}	
 








   
 /* кнопки  */    
button  /*форма*/
   {
    width: auto; /* Ширина кнопки */
    height: auto; /* Высота */
	margin: 3px 20px 3px 20px; /* отступы */
	padding: auto; /* отступы формы */
    box-shadow: 7px 7px 5px rgba(0,0,0, 0.6); /* Тень */	
	font-weight: 600; /* Жирное начертание */	
    background: rgba(152, 251, 152,  0.10); /* полупрозрачный фон  */	
    color: #01281a; /* цвет буквы */ 
    -webkit-appearance: none; /* для айфонов */	
   }   
 
 .b1 {
    background: rgba(152, 251, 152,  0.10); /* полупрозрачный фон  */
    color: Gold; /* цвет буквы */ 
    font-size: 150%; /* Размер шрифта в пунктах */
	border: 0px solid #FFD700; /* рамка */
	border-radius: 3px; /* скругление формы */
	padding: auto; /* отступы формы */
    box-shadow: 7px 7px 5px rgba(0,0,0, 0.6); /* Тень */	
	font-weight: 600; /* Жирное начертание */
	-webkit-appearance: none; /* для айфонов */
    text-shadow: #000000 1px 1px 0, #000000 1px 1px 0, 
                                   #000000 2px 2px 0, #000000 2px 2px 0, 
                                   #000000 2px 2px 0;	/* Тень текста */	
   } 

 .b2 {
	background: rgba(205, 133, 63,  0.00); /* полупрозрачный фон  */ 		
    color: Gold; /* цвет буквы */ 
    font-size: 160%; /* Размер шрифта в пунктах */
    border: 0px solid #fff; /* рамка */
	border-radius: 3px; /* скругление формы */
	padding: auto; /* отступы формы */
    box-shadow: 7px 7px 5px rgba(255, 69, 0, 0.6); /* Тень */	
	font-weight: 600; /* Жирное начертание */
    -webkit-appearance: none; /* для айфонов */	
    text-shadow: #000000 1px 1px 0, #000000 1px 1px 0, 
                                   #000000 2px 2px 0, #000000 2px 2px 0, 
                                   #000000 2px 2px 0;	/* Тень текста */
   }

 .b3 {
	background: rgba(205, 133, 63,  0.00); /* полупрозрачный фон  */ 		
    color: SaddleBrown; /* цвет буквы */ 
    font-size: 200%; /* Размер шрифта в пунктах */
    border: 0px solid #fff; /* рамка */
	border-radius: 3px; /* скругление формы */
	padding: auto; /* отступы формы */
    box-shadow: 7px 7px 5px rgba(255, 69, 0, 0.6); /* Тень */		
	font-weight: 600; /* Жирное начертание */
	-webkit-appearance: none; /* для айфонов */	
	font-style: oblique;  /* шрифт  */
    text-shadow: #000000 1px 1px 0, #000000 1px 1px 0, 
                                   #000000 1px 1px 0, #000000 1px 1px 0, 
                                   #000000 1px 1px 0;	/* Тень текста */	
   } 


 .b4 {
	background: rgba(255, 255, 255,  0.30); /* полупрозрачный фон  */ 		
    color: OrangeRed; /* цвет буквы */ 
    font-size: 200%; /* Размер шрифта в пунктах */
    border: 0px solid #fff; /* рамка */
	border-radius: 3px; /* скругление формы */
	padding: auto; /* отступы формы */	
	font-weight: 600; /* Жирное начертание */
	-webkit-appearance: none; /* для айфонов */	
	font-style: oblique;  /* шрифт  */
   }







   

  

  /* текст */ 
text{
}
text.text {
	   background:white; 
	   vertical-align:top;
	   padding: 0px; 
       width: 100%;
       max-width: 960px;
       margin: 0 auto; /* центрируем основной контейнер */
	   -moz-background-size: 100%; /* Firefox 3.6+ */
       -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
       -o-background-size: 100%; /* Opera 9.6+ */
       background-size: 100%; /* Современные браузеры */
	   background-attachment: fixed; /* Фиксируем фон веб-страницы */ 	   
}  
  
h1 { /* стиль главных букв */
  	 font-size: 350%;/* размер текста */
	font-style: oblique;  /* шрифт  */
    text-indent: 20px; /* Отступ первой строки в пикселах */
	margin: 10px; /* отступы вокруг текста */
	border-radius: 0px; /* радиус */
	color: #FF4500; /* цвет */	
	font-weight: 600; /* Жирное начертание */
}

 h1.stroke { /* 3d эфект текста-class */
           font-weight: 600; /* Жирное начертание */
           color: #FF4500; /* цвет */
           text-shadow: #01281a 2px 2px 0, #01281a 2px 2px 0, 
                                   #01281a 2px 2px 0, #01281a 2px 2px 0, 
                                   #01281a 2px 2px 0; /* Тень */
} 
   
h2 { /* стиль заглавных букв */   
    text-indent: 20px; /* Отступ первой строки в пикселах */
	padding: 15px; /* Поля вокруг текста */ 
	border-radius: 0px; /* радиус */
	color: #007d77; /* цвет */
}
   
h3 { /* стиль заглавных букв */
	font-style: oblique;  /* шрифт  */ 
     text-indent: 50px; /* Отступ первой строки в пикселах */
	 padding: 0px 20px 0px 20px; /* Поля вокруг текста */
	 font-weight: 600; /* Жирное начертание */
	 color: #FF4500; /* цвет */
	font-size: 150%;/* размер текста */	
}
 h3.stroke { /* 3d эфект текста-class */
   	      font-size: 220%;/* размер текста */
           font-weight: 600; /* Жирное начертание */
           color: #FF4500;
           text-shadow: #008000 1px 1px 0, #008000 1px 1px 0, 
                                   #228B22 1px 1px 0, #228B22 1px 1px 0, 
                                   #228B22 1px 1px 0;
} 
 h3.center { /* class */
 	font-size: 200%;/* размер текста */
    text-align: center; /* Выравнивание по центру */
     text-indent: 0px; /* Отступ первой строки в пикселах */
	 font-weight: 800; /* Жирное начертание */
} 



p { /* стиль строчных букв */
	font-family: "Times New Roman", Georgia, Serif; /* шрифт  */
	text-align: justify;  /* ростягиватия по центру  */
	background: white; /* цвет фона  */
	background: rgba(255, 285, 115, 0.0); /* полупрозрачный фон сайта  */
    text-indent: 20px; /* Отступ первой строки в пикселах */
	padding: 3px 20px 3px 20px; /* Поля вокруг текста */ 
	border-radius: 0px; /* радиус */
	font-size: 150%;/* размер текста */
	color: #000000; /* цвет шрифта */	
}
p.p{
	font-family: "Times New Roman", Georgia, Serif; /* шрифт  */
	text-align: justify;  /* ростягиватия по центру  */
	background: #9eaab6; /* цвет фона  */
	background: rgba(255, 285, 115, 0.0); /* полупрозрачный фон сайта  */
    text-indent: 20px; /* Отступ первой строки в пикселах */
	padding: 3px 20px 3px 20px; /* Поля вокруг текста */ 
	border-radius: 0px; /* радиус */
	font-size: 150%;/* размер текста */
	color: #2F4F4F; /* цвет шрифта */	
}
  

   
/* адаптация ифрейм  */  
iframe {  /* вставка плеир youtube  */  
    background-color: transparent; 
    border-radius: 3px;	
    box-shadow: 7px 7px 5px rgba(0,0,0,0.0); /* Тень */ 
	width: 96%; 
	height: 355px;
	border: 1px solid #808080; /* рамка */
	padding: none; /* отступы формы */
}
 iframe.frc {       /* вставка ресурса  */  
    background-color: transparent; 
    border-radius: 0px;
    box-shadow: none; /* Тень */
	border: none; /* рамка */	
    width: 100%; 
	height: 1550px;	
	padding: 0px; /* отступы формы */
}
 iframe.frb {       /* резерв шапка  */  
    background-color: transparent; /* цвет фона */
    border-radius: 0px; /* скруглённость углов */
    box-shadow: none; /* Тень */
	border: none; /* рамка */
	width: 0; /* ширина 100% */
	height: 0; /* высота 100% */
	position:relative;
	padding: 0px; /* отступы формы */
}
 iframe.frk {       /* резерв тело  */  
    background-color: transparent; /* цвет фона */
    border-radius: 0px; /* скруглённость углов */
    box-shadow: none; /* Тень */
	border: none; /* рамка */
	width: 0; /* ширина 100% */
	height: 0; /* высота 100% */
	position:relative;
	padding: 0px; /* отступы формы */
}
 iframe.frs {      /* резерв подвал  */  
    background-color: transparent; /* цвет фона */
    border-radius: none; /* скруглённость углов */
    box-shadow: none; /* Тень */
	border: none; /* рамка */	
    width: 0; /* ширина 100% */
	height: 0; /* высота 100% */
	padding: none; /* отступы формы */	
}		
		
      
 				




	 
	 
  /* фото */
img { /* адаптивное фото */
  width: 96%; /* ширина картинки */
  height: auto; /* высота картинки */
  border: 0px solid #808080;  /* рамка */
  box-shadow: 7px 7px 5px rgba(0,0,0,0.0); /* Тень */ 
  border-radius: 0px; /* скругление формы */
}
img.imge {
  width: 96%; /* ширина картинки */
  height: auto; /* высота картинки */
  border: 0px solid #808080; /* рамка */ 
  box-shadow: 7px 7px 5px rgba(0,0,0,0.0); /* Тень */ 
  border-radius: 0px; /* скругление формы */	
}
.leftimg { /* class */
    float:left; /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0;  /* Отступы вокруг картинки */
}
   
.rightimg { /* class */
    float: right; /* Выравнивание по правому краю  */ 
    margin: 7px 0 7px 7px;  /* Отступы вокруг картинки */
}
.centr {
  width: 96%; /* ширина картинки */
  height: auto; /* высота картинки */
  border: 1px solid #808080; /* рамка */ 
  box-shadow: 0px 0px 0px rgba(0,0,0,0.6); /* Тень */ 
  border-radius: 0px; /* скругление формы */	
}	
	









   /* ссылки */
a { /* с подчерквыванием */
    color: #00FF00; /* Цвет обычной ссылки */ 
    text-decoration:  ;  /* Убираем подчеркивание у ссылок none; */
}
   
a:visited {
    color: #00FF00;  /* Цвет посещённой ссылки */
}
   
a:hover {
    color: #00BFFF; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline; /* Добавляем подчеркивание */
}
	
a.a { /* без подчёрквывания */
    color: #00FF00; /* Цвет обычной ссылки */ 
    text-decoration: none;  /* Убираем подчеркивание у ссылок "none" */
}
   
a:visited {
    color: #00FF00;  /* Цвет посещённой ссылки */
}
   
a:hover {
    color: #00BFFF; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline;  /* Добавляем подчеркивание */	
}
	
	   










