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

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);





body {
	border-top: solid 17px #fff;
	color: #ccc;
font-family: 'Lato', Helvetica, Arial, sans-serif;
  margin: 0;
   background-image: url( );
	 background-repeat: no-repeat;
	 background-position: top center;
	 background-color: #002E67;
background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0.3, #06264F),
	color-stop(0.51, #08356C)
);
background-image: -o-linear-gradient(bottom, #06264F 30%, #08356C 51%);
background-image: -moz-linear-gradient(bottom, #06264F 30%, #08356C 51%);
background-image: -webkit-linear-gradient(bottom, #06264F 30%, #08356C 51%);
background-image: -ms-linear-gradient(bottom, #06264F 30%, #08356C 51%);
background-image: linear-gradient(to bottom, #06264F 30%, #08356C 51%);
}

p{
	
	font-size: 18px ;
	font-weight: 300;
}

.container {
background-color: # ;

}
body#contact  {
background-image: url(../images/contactbkgrnd.jpg);
	 background-repeat: no-repeat;
	 background-position: top center;
	 background-color: #002E67;}

body#contact .container {
background-color: transparent;
}





 

 











 


a{
color: #00cccc;	
	text-decoration: none;
}
a:hover{
color: #fff;
	text-decoration: none;
	
 }

a.button{
	 width: 50%;
	 text-align: center;
	margin: 25px auto;
	display: block;
	border: solid 2px #3e5a7c;
padding: 4px 15px;	
}
a.button:hover{
 
	border: solid 2px #fff;
 
}






.whitethickborder{
	
	border: solid 17px #fff;
}
.bluethickborder{
	
	border: solid 17px #153d70;
}









#toplogo{
height: 130px;
margin:  50px 0 30px 0;	
 text-align: center;

}
 .toparea{
	 	border-bottom: solid 17px #fff;

	  background-color: # ;
	 background-image: url(../images/peopleimg.jpg);
	background-size: cover;	 
	 background-position: top center;
 }
 

 #topquote  {
	 min-height: 115px;
	text-align: center; 
	 margin-bottom: 25px;
 }
   h1, h2 {
	 
	font-weight: 300;
	 margin: 0;
 }
 
  #topquote h1 {
	 color: #fff;
	font-size: 52px; 
	 margin-bottom: 15px;
 }
 
   #topquote h2 {
	  color: #002E67;
	font-size: 30px; 
	 font-weight: 400;
 }
 
.rowresetmargin{
	
margin-right:  15px;
margin-left:  15px;	
	
}

 .boxicon{
	 margin-bottom: 20px;
	 background-repeat: no-repeat;
	 background-position: top center;
 text-align: center;
 }
  .boxicon img{
 width: 125px;
 height: auto;
 }
 
 
.boxicon a img,  a img#logo, a#downarrow img, a.uparrow img{
	opacity: 1;
	color:#FFF;
	transition: opacity 0.5s ease-out;
	-o-transition: opacity 0.5s ease-out;
	-ms-transition: opacity 0.5s ease-out;
	-moz-transition: opacity 0.5s ease-out;
	-webkit-transition: opacity 0.5s ease-out;
}
 


 .boxicon a img:hover,  a img#logo:hover, a#downarrow img:hover, a.uparrow img:hover {
	 
	opacity: .6;
 
}
   .boxicons{
	 
	margin-left:  5px; 
 }
 

 #toparrow {
	 padding: 20px 0px;
	height: 70px; 
	  text-align: center; 
	  margin-bottom:50px;
 }
  
  #toparrow a img{
   
 }
 
    a#downarrow img{
    width: 180px;
	height: auto;
 }
 
