:root {
	--golden-gradient: linear-gradient(to right, #907037 0%, #f6e27b 27%, #f6f2c1 43%, #f6e27b 69%, #907037 100%);
	--golden-gradient-30: linear-gradient(30deg, #907037 0%, #f6e27b 27%, #f6f2c1 43%, #f6e27b 69%, #907037 100%);
	--golden-reflection: linear-gradient(to bottom left, #907037, black);
	--golden-reflection-left: linear-gradient(to bottom right, #907037, black);
}
body {
	background-color: black;
	margin:1rem 0 3rem;
	font-family: "pirulen", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.page {
	max-width:1800px;
	padding:0 1rem;
	margin:0 auto;
}
.page-header {
	text-align: center;
	padding:2rem 2rem 4rem;
}
.header-image {
	width:100%;
	height:auto;
	max-width: 700px;
}

/* Tabs */
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabs {
	letter-spacing: 3px;
	background: var(--golden-gradient-30);
	padding: 2px;
	border-radius: 14px;
}
.tab {
  cursor: pointer;
  margin: 0;
  display: inline-block;
  background:black;
  color: #f6e27b;
}
.tab#one-tab {border-radius: 12px 0px 0px 12px;border-right:1px solid #111}
.tab#two-tab {border-radius: 0px 12px 12px 0px;border-left:1px solid #333}
.tab#one-tab:hover {background: var(--golden-reflection-left);}
.tab#two-tab:hover {background: var(--golden-reflection);}

.tabs.en #one-tab,
.tabs.fr #two-tab {
  background: var(--golden-gradient);
  color: #000;
  cursor:default;
}

.tab a {
	text-decoration: none;
	color: #f6e27b;
	padding: 10px 20px;
	display: block;
}

.tabs.en #one-tab a,
.tabs.fr #two-tab a {
  color: #000;
}

.panels {
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  padding: 40px 0 0;
}

.panel {
  display: block;
}



/* Containers */
.container {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content: center;
	column-gap:60px;
}
.container div {
	display:block;
	max-width: 600px;
	box-sizing: border-box;
	background: var(--golden-gradient);
	padding:2px;
	border-radius:24px;
	line-height:0;
	margin-bottom: 2em;
}
.container div img, 
.container div a {border-radius:inherit;}
.container div img {
	width: 100%;
	height:auto;
}
.container div img:not(.inactive):hover {
	cursor: pointer;
}
.iframe-container {
/* 	position: fixed; */
	top:0;
	left:0;
	overflow: hidden;
/* 	width: 0;
	height:0; */
	background-color:#303030;
/* 	opacity:0;
	transition: opacity 0.66s ease-in-out; */
}
.iframe-container p {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	margin:0;
	text-align:left;
	padding:1rem;
	box-sizing: border-box;
	color:white;
	letter-spacing: 2px;
	z-index:999;
}
.iframe-container a {
	color:white;
	text-decoration: none;
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}


/* Form */
#login-error-msg-holder {
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-items: center;
}

#login-error-msg {
  width: 23%;
  text-align: center;
  padding: 5px;
  color: #8a0000;
  border: 1px solid #8a0000;
  background-color: #e58f8f;
  opacity:0;
  margin: 0 0 1rem;
  border-radius: 6rem;
  font-family: sans-serif;
  font-weight: normal;
  font-size: 1rem;
}

#error-msg-second-line {
  display: block;
}

#login-form {
  align-self: flex-start;
  display: grid;
  justify-items: center;
  align-items: center;
}

.login-form-field::placeholder {
  color: #3a3a3a;
}

.login-form-field-container {
	padding: 1px;
	background: var(--golden-gradient);
	border-radius: 6rem;
	margin-bottom: 1rem;
}
.login-form-field {
  background-color: black;
  padding: 1rem;
  line-height: 1rem;
  border: none;
  border-radius: 6rem;
  font-size: 1rem;
  color: #f6f2c1;
}
.login-form-field::placeholder {
  color: #8a8a8a;
  font-style: italic;
  opacity: 1; /* Firefox */
}
.login-form-field::-ms-input-placeholder { /* Edge 12 -18 */
  color: #f6f2c1;
}

#login-form-submit {
  padding: 1rem;
  border: none;
  border-radius: 6rem;
  cursor: pointer;
  outline: none;
  font-family: "pirulen", sans-serif;
  font-style: normal;
  font-weight: bold;
  background: var(--golden-gradient);
  color: black;
}