/* Основной шрифт */

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/yrzXiAvgeQQdopyG8QSg8Q.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://fonts.gstatic.com/s/ptsans/v8/g46X4VH_KHOWAAa-HpnGPhsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

/* Иконочный шрифт */

@font-face {
	font-family: 'symbols-sedona';
	src: url('../font/symbols-sedona.eot?60737633');
	src: url('../font/symbols-sedona.eot?60737633#iefix') format('embedded-opentype'),
       url('../font/symbols-sedona.woff?60737633') format('woff'),
       url('../font/symbols-sedona.ttf?60737633') format('truetype'),
       url('../font/symbols-sedona.svg?60737633#symbols-sedona') format('svg');
	font-weight: normal;
	font-style: normal;
	font-size: 19px;
}

.icon-twitter:before {font-family: "symbols-sedona"; content: '\74'; } /* 't' */
.icon-youtube:before {font-family: "symbols-sedona"; content: '\f39e'; } /* '' */ 
.icon-facebook:before {font-family: "symbols-sedona"; content: '\66'; } /* 'f' */

/* Стили для шрифтов и строчных элементов */

.slim{
	font-size: 14px;
	line-height: 21px;
	font-weight: normal;
}

.small{
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
}

.social{
	font-size: 19px;
}

a,
a:hover{
	text-decoration: none;
	color: black;
}

.a:visited{
	color: black;
}

p, h3, section{	
	margin: 0;
	padding: 0;
	font-size: 21px;
}

h3{
	font-size: 21px;
}

p{
	text-align: center;
	line-height: 26px;
}

.clearfix:after{
	content: "";
	display: table;	
	clear: both;
}





/***********************************************/
/******СТИЛИ РАЗМЕТКИ ОСНОВНОЙ СЕТКИ************/
/***********************************************/


body{
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	font-weight: bold;
	font-family: "PT Sans", "Arial", sans-serif;
	background: #f2f2f2;
}

.container{
	position: relative;

	min-width: 768px;
	max-width: 1200px;
	margin: auto;
	box-shadow: 0px -20px 30px rgba(0, 0, 0, 0.2);
    background: white;
	opacity: 1;
}

.container_footer{
	position: relative;
	
	min-width: 768px;
	max-width: 1057px;
	width: 100%;

	margin: 0 auto;
	padding: 36px 0;
	font-size: 21px;
}

.container_hotels{
	position: relative;
	
	min-width: 705px;
	max-width: 1049px;
	margin: 0 auto;
	padding: 27px 0 27px 0;
	box-sizing: border-box;
}



/* Навигация в шапке */

.main-menu{
	position: relative;
	margin: 0;
	padding: 0;
	
	list-style: none;
	background: white;
	font-size: 0;
	z-index: 2000;
    white-space: nowrap;

}

.main-menu li{
	display: inline-block;
	vertical-align: top;
	
	width: 20%;
}

.main-menu a{
	display: block;
	width: 100%;

	font-size: 14px;
	text-align: center;
	line-height: 56px;
	color: black;
}

.main-menu a:hover,
.black_button:hover{
	color: #92bdd8;
}

.main-menu a:active,
.black_button:active{
	color: #b2b2b2;
}

.active a{
	color: #766357;
}
.active a:hover{
	color: #604e43;
}

.active a:active{
	color: #d6d0cc;
}


.logo{
	position: relative;
	font-size: 14px;
}

.logo a{
	position: absolute;
	left: 50%;
	top: 0;
	margin-left: -64px;
	
	width: 137px;
	height: 70px;
	background-image: url(../img/logo_small.png);
	content:'';
}

.logo:after{
	display: block;
	position: absolute;
	width: 138px;
	height: 71px;
	left: 50%;
	margin-left: -67px;
}



/* Фоновая картинка лого */

.intro{
	position: relative;
	height: 508px;
	z-index: 1;
}

