@import "bootstrap3/mixins";
@import "bootstrap3/variables";

//
// Content Section
// --------------------------------------------------

.intense{
	&.content-section {
		position: relative;
		display: block;
		padding: 25px 0;
		border-style: solid;
		border-width: 0;
		background-repeat: no-repeat;
		background-position: 50% 0;
		width: auto;
		z-index: 0;

		&.video-background {
			overflow: hidden;
		}

		& > video {
			min-width: 100%;
			min-height: 100%;
			height: auto;
			width: auto;
		}

		.intense_post_heading {
			color: #ffffff;

			&:hover {
				//@include transition(all .35s ease-in-out);
				//color: #000000;
				text-decoration: none;
			}
		}

		.advance-button {
			position: absolute; 
			bottom: 0; 
			text-align: center; 
			left: 0; 
			right: 0;
		}

		.advance-arrow {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 30px;
			margin-top: -30px;
			z-index: 4;
			overflow: hidden;

			.advance-arrow-left, .advance-arrow-right {
				content: '';
				position: absolute;
				bottom: -10%;
				display: block;
				height: 0;
				width: 50.25%;
				border: 30px solid transparent;
				border-bottom-color: #ffffff;
				border-top-width: 0;
			}	

			.advance-arrow-left {
				border-left-width: 0;
  				border-right-width: 40px;
  				left: 0;
			}

			.advance-arrow-right {
				border-right-width: 0;
				border-left-width: 40px;
				right: 0;
			}
		}
	}

	&.container {
		@include container-fixed;
	}
}

#intense-contentsection-nav {
	display:none;
	opacity:0;
	position:fixed;
	z-index:1000;
	top:50%;
	right:20px;
	margin-top:-80px;
	transition:opacity .7s cubic-bezier(0.645, 0.045, 0.355, 1.000);

	.nav-link {
		display:block;
		position:relative;
		margin:0;
		height:10px;
		width:10px;
		padding:5px;
		box-sizing: initial;

		&:hover {
			cursor: pointer;

			.label {
				opacity: 1;
				cursor: pointer;
			}

			.dot {
				transform:scale(.75);
				&:after {
					transform:scale(.75);
				}
			}
		}

		&.active {
			&:hover {
				cursor: default;

				.label {
					opacity: 0;
				}
			}

			.dot {
				background:#fff;
				border:1px solid #08c;
				transform:scale(1);

				&:after {
					background:transparent;
				}
			}
		}

		.label {
			cursor:default;
			opacity:0;
			position:absolute;
			width:auto;
			right: 20px;
			white-space: nowrap;
			top:0px;
			text-align:right;
			color:#666;
			line-height:20px;
	        transition:opacity .2s ease-in-out;
	        font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	        background: #fff;
	        padding: 3px 5px;
	        border-radius: 3px;
		}

		.dot {
			display:block;
			position:relative;
			height:12px;
			width:12px;
			border-radius:6px;
			border:1px solid #fff;
			background:#888;
			transform:scale(.5);

			&:after {
				position:absolute;
				display:block;
				content:'';
				height:8px;
				width:8px;
				top:1px;
				left:1px;
				border-radius:4px;
				background:#888;	
	        	transform:scale(.5);
			}
		}		
	}
}
