/*Gradients*/ .yellow-gradient { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(251, 211, 137)), color-stop(0.49, rgb(251, 211, 137)), color-stop(0.5, rgb(249, 172, 29)), color-stop(1, rgb(249, 172, 29)) ); background-image: -o-linear-gradient(bottom, rgb(251, 211, 137) 0%, rgb(251, 211, 137) 49%, rgb(249, 172, 29) 50%, rgb(249, 172, 29) 100%); background-image: -moz-linear-gradient(bottom, rgb(251, 211, 137) 0%, rgb(251, 211, 137) 49%, rgb(249, 172, 29) 50%, rgb(249, 172, 29) 100%); background-image: -webkit-linear-gradient(bottom, rgb(251, 211, 137) 0%, rgb(251, 211, 137) 49%, rgb(249, 172, 29) 50%, rgb(249, 172, 29) 100%); background-image: -ms-linear-gradient(bottom, rgb(251, 211, 137) 0%, rgb(251, 211, 137) 49%, rgb(249, 172, 29) 50%, rgb(249, 172, 29) 100%); background-image: linear-gradient(to bottom, rgb(251, 211, 137) 0%, rgb(251, 211, 137) 49%, rgb(249, 172, 29) 50%, rgb(249, 172, 29) 100%); } .nav-gradient { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(255, 232, 167)), color-stop(1, rgb(244, 209, 126)) ); background-image: -o-linear-gradient(bottom, rgb(255, 232, 167) 0%, rgb(244, 209, 126) 100%); background-image: -moz-linear-gradient(bottom, rgb(255, 232, 167) 0%, rgb(244, 209, 126) 100%); background-image: -webkit-linear-gradient(bottom, rgb(255, 232, 167) 0%, rgb(244, 209, 126) 100%); background-image: -ms-linear-gradient(bottom, rgb(255, 232, 167) 0%, rgb(244, 209, 126) 100%); background-image: linear-gradient(to bottom, rgb(255, 232, 167) 0%, rgb(244, 209, 126) 100%); } .left-menu-bg { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(240, 191, 113)), color-stop(1, rgb(187, 137, 56)) ); background-image: -o-linear-gradient(bottom, rgb(240, 191, 113) 0%, rgb(187, 137, 56) 100%); background-image: -moz-linear-gradient(bottom, rgb(240, 191, 113) 0%, rgb(187, 137, 56) 100%); background-image: -webkit-linear-gradient(bottom, rgb(240, 191, 113) 0%, rgb(187, 137, 56) 100%); background-image: -ms-linear-gradient(bottom, rgb(240, 191, 113) 0%, rgb(187, 137, 56) 100%); background-image: linear-gradient(to bottom, rgb(240, 191, 113) 0%, rgb(187, 137, 56) 100%); } /*Gradients*/ /*Components*/ .clearfix { &:after { display: block; content: ""; clear: both; } } .placeholder { &::-webkit-input-placeholder { opacity: 1; filter: alpha(opacity=100); } &:-moz-placeholder { opacity: 1; filter: alpha(opacity=100); } &::-moz-placeholder { opacity: 1; filter: alpha(opacity=100); } &:-ms-input-placeholder { opacity: 1; filter: alpha(opacity=100); } &:focus::-webkit-input-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } &:focus:-moz-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } &:focus::-moz-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } &:focus:-ms-input-placeholder { color: transparent; opacity: 0; filter: alpha(opacity=0); } } .box-shadow(@x:0, @y:0, @z:0, @color:rgba(0, 0, 0, 0)) { box-shadow: @x @y @z @color; -moz-box-shadow: @x @y @z @color; -webkit-box-shadow: @x @y @z @color; } .box-shadow-inset(@x:0, @y:0, @z:0, @color:rgba(0, 0, 0, 0)) { box-shadow: inset @x @y @z @color; -moz-box-shadow: inset @x @y @z @color; -webkit-box-shadow: inset @x @y @z @color; } .transition(@for:all, @speed:0.15s, @animation:linear, @timeout:0s) { transition: @for @speed @animation @timeout; -moz-transition: @for @speed @animation @timeout; -webkit-transition: @for @speed @animation @timeout; } .br(@r:0px) { border-radius: @r; -moz-border-radius: @r; -webkit-border-radius: @r; } .button-styles { .yellow-gradient; border: 1px solid #976607; .br(5px); .box-shadow(0, 4px, 0, #815817); color: #6c4904; .gotic-font; } /*Components*/ /*Animation*/ @keyframes slider_arrow_left { 0% {background-position: 10px 0px;} 25% {background-position: 0px 0px;} 50% {background-position: 10px 0px;} 75% {background-position: 0px 0px;} 100% {background-position: 10px 0px;} } @-webkit-keyframes slider_arrow_left { 0% {background-position: 10px 0px;} 25% {background-position: 0px 0px;} 50% {background-position: 10px 0px;} 75% {background-position: 0px 0px;} 100% {background-position: 10px 0px;} } @keyframes slider_arrow_right { 0% {background-position: -44px 0px;} 25% {background-position: -34px 0px;} 50% {background-position: -44px 0px;} 75% {background-position: -34px 0px;} 100% {background-position: -44px 0px;} } @-webkit-keyframes slider_arrow_right { 0% {background-position: -44px 0px;} 25% {background-position: -34px 0px;} 50% {background-position: -44px 0px;} 75% {background-position: -34px 0px;} 100% {background-position: -44px 0px;} } @keyframes shake_icon { 0% {transform:rotate(5deg);} 20% {transform:rotate(-5deg);} 40% {transform:rotate(5deg);} 60% {transform:rotate(-5deg);} 80% {transform:rotate(5deg);} 100% {transform:rotate(-5deg);} } @-webkit-keyframes shake_icon { 0% {transform:rotate(5deg);} 20% {transform:rotate(-5deg);} 40% {transform:rotate(5deg);} 60% {transform:rotate(-5deg);} 80% {transform:rotate(5deg);} 100% {transform:rotate(-5deg);} } @keyframes callback_animate { 0% { opacity: 0.1; transform: rotate(0deg) scale(0.5) skew(0deg); } 30% { opacity: 0.5; transform: rotate(0deg) scale(0.7) skew(0deg); } 100% { opacity: 0.6; transform: rotate(0deg) scale(1) skew(0deg); } } @-webkit-keyframes callback_animate { 0% { opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5) skew(0deg); } 30% { opacity: 0.5; -webkit-transform: rotate(0deg) scale(0.7) skew(0deg); } 100% { opacity: 0.6; -webkit-transform: rotate(0deg) scale(1) skew(0deg); } } @keyframes cbh-circle-img-anim { 0%{transform:rotate(0deg) scale(1) skew(1deg)} 10%{transform:rotate(-25deg) scale(1) skew(1deg)} 20%{transform:rotate(25deg) scale(1) skew(1deg)} 30%{transform:rotate(-25deg) scale(1) skew(1deg)} 40%{transform:rotate(25deg) scale(1) skew(1deg)} 50%{transform:rotate(0deg) scale(1) skew(1deg)} 100%{transform:rotate(0deg) scale(1) skew(1deg)} } @-webkit-keyframes cbh-circle-img-anim { 0%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)} 10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)} 20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)} 30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)} 40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)} 50%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)} 100%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)} } @keyframes cbh-circle-fill-anim { 0%{transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} 50%{transform:rotate(0deg) scale(1) skew(1deg);opacity:0.2} 100%{transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} } @-webkit-keyframes cbh-circle-fill-anim { 0%{-webkit-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} 50%{-webkit-transform:rotate(0deg) scale(1) skew(1deg);opacity:0.2} 100%{-webkit-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:0.2} } @keyframes cbh-circle-anim { 0%{transform:rotate(0deg) scale(0.5) skew(1deg);opacity:0.1;} 30%{transform:rotate(0deg) scale(.7) skew(1deg);opacity:0.5;} 100%{transform:rotate(0deg) scale(1) skew(1deg);opacity:0.6;} } @-webkit-keyframes cbh-circle-anim { 0%{-webkit-transform:rotate(0deg) scale(0.5) skew(1deg);opacity:0.1;} 30%{-webkit-transform:rotate(0deg) scale(.7) skew(1deg);opacity:0.5;} 100%{-webkit-transform:rotate(0deg) scale(1) skew(1deg);opacity:0.6;} } /*Animation*/ /*Fonts*/ @font-face { font-family: '943658'; src: url('../fonts/CenturyGothic/943658.eot'); src: url('../fonts/CenturyGothic/943658.eot') format('embedded-opentype'), url('../fonts/CenturyGothic/943658.woff2') format('woff2'), url('../fonts/CenturyGothic/943658.woff') format('woff'), url('../fonts/CenturyGothic/943658.ttf') format('truetype'), url('../fonts/CenturyGothic/943658.svg#943658') format('svg'); } @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); } .gotic-font { font-family: '943658'; } .icon-font { font-family: 'Glyphicons Halflings'; } /*Fonts*/ body { background-color: #fff7e1; .gotic-font; color: #000; line-height: 1.3; font-size: 16px; .wrapper { .section-wrap { width: 1200px; margin: 0 auto; } header { background: url('../images/head_bg.jpg') repeat; width: 100%; height: 180px; .logo { background: url('../images/logo.png') no-repeat; display: block; width: 359px; height: 147px; margin: 18px 0 0 32px; float: left; } .order-block { float: left; margin: 20px 0 0 50px; padding: 0 0 0 55px; position: relative; label { font-size: 20px; color: #e9b61d; display: block; position: relative; margin: 0 0 10px; &:before { background: url('../images/header-icons.png') no-repeat; content: ""; display: block; height: 52px; left: -55px; position: absolute; top: 0; width: 44px; } } p { font-size: 22px; color: #fefefe; } a { display: block; position: relative; margin: 20px 0 0 0; font-size: 17px; color: #fefefe; text-decoration: underline; &:hover { text-decoration: none; } &:before { background: url('../images/header-icons.png') no-repeat 0 -100px; content: ""; display: block; height: 52px; left: -55px; position: absolute; top: 0; width: 44px; } } } .right-side { float: right; width: 360px; margin: 18px 0 0 0; label { font-size: 22px; color: #e9b61d; margin: 0 0 8px; display: block; } p { font-size: 30px; color: #FFF; font-weight: bold; } a { margin: 20px 0 0 0; .button-styles; display: block; width: 330px; height: 60px; box-sizing: border-box; text-align: center; line-height: 50px; text-decoration: none; font-size: 27px; font-weight: bold; } } } /*Header*/ /*Nav*/ nav.main-navigation { .nav-gradient; border-bottom: 2px solid #fff; border-top: 1px solid #fff; box-sizing: border-box; height: 52px; position: absolute; width: 100%; z-index: 9999; .transition(all, 0.15s, linear, 0s); &.fixed { position: fixed; top: 0; } .nav-wrap { display: table; .responsive-title { display: none; } ul.menu { box-sizing: border-box; display: table; list-style: outside none none; margin: 0; padding: 0 76px; text-align: center; width: 100%; >li { display: table-cell; position: relative; >a { display: block; line-height: 49px; font-size: 20px; color: #8d7745; font-weight: bold; position: relative; .transition(all, 0.15s, linear, 0s); text-decoration: none; } >ul.sub-menu { z-index: 999; display: none; position: absolute; top: 51px; width: 100%; left: 0; background: rgba(251, 237, 197, 0.9); border: 1px solid #8d7745; box-sizing: border-box; >li { display: block; a { font-size: 13px; color: #73623a; text-decoration: none; text-align: center; display: block; line-height: 25px; margin: 0 0 1px; .transition(all, 0.15s, linear, 0s); position: relative; &:after { background: url('../images/sub-menu-separator.png') no-repeat center center; content: ""; width: 100%; height: 1px; bottom: -1px; left: 0; position: absolute; } } &:hover, &.current-menu-item { a { background-color: #faffc1; } } &:last-child { a { &:after { display: none; } } } } } &:after { background: url('../images/menu-separator.png') no-repeat center center; content: ""; position: absolute; display: block; width: 1px; height: 49px; top: 0; right: 0; } &:last-child:after { display: none; } &:hover, &.current-menu-item, &.current-menu-parent { >a { .box-shadow-inset(0, 0, 8px, rgba(0, 0, 0, 0.3)); &:after { content: ""; bottom: -2px; height: 2px; width: 100%; position: absolute; left: 0; background-color: #8d7745; } } } &:hover { >ul.sub-menu { display: block; } } &.responsive-menu-item { display: none; } } } } } /*Nav*/ /*Slider*/ #top_slider { margin: 52px auto 0; height: auto; overflow: hidden; position: relative; .carousel-inner { position: relative; width: 100%; overflow: hidden; .item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; transition: .6s ease-in-out left; img, a > img { line-height: 1; display: block; max-width: 100%; height: auto; } &.active { left: 0; } &.active, &.next, &.prev { display: block; } &.next, &.prev { position: absolute; top: 0; width: 100%; } &.next { left: 100%; } &.prev { left: -100%; } &.next.left, &.prev.right { left: 0; } &.active.left { left: -100%; } &.active.right { left: 100%; } } } .carousel-indicators { position: absolute; z-index: 999; bottom: 20px; right: 50px; li { cursor: pointer; background-color: rgba(255, 255, 255, 0.5); width: 30px; height: 30px; margin: 0 6px; float: left; .transition(all, 0.15s, linear, 0s); display: block; &.active { background-color: rgba(255, 255, 255, 0.8); } } } .carousel-control { background: url('../images/slider-arrows.png') no-repeat; display: block; height: 56px; outline: medium none; margin: -28px 0 0 0; position: absolute; top: 50%; width: 34px; z-index: 999; &.left { left: 0; background-position: 10px 0; padding: 0 0 0 10px; &:hover { animation: slider_arrow_left 0.5s linear; -webkit-animation: slider_arrow_left 0.5s linear; } } &.right { right: 0; padding: 0 10px 0 0; background-position: -44px 0; &:hover { animation: slider_arrow_right 0.5s linear; -webkit-animation: slider_arrow_right 0.5s linear; } } } } /*Slider*/ /*Homepage rooms*/ .homepagerooms { background: url('../images/rooms_bg.jpg') repeat; width: 100%; padding: 10px 0; border-bottom: 1px solid #dbb26b; .clearfix; .room { overflow: hidden; float: left; margin: 0 10px; width: 280px; position: relative; box-sizing: border-box; border: 1px solid #dbb26b; .box-shadow(0, 4px, 5px, rgba(0, 0, 0, 0.6)); >img { display: block; height: auto; margin: 0 auto; width: 100%; } .room_title { left: 0; position: absolute; text-align: center; top: 0; width: 100%; z-index: 1; span { display: inline-block; color: #fefefe; font-size: 16px; font-weight: bold; line-height: 26px; padding: 0 18px; border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; background-color: #e49b26; .box-shadow-inset(0, 0, 5px, rgba(0, 0, 0, 0.5)); margin: 0 auto; } } .room_excerpt { position: absolute; bottom: -100%; left: 0; z-index: 2; .transition(bottom, 0.15s, linear, 0s); font-size: 11px; font-weight: bold; color: #52370b; padding: 2px; box-sizing: border-box; border: 2px solid rgba(219, 178, 107, 0.8); background-color: rgba(255, 231, 167, 0.8); .room_more { color: #52370b; float: right; font-size: 14px; margin: 5px; } } &:hover { .room_excerpt { bottom: 0; } } } } /*Homepage rooms*/ /*Container*/ section.container { .clearfix; padding: 95px 10px 20px; .homepage-container { padding: 20px 10px!important; } .responsive-bottom-form { display: none; } /*Sidebar*/ .sidebar { float: left; width: 380px; .widget { margin: 0 0 22px; /*widget title*/ .widget-title { background: url('../images/widget-title.jpg') repeat-y center top; width: 100%; position: relative; &:before { background: url('../images/widget-title-arrow.png') no-repeat center center; bottom: -11px; content: ""; display: block; height: 12px; left: 0; position: absolute; width: 100%; } label { display: block; font-size: 30px; font-weight: bold; color: #FFF; margin: 0 0 5px; } span { display: block; font-size: 25px; color: #FFF; } } /*widget title*/ /*widget-menu*/ &.widget-menu { ul.menu { margin: 0; padding: 0; list-style: none; >li { margin: 0 0 4px; >a { .left-menu-bg; height: auto; border: 2px solid #dbb475; width: 100%; box-sizing: border-box; padding: 0 25px; font-size: 26px; display: block; color: #623301; text-decoration: none; line-height: 38px; position: relative; &:after { background: url('../images/left-menu-arrow.png') no-repeat; display: block; position: absolute; content: ""; top: 0; bottom:0; margin:auto; right: 0; width: 30px; height: 43px; } } &:hover, &.current-menu-item { >a { background: #faffc1; } >ul.sub-menu { display: block; } } &.current-menu-item.menu-item-has-children { >a { background: #faffc1; &:after { transform: rotate(90deg); -webkit-transform: rotate(90deg); right: 2px; } } } >ul.sub-menu { display: none; margin: 0 5px; padding: 0 0 5px; background: #faffc1; border-left: 2px solid #dbb475; border-right: 2px solid #dbb475; border-bottom: 2px solid #dbb475; li { a { padding: 0 25px; font-size: 20px; color: #623301; text-decoration: none; line-height: 26px; &:hover { text-decoration: underline; } } } } } } } /*widget-menu*/ &.order_widget { background: url('../images/order-widget-bg.png') no-repeat; background-size: 100% 100%; width: 100%; box-sizing: border-box; padding: 1px; padding-bottom: 0; .widget-title { height: 95px; box-sizing: border-box; padding: 15px 0 10px; text-align: center; &:after { background: url('../images/order-widget-icon.png') no-repeat; content: ""; display: block; height: 36px; position: absolute; right: 35px; top: 29px; width: 26px; } } .widget-content { padding: 45px 15px 15px; .wpcf7-form { p { .clearfix; margin: 0 0 25px; input[type="text"], input[type="tel"], input[type="email"] { .placeholder; .gotic-font; font-size: 18px; color: #b8b8b8; background-color: #f8f0da; background-repeat: no-repeat; background-position: left center; border: 1px solid rgba(141, 141, 141, 0.3); .br(5px); .box-shadow-inset(0, 0, 7px, rgba(0, 0, 0, 0.6)); box-sizing: border-box; height: 38px; padding: 0 0 0 51px; width: 100%; &.name-input { background-image: url('../images/input-name.png'); } &.tel-input { background-image: url('../images/input-phone.png'); } &.date-input { background-image: url('../images/input-date.png'); } &.mail-input { background-image: url('../images/input-mail.png'); } &.wpcf7-not-valid { border-color: #f00; } } &.descr { font-size: 14px; color: #FFF; margin: 0 0 10px; } span.wpcf7-not-valid-tip { bottom: -24px; color: #f00; display: block; font-size: 14px; position: absolute; } } div.left { float: left; width: 170px; margin: 0 0 18px; } div.right { float: right; width: 170px; margin: 0 0 18px; } div.room { margin-bottom:25px; label { display: block; font-size: 22px; color: #FFF; margin: 0 0 5px; } .wpcf7-form-control-wrap { display: block; position: relative; width: 100%; span.select { .placeholder; .gotic-font; display: block; font-size: 18px; color: #b8b8b8; border: 1px solid rgba(141, 141, 141, 0.3); background-color: #f8f0da; .br(5px); .box-shadow-inset(0, 0, 7px, rgba(0, 0, 0, 0.6)); box-sizing: border-box; height: 38px; line-height: 36px; padding: 0 0 0 10px; width: 100%; position: relative; z-index: 1; &:after { position: absolute; top: 0; right: 0; z-index: 1; background: url('../images/select.png') no-repeat right center; content: ""; width: 34px; height: 36px; } } select { height: 38px; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; cursor: pointer; } } } div.left, div.right { label { display: block; font-size: 22px; color: #FFF; margin: 0 0 5px; } .wpcf7-form-control-wrap { display: block; position: relative; width: 100%; span.select { .placeholder; .gotic-font; display: block; font-size: 18px; color: #b8b8b8; border: 1px solid rgba(141, 141, 141, 0.3); background-color: #f8f0da; .br(5px); .box-shadow-inset(0, 0, 7px, rgba(0, 0, 0, 0.6)); box-sizing: border-box; height: 38px; line-height: 36px; padding: 0 0 0 10px; width: 100%; position: relative; z-index: 1; &:after { position: absolute; top: 0; right: 0; z-index: 1; background: url('../images/select.png') no-repeat right center; content: ""; width: 34px; height: 36px; } } select { height: 38px; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; cursor: pointer; } } } .wpcf7-submit { .button-styles; cursor: pointer; font-size: 25px; font-weight: bold; height: 68px; width: 100%; } .wpcf7-response-output { background: #fff none repeat scroll 0 0; font-size: 18px; margin: -20px 0 0; position: relative; text-align: center; z-index: 9; margin-bottom: 10px; } } } }/*Order widget*/ &.widget-reviews { background: url('../images/reviews-widget-bg.png') no-repeat; width: 100%; height: 546px; padding: 1px; position: relative; .widget-title { text-align: center; height: 75px; &:after { background: url('../images/reviews-icon.png') no-repeat; position: absolute; top: 18px; right: 50px; content: ""; display: block; width: 44px; height: 40px; } label { line-height: 75px; } } .widget-content { padding: 30px 15px 15px; .review { margin: 0 0 15px; padding: 0 0 16px; &:first-child { background: url('../images/reviews-widget-separator.png') no-repeat center bottom; } .review-head { .clearfix; margin: 0 0 5px; .rh__left { float: left; .review-author { font-size: 18px; color: #8d7745; margin: 0 0 5px; } } .review-date { font-size: 18px; color: #8d7745; float: right; } } .review-content { font-size: 15px; color: #8d7745; background-color: #fff7e1; border: 1px solid #d8c9a3; .br(5px); padding: 5px; margin: 0 0 10px; } .review-respond { font-size: 18px; color: #8d7745; } } .all-reviews { .button-styles; line-height: 43px; text-align: center; text-decoration: none; display: block; font-size: 25px; font-weight: bold; } } }/*widget-reviews*/ } } /*Sidebar*/ /*Content*/ .content { position: relative; float: left; margin: 0 0 0 20px; width: 780px; /*Static settings*/ h1 { .gotic-font; font-size: 24px; font-weight: bold; line-height: 50px; color: #52370b; padding: 0 18px; display: block; .clearfix; background-color: #fbedc5; margin: 0 0 10px; } h2, h3, h4, h5 { font-size: 20px; color: #52370b; font-weight: bold; .gotic-font; margin: 0 0 10px; } h4, h5 { font-size: 18px; } p { line-height: 1.4; margin: 0 0 15px; } a { color: #000; text-decoration: underline; outline: none; &:hover { text-decoration: none; } &.order_content_button { .button-styles; display: inline-block; padding: 5px 15px; text-decoration: none; } } img, a img { border: 1px solid #dbb26b; box-sizing: border-box; display: inline-block; } .alignleft { float: left; margin: 0 15px 15px 0; } .alignright { float: right; margin: 0 0 15px 15px; } .aligncenter { display: block; margin: 0 auto 15px; } ul, ol { margin: 0 0 15px; padding: 0; list-style: disc inside; line-height: 1.4; } strong { font-weight: bold; } table { text-align: center; border: none; margin: 0 0 15px; width: 100%; thead { tr { td { font-size: 14px; color: #FFF; background-color: #e5b422; } } } tbody { tr { td { } } } tr { td { font-size: 18px; color: #52370b; text-align: center; padding: 5px; border: 1px solid #8d7745; vertical-align: middle; } } } /*Static settings*/ /*Bread crumbs*/ .bread_crumb { height: 50px; line-height: 50px; list-style: outside none none; margin: 0; padding: 0; position: absolute; top: -50px; li { color: #52370b; float: left; font-size: 14px; padding: 0 17px 0 0; position: relative; &:after { content: ">"; float: left; position: absolute; right: 3px; top: 1px; } &.current { font-weight: bold; &:after { display: none; } } a { color: #52370b; } } } /*Bread crumbs*/ .content-wrapper { padding: 15px 0; &.colored_cw { padding: 15px 20px; background-color: #f9e097; } .cw__responsive { display: none; } /*Страница бронирования*/ .wpcf7 { width: 350px; .wpcf7-form { p { .clearfix; margin: 0 0 25px; input[type="text"], input[type="tel"], input[type="email"] { .placeholder; .gotic-font; font-size: 18px; color: #b8b8b8; background-color: #f8f0da; background-repeat: no-repeat; background-position: left center; border: 1px solid rgba(141, 141, 141, 0.3); .br(5px); .box-shadow-inset(0, 0, 7px, rgba(0, 0, 0, 0.6)); box-sizing: border-box; height: 38px; padding: 0 0 0 51px; width: 100%; &.name-input { background-image: url('../images/input-name.png'); } &.tel-input { background-image: url('../images/input-phone.png'); } &.date-input { background-image: url('../images/input-date.png'); } &.mail-input { background-image: url('../images/input-mail.png'); } &.wpcf7-not-valid { border-color: #f00; } } &.descr { font-size: 14px; color: #5a5959; margin: 0 0 10px; } span.wpcf7-not-valid-tip { bottom: -24px; color: #f00; display: block; font-size: 14px; position: absolute; } } div.left { float: left; width: 170px; margin: 0 0 18px; } div.right { float: right; width: 170px; margin: 0 0 18px; } div.room { margin-bottom:25px; label { display: block; font-size: 22px; color: #5a5959; margin: 0 0 5px; } .wpcf7-form-control-wrap { display: block; position: relative; width: 100%; span.select { .placeholder; .gotic-font; display: block; font-size: 18px; color: #b8b8b8; border: 1px solid rgba(141, 141, 141, 0.3); background-color: #f8f0da; .br(5px); .box-shadow-inset(0, 0, 7px, rgba(0, 0, 0, 0.6)); box-sizing: border-box; height: 38px; line-height: 36px; padding: 0 0 0 10px; width: 100%; position: relative; z-index: 1; &:after { position: absolute; top: 0; right: 0; z-index: 1; background: url('../images/select.png') no-repeat right center; content: ""; width: 34px; height: 36px; } } select { height: 38px; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; cursor: pointer; } } } div.left, div.right { label { display: block; font-size: 22px; color: #5a5959; margin: 0 0 5px; } .wpcf7-form-control-wrap { display: block; position: relative; width: 100%; span.select { .placeholder; .gotic-font; display: block; font-size: 18px; color: #b8b8b8; border: 1px solid rgba(141, 141, 141, 0.3); background-color: #f8f0da; .br(5px); .box-shadow-inset(0, 0, 7px, rgba(0, 0, 0, 0.6)); box-sizing: border-box; height: 38px; line-height: 36px; padding: 0 0 0 10px; width: 100%; position: relative; z-index: 1; &:after { position: absolute; top: 0; right: 0; z-index: 1; background: url('../images/select.png') no-repeat right center; content: ""; width: 34px; height: 36px; } } select { height: 38px; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; cursor: pointer; } } } .wpcf7-submit { .button-styles; cursor: pointer; font-size: 25px; font-weight: bold; height: 68px; width: 100%; } .wpcf7-response-output { background: #fff none repeat scroll 0 0; font-size: 18px; margin: -40px 0 0; position: relative; text-align: center; z-index: 9; } } } /*Страница бронирования*/ /*Страница отзывов*/ .reviews-list { .review { background: url('../images/reviews-separator.png') no-repeat center bottom; margin: 0 0 25px; padding: 0 0 30px; &:last-child { background: none; padding: 0; } .review-head { .clearfix; margin: 0 0 5px; .review-title { float: left; .review-author { font-size: 18px; color: #8d7745; margin: 0 0 5px; } .review-rating { } } .review-date { font-size: 18px; color: #8d7745; float: right; } } .review-body { font-size: 15px; color: #8d7745; padding: 5px 10px 0; .br(5px); border: 1px solid #ddd0b2; background-color: #ffffff; } } } .navigation { text-align: center; margin: 0 0 50px; a { color: #8d7745; margin: 0 5px; font-size: 20px; text-decoration: none; display: inline-block; &:hover { text-decoration: underline; } &.prev, &.next { background: url('../images/nav.png') no-repeat; width: 22px; height: 22px; color: transparent; text-decoration: none !important; } &.next { background-position: -23px 0; } } span.current { background-color: #f9e5ae; border: 1px solid #ccc6b4; .br(5px); color: #8d7745; display: inline-block; font-size: 20px; padding: 0 5px 1px; } } .comment-respond { margin: 20px 0 0; #reply-title { display: none; } .comment-form { p, div { .clearfix; height: auto; margin: 0 0 10px; &.comment-notes { display: none; } label { font-size: 20px; color: #52370b; margin: 0 0 5px; display: block; } &.comment-form-author, &.comment-form-email { input { .gotic-font; .placeholder; color: #b8b8b8; font-size: 16px; border: 1px solid rgba(141, 141, 141, 0.3); .box-shadow-inset(0, 0, 4px, rgba(0, 0, 0, 0.5)); width: 350px; box-sizing: border-box; height: 30px; padding: 0 10px; .br(5px); } } &.comment-form-comment { textarea { .gotic-font; .placeholder; color: #b8b8b8; font-size: 16px; border: 1px solid rgba(141, 141, 141, 0.3); .box-shadow-inset(0, 0, 4px, rgba(0, 0, 0, 0.5)); width: 70%; box-sizing: border-box; height: 100px; padding: 5px 10px; .br(5px); } } .captcha_img { .clearfix; margin: 0 0 5px; } #captcha_code { color: #b8b8b8; font-size: 16px; border: 1px solid rgba(141, 141, 141, 0.3); .box-shadow-inset(0, 0, 4px, rgba(0, 0, 0, 0.5)); width: 175px; box-sizing: border-box; height: 30px; padding: 0 10px; .br(5px); } } input.submit { .button-styles; width: 350px; height: 44px; cursor: pointer; font-size: 25px; font-weight: bold; } } } /*Страница отзывов*/ } } /*Content*/ } /*Container*/ /*Footer*/ footer { background: url('../images/head_bg.jpg') repeat; overflow: hidden; position: relative; height: 457px; width: 100%; .gotic-font; .main-footer { >ymaps { position: absolute; z-index: 1; top: 7px; left: 0; } .section-wrap { position: relative; z-index: 9; .footer-logo { background: url('../images/footer-logo.png') no-repeat; display: block; position: relative; z-index: 999; margin: 20px 0 0 40px; width: 92px; height: 143px; float: left; } .contacts { background: url('../images/head_bg.jpg') repeat; width: 380px; height: 388px; margin: 7px 10px 0 0; padding: 0 20px; box-sizing: border-box; float: right; >div { margin: 0 0 30px; label { font-size: 20px; color: #e9b61d; margin: 0 0 2px; line-height: 1.2; display: block; } p { line-height: 1.2; font-size: 22px; color: #fefefe; } span { font-size: 30px; color: #FFF; font-weight: bold; } &.socials { margin: -15px 0 0 !important; .clearfix; a { background: url('../images/socials.png') no-repeat; display: block; float: left; margin: 0 5px 0 0; height: 40px; width: 40px; &:hover { animation: shake_icon 0.25s linear; -webkit-animation: shake_icon 0.25s linear; } &.fb { background-position: 0 0; } &.vk { background-position: -44px 0; } &.tw { background-position: -88px 0; } &.g { background-position: -132px 0; } } } } } } .footer-menu { position: absolute; width: 100%; z-index: 999; bottom: 0; left: 0; height: 50px; background: url('../images/head_bg.jpg') repeat; .section-wrap { .menu { display: table; margin: 0; padding: 0 90px; box-sizing: border-box; list-style: none; width: 100%; text-align: center; li { display: table-cell; position: relative; &:after { background: url('../images/menu-separator.png') no-repeat; content: ""; display: block; position: absolute; width: 1px; height: 50px; top: 0; right: 0; } &:last-child:after { display: none; } a { color: #fefefe; font-size: 20px; font-weight: bold; line-height: 48px; text-decoration: none; } &:hover, &.current-menu-item { a { text-decoration: underline; } } ul.sub-menu { display: none; } } } } } } .responsive-footer { display: none; } } /*Footer*/ } .to-top { position: fixed; z-index: 9999; bottom: 0; left: 15px; background: url('../images/to-top.png') no-repeat; display: none; width: 47px; height: 47px; border: none; cursor: pointer; &:hover { background-position: 0 -47px; } } .callback-fixed { bottom: 20px; cursor: pointer; float: none; height: 200px; min-width: initial; opacity: 0.5; position: fixed; right: 20px; transition: all 1s ease 0s; width: 200px; z-index: 10000; &:hover { .cf__radial1 { opacity: 1 !important; } .cf__radial2 { opacity: 1 !important; } .cf__logo { img { animation: cbh-circle-img-anim 1s infinite ease-in-out !important; -webkit-animation: cbh-circle-img-anim 1s infinite ease-in-out !important; } } } div { box-sizing: content-box; min-width: inherit; transform-origin: initial; } .cf__radial1 { animation: cbh-circle-anim 2.2s infinite ease-in-out !important; -webkit-animation: cbh-circle-anim 2.2s infinite ease-in-out !important; background-color: transparent; border: 1px solid #4B8F36; border-radius: 100%; display: block; float: none; height: 160px; left: 19px; opacity: 1; position: absolute; top: 19px; transition: all 0.5s ease 0s; width: 160px; } .cf__radial2 { animation: cbh-circle-fill-anim 2.2s infinite ease-in-out !important; -webkit-animation: cbh-circle-fill-anim 2.2s infinite ease-in-out !important; background-color: #4B8F36; border: 2px solid transparent; border-radius: 100%; display: block; float: none; height: 100px; left: 48px; opacity: 0.1; position: absolute; top: 48px; transition: all 0.5s ease 0s; width: 100px; } .cf__logo { border-radius: 100%; display: block; float: none; height: 55px; left: 72.5px; position: absolute; top: 72.5px; width: 55px; img { height: auto; max-width: 100%; width: 55px; } } } .callback-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99998; .cp__wrap { position: fixed; z-index: 99999; background-color: #FFF; padding: 30px 40px 20px; width: 460px; .br(10px); .close-popup { background: none repeat scroll 0 0 transparent; border: medium none; color: #000; font-weight: bold; padding: 0; position: absolute; right: 15px; top: 10px; cursor: pointer; } .cpw__title { font-family: 'Open Sans', sans-serif; font-weight: 100; font-size: 24px; color: #333; height: auto; line-height: 34px; text-align: left; position: relative; margin: 0 0 25px; &:before { background: url('../images/popup_arrow.png') no-repeat; content: ""; display: block; position: absolute; top: 18px; left: -25px; width: 17px; height: 50px; } } .cpw__content { p { &:after { display: block; clear: both; content: ""; } .callback-tel { display: block; float: left; width: 65%; input { width: 100%; box-sizing: border-box; padding: 0 10px; height: 40px; border: 1px solid #DDD; .br(5px); background: transparent; .placeholder; } .wpcf7-not-valid-tip { color: #f00; display: block; font-size: 13px; position: absolute; text-align: center; top: 45px; width: 100%; } } .wpcf7-submit { font-family: 'Open Sans', sans-serif; float: right; width: 30%; font-size: 16px; border: none; .br(5px); background-color: #333; color: #FFF; height: 40px; cursor: pointer; min-width: 85px; .transition(background-color, 0.15s, linear, 0s); &:hover { background-color: #f9ac1d; } } } .cpw__description { font-family: 'Open Sans', sans-serif; font-weight: 100; font-size: 14px; margin: 15px 0 0; line-height: 1.5; color: #333; } } } } /*Callback fixed*/ }