﻿/*<meta />*/
@import url('http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'); 


/*generic styles for all media */
html	/*adds space between header div and body div*/
{
	margin-top: 0px;
}

.bodycontainer
{
    /*override screen width for landing page*/
    padding-right: 0px !important; 
}

body
{
    color: #333333;
	font-family: "Open-Sans Regular", "Segoe UI Regular", Helvetica, arial, sans-serif;
	font-size: 16px;
	color: #000000;
	padding: 0px;
	margin: 0px;
}
.divcontainer
{
    padding-bottom: 15px;
    padding-top: 15px;
}

.divcontainertop
{
    padding-bottom: 15px;
    padding-top: 20px;
    margin-top: 5px;
}

.divcontainerbottom
{
    padding-bottom: 30px;
    padding-top: 15px;
}
.divcontainerapps
{
    padding-bottom: 15px;
    padding-top: 15px;
}

.divcontainer:hover, .divcontainertop:hover, .divcontainerbottom:hover
{
    background-color: #f4f6f5;
}
.stack .row
{
	clear: both;
}

h1.Title
{
	color: #29333f;
    font-family: "Open-Sans Regular", "Segoe UI Regular", Helvetica, arial, sans-serif;
	font-weight: normal;
	font-size: 40px;
	text-align: center;
    margin-bottom: 0;
    margin-top: 0;
}
h2.Title
{
	color: #29333f;
    font-family: "Open-Sans Regular", "Segoe UI Regular", Helvetica, arial, sans-serif;
	font-weight: normal;
	font-size: 30px;
	text-align: center;
    margin-bottom: 0;
    margin-top: 0;
}
.p-text
{
	padding: 0px;
	text-align: center;
	color: #000000;
    margin-bottom: 15px;
    margin-top: 0;
}
.p-linktext 
{
    margin: 0;
    padding: 3px;
	color: #006BD6;
}

.p-linktextexternal
{
	margin: 0;
    padding: 3px;
	color: #006BD6;
}
.p-linktextexternal:after
{
	font-family: "Open-Sans Regular", "Segoe UI Regular", Helvetica, arial, sans-serif;
	font-size:70%;
	padding-left: 0.2em;
	content: "\f08e";
    
}

/* unvisited link */
a:link
{
	text-decoration: none;
	color: #006BD6;
}
a:visited
{
	text-decoration: none;
	color: #006BD6;
}
a:hover
{
	text-decoration: underline;
	color: #000000;
}
a:active
{
	text-decoration: underline;
	color: #006BD6;
}
/* visited link */
/* mouse over link */
/* selected link */
stack .row .col
{
	float: left;
	text-align: center;
	vertical-align: middle;
	font-size: 16px;
	display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */

}
.stack .row .col4
{
	float: left;
	text-align: center;
	vertical-align: top;
	font-size: 16px;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}

.stack .row .col6
{
	float: left;
	text-align: center;
	vertical-align: top;
	font-size: 16px;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}
.stack .row .col7
{
	float: left;
	text-align: center;
	vertical-align: top;
	font-size: 16px;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */
}
.stack .row .col3Box
{
  background: #003870;
  color: #fff;
  background-size: 13px 7px;
  background-position: 97% 50%;
  background-repeat: no-repeat;
  text-transform: uppercase;
  padding: 10px 15px 10px 15px;
  border-radius: 3px;
  position: relative;
  border: none;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: .3s background ease-in-out;
  -moz-transition: .3s background ease-in-out;
  -ms-transition: .3s background ease-in-out;
  transition: .3s background ease-in-out;
  vertical-align: middle;
  width:140px;
  box-sizing: initial;
}

.stack .row .col3Box:hover 
{ 
	background-color: #006BD6;
}

.stack .row .col4Box:hover 
{ 
	background-color: #006BD6;
}

.stack .row .col6Box:hover 
{ 
	background-color: #006BD6;
}


.col4Box
{
  background: #003870;
  color: #fff;
  background-size: 13px 7px;
  background-position: 97% 50%;
  background-repeat: no-repeat;
  text-transform: uppercase;
  padding: 10px 15px 10px 15px;
  border-radius: 3px;
  position: relative;
  border: none;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: .3s background ease-in-out;
  -moz-transition: .3s background ease-in-out;
  -ms-transition: .3s background ease-in-out;
  transition: .3s background ease-in-out;
  vertical-align: middle;
  width:180px;
}

.col4Box:hover {
    background-color:#f4f6f5;
}

.stack .row .col6Box
{
  background: #006BD6;
  color: #fff;
  text-transform: uppercase;
  padding: 10px 15px 10px 15px;
  border-radius: 3px;
  position: relative;
  border: none;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: .3s background ease-in-out;
  -moz-transition: .3s background ease-in-out;
  -ms-transition: .3s background ease-in-out;
  transition: .3s background ease-in-out;
  vertical-align: middle;
  width:90px;
  box-sizing: initial;
}

