@font-face {
	font-family: 'UTM-Neo-Sans-IntelBold';
	src: url("../fonts/UTM-Neo-Sans-IntelBold.eot?v=1.1.0");
	src: url("../fonts/UTM-Neo-Sans-IntelBold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("../fonts/UTM-Neo-Sans-IntelBold.woff2?v=1.1.0") format("woff2"), url("../fonts/UTM-Neo-Sans-IntelBold.woff?v=1.1.0") format("woff"), url("../fonts/UTM-Neo-Sans-IntelBold.ttf?v=1.1.0") format("truetype"), url("../fonts/UTM-Neo-Sans-IntelBold.svg?v=1.1.0#Light") format("svg");
	font-weight: 300;
	font-style: normal; 
}
.anim-slide p{
	z-index: 12;
	position: relative;
}
.anim-slide #slider{text-shadow: -1px 1px 0px;padding: 6px;width:100%;}
.anim-slide #plugin{ width:100%;top: 22%;}
.anim-slide #license{width:100%;top: 37%;}
.anim-slide #version{width: 100%;top: 50%;}

.anim-slide #todo{top: 5%;left: 5%;}
.anim-slide #bounce{top: 20%;left: 5%;}
.anim-slide #bounceUp{top: 7%;left: 5%;}
.anim-slide #bounceRight{top: 7%;left: 5%;}

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

 .anim-slide #todo{
font-size: 14px !important;

}
.anim-slide #bounce{
font-size: 16px !important;
}
.anim-slide #bounceUp{
font-size: 12px !important;}
.anim-slide .bg-banner img{
width:150px !important;
margin-top:-40px;
}
.anim-slide .bg-banner img, .anim-slide .bg-banner-1 img{ right:0px !important;}
.anim-slider{ height:170px !important;}
.banner{ padding-bottom:0px !important;}
}

@media only screen and (min-width: 768px) {
.anim-slide .bg-banner img, .anim-slide .bg-banner-1 img{ right:25px !important;}
.logomobile{ display:none;}
}
.anim-slide #todo{
font-size: 18px;
font-family: myFirstFontBold;
text-align: left;
color: #666;
text-shadow:
    0 1px #fff,
    -1px 0 #fff,
    -1px 2px #fff,
    -2px 1px #fff,
    -2px 3px #fff,
    -3px 2px #fff
}
.anim-slide #bounce{
font-size: 22px;
font-family: UTM-Neo-Sans-IntelBold;
text-align: left;
color: #333;
font-weight: bold;
text-shadow:
    0 1px #fff,
    -1px 0 #fff,
    -1px 2px #fff,
    -2px 1px #fff,
    -2px 3px #fff,
    -3px 2px #fff,
    -3px 4px #fff,
    -4px 3px #fff,
    -4px 5px #fff,
    -5px 4px #fff
}
.anim-slide #bounceUp{
font-size: 16px;
font-family: myFirstFontMed;
text-align: left;
color: #666;
text-shadow:
    0 1px #fff,
    -1px 0 #fff,
    -1px 2px #fff,
    -2px 1px #fff
}
.anim-slide #bounceRight{
text-align: left;
}
.anim-slide img#css3{left: 35%;top: 4%;}
.anim-slide img#html5{left: 52%;top: -1%;}
.anim-slide img#jquery{top: 60%;left: 41%;}
.anim-slide img#modernizr{width:260px;top: 75%;left: 20%;}
.anim-slide #animatecss{top: 69%;left: 60%;color: #f35626;}

div#demo{text-align: center;}
div#demo>a{display:inline-block;text-decoration: none;}
div#demo>a>p{padding: 5px 8px;margin: 20px;background-color: #225A86;color: #333;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;}
.anim-slide .bg-banner,
.anim-slide .bg-banner-line1,
.anim-slide .bg-banner-line2,
.anim-slide .bg-banner-line3{
position: relative;
z-index: 9;
top: -20%;
}
.anim-slide .bg-banner-line1{
	right: 10px;
	text-align: right
}
.anim-slide .bg-banner img,.anim-slide .bg-banner-1 img{
opacity: 1 !important;
z-index: 10 !important;


position: relative !important;
float: right;
}
.anim-slide .bg-banner-line1 img{
	right: 50px !important;
	float: right;
}
.anim-slide .bg-banner img{
width: 250px;
height: auto;
}