@import url(https://fonts.googleapis.com/css?family=Raleway:400,600);
/*styling open close button*/
.button1 {
  display:inline;
  position:fixed;
  right:10%;
  top:70px;
  z-index:9999;
  font-size:25px;
  float:right;
  background-color: transparent;
}
.button1 a {
  text-decoration:none;
}/*
.btn-open:after {
  color:#5fb9d2;
  content:"\f0c9";
  font-family:"FontAwesome";
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}*/
.btn-open:hover:after {
  color:#333;
}/*
.btn-close:after {
  color:#5fb9d2;
  content:"\f00d";
  font-family:"FontAwesome";
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}*/
.btn-close:hover:after {
  color: #333;
}
/*overlay*/
.overlay {
  display:none;
  position:fixed;
  top:0;
  height:100%;
  width:100%;
  overflow:auto;
  z-index:99;

}
.wrap {
  color:#fff;
  text-align:center;
  width: 30%;
  right: 0;
  margin:0 auto;
  position: fixed;
  z-index: 999;
  background-color:rgba(0,0,0,0.6);
  height: 100%;
}
.wrap ul.wrap-nav {
  text-transform:capitalize;
  padding:150px 0px 100px;
}
.wrap ul.wrap-nav li {
  font-size:20px;
  display:inline-block;
  vertical-align:top;
  width:24%;
  position:relative;
}
.wrap ul.wrap-nav li a {
  font-family: 'Raleway', sans-serif; 
  color:#FFF;
  display:block;
  padding:8px 0;
  font-weight: 700;
  text-decoration:none;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
  color:#f0f0f0;
}
.wrap ul.wrap-nav ul {
  padding:20px 0;
}
.wrap ul.wrap-nav ul li {
  display:block;
  font-size:13px;
  width:100%;
  color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
  color:#f1f1f1;
}
.wrap ul.wrap-nav ul li a:hover {
  color:#fff;
}
.social {
  font-size:25px;
  padding:20px;
}
.social p {
  margin:0;
  padding:20px 0 5px 0;
  line-height:30px;
  font-size:13px;
}
.social p a {
  color:#34B484;
  text-decoration:none;
  margin:0;
  padding:0;
}
.social-icon {
  width:80px;
  height:50px;
  background:#e9e9e9;
  color:#333;
  display:inline-block;
  margin:0 20px;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.social-icon:hover {
  background:#34B484;
  color:#f0f0f0;
}
.social-icon i {
  margin-top:12px;
}
@media all and (max-width: 1000px) {
.button1{margin-top: 30px; font-size: 30px; right: 5%;}
}
@media all and (max-width: 768px){.wrap {width: 100%;background-color:rgba(0,0,0,0.9);}
}
@media screen and (max-width:48em) {
  .wrap ul.wrap-nav>li {
    width:100%;
    padding:20px 0;

  }
  .wrap ul.wrap-nav {
    padding:30px 0px 0px;
  }
  nav ul {
    /*opacity:0;
    visibility:hidden;*/
  }
  .social {
    color:#c1c1c1;
    font-size:25px;
    padding:15px 0;
  }
  .social-icon {
    width:100%;
    height:50px;
    background:#fff;
    color:#333;
    display:block;
    margin:5px 0;
  }
}
.content {
  width:100%;
  margin-top:200px;
  font-size:20px;
  color#333;
  text-align: center;
}