:root{
  --theme-yellow:#fdd066;
  --theme-blue:#35558b;
  --white:#fff;
  --black:#000000;
}
html {
  font-size: 62.5%;
	font-size: calc(1em * .625);

	-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
 */


/**
 * Animation
 */
@-webkit-keyframes scale-up-center {
	0% {
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

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

/**
 * Open the modal box
 */
.modal-dialog:target {
	opacity: 1;
	display: block;
	/* Background height, here is the math:
	5vh × 2 + the bluring shadow's height (70px).
  Better place into @media query.
  Keeping here for CodePen demo */
	height: calc(100vh + 10vh + 70px);

	pointer-events: auto
}

/* Prevent outline on opening modals within some browsers */
.modal-dialog:target {outline: none}

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

	-webkit-animation: scale-up-center 100ms cubic-bezier(.39, .575, .565, 1) both;
	animation: scale-up-center 100ms cubic-bezier(.39, .575, .565, 1) both
}

/**
 * Hide the background beside the modal box
 */
html .modal-dialog:target ~ .wrapper,
    a[class^="close"]:target ~ .wrapper {
	overflow: auto;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 1px;
	margin: 0;
	padding: 0
}

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

/**
 * The wrapper of the modal box
 */
.modal-dialog {
	display: none;
	opacity: 0;
	position: absolute;
	z-index: 99999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0
}

/**
* Old browsers can't inherit the document's height:
* keep it for modern ones
*/
@supports (display: flex) {

  html .modal-dialog:target ~ .wrapper {
 /* Render the wrapper document fixed within modern browsers and with a 0px height within old ones */
    overflow: hidden;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 100vh
  }
  

}

/*! 
 * A class for the modal-dialog to hide the background beside the modal boxes */
html .modal-dialog.no--bg:target ~ .wrapper {height:0}

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

	position: relative;
	z-index: 1000;

	width: 98%;
	max-width: 36em;
	min-width: 250px;

	margin: 1.5% auto;
	margin: 5vh auto;

	background: var(--white);
	background-size: cover;
	font-size: 125%;

	-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: 0 0 10px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 0 30px rgba(0, 0, 0, .3);
	-o-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-khtml-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	-ms-box-shadow: 0 0 10px rgba(0, 0, 0, .3);
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);

    /* Activates GPU Hardware-Acceleration */
	will-change: transform;
    
	/* For IE7- support: can be safely removed if not used */
	*zoom: 1
}
	
/* Flexbox test support: not really needed */
@supports (display: flex) {

	.modal-dialog .modal {
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%
	}

}

/* Grid test support: not really needed */
@supports (display: grid) {

	.modal-dialog .modal {
		display: grid;

		grid-column: auto / span 1;
/*
		grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
*/
		-webkit-box-pack: initial;
		-webkit-box-flex: unset;
		flex-wrap: initial;
		flex: unset;
		justify-content: initial
	}

}

/**
 * The close button
 */
