← All changes | includes/widgets/Content_Flip_Box/style.css +253 -0 51.1.2 → 51.1.83 View file →

		@@ -1,0 +1,253 @@
	1	+.king-addons-content-flip-box {
	2	+ position: relative;
	3	+ transition: all 500ms ease;
	4	+ transform-style: preserve-3d;
	5	+ perspective: 1000px;
	6	+}
	7	+
	8	+.king-addons-content-flip-box-item {
	9	+ position: absolute;
	10	+ top: 0;
	11	+ left: 0;
	12	+ width: 100%;
	13	+ height: 100%;
	14	+}
	15	+
	16	+.king-addons-content-flip-box-front {
	17	+ z-index: 5;
	18	+}
	19	+
	20	+.king-addons-content-flip-box[data-trigger="box"] {
	21	+ cursor: pointer;
	22	+}
	23	+
	24	+.elementor-widget-king-addons-content-flip-box .king-addons-content-flip-box-front .king-addons-content-flip-box-content .king-addons-content-flip-box-title,
	25	+.elementor-widget-king-addons-content-flip-box .king-addons-content-flip-box-back .king-addons-content-flip-box-content .king-addons-content-flip-box-title {
	26	+ font-size: 22px;
	27	+ font-weight: 600;
	28	+}
	29	+
	30	+.elementor-widget-king-addons-content-flip-box .king-addons-content-flip-box-front .king-addons-content-flip-box-content .king-addons-content-flip-box-description,
	31	+.elementor-widget-king-addons-content-flip-box .king-addons-content-flip-box-back .king-addons-content-flip-box-content .king-addons-content-flip-box-description {
	32	+ font-size: 16px;
	33	+}
	34	+
	35	+.king-addons-content-flip-box-item {
	36	+ transition-property: all;
	37	+ transform-style: preserve-3d;
	38	+ backface-visibility: hidden;
	39	+}
	40	+
	41	+.king-addons-content-flip-box-content {
	42	+ position: relative;
	43	+ z-index: 10;
	44	+ display: flex;
	45	+ flex-direction: column;
	46	+ width: 100%;
	47	+ height: 100%;
	48	+}
	49	+
	50	+.king-addons-content-flip-box-overlay {
	51	+ position: absolute;
	52	+ z-index: 5;
	53	+ top: 0;
	54	+ left: 0;
	55	+ width: 100%;
	56	+ height: 100%;
	57	+}
	58	+
	59	+.king-addons-content-flip-box-link {
	60	+ position: absolute;
	61	+ z-index: 20;
	62	+ top: 0;
	63	+ left: 0;
	64	+ display: block;
	65	+ width: 100%;
	66	+ height: 100%;
	67	+}
	68	+
	69	+.king-addons-content-flip-box-button,
	70	+.king-addons-content-flip-box-button-backside {
	71	+ display: inline-table;
	72	+ cursor: pointer;
	73	+}
	74	+
	75	+.king-addons-content-flip-box-button-icon {
	76	+ margin-left: 5px;
	77	+}
	78	+
	79	+/* Important is necessary */
	80	+.king-addons-content-flip-box-button span,
	81	+.king-addons-content-flip-box-button-backside span {
	82	+ position: relative;
	83	+ z-index: 2;
	84	+ opacity: 1 !important;
	85	+}
	86	+
	87	+/* Important is necessary */
	88	+.king-addons-content-flip-box-button:before,
	89	+.king-addons-content-flip-box-button-backside:before,
	90	+.king-addons-content-flip-box-button:after,
	91	+.king-addons-content-flip-box-button-backside:after {
	92	+ z-index: 1 !important;
	93	+}
	94	+
	95	+.king-addons-content-flip-box-image img {
	96	+ display: block;
	97	+ width: 100%;
	98	+}
	99	+
	100	+.king-addons-content-flip-box-title a, .king-addons-content-flip-box-title a:hover {
	101	+ color: inherit;
	102	+}
	103	+
	104	+.king-addons-content-flip-box-front-align-left .king-addons-content-flip-box-front .king-addons-content-flip-box-image img,
	105	+.king-addons-content-flip-box-back-align-left .king-addons-content-flip-box-back .king-addons-content-flip-box-image img {
	106	+ float: left;
	107	+}
	108	+
	109	+.king-addons-content-flip-box-front-align-center .king-addons-content-flip-box-front .king-addons-content-flip-box-image img,
	110	+.king-addons-content-flip-box-back-align-center .king-addons-content-flip-box-back .king-addons-content-flip-box-image img {
	111	+ margin: 0 auto;
	112	+}
	113	+
	114	+.king-addons-content-flip-box-front-align-right .king-addons-content-flip-box-front .king-addons-content-flip-box-image img,
	115	+.king-addons-content-flip-box-back-align-right .king-addons-content-flip-box-back .king-addons-content-flip-box-image img {
	116	+ float: right;
	117	+}
	118	+
	119	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-right .king-addons-content-flip-box-back,
	120	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-left .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	121	+ transform: rotateX(0) rotateY(-180deg);
	122	+}
	123	+
	124	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-left .king-addons-content-flip-box-back,
	125	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-right .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	126	+ transform: rotateX(0) rotateY(180deg);
	127	+}
	128	+
	129	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-up .king-addons-content-flip-box-back,
	130	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-down .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	131	+ transform: rotateX(-180deg) rotateY(0);
	132	+}
	133	+
	134	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-down .king-addons-content-flip-box-back,
	135	+.king-addons-content-flip-box-animation-flip.king-addons-content-flip-box-anim-direction-up .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	136	+ transform: rotateX(180deg) rotateY(0);
	137	+}
	138	+
	139	+.king-addons-content-flip-box-animation-flip .king-addons-content-flip-box-active .king-addons-content-flip-box-back {
	140	+ transform: none;
	141	+}
	142	+
	143	+.king-addons-content-flip-box-animation-3d-yes .king-addons-content-flip-box-content {
	144	+ transform: translateZ(70px) scale(.93);
	145	+ transform-style: preserve-3d;
	146	+}
	147	+
	148	+.king-addons-content-flip-box-animation-push .king-addons-content-flip-box,
	149	+.king-addons-content-flip-box-animation-slide .king-addons-content-flip-box {
	150	+ overflow: hidden;
	151	+}
	152	+
	153	+.king-addons-content-flip-box-animation-push .king-addons-content-flip-box-back, .king-addons-content-flip-box-animation-slide .king-addons-content-flip-box-back {
	154	+ z-index: 10;
	155	+}
	156	+
	157	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-up .king-addons-content-flip-box-back,
	158	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-up .king-addons-content-flip-box-back {
	159	+ top: 100%;
	160	+}
	161	+
	162	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-up .king-addons-content-flip-box-active .king-addons-content-flip-box-back,
	163	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-up .king-addons-content-flip-box-active .king-addons-content-flip-box-back {
	164	+ top: 0;
	165	+}
	166	+
	167	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-down .king-addons-content-flip-box-back,
	168	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-down .king-addons-content-flip-box-back {
	169	+ top: auto;
	170	+ bottom: 100%;
	171	+}
	172	+
	173	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-down .king-addons-content-flip-box-active .king-addons-content-flip-box-back,
	174	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-down .king-addons-content-flip-box-active .king-addons-content-flip-box-back {
	175	+ top: auto;
	176	+ bottom: 0;
	177	+}
	178	+
	179	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-left .king-addons-content-flip-box-back,
	180	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-left .king-addons-content-flip-box-back {
	181	+ left: 100%;
	182	+}
	183	+
	184	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-left .king-addons-content-flip-box-active .king-addons-content-flip-box-back,
	185	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-left .king-addons-content-flip-box-active .king-addons-content-flip-box-back {
	186	+ left: 0;
	187	+}
	188	+
	189	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-right .king-addons-content-flip-box-back,
	190	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-right .king-addons-content-flip-box-back {
	191	+ right: 100%;
	192	+ left: auto;
	193	+}
	194	+
	195	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-right .king-addons-content-flip-box-active .king-addons-content-flip-box-back,
	196	+.king-addons-content-flip-box-animation-slide.king-addons-content-flip-box-anim-direction-right .king-addons-content-flip-box-active .king-addons-content-flip-box-back {
	197	+ right: 0;
	198	+ left: auto;
	199	+}
	200	+
	201	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-up .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	202	+ top: -100%;
	203	+}
	204	+
	205	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-down .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	206	+ top: 100%;
	207	+}
	208	+
	209	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-left .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	210	+ left: -100%;
	211	+}
	212	+
	213	+.king-addons-content-flip-box-animation-push.king-addons-content-flip-box-anim-direction-right .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	214	+ left: 100%;
	215	+}
	216	+
	217	+.king-addons-content-flip-box-animation-fade .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	218	+ visibility: hidden;
	219	+ opacity: 0;
	220	+}
	221	+
	222	+.king-addons-content-flip-box-animation-zoom-in .king-addons-content-flip-box-back {
	223	+ z-index: 10;
	224	+ transform: scale(0.9);
	225	+ opacity: 0;
	226	+}
	227	+
	228	+.king-addons-content-flip-box-animation-zoom-in .king-addons-content-flip-box-active .king-addons-content-flip-box-back {
	229	+ transform: scale(1);
	230	+ opacity: 1;
	231	+}
	232	+
	233	+.king-addons-content-flip-box-animation-zoom-out .king-addons-content-flip-box-active .king-addons-content-flip-box-front {
	234	+ visibility: hidden;
	235	+ transform: scale(0.9);
	236	+ opacity: 0;
	237	+}
	238	+
	239	+.king-addons-content-flip-animation-timing-linear {
	240	+ transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
	241	+}
	242	+
	243	+.king-addons-content-flip-animation-timing-ease {
	244	+ transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000);
	245	+}
	246	+
	247	+.king-addons-content-flip-animation-timing-ease-in {
	248	+ transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000);
	249	+}
	250	+
	251	+.king-addons-content-flip-animation-timing-ease-out {
	252	+ transition-timing-function: cubic-bezier(0.000, 0.000, 0.580, 1.000);
	253	+}