﻿/**
 * CSS for AITO Super Widget script to include tours feedback on your website.
 * Copyright Â© 2016 AITO

 * CSS Modal
 * http://drublic.github.com/css-modal
 * @author Hans Christian Reinl - @drublic
 */
html {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch
}

.has-overlay {
	overflow: hidden;
	height: auto
}

	.has-overlay > body {
		height: 100%;
		overflow: hidden
	}

.modal--fade, .modal--show {
	-webkit-transform: translate(0,100%);
	-moz-transform: translate(0,100%);
	-o-transform: translate(0,100%);
	-ms-transform: translate(0,100%);
	transform: translate(0,100%);
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999999;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	display: none\9;
	color: #222;
	line-height: 1.3
}

	.is-active.modal--fade, .is-active.modal--show, .modal--fade:target, .modal--show:target {
		-webkit-transform: translate(0,0);
		-moz-transform: translate(0,0);
		-o-transform: translate(0,0);
		-ms-transform: translate(0,0);
		transform: translate(0,0);
		width: auto;
		height: auto;
		opacity: 1;
		display: block\9
	}

.is-active.modal--fade, .is-active.modal--show {
	height: 100%\9;
	width: 100%\9
}

.modal--fade .modal-inner, .modal--show .modal-inner {
	position: absolute;
	top: 60px;
	left: 50%;
	z-index: 20;
	margin-left: -325px;
	width: 650px;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch
}

	.modal--fade .modal-inner > iframe, .modal--fade .modal-inner > img, .modal--fade .modal-inner > video, .modal--show .modal-inner > iframe, .modal--show .modal-inner > img, .modal--show .modal-inner > video {
		width: 100%;
		height: auto;
		min-height: 300px
	}

	.modal--fade .modal-inner > img, .modal--show .modal-inner > img {
		width: auto;
		max-width: 100%
	}

	.modal--fade .modal-inner iframe, .modal--show .modal-inner iframe {
		display: block;
		width: 100%;
		border: 0
	}

.modal--fade .modal-content, .modal--show .modal-content {
	position: relative;
	max-height: 400px;
	max-height: 60vh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch
}

	.modal--fade .modal-content > *, .modal--show .modal-content > * {
		max-width: 100%
	}

.modal--fade .modal-close, .modal--show .modal-close {
	display: block;
	height: 1px;
	clip: rect(0 0 0 0);
	margin: -1px;
	overflow: hidden;
	text-indent: -100px
}

	.modal--fade .modal-close:focus:after, .modal--show .modal-close:focus:after {
		outline: dotted 1px;
		outline: -webkit-focus-ring-color auto 5px
	}

	.modal--fade .modal-close:before, .modal--show .modal-close:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10
	}

	.modal--fade .modal-close:after, .modal--show .modal-close:after {
		position: absolute;
		top: 15px;
		right: 50%;
		z-index: 20;
		margin-right: -325px
	}

@media screen and (max-width:690px) {
	.modal--fade .modal-inner, .modal--show .modal-inner {
		width: auto;
		left: 20px;
		right: 20px;
		margin-left: 0
	}

	.modal--fade .modal-close:after, .modal--show .modal-close:after {
		margin-right: 0 !important;
		right: 20px
	}
}

@media screen and (max-width:30em) {
	.modal--fade, .modal--show {
		-webkit-transform: translate(0,400px);
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0);
		-webkit-transition: opacity 1ms .25s;
		-moz-transition: opacity 1ms .25s;
		-o-transition: opacity 1ms .25s;
		-ms-transition: opacity 1ms .25s;
		transition: opacity 1ms .25s;
		display: block;
		right: auto;
		bottom: auto
	}

		.is-active.modal--fade, .is-active.modal--show, .modal--fade:target, .modal--show:target {
			width: 100%;
			height: 100%
		}

			.is-active.modal--fade .modal-close, .is-active.modal--show .modal-close, .modal--fade:target .modal-close, .modal--show:target .modal-close {
				display: block
			}

		.modal--fade .modal-inner, .modal--show .modal-inner {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			overflow: auto
		}

		.modal--fade .modal-content, .modal--show .modal-content {
			max-height: none;
			-ms-word-break: break-all;
			word-break: break-all;
			word-break: break-word;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			hyphens: auto
		}

		.modal--fade .modal-close, .modal--show .modal-close {
			display: none;
			right: auto
		}

			.modal--fade .modal-close:before, .modal--show .modal-close:before {
				content: '';
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 20
			}

			.modal--fade .modal-close:after, .modal--show .modal-close:after {
				top: 5px !important;
				right: 5px;
				left: auto;
				margin-left: 0
			}
}

@media screen and (max-height:46em) and (min-width:30em) {
	.modal--fade .modal-content, .modal--show .modal-content {
		max-height: 340px;
		max-height: 50vh
	}
}

