/************************************************/
/*General*/
/************************************************/

/*
html {
	font-size: calc(1em + 1vw);
}
*/


/*https://allthingssmitty.com/2016/12/05/flexible-type-using-root/*/

html {
	font-size: calc(1em + .5vw);
}


body {
	font-family: 'Signika', sans-serif;
	padding: 0;
	margin: 0;
}

/************************************************/
/*Page Structure*/
/************************************************/
.page {
	height: 100%;
	padding-top: 3em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/*
@media only screen and (max-width: 767px) {
	.page {
		flex-direction: column;
	}
}
*/

/************************************************/
/* Navigation */
/************************************************/
/* Hide button in desktops and laptops*/
button#menu {
	display: none;
}

nav.page-navigation {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	height: 3em;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	background: url(../img/vector-jean-texture-compressed.png);
	background-repeat: repeat-x repeat-y;
	background-position: top left;
	background-size: 70px 70px;
	z-index: 3;
}

/* Border image on navigation*/
nav.page-navigation:after {
	content: "";
	border-bottom: 1.20em solid transparent;
	width: 100%;
	position: absolute;
	left: 0;
	top: calc(3em - 0.42em);
	border-image: url(../img/fringe-h40-v2-compressed.png);
	border-image-slice: 20;
	border-image-width: 1.20em;
	border-image-outset: 0;
	border-image-repeat: repeat;
}

nav.page-navigation > ul {
	margin: 0;
	padding: 0 0.25em 0 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	flex-basis: 73%;
	height: 3em;
	
}

nav.page-navigation > ul > li {
	padding: 0.15em;
}

nav.page-navigation > ul > li > a {
	text-decoration: none;
	color: white;
	display: block;
	text-transform: capitalize;
	/* Added */
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0 0.15em 0 0.15em;
	border-radius: 0.2em;
	border: 1px solid rgb(230, 89, 64);
	background: url(../img/top-left-corner-compressed.svg), url(../img/top-right-corner-compressed.svg), url(../img/bottom-left-corner-compressed.svg), url(../img/bottom-right-corner-compressed.svg), radial-gradient(rgba(255, 161, 144, 0.6) 0%, rgba(255, 99, 71, 0.3) 80%, rgba(255, 99, 71, 0.3) 100%), tomato;
	background-position: top 0.1em left 0.1em, top 0.1em right 0.1em, bottom 0.1em left 0.1em, bottom 0.1em right 0.1em, top left;
	background-size: 13px 13px, 13px 13px, 13px 13px, 13px 13px, 100% 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	box-shadow: -2px -2px 1px rgba(255, 223, 218, 0.5), 1px 1px 1px rgba(139, 54, 39, 0.5);
	z-index: 1;
	transition: all 0.3s linear;
}

nav.page-navigation > ul > li > a:hover,
nav.page-navigation > ul > li > a:focus,
nav.page-navigation > ul > li > a:active {
	background-color: rgb(207, 80, 58);
	border: 1px solid rgb(186, 72, 52);
	box-shadow: -2px -2px 1px rgba(207, 181, 176, 0.5), 1px 1px 1px rgba(113, 44, 32, 0.5);
}

nav.page-navigation > ul > li > a.disabled {
	cursor: default;
	pointer-events: none;
	text-decoration: none;
	background: url(../img/top-left-corner-compressed.svg), url(../img/top-right-corner-compressed.svg), url(../img/bottom-left-corner-compressed.svg), url(../img/bottom-right-corner-compressed.svg), rgb(204, 204, 204);
	background-position: top 0.1em left 0.1em, top 0.1em right 0.1em, bottom 0.1em left 0.1em, bottom 0.1em right 0.1em, top left;
	background-size: 13px 13px, 13px 13px, 13px 13px, 13px 13px, 100% 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	border: 1px solid rgb(184, 184, 184);
	box-shadow: -1px -1px 1px rgba(255, 255, 255, 0.5), 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.logo {
	display: flex;
	flex-basis: 27%;
	height: 3em;
	padding-left: 0.5em;

}

.logo img {
	width: auto;
	height: calc(3em - 0.75em);
	margin: 0.25em 0 0 0;
	border-radius: 0.2em;
	background: tomato;
	border: 1px solid rgb(230, 89, 64);
	padding: 0 0.2em 0 0.2em;
}

/* https://www.30secondsofcode.org/css/s/offscreen/Offscreen */
.logo h1 {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

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

	/*IDs for javascript togge button*/
	button#menu {
		display: flex;
		height: 3em;
		width: 3em;
		margin-left: 0.2em;
		/* For firefox */
		justify-content: center;
		align-items: center;
		border: 0;
		border-radius: 0.25em;
		background: url(../img/top-left-corner-compressed.svg), url(../img/top-right-corner-compressed.svg), url(../img/bottom-left-corner-compressed.svg), url(../img/bottom-right-corner-compressed.svg), radial-gradient(rgba(255, 161, 144, 0.6) 0%, rgba(255, 99, 71, 0.3) 80%, rgba(255, 99, 71, 0.3) 100%), tomato;
		background-position: top 0.1em left 0.1em, top 0.1em right 0.1em, bottom 0.1em left 0.1em, bottom 0.1em right 0.1em, top left;
		background-size: 9px 9px, 9px 9px, 9px 9px, 9px 9px, 100% 100%;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	}

	button#menu:focus {
		outline: 0;
	}

	#page-nav-ul {
		display: none;
	}

	button#menu.hamburger-icon:before {
		content: "☰";
		font-size: 1.5em;
		font-weight: bold;
		margin: auto;
		color: white;
	}

	button#menu.close-icon:before {
		content: "⨯";
		font-size: 1.5em;
		font-weight: bold;
		margin: auto;
		color: white;
	}

	/*************************************/
	nav.page-navigation {
		flex-basis: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		background: url(../img/vector-jean-texture-compressed.svg);
		background-repeat: repeat-x repeat-y;
		background-position: top left;
		background-size: 70px 70px;
		border-bottom: 1px solid rgb(98 106 117);
	}

	nav.page-navigation:after {
		display: none;
	}

	nav.page-navigation > ul {
		flex-wrap: wrap;
		flex-basis: 100%;
		text-align: center;
		height: auto;
	}

	nav.page-navigation > ul > li {
		display: flex;
		flex-direction: column;
		padding: 0;
		flex-basis: 100%;
	}

	nav.page-navigation > ul > li > a {
		border-radius: 0;
		border-top: 1px solid rgb(230, 89, 64);
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		background-image: none;
		background-color: tomato;
		box-shadow: none;
	}

	nav.page-navigation > ul > li:last-of-type a {
		border-bottom: 1px solid rgb(230, 89, 64);
	}

	nav.page-navigation > ul > li > a:hover,
	nav.page-navigation > ul > li > a:focus,
	nav.page-navigation > ul > li > a:active {
		background-color: white;
		color: tomato;
		border-top: 1px solid rgb(230, 89, 64);
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		box-shadow: none;
	}

	nav.page-navigation > ul > li > a.disabled {
		background: rgb(204, 204, 204);
		border-left: 0;
		border-right: 0;
		border-top: 1px solid rgb(230, 89, 64);
		border-bottom: 1px solid rgb(230, 89, 64);
		box-shadow: none;
	}

	.logo {
		/*		flex: 1 0 auto;*/
		flex-grow: 1;
		flex-shrink: 0;
		flex-basis: auto;
		margin: 0;
		/* Added*/
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.logo img {
		width: auto;
		padding: 0;
		height: calc(3em - 0.75em);
		margin: 0.25em 0.5em 0 0;
		padding: 0 0.2em 0 0.2em;
	}
}

