body, p, a, ul, li, input,button,select,textarea{
	font-family: Roboto, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3em;
}
h1, h2, h3, h4, h5, h6 {
	font-family: Roboto, sans-serif;
	font-weight:700;
}
h1 {font-size:30px;line-height:1.3em;}
.pole {
	width: 100%;
    border: 2px solid #6ea4e2;
    padding: 8px;
    font-size: 15px;
    margin-bottom: 1em;
}
.modal-title {
	font-size:20px;
	margin-bottom: 1.1em;
}
.modal-button {
	background-color: #014a9d;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    border: 2px solid #014a9d;
    padding: 0.5em 1.2em;
}
.modal-button:hover {
	background-color: #ffffff;
	color: #014a9d;
}
.site {
	margin: 0 auto;
    max-width: 960px;
	background-color:#ffffff;
	border: 1px solid #e9e9e9;
	box-shadow: 1px 2px 7px 1px rgba(0,0,0,0.3);
}
.head-block {
	background: url(../images/bg-head.jpg);
	height:500px;
}
.head-h1 {
	padding-top:215px;
	margin-left:50px;
}
.phone-p {
	margin-left:50px;
	padding-top:20px;
}
.phone {
	font-size:30px;
	font-weight:700 !important;
	color:#014a9d;
}
#icon-size{
	color:#014a9d;
	font-size:28px;
}
#describe-mob {
	display: none;
}
.describe-left {
	display:inline-block;
	float:left;
	width:478px;
	padding-left:50px;
	padding-top: 100px;
}
.describe-photo-right {
	display:inline-block;
	width:480px;
	height:260px;
}
.describe-photo-left {
	display:inline-block;
	float:left;
	width:480px;
	height:260px;
}
.describe-right {
	display:inline-block;
	width:478px;
	height:260px;
	padding-right:50px;
	padding-top: 100px;
}
.describe-text-right {
	text-align:right;
}
#price {
	height:320px;
	background: url(../images/bg-price.jpg);
}
.price-cold {
	width:479px;
	padding-left:50px;
	margin-top:65px;
	display: inline-block;
	float: left;
}
.price-hot {
	width:479px;
	padding-right:50px;
	margin-top:65px;
	display: inline-block;
}
.price-tag {
	text-align:center;
}
.price-description {
	text-align: center;
}
.price-description2 {
	text-align: center;
}
.price-description-hide {
	display: block;
	text-align: center;
}
.price-description-show {
		display: none;
		text-align: justify;
	}
