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

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

.qodef-comment-holder {
	padding: 60px 0 9px;
	margin: 0 0 0;

	.qodef-comment-image {
		display: block;
		width: 83px;
		height: 83px;
		float: left;
        img{
            @include qodefBorderRadius(50%);
        }
	}
	.qodef-comment-text {
		padding: 0 0 0 120px;
		min-height: 83px;

        .qodef-comment-name {
            margin-bottom: 16px;
        }

        .qodef-text-holder {
            p {
                margin: 0;
            }
        }

		.qodef-comment-info {
			display: inline-block;
			width: 100%;
			vertical-align: middle;
            margin-top: 10px;
            color: $default-heading-color;
            letter-spacing: 0.7px;
            .qodef-comment-date {
              font-size: 14px;
              font-weight: 700;
            }
		}

		.replay,
		.comment-reply-link,
		.comment-edit-link {
			margin-left: 10px;
            color: $default-heading-color;
            letter-spacing: 0.7px;
            &:hover {
                color: $first-main-color;
            }
        }

        .replay,
        .comment-reply-link {
          font-weight: 700;
          font-size: 13px;
            &:before {
                content:"\f112";
                font-family: "FontAwesome";
                margin-right: 8px;
                font-size: 10px;
            }
        }
        .comment-edit-link {
            &:before {
                content:"\f040";
                font-family: "FontAwesome";
                margin-right: 8px;
            }
        }
	}

    .qodef-pingback-comment {
        .qodef-comment-text {
            min-height: initial;
            padding: 0;
        }
    }

}
.qodef-comment-list {
	list-style: none;
	position: relative;
	z-index: 150;
	padding: 0;
	margin: 27px 0 0;

	li {
		display: inline-block;
		position: relative;
		width: 100%;

        .children {
            margin: 31px 0 0 0;
            padding: 0 0 0 120px;
            li {
                padding-top: 36px;
                padding-bottom: 31px;
                border-top: 1px solid #dadada;
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
	}

	> li {
		margin: 0 0 40px;
        padding-bottom: 31px;
        border-bottom: 1px solid #dadada;
	}
}

.qodef-comment-form{
	margin-bottom: 40px;
}

.comment-respond{
    margin: 20px 0;
	.comment-reply-title{
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 8px;
		#cancel-comment-reply-link{
            font-size: 15px;
            line-height: 28px;
            color: $first-main-color;
            font-weight: 400;
		}
	}

	.logged-in-as{
		margin-bottom: 10px;
        a {
            color: #444;
            &:hover {
                color: $first-main-color;
            }
        }
        a:first-child {
            &:before {
                content:"\f007";
                font-family: "FontAwesome";
                margin-right: 8px;
            }
        }
        a:nth-child(2) {
            margin-left: 10px;
            &:before {
                content:"\f011";
                font-family: "FontAwesome";
                margin-right: 8px;
            }
        }
	}
}

%input-style{
	width: 100%;
	margin-bottom: 14px;
    padding: 12px 20px;
	border: 2px solid #dadada;
	outline: 0;
	font-family: inherit;
	font-size: 13px;
	background-color: transparent;
	color: #707070;
    @include qodefBorderRadius(0);
	@include qodefBoxSizing(border-box);

	&:focus{
		border: 2px solid #cacaca;
	}	
}

%label-style {
    font-size: 20px;
    line-height: 28px;
    font-weight: 900;
    color: $default-heading-color;
    display: inline-block;
    margin-bottom: 8px;
}

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

    &.wpcf7-textarea {
        height: 217px;
        margin-bottom: 32px;
    }
}

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

.qodef-comment-label {
    @extend %label-style;
}

#respond textarea {
    padding: 18px 21px;
    margin-bottom: 10px;
}

.post-password-form input[type='submit'],
input.wpcf7-form-control.wpcf7-submit{
    position: relative;
    outline: none;
    font-style: normal;
    font-weight: 900;
    font-family: inherit;
    padding: 0 32px;
    font-size: 12px;
    line-height: 49px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    @include qodefTransition(color 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out);
    @include qodefBoxSizing(border-box);
    border: 2px solid $default-heading-color;
    color: #fff;
    background-color: $default-heading-color;
    cursor: pointer;
    @include qodefBorderRadius(0);

	&:hover{
		color: $default-heading-color;
		background-color: $first-main-color;
		border-color: $first-main-color;
	}
}

#submit_comment {
    cursor: pointer;
    padding: 0 63px;
}

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

/* ==========================================================================
   #Subscribe form - start
   ========================================================================== */