/************************************************/
/*Main*/
/************************************************/
main.page-main {
	/*flex-grow: 1; flex-shrink: 1;flex-basis: 100%;*/
    flex: 1 1 100%;
	background-color: rgb(232, 236, 241);
	/* Because of fringe */
	padding-top: 0.5em;
}

@media only screen and (max-width : 767px) {
	main.page-main {
		padding-top: 0;
	}
}


/************************************************/
/*Footer*/
/************************************************/
footer.page-footer {
	display: flex;
	flex-basis: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	background-color: rgb(232, 236, 241);
	height: auto;
}

footer.page-footer > div {
	width: calc(1/3 * 100% - (1 - 1/3) * 0.5em);
	box-sizing: border-box;
	margin: 0.5em 0.5em 0.5em 0;
	min-height: 27vh;
	border-style: solid;
	border-width: 11px 11px 11px 11px;
	-moz-border-image: url(../img/sample-fabric-compressed.svg) 11 11 11 round;
	-webkit-border-image: url(../img/sample-fabric-compressed.svg) 11 11 11 round;
	-o-border-image: url(../img/sample-fabric-compressed.svg) 11 11 11 round;
	border-image: url(../img/sample-fabric-compressed.svg) 11 11 11 fill round;
	filter: drop-shadow(1px 2px 2px rgba(139, 54, 39, 0.5));
	/*	added*/
	display: flex;
}

footer.page-footer > div:first-child {
	margin-left: 0.5em;
}

footer.page-footer > div > div {
	background: tomato;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

footer.page-footer > div > div > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

footer.page-footer > div > div > ul > li {
	text-transform: capitalize;
	text-shadow: 0 2px rgb(207, 80, 58);
	font-weight: 500;
}

footer.page-footer > div > div > ul > li::first-letter {
	color: white;
	/*	font-size: 125%;*/
	display: block;
}

footer.page-footer > div > div > ul > li a {
	display: block;
	text-decoration: none;
	color: white;
	padding: 0.5em;
}

footer.page-footer > div > div > ul > li a.vid {
	display: block;
	text-decoration: none;
	color: white;
}

footer.page-footer > div > div > ul > li a.vid::before {
	content: "";
	display: inline-block;
	/*	background: white;*/
	width: 1.25em;
	height: 1.25em;
	line-height: 1.25em;
	border-radius: 0.10em;
	box-shadow: 0 2px rgb(207, 80, 58);
	margin: 4px 0.5em 0 0;
	background: url(../img/right-rounded-triangle-simplified.svg), white;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px 12px;
}

@media only screen and (max-width : 767px) {
	footer.page-footer {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	footer.page-footer > div {
		box-sizing: border-box;
		width: calc(1 * 100% - (1) * 1em);
		margin-top: 0.5em;
		margin-bottom: 0;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}

	footer.page-footer > div:nth-child(2) {
		margin-bottom: 0.25em;
	}

	footer.page-footer > div:last-child {
		margin-top: 0.25em;
		margin-bottom: 0.5em;
	}
}


/************************************************/
/* Variables, Utilities, Typogaphy */
/************************************************/
/* Colors */
.tomato-color {
	color: tomato;
}

.tomato-bkg {
	background: tomato;
}

.bisque-color {
	color: bisque;
}

.bisque-bkg {
	background: bisque;
}

.grey-color {
	color: rgba(26,26,26,1);
}

.grey-bkg {
	background: rgba(26,26,26,1);
}

.white-color {
	color: white;
}

.white-bkg {
	background: white;
}

small {
	font-size: 0.65em;
}

strong {
	font-weight: bolder;
	font-size: 1.15em;
}

.shadow {
	color: rgba(26,26,26,1);
	/* Slategrey 0.5 */
	text-shadow: 0 1px 0 rgba(119,136,153,0.5);
}

.no-shadow {
	text-shadow: none;
}

.underlined {
	text-decoration: underline;
}


/* Code */
pre {
	display: block;
	position: relative;
	font-family: monospace;
	font-size: 0.85em;
	white-space: pre-wrap;
	margin: 1em 0 1em 0;
	padding: 1em 0.5em 1em 0.5em;
	background: rgb(26 26 26);
	color: white;
}

code {
	font-family: inherit;
}

/********** Margin 0.5em **********/
.mt {
	margin-top: 0.5em;
}

.mr {
	margin-right: 0.5em;
}

.mb {
	margin-bottom: 0.5em;
}

.ml {
	margin-left: 0.5em;
}

/********** Links **********/

a.standard-link {
	display: inline-block;
	position: relative;
	text-decoration: none;
}

a.standard-link::before {
	content: "\1F517";
	font-size: 0.85em;
	vertical-align: middle;
	padding-right: 0.1em;
}

a.standard-link::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: rgba(26, 26, 26, 255);
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}

a.standard-link:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

/********** Blockquote **********/
.blockquote-container {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-basis: 100%;
	margin: 0.65em 0 0.65em 0;
	padding: 0.25em 0 0.25em 0;
}

.blockquote-container > blockquote {
	border: 0;
	margin: 0;
	padding: 0 0 0 1em;
	width: auto;
}

.blockquote-container > .blockquote-img {
	min-width: calc(120px + 0.25em);
	margin-left: 0.25em;
	align-self: flex-start;
}

.blockquote-container > .blockquote-img > img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
}

.blockquote-container > blockquote > p {
	font-style: italic;
}

.blockquote-container > blockquote > p::before {
	content: '\201C\2009';
}

.blockquote-container > blockquote > p::after {
	content: '\2009\201D';
}

.blockquote-container > blockquote > cite {
	font-size: 0.75em;
}

.blockquote-container > blockquote > cite > a {
	text-decoration: underline;
	color: inherit;
	padding-right: 0.5em;
}


@media only screen and (max-width : 767px) {
	.blockquote-container > blockquote {
		padding: 0.25em;
		width: 100%;
	}

	.blockquote-container > .blockquote-img {
		display: none;
	}
}

h1 {
	font-size: 1.5em;
	margin: 0 0 0.5em 0;
}

h2 {
	font-size: 1.35em;
	margin: 0 0 0.5em 0;
}

h3 {
	font-size: 1.125em;
	margin: 0 0 0.5em 0;
}

p {
	margin: 0 0 0.5em 0;
	padding: 0;
	text-align: justify;
	line-height: 1.2;
}

/********** Download button **********/
.dwld-div {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.dwld-div a {
	padding: 0.75em 0 0.75em 0;
	text-align: center;
	color: white;
	text-decoration: none;
	text-transform: capitalize;
	font-size: 0.85em;
}

.dwld-div a:only-child {
	margin: 0 0 0.5em 0;
	width: 100%;
}

.dwld-div a:first-child:not(:only-child) {
	margin: 0 0.25em 0.5em 0;
	width: calc(50% - 0.25em);
}

.dwld-div a:nth-child(2) {
	margin: 0 0 0.5em 0.25em;
	width: calc(50% - 0.25em);
}

/*Common attributes */
.dwld-div a:only-child,
.dwld-div a:first-child:not(:only-child),
.dwld-div a:nth-child(2) {
	border-radius: 0.25em;
	background: rgb(26, 26, 26);
	position: relative;
}

/* Download symbol */
.dwld-div a:only-child::before,
.dwld-div a:first-child:not(:only-child)::before,
.dwld-div a:nth-child(2)::before {
	content: "\21E9";
	position: absolute;
	text-align: center;
	text-indent: -1.5em;
	color: tomato;
	font-weight: bold;
	text-decoration: underline;
}

@media only screen and (max-width : 640px) {
	.dwld-div {
		flex-direction: column;
	}

	.dwld-div a:only-child,
	.dwld-div a:first-child:not(:only-child),
	.dwld-div a:nth-child(2) {
		margin: 0 0 0.5em 0;
		width: 100%;
	}
}

/************************************************/
/* Zipper */
/************************************************/

/*Positionning top hidden div https://front-back.com/faire-deborder-des-elements-en-dehors-dun-parent-en-overflow-hidden*/

.cache-wrapper {
	position: relative;
}

.cache {
	width: 100%;
	height: 5em;
	position: absolute;
	top: -3em;
	background-color: rgb(232, 236, 241);
	z-index: 1;
	/*	opacity: 0.3;*/
}

/*wrapper*/
.filler {
	position: relative;
	/*	background: black;*/
	width: 40px;
	left: 50%;
	transform: translateX(-50%);
}

/* container full content */
.full-container {
	overflow: hidden;
	height: 780px;
	width: 40px;
	margin: calc(-400px + 2em) auto 95px auto;
	background: ;
}

@media only screen and (min-width:240px) and (max-width:319px) {}


/*top content*/
.bottom-container {
	position: absolute;
	width: 40px;
	height: 400px;
	margin: 0 auto 0 auto;
	background: ;
}

#opened-zipper {
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: calc(50% - 110px);
}

