.rs-contact-box {
text-align: left;
}
.rs-contact-box .address-item {
display: flex;
position: relative;
align-items: center;
margin-bottom: 30px;
}
.rs-contact-box .address-item:last-child {
margin-bottom: 0;
}
.rs-contact-box .address-item:last-child .address-icon:after {
display: none;
}
.rs-contact-box .address-item .address-icon {
display: inline-block;
position: relative;
height: 70px;
width: 70px;
line-height: 70px;
border-radius: 100%;
text-align: center;
}
.rs-contact-box .address-item .address-icon span {
z-index: 2;
position: relative;
}
.rs-contact-box .address-item .address-icon span:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 70px;
height: 70px;
background: #071230;
border-radius: 50%;
animation: pulse-border 1500ms ease-out infinite;
opacity: 0.1;
visibility: visible;
z-index: -1;
}
.rs-contact-box .address-item .address-icon span:hover {
border-color: rgba(255, 255, 255, 0.7);
}
.rs-contact-box .address-item .address-icon:after {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
transform: translateX(-10px) translateY(-10px);
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
opacity: 0;
visibility: hidden;
}
.rs-contact-box .address-item .address-icon i {
text-align: center;
border-radius: 100%;
font-size: 30px;
position: relative;
line-height: 70px;
z-index: 9;
width: 100%;
vertical-align: middle;
margin-left: 0;
height: auto;
z-index: 1;
}
.rs-contact-box .address-item .address-icon svg {
position: relative;
z-index: 1;
top: -1px;
}
.rs-contact-box .address-item .address-icon img {
transition: transform 0.3s;
}
.rs-contact-box .address-item .address-text .des,
.rs-contact-box .address-item .address-text .label {
display: block;
}
.rs-contact-box .address-item .address-text .contact-title {
margin-bottom: 1px;
font-weight: 500;
font-size: 20px;
margin-top: 6px;
}
.rs-contact-box .address-item .address-text .phone {
display: inline-block;
}
.rs-contact-box .address-item .address-text .phone a {
position: relative;
}
.rs-contact-box .address-item .address-text .phone a::after {
content: "";
position: absolute;
width: 0;
height: 2px;
background: #fff;
bottom: -2px;
left: auto;
right: 0;
transition: width 0.3s;
}
.rs-contact-box .address-item .address-text .phone a:hover::after {
width: 100%;
left: 0;
right: auto;
}
.rs-contact-box .address-item .address-text .email {
display: inline-block;
}
.rs-contact-box .address-item:hover .address-icon:after {
opacity: 1;
visibility: visible;
}
.rs-contact-box .address-item:hover .address-icon:before {
opacity: 1;
visibility: visible;
}
.rs-contact-box .address-item:hover .address-icon img, .rs-contact-box .address-item:hover .address-icon svg {
animation: vibrate 0.4s infinite;
}
.rs-contact-box .address-item.vertical {
display: block;
text-align: center;
}
.rs-contact-box .address-item.vertical .address-text span.label {
display: block;
font-weight: 500;
font-size: 20px;
margin-top: 15px;
}
.rs-contact-box .address-item.horizontal .address-icon {
margin-right: 20px;
}
.rs-contact-box.color_default .address-icon {
background: #e11631;
}
.rs-contact-box.color_default .address-icon i {
color: #ffffff;
}
.rs-contact-box.color_default .address-icon svg path {
fill: #ffffff;
}
.rs-contact-box.color_default .address-icon:after, .rs-contact-box.color_default .address-icon:before {
background: #e11631;
}
.rs-contact-box.color_default .address-text .label {
color: #656567;
}
.rs-contact-box.color_default .address-text a {
color: #656567;
}
.rs-contact-box.color_default .address-text a:hover:not(.des) {
color: #e11631;
}
.rs-contact-box.color_light_scheme .address-icon {
background: #ffffff;
}
.rs-contact-box.color_light_scheme .address-icon i {
color: #e11631;
}
.rs-contact-box.color_light_scheme .address-icon svg path {
fill: #e11631;
}
.rs-contact-box.color_light_scheme .address-icon:after, .rs-contact-box.color_light_scheme .address-icon:before {
background: #ffffff;
}
.rs-contact-box.color_light_scheme .address-text .label {
color: #ffffff;
}
.rs-contact-box.color_light_scheme .address-text a, .rs-contact-box.color_light_scheme .address-text .des {
color: #ffffff;
}
.rs-contact-box.color_light_scheme .address-text a:hover:not(.des), .rs-contact-box.color_light_scheme .address-text .des:hover:not(.des) {
color: #e11631;
}
.rs-contact-box.color_dark_scheme .address-icon {
background: #1a001b;
}
.rs-contact-box.color_dark_scheme .address-icon i {
color: #ffffff;
}
.rs-contact-box.color_dark_scheme .address-icon svg path {
fill: #ffffff;
}
.rs-contact-box.color_dark_scheme .address-icon:after, .rs-contact-box.color_dark_scheme .address-icon:before {
background: #1a001b;
}
.rs-contact-box.color_dark_scheme .address-text a, .rs-contact-box.color_dark_scheme .address-text .des {
color: #1a001b;
}
.rs-contact-box.color_dark_scheme .address-text a:hover:not(.des), .rs-contact-box.color_dark_scheme .address-text .des:hover:not(.des) {
color: #e11631;
}
.rs-contact-box.color_hover_scheme .address-text a:hover {
color: #e11631 !important;
}
.rs-contact-box.color_hover_scheme .address-text a span:hover {
color: #e11631 !important;
}
.rs-contact-box.color_primary_scheme .address-item .address-icon {
background-color: #e11631;
}
.rs-contact-box.color_primary_scheme .address-item .address-text a:hover {
color: #e11631 !important;
}
@keyframes vibrate {
0% {
transform: translateX(-2px) rotate(0deg);
}
25% {
transform: translateX(2px) rotate(-2deg);
}
50% {
transform: translateX(-2px) rotate(2deg);
}
75% {
transform: translateX(2px) rotate(-2deg);
}
100% {
transform: translateX(-2px) rotate(0deg);
}
}
@-webkit-keyframes vibrate {
0% {
transform: translateX(-2px) rotate(0deg);
}
25% {
transform: translateX(2px) rotate(-2deg);
}
50% {
transform: translateX(-2px) rotate(2deg);
}
75% {
transform: translateX(2px) rotate(-2deg);
}
100% {
transform: translateX(-2px) rotate(0deg);
}
}
.contact-service {
border-color: #e11631;
}
.contact-service .rs-contact-box .address-item .address-icon svg,
.contact-service .rs-contact-box .address-item .address-icon svg path,
.contact-service .rs-contact-box .address-item .address-icon i {
fill: #e11631 !important;
}
.contact-service .rs-contact-box .address-item .address-text .des {
color: #e11631;
}