/*

Theme Name: Bent

Author: Allie

Version: 1.0

URL: http://designscrazed.org/

*/



/* Table of Content

==================================================

  1. COMMON STYLES

  2. SECTION HOME 

  3. SECTION ABOUT

  4. SECTION VIDEO

  5. SECTION TESTIMONIAL

  6. SECTION FEATURES 

  7. SECTION CALL TO ACTION

  8. SECTION APPS SCREEN 

  9. SECTION FUN FACTS 

  10. SECTION DOWNLOAD 

  11. SECTION CONTACT 

  12. SECTION SUBSCRIBE

  13. SECTION FOOTER 



*/

* {

    margin: 0;

    padding: 0;

}

body {

    font-family: 'Raleway', sans-serif;

    overflow-y: scroll;

    overflow-x: hidden;

}

p {

    font-family: 'Raleway', sans-serif;

    font-size: 14px;

}

/*---------------------------------------

   COMMON STYLES             

-----------------------------------------*/



.section_title {

    padding-top: 90px;

    padding-bottom: 50px;

}

.section_title h2 {

    text-transform: uppercase;

    text-align: center;

    position: relative;

    color: #333;

    font-size: 30px;

    font-weight: 400;

}

.section_title h2:after {

    content: "";

    position: absolute;

    bottom: -20px;

    width: 60px;

    height: 1px;

    background-color: #67BCE0;

    left: 50%;

    margin-left: -30px;

}

.section_title p {

    text-align: center;

    margin-top: 45px;

    color: #333;

    font-size: 18px;

    line-height: 28px;

    font-weight: 300;

}

.parallax {

    background-attachment: fixed !important;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

}

/*---------------------------------------

   POPUP              

-----------------------------------------*/
#popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 250px;
    padding: 15px;
    background-color: #f1f1f1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: none; /* Oculto por defecto */
  }
  #popup .close {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
  }
  #popup h4 {
    margin-top: 0;
  }
  #popup img {
    width: 220px; /* Ancho deseado */
    
    object-fit: cover; /* Mantener la relación de aspecto y cubrir el área */
  }



/*---------------------------------------

   SECTION HOME              

-----------------------------------------*/

/*menu*/



.header h2 {

    height: 0px;

    margin: 0px;

}

.navbar {

    margin-top: -100px;
	
}

.navbar-brand {

    padding: 9px 15px;

}

.navbar-default {

	background-color: rgba(34,109,180, .70) !important ;

}

.navbar-default .navbar-nav>li>a {

	color: #E1E1E1;

	font-family: 'Raleway', sans-serif;

}

.navbar-default .navbar-nav>li>a:hover {

	font-size: 110%;
	color: #00E5F8;

}

.navbar-default .navbar-nav>li>a:focus {

	color: #E1E1E1;

}

@media(min-width:768px) {

    .navbar-default {

        -webkit-transition: all 1s;

        -moz-transition: all 1s;

        -o-transition: all 1s;

        transition: all 1s;

        z-index: 110;

    }

    .navbar-brand img {

        padding-top: 25px;

        height: 45px;

        -webkit-transition: all 1s;

        -moz-transition: all 1s;

        -o-transition: all 1s;

        transition: all 1s;

    }

    .navbar-default .navbar-nav>li>a {

        -webkit-transition: all 1s;

        -moz-transition: all 1s;

        -o-transition: all 1s;

        transition: all 1s;

    }

    .navbar-nav>li>a {

        padding-top: 45px;

    }

}

@media (max-width: 768px) {

    .navbar-brand img {} .navbar-default {

      /*  background-color: #fff !important; */

    }

}

.navbar-default .navbar-nav>.active>a,

.navbar-default .navbar-nav>.active>a:hover,

.navbar-default .navbar-nav>.active>a:focus {

    background: transparent;
	font-size: 110%;
    color: #00E5F8;

}

.header {

    background: url(../images/home.jpg);

    background-size:cover;

	background-repeat: no-repeat;

}

