* {
  box-sizing: border-box;}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;}

header {
  overflow: hidden;
    background-color: #333;
    position: fixed; 
    width: 100%;
    z-index: 1;}

#header-img {
    float: left;}

#nav-bar {
  float: right;}

#nav-bar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;}

#nav-bar a:hover {
    background: blue;
    color: black;}

#nav-bar a:active {
    background: blue;
    color: black;}

#home {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('images/data.jpg') 50% 0 no-repeat fixed;
  background-size: cover;
  color: white;}

.content {
  /* Padding is used for smaller screens */
  padding: 0 30px;
  text-align: center;
  margin-top: 0px;}

#intro, #features {
  background-color: lightgray;}

#email {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;}

.container {
  padding: 64px;}

.row:after {
  content: "";
  display: table;
  clear: both;}

.column-66 {
  float: left;
  width: 66.66666%;
  padding: 20px;}

.column-33 {
  float: left;
  width: 33.33333%;
  padding: 20px;}

.large-font {
  font-size: 48px;
    color: blue;}

.xlarge-font {
  font-size: 64px;}

.button {
  border: none;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background-color: blue;}

img {
  display: block;
  height: auto;
  max-width: 100%;}

ul {
    list-style-position: inside;}

#pricing {
    padding-top: 50px;
    padding-bottom: 50px;}

.pricingdiv {
    margin-bottom: 500px;
    padding: 10px;}

.columns {
  float: left;
  width: 33.3%;
  padding: 8px;}

.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;}

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)}

.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;}

.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;}

.price .grey {
  background-color: #eee;
  font-size: 20px;}

#contact {
    background-color: black;
    height: ;
    margin-top: 50px;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;}

input[type=submit] {
  background-color: blue;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;}

input[type=submit]:hover {
  background-color: blue;}

/* Style the container/contact section */
.containerone {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 10px;}

.columnone {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;}

.rowone:after {
  content: "";
  display: table;
  clear: both;}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  height: 100px;
  width: 100%;
  margin-top: px;
  padding: 5px 0;}

@media screen and (max-width: 800px) {
    .large-font {
        font-size: 30px;}
    .xlarge-font {
        font-size: 45px;}
    #header-img {
        width: 15%;}
    .column-66 {
        width: 100%;}
    .column-33 {
        width: 100%;}
    #video {
        clear: both;
        max-width: 100%;
        height: auto;}
    .columnone, input[type=submit] {
    width: 100%;
    margin-top: 0;}
    .columns {
    width: 100%;}
    #pricing {
        padding-top: 10px;}
    #contact {
     clear:  both;}
}