* {
   box-sizing: border-box;
}

body, html {
   margin: 0;
   padding: 0;
}

#wrapper {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

#wrapper > .logo {
   width: 100%;
   height: 250px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding-top: 20px;
   padding-bottom: 10px;
}
#wrapper > .logo > img {
   width: 33%;
   min-width: 500px;
   max-width: 600px;
}
@media screen and (max-width: 800px) {
   #wrapper > .logo {
      height: 175px;
   }
   #wrapper > .logo > img {
      width: 80%;
      min-width: 300px;
      max-width: 500px;
   }
}

#wrapper > .memo {
   width: 70%;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-bottom: 30px;
}
#wrapper > .memo p {
   color: #47475b;
   font-family: 'Lora', serif;
   font-size: 22px;
   text-align: center;
}
#wrapper > .memo span {
   font-size: 23px;
}
@media screen and (max-width: 800px) {
   #wrapper > .memo {
      width: 90%;
      min-width: 0;
   }
   #wrapper > .memo p {
      font-size: 18px;
   }
   #wrapper > .memo span {
      font-size: 20px;
   }
}

#wrapper > .banner {
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
   padding-top: 50px;
   padding-bottom: 10px;
   background-color: #47475b;
   box-shadow: 0px 3px 10px black;
}
#wrapper > .banner > .memo {
   width: 60%;
   max-width: 1100px;
}
#wrapper > .banner > .memo p {
   font-family: 'Lora', serif;
   font-size: 23px;
   line-height: 35px;
   color: #c9c9c9;
}
#wrapper > .banner > .memo span {
   font-size: 25px;
   font-weight: 700;
}
#wrapper > .banner > .memo > ul {
   padding-top: 0px;
   font-family: 'Lora', serif;
   font-size: 22px;
   line-height: 35px;
   color: #c9c9c9;
}
@media screen and (max-width: 1200px) {
   #wrapper > .banner > .memo {
      width: 80%;
   }
   #wrapper > .banner > .memo p {
      font-family: 'Lora', serif;
      font-size: 19px;
      line-height: 35px;
      color: #c9c9c9;
   }
   #wrapper > .banner > .memo span {
      font-size: 20px;
      font-weight: 700;
   }
   #wrapper > .banner > .memo > ul {
      padding-top: 0px;
      font-family: 'Lora', serif;
      font-size: 18px;
      line-height: 35px;
      color: #c9c9c9;
   }
}
@media screen and (max-width: 800px) {
   #wrapper > .banner {
      padding-top: 10px;
      padding-bottom: 10px;
   }
   #wrapper > .banner > .memo {
      width: 80%;
   }
   #wrapper > .banner > .memo p {
      font-family: 'Lora', serif;
      font-size: 14px;
      line-height: 28px;
      color: #c9c9c9;
      text-align: center;
   }
   #wrapper > .banner > .memo span {
      font-size: 16px;
      font-weight: 700;
   }
   #wrapper > .banner > .memo > ul {
      padding-top: 0px;
      font-family: 'Lora', serif;
      font-size: 12px;
      line-height: 28px;
      color: #c9c9c9;
   }
}

#wrapper > .banner > .virtues {
   width: 70%;
   height: 60px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
   left: 0px;
   right: 0px;
   bottom: 0px;
   font-family: 'Lora', serif;
   font-size: 15px;
   color: rgba(180, 180, 180, 0.65);
}
#wrapper > .banner > .virtues > .virtue {
   height: 100%;
   flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}
#wrapper > .banner > .virtues > .virtue {
   height: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}
#wrapper > .banner > .virtues > .virtue > p {
   font-family: 'Lora', serif;
   font-size: 17px;
   font-style: italic;
}
@media screen and (max-width: 800px) {
   #wrapper > .banner > .virtues {
      width: 90%;
      height: auto;
      font-size: 9px;
      flex-wrap: wrap;
   }
   #wrapper > .banner > .virtues > .virtue {
      min-width: 100px;
      height: auto;
   }
   #wrapper > .banner > .virtues > .virtueDivide {
      display: none;
   }
}

#wrapper > .titles {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}
#wrapper >.titles > div {
   width: 100%;
   max-width: 1920px;
   height: 500px;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding-left: 7%;
   padding-right: 5%;
}
@media screen and (max-width: 1000px) {
    #wrapper >.titles > div {
        flex-direction: column;
        justify-content: center;
        height: 900px;
    }
}
@media screen and (max-width: 800px) {
    #wrapper >.titles > div {
        flex-direction: column;
        justify-content: center;
        height: 850px;
    }
}
#wrapper > .titles > div:nth-child(even) {
   background-color: whitesmoke;
}
@media screen and (max-width: 1000px) {
   #wrapper > .titles > div:nth-child(even) {
      flex-direction: column-reverse;
   }
}
#wrapper > .titles > div > .details {
   /* height: 100%; */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
}
@media screen and (min-width: 1000px) {
   #wrapper > .titles > div:nth-child(odd) > .details {
      margin-right: 10%;
   }
   #wrapper > .titles > div:nth-child(even) > .details {
      margin-left: 10%;
   }
}

