.power_iconbox_1{
position: relative;
background: #999;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #333;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
text-shadow: none; -webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1:hover{
position: relative;
background: #686868;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #888;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
text-shadow: none; }
.power_iconbox_1 .power_iconbox_wrapper{
background: #f9f9f9;
text-shadow: none; border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #333;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1:hover .power_iconbox_wrapper{
background: #efefef;
border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #333;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
}
.power_iconbox_1 .power_iconbox_icon{
position: relative;
font-size: 36px;
color: #202020;
width: 100px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1:hover .power_iconbox_icon{
color: #222;
}
.power_iconbox_1 .power_iconbox_wrapper img{
margin-top: 0px;
}
.power_iconbox_1 .power_iconbox_wrapper .secondary_img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1:hover .power_iconbox_wrapper .primary_img {
opacity: 0;
visibility: hidden;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1:hover .power_iconbox_wrapper .secondary_img {
opacity: 1;
visibility: visible;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1 .power_iconbox_wrapper .power_iconbox_content h3{
font-family: inherit;
font-size: 20px;
line-height: 30px;
font-weight: 600;
font-style: normal; text-transform: capitalize; text-decoration: none; color: #202020;
letter-spacing: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-shadow: none; -webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1:hover .power_iconbox_wrapper .power_iconbox_content h3{
color: #222;
}
.power_iconbox_1 .power_iconbox_wrapper .power_iconbox_content p{
font-family: inherit;
font-size: 14px;
line-height: 24px;
font-weight: 400;
font-style: normal; text-transform: none; text-decoration: none; color: #202020;
letter-spacing: 0px;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-shadow: none; -webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_1:hover .power_iconbox_wrapper .power_iconbox_content p{
color: #222;
} .power_iconbox_2{
position: relative;
margin: 0px 0px 60px 0px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_2 .power_iconbox_wrapper{
text-shadow: none; border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #0b2e57;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
display: block;
text-align: left;
}
.power_iconbox_2 .power_iconbox_image{
position: relative;
}
.power_iconbox_2 .power_iconbox_image img{
width: 100%;
}
.power_iconbox_2 .power_iconbox_wrapper .power_iconbox_content{
position: relative;
background: #fff;
padding: 30px 30px 50px 30px;
margin: -30px 30px 0px 30px;
-webkit-box-shadow: 0px 15px 30px rgba(28, 30, 78, 0.07);
box-shadow: 0px 15px 30px rgba(28, 30, 78, 0.07);
}
.power_iconbox_2 .power_iconbox_wrapper .power_iconbox_content h3{
font-size: 18px;
line-height: 30px;
color: #1e283c;
margin-bottom: 10px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_2:hover .power_iconbox_wrapper .power_iconbox_content h3{
color: #0092ff;
}
.power_iconbox_2 .power_iconbox_wrapper .power_iconbox_content p{
color: #50668f;
line-height: 28px;
font-weight: 600;
margin-bottom: 0px;
}
.power_iconbox_2 .power_iconbox_wrapper .power_iconbox_icon{
position: absolute;
left: 50%;
bottom: -25px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.power_iconbox_2 .power_iconbox_wrapper .power_iconbox_icon a{
position: relative;
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
text-align: center;
font-size: 18px;
color: #fff;
border-radius: 100%;
margin: 0 auto;
background: #0092ff;
-moz-box-shadow: -3px 0px 15px rgba(71, 89, 216, 0.4);
-webkit-box-shadow: -3px 0px 15px rgba(71, 89, 216, 0.4);
box-shadow: -3px 0px 15px rgba(71, 89, 216, 0.4);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_2 .power_iconbox_wrapper .power_iconbox_icon a:hover{
background: rgb(0,146,255);
background: -moz-linear-gradient(90deg, rgba(0,146,255,1) 0%, rgba(40,90,204,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,146,255,1) 0%, rgba(40,90,204,1) 100%);
background: linear-gradient(90deg, rgba(0,146,255,1) 0%, rgba(40,90,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0092ff",endColorstr="#285acc",GradientType=1);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_2 .power_iconbox_wrapper .power_iconbox_icon a:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 60px;
height: 60px;
z-index: -1;
background: #66bdff;
border: 5px solid #c7e4fb;
border-radius: 100%;
animation: pulse-icon 1500ms ease-out infinite;
}
@keyframes pulse-icon {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
} .services_home2{
background: url(//gerald-lange.de/wp-content/plugins/power-elements-elementor-add-on/assets/images/line.png);
background-position: center;
background-repeat: no-repeat;
}
.power_iconbox_3{
position: relative;
margin: 0px 0px 60px 0px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_3 .power_iconbox_wrapper{
text-shadow: none; border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #0b2e57;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
display: block;
text-align: center;
}
.power_iconbox_3 .power_iconbox_image{
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 100%;
}
.power_iconbox_3 .power_iconbox_image:before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(23, 37, 67, 0.93);
border-radius: 100%;
-moz-transform: skew(0deg, -30deg);
-webkit-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
opacity: 0;
visibility: hidden;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_3:hover .power_iconbox_image:before{
-moz-transform:none;
-webkit-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
opacity: 1;
visibility: visible;
}
.power_iconbox_3 .power_iconbox_image img{
width: 100%;
height: 100%;
border-radius: 100%;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_content{
position: relative;
background: #fff;
padding: 20px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_content .shadow_image{
opacity: 0;
visibility: hidden;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_3:hover .power_iconbox_wrapper .power_iconbox_content .shadow_image{
opacity: 1;
visibility: visible;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_content h3{
color: #1e283c;
margin-bottom: 10px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_3:hover .power_iconbox_wrapper .power_iconbox_content h3{
color: #0092ff;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_content p{
color: #50668f;
line-height: 28px;
font-weight: 600;
margin-bottom: 0px;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_icon{
position: absolute;
left: 50%;
top: calc(100% - 25px);
z-index: 1;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.power_iconbox_3:hover .power_iconbox_wrapper .power_iconbox_icon{
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_icon a{
position: relative;
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
text-align: center;
font-size: 18px;
color: #fff;
border-radius: 100%;
margin: 0 auto;
background: #0092ff;
-moz-box-shadow: -3px 0px 15px rgba(71, 89, 216, 0.4);
-webkit-box-shadow: -3px 0px 15px rgba(71, 89, 216, 0.4);
box-shadow: -3px 0px 15px rgba(71, 89, 216, 0.4);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_icon a:hover{
background: rgb(0,146,255);
background: -moz-linear-gradient(90deg, rgba(0,146,255,1) 0%, rgba(40,90,204,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(0,146,255,1) 0%, rgba(40,90,204,1) 100%);
background: linear-gradient(90deg, rgba(0,146,255,1) 0%, rgba(40,90,204,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0092ff",endColorstr="#285acc",GradientType=1);
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_icon a:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 60px;
height: 60px;
z-index: -1;
background: #66bdff;
border: 5px solid #c7e4fb;
border-radius: 100%;
animation: pulse-icon 1500ms ease-out infinite;
}
.power_iconbox_3:hover .power_iconbox_wrapper .power_iconbox_icon a:before {
width: 65px;
height: 65px;
border: 7px solid #c7e4fb;
}
@keyframes pulse-icon {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_icon a i{
opacity: 0;
visibility: hidden;
}
.power_iconbox_3:hover .power_iconbox_wrapper .power_iconbox_icon a i{
opacity: 1;
visibility: visible;
}
.power_iconbox_3 .power_iconbox_wrapper .power_iconbox_icon a h5{
margin: 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.power_iconbox_3:hover .power_iconbox_wrapper .power_iconbox_icon a h5{
opacity: 0;
visibility: hidden;
} .power_iconbox_4{
position: relative;
margin: 0px 0px 60px 0px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_4 .power_iconbox_wrapper{
text-shadow: none; border-width: 0px 0px 0px 0px;
border-style: solid;
border-color: #0b2e57;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
display: block;
text-align: left;
}
.power_iconbox_4 .power_iconbox_image{
position: relative;
}
.power_iconbox_4 .power_iconbox_image img{
width: 100%;
}
.power_iconbox_4 .power_iconbox_image .power_iconbox_icon img{
max-width: 34px;
}
.power_iconbox_4 .power_iconbox_wrapper .power_iconbox_content{
position: relative;
background: #fff;
padding: 30px 30px 50px 30px;
margin: 0px 0px 0px 0px;
-webkit-box-shadow: 0px 15px 30px rgba(28, 30, 78, 0.07);
box-shadow: 0px 15px 30px rgba(28, 30, 78, 0.07);
}
.power_iconbox_4 .power_iconbox_wrapper .power_iconbox_content h3{
color: #1e283c;
margin-bottom: 10px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_4:hover .power_iconbox_wrapper .power_iconbox_content h3{
color: #0092ff;
}
.power_iconbox_4 .power_iconbox_wrapper .power_iconbox_content p{
color: #50668f;
line-height: 28px;
font-weight: 600;
margin-bottom: 0px;
}
.power_iconbox_4 .power_iconbox_wrapper .power_iconbox_icon{
position: absolute;
right: 50px;
bottom: -37px;
z-index: 1;
border-radius: 100%;
-moz-box-shadow: 0px 15px 15px rgba(28, 30, 78, 0.15);
-webkit-box-shadow: 0px 15px 15px rgba(28, 30, 78, 0.15);
box-shadow: 0px 15px 15px rgba(28, 30, 78, 0.15);
}
.power_iconbox_4 .power_iconbox_wrapper .power_iconbox_icon a{
position: relative;
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
text-align: center;
font-size: 18px;
color: #0092ff;
border-radius: 100%;
margin: 0 auto;
background: #fff;
}
.power_iconbox_4 .power_iconbox_wrapper .power_iconbox_icon a:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 85px;
height: 85px;
z-index: -1;
border: 8px solid rgba(255, 255, 255, 0.5);
border-radius: 100%;
} .srv_top_part{
margin-bottom: 90px;
}
.srv_top_part .srv_top_header{
padding-right: 80px;
}
.srv_top_part .srv_top_header h6{
text-transform: uppercase;
letter-spacing: 2px;
color: #0092ff;
margin-bottom: 25px;
}
.srv_top_part .srv_top_content{
padding-top: 40px;
}
.srv_top_part .srv_top_content h5 {
line-height: 30px;
font-weight: 500;
color: #50668f;
margin-bottom: 30px;
}
.srv_top_part .srv_top_content .power_button_group{
text-align: left;
}
.power_iconbox_5{
position: relative;
background: #fff;
padding: 60px 60px;
margin-left: 15px;
margin-right: 15px;
margin-top: 15px;
margin-bottom: 15px;
-moz-box-shadow: 2px 0px 13px rgba(28, 30, 78, 0.07);
-webkit-box-shadow: 2px 0px 13px rgba(28, 30, 78, 0.07);
box-shadow: 2px 0px 13px rgba(28, 30, 78, 0.07);
}
.power_iconbox_5 .power_iconbox_wrapper{
display: flex;
}
.power_iconbox_5:hover{
background: rgb(0,146,255);
background: -moz-linear-gradient(90deg, #0092ff 0%, #285acc 100%);
background: -webkit-linear-gradient(90deg, #0092ff 0%, #285acc 100%);
background: linear-gradient(90deg, #0092ff 0%, #285acc 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0092ff",endColorstr="#285acc",GradientType=1);
}
.power_iconbox_5 .power_iconbox_wrapper .power_iconbox_content h3{
position: relative;
z-index: 1;
margin-top: 0px;
margin-bottom: 15px;
color: #1e283c;
line-height: 26px;
}
.power_iconbox_5 .power_iconbox_wrapper .power_iconbox_content p{
position: relative;
z-index: 1;
font-weight: 600;
line-height: 28px;
color: #4c668d;
margin-bottom: 0px;
}
.power_iconbox_5:hover .power_iconbox_wrapper .power_iconbox_content h3,
.power_iconbox_5:hover .power_iconbox_wrapper .power_iconbox_content p{
color: #fff;
}
.power_iconbox_5 .power_iconbox_wrapper .power_iconbox_icon{
position: relative;
min-width: 60px;
margin-right: 20px;
}
.power_iconbox_5 .power_iconbox_wrapper .power_iconbox_icon img{
width: auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.power_iconbox_5 .power_iconbox_wrapper .power_iconbox_icon img.secondary_img{
position: absolute;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
}
.power_iconbox_5:hover .power_iconbox_wrapper img.primary_img{
opacity: 0;
visibility: hidden;
}
.power_iconbox_5:hover .power_iconbox_wrapper img.secondary_img{
opacity: 1;
visibility: visible;
}
.power_iconbox_5 .power_iconbox_wrapper .power_iconbox_content img.shadow_img{
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
width: auto;
}
.power_iconbox_5:hover .power_iconbox_wrapper .power_iconbox_content img.shadow_img{
opacity: 0.08;
}
@media screen and (max-width: 600px){
.power_iconbox_5 .power_iconbox_wrapper{
display: block;
}
.power_iconbox_5 .power_iconbox_wrapper .power_iconbox_icon{
margin-right: 0px;
margin-bottom: 20px;
}
}.power_button_group{
position: relative;
z-index: 1;
display: block;
margin: 10px 5px;
text-align: center;
}
.power_button{
position: relative;
width: auto;
display: inline-block;
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-align: center;
text-decoration: none;
outline: none;
box-shadow: none;
padding: 12px 45px;
background: transparent;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #222;
-webkit-border-radius: 0px;
border-radius: 0px;
overflow: hidden;
cursor: pointer;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button:hover{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button span.button_value {
position: relative;
z-index: 2;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.power_button span.power_button_icon{
position: relative;
z-index: 2;
}
.power_button.power_button_icon_left .power_button_icon{
margin-right: 15px;
}
.power_button.power_button_icon_right .power_button_icon{
margin-left: 15px;
}
.power_button:before,
.power_button:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 1;
z-index: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
} .power_button{
color: #222;
}
.power_button:hover{
color: #fff;
} .power_button.effect_1:before {
right: 100%;
top: 0;
}
.power_button.effect_1:hover::before {
right: 0;
}
.power_button.effect_1:after {
left: 0;
top: 0;
}
.power_button.effect_1:hover::after {
left: 100%;
} .power_button.effect_2:before {
bottom: 100%;
left: 0;
}
.power_button.effect_2:hover::before {
bottom: 0;
}
.power_button.effect_2:after {
left: 0;
top: 0;
}
.power_button.effect_2:hover::after {
top: 100%;
} .power_button.effect_3:before {
left: 100%;
top: 0;
}
.power_button.effect_3:hover::before {
left: 0;
}
.power_button.effect_3:after {
right: 0;
top: 0;
}
.power_button.effect_3:hover::after {
right: 100%;
} .power_button.effect_4:before {
top: 100%;
left: 0;
}
.power_button.effect_4:hover::before {
top: 0;
}
.power_button.effect_4:after {
bottom: 0;
left: 0;
}
.power_button.effect_4:hover::after {
bottom: 100%;
} .power_button.effect_5:before {
left: 0;
top: 0;
transform: scale(0);
}
.power_button.effect_5:hover::before {
right: 0;
transform: scale(1);
}
.power_button.effect_5:after {
left: 0;
top: 0;
transform: scale(1);
}
.power_button.effect_5:hover::after {
left: 0;
transform: scale(0);
} .power_button.effect_6:before {
right: 90%;
top: 0;
}
.power_button.effect_6:hover::before {
right: -90%;
}
.power_button.effect_6:after {
left: 90%;
top: 0;
}
.power_button.effect_6:hover::after {
left: -90%;
} .power_button.effect_7:before {
top: 90%;
left: 0;
}
.power_button.effect_7:hover::before {
top: -50%;
transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.power_button.effect_7:after {
bottom: 90%;
left: 0;
}
.power_button.effect_7:hover::after {
bottom: -50%;
transform: skewX(45deg);
-webkit-transform: skewX(45deg);
} .power_button.effect_8:before {
top: 90%;
left: 0;
}
.power_button.effect_8:hover::before {
top: -50%;
transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.power_button.effect_8:after {
bottom: 90%;
left: 0;
}
.power_button.effect_8:hover::after {
bottom: -50%;
transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
} .power_button.effect_9:before{
top: 0;
left: 100%;
}
.power_button.effect_9:hover:before{
top: 0;
left: 50%;
}
.power_button.effect_9:after{
top: 0;
right: 0;
}
.power_button.effect_9:hover:after{
top: 0;
right: 50%;
}
.power_button.effect_9:hover {
border-radius: 30px;
} .power_button.effect_10:before{
top: 0;
right: 100%;
}
.power_button.effect_10:hover:before{
top: 0;
right: 0;
}
.power_button.effect_10:after {
top: 0;
left: 0;
}
.power_button.effect_10:hover:after {
top: 0;
left: 100%;
}
.power_button.power_button_icon_left.effect_10 .power_button_icon{
position: absolute;
left: 0%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button.power_button_icon_left.effect_10:hover .power_button_icon{
left: -25%;
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button.power_button_icon_right.effect_10 .power_button_icon{
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
margin-left: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button.power_button_icon_right.effect_10:hover .power_button_icon{
left: 130%;
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
} .power_button.effect_11:before {
left: 0;
bottom: 100%;
}
.power_button.effect_11:hover:before {
left: 0;
bottom: 0;
}
.power_button.effect_11:after{
top: 0;
left: 0;
}
.power_button.effect_11:hover:after{
top: 100%;
left: 0;
}
.power_button.power_button_icon_left.effect_11 .power_button_icon{
position: absolute;
left: 0%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button.power_button_icon_left.effect_11:hover .power_button_icon{
left: -50%;
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button.power_button_icon_right.effect_11 .power_button_icon{
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
margin-left: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.power_button.power_button_icon_right.effect_11:hover .power_button_icon{
left: 115%;
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
} .power_button.effect_12:before {
content: attr(data-text);
right: 100%;
top: 0;
opacity: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.power_button.effect_12:hover:before {
right: 0%;
opacity: 1;
}
.power_button.effect_12:hover span {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
}
.power_button.effect_12:after{
top: 0;
left: 0;
}
.power_button.effect_12:hover:after{
top: 100%;
left: 0;
} .power_button.effect_13:before {
content: attr(data-text);
right: 0;
bottom: 100%;
opacity: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.power_button.effect_13:hover:before {
bottom: 0%;
opacity: 1;
}
.power_button.effect_13:hover span {
-webkit-transform: translateY(200%);
-moz-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%);
}
.power_button.effect_13:after{
top: 0;
left: 0;
}
.power_button.effect_13:hover:after{
top: 100%;
left: 0;
}