/*
Description:  Timothy Disney's Online Portfolio
Author:       Timothy Disney
Author URI:   https://www.timothydisney.co.uk/
Version:      7.2
*/

/* ---------- Style Sheet ---------- */
/* INDEX:
- Global Formatting
-- Scroll Bar Formatting
-- Item Class Formatting
-- Page Section Formatting
-- Portfolio Gallery Formatting
--- Portfolio Gallery Content
--- Portfolio Gallery Lightbox
--- Contact Form
-- Table Formatting
--- Global Table
- Responsive Formatting
- Print Formatting (see print.css)
- Animations (see animation.css)
*/

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ---------------------------------------------------------- Global Formatting ---------------------------------------------------------- */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

body {
  height: 100%;
  color: #000000;
  padding: 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  font-style: normal;
  background-color: #4a4a4a;
  background-image: url(/images/texture.jpg);
  background-repeat: repeat;
  background-position: center top;
}

@font-face { font-family: century_gothic; src: url(/fonts/century_gothic.ttf);}

a {
  color: #f08143;
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-weight: normal;
  border: 0px;
}
a:hover {
  color: #f08143;
  font-weight: bold;
}

h1 {}
h2 {font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif; font-size: 1.4em; text-transform: uppercase; letter-spacing: 4px; width: 100%; color: #fff; padding: 0px 10px;}
h3 {font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: normal; color: #f08143; margin: 0px;}
h4 {font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif; font-size: 1.4em; text-transform: uppercase; letter-spacing: 4px; width: 100%; color: #fff; padding: 0px 10px;}
h5 {font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; font-weight: normal; color: #adadad; margin: 2px 0px;}

input.formButton {}
img {border: 0px;}

img#logo {
  width: 319px;
  height: 45px;
  padding: 0px;
  margin: 0px;
}
img#soullogo {width: 250px;}



/* ---------------------------------------------------------- Scroll Bar Formatting ---------------------------------------------------------- */

::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}
::-webkit-scrollbar-button:vertical:decrement {
  background-color: #1a1a1a;
  background-image: url(/images/body-scrollup.png);
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-button:vertical:increment {
  background-color: #1a1a1a;
  background-image: url(/images/body-scrolldown.png);
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-color: #1a1a1a;
  background-image: url(/images/body-scrollleft.png);
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-button:horizontal:increment {
  background-color: #1a1a1a;
  background-image: url(/images/body-scrollright.png);
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-corner {
  background-color: #1a1a1a;
  background-image: url(/images/body-sizer.png);
  background-repeat: no-repeat;
  background-position: center center;
}
::-webkit-scrollbar-track {
  background-color: #1a1a1a;
}
::-webkit-scrollbar-thumb {
  background-color: #565656;
  border: 6px solid #1a1a1a;
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}



/* ---------------------------------------------------------- Item Class Formatting ---------------------------------------------------------- */
.slogan {
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  letter-spacing: 2px;
  padding: 0px;
  margin: 0px;
}

.orangetext {
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  color: #f08143;
  margin: 0px;
}

.greytext {
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  font-style: italic;
  color: #ababab;
  margin: 0px;
}

.whisper {
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 11px;
  color: #c8886a;
  margin: 0px;
}

.testimonial-big {
  color: #adadad;
  font-family: Bitter, Georgia, serif;
  font-weight: bold;
  font-size: 30px;
}

.testimonial-med {
  color: #adadad;
  font-family: Bitter, Georgia, serif;
  font-weight: bold;
  font-size: 27px;
}

.testimonial-sml {
  color: #adadad;
  font-family: Bitter, Georgia, serif;
  font-weight: bold;
  font-size: 25px;
}

.testimonial-quot {
  color: #adadad;
  font-family: Bitter, Georgia, serif;
  font-weight: normal;
  font-size: 25px;
}

.author {
  color: #f08143;
  font-size: 12px;
  float: right;
  padding: 10px 0px 0px 0px;
}

.error-alert {
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 2px;
  color: #f08143;
}

.error-info {
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
}



/* ---------------------------------------------------------- Page Section Formatting ---------------------------------------------------------- */
#header {
  width: calc(100% - 200px);
  height: 90px;
  min-height: 90px;
  margin: 0px;
  padding: 0px 100px 25px 100px;
  color: #ffffff;
  border-bottom: 4px solid #1a1a1a;
  background-color: #1a1a1a;
  background-image: url(/images/background.jpg);
   background-repeat: repeat-x;
   background-position: center top;
  display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
}

#folio {padding: 0px;}

#contact {
  width: 100%;
  margin: 0px;
  padding: 0px 0px 50px 0px;
  color: #ffffff;
  background-color: #1a1a1a;
  background-image: url(/images/contact-bg.gif);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1500px;
  overflow: hidden;
}
#contact-body {
  max-width: 1200px;
  margin: 60px auto 0px auto;
  font-size: 15px;
  display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;

}
#contactblurb {
  width: 60%;
  max-width: 60%;
  text-align: left;
  letter-spacing: 0.75px;
  word-spacing: 1.5px;
}
#contactform {
  width: 40%;
  max-width: 40%;
}

