#croppic {
    position            : relative; /* MANDATORY */
    -moz-box-sizing     : content-box; /* MANDATORY */
    box-sizing          : content-box; /* MANDATORY */
    margin              : 50px 70px 20px;
    width               : 400px;
    height              : 208px;
    border              : 3px solid #ffffff;
    border-radius       : 2px;
    background-image    : url(../img/placeholder.png);
    background-position : center;
    background-repeat   : no-repeat;
    box-shadow          : 8px 8px 0 rgba(0, 0, 0, 0.1);
    }
/* DO NOT CHANGE FROM HERE ( unless u know what u are doing) */
.cropImgWrapper {
    cursor : -webkit-grab;
    cursor : grab;
    }
.cropImgWrapper:active {
    cursor : -webkit-grabbing;
    cursor : grabbing;
    }
.cropImgUpload {
    position    : absolute;
    top         : -30px;
    right       : -2px;
    z-index     : 2;
    display     : block;
    width       : 20px;
    height      : 28px;
    color       : #ffffff;
    text-align  : center;
    font-family : sans-serif;
    line-height : 20px;
    }
.cropControls {
    position         : absolute;
    top              : -40px;
    right            : -20px;
    z-index          : 2;
    display          : block;
    /* top: -31px; */
    width            : 240px;
    height           : 30px;
    background-color : rgba(0, 0, 0, 0.4);
    font-family      : sans-serif;
    }
.cropControls i {
    display          : inline-block;
    margin           : 0;
    width            : 30px;
    height           : 30px;
    background-image : url('../img/cropperIcons.png');
    color            : #ffffff;
    text-align       : center;
    font-weight      : bold;
    font-style       : normal;
    font-size        : 13px;
    line-height      : 20px;
    cursor           : pointer;
    }
.cropControls i:hover { background-color : rgba(0, 0, 0, 0.7); }
.cropControls i.cropControlZoomMuchIn { background-position : 0 0; }
.cropControls i.cropControlZoomIn { background-position : -30px 0; }
.cropControls i.cropControlZoomOut { background-position : -60px 0; }
.cropControls i.cropControlZoomMuchOut { background-position : -90px 0; }
.cropControls i.cropControlRotateLeft { background-position : -210px 0; }
.cropControls i.cropControlRotateRight { background-position : -240px 0; }
.cropControls i.cropControlCrop { background-position : -120px 0; }
.cropControls i.cropControlUpload { background-position : -150px 0; }
.cropControls i.cropControlReset { background-position : -180px 0; }
.cropControls i.cropControlRemoveCroppedImage { background-position : -180px 0; }
.cropControls i:last-child {
    margin-right : 0;
    }
#croppicModal {
    position   : fixed;
    top        : 0;
    left       : 0;
    z-index    : 10000;
    display    : block;
    width      : 100%;
    height     : 100%;
    background : rgba(0, 0, 0, 0.8);
    }
/*
*		PRELOADER
*		With courtesy of : http://cssload.net/
*/

.bubblingG {
    position   : absolute;
    top        : 50%;
    left       : 50%;
    z-index    : 2;
    margin     : -18px auto auto -40px;
    width      : 80px;
    height     : 50px;
    text-align : center;
    }
.bubblingG span {
    display               : inline-block;
    margin                : 25px auto;
    width                 : 10px;
    height                : 10px;
    -webkit-border-radius : 50px;
    -moz-border-radius    : 50px;
    border-radius         : 50px;
    background            : #ffffff;
    box-shadow            : 5px 5px 0 rgba(0, 0, 0, 0.2);
    vertical-align        : middle;
    -webkit-animation     : bubblingG 1s infinite alternate;
    -moz-animation        : bubblingG 1s infinite alternate;
    -ms-animation         : bubblingG 1s infinite alternate;
    -o-animation          : bubblingG 1s infinite alternate;
    animation             : bubblingG 1s infinite alternate;
    -ms-border-radius     : 50px;
    -o-border-radius      : 50px;
    }
#bubblingG_1 {
    -webkit-animation-delay : 0s;
    -moz-animation-delay    : 0s;
    -ms-animation-delay     : 0s;
    -o-animation-delay      : 0s;
    animation-delay         : 0s;
    }
#bubblingG_2 {
    -webkit-animation-delay : 0.3s;
    -moz-animation-delay    : 0.3s;
    -ms-animation-delay     : 0.3s;
    -o-animation-delay      : 0.3s;
    animation-delay         : 0.3s;
    }
#bubblingG_3 {
    -webkit-animation-delay : 0.6s;
    -moz-animation-delay    : 0.6s;
    -ms-animation-delay     : 0.6s;
    -o-animation-delay      : 0.6s;
    animation-delay         : 0.6s;
    }
@-moz-keyframes bubblingG {
    0% {
        width            : 10px;
        height           : 10px;
        background-color : #ffffff;
        -moz-transform   : translateY(0);
        }

    100% {
        width            : 24px;
        height           : 24px;
        background-color : #ffffff;
        -moz-transform   : translateY(-21px);
        }

    }
@-webkit-keyframes bubblingG {
    0% {
        width             : 10px;
        height            : 10px;
        background-color  : #ffffff;
        -webkit-transform : translateY(0);
        }

    100% {
        width             : 24px;
        height            : 24px;
        background-color  : #ffffff;
        -webkit-transform : translateY(-21px);
        }

    }
@-ms-keyframes bubblingG {
    0% {
        width            : 10px;
        height           : 10px;
        background-color : #ffffff;
        -ms-transform    : translateY(0);
        }

    100% {
        width            : 24px;
        height           : 24px;
        background-color : #ffffff;
        -ms-transform    : translateY(-21px);
        }

    }
@-o-keyframes bubblingG {
    0% {
        width            : 10px;
        height           : 10px;
        background-color : #ffffff;
        -o-transform     : translateY(0);
        }

    100% {
        width            : 24px;
        height           : 24px;
        background-color : #ffffff;
        -o-transform     : translateY(-21px);
        }

    }
@keyframes bubblingG {
    0% {
        width            : 10px;
        height           : 10px;
        background-color : #ffffff;
        transform        : translateY(0);
        }

    100% {
        width            : 24px;
        height           : 24px;
        background-color : #ffffff;
        transform        : translateY(-21px);
        }

    }
/* some reset stlyes */