@media (max-width: 1200px) { /* от 960 до 1200 */ body { .wrapper { .section-wrap { width: 960px; } header { .order-block { display: none; } } nav.main-navigation { .nav-wrap { ul.menu { padding: 0; } } } .homepagerooms { .room { width: 230px; margin: 0 5px; } } section.container { .content { width: 560px; } } footer { .footer-menu { .section-wrap { .menu { padding: 0; } } } } } } } @media (max-width: 960px) { /* от 800 до 960 */ body { .wrapper { .section-wrap { width: 800px; } .homepagerooms { .room { width: 190px; margin: 0 5px; } } section.container { .content { width: 400px; } } } } } @media (max-width: 800px) { /* от 600 до 800 */ body { .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; } .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%); } .wrapper { .section-wrap { width: 100%; padding: 0 20px; box-sizing: border-box; } header { height: 140px; .logo { background-size: contain; height: 120px; margin: 9px 0 0; width: 295px; } .right-side { text-align: right; margin: 40px 0 0 0; max-width: 280px; label { font-size: 18px; } p { font-size: 35px; } a { display: none; } } } nav.main-navigation { position: relative !important; height: auto; border: none; .nav-wrap { padding: 0; .responsive-title { .nav-gradient; display: block; position: relative; text-align: center; line-height: 50px; font-size: 28px; color: #8d7745; font-weight: bold; cursor: pointer; &:after { background: url('../images/responsive-menu-icon.png') no-repeat; display: block; content: ""; position: absolute; top: 18px; right: 20px; width: 31px; height: 14px; } } ul.menu { position: relative; padding: 0; background-color: #edcd82; display: none; width: 100%; >li { display: block; &:after { display: none; } a { color: #77643a; line-height: 34px; &:before { background: url('../images/responsive-menu-separator.png') no-repeat center top; display: block; content: ""; width: 100%; height: 1px; position: absolute; top: 1px; } &:after { display: none !important; } } &:hover, &.current-menu-item, &.current-menu-parent, &.order-menu-item { a { background-color: #ffc85e; .box-shadow-inset(0, 0, 0, rgba(0, 0, 0, 0)); } } &.responsive-menu-item { display: block; } } } &.opened { ul.menu { display: block; } } } } .homepagerooms, #top_slider { display: none; } section.container { padding: 0 20px 20px !important; .sidebar { display: none; } .content { .clearfix; padding: 0; font-size: 18px; line-height: 1.2; width: 100%; float: none; margin: 0; h1 { background-color: transparent; padding: 10px 0; line-height: 30px; margin: 0; } p { >ymaps { width: 100% !important; } } table { display: block; overflow-x: scroll; } .bread_crumb { .clearfix; background-color: #fbedc6; position: relative; top: 0; left: -20px; width: 100%; height: auto; padding: 7px 20px; line-height: 16px; font-size: 14px; color: #a25e44; li { color: #a25e44; &.current { font-weight: normal; } a { color: #a25e44; text-decoration: underline; &:hover { text-decoration: none; } } } } .content-wrapper { .clearfix; .wpcf7 { width: 100%; .wpcf7-form { p { margin: 0 0 8px; label { font-size: 18px; color: #52370b; display: block; margin: 0 0 5px; } input[type="text"], input[type="email"], input[type="tel"] { background-color: #FFF; background-image: none !important; border: 1px solid #8d8d8d; padding: 0 10px; height: 35px; } } div.room, div.left, div.right { margin: 0 0 8px; label { font-size: 18px; color: #52370b; } .wpcf7-form-control-wrap { span.select { background-color: #FFF; border: 1px solid #8d8d8d; height: 35px; line-height: 33px; &:after { background: url('../images/responsive-select-arrow.png') no-repeat; height: 33px; width: 24px; } } select { height: 35px; } } } div.left, div.right { width: 49%; } .wpcf7-submit { height: 48px; } } } &.colored_cw { border: 1px solid #d9b790; padding: 10px; width: 100%; box-sizing: border-box; } .cw__main { display: none; } .cw__responsive { display: block; .response-room-item { .box-shadow(4px, 4px, 5px, rgba(82, 55, 11, 0.4)); float: left; width: 48%; margin: 0 1% 2%; border: 1px solid #f8a70b; box-sizing: border-box; a { text-decoration: none; color: #fefefe; .rri__title { font-weight: bold; background-color: #f8a70b; font-size: 20px; color: #fefefe; text-decoration: none; text-align: center; height: 30px; display: block; line-height: 28px; } .rri__image { display: block; width: 100%; height: auto; max-height: 150px; overflow: hidden; img { display: block; width: 100%; height: auto; } } } } } .comment-respond .comment-form p.comment-form-author input, .comment-respond .comment-form div.comment-form-author input, .comment-respond .comment-form p.comment-form-email input, .comment-respond .comment-form div.comment-form-email input { width: 100%; height: 35px; } .comment-respond .comment-form p.comment-form-comment textarea, .comment-respond .comment-form div.comment-form-comment textarea { width: 100%; } .comment-respond .comment-form input.submit { width: 100%; } } } .responsive-bottom-form { .clearfix; display: block; width: 100%; box-sizing: border-box; .rbf__title { background-color: #fce29e; text-align: center; position: relative; width: 100%; font-size: 28px; color: #52370b; line-height: 50px; span { display: inline-block; height: 50px; position: relative; &:after { background: url('../images/rbof-icon.png') no-repeat; display: block; content: ""; position: absolute; top: 10px; right: -30px; width: 21px; height: 29px; } } } .rbf__content { background-color: #f9eccc; border-bottom: 1px solid #8d7745; border-left: 1px solid #8d7745; border-right: 1px solid #8d7745; padding: 10px; width: 100%; box-sizing: border-box; .wpcf7 { p { margin: 0 0 10px; label { display: block; font-size: 18px; color: #8d7745; line-height: 1; margin: 0 0 5px; } input[type="text"], input[type="tel"], input[type="email"] { font-family: '943658'; .placeholder; .br(5px); background: #FFF; border: 1px solid #8d7745; height: 35px; width: 100%; padding: 0 10px; box-sizing: border-box; font-size: 16px; color: #999999; } .wpcf7-submit { font-family: '943658'; .br(5px); background: url('../images/responsive-submit-button-bg.png') repeat-x; cursor: pointer; font-size: 26px; color: #6c4904; text-align: center; font-weight: bold; border: 1px solid #8d7745; .box-shadow(0, 4px, 0, #815817); height: 50px; width: 100%; } } } } } } footer { height: auto; .main-footer { display: none; } .responsive-footer { .clearfix; padding: 5px 0; display: block; .rfc { text-align: center; line-height: 1.2; width: 50%; &.rfc-left { float: left; label { font-size: 17px; color: #e9b61d; } p { font-size: 30px; color: #fefefe; } } &.rfc-right { float: right; p { font-size: 16px; color: #e9b61d; span { color: #FFF; } } .social { margin: 25px auto 0; text-align: center; a { background: url('../images/socials-responsive.png') no-repeat; display: inline-block; height: 40px; width: 40px; &.vk { background-position: -44px 0; } &.facebook { background-position: 0 0; } &.twitter { background-position: -88px 0; } &.google { background-position: -132px 0; } } } } } } } } &.home { .wrapper { nav.main-navigation { background: none; border: none; height: auto; position: relative; .nav-wrap { display: block; .responsive-title { display: none; } ul.menu { position: relative; display: block; &:after { background: url('../images/responsive-menu-separator.png') no-repeat center top; content: ""; width: 100%; height: 1px; display: block; left: 0; bottom: 0; } li { a { font-size: 22px; color: #77643a; font-weight: bold; line-height: 43px; box-shadow: 0 0 6px rgba(0, 0, 0, 0) inset; -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0) inset; &:after { display: none !important; } &:before { background: url('../images/responsive-menu-separator.png') no-repeat center top; content: ""; width: 100%; height: 1px; display: block; left: 0; top: 0; } &:hover { background-color: #ffc85e; } } &:after { display: none !important; } &.order-menu-item { a { background-color: #ffc85e; } } ul.sub-menu { display: none !important; } } } } } section.container { .content { padding: 0; } } } } #sh_button, .to-top, .callback-fixed { display: none !important; } } } @media (max-width: 620px) { /* от 320 до 600 */ body { .wrapper { header { height: auto; .logo { float: none; padding: 10px 0; margin: 0 auto; background-position: 0 10px; } .right-side { float: none; margin: 0 auto; text-align: center; padding: 0 0 10px; } } } } } @media (max-width: 550px) { body { min-width: 320px; .wrapper { section.container .content .content-wrapper { .cw__responsive .response-room-item { float: none; margin: 0 auto 20px; width: 100%; } .wpcf7 .wpcf7-form div.left, .wpcf7 .wpcf7-form div.right { width: 100%; float: none !important; } } footer { .responsive-footer { .rfc { float: none !important; margin: 0 0 5px; width: 100%; } } } } } } @media (max-width: 500px) { }