#zipper-track {
	position: absolute;
	/* height enfant */
	top: 400px;
	left: calc(50% - 20px);
	width: 40px;
	height: 380px;
	background: white;
	margin-left: auto;
	margin-right: auto;
}


#zipper-head {
	position: absolute;
	bottom: -95px;
	left: calc(50% - 23px);
	margin-left: auto;
	margin-right: auto;
	width: 46px;
	height: 95px;
}

#zipper-head-top {
	width: 46px;
	height: 41px;
	position: absolute;
	top: 0;
	left: 0;
}

#zipper-head-pull {
	width: 46px;
	height: 62px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#zipper-head-button {
	width: 46px;
	height: 42px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}



/* Add a class to svg ex: <svg viewBox="0 0 46 62" xmlns="http://www.w3.org/2000/svg" class="shadow-move">*/
.pull-move {
	animation: p-move;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	transform-origin: 50% 0%;
	animation-fill-mode: both;
}


@keyframes p-move {

	0%,
	100% {
		transform: rotate(12deg);
	}

	50% {
		transform: rotate(-12deg);
	}
}

#zipper-head-pull .pull-move:hover {
	animation-play-state: paused;
}


/************************************************/
/*Div style*/
/************************************************/
/********** Div-1 **********/

.Div-1 {
	width: calc(100% - 1em);
	margin: 0.5em;
	padding: 0.5em;
	box-sizing: border-box;
	border-radius: 0.15em;
	background: linear-gradient(180deg, tomato 0%, tomato 100%);
	background-position: center top;
	background-size: calc(100% + 1px) calc(100% + 1px);
	background-repeat: no-repeat;
	border-style: solid;
	border-width: 12px;
	-moz-border-image: url(../img/cord-border-compressed.svg) 6 round;
	-webkit-border-image: url(../img/cord-border-compressed.svg) 6 round;
	-o-border-image: url(../img/cord-border-compressed.svg) 6 round;
	border-image: url(../img/cord-border-compressed.svg) 6 fill round;
}

.Div-1 h1 {
	padding: 0 0.25em 0 0.25em;
	color: rgb (26, 26, 26);
	font-weight: bold;
	background: white;
	display: inline-block;
}

/********** Div-2 linear gradient https://stackoverflow.com/questions/37564755/css-gradient-split-div-into-to-halves-from-left-bottom-to-top-right for 993px*1440px screens **********/

.Div-2 {
	box-sizing: border-box;
	width: calc(100% - 1em);
	margin: 0 0.5em 0 0.5em;
	padding: 0.5em calc(0.5em + 4px) 2em 0.5em;
	border-top: 4px solid tomato;
	border-left: 4px solid tomato;
	/* 1st gradient diagonal, 2nd gradient semi circle, third gradient linear gradient, fourth linear gradient*/
	background:
		linear-gradient(to right bottom, white 0%, white calc(100% - (1em - 2px) - 3px), tomato calc(100% - (1em - 2px) - 2px), tomato calc(100% - (1em - 2px) - 1px), tomato calc(100% - (1em - 2px)), tomato calc(100% - (1em - 2px) + 1px), transparent calc(100% - (1em - 2px) + 2px), transparent 100%),

		radial-gradient(circle at top, white 2px, white calc(1em - 2px - 3px), tomato calc(1em - 2px - 2px), tomato calc(1em - 2px), tomato calc(1em - 2px + 1px), transparent calc(1em - 2px + 2px), transparent calc(1em - 2px)),

		linear-gradient(0deg, white 0%, white 100%),

		linear-gradient(90deg, white 0%, white 100%);

	background-position: bottom left, bottom -1em right, top center, top left;
	background-size: calc(100% - 2em + 2px) 1em, 2em 2em, 100% calc(100% - 1em), calc(100% - 1em) 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	position: relative;
}

/* Border right */
.Div-2::before {
	box-sizing: border-box;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	height: calc(100% - 1em + 1px);
	border-right: 4px solid tomato;
}

/* Border bottom */
.Div-2::after {
	box-sizing: border-box;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 1em);
	border-bottom: 4px solid tomato;
}

.Div-2 h1 {
	padding: 0;
	display: inline-block;
	color: tomato;
	font-weight: bold;
}

.Div-2 h1:first-of-type {
	padding: 0 0 0 1.15em;
	display: inline-block;
	color: tomato;
	font-weight: bold;
}

.ribbon {
	position: absolute;
	left: -9px;
	top: -9px;
	z-index: 1;
	overflow: hidden;
	width: 75px;
	height: 75px;
	text-align: right;
}

.ribbon span {
	font-family: 'VT323', monospace;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 1px;
	color: white;
	text-transform: capitalize;
	text-align: center;
	line-height: 20px;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	width: 100px;
	display: block;
	background: linear-gradient(0deg, rgba(255, 99, 71, 1) 0%, rgba(255, 110, 79, 1) 50%, rgba(255, 99, 71, 1) 100%);
	/* w3c */
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
	position: absolute;
	top: 19px;
	left: -21px;
	text-shadow: 0 2px rgb(207, 80, 58);
}

.ribbon span::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 100%;
	z-index: -1;
	border-left: 3px solid rgb(207, 80, 58);
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid rgb(207, 80, 8);
}

.ribbon span::after {
	content: "";
	position: absolute;
	right: 0px;
	top: 100%;
	z-index: -1;
	border-left: 3px solid transparent;
	border-right: 3px solid rgb(207, 80, 58);
	border-bottom: 3px solid transparent;
	border-top: 3px solid rgb(207, 80, 58);
}


/********** Div-3 Media box **********/

.Div-3 {
	box-sizing: border-box;
	width: calc(100% - 1em);
	margin: 0.5em;
	padding: 0.5em;
	border-style: solid;
	border-width: 22px;
	-moz-border-image: url(../img/square-fringe-ultra-compressed.svg) 22 repeat;
	-webkit-border-image: url(../img/square-fringe-ultra-compressed.svg) 22 repeat;
	-o-border-image: url(../img/square-fringe-ultra-compressed.svg) 22 repeat;
	border-image: url(../img/square-fringe-ultra-compressed.svg) 22 fill repeat;
	/*Necessary for pseudo:before*/
	position: relative;
	z-index: 1;
}

/* fabric texture */
.Div-3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0.25em;
	background: url(../img/fabric-texture-lossless.png);
	background-repeat: repeat;
	background-position: top 0 left 0;
	z-index: -2;
}

/* transparent layer */
.Div-3::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0.25em;
	background: rgba(255, 255, 255, 0.3);
	border-top: 1px solid rgba(153, 153, 153, 0.5);
	border-bottom: 1px solid rgba(153, 153, 153, 0.5);
	border-left: 1px solid rgba(153, 153, 153, 0.5);
	border-right: 1px solid rgba(153, 153, 153, 0.5);
	z-index: -1;
}

