@mixin Shadow2 { box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.35); } .btn_up { //margin-right: -24px; margin-right: -9px; z-index: 8; width: 48px; height: 48px; position: fixed; right: 0; bottom: 21px; background: $blue-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: $blue-color-hover; &:before { margin-top: -6px; } } &:active { background: $blue-color-active; @include Shadow; &:before { margin-top: -9px; } } &.visible { display: block !important; &:before { opacity: 1; } } } .btn_call_close { width: 46px; height: 46px; position: fixed; bottom: 0; left: 0; border-top-right-radius: 4px; background: $blue-color; z-index: 13; cursor: pointer; display: none; text-align: center; &:before { @include svgIcon; content: '\e90f'; color: #fff; line-height: 46px; font-size: 18px; } &.visible { display: block !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: 100%; height: 100%; display: table; } .call-mobile-td { display: table-cell; vertical-align: bottom; padding-bottom: 60px; padding-top: 15px; } .button-call-mob { height: 34px; background: #fff; border-radius: 4px; width: 300px; position: relative; text-align: center; margin: 0 auto; margin-top: 4px; &: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; text-align: center; 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; display: inline-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) { } @media (max-width: 992px) { .btn_up { margin-right: 16px; } } @media (max-width: 767px) { .btn_up { right: 15px !important; &.visible { display: none !important; } } }