@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
body {
    margin: 0px;
    background: #000;
    /*background: url(../images/bg.jpg) no-repeat center center /100% 100%;*/
}
.wrap {
    width: 100%;
    margin: 0 auto
}
.header {
    background: url(../images/patt.jpg);
    width: 100%;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,.50);
}
img {
    border: 0px;
}
.layout-col1 {
    width: 50%;
    float: left;
    /*background: #e96f91;*/
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
}
.layout-col2 {
    width: 50%;
    float: left;
    /*background: #c0617d;*/
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
}

.button {
    background: #666;
    border: 0px;
    color: #FFF;
    position: relative;
    width: 240px;
    margin: 0 auto;
    display: block;
    line-height: 45px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
}
.button a {
    display: block;
    color: #FFF;
    text-decoration: none;
}
.button a:hover {
    display: block;
    color: #FFF;
    text-decoration: none;
    background: #999;
    box-shadow: -1px 1px 0 #888,  -2px 2px 0 #888,  -3px 3px 0 #777,  -4px 4px 0 #888,  -5px 5px 0 #888,  -6px 6px 0 #888,  -7px 7px 0 #888,  -8px 8px 0 #888,  -9px 9px 0 #888,  -10px 10px 0 #888,  -11px 11px 0 #888,  -12px 12px 0 #888;
}
.box {
    width: 640px;
    margin: 0 auto 77px;
    height: 277px;
    border-radius: 5px;
    position:relative;
    overflow: hidden;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    z-index:999;

}
.box.mobile {
    height: 410px;
}
.frame { position:relative; top: 0px; z-index:99;}
.thumb {
    position:absolute;
    left:105px;
    top:26px;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    width: 425px;
}
.thumb img, .device img {
    width: 86%;
}
.mobile .device > img {
    width: 40%;
}
.mobile .thumb{
    width: 213px;
    left: 206px;
}
.mobile .frame{
    top: -27px;
}
.frame:hover .thumb {
    padding-top: 26px;
    top:-500px;  
    -webkit-transition: all 8s ease-in-out;
    -moz-transition: all 8s ease-in-out;
    -o-transition: all 8s ease-in-out;
    transition: all 8s ease-in-out;
}
.mobile .frame:hover .thumb {
    top:-600px;  
    -webkit-transition: all 8s ease-in-out;
    -moz-transition: all 8s ease-in-out;
    -o-transition: all 8s ease-in-out;
    transition: all 8s ease-in-out;
}
.device{
    z-index: 999;
    position: relative;
}
.footer{
    background-color:#666;
    padding:15px 0px;
    float:left;
    width:100%;
    text-align:center;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
}

.footer p{

    margin:0px;

    font-size:11px;

    color:#fff;

}
@media (max-width: 800px) {
    .layout-col1 {
        width:100%;
    }
}


@media (max-width: 639px) {
    .box {
        width:334px;
        height: 150px;
    }
    .box.mobile {
        height: 214px;
    }
    .thumb{
        width: 220px;
        left: 60px;
    }
    .mobile .thumb {
        left: 110px;
        width: 112px;
    }
    .mobile .device{margin-top: 14px;}
}