@charset "UTF-8";

html,
* {
  padding: 0;
  margin: 0;
  /* Get rid of slight gap at top of page */
  margin-top: 0px;
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #f5f5f5;
  font-family: "Antic", sans-serif;
}

.container {
  position: relative;
  width: 90%;
  max-width: 1500px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15vw;
  padding-bottom: 5vw;
  background-color: #f7f7f7;
}

h1 {
  font-size: 2.5vw;
}

h2 {
  font-size: 2.2vw;
}

h3 {
  font-size: 1.75vw;
}

h4 {
  font-size: 1.25vw;
}

p {
  font-size: 1.2vw;
  text-align: center;
}

a {
  font-size: 1.5vw;
  text-decoration: none;
  color: black;
}

a:hover {
  color: #4d4d4d;
}

.basicDiv {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.basicVert {
  flex-direction: column;
}

.basicMargin {
  margin-bottom: 3vw;
}

.basicBorder {
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
}

/* <============= Name & Description =============> */

.topbar {
  color: #a09e9e;
  text-align: center;
}

.logo {
  margin: 2vw 0 2vw 0;
  color: #3b3939;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}

.desc {
  font-size: 1.7vw;
  text-align: center;
}

.headerImgDiv {
  position: relative;
}

#headerImg,
#headerImgBlank {
  width: 100%;
  height: auto;
}

#headerImgBlank {
  position: absolute;
}

#headerImg {
  /* visibility: hidden; */
  opacity: 1;
  -webkit-animation: fadein 0.5s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.5s;
  /* Firefox < 16 */
  -ms-animation: fadein 0.5s;
  /* Internet Explorer */
  -o-animation: fadein 0.5s;
  /* Opera < 12.1 */
  animation: fadein 0.5s;
}

#loaderTxt {
  position: absolute;
}

#loader {
  position: absolute;
  border: 0.25vw solid #f3f3f3;
  border-radius: 50%;
  border-top: 0.25vw solid #3498db;
  width: 2.5vw;
  height: 2.5vw;
  -webkit-animation: spin 0.5s linear infinite;
  /* Safari */
  animation: spin 0.5s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ========= Index Page Content ============== */

#projectsSection,
#geoContent,
#newImages {
  width: 90%;
  margin-top: 5vw;
  padding: 2vw;
}

#newImages {
  margin-bottom: 100vw;
}

.newImgDiv {
  margin-top: 2vw;
  position: relative;
}

#projectsSection {
  margin-bottom: 5vw;
}

#projectsSection h2 {
  font-size: 3vw;
}

#projectsSection p {
  font-size: 1.6vw;
}

#geoItems,
#projectsItems {
  width: 90%;
}

.projectPicH {
  width: 100%;
  height: auto;
  margin: 2vw 0;
}

.projectPicV {
  margin: 2vw 0;
  width: 60%;
  height: auto;
}

.newpicsblankH {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin: 2vw 0;
}

.newpicsblankV {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 2vw 0;
}

.projectPicSmallH {
  width: 40vw;
  height: auto;
  margin: 2vw 0;
}

.projectPicSmallV {
  width: auto;
  height: 30vw;
  margin: 2vw 0;
}

#videoItemDiv {
  position: relative;
  overflow: hidden;
  width: 40vw;
  padding-top: calc(40vw * 0.5625);
}

#videoItem {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===================================== */

#mugImg1,
#mugImg2 {
  text-align: center;
  max-width: 100%;
  height: auto;
  display: block;
  text-shadow: none;
  color: transparent;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 1;
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
  /* height/width of image */
  padding-top: 41%;
}

#mugImg1,
#mugImg2 {
  padding-top: 0;
  margin: 0;
}

.mainImage,
.productDiv,
.productTxt {
  display: flex;
  justify-content: center;
  align-items: center;
}

.productSection {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
  margin-bottom: 3vw;
  padding-bottom: 1vw;
  padding-top: 1vw;
}

#nicknackTxt {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1vw;
  margin-top: 3vw;
}

#nicknackTxt p {
  font-size: 1.5vw;
}

#shoppingCartPic {
  width: 100%;
  height: auto;
  position: relative;
}

