/* CSS Document */

/* 
	reset
	preloader
	container
	sound
	frame-page
	wraper
	general
	space
	devider
	padding
	margin
	color
	logo
	overlay background 
*/

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, button, output, ruby, section, summary, time, mark, audio, video {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
color:#fff;
text-decoration:none;
}

body {
    font-family: 'Poppins', sans-serif;
  	overflow:hidden;
	background:none;
}

#main-intro{ display:block; position:fixed; width:100%; height:100%; top::0px; z-index:99999; background:#000; }
#boxwrap{ 
width:100%; 
height:100%; 
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; 
background:none;
z-index: 99999;
}

/* skip button */
#boxskip{ 
width:100%; 
height:auto;
text-align:center;
position:fixed;
bottom: 0px;
left: 0px;
z-index:9;
display:none;
}

#skipbtn{ 
	text-decoration:none; 
	width: 160px; 
	height: auto;
	cursor:pointer; 
	margin: 0 auto; 
	padding: 12px 20px;
	line-height: 20px;
	background: rgba(0,0,0,.8);
}
#skipbtn span{ font-size:9pt; font-weight:300; text-transform: uppercase; letter-spacing: 2px; }


button{
width:175px; 
height:50px; 
border-radius: 0px 0px 5px 5px;
background:rgba(236, 2, 1, 1); 
cursor:pointer; 
font-size:13pt!important; 
font-weight:700;
 -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

button:hover{ 
background:rgba(0, 0, 0, 1);
 -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


/* preloader */
.preloaderintro
	{
		position: fixed;
  		top: 0;
  		left: 0;
  		width: 100%;
  		height: 100%;
  		z-index: 99999;
  		display: -webkit-box;
  		display: -webkit-flex;
  		display: -ms-flexbox;
  		display: flex;
  		-webkit-flex-flow: row nowrap;
  		    -ms-flex-flow: row nowrap;
  		        flex-flow: row nowrap;
  		-webkit-box-pack: center;
  		-webkit-justify-content: center;
  		    -ms-flex-pack: center;
  		        justify-content: center;
  		-webkit-box-align: center;
  		-webkit-align-items: center;
  		    -ms-flex-align: center;
  		        align-items: center;
  		background: none ;
	}
.ax-spinner-wave.ax-spinner 
	{
  		width: 50px;
  		height: 30px;
  		text-align: center;
  		font-size: 10px; 
  	}
.ax-spinner-wave div 
	{
  		background-color: #e7f0ed;
  		height: 100%;
  		width: 6px;
  		display: inline-block;
         -webkit-animation: barpre 1.2s infinite ease-in-out;
                 animation: barpre 1.2s infinite ease-in-out;
         
    }
.ax-spinner-wave .ax2 
	{
          -webkit-animation-delay: -1.1s;
                  animation-delay: -1.1s; 
      }
.ax-spinner-wave .ax3 
	{
          -webkit-animation-delay: -1s;
                  animation-delay: -1s; 
     }
.ax-spinner-wave .ax4 
	{
          -webkit-animation-delay: -0.9s;
                  animation-delay: -0.9s;
     }
.ax-spinner-wave .ax5 
	{
          -webkit-animation-delay: -0.8s;
                  animation-delay: -0.8s; 
     }

@-webkit-keyframes barpre {
  0%, 40%, 100% {
            -webkit-transform: scaleY(0.4);
                    transform: scaleY(0.4); }

  20% {
            -webkit-transform: scaleY(1);
                    transform: scaleY(1); } }

@keyframes barpre {
  0%, 40%, 100% {
            -webkit-transform: scaleY(0.4);
                    transform: scaleY(0.4); }

  20% {
            -webkit-transform: scaleY(1);
                    transform: scaleY(1); } }
/* end preloader */

/* container */
#boxintro{ 
width:100%; 
height:100%; 
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; 
background:none;
display:none;
z-index: 9999;
}

/* sound */
#soundintro{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 52px;
  height: 46px;
  z-index: 999;
  cursor: pointer;
  opacity:0.8;
  z-index:99999;
   -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#soundintro:hover{
	opacity:1;
 -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.soundOnintro{ background:url("../img/soundon.png");  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}
.soundOffintro{ background:url("../img/soundoff.png");  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;}

/* frame-page */
.frame{
  display:none;
  z-index: 1;
}

.bgintro{
  position:absolute;
  width: 100%;
  height:100%;
  top:0px;
  left:0px;
  z-index:999;
}
.bgintro:before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	z-index:1;
	background:linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,.3), transparent);
}
.bgintro img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* wraper */
.contentintro{ 
width: 100%;
margin: 0;
position: absolute;
top: 50vh;
left: 50%;
transform: translate(-50%, -50%);
z-index:999;
}

/* general */
h1{ font-size:40pt; font-weight:600;  }
h2{ font-size:32pt; font-weight:600; }
h3{ font-size:28pt; font-weight:300; }
h4{ font-size:21pt; font-weight:300; line-height:18pt;  }
h5{ font-size:13pt; font-weight:300;  }

/* space */
.center{ text-align:center; line-height:inherit; }
.left{ text-align:left; line-height:inherit; }
.right{ text-align:right; line-height:inherit; }

.v-align {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

/* devider */
.devider-left{display:block; border-top: 5px solid #d1e7ec; width:127px; height:5px; position:absolute; left:10%; bottom:-10%; }
.devider-right{display:block; border-top: 5px solid #d1e7ec; width:127px; height:5px; position:absolute; right:10%; top:-10%;}

/* padding */
.p.10px{ padding:10px; }
.p-20px{ padding:20px; }
.p-30px{ padding:30px; }
.p-40px{ padding:40px; }
.p-50px{ padding:50px; }

/* margin */
.m-10px{ margin-top:10px; }
.m-20px{ margin-top:20px; }
.m-30px{ margin-top:30px; }
.m-40px{ margin-top:40px; }
.m-50px{ margin-top:50px; }

/* color */
.gray{ color:#4f4f4f;}

/* logo */
.logo {
  position:absolute;
  top:30px;
  left:40px;
  width: auto;
  height: auto;
  z-index:9999;
  cursor:pointer;
}

/* overlay background */
.overlayintro {
  position:absolute;
  width: 100%;
  height:100%;
  overflow: hidden;
  background:rgba(0, 132, 255, 0.2);
  z-index:999;
}