#price-string2{
	margin-top:15px;
}
.title-eq {
	width:100%;
	padding-top: 36px;
	padding-bottom: 65px;
}
.card1-eq {
	padding-left: 50px;
	display:inline-block;
}
.card2-eq {
	padding-left:25px;
	display:inline-block;
}
.card3-eq {
	padding-left: 6px;
	display:inline-block;
}
.image-card {
	margin-bottom: 20px;
}
.description-card {
	width:273px;
}
#footer {
	position:relative;
	background: url(../images/bg-footer.jpg);
	padding-top:95px;
	height:546px;
}
.slogan {
	text-align:center;
}
.slogan-mob {
	display: none;
}
.phone-footer {
	margin-top: 30px;
	text-align: center;
	
}
.footer-line {
	position: absolute;
	bottom: 0;
	padding:10px 50px 0 50px;
	width: 100%;
	height:50px;
	background: linear-gradient(to top, rgba(174,172,172,0.65), rgba(255,255,255,0.65));
}
.details-footer {
	width:33%;
	display: inline-block;
}
.details-footer-p {
	padding-top: 0.7em;
}
.details-footer-p a {
	font-size:14px;
}
.socials-footer {
	width:33%;
	display: inline-block;
}
.socials-footer a {
	color:#000000;
}
.socials-footer a:hover {
	color:#014a9d;
}
.credits-footer {
	width:32%;
	display: inline-block;
}
.credits-footer p {
	text-align: right;
}
.credits-footer a {
	font-size: 14px;
	color: #000000;
}
.credits-footer a:hover {
	color:#014a9d;
}
.article-water {
	padding: 2.5em 2.5em 0 2.5em;
}
@media screen and (max-width: 977px) {
	body, p, a, ul, li, input,button,select,textarea {
		font-size:16px;
	}
	.site {
		max-width: 100%;
	}
	.head-h1 {
		padding-top:6em;
		margin-left:50px;
	}
	#describe {
		display: none;
	}
	#describe-mob {
		display: block;
		padding: 30px 7% 10px;
	}
	#price {
		height: auto;
	}
	.price-cold {
		width:50%;
		padding-left: 0px;
		margin-top:25px;
		display: inline-block;
		float: left;
	}
	.price-hot {
		width:50%;
		padding-right: 0px;
		margin-top:25px;
		display: inline-block;
	}
	#price-string2 {
		padding: 0 7%;
	}
	.price-description-hide {
		display: none;
	}
	.price-description-show {
		display: block;
		text-align: justify;
	}
	.price-description2 {
		text-align: justify;
	}
	.card1-eq {
		display: block;
		width: 274px;
		margin: auto;
		padding: 0 0 20px 0;
	}
	.card2-eq {
		display: block;
		width: 274px;
		margin: auto;
		padding: 0 0 20px 0;
	}
	.card3-eq {
		display: block;
		width: 274px;
		margin: auto;
		padding: 0;
	}
	.details-footer {
		display: none;
	}
	.socials-footer {
		display: none;
	}
	.credits-footer {
		display: block;
		width: 100%;
		padding-top: 1em;
	}
	.credits-footer p {
		text-align: center;
	}
}
@media screen and (max-width: 530px) {
	h1 {
		font-size:24px;
	}
	.site {
		max-width: 100%;
	}
	.head-h1 {
		padding-top:8em;
		margin-left:10%;
	}
	.slogan {
		display: none;
	}
	.slogan-mob {
		display: block;
		padding: 0 10%;
		text-align: center;
	}
	#popup__toggle {
		display:none;
	}
}
@media screen and (max-width: 417px) {
	h1 {font-size: 20px;}
	body, p, a, ul, li, input,button,select,textarea {
		font-size:14px;
	}
	.phone {font-size: 25px;}
	.phone-p {font-size: 23px;}
	#price {
		height: auto;
	}
	.price-cold {
		width:100%;
		padding: 0;
		margin-top:0px;
		display: block;
	}
	.price-hot {
		width:100%;
		padding: 0px;
		margin-top:25px;
		margin-bottom: 35px;
		display: block;
	}
	#price-string2 {
		padding: 0 7%;
	}
	.price-description-hide {
		display: none;
	}
	.price-description-show {
		display: block;
		text-align: justify;
	}
	.price-description2 {
		text-align: justify;
	}
	.credits-footer {
		padding-top: 1.25em;
	}
	#popup__toggle {
		display:none;
	}
}
/* Контейнер */
.modal {

/* Слой перекрытия */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;

/* Трансформации прозрачности при открытии  */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

/* Скрываем изначально */
opacity: 0;
pointer-events: none;
}

/* Показываем модальное окно */
.modal:target {
opacity: 1;
pointer-events: auto;
}

/* Содержание */
.modal > div {
width: 300px;
background: #ffffff;
position: relative;
margin: 10% auto;

/* По умолчанию минимизируем анимацию */
-webkit-animation: minimise 500ms linear;

/* Придаем хороший вид */
padding: 30px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
text-shadow: 0 1px 0 #fff;
}

/* Изменяем анимацию при открытии модального окна*/
.modal:target > div {
-webkit-animation-name: bounce;
}

.modal h2 {
font-size: 36px;
padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
   -webkit-transform: scale3d(0.1,0.1,1);
   -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
   -webkit-transform: scale3d(1.08,1.08,1);
   -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
   -webkit-transform: scale3d(0.95,0.95,1);
   -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
   -webkit-transform: scale3d(1,1,1);
   -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
   -webkit-transform: scale3d(1,1,1);
  }
  100% {
   -webkit-transform: scale3d(0.1,0.1,1);
  }
}

