/* Site Colours */
/* I had to create the mediumGrey colour below because the LightGrey made text illegible on my Blog page (at least on my monitor), so it subbed in mediumGrey in some areas for readability. */
/* Site Fonts */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption, figure, main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button, input, optgroup, select, textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details, menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: "";
  clear: both;
  height: 0;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* TYPOGRAPHY STYLES */
html {
  font-size: 62.5%;
  font-family: "Montserrat", sans-serif;
  color: #000;
}

h1,
h2,
h3,
h4,
h5 {
  text-transform: uppercase;
  margin: 0;
}

h1 {
  font-weight: 700;
  font-size: 3.7rem;
  letter-spacing: 0.09rem;
}

h2,
h3,
h4,
h5 {
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.18rem;
  line-height: 2.4rem;
}

a {
  color: #000;
}

p {
  line-height: 2.4rem;
  color: #333333;
}

p,
footer li,
footer form {
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.03rem;
}

footer p,
footer li,
footer form {
  line-height: 3rem;
}

footer,
footer p,
footer a {
  color: #FFFFFF;
}

footer input[type=email],
footer button i {
  color: #000;
}

/* Nav Text & Footer "Creative Agency" Bar */
nav,
.creative-container {
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
}

i {
  font-size: 1.9rem;
}

button {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.07rem;
}

input,
textarea {
  color: #8d8c8c;
  font-size: 1.4rem;
}

.cart-number {
  font-size: 0.8rem;
  line-height: 0.8rem;
}

body {
  margin: 0;
  padding: 0;
}

/* Navigation Skip Link */
.skip-link {
  position: absolute;
  left: -1000px;
  top: 5px;
  z-index: 999;
  background: white;
  color: black;
  font-size: 1.4rem;
  padding: 5px;
  border: 1px solid #000;
}

.skip-link:focus {
  left: 0;
}

.wrapper {
  max-width: 1200px;
  width: 75%;
  margin: 0 auto;
}

/* Removing/Adding Default Styles */
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

a {
  text-decoration: none;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  cursor: pointer;
}

i {
  padding: 5px 5px;
}

/* GLOBAL NAV STYLES ------------------------------------*/
.header-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 20px;
  position: relative;
  z-index: 10;
}

/* Anchor tag styling for all mobile and desktop menus */
.mobile-menu,
.home-menu,
.shop-menu {
  display: none;
  /* All anchor tags & buttons in nav except for the "Creative" logo. */
}
.mobile-menu a,
.home-menu a,
.shop-menu a {
  padding: 10px 15px;
  display: inline-block;
  -webkit-transition: 300ms;
  transition: 300ms;
  width: 100%;
  position: relative;
}
.mobile-menu a:not(.creative-logo),
.home-menu a:not(.creative-logo),
.shop-menu a:not(.creative-logo) {
  -webkit-transition: 500ms;
  transition: 500ms;
}
.mobile-menu a:not(.creative-logo):hover::after, .mobile-menu a:not(.creative-logo):focus::after,
.home-menu a:not(.creative-logo):hover::after,
.home-menu a:not(.creative-logo):focus::after,
.shop-menu a:not(.creative-logo):hover::after,
.shop-menu a:not(.creative-logo):focus::after {
  content: " ";
  width: 90%;
  height: 1px;
  position: absolute;
  background-color: black;
  bottom: 50%;
  left: 5%;
}

/* Strike-through effect for active page link. */
.active-link::after {
  content: " ";
  width: 90%;
  height: 1px;
  position: absolute;
  background-color: #000;
  bottom: 50%;
  left: 5%;
}

.active-link {
  position: relative;
}

/* Mobile Menu */
/* Icon Hover Effect */
.soc-med-button {
  -webkit-transition: 300ms;
  transition: 300ms;
}
.soc-med-button:hover, .soc-med-button:focus {
  scale: 0.9;
  opacity: 0.5;
}

.line-1,
.line-2,
.line-3 {
  content: " ";
  position: absolute;
  width: 30px;
  height: 3px;
  top: 6px;
  background-color: black;
  border-radius: 10px;
  -webkit-transition: 300ms;
  transition: 300ms;
}

.line-2 {
  top: 14px;
}

.line-3 {
  top: 22px;
}

