.section-box-footer { background: $Main-bg; margin-top: 39px; } .section-box-footer-menu-wr { padding-top: 37px; padding-bottom: 38px; } .section-box-copyright { color: $color2; background: #fff; padding: 21px 0; font-size: 11px; } $footer-img-height:23; $footer-img-width:24; a.artweb-link { color: inherit; float: right; padding-right: 34px; position: relative; &:before { content: ''; position: absolute; width: $footer-img-width + px; height: $footer-img-height + px; right: 0; top: 50%; margin-top: -($footer-img-height/2) + px; background-image: url("../images/artweb-logo.png"); @include BgNoRepeat0; } } .phones-footer { margin-top: 1px; a { color: inherit !important; } p { width: 100%; float: left; font-size: 18px; font-weight: 700; margin-top: 6px; &:first-child {margin-top: 0} } span { margin-top: 7px; float: left; } } .menu-footer { margin-top: 29px; ul { width: 100%; float: left; li { list-style: none; margin-top: 1px; &:first-child {margin-top: 0;} a { color: $main-color; text-transform: uppercase; font-size: 11px; @include Transition(0.3); &:hover { font-size: 12px; } } } } } .seti-wrapper { p { width: 100%; float: left; margin-top: 20px; line-height: 15px; &.title_seti { font-size: 16px; font-weight: 700; } &:first-child {margin-top: 0} } } .seti-link { display: block; width: 31px; height: 31px; margin-top: 22px; margin-left: 15px; float: left; background-color: $MenuSepBg; @include Bradius(2px); @include BgNoRepeat50; &.fb { &:hover { background-color: #3b5998; } background-image: url("../images/ico-s/ico-s-1.png"); background-position: 80% 100%; } &.vk { &:hover { background-color: #4d75a3; } background-image: url("../images/ico-s/ico-s-2.png"); } &.tw { &:hover { background-color: #55acee; } background-image: url("../images/ico-s/ico-s-3.png"); } &.you { &:hover { background-color: #e72b29; } background-image: url("../images/ico-s/ico-s-6.png"); } &.gpluse { &:hover { background-color: #cf3d28; } background-image: url("../images/ico-s/ico-s-4.png"); } &:hover { @include Transition(0.4) } &:first-child {margin-left: 0} } .menu-search-block { margin-top: 28px; ul { width: 100%; float: left; column-count:2; li { list-style: none; width: 75%; float: left; padding-left: 12px; position: relative; margin-top: 6px; &:before { position: absolute; width: 6px; $height:6; height:$height + px; background: $MenuSepBg; @include Bradius(100%); left: 0; top: 50%; margin-top: -($height/2) + px; display: block; content: ''; } a { color: $main-color; line-height: 15px; } } } } .search-footer-wr { margin-top: 3px; form { overflow: hidden; position: relative; @include wfl; } input { margin-top: 0; $border-color:#efeeee; border-top: 1px solid $border-color; border-left: 1px solid $border-color; border-bottom: 0; border-right: 0; padding-right: 40px; } button { @extend .button-search; } } .popular-requests { margin-top: 8px; color: $color2; padding-left: 15px; p { float: left; margin-right: 6px; } span, a { display: block; float: left; border-bottom: 1px dashed $link-color; color: $link-color; margin-right: 10px; cursor: pointer; &:hover { border-bottom: 1px dashed $Main-bg; } &:active { color: $link-active; } &:first-child {} } a { text-decoration: none !important; } } .btn_up { z-index: 8; width: 48px; height: 48px; position: fixed; right: 0; bottom: 21px; background: $link-color; margin-right: -9px; @include Bradius(100%); cursor: pointer; overflow: hidden; @include Shadow2; &:before { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ''; background: url("../images/ico-all/arrow-up-big.png") 50% 50% no-repeat; @include Transition(0.3); opacity: 0; } &:hover { background: $link-active; &:before { margin-top: -6px; } } &:active { @include Shadow; &:before { margin-top: -9px; } } &.visible { display: block !important; &:before { opacity: 1; } } } .btn_call { $bg:$Menu-bg; $widHei:74; $pad:5; z-index: 9; width: $widHei + px; height: $widHei + px; position: fixed; right: 15px; bottom: 10px; cursor: pointer; padding: $pad + px $pad + px; &:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background: $bg; @include Opacity(0.3); @include Bradius(100%); animation-name: tocall1; -webkit-animation-name: tocall1; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } div { width: $widHei - ($pad*2) + px; height: $widHei - ($pad*2) + px; position: relative; z-index: 2; background: $bg; @include Transition(0.05); @include Bradius(100%); @include svgIcon; &:before { color: #fff; font-size: 24px; content: "\e9009"; display: block; text-align: center; line-height: $widHei - ($pad*2) + px; animation-name: tocall2; -webkit-animation-name: tocall2; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } } &:hover { } &:active { div { @include Scale(1.35); &:before { } } } &.close { z-index: 130; &:before { animation: none !important; } div { &:before { content: "\e9008"; animation: none !important; } } } } $call-mobile-width:300; .call-mobile-wr { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 12; overflow-y: scroll; &.open { display: block !important; } } .call-mobile { width: $call-mobile-width + px; position: absolute; left: 50%; margin-left: -($call-mobile-width / 2) + px; bottom: 60px; } .button-call-mob { height: 34px; background: #fff; border-radius: 4px; width: 300px; float: left; margin-top: 4px; position: relative; text-align: center; &:first-child { margin-top: 0; } } .call-contact, .call-sms { text-decoration: none; position: relative; color: inherit; line-height: 34px; &:before { width: 16px; height: 100%; position: absolute; top: 0; left: -22px; content: ''; } } .button-call_ { display: block; width: 100%; height: 100%; line-height: 34px; text-decoration: none; color: inherit; font-size: 13px; div { width: 30px; height: 100%; float: left; span { width: 30px; height: 100%; display: table-cell; vertical-align: middle; text-align: center; } } p { margin-left: 35px; float: left; display: block; } span { font-size: 18px; font-family: Helvetica; float: left; display: block; } } .call-sms:before { background: url(../images/ico-call/ico-36.png) 50% 50% no-repeat; } .call-contact:before { background: url(../images/ico-call/ico-37.png) 50% 50% no-repeat; } @keyframes tocall2 { 0% { transform:rotate(-8deg) } 50% { transform:rotate(8deg) } 100% { transform:rotate(-8deg) } } @-webkit-keyframes tocall2 { 0% { -webkit-transform:rotate(-8deg) } 50% { -webkit-transform:rotate(8deg) } 100% { -webkit-transform:rotate(-8deg) } } @-moz-keyframes tocall2 { 0% { -moz-transform:rotate(-8deg) } 50% { -moz-transform:rotate(8deg) } 100% { -moz-transform:rotate(-8deg) } } @keyframes tocall1 { 0% { transform:scale(0.7); @include Opacity(1); } 100% { transform:scale(1.30); @include Opacity(0); } } @-webkit-keyframes tocall1 { 0% { -webkit-transform:scale(0.7); @include Opacity(1); } 100% { -webkit-transform:scale(1.30); @include Opacity(0); } } @-moz-keyframes tocall1 { 0% { -moz-transform:scale(0.7); @include Opacity(1); } 100% { -moz-transform:scale(1.30); @include Opacity(0); } } @media (max-width: 1200px) { .seti-link {margin-left: 10px;} } @media (max-width: 992px) { .btn_up { margin-right: 16px; } .seti-link { margin-left: 0; margin-right: 15px; margin-top: 15px; } } @media (max-width: 970px) {} @media (max-width: 960px) { } @media (max-width: 940px) { } @media (max-width: 939px) { } @media (max-width: 920px) { } @media (max-width: 910px) { } @media (max-width: 903px) { a.artweb-link { $padding:6; padding-top: $padding + px; padding-bottom: $padding + px; } } @media (max-width: 900px) { } @media (max-width: 890px) { } @media (max-width: 896px) { } @media (max-width: 860px) { } @media (max-width: 850px) { } @media (max-width: 835px) { } @media (max-width: 800px) { } @media (max-width: 790px) { } @media (max-width: 770px) { } @media (max-width: 768px) { } @media (max-width: 767px) { .popular-requests { padding-left: 0; } .btn_call { display: block !important; } .btn_up { right: 15px !important; &.visible { display: none !important; } } a.artweb-link { float: left; padding-top: 0; padding-bottom: 0; &:before { background-size: $footer-img-height + px $footer-img-width + px; background-image: url("../images/artweb-logo-mob.png"); } } .phones-footer, .menu-footer { width: 50%; } .phones-footer { float: right; span { display: none; } p { text-align: right; } } .menu-footer { margin-top: 0; .hidden_copyright { font-size: 11px; color: $color2; margin-top: 16px; } } } @media (max-width: 749px) { } @media (max-width: 700px) { } @media (max-width: 600px) { } @media (max-width: 585px) { } @media (max-width: 555px) { } @media (max-width: 500px) { } @media (max-width: 480px) { } @media (max-width: 470px) { } @media (max-width: 460px) { } @media (max-width: 450px) { } @media (max-width: 436px) { } @media (max-width: 420px) { } @media (max-width: 400px) { } @media (max-width: 370px) { } @media (max-width: 350px) { } @media (max-width: 345px) { } @media (max-width: 340px) { .phones-footer { width: 48%; } .menu-footer { width: 52%; } } @media (max-width: 335px) { } @media (max-width: 327px) { .phones-footer { width: 46%; p { font-size: 16px; } } .menu-footer { width: 54%; } }