@mixin circle-btn($color, $size){
	border:none;
	background-color:$color;
	color:black;
	width: $size;
	height: $size;
	margin: 4px;
	font-size: $size/2;
	border-radius: $size/2;
	box-shadow:2px 2px 4px hsla(0,0%,0%,1);
	transition: 
		transform .1s ease-out, 
		box-shadow .1s ease-out;
	&:hover{
		transform:scale(1.1);
		box-shadow:3px 3px 5px hsla(0,0%,0%,.5);
		background-color:lighten($color, 3%);
		cursor:pointer;
	}
	&:active{
		transform:scale(1.05);
	}
	&:focus{
		outline:none;
	}
}//cricle-btn end

@mixin flip-btn(){
	$selector: flip-btn;
	&.#{$selector}{
		$shadow-color: black;
		box-shadow:2px 2px 4px $shadow-color;
		transition: all 1s ease-in-out;
		color:blue;
		&:hover{
			transform: rotateX(360deg);
			box-shadow:4px 4px 8px lighten($shadow-color, 20%);
		}
	}
}//flip end

@mixin hexagon-btn($size: 100px, $color:#64C7CC){

	.hexagon {
		position: relative;
		width: $size; 
		height: $size * .57;
		background-color: $color;
		margin: $size * .28 10px;
		transition: 
			background-color .5s,
			box-shadow .5s;

		&:hover{
			background-color:lighten($color, 10%);
			box-shadow:4px 4px 8px gray;
		}
	}

	.hexagon:before,
	.hexagon:after {
	content: "";
	position: absolute;
	left:0;
	width: 0;
	border-left: $size * .5 solid transparent;
	border-right: $size * .5 solid transparent;


	}

	.hexagon:before {
		bottom: 100%;
		border-bottom: $size * .28 solid $color;
		&:hover{
			border-bottom: $size * .28 solid lighten($color,10%);
		}
	}

	.hexagon:after {
		top: 100%;
		width: 0;
		border-top: $size * .28 solid $color;
	}

}// hexagon-btn end

@mixin rollover($size, $color){
	margin:4px;
	.rollover{
		width: 2 * $size;
		height:$size;
		overflow:hidden;
		padding:0;
		border:1px solid darken($color, 10%);
		color:white;

		&:hover{
			.rollover__container{
				margin-top: -1 * $size;
				cursor:pointer;
			}
		}
		&__container{
			background-color:$color;
			transition: all .5s ease-in-out;
		}
		&__main{
			height:$size;
			line-height:$size;
			font-size: $size/2;
		}
		&__sub{
			height:$size;
			line-height:$size;
			font-size: $size/3;
		}
	}
}//rollover end

@mixin rotate_down(){

	@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
	$color:rgb(random(150) ,random(150) ,random(150));

	.container{
		width:200px;
		height:60px;
		cursor:pointer;
		perspective:500px;
	}
	.container .rotate_down{
		height:100%;
		transform-style:preserve-3d;
		-webkit-transform-style:preserve-3d;
		transition:0.25s;
		-webkit-transition:0.25s;
		position:relative;
	}
	.rotate_down:hover{
		transform:rotateX(-90deg);
	}
	.text, .visual{
		width:100%;
		//height:100%;
		position:absolute;
		left:0;
		box-sizing:border-box;
		border:5px solid rgb(18, 189, 61);
		font-family:'Source Sans Pro',sans-serif;
		line-height:50px;
		//font-size:17pt;
		text-align:center;
		text-transform:uppercase;
		background-color:#fff;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.text{
		color:blue;
		transform: translate3d(0, 0, 30px);
	}
	.visual{
		color:$color;
		background:#fff;
		transform: rotateX(90deg) translate3d(0, 0, 30px);
	}
}//rotate_down end

@mixin spin-btn($color){
	$selector: spin-btn;
	&.#{$selector}{
		margin:10px;
		border:none;
		background:none;
		color:$color;
		transition: 
			transform .5s ease-out, 
			color .7s ease-out;
		display:inline-flex;
		align-items: center;
		justify-content: center;

		&:hover{
			color:lighten($color,10%);
			transform: rotate(360deg);
		}
	}
}//spin-btn end

@mixin zoom-btn($scale){
	$selector: zoom-btn;
	&.#{$selector}{
		$shadow-color: black;
		box-shadow:2px 2px 4px $shadow-color;
		transition: all .2s ease-in-out;
		color:blue;
		&:hover{
			transform: scale($scale);
			box-shadow:4px 4px 8px lighten($shadow-color, 20%);
		}
	}
}//zoom-btn end

@mixin corner-card($color, $width){
	$gray: hsla(0,0%,80%, 1);
	$el: card;
	&.#{$el}{
		border:1px solid $gray;
		background-color:white;
		width: $width;
		margin:8px;
		padding:2px;
		transition: box-shadow .2s ease-out;
		&:hover{box-shadow:2px 2px 4px $gray;}
		.#{$el}__header{
			&__indicator{
				position:absolute;
				border-style: solid;
				border-width: 30px 30px 0 0;
				border-color: 
					$color
					transparent
					transparent
					transparent;
			}
			&__text{
				text-align:center;
				font-weight:bold;
				line-height:30px;
			}
		}
		.#{$el}__content{
			text-align:left;
			padding:4px;
			font-size:14px;
		}
	}
}//corner-card end

