.anim-slide h1
  { font-family:'RobotoBlack'; text-transform:uppercase; font-size:40px; text-align:left; color:#01b9f5;
  }
  .anim-slide h2
  {
    font-family:'RobotoMedium';  font-size:25px; text-align:left; color:#fff;  }
  .anim-slide a span
  {
    font-family:'Roboto';  font-size:18px; text-align:left; color:#2C2C2C; background:#fff; padding:5px 10px;  }
 
  
  .anim-slide img#slider{ left:40px; top:110px; width:54%;}
  .anim-slide h1#plugin{ width:40%; top:42%; right:30px;}
  .anim-slide h2#license{width:40%;top: 58%; right:30px;}
  .anim-slide a#version{width:40%;top: 70%; right:30px; text-align:left;}

  .anim-slide img#todo{ left:40px; top:130px; width:50%;}
  .anim-slide h1#bounce{ width:40%; top:42%; right:30px;}
  .anim-slide h2#bounceUp{width:40%;top: 50%; right:30px;}
  .anim-slide a#bounceRight{width:40%;top:70%; right:30px; text-align:left;}
  
  .anim-slide img#css3{ left:50px; top:140px; width:50%;}
  .anim-slide h1#html5{ width:40%; top:42%; right:30px;}
  .anim-slide h2#jquery{width:40%;top: 58%; right:30px;}
  .anim-slide a#modernizr{width:40%;top: 70%; right:30px; text-align:left;}

  
  div#demo{text-align: center;}
  div#demo>a{display:inline-block;text-decoration: none;}
  div#demo>a>h4{padding: 5px 8px;margin: 20px;background-color: #225A86;color: #fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15);}
  p#credits{z-index:-1;position: fixed;bottom: 0px;width: 100%;text-align: center;font-size: 14px;}
  p#credits>a{font-weight: bold;color: #999;text-decoration: none;}
  img#github-logo{z-index:-1;position: fixed;bottom: -20px;right: 2%;opacity: 0.4;}
  
  @media screen and (max-width: 1024px) {
	
.anim-slide h1{ font-size:30px; text-align:left; color:#01b9f5;}
.anim-slide h2{font-size:22px;  }
	
}

@media screen and (max-width: 768px) {
	
.anim-slide h1{ font-size:24px; text-align:left; color:#01b9f5;}
.anim-slide h2{font-size:18px;  }
.anim-slide a span{ font-size:16px;  }

.anim-slide img#slider{ left:40px; top:200px; width:50%;}
.anim-slide h2#license{width:40%;top: 56%; right:30px;}

.anim-slide img#todo{ left:40px; top:200px; width:48%;}
.anim-slide h2#bounceUp{width:40%;top: 56%; right:30px;}

.anim-slide img#css3{ left:50px; top:200px; width:46%;}
.anim-slide h2#jquery{width:40%;top: 56%; right:30px;}
	
}

@media screen and (max-width: 640px) {
	
.anim-slide h1{ font-size:20px; text-align:left; color:#01b9f5;}
.anim-slide h2{font-size:16px;  }
.anim-slide a span{ font-size:16px;  }

.anim-slide img#slider{ left:40px; top:147px; width:50%;}
.anim-slide h2#license{width:40%;top: 56%; right:30px;}

.anim-slide img#todo{ left:40px; top:150px; width:48%;}
.anim-slide h2#bounceUp{width:40%;top: 56%; right:30px;}

.anim-slide img#css3{ left:50px; top:150px; width:46%;}
.anim-slide h2#jquery{width:40%;top: 56%; right:30px;}
	
}

@media screen and (max-width: 480px) {
	
.anim-slide h1{font-family:'RobotoBoldCondensed'; font-size:18px; font-weight:normal; text-align:left; color:#01b9f5;}
.anim-slide h2{ font-family:'RobotoCondensed';font-size:14px; font-weight:normal; }
.anim-slide a span{ font-size:14px;  }

.anim-slide img#slider{ left:0; top:195px; width:50%;}
.anim-slide h1#plugin{ width:40%; top:55%; right:30px;}
.anim-slide h2#license{width:40%;top: 69%; right:30px;}
.anim-slide a#version{width:40%;top: 82%; right:30px; text-align:left;}

.anim-slide img#todo{ left:0; top:175px; width:48%;}
.anim-slide h1#bounce{ width:40%; top:55%; right:30px;}
.anim-slide h2#bounceUp{width:40%;top: 69%; right:30px;}
.anim-slide a#bounceRight{width:40%;top:82%; right:30px; text-align:left;}

.anim-slide img#css3{ left:10px; top:175px; width:46%;}
.anim-slide h1#html5{ width:40%; top:55%; right:30px;}
.anim-slide h2#jquery{width:40%;top: 69%; right:30px;}
.anim-slide a#modernizr{width:40%;top: 82%; right:30px; text-align:left;}
	
}

@media screen and (max-width: 360px) {
	
.anim-slide h1{font-family:'RobotoBoldCondensed'; font-size:16px; font-weight:normal; text-align:left; color:#01b9f5;}
.anim-slide h2{ font-family:'RobotoCondensed';font-size:12px; font-weight:normal; }
.anim-slide a span{ font-size:12px;  }

.anim-slide img#slider{ left:0; top:180px; width:50%;}
.anim-slide h1#plugin{ width:50%; top:60%; right:0;}
.anim-slide h2#license{width:50%;top: 72%; right:0;}
.anim-slide a#version{width:50%;top: 83%; right:0; text-align:left;}

.anim-slide img#todo{ left:0; top:175px; width:48%;}
.anim-slide h1#bounce{ width:50%; top:60%; right:0;}
.anim-slide h2#bounceUp{width:50%;top: 72%; right:0;}
.anim-slide a#bounceRight{width:50%;top:83%; right:0; text-align:left;}

.anim-slide img#css3{ left:10px; top:175px; width:46%;}
.anim-slide h1#html5{ width:50%; top:60%; right:0;}
.anim-slide h2#jquery{width:50%;top: 72%; right:0;}
.anim-slide a#modernizr{width:50%;top: 83%; right:0; text-align:left;}
	
}

@media screen and (max-width: 320px) {
	
.anim-slide h1{font-family:'RobotoBoldCondensed'; font-size:14px; font-weight:normal; text-align:left; color:#01b9f5;}
.anim-slide h2{ font-family:'RobotoCondensed';font-size:10px; font-weight:normal; }
.anim-slide a span{ font-size:10px;  }

.anim-slide img#slider{ left:0; top:180px; width:50%;}
.anim-slide h1#plugin{ width:50%; top:60%; right:0;}
.anim-slide h2#license{width:50%;top: 72%; right:0;}
.anim-slide a#version{width:50%;top: 83%; right:0; text-align:left;}

.anim-slide img#todo{ left:0; top:175px; width:48%;}
.anim-slide h1#bounce{ width:50%; top:60%; right:0;}
.anim-slide h2#bounceUp{width:50%;top: 72%; right:0;}
.anim-slide a#bounceRight{width:50%;top:83%; right:0; text-align:left;}

.anim-slide img#css3{ left:10px; top:175px; width:46%;}
.anim-slide h1#html5{ width:50%; top:60%; right:0;}
.anim-slide h2#jquery{width:50%;top: 72%; right:0;}
.anim-slide a#modernizr{width:50%;top: 83%; right:0; text-align:left;}
	
}