/*------------------------------------------------------------------
Project:     Epstein Busters On PumpDotFun

[Table of contents]

1. GENERAL CLASSES
2. LOADER
3. PARALLAX CONTAINER
4. PARALLAX PHOTOS
5. EPSTEIN BUSTERS TREE
6. E-MAIL POLE
7. COUNTDOWN CONTAINER
8. Epstein Busters TEXT
9. Epstein Busters PHOTO
10. E-MAIL FORM
11. SOCIAL ICONS
-------------------------------------------------------------------*/

/* 1. GENERAL CLASSES */
body {
  padding: 0;
  margin: 0;
  font-family: "Lobster", cursive;
  font-size: 30px;
  color: #fff;
}
.padding-none {
  padding-left: 0;
  padding-right: 0;
}
.padding-half {
  padding-left: 7px;
  padding-right: 7px;
}
.text-small {
  font-size: 20px;
}
.text-large {
  font-size: 60px;
}
.left {
  float: left;
}
.right {
  float: right;
}
div[class*="col-"] {
  position: relative;
}
form input {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 2px solid #ef5241;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  min-width: 150px;
}
form textarea {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 2px solid #ef5241;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  min-width: 350px;
}
form input::-webkit-input-placeholder,
form textarea::-webkit-input-placeholder {
  color: #ef5241;
}
form input:-moz-placeholder,
form textarea:-moz-placeholder {
  color: #ef5241;
}
form input::-moz-placeholder,
form textarea::-moz-placeholder {
  color: #ef5241;
}
form input:-ms-input-placeholder,
form textarea:-ms-input-placeholder {
  color: #ef5241;
}
/* END GENERAL CLASSES */

/* 2. LOADER */
#loader {
  background: -webkit-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: -o-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: -moz-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: linear-gradient(
    to bottom,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
#loader::after {
  content: "";
  background: url("../images/intro.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px;
  position: absolute;
  margin-left: -35px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: snowflake-rotate 2s linear infinite;
  -moz-animation: snowflake-rotate 2s linear infinite;
  -o-animation: snowflake-rotate 2s linear infinite;
  animation: snowflake-rotate 2s linear infinite;
}
@-webkit-keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@-moz-keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@-o-keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes snowflake-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
/* END LOADER */

/* 3. PARALLAX CONTAINER */
#container.parallax-container {
  position: relative;
  max-width: 2560px;
  margin: 0 auto;
  overflow: hidden;
  height: 100vh;
  background: -webkit-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: -o-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: -moz-linear-gradient(
    top,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
  background: linear-gradient(
    to bottom,
    rgb(14, 81, 133) 0%,
    rgb(26, 139, 178) 60%,
    rgb(33, 159, 193) 100%
  );
}
#container .christmas-scene {
  padding: 0;
  margin: 0;
}
#container .christmas-scene::before {
  content: "";
  background: url("../images/top-snow-pattern.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 35px;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
}
/* END PARALLAX CONTAINER */

/* 4. PARALLAX PHOTOS */
#EPB_scene .layer {
  width: 100%;
  height: 100%;
}
#EPB_scene .layer-photo {
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
#EPB_scene .layer-photo.photo-zoom {
  transform: scale(1.05);
}
#EPB_scene .layer-1 {
  background-image: url("../images/parallax/layer1.png");
  background-position: 40% bottom;
}
#EPB_scene .layer-2 {
  background-image: url("../images/parallax/layer2.png");
  background-position: center bottom;
}
#EPB_scene .layer-3 {
  background-image: url("../images/parallax/layer3.png");
  background-position: center bottom;
}
#EPB_scene .layer-4 {
  background-image: url("../images/parallax/layer4.png");
  background-position: center bottom;
}
#EPB_scene .layer-5 {
  background-image: url("../images/parallax-mobile/layer5.png");
  background-position: center bottom;
}
#EPB_scene .layer-6 {
  background-image: url("../images/parallax-mobile/layer6.png");
  background-position: center bottom;
}
/* END PARALLAX PHOTOS */