@media (max-width: 768px){
	.header{
		background-position: -400px 0px !important;
		
	}
}
.header .section_overlay {

    background-color: rgba(34,109,200, .48);

}

.logo{

	padding-bottom: 5px;

}

.home_text{

    text-align: left;

}

.home-logo{
    text-align: center;

}


.home-logo img{

    width: 700px;

}

.home-lab{
    position: absolute;
	margin-left: 59%;
    margin-top: -40%;
}

.home-lab img{
	width: 350px;	
}
@media (max-width: 768px){

	.home {
		
		display: -webkit-flex;
		
		display: flex;
		
		-webkit-flex-direction: column;
		
		flex-direction:column  ;
		
	}
	
	.home-logo {
		
		text-align:center;
		
	}

    .home-logo img{
		
		width:80%;
		/*display: none;*/
    }

	.home-lab{
		margin-left: 59%;
		margin-top: -30%;
	}

	.home-lab img{
		
		width:80%;
		/*display: none;*/
    }

    .home_text{
		
        text-align: center;

    }
}

.home_text h1 {

    color: #fff;

    text-transform: uppercase;

    font-size: 55px;

    font-weight: 450;

    line-height: 45px;

    padding-top: 40px

}

.home_text p {

    color: #fff;

    font-size: 17px;

    line-height: 28px;

    margin-top: 0px;

    font-weight: 300;

}

.download-btn {

    margin-top: 90px;

    margin-bottom: 50px

}

.home-btn,

.home-btn:focus,

.home-btn:active,

.home-btn:visited {

    background: transparent;

    border-color: #67BCE0;

    color: #67BCE0;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-left: 30px;

    padding-right: 30px;

    font-size: 19px;

    text-transform: uppercase;

    border-radius: 3px;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

}

.home-btn:hover {

    background-color: #67BCE0;

    color: #fff;

}

.tuor,

.tuor:focus,

tuor:active,

tuor:visited {

    color: #fff;

    margin-left: 20px;

    text-transform: uppercase;

    font-size: 19px;

    font-weight: 550;

    background: transparent;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

}

.tuor:hover {

    color: #67BCE0;
}

.tuor i {

    font-size: 20px;

    padding-left: 5px;

    color: #67BCE0;

}

@media (max-width: 768px) {
	.tuor {
		padding-top: 20%;
	}
}





/*---------------------------------------

   SECTION ABOUT              

-----------------------------------------*/







.about {

    background: #f1f1f1;

}

.inner_about_area {

    padding-top: 10px;

}

.inner_about_title {

    padding-bottom: 50px;

}

.inner_about_title h2 {

    text-transform: uppercase;

    font-weight: 500;

    font-size: 30px;

    line-height: 37px;

    position: relative;

}

.inner_about_title h2:after {

    content: "";

    position: absolute;

    bottom: -12px;

    left: 0;

    width: 70px;

    background: #67BCE0;

    height: 1px;

}

.inner_about_title p {

    font-size: 19px;

    line-height: 24px;

    margin-top: 40px;

}

.inner_about_desc {} .single_about_area {

    position: relative;

    padding-bottom: 4px;

    padding-left: 80px;

}

.single_about_area div {

    position: absolute;

    top: 0px;

    left: 0px;

}

.single_about_area div i {

    font-size: 55px;

    color: #BABABA;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

}

.single_about_area h3 {

    color: #343434;

    text-transform: uppercase;

    font-size: 20px;

    font-weight: 500;

}

.single_about_area p {

    color: #727272;

    font-size: 15px;

}

.single_about_area:hover div i {
    color: #67BCE0;
}

.about_photo img { padding-top: 250px; margin-left: 0%;} @media  (max-width: 768px) {

    .about_photo img {

        padding-top: 0px;
        width: 90%;

        margin-left: 5%

    }

}

.iconos {
	width:50px;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-o-transition:all .5s ease;
	-ms-transition:all .5s ease;
} 

