.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  animation: breathe 2s ease-in-out infinite;
}
.wa{
    z-index: 9999999 !important;
}

/*Estilos solo al icono whatsapp*/
.whatsapp-btn i {
  color: #fff;
  font-size: 24px;
  animation: beat 2s ease-in-out infinite;
  text-decoration: none;
}

/*Estilos con animation contorno respirando*/
@keyframes breathe {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

/*Estilos de animacion del icono latiendo*/
@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
i{
    color: #FFFFFF;
}

	
/* NAVBAR */

.nav_list {
    font-family: 'Antonio', sans-serif;
    font-size: 30px;
}

i {
    color: #FFFFFF;
}

button {
    background-color: #CA0909;
    color: white;
    border: #CA0909;
    font-family: 'Antonio', sans-serif;
    font-size: 30px;



}

.button a {
    font-size: 25px;

}

nav .button {
    margin-top: -100px;
    margin-bottom: -8px;
    margin-right: -27px;
    padding: 30px 80px;


    display: inline;


}
/* HEADER */
header h1{
   
    font-size: 100px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif;
    
}
header h4{
    font-size: 30px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif;
    text-transform: uppercase;
    
}

header h5{
    font-family: 'Antonio', sans-serif;
    font-size: 24px;
    
    text-transform: uppercase;
} 
header p{
    font-family: 'Antonio', sans-serif;
    font-size: 24px;
    font-weight: 300;

   
} 

.edit_but{
    font-family: 'Antonio', sans-serif; 
    font-size: 30px;
    text-transform: uppercase;
    
}
 header .dashed{
    
    border-style: dashed;
    border-color: white;
}
.head_button{
	background-color:  #CA0909;
	color: white;
	border: #CA0909;
	font-family: 'Antonio', sans-serif; 
	font-size: 30px;
	box-shadow: 0px 0px 15px red ,0px 0px 15px red;
	border-style: dashed;

	position: relative;
}

/* animation button*/  

.head_button::before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	border-top: 2px solid white;
	/* border-style: dashed; */
	border-right: 2px solid white;
	/* border-style: dashed; */
	animation: border-top-right 3s infinite alternate;

}
@keyframes border-top-right{
	0% {width: 0px; height: 0px;}
	25% {width: 260px; height: 0px;}
	50% {width: 260px; height: 50px;}
	100% {width: 260px; height: 50px;}
}
.head_button::after{
	content: "";
	position: absolute;
	right:0;
	bottom: 0;
	width: 0;
	height: 0;
	border-bottom: 2px solid white;
	border-left: 2px solid white;
	/* border-style: dashed; */
	animation: border-bottom-left 3s infinite alternate;

}
@keyframes border-bottom-left{
	0% {width: 0px; height: 0px;}
	50% {width: 0px; height: 0px;}
	75% {width: 260px; height: 0px;}
	100% {width: 260px; height: 50px;}
}

	
 .head_button a{
	 font-size: 25px;
	 
 }

 


/* SECTION-1 */
.button1{
	background-color:  #CA0909;
	color: white;
	border: #CA0909;
	font-family: 'Antonio', sans-serif; 
	font-size: 30px;
	box-shadow: 0px 0px 15px red ,0px 0px 15px red ;
	position: relative;
 }
 
 .button1 a{
	 font-size: 25px;
	 
 }
 
 /* animation button*/  
 
 .button1::before{
	 content: "";
	 position: absolute;
	 left: 0;
	 top: 0;
	 width: 0;
	 height: 0;
	 border-top: 2px solid white;
	 /* border-style: dashed; */
	 border-right: 2px solid white;
	 /* border-style: dashed; */
	 animation: border-top-right 3s infinite alternate;
 
 }
 @keyframes border-top-right{
	 0% {width: 0px; height: 0px;}
	 25% {width: 260px; height: 0px;}
	 50% {width: 260px; height: 50px;}
	 100% {width: 260px; height: 50px;}
 }
 .button1::after{
	 content: "";
	 position: absolute;
	 right:0;
	 bottom: 0;
	 width: 0;
	 height: 0;
	 border-bottom: 2px solid white;
	 border-left: 2px solid white;
	 /* border-style: dashed; */
	 animation: border-bottom-left 3s infinite alternate;
 
 }
 @keyframes border-bottom-left{
	 0% {width: 0px; height: 0px;}
	 50% {width: 0px; height: 0px;}
	 75% {width: 260px; height: 0px;}
	 100% {width: 260px; height: 50px;}
 }
 /* animation typing css animation (section-1) */

.cont .home_1_h1{
    color: #CA0909;
    font-size: 72px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
    text-transform: uppercase;
    


   
}


.const{
	display: inline-block;
	
	
  }
  
  .home_1_h1 {
	overflow: hidden;
	white-space: nowrap;
	width: 0%;
	animation: typing;
	animation-duration: 1.5s;
	animation-timing-function: steps(30, end);
	animation-fill-mode: forwards;
	animation-delay: 3s;
  }
	
  @keyframes typing {
	from { width:0% }
	to { width: 100% }
  }



  .const{
	display: inline-block;
	font-family: "arial";
	font-size: 24px;
  }
  
  .typed {
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	animation: typing;
	animation-duration: 1.5s;
	animation-timing-function: steps(30, end);
	animation-fill-mode: forwards;
	animation-delay: 3s;
  }
	
  @keyframes typing {
	from { width: 0 }
	to { width: 100% }
  }
  


  .const{
    display: inline-block;
    font-family: "arial";
    font-size: 24px;
  }

  .edit3 {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing;
    animation-duration: 1.5s;
    animation-timing-function: steps(30, end);
    animation-fill-mode: forwards;
	animation-delay: 3s;
  }

  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }


  .const{
    display: inline-block;
    font-family: "arial";
    font-size: 24px;
  }

  .edit4 {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing;
    animation-duration: 1.5s;
    animation-timing-function: steps(30, end);
    animation-fill-mode: forwards;
	animation-delay: 3s;
  }

  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
 
  

