.btn{
color: #fff;
background-color: #341f97;
font-family: 'Nunito', sans-serif;
font-size: 17px;
font-weight: 600;
font-style: italic;
border: 2px solid #341f97;
border-radius: 20px/30px;
transition: all 0.3s ease 0s;
}
.btn:focus,
.btn:hover{
color: #341f97;
background-color: #fff;
border: 2px solid #341f97;
border-radius: 30px;
outline: none;
}
.tooltip .tooltip-inner{
color: #333;
background-color: #fff;
font-family: 'Nunito', sans-serif;
font-size: 15px;
font-weight: 600;
text-transform: capitalize;
padding: 5px 10px;
border: 1px solid #333;
border-radius: 0;
animation: anime 1s infinite;
}
.tooltip .tooltip-arrow{
background-color: #333;
height: 14px;
width: 14px;
z-index: -1;
border: none;
transform: rotate(45deg);
}
.tooltip.top .tooltip-inner{ box-shadow: -3px -3px 0 rgba(0,0,0,0.15); }
.tooltip.top .tooltip-arrow{ bottom: 3px; }
.tooltip.right .tooltip-inner{ box-shadow: 3px 3px 0 rgba(0,0,0,0.15); }
.tooltip.right .tooltip-arrow{
margin-top: 0;
transform: translateY(-50%) rotate(45deg);
left: 3px;
top: 50%;
}
.tooltip.bottom .tooltip-inner{ box-shadow: -3px 3px 0 rgba(0,0,0,0.15); }
.tooltip.bottom .tooltip-arrow{ top: 3px; }
.tooltip.left .tooltip-inner{ box-shadow: -3px -3px 0 rgba(0,0,0,0.15); }
.tooltip.left .tooltip-arrow{
margin-top: 0;
transform: translateY(-50%) rotate(45deg);
right: 3px;
top: 50%;
}
@keyframes anime{
0%{
color: #333;
text-shadow: none;
}
50%{
color: #000;
text-shadow: 4px 4px rgba(0,0,0,0.2);
}
100%{
color: #333;
text-shadow: none;
}
}
@media only screen and (max-width: 767px){
.btn{
display: block;
margin: 0 auto 40px;
}
}