/**
 * flying-canvas
 * Flying Canvas.
 * @version v1.1.0 - 2019-05-12
 * @link https://github.com/ajsoriar/flying-canvas
 * @author Andres J. Soria R. <ajsoriar@gmail.com>
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */

 .main-container{
    transform: scale(1);
    position: absolute;
    width: 300px;
    height: 375px;
    border: 1px solid red;
    _display: block;
    _transform: scale(0.6);
    display: none;
}

#picture img{
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
}

.no-img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

.shape-square-r{
    display: none;
    position: absolute;
    right: 60px;
    top: 0;
    width: 100%;
    border: 1px solid blue;
    height: 200px;
    background-color: aquamarine;
    padding-left: 25px;
}

.shape-square-c{
    position: absolute;
    left: 60px;
    top: 0;
    width: 100%;
    border: 1px solid blue;
    height: 200px;
    background-color: aquamarine;
}

.wing{
    position: absolute;
    top: 0;
    width: 223px;
    border: 0px solid green;
    height: 173px;
    background-color: lavender;
    background-image: url(./wing.png);
    visibility: hidden;
    display: none;
}

.wing.right{
    right: -223px;
    transform: scaleX(-1);
}

.wing.left{
    left: -223px;
}

/* --- CANVAS --- */

.bg-1{
    background-image: url(./frame-c-256x256.png);
}

.bg-3{
    background-image: url(./frame-v-256x256.png);
}

.bg-2{
    background-image: url(./frame-h-256x256.png);
}

.bg-4{
    _background-image: linear-gradient(red, yellow, blue);
    _background-size: 100% 100%;
}

.mq{
    position: absolute;
    width: 75px;
    height: 75px;
    background-size: 150px 150px;
}

.top-l{
    top: 0;
    left: 0;
}
.top-c{
    top: 0;
    left: 75px;
}
.top-r{
    top: 0;
    right: 0px;
    background-position: -75px 0px;
}
.middle-l{
    top: 75px;
    left: 0;
}
.middle-c{
    top: 75px;
    left: 75px;
}
.middle-r{
    top: 75px;
    right: 0px;
    background-position: -75px 0px;
}
.bottom-l{
    bottom: 0;
    left: 0;
    background-position: 0px -75px;
}
.bottom-c{
    bottom: 0;
    left: 75px;
    background-position: 0px -75px;
}
.bottom-r{
    bottom: 0;
    right: 0px;
    background-position: -75px -75px;
}