.single_about_area:hover .iconos { 
	-webkit-transform:scale(1.5);
	-moz-transform:scale(1.5);
	-ms-transform:scale(1.5);
	-o-transform:scale(1.5);
	transform:scale(1.5);
} 


/*---------------------------------------

   SECTION MAPAS

-----------------------------------------*/

.mapas iframe{ width: 350px;	height: 300px;	border: #DF0F130;} @media  (max-width: 768px) {

    .mapas iframe{
		width:90%;

    }

}



/*---------------------------------------

   SECTION VIDEO              

-----------------------------------------*/



.video_area {

    background-color: #D2EBE5;

    padding-bottom: 140px;

   /* padding-top: 120px;*/

}

.video_title {

    padding-bottom: 30px;

}

.video_title h2 {

    text-transform: uppercase;

    font-weight: 800;

    font-size: 30px;

    line-height: 37px;

    position: relative;

    margin-top: 0px;

}

.video_title h2:after {

    content: "";

    position: absolute;

    bottom: -12px;

    left: 0;

    width: 70px;

    background: #67BCE0;

    height: 1px;

}

.video_title p {

    font-size: 18px;

    line-height: 28px;

    margin-top: 40px;

    color: #333;

    font-weight: 300;

}


.video {} .video img {

    width: 100%;

    border: 1px solid #999999;

    padding: 5px;
	
	margin-top: 70px;
}

/*---------------------------------------

   SECTION TESTIMONIAL              

-----------------------------------------*/


.urgencia li {
	line-height: 1.2;
	color: #fff;
	list-style: none;
}

.urgencia li span {
	font-weight: 400;
	font-size: 20px;
	color: #fff;
}
.urgencia{
	height: 50px;
}

#cat{
	width: 22px;
}



#owl-demo .item {

    margin-left: 90px;

    margin-right: 90px;

    margin-bottom: 50px;

}

#owl-demo .item img {

    display: block;

    width: 100%;

    height: auto;

}

.testimonial {

    background: url(../images/secNot.jpg?12);

    background-size: cover;

    background-repeat: no-repeat;

}

.testimonial .section_overlay {

    background: rgba(0, 0, 0, .6);

    padding-top: 60px;

    padding-bottom: 80px;

}

.carousel-indicators {

    bottom: -50px;

}

div.carousel-inner .item #im {

    border: 2px solid #67BCE0;

    border-radius: 5%;

    padding: 3px;
	
	width: 40%;
	
	height: auto;

}

@media (max-width: 768px) {
    div.carousel-inner .item img {
		width: 100%;
		height: auto;
	}	
	   .carousel-inner{
		height: 380px;
	}	


}

.testimonial_caption {

    padding-bottom: 40px;
	
	height: 230px;

}

.testimonial_caption p {

    color: #D8D8D8;

    font-size: 18px;

    line-height: 27px;

    padding-top: 30px;
	
	margin-left: 20px;

	margin-right: 20px;

}

.testimonial_caption h2 {

    color: #67BCE0;

    text-transform: uppercase;

    font-size: 20px;

    margin-top: 20px;

}

.testimonial_caption h4 {

    color: #67BCE0

}

.testimonial_caption h4 span {

    color: #D8D8D8;

    font-style: italic;

    font-weight: 300;

}


.testimonial ol.carousel-indicators li {

    width: 12px;

    height: 12px;

    border: 1px solid #67BCE0;

    margin: 2px;
	

}

.testimonial ol.carousel-indicators li.active {

    width: 12px;

    height: 12px;

    border: 0px solid #67BCE0;

    background: #67BCE0;

}

/*---------------------------------------

   SECTION FEATURES              

----------------------------------------
-*/



.features {

    background-color: #f1f1f1

}

.feature_inner {

    padding-top: 30px;

    padding-bottom: 50px;

}

