/* NAVIGATION BAR */
body{
 background-color: white;
 margin: 0;
 padding: 0;
 width: 100%;
 font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
}

h1 {
  font-size: 8vm;
  color: gray;
  text-decoration: underline;
}

body h2 {
 color: gray;
}

hr
{
 margin-left: auto;
 margin-right: auto;
}

nav {
  position: fixed;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #2F2F2F;
  margin-top: -68px;
 }
 
 #b1
 {
  height: 92px;
  float: left;
 }
 
 #b2
 {
  background-color: white;
  height: 50%;
  vertical-align:bottom;
  text-align: left;
  vertical-align:bottom;
  padding: 10px;
  padding-left: 110px;
 }
 
 #b2 a
 {
   display: inline-block;
   vertical-align: middle;
   line-height: normal;
   margin-top: 10px;
   text-decoration: none;
   color: gray;
 }
 
 .link
 {
   border-right: 2px solid gray;
   padding: 5px;
 }
 
 
 
 /* LANDING PAGE */
 #right {
  border: 2px hidden;
  width: 90%;
  margin-right: auto;
  height: 700px;
  margin-left: auto;
  margin-bottom: 140px;
  background-image: url(..\photos\back.jpg);
}

#fade {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 4s;
    -webkit-animation-duration: 4s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

#title {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: example;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  -webkit-transform: translateZ(0);
  animation-duration: 4s;
}

#back
{
 background-image: url(../photos/back.jpg);
 width: 90%;
 margin-left: auto;
 margin-right: auto;
}

/* WEBKIT STUFF FOR SCROLLING KLA TEXT */
@media only screen and (max-width: 800px)
{
  @keyframes example {
    0%   {left:0px; top:160px;}
    100% {left:90px; top:160px;}
  }
  
  @keyframes box {
    0%   {left:0px; top:180px;}
    100% {left:90px; top:180px;}
  }
}

@media only screen and (min-width: 810px)
{
  @keyframes example {
    0%   {left:0px; top:140px;}
    100% {left:100px; top:140px;}
  }
  
  @keyframes box {
    0%   {left:0px; top:180px;}
    100% {left:120px; top:180px;}
  }
}

@keyframes fadeIn {
  from {
    opacity: 0; }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ABOUT US SECTION */
@media only screen and (max-width: 800px)
{
  #main
{
 margin-left: auto;
 margin-right: auto;
 line-height: 25px;
 height: 580px;
}
}

@media only screen and (min-width: 810px)
{
  #main
{
 margin-left: auto;
 margin-right: auto;
 line-height: 25px;
 height: auto;
}
}

#whoarewe h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#whoarewe2 {
 border: hidden;
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 text-align: left;
}

/* PHOTOS OF UPDATES */
#stuff {
 text-align: center;
 width:100%;
 margin-left: auto;
 margin-right: auto;
 border: hidden;
}

#stuff table {
 text-align: center;
 width:100%;
 margin-left: auto;
 margin-right: auto;
 border: hidden;
}

#stuff img {
 padding: 5px;
}

/* FLEX BOX STUFF */
.l1
				{
      width: 90%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
     
				display:flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-evenly;
				padding: 5px;
				}
				
				.p1
				{
     margin-bottom: 10px;
     width: 30%;
     min-width: 250px;
     
				width: 15%;
				padding: 5px;
				margin: 5px;
				flex-basis: auto;
				flex-shrink: 5;
				}
				
				.i1
				{
				width: 100%;
    
    flex-grow: 1;
				}
				
				.t1
				{
     text-align: center;
 width: 100%;
				}

/* CONTACT US */
#contact {
 width: 100%;
}

#hours {
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

/* FOOTER */

footer {
 border: hidden;
 margin-top: 70px;
 padding-left: 10px;
}

/* QUOTE FORM */

@media only screen and (max-width: 800px)
{
  #mouse{
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: lightgray;
}
}

@media only screen and (min-width: 810px)
{
  #mouse{
  width: 70%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: lightgray;
}
}

#mouse2{
  width: 60%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: lightgray;
  text-align: center;
}

#info form{
 width: 50%;
 margin-left: auto;
 margin-right: auto;
}

#info input{
 margin-bottom: 15px;
}

#submit {
  float: left;
}

#form h1 {
    text-align: center;
}

#form h2 {
    text-align: center;
}

/* MISCELLANEOUS */
.buttons
{
 width: 100%;
 padding: 10px;
 background-color: white;
 border: 1px solid;
 cursor: pointer;
}



#text1{
 text-align: center;
 width: 50%;
 border: solid;
}



.left {
  display: flex;
  flex-direction: column;
}

.left > textarea {
  flex: 1;
}