/* Mobile Menu Button */
.menu-button,
#toggle {
  display: none;
  color: #000;
  position: absolute;
  width: 32px;
  height: 32px;
  left: 170px;
  top: 20px;
  -webkit-transition: 500ms;
  transition: 500ms;
}
.menu-button:hover, .menu-button:focus,
#toggle:hover,
#toggle:focus {
  opacity: 0.5;
}

.menu-button.active .line-1 {
  rotate: 45deg;
  top: 14px;
}
.menu-button.active .line-2 {
  rotate: -45deg;
}
.menu-button.active .line-3 {
  opacity: 0;
}

/* Left Side Home Nav Bar */
.home-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

/* Creative Logo Styles */
.creative-logo {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.creative-logo h1 {
  -webkit-transition: 400ms;
  transition: 400ms;
  text-align: center;
  margin: 0;
}
.creative-logo h1:hover, .creative-logo h1:focus {
  opacity: 0.5;
}

/* Right Side Shop Nav Bar */
.shop-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  -webkit-transition: 500ms;
  transition: 500ms;
}

/* Shopping Bag Icon  */
.shop-bag {
  position: relative;
}

/* Cart Number Graphic */
.cart-number {
  display: inline;
  position: absolute;
  background-color: #C3DAB7;
  border-radius: 50%;
  padding: 3px 5px;
  top: 1.2rem;
  right: 0;
}

/* HOME/INDEX STYLES */
/* INDEX HEADER -----------------------------------------*/
.index-header {
  background-image: url("../assets/home-1.jpeg");
  background-size: cover;
  height: 100vh;
  background-position: bottom;
  position: relative;
}
.index-header .vertical-line {
  border-left: 0.5px solid #000;
  display: block;
  height: 120px;
  position: absolute;
  bottom: -60px;
  left: 50%;
}

/* SECTION ONE: BRANDING ------------------------------*/
.section-branding {
  background-color: #C3DAB7;
  padding: 12% 0 10% 0;
}
.section-branding .section-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.section-branding h2 {
  margin-bottom: 15px;
  -webkit-transition: 300ms;
  transition: 300ms;
  scale: 1;
  border: 1px solid rgba(0, 0, 0, 0);
}
.section-branding h2:hover, .section-branding h2:focus {
  color: #8d8c8c;
}

.desk-img-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
.desk-img-container .desk-img {
  margin: 0 60%;
}
.desk-img-container .circular-text {
  position: absolute;
  left: -18%;
  top: -28%;
  width: 40%;
  height: auto;
  z-index: 10;
}

.branding-text-container {
  -ms-flex-preferred-size: 70%;
      flex-basis: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  margin-top: 5%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.branding-text-container .container-branding,
.branding-text-container .container-design-develop {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  padding: 0 15px;
}

/* SECTION TWO: CIRCLE GALLERY ------------------------------*/
.section-gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12% 0 10% 0;
}

.left-scroll-icon {
  color: #000;
}

.right-scroll-icon {
  color: rgb(93, 91, 91);
}

.left-scroll-icon,
.right-scroll-icon {
  font-size: 3rem;
  font-weight: bolder;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.left-scroll-icon:hover, .left-scroll-icon:focus,
.right-scroll-icon:hover,
.right-scroll-icon:focus {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.container-circle-gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-preferred-size: 60%;
      flex-basis: 60%;
  margin: 0 auto;
  text-align: center;
}
.container-circle-gallery p {
  margin-top: 5%;
  font-style: italic;
}

.magazine-img {
  -ms-flex-item-align: center;
      align-self: center;
  width: 35%;
  border-radius: 50%;
}

/* SECTION THREE: ICON GALLERY ------------------------------*/
.section-icon-gallery {
  background-image: url("../assets/home-4.jpeg");
  background-size: cover;
  padding: 8% 0;
  background-color: #F6F6F6;
}
.section-icon-gallery .icon-gallery-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 50%;
  margin-right: 8%;
}

.icon-gallery-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.icon-gallery-list li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 48%;
      flex-basis: 48%;
}

