/* ------------ GOOGLE FONTS ------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* ------------ VARIABLES ------------ */
:root{
  /* FONT */
  --font: 'Poppins', sans-serif;

  /* COLORS */
  --color: #fff;
  --bg-color: red;
}

/* ------------ BASE ------------ */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sp-menu-item .btn{background:none!important;}
.btn:not([class*="btn-"]){
	background:none;
	border:none;
}
.btn:not([class*="btn-"]):hover{
	background:none;
	border:none;
}

/* -------------- BUTTON ---------------- 
.btn{
  width: 13em;
  height: 3em;
  
  display: flex;
  justify-content: center;
  align-items: center;
  background:red!important;
  cursor: pointer;

  box-shadow: inset 0 0 1em var(--color),
              0 0 1.5em var(--color);

  position: relative;            
}

.btn::before{
  content: "";
  position: absolute;
  background-color: var(--color);
  width: 100%;
  height: 100%;
  

  transform: perspective(5em) rotateX(40deg) scale(1, 0.35);
  filter: blur(5em);
}

.btn a{
  
  font-size: 3rem;
  font-weight: 600;
  color:#fff!important;
 line-height: 50px!important;
}

.btn:hover{
  animation: blink 1s forwards;
}

.btn:hover a{
  animation: blink-text 1s forwards;
}

.btn:hover::before{
  animation: blink-shadow 1s forwards;
}
}*/
@media(max-width:700px){
  .btn{
  
  font-size: 2rem;
  font-weight: 300;
    text-align:left!important;
    padding:0px!important;
    margin-left:0px!important;
  color:#fff!important;
 line-height: 20px!important;
       max-width:80%;
         max-height:63px;
}
  .btn a{line-height:20px;
    margin-top:0px!important
    }

#sp-bottom .btn{background:none!important;  text-align:left; transform:none; filter:none; padding:0; animation:none; box-shadow:none; border:none }
#sp-bottom .btn a{font-size:16px!important;}

.sp-dropdown-inner{padding:0px!important}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover{background:#c73619!important}

/* ----------- ANIMATIONS --------------- */
@keyframes blink {
  0%, 30%, 55% ,70%{
    box-shadow: none;
    background-color: transparent;
  }
  15%, 45%, 60%, 75%{
    box-shadow: inset 0 0 1em var(--color),
              0 0 1.5em var(--color);

    background-color: transparent;          
  }
  80%, 100%{
    background-color: var(--color);
  }
}

@keyframes blink-text {
  0%, 30%, 55% ,70%{
    text-shadow: none;
    color: var(--color);
  }
  15%, 45%, 60%, 75%{
    text-shadow: 0 0 0.1em var(--color),
               0 0 1em var(--color);

    color: var(--color);          
  }
  80%, 100%{
    color: var(--bg-color);
    text-shadow: none;
  }
}

@keyframes blink-shadow {
  0%, 30%, 55% ,70%{
    background-color: transparent;
  }
  15%, 45%, 60%, 75%, 100%{
    background-color: var(--color);     
  }
}