/*=========== WRAPPER ==========*/
header, .block, .header, footer {min-width: 280px;}
.block > .wrap, header > .wrap, .shadow > .wrap, footer > .wrap {min-width: 260px; max-width: 960px; padding: 0 20px; margin: 0 auto;}

/*=========== HEADER ===========*/
header {background: url('../images/bg/bg_header.jpg') top center no-repeat; background-size: cover;}
header > .wrap {padding-top: 20px; padding-bottom: 30px;}

.top_menu {
	text-align: center;
}

.top_menu li {
   
   /*float: left;  Выстраивание элементов списка в один ряд. */
   display:inline-block;
   list-style-type: none;
   opacity: 1;
   margin-bottom: 16px;
   /*display: block;  Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   
   /*background: white; /* Цвет блоков меню. */
}

.top_menu li a {
   font-size: 16px; /* Размер текста в ссылках. */
   padding: 13px 13px 13px 13px;  /* Внутри блочные отступы. */
   background: black; /* Цвет блоков меню. */
   color: white; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   opacity: 1;
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
	-webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
}

.top_menu li a:hover {
   background: white; /* Цвет блока при наведении курсора. */
   color: black;  /* Цвет текста при наведении курсора. */
   font-size: 16px;
   -webkit-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
}

.menu {background: #e3e3e3 url('../images/bg/menu_bg.jpg') top repeat-x; padding: 1px 14px; margin: 0 0 20px; border-radius: 4px; box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.54);}
.menu .inline-b {vertical-align: middle;}
.menu .hr-vert {width: 2px; height: 54px; margin: 0 30px; background: url('../images/bg/menu_hr_vert.jpg') top repeat-y;}
.phone-bk {margin-left: 7%;}
.phone-bk img {margin: 0 10px 0 0;}
.button.one {width: 192px; height: 40px; line-height: 40px;}
.bg-red {
  max-width: 510px;
  margin-top: 18%;
  padding: 2% 3%;
  border-radius: 4px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#df3234+0,8a100a+100 */
  background: rgb(223,50,52); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(223,50,52,1) 0%, rgba(138,16,10,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(223,50,52,1) 0%,rgba(138,16,10,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(223,50,52,1) 0%,rgba(138,16,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df3234', endColorstr='#8a100a',GradientType=0 ); /* IE6-9 */
}
.bg-red .px34 {line-height: 150%;}

.shadow {background: rgba(0, 0, 0, 0.6); padding: 1.4% 0;}
.calc {width: 48%; height: 50px; padding: 10px 0;}
.calc img {margin-right: 20px;}
.calc p {width: 75%;}
.calc .inline-b {vertical-align: middle;}

.button.two {width: 100%; max-width: 386px; height: 70px; font-size: 24px; line-height: 70px;}

/*========== BLOCKS'S ==========*/
.header {text-align: center; font-size: 34px; padding: 2% 0;}

.button.bg-green {background: url('../images/bg/bg_butt_green.jpg') repeat-x; background-size: contain; font-family: 'GothamPro-Bold', sans-serif; text-transform: uppercase; text-shadow: 0px 1px 1px #ffffff; text-align: center; border-radius: 3px; box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.71); cursor: pointer;}
.button.bg-gray {background: url('../images/bg/bg_butt_gray.jpg') repeat-x; background-size: contain; font-family: 'GothamPro-Bold', sans-serif; text-transform: uppercase; text-shadow: 0px 1px 1px #ffffff; text-align: center; border-radius: 3px; box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.71); cursor: pointer;}

.button.bg-green:hover {background: url('../images/bg/bg_butt_green2.jpg') repeat-x; background-size: contain;}
.button.bg-gray:hover {background: url('../images/bg/bg_butt_gray2.jpg') repeat-x; background-size: contain;}

.header.one {background: #c46215 url('../images/bg/shadow.png') top repeat-x; color: #ffffff;}
.block.one {background: url('../images/bg/bg_orange.jpg') top center no-repeat; background-size: cover; height: auto;}
.block.one .wrap {padding: 2% 20px 4%; text-align: center;}
.block.one .foto {width: 31%; min-width: 260px; margin: 15px;}

.block.one .foto1 {width: 24%; min-width: 210px; margin: 2px;}

.block.one .foto:first-child {margin-left: 0;}
.block.one .foto:last-child {margin-right: 0;}
.block.one .foto .big-text {font-family: 'GothamPro-Bold', sans-serif; font-size: 22px; text-transform: uppercase; padding-bottom: 0;}
.block.one .foto .wrap {background: #ffffff; padding: 10px; margin-top: 16px; border-radius: 4px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4);}

.block.one .foto1 .wrap {background: #ffffff; padding: 10px; margin-top: 16px; border-radius: 4px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4);}

.block.one .foto .fancybox {display: block; position: relative;}
.block.one .foto .fancybox:hover {opacity: 0.7;}
.block.one .foto .fancybox:before{position: absolute; width: 37px; height:37px; content: " "; background-image: url('../images/icons/zoom.png'); right: 6px; bottom: 10px;}
.block.one .foto .wrap img {border-radius: 4px; width: 100%; max-width: 280px;}
.block.one .foto .wrap p {padding: 16px 0;}
.block.one .foto .wrap .button {height: 40px; line-height: 40px;} 

.header.two {background: #ececec url('../images/bg/shadow.png') top repeat-x;}
.block.two {background: #ffffff;}
.block.two .wrap {padding: 2% 20px 4%; text-align: center;}
.block.two .inline-b {vertical-align: middle;}
.block.two .pic {width: 29%; min-width: 260px; height: 200px; padding-top: 30px; margin: 25px 15px; border: 1px solid #e1e1e1; border-radius: 4px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);}

.header.three {background: #bfbfbf/*url('../images/bg/shadow.png') top repeat-x*/;}

.header.three1 {background: #FFFFFF/*url('../images/bg/shadow.png') top repeat-x*/;}
.header.three2 {background: #bfbfbf/*url('../images/bg/shadow.png') top repeat-x*/;}

.block.three {background: url('../images/bg/bg_gray.jpg') top center no-repeat; background-size: cover; height: auto;}
.block.three .wrap {padding: 1% 20px 4%; text-align: center;}
.block.three .foto {width: 31%; min-width: 260px; margin: 15px;}

.block.three .foto1 {width: 46%; min-width: 390px; margin: 10px;}

.block.three .foto:nth-child(1), .block.three .foto:nth-child(4) {margin-left: 0;}
.block.three .foto:nth-child(3), .block.three .foto:nth-child(6) {margin-right: 0;}
.block.three .foto .big-text {font-family: 'GothamPro-Bold', sans-serif; font-size: 20px; text-transform: uppercase; padding-bottom: 0;}
.block.three .foto .wrap {background: #ffffff; padding: 10px; margin-top: 16px; border-radius: 4px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4);}

.block.three .foto1 .wrap {background: #ffffff; padding: 14px; margin-top: 16px; border-radius: 4px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.4);}

.block.three .foto .fancybox {display: block; position: relative; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s;}
.block.three .foto .fancybox:hover {opacity: 0.7;}
.block.three .foto .fancybox:before{position: absolute; width: 37px; height:37px; content: " "; background-image: url('../images/icons/zoom.png'); right: 6px; bottom: 10px;}
.block.three .foto .wrap img {border-radius: 1px; width: 100%; max-width: 280px;}
.button.three {width: 85%; max-width: 410px; height: 70px; margin: 4% auto 0; font-size: 24px; line-height: 70px;}

.block.prem {text-align: center; padding-bottom: 0px; background-color: #C1CDC1;}
.block.prem .header{font-size: 34px; color: white; text-align: center; background-color: grey;}
.block.prem .wrap {padding: 2% 20px 0%;}

.block.compare {
	float: left;
	border: 1px solid black;
	width: 47%;
	min-width: 140px;
	margin: 35px 1%;
	background-color: white;
	overflow: hidden;
}

.block.compare_str {
	text-align: left;
	width: 98%;
	margin: 25px 3px;
}


/*=========== FOOTER ===========*/
.header.footer {background: #292929 url('../images/bg/shadow.png') top repeat-x; color: #ffffff;}
footer {background: #464646;}
footer .wrap {text-align: center;}
footer .inline-b {vertical-align: top;}
.phone-white .inline-b {vertical-align: middle;}
.fblock {width: 31%; min-width: 260px; margin: 4% 0; padding: 20px 0;}
.fblock.two {margin: 4% 1.75%; padding: 20px 1.75%; background: url('../images/bg/hr_vert.png') left no-repeat, url('../images/bg/hr_vert.png') right no-repeat;}
.fblock .big-text {font-family: 'GothamPro-Bold', sans-serif; font-size: 20px; color: #ffffff;}
.button.bg-gray {max-width: 280px; margin: 2% auto; height: 70px; line-height: 70px; font-size: 24px;}

/*============ FORM ============*/
#form-container {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;}
.form-bg {position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); cursor: pointer;}
#form1, #form2, #form3 {display: none;}
.form-wrap {position: relative; max-width: 640px; margin: 3% auto; padding: 0 3%; top: -100%;}
.close-form {position: absolute; top: 12px; right: 12px; font-weight: bold; cursor: pointer;}
form .success {width: 90%; margin: 0 auto; font-size: 21pt; font-weight: bold; border: 3px solid red; padding: 30px; display: none;}

/*======= THANK'S WINDOW =======*/
#thanks {display: none; position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 3;}
#thanks > div {padding: 7% 3% 3%; text-align: center; width: 50%; margin: 0 auto; background-color: #ffffff; border-radius: 7px; position: absolute; left: 23%; top: 25%;}
#thanks p {/*text-shadow: 0px 0px 2px black;*/ padding-bottom: 4%; font-size: 200%;}
#thanks > button {background-color: #cc6633; border: 2px solid #cc6633; color: #ffffff; padding: 10px 30px; border-radius: 7px; outline: none;}

/* STYLE CSS END */