@media screen and (max-height:36em) and (min-width:30em) {
	.modal--fade .modal-content, .modal--show .modal-content {
		max-height: 265px;
		max-height: 70vh
	}
}

.is-stacked.modal--fade, .is-stacked.modal--show {
	-webkit-transform: translate(0,0) scale(1,1);
	-moz-transform: translate(0,0) scale(1,1);
	-o-transform: translate(0,0) scale(1,1);
	-ms-transform: translate(0,0) scale(1,1);
	transform: translate(0,0) scale(1,1);
	opacity: 1
}

	.is-stacked.modal--fade .modal-inner, .is-stacked.modal--show .modal-inner {
		-webkit-animation: scaleDown .7s ease both;
		-moz-animation: scaleDown .7s ease both;
		animation: scaleDown .7s ease both
	}

	.is-stacked.modal--fade .modal-close, .is-stacked.modal--show .modal-close {
		opacity: 0
	}

.modal--fade .modal-inner, .modal--show .modal-inner {
	border-radius: 2px;
	background: #fff;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,.6);
	box-shadow: 0 0 30px rgba(0,0,0,.6);
	max-width: 100%;
	-webkit-transition: max-width 0s linear,margin-left 0s linear;
	transition: max-width 0s linear,margin-left 0s linear
}

.modal--fade header, .modal--show header {
	border-bottom: 1px solid #ddd;
	padding: 0 1.2em
}

	.modal--fade header > h2, .modal--show header > h2 {
		margin: .5em 0
	}

.modal--fade .modal-content, .modal--show .modal-content {
	border-bottom: 1px solid #ddd;
	padding: 15px 1.2em
}

.modal--fade footer, .modal--show footer {
	border-top: 1px solid #fff;
	padding: 0 1.2em 18px;
	background: #f0f0f0;
	border-radius: 2px
}

.modal--fade .modal-close:before, .modal--show .modal-close:before {
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAEUlEQVQoz2NgeEYAjioYSQoAzOTmAXhPhyoAAAAASUVORK5CYII=)
}

.modal--fade .modal-close:after, .modal--show .modal-close:after {
	content: '\00d7';
	background: 0 0;
	border-radius: 2px;
	padding: 2px 8px;
	font-size: 2.2em;
	text-decoration: none;
	text-indent: 0
}

@media screen and (max-width:30em) {
	.is-stacked.modal--fade, .is-stacked.modal--show {
		-webkit-animation: scaleDown .7s ease both;
		-moz-animation: scaleDown .7s ease both;
		animation: scaleDown .7s ease both
	}

		.is-stacked.modal--fade .modal-inner, .is-stacked.modal--show .modal-inner {
			-webkit-animation: none;
			-moz-animation: none;
			animation: none
		}

		.is-stacked.modal--fade .modal-close, .is-stacked.modal--show .modal-close {
			opacity: 1
		}

	.modal--fade .modal-close:before, .modal--show .modal-close:before {
		background: 0 0;
		height: 2em;
		-webkit-box-shadow: 0 0 5px transparent;
		box-shadow: 0 0 5px transparent
	}

	.modal--fade .modal-inner, .modal--show .modal-inner {
		padding-top: 2em;
		-webkit-box-shadow: none;
		box-shadow: none
	}

	.modal--fade .modal-close, .modal--show .modal-close {
		text-decoration: none
	}

		.modal--fade .modal-close:after, .modal--show .modal-close:after {
			content: attr(data-close);
			font-size: 2.2em;
			padding: .3em 1em
		}
}

[data-cssmodal-maxwidth] .modal-inner {
	width: 100%
}

@media screen and (max-width:690px) and (min-width:481px) {
	[data-cssmodal-maxwidth] .modal-inner {
		left: 50%
	}

	[data-cssmodal-maxwidth] .modal-close:after {
		right: 50% !important
	}
}

@media screen and (max-width:690px) {
	.modal-inner {
		height: 80%
	}
}

.modal-content {
	max-height: 80vh !important;
	height: 80vh
}

@media screen and (max-width:480px) {
	.modal-content {
		max-height: 90vh !important;
		height: 90vh
	}

	.modal--fade .modal-inner, .modal--show .modal-inner {
		background: rgba(0,0,0,.7) !important
	}
}

@media screen and (max-width:30em) {
	[data-cssmodal-maxwidth] .modal-inner {
		max-width: 100% !important;
		margin-left: 0 !important
	}

	[data-cssmodal-maxwidth] .modal-close:after {
		margin-right: 0 !important;
		right: 0 !important
	}

	.modal--fade .modal-close:after, .modal--show .modal-close:after {
		padding: 0 .5em
	}
}

.aito-button {
	border: 0
}

.modal-close, .modal-close:active, .modal-close:focus, .modal-close:hover, .modal-close:visited {
	color: #757575
}