#contact-response{
  height: 100%;
  display: flex;
   flex-direction: column;
}

#contact-response-msg {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 50px 0px;
  display: flex;
   gap: 5px;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
}

#testimonials {
  height: 240px;
  margin: 0px;
  padding: 10px 0px;
  background-image: url(/images/background.jpg);
  background-repeat: repeat-x;
  background-position: center top;
  overflow: hidden;
}

#testimonials-title {display: none;}

#testimonials-content {
  width: 35%;
  margin: 0 auto;
  padding: 0px;
  position: relative;
  opacity: 0;
  -webkit-animation-name: testimonial-slider; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  animation-name: testimonial-slider;
  animation-duration: 8s;
  animation-iteration-count: infinite;
}

.review {
  width: 100%;
  position: absolute;
  padding: 25px 0px 0px 0px;
}

#souldisc {
  min-height: 500px;
  margin: 0px;
  padding: 10px 0px;
  background-color: #99ccff;
  background-image: url(/images/souldisc-splash.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

#souldisc-content {
  width: 30%;
  color: #adadad;
  text-align: center;
  margin: 40px 0px 0px 10%;
  padding: 20px 20px 5px 20px;
  font-family: Bitter, Georgia, serif;
  background-color: rgba(20, 29, 39, 0.85);
  border-radius: 12px;
}

#footer {
  width: 100%;
  margin: 0px;
  padding: 10px 0px 20px 0px;
  color: #ffffff;
  background-color: #1a1a1a;
}



/* ---------------------------------------------------------- Portfolio Gallery Formatting ---------------------------------------------------------- */
.folio-gallery {
  width: 100%;
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: relative;
  display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
}
.folio-gallery li {
  width: 16.66%;
  position: relative;
  overflow: hidden;
}
.folio-gallery li a,
.folio-gallery li a img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.folio-gallery li a div {
  position: absolute;
   left: 20px;
   top: 20px;
   right: 20px;
   bottom: 20px;
  text-align: center;
  background: #1a1a1a;
  opacity: 0;
  /* Flexbox is used for centering the heading */
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
   -webkit-align-items: center;
   -moz-align-items: center;
   -ms-align-items: center;
   align-items: center;
  -webkit-transition: opacity 1.2s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: opacity 1.2s ease; /* For Old Firefox */
  -o-transition: opacity 1.2s ease; /* For Old Opera */
  transition: opacity 1.2s ease;
}

.folio-gallery li a:hover div {opacity: 0.8;}

.slider_opener {
  float: left;
  width: 100%;
  height: 100%;
}
.slider_opener:hover {cursor: pointer;}
.slider_closer {
  float: right;
  padding: 10px 25px 0px 0px;
  font-weight: bold;
  -webkit-transition: color 0.3s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: color 0.3s ease; /* For Old Firefox */
  -o-transition: color 0.3s ease; /* For Old Opera */
  transition: color 0.3s ease;
}
.slider_closer:hover {
  cursor: pointer;
  color: #d1700a;
}

.lightbox_opener {}
.lightbox_opener:hover {cursor: pointer;}
.lightbox_opener img {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: opacity 0.4s ease;  /* For Old Firefox */
  -o-transition: opacity 0.4s ease;  /* For Old Opera */
  transition: opacity 0.4s ease;
}
.lightbox_opener:hover img {opacity: 0.5;}

