

.page-template-tempalte-dyna-trap {
	padding: 0px 0px 100px;
}
.page-template-tempalte-dyna-trap .how-it-works-section {
  background-color: #fff;
  color: #000;
  text-align: center;
  padding: 80px 0;
}
.page-template-tempalte-dyna-trap .how-it-works {
  position: relative;
/*  max-width: 1070px;*/
  margin: 0 auto;
}
.page-template-tempalte-dyna-trap .how-it-works h2 {
  color: #000;
}
.page-template-tempalte-dyna-trap .how-it-works h3 {
text-align: center;
	
	margin-bottom: 25px;
	color: #000;
	padding-top: 50px;
}
.page-template-tempalte-dyna-trap .how-it-works .how p {
	text-align: center;
	font-size: 19px;
	max-width: 300px;
	margin: 0 auto;
	line-height: 28px;
	color: #000;
}

.page-template-tempalte-dyna-trap .how-it-works .works-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(0, 1fr))[3];
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 713px;
  -webkit-transition: left 0.25s ease-in-out;
  transition: left 0.25s ease-in-out;
  padding-top: 30px;
}
.page-template-tempalte-dyna-trap .how-it-works #ultraviolet {
  overflow: visible;
}
.page-template-tempalte-dyna-trap .how-it-works #mosquito {
	position: absolute;
	left: 0;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	z-index: 2;
	width: 1.82vw;
	max-width: 35px;
	top: -30px;
}
.page-template-tempalte-dyna-trap .how-it-works .works-grid .how svg {
  width: 50%;
  margin: 0 auto;
  display: block;
  position: relative;
  z-index: 4;
}

.how-img {
	height: 180px;
	display: flex;
}
.how-img img {
	vertical-align: middle;
}
.works-grid .how:nth-child(3) .how-img img {
	width: 80%;
    margin-top: -24px;
    margin-bottom: -52px;
    margin-right: 30px;
}
.works-grid .how:nth-child(2) {
    border-right: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
}


/*.page-template-tempalte-dyna-trap .how-it-works #ultraviolet .ray {
  position: relative;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation: 7.25s uv-rays infinite;
  animation: 7.25s uv-rays infinite;
	animation-name: uv-rays;
	animation-timing-function: ease;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
.page-template-tempalte-dyna-trap .how-it-works #fan {
  -webkit-animation: 7.25s fan-rotate infinite;
  animation: 7.25s fan-rotate infinite;
	animation-name: fan-rotate;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.page-template-tempalte-dyna-trap .how-it-works #basket {
  -webkit-animation: basket-rock 7.25s infinite;
  animation: basket-rock 7.25s infinite;
	animation-name: basket-rock;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.page-template-tempalte-dyna-trap .how-it-works #mosquito {
  -webkit-animation: 7.25s mosquito infinite;
  animation: 7.25s mosquito infinite;
  animation-name: mosquito;
}*/

@media (min-width: 769px) {
	@-webkit-keyframes mosquito {
	 0% {
	  left:0;
	  top:15em;
	  opacity:1
	 }
	 15% {
	  opacity:1
	 }
	 31% {
	  left:13%;
	  opacity:0
	 }
	 47% {
	  opacity:1
	 }
	 62% {
	  left:47%;
	  opacity:0
	 }
	 78% {
	  opacity:1
	 }
	 85% {
	  left:81%;
	  -webkit-transform-origin:center left;
	  transform-origin:center left;
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	  top:15em;
	  opacity:1
	 }
	 100% {
	  left:110%;
	  top:25em;
	  -webkit-transform:rotate(45deg);
	  transform:rotate(45deg);
	  opacity:0
	 }
	}
	@keyframes mosquito {
	 0% {
	  left:-20%;
	  top:12.5em;
	  opacity:1
	 }
	 15% {
	  opacity:1
	 }
	 31% {
	  left:13%;
	  opacity:0
	 }
	 47% {
	  opacity:1
	 }
	 62% {
	  left:47%;
	  opacity:0
	 }
	 78% {
	  opacity:1
	 }
	 85% {
	  left:81%;
	  -webkit-transform-origin:center left;
	  transform-origin:center left;
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	  top:12.5em;
	  opacity:1
	 }
	 100% {
	  left:110%;
	  top:22em;
	  -webkit-transform:rotate(45deg);
	  transform:rotate(45deg);
	  opacity:0
	 }
	}
}




