*,
*::after,
*::before {
	box-sizing: border-box;
}

ul,li {padding:0;}
:root {
	--primary-font: 'Source Code Pro';
	--secondary-font: 'Source Code Pro';

	--primary-background: #f1f1f1;
	--secondary-background: #FFFFFF;
	--transition-background: #cccccc;

	--primary:#1e1e1e;
	--secondary:#D6D6D6;

	--primary-link: #fc6875; /*#fc6874;*/

	--info:#007bff;
	--success:#28a745;
	--warning:#ffc108;

	--facebook:#3B5998;
	--twitter:#00ACEE;
	--instagram:#B134AF;
	--pinterest:#c8232c;
}

.fa-twitter:hover {	color:var(--twitter); }
.fa-facebook:hover {	color:var(--facebook); }
.fa-instagram:hover {	color:var(--instagram); }
.fa-pinterest:hover {	color:var(--pinterest); }

body {

	font-family: var(--secondary-font), sans-serif;
	
	color: var(--primary);
	background-color:var(--primary-background);
	height:100vh;
	width:100vw;
}

body > #background
{
	position: fixed;
	z-index:-1;
	width: 100vw;
	height: 100vh;

	background: var(--secondary-background) repeat url("../images/background/arabesque.png");
	opacity:1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a:hover, a:focus { text-decoration: underline; }
a {
	color: inherit;
	font-weight:700;
	cursor: pointer;
	text-decoration: none;
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

.loading::before {
	content: '';
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-background);
}

.loading::after {
	content: '';
	position: fixed;
	z-index: 1001;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	pointer-events: none;
	border-radius: 50%;
	background: var(--secondary);
	animation: loading 0.5s ease-out infinite alternate forwards;
}

@keyframes loading {
	from { transform: scale3d(0,0,1); } 
	to { transform: scale3d(1,1,1); } 
}

.transition {
	position:absolute;
	height:100vh;
	width:0;
	background:var(--transition-background);
	right:0;
	z-index:1001;
	opacity: 1;
}

.transition.play { animation: transitionIn 0.5s ease-in-out; }
.transition.rewind { animation: transitionOut 0.5s ease-in-out; }
.transition.pause {
	transform: none;
	animation: none !important;

	background:var(--transition-background);
	
	height:100vh;
	width:100vw;
}

@keyframes transitionIn{
	0%   { }
	50% { transform: translateX(0vw);background:var(--primary-background); width:100vw; }
	100% { transform: translateX(0vw);background:var(--primary-background); width:100vw; }
}

@keyframes transitionOut{
	0%	 { background:var(--primary-background); width:100vw; }
	50%	 { transform: translateX(-100vw);background:var(--primary-background); width:100vw; }
	100% { transform: translateX(-100vw);background:var(--primary-background); width:100vw; }
}

.glass
{
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* .monkey{
	
	width:300px;
	height:300px;
}

.monkey::before
{
	width:300px;
	height:300px;
	background: url("../images/logo.png") no-repeat;
	background-position: center center;
	background-size:cover;
	transform: rotate(22deg);
} */

#page
{
	width: 100vw;
	overflow:auto;
	padding:2em;
	height:100%;
}

main 
{
	background-color: #FFF8;
	border-radius:1.5em;

	min-width: 475px;
	max-width: 75vw;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
}

.flashbag
{
	min-width: 475px;
	max-width: 75vw;
}

.content-header
{
	border-radius: 1em;
	padding:1em;
	
	display:flex;
	align-items: center;
}
.title
{
	font-size:20pt;
	font-weight:bold;
}
.subtitle
{
	font-size:15pt;
}

h1 {
	font-size:20pt;
	font-weight:700;
}

h2 {
	margin-top:1em;
	font-size:17pt;
	font-weight:700;
}

.logo 
{
	background: url("../images/header.png") no-repeat;
	background-size: contain;
	background-position:center center;

	width: 100%;
	height: 275px;
}

.logo-sm
{
	background: url("../images/header-2.png") no-repeat;
	background-size: contain;
	background-position:center center;

	height:75px;
	width: 75px;
	margin-right:1em;
}

.content:empty { display:none; }
.content
{
	background-color: var(--secondary-background);
	position:relative;
	z-index:2;

	padding:2em 1em;
	border-radius: 1em;
}

.content-footer ul
{
	margin:0; 
	padding:0;
}
.content-footer ul li:first-child { border-left: none; }
.content-footer ul li {

	text-align:center;
	display: inline;
	padding: 0 10px;
	border-left: solid 1px black;
}

.content-footer:empty { display:none; }
.content-footer
{
	position:relative;
	z-index:2;

	border-radius: 0em 0em 1em 1em;
	padding:2em;
	
	display:flex;
	align-items: center;
	justify-content: center;
}

footer 
{
	color: var(--primary);
	font-size:12pt;
	padding:2em;
}

footer ul li:first-child { border-left: none; }
footer ul li {
	display: inline;
	padding: 0 10px;
	border-left: solid 1px black;
}



























.item__title a { color: white; }

/* .item__svg:hover { filter: blur(2px); }
.item__svg { transition: all 2s ease; } */
.contact
{
	display:flex;
	flex-direction: row;
	justify-content: space-around;
}
.contact span { text-align: left; }
.contact span img {
	border-radius: 2em; 
	box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
}
.contact span p:first-child {line-height:1.75}

#page 
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Icons */
.icon {
	display: block;
	width: 1.5em;
}

ul.bubble {

	position: absolute;
	left:1em;
	bottom:0em;
	z-index:10;

	display:flex;
	flex-direction: row;

}

ul.bubble li { color: var(--secondary); }
ul.bubble li:hover { color: var(--primary); }
ul.bubble li .warning { color: var(--warning); }
ul.bubble li .success { color: var(--success); }
ul.bubble li i { padding-left: 0.25em; }
ul.bubble li i:first-child { padding-left: 0; }
ul.bubble li {
	
	cursor: pointer;
	list-style: none;

	display:flex;
	flex-direction: row;
	align-items: center;

	cursor:pointer;
	text-align:center;
	border-radius: 1em;
	
	background-color: var(--secondary-background);
	margin:0.5em;
	padding:0.5em;
}

ul.bubble li.btn-gdrp
{
	background-color: transparent;
	padding:0;
	margin:0;
}

ul.bubble li #gdrp {
	
	background-color: var(--secondary-background);
	padding:0.5em 0 0.5em 0.5em;
	margin:0.5em;
	border-radius: 1em;

	display:flex;
	flex-direction: row;
	align-items: center;
}

ul.bubble li:hover #gdrp-icon { opacity:1; }
ul.bubble li #gdrp-icon       { opacity:0.5; padding-right:0.25em;}

ul.bubble li:hover #gdrp-text > div { opacity:1; }
ul.bubble li #gdrp-text.open { width:100%; }
ul.bubble li #gdrp-text > div { margin-left:1em; width:275px; opacity:0.5; }
ul.bubble li #gdrp-text 
{ 
	transition: width 0.5s ease-in;
	overflow:hidden; 
	width:0; 
	position:relative;
	z-index:-1;
	background-color: var(--secondary-background);
	padding:0.75em 0.5em 0.75em 3.5em;
	margin-left:-5em;
	border-radius: 1em;
}


.chat.open { max-width:400px; width:35vw; max-height:400px; height:50vh; padding:1em; margin:0.5em; opacity:1; }
.chat
{
	box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
	position:absolute;
	bottom:0;
	left:0;
	cursor:initial;

	display:flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	overflow:hidden;
	transition: all 0.5s ease-in-out;
	
	z-index:20;

	color: var(--primary) !important;
	background-color: var(--secondary-background);

	border-radius: 1em;
	width:0;
	height:0;
	margin:1em;
	padding:0;
	opacity: 0;

	text-align:left;
}

#chat-talk::-webkit-scrollbar { display: none; }
#chat-talk
{
	background-color: var(--primary-background);
	padding:0.5em 1em;
	margin:0.5em;
	display: flex; 
	flex-direction: column-reverse;
	
	box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
	
	width:95%;
	border-radius: 1em;
	
	overflow:auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#chat-talk .entrylist
{
	display:flex;
	flex-direction: column;
}
#chat-talk .entrylist > div.reply
{
	text-align: right;
	margin-right:auto;
	margin-left:unset;
}
#chat-talk .entrylist > div
{
	color:white;

	position:relative;

	display:flex;
	flex-direction: column;
	
	margin-left:auto;
	margin-right:unset;
	margin-top:0.5em;
	margin-bottom:0.5em;
	
}

#chat-talk .entrylist > div span.date
{
	color:var(--primary);
	font-size: 10pt;
	padding: 0 0.75em;
	text-align: right;
}
#chat-talk .entrylist > div span.text
{
	background-color: var(--success);
	padding:0.75em 1em;
	margin:0.75em unset;

	border-radius: 1em;
	text-align:right;
}

#chat-talk .entrylist > div.reply span.date {text-align: left;}
#chat-talk .entrylist > div.reply span.text
{
	background-color: var(--info);
	text-align:left;
}

#chat-talk .entrylist > div span.text:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: var(--success);
	border-right: 0;
	margin-top: -15px;
	margin-right: -5px;
}

#chat-talk .entrylist > div.reply span.text:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-right-color: var(--info);
	border-left: 0;
	margin-top: -15px;
	margin-left: -5px;
}

