/**
 * CSS3 Grid Template
 * Misty Poarch
 */
@charset "UTF-8";
/************************************************Mobile first Approach*/
html,
html * {
  padding: 20;
  margin: 20;
  box-sizing: border-box;
  font-family: Apercu, Futura, Brandon Grotesque, GT America, "sans-serif";
}
body {
  margin-left: auto;
  margin-right: auto;
  padding-right: 25px;
  padding-left: 25px;
}
body#crew {
  background: url("https://waltercrump.iugraphicarts.com/des248/blu-sky.jpg");
  background: cover;
}
body#services {
  background: url("https://waltercrump.iugraphicarts.com/des248/color.jpg");
  background: cover;
}
body#gallery {
  background: url("https://waltercrump.iugraphicarts.com/des248/beautiful.jpg");
  background: cover;
}
body#contact {
  background: url("https://waltercrump.iugraphicarts.com/des248/green.jpg");
  background: cover;
}
body#index {
  background: url("https://waltercrump.iugraphicarts.com/des248/animal.jpg");
  background: cover;
}
header img {
  display: grid;
  justifcontent: center;
  margin-left: auto;
  margin-right: auto;
}
nav ul {
  list-style-type: none;
}
nav li {
  text-align: center;
  padding-bottom: 10px;
}
nav li a {
  text-decoration: none;
  color: #ffff66;
}
.banner {
  background-image: url(/images/homepage-banner-mobile.jpg);
  background-size: cover;
  background-position: center;
  padding: 20px 20px 50px 20px;
  color: 99ccff;
  text-align: center;
  background-color: ff9933;
}
.banner h1 {
  padding-bottom: 50px;
  padding-top: 250px;
}
.button {
  border: 2px #ffffff solid;
  padding: 8px 30px;
  border-radius: 30px;
  color: ffff33;
  text-decoration: none;
}
.info-box-tan {
  background-color: #ffff66;
  color: black;
  padding: 30px 20px 60px;
  text-align: center;
}
.info-box-tan p {
  padding-bottom: 50px;
}
.info-box-dark {
  background-color: #ffff66;
  color: black;
  padding: 30px 20px 60px;
  text-align: center;
}
.info-box-dark p {
  padding-bottom: 50px;
}
.gallary img {
  width: 100%;
}
footer {
  padding: 20px 30px;
  background-color: #ffff33;
  text-align: center;
}
footer img {
  padding-right: 20px;
}
.socialMedia {
  text-align: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-bottom: 20px;
}
/************************************************service page CSS Mobile View*/
.sBanner {
  background-image: url(/images/fileName.jpg);
  background-size: cover;
  background-position: center;
  padding: 20px 20px 50px 20px;
  color: #ffff66;
  text-align: center;
  background-color: green;
  background-color: #009900;
  text-shadow: 0 0 20px rgba(0,0,0,.18);
  border-radius:60px;
}
}
.sBanner .h3Bigger {
  font-size: 1.5em;
  padding-top: 50px;
  padding-bottom: 150px;
}
.s-info-box-tan {
  background-color: #ffff66;
  color: black;
  padding: 30px 20px 60px;
  text-align: center;
  display: grid;
  grid-template-row: 0.25fr 0.25fr 0.25fr 0.25fr 0.15fr;
  grid-template-columns: 0.5fr 0.5fr;
}
.s-info-box-tan h2 {
  display: grid;
  grid-area: 1/span 2;
}
.s-info-box-tan .topP {
  display: grid;
  grid-area: 2/span 2;
  text-align: left;
  padding-bottom: 50px;
}
.s-info-box-tan .leftList {
  display: grid;
  grid-area: 3/1;
}
.s-info-box-tan .rightList {
  display: grid;
  grid-area: 3/2;
}
.s-info-box-tan .sContact {
  display: grid;
  grid-area: 5/span 2;
  text-align: center;
}
.s-info-box-tan .bottomP {
  display: grid;
  grid-area: 4/span 2;
  text-align: left;
  padding-top: 70px;
}
/******************************gallery page CSS Mobile View*/
.gBanner {
 background-color: green;
 text-align: center;
 margin-bottom: 20px;
 text-shadow: 0 0 20px rgba(0,0,0,.18);
 border-radius:60px;

}
.gBanner h1 {
  color: #ffff66;
  padding: 10px 10px;
}
.gImg1 img {
  background-color: red;
  width: 100%;
}
.gImg2 img {
  background-color: blue;
  width: 100%;
}
.gImg3 img {
  background-color: purple;
  width: 100%;
}
.gImg4 img {
  background-color: yellow;
  width: 100%;
}
.gImg5 img {
  background-color: orange;
}
.gImg6 img {
  background-color: yellow;
  width: 100%;
}
.gImg7 img {
  background-color: blue;
}
.gImg8 img {
  background-color: red;
  width: 100%;
}
.gallery {
  /*border: 1px solid #ccc;*/
}

