<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="contact-us-promo pt-100">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card single-promo-card single-promo-hover text-center shadow-sm">
<div class="card-body py-5">
<div class="pb-2">
<span class="ti-mobile icon-sm color-secondary"></span>
</div>
<div><h5 class="mb-0">Call Us</h5>
<p class="text-muted mb-0">+123 456-78900</p>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card single-promo-card single-promo-hover text-center shadow-sm">
<div class="card-body py-5">
<div class="pb-2">
<span class="ti-location-pin icon-sm color-secondary"></span>
</div>
<div><h5 class="mb-0">Visit Us</h5>
<p class="text-muted mb-0">New York, CA N310</p></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card single-promo-card single-promo-hover text-center shadow-sm">
<div class="card-body py-5">
<div class="pb-2">
<span class="ti-email icon-sm color-secondary"></span>
</div>
<div><h5 class="mb-0">Mail Us</h5>
<p class="text-muted mb-0">help@yourdomain.com</p></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="card single-promo-card single-promo-hover text-center shadow-sm">
<div class="card-body py-5">
<div class="pb-2">
<span class="ti-headphone-alt icon-sm color-secondary"></span>
</div>
<div><h5 class="mb-0">Live Chat</h5>
<p class="text-muted mb-0">Chat with Us 24/7</p></div>
</div>
</div>
</div>
</div>
</div>
</section>
body,
center,
div,
h1,
h2,
h3,
h4,
h5,
h6,
html,
p,
section,
span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
section {
display: block
}
body {
line-height: 1
}
html {
overflow-y: scroll;
font-size: 15px
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased
}
body {
background-color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
color: #707070;
font-weight: 400;
line-height: 1.75
}
p:not(:last-child) {
margin-bottom: 1.25em
}
h1,
h2,
h3,
h4,
h5 {
margin: 0 0 1rem;
font-family: Montserrat, sans-serif;
font-weight: 600;
line-height: 1.21;
color: initial
}
h1 {
margin-top: 0;
font-size: 3.052em
}
h2 {
font-size: 2.441em
}
h3 {
font-size: 1.953em
}
h4 {
font-size: 1.563em
}
h5 {
font-size: 1.25em
}
.pt-100 {
padding-top: 100px
}
.pt-165 {
padding-top: 165px
}
.pb-100 {
padding-bottom: 100px
}
.color-secondary {
color: #e80566
}
.color-1 {
color: #ff164e
}
.color-2 {
color: #9123ff
}
.color-3 {
color: #0073ec
}
.color-4 {
color: #ff7c3f
}
.color-5 {
color: #2ebf6d
}
.color-6 {
color: #f25c7f
}
.icon-sm {
font-size: 25px;
line-height: 25px
}
.icon-md {
font-size: 40px;
line-height: 40px
}
.icon-lg {
font-size: 50px;
line-height: 50px
}
@-webkit-keyframes animborder {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(113px);
transform: translateX(113px)
}
}
@keyframes animborder {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(113px);
transform: translateX(113px)
}
}
@media (min-width:320px) and (max-width:992px) {
.pt-100 {
padding-top: 55px
}
.pb-100 {
padding-bottom: 55px
}
.pt-165 {
padding-top: 100px
}
}
@keyframes angry-animation {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
50% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes progressBar {
0% {
width: 0
}
100% {
width: 100%
}
}
@-moz-keyframes progressBar {
0% {
width: 0
}
100% {
width: 100%
}
}
@-webkit-keyframes ripple {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15);
box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15)
}
100% {
-webkit-box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0);
box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0)
}
}
@keyframes ripple {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15);
box-shadow: 0 0 0 0 rgba(50, 100, 245, .15), 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15)
}
100% {
-webkit-box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0);
box-shadow: 0 0 0 20px rgba(50, 100, 245, .15), 0 0 0 40px rgba(50, 100, 245, .15), 0 0 0 60px rgba(50, 100, 245, 0)
}
}
@-webkit-keyframes ripple-white {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1)
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0)
}
}
@keyframes ripple-white {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1);
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1)
}
100% {
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 0 0 20px rgba(255, 255, 255, .1), 0 0 0 30px rgba(255, 255, 255, 0)
}
}
.promo-icon {
position: relative;
display: block;
width: 100%
}
@-webkit-keyframes mover {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
}
@keyframes mover {
0% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
100% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px)
}
}
.promo-col:nth-child(2n+2) {
margin-top: 30px
}
@media (min-width:320px) and (max-width:575px) {
.promo-col:nth-child(2n+2) {
margin-top: 0
}
}
@-webkit-keyframes thumb-thumb-scale-up-one {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
40% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes thumb-scale-up-one {
0% {
-webkit-transform: scale(1);
transform: scale(1)
}
40% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
100% {
-webkit-transform: scale(1);
transform: scale(1)
}
}
@-webkit-keyframes thumb-scale-up-two {
0% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
40% {
-webkit-transform: scale(.8);
transform: scale(.8)
}
100% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
}
@keyframes thumb-scale-up-two {
0% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
40% {
-webkit-transform: scale(.8);
transform: scale(.8)
}
100% {
-webkit-transform: scale(.5);
transform: scale(.5)
}
}
@-webkit-keyframes thumb-scale-up-three {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
40% {
-webkit-transform: scale(.4);
transform: scale(.5)
}
100% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
}
@keyframes thumb-scale-up-three {
0% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
40% {
-webkit-transform: scale(.4);
transform: scale(.5)
}
100% {
-webkit-transform: scale(.7);
transform: scale(.7)
}
}
.single-promo-card {
transition: all .2s ease
}
.card.single-promo-card {
border: 1px solid #eff2f7;
border-radius: 1rem
}
.single-promo-card .card-body {
padding: 1.5rem
}
.single-promo-hover {
transition: all .2s ease-out;
will-change: transform
}
.single-promo-hover:hover {
box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125)!important
}
.single-promo-2 {
box-shadow: 0 3px 20px 0 rgba(0, 0, 0, .12);
border-radius: 1.5rem!important
}
.single-promo-hover:hover {
transform: translateY(-5px);
box-shadow: 0 1rem 3rem rgba(31, 45, 61, .125)!important
}
.single-promo-2 span {
font-size: 25px;
background-image: url(../img/promo-icon-bg.svg);
background-size: 70px;
padding: 25px;
background-repeat: no-repeat;
background-position: 0 25%;
display: inline-block;
margin-bottom: 20px
}
.link-color {
color: #707070
}
@keyframes loader1 {
from {
transform: scale(0, 0)
}
to {
transform: scale(1, 1)
}
}
@-webkit-keyframes loader1 {
from {
-webkit-transform: scale(0, 0)
}
to {
-webkit-transform: scale(1, 1)
}
}
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button
}
