@charset "utf-8";
/* CSS Document */

body{
		font-family: 'Montserrat', sans-serif;
		font-size: 16px;
		background: #000 url("../images/nebula-3.jpg");
		background-repeat: no-repeat;
  		background-attachment: fixed;
		background-size: cover;
		color:#fff;
}

h4{
	font-size: 21px;
	font-weight: 400;
}

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  transform: translateY(-50%);

	font-size:1.4em;
	z-index: 1110;
	flex-direction: column;
}
.pagination a {
	display:block;
	height:20px;
/*	margin-bottom:5px;*/
	color:white;
	position:relative;
/*	padding:4px;*/
	font-size: 14px;
	white-space: nowrap

}
.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:-2px;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}
.pagination a:hover .hover-text {
	opacity: 1;
}
.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:'';
	position: absolute;
	margin:auto;
	top:0;
	right:4px;
	bottom:0;
}



header{
	position: absolute;
	width: 100%;
	z-index: 1000;
	background:rgba(4,51,115,.70)
}
.headlogowrap{
	width:100%;
	max-width:500px;
}


header .contactlinx a {
 color:#fff;
 line-height: 45px;
 margin-left:14px;
}
a.portallink{
	display: inline-block;
	height: 45px;
	padding: 0 18px;
	text-decoration: none;
		background-color: rgba(0,0,54,1.00);
}	


video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

.panel{
	position: relative;
}


.overtxt{
	z-index: 900;
	position: absolute;
	width: 100%;
}

.overtxt h1{
	display: inline-block;
	font-size:50px;
	font-weight:500;
	position: relative;
	padding-left: 14px;
	box-sizing: border-box;
}

.overtxt h1::before{
    content: '';
    position: absolute;
    top: 10px;
	bottom: 10px;
	 left: 0;
	border-left: 7px solid #ec1c24;
}
.ot-inner{
	width:100%;
}
.nextbar {
	position: absolute;
	width: 100%;
	z-index: 1100;	
	bottom:0px;
}
.nextbar a{
	display: inline-block;
	width:45px;
	height:45px;
	background: url("../images/scrollchev-1.png") center center no-repeat;
	text-indent:-9999px;
	opacity: .5;
	transform: translateY(-20px);
	transition: all .7s;
}
.nextbar a:hover{
		opacity: 1;
	transform: translateY(0px);
}
.blueback h2{
	font-size: 30px;
	position: relative;
	padding-left: 14px;
	box-sizing: border-box;
}

.blueback h2::before{
    content: '';
    position: absolute;
    top: 6px;
	bottom: 6px;
    left: 0;
	border-left: 7px solid #ec1c24;
}

.blueback h2 span{
	font-weight: 300;
}

.bttnlink-1{
	display: inline-block;
	min-width: 250px;
	text-align: center;
	height: 45px;
	line-height: 45px;
	color:#fff;
	text-decoration: none;
	border: 2px solid #bb2c25;
	background-color: rgba(0,0,54,.00);
	transition: all .8s;
	
}

	.bttnlink-1:hover{

		color:#fff;
		background-color: rgba(0,0,54,1.00);
		text-decoration: none;
	}
	.overtxt .bttnlink-1{
			background-color: rgba(0,0,54,.40);
	}

	.chevlist{list-style:none;
	margin:0;
	padding:0;
	}
	.chevlist li{
	background: url("../images/listchev.png") left top 4px no-repeat;
	padding:0 0 18px 24px;
}

.contentwrp{
	position: absolute;
	left:40%;
	right:100px;
	top: 100px;
	bottom: 100px;
	display: flex;
	flex-direction: column;


}
	.contentin{
		flex:1;
		align-items: center;
	}

	.blueback{
	position: relative;	
	}

	.bbinner{
		position: relative;
	}

.blueback.clip-bl:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
/*    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 190px), calc(100% - 50px) 100%, 0 100%);*/
    clip-path: polygon(0 0,100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
background:rgba(4,51,115,.70)
}

.blueback.clip-br:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
/*    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 190px), calc(100% - 50px) 100%, 0 100%);*/
    clip-path: polygon(100% 0,100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%, 0 0);
background:rgba(4,51,115,.70)
}

.blueback.clip-tl:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
/*    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 190px), calc(100% - 50px) 100%, 0 100%);*/
    clip-path: polygon(60px 0  ,100% 0, 100% 100%, 0 100%, 0 60px);
background:rgba(4,51,115,.70)
}

.blueback.clip-tr:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
/*    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 190px), calc(100% - 50px) 100%, 0 100%);*/
    clip-path: polygon(calc(100% - 60px) 0  ,100% 60px, 100% 100%, 0 100%, 0 0);
