@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
@import url(https://fonts.googleapis.com/css?family=Roboto:500);

/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none;	color:#bbb;}
img { border:0;}

.wrap {position: fixed; background:url(../img/bg.jpg) no-repeat center center;
      width: 100%; height: 100%; background-size:cover; min-width:1024px; min-height: 768px;}
.wrap h1 {position: fixed; text-align: left; top:30px; left:30px;}
.wrap img {width: 300px;}
.wrap h1 span {padding-left:15px; font:35px/1.3 "open Sans",sans-serif; color: #fff;}

.sns {position: fixed; top:40px; right:30px;}
.sns li {float: left; margin:0 20px;}
.sns li a {font-size:25px; color: #eee;}
.sns li a i {transition:all 0.5s;}
.sns li a:hover i {transform:scale(1.3);}

section {position: fixed; right:0; bottom:0; width: 70%; height: 80%;}
article {position: relative; height: 15%; width: 100%; overflow: hidden; border-bottom:1px solid rgba(0,0,0,0.5);
        bottom: 0; opacity:1;}
article img {width: 100%; opacity: 0; z-index: 3;}
article h2 {position: absolute; bottom: 0; left:10px; transition:all 0.5s; z-index: 1; opacity: 0.7;
            font:25px 'Roboto', sans-serif;}
article h3 {position: absolute; right: -300px; bottom: 10px; z-index: 4; font:50px "open Sans",sans-serif;
           color: #fff; transition:transform 1s;}
article:hover h2 {opacity: 0;}

footer {position: fixed; width: 100%; height: 50px; background: #000; opacity: 0.6; left: 0; bottom: 0;}
footer ul {position: absolute; bottom: 15px; left: 50px;}
footer ul li {float: left; margin-left:20px;}
footer span {position: absolute;  bottom: 15px; right:20px; color:#aaa;}