.lightbox_closer {
  float: right;
  padding: 20px 33px 0px 0px;
  font-weight: bold;
  -webkit-transition: color 0.3s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: color 0.3s ease; /* For Old Firefox */
  -o-transition: color 0.3s ease; /* For Old Opera */
  transition: color 0.3s ease;
}
.lightbox_closer:hover {
  cursor: pointer;
  color: #d1700a;
}

.screenslider {
  width: 0px;
  height: 50vh;
  padding: 0px;
  margin: 20vh auto;
  color: #ffffff;
  background-color: rgba(26, 26, 26, 0.85);
  position: fixed;
   top: 0px;
   left: 50%;
  z-index: 10;
  opacity: 0;
  overflow: hidden;
  -webkit-transition:
    width 0.5s ease,
    height 0.75s 0.5s ease,
    background-color 0.6s 0.8s ease,
    left 0.5s ease,
    margin 0.75s 0.5s ease,
    opacity 0.4s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition:
    width 0.5s ease,
    height 0.75s 0.5s ease,
    background-color 0.6s 0.8s ease,
    left 0.5s ease,
    margin 0.75s 0.5s ease,
    opacity 0.4s ease; /* For Old Firefox */
  -o-transition:
    width 0.5s ease,
    height 0.75s 0.5s ease,
    background-color 0.6s 0.8s ease,
    left 0.5s ease,
    margin 0.75s 0.5s ease,
    opacity 0.4s ease; /* For Old Opera */
  transition:
    width 0.5s ease,
    height 0.75s 0.5s ease,
    background-color 0.6s 0.8s ease,
    left 0.5s ease,
    margin 0.75s 0.5s ease,
    opacity 0.4s ease;
}

.screenslider .folio-content, .screenslider .folio-content .folio-blurb {
  opacity: 0;
  -webkit-transition: opacity 0.5s 1.3s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: opacity 0.5s 1.3s ease; /* For Old Firefox */
  -o-transition: opacity 0.5s 1.3s ease; /* For Old Opera */
  transition: opacity 0.5s 1.3s ease;
}