/* 5. EPSTEIN BUSTERS TREE */
#container #EPB_tree {
  position: absolute;
  bottom: 35px;
  left: 50%;
}
/* END EPSTEIN BUSTERS TREE */

/* 6. E-MAIL POLE */
#container #mail_pole {
  position: absolute;
  margin-left: -250px;
  left: 50%;
  bottom: 50px;
  z-index: 10;
  cursor: pointer;
}
#container #mail_pole img {
  width: 100px;
}
/* END E-MAIL POLE */

/* 7. COUNTDOWN CONTAINER */
#container #countdown_container {
  width: 600px;
  position: absolute;
  margin-left: -300px;
  left: 50%;
  top: 0;
  text-align: center;
  font-size: 40px;
  color: #fff;
}
#container #countdown_container .countdown-globe {
  height: 200px;
  text-align: center;
  padding-top: 65px;
  line-height: 1.3;
  z-index: 2;
}
#container #countdown_container .countdown-globe div {
  font-size: 20px;
}
#container #countdown_container .countdown-globe::after {
  content: "";
  /* background: url("../images/countdown-globe.png"); */
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: -40px;
  z-index: -1;
}
#container #countdown_container .A1::after {
  content: "";
  background: url("../images/countdown-globe.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: -40px;
  z-index: -1;
}
#container #countdown_container .A2::after {
  content: "";
  background: url("../images/countdown-globe1.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: -40px;
  z-index: -1;
}

#container #countdown_container .A3::after {
  content: "";
  background: url("../images/countdown-globe3.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: -40px;
  z-index: -1;
}

#container #countdown_container .A4::after {
  content: "";
  background: url("../images/countdown-globe4.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: -40px;
  z-index: -1;
}

#container #countdown_container .A5::after {
  content: "";
  background: url("../images/countdown-globe5.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: -40px;
  z-index: -1;
}
/* END COUNTDOWN CONTAINER */

/* 8. Epstein Busters TEXT */
#container .epb-sol-text {
  font-family: "Parisienne", cursive;
  position: absolute;
  top: 150px;
  width: 100%;
  text-align: center;
  font-size: 80px;
  color: #fff;
}
/* END Epstein Busters TEXT */

/* 9. Epstein Busters PHOTO */
#container .happy-new-year {
  background: url("../images/happy-new-year.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  width: 80%;
  height: 16%;
  z-index: 20;
  display: block;
}
.copy-icon {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translate(60%, -50%);
  font-size: 1.3em;
  background: rgba(34, 34, 34, 0.55);
  border-radius: 50%;
  padding: 4px 6px;
  cursor: pointer;
  z-index: 1002;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(14,81,133,0.12);
  border: 1.5px solid #ef5241;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copy-icon:hover {
  background: #ef5241;
  box-shadow: 0 2px 12px #ef5241aa;
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 18px;
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
}
/* END Epstein Busters PHOTO */

/* 10. E-MAIL FORM */
#contact_modal .mail-container {
  width: 900px;
  position: relative;
  padding-bottom: 0;
  z-index: 3;
}
#contact_modal .mail-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background: url("../images/form-message-pattern.png");
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height: 380px;
}
#contact_modal .mail-container .form-submit-button {
  background: #ef5241;
  color: #fff;
  font-size: 20px;
  padding: 4px 25px 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: absolute;
  bottom: 5px;
  width: 60%;
  right: 45px;
}
#contact_modal .bg-color {
  background: #fffaee;
  color: #ef5241;
  height: 350px;
  margin-top: 15px;
  padding-top: 10px;
  line-height: 1;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#contact_modal .mail-container input {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  font-size: 16px;
  margin-top: 25px;
  height: 32px;
}
#contact_modal .mail-container textarea {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  margin-top: 20px;
  font-size: 16px;
  min-height: 65px;
}
#contact_modal .mail-container img {
  padding-top: 35px;
  padding-bottom: 50px;
  width: 320px;
}
#contact_modal .modal-dialog {
  width: 900px;
}
#contact_modal .modal-body {
  padding: 0;
}
#contact_modal .modal-content {
  display: table;
  height: 382px;
}
#contact_modal button.close {
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 50px;
}
#contact_modal .modal-content .thank-you-msg {
  text-align: center;
  padding-top: 100px;
}
/* END E-MAIL FORM */

