body {
	font-family: Arial, Verdana, sans-serif;
	margin: auto;
  max-width:960px;
  padding-bottom:50px;
  background:#FFF;
}
html{
	background:#FFF;
}
.biography, .contacts, .header{
	margin:50px auto;
}
div.container {
	width: 96%;
	max-width: 450px;
	margin: 0 auto;
	text-align: center;
	float: left;
}

.header li a{
	color:#000;
	text-decoration:none;
	font-size: 1.3em;
	color:#B7B7B7;
}

.name{
	height:70px;
}

img {
  width: 100%; 
  height: auto; 
}
/*.container img{
		float:left;
}*/
.charity, iframe{
	height: 198px;
	max-width: 450px;
	margin: 20px auto;
	overflow: visible;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	display: block;
}
.footer{
	text-align: center;
	margin-top:15px;	
}
.height{
	margin-top:60px;
}
.clearfix1{
	clear: both;
	display: inline-block;
}
.cont{
	height: auto;
	display: block;
	overflow:visible;
	-moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

.poe_cnt_d{
	text-align: left;
	width: 350px;
	margin:100px auto;
}
.poe_cnt_y{
	text-align: left;
	width: 500px;
	margin: 100px auto;
	clear: both;
	display: block;
}
.poe_cnt_b{
	text-align: left;
	width: 650px;
	margin:100px auto;
	clear:both;
}
.poe_cnt_g{
	text-align: left;
	width: 370px;
	margin:100px auto;
	clear:both;
}
.poe_cnt_l{
	text-align: left;
	width: 450px;
	margin:100px auto;
	clear:both;	
}
.poe_cnt_v{
	text-align: left;
	width: 380px;
	margin:100px auto;
	clear:both;	
}
.poe_cnt_n{
	text-align: left;
	width: 420px;
	margin:100px auto;
	clear:both;	
}

.p_center{
	text-align: center;
	margin:50px auto;
}
.f_center{
	margin:50px 0;
}
h1 { 		
	font-size: 1em; 
	text-align:center;
}
h2 { 
	font-size: 1em;  
	margin: 0 0 7px 10px;
}
h3 {
	font-size: 1em;
}
h4 { 	
	font-weight: bold; 
	font-size: 1.1em; 
	text-align:center;
}

p { 	
	font-size: 1.1em; 
	line-height: 1.3em; 
	margin: 0 0 7px 5px; 	 
}

small { 	 
	font-size: 0.5em; 
	display: block; 
	margin-bottom: 6px; 
	padding-bottom:5px;
}
a:hover{
	color:#6568D1;
}

@media only screen and (max-width: 768px) {

	h1 { font-size: 1.1em;}
	h2 { font-size: 1.1em;}
	h3 { font-size:1.1em;}
	h4 {font-size:1.1em;}
	p {font-size:1.2em;}
	small {font-size:0.6em;}
	a{font-size:1.1em;}
	ul li {font-size:1em;}
	.cont{-moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;}


	
}


@media only screen and (max-width: 480px) {
	
	h1 { font-size: 1.2em;}
	h2 { font-size: 1.2em; margin:0; }
	h3 { font-size:1.2em;margin:0;}
	h4 {font-size:1.2em; margin:0;}
	p {font-size:1.3em;}
	small {font-size:0.7em;}
	a{font-size:1.1em;}
	.dropdown-menu li a {font-size:1.5em;}
	.cont{-moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;}
	
}

@media only screen and (max-width: 320px) {	
	
	h1 { font-size: 1.3em;}
	h2 { font-size: 1.3em;}
	h3 { font-size:1.3em;}
	h4 {font-size:1.3em;}
	p {font-size:1.4em;}
	small {font-size:0.8em;}
	a{font-size:1.1em;}
	.dropdown-menu li a {font-size:1.4em;}
	.link{margin-bottom:-10px;}

}

@media only screen and (max-width: 900px) {	

div.container{float:none;}


}

@media print {

h1, .header , .footer , .charity, .nav { display: none; }
body {font-family: Georgia, 'Times New Roman', Times, serif;}
}

/* ------------- Контейнер с адаптивными блоками------------- */
.fairys {
	margin: 1.5em 0;
	padding: 0 5px 0 0;
	column-gap: 1.5em; /* Общее расстояние между колонками */
	font-size: .85em;
	-moz-column-gap: 1.5em; /* Расстояние между колонками для Firefox */
	-webkit-column-gap: 1.3em; /* Расстояние между колонками  для Safari, Chrome и iOS */
	overflow: visible;
	min-height: 0;
	display: block;
}
 
/* Элементы в виде плиток с содержанием */
.fairy_tale {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box; /* Изменения алгоритма расчета ширины и высоты элемента.*/
    -moz-box-sizing: border-box; /* Для Firefox */ 
    -webkit-box-sizing: border-box; /* Для Safari, Chrome, iOS иAndroid */ 
		border:1px #AFAFAF solid;
}
 
/* Стили картинок, видое и фреймов внутри адаптивных плиток */
img {
max-width: 100%;
height: auto;
display: block;
}
 
/* Стили ссылок внутри плиток */
.fairy_tale a {
margin: 0 10px;
}

 
/* Медиа-запросы для различных размеров адаптивного макета */
@media only screen and (min-width: 480px) {
    .fairys {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
 
@media only screen and (min-width: 700px) {
    .fairys {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}