.btn{
color: #fff;
background-color: #0678ac;
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 500;
border: none;
transition: all 0.3s ease;
}
.btn:focus,
.btn:hover{
color: #fff;
background-color: #4d4d4d;
border: none;
outline: none;
box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}
.tooltip .tooltip-inner{
font-size: 15px;
font-weight: 600;
text-transform: capitalize;
padding: 5px 15px;
border-radius: 20px;
}
.tooltip .tooltip-arrow{
height: 14px;
width: 14px;
z-index: -1;
border: none;
border-radius: 2px;
transform: rotate(45deg);
}
.tooltip.top .tooltip-inner{ background: linear-gradient(#FF416C,#FF4B2B); }
.tooltip.top .tooltip-arrow{
background-color: #FF4B2B;
bottom: 3px;
}
.tooltip.right .tooltip-inner{ background: linear-gradient(to right,#45B649,#2bc664); }
.tooltip.right .tooltip-arrow{
background-color: #45B649;
margin-top: 0;
transform: translateY(-50%) rotate(45deg);
left: 3px;
top: 50%;
}
.tooltip.bottom .tooltip-inner{ background: linear-gradient(#0083B0,#00B4DB); }
.tooltip.bottom .tooltip-arrow{
background-color: #0083B0;
top: 3px;
}
.tooltip.left .tooltip-inner{ background: linear-gradient(to right,#a044ff,#6a3093); }
.tooltip.left .tooltip-arrow{
background-color: #6a3093;
margin-top: 0;
transform: translateY(-50%) rotate(45deg);
right: 3px;
top: 50%;
}
@media only screen and (max-width: 767px){
.btn{
display: block;
margin: 0 auto 40px;
}
}