@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Base styles: opinionated defaults */
html {
  color: #222;
  font-size: 1rem;
  line-height: 1.4;
}

/*
  Remove text-shadow in selection highlight:
  Vendor-prefixed and regular ::selection selectors cannot be combined:
  Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
Remove the gap between audio, canvas, iframes,
images, videos and the bottom of their containers
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* Site CSS */

/* Fallback layout */
#container {
  max-width: 1200px;
  margin: 0 auto;
}

@supports (display: grid) {
  #container {
    max-width: 10000px;
    margin: 0;
  }
}
/* Grid layout */
.gridContainer {
  display: grid;
  min-height: 100vh;
  /* grid-template-columns: repeat(12, 1fr); */
  /* grid-template-columns: repeat(12, minmax(0, 1fr)); */
  /* grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; */
  grid-template-columns: auto repeat(9, minmax(0, 1fr)) 1.5fr auto; /*creates 12 tracks*/
  grid-template-rows: auto auto 1fr;
  grid-column-gap: 1.6rem;
}

/* header grid */
.gridContainer .header {
  grid-column: 1 / span 12;
}

/* navi (menu) grid */
.gridContainer .menu {
  grid-column: 1 / span 12;
}

/* Main content grid */
.gridContainer .main {
  grid-column: 2 / span 8;
}

/* sidebar grid */
.gridContainer .sidebar {
  grid-column: 10 / span 2;
  grid-row: 3;
}

/* Grid system for social page */
#socialPage .gridContainer .main {
  grid-column: 1 / span 12;
}

/* Hide the aside grid on some pages */
#socialPage .gridContainer .sidebar {
  display: none;
}

/* footer grid */
.gridContainer .footer {
  grid-column: 1 / span 12;
}

/* global site anchor link styling */
a {
  color: #e50012;
  text-decoration: none;
}

/* global site visited link styling */
a:visited {
  color: rgba(130, 193, 245, 0.9);
}

/* global site hover styling */
a:hover {
  color: #060808;
}

/*  Hearder section */
.mainHeader {
  display: flex;
  padding: 1rem;
}

/* Site name styling */
.mainHeader #siteName {
  flex-grow: 2;
  text-align: center;
  justify-content: center;
}

.mainHeader #siteName h1 {
  margin: 0;
}

.mainHeader #siteName img {
  width: 38%;
}

/* site search styling */
.mainHeader #search {
  align-self: flex-end;
  width: fit-content;
  height: fit-content;
  margin-left: auto;
}

/* site search input styling */
.mainHeader .inputSearch {
  height: 2em;
  border-width: 1px;
  font-size: 1rem;
  letter-spacing: 2px;
  outline: none;
  border-radius: 1em;
  transition: all 0.5s ease-in-out;
  background-color: rgba(245, 245, 245, 0.9);
  padding-right: 1.5625em;
  padding-left: 0.9375em;
  color: #000000;
}

/* site search placeholder styling */
.mainHeader .inputSearch::placeholder {
  color: rgba(6, 8, 8, 1);
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-weight: 100;
}

/* site search button styling*/
.mainHeader .btnSearch {
  width: 2em;
  height: 2em;
  border-style: none;
  font-size: 1rem;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 16%;
  color: #000000;
  background-color: transparent;
  pointer-events: painted;
}

.mainHeader .btnSearch:focus ~ .inputSearch {
  background-color: transparent;
  border-bottom: 1px solid rgba(6, 8, 8, 0.5);
  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
}

.mainHeader .inputSearch:focus {
  background-color: transparent;
  border-bottom: 1px solid rgba(6, 8, 8, 0.5);
  transition: all 500ms cubic-bezier(0, 0.11, 0.35, 2);
}

/* Main site navigation */
/* Add a black background color to the top navigation */
#flotillaMainNav {
  padding: 0 2em;
}

.mainNav {
  background-color: #121212;
  margin-top: 0.5em;
  overflow: hidden;
}

#siteTop .mainNav {
  margin: 0.5em 0;
}

/* Main navifation menu styling */
/* meny links styling */
.mainNav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0.625rem 1rem;
  text-decoration: none;
  font-size: 1.125rem;
}

/* identify current active page */
.mainNav a.active {
  background-color: #e50012;
  color: white;
}

