@import 'variables';
@import 'mixins';

/* ==========================================================================
   #Comments styles - start
   ========================================================================== */

.eltd-comment-holder {
    @include eltdRelativeHolderLayout();
    padding: 0;
    box-sizing: border-box;

    .eltd-comment-holder-inner {
        padding: 117px 0 20px;
        border-top: 2px solid $default-border-color;
    }

	.eltd-comment {

		&.eltd-pingback-comment {
            
            .eltd-comment-text {
                padding: 0;

                .eltd-comment-name  {
                    float: none;
                }
            }

            .eltd-comment-info,
            .eltd-comment-date,
            .comment-edit-link {
                display: block;
            }
        }
	}

    .eltd-comment-list {
        list-style: none;
        position: relative;
        z-index: 150;
        padding: 0;
        margin: 0 0 0 35px;

        li {
            @include eltdRelativeHolderLayout();
            margin: 25px 0 0;
            padding: 29px 0 0;
        }

        > li:first-child {
            margin: 0;
            padding: 0;
            border: 0;
        }

        .children {
            padding: 0 0 0 111px;
        }
    }

    .eltd-comments-title {
        margin-bottom: 62px;

        > * {
            margin: 0;
        }
    }

    .eltd-comment-image {
        position: relative;
        display: block;
        top: 10px;
        left: 0;
        width: 50px;
        height: 50px;
        float: left;

        img {
            display: block;
        }
    }

    .eltd-comment-text {
        padding: 3px 0 0 77px;
        min-height: 50px;

        .eltd-comment-info {
            @include eltdRelativeHolderLayout();
            width: auto;
            margin: 3px 0 2px;
        }

        .replay,
        .comment-reply-link,
        .comment-edit-link {
            display: inline-block;
            font-size: 16px;
            font-family: $default-heading-font;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: -0.08px;
            color: $default-heading-color;
            vertical-align: middle;
            margin: 5px 10px 0 0;

            &:after {
                display: inline-block;
                content: "\f054";
                font-family: 'FontAwesome';
                vertical-align: middle;
                font-size: 12px;
                margin-left: 5px;
                margin-top: -2px;
            }
        }

        .eltd-comment-name {
            float: left;
            margin: 0;
        }

        .eltd-comment-date {
            margin: 0;
            display: inline-block;
            font-size: 16px;
            font-style: italic;
            font-family: $default-heading-font;
            color: $default-heading-color;
            margin-left: 3px;
            text-decoration: underline;
        }

        .eltd-text-holder p {
            margin: 7px 0;
        }

        .comment-respond {
            margin: 20px 0;

            .comment-reply-title {
                margin: 0 0 10px;
                font-size: 14px;
            }

            .logged-in-as {
                margin: 0 0 8px;
            }
        }

        #cancel-comment-reply-link {
            margin-left: 10px;
            font-size: 12px;
            color: $first-main-color;

            &:hover {
                color: $default-heading-color;
            }
        }

	    ul, ol {

		    li {
			    display: list-item;
		    }
	    }

        li {
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }
    }
}

.eltd-banner-zoom {
    display: inline-block;
    overflow: hidden;

    img {
        @include eltdTransition(all .32s ease-in-out);
    }

    &:hover {
        img {
            @include eltdTransform(scale(1.05));
        }
    }
}

.eltd-comment-form {
    padding: 0;
    clear: both;
    margin: 0 -15px;
    box-sizing: border-box;

    .eltd-comment-form-inner {
        padding: 103px 0 128px;
    }

    .comment-reply-title {
        margin: 0 0 67px;
    }

    .logged-in-as {
        margin: 0 0 8px;
    }
}

@include ipad-portrait {

    .eltd-comment-holder {

        .eltd-comment-list {

            .children {
                padding: 0 0 0 40px;
            }
        }
    }
}

@include phone-landscape {

    .eltd-comment-holder {

        .eltd-comment-list {

            .children {
                padding: 0;
            }
        }

        .eltd-comment-text {

            .eltd-comment-date,
            .eltd-comment-name {
                float: none;
            }

            .replay,
            .comment-reply-link,
            .comment-edit-link {
                float: none;
                margin: 0 10px 0 0;
            }
        }
    }
}

