body{background: rgb(225,225,225);}

.dragAndUploadHolder{
  height: 120px;
  position: relative;
  width: inherit;
	}

@media (max-width: 768px){
	.dragAndUploadHolder{
		display:none;
	}
}

.dragAndUpload {
    background: #f2f0ef;
    box-shadow: rgba(0.1,0,0,.1) 3px 3px 3px;
    color: rgba(0,0,0,.55);
    display: block;
    height: 115px;
    line-height: 132px;
    position: relative;
    text-align: center;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -webkit-transition: all .2s;
    transition: all;
    width: 100%;
}

.dragAndUpload .fa {
    display: block;
    font-size: 65px;
    left: 50%;
    margin-left: -70px;
    margin-top: -32px;
    position: absolute;
    top: 50%;
}

.dragAndUpload .fa-spin,
.dragAndUpload .fa-check,
.dragAndUpload .fa-frown-o,
.dragAndUploadUploading .fa-arrow-up,
.dragAndUploadUploading .fa-frown-o,
.dragAndUploadSuccess .fa-arrow-up,
.dragAndUploadSuccess .fa-frown-o,
.dragAndUploadFailure .fa-arrow-up {
    display: none;
}

.dragAndUploadUploading .fa-spin,
.dragAndUploadUploading .gpCounter,
.dragAndUploadSuccess .fa-check,
.dragAndUploadFailure .fa-frown-o {
    display: block;
}

.dragAndUpload .fa-arrow-up,
.dragAndUpload .fa-spin,
.dragAndUpload .fa-check,
.dragAndUpload .fa-frown-o {
    margin-left: 18px;
}

.dragAndUploadActive, .dragAndUploadUploading {
    background: rgb(135,60,255);
    border-color: rgb(135,60,255);
    color: rgb(255,255,255);
}

.dragAndUploadActive .fa.fa-arrow-up {
    animation: upDown .7s infinite linear;
    -moz-animation: upDown .7s infinite linear;
    -ms-animation: upDown .7s infinite linear;
    -webkit-animation: upDown .7s infinite linear;
}

.dragAndUploadFailure {
    background: rgba(255,25,30,.5);
    transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -webkit-transition: all .2s;
    -moz-animation: errorShake .45s;
    -ms-animation: errorShake .45s;
    -webkit-animation: errorShake .45s;
}

.dragAndUploadSuccess {
    background: rgb(135,255,160);
    transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -webkit-transition: all .2s;
    animation: okShakeGreen .75s;
    -moz-animation: okShakeGreen .75s;
    -ms-animation: okShakeGreen .75s;
    -webkit-animation: okShakeGreen .75s;
}

#dragAndUploadStatus {
    color: rgba(0,0,0,.6);
    bottom: 0;
    font: Bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    left: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

/* ANIMATIONS */
@keyframes upDown {
    50% {
        top: +30px;
    }
}

@-moz-keyframes upDown {
    50% {
        top: +30px;
    }
}

@-ms-keyframes upDown {
    50% {
        top: +30px;
    }
}


@-webkit-keyframes upDown {
    50% {
        top: +30px;
    }
}



@-moz-keyframes okShakeGreen {
    0% {
        background: rgba(245,45,0,.5);
        top: 0px;
    }

    25% {
        background: rgba(255,255,255,1);
        top: -15px;
    }

    50% {
        top: 9px;
    }

    75% {
        top: -6px;
    }

    100% {
        background: rgba(135,255,160,1);
        top: 0px;
    }
}

@-ms-keyframes okShakeGreen {
    0% {
        background: rgba(245,45,0,.5);
        top: 0px;
    }

    25% {
        background: rgba(255,255,255,1);
        top: -15px;
    }

    50% {
        top: 9px;
    }

    75% {
        top: -6px;
    }

    100% {
        background: rgba(135,255,160,1);
        top: 0px;
    }
}

@-webkit-keyframes okShakeGreen {
    0% {
        background: rgba(60,135,255,1);
        top: 0px;
    }

    25% {
        top: -15px;
    }

    50% {
        top: 9px;
    }

    75% {
        top: -6px;
    }

    100% {
        background: rgba(135,255,160,1);
        top: 0px;
    }
}

@-webkit-keyframes errorShake {
    0% {
        left: 0px;
    }

    25% {
        left: -15px;
    }

    50% {
        left: 9px;
    }

    75% {
        left: -6px;
    }

    100% {
        left: 0;
    }
}

@-moz-keyframes okShake {
    0% {
        top: 0px;
    }

    25% {
        top: -15px;
    }

    50% {
        top: 9px;
    }

    75% {
        top: -6px;
    }

    100% {
        top: 0px;
    }
}

@-ms-keyframes okShake {
    0% {
        top: 0px;
    }

    25% {
        top: -15px;
    }

    50% {
        top: 9px;
    }

    75% {
        top: -6px;
    }

    100% {
        top: 0px;
    }
}

@-webkit-keyframes okShake {
    0% {
        background: rgba(245,45,0,.5);
        top: 0px;
    }

    25% {
        background: rgba(135,255,160,1);
        top: -15px;
    }

    50% {
        top: 9px;
    }

    75% {
        top: -6px;
    }

    100% {
        background: rgba(255,255,255,1);
        top: 0px;
    }
}