@media (max-width: 768px) {
	.page-template-tempalte-dyna-trap .how-it-works .works-grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: unset;
	}
	.page-template-tempalte-dyna-trap .how-it-works .works-grid .how {
		max-width: 300px;
	}
	.page-template-tempalte-dyna-trap .how-it-works #mosquito {
		position: absolute;
		left: 0;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		z-index: 2;
		width: 40px;
		max-width: 40px;
		right: 0;
		margin: 0 auto;
		top: 3em;
	}
	.page-template-tempalte-dyna-trap .how-it-works #basket {
	  -webkit-animation: 7.25s basket-rock infinite;
	  animation: 7.25s basket-rock infinite;
		animation-name: basket-rock;
	  -webkit-transform-origin: center center;
	  transform-origin: center center;
	}
	.page-template-tempalte-dyna-trap .how-it-works #mosquito {
	  -webkit-animation: 7.25s mosquito infinite;
	  animation: 7.25s mosquito infinite;
	  animation-name: mosquito;
	}
	@-webkit-keyframes mosquito {
	 0% {
		right: 0;
		left: 0;
		margin: 0 auto;
		top: 3em;
		opacity:1
	 }
	 38% {
	  top: 11em;
	  opacity:1
	 }
	 45% {
	  top: 36em;
	  opacity:1
	 }
/*	 50% {
	 top: 37.8em;
	  opacity:1
	 }
	 51% {
	  top: 37.8em;
	  opacity:1
	 }
	 55% {
	 top:58em;
	  opacity:1
	 }*/
/*	 60% {
	  top:65em;
	  -webkit-transform-origin:center left;
	  transform-origin:center left;
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	  opacity:1
	 }*/
	 73% {
	  top:61em;
	  -webkit-transform:rotate(45deg);
	  transform:rotate(45deg);
	  opacity:1
	 }
	 100% {
	  top:61em;
	  opacity:0
	 }
	}
/*	@keyframes mosquito {
	 0% {
		right: 0;
		left: 0;
		margin: 0 auto;
		top: 3em;
		opacity:1
	 }
	 15% {
	  top: 11em;
	  opacity:1
	 }
	 36% {
	  top: 31em;
	  opacity:1
	 }
	 50% {
	 top: 37.8em;
	  opacity:1
	 }
	 51% {
	  top: 37.8em;
	  opacity:1
	 }
	 55% {
	 top:58em;
	  opacity:1
	 }
	 60% {
	  top:65em;
	  -webkit-transform-origin:center left;
	  transform-origin:center left;
	  -webkit-transform:rotate(0deg);
	  transform:rotate(0deg);
	  opacity:1
	 }
	 80% {
	  top:65em;
	  -webkit-transform:rotate(45deg);
	  transform:rotate(45deg);
	  opacity:1
	 }
	 100% {
	  top:65em;
	  opacity:1
	 }
	}*/

	.page-template-tempalte-dyna-trap section.product .right-side .description-wrapper {
		margin-top: 50px;
	}
}



@media (max-width: 500px) {
	
	.page-template-tempalte-dyna-trap .how-it-works h2 {
		font-size: 28px;
	}
	.page-template-tempalte-dyna-trap .how-it-works-section {
		padding: 40px 0;
	}
	 .page-template-tempalte-dyna-trap section.additional_product .description ul {
	 	padding-left: 15px;
	 }
}

@-webkit-keyframes uv-rays {
 0% {
  -webkit-transform:rotate(0) scale(1);
  transform:rotate(0) scale(1)
 }
 7.75% {
  -webkit-transform:rotate(90deg) scale(1.25);
  transform:rotate(90deg) scale(1.25)
 }
 15.5% {
  -webkit-transform:rotate(180deg) scale(1);
  transform:rotate(180deg) scale(1)
 }
 23.25% {
  -webkit-transform:rotate(270deg) scale(1.5);
  transform:rotate(270deg) scale(1.5)
 }
 31% {
  -webkit-transform:rotate(360deg) scale(1);
  transform:rotate(360deg) scale(1)
 }
 100% {
  -webkit-transform:rotate(360deg) scale(1);
  transform:rotate(360deg) scale(1)
 }
}
@keyframes uv-rays {
 0% {
  -webkit-transform:rotate(0) scale(1);
  transform:rotate(0) scale(1)
 }
 7.75% {
  -webkit-transform:rotate(90deg) scale(1.25);
  transform:rotate(90deg) scale(1.25)
 }
 15.5% {
  -webkit-transform:rotate(180deg) scale(1);
  transform:rotate(180deg) scale(1)
 }
 23.25% {
  -webkit-transform:rotate(270deg) scale(1.5);
  transform:rotate(270deg) scale(1.5)
 }
 31% {
  -webkit-transform:rotate(360deg) scale(1);
  transform:rotate(360deg) scale(1)
 }
 100% {
  -webkit-transform:rotate(360deg) scale(1);
  transform:rotate(360deg) scale(1)
 }
}
@-webkit-keyframes fan-rotate {
 0% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 36% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 62% {
  -webkit-transform:rotate(720deg);
  transform:rotate(720deg)
 }
 100% {
  -webkit-transform:rotate(720deg);
  transform:rotate(720deg)
 }
}
@keyframes fan-rotate {
 0% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 36% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 62% {
  -webkit-transform:rotate(720deg);
  transform:rotate(720deg)
 }
 100% {
  -webkit-transform:rotate(720deg);
  transform:rotate(720deg)
 }
}
@-webkit-keyframes basket-rock {
 0% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 68% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 73% {
  -webkit-transform:rotate(-50deg);
  transform:rotate(-50deg)
 }
 82% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 89% {
  -webkit-transform:rotate(50deg);
  transform:rotate(50deg)
 }
 96% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
}
@keyframes basket-rock {
 0% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 68% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 73% {
  -webkit-transform:rotate(-50deg);
  transform:rotate(-50deg)
 }
 82% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
 89% {
  -webkit-transform:rotate(50deg);
  transform:rotate(50deg)
 }
 96% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
}