a, a.button {
-moz-transition: background-color 200ms linear, color 200ms linear;
    -o-transition: background-color 200ms linear, color 200ms linear;
    -webkit-transition: background-color 200ms linear, color 500ms linear;
    transition: background-color 200ms linear, color 200ms linear;
	transition: border-color 0.3s;
-o-transition: border-color 0.3s;
-ms-transition: border-color 0.3s;
-moz-transition: border-color 0.3s;
-webkit-transition: border-color 0.3s;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  .formholder{
	 background-color: #1e4576;
	margin-top: -17px; 
	 padding: 30px 100px;
	 display:block;
 }
.formelement{
	margin: 20px 0;
}


 
 
 form *:after,
 form *:before {
	margin: 0;
	padding: 0;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
}
 label {
	border-radius: 0;
	 
	text-align: left;
	white-space: normal;
	color: inherit;
	width: 100%;
	display: block;
	position: relative;
display: block;
font-size: 17px;
}
.tooltip {
	position: absolute;
	z-index: 1;
	left: -9999px;
	padding: 2px 8px 3px;
	font-size: 11px;
	line-height: 16px;
	font-weight: 400;
	background: rgba(0,0,0,0.9);
	color: #fff;
	opacity: 0;
	transition: margin 0.3s, opacity 0.3s;
	-o-transition: margin 0.3s, opacity 0.3s;
	-ms-transition: margin 0.3s, opacity 0.3s;
	-moz-transition: margin 0.3s, opacity 0.3s;
	-webkit-transition: margin 0.3s, opacity 0.3s;
}
  .tooltip:after {
	content: '';
	position: absolute;
}
  input:focus + .tooltip {
	opacity: 1;	
}

.form .tooltip-top-right {
	bottom: 100%;
	margin-bottom: 15px;
	width:auto;
	white-space:nowrap;
}
  .tooltip-top-right:after {
	top: 100%;
	right: 16px;	
	border-top: 4px solid rgba(0,0,0,0.9);
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
 input:focus + .tooltip-top-right{
	right: 0;
	left: auto;
	margin-bottom: 5px;
}

  .tooltip-top-left {
	bottom: 100%;
	margin-bottom: 15px;
}
.form .tooltip-top-left:after {
	top: 100%;
	left: 16px;
	border-top: 4px solid rgba(0,0,0,0.9);
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
  input:focus + .tooltip-top-left{
	right: auto;
	left: 0;
	margin-bottom: 5px;
}

  .tooltip-right {
	top: 9px;
	white-space: nowrap;
	margin-left: 15px;
}
 .tooltip-right:after {
	top: 6px;
	right: 100%;
	border-top: 4px solid transparent;
	border-right: 4px solid rgba(0,0,0,0.9);
	border-bottom: 4px solid transparent;
}
 .input input:focus + .tooltip-right {
	left: 100%;
	margin-left: 5px;
}

  .tooltip-left {
	top: 9px;
	white-space: nowrap;
	margin-right: 15px;
}
 .tooltip-left:after {
	top: 6px;
	left: 100%;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid rgba(0,0,0,0.9);
}
 .input input:focus + .tooltip-left {
	right: 100%;
	left: auto;
	margin-right: 5px;
}

 .tooltip-bottom-right {
	top: 100%;
	margin-top: 15px;
}
 .tooltip-bottom-right:after {
	bottom: 100%;
	right: 16px;	
	border-right: 4px solid transparent;
	border-bottom: 4px solid rgba(0,0,0,0.9);
	border-left: 4px solid transparent;
}
 .input input:focus + .tooltip-bottom-right {
	right: 0;
	left: auto;
	margin-top: 5px;
}

 .tooltip-bottom-left {
	top: 100%;
	margin-top: 15px;
}
 .tooltip-bottom-left:after {
	bottom: 100%;
	left: 16px;
	border-right: 4px solid transparent;
	border-bottom: 4px solid rgba(0,0,0,0.9);
	border-left: 4px solid transparent;
}
 input:focus + .tooltip-bottom-left {
	right: auto;
	left: 0;
	margin-top: 5px;
}
 
 
 
 
 
 
 input,
 select,
 
 {
	position: relative;
	display: block;
}
   input,
   select, textarea {
	display: block;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	height: 39px;
	padding: 8px 40px 8px 8px;
	outline: none;
	border-width: 2px;
	border-style: solid;
	border-radius: 0;
	font-size: 18px  ;
	font-weight: 400;
	color: #777;
	background-color: #CCC;
	appearance: normal;
	-moz-appearance: none;
	-webkit-appearance: none;
	border-color: #ccc;
	background-color: #EEE;
	transition: border-color 0.3s;
	-o-transition: border-color 0.3s;
	-ms-transition: border-color 0.3s;
	-moz-transition: border-color 0.3s;
	-webkit-transition: border-color 0.3s;
	transition: background-color 0.3s;
	-o-transition: background-color 0.3s ease-out;
	-ms-transition: background-color 0.3s ease-out;
	-moz-transition: background-color 0.3s ease-out;
	-webkit-transition: background-color 0.3s ease-out;
 
}
select{
		padding : 5px;	
      border: 0 !important;  /*Removes border*/
      -webkit-appearance: none;  /*Removes default chrome and safari style*/
      -moz-appearance: none; /* Removes Default Firefox style*/
      background: url('../images/dropdown_arroww.png') no-repeat;  /*Adds background-image*/
      background-position: 98% center;  /*Position of the background-image*/
      width: 100%; /*Width of select dropdown to give space for arrow image*/
      text-indent: 0.01px; /* Removes default arrow from firefox*/
      text-overflow: "";  /*Removes default arrow from firefox*/
 
}	
 .selectstyle{
 	background-color: #EEE;
 border: solid 2px #ccc;
 height: 43px;
   transition: border-color 0.3s;
-o-transition: border-color 0.3s;
-ms-transition: border-color 0.3s;
-moz-transition: border-color 0.3s;
-webkit-transition: border-color 0.3s;
transition: background-color 0.3s;
-o-transition: background-color 0.3s ease-out;
-ms-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-webkit-transition: background-color 0.3s ease-out;
 }
textarea{
	min-height: 100px;
}



/*icons   */
form [class^="icon-"], .ui-datepicker [class^="icon-"] {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
input i {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 5px;
	height: 11px;
	background:#FFF ;
	box-shadow: 0 0 0 12px #fff;
	z-index:-1;
}
 input i:after,
 input i:before {
	content: '';
	position: absolute;
	right: 0;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
 input i:after {
	bottom: 0;
	border-top: 4px solid #ccc;

}
 input i:before {
	top: 0;
	border-bottom: 4px solid #ccc;
}



   .icon-append,
   .icon-prepend {
	position: absolute;
	top: 5px;
	width: 29px;
	height: 29px;
	font-size: 15px;
	line-height: 29px;
	text-align: center;
}
   .icon-append {
	right: 5px;
	padding-left: 3px;
	border-left-width: 1px;
	border-left-style: solid;
}

 

/*icons   */





 .selectstyle:focus,
    input:focus,
   	select:focus, .selectstyle:hover,input:hover, textarea:hover,
    select:hover  {
	border-color: #00cccc;
	color: #444;
	background-color: #ccc;
}
 
 
::-webkit-input-placeholder {
   	color: #777;
}

:-moz-placeholder { /* Firefox 18- */
   color: #777;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #777;  
}

:-ms-input-placeholder {  
   color: #777;  
}
 
 .usererror{
	color: #00cccc ; 
	 
 }
 .inputerrorhighlight{
	border: solid 0px #00cccc; 
	 border-left: solid 11px #00cccc; 
	  
 } 
 .security input{
float: right;
width: 40%;	 
 }
  .security span{
 float: left;
width: 50%;	
font-weight: 300; 
 }
   .security label{
min-height: 90px; 
line-height: 1.2;
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 .contentbox{
	 margin: 90px 0 40px   0;
	 min-height: 190px;
 }
 
 
  .peopleimg{
	background-image: url(../images/people.png);
	 background-repeat: no-repeat;
	 background-position: top center;
 }
 
 .hostedimg{
	background-image: url(../images/hosting.png);
	 background-repeat: no-repeat;
	 background-position: center center; 
  }
  .apiimg{
	background-image: url(../images/api.png);
	 background-repeat: no-repeat;
	 background-position: center center; 
  }
  .reportingimg{
	background-image: url(../images/reporting.png);
	 background-repeat: no-repeat;
	 background-position: center center; 
  }
 
  .hostedimg, .apiimg, .reportingimg  
  {
 
	 background-size: 65%;
 }
 
   .peopleimg  
  {
 
background-size: cover;	 
 }

 
 
 
 
 
 
 
 
 .contenttext{
	text-align: center; 
	 
 }
 
  .contenttext h1{
	color: #76a3c2;
	margin-bottom: 15px;
 }
 
   .contenttext p{
	color: #cccccc;
 }
 













 footer {
	 display: block;
	background-color: #dedede;
	 
	 margin-top: 100px;
	 padding: 80px  ;
 }
 
 
  footer .contenttext p{
	color: #777;
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 .contentheader{
	  
	 min-height: 115px;
	text-align: left; 
	 margin-bottom: 25px;
  
 }
 
 
 
    .contentheader h1 {
	 color: #72a1c1;
	font-size: 42px; 
	 margin-bottom: 15px;
 }
 
    .contentheader h2 {
	  color: #002E67;
	font-size: 30px; 
	 font-weight: 400;
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
 

 
 
 
 
 

 
 
 
 
 
 
 
 
 
 
 
 

@media (max-width: 1200px) {
 
  
     .boxicons{
	 
	margin-left: 14px; 
 }
 
}
 
  
@media (max-width: 992px) {
 
  
   .boxicons{
	 
	margin-left: 10px; 
 }
 
}
 
 
  
 @media (max-width: 768px) {
	 
	 .formholder{
	 background-color: #1e4576;
	margin-top: 3px; 
	 padding: 30px 40px;
 }
 
  input,
   select, textarea {
 	 
	font-size: 15px  ;
 }
 
a.button.formbutton{
	width: 200px; 
 }
 
	 
	 .bluethickborder{
	
	border: solid 13px #153d70;
}	 
	 
	 .boxicon{
	 margin-bottom: 40px;
	 background-repeat: no-repeat;
	 background-position: top center;
 text-align: center;
 } 
  .boxicon img{
 
 }
 	 
 .boxicons{
	 
	margin-left:5px; 
 }
 	 
	 


  #topquote h1 {
	 
	font-size: 42px; 
	 
 }
 
   #topquote h2 {
	 
	font-size: 24px; 
	 margin-bottom: 30px;
 }
 
 
   .contenttext h1{
	color: #76a3c2;
	margin-bottom: 15px;
	font-size: 34px;
 }
 
 
 
  .contentbox{
	 margin: 50px 0 30px   0;
	 min-height: 160px;
 }
 
 
 
 .hostedimg, .apiimg, .reportingimg  
  {
 
	 background-size: 80%;
 }

 
 
 
 }
 
 
 
  
   @media (max-width: 480px) {
  
 
  .boxicons{
	 
	margin-left: -5px; 
 }
 
 }

 
 
 
 
 
 
 
   @media (max-width: 480px) {
 a.button{
	 width: 70%;
	 text-align: center;
	margin: 25px auto;
	display: block;
	border: solid 2px #3e5a7c;
padding: 4px 15px;	
}
 input, select, textarea{
font-size: 14px;	 
 }
 
 
 
 .hostedimg, .apiimg, .reportingimg  
  {
 
	 background-size: 95%;
 }

   .contentbox{
	 margin: 50px 0 30px   0;
	 min-height: 140px;
 }
 
  .boxicons{
	 
	margin-left: 4px ; 
 }
   .boxicon img{
 width: 107px;
 height: auto;
 }
 	 
 	 .formholder{
	 background-color: #1e4576;
	margin-top: 3px; 
	 padding: 20px  ;
 }
  .contenttext h1{
	font-size: 28px;
 }
 }

 
 
 
 
 
 
  
   @media (max-width: 350px) {
 
 
 
  .boxicons{
	 
	margin-left: -30px; 
 }
 
 
 }
 
 
 
 
 
   /*note 3*/
   @media (max-width: 360px) {
	    
    .contentheader h1 {
	 color: #72a1c1;
	font-size: 28px; 
	 margin-bottom: 15px;
 }
	   
	   
   .formholder p,.formholder label{
	font-size: 14px;
 }
    #topquote h2 {
	 
	font-size: 22px; 
	 margin-bottom: 10px;
 }
 
#toplogo img{
height: 100px;
width: auto;
margin:  0;	
 text-align: center;

}
 #toplogo  {
height: 100px;
width: auto;
margin:  40px 0 30px 0;	
 text-align: center;

}
  #topquote h1 {
	 
	font-size: 32px; 
	 
 }
#toparrow{
margin: 0 0 15px;	
padding: 10px;
height: auto;
}
 footer {
	 
	 padding: 40px  ;
 }
 

 }
 
 
 
   /*note 3*/
   @media (max-width: 320px) {
	 body {
	border-top: solid  7px #fff;
	 }
 .toparea{
	 	border-bottom: solid  7px #fff;

	 
 }
 
  .boxicons{
	 
	margin-left: -2px; 
 }    
     .boxicon img{
 width:90px;
 height: auto;
 }
 
    #topquote h2 {
	 
	font-size: 22px; 
	 margin-bottom: 10px;
 }
 
#toplogo img{
height: 100px;
width: auto;
margin:  0;	
 text-align: center;

}
 #toplogo  {
height: 100px;
width: auto;
margin:  40px 0 30px 0;	
 text-align: center;

}
  #topquote h1 {
	 
	font-size: 26px; 
	 
 } 
 footer {
	 
	 padding: 40px  ;
 }
 

 }