div.background {
	position:fixed;
	margin: 0;
	padding: 0;
    width: 100%;
    height: 100%;
    font-weight: 100;
    -webkit-overflow-Y: hidden;
    -moz-overflow-Y: hidden;
    -o-overflow-Y: hidden;
    overflow-y: hidden;
    -webkit-animation: fadeIn 1 2s ease-out;
    -moz-animation: fadeIn 1 2s ease-out;
    -o-animation: fadeIn 1 2s ease-out;
    animation: fadeIn 1 2s ease-out;
	z-index: -9999;
}


.light {
    position: absolute;
    width: 0px;
    opacity: .75;
    background-color: white;
    box-shadow: #e9f1f1 0px 0px 20px 2px;
    opacity: 0;
    top: 100vh;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.x1{
  -webkit-animation: floatUp 8s infinite linear;
  -moz-animation: floatUp 8s infinite linear;
  -o-animation: floatUp 8s infinite linear;
  animation: floatUp 8s infinite linear;
   -webkit-transform: scale(1.0);
   -moz-transform: scale(1.0);
   -o-transform: scale(1.0);
  transform: scale(1.0);
}

.x2{
  -webkit-animation: floatUp 14s infinite linear;
  -moz-animation: floatUp 14s infinite linear;
  -o-animation: floatUp 14s infinite linear;
  animation: floatUp 14s infinite linear;
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -o-transform: scale(1.6);
  transform: scale(1.6);
  left: 15%;
}

.x3{
  -webkit-animation: floatUp 5s infinite linear;
  -moz-animation: floatUp 5s infinite linear;
  -o-animation: floatUp 5s infinite linear;
  animation: floatUp 5s infinite linear;
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -o-transform: scale(.5);
  transform: scale(.5);
  left: -15%;
}

.x4{
  -webkit-animation: floatUp 9s infinite linear;
  -moz-animation: floatUp 9s infinite linear;
  -o-animation: floatUp 9s infinite linear;
  animation: floatUp 9s infinite linear;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  left: -34%;
}

.x5{
  -webkit-animation: floatUp 16s infinite linear;
  -moz-animation: floatUp 16s infinite linear;
  -o-animation: floatUp 16s infinite linear;
  animation: floatUp 16s infinite linear;
  -webkit-transform: scale(2.2);
  -moz-transform: scale(2.2);
  -o-transform: scale(2.2);
  transform: scale(2.2);
  left: -57%;
}

.x6{
  -webkit-animation: floatUp 6s infinite linear;
  -moz-animation: floatUp 6s infinite linear;
  -o-animation: floatUp 6s infinite linear;
  animation: floatUp 6s infinite linear;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  -o-transform: scale(.8);
  transform: scale(.8);
  left: -81%;
}

.x7{
  -webkit-animation: floatUp 10.6s infinite linear;
  -moz-animation: floatUp 10.6s infinite linear;
  -o-animation: floatUp 10.6s infinite linear;
  animation: floatUp 10.6s infinite linear;
  -webkit-transform: scale(3.2);
  -moz-transform: scale(3.2);
  -o-transform: scale(3.2);
  transform: scale(3.2);
  left: 37%;
}

.x8{
  -webkit-animation: floatUp 9.4s infinite linear;
  -moz-animation: floatUp 9.4s infinite linear;
  -o-animation: floatUp 9.4s infinite linear;
  animation: floatUp 9.4s infinite linear;
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -o-transform: scale(1.7);
  transform: scale(1.7);
  left: 62%;
}

.x9{
  -webkit-animation: floatUp 8.2s infinite linear;
  -moz-animation: floatUp 8.2s infinite linear;
  -o-animation: floatUp 8.2s infinite linear;
  animation: floatUp 8.2s infinite linear;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  left: 85%;
}


@-webkit-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-moz-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@-o-keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}
@keyframes floatUp{
  0%{top: 100vh; opacity: 0;}
  25%{opacity: 1;}
  50%{top: 0vh; opacity: .8;}
  75%{opacity: 1;}
  100%{top: -100vh; opacity: 0;}
}


@-webkit-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-moz-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-o-keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@keyframes fadeIn{
  from{opacity: 0;}
  to{opacity: 1;}
}

@-webkit-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-moz-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@-o-keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}

@keyframes fadeOut{
  0%{opacity: 0;}
  30%{opacity: 1;}
  80%{opacity: .9;}
  100%{opacity: 0;}
}




@font-face {
    font-family: "heliosfont";
    src: url("fonts/Helios Regular.woff") format('woff');
}