@media screen and (max-width: 1000px) {
   #wrapper > .titles > div > .details {
      margin-bottom: 30px;
   }
}

#wrapper > .titles > div > .details a {
   color: #47475b;
   text-decoration: underline;
   cursor: pointer;
}

#wrapper > .titles > div > .details > h1 {
   padding-bottom: 3px;
   margin-bottom: 15px;
   font-family: 'EB Garamond', serif;
   font-size: 33px;
   font-weight: normal;
   line-height: 35px;
   color: #47475b;
   border-bottom: 2px solid #f55f2f;
}
@media screen and (max-width: 1000px) {
   #wrapper > .titles > div > .details > h1 {
      text-align: center;
   }
}
@media screen and (max-width: 800px) {
   #wrapper > .titles > div > .details > h1 {
      font-size: 24px;
      line-height: 28px;
   }
}
#wrapper > .titles > div > .details > div {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: stretch;
   padding-left: 5%;
   padding-right: 5%;
   margin-bottom: 10px;
}
#wrapper > .titles > div > .details > div > p {
   margin: 0;
   margin-bottom: 3px;
   padding: 0;
   font-family: 'Lora', serif;
   font-size: 19px;
}
#wrapper > .titles > div > .details > div:last-child > p:last-child {
   font-size: 16px;
}
@media screen and (max-width: 800px) {
   #wrapper > .titles > div > .details > div {
      margin-bottom: 25px;
   }
   #wrapper > .titles > div > .details > div p {
      font-size: 18px;
   }
   #wrapper > .titles > div > .details > div:last-child > p:last-child {
      font-size: 15px;
   }
}
#wrapper > .titles > div > .details > div:last-child > p:last-child {
   color: #747474;
}

#wrapper > .titles > div > .details > div > .buyLink {
   width: 265px;
   text-decoration: none;
}
#wrapper > .titles > div > .details > div > .buyLink > .BuyButton {
   width: 100%;
   height: 40px;
   background: none;
   padding-left: 10px;
   border: 2px solid grey;
   border-radius: 3px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   margin-bottom: 10px;
}
#wrapper > .titles > div > .details > div > .buyLink > .BuyButton > p {
   color: #120554;
   font-family: 'Lora', serif;
   font-size: 16px;
   font-weight: 500;
}
#wrapper > .titles > div > .details > div > .buyLink > .BuyButton > img {
   margin-left: 5px;
   max-height: 25px;
}
/*#wrapper > .titles > div > .details > div > .BuyButtons {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
   margin-bottom: 10px;
}
#wrapper > .titles > div > .details > div > .BuyButtons > div {
   margin-right: 30px;
}
#wrapper > .titles > div > .details > div > .BuyButtons > div img {
   width: 100px;
   background-color: whitesmoke;
   cursor: pointer;
}
@media screen and (max-width: 800px) {
   #wrapper > .titles > div > .details > div > .BuyButtons {
      margin-bottom: 25px;
   }
   #wrapper > .titles > div > .details > div > .BuyButtons > div {
      margin-right: 15px;
   }
   #wrapper > .titles > div > .details > div > .BuyButtons > div img {
      width: 75px;
   }
}
#wrapper > .titles > div:nth-child(even) > .details > div > .BuyButtons > div img {
   background-color: white;
}
#wrapper > .titles > div > .details > div > .BuyButtons > div > p {
   padding: 0;
   margin: 0;
   text-align: center;
}*/

#wrapper > .titles > div > .images {
   width: 40%;
   /* height: 85%; */
   max-height: 400px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
@media screen and (max-width: 1000px) {
   #wrapper > .titles > div > .images {
      align-items: center;
      justify-content: flex-start;
   }
}
#wrapper > .titles > div > .images img {
   display: block;
   max-height: 390px;
   margin: 0 auto;
   max-width: 100%;
   min-width: 350px;
}
#wrapper > .titles > div > .images > .gallery {
   max-height: 90%;
   min-width: 400px;
}
#wrapper > .titles > div > .images > .gallery .gallery-cell {
   width: 100%;
}
@media screen and (max-width: 1000px) {
   #wrapper > .titles > div > .images > .gallery {
      max-height: 90%;
      min-width: 500px;
   }
}
@media screen and (max-width: 800px) {
   #wrapper > .titles > div > .images > .gallery {
      max-height: 50%;
      min-width: 300px;
   }
   #wrapper > .titles > div > .images img {
      min-width: 200px;
   }
}

