/*************************
******** Home CSS ********
***** Основная панель ****
********  и все **********
****** перемещения *******
*************************/
* {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
body {
	margin: 0;
	padding: 10px;
}
code pre {
	width: 100%;
	overflow: auto;
	background-color: #f8f8f8;
	padding: 5px;
	border-radius: 3px;
	border: 1px solid #ddd;
}
section {
	margin: 20px 0 10px;
}
section:after {
	content: "";
	display: table;
	clear: both;
}
h1, h2 {
	border-bottom: 1px solid #ddd;
}
[class^="example-"] .figure {
	zoom: .5;
	font-size: 50%;
	-webkit-text-size-adjust: 100%;
	min-width: 320px;
	max-width: 768px;
}
/*    */
article {
	padding: 0 10px;
	
	/*border: 0px solid gray;
	margin-bottom: 20px;
	overflow: hidden; /* clearfix */
	/*border-radius: 0%;
	box-sizing: border-box;*/
}

article.small img {
width: 100%;
}

article.medium img {
width: 100%;    /*50%;*/
float: left;
margin-top: 10px;
margin-bottom: 10px;
}

article.large img {
width: 100%;    /*40%;*/
float: left;
margin-top: 10px;
margin-bottom: 10px;
}

article.large h1 {
float: left;
padding-left: 40%;
margin-left: 10px;
width: 100%;
margin-bottom: -28px;
margin-top: 10px;
}

article.large p {
margin-top: 48px;
}

.example-static article.small {
width: 40%;
}

.example-static article.medium {
width: 70%;
}

.example-static article.large {
width: 100%;
}

.example-responsive-layout .figure {
	max-width: none;
	margin-right: 10px;
}

.example-responsive-layout .figure .layout article {
	float: left;
	margin-left: 20px;
	margin-top: 20px;
}

.example-responsive-layout .figure .layout.col-1 article {
	width: 100%;
}

.example-responsive-layout .figure .layout.col-2 article {
	width: -webkit-calc(50% - 20px);
	width: calc(50% - 20px);
}

.example-responsive-layout .figure .layout.col-3 article {
	width: -webkit-calc(33.33% - 20px);
	width: calc(33.33% - 20px);
}

.example-responsive-layout .figure .layout.col-4 article {
	width: -webkit-calc(25% - 20px);
	width: calc(25% - 20px);
}

.example-responsive-layout .figure .layout.col-5 article {
	width: -webkit-calc(25% - 20px);
	width: calc(25% - 20px);
}

.example-responsive-layout .figure .layout.col-6 article {
	width: -webkit-calc(20% - 20px);
	width: calc(20% - 20px);
}
/*  
.example-responsive-layout .figure .layout.col-2 article {
	width: -webkit-calc(50% - 20px);
	width: calc(50% - 20px);
}

.example-responsive-layout .figure .layout.col-3 article {
	width: -webkit-calc(33.33% - 20px);
	width: calc(33.33% - 20px);
}

.example-responsive-layout .figure .layout.col-4 article {
	width: -webkit-calc(25% - 20px);
	width: calc(25% - 20px);
}

.example-responsive-layout .figure .layout.col-5 article {
	width: -webkit-calc(20% - 20px);
	width: calc(20% - 20px);
}

.example-responsive-layout .figure .layout.col-6 article {
	width: -webkit-calc(16.66% - 20px);
	width: calc(16.66% - 20px);
}*/