/* Global Styles
====================================*/

* {
  position: relative;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* IE */
@-ms-viewport {
  width: device-width;
}

html {
  font-size: 100%;
}

a
, a:link
, a:visited {
  text-decoration: none;
  color: #000000;
}

/* MAY NOT NEED FOR CODE SNIPPETS */
pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* Global Classes
======================================*/

/* 
Preload
Prevent animations in body until page finishes loading
 - Used to prevent header animation on page load
*/
.preload * {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

.center {
  margin: auto;
  text-align: center;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

.container {
  width: 80%;
  margin: 0 auto;
}



/* Header Elements
======================================*/
/*CHANGE NAME*/
#header {
  position: fixed;
  top: 0;
  z-index: 999;
  height: 5rem;
  width: 100%;
  background-color: white;
  -webkit-box-shadow: -2px 6px 37px -10px rgba(0,0,0,0.61);
  -moz-box-shadow: -2px 6px 37px -10px rgba(0,0,0,0.61);
  box-shadow: -2px 6px 37px -10px rgba(0,0,0,0.61);
  transition-duration: .3s;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

/* Includes collapsible elements */
#header div
, #header ul
, #header li
, #header li a
, #header-collapse li
, #header-collapse li a {
  height: 100%;
  display: inherit;
  align-items: center;
}

#header li:hover
, #header-collapse li:hover {
  background-color: #8AC953;
  transition: all 0.2s ease-in-out;
}

#header li {
  /*padding: 0 .5rem;*/
  width: 5rem;
  transition: all 0.2s ease-in-out;
}

#header li a {
  width: 100%;
  text-align: center;
}

#header.header--opac {
  background-color: rgba(255, 255, 255, 0);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  transition-duration: .3s;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

#header.header--opac a {
  color: #FFFFFF;
}

#header .navCent {
  margin: auto;
}

#header #header_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 80%;
  height: 100%;
}

/* Collapsible Header Elements
===================================*/

#header-collapse {
  color:#FFFFFF;
  font-family:'Open Sans', Helvetica, Arial, sans-serif;
  height:150%;
  width: 35%;
  position:fixed;
  z-index:999;
  background-color:#151515;
  right:0;
}

#header-collapse ul {
  list-style-type: none;
}

#header-collapse li {
  height : 3rem;
  text-align:center;
}

#header-collapse li a {
  color:#FFFFFF;
}

#header-collapse .navCent {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
}

#header-collapse #collapse {
  height: 5rem;
}

#header-collapse #collapse span {
  background-color: #000000;
  float: right;
  height: 2.5rem;
  width: 2.5rem;
  color: white;
  font-size: 1.6rem;
  text-align: center;
  padding-top: .5rem;
}

/* Menu Icons */
#c-menu {
  display: none;
}

#c-menu .fa.fa-bars {
  font-size: 2rem;
}

/* Page Title Area
==========================*/
#page-head {
  margin: 0;
  height: 100vh;
  line-height: 100vh;
  background: #000000 url("../img/horizon.jpg") no-repeat center;
  background-size: cover;
  text-align: center;
  color: #FFFFFF
}

#page-head h1 {
  font-family: "poppins-medium", sans-serif;
  font-size: 7vw;
}

#page-head p {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
}

#page-head p span {
  white-space: nowrap;
}

#page-head p span:first-child::before
, #page-head p span::after {
  content: "|";
  text-align: center;
  display: inline-block;
  color: rgba(255, 255, 255, 0.3);
}

#page-head p span:first-child::before {
    padding: 0 2rem 0 1rem;
}

#page-head p span::after {
    padding: 0 1rem 0 2rem;
}

#page-head.page-head--sub {
  background: #000000;
  height: 70vh;
  line-height: 70vh;
}

/* Transparent overlay */
#page-head__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #111111;
  opacity: .85;
}

#page-head__social-links {
  margin-top: 3rem;
}

#page-head__social-links li {
  display: inline-block;
  margin: 0 1.3rem;
  font-size: 2.3rem;
}

#page-head__social-links li a {
color: #FFFFFF;
transition: all 0.3s ease-in-out
}

#page-head__social-links li a:visited {
color: #FFFFFF;
}

#page-head__social-links li a:hover {
  color: #8AC953;
}

/* Landing Page About Paragraph 
==========================*/

#about {
  font-size: 1.3rem;
  text-align: justify;
  padding-left: 4em;  
}

#about p {
 margin-bottom: 1.2rem;

}

#about > p:first-child {
  text-indent: -4em;    /* Pulls the first line to the left */
}

#about #about-bold {
  font-size: 2.1rem;
}