#About_modal .mail-container {
  width: 900px;
  position: relative;
  padding-bottom: 0;
  z-index: 3;
}
#About_modal .mail-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background: url("../images/form-message-pattern.png");
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height: 380px;
}
#About_modal .mail-container .form-submit-button {
  background: #ef5241;
  color: #fff;
  font-size: 20px;
  padding: 4px 25px 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: absolute;
  bottom: 5px;
  width: 60%;
  right: 45px;
}
#About_modal .bg-color {
  background: #fffaee;
  color: #ef5241;
  height: 350px;
  margin-top: 15px;
  padding-top: 10px;
  line-height: 1;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#About_modal .mail-container input {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  font-size: 16px;
  margin-top: 25px;
  height: 32px;
}
#About_modal .mail-container textarea {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  margin-top: 20px;
  font-size: 16px;
  min-height: 65px;
}
#About_modal .mail-container img {
  padding-top: 35px;
  padding-bottom: 50px;
  width: 320px;
}
#About_modal .modal-dialog {
  width: 900px;
}
#About_modal .modal-body {
  padding: 0;
}
#About_modal .modal-content {
  display: table;
  height: 382px;
}
#About_modal button.close {
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 50px;
}
#About_modal .modal-content .thank-you-msg {
  text-align: center;
  padding-top: 100px;
}

#Tokenomics_modal .mail-container {
  width: 900px;
  position: relative;
  padding-bottom: 0;
  z-index: 3;
}
#Tokenomics_modal .mail-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background: url("../images/form-message-pattern.png");
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height: 380px;
}
#Tokenomics_modal .mail-container .form-submit-button {
  background: #ef5241;
  color: #fff;
  font-size: 20px;
  padding: 4px 25px 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: absolute;
  bottom: 5px;
  width: 60%;
  right: 45px;
}
#Tokenomics_modal .bg-color {
  background: #fffaee;
  color: #ef5241;
  height: 350px;
  margin-top: 15px;
  padding-top: 10px;
  line-height: 1;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#Tokenomics_modal .mail-container input {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  font-size: 16px;
  margin-top: 25px;
  height: 32px;
}
#Tokenomics_modal .mail-container textarea {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  margin-top: 20px;
  font-size: 16px;
  min-height: 65px;
}
#Tokenomics_modal .mail-container img {
  padding-top: 35px;
  padding-bottom: 50px;
  width: 320px;
}
#Tokenomics_modal .modal-dialog {
  width: 900px;
}
#Tokenomics_modal .modal-body {
  padding: 0;
}
#Tokenomics_modal .modal-content {
  display: table;
  height: 382px;
}
#Tokenomics_modal button.close {
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 50px;
}
#Tokenomics_modal .modal-content .thank-you-msg {
  text-align: center;
  padding-top: 100px;
}

#Rewards_modal .mail-container {
  width: 900px;
  position: relative;
  padding-bottom: 0;
  z-index: 3;
}
#Rewards_modal .mail-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background: url("../images/form-message-pattern.png");
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height: 380px;
}
#Rewards_modal .mail-container .form-submit-button {
  background: #ef5241;
  color: #fff;
  font-size: 20px;
  padding: 4px 25px 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: absolute;
  bottom: 5px;
  width: 60%;
  right: 45px;
}
#Rewards_modal .bg-color {
  background: #fffaee;
  color: #ef5241;
  height: 350px;
  margin-top: 15px;
  padding-top: 10px;
  line-height: 1;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#Rewards_modal .mail-container input {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  font-size: 16px;
  margin-top: 25px;
  height: 32px;
}
#Rewards_modal .mail-container textarea {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  margin-top: 20px;
  font-size: 16px;
  min-height: 65px;
}
#Rewards_modal .mail-container img {
  padding-top: 35px;
  padding-bottom: 50px;
  width: 320px;
}
#Rewards_modal .modal-dialog {
  width: 900px;
}
#Rewards_modal .modal-body {
  padding: 0;
}
#Rewards_modal .modal-content {
  display: table;
  height: 382px;
}
#Rewards_modal button.close {
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 50px;
}
#Rewards_modal .modal-content .thank-you-msg {
  text-align: center;
  padding-top: 100px;
}