/* style link hover*/
.mainNav a:hover {
  background-color: #ddd;
  color: #222222;
}

/* Hide hamburger link in big screen */
.mainNav .icon {
  display: none;
}

/* maain and sidebr container box */
.main,
.asideRight {
  padding-bottom: 2rem;
}

/* hero container box */
.main #heroSlider {
  padding-bottom: 1.6rem;
}

/* hero captions box */
.main #heroSlider .carousel-caption {
  background-color: rgba(1, 0, 0, 0.4);
}

/* hero captions h2 */
.main #heroSlider .carousel-caption h2 {
  font-size: 1.25rem;
}

/* article intoductions styling */
.main .aricleIntros {
  display: flex;
  flex-wrap: wrap;
  padding: 0 2rem;
}

.main .aricleIntros .aricleIntro {
  width: 45%;
  margin: 0.625em;
  padding: 1.875em 1.25em;
  border-radius: 0.5rem;
  background-color: #f9f9f9;
}

.main .aricleIntro img {
  width: 100%;
  height: auto;
  box-shadow: 2px 1px 0.5em rgba(0, 0, 0, 0.4);
}

.main .aricleIntro h3 {
  font-size: 1.45rem;
  line-height: 2.2rem;
  padding-top: 0.5rem;
}

.main .aricleIntro .readMore {
  text-align: center;
}

.main .aricleIntro .readMore a {
  font-size: 0.9em;
  padding: 9px 18px;
  border-radius: 8px;
  border: 2px solid #dedede;
  background-color: #f7f7f7;
  font-weight: 600;
  cursor: pointer;
  transition-duration: 0.4s;
}

.main .aricleIntro .readMore a:hover {
  background-color: #e50012;
  border-radius: 8px;
  font-weight: 600;
  color: #f2f2f2;
}

/* Aside contents */
/* Issue styling */
.asideRight .latestIssue {
  background-color: #060808;
}

.asideRight .latestIssue span {
  margin: 0 2.5em;
  border: 0.4em solid #f2f2f2;
  display: block;
}

.asideRight .latestIssue span:hover {
  border-color: #cccccc;
}

.asideRight .latestIssue img,
.mainFooter #featureFooter img {
  width: 100%;
  height: auto;
}

.asideRight .latestIssue h3,
.mainFooter #featureFooter h3 {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
  padding: 0.5em 0 0.2em 0;
  color: #f2f2f2;
}

.mainFooter #featureFooter h3 {
  padding-top: 1em;
}

.asideRight .latestIssue h4,
.mainFooter #featureFooter h4 {
  font-weight: 500;
  font-size: 1.2rem;
  text-align: center;
  padding: 0.8em 0;
}

.asideRight .latestIssue .pastIssue a,
.mainFooter .pastIssue a,
.mainFooter #footerNav a,
.mainFooter #socialIconFotter span a {
  color: #f2f2f2;
  text-decoration: none;
}

.mainFooter #footerNav a.active {
  color: #cccccc;
}

.asideRight .latestIssue .pastIssue a:hover,
.mainFooter .pastIssue a:hover,
.mainFooter #footerNav a:hover,
.mainFooter #socialIconFotter span a:hover {
  color: #e50012;
}

/* Subscribe and Newsletter */
.asideRight .subscribe,
.asideRight .newsletter,
.asideRight .socialMedia,
.asideRight .ads {
  margin: 2rem 0;
}

.asideRight .subscribeBtn {
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 6px;
  border: 2px solid #bbbbbb;
  transition-duration: 0.4s;
}

.asideRight .subscribeBtn:hover,
.asideRight .newsletter .newsletterBtn:hover {
  background-color: #e50012;
  color: #f2f2f2;
}

.asideRight .subscribe,
.asideRight .newsletterFooter,
.asideRight .newsletter {
  text-align: center;
  padding: 0 1.4em;
}

.asideRight .subscribe h2,
.asideRight .newsletterFooter h2,
.asideRight .newsletter h2 {
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.2em;
  padding: 0 1.15rem;
  padding-bottom: 0.6rem;
}

.asideRight .newsletter {
  padding: 2rem 0;
  padding-bottom: 2.5rem;
  border-radius: 2px;
  box-shadow: 0 0 1px 1px rgba(46, 48, 49, 0.5);
  background: linear-gradient(70deg, rgba(6, 8, 8, 0.1) 45%, rgba(6, 8, 8, 0.2) 55%);
}

