body {
  background-color: rgb(242,242,242);
  margin:0;
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  width: 100%;
  margin: auto;
}

#header{
  background-color: #99d3df;
  color: white;
  width: 100%;
  height: auto;
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 40px;
  padding-top: 80px;
  padding-left: 15%;
  padding-bottom: 30px;
  box-sizing: border-box;

}


#header1{
  font-size: 45px;
  width: 40%;
}

#header2{
  font-size: 15px;
  width: 35%;
}

#content {
  width: 75%;
  margin: auto;
  box-sizing: border-box;
}

.work div,p {
  line-height: 1.6;
}

.work div{
  margin-top: 10px;
  font-weight: bold;
}

.work p{
  display: inline;
  font-size: 13px;
}

img{
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.footer {
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #cdcdcd;
  color: rgb(80,80,80);
  padding-left: 10%;
  padding-right: 10%;
  margin-left: 0px;
  margin-bottom: 0px;
  position: relative;
  left: 0px;
  bottom: 0px;
  box-sizing: border-box;
}

#footer1{
  font-size: 14px;
  padding-top: 1%;
  padding-bottom: 0.8%;
}

#footer2{
  font-size: 12px;
  padding-bottom: 1%;
  color: rgba(80,80,80,0.7);
}


ul{
  width: 18%;
  position: absolute;
  right: 15%;
  top: 80px;

}

ul div{
  float: left;
  margin-left: 25px;
}

a:link{
  text-decoration: none;
}

a:hover{
  color: #000000;
  text-decoration: underline;
}

#intro2 strong {
  color: blue;
}

.navbar a:link{
  color: white;
}

.navbar a:visited{
  color: white;
}

#content a:link{
  color: rgb(80,80,80);
}

#content a:visited{
  color: rgb(80,80,80);
}

.footer a:link{
  color: rgb(123,123,123);
}

.footer a:visited{
  color: rgb(123,123,123);
}

img{
  transform: scale(1.0);
  transition-property: transform;
  transition-duration: 0.5s;
}

img:hover{
transform: scale(1.05);
}


.clear1{
  clear: both;
}

/*applying media quires*/

/*desktop layout*/
@media only screen and (min-width: 992px){

  .work{
    width: 39%;
    color: rgb(80,80,80);
    float: left;
    box-sizing: border-box;
    position: relative;
    left: 10%;
    margin-bottom: 40px;
    margin-right: 2%;
  }
}

/*tablet layout*/
@media only screen and (min-width: 769px) and (max-width: 991px){

  ul{
    width: 15%;
    line-height: 2;
  }

  #header{
    height: auto;
  }

  #header2{
    margin-top: 10px;
    font-size: 15px;
    width: 80%;
  }


  .work{
    width: 39%;
    color: rgb(80,80,80);
    float: left;
    box-sizing: border-box;
    position: relative;
    left: 10%;
    margin-bottom: 40px;
    margin-right: 2%;
  }
}

/*mobile layout*/
@media only screen and (max-width: 768px) {

  .work{
    width: 80%;
    color: rgb(80,80,80);
    float: left;
    box-sizing: border-box;
    position: relative;
    left: 11%;
    margin-bottom: 40px;
  }


  ul{
    width: 10%;
    line-height: 2;

  }

  #header1{
    font-size: 45px;
    width: 50%;
  }

  #header2{
    margin-top: 10px;
    font-size: 15px;
    width: 80%;
  }



}