/**
 * @license
 * MyFonts Webfont Build ID 3917525, 2020-06-23T03:35:32-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).

 * Webfonts copyright: Copyright © 2020 by Connary Fagen. All rights reserved.
 * © 2020 MyFonts Inc
*/

  
@font-face {
  font-family: 'GreycliffCF-ThinOblique';
  font-display: swap;
  src: url('webFonts/GreycliffCF-ThinOblique/font.woff2') format('woff2'), url('webFonts/GreycliffCF-ThinOblique/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-Thin';
  font-display: swap;
  src: url('webFonts/GreycliffCF-Thin/font.woff2') format('woff2'), url('webFonts/GreycliffCF-Thin/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-Light';
  font-display: swap;
  src: url('webFonts/GreycliffCF-Light/font.woff2') format('woff2'), url('webFonts/GreycliffCF-Light/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-Heavy';
  font-display: swap;
  src: url('webFonts/GreycliffCF-Heavy/font.woff2') format('woff2'), url('webFonts/GreycliffCF-Heavy/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-DemiBold';
  font-display: swap;
  src: url('webFonts/GreycliffCF-DemiBold/font.woff2') format('woff2'), url('webFonts/GreycliffCF-DemiBold/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-DemiBoldOblique';
  font-display: swap;
  src: url('webFonts/GreycliffCF-DemiBoldOblique/font.woff2') format('woff2'), url('webFonts/GreycliffCF-DemiBoldOblique/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-Regular';
  font-display: swap;
  src: url('webFonts/GreycliffCF-Regular/font.woff2') format('woff2'), url('webFonts/GreycliffCF-Regular/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-LightOblique';
  font-display: swap;
  src: url('webFonts/GreycliffCF-LightOblique/font.woff2') format('woff2'), url('webFonts/GreycliffCF-LightOblique/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-RegularOblique';
  font-display: swap;
  src: url('webFonts/GreycliffCF-RegularOblique/font.woff2') format('woff2'), url('webFonts/GreycliffCF-RegularOblique/font.woff') format('woff');
}
@font-face {
  font-family: 'GreycliffCF-MediumOblique';
  font-display: swap;
  src: url('webFonts/GreycliffCF-MediumOblique/font.woff2') format('woff2'), url('webFonts/GreycliffCF-MediumOblique/font.woff') format('woff');
}


html {width: 100vw; height: 2000vh;}
#viewport {width: 100vw; height: 100vh; position: fixed; display: block;}
#portfolio_page_wrapper {padding: 0px; position: absolute; left: 0; top: 0; width: 100%; height: 2000vh; scroll-behavior: smooth;}
#container {height: 2000vh; position: fixed;}
canvas { width: 100%; height: 100%; display: block; background-color: #2f345a }

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  margin: 0; 
  padding: 0; 

  
}

cursor {
  cursor: url(spinny.svg), auto;
  -webkit-animation: cursor 400ms infinite;
  animation:spin 1s linear infinite;
}

body {
	overflow-x: hidden;
  overflow-y: scroll;
	padding: 0;
	margin: 0;
	font-family: 'GreycliffCF-Regular',  sans-serif, normal; 
  font-style: normal;
  background: #2E345B;
  height: 100%; 
  width: 100%;
}

h1 {font-family: 'GreycliffCF-Heavy', sans-serif; font-size: 3rem; margin: 0px; line-height: 2.25rem; padding-bottom: 10px; }
h2 {font-family: 'GreycliffCF-LightOblique', sans-serif; margin: 0; font-size: 18px; color: gray; }
h3 {font-family: 'GreycliffCF-DemiBoldOblique', sans-serif; font-size: 1.5rem; margin-bottom: 10px; line-height: 1.7rem; }
h4 {font-family: 'GreycliffCF-RegularOblique', sans-serif; font-size: 1.5rem; color: gray; margin: 0px;}
h5 {font-family: 'GreycliffCF-ExtraThin', sans-serif; font-size: 0.66rem; padding-left: 10px; padding-right: 10px;}
h6 {font-family: 'GreycliffCF-Thin', sans-serif; text-transform: uppercase; font-size: 0.75rem; color: white;}
p {font-family: 'GreycliffCF-Regular', sans-serif; font-size: 1rem;   }
i {font-family: 'GreycliffCF-MediumOblique', sans-serif;  }
em {font-family: 'GreycliffCF-MediumOblique', sans-serif, italic; color: gray;}
b {font-family: 'GreycliffCF-DemiBold', sans-serif; font-size: 1rem;}
a { color: white; text-decoration: none; font-family: 'GreycliffCF-Medium', sans-serif;}
a:hover { cursor: pointer;}
button {font-family: 'GreycliffCF-Regular', sans-serif; background: none; outline: none; border: none; }
button:hover {cursor: pointer; color:# }


/* Homepage CSS ----------------------------------------------------------- */
.homepage {background-color: #2E345B; background-image: url("../src/splash+contexts/stars_wallpaper.svg"); background-size: contain; background-repeat: repeat-y; height: 100%; width: 100%; opacity: 1; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 20;}
.homepage_context {width: 100%;  display: flex; align-items: center; justify-content: center;}
#logo { width: 32%; max-width: 275px; max-height: 60vh; animation: rotateStars 15s infinite; position: absolute; z-index: 3; }
#entry_moto {max-width: 675px; max-height: 90vh; width: 90%; animation: rotateStars 15s infinite;  position: absolute;}
.downArrow{height: 20px;}
#bounce_arrow_button {height: 50px; width: 100%; z-index: 1200; position: fixed; bottom: 20px; display: flex; justify-content: center; align-items: center; }
.social_banners_wrapper { width: 30%; max-width: 250px; min-width: 150px; bottom: 5%; left: 0; position: fixed;}
.social_banners_wrapper img {width: 55%; margin-bottom: -3%}
#social_banner {width: 80%; margin: 10px 0px 0px -30%;}
#social_banners, #shortcut_banners {display: none;}
.shortcut_banners_wrapper { width: 30%; max-width: 250px; min-width: 150px; top: 5%; right: 0; position: fixed;}
.shortcut_banners_wrapper img {width: 55%; float: right; margin-bottom: -3%}
.banner:hover {transform: rotate(5deg); cursor: pointer;}
#shortcut_banner {width: 80%; top: 0; margin: 0px 0% 0px 0px; }

/* Login CSS ------------------------------------------------------------------------------------------ */
.login {width: 100%; height: 100%;  position: fixed; top: 0; display: flex; justify-content: center;	align-items: center;}
.profile {width: 0%; max-width: 250px; position: absolute; padding-top: 25px; opacity: 1; z-index: 10;}
.profile_description {width: 90%; max-width: 500px; opacity:1; padding-top: 80px;}
.spinny {position: fixed; bottom: 20px; left: 48%; z-index: 10000; max-width: 40px; opacity: 1;}

/* Splash Pages CSS ------------------------------------------------------------------------------------ */

#splash_pages {display: flex; justify-content: center; align-items: center; position: fixed; height: 100%; width: 100%; content: contain; }
.splash_page_wrapper {display: flex; justify-content: center; align-items: center; max-height: 80%; }
#splash_context_text {width: 95%; max-height: 900px; position: absolute; animation: rotateStars 15s infinite;}
.splash_img {background: linear-gradient(0deg, rgba(47,51,92,1) 0%, rgba(198,202,223,1) 100%); width: 80%; max-width:1100px; margin-top: 2%; opacity: 1; position: absolute;}


 /* Desktop Framework CSS ------------------------------------------------------------------------------- */
.desktop {position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-image: url("../src/desktop_items/mountain_wallpaper.svg");  background-color: #2E345B; z-index: 0; }
#desktop_window_wrapper {width: 100%; height: 90%; top: 50px; position: fixed; z-index: 0; display: flex; justify-content: center; align-items: center;  }
.desktop_toolbar {width: 100%; z-index: 10000; background-color: #2c2c2c; display: inline-block; height: 40px; display: flex; align-items: center; color: white; font-size: 16px; overflow: hidden; }
#desktop_toolbar_left { width: 55%; float: left;  padding-left: 15px;}
#desktop_toolbar_left a {padding-right: 10px;}
#desktop_toolbar_right { width: 45%; text-align: right; padding-right: 15px; }
#desktop_toolbar_mobile {width: 100%; text-align: center;}
#desktop_toolbar_right img {height: 14px; padding-right: 5px; }
#time {font-family: 'GreycliffCF-Light', sans-serif;}
#desktop_toolbar_right img:hover {transform: scale(1.2);}
.dock_container {position: fixed; width: 100%; bottom: 0px; z-index: 2; display: flex; justify-content: center;} 
.dock {bottom: 0; height: 100px; border-radius: 5px; width: 420px; border: 1px solid #2f335c; background-color: #707BA5; display: flex; justify-content: center; align-items: center; }
.dockIcons { display: table-cell; width: auto; height: 90px; padding: 10px; opacity: 1;}

#mobile_dock_wrapper {width: 100%; display: flex; align-items: center; justify-content: center;}
#mobile_dock_container {display: none; width: 100%; display: flex; align-items: center; justify-content: center;}
.mobile_dock_container {position: fixed; width: 100%; bottom: 0; z-index: 0; display: flex; justify-content: center; align-items: center;} 
.mobileIcons { display: table-cell;  width: auto; height: 80px; margin: 10px;  opacity: 1; z-index: 1000;}
.icon_label {color: white; position: absolute; text-align: center; bottom: 0; }
.icon_button { height: 125px; width: 125px; text-align: center; display: flex; margin-right: 20px; justify-content: center; top: 0;}

.dock button:hover {transform: rotate(5deg); cursor: pointer;}
.tooltip {position: relative; display: inline-block;}
.tooltip .tooltiptext {visibility: hidden; width: 100%; background-color: #c7ccde; color: #000; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; bottom: 100%; opacity: 0; transition: opacity 0.3s;}
.tooltip .tooltiptext::after {content: " "; position: absolute; top: 100%; left: 50%; margin-left: -10px; border: 7px solid; border-width: 9px; border-style: solid; border-color: #c7ccde transparent transparent transparent;}
.tooltip:hover .tooltiptext {visibility: visible; opacity: 1;}
.desktop_icon_container {position: fixed; width: 90%; height: calc(100% - 150px); z-index: 5; opacity: 0;top: 50px;}
.desktop_icon_container img {width: 100px; height: 110px; padding-bottom: 5%;}
.desktop_icon_container button:hover {transform: rotate(5deg); cursor: pointer;}
.desktop_icons {position: fixed;}
.star_wallpaper {width: 100%; top: 50px; margin: auto; position: fixed; z-index: 0; }
#wallpaper1 {animation: fadeInFromNone 4s e ase-out infinite both;}
#wallpaper2 {animation: fadeInFromNone 10s ease-out infinite both; animation-delay: 5s;}
#wallpaper3 {animation: fadeInFromNone 8s ease-out infinite both; animation-delay: 10s}
#notification {right: 0px; z-index: 20; width: 500px; position: fixed; top: 50px; display: none; -webkit-animation:slide-in-right 15s cubic-bezier(.25,.46,.45,.94) both; animation:slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both !important}     
#notification:hover {cursor: pointer;}

#mobile_notification_window {
  width: 101%; 
  max-width: 500px;
  height: 75px; 
  top: 20px;
  z-index: 1000;
  margin: 0;
  position: fixed;
  animation:slide-in-top 0.75s cubic-bezier(.25,.46,.45,.94) both;
  
}

#mobile_notification_wrapper {width: 100%; height: 75px;  display: flex; align-items: center; justify-content: center; }

#mobile_notification img{
  width: calc(100% - 10px); 
  margin: 0px 5px;
}

#mobile_notif_close {
  margin: 35px 0px 25px 0px;
  width: 20px;
  position: fixed;
}


#mobile_notif_close:hover {
  transform: scale(5x);
}



/* Window CSS ------------------------------------------------------------------------------------------------------- */
.window {width: 100%; border: #3A4172 1px solid; border-radius: 5px;  height: calc(100% - 180px); background: #c6cadf;  -webkit-box-shadow: 25px 6px 35px -28px rgba(0,0,0,0.75); -moz-box-shadow: 25px 6px 35px -28px rgba(0,0,0,0.75); box-shadow: 25px 6px 35px -28px rgba(0,0,0,0.75); position: fixed;  z-index: 10;}
.window_closebar {height: 30px; width: 100%; top: 0; cursor: move; background-color: #49588b; color: #f4f4f4;  overflow-x: hidden; border-bottom: #3A4172 1px solid; position: -webkit-sticky; position: sticky; text-align: center; z-index: 20; }
.window_closebar p {display: inline-block; margin-top: 5px;  color: #c6cadf;}
.close_btn { height: 20px; left: 10px; top: 5px; position: absolute; } 
.window_closebar img:hover {cursor: pointer; transform: scale(1.2)}
.blu {border-left: 10px solid #3a4172; padding-left: 20px; margin-right: 20px;}

/* About Window CSS ---------------------------------------------------------------------------------------------------- */

#about_window {width: 100%; max-width: 900px; height: 100%;  max-height:500px; background:#ececec; }
 #about_content_wrapper { top: 40px; width: 100%; height: calc(100% - 30px); }
.about_slide {padding: 20px; height: 100%; width: 100%; overflow-y: scroll;}
.about_slide h1 {font-size: 1.5rem; line-height: 1.75rem;}
.about_content {padding: 15px;}
.about_nav {width: 100%; margin: 25px 0px; text-align: center;}
.about_nav button { margin: 10px; padding: 10px; width: 50%; font-family: 'GreycliffCF-Thin', sans-serif; text-transform: uppercase; font-size: 0.85rem; color: white; background: #49588b; }
#section2 li {list-style: none;}
#section2 {text-align: center;}

/* Contact Window CSS --------------------------------------------------------------------------------------------------- */
#contact_window {height: 550px; max-width: 400px; top: 25%; contain: content; overflow: hidden;}
#contact_window_content p {padding: 0% 5%; }
#contact_window_content img {height: 80px; padding-left: 20px; }
#contact_window_content img:hover {transform: scale(1.1); cursor: alias;}
.mail_button {background: #2f335c; padding: 10px 100px 10px 100px; bottom: 0px; margin-left: 40px; text-align: center;}
.mail_button:hover {padding: 15px 100px;}

/* Mobile App Container --------------------------------------------------------------------------------------------------- */
.mobile_icon_container {height:60%; width:100%; position:fixed; top:40px; padding:2%; display:none}
.mobile_grid_container {display:grid; grid-template-columns:auto auto auto; grid-template-rows:125px 125px; justify-content:center; grid-gap:10px;padding-left:10px}
.app_label {color:#fff; transform:translate(0,105px); text-align:center; position:absolute; font-family:'GreycliffCF-Regular',sans-serif!important}
.mobile_grid_container>div {text-align:center; height:125px; width:110px; display:flex; content:contain}
.mobile_grid_container > div img {width: 100px;}
.mobile_grid_container img {width: 100px;}
.mobile_icons {height: 125px; width: 100px; opacity: 0; }
.mobile_icons img {width: 100px; height: auto;}

/* Social Media Link App Icon and window --------------------------------------------------------------------------------------------------- */
#socials_mobile_window{height:375px; top:25%; left: 5%; padding: 2%; background:none; width:90%; border: none;}
#socials_mobile_wrapper{border-radius:5px; border: #3A4172 1px solid; background:rgba(198,202,223,.85);height:100%;width:100%;padding:10px;text-align:center;color:#fff}
.socials_mobile_container{display:grid;grid-template-columns:auto auto auto;grid-template-rows:100px 100px;justify-content:center;grid-gap:15px; margin-top: 25px;}
.socials_mobile_container>div{text-align:center;height:90px;width:90px;display:flex;object-fit:contain}
.socials_mobile_container img{height:90px}
.social_app_label{color:#fff;transform:translate(0,90px);text-align:center;position:absolute;font-family:'GreycliffCF-Regular',sans-serif!important;font-size:14px}


/* Finder Window---------------------------------------------------------------------------------------------------  */
#instagram_window {max-width:982px;height:calc(100%-220px); max-height: 900px; width:100%;object-fit:contain;background:#c6cADF; top: 50px;}
.instagram_tile img{object-fit:cover;height:86px;top:0;left:0}
#photo_viewer{height:calc(100% - 170px);max-height:890px;max-width:980px;width:100%;top:90px;position:fixed;display:flex;justify-content:center}
.picture_slide{height:calc(100% - 150px);top:48px;width:90%;margin:40px 0 0 0%;text-align:center}
.photo_caption {padding-top: 25px;}
.photo_frame img{width: 100%; max-height: 550px; object-fit: cover; -webkit-box-shadow:25px 6px 35px -28px rgba(0,0,0,.75);-moz-box-shadow:25px 6px 35px -28px rgba(0,0,0,.75);box-shadow:25px 6px 35px -28px rgba(0,0,0,.75)}
.photo_carousel{width:100%; height:100px; bottom:21px; background:#fff; left: 0; position:absolute; display:inline-flex; scroll-behavior: smooth; overflow-x:scroll; overflow-y:hidden; border:5px solid #fff}
.photo_carousel .instagram_tile{padding:0 5px}


/* terminal Window  */
#terminal_window {height: 400px; width: 80vw; max-width: 700px; background-color: #3A4172; top: 30%; }
.terminal {padding-top: 20px;}
.css-typing p {border-right: .15em solid #c6cADF; font-family: "Courier"; font-size: 15px; white-space: nowrap; overflow: hidden; color: white; padding-left: 10px;}
.css-typing p:nth-child(1) {width: 46em; -webkit-animation: type 2s steps(40, end); animation: type 2s steps(40, end); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.css-typing p:nth-child(2) {width: 50em; opacity: 0; -webkit-animation: type2 2s steps(40, end); animation: type2 2s steps(40, end); -webkit-animation-delay: 2.1s; animation-delay: 2.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.css-typing p:nth-child(3) {width: 46em; opacity: 0; -webkit-animation: type2 2s steps(40, end); animation: type2 2s steps(40, end); -webkit-animation-delay: 4.1s; animation-delay: 4.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.css-typing p:nth-child(4) {width: 32em;opacity: 0; -webkit-animation: type2 2s steps(40, end); animation: type2 2s steps(40, end); -webkit-animation-delay: 6.1s; animation-delay: 8.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.css-typing p:nth-child(5) {width: 43em; opacity: 0; -webkit-animation: type2 2s steps(40, end); animation: type2 2s steps(40, end); -webkit-animation-delay: 8.1s; animation-delay: 10.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.css-typing p:nth-child(6) {width: 40em; opacity: 0; -webkit-animation: type2 2s steps(40, end); animation: type2 2s steps(40, end); -webkit-animation-delay: 10.1s; animation-delay: 12.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.css-typing p:nth-child(7) {width: 36em;opacity: 0; -webkit-animation: type2 2s steps(40, end); animation: type2 2s steps(40, end); -webkit-animation-delay: 12.1s; animation-delay: 14.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
.css-typing p:nth-child(8) {width: 36em; opacity: 0; -webkit-animation: type2 2s steps(40, end); animation: type2 2s steps(40, end); -webkit-animation-delay: 14.1s; animation-delay: 16.1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;}
#extras_window {height: 400px; width: 500px; top: 45%; right: 10%;  background: #384272}
#extras_window_content {height: 490px; width: 375px; padding: 10%; }
#extras_window_content button {position: fixed; padding: 5%; width: 80px;}
#extras_window_content button:hover {transform: rotate(5deg); cursor: pointer;}

.trash_container {display:grid;grid-template-columns:auto auto auto auto;grid-template-rows:100px 100px;justify-content:center;grid-gap:15px}
.trash_container > div {text-align:center;height:90px;width:90px;display:flex;object-fit:contain}
.trash_container img {height: 90px;}



#mia2 { width: 100%; max-width: 300px; max-height: 275px; height: 80%; top: 5%; left: 5%; background: url('../src/desktop_items/mia.jpg'); background-size: cover;}
#mia3 {width: 90%; max-width: 400px; max-height: 250px; top: 20%; left: 10%; background: url('../src/desktop_items/miame.jpg'); background-size: cover;}

/* Finder Window CSS ---------------------------------------------------------------------------------------------------- */
#finder_window {height: 75%; bottom: 12.5%;  width: 95%; max-width: 1000px; max-height: 750px; overflow: hidden;}
#finder_window .window_closebar {border-bottom: none;}
.slide_container { height: calc(100% - 120px); margin: 25px;  }
.slide_image {width: 100%; height: 80%;  }
.slide_image img { height: 90%;  width: auto; max-height: 500px; margin: 25px; -webkit-box-shadow: 2px 2px 6px -3px rgba(0,0,0,0.75);-moz-box-shadow: 2px 2px 6px -3px rgba(0,0,0,0.75);box-shadow: 2px 2px 6px -3px rgba(0,0,0,0.75); -webkit-animation:fade-in .25s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in .25s cubic-bezier(.39,.575,.565,1.000) both}
.slideshow_btn { position: absolute; top: 75px; width: 35px;  height: calc(100% - 250px);  font-size: 72px; cursor: pointer;  color: #2f335c; background: #c6cadf;}
.slideshow_btn:hover {transform: scale(1.1); color: #707Ba5;}
.mySlides {min-width: 100%; min-height: 100%;  display: flex; justify-content: center; text-align: center;}
.slide_caption_wrapper {margin: auto; left: 25px; right: 25px; bottom: 100px; background: #c6cadf; font-family: 'GreycliffCF-Thin', sans-serif !important; position: absolute; height: 100px;  z-index: 2; }
.slide_caption {font-family: 'GreycliffCF-ThinOblique', sans-serif; text-align: center;  margin: 0px; padding: 5px; font-size: 0.9rem;}
.slide_caption_wrapper p {margin: 8px 0px 0px 0px;}
.case_study_btn {position: absolute; width: 150px !important; z-index: 3000; height: unset !important; box-shadow: none !important; margin: -33px 0px 0px -22px;}
.case_study_btn:hover {transform: scale(1.05); cursor: alias;}
.finder_carousel{background: #707BA5; box-shadow: 0px -4px 7px gray; border-top: 1px solid #2f335c; width: 100%; height: 100px; position: absolute; bottom: 0; display: flex;  align-items: center; overflow-y: hidden; overflow-x: scroll;}
.finder_carousel img {height: 80px; border: 1px solid #2f335c; box-shadow: 2px 2px 2px black; background: none; }
.finder_carousel button {padding: 20px; outline: none; border: none; cursor: pointer; }
.finder_carousel button:focus {transform: scale(1.3);}


/* Case Studies Window CSS --------------------------------------------------------------------------- */
.artboard{height: 500px; padding: 50px; }
.case {width: 100%; max-width: 1100px; height: calc(100% - 200px); top: 50px; background-color: #ececec; overflow: auto;}
.artboard img {  margin: 0% 1% 1% 0%;}

.caption {font-family: 'GreycliffCF-ThinOblique', sans-serif; text-align: center; margin: 1% 0px 100px 0px; font-size: 1rem; }
.artboard_bottom {margin-top: 100px; margin-bottom: 50px;}
.artboard_bottom p {text-align: center; padding: 0px 30px 0px 30px} 
.artboard_button {width: 50%; background: #2f335c !important; color: white; border: none; padding: 15px; margin-top: 7%; margin-bottom: 20px;}
.artboard_button a{color: white!important; text-decoration: none; }
.artboard_button:hover {background-color: #384272!important; cursor: pointer;}
.bob_motu img {width: 50%; vertical-align: middle;}
.artboard_navigation {width: 100%; height: 50px; display: flex; justify-content: center; padding: 50px 0px;}
.case_nav_button h6 {color: black !important; font-size: 1rem; }
.case_nav_button h6:hover {color: gray!important;}
.artboard_column {float: left; width: 100%; }
.artboard_columnthird {float: left; right: 0; margin: 0px 25px 50px 0px; width: 100%;}
.artboard_columntwothird {float: left; right: 0; margin: 0px; width: 100%;}
.artboard_columnfifty {float: left; right: 0; margin: 0px; width: 100%;}
.overlap_img { transform: translateX(0px); width: 100%!important; }
#tlgs_section_h3 {margin: 0px 0px 50px 0px}
#tlgs_section_h3 h3 {margin-top: 25px;}
.artboard_columnthird p {margin-top: 0px; margin-bottom: 0px;}
.artboard a {font-family: 'GreycliffCF-DemiBold', sans-serif; color: black; font-size: 1rem;  }
.artboard a:hover {color: gray;  }
.wf_poster {display: table-cell; vertical-align: middle; padding-right: 1%;}
.wf_poster img {max-width: 100%;}
.wf_tri_poster_container {display: table; width: 100%; white-space: nowrap; height: 100px;}
.project_h1 {line-height: 45px;}
.tincture {width: 100%; }
#tribal_sketch {height: 550px; width: 99%;}
#tribal_shirt {height: 550px;}
.tf_product img{height: 320px; width: 100%;}
.tf_product {width: calc((100% / 3)); height: 320px; float: left;}
.mobile_tincture {display: none;}


@media screen and (min-width: 1100px ) {
  .artboard_columnthird{ width: 30%; margin-right: 2%; }
  .artboard_columntwothird {right: 0; width: 66%;} 
  .overlap_img { transform: translateX(-40px)!important;}
  .artboard_columnfifty {float: left; right: 0; margin: 0px; width: 50%;}
  .caption {text-align: left;}
  .tlgs_section_h3 {margin: 0px 0px 50px 50px}
  .tlgs_section_h3 h3 {margin-top: 0px;}

}

@media screen and (min-width: 800px ) {
  .artboard_columnfifty {float: left; right: 0; margin: 0px; width: 50%;}
  .tlgs_flex_text {margin-left: 25px;}
  
}




@media screen and (min-width: 1000px) {
  .artboard_response_row {display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; padding: 0 4px;}
  .artboard_response_column {-ms-flex: 50%; /* IE10 */ flex: 50%; max-width: 50%; padding-right: 1%}
  .artboard_response_column img {margin: 2% 2% 0% 0%; vertical-align: middle; width: 100%;}

   
}

/* MOBILE QUERY  */

.mobile_reveal {display: none;}

@media screen and (max-width: 500px) {
  body {overflow-y: hidden; width: 100vw; height: 100vh;}
  .window {top: 50px; left: 2px; width: 100vw;}
  #logo {max-width: 325px !important; width: 35%;}
  #finder_window {height: calc(100% - 150px);  top: 40px; }
  #finder_carousel {display: none;}
  .artboard {padding: 30px 25px;}
  .case {width: 98%; height: calc(100% - 142px); top: 42px;}
  h1 {font-size: 36px;}
  h3 {font-size: 24px;}
  .mobile_hide {display: none;}
  .mobile_icon_container {display: block !important;}
  #tlgs_footer {margin-top: 25px;}
  .slide_caption_wrapper {bottom: 15px; width: 90%;}
  .slide_image {height: 70%; width: auto; display: flex; justify-content: middle;}
  .slideshow_btn {height: calc(100% - 100px); top: 20px;}

  #about_window {
    max-height: calc(100% - 100px);
  }

  #mobile_dock_container {display: block !important;}
  .window {top: 38px;}
  #photo_viewer{ top: 65px !important;}
  #mobile_wifi {display: block; float: right;}
  .mobile_column {padding-left: 0!important;}
  .photo_frame {margin-top: 25px;}
  .photo_carousel {bottom: -5px;}
  .photo_frame img{max-height:700px; height:80%; width:100%; object-fit:cover;}
  .tincture {display: block; width: 90%; margin-left: 5% !important;}
  #ct_portrait {margin-top: 175px;}
  #docs_col_1 {order: 0;}
  #docs_col_2 {display: none;}
  #tribal_sketch {width: 100%; height: auto; }
  #tribal_shirt {width: 100%; height: unset;}
  #docs_screenshot_hide {display: none;}
  .tf_product{width: 100%; height: auto;}
  .mobile_tincture {display: block!important;}
}


@keyframes type {0% {width: 0;} 99.9% {border-right: .15em solid #c6cADF;} 100% {border: none;}}
@keyframes type2 {0% {width: 0;} 1% {opacity: 1;} 99.9% {border-right: .15em solid #c6cADF;} 100% {opacity: 1; border: none;}}
@keyframes blink {50% {border-color: transparent;}}
@-webkit-keyframes blink {50% {border-color: tranparent;}}
@keyframes typing {from { width: 0;}to {width: 100%;}}
@-webkit-keyframes slide-in-fwd-center{0%{-webkit-transform:translateZ(-1400px);transform:translateZ(-1400px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slide-in-fwd-center{0%{-webkit-transform:translateZ(-1400px);transform:translateZ(-1400px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
.fade-out{-webkit-animation:fade-out .25s ease-out both;animation:fade-out .25s ease-out both}
@-webkit-keyframes fade-out{0%{opacity:1}100%{opacity:0}}@keyframes fade-out{0%{opacity:1}100%{opacity:0}}
.fade-in{-webkit-animation:fade-in .25s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in .25s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in{0%{opacity:0.5}25%{opacity:0.62}50%{opacity:0.74} 75% {opacity:0.86}100%{opacity:1}}@keyframes fade-in{0%{opacity:0.5}25%{opacity:0.62}50%{opacity:0.74} 75% {opacity:0.86}100%{opacity:1}}
.fade-out2{-webkit-animation:fade-out2 .25s cubic-bezier(1.000, 0.565, 0.575, 0.39) both; animation:fade-out2 .25s cubic-bezier(1.000, 0.565, 0.575, 0.39) both}
@-webkit-keyframes fade-out2{0%{opacity:1}25%{opacity:0.8}50%{opacity:0.6}100%{opacity:0.5}}@keyframes fade-out2{0%{opacity:1}25%{opacity:0.8}50%{opacity:0.6}100%{opacity:0.5}}
@keyframes fadeInFromNone {0%, 100% {opacity: 1;} 25%, 75% {opacity: 0.5;} 12.5%, 62.5% {opacity: 0.25;} 50% {opacity: 0.1;} }
.slide-in-right{-webkit-animation:slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-right .5s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}
@keyframes rotateStars {0%, 100% {transform: translateY(0);}50% {transform: translateY(-15px);}}
.bounce {-moz-animation: bounce 3s infinite; -webkit-animation: bounce 3s infinite; animation: bounce 3s infinite;}
@-moz-keyframes bounce {0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0); transform: translateY(0);} 40% {-moz-transform: translateY(-30px); transform: translateY(-30px);} 60% { -moz-transform: translateY(-15px); transform: translateY(-15px);}}
@-webkit-keyframes bounce {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);transform: translateY(-30px);} 60% {-webkit-transform: translateY(-15px); transform: translateY(-15px);}}
@keyframes bounce {0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);} 40% {-moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px);} 60% {-moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px);}}
@-webkit-keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
.slide-in-top{-webkit-animation:slide-in-top 1s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-top 1s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes flip-2-hor-top-1{0%{-webkit-transform:translateY(0) rotateX(0);transform:translateY(0) rotateX(0);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{-webkit-transform:translateY(-100%) rotateX(-180deg);transform:translateY(-100%) rotateX(-180deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}@keyframes flip-2-hor-top-1{0%{-webkit-transform:translateY(0) rotateX(0);transform:translateY(0) rotateX(0);-webkit-transform-origin:50% 0;transform-origin:50% 0}100%{-webkit-transform:translateY(-100%) rotateX(-180deg);transform:translateY(-100%) rotateX(-180deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
.scale-in-center{-webkit-animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
.scale-up-bl{-webkit-animation:scale-up-bl 1s cubic-bezier(.39,.575,.565,1.000) both;animation:scale-up-bl 1s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes scale-up-bl{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 100%;transform-origin:0 100%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 100%;transform-origin:0 100%}}@keyframes scale-up-bl{0%{-webkit-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:0 100%;transform-origin:0 100%}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 100%;transform-origin:0 100%}}
.blink-1{-webkit-animation:blink-1 5s infinite backwards; animation:blink-1 5s infinite backwards}
@-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0.25}}@keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0.25}}
.slide-in-fwd-center{-webkit-animation:slide-in-fwd-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-fwd-center .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-in-fwd-center{0%{-webkit-transform:translateZ(-1400px);transform:translateZ(-1400px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slide-in-fwd-center{0%{-webkit-transform:translateZ(-1400px);transform:translateZ(-1400px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
.slide-in-fwd-bottom{-webkit-animation:slide-in-fwd-bottom .4s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-fwd-bottom .4s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-in-fwd-bottom{0%{-webkit-transform:translateZ(-1400px) translateY(800px);transform:translateZ(-1400px) translateY(800px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}@keyframes slide-in-fwd-bottom{0%{-webkit-transform:translateZ(-1400px) translateY(800px);transform:translateZ(-1400px) translateY(800px);opacity:0}100%{-webkit-transform:translateZ(0) translateY(0);transform:translateZ(0) translateY(0);opacity:1}}
.slide-in-bck-center{-webkit-animation:slide-in-bck-center .7s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bck-center .7s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-in-bck-center{0%{-webkit-transform:translateZ(600px);transform:translateZ(600px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes slide-in-bck-center{0%{-webkit-transform:translateZ(600px);transform:translateZ(600px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

.scale-in-center{-webkit-animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}

/* MOBILE CSS */



.mobile_homepage {
  height: 100vh;
  width: 100vw;
  background-image: url('../src/splash+contexts/rainbow.svg');
  background-size: contain; background-repeat: no-repeat;  background-color: #2E345B;
  top: 40px;
  z-index: 1000000;
  position: fixed; 
  left: 0;
  
  
  
}

.mobile_homepage_context {position: absolute; width: 100%; height: 90%; display: flex; align-items: center; justify-content: center;}
#mobile_logo {height: 45%; max-width: 210px;  animation: rotateStars 15s infinite; position: absolute; z-index: 3; }
#mobile_moto {height: 100%;  max-height: 700px; width: 95%; max-width: 430px; }
.mobile_time {width: 100%; font-size: 75px; color: white;  position: absolute;  }
.mobile_toolbar {
  width: 100%; 
  height: 40px; 
  text-align: center;
  position: absolute; 
  top: 0; 
  color: white;
  padding-top: 5px;
  background: #2c2c2c; 
}

.mobile_time {
  position: absolute; 
  top: 30px; 
  text-align: center;
  width: 100%;
  
}

#mobile_time {font-size: 5rem!important; font-family: 'GreycliffCF-Thin', sans-serif !important; line-height: 75px;}
.unlock_mobile {
  position: fixed;
  width: 100%; 
 
  background: #2c2c2c; 
  height: 50px;
  margin: 0px auto;
  bottom: 0;
  
}
.unlock_slide_container {border: 1px solid gray; border-radius: 5px; margin: 10px; height: 30px; text-align: center;}
#unlock_container {height: 100px; width: 100%; bottom: 0; position: absolute; display: flex; justify-content: center; align-items: center;}

#unlock_btn {position: absolute; color: white; left: 10px; background: rgba(198,202,223,.45); padding: 5px 30px; border-radius: 5px;}
#unlock_text {animation:blink-1 10s infinite backwards}