#orderMugDiv,
#cardOrderBtnDiv,
#coasterOrderBtnDiv,
#bookmarkOrderBtnDiv,
#orderCalendarDiv,
#checkoutDiv,
#orderForm,
#contactDiv,
#redirectMain,
#responseSection,
#responseSection2,
#lightboxBtnDiv {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#orderForm,
#redirectMain {
  flex-direction: column;
  margin-top: 3vw;
  width: 75%;
}

#responseSection,
#responseSection2 {
  height: auto;
  flex-direction: column;
}

#contactDiv {
  align-items: flex-start;
  flex-direction: column;
}

#notes,
.formButtons,
#contactDiv label {
  margin-top: 0.5vw;
  font-size: 1vw;
}

#contactDiv input::placeholder {
  font-size: 1vw;
}

#notes {
  margin-bottom: 1vw;
}

#lightboxBtnDiv {
  display: none;
  margin-top: 0.5vw;
}

#mugOrderBtn,
#cardOrderBtn,
#coasterOrderBtn,
#bookmarkOrderBtn,
#printOrderBtnDiv {
  position: absolute;
  right: 3vw;
  bottom: 0.5vw;
}

#orderMugDiv,
#coasterOrderBtnDiv,
#bookmarkOrderBtnDiv,
#orderCalendarDiv {
  visibility: hidden;
}

#cardOrderBtnDiv {
  position: absolute;
  bottom: 1.1vw;
  visibility: hidden;
}

.productDiv {
  justify-content: space-around;
  margin-bottom: 4vw;
  width: 100%;
  height: auto;
}

.productTxt {
  margin-bottom: 4vw;
  position: relative;
}

.imgDiv {
  position: relative;
  top: 0;
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* ========== Pulsing Button Annimation ========== */

.pulsingButton {
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  background-color: #ff0000;
  -webkit-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulsing 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  transition: all 300ms ease-in-out;
}

.pulsingButton:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-moz-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@-ms-keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

@keyframes pulsing {
  to {
    box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
  }
}

/* ================================================== */

.myFormBtn {
  width: 15vw;
  height: 3vw;
  background-color: white;
  border: 1px solid black;
  padding: 1px;
  opacity: 0.5;
}

#formBtnDiv {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#formButtonsDiv {
  width: 60vw;
  height: 3vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 3vw;
}

.myFormBtn {
  font-size: 1.5vw;
}

#captionTxt {
  display: block;
}

.btnItem {
  width: 15vw;
  height: 3vw;
  background-color: white;
  border: 1px solid black;
  padding: 1px;
  opacity: 0.5;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnBarCart {
  box-sizing: border-box;
  width: 100%;
  height: 3vw;
  position: absolute;
  top: 10.3vh;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 1vw;
  padding-right: 1vw;
}

.btnBar,
.btnBar2 {
  box-sizing: border-box;
  height: 3vw;
  z-index: 10;
  position: absolute;
  justify-content: space-between;
  padding-left: 1vw;
  padding-right: 1vw;
}

.btnBar {
  top: 0.6vw;
}

.btnBar2 {
  bottom: 0.6vw;
}

.btnBarCart {
  top: 17.3vw;
}

#printsPicStyles,
#nicknackDiv,
#orderSection {
  flex-direction: column;
}

#selectedImgsSection,
#stockLightbox {
  flex-direction: column;
  position: relative;
  margin-top: 2vw;
}

#collectedPics,
#collectedPicsStock {
  display: flex;
  width: auto;
  padding: 0.5vw 1vw;
}

#collectedPics {
  height: 7vw;
  justify-content: center;
  align-items: center;
}

#collectedPicsStock {
  height: 10vw;
  overflow: auto;
  white-space: nowrap;
  overflow-y: hidden;
}

#selectedImgsTxt {
  margin: 0.5vw 0 0.2vw 0;
  text-align: center;
  font-size: 1.5vw;
}

.printsTxtDiv {
  margin-top: 2vw;
  margin-bottom: 2vw;
}

#displayPrints {
  width: 90%;
  flex-direction: row;
  margin-top: 1vw;
  margin-bottom: 2vw;
  padding-bottom: 2vw;
}