.Div-3 img:first-of-type {
	width: 75px;
	height: 75px;
	float: left;
	margin: 0.5em 0.5em 0.5em 0.5em;
}

.Div-3 h1 {
	/*Add a "&shy;" to cut word */
	hyphens: auto;
	font-weight: bold;
	color: tomato;
}

/************************************************/
/* Common style of Divs */
/************************************************/

/* Remove bullets */
.Div-1 > ul,
.Div-2 > ul,
.Div-3 > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*Margin bottom on last child*/
.Div-1 > ul > li:last-child,
.Div-2 > ul > li:last-child,
.Div-3 > ul > li:last-child {
	margin-bottom: 0.5em;
}

/* Replace bullets by an arrow */
.Div-1 > ul > li::before,
.Div-2 > ul > li::before,
.Div-3 > ul > li::before {
	content: '⇾';
	padding-right: 0.25em;
	text-shadow: none;
	margin: 0.25em 0 0.25em 0;
}

/* Colors of arrows tomato*/
.Div-1 > ul > li.tomato:before,
.Div-2 > ul > li.tomato:before,
.Div-3 > ul > li.tomato:before {
	color: tomato;
}

/* Colors of arrows white*/
.Div-1 > ul > li.white:before,
.Div-1 > ul > li.white:before,
.Div-3 > ul > li.white:before {
	color: white;
}

/********** Div-4 **********/
.wrapper-div {
	box-sizing: border-box;
	width: calc(100% - 1em);
	margin: 0.5em;
	padding: 0.5em;
}

/************************************************/
/*Images*/
/************************************************/

.img-responsive {
	max-width: 100%;
	height: auto;
}

.img-centered {
	display: block;
	margin: 0.5em auto 0.5em auto;
}

.img-scaled-75 {
	height: auto;
	max-width: 75%;
	object-fit: cover;
}

/************************************************/
/* Pattern Sheet */
/************************************************/

/*  Outer Slideshow container */
.outer-slideshow-container {
	width: calc(100% - 1em);
	margin: 0.5em 0.5em 1em 0.5em;
	padding-top: 0.5em;
}

/* Slideshow container */
.slideshow-container {
	max-width: 640px;
	position: relative;
	margin: 0.5em auto 0 auto;
}


/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 0.75em;
	margin-top: -1.25em;
	color: white;
	font-weight: bold;
	font-size: 1em;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
	color: tomato;
	font-size: 0.80em;
	padding: 0.5em 0.75em;
	position: absolute;
	bottom: 0.5em;
	width: 100%;
	text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
	color: white;
	font-size: 0.65em;
	padding: 0.5em 0.75em;
	position: absolute;
	top: 0;
}

/* The dots/bullets/indicators */
.dot-div {
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(155, 162, 174);
	padding: 0.15em 0 0.15em 0;
}

.dot {
	cursor: pointer;
	height: 0.9em;
	width: 0.9em;
	margin: 0 0.25em 0 0.25em;
	background-color: rgb(232, 236, 241);
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active,
.dot:hover {
	background-color: rgb(98, 106, 117);
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

@keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 320px) {

	.prev,
	.next,
	.text {
		font-size: 0.75em
	}
}


.difficulty-label {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	width: 100%;
	height: 2.5em;
	position: relative;
}

.difficulty-label div {
	font-size: 0.65em;
	text-transform: capitalize;
	color: rgb(26, 26, 26);
}

.difficulty-label > div:first-child,
.difficulty-label > div:nth-child(2),
.difficulty-label > div:nth-child(3),
.difficulty-label > div:last-child {
	transform-origin: left bottom;
	transform: rotate(-30deg);
	position: absolute;
}

.difficulty-label > div:first-child {
	bottom: 0.15em;
	left: calc(60vw * 25 / 100);
}

.difficulty-label > div:nth-child(2) {
	bottom: 0.15em;
	left: calc(60vw * 50 / 100);
}

.difficulty-label > div:nth-child(3) {
	bottom: 0.15em;
	left: calc(60vw * 75 / 100);
}

.difficulty-label > div:last-child {
	bottom: 0.15em;
	left: 60vw;
}

.difficulty-label > div:first-child::after,
.difficulty-label > div:nth-child(2)::after,
.difficulty-label > div:nth-child(3)::after,
.difficulty-label > div:last-child::after {
	content: "⇂";
	font-size: 0.5em;
	font-weight: bold;
	position: absolute;
	bottom: -0.55em;
	left: -0.5em;
	transform: rotate(30deg);
	color: rgb(26, 26, 26);
}

.difficulty-bar {
	width: calc(60vw + 0.375em);
	height: 0.75em;
	border-radius: 0.1875em;
	display: inline-block;
	background: #e8ecf1;
	overflow-x: hidden;
	position: relative;
	margin: 0 0 0.75em 0;
	box-shadow: inset 0 0 3px #626a75;
	position: relative;
	left: 0;
	top: 0;
	z-index: 1;
}

.cursor {
	width: 0.75em;
	height: 0.75em;
	cursor: pointer;
	position: relative;
}

.cursor svg {
	width: 0.75em;
	height: 0.75em;
	display: block;
}


.level1 {
	animation: l1;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes l1 {
	100% {
		width: 0.75em;
		height: 0.75em;
		transform: translateX(calc(60vw * 25 / 100 - 0.375em));
		background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
		background-repeat: no-repeat;
		background-size: 50% auto;
		background-position: left center;
	}
}


.level1::after {
	content: "";
	height: 0.75em;
	width: calc(60vw * 25 / 100);
	position: absolute;
	top: 0;
	transform: translateX(-100%);
	background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
}


.level2 {
	animation: l2;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-fill-mode: forwards;
	position: relative;
}

@keyframes l2 {
	100% {
		width: 0.75em;
		height: 0.75em;
		transform: translateX(calc(60vw * 50 / 100 - 0.375em));
		background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
		background-repeat: no-repeat;
		background-size: 50% auto;
		background-position: left center;
	}
}

.level2::after {
	content: "";
	height: 0.75em;
	width: calc(60vw * 50 / 100);
	position: absolute;
	top: 0;
	transform: translateX(-100%);
	background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
}


.level3 {
	animation: l3;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes l3 {
	100% {
		width: 0.75em;
		height: 0.75em;
		transform: translateX(calc(60vw * 75 / 100 - 0.375em));
		background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
		background-repeat: no-repeat;
		background-size: 50% auto;
		background-position: left center;
	}

}

.level3::after {
	content: "";
	height: 0.75em;
	width: calc(60vw * 75 / 100);
	position: absolute;
	top: 0;
	transform: translateX(-100%);
	background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
}

.level4 {
	animation: l4;
	animation-duration: 0.3s;
	animation-timing-function: linear;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes l4 {
	100% {
		width: 0.75em;
		height: 0.75em;
		transform: translateX(calc(60vw * 100 / 100 - 0.375em));
		background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
		background-repeat: no-repeat;
		background-size: 50% auto;
		background-position: left center;
	}
}

.level4::after {
	content: "";
	height: 0.75em;
	width: calc(60vw * 100 / 100);
	position: absolute;
	top: 0;
	transform: translateX(-100%);
	background: linear-gradient(180deg, transparent 0%, transparent 10%, #a7412f 10%, #e65940 25%, #ff6e4f 50%, #e65940 75%, #a7412f 90%, transparent 90%, transparent 100%);
}

/************************************************/
/* Tables */
/************************************************/

/* Table "Measurement Chart" */
#measurement-chart {
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0px;
	table-layout: fixed;
	width: calc(100% - 1em);
	margin: 0.5em;
	box-sizing: border-box;
	font-size: 1em;
}

#measurement-chart th {
	text-align: center;
	font-weight: bold;
	text-align: center;
	padding: 0.25em;
	position: relative;
}

#measurement-chart td {
	padding: 0.25em;
}

#measurement-chart tr {
	background-color: white;
	color: #1a1a1a;
	text-align: center;
}

#measurement-chart tr:nth-child(odd) {
	color: #1a1a1a;
}

