@charset "UTF-8";
/*! 
 * CSS Modal Box by cara-tm.com - MIT license - https://github.com/cara-tm/modal_box 
 * @date     05/08/2017
 * @revision 24/10/2017
*/

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility
}

/**
 * Min resets
 */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0
}

/**
 * Prevent conflicts from other CSS rules
 */
body .modal-dialog {
	font: normal normal normal 100%/1 Arial,sans-serif;
	font-kerning: normal;
	-moz-font-feature-settings: "kern";
	-webkit-font-feature-settings: "kern";
	font-feature-settings: "kern"
}

/**
 * Desable the user's mouse selection
 */
.no__select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	user-select: none
}

/**
 * Animation
 */
/*
Removed due to uggly support in some webkit old browsers
*/
@-webkit-keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5)
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5)
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

#open-modal {
    display: none;
}

/**
 * Open the modal box
 */
.modal-dialog {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	display: block;

	/* 'auto' value generates background hightlighting; 'none' desables the click or tap 
	pointer-events: auto
	*/
}

/**
 * Apply animation on modal box opening
 */
.modal-dialog .modal {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;

	/* Note. Older webkit browsers need decimal values prefixed with zero */
	-webkit-animation: scale-up-center 100ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: scale-up-center 100ms cubic-bezier(.39, .575, .565, 1) both;
	/* Reinitiate will-change */
	will-change: auto
}

/**
 * Removes background highlighting behavior
 */
.modal-dialog:focus {outline: none}

/**
 * Hide the background beside the modal box
 */
.modal-dialog:not(.plain) ~ .wrapper,
	a[class^="close"] ~ .wrapper {
	overflow: auto;
	position: absolute;
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;

	-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}

/**
 * Available class for the .modal-box container which
 * allows to hide the .wrapper on the modal boxes opening
 */
.modal-dialog.no-visibility ~ .wrapper {
    visibility: hidden;
    height: 1px;
    min-height: 0;
    max-height: 0;
    margin: 0;
    padding: 0
}

/**
 * For default browser (Android 2.3.6): restores the 
 * wrapper visibility after closing the modal box
 */
#close ~ .wrapper,
	a[class^="close"] ~ .wrapper {
	position: static
}

/**
 * The wrapper of the modal box
 */
.modal-dialog {
	display: none;
	position: fixed;
	/* position: absolute; */
	z-index: 9999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: 25%;
	/* GPU optimisation */
	will-change: transfotm;
}

.modal-dialog:not(.plain) {
	/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=) 0 0 repeat;*/
	background: rgba(0, 0, 0, 0.75);
}

/**
 * The inner part of the modal box
 */
.modal-dialog .modal {
	overflow: hidden;
	overflow: -moz-hidden-unscrollable;

	position: relative;
	z-index: 999999999;

	max-width: 35em;

	margin: 2.5% auto 0;
	margin: 5vh auto 0;
	background: #353535;
	font-size: 120%;
	
	/* 2px more than the .header-modal radius */
	-webkit-border-radius: 8px 8px 0 0;
	-khtml-border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	background-clip: padding-box;

	/* Activates GPU Hardware-Acceleration */
	-webkit-transform: scale(0, 0);
	-moz-transform: scale(0, 0);
	-o-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	transform: scale(0, 0);
	will-change: transform;

	/* -webkit-box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.3), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
	-moz-box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.3), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
	-khtml-box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.3), 0 50px 100px 0 rgba(51, 51, 51, 0.2);
	box-shadow: 0 20px 70px -10px rgba(51, 51, 51, 0.3), 0 50px 100px 0 rgba(51, 51, 51, 0.2); */

	/* For IE7 support: can be safely removed if not used */
	zoom: 1
}


/**
 * The close text message
 */
.modal .close-span {
    display: block;
    padding-top: .3em;
    line-height: 1.43em
}

.close-span strong {font:normal normal normal 70%/1 Arial,sans-serif}

/**
 * The close button
 */