.displayPrintItem {
  width: 30vw;
  height: auto;
  flex-direction: column;
}

#printSelectSection {
  position: relative;
  top: 0;
  background-color: #f7f7f7;
  flex-direction: column;
  margin-top: 1vw;
  margin-bottom: 4vw;
  padding: 1.5vw 0;
}

#galleryLink {
  font-size: 1.7vw;
}

#greyOverlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 110%;
  height: 110%;
  background-color: grey;
  opacity: 0.9;
}

#warningDiv,
#warningDiv2,
#warningDiv3 {
  position: absolute;
  left: auto;
  right: auto;
  top: 45vw;
  bottom: auto;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 20vw;
  height: 10vw;
  background-color: white;
  opacity: 1;
  padding: 0.5vw;
}

#warningDiv2 {
  width: 34vw;
  height: 12vw;
}

#warningDiv3 {
  position: fixed;
  width: 40vw;
  height: 12vw;
  top: 20vw;
}

#warningBtnDiv {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 2vw;
  position: absolute;
  bottom: 1vw;
}

#warningTxt,
#warningTxt2 {
  width: 90%;
  position: absolute;
  top: 0.5vw;
  text-align: justify;
  margin: 1vw;
  font-size: 1.4vw;
}

#warningTxt2 {
  text-align: center;
}

#okBtn {
  padding: 1vw;
  width: 2vw;
  cursor: pointer;
  background-color: #5079df;
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
  height: 0.3vw;
}

#cancelBtn {
  padding: 1vw;
  width: 2vw;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
  height: 0.3vw;
}

#printBox {
  justify-content: space-evenly;
  align-items: flex-start;
  position: relative;
  flex-wrap: wrap;
  margin-top: 1vw;
  padding: 0 1vw 1vw 1vw;
  box-sizing: border-box;
}

#numImages {
  position: absolute;
  top: 0;
  left: 0.25vw;
}

#imgsTotal {
  position: relative;
  width: 18vw;
  align-items: flex-start;
  font-size: 1.2vw;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
  margin: 0.3vw 0;
  padding: 0.1vw;
}

#imgsTotalNum {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===== Gallery Category Tree ===== */

#galleryTree {
  width: 20%;
  height: auto;
  text-align: left;
  padding-top: 1vw;
  padding-bottom: 1vw;
  margin-bottom: auto;
}

#galleryTree {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* left: 2vw; */
}

li {
  padding: 0.2vw 0;
}

li span {
  font-size: 1vw;
}

li a span {
  font-size: 1vw;
}

/* =============== */

#printDisplay {
  flex-wrap: wrap;
  padding-top: 1.5vw;
  padding-bottom: 1vw;
  justify-content: space-evenly;
  align-items: flex-start;
  width: 100%;
  margin-left: 2vw;
}

#noImages {
  flex-direction: column;
  padding: 2vw;
}

#noImages p a {
  font-size: 2vw;
  color: #0000ee;
}

#noImages p {
  font-size: 2vw;
}

.printItem,
.dummyPrintItem {
  width: 40%;
  height: auto;
  flex-direction: column;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
  margin: 1vw;
  padding: 1vw;
}

.printImg:hover {
  cursor: zoom-in;
  opacity: 0.8;
}

.imgTextDiv {
  flex-wrap: wrap;
  flex-direction: column;
  margin-bottom: 1vw;
}

.imgTextDiv p {
  text-align: center;
}

.totalDiv,
.qtyDiv {
  display: none;
  text-align: center;
  font-size: 1.5vw;
  position: relative;
}

.qtyDiv {
  margin-bottom: 1vw;
}

.printPrice {
  position: relative;
  margin-bottom: 1vw;
  font-size: 1.2vw;
}

.imgIDNumber {
  visibility: hidden;
  position: absolute;
}

.orderDiv,
.collectionDiv {
  position: relative;
  text-align: center;
  display: none;
  padding-top: 1vw;
}

.collectionDiv {
  display: flex;
}

.cartCheckedDiv,
.collectionCheckedDiv {
  width: 2vw;
  height: 2vw;
  position: absolute;
  right: 0;
  display: none;
}

.dropdownDiv {
  padding: 1vw;
  position: relative;
}

