#photo{
  position: relevant;
  left: 100px;
  top: 150px;
  width:40%;
  height:20px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
#wrap:after {
      display: block;
      clear: both;
      float: none;
  
    }
    #wrap div {
      float: left;
      word-break: break-all;
      
    }
 .button {
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
    #one {
      width: 20%;
      background-color: #333;
      padding: 50px 20px;
      color: #f2f2f2
    }

#one:hover{
   background-color: #ddd;
  color: black;
}


    #two {
      width: 20%;
      background-color: #333;
      padding: 50px 20px;
      color: #f2f2f2
    }

#two:hover{
    background-color: #ddd;
  color: black;
}

    #three {
      width: 20%;
      background-color: #333;
      padding: 50px 20px;
      color: #f2f2f2
    }

   #three:hover{
   background-color: #ddd;
  color: black
}

     #four {
      width: 20%;
      background-color: #333;
      color: #f2f2f2;
      padding: 50px 20px

}
#four:hover{
    background-color: #ddd;
  color: black;
}
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
#Library {
    height: 70px;
    width: 120px;
}
#Library:hover {
  
    height: 70px;
    width: 120px;
}
.column1 {
  float: left;
  width: 49%;
  padding: 0px;
  margin-left:0.75%;
  
}

/* Clear floats after image containers */
.row1::after {
  content: "";
  clear: both;
  display: table;
}
.column {
  float: left;
  width: 49%;
  padding: 0px;
  
  
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}
img { max-width: 100%; }


html { font-size:100%; }

@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} }

.solid {border-style: solid;}
.header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}