/*
Theme Name: child_porvoon
Version: 1.0
Description: A child theme of Hello Elementor
Author: admin
Template: hello-elementor
*/

@import url("../hello-elementor/style.css");

/*checkbox*/
.elementor-field-option input[type="checkbox"] {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none !important;
  cursor: pointer;
}
.elementor-field-option [type="checkbox"]{
  position: absolute;
  opacity: 0;
	height:0px
}
.elementor-field-option [type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  padding: 0;
	padding-left: 35px;
/*display: flex !important;*/
	display:inline-block !important;
	line-height: 26px;
	/*line-height: 26px;
  font-size: 15px !important;
font-weight: 400 !important;
	margin-bottom:20px;*/
}
.elementor-field-option [type="checkbox"] + label:before {
  content: "";
 margin-right: 0px;
display: inline-block;
width: 20px;
height: 20px;
background: #fff;
  border: 1px solid #000;
margin-top: 0px;
position: absolute !important;
left: 0px;
top: 2px;
  border-radius: 4px;
}
.elementor-field-option [type="checkbox"]:checked + label:before {
  background: #000; border-color:#000
}
.elementor-field-option [type="checkbox"]:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.elementor-field-option [type="checkbox"]:disabled + label:before {
  box-shadow: none;
  background: #fff;
}
.elementor-field-option [type="checkbox"]:checked + label:after {
  content: "";
   content: "";
  display: block;
  position: absolute;
top: 5px;
  left: 7px;
  width: 6px;
  height: 11px;
border: solid #fff;
border-width: 0 2px 2px 0;
  transform: rotate(45deg); 
}

/*Radio*/
.elementor-field-option [type="radio"]:checked,
.elementor-field-option [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.elementor-field-option [type="radio"]:checked + label,
.elementor-field-option [type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 32px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block !important;
  color: #000; 
  padding-top: 4px;
  margin-right: 0px;
  padding-bottom: 15px;
}
.elementor-field-option [type="radio"]:checked + label:before,
.elementor-field-option [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
    border-radius:100%;
	background:#fff;
}
.elementor-field-option [type="radio"]:checked + label:after {
    content: '';
	 display: block;
	position:absolute;
   top: 8px;
  left: 7px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.elementor-field-option [type="radio"]:checked + label:before{  background: #000; border-color:#000}

/*FADEIN ANIMATION CHANGE*/
.fadeInUp {
  animation-name: fadeInUpCustom !important;
}
@keyframes fadeInUpCustom {
	from {
		opacity:0;
		transform:translate3d(0,30%,0) 
	}
	to {opacity:1;transform:none}
}

.fadeInDown {
  animation-name: fadeInDownCustom !important;
}
@keyframes fadeInDownCustom 
	{from {
		opacity:0;
		transform:translate3d(0,-30%,0)
	}
	to {
		opacity:1;transform:none
		}
}

.fadeInLeft {
  animation-name: fadeInLeftCustom !important;
}
@keyframes fadeInLeftCustom
	{from {
		opacity:0;
		transform:translate3d(-30%,0,0)
	}
	to { 
		opacity:1;transform:none
		}
}

.fadeInRight {
  animation-name:fadeInRightCustom !important
}
@keyframes fadeInRightCustom {
  from {
    opacity:0;
    transform:translate3d(30%,0,0)
  }
  to {
    opacity:1;
    transform:none
  }
}

.zoomIn {
  animation-name:zoomInCustom !important
}
@keyframes zoomInCustom {
  from {
    opacity:0;
    transform:scale3d(.6,.6,.6)
  }
  50% {
    opacity:1
	
  }
}






/*BUTTON ANIMATION*/
.customBg .elementor-button{ overflow:hidden; position:relative;   transition: all .4s !important; }
.customBg .elementor-button::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 0px;
  height: 0px;
  background: #EE2226;
  z-index: -1;
  transition: width 0.4s ease, height 0.4s ease;
  transform-origin: top left;
	display:inline-block; border-radius:100px; z-index: 0
}
.customBg .elementor-button:hover::before {
  width: 120%;
  height: 120%;

}
.customBg .elementor-button .elementor-button-content-wrapper{ z-index:1; position:relative}

/*LINE HOVER ANIMATION*/
.lineHover p a{ position:relative; display:inline-block}
.lineHover ul.elementor-icon-list-items li a:after, .lineHover p a:after{ content:''; width:100%; height:1px; background:#fff; left:0px; bottom:2px; position:absolute; opacity:0;  transition: all 0.3s ease}
.lineHover ul.elementor-icon-list-items li a:hover:after, .lineHover p a:hover:after{ opacity:1;}

/*LINE GROW FROM CENTER ANIMATION*/
.lineGrow .elementor-icon-box-title a {
  position: relative;
  padding-bottom: 6px;          /* space for the underline */
}

/* the line */
.lineGrow .elementor-icon-box-title a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0); /* start collapsed at center */
  transform-origin: center;
  height: 2px;                   /* line thickness */
  width: 100%;                   /* covers full text width */
  background: #EE2226;;           /* line color */
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1);
  will-change: transform;
  border-radius: 0px;
}