/* right side newsletter styling */
.asideRight .newsletter h3 {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2em;
  padding: 0 1.15rem;
  padding-bottom: 0.6rem;
}

/* Style inputs, select elements and textareas */
.asideRight .newsletter .newsletterInput {
  width: 80%;
  text-align: center;
  padding: 2px;
  border: 1px solid rgb(82, 81, 81);
  border-radius: 0.45em;
  box-sizing: border-box;
  display: block;
  margin: 1px auto;
  margin-bottom: 1em;
}

/* Style the submit button */
.asideRight .newsletter .newsletterBtn {
  width: 50%;
  padding: 2px;
  border: 1px solid rgb(82, 81, 81);
  background-color: rgb(248, 248, 248);
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin: 1px auto;
}

/* sidebr ads styling */
.asideRight .ads {
  padding: 1.8em 0.6em 0.8em 0.6em;
  text-align: center;
  /* border: 0.5rem solid #f1f1f1; */
  background-color: rgba(253, 245, 230, 0.4);
  border-radius: 0.25em;
  /* box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25); */
  box-shadow: 8px 8px 1px 1px rgba(180, 178, 176, 0.5);
  box-sizing: border-box;
  background-size: 200% 200%;
  background-image: linear-gradient(
    -45deg,
    rgba(240, 255, 255, 1) 0%,
    rgba(245, 255, 250, 1) 25%,
    rgba(255, 250, 240, 1) 51%,
    rgba(240, 248, 255, 1) 100%
  );
  animation: AnimateBG 20s ease infinite;
}

@keyframes AnimateBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.asideRight .ads {
  margin: 12px;
}
.asideRight .ads h2 {
  font-size: 1.45em;
  margin-bottom: 0.2em;
}

.asideRight .ads p {
  font-size: 1.25rem;
  margin-top: 0;
}

.asideRight .ads a {
  color: #e50012;
  text-decoration: none;
}

.asideRight .ads a:hover,
.mainFooter a:hover {
  color: #060808;
}

/* footer styling */
.footer {
  color: #f2f2f2;
  background-color: #060808;
}

.mainFooter {
  display: flex;
  padding: 0 2rem;
}

.mainFooter > .footer1 {
  padding: 1.25em;
  border-radius: 0.5rem;
  flex-basis: 25%;
  flex-grow: 0;
  flex-shrink: 0;
}

.mainFooter #featureFooter span {
  display: block;
  width: 50%;
  margin: 1px auto;
  border: 0.4em solid #f2f2f2;
}

.mainFooter #featureFooter span:hover {
  border-color: #cccccc;
}

.mainFooter .subscribeFooter,
.mainFooter .newsletterFooter {
  padding: 2em;
}

.mainFooter .subscribeFooter p,
.mainFooter .newsletterFooter p {
  font-weight: 400;
  line-height: 1.4em;
}

.mainFooter .subscribeBtn {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 12px 32px;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid #333333;
  transition-duration: 0.4s;
}

.mainFooter .subscribeBtn:hover,
.mainFooter .newsletterFooter .newsletterBtn:hover {
  background-color: #e50012;
  color: #f2f2f2;
}

/* footer font family */
.mainFooter {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida  Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

/* footer newsletter input styling */
.mainFooter .newsletterFooter .newsletterInput {
  width: 90%;
  text-align: center;
  padding: 2px;
  border: 1px solid rgb(82, 81, 81);
  border-radius: 0.45em;
  box-sizing: border-box;
  display: block;
  /* margin: 1px auto; */
  margin-bottom: 0.8em;
}

/* footer newsletter button styling */
.mainFooter .newsletterFooter .newsletterBtn {
  width: 90%;
  padding: 2px;
  border: 1px solid rgb(82, 81, 81);
  background-color: rgb(248, 248, 248);
  border-radius: 8px;
  cursor: pointer;
  display: block;
}

/* footer navi styling */
.mainFooter #footerNav {
  font-size: 0.9rem;
}

/* remove margin, padding and bullects */
.mainFooter #footerNav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  padding: 1.9em 1.3em;
}