#chat-send-text
{
	display: flex;
	align-items: center;
	justify-content: space-around;
	
	padding:0.5em 0.5em;
	margin:0.5em;
	width: 85%;

	border-radius:1em;
	background-color: var(--primary-background);
}

#chat-send-text input { 
	opacity:1; 
	border-radius:0.5em;
	border:0;
	padding:0.25em 0.75em;
	text-align: right;
	width: 100%;
}
#chat-send-text button
{
	opacity:1;
	color:var(--primary);
	background-color: transparent;
	border:0;
}

#chat-send-text button:hover i { transform:rotate(90deg); }
#chat-send-text button:active i { position:relative; top:2px; }
#chat-send-text button i {
	transition:transform 0.1s ease;
	transform-origin: center;
}

.btn-shlink
{
	color:#000;
	padding:0.5em 0;
	text-transform: uppercase;

	display:flex;
	flex-direction: column;
	align-items: center;
}

.btn-shlink { color: var(--primary-link) !important; }
.btn-shlink span
{
	position:relative;
	top: 2px;
	font-size:14pt;
}

.btn-shlink svg
{
	margin-bottom:-2.75em;
}

.btn-shlink svg rect {
	stroke-width: 2;
	stroke-dasharray: 353, 0;
	stroke-dashoffset: 0;
	-webkit-transition: all 600ms ease;
	transition: all 600ms ease;
}

