/*======================================
Theme Name: 4seeds
Theme URI: https://divicake.com/
Description: A child theme for 4seeds websites
Version: 1.0
Author: Mathew Philips
Author URI: https://www.matphilips.co.za
Template: Divi
======================================*/

/*---Fixed Site CTA---*/

.cta-container{
    position:fixed;
    right: 0;
    bottom: 40px;
    z-index: 9999;
}

.cta-container .container-inner{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    position:relative;
    background-color:#dc1040;
    height: 57px;
    top: -25px;
    border-radius: 15px 0 0 15px;
    column-gap: 10px;
    max-width: 60px;
    overflow: hidden;
    transition: all 0.8s ease-in-out;
}

.cta-container:hover .container-inner{
    max-width: 300px;
    overflow-x: hidden;
    transition: all 0.8s ease-in-out;
}

.cta-container:after{
content: '';
display: block;
width: 3px;
height: 132px;
background-color: #dc1040;
position: absolute;
left: auto;
right: 0;
top: auto;
bottom: 0;
}

.cta-container .container-inner .cta-icon{
 width: 50px;
 height: 40px;
 display:block;
 padding: 5px;
 font-family: ETMOdules;
 font-size: 30px;
 line-height: 30px;
 text-align: center;
 color: #ffffff;
 position:relative;
 right: 5px;
}

.cta-container .container-inner .cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-container .container-inner .cta-button a{
  height: 57px;
  width: 240px;
  display:block;
  padding: 0 20px;
  font-family: 'AmsIPro-Bold',sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  line-height: 57px;
  opacity: 0;
  transition: all 0.8s ease-in-out;
  animation: emphasisText 2s infinite ease-in-out;
}

.cta-container:hover .container-inner .cta-button a{
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}

.cta-container .container-inner .cta-button a:hover{
    color: #ffffff !important;
    transition: all 0.8s ease-in-out;
}

@keyframes emphasisText {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@media only screen and (max-width: 480px){

.cta-container{
    position:fixed;
    right: 0;
    bottom: 40px;
    z-index: 9999;
    transform: scale(0.8) translateX(7px);
}

.cta-container:hover{
    position:fixed;
    right: 0;
    bottom: 40px;
    z-index: 9999;
    transform: scale(0.8) translateX(37px);
}

}