select {
  font-size: 1vw;
  padding: 0.5vw;
  border-color: #bedaf9;
  background-color: #f5f5f5;
  text-align: center;
}

select:active,
select:hover,
select:focus {
  /* Get rid of the blue outline when dropdown is used */
  outline: none;
}

optgroup {
  font-size: 0.7vw;
}

.orderBtn,
.collectionBtn,
.clearBtn {
  text-align: center;
  width: 9vw;
  padding: 0.5vw;
  background-color: #bedaf9;
  font-size: 1.4vw;
  margin-left: auto;
  margin-right: auto;
  color: #5a5a5a;
}

.clearBtn {
  font-size: 1.2vw;
  position: absolute;
  right: 0.3vw;
  bottom: 0.3vw;
  width: auto;
  height: 1.5vw;
  padding: 0.5vw;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  background-color: #e6f1fe;
}

#clearBtnGallery {
  top: -4vw;
  right: 0.5vw;
}

.collectionBtn {
  width: 15vw;
}

.collectionBtn:hover {
  cursor: pointer;
}

.orderBtn:hover {
  cursor: pointer;
  background-color: #acc6e4;
}

#outputDiv {
  display: none;
  padding: 0.5vw;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
}

#orderTitle {
  padding: 0.5vw;
  font-size: 2vw;
}

#mugImgDiv {
  width: 6vw;
  height: auto;
  position: absolute;
  top: 0.1;
  left: 1.5vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

#mugImgWarning {
  font-size: 1vw;
  visibility: hidden;
}

.tableDiv,
#cardTable,
#cardMockupDiv,
#tableDivSummary,
#coasterTable,
#bookmarkTable,
#mugTable {
  position: relative;
  width: 95%;
  flex-direction: column;
  padding: 1vw 2vw;
  margin-bottom: 3vw;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
}

#tableDivSummary {
  margin-bottom: 0;
  margin-top: 3vw;
}

#tableDivSummary {
  width: 100%;
  padding: 1vw;
  margin-bottom: 2vw;
}

.trashIcon {
  cursor: pointer;
}

#internalTxtDiv,
#retAddressDiv {
  flex-direction: column;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
  visibility: hidden;
}

#retAddressDiv {
  width: 42%;
  padding: 0.5vw 1vw 0.5vw 0.5vw;
  position: absolute;
  top: 20.5vw;
  left: 33vw;
}

#internalTxtDiv {
  width: 40%;
  padding: 0.5vw 1vw 0.5vw 0.5vw;
  position: absolute;
  top: 12vw;
  left: 33vw;
}

.addressSpan,
.textSpan {
  width: 100%;
}

#retAdd1 {
  margin-bottom: 1vw;
}

#retAdd1,
#retAdd2,
#intTxt1,
#intTxt2 {
  display: none;
  width: 100%;
  height: auto;
  justify-content: flex-start;
  align-items: center;
}

#coasterTableTable,
#bookmarkTableTable {
  padding-bottom: 8vw;
}

#mugTableTable {
  padding-bottom: 4vw;
  flex-direction: column;
}

#coasterTable,
#bookmarkTable,
#mugTable,
#cardTable,
#cardOrderTable,
#summaryTable,
#calendarTable {
  margin-top: 1.5vw;
}

#coasterTable,
#bookmarkTable,
#mugTable,
#cardTable {
  padding: 1vw;
}

#cardTableTable {
  padding-bottom: 16vw;
}

#calendarTable {
  padding: 1vw 0vw;
  width: 80%;
  margin: 2vw 0;
  box-sizing: border-box;
}

#calendarTableTable {
  width: 80%;
  margin-bottom: 1vw;
  margin-top: 0.5vw;
}

.calendarTxt {
  width: 45vw;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 1vw 0vw;
}

#calendarTitle {
  font-size: 3vw;
  opacity: 0.7;
  position: relative;
  margin-bottom: 1vw;
}

#cardMockParent,
#coasterMockParent,
#bookmarkMockParent {
  width: 100%;
  height: 14vw;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-bottom: 1vw;
  padding-left: 1vw;
  position: absolute;
  left: 0;
  visibility: hidden;
}

