/* todo */
/* start to reduce size at 800px, 700px, 600px, ... 400px */
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
}

.flip-card_ns {
    background-color: transparent;
    /*
     width: 300px;
     height: 300px;
*/
    perspective: 1000px;
}

/* This class placed class=".flip-card here" sclaes the flip card */
.flipcardScaled2 {
    transform: Scale(0.5);
}

/* -------------------------------------------------------------- */

.flipcard50 {
    width: 50px;
    height: 50px;
}

.flipcard8050 {
    width: 80px;
    height: 50px;
}

.flipcard10050 {
    width: 100px;
    height: 50px;
}

.flipcard10080 {
    width: 100px;
    height: 80px;
}

.flipcard80100 {
    width: 80px;
    height: 100px;
}

.flipcard100 {
    width: 100px;
    height: 100px;
}

.flipcard200 {
    width: 200px;
    height: 200px;
}

/* Scrren-Size dependent */
.flipcard300 {
    width: 300px;
    height: 300px;
}

.flipcard400 {
    width: 300px;
    height: 300px;
}

.flipcard500 {
    width: 300px;
    height: 300px;
}

/* --------------------- */
.flipcard400300 {
    width: 400px;
    height: 300px;
}

.flipcard300500 {
    width: 300px;
    height: 500px;
}

.flipcard400500 {
    width: 400px;
    height: 500px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card_ns:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #bbb;
    color: black;
}

.flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
}

.flip_color01 {
    border-radius: 20px;
    /*     box-shadow: 5px 5px 5px black;*/
    background: linear-gradient(90deg, #5c5c5c, #151515);
    box-shadow: inset 15px 15px 15px -15px #f2f2f2,
        inset -15px -15px 15px -15px #262525,
        inset -5px -5px 5px -10px black;
    border-color: black;
}

.flip_color02 {
    border-radius: 20px;
    /*     box-shadow: 5px 5px 5px black;*/
    background: linear-gradient(90deg, #006a1d, #002200);
    box-shadow: inset 15px 15px 15px -15px #f2f2f2,
        inset -15px -15px 15px -15px #262525,
        inset -5px -5px 5px -10px black;
    border-color: black;
}

/* round, color 1 no shadow */
.flip_color01r {
    border-radius: 50%;
    /*     box-shadow: 5px 5px 5px black;*/
    background: linear-gradient(90deg, #5c5c5c, #151515);
    box-shadow: inset 15px 15px 15px -15px #f2f2f2,
        inset -15px -15px 15px -15px #262525,
        inset -5px -5px 5px -10px black;
    border-color: black;
}

/* round, color 2 with shadow */
.flip_color02r {
    border-radius: 50%;
    /*box-shadow: 5px 5px 5px black;*/
    background: linear-gradient(90deg, #006a1d, #002200);
    box-shadow: inset 15px 15px 15px -15px #f2f2f2,
        inset -15px -15px 15px -15px #262525,
        inset -5px -5px 5px -10px black;
    border-color: black;
}

/* round, color 2, shadow */
.flip_color02rs {
    border-radius: 50%;
    /*     box-shadow: 5px 5px 5px black;*/
    background: linear-gradient(90deg, #006a1d, #002200);
    box-shadow: 10px 10px 10px black,
        inset 15px 15px 15px -15px #f2f2f2,
        inset -15px -15px 15px -15px #262525,
        inset -5px -5px 5px -10px black;
    border-color: black;
}

.badge_size {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.logo_size {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.round_card {
    border-radius: 50%;
}

/* ------------------------------------------------------------------------------------------------- */
/*@media  only screen and (min-width: 800px) {
    .flip-card {
        background-color: transparent;*/
       /* width: 300px;
        height: 300px;*/
       /* perspective: 1000px;
        transform: Scale(0.8);
    }
}*/

/* ------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* ------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 650px) {

    .badge_size {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

/* ------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 550px) {

    .badge_size {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 351px) {

    .badge_size {
        margin: 0 auto;
        width: 150px;
        height: 150px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}