/*! HTML5 Boilerplate v9.0.0-RC1 | MIT License | https://html5boilerplate.com/ */
/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */ ::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio, canvas, iframe, img, svg, video {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* typography */
body {
  margin: 0;
  font-size: 1em;
  font-family: 'Michroma', Verdana, Geneva, sans-serif;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */

/* main strucutre */
#container {
	width: 95%;
	height: auto;
	max-width: 3840px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	min-width: 320px; /* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	padding-bottom: 80px;
}
.maintext {
  width: 100%;
  font-size: 9.50vw;
  color: rgba(0, 0, 0, 0.75);
  margin: 0 auto;
  line-height: 1em;
  text-align: left;
	/* The visual effect*/
  background-image: url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMTY1cGNmeDBia21qc3A4b2t1ZWhxMm1ldW5neWRsa3cxOTVreHJ1eSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9LXR6CBvm1UaAPElUC/giphy.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
}
.smalltext {
  width: 100%;
  font-size: 2vw;
  color: rgba(0, 0, 0, 0.75);
  margin: 10px auto;
  line-height: 1em;
  text-align: left;
  white-space: nowrap;	
}
.span_text {
  font-family: 'Michroma', Verdana, Geneva, sans-serif;
  font-size: 1em;
}
.content_block_h2 {
  font-family: 'Didact Gothic', 'Helvetica Neue', Helvetica, Arial, Gotham, sans-serif;
  font-size: 1.5em;
}
.content_block h4 {
	margin-bottom: 0px;
}
.slidein-text{
	transform: translateX(-200%);
	opacity: 0;
	animation: slide-in-anim 1.5s ease-out forwards;
}

.slidein-text-2{
	transform: translateX(-200%);
	opacity: 0;
	animation: slide-in-anim 1.5s ease-out forwards;
	animation-delay: 0.5s;
}

@keyframes slide-in-anim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateX(0%);
	}
}

.slideup-text {
  animation: slide-up-anim 1s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: 1.5s;
}

@keyframes slide-up-anim {
  0% {transform: translateY(100px);opacity:0;}
  100% {transform: translateY(0px);opacity:1;}
}

#nav {
  width: 100%;
  height: 44px;
  background: rgba(255, 255, 255, 0.0);
  position: relative;
  top: 0;
}
#social_media_links {
  height: 44px;
  width: 20%;
  float: right;
  margin: 5px 0px;
  text-align: right;
  position: relative;
  top: 0;
}
#social_media_links .fa {
  font-size: 1em;
}
#social_media_links a {
  width: 44px;
  height: 44px;
  padding: 5px;
  border-radius: 5px;
}
#social_media_links a:hover {
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 1.00);
}
#social_media_icons .fa {
  font-size: 1em;
}
#social_media_icons a {
  width: 44px;
  height: 44px;
  padding: 5px;
  border-radius: 5px;
}
social_media_icons a:hover {
  background: rgba(0, 0, 0, 0.75);
  color: rgba(255, 255, 255, 1.00);
}
#header {
  color: rgba(0, 0, 0, 0.75);
  background: rgba(255, 255, 255, 0.75);
  position: relative;
  clear: both;
}
#image {
  border-radius: 10px;	
  background: url("../images/parallax_bg03_anim.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 100px;
  background-position: center;
  box-shadow: 0px 0px 5px 5px #000000 inset;
}
.profile_image {
	width: 100%;
	height: auto;	
	max-width: 533px;
	margin-top: 30px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.profile_image img {
	width: 100%;
	max-width: 533px;
	height: auto;
	border-radius: 10px;
}
#footer {
	font-size: 1.5vw;
	/*	letter-spacing: .25em;*/
	word-wrap: normal;
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	text-align: center;
	color: rgba(0, 0, 0, 0.75);
	background-color: rgba(255, 255, 255, 0.75);
	padding: 10px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
	white-space: nowrap;
}
.site_header, .site_navigation, .site_footer {
  margin: 0px;
}
.content_block {
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
#demo_video {
	border:solid 1px rgba(0,0,0,1.00);
	border-radius: 5px;
	padding:61.15% 0 0 0;
	position:relative;
	
}
.content_block ol, .content_block p:not(.warningtext) {
  font-family: 'Didact Gothic', 'Helvetica Neue', Helvetica, Arial, Gotham, sans-serif;
  font-size: 1em;
  line-height: 1.5em;
}
.image_block {
  margin: 10px 0px;
}
/* image control */
.image_block img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
/* links control */
a:link {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
a:visited {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.75);
}
a:hover {
  text-decoration: underline;
  color: rgba(0, 0, 0, 0.75);
}
a:active {
  text-decoration: underline;
}

/* Default FA icon style */

.icon-link {
  display: inline-flex;          /* centers icon inside */
  align-items: center;
  justify-content: center;
  width: 48px;                   /* tap-friendly width */
  height: 48px;                  /* tap-friendly height */
  font-size: 24px;               /* icon size */
  color: black;
  background-color: white;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.icon-link:hover {
  color: white;
  background-color: black;
}

@media (min-width:340px){
  .warningtext {
    width: 60%;
    font-size: 1vw;
    color: rgba(0, 0, 0, 0.75);
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    padding: 5px;
    border: thin solid rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    white-space: nowrap;
  }
}
/* grid */
.css_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Disregard the error on this line. The code editor is not sure what 1fr means. */
  grid-template-rows: repeat(6, auto);
  grid-row-gap: 0px;
  grid-column-gap: 0px;
}
#nav {
  grid-area: menu;
}
#header {
  grid-area: header;
}
#image {
  grid-area: image;
}
#content1 {
	grid-area: content1;
}
#content2 {
  grid-area: content2;
}
#footer {
  grid-area: footer;
}
.layout1 {
  grid-template-areas:
    "menu menu menu menu menu menu"
    "header header header header header header"
    "image image image image image image"
    "content1 content1 content1 content2 content2 content2"
    "content1 content1 content1 content2 content2 content2"
    "footer footer footer footer footer footer"
}
@media (max-width:1028px) {
  .layout1 {
    grid-template-areas:
      "menu menu menu menu menu menu"
      "header header header header header header"
      "image image image image image image"
      "content1 content1 content1 content1 content1 content1"
      "content2 content2 content2 content2 content2 content2"
      "footer footer footer footer footer footer"
  }
}
@media (max-width: 390px){
#image {
  border-radius: 10px;
  background-color:#000000;
  background-image: url("../images/parallax_bg02.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  max-width: 1920px;
  min-height: 100px;
  background-position: center;
}
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden, [hidden] {
  display: none !important;
}
/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}
/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visually-hidden.focusable:active, .visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}
/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}
/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */
.clearfix::before, .clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *, *::before, *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a, a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " ("attr(href) ")";
  }
  abbr[title]::after {
    content: " ("attr(title) ")";
  }
  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after, a[href^="javascript:"]::after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  tr, img {
    page-break-inside: avoid;
  }
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }
  h2, h3 {
    page-break-after: avoid;
  }
}