/*
* Slidetrack CSS V1.0.0
* Copyright 2019, Daniel Lathrop
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 1/1/2019
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Import Skeleton framework
- Override fonts
- Create slide setup similar to container
- Media queries
*/


/* Framework
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import "Skeleton-2.0.4/css/normalize.css";
@import "Skeleton-2.0.4/css/skeleton.css";


/* fonts 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@import "fonts/GlacialIndifference/font.css";


/* Overide Skeleton font settings
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body {
  font-family: "Glacial Indifference", "GlacialIndifference", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-size: 20%;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

header, .controllers {
  position: absolute;
  height: 100px;
  text-align: right;
  z-index: 100;
  right: 20px;
  opacity: 0.5;
  width: 100%;

}

#minimize, #maximize {
  position: absolute;
  left: 3rem;
  top: 0rem;
}


header:hover, footer:hover {
  opacity: 1.0;
}

header a:hover {
  color: darkgrey;
}
header a {
  color: lightgrey;
}
.controllers {
  font-size: 3rem;
}

footer {
  z-index: 100;
  opacity: 1.0;
  display: block;
  position: absolute;
  top: calc(100vh - 100px);
  width: 100%;
  height: 100px;
  opacity: 0.25;
}
article {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  /* background: url(powered-by-slidetrack.png) center no-repeat; */
  background-size: 20vh;

}
/* Slide setup
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.slides section {
  opacity: 0.0;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 3rem;
  box-sizing: border-box;
  overflow: hidden;
  display:                 flex; 
  display:                 -webkit-flex; /* Safari 8 */
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;        /*  Safari 8 */
  justify-content:         baseline;
  background-color: whitesmoke;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  flex-direction: column;
  text-align: left;
  flex-grow: 1;
  padding-bottom: 72px;
}
.slides h1, .slides h2, .slides h3, .slides h4, .slides h5{
  width: 100%;
  text-align: center;
  flex-grow: 0;
  margin-top: -1rem;
  margin-bottom: 0rem;
}


.slides h2, .slides h3, .slides h4, .slides h5 {
  font-weight: 300;

}

.slides h1 {
  font-weight: 600;
}

.slides p {
  text-align: left;
  max-width: 60rem;
  margin: auto;
  flex-grow: 0;

}

.slides div {
  margin: auto;
}

.hide {
  display: none;
}


.slides div.photo {
  flex-grow: 2;
  background: no-repeat center/contain;
  width: 100%;
  max-height: 80%;
  margin: auto;
  filter: drop-shadow(0.5rem 0.5rem 0.5rem lightgrey) drop-shadow(-0.5rem -0.5rem 0.5rem lightgrey)
}

.slides div.photo img {
display: none;
}



.column {
  margin: 0 auto 0 auto;
}

.slides .column {
  margin: auto auto auto auto;
}




/* Self Clearing  */
.slides section:after,
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Deal with small windows
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Really small windows, screens (like an iPhone 5 in landscape mode)
   will shrink the content. If either dimension is 320px or under */

@media (max-width: 399px) {
  header, .controllers {
    height:50px;
    font-size: 2rem;
  }

  .slides section {
    padding-top: 20px;
  }


}



/* Media queires
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}