@mixin indicator-card(){

	$selector: indicator-card;
	&.#{$selector}{
		$color:darkgray;
		border:1px solid darken($color, 20%);
		transition: all .2s ease-out;
		width:100%;
		margin:10px;
		&:hover{
			box-shadow:2px 2px 4px black;
		}
		.#{$selector}__header{
			background-color:darkgray;
			padding:10px;
		}
		.#{$selector}__content{
			background-color:white;
			color:black;
			padding:10px;
		}

		.circle{
			//@include circle-button(lightblue, 24px);
			float:right;
			margin-top:16px;
		}
	}
}//indicator-card end

@mixin side-card($color, $titleSize, $width){
	$gray: hsla(0,0%,80%, 1);
	$el: scard;
	&.#{$el}{
		display:flex;
		width:$width;
		border:1px solid $gray;
		margin:10px;
		background-color:white;
		.#{$el}__indicator{
			background-color: $color;
			width: $titleSize + ($titleSize/2px);
			overflow: hidden;
			text-overflow:ellipsis;
			
			&__text{
				color:white;
				font-weight:bold;
				font-size:$titleSize;
				margin-left:$titleSize + ($titleSize/8px);
				margin-top:10px;
				transform: rotate(90deg);
				transform-origin: 0 0;
			}
		}
		.#{$el}__content{
			width:100%;
			padding:8px;
			text-align:left;
		}
	}
}//side-card end

@mixin drop_down_default($width:200px, $color:green){

	.dd{
		position:relative;
		.dd-title{
			color:white;
			background-color: $color;
			padding:8px 4px;
			width: $width;
			margin:0;
			//position:relative;
			font-size:16px;
			text-transform: uppercase;

			&:before{
				content: "";
				display: block;
				border-top: 5px solid $color;
				border-left: ($width / 2) solid transparent;
				border-right: ($width / 2) solid transparent;
				position: absolute;
				top: 100%;
				z-index: 101;
			}
		}
		.dd-menu{
			padding:0;
			border-left:1px solid green;
			border-right:1px solid green;
			border-bottom:1px solid green;
			margin:0;
			position: absolute;
			box-sizing:border-box;
			z-index:99;
			width:100%;
			background: hsla(0, 0%, 92%, .98);

		}
		.dd-menu-item{
			height:30px;
			overflow:hidden;
			line-height:30px;
			cursor:pointer;
			opacity:1;

			transition: 
				0.4s height cubic-bezier(.73,.32,.34,1.5),
				0.2s padding cubic-bezier(.73,.32,.34,1.5),
				0.2s margin cubic-bezier(.73,.32,.34,1.5),
				0.2s background-color,
				0.2s 0.2s opacity;

			&:hover{background: rgba(0,0,0,0.1);}
			&:first-child{margin-top:10px;}
			&:last-child{margin-bottom:10px;}
		}
	}

	.dd:not(:hover) {

		.dd-menu {
			border:none;
			background-color:hsla(0,0,85%,1);
			.dd-menu-item{
				opacity: 0;
				height:0;
				padding:0;
				margin: 0;
				color: rgba(25,25,25,0);
				transition: 
					0.5s 0.1s height,
					0.5s 0.1s padding,
					0.5s 0.1s margin,
					0.3s color;
				z-index: 99;
			}
		}
	}
}//drop_down end

@mixin classic_grid_layout(){
	.grid-container{
		display:grid;
		grid-template-columns: 20% 60% 20%;
		grid-gap:2px;
		.cell{

			color:white;
			border:1px solid lightgrey;
			text-align:center;
			background-color: hsla(153, 50%, 48%, 1);
			&.a, &.e{
				grid-column:1/4;
			}
			&.b, &.c, &.d{
				height:100%;
			}
		}
	}
}//classic_grid_layout end

@mixin left_column_grid(){
	.grid-container{
		display:grid;
		grid-template-columns: 30% 70%;
		grid-gap:2px;
		.cell{
			height:50px; 
			color:white;
			border:1px solid lightgrey;
			text-align:center;
			background-color: hsla(153, 50%, 48%, 1);
			&.a{
				grid-column:1/3;
			}
			&.b, &.c{
				height:100%;
			}
		}
	}
}//left_column_grid end