#cardMockParent {
  top: 14vw;
}

#coasterMockParent,
#bookmarkMockParent {
  height: 10vw;
  bottom: 0.2vw;
}

#cardMockupDiv,
#coasterMockupDiv,
#bookmarkMockupDiv {
  width: 30vw;
  height: 100%;
  flex-direction: row;
  justify-content: space-around;
  padding: 0.5vw;
  background-color: #dedede;
  margin-bottom: 0;
}

#coasterMockupDiv,
#bookmarkMockupDiv {
  display: flex;
  justify-content: space-evenly;
  position: relative;
}

#cardWarning,
#coasterWarning,
#bookmarkWarning {
  width: 30vw;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.05vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
}

#coasterWarning,
#bookmarkWarning {
  justify-content: center;
  width: 100%;
}

#warningSpan1,
#warningSpan3 {
  margin-right: 1.2vw;
}

#warningSpan2,
#warningSpan4 {
  margin-left: 1.2vw;
}

#cardWarning span {
  font-size: 1.2vw;
}

#cardMock1Div,
#cardMock2Div,
#coasterMock1Div,
#coasterMock2Div,
#bookmarkMock1Div,
#bookmarkMock2Div {
  width: 12vw;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#coasterMock1Div,
#coasterMock2Div,
#bookmarkMock1Div,
#bookmarkMock2Div {
  width: 10vw;
  height: 10vw;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
}

#tdDescriptionCard1,
#tdDescriptionCard2,
#cardPrice1,
#cardPrice2,
#cardOrder1,
#cardOrder2,
#cardQtyTotal1,
#cardQtyTotal2 {
  font-size: 1.2vw;
}

/* Input in the card order page */

input {
  padding: 0.2vw;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: #a0a0a0;
}

textarea::placeholder {
  font-size: 1vw;
  font-weight: bold;
  opacity: 0.5;
  color: #a0a0a0;
}

table,
tfoot {
  width: 100%;
  empty-cells: hide;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 0.5vw 1.2vw;
  text-align: center;
}

th {
  font-size: 1.2vw;
}

td #tdDescription {
  text-align: left;
}

td {
  font-size: 1.5vw;
}

/* ===================== Modal ================================= */

.modal {
  display: none;
  position: fixed;
  z-index: 20;
  padding-top: 3vw;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  text-align: center;
}

#modalWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* Modal Content (image) Horizontal */
.modal-content {
  margin: auto;
  display: block;
  height: auto;
  width: 50vw;
  max-width: 1000px;
}

/* Modal Content (image) Vertical */
.modal-content2 {
  height: 40vw;
  width: auto;
}

#myModal:hover {
  cursor: zoom-out;
}

#caption,
#notice {
  /* Captions of Modal Image */
  margin: auto;
  display: block;
  width: 100%;
  text-align: center;
  color: #ccc;
  padding-top: 1vw;
}

#notice {
  padding-top: 0;
}

.modal-content,
#caption,
#notice {
  /* Add Animation */
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@media only screen and (max-width: 700px) {

  /* 100% Image Width on Smaller Screens */
  .modal-content {
    width: 100%;
  }
}

.modal-content {
  /* Add Animation */
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* ===================== End Modal =========================== */

#calendarSection {
  position: relative;
  top: 2vw;
  width: 100%;
  height: auto;
}

.calendarBlock,
#calendarTableBlock {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.calendarImg,
.imgDiv {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}

/* ======================================================== */

#contactAreaDiv {
  /* Text and image on the Contact page */
  width: 75%;
  padding-top: 5vw;
  margin: 3vw auto 6vw auto;
  flex-direction: column;
  padding: 1vw 0.5vw 1vw 1vw;
  border-style: solid;
  border-width: 1px;
  border-color: #bedaf9;
}

#contacKelvinForm {
  display: inline-block;
  text-align: left;
  width: 100%;
  margin-top: 5vw;
}

.contactFormItem {
  justify-content: space-around;
  align-items: flex-start;
  flex-direction: row;
}

.contactItem {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  margin: 0.5vw 0;
}

.contactLbl {
  margin-right: 1vw;
  width: 25vw;
  font-size: 1.2vw;
  opacity: 0.5;
}

