/**
 * Flag Waver
 *
 * Simulate a flag waving in the breeze right in your browser window.
 *
 * /u/krikienoid
 *
 */

/* //// Reset //// */

*,
*:before,
*:after {
    -webkit-box-sizing : border-box;
       -moz-box-sizing : border-box;
            box-sizing : border-box;
}

* {
    margin  : 0;
    padding : 0;
}
/* //// Layout //// */


.wrapper-page,
.page-main,
.js-flag-canvas {
    width: 100% ;
    max-width: 1920px;
    margin: 0 auto;
    height: calc(100vw / 1920 * 640);
    max-height: 640px;
    display: block;
    overflow: hidden !important;
}

#home-slider1{
    width: 100%;
    max-width: 1920px;
    height: calc(100vw / 1920 * 640);
    max-height: 640px;
    display: block !important;
    background-color: #eef6f9;
    background-image      : url('../content/slider-bg.png');
    background-position   : top center;
    background-size       : cover;
    background-repeat     : no-repeat;
    overflow: hidden !important;
}

canvas{
    position: absolute;
    left: 25%;
}

@media only screen and (max-width : 500px){
    #home-slider1, .wrapper-page,
    .page-main,
    .js-flag-canvas {
        width    : 100% !important;
        height   : 100vw !important;
        display: block !importants;
    }
    canvas{
        position: absolute;
        left: 0;
        width: calc(100vw) !important;
        transform: scale(0.6);
        transform-origin: right bottom;
    }

   /* #home-slider1{
        background-image      : url('../content/slider-bg2.png') !important;
        width : 100vw !important;
        height: 100vw;
 */   }
}

@media only screen and (min-width : 1920px){
    #home-slider1,.wrapper-page,
    .page-main,
    .js-flag-canvas {
        width : 1880px;
        height: 640px;
        display: block !important;
    }
    canvas{
        position: absolute;
        left: 30%;
        width: calc(100vw - 600px) !important;
    }
}