.col6Box:hover {
    background-color:#0EB9DF;
}
/*LG added col7box for the apps addition and white box */
.col7Box
{
  background: #fff;
  color: #006BD6;
  background-size: 13px 7px;
  background-position: 97% 50%;
  background-repeat: no-repeat;
  text-transform: uppercase;
  padding: 10px 15px 10px 15px;
  border-radius: 3px;
  position: relative;
  border: none;
  margin: 20px auto;
  text-align: center;
  -webkit-transition: .3s background ease-in-out;
  -moz-transition: .3s background ease-in-out;
  -ms-transition: .3s background ease-in-out;
  transition: .3s background ease-in-out;
  vertical-align: middle;
  width:180px;
}		
.col7Box:hover {
    background-color:#fff;
}	
.landing_text
{
	font-family: "Open-Sans Regular", "Segoe UI Regular", Helvetica, arial, sans-serif;
	font-size: 14px;
	color: #29333F;
	/*text color*/
	text-decoration: none;
}       
		
/*styles for full resolution*/
@media screen and (min-width: 1045px)
{
	body
	{
		font-size: 16px;
	}
	h1.Title
	{
		font-size: 45px;
	}
	.p-text
	{
		font-size: 16px;
	}
	.p-linktext
	{
		font-size: 16px;
	}
	.p-linktextexternal
	{
		font-size: 16px;
	}
	/* unvisited link */
	a:link
	{
		font-size: 16px;
	}
	/* visited link */
	a:visited
	{
		font-size: 16px;
	}
	/* mouse over link */
	a:hover
	{
		font-size: 16px;
		text-decoration: none;
	}
	/* selected link */
	a:active
	{
		font-size: 16px;
	}
	.stack .row .col
	{
		height: 50px;
		font-size: 16px;
	}
	.stack .row .col3Box
	{
		width: 180px;
		font-size: 16px;
		float: left;
	}
	.stack .row .col4
	{
		font-size: 16px;
	}
	.stack .row .col4Box .col6Box
	{
		font-size: 16px;
	}
	.stack .row .col4 .main4
	{
        text-align: center;
        border-radius: 3px;
	}
	.stack .row .colSpace
	{
		width: 30px;
		float: left;
		text-align: center;
		vertical-align: middle;
		height: 50px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		/* align horizontal */
		align-items: center;
		/* align vertical */
	}
	
	.stack .row .col6Box
	{
		float: left;
	}
	
	.stack .row .col6Space
	{
	    background: #006BD6;
        color: #fff;
        background-size: 35px 55px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
		width: 30px;
		float: left;
		text-align: center;
		vertical-align: middle;
		height: 50px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		/* align horizontal */
		align-items: center;
		/* align vertical */
		background-color: #f4f6f5;
		border-radius: -3px;
		content: '>';
		color: #ffffff;
		position: relative;
		border: none;
		margin: 0 auto;
		-webkit-transition: .3s background ease-in-out;
		-moz-transition: .3s background ease-in-out;
		-ms-transition: .3s background ease-in-out;
		transition: .3s background ease-in-out;	
		
	}
	.center_div
	{
		display: flex;
		justify-content: center;
		/* align horizontal */
		align-items: center;
		/* align vertical */
	}
	
}
/*end styles for full resolution*/
/*styles for small resolution*/
@media screen and (max-width: 1044px)
{
	body
	{
		font-size: 14px;
	}
	h1.Title
	{
		font-size: 30px;
	}
	.p-text
	{
		font-size: 14px;
	}
	.p-linktext
	{
		font-size: 14px;
	}
	.p-linktextexternal
	{
		font-size: 14px;
	}
	/* unvisited link */
	a:link
	{
		font-size: 14px;
	}
	/* visited link */
	a:visited
	{
		font-size: 14px;
	}
	/* mouse over link */
	a:hover
	{
		font-size: 14px;
	}
	/* selected link */
	a:active
	{
		font-size: 14px;
	}
	.stack .row .col
	{
		height: 30px;
		font-size: 14px;
	}
	.stack .row .col3Box
	{
		width: 180px;
        padding: 10px 15px 10px 15px;
		font-size: 14px;
        margin-bottom: 15px;
	}
	.stack .row .col6Box
	{
		width: 170px;
        padding: 10px 15px 10px 15px;
		font-size: 14px;
        margin-bottom: 15px;
	}
	.stack .row .col4
	{
		font-size: 14px;
		padding-left: 10px;
		padding-right: 10px;
        float:none;
        margin-bottom: 10px;
	}
	.stack .row .col4Box
	{
		font-size: 14px;
        padding: 10px 15px 10px 15px;
	}
	.stack .row .colSpace
	{
		width: 2px;
		float: left;
		text-align: center;
		vertical-align: middle;
		height: 35px;
		padding-left: 2px;
		padding-right: 2px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		/* align horizontal */
		align-items: center;
		/* align vertical */
	}
	
	.stack .row .col6Space
	{
		width: 2px;
		float: left;
		text-align: center;
		vertical-align: middle;
		height: 35px;
		padding-left: 2px;
		padding-right: 2px;
		font-size: 16px;
		display: flex;
		justify-content: center;
		/* align horizontal */
		align-items: center;
		/* align vertical */
	}
	
	.center_div
	{
		display: flex;
		justify-content: center;
		/* align horizontal */
		align-items: center;
		/* align vertical */
	}
}
/*styles for small resolution*/


/* CSS animation */
div.slide-left {
    width: 100%;
    overflow: hidden;
}

.slide-in-content {
    animation: slide-left 2s;
}
.slide-in-image {
    animation: slide-left 3s;
}

@keyframes slide-left {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}
/* end CSS animation*/