.feature_infra {text-align: center;} .feature_infra img {

    width: 90%;
	border: 2px solid #67BCE0;
    border-radius: 5%;
    padding: 3px;
	margin-bottom: 40px;
	margin-top: 0px;
	

}


@media (min-width: 991px) and (max-width: 1200px) {

   
    .feature_infra {

        margin-top: 35px;

    }


}






/*---------------------------------------

   SECTION FUN FACTS              

-----------------------------------------*/



.fun_facts {

    background: url(../images/fun_bg.jpg?12) no-repeat center;

    background-size: cover;

}

.fun_facts .section_overlay {

    padding-top: 100px;

    padding-bottom: 120px;

    background: rgba(0, 0, 0, .4);

}





/*---------------------------------------

   SECTION CONTACT              

-----------------------------------------*/

.fonos li{
	font-weight: 600; 
	font-size: 20px; 
	list-style: none;
	text-align: center;
}


.contact {

    background: #F1F1F;

    background-repeat: no-repeat;

    background-size: cover;

}

.contact_form {

    padding-top: 30px;

}

.contact_form .form-control {

    display: block;

    width: 100%;

    height: 50px;

    padding: 6px 12px;

    font-size: 14px;

    line-height: 1.42857143;

    color: #555;

    background-color: transparent;

    border: 1px solid #aeaeae;

    background-image: none;

    border-radius: 3px;

    margin-bottom: 15px;

    opacity: .8;

     -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

    outline: 0px !important;   



}

.contact_form .form-control:focus {

    border: 1px solid #67BCE0;

    border-color: #67BCE0;

    outline: 0px none;

    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset, 0px 0px 0px rgba(102, 175, 233, 0.6);

}

.contact_form {} .form-control:-webkit-input-placeholder {

    color: red;

}

.form-control:-moz-placeholder {

    /* Firefox 18- */

    

    color: red;

}

.form-control:-moz-placeholder {

    /* Firefox 19+ */

    

    color: red;

}

.form-control:-ms-input-placeholder {

    color: red;

}

.submit-btn,

.submit-btn:active,

.submit-btn:focus,

.submit-btn:visited {

    background-color: transparent;

    border: 1px solid #67BCE0;

    border-radius: 4px;

    width: 100%;

    height: 50px;

    text-transform: uppercase;

    font-size: 18px;

    color: #67BCE0;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

    outline: 0px !important;

}

.submit-btn:hover {

    background-color: #67BCE0;

    color: #fff;

    border-color: #67BCE0;

}

.social_icons {


    padding-bottom: 15px;

}

.social_icons ul {

    margin: 0;

    padding: 0;

    text-align: center;

}

.social_icons ul li {

    list-style: none;

    display: inline;

    padding-left: 10px

}

.social_icons ul li a {

    text-decoration: none;

    display: inline-block;

    text-align: center;

    border: 1px solid #9d9d9d;

    border-radius: 3px;

    width: 45px;

    height: 45px;

    line-height: 49px;

    color: #9d9d9d;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

}

.social_icons ul li a i {

    font-size: 20px;

}

.social_icons ul li a:hover {

    background: #67BCE0;

    border: 1px solid #67BCE0;

    color: #fff

}

.error {

    color: #67BCE0;

    display: block;

    padding-bottom: 15px;

    font-size: 18px

}

.error i {

    padding-right: 10px;

    font-size: 18px

}

.Sucess {

    color: #4DB849;

    display: block;

    padding-bottom: 15px;

    font-size: 18px;

    text-align: center;

}

.Sucess i {

    padding-right: 10px;

    font-size: 18px;

    color: #4DB849

}

.contact_form .form-control {

    color: #FFF;

}

#message {

    height: 117px;

    resize: none;

}

/*---------------------------------------

   SECTION SUBSCRIBE              

-----------------------------------------*/