#Roadmap_modal .mail-container {
  width: 900px;
  position: relative;
  padding-bottom: 0;
  z-index: 3;
}
#Roadmap_modal .mail-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  background: url("../images/form-message-pattern.png");
  background-size: contain;
  background-repeat: repeat-x;
  width: 100%;
  height: 380px;
}
#Roadmap_modal .mail-container .form-submit-button {
  background: #ef5241;
  color: #fff;
  font-size: 20px;
  padding: 4px 25px 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: absolute;
  bottom: 5px;
  width: 60%;
  right: 45px;
}
#Roadmap_modal .bg-color {
  background: #fffaee;
  color: #ef5241;
  height: 350px;
  margin-top: 15px;
  padding-top: 10px;
  line-height: 1;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
#Roadmap_modal .mail-container input {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  font-size: 16px;
  margin-top: 25px;
  height: 32px;
}
#Roadmap_modal .mail-container textarea {
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  background: #fffaee;
  margin-top: 20px;
  font-size: 16px;
  min-height: 65px;
}
#Roadmap_modal .mail-container img {
  padding-top: 35px;
  padding-bottom: 50px;
  width: 320px;
}
#Roadmap_modal .modal-dialog {
  width: 900px;
}
#Roadmap_modal .modal-body {
  padding: 0;
}
#Roadmap_modal .modal-content {
  display: table;
  height: 382px;
}
#Roadmap_modal button.close {
  position: absolute;
  right: 0;
  top: -15px;
  font-size: 50px;
}
#Roadmap_modal .modal-content .thank-you-msg {
  text-align: center;
  padding-top: 100px;
}

/* 11. SOCIAL ICONS */
.icons-container {
  width: auto;
  position: absolute;
  z-index: 10;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}
.icons-container img {
  max-width: 100%;
  height: auto;
  margin: 0 5px;
}

@media (min-width: 768px) {
  .icons-container {
    width: 260px;
    right: 100px;
    left: auto;
    transform: none;
  }
}
/* END SOCIAL ICONS */

.col-md-12.padding-none {
  padding-top: 54px;
}

#container #countdown_container .countdown-globe div {
  /* font-size: 26px; */
  cursor: pointer;
}
.happy-new-year {
  cursor: pointer;
}

#container .epb-sol-text {
  font-family: "EBP" !important;
  top: 291px;
}
@font-face {
  font-family: "EBP";
  font-style: normal;
  font-weight: 400;
  src: url("bootstrap/fonts/EPB.TTF") format("truetype");
}

#container .epb-sol-text {
  font-size: 161px;
  color: #fff;
  opacity: 0.7;
}

canvas#ghost {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  z-index: 10000;
  pointer-events: none;
}

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  font-size: 4vw;
  text-shadow: 0 0 5px #000000;
}

.lil-gui {
  --width: 300px;
  max-width: 90%;
  --widget-height: 20px;
  font-size: 15px;
  --input-font-size: 15px;
  --padding: 10px;
  --spacing: 10px;
  --slider-knob-width: 5px;
  --background-color: rgba(5, 0, 15, 0.8);
  --widget-color: rgba(255, 255, 255, 0.3);
  --focus-color: rgba(255, 255, 255, 0.4);
  --hover-color: rgba(255, 255, 255, 0.5);
  --font-family: monospace;
  z-index: 1;
}
#contact_modal .bg-color {
  background: aliceblue;
  height: 668px;
}

#contact_modal .mail-container::after {
  height: 700px;
}
#About_modal .bg-color {
  background: aliceblue;
  height: 668px;
}

#About_modal .mail-container::after {
  height: 700px;
}

#Tokenomics_modal .bg-color {
  background: aliceblue;
  height: 1042px;
}

#Tokenomics_modal .mail-container::after {
  height: 1070px;
}

#Rewards_modal .bg-color {
  background: aliceblue;
  height: 700px;
}

