@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Open Sans;
}
/*-- LANDING PAGE STYLING --*/
#hero {
  height: 100vh;
  background: url(../images/backgrounds/h_img.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #ffffff;
}
.site-content {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contents {
  margin-top: 10%;
}
.site-content img {
  padding-bottom: 25px;
}
.site-title {
  padding-bottom: 25px;
}
#hero h1 {
  font-size: 50px;
}
.site-description {
  font-size: 14px;
  padding-left: 25px;
  padding-right: 25px;
}
.line-two {
  padding-bottom: 0;
}
.mouse {
  position: absolute;
  bottom: 0;
}
@media screen and (max-width: 601px) {
  .site-title {
    padding-bottom: 15px;
  }
  .line-two {
    padding-bottom: 5px;
  }
  .site-description {
    font-size: 14px;
  }
  #hero h1 {
    font-size: 28px;
  }
}
/*--- ABOUT STYLING --*/
#about {
  height: auto;
  margin: 10px auto 65px;
  text-align: center;
}
#about .container {
  padding-top: 30px;
}
#about h1 {
  font-size: 30px;
}
#about h1::after {
  content: '';
  background: #222;
  display: block;
  height: 2px;
  width: 10%;
  margin: 20px auto 30px;
}
@media screen and (max-width: 601px) {
  #about {
    margin: 40px 20px;
  }
  #about h1::after {
    width: 35%;
  }
  #about p {
    font-size: 16px;
    margin: 20px 20px;
  }
}
/*--- SERVICES STYLING --*/
#services {
  height: auto;
  position: cover;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/backgrounds/s_image2.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  color: #ffffff;
}
#services .container {
  padding-top: 80px;
}
#services h1 {
  font-size: 30px;
  font-weight: 400;
}
#services h1::after {
  content: '';
  background: #fff;
  display: block;
  height: 2px;
  width: 10%;
  margin: 15px auto 30px;
}
#services p {
  font-size: 17px;
  font-weight: 400;
  padding-bottom: 90px;
}
@media screen and (max-width: 601px) {
  #services .container {
    padding-top: 50px;
  }
  #services h1::after {
    width: 35%;
  }
  #services p {
    font-size: 16px;
    margin: 20px 20px;
    padding-bottom: 60px;
  }
}
/*--- WHAT WE DO STYLING --*/
#whatWeDo {
  padding-top: 50px;
  padding-bottom: 30px;
  text-align: center;
  height: auto;
}
#whatWeDo h1 {
  font-size: 30px;
}
#whatWeDo h1::after {
  content: '';
  background: #222;
  display: block;
  height: 2px;
  width: 15%;
  margin: 15px auto 45px;
}
#whatWeDo .container {
  position: relative;
}
#whatWeDo h6 {
  font-weight: 600;
}
#whatWeDo p {
  font-size: 14px;
}
#whatWeDo .doings {
  height: 180px;
}
#whatWeDo .icon {
  height: 130px;
}
#whatWeDo .details1 {
  display: none;
}
#whatWeDo .illustration1 {
  display: show;
}
#whatWeDo .details1 {
  display: none;
}
#whatWeDo .illustration2 {
  display: show;
}
#whatWeDo .details2 {
  display: none;
}
#whatWeDo .illustration3 {
  display: show;
}
#whatWeDo .details3 {
  display: none;
}
#whatWeDo .icon:hover .doings p {
  text-align: center;
  font-size: 14px;
}
@media screen and (max-width: 601px) {
  #whatWeDo h1::after {
    margin: 15px auto 20px;
    width: 35%;
  }
}
@media screen and (max-width: 1000px) {
  #whatWeDo .doings {
    height: auto;
    cursor: pointer;
  }
}
/*--- PORTFOLIO STYLING --*/
#portfolio {
  padding-top: 50px;
  padding-bottom: 30px;
  text-align: center;
  font-size: 30px;
}
#portfolio h1 {
  font-size: 30px;
}
#portfolio h1::after {
  content: '';
  background: #222;
  display: block;
  height: 2px;
  width: 15%;
  margin: 15px auto 25px;
}
#portfolio .container {
  position: relative;
  width: 85%;
}
#portfolio .row {
  padding-bottom: 40px;
  display: flex;
}
#portfolio .doings {
  height: 180px;
  width: 220px;
  margin: 0 auto;
}
#portfolio .icon {
  margin: 0 auto;
  width: 95%;
  height: 90%;
  -webkit-filter: blur(0);
  filter: blur(0);
  transition: 1.5s ease-in-out;
  opacity: 1;
}
#portfolio .description {
  width: 100%;
  text-align: center;
  padding: 5px 5px;
  color: #222;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.50em;
  font-weight: 600;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-animation-name: Slide;
  -webkit-animation-duration: 2s;
  animation-name: Slide;
  animation-duration: 1.5s;
}
@keyframes Slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.icon .hide {
  display: none;
}
.work1 {
  background: url(../images/portfolio/work4.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.work2 {
  background: url(../images/portfolio/work3.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.work3 {
  background: url(../images/portfolio/work2.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.work4 {
  background: url(../images/portfolio/work1.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.work5 {
  background: url(../images/portfolio/work5.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.work6 {
  background: url(../images/portfolio/work6.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.work7 {
  background: url(../images/portfolio/work7.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.work8 {
  background: url(../images/portfolio/work8.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
@media screen and (max-width: 501px) {
  #portfolio h1::after {
    margin: 15px auto 20px;
  }
  #portfolio h1::after {
    width: 35%;
  }
  #portfolio .icon {
    margin: 0 auto;
    width: 100%;
  }
}
/*-- CONTACT STYLING --*/
#contact {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/backgrounds/c_image.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 50px;
  padding-bottom: 30px;
  font-size: 30px;
  color: #c8c8c8;
}
#contact h1 {
  font-size: 30px;
  text-align: center;
}
#contact h1::after {
  content: '';
  background: #ddd;
  display: block;
  height: 2px;
  width: 15%;
  margin: 15px auto 10px;
}
.form-control {
  background-color: transparent;
  border-color: #ddd;
}
.form-control:focus {
  background-color: transparent !important;
  color: #fff;
  border-color: #ffffff;
}
form .btn {
  background: #111;
  font-weight: 400;
  outline: none;
}
form .btn:hover {
  background: #000;
  font-weight: 300;
  border-radius: 10px;
}
@media screen and (max-width: 601px) {
  #contact h1::after {
    margin: 15px auto 20px;
    width: 35%;
  }
}
.message {
  margin: 10px 10px;
  width: 500px;
  max-width: 65%;
  background-color: green;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
}
.success {
  background: rgb(23, 167, 23);
  color: #fff;
}
.failed {
  background: red;
  color: #fff;
}
/*-- FOOTER STYLING --*/
.footer {
  text-align: center;
}
.footer .company {
  display: block;
  color: #222;
  margin-bottom: 20px;
}
.footer .company {
  font-weight: 600;
}
.footer .footer-icons {
  margin: 35px;
}
.footer .footer-icons a {
  display: inline-block;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 25px;
  color: #ffffff;
  text-align: center;
  line-height: 35px;
  margin-right: 25px;
  margin-bottom: 20px;
}
.footer .footer-icons i {
  margin-top: 11px;
}
.twitter {
  background-color: skyblue;
}
.dribbble {
  background-color: pink;
}
.facebook {
  background-color: rgb(5, 125, 172);
}
.google {
  background-color: red;
}
.skype {
  background-color: rgb(33, 146, 190);
}
.linkedin {
  background-color: rgb(0, 106, 148);
}
.behance {
  background-color: rgb(33, 146, 190);
}
.pinterest {
  background-color: red;
}
.flickr {
  background-color: skyblue;
}