/* Blog and Project Items
============================*/
.entry__row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.entry__item {
  background-color: #FFFFFF;
  width: 20rem;
  height: 28rem;
  margin-bottom: 6rem;
  font-family: 'Lato', sans-serif;
  -webkit-box-shadow: 5px 9px 20px -4px rgba(0,0,0,0.54);
  -moz-box-shadow: 5px 9px 20px -4px rgba(0,0,0,0.54);
  box-shadow: 5px 9px 20px -4px rgba(0,0,0,0.54);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
}

.entry__item img {
  position: absolute;
  height: 100%;
  margin: auto;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  /*max-height: 100%;
  max-width: 100%;*/
}

.entry__item h3 {
  display: block;
  font-size: 1.6rem;
  margin-bottom: .6rem;
}

.entry__item p {
font-size: 1.1rem;
  /*max-height: 100%;
  max-width: 100%;*/
}

.entry__img {
  width: 100%;
  height: 63%;
  overflow: hidden;
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  text-align: center;
}

.entry__row--last {
  justify-content: space-around;
}

/* Page Section
=======================*/
.sect {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.sect.grey-bg {
  background-color: #F7F7F7;
}

.sect__header {
  font-size: 3.4rem;
  font-weight: 300;
  font-family: 'Dosis', sans-serif;
  text-align: center;
  overflow: hidden;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.sect__header::before, .sect__header::after {
  content: "";
  background-color: #CCCCCC;
  display: inline-block;
  height: 1px;
  position: relative;
  width: 30%;
  vertical-align: middle;
}

/* Entry Pages */
.head-contain {
  width: 100%
}


/* Container
=============================*/
/*MERGE WITH SECT?*/
/*ONLY IN ENTRY AREAS; RENAME*/

.entry-detail {
  padding-top: 10rem;
  padding-bottom: 10rem;
  width: 55rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.entry-detail img {
  width: 100%;
  margin-bottom: 3rem;
}

.entry-detail__head {
  width: 40rem;
  margin: auto;
  margin-bottom: 1.5rem;
}

.entry-detail__head h1 {
  font-size: 4rem;
}

.entry-detail .date-time {
  font-size: 1rem;
}

.entry-detail .date-time-cont {
  margin-bottom: 1rem;
}

.entry-detail .blurb {
  font-style: italic;
  margin-bottom: 3rem;
}

.entry-detail__body {
  text-align: left;
  font-size: 1rem;
  width: 42rem;
  margin: auto;
}

.entry-detail__body > * {
  margin-bottom: 1.5rem;
  font-size: 1.3rem;
  line-height: 1.7rem;
}

.entry-detail__body h2 {
  margin-bottom: 2rem;
}

.entry-detail__body p {
  margin-bottom: 1.5rem;
}

.entry-detail__body li {
  list-style-position: inside;
}

.entry-detail__body a:hover {
  transition: all 0.2s ease-in-out;
  color: #8AC953;
}


/* Project Elements
==========================*/

#pEuler {
  text-align: center;
  margin-bottom: 3rem;
}

#pEuler img {
  width: initial;
}

#proj-git {
  width: 100%;
  text-align: center;
}

#proj-git i {
  font-size: 4rem;
}

#proj-git a {
  transition: all 0.2s ease-in-out;
  text-decoration: underline;
}

#proj-git a:hover {
  color: #8AC953;
  transition: all 0.2s ease-in-out;
}

#proj-git-ico {
  display: block;
}


/* Footer
===============================*/

#footer {
  background-color: #151515;
  color: #999999;
  font-size: 1.1rem;
  height: 3rem;
}

#footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 80%;
  height: 100%;
}

#footer__social-links li {
  display: inline-block;
  margin: 0 .7rem;
}

#footer__social-links li a {
  color: #999999;
  transition: all 0.3s ease-in-out
}

#footer__social-links li a:visited {
  color: #999999;
}

#footer__social-links li a:hover {
  color: #8AC953;
}

#cpy-rt
, #footer__social-links {
  white-space: nowrap;
}

/* Media Queries */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #page-head h1 {
    font-size: 16vw;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  #page-head h1 {
    font-size: 11vw;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 767px) {

  .container {
    width: 95%;
  }

  .entry__item {
    width: 100%;
    height: 100%;
  }

  .entry__item img {
    position: relative;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  #page-head p span {
    display: block;
    font-size: 3.5vw;
  }

  #page-head p span:first-child::before
  , #page-head p span::after {
    content: none;
  }

  #page-head__social-links li {
    font-size: 8vw;
  }

  .sect__header {
    font-size: 7vw;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 992px) {

  .entry-detail
  , .entry-detail__head {
    width: 100%;
  }

  .entry-detail__body {
    width: 90%;
  }

  #c-menu {
    display: block;
  }

  #header_inner ul {
    display: none;
  }
  
  #about {

  padding-left: 0;  
}


#about > p:first-child {
  text-indent: 0;    /* Pulls the first line to the left */
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}