.intro:before{
	content:"";
	position: absolute;
	min-width: 768px;
	width: 100%;
	height: 508px;
	background: url(../img/bg_welcome.png) no-repeat 50% 76px,
	url(../img/bg_sedona.png) no-repeat 50% 214px,
	url(../img/bg_because.png) no-repeat 50% 352px;	
	z-index: 1500;
}

.img_shape{
	position: absolute;
	bottom: 0px;
	width: 100%;
}


/*  Контент - блок 1  */

.intro_text{
	position: relative;
	background: white;
	
	min-width: 768px;
	width: 100%;
	z-index: 10;
	padding-bottom: 52px;
}

.intro_text p{
	line-height: 26px;
	padding-top: 30px;
	margin-bottom: 31px;
}

.intro_text .slim{
	text-align: center;
}



/*  Контент - блок 2  */
/*  (изображения и текст)  */

.column33 {
	position: relative;
	width: 33.3%;
	min-height: 256px;
	float: left;
}

.column33:nth-child(2){
	width: 33.4%;
}

.str:first-child .column33{
	width: 33.4%;
}

.str:nth-child(2) .column33{
	amin-height: 330px;
}

.column66 {
	position: relative;
	width: 66.6%;
	margin: 0;
	height: 256px;
	float: left;
}

.blue {
	background: #81b3d2;
	color: white;
}

.white {
	background: white;
}

.gray {
	background: #eee;
}

.white, .gray, .blue{
	position: relative;
	z-index: 122;
	text-align: center;
}

.blue p, .gray p{
	margin-top: 45px;
	margin-bottom: 10px;
}

.in_middle{
	display: inline-block;
	vertical-align: middle;
	width: 63%;
}

.white .in_middle{
	width: 68%;
}

.gray .slim{
	width: 64%;
	margin: 0 auto;
	margin-bottom: 21px;
}

.white p{
	margin-top: 160px;
	margin-bottom: 23px;
}

.white .slim{
	display: inline-block;
	margin-bottom: 77px;
	text-align: center;
	width: 68%;
}




.house:before{
	position: absolute;
	width:75px;
	height:72px;
	
	left: 50%;
	margin-left: -37px;
	top: 60px;
	background: url(../img/pict/content_pict.png) no-repeat;
	content:"";
}
.food:after{
	position: absolute;
	width:76px;
	height:72px;
	
	left: 50%;
	margin-left: -37px;
	top: 60px;
	background: url(../img/pict/content_pict.png) no-repeat -81px 2px;
	content:"";
}
.souvenir:after{
	position: absolute;
	width:66px;
	height:75px;
	
	left: 50%;
	margin-left: -37px;
	top: 60px;
	background: url(../img/pict/content_pict.png) no-repeat -162px -1px;
	content:"";
}


/*  Контент - нижний блок (поиск гостиницы + карта)*/



.interes{
	padding-top: 55px;
}

.interes p{
	font-size: 30px;
	margin-bottom: 33px;
}

.interes .slim{
	text-align: center;
	font-size: 14px;
	line-height: 24px;
	padding-bottom: 44px;
}

.map_bg{
	display: block;
	position: absolute;
	bottom: 0;

	width: 100%;
	height: 473px;
	
	background: url(../img/map.jpg) center;
	z-index: 100;	
}

.map{
	position: relative;
	width: 100%;
	height: 473px;

	margin: 0;
	margin-bottom: -5px;

	border: 0;
	z-index: 110;	
}



/*  Футер  */

.website{
	position: relative;
	width: 228px;
	margin-right: 10px;
	float: right;
}

.visit{
	float: left;
	width: 196px;
	margin-top: 8px;
	text-align: right;
}

.social{
	position: absolute;
	width: 156px;

	left: 50%;
	margin-left: -78px;
}

.social-btn{
	display: inline-block;
	vertical-align: top;
	
	width: 46px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	text-transform: none;
}


.btn-copyrights{
	display: inline-block;
	vertical-align: top;	
	
	color: black;
	width: 217px;
	height: 33px;
	text-align: left;
	background: rgba(0,0,0,0);
}

.html-academy{
	position: absolute;
	right: 0;
	top: 0;
	width: 226px;
	height: 33px;
	cursor: pointer;
	background:black url(../img/pict/html_academy.png) no-repeat;
}

