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

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

.edgtf-comment-holder {
	margin: 0 auto 55px;
	padding: 33px 0 21px;
	box-sizing: border-box;
	border-bottom: 1px solid $first-main-color;

	.edgtf-comment-image {
		display: block;
		float: left;
		width: 84px;
		height: 84px;

		img{
			@include edgtfBorderRadius(50%);
		}
	}
	.edgtf-comment-text {
		padding: 0 0 0 105px;
		min-height: 85px;

		.edgtf-comment-info {
			display: inline-block;
			width: 100%;
			vertical-align: middle;
			margin-bottom: 5px;
			margin-top: -2px;
		}

		.edgtf-reply-edit-holder {
			margin-top: 5px;
		}

		.replay,
		.comment-reply-link,
		.comment-edit-link {
			color: $first-main-color;
			font-size: 15px;
			font-weight: 500;
			position: relative;
			display: inline-block;
			margin-right: 10px;
			@include edgtfTransition(color 0.15s ease-out);

			&:hover{
				color: $gray-color;
			}
		}

		.edgtf-comment-name {
			display: inline-block;
			vertical-align: middle;
			margin-right: 3px;
		}

		.edgtf-comment-date {
			display: inline-block;
			vertical-align: middle;
			color: $gray-color;
			font-size: 15px;
			font-weight: 500;
			line-height: 12px;
		}
	}

	.edgtf-comments-closed{
		padding-top:16px;
	}

	.comment-respond{
		margin-top: 20px;
	}
	
	.edgtf-comment.edgtf-pingback-comment{
		.edgtf-comment-text {
			padding: 0;
			min-height: 0;
		}

		.edgtf-comment-name-holder{
			margin-bottom: 0;
		}
	}

}

.comment-respond {
	.comment-reply-title {
		margin-bottom: 43px;

		&.edgtf-comment-reply-title-registered {
			margin-bottom: 0;
		}
	}

	.logged-in-as {
		padding: 0;
		margin: 0;
	}

	.edgtf-comment-registered-user {
		.logged-in-as {
			margin-bottom: 20px;
		}
	}

	.edgtf-two-columns-50-50-inner{
		margin: 0 -7.5px;

		.edgtf-column .edgtf-column-inner{
			padding: 0 7.5px;
		}
	}
}
.edgtf-comment-list {
	list-style: none;
	position: relative;
	z-index: 150;
	padding: 0;
	margin: 0;

	li.comment,
	li.pingback {
		display: inline-block;
		position: relative;
		width: 100%;

		.edgtf-comment {
			padding-top: 31px;
			padding-bottom: 41px;

			p {
				margin: 0;
				color: $gray-color;
			}
		}

		@for $i from 2 through 10 {
			&.depth-#{$i} .edgtf-comment {
				padding-left: 80px * ($i - 1);
			}
		}

		&.depth-1:last-child {
			> .edgtf-comment:last-child {
				border-bottom: 0;
			}
		}
	}

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

.edgtf-comment-pager{

	a,span{
		padding: 0 10px;
		font-weight: 500;

		&:first-child{
			padding-left: 0;
		}
	}
}


%input-style{
	vertical-align: middle;
	width: 100%;
	border: none;
	margin: 0;
	outline: 0;
	color: $default-text-color;
	font-size: 17px;
	font-family: inherit;
	padding: 42px 0;
	background-color: transparent;
	border-bottom: 1px solid $default-text-color;
	@include edgtfBoxSizing(border-box);
	@include placeholder($gray-color);
}

%input-style1{
	width: 100%;
	outline: 0;
	font-size: 17px;
	font-family: inherit;
	color: $default-text-color;
	vertical-align: middle;
	margin: 0 0 19px 0;
	padding: 20px 22px 17px;
	border: 1px solid $default-border-color;
	@include edgtfBoxSizing(border-box);
	@include placeholder($gray-color);

	&:focus{
		background-color: $default-elements-background-color;
	}
}



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

	&.wpcf7-textarea{
		height: 110px;
	}
}

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

#submit_comment,
.post-password-form input[type='submit'],
input.wpcf7-form-control.wpcf7-submit,
#commentform .edgtf-btn{
	display: inline-block;
	width: auto;
	padding: 8px 49px;
	font-size: 21px;
	font-weight: 500;
	font-family: inherit;
	line-height: 1em;
	color: $first-main-color;
	border: 3px solid $first-main-color;
	background-color: transparent;
	cursor: pointer;
	margin: 50px 0 0 0;
	@include edgtfTransition(all 0.15s ease-out);

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

#commentform .edgtf-btn{
	margin-top: 5px;
}
/* ==========================================================================
   #Comments styles - end
   ========================================================================== */

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