/* MOUSE-COUSER */










/* end  MOUSE-COUSER  */

 


.home_1_h1{
    color: #CA0909;
    font-size: 72px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
    text-transform: uppercase;
}
#home_1 h5{
    font-size: 28px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif;  
    color: white; 
    
   
    
}
#home_1 .para{
    font-size: 20px;
    color: white; 
    font-family: 'Source Sans 3', sans-serif;
    
    
}
#home_1 .para1{
    color: #CA0909;
    font-size: 42px;
   
    font-family: 'Antonio', sans-serif;   
}
#home_1 h3{
    font-family: 'Antonio', sans-serif;  
    color: white;
    font-size: 59px;

}
#home_1 .edit2{
    color: gray;
    font-family: 'Source Sans 3', sans-serif;
    
    
}
#home_1 .edit3{
    color: #CA0909;
    font-size: 96px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif;   
}
#home_1 .edit4{
    color: #CA0909;
    font-size: 80px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif;   
}




/* SECTION-2 */

.home_2 h1{
    color: #CA0909;
    font-size: 96px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
}


/* SECTION-3 */
.home_3 h1{
    color: #CA0909;
    font-size: 96px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
}


/* SECTION-4 */
 #home_4 .home_4-para{
    border: 1px solid #CA0909;
    background-color: #ca09098f;
    margin-top: 20px;

}
.home_4 h1{
    color: #CA0909;
    font-size: 96px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
}
.home_4heading{
    color: #CA0909;
    font-size: 96px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
}
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    /* font-size: 15px; */
    transition: 0.4s;
  }
  
  /* .active, .accordion:hover {
    background-color: #ccc; 
  }
   */
  .panel {
    padding: 0 18px;
    display: none;
    background-color:white;
    color: black;
    overflow: hidden;
  }


/* SECTION-5 */
#home_5 h1{
    color: #CA0909;
    font-size: 96px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
}
#home_5 p{
    font-family: 'Antonio', sans-serif; 
}
#home_5 .para3{
    font-family: 'Source Sans 3', sans-serif;
    font-size: 26px;
    font-weight: 300;
}

/* SECTION-6 */

#home_6 h1{
    color: #CA0909;
    font-size: 96px;
    font-weight: 700;
    font-family: 'Antonio', sans-serif; 
}
    

/* FOOTER */

footer{
    background-color: #CA0909;
    color: white;
}
footer .para4{
    font-family: 'Source Sans 3', sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-transform: lowercase;
}
.footer_list{
    font-family: 'Antonio', sans-serif; 
   
}
/* footer p{
    font-family: 'Source Sans 3', sans-serif;
    font-size: 20px;
} */


 @media(max-width:650px){



/* NAVBAR */

.logo{
    width: 60%;
    
}
nav .button{
    margin-top: 20px;
    padding: 10px 40px !important;
    margin-bottom: 20px;

}
nav i{
    margin-right: 0px !important;
}

/* HEADER */
header h1{
    font-size: 50px;
    padding-top: 20px;
}
header p{
    font-size: 20px;
    padding-top: 30px;
}
header h4{
    font-size: 22px;
    padding-bottom: 20px;
}
header a .button{
    width: 75% !important;
    height: 75% !important;
    font-size: 30px;
}


/* SECTION-1 */

#home_1 h1{
    font-size: 43px;
}
#home_1 .button1{
    width: 80% !important;
    height: 80% !important;
    font-size: 30px;
}
#home_1 .edit3{
    font-size: 60px;
}
#home_1 .edit2{
    padding-top: 30px;
    font-size: 50px;

}
#home_1 h3{
    font-size: 40px !important;
}
#home_1 .media{
    font-size: 25px;
    padding-top: 30px;
}

/* SECTION-2 */


/* SECTION-3 */


/* SECTION-4 */
#home_4 h1{
    font-size: 70px;
}
#home_4 .accordion{
    font-size: 13px !important;
}




/* SECTION-5 */

#home_5 h1{
    font-size: 70px;
}
#home_5 .img{
    width: 100%;
}
#home_5 .para3{
    font-size: 25px;
    width: 90% !important;

}
#home_5 h6{
    font-size: 30px;
    padding-top: 20px;
    padding-bottom:20px;
}

/* SECTION-6 */

#home_6 h1{
    font-size: 70px;
   
}
#home_6 .img1{
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* FOOTER */

footer .icon{
    float: left !important;
    margin-top: 30px !important;
    margin-left: 20%;

}
.footer_list{
    font-size: 25px !important;
    padding-top: 30px !important;
}
footer .para4{
    font-size: 17px !important;
    padding-left: 13px;
}
 }



/* @media(max-width:998px){ */
    /* NAVBAR */



/* HEADER */



/* SECTION-1 */



/* SECTION-2 */


/* SECTION-3 */


/* SECTION-4 */


/* SECTION-5 */


/* FOOTER */