input.foliotoggle {display: none;}
input.foliotoggle:checked + .screenslider {
  width: 100%;
  height: 100vh;
  margin: 0px;
  left: 0px;
  background-color: rgba(26, 26, 26, 0.96);
  opacity: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
input.foliotoggle:checked + .screenslider .folio-content, .screenslider .folio-content .folio-blurb {opacity: 1;}

input.foliotoggle:checked + .screenslider::-webkit-scrollbar {width: 8px;}
input.foliotoggle:checked + .screenslider::-webkit-scrollbar-button:vertical:decrement {
  background-color: #1a1a1a;
  background-image: url(/images/folio-scrollup.png);
  background-repeat: no-repeat;
  background-position: center center;
}
input.foliotoggle:checked + .screenslider::-webkit-scrollbar-button:vertical:increment {
  background-color: #1a1a1a;
  background-image: url(/images/folio-scrolldown.png);
  background-repeat: no-repeat;
  background-position: center center;
}
input.foliotoggle:checked + .screenslider::-webkit-scrollbar-track {display: none;}
input.foliotoggle:checked + .screenslider::-webkit-scrollbar-thumb {
  background-color: #d1700a;
  border: 7px solid #1a1a1a;
  border-width: 6px 0px 6px 0px;
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
}


/* -------------------------------------- Portfolio Gallery Content -------------------------------------- */
.folio-content {
  width: 85%;
  margin: 35px auto 20px auto;
  padding: 10px;
  background-color: #1a1a1a;
  z-index: 20;
}

.folio-multi-row {
  -webkit-column-count: 4;
  -webkit-column-gap: 5px;
  -moz-column-count: 4;
  -moz-column-gap: 5px;
  column-count: 4;
  column-gap: 5px;
}

.folio-single-row {
  display: flex;
   gap: 5px;
   justify-content: flex-start;
   align-items: stretch;
   flex-wrap: nowrap;
}

.folio-blurb {
  text-align: left;
  padding: 0px 20px 5px 20px;
  margin: 0px 0px 5px 0px;
  line-height: normal;
  display: inline-block;
  background-image: url(/images/background.jpg);
   background-repeat: repeat-x;
   background-position: center top;
  flex-basis: 25%;
}

.folio-blurb h2 {padding: 0px;}

img.folio-singleimg {max-width: 250%;}
img.folio-multiimg {
  width: 100%;
  margin: 0px 0px 5px 0px;
  float: left;
}

/* -- Dirty CSS hack to make the column content display correctly in MS Edge -- */
_:-ms-lang(x),
_:-webkit-full-screen,
.folio-content a {
  display: inline-block;
}

/* -------------------------------------- Portfolio Gallery Lightbox -------------------------------------- */
.lightbox {
  width: 0px;
  height: 0px;
  background-color: rgba(26, 26, 26, 0.97);
  z-index: 30;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0;
}

.lightbox-content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.lightbox-image {
  opacity: 0;
  transform: translateY(-2%);
  -webkit-transition: opacity 2s 0.2s ease, transform 0.8s 0.2s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: opacity 2s 0.2s ease, transform 0.8s 0.2s ease; /* For Old Firefox */
  -o-transition: opacity 2s 0.2s ease, transform 0.8s 0.2s ease; /* For Old Opera */
  transition: opacity 2s 0.2s ease, transform 0.8s 0.2s ease;
}

input.lightboxtoggle {display: none;}
input.lightboxtoggle:checked + .lightbox {
  width: 100%;
  height: 100vh;
  opacity: 1;
}
input.lightboxtoggle:checked + .lightbox div {opacity: 1;}
input.lightboxtoggle:checked + .lightbox .lightbox-content {
}
input.lightboxtoggle:checked + .lightbox .lightbox-image {
  opacity: 1;
  transform: translateY(0%);
  max-width: 80%;
}

a.lightbox-leftlink {
  position: absolute;
  top: 50%;
  left: 20px;
}
a.lightbox-rightlink {
  position: absolute;
  top: 50%;
  right: 30px;
}

.lightbox-left-arrow {
  opacity: 0.5;
  -webkit-transition: opacity 0.5s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: opacity 0.5s ease; /* For Old Firefox */
  -o-transition: opacity 0.5s ease; /* For Old Opera */
  transition: opacity 0.5s ease;
}
.lightbox-left-arrow:hover {
  opacity: 1;
  cursor: pointer;
}
.lightbox-right-arrow {
  opacity: 0.5;
  -webkit-transition: opacity 0.5s ease; /* For Safari 3.1 to 6.0 */
  -moz-transition: opacity 0.5s ease; /* For Old Firefox */
  -o-transition: opacity 0.5s ease; /* For Old Opera */
  transition: opacity 0.5s ease;
}
.lightbox-right-arrow:hover {
  opacity: 1;
  cursor: pointer;
}


/* -------------------------------------- Contact Form -------------------------------------- */
#contact-form {
  width: 100%;
  text-align: left;
  display: grid;
    grid-template-columns: min-content auto;
    grid-gap: 5px 0px;
}
#contact-form td {padding: 2px 0px;}

#contact-title-name {grid-column: 1 / 2; grid-row: 1 / 2;}
#contact-field-name {grid-column: 2 / 3; grid-row: 1 / 2;}
#contact-title-email {grid-column: 1 / 2; grid-row: 3 / 4;}
#contact-field-email {grid-column: 2 / 3; grid-row: 3 / 4;}
#contact-title-phone {grid-column: 1 / 2; grid-row: 4 / 5;}
#contact-field-phone {grid-column: 2 / 3; grid-row: 4 / 5;}
#contact-title-website {grid-column: 1 / 2; grid-row: 5 / 6;}
#contact-field-website {grid-column: 2 / 3; grid-row: 5 / 6;}
#contact-title-loc {grid-column: 1 / 2; grid-row: 6 / 7;}
#contact-field-loc {grid-column: 2 / 3; grid-row: 6 / 7;}
#contact-title-subject {grid-column: 1 / 2; grid-row: 8 / 9;}
#contact-field-subject {grid-column: 2 / 3; grid-row: 8 / 9;}
#contact-title-msg {grid-column: 1 / 2; grid-row: 9 / 10;}
#contact-field-msg {grid-column: 2 / 3; grid-row: 9 / 10;}
#contact-title-antispam {grid-column: 1 / 2; grid-row: 11 / 12;}
#contact-field-antispam {grid-column: 2 / 3; grid-row: 11 / 12;}
#contact-note-antispam {grid-column: 1 / 3; grid-row: 12 / 13;}
#contact-hr-01 {grid-column: 1 / 3; grid-row: 2 / 3;}
#contact-hr-02 {grid-column: 1 / 3; grid-row: 7 / 8;}
#contact-hr-03 {grid-column: 1 / 3; grid-row: 10 / 11;}
#contact-hr-04 {grid-column: 1 / 3; grid-row: 13 / 14;}
#contact-foot {grid-column: 1 / 3; grid-row: 14 / 15;}