.edgtf-pagination-holder {
	margin-top: 50px;
	margin-bottom: 80px;

	.edgtf-pagination {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
		position: relative;
		text-align: center;

		ul {
			display: inline-block;
			vertical-align: middle;
			margin: 0;
			padding: 0;
		}

		li {
			float: left;
			text-align: center;
			display: block;

			a,
			&.active span {
				position: relative;
				display: inline-block;
				vertical-align: middle;
				text-decoration: none;
				cursor: pointer;
				white-space: nowrap;
				box-sizing: content-box;
				color: $gray-color;
				font-size: 15px;
				font-weight: 500;
				padding: 12px 12px;
				margin: 0 4px;
				@include edgtfTransition(color .15s ease-out, border-color .15s ease-out);
			}

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

			&.edgtf-pagination-prev,
			&.edgtf-pagination-next,
			&.edgtf-pagination-first-page,
			&.edgtf-pagination-last-page{

				a{
					padding: 12px;
				}

				a:hover{
					color: #000;
					border-bottom-color: transparent;
				}

				span{
					vertical-align: middle;
				}
			}

			&.edgtf-pagination-first-page,
			&.edgtf-pagination-last-page{
				letter-spacing: -8px;
			}
		}
	}
}


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

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

	.owl-buttons {

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

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

		.edgtf-prev-icon,
		.edgtf-next-icon {
			display: inline-block;
			width: 42px;
			height: 42px;
			@include edgtfBorderRadius(50%);
			border: 2px solid #fff;
			text-align: center;

			i {
				font-size: 22px;
				line-height: 40px;
				color: #fff;
			}

		}

	}

	.owl-pagination {
		text-align: center;

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

		.owl-page span {
			display: inline-block;
			width: 12px;
			height: 12px;
			margin: 0 5px;
			filter: Alpha(Opacity=50);
			opacity: 0.5;
			border-radius: 50%;
			background-color: transparent;
			border: 1px solid $header-dark-color;

			&:hover{
				background-color: $header-dark-color;
			}
		}

		.owl-page.active span {
			background-color: $header-dark-color;
		}

	}

}

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

/* ==========================================================================
   #Slick Slider navigation - start
   ========================================================================== */
.slick-slider {

	.edgtf-slick-prev,
	.edgtf-slick-next {
		position: absolute;
		z-index: 100;
		top: 50%;
		display: block;
		padding: 0;
		cursor: pointer;
		border: none;
		outline: none;
		color: $first-main-color;
		font-size: 30px;
		@include edgtfTransform(translateY(-50%))
	}

	.edgtf-slick-prev {
		left: 14px;
	}

	.edgtf-slick-next {
		right: 12px;
	}

	.edgtf-slick-dots {
		text-align: center;
		margin: 40px 0 0 0;
		padding: 0;


		li {
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 1px solid $header-dark-color;
			background-color: transparent;
			box-sizing: border-box;
			display: inline-block;
			margin: 0 5px;
			cursor: pointer;

			&.slick-active,
			&:hover{
				background-color: $header-dark-color;
			}

		}
	}

}
/* ==========================================================================
   #Slick Slider navigation - end
   ========================================================================== */

/* ==========================================================================
   #Flex slider navigation - start
   ========================================================================== */

.flex-control-paging.flex-control-nav{
	li a{
		width: 8px;
		height: 8px;
		background-color: transparent;
		box-shadow: none;
		border: 1px solid $first-main-color;

		&:hover,
		.flex-active{
			background-color: $first-main-color;
		}
	}
}



/* ==========================================================================
   #Flex slider navigation - end
   ========================================================================== */

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

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

.error404 {
    .edgtf-content .edgtf-container {
        background-color: #d5d5d5;
        background-size: cover;
        background-position: center;
        display: table;
    }
}

.edgtf-page-not-found{
	margin: 0;
	text-align: center;

	h1 {
		font-weight: 500;
		font-size: 34px;
		margin-top: 10px;
        color: #313131;
	}

	h2 {
		margin-bottom: 30px;
	}

	h4 {
		width: 35%;
		margin: 6px auto 36px;
	}

    input[type=submit],
    input[type=text] {
        -webkit-appearance: none;
        background: transparent;
        border: none;
        outline: none;
        margin: 0;
        padding: 0;
    }

    .edgtf-search-wrapper {
        position: relative;
        line-height: normal;
        width: 40%;
        margin: 37px auto 0;

        input[type='text'] {
            width: 100%;
            outline: none;
            border: 2px solid $first-main-color;
            line-height: 45px;
            height: 45px;
            padding: 0 13px;
            font-weight: 500;
            font-size: 15px;
            color: $gray-color;
            font-family: 'Yantramanav', sans-serif;
            @include edgtfBoxSizing(border-box);
            @include placeholder($gray-color);
        }

        input[type='submit'] {
            font-family: 'Linearicons-Free';
            position: absolute;
            right: 0;
            top: 0;
            width: 45px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
            color: $gray-color;
            font-size: 16px;
            font-weight: 700;
        }
    }
}