#measurement-chart tr:hover td {
	background-color: tomato;
	color: white;
}

button.meas-chart {
	box-sizing: border-box;
	margin: calc(0.25em - 3px) auto 0.25em auto;
	outline: none;
	border-radius: 0.15em;
	padding: 0.1em 0.2em 0.1em 0.2em;
	font-weight: bold;
	text-align: center;
	font-size: 1em;
	background: tomato;
	color: white;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	position: relative;
	text-shadow: 0 1px 1px rgba(26, 26, 26, 0.5);
	box-shadow: 0 3px 0 #cf503a;
	transition: all 0.2s ease-in-out 0s;
}

button.meas-chart:hover {
	background: #e65940;
	box-shadow: 0 3px 0 #ba4834;
}

button.meas-chart:active,
button.meas-chart:focus {
	background: tomato;
	box-shadow: 0 2px 0 #cf503a;
}

#measurement-chart caption {
	caption-side: top;
	text-align: left;
	background: tomato;
	color: white;
	padding: 0.25em;
	font-size: 0.7em;
}

#measurement-chart .mobile-head {
	display: none;
}

#measurement-chart .large-screen-only {
	display: inline;
}

.small-screen-only {
	display: none;
}

@media screen and (max-width: 480px) {
	#measurement-chart {
		box-sizing: border-box;
		border-collapse: collapse;
		width: calc(100% - 1em);
		margin: 0.5em;
		padding: 0px;
		table-layout: fixed;
		border: none;
	}

	#measurement-chart td {
		border: 1px solid #626a75;
		display: block;
		text-align: right;
		float: left calc(100% - 1em);
		color: #1a1a1a;
	}

	#measurement-chart tr {
		text-align: right;
		margin: 0 0 0.5em 0;
	}

	#measurement-chart tr:nth-of-type(even) {
		background-color: white;
		color: #1a1a1a;
	}

	#measurement-chart tr:nth-of-type(odd) {
		color: #1a1a1a;
	}

	#measurement-chart tr:last-child {
		margin-bottom: 0;
	}

	#measurement-chart tr:first-child {
		display: none;
	}

	#measurement-chart tr {
		display: block;
	}

	#measurement-chart td:not(:first-child) {
		border-top: 0px;
	}

	#measurement-chart .mobile-head {
		font-weight: bold;
		color: #1a1a1a;
		float: left;
		text-align: left;
		display: block
	}

	#measurement-chart .large-screen-only {
		display: none;
	}

	.small-screen-only {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		width: calc(100% - 1em);
		margin: 0.5em;
	}

	button.meas-chart {
		box-sizing: border-box;
		margin: 0.25em 0 0.25em 0;
		padding: 0.1em 0.2em 0.1em 0;
	}

}


/* Convertion chart */

#convertion-chart {
	box-sizing: border-box;
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0px;
	table-layout: fixed;
	width: calc(100% - 1em);
	margin: 1em 0.5em 1em 0.5em;
}

#convertion-chart th.country {
	background: #9ba3ae;
	height: 2em;
}

#convertion-chart th.country div {
	position: relative;
	margin: 0 auto 0 auto;
}

#convertion-chart td {}

#convertion-chart > tbody > tr > td {
	text-align: center;
}

/* small caps*/
#convertion-chart > tbody > tr > td:nth-child(8) {
	font-variant: small-caps;
}

#convertion-chart tr:nth-of-type(even) {}

#convertion-chart tr:nth-of-type(odd) {
	background-color: white;
}

#convertion-chart tr:hover > td {
	background-color: tomato;
	color: white;
	color: snow;
	cursor: cell;
	outline: none;
}

#convertion-chart tr.selected > td {
	background-color: #1a1a1a;
	color: white;
	font-weight: bold;
}

#convertion-chart > caption {
	caption-side: top;
	text-align: left;
	background: tomato;
	color: white;
	padding: 0.25em;
	font-size: 0.7em;
}


