/* Reset */

html, body {
	height: 100%;
}

body {
	padding: 0;
	margin: 0;
	overflow: hidden;
}

* {
	box-sizing: border-box;
}

/* Common and mobile by default */

/* autoprefixer grid: autoplace */

/* Note : -ms- prefix is for Internet Explorer */

html {
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

.main-container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.main-container > .main-container-background-image {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
}

.main-container > .main {
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: -webkit-min-content minmax(auto, 1fr) -webkit-min-content;
	-ms-grid-rows: min-content minmax(auto, 1fr) min-content;
	grid-template-rows: -webkit-min-content minmax(auto, 1fr) -webkit-min-content;
	grid-template-rows: min-content minmax(auto, 1fr) min-content;
		grid-template-areas: "header" "content" "footer";
	height: 100%;
	width: 100%;
	margin: auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.33);
	-webkit-animation-name: main-animation;
			animation-name: main-animation;
	-webkit-animation-duration: 300ms;
			animation-duration: 300ms;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-in;
			animation-timing-function: ease-in;
}

.main-container > .main > .header {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: header;
	height: 244px;
	background: #eee;
	position: relative;
}

.main-container > .main > .header > .header-background-image {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	-o-object-fit: cover;
	   object-fit: cover;
	/* Here you can adjust image positioning using object-position; for example : object-position: right; or object-position: left; */
	contain: strict;
}

.main-container > .main > .header > .logo-container {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 0;
	left: 0;
	width: 150px;
	height: 150px;
	text-align: center;
	margin-left: 50%;
	-webkit-transform: translate(-50%, 50%);
			transform: translate(-50%, 50%);
	-webkit-transform: translate3d(-50%, 50%, 0);
			transform: translate3d(-50%, 50%, 0);
	border-radius: 100%;
	overflow: hidden;
	border: 2px solid #fff;
	transition: margin-left 500ms ease, -webkit-transform 500ms ease;
	transition: margin-left 500ms ease, transform 500ms ease;
	transition: margin-left 500ms ease, transform 500ms ease, -webkit-transform 500ms ease;
	-webkit-animation-name: logo-container-animation;
			animation-name: logo-container-animation;
	-webkit-animation-duration: 300ms;
			animation-duration: 300ms;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease-out;
			animation-timing-function: ease-out;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	contain: strict;
}

.main-container > .main > .header > .logo-container > .logo-image {
	width: 100%;
	height: 100%;
	vertical-align: middle;
	-o-object-fit: cover;
	   object-fit: cover;
}

.main-container > .main > .content {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	grid-area: content;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	grid-template-areas: "content-primary" "content-secondary" "content-background-image";
	padding: 20px;
}

.main-container > .main > .content > .content-primary {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: content-primary;
	display: -ms-grid;
	display: grid;
	grid-auto-rows: min-content;
	margin-top: 75px;
	transition: margin-top 500ms ease;
}

.main-container > .main > .content > .content-primary > .content-title {
	-ms-grid-row: 1;
	font-size: 20px;
	font-weight: 600;
	color: #606060;
	text-align: center;
}

.main-container > .main > .content > .content-primary > .content-description {
	-ms-grid-row: 2;
	padding: 20px 10px;
	box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.5);
	background: #fff;
	color: #606060;
	white-space: pre-line;
	overflow-wrap: break-word;
	margin: 14px 0 12px;
}

