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

/* 
font-family: 'Poppins', sans-serif;
font-family: 'Raleway', sans-serif; 
*/
/* Global Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
}

body {
  font-family: 'Raleway', sans-serif; 
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  background-color: #000;
  background-image: url("crown-bg.png");
  background-repeat: repeat;
  /* background-image: radial-gradient(circle at center, red 0, blue, green 100%); */

}


.gradient-bg {
  object-fit: cover; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at center, rgba(0,0,0,0.75), rgba(0,0,0,0.80), rgba(0,0,0,0.85), rgba(0,0,0,0.95), rgba(0,0,0,1.0));
  z-index: -1;
}
#videoBg {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
.cover-container {
  max-width: 42em;
}




/* Typography */
.title {
  font-size: 3.0rem;
  font-weight: 600;
  color: #C19D65;
  text-rendering: geometricPrecision;
  font-smooth: always;
  --webkit-font-smoothing: subpixel-antialiased;
}
.pure-gold {
  background-image: linear-gradient(
 to right,
 #462523 0,
 #cb9b51 22%, 
 #f6e27a 45%,
 #f6f2c0 50%,
 #f6e27a 55%,
 #cb9b51 78%,
 #462523 100%
 );
  color:transparent;
  -webkit-background-clip:text;
}

/* ---------- Fog ---------- */
.fogwrapper {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
  z-index: -1;
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }




/* ---------- WebGL ---------- */
#canvas-webgl {
  position: fixed;
  z-index: -1;
  top: 0; left: 0;
  display: none;
}







.wrapper {
  margin-top: 40px
}

.fl-wrap {
  float: left;
  width: 100%;
  position: relative
}

.wrapper .subcribe-form p {
  color: #fff;
  font-size: 1.5rem;
}

.wrapper .subcribe-form form {
  max-width: 450px;
  margin: 15px auto;
  position: relative
}

.wrapper .subcribe-form #subscribe input {
  width: 100%;
  height: 48px;
  background: rgba(113, 113, 113, 0.75);
  border: none;
  outline: none;
  color: #C19D65;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 60px;
  padding: 0 30px;
  box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.2)
}

.wrapper .subcribe-form #subscribe input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #C19D65;
  opacity: 1; /* Firefox */
}

/* .wrapper .subcribe-form #subscribe #subscribe-button {
  height: 38px;
  padding: 0 30px;
  border-radius: 60px;
  border: none;
  position: absolute;
  right: 6px;
  top: 6px;
  font-size: 1rem;
  color: #fff;
  cursor: pointer
} */

.subscribe-message {
  color: #fff;
  float: left;
  margin-top: 10px;
  text-align: left;
  font-weight: 500;
  line-height: 19px
}

.color-bg {
  background: #000000;
}


#submit-button {
  position: absolute;
  right: 6px;
  top: 6px;
  display: block;
  padding: 0 30px;
  height: 38px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: #171515;
  border: none;
  border-radius: 60px;
  color: #666;
  cursor: pointer;
  transition: .5s;
}

#submit-button:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:60px;
  background: #d35400;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

#submit-button:hover:before {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  filter: blur(3px);
}

#submit-button:hover {
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}