.mainFooter #footerNav ul li {
  padding-bottom: 0.2em;
}

/* footer social media styling */
.mainFooter #socialIconFotter {
  margin-top: 2.2em;
}

.mainFooter #socialIconFotter p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.mainFooter #socialIconFotter span {
  display: block;
  font-size: 2.5rem;
}

.footer #copyright {
  font-size: 0.9rem;
  padding: 0.9em 0.7em 0.6em;
  text-align: center;
  background-color: #1a1616;
}

/* ========================================== */
/* BEGIN Feature and article pages */

.menu #pageTitle {
  background-color: #060808;
}

.menu #pageTitle h1 {
  color: #f7f7f7;
  text-align: center;
  font-size: 3.2rem;
  font-weight: bolder;
  padding: 0.7em 0 0.8em 0;
  border-top: 3px solid white;
}

.menu #pageTitle h1 span {
  font-weight: 200;
}

.main #pageTitle {
  padding-bottom: 1.6rem;
}

/* article styling */
.main .articleBox h2 {
  font-size: 2.25rem;
  padding-bottom: 0.4em;
}

.main .articleBox h3 {
  padding-top: 0.8em;
}

.main .articleImg {
  width: 100%;
}

.main .articleImg img {
  width: 100%;
  height: 450px;
  /* height: auto; */
  /* height: 50vh; */
  object-fit: cover;
  box-shadow: 0 0 2px 1px rgba(46, 48, 49, 0.5);
}

.main .articleBody {
  padding: 1.2em 0;
}

.main .articleBody ol {
  margin-left: 1.2em;
}

.main .articleBody ol li {
  margin-bottom: 0.8em;
}

.main .articleBody .textBold {
  font-weight: bolder;
}

.main .notes {
  font-style: italic;
}

/* autor info styling */
.main .authorInfo {
  display: flex;
  padding: 2rem;
  background-color: #f1f1f1;
}

.main .authorImg {
  flex: 0.2;
  align-self: center;
  justify-content: center;
}

.main .author {
  flex: 0.6;
  padding: 0.3em 0;
}

.main .author h3 {
  font-size: 1.1rem;
}

.main .authorInfo img {
  width: 70%;
  height: 70%;
  border: 0.4em solid #cdcdcd;
  border-radius: 50%;
}

/* social media share styling */
.main .share {
  flex: 0.2;
  align-self: flex-end;
  font-size: 1.4rem;
}
.main .share i {
  padding: 0 0.2em;
}

/* Blockquote styling */
.main blockquote {
  background-color: #f9f9f9;
  border-left: 0.625em solid rgba(229, 0, 18, 0.6);
  margin: 1.8em 2.5em;
  padding: 1em 2.5em;
  quotes: "\201C""\201D""\2018""\2019";
}

.main blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4rem;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

.main .inlineImg {
  margin: 0px 2.5em;
  padding-bottom: 1.25em;
  text-align: center;
  overflow: hidden;
}

.main .inlineImg2 {
  text-align: center;
  padding-bottom: 1.25em;
}

.main .inlineImg img {
  width: 80%;
}

.main .inlineImg .articleImage1 {
  border-radius: 0.5em;
}

.sidebar .sideArticles h2 {
  font-size: 1.355rem;
  margin-top: 1.2em;
}

/* sidebar styling */
.SideAricleIntro {
  border-bottom: 2px solid #dddddd;
  padding-bottom: 0.9em;
  margin-bottom: 1.125em;
}

.sidebar .sideArticles .SideAricleIntro img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.sidebar .sideArticles h3 {
  font-size: 1.125rem;
  padding-top: 0.5em;
}

.sidebar .sideArticles p {
  word-spacing: 0.25rem;
}

.sidebar .sideArticles .readMore a {
  font-size: 0.8rem;
  /* padding: 9px 18px;
  border-radius: 8px;
  border: 2px solid #dedede;
  background-color: #f7f7f7; */
  font-weight: 600;
  cursor: pointer;
  transition-duration: 0.4s;
}

.sidebar .sideArticles .readMore a:hover {
  /* background-color: #e50012; */
  /* border-radius: 8px; */
  font-weight: 600;
  color: #e50012;
  font-style: italic;
}