.icon-gallery-button {
  -ms-flex-item-align: center;
      align-self: center;
  justify-self: center;
}
.icon-gallery-button i {
  border: 2px solid #000;
  font-size: 2.6rem;
  width: 6rem;
  height: 6rem;
  line-height: 4.4rem;
  text-align: center;
  border-radius: 50%;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.icon-gallery-button i:hover, .icon-gallery-button i:focus {
  color: #F6F6F6;
  background-color: #000;
  scale: 95%;
}

.gallery-text-container {
  -ms-flex-preferred-size: 90%;
      flex-basis: 90%;
  margin-left: 5%;
  margin-top: 5%;
}
.gallery-text-container p {
  font-size: 1.1rem;
}

/* SECTION FOUR: MEET OUR TEAM ------------------------------*/
.section-team {
  position: relative;
  padding: 7% 0 10% 0;
}
.section-team .vertical-line-two {
  border-left: 0.5px solid #000;
  display: block;
  height: 60px;
  position: absolute;
  top: 0;
  left: 50%;
}
.section-team h2 {
  text-align: center;
}

/* Entire "Meet Out Team" Container */
.container-meet-our-team {
  padding-top: 7%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

/* Team Players Text Container */
.container-team-players {
  -ms-flex-preferred-size: calc(50% - 20px);
      flex-basis: calc(50% - 20px);
  padding: 4%;
  min-height: 100%;
  margin: 10px;
  background-color: #F6F6F6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.container-team-players h3 {
  margin-bottom: 15px;
}

/* Team Profile Images */
.container-team-img {
  -ms-flex-preferred-size: calc(25% - 20px);
      flex-basis: calc(25% - 20px);
  margin: 10px;
}
.container-team-img img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.container-team-img img:hover, .container-team-img img:focus {
  opacity: 0.5;
}

/* Work With Us Box */
.container-work-with-us {
  -ms-flex-preferred-size: calc(25% - 20px);
      flex-basis: calc(25% - 20px);
  margin: 10px;
  position: relative;
}

/* Work With Us Container Styles For Hover */
.anchor-box {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 4% 8%;
  border: 2px solid rgba(0, 0, 0, 0);
}
.anchor-box:hover, .anchor-box:focus {
  border: 2px solid #000;
  background-color: #F6F6F6;
}

/* SECTION FIVE: DROP US A LINE ------------------------------*/
.section-drop-a-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container-drop-a-line {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  background-color: #C3DAB7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  padding: 8%;
  border: 1px solid rgba(0, 0, 0, 0);
}
.container-drop-a-line p {
  margin: 12% auto;
}

.portfolio-link {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.07rem;
  text-transform: uppercase;
  background-color: #FFFFFF;
  padding: 15px 20px;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.portfolio-link:hover, .portfolio-link:focus {
  border: 1px solid #000;
  scale: 0.9;
}

.container-drop-img {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}
.container-drop-img img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

/* BLOG STYLES */
/* Note about colors: I had to create a mediumGrey variable because the off white colour was hardly showing up on my monitor so any text I used it on became unreadable. I still used the off white (which i called lightGrey) to shade background areas though. */
/* BLOG HEADER ------------------------------------------*/
.blog-header {
  background-image: url("../assets/blog-1.jpeg");
  background-size: cover;
  height: 100vh;
  background-position: bottom;
  background-repeat: no-repeat;
}

/* ARTICLE: BLOG - HOW TO RUN AN AGENCY ---------------------------*/
/* Article / Title Styles ----------------- */
.article-blog {
  padding: 3% 0;
  /* Blog Title*/
}
.article-blog h2 {
  font-size: 5rem;
  line-height: 6rem;
  font-weight: 700;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}

/* H3 Styles for Each Section */
.blog-section-title {
  font-weight: 600;
  font-size: 3rem;
  margin-bottom: 30px;
}

/* Blog Breadcrumb Menu -----------------*/
.blog-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 2% 0;
  margin-bottom: 3%;
}
.blog-menu li {
  font-size: 1.4rem;
  font-family: "Open Sans", sans-serif;
}
.blog-menu .menu-item::before {
  content: "/";
  padding: 0 5px;
  color: #8d8c8c;
}

.blog-home,
.blog-blog {
  color: #8d8c8c;
}

/* Blog Post Metadata Container -----------*/
.blog-metadata {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1% 0;
  position: relative;
}
.blog-metadata p {
  color: #8d8c8c;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.blog-metadata p:hover, .blog-metadata p:focus {
  color: #000;
}

/* Blog Author Img */
.writer-img-container {
  margin-right: 10px;
}
.writer-img-container img {
  border-radius: 50%;
}

.administrator {
  -ms-flex-preferred-size: 17%;
      flex-basis: 17%;
  -webkit-box-flex: 3;
      -ms-flex-positive: 3;
          flex-grow: 3;
  -ms-flex-negative: 3;
      flex-shrink: 3;
}

.date {
  -ms-flex-preferred-size: 14%;
      flex-basis: 14%;
}

.category,
.tags {
  -ms-flex-preferred-size: 17%;
      flex-basis: 17%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
}

.category-ul,
.tags-ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.category-ul li,
.tags-ul li {
  padding-right: 5px;
}
.category-ul .p-list::after,
.tags-ul .p-list::after {
  content: ",";
}

/* Blog Article Text -----------------------*/
.blog-text p {
  padding: 10px 0;
}
.blog-text .bold-text {
  font-weight: bold;
  margin-top: 3%;
}

/* Share / Social Media Icons Container ------*/
.share-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.share-container i {
  padding: 10px;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.share-container i:hover, .share-container i:focus {
  color: #8d8c8c;
}

/* SECTION ONE: RELATED POSTS GALLERY------------------------------*/
.section-related-posts {
  padding: 3% 0;
}

.posts-container {
  padding: 3% 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.posts-container li {
  -ms-flex-preferred-size: 32%;
      flex-basis: 32%;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.posts-container li:hover, .posts-container li:focus {
  opacity: 0.5;
}

.posts-date {
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  padding: 15px 0;
}

/* SECTION TWO: COMMENTS ----------------------------------------*/
.section-comments {
  padding: 3% 0;
}

.comment-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.comment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 0;
}

.comment-img-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 10%;
      flex-basis: 10%;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

/* Background container/colour for comment text.*/
.comment-text-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 88%;
  padding: 3%;
  background-color: #F6F6F6;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  margin-left: 24px;
}

/* Decorative triangle background on comment container that makes it look like a speech bubble */
.comment-text-container::before {
  content: " ";
  display: inline-block;
  width: 20px;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 24px solid #F6F6F6;
  position: absolute;
  left: -24px;
  top: 18px;
  z-index: 10;
}

.subject-paragraph {
  width: 100%;
  text-transform: uppercase;
}

.comment-portraits {
  width: 70px;
  height: 70px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Container for commenter name and reply link */
.name-reply {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.name-reply > p {
  text-transform: uppercase;
}

.reply-link {
  font-style: italic;
  padding-left: 5px;
  color: #8d8c8c;
}

/* SECTION THREE: LEAVE A COMMENT ----------------------------------*/
.section-comment-form {
  padding: 3% 0 8% 0;
  font-size: 1.4rem;
}

.comment-form-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 3% 0;
}
.comment-form-container input,
.comment-form-container textarea {
  padding: 10px 5px;
  border-style: none none solid none;
  border-color: #F6F6F6;
  border-size: 1px;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.comment-form-container input:hover, .comment-form-container input:focus,
.comment-form-container textarea:hover,
.comment-form-container textarea:focus {
  color: #000;
  border-color: #000;
  border-size: 2px;
}

.comment-name-input,
.comment-email-input,
.comment-subject-input {
  -ms-flex-preferred-size: 32%;
      flex-basis: 32%;
}

.comment-content-input {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin: 3% 0;
  resize: none;
}

/* Submit Button */
.button-submit-comment {
  text-transform: uppercase;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  padding: 10px 0;
  border-bottom: 1px solid #000;
  -webkit-transition: 300ms;
  transition: 300ms;
  scale: 1;
}
.button-submit-comment:hover, .button-submit-comment:focus {
  scale: 0.9;
}

/* DECORATIVE UNDERLINE STYLING (::AFTERS) ----------------------------------*/
.blog-metadata::after,
.blog-section-title::after {
  content: " ";
  border-bottom: 2px solid #F6F6F6;
  width: 100%;
  position: absolute;
  display: inline-block;
}

.blog-metadata,
.blog-section-title {
  position: relative;
}

.blog-metadata::after {
  bottom: -20%;
}

.blog-section-title {
  padding-bottom: 5%;
}

.blog-section-title::after {
  left: 0;
  bottom: 30%;
}

/* CONTACT PAGE SECTIONS STYLES */
/* HEADER BEGINS -------------------------*/
.contact-background-img {
  margin-top: 20px;
  background-image: url("../assets/contact-1.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 200px;
  background-position: bottom;
  margin-bottom: 20px;
}

.contact-header h2 {
  font-weight: 800;
  font-size: 5rem;
  line-height: 5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 29%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  top: 129px;
}

/* HEADER ENDS */
/* SECTION 1: CONTACT DETAILS ------------------------------*/
.contact-header h2::before {
  content: "";
  border-bottom: 2px solid black;
  width: 4rem;
  position: absolute;
  left: 0;
  top: -40px;
}

.section-contact-details,
.section-in-touch,
.details-container,
.contact-icon-container {
  padding: 3% 0;
}

.details-container h3,
.section-in-touch h3 {
  margin-bottom: 2%;
}

.contact-icon-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin-top: 2%;
}
.contact-icon-container i {
  font-size: 3.5rem;
  padding-left: 0;
}
.contact-icon-container h4 {
  font-size: 1.4rem;
  letter-spacing: 0.9rem;
  padding: 4% 0;
}
.contact-icon-container a {
  -webkit-transition: 300ms;
  transition: 300ms;
  color: #333333;
}
.contact-icon-container a:hover, .contact-icon-container a:focus {
  color: #8d8c8c;
}

.comment-form-container {
  margin-top: 8%;
}

.contact-phone-container,
.contact-email-container,
.contact-address-container {
  -ms-flex-preferred-size: 28%;
      flex-basis: 28%;
  position: relative;
}

.contact-address-container::before,
.contact-email-container::before {
  content: "";
  border-right: 2px solid #F6F6F6;
  height: 150%;
  position: absolute;
  left: -15%;
  top: -25%;
}

/* SECTION 3: FULL BLEED IMAGE-------------------------- */
.section-comments-full-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 688px;
}
.section-comments-full-image img {
  min-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

footer {
  background-color: #333333;
  padding-top: 10%;
}
footer a {
  -webkit-transition: 300ms;
  transition: 300ms;
  cursor: pointer;
}
footer a:hover, footer a:focus {
  opacity: 0.5;
}

/* Footer Container */
.footer-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.footer-container h4 {
  margin-bottom: 25px;
}

/* Footer Icon Container */
.footer-icon-container {
  margin-top: 30px;
}
.footer-icon-container a {
  -webkit-transition: 300ms;
  transition: 300ms;
}
.footer-icon-container a:hover, .footer-icon-container a:focus {
  opacity: 0.5;
}
.footer-icon-container a i {
  margin-right: 20px;
}

/* Recent Posts Container */
.recent-posts-container h4 {
  text-align: center;
}
.recent-posts-container li {
  list-style: disc;
  line-height: 3rem;
}

/* Twitter Container */
.twitter-container h4,
.subscribe-container h4 {
  text-align: end;
}

/* Email Form */
.footer-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  height: 35%;
}
.footer-form label {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin: 25px 0 30px 0;
}

.email-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.email-container input[type=email] {
  padding: 14px 50px 15px 20px;
  border: none;
}

.email-submit-button {
  padding: 8px;
  background-color: #C3DAB7;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.email-submit-button:hover, .email-submit-button:focus {
  background-color: #F6F6F6;
}
.email-submit-button i {
  color: #333333;
}

/* Footer Logo */
.creative-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10%;
  padding: 5% 0;
  border-top: 0.5px solid rgba(165, 165, 165, 0.589);
}
.creative-container p {
  font-weight: 900;
  letter-spacing: 0.6rem;
}

/* --------------MEDIA QUERY 1150PX--------------- */
@media (max-width: 1150px) {
  /* Icon Gallery Styles */
  .section-icon-gallery .icon-gallery-container {
    margin-left: 8%;
    background-color: rgba(241, 239, 239, 0.785);
  }
  /* Section 4: Meet our Team*/
  .container-meet-our-team .container-team-players {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 2%;
  }
  .container-meet-our-team .container-team-players h3 {
    margin: 0;
  }
  .container-meet-our-team p {
    font-size: 1.2rem;
  }
  /* Footer */
  footer p,
footer a,
footer label {
    font-size: 1.3rem;
  }
}
/* --------------MEDIA QUERY 1000PX--------------- */
@media (max-width: 1000px) {
  /* Header Styles */
  .header-nav {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-transition: 500ms;
    transition: 500ms;
    position: relative;
    /* Menus hidden so they can be revealed by toggle */
    /* Toggle For Hidden Menu */
  }
  .header-nav .home-menu,
.header-nav .shop-menu {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    display: none;
  }
  .header-nav .menu-button {
    display: block;
    cursor: pointer;
  }
  .header-nav #toggle:checked + .mobile-menu {
    position: absolute;
    top: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.968627451);
    border: 1px solid rgba(0, 0, 0, 0.723);
  }
  .header-nav #toggle:checked + .mobile-menu li {
    position: relative;
    line-height: 3rem;
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
  .header-nav .creative-logo {
    -ms-flex-preferred-size: 22%;
        flex-basis: 22%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .header-nav .creative-logo h1 {
    font-size: 2.6rem;
    text-align: left;
  }
  /* Section 1: Branding */
  .branding-text-container {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  .desk-img-container .circular-text {
    width: 30%;
  }
  /* Section 2: Circle Gallery */
  .section-gallery .container-circle-gallery .magazine-img {
    width: 70%;
  }
  /* Section 4: Meet Our Team*/
  .section-team h2 {
    margin-top: 50px;
  }
  .container-meet-our-team .container-team-players {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    padding: 4%;
    margin: 0 0 5px 0;
  }
  .container-meet-our-team .container-team-img {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    height: auto;
    margin: 0;
  }
  .container-meet-our-team .container-team-img:nth-child(odd) {
    padding: 5px 0px 5px 5px;
  }
  .container-meet-our-team .container-team-img:nth-child(even) {
    padding: 5px 5px 5px 0px;
  }
  .container-meet-our-team .container-work-with-us {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    margin: 0;
    padding: 5px 0px 5px 5px;
  }
  .container-meet-our-team .container-work-with-us a {
    padding: 47% 20%;
  }
  /* Section 5: Drop Us A Line */
  .section-drop-a-line .container-drop-img img {
    height: 100%;
  }
  /* Footer Styles */
  .footer-container {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .footer-container .contact-us-container {
    min-width: 40%;
  }
  .footer-container .recent-posts-container {
    min-width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .footer-container .twitter-container,
.footer-container .subscribe-container {
    width: 100%;
    margin-top: 30px;
  }
  .footer-container .twitter-container h4,
.footer-container .subscribe-container h4 {
    text-align: center;
  }
  .footer-container .twitter-container label,
.footer-container .subscribe-container label {
    text-align: center;
  }
  .footer-container .twitter-container .email-container,
.footer-container .subscribe-container .email-container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
/* --------------MEDIA QUERY 800PX--------------- */
@media (max-width: 800px) {
  .wrapper {
    width: 90%;
  }
  /* Header Styles */
  .header-nav .shop-menu,
.header-nav .home-menu {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  /* Section 1: Branding */
  .section-branding {
    padding-top: 15%;
  }
  .desk-img-container .circular-text {
    width: 20%;
    left: calc(50% - 47px);
    top: 85%;
  }
  .branding-text-container {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  .branding-text-container .container-branding,
.branding-text-container .container-design-develop {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin: 7% 0 2% 0;
  }
  /* Section 2: Circle Gallery */
  .section-gallery .container-circle-gallery .magazine-img {
    width: 60%;
  }
  /* Section 3: Icon Gallery Styles Styles */
  .section-icon-gallery .icon-gallery-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .section-icon-gallery .icon-gallery-container li {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    padding: 0 15%;
  }
  /* Section 5: Drop Us A Line*/
  .section-drop-a-line {
    position: relative;
  }
  .section-drop-a-line .container-drop-a-line {
    position: absolute;
    width: 90%;
    top: 20%;
    left: 5%;
  }
  .section-drop-a-line .container-drop-img {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  /* Footer Styles */
  .footer-container {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .footer-container .contact-us-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .footer-container .recent-posts-container {
    min-width: 100%;
    margin-top: 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .footer-icon-container a i {
    margin: 0 20px;
  }
}
/* --------------MEDIA QUERY 500PX--------------- */
@media (max-width: 500px) {
  /* Global Styles */
  h2,
h3,
h4 {
    font-size: 1.6rem;
  }
  /* Header */
  .index-header .vertical-line {
    height: 60px;
    bottom: -30px;
  }
  /* Section 1: Branding */
  .desk-img-container {
    min-height: 300px;
  }
  .desk-img-container img {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .desk-img-container .circular-text {
    width: 20%;
    left: calc(50% - 9vw);
    top: calc(85% + 1vh);
  }
  .container-branding,
.container-design-develop {
    margin: 10% 0 2% 0;
  }
  /* Section 2: Circle Gallery */
  .section-gallery button {
    -ms-flex-item-align: baseline;
        align-self: baseline;
    margin-top: 25%;
  }
  .section-gallery .container-circle-gallery {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin: 0 auto;
  }
  .section-gallery .container-circle-gallery .magazine-img {
    width: 80%;
    margin-bottom: 20px;
  }
  /* Section 3: Icon Gallery Styles Styles */
  .section-icon-gallery .icon-gallery-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .section-icon-gallery .icon-gallery-container li {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    padding: 5% 15%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section-icon-gallery .icon-gallery-container li .gallery-text-container {
    text-align: center;
  }
  /* Section 4: Meet our Team */
  .section-team {
    padding-bottom: 10px;
  }
  .section-team .anchor-box h3 {
    font-size: 1.4rem;
  }
  /* Section 5: Drop Us A Line */
  .section-drop-a-line .container-drop-a-line {
    position: static;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  .section-drop-a-line .container-drop-img {
    display: none;
  }
  /* Footer Styles */
  .footer-container p {
    font-size: 1.3rem;
  }
  .contact-us-container p:first-of-type {
    text-align: center;
  }
}
/* --------------MEDIA QUERY 1150PX--------------- */
@media (max-width: 1300px) {
  .article-blog h2 {
    font-size: 3.8rem;
  }
}
/* --------------MEDIA QUERY 1000PX--------------- */
@media (max-width: 1000px) {
  .blog-header {
    background-position: bottom left;
  }
  /* Blog Title */
  .article-blog h2 {
    font-size: 3rem;
  }
  /* Metadata Section */
  .blog-metadata {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    position: relative;
  }
  .writer-img-container {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    margin: 0;
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .date,
.category,
.tags {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .date,
.category,
.tags,
.administrator {
    margin-bottom: 2%;
  }
  .blog-metadata::after {
    bottom: -10%;
  }
}
/* --------------MEDIA QUERY 800PX--------------- */
@media (max-width: 800px) {
  /* Related Posts Section ----------------*/
  /* H3 Styles for Each Section */
  .blog-section-title {
    font-size: 2.5rem;
    margin-bottom: 10px;
  }
  /* Image Gallery */
  .posts-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: auto;
  }
  .posts-container li {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    height: 100%;
    padding-bottom: 3%;
  }
  .posts-container li img {
    width: 100%;
    max-height: 350px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: bottom;
       object-position: bottom;
  }
}
/* --------------MEDIA QUERY 500PX--------------- */
@media (max-width: 500px) {
  /* Blog Menu */
  .blog-menu a {
    font-size: 1.2rem;
  }
  /* Comment Section */
  .comment-img-container {
    -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
  }
  .comment-text-container {
    -ms-flex-preferred-size: 74%;
        flex-basis: 74%;
  }
}
/* CONTACT PAGE MEDIA QUERIES */
/* MEDIA QUERY MAX WIDTH 1000PX ------------------------------------------------- */
@media (max-width: 1000px) {
  .contact-header h2 {
    font-size: 4rem;
  }
  /* Section 1: Contact Details */
  .contact-icon-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .contact-phone-container,
.contact-email-container,
.contact-address-container {
    padding: 3% 0;
  }
  .contact-address-container::before,
.contact-email-container::before {
    display: none;
  }
  /* Section 2: Get In Touch With Us Forms */
  .comment-form-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .comment-form-container input {
    margin: 3% 0;
  }
  .comment-form-container button {
    -ms-flex-item-align: center;
        align-self: center;
  }
  /* Section 3: Full Bleed Image */
  .section-comments-full-image {
    max-height: 500px;
  }
}
/* MEDIA QUERY MAX WIDTH 800PX -------------------------------------------------- */
@media (max-width: 800px) {
  .contact-background-img {
    background-position: left;
  }
  .section-contact-details,
.section-in-touch,
.details-container,
.contact-icon-container {
    padding: 5% 0;
  }
  /* Section 2: Get In Touch With Us Forms */
  .comment-form-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .comment-form-container input {
    margin: 4% 0;
  }
  /* Section 3: Full Bleed Image */
  .section-comments-full-image {
    max-height: 300px;
  }
}