/**
 * 
 * 05. Base elements
 * 
 */


/** 05.01 Responsive headings **/
.responsive-heading {
	font-size: 83px;
	line-height: 0.85em;
	letter-spacing: -5px;

	@include until($bp-ld) {
		font-size: 72px;
	}

	@include until($bp-md) {
		font-size: 72px;
		font-size: 6vw;
	}

	@include until($bp-sm) {
		font-size: 68px;
		font-size: 5.5vw;
	}
	
	@include until($bp-xs) {
		font-size: 70px;
		font-size: 9.1vw;
	}

	@include until($bp-xxs) {
		font-size: 42px;
		font-size: 12vw;
		letter-spacing: 0;
	}

	@media screen and (max-height: 600px) and (orientation: landscape) { // hacky
		font-size: 40px;
		font-size: 10vh;
	}

	&.medium {
		font-size: 56px;
		letter-spacing: 0;

		@include until($bp-sm) {
			font-size: 40px;
			font-size: 4vw;
		}
		
		@include until($bp-xs) {
			font-size: 52px;
			font-size: 7vw;
		}

		@include until($bp-xxs) {
			font-size: 36px;
			font-size: 8vw;
		}
	}

	&.small {
		font-size: 38px;
		letter-spacing: 0;

		@include until($bp-sm) {
			font-size: 30px;
			font-size: 3vw;
		}
		
		@include until($bp-xs) {
			font-size: 36px;
			font-size: 4.5vw;
		}

		@include until($bp-xxs) {
			font-size: 26px;
			font-size: 6vw;
		}
	}
}


/** 05.02 Dropdown arrow/caret **/
.caret {
	display: inline-block;
	height: 100%;
	margin-left: 2px;
	border: 0;

	&:before {
		@extend %ion;
        content: $ionicon-var-ios-arrow-down;
        display: inline-block;
        line-height: 1em;
        font-weight: bold;
	}
}


/** 05.03 Modals **/
.modal-dialog,
.modal.fade .modal-dialog,
.modal.fade .modal-dialog {
	position: absolute;
	width: auto;
	margin: 0;
	top: 50%;
	left: 50%;
	@include transform(translate3d(-50%,-50%,0));
}

@media (min-width: 768px) {
	.modal-dialog {
		width: auto;
	}
}


/** 05.04 Screen reader text **/
.screen-reader-text {
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);

	&:hover, &:active, &:focus {
		background-color: #f1f1f1;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		color: #21759b;
		display: block;
		font-size: 14px;
		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 */
	}
}


/** 05.05 Scroll to top button **/
#scroll-to-top {
	background-color: $color-darker-gray;
	color: $color-lighter-gray;
	font-size: 22px;
	position: fixed;
	bottom: 0;
	right: 30px;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	@include transition(opacity 0.2s linear, visibility 0s linear 0.2s, color 0.2s);

	&.round {
		bottom: 28px;
		border-radius: 20px;
		width: 40px;
		height: 40px;
		line-height: 40px;
	}

	&.show {
		visibility: visible;
		opacity: 0.7;
		transition-delay: 0s;
	}

	&:hover {
		color: $color-primary; /* redux[color: main_theme_color] */
		opacity: 1;
	}
}


/** 05.06 Social Icons **/
.social-icons{ 
	margin-bottom: 2em;
}

.social-icons .icon,
.yith-wcwl-share li a {
	color: $color-darker-gray;
	font-size: 24px;
	display: inline-block;
	margin-right: 5px; 
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	opacity: 0.5;

	&:hover {
		opacity: 1;
	}

	&.facebook {
		background-image: none;

		&:before {
			@extend %ion;
			content: $ionicon-var-social-facebook;
		}
	}

	&.twitter {
		background-image: none;

		&:before {
			@extend %ion;
			content: $ionicon-var-social-twitter;
		}
	}

	&.pinterest {
		background-image: none;

		&:before {
			@extend %ion;
			content: $ionicon-var-social-pinterest;
		}
	}

	&.googleplus {
		background-image: none;

		&:before {
			@extend %ion;
			content: $ionicon-var-social-googleplus;
		}
	}
	
	&.linkedin {
		background-image: none;

		&:before {
			@extend %ion;
			content: $ionicon-var-social-linkedin;
		}
	}

	&.email {
		background-image: none;

		&:before {
			@extend %ion;
			content: $ionicon-var-android-mail;
		}
	}	
}

 /** 05.07 Media elements **/
.widget,
.hentry {
	.mejs-mediaelement,
	.mejs-container .mejs-controls {
		background: $color-darker-gray;

		.mejs-time-rail .mejs-time-loaded,
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
			background: $color-lighter-gray;
		}

		.mejs-time-rail .mejs-time-current {
			background-color: $color-primary; /* redux[background-color: main_theme_color] */
		}

		.mejs-time-rail .mejs-time-total,
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
			background: $color-dark-gray;
		}

		.mejs-time-rail span,
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
		.mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
			border-radius: 2px;
		}
	}
}