.qodef-subscription-form {
    position: relative;
    .wpcf7-form-control{
        &.wpcf7-text {
            border: 1px solid #b7b7b7;
            color: #b0b0b0;
            font-size: 16px;
            padding: 8px 18px;

            &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                color: #b0b0b0;
            }
            &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                color: #b0b0b0;
                opacity: 1;
            }
            &::-moz-placeholder { /* Mozilla Firefox 19+ */
                color: #b0b0b0;
                opacity: 1;
            }
            &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                color: #b0b0b0;
                line-height: normal;
            }
        }
        &.wpcf7-submit{
            position: absolute;
            right: 5px;
            top: 0;
            line-height: 45px;
            width: 45px;
            padding: 0;
            height: 45px;
            border: 0;
            font-family: 'Ionicons', serif;
            color: $default-heading-color;
            background-color: transparent;
            font-size: 24px;
            margin-top: 0;
            &:hover {
                background: transparent;
                color: #888;
            }
        }
    }
}

/* ==========================================================================
   #Subscribe form - end
   ========================================================================== */

/* ==========================================================================
    #Contact form - start
========================================================================== */

.qodef-contact-form {
    .qodef-column-left {
        width: 50%;
        float: left;
        padding-right: 8px;
        box-sizing: border-box;
    }

    .qodef-column-right {
        width: 50%;
        float: left;
        padding-left: 8px;
        box-sizing: border-box;
    }
   input, textarea {
     &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
       color: #707070;
     }
     &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: #707070;
       opacity: 1;
     }
     &::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: #707070;
       opacity: 1;
     }
     &:-ms-input-placeholder { /* Internet Explorer 10-11 */
       color: #707070;
       line-height: normal;
     }
   }
}

/* ==========================================================================
    #Contact form - end
========================================================================== */

/* ==========================================================================
   #Pagination styles - start
   ========================================================================== */

.qodef-pagination {

	display: inline-block;
	width: 100%;
	vertical-align: middle;
    text-align: center;
    position: relative;
    border-top: 1px solid #dadada;
    margin: 27px 0 31px;

	li {
		text-align: center;
		display: inline-block;

        &.qodef-pagination-number {

            a,
            &.active span {
                position: relative;
                display: inline-block;
                vertical-align: middle;
                text-decoration: none;
                cursor: pointer;
                white-space: nowrap;
                font-size: 16px;
                font-weight: 600;
                color: $default-heading-color;
                margin: 0 10px;

                &:after {
                    content: "";
                    position: absolute;
                    border-bottom: 2px solid transparent;
                    display: inline-block;
                    width: 200%;
                    left: -25%;
                    bottom: -4px;
                    transform: translateX(-12%);
                    @include qodefTransition(border-color 0.15s ease-out);
                }
            }

            a:hover,
            &.active span {
                color: $first-main-color;
                &:after {
                    border-color: $first-main-color;
                }
            }
        }

        &.qodef-pagination-prev {
            float: left;
            .qodef-pagination-arrow {
                margin-right: 11px;
            }
            &:hover {
                .qodef-pagination-arrow {
                    color: $first-main-color;
                }
            }
        }

        &.qodef-pagination-next {
            float: right;
            .qodef-pagination-arrow {
                margin-left: 11px;
            }
            &:hover {
                .qodef-pagination-arrow {
                    color: $first-main-color;
                }
            }
        }

        &.qodef-pagination-last-page,
        &.qodef-pagination-first-page,
        .qodef-pagination-arrow {
            color: #b3b3b3;
            font-size: 26px;
            vertical-align: middle;
            @include qodefTransition(color 0.2s ease-out);
        }

        &.qodef-pagination-first-page {
            position: absolute;
            top: 44px;
            left: 0;
            float: left;
            a {
                color: #c8c7c7;
            }
            span {
                display: inline-block;
                vertical-align: middle;
                &:first-child {
                    margin-right: 11px;
                }
            }
        }

        &.qodef-pagination-last-page {
            position: absolute;
            top: 44px;
            right: 0;
            float: right;
            a {
                color: #c8c7c7;
            }
            span {
                display: inline-block;
                vertical-align: middle;
                &:last-child {
                    margin-left: 11px;
                }
            }
        }

        .qodef-pagination-text {
            color: $default-heading-color;
            font-size: 15px;
            font-weight: 700;
            line-height: 22px;
            vertical-align: middle;
            position: relative;
            top: -2px;
        }
	}
}


/* ==========================================================================
   #Pagination styles - end
   ========================================================================== */

