| Current Path : /home/ereika83/public_html/wp-content/plugins/bbpowerpack/modules/pp-devices/css/ |
| Current File : /home/ereika83/public_html/wp-content/plugins/bbpowerpack/modules/pp-devices/css/frontend.css |
.pp-devices-wrapper {
width:100%;
text-align: center;
transition: .3s cubic-bezier(.42,0,.2,1);
}
.pp-device-wrap {
margin: 0 auto;
display: inline-block;
max-width: 100%;
transition: all .3s cubic-bezier(.42,0,.2,1);
transition-property: width,padding-bottom;
}
.pp-device-wrap.pp-device-phone {
width: 277px;
}
.pp-device-wrap.pp-device-tablet {
width: 430px;
}
.pp-device-wrap.pp-device-laptop {
width: 645px;
}
.pp-device-wrap.pp-device-desktop {
width: 645px;
}
.pp-device-wrap.pp-device-window {
width: 1000px;
}
.pp-device {
position: relative;
height: 0;
padding-bottom: 207.22022%;
max-width: 100%;
width: 100%;
transition: all .3s cubic-bezier(.42,0,.2,1);
}
.pp-device.has-orientation-control {
margin-bottom: 52px;
}
.pp-device-shape {
width: 100%;
}
.pp-device-orientation {
position: absolute;
bottom: 0;
left: 50%;
z-index: 99;
transform: translateY(calc(100% + 24px)) translateX(-50%);
font-size: 28px;
color: rgba(0,0,0,.1);
cursor: pointer;
transition: all .3s cubic-bezier(.42,0,.2,1);
color:lightgrey;
text-align: center;
}
.pp-device-orientation:hover {
color:grey;
}
.pp-device-orientation:before {
display: block;
}
.pp-device-media {
position: absolute;
left: 50%;
transition: all .3s cubic-bezier(.42,0,.2,1);
border-radius: 3px;
transform: translateX(-50%);
width: 90.69767%;
top: 10.8%;
background: rgba(255,255,255,.2);
overflow: hidden;
display: -ms-flexbox;
display: flex;
border-radius: 3px;
transition: all .3s cubic-bezier(.42,0,.2,1);
z-index: 2;
align-items: flex-start;
flex-direction: row;
}
.pp-device-orientation-landscape .pp-device-wrap.pp-device-phone {
width: 574px;
}
.pp-device-orientation-landscape .pp-device-wrap .pp-device-shape svg {
transform: rotate(90deg);
transition: all .3s cubic-bezier(.42,0,.2,1);
}
.pp-device-orientation-portrait .pp-device-wrap .pp-device-shape svg {
transform: rotate(0deg);
transition: all .3s cubic-bezier(.42,0,.2,1);
}
.pp-device-media-screen {
overflow: hidden;
display: -ms-flexbox;
display: flex;
border-radius: 3px;
transition: all .3s cubic-bezier(.42,0,.2,1);
z-index: 2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
align-items: center;
}
.pp-device-media-inner {
padding-bottom: 177.7%;
background-color: rgba(255,255,255,.2);
transition: all .3s cubic-bezier(.42,0,.2,1);
}
.pp-device-orientation-landscape .pp-device-media-inner {
padding-bottom: 56.25%;
}
.pp-device-media-screen-inner figure{
margin:0;
}
.pp-device-media-screen-inner,.pp-device-media-screen-inner figure, .pp-device-media-screen-inner img {
width:100%;
transition: all .3s cubic-bezier(.42,0,.2,1);
}
.pp-device-media-screen-inner img {
vertical-align: middle;
}
.pp-device-orientation-landscape .pp-device-shape {
width: 48.25784%;
top: 50.5%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
}
.pp-device-orientation-landscape .pp-device-media {
top: 50%;
transform: translateY(-50%) translateX(-50%);
width: 76%;
}
.pp-device-orientation-landscape .pp-device {
padding-bottom: 48.257%;
height: auto;
}
.pp-device-orientation .pp-mobile-icon-landscape {
transform: rotate(0deg);
}
.pp-device-orientation .pp-mobile-icon-portrait {
transform: rotate(90deg);
}
.pp-device-tablet.pp-device-wrap .pp-device {
padding-bottom: 137%;
}
.pp-device-tablet.pp-device-wrap .pp-device-media-inner {
padding-bottom: 130%;
}
.pp-device-tablet.pp-device-wrap .pp-device-media {
top: 8%;
}
.pp-device-orientation-landscape .pp-device-tablet .pp-device-media {
top: 50%;
width: 87%;
}
.pp-device-orientation-landscape .pp-device-tablet .pp-device-shape {
width: 72.26%;
}
.pp-device-orientation-landscape .pp-device-tablet.pp-device-wrap {
width: 595px;
}
.pp-device-orientation-landscape .pp-device-tablet .pp-device {
padding-bottom: 73%;
}
.pp-device-orientation-landscape .pp-device-tablet .pp-device-media-inner {
padding-bottom: 75%;
}
.pp-device-laptop .pp-device{
padding-bottom: 57.4%;
}
.pp-device-laptop .pp-device-media {
width: 76%;
top: 6%;
}
.pp-device-laptop .pp-device-media-inner {
padding-bottom: 64%;
}
.pp-device-desktop .pp-device{
padding-bottom: 88.49162%;
}
.pp-device-desktop .pp-device-media{
top: 5%;
width: 92.2905%;
}
.pp-device-desktop .pp-device-media-inner{
padding-bottom: 56.41646%;
}
.pp-device-window .pp-device {
padding-bottom: 66%;
}
.pp-device-window .pp-device-media {
transform: none;
top: 4.5%;
top: 7%;
left: auto;
border-radius: 0;
width: 100%;
}
.pp-device-window .pp-device-media-screen {
border-radius : 0;
}
.pp-device-window .pp-device-media-inner {
padding-bottom:60%;
}
.pp-devices-content .pp-player-controls-overlay .pp-player-control {
cursor: pointer;
vertical-align: middle;
position: relative;
width: 60px;
height: 60px;
font-size: 60px;
display: inline-block;
}
.pp-devices-content .pp-player-control,
.pp-devices-content .pp-player-controls-bar,
.pp-devices-content .pp-video-button {
color: #000000;
background-color: #FFFFFF;
opacity: 0.9;
}
.pp-devices-content .pp-player-controls-overlay .pp-player-control:before {
margin: 10%;
}
.pp-devices-content .pp-player-controls-overlay .pp-player-control:before {
font-size: .5em;
top: 25%;
position: absolute;
display: inline-block;
left: 28%;
}
.pp-devices-content .pp-video-player[poster]{
object-fit: cover;
}
.pp-devices-content .pp-video-player-cover:after {
background-color: #000000;
opacity: 0.96;
}
.pp-devices-content .pp-player-cover:after {
content: "";
}
.pp-devices-content .pp-video-player-controls {
text-align: center;
position: absolute;
top: calc( 50% - 30px );
width: 100%;
}
.pp-devices-content .pp-player-control {
border-radius: 50%;
line-height: 66%;
}
.pp-devices-content .pp-player-cover {
transition: opacity .2s linear;
}
.pp-devices-content .pp-player-cover,
.pp-devices-content .pp-player-cover:after,
.pp-devices-content .pp-device-media-screen {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
}
.pp-devices-content .pp-video-player .pp-player-controls-overlay,
.pp-devices-content .pp-video-player .pp-player-cover {
opacity: 1;
}
.pp-devices-content .pp-video-player-controls-bar-wrapper {
position: absolute;
bottom: 0;
right: 0;
left: 0;
transition: transform .4s cubic-bezier(.42,0,.2,1);
}
.pp-devices-content .pp-player-controls-bar,
.pp-devices-content .pp-player-controls-overlay .pp-player-control {
transition: background-color .2s linear,box-shadow .2s linear,opacity .2s linear,color .2s linear;
}
.pp-devices-content .pp-player-controls-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: .5%;
align-items: baseline;
}
.pp-devices-content .pp-player-control-icon {
padding: 0 6px;
}
.pp-devices-content .pp-player-control-icon,
.pp-devices-content .pp-player-control-progress {
cursor: pointer;
font-size: 12px;
height: 20%;
line-height: 0;
}
.pp-devices-content .pp-player-control {
cursor: default;
white-space: nowrap;
}
.pp-devices-content .pp-player-controls-bar .pp-player-control-icon {
font-size: 12px;
cursor: pointer;
}
.pp-devices-content .pp-player-controls-bar .pp-player-controls-time,
.pp-devices-content .pp-player-controls-bar .pp-player-controls-duration {
padding: 3px;
font-size: 12px;
}
.pp-devices-content .pp-player-control-progress-track {
opacity: .2;
right: 0;
}
.pp-devices-content .pp-player-control-progress-outer {
background: black;
height: 100%;
left: 0;
}
.pp-devices-content .pp-player-control-progress-inner {
position: absolute;
width: 0%;
background: black;
top: 0;
left: 0;
height: 100%;
}
.pp-devices-content .pp-player-control-progress{
-ms-flex-preferred-size: 80%;
-ms-flex-positive: 1;
flex-grow: 1;
position: relative;
height: .6em;
}
.pp-devices-content .pp-player-controls-volume-bar {
flex-grow: .5;
}
.pp-devices-content .pp-video-button {
padding: 2%;
cursor: pointer;
display: inline-table !important;
}
.pp-devices-content .pp-player-controls-rewind.fa-redo{
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.pp-devices-content .pp-hide,
.pp-video-player .pp-hide {
display: none;
}
.pp-devices-content .fas.fa-play:before {
margin-left: 3%;
}
.pp-devices-content .pp-video-player video {
display: block;
width: 100%;
height: 100%;
}
.pp-devices-content .pp-video-player video[poster] {
object-fit: cover;
}
.pp-device-media-screen-video .pp-device-media-screen-inner,.pp-device-orientation-landscape .pp-device-media-screen-video .pp-video-player{
height: 100%;
transition: all .3s cubic-bezier(.42,0,.2,1);
}
.pp-devices-content .pp-video-player-cover.pp-player-cover {
opacity:0.7;
}
.pp-devices-content .pp-video-button:before {
font-size:25px;
vertical-align: middle;
}
.pp-device-window .pp-video-player.pp-player {
height: 100%;
}
.pp-device-shape svg {
display: block;
}
.pp-player-controls-volume{
display: contents;
}
.pp-image-fit .pp-device-media-screen-inner {
position: relative;
bottom: 0;
top: 0;
}
.pp-device-media-screen-video .pp-device-media-screen-inner {
height:auto;
}
.pp-device-media .pp-device-media-screen.pp-device-media-screen-video {
align-items: center !important;
}
.pp-devices-content iframe.pp-video-iframe {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
line-height: 1;
margin: 0px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
}
.pp-devices-content iframe.pp-video-iframe + .pp-video-player-cover::after {
opacity: 0.5;
}
.pp-devices-content iframe.pp-video-iframe + .pp-video-player-cover.pp-player-cover {
opacity: 1;
background-size: cover;
}
.pp-device-window .pp-video-player video {
top: 0;
position: absolute;
}
.pp-device-window iframe.pp-video-iframe {
background: black;
}