.html-academy:hover{
	background:#81b3d2 url(../img/pict/html_academy.png) no-repeat;
}

.html-academy:active{
	background:#bdbbbc url(../img/pict/html_academy.png) no-repeat;
}


.blue_button{
	background: #81b3d2;
	color: white;
}
.blue_button:hover{
	color: white;
	background: #669ec0;
}
.blue_button:active{
	color: #88b6d1;
	background: #5496bd;
}



/*******************************************/
/***Стили для "резиновых" картинок, ********/
/***в том числе для врехней фоновой ********/
/***картинки, тянущейся вверх и вниз********/
/***с разным процентажем.*******************/
/*******************************************/


.mainbg{
	position: relative;
	max-width: 1200px;
}

.con_bg{
	max-width: 800px;
}

.invis{
	display: block;
	width: 100%;
	opacity: 0;
} 

.main_bg_vis{
	display: block;
	position: absolute;
	top: -20%;
	margin-top: 99px;
	
	width: 100%;
	min-width: 768px;
	max-width: 1200px;
	min-height: 512px;
	background: #7ba4c6;
}

.con_bg_vis{
	opacity: 1;
	display: block;
	position: absolute;
	top: -50%;
	margin-top: 127px;
	
	width: 100%;
	min-width: 512px;
	max-width: 800px;
	z-index: 1;
	background: #ada3a1;
}

.relative {
	position: relative;
	background: white;
	z-index: 111;
}

.btn{	
	display: block;
	width: 568px;
	height: 86px;
	margin: 0 auto;
	background: #766357;
	
	text-align: center;
	line-height: 86px;
	
	font-size: 21px;
	color: white;

	position: relative;
	z-index: 2;
}

.btn:hover{
	color: white;
}	





/*******************************************/
/******СТИЛИ ВЫЕЗЖАЮЩЕЙ ФОРМЫ***************/
/*******************************************/

.hotel_find{
	display: none;
	position: absolute;
	left: 50%;
	margin-left: -284px;
	top: 86px;
	
	width: 458px;
	padding: 55px;
	background: white;	
	az-index: 9000;
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);

	z-index: 1;
}

.hotel_find_show{
	display: block;
}

.str_form{
	height: 37px;
	line-height: 37px;
	vertical-align: middle;
	margin-bottom: 30px;
	
	font-size: 14px;
}

.find_form input[type="date"]{
	position: relative;
	padding: 2px 11px;
	width: 347px;
	height: 36px;
	float: right;
	background: #f2f2f2;

	border: 0;
	outline: 0;
	border: 2px solid #f2f2f2;
	box-sizing: border-box;
	
	font-family: "PT Sans", "Arial", sans-serif;	
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	
}

.find_form input[type="date"]:hover{
	background: #ebebeb;
}

.find_form input[type="date"]:focus{
	background: white;
	border: 2px solid #e5e5e5;
	box-sizing: border-box;
}


.find_form input[type="date"]:after{
	position: absolute;
	top: 50%;
	margin-top: -12px;
	right: 8px;
	color: #c2c2c2;

	font-size: 21px;
	font-weight: normal;

	font-family: "symbols-sedona";
	content:"\e800";
}

.number{
	position: relative;
	display: inline-block;
	background: #f2f2f2;
	height: 35px;
	width: 114px;
	text-align: center;

	float: right;
}

.number:first-child{
	float: none;
	margin-left: 39px;
	margin-right: 49px;
}

.number_minus{
	float: left;
	position: relative;
	width: 35px;	
	height: 35px;
}

.number_plus{
	float: right;
	position: relative;
	width: 35px;	
	height: 35px;
}

.number_minus:after, .number_plus:after{
	position: absolute;
	top: 0;
	right: 0;
	
	content: "\e802";

	width: 35px;	
	height: 35px;

	color: #a9a9a9;
	font-family: "symbols-sedona";
	font-size: 14px;
	font-weight: normal;
}

