:root {
  --height: 62px;
	--height_open: 250px;
	--width: 400px;
	--cross_margin: 7px;
	--strip_lenght: 80%;
	--strip_thickness: 14%;
	--strip_thickness_number: 0.14;
	--round_corners: calc((var(--height) - var(--cross_margin) * 2) * (var(--strip_thickness_number) / 2));
	--dark_color:rgb(3,3,3);
	--bright_color:rgb(0,168,89);
}

.whatsapp_bg
{
  text-transform: uppercase;
	position: fixed;
	bottom: 50px;
	right:50px;
	z-index:999995;
	background-color:var(--dark_color);
	border-radius: calc(var(--height) / 2);
	height:var(--height);
	width:var(--height);
}

.whatsapp_wrapper{
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	clip-path: inset(0px 0px 0px 0px);
}

.whatsapp_text
{
	color:var(--bright_color);
	position:absolute;
	font-size:15px;
}

.whatsapp_text_div
{
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
	position: absolute;
  	height:var(--height);
}

.whatsapp_top_text
{
	pointer-events: none;
	top:0;
	left:0;
	width:calc(var(--width) - (var(--height) / 2));
}

.whatsapp_bottom_text
{
	pointer-events: none;
	bottom:0;
	left:0;
	width: var(--width);
}

.whatsapp_title_1
{
	clip-path: inset(0px 100% 0px 0px);
	margin-right:45px;
}

.whatsapp_title_2
{
	visibility: hidden;
	clip-path: inset(0px 100% 0px 0px);
	margin-right:45px;
}

.whatsapp_title_3
{
	visibility: hidden;
	clip-path: inset(0px 100% 0px 0px);
	margin-right:45px;
}

.whatsapp_link
{
	width: calc(var(--width) - 	20%);
	height: var(--height);
	visibility: hidden;
}

.whatsapp_button
{
	clip-path: inset(0px 100% 0px 0px);
	position: relative;
	width: 100%;
	height: var(--height);
	background-color: var(--bright_color);
	border-radius: calc(var(--height) / 2);
}

.container_for_button_title
{
	position: absolute;
	width: calc(100% - var(--height) + 5px);
	height: 100%;
	right:0;
	top:0;
	z-index:999997;
	display:flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
}

.whatsapp_button_title
{
	color: var(--dark_color);
	font-size:20px;
	font-weight: bold;
}

.whatsapp_button_logo_background
{
	position:absolute;
	z-index:999997;
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
	border-radius: calc(var(--whatsapp_logo_dimension) / 2);
	background-color: rgba(3,3,3,0);
}

.whatsapp_ava
{
  visibility: hidden;
  width:100%;
  height:100%;
  clip-path: circle(50%);
}

.whatsapp_animation
{
	-webkit-transition: all 1s ease-in-out;
    -moz-transition:    all 1s ease-in-out;
    -o-transition:      all 1s ease-in-out;
    -ms-transition:     all 1s ease-in-out;
    transition:         all 1s ease-in-out;
}

.whatsapp_animation_fast
{
	-webkit-transition: all .3s ease-in-out;
    -moz-transition:    all .3s ease-in-out;
    -o-transition:      all .3s ease-in-out;
    -ms-transition:     all .3s ease-in-out;
    transition:         all .3s ease-in-out;
}

.whatsapp_dot
{
	pointer-events: none;
	background-color: rgba(0,0,0,0);
	position:absolute;
	z-index:999999;
	top:0px;
	right:0px;
	width:var(--height);
	height:var(--height);
	border-radius: 50%;
	border:1px solid;
  border-width: calc(var(--height) / 2);
	border-color: var(--dark_color);
}


.whatsapp_corner_button
{
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content:center;
	pointer-events: none;
	position:absolute;
	top:var(--cross_margin);
	right:var(--cross_margin);
	width:calc(var(--height) - var(--cross_margin) * 2);
	height:calc(var(--height) - var(--cross_margin) * 2);
	transform: rotate(45deg);
	border-radius: 50%;
	background-color:var(--bright_color);
	z-index:999996;
}

.phone_icon{
  color : rgb(3,3,3);
  width:70%;
  height:70%;
	transform: rotate(-45deg);
}

@media screen and (max-width: 700px) {
  	:root
	{
		--width:calc(100vw - 40px);
	}

  	.whatsapp_text
	{
		font-size:10px;
	}

 	.whatsapp_button_title
	{
		font-size:14px;
	}

    .whatsapp_bg 
	{
	bottom: 20px;
	right:20px;
	}
}