.gallery:hover {
  border: 1px solid #777;
}

.gallery img {
  width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

/************************************************crew page CSS Mobile View*/
.cBanner {
 background-color: #009900;
 text-align: center;
 margin-bottom: 20px;
 text-shadow: 0 0 20px rgba(0,0,0,.18);
 border-radius:60px;
}
.cBanner h1 {
  color: #ffff66;
  padding: 10px 10px;
}
.ownerImage {
  width: 200%;
  background-color: red;
}
.aboutDave img {
  width: 100%;
}
.dave {
  background-color: green;
  padding: 15px;
  line-height: 200%;
}
.about {
  background-color: green;
  padding: 15px;
  line-height: 200%;
}
.crewImage {
  width: 100%;
  background-color: #ffff66;
  
}
.crewList {
  background-color: green;
  padding: 15px;
  line-height: 300%;
}
/************************************************Contact Page CSS View Mobile View*/
.ctBanner {
  background-color: #009900;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 0 20px rgba(0,0,0,.18);
  border-radius:60px;
}
.ctBanner h1 {
  color: #ffff66;
  padding: 10px 10px;
  margin-top: 20px;
}
.contactBackground {
  background-image: url(/images/fileName.jpg);
  background-size: cover;
  background-position: center;
  padding: 30px 50px 50px 50px;
  color: #ffffff;
  background-color: brown;
  line-height: 200%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 20% 60% 10%;
}
.openingCopy {
  display: grid;
  grid-area: 1/1;
}
.contactForm {
  display: grid;
  grid-area: 2/1;
}
.information {
  display: grid;
  grid-area: 3/1;
}
.contact {
  display: grid;
  grid-template-columns: 50px 1.975fr;
  grid-template-rows: repeat(2, 1.25fr);
  grid-gap: 30px;
}
.openingCopy {
  display: grid;
  grid-area: 1/span 2;
}
.nameLabel {
  display: grid;
  grid-area: 2/1;
}
.name {
  display: grid;
  grid-area: 2/2;
}
.emailLabel {
  display: grid;
  grid-area: 3/1;
}
#email {
  display: grid;
  grid-area: 3/2;
}
.phoneLabel {
  display: grid;
  grid-area: 4/1;
}
#phone {
  display: grid;
  grid-area: 4/2;
}
.checkbox {
  display: grid;
  grid-area: 5/ span 2;
}
.checkbox input {
  display: inline-block;
}
.commentsLabel {
  display: grid;
  grid-area: 6/span 2;
}
#comments {
  display: grid;
  grid-area: 7/span 2;
}