.modal-dialog .close-btn {
	display: block;
	position: absolute;
	z-index: 9000000000;
	top: .35em;
	right: .4em;
	width: 1.435em;
	height: 1.435em;
	margin: 0;
	padding: 0;
	background: #0288d1;
	vertical-align: middle;
	align-self: center;
	text-align: center;
	text-decoration: none;
	color: #fff;
	line-height: 1.435;
	/* Only sans-serif font preserves vertical alignement */
	font-family: Arial, sans-serif;
	cursor: pointer;

	/* No vendor prefix for FF: ugly in old versions */
	-webkit-border-radius: 50%;
	-khtml-border-radius: 50%;
	border-radius: 50%
}

/**
 * The close button state
 */
.modal-dialog .close-btn:hover,
	.inner-dialog .close:active {
	background: #03a9f4;
	outline: none;
	border: none;

	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);

	/* -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); */

	/* Alternative effect in case if 'bounceInUp' class isn't used */
	-webkit-transition: -webkit-transform 100ms ease-in-out;
	transition: -webkit-transform 100ms ease-in-out;
	transition: transform 100ms ease-in-out;
	transition: transform 100ms ease-in-out, -webkit-transform 100ms ease-in-out;

	-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
}

.modal-dialog .close:focus {outline: none}

.modal .inner-dialog .modal-btn {
	display: block;
	text-align: center;
	background-color: #0288d1;
	color: #fff;
	border-radius: 9px;
	padding: 13px 10px;
	margin: 0 1vh 1vh 1vh;
}

.modal .inner-dialog .modal-btn:hover {
	cursor: pointer;
}

.modal .inner-dialog a {
    color: #0288d1;
}

/**
 * The header of the modal box
 */
.header-modal {
	/* position: absolute; */
	position: relative;
	z-index: 999999999;

	/* height: 3.75em;
    height: 4.5rem;
	min-height: 4.5rem;
	max-height: 26vh; */

	/* border: 1px solid #eee; */
    padding: 0.5rem;
	border-bottom: 0;
	color: #eee;
	font-family: inherit;
	font-weight: 300;

	-webkit-border-radius: 6px 6px 0 0;
	-khtml-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;

	/* -webkit-box-shadow: -15px 10px 30px rgba(255, 255, 255, 0.9);
	-moz-box-shadow: -15px 10px 30px rgba(255, 255, 255, 0.9);
	box-shadow: -15px 10px 30px rgba(255, 255, 255, 0.9) */
}

/**
 * The main title of the modal box header
 */
.header-modal span {
	display: inline-table;
	display: inline-block;
	margin: 0;
	vertical-align: middle;
	letter-spacing: -1px;
	text-transform: capitalize;
	font-size: 110%;
	font-weight: 400
}

/**
 * The content part into the modal box
 */
.modal-dialog .inner-dialog {
	overflow: hidden;
	/* For FF 1 */
	overflow: auto;
	overflow-y: visible;
	overflow-y: auto;

	display: block;

	/* List of gracefull degradation max width & height */
	width: 94.25%;
	width: auto;
	width: calc(100% - 41px);
	max-height: 14em;
	max-height: 47vh;
	height: 90%;

	margin: 0;
	padding: 5px 20px 0 20px;
	/* border-right: 1px solid #eee;
	border-left: 1px solid #eee; */
	color: #fff;

	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;

	/* Activates smooth scrolling on mobiles */
	scroll-behavior: smooth;

    font-size: 1rem;
    padding-bottom: 1rem;
}

/**
 * Changes modal message boxes aspect
 */
.modal-dialog .modal.modal-message {
	/* border: 1px solid #eee; */

	-webkit-border-radius: 6px 6px 0 0;
	-khtml-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0
}

.modal-dialog .modal.modal-message .inner-dialog {
	overflow: hidden;
	margin: 0 0 .5em;
	padding-top:1em;
	border: 0
}

/**
 * Prevent headings resizing
 */
