/*** Reset ***/
* {
   margin: 0;
   padding: 0;
   border: none;
}
.welcome {
   position: fixed;
   /*background: #000;*/
   width: 100%;
   z-index: 9;
   height: 100vh;
   color: #FFD700;
   top: 0;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   -webkit-transition: opacity 1s ease-in;
   -moz-transition: opacity 2s ease-in;
   -o-transition: opacity 2s ease-in;
   -ms-transition: opacity 2s ease-in;
   transition: opacity 2s ease-in;
}
.btn-container {
   display: inline-block;
   width: 100%;
   text-align: center;
}
.welcome-btn {
   z-index: 9;
   padding: 15px;
   border-radius: 10px;
   background: #ffd700;
   color: #000 !important;
   margin: 0 auto;
   display: -webkit-inline-box;
   cursor: pointer;
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
   margin-bottom: 30px;
}
.welcome-btn:hover {
   background: #DB9900;
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.hide {
   opacity: 0;
   z-index: 0;
   -webkit-transition: all 2s ease-in;
   -moz-transition: all 2s ease-in;
   -o-transition: all 2s ease-in;
   -ms-transition: all 2s ease-in;
   transition: all 2s ease-in;
}
#sec2 {
   /* margin-top: 14%; */
   height: 100vh;
   display: flex;
   margin-top: 0;
   align-items: center;
   padding-top: 0;
}
/*** Custom CSS ***/
.remove-all-margins-padding {
   margin: 0 !important;
   padding: 0 !important;
}
/* html,body {height: 100%;} */
body {
   color: #000000;
   background-color: #000000;
   /*overflow: hidden;*/
}
/**  Position Styles **/
.absolute {
   position: absolute;
}
.relative {
   position: relative;
}
.fixed {
   position: fixed;
}
.vCenter {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}
.vBottom {
   position: absolute;
   top: 95%;
   transform: translateY(-95%);
}
.pos-ctr-btm {
   position: absolute;
   bottom: 60px;
   left: 50%;
   transform: translateX(-50%);
}
/*** Colors ***/
.white {
   color: #FFFFFF;
}
.gold {
   color: #FFD700 !important;
}
.gold a:link, .gold a:visited {
   color: #FFD700 !important;
}
.gold a:hover {
   color: #FFD700 !important;
}
.grey {
   color: #333333;
}
.red {
   color: red;
}
.whiteBG {
   background-color: #FFFFFF;
}
.blueBG {
   background-color: rgba(0, 1, 46, 1);
}
.goldBG {
   color: #FFD700;
}
.ltGreyBG {
   background-color: #CDCDCD;
}
.greyBG {
   background-color: #666666;
}
.dkGreyBG {
   background-color: #333333;
}
.blackBG {
   background-color: #000000;
}
.transparentBG {
   background-color: transparent;
}
.bdr-gold {
   border: 1px solid #FFD700;
}
.blueModal {
   background-color: rgba(25, 0, 101, 0.65);
   border-radius: 7px;
}
.ltBlueModal {
   background-color: rgba(0, 36, 101, 0.28);
   border-radius: 7px;
}
/* Custom Form  */
.form-top {
   margin-top: 30px;
}
.panel {
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .12), 0 1px 6px 0 rgba(0, 0, 0, .12);
   border-radius: 10px;
   border: 0;
}
@-moz-document url-prefix() {
   .form-control {
      height: auto;
   }
}
/*** margins & padding ***/
.mtb {
   margin-top: 2em;
   margin-bottom: 2em;
}
.ptb {
   padding-top: 50px;
   padding-bottom: 50px;
}
.plr {
   padding-left: 15px;
   padding-right: 15px;
}
.noPad {
   padding: 0 !important;
}
.pt-6 {
   padding-top: 4rem !important;
}
.pt-12 {
   padding-top: 12%;
}
.pt-15 {
   padding-top: 17%;
}
.pt-20 {
   padding-top: 20%;
}
.pb-20 {
   padding-bottom: 20%;
}
.pt-35 {
   padding-top: 35%;
}
.pb-35 {
   padding-bottom: 35%;
}
.vh100 {
   height: 100vh;
}
.wd-80 {
   width: 80px !important;
}
.wd-100 {
   width: 100px !important;
}
.remove-all-margins-padding {
   margin: 0 !important;
   padding: 0 !important;
}
hr {
   width: 25%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
   border-top: 1px solid #FFD700;
}
/*** Typography ***/
.h1 {
   font-size: 2rem;
}
.h2 {
   font-size: 2rem;
}
.font300 {
   font-weight: 300;
}
#siteTitle {
   animation-fill-mode: forwards;
}
.site-title {
   font-size: 5rem;
   font-weight: 300;
   line-height: 1.5em;
   margin: 0;
}
.site-tagline {
   font-size: 2.5rem;
   font-weight: 400;
   /*letter-spacing: 4px;
    text-transform: uppercase;*/
   line-height: 1.25em;
   margin: 0;
}
.ls-2 {
   letter-spacing: 2px;
}
.ts-blue {
   text-shadow: rgba(0, 1, 46, 1) 1px 1px;
}
.fs-12 {
   font-size: 10px;
}
.greatVibes {
   font-family: 'Great Vibes', cursive;
}
.brushScript {
   font-family: brush-script-std, sans-serif;
   font-style: normal;
   font-weight: 400;
}
/*** Logo ***/
.logo img {
   width: 60px;
}
/*** Navigation ***/
.navbar-nav .nav-link {
   text-align: center;
}
.sticky {
   position: fixed;
   top: 0px;
   width: 100%;
   z-index: 999;
   background-color: rgba(51, 69, 153, 0.6) !important;
   transition: top 1s; /* Transition effect when sliding down (and up) */
}
.sticky + .content {
   padding-top: 60px;
}
.navbar-brand a {
   color: #FFD700;
}
li.nav-item {
   margin-left: .5em;
   border: gold 1px solid;
}
li.nav-item:hover {
   background-color: rgba(255, 215, 0, 0.58) !important;
}
/*** Buttons ***/
.introBtn {
   position: absolute;
   bottom: 50px;
   right: 5%;
   width: 73px;
   padding: 4px;
   border: 2px gold solid;
   border-radius: 50%;
   z-index: 2100;
}
.scrollBtn {
   /*    width: 100px;*/
   padding: 4px;
   border: 2px gold solid;
   border-radius: 50%;
   z-index: 2100;
}
.scrollborder {
   padding: 5px 8px;
   border: 1px gold solid;
   border-radius: 50%;
   background-color: rgba(25, 0, 101, 0.63);
}
#scrollDownBtn a:hover {
   text-decoration: none;
   color: #FFD700; /* gold */
}
.scrollBtnSm {
   bottom: 200px !important;
}
/*** Sections ***/
section {
   /*height: 100%;*/
   padding: 5em 0 0;
}
#intro {
   padding: 0em;
}
#audio {
   display: none;
}
#contact {
   padding-bottom: 8em;
}
.setBack {
   z-index: 2000 !important;
}
#sec1Video {
   display: none;
}
#sec2Video {
   display: none;
}
#sec3Video {
   display: none;
}
.background {
   position: fixed;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: -10;
   -webkit-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
   background-size: cover;
}
#roy img {
   max-width: 35%;
}
#roy p {
   font-size: 12px;
}
.testimonials li, .connectBox li {
   list-style: none;
   padding: 15px;
}
.testimonials li {
   font-size: 1.25em;
   font-weight: 300;
}
.credit {
   font-size: .75em;
   font-weight: 300;
   padding: 15px 0;
}
#connect {
   margin: 12% auto 5rem;
}
.connectBox li {
   /* background-color: rgba(255,255,255,0.1); */
   padding: 45px;
   border-radius: 10px;
}
#returnTop {
   /* our button t return to top */
   position: absolute;
   bottom: 50px;
   right: 5%;
}
#sec2, #sec22, #sec1b, #sec3, footer, #ModalCenter {
   -webkit-transition: opacity 2s ease-in;
   -moz-transition: opacity 2s ease-in;
   -o-transition: opacity 2s ease-in;
   -ms-transition: opacity 2s ease-in;
   transition: opacity 2s ease-in;
}
.hide {
   -webkit-transition: opacity 1s ease-in;
   -moz-transition: opacity 1s ease-in;
   -o-transition: opacity 1s ease-in;
   -ms-transition: opacity 1s ease-in;
   transition: opacity 1s ease-in;
}
@media screen and (max-width: 768px) {
   #sec2 {
      margin-top: unset;
   }
   .welcome {
      overflow-y: scroll;
      padding: 10px 0;
      box-sizing: border-box;
   }
   .welcome #IntroPage {
      padding-top: 30px;
      padding-bottom: 10px;
   }
   ::-webkit-scrollbar {
      width: 0; /* Remove scrollbar space */
      background: transparent; /* Optional: just make scrollbar invisible */
   }
}
/* Les Code */
.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
}

.arrows path {
	stroke: #2994D1;
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}