.subscribe {

    background-image: url(../images/subscribe.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

}

.subscribe .section_overlay {

    padding-bottom: 60px;
	padding-top: 60px;

    background: transparent

}

.subscribe .section_title h2{

	color: #eaeaea;

}

.subscribe .section_title p{

	color: #a4a4a4;

}

.subscribe_form {

    text-align: center;

    padding-top: 30px;

}

.subscribe_form .form-group {} .subscribe_form .form-control {

    background: transparent;

    border: 1px solid #575b63;

    border-radius: 0px;

    height: 45px;

    border-left: 0px;

    border-right: 0px;

    border-top: 0px;

    color: #aeaeae;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

}

.subscribe_form .form-control:focus {

    background: transparent;

    border-bottom: 1px solid #f1f1f1;

    box-shadow: none;

}

.subs-btn,

.subs-btn:active,

.subs-btn:focus,

.subs-btn:visited {

    width: 200px;

    background: transparent;

    border: 1px solid #67BCE0;

    border-radius: 4px;

    height: 45px;

    margin-left: 0px;

    margin-bottom: 1px;

    color: #67BCE0;

    text-transform: uppercase;

    font-weight: 600;

    font-size: 17px;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

    outline: 0px !important;

}

.subs-btn:hover {

    background-color: #67BCE0;

    color: #fff;

    border-color: #67BCE0;

}

@media (min-width: 300px) {

    .subscribe_form .form-control {

        width: 100%

    }

}

.subscription-success {

    color: #fff;

    text-align: center;

    font-size: 20px;

}

.subscription-error {

    color: #fff;

    text-align: center;

    font-size: 20px;

}

/*---------------------------------------

   SECTION FOOTER              

-----------------------------------------*/



.copyright {

    background-color: #1A1D22;

    padding-bottom: 35px;

    padding-top: 35px;

    border-bottom: 3px solid #67BCE0;
	border-top: 3px solid #67BCE0;

}

.copyright h2 {

    height: 0px;

    margin: 0px;

}

.copy_right_text {

    width: 80%;

}

.copy_right_text p {

    color: #8C8B8A;

    font-weight: 600;

    text-transform: uppercase;

    font-size: 15px;

}

.copy_right_text p a {

    text-decoration: none;

    color: #67BCE0;

}

.copy_right_text p span {

    font-weight: 300;

}

.scroll_top {

    text-align: right;

}

.scroll_top a {

    background: #67BCE0;

    padding: 25px;

}

.scroll_top a i {

    color: #fff;

    font-size: 25px;

}

input:-webkit-autofill,

textarea:-webkit-autofill,

select:-webkit-autofill {

    background-color: red;

    background-image: none;

    color: rgb(0, 0, 0);

}

.spn_hol {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: #fff;

    z-index: 50000;

    opacity: 1;

     -webkit-transition: all 1s;

    -moz-transition: all 1s;

    -o-transition: all 1s;

    transition: all 1s;

}

.spinner {

    position: absolute;

    top: 50%;

    margin-top: -12px;

    left: 50%;

    margin-left: -35px;

    height: 24px;

    width: 70px;

    text-align: center;

    display: block;

}

.spinner > div {

    width: 18px;

    height: 18px;

    background-color: #09688B;

    border-radius: 100%;

    display: inline-block;

    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;

    animation: bouncedelay 1.4s infinite ease-in-out;

    /* Prevent first frame from flickering when animation starts */

    

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}

.spinner .bounce1 {

    -webkit-animation-delay: -0.32s;

    animation-delay: -0.32s;

}

.spinner .bounce2 {

    -webkit-animation-delay: -0.16s;

    animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

    0%, 80%, 100% {

        -webkit-transform: scale(0.0)

    }

    40% {

        -webkit-transform: scale(1.0)

    }

}

@keyframes bouncedelay {

    0%, 80%, 100% {

        transform: scale(0.0);

        -webkit-transform: scale(0.0);

    }

    40% {

        transform: scale(1.0);

        -webkit-transform: scale(1.0);

    }

}



.nuevobox ul {
	text-align: left;
	margin-left: 60px;	
		
}

.nuevobox li {
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
}

.nuevobox li span {
	font-weight: 600;
	font-size: 25px;
	color: #fff;

}


.nuevobox h2{
	font-weight: 800;
	color: #fff;
	padding-top: 15px;
	padding-bottom: 10px;
	
}

.nuevobox {	
	border-radius: 10px; 
	width: 25%; 
	margin: 0 2.33% 40px 0;
	display: inline-grid; 
	-webkit-transition: all .5s;
       -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
		    transition: all .5s;

} 

.nuevobox:hover {	
	-webkit-transform: scale(1.10);
	   -moz-transform: scale(1.10);
	    -ms-transform: scale(1.10);
	     -o-transform: scale(1.10);
	        transform: scale(1.10);
}


@media (max-width: 768px){
	.nuevobox{	
		width: 85%;
		margin:	10px;
	}
	.nuevobox ul{	
		margin-left: 40px;	

	}

}


.galeria {
	display: grid;
	width: 90%;
	margin: auto;
	grid-gap: 10px;
	padding: 3% 0;
	overflow: hidden;
	grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
	box-sizing: border-box;

}

.galeria > a{
	display: block; 
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 6px rgba(0,0,0,.5);
}

.galeria img{
	width: 100%;
	vertical-align: top;
	height: 300px;
	object-fit: cover;
	transition: transform 2.5s;
}

.galeria img:hover {
	
	transform: rotate(6deg) scale(1.2);
}

.light-box {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.6);
	transition: transform .3s ease-in-out;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display:flex;
	justify-content: center;
	align-items: center;
	transform: scale(0);
}