.contactFormInput {
  width: 24vw;
}

input[type="text"],
input[type="email"] {
  font-size: 1.2vw;
  opacity: 0.5;
  width: 100%;
}

#contactFormInputB {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  /* margin-left: 1.4vw; */
}

#contactItemB {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
}

#messageTxt {
  height: 10vw;
  width: 55vw;
  font-size: 1.2vw;
  opacity: 0.5;
}

.myFormBtn:active {
  background-color: #b7e6c5;
  cursor: pointer;
  color: limegreen;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.myFormBtn:visited,
.myFormBtn:focus,
.myFormBtn:hover {
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ======= Footer Bar With Icons & Secondary Pages ======= */

#footerBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 2vw;
  position: absolute;
  bottom: -5vw;
  right: 0vw;
  margin-bottom: 5vw;
}

#footerMenu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: auto;
  opacity: 0.3;
}

.footerTxt {
  font-size: 1.2vw;
}

#iconbar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  height: auto;
  width: 10%;
}

.iconBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45%;
  height: 100%;
}

.iconBox img {
  width: 1.5vw;
  height: 1.5vw;
}

#instaPicBtn {
  width: 1.5vw;
  height: 1.5vw;
}

#UtubePicBtn,
#UtubePicBtn2 {
  width: 2vw;
  height: 1.5vw;
  opacity: 0.7;
}

/* ===== Privacy, About & Sitemap Pages ===== */

.extrasSection {
  /* justify-content: center; */
  align-items: flex-start;
  flex-direction: column;
  margin-top: 2vw;
  padding: 0 2vw;
  width: 80%;
}

.extrasSection p {
  text-align: left;
}

.extrasSection a {
  font-size: 1.2vw;
  text-decoration: initial;
  color: #0000ee;
}

.signaturePic {
  /* Photo at bottom of privacy, stiemap, etc */
  height: 10vw;
  width: auto;
}

#linksTable {
  width: 70%;
}

#linksTable tbody tr td,
#linksTable tbody tr th {
  border: none;
}

#linksTable tbody tr td {
  text-align: left;
}

#linksTable tbody tr td a {
  font-size: 1.5vw;
}

#linksTable tbody tr td a {
  text-decoration: initial;
  color: #0000ee;
}

