.anim-slider{background-color: #fff;}
.anim-slide{opacity: 0;}
.anim-slide-this{opacity: 1;}

li.anim-slide:nth-of-type(1) {background-image:url(../images/banner-clutter-bg.jpg); background-size:cover; background-position:top;}
li.anim-slide:nth-of-type(2) {background-image:url(../images/banner-media-bg.jpg); background-size:cover; background-position:top;}
li.anim-slide:nth-of-type(3) {background-image:url(../images/banner-edge-bg2.jpg); background-size:cover; background-position:top;}
li.anim-slide:nth-of-type(4) {background-image:url(../images/banner-work-bg.jpg); background-size:cover; background-position:top;}

li.anim-slide:nth-of-type(1)>div
{
	width: 470px;
	height: 337px;
}
div#img1{background-image:url("../images/banner-clutter2.png");  background-size:contain; margin:8% 0 0 10%; }



li.anim-slide:nth-of-type(2)>div
{
	width: 460px;
	height: 338px;
}
div#img2{background-image:url("../images/banner-media2.png"); background-size:contain; margin:9% 57%; }

@media screen and (min-width: 1441px) {
	div#img2{background-image:url("../images/banner-media2.png"); background-size:contain; margin:10% 0 0 65%; }
	  
  }

li.anim-slide:nth-of-type(3)>div
{
	width: 1162px;
	height: 344px;
}
div#img3{background-image:url("../images/banner-edge2.png"); background-size:contain; margin:8% auto 0; background-repeat:no-repeat; }


li.anim-slide:nth-of-type(4)>div
{
	width: 494px;
	height: 374px;
}
div#img4{background-image:url("../images/banner-work2.png"); background-size:contain; margin:7% 0 0 8%; }

@media only screen and (min-width: 769px) and (max-width:1024px) {

div#img1{margin: 12% 8%; color:#34495e;}
div#img2{margin: 15% 45%; color:#34495e;}
div#img3{margin: 10% 8%; color:#34495e;  background-size:cover; background-position:left; width:483px; height: 344px;  background-repeat:no-repeat;}
div#img4{margin: 10% 9%; color:#34495e;}
}

@media only screen and (min-width: 481px) and (max-width:768px) {

div#img1{margin: 15% auto; color:#34495e;}
div#img2{margin: 20% auto; color:#34495e;}
div#img3{margin: 18% auto; color:#34495e; background-size:cover; background-position:left; width:483px; height: 344px;  background-repeat:no-repeat;}
div#img4{margin: 15% auto; color:#34495e;}

}

@media only screen and (min-width: 451px) and (max-width:480px) {
div#img1{margin: 30% auto; color:#34495e; width:400px; height: 287px;}
div#img2{margin: 35% auto; color:#34495e; width:400px; height: 294px;}
div#img3{margin: 32% auto; color:#34495e; width:400px; height: 284px; background-size:cover; background-position:left;  background-repeat:no-repeat;}
div#img4{margin: 30% auto; color:#34495e; width:400px; height: 303px;}
}

@media only screen and (min-width: 299px) and (max-width:450px) {
div#img1{margin: 25% auto; color:#34495e; width:240px; height: 172px;}
div#img2{margin: 30% auto; color:#34495e; width:240px; height: 176px;}
div#img3{margin: 28% auto; color:#34495e; width:240px; height: 170px; background-size:cover; background-position:left; background-repeat:no-repeat;}
div#img4{margin: 25% auto; color:#34495e; width:240px; height: 182px;}
}

div#ban1{width:470px; height:337px; }


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