/*
 * ImageHover.css - Demo Page
 * Author: Ciarán Walsh

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 */
 @import url(http://fonts.googleapis.com/css?family=Roboto);
 body {
  background-image: url('..img/BB.png');
    background-size: cover;
    background-position: center;
   margin: 0;
   font-family: sans-serif;
   color: #333;
   line-height: 140%;
 }
 hr {
   margin-top: 2em;
   background-color: #ddd;
   border: none;
   height: 1px;
 }
 .sep {
   color: #ddd;
   margin: 0 4px;
 }
 .demo {
   display: inline-block;
 
   box-sizing: border-box;
 }
 .demo textarea {
   box-sizing: border-box;
   font-family: "Roboto";
   font-size: 0.9em;
   height: 32px;
   padding: 6px 0px;
   resize: none;
   text-align: center;
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 .main {
   max-width: 980px;
   margin: 0 auto;
   padding: 0 20px;
 }
 img {
   border: none;
 }
 small {
   display: block;
 }
 p {
   /* font-family: 'Roboto', sans-serif; */
   margin: 0 0 40px;
 }
 .sup {
   vertical-align: super;
   margin-left: -1em;
   padding: 0.3em 0.5em;
   line-height: 100%;
   font-size: 0.22em;
   border: #eee solid 1px;
   border-radius: 4px;
   color: inherit;
   background-color: #fff;
 }
 .sup:hover {
   background: #eee;
 }
 a {
   color: #1e1e1f;
   text-decoration: none;
 }
 .footer a:hover,
 .nav:hover {
   color: #207ad1;
 }
 .intro,
 .download {
   padding: 0;
   box-sizing: border-box;
 }
 .intro {
   max-width: 66%;
   margin: 0;
   display: inline-block;
   padding-right: 20px;
 }
 .download {
   display: inline-block;
   text-align: center;
   width: 33%;
   padding: 0 20px;
   vertical-align: top;
 }
 .download a.download-btn {
   background-color: #01579b;
   width: 100%;
   padding: 12px 0;
   display: block;
   color: #fff;
   -webkit-transition: all 0.2s ease;
   transition: all 0.2s ease;
 }
 .download a.download-btn:hover {
   background-color: #0165b4;
 }
 .download p.version {
   margin: 10px 0;
 }
 .markup {
   margin: 3em 0;
 }
 .effects {
   margin: 3em 0;
 }
 .license {
   margin-top: 2em;
 }
 h1 {
   text-align: left;
   font-size: 2em;
 }
 h2 {
   margin-top: 10px;
   color: #888;
   line-height: 1.2em;
 }
 h3 {
   margin: 0;
   color: #888;
   margin: 0 0 15px;
 }
 pre.prettyprint {
   background-color: #eee;
   padding: 20px 30px !important;
   border: none !important;
   margin: 30px 0;
 }
 .footer {
   overflow: hidden;
   width: auto;
   margin-top: 2em;
   font-size: 0.9em;
 }
 .footer a {
   text-decoration: none;
 }
 .credit {
   font-size: 0.8em;
   font-weight: normal;
 }
 .footer {
   display: block;
   margin-top: 3em;
   padding-top: 3em;
   padding-bottom: 1em;
   font-family: $fontFeature;
   font-size: 1.125em;
   text-align: center;
   line-height: 1.6;
   background: #181818;
   color: #777;
 }
 .footer ul,
 .footer p {
   margin: 0;
   padding: 0;
 }
 .footer ul {
   margin-bottom: 0.25em;
 }
 .footer li {
   display: inline-block;
   vertical-align: middle;
   line-height: 1;
 }
 .footer p {
   margin-top: 0.4em;
   font-size: 0.875em;
 }
 .footer a {
   display: inline-block;
   padding: 0 0.125em;
   color: #b1b1b1;
   transition-duration: 0.2s;
   transition-property: color;
 }
 .footer a:focus,
 .footer a:hover {
   color: white;
 }
 .footer small {
   display: block;
   margin-top: 3em;
   font-size: 0.625em;
 }
 #forkongithub {
   display: none;
 }
 #forkongithub a {
   background: #000;
   color: #fff;
   text-decoration: none;
   font-family: arial, sans-serif;
   text-align: center;
   font-weight: bold;
   padding: 5px 40px;
   font-size: 1rem;
   line-height: 2rem;
   position: relative;
   -webkit-transition: 0.5s;
   transition: 0.5s;
 }
 #forkongithub a:hover,
 #forkongithub a:focus,
 #forkongithub a:active {
   background: #2098d1;
   color: #fff;
 }
 #forkongithub a::before,
 #forkongithub a::after {
   content: "";
   width: 100%;
   display: block;
   position: absolute;
   top: 1px;
   left: 0;
   height: 1px;
   background: #fff;
 }
 #forkongithub a::after {
   bottom: 1px;
   top: auto;
 }
 @media only screen and (max-width: 959px) {
   .demo {
     width: ;
   }
 }
 @media only screen and (max-width: 659px) {
   .demo {
     width: ;
   }
   .intro,
   .download {
     max-width: 100%;
     width: 100%;
   }
 }
 @media only screen and (max-width: 360px) {
   .demo {
     width: ;
   }
 }
 @media only screen and (min-width: 360px) {
   h1 {
     font-size: 3em;
   }
 }
 @media screen and (min-width: 1280px) {
   #forkongithub {
     position: absolute;
     display: block;
     top: 0;
     right: 0;
     width: 200px;
     overflow: hidden;
     height: 200px;
   }
   #forkongithub a {
     width: 200px;
     position: absolute;
     top: 60px;
     right: -60px;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
   }
   .ad__preview a {
     display: inline-block;
     width: 32%;
   }
   .ad__preview .second {
     margin: 0 2%;
   }
 }
 .ad {
   margin-top: 2em;
   text-align: center;
 }