html, body, #container
{
   width: 100%;
   height: 100%;
}
body
{
   background-color: #483D8B;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#intro
{
   background-color: transparent;
   border-radius: 0px;
   margin: 0;
}
#intro-overlay
{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #000000;
   opacity: 0.5;
}
#intro-video
{
   background: #000000;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: -99;
}
#intro-video video
{
   object-fit: cover;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}
#Extension1
{
   position: relative;
   left: 0;
   top: 0;
   display: inline-block;
   width: 110px;
   height: 50px;
   background-color: #005480;
   border: 1px solid #241E45;
   border-radius: 4px;
   color: #FFFFFF;
   font-family: Arial;
   font-size: 16px;
   font-weight: normal;
   font-style: normal;
}
#Extension1:hover
{
   background-color: #2E6DA4;
   border: 1px solid #2E6DA4;
   color: #DDDDDD;
}
.particles 
{
	position: relative;
	grid-area: 1 / 1 / 2 / 2;
}
.particles-canvas 
{
	position: absolute;
	pointer-events: none;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
}
.particles-wrapper 
{
   position: relative;
   display: inline-block;
   overflow: hidden;
   will-change: transform;
}
.particles-button 
{
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   position: relative;
   border-radius: 5px;
   border-radius: var(--radius-button);
   background: var(--color-button-bg);
   color: var(--color-button-text);
   border: 0;
   border: var(--border-button);
   margin: 0;
   padding: 1.5rem 3rem;
   padding: var(--button-padding);
   will-change: transform;
}
.particles-button:focus 
{
   outline: none;
}

#Html1
{
   position: absolute;
   left: 9%;
   top: 14%;
   width: 18%;
   height: 27%;
   z-index: 0;
}
#intro
{
   position: relative;
   text-align: left;
   width: 100%;
   height: 100%;
   float: none;
   vertical-align: top;
   display: block;
   z-index: 3;
}
#wb_Extension1
{
   position: absolute;
   left: 79%;
   top: 14%;
   width: 9%;
   height: 6%;
   z-index: 1;
}
@media only screen and (max-width: 1199px)
{
body
{
   background-color: #483D8B;
   background-image: none;
}
#intro
{
   width: 320px;
   height: 717px;
   visibility: visible;
   display: block;
   margin: 0;
   background-color: transparent;
}
#intro
{
   margin: 0;
}
#intro
{
    width: 100%;
    height: 100%;
}
#Html1
{
   left: 10%;
   top: 5%;
   width: 69%;
   height: 27%;
   visibility: visible;
   display: inline;
}
#wb_Extension1
{
   left: 32%;
   top: 44%;
   width: 34%;
   height: 6%;
   visibility: visible;
   display: inline;
}
#Extension2
{
   left: 75px;
   top: 727px;
   width: 100px;
   height: 100px;
   visibility: visible;
   display: inline;
}
}
#loader-wrapper 
{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
}
#loader
{
   display: block;
   position: relative;
   left: 50%;
   top: 50%;
   width: 150px;
   height: 150px;
   margin: -75px 0 0 -75px;
   border-radius: 50%;
   border: 3px solid transparent;
   border-top-color: #3498DB;
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
   z-index: 1001;
   -webkit-transform-origin: center center;
   transform-origin: center center;
}
#loader:before 
{
   content: "";
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border-radius: 50%;
   border: 3px solid transparent;
   border-top-color: #E74C3C;
   -webkit-animation: spin 3s linear infinite;
   animation: spin 3s linear infinite;
   -webkit-transform-origin: center center;
   transform-origin: center center;
}
#loader:after 
{
   content: "";
   position: absolute;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border-radius: 50%;
   border: 3px solid transparent;
   border-top-color: #F9C922;
   -webkit-animation: spin 1.5s linear infinite;
   animation: spin 1.5s linear infinite;
   -webkit-transform-origin: center center;
   transform-origin: center center;
}
@-webkit-keyframes spin 
{
   0%   
   {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% 
   {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
@keyframes spin 
{
   0%   
   {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% 
   {
      -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}
#loader-wrapper .loader-section 
{
   position: fixed;
   top: 0;
   width: 50%;
   height: 100%;
   background: #222222;
   z-index: 1000;
   -webkit-transform: translateX(0);
   transform: translateX(0);
}
#loader-wrapper .loader-section.section-left 
{
   left: 0;
   transform-origin: center center;
   background-color: #222222;
}
#loader-wrapper .loader-section.section-right 
{
   right: 0;
   transform-origin: center center;
   background-color: #222222;
}

.loaded #loader-wrapper .loader-section.section-left 
{
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
   -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
   transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right 
{
   -webkit-transform: translateX(100%);
   transform: translateX(100%);
   -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
   transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader
{
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
.loaded #loader-wrapper 
{
   visibility: hidden;
   -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
   -webkit-transition: all 0.3s 1s ease-out;
   transition: all 0.3s 1s ease-out;
}