button {
	> a {
		color: white;

		&:hover {
			color: white;
		}
	}
}

.btn {
	display: block;
	cursor: pointer;

	&--outlined {
		display: inline-block;
		border: 1px solid $colorGreyDark;
		padding: 5px 10px;
		color: $colorGreyDark;

		&:hover {
			border-color: $colorRed;
			color: $colorRed;
		}
	}
}

.btn-round {
	width: 30px;
	height: 30px;
	font-style: normal;
	text-align: center;
	line-height: 2em;
	color: black;
	background-color: white;
	border-radius: 50%;
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
	transition: all .25s ease-in-out;
	transition-property: background-color, color;

	&:hover {
		color: black;

		@include responsive('>', 'tablets', (
			color: white,
			background-color: black
		));
	}

	&:focus {
		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
	}
}

.btn-submit {
	width: $inputHeightS;
	height: $inputHeightS;
	background: url(./images/button/btn-submit.png) no-repeat center;
	background-size: contain;
	box-shadow: none;
}

.btn-play {
	width: 53px;
	height: 52px;
	background: url(./images/button/btn-play.png) no-repeat center;
}

.btn-close {
	width: 28px;
	height: 28px;
	background: url(images/button/btn-close-x.png) no-repeat center;
	background-size: cover;
	transition: 0.5s cubic-bezier(.27,1.64,.32,.95); 
	position: absolute;
	top: -37px;
	right: 5px;
	cursor: pointer;

	@include responsive('>', 'tablets', (
		width: 48px,
		height: 48px,
		top: -72px,
		right: 0
	));

	&:hover {
		@include responsive('>','tablets-l', (
			transform: rotate(90deg)
		));
	}
}

.btn-goback {
	&:before {
		content: "\e907";
		font-family: social !important;
	}
}

.btn-x {
	width: 16px;
	height: 16px;
	background: url(images/button/btn-x.png) no-repeat center;
}

.cta-chat {
	background: url(images/button/cta-chat.gif) no-repeat center;
}

.cta-askus {
	background: url(images/button/cta-askus.png) no-repeat center;
}