.main-container > .main > .content > .content-primary > .content-links {
	-ms-grid-row: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.main-container > .main > .content > .content-primary > .content-links.mobile {
	flex-flow: column;
}

.main-container > .main > .content > .content-primary > .content-links.desktop {
	flex-flow: row;
}

.main-container > .main > .content > .content-primary > .content-links > .content-link {
	display: inline-block;
	height: 34px;
	margin: 6px;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	max-width: 100%;
}

/*@media (hover: hover) {*/
@media only screen and (min-width: 844px) {

	.main-container > .main > .content > .content-primary > .content-links > .content-link::after {
		content: attr(tooltip);
		position: absolute;
		top: auto;
		right: auto;
		bottom: 100%;
		left: 50%;
		transform: translate(-50%, 0);
		margin-top: 4px;
		text-align: center;
		white-space: nowrap;
		background: #3d5c9a;
		color: #fff;
		border: 1px solid white;
		border-radius: 12px;
		padding: 4px 6px;
		font-size: 13px;
		opacity: 0;
	}
	
}

.main-container > .main > .content > .content-primary > .content-links > .content-link:hover::after {
	opacity: 1;
	transition: opacity 350ms ease-in-out 350ms;
}

.main-container > .main > .content > .content-primary > .content-links > .content-link.short {
	width: 34px;
	height: 34px;
}

.main-container > .main > .content > .content-primary > .content-links > .content-link.long {
	width: auto;
	height: 40px;
}

.main-container > .main > .content > .content-primary > .content-links > .content-link > .content-link-image {
	opacity: 0.95;
	transition: -webkit-transform 200ms ease;
	transition: transform 200ms ease;
	transition: transform 200ms ease, -webkit-transform 200ms ease;
}

.main-container > .main > .content > .content-primary > .content-links > .content-link:hover > .content-link-image {
	opacity: 1;
}

.main-container > .main > .content > .content-primary > .content-links > .content-link > .content-link-text {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	display: flex;
	align-items: center;
	font-weight: bold;
	color: #fff;
	margin-right: 12px;
}

.main-container > .main > .content > .content-secondary {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	grid-area: content-secondary;
}

.main-container > .main > .content > .content-background-image {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	grid-area: content-background-image;
	max-width: calc(100% + 40px);
	margin: -20px;
	/* Here you can adjust image overlay using margin-top; for example : margin-top: -40px; */
}

.main-container > .main > .footer {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	grid-area: footer;
	display: -ms-grid;
	display: grid;
	-ms-grid-rows: 1fr 20px 1fr;
	grid-template-rows: 1fr 1fr;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
		grid-template-areas: "footer-copyright" "footer-links";
	grid-gap: 20px;
	padding: 20px;
	background: #3d5c9a;
}

.main-container > .main > .footer > .footer-copyright {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: footer-copyright;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: #fff;
}

.main-container > .main > .footer > .footer-links {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	grid-area: footer-links;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-container > .main > .footer > .footer-links > .footer-link {
	display: flex;
	align-self: center;
	justify-self: center;
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}

.main-container > .main > .footer > .footer-links > .footer-link:not(:first-child) {
	margin-left: 10px;
}

.main-container > .main > .footer > .footer-links > .footer-link:not(:last-child) {
	margin-right: 10px;
}

/* Desktop specific */

@media only screen and (min-width: 844px) {
	
	.desktop-hidden {
		display: none !important;
	}
	
	.mobile-show {
		display: none !important;
	}
	
	.main-container > .main {
		width: 844px;
	}
	
	.main-container > .main > .header > .logo-container {
		margin-left: 0;
		-webkit-transform: translate(-50%, 50%) translateX(150px);
				transform: translate(-50%, 50%) translateX(150px);
	}
	
	.main-container > .main > .content {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		grid-area: content;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 250px 1fr;
		grid-template-columns: 250px 1fr;
			grid-template-areas: "content-secondary content-primary" "content-background-image content-background-image";
	}
	
	.main-container > .main > .content > .content-primary {
		margin-top: 0;
	}
	
	.main-container > .main > .content > .content-primary > .content-title {
		text-align: start;
	}
	
	.main-container > .main > .content > .content-primary > .content-links > .content-link:hover > .content-link-image {
		opacity: 1;
		-webkit-animation-name: content-link-hover-animation;
				animation-name: content-link-hover-animation;
		-webkit-animation-duration: 800ms;
				animation-duration: 800ms;
		-webkit-animation-fill-mode: forwards;
				animation-fill-mode: forwards;
		-webkit-animation-timing-function: ease;
				animation-timing-function: ease;
		-webkit-animation-direction: alternate;
				animation-direction: alternate;
		-webkit-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
	}
	
	.main-container > .main > .footer {
		-ms-grid-rows: 1fr;
		grid-template-rows: 1fr;
		-ms-grid-columns: -webkit-max-content 20px 1fr 20px -webkit-max-content;
		-ms-grid-columns: max-content 20px 1fr 20px max-content;
		grid-template-columns: -webkit-max-content 1fr -webkit-max-content;
		grid-template-columns: max-content 1fr max-content;
			grid-template-areas: "footer-copyright . footer-links";
	}
	
	.main-container > .main > .content > .content-primary {
		-ms-grid-row: 1;
		-ms-grid-column: 2;
	}
	
	.main-container > .main > .content > .content-secondary {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
	
	.main-container > .main > .content > .content-background-image {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
	}
	
	.main-container > .main > .footer > .footer-copyright {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	}
	
	.main-container > .main > .footer > .footer-links {
		-ms-grid-row: 1;
		-ms-grid-column: 5;
	}
	
	/* Scrollbar */

	::-webkit-scrollbar {
		width: 10px;
	}
	
	::-webkit-scrollbar-track {
		background: rgb(241, 241, 241);
	}
	
	::-webkit-scrollbar-thumb {
		background: rgb(193, 193, 193);
	}
	
	::-webkit-scrollbar-thumb:hover {
		background: rgb(168, 168, 168);
	}
	
}

/* Mobile specific */

@media not screen and (min-width: 844px) {
	
	.mobile-hidden {
		display: none !important;
	}
	
	.desktop-show {
		display: none !important;
	}
	
}

/* Animations */

@-webkit-keyframes main-animation {

  from {
	height: 0;
  }

}

@keyframes main-animation {

  from {
	height: 0;
  }

}

@-webkit-keyframes logo-container-animation {

  from {
	width: 0;
	height: 0;
	opacity: 0;
  }

}

@keyframes logo-container-animation {

  from {
	width: 0;
	height: 0;
	opacity: 0;
  }

}

@-webkit-keyframes content-link-hover-animation {

  from {
	transform: translateY(0);
  }

  33% {
	transform: translateY(-5px);
  }

  to% {
	transform: translateY(5px);
  }

}

@keyframes content-link-hover-animation {

  from {
	transform: translateY(0);
  }

  33% {
	transform: translateY(-5px);
  }

  to% {
	transform: translateY(5px);
  }

}

@-webkit-keyframes pop-in {

  from {
	-webkit-transform: scale(0, 0);
			transform: scale(0, 0);
  }

  to {
	-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
  }

}

@keyframes pop-in {

  from {
	-webkit-transform: scale(0, 0);
			transform: scale(0, 0);
  }

  to {
	-webkit-transform: scale(1, 1);
			transform: scale(1, 1);
  }

}

.animate-pop-in-fast {
  -webkit-animation-name: pop-in;
		  animation-name: pop-in;
  -webkit-animation-duration: 150ms;
		  animation-duration: 150ms;
  -webkit-animation-fill-mode: forwards;
		  animation-fill-mode: forwards;
}

.animate-pop-in {
  -webkit-animation-name: pop-in;
		  animation-name: pop-in;
  -webkit-animation-duration: 300ms;
		  animation-duration: 300ms;
  -webkit-animation-fill-mode: forwards;
		  animation-fill-mode: forwards;
}

.animate-pop-in-long {
  -webkit-animation-name: pop-in;
		  animation-name: pop-in;
  -webkit-animation-duration: 450ms;
		  animation-duration: 450ms;
  -webkit-animation-fill-mode: forwards;
		  animation-fill-mode: forwards;
}