html, body {
    margin: 0px;
    padding: 0px;
}
#navigation {
  display: inline-block;
  width: 100%;
  font-family: Roboto;
  font-size: 20px;
  position: fixed;
  background-color: white;
  padding: 10px 10px 10px 10px;
  box-sizing: border-box;
    z-index: 99;
}

.information a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */

}

.info {
  border-radius: 10px;
  border-color: black;
  background-color: #D3D3D3;
  text-align: center;
  padding: 0px 7px 0px 7px;
  margin-right: 2em;
  display: inline-block;
}

.links {
  width: 100%;
}

.link {
  color: 	#696969;
  margin-left: 5vw;
  text-decoration: none;
  float: right;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  width: 75%;
  height: 4px;
  background-color: gray;
  color: gray;
  border: none;
}

.link:hover {
  color: black;
  text-decoration: none;
}

.navbar {
  background-color: #D3D3D3;
}

.sum {
   text-align: center;
   background-image: url("https://static1.squarespace.com/static/58a22aaa5016e1926aaf01e7/58c6ab85b8a79bba779e1f3c/58dd54c0e58c626c4d1f2ec1/1496319525726/cleanoffice+pic.jpg?format=1500w");
  width: 100%;
  height: 100vh;
    background-size: cover;
  padding-top: 6vh;
}

#t {
  color: #107896;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top: 200px;  
  width:100%;
  bottom:45%;
  display:block;
}

.information {
  display: inline-block;
}

#g {
  height:50px;
  overflow:hidden;
}

#g > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#g div:first-child {
  animation: show 5s linear infinite;
}

#g div div {
  background:#42c58a;
}
#g div:first-child div {
  background:#4ec7f3;
}
#g div:last-child div {
  background:#DC143C;
}


@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

#about {
  background-image: url("http://musiccitiessummit.com/wp-content/uploads/chicago-1.jpg");
  background-size: cover;
  height: 650px;
  vertical-align: top;
  padding-left: 12%;
  padding-top: 6%;
}

.title {
  font-family: Roboto;
  color: #00868B	;
  font-size: 40px;
  font-weight: bolder;
}

.aboutme {
  font-size: 24px;
  font-weight: bolder;
  color: #ffa500;
    font-family: Indie Flower;
}

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

li:before {
  content: "»";
  padding-right: 5px;
}

#portfolio {
  background-image: url("https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?h=350&auto=compress&cs=tinysrgb");
  height: 100vh;
  width: 100%;
  background-size: cover;
}

.grid {
 padding-top: 142px;
}

.row {
  margin-left: 15%;
  margin-right: 15%;
}

.element {
  vertical-align: top;
  display: inline-block;
  padding: 6px 6px 6px 6px;
  
  background: red;
  background: -webkit-linear-gradient(left, #FC5C7D , #6A82FB, #FC5C7D);
  background: -o-linear-gradient(right, #FC5C7D, #6A82FB, #FC5C7D);
  background: -moz-linear-gradient(right, #FC5C7D, #6A82FB, #FC5C7D);
  background: linear-gradient(to right, #FC5C7D , #6A82FB, #FC5C7D);
  
  text-align: center;
  width: 30%;
  height: 300px;
  border-radius: 15px;
  margin-right: 1%;
  margin-bottom: 1%;
    font-family: Titillium Web;
    color: #d3ffce;
}

.element img {
  border-radius: 15px;
  height: 70%;
  width: 100%;
  margin-bottom:-15px;
}

.element h3 {
  color: #7fffd4;
  font-size: 2vw;
  margin-top: 10px;
margin-bottom: -15px;
}

.element p {
  color: #b0e0e6;
  font-size: 0.8vw;
}

#contact {
  width: 100%;
  height: 100%;
  background-color: black;
  text-align: center;
  color: white;
    float:left;
    clear:none;  
    color: aqua;
}

#contact h1 {
  font-family: Eczar;
  margin-top: 0px;
}