@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);
 body {
}
 .header {
   color: #fff;
   padding: 30px;
   text-align: center;
}
 .header a {
   color: #fff;
}
 @media (min-width: 768px) {
   .header {
     padding: 100px 30px;
  }
}
 .header h1{
   font-size: 4em;
   font-weight: 300;
}
 .header i.fa{
   font-size: 4em;
}
 .header .bounce,{
   -webkit-animation-name: bounce;
   animation-name: bounce;
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}
 .header .animated, {
   -webkit-animation-duration: 2s;
   animation-duration: 2s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
 .section {
   width: 100%;
   position: relative;
}
 .section .left, .section .middle, .section .right {
   width: 100%;
   display: block;
   color: #fff;
   box-sizing: border-box;
   left: 0;
   padding: 30px;
   text-align: center;
   overflow: hidden;
   -moz-transition: 0.3s ease-in-out all;
   -o-transition: 0.3s ease-in-out all;
   -webkit-transition: 0.3s ease-in-out all;
   transition: 0.3s ease-in-out all;
}
 @media (min-width: 480px) {
   .section .left .content, .section .middle .content, .section .right .content {
     position: relative;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
  }
}
 @media (min-width: 480px) {
   .section .left, .section .middle, .section .right {
     width: 50%;
     font-size: 0.9em;
     padding: 10px;
     left: 0;
     float: left;
     position: absolute;
  }
}
 @media (min-width: 768px) {
   .section .left, .section .middle, .section .right {
     width: 33.33333%;
     left: 33.33%;
     padding: 10px;
  }
}
 @media (min-width: 992px) {
   .section .left, .section .middle, .section .right {
     padding: 30px;
     font-size: 1em;
  }
}
 .section.animate .left {
   left: 0;
}
 @media (min-width: 480px) {
   .section.animate .left {
     left: 50%;
  }
}
 @media (min-width: 768px) {
   .section.animate .left {
     left: 0;
  }
}
 .section.animate .right {
   left: 0;
}
 @media (min-width: 480px) {
   .section.animate .right {
     left: 50%;
  }
}
 @media (min-width: 768px) {
   .section.animate .right {
     left: 66.66%;
  }
}
 .section .title {
   background: tomato;
}
 .section .title h2 {
   margin-top: 0;
}
 .section .title p {
   line-height: 1.55em;
   margin-bottom: 0.75em;
}
 .section .title .btn-primary {
   color: #fff;
   background: #ff3814;
   padding: 10px;
   text-decoration: none;
   border-radius: 3px;
   display: inline-block;
   -moz-transition: 0.3s ease-in-out all;
   -o-transition: 0.3s ease-in-out all;
   -webkit-transition: 0.3s ease-in-out all;
   transition: 0.3s ease-in-out all;
}
 .section .title .btn-primary:hover {
   background: #fa2600;
}
 .section .tiles {
   padding: 0;
   background: #fff;
   clear: both;
   display: none;
   float: none;
}
 .section .tiles img {
   width: 50%;
   float: left;
   height: auto;
   opacity: 0.7;
   -moz-transition: 0.3s ease-in-out all;
   -o-transition: 0.3s ease-in-out all;
   -webkit-transition: 0.3s ease-in-out all;
   transition: 0.3s ease-in-out all;
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -o-filter: grayscale(100%);
}
 .section .tiles img:hover {
   opacity: 1;
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   -o-filter: grayscale(0%);
}
 @media (min-width: 768px) {
   .section .tiles {
     display: block;
  }
}
 .section .middle {
   background: slategray;
   z-index: 2;
   padding: 0;
}
 .section .middle img {
   width: 100%;
   height: auto;
   display: block;
}
 @-webkit-keyframes bounce {
   0%, 20%, 50%, 80%, 100% {
     -webkit-transform: translateY(0);
  }
   40% {
     -webkit-transform: translateY(-20px);
  }
   60% {
     -webkit-transform: translateY(-10px);
  }
}
 @keyframes bounce {
   0%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
  }
   40% {
     transform: translateY(-20px);
  }
   60% {
     transform: translateY(-10px);
  }
}