.edgtf-page-not-found-part .edgtf-404-text {
	font-size: 120px;
	font-weight: 500;
	color: $first-main-color;
	line-height: 1em;
	display: block;
	text-align: center;
	letter-spacing: -0.04em;
}

.error404 .edgtf-wrapper .edgtf-container-inner.edgtf-404-page {
	padding: 200px 0 270px 0;
}


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

/* ==========================================================================
   #Back to Top styles - start
   ========================================================================== */
$back-to-top-size:51px;
#edgtf-back-to-top{
    position: fixed;
    width:$back-to-top-size;
    right: $back-to-top-size;
    bottom: 65px;
    margin: 0;
    z-index: 10000;
    -webkit-transition: -webkit-transform .2s $transition-easing;
    transition: transform .2s $transition-easing;
	@include edgtfTransform(scale(.6));
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
	background-color:#1f1f1f;


	&.edgtf-btt-light{
		color: #7c7c7c;
		background-color: #f6f6f6;

		> .edgtf-icon-stack {
			color: $first-main-color;
		}
	}

	&.off{
	    opacity: 0;
	    visibility: hidden;
		@include edgtfTransform(scale(.6));
	}

	&.on{
	    opacity: 1;
	    visibility: visible;
		@include edgtfTransform(scale(1));
	}

	> span {
		width:$back-to-top-size;
		height: $back-to-top-size;
		line-height:$back-to-top-size;
		text-align:center;
	    display: block;
	    font-size:20px;
	    color: #fff;
	    -webkit-transition: -webkit-transform .3s $transition-easing;
	    transition: transform .3s $transition-easing;
		box-sizing: border-box;

		&:last-child {
			position: absolute;
			top:0;
			left: 0;
			@include edgtfTransform(translateY(100%));
		}
	}

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

		&.edgtf-icon-font-elegant:before{
			margin-right: 2px;
		}
	}

	&:hover {
		span {
			&:first-child {
				@include edgtfTransform(translateY(-100%));
			}

			&:last-child {
				@include edgtfTransform(translateY(0));
			}
		}
	}
}

/* ==========================================================================
   #Back to Top styles - end
   ========================================================================== */

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

		.mejs-inner > .mejs-controls{
			height: 44px !important;
			padding: 0 13px 0 10px;
			box-sizing: border-box;
			background: #eaeaea;

			.mejs-time {
				color: $first-main-color;
				font-weight: 600;
			}

			.mejs-button button{
				height: 26px;
				width: 20px;
				line-height: 26px;
				background-image: none;
				margin: 0;
				outline: none;
				padding-top: 8px;

				&:before{
					font-family: 'ElegantIcons';
					color: $first-main-color;
					display: inline-block;
					vertical-align: middle;
					font-size: 15px;
				}
			}

			.mejs-playpause-button{
				&.mejs-play button:before{
					content: '\49';
					font-size: 20px;
				}

				&.mejs-pause button:before{
					content: '\5f';
					font-size: 19px;
					margin-top: 1px; //because of the 1px spacing around play icon
				}
			}

			div.mejs-time-rail{
				padding-top: 20px;
			}

			.mejs-horizontal-volume-slider .mejs-horizontal-volume-total{
				background-color: #fff;
			}

			.mejs-time-rail .mejs-time-loaded {
				background: $first-main-color;
			}

			.mejs-volume-button{
				margin-top: 2px;
				margin-left: 8px;

				&.mejs-mute button:before{
					content: '\e069';
				}

				&.mejs-unmute button:before{
					content: '\e067';
				}
			}

			.mejs-fullscreen-button{
				margin-top: 2px;
				margin-left: 8px;

				button:before{
					content: '\30';
				}

				&.mejs-unfullscreen button:before{
					content: '\2f';
				}
			}

			a.mejs-horizontal-volume-slider {
				margin-top: 1px;
			}

			.mejs-time {
				padding: 18px 8px 0 6px;
			}

			.mejs-time-rail .mejs-time-total {
				margin: 0 8px;
				background: $first-main-color;
			}

			.mejs-time-rail .mejs-time-current,
			.mejs-horizontal-volume-slider .mejs-horizontal-volume-current{
				background: $first-main-color;
			}

			.mejs-time-rail span,
			.mejs-time-rail a{
				height: 6px;

			}
			.mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
			.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
				height: 6px;
			}

			span.mejs-time-handle{
				display: inline-block;
				top: -5.5px;
				width: 15px;
				height: 15px;
				background-color: #8b8b8b;
				border: none;
				@include edgtfBorderRadius(25px);
			}
		}
	}
}

/* ==========================================================================
   #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
   ========================================================================== */