@font-face { font-family: Capsuula; src: url('Capsuula.ttf'); } 
/*@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}*/
@font-face { font-family: Prime; src: url('Prime Regular.otf'); }
@font-face { font-family: Prime; font-weight: light; src: url('Prime Light.otf'); }
@font-face { font-family: Quicksand; src: url('Quicksand-Regular.otf'); }
@font-face { font-family: Quicksand; font-weight: bold; src: url('Quicksand-Bold.otf');}
/*@font-face { font-family: Quicksand; font-weight: light; src: url('Quicksand-Light.otf');}
@font-face { font-family: Quicksand; font-weight: italic; src: url('Quicksand-Italic.otf');}*/

ul {
    /*list-style-type: none;*/
	width: 97%;
	/*margin-left: 10%;*/
    overflow: hidden;
    background-color: #121212;
}

li {
    /*border-right: 1px solid #bbb;*/
    display: inline-block;
    /*float: left;*/
}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 150%;
    padding: 8px 24px 8px 24px;
	/*margin: 28px 100px 28px 100px;*/
}

/* Change the link color to #121212 (black) on hover */
li a:hover {
    background-color: #333333;
}
.active {
    background-color: #3388FF;
}

h1 {
	display:inline-block;
    color:#FFF;
	padding: 2px 20px;/*top & bottom, left & right*/
    /*background-color: #121212;*/
	font-family: Prime;
    font-size: 200%;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
}
h2 {
    color:#888888;
    text-align:center;
	font-family: Prime;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
}

h3 {
    color:#3388FF;
    font-size: 110%;
	font-family: Quicksand;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
}
h3:link {
    color: hotpink;
}
h4{
	display:inline-block;
    color:#FFF;
	padding: 5px 10px;/*top & bottom, left & right*/
    /*background-color: #121212;*/
	font-family: Prime;
    font-size: 150%;
    text-align:center;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
}
h5{
    color:#FFFFFF;
    font-size: 110%;
	font-family: Prime;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
}

body {
	/*background-color:EEEEEE;*/
	font-family: Prime;
	/*background-image: url("Beautiful-Green-Field.jpeg");*/
    background-color: #333333;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 50%;
	padding-bottom=10%;
	text-align:center;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	margin-bottom:2.5%;
}
b{
	color:#FFFF00;
	/*color:#FFFFFF;*/
    font-size: 150%;
	font-family: Prime;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	text-rendering: optimizeLegibility !important;
}
i{
	color:#555555;
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
p {
	color:#F0F0F0;
	text-align:left;
	font-family: Helvetica;
    /*font-family: Century Gothic, sans-serif;Helvetica, sans-serif;*/
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	border-color:#121212;
	-moz-border-radius: 11px;
	border-radius: 11px;
	border-width:1px
}
a{
 text-decoration: none;
}
/* unvisited link
a:link {
    color: hotpink;
}*/

/* visited link
a:visited {
    color: green;
}*/

powered {
	color:#F0F0F0;
	text-align:center;
    /*font-family: Century Gothic, sans-serif;Helvetica, sans-serif;*/
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	border-color:#121212;
	-moz-border-radius: 11px;
	border-radius: 11px;
	border-width:1px
}
#imageBlock{
	display:inline-block;
	background-image: url("logo_square.png");
}

.division{
  width:40%;
  float:left;
  padding:20px;
}

#nav {
    line-height:30px;
	background-color:00FFFFFF;
    height:300px;
    width:100px;
    float:left;
    padding:1px; 
	font-family: Prime;
}
form {
    float:center;
    padding:5px; 
	font-family: Helvetica;
	border-color:#121212;
	-moz-border-radius: 11px;
	border-radius: 11px;
}
input[type="text"], textarea {
	font-family: Helvetica;
    color: #ffffff;
	background-color : #333333;
    padding:5px; 
}
input[type="tel"], textarea {
	font-family: Helvetica;
    color: #ffffff;
	background-color : #333333;
    padding:5px; 
}
footer {
	font-family: Helvetica,sans-serif;
    display: block;
    position: fixed;
    padding:5px;
    bottom: 5px;
    width: 98%;
    background-color:#121212;
    color:#00AFFF;
    text-align:center;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#finger_logo {
	position:relative;
    padding:50px;
	margin-left:20%;
	margin-top:0%;
	}
#finger_logo img{
	opacity:0
}
#finger_logo img.bottom{
	position:absolute;
	margin-top:0%;
	margin-left:0%;
	opacity:1
}
#finger_logo img.top{
	position:relative;
	margin-top:0%;
	margin-left:0%;
	opacity:0
}
#finger_logo img.top:hover {
    /*-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    /*   -moz-animation: fadein 1s; /* Firefox < 16 */
    /*    -ms-animation: fadein 1s; /* Internet Explorer */
    /*     -o-animation: fadein 1s; /* Opera < 12.1 */
    /*        animation: fadein 1s;*/
	opacity:1;

	}
	
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none; background-color: #333333; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; background-color: #333333;}
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(preloader_cube.gif) center no-repeat #fff;
    background-color: #333333;
}

#app_logo {
	position:relative;
	margin-left:28px;
	margin-right:28px;
	margin-top:80%;
}
#main_blurb {
	position:relative;
	margin-top:2%;
	
	display:inline-block;
	width:40%;
	text-align:center;
    border: 2px solid;
	border-color:#FFFFFF;
    border-radius: 21px;
    padding: 20px; 
	background-color:rgba(55,55,55,1);
}
#qabadev_logo img{
	opacity:0
}
#qabadev_logo img.bottom{
	position:absolute;
	margin-top:0%;
	margin-left:0%;
	opacity:1
}
#qabadev_logo img.top{
	position:relative;
	margin-top:0%;
	margin-left:0%;
	opacity:0
}
#qabadev_logo img.top:hover {
    /*-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    /*   -moz-animation: fadein 1s; /* Firefox < 16 */
    /*    -ms-animation: fadein 1s; /* Internet Explorer */
    /*     -o-animation: fadein 1s; /* Opera < 12.1 */
    /*        animation: fadein 1s;*/
	opacity:1;
}

#banner {
    display: flex;              /* establish flex container */
    flex-direction: row;
    justify-content: center;    /* align items vertically, in this case */
    align-items: center;        /* align items horizontally, in this case */
	position:relative
    left: 0;
    right: 0;
	height:14%;
	width:auto;
	margin: auto;
}

#construction_banner {
	position:relative
    left: 0;
    right: 0;
	height:14%;
	width:14%;
	margin: 0;
}

#borderElement{
	display:inline-block;
	width:40%;
	margin:20px;
	text-align:left;
    border: 2px solid;
	border-color:#FFFFFF;
    border-radius: 21px;
    padding: 20px; 
	background-color:rgba(55,55,55,1);
}
#borderElementV{
	display:block;
	text-align:left;
    padding:10px; 
    border: 2px solid;
	border-color:#FFFFFF;
	/*border-color:#3388FF;*/
    border-radius: 21px;
    padding: 20px; 
	background-color:rgba(234,234,234,1);
}

#contentContainer {
	display:inline-block;
    border: 1px solid;
	padding:20px
	border-color:#121212;
	background-color:rgba(0,0,0,0.4);
    position: relative;
	-moz-border-radius: 11px;
	border-radius: 11px;
	width:80%
}

#quoteContainer {
	display:inline-block;
    /*border: 1px solid;*/
	border-color:#121212;
	background-color:rgba(255,255,255,0.1);
    position: relative;
	-moz-border-radius: 11px;
	border-radius: 11px;
	width:60%
}