#wrapper > .contact {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 50px;
   padding-top: 20px;
   padding-bottom: 20px;
   margin-bottom: 50px;
}
#wrapper > .contact > h1 {
   font-family: 'EB Garamond', serif;
   font-size: 28px;
   font-weight: 700;
   color: #47475b;
   margin-bottom: 0px;
}
#wrapper > .contact > p {
   width: 80%;
   text-align: center;
   font-family: 'EB Garamond', serif;
   font-size: 18px;
   color: #47475b;
   margin-bottom: 30px;
}
#wrapper > .contact > div {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}
#wrapper > .contact > div > div {
   width: 20%;
   min-width: 400px;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   margin-bottom: 20px;
}
#wrapper > .contact > div > div > p {
   font-family: 'EB Garamond', serif;
   font-size: 20px;
   margin: 0;
   margin-bottom: 5px;
   padding: 0;
}
#wrapper > .contact > div > div > input {
   width: 100%;
   height: 40px;
   padding-left: 10px;
   font-family: 'Lora', serif;
   font-size: 17px;
   background-color: whitesmoke;
   border: 2px solid #dadada;
   border-radius: 3px;
}
#wrapper > .contact > div > div > textarea {
   resize: vertical;
}
#wrapper > .contact > div > .checks {
   width: 30%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   font-family: 'Lora', serif;
   font-size: 17px;
   color: #737373;
}
#wrapper > .contact > div > .checks a {
   color: #47475b;
}
#wrapper > .contact > div > .checks > div {
   margin-top: 10px;
}
#wrapper > .contact > div > .checks input[type="checkbox"] {
}
#wrapper > .contact > div > .message {
   width: 30%;
}
@media screen and (max-width: 800px) {
   #wrapper > .contact > div > div {
      width: 80%;
      max-width: 400px;
      min-width: 0;
   }
   #wrapper > .contact > div > .message {
      width: 80%;
      max-width: 400px;
   }
   #wrapper > .contact > div > .checks {
      width: 80%;
      max-width: 400px;
   }
}
#wrapper > .contact > div > .message > textarea {
   height: 200px;
   padding-left: 10px;
   font-family: 'EB Garamond', serif;
   font-size: 17px;
   border: 2px solid #dadada;
}
#wrapper > .contact > div > .g-recaptcha {
   display: flex;
   flex-direction: column;
   align-items: center;
}
@media screen and (max-width: 800px) {
   #wrapper > .contact > div > .g-recaptcha {
      width: 80%;
   }
}
#wrapper > .contact > div > .submit {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}
#wrapper > .contact > div > .submit > button {
  width: 125px;
  height: 30px;
  background: white;
  border: 2px solid #c3410b;
  border-radius: 5px;
  box-shadow: 0px 1px 3px #000000;
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  font-weight: 700;
  color: #47475b;
  margin-top: 20px;
  cursor: pointer;
}
#wrapper > .contact > div > .submit > button:focus {
  outline: 0;
}
#wrapper > .contact > div > .submit > button:active {
  border-style: inset;
  box-shadow: inset 0px 2px 3px #312978;
}
#wrapper > .contact > div > .working {
   display: none;
   font-weight: normal;
   font-size: 22px;
   margin: 0;
}

.workingSpinner {
   display: none;
   animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(270deg);
   }
}
.workingSpinner .path {
   stroke-dasharray: 187;
   stroke-dashoffset: 0;
   transform-origin: center;
   animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
@keyframes colors {
   0% {
      stroke: #47475b;
   }
   50% {
      stroke: #c3410b;
   }
   100% {
      stroke: #47475b;
   }
}
@keyframes dash {
   0% {
      stroke-dashoffset: 187;
   }
   50% {
      stroke-dashoffset: 46.75;
      transform: rotate(135deg);
   }
   100% {
      stroke-dashoffset: 187;
      transform: rotate(450deg);
   }
}

#wrapper > .contact > h1.success, #wrapper > .contact > h1.err-gen {
   display: none;
   font-weight: 700;
   font-size: 23px;
   margin: 0;
   color: #026b16;
}
#wrapper > .contact > h1.err-gen {
   color: #6b0202;
}
#wrapper > .contact > p.success, #wrapper > .contact > p.err-gen, #wrapper > .contact > p.err-empty, #wrapper > .contact > p.err-terms, #wrapper > .contact > p.err-captcha {
   display: none;
   font-weight: normal;
   font-size: 20px;
   margin: 0;
   color: #47475b;
}
#wrapper > .contact a {
   color: #47475b;
   text-decoration: underline;
   cursor: pointer;
}

#wrapper > .footer {
   width: 100%;
   /* height: 80px; */
   display: flex;
   flex-direction: column;
   align-items: center;
   border-top: 2px solid #dadada;
   margin-bottom: 10px;
}
#wrapper > .footer > h1 {
   display: block;
   padding: 0;
   margin: 0;
   margin-top: 10px;
   margin-bottom: 10px;
   font-family: 'EB Garamond', serif;
   font-size: 18px;
   color: grey;
}
#wrapper > .footer > p {
   display: block;
   width: 70%;
   margin: 0;
   margin-bottom: 10px;
   text-align: center;
   font-size: 10px;
   color: grey;
}
#wrapper > .footer a {
   text-decoration: underline;
   color: #47475b;
}

#javaErr {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
   position: fixed;
   width: 100%;
   height: 75px;
   bottom: 0;
   background-color: whitesmoke;
   border-top: 2px solid #dadada;
   text-align: center;
   font-family: 'EB Garamond', serif;
   font-size: 20px;
}