/********** Tooltip **********/
.tooltip_templates {
	display: none;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-box {
	box-sizing: border-box;
	border-radius: 0.25em;
	border: 1px solid #cf503a;
	background: tomato;
	box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4);
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-content {
	overflow: hidden;
	padding: 0;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-content h3 {
	margin: 0;
	padding: 0.35em 0.25em 0.25em 0.25em;
	font-size: 0.75em;
	line-height: 1;
	border-top-right-radius: 0.25em;
	border-top-left-radius: 0.25em;
	color: #1a1a1a;
	background: white;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-content p {
	margin: 0 0 0.10em 0;
	padding: 0.25em;
	font-size: 0.60em;
	color: #1a1a1a;
	background: white;
}

/* In case of p tag only */
.tooltipster-sidetip.tooltipster-custom .tooltipster-content p:only-child {
	border-radius: 0.25em;
	padding: 0.25em;
	font-size: 0.60em;
	background-color: white;
	color: #1a1a1a;
	margin-bottom: 0;
}


.tooltipster-sidetip.tooltipster-custom .tooltipster-content img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0.25em auto 0.25em auto;
	max-width: 100%;
	max-height: 100%;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-arrow {
	height: 9px;
	margin-left: -9px;
	width: 18px;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-left .tooltipster-arrow,
.tooltipster-sidetip.tooltipster-custom.tooltipster-right .tooltipster-arrow {
	height: 18px;
	margin-left: 0;
	margin-top: -9px;
	width: 9px;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-arrow-background {
	border: 9px solid transparent;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-bottom .tooltipster-arrow-background {
	border-bottom-color: white;
	top: 1px;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-left .tooltipster-arrow-background {
	border-left-color: white;
	left: -1px;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-right .tooltipster-arrow-background {
	border-right-color: white;
	left: 1px;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-top .tooltipster-arrow-background {
	border-top-color: white;
	top: -1px;
}

.tooltipster-sidetip.tooltipster-custom .tooltipster-arrow-border {
	border: 9px solid transparent;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: #cf503a;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-left .tooltipster-arrow-border {
	border-left-color: #cf503a;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-right .tooltipster-arrow-border {
	border-right-color: #cf503a;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-top .tooltipster-arrow-border {
	border-top-color: #cf503a;
}

.tooltipster-sidetip.tooltipster-custom.tooltipster-bottom .tooltipster-arrow-uncropped {
	top: -9px;
}

.tooltipster-sidetip.tooltipster-light.tooltipster-right .tooltipster-arrow-uncropped {
	left: -9px;
}


/************************************************/
/*Flags*/
/************************************************/

.france-flag {
	width: 2em;
	height: 1.5em;
	background: linear-gradient(to right, #02395f 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ed2939 66.66%);
}

.germany-flag {
	width: 2em;
	height: 1.5em;
	/*background: linear-gradient(to bottom, #000000 33.33%, #dd000f 33.33%, #dd000f 66.66%, #ffce00 66.66%);*/
	background: linear-gradient(to bottom, #000000 33.33%, #dd000f 33.33%, #dd000f 66.66%, #ffce00 66.66%);
}

.italy-flag {
	width: 2em;
	height: 1.5em;
	background: linear-gradient(to right, #009246 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ce2837 66.66%);
}

.russia-flag {
	width: 2em;
	height: 1.5em;
	background: linear-gradient(to bottom, #ffffff 33.33%, #0039a6 33.33%, #0039a6 66.66%, #d52b1e 66.66%);
}

.japan-flag {
	width: 2em;
	height: 1.5em;
	background: #ffffff;
	position: relative;
}

.japan-flag::after {
	content: "";
	width: 0.9em;
	height: 0.9em;
	border-radius: 100%;
	background: #bc002d;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.uk-flag {
	width: 2em;
	height: 1.5em;
	background: #00247d;
	position: relative;
}

.uk-flag::after {
	content: "";
	width: 2em;
	height: 1.5em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-image: url(../img/red-cross-compressed.svg),
		url(../img/white-cross-compressed.svg);
	background-size: 2em 1.5em, 2em 1.5em;
	background-position: center center;
}

.us-flag {
	width: 2em;
	height: 1.5em;
	position: relative;
}

.us-flag::after {
	width: 2em;
	height: 1.5em;
	background-image: url(../img/us-stripes.svg);
	background-size: 2em 1.5em;
	background-repeat: no-repeat;
	background-position: top left;
}

.international-flag {
	width: 2em;
	height: 1.5em;
	background: #ffffff;
}

.international-flag::after {
	content: '\1F310';
	font-size: 0.85em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


.transform-flag {
	transform: scale(1);
}

@media only screen and (max-width : 640px) {
	.transform-flag {
		transform: scale(0.75);
	}
}

@media only screen and (max-width : 320px) {
	.transform-flag {
		transform: scale(0.6);
	}
}

.quick-table {
	box-sizing: border-box;
	flex-basis: calc(100% - 1em);
	margin: 0.5em;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-self: center;
	border: 1px solid rgb(26, 26, 26);
}

.q-t-item {
	flex-basis: 12.5%;
	align-self: center;
}

.q-t-item-head {
	flex-basis: 25%;
	font-size: 80%;
}

.break {
	flex-basis: 100%;
	height: 0;
}

/************************************************/
/*Form Pattern Calculator*/
/************************************************/


#pattern-calculator {
	box-sizing: border-box;
	width: calc(100% - 1em);
	margin: 1em 0.5em 0 0.5em;
	background-color: bisque;
	padding: 0.5em 0 0.5em 0;
	border-radius: 0.25em;
	border: 1px solid rgb(207, 80, 58);
}

.form-group {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background: bisque;
	margin: 0.5em;
}

.form-label {
	width: calc(40% - 0.5em);
	margin: 0.25em;
	padding-left: 0.25em;
	border-radius: 0.15em;
	background-color: tomato;
	color: white;
}

.form-input {
	width: calc(60% - 0.5em);
	margin: 0.25em;
}

.InputAddOn {
	display: flex;
	flex-wrap: wrap;
}

.InputAddOn-item {
	padding-right: 0.25em;
	color: rgb(26, 26, 26);
}

.InputAddOn-field,
.SelectAddOn-field {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	border-radius: 0.15em;
	border-style: solid;
	border-width: thin;
	border-color: rgb(207, 80, 58);
	background-color: white;
	outline: none;
}

span.Input-Comment {
	color: rgb(26, 26, 26);
	order: 1;
	font-size: 0.55em;
}

.InputAddOn::after {
	content: "";
	flex: 0 0 100%;
	height: 0;
}

.line-break {
	width: 100%;
}

.form-group-submit {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: calc(100% - 1em);
	margin: 0 0.5em 0 0.5em;
}

input.btn-block {
	width: 100%;
	outline: none;
	border-radius: 0.15em;
	padding: 0.1em 0.2em 0.1em 0.2em;
	font-weight: bold;
	text-align: center;
	font-size: 1em;
	background: tomato;
	color: white;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	position: relative;
	text-shadow: 0 1px 1px rgba(26, 26, 26, 0.5);
	box-shadow: 0 3px 0 #cf503a;
	transition: all 0.2s ease-in-out 0s;
}

input.btn-block:hover {
	background: #e65940;
	box-shadow: 0 3px 0 #ba4834;
}

input.btn-block:active,
input.btn-block:focus {
	background: tomato;
	box-shadow: 0 2px 0 #cf503a;
}

a.reload {
	background: tomato;
	text-align: center;
	width: 3.75em;
	height: 3.75em;
	padding: 0.25em;
	border-radius: 100%;
	border: 2px solid rgb(207, 80, 58);
	margin-top: 1.25em;
	margin-bottom: 0.5em;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 0.85em;
	color: white;
}

a.reload:hover {
	text-decoration: none;
	font-weight: bolder;
}


/***** Styling Inputs *****/
/* Hack Always show spin button on input type number*/
input[type=number]::-webkit-inner-spin-button {
	opacity: 1;
}

input {
	color: rgb(26, 26, 26);
}

/* Styling Placeholder*/
::placeholder {
	color: rgb(26, 26, 26);
	opacity: 1;
	font-family: 'Signika', sans-serif;
}

input:focus::placeholder {
	color: transparent;
}

/* Styling Select*/
select {
	background: linear-gradient(0deg, white 0%, #white 100%);
	color: rgb(26, 26, 26);
	font-family: inherit;
}

select:focus {
	outline-offset: 0 !important;
	box-shadow: none;
	outline: none;
	background: linear-gradient(0deg, white 0%, #white 100%);
}

option {
	color: white;
	background-color: tomato;
	border: none;
}

.hidden {
	display: none;
}

ul.result-gen {
	padding: 0;
	margin: 0;
	width: calc(100% - 1em);
	border-radius: 0.15em;
	list-style: none;
	background: white;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

ul.result-gen > li {
	color: rgb(26, 26, 26);
	margin: 0 0.5em 0 0.5em;
}


@media only screen and (max-width : 480px) {
	.form-group {
		flex-direction: column;
	}

	.form-label {
		width: calc(100% - 0.5em);
		margin: 0.25em;
	}

	.form-input {
		width: calc(100% - 0.5em);
		margin: 0.25em;
	}

}

/************************************************/
/*Contact Form*/
/************************************************/

#contact-form {
	box-sizing: border-box;
	width: calc(100% - 1em);
	margin: 1.5em 0.5em 0.5em 0.5em;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

fieldset {
	border-radius: 0.25em;
	padding: 0;
	background: bisque;
	border: 1px solid rgb(207, 80, 58);
}

.c-f-legend {
	margin-left: 1em;
	padding: 0 0.25em 0 0.25em;
	background: bisque;
	color: rgb(207, 80, 58);
	border-radius: 0.25em;
	border: 1px solid rgb(207, 80, 58);
}

.contact-form-input {
	width: calc(100% - 1em);
	padding: 0.25em 0 0.25em 0;
	margin: 0 auto 0 auto;
}

.contact-form-input:first-of-type {
	padding-top: 0.5em;
}

.contact-form-input:last-of-type {
	padding-bottom: 0.75em;
}

.contact-form-input > input[type="text"],
.contact-form-input > input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 2em;
	border-radius: 0.15em;
	border-style: solid;
	border-width: thin;
	border-color: rgb(207, 80, 58);
	background-color: white;
	outline: none;
	color: rgb(26, 26, 26);
	font-family: 'Signika', sans-serif;
}

.contact-form-input > textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 10em;
	max-height: 15em;
	overflow-y: scroll;
	resize: none;
	border-radius: 0.15em;
	border-style: solid;
	border-width: thin;
	border-color: rgb(207, 80, 58);
	background-color: white;
	outline: none;
	color: rgb(26, 26, 26);
	font-family: 'Signika', sans-serif;
}

.g-recaptcha {
	width: 100%;
	overflow: hidden;
	transform: scale(0.77);
	transform-origin: 0 0;
}

.showmydiv {
	background: white;
	color: rgb(26, 26, 26);
	margin: 0.5em;
	padding: 0.15em;
	font-size: 0.75em;
}

.showmydiv:nth-of-type(2) {
	margin: -0.5em 0.5em 0.5em 0.5em;
}

@media only screen and (min-width:481px) and (max-width:768px) {
	#contact-form {
		width: 50%;
		margin: 1.5em auto 0.5em auto;
	}
}

@media only screen and (min-width:769px) and (max-width:1200px) {
	#contact-form {
		width: 45%;
		margin: 1.5em auto 0.5em auto;
	}
}

@media only screen and (min-width:1201px) {
	#contact-form {
		width: 38%;
		margin: 1.5em auto 0.5em auto;
	}
}

/************************************************/
/*flipped Boxes*/
/************************************************/


.flipped-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 0.5em;
	margin-left: 0.5em;
	margin-top: 0.5em;
}

.flipped-box {
	width: 16.666%;
	perspective: 1000px;
}

.flipped-inner {
	display: flex;
	box-sizing: border-box;
	margin: 0.5em 0.5em 0 0;
	/* To make box square with "flipped-inner" before*/
	height: auto;
}

.flipped-inner:before {
	content: '';
	padding-top: 100%;
}

.card-container {
	position: relative;
	width: 100%;
	height: auto;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flipped-box:hover .card-container {
	transform: rotateY(180deg);
}

/* Position the front and back side */
.card-front,
.card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */
.card-front {
	background-color: bisque;
	box-shadow: 2px 3px 4px -1px rgba(26, 26, 26, 0.5);
}

/* Style the back side */
.card-back {
	background-color: bisque;
	box-shadow: 2px 3px 4px -1px rgba(26, 26, 26, 0.5);
	transform: rotateY(180deg);
}

.card-front > img {
	width: 100%;
	height: auto;
}

.card-front > h2 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 90%;
	left: 0;
	right: 0;
	padding: 0 0.5em 0 0.5em;
	transform: translateY(-90%);
	font-size: 0.85em;
	text-transform: capitalize;
	color: rgba(26, 26, 26, 255);
}

.card-back > p {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	transform: translateY(-30%);
	font-size: 0.60em;
	color: rgba(26, 26, 26, 255);
	padding: 0.5em;
}

.card-back > a {
	position: absolute;
	top: 77.5%;
	left: 50%;
	width: 2em;
	transform: translateY(-77.5%);
	transform: translateX(-50%);
	border: none;
	text-decoration: none;
	border-radius: 0.10em;
	color: white;
	font-size: 0.75em;
	padding: 0.15em 0.25em 0.15em 0.25em;
	border: 1px solid rgb(230, 89, 64);
	background: url(../img/top-left-corner-compressed.svg), url(../img/top-right-corner-compressed.svg), url(../img/bottom-left-corner-compressed.svg), url(../img/bottom-right-corner-compressed.svg), radial-gradient(rgba(255, 161, 144, 0.6) 0%, rgba(255, 99, 71, 0.3) 80%, rgba(255, 99, 71, 0.3) 100%), tomato;
	background-position: top 0.07em left 0.07em, top 0.07em right 0.07em, bottom 0.07em left 0.07em, bottom 0.07em right 0.07em, top left;
	background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 100% 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	box-shadow: -2px -2px 1px rgba(255, 223, 218, 0.5), 1px 1px 1px rgba(139, 54, 39, 0.5);
}

.card-back > a:hover,
.card-back > a:focus,
.card-back > a:active {
	background-color: rgb(207, 80, 58);
	border: 1px solid rgb(186, 72, 52);
	box-shadow: -2px -2px 1px rgba(207, 181, 176, 0.5), 1px 1px 1px rgba(113, 44, 32, 0.5);
}

@media only screen and (min-width:992px) and (max-width:1200px) {
	.flipped-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.flipped-box {
		width: 25%;
	}
}

/*@media only screen and (max-width : 768px) {*/
@media only screen and (min-width:768px) and (max-width:991px) {
	.flipped-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.flipped-box {
		width: 33.333%;
	}
}

@media only screen and (min-width:320px) and (max-width:767px) {
	.flipped-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.flipped-box {
		width: 50%;
	}
}

/************************************************/
/*Masonry*/
/************************************************/

.masonry-wrapper {
	box-sizing: border-box;
	padding: 1.5em;
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
}

.masonry {
	columns: 1;
	column-gap: 10px;
	text-align: center;
}

.masonry-item {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 10px;
}

/*added*/
.masonry img {
	max-width: 100%;
	vertical-align: middle;
}

/*added*/
.masonry-label {
	position: absolute;
	padding: 8px;
	font-size: inherit;
	font-weight: bold;
	text-transform: capitalize;
	white-space: nowrap;
	font-size: 0.5em;
}

/* Variabl positions img size 450*600(max)280(min)*/
.pos1 {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pos2 {
	top: 15%;
	right: 10%;
}

.pos3 {
	bottom: 35%;
	left: 10%;
}

.pos4 {
	bottom: 28%;
	left: 37.5%;
}

.pos5 {
	top: 5%;
	left: 5%;
}

.pos6 {
	bottom: 2.5%;
	right: 5%;
}

.pos7 {
	top: 74%;
	left: 8%;
}

.col1 {
	color: rgb(26, 26, 26);
}

.col2 {
	color: rgb(207, 80, 68);
}

.col3 {
	color: white;
}

.col4 {
	color: tomato;
}

.col5 {
	color: rgb(167, 65, 47);
}

.col6 {
	color: rgb(255, 122, 88);
}

.col7 {
	color: rgb(223, 86, 62);
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
	.masonry {
		columns: 2;
	}
}

@media only screen and (min-width: 1024px) {
	.masonry {
		columns: 3;
	}
}

.masonry-item,
.masonry-content {
	border-radius: 4px;
	overflow: hidden;
}

.masonry-item {
	/*	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .3));*/
	filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, .3));
	transition: filter .25s ease-in-out;
}

.masonry-item:hover {
	/*	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .3));*/
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, .3));
}

/************************************************/
/* Tables */
/************************************************/

/* Table "Measurement Chart" */
#measurement-chart {
	border: 1px solid tomato;
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0px;
	table-layout: fixed;
	width: calc(100% - 1em);
	margin: 0.5em;
	box-sizing: border-box;
	font-size: 1em;
}

#measurement-chart th {
	text-align: center;
	font-weight: bold;
	text-align: center;
	padding: 0.25em;
	position: relative;
	background-color: bisque;
}

#measurement-chart td {
	padding: 0.25em;
}

#measurement-chart tr {
	background-color: white;
	color: #1a1a1a;
	text-align: center;
}

#measurement-chart tr:nth-child(odd) {
	background-color: bisque;
	color: #1a1a1a;
}

#measurement-chart tr:hover td {
	background-color: tomato;
	color: white;
}

button.meas-chart {
	box-sizing: border-box;
	margin: calc(0.25em - 3px) auto 0.25em auto;
	outline: none;
	border-radius: 0.15em;
	padding: 0.1em 0.2em 0.1em 0.2em;
	font-weight: bold;
	text-align: center;
	font-size: 1em;
	background: tomato;
	color: white;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	outline: none;
	position: relative;
	text-shadow: 0 1px 1px rgba(26, 26, 26, 0.5);
	box-shadow: 0 3px 0 #cf503a;
	transition: all 0.2s ease-in-out 0s;
}

button.meas-chart:hover {
	background: #e65940;
	box-shadow: 0 3px 0 #ba4834;
}

button.meas-chart:active,
button.meas-chart:focus {
	background: tomato;
	box-shadow: 0 2px 0 #cf503a;
}

#measurement-chart caption {
	caption-side: top;
	text-align: left;
	background: #1a1a1a;
	color: white;
	padding: 0.25em;
	font-size: 0.7em;
}