@include phone-portrait {

    .eltd-comment-holder {

        .eltd-comment-image {
            float: none;
        }

        .eltd-comment-text {
            padding: 20px 0 0;
            min-height: inherit;
        }
    }
}

/* ==========================================================================
   #Comments styles - end
   ========================================================================== */

%input-style {
	width: 100%;
	margin: 0 0 15px;
	padding: 14px 18px;
	font-family: $default-heading-font;
    font-style: italic;
	font-size: 16px;
	line-height: 20px;
	font-weight: inherit;
	color: $second-border-color;
	background-color: transparent;
	border: 1px solid $second-border-color;
	border-radius: 0;
	outline: 0;
	-webkit-appearance: none;
	cursor: pointer;
	box-sizing: border-box;
	@include eltdTransition(border-color 0.2s ease-in-out);

	&:focus {
		color: $default-heading-color;
		border-color: $default-text-color;
	}

	@include eltdPlaceholder {
		color: inherit;
	}
}

#respond textarea,
#respond input[type='text'],
input[type='text'],
input[type='email'],
input[type='password'],
.post-password-form input[type='password'] {
	@extend %input-style;
}

.post-password-form input[type='password'] {
	margin-top: 10px;
}

.wpcf7-form-control {
	&.wpcf7-text,
	&.wpcf7-number,
	&.wpcf7-date,
	&.wpcf7-select,
	&.wpcf7-quiz {
		@extend %input-style;

		footer & {
			margin: 0;
		}
	}

    &.wpcf7-textarea {
        @extend %input-style;
        height: 162px;

        footer & {
            margin: 0;
        }
    }
}

div.wpcf7 .ajax-loader {
    display: block;
}

#submit_comment,
.post-password-form input[type='submit'] {
	@include eltdButtonDefaultStyle();
	@include eltdButtonMediumParams();
	@include eltdButtonSolidColor();
	cursor: pointer;
    border-radius: 0;
    -webkit-border-radius:0;
    -webkit-appearance: none;

	&:hover {
		@include eltdButtonSolidHoverColor();
	}
}

input.wpcf7-form-control.wpcf7-submit {
    @include eltdButtonDefaultStyle();
    @include eltdButtonLargeParams();
    @include eltdButtonSolidColor();
    cursor: pointer;
    border-radius: 0;
    -webkit-border-radius:0;
    -webkit-appearance: none;

    &:hover {
        @include eltdButtonSolidHoverColor();
    }
}

p.form-submit,
.wpcf7-form p {
	margin: 0;
}

#respond textarea,
.wpcf7-form textarea {
	display: block;
	padding: 16px 18px;
}

.eltd-two-columns-form-without-space {

	.wpcf7-form .ajax-loader {
		display: none;
	}
}
/* ==========================================================================
   #Comments styles - end
   ========================================================================== */

/* ==========================================================================
   #Global Owl Slider - begin
   ========================================================================== */
.eltd-owl-slider {
	visibility: hidden;

    .owl-stage-outer {
        z-index: 1;
    }

	&.eltd-slider-is-moving {

		.owl-item {

			.eltd-block-drag-link {
				z-index: -1 !important;
			}
		}
	}

    &.eltd-slider-has-both-nav {

        .owl-nav {

            .owl-prev,
            .owl-next {
                $pos: calc(-50% - 21px); // 21 is is half height of pagination control + top margin
                @include eltdTransform(translateY($pos));
            }
        }
    }

	.owl-nav {

		.owl-prev,
		.owl-next {
			position: absolute;
			top: 50%;
			z-index: 3;
			color: $default-heading-color;
			@include eltdTransform(translateY(-50%));
			@include eltdTransition(color .2s ease-out);


			> span {
				position: relative;
				display: inline-block;
				vertical-align: middle;
				font-size: 30px;
				line-height: 1;

				&:before {
					display: block;
					line-height: inherit;
                    font-weight: 700;
				}
			}
		}

		.owl-prev {
			left: 30px;
		}

		.owl-next {
			right: 30px;
		}

        @include ipad-landscape {
            .owl-prev {
               left: 30px;
            }

            .owl-next {
                right: 30px;
            }
        }
	}

	.owl-dots {
		text-align: center;
		margin: 16px 0 0;

		.owl-dot {
			display: inline-block;
			vertical-align: middle;

			span {
				display: inline-block;
				vertical-align: middle;
				width: 12px;
				height: 12px;
				margin: 0 6px;
				border-radius: 3em;
				background-color: transparent;
				border: 2px solid rgba($default-heading-color, .5);
				box-sizing: border-box;
				@include eltdTransition(background-color .2s ease-out, border .2s ease-out);
			}

			&:hover,
			&.active {

				span {
					background-color: $default-heading-color;
					border-color: $default-heading-color;
				}
			}
		}
	}

	.owl-carousel .owl-item img {
		-webkit-transform: translateZ(0); //chrome text cut off fix
	}
}
/* ==========================================================================
   #Global Owl Slider - end
   ========================================================================== */

