<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<link rel="alternate stylesheet" type="text/css" href="resource://gre-resources/plaintext.css"
title="Wrap Long Lines">
</head>
<body>
<pre>* {
box-sizing: border-box;
}
h0 {
font-size: 8vw;
color: #565555;
}
h1 {
font-size: 5vw;
padding: 0;
margin: 0;
}
h2 {
font-size: 3.3vw;
color: #3a3a3a;
}
li{
margin: 15px 0;
}
body {
font-family: "Spartan", "Arial", sans-serif;
}
.body {
display: grid;
background-color: #ffffff;
}
.container {
display: grid;
height: 100vh;
margin-bottom: 50px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 0.1fr 1fr 0.5fr 1fr 1fr 0.5fr 1fr 0.5fr .1fr;
grid-template-areas:
"nav nav"
"bannerserv bannerserv"
"uavservtxt uavservimg"
"procservtxt procservimg"
"bannerapps bannerapps"
"appstxt appsimg"
"bannerproj bannerproj"
"projtxt projimg"
"footer footer";
grid-gap: 0.2rem;
}
nav {
grid-area: nav;
position: fixed !important;
width: 96%
}
nav {
grid-area: nav;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
border-bottom: 1px solid lightgrey;
padding: 16px 15px 16px;
font-size: 95%;
text-align: center;
background-color: #636262;
}
a[href] {
color: white;
}
a:link {
color: white;
}
a:visited {
color: light gray;
}
a:hover {
color: black;
}
a:active {
color: dark gray;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
align: middle
}
.centeredimage {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.centeredtext {
position: absolute;
top: 37%;
left: 50%;
transform: translate(-50%, -50%);
}
.lefttext {
position: absolute;
top: 60%;
left: 18%;
transform: translate(-50%, -50%);
}
video {
max-width: 100%;
height: auto;
max-height: 100%;
}
footer {
grid-area: footer;
position: absolute;
position: sticky;
bottom:0;
width:97.5%;
border-top: 1px solid lightgrey;
padding: 5px 15px 5px;
background: #3b3b3b;
font-size: 70%;
text-align: right;
color: #d6d6d6;
}
#bannerserv {
grid-area: bannerserv;
vertical-align: center;
color: white;
padding-top: 40px;
padding-bottom: 20px;
background-color: white;
}
#uavservtxt {
grid-area: uavservtxt;
border: 1px solid #f4f4f4;
padding: 16px;
background-color: #fafafa;
align-items: left;
text-align: left;
}
#uavservimg {
grid-area: uavservimg;
border: 1px solid #f4f4f4;
padding: 16px;
background-color: #fafafa;
align-items: left;
text-align: left;
}
#procservtxt {
grid-area: procservtxt;
border: 1px solid #f4f4f4;
padding: 16px;
background-color: #fafafa;
align-items: left;
text-align: left;
}
#procservimg {
grid-area: procservimg;
border: 1px solid #f4f4f4;
padding: 16px;
background-color: #fafafa;
align-items: left;
text-align: left;
}
#bannerapps {
grid-area: bannerapps;
vertical-align: center;
color: white;
padding-top: 40px;
padding-bottom: 20px;
background-color: white;
}
#appstxt {
grid-area: appstxt;
padding: 16px;
border: 1px solid #f4f4f4;
background-color: #fffef9;
align-items: left;
text-align: left;
}
#appsimg {
grid-area: appsimg;
padding: 16px;
border: 1px solid #f4f4f4;
background-color: #fffef9;
align-items: left;
text-align: left;
}
#bannerproj {
grid-area: bannerproj;
vertical-align: center;
color: white;
padding-top: 40px;
padding-bottom: 20px;
background-color: white;
}
#projtxt {
grid-area: projtxt;
padding: 16px;
border: 1px solid #f4f4f4;
background-color: #fafafa;
align-items: left;
text-align: left;
}
#projimg {
grid-area: projimg;
padding: 16px;
border: 1px solid #f4f4f4;
background-color: #fafafa;
align-items: left;
text-align: left;
}
@media only screen and (max-width: 550px) {
.container {
margin-top: 40px;
grid-template-columns: 1fr;
grid-template-rows: 0.1fr 1fr 0.5fr 1fr 1fr 1fr 1fr 0.5fr 1fr 1fr 0.5fr 1fr 1fr 0.1fr;
grid-template-areas:
"nav"
"bannerserv"
"uavservtxt"
"uavservimg"
"procservtxt"
"procservimg"
"bannerapps"
"appstxt"
"appsimg"
"bannerproj"
"projtxt"
"projimg"
"footer";
}
}</pre>
</body>
</html>