:-webkit-any(.inner-dialog) * {font-size: 100%}

:-moz-any(.inner-dialog) * {font-size: 100%}

:matches(.inner-dialog) * {font-size: 100%}

/**
 * Restores the font size
 */
.modal-dialog .inner-dialog p,
	.modal-dialog .inner-dialog ul {
	font-size: 85%;
	line-height: 1.5
}

/**
 * The footer of the modal box
 */
.footer-modal {
	overflow-y: auto;
	display: table;

	direction: ltr;

	width: 100%;
	height: 3em;
	height: 3.75rem;

	background: #0288d1;
	text-align: right;
	border-right: 1px solid #0288d1;
	border-left: 1px solid #0288d1;

	-webkit-border-radius: 0 0 2px 2px;
	-moz-border-radius: 0 0 2px 2px;
	-ms-border-radius: 0 0 2px 2px;
	-khtml-border-radius: 0 0 2px 2px;
	border-radius: 0 0 2px 2px;
	/* -webkit-box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.14);
	-moz-box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
	-khtml-box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.14);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.14); */

	/* Activates smooth scrolling on mobiles */
	scroll-behavior: smooth
}

/**
 * The footer links
 */
.footer-modal a {
	display: table-cell;	

	/* The only reasonable solution to get good looking buttons, but 
       forces to reverse the order of the links into the footer. */
	float: right;
	margin-top: -1px;
	padding: 0 2em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	word-break: keep-all;
	color: #fff;
	font-weight: 700;
	font-size: 70%;

	line-height: 4.3em;
	line-height: 3.75rem;

	-webkit-transition: .3s ease-out;
	-moz-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	-ms-transition: .3s ease-out;
	transition: .3s ease-out
}

/**
 * The footer links states
 */
.footer-modal a:hover,
	.footer-modal a:active {
	background: #03a9f4;

	-webkit-tap-highlight-color: #03a9f4
}

.footer-modal a:focus {outline: none}

/**
 * Media query for screen below 720px
 */
@media only screen and (max-width:720px) {

	.modal-dialog .modal.modal-message .inner-dialog {
		max-height: none;
		height: auto
	}
	.header-modal {max-height: 11vmax}
	.modal-dialog .modal {
		width: 80%;
		margin: 5vh auto 3em;
		margin: calc(15vh - 50px) auto 3em;
		margin: 5vmin auto 3em
	}
	/* .footer-modal {
		-webkit-box-shadow: 0 -10px 20px rgba(225, 225, 225, .95);
		-moz-box-shadow: 0 -10px 20px rgba(225, 225, 225, .95);
		-khtml-box-shadow: 0 -10px 20px rgba(225, 225, 225, .95);
		box-shadow: 0 -10px 20px rgba(225, 225, 225, .95)
	} */
	.footer-modal a {font-size: 60%}
	.mob-hide {display: none !important}

}

/**
 * Corrections for Opera 7.5 browser
 * 1.° default height of the modal box
 * 2.° fallback for line-height
 */
:-o-prefocus,
	html .modal-dialog .inner-dialog {
	/* 1.° */
	height: 100%;
	max-height: 100%
}

:-o-prefocus,
	html .footer-modal a {
	/* 2.° */
	display: inline-block;
	padding: .8em 2em
}

.modal-dialog ::-webkit-scrollbar {
	width: 3px;
	height: 3px
}

/**
 * Styling the scroll bars for webkit browsers engine
 */
.modal-dialog ::-webkit-scrollbar-button {background-color: #666}

.modal-dialog ::-webkit-scrollbar-track {background-color: #999}

.modal-dialog ::-webkit-scrollbar-track-piece {background-color: #fff}

.modal-dialog ::-webkit-scrollbar-thumb {
	height: 50px;
	background-color: #999;
	border-radius: 3px
}

.modal-dialog ::-webkit-scrollbar-corner {background-color: #999}

.modal-dialog ::-webkit-resizer {background-color: #666}