/* ==========================================================================
   #404 styles - start
   ========================================================================== */

.eltd-404-page {

    &.eltd-wrapper {
        padding: 0 !important;
    }

    .eltd-content {
        height: 100vh;

	    .admin-bar & {
		    height: calc(100vh - 32px);
	    }
    }

    .eltd-content-inner {
        position: relative;
        display: table;
        height: 100%;
        width: 100%;
    }

    .eltd-page-not-found {
        position: relative;
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        padding: 22% 20% 0;
	    text-align: center;

        .eltd-404-title {
            margin: 0;
        }

	    .eltd-404-subtitle {
            margin: 0;
        }

	    .eltd-404-text {
		    margin: 0 auto;
            width: 40%;
	    }

        .eltd-btn {
            margin: 25px 0 0;

	        &.eltd-btn-light-style {
		        color: #585858;
		        background-color: #fff;
		        border-color: #fff;

		        &:hover {
			        color: #fff !important;
			        background-color: transparent !important;
			        border-color: #fff !important;
		        }
	        }
        }
        .eltd-separator {
            margin: 12px auto;
        }
    }

    @include ipad-landscape {
        .eltd-404-text {
            width: 80% !important;
         }
    }



	@include phone-landscape {

        .eltd-page-not-found {
            padding: 270px 30px 100px;
        }

		.eltd-content {
			height: auto;
			margin: 0 !important;

			.admin-bar & {
				height: auto;
			}
		}
	}
}

.error404 {
    .eltd-page-footer {
        z-index: 1000;
    }
}

/* ==========================================================================
   #404 styles - end
   ========================================================================== */

/* ==========================================================================
   #Back to Top styles - start
   ========================================================================== */
#eltd-back-to-top {
    position: fixed;
    width: 41px;
    right: 25px;
    bottom: 25px;
    margin: 0;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;

    &.off {
        opacity: 0;
        visibility: hidden;
        @include eltdTransition(opacity 0.15s ease, visibility .0s .15s);
    }

    &.on {
        opacity: 1;
        visibility: visible;
        @include eltdTransition(opacity 0.3s ease);
    }

    > span {
        position: relative;
        display: block;
        width: 39px;
        height: 39px;
        line-height: 38px;
        font-size: 30px;
        text-align: center;
        color: #fff;
        background-color: #1c1c1c;
        border: 1px solid #1c1c1c;
        overflow: hidden;
        @include eltdTransition(color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out);

        i {
            @include eltdTransition(.15s ease .05s);
        }

        &:hover {

            i {
                @include eltdTransform(translateY(-4px));
                @include eltdTransition(.15s ease-in-out);
            }
        }
    }

    span span {
        display: block;
        line-height: inherit;
    }
}

.eltd-fullscreen-menu-opened #eltd-back-to-top {
    opacity:0;
}
/* ==========================================================================
   #Back to Top styles - end
   ========================================================================== */

/* ==========================================================================
   #Self Hosted Video styles - begin
   ========================================================================== */
.eltd-self-hosted-video-holder {

    .eltd-video-wrap {

	    .mejs-poster,
        .mejs-container,
        .mejs-overlay-play {
            height: 100% !important; /*!important because of the inline style*/
            width: 100% !important; /*!important because of the inline style*/
        }
    }
}
/* ==========================================================================
   #Self Hosted Video styles - end
   ========================================================================== */