/* .sidebar .sideArticles .readMore img:hover {
  filter: grayscale(25%) drop-shadow(4px 4px 10px #707072);
  transform: scale(1.2);
} */

/* END Feature and article page */

/* BEGIN Contact page */
/* Style inputs, select elements and textareas */
.main .contactBox input[type="text"],
select,
textarea {
  width: 100%;
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 0.25em;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
.main .contactBox label {
  padding: 0.75em 0.75em 0.75em 0;
  display: inline-block;
}

/* Style the submit button */
.main .contactBox input[type="submit"] {
  background-color: #b5000f;
  color: white;
  padding: 0.75em 1.25em;
  border: none;
  border-radius: 0.25em;
  cursor: pointer;
  float: right;
  margin-top: 0.4em;
}

/* Style the contactBox */
.main .contactBox {
  border-radius: 0.3125em;
  background-color: #f2f2f2;
  padding: 1.75em;
  margin: 2em 1em;
}

/* Floating column for labels: 25% width */
.main .contactBox .col-20 {
  float: left;
  width: 20%;
  margin-top: 0.375em;
}

/* Floating column for inputs: 75% width */
.main .contactBox .col-80 {
  float: left;
  width: 80%;
  margin-top: 0.375em;
}

/* Clear floats after the columns */
.main .contactBox .row:after {
  content: "";
  display: table;
  clear: both;
}

/* contact us h2s */
.main .contactBox h2 {
  font-size: 2.3rem;
  padding-bottom: 0.4em;
}

.asideRight .contactInfo {
  margin: 2em 0;
  /* padding-top: 2em; */
  overflow: hidden;
  background-color: #f2f2f2;
}

.asideRight .contactInfo .phone,
.asideRight .contactInfo .email,
.asideRight .contactInfo .address {
  /* padding-bottom: 2em; */
  /* padding: 0 2em 2em; */
  padding: 1em;
  margin: 1em 1em;
  color: #060808;
  background-color: #ffffff;
}

.asideRight .contactInfo .phone i,
.asideRight .contactInfo .email i,
.asideRight .contactInfo .address i {
  font-size: 2rem;
  text-align: center;
}

.asideRight .contactInfo .phone h3,
.asideRight .contactInfo .email h3,
.asideRight .contactInfo .address h3 {
  font-size: 1.8rem;
}

.asideRight .contactInfo .phone a,
.asideRight .contactInfo .email a {
  color: #060808;
  text-decoration: none;
}

.asideRight .contactInfo .phone a:hover,
.asideRight .contactInfo .email a:hover {
  color: #e50012;
}

/* END Contact page */

/* BEGIN Gallery page */

.main .socialEvents {
  margin: 2.625em 3.125em;
  text-align: center;
}

.main .socialEvents .gallery img {
  width: 250px;
  padding: 0.625em;
  filter: grayscale(100%) drop-shadow(9px 9px 10px #707072);
  transition: all 1s linear;
}

.main .socialEvents .gallery img:hover {
  filter: grayscale(25%) drop-shadow(4px 4px 10px #707072);
  transform: scale(1.2);
}

/* END Gallery page */

/* ========== BEGIN Media Queries ================== */
/* Large devices (desktops, less than 1024px)*/
@media screen and (max-width: 1024px) {
  /* grid layout - hearder */
  .mainHeader {
    display: block;
  }

  /* grid layout - main */
  .gridContainer .main {
    grid-column-start: 1;
    grid-column-end: span 12;
  }

  /* grid layout - sidebar */
  .gridContainer .sidebar {
    grid-column: 1 / span 12;
    grid-row: 4;
    margin: 0 10% 2% 10%;
  }

  /* grid layout - footer */
  .gridContainer .footer .mainFooter {
    margin: 0 20%;
  }

  /* maain container box */
  .main {
    padding: 0 3em;
    padding-bottom: 2rem;
  }

  /* sidebr container box */
  .asideRight {
    padding: 0 3em;
  }

  #contactlPage .gridContainer .sidebar {
    margin: 0 4%;
  }

  /* main search */
  .mainHeader #search {
    padding-top: 1.2em;
    margin: 0 auto;
  }

  /* aside subscription button */
  .asideRight .subscribeBtn {
    font-size: 1.125rem;
    padding: 18px 36px;
  }

  /* last issue */
  .asideRight .latestIssue span,
  .mainFooter #featureFooter span {
    border: 0.25em solid #f2f2f2;
  }

  /* right side */
  .sidebar .asideRight {
    margin-top: 0;
    padding-top: 0;
  }

  /* sidebar latest issue */
  .sidebar .asideRight #issues {
    display: none;
  }

  /* sidebar contact info wrapper */
  .asideRight .contactInfo {
    margin-top: 0;
    padding-top: 0;
    text-align: center;
  }

  /* sidebar contact infos */
  .asideRight .contactInfo .phone,
  .asideRight .contactInfo .email,
  .asideRight .contactInfo .address {
    /* float: left; */
    display: inline-block;
    width: 27%;
    height: 35vh;
    vertical-align: top;
    /* text-align: left; */
  }

  /* footer */
  .mainFooter {
    display: block;
    padding: 0 0.2rem;
    text-align: center;
    margin: 0;
  }

  /* footer newsletter input and button styling */
  .mainFooter .newsletterFooter .newsletterInput,
  .mainFooter .newsletterFooter .newsletterBtn {
    margin: 1px auto;
    margin-bottom: 1em;
  }

  /* footer links */
  .mainFooter #footerNav ul li {
    display: inline-block;
    padding: 0.2em 0.3em;
    line-height: 1.6em;
  }

  .mainFooter #socialIconFotter span {
    display: inline-block;
    padding: 0 0.3em;
  }
}