/* Ссылка на кнопку Закрыть */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* Сбрасываем изменения */
.modal a[href="#close"]:focus {
outline: none;
}

/* Создаем кнопку Закрыть */
.modal a[href="#close"]:after {
content: 'X';
display: block;

/* Позиционируем */
position: absolute;
right: -10px;
top: -10px;
width: 20px;
padding: 1px 1px 1px 2px;

/* Стили */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #ffffff;
border: 3px solid #ffffff;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
outline: 0px solid #000;
}

/* Открываем модальное окно */
a.openModal {

}

a.openModal:hover,
a.openModal:focus {
}

.modal .modal_title {
  display: block;
  text-align: center;
  font-size: 22pt;
}
#popup__toggle{bottom:25px;right:10px;position:fixed;z-index:999;}
.img-circle{background-color:#29AEE3;box-sizing:content-box;-webkit-box-sizing:content-box;}
.circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #29AEE3;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4s infinite ease-in-out !important;-moz-animation: circle-anim 2.4s infinite ease-in-out !important;-ms-animation: circle-anim 2.4s infinite ease-in-out !important;-o-animation: circle-anim 2.4s infinite ease-in-out !important;animation: circle-anim 2.4s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#29AEE3;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3s infinite ease-in-out;-o-animation: circle-fill-anim 2.3s infinite ease-in-out;animation: circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5s;}
.img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;}
.img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url(/../images/mini.png);background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
.img-circle:hover{opacity: 1;}
@keyframes pulse {0% {transform: scale(0.9);opacity: 1;}
  50% {transform: scale(1); opacity: 1; }   
  100% {transform: scale(0.9);opacity: 1;}}
 @-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;}
  50% {-webkit-transform: scale(1);opacity: 1;}   
  100% {-webkit-transform: scale(0.95);opacity: 1;}}
@keyframes tossing {
  0% {transform: rotate(-8deg);}
  50% {transform: rotate(8deg);}
  100% {transform: rotate(-8deg);}}
@-webkit-keyframes tossing {
  0% {-webkit-transform: rotate(-8deg);}
  50% {-webkit-transform: rotate(8deg);}
  100% {-webkit-transform: rotate(-8deg);}}
@-moz-keyframes circle-anim {
  0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;}
  30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;}
  100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}}
@-webkit-keyframes circle-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;}
  30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;}
  100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}}
@-o-keyframes circle-anim {
  0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;}
  30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;}
  100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}}
@keyframes circle-anim {
  0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;}
  30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;}
  100% {transform: rotate(0deg) scale(1) skew(1deg);
opacity: .1;}}
@-moz-keyframes circle-fill-anim {
  0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;}
  100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-webkit-keyframes circle-fill-anim {
  0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;  }
  50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;  }
  100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@-o-keyframes circle-fill-anim {
  0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
@keyframes circle-fill-anim {
  0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}
  50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}
  100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}
.popup__overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    text-align: center
    }
    .popup__overlay:after {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: ''
        }
/* Added for IE<9 compatibility */
.popup__overlay_ie {
        background: #000;
        opacity: .7;
        filter: alpha(opacity=70)
        }
.popup {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    position: relative;
    max-width: 80%;
    padding: 20px;
    border:3px solid #014a9d;
    background: #fff;
    vertical-align: middle
    }
/* Added instead of :after pseudoelement */
.popup__valignfix {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 0;
    height: 100%;
    vertical-align: middle
    }
input[type="button"] {
    padding: 6px 16px;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    background: #ff6600;
    color: #fff
    }
.popup__close {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    line-height: 12px;
    color: #014a9d;
    text-decoration: none;
    font-weight: bold;
    cursor:pointer;
    }
    .popup__close:hover {
     background: #014a9d;
	color:#ffffff;
        }