#Rewards_modal .mail-container::after {
  height: 730px;
}

#Roadmap_modal .bg-color {
  background: aliceblue;
  height: 668px;
}

#Roadmap_modal .mail-container::after {
  height: 700px;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 60px auto;
  }
}
.col-md-12.text-center {
  font-family: "ebp";
  font-size: 15px;
  color: black;
}
li {
  color: rgb(14, 81, 133);
}

/* 

* {
box-sizing:border-box;
}

html,body {
min-height:100%;
height:100%;
background-image:url(http://theartmad.com/wp-content/uploads/Dark-Grey-Texture-Wallpaper-5.jpg);
background-size:cover;
background-position:top center;
font-family:helvetica neue, helvetica, arial, sans-serif;
font-weight:200;
&.modal-active {
overflow: hidden;
}
} */

#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 1;
  &.one {
    transform: scaleY(0.01) scaleX(0);
    animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    .modal-background {
      .modal {
        transform: scale(0);
        animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    &.out {
      transform: scale(1);
      animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal-background {
        .modal {
          animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
      }
    }
  }
  &.two {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        opacity: 0;
        animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    + .content {
      animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    &.out {
      animation: quickScaleDown 0s 0.5s linear forwards;
      .modal-background {
        animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
      }
      + .content {
        animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
  }
  &.three {
    z-index: 0;
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0.6);
      .modal {
        animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    + .content {
      z-index: 1;
      animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    &.out {
      .modal-background {
        .modal {
          animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
      }
      + .content {
        animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
      }
    }
  }
  &.four {
    z-index: 0;
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0.7);
      .modal {
        animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    + .content {
      z-index: 1;
      animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    &.out {
      .modal-background {
        .modal {
          animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
            forwards;
        }
      }
      + .content {
        animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
      }
    }
  }
  &.five {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        transform: translateX(-1500px);
        animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      }
    }
    &.out {
      animation: quickScaleDown 0s 0.5s linear forwards;
      .modal-background {
        animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
            forwards;
        }
      }
    }
  }
  &.six {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        background-color: transparent;
        animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
        h2,
        p {
          opacity: 0;
          position: relative;
          animation: modalContentFadeIn 0.5s 1s
            cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        }
        .modal-svg {
          rect {
            animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
              forwards;
          }
        }
      }
    }
    &.out {
      animation: quickScaleDown 0s 0.5s linear forwards;
      .modal-background {
        animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
            forwards;
          h2,
          p {
            animation: modalContentFadeOut 0.5s
              cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          }
          .modal-svg {
            rect {
              animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
                forwards;
            }
          }
        }
      }
    }
  }
  &.seven {
    transform: scale(1);
    .modal-background {
      background: rgba(0, 0, 0, 0);
      animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
      .modal {
        height: 75px;
        width: 75px;
        border-radius: 75px;
        overflow: hidden;
        animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1)
          forwards;
        h2,
        p {
          opacity: 0;
          position: relative;
          animation: modalContentFadeIn 0.5s 1.4s linear forwards;
        }
      }
    }
    &.out {
      animation: slowFade 0.5s 1.5s linear forwards;
      .modal-background {
        background-color: rgba(0, 0, 0, 0.7);
        animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        .modal {
          border-radius: 3px;
          height: 162px;
          width: 227px;
          animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          h2,
          p {
            animation: modalContentFadeOut 0.5s 0.5
              cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          }
        }
      }
    }
  }
  .modal-background {
    display: table-cell;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
    vertical-align: middle;
    .modal {
      background: white;
      padding: 50px;
      display: inline-block;
      border-radius: 3px;
      font-weight: 300;
      position: relative;
      h2 {
        font-size: 25px;
        line-height: 25px;
        margin-bottom: 15px;
      }
      p {
        font-size: 18px;
        line-height: 22px;
      }
      .modal-svg {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 3px;
        rect {
          stroke: #fff;
          stroke-width: 2px;
          stroke-dasharray: 778;
          stroke-dashoffset: 778;
        }
      }
    }
  }
}

.content {
  min-height: 100%;
  height: 100%;
  background: white;
  position: relative;
  z-index: 0;
  h1 {
    padding: 75px 0 30px 0;
    text-align: center;
    font-size: 30px;
    line-height: 30px;
  }
  .buttons {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    .button {
      display: inline-block;
      text-align: center;
      padding: 10px 15px;
      margin: 10px;
      background: red;
      font-size: 18px;
      background-color: #efefef;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      &:hover {
        color: white;
        background: #009bd5;
      }
    }
  }
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(0.005) scaleX(1);
  }
  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}