.modal-dialog .close {
	box-sizing: content-box;
	display: block;
	position: absolute;
	z-index: 10000;
	top: .35em;
	right: .9em;
	width: 1.5em;
	height: 1.5em;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	align-self: center;
	text-align: center;
	text-decoration: none;
	color: #fff;

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


.modal-dialog .close strong {
	display: block;
	width: 1.5em;
	height: 1.5em;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	line-height: 1.5em;
	font-weight: normal;
	cursor: pointer
}

/**
 * The close button state
 */
.modal-dialog .close:hover,
	.inner-dialog .close:active {
	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-tap-highlight-color: transparent
}

/**
 * The header of the modal box
 */


.modal-dialog .close {background: var(--theme-blue);}

.modal-dialog .close:hover{
	color: var(--theme-blue);
	background-color: var(--theme-yellow);
}
/**
 * The main title of the modal box header
 */
.header-modal h3 {
	display: inline;
	display: inline-block;
	margin: 0;
	padding: .8em 3em 0 1em;
	vertical-align: middle;
	letter-spacing: -1px;
	text-transform: capitalize;
	line-height: 1;
	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;
  /* Necessary: some browsers (e.g. IE9) can't set the with of the block */
	width: auto;

	height: 99%;
	margin: 0;
	padding: 5px 15px 50px 20px;
	
	padding: 5px 15px 0 20px;

	border-right: 1px solid #eee;
	border-left: 1px solid #eee;
	color: #212121;
  scroll-behavior: smooth
}

.modal-dialog .modal,
	.modal-dialog .modal.modal-message {
	-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
}

/* Consistency visual borders for Message Boxes winthin old browsers */
.modal-dialog .modal.modal-message {
	border: 1px solid #eee;
	/*max-height: 75%;*/
}

.modal-dialog .modal.modal-message .inner-dialog {
	width: 100%;
    /*height: 850px;*/
    max-height: none;
	padding: 5px 20px 5px 20px;
	border: none
}

.modal-dialog .inner-dialog img {
	width: 100%;
	-ms-interpolation-mode: bicubic;
}

/**
 * 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 paragraph font size
 */
.modal-dialog .inner-dialog p {
	font-size: 85%;
	line-height: 1.5;
	hyphens: auto
}

:-webkit-any(.modal-dialog) p {font-size: 85%}

:-moz-any(.modal-dialog) p {font-size: 85%}

:matches(.inner-dialog) p {font-size: 85%}


span[class$="-sign"] {
	display: inline-table;
	display: inline-block;
	/* 2px less due to padding */
	width: 24px;
	height: 28px;
	margin: 0 2.5px;
	padding: 0 2px;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	font: normal normal normal 22px/28px Arial, sans-serif
}
  
span[class$="-sign"] strong {
	display: -moz-inline-box;
	display: inline-block
}



@media only screen and (max-width:720px) {

  .modal-dialog:target {
	/* Background height, here is the math:
	5vh × 2 + the bluring shadow's height (70px) */
	height: calc(100vh + 10vh + 70px)
	}
	.modal-dialog .modal {width: 90%}
	.header-modal {max-height: 1vmax}
	.header-modal h1 {
		font-size: 80%;
		line-height: 1
	}
	html .header-modal span {
		width: auto;
		margin: 0
	}
	.header-modal a {
		float: none;
		width: 24px;
		height: 24px;
		margin: 0 0 0 .5em;
		vertical-align: middle
	}
	.header-modal svg {
		width: 22px;
		height: 22px;
		vertical-align: baseline
	}
	.modal-dialog .modal {
		margin: 5vh auto;
		margin: calc(15vh - 40px) auto;
		margin: 5vmin auto
	}
	.footer-modal a {font-size: 60%}
	.mob-hide {display: none}

}

/**
 * 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%
}

html .visible .modal {-ms-transform: none;transform: none}

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

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

/*! link--ltr: A class for the footer-modal bloc
	in order to support ltr languages */
html .modal .link--ltr {
	text-align: left
}
/* Language direction: works only with modern browsers */
[dir=rtl] .modal-dialog .footer-modal a {float: inline-end}

/**
 * Styling the scroll bars for webkit browsers engine
 */
.modal-dialog ::-webkit-scrollbar {
	width: 3px;
	height: 3px
}

.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}



/*! ============================
    CSS rules for this page demo
*/

.wrapper {width: 100%}

.wrapper p {
  width: 96%;
	/*padding: 10px 2% 0;*/
	font-size: 20px;
	line-height: 1.5
}

p.first-line {float: left;clear: both;width: 96%}

/* Custom fonts */
.modal-dialog .inner-dialog h2{font-family: 'Noto Sans', sans-serif}

.modal-dialog .inner-dialog p{font-family: 'Open Sans', sans-serif}

/**
 * The buttons
*/
.button {
	float: left;
	margin: 0 .5em 1em 0;
	padding: .8em .5em 1em;
	background: #0b7cd7;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	line-height: 1.2
}

.button:hover {text-decoration: underline}

/* Thumbnail :D */
.modal-dialog .inner-dialog .thumb {
	clear: both;
	display: block;
	width: 80px;
	height: 80px;
	margin: .1em auto 0;
	border: 6px solid #eee;
  
	border-radius: 50%;
	-o-object-fit: cover;
	object-fit: cover
}