/* CSS Document */
/* 3d view styles for the denominations page */
@charset "utf-8";

@media only screen {

    .banknote-view {
	    background: #4076bf;
	    background-image: url(../img/banknote-view/bg_01.jpg);
	    background-size: cover;
	    position: relative;
 	    padding-top: 50px;
	    padding-bottom: 90px;
	    width: 100%;
	    height: 100%; 
	    min-height: 543px;
    }

    .arrow-down-element {
	    position: absolute;
	    top: 0;
	    right: 50%;
	    z-index: 1;
	    border-top: 10px solid #fff;
	    border-right: 10px solid transparent;
	    border-left: 10px solid transparent;
	    width: 20px;
	    transform: translate(50%);
    }

    .display-view,
    .corrections {
        display: block; 
        position: relative;
    }

    #bn-display-es2,
    #bn-display-es1 {
        text-align: center;
        animation: fadein 1.5s;
        background-color: transparent;
        position: relative;
        height: 100%;
    }

    .spinny-image {
        width: 100%;
        height: auto;
        padding: 25px;
        margin: auto;
        position: relative;
        z-index: 50;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        animation: fadein 2s;
        cursor: move;
    }

    .spinny-image > canvas {
        margin: -15% 0 -13%;
    }

    @keyframes fadein {
        0% {
            opacity: 0;
        }
        25% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .spinny-loader {
        width: unset;
        position: absolute;
        z-index: 0;
        top: calc(50% - 75px);
        left: calc(50% - 47px);
        opacity: 0.5;
    }

    .spinny-nojs.spinny-image {
        cursor: initial;
    }
 
    #spin-flip-1:checked + .spinny-nojs.spinny-image .spinny-front {
        display: none;
    }
    .spinny-nojs.spinny-image .spinny-back {
        display: none;
    }
    #spin-flip-1:checked + .spinny-nojs.spinny-image .spinny-back {
        display: block;
    }
    .spinny-image * {
        pointer-events: none;
        border: none;
    }

    #bn-display-es2 a,
    #bn-display-es1 a {
        display: inline-block;
    }

    .bn-flip-icon {
        position: absolute; 
        bottom: 70px; 
        left: calc(50% - 30px); 
        opacity: 0.4;
        text-align: center;
    }

}

@media only screen and (min-width : 1921px) {
    #bn-display-es2,
    #bn-display-es1 {
        max-width: 1920px;
        max-height: 100%;
    }
}

@media print {
    .spinny-image {
        display:none !important;
	}
}

@media only screen and (max-width: 1283px) {
	.banknote-view {
		min-height: 200px;
    }
}

@media only screen and (max-width: 767px) {
    .banknote-view::before,
    .banknote-view::after {
        content: "";
        position: absolute;
        width: 5%;
        height: 100%;
        z-index: 100;
    }
    .banknote-view::before {
        top: 0;
        left: 0;
    }
    .banknote-view::after {
        top: 0;
        right: 0;
    }
    .bn-flip-icon img {
        width: 75%;
    }
}