.number_plus:after{
	content: "\e801"; 
}




.find_form input[type="date"]:hover:after,
.number_minus:hover:after,
.number_plus:hover:after{
	color: black;
}

.find_form input[type="date"]:focus:after,
.number_minus:active:after,
.number_plus:active:after{
	color: #81b3d2;
}


.button{
	display:block;
	width: 100%;
	padding: 16px 0;
	margin-top: 48px;

	cursor: pointer;
	font-family: "PT Sans", "Arial", sans-serif;	
	font-size: 21px;
	font-weight: bold;
	border: none;
	outline: none;
}





/*******************************************/
/************АНИМАЦИЯ ДЛЯ ФОРМЫ*************/
/*******************************************/


.hotel_find_show{
  -webkit-animation: bounce 0.4s;
  animation: bounce 0.4s;
}


@-webkit-keyframes bounce {
  0% {
    transform: translateY(-300px);
  }
  70% {
    transform: translateY(30px);
  }
  90% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(-300px);
  }
  70% {
    transform: translateY(30px);
  }
  90% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.str, .interes{
	position: relative;
}
 
.interes{
	background: white;
	z-index: 112;
}
/*************BACKGROUND-SETKA***************/

/*.main_footer{
	background-color: rgba(150,20,170, 0.2);
}
.container{
	background-color: rgba(100,50,70, 0.2);
}
.container_footer{
	background-color: rgba(0,0,0, 0.2);
}
.visit{
	background-color: rgba(100,50,70, 0.2);
}
.main-menu{
	background: rgba(100,0,100, 0.2);
}
.main-menu a{
	background: rgba(50,110,00, 0.2);
}
.intro_text{
	background: rgba(100, 0, 0, 0.5);
}
.mainbg{
	background: rgba(0,0,0,0.1);
}*/

/*******************************************/











/*******************************************/
/************hotels.html********************/
/*******************************************/




/* Блок фильтров */


.bg{
	width: 30%;
	background: rgba(0,0,0,0);
	text-align: center;
}

.bg span{
	display: block;
}

.filters{
	position: relative;
	
	padding: 0 32px 0 31px;
	
	background:#627c94 url(../img/bg_filters.jpg) no-repeat;
	background-size: cover;

	color: white;	
}

.filter{
	display: inline-block;
	vertical-align: top;
}

.filter:first-child{
	margin-right: 111px;
}

.filter:nth-child(3){
	float: right
}


.filter ul{
	list-style: none;
	margin: 0;
	padding: 0;	
	padding-top: 4px;
}

.filter li{
	margin-top: 19px;
}

.filter li:nth-last-child{
	margin-bottom: 0;
}

label{
	color: #b5b5b5;
}

label .span2{
	color: white;
}

label:hover{
	color: white;
}

label input{
	display: none;
}

.box{
	position: relative;
}

label .box:before{
	position: absolute;
  	display: inline-block; 
	vertical-align: top;

	font-size: 24px;

	content: "\2610";
	font-family: "symbols-sedona"
}    
label .span2{
  	display: inline-block;
  	vertical-align: top; 	
   	
   	margin-left: 38px;
}

label input:checked + .box:before{
  	content: "\2611";
}    

input[type="text"]{
	height: 30px;
	width: 38%;
	text-align: center;
	background-color: rgba(0, 200, 0, 0);
	color: white;
	
	padding-left: 10px;
	padding-right:  10px;
	border: none;
	outline: 0;
	font-size: 14px;
	line-height: 26px;
	font-weight: normal;
}

.texts{
	position: relative;
	border: 2px solid white;
	border-radius: 2px;
	margin-top: 10px;
}

.texts:after{
	position: absolute;
	left: 50%;
	top: 5px;
	width: 2px;
	height: 22px;
	background: white;
	content: "";
}

.btn_form{
	height: 32px;
	text-align: center;
	padding: 2px 31px;

	background-color: rgba(0, 200, 0, 0);
	color: white;
	border: 2px solid white;
	border-radius: 2px;
	outline: 0;
	cursor: pointer;
}