.contact-title {
  width: 100px;
  vertical-align: top;
  padding: 0px 5px 0px 0px;
}

.contact-field {}

.contact-field input[type="text"], textarea {
  width: calc(100% - 8px); /* 100% minus combined width of padding & border on each side. */
  padding: 5px 3px;
  border-radius: 2px;
  border: 1px solid #adadad;
}

.contact-field textarea {min-height: 150px;}

.contact-separator {
  height: 10px;
  background-image: url(/images/border.gif);
  background-repeat: repeat-x;
  background-position: left center;
}


/* ---------------------------------------------------------- Table Formatting ---------------------------------------------------------- */
/* -------------------------------------- Global Table -------------------------------------- */

table {
  margin: 0px;
  padding: 0px;
}
table td {
  border: 0px;
  margin: 0px;
  padding: 0px;
  font-family: century_gothic, Verdana, Arial, Helvetica, sans-serif;
}



/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* -------------------------------------------------------- Responsive Formatting -------------------------------------------------------- */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 1600px) {
  #testimonials-content {width: 47%;}
}

/* ----------------------------- Laptop Screen Width Breakpoint ----------------------------- */
@media screen and (max-width: 1440px) {
  h4 {
    font-size: 18px;
    letter-spacing: 3px;
  }

  #header {
    width: calc(100% - 100px);
    padding: 0px 50px 25px 50px;
  }
  .slogan {font-size: 1.1em;}

  .folio-gallery li {width: 20%;}

  .folio-multi-row {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  .folio-blurb {flex-basis: 30%;}

  img.folio-singleimg {max-width: 60vw;}

  #contact {
    background-position: 20px 20px;
    background-size: 95%;
  }
  #contact-body {max-width: 80%;}
  #contactblurb {
    width: 50%;
    max-width: 50%;
  }
  #contactform {
    width: 50%;
    max-width: 50%;
  }

  #testimonials-content {width: 57%;}

  #souldisc-content {
    width: 40%;
    margin: 30px 0px 0px 10%;
  }
}

/* ----------------------------- Tablet Landscpe Breakpoint ----------------------------- */
@media screen and (max-width: 1024px) {
  h4 {
    font-size: 18px;
    letter-spacing: 2.5px;
  }

  img#logo {
    width: 284px;
    height: 40px;
    padding: 25px 0px 0px 25px;
  }

  .slogan {font-size: 0.9em;}

  .folio-gallery li {width: 25%;}

  .folio-multi-row {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .folio-single-row {
    display: block;
    min-height: 88vh;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    column-count: 2;
    column-gap: 5px;
  }

  img.folio-singleimg {
    max-width: 100%;
    float: left;
  }

  #contact {
    background-position: 200px 20px;
    background-size: 85%;
  }

  .testimonial-big {
    color: #adadad;
    font-family: Bitter, Georgia, serif;
    font-weight: bold;
    font-size: 28px;
  }
  .testimonial-med {
    color: #adadad;
    font-family: Bitter, Georgia, serif;
    font-weight: bold;
    font-size: 25px;
  }
  .testimonial-sml {
    color: #adadad;
    font-family: Bitter, Georgia, serif;
    font-weight: bold;
    font-size: 22px;
  }

  #testimonials {height: 220px;}
  #testimonials-content {width: 70%;}

  #souldisc {min-height: 400px;}
  #souldisc-content {
    width: 80%;
    margin: 30px auto 0px auto;
  }

  #footer {
    width: 90%;
    padding: 10px 5% 40px 5%;
    font-size: 14px;
  }
}

/* ----------------------------- Tablet Portrait Breakpoint ----------------------------- */
@media screen and (max-width: 999px) {
  #contact-body {flex-direction: column;}
  #contactblurb {width: 100%; max-width: 100%; font-size: 14px;}
  #contactform {width: 100%; max-width: 100%;}
}

