body {/* Параметры для сайта в общем */
  background-color:white;/* усанавливаем цвет заднего фона */
  font-family: Helvetica, sans-serif;/* шрифт*/
  margin:0px;/* отступ(в данном случае 0) */
}
.headerWrap{/* названия сдесь это классы элементов в индексной странице */
	width:100%;/* ширина элемента */
	background-color:#354251;/* цвет области */
	padding-bottom:30px;/* отступ от элемента снизу */
	min-width:660px;/*Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной
	ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.*/
	margin-bottom:20px;
	-webkit-box-shadow: 0px 7px 11px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 7px 11px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 7px 11px 0px rgba(50, 50, 50, 0.75);
}
.logo{
	display:block;/* display Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.block Элемент показывается как блочный. */
	text-decoration:none;/* text-decoration управляет оформлением текста, none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. */
	padding:30px;/* Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон. */
	margin:0px;
	font-size:25px;/* размер шрифта */
	color:white;/* цвет шрифта */
}
.header{
	padding:10px;
	max-width:1000px;/* Устанавливает максимальную ширину элемента. */
	margin:0px auto;
}
.img1{
	width:60px;
	height:auto;/* Устанавливает высоту */
	margin-right:20px;/* Устанавливает величину отступа от правого края элемента. */
}
.mainPart{
	width:75%;
	min-width:660px;
	margin:0px auto 10px;
}
.buttonBlock{
	height:252px;
	float:left;/* Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. */
	background-color:#ecf0f0;	
	width:30%;
	margin:20px 1.5% 20px;
	-webkit-box-shadow: 3px 3px 13px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    3px 3px 13px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         3px 3px 13px 0px rgba(50, 50, 50, 0.75);
}
.img2{
	width:130px;
	height:auto;
	padding:30px;
	text-align:center;
	display:block;
	margin:0 auto;
}
.buttonText{
	margin-top:0px;
	text-align:center;
	color:#e64b3c;
}
a{
	text-decoration:none !important;/* !important позволяет повысить приоритет стиля,если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает */
}
.siteDescription{
	float:left;
	color:white;
	text-align:left;/* Определяет горизонтальное выравнивание текста в пределах элемента по левому краю */
	font-size:20px;
	padding-top:25px;
}
.clearfix:after {/* Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. */ 
    clear: both;/* Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами.Отменяет обтекание элемента одновременно с правого и левого края. */
    content: ".";/* Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. */ 
    display: block;
    height: 0;
    visibility: hidden;/* Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. */
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}
@media screen and (max-width: 500px){ /* это стили, которые применяюся на экранах с разрешением меньше 500 пикселей */
	.buttonBlock{
		width:90%;
		margin-left:5%;
		margin-right:5%;
	}
	.mainPart{
		width:100%;
		min-width:0px;
		margin:0px auto 10px;
	}
	.desktop{	
		display: none; /* скрываем все элементы которые отображаются на больших экранах */
	}
	.mobile{
		display: block; /* показываем все элементы, которые мы сделали для мобильной версии */
	}
	.header{
		padding:30px;
	}
	.headerWrap{
		padding-bottom:0px;
		min-width:0px;
	}
}
@media screen and (min-width: 499px){ /* это стили, которые применяюся на экранах с разрешением больше 500 пикселей */
	.desktop{	
		display: block; /* показываем все элементы, которые мы сделали для  крупных экранов */
	}
	.mobile{
		display: none; /* скрываем все элементы которые отображаются на мобильных экранах */
	}
}
.buttonBlock a,.logo{
	outline:none !important;/* Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента. */
	-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; 
}