@charset "UTF-8";
/* CSS Document */

/* GLOBALS */
:root {
	/* Colors */
	--theme_color_primary: rgb(164, 1, 1);
	--theme_color_secondary: #b00f0f;
	--theme_color_highlight: #FFFFFF;
	--theme_bg_primary: #f6f6f6;
	--theme_bg_secondary: #EEEEEE;
	--theme_bg_highlight: #EEEEEE;
	--theme_bg_active: #E3E3E3;
	--theme_bg_inactive: #707070;
	/* Text Colors */
	--text_color_primary: #E3E3E3;
     --text_color_secondary: #fb5d5d;
     --text_color_primary_contrast: #4c0000;
	--text_color_highlight: #F3A50D;
	--text_color_highlight_contrast: #ca8703;
     --text_color_subheader: rgb(243, 201, 13);
	--text_color_inactive: #666666;
     --text_color_content: #333333;
	--text_color_link: #197efa;
	--text_color_warn: #F3A50D;
	--text_color_alert: #f8ca01;
	/* Content */
     --glass_background: rgb(227, 227, 227, 0.01);
     --glass_background_opaque: rgb(227, 227, 227, 0.25);
     --glass_background_contrast: rgba(253, 2, 2, 0.05);
     --glass_background_dark: rgba(253, 2, 2, 0.45);
     --glass_glow: rgb(10, 10, 10, 0.35);
     --glass_highlight: rgb(227, 227, 227, 0.35);
     --glass_shadow: rgba(117, 5, 5, 0.55);
     --glass_border_highlight: rgba(250, 213, 213, 0.75);
     --glass_border_shadow: rgba(248, 129, 129, 0.45);
	--content_popup_bg: #2e2e2e;
	--content_utility_bg: #EEEEEE;
	/* Elements */
	--scrollbar_bar_off: #dbd9d9;
	--scrollbar_bar_on: #c0bebe;
}

