@keyframes slide-top
{
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0%); opacity: 1; }
}
@-webkit-keyframes slide-top
{
    0% { -webkit-transform: translateY(-100%); opacity: 0; }
    100% { -webkit-transform: translateY(0%); opacity: 1; }
}

body { 
    background: url(img/bg.jpg) no-repeat center; 
    background-size: auto;
    color: #333; 
    background-attachment:fixed; 
    padding: 40px 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

.container { 
    width: 800px; 
    margin: 0 auto; 
    
}

.ecc-icon { display: inline-block; height: 16px; width: 16px; line-height: 16px; background: url(img/icons.png) no-repeat left top; vertical-align: text-top; }    
    .ecc-icon-plus { background-position: -80px 0; }
    .ecc-icon-save { background-position: -128px 0; }
    .ecc-icon-plus-green { background-position: -144px 0; }
    .ecc-icon-check { background-position: -160px 0; }
    .ecc-icon-warning { background-position: -176px 0; }
    .ecc-icon-world { background-position: -192px 0; }
    .ecc-icon-flip-horizontal { background-position: -208px 0; }
    .ecc-icon-flip-vertical { background-position: -224px 0; }
    .ecc-icon-rotate-right { background-position: -240px 0; }
    .ecc-icon-rotate-left { background-position: -256px 0; }
    .ecc-icon-rotate-180 { background-position: -272px 0; }
    .ecc-icon-info { background-position: -304px 0; }

@media all and (max-width: 1000px) {
    .container { width: 650px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
    body { background: #fff; overflow-x: hidden; }
}

@media all and (max-width: 650px) {
    body { padding: 0; }
    .container { width: 100%; padding: 0; margin: 0; }
}

@media all and (max-width: 600px) {
    .container{ width: 100%; padding: 0; }
}