@mixin draw_in($color){
	.draw-in{

		$stroke-dash: 400;
		$animation-speed: 1000ms;
		$dot-size: 10px;
		display:flex;
		flex-direction:column;
		align-items:center;
		&__svg{
			width:15em;
			height:4em;
			animation: shadow 1s 2s linear forwards;
		}

		&__ads{
			fill: transparent;
			font-family:"Arial", Gadget, sans-serif;
			font-weight:bold;
			stroke-dashoffset: $stroke-dash;
			stroke-width: 2;
			stroke: $color;
			stroke-dasharray: $stroke-dash;
			animation: text 3s linear forwards;
			font-size:5em;
			box-shadow:2px 2px 3px black;
		}

		&__presents{
			animation: go-up 1s 1s ease-in-out forwards;
			opacity:0;
			color:#444;
		}

		&__dots{
			display: flex;
			justify-content: center;
		}

		&__dot {
			width: $dot-size;
			height: $dot-size;
			border: ($dot-size / 5) solid gray;
			border-radius: 50%;
			float: left;
			margin: 0 ($dot-size / 2);
			transform: scale(0);

			animation: fx $animation-speed ease infinite 2s;

			&:nth-child(2) {
				animation: fx $animation-speed ease infinite  2.3s;
			}
			&:nth-child(3) {
				animation: fx $animation-speed ease infinite 2.6s;
			}
		}
	}

	@keyframes shadow {
		0%{filter: none;}
		100%{filter: drop-shadow( 1px 1px 4px #ccc );}
	}
	@keyframes go-up {
		from{
			transform: translateY(1em);
			opacity:0;
		}
		to{
			transform: translateY(0);
			opacity:1;
		}
	}
	@keyframes text {
		50%{
			stroke-dashoffset: 0;
			fill:transparent;
		}
		100%{
			stroke-dashoffset: 0;
			fill: lighten($color, 20%);
		}
	}
	@keyframes fx {
		50% {
			transform: scale(1);
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
}//draw_in end

@mixin intro(
	$scale: 1, 
	$dot_color: orange, 
	$ads_color: hsla(0, 0%, 27%, 1), 
	$presents_color: hsla(0, 0%, 50%, 1)){

	$travel_distance: 235px;

	.intro{
		display:flex;
		align-items:flex-start;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 2em * $scale;
		position:relative;


		&__travel-dot, &__dot1, &__dot2, &__dot3 {
			width:10px * $scale;
			height: 10px * $scale;
			border-radius: 5px * $scale;
		}
		&__travel-dot{
			background-color: $dot_color;
			position:absolute;
			margin-top: 1em;
			animation: move-dot 1.5s ease-in-out forwards;
		}
		&__words{
			display:flex;
			align-items:flex-start;
			width:$travel_distance * $scale;
		}
		&__a, &__d, &__amp, &__s {
			font-weight: bold;
			opacity: 0;
			text-shadow: (2px * $scale) (4px * $scale) hsla(0, 0%, 83%, .7);
			color: $ads_color;
			animation: slide-down .2s ease-in-out forwards;
		}
		&__a	{animation-delay: .1s;}
		&__d	{animation-delay: .2s;}
		&__amp	{animation-delay: .3s;}
		&__s	{animation-delay: .4s;}

		&__presents {
			opacity: 0;
			animation: fade-in-presents 1s ease-in-out .5s forwards;
			margin: 0 10px;
			color: $presents_color;
		}

		&__dots{
			display: flex;
			justify-content:space-between;
			width:40px * $scale;
		}

		&__dot1, &__dot2, &__dot3 {
			background-color: $dot_color;
			margin-top: .8em;
			opacity: 0;
			animation: jump 1s ease-in-out infinite;
		}
		
		&__dot1 {animation-delay: 1.44s;}
		&__dot2 {animation-delay: 1.54s;}
		&__dot3 {animation-delay: 1.64s;}
	}

	@keyframes slide-down {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes jump {
		0% {
			transform: translateY(0);
			opacity: 1;
		}
		50% {
			transform: translateY(-10px);
			opacity: 1;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	@keyframes fade-in-presents {
		0% {
			opacity: 0;
			transform: translateY(-10px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes move-dot {
		0% {transform: translateX(0);}
		80% {
			transform: translateX($travel_distance * $scale);
			margin-top:1em;
		}
		95% {
			transform: translateX($travel_distance * $scale);
			margin-top: .8em;
			opacity: 1;
		}
		100% {
			transform: translateX($travel_distance * $scale);
			margin-top: .8em;
			opacity: 0;
		}
	}
}//intro end

@mixin underlined_tabs(){

	.content > div { 
		display:none; 
		font-size:14px;
		padding: 10px;
		height:300px;
		border-bottom:1px solid lightgray;
	}
	input {display: none;}
	label {
		display: inline-block; 
		padding: 5px 10px; 
		text-align: center;
		margin:0 2px;
		border-bottom: 4px solid #bebebe;
		transition: all .2s ease-out;
	}
	label:hover {
		cursor: pointer;
		border-bottom: 4px solid $vue_green;
	}
	input:checked + label {
		border-bottom: 4px solid $vue_green;
	}

	#tab1:checked ~ .content .content1,
	#tab2:checked ~ .content .content2,
	#tab3:checked ~ .content .content3,
	#tab4:checked ~ .content .content4{
		display:block;
	};

}//underlined_tabs end