/* <== Fade transition on page load data for .mainNav & .logo ==> */

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadein {

  /* Firefox < 16 */
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadein {

  /* Safari, Chrome and Opera > 12.1 */
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-ms-keyframes fadein {

  /* Internet Explorer */
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-o-keyframes fadein {

  /* Opera < 12.1 */
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*  ================== Media Queries ===================== */

/* @media screen and (min-width: 1200px){}  Desktop */
/*@media screen and (min-width: 1025px) and (max-width: 1199px){} /* small laptop */
/*@media screen and (min-width: 768px) and (max-width: 1024px){} /* tablet */
/*@media screen and (min-width: 575px) and (max-width: 767.98px){} /* tablet and large mobiles */

/* Mobile */
@media screen and (min-width: 320px) and (max-width: 480px) {
  h1 {
    font-size: 6vw;
  }

  h2 {
    font-size: 5vw;
  }

  h3 {
    font-size: 4vw;
  }

  h4 {
    font-size: 3.5vw;
  }

  p {
    font-size: 3.5vw;
    text-align: center;
  }

  li {
    padding: 0;
    line-height: 2.5vw;
  }

  .container {
    width: 98%;
    padding-bottom: 10vw;
    margin-bottom: 30vw;
  }

  .topbar {
    height: 7vh;
  }

  .logo {
    width: 100%;
  }

  .desc,
  #galleryLink {
    margin-top: 1vw;
    font-size: 4.5vw;
  }

  #printDisplay {
    margin-top: 2vw;
  }

  #numImages {
    top: -1vw;
  }

  #clearBtnGallery {
    top: -11vw;
    width: 18vw;
    height: 3.1vw;
    font-size: 2.5vw;
  }

  .btnBar,
  .btnBar2 {
    height: 5vw;
  }

  .btnBar {
    top: 1.3vw;
  }

  .btnBar2 {
    bottom: 1.3vw;
  }

  .btnItem {
    width: 25vw;
    height: 5vw;
  }

  .btnItem div {
    font-size: 3.5vw;
  }

  #projectsSection h2 {
    font-size: 5vw;
  }

  #projectsSection p {
    font-size: 3.5vw;
  }

  .projectPicH {
    width: 90%;
  }

  .projectPicV {
    height: 60vw;
  }

  #videoItemDiv {
    width: 70vw;
    padding-top: calc(70vw * 0.5625);
  }

  #footerBar {
    height: 4vw;
  }

  #footerMenu {
    width: 70%;
  }

  #footerMenu a span {
    font-size: 3vw;
  }

  #iconbar {
    width: 30%;
    height: 100%;
  }

  .iconBox {
    height: 100%;
    width: 20%;
    margin-left: 3vw;
    margin-right: 3vw;
  }

  #iconbar .iconBox img {
    width: auto;
    height: 100%;
  }

  .signaturePic {
    /* Photo at bottom of privacy, stiemap, etc */
    height: 30vw;
    width: auto;
  }

  .extrasSection a {
    font-size: 4vw;
  }

  #linksTable {
    width: 90%;
    margin-bottom: 8vw;
  }

  td,
  #linksTable tbody tr td a {
    font-size: 3vw;
  }

  /* Make the heading row higher to add space */
  #linksTable tbody tr th {
    line-height: 10vw;
  }

  .blogArticleImgDiv {
    margin: 1vw 0 4vw 0;
  }

  #contactAreaDiv {
    width: 95%;
    padding: 1vw 0.5vw 1vw 2vw;
    margin: 3vw auto 10vw auto;
  }

  .contactLbl {
    font-size: 3vw;
  }

  #contactFormInputB {
    margin-left: 6.5vw;
  }

  .myFormBtn {
    font-size: 3vw;
    width: 20vw;
    height: 6vw;
    color: black;
  }

  #formButtonsDiv {
    width: 70vw;
    height: 5vw;
  }

  #modalWrapper {
    position: relative;
    width: 100%;
    top: 15vh;
  }

  /* Modal Content (image) Horizontal */
  .modal-content {
    margin: auto;
    display: block;
    height: auto;
    width: 90%;
  }

  /* Modal Content (image) Vertical */
  .modal-content2 {
    width: 65%;
  }

  /* Modal caption text */
  #caption {
    width: 85%;
  }

  #printSelectSection {
    margin-bottom: 10vw;
    padding-bottom: 5vw;
  }

  #stockLightbox {
    height: 20vw;
  }

  #selectedImgsTxt {
    font-size: 3vw;
  }

  #collectedPics {
    height: 8vw;
    margin: 4vw 0 1vw 0;
  }

  .collectionCheckedDiv {
    width: 4vw;
    height: 4vw;
  }

  #collectedPics div img {
    height: 8vw !important;
  }

  .collectionBtn {
    width: 20vw;
  }

  .clearBtn {
    width: 22vw;
    height: 4vw;
    padding: 0.5vw;
    font-size: 3.3vw;
  }

  select {
    font-size: 2.5vw;
    position: relative;
  }

  .printPrice,
  .qtyDiv {
    font-size: 3vw;
  }

  .totalDiv {
    font-size: 3.6vw;
  }

  #outputDiv {
    padding-bottom: 2vw;
    margin-bottom: 6vw;
  }

  #orderTitle {
    font-size: 3vw;
  }

  #outputTable tbody tr td,
  #outputTable tbody tr th {
    font-size: 2vw;
  }

  #summaryTable tbody tr th {
    font-size: 2.1vw;
  }

  #tableDivSummary {
    margin-bottom: 8vw;
  }

  #tableDivSummary table tbody tr th {
    font-size: 3vw;
  }

  .orderBtn {
    width: 25vw;
    height: auto;
    font-size: 3vw;
  }

  #notes label {
    font-size: 3vw;
  }

  #notesTxt {
    font-size: 2.2vw;
  }

  #orderForm {
    margin-bottom: 8vw;
  }

  .cartCheckedDiv {
    width: 5.5vw;
    height: 5.5vw;
  }

  .printItem {
    width: 70%;
  }
}