#wrapper {
    background: none;
}

#banner {
    height: 388px;
    width: 100%;
    background: url("../images/qrcode-banner.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0px;
    background-color: #fff;
    background-size: 1500px 388px;
    margin-bottom:30px;
}

#banner #iphone {
    background: url("../images/iphone-qr-reader.png") no-repeat scroll 0 0 transparent;
    height: 330px;
    position: relative;
    z-index: 10;
    width: 1000px;
    margin: 20px auto 0;
}

#banner #cloud {
    background: url("../images/cloud-overlay.png") repeat-x scroll 0 103% transparent;
    height: 53px;
    position: absolute;
    margin-top: -45px;
    width: 100%;
    z-index: 15;
}

#banner .banner-container {
    position: absolute;
    margin-left: 410px;
    margin-top: 110px;
}
#banner h1 {
    color: #FFFFFF;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 1px 2px 1px black;
}

#banner h2 {
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px black;
}

#doc {
    padding-top: 0;
}

section{
width:980px;
margin:0 auto 30px auto;
padding:30px 0 0 0;}

section.first{background:none}

section h2{
padding:0;margin:0 0 30px 0;
font-size:24px;
font-weight:600;
color:#222;text-align:center}

section h2 + h3{
margin-top:-24px}

section h3{
padding:0;
margin:0 0 30px 0;
font-size:18px;
font-weight:200;
color:#999;
text-align:center}

section h4{
padding:0;
line-height:22px;
margin:0 0 4px 0;
font-size:16px;
font-weight:bold;
color:#444}

section p,section li{
line-height:1.6em}

section p.intro{font-size:16px}

section ul.columns:after{content:"";display:block;clear:both}

section ul.columns > li{float:left;margin:0 30px 30px 0}section ul.columns.two > li{width:475px}

section ul.columns.two > li:nth-child(even){margin-right:0}

section ul.columns.two .thumbnail{width:475px}

section ul.columns.three > li{width:306px}

section ul.columns.three > li:nth-child(3n){margin-right:0}

section ul.columns.three .thumbnail{width:306px}


.thumbnail img{display:block;max-width:100%;-moz-transition:opacity 0.1s ease-in;-webkit-transition:opacity 0.1s ease-in;-o-transition:opacity 0.1s ease-in;transition:opacity 0.1s ease-in;-moz-border-radius:4px;-webkit-border-radius:4px;-o-border-radius:4px;-ms-border-radius:4px;-khtml-border-radius:4px;border-radius:4px}


section.apps .text{margin-top:-5px;width:475px;float:right;color:#444;font-size:14px;-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

/*****************************************************************************/
/* Animation */

@keyframes animate_bg
{
    from {
        background-position: 30% 0px;
    }
    to {
        background-position: 70% 0px;
    }
}
@-moz-keyframes animate_bg /* Firefox */
{
    from {
        background-position: 30% 0px;
    }
    to {
        background-position: 70% 0px;
    }
}

@-webkit-keyframes animate_bg /* Safari and Chrome */
{
    from {
        background-position: 30% 0px;
    }
    to {
        background-position: 70% 0px;
    }
}

#banner {
    animation: animate_bg 10s;
    -moz-animation: animate_bg 10s;
    -webkit-animation: animate_bg 10s; 
    
    animation-direction: alternate;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    
    animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 

    animation-timing-function:linear;
    -moz-animation-timing-function:linear; 
    -webkit-animation-timing-function:linear; 
}