/* Desktop Layout */


/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {
.about-img img {
   width: 100%;
   padding-top: 30px;
   padding-bottom: 40px;
}
.contact-img img {
   margin-top: 0px;
   width: 100%;
}
}

/* Mobile Layout: 320px. */

@media only screen and (max-width: 767px) {
.navbar-toggle {
   background-color: black;
}
.navbar-toggle .icon-bar {
   background: #fff;
}
.navbar-brand > img {
   margin-top: 8px;
   width: 100%;
}
.home-header {
   height: auto;
   padding-bottom: 80px;
}
.element {
   font-size: 30px;
}
.navbar-inverse {
   background-color: #121111;
   border-color: #080808;
}
.about-img img {
   padding-top: 30px;
   padding-bottom: 40px;
   float: left;
   width: 100%;
}
.hover-content {
   padding-top: 50px;
}
.service-heading hr {
   padding-bottom: 30px;
}
.portfolio-heading hr {
   padding-bottom: 20px;
}
.about-heading hr {
   padding-bottom: 30px;
}
.contact-heading hr {
   padding-bottom: 40px;
}
.contact-img img {
   margin-top: 20px;
   width: 100%;
}
.filter-button-wrapper {
   margin-bottom: 30px;
}
.filter-button-group ul li {
   background: #6eb4fa;
   color: #062033;
   display: inline;
   float: left;
   font-family: "Signika", sans-serif;
   font-size: 16px;
   font-weight: 600;
   padding: 10px 25px;
   transition: all 1s ease 0s;
   margin-bottom: 7px;
   margin-right: 7px;
}
.filter-button-group ul li {
   font-size: 10px;
}
.filter-button-group li.active {
   font-size: 10px;
}
}

/* Wide Mobile Layout: */

@media only screen and (min-width: 480px) and (max-width: 767px) {
.navbar-toggle {
   background-color: black;
}
.navbar-toggle .icon-bar {
   background: #fff;
}
.navbar-brand > img {
   margin-top: 18px;
   width: 100%;
}
.navbar-inverse {
   background-color: #121111;
   border-color: #080808;
}
.home-header {
   height: auto;
   padding-bottom: 80px;
}
.element {
   font-size: 30px;
}
.about-img img {
   padding-top: 30px;
   padding-bottom: 40px;
   width: 86%;
   float: left;
}
.hover-content {
   padding-top: 150px;
}
.service-heading hr {
   padding-bottom: 30px;
}
.portfolio-heading hr {
   padding-bottom: 20px;
}
.about-heading hr {
   padding-bottom: 30px;
}
.contact-heading hr {
   padding-bottom: 40px;
}
.contact-img img {
   margin-top: 20px;
   width: 100%;
}
}