/* ==========================================================================
   #Owl Slider (Blog single, Portfolio single) - begin
   ========================================================================== */
.qodef-owl-slider {

	.owl-nav {

		.owl-prev {
			position: absolute;
			top: 50%;
			@include qodefTransform(translateY(-50%));
			left: 2%;
		}

		.owl-next {
			position: absolute;
			top: 50%;
			@include qodefTransform(translateY(-50%));
			right: 2%;
		}

		.qodef-prev-icon,
		.qodef-next-icon {
            font-size: 30px;
            line-height: 60px;
            color: #000;
            vertical-align: middle;
            width: 60px;
            height: 60px;
            @include qodefBorderRadius(50%);
            display: inline-block;
            text-align: center;

            i {
                line-height: 62px;
                left: 0;
                position: relative;
                @include qodefTransition(left 0.2s cubic-bezier(.1,0,.3,1));
            }
		}

        .qodef-prev-icon:hover i {
            left: -5px;
        }
        .qodef-next-icon:hover i {
            left: 5px;
        }

	}

	.owl-dots {
		text-align: center;

		.owl-dot {
			display: inline-block;
		}

		.owl-dot span {
			display: inline-block;
			width: 12px;
			height: 12px;
			margin: 3px;
			filter: Alpha(Opacity=50);
			opacity: 0.5;
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
			background: #e3e3e3;
		}

		.owl-dot.active span {
			opacity: 1;
		}

	}

}

/* ==========================================================================
   #Owl Slider (Blog single, Portfolio single) - end
   ========================================================================== */


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

.qodef-404-page{
	padding: 0;
}

.qodef-page-not-found{
	margin: 80px 0;

	h2{
		margin-bottom: 30px;
	}

	h4{
		margin-bottom: 30px;
	}
}

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

/* ==========================================================================
   #Back to Top styles - start
   ========================================================================== */
#qodef-back-to-top{   
    position: fixed;
    width: 58px;
    right: 58px;
    bottom: 58px;
    margin: 0;
    z-index: 10000;
    @include qodefTransition(opacity 0.15s ease-out, visibility 0.15s ease-out);
    opacity: 0;
    visibility: hidden;
}
#qodef-back-to-top.off{
    opacity: 0;
    visibility: hidden;
}
    
#qodef-back-to-top.on{
    opacity: 1;
    visibility: visible;
}

#qodef-back-to-top > span {
	width: 58px;
	height: 58px;
	line-height: 62px;
	text-align:center;
    display: block;
	color: $default-heading-color;
    font-size: 25px;
	background-color: $first_main_color;
    @include qodefTransition(background-color 0.15s ease-out, color 0.15s ease-out);
	box-sizing: border-box;
    position: relative;

    &:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 0;
        background-color: $default-heading-color;
        @include qodefTransition(height 0.2s);
    }
}

#qodef-back-to-top {
    .qodef-icon-stack i {
        position: relative;
    }
}

#qodef-back-to-top span span {
	display: block;
	line-height: inherit;
    position: relative;
    right: 1px;
}

#qodef-back-to-top:hover > span {
    color: #fff;

	&:before {
        height: 100%;
    }
}

@include phone-landscape {
    #qodef-back-to-top {
        width: 38px;
        right: 38px;
        bottom: 38px;
        > span {
            width: 38px;
            height: 38px;
            line-height: 38px;
            font-size: 18px;
        }
    }
}
    
/* ==========================================================================
   #Back to Top styles - end
   ========================================================================== */

/* ==========================================================================
   #Self Hosted Video styles - start
   ========================================================================== */
.qodef-self-hosted-video-holder{
	.qodef-video-wrap{
		.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
   ========================================================================== */

/* ==========================================================================
   #Screen reader text - start
   ========================================================================== */

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;

	&:focus {
		background-color: #f1f1f1;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		color: #21759b;
		display: block;
		font-size: 14px;
		font-size: 0.875rem;
		font-weight: bold;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000; /* Above WP toolbar. */
	}

}

/* ==========================================================================
   #Screen reader text - end
   ========================================================================== */

/* ==========================================================================
   #Browser specific styles - start
   ========================================================================== */

li, a, div, span {
    -webkit-tap-highlight-color: transparent;
}

input[type=text]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=text]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

textarea,
input:not([type=checkbox]):not([type=radio]) {
    box-shadow: none !important;
    -webkit-appearance: none;
    @include qodefBorderRadius(0);
}

textarea {
    overflow: hidden;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
}

/* ==========================================================================
   #Browser specific styles - end
   ========================================================================== */