/*

 * 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 {

  margin: 0;

  padding: 0px 0 0 0;

  font-family: sans-serif;

  color: #333;

  line-height: 140%;

  background-color: #82BE01;



}

hr {

  margin-top: 2em;

  background-color: #ddd;

  border: none;

  height: 1px;

}

.sep {

  color: #ddd;

  margin: 0 4px;

}

.demo {

	display: inline-block;

	width: 22%;

	padding-top: 0px;

	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: -150px;

}

.demo textarea {

  box-sizing: border-box;

  font-family: "Roboto";

  font-size: 0.9em;

  height: 40px;

  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;

  font-size:14px;

  margin: 0 0 15px;

}

.sup {

  vertical-align: super;

  margin-left: -1em;

  padding: .3em .5em;

  line-height: 100%;

  font-size: .22em;

  border: #eee solid 1px;

  border-radius: 4px;

  color: inherit;

  background-color: #fff;

}

.sup:hover {

  background: #eee;

}

a {

  color: #2098D1;

  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: 0px;

}

.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: 0;

  color: #888;

  line-height: 1.2em;

}

h3 {

  margin: 0;

  color: #888;

  font-size:16;

  margin: 0 0 15px;

}

pre.prettyprint {

  background-color: #eee;

  padding: 0px 0px !important;

  border: none !important;

  margin: 30px 0;

}

.footer {

  overflow: hidden;

  width: auto;

  margin-top: 2em;

  font-size: .9em;

}

.footer a {

  text-decoration: none;

}

.credit {

  font-size: .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: .25em;

}

.footer li {

  display: inline-block;

  vertical-align: middle;

  line-height: 1;

}

.footer p {

  margin-top: .4em;

  font-size: .875em;

}

.footer a {

  display: inline-block;

  padding: 0 .125em;

  color: #B1B1B1;

  transition-duration: .2s;

  transition-property: color;

}

.footer a:focus,

.footer a:hover {

  color: white;

}

.footer small {

  display: block;

  margin-top: 3em;

  font-size: .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 20px;

  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: 32.5%;

  }

}

@media only screen and (max-width: 659px) {

  .demo {

    width: 49%;

  }

  .intro,

  .download {

    max-width: 100%;

    width: 100%;

  }

}

@media only screen and (max-width: 360px) {

  .demo {

    width: 100%;

  }

}

@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;

}