.light-box img{
	padding: 25px;
	width: 60vw;
	max-height: 70vw;
}

.light-box:target {
	transform: scale(1);

}

.close{
	display: block;
	position: absolute;
	top: 40px;
	right: 40px;
	opacity: .8;
	color: #67BCE0;
	font-size: 40px;
}

.next{
	display: block;
	position: absolute;
	opacity: .8;
	color: #67BCE0;
	font-size: 40px;
}

[data-tooltip] {
  --arrow-size: 0px;
  position: relative;
  z-index: 50;
}

/* Positioning and visibility settings of the tooltip */
[data-tooltip]:before,
[data-tooltip]:after {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  left: 50%;

}

/* The actual tooltip with a dynamic width */
[data-tooltip]:before {
  content: attr(data-tooltip);
  padding: 10px 18px;
  min-width: 50px;
  max-width: 300px;
  width: max-content;
  width: -moz-max-content;
  border-radius: 6px;
  font-size: 14px;
  background-color: rgba(59, 72, 80, 0.9);
  background-image: linear-gradient(30deg,
    rgba(59, 72, 80, 0.44),
    rgba(59, 68, 75, 0.44),
    rgba(60, 82, 88, 0.44));
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  white-space: pre-wrap;

}

/* Tooltip arrow */
[data-tooltip]:after {
  content: '';
  border-style: solid;

  border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent;
  transition-duration: 0s; /* If the mouse leaves the element, 
                              the transition effects for the 
                              tooltip arrow are "turned off" */
  transform-origin: bottom;   /* Orientation setting for the
                              slide-down effect */
  transform: translateX(-50%) scaleY(0);
}

/* Tooltip becomes visible at hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}
/* Scales from 0.5 to 1 -> grow effect */
[data-tooltip]:hover:before {
  transition-delay: 0.3s;
  transform: translate(-50%, calc(160px - var(--arrow-size))) scale(1);
}
/* 
  Arrow slide down effect only on mouseenter (NOT on mouseleave)
*/
[data-tooltip]:hover:after {
  transition-delay: 0.5s; /* Starting after the grow effect */
  transition-duration: 0.2s;
  transform: translateX(-50%) scaleY(1);
}
/*
  That's it for the basic tooltip.

  If you want some adjustability
  here are some orientation settings you can use:
*/





/* BOTTOM */