background:rgba(4,51,115,.70);
	
}
.contact .blueback.clip-br:before, .contact .blueback.clip-tl:before, .contact .blueback.clip-tr:before{
	background:rgba(0,53,85,.70)
}
.p0{
background: #00446c;	
}	
/*
.panel.p1{
	background: url("images/nebula-1.jpg") right top no-repeat;
}

.panel.p2{
	background: url("images/nebula-2.jpg") right top no-repeat;
}
*/

.panel.liftoff{
background: #00446c;		
}
.contactml{
	background: #00446c;
}

/* Tooltip container */
.mltooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	width:124px;
	margin: 0 8px;
}

/* Tooltip text */
.mltooltip .mltooltiptext {
  visibility:hidden;
 opacity:0;
  width: 200px;
  text-align: center;
  padding-bottom: 24px;
transform: translate(-40px ,-105%);
	transition: opacity .5s;
  position: absolute;
  z-index: 5;
	background: url("../images/tooltiptri.png") center bottom no-repeat;
}

/* Show the tooltip text when you mouse over the tooltip container */
.mltooltip:hover .mltooltiptext {
  visibility: visible;
	opacity:1;
}
.mltooltip .mltike{
	width:80px;
	height:80px;
	display: inline-block;
	border-radius: 100%;
	background: #000;
	border:1px solid #fff;
	margin-bottom:18px;
		transition: background .5s;
}


.mltooltip:hover .mltike{

	background: #00446c;
-webkit-box-shadow:0px 0px 105px 12px rgba(122,213,255,0.9);
-moz-box-shadow: 0px 0px 105px 12px rgba(122,213,255,0.9);
box-shadow: 0px 0px 105px 12px rgba(122,213,255,0.9);
}


.mltliner{
  color: #fff;
	padding: 24px;
	position: relative;
	background: #00446c;
}

.supportike{
	display: block;
	border-radius: 100%;
	background: #000;
	border:1px solid #fff;
	margin-bottom:18px;
		transition: background .5s;
	width:80px;
	height:80px;
}


.mltooltip .mltike img,.supportike img{
	width:100%
}
.contactml label{
	display: inline-block;
	width: 70px;
	height: 40px;
	line-height: 40px;
}
.contactml input[type="text"]{
	width:calc(100% - 120px);
		height: 40px;
}
.contactml select{
	width:calc(100% - 120px);
		height: 40px;
	margin-left:70px;
}
.contactml .wwylutn {
	margin-left: 70px;
}
.contactml .wwylutn textarea{
width:calc(100% - 50px);
	height:200px;
}

.contactml input[type="submit"]{
	width:250px;
		height: 50px;
	text-align: center;
	color:#fff;
	background: #0276b2;
	border: none;
}
@media only screen and (max-width : 1366px)	
{
	.panel.p1,.panel.p2{
		background-image: none;
	}	
	
	.panel.p2{
/*	background-color:#002247;	 ;*/
}
.contentwrp {


}	
.svgwrp{
		opacity:.4;
	}
	.contentwrp{
	    left: 250px;
	right:70px;
	top: 0px;
	bottom: 50px;


}

	.panelillo {opacity:1;
	}
	

	
	
	.mltooltip .mltike,.supportike{
	width:65px;
	height:65px;

}

	

}
@media only screen and (max-width : 1180px)	
{
	
	.svgwrp{
		opacity:.4;
	}
	
		.contentwrp{
	    left: 70px;
	}
.blueback img{
		display: none;
	}
}
/*Updated to 992px from 960 to correct issues seen from 960 to 992*/
@media only screen and (max-width : 992px)	
{
	
	header, .overtxt {
	position: relative;
}
	.otWrap{
		height:700px;
		
	}
	video {
width: 100%;
/*    height: 75vh;


	position: relative;
*/
}
		.pagination{
		display: none;
	}
.panel{
	height:auto;
	}
	


.contentwrp{

	left:0px;
	right:0px;
	top: 0px;
	bottom: 0px;
	padding:50px 70px;

	position: relative;


}
.panelillo {

 height: auto !important;

}	
.svgwrp{
		overflow:hidden;
	}	.nextbar {
		display:none;

	}
	.overtxt h1 {
    display: inline-block;
    margin: 0 30px
}
	.mlikeout{
		width:49%;
		display: inline-block;
	}

}
@media only screen and (max-width : 560px)	
{
	
		video {

top:0px;
			bottom:0px;
				right:0px;
			left:0px;


}
	
	.headlogowrap{
height:50px;
		width:auto;
		margin:0 30px 10px 30px;
		text-align: center;
}

.otWrap{
	height:auto;
	position: relative;
}	
.overtxt .bttnlink-1 {
   margin: 18px 0;
}

	
	.contentwrp{


	padding:40px;
}
	

}