/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 768px) {
  .mainHeader #siteName img {
    width: 46%;
  }

  /* maain container box */
  .main {
    padding: 0 2em;
    padding-bottom: 2rem;
  }

  /* sidebr container box */
  .asideRight {
    padding: 0 2em;
  }

  .menu #pageTitle h1 {
    font-size: 3.2rem;
    padding: 0.6em 0 1em 0;
    border-top: 3px solid white;
  }

  .main .socialEvents .gallery img {
    width: 300px;
  }

  /* contact us text inputs */
  .main .contactBox .col-20,
  .main .contactBox .col-80,
  .main .contactBox input[type="submit"] {
    width: 100%;
    margin-top: 0;
  }

  /* contact us info */
  .asideRight .contactInfo .phone,
  .asideRight .contactInfo .email,
  .asideRight .contactInfo .address {
    display: block;
    width: auto;
    height: auto;
  }
}

/* Less than 600 pixels wide, hide all links, except Home */
@media screen and (max-width: 600px) {
  /* grid layout - side */
  .gridContainer .sidebar {
    margin: 5% 0;
  }

  /* grid layout - footer */
  .gridContainer .footer .mainFooter {
    margin: 0;
  }

  /* main navi menu wrapper */
  #flotillaMainNav {
    padding: 0;
  }

  /* main navi menu link */
  .mainNav a:not(:first-child) {
    display: none;
  }

  .mainNav a.icon {
    float: right;
    display: block;
  }

  /* Pafe title sfont ize */
  .menu #pageTitle h1 {
    font-size: 2.8rem;
    padding: 0.7em 0;
  }

  /* maain container box */
  .main {
    padding: 0;
    padding-bottom: 1em;
  }

  /* sidebr container box */
  .asideRight {
    padding-bottom: 0.3em;
  }

  .main .aricleIntros {
    flex-flow: column;
    padding: 0 2rem;
  }

  /* article intros */
  .main .aricleIntros .aricleIntro {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* article content wrapper */
  .main .articleBox {
    margin: 2em 1em;
  }

  /* article blockquotes */
  .main blockquote {
    margin: 1.8em 1.25em;
    padding: 1em 1.25em;
  }

  /* order article images */
  .main .inlineImg {
    margin: 0;
  }

  .main .inlineImg2 img {
    width: 80%;
  }

  /* social media and side intro articles */
  .sidebar .socialMedias,
  .sidebar .sideArticles .SideAricleIntro {
    padding: 1.5em 1em;
  }

  /* contact us wrapper */
  .main .contactBox {
    margin: 0;
  }

  .mainFooter #featureFooter span {
    width: 80%;
  }
}

/* Add "responsive" class to the mainNav with JavaScript when icon is clicked*/
@media screen and (max-width: 600px) {
  .mainNav.responsive {
    position: relative;
  }
  .mainNav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .mainNav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {
}