/* on hover (or focus for keyboard users) */
.lineGrow .elementor-icon-box-title a:hover::after {
  transform: translateX(-50%) scaleX(1); /* grow to full width from center */
}

.hoverDown .elementor-button .elementor-button-text{ transition: all 0.3s ease!important;
  transition: padding-left 0.3s ease;
  padding-left: 12px; }
.hoverDown .elementor-button:hover .elementor-button-text{ padding-left:0px;}
.hoverDown .elementor-button .elementor-button-icon{transition: all 0.3s;   opacity: 1;}
.hoverDown .elementor-button:hover .elementor-button-icon{ opacity: 0; width:0px }
.hoverDown .elementor-button .elementor-button-text:after{ content:''; background-image: url("https://porvoonautopiste.fi/wp-content/uploads/2025/09/turn-down.svg"); display:inline-axis;  display: none;
  margin-left: 12px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-top: -2px; transition: all 0.3s; }
.hoverDown .elementor-button:hover .elementor-button-text:after{ display:inline-block;}

.hoverShow{ opacity:0; transition: all 0.3s;}
.hoverMain{ box-shadow:none !important;}
.hoverMain:hover{ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1) !important}
.hoverMain:hover .hoverShow{ opacity:1}
.hoverMain:hover .elementor-image-box-description{ color:#344152}


.testiCarousel .swiper-wrapper{ padding-bottom:15px !important}

.deensimc-img-wrapper .deensimc-img img{filter: grayscale(100%);      opacity: 0.5; object-fit: contain !important;}
.deensimc-img-wrapper .deensimc-img img:hover{ opacity:1}




@media screen and (min-width: 768px) {
/* Container setup */
.ftNav nav li a {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /*height: 1em;
  line-height: 1em;*/
  transition: color 0.3s;
	padding-top:0px !important;
	padding-bottom:0px !important
}

/* Inner text (default) */
.ftNav nav li a span {
  display: block;
  transform: translateY(0%);
  transition: transform 0.4s ease;
}

/* Pseudo element for hover text */
.ftNav nav li a::before {
  content: attr(data-text);
  position: absolute;
  top: 100%;

  width: 100%;
  display: block;
  transform: translateY(0%);
  transition: transform 0.4s ease;
  color: inherit;
}

/* Animate both on hover */
.ftNav nav li a:hover span {
  transform: translateY(-100%);
}

.ftNav nav li a:hover::before {
  transform: translateY(-100%) !important;
}
}



@media screen and (max-width: 991px) and (min-width: 576px)
{
.tabAbsolute{ position:absolute !important; right:15px !important}
}

@media screen and (max-width: 575px)
{
.ftNav nav ul{flex-direction: column !important;  align-items: center;}
	.hoverShow{ opacity:1; transition: all 0.3s;}
	.hoverMain{  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1) !important}
	.testiCarousel .elementor-image-box-wrapper{ display: flex; align-items:center}
	.testiCarousel .elementor-image-box-wrapper .elementor-image-box-img{ margin-right:15px !important}
}