body,
html {
  padding: 0;
  margin: 0;
  background-color: black !important; }

body {
  font-size: 100%;
  overflow-y: scroll; }

* {
  font-family: "Roboto", sans-serif; }

.parallax {
  /* The image used */
  background-image: url("../images/marble2.jpg");
  /* Set a specific height */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

#container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  grid-template-areas: "menu menu menu" "top top top" "mid mid mid" "bot bot bot" "foot foot foot";
  width: 100%; }

#wrapper {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: menu;
  height: 60px;
  z-index: 40;
  background-color: black; }

#boxes {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33% 33% 33%;
  grid-template-columns: 33% 33% 33%;
  -ms-grid-rows: 85% 15%;
  grid-template-rows: 85% 15%;
  grid-template-areas: "box1 box2 box3" "end1 end2 end3";
  width: 100%;
  padding: 2% 0 0 0; }

#top {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: top;
  padding: 4% 10% 2% 10%; }

#boxes h2,
#gallery-choices h2 {
  color: #CE172E;
  font-size: 1.7rem; }

#gallery-choices ul > li > a {
  font-size: 1.5rem;
  line-height: 2;
  color: #00303F; }

#box1,
#box2,
#box3 {
  border-top: medium groove #C65C3F;
  border-right: medium groove #C65C3F;
  border-left: medium groove #C65C3F;
  margin-right: 20px;
  padding: 10px 20px 0 20px;
  background-image: url("../images/white.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

#end1,
#end2,
#end3 {
  border-bottom: medium groove #C65C3F;
  border-right: medium groove #C65C3F;
  border-left: medium groove #C65C3F;
  margin-right: 20px;
  padding: 10px 10px 0 10px;
  background-image: url("../images/white.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

#pix {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33% 33% 33%;
  grid-template-columns: 33% 33% 33%;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  grid-template-areas: "pic1 pic2 pic3";
  width: 100%; }

  #credit img {
    width: 10% !important;
  }

#pix-tag {
  width: 100%;
  text-align: center;
  font-size: 1.6rem; }

#inside,
#outside,
#business {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  line-height: 2; }

#tests {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 33% 33% 33%;
  grid-template-columns: 33% 33% 33%;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  grid-template-areas: "test1 test2 test3" "test4 test5 test6";
  width: 100%; }

#test1,
#test2,
#test3,
#test4,
#test5,
#test6 {
  margin-right: 20px;
  padding: 0 10px 0 10px; }

#tests p {
  font-family: "Roboto", sans-serif;
  line-height: 1.5; }

#tests h3 {
  font-style: italic;
  line-height: 1.5; }

#logo {
  grid-area: logo;
  padding-bottom: 2%; }

.bx-wrapper {
  width: 60%; }

#box1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: box1; }

#box2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: box2; }

#box3 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: box3; }

#end1 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: end1; }

#end2 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: end2; }

#end3 {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: end3; }

#pic1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: pic1; }

#pic2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: pic2; }

#pic3 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: pic3; }

#test1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: test1; }

#test2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: test2; }

#test3 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: test3; }

#test4 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: test4; }

#test5 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: test5; }

#test6 {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: test6; }

#pic1 img,
#pic2 img,
#pic3 img {
  width: 90%;
  height: 300px;
  float: left;
  margin-right: 2%; }

#top p {
  font-size: 1.3rem;
  line-height: 1.2; }

#top li {
  font-size: 1.4rem;
  line-height: 1.4; }

#mid {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: mid;
  padding: 4% 10% 2% 10%; }

#bot {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: bot;
  padding: 2% 10% 2% 10%; }

#foot {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: foot;
  background-color: black;
  height: 200px; }

/* Add an active class to highlight the current page */
.active {
  background-color: #CE172E;
  color: white; }

#logo {
  float: left;
  width: 12%; }

#logo img {
  width: 100%; }

#bbb {
  float: left;
  width: 20%; }

#bbb img {
  width: 100%; }

#license h1 {
  font-family: "Playfair Display", serif;
  color: #CE172E; }

#license p {
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  line-height: 0.5; }

#license {
  float: left;
  width: 60%;
  padding-bottom: 2%;
  margin-left: 1%; }

#service-page,
#price-page,
#gallery-choices,
#contact-page,
#feedback-page {
  float: left;
  width: 100%; }

#service-page p,
#service-page li,
#price-page p,
#price-page li {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem; }

#price-page p {
  line-height: 1.7; }

#service-page h1,
#price-page h1,
#price-page h2,
#contact-page h1,
.slides h1,
#feedback-page h1 {
  font-family: "Playfair Display", serif;
  color: #CE172E; }

#form_title {
  width: 600px; }

#footer h1 {
  color: #CE172E;
  text-align: center;
  margin-top: 5%;
  font-size: 1.5rem; }

.slider img {
  -o-object-fit: fill;
  object-fit: fill; }

@media only screen and (max-width: 1100px) {
  .parallax {
    background-attachment: scroll; }
  #boxes {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-template-areas: "box1" "end1" "box2" "end2" "box3" "end3"; }
  #pix {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-template-areas: "pic1" "pic2" "pic3"; }
  #tests {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-template-areas: "test1" "test2" "test3" "test4" "test5" "test6"; }
  .bx-wrapper {
    width: 100%; }
  #license p {
    font-size: 1.1rem; }
  #box1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  #box2 {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  #box3 {
    -ms-grid-row: 5;
    -ms-grid-column: 1; }
  #end1 {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  #end2 {
    -ms-grid-row: 4;
    -ms-grid-column: 1; }
  #end3 {
    -ms-grid-row: 6;
    -ms-grid-column: 1; }
  #pic1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  #pic2 {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  #pic3 {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  #test1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
  #test2 {
    -ms-grid-row: 2;
    -ms-grid-column: 1; }
  #test3 {
    -ms-grid-row: 3;
    -ms-grid-column: 1; }
  #test4 {
    -ms-grid-row: 4;
    -ms-grid-column: 1; }
  #test5 {
    -ms-grid-row: 5;
    -ms-grid-column: 1; }
  #test6 {
    -ms-grid-row: 6;
    -ms-grid-column: 1; } }