@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}

@keyframes scaleBack {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}

@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes slideUpLarge {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes slideDownLarge {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes moveDown {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(150px);
  }
}

@keyframes blowUpContent {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  99.9% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
  }
}

@keyframes blowUpContentTwo {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blowUpModal {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blowUpModalTwo {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes roadRunnerIn {
  0% {
    transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
  }
  70% {
    transform: translateX(30px) skewX(0deg) scaleX(0.9);
  }
  100% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
}

@keyframes roadRunnerOut {
  0% {
    transform: translateX(0px) skewX(0deg) scaleX(1);
  }
  30% {
    transform: translateX(-30px) skewX(-5deg) scaleX(0.9);
  }
  100% {
    transform: translateX(1500px) skewX(30deg) scaleX(1.3);
  }
}

@keyframes sketchIn {
  0% {
    stroke-dashoffset: 778;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 778;
  }
}

@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: white;
  }
}

@keyframes modalFadeOut {
  0% {
    background-color: white;
  }
  100% {
    background-color: transparent;
  }
}

@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}

@keyframes modalContentFadeOut {
  0% {
    opacity: 1;
    top: 0px;
  }
  100% {
    opacity: 0;
    top: -20px;
  }
}

@keyframes bondJamesBond {
  0% {
    transform: translateX(1000px);
  }
  80% {
    transform: translateX(0px);
    border-radius: 75px;
    height: 75px;
    width: 75px;
  }
  90% {
    border-radius: 3px;
    height: 182px;
    width: 247px;
  }
  100% {
    border-radius: 3px;
    height: 162px;
    width: 227px;
  }
}

@keyframes killShot {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(300px) rotate(45deg);
    opacity: 0;
  }
}

@keyframes fadeToRed {
  0% {
    background-color: rgba(black, 0.6);
  }
  100% {
    background-color: rgba(red, 0.8);
  }
}

@keyframes slowFade {
  0% {
    opacity: 1;
  }
  99.9% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/*  
html,
body {
background: linear-gradient(to bottom, #000428, #004e92);
} */
/* 
p {
color: white;
text-align: center;
} */

.h1 {
  opacity: 0.9;
  background: url(images/texture.jpg);
  -webkit-background-clip: text;
  background-size: contain;
  width: 100%;
  text-align: center;
  color: transparent;
  font-weight: 900;

  &::before {
    content: attr(data-heading);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 55%,
      rgba(255, 255, 255, 0) 100%
    );
    -webkit-background-clip: text;
    color: transparent;
    mix-blend-mode: screen;
    animation: shine 5s infinite;
    background-size: 200%;
    text-shadow: 2px 2px 10px rgba(#000, 0.5), -2px 2px 10px rgba(#000, 0.2),
      -2px -2px 10px rgba(#000, 0.5);
  }
}

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

/* Not needed for demo */

@font-face {
  font-family: "frozen";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff");
}

.h1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  font-size: 12vw;
  margin: 0;
  font-family: "frozen", serif;
  font-weight: 700;
}

h6,
.h6 {
  font-size: 15px;
  font-weight: bold;
}

h5,
.h5 {
  font-size: 18px;
  font-weight: bold;
}
#mail_pole {
  left: 41% !important;
}

/* .modal {
height: 300px !important;
width: 600px !important;} */

.copy-contract-btn {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  background: #ef5241;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background 0.2s;
}
.copy-contract-btn:hover {
  background: #d13b2f;
}
#toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 18px;
  z-index: 1002;
}