/* ----------------------------- Small Screen Breakpoint ----------------------------- */
@media screen and (max-width: 800px) {
  h2 {font-size: 18px;}
  h4 {font-size: 18px;}

  #header {
    width: 100%;
    min-height: 150px;
    padding: 0px 0px 5px 0px;
    flex-direction: column;
     justify-content: space-around;
     align-items: center;
     gap: 10px;
  }

  .slogan {text-align: center;}

  .folio-gallery li {width: 33.3%;}

  .folio-blurb {font-size: 14px;}

  #testimonials {height: 230px;}
  .review {padding: 20px 0px 0px 0px;}

  #contact-response-msg {
    width: 80%;
    margin: 0px auto;
  }
}

/* ----------------------------- Large Phone Landscape Breakpoint ----------------------------- */
@media screen and (max-width: 648px) {
  h2 {padding: 0px 0px;}
  h4 {
    font-size: 18px;
    letter-spacing: 2px;
  }

  img#logo {
    width: 250px;
    height: 35px;
    padding: 25px 0px 0px 0px;
    margin: 0px auto;
  }

  .slogan {
    width: 80%;
    font-size: 0.9em;
    text-align: center;
  }

  .folio-gallery li {width: 50%;}

  .folio-multi-row, .folio-single-row {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  input.lightboxtoggle:checked + .lightbox .lightbox-image {max-width: 70%;}

  #contact {
    background-position: 150px 10px;
    background-size: unset;
  }

  .testimonial-big {
    color: #adadad;
    font-family: Bitter, Georgia, serif;
    font-weight: bold;
    font-size: 25px;
  }
  .testimonial-med {
    color: #adadad;
    font-family: Bitter, Georgia, serif;
    font-weight: bold;
    font-size: 22px;
  }
  .testimonial-sml {
    color: #adadad;
    font-family: Bitter, Georgia, serif;
    font-weight: bold;
    font-size: 18px;
  }

  #testimonials {height: 280px;}
  #testimonials-content {width: 80%;}

  #souldisc {min-height: 500px;}
}


/* ----------------------------- Smart Phone Portrait ----------------------------- */
@media screen and (max-width: 375px) {
  #header {height: 140px;}

  .folio-gallery li {width: 100%;}

  h4 {
    font-size: 20px;
    letter-spacing: 4px;
  }

  #contact-title-name {grid-column: 1 / 3; grid-row: 1 / 2;}
  #contact-field-name {grid-column: 1 / 3; grid-row: 2 / 3;}
  #contact-title-email {grid-column: 1 / 3; grid-row: 4 / 5;}
  #contact-field-email {grid-column: 1 / 3; grid-row: 5 / 6;}
  #contact-title-phone {grid-column: 1 / 3; grid-row: 6 / 7;}
  #contact-field-phone {grid-column: 1 / 3; grid-row: 7 / 8;}
  #contact-title-website {grid-column: 1 / 3; grid-row: 8 / 9;}
  #contact-field-website {grid-column: 1 / 3; grid-row: 9 / 10;}
  #contact-title-loc {grid-column: 1 / 3; grid-row: 10 / 11;}
  #contact-field-loc {grid-column: 1 / 3; grid-row: 11 / 12;}
  #contact-title-subject {grid-column: 1 / 3; grid-row: 13 / 14;}
  #contact-field-subject {grid-column: 1 / 3; grid-row: 14 / 15;}
  #contact-title-msg {grid-column: 1 / 3; grid-row: 15 / 16;}
  #contact-field-msg {grid-column: 1 / 3; grid-row: 16 / 17;}
  #contact-title-antispam {grid-column: 1 / 3; grid-row: 18 / 19;}
  #contact-field-antispam {grid-column: 1 / 3; grid-row: 19 / 20;}
  #contact-note-antispam {grid-column: 1 / 3; grid-row: 20 / 21;}
  #contact-hr-01 {grid-column: 1 / 3; grid-row: 3 / 4;}
  #contact-hr-02 {grid-column: 1 / 3; grid-row: 12 / 13;}
  #contact-hr-03 {grid-column: 1 / 3; grid-row: 17 / 18;}
  #contact-hr-04 {grid-column: 1 / 3; grid-row: 21 / 22;}
  #contact-foot {grid-column: 1 / 3; grid-row: 22 / 23;}

  img#soullogo {width: 150px;}
  #souldisc {min-height: 600px;}
  #souldisc-content {margin: 10px auto 0px auto;}
}