#measurement-chart .mobile-head {
	display: none;
}

#measurement-chart .large-screen-only {
	display: inline;
}

.small-screen-only {
	display: none;
}

@media screen and (max-width: 480px) {
	#measurement-chart {
		box-sizing: border-box;
		border-collapse: collapse;
		width: calc(100% - 1em);
		margin: 0.5em;
		padding: 0px;
		table-layout: fixed;
		border: none;
	}

	#measurement-chart td {
		border: 1px solid tomato;
		display: block;
		text-align: right;
		/*		width: 100%\9;*/
		/*		float: left\9;*/
		float: left calc(100% - 1em);
		color: #1a1a1a;
	}

	#measurement-chart tr {
		text-align: right;
		margin: 0 0 0.5em 0;
	}

	#measurement-chart tr:nth-of-type(even) {
		background-color: white;
		color: #1a1a1a;
	}

	#measurement-chart tr:nth-of-type(odd) {
		background-color: bisque;
		color: #1a1a1a;
	}

	#measurement-chart tr:last-child {
		margin-bottom: 0;
	}

	#measurement-chart tr:first-child {
		display: none;
	}

	#measurement-chart tr {
		display: block;
	}

	#measurement-chart td:not(:first-child) {
		border-top: 0px;
	}

	#measurement-chart .mobile-head {
		font-weight: bold;
		color: #1a1a1a;
		float: left;
		text-align: left;
		display: block
	}

	#measurement-chart .large-screen-only {
		display: none;
	}

	.small-screen-only {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		width: calc(100% - 1em);
		margin: 0.5em;
	}

	button.meas-chart {
		box-sizing: border-box;
		margin: 0.25em 0 0.25em 0;
		padding: 0.1em 0.2em 0.1em 0;
	}

}


