body {margin: 0; font-family: 'Montserrat', sans-serif;}
p{margin: 0;}
a{text-decoration: none;}
 h1{text-align:center;color:gray;}
li{ list-style-type: none;float: left;padding: 5px 15px;}
.conteiner {width: 1200px; margin:auto; }
.conteineref {width: 1600px; margin:auto; }
#heder {background-color: #47636a;height:120px; color:#fff;text-align: center; font-size: 30px;} 
#heder button {  font-weight: 700;  color:#fff;text-decoration: none;padding: .8em 1em calc(.8em + 3px);border-radius: 3px;background: rgb(64,199,129);box-shadow: 0 -3px rgb(53,167,110) inset;transition: 0.2s;margin: 10px;} 
#heder button:hover { background: rgb(53, 167, 110); }
.contact p{margin:0;}
.contact{font-size: 17px;padding-top: 1%;}
#menu{height:45px; text-align:center;}
#menu ul{padding: 0;}
#banner {background-image:url(/img/banner-master-cool.ru.jpg);height:602px;    background-repeat: no-repeat; background-size: cover;}
#banner img{opacity: 0.8;}
#button {width: 40%;margin: 15px auto;}
.messages input{margin: auto;display: block;width: 90%;height: 34px;font-size: 14px;line-height: 1.428571429;color: #555;background-color: #fff;background-image: none;border-radius: 4px;}
textarea{margin: auto;display: block;width: 90%;font-size: 14px;line-height: 1.428571429;color: #555;background-color: #fff;background-image: none;border-radius: 4px;}
.row{width: 30%;  float: left;}
.toptext{margin:15px;}
.form{width: 400px;height: 540px;background-color: #cacaca;float: right;margin-top: 3%;text-align:center;}
.form p {padding:10px;}
.wecall{background:#fff; padding:20px;}
.advant{float:left;width: 19%;margin: 15px 5px;}
#advant {height: 70px;background:rgb(64,199,129);margin-bottom: 25px;color:#fff;}
.fa {float: left;  width: 20%;font-size: 34px;}
.advant div {float: left;font-size: 11.2px;}
#latest_news{height: 480px; background-color: #47636a;}
#latest_news h1{color:#fff;}
.col2, .col1{width:49%;float:left;}
.col2 img, .col1 img{float:left;color:gray;padding:0 25px;}
#info p {padding: 0 15px 15px 25px; }
#info{height: 650px;}
.col2{border-left:1px solid gray;}
.news{width: 30%; float:left;text-align:center;color:#fff;}
.news h2{height: 50px;}
.img1 {width: 350px;height: 300px;background-image: url(/img/chto-delat-slomalsya-holodilnik.png);background-size: cover;}
.img2 {width: 350px;height: 300px;background-image: url(/img/plohoy-zapa-iz-holodilnika.jpg);background-size: cover;}
.img3 {width: 350px;height: 300px;background-image: url(/img/shumit-holodilnik.jpg);background-size: cover;}
#footer{height: 300px; background-image:url(/img/ice.png);background-repeat: no-repeat;background-size: auto;  background-position: right;}
.social {padding: 55px 0;}
.social a {background-color: #47636a;border-radius: 50%;padding: 10px 25px; margin: 5px;font-size: 60px;}
.social a {box-shadow: 0 0 0 4px rgb(225 222 222);color: #fff;}
.social a:hover {background: rgba(255,255,255,1);color: #3c3530;}
#footer .contact {width:30%;padding:50px 0 0 0; float:left;}
#footer .contact p{margin: 22px 0;}
#footer ul{margin-left: -70px;}


figure.effect-ruby{background-color: #17819c;}
figure.effect-ruby img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);}
figure.effect-ruby:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);}
figure.effect-ruby h2 {
	margin-top: 20%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);}
figure.effect-ruby p {
	margin: 1em 0 0;
	padding: 3em;
	border: 1px solid #fff;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0) scale(1.1);
	transform: translate3d(0,20px,0) scale(1.1);} 
figure.effect-ruby:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);}
figure.effect-ruby:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);}
/*----------------------------------*/
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1600px;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1800;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}
.grid h3{position: relative;bottom: 65px;}
.grid a {color:#fff;}
.grid figure p{letter-spacing:1px;font-size: 68.5%;}


@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}









.field {
  margin: 1em 0;
}

label {
  display: block;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: #999999;
}

input {
  width: 100%;
  padding: 0.5em 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
}

textarea {
  width: 100%;
  height: 200px;
  padding: 0.5em 0.5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #D9D9D9;
}

button {
  display: inline-block;
  border-radius: 3px;
  border: none;
  font-size: 0.9rem;
  padding: 0.5rem 0.8em;
  background: #69c773;
  border-bottom: 1px solid #498b50;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  margin: 0;
  width: 100%;
  text-align: center;
}

button:hover, button:focus {
  opacity: 0.75;
  cursor: pointer;
}

button:active {
  opacity: 1;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}

.success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}