.btn-shlink:hover svg rect {
	stroke-width:2;
	stroke-dasharray: 200, 100%;
	stroke-dashoffset: 300;
}

.btn-cta {
	display: flex;
	justify-content: space-between;

	padding: 2.5em 0;
	padding-right: 1em;

	transition: all 0.2s ease;
	align-items: center;

	color:var(--primary) !important;
	text-decoration: none !important;
}
.btn-cta svg {
	stroke:var(--primary) !important;

	opacity:0;
}

.btn-cta:before {
	content: "";
	position: absolute;
	display: block;
	border-radius: 28px;
	background: var(--primary-link);
	opacity: 0.5;
	width: 54px;
	height: 54px;
	transition: all 0.3s ease;
}

.btn-cta:hover {
	width:100%;

	color:var(--secondary-background) !important;
}

.btn-cta:hover svg {
	stroke:var(--secondary-background) !important;
}

.btn-cta span {
	position: relative;
	font-size: 20px;
	
	font-family: var(--secondary-font);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	padding-left:1.5em;
}

.btn-cta svg {
	position: relative;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: #111;
	stroke-width: 2;
	transition: all 1s ease-in, all 0s ease-out;
}
.btn-cta:hover:before {
	width: 100%;
	background: var(--primary-link);
	opacity:1;
}

.btn-cta:hover svg{
	transition: none !important;
}

.btn-cta:hover svg {
	opacity:1;
}

header {
	position:relative;
	top:5vh;
	left:5vw;
	padding: 5vw 0 0 5vw;
	margin-left:1em;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	min-height: 500px;
	overflow: hidden;

	font-family: var(--primary-font), sans-serif;
}

header .title {
	font-size: 6.5em;
	font-weight: 700;
	line-height: 0.9;
	margin: 0;
	letter-spacing: 0em;
	text-transform: uppercase;

	color:var(--primary);
}
header .subtitle {

	font-size:23pt;
	color: var(--secondary);
	padding-top: 10em;
	text-transform: uppercase;

}

/* Top Navigation Style */
.links {
	position: relative;
	display: flex;
	white-space: nowrap;
}

.icon:first-child {	margin-left: 0; }
.icon {
	display: inline-block;
	margin: 0 1.25em;

	font-size:14pt;
	color: var(--secondary);
}

aside {
	width:50%;
	display:flex;
	flex-direction: column;
	padding-right:1em;
	margin-top:-1em;
}