@font-face {
	font-family: 'Motiva Sans';
	src: url('fonts/MotivaSans-Regular.ttf') format('truetype');
}
html, body {
	overflow-x:hidden;	
    font-family: Motiva Sans;
	font-size:2vmin;
    margin: 0;
	background: radial-gradient( circle, rgba(18,25,70,.75) 0%, rgba(5,5,5,.75) 100%);
	background-repeat-x: no-repeat;
	
	
	-background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(./NexiumXPScreenshot.jpg);
    -background-position: center center;
    -background-size: cover;
    -background-attachment: fixed;
    -background-repeat: no-repeat;
}

#MainMenuContainer {
    padding: 2%;
}


.planBlock {
	padding-left: 3%;
	padding-right: 3%;
}
.companyLogo {
	width : 70%;
}


div.container, div.container2 {
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	    padding: 2%;

}

 @media screen and (orientation:portrait) {
	.companyLogo {
		width : 100%;
	}
	img.companyLogoFull
	{
		width : 60%;
	}
	img.androidDL
	{
		width : 50%;
	}
	
	
	div.container {
		flex-direction: column;
	}

	div.container2 {
		flex-direction: column-reverse;
	}
	
	img.pentArtsPentacle, img.noadsLogo
	{
		width:50%;
	}
	
	input.inputfield, label.inputfield
	{
		min-width:75%;
		font-size:2vmax;
	}

 }

.youtubeContainer {
  position: relative;
  display: block;
  width: 90%; /* width of iframe wrapper */
  height: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0% 0% 48%;  /* 56.25%; 16:9 ratio */
  overflow: hidden;
  max-width:940px;
  max-height:528px;
}
.youtubeContainer iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}	
.emailIcon{
	vertical-align:middle;
	width : 10%;
}



.companyLogoFull
{
	width : 100%;
}
.companySubtl {
    font-family: "heliosfont";
	text-transform: uppercase;
	margin-top: -2%;
	width:100%;
	margin-left:15%;
	text-align:middle
}

.pentArtsPentacle {
	width : 90%;
	margin: 5%;
}
.noadsLogo {
	width : 90%;
	margin: 5%;
}
.NexiumLogo {
	width : 70%;
}
.NexiumScreenshot {
	width : 90%;	
}
.HomeIcon
{
	float:left;
	width: 48px;
}


.androidTestGroup
{
		width : 50%;
}

.androidDL
{
		width : 75%;
}
.videoPreview
{
	max-height:250px;
	max-width:100%;
}
.rounded {
	border-radius: 2%;
	border-width: 1px;
    border-style: solid;
    border-color: #0088AA;

}

a>img {
	transition: all 0.25s;
	white-space: nowrap;
}

a>img:hover {
	 transform: scale(95%, 95%);;
}

H1 {
	color: #EEF;
	text-transform: uppercase;

    background-image: url(	maincol_gradient_rule.png);
    background-repeat: no-repeat;
    background-position: bottom left;
	}

H2 {
	color: #DDE;
	text-transform: uppercase;
	}
div {
	color: #CCE;
	font-weight: bold;
}
p {
padding: 10px;
}

div.paddingblock {
padding: 20px;
}

div.itemText{
	text-align: left;
	flex-grow: 3;
    flex-basis: 0;
}
div.itemPic{
	flex-grow: 1;
    flex-basis: 0;
	align-self: center
}
div.itemPicMedium{
	flex-grow: 2;
    flex-basis: 0;
	align-self: center
}
div.itemPicLarge {
	flex-grow: 3;
    flex-basis: 0;
	align-self: center
}

div.itemPic{
	flex-grow: 1;
    flex-basis: 0;
	align-self: center
}
div.iconPic{
	text-align: right;
	flex-grow: 2;
    flex-basis: 0;
	align-self: center
}

a.iconLink {
	font-size:4vmin;
    text-decoration: none;
	color: white;
}

p.button, input.button {
	width: 65%;
	background-color: rgba(255,255,255,.08);
	border-radius: 300px;
	transition: all 0.25s;
	white-space: nowrap;
	color: 
}

input.submitButton {
	border: none;
	width: 25%;
	background-color: rgba(255,255,255,.08);
	border-radius: 300px;
	transition: all 0.25s;
	white-space: nowrap;
	font-weight: bold;
	color: #EEF;
	padding: 10px;
	font-size: 1.25em;
    cursor: pointer;
}
input.submitButton:hover{
	transform: scale(95%, 95%);
	background-color: rgba(255,255,255,.1);
}

input.inputfield {
	border: none;
	width: 40%;
	background-color: rgba(255,255,255,.2);
	border-radius: 300px;
	transition: all 0.25s;
	white-space: nowrap;		
	padding: 3.5vmin;
	color: #EEF;
	font-weight: bold;
    cursor: pointer;
}

p.button:hover, input.button:hover{
	 transform: scale(95%, 95%);
	background-color: rgba(255,255,255,.1);
}

div.googleForm {
	overflow:hidden;
	width:640px;
	height:368px;"
}

iframe.googleForm
{
	height:531px;
	width:640px;
	margin-top:-154px;
}