/* Convertion chart */

#convertion-chart {
	box-sizing: border-box;
	border: 1px solid tomato;
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0px;
	table-layout: fixed;
	width: calc(100% - 1em);
	margin: 1em 0.5em 1em 0.5em;
	/*	text-align: center;*/
	/*	font-size: 0.85em;*/
}

#convertion-chart th.country {
	background: bisque;
	height: 2em;
}

#convertion-chart th.country div {
	position: relative;
	margin: 0 auto 0 auto;
}

#convertion-chart td {}

#convertion-chart > tbody > tr > td {
	text-align: center;
}

/* small caps*/
#convertion-chart > tbody > tr > td:nth-child(8) {
	font-variant: small-caps;
}

#convertion-chart tr:nth-of-type(even) {
	background-color: bisque;
}

#convertion-chart tr:nth-of-type(odd) {
	background-color: white;
}

#convertion-chart tr:hover > td {
	background-color: tomato;
	color: white;
	color: snow;
	cursor: cell;
	outline: none;
}

#convertion-chart tr.selected > td {
	background-color: #1a1a1a;
	;
	color: white;
}

#convertion-chart > caption {
	caption-side: top;
	text-align: left;
	background: #1a1a1a;
	color: white;
	padding: 0.25em;
	font-size: 0.7em;
}


/********** Tooltip **********/
.tooltip_templates {
	display: none;
}

.tooltipster-custom .tooltipster-box {
	background: tomato;
	border: 3px solid #cf503a;
	border-radius: 0.15em;
	padding: 0.25em;
	box-shadow: 5px 5px 2px 0 rgba(0, 0, 0, 0.4);
	z-index: -1;
}

.tooltipster-custom .tooltipster-content {
	overflow: hidden;
	padding: 0;
}

.tooltipster-custom .tooltipster-content h3 {
	/*	margin: 0.10em 0 0.10em 0;*/
	margin: 0.10em 0 0 0;
	padding: 0.25em;
	font-size: 0.75em;
	line-height: 1;
	color: white;
	background: #1a1a1a;
}

.tooltipster-custom .tooltipster-content p {
	/*	margin: 0.10em 0 0.10em 0;*/
	margin: 0 0 0.10em 0;
	padding: 0.25em;
	font-size: 0.60em;
	color: white;
	background: #1a1a1a;
}

.tooltipster-custom .tooltipster-content img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 0.25em;
	max-width: 100%;
	max-height: 100%
}

/* .tooltipster-arrow-background */

.tooltipster-custom.tooltipster-sidetip .tooltipster-arrow-background {
	border: 10px solid transparent;
}

.tooltipster-custom.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
	border-bottom-color: tomato;
	left: 0;
	top: 3px;
}

.tooltipster-custom.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
	border-left-color: tomato;
	left: -3px;
	top: 0;
}

.tooltipster-custom.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
	border-right-color: tomato;
	left: 3px;
	top: 0;
}

.tooltipster-custom.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
	border-top-color: tomato;
	left: 0;
	top: -3px;

}

/* .tooltipster-arrow-border */

.tooltipster-custom.tooltipster-sidetip .tooltipster-arrow-border {
	border: 10px solid transparent;
	left: 0;
	top: 0;
}

.tooltipster-custom.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
	border-bottom-color: #cf503a;
}

.tooltipster-custom.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
	border-left-color: #cf503a;
}

.tooltipster-custom.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
	border-right-color: #cf503a;
}

.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
	border-top-color: #cf503a;
}

/************************************************/
/*Flags*/
/************************************************/

.french-flag {
	width: 2em;
	height: 1.5em;
	background: linear-gradient(to right, #02395f 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ed2939 66.66%);
}

.german-flag {
	width: 2em;
	height: 1.5em;
	background: linear-gradient(to right, #000000 33.33%, #dd000f 33.33%, #dd000f 66.66%, #ffce00 66.66%);
}

.italian-flag {
	width: 2em;
	height: 1.5em;
	background: linear-gradient(to right, #009246 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ce2837 66.66%);
}

.russian-flag {
	width: 2em;
	height: 1.5em;
	background: linear-gradient(to bottom, #ffffff 33.33%, #0039a6 33.33%, #0039a6 66.66%, #d52b1e 66.66%);
}

.japanese-flag {
	width: 2em;
	height: 1.5em;
	background: #ffffff;
	position: relative;
}

.japanese-flag::after {
	content: "";
	width: 0.9em;
	height: 0.9em;
	border-radius: 100%;
	background: #bc002d;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.british-flag {
	width: 2em;
	height: 1.5em;
	background: #00247d;
	position: relative;
}

.british-flag::after {
	content: "";
	width: 2em;
	height: 1.5em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-image: url(../img/red-cross-compressed.svg),
		url(../img/white-cross-compressed.svg);
	background-size: 2em 1.5em, 2em 1.5em;
	background-position: center center;
}

.us-flag {
	width: 2em;
	height: 1.5em;
	background-image:
		linear-gradient(0deg, #3c3b6e, #3c3b6e),
		url(../img/us-stripes.svg);
	background-size: 40% 53.85%, 2em 1.5em;
	background-repeat: no-repeat, no-repeat;
	background-position: top left, center center;

}


.international-flag {
	width: 2em;
	height: 1.5em;
	background: #ffffff;
}

.international-flag::after {
	content: '\1F310';
	width: 70%;
	height: 70%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


.transform-flag {
	transform: scale(1);
}

@media only screen and (max-width : 640px) {
	.transform-flag {
		transform: scale(0.75);
	}
}

@media only screen and (max-width : 320px) {
	.transform-flag {
		transform: scale(0.6);
	}
}


/* Large Devices, Wide Screens */
/*@media only screen and (max-width : 1200px) {}*/

/* Medium Devices, Desktops */
/*@media only screen and (max-width : 992px) {}*/

/* Small Devices, Tablets */
/*@media only screen and (max-width : 768px) {}*/

/* Extra Small Devices, Phones */
/*@media only screen and (max-width : 480px) {}*/

/* Custom, iPhone Retina */
/*@media only screen and (max-width : 320px) {}

@media only screen and (min-width:992px) and (max-width:1200px) {}

@media only screen and (min-width:320px) and (max-width:480px) {}*/

/*@media only screen and (min-width:1px) and (max-width:319px) {}*/