/************************************************Tablet View*/
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-rows: [header] 0.15fr [banner].45fr [row3] 0.25fr [row4] 0.5fr [footer] 0.15fr;
    grid-template-columns: repeat(2, 0.5fr);
    grid-gap: 20px;
  }
  header {
    display: grid;
    grid-row: header;
    grid-column: span 2;
  }
  nav {
    text-align: center;
    padding-top: 25px;
  }
  nav li {
    display: inline;
    text-align: center;
    margin-right: 30px;
  }
  .banner {
    background-image: url(/images/homepage-banner-tablet.jpg);
    display: grid;
    grid-row: banner;
    grid-column: span 2;
  }
  .banner .button {
    width: 150px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
  }
  .gallary {
    display: grid;
    grid-row: row4;
    grid-column: span 2;
    grid-template-rows: 0.25fr 0.25fr;
    grid-template-columns: 0.5fr 0.5fr;
    grid-gap: 20px;
  }
  .img1 {
    background-color: red;
    display: grid;
    grid-area: 1/1;
  }
  .img2 {
    background-color: blue;
    display: grid;
    grid-area: 1/2;
  }
  .img3 {
    background-color: yellow;
    display: grid;
    grid-area: 2/1;
  }
  .img4 {
    background-color: purple;
    display: grid;
    grid-area: 2/2;
  }
  footer {
    display: grid;
    grid-row: footer;
    grid-column: span 2;
  }
  /************************************************services page CSS Tablet View*/
  .sBanner {
    background-image: url(/images/fileName.jpg);
    display: grid;
    grid-row: banner;
    grid-column: span 2;
  }
  /*************************************gallery page CSS*/
  .galleryContainer {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    grid-gap: 0px;
  }
  .gBanner {
    dispaly: grid;
    grid-row: banner;
    grid-column: span 1;
  }
  .gImg1 {
    dispaly: grid;
    grid-row: row3;
    grid-column: 1;
  }
  .gImg2 {
    dispaly: grid;
    grid-row: row3;
    grid-column: 2;
  }
  .gImg3 {
    dispaly: grid;
    grid-row: row4;
    grid-column: 1;
  }
  .gImg4 {
    dispaly: grid;
    grid-row: row4;
    grid-column: 2;
  }
  .gImg5 {
    dispaly: grid;
    grid-row: row5;
    grid-column: 1;
  }
  .gImg6 {
    dispaly: grid;
    grid-row: row5;
    grid-column: 2;
  }
  .gImg7 {
    dispaly: grid;
    grid-row: row6;
    grid-column: 1;
  }
  .gImg8 {
    dispaly: grid;
    grid-row: row6;
    grid-column: 2;
  }
  /************************************************crew page CSS Tablet View*/
  .crewContainer {
    display: grid;
    grid-template-rows: [header] 0.1fr [banner].15fr [row3] 0.25fr [row4] 0.25fr [row5] 0.5fr [footer] 0.15fr;
    grid-template-columns: repeat(2, 0.5fr);
    grid-gap: 20px;
  }
  .cBanner {
    display: Grid;
    grid-row: banner;
    grid-column: span 2;
  }
  .aboutDave {
    display: grid;
    grid-row: row3;
    grid-column: span 2;
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-rows: 1fr;
    grid-gap: 20px;
  }
  .ownerImage {
    width: 100%;
    display: grid;
    grid-area: 1/1;
  }
  .dave {
    display: grid;
    grid-area: 1/2;
    padding-bottom: 50px;
  }
  .about {
    display: grid;
    grid-row: row4;
    grid-column: span 2;
  }
  .crewImage {
    background-color: red;
    display: grid;
    grid-row: row5;
    grid-column: 1;
  }
  .crewList {
    display: grid;
    grid-row: row5;
    grid-column: 2;
  }
  /************************************************contact page CSS Tablet View*/
  .contactBackground {
    background-image: url(/images/fileName.jpg);
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-rows: 0.4fr 0.6fr;
    grid-gap: 20px;
  }
  .openingCopy {
    display: grid;
    grid-area: 1/span 2;
  }
  .contactForm {
    display: grid;
    grid-area: 2/1;
  }
  .information {
    display: grid;
    grid-area: 2/2;
  }
  .information h3 {
    line-height: 200%;
  }
}
/************************************************Desktop View */
@media (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-rows: [header] 0.15fr [banner].45fr [row3] 0.25fr [row4] 0.5fr [footer] 0.15fr;
    grid-template-columns: repeat(4, 0.25fr);
    grid-auto-flow: dense;
  }
  header {
    display: grid;
    grid-area: header/span 4;
    grid-template-columns: 0.5fr 0.5fr;
  }
  header img {
    display: grid;
    grid-area: 1/1;
    justify-content: center;
    margin-right: 0px;
    margin-left: 0px;
  }
  nav {
    display: grid;
    grid-area: 1/2;
    justify-content: center;
    align-content: center;
  }
  nav li {
    display: inline-block;
    padding-right: 20px;
  }
  .banner {
    background-image: url(/images/homepage-banner-desktop.jpg);
    display: grid;
    grid-row: banner;
    grid-column: span 4;
  }
  .button {
    width: 150px;
    height: 40px;
    margin-right: auto;
    margin-left: auto;
  }
  .info-box-tan {
    display: grid;
    grid-row: row3;
    grid-column: span 2;
  }
  .info-box-dark {
    display: grid;
    grid-row: row3;
    grid-column: span 2;
  }
  .gallary {
    display: grid;
    grid-row: row4;
    grid-column: span 4;
    grid-template-rows: 0.25fr;
    grid-template-columns: 0.25fr 0.25fr 0.25fr 0.25fr;
  }
  .img1 {
    display: grid;
    grid-area: 1/1;
  }
  .img2 {
    display: grid;
    grid-area: 1/2;
  }
  .img3 {
    display: grid;
    grid-area: 1/3;
  }
  .img4 {
    display: grid;
    grid-area: 1/4;
  }
  footer {
    display: grid;
    grid-column: span 4;
    grid-template-columns: repeat(2, 0.5fr);
  }
  .socialMedia {
    display: grid-inline;
    grid-area: footer/2;
    margin-top: -25px;
  }
  footer p {
    display: grid;
    grid-column: 1;
    text-align: left;
  }
  /************************************************services page CSS desktop View*/
  .sBanner {
    background-image: url(/images/fileName.jpg);
    display: grid;
    grid-row: banner;
    grid-column: span 4;
  }
  .s-info-box-tan {
    display: grid;
    grid-row: row3;
    grid-column: span 2;
  }
  /************************************************gallery page CSS desktop View*/
  .galleryContainer {
    display: grid;
    grid-template-rows: [header] 0.1fr [banner].15fr [row3] 2fr [footer] 0.15fr;
    grid-template-columns: repeat(4, 0.25fr);
    grid-gap: 20px;
  }
  .gBanner {
    display: grid;
    grid-row: banner;
    grid-column: span 4;
  }
  .gallery {
    display: grid;
    grid-row: row3;
    grid-column: span 4;
  }
  /************************************************crew page CSS desktop View*/
  .crewContainer {
    display: grid;
    grid-template-rows: [header] 0.1fr [banner].15fr [row3] 0.5fr [row4] 0fr [footer] 0.15fr;
    grid-template-columns: repeat(4, 0.25fr);
    grid-gap: 20px;
  }
  .cBanner {
    display: grid;
    grid-row: banner;
    grid-column: span 4;
  }
  .aboutDave {
    display: grid;
    grid-row: row3;
    grid-column: 1;
    grid-template-columns: 1fr;
    grid-template-rows: 0.5fr 0.5fr;
  }
  .daveImage {
    display: grid;
    grid-area: 1/1;
    justify-content: stretch;
  }
  .dave {
    display: grid;
    grid-area: 2/1;
  }
  .about {
    display: grid;
    grid-row: row3;
    grid-column: 2;
  }
  .crewImage {
    display: grid;
    grid-row: row3;
    grid-column: 3;
  }
  .crewList {
    display: grid;
    grid-row: row3;
    grid-column: 4;
  }
  /*--------------------------Contact page CSS*/
}

