/* ==========================================================================
   Interactive Text shortcode style - begin
   ========================================================================== */

#edgtf-interactive-text{
    height: 100vh;

    .edgtf-interactive-text-inner {
        position: relative;
        display: block;
        height: 100%;
        
        .edgtf-interactive-text-images-holder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;

            @include keyframes(imageLeave) {
                0% {
                    opacity: 1;
                    @include edgtfTransform(translate3d(0,0,0));
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 0;
                    @include edgtfTransform(translate3d(20%,0,0));
                }
            }

            @include keyframes(imageEnter) {
                0% {
                    opacity: 0;
                    @include edgtfTransform(translate3d(-20%,0,0));
                }

                100% {
                    opacity: 1;
                    @include edgtfTransform(translate3d(0,0,0));
                }
            }

            .edgtf-interactive-text-item-image {
            	position: absolute;
				display: block;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
                background-position: center;
                background-size: cover;
                opacity: 0;
                @include edgtfTransform(translate3d(-20%, 0, 0));
                will-change: transform, opacity;

                &.edgtf-remove {
                    @include edgtfAnimation(imageLeave 1s forwards);
                }

                &.edgtf-active {
                    @include edgtfAnimation(imageEnter 1s cubic-bezier(0.09, 0.94, 0.27, 0.96) forwards .5s);
                }
            }
        }
        
        .edgtf-interactive-text-content-holder {
        	position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			box-sizing: border-box;
			overflow: hidden;
            z-index: 100;
        
            .edgtf-interactive-text-content-table {
				position: relative;
				display: table;
				table-layout: fixed;
				height: 100%;
				width: 100%;
            }

            .edgtf-interactive-text-content-table-cell {
                position: relative;
                display: table-cell;
                vertical-align: middle;
            }

            .edgtf-interactive-text-content-line {
                font-size: 0;

                .edgtf-interactive-text-item {
                    position: relative;
                    display: inline-block;
                    box-sizing: border-box;
                    width: auto !important;
                }

                .edgtf-interactive-text-item-content {
                    display: inline-block;
                    vertical-align: middle;
                    word-break: break-word;
                    color: #000;
                    line-height: 1;
                    cursor: pointer;

                    .edgtf-interactive-text-item-wrap {
                    	display: inline-block;

                        .edgtf-iti-title{
                        	position: relative;
                        	display: inline-block;
                        	color: $first-main-color;
                        	font-weight: 500;
                        	line-height: 1.05;
                        	letter-spacing: -0.04em;

                        	&:after{
                        		content: '';
                        		position: absolute;
                        		top: calc(54% - 0.05em);
                        		left: 0;
                        		height: 0.1em;
                                width: 100%;
                        		background-color: currentColor;
                                -webkit-transform-origin: 100% 50%;
                                transform-origin: 100% 50%;
                        		@include edgtfTransform(scaleX(0));
                                -webkit-transition: -webkit-transform .3s ease-in-out;  
                                transition: transform .3s ease-in-out;
                        	}
                        }

                        .edgtf-iti-subtitle{
                        	display: block;
                        	color: $gray-color;
                        	font-size: 17px;
                        }

                        > a {
                            color: inherit;
                            @include edgtfTransition(none);
                        }

                        &.edgtf-image-visible{
                        	.edgtf-iti-title:after{
                                -webkit-transform-origin: 0% 50%;
                                transform-origin: 0% 50%;
                                @include edgtfTransform(scaleX(1));
                        	}
                        }
                    }
                }

                .edgtf-interactive-text-items-separator {
                    position: absolute;
                    top: calc(50% - 5px);
                    height: 10px;
                    background-color: currentColor;
                    cursor: -webkit-grab;
                    cursor: grab;
                    @include edgtfTransition(background-color 0.15s ease-out);
                }

                &:nth-of-type(odd) {
                    text-align: left;

                    .edgtf-interactive-text-items-separator {
                        right: 30px;
                    }
                }

                &:nth-of-type(even) {
                    text-align: right;

                    .edgtf-interactive-text-items-separator {
                        left: 30px;
                    }
                }
            }
        }
    }

    .edgtf-interactive-text-content-line {
        opacity: 0;

        &:nth-of-type(odd) {
            @include edgtfTransform(translate3d(-20%,0,0));
        }

        &:nth-of-type(even) {
            @include edgtfTransform(translate3d(20%,0,0));
        }
    }

    &.edgtf-initialized {
        .edgtf-interactive-text-content-line {
            opacity: 1;
            @include edgtfTransform(translate3d(0,0,0));
            -webkit-transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 2s cubic-bezier(0.09, 0.94, 0.27, 0.96);
            transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 2s cubic-bezier(0.09, 0.94, 0.27, 0.96);
        }
    }

    &.edgtf-it-direction-horizontal{

        .swiper-container {
            overflow: visible;
        }
        
        .edgtf-interactive-text-content-holder {

        	.edgtf-interactive-text-item {
                padding: 0 50px;
        	}

            .edgtf-interactive-text-content-line {
                margin: 0 -10vw;
            }

            .edgtf-iti-title{
            	font-size: 8vw;
			}
        }
    }

    &.edgtf-it-direction-vertical{

    	.edgtf-interactive-text-content-holder {

    		.edgtf-interactive-text-item{
                padding: 35px 0;
	    	}

            .edgtf-iti-title{
            	font-size: 6.5vh;
			}

			.edgtf-iti-subtitle{
				margin-top: 12px;
			}
    	}

		&.edgtf-it-alignment-left{
			.edgtf-interactive-text-content-holder .edgtf-interactive-text-item{
				text-align: left;
			}
		}

		&.edgtf-it-alignment-center{
			.edgtf-interactive-text-content-holder .edgtf-interactive-text-item{
				text-align: center;
			}
		}

		&.edgtf-it-alignment-right{
			.edgtf-interactive-text-content-holder .edgtf-interactive-text-item{
				text-align: right;
			}
		}

		.edgtf-interactive-text-content-line.edgtf-it-vertical-fixed{
			.edgtf-interactive-text-item{
				display: block;
			}
		}

        .edgtf-interactive-text-content-line {
            @include edgtfTransform(translate3d(0, 100%, 0));
            opacity: 0;
        }

        &.edgtf-initialized {
            .edgtf-interactive-text-content-line {
                @include edgtfTransform(translate3d(0, 0, 0));
                opacity: 1;
            }
        }
    }
}
/* ==========================================================================
   Interactive Text shortcode style - end
   ========================================================================== */