#pluginAppObj_125{ display: inline-block; vertical-align: middle; box-sizing: border-box; max-width: 100%; ; } #iandt_pluginAppObj_125 { width: 170px; max-width: 100%; } #iandt_pluginAppObj_125 .wrapper{ width: 100%; height: 0px; padding-top: 100%; margin: 0 auto; display: inline-block; position: relative; overflow: hidden; vertical-align: middle; } #iandt_pluginAppObj_125 .sides-container{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #iandt_pluginAppObj_125 .side{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #iandt_pluginAppObj_125 .side.front{ border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #iandt_pluginAppObj_125 .side.back{ border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } #iandt_pluginAppObj_125 .wrapper:not(.none) .side{ -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } #iandt_pluginAppObj_125 .front{ cursor: default; background-color: transparent; } #iandt_pluginAppObj_125 .back{ background-color: rgba(244, 244, 244, 1); } #iandt_pluginAppObj_125 .none .back, #iandt_pluginAppObj_125 .fade .back, #iandt_pluginAppObj_125 .appear-top .back, #iandt_pluginAppObj_125 .appear-bottom .back, #iandt_pluginAppObj_125 .appear-left .back, #iandt_pluginAppObj_125 .appear-right .back { background-color: rgba(244, 244, 244, 0.6); } #iandt_pluginAppObj_125 .front .text-container{ width: 170px; height: 170px; max-width: 100%; max-height: 100%; overflow: hidden; text-align: center; vertical-align: middle; font-family:Tahoma;font-size:14pt;font-weight: normal;font-style: normal;color:rgba(255, 255, 255, 1); background-image: url('../../pluginAppObj/pluginAppObj_125/Aquadark-Logo_mit_Rahmen.jpg'); background-repeat: no-repeat; background-position: center; background-size: contain; } #iandt_pluginAppObj_125 .center-all{ position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: auto; } #iandt_pluginAppObj_125 .back .text-container{ width: 170px; height: 170px; max-width: 100%; max-height: 100%; overflow: hidden; text-align: center; vertical-align: middle; font-family: Tahoma; font-size: 14pt; font-weight: normal; font-style: normal; color: rgba(255, 255, 255, 1); } #iandt_pluginAppObj_125 .back .text-container p{ margin: 10px 5px 0px 5px; } #iandt_pluginAppObj_125 .back .text-container .btn{ margin: 15px auto; position: relative; display: inline-block; background-color: rgba(67, 67, 67, 1); -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; font-family: Unica One; font-size: 20pt; font-weight: bold; font-style: normal; color:rgba(244, 244, 244, 1); } #iandt_pluginAppObj_125 .back-visible .back .btn{ cursor: pointer; } #iandt_pluginAppObj_125 .back .text-container .btn:hover{ background-color:rgb(77,77,77); } #iandt_pluginAppObj_125 .back .text-container .btn a{ display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; pointer-events: none; box-sizing: border-box; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } #iandt_pluginAppObj_125 .back-visible .back .text-container .btn a{ pointer-events: auto; display: block; } /* Effects! */ /* NONE */ #iandt_pluginAppObj_125 .none .back{ display: none; opacity: 0; } #iandt_pluginAppObj_125 .none.back-visible .back{ display: block; opacity: 1; } /* FADE */ #iandt_pluginAppObj_125 .fade .back{ visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } #iandt_pluginAppObj_125 .fade.back-visible .back{ visibility: visible; opacity: 1; } /* APPEAR-TOP */ #iandt_pluginAppObj_125 .appear-top .back{ top: -100%; } #iandt_pluginAppObj_125 .appear-top.back-visible .back{ top: 0; } /* APPEAR-BOTTOM */ #iandt_pluginAppObj_125 .appear-bottom .back{ top: 100%; } #iandt_pluginAppObj_125 .appear-bottom.back-visible .back{ top: 0; } /* APPEAR-LEFT */ #iandt_pluginAppObj_125 .appear-left .back{ left: -100%; } #iandt_pluginAppObj_125 .appear-left.back-visible .back{ left: 0; } /* APPEAR-RIGHT */ #iandt_pluginAppObj_125 .appear-right .back{ left: 100%; } #iandt_pluginAppObj_125 .appear-right.back-visible .back{ left: 0; } /* MOVE-TOP */ #iandt_pluginAppObj_125 .move-top .front{ top: 0; } #iandt_pluginAppObj_125 .move-top.back-visible .front{ top: 100%; } #iandt_pluginAppObj_125 .move-top .back{ top: -100%; } #iandt_pluginAppObj_125 .move-top.back-visible .back{ top: 0; } /* MOVE-BOTTOM */ #iandt_pluginAppObj_125 .move-bottom .front{ top: 0; } #iandt_pluginAppObj_125 .move-bottom.back-visible .front{ top: -100%; } #iandt_pluginAppObj_125 .move-bottom .back{ top: 100%; } #iandt_pluginAppObj_125 .move-bottom.back-visible .back{ top: 0; } /* MOVE-LEFT */ #iandt_pluginAppObj_125 .move-left .front{ left: 0; } #iandt_pluginAppObj_125 .move-left.back-visible .front{ left: 100%; } #iandt_pluginAppObj_125 .move-left .back{ left: -100%; } #iandt_pluginAppObj_125 .move-left.back-visible .back{ left: 0; } /* MOVE-RIGHT */ #iandt_pluginAppObj_125 .move-right .front{ left: 0; } #iandt_pluginAppObj_125 .move-right.back-visible .front{ left: -100%; } #iandt_pluginAppObj_125 .move-right .back{ left: 100%; } #iandt_pluginAppObj_125 .move-right.back-visible .back{ left: 0; } /* FLIP HORIZONTAL & VERTICAL */ #iandt_pluginAppObj_125 .flip-hor, #iandt_pluginAppObj_125 .flip-vert { perspective: 1000px; overflow: visible; } #iandt_pluginAppObj_125 .flip-hor .sides-container, #iandt_pluginAppObj_125 .flip-vert .sides-container{ transform-style: preserve-3d; } #iandt_pluginAppObj_125 .flip-hor .side, #iandt_pluginAppObj_125 .flip-vert .side { -webkit-transition: all 500ms ease, width 1ms, height 1ms; -moz-transition: all 500ms ease, width 1ms, height 1ms; -o-transition: all 500ms ease, width 1ms, height 1ms; transition: all 500ms ease, width 1ms, height 1ms; transform-style: preserve-3d; overflow: visible; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } #iandt_pluginAppObj_125 .flip-hor .front, #iandt_pluginAppObj_125 .flip-vert .front{ z-index: 2; } #iandt_pluginAppObj_125 .flip-hor .front{ transform: rotateY(0deg); } #iandt_pluginAppObj_125 .flip-hor .back{ transform: rotateY(-180deg); } #iandt_pluginAppObj_125 .flip-hor.back-visible .front{ transform: rotateY(180deg); } #iandt_pluginAppObj_125 .flip-hor.back-visible .back{ transform: rotateY(0deg); } #iandt_pluginAppObj_125 .flip-vert .front{ transform: rotateX(0deg); } #iandt_pluginAppObj_125 .flip-vert .back{ transform: rotateX(-180deg); } #iandt_pluginAppObj_125 .flip-vert.back-visible .front{ transform: rotateX(180deg); } #iandt_pluginAppObj_125 .flip-vert.back-visible .back{ transform: rotateX(0deg); } /* ZOOM */ #iandt_pluginAppObj_125 .zoom .front img{ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #iandt_pluginAppObj_125 .zoom.back-visible .front{ -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); } #iandt_pluginAppObj_125 .zoom .back{ visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } #iandt_pluginAppObj_125 .zoom.back-visible .back{ visibility: visible; opacity: 1; }