/*butoane*/
button {line-height: 33px;
  outline: 0;
  border: 0;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  font-size: max(21px);
  overflow: hidden;
}
button span {
  position: relative;
  z-index: 2;
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 0.5em 1em;
  letter-spacing: 0.1em;
  background: linear-gradient(295deg, #ffe5a2 5%, #bf841a 50%, #ffcd74 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
button:before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    transparent 0deg,
    rgba(143, 168, 255, 0.3) 100deg,
    transparent 150deg,
    transparent 230deg,
    rgba(191, 122, 0, 0.75) 250deg,
    rgba(242, 187, 90, 0.9) 280deg,
    #ffe195 280deg,
    rgba(242, 187, 90, 0.9) 300deg,
    rgba(191, 122, 0, 0.75) 310deg,
    transparent 360deg
  );
  transform: scaleX(4) scaleY(2) rotate(0deg);
  transition: 0.5s transform;
}
button:hover:before {
  transform: scaleX(4) scaleY(2) rotate(-360deg);
}
button:after {
  content: "";
  position: absolute;
  inset: 0.05em;
  background-color: #000;
}
button span:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    295deg,
    #ffe195 0%,
    rgba(242, 187, 90, 0.8) 15%,
    rgba(191, 122, 0, 0.75) 30%,
    transparent 95%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}
button:hover span:before {
  opacity: 1;
}
button:hover span {
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
}


/**/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.buttons {
display: inline-block;
}

/* button 1 */
.buttons .button1 {
  display: inline-block;
  padding: 7px 9px;
  width: 213px; 
  font-size: 1.2em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: center;
  font-weight: bold;
  color: #000;
  background: radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%),
              radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%);
  border-top-color: #f8f8a6;
  border-right-color: #9c7625; 
  border-bottom-color: #9c7625; 
  border-left-color: #fdd832;  
  /*   outline-color: transparent; */
  transition: all 0.2s ease;
  cursor: pointer;
}

.button1:hover {
  color: #f9e589;
  background: radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%),
              radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%);
}

/* button 2 */
.buttons .button2 {
  padding: 7px 9px;
  width: 213px; 
  font-size: 1.2em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: -5px;
  font-weight: bold;
  color: #000;
  background: radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%),
              radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%);
  border-top-color: #f8f8a6;
  border-right-color: #9c7625;
  border-bottom-color: #9c7625;
  border-left-color: #fdd832;
  border-radius: 10px;
  /*   outline-color: transparent; */
  transition: all 0.2s ease;
  cursor: pointer;
}

.button2:hover {
  color: #f9e589;
  background: radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%),
              radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%);
}

/* button 3 */
.buttons .button3 {
  padding: 7px 9px;
  width: 213px; 
  font-size: 1.2em;
  letter-spacing: 1px;
  text-transform: uppercase;

  text-align: center;
  vertical-align: -5px;
  font-weight: bold;
  color: #000;
  background: radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%),
              radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%);
  border-top-color: #d8b965;
  border-right-color: #f7b42f;
  border-bottom-color: #f7b42f;
  border-left-color: #d8b965;
  border-radius: 50px;
  /*   outline-color: transparent; */
  transition: all 0.2s ease;
  cursor: pointer;
}

.button3:hover {
  color: #f9e589;
  background: radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%),
              radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%);
}


/* button 4 */
.buttons .button4 {
  padding: 7px 9px;
  width: 213px; 
  font-size: 1.2em;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: -5px;
  font-weight: bold;
  color: #000;
  background: radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%),
              radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%);
  border-top-color: #d8b965;
  border-right-color:#f7b42f;
  border-bottom-color: #f7b42f;
  border-left-color: #d8b965;
  border-radius: 10px 100px / 120px;
  /*   outline-color: transparent; */
  transition: all 0.2s ease;
  cursor: pointer;
}

.button4:hover {
  color: #f9e589;
  background: radial-gradient(ellipse farthest-corner at left top, #fff 0%, #f8f8a6 7%, #d8b965 25%, #5d4a1f 62%, #5c491d 100%),
              radial-gradient(ellipse farthest-corner at right bottom, #fdd832 0%, #f7b42f 10%, #9c7625 30%, #80672c 40%, transparent 80%);
}

/**/

/*gold*/
.gold {
  
  text-transform: uppercase;
  line-height:55px;
  text-align: center;
  background: linear-gradient(90deg, rgba(186,148,62,1) 0%, rgba(236,172,32,1) 20%, rgba(186,148,62,1) 39%, rgba(249,244,180,1) 50%, rgba(186,148,62,1) 60%, rgba(236,172,32,1) 80%, rgba(186,148,62,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;	
  animation: shine 3s infinite;
  background-size: 200%;
  background-position: left;

}
@keyframes shine {
  to{background-position: right}
 
}


/*/gold*/


/**/
.golden-btn + .golden-btn { margin-top: 1em; }

.golden-btn {
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 1.1em;
  box-sizing: border-box;font-weight: bolder;
  border: none;
  border-radius: .3em;
  height: 2.75em;
  line-height: 2.5em;
  text-transform: uppercase;
  padding: 0 1em;
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px rgba(139,66,8,1),
              inset 0 -1px 1px 3px rgba(250,227,133,1);
  background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
  border: 1px solid #a55d07;
  color: #000;
  text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
  cursor: pointer;
  transition: all .2s ease-in-out;
  background-size: 100% 100%;
  background-position:center;
}
.golden-btn:focus,
.golden-btn:hover {
  background-size: 150% 150%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
                inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
  border: 1px solid rgba(165,93,7,.6);
  color: rgba(120,50,5,.8);
}
.golden-btn:active {
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
}


/**/

/**/
.golden-btn2 + .golden-btn2 { margin-top: 1em; }

.golden-btn2 {width: 100%;
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 11px;
  box-sizing: border-box;font-weight: bolder;
  border: none;
  border-radius: 0em;
  height: 2.75em;
  line-height: 2.5em;
  text-transform: uppercase;
  padding: 0 1em;

  background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
  
  color: #000;

  cursor: pointer;
  transition: all .2s ease-in-out;
  background-size: 100% 100%;
  background-position:center;
}
.golden-btn2:focus,
.golden-btn2:hover {
  background-size: 150% 150%;
  
  color: #b17d10;
}
.golden-btn2:active {
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
}


/**/
.golden-btn3 + .golden-btn3 { margin-top: 1em; }

.golden-btn3 {width: 100%;
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 11px;
  box-sizing: border-box;font-weight: bolder;
  border: none;
  border-radius: 0em;
  height: auto;
  line-height: 2.5em;
  text-transform: uppercase;
  padding: 0 1em;

  background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
  
  color: #000;

  cursor: pointer;
  transition: all .2s ease-in-out;
  background-size: 100% 100%;
  background-position:center;
}
.golden-btn3:focus,
.golden-btn3:hover {
  background-size: 150% 150%;

}
.golden-btn3:active {
  box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px #b17d10,
                inset 0 -1px 1px 3px rgba(250,227,133,1);
}

/**/
.gold0{

   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;

}

/*  Media queries	============================================================================= */
@media screen and (min-width: 0px) and (max-width: 1024px) {
	.gold {font-size: 5vw; line-height: 39px;}
button {width: 267px;
  font-size: max(19px);
  overflow: hidden;
}
}