/* Фильтр цены в блоке фильтров */

.range{
	position: relative;
	width: 100%;
	height: 42px;
	padding-top: 1px;
	background-color: rgba(0, 200, 0, 0);
	margin-bottom: 10px;
}
.range .scale{
	margin-top: 19px;
	background: #8e8180;
	height: 2px;
	width: 100%;
	content: "";
}

.scale .bar{
	height: 2px;
	background: white;
}

.toggle{
	position: absolute;
	top: 12px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	border: 8px solid white;
	background: #ababab;
	cursor: pointer;
}
.toggle:hover{
	background: #1c4f80;
}
.min-toggle{
	left: 0px;
}

.max-toggle{
	left: 80%;
}



/* Контент */

.hot_content{
	position: relative;
	z-index: 201;
}

.hot_content .container{
	padding-top: 1px;
}

.hot_block{
	padding: 0px 32px 0px 31px;
}

.hot_content ul{
	display: inline-block;
	vertical-align: baseline;
	
	list-style: none;
	margin: 0;
	margin-left: 47px;
	padding: 0;	
}

.hot_content li{
	display: inline-block;
	vertical-align: top;

	margin-right: 30px;
}

.hot_content li:nth-child(1){
	margin-right: 35px;
}

.hot_content h3{
	display: inline-block;
	vertical-align: top;

	margin-left: 0;
}

.content_item h3{
	margin-left: 166px;
}

.hot_header_active{
	color: #92bdd8;
}

.hot_header_nactive a{
	color: #b2b2b2;
	border-bottom: dotted 1px #81b3d2;
}

.hot_header_nactive a:hover{
	color: #92bdd8;
	border-bottom: dotted 1px #81b3d2;

}.hot_header_nactive a:active{
	color: black;
	border-bottom: none;
}

.arrow{
	display: block;
	float: right;
	margin-left: 12px;
}

.up:before{
	font-family: "symbols-sedona";
	content:"\25b2";
	font-size: 23px;
	color: #ccc;
}
.up:hover:before{
	color:black;
}
.up:active:before{
	color:#81b3d2;
}
.down:before{
	font-family: "symbols-sedona";
	content:"\25bc";
	font-size: 23px;
	color: #81b3d2;
}

.content_item{
	position: relative;
	
	padding: 0px 32px 0px 31px;
	border-top: solid 1px #e5e5e5;		
}

.content_item:last-child{
	border-top: 1px solid #e5e5e5;	
	border-bottom: 1px solid #e5e5e5;
}

.it_img{
	display: block;
	position: absolute;
	left: 0;
}

.content_item img{
	display: block;
	float: left;
}

.content_item h3{
	position: relative;
	float:left;
	width: 80%;

	margin-top: -6px;	
	margin-bottom: 4px;
	box-sizing: content-box;
}

h3 a{
	display: block;
	float:left;
}

.it_name{
	float:left;
	margin-left: 166px
}


.it_but{
	display: block;
	margin-top: 12px;
	padding: 0 16px;

	color: white;
	font-weight: bold;

	background: #81b3d2;
	cursor: pointer;
}

.but_block{
	background: #766357;
}

.but_block:hover{
	background: #8b8b8b;
	color: white;
}

.but_block:active{
	background: #503e33;
	color: #857871;
}

.it_price{
	float:left;
	display: inline-block;
	vertical-align: top;

	margin-left: 6px;
}

.rating{
	position: absolute;
	right: 0px;
	bottom: 27px;
	
	padding: 1px 14px;
	background: #f2f2f2;
	font-weight: normal;
	color: #8b8b8b;
}

.container_hotels:before{
	position: absolute;

	right: 0;
	top: 21px;

 	font-family: "symbols-sedona";
 	color: #81b3d2;
 	font-size: 21px;
 	word-spacing: 2px;
	content: "";
}
.four_star:before{
	content: "\2605  \2605  \2605  \2605";
}
.two_star:before{
	content: "\2605  \2605";
}
.three_star:before{
	content: "\2605  \2605  \2605";
}