@font-face{
  src:url('../fonts/gothicb.ttf');
  font-family: gothicb;
}

.vip{
  max-width:1024px;
  width:100%;
  display:flex;
  flex-direction: column;
  margin:10px auto;
}

.vip_item{
  width:100%;
  position:relative;
  display:flex;
  align-items: center;
}

.vip_item img{
  width:100%;
}

.vip_text{
  position:absolute;
  z-index: 2;
  display:flex;
  flex-direction: column;
}

.text_row{
  display:flex;
  align-items: center;
  filter:drop-shadow(0 0 5px black);
}

.vip_text h1{
  font-size: 100px;
  margin:0;
  background: -webkit-linear-gradient(180deg,#c69108, #dbc33e ,#c69108);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}

.vip_text h1{
  font-size: 120px;
  font-weight: bold;
  margin:0;
  background: -webkit-linear-gradient(180deg,#c69108, #dbc33e ,#c69108);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
}

.century_font{
  font-family: gothicb;
}

.blue_font{
  font-family: gothicb;
  color:#32c7f4;
  font-size: 50px;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  margin:0;
  letter-spacing: -3px;
}

.vip_text p{
  align-self: center;
  color:#003672;
  margin:0;
  font-size: 18px;
  font-family: gothicb;
}

.white_font{
  margin:0; color:white; font-size:50px
}

.vip_text h2{
  font-family: gothicb;
  font-size: 50px;
  font-weight: bold;
  background: -webkit-linear-gradient(180deg,#003873, #037da8 ,#003873);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  line-height: 90%;
  margin:0;
  margin-left: 15px;
  letter-spacing: -2px;
}

.more_btn{
  font-family: gothicb;
  align-self: center;
  color:#760001;
  background: -webkit-linear-gradient(180deg,#c69108, #dbc33e ,#c69108);
  border:solid 3px #dcdbd9;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  padding: 8px 15px;
  margin:10% 0;
  font-size: 20px;
  filter:drop-shadow(0 0 5px black);
}

.more_btn:hover{
  background: #760001;;
  color:#dbc33e;
}


.fade-in-right {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


/**
 * ----------------------------------------
 * animation fade-in-right
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}



/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

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

    .text_row{
        filter:drop-shadow(0 0 2px black);
    }

    .vip_text p{
        display:none;
    }

    .vip_text h1{
        font-size: 15vw;
        -webkit-text-stroke-width: 1px;
    }
    .vip_text h2{
        font-size: 8vw;
        -webkit-text-stroke-width: 0.2px;
        letter-spacing:0.2vw;
        background: white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .white_font{
        font-size: 6vw;
    }

    .blue_font{
        font-size: 6vw;
        -webkit-text-stroke-width: 0px;
    }

    .more_btn{
        font-size: 3vw;
        padding:2% 5%;
        border:1px solid #dcdbd9;
        margin:5% 0;
    }

}