/* Fonts */
@font-face {
	font-family: 'Close Call PM';
	src: url('fonts/close_call_pm/close_call_pm.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'A Bold';
	src: url('fonts/a_bold/abold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'BOLD';
	src: url('fonts/bold/bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Bakbak One';
	src: url('fonts/bakbak_one/bakbakone.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Century Gothic Regular';
	src: url('fonts/century_gothic/centurygothic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Century Gothic Bold';
	src: url('fonts/century_gothic/centurygothic_bold.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Inconsolata';
	src: url('fonts/inconsolata/inconsolata.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* Animations */
@keyframes glow {
  from {
    text-shadow: 0 0 7px var(--text_color_primary),
                 0 0 15px var(--text_color_primary),
                 0 0 20px var(--text_color_secondary), 
                 0 0 30px var(--text_color_secondary);
  }
  to {
    text-shadow: 0 0 20px var(--text_color_primary),
                 0 0 30px var(--text_color_secondary),
                 0 0 40px var(--text_color_secondary),
                 0 0 50px var(--text_color_secondary);
  }
}
@keyframes icon_glow {
  from {
    box-shadow: 0 0 7px var(--text_color_primary),
                 0 0 15px var(--text_color_primary),
                 0 0 20px var(--text_color_secondary), 
                 0 0 30px var(--text_color_secondary);
  }
  to {
    box-shadow: 0 0 20px var(--text_color_primary),
                 0 0 30px var(--text_color_secondary),
                 0 0 40px var(--text_color_secondary),
                 0 0 50px var(--text_color_secondary);
  }
}
@keyframes sharpen {
  from {
     -webkit-filter: blur(8px) contrast(300%);
  }
  to {
     -webkit-filter: blur(0px) contrast(100%);
  }
}
@keyframes fly_in {
    0% {
        transform: translateY(100%); 
        opacity: 0;
    }
    80% {
        transform: translateY(-10%); 
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Styles */
html {
     height: 100%;
     overscroll-behavior: none;    
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	width: 100%;
     min-width: 1000px;
	height: 100%;
	position: fixed;
     transition: .5s;
	overflow-wrap: break-word;
     background-image: url('images/bg01.png');
     background-size: cover;
     background-position: bottom -10%;
     background-repeat: no-repeat;
}
.layout_cell {
     float: left;
}
.layout_row {
     clear: both;
}
.layout_async_hidden {
	width: 0px;
	height: 0px;
	visibility: hidden;
	overflow: hidden;
}
.layout_loading_container {
	width: 450px;
	height: 150px;
  	display: none;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
	z-index: 1313;
}
.layout_loading_async {
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: center;
	color: var(--text_color_primary);
	vertical-align: middle;
  	margin: 0;
  	position: absolute;
  	top: 50%;
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 125px;
	z-index: 1314;
}
.layout_loading_message {
	width: 450px;
	height: 45px;
	font-size: 17px;
	line-height: 45px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: center;
  	position: relative;
	top: calc(50% - 15px);
	left: calc(50% - 225px);
	z-index: 1315;
}
.layout_logo {
     width: 380px;
     height: 207.9px;
     top: 30px;
     left: 30px;
     position: absolute;
     background-image: url('images/logo.png');
     background-size: cover;
     background-repeat: no-repeat;
}
.layout_nav_top {
	width: auto;
     min-width: 660px;
	height: 120px;
  	top: 30;
     left: 570;
     white-space: nowrap;
  	position: absolute;
}
.layout_nav_content_left {
	width: 500px;
     min-width: 500px;
	height: 100%;
  	top: 30;
     right: 60;
  	float: left;
}
.layout_nav_content_right {
	width: calc(100% - 560px);
	height: calc(100% - 120px);
     margin-left: 60px;
  	margin-top: 90px;
     text-align: right;
  	float: left;
}
.layout_legal {
	width: 450px;
	height: 10px;
	font-size: 9px;
	line-height: 10px;
	font-family: "Century Gothic Regular";
	font-weight: normal;
	text-align: center;
     color: var(--text_color_primary_contrast);
  	position: absolute;
     clear: both;
	bottom: 5px;
	left: calc(50% - 225px);
	z-index: 1320;
}

/* Scroll */
.layout_content_scroll {
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: scroll;
}
/* Scroll Bar */
.layout_content_scroll::-webkit-scrollbar {
	width: 14px;
}
.layout_content_scroll::-webkit-scrollbar-button {
     display: none;
}
.layout_content_scroll::-webkit-scrollbar-corner {
     background: transparent;
}
/* Scroll Track */
.layout_content_scroll::-webkit-scrollbar-track {
	display: none;
}
/* Scroll Handle */
.layout_content_scroll::-webkit-scrollbar-thumb {
	background: var(--theme_color_secondary); 
	border: 3px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	border-radius: 7px;
}
/* Scroll Handle Hover */
.layout_content_scroll::-webkit-scrollbar-thumb:hover {
	background: var(--theme_color_highlight); 
	border: 3px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
	border-radius: 7px;
}

/* Nav Top */
.nav_top_icons {
     width: 26px;
     height: 26px;
     margin-top: 0px;
     margin-right: 3px;
     border: 0px;
     float: left;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
}
.nav_top_icons.atom {
     background-image: url(icons/icon_atom.svg);
}
.nav_top_icons.dna {
     background-image: url(icons/icon_dna.svg);
}
.nav_top_icons.scope {
     background-image: url(icons/icon_scope.svg);
}
.nav_top_icons.molecule {
     background-image: url(icons/icon_molecule.svg);
}

/* Glass Styles */
.layout_glass_wrapper {
     all: unset;
     position: relative;
     font-family: 'Century Gothic Regular';
     font-size: 1rem;
     padding: 1rem 2rem;
     background: var(--glass_background);
     backdrop-filter: blur(2px) saturate(170%);
     color: white;
     border-radius: 16px;
}
.layout_glass_wrapper::before {
     content: '';
     position: absolute;
     z-index: -1;
     inset: 0px;
     border-radius: inherit;
     padding: 1px; /* border width */
     background: linear-gradient(
     to bottom right,
     var(--glass_border_shadow) 0%,
     var(--glass_border_highlight) 62%,
     var(--glass_border_shadow) 100%
     );
     -webkit-mask: linear-gradient(var(--glass_border_highlight) 0 0) content-box, linear-gradient(var(--glass_border_highlight) 0 0);
     mask: linear-gradient(var(--glass_border_highlight) 0 0) content-box, linear-gradient(var(--glass_border_highlight) 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
}
.layout_glass_wrapper.body {
     width: calc(100vw - 100px);
     height: calc(100vh - 100px);
     min-width: 1200px;
     min-height: 650px;
     margin: 50px;
     box-sizing: border-box;
     position: absolute;
     box-shadow: 0 0 20px 2.5px var(--glass_glow);
}
.layout_glass_wrapper.content {
     display: block;
     box-sizing: border-box;
     background: var(--glass_background_dark);
     backdrop-filter: blur(1px) saturate(150%);
}
.layout_glass_wrapper.content.block {
     width: 85%;
     min-height: 90px;
     margin-left: 60px;
     margin-bottom: 30px;
     font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary);
}
.layout_glass_wrapper.module {
     display: block;
     box-sizing: border-box;
     background: var(--glass_background_opaque);
}
.layout_glass_wrapper.module.horizontal {
     width: 85%;
     min-height: 90px;
     margin-top: 15px;
     margin-bottom: 15px;
     font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary);
}
.layout_glass_wrapper.module.projects {
     width: 90%;
     min-height: 90px;
     margin-top: 15px;
     margin-bottom: 15px;
     padding: 5px;
     font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary);
}
.layout_glass_wrapper.module.projects.vertical_in {
     transform: translateY(calc(100% + 140px)); 
     opacity: 0;
     animation: fly_in .25s ease-out forwards;
}
.layout_glass_wrapper.module.input {
     width: 450px;
     height: 54px;
     padding: 0px;
     margin-bottom: 0px;
     font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary);
     border-radius: 12px;
}
.layout_glass_wrapper.module.textarea {
     width: 450px;
     height: 136px;
     padding: 0px;
     margin-bottom: 0px;
     font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary);
     border-radius: 12px;
}
.layout_glass_wrapper.visitor_details {
     display: block;
     box-sizing: border-box;
     background: var(--glass_background_contrast);
     backdrop-filter: blur(2px) saturate(250%);
}
.layout_glass_wrapper.visitor_details.details {
     margin: 250px 0px 30px 0px;
     width: 400px;
     height: 220px;
}

/* Dashboard Styles */
.dashboard_visitor_locale {
	width: 100%;
	height: auto;
	font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary);
     position: absolute;
     top: 20px;
     left: 20px;
}
.dashboard_visitor_tempurature {
	width: 140px;
	height: auto;
	font-size: 26px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: right;
	color: var(--text_color_primary);
     position: absolute;
     top: 10px;
     right: 20px;
}
.dashboard_visitor_weather {
	width: 140px;
	height: auto;
     position: absolute;
     top: 15px;
     right: 40px;
}
.dashboard_visitor_clock {
	width: 100%;
	height: 44px;
     padding-bottom: 10px;
	font-size: 44px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
     line-height: 44px;
	color: var(--text_color_primary);
}
.dashboard_visitor_clock_meridian {
	height: 44px;
	font-size: 18px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
     vertical-align: top;
     line-height: 26px;
	color: var(--text_color_primary);
}
.dashboard_visitor_forecast {
	width: 100%;
	height: 60px;
     margin-top: 60px;
     white-space: nowrap;
}
.dashboard_visitor_forecast_cell {
	width: 33%;
	height: 60px;
	font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: center;
	color: var(--text_color_primary);
     border-right: 1px dashed var(--theme_bg_active);
     float: left;
}
.dashboard_visitor_forecast_cell.end {
	width: 33%;
	height: 60px;
	font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: center;
	color: var(--text_color_primary);
     border: 0px;
     float: left;
}

/* Content Styles */
.content_container {
     padding-top: 0px;
}
.content_clear_bg {
     width: calc(100% - 590px);
     height: calc(100% - 128px);
     overflow: scroll;
     box-sizing: border-box;
     animation: sharpen 1s ease-in;
     position: absolute;
     z-index: 5;
}
.content_clear_bg.home {
     background-image: url(icons/icon_atom_red.svg);
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: top -150px left -50px;
     opacity: 35%;
}
.content_clear_bg.about {
     background-image: url(icons/icon_dna_red.svg);
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: top -150px left -50px;
     opacity: 35%;
}
.content_clear_bg.projects {
     background-image: url(icons/icon_molecule_red.svg);
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: top -150px left -50px;
     opacity: 35%;
}
.content_clear_bg.contact {
     background-image: url(icons/icon_scope_red.svg);
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: top -150px left -50px;
     opacity: 35%;
}
.content_clear {
     width: calc(100% - 590px);
     height: calc(100% - 140px);
     padding-top: 10px;
     text-align: left;
     overflow: scroll;
     box-sizing: border-box;
     animation: sharpen .25s ease-in;
     position: absolute;
     z-index: 6;
}
.content_clear_paragraph {
     width: 80%;
     text-align: left;
     padding-left: 7px;
     margin-bottom: 20px;
}
.content_footer_icons {
     width: 52px;
     height:52px;
     padding: 6px;
     /*
     margin-top: 10px;
     margin-left: calc(40% - 26px);
     margin-right: calc(40% - 26px);
     float: left;
     */
     top: 115px;
     left: 510px;
     border: 0px;
     position: absolute;
     background-position: center;
     background-repeat: no-repeat;
     background-size: 80%;
     -webkit-animation: icon_glow 1s ease-in-out infinite alternate; 
     animation: icon_glow 1s ease-in-out infinite alternate;
     border-radius: 50%;
}
.content_footer_icons.atom {
     background-image: url(icons/icon_atom.svg);
}
.content_footer_icons.dna {
     background-image: url(icons/icon_dna.svg);
}
.content_footer_icons.scope {
     background-image: url(icons/icon_scope.svg);
}
.content_footer_icons.molecule {
     background-image: url(icons/icon_molecule.svg);
}
.content_projects_icon {
     width: 130px;
     height: 90px;
     background-size: auto 40px;
     background-position: center;
     background-repeat: no-repeat;
     float: left;
}
.content_projects_text {
     width: calc(100% - 180px);
     margin-top: 5px;
     margin-left: 30px;
     line-height: 17px;
     font-size: .90vw;
	font-family: 'Century Gothic Regular';
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary_contrast);
     float: left;
}
.content_form_message {
	margin-top: 10px;
     margin-left: 10px;
     margin-bottom: 10px;
	position: relative;
	text-align: left;
	font-size: 15px;
	font-family: "Century Gothic Regular";
	font-weight: normal;
     color: var(--text_color_primary);
}

/* Animation Objects */
.dashboard_animation_flask {
     height: 17%;
     opacity: 55%;
     position: absolute;
     bottom: 20px;
     right: 20px;
}
.content_animation_email {
     height: 35%;
     opacity: 55%;
     position: relative;
     margin-top: 30px;
     margin-left: 70px;
}

/* Text Styles */
.content_text_highlight {
     color: var(--text_color_highlight);
}
.content_text_alert {
     color: var(--text_color_alert);
}
.text_nav_top {
     margin-right: 30px;
     line-height: 28px;
     font-size: 28px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: right;
	color: var(--text_color_primary);
     position: relative;
     display: inline-block;
     letter-spacing: -2px;
     transform: scaleY(0.90);
     padding-bottom: 5px;
     cursor: pointer;
}
.text_nav_top::after {
     content: '';
     position: absolute;
     margin-top: 5px;
     width: 100%;
     height: 5px;
     bottom: 0;
     right: 0;
     background: repeating-linear-gradient(
          -45deg,
          var(--text_color_highlight) 0px,
          var(--text_color_highlight) 4px,
          transparent 4px,
          transparent 12px
     );
     transform: scaleX(0);
     transition: transform 0.3s ease-in-out;
     transform-origin: bottom left;
}
.text_nav_top:hover {
     filter: brightness(125%);
     -webkit-animation: glow 1s ease-in-out infinite alternate; 
     animation: glow 1s ease-in-out infinite alternate;

}
.text_nav_top:hover::after {
     transform: scaleX(1);
     transform-origin: bottom right;
     background-color: var(--text_color_highlight_contrast);
}
.text_dashboard_city {
	width: 100%;
	height: 34px;
     margin: 0px;
	font-size: 30px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: right;
     line-height: 30px;
	color: var(--text_color_primary);
}
.text_dashboard_region {
	width: 100%;
	height: 14px;
     margin: -15px 0px 0px 3px;
	font-size: 14px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: right;
     line-height: 14px;
	color: var(--text_color_primary);
}
.text_dashboard_forecast {
	width: 100%;
	height: 14px;
	font-size: 20px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: right;
     line-height: 19px;
	color: var(--text_color_primary);
}
.text_content_subnav {
     margin-left: 7px;
     margin-right: 30px;
     line-height: 23px;
     font-size: 32px;
	font-family: "A Bold";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_subheader);
     text-shadow: 0 0 2px var(--text_color_primary),
                 0 0 6px var(--text_color_secondary),
                 0 0 7px var(--text_color_secondary),
                 0 0 8px var(--text_color_secondary);
     position: relative;
     display: inline-block;
     letter-spacing: -2px;
     transform: scaleY(0.90);
     padding-bottom: 5px;
}
.text_content_subnav::after {
     content: '';
     position: absolute;
     width: 5px;
     height: 80%;
     margin-left: -7px;
     top: 0;
     left: 0;
     background: repeating-linear-gradient(
          -45deg,
          var(--text_color_highlight) 0px,
          var(--text_color_highlight) 4px,
          transparent 4px,
          transparent 8px
     );
}
.text_content_form_title {
     margin-left: 7px;
     margin-right: 30px;
     line-height: 23px;
     font-size: 26px;
	font-family: "Century Gothic Regular";
	font-weight: normal;
	text-align: left;
	color: var(--text_color_primary);
     position: relative;
     display: inline-block;
     letter-spacing: -2px;
     transform: scaleY(0.90);
     padding-bottom: 5px;
}

/* Form Styles */
input.form_input {
	width: 450px;
	height: 54px;
	padding-left: 20px;
	margin-bottom: 10px;
	line-height: 54px;
	vertical-align: middle;
	font-size: 18px;
	font-family: "Century Gothic Regular";
	font-weight: normal;
     color: var(--text_color_primary);
     background-color: transparent;
     border: 0px;
	border-radius: 8px;
	outline: none;
}
input.form_input::placeholder {
     color: var(--text_color_primary);
     opacity: 1;
}
textarea.form_input {
	width: 450px;
	height: 136px;
	padding: 10px 20px 10px 20px;
	margin-bottom: 10px;
	line-height: 28px;
	vertical-align: middle;
	font-size: 18px;
	font-family: "Century Gothic Regular";
	font-weight: normal;
     color: var(--text_color_primary);
     background-color: transparent;
     border: 0px;
	border-radius: 8px;
	outline: none;
}
textarea.form_input::placeholder {
     color: var(--text_color_primary);
     opacity: 1;
}

/* Buttons Styles */
input.button_form {
     width: 300px;
	height: 54px;
	padding-left: 5px;
     margin-left: 150px;
	margin-top: 10px;
	line-height: 54px;
	vertical-align: middle;
	font-size: 22px;
	font-family: "A Bold";
	font-weight: normal;
     color: var(--text_color_primary);
     background-color: var(--text_color_highlight);
     border: 1px solid var(--text_color_alert);
	border-radius: 8px;
     cursor: pointer;
}
input.button_form:hover {
     filter: brightness(125%);
}
input.button_form:active {
     filter: brightness(155%);
}

/* Image Styles */
.img_weather_icon {
     width: 135px;
     margin-top: 5px;
     margin-right: 15px;
     border: 0px;
}