/* gallery css */
$items: 4;
$animation-time: 4s;
$transition-time: .5s;
$scale: 20%;

$total-time: ($animation-time * $items);
$scale-base-1: (1 + $scale / 100%);

.slideshow {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slideshow-image {
  position: absolute;
  width: 70%;
  height: 70%;
  background: no-repeat 50% 50%;
  background-size: big;
  animation-name: kenburns;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: $total-time;
  opacity: 1;
  transform: scale($scale-base-1);

  @for $i from 1 through $items {
    &:nth-child(#{$i}) {
      animation-name: kenburns-#{$i};
      z-index: ($items - $i);
    }
  }
}

@for $i from 1 through $items {
  @keyframes kenburns-#{$i} {
    $animation-time-percent: percentage($animation-time / $total-time);
    $transition-time-percent: percentage($transition-time / $total-time);
    
    $t1: ($animation-time-percent * ($i - 1) - $transition-time-percent / 2);
    $t2: ($animation-time-percent * ($i - 1) + $transition-time-percent / 2);
    @if($t1 < 0%) { $t1: 0%; }
    @if($t2 < 0%) { $t2: 0%; }

    $t3: ($animation-time-percent * ($i) - $transition-time-percent / 2);
    $t4: ($animation-time-percent * ($i) + $transition-time-percent / 2);
    @if($t3 > 100%) { $t3: 100%; }
    @if($t4 > 100%) { $t4: 100%; }

    $t5: (100% - $transition-time-percent / 2);
    $t6: (($t4 - $t1) * 100% / $t5);

    #{$t1} { opacity: 1; transform: scale($scale-base-1); }
    #{$t2} { opacity: 1; }
    #{$t3} { opacity: 1; }
    #{$t4} { opacity: 0; transform: scale(1); }
    
    @if($i != $items) {
      100% { opacity: 0; transform: scale($scale-base-1); }
    }
    
    @if($i == 1) {
      $scale-plus: ($scale * (100% - $t5) / $t4);
      $scale-plus-base-1: (1 + ($scale + $scale-plus) / 100%);
    
      #{$t5} { opacity: 0; transform: scale($scale-plus-base-1); }
      100% { opacity: 1; }
    }
  }
}


// Presentational stuff
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 99;
  text-align: center;
  font-family: Raleway, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  background-color: rgba(255,255,255,.75);
  box-shadow: 0 1em 2em -1em rgba(0,0,0,.5);
  padding: 1em 2em;
  line-height: 1.5;
  
  small {
    display: block;
    text-transform: lowercase;
    font-size: .7em;
    
    &:first-child {
      border-bottom: 1px solid rgba(0,0,0,.25);
      padding-bottom: .5em;
    }
    
    &:last